/* ============================================================
   UX PORTFOLIO — cs- design tokens
   Derived from main identity (visualbook.html), light palette,
   WCAG AAA/AA verified. Never use raw gold (#FFD700) as text.
============================================================ */
:root{
  /* Mineral green-grey: quieter than the former yellow-olive paper,
     while the deep Enow green remains the identity anchor. */
  --cs-paper:   #E3E9E2;
  --cs-surface: #F7F8F4;
  --cs-border:  #C9D6CC;
  --cs-ink:     #0A4B42;
  --cs-muted:   #477269;
  --cs-copper:  #A64F24;
  --cs-gold-ui: #8C7800;
  --cs-gold-fill: #FFD700;

  --font-d: 'DM Serif Display', Georgia, serif;
  --font-s: 'Space Grotesk', sans-serif;
  --font-m: 'IBM Plex Mono', monospace;

  /* The page has two deliberate rails.  Prose stays readable; visual
     evidence can grow wider without turning the whole case study into a
     centred card. */
  --measure: 42rem;
  --intro-measure: 58rem;
  --media-measure: 72rem;
  --canvas: min(88vw, 78rem);
  --gutter: clamp(1.25rem, 5vw, 4rem);
}

/* ============================================================
   PROTOTYPE DARK ZONE — one deliberate dark moment, not a
   gradient system. Earlier attempts tried a 4-step light-to-dark
   descent across several sections; it produced a muddy green-on-
   green midtone that passed contrast math but read as a mistake.
   Simplified per direction: rest of the page stays on the
   standard light palette, only Prototype (where the SOS screens
   appear) goes dark, reusing the site's own nav-bar navy — a hard
   cut at the section boundary, no blend strip.
============================================================ */
.cs-zone-z3{
  --cs-paper:   #001F1C;
  --cs-surface: #0B2E29;
  --cs-border:  #163F38;
  --cs-ink:     #F5F5DC;
  --cs-muted:   #B9C7BC;
  --cs-copper:  #EA8347;
  --cs-gold-ui: #FFD700;
  background:var(--cs-paper);
}
.cs-spotlight{
  --spotlight-x:50%;
  --spotlight-y:50%;
  position:relative;isolation:isolate;
}
.cs-spotlight::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(34rem 22rem ellipse at var(--spotlight-x) var(--spotlight-y),
    rgba(234,131,71,.10) 0%,rgba(234,131,71,.035) 34%,transparent 70%);
  mix-blend-mode:screen;opacity:0;transition:opacity .7s ease;
}
.cs-spotlight[data-spotlight="active"]::before{opacity:1;}
.cs-zone-z3 > .cs-section{position:relative;z-index:1;}
.cs-cover.cs-spotlight > *{position:relative;z-index:1;}
.cs-contact.cs-spotlight > *{position:relative;z-index:1;}
.site-footer.cs-spotlight > *{position:relative;z-index:1;}
@media (prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){
  .cs-spotlight::before{display:none;}
}
.cs-zone-z3 .cs-chapter-heading,
.cs-zone-z3 .cs-chapter-content{
  color:var(--cs-ink);
}
.cs-zone-z3 .cs-chapter-content .cs-subtitle{color:var(--cs-muted);}
.cs-zone-z3 .cs-chapter-content .cs-mini-head,
.cs-zone-z3 .cs-quote{color:var(--cs-ink);}

/* Lightening pass: alternate a near-white surface tone on the
   research/data-heavy sections, so the page isn't one unbroken
   stretch of the same green paper top to bottom. Same palette
   family (cs-surface already exists for cards), just promoted to
   the whole section instead of only small elements. */
.cs-section-surface{
  background:var(--cs-surface);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-height) + 1rem);}
body{
  background:var(--cs-paper);
  color:var(--cs-ink);
  font-family:var(--font-s);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* The light sits over the current page for one breath before a header route.
   It uses screen blending rather than page opacity, so it cannot expose a
   pale document background or turn the page into a flashing overlay. */
body::after{content:'';position:fixed;inset:0;z-index:300;pointer-events:none;background:#CDE7D7;mix-blend-mode:screen;opacity:0;transition:opacity .2s ease;}
html.header-navigation-leaving body::after{opacity:.055;}
@media (prefers-reduced-motion:reduce){body::after{display:none;}}
a{color:var(--cs-copper);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;display:block;}
:focus-visible{outline:2px solid var(--cs-gold-ui);outline-offset:2px;}

/* ============================================================
   SITE HEADER — bridge element to the art-hub identity (main
   branch). Deliberately dark/emerald, not cs- tokens: this bar
   is the one place the two sites share a signature. Values are
   the main site's own --bg/--em/--gold/--ch, hardcoded here
   since this file otherwise carries only the light cs- system.
============================================================ */
:root{
  --nav-bg:   #001F1C;
  --nav-em:   #004D40;
  --nav-gold: #FFD700;
  --nav-ch:   #F5F5DC;
  --nav-ch2:  rgba(245,245,220,0.75);
  --nav-height: 4.75rem;
}
.site-header{
  position:fixed;top:0;left:0;right:0;
  height:var(--nav-height);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 4vw;
  z-index:200;
  background:rgba(0,31,28,0.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--nav-em);
}

/* Wordmark — this IS the logo, has to carry real presence */
.site-header .site-brand{
  font-family:var(--font-d);font-weight:400;
  font-size:1.5rem;letter-spacing:-0.01em;
  color:var(--nav-ch);
  white-space:nowrap;
}

/* Nav links + lang switch grouped together, well clear of the brand */
.site-header .nav-group{
  display:flex;align-items:center;gap:2.5rem;
}
.site-header .site-nav{
  display:flex;gap:2rem;
  flex-wrap:wrap;
}
.site-header .site-nav a{
  font-family:var(--font-m);font-size:.7rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--nav-ch2);
  position:relative;padding-bottom:3px;text-decoration:none;
}
.site-header .site-nav a::after{
  content:'';position:absolute;bottom:0;left:0;
  width:0;height:1px;background:var(--nav-gold);
  transition:width .3s cubic-bezier(0.16,1,0.3,1);
}
.site-header .site-nav a:hover{color:var(--nav-ch);text-decoration:none;}
.site-header .site-nav a:hover::after{width:100%;}
.site-header .site-nav a.is-active{color:var(--nav-ch);}
.site-header .site-nav a.is-active::after{width:100%;}

/* Collapsed lang switch — single pill, opens a small dropdown */
.site-header .lang-switch{position:relative;}
.site-header .lang-current{
  display:flex;align-items:center;gap:.35rem;
  font-family:var(--font-m);font-size:.68rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--nav-ch2);
  background:none;border:1px solid var(--nav-em);border-radius:100px;
  cursor:pointer;
  padding:.5rem 1rem;min-height:44px;
  transition:border-color .2s, color .2s;
}
.site-header .lang-current .chevron{
  display:inline-block;
  width:0;height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid var(--nav-ch2);
  transition:transform .25s ease, border-top-color .2s;
}
.site-header .lang-current:hover .chevron{border-top-color:var(--nav-ch);}
.site-header .lang-current:hover{color:var(--nav-ch);border-color:var(--nav-ch2);}
.site-header .lang-switch[data-open="true"] .lang-current .chevron{transform:rotate(180deg);}
.site-header .lang-menu{
  position:absolute;top:calc(100% + .5rem);right:0;
  background:var(--nav-bg);border:1px solid var(--nav-em);
  border-radius:10px;overflow:hidden;
  min-width:100%;
  box-shadow:0 12px 30px rgba(0,0,0,0.35);
}
.site-header .lang-menu button{
  display:block;width:100%;
  font-family:var(--font-m);font-size:.68rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--nav-ch2);
  background:none;border:none;cursor:pointer;text-align:left;
  padding:.65rem 1rem;min-height:44px;
}
.site-header .lang-menu button:hover{background:var(--nav-em);color:var(--nav-ch);}
.site-header .lang-menu button[aria-selected="true"]{color:var(--nav-gold);}

