@font-face{font-family:'Archivo Black';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/f_archblack.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-weight:100 900;font-style:normal;font-display:swap;src:url(fonts/f_archvar.woff2) format('woff2')}
@font-face{font-family:'Space Mono';font-weight:400 700;font-style:normal;font-display:swap;src:url(fonts/sm.woff2) format('woff2')}

:root{
  /* measured off the 64-pin board + the trailer — codex §2 */
  --ink:#0E0C0B;          /* deep shadow, the page ground */
  --ink-2:#151210;        /* a step up, for bands */
  --field:#1E1915;        /* cold-brown field */
  --oak:#33291F;          /* rule and border warmth */
  --stone:#9A9186;        /* secondary text */
  --stone-2:#C2BCB2;      /* body text on dark */
  --paper:#F4F1EA;        /* headings, the disc */
  --ember:#E0761F;        /* the one accent */
  --ember-2:#C25A1E;
  /* Route A (Fred, 2026-08-23): rose lives only in grounds and micro-accents —
     numbering, spines, selection. Ember keeps every light, lamp, button and
     hover. Never both carrying the same job in one frame.
     Amended same evening: the rose FULL STOP belongs to the wordmark/logo
     ONLY (nav, hero mark, footer). No other full stop on the site is rose. */
  --rose:#FF2D95;
  --brass:#B98A3E;
  --moss:#4E5A3C;

  --line:rgba(244,241,234,.13);
  --line-2:rgba(244,241,234,.06);
  --line-3:rgba(244,241,234,.24);

  --f-display:'Archivo Black','Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-sans:'Archivo',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --f-mono:'Space Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;

  --w:1360px;
  --gut:clamp(20px,4vw,44px);
  --prose:66ch;
  --nav-h:66px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
body{
  margin:0;background:var(--ink);color:var(--stone-2);
  font-family:var(--f-sans);font-size:16.5px;font-weight:380;line-height:1.68;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--rose);color:#120E0A}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:1px}

h1,h2,h3,h4{margin:0;color:var(--paper);font-family:var(--f-sans);font-weight:800;
  letter-spacing:-.018em;line-height:1.04;text-wrap:balance}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
strong{color:var(--paper);font-weight:650}
em{font-style:normal;color:var(--ember)}
hr{border:0;border-top:1px solid var(--line);margin:0}

.wrap{max-width:var(--w);margin:0 auto;padding-inline:var(--gut)}
.prose{max-width:var(--prose)}
.mono{font-family:var(--f-mono);font-size:10.5px;font-weight:400;letter-spacing:.2em;
  text-transform:uppercase;color:var(--stone)}
.em{color:var(--ember)}
.rose{color:var(--rose)}
.brass{color:var(--brass)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── film: grain + scanlines. Kept far lighter than the Stillroom concept
      pages — this is a corporate site and the texture must not be the idea. ── */
.grain,.scan{position:fixed;inset:0;pointer-events:none;z-index:900}
.scan{background:repeating-linear-gradient(0deg,rgba(244,241,234,.010) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
.grain{opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2'/><feColorMatrix values='0 0 0 0 .96 0 0 0 0 .94 0 0 0 0 .91 0 0 0 .85 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ── masthead ───────────────────────────────────────────────────────────── */
.mast{position:sticky;top:0;z-index:800;background:rgba(14,12,11,.86);
  backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line)}
.mast .wrap{display:flex;align-items:center;gap:22px;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
/* A1a is the approved nav lockup. Sized by width; its mark lands at ~40px,
   clear of the 44px floor that applies to the `small` cut used alone. */
.brand__lockup{width:clamp(132px,13vw,166px);height:auto}
.navlinks{margin-left:auto;display:flex;align-items:center;gap:clamp(12px,1.6vw,26px)}
.navlinks a{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--stone);padding:6px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
  white-space:nowrap}
.navlinks a:hover{color:var(--paper)}
.navlinks a[aria-current=page]{color:var(--paper);border-bottom-color:var(--rose)}
.navlinks .cta{border:1px solid var(--line-3);border-radius:2px;padding:9px 15px;color:var(--paper)}
.navlinks .cta:hover{background:var(--ember);border-color:var(--ember);color:#120E0A}
.navtog{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:2px;
  color:var(--paper);font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;padding:10px 13px;cursor:pointer}
@media(max-width:1240px){
  .navtog{display:block}
  .navlinks{position:fixed;inset:var(--nav-h) 0 auto 0;margin:0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--ink-2);border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .34s ease}
  .navlinks.open{max-height:82vh;overflow-y:auto}
  .navlinks a{padding:15px var(--gut);border-bottom:1px solid var(--line-2);font-size:11.5px}
  .navlinks .cta{border:0;border-top:1px solid var(--line);border-radius:0;background:var(--ember);color:#120E0A;text-align:center}
}

/* ── hero plate ─────────────────────────────────────────────────────────── */
.hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;
  min-height:clamp(500px,80vh,860px);border-bottom:1px solid var(--line);overflow:hidden}
.hero--tall{min-height:clamp(560px,92vh,980px)}
.hero--short{min-height:clamp(320px,46vh,520px)}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img,.hero__bg video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--pos,center)}
/* The still is the poster: it paints immediately and the film fades in over it
   only once it can actually play, so a slow line or a blocked autoplay is never
   a black hero. */
.hero__bg video{opacity:0;transition:opacity 1.2s ease}
.hero__bg video.on{opacity:1}
@media(prefers-reduced-motion:reduce){.hero__bg video{display:none}}
/* the codex reserves the left third for type: scrim is heaviest there */
.hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(14,12,11,.94) 0%,rgba(14,12,11,.82) 28%,rgba(14,12,11,.42) 58%,rgba(14,12,11,.28) 100%),
             linear-gradient(0deg,rgba(14,12,11,.92) 0%,rgba(14,12,11,.20) 42%,rgba(14,12,11,.44) 100%)}
