/* 2026-10-07c — hero pass + the work section becomes one near-full-bleed terminal window (no dot grid, header inside the window). 2026-10-07b — headline in the wordmark face (Droid Sans Mono), buttons as gold terminal commands (James: "i hate the buttons"). 2026-10-07 — THE NIGHT SHIFT: the film is the hero, the terminal window below it is the portfolio view (James:
   "this video will be the new hero and the terminal style thing will be the new portfolio view").
   2026-10-06 — THE TERMINAL (James: "way more flashy and aesthetic … coding terminal vibes, automation vibes";
   keep the colours). Same words and sections as the cover style. What changed: the case studies are RUNS in one
   terminal window (tabs = the four tools; a log types itself, the screen wipes in when the job lands, the lamp
   goes gold when it is done, the window moves to the next run by itself until you touch it); a gold block caret
   after the headline; a dot grid under the hero; the services on one line with a pulse moving along it; the
   form as a prompt (bottom-rule fields, gold caret); the footer as a status line.
   Gold = the machine speaking (the caret, the lamp, the done line, the pulse) + the one action. Steel = current. */
@font-face{font-family:"H Public Sans";src:url("/screen/assets/public-sans-vf.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"H Barlow";src:url("/screen/assets/barlow-semi-condensed-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"H Barlow";src:url("/screen/assets/barlow-semi-condensed-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"H Besley";src:url("/screen/assets/besley-800.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"H Droid";src:url("/screen/assets/droid-sans-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"H Droid";src:url("/screen/assets/cousine-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  color-scheme:dark;
  --navy:#1b2c3d; --navy-hi:#22354a; --navy-lo:#132130;
  --well:#0d1823; --well-2:#101d2b; --tile:#1d3046;
  --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);
  --gold:#f59e0b; --gold-hi:#ffb02e; --on-gold:#0e1a25;
  --sans:"H Public Sans","Public Sans",Arial,sans-serif;
  --label:"H Barlow","Barlow Semi Condensed",Arial,sans-serif;
  --mark:"H Droid","Droid Sans Mono",monospace;
  --mono:"B612 Mono","Droid Sans Mono",ui-monospace,monospace;
  --display:"H Besley","Besley",Georgia,serif;
  --gutter:clamp(16px,4.5vw,64px);
  --r:6px;
  --ease:cubic-bezier(.25,1,.5,1);
  --out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{background:var(--navy-lo);scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;min-height:100svh;background:radial-gradient(ellipse 120% 70% at 22% 0%,var(--navy-hi) 0%,var(--navy) 42%,var(--navy-lo) 100%) no-repeat,var(--navy-lo);color:var(--plate);font:400 16px/1.7 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body::before{content:"";position:fixed;z-index:-1;inset:0;background:url("/screen/assets/obsidian-material.png") 43% 55% / max(300vw,400vh) auto no-repeat;opacity:.07;pointer-events:none}
h1,h2,h3,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--film);outline-offset:4px;border-radius:4px}
::selection{background:rgba(245,158,11,.35);color:var(--film)}
#main:focus{outline:none}
.wrap{width:min(1320px,calc(100% - var(--gutter)*2));margin-inline:auto}
.skip{position:fixed;top:12px;left:12px;z-index:50;padding:10px 16px;background:var(--film);color:var(--navy-lo);border-radius:6px;clip-path:inset(50%)}
.skip:focus{clip-path:none}
.eyebrow{color:var(--gold);font:600 13px/1.5 var(--label);letter-spacing:.16em;text-transform:uppercase}

/* ── the bar ── */
/* 2026-10-07c: the bar is glass over the film (James: "make the header bar more translucent"); the hero runs up under it */
.bar{position:sticky;top:0;z-index:20;background:color-mix(in oklab,var(--navy-lo) 34%,transparent);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);border-bottom:1px solid rgba(241,245,248,.1)}
.bar+main .hero{margin-top:-68px}
.bar-in{display:flex;align-items:center;gap:32px;min-height:68px}
.lockup{display:inline-flex;align-items:center;gap:9px;min-height:44px;flex-shrink:0}
.lockup img{display:block}
.wordmark{color:var(--film);font:400 19px/1 var(--mark);letter-spacing:.06em}
.wordmark b{font-weight:700}
.nav{display:flex;gap:30px;margin-left:auto;font:600 13px/1 var(--label);letter-spacing:.16em;text-transform:uppercase}
.nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);transition:color .16s var(--ease)}
.nav a:hover{color:var(--film)}
/* the one action = THE GEL. 2026-10-07c round 5 (James: the trace was "a bit mediocre … make it awesome, very trendy
   and aesthetic"; "maybe some gel plasma moving around"). Round 6: "not as loud, more subtle fluid like plasma",
   "i dont like the horizontal stripes", "refined and professional" = scanlines gone, plasma quieter and slower.
   Round 7: "less border more actual plasma with [like] mesh for a more 3d feel" = the hairline fades to almost
   nothing and the plasma becomes a MESH: six soft lobes (gold, amber, steel, a deep cool blue, a small warm
   highlight, and one DARK lobe that carves shadow) cover the whole slab and drift through each other, so the body
   reads as a volume lit from inside; top specular + bottom rim light give the curvature. Hover: the mesh lifts, a
   seventh lobe follows the pointer with a lag, the edge takes a faint gold, one sheen sweep, the legend decodes
   (site js). Press: the slab sinks a pixel. Reduced motion: the lobes hold still.
   Rejected: outline + cursor, outline + arrow, the gold keycap, the orbiting trace with corner ticks, the loud lamp. */