@media (max-width:760px){
  .site-header{
    height:auto;flex-wrap:wrap;
    padding:1rem 5vw;gap:.75rem 1rem;
  }
  .site-header .site-brand{font-size:1.2rem;}
  .site-header .nav-group{
    order:3;width:100%;
    justify-content:center;gap:1.5rem;
    padding-top:.75rem;
    border-top:1px solid var(--nav-em);
  }
  .site-header .site-nav a{font-size:.62rem;}
}
@media (max-width:380px){
  .site-header .nav-group{gap:1rem;}
  .site-header .site-nav{gap:1.1rem;}
}

/* ============================================================
   SILENT DOT NAV — recycles #section-counter pattern, light palette
============================================================ */
#cs-dots{
  position:fixed;right:2rem;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:.7rem;z-index:150;
}
.cs-dot{
  position:relative;
  width:6px;height:6px;border-radius:50%;
  background:var(--cs-border);
  cursor:pointer;
  transition:background .3s, transform .3s;
}
.cs-dot.active{background:var(--cs-copper);transform:scale(1.6);}

/* Tooltip is a floating overlay, deliberately hardcoded outside the
   cs- token system (like .site-header) — it must read correctly at
   every scroll position, including zones where --cs-ink itself has
   flipped to a light color, so it can't inherit from the section
   currently underneath it. */
.cs-dot::after{
  content:attr(data-label);
  position:absolute;right:1.3rem;top:50%;transform:translateY(-50%);
  font-family:var(--font-m);font-size:.65rem;letter-spacing:.05em;
  white-space:nowrap;
  background:#001F1C;color:#F5F5DC;
  padding:.35rem .7rem;border-radius:4px;
  opacity:0;pointer-events:none;
  transition:opacity .25s;
}
.cs-dot:hover::after{opacity:1;}

/* Dark-zone variant — #cs-dots sits at body level, outside the
   .cs-zone-z3 wrapper, so it can't pick up scoped tokens via the
   cascade. Toggled by the scroll-spy JS via body[data-zone]. */
body[data-zone="z3"] .cs-dot{
  background:#3A554C;
}
body[data-zone="z3"] .cs-dot.active{
  background:#FFC080;
}

@media (max-width:900px){ #cs-dots{display:none;} }

/* ============================================================
   CASE STUDY — header meta block
============================================================ */
.cs-header{
  width:min(100% - (var(--gutter) * 2), var(--media-measure));
  margin:0 auto;
  padding:calc(var(--nav-height) + 3.5rem) 0 3.5rem;
}
.cs-cover{
  background:var(--nav-bg);
  color:var(--nav-ch);
  padding-bottom:clamp(3.5rem, 7vw, 7rem);
}
.cs-cover .cs-header{padding-bottom:3.5rem;}
.cs-eyebrow{
  display:block;
  font-family:var(--font-m);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cs-copper);
  margin-bottom:1rem;
}
.cs-title{
  font-family:var(--font-d);font-weight:400;
  line-height:1.1;letter-spacing:-0.015em;
  margin-bottom:2.25rem;
}
.cs-title-project,
.cs-title-statement{display:block;}
.cs-title-project{
  font-size:clamp(1.55rem,2.4vw,2.35rem);
  line-height:1.2;color:var(--nav-ch2);
  margin-bottom:.65rem;
}
.cs-title-statement{
  max-width:24ch;
  font-size:clamp(2.6rem,5vw,4.7rem);
  color:var(--nav-ch);
}
/* Forces a specific phrase to stay on one line at normal widths (used to
   pin an exact editorial line break in a heading). Falls back to normal
   wrapping on narrow phones so it can't run off-screen there. */
.cs-hard-line{white-space:nowrap;}
.cs-meta-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  gap:1.5rem;
  padding:1.5rem 0;
  border-top:1px solid var(--cs-border);
  border-bottom:1px solid var(--cs-border);
  margin-bottom:1.75rem;
}
.cs-meta-grid dt{
  font-family:var(--font-m);font-size:.62rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--cs-muted);
  margin-bottom:.4rem;
}
.cs-meta-grid dd{
  font-family:var(--font-s);font-size:.95rem;color:var(--cs-ink);
}
/* External links stay in the cover, but read as project utilities rather
   than competing calls-to-action. */
