/* Ruang Atelier · v3 · "Studies in daylight". A daylight monograph: plaster, oak, pencil on vellum, one sun.
   Colours are tokens below; Inazda UI tokens are mapped onto them so kit components follow the world. */

:root{
  --ra-paper:#F2EEE7; --ra-paper-2:#EAE4D9; --ra-card:#FBF9F5; --ra-ink:#24211D; --ra-muted:#625B51;
  --ra-line:rgb(36 33 29 / .16); --ra-line-2:rgb(36 33 29 / .32);
  --ra-accent:#94551B; --ra-moss:#5B6843; --ra-oak:#B98A58; --ra-sun:#E8A55A;
  --ra-vellum:rgb(246 243 236 / .68); --ra-trace-filter:none;
  --ra-font:"Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --ra-mono:"Spline Sans Mono", ui-monospace, monospace;
  --ra-ease:cubic-bezier(.22,1,.36,1);
  --bar-h:60px; --gut:clamp(16px,4vw,56px);

  --iz-bg:var(--ra-paper); --iz-fg:var(--ra-ink); --iz-card:var(--ra-card); --iz-border:var(--ra-line);
  --iz-muted-fg:var(--ra-muted); --iz-primary:var(--ra-ink); --iz-primary-fg:var(--ra-paper); --iz-ring:var(--ra-accent);
  --iz-radius-sm:3px; --iz-radius-md:4px; --iz-font:var(--ra-font); --iz-mono:var(--ra-mono);
  --stage-ink:var(--ra-ink); --stage-paper:var(--ra-paper); --stage-signal:var(--ra-accent);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ra-paper:#1B2029; --ra-paper-2:#212733; --ra-card:#262C37; --ra-ink:#ECE7DE; --ra-muted:#A9ADB4;
    --ra-line:rgb(236 231 222 / .14); --ra-line-2:rgb(236 231 222 / .3);
    --ra-accent:#FFB866; --ra-moss:#9DAB80; --ra-sun:#FFB866;
    --ra-vellum:rgb(32 38 49 / .62); --ra-trace-filter:invert(1) brightness(1.15);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ra-paper:#1B2029; --ra-paper-2:#212733; --ra-card:#262C37; --ra-ink:#ECE7DE; --ra-muted:#A9ADB4;
  --ra-line:rgb(236 231 222 / .14); --ra-line-2:rgb(236 231 222 / .3);
  --ra-accent:#FFB866; --ra-moss:#9DAB80; --ra-sun:#FFB866;
  --ra-vellum:rgb(32 38 49 / .62); --ra-trace-filter:invert(1) brightness(1.15);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar-h) + 12px)}
body{margin:0;background:var(--ra-paper);color:var(--ra-ink);font:400 17px/1.6 var(--ra-font);-webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum" 0;overflow-x:clip}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p{margin:0}
.mono{font-family:var(--ra-mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;font-weight:400}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--ra-accent);outline-offset:3px}
.skip{position:fixed;left:12px;top:-60px;z-index:200;padding:10px 14px;background:var(--ra-ink);color:var(--ra-paper);text-decoration:none}
.skip:focus{top:12px}

/* ── type */
.display{font-weight:300;font-size:clamp(2.75rem,6.6vw,6.6rem);line-height:.96;letter-spacing:-.04em;text-wrap:balance}
.h2{font-weight:300;font-size:clamp(2.1rem,4.4vw,4.2rem);line-height:1;letter-spacing:-.035em;text-wrap:balance}
.h3{font-weight:400;font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.025em;line-height:1.1}
.kicker{color:var(--ra-accent);margin-bottom:22px;display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:28px;height:1px;background:currentColor}
.lede,.sec-lede,.side-lede{color:var(--ra-muted);max-width:44ch;font-size:1.06rem}
.fine{font-size:.82rem;color:var(--ra-muted)}

