/* Utilitaire — rebuild · palette: Direction B, Asphalt & Sodium
   BEN Mk2.7 · 2026-09-18
   Direction and copy carried from the first draft, which Anthony co-owns. The palette was read off
   the running draft rather than eyeballed. Everything here is a rebuild, not a re-skin:
   real serif, real contrast, real capture, real head.
   Motion rules: transform and opacity only; prefers-reduced-motion switches it off outright. */

/* Direction 02, chosen 2026-09-18: Archivo carries everything visible; IBM Plex Mono
   carries every number, label, status and control. The mono is the point — it makes the page
   read as a record of something rather than an advert for it. */
@font-face{font-family:"Archivo";src:url("fonts/archivo-latin-wght-normal.woff2") format("woff2-variations");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Mono";src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Mono";src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  /* DIRECTION B — ASPHALT & SODIUM, chosen by Anthony 2026-09-18.
     Blue-black ground, one low-chroma brass accent: the colour of the street light already in the
     photographs. Monotone by construction — one ground, three panel steps, one accent, no second
     colour. Every value below was measured on the ground before it was written in. */
  --ground:#0E0F11;
  --panel-1:#131417;
  --panel-2:#191B1F;
  --panel-3:#232730;
  --bone:#ECEBE8;      /* 16.1:1 */
  --muted:#A3A5A9;     /*  7.8:1 */
  --dim:#83868C;       /*  5.3:1 */
  --sage:#C9A277;      /*  8.1:1 — the brass accent; name kept so nothing downstream breaks */
  --line:rgba(236,235,232,.14);

  /* colourways, theirs */
  --earth:#928270; --olive:#525944; --ink:#263443; --slate:#686E73; --graphite:#34393A;

  --s1:6px; --s2:12px; --s3:20px; --s4:32px; --s5:48px; --s6:76px; --s7:116px; --s8:168px;
  --bar:64px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--ground)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--ground); color:var(--bone);
  font-family:"Archivo",system-ui,-apple-system,sans-serif; font-size:16px; line-height:1.62;
  font-variation-settings:"wght" 400; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
::selection{background:var(--sage); color:var(--ground)}
:focus-visible{outline:2px solid var(--sage); outline-offset:3px}

.wrap{width:min(1440px,calc(100% - 2*var(--s5))); margin-inline:auto}
@media (max-width:760px){.wrap{width:calc(100% - 2*var(--s4))}}

.skip{position:absolute; left:-9999px; top:0; background:var(--sage); color:var(--ground); padding:12px 18px; z-index:200}
.skip:focus{left:var(--s4); top:var(--s3)}

/* ── type ─────────────────────────────────────────────── */
.d{
  font-family:"Archivo",sans-serif; font-weight:600; line-height:.94;
  letter-spacing:-.045em; margin:0;
}
/* the serif italic is gone — it read atelier, not carry. Emphasis is now weight and tone
   inside one typeface, which is what an engineered brand does. */
.d em{font-style:normal; font-weight:400; color:var(--muted); letter-spacing:-.04em}
h1.d{font-size:clamp(52px,9.6vw,136px)}
h2.d{font-size:clamp(38px,6.6vw,92px)}
h3.d{font-size:clamp(30px,3.6vw,52px)}
p{margin:0 0 var(--s3); max-width:54ch; color:var(--muted)}
.lead{font-size:clamp(17px,1.4vw,21px); line-height:1.5; color:var(--bone); max-width:34ch}
.eyebrow{
  font-family:"Mono",ui-monospace,monospace;
  font-size:10.5px; font-weight:400; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim); margin:0;
}
.eyebrow.sage{color:var(--sage)}

/* ── header ───────────────────────────────────────────── */
.bar{
  position:fixed; inset:0 0 auto 0; height:var(--bar); z-index:90;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:0 var(--s5); background:rgba(14,15,17,.72); backdrop-filter:blur(10px);
  border-bottom:1px solid transparent; transition:border-color .3s ease, background .3s ease;
}
.bar.stuck{border-bottom-color:var(--line); background:rgba(14,15,17,.94)}
@media (max-width:760px){.bar{padding:0 var(--s4)}}
.mark{display:inline-flex; align-items:flex-start; gap:3px; text-decoration:none;
  font-family:"Archivo",sans-serif; font-weight:600; font-size:21px; letter-spacing:-.035em}