.cs-project-links{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;}
.cs-project-links a{
  font-family:var(--font-m);font-size:.68rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--nav-ch2);text-decoration:none;
  padding:.35rem 0;border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.cs-project-links a:hover{color:var(--nav-ch);border-color:var(--nav-ch);}
.cs-project-links a span{margin-left:.25rem;color:var(--nav-gold);}
.cs-btn{
  display:inline-block;
  padding:.7rem 1.5rem;border-radius:100px;
  font-family:var(--font-m);font-size:.68rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--cs-ink);color:var(--cs-ink);
  transition:all .3s ease;
}
.cs-btn:hover{background:var(--cs-ink);color:var(--cs-surface);text-decoration:none;}
.cs-btn.cs-btn-primary{background:var(--cs-ink);color:var(--cs-surface);}
.cs-btn.cs-btn-primary:hover{background:var(--cs-copper);border-color:var(--cs-copper);}

/* Cover variants use the existing dark identity rather than a new palette. */
.cs-cover .cs-meta-grid{border-color:rgba(245,245,220,.18);}
.cs-cover .cs-meta-grid dt{color:var(--nav-ch2);}
.cs-cover .cs-meta-grid dd{color:var(--nav-ch);}
.cs-cover .cs-btn{border-color:var(--nav-ch2);color:var(--nav-ch);}
.cs-cover .cs-btn:hover{background:var(--nav-ch);color:var(--nav-bg);}
.cs-cover .cs-btn.cs-btn-primary{background:var(--nav-ch);border-color:var(--nav-ch);color:var(--nav-bg);}
.cs-cover .cs-btn.cs-btn-primary:hover{background:var(--nav-gold);border-color:var(--nav-gold);color:var(--nav-bg);}

/* ============================================================
   OUTCOME PREVIEW — no heading, sits right under header
============================================================ */
.cs-outcome{
  width:min(100% - (var(--gutter) * 2), var(--intro-measure));
  margin:0 auto;
  padding:0 0 clamp(2.25rem, 4vw, 3.5rem);
}
.cs-outcome p{
  font-size:clamp(1.08rem, 1.35vw, 1.3rem);line-height:1.7;
}
.cs-cover .cs-outcome p{color:var(--nav-ch2);}

/* ============================================================
   SECTIONS
============================================================ */
.cs-section{
  width:100%;
  margin:0;
  padding:clamp(3.5rem, 8vw, 6.5rem) var(--gutter);
  scroll-margin-top:6rem;
}

/* A section is a full-width chapter, never a coloured box in the middle
   of the viewport. The chapter grid creates the editorial left rail:
   a heading anchors the section while the evidence is read on the right. */
.cs-chapter-grid{
  width:min(100%, var(--media-measure));
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(12rem, .75fr) minmax(0, 1.55fr);
  gap:clamp(2rem, 6vw, 5rem);
  align-items:start;
}
.cs-chapter-heading{min-width:0;}
.cs-chapter-heading h2{
  font-family:var(--font-d);font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  line-height:1.3;letter-spacing:-0.005em;
  margin:0;
}
/* These two headings pin a specific mid-sentence line break (via a
   .cs-hard-line span) that doesn't fit the narrow left-rail column at the
   base heading size, so they're scaled down just enough to clear it with
   margin across the whole desktop width range — verified 800-1920px. */
#ideate .cs-chapter-heading h2{
  font-size:clamp(1.125rem,1.95vw,1.575rem);
}
#reflection .cs-chapter-heading h2{
  font-size:clamp(1.275rem,2.21vw,1.785rem);
}
.cs-chapter-content{min-width:0;}
.cs-chapter-content > *{max-width:100%;}
.cs-chapter-content > *:first-child{margin-top:0;}
.cs-chapter-content > *:last-child{margin-bottom:0;}
.cs-section .cs-chapter-content p{
  width:100%;
}
.cs-chapter-content .cs-subtitle{
  font-family:var(--font-s);font-style:normal;font-weight:500;
  font-size:1.05rem;color:var(--cs-muted);
  margin-bottom:1.75rem;
  line-height:1.55;
}
.cs-chapter-content p{margin-bottom:1.25rem;}
.cs-chapter-content strong{color:var(--cs-ink);font-weight:600;}

/* Mini in-body headers (colon-led) */
.cs-chapter-content .cs-mini-head{
  font-family:var(--font-s);font-weight:600;
  color:var(--cs-ink);display:block;margin-bottom:.5rem;
}

/* The cover is deliberately not a chapter grid. It gives the project
   statement room to land before the editorial left rail begins. */
#hook{
  padding-top:clamp(2.5rem, 4vw, 4rem);
  padding-bottom:0;
}
.cs-intro-copy{
  width:min(100%, var(--intro-measure));
  margin:0 auto;
  text-align:center;
}
/* German compound words run longer than their English equivalents at the
   same character budget, so the shared measure wraps this heading one
   line deeper than intended. Give German pages a bit more room. */
html[lang="de"] .cs-intro-copy{
  width:min(100%, 66rem);
}
.cs-intro-copy h2{
  font-family:var(--font-d);font-weight:400;
  font-size:clamp(2rem,4vw,3.45rem);
  line-height:1.16;letter-spacing:-0.015em;
  margin:0 auto .9rem;
}
.cs-intro-copy .cs-subtitle{
  width:min(100%, var(--measure));
  margin:0 auto;
  font-family:var(--font-s);font-style:normal;font-weight:500;
  font-size:clamp(1.05rem,1.4vw,1.25rem);
  line-height:1.5;color:var(--cs-muted);
}
.cs-intro-divider{
  width:min(100%, var(--measure));
  height:1px;margin:clamp(2rem,4vw,3.5rem) auto 0;
  background:var(--cs-border);
}

/* Pull-quotes / research quotes */
.cs-quote{
  border-left:2px solid var(--cs-gold-ui);
  padding:.25rem 0 .25rem 1.5rem;
  margin:1.75rem 0;
  font-family:var(--font-d);font-style:normal;
  font-size:1.2rem;line-height:1.5;
  color:var(--cs-ink);
}

