/* RaceControl marketing site — v2 stylesheet (cinematic overhaul)
   Standalone sheet. Replaces site.css wholesale in phase 3; every class name
   from v1 survives so the other pages inherit the new look without markup edits.
   Aesthetic: cinematic pit-lane — full-bleed photography under bottom-weighted
   scrims, condensed display type, monospace data in cyan, red reserved for CTAs. */

/* ------------------------------------------------------------------ fonts */
@font-face{font-family:"Barlow Condensed";src:url("../assets/fonts/barlow-condensed-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Barlow Condensed";src:url("../assets/fonts/barlow-condensed-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Barlow";src:url("../assets/fonts/barlow-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Barlow";src:url("../assets/fonts/barlow-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"IBM Plex Mono";src:url("../assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;}

/* ----------------------------------------------------------------- tokens */
:root{
  /* surface ramp */
  --void:#07090d;
  --surface-1:#0e1219;
  --surface-2:#141922;
  --surface-3:#1b212c;

  --line:rgba(237,240,243,.075);
  --line-strong:rgba(237,240,243,.16);

  --ink:#eef1f4;
  --ink-dim:#98a2b1;
  --ink-faint:#606b7a;

  /* accents — red is CTA-only, cyan carries data and labels */
  --red:#E61F2A;
  --red-hi:#ff3b45;
  --red-dim:#7a1c28;
  --cyan:#31d0f5;
  --amber:#f2a93c;
  --green:#3ecf7e;

  /* type */
  --font-display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --font-body:"Barlow","Segoe UI",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",Consolas,"SF Mono",monospace;
  --t-xs:12px; --t-sm:14px; --t-base:16.5px; --t-lg:18px;
  --t-h3:clamp(18px,1.4vw,21px);
  --t-h2:clamp(28px,3.6vw,40px);
  --t-h1:clamp(36px,6vw,58px);
  --t-display:clamp(44px,7.5vw,84px);
  --lh-tight:.95; --lh-head:1.08; --lh-body:1.6;
  --track-display:-.015em; --track-eyebrow:.18em;

  /* spacing, 4px base */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* radii */
  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-pill:999px;

  /* elevation — dark UI: hairline + ambient, not black drop shadows */
  --e1:inset 0 1px 0 rgba(255,255,255,.045);
  --e2:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 28px -16px rgba(0,0,0,.85);
  --e3:0 30px 70px -30px rgba(0,0,0,.95), 0 0 0 1px var(--line);
  --glow-red:0 0 0 1px rgba(230,31,42,.35), 0 10px 34px -12px rgba(230,31,42,.4);

  --wrap:1180px;
  --ease:cubic-bezier(.2,.7,.3,1);

  /* back-compat aliases (v1 class rules still reference these) */
  --panel:var(--surface-1);
  --panel-2:var(--surface-2);
  --radius:var(--r-md);
}

/* ------------------------------------------------------------------- base */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--void);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--t-base);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* faint grid backdrop — quieter than v1 (42px read as noise) */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, black 0%, transparent 70%);
  pointer-events:none;
  z-index:0;
  opacity:.35;
}
a{color:inherit;}
img{max-width:100%;}

h1,h2,h3{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-weight:700;
  line-height:var(--lh-head);
  letter-spacing:var(--track-display);
  text-wrap:balance;
  margin:0;
}
h1{font-size:var(--t-h1); line-height:var(--lh-tight);}
h2{font-size:var(--t-h2);}
h3{font-size:var(--t-h3);}

.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--t-xs);
  font-weight:500;
  letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;
  color:var(--cyan);
  font-variant-numeric:tabular-nums;
}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--s6); position:relative; z-index:1;}
.accent{color:var(--red); font-style:normal;}

/* a11y — v1 shipped with no focus styles at all */
:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--cyan); outline-offset:3px; border-radius:var(--r-sm);
}

/* -------------------------------------------------------------------- nav */
header.site{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--void) 86%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.navrow{display:flex; align-items:center; justify-content:space-between; gap:var(--s5);
  padding:var(--s3) var(--s6); max-width:var(--wrap); margin:0 auto;}