/* A short hero carries a small heading and three lines, so it does not need
   the full scrim the tall ones use — at .94/.82 the policy-page plate lost its
   own lantern and the band read as an empty black box. */
.hero--short .hero__bg::after{
  background:linear-gradient(90deg,rgba(14,12,11,.88) 0%,rgba(14,12,11,.64) 33%,rgba(14,12,11,.30) 66%,rgba(14,12,11,.18) 100%),
             linear-gradient(0deg,rgba(14,12,11,.86) 0%,rgba(14,12,11,.10) 46%,rgba(14,12,11,.38) 100%)}
.hero__in{position:relative;z-index:1;width:100%;padding:clamp(38px,7vw,86px) 0 clamp(30px,4.6vw,56px)}
/* Home hero only (hero__mark is only emitted with mark=True). Icon is the
   `full` cut on its own (never redrawn); the word is live text in the same
   Archivo Black the outlines were drawn from, so only the icon can carry
   the slow turn without spinning the wordmark with it — the ember itself
   never moves, only the whole disc, which the codex's "no animation on
   the ember" rule does not by itself forbid; the redraw/recolour rules do
   still hold and are untouched here. Override is Fred's, 2026-08-20. */
.hero__mark{margin-bottom:clamp(24px,3.4vw,36px)}
.hero__mark-row{display:flex;align-items:center;gap:18px}
.hero__mark-icon{width:min(120px,15vw);height:auto;flex-shrink:0}
@keyframes hobspin{to{transform:rotate(360deg)}}
.hero__mark-icon--spin{animation:hobspin 44s linear infinite}
@media(prefers-reduced-motion:reduce){.hero__mark-icon--spin{animation:none}}
.hero__mark-word{font-family:var(--f-display);font-size:clamp(34px,5vw,58px);
  letter-spacing:-.01em;color:var(--paper);line-height:1}
.hero__mark-gloss{margin-top:14px;max-width:56ch;font-size:12.5px;color:var(--stone);
  font-style:italic;line-height:1.55}
.hero__eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.hero__eyebrow::after{content:"";flex:1;max-width:120px;height:1px;background:var(--line-3)}
.hero h1{font-size:clamp(38px,6.6vw,86px);letter-spacing:-.028em;line-height:.96;max-width:17ch}
.hero--tall h1{font-size:clamp(42px,8.2vw,108px)}
.hero h1 .em{display:inline-block}
.hero__lede{margin-top:22px;max-width:54ch;font-size:clamp(15.5px,1.5vw,19px);color:var(--stone-2);line-height:1.62}
.hero__acts{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:11px;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.17em;text-transform:uppercase;padding:14px 22px;border-radius:2px;
  border:1px solid var(--line-3);color:var(--paper);background:transparent;cursor:pointer;
  transition:background .22s,color .22s,border-color .22s,transform .22s}
.btn:hover{transform:translateY(-1px)}
.btn--fill{background:var(--ember);border-color:var(--ember);color:#120E0A;font-weight:700}
.btn--fill:hover{background:#EF8526;border-color:#EF8526}
.btn--ghost:hover{border-color:var(--paper)}
.btn .ar{transition:transform .22s}
.btn:hover .ar{transform:translateX(4px)}

/* ── section furniture ──────────────────────────────────────────────────── */
.sec{padding:clamp(56px,7.5vw,112px) 0;border-bottom:1px solid var(--line)}
.sec--tight{padding:clamp(40px,5vw,68px) 0}
.sec--field{background:var(--ink-2)}
.sec--deep{background:linear-gradient(180deg,var(--ink-2),var(--ink))}
.sechead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:clamp(20px,4vw,60px);
  align-items:end;margin-bottom:clamp(30px,4vw,54px)}
.sechead h2{font-size:clamp(27px,3.6vw,49px)}
.sechead .kick{margin-bottom:14px}
.sechead__aside{color:var(--stone);font-size:14px;line-height:1.6}
@media(max-width:860px){.sechead{grid-template-columns:1fr;align-items:start}}

/* ── the doors: department grid ─────────────────────────────────────────── */
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.fd{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:14px;
  padding:clamp(26px,2.6vw,38px) clamp(22px,2.2vw,32px) clamp(24px,2.4vw,34px);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  min-height:262px;overflow:hidden;transition:background .3s}
.door::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .45s;
  background:radial-gradient(120% 90% at 12% 0%,rgba(224,118,31,.16) 0,transparent 62%)}
.door:hover{background:#120F0D}
.door:hover::after{opacity:1}
.door__n{font-family:var(--f-mono);font-size:10px;letter-spacing:.26em;color:var(--rose);opacity:.75}
.door h3{font-size:clamp(21px,1.9vw,27px);letter-spacing:-.012em}
.door p{font-size:14.2px;color:var(--stone);line-height:1.62;margin:0}
.door__go{margin-top:auto;padding-top:14px;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--stone-2);display:inline-flex;gap:9px;transition:color .25s}
.door:hover .door__go{color:var(--ember)}
.door:hover .door__go .ar{transform:translateX(5px)}
.door__go .ar{transition:transform .25s}