/* MoSCoW / mini lists */
.cs-section ul{margin:0 0 1.25rem 1.25rem;}
.cs-section li{margin-bottom:.4rem;}

/* ============================================================
   VISUALS — 3 media patterns
============================================================ */
/* Full-bleed (Hook hero only) — breaks out of the editorial column */
.cs-hero-visual{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  aspect-ratio:21/9;
  margin-top:clamp(3rem, 6vw, 5rem);
  margin-bottom:0;
}

/* Placeholder block until real assets are swapped in */
.cs-visual-placeholder{
  display:flex;align-items:center;justify-content:center;
  min-height:14rem;
  background:var(--cs-surface);
  border:1px dashed var(--cs-border);
  border-radius:8px;
  font-family:var(--font-m);font-size:.7rem;letter-spacing:.05em;
  color:var(--cs-muted);text-align:center;padding:1.5rem;
}

/* Three-up variant — same evidence-not-decoration sizing, for a
   before/after/after-on-scroll trio instead of a pair. */
.cs-dashboard-screens.cs-triple{grid-template-columns:repeat(3,9.5rem);}
@media (max-width:760px){.cs-dashboard-screens.cs-triple{grid-template-columns:1fr;}}

/* Native screen exports stay intentionally small: they are evidence for a
   design decision, not a decorative full-width image. */
.cs-dashboard-screens{
  display:grid;
  grid-template-columns:172px 192px;
  justify-content:center;
  align-items:center;
  column-gap:clamp(1.5rem,4vw,3.5rem);
  row-gap:0;
  margin:2.5rem auto;
}
.cs-dashboard-screens img{width:100%;height:auto;}

/* The MoSCoW export carries pale category labels in its transparent area.
   A dark evidence surface restores their contrast without altering the asset. */
.cs-moscow-priorities{
  background:var(--nav-bg);
  padding:clamp(.9rem,2vw,1.5rem);
  border-radius:8px;
}
.cs-artifact-group{margin:2.5rem 0;}
.cs-artifact-group .cs-mini-head{margin:0 0 .75rem;}
.cs-artifact-group .cs-visual-full{margin:0;}
.cs-moscow-priorities img{width:100%;}

/* Side-by-side, alternates L/R via .cs-media-row.reverse */
.cs-media-row{
  display:grid;grid-template-columns:1fr 1fr;
  gap:2.5rem;align-items:center;
  margin-top:2.5rem;
  margin-bottom:2.5rem;
}
.cs-media-row.reverse{direction:rtl;}
.cs-media-row.reverse > *{direction:ltr;}
.cs-media-visual img{max-width:19.75rem;margin:0 auto;}
@media (max-width:760px){
  .cs-media-row{grid-template-columns:1fr;}
  .cs-media-row .cs-media-visual{order:-1;} /* image first on mobile */
  .cs-dashboard-screens{grid-template-columns:1fr;gap:1.25rem;}
}

/* Inline/grid — stat blocks (Empathize), MoSCoW cards (Ideate) */
.cs-stat-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  gap:1.5rem;margin-top:2.5rem;margin-bottom:2.5rem;
}
.cs-stat{
  text-align:center;padding:1.5rem 1rem;
  background:var(--cs-surface);border:1px solid var(--cs-border);
  border-radius:50%;aspect-ratio:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.cs-stat .num{font-family:var(--font-d);font-size:1.8rem;color:var(--cs-copper);}
.cs-stat .label{font-family:var(--font-m);font-size:.62rem;letter-spacing:.03em;color:var(--cs-muted);margin-top:.4rem;}

.cs-card-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:1rem;margin-top:2.5rem;margin-bottom:2.5rem;
}
.cs-card{
  padding:1.25rem;background:var(--cs-surface);
  border:1px solid var(--cs-border);border-radius:8px;
}
.cs-card .card-title{font-family:var(--font-s);font-weight:600;font-size:.85rem;margin-bottom:.4rem;color:var(--cs-ink);}
.cs-card .card-body{font-size:.8rem;color:var(--cs-muted);line-height:1.5;}

/* Most visual meaning lives in the surrounding copy. Only analytical
   artefacts receive a compact, neutral label; quotes keep the accent line. */
.cs-artifact{
  position:relative;
  overflow:visible;
  transition:transform .24s cubic-bezier(.16,1,.3,1),box-shadow .24s ease;
}
.cs-artifact-captioned::after{
  content:attr(data-artifact-label);
  display:block;
  margin-top:.75rem;
  color:var(--cs-muted);
  font-family:var(--font-m);font-size:.62rem;line-height:1.45;letter-spacing:.08em;
  text-align:center;text-transform:uppercase;
}
.cs-artifact:hover{
  transform:translateY(-6px);
}
.cs-visual-full.cs-artifact:hover,
.cs-dashboard-screens.cs-artifact:hover,
.cs-hero-visual.cs-artifact:hover{
  box-shadow:0 14px 28px rgba(166,79,36,.22);
}
.cs-media-visual.cs-artifact img{transition:box-shadow .24s ease;}
.cs-media-visual.cs-artifact:hover img{box-shadow:0 14px 28px rgba(166,79,36,.22);}

/* .cs-visual-full normally clips media to its rounded frame. Artifacts need
   the label to sit outside that frame, so the image itself keeps the radius. */
.cs-visual-full.cs-artifact > img{border-radius:8px;}
.cs-dashboard-screens.cs-artifact{overflow:visible;}
.cs-dashboard-screens.cs-artifact-captioned::after{grid-column:1 / -1;}

/* Full-width stacked image — for rich compositions (persona card,
   moodboard, journey map) that need real estate a side-by-side
   half-column can't give them. One step less dramatic than the
   full-bleed hero: fills the content column, doesn't break out
   of it. */
.cs-visual-full{
  width:100%;
  margin-top:2.5rem;
  margin-bottom:2.5rem;
  border-radius:8px;
  overflow:hidden;
}
.cs-visual-full img{ width:100%; height:auto; display:block; }