.brand{display:flex; align-items:center; gap:var(--s3); text-decoration:none; flex:0 0 auto;}
.brand img{height:30px; width:auto; display:block;}
nav.links{display:flex; align-items:center; gap:var(--s5);
  font-family:var(--font-display); font-size:15px; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;}
nav.links a{color:var(--ink-dim); text-decoration:none; padding:6px 0;
  border-bottom:2px solid transparent; transition:color .15s var(--ease);}
nav.links a:hover, nav.links a.active{color:var(--ink); border-color:var(--red);}
nav.links a.lang-switch{border:1px dashed var(--line-strong); border-radius:var(--r-pill);
  padding:5px 12px; font-size:13px;}
nav.links a.lang-switch:hover{border-color:var(--cyan); border-style:solid; color:var(--cyan);}

/* 7 nav items wrap badly on phones — scroll-snap strip, no JS, no hamburger */
@media(max-width:760px){
  nav.links{overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
    flex-wrap:nowrap; gap:var(--s5); padding-bottom:2px; scrollbar-width:none; max-width:100%;}
  nav.links::-webkit-scrollbar{display:none;}
  nav.links>a{scroll-snap-align:start; white-space:nowrap;}
}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; gap:var(--s2);
  background:var(--red); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:15px;
  text-transform:uppercase; letter-spacing:.04em;
  padding:11px 20px; border-radius:var(--r-sm); text-decoration:none;
  border:1px solid var(--red); cursor:pointer;
  transition:box-shadow .18s var(--ease), transform .18s var(--ease), background .18s var(--ease);
}
.btn:hover{background:var(--red-hi); box-shadow:var(--glow-red); transform:translateY(-1px);}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line-strong); box-shadow:none;}
.btn.ghost:hover{border-color:var(--cyan); color:var(--cyan); background:transparent; box-shadow:none;}
.btn.lg{font-size:17px; padding:15px 28px; justify-content:center; text-align:center; max-width:100%; word-break:break-word;}
.links .btn{padding:9px 16px; border-radius:var(--r-sm);
  background:linear-gradient(180deg,var(--red-hi),var(--red));
  box-shadow:0 2px 10px rgba(230,31,42,.30);}
.links .btn::after{content:"→"; font-weight:700; margin-left:2px; transition:transform .18s var(--ease);}
.links .btn:hover::after{transform:translateX(3px);}
.arrowlink{
  display:inline-flex; align-items:center; gap:var(--s2);
  font-family:var(--font-mono); font-size:var(--t-sm); letter-spacing:.04em;
  color:var(--cyan); text-decoration:none; border-bottom:1px solid transparent;
}
.arrowlink::after{content:"→"; transition:transform .18s var(--ease);}
.arrowlink:hover{border-color:currentColor;}
.arrowlink:hover::after{transform:translateX(3px);}

/* --------------------------------------------------- cinematic photo band */
.band{
  position:relative;
  min-height:min(88vh,760px);
  display:grid; align-items:end;
  isolation:isolate; overflow:hidden;
}
.band.hero{min-height:min(92vh,860px);}
.band.short{min-height:min(56vh,520px);}
.band > .media{position:absolute; inset:0; z-index:-1;}
.band > .media img{
  width:100%; height:100%; object-fit:cover; display:block;
  /* palette-coherent grade so mixed-quality photos read as one set */
  filter:saturate(.88) contrast(1.06);
  transform:scale(1.02);
  animation:drift 28s var(--ease) infinite alternate;
}
@keyframes drift{ from{transform:scale(1.02) translate3d(0,0,0);} to{transform:scale(1.09) translate3d(-1.2%,-1%,0);} }
/* bottom-weighted + left-weighted scrim: text sits bottom-left, editorial */
.band > .media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(7,9,13,.15) 0%, rgba(7,9,13,.55) 45%, rgba(7,9,13,.94) 100%),
    linear-gradient(90deg, rgba(7,9,13,.75) 0%, rgba(7,9,13,0) 55%);
}
.band .band-body{padding:var(--s9) 0 var(--s8); max-width:70ch;}
.band h1{font-size:var(--t-display); margin:var(--s4) 0 var(--s5);}
.band h2{font-size:clamp(30px,4.4vw,52px); margin:var(--s3) 0 var(--s4);}
.band p.lead{font-size:clamp(16px,1.6vw,20px); color:var(--ink); opacity:.92; max-width:56ch; margin:0 0 var(--s6);}
.band .hero-ctas{display:flex; gap:var(--s3); flex-wrap:wrap;}
.hero-logo{height:104px; width:auto; display:block; margin:0 0 var(--s2);
  filter:drop-shadow(0 8px 30px rgba(0,0,0,.6));}