.btn-gold{
  --mx:50%;--my:50%;--lit:0;
  position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:16px;min-height:42px;padding:0 14px 0 18px;
  border:0;border-radius:7px;cursor:pointer;white-space:nowrap;
  background:linear-gradient(180deg,rgba(27,44,61,.38) 0%,rgba(13,24,35,.56) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  color:var(--film);font:400 13px/1 var(--mark);letter-spacing:.1em;text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(241,245,248,.22),inset 0 -1px 0 rgba(0,0,0,.45),inset 0 -14px 22px -14px rgba(0,0,0,.85),0 20px 44px -18px rgba(0,0,0,.95),0 0 24px -10px rgba(245,158,11,.14);
  transition:transform .18s var(--out),box-shadow .5s var(--ease)}
/* the mesh: lobes of light drifting inside the slab, clipped to its shape */
.btn-pl{position:absolute;inset:0;z-index:-2;border-radius:inherit;overflow:hidden;pointer-events:none;opacity:.92;transform:translateZ(0);transition:opacity .5s var(--ease);-webkit-mask-image:-webkit-radial-gradient(#fff,#000);clip-path:inset(0 round 7px)}
.btn-lg .btn-pl{clip-path:inset(0 round 9px)}
.bar .btn-pl{clip-path:inset(0 round 6px)}
/* round 8 FLUID PLASMA: when WebGL is up (site js adds .is-gl) a canvas in .btn-pl runs the shader and the CSS lobes step aside */
.btn-pl canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.btn-gold.is-gl .btn-pl{opacity:.96}
.btn-gold.is-gl .btn-pl i{display:none}
.btn-gold.is-gl{background:rgba(13,24,35,.9)}
.btn-pl i{position:absolute;display:block;width:170px;height:170px;border-radius:50%;filter:blur(16px) saturate(1.15);mix-blend-mode:plus-lighter;will-change:transform;transform-origin:50% 50%}
.btn-pl i:nth-child(1){left:-18%;top:-80px;background:radial-gradient(circle,rgba(255,186,70,.78) 0%,rgba(245,158,11,.42) 36%,rgba(245,158,11,0) 70%);animation:lobe-a 16s ease-in-out infinite alternate}
.btn-pl i:nth-child(2){left:44%;top:-40px;background:radial-gradient(circle,rgba(246,138,56,.68) 0%,rgba(236,118,40,.36) 36%,rgba(236,118,40,0) 70%);animation:lobe-b 21s ease-in-out infinite alternate -7s}
.btn-pl i:nth-child(3){left:66%;top:-30px;width:150px;height:150px;background:radial-gradient(circle,rgba(160,204,245,.92) 0%,rgba(111,163,214,.5) 36%,rgba(111,163,214,0) 70%);animation:lobe-c 25s ease-in-out infinite alternate -12s}
/* the deep cool lobe: the mesh's shadow colour, where gold and steel meet */
.btn-pl i:nth-child(4){left:28%;top:-20px;width:180px;height:180px;background:radial-gradient(circle,rgba(96,124,210,.82) 0%,rgba(60,84,160,.42) 36%,rgba(52,74,140,0) 70%);animation:lobe-d 19s ease-in-out infinite alternate -3s}
/* the small warm highlight: the hottest point of the volume */
.btn-pl i:nth-child(5){left:10%;top:-30px;width:90px;height:90px;filter:blur(13px) saturate(1);background:radial-gradient(circle,rgba(255,222,150,.7) 0%,rgba(255,186,70,.3) 40%,rgba(255,186,70,0) 70%);animation:lobe-e 13s ease-in-out infinite alternate -5s}
/* the dark lobe: carves a shadow through the light so the body reads as a volume */
.btn-pl i:nth-child(6){left:30%;top:14px;width:190px;height:150px;mix-blend-mode:normal;filter:blur(20px);background:radial-gradient(ellipse,rgba(8,14,22,.5) 0%,rgba(8,14,22,.24) 40%,rgba(8,14,22,0) 70%);animation:lobe-f 23s ease-in-out infinite alternate -9s}
/* the seventh lobe wakes under the pointer and trails it */
.btn-pl i:nth-child(7){left:var(--mx);top:var(--my);width:130px;height:130px;margin:-65px 0 0 -65px;opacity:0;filter:blur(18px);background:radial-gradient(circle,rgba(255,186,80,.22) 0%,rgba(255,176,46,.1) 36%,rgba(255,176,46,0) 70%);animation:none;transition:left .6s var(--out),top .6s var(--out),opacity .45s var(--ease)}
@keyframes lobe-a{0%{transform:translate(0,0) scale(1)}35%{transform:translate(70px,34px) scale(1.18)}70%{transform:translate(150px,-6px) scale(.9)}100%{transform:translate(40px,46px) scale(1.1)}}
@keyframes lobe-b{0%{transform:translate(0,0) scale(1.05)}40%{transform:translate(-110px,30px) scale(.86)}75%{transform:translate(-40px,52px) scale(1.2)}100%{transform:translate(60px,8px) scale(.95)}}
@keyframes lobe-c{0%{transform:translate(0,30px) scale(.9)}50%{transform:translate(-120px,0) scale(1.15)}100%{transform:translate(-30px,38px) scale(1)}}
@keyframes lobe-d{0%{transform:translate(-40px,10px) scale(1)}45%{transform:translate(60px,40px) scale(1.2)}100%{transform:translate(-80px,30px) scale(.9)}}
@keyframes lobe-e{0%{transform:translate(0,20px) scale(1)}50%{transform:translate(140px,40px) scale(1.3)}100%{transform:translate(60px,0) scale(.85)}}
@keyframes lobe-f{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-90px,10px) scale(1.2)}100%{transform:translate(70px,6px) scale(.95)}}
/* the edge: barely there; a faint gold when the gel lights */
.btn-gold::before{content:"";position:absolute;inset:0;z-index:1;padding:1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,176,46,calc(.08 + .2*var(--lit))) 0%,rgba(241,245,248,.09) 40%,rgba(241,245,248,.05) 60%,rgba(111,163,214,calc(.08 + .18*var(--lit))) 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);
  transition:background .45s var(--ease)}
/* the gel surface: a cool specular pooled at the top, a rim light along the foot, and one sweep on hover */
.btn-gold::after{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(110% 55% at 50% -12%,rgba(241,245,248,.26) 0%,rgba(241,245,248,.07) 34%,rgba(241,245,248,0) 58%),
    radial-gradient(90% 40% at 50% 118%,rgba(241,245,248,.12) 0%,rgba(241,245,248,0) 60%),
    linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.22) 100%),
    linear-gradient(105deg,transparent 38%,rgba(241,245,248,.12) 50%,transparent 62%) -160% 0/220% 100% no-repeat}
.btn-gold:hover::after{animation:sheen 1.1s var(--out) .08s both}
@keyframes sheen{from{background-position:0 0,0 0,0 0,-160% 0}to{background-position:0 0,0 0,0 0,260% 0}}
.btn-t{position:relative;z-index:2;font-variant-ligatures:none;text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 10px rgba(0,0,0,.45)}
.btn-ar{position:relative;z-index:2;flex:0 0 auto;width:15px;height:15px;fill:none;stroke:var(--gold-hi);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(255,176,46,.5));transition:transform .22s var(--out)}
.btn-gold:hover,.btn-gold:focus-visible{--lit:1;
  box-shadow:inset 0 1px 0 rgba(241,245,248,.18),inset 0 -1px 0 rgba(0,0,0,.45),inset 0 -14px 22px -14px rgba(0,0,0,.7),0 22px 48px -18px rgba(245,158,11,.22),0 0 26px -8px rgba(245,158,11,.18)}