/* ── buttons */
.ra-btn.iz-btn{--h:50px;height:var(--h);padding:0 22px;border-radius:2px;background:var(--ra-ink);color:var(--ra-paper);font:500 15.5px/1 var(--ra-font);letter-spacing:.005em;gap:12px;text-decoration:none}
.ra-btn.iz-btn:hover{background:color-mix(in oklch,var(--ra-ink) 86%,var(--ra-accent))}
.ra-btn .iz-i{width:18px;height:18px}
.ra-link{font-weight:500;text-decoration:underline;text-decoration-color:var(--ra-line-2);text-underline-offset:6px;text-decoration-thickness:1px;padding:12px 2px}
.ra-link:hover{text-decoration-color:currentColor}
.ra-chip{min-height:40px;padding:0 14px;border:1px solid var(--ra-line-2);border-radius:2px;background:transparent;color:inherit;cursor:pointer;
  font:500 .74rem/1 var(--ra-mono);letter-spacing:.06em;text-transform:uppercase;transition:background .2s,border-color .2s,color .2s}
.ra-chip:hover{border-color:var(--ra-ink);background:color-mix(in oklch,var(--ra-ink) 5%,transparent)}
.ra-chip[aria-pressed="true"]{background:var(--ra-ink);color:var(--ra-paper);border-color:var(--ra-ink)}

/* ── loader */
.loader{position:fixed;inset:0;z-index:300;display:grid;place-content:center;gap:18px;background:var(--ra-paper);color:var(--ra-ink)}
.loader-arc{width:min(320px,70vw);overflow:visible}
.loader-arc path{stroke:var(--ra-line-2);stroke-width:1.2}
.loader-arc .arc{stroke:var(--ra-ink);stroke-dasharray:260;stroke-dashoffset:260;animation:ra-draw 1.4s var(--ra-ease) forwards}
.loader-arc .sun{fill:var(--ra-sun)}
.loader-line{display:flex;justify-content:space-between;gap:24px;font-size:.95rem}
@keyframes ra-draw{to{stroke-dashoffset:0}}
html:not(.js) .loader{display:none}

/* ── top bar: a contents line, not a pill */
.bar{position:fixed;inset:0 0 auto;z-index:50;height:var(--bar-h);display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:20px;
  padding:0 var(--gut);background:color-mix(in srgb,var(--ra-paper) 90%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ra-line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:44px}
.brand-mark{width:24px;height:24px}
.brand-name{font-weight:500;letter-spacing:-.01em}
.brand-sub{color:var(--ra-muted)}
.folio{justify-self:center;color:var(--ra-muted)}
.folio [data-folio]{color:var(--ra-ink)}
.menu{display:contents}
.contents-toggle{display:none}
.contents-list{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.contents-list a{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 10px;text-decoration:none;font-size:.95rem}
.contents-list a .mono{color:var(--ra-muted);font-size:.68rem}
.contents-list a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--ra-line-2)}
.light-seg.iz-seg{padding:3px}
.light-seg .iz-seg-opt{height:32px;padding:0 11px;font:500 .72rem/1 var(--ra-mono);letter-spacing:.05em;text-transform:uppercase;border-radius:3px}
.light-seg .iz-seg-thumb{border-radius:3px}

/* ── spreads */
main{position:relative;z-index:1}
.spread{position:relative;padding:calc(var(--bar-h) + clamp(40px,7vw,96px)) var(--gut) clamp(72px,10vw,140px)}
.corner-folio{position:absolute;right:var(--gut);bottom:24px;color:var(--ra-muted);font-size:.72rem}
.cap{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;padding-top:12px;font-size:.9rem;color:var(--ra-muted);border-top:1px solid var(--ra-line);margin-top:12px}
.cap .mono{color:var(--ra-ink)}