@media(max-width:560px){
  .hero-logo{height:74px;}
  .band .band-body{padding:var(--s8) 0 var(--s7);}
}

/* media slot with no asset yet — graded gradient, zero <img>, no layout hole */
.media--pending{
  background:
    radial-gradient(ellipse 70% 90% at 20% 100%, rgba(230,31,42,.16) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 85% 10%, rgba(49,208,245,.10) 0%, transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--void));
}
.media--pending::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px; opacity:.6;
}
.media-note{
  position:absolute; right:var(--s6); bottom:var(--s5); z-index:2;
  font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint);
  border:1px dashed var(--line-strong); border-radius:var(--r-pill); padding:6px 14px;
}

/* --------------------------------------------------------------- proof row */
.proof{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, var(--surface-1), var(--void));
}
/* minmax(0,…) — the mono date is wide enough to blow out a plain 1fr track */
.proof-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr));}
.proof-item{
  padding:var(--s6) var(--s5);
  border-left:1px solid var(--line);
  text-decoration:none; display:block;
  transition:background .18s var(--ease);
}
.proof-item:first-child{border-left:none;}
a.proof-item:hover{background:var(--surface-2);}
.proof-item b{
  display:block; font-family:var(--font-mono); font-weight:500;
  font-size:clamp(26px,3vw,38px); color:var(--cyan);
  font-variant-numeric:tabular-nums; line-height:1.1;
}
.proof-item span{
  display:block; margin-top:var(--s2);
  font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint);
}
a.proof-item span::after{content:" →"; color:var(--ink-faint);}
@media(max-width:860px){
  .proof-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .proof-item:nth-child(odd){border-left:none;}
  .proof-item:nth-child(n+3){border-top:1px solid var(--line);}
}
@media(max-width:560px){
  .proof-item{padding:var(--s5) var(--s4);}
  .proof-item b{font-size:22px;}
}

/* --------------------------------------------------------------- sections */
.section{padding:var(--s9) 0; position:relative; z-index:1;}
.section.tight{padding:var(--s7) 0;}
.section.alt{background:var(--surface-1); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.section-head{max-width:66ch; margin:0 0 var(--s7);}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head h2{margin-top:var(--s3);}
.section-head p{color:var(--ink-dim); margin-top:var(--s3);}
hr.rule{border:none; border-top:1px solid var(--line); margin:0;}

/* page hero (secondary pages) */
.page-hero{padding:var(--s8) 0 var(--s3);}
.page-hero h1{margin:var(--s3) 0 var(--s4);}
.page-hero p{color:var(--ink-dim); font-size:var(--t-lg); max-width:62ch;}

/* --------------------------------------------------------- split (photo + copy) */
.split{display:grid; grid-template-columns:1.05fr 1fr; gap:var(--s8); align-items:center;
  margin-bottom:var(--s8);}
.split:last-child{margin-bottom:0;}
.split.rev > .media{order:2;}
.split > .media{position:relative; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--e3); background:var(--surface-2); min-height:240px;}
.split > .media img{display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:16/10;}
.split .split-body h3{font-size:clamp(22px,2.4vw,30px); margin-bottom:var(--s3);}
.split .split-body p{color:var(--ink-dim); margin:0 0 var(--s4);}
@media(max-width:860px){
  .split{grid-template-columns:1fr; gap:var(--s5);}
  .split.rev > .media{order:0;}
}