.btn-gold:hover .btn-pl,.btn-gold:focus-visible .btn-pl{opacity:1}
.btn-gold:hover .btn-pl i:nth-child(7){opacity:1}
.btn-gold:hover .btn-pl i:nth-child(-n+6){animation-duration:10s}
@supports not (mix-blend-mode:plus-lighter){.btn-pl i{mix-blend-mode:screen}}
.btn-gold:hover .btn-ar{transform:translateX(-2px)}
.btn-gold:active{transform:translateY(1px) scale(.985)}
.btn-gold:active .btn-pl{opacity:1}
.btn-gold:focus-visible{outline:none}
.btn-gold:disabled{cursor:progress}
.btn-gold:disabled .btn-pl{opacity:1}
.btn-gold:disabled .btn-pl i:nth-child(-n+6){animation-duration:4s}
.btn-lg{min-height:54px;padding:0 20px 0 24px;gap:22px;border-radius:9px;font-size:14px}
.btn-lg .btn-ar{width:17px;height:17px}
.bar .btn-gold{min-height:38px;padding:0 12px 0 15px;gap:12px;font-size:12px;border-radius:6px}
.bar .btn-pl i{width:120px;height:120px;filter:blur(12px) saturate(1.05)}
.bar .btn-pl i:nth-child(1){top:-60px}.bar .btn-pl i:nth-child(2){top:-30px}.bar .btn-pl i:nth-child(3){top:-24px;width:105px;height:105px}
.bar .btn-pl i:nth-child(4){top:-16px;width:126px;height:126px}.bar .btn-pl i:nth-child(5){top:-20px;width:64px;height:64px;filter:blur(10px)}
.bar .btn-pl i:nth-child(6){top:10px;width:130px;height:100px;filter:blur(14px)}.bar .btn-pl i:nth-child(7){width:96px;height:96px;margin:-48px 0 0 -48px;filter:blur(13px)}

/* ── the hero: the night shift film ──
   2026-10-07c: the eyebrow is gone (the bar already says Aedonyx); the headline is larger, still in the wordmark's
   face; the scrim is a soft pool under the copy rather than a band; the film's foot dissolves into the page ground so
   there is no hard seam above the terminal. */
.hero{position:relative;isolation:isolate;height:min(100svh,calc(56.25vw + 68px));min-height:540px;overflow:hidden;background:var(--navy)}
.hero-film{position:absolute;inset:0;z-index:-1}
.hero-video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 35%;background:var(--well)}
.hero-film::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(to top,var(--navy) 0%,rgba(27,44,61,.82) 7%,rgba(27,44,61,0) 34%),
  radial-gradient(ellipse 62% 58% at 8% 92%,rgba(13,24,35,.86) 0%,rgba(13,24,35,.55) 45%,rgba(13,24,35,0) 100%),
  linear-gradient(to bottom,rgba(13,24,35,.45) 0%,rgba(13,24,35,0) 16%)}
.hero-copy{position:absolute;left:0;right:0;bottom:clamp(40px,5.4vw,88px);display:flex;flex-direction:column;align-items:flex-start}
.hero h1{max-width:24ch;color:var(--film);font:400 clamp(34px,3.7vw,68px)/1.06 var(--mark);letter-spacing:-.025em;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.hero .lede{max-width:44ch;margin-top:clamp(16px,1.4vw,24px);padding:0;color:var(--film);font-size:clamp(17px,1.3vw,21px);line-height:1.55;opacity:.86;text-shadow:0 1px 18px rgba(0,0,0,.6)}
.hero-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;margin-top:clamp(24px,2.2vw,36px)}
.hero-alt{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;color:var(--plate);font:400 13px/1 var(--mark);letter-spacing:.09em;text-transform:uppercase;transition:color .16s var(--ease)}
.hero-alt .cmd-t{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:4px;transition:background-size .22s var(--out)}
.hero-alt:hover{color:var(--film)}
.hero-alt:hover .cmd-t{background-size:100% 1px}
.hero-alt-ar{transition:transform .22s var(--out)}
.hero-alt:hover .hero-alt-ar{transform:translateY(3px)}
/* the kicker: the lockup line above the headline (2026-10-07, James: "AEDONYX | Automation & Web Design" — kept as the
   kicker, the sentence stays the h1; the lede is gone: "its unnecessary") */
.hero-kicker{display:flex;align-items:baseline;gap:0 .6em;margin-bottom:clamp(16px,1.4vw,24px);color:var(--film);font:400 clamp(18px,1.45vw,24px)/1 var(--mark);letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.hero-wm{white-space:nowrap}
.hero-wm b{font-weight:700}
.hero-kicker .hero-bar{color:var(--steel);letter-spacing:0}
/* the copy settles in once */
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
.hero-kicker,.hero h1,.hero-acts{animation:rise .9s var(--out) both}
.hero h1{animation-delay:.1s}
.hero-acts{animation-delay:.22s}
.caret{display:inline-block;width:.42em;height:.82em;margin-left:.12em;vertical-align:-.06em;background:var(--gold);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.lede{max-width:40ch;padding-bottom:10px;font-size:clamp(17px,1.35vw,20px);line-height:1.6;text-wrap:pretty}

/* ── the work: the section IS the terminal window ──
   2026-10-07c (James: "no dots, the terminal should really just take up most of the area, no background for this
   section, the header will be on the terminal"). No section ground, no dot grid: the window runs nearly edge to
   edge, the eyebrow + h2 sit in the window's own head beside the tabs, and the caption lives in the left pane under
   the log. The status lamp is a square block, the same mark as the cursor. */
.work{--tg:clamp(10px,1.5vw,28px);padding:var(--tg) var(--tg) clamp(64px,8vw,120px)}
.term{display:flex;flex-direction:column;max-width:2400px;margin-inline:auto;border:1px solid var(--rule);border-radius:var(--r);background:var(--well);box-shadow:0 0 0 1px rgba(0,0,0,.35),0 50px 120px -50px rgba(0,0,0,.9)}

.term-top{display:flex;align-items:center;gap:14px;min-height:40px;padding:0 18px;border-bottom:1px solid var(--rule);font:400 12.5px/1 var(--mono);color:var(--dim)}
.lamp{flex:0 0 8px;width:8px;height:12px;background:var(--dim);transition:background .3s var(--ease)}
.term.is-running .lamp{background:var(--steel);animation:lamp .9s var(--ease) infinite alternate}
.term.is-done .lamp{background:var(--gold);animation:none}
@keyframes lamp{to{opacity:.4}}
.term-path{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.term-path b{font-weight:400;color:var(--muted)}
.term-count{margin-left:auto;white-space:nowrap}

.term-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;padding:clamp(20px,2.2vw,44px) clamp(20px,2.2vw,40px) 0;border-bottom:1px solid var(--rule)}
.term-title{padding-bottom:clamp(16px,1.6vw,28px)}
.term-title h2{margin-top:10px;color:var(--film);font:400 clamp(32px,3.2vw,56px)/1.04 var(--mark);letter-spacing:-.03em}
.tabs{display:flex;overflow-x:auto;scrollbar-width:none;margin-right:calc(clamp(20px,2.2vw,40px) * -1 + 6px)}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;display:inline-flex;align-items:center;gap:9px;min-height:52px;padding:0 18px;border:0;background:none;color:var(--dim);font:400 14px/1 var(--mono);letter-spacing:.02em;cursor:pointer;white-space:nowrap;transition:color .18s var(--ease)}
.tab:hover{color:var(--plate)}
.tab[aria-selected=true]{color:var(--film)}
.tab-n{color:var(--dim);font-size:11.5px}
.tab[aria-selected=true] .tab-n{color:var(--steel)}
.tab-bar{position:absolute;left:18px;right:18px;bottom:-1px;height:2px;background:var(--steel);transform:scaleX(0);transform-origin:left}
.tab[aria-selected=true] .tab-bar{transform:scaleX(1)}
.term.is-auto .tab[aria-selected=true] .tab-bar{transform:scaleX(0)}
.term.is-auto.is-done .tab[aria-selected=true] .tab-bar{animation:hold 7s linear forwards}
.term.is-auto:is(.is-paused,.is-away,.is-hidden) .tab-bar{animation-play-state:paused}
@keyframes hold{to{transform:scaleX(1)}}

.term-body{display:grid;grid-template-columns:minmax(300px,29fr) minmax(0,71fr)}
.side{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--rule)}
.log{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2vw,34px) clamp(20px,2vw,32px);font:400 clamp(13px,.9vw,15px)/1.5 var(--mono);color:var(--muted)}
.ln{display:grid;grid-template-columns:14px auto 1fr;gap:0 10px;align-items:baseline;opacity:0;transform:translateY(3px);transition:opacity .22s var(--out),transform .32s var(--out)}
.ln.is-in{opacity:1;transform:none}
.ln .pr{color:var(--dim)}
.ln .cmd{color:var(--film);white-space:nowrap}
.ln .out{color:var(--muted);opacity:0;transition:opacity .25s var(--out)}
.ln.has-out .out{opacity:1}
.ln.is-done .pr,.ln.is-done .cmd{color:var(--gold)}
.log-caret{display:inline-block;width:8px;height:14px;margin-top:2px;background:var(--gold);animation:blink 1.1s steps(1) infinite}
.term.is-done .log-caret{animation:none}