.mark sup{font-family:"Mono",ui-monospace,monospace; font-size:8.5px; letter-spacing:0; color:var(--dim); margin-top:4px}
.bar nav{display:flex; gap:var(--s4); align-items:center}
.bar nav a{font-family:"Mono",ui-monospace,monospace; font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none; color:var(--muted); transition:color .2s ease}
.bar nav a:hover{color:var(--bone)}
.bar nav a.dev{color:var(--sage)}
@media (max-width:640px){.bar nav a:not(.dev){display:none}}

.progress{position:fixed; left:0; top:0; height:2px; width:100%; transform-origin:0 50%;
  transform:scaleX(0); background:var(--sage); z-index:95}

/* ── hero ─────────────────────────────────────────────── */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding:calc(var(--bar) + var(--s6)) 0 var(--s6); overflow:hidden}
.hero-media{position:absolute; inset:0; background:var(--panel-1)}
.hero-media img{width:100%; height:100%; object-fit:cover; opacity:.78}
.hero-media::after{content:""; position:absolute; inset:0; background:
  linear-gradient(180deg,rgba(14,15,17,.86) 0%,rgba(14,15,17,.26) 38%,rgba(14,15,17,.92) 100%),
  linear-gradient(90deg,rgba(14,15,17,.80),transparent 62%)}