/* ------------------------------------------------------------ tiles / cards */
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4);}
.tiles.four{grid-template-columns:repeat(4,1fr);}
.tile{
  background:linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--s5); box-shadow:var(--e1);
  transition:box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.tile:hover{border-color:var(--line-strong); box-shadow:var(--e2); transform:translateY(-3px);}
.tile .icon{
  width:44px; height:44px; border-radius:var(--r-md); background:var(--surface-3);
  display:flex; align-items:center; justify-content:center; margin-bottom:var(--s4);
  border:1px solid var(--line); transition:border-color .2s var(--ease);
}
.tile:hover .icon{border-color:rgba(49,208,245,.4);}
.tile .icon img{width:24px; height:24px; display:block;}
.tile h3{font-size:var(--t-lg); text-transform:none; letter-spacing:0;
  font-family:var(--font-body); font-weight:600; margin-bottom:var(--s2);}
.tile p{font-size:var(--t-sm); color:var(--ink-dim); margin:0;}
.tile .tag{display:inline-block; margin-top:var(--s3); font-family:var(--font-mono);
  font-size:11px; color:var(--ink-faint); letter-spacing:.04em;}

/* --------------------------------------------------------- architecture flow */
.flow{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); align-items:stretch;
  position:relative;}
/* hairline connector rail behind the three nodes */
.flow::before{
  content:""; position:absolute; left:12%; right:12%; top:50%; height:1px;
  background:linear-gradient(90deg, transparent, var(--line-strong) 15%, var(--line-strong) 85%, transparent);
  z-index:0;
}
.flow .node{
  position:relative; z-index:1;
  background:linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--s6) var(--s5); text-align:center; box-shadow:var(--e1);
}
.flow .node .k{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  color:var(--cyan); text-transform:uppercase;}
.flow .node h3{font-size:var(--t-lg); text-transform:none; letter-spacing:0;
  font-family:var(--font-body); font-weight:600; margin:var(--s3) 0 var(--s2);}
.flow .node p{font-size:var(--t-sm); color:var(--ink-dim); margin:0;}
@media(max-width:860px){ .flow::before{display:none;} }

/* -------------------------------------------------------------- deployed at */
.deployed{display:flex; align-items:center; gap:var(--s7); flex-wrap:wrap;
  justify-content:center; text-align:center;}
.deployed img{height:56px; width:auto; opacity:.9;}
.deployed p{color:var(--ink-dim); margin:0; max-width:52ch; text-align:left;}
@media(max-width:640px){ .deployed p{text-align:center;} }

/* ------------------------------------------------------- comparison table */
.cmp{width:100%; border-collapse:collapse; background:var(--surface-1);
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;}
.cmp th, .cmp td{text-align:left; padding:var(--s4); border-bottom:1px solid var(--line);
  font-size:var(--t-sm); vertical-align:top;}
.cmp thead th{font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint); background:var(--surface-2);}
.cmp thead th:last-child{color:var(--cyan);}
.cmp td:first-child{color:var(--ink); font-weight:600; width:30%;}
.cmp td:nth-child(2){color:var(--ink-faint);}
.cmp td:last-child{color:var(--ink);}
.cmp tr:last-child td{border-bottom:none;}
.cmp-scroll{overflow-x:auto; margin:var(--s2) 0;}
/* On a phone a 3-column comparison collapses to unreadable slivers. Stack each
   row into a card instead. ponytail: the two labels are hard-coded because both
   .cmp tables on the site share the same thead — if a third table with different
   headers appears, switch to data-th attributes then, not before. */
@media(max-width:640px){
  .cmp thead{display:none;}
  .cmp, .cmp tbody, .cmp tr, .cmp td{display:block; width:auto;}
  .cmp tr{border-bottom:1px solid var(--line); padding:var(--s5) var(--s4);}
  .cmp tr:last-child{border-bottom:none;}
  .cmp td{border:none; padding:0 0 var(--s3);}
  .cmp td:last-child{padding-bottom:0;}
  .cmp td:first-child{width:auto; font-family:var(--font-display); text-transform:uppercase;
    font-size:20px; line-height:1.1; letter-spacing:var(--track-display); margin-bottom:var(--s3);}
  .cmp td:nth-child(2)::before, .cmp td:last-child::before{
    display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em;
    text-transform:uppercase; margin-bottom:var(--s1);}
  .cmp td:nth-child(2)::before{content:"Manual"; color:var(--ink-faint);}
  .cmp td:last-child::before{content:"RaceControl"; color:var(--cyan);}
}

