/* 2026-10-12 CONTROLS — labels, accents, fields and buttons for the paper page. Loads FOURTH, after
   site-20261007c.css, firm.css and hero.css. Every rule here overrides one of those; README-controls.md lists them.

   James, 10-12: the Barlow caps "is really for my engineering firm, it doesn't fit in with our new aedonyx aesthetic";
   the steel blue and the rust "look good in the webgl but not really good on this background"; the fields "are
   designed around that font and i hate them … i like those black and white buttons we have going on in the portal";
   then "why not just use the actual orange like on the art on the about section".

   So: one family (Public Sans) for every word on the paper, ink and two greys for colour, black-and-white controls.
   Amber #f59e0b is the one accent and it is only ever a MARK (a dot, a 2px bar, a 1px underline), never text: it is
   about 2.1:1 on the paper. Focus rings are ink. The plasma button keeps its own rules and is the only gold surface.

   Scale on the paper after this sheet: 12.5 caps label / 13 field label + field message / 14 button / 16 control. */

:root{
  --label:"H Public Sans","Public Sans",Arial,sans-serif;
  /* named so the dark-instrument token blocks in firm.css (.hero, .c-shot, .work .screen, .art-slab, .btn-gold)
     can't flip them: those re-declare --film/--plate, not these */
  --ink:#0f1b27;--ink-2:#2b3a48;--on-ink:#ffffff;
  --ink-line:rgba(15,27,39,.24);--ink-soft:rgba(15,27,39,.14);
  --amber:#f59e0b;
  --ctl-h:48px;--ctl-r:8px}

/* ═══ a. LABELS: Public Sans 600, 12.5px, .07em, caps where they were caps ═══ */
.eyebrow,
.nav,
.hero.hero-two .hero-kicker,
.wh-row dt,
.about-art figcaption,
.c-n,
.c-cmd,
.tab{font-family:var(--sans);font-weight:600;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase}

/* the eyebrow carries the page's amber in one small dot; the hero kicker is an eyebrow too */
.eyebrow{display:flex;align-items:center;gap:10px;line-height:1.5;color:var(--muted)}
/* the kicker is already flex in the base sheet, which hides it on phones in portrait: leave its display alone */
.hero.hero-two .hero-kicker{align-items:center;gap:10px;line-height:1.5;color:var(--muted)}
.eyebrow::before,.hero.hero-two .hero-kicker::before{content:"";flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:var(--amber)}
.nav{line-height:1}
.nav a{color:var(--muted)}
.nav a:hover{color:var(--ink)}
.wh-row dt{line-height:1.8;color:var(--muted)}
.about-art figcaption{line-height:1.4;color:var(--muted)}

/* ═══ b. ACCENTS: steel and rust off the paper ═══ */

/* about: the readout. "status · taking projects" was gold text; now ink 600 behind one amber dot */
.wh-done dt{color:var(--muted)}
.wh-done dd{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:600}
.wh-done dd::before{content:"";flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:var(--amber)}

/* services: the chain. Rail = hairline, numbers = muted, nodes = amber rings (the last one filled, as before) */
.svc li::before,.svc li::after{background:var(--ink-line)}
.svc-n{font:600 12.5px/1 var(--sans);letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--muted)}
.svc-n::before{border-color:var(--amber);background:var(--paper)}
.svc li:hover .svc-n{color:var(--ink)}
.svc li:hover .svc-n::before{background:var(--amber)}
.svc li:last-child .svc-n{color:var(--muted)}
.svc li:last-child .svc-n::before{border-color:var(--amber);background:var(--amber)}
.svc li:last-child:hover .svc-n{color:var(--ink)}

/* case studies: the gallery */
.c-n{color:var(--muted)}
.c-item:is(:hover,:focus-visible) .c-n{color:var(--ink)}
.c-cmd{line-height:1;color:var(--ink)}
.c-ar,.c-item:is(:hover,:focus-visible) .c-ar{color:var(--ink)}
.c-item:is(:hover,:focus-visible) .c-shot{border-color:var(--ink);box-shadow:0 20px 44px -24px rgba(15,27,39,.6)}

