@font-face {font-family:"Lora";font-style:italic;font-weight:400 700;font-display:swap;src:url("./fonts/lora-italic-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face {font-family:"Lora";font-style:italic;font-weight:400 700;font-display:swap;src:url("./fonts/lora-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family:"Onest";font-style:normal;font-weight:400 800;font-display:swap;src:url("./fonts/onest-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face {font-family:"Onest";font-style:normal;font-weight:400 800;font-display:swap;src:url("./fonts/onest-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}


/* Typography and readability layer for the Kuznitsa portfolio.
   Embedded open-licensed fonts; no runtime dependency on Google Fonts. */
:root {
  --font: "Onest", "Segoe UI", Arial, sans-serif;
  --font-display: "Onest", "Segoe UI", Arial, sans-serif;
  --font-editorial: "Lora", Georgia, serif;
}
html { scroll-padding-top: 92px; }
body {
  font-family: var(--font);
  font-size: 17px;
  font-weight: 430;
  line-height: 1.64;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,strong,.btn,.topbar { font-family: var(--font-display); }
.hero h1 {
  font-weight: 760;
  font-size: clamp(3.55rem, 6.15vw, 6.65rem);
  line-height: 1.055;
  letter-spacing: -.066em;
}
h1 em,h2 em {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 490;
  letter-spacing: -.064em;
  line-height: 1.02;
}
.hero { min-height: 705px; }
.hero .minor {
  font-size: 13px;
  letter-spacing: .105em;
  margin-top: 39px;
}
.hero .eyebrow {
  font-size: 12px;
  letter-spacing: .055em;
  padding: 11px 14px;
  font-weight: 700;
}
.lead {
  max-width: 860px;
  font-size: clamp(19px, 1.42vw, 22px);
  line-height: 1.64;
  font-weight: 450;
  letter-spacing: -.018em;
  color: #e0e8e7;
  margin-top: 29px;
}
.actions { gap: 13px; margin-top: 33px; }
.btn {
  min-height: 62px;
  padding: 17px 23px;
  font-size: 16px;
  font-weight: 720;
  letter-spacing: -.025em;
  gap: 27px;
}
.btn span { font-family: var(--font); font-size: 20px; font-weight: 500; }
.topbar { height: 76px; }
.topbar nav a,.top-link { font-size: 13px; font-weight: 650; }
.brand { font-size: 15px; }
.hero-base {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .075em;
  padding-top: 20px;
}
.overview {
  gap: 15px;
  padding: 20px clamp(20px,5.2vw,90px) 28px;
  background: #0a1116;
  border-bottom: 1px solid rgba(201,222,225,.19);
}
.overview > div {
  border: 1px solid rgba(179,215,216,.17);
  border-top: 2px solid rgba(128,240,210,.64);
  margin: 0;
  padding: 24px 26px 26px;
  min-height: 176px;
  background: linear-gradient(145deg,rgba(22,39,47,.63),rgba(13,20,27,.63));
}
.overview > div:last-child { border: 1px solid rgba(179,215,216,.17); border-top:2px solid rgba(128,240,210,.64); }
.overview span {
  font-size: 12px;
  letter-spacing: .065em;
  margin: 0 0 18px;
  color: #8dffe0;
}
.overview strong {
  font-size: clamp(19px,1.37vw,23px);
  line-height: 1.37;
  font-weight: 700;
  letter-spacing: -.045em;
  color: #f7f7f4;
  display:block;
  max-width: 420px;
}
.overview p {
  font-size: 14px;
  line-height: 1.5;
  color: #b0c3c2;
  margin: 12px 0 0;
}
.section { gap: 32px; padding-top: 92px; padding-bottom: 96px; }
.section-index p { font-size: 11px; }
.section-title { gap: 52px; margin-bottom: 42px; }
.section-title h2 {
  font-size: clamp(3rem,4.8vw,5.4rem);
  font-weight: 760;
  line-height: 1.09;
  letter-spacing: -.067em;
}
.section-title > p {
  color: #c5d0d0;
  font-size: 17px;
  font-weight: 440;
  line-height: 1.74;
}
.eyebrow,.small-label,.issue,.tag { letter-spacing: .07em; }
.section-title .eyebrow { font-size: 12px; }
.story { padding: 40px 40px 44px; }
.story-head .issue { font-size: 12px; line-height: 1.5; }
.story-head .tag { font-size: 11px; line-height: 1.5; }
.story-intro { gap: 43px; margin-top: 43px; margin-bottom: 37px; }
.story h3 {
  font-size: clamp(2.7rem,4.1vw,4.7rem);
  font-weight: 750;
  line-height: 1.09;
  letter-spacing: -.06em;
}
.story-sub {
  font-size: 18px!important;
  font-weight: 530;
  line-height: 1.52!important;
}
.story-intro > p { font-size: 17px; line-height: 1.73; color: #d5dedc; }
.story .small-label { font-size: 12px; }
.story h4 {
  font-size: 20px;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: -.032em;
  margin-bottom: 22px;
}
.steps li {
  font-size: 16px;
  line-height: 1.72;
  color: #c7d1d0;
  padding-bottom: 17px;
  margin-bottom: 17px;
  padding-left: 29px;
}
.steps b { color: #fff; font-weight: 740; }
.steps li:before { font-size: 19px; }
.evidence { padding-left: 26px; }
.evidence strong { font-size: 23px; line-height: 1.33; font-weight: 740; }
.evidence > p:not(.small-label) {
  font-size: 16px;
  line-height: 1.73;
  color: #c4d3d1;
}
.evidence .text-link { font-size: 15px; line-height: 1.45; font-weight: 700; }
.evidence .micro-note { font-size: 14px!important; line-height: 1.6!important; }
.small-stories h3 {
  font-size: clamp(1.8rem,2.45vw,2.65rem);
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -.048em;
}
.small-stories p { font-size: 17px; line-height: 1.73; color:#d0dad9; }
.small-stories .small-label { font-size: 12px; }
.capabilities { gap: 0; }
.capabilities > div { padding: 30px; min-height: 235px; }
.capabilities span { font-size: 12px; }
.capabilities strong {
  font-size: 22px;
  line-height: 1.35;
  font-weight: 730;
  margin-top: 26px;
  letter-spacing: -.035em;
}
.capabilities p {
  font-size: 16px;
  line-height: 1.67;
  color: #c0ccca;
}
.closing p {
  font-family: var(--font-editorial);
  font-size: clamp(24px, 2.25vw, 34px);
  line-height: 1.45;
  font-weight: 500;
}
footer { font-size: 14px; }
footer strong { font-size: 14px; }

@media (max-width: 1120px) {
  .story-intro { gap: 22px; }
  .hero h1 { font-size: clamp(3.4rem,7.7vw,6.3rem); }
  .section-title { gap: 30px; }
  .overview > div { padding: 23px 20px; }
  .overview strong { font-size: clamp(20px,1.8vw,21px); }
  .overview p { font-size: 13.5px; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 68px; }
  .topbar { height: 64px; }
  .top-link { font-size: 11px; }
  .hero { min-height: 0; padding-top: 65px; }
  .hero h1 { font-size: clamp(2.75rem,9.6vw,4.45rem); line-height: 1.065; letter-spacing: -.063em; }
  .hero .minor { font-size: 12px; margin-top: 35px; }
  .hero .eyebrow { font-size: 10px; letter-spacing: .02em; }
  .lead { font-size: 17px; font-weight: 460; line-height: 1.65; margin-top: 27px; }
  .actions { gap: 11px; }
  .btn { font-size: 15px; min-height: 55px; padding: 14px 17px; }
  .hero-base { font-size: 10px; line-height: 1.65; gap: 10px; margin-top: 52px; }
  .overview { grid-template-columns: 1fr; padding: 14px 20px 22px; gap: 10px; }
  .overview > div, .overview > div:last-child {
    padding: 20px 21px;
    min-height: 0;
    border: 1px solid rgba(179,215,216,.17);
    border-left: 2px solid rgba(128,240,210,.72);
  }
  .overview span { font-size: 11px; margin-bottom: 9px; }
  .overview strong { font-size: 20px; line-height: 1.32; }
  .overview p { font-size: 14px; margin-top: 8px; }
  .section { padding-top: 67px; padding-bottom: 70px; }
  .section-index p { font-size: 10px; }
  .section-title h2 { font-size: clamp(2.65rem,9.25vw,4.3rem); line-height: 1.1; }
  .section-title > p { font-size: 16px; line-height: 1.68; }
  .story { padding: 25px 23px 32px; }
  .story h3 { font-size: clamp(2.4rem,9vw,3.8rem); line-height: 1.1; }
  .story-intro > p { font-size: 16px; line-height: 1.7; }
  .story-sub { font-size: 17px!important; }
  .story-grid { grid-template-columns: minmax(0,1fr); }
  .story-grid > * { min-width: 0; }
  .evidence .text-link { width: auto; overflow-wrap: anywhere; }
  .story h4 { font-size: 19px; }
  .steps li { font-size: 15.5px; line-height: 1.72; }
  .evidence { padding-left: 20px; }
  .evidence strong { font-size: 21px; }
  .evidence > p:not(.small-label) { font-size: 15.5px; }
  .small-stories h3 { font-size: clamp(1.85rem,7.2vw,2.6rem); }
  .small-stories p { font-size: 16px; }
  .capabilities > div { min-height: 0; padding: 25px 23px; }
  .capabilities strong { font-size: 21px; margin-top: 13px; }
  .capabilities p { font-size: 15.5px; }
  .closing p { font-size: 24px; }
  footer { font-size: 13px; }
}
@media (max-width: 360px) {
  .hero h1 { font-size: 2.6rem; }
  .btn { width: 100%; font-size: 14.5px; }
  .lead { font-size: 16.5px; }
  .overview strong { font-size: 19px; }
  .story { padding: 20px 16px 27px; }
  .story h3 { font-size: 2.2rem; }
  .steps li { font-size: 15px; }
  .section-title h2 { font-size: 2.45rem; }
}

/* Case-study evidence hierarchy: researched selection funnel and product direction. */
.story-research { border-color:rgba(128,240,210,.27); background:radial-gradient(circle at 95% 7%,rgba(128,240,210,.065),transparent 45%),linear-gradient(140deg,#142029,#0b1117); }
.story-game { background:radial-gradient(circle at 96% 8%,rgba(255,152,127,.075),transparent 39%),linear-gradient(140deg,#151c26,#0a1118); }
.research-stats { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid rgba(128,240,210,.27);margin:6px 0 36px;background:rgba(128,240,210,.035); }
.research-stats > div {padding:22px 24px;min-width:0;border-right:1px solid rgba(128,240,210,.19);display:grid;align-content:start;gap:9px}
.research-stats > div:last-child {border-right:0}
.research-stats strong {font-family:var(--font-display);font-size:clamp(24px,2.3vw,36px);font-weight:780;letter-spacing:-.06em;color:var(--mint);line-height:1.13}
.research-stats span {font-size:13px;line-height:1.5;color:#c4d1ce}
@media(max-width:760px) {
 .research-stats {grid-template-columns:1fr;gap:0;margin-bottom:28px}
 .research-stats > div {padding:16px 19px;border-right:0;border-bottom:1px solid rgba(128,240,210,.19);gap:4px}
 .research-stats > div:last-child {border:0}
 .research-stats strong {font-size:29px}
 .research-stats span {font-size:14px}
}

/* Mobile jump links keep all five hackathon stories directly accessible. */
.case-jump-links{display:none}
@media(max-width:760px){
 .case-jump-links{display:flex;align-items:center;gap:8px;overflow-x:auto;padding:10px 20px;border-bottom:1px solid var(--line);background:#0b1217;scrollbar-width:thin;scroll-snap-type:x proximity}
 .case-jump-links a{flex:none;scroll-snap-align:start;padding:8px 12px;border:1px solid rgba(128,240,210,.25);color:#d8f5ee;font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap}
 .case-jump-links a:focus-visible,.case-jump-links a:hover{border-color:var(--mint);color:var(--mint)}
}