/* ── PLATE I hero */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7.4fr);gap:clamp(28px,4vw,64px);align-items:end;min-height:100svh;padding-right:0}
.hero-copy{padding-bottom:clamp(8px,4vw,64px);position:relative;z-index:2}
.hero .display{margin-bottom:28px}
.hero .lede{margin-bottom:34px}
.hero-acts{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.hero-plate{margin:0;padding-right:var(--gut)}
.plate-frame{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ra-paper-2);outline:1px solid var(--ra-line);outline-offset:-1px;touch-action:pan-y}
.plate-frame picture,.plate-frame picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.plate-dusk{opacity:0;transition:opacity .6s var(--ra-ease)}
.vellum{position:absolute;inset:0;--vx:58%;clip-path:inset(0 0 0 var(--vx));background:var(--ra-vellum);-webkit-backdrop-filter:blur(2px) saturate(.7);backdrop-filter:blur(2px) saturate(.7)}
.vellum .trace{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--ra-trace-filter)}
.vellum-note{position:absolute;right:14px;bottom:12px;color:var(--ra-muted);font-size:.66rem}
.vellum::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 46px,var(--ra-line) 46px 47px),repeating-linear-gradient(0deg,transparent 0 46px,var(--ra-line) 46px 47px);opacity:.35}
.vellum-handle{position:absolute;top:0;bottom:0;left:58%;width:56px;margin-left:-28px;display:grid;place-items:center;cursor:ew-resize;z-index:3;touch-action:none}
.vellum-handle::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--ra-ink);opacity:.55;box-shadow:-6px 0 14px rgb(0 0 0 / .12)}
.vellum-handle .grip{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--ra-card);color:var(--ra-ink);
  box-shadow:0 0 0 1px var(--ra-line-2),0 10px 24px -10px rgb(0 0 0 / .4);transition:transform .3s var(--ra-ease)}
.vellum-handle .grip svg{width:20px;height:20px}
.vellum-handle:hover .grip,.vellum-handle.is-drag .grip{transform:scale(1.08)}
.vellum-handle .tab{position:absolute;top:14px;left:50%;translate:-50% 0;padding:5px 8px;background:var(--ra-ink);color:var(--ra-paper);font-size:.64rem}
.vellum-handle:focus-visible{outline:none}
.vellum-handle:focus-visible .grip{outline:2px solid var(--ra-accent);outline-offset:3px}
.cap-hint{margin-left:auto}
.trace-acts{display:flex;gap:8px;margin-top:14px}
:root[data-theme="dark"] .plate-dusk{opacity:1}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .plate-dusk{opacity:1}}

/* ── PLATE II one day of sun */
.study{position:relative;background:var(--ra-paper)}
.study-pin{height:100svh;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(320px,1fr);gap:clamp(24px,3vw,48px);
  padding:calc(var(--bar-h) + 20px) var(--gut) 28px}
