/* EXTRO v2 — dark studio look. Warm black, bone ink, the can's copper. Square-cut controls, editorial header. */
:root{
  --black:#0b0a09; --ink:#121110; --panel:#171514; --line:rgba(241,239,233,.12); --line-2:rgba(241,239,233,.22);
  --bone:#f1efe9; --mute:#a39d95; --dim:#6a645e;
  --copper:#c87a45; --copper-2:#e09159;
  --display:"Archivo","Arial Black",system-ui,sans-serif;
  --body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --label:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --g:clamp(18px,4.4vw,72px);
  --ease:cubic-bezier(.16,1,.3,1); --ui:cubic-bezier(.4,0,.2,1);
  color-scheme:dark;
}
/* light theme: the shop page reads as a bright, white "product" room (Void-style), everything else stays the dark studio.
   Nearly every rule above and below is written against --black/--bone/--mute/--dim/--line, so redefining the roles here
   re-themes the whole page; only the handful of hardcoded dark rgba() values get an explicit override below. */
body.light{
  --black:#f7f5f0; --ink:#ece9e2; --panel:#e3dfd6; --line:rgba(11,10,9,.1); --line-2:rgba(11,10,9,.2);
  --bone:#0f0e0c; --mute:#6b6259; --dim:#9a9289;
  color-scheme:light;
}
body.light .hdr.solid{background:rgba(247,245,240,.86)}
body.light .drawer{background:rgba(247,245,240,.97)}
body.light .seg button[aria-pressed="true"]{background:rgba(11,10,9,.045)}
body.light ::selection{background:var(--copper);color:var(--black)}
body.light .x{background:rgba(200,122,69,.12)}

/* research/citations list, shared between the shop teaser and the dedicated research page */
.studies{max-width:860px;border-top:1px solid var(--line)}
.study{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:8px 20px;padding:16px 0;border-bottom:1px solid var(--line)}
.study b{font-weight:600;font-size:14.5px}
.study span{display:block;font-size:12.5px;color:var(--mute);margin-top:2px}
.study a{flex:none;font:600 10px/1 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--copper);white-space:nowrap}
.study a:hover{text-decoration:underline}
.studies-note{margin:20px 0 0;font-size:12.5px;color:var(--dim);max-width:64ch}

/* honest stand-in for real product photography (none shot yet) — distinct from the 3D render so it never
   reads as a finished product photo; the live 3D viewer stays the real interactive option on the shop page */
.photo-placeholder{display:grid;place-items:center;gap:14px;width:100%;height:100%;color:var(--mute);background:
  repeating-linear-gradient(135deg,rgba(200,122,69,.05) 0 2px,transparent 2px 14px)}
.photo-placeholder svg{width:46px;height:auto;stroke:var(--copper);fill:none;stroke-width:1.4;opacity:.85}
.photo-placeholder span{font:600 10px/1.5 var(--label);letter-spacing:.18em;text-transform:uppercase;text-align:center;color:var(--dim)}

/* same-origin cross-document view transitions: a soft crossfade between the dark home/links studio and the white shop,
   instead of a hard flash. Native browser support only (Edge/Chrome); everywhere else it's a plain instant navigation. */
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.5s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--black);color:var(--bone);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:1px solid var(--copper);outline-offset:4px}
::selection{background:var(--copper);color:var(--black)}

.label{font:600 11px/1.4 var(--label);letter-spacing:.26em;text-transform:uppercase}
.display{font-family:var(--display);font-weight:800;font-stretch:125%;text-transform:uppercase;line-height:.9;letter-spacing:-.01em;margin:0;text-wrap:balance}
.copper{color:var(--copper)} .mute{color:var(--mute)} .dim{color:var(--dim)}
.wordmark{display:block;fill:currentColor}