/* ------------------------------------------------------------------ prose */
.prose{max-width:70ch;}
.prose p{color:var(--ink-dim); margin:0 0 var(--s4);}
.prose h2{margin:var(--s8) 0 var(--s4);}
.prose h3{font-size:var(--t-lg); text-transform:none; letter-spacing:0;
  font-family:var(--font-body); font-weight:600; margin:var(--s6) 0 var(--s3);}
.prose ul{color:var(--ink-dim); padding-left:var(--s5); margin:0 0 var(--s4);}
.prose li{margin-bottom:var(--s2);}
.prose a{color:var(--cyan);}

/* -------------------------------------------------------------- stat strip */
.stat-strip{display:flex; gap:var(--s9); flex-wrap:wrap; justify-content:center;
  padding:var(--s7) var(--s6); border:1px solid var(--line); border-radius:var(--r-md);
  background:linear-gradient(180deg, var(--surface-2), var(--surface-1)); box-shadow:var(--e1);}
.stat{font-family:var(--font-mono); text-align:center;}
.stat b{display:block; font-size:38px; font-weight:500; color:var(--cyan); font-variant-numeric:tabular-nums;}
.stat span{font-size:var(--t-xs); color:var(--ink-faint); text-transform:uppercase; letter-spacing:.1em;}

/* --------------------------------------------------- features: group bars */
.groupbar{display:flex; align-items:center; gap:var(--s4); margin:var(--s9) 0 var(--s5);}
.groupbar .n{font-family:var(--font-mono); color:var(--cyan); font-size:13px; font-weight:500;}
.groupbar .t{font-family:var(--font-mono); font-size:var(--t-xs); text-transform:uppercase;
  letter-spacing:.14em; color:var(--ink-faint);}
.groupbar hr{flex:1; border:none; border-top:1px solid var(--line);}
.jump{display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s5);}
.jump a{font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:.05em;
  color:var(--ink-dim); text-decoration:none; border:1px solid var(--line);
  padding:7px 14px; border-radius:var(--r-pill); transition:border-color .18s var(--ease), color .18s var(--ease);}
.jump a:hover{border-color:var(--cyan); color:var(--ink);}

/* -------------------------------------------------- feature list (dense) */
/* 50-odd features would be 50 identical bordered boxes as .tile. Hairline
   separators instead — same information, a fraction of the visual noise. */
.flist{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5) var(--s7);}
.flist.two{grid-template-columns:repeat(2,minmax(0,1fr));}
.fitem{border-top:1px solid var(--line); padding-top:var(--s4);}
.fitem h3{font-family:var(--font-body); font-weight:600; font-size:17px;
  text-transform:none; letter-spacing:0; line-height:1.3; margin-bottom:var(--s2);}
.fitem p{font-size:var(--t-sm); color:var(--ink-dim); margin:0;}
.fitem .note{display:block; margin-top:var(--s2); font-family:var(--font-mono);
  font-size:11px; letter-spacing:.04em; color:var(--ink-faint);}
.fitem .note.warn{color:var(--amber);}
@media(max-width:860px){ .flist, .flist.two{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:560px){ .flist, .flist.two{grid-template-columns:1fr;} }

/* sim support strip */
.sims{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s4);}
.sim{background:linear-gradient(180deg,var(--surface-2),var(--surface-1));
  border:1px solid var(--line); border-radius:var(--r-md); padding:var(--s5); box-shadow:var(--e1);}
.sim .k{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cyan);}
.sim h3{font-size:var(--t-lg); text-transform:none; letter-spacing:0;
  font-family:var(--font-body); font-weight:600; margin:var(--s2) 0 var(--s2);}
.sim p{font-size:var(--t-sm); color:var(--ink-dim); margin:0;}
@media(max-width:860px){ .sims{grid-template-columns:1fr;} }