.hero .wrap{position:relative; z-index:2; width:min(1440px,calc(100% - 2*var(--s5)))}
.hero-top{position:absolute; top:calc(var(--bar) + var(--s4)); left:0; right:0; z-index:2}
.hero-top .wrap{display:flex; justify-content:space-between; gap:var(--s4)}
.hero h1{margin:var(--s4) 0 var(--s5)}
.hero h1 .ln{display:block; opacity:0; transform:translateY(24px);
  animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes rise{to{opacity:1; transform:none}}
.hero-foot{position:absolute; left:0; right:0; bottom:var(--s5); z-index:2}
.hero-foot .wrap{display:flex; justify-content:space-between; align-items:end; gap:var(--s4)}

.cta{display:inline-flex; align-items:center; gap:14px; padding:16px 26px; text-decoration:none;
  border:1px solid var(--line); font-family:"Mono",ui-monospace,monospace;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease}
.cta:hover{background:var(--bone); color:var(--ground); border-color:var(--bone); transform:translateY(-2px)}
.cta.filled{background:var(--sage); color:var(--ground); border-color:var(--sage)}
.cta.filled:hover{background:transparent; color:var(--sage)}
@media (prefers-reduced-motion:reduce){.cta:hover{transform:none}}

/* ── generic section ──────────────────────────────────── */
section{position:relative; padding:var(--s8) 0}
.panel{background:var(--panel-2)}
.panel-deep{background:var(--panel-3)}
.head{display:grid; gap:var(--s3); margin-bottom:var(--s6)}

/* ── outlook ──────────────────────────────────────────── */
.outlook{display:grid; gap:var(--s5)}
@media (min-width:980px){.outlook{grid-template-columns:1.25fr .75fr; gap:var(--s8); align-items:end}}
.outlook .idx{font-family:"Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.2em; color:var(--dim); text-transform:uppercase}

/* ── field studies ────────────────────────────────────── */
.studies{display:grid; gap:var(--s6)}
@media (min-width:1040px){
  .studies{grid-template-columns:.32fr .68fr; gap:var(--s8); align-items:start}
  .study-index{position:sticky; top:calc(var(--bar) + var(--s5))}
}
.study-index ol{list-style:none; margin:var(--s4) 0 0; padding:0}
.study-index li{border-top:1px solid var(--line)}
.study-index li:last-child{border-bottom:1px solid var(--line)}
.study-index a{display:flex; gap:var(--s3); align-items:baseline; padding:var(--s3) 0;
  text-decoration:none; color:var(--dim); transition:color .25s ease,padding-left .35s cubic-bezier(.2,.8,.2,1)}
.study-index a .n{font-family:"Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.16em}
.study-index a .t{font-size:17px; letter-spacing:-.01em}
.study-index a:hover,.study-index a.on{color:var(--bone); padding-left:10px}
@media (prefers-reduced-motion:reduce){.study-index a{transition:none}}

.study{padding:0 0 var(--s8)}
.study:last-child{padding-bottom:0}
.frame{position:relative; aspect-ratio:3/2; background:var(--panel-1); border:1px solid var(--line);
  overflow:hidden; display:grid; place-items:center}
.frame img{width:100%; height:100%; object-fit:cover}
.frame.tall{aspect-ratio:4/5}
.frame .slot{text-align:center; padding:var(--s5); display:grid; gap:10px; justify-items:center}
.frame .slot em{font-style:normal; color:var(--dim); font-size:14px; max-width:34ch; line-height:1.5}
.study .no{font-family:"Mono",ui-monospace,monospace; font-weight:400; font-size:clamp(46px,5.6vw,84px);
  line-height:1; letter-spacing:-.06em; color:var(--bone); margin:var(--s4) 0 var(--s2)}
.study .body{display:grid; gap:var(--s3); margin-top:var(--s3)}
@media (min-width:820px){.study .body{grid-template-columns:1fr 1fr; gap:var(--s6); align-items:start}}
.ways{display:flex; align-items:center; gap:10px; margin-top:var(--s3)}
.ways i{width:13px; height:13px; border-radius:50%; display:block; border:1px solid rgba(236,235,232,.25)}
.ways span{font-family:"Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}

/* ── principles ───────────────────────────────────────── */
.principles{display:grid; gap:var(--s5); margin-top:var(--s6)}
@media (min-width:820px){.principles{grid-template-columns:repeat(3,1fr); gap:var(--s6)}}
.principles div{border-top:1px solid var(--line); padding-top:var(--s3)}
.principles h3{font-size:19px; font-weight:500; letter-spacing:-.01em; margin:var(--s2) 0 0; color:var(--bone)}

/* ── worktable ────────────────────────────────────────── */
.table-grid{display:grid; gap:var(--s6)}
@media (min-width:980px){.table-grid{grid-template-columns:1fr 1fr; gap:var(--s8); align-items:center}}
.spec{list-style:none; margin:var(--s5) 0 0; padding:0; border-top:1px solid var(--line)}
.spec li{display:flex; justify-content:space-between; gap:var(--s4); padding:14px 0;
  border-bottom:1px solid var(--line); font-family:"Mono",ui-monospace,monospace; font-size:12.5px;
  letter-spacing:.02em; color:var(--dim)}
.spec li b{color:var(--bone); font-weight:500; text-align:right}
.tag{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line);
  padding:7px 14px; font-family:"Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--sage)}

/* ── notify ───────────────────────────────────────────── */
.notify{display:grid; gap:var(--s5)}
@media (min-width:900px){.notify{grid-template-columns:1fr 1fr; gap:var(--s8); align-items:center}}
.signup{display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s4)}
.signup input{flex:1 1 260px; background:var(--panel-1); border:1px solid var(--line);
  color:var(--bone); padding:16px 18px; font:inherit; font-size:15px; border-radius:0}
.signup input::placeholder{color:var(--dim)}
.fineprint{font-family:"Mono",ui-monospace,monospace; font-size:11.5px; line-height:1.7; color:var(--dim); margin-top:var(--s3); max-width:52ch}
.sent{border:1px solid rgba(201,162,119,.5); background:rgba(201,162,119,.08);
  padding:var(--s4); font-size:15px; color:var(--bone); margin-top:var(--s4)}

/* ── footer ───────────────────────────────────────────── */
footer{border-top:1px solid var(--line); padding:var(--s6) 0 var(--s5)}
/* The mark — treatment 03, "rule and mark". Chosen by Anthony 2026-09-18 after
   seeing 04 in place: the care label is a small block left-aligned, which leaves the
   right half of the footer empty. 03 spans the full width, so the footer reads as a
   closing rule rather than an object with dead space beside it.
   Supersedes mark A (withdrawn: 1.28:1, cropped both edges) and the 04 care label.
   Rules: the hairline runs the full width, the name sits left, the line sits right,
   and nothing is centred. */
.frule{display:flex; flex-wrap:wrap; gap:var(--s3) var(--s4); align-items:baseline;
  justify-content:space-between; border-top:1px solid rgba(236,235,232,.28);
  padding-top:var(--s4); margin-bottom:var(--s5)}
.fname{font-family:"Archivo",sans-serif; font-weight:600; font-size:clamp(26px,3.4vw,44px);
  letter-spacing:-.04em; line-height:1; margin:0; color:var(--bone)}
.fname sup{font-family:"Mono",ui-monospace,monospace; font-size:.22em; top:-1.1em; color:var(--dim)}
.fest{margin:0; font-family:"Mono",ui-monospace,monospace; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}
.fgrid{display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:var(--s4)}
.fgrid p{margin:0; font-family:"Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}

/* ── reveal ───────────────────────────────────────────── */
.rv{opacity:0; transform:translateY(16px); transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none; transition:none}
  .hero h1 .ln{animation:none; opacity:1; transform:none}
}

/* ── catalogue: page header reuse ─────────────────────── */
.phead{position:relative; overflow:hidden; padding:calc(var(--bar) + var(--s7)) 0 var(--s7)}
.phead-bg{position:absolute; inset:0; background:
  radial-gradient(70% 110% at 15% 0%,rgba(201,162,119,.10),transparent 62%),
  linear-gradient(180deg,#181C22 0%,var(--ground) 100%)}
.phead .wrap{position:relative; z-index:2}
.phead h1{font-size:clamp(46px,8vw,120px); margin-top:var(--s3)}
.phead .lead{margin-top:var(--s4)}
.kicker{font-family:"Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin:0}
.kicker.sage{color:var(--sage)}

.cat-grid{display:grid; gap:var(--s6)}
@media (min-width:980px){.cat-grid{grid-template-columns:1.05fr .95fr; gap:var(--s8); align-items:start}}

/* ── catalogue: open slots ────────────────────────────── */
.kit{list-style:none; margin:0; padding:0; display:grid; gap:var(--s2);
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.kit-card{border:1px dashed var(--line); background:var(--panel-1); padding:var(--s4);
  min-height:215px; display:flex; flex-direction:column; gap:10px;
  transition:border-color .3s ease,background .3s ease}
.kit-card:hover{border-color:rgba(201,162,119,.45); background:var(--panel-2)}
@media (prefers-reduced-motion:reduce){.kit-card{transition:none}}
.kit-no{font-family:"Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.18em; color:var(--sage)}
.kit-state{margin-top:auto; font-family:"Archivo",sans-serif; font-weight:600; font-size:22px;
  letter-spacing:-.03em; color:var(--bone)}
.kit-line{font-family:"Mono",ui-monospace,monospace; font-size:12px; color:var(--dim); max-width:30ch}

/* ── home: the three doors ────────────────────────────── */
.doors{border-top:1px solid var(--line); margin-top:var(--s6)}
.door{display:flex; align-items:baseline; gap:var(--s4); padding:var(--s5) 0;
  border-bottom:1px solid var(--line); text-decoration:none}
.door .n{font-family:"Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.18em; color:var(--sage)}
.door .t{font-family:"Archivo",sans-serif; font-weight:600; text-transform:none;
  font-size:clamp(30px,4.4vw,64px); line-height:1; letter-spacing:-.05em; color:var(--bone);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),color .22s ease}
.door .s{margin-left:auto; text-align:right; font-size:13px; color:var(--dim); max-width:32ch}
@media (max-width:720px){.door .s{display:none}}
.door:hover .t{transform:translateX(14px); color:var(--sage)}
@media (prefers-reduced-motion:reduce){.door .t{transition:none}}
.where{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2)}