/* ==========================================================================
   THEME — shared by index.html and every rebuilt case study page.
   Structure (rail nav, snap sections, image system, spacing scale) carried
   over from the reference build. Surface (palette + type) redone as the
   "systems / spec sheet" direction: pale grid-paper, mono annotations,
   blueprint-blue accent, sharp corners — no rounded-corner-plus-left-border
   card treatment, no Inter.

   Pages not yet rebuilt (vehicle-onboarding.html, fleet-director.html) still
   use style.css and are unaffected by this file.
   ========================================================================== */

/* ── THEME TOKENS ──────────────────────────────────────────────────────────
   Dark is the shipped theme. Every color anywhere else in this file is one
   of these. The light preset is kept commented below, same discipline as
   the reference file — a future light pass is a token swap, not a rewrite. */
:root{
  --surface:oklch(14.5% 0.006 152);      /* page background — flat, no texture  */
  --surface-raised:oklch(19.5% 0.008 152); /* cards, the matte behind screenshots */
  --text:oklch(93% 0.004 152);           /* body and headings                   */
  --text-muted:oklch(63% 0.014 152);     /* secondary text, labels  (~6.8:1)     */
  --line:oklch(31% 0.014 152);           /* hairlines, dividers, borders         */
  --line-strong:oklch(42% 0.016 152);    /* borders that need to read as a box   */
  --brand:oklch(74% 0.16 154);           /* links, active rail marker, accents   */
  --brand-contrast:oklch(14.5% 0.006 152); /* text placed on a solid --brand fill */
  --focus:oklch(74% 0.16 154);
  --danger:oklch(62% 0.19 25);           /* gate error text only                */
  --media-frame:oklch(34% 0.014 152);    /* 1px border around every screenshot   */
  --media-matte:oklch(19.5% 0.008 152);  /* panel behind screenshots             */

  --s-1:8px; --s-2:16px; --s-3:26px; --s-4:44px; --s-5:76px; --s-6:120px;
  --measure:66ch;
}