.screen{position:relative;overflow:hidden;background:var(--well-2);aspect-ratio:16/9;max-height:calc(100svh - 68px - 200px);width:100%}
.run{position:absolute;inset:0}
.run img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--out)}
.run.is-shown img{clip-path:inset(0 0 0 0)}
.scan{position:absolute;left:0;right:0;top:0;height:1px;background:var(--steel);box-shadow:0 0 14px 1px var(--steel-glow);opacity:0;transform:translateY(-2px);pointer-events:none}
.scan.is-on{opacity:1;transition:transform 1.1s var(--out),opacity .2s .9s var(--ease)}
.scan.is-on.is-off{opacity:0}

/* the caption: the run's name and summary, at the foot of the left pane */
.caption{margin-top:auto;padding:clamp(22px,2vw,32px) clamp(20px,2vw,32px) clamp(24px,2.2vw,36px);border-top:1px dashed var(--dash);transition:opacity .22s var(--ease),transform .22s var(--ease)}
.caption.is-swap{opacity:0;transform:translateY(4px)}
.cap-name{color:var(--film);font:400 clamp(20px,1.45vw,26px)/1.2 var(--mark);letter-spacing:-.02em;text-wrap:balance}
.cap-sum{max-width:52ch;margin-top:12px;font-size:clamp(15px,1vw,17px);line-height:1.7;text-wrap:pretty}
.cap-meta{margin-top:12px;color:var(--muted);font:400 12.5px/1.5 var(--mono)}
.cap-acts{display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px;margin-top:14px}
.cap-cta,.cap-all{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:15px;font-weight:500}
.cap-cta{color:var(--film);text-decoration:underline;text-decoration-color:var(--steel);text-decoration-thickness:1px;text-underline-offset:.3em}
.cap-cta:hover{text-decoration-thickness:2px}
.cap-all{color:var(--muted)}
.cap-all:hover{color:var(--film)}
.cap-cta span,.cap-all span{font-size:12px}

