/* MALINYX V2 — "Objects, engineered."  Classy + warm: deep ink, sunset glass, thin type, slow motion.
   The sky (sun, glass slats, grain) and the turntable/scrub mechanics come from the approved /objects hero (3 Oct 2026). */
:root{
  --ink:#0e0a09; --ink2:#17110f; --ink3:#221a17; --paper:#f4ece2; --paper2:#eadfd1;
  --ivory:#f3ebe0; --ivory-m:rgba(243,235,224,.64); --ivory-f:rgba(243,235,224,.38); --line-l:rgba(243,235,224,.14);
  --text:#2b201b; --muted:#6d5f56; --line-d:rgba(43,32,27,.14);
  --s1:#5e1712; --s2:#a8301f; --s3:#dc5a35; --s4:#f08f52; --s5:#f7c47f; --s6:#fbe2b4; --gold:#d8a862;
  --bg:var(--ink); --fg:var(--ivory); --fg-m:var(--ivory-m); --line:var(--line-l);
  --ease:cubic-bezier(.16,1,.3,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --sans:"Inter Tight",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gut:clamp(16px,4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-weight:300;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  transition:background-color 1.1s var(--ease),color 1.1s var(--ease)}
body.paper{--bg:var(--paper);--fg:var(--text);--fg-m:var(--muted);--line:var(--line-d)}
img,canvas,svg,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--s4);color:#130d0c}
:root{--focus:var(--s4)}body.paper{--focus:var(--s2)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
.mono{font-family:var(--mono);font-weight:400;letter-spacing:.08em;text-transform:uppercase;font-size:11px}
.muted{color:var(--fg-m)}
.wrap{width:min(1400px,100% - 2*var(--gut));margin-inline:auto}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-80px;z-index:200;background:var(--ivory);color:var(--ink);padding:10px 14px;border-radius:999px;font-size:13px;text-decoration:none}
.skip:focus{top:12px}

/* ---------- bar: one line ---------- */
.bar{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--gut);color:var(--fg);pointer-events:none;transition:color 1.1s var(--ease)}
.bar::before{content:"";position:absolute;inset:0 0 -28px 0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 88%,transparent) 0%,color-mix(in srgb,var(--bg) 52%,transparent) 58%,transparent 100%);transition:background 1.1s var(--ease)}
.bar>*{pointer-events:auto}
.bar .mark{display:inline-flex;align-items:center;gap:10px;font-weight:500;letter-spacing:.2em;font-size:12.5px;text-decoration:none}
.bar .mark svg{width:24px;height:24px}
.bar nav{display:flex;align-items:center;gap:26px}
.bar nav a{text-decoration:none;font-size:13px;opacity:.82;transition:opacity .4s}
.bar nav a:hover,.bar nav a[aria-current="page"]{opacity:1}
.bar nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.bar .hire{padding:8px 14px;border-radius:999px;border:1px solid currentColor;opacity:1!important}
@media (max-width:640px){.bar nav{gap:16px}.bar nav .opt{display:none}}

/* ---------- sky: sun + refractive glass + grain ---------- */
.sky{position:absolute;inset:0;z-index:-1;overflow:hidden;transform:translate3d(0,calc(var(--hp,0)*-12vh),0)}
.sun{position:absolute;width:min(78vmin,860px);aspect-ratio:1;right:6vw;top:50%;translate:0 -52%;border-radius:50%;
  background:radial-gradient(circle at 42% 40%,var(--s6) 0%,var(--s5) 18%,var(--s4) 36%,var(--s3) 54%,var(--s2) 70%,var(--s1) 84%,transparent 100%);
  filter:blur(6px) saturate(1.05);animation:breathe 11s var(--ease) infinite alternate;transform:translate3d(calc(var(--mx,0)*-14px),calc(var(--my,0)*-10px),0)}
@keyframes breathe{from{scale:1;opacity:.9}to{scale:1.06;opacity:1}}
.slats{position:absolute;inset:-30% -20%;display:flex;gap:clamp(10px,1.6vmin,22px);justify-content:center;align-items:center;
  transform:rotate(calc(-36deg + var(--hp,0)*14deg)) translate3d(calc(var(--mx,0)*18px),calc(var(--my,0)*12px),0) scale(calc(1 + var(--hp,0)*.25))}
.slats i{flex:0 0 clamp(54px,9.5vmin,128px);height:150%;border-radius:999px;
  background:linear-gradient(90deg,rgba(255,255,255,.035),rgba(255,214,170,.012) 40%,rgba(255,120,70,.03));
  -webkit-backdrop-filter:blur(28px) saturate(1.8) brightness(1.22);backdrop-filter:blur(28px) saturate(1.8) brightness(1.22);
  box-shadow:inset 1.5px 0 0 rgba(255,236,210,.2),inset -1px 0 0 rgba(255,255,255,.03);animation:drift var(--dur,22s) ease-in-out var(--del,0s) infinite alternate}
@keyframes drift{from{transform:translateY(-4%)}to{transform:translateY(4%)}}
.grain{position:absolute;inset:-50%;z-index:2;pointer-events:none;opacity:.15;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='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.9'/></svg>");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.sky.low .sun{right:auto;left:50%;top:auto;bottom:-64%;translate:-50% 0;width:min(110vmin,1200px)}
.sky.low .slats{inset:-60% -10% -10% -10%}
.sky.tint .sun{background:radial-gradient(circle at 42% 40%,var(--t6,var(--s6)) 0%,var(--t5,var(--s5)) 20%,var(--t4,var(--s4)) 40%,var(--t3,var(--s3)) 58%,var(--t2,var(--s2)) 74%,var(--t1,var(--s1)) 86%,transparent 100%)}

/* ---------- hero (home) ---------- */
.hero{position:relative;height:100svh;min-height:640px;background:var(--ink);color:var(--ivory);overflow:hidden;isolation:isolate}
.hero-copy{position:absolute;left:clamp(16px,5vw,72px);right:clamp(16px,5vw,72px);bottom:clamp(40px,9vh,110px);z-index:3;
  transform:translate3d(0,calc(var(--hp,0)*-18vh),0);opacity:calc(1 - var(--hp,0)*1.4)}
.kick{color:rgba(246,239,230,.62);margin-bottom:clamp(14px,2.4vh,24px)}
.hero h1,.display{font-weight:200;font-size:clamp(52px,10.4vw,176px);line-height:.9;letter-spacing:-.045em}
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.2em 0 .18em;margin:-.2em 0 -.18em}
.w>span{display:inline-block;transform:translateY(105%);animation:rise 1.5s var(--ease) forwards;animation-delay:calc(.25s + var(--i,0)*.12s)}
@keyframes rise{to{transform:none}}
.hero .sub{margin-top:clamp(18px,3vh,30px);display:flex;flex-wrap:wrap;gap:16px 40px;align-items:end;justify-content:space-between}
.hero .sub p{max-width:560px;font-size:clamp(15px,1.25vw,18px);color:rgba(246,239,230,.84);opacity:0;animation:fade 1.4s var(--ease) 1s forwards}
.hero .ctas{display:flex;flex-wrap:wrap;gap:10px;opacity:0;animation:fade 1.4s var(--ease) 1.25s forwards}
@keyframes fade{to{opacity:1}}
.cue{position:absolute;left:50%;bottom:22px;z-index:3;translate:-50% 0;width:1px;height:44px;background:linear-gradient(rgba(246,239,230,0),rgba(246,239,230,.8));animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:999px;border:1px solid currentColor;text-decoration:none;font-size:14px;font-weight:400;
  transition:background .5s var(--ease),color .5s var(--ease),transform .7s var(--spring)}