/* LIGHT PRESET — not shipped, kept for a future pass. Same roles, re-solved
   for a light surface (accent lightness/chroma re-tuned per surface, not
   inverted).
:root{
  --surface:oklch(97.5% 0.007 152);
  --surface-raised:oklch(94.5% 0.011 152);
  --text:oklch(21% 0.015 152);
  --text-muted:oklch(45% 0.02 152);
  --line:oklch(78% 0.017 152);
  --line-strong:oklch(64% 0.022 152);
  --brand:oklch(52% 0.16 154);
  --brand-contrast:oklch(98% 0.006 152);
  --focus:oklch(52% 0.16 154);
  --danger:oklch(50% 0.19 25);
  --media-frame:oklch(80% 0.016 152);
  --media-matte:oklch(94.5% 0.011 152);
}
*/

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--surface);color:var(--text);
  font:400 16.5px/1.65 "IBM Plex Sans","Helvetica Neue",sans-serif;
}
a{color:inherit}
a.link,.rail .foot a,.mail a,.go{color:var(--brand)}
img{max-width:100%}
::selection{background:var(--brand);color:var(--brand-contrast)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.eyebrow,.meta,dt,.tag,.rail .id .r,.rail .who .r,.next .lbl,.rail .foot,
.summary dt,.facts b + span,.results span,figcaption,.decision .lbl{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
}

/* ── password gate — same JS contract, restyled ───────────────────────── */
#site-content{display:none}
body.unlocked #site-content{display:block}
.gate-overlay{
  position:fixed;inset:0;z-index:1000;display:flex;align-items:center;
  justify-content:center;background:var(--surface);
}
body.unlocked .gate-overlay{display:none}
.gate-form{
  display:flex;flex-direction:column;align-items:center;gap:1.1rem;
  width:100%;max-width:320px;padding:0 24px;text-align:center;
}
.gate-logo{height:26px;color:var(--text);margin-bottom:.25rem}
.gate-label{color:var(--text-muted);font-family:"IBM Plex Mono";font-size:.85rem;letter-spacing:.04em}
.gate-input{
  width:100%;padding:.7rem 1rem;border:1px solid var(--line-strong);
  background:var(--surface-raised);color:var(--text);
  font-family:"IBM Plex Sans";font-size:1rem;
}
.gate-input:focus{outline:none;border-color:var(--brand)}
.gate-submit{
  width:100%;padding:.7rem 1rem;border:1px solid var(--text);border-radius:0;
  background:var(--text);color:var(--surface);
  font-family:"IBM Plex Mono";font-weight:600;font-size:.85rem;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
}
.gate-submit:hover{background:var(--brand);border-color:var(--brand);color:var(--brand-contrast)}
.gate-error{color:var(--danger);font-size:.8rem;min-height:1.2em;font-family:"IBM Plex Mono"}

/* ── shell + sticky rail ───────────────────────────────────────────────── */
.shell{max-width:1220px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:250px minmax(0,1fr);gap:64px;align-items:start}

/* Three fixed zones in the sticky rail: identity pinned at the top, the
   contact footer pinned at the bottom, and the nav ticks centered in
   whatever space is left between them (margin:auto on .ticks alone —
   with no other auto-margin sibling competing for it, that space is
   split evenly above and below the ticks, which is what leaves .foot
   sitting exactly at the bottom edge as a side effect). */
.rail{position:sticky;top:0;height:100vh;height:100svh;
  display:flex;flex-direction:column;padding:34px 0}
.rail .back{font-family:"IBM Plex Mono";font-size:13px;color:var(--text-muted);text-decoration:none;letter-spacing:.03em}
.rail .back:hover{color:var(--text)}
.rail .id{display:flex;flex-direction:column;align-items:flex-start}
.rail .id svg{width:40px;height:40px;flex:none;margin-bottom:14px}
.rail .id .n{font:400 15px/1.2 "IBM Plex Sans",sans-serif;text-transform:uppercase;letter-spacing:.04em}
.rail .id .n .n-heavy{font-weight:700}
.rail .id .n .n-light{font-weight:300;letter-spacing:.12em}
.rail .id .r,.rail .who .r{font-family:"IBM Plex Mono";font-size:12.5px;color:var(--text-muted);
  margin-top:6px;line-height:1.5;letter-spacing:.01em}
.rail .who{margin-top:var(--s-3)}
.rail .who .n{font:600 17px/1.25 "IBM Plex Sans",sans-serif;letter-spacing:-.01em}

.ticks{list-style:none;margin-top:auto;margin-bottom:auto;padding:0}
.ticks a{display:block;text-decoration:none;color:var(--text-muted);font-family:"IBM Plex Mono";
  font-size:12.5px;letter-spacing:.02em;padding:8px 0 8px 18px;border-left:1px solid var(--line);
  transition:color .2s,border-color .2s}
.ticks a:hover{color:var(--text)}
.ticks a[aria-current="true"]{color:var(--text);border-left:1px solid var(--brand);font-weight:500}

.rail .foot{font-family:"IBM Plex Mono";font-size:12px;color:var(--text-muted);display:flex;flex-direction:column;gap:6px}
.rail .foot a{text-decoration:none}
.rail .foot a:hover{color:var(--brand)}
.rail .foot .loc{color:var(--text-muted)}

/* ── corner-tick annotation — used sparingly, on the hero frame and the
      decision boxes only, not on every card ─────────────────────────────── */
.ticked{position:relative}
.ticked::before,.ticked::after{
  content:"";position:absolute;width:14px;height:14px;border-color:var(--line-strong);border-style:solid;
}
.ticked::before{top:-1px;left:-1px;border-width:2px 0 0 2px}
.ticked::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0}

/* ==========================================================================
   HOME PAGE — full-viewport sections, sticky rail, scroll snap desktop only
   Scoped to main.home-main so it can never leak onto a case study's <main>
   (a bare "section" selector has lower specificity than "main section" and
   would otherwise lose to these rules on every page sharing this file).
   ========================================================================== */
main.home-main section{min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:96px 0}

#intro h1{margin:0;font:600 clamp(32px,5.2vw,60px)/1.08 "IBM Plex Sans",sans-serif;
  letter-spacing:-.02em;max-width:16ch}
#intro .stand{margin:28px 0 0;max-width:58ch;color:var(--text-muted);font-size:18px;line-height:1.6}
#intro .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
#intro .tags span{border:1px solid var(--line-strong);padding:5px 12px;font-family:"IBM Plex Mono";
  font-size:12.5px;color:var(--text-muted);letter-spacing:.02em}

.meta{font-size:13px;color:var(--text-muted);letter-spacing:.04em;margin-bottom:16px;text-transform:uppercase}
section h2{margin:0;font:600 clamp(27px,4.2vw,46px)/1.14 "IBM Plex Sans",sans-serif;
  letter-spacing:-.015em;max-width:18ch}