/* case studies: the study head */
.c-back,.c-back span:first-child{color:var(--ink)}
.c-back:hover{background:var(--paper-lo);color:var(--ink)}
.tab{color:var(--muted)}
.tab:hover{color:var(--ink-2)}
.tab[aria-selected=true]{color:var(--ink)}
.tab-n,.tab[aria-selected=true] .tab-n{font:400 11px/1 var(--mono);letter-spacing:0;text-transform:none;color:inherit}
.tab-bar{background:var(--amber)}
.write .write-li::before{color:var(--muted)}

/* the door's answer and the footer */
.door-note a{text-decoration-color:var(--ink-line)}
.door-note a:hover{text-decoration-color:var(--ink)}
.foot-id i{background:var(--ink)}

/* ═══ text links: ink, a resting hairline, an amber 1px line that grows from the left on hover ═══ */
.hero.hero-two .hero-alt{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0}
.hero.hero-two .hero-alt,.door .door-alt{
  color:var(--ink);font:500 15px/1.3 var(--sans);letter-spacing:0;text-transform:none;text-decoration:none}
.hero.hero-two .hero-alt .cmd-t,.door .door-alt{
  padding-bottom:3px;
  background:
    linear-gradient(var(--amber),var(--amber)) 0 100%/0 1px no-repeat,
    linear-gradient(var(--ink-line),var(--ink-line)) 0 100%/100% 1px no-repeat;
  transition:background-size .3s var(--out)}
.hero.hero-two .hero-alt:hover,.door .door-alt:hover{color:var(--ink)}
.hero.hero-two .hero-alt:hover .cmd-t,.door .door-alt:hover{background-size:100% 1px,100% 1px}
.door .door-alt{display:inline-block;padding-top:12px}  /* 12px above the text so the tap target clears 40px */
.hero.hero-two .hero-alt-ar{color:var(--muted)}

/* ═══ d. BUTTONS: the portal's black-and-white pair, on the paper ═══ */
.btn-ink,.btn-line{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:var(--ctl-h);padding:0 20px;border:1px solid transparent;border-radius:var(--ctl-r);
  font:600 14px/1 var(--sans);letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .12s var(--out)}
.btn-ink{background:var(--ink);color:var(--on-ink)}
.btn-ink:hover{background:var(--ink-2)}
.btn-line{border-color:var(--ink);background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--on-ink)}
.btn-ink:focus-visible,.btn-line:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:var(--ctl-r)}
.btn-ink:active,.btn-line:active{transform:translateY(1px)}
.btn-ink:disabled,.btn-line:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-ink.btn-lg,.btn-line.btn-lg{min-height:54px;padding:0 22px 0 24px;gap:16px;border-radius:var(--ctl-r);font-size:14px}
/* the label span is .btn-t so the site js can still write "Sending…" into it; drop the plasma's text shadow */
.btn-ink .btn-t,.btn-line .btn-t{text-shadow:none}
.btn-ink .btn-ar,.btn-line .btn-ar{width:16px;height:16px;stroke:currentColor;filter:none}
.btn-ink:hover .btn-ar{transform:translateX(-2px)}
/* the door's submit while the message sends */
.door .btn-ink:disabled{opacity:1;background:var(--ink-2);cursor:progress}

/* the bar: 44px buttons in the 68px bar (48px filled it); the login keeps its lock and folds to it under 900px */
.bar .btn-ink,.bar .btn-line{flex-shrink:0;min-height:44px;padding:0 16px;gap:10px}
.bar .bar-login.btn-line{height:auto;min-height:44px;padding:0 16px 0 14px;border-color:var(--ink);border-radius:var(--ctl-r);
  color:var(--ink);font:600 14px/1 var(--sans);letter-spacing:0;text-transform:none}