/* ── the night log — the signature component ────────────────────────────── */
.log{border:1px solid var(--line);border-radius:3px;background:
  linear-gradient(180deg,rgba(30,25,21,.82),rgba(14,12,11,.94));overflow:hidden}
.log__bar{display:flex;align-items:center;gap:12px;padding:11px 16px;
  border-bottom:1px solid var(--line);background:rgba(244,241,234,.028)}
.log__dot{width:7px;height:7px;border-radius:50%;background:var(--ember);flex-shrink:0;
  box-shadow:0 0 0 0 rgba(224,118,31,.55);animation:pulse 2.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(224,118,31,.5)}70%{box-shadow:0 0 0 9px rgba(224,118,31,0)}100%{box-shadow:0 0 0 0 rgba(224,118,31,0)}}
.log__bar .t{margin-left:auto}
.log__rows{margin:0;padding:6px 0;list-style:none;font-family:var(--f-mono);font-size:12px;line-height:1.5}
.log__rows li{display:grid;grid-template-columns:64px 92px 1fr;gap:14px;align-items:baseline;
  padding:8px 16px;border-bottom:1px solid var(--line-2)}
.log__rows li:last-child{border-bottom:0}
.log__rows .hh{color:var(--brass);font-size:11px;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.log__rows .who{color:var(--stone);font-size:10px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.log__rows .what{color:var(--stone-2);font-family:var(--f-sans);font-size:13.6px;letter-spacing:0}
.log__rows .what b{color:var(--paper);font-weight:620}
.log__rows li.is-new{color:var(--paper)}
.log__foot{padding:11px 16px;border-top:1px solid var(--line);background:rgba(244,241,234,.02)}
@media(max-width:640px){.log__rows li{grid-template-columns:52px 1fr;gap:6px 10px}
  .log__rows .what{grid-column:1/-1}}

/* ── split: copy beside a plate ─────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4.4vw,74px);align-items:stretch}
.split--flip .split__fig{order:-1}
/* Fred, round 2: the bordered squares sat ON the page rather than in it. No
   border, no radius - the plate is feathered into the ground on all four edges
   so it reads as part of the darkness, which is what the codex wants anyway. */
.split__fig{position:relative;overflow:hidden;background:transparent;align-self:stretch;
  -webkit-mask:radial-gradient(128% 120% at 50% 45%,#000 50%,transparent 96%);
          mask:radial-gradient(128% 120% at 50% 45%,#000 50%,transparent 96%)}
.split .prose{align-self:center}
.split__fig img{width:100%;height:100%;min-height:clamp(260px,34vw,460px);object-fit:cover}
.split__fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 6px 4px;
  background:linear-gradient(0deg,rgba(14,12,11,.8),transparent);
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
@media(max-width:880px){.split{grid-template-columns:1fr}.split--flip .split__fig{order:0}}

/* ── numbered steps ─────────────────────────────────────────────────────── */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.steps li{counter-increment:s;background:var(--ink);padding:clamp(24px,2.4vw,32px)}
.sec--field .steps li{background:var(--ink-2)}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;margin-bottom:14px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;color:var(--rose)}
.steps h4{font-size:17px;margin-bottom:8px;font-weight:750;letter-spacing:-.008em}
.steps p{font-size:14px;color:var(--stone);margin:0;line-height:1.6}

/* ── capability rows ────────────────────────────────────────────────────── */
.caps{border-top:1px solid var(--line)}
.cap{display:grid;grid-template-columns:56px minmax(0,300px) minmax(0,1fr);gap:clamp(16px,3vw,44px);
  padding:clamp(22px,2.4vw,30px) 0;border-bottom:1px solid var(--line);align-items:start}
.cap__n{font-family:var(--f-mono);font-size:11px;color:var(--rose);letter-spacing:.14em;padding-top:5px;font-variant-numeric:tabular-nums}
.cap h4{font-size:clamp(17px,1.5vw,21px);font-weight:760}
.cap__b{color:var(--stone);font-size:14.6px;line-height:1.66}
.cap__b b{color:var(--stone-2);font-weight:600}
@media(max-width:820px){.cap{grid-template-columns:40px 1fr;gap:8px 16px}
  .cap__b{grid-column:2/-1}}

/* ── stat band ──────────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line)}
.stat{background:var(--ink);padding:clamp(24px,2.6vw,34px) clamp(18px,2vw,26px)}
.sec--field .stat{background:var(--ink-2)}
.stat__v{font-family:var(--f-display);font-size:clamp(30px,3.4vw,44px);color:var(--paper);
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat__v .u{font-size:.52em;color:var(--ember);margin-left:3px}
.stat__k{margin-top:11px;font-size:13.4px;color:var(--stone);line-height:1.55}

/* ── crew ───────────────────────────────────────────────────────────────── */
.crew{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
@media(max-width:980px){.crew{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.crew{grid-template-columns:1fr}}
.member{background:var(--ink);display:flex;flex-direction:column}
.member__ph{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--field)}
.member__ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.94);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.member:hover .member__ph img{transform:scale(1.035)}
.member__ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(14,12,11,.86) 0%,transparent 46%)}
.member__desk{position:absolute;left:16px;right:16px;bottom:13px;z-index:1}
.member__body{padding:18px 16px 22px;border-top:1px solid var(--line-2)}
.member__body h3{font-size:19px;letter-spacing:.01em;font-weight:800;text-transform:uppercase}
.member__role{margin-top:5px;font-size:13.4px;color:var(--ember)}
.member__body p{margin-top:10px;font-size:13.5px;color:var(--stone);line-height:1.6}
.member__addr{margin-top:13px;display:block;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.1em;color:var(--stone);border-top:1px solid var(--line-2);padding-top:11px;
  overflow-wrap:anywhere}
.member__addr:hover{color:var(--ember)}

/* ── org chart ──────────────────────────────────────────────────────────── */
.org{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.org__tier{background:var(--ink-2);padding:clamp(20px,2.4vw,30px);
  display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:clamp(14px,2.4vw,34px)}
.org__tier h4{font-size:16px;font-weight:780}
.org__tier .mono{display:block;margin-bottom:9px}
.org__tier p{font-size:14px;color:var(--stone);margin:0}
.org__pills{margin-top:13px;display:flex;flex-wrap:wrap;gap:7px}
.pill{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--stone-2);border:1px solid var(--line);border-radius:999px;padding:5px 11px}
.pill--em{border-color:rgba(224,118,31,.5);color:var(--ember)}
@media(max-width:760px){.org__tier{grid-template-columns:1fr}}

/* ── the boundary panel — what it will not do ───────────────────────────── */
.bound{border:1px solid rgba(224,118,31,.28);border-left-width:3px;border-radius:2px;
  background:linear-gradient(90deg,rgba(224,118,31,.075),transparent 62%);
  padding:clamp(22px,2.6vw,32px)}
.bound h3{font-size:19px;margin-bottom:12px;font-weight:780}
.bound ul{margin:0;padding-left:19px;color:var(--stone);font-size:14.6px;line-height:1.72}
.bound li{margin-bottom:7px}
.bound li:last-child{margin-bottom:0}
.bound li b{color:var(--paper);font-weight:640}

/* ── pull quote ─────────────────────────────────────────────────────────── */
.pull{border-left:2px solid var(--rose);padding:6px 0 6px clamp(18px,2.4vw,30px);
  font-size:clamp(19px,2.3vw,29px);line-height:1.34;color:var(--paper);font-weight:600;
  letter-spacing:-.012em;max-width:24ch}

/* ── faq ────────────────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:21px 40px 21px 0;position:relative;
  color:var(--paper);font-size:16.6px;font-weight:640;letter-spacing:-.008em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;
  border-right:1.5px solid var(--stone);border-bottom:1.5px solid var(--stone);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s,border-color .25s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg);border-color:var(--ember)}
.faq summary:hover{color:var(--ember)}
.faq .a{padding:0 0 24px;color:var(--stone);font-size:15px;line-height:1.72;max-width:74ch}

/* ── policy / long-form prose ───────────────────────────────────────────── */
.doc{max-width:74ch}
.doc h2{font-size:clamp(21px,2.2vw,28px);margin:44px 0 14px}
.doc h2:first-child{margin-top:0}
.doc h3{font-size:17.5px;margin:28px 0 10px;font-weight:720}
.doc p,.doc li{font-size:15.4px;line-height:1.76;color:var(--stone-2)}
.doc ul,.doc ol{padding-left:21px;margin:0 0 1.1em}
.doc li{margin-bottom:8px}
.doc a{color:var(--ember);border-bottom:1px solid rgba(224,118,31,.4)}
.doc a:hover{border-bottom-color:var(--ember)}
.doc table{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:14.2px}
.doc th,.doc td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.doc th{color:var(--paper);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.doc__meta{margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ── pricing ────────────────────────────────────────────────────────────── */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.tier{background:var(--ink-2);padding:clamp(26px,2.8vw,38px);display:flex;flex-direction:column}
.tier--mark{background:linear-gradient(180deg,rgba(255,45,149,.08),var(--ink-2) 46%);
  box-shadow:inset 0 2px 0 var(--rose)}
.tier__tag{margin-bottom:16px}
.tier h3{font-size:24px;font-weight:800}
.tier__p{margin:16px 0 6px;font-family:var(--f-display);font-size:34px;color:var(--paper);
  letter-spacing:-.024em;line-height:1;font-variant-numeric:tabular-nums}
.tier__p .per{font-family:var(--f-mono);font-size:11px;color:var(--stone);letter-spacing:.14em;
  text-transform:uppercase;margin-left:7px}
.tier__sub{font-size:13.6px;color:var(--stone);margin-bottom:20px}
.tier ul{list-style:none;margin:0 0 26px;padding:0;border-top:1px solid var(--line)}
.tier li{padding:11px 0 11px 24px;border-bottom:1px solid var(--line-2);position:relative;
  font-size:14.2px;color:var(--stone-2);line-height:1.55}
.tier li::before{content:"";position:absolute;left:2px;top:18px;width:7px;height:7px;
  border-right:1.5px solid var(--ember);border-bottom:1.5px solid var(--ember);
  transform:rotate(45deg) translateY(-2px)}
.tier .btn{margin-top:auto;justify-content:center}

/* ── contact form ───────────────────────────────────────────────────────── */
.form{display:grid;gap:16px}
.field label{display:block;margin-bottom:7px;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
.field input,.field select,.field textarea{width:100%;background:var(--ink-2);color:var(--paper);
  border:1px solid var(--line);border-radius:2px;padding:13px 15px;font:inherit;font-size:15px}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ember);outline:none}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:620px){.f2{grid-template-columns:1fr}}
.formnote{font-size:12.6px;color:var(--stone);line-height:1.6}
.formnote a{color:var(--ember)}

/* ── ticker ─────────────────────────────────────────────────────────────── */
.ticker{border-block:1px solid var(--line);background:var(--ink-2);overflow:hidden;padding:11px 0}
.ticker__t{display:flex;gap:44px;width:max-content;animation:tick 46s linear infinite}
.ticker:hover .ticker__t{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker span{font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--stone);white-space:nowrap}
/* Was Stillroom's hatch (U+2317) - caught by Fred. The separator is now the
   Hobfolk mark itself, at the `micro` cut, the only one that holds at this
   size. Loaded as a mask so it takes the ember colour. */
.ticker span::before{content:"";display:inline-block;width:13px;height:13px;
  margin-right:14px;vertical-align:-2px;background:var(--ember);opacity:.85;
  -webkit-mask:var(--tick-mark) center/contain no-repeat;
          mask:var(--tick-mark) center/contain no-repeat}

/* ── cta band ───────────────────────────────────────────────────────────── */
.cta-band{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--line)}
.cta-band__bg{position:absolute;inset:0;z-index:-2}
.cta-band__bg img{width:100%;height:100%;object-fit:cover}
.cta-band__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(14,12,11,.95),rgba(14,12,11,.72) 55%,rgba(14,12,11,.55))}
.cta-band .wrap{padding-block:clamp(52px,6.6vw,96px)}
.cta-band h2{font-size:clamp(28px,4vw,54px);max-width:18ch}
.cta-band p{margin-top:16px;max-width:52ch;color:var(--stone-2);font-size:16px}

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot{background:#0A0908;padding-top:clamp(44px,5vw,72px)}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,48px);padding-bottom:clamp(34px,4vw,56px)}
@media(max-width:900px){.foot__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot__grid{grid-template-columns:1fr}}
/* Same split as the hero mark: word is live Archivo Black text (the face the
   outlines were drawn from), only the icon (`full` cut) carries the turn. */
.foot__mark{margin-bottom:20px}
.foot__mark-word{display:block;font-family:var(--f-display);font-size:18px;
  letter-spacing:.01em;color:var(--paper)}
.foot__mark-rule{display:block;width:44px;height:1px;background:var(--rose);opacity:.55;margin:11px 0}
.foot__mark-icon{width:60px;height:auto}
.foot__brand p{font-size:13.6px;color:var(--stone);max-width:34ch;line-height:1.62}
.foot h4{font-size:10.5px;font-family:var(--f-mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--stone);font-weight:400;margin-bottom:15px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:9px}
.foot li a{font-size:14px;color:var(--stone-2);transition:color .2s}
.foot li a:hover{color:var(--ember)}
.foot__base{border-top:1px solid var(--line);padding:20px 0 28px;display:flex;flex-wrap:wrap;
  gap:10px 26px;align-items:center}
.foot__base .mono{font-size:10px;letter-spacing:.14em}
.foot__base a{color:var(--stone)}
.foot__base a:hover{color:var(--ember)}
.foot__base .rt{margin-left:auto}
@media(max-width:760px){.foot__base .rt{margin-left:0}}

/* ── reveal on scroll ───────────────────────────────────────────────────── */
/* the ember scroll rail: reading progress, top of the viewport */
.rail{position:fixed;top:0;left:0;height:2px;width:100%;z-index:850;
  background:linear-gradient(90deg,var(--ember),var(--brass));
  transform:scaleX(0);transform-origin:0 50%;will-change:transform}

.rv{opacity:0;transform:translateY(18px);
  transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ── print ──────────────────────────────────────────────────────────────── */
@media print{
  .grain,.scan,.mast,.ticker,.cta-band,.hero__bg{display:none!important}
  body{background:#fff;color:#111}
  h1,h2,h3,h4,strong{color:#000}
  .sec{border-color:#ccc;padding:18px 0}
}

/* -- depth: what this desk actually knows -------------------------------- */
.depth{display:grid;grid-template-columns:repeat(auto-fit,minmax(278px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.depth__col{background:var(--ink);padding:clamp(22px,2.3vw,30px)}
.sec--field .depth__col{background:var(--ink-2)}
.depth__col h4{font-size:11.5px;font-family:var(--f-mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ember);font-weight:400;margin-bottom:15px}
.depth__col ul{list-style:none;margin:0;padding:0}
.depth__col li{position:relative;padding:0 0 12px 15px;font-size:13.7px;line-height:1.62;color:var(--stone)}
.depth__col li::before{content:"";position:absolute;left:0;top:8px;width:4px;height:4px;
  background:var(--brass);opacity:.75}
.depth__col li:last-child{padding-bottom:0}
.depth__col li b{color:var(--stone-2);font-weight:620}
.depth__close{margin-top:28px;color:var(--stone-2);font-size:15px;line-height:1.7;max-width:78ch}

/* -- liability ----------------------------------------------------------- */
.liab{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,58px);align-items:start}
@media(max-width:900px){.liab{grid-template-columns:1fr}}
.liab__panel{border:1px solid var(--line);border-top:2px solid var(--ember);
  background:var(--ink-2);padding:clamp(22px,2.6vw,32px)}
.sec--field .liab__panel{background:var(--ink)}
.liab__panel h3{font-size:17px;margin-bottom:17px;font-weight:760}
.liab__panel ul{list-style:none;margin:0;padding:0}
.liab__panel li{padding:0 0 14px 23px;position:relative;font-size:14.2px;line-height:1.62;color:var(--stone)}
.liab__panel li::before{content:"";position:absolute;left:1px;top:6px;width:8px;height:8px;
  border-right:1.5px solid var(--ember);border-bottom:1.5px solid var(--ember);transform:rotate(45deg)}
.liab__panel li:last-child{padding-bottom:0}
.liab__panel li b{color:var(--paper);font-weight:640}

/* -- expertise ----------------------------------------------------------- */
.bignums{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:1px;background:var(--line)}
.bignum{background:var(--ink);padding:clamp(24px,2.6vw,34px) clamp(16px,2vw,24px)}
.sec--field .bignum{background:var(--ink-2)}
.bignum__v{font-family:var(--f-display);font-size:clamp(34px,4vw,54px);color:var(--paper);
  line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.bignum__u{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ember);margin-top:9px}
.bignum__k{margin-top:12px;font-size:13.2px;color:var(--stone);line-height:1.55}

.staff{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.staff__card{background:var(--ink);display:grid;grid-template-columns:118px 1fr}
.sec--field .staff__card{background:var(--ink-2)}
.staff__ph{position:relative;overflow:hidden;background:var(--field)}
.staff__ph img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:saturate(.9)}
.staff__ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 52%,rgba(14,12,11,.6))}
.staff__b{padding:20px 20px 22px;min-width:0}
.staff__n{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.22em;color:var(--rose);opacity:.7}
.staff__b h3{font-size:17.5px;margin-top:7px;font-weight:800;letter-spacing:-.01em}
.staff__role{margin-top:4px;font-size:13px;color:var(--ember)}
.staff__spec{margin-top:9px;font-size:12.2px;color:var(--stone);font-family:var(--f-mono);
  letter-spacing:.03em;line-height:1.5}
.staff__yrs{margin-top:13px;padding-top:11px;border-top:1px solid var(--line-2);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.staff__bio{margin-top:12px;font-size:13.3px;color:var(--stone);line-height:1.62}
@media(max-width:520px){.staff__card{grid-template-columns:92px 1fr}}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{font-size:12.6px;color:var(--stone-2);border:1px solid var(--line);
  border-radius:2px;padding:8px 13px;background:var(--ink-2)}
.sec--field .chips span{background:var(--ink)}

/* -- the hub ------------------------------------------------------------- */
.hub{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--ink-2);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95)}
.hub__bar{display:flex;align-items:center;gap:11px;padding:11px 15px;border-bottom:1px solid var(--line);
  background:rgba(244,241,234,.03)}
.hub__dots{display:flex;gap:6px}
.hub__dots i{width:9px;height:9px;border-radius:50%;background:var(--line-3);display:block}
.hub__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1px;background:var(--line)}
.hub__cell{background:var(--ink);padding:15px 16px 17px;grid-column:span 3;min-width:0}
.hub__cell--w4{grid-column:span 4}.hub__cell--w6{grid-column:span 6}
.hub__cell--w8{grid-column:span 8}.hub__cell--w12{grid-column:span 12}
@media(max-width:900px){.hub__cell,.hub__cell--w4,.hub__cell--w6,.hub__cell--w8{grid-column:span 6}}
@media(max-width:560px){.hub__cell,.hub__cell--w4,.hub__cell--w6,.hub__cell--w8{grid-column:span 12}}
.hub__k{font-family:var(--f-mono);font-size:9px;letter-spacing:.17em;text-transform:uppercase;color:var(--stone);
  display:flex;align-items:center;gap:7px}
.hub__v{font-family:var(--f-display);font-size:25px;color:var(--paper);margin-top:9px;line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hub__v small{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;color:var(--stone);margin-left:6px}
.hub__sub{margin-top:8px;font-size:11.5px;color:var(--stone);line-height:1.45}
.ev{display:inline-block;width:7px;height:7px;border-radius:50%;flex-shrink:0}
.ev--ok{background:#6E8F4E;box-shadow:0 0 6px rgba(110,143,78,.75)}
.ev--stale{background:#B98A3E;box-shadow:0 0 6px rgba(185,138,62,.7)}
.ev--no{background:#8A3B2A;box-shadow:0 0 6px rgba(138,59,42,.7)}
.hub__legend{display:flex;flex-wrap:wrap;gap:18px;padding:12px 15px;border-top:1px solid var(--line);
  background:rgba(244,241,234,.02)}
.hub__legend span{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:9px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--stone)}
.hub__ex{display:flex;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line-2)}
.hub__ex:last-child{border-bottom:0}
.hub__ex p{margin:0;font-size:12.4px;color:var(--stone);line-height:1.5;flex:1}
.hub__ex b{color:var(--paper);font-weight:640}
.hub__spark{display:block;width:100%;height:32px;margin-top:11px}
/* the action queue's tick/cross — the one part of the mock that is not a
   read-only report, matching the real board's own "the only control on this
   page is the tick and the cross" boundary */
.hub__exacts{display:flex;gap:7px;flex-shrink:0}
.hub__exbtn{width:27px;height:27px;border-radius:2px;border:1px solid var(--line-3);display:flex;
  align-items:center;justify-content:center;font-size:12px;line-height:1}
.hub__exbtn--n{color:#C97A63;border-color:#8A3B2A}
.hub__exbtn--y{color:#8FB86B;border-color:#6E8F4E}
.hub__sources{display:flex;flex-wrap:wrap;gap:8px;padding:14px 15px;border-top:1px solid var(--line);
  background:rgba(244,241,234,.02)}
.hub__sources span{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--stone);border:1px solid var(--line-2);border-radius:2px;padding:5px 9px}
.hub__stamp{padding:10px 15px;border-top:1px solid var(--line);font-family:var(--f-mono);font-size:9.5px;
  color:var(--stone);opacity:.7;line-height:1.5}

/* -- showcase ------------------------------------------------------------ */
.showcase{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:13px}
.showcase figure{margin:0;position:relative;overflow:hidden;border-radius:2px;background:var(--field)}
.showcase img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;
  transition:transform .85s cubic-bezier(.2,.7,.2,1);filter:saturate(.96)}
.showcase figure:hover img{transform:scale(1.045)}
.showcase figcaption{position:absolute;left:0;right:0;bottom:0;padding:36px 14px 13px;
  background:linear-gradient(0deg,rgba(10,9,8,.93),transparent);
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone-2)}

/* -- the boardroom film band (one per page, straight under the hero) ------ */
.filmband{display:grid;grid-template-columns:1.55fr 1fr;gap:38px;align-items:center}
.filmband__v{margin:0;border:1px solid var(--line);border-radius:2px;background:#000;overflow:hidden}
.filmband__v video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.filmband__v video::cue{background:rgba(10,9,8,.82);color:#f2ece4}
.filmband__h{font-size:clamp(22px,2.4vw,32px);margin:8px 0 12px}
.filmband__who{font-size:14.5px;margin-bottom:10px}
.filmband__b{font-size:13.5px;line-height:1.6;color:var(--stone)}
.filmband__cap{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone-2);margin-top:14px}
@media(max-width:860px){.filmband{grid-template-columns:1fr;gap:20px}}

/* -- the live form ------------------------------------------------------- */
.echo{margin-top:14px;border-left:2px solid var(--ember);padding-left:16px;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .55s cubic-bezier(.2,.7,.2,1),opacity .4s}
.echo.on{max-height:420px;opacity:1}
.echo__who{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ember);display:flex;align-items:center;gap:9px;margin:2px 0 8px}
.echo__who i{width:6px;height:6px;border-radius:50%;background:var(--ember);display:block;
  animation:pulse 2.4s infinite}
.echo__t{font-size:14.5px;color:var(--stone-2);line-height:1.62;margin:0 0 10px}
.echo__t:last-child{margin-bottom:2px}
.echo__t b{color:var(--paper);font-weight:640}
.echo__cursor{display:inline-block;width:7px;height:1.02em;background:var(--ember);
  vertical-align:-3px;margin-left:3px;animation:blink 1s steps(2) infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.field{position:relative}
.field__meta{position:absolute;right:11px;top:31px;font-family:var(--f-mono);font-size:9px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--brass);opacity:0;
  transition:opacity .35s;pointer-events:none}
.field__meta.on{opacity:1}

/* -- consent bar --------------------------------------------------------- */
.cbar{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--ink-2);
  border-top:1px solid var(--line-3);padding:18px var(--gut);
  transform:translateY(101%);transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.cbar.on{transform:none}
.cbar__in{max-width:var(--w);margin:0 auto;display:flex;gap:clamp(16px,3vw,40px);
  align-items:flex-start;flex-wrap:wrap}
.cbar__t{flex:1 1 420px;font-size:13.6px;line-height:1.66;color:var(--stone);margin:0;max-width:82ch}
.cbar__t b{color:var(--stone-2);font-weight:620}
.cbar__t a{color:var(--stone-2);text-decoration:underline;text-underline-offset:3px}
.cbar__t a:hover{color:var(--ember)}
.cbar__btns{display:flex;gap:10px;flex:0 0 auto;padding-top:2px}
/* both buttons carry the same weight on purpose - a decline that is harder to
   find than the accept is not a choice, and the ICO says so */
.cbar__b{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  padding:11px 20px;border:1px solid var(--line-3);background:transparent;color:var(--stone-2);
  cursor:pointer;transition:border-color .25s,color .25s,background .25s}
.cbar__b:hover{border-color:var(--ember);color:var(--paper);background:rgba(224,118,31,.09)}
.cbar__b:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
@media(max-width:640px){.cbar__btns{width:100%}.cbar__b{flex:1}}
.foot__base .ck{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.foot__base .ck:hover{color:var(--ember)}

/* 🔴 THE CONTAINER IS .fd, NOT .door. `.door` is ALREADY the home page's
   door-card component and it carries `.door p{font-size:14.2px;color:var(--stone)}`
   - which silently won over `.said`, greyed out every one of Nell's lines and
   shrank them. Fred spotted it on the live page. A class name that already
   exists elsewhere in one shared stylesheet is a collision waiting to happen;
   the front door owns the `fd` prefix.

   -- the front door -------------------------------------------------------
   Fred, 2026-08-26, having used it: "it was unclear which field is TEXT INPUT
   and which field IS TEXT RESPONSE. Too much text on this page. make it like
   google.. simple"

   So the page is now almost empty: the bell, one line, one box. The box is a
   BOX - a real bordered field that looks like somewhere you type, because the
   first version was a bare borderless textarea and nobody could tell it apart
   from the reply above it. Everything else was deleted rather than shrunk. */
.fd{display:flex;flex-direction:column;align-items:center;text-align:center;
  min-height:clamp(420px,62vh,620px);justify-content:center;padding:clamp(20px,5vw,50px) 0}
.bell{background:none;border:0;padding:0;margin:0;cursor:pointer;display:block;
  line-height:0;-webkit-tap-highlight-color:transparent;border-radius:50%}
.bell__svg{display:block;overflow:visible;width:clamp(150px,20vw,212px);height:auto}
.bell:focus-visible{outline:2px solid var(--ember);outline-offset:10px}

/* The halo is the light, and the light is ember - never rose. */
.bell__halo{transform-origin:120px 150px;animation:bellhalo 3.6s ease-out infinite}
@keyframes bellhalo{
  0%  {opacity:.50;transform:scale(.90)}
  70% {opacity:0;  transform:scale(1.14)}
  100%{opacity:0;  transform:scale(1.14)}
}
.bell__body{transition:transform .18s cubic-bezier(.2,.7,.2,1)}
.bell__plunge{transition:transform .12s cubic-bezier(.2,.7,.2,1)}
.bell:hover .bell__body{transform:translateY(-2px)}
.bell:active .bell__body,.bell.is-rung .bell__body{transform:translateY(3px)}
.bell:active .bell__plunge,.bell.is-rung .bell__plunge{transform:translateY(7px)}

/* The precomputed greeting: rendered from values already at the edge, no model,
   no spinner. "Latency is the tell." */
.fd__cap{margin:22px 0 0;font-family:var(--f-mono);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--stone-2)}
.bell:hover + .fd__cap{color:var(--paper)}
.fd__still{margin:14px 0 0;font-size:clamp(17px,2.2vw,21px);color:var(--stone-2);
  min-height:1.4em;line-height:1.5;max-width:30ch}

/* -- the one box ---------------------------------------------------------- */
.ask{width:min(620px,92vw);margin:30px auto 0;position:relative}
.ask__row{display:flex;align-items:flex-end;gap:6px;
  background:var(--ink-2);border:1px solid var(--line-3);
  padding:6px 6px 6px 20px;transition:border-color .22s,background .22s}
.ask__row:focus-within{border-color:var(--ember);background:var(--field)}
.ask__in{flex:1;background:none;border:0;color:var(--paper);
  font:400 17px/1.5 var(--f-sans);resize:none;padding:12px 0;max-height:180px;
  min-height:26px;overflow-y:auto}
.ask__in:focus{outline:none}
.ask__in::placeholder{color:var(--stone);opacity:.75}
.ask__btn{background:none;border:0;cursor:pointer;color:var(--stone);
  padding:10px;line-height:0;transition:color .2s;flex-shrink:0}
.ask__btn:hover{color:var(--paper)}
.ask__btn:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.ask__btn svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ask__btn--go{color:var(--ember)}
.ask__btn[aria-pressed=true]{color:var(--ember)}
.ask__btn.is-listening{color:var(--rose);animation:miclive 1.1s ease-in-out infinite}
@keyframes miclive{0%,100%{opacity:1}50%{opacity:.45}}
.ask__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* -- the thread ----------------------------------------------------------- */
/* Replies sit ABOVE the box as plain prose. No bubbles, no avatar, no header,
   no name badge - the anti-chatbot rule outranks everything. The visitor's own
   words are set back in a quieter colour so the two are never confused, which
   is the exact thing Fred could not tell apart in the first build. */
.thread{width:min(620px,92vw);margin:0 auto;text-align:left;
  display:flex;flex-direction:column;gap:20px}
.thread:not(:empty){margin-bottom:26px}
/* Nell speaks in white. The visitor is set back in grey italic. Fred,
   2026-08-26: "make the visitors text ITALIK, GREY, NOT BOLD. Make OUR TEXT as
   it is but white not grey." Both weights are stated explicitly rather than
   inherited - the body face runs at 380, which reads as semi-bold at this size
   and was making every line look emphatic. */
.said{font-size:17.5px;line-height:1.62;color:#F4F1EA;font-weight:400;
  font-style:normal;margin:0;
  opacity:0;transform:translateY(6px);animation:saidin .45s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes saidin{to{opacity:1;transform:none}}
.said--mine{color:var(--stone);font-style:italic;font-weight:400;
  font-size:16.5px;padding-left:16px;border-left:2px solid var(--line-3)}
.said a{color:var(--ember)}
/* One dim mark, not three bouncing dots. Dots are theatre. */
.said--wait{color:var(--stone);font-family:var(--f-mono);letter-spacing:.32em;
  animation:saidwait 1.3s ease-in-out infinite}
@keyframes saidwait{0%,100%{opacity:.2}50%{opacity:.62}}

/* -- the quiet footer of the door ----------------------------------------- */
.fd__alt{margin-top:26px;font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--stone);
  display:flex;gap:14px 18px;flex-wrap:wrap;justify-content:center;align-items:center;
  max-width:100%;padding:0 12px}
/* Nothing on this page may make the body scroll sideways. A 390px screen has
   room for one email address, not three in a row. */
.fd,.fd__alt,.ask,.thread{max-width:100%}
@media(max-width:520px){
  .fd__alt{gap:10px 14px;font-size:9.5px;letter-spacing:.1em}
  .fd__alt a{word-break:break-all}
}
.fd__alt a{color:var(--stone);border-bottom:1px solid transparent}
.fd__alt a:hover{color:var(--ember);border-bottom-color:var(--ember)}
/* Sound is a real button with readable letters, not a whispered link.
   Fred, 2026-08-26: "make sound on letters bigger and a button". */
.snd{display:inline-flex;align-items:center;gap:9px;background:none;cursor:pointer;
  border:1px solid var(--line-3);color:var(--stone-2);padding:11px 20px;
  font-family:var(--f-mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  transition:border-color .22s,color .22s,background .22s}
.snd:hover{border-color:var(--ember);color:var(--paper);background:rgba(224,118,31,.09)}
.snd:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.snd[aria-pressed=true]{border-color:var(--ember);color:var(--ember)}
.snd svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

@media(max-width:640px){
  .fd{min-height:auto;padding-top:8px}
  .ask__row{padding-left:16px}
  .said{font-size:16.5px}
}
@media (prefers-reduced-motion:reduce){
  .bell__halo{animation:none;opacity:.28}
  .bell__body,.bell__plunge{transition:none}
  .said{animation:none;opacity:1;transform:none}
}
[hidden]{display:none!important}