.lede{margin:24px 0 0;max-width:58ch;font-size:17px;color:var(--text)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  margin-top:40px;border-top:1px solid var(--line)}
.facts div{padding:18px 22px 18px 0;border-right:1px solid var(--line)}
.facts div:not(:first-child){padding-left:22px}
.facts div:last-child{border-right:0;padding-right:0}
.facts b{display:block;font:600 15px/1.3 "IBM Plex Sans",sans-serif;margin-bottom:6px}
.facts span{font-size:13.5px;color:var(--text-muted);line-height:1.55;display:block;max-width:30ch}
.go{display:inline-flex;align-items:center;gap:9px;margin-top:36px;
  text-decoration:none;font-family:"IBM Plex Mono";font-weight:500;font-size:13.5px;
  letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid var(--brand);padding-bottom:3px;
  width:fit-content}
.go i{font-style:normal;transition:transform .18s}
.go:hover i{transform:translateX(4px)}

#about .two{display:grid;grid-template-columns:1fr 280px;gap:56px;align-items:start}
#about p{margin:0 0 16px;max-width:56ch;font-size:16px;line-height:1.65}
#about ul{list-style:none;margin:0;padding:0;font-size:14px}
#about li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;
  border-top:1px solid var(--line);font-family:"IBM Plex Mono"}
#about li:first-child{border-top:0}
#about li span + span{color:var(--text-muted);white-space:nowrap}
#about .mail{margin-top:24px;font:600 16px/1.4 "IBM Plex Sans"}
.disclaim{margin-top:24px;font-size:13px;color:var(--text-muted);max-width:50ch;line-height:1.55}

@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  html{scroll-snap-type:y mandatory}
  main.home-main section{scroll-snap-align:center}
}

/* ==========================================================================
   CASE STUDY PAGES — continuous reading, same rail component
   ========================================================================== */
.head{padding:88px 0 0}
.badge{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-strong);
  padding:5px 12px;font-family:"IBM Plex Mono";font-size:12px;color:var(--text-muted);
  letter-spacing:.04em;text-transform:uppercase;margin-bottom:var(--s-3)}
.badge i{width:6px;height:6px;border-radius:50%;background:var(--brand);display:block;flex:none}
.head h1{margin:0;font:600 clamp(32px,4.8vw,54px)/1.08 "IBM Plex Sans",sans-serif;
  letter-spacing:-.02em;max-width:15ch}
.head .stand{margin:var(--s-4) 0 0;max-width:58ch;font-size:18px;color:var(--text-muted);line-height:1.6}
.head .skills{margin:var(--s-3) 0 0;display:flex;flex-wrap:wrap;gap:8px}
.head .skills span{border:1px solid var(--line-strong);padding:5px 11px;font-family:"IBM Plex Mono";
  font-size:12px;color:var(--text-muted);letter-spacing:.02em}

.summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin:var(--s-5) 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.summary > div{padding:var(--s-3) var(--s-3) var(--s-3) 0;border-right:1px solid var(--line)}
.summary > div:not(:first-child){padding-left:var(--s-3)}
.summary > div:last-child{border-right:0;padding-right:0}
.summary dt{font-size:12.5px;color:var(--text-muted);letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px}
.summary dd{margin:0;font-size:15px;line-height:1.55}

section{padding:var(--s-6) 0 0}
.eyebrow{font-family:"IBM Plex Mono";font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brand);margin-bottom:var(--s-2)}
section h3{margin:var(--s-5) 0 var(--s-2);font:600 20px/1.3 "IBM Plex Sans",sans-serif;letter-spacing:-.01em}
section p{margin:0 0 var(--s-3);max-width:var(--measure);font-size:16px;line-height:1.7}
section p:last-child{margin-bottom:0}

.statement{margin:var(--s-4) 0;padding:var(--s-3) 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);max-width:var(--measure)}
.statement p{font:600 18px/1.55 "IBM Plex Sans",sans-serif;letter-spacing:-.005em;margin:0;color:var(--text)}

.decision{margin:var(--s-4) 0;background:var(--surface-raised);border:1px solid var(--line-strong);
  border-left:2px solid var(--brand);padding:var(--s-3);max-width:var(--measure)}
.decision .lbl{font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--brand);
  margin-bottom:var(--s-2);display:block}
.decision p{margin:0;font-size:15.5px;line-height:1.65}
.decision ul{margin:0;padding-left:20px;font-size:15.5px}
.decision li{margin-bottom:var(--s-1);line-height:1.6}
.decision li:last-child{margin-bottom:0}