.bar .bar-login.btn-line:hover{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.bar .bar-login.btn-line svg{width:15px;height:15px}
@media (max-width:900px){ .bar .bar-login.btn-line{width:44px;padding:0} }
/* firm.css steps the login out of the bar where it has no room; .btn-line's display would undo that */
@media (min-width:641px) and (max-width:719px),(max-width:360px){ .bar .bar-login.btn-line{display:none} }
@media (max-width:640px){
  .bar .btn-ink,.bar .btn-line{min-height:40px;padding:0 14px;font-size:13.5px}
  .bar .btn-ink .btn-ar{display:none}
  .bar .bar-login.btn-line{width:40px;min-height:40px}
  .btn-ink.btn-lg{min-height:52px}
}

/* ═══ c. CONTROLS: a white box with an ink edge ═══ */
.door .door-path{display:none}
.door-form{row-gap:24px}

.field{gap:8px}
.field>span:not(.field-msg){display:block;color:var(--muted);font:600 13px/1.3 var(--sans);letter-spacing:0;text-transform:none}
.field>span:not(.field-msg)::before{content:none}
.field:focus-within>span:not(.field-msg){color:var(--ink)}

/* text inputs, textarea, select: one box. Selectors match the old ones' weight (.field input = 0,1,1) so this sheet
   wins by order and the textarea/select/error/disabled rules below can still win over it. Checkboxes live in
   label.check, not in .field. */
.field :is(input,textarea,select),
.control{
  width:100%;min-height:var(--ctl-h);margin:0;padding:12px 14px;
  border:1px solid var(--ink-line);border-radius:var(--ctl-r);background:var(--paper-hi);box-shadow:none;
  color:var(--ink);caret-color:var(--ink);font:400 16px/1.4 var(--sans);letter-spacing:0;
  -webkit-appearance:none;appearance:none;
  transition:border-color .16s var(--ease)}
.field :is(input,textarea,select):hover,.control:hover{border-color:var(--ink)}
.field :is(input,textarea,select):focus,.control:focus{
  outline:2px solid var(--ink);outline-offset:-2px;border-color:var(--ink);box-shadow:none}
.field :is(input,textarea)::placeholder,.control::placeholder{color:var(--dim);opacity:1}
.field textarea,textarea.control{min-height:140px;line-height:1.5;resize:vertical}

/* browser autofill: keep the white box and ink text instead of the yellow/blue wash */
.field input:-webkit-autofill,.control:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);-webkit-box-shadow:inset 0 0 0 100px var(--paper-hi);caret-color:var(--ink)}