.term-foot{display:flex;align-items:center;gap:16px;min-height:46px;padding:0 10px 0 clamp(20px,2vw,32px);border-top:1px solid var(--rule);font:400 13px/1 var(--mono);color:var(--dim)}
.now{display:inline-flex;align-items:center;gap:10px;min-width:0}
.now-n{color:var(--film)}
.now-name{margin-left:12px;padding-left:12px;border-left:1px solid var(--rule);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auto{margin-left:auto;color:var(--dim);font-size:12px;letter-spacing:.06em;opacity:0;transition:opacity .3s var(--ease)}
.term.is-auto .auto{opacity:1}
.auto::before{content:"▸ ";color:var(--steel)}
.keys{display:flex;gap:4px}
.key{display:grid;place-items:center;width:40px;height:36px;padding:0;border:1px solid transparent;border-radius:4px;background:none;cursor:pointer;transition:background .18s var(--ease),border-color .18s var(--ease)}
.key:hover{background:var(--tile);border-color:var(--edge)}
.key svg{width:16px;height:16px;fill:none;stroke:var(--film);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ── services: three steps on one line ── */
.services{padding-block:clamp(64px,8vw,120px);border-top:1px dashed var(--dash)}
.sec-head .sec-sum{max-width:44ch}
.sec-sum{margin-top:16px;color:var(--plate);font-size:17px;line-height:1.65}
.film-copy h2,.sec-head h2,.door-copy h2{margin-top:14px;color:var(--film);font:400 clamp(30px,3.2vw,50px)/1.08 var(--mark);letter-spacing:-.03em;text-wrap:balance}
/* 2026-10-07 the about. 10-07d impeccable (James: "make the about section more stylish"): a 12-col sheet. The head sits
   top-left; the lead sentence is set large as the statement across the right; under it the founder note and, beside
   it, the machine's readout (whoami) on a dashed rule, which prints row by row once when it scrolls in. No box: the
   readout is ruled, not framed (law 6). */
.about{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 clamp(20px,2.4vw,40px);padding-block:clamp(72px,9vw,136px) clamp(64px,8vw,120px)}
.about-head{grid-column:1/5;grid-row:1;align-self:start}
/* 10-07h the art: THE STENCIL. Smoked glass over THE ACTION's plasma; a web page cut out of the glass so its media,
   its cards and its one action are lit from inside by the button's fluid. The drawn layer starts off register and
   settles as the cut-outs open; a signal then runs the wiring from the action to the deploy lamp. Left column, row 2,
   beside the founder note and the readout. */
.about-art{grid-column:1/5;grid-row:2;align-self:end;margin:clamp(36px,4vw,64px) 0 0}
.art-slab{position:relative;isolation:isolate;aspect-ratio:4/3;overflow:hidden;border-radius:12px;background:#0b1520;
  box-shadow:inset 0 1px 0 rgba(241,245,248,.16),inset 0 -1px 0 rgba(0,0,0,.5),0 40px 90px -50px rgba(0,0,0,.95),0 0 40px -18px rgba(245,158,11,.1);
  -webkit-mask-image:-webkit-radial-gradient(#fff,#000);clip-path:inset(0 round 12px)}
.art-slab>canvas{position:absolute;inset:0;z-index:-1;display:block;width:100%;height:100%}
/* the glass: a cool specular at the top, a faint edge */
.art-slab::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;
  background:radial-gradient(110% 50% at 50% -10%,rgba(241,245,248,.16) 0%,rgba(241,245,248,.04) 35%,rgba(241,245,248,0) 60%);
  box-shadow:inset 0 0 0 1px rgba(241,245,248,.09)}
.art-wire{position:absolute;inset:0;z-index:2;width:100%;height:100%}
/* the stencil: the glass rect with the page cut out of it; the plasma shows 10 % through the glass, fully in the cuts */
.art-wire .glass{fill:#09111b;fill-opacity:.93;transition:fill-opacity .6s var(--ease)}
.art-slab:hover .art-wire .glass{fill-opacity:.86}
.art-wire .h{transform-box:fill-box;transform-origin:50% 0}
.art-wire .rims rect{fill:none;stroke:rgba(241,245,248,.22);stroke-width:1;vector-effect:non-scaling-stroke}
.art-wire .rims .rim-act{stroke:rgba(255,176,46,.55)}
/* the drawn layer: the design, printed on the glass */
.art-wire .f{fill:rgba(241,245,248,.74)}
.art-wire .f-on{fill:rgba(241,245,248,.9)}
.art-wire .ret{fill:var(--gold-hi)}
.art-wire .caret-b{fill:var(--gold);animation:blink 1.1s steps(1) infinite}
.art-wire .f-d{fill:none;stroke:rgba(241,245,248,.3);stroke-width:4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.art-wire .seam{fill:none;stroke:rgba(241,245,248,.2);stroke-width:1;stroke-dasharray:2 4;vector-effect:non-scaling-stroke}
.art-wire .base{fill:none;stroke:rgba(241,245,248,.14);stroke-width:1;vector-effect:non-scaling-stroke}
/* the wiring: the automation under the page */
.art-wire .wire{fill:none;stroke:rgba(111,163,214,.55);stroke-width:1.2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.art-wire .wire-d{stroke:rgba(111,163,214,.3)}
.art-wire .node{fill:#0d1823;stroke:var(--steel);stroke-width:1.3;vector-effect:non-scaling-stroke}
.art-wire .node-g{stroke:var(--gold)}
.art-wire .lamp{fill:var(--dim);animation:art-lamp 6s linear infinite 2.4s}
.art-wire .bead{fill:var(--gold-hi);offset-path:path("M96 95H200V236H320");offset-rotate:0deg;opacity:0;animation:art-bead 6s var(--ease) infinite 2.4s}
@keyframes art-bead{0%{offset-distance:0%;opacity:0}5%{opacity:1}48%{offset-distance:100%;opacity:1}54%,100%{offset-distance:100%;opacity:0}}
@keyframes art-lamp{0%,48%{fill:var(--dim)}52%,90%{fill:var(--gold)}100%{fill:var(--dim)}}
/* the plot: the cuts open top-down in sequence, the printed layer slides into register, the wiring draws, then the
   signal runs (site js adds .is-armed, then .is-in once on scroll-in) */
.art-slab.is-armed .h{transform:scaleY(0)}
.art-slab.is-armed .ink{opacity:0;transform:translate(-7px,-6px)}
.art-slab.is-armed .rims{opacity:0}
.art-slab.is-armed .wire{stroke-dasharray:1;stroke-dashoffset:1}
.art-slab.is-armed :is(.node,.lamp,.bead){opacity:0}
.art-slab.is-armed .bead{animation-play-state:paused}
.art-slab.is-in .h{transform:none;transition:transform .9s var(--out) calc(var(--i,0) * 120ms + 150ms)}
.art-slab.is-in .ink{opacity:1;transform:none;transition:opacity .7s var(--out) .2s,transform 1.1s var(--out) .2s}
.art-slab.is-in .rims{opacity:1;transition:opacity .8s var(--ease) .9s}
.art-slab.is-in .wire{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1) 1.1s}
.art-slab.is-in :is(.node,.lamp){opacity:1;transition:opacity .5s var(--ease) 1.9s}
.art-slab.is-in .bead{animation-play-state:running}
.about-art figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:14px;color:var(--muted);font:400 12.5px/1.4 var(--mono)}
.about-art figcaption b{font-weight:400;color:var(--dim)}
.art-run{display:inline-flex;align-items:center;gap:8px;color:var(--dim)}
.art-run i{width:6px;height:10px;background:var(--steel);animation:lamp .9s var(--ease) infinite alternate}
@media (max-width:900px){ .about-art{grid-column:1/-1;grid-row:auto;order:5;max-width:520px} }
@media (prefers-reduced-motion:reduce){
  .art-slab.is-armed .h{transform:none}
  .art-slab.is-armed .ink{opacity:1;transform:none}
  .art-slab.is-armed .rims{opacity:1}
  .art-slab.is-armed .wire{stroke-dashoffset:0}
  .art-slab.is-armed :is(.node,.lamp){opacity:1}
  .art-wire .bead{display:none}
  .art-wire .lamp{animation:none;fill:var(--gold)}
  .art-wire .caret-b,.art-run i{animation:none}
}
.about-head h2{margin-top:14px;color:var(--film);font:400 clamp(30px,3.2vw,50px)/1.08 var(--mark);letter-spacing:-.03em}
.about-lead{grid-column:5/13;max-width:30ch;color:var(--film);font:400 clamp(24px,2.35vw,40px)/1.28 var(--sans);letter-spacing:-.018em;text-wrap:balance}
.about-note{grid-column:5/9;display:flex;flex-direction:column;gap:14px;margin-top:clamp(36px,4vw,64px);padding-top:22px;border-top:1px dashed var(--dash)}
.about-note p{max-width:44ch;color:var(--plate);font-size:clamp(16px,1.1vw,18px);line-height:1.75;text-wrap:pretty}
.about-note p:first-child{color:var(--muted);font:400 13px/1.5 var(--mono);letter-spacing:.02em}
.whoami{grid-column:9/13;margin:clamp(36px,4vw,64px) 0 0;padding-top:22px;border-top:1px dashed var(--dash);font:400 13px/1.5 var(--mono)}
.wh-cmd{display:flex;gap:10px;margin-bottom:12px;color:var(--film)}
.wh-cmd span{color:var(--dim)}
.wh-row{display:grid;grid-template-columns:8ch minmax(0,1fr);gap:0 14px;padding-block:9px;border-bottom:1px dashed rgba(241,245,248,.1)}
.wh-row dt{color:var(--dim)}
.wh-row dd{margin:0;color:var(--plate)}
.wh-row dd b{font-weight:400;color:var(--film)}
.wh-done dt,.wh-done dd{color:var(--gold)}
.wh-done{border-bottom:0}
.wh-done .log-caret{margin:0 0 -2px 8px;height:13px}
/* the print: rows land one after another (site js adds .is-armed, then .is-in) */
.whoami.is-armed :is(.wh-cmd,.wh-row){opacity:0;transform:translateY(3px)}
.whoami.is-in :is(.wh-cmd,.wh-row){opacity:1;transform:none;transition:opacity .3s var(--out),transform .4s var(--out);transition-delay:calc(var(--i,0)*90ms + 120ms)}
.whoami.is-in .wh-cmd{transition-delay:0ms}
.services+.work{padding-top:clamp(16px,2vw,32px)}
/* 2026-10-07 the services as a plain list. 10-07d: each column is headed like a drive (A / B, a dim count), each item is
   numbered in steel mono, and the row under the hand takes a steel tick on the rule. */
.svc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px clamp(32px,5vw,96px);margin-top:clamp(40px,4.4vw,64px)}
.svc h3{display:flex;align-items:baseline;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--rule);color:var(--film);font:400 clamp(22px,1.7vw,28px)/1.2 var(--mark);letter-spacing:-.02em}
.svc-k{display:inline-grid;place-items:center;width:28px;height:28px;border:1px solid var(--steel);border-radius:4px;color:var(--steel);font:400 13px/1 var(--mono);letter-spacing:0;transform:translateY(-3px)}
.svc-c{margin-left:auto;color:var(--dim);font:400 12.5px/1 var(--mono);letter-spacing:.02em}
.svc li{position:relative;display:grid;align-content:start;grid-template-columns:42px minmax(0,1fr);gap:6px 0;padding-block:22px;border-bottom:1px dashed var(--dash)}
.svc li::after{content:"";position:absolute;left:0;bottom:-1px;width:42px;height:1px;background:var(--steel);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--out)}
.svc li:hover::after{transform:scaleX(1)}
.svc-n{grid-row:1/3;padding-top:5px;color:var(--steel);font:400 12.5px/1 var(--mono);letter-spacing:.04em}
.svc li b{color:var(--film);font:400 20px/1.3 var(--mark);letter-spacing:-.02em}
.svc li>span:last-child{max-width:46ch;color:var(--plate);font-size:15px;line-height:1.65}
.steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3vw,48px);padding-top:28px}
.steps::before{content:"";position:absolute;left:0;right:0;top:6px;border-top:1px dashed var(--dash)}
.steps li{position:relative;display:flex;flex-direction:column;gap:10px}
.node{position:absolute;left:0;top:-28px;width:13px;height:13px;border:1.5px solid var(--steel);border-radius:50%;background:var(--navy);transform:translateY(0)}
.steps li:last-child .node{background:var(--steel)}
.pulse{position:absolute;top:1px;left:0;width:11px;height:11px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px 2px rgba(245,158,11,.5);animation:travel 7s var(--ease) infinite}
@keyframes travel{0%{left:0;opacity:0}6%{opacity:1}94%{opacity:1}100%{left:calc(100% - 11px);opacity:0}}
.step-n{color:var(--steel);font:400 13px/1 var(--mono);letter-spacing:.04em}
.steps h3{margin-top:6px;color:var(--film);font:400 21px/1.25 var(--mark);letter-spacing:-.02em}
.steps p{max-width:34ch;font-size:15px;line-height:1.7;text-wrap:pretty}

