/* ============================================================
   site.css — shared design system for Jason Walker
   ------------------------------------------------------------
   Extracted from the existing case-study pages so engagement and
   workstream pages share one source of truth. Same tokens, fonts,
   spacing rhythm, accent, borders and animation language as the
   existing site. New component blocks (breadcrumb, specs,
   reasoning, workstream index, placeholders) extend that system —
   they do not replace it.

   Phase 4: unified to the system.css doctrine. Type is now Inter
   (systems) + Source Serif 4 (meaning); color is blue-primary.
   ============================================================ */

@import url('tokens.css');


*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-size:19px;line-height:1.62}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
em{font-style:italic}
.wrap{max-width:1280px;margin:0 auto;padding:0 40px}
.wrap-narrow{max-width:880px;margin:0 auto;padding:0 40px}
@media (max-width:700px){.wrap,.wrap-narrow{padding:0 22px}}
.serif{font-family:var(--font-meaning);font-weight:400}
.mono{font-family:var(--font-system);font-weight:500;font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}

/* ========== NAV ========== */
.nav{position:sticky;top:0;z-index:30;background:rgba(252,252,253,.92);backdrop-filter:blur(8px);border-bottom:1px solid rgba(19,21,63,.08)}
.nav-inner{display:flex;justify-content:space-between;align-items:center;height:64px}
.wordmark{font-family:var(--font-system);font-weight:600;font-size:20px;letter-spacing:-.01em;white-space:nowrap;display:inline-flex;align-items:center}
.wordmark .dot{display:inline-block;width:6px;height:6px;background:var(--accent);border-radius:50%;margin:0 7px}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{font-size:17px;color:var(--ink-2);transition:color .2s}
.nav-links a:not(.nav-cta){position:relative;padding:6px 0}
.nav-links a:not(.nav-cta):hover{color:var(--ink)}
.nav-links a:not(.nav-cta).active{color:var(--ink)}
.nav-cta{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--ink);border-radius:6px;font-size:15px;transition:.2s;white-space:nowrap}
.nav-cta:hover{background:var(--ink);color:var(--paper)}
.nav-cta::before{content:'';width:6px;height:6px;background:var(--accent);border-radius:50%}
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--ink)}
.nav-toggle svg{display:block;width:22px;height:22px}
@media (max-width:780px){
  .nav-inner{height:58px}
  .wordmark{font-size:27px}
  .nav-toggle{display:inline-flex}
  .nav-links{
    position:fixed;top:58px;left:0;right:0;
    background:var(--paper);border-bottom:1px solid rgba(19,21,63,.12);
    flex-direction:column;align-items:stretch;gap:0;padding:12px 22px 22px;
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .nav-links.open{transform:none;opacity:1;pointer-events:auto}
  .nav-links a:not(.nav-cta){padding:14px 0;font-size:24px;border-bottom:1px solid var(--line,rgba(19,21,63,.18))}
  .nav-links a:not(.nav-cta).active{color:var(--accent)}
  .nav-cta{margin-top:18px;justify-content:center;padding:14px 20px;font-size:19px}
}

/* ========== BREADCRUMB (parent-child wayfinding) ========== */
.breadcrumb{padding:28px 0 0}
.breadcrumb .crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-family:var(--font-system);font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.breadcrumb .crumbs a{color:var(--muted);transition:color .2s}
.breadcrumb .crumbs a:hover{color:var(--accent)}
.breadcrumb .crumbs .sep{color:rgba(19,21,63,.3)}
.breadcrumb .crumbs .here{color:var(--ink)}

/* ========== HERO ========== */
.case-hero{padding:56px 0 64px;position:relative;overflow:hidden}
@media (max-width:780px){.case-hero{padding:36px 0 48px}}
.case-hero .wrap{position:relative;z-index:1}
.case-tag{font-family:var(--font-system);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:24px}
.case-title{
  font-family:var(--font-system);font-weight:700;
  font-size:clamp(44px,6.4vw,88px);line-height:1.05;letter-spacing:-.022em;
  margin:0 0 26px;max-width:20ch;text-wrap:balance;
}
.case-title em{color:var(--accent);font-style:italic}
.case-deck{
  font-family:var(--font-meaning);font-style:italic;font-size:clamp(22px,2.6vw,30px);
  line-height:1.45;color:var(--ink-2);max-width:54ch;margin:0;font-weight:400;
}

/* ========== META BAR ========== */
.case-meta{
  border-top:1.5px solid var(--rule);border-bottom:1px solid var(--line,rgba(19,21,63,.18));
  padding:30px 0;
  display:flex;align-items:flex-start;gap:clamp(22px,3vw,44px);
  margin-top:54px;
}
.case-meta .m{flex:1 1 0;min-width:0;text-align:left}
.case-meta .m h6{
  font-family:var(--font-system);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px;font-weight:500;
}
.case-meta .m .v{font-family:var(--font-system);font-size:18px;font-weight:600;line-height:1.35}
.case-meta .m .v em{color:var(--accent);font-style:italic}
@media (max-width:900px){.case-meta,.case-meta.cols-4{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.case-meta .m{flex:none;width:auto}}
@media (max-width:780px){.case-meta{margin-top:40px;padding:24px 0}}

/* ========== HERO COVER (overlay + mark) ========== */
.case-cover{
  width:100%;aspect-ratio:21/10;
  background:#13153F center/cover no-repeat;
  margin:64px 0 0;
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.case-cover::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 70% at center, rgba(21,20,15,.4) 0%, transparent 70%),
    linear-gradient(180deg, rgba(21,20,15,.55) 0%, rgba(21,20,15,.72) 100%);
  pointer-events:none;z-index:1;
}
/* Cinematic fallback when no cover image is set yet */
.case-cover.placeholder{
  background:
    radial-gradient(ellipse 120% 80% at 30% 30%, rgba(57,62,112,.12) 0%, transparent 55%),
    radial-gradient(ellipse 100% 100% at 75% 75%, rgba(19,21,63,.10) 0%, transparent 55%),
    linear-gradient(160deg, #232B5B 0%, #13153F 100%);
}
.case-cover-mark{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:24px;
  text-align:center;padding:32px;
}
.case-cover-kicker{
  font-family:var(--font-system);font-size:15px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(252,252,253,.7);margin:0;
}
.case-cover-title{
  font-family:var(--font-meaning);font-weight:400;font-style:italic;
  font-size:clamp(37px,5.33vw,69px);line-height:1.1;color:rgba(252,252,253,.97);margin:0;
  text-shadow:0 2px 16px rgba(0,0,0,.6);
}
.case-cover-logo{width:clamp(200px,28vw,390px);height:auto;display:block;filter:drop-shadow(0 6px 32px rgba(0,0,0,.5))}
.case-cover-tagline{
  font-family:var(--font-system);font-weight:600;
  font-size:clamp(22px,2.8vw,34px);line-height:1.3;color:rgba(252,252,253,.96);
  margin:0;letter-spacing:.04em;text-shadow:0 2px 16px rgba(0,0,0,.6);
}
@media (max-width:780px){
  .case-cover{aspect-ratio:4/3;margin-top:40px}
  .case-cover-mark{gap:18px;padding:24px}
  .case-cover-logo{width:clamp(180px,42vw,260px)}
}

/* ========== STORY / CHAPTER BLOCKS ========== */
.story{padding:72px 0}
@media (max-width:780px){.story{padding:48px 0}}
.story.alt{background:var(--paper-2)}

/* ===== Canonical publication layout — Radiant + future case studies =====
   The in-grid left rail (.pub-layout / .pub-rail / .pub-doc) is governed by
   assets/css/left-nav.css. These rules reflow a case study's reading column
   inside that grid: the column owns the measure, sections lose their full-
   bleed bands, and vertical rhythm tightens beside the rail. */
.pub-layout{--rail-top:88px;--rail-top-m:64px}
.pub-doc .wrap{max-width:none;margin:0;padding:0}
.pub-doc .story{padding:72px 0}
.pub-doc .story:first-child{padding-top:28px}
.pub-doc .story.alt{background:none}
@media (max-width:780px){ .pub-doc .story{padding:48px 0} }

/* ===== Section composition — single reading column (Victory canonical) =====
   The former fixed 280px side-annotation rail is dissolved. The section number
   stacks as an eyebrow above the heading; the old .side annotation is recomposed
   as an integrated editorial callout (accent kicker + italic-serif lede) sitting
   above the prose, all flowing down one measure. */
.story-head{margin-bottom:30px}
.story-head .num{font-family:var(--font-system);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.story-head h2{
  font-family:var(--font-system);font-weight:700;
  font-size:clamp(26px,3vw,40px);line-height:1.1;letter-spacing:-.018em;margin:0;max-width:24ch;text-wrap:balance;
}
.story-head h2 em{color:var(--accent);font-style:italic}

.story-body{display:block}
.story-body .side{font-family:var(--font-meaning);font-style:italic;font-weight:400;font-size:clamp(19px,2vw,23px);line-height:1.42;color:var(--ink);margin:0 0 30px;max-width:60ch}
.story-body .side b{display:block;font-family:var(--font-system);font-style:normal;font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.story-body p{font-size:19px;line-height:1.7;color:var(--ink-2);margin:0 0 16px;max-width:64ch}
.story-body p:last-child{margin-bottom:0}
.story-body p strong{color:var(--ink);font-weight:600}
@media (max-width:900px){.story-body p{font-size:18px}}

/* former label-columns (.spec / .reason) dissolved into stacked editorial kickers, inside the reading column — migrated case studies only, so Preborn etc. keep their own layout */
.pub-doc .spec{display:block;padding:24px 0}
.pub-doc .spec .lbl{font-size:13px;letter-spacing:.14em;color:var(--accent);padding-top:0;margin:0 0 14px}
.pub-doc .spec .lbl .sub{letter-spacing:.14em;margin-top:4px}
.pub-doc .spec li{font-size:19px;line-height:1.7;max-width:64ch}
.pub-doc .spec p{font-size:19px;line-height:1.7;max-width:64ch}
.pub-doc .reason{display:block;padding:26px 0}
.pub-doc .reason .step{padding-top:0;margin:0 0 12px;font-size:13px;letter-spacing:.14em}
.pub-doc .reason h3{font-size:22px}
.pub-doc .reason p{font-size:19px;line-height:1.7;max-width:64ch}

.pull{
  font-family:var(--font-meaning);font-style:italic;font-weight:400;
  font-size:clamp(26px,3.2vw,40px);line-height:1.3;color:var(--ink);
  border-left:2px solid var(--accent);padding:6px 0 6px 26px;margin:40px 0;
  max-width:30ch;text-wrap:balance;
}
.pull em{color:var(--accent)}

/* ========== SPECS (situation / role / responsibilities summary) ========== */
/* Mirrors the cv snapshot/role-block rhythm — flexible column count. */
.specs{border-top:1px solid var(--ink);margin-top:8px}
.spec{
  display:grid;grid-template-columns:280px 1fr;gap:60px;align-items:start;
  padding:28px 0;border-bottom:1px solid rgba(19,21,63,.18);
}
.spec .lbl{font-family:var(--font-system);font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);font-weight:500;padding-top:6px}
.spec .lbl .sub{display:block;color:var(--muted);font-weight:400;margin-top:6px;letter-spacing:.14em}
.spec ul{margin:0;padding:0;list-style:none}
.spec li{font-size:21px;line-height:1.7;color:var(--ink-2);padding:0 0 12px 18px;position:relative;max-width:62ch}
.spec li:last-child{padding-bottom:0}
.spec li::before{content:'';position:absolute;left:0;top:.7em;width:8px;height:1px;background:var(--accent)}
.spec li strong{color:var(--ink);font-weight:600}
.spec p{font-size:22px;line-height:1.75;color:var(--ink-2);margin:0 0 18px;max-width:62ch}
.spec p:last-child{margin-bottom:0}
@media (max-width:900px){.spec{grid-template-columns:1fr;gap:14px;padding:22px 0}}

/* ========== REASONING BLOCK (Challenge / Observation / Decision / Outcome) ========== */
.reasoning{border-top:1px solid var(--ink);margin-top:48px}
.reason{
  display:grid;grid-template-columns:220px 1fr;gap:48px;align-items:start;
  padding:30px 0;border-bottom:1px solid rgba(19,21,63,.18);
}
.reason .step{
  font-family:var(--font-system);font-size:15px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);font-weight:500;padding-top:6px;
}
.reason h3{font-family:var(--font-system);font-weight:600;font-size:26px;line-height:1.22;margin:0 0 12px;letter-spacing:-.008em}
.reason h3 em{color:var(--accent);font-style:italic}
.reason p{font-size:21px;line-height:1.75;color:var(--ink-2);margin:0;max-width:62ch}
@media (max-width:900px){.reason{grid-template-columns:1fr;gap:12px;padding:24px 0}}

/* ========== INDEX CARDS (workstreams / chapters / engagements) ========== */
.idx-list{border-top:1px solid var(--ink)}
.idx-row{
  display:grid;grid-template-columns:80px 1.7fr 1.1fr 60px;
  gap:24px;align-items:center;
  padding:30px 0;border-bottom:1px solid rgba(19,21,63,.18);
  transition:padding .25s ease, background .25s ease;
}
a.idx-row:hover{padding-left:18px;padding-right:18px;background:rgba(19,21,63,.03)}
.idx-row .num{font-family:var(--font-system);font-size:15px;letter-spacing:.18em;color:var(--muted)}
.idx-row .title{font-family:var(--font-system);font-size:30px;font-weight:600;line-height:1.18;letter-spacing:-.012em}
.idx-row .title em{color:var(--accent);font-style:italic}
.idx-row .kind{font-size:18px;color:var(--ink-2)}
.idx-row .arrow{font-size:24px;color:var(--ink);text-align:right;transition:transform .25s ease}
a.idx-row:hover .arrow{transform:translateX(6px);color:var(--accent)}
.idx-row.soon{cursor:default}
.idx-row.soon .arrow{color:var(--muted)}
.idx-row .tag-soon{
  display:inline-block;margin-left:12px;vertical-align:middle;
  font-family:var(--font-system);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line,rgba(19,21,63,.18));border-radius:5px;padding:3px 8px;
}
@media (max-width:900px){
  .idx-row{grid-template-columns:54px 1fr 40px;gap:16px}
  .idx-row .kind{display:none}
  .idx-row .title{font-size:29px}
}
@media (max-width:780px){.idx-row .title{font-size:27px}}

/* ========== IMAGE / ARTIFACT BLOCKS ========== */
.figure{margin:24px 0}
.figure-img{width:100%;aspect-ratio:16/9;background:#13153F center/cover no-repeat;border-radius:3px}
.figure video{display:block;width:100%;aspect-ratio:16/9;background:#13153F;border-radius:3px}
.figure-img.tall{aspect-ratio:4/5}
.figure-cap{
  margin-top:12px;display:flex;justify-content:space-between;gap:24px;
  font-family:var(--font-system);font-weight:500;font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
}
.figure-cap .label{color:var(--accent)}
.figure-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:48px 0}
.figure-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.figure-grid .figure-img{aspect-ratio:1/1}
.figure-grid figure{margin:0}
@media (max-width:780px){.figure-grid,.figure-grid.cols-3{grid-template-columns:1fr}}

/* Cinematic placeholder treatment (from the chaos case) — for asset-pending frames */
.figure-img.placeholder{
  background:
    radial-gradient(ellipse 120% 80% at 30% 30%, rgba(57,62,112,.09) 0%, transparent 55%),
    radial-gradient(ellipse 100% 100% at 75% 75%, rgba(19,21,63,.07) 0%, transparent 55%),
    linear-gradient(160deg, #232B5B 0%, #13153F 100%);
  display:flex;align-items:flex-end;padding:18px;
}
.figure-img.placeholder .ph-note{
  font-family:var(--font-system);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(252,252,253,.5);
}

/* Inline tags for unfinished content */
.ph-tag{
  display:inline-block;
  font-family:var(--font-system);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);border:1px solid rgba(57,62,112,.4);border-radius:5px;padding:3px 10px;
  vertical-align:middle;
}
.metric-ph{
  font-family:var(--font-system);font-size:.85em;letter-spacing:.06em;
  color:var(--accent);border-bottom:1px dashed rgba(57,62,112,.5);
}

/* ========== ARTIFACT INTRO (section lead-in) ========== */
.artifact-note{
  font-size:19px;line-height:1.7;color:var(--muted);max-width:60ch;margin:0 0 8px;
}

/* ========== NEXT / RELATED ========== */
.next-case{padding:100px 0 120px;border-top:1px solid var(--rule)}
.next-case .lbl{font-family:var(--font-system);font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.next-case h3{font-family:var(--font-system);font-weight:700;font-size:clamp(44px,5.6vw,76px);line-height:1.04;letter-spacing:-.022em;margin:0}
.next-case h3 a{display:inline-flex;align-items:baseline;gap:18px;transition:color .25s}
.next-case h3 a:hover{color:var(--accent)}
.next-case h3 .arr{font-size:.6em;transition:transform .25s ease}
.next-case h3 a:hover .arr{transform:translateX(8px)}
@media (max-width:780px){.next-case{padding:64px 0 72px}}

/* ========== CLOSING ========== */
.closing{padding:128px 0 56px;background:var(--blueprint-deep);color:rgba(252,252,253,.92);position:relative;overflow:hidden}
@media (max-width:780px){.closing{padding:64px 0 48px}}
.closing::before{display:none}
.closing-inner{position:relative}
.closing .mono{color:rgba(252,252,253,.6)}
.closing h2{
  font-family:var(--font-system);font-weight:700;
  font-size:clamp(44px,5.8vw,84px);line-height:1.04;letter-spacing:-.022em;
  margin:18px 0 0;max-width:20ch;
}
.closing h2 em{color:var(--highlight);font-style:italic}
.closing-sub{font-size:21px;line-height:1.65;color:rgba(252,252,253,.75);max-width:66ch;margin:28px 0 44px}
.closing-cta{
  display:inline-flex;align-items:center;gap:14px;
  padding:16px 28px;background:var(--paper);color:var(--ink);
  border-radius:6px;font-size:18px;font-weight:500;transition:.25s;
}
.closing-cta:hover{background:var(--accent);color:var(--paper)}
.closing-cta .arr{transition:transform .25s ease}
.closing-cta:hover .arr{transform:translateX(4px)}

/* ========== FOOTER ========== */
footer{padding:32px 0;background:var(--blueprint-deep);color:rgba(252,252,253,.64);border-top:1px solid rgba(252,252,253,.2)}
footer .row{display:flex;justify-content:space-between;gap:24px;font-family:var(--font-system);font-size:15px;letter-spacing:.16em;text-transform:uppercase}
@media (max-width:700px){footer .row{flex-direction:column;gap:10px}}

/* ========== UTIL ========== */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ========== PRINT ========== */
@media print{
  .nav,.closing,footer,.next-case{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .reveal{opacity:1;transform:none}
  .story{padding:24pt 0;page-break-inside:avoid}
  a{color:#000;text-decoration:none}
  .story.alt{background:transparent}
}

/* ============================================================
   DISMISSAL CONTROL — site convention (.jw-dismiss)
   ------------------------------------------------------------
   The canonical "close / exit" affordance: an oxblood circle
   with a white X. Use it for prototype viewers, image
   lightboxes, expanded media, overlays, modals, and any future
   dismissible experience so the gesture is identical everywhere.

   Markup (link that navigates, or <button> that closes):
     <a class="jw-dismiss" href="…" aria-label="Close">
       <svg viewBox="0 0 24 24" aria-hidden="true">
         <line x1="6" y1="6" x2="18" y2="18"></line>
         <line x1="18" y1="6" x2="6" y2="18"></line>
       </svg>
     </a>

   Positioning logic: upper-right corner of its container.
   Add .jw-dismiss--corner for a fixed top-right placement
   inside a full-window overlay (offsets below any frame bar via
   --jw-frame-offset, default 0).
   ============================================================ */

.jw-dismiss{
  flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--dismiss-size); height:var(--dismiss-size);
  border-radius:50%; padding:0; border:0; cursor:pointer;
  background:var(--accent); color:#fff;
  box-shadow:0 2px 10px rgba(21,20,15,.22);
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.jw-dismiss svg{ width:44%; height:44%; display:block; }
.jw-dismiss svg line{ stroke:#fff; stroke-width:2.2; stroke-linecap:round; }
.jw-dismiss:hover{
  background:var(--accent-dark); transform:scale(1.06);
  box-shadow:0 4px 16px rgba(21,20,15,.30);
}
.jw-dismiss:focus-visible{
  outline:2px solid #fff; outline-offset:2px;
  box-shadow:0 0 0 4px rgba(57,62,112,.55);
}
.jw-dismiss--corner{
  position:fixed; z-index:5000;
  top:calc(var(--jw-frame-offset) + 14px); right:16px;
}
@media (prefers-reduced-motion:reduce){
  .jw-dismiss{ transition:none; }
  .jw-dismiss:hover{ transform:none; }
}