/* Case study design system — v3 (2026-10-29).
 * Content-led editorial layout. Uses existing Onest/Lora font files.
 * This layer only affects the focused Kuznitsa portfolio.
 */
:root {
  --case-ink:#f4f6f3;
  --case-sub:#bacacb;
  --case-edge:rgba(154,199,193,.22);
  --case-green:#82ebd1;
  --case-orange:#f8a18e;
}
.section.cases {
  background:
    radial-gradient(ellipse 32% 30% at 87% 0%,rgba(98,168,153,.055),transparent),
    linear-gradient(180deg,#090e13 0%,#0a1016 100%);
}
.story {
  overflow:clip;
  position:relative;
  margin-bottom:26px;
  border:1px solid var(--case-edge);
  border-radius:5px;
  box-shadow:0 12px 44px rgba(0,0,0,.11);
}
.story .story-head {
  padding-bottom:23px;
  border-bottom:1px solid rgba(154,199,193,.15);
}
.story .story-head .issue {
  font-family:Consolas,monospace;
  font-size:12px;
  line-height:1.65;
  color:#9ee8d7;
  letter-spacing:.095em;
}
.story .story-head .tag {
  font-size:11px;
  max-width:100%;
  line-height:1.6;
}
.story .story-intro {
  margin:38px 0 31px;
  gap:34px;
  align-items:end;
}
.story .story-intro > p {
  max-width:670px;
  color:#d0dedc;
  line-height:1.71;
}
.story .story-intro .small-label {
  letter-spacing:.09em;
  color:var(--case-green);
}
.story .story-sub {
  font-size:18px!important;
  font-weight:550;
  letter-spacing:-.012em;
}
.story .story-grid {
  padding-top:28px;
  gap:44px;
}
.story .steps li {
  border-bottom-color:rgba(154,199,193,.15);
  padding-bottom:18px;
}
.story .steps b {color:#fff}
.story .evidence {
  padding-left:29px;
  border-left:1px solid rgba(131,235,208,.55);
}
.story .evidence .rule {border-color:rgba(154,199,193,.18)}
.story a.text-link {
  text-decoration:none;
  color:#97f2d8;
  padding:4px 0;
  transition:color .18s ease,transform .18s ease;
}
.story a.text-link:hover {
  color:#fff;
  transform:translateX(3px);
}
.research-stats {
  border:0;
  margin:25px 0 33px;
  gap:1px;
  background:rgba(128,240,210,.17);
}
.research-stats > div {
  min-height:127px;
  display:flex;
  flex-direction:column;
  gap:11px;
  justify-content:center;
  padding:24px 24px 22px;
  border:0;
  background:linear-gradient(144deg,#10282a,#112025 65%,#0f1b20);
}
.research-stats strong {
  font-family:"Onest",Arial,sans-serif;
  color:#a4ffe4;
  font-size:clamp(25px,2.4vw,39px);
  letter-spacing:-.062em;
  line-height:1.08;
}
.research-stats span {
  font-size:14px;
  line-height:1.48;
  color:#c9dcda;
  max-width:235px;
}
.research-workflow {
  margin:0 0 28px;
  padding:34px 0 8px;
  border-top:1px solid rgba(154,199,193,.2);
}
.research-workflow-heading {
  display:grid;
  grid-template-columns:minmax(200px,.4fr) minmax(0,1fr);
  gap:26px;
  align-items:center;
  margin-bottom:25px;
}
.research-workflow-heading .small-label {
  font-size:11px;
  font-weight:800;
  letter-spacing:.11em;
  margin:0;
}
.research-workflow-heading p {
  margin:0;
  color:#c5d5d2;
  font-size:15px;
  line-height:1.7;
}
.research-timeline {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  background:rgba(128,240,210,.18);
  gap:1px;
  border:1px solid rgba(128,240,210,.19);
}
.research-stage {
  min-width:0;
  padding:27px 24px 29px;
  background:linear-gradient(145deg,#111f26,#0c171c 65%,#0b131a);
}
.research-date {
  display:flex;
  align-items:baseline;
  gap:9px;
  margin-bottom:24px;
}
.research-date span {
  font-family:"Lora",Georgia,serif;
  font-size:clamp(43px,4.2vw,67px);
  color:var(--case-green);
  font-style:italic;
  font-weight:550;
  line-height:1;
}
.research-date small {
  color:#9caca9;
  font:700 10px/1.2 Consolas,monospace;
  letter-spacing:.1em;
}
.research-stage h4 {
  margin:0 0 11px;
  font-family:"Onest",Arial,sans-serif;
  font-weight:750;
  font-size:clamp(18px,1.5vw,22px);
  line-height:1.28;
  letter-spacing:-.038em;
}
.research-stage p {
  margin:0;
  color:#bfcfcb;
  font-size:15px;
  line-height:1.72;
}
.methodology {
  margin:26px 0 29px;
  padding:31px 0 34px;
  border-top:1px solid var(--case-edge);
  border-bottom:1px solid var(--case-edge);
}
.method-heading {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:26px;
  margin-bottom:22px;
}
.method-heading span {
  color:var(--case-green);
  flex:none;
  font-size:11px;
}
.method-heading h4 {
  margin:0;
  max-width:680px;
  text-align:right;
  font-family:"Onest",Arial,sans-serif;
  font-weight:750;
  font-size:clamp(20px,2vw,30px);
  line-height:1.3;
  letter-spacing:-.048em;
}
.method-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.method-grid > div {
  min-width:0;
  background:linear-gradient(145deg,rgba(25,42,47,.88),rgba(14,25,30,.93));
  border:1px solid rgba(154,199,193,.21);
  padding:22px 24px 24px;
}
.method-grid span {
  display:block;
  font:800 11px/1.3 Consolas,monospace;
  letter-spacing:.08em;
  color:#9deed6;
  margin-bottom:15px;
}
.method-grid strong {
  font-family:"Onest",Arial,sans-serif;
  font-size:21px;
  display:block;
  letter-spacing:-.039em;
  line-height:1.3;
  color:#fff;
}
.method-grid p {
  margin:10px 0 0;
  font-size:15px;
  line-height:1.69;
  color:#bacac7;
}
.story-game {
  background:
    radial-gradient(ellipse 42% 20% at 100% 2%,rgba(248,161,142,.09),transparent),
    linear-gradient(135deg,#171d25,#0c121a 70%);
  border-top:3px solid rgba(248,161,142,.7);
}
.story-game .small-label,.story-game .story-head .issue {
  color:#ffb2a1;
}
.story-game .story-sub { color:#ffae9d!important; }
.gamejam-facts {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  margin:0 0 32px;
  background:rgba(247,159,139,.20);
}
.gamejam-facts > div {
  background:#182129;
  padding:24px 24px 26px;
  min-width:0;
}
.gamejam-facts strong {
  display:block;
  color:#ffad98;
  font-size:clamp(24px,2.4vw,34px);
  font-weight:780;
  letter-spacing:-.055em;
  line-height:1.12;
}
.gamejam-facts span {
  display:block;
  color:#d0cbca;
  font-size:14px;
  line-height:1.45;
  margin-top:10px;
}
.leadership-focus {
  border:1px solid rgba(128,240,210,.3);
  background:linear-gradient(115deg,rgba(22,51,49,.77),rgba(12,24,30,.9));
  margin:6px 0 25px;
  padding:23px 27px;
  display:grid;
  grid-template-columns:minmax(140px,.24fr) minmax(0,1fr);
  align-items:center;
  gap:27px;
}
.leadership-focus span {
  font:800 11px Consolas,monospace;
  color:#9df4da;
  letter-spacing:.12em;
}
.leadership-focus p {
  color:#e1e9e7;
  margin:0;
  font-size:17px;
  line-height:1.64;
  letter-spacing:-.015em;
}
.story-feature {border-top:3px solid rgba(128,240,210,.68)}
.story-research {border-top:3px solid rgba(128,240,210,.67)}
/* section navigation and reading progress, including narrow screens */
.case-jump-links {
  scrollbar-color:rgba(128,240,210,.42) transparent;
}
@media(max-width:1120px) {
 .research-stage {padding:23px 19px 25px}
 .research-stage p {font-size:14.5px}
 .story .story-grid {gap:27px}
 .research-workflow-heading {grid-template-columns:1fr;gap:8px}
}
@media(max-width:760px) {
 .story {padding:24px 19px 29px;border-radius:3px}
 .story .story-head {padding-bottom:16px}
 .story .story-intro {margin-top:27px}
 .story .story-grid {padding-top:24px;gap:27px}
 .research-stats {grid-template-columns:1fr;margin:20px 0 26px}
 .research-stats > div {min-height:0;padding:17px 20px;gap:6px}
 .research-stats strong {font-size:32px}
 .research-stats span {max-width:none;font-size:14px}
 .research-workflow {padding-top:25px;margin-bottom:24px}
 .research-workflow-heading {margin-bottom:16px}
 .research-workflow-heading p {font-size:15px}
 .research-timeline {grid-template-columns:1fr}
 .research-stage {display:grid;grid-template-columns:68px minmax(0,1fr);gap:18px;padding:18px 18px 20px}
 .research-date {display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin:0}
 .research-date span {font-size:50px}
 .research-date small {font-size:9px}
 .research-stage h4 {font-size:19px;margin:0 0 7px}
 .research-stage p {font-size:14.5px;line-height:1.66}
 .methodology {margin:20px 0 24px;padding:25px 0}
 .method-heading {display:block;margin-bottom:16px}
 .method-heading h4 {text-align:left;font-size:24px;margin-top:12px}
 .method-grid {grid-template-columns:1fr;gap:8px}
 .method-grid > div {padding:18px 19px 19px}
 .method-grid span {font-size:10px;margin-bottom:11px}
 .method-grid strong {font-size:20px}
 .method-grid p {font-size:15px;line-height:1.66}
 .gamejam-facts {grid-template-columns:1fr;margin-bottom:23px}
 .gamejam-facts > div {display:flex;align-items:baseline;gap:17px;padding:15px 17px}
 .gamejam-facts strong {font-size:26px;flex:0 0 auto}
 .gamejam-facts span {font-size:13px;margin:0}
 .leadership-focus {grid-template-columns:1fr;gap:10px;padding:19px 19px;margin-bottom:22px}
 .leadership-focus p {font-size:16px;line-height:1.63}
 .story .evidence {padding-left:18px}
}
@media(max-width:360px) {
 .story {padding:21px 14px 26px}
 .research-stage {grid-template-columns:57px 1fr;gap:12px;padding:16px 12px}
 .research-date span {font-size:42px}
 .gamejam-facts > div {gap:13px}
 .gamejam-facts strong {font-size:23px}
 .leadership-focus p {font-size:15px}
}
@media(prefers-reduced-motion:reduce) {
 .story a.text-link {transition:none}
 .story a.text-link:hover {transform:none}
}