.btn:hover{transform:translateY(-2px)}
.btn.solid{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
.btn.solid:hover{background:var(--s5);border-color:var(--s5)}
.btn .arr{transition:transform .6s var(--spring)}
.btn:hover .arr{transform:translateX(4px)}
body.paper .btn.solid{background:var(--text);color:var(--paper);border-color:var(--text)}

/* dusk band: paper back to ink through the sunset (used on /about/) */
.dusk{height:34vh;background:linear-gradient(0deg,var(--ink) 0%,#2a1210 22%,var(--s1) 40%,var(--s3) 62%,var(--s5) 82%,var(--paper) 100%)}

/* ---------- section scaffolding ---------- */
.sec{position:relative;padding:clamp(70px,12vh,150px) 0}
.eyebrow{display:flex;justify-content:space-between;gap:16px;align-items:baseline;border-top:1px solid var(--line);padding-top:14px;color:var(--fg-m)}
h2.big{font-weight:200;font-size:clamp(44px,7vw,112px);line-height:.92;letter-spacing:-.045em;margin-top:clamp(18px,3vh,32px)}
h2.mid{font-weight:200;font-size:clamp(34px,4.6vw,72px);line-height:.95;letter-spacing:-.04em}
.lead{font-size:clamp(17px,1.4vw,21px);max-width:620px;color:var(--fg-m);margin-top:clamp(16px,2.4vh,26px)}
/* hidden-until-revealed only while v2.js runs (the head script adds .js and removes it if v2.js never starts) */
.js [data-reveal]{opacity:0;transform:translate3d(0,26px,0);transition:opacity 1.2s var(--ease),transform 1.4s var(--ease);transition-delay:var(--d,0s)}
.js [data-reveal].in{opacity:1;transform:none}

/* ---------- the collection ring (rotation) ---------- */
.ring-sec{position:relative;height:340vh;background:var(--ink);color:var(--ivory)}
.ring-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;padding:clamp(76px,11vh,110px) var(--gut) clamp(22px,4vh,44px)}
.ring-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}
.ring-head h2{font-weight:200;font-size:clamp(34px,4.8vw,76px);letter-spacing:-.045em;line-height:.95}
.ring-stage{position:relative;perspective:1700px;perspective-origin:50% 38%;display:grid;place-items:center;touch-action:pan-y;cursor:grab}
.ring-stage:active{cursor:grabbing}
.ring{position:relative;width:var(--cw);height:calc(var(--cw) * 1.22);transform-style:preserve-3d;transform:translateZ(calc(var(--R) * -1)) rotateX(-6deg) rotateY(var(--ang,0deg))}
.ring .item{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(calc(var(--i) * var(--step))) translateZ(var(--R));text-decoration:none;color:inherit}
.ring .item .face{position:absolute;inset:0;border-radius:clamp(18px,2vw,30px);overflow:hidden;background:var(--room,#16110f);
  box-shadow:0 50px 90px -60px rgba(0,0,0,.9),inset 0 0 0 1px rgba(243,235,224,.08);transition:filter .6s var(--ease),opacity .6s var(--ease);
  filter:brightness(calc(.35 + var(--front,0) * .65)) saturate(calc(.6 + var(--front,0) * .4));backface-visibility:hidden}
.ring .item canvas,.ring .item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* each card paints a ~20 px preview of its picture at once (blurred by scaling), and the picture fades in over it (14 Oct 2026) */
.ring .item .face{background:var(--lq,none) center/cover no-repeat,var(--room,#16110f)}.ring .item .face.lqc{background-size:contain,auto}
.js .ring .item img{opacity:0;transition:opacity .5s var(--ease)}.js .ring .item img.ok{opacity:1}
.ring .item .cap{position:absolute;left:16px;right:16px;bottom:14px;transform:translateZ(2px);display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  opacity:calc(var(--front,0) * 1.2 - .2);color:var(--ivory);text-shadow:0 1px 14px rgba(0,0,0,.6)}
.ring .item .cap b{font-weight:300;font-size:clamp(18px,1.8vw,26px);letter-spacing:-.02em}
.ring-foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:16px}
.ring-foot .now b{display:block;font-weight:200;font-size:clamp(30px,4vw,58px);letter-spacing:-.04em;line-height:1}
.ring-foot .now span{display:block;margin-top:8px;color:var(--ivory-m);font-size:14px;max-width:420px}
.ring-foot .dots{display:flex;gap:6px;justify-self:center}
.ring-foot .dots i{width:6px;height:6px;border-radius:50%;background:var(--ivory-f);transition:background .4s,transform .4s}
.ring-foot .dots i.on{background:var(--s5);transform:scale(1.5)}
.ring-foot .go{justify-self:end}
@media (max-width:760px){.ring-foot{grid-template-columns:1fr}.ring-foot .dots,.ring-foot .go{justify-self:start}}

/* ---------- stages: turntables + scrubs ---------- */
.stage{position:relative;aspect-ratio:var(--ar,1);border-radius:clamp(22px,2.4vw,36px);overflow:hidden;background:var(--room,#15100e);touch-action:pan-y;cursor:grab;
  transform:perspective(1400px) rotateX(calc(var(--ty,0)*-3deg)) rotateY(calc(var(--tx,0)*4deg));transition:transform 1.2s var(--spring);will-change:transform;
  box-shadow:0 50px 100px -60px rgba(0,0,0,.8),inset 0 0 0 1px rgba(243,235,224,.06)}
.stage:active{cursor:grabbing}
.stage canvas{position:absolute;inset:0;width:100%;height:100%}
.stage img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s}
.stage.ready img.poster{opacity:0}
.stage .hint{position:absolute;left:50%;bottom:16px;translate:-50% 0;display:flex;gap:10px;align-items:center;padding:8px 14px 8px 12px;border-radius:999px;
  background:rgba(20,14,12,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--ivory);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.stage .hint svg{width:22px;height:12px}
.stage .hint{white-space:nowrap}.stage .hint .ht{display:none}
@media (pointer:coarse){.stage .hint .hk{display:none}.stage .hint .ht{display:inline}}   /* phones: no arrow keys to mention */
.case-hero > .sky,.next > .sky{bottom:-16vh}   /* the sky rises with scrolling (up to 14.4vh): taller than the hero, so no bare band opens at its foot */
.stage.touched .hint,.stage.still .hint{opacity:0;transform:translateY(8px)}
.stage.still{cursor:default}
.stage .load{position:absolute;right:16px;top:16px;width:26px;height:26px;transition:opacity .6s}
.stage .load circle{fill:none;stroke-width:2.2}
.stage .load .bgc{stroke:rgba(243,235,224,.14)} .stage .load .fg{stroke:var(--ivory);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .3s}
.stage.ready .load{opacity:0}
.stage .layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--ease)}
.stage .layer.on{opacity:1}
.wipe{position:absolute;inset:0;pointer-events:none;z-index:4;background:linear-gradient(105deg,transparent 0 40%,rgba(255,240,220,.4) 46%,rgba(255,200,150,.25) 50%,transparent 56% 100%);transform:translateX(-120%)}
.wipe.go{animation:wipe 1.1s var(--ease)}
@keyframes wipe{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
.ctrl{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{padding:9px 16px;border-radius:999px;border:1px solid var(--line);font-size:13.5px;transition:background .5s,color .5s,border-color .5s,transform .6s var(--spring)}
.chip:hover{transform:translateY(-2px)}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chip .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:1px;background:var(--c)}
.note{margin-top:16px;color:var(--fg-m);font-size:13.5px;max-width:560px}

.scrub{position:relative;height:var(--len,300vh)}
.scrub .pin{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(24px,4vw,64px);padding:clamp(70px,10vh,100px) clamp(56px,7vw,120px) clamp(24px,5vh,56px) clamp(16px,5vw,72px);overflow:hidden}
.scrub .frame{grid-column:2;grid-row:1;position:relative;height:min(78svh,calc(58vw / var(--ar,1)));aspect-ratio:var(--ar,1);border-radius:clamp(22px,2.4vw,36px);overflow:hidden;background:var(--room,#15100e);box-shadow:0 50px 100px -60px rgba(0,0,0,.8)}
.scrub canvas{position:absolute;inset:0;width:100%;height:100%}
.scrub .cap{position:relative;grid-column:1;grid-row:1;align-self:center;min-height:9em;z-index:2}
.scrub .cap p{position:absolute;top:0;left:0;right:0;max-width:440px;font-size:clamp(20px,2.1vw,32px);font-weight:300;letter-spacing:-.02em;line-height:1.15;opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.scrub .cap p.on{opacity:1;transform:none}
.scrub .cap p .mono{display:block;margin-bottom:10px;color:var(--fg-m)}
.scrub .meter{position:absolute;right:clamp(16px,5vw,72px);top:50%;translate:0 -50%;width:2px;height:min(40vh,320px);background:var(--line);border-radius:2px}
.scrub .meter i{position:absolute;inset:0 0 auto 0;height:calc(var(--p,0)*100%);background:var(--fg);border-radius:2px}
.scrub .label{position:absolute;left:clamp(16px,5vw,72px);top:clamp(80px,12vh,120px);color:var(--fg-m)}
@media (max-width:860px){.scrub .pin{grid-template-columns:1fr;padding:72px 16px 20px;align-content:center}.scrub .frame{grid-column:1;height:auto;width:min(100%,calc(62svh * var(--ar,1)));margin-inline:auto}
  .scrub .cap{grid-column:1;grid-row:1;align-self:end;margin:0 10px 12px;min-height:0;height:6.4em}.scrub .cap p{top:auto;bottom:0;padding:12px 14px;border-radius:16px;background:rgba(20,14,12,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:18px;color:var(--ivory)}
  .scrub .meter{right:6px}.scrub .label{top:112px;left:auto;right:16px}.scrub .cap p .mono{color:var(--ivory)}}
@media (max-width:860px) and (max-height:500px){.scrub .label{right:28px}}   /* phone on its side: clear of the meter */

/* ---------- object rooms (home + case) ---------- */
.name{font-weight:200;font-size:clamp(60px,8.6vw,148px);line-height:.86;letter-spacing:-.05em;margin:14px 0 6px}
.tag{font-size:clamp(17px,1.5vw,21px);font-weight:400;letter-spacing:-.01em}
.lede{margin-top:22px;font-size:clamp(16px,1.2vw,18px);max-width:580px;color:var(--fg-m)}
.facts{display:grid;grid-template-columns:repeat(2,1fr);margin-top:34px;border-top:1px solid var(--line)}
.facts>div{padding:18px 14px 18px 0;border-bottom:1px solid var(--line)}
.facts>div:nth-child(odd){padding-right:18px;border-right:1px solid var(--line)}
.facts>div:nth-child(even){padding-left:18px}
.facts dd{font-weight:200;font-size:clamp(32px,3.2vw,50px);letter-spacing:-.04em;line-height:1}
.facts dt{margin-top:8px;color:var(--fg-m);font-size:13.5px}
.lvl{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:5px;border:1px solid var(--line);color:var(--fg-m)}
.lvl.ai{border-style:dashed}
.then{margin-top:36px;border-radius:24px;overflow:hidden;position:relative;background:#1a1311;aspect-ratio:16/11}
.then img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 1s var(--ease),transform 1.6s var(--ease)}
.then img.new{opacity:0;transform:scale(1.03)}
.then.now img.new{opacity:1;transform:none}
.then.now img.old{opacity:0}
.then .tog{position:absolute;left:14px;top:14px;display:flex;padding:4px;border-radius:999px;background:rgba(20,14,12,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.then .tog button{padding:7px 14px;border-radius:999px;color:#f6efe6;font-family:var(--mono);font-size:11px;letter-spacing:.08em;transition:background .5s,color .5s}
.then .tog button[aria-pressed="true"]{background:#f6efe6;color:#1a1311}
.then figcaption{position:absolute;left:14px;right:auto;bottom:14px;max-width:calc(100% - 28px);padding:6px 10px;border-radius:10px;background:rgba(14,10,9,.68);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:rgba(246,239,230,.94);font-size:13px}

/* ---------- work cards ---------- */
.grid-work{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,1.8vw,26px);margin-top:clamp(28px,5vh,56px)}
.wcard{grid-column:span 4;display:block;text-decoration:none;color:inherit;transform:perspective(1200px) rotateX(calc(var(--ty,0)*-4deg)) rotateY(calc(var(--tx,0)*5deg));transition:transform 1s var(--spring)}
@media (max-width:1000px){.wcard{grid-column:span 6}}
@media (max-width:620px){.wcard{grid-column:1 / -1}}
.wcard .pic{position:relative;border-radius:clamp(18px,2vw,28px);overflow:hidden;aspect-ratio:var(--ar,4/5);background:var(--room,#1a1412)}
.wcard .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease),opacity .8s}
.wcard .pic img.alt{opacity:0}
.wcard:hover .pic img{transform:scale(1.04)}
.wcard:hover .pic img.alt{opacity:1}
.wcard .pic .badge{position:absolute;left:12px;top:12px;padding:5px 9px;border-radius:999px;background:rgba(20,14,12,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ivory)}
.wcard .meta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:14px 4px 0}
.wcard .meta b{font-weight:300;font-size:clamp(20px,1.8vw,28px);letter-spacing:-.025em}
.wcard p{padding:4px 4px 0;color:var(--fg-m);font-size:14.5px;max-width:52ch}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}


/* ---------- method / capabilities ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);margin-top:clamp(36px,6vh,70px);border-top:1px solid var(--line)}
@media (max-width:900px){.steps{grid-template-columns:1fr}}
.steps li{padding:22px 20px 26px 0;border-bottom:1px solid var(--line)}
.steps li b{display:block;font-weight:200;font-size:44px;letter-spacing:-.04em;background:linear-gradient(90deg,var(--s5),var(--s3));-webkit-background-clip:text;background-clip:text;color:transparent}
.steps li span{display:block;margin-top:6px;font-weight:500;font-size:15px}
.steps li p{margin-top:8px;color:var(--fg-m);font-size:14px;max-width:260px}
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(30px,5vh,56px);border-top:1px solid var(--line)}
@media (max-width:900px){.caps{grid-template-columns:1fr}}
.caps li{padding:22px 22px 24px 0;border-bottom:1px solid var(--line)}
.caps li b{font-weight:300;font-size:clamp(22px,2vw,30px);letter-spacing:-.025em}
.caps li p{margin-top:8px;color:var(--fg-m);font-size:14.5px}
.caps li small{display:block;margin-top:10px}

/* ---------- case page ---------- */
.case-hero{position:relative;min-height:100svh;background:var(--ink);color:var(--ivory);overflow:hidden;isolation:isolate;display:grid;align-items:end;padding:clamp(90px,14vh,140px) 0 clamp(36px,7vh,80px)}
.case-hero .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end}
@media (max-width:960px){.case-hero .grid{grid-template-columns:1fr}}
.case-hero h1{font-weight:200;font-size:clamp(60px,10vw,170px);line-height:.86;letter-spacing:-.05em}
.case-hero .tag{margin-top:14px;color:rgba(246,239,230,.86)}
.case-hero .meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;color:rgba(246,239,230,.6)}
.case-hero .stage-wrap{position:relative}
.case-hero .hero-img{border-radius:clamp(22px,2.4vw,36px);overflow:hidden;background:var(--room,#15100e);box-shadow:0 50px 100px -60px rgba(0,0,0,.8)}
.case-hero .hero-img img{width:100%;height:auto;aspect-ratio:var(--ar,4/5);object-fit:cover;transform:scale(calc(1.06 - var(--hp,0)*.06));transition:transform .2s linear}
.prose{max-width:720px}
.prose p{font-size:clamp(17px,1.35vw,20px);color:var(--fg-m)}
.prose p+p{margin-top:1em}
.prose p strong{color:var(--fg);font-weight:400}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,90px)}
@media (max-width:900px){.two{grid-template-columns:1fr}}
.list li{padding:14px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:14px;font-size:15.5px}
.list li .mono{color:var(--fg-m);padding-top:3px}
.next{display:block;position:relative;min-height:70svh;background:var(--ink);color:var(--ivory);overflow:hidden;isolation:isolate;text-decoration:none}
.next .wrap{position:relative;z-index:3;padding:clamp(80px,14vh,150px) 0}
.next h2{font-weight:200;font-size:clamp(56px,9vw,150px);letter-spacing:-.05em;line-height:.9}
.next .arr{display:inline-block;transition:transform .8s var(--spring)}
.next:hover .arr{transform:translateX(16px)}
.dossier{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

/* lightbox: see "V2.1 hiring system" below */

/* ---------- about / contact ---------- */
.contact-big{font-weight:200;font-size:clamp(40px,7.6vw,130px);letter-spacing:-.05em;line-height:.95;text-decoration:none;display:inline-block;background:linear-gradient(90deg,var(--s6),var(--s4) 50%,var(--s3));-webkit-background-clip:text;background-clip:text;color:transparent}
.contact-big:hover{filter:brightness(1.1)}
.cv li{display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.cv li .mono{color:var(--fg-m);padding-top:4px}
.cv li b{font-weight:400}
.cv li p{color:var(--fg-m);font-size:14.5px;margin-top:4px}
@media (max-width:620px){.cv li{grid-template-columns:1fr}}
.foot{position:relative;z-index:3;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding:22px var(--gut);border-top:1px solid var(--line-l);color:rgba(246,239,230,.7);font-size:13px;background:var(--ink)}
.foot a{text-decoration:none;border-bottom:1px solid rgba(246,239,230,.3)}
.endsky{position:relative;height:clamp(240px,40vh,420px);overflow:hidden;background:var(--ink);isolation:isolate}

/* cursor */
.cursor{position:fixed;left:0;top:0;z-index:150;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--ivory);mix-blend-mode:difference;pointer-events:none;
  transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease);display:grid;place-items:center;font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:#000;opacity:0}
.cursor.on{opacity:1}
.cursor.big{width:74px;height:74px;margin:-37px 0 0 -37px}
@media (hover:none){.cursor{display:none}}

/* page transitions */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.6s;animation-timing-function:var(--ease)}
::view-transition-group(hero-obj){animation-duration:.7s;animation-timing-function:var(--ease)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .w>span{transform:none}.hero .sub p,.hero .ctas{opacity:1}
  [data-reveal]{opacity:1;transform:none}
  .ring-sec{height:auto}.ring-pin{position:relative;height:100svh;min-height:640px}
}

/* ---------- V2 build additions ---------- */
.facts>div{display:flex;flex-direction:column}
.facts dd{order:-1}
.facts dt .lvl{display:table}
.stage img.contain,.case-hero .hero-img img.contain,.wcard .pic img.contain,.ring .item img.contain{object-fit:contain}
.wcard .pic img.contain{padding:7%}
.ring .item{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
.ring .item img{-webkit-user-drag:none}
.scrub .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wcard .pic.typo{display:flex;align-items:flex-end;padding:20px;background:radial-gradient(120% 90% at 78% 72%,var(--t6) 0%,var(--t5) 14%,var(--t4) 30%,var(--t3) 46%,var(--t2) 64%,var(--t1) 82%,#0e0a09 100%);transition:filter 1.2s var(--ease)}
.wcard:hover .pic.typo{filter:saturate(1.15) brightness(1.06)}
.wcard .pic.typo .tn{font-weight:200;font-size:clamp(32px,3.2vw,52px);letter-spacing:-.045em;line-height:.9;color:#fbf3ea}
.case-hero h1{font-size:calc(clamp(52px,9.2vw,164px) * var(--k,1))}
@media (max-width:620px){.case-hero h1{overflow-wrap:anywhere}}
.case-hero .grid.solo{grid-template-columns:1fr}
.case-hero .kick{color:rgba(246,239,230,.62);margin-bottom:18px}
.case-hero .status{margin-top:20px}
.case-hero .lvl{color:rgba(246,239,230,.82);border-color:rgba(246,239,230,.3)}
.case-hero .chip{border-color:rgba(246,239,230,.2)}
.case-hero .chip[aria-pressed="true"]{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
.case-hero .note{color:rgba(246,239,230,.62)}
.case-hero .stage-wrap .stage{max-height:66svh;margin-inline:auto;width:min(100%,calc(66svh * var(--ar,1)))}
.case-hero .stage-wrap .ctrl,.case-hero .stage-wrap .note{width:min(100%,calc(66svh * var(--ar,1)));margin-inline:auto}
.case-hero .stage-wrap .ctrl{justify-content:flex-start}
.case-hero .hero-img{max-height:78svh;width:min(100%,calc(78svh * var(--ar,1)));margin-inline:auto}
.case-hero .hero-img img.contain{padding:5%}
.work-hero{min-height:74svh}
.name{font-size:calc(clamp(60px,8.6vw,148px) * var(--k,1))}
.next h2{font-size:calc(clamp(56px,9vw,150px) * var(--k,1))}
.lede-big{font-size:clamp(21px,1.9vw,29px)!important;font-weight:300;letter-spacing:-.015em;line-height:1.3;color:var(--fg)!important;margin-bottom:1.1em}
.sec .two{margin-top:clamp(28px,5vh,56px)}
.h3{font-weight:300;font-size:clamp(22px,2vw,30px);letter-spacing:-.025em;margin-bottom:10px}
.grad{background:linear-gradient(90deg,var(--s6),var(--s4) 45%,var(--s3));-webkit-background-clip:text;background-clip:text;color:transparent}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.tags span{padding:7px 12px;border:1px solid var(--line);border-radius:999px;font-size:13.5px}
.cv li>div{min-width:0}
.prov .lead{max-width:640px}
.hire .lead{max-width:640px}
.endsky .sky{z-index:0}
.qa [data-reveal]{opacity:1!important;transform:none!important}
.ring .item .cap .mono{white-space:nowrap;color:rgba(243,235,224,.7)}
.qa body{transition:none!important}
.contact-big{line-height:1.08;padding-bottom:.14em;overflow-wrap:normal}
@media (max-width:360px){.contact-big{font-size:34px}}
.bar .hire{white-space:nowrap}
body.paper .steps li b{background-image:linear-gradient(90deg,var(--s3),var(--s2))}
.qa .hero .sub p,.qa .hero .ctas{opacity:1;animation:none}
/* hero orbit badge: slow rotating type */
.orbit{position:absolute;right:clamp(16px,5vw,72px);top:clamp(86px,15vh,160px);z-index:3;width:clamp(92px,8.6vw,128px);aspect-ratio:1;display:grid;place-items:center;color:var(--ivory);text-decoration:none;
  opacity:0;animation:fade 1.4s var(--ease) 1.5s forwards}
.orbit svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 30s linear infinite;overflow:visible}
.orbit text{font-family:var(--mono);font-size:8.4px;letter-spacing:.26em;text-transform:uppercase;fill:currentColor}
.orbit span{font-size:18px;transition:transform .7s var(--spring)}
.orbit:hover span{transform:translateY(5px)}
.orbit:hover svg{animation-duration:9s}
@keyframes spin{to{transform:rotate(360deg)}}
.qa .orbit{opacity:1;animation:none}
.cursor.big{mix-blend-mode:normal;background:var(--fg);color:var(--bg);box-shadow:0 10px 30px rgba(0,0,0,.25)}
/* legibility over the sun */
.hero .kick,.hero .sub p,.case-hero .kick,.case-hero .tag,.case-hero .meta,.case-hero .note{text-shadow:0 1px 18px rgba(14,10,9,.55)}
.case-hero .lvl{background:rgba(14,10,9,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@media (max-width:960px){.case-hero .sun{top:auto;bottom:-8%;right:50%;translate:50% 0;width:min(118vmin,820px)}}
.case-hero .chip:not([aria-pressed="true"]){background:rgba(14,10,9,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.case-hero .note{color:rgba(246,239,230,.86);text-shadow:0 1px 12px rgba(14,10,9,.85),0 0 2px rgba(14,10,9,.6)}
@media (max-width:640px){.hero .kick{color:rgba(246,239,230,.82)}}

/* ---------- Cross-Tool palette demo (case hero) ---------- */
.palette{position:relative;border-radius:22px;padding:18px;background:rgba(14,12,12,.74);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9),inset 0 0 0 1px rgba(243,235,224,.1);color:var(--ivory);max-width:560px;margin-left:auto}
.pal-top{display:flex;justify-content:space-between;gap:12px;color:rgba(243,235,224,.78);margin-bottom:12px}
.pal-input{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:rgba(243,235,224,.07);box-shadow:inset 0 0 0 1px rgba(243,235,224,.14);transition:box-shadow .4s}
.pal-input:focus-within{box-shadow:inset 0 0 0 1px var(--t4,#4fa49b)}
.pal-input svg{width:18px;height:18px;color:rgba(243,235,224,.6);flex:none}
.pal-input input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ivory);font:300 clamp(20px,2vw,26px)/1.2 var(--sans);letter-spacing:-.01em}
.pal-tries{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px}
.pal-tries .mono{color:rgba(243,235,224,.74);margin-right:4px}
.palette .chip{padding:5px 10px;font-size:12.5px;border-color:rgba(243,235,224,.18);background:none;color:var(--ivory)}
.pal-results{margin-top:14px;display:grid;gap:6px}
.pal-results li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(60px,1fr) auto;gap:12px;align-items:center;padding:9px 12px;border-radius:12px;background:rgba(243,235,224,.04);transition:background .4s,box-shadow .4s}
.pal-results li.win{background:rgba(79,164,155,.16);box-shadow:inset 0 0 0 1px rgba(79,164,155,.5)}
.pal-results .lab{font-size:14.5px}
.pal-results .pal-meter{position:relative;height:4px;border-radius:4px;background:rgba(243,235,224,.1)}
.pal-results .pal-meter i{position:absolute;inset:0 auto 0 0;border-radius:4px;background:linear-gradient(90deg,var(--t3,#2a6a64),var(--t5,#a9dcd5));transition:width .5s var(--ease)}
.pal-results .pal-meter::after{content:"";position:absolute;left:45%;top:-4px;bottom:-4px;width:1px;background:rgba(243,235,224,.5)}
.pal-results .sc{color:rgba(243,235,224,.6)}
.pal-verdict{margin-top:14px;font-size:14px;line-height:1.5;color:rgba(243,235,224,.82);min-height:4.5em}
.pal-verdict b{font-weight:500;margin-right:6px;color:#fff}
.palette[data-kind="run"] .pal-verdict b{color:#8fe3d8}
.palette[data-kind="ambiguous"] .pal-verdict b,.palette[data-kind="decline"] .pal-verdict b{color:#f2c27a}
.palette[data-kind="refuse"] .pal-verdict b{color:#f0a37a}
.pal-foot{margin-top:10px;color:rgba(243,235,224,.74);font-size:11.5px;line-height:1.5}

/* ---------- Field Notes: hero cycler + grid ---------- */
.notes-cycle{position:relative;min-height:350px;max-width:520px;margin-left:auto;perspective:1200px}
.notes-cycle .nc{position:absolute;inset:0 0 56px 0;padding:28px;border-radius:22px;background:rgba(16,13,30,.7);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:inset 3px 0 0 var(--nc),inset 0 0 0 1px rgba(243,235,224,.1),0 40px 90px -50px rgba(0,0,0,.9);color:var(--ivory);
  opacity:0;transform:rotateX(16deg) translateY(18px);transform-origin:50% 0;transition:opacity .9s var(--ease),transform 1.2s var(--ease);pointer-events:none}
.notes-cycle .nc.on{opacity:1;transform:none;pointer-events:auto}
.notes-cycle .nc .mono{color:rgba(243,235,224,.8)}
.notes-cycle .nc h3{font-weight:200;font-size:clamp(28px,2.8vw,42px);letter-spacing:-.03em;line-height:1.02;margin:14px 0 12px}
.notes-cycle .nc p:not(.mono){font-size:16px;color:rgba(243,235,224,.84)}
.notes-cycle .nc .src{position:absolute;left:28px;bottom:22px}
.nc-ctrl{position:absolute;right:0;bottom:0;display:flex;gap:8px}
.case-hero .nc-ctrl .chip{color:var(--ivory)}
.notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);margin-top:28px}
@media (max-width:1000px){.notes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.notes{grid-template-columns:1fr}.notes-cycle{min-height:400px}}
.fnote{position:relative;padding:22px 22px 56px;border-radius:20px;background:#fbf7f1;box-shadow:inset 3px 0 0 var(--nc),0 30px 60px -45px rgba(43,32,27,.35)}
.fnote .mono{color:var(--muted)}
.fnote h3{font-weight:300;font-size:clamp(22px,1.8vw,28px);letter-spacing:-.02em;line-height:1.08;margin:12px 0 10px;color:var(--text)}
.fnote p:not(.mono){color:#55473f;font-size:15px}
.fnote .src{position:absolute;left:22px;bottom:18px;text-decoration:none;color:var(--text)}
.fnote a.src:hover .arr{transform:translateX(4px)} .fnote .arr{display:inline-block;transition:transform .6s var(--spring)}

/* ---------- Cross-Tool vocabulary table ---------- */
.vocab-wrap{margin-top:28px}
.vocab{width:100%;border-collapse:collapse;font-size:14.5px}
.vocab th,.vocab td{text-align:left;vertical-align:top;padding:14px 18px 14px 0;border-bottom:1px solid var(--line)}
.vocab thead th{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-m)}
.vocab tbody th{font-weight:400;font-size:16px}
@media (max-width:760px){.vocab thead{display:none}.vocab tr{display:grid;gap:4px;padding:14px 0;border-bottom:1px solid var(--line)}.vocab th,.vocab td{border:0;padding:0}}

/* ---------- footwear colourway index ---------- */
.pairs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.2vw,18px);margin-top:28px}
@media (max-width:1000px){.pairs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pair{display:flex;flex-direction:column;gap:6px;text-align:left;padding:14px;border-radius:18px;background:#fbf7f1;box-shadow:0 30px 60px -45px rgba(43,32,27,.35);cursor:pointer}
.pair .sw{display:block;aspect-ratio:1.6;border-radius:12px;background:linear-gradient(135deg,var(--o) 0 56%,var(--a) 56% 100%);margin-bottom:8px;transition:transform .9s var(--spring)}
.pair:hover .sw{transform:scale(1.04) rotate(-1.5deg)}
.pair b{font-weight:400;font-size:17px;letter-spacing:-.01em;color:var(--text)}
.pair .pp{font-size:13px;color:#55473f}
.pair .feel{color:var(--muted);font-size:11.5px}
.pair .mono:first-of-type{color:var(--muted)}

/* =====================================================================================================
   V2.1 hiring system (Oct 2026): logo header, selected work, archive index, stage + image-type labels,
   project architecture, justified galleries, lightbox, copy email, accessibility and mobile.
   Same ink/paper, sunset, glass and thin type — the identity is unchanged; the communication is new.
   ===================================================================================================== */
.mono{font-size:11.5px}
@media (max-width:700px){.mono{font-size:12px}}

/* ---------- home header: the big MALINYX logo behind the glass slats (no sun) ---------- */
.brand-hero{height:94svh;min-height:600px}
.sky.brand .logo-big{position:absolute;right:5vw;top:50%;width:min(46vw,88vh,900px);aspect-ratio:960/900;translate:0 -52%;
  transform:translate3d(calc(var(--mx,0)*-16px),calc(var(--my,0)*-12px),0);filter:drop-shadow(0 40px 90px rgba(220,90,53,.16));opacity:.97;
  animation:logoIn 2.2s var(--ease) .15s both}
.sky.brand .logo-big svg{display:block;width:100%;height:100%;overflow:visible}
@keyframes logoIn{from{opacity:0;scale:.96}to{opacity:.97;scale:1}}
.sky.brand .slats{transform:rotate(calc(-36deg + var(--hp,0)*14deg)) translate3d(calc(var(--mx,0)*22px),calc(var(--my,0)*14px),0) scale(calc(1 + var(--hp,0)*.25))}
.sky.brand .slats i{background:linear-gradient(90deg,rgba(255,255,255,.045),rgba(255,214,170,.016) 40%,rgba(255,120,70,.035));
  -webkit-backdrop-filter:blur(3px) saturate(1.15) brightness(1.06);backdrop-filter:blur(3px) saturate(1.15) brightness(1.06)}
/* light frost (owner, 6 Oct 2026): at 22px the ribbons hid the logo; 3px keeps the glass bands while the monogram reads through */
/* each ribbon catches the light where the pointer is (owner, 6 Oct 2026): v2.js sets --lg 0–1 (how close the pointer is) and --lt (px along the ribbon), fine pointers only */
.sky.brand .slats i{position:relative;overflow:hidden}
.sky.brand .slats i::before,.sky.brand .slats i::after{content:"";position:absolute;pointer-events:none;opacity:var(--lg,0)}
.sky.brand .slats i::before{inset:0;border-radius:inherit;background:linear-gradient(90deg,rgba(255,238,215,.13),rgba(255,214,170,.04) 45%,rgba(255,150,95,.1));
  box-shadow:inset 1.5px 0 0 rgba(255,242,224,.6),inset -1px 0 0 rgba(255,222,192,.22)}
.sky.brand .slats i::after{left:-40%;right:-40%;top:50%;height:min(52vh,520px);translate:0 calc(-50% + var(--lt,0px));
  background:radial-gradient(closest-side,rgba(255,240,222,.42),rgba(255,176,118,.16) 55%,transparent);mix-blend-mode:screen}
@media (prefers-reduced-motion:reduce){.sky.brand .slats i::after{display:none}}
.brand-hero .hero-copy h1{font-size:clamp(48px,8vw,146px)}
.brand-hero .disc{margin-top:clamp(14px,2.2vh,22px);font-size:clamp(14px,1.35vw,20px);letter-spacing:.2em;text-transform:uppercase;font-weight:400;color:rgba(246,239,230,.92);
  text-shadow:0 1px 18px rgba(14,10,9,.7);opacity:0;animation:fade 1.4s var(--ease) .9s forwards}
.brand-hero .disc span{color:var(--s5)}
.brand-hero .hero-copy{max-width:min(62vw,860px)}
.brand-hero .orbit{left:clamp(16px,5vw,72px);right:auto;top:clamp(86px,14vh,150px)}
@media (max-width:1240px){
  .sky.brand .logo-big{right:50%;translate:50% 0}
  .brand-hero .hero-copy{max-width:none}
  .brand-hero .orbit{display:none}}
.qa .brand-hero .disc{opacity:1;animation:none}.qa .sky.brand .logo-big{animation:none}

/* ---------- stage + image-type vocabulary ---------- */
.stg,.badge[data-stage]{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;border:1px solid currentColor;line-height:1.25;white-space:nowrap}
.stg::before,.badge[data-stage]::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--sc,#c4a27a)}
[data-stage="concept"]{--sc:#d8b06a}[data-stage="design-study"]{--sc:#f08f52}[data-stage="cad-concept"]{--sc:#dc5a35}[data-stage="prototype"]{--sc:#36b3a8}
[data-stage="production"]{--sc:#5bb26a}[data-stage="research"]{--sc:#8a76d8}[data-stage="ai-study"]{--sc:#b07ac0}
.stg[data-stage="ai-study"],.badge[data-stage="ai-study"]{border-style:dashed}
.itype{display:inline-flex;align-items:center;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:5px;
  border:1px solid var(--line);color:var(--fg-m);white-space:nowrap}
.itype.ai{border-style:dashed;color:var(--fg)}

/* ---------- cards ---------- */
.wcard .pic .badges{position:absolute;left:12px;top:12px;right:12px;display:flex;flex-wrap:wrap;gap:6px;z-index:2;pointer-events:none}
.wcard .pic .badges .badge{position:static;padding:5px 9px;border-radius:999px;background:rgba(20,14,12,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ivory);border-color:rgba(243,235,224,.28)}
.wcard .pic .badges .badge.ai{border-style:dashed}
.wcard p.short{color:var(--fg);font-size:15px;max-width:48ch;padding-top:6px}
.wcard p.kind{color:var(--fg-m);padding-top:8px}
.wcard:focus-visible,.fcard:focus-visible,.index a:focus-visible{outline:2px solid var(--s4);outline-offset:6px;border-radius:22px}
.grid-work.feat .wcard{grid-column:span 6}.grid-work.feat .wcard .pic{aspect-ratio:16/11}
.grid-work.small .wcard{grid-column:span 3}.grid-work.small .wcard .pic{aspect-ratio:1}
.grid-work.small .wcard .meta b{font-size:clamp(18px,1.5vw,22px)}
@media (max-width:1000px){.grid-work.small .wcard{grid-column:span 4}}
@media (max-width:760px){.grid-work.small .wcard,.grid-work.feat .wcard{grid-column:span 6}}
@media (max-width:620px){.grid-work.small .wcard,.grid-work.feat .wcard{grid-column:1 / -1}.grid-work.small .wcard .pic{aspect-ratio:4/3}}

/* ---------- home: selected work ---------- */
.selected{padding-top:clamp(56px,9vh,110px)}
.frows{display:grid;gap:clamp(48px,8vh,110px);margin-top:clamp(36px,6vh,70px)}
.frow{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(18px,2.6vw,40px);align-items:start}
.frow:has(> .fcard.s:first-child){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}   /* the wide column follows the wide card */
.frow .fcard.s{margin-top:clamp(30px,9vh,120px)}
.fcard{display:block;text-decoration:none;color:inherit;transform:perspective(1200px) rotateX(calc(var(--ty,0)*-3deg)) rotateY(calc(var(--tx,0)*4deg));transition:transform 1s var(--spring)}
.fcard .pic{position:relative;border-radius:clamp(18px,2vw,30px);overflow:hidden;background:var(--room,#1a1412);aspect-ratio:16/11;box-shadow:0 50px 100px -60px rgba(0,0,0,.8)}
.fcard.s .pic{aspect-ratio:4/4.4}
.fcard .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.fcard .pic img.contain{object-fit:contain;padding:6%}
.fcard:hover .pic img{transform:scale(1.035)}
.fcard .pic .badges{position:absolute;left:14px;top:14px;display:flex;gap:6px}
.fcard .pic .badge{padding:5px 9px;border-radius:999px;background:rgba(20,14,12,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ivory);border-color:rgba(243,235,224,.28)}
.fcard .fmeta{padding:18px 4px 0}
.fcard h3{font-weight:200;font-size:clamp(42px,4.8vw,80px);letter-spacing:-.045em;line-height:.92;margin:10px 0 12px}
.fcard .short{font-size:clamp(16px,1.3vw,19px);max-width:46ch;color:var(--fg)}
.fcard .role{margin-top:12px;color:var(--fg-m);max-width:60ch;line-height:1.6}
.fcard .go{display:inline-flex;gap:8px;margin-top:16px;font-size:14px;border-bottom:1px solid currentColor;padding-bottom:3px}
.fcard .go .arr{transition:transform .6s var(--spring)}.fcard:hover .go .arr{transform:translateX(5px)}
.allwork{margin-top:clamp(36px,6vh,64px)}
@media (max-width:760px){.frow,.frow:has(> .fcard.s:first-child){grid-template-columns:1fr}.frow .fcard.s{margin-top:0}.fcard.s .pic{aspect-ratio:16/12}}

/* ring: typographic faces for the cards the owner keeps as colour + type */
.ring .item .face.typo{display:flex;align-items:flex-start;padding:20px;background:radial-gradient(120% 90% at 78% 72%,var(--t6) 0%,var(--t5) 14%,var(--t4) 30%,var(--t3) 46%,var(--t2) 64%,var(--t1) 82%,#0e0a09 100%)}
.ring .item .face.typo .tn{font-weight:200;font-size:clamp(26px,2.4vw,40px);letter-spacing:-.04em;line-height:.95;color:#fbf3ea}

/* ---------- home: full archive index ---------- */
.index{margin-top:clamp(28px,5vh,56px);border-top:1px solid var(--line)}
.index li a{position:relative;display:grid;grid-template-columns:3em minmax(0,1.05fr) minmax(0,2fr) 8.5em 13em 3.6em;gap:18px;align-items:baseline;padding:17px 6px;
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:background .4s,padding .6s var(--ease)}
.index li a:hover{background:rgba(43,32,27,.045);padding-left:14px}
.index .no,.index .dl,.index .st,.index .yr{color:var(--fg-m)}
.index b{font-weight:300;font-size:clamp(20px,1.8vw,28px);letter-spacing:-.02em;line-height:1.1}
.index .sh{color:var(--fg-m);font-size:14.5px}
.index .feat{position:absolute;right:6px;top:4px;font-size:9.5px;color:var(--s2)}
.idx-prev{position:fixed;left:0;top:0;z-index:40;width:220px;aspect-ratio:4/5;border-radius:16px;overflow:hidden;pointer-events:none;opacity:0;background:#1a1412;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.55);transition:opacity .35s var(--ease)}
.idx-prev.on{opacity:1}.idx-prev img{width:100%;height:100%;object-fit:cover}
/* the home index on ink (owner, 6 Oct 2026: everything after the hero stays black, text light) */
@media screen{body:not(.paper) .index li a:hover{background:rgba(243,235,224,.05)}
  body:not(.paper) .index .feat,body:not(.paper) .index .ai{color:var(--s4)}}
@media (max-width:1000px){.index li a{grid-template-columns:2.6em minmax(0,1fr) auto;gap:4px 12px}.index .sh{grid-column:2 / -1}.index .dl,.index .yr{display:none}.index .st{grid-column:3;grid-row:1}}
@media (max-width:560px){.index .st{grid-column:2;grid-row:auto}.index .feat{top:6px}}
@media (hover:none){.idx-prev{display:none}}

/* ---------- work page ---------- */
.work-hero.compact{min-height:0;padding:clamp(96px,15vh,150px) 0 clamp(26px,4vh,44px)}
.work-hero.compact h1{font-size:clamp(56px,8vw,128px)}
.work-hero.compact .tag{margin-top:12px;max-width:700px;color:rgba(246,239,230,.86)}
.work-hero .filters{margin-top:26px}
.work-hero .chip{border-color:rgba(246,239,230,.24);background:rgba(14,10,9,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ivory)}
.work-hero .chip[aria-pressed="true"]{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
.chip .n{opacity:.55;margin-left:4px;font-size:.85em}
.fcount{margin-top:14px;color:rgba(246,239,230,.62)}
.work-grid{padding-top:clamp(36px,6vh,64px)}
.wgroup+.wgroup{margin-top:clamp(56px,9vh,100px)}
.ghead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;border-top:1px solid var(--line);padding-top:14px}
.gh{font-weight:200;font-size:clamp(30px,3.4vw,52px);letter-spacing:-.04em;line-height:1}
.wgroup .grid-work{margin-top:clamp(20px,3vh,32px)}

/* ---------- case page ---------- */
.case-hero .pitch{margin-top:16px;font-size:clamp(17px,1.45vw,22px);line-height:1.38;max-width:46ch;color:rgba(246,239,230,.92);text-shadow:0 1px 18px rgba(14,10,9,.6)}
.hmeta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px;margin-top:26px;max-width:640px;border-top:1px solid rgba(246,239,230,.18)}
.hmeta>div{padding:11px 0 10px;border-bottom:1px solid rgba(246,239,230,.14);min-width:0}
.hmeta dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(246,239,230,.74)}
.hmeta dd{margin-top:4px;font-size:14px;color:rgba(246,239,230,.92);text-shadow:0 1px 14px rgba(14,10,9,.6)}
.hmeta .stg{color:rgba(246,239,230,.92);background:rgba(14,10,9,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.case-hero .hero-img{position:relative}
.case-hero .hero-img .itype{position:absolute;left:14px;top:14px;background:rgba(14,10,9,.7);color:var(--ivory);border-color:rgba(246,239,230,.3)}
.ten-h{margin-top:clamp(18px,3vh,30px);max-width:18ch}
.ten{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
.ten>div{display:grid;grid-template-columns:minmax(120px,170px) 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.ten dt{color:var(--fg-m);padding-top:4px}
.ten dd{font-size:clamp(16px,1.25vw,19px);line-height:1.45;color:var(--fg)}
@media (max-width:620px){.ten>div{grid-template-columns:1fr;gap:4px}}
.ov .prose{margin-top:24px}
.kp{margin-top:28px}
.secnav-wrap{position:relative;padding:0 0 clamp(10px,2vh,20px)}
.secnav{display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid var(--line);padding-top:16px}
.secnav a{text-decoration:none;padding:9px 13px;border-radius:999px;border:1px solid var(--line);color:var(--fg-m);transition:color .3s,border-color .3s,background .3s}
.secnav a:hover,.secnav a:focus-visible{color:var(--fg);border-color:var(--fg)}
.sec.tight{padding:clamp(48px,8vh,96px) 0}
.did{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;border-top:1px solid var(--line)}
.did li{padding:14px 0 13px;border-bottom:1px solid var(--line);font-size:16px}
.did li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--s3);margin-right:12px;vertical-align:2px}
@media (max-width:620px){.did{grid-template-columns:1fr}}
.decs{display:grid;gap:clamp(28px,5vh,56px);margin-top:clamp(28px,5vh,56px)}
.dec{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,3.4vw,56px);align-items:center;border-top:1px solid var(--line);padding-top:clamp(18px,3vh,28px)}
.dec.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.dec.flip .dtext{order:2}
.dec.noimg{grid-template-columns:minmax(0,1fr)}.dec.noimg .dtext{max-width:760px}
.dec h3{font-weight:300;font-size:clamp(26px,2.6vw,40px);letter-spacing:-.03em;line-height:1.02;margin:8px 0 12px}
.dec p:not(.mono){font-size:clamp(16px,1.2vw,18px);color:var(--fg-m);max-width:52ch}
.dec .lvl{margin-top:14px}
.dfig .fig .ph img{object-fit:contain;background:var(--room)}
@media (max-width:900px){.dec,.dec.flip{grid-template-columns:1fr}.dec.flip .dtext{order:0}}
.form-step{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(18px,3vw,48px);align-items:start;border-top:1px solid var(--line);padding-top:clamp(18px,3vh,28px);margin-top:clamp(26px,4.4vh,48px)}
.form-step .ftext p{color:var(--fg-m);font-size:16px;max-width:46ch}
.fstrip{display:flex;gap:clamp(8px,1vw,14px);align-items:flex-start}
.fstrip .fig{flex:var(--a) 1 0px;min-width:0}
.fstrip .fig .ph img{aspect-ratio:var(--a)}
@media (max-width:900px){.form-step{grid-template-columns:1fr}}
@media (max-width:560px){.fstrip{flex-wrap:wrap}.fstrip .fig{flex:1 1 calc(50% - 8px)}}
.eng-lead{max-width:760px}
.spec-wrap{margin-top:clamp(22px,4vh,40px);overflow-x:auto}
.spec{width:100%;border-collapse:collapse;font-size:15px}
.spec th,.spec td{text-align:left;vertical-align:top;padding:13px 18px 13px 0;border-bottom:1px solid var(--line)}
.spec thead th{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-m)}
.spec tbody th{font-weight:400}
.spec .lvl{margin-top:0}
@media (max-width:640px){.spec thead{display:none}.spec tr{display:grid;gap:4px;padding:12px 0;border-bottom:1px solid var(--line)}.spec th,.spec td{border:0;padding:0}}
.modules{margin-top:clamp(26px,4vh,44px)}
.mods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px;border-top:1px solid var(--line)}
.mods>div{display:grid;grid-template-columns:3.4em 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.mods dt{color:var(--s2);padding-top:3px}.mods dd b{display:block;font-weight:400}.mods dd span{color:var(--fg-m);font-size:14px}
@media (max-width:760px){.mods{grid-template-columns:1fr}}
.eng-note{margin-top:24px;padding:16px 18px;border-left:3px solid var(--s3);background:rgba(43,32,27,.04);border-radius:0 12px 12px 0;max-width:820px;font-size:15.5px}
details.more{margin-top:clamp(28px,5vh,48px);border-top:1px solid var(--line);padding-top:14px}
details.more summary{cursor:pointer;font-size:clamp(20px,1.8vw,26px);font-weight:300;letter-spacing:-.02em;list-style:none;display:flex;gap:14px;align-items:baseline;min-height:44px}
details.more summary::-webkit-details-marker{display:none}
details.more summary::before{content:"+";font-family:var(--mono);font-size:16px;width:1.2em;color:var(--s3)}
details.more[open] summary::before{content:"–"}
details.more .prose{margin-top:14px}
.cmf{display:grid;gap:0;border-top:1px solid var(--line)}
.cmf li{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line)}
.cmf .sw{width:44px;height:44px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(43,32,27,.18),0 10px 24px -14px rgba(43,32,27,.6)}
.cmf b{font-weight:400;font-size:17px;margin-right:10px}
.cmf .where{color:var(--fg);font-size:14.5px;margin-top:2px}.cmf .why{color:var(--fg-m);font-size:14.5px;margin-top:4px}
.status{display:grid;margin-top:clamp(24px,4vh,40px);border-top:1px solid var(--line)}
.status>div{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--line)}
.status dt{color:var(--fg-m);padding-top:4px}
.status dd{font-size:15.5px;max-width:860px}
.status dd .def{display:block;margin-top:8px;color:var(--fg-m);font-size:14.5px}
.status dd ul{display:grid;gap:4px}.status dd li::before{content:"— ";color:var(--fg-m)}
@media (max-width:620px){.status>div{grid-template-columns:1fr;gap:6px}}
.cmp-note{margin-top:12px;color:var(--fg-m);font-size:12px;line-height:1.6}
.rel{margin-top:clamp(20px,3vh,32px)}.rel .wcard{grid-column:span 6}
@media (max-width:620px){.rel .wcard{grid-column:1 / -1}}
.next .nshort{margin-top:16px;max-width:46ch;font-size:clamp(16px,1.3vw,19px);color:rgba(246,239,230,.86)}
@media (max-width:960px){.case-hero{min-height:0;padding-top:clamp(84px,12vh,120px)}.case-hero .stage-wrap{order:-1}.case-hero .grid{align-items:start}}

/* ---------- figures + justified galleries (no accidental blanks) ---------- */
.fig{margin:0;min-width:0}
.fig .ph{display:block;border-radius:clamp(14px,1.4vw,22px);overflow:hidden;background:var(--room,#1a1412);cursor:zoom-in}
.fig .ph img{display:block;width:100%;height:auto;aspect-ratio:var(--a);object-fit:cover;transition:transform 1.6s var(--ease)}
.fig .ph:hover img{transform:scale(1.02)}
.fig.svg .ph{background:#f4eee4}
.fig figcaption{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;padding:10px 2px 0;color:var(--fg-m);font-size:13.5px;line-height:1.45}
.jgal{display:grid;gap:clamp(14px,2.2vh,26px);margin-top:clamp(28px,5vh,56px);--rowmax:min(74vh,700px);--gap:clamp(12px,1.6vw,22px)}
.jrow{display:flex;gap:var(--gap);align-items:flex-start;width:100%;max-width:calc(var(--sa) * var(--rowmax) + (var(--n) - 1) * 22px);margin-inline:auto}
.jrow>.fig{flex:var(--a) 1 0px}
.plates2 .fig .ph{background:#f4eee4}
@media (max-width:700px){.jrow{flex-wrap:wrap;max-width:none}.jrow>.fig{flex:1 1 100%}}
body:not(.paper) .fig figcaption{color:var(--ivory-m)}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:120;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:rgba(10,7,6,.95);color:var(--ivory);opacity:0;transition:opacity .35s var(--ease)}
.lb.on{opacity:1}
.lb-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px var(--gut)}
.lb-count{color:rgba(243,235,224,.62)}
.lb-tools{display:flex;gap:8px;align-items:center}
.lb-tools>*{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;padding:0 14px;border-radius:999px;border:1px solid rgba(243,235,224,.24);
  color:var(--ivory);text-decoration:none;font-size:13.5px;background:rgba(14,10,9,.4)}
.lb-tools>*:hover{border-color:var(--ivory)}
.lb-close{font-size:24px!important;padding:0!important}
.lb-zoom[aria-pressed="true"]{background:var(--ivory);color:var(--ink)}
.lb-stage{position:relative;min-height:0;overflow:hidden;display:grid;grid-template-rows:minmax(0,100%);grid-template-columns:minmax(0,100%);place-items:center;padding:0 clamp(60px,7vw,110px)}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;box-shadow:0 40px 120px rgba(0,0,0,.55);user-select:none;-webkit-user-drag:none}
.lb-stage img.svg{background:#f4eee4}
.lb.zoom .lb-stage{overflow:auto;place-items:start;padding:0;cursor:grab;-webkit-overflow-scrolling:touch}
.lb.zoom .lb-stage:active{cursor:grabbing}
.lb.zoom .lb-stage img{max-width:none;max-height:none;width:var(--zw,auto);border-radius:0;margin:auto}
.lb-nav{position:absolute;top:50%;translate:0 -50%;z-index:2;width:52px;height:52px;border-radius:50%;border:1px solid rgba(243,235,224,.26);background:rgba(14,10,9,.55);color:var(--ivory);font-size:20px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lb-nav:hover{border-color:var(--ivory)}
.lb-prev{left:clamp(8px,2vw,28px)}.lb-next{right:clamp(8px,2vw,28px)}
.lb.single .lb-nav{display:none}
.lb-cap{padding:12px var(--gut) clamp(14px,3vh,24px);text-align:center}
.lb-text{max-width:900px;margin:0 auto;font-size:14.5px;color:var(--ivory)}
.lb-type{margin-top:6px;color:rgba(243,235,224,.62)}
@media (max-width:640px){.lb-stage{padding:0 8px}.lb-nav{grid-row:3;grid-column:1;top:6px;bottom:auto;translate:none;width:46px;height:46px}.lb-cap{padding-top:58px}.lb-open .t{display:none}}
.lb:not(.on){pointer-events:none}.lb:focus{outline:none}.lb-stage:focus-visible{outline-offset:-4px}

/* ---------- copy email, contact ---------- */
.copy{min-width:9.5em;justify-content:center}
.copy.done{background:var(--s5)!important;border-color:var(--s5)!important;color:#140d0b!important}
.contact-actions{margin-top:26px}
.contact-big:focus-visible{outline-offset:8px}

/* ---------- about ---------- */
.about-meta{max-width:900px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.about-meta{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cv li .org{color:var(--fg);font-size:14.5px;margin-top:2px}
.leg-h{margin-top:clamp(30px,5vh,52px)}
.legend li b .stg,.legend li b .itype,.legend li b .lvl{font-size:11.5px}
.legend small{display:block;margin-top:10px}

/* ---------- accessibility + touch ---------- */
@media (pointer:coarse){.bar nav a{padding:12px 4px;min-height:44px;display:inline-flex;align-items:center}.bar .hire{padding:10px 16px}
  .chip{min-height:42px}.btn{min-height:46px}.secnav a{min-height:42px;display:inline-flex;align-items:center}}
.bar nav a:focus-visible,.btn:focus-visible,.chip:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.case-hero :focus-visible,.next:focus-visible,.next :focus-visible,.hero :focus-visible,.ring-sec :focus-visible,.lb :focus-visible{outline-color:var(--ivory);box-shadow:0 0 0 5px rgba(14,10,9,.55)}
@media (prefers-reduced-motion:reduce){.sky.brand .logo-big{animation:none;opacity:.97}.brand-hero .disc{opacity:1}.fcard{transform:none}.orbit{opacity:1}}

/* ---------- mobile: imagery earlier, less empty height ---------- */
@media (max-width:700px){.sec{padding:clamp(48px,8vh,72px) 0}.case-hero .hmeta{grid-template-columns:1fr 1fr}.case-hero h1{font-size:calc(clamp(46px,13vw,80px) * var(--k,1))}
  .dusk{height:20vh}.next{min-height:44svh}.endsky{height:200px}}
.fstrip{max-width:calc(var(--sa,3) * min(44vh,400px) + (var(--k,3) - 1) * 14px)}
#challenge .fig .ph img,.dfig .fig .ph img{max-height:min(76vh,720px);object-fit:contain}
@media (max-width:700px){.eyebrow{flex-direction:column;align-items:flex-start;gap:4px}}
@media (max-width:960px){.case-hero .hc{position:relative}.case-hero .hc::before{content:"";position:absolute;inset:-18px -16px -14px;z-index:-1;border-radius:22px;
  background:linear-gradient(180deg,rgba(14,10,9,0) 0%,rgba(14,10,9,.66) 12%,rgba(14,10,9,.74) 100%)}.case-hero .sky .sun{opacity:.7}}
/* legibility in the page headers that sit over the sun (work / about / contact) */
.work-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,rgba(14,10,9,.84) 0%,rgba(14,10,9,.7) 50%,rgba(14,10,9,.34) 80%,rgba(14,10,9,.12) 100%)}
@media (max-width:760px){.work-hero::after{background:linear-gradient(180deg,rgba(14,10,9,.5) 0%,rgba(14,10,9,.7) 60%,rgba(14,10,9,.78) 100%)}}
.work-hero .contact-big{background:none;-webkit-text-fill-color:currentColor;color:var(--ivory);text-shadow:0 2px 34px rgba(14,10,9,.65)}
.work-hero .contact-big:hover{color:var(--s6)}
.case-hero .btn:not(.solid){background:rgba(14,10,9,.48);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-color:rgba(246,239,230,.42);color:var(--ivory)}
.src-note{margin-top:18px;padding:14px 16px;border-left:3px solid #8a76d8;background:rgba(43,32,27,.045);border-radius:0 12px 12px 0;font-size:14.5px;color:var(--fg)}
.src-note .mono{display:block;margin-bottom:6px;color:var(--fg-m)}
/* stacked header below 1240 px: the copy flows under the logo, so the wordmark can never collide with the headline */
@media (max-width:1240px){
  .brand-hero{height:auto;min-height:100svh}
  .sky.brand .logo-big{top:clamp(72px,10svh,110px);width:min(64vw,40svh,520px)}
  .brand-hero .hero-copy{position:relative;left:auto;right:auto;bottom:auto;transform:none;opacity:1;
    padding:calc(min(64vw,40svh,520px) * .9375 + clamp(72px,10svh,110px) + clamp(28px,4svh,48px)) clamp(16px,5vw,72px) clamp(40px,7svh,72px)}}
@media (max-width:640px){.sky.brand .logo-big{width:min(78vw,40svh)}
  .brand-hero .hero-copy{padding-top:calc(min(78vw,40svh) * .9375 + clamp(72px,10svh,110px) + 30px)}}
/* home header: halo + engineering geometry behind the monogram (owner, 3 Oct 2026) — centred on the M, clear of the wordmark */
.sky.brand .logo-big .halo{position:absolute;left:49.74%;top:44.4%;width:80%;aspect-ratio:1;translate:-50% -50%;z-index:-1;pointer-events:none}
.halo .glow{position:absolute;inset:-14%;border-radius:50%;
  background:radial-gradient(circle,rgba(247,196,127,.30) 0%,rgba(240,143,82,.26) 24%,rgba(220,90,53,.16) 46%,rgba(94,23,18,.06) 64%,rgba(14,10,9,0) 72%);animation:breathe 11s var(--ease) infinite alternate}
.halo .hring{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 210deg,#5e1712,#a8301f 14%,#dc5a35 30%,#f7c47f 46%,#fbe2b4 52%,#f08f52 64%,#a8301f 80%,#5e1712);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px))}
.halo .hring.bloom{inset:-1.5%;filter:blur(12px);opacity:.75;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 14px),#000 calc(100% - 9px));mask:radial-gradient(farthest-side,transparent calc(100% - 14px),#000 calc(100% - 9px))}
.halo .geo{position:absolute;inset:-15%;width:130%;height:130%;overflow:visible}
.halo .geo circle.c1{fill:none;stroke:rgba(243,235,224,.22);stroke-width:.35}
.halo .geo circle.c2{fill:none;stroke:rgba(243,235,224,.16);stroke-width:.35;stroke-dasharray:.6 2.2}
.halo .geo .ticks{transform-origin:0 0;animation:spin 160s linear infinite}
.halo .geo .ticks line{stroke:rgba(243,235,224,.30);stroke-width:.35}
.halo .geo .ticks line.mj{stroke:rgba(247,196,127,.75);stroke-width:.6}
.halo .geo .scan{fill:none;stroke:var(--s4);stroke-width:1.1;stroke-linecap:round;opacity:.9;filter:drop-shadow(0 0 2px rgba(240,143,82,.8))}
.halo .geo .datum line{stroke:rgba(243,235,224,.42);stroke-width:.4}
.halo .geo .datum circle{fill:var(--s5)}
.halo .geo .lab text{font-family:var(--mono);font-size:4.4px;letter-spacing:.12em;fill:rgba(243,235,224,.55)}
@media (prefers-reduced-motion:reduce){.halo .glow,.halo .geo .ticks{animation:none}}
.qa .halo .glow,.qa .halo .geo .ticks{animation:none}
.status dd .def.note{color:var(--fg);margin-top:6px}

/* =====================================================================================================
   V2.2 audit fixes (4 Oct 2026): contrast over the suns, phone layouts, labels, ring captions.
   ===================================================================================================== */
/* CON-01 / CONTRAST-01: the next-project teaser over the sun */
.next::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(14,10,9,.82) 0%,rgba(14,10,9,.68) 50%,rgba(14,10,9,.22) 76%,rgba(14,10,9,0) 92%)}
@media (max-width:760px){.next::after{background:linear-gradient(180deg,rgba(14,10,9,.6),rgba(14,10,9,.8))}}
.next .mono,.next .nshort{text-shadow:0 1px 14px rgba(14,10,9,.7)}
/* CONTRAST-01: tablet hero captions sit on the sun */
@media (max-width:960px){.case-hero .stage-wrap .note{display:inline-block;padding:8px 12px;border-radius:12px;background:rgba(14,10,9,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}}
/* MOB-01: on phones the stage chip gets its own row, so it never covers the year */
@media (max-width:700px){.case-hero .hmeta>div:has(.stg){grid-column:1 / -1}.hmeta .stg{white-space:normal;max-width:100%}
  .lvl,.itype,.stg,.badge[data-stage],.hmeta dt,.index .feat,.pair .feel{font-size:12px}}
/* MOB-02: on phones and tablets the picture comes first but no longer pushes the name and pitch off the first screen */
@media (max-width:960px){.case-hero .stage-wrap .stage{max-height:min(46svh,440px);width:min(100%,calc(min(46svh,440px) * var(--ar,1)));margin-inline:auto}
  .case-hero .stage-wrap .ctrl,.case-hero .stage-wrap .note{max-width:min(100%,max(320px,calc(min(46svh,440px) * var(--ar,1))));margin-inline:auto}
  .case-hero .hero-img{max-height:50svh;width:min(100%,calc(50svh * var(--ar,1)));margin-inline:auto}}
/* MOB-03: on phones a row of portrait images (triptychs, phone screens) stays together as a swipeable strip */
@media (max-width:700px){.jrow[data-portrait]{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .jrow[data-portrait]>.fig{flex:0 0 72%;scroll-snap-align:start}}
/* GAL-01: a lone image fills its (height-capped) row */
.jrow>.fig:only-child{flex:1 1 100%}
/* CON-03 / HOME-02 / RING-01: ring captions sit on a scrim and wrap inside the card */
.ring .item .face::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(180deg,rgba(14,10,9,0),rgba(14,10,9,.8) 70%);pointer-events:none}
.ring .item .cap{flex-direction:column;align-items:flex-start;gap:4px}
.ring .item .cap .mono{white-space:normal}
.ring .item .cap .ai{color:var(--s5)}
/* CARD-03: no alt text painted over a tile while its picture loads */
.wcard .pic img,.fcard .pic img,.ring .item img{color:transparent}
/* CARD-01: a portrait picture in a landscape slot is shown whole */
.fcard .pic img.contain,.wcard .pic img.contain{object-fit:contain;padding:4%}
/* NAV-01 / NAV-04: the fixed bar keeps its own ground, so scrolled text never runs through the nav */
.bar::before{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 95%,transparent) 0%,color-mix(in srgb,var(--bg) 85%,transparent) 64%,transparent 100%);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);-webkit-mask:linear-gradient(#000 72%,transparent);mask:linear-gradient(#000 72%,transparent)}
/* TAP-01: the last small touch targets */
@media (pointer:coarse){.bar .mark{min-height:44px}.foot a{display:inline-block;padding:12px 2px}.then .tog button{min-height:40px;padding:10px 16px}}
/* DRAW-02: drawings on touch screens say they can be zoomed */
@media (hover:none){.fig.svg .ph{position:relative}.fig.svg .ph::after{content:"Tap to zoom";position:absolute;right:10px;bottom:10px;padding:5px 9px;border-radius:999px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:rgba(14,10,9,.72);color:var(--ivory)}}
/* HD-01: the section label is the section heading */
.eyebrow .eh{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;margin:0}
/* FN-01: Field Notes pause control */
.nc-ctrl [data-pause]{min-width:5.2em}
/* SPEC-07: archive cards with an AI badge in the index */
.index .ai{position:absolute;right:6px;bottom:5px;font-size:9.5px;white-space:nowrap;color:var(--s2)}   /* was an unplaced 7th grid child: it wrapped under the number and doubled the row height */
/* RELIMG-01: related cards are wide, so their frame is 4:3 and their images come from the 1400 px set */
.rel .wcard .pic{aspect-ratio:4/3}
/* PRINT-01: a case study prints as a readable document */
@media print{
  :root,body.paper{--bg:#fff;--fg:#111;--fg-m:#444;--ivory:#111;--text:#111}
  body{background:#fff!important;color:#111}
  .bar,.skip,.sky,.lb,.cursor,.idx-prev,.secnav-wrap,.hint,.load,.dusk,.endsky,.next,.orbit{display:none!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .case-hero,.work-hero,.brand-hero{min-height:0!important;height:auto!important}
  .scrub,.ring-sec{height:auto!important}.scrub .pin,.ring-pin{position:relative!important;height:auto!important}
  figure,.sysd,.jrow,.facts,.spec tr,.dec{break-inside:avoid}
}
/* DRAW-01: a drawing with a phone variant takes that variant's proportions on phones */
@media (max-width:700px){.fig .ph img{aspect-ratio:var(--am,var(--a))}}
@media (max-width:700px){#challenge .fig[style*="--am"] .ph img,.dfig .fig[style*="--am"] .ph img{max-height:none}}

/* ===================================================================================================
   Direction (4 Oct 2026, DIRECTION.md): object first, then the system, then the evidence.
   Level-3 components for registered pilots only: the system sequence, the lens, object / evidence.
   =================================================================================================== */
/* object-first hero: one line of record under the name; the full record sits in the status section */
.hline{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:24px;color:rgba(246,239,230,.86);text-shadow:0 1px 14px rgba(14,10,9,.6)}
.hline>span:not(.stg)::before{content:"·";margin-right:18px;color:var(--s5)}
.hline .stg{color:rgba(246,239,230,.94);background:rgba(14,10,9,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* the system: without JS every visual, then every step, in reading order */
.sys .sys-grid{margin-top:clamp(28px,5vh,56px)}
.sys-stage{display:grid;gap:18px}
.sys-vis{margin:0;position:relative;border-radius:18px;overflow:hidden;background:var(--room,#f4ece2)}
.sys-vis img{width:100%;height:auto}
.sysd{background:#f4ece2;padding:clamp(10px,1.6vw,22px)}
.sysd svg{display:block;width:100%;height:auto}
.sysd .dim,.sysd .lab{transition:opacity .5s var(--ease)}
.sys-steps{display:grid;gap:26px;margin-top:30px}
.sys-n{color:var(--fg-m)}
.sys-step h3{font-weight:300;font-size:clamp(24px,2.3vw,34px);line-height:1.12;letter-spacing:-.01em;margin:8px 0 12px}
.sys-step p:not(.sys-n){color:var(--fg-m);max-width:42ch;font-size:clamp(15px,1.1vw,17px)}
.sys-ctrl{display:grid;gap:8px;margin-top:22px;max-width:380px}
.sys-ctrl output{color:var(--fg)}
.sys-ctrl input{width:100%;height:32px;accent-color:var(--s4);cursor:pointer}
.sys-note{margin-top:clamp(24px,4vh,40px)}
/* with JS: a sticky stage beside the steps; the step in the middle of the screen drives it */
.sys-on .sys-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,80px);align-items:start}
.sys-on .sys-stage{display:block;position:sticky;top:clamp(76px,12vh,120px);height:min(76svh,820px)}
.sys-on .sys-vis{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:scale(.985);
  transition:opacity .7s var(--ease),transform 1s var(--ease),visibility 0s linear .7s}
.sys-on .sys-vis.on{opacity:1;visibility:visible;transform:none;transition:opacity .7s var(--ease),transform 1s var(--ease),visibility 0s}
.sys-on .sys-vis img{width:100%;height:100%;object-fit:contain}
.sys-on .sysd svg{width:100%;height:100%}
.sys-on .sys-steps{margin-top:0;gap:0}
.sys-on .sys-step{min-height:74svh;display:flex;flex-direction:column;justify-content:center;opacity:.3;transition:opacity .6s var(--ease)}
.sys-on .sys-step.on{opacity:1}
.sys-on .sys-step:first-child{min-height:56svh;justify-content:flex-start;padding-top:8svh}
.sys-on .sys-step:last-child{min-height:82svh}
@media (max-width:900px){
  .sys-on .sys-grid{grid-template-columns:1fr;gap:0}
  /* phones (owner, 6 Oct 2026): no pinned stage — v2.js moves each visual into the first step that shows it, so a picture scrolls with its text;
     a step that changes the drawing above it (.sys-cont) follows straight under it */
  .sys-on .sys-stage{display:none}
  .sys-on .sys-step,.sys-on .sys-step:first-child,.sys-on .sys-step:last-child{min-height:0;padding-top:0;justify-content:flex-start;opacity:1}
  .sys-on .sys-step + .sys-step{margin-top:clamp(48px,9svh,76px)}
  .sys-on .sys-step.sys-cont{margin-top:22px}
  .sys-on .sys-step > .sys-vis{position:relative;inset:auto;display:block;opacity:1;visibility:visible;transform:none;transition:none;margin-bottom:16px}
  .sys-on .sys-step > .sys-vis img{height:auto;object-fit:fill}
  .sys-on .sys-step > .sysd svg{height:auto}
  .sys-on .sysd{padding:6px}
  .sys-on .sys-step > .sys-vis{width:100%;max-width:640px;margin-inline:auto}   /* width:100%: auto margins would otherwise stop the flex stretch (drawings fell to 300 px) */
}
/* tablets and phones on their side: the picture stays within one screen, next to its text (the wide desktop drawing is used here, see below) */
@media (min-width:601px) and (max-width:900px){.sys-on .sys-step > .sys-vis img,.sys-on .sys-step > .sysd svg{max-height:78svh;object-fit:contain}}
/* object view: drawings carry part names only; the evidence view adds their dimensions and claims */
body[data-mode="object"] .sysd .dim{opacity:0}
.sysd .sysd-m{display:none}
@media (max-width:600px){.sysd:has(.sysd-m) .sysd-d{display:none}.sysd .sysd-m{display:block}}

/* the lens: the finished image over its registered technical layer */
.lens{margin:0}
.lens-f{position:relative;aspect-ratio:var(--ar);width:min(100%,calc(min(80vh,880px) * var(--ar)));margin-inline:auto;border-radius:18px;overflow:hidden;background:#5d5c5b;
  touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:ew-resize}
.lens-a,.lens-g{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.lens-b{position:absolute;inset:0;background:#f4ece2;clip-path:inset(0 calc(100% - var(--x,0%)) 0 0)}
.lens-g{opacity:.13;filter:grayscale(1)}
.lens-svg{position:absolute;inset:0;width:100%;height:100%}
.lens-line{position:absolute;top:0;bottom:0;left:var(--x,0%);width:2px;margin-left:-1px;background:#f4ece2;box-shadow:0 0 0 1px rgba(43,32,27,.18);touch-action:none}
.lens-h{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#f4ece2;color:#2b201b;box-shadow:0 8px 24px rgba(14,10,9,.35);touch-action:none}
.lens-h::before,.lens-h::after{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-4px;border:solid #2b201b;border-width:0 0 1.5px 1.5px}
.lens-h::before{left:12px;transform:rotate(45deg)}.lens-h::after{right:12px;transform:rotate(-135deg)}
.lens:not(.open) .lens-h{left:23px}
.lens-ctl{display:flex;align-items:center;gap:12px;width:min(100%,440px);margin:16px auto 0;color:var(--fg-m)}
.lens-ctl input{flex:1;min-width:0;height:32px;accent-color:var(--s2);cursor:pointer}
.lens figcaption{margin:10px auto 0;max-width:62ch;font-size:13.5px;color:var(--fg-m);text-align:center}
.eng-lens{align-items:start}
.lens:has(.lens-r:focus-visible) .lens-h{outline:2px solid var(--focus);outline-offset:3px}

/* object / evidence: one quiet switch, after the hero */
.mode{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:55;display:flex;gap:2px;padding:4px;border-radius:999px;
  background:rgba(14,10,9,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(243,235,224,.18);box-shadow:0 12px 30px rgba(14,10,9,.3);
  opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s linear .5s}
.mode.show{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s}
.mode button{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:10px 15px;border-radius:999px;color:rgba(243,235,224,.72);transition:background .3s,color .3s}
.mode button[aria-pressed="true"]{background:var(--ivory);color:var(--ink)}
@media (pointer:coarse){.mode button{min-height:42px}}

/* the archived dossier: a quiet line after everything else */
.arch-link{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:clamp(30px,5vh,46px);padding-top:16px;border-top:1px solid var(--line);color:var(--fg-m);font-size:14px}
.arch-link a{color:var(--fg-m);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.arch-link a:hover,.arch-link a:focus-visible{color:var(--fg)}
@media (prefers-reduced-motion:reduce){.sys-on .sys-vis,.sys-on .sys-step,.mode,.sysd .dim{transition:none}}

/* ---- Typography, two families (13 Oct 2026, owner: "more classy, a combo of two fonts") ----
   Cormorant Garamond sets the display lines; Inter Tight sets the text and the labels. IBM Plex Mono is retired: --mono now
   points at the sans (labels become tracked capitals), and the drawings' Plex Mono text is mapped to the sans with tabular figures. */
:root{--serif:"Cormorant Garamond",Cormorant,Garamond,"Times New Roman",serif;--mono:"Inter Tight",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif}
.hero h1,.display,h2.big,h2.mid,.ring-head h2,.ring-foot .now b,.name,.facts dd,.steps li b,.case-hero h1,.next h2,.contact-big,.wcard .pic.typo .tn,
.notes-cycle .nc h3,.brand-hero .hero-copy h1,.fcard h3,.ring .item .face.typo .tn,.work-hero.compact h1,.gh,
.ring .item .cap b,.wcard .meta b,.h3,.fnote h3,.index b,.dec h3,details.more summary,.sys-step h3,.caps li b{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;font-variant-numeric:lining-nums}
.ring .item .cap b,.wcard .meta b,.h3,.fnote h3,.index b,.dec h3,details.more summary,.sys-step h3,.caps li b{font-weight:500;letter-spacing:-.005em}
.hero h1,.case-hero h1,.name,.next h2,h2.big,.contact-big,.brand-hero .hero-copy h1,.work-hero.compact h1{line-height:.9}
.hero h1 .w:last-of-type > span,h2 .grad{font-style:italic;font-weight:300}
.mono,.lvl,.vocab thead th,.stg,.badge[data-stage],.itype,.hmeta dt,.spec thead th,.fig.svg .ph::after,.mode button{font-weight:500;letter-spacing:.14em}
svg text[font-family*="Plex"],svg tspan[font-family*="Plex"]{font-family:var(--sans);font-variant-numeric:tabular-nums}