/* ── the door: the form as the prompt ── */
.door{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,96px);padding-block:clamp(64px,8vw,120px);border-top:1px dashed var(--dash)}
.door-form{display:grid;grid-template-columns:1fr 1fr;gap:28px 24px;align-content:start}
.door-path{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin-bottom:-4px;color:var(--muted);font:400 12.5px/1 var(--mono)}
.door-path i{width:7px;height:11px;background:var(--steel)}
.door-path span{margin-left:auto;color:var(--dim)}
.door-copy .sec-sum{max-width:36ch;text-wrap:pretty}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field span{display:flex;gap:8px;color:var(--muted);font:400 12.5px/1.4 var(--mono);letter-spacing:.02em}
.field span::before{content:">";color:var(--dim)}
.field:focus-within span{color:var(--film)}
.field:focus-within span::before{color:var(--gold)}
.field input,.field textarea{width:100%;padding:12px 2px 12px;border:0;border-bottom:1px solid var(--hair);border-radius:0;background:transparent;color:var(--film);caret-color:var(--gold);font:400 17px/1.5 var(--sans);transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.field textarea{resize:vertical;min-height:120px}
.field input:hover,.field textarea:hover{border-color:var(--plate)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--steel);box-shadow:0 1px 0 0 var(--steel)}
.field-wide{grid-column:1/-1}
.door-acts{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:4px}
.door-alt{color:var(--muted);font-size:14px;text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:.3em}
.door-alt:hover{color:var(--film)}

/* ── the status line ── */
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;padding-block:22px 36px;border-top:1px solid var(--rule);color:var(--muted);font:400 13px/1.5 var(--mono)}
.foot-id{display:inline-flex;align-items:center;gap:10px}
.foot-id i{width:7px;height:7px;border-radius:50%;background:var(--steel)}
.foot a{display:inline-flex;gap:10px;align-items:center;min-height:44px}
.foot-nav{display:flex;flex-wrap:wrap;gap:0 28px}
.foot a span{font-size:11px}
.foot a:hover{color:var(--film)}