/* ---------- header: full-width editorial bar ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:40;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;height:calc(env(safe-area-inset-top,0px) + 74px);padding:env(safe-area-inset-top,0px) var(--g) 0;transition:background .4s var(--ui)}
.hdr::after{content:"";position:absolute;left:var(--g);right:var(--g);bottom:0;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.hdr.solid{background:rgba(11,10,9,.82);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1)}
.hdr.solid::after{transform:scaleX(1)}
.hdr-logo{width:104px;color:var(--bone)}
.hdr-index{display:flex;align-items:center;gap:14px;color:var(--mute);min-width:0}
.hdr-index b{font:600 11px/1 var(--label);letter-spacing:.24em;color:var(--copper);font-variant-numeric:tabular-nums}
.hdr-index span{font:600 11px/1 var(--label);letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr-index i{display:block;width:28px;height:1px;background:var(--line-2)}
.hdr-actions{display:flex;justify-content:flex-end;align-items:center;gap:26px}
.hdr-actions a.t{font:600 11px/1 var(--label);letter-spacing:.24em;text-transform:uppercase;color:var(--mute);position:relative;padding:6px 0;transition:color .25s var(--ui)}
.hdr-actions a.t::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--copper);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.hdr-actions a.t:hover,.hdr-actions a.t[aria-current="page"]{color:var(--bone)}
.hdr-actions a.t:hover::after,.hdr-actions a.t[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.menu-btn{display:none;align-items:center;gap:10px;height:40px;padding:0;border:0;background:none;cursor:pointer;font:600 11px/1 var(--label);letter-spacing:.24em;text-transform:uppercase}
.menu-btn i{display:block;width:18px;height:7px;border-block:1px solid var(--bone)}
.drawer{position:fixed;inset:0;z-index:39;background:rgba(9,8,7,.97);display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:0 var(--g) calc(env(safe-area-inset-bottom,0px) + 48px)}
.drawer a{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--line);padding:14px 0;font-family:var(--display);font-weight:800;font-stretch:125%;font-size:clamp(34px,10vw,64px);line-height:1;text-transform:uppercase}
.drawer a small{font:600 11px/1 var(--label);letter-spacing:.24em;color:var(--copper)}
@media (max-width:860px){ .hdr{grid-template-columns:1fr auto} .hdr-index{display:none} .hdr-actions a.t,.hdr-actions .btn{display:none} .menu-btn{display:flex} .hdr-logo{width:88px} }

/* ---------- buttons: square-cut, outline, copper wipe ---------- */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:18px;height:52px;padding:0 22px 0 24px;border:1px solid var(--line-2);border-radius:1px;background:transparent;overflow:hidden;cursor:pointer;
  font:600 11px/1 var(--label);letter-spacing:.24em;text-transform:uppercase;color:var(--bone);transition:border-color .3s var(--ui),color .3s var(--ui)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--copper);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.btn .arr{display:inline-block;width:14px;height:1px;background:currentColor;position:relative;transition:transform .4s var(--ease)}
.btn .arr::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.btn:hover{border-color:var(--copper)}
.btn:hover::before{transform:scaleX(1);transform-origin:left}
.btn:hover .arr{transform:translateX(5px)}
.btn.solid{background:var(--bone);color:var(--black);border-color:var(--bone)}
.btn.solid:hover{color:var(--bone);border-color:var(--copper)}
.btn.sm{height:40px;padding:0 16px 0 18px;gap:14px}

/* icon from the can, recoloured with a mask */
.ico{display:inline-block;width:44px;height:44px;background:var(--copper);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;flex:none}

/* line-mask reveals */
.reveal .ln{display:block;overflow:hidden;padding-block:.08em;margin-block:-.08em}
.reveal .ln>span{display:inline-block}
.js .reveal .ln>span{transform:translateY(105%);transition:transform 1.1s var(--ease) calc(var(--i,0)*70ms)}
.js .reveal.in .ln>span{transform:none}
.js .reveal .fade{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ui) calc(var(--i,0)*70ms + 180ms),transform .8s var(--ease) calc(var(--i,0)*70ms + 180ms)}
.js .reveal.in .fade{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .js .reveal .ln>span,.js .reveal .fade{transform:none;opacity:1;transition:none} }

/* film grain + vignette over the studio */
.grain{position:fixed;inset:-50%;z-index:30;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></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)}}
@media (prefers-reduced-motion:reduce){ .grain{animation:none} }
.vignette{position:fixed;inset:0;z-index:2;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%)}

/* ---------- footer ---------- */
.foot{position:relative;z-index:5;background:var(--black);padding:96px var(--g) calc(env(safe-area-inset-bottom,0px) + 28px);border-top:1px solid var(--line)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:40px;align-items:start}
.foot h4{margin:0 0 16px;font:600 10px/1 var(--label);letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot li a{font-size:14px;color:var(--mute);transition:color .2s var(--ui)} .foot li a:hover{color:var(--bone)}
.foot-tag{max-width:30ch;color:var(--mute);margin:18px 0 0}
.foot-mark{position:relative;margin-top:80px;color:var(--bone)} .foot-mark svg{width:100%;height:auto;display:block}
/* liquid copper fill: a second copper copy of the mark, masked to a soft pool that trails the pointer
   (the lag/lerp lives in chrome.js; this is just a bigger, softer-edged mask than a flat spotlight,
   like a drop of water or a rubber stamp passing through the letterforms) */
.foot-mark-fill{position:absolute;inset:0;color:var(--copper);pointer-events:none;filter:blur(2px);
  -webkit-mask-image:radial-gradient(230px circle at var(--mx,-999px) var(--my,-999px),#000 0%,#000 28%,transparent 82%);
  mask-image:radial-gradient(230px circle at var(--mx,-999px) var(--my,-999px),#000 0%,#000 28%,transparent 82%)}
.foot-mark-fill svg{width:100%;height:auto;display:block}
.foot-small{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font-size:11px;line-height:1.6;color:var(--dim)}
.foot-small p{margin:0;max-width:78ch}
@media (max-width:860px){ .foot-top{grid-template-columns:repeat(2,minmax(0,1fr))} .foot-brand{grid-column:1/-1} }