/* ---------------------------------------------------------------- gallery */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4);}
.shot{
  background:var(--surface-2); border-radius:var(--r-md); padding:var(--s2);
  text-decoration:none; color:inherit; display:block; box-shadow:var(--e2);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.shot:hover{transform:translateY(-3px); box-shadow:var(--e3);}
/* height:auto is load-bearing — the width/height attributes on <img> map to
   presentational hints, and a hinted height:900px beats aspect-ratio, which
   stretched every shot to full source height and magnified it ~3x. */
.shot img{width:100%; height:auto; display:block; border-radius:var(--r-sm);
  border:1px solid var(--line); aspect-ratio:16/10; object-fit:cover; background:var(--surface-3);}
/* a section with a single screenshot shouldn't leave two empty columns */
.gallery.one{grid-template-columns:minmax(0,760px);}
.shot .ph{width:100%; aspect-ratio:16/10; border-radius:var(--r-sm); border:1px dashed var(--line-strong);
  display:flex; align-items:center; justify-content:center; color:var(--ink-faint);
  font-family:var(--font-mono); font-size:var(--t-xs); text-align:center; background:var(--surface-3);}
.shot figcaption{font-family:var(--font-mono); font-size:11px; color:var(--ink-faint);
  padding:var(--s3) var(--s1) var(--s1); letter-spacing:.03em;}

/* ------------------------------------------------------------ event photos */
/* Multi-column, not grid: the set mixes portrait and landscape, and a grid with
   object-fit:cover would crop half of them. Columns keep every frame intact. */
.photos{columns:3; column-gap:var(--s3);}
.photos figure{break-inside:avoid; margin:0 0 var(--s3); position:relative;}
.photos a{display:block; border-radius:var(--r-md); overflow:hidden; box-shadow:var(--e2);}
.photos img{width:100%; height:auto; display:block;
  filter:saturate(.92) contrast(1.04); transition:transform .4s var(--ease);}
.photos a:hover img{transform:scale(1.03);}
.photos figcaption{font-family:var(--font-mono); font-size:11px; color:var(--ink-faint);
  padding:var(--s2) var(--s1) 0; letter-spacing:.03em;}
@media(max-width:860px){ .photos{columns:2;} }
@media(max-width:560px){ .photos{columns:1;} }

.photos-pending{border:1px dashed var(--line-strong); border-radius:var(--r-md);
  background:var(--surface-1); padding:var(--s8) var(--s5); text-align:center;
  font-family:var(--font-mono); font-size:var(--t-sm); color:var(--ink-faint);}

/* ---------------------------------------------------- throughput compare */
.tput{display:grid; gap:var(--s5); max-width:820px;}
.tput-row{display:grid; grid-template-columns:1fr auto; gap:var(--s2) var(--s5); align-items:baseline;}
.tput-row .who{font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint);}
.tput-row.us .who{color:var(--cyan);}
.tput-row .n{font-family:var(--font-mono); font-size:clamp(28px,4vw,44px); line-height:1;
  font-variant-numeric:tabular-nums; color:var(--ink-dim);}
.tput-row.us .n{color:var(--cyan);}
.tput-row .bar{grid-column:1 / -1; height:8px; border-radius:var(--r-pill);
  background:var(--surface-3); overflow:hidden;}
.tput-row .bar > i{display:block; height:100%; border-radius:var(--r-pill);
  background:var(--ink-faint);}
.tput-row.us .bar > i{background:linear-gradient(90deg,var(--cyan),#7ae7ff);}
.tput-note{font-size:var(--t-sm); color:var(--ink-dim); max-width:70ch; margin:0;}
.tput-derived{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5);
  margin-top:var(--s3); padding-top:var(--s5); border-top:1px solid var(--line);}
.tput-derived div b{display:block; font-family:var(--font-mono); font-size:26px;
  color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.1;}
.tput-derived div span{display:block; margin-top:var(--s1); font-family:var(--font-mono);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);}
@media(max-width:560px){ .tput-derived{grid-template-columns:1fr; gap:var(--s4);} }