/* Two images sharing one figure (e.g. colors + attributes) need real
   breathing room between them, not one shared clipped rectangle. */
.cs-visual-full.cs-stack-gap{
  display:flex;flex-direction:column;gap:1.5rem;
  padding:1.5rem;background:var(--cs-surface);
  overflow:visible;border-radius:12px;
}
.cs-visual-full.cs-stack-gap img{border-radius:8px;}

/* ============================================================
   CONTACT — a dark, direct invitation rather than a form shell
============================================================ */
.cs-contact{
  min-height:calc(100svh - var(--nav-height));
  padding:calc(var(--nav-height) + clamp(4rem,9vw,9rem)) 0 clamp(5rem,10vw,10rem);
  background:var(--nav-bg);color:var(--nav-ch);
}
.cs-contact-grid{
  width:min(100% - (var(--gutter) * 2), var(--media-measure));
  margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:
    "heading heading"
    "story connect";
  column-gap:clamp(3rem,8vw,8rem);row-gap:clamp(3rem,6vw,5.5rem);align-items:start;
}
.cs-contact-heading{grid-area:heading;}
.cs-contact-heading h1{
  max-width:none;
  font-family:var(--font-d);font-size:clamp(3.25rem,5vw,5.5rem);
  font-weight:400;line-height:1.04;letter-spacing:-.025em;
}
.cs-contact-story{grid-area:story;max-width:36rem;}
.cs-contact-story p{font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.65;margin-bottom:1.25rem;color:var(--nav-ch2);}
.cs-contact-story .cs-contact-lead{color:var(--nav-ch);font-weight:500;}
.cs-contact-connect{grid-area:connect;padding-top:.15rem;}
.cs-contact-email-block{margin-top:0;}
.cs-contact-email-block > span{
  display:block;margin-bottom:.65rem;
  font-family:var(--font-m);font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nav-ch2);
}
.cs-contact-email-block a{
  display:inline-block;
  font-family:var(--font-d);font-size:clamp(1.65rem,3vw,2.75rem);line-height:1.2;
  color:var(--nav-ch);text-decoration:none;
  border-bottom:1px solid rgba(245,245,220,.35);
  transition:color .2s ease,border-color .2s ease;
}
.cs-contact-email-block a:hover{color:var(--nav-gold);border-color:var(--nav-gold);}
.cs-contact-links{display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:2rem;}
.cs-contact-links a{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--font-m);font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--nav-ch2);text-decoration:none;border-bottom:1px solid transparent;padding:.25rem 0;
  transition:color .2s ease,border-color .2s ease;
}
.cs-contact-links a span{color:var(--nav-gold);}
.cs-contact-links a:hover{color:var(--nav-ch);border-color:var(--nav-ch);}

/* ============================================================
   ABOUT — product story first; portrait supports the human
   voice rather than turning the page into a personal profile.
============================================================ */
.about-shell{width:min(100% - (var(--gutter) * 2),var(--media-measure));margin:0 auto;}
.about-hero{
  padding:calc(var(--nav-height) + clamp(4rem,9vw,9rem)) 0 clamp(5rem,10vw,10rem);
  background:var(--nav-bg);color:var(--nav-ch);
}
.about-hero > *,.about-collaboration > *{position:relative;z-index:1;}
.about-eyebrow{
  margin-bottom:1rem;font-family:var(--font-m);font-size:.67rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--cs-muted);
}
.about-hero .about-eyebrow{color:var(--nav-ch2);}
.about-hero h1{
  max-width:none;font-family:var(--font-d);font-size:clamp(3.5rem,5vw,5rem);
  font-weight:400;line-height:.98;letter-spacing:-.035em;
}
.about-positioning{padding:clamp(5rem,10vw,10rem) 0;background:var(--cs-paper);}
.about-positioning-grid{
  display:grid;grid-template-columns:minmax(15rem,.72fr) minmax(0,1.28fr);
  gap:clamp(3rem,9vw,10rem);align-items:start;
}
.about-portrait{margin:0;position:sticky;top:calc(var(--nav-height) + 2rem);}
.about-portrait img{width:100%;aspect-ratio:3 / 4;object-fit:cover;object-position:center;border-radius:8px;}
.about-positioning-copy{max-width:42rem;padding-top:clamp(.5rem,2vw,2rem);}
.about-positioning-copy p{font-size:clamp(1.05rem,1.45vw,1.3rem);line-height:1.65;color:var(--cs-muted);}
.about-positioning-copy p + p{margin-top:1.4rem;}
.about-positioning-copy .about-lead{font-size:clamp(1.3rem,2vw,1.8rem);font-weight:500;line-height:1.45;color:var(--cs-ink);}
.about-method{padding:clamp(5rem,10vw,10rem) 0 clamp(3.5rem,6vw,6rem);background:var(--cs-surface);}
.about-section-heading{margin-bottom:clamp(3rem,6vw,5rem);}
.about-section-heading .about-eyebrow{margin-bottom:1rem;}
.about-section-heading h2,.about-collaboration h2{
  max-width:none;font-family:var(--font-d);font-size:clamp(2.4rem,3.6vw,4rem);
  font-weight:400;line-height:1.05;letter-spacing:-.025em;
}
.about-section-heading h2 span{display:block;}
.about-steps{list-style:none;counter-reset:steps;}
.about-steps li{
  display:grid;grid-template-columns:3rem minmax(0,44rem);
  gap:clamp(1rem,2vw,1.75rem);padding:clamp(1.75rem,3vw,2.75rem) 0;border-top:1px solid var(--cs-border);
}
.about-step-number{font-family:var(--font-m);font-size:.72rem;letter-spacing:.12em;color:var(--cs-gold-ui);}
.about-steps h3{font-family:var(--font-d);font-size:clamp(1.9rem,3vw,2.8rem);font-weight:400;line-height:1.1;}
.about-steps p{max-width:34rem;margin-top:.75rem;font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.65;color:var(--cs-muted);}
.about-collaboration{padding:clamp(5rem,10vw,10rem) 0;background:var(--nav-bg);color:var(--nav-ch);}
.about-collaboration .about-eyebrow{color:var(--nav-ch2);}
.about-collaboration-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(3rem,9vw,10rem);}
.about-collaboration-copy{max-width:39rem;padding-top:.35rem;}
.about-collaboration h2{max-width:none;font-size:clamp(2.4rem,2.8vw,3.25rem);line-height:1.08;}
.about-collaboration-copy p{font-size:clamp(1.1rem,1.65vw,1.45rem);line-height:1.6;color:var(--nav-ch2);}
.about-cta{display:inline-flex;align-items:center;gap:.75rem;min-height:44px;margin-top:2.25rem;font-family:var(--font-m);font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--nav-gold);text-decoration:none;border-bottom:1px solid rgba(255,215,0,.6);}
.about-cta:hover{color:var(--nav-ch);border-color:var(--nav-ch);text-decoration:none;}