.study-plate{position:relative;overflow:hidden;background:var(--ra-paper-2);outline:1px solid var(--ra-line);outline-offset:-1px;min-height:0}
.seq{position:absolute;inset:0;width:100%;height:100%;display:none}
.has-seq .seq{display:block}
.has-seq .fallback{display:none}
.fallback,.fallback img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fallback .f-dusk{opacity:0}
.f-tint{position:absolute;inset:0;mix-blend-mode:multiply;opacity:0;background:linear-gradient(115deg,#ffcf9a,#f3a35a 60%,#c66a2a)}
.f-sweep{position:absolute;inset:-10%;mix-blend-mode:soft-light;opacity:.55;pointer-events:none;background:radial-gradient(42% 60% at var(--sx,80%) 30%,rgb(255 236 205 / .9),transparent 70%)}
.fallback img{transform-origin:60% 50%;will-change:transform}
.plate-tag{position:absolute;left:14px;bottom:12px;padding:6px 9px;background:color-mix(in srgb,var(--ra-paper) 86%,transparent);color:var(--ra-ink)}
.study-side{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.study-side .h2{font-size:clamp(2rem,3.4vw,3.4rem);margin-bottom:12px}
.side-lede{margin-bottom:12px;font-size:.98rem}
.dial-row{display:grid;grid-template-columns:minmax(120px,180px) minmax(0,1fr);gap:22px;align-items:center;margin:6px 0 16px}
.chart{width:100%}
.sunpath{width:100%;overflow:visible}
.sunpath .ring{fill:none;stroke:var(--ra-line-2);stroke-width:1}
.sunpath .ring.thin{stroke:var(--ra-line)}
.sunpath .axis{stroke:var(--ra-line);stroke-width:1}
.sunpath .card-l{font:500 11px var(--ra-mono);fill:var(--ra-muted);text-anchor:middle}
.sunpath .day{fill:none;stroke:var(--ra-line-2);stroke-width:1.2;stroke-dasharray:3 4}
.sunpath .day-done{fill:none;stroke:var(--ra-accent);stroke-width:2}
.sunpath .hours text{font:400 9px var(--ra-mono);fill:var(--ra-muted);text-anchor:middle}
.sunpath .hours line{stroke:var(--ra-line-2)}
.sunpath .shadow{stroke:var(--ra-ink);stroke-width:2;stroke-linecap:round;opacity:.7}
.sunpath .gnomon{fill:var(--ra-ink)}
.sunpath .sun{fill:var(--ra-sun);stroke:var(--ra-paper);stroke-width:2}
.readout{display:grid;gap:14px}
.hour{font-size:clamp(2rem,3.2vw,2.8rem);letter-spacing:.02em;color:var(--ra-ink);font-weight:400;font-variant-numeric:tabular-nums;line-height:1}
.hour-ctl{display:grid;gap:6px;color:var(--ra-muted)}
.hour-ctl input{width:100%;accent-color:var(--ra-accent);height:28px}
.moments{list-style:none;margin:0;padding:0;display:grid;gap:2px;border-top:1px solid var(--ra-line)}
.moment{padding:9px 0;border-bottom:1px solid var(--ra-line);color:var(--ra-muted);transition:color .45s var(--ra-ease),opacity .45s var(--ra-ease)}
.moment p{font-size:.9rem;line-height:1.42}
.moment .mono{color:var(--ra-muted);margin-bottom:4px;position:relative;display:inline-block;transition:color .45s}
.moment .mono::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ra-ease)}
.moment.is-on{color:var(--ra-ink)}
.moment.is-on .mono{color:var(--ra-accent)}
.moment.is-on .mono::after{transform:scaleX(1)}

/* ── PLATE III works */
.sec-head{max-width:1100px;margin-bottom:clamp(36px,5vw,64px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px 48px;align-items:end}
.sec-head .kicker{grid-column:1/-1;margin-bottom:6px}
.index{list-style:none;margin:0;padding:0;border-top:1px solid var(--ra-ink)}
.work{border-bottom:1px solid var(--ra-line)}
.work-row{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:3.2rem minmax(0,1.3fr) minmax(0,1.6fr) minmax(0,1fr) 4.6rem 6.4rem 2.2rem;
  align-items:baseline;gap:16px;padding:22px 4px;cursor:pointer;transition:background .25s,padding .35s var(--ra-ease)}
.work-row:hover{background:color-mix(in oklch,var(--ra-ink) 4%,transparent);padding-left:14px}
.work-row:focus-visible{outline:2px solid var(--ra-accent);outline-offset:-2px}
.work-row .name{font-size:clamp(1.3rem,2.1vw,1.9rem);font-weight:300;letter-spacing:-.02em;line-height:1.1}
.work-row .use,.work-row .site{color:var(--ra-muted);font-size:.95rem}
.work-row .n,.work-row .yr,.work-row .area{color:var(--ra-muted)}
.work-row .area{text-align:right}
.work-row .plus{justify-self:end;width:22px;height:22px;transition:transform .45s var(--ra-ease)}
.work-row .plus svg{width:100%;height:100%}
.work-row[aria-expanded="true"] .plus{transform:rotate(45deg)}
.work-row[aria-expanded="true"] .name{color:var(--ra-accent)}
.work-body{display:grid;grid-template-columns:3.2rem minmax(0,1.3fr) minmax(0,2.6fr);gap:16px;padding:0 4px 26px}
.work-body[hidden]{display:none}
.work-body>p{grid-column:2;max-width:46ch;color:var(--ra-ink)}
.facts{margin:0;display:grid;gap:10px}
.work-body .facts{grid-column:3;grid-template-columns:repeat(3,minmax(0,1fr))}
.facts dt{color:var(--ra-muted);margin-bottom:2px}
.facts dd{margin:0;font-size:.95rem}
.peek{position:fixed;left:0;top:0;z-index:40;width:300px;aspect-ratio:16/10;pointer-events:none;overflow:hidden;opacity:0;visibility:hidden;
  box-shadow:0 24px 50px -24px rgb(0 0 0 / .5);outline:1px solid var(--ra-line-2);background:var(--ra-paper-2)}
.peek img{width:100%;height:100%;object-fit:cover;transform:scale(1.9)}

/* ── PLATE IV objects */
.objects{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:center;padding:clamp(72px,9vw,128px) var(--gut) clamp(72px,9vw,128px) 0}
.objects-plate{margin:0}
.objects-plate picture img{width:100%;aspect-ratio:16/10;object-fit:cover}
.objects-plate .cap{padding-left:var(--gut)}
.catalogue{list-style:none;margin:28px 0 14px;padding:0;border-top:1px solid var(--ra-ink)}
.obj{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--ra-line)}
.obj-name{font-size:1.2rem;font-weight:400;letter-spacing:-.01em}
.obj-spec{color:var(--ra-muted);margin-top:4px;font-size:.68rem}
.obj-price{font-size:.8rem}
.reserve{min-width:112px}

/* ── PLATE V commission */
.commission .sec-head{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.study-form{max-width:1100px}
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px 40px}
.form-grid .iz-field{max-width:none;margin:0;border:0;padding:0;min-width:0}
.iz-label{font:500 .74rem/1.2 var(--ra-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ra-ink);padding:0}
.iz-input{height:48px;background:var(--ra-card);box-shadow:inset 0 0 0 1px var(--ra-line-2);font:400 1rem var(--ra-font)}
textarea.iz-input{height:auto;padding:12px;resize:vertical;line-height:1.5}
.span2{grid-column:1/-1}
.type-seg.iz-seg{padding:4px;flex-wrap:wrap;justify-self:start;max-width:100%}
.type-seg .iz-seg-opt{height:40px;padding:0 18px;font:500 .95rem var(--ra-font)}
.compass-field{justify-items:start}
.compass{position:relative;width:236px;height:236px;margin-top:6px}
.compass-face{position:absolute;inset:18px;width:200px;height:200px}
.compass-face circle{fill:none;stroke:var(--ra-line-2)}
.compass-face circle.thin{stroke:var(--ra-line)}
.compass-face path{stroke:var(--ra-line-2)}
.compass-face .needle{stroke:var(--ra-accent);stroke-width:2.5;stroke-linecap:round;transform-origin:100px 100px;transition:transform .7s cubic-bezier(.3,1.4,.5,1)}
.compass-face circle:last-child{fill:var(--ra-ink);stroke:none}
.pt{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;display:grid;place-items:center;cursor:pointer}
.pt input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.pt span{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;font:500 .7rem var(--ra-mono);letter-spacing:.04em;background:var(--ra-paper);
  box-shadow:inset 0 0 0 1px var(--ra-line-2);transition:background .2s,color .2s}
.pt input:checked+span{background:var(--ra-ink);color:var(--ra-paper);box-shadow:none}
.pt input:focus-visible+span{outline:2px solid var(--ra-accent);outline-offset:2px}
.pt:hover span{box-shadow:inset 0 0 0 1px var(--ra-ink)}
.pt.n{left:50%;top:10%}.pt.ne{left:78.3%;top:21.7%}.pt.e{left:90%;top:50%}.pt.se{left:78.3%;top:78.3%}
.pt.s{left:50%;top:90%}.pt.sw{left:21.7%;top:78.3%}.pt.w{left:10%;top:50%}.pt.nw{left:21.7%;top:21.7%}
.compass-read{margin-top:10px;color:var(--ra-muted);text-transform:none;letter-spacing:.01em;font-size:.82rem;max-width:34ch}
.compass-read b{color:var(--ra-ink);font-weight:500}
.side-fields{display:grid;gap:22px;align-content:start}
.form-foot{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:34px;padding-top:24px;border-top:1px solid var(--ra-line)}
.ticket{max-width:640px;padding:32px;background:var(--ra-card);box-shadow:inset 0 0 0 1px var(--ra-line-2);position:relative}
.ticket::after{content:"";position:absolute;left:0;right:0;top:-1px;height:8px;background:radial-gradient(circle at 6px -2px,var(--ra-paper) 5px,transparent 5.5px) 0 0/12px 8px repeat-x}
.ticket[hidden]{display:none}
.ticket .h3{margin:6px 0 20px}
.ticket .facts{margin-bottom:22px}
.ticket .facts div{display:grid;grid-template-columns:5rem 1fr;gap:12px;padding:8px 0;border-top:1px solid var(--ra-line)}

/* ── colophon */
.colophon{position:relative;z-index:1;border-top:1px solid var(--ra-ink);padding:40px var(--gut) calc(40px + env(safe-area-inset-bottom))}
.colo-in{display:grid;grid-template-columns:auto 1fr auto;gap:14px 32px;align-items:baseline}
.colo-brand{display:flex;align-items:center;gap:10px;font-weight:500}
.colo-brand svg{width:22px;height:22px}
.colophon .mono{color:var(--ra-muted)}
.colophon nav{display:flex;gap:4px;flex-wrap:wrap}
.colophon nav a{padding:10px;min-height:44px;display:inline-flex;align-items:center}
.colophon .fine{grid-column:1/-1}
.credit{font-weight:500}

/* ── gnomon cursor (fine pointers only; set up in JS) */
.gnomon-cursor{position:fixed;left:0;top:0;z-index:400;pointer-events:none;opacity:0;--sa:-35deg}
.g-dot{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--ra-ink);box-shadow:0 0 0 2px var(--ra-paper);transition:transform .3s var(--ra-ease)}
.g-shadow{position:absolute;left:0;top:-1px;width:30px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--ra-ink),transparent);opacity:.45;transform-origin:0 50%;transform:rotate(var(--sa));transition:width .3s var(--ra-ease)}
.g-label{position:absolute;left:16px;top:12px;padding:5px 8px;background:var(--ra-ink);color:var(--ra-paper);font:500 .64rem/1 var(--ra-mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .3s var(--ra-ease)}
.gnomon-cursor.is-label .g-label{opacity:1;transform:none}
.gnomon-cursor.is-hover .g-dot{transform:scale(1.8)}
.gnomon-cursor.is-hover .g-shadow{width:44px}
.cursor-on,.cursor-on a,.cursor-on button,.cursor-on label,.cursor-on .vellum-handle{cursor:none}
.cursor-on input,.cursor-on textarea{cursor:auto}

/* ── reduced motion: the study is a still you set with the range input */
.stage-reduced .study-pin{height:auto;min-height:100svh}
.stage-reduced .moment{color:var(--ra-ink)}
.stage-reduced .moment .mono::after{transform:scaleX(1)}
@media (prefers-reduced-motion: reduce){.loader{display:none}.plate-dusk,.moment,.compass-face .needle{transition:none}}

/* ── tablet */
@media (max-width:1100px){
  .contents-list a{padding:0 7px;font-size:.9rem}
  .contents-list a .mono{display:none}
  .brand-sub{display:none}
  .study-pin{grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr)}
  .dial-row{grid-template-columns:130px minmax(0,1fr);gap:16px}
}
/* ── phone */
@media (max-width:860px){
  :root{--bar-h:56px}
  body{font-size:16px}
  .bar{grid-template-columns:auto 1fr auto;gap:10px}
  .folio{display:none}
  .contents-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid var(--ra-line-2);border-radius:2px;background:transparent;color:inherit;font:500 .72rem var(--ra-mono);letter-spacing:.06em;text-transform:uppercase;justify-self:end}
  .contents-toggle svg{width:18px;height:18px}
  .menu{display:none;position:absolute;right:var(--gut);top:calc(100% + 8px);min-width:230px;padding:8px;background:var(--ra-card);box-shadow:0 0 0 1px var(--ra-line-2),0 18px 40px -18px rgb(0 0 0 / .4)}
  .menu.is-open{display:grid;gap:8px}
  .contents-list{flex-direction:column}
  .contents-list a .mono{display:inline}
  .light-ctl{padding:8px 6px 4px;border-top:1px solid var(--ra-line)}
  .hero{grid-template-columns:minmax(0,1fr);min-height:0;padding-right:var(--gut);gap:28px}
  .hero-plate{padding-right:0;margin:0 calc(var(--gut) * -1)}
  .hero-plate .cap,.trace-acts{padding:0 var(--gut)}
  .cap-hint{margin-left:0;width:100%}
  .study-pin{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,50svh) minmax(0,1fr);gap:16px;padding:calc(var(--bar-h) + 10px) var(--gut) 16px}
  .study-side .kicker,.side-lede{display:none}
  .study-side .h2{font-size:1.9rem;margin-bottom:6px}
  .dial-row{grid-template-columns:96px minmax(0,1fr);gap:16px;margin:2px 0 10px}
  .readout{gap:6px}
  .hour{font-size:1.9rem}
  .moments{position:relative;border-top:0;min-height:110px}
  .moment{position:absolute;inset:0 0 auto;border:0;opacity:0;padding:0}
  .moment.is-on{opacity:1}
  .moment.is-on{color:var(--ra-ink)}