/* event article */
.event{border-top:1px solid var(--line-strong); padding-top:var(--s6); margin-top:var(--s8);}
.event:first-of-type{margin-top:0;}
.event .meta{font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:.1em;
  text-transform:uppercase; color:var(--cyan); margin-bottom:var(--s3);}
.event h2{margin-bottom:var(--s5);}
.event .lede{color:var(--ink-dim); max-width:70ch; margin:0 0 var(--s4);}
.credit{font-family:var(--font-mono); font-size:var(--t-xs); color:var(--ink-dim);
  letter-spacing:.04em; margin-top:var(--s5);}
.credit a{color:var(--cyan);}
.disclaimer{font-size:var(--t-xs); line-height:1.6; color:var(--ink-faint);
  max-width:80ch; margin-top:var(--s5);}

/* pure-CSS lightbox (:target) */
.lb{position:fixed; inset:0; background:rgba(4,5,7,.94); z-index:50;
  display:none; align-items:center; justify-content:center; padding:var(--s6);}
.lb:target{display:flex;}
.lb img{max-width:min(1200px,94vw); max-height:88vh; border-radius:var(--r-md);
  border:1px solid var(--line-strong); position:relative; z-index:2;}
.lb .lb-back{position:absolute; inset:0; z-index:1;}
.lb .close{position:absolute; top:var(--s5); right:var(--s6); z-index:3;
  font-size:34px; color:var(--ink); text-decoration:none; line-height:1;}

/* -------------------------------------------------------------------- FAQ */
.faq{max-width:82ch;}
.faq details{border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-1);
  padding:0 var(--s5); margin-bottom:var(--s3);}
.faq details[open]{border-color:var(--line-strong); background:var(--surface-2);}
.faq summary{cursor:pointer; list-style:none; padding:var(--s5) 0; font-weight:600;
  display:flex; justify-content:space-between; align-items:center; gap:var(--s4);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; color:var(--cyan); font-size:22px; font-weight:400;}
.faq details[open] summary::after{content:"\2013";}
.faq details p{color:var(--ink-dim); font-size:var(--t-sm); margin:0 0 var(--s5);}

/* --------------------------------------------------------------- contact */
.contact-card{
  background:linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s8); text-align:center; max-width:760px; margin:0 auto; box-shadow:var(--e2);
}
.contact-card p{color:var(--ink-dim); margin:0 auto var(--s6); max-width:54ch;}
.mail-plain{font-family:var(--font-mono); color:var(--ink-dim); font-size:var(--t-sm); margin-top:var(--s5);}
.mail-plain a{color:var(--ink);}
.contact-meta{display:flex; gap:var(--s7); justify-content:center; flex-wrap:wrap; margin-top:var(--s6);
  font-family:var(--font-mono); font-size:var(--t-xs); color:var(--ink-faint); text-align:center;}
.contact-meta b{display:block; color:var(--ink); font-size:var(--t-sm); margin-bottom:var(--s1); letter-spacing:.04em;}
.msg-template{margin:var(--s6) auto 0; max-width:58ch; text-align:left;}
.tpl-head{font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-dim); margin-bottom:var(--s2);}
.msg-template pre{margin:0; padding:var(--s4) var(--s5); background:var(--surface-3);
  border:1px solid var(--line); border-radius:var(--r-sm); color:var(--ink);
  font-family:var(--font-mono); font-size:13px; line-height:1.55;
  white-space:pre-wrap; word-break:break-word;}

/* -------------------------------------------------------------- partners */
.partners{display:grid; gap:var(--s5); max-width:860px; margin:0 auto;}
.partner-card{display:flex; gap:var(--s7); align-items:center; padding:var(--s6);
  background:linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--e2);}
.partner-logo{flex:0 0 260px; max-width:260px;}
.partner-logo img{width:100%; height:auto; display:block;}
.partner-body h3{font-size:24px; margin:0 0 var(--s1);}
.partner-tag{font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:.06em;
  text-transform:uppercase; color:var(--cyan); margin-bottom:var(--s3);}