.pull{margin:var(--s-5) 0;padding-left:24px;border-left:2px solid var(--brand);max-width:44ch}
.pull p{font:600 23px/1.4 "IBM Plex Sans",sans-serif;letter-spacing:-.01em;margin:0}
.pull cite{display:block;margin-top:var(--s-2);font-family:"IBM Plex Mono";font-size:13px;
  font-style:normal;color:var(--text-muted)}

/* image system — .plate / .wide / .row / .grid / .board / .refs, all sharing
   the matte + frame so a screenshot always sits inside a panel, never floats
   directly on the background.
     .row   2-3 screens in one line, set --n
     .grid  many small items that wrap, set --n (same mechanics as .row —
            named separately because it reads as a different intent: a few
            screens side by side vs. a sheet of many small thumbnails)
     .refs  modifier (on .row or .grid) — reference material, dimmed
   A cell inside .row/.grid may be a bare <img>, or
   <div class="item"><span class="cap">label</span><img></div> when that one
   image needs its own caption. */
figure{margin:var(--s-4) 0}
figure .frame{background:var(--media-matte);border:1px solid var(--media-frame);padding:16px}
figure .frame img{display:block;width:100%;height:auto}
figure .frame .item{display:flex;flex-direction:column;gap:0}
figure .frame .cap{display:block;font-family:"IBM Plex Mono";font-size:12px;color:var(--text-muted);
  letter-spacing:.02em;margin-bottom:var(--s-1)}
figcaption{margin-top:var(--s-1);font-size:13px;color:var(--text-muted);max-width:56ch}
figure.row .frame,figure.grid .frame{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:16px}
figure.board .frame{padding:22px;overflow:auto}
figure.board a{display:block}
figure.refs .frame{opacity:.85}

.results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin:var(--s-4) 0 0;border-top:1px solid var(--line)}
.results > div{padding:var(--s-3) var(--s-3) 0 0;border-right:1px solid var(--line)}
.results > div:not(:first-child){padding-left:var(--s-3)}
.results > div:last-child{border-right:0;padding-right:0}
.results b{display:block;font:600 28px/1 "IBM Plex Mono",monospace;letter-spacing:-.01em;
  margin-bottom:var(--s-1)}
.results span{font-size:13.5px;color:var(--text-muted);line-height:1.55;display:block;max-width:32ch}

.next{margin:var(--s-6) 0 0;padding:var(--s-4) 0 var(--s-6);border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}
.next .lbl{font-size:12.5px;color:var(--text-muted);letter-spacing:.04em;text-transform:uppercase;margin-bottom:var(--s-1)}
.next a.big{text-decoration:none;font:600 clamp(21px,2.8vw,28px)/1.15 "IBM Plex Sans",sans-serif;
  letter-spacing:-.015em;display:inline-flex;gap:10px;align-items:center}
.next a.big:hover{color:var(--brand)}
.next i{font-style:normal;transition:transform .18s}
.next a.big:hover i{transform:translateX(4px)}
.next .copy{font-family:"IBM Plex Mono";font-size:12.5px;color:var(--text-muted)}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.next i,.go i{transition:none}}

@media(max-width:960px){
  .summary{grid-template-columns:1fr}
  .summary > div{border-right:0;border-bottom:1px solid var(--line);padding:var(--s-3) 0}
  .summary > div:not(:first-child){padding-left:0}
  .summary > div:last-child{border-bottom:0}
}
@media(max-width:900px){
  .shell{grid-template-columns:1fr;gap:0}
  .rail{position:static;height:auto;padding:26px 0 0}
  .ticks,.rail .foot{display:none}
  .head{padding-top:var(--s-5)}
  main.home-main section{min-height:0;padding:52px 0}
  section{padding-top:var(--s-5)}
  .facts{grid-template-columns:1fr}
  .facts div{border-right:0;border-bottom:1px solid var(--line);padding-right:0}
  .facts div:not(:first-child){padding-left:0}
  .facts div:last-child{border-bottom:0}
  #about .two{grid-template-columns:1fr;gap:30px}
  figure.row .frame{grid-template-columns:1fr}
  figure.grid .frame{grid-template-columns:repeat(2,minmax(0,1fr))}
  .results{grid-template-columns:1fr}
  .results > div{border-right:0;border-bottom:1px solid var(--line);padding:var(--s-3) 0}
  .results > div:not(:first-child){padding-left:0}
  .results > div:last-child{border-bottom:0}
}