/* select: no native look, a 1px ink chevron 14px from the right */
.field select,select.control{
  padding-right:42px;cursor:pointer;
  background:var(--paper-hi) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%230f1b27' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center/12px 8px no-repeat}
.field select::-ms-expand{display:none}
.field select:invalid,.field select.is-blank{color:var(--dim)}
.field select option{color:var(--ink);background:var(--paper-hi)}

/* error: a 2px ink edge and a plain sentence under the field. No red. */
.field.is-error :is(input,textarea,select),.field :is(input,textarea,select)[aria-invalid=true]{
  outline:2px solid var(--ink);outline-offset:-2px;border-color:var(--ink)}
.field.is-error>span:not(.field-msg){color:var(--ink)}
.field .field-msg{display:block;margin:0;color:var(--ink);font:500 13px/1.45 var(--sans);letter-spacing:0;text-transform:none}
.field .field-msg::before{content:none}

/* disabled: a hairline, grey text, no hover */
.field :is(input,textarea,select):disabled,.control:disabled{
  border-color:var(--ink-soft);background-color:var(--paper);color:var(--muted);-webkit-text-fill-color:var(--muted);cursor:not-allowed}
.field:has(:is(input,textarea,select):disabled)>span:not(.field-msg){color:var(--dim)}

/* checkbox: 18px, 1px ink edge, ink fill and a white check when on. Wrap it in label.check with its text. */
.check{display:inline-flex;align-items:flex-start;gap:12px;color:var(--ink-2);font:400 15px/1.45 var(--sans);cursor:pointer}
input[type=checkbox]:not(.hp){
  -webkit-appearance:none;appearance:none;flex:0 0 18px;width:18px;height:18px;min-height:0;margin:1px 0 0;padding:0;
  border:1px solid var(--ink);border-radius:4px;background:var(--paper-hi) center/12px 12px no-repeat;cursor:pointer;
  transition:background-color .14s var(--ease)}
input[type=checkbox]:not(.hp):checked{
  background-color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6 9.6 3.6' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
input[type=checkbox]:not(.hp):focus-visible{outline:2px solid var(--ink);outline-offset:2px}
input[type=checkbox]:not(.hp):disabled{border-color:var(--ink-soft);background-color:var(--paper);cursor:not-allowed}
input[type=checkbox]:not(.hp):disabled:checked{background-color:var(--ink-soft)}
.check:has(input:disabled){color:var(--dim);cursor:not-allowed}

/* the door's actions sit a step below the last field */
.door-acts{margin-top:8px;gap:16px 28px}

@media (forced-colors:active){
  .eyebrow::before,.hero.hero-two .hero-kicker::before,.wh-done dd::before{background:CanvasText}
}

/* ── 2026-10-12 THE SCALE (James: "do it"): six steps of Public Sans — 13 labels · 15 readout, captions, blurbs ·
   17 body · 22 every item title · 40 section headings and the about lead · 52 the hero headline. The mono for the
   terminal's small meta falls back to Droid now that B612 Mono is no longer loaded. */
.wh-sub,.cap-meta,.svc-c,.about-note p:first-child{font-size:15px}
.svc li b,.c-name,.svc h3{font-size:22px;line-height:1.2}
.about-lead{font-size:40px;line-height:1.18;letter-spacing:-.022em}
.hero.hero-two h1{font-size:clamp(32px,3.7vw,52px);max-width:22ch}
.btn-ink,.btn-line{font-size:15px}
.whoami .wh-sub,.wh-row .wh-sub{font-size:15px}
.bar .btn-ink,.bar .btn-line,.bar .btn-ink .btn-t,.bar .bar-login-t{font-size:15px}
dd .wh-sub,.wh-row dd .wh-sub{font-size:15px}
.btn-ink .btn-t,.btn-ink.btn-lg .btn-t,.door-acts .btn-ink .btn-t{font-size:15px}

/* ── 2026-10-12 the section pages (about/ services/ work/ discuss/): room under the bar, no dashed rule hugging it */
main>.page-sec{padding-top:clamp(40px,6vw,88px)}
main>.door.page-sec{border-top:0;margin-top:0}
main>.about.page-sec,main>.services.page-sec{padding-bottom:clamp(40px,6vw,88px)}

/* ── 2026-10-12 THE SPINE: the Aedonyx mark is the spine alone (chevron band, negative-space slot; design-system
   assets/marks/spine). In the bar it stands 28px tall, ink, next to the mono wordmark; 24px on phones. */
.bar .lockup .mark-spine{width:auto;height:28px;aspect-ratio:200/440}
@media (max-width:900px){.bar .lockup .mark-spine{width:auto;height:24px}}

/* ── 2026-10-13 THE PHONE MENU (James: "on the phone, theres only a button for discuss a project"; then "menu goes on the
   right side of top bar, and list menu smoothly slides down and up"). Under 900 px the nav links are hidden by the base
   sheet; a Menu button (the line button) at the bar's right edge slides them down under it: About · Services · Work ·
   Client login (the login icon leaves the bar on phones). hero.js toggles .menu-open. */
.bar-menu{display:none}
.nav .nav-login{display:none}
/* 2026-10-13 (James: "on the phone the discuss a project button is on the top bar for every page, id rather it be a menu
   list item"): under 900 px the bar's Discuss a project goes and the menu carries it, above Client login */
.nav .nav-discuss{display:none}
@media (max-width:900px){
  .bar{position:sticky}
  .bar .btn-ink{display:none}
  .nav .nav-discuss{display:flex}
  .bar-menu{display:inline-flex;order:9;min-height:44px;padding:0 14px}
  .bar .bar-login{display:none}
  .nav{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;margin:0;padding:6px 0 10px;
    background:var(--paper-hi,#fff);border-bottom:1px solid var(--rule);box-shadow:0 24px 40px -28px rgba(15,27,39,.35);
    max-height:0;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
    transition:max-height .38s cubic-bezier(.25,1,.5,1),opacity .22s ease,transform .38s cubic-bezier(.25,1,.5,1),visibility 0s linear .38s}
  .bar.menu-open .nav{max-height:320px;opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
  .nav a{display:flex;align-items:center;min-height:52px;padding:0 var(--gutter);color:var(--ink);font-size:13px}
  .nav a + a{border-top:1px solid var(--rule)}
  .nav .nav-login{display:flex}
  .bar.menu-open .bar-menu{background:var(--ink);color:var(--on-ink)}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){.nav{transition:none}}