.moment.is-on .mono{color:var(--ra-accent)}
  .stage-reduced .study-pin{grid-template-rows:auto auto}
  .stage-reduced .study-plate{aspect-ratio:16/10}
  .stage-reduced .moments{min-height:0}
  .stage-reduced .moment{position:static;opacity:1;padding:10px 0;border-bottom:1px solid var(--ra-line)}
  .sec-head,.commission .sec-head{grid-template-columns:minmax(0,1fr)}
  .work-row{grid-template-columns:2.2rem minmax(0,1fr) 2rem;grid-template-areas:"n name plus" ". use use" ". meta meta";gap:4px 12px;padding:18px 2px}
  .work-row .n{grid-area:n}.work-row .name{grid-area:name}.work-row .plus{grid-area:plus}
  .work-row .use{grid-area:use}
  .work-row .site,.work-row .yr,.work-row .area{display:none}
  .work-body{grid-template-columns:minmax(0,1fr);padding:0 2px 22px 2.6rem}
  .work-body>p,.work-body .facts{grid-column:1}
  .work-body .facts{grid-template-columns:minmax(0,1fr)}
  .peek{display:none}
  .objects{grid-template-columns:minmax(0,1fr);padding:64px var(--gut)}
  .objects-plate{margin:0 calc(var(--gut) * -1)}
  .obj{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"a b" "c c"}
  .obj>div{grid-area:a}.obj-price{grid-area:b}.reserve{grid-area:c;justify-self:start}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .colo-in{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:380px){
  .brand-name{font-size:.95rem}
  .display{font-size:2.5rem}
  .type-seg .iz-seg-opt{padding:0 12px}
}

@media (min-width:861px) and (max-height:960px){
  .side-lede{display:none}
  .study-side .h2{font-size:clamp(1.9rem,3vw,2.8rem)}
  .dial-row{grid-template-columns:minmax(110px,150px) minmax(0,1fr)}
}

.works.spread{padding-bottom:clamp(40px,6vw,80px)}
.objects{padding-top:clamp(40px,6vw,80px)}
.objects+.commission{padding-top:clamp(72px,8vw,120px)}
.fine.mono{text-transform:none;letter-spacing:.01em;font-size:.8rem}

.objects{padding-bottom:clamp(40px,5vw,72px)}
@media (max-width:860px){
  .vellum-note{display:none}
  .spread{padding-top:calc(var(--bar-h) + 36px)}
  .works.spread{padding-top:56px}
  .commission.spread{padding-top:64px}
}
.type-field{grid-column:1}
.compass-field{grid-column:1}
.side-fields{grid-column:2;grid-row:2 / span 2}
@media (max-width:860px){.type-field,.compass-field,.side-fields{grid-column:1;grid-row:auto}}