/* ============================================================
   WORK OVERVIEW
============================================================ */
.work-shell{width:min(100% - (var(--gutter) * 2),var(--media-measure));margin:0 auto;}
.work-hero{padding:calc(var(--nav-height) + clamp(3rem,5vw,4.5rem)) 0 clamp(2.5rem,4vw,3.75rem);background:#09231f;color:var(--nav-ch);}.work-hero > *{position:relative;z-index:1}.work-eyebrow{font-family:var(--font-m);font-size:.67rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--cs-muted)}.work-hero .work-eyebrow{color:var(--nav-ch2)}.work-hero h1{max-width:none;margin-top:1rem;font-family:var(--font-d);font-size:clamp(3rem,4.65vw,5.15rem);font-weight:400;line-height:.98;letter-spacing:-.035em}.work-hero > .work-shell > p:last-child{max-width:38rem;margin-top:clamp(1.25rem,2vw,1.75rem);font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.55;color:var(--nav-ch2)}
.work-list{padding:clamp(2.5rem,5vw,4.5rem) 0 clamp(5rem,9vw,9rem);background:#001512;color:var(--nav-ch)}.work-list>.work-shell{position:relative;z-index:1}
.work-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(2rem,3.5vw,3rem);}
.work-project{display:flex;flex-direction:column;gap:clamp(1.25rem,2vw,1.5rem);color:var(--nav-ch);text-decoration:none}.work-project:hover{text-decoration:none}
/* An odd total card count (true today: Enow, Spotify, PULS) leaves the last
   card alone in its row — let it claim the full row instead of sitting
   narrow and off-center. Stops applying cleanly once the count is even. */
.work-project:last-child:nth-child(odd){grid-column:1 / -1;}
.work-project-visual{position:relative;border-radius:6px;box-shadow:0 0 28px 6px rgba(77,191,163,.16);cursor:pointer}
.work-project img{width:100%;aspect-ratio:4 / 5;object-fit:cover;border-radius:6px;transition:transform .55s cubic-bezier(.16,1,.3,1),filter .55s ease}
.work-project-crop-left{object-position:left center;}
.work-project-crop-top{object-position:top center;}
.work-project-crop-bottom{object-position:center bottom;}
.work-project-crop-emotions{object-position:center 38%;}
.work-project:last-child:nth-child(odd) img{aspect-ratio:21 / 9;}
.work-project-visit{position:absolute;top:var(--project-cursor-y,50%);left:var(--project-cursor-x,50%);display:grid;place-items:center;width:3rem;height:3rem;opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.72);border:1px solid rgba(255,215,0,.64);border-radius:50%;background:rgba(255,215,0,.10);box-shadow:0 0 0 5px rgba(0,21,18,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:var(--font-s);font-size:1.35rem;line-height:1;color:var(--nav-gold);transition:opacity .18s ease,transform .22s cubic-bezier(.16,1,.3,1),background-color .22s ease,color .22s ease,box-shadow .22s ease}.work-project-visual[data-project-cursor="active"] .work-project-visit{opacity:1;transform:translate(-50%,-50%) scale(1);background:rgba(255,215,0,.18);box-shadow:0 0 20px rgba(255,215,0,.32),0 0 0 5px rgba(0,21,18,.16);color:var(--nav-gold)}.work-project:focus-visible .work-project-visit{top:50%;left:50%;opacity:1;transform:translate(-50%,-50%) scale(1);background:rgba(255,215,0,.18);box-shadow:0 0 20px rgba(255,215,0,.32),0 0 0 5px rgba(0,21,18,.16);color:var(--nav-gold)}.work-project:hover img{transform:scale(1.018);filter:brightness(1.04)}
.work-project-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:.6rem;}
.work-project h2{margin:0;font-family:var(--font-d);font-size:clamp(1.8rem,2.6vw,2.4rem);font-weight:400;line-height:.95;letter-spacing:-.03em}
.work-project-tagline{font-family:var(--font-s);font-size:.85rem;line-height:1.3;color:var(--nav-ch2);}
.work-project-badge{padding:.15rem .55rem;font-family:var(--font-m);font-size:.62rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--nav-gold);border:1px solid rgba(255,215,0,.45);border-radius:999px;}
.work-project-external-icon{color:var(--nav-gold);font-size:.9rem;}
.work-project-meta{margin-top:.6rem;font-family:var(--font-m);font-size:.67rem;letter-spacing:.1em;text-transform:uppercase;color:var(--nav-ch2)}