@media (max-width:1000px){
  .term-body{display:flex;flex-direction:column}
  .side{display:contents}
  .log{order:1;padding:16px 18px;border-bottom:1px solid var(--rule);font-size:12.5px;gap:6px}
  .screen{order:2;max-height:none}
  .caption{order:3;margin-top:0;border-top:1px solid var(--rule)}
  .term-head{flex-direction:column;align-items:stretch;gap:0}
  .term-title{padding-bottom:8px}
  .tabs{margin:0 0 0 -18px;max-width:calc(100% + 18px)}
  .term-head>*{min-width:0}
}
@media (max-width:900px){
  .hero{height:auto;min-height:0;background:none}
  .bar+main .hero{margin-top:0}
  .hero-film{position:relative;z-index:0;aspect-ratio:16/9}
  .hero-film::after{background:linear-gradient(to top,var(--navy) 0%,rgba(27,44,61,0) 30%)}
  .hero-copy{position:static;padding-top:18px;padding-bottom:clamp(36px,8vw,56px)}
  .hero h1{max-width:18ch;font-size:clamp(30px,7vw,44px)}
  .door{grid-template-columns:minmax(0,1fr)}
  .svc{grid-template-columns:minmax(0,1fr)}
  .about{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .about-head,.about-lead{grid-column:1/-1;grid-row:auto}
  .about-lead{margin-top:28px}
  .about-note,.whoami{grid-column:auto}
  .steps{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:0;padding-left:30px}
  .steps::before{left:6px;right:auto;top:6px;bottom:6px;border-top:0;border-left:1px dashed var(--dash)}
  .node{left:-30px;top:5px}
  .pulse{left:1px;animation-name:travel-y}
  @keyframes travel-y{0%{top:0;opacity:0}6%{opacity:1}94%{opacity:1}100%{top:calc(100% - 11px);opacity:0}}
  .term-count{display:none}
}
/* 2026-10-07 phones in portrait: the same hero as desktop (James: "update the phone website to be like the desktop
   website"). The 9:16 cut of the film fills the screen under the glass bar and the copy sits over its foot. */
@media (max-width:900px) and (orientation:portrait){
  .hero-kicker{display:none}  /* 2026-10-07 James: take the ÆDONYX | Automation & Web Design line off the phone */
  .hero{height:min(100svh,177.78vw);min-height:0}
  .bar+main .hero{margin-top:-60px}
  .hero-film{position:absolute;inset:0;z-index:-1;aspect-ratio:auto}
  .hero-video{object-position:50% 30%}
  .hero-film::after{background:
    linear-gradient(to top,var(--navy) 0%,rgba(19,33,48,.9) 16%,rgba(19,33,48,.55) 40%,rgba(19,33,48,0) 62%),
    linear-gradient(to bottom,rgba(13,24,35,.5) 0%,rgba(13,24,35,0) 14%)}
  .hero-copy{position:absolute;padding:0 20px;bottom:max(28px,env(safe-area-inset-bottom))}
  .hero h1{font-size:clamp(30px,8.4vw,44px)}
  .hero .lede{font-size:16px;margin-top:14px}
  .hero-acts{margin-top:22px;gap:6px 24px}
}
@media (max-width:640px){
  .bar-in{gap:12px;min-height:60px}
  .nav{display:none}
  .lockup{margin-right:auto}
  .wordmark{font-size:16px}
  .lockup img{width:26px;height:26px}
  .bar .btn-gold{min-height:36px;padding:0 10px 0 12px;gap:10px;font-size:11px;letter-spacing:.07em}
  .btn-lg{min-height:50px;padding:0 16px 0 20px;gap:18px;font-size:13px}
  .work{--tg:8px}
  .term{border-radius:4px}
  .term-head{padding:24px 18px 0}
  .tab{padding:0 12px}
  .tab-bar{left:12px;right:12px}
  .now-name{display:none}
  .door-form{grid-template-columns:minmax(0,1fr)}
  .about-note,.whoami{grid-column:1/-1}
  .whoami{margin-top:32px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .caret,.log-caret{opacity:1}
  .hero-kicker,.hero h1,.hero .lede,.hero-acts{opacity:1;transform:none}
  .btn-pl i{animation:none!important}
  .btn-pl i:nth-child(1){transform:translate(60px,30px)}
  .btn-pl i:nth-child(2){transform:translate(-60px,40px)}
  .btn-pl i:nth-child(3){transform:translate(40px,20px)}
  .btn-pl i:nth-child(4){transform:translate(10px,30px)}
  .btn-pl i:nth-child(5){transform:translate(80px,30px)}
  .btn-pl i:nth-child(6){transform:translate(-30px,30px)}
  .btn-gold:hover::after{animation:none}
  .pulse{display:none}
  .run img{clip-path:none}
  .whoami.is-armed :is(.wh-cmd,.wh-row){opacity:1;transform:none}
}

/* the door's answer + the honeypot */
.door-note{grid-column:1/-1;max-width:52ch;margin:0;color:var(--film);font-size:17px;line-height:1.6}
.door-note[data-kind=err]{color:var(--plate)}
.door-note a{text-decoration:underline;text-decoration-color:var(--steel);text-underline-offset:.3em}
.door-note:focus{outline:none}
.door-fields{display:contents}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* 2026-10-07d James: "flip the description to be laid out on top of the coding stuff" — in every window the caption
   (name, summary, links) comes first and the log prints under it; stacked, the order is caption → log → screen. */
.side .caption{order:-1;margin-top:0;border-top:0;border-bottom:1px dashed var(--dash)}
@media (max-width:1000px){
  .caption{order:1;border-bottom:1px solid var(--rule)}
  .log{order:2}
  .screen{order:3}
}

/* ── 2026-10-07f THE CASES ON THE COVER ──
   James: "it should just be all on the cover, no separate pages … clicking those buttons just changes the terminal
   layout smoothly … the gallery is the full face at first so something where the user can pick". The window has two
   faces: THE GALLERY (the four runs as screens to pick from) and THE STUDY (the old study page, inside the window).
   Site js switches them (.is-study + the open panel's .is-open) inside a view transition: the picked thumbnail grows
   into the study's screen and the window resizes; reduced motion = a plain swap. No js = the gallery, then every
   study printed below it, reachable by the gallery's #links. (Source: src/cases-20261007f.css, appended by
   src/build_cs.py.) */
.cases .term-head{align-items:flex-end}
.c-hint{display:flex;gap:10px;padding-bottom:clamp(18px,1.8vw,30px);color:var(--dim);font:400 13px/1 var(--mono)}
/* the gallery: four screens on the window's ground */
.c-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2vw,36px) clamp(16px,1.6vw,30px);padding:clamp(22px,2.2vw,40px) clamp(20px,2.2vw,40px) clamp(28px,2.8vw,48px)}
.c-item{display:flex;flex-direction:column;height:100%;color:inherit;border-radius:6px;outline:none}
.c-shot{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--rule);border-radius:4px;background:var(--well-2);transition:border-color .25s var(--ease),box-shadow .35s var(--ease)}
.c-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;filter:grayscale(.35) brightness(.72);transition:filter .4s var(--ease),transform .9s var(--out)}
.c-scan{position:absolute;left:0;right:0;top:0;height:1px;background:var(--steel);box-shadow:0 0 14px 1px var(--steel-glow);opacity:0;pointer-events:none}
.c-n{display:flex;align-items:center;gap:9px;margin-top:16px;color:var(--dim);font:400 12px/1 var(--mono);letter-spacing:.02em;transition:color .2s var(--ease)}
.c-n .lamp{flex:0 0 6px;width:6px;height:10px;background:var(--dim);transition:background .2s var(--ease)}
.c-name{margin-top:10px;color:var(--film);font:400 clamp(19px,1.45vw,25px)/1.18 var(--mark);letter-spacing:-.02em;text-wrap:balance}
.c-sum{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin-top:10px;color:var(--muted);font-size:14.5px;line-height:1.6;text-wrap:pretty}
.c-cmd{display:inline-flex;align-self:flex-start;align-items:center;gap:9px;margin-top:auto;padding-top:16px;color:var(--plate);font:400 12.5px/1 var(--mono)}
.c-p{color:var(--dim)}
.c-ar{color:var(--dim);transition:transform .22s var(--out),color .2s var(--ease)}
.c-item:is(:hover,:focus-visible) .c-shot{border-color:rgba(111,163,214,.6);box-shadow:0 0 0 4px rgba(111,163,214,.08),0 30px 70px -40px rgba(0,0,0,.9)}
.c-item:is(:hover,:focus-visible) .c-shot img{filter:none;transform:scale(1.025)}
/* 10-07k no scan line on the gallery screens on hover (James: "too much"); the lamp, the edge and the picture waking are enough */
.c-item:is(:hover,:focus-visible) .c-n{color:var(--steel)}
.c-item:is(:hover,:focus-visible) .c-n .lamp{background:var(--gold)}
.c-item:is(:hover,:focus-visible) .c-cmd{color:var(--film)}
.c-item:is(:hover,:focus-visible) .c-ar{color:var(--gold);transform:translateX(4px)}
.c-item:focus-visible .c-shot{outline:2px solid var(--film);outline-offset:3px}
@keyframes c-scan{0%{top:0;opacity:1}85%{opacity:1}100%{top:100%;opacity:0}}