.partner-body p{color:var(--ink-dim); margin:0 0 var(--s4);}
.partner-meta{display:flex; gap:var(--s5); align-items:center; flex-wrap:wrap;}
.partner-loc{display:inline-flex; align-items:center; gap:var(--s2); color:var(--ink-dim); font-size:var(--t-sm);}
.partner-loc img{width:18px; height:18px; opacity:.85;}
.partners-cta{text-align:center; margin-top:var(--s7);}
.partners-cta p{color:var(--ink-dim); margin-bottom:var(--s4);}
@media(max-width:640px){
  .partner-card{flex-direction:column; text-align:center; gap:var(--s5);}
  .partner-logo{flex-basis:auto; max-width:220px;}
  .partner-meta{justify-content:center;}
}

/* --------------------------------------------------------------- creator */
.creator{display:grid; grid-template-columns:220px 1fr; gap:var(--s6); align-items:start;
  background:linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s6); box-shadow:var(--e2);}
.creator .portrait{width:220px; height:300px; border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--line-strong); background:var(--surface-3); display:flex;
  align-items:center; justify-content:center;}
.creator .portrait img{width:100%; height:100%; object-fit:cover; object-position:center 18%;}
.creator h3{font-size:24px; text-transform:none; letter-spacing:0;}
.creator .role{font-family:var(--font-mono); font-size:var(--t-xs); color:var(--cyan);
  letter-spacing:.1em; text-transform:uppercase; margin:var(--s1) 0 var(--s4);}
.creator p{color:var(--ink-dim); font-size:var(--t-sm); margin:0 0 var(--s3);}

/* -------------------------------------------------------------- CTA band */
.cta{text-align:center; padding:var(--s9) 0 var(--s8); border-top:1px solid var(--line);}
.cta h2{margin-bottom:var(--s4);}
.cta p{color:var(--ink-dim); margin-bottom:var(--s6);}

/* --------------------------------------------------------------- footer */
footer{border-top:1px solid var(--line); background:var(--surface-1);
  padding:var(--s8) 0 var(--s7); position:relative; z-index:1;}
.footgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--s7); align-items:start;}
.footgrid img{height:26px; width:auto; display:block; margin-bottom:var(--s3);}
.footgrid p{color:var(--ink-faint); font-size:var(--t-sm); margin:0; max-width:34ch;}
.foothead{font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:var(--s3);}
.footgrid nav{display:flex; flex-direction:column; gap:var(--s2);}
.footgrid a{color:var(--ink-dim); text-decoration:none; font-size:var(--t-sm);}
.footgrid a:hover{color:var(--cyan);}
.footbottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;
  gap:var(--s3); margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:var(--t-xs); color:var(--ink-faint);}
.footbottom a{color:var(--ink-dim); text-decoration:none;}
.footbottom a:hover{color:var(--cyan);}
/* v1 footer markup (other pages, until phase 3) */
.footrow{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--s4);
  font-size:13px; color:var(--ink-faint);}
.footrow img{height:24px; width:auto;}
.footrow nav{display:flex; gap:var(--s5); flex-wrap:wrap;}
.footrow a{color:var(--ink-dim); text-decoration:none;}
.footrow a:hover{color:var(--cyan);}
@media(max-width:760px){ .footgrid{grid-template-columns:1fr; gap:var(--s6);} }

/* ------------------------------------------------------------ responsive */
@media (max-width:860px){
  .tiles, .tiles.four{grid-template-columns:1fr 1fr;}
  .flow{grid-template-columns:1fr;}
  .gallery{grid-template-columns:1fr 1fr;}
  .creator{grid-template-columns:1fr; text-align:center; justify-items:center;}
  .section{padding:var(--s8) 0;}
}
@media (max-width:560px){
  .wrap{padding:0 var(--s5);}
  .navrow{padding:var(--s3) var(--s5);}
  .tiles, .tiles.four, .gallery{grid-template-columns:1fr;}
  .stat-strip{gap:var(--s6); padding:var(--s6) var(--s5);}
  .contact-meta{gap:var(--s5);}
  .contact-card{padding:var(--s6);}
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important; transition:none !important;}
}