/* 2026-10-08 THE FIRM — aedonyx.io as a reputable website + automation firm (James: "turn this from hacker aesthetic
   into reputable website and automation firm", keep the button, the logo, the layout; "the case study diagrams can
   obviously stay"). Same markup, same sections. Paper ground, ink type, sans headings, the shell prompts retired.
   Dark instruments stay dark: the hero film, the plasma button, the stencil slab, the case-study plates in their frames. */

/* ── tokens: paper + ink. The Night Shift set is re-declared inside the dark instruments below. */
:root{
  --paper:#f4f5f7;--paper-hi:#ffffff;--paper-lo:#e8ebef;
  --film:#0f1b27;--plate:#2b3a48;--muted:#5c6b79;--dim:#8a97a3;
  --rule:rgba(15,27,39,.14);--dash:rgba(15,27,39,.22);--hair:rgba(15,27,39,.24);--edge:rgba(15,27,39,.1);
  --steel:#2f6fae;--steel-glow:rgba(47,111,174,.22);
  --gold-ink:#a3610a;
  --tile:#e8ebef}
.hero,.work .screen,.c-shot,.art-slab,.btn-gold{
  --film:#f1f5f8;--plate:#dee4e9;--muted:#a6aeb5;--dim:#6f7d8a;
  --rule:rgba(241,245,248,.16);--dash:rgba(241,245,248,.22);--hair:rgba(241,245,248,.24);--edge:rgba(241,245,248,.12);
  --steel:#6fa3d6;--steel-glow:rgba(111,163,214,.28);--tile:#1d3046}

html{background:var(--paper)}
body{background:var(--paper);color:var(--plate)}
body::before{display:none}
::selection{background:rgba(245,158,11,.28)}

/* ── type: sans for everything a client reads; mono stays only in the wordmark */
.hero h1,.about-head h2,.term-title h2,.sec-head h2,.door h2,.svc h3,.c-title h3,.c-name,.cap-name,.svc li b{
  font-family:var(--sans);font-weight:600;letter-spacing:-.022em}
.hero h1{font-weight:600;font-size:clamp(32px,3.4vw,62px);line-height:1.06;max-width:22ch}
.about-head h2,.term-title h2,.sec-head h2,.door h2{font-size:clamp(28px,2.8vw,44px);line-height:1.08}
.svc h3{font-size:clamp(20px,1.5vw,24px)}
.c-title h3{font-size:clamp(22px,1.8vw,32px)}
.c-name{font-size:clamp(17px,1.3vw,21px);line-height:1.2}
.svc li b{font-size:18px;line-height:1.3}
.eyebrow{color:var(--gold-ink)}
.about-lead{font-weight:500;letter-spacing:-.016em}

/* ── the bar: paper glass, the hero sits under it, not behind it */
.bar{background:rgba(244,245,247,.86);border-bottom:1px solid var(--rule)}
.bar+main .hero{margin-top:0}
.wordmark{color:var(--film)}
.nav a{color:var(--muted)}
.nav a:hover{color:var(--film)}

/* ── the button: THE ACTION stays. Solid navy slab under the plasma now that the page is light; shadow softened. */
.btn-gold{background:linear-gradient(180deg,#223649 0%,#101d2b 100%);
  box-shadow:inset 0 1px 0 rgba(241,245,248,.18),inset 0 -1px 0 rgba(0,0,0,.4),0 10px 24px -12px rgba(15,27,39,.5)}
.btn-gold:hover,.btn-gold:focus-visible{box-shadow:inset 0 1px 0 rgba(241,245,248,.18),inset 0 -1px 0 rgba(0,0,0,.4),0 14px 30px -12px rgba(15,27,39,.5),0 0 26px -8px rgba(245,158,11,.22)}
.btn-gold:hover::after{animation:none}

/* ── the hero: the film stays, the copy is set like a firm's */
.hero .caret{display:none}
.hero-kicker{font:600 13px/1 var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.hero-wm,.hero-bar{display:none}
.hero-alt{font:600 13px/1 var(--label);letter-spacing:.14em}

/* ── about: two columns (the 10-08 relayout), the readout as a plain fact table */
.about-head{grid-column:1/5;grid-row:1}
.about-lead{grid-column:5/13;grid-row:1;max-width:30ch}
.about::before{content:"";grid-column:1/-1;grid-row:2;align-self:start;height:0;margin-top:clamp(36px,4vw,64px);border-top:1px dashed var(--dash)}
.whoami{grid-column:1/5;grid-row:2;align-self:start;border-top:0;font:400 15px/1.5 var(--sans)}
.about-art{grid-column:5/13;grid-row:2;align-self:start;margin-top:clamp(36px,4vw,64px);padding-top:22px}
.about-note{display:none}
.wh-cmd{display:none}
.wh-row{grid-template-columns:9ch minmax(0,1fr);padding-block:11px;border-bottom:1px dashed var(--dash)}
.wh-row dt{color:var(--dim);font:600 11.5px/1.9 var(--label);letter-spacing:.14em;text-transform:uppercase}
.wh-row dd{color:var(--film)}
.wh-row dd b{font-weight:400;font-family:var(--mark);letter-spacing:.06em}
.wh-row dd .wh-sub{display:block;margin-top:3px;color:var(--muted);font-size:14px}
.wh-done dt{color:var(--gold-ink)}
.wh-done dd{color:var(--gold-ink);font-weight:500}
.wh-done .log-caret{display:none}
.about-art figcaption{font:600 11.5px/1.4 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.about-art figcaption b,.art-run{display:none}
.art-slab{box-shadow:inset 0 1px 0 rgba(241,245,248,.16),0 24px 50px -30px rgba(15,27,39,.6)}

/* ── services: two chains (the 10-08 rail), set in sans */
.services{padding-block:clamp(56px,6vw,88px)}
.svc{margin-top:clamp(28px,3vw,44px)}
.svc-c{display:none}
.svc h3{border-bottom:1px solid var(--rule)}
.svc li{grid-template-columns:42px minmax(0,1fr);padding-block:18px 26px;border-bottom:0}
.svc li::before,.svc li::after{content:"";position:absolute;left:4px;width:1px;background:rgba(47,111,174,.4);transform:none;transition:none}
.svc li::before{top:0;height:23px}
.svc li::after{top:33px;bottom:0;right:auto;height:auto}
.svc li:first-child::before{display:none}
.svc li:last-child::after{display:none}
.svc li:hover::after{transform:none}
.svc-n{display:flex;align-items:center;align-self:start;gap:9px;padding-top:0;margin-top:5px;line-height:1;font:600 11.5px/1 var(--label);letter-spacing:.1em;color:var(--steel)}
.svc-n::before{content:"";flex:0 0 9px;width:9px;height:9px;border:1px solid var(--steel);border-radius:50%;background:var(--paper);transition:background .2s var(--ease)}
.svc li:hover .svc-n::before{background:var(--steel)}
.svc li:last-child .svc-n{color:var(--gold-ink)}
.svc li:last-child .svc-n::before{border-color:var(--gold);background:var(--gold)}
.svc li>span:last-child{color:var(--plate)}

/* ── work: on the paper. The plates keep their dark frames. */
.work{background:none;padding:0 var(--gutter) clamp(64px,8vw,120px);border-top:1px dashed var(--dash)}
.cases .term-head{border-bottom:1px dashed var(--dash)}
.c-hint{display:none}
.c-shot{border:1px solid rgba(15,27,39,.18);border-radius:6px;background:#0d1823;box-shadow:0 16px 36px -24px rgba(15,27,39,.55)}
.c-shot img{filter:none}
.c-item:is(:hover,:focus-visible) .c-shot{border-color:var(--steel);box-shadow:0 0 0 4px rgba(47,111,174,.1),0 20px 44px -24px rgba(15,27,39,.6)}
.c-n{font:600 11.5px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.c-n .lamp{display:none}
.c-item:is(:hover,:focus-visible) .c-n{color:var(--steel)}
.c-sum{color:var(--muted)}
.c-cmd{font:600 13px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.c-p{display:none}
.c-ar{color:var(--steel)}
.c-item:is(:hover,:focus-visible) .c-cmd{color:var(--film)}
.c-head{border-bottom:1px dashed var(--dash)}
.c-back{color:var(--steel);font-family:var(--sans)}
.c-back:hover{background:var(--paper-lo);color:var(--film)}
.tab{font:600 12.5px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.tab:hover{color:var(--plate)}
.tab[aria-selected=true]{color:var(--film)}
.tab-n{font:400 11px/1 var(--mono);letter-spacing:0}
.c-panel .side{border-right:1px solid var(--rule)}
.write{color:var(--plate)}
.write .write-li::before{color:var(--steel);font-family:var(--sans)}
.write-meta{color:var(--muted)}
.c-panel .screen{border:1px solid rgba(15,27,39,.18);border-radius:6px;background:#0d1823;box-shadow:0 20px 48px -30px rgba(15,27,39,.6)}
.cases .term-foot{font-family:var(--sans)}

/* ── discuss: a form, not a shell */
.door{border-top:1px dashed var(--dash)}
.door-path{display:none}
.field span{font:600 11.5px/1.4 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.field span::before{content:none}
.field:focus-within span{color:var(--film)}
.field input,.field textarea{color:var(--film);border-bottom-color:var(--hair);caret-color:var(--steel)}
.field input:hover,.field textarea:hover{border-color:var(--plate)}
.door-alt{color:var(--muted);text-decoration-color:var(--hair)}
.door-note{color:var(--film)}

/* ── footer */
.foot{border-top:1px solid var(--rule);color:var(--muted);font:400 13px/1.5 var(--sans)}
.foot a span{display:none}

@media (max-width:900px){
  .about::before{display:none}
  .about-head,.about-lead,.whoami,.about-art{grid-column:1/-1;grid-row:auto}
  .whoami{border-top:1px dashed var(--dash)}
  .about-art{order:5;max-width:520px;padding-top:0}
}

/* the study text prints at once (site js FIRM flag); no caret */
.write .log-caret{display:none}
.write-meta{font-family:var(--sans);font-size:13px}

/* ── THE GEL HERO (2026-10-08, James: "i really like that button with the orange and blue, maybe we go abstract
   instead for a flashy hero"). The film is gone. The hero is the button at page scale: a rounded gel slab inside the
   gutters, the same WebGL fluid (navy body, steel and amber currents, gold where it thins), the same 1px edge light
   and top specular, the pointer pulling a warm well through it. $0, loops forever, no video file. */
.hero{position:relative;isolation:isolate;height:min(76svh,calc(42vw + 68px));min-height:520px;margin:clamp(10px,1.2vw,18px) var(--gutter) 0;
  border-radius:16px;overflow:hidden;background:#0d1823;
  box-shadow:inset 0 1px 0 rgba(241,245,248,.2),inset 0 -1px 0 rgba(0,0,0,.5),0 34px 70px -44px rgba(15,27,39,.7)}
.hero::before{content:"";position:absolute;inset:0;z-index:3;padding:1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,176,46,.3) 0%,rgba(241,245,248,.12) 40%,rgba(241,245,248,.06) 60%,rgba(111,163,214,.3) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.hero-film{z-index:0}
.hero-gel>canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.hero-film::after{background:
  radial-gradient(110% 50% at 50% -12%,rgba(241,245,248,.16) 0%,rgba(241,245,248,.05) 34%,rgba(241,245,248,0) 58%),
  radial-gradient(ellipse 70% 70% at 10% 100%,rgba(5,10,16,.72) 0%,rgba(5,10,16,.38) 45%,rgba(5,10,16,0) 100%),
  linear-gradient(to top,rgba(5,10,16,.5) 0%,rgba(5,10,16,0) 40%)}
.hero-copy{z-index:2;pointer-events:none}
.hero-copy a,.hero-copy button{pointer-events:auto}
.hero-kicker{color:var(--gold-hi)}
@media (max-width:900px){
  .hero{height:auto;min-height:0;aspect-ratio:4/5;margin-inline:var(--gutter);background:#0d1823}
  .hero-film{position:absolute;aspect-ratio:auto}
  .hero-copy{position:absolute}
}

/* 2026-10-08 the launch fade was removed the same evening (James: "just unfade it") - the hero runs lit .6 / heat .1 / speed 1.9, no veil. */

/* ── 2026-10-09 the client login (James: "from the landing page clients can click a button to go to the login page").
   The bar already carries the one plasma action, so the login is a quiet pill after the nav: Barlow caps like the
   nav, a lock, a hairline edge, paper-hi under the hand. At 900px and below it folds to the lock alone (aria-label
   carries the name); where even the lock has no room (641-719px, with the nav still showing, and 360px or less) it
   steps out of the bar. The footer nav carries the same link at every width. */
.bar-login{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px 0 11px;border:1px solid var(--rule);border-radius:7px;color:var(--muted);font:600 13px/1 var(--label);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;flex-shrink:0;transition:color .16s var(--ease),background .16s var(--ease),border-color .16s var(--ease)}
.bar-login svg{width:14px;height:14px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bar-login:hover{color:var(--film);background:var(--paper-hi);border-color:var(--hair)}
@media (max-width:900px){
  .bar-login{width:34px;padding:0;justify-content:center}
  .bar-login-t{display:none}
}
@media (min-width:641px) and (max-width:719px),(max-width:360px){ .bar-login{display:none} }