/* ============================================================
   CV — a working profile, not a duplicate of the About page.
============================================================ */
.cv-shell{width:min(100% - (var(--gutter) * 2),var(--media-measure));margin:0 auto;}
.cv-hero{padding:calc(var(--nav-height) + clamp(4rem,8vw,7rem)) 0 clamp(4rem,7vw,6rem);background:var(--nav-bg);color:var(--nav-ch);}
.cv-hero > *,.cv-contact > *{position:relative;z-index:1;}
.cv-eyebrow,.cv-section-label{font-family:var(--font-m);font-size:.67rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--cs-muted);}
.cv-hero .cv-eyebrow,.cv-contact .cv-eyebrow{color:var(--nav-ch2);}
.cv-hero h1{max-width:none;margin-top:1rem;font-family:var(--font-d);font-size:clamp(3.3rem,5.25vw,5.75rem);font-weight:400;line-height:.98;letter-spacing:-.035em;}.cv-hero-intro{max-width:43rem;margin-top:clamp(1.5rem,3vw,2.5rem);font-size:clamp(1.05rem,1.45vw,1.3rem);line-height:1.55;color:var(--nav-ch2);}
.cv-hero-downloads{margin-top:clamp(3rem,6vw,5rem);}.cv-download-label{font-family:var(--font-m);font-size:.67rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--nav-ch2);}.cv-hero-downloads > div{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.9rem;}.cv-hero-downloads a{display:inline-flex;align-items:center;gap:.65rem;min-height:44px;padding:.7rem 1.35rem;border:1px solid var(--nav-ch2);border-radius:100px;font-family:var(--font-m);font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--nav-ch);text-decoration:none;transition:background-color .2s ease,border-color .2s ease,color .2s ease;}.cv-hero-downloads a span{color:var(--nav-gold);font-size:.9rem;line-height:1;}.cv-hero-downloads a:hover{background:var(--nav-ch);border-color:var(--nav-ch);color:var(--nav-bg);text-decoration:none;}.cv-hero-downloads a:focus-visible{outline:2px solid var(--nav-gold);outline-offset:3px;}
.cv-overview{padding:clamp(4rem,7vw,6rem) 0;background:var(--cs-paper);}.cv-overview-grid{display:block}.cv-methods-grid{display:grid;grid-template-columns:minmax(12rem,.55fr) minmax(0,1.45fr);gap:clamp(3rem,9vw,10rem);}.cv-overview-content{max-width:52rem;margin-top:1.1rem}.cv-lead{font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.45;font-weight:500;color:var(--cs-ink);}.cv-overview-note{max-width:42rem;margin-top:1.35rem;font-size:clamp(1rem,1.25vw,1.1rem);line-height:1.6;color:var(--cs-muted);}
.cv-timeline{padding:clamp(5rem,8vw,8rem) 0;background:var(--cs-surface);}.cv-timeline-heading{margin-bottom:clamp(3rem,5vw,4rem);}.cv-timeline-heading h2{max-width:17ch;margin-top:1rem;font-family:var(--font-d);font-size:clamp(2.6rem,4vw,4.4rem);font-weight:400;line-height:1.03;letter-spacing:-.025em}.cv-timeline-list{list-style:none;margin-top:clamp(2.5rem,5vw,4rem);}.cv-timeline-list li{display:grid;grid-template-columns:minmax(10rem,.42fr) minmax(0,1.58fr);gap:clamp(2rem,6vw,7rem);padding:clamp(2rem,4vw,3rem) 0;border-top:1px solid var(--cs-border)}.cv-timeline-date,.cv-timeline-kind{font-family:var(--font-m);font-size:.67rem;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;color:var(--cs-muted)}.cv-timeline-kind{margin-bottom:.5rem}.cv-timeline-list h3{font-family:var(--font-d);font-size:clamp(1.8rem,2.7vw,2.65rem);font-weight:400;line-height:1.08;letter-spacing:-.02em}.cv-timeline-list li > div:last-child > p:last-child{max-width:42rem;margin-top:.7rem;font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.65;color:var(--cs-muted)}
.cv-methods{padding:clamp(3.5rem,7vw,6rem) 0;background:var(--cs-paper)}.cv-methods-grid > div{max-width:47rem}.cv-methods-grid > div p{font-size:clamp(1rem,1.35vw,1.2rem);line-height:1.55;color:var(--cs-muted)}.cv-methods-grid > div p+p{margin-top:.7rem}
.cv-contact{padding:clamp(5rem,10vw,9rem) 0;background:var(--nav-bg);color:var(--nav-ch);}
.cv-contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(3rem,9vw,10rem);}
.cv-contact h2{max-width:12ch;margin-top:1rem;font-family:var(--font-d);font-size:clamp(2.8rem,4.1vw,4.6rem);font-weight:400;line-height:1.02;letter-spacing:-.025em;}
.cv-contact-details{padding-top:.5rem;}
.cv-contact-details > a:first-child{display:inline-block;font-family:var(--font-d);font-size:clamp(1.8rem,3vw,3rem);line-height:1.15;color:var(--nav-ch);text-decoration:none;border-bottom:1px solid rgba(245,245,220,.35);}
.cv-contact-details > a:first-child:hover{color:var(--nav-gold);border-color:var(--nav-gold);}
.cv-contact-details p{margin-top:1.25rem;font-size:1rem;color:var(--nav-ch2);}
.cv-contact-details .cv-contact-link{margin-top:2rem;color:var(--nav-gold);border-color:rgba(255,215,0,.6);}.cv-contact-details .cv-contact-link:hover{color:var(--nav-ch);border-color:var(--nav-ch);}