/* the study inside the window (10-07k: no top bar on the window, no foot on the study — James: "stupid and confusing … not needed") */
.c-panel{border-top:1px solid var(--rule)}
/* 10-07k the head, one line (James: "put the back button on the left of the heading instead, just the back button
   symbol"): the arrow key, the title, the view tabs; the case-study number lives in the window's top bar */
.c-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 40px;padding:clamp(8px,.8vw,12px) clamp(20px,2.2vw,40px) 0;border-bottom:1px solid var(--rule)}
.c-title{display:flex;align-items:center;gap:12px;min-width:0;padding-bottom:clamp(8px,.8vw,12px)}
.c-title h3{margin:0;color:var(--film);font:400 clamp(24px,2vw,36px)/1.04 var(--mark);letter-spacing:-.03em;text-wrap:balance;outline:none}
.c-back{display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;margin-left:-10px;border-radius:4px;color:var(--steel);font:400 20px/1 var(--mono);transition:background .18s var(--ease),color .18s var(--ease)}
.c-back span:first-child{color:var(--steel);transition:transform .22s var(--out)}
.c-back:hover{background:var(--tile);color:var(--film)}
.c-back:hover span:first-child{transform:translateX(-3px)}
.c-head .tabs{margin-right:calc(clamp(20px,2.2vw,40px) * -1 + 6px)}
.c-panel .tab[aria-selected=true] .tab-bar{transform:scaleX(1)}
.c-panel .term-body{container-type:inline-size}
/* the screen fills the row: 16:9 of its pane at least, taller when the side pane runs longer (the plate letterboxes) */
/* --fit = the room the window has under the bar in one vertical screen (top bar + head + foot ≈ 300px) */
.c-panel{--fit:calc(100svh - 68px - 300px)}
.c-panel .screen{aspect-ratio:auto;min-height:min(40cqw,var(--fit));max-height:var(--fit)}
.c-panel .side{max-height:var(--fit);overflow:auto;scrollbar-width:thin}
.c-panel .run img{object-fit:contain;object-position:center}
.c-panel .caption .cap-sum{margin-top:0}
.c-panel .caption .cap-meta{margin:14px 0 0}
.c-panel .term-foot{flex-wrap:wrap;gap:8px 16px}
.c-panel .term-foot .now{flex:1 1 320px}
.c-panel .term-foot .now-name{white-space:normal;line-height:1.5;padding-block:12px}
.c-steps{display:flex;gap:4px;margin-left:auto}
.c-steps a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border-radius:4px;color:var(--muted);font:400 12.5px/1 var(--mono);transition:background .18s var(--ease),color .18s var(--ease)}
.c-steps a:hover{background:var(--tile);color:var(--film)}
.c-steps span{color:var(--steel)}
.c-anchor{display:block;height:0}

/* 10-07j the write-up: the paragraphs and bullets that explain the study, typed in with the gold caret */
.write{padding:clamp(20px,1.8vw,30px) clamp(20px,2vw,32px) clamp(22px,2vw,32px);color:var(--plate);font-size:clamp(14.5px,.95vw,16px);line-height:1.65}
.write p{max-width:52ch;text-wrap:pretty}
.write p+p{margin-top:12px}
.write .write-p+.write-li{margin-top:16px}
.write .write-li{position:relative;padding-left:20px;margin-top:8px}
.write .write-li::before{content:"›";position:absolute;left:2px;top:0;color:var(--steel);font:400 1em/1.65 var(--mono)}
.write .write-meta{margin-top:18px;color:var(--muted);font:400 12.5px/1.5 var(--mono)}
.write .log-caret{display:inline-block;vertical-align:-2px;margin-left:5px;height:1em}
.write p:not(.is-in){display:none}
.cases:not(.is-js) .write p{display:block}

/* the two faces (js only: without it the gallery and every study stay printed one under another) */
.cases.is-js .c-panel{display:none}
.cases.is-js.is-study .c-face{display:none}
.cases.is-js.is-study .c-panel.is-open{display:block;border-top:0}
.cases.is-js.is-study .term-top .lamp{background:var(--gold)}
.cases.is-js .c-panel.is-open,.cases.is-js .c-face.is-back{animation:c-in .45s var(--out) both}
@keyframes c-in{from{opacity:0;transform:translateY(6px)}}
/* the morph (browsers with view transitions): the picked screen grows into the study's screen, the window resizes */
::view-transition-group(c-shot),::view-transition-group(c-win){animation-duration:.6s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(c-shot),::view-transition-new(c-shot){height:100%;object-fit:cover;object-position:top center}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}
html.c-vt .cases.is-js .c-panel.is-open,html.c-vt .cases.is-js .c-face.is-back{animation:none}

@media (max-width:1200px){ .c-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:1000px){
  .c-head{flex-direction:column;align-items:stretch;gap:0}
  .c-head .tabs{margin:0 0 0 -18px;max-width:calc(100% + 18px)}
  .c-head>*{min-width:0}
  .c-hint{display:none}
  .cases .term-head{align-items:stretch}
}
@media (max-width:900px){
  .c-panel .screen{aspect-ratio:16/9;min-height:0}
}
@media (max-width:1000px){ .c-panel .side{max-height:none;overflow:visible} .c-panel .screen{aspect-ratio:16/9;min-height:0;max-height:none} }
@media (max-width:640px){
  .c-grid{grid-template-columns:minmax(0,1fr);padding-inline:16px}
  .c-head,.write{padding-inline:18px}
  .c-steps{margin-left:-12px}
}
@media (prefers-reduced-motion:reduce){
  .cases.is-js .c-panel.is-open,.cases.is-js .c-face.is-back{animation:none}
  .c-item .c-scan{display:none}
}

/* ── 10-07k THE BAND (James: "should we even still have this card or just make it a band across the page?" → "do it,
   make it a band"): the window's box is gone. The case studies sit on the page ground at the page gutter, between
   dashed seams like the other sections; inside, one hairline between the write-up and the plate. */
/* the band carries the window's old ground edge to edge (James: "the same color as the card was though for differentiation") */
.work{padding:0 var(--gutter) clamp(64px,8vw,120px);background:var(--well)}
.cases.term{max-width:none;border:0;border-radius:0;background:none;box-shadow:none}
.cases .term-head{padding:clamp(48px,5vw,80px) 0 0;border-bottom:1px dashed var(--dash)}
.c-grid{padding:clamp(28px,2.6vw,44px) 0 0}
.c-head{padding:clamp(40px,4vw,64px) 0 0;border-bottom:1px dashed var(--dash)}
.c-head .tabs{margin-right:0}
.c-panel,.cases.is-js.is-study .c-panel.is-open{border-top:0}
.c-panel .side{border-right:1px solid var(--rule)}
.write{padding-left:0}
.c-panel{--fit:calc(100svh - 68px - 260px)}
@media (max-width:1000px){ .c-panel .side{border-right:0} .write{padding-left:0} }
@media (max-width:640px){ .c-grid,.c-head{padding-inline:0} .write{padding-inline:0 18px} }