/* ============================================================
   FOOTER
============================================================ */
.site-footer{
  width:min(100% - (var(--gutter) * 2), var(--media-measure));
  margin:0 auto;
  padding:2rem 0 5rem;
  font-family:var(--font-m);font-size:.65rem;
  color:var(--cs-muted);
  border-top:1px solid var(--cs-border);
}
.site-footer.cs-footer-dark{
  width:100%;margin:0;
  padding:clamp(1.5rem,3vw,2.5rem) max(var(--gutter),calc((100vw - var(--media-measure)) / 2));
  background:var(--nav-bg);color:var(--nav-ch2);
  border-top:1px solid rgba(245,245,220,.16);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.footer-art-link{color:var(--nav-ch2);text-decoration:none;border-bottom:1px solid rgba(245,245,220,.28);transition:color .2s ease,border-color .2s ease;}.footer-art-link:hover{color:var(--nav-gold);border-color:var(--nav-gold);text-decoration:none;}
@media(max-width:520px){.site-footer.cs-footer-dark{align-items:flex-start;flex-direction:column;gap:.65rem;}}

/* ============================================================
   MOBILE
============================================================ */
@media (max-width:760px){
  html{scroll-padding-top:9.5rem;}
  .cs-header{padding-top:9.5rem;} /* header wraps to 2 rows on mobile */
  .cs-cover{padding-bottom:3.5rem;}
  .cs-cover .cs-header{padding-bottom:2.5rem;}
  .cs-title-project{font-size:1.35rem;}
  .cs-title-statement{font-size:clamp(2.35rem,11vw,3.45rem);}
  .cs-hard-line{white-space:normal;}
  .cs-meta-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 1rem;}
  .cs-chapter-grid{grid-template-columns:1fr;gap:1.25rem;}
  .cs-intro-copy{text-align:left;}
  .cs-stat{border-radius:12px;aspect-ratio:auto;padding:1.5rem;}
  .cs-contact{padding-top:calc(9.5rem + 3rem);}
  .cs-contact-grid{grid-template-columns:1fr;grid-template-areas:"heading" "story" "connect";gap:2.5rem;}
  .cs-contact-heading h1{max-width:13ch;}
  .about-hero{padding-top:calc(9.5rem + 3rem);}
  .about-hero h1{max-width:10ch;font-size:clamp(3.2rem,13vw,4.8rem);}
  .about-positioning-grid,.about-steps li,.about-collaboration-grid{grid-template-columns:1fr;gap:2rem;}
  .about-portrait{position:static;max-width:25rem;}
  .about-positioning-copy{padding-top:0;}
  .about-section-heading{margin-bottom:2.5rem;}
  .about-section-heading h2,.about-collaboration h2{max-width:13ch;}
  .about-section-heading h2 span{display:inline;}
  .about-steps li{gap:1rem;}
  .work-hero{padding-top:calc(9.5rem + 3rem);}.work-hero h1{font-size:clamp(3.1rem,12.5vw,4.7rem);}.work-grid{grid-template-columns:1fr;}
  .cv-hero{padding-top:calc(9.5rem + 3rem);}
  .cv-hero h1{font-size:clamp(3.1rem,12.5vw,4.7rem);}
  .cv-overview-grid,.cv-timeline-list li,.cv-methods-grid,.cv-contact-grid{grid-template-columns:1fr;gap:2rem;}
  .cv-timeline-list{margin-left:0;}
}
@media (hover:none),(pointer:coarse){.work-project-visit{display:none;}}
@media (hover:hover) and (pointer:fine){.work-project-visual{cursor:none;}}

/* ============================================================
   HEURISTICS ACCORDION — same expand-on-hover mechanic as the
   art portfolio's Aristide accordion, without its grayscale
   treatment. These exports carry no baked-in title, so each
   column gets a small live caption below the clipped thumb
   instead (the caption sits outside the overflow:hidden box,
   so it's never cropped by the hover expansion).
============================================================ */
.cs-heuristics-row{
  display:flex;
  gap:1vw;
  margin-top:2.5rem;
  margin-bottom:2.5rem;
}
.cs-heuristic-col{
  flex:1;
  transition:flex .8s cubic-bezier(.19,1,.22,1);
}
.cs-heuristic-col:hover{flex:2;}
.cs-heuristic-thumb{
  position:relative;
  height:28rem;
  overflow:hidden;
  border-radius:8px;
  cursor:pointer;
  box-shadow:0 14px 28px rgba(166,79,36,.14);
}
.cs-heuristic-thumb img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  transform:scale(1.06);
  transition:transform .8s cubic-bezier(.19,1,.22,1);
}
.cs-heuristic-col:hover .cs-heuristic-thumb img{transform:scale(1);}
/* Object-fit:cover crops toward the vertical center by default, which can
   cut off the exact UI region a panel is meant to illustrate. Override
   per image so the crop favors where that evidence actually sits. */
.cs-heuristic-thumb img.cs-crop-bottom{object-position:center bottom;}
.cs-heuristic-thumb img.cs-crop-low{object-position:center 80%;}
.cs-heuristic-label{
  margin-top:.75rem;
  font-family:var(--font-m);font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cs-muted);text-align:center;
}
@media (max-width:760px){
  .cs-heuristics-row{flex-direction:column;gap:1.5rem;}
  .cs-heuristic-col:hover{flex:1;}
  .cs-heuristic-thumb{height:auto;aspect-ratio:3/4;}
}
@media (hover:none),(pointer:coarse){
  .cs-heuristic-col:hover{flex:1;}
  .cs-heuristic-col:hover .cs-heuristic-thumb img{transform:scale(1.06);}
}

/* ============================================================
   LIGHTBOX — click-to-enlarge for dense evidence images.
============================================================ */
.cs-lightbox-figure{position:relative;cursor:zoom-in;}
.cs-lightbox-figure::after{
  content:'Click to enlarge';
  position:absolute;bottom:1rem;right:1rem;
  padding:.4rem .8rem;border-radius:100px;
  background:rgba(0,31,28,.72);color:#F5F5DC;
  font-family:var(--font-m);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;
  opacity:0;transition:opacity .2s ease;pointer-events:none;
}
.cs-lightbox-figure:hover::after,.cs-lightbox-figure:focus-visible::after{opacity:1;}
.cs-lightbox-overlay{
  position:fixed;inset:0;z-index:500;
  display:flex;align-items:center;justify-content:center;
  padding:6vh 4vw;
  background:rgba(0,15,13,.92);
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
}
.cs-lightbox-overlay[data-open="true"]{opacity:1;pointer-events:auto;}
.cs-lightbox-overlay img{
  max-width:100%;max-height:100%;
  border-radius:8px;cursor:zoom-out;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.cs-lightbox-close{
  position:absolute;top:1.5rem;right:1.5rem;
  width:2.75rem;height:2.75rem;border-radius:50%;
  border:1px solid rgba(245,245,220,.3);background:rgba(0,31,28,.7);
  color:#F5F5DC;font-size:1.4rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;
}
@media (prefers-reduced-motion:reduce){.cs-lightbox-overlay{transition:none;}}
@media (hover:none),(pointer:coarse){.cs-lightbox-figure::after{content:'Tap to enlarge';opacity:1;}}