/* ═══════════════════════════════════════════════════════════════════════════
   BOURDON №114 “HERMINE” — Klokgieterij Nagel & Cie.
   Idea: a bell is never cast in tune, it is cut into tune. Nothing on this page
   arrives; everything is removed until what is left is correct.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── fonts ────────────────────────────────────────────────────────────────── */
@font-face{
  font-family:'Geist';
  src:url('assets/fonts/Geist-Variable.woff2') format('woff2-variations'),
      url('assets/fonts/Geist-Variable.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Geist Mono';
  src:url('assets/fonts/GeistMono-Variable.woff2') format('woff2-variations'),
      url('assets/fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight:300 600; font-style:normal; font-display:swap;
}

/* ── tokens ───────────────────────────────────────────────────────────────── */
:root{
  /* surface: near-black with a green cast, three steps of elevation */
  --e0:#080A09;
  --e1:#0C0F0D;
  --e2:#131714;
  --e3:#1B211C;

  /* the one accent — phosphor, the colour of an analyser trace */
  --acc:#B4FF39;
  --acc-40:rgba(180,255,57,.40);
  --acc-16:rgba(180,255,57,.16);
  --acc-08:rgba(180,255,57,.08);

  /* The warm neutral: bone with bronze in it. Three text tiers and two line
     tiers. The floor for anything with a word in it is --ink-28 at 4.7:1 on
     --e0; --ink-14 and --ink-07 are hairlines and never carry text. */
  --ink:#E4E0D4;
  --ink-72:rgba(228,224,212,.74);
  --ink-46:rgba(228,224,212,.60);
  --ink-28:rgba(228,224,212,.53);
  --ink-14:rgba(228,224,212,.15);
  --ink-07:rgba(228,224,212,.08);
  --ink-edge:rgba(228,224,212,.30);   /* drawn edges, not text */

  /* quarantined heat — only §03, only while the metal is above ambient */
  --heat-hi:#FF8A3D;
  --heat:#E8480A;
  --heat-lo:#7A2404;

  --f-dsp:'Geist',ui-sans-serif,system-ui,sans-serif;
  --w-dsp:680;
  --f-ui:'Geist',ui-sans-serif,system-ui,sans-serif;
  --f-mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* one place to retune the whole page */
  --t-dsp:clamp(4.2rem,13.5vw,17rem);
  --t-l:clamp(2.8rem,7.6vw,7.4rem);
  --t-m:clamp(2.2rem,5.4vw,5rem);
  --t-h3:clamp(1.35rem,2.2vw,2rem);
  --t-body:clamp(1rem,.62rem + .58vw,1.19rem);
  --t-mono:clamp(.66rem,.58rem + .18vw,.78rem);
  --t-mono-s:clamp(.6rem,.54rem + .13vw,.69rem);

  --gut:clamp(1.15rem,4.6vw,5.5rem);
  --band:clamp(6rem,14vh,11rem);
  --maxw:96rem;

  --e-cut:cubic-bezier(.16,1,.3,1);
  --e-tool:cubic-bezier(.62,.04,.3,1);
  --e-soft:cubic-bezier(.33,1,.68,1);

  --cut-fill:var(--e0);
}

/* lenis / locomotive v5 requirements, inlined so there is no extra request */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}

/* ── reset ────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,p,dl,dd,ol,ul,figure,table,caption{margin:0;padding:0}
ol,ul{list-style:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

body{
  background:var(--e0);
  color:var(--ink);
  font-family:var(--f-ui);
  font-size:var(--t-body);
  font-weight:380;
  line-height:1.52;
  letter-spacing:-.006em;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-loading{overflow:hidden}
body.idx-open{overflow:hidden}

main{position:relative;z-index:2}

.mono{
  font-family:var(--f-mono);
  font-size:var(--t-mono);
  font-weight:400;
  letter-spacing:.09em;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums;
  line-height:1.4;
}
b,strong{font-weight:520}
/* there is no italic on this page and no third font to load one from, so
   emphasis in running copy is a weight and colour lift instead of a slant */
em{font-style:normal;font-weight:560;color:var(--ink)}
u{text-decoration:none}

::selection{background:var(--acc);color:#0A0C08}

:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--acc);
  outline-offset:3px;
  border-radius:1px;
}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.skip{
  position:fixed;top:0;left:0;z-index:400;
  padding:.85rem 1.3rem;background:var(--acc);color:#0A0C08;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  transform:translateY(-120%);transition:transform .3s var(--e-cut);
}
.skip:focus{transform:translateY(0)}

/* ═══ THE CUT — the page's only reveal ═════════════════════════════════════
   A block of the surface colour sits on top of the content. It slides off to
   the right, and its left border is the tool edge. Nothing fades in.          */
.cut{position:relative;display:block;overflow:hidden}
.cut::after{
  content:'';position:absolute;
  top:-10%;bottom:-10%;left:0;width:104%;
  background:var(--cut-fill);
  border-left:1px solid var(--acc);
  transform:translate3d(0,0,0);
  transition:transform 1.05s var(--e-cut) var(--cut-d,0s);
  pointer-events:none;
}
.cut--fast::after{transition-duration:.44s}
.cut--slow::after{transition-duration:1.9s}
.cut.is-cut::after{transform:translate3d(103%,0,0)}
.cut.is-done::after{display:none}

/* everything that is not display type gets the quiet version */
[data-reveal]{
  opacity:0;
  transform:translate3d(0,14px,0);
  transition:opacity .8s var(--e-soft) var(--cut-d,0s),transform .9s var(--e-cut) var(--cut-d,0s);
  will-change:opacity,transform;
}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal].is-done{will-change:auto}
/* elements Locomotive drives itself — it owns the transform, so these fade only */
[data-reveal].rv-fade{transform:none;will-change:opacity}

/* ═══ MATERIAL ═════════════════════════════════════════════════════════════ */
.grain{
  position:fixed;inset:-2%;z-index:60;pointer-events:none;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{
  position:fixed;inset:0;z-index:59;pointer-events:none;
  background:radial-gradient(120% 88% at 50% 40%,transparent 42%,rgba(0,0,0,.5) 100%);
}

/* ═══ THE BELL — one element, hero through strike ══════════════════════════ */
.bellstage{
  position:fixed;z-index:1;pointer-events:none;
  top:50%;left:50%;
  width:min(46vw,52vh);height:min(46vw,52vh);
  margin:0;
  transform:translate3d(-50%,-50%,0);
  opacity:0;
  will-change:transform,opacity;
}
#bell{width:100%;height:100%;overflow:visible}
#bell-crown{fill:var(--ink-14);stroke:var(--ink-edge)}
#bell-crown path[fill="none"]{stroke:var(--ink-edge)}
#bell-wall{fill:url(#bronze);stroke:var(--ink-edge);stroke-width:.55;vector-effect:non-scaling-stroke}
#bell-sweep{stroke:var(--acc);stroke-width:.8;vector-effect:non-scaling-stroke;opacity:.5}
#bell-kerf{stroke:var(--acc);stroke-width:1.1;vector-effect:non-scaling-stroke;opacity:.85;
  filter:drop-shadow(0 0 4px var(--acc-40))}
#tool{fill:var(--acc)}
#tool-bar{fill:var(--acc-40)}
.bellstage.is-hot #bell-wall{fill:url(#heat);stroke:var(--heat-hi)}
.bellstage.is-hot #bell-crown{fill:rgba(255,138,61,.2);stroke:var(--heat-hi)}

/* ═══ CHROME ═══════════════════════════════════════════════════════════════ */
/* The bar is transparent but not weightless: the page's left column runs
   straight under the wordmark, so it carries its own ground rather than a
   difference blend. The blend kept the bar readable and wrecked whatever body
   copy passed beneath it. */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:clamp(.9rem,2.1vw,1.5rem) var(--gut) clamp(2rem,4vw,3rem);
  background:linear-gradient(180deg,var(--e0) 34%,rgba(8,10,9,.86) 62%,rgba(8,10,9,0));
  pointer-events:none;
}
.topbar__mark,.topbar__idx{pointer-events:auto}
.topbar__mark{display:block}
.topbar__name{
  display:block;font-family:var(--f-mono);font-size:var(--t-mono);
  letter-spacing:.16em;font-weight:500;
}
.topbar__sub{
  display:block;margin-top:.28rem;font-family:var(--f-mono);
  font-size:var(--t-mono-s);letter-spacing:.11em;color:var(--ink-46);
  text-transform:uppercase;
}
.topbar__idx{
  display:flex;align-items:baseline;gap:.55rem;
  font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.13em;
  text-transform:uppercase;padding:.15rem 0;
}
.topbar__idxn{
  font-size:calc(var(--t-mono) * 1.05);color:var(--acc);
  font-variant-numeric:tabular-nums;min-width:1.9em;text-align:right;
}
.topbar__idxl{position:relative}
.topbar__idxl::after{
  content:'';position:absolute;left:0;right:0;bottom:-.32em;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s var(--e-cut);
}
.topbar__idx:hover .topbar__idxl::after,
.topbar__idx:focus-visible .topbar__idxl::after{transform:scaleX(1)}

/* index panel */
.index{
  position:fixed;inset:0;z-index:120;background:var(--e1);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--band) var(--gut);
  clip-path:inset(0 0 0 0);
}
.index[hidden]{display:none}
.index__cap{
  font-family:var(--f-mono);font-size:var(--t-mono-s);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-46);margin-bottom:clamp(1.2rem,3vw,2.4rem);
}
.index__close{
  position:absolute;top:clamp(.9rem,2.1vw,1.5rem);right:var(--gut);
  font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--acc);padding:.4rem 0;
}
.index__list{border-top:1px solid var(--ink-14);max-width:64rem}
.index__list li{border-bottom:1px solid var(--ink-14);overflow:hidden}
.index__list a{
  display:grid;grid-template-columns:3.2rem 1fr auto;align-items:baseline;gap:1rem;
  padding:clamp(.6rem,1.5vw,1.1rem) 0;
  transition:color .4s var(--e-soft),padding-left .5s var(--e-cut);
}
.index__list a:hover,.index__list a:focus-visible{color:var(--acc);padding-left:1rem}
.index__list i{
  font-family:var(--f-mono);font-size:var(--t-mono-s);letter-spacing:.12em;
  color:var(--ink-46);font-style:normal;
}
.index__list span{font-family:var(--f-dsp);font-weight:600;letter-spacing:-.036em;
  font-size:clamp(1.5rem,4vw,2.8rem);line-height:1}
.index__list em{
  font-family:var(--f-mono);font-size:var(--t-mono-s);letter-spacing:.1em;
  color:var(--ink-46);font-style:normal;text-transform:uppercase;
}

/* the running readout */
.hud{
  position:fixed;left:var(--gut);bottom:clamp(1rem,2.4vw,1.8rem);z-index:80;
  font-family:var(--f-mono);font-size:var(--t-mono-s);letter-spacing:.1em;
  text-transform:uppercase;font-variant-numeric:tabular-nums;
  opacity:0;transition:opacity .8s var(--e-soft);
  /* It takes its own pointer events on purpose. A readout that is invisible to
     a hit test is also invisible to every occlusion check, and this one sits
     over the page for the whole scroll. */
  user-select:none;
}
.hud.is-on{opacity:1}
.hud__row{display:flex;align-items:baseline;gap:.5rem;line-height:1.55}
.hud__row i{color:var(--ink-28);font-style:normal;min-width:2.7em}
.hud__row b{font-weight:500;min-width:4.1em;text-align:right}
.hud__row u{color:var(--ink-46)}
.hud__rule{margin-top:.5rem;width:7.2rem;height:1px;background:var(--ink-14)}
.hud__rule span{display:block;height:100%;width:0;background:var(--acc);transform-origin:0 50%}

/* ═══ SHARED SECTION FURNITURE ═════════════════════════════════════════════ */
.sec{
  position:relative;z-index:2;
  max-width:var(--maxw);margin-inline:auto;
  padding:var(--band) var(--gut);
}
.kicker{
  display:flex;align-items:baseline;gap:.8rem;color:var(--ink-46);
  margin-bottom:clamp(1.6rem,4vw,3.4rem);
}
.kicker i{
  font-style:normal;color:var(--ink-46);letter-spacing:.14em;
  padding-right:.8rem;border-right:1px solid var(--ink-14);
}

.dsp{
  font-family:var(--f-dsp);font-weight:var(--w-dsp);
  line-height:.9;letter-spacing:-.042em;
}
.dsp .cut{padding-bottom:.13em;margin-bottom:-.13em}
.dsp em{font-style:normal;color:var(--acc)}
.dsp--xl{font-size:var(--t-dsp);letter-spacing:-.054em;line-height:.84}
.dsp--l{font-size:var(--t-l);letter-spacing:-.045em;line-height:.88}
.dsp--m{font-size:var(--t-m);letter-spacing:-.036em;line-height:.94}

.facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 clamp(1rem,3vw,3rem);border-top:1px solid var(--ink-14);
}
.facts li{
  display:flex;flex-direction:column;gap:.35rem;
  padding:1.05rem 1.2rem 1.05rem 0;border-bottom:1px solid var(--ink-14);
}
.facts i{font-style:normal;color:var(--ink-28);letter-spacing:.13em}
.facts b{font-weight:450;color:var(--ink-72);letter-spacing:.05em;text-transform:none}
.facts u{color:var(--ink-46)}

/* ═══ HERO ═════════════════════════════════════════════════════════════════ */
.hero{
  position:relative;z-index:2;min-height:100svh;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-template-rows:auto 1fr auto;
  gap:0 clamp(1rem,2vw,2rem);
  padding:clamp(6.5rem,15vh,10rem) var(--gut) clamp(6rem,13vh,8.5rem);
  max-width:var(--maxw);margin-inline:auto;
}
.hero__eyebrow{
  grid-column:1/8;grid-row:1;align-self:start;
  color:var(--ink-46);text-transform:none;letter-spacing:.11em;
}
.hero__h1{
  grid-column:1/13;grid-row:2;align-self:end;
  font-family:var(--f-dsp);font-weight:720;
  font-size:var(--t-dsp);line-height:.8;letter-spacing:-.058em;
  /* the h1 does not sit left-middle: it hangs low and bleeds off the left edge */
  margin-left:calc(var(--gut) * -1);
  padding-left:calc(var(--gut) - .07em);
}
.hero__line{padding-bottom:.1em;margin-bottom:-.1em}
.hero__line--2{margin-left:.3em}
.hero__line--2 span{color:var(--ink-72)}
.hero__id{
  grid-column:1/6;grid-row:3;align-self:end;
  color:var(--ink-46);text-transform:none;letter-spacing:.13em;
  padding-top:1.4rem;
}
.hero__spec{
  grid-column:9/13;grid-row:1/3;align-self:start;
  border-top:1px solid var(--ink-14);
  margin-top:clamp(0rem,6vh,4rem);
}
.hero__spec > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.62rem 0;border-bottom:1px solid var(--ink-14);
}
.hero__spec dt{color:var(--ink-28);letter-spacing:.13em}
.hero__spec dd{
  font-weight:500;letter-spacing:.05em;font-variant-numeric:tabular-nums;
}
.hero__spec dd u{color:var(--ink-46);font-weight:400}
.hero__spec > div:first-child dd{color:var(--acc)}
.hero__blurb{
  grid-column:8/13;grid-row:3;align-self:end;
  color:var(--ink-72);max-width:34ch;font-size:calc(var(--t-body) * .98);
  padding-top:1.4rem;
}
.hero__foot{
  grid-column:1/6;grid-row:3;align-self:end;
  display:none;
}
.hero__foot .dot{
  display:inline-block;width:5px;height:5px;background:var(--acc);
  border-radius:50%;margin-right:.7rem;vertical-align:middle;
}

/* ═══ 01 · COMMISSION ══════════════════════════════════════════════════════ */
.sec--commission{padding-top:clamp(8rem,22vh,16rem)}
.commission__body{
  max-width:38rem;margin:clamp(2.6rem,7vw,5.5rem) 0 clamp(2.6rem,6vw,4.5rem);
  margin-left:auto;margin-right:0;
  display:flex;flex-direction:column;gap:1.15rem;
  color:var(--ink-72);
}
.commission__body .lede{
  font-size:calc(var(--t-body) * 1.24);color:var(--ink);line-height:1.42;
  letter-spacing:-.015em;
}

/* ═══ 02 · MOULD ═══════════════════════════════════════════════════════════ */
.sec--mould{padding-block:clamp(9rem,26vh,18rem)}
.mould__h{max-width:22ch}
.mould__cols{
  display:grid;grid-template-columns:1fr minmax(0,1.05fr);
  gap:clamp(1.6rem,4vw,4rem);
  margin-top:clamp(2.4rem,7vw,5rem);
}
.mould__cols > p{grid-column:2;color:var(--ink-72);max-width:44ch}
.mould__cols > p em{color:var(--ink)}
.facts--tight{grid-column:2;grid-template-columns:repeat(2,minmax(0,1fr))}

/* ═══ 03 · THE POUR — the turn ═════════════════════════════════════════════ */
.pour{
  position:relative;z-index:2;
  background:var(--e0);
  --cut-fill:var(--e0);
}
.pour__pin{
  position:relative;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(5rem,12vh,8rem) 0 clamp(3rem,8vh,6rem);
}
.pour__glow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 46% at 50% 62%,rgba(232,72,10,calc(.34 * var(--heat-v,0))) 0%,transparent 72%),
    radial-gradient(34% 26% at 50% 60%,rgba(255,138,61,calc(.3 * var(--heat-v,0))) 0%,transparent 70%);
}
.pour__head{
  position:relative;z-index:3;
  padding-inline:var(--gut);max-width:var(--maxw);margin-inline:auto;width:100%;
  margin-bottom:clamp(2rem,6vh,4rem);
}
.pour__h{
  font-family:var(--f-dsp);font-weight:var(--w-dsp);font-size:var(--t-m);
  line-height:.96;letter-spacing:-.038em;
  color:color-mix(in oklab,var(--heat-hi) calc(var(--heat-v,0) * 100%),var(--ink));
}
.pour__gauge{
  display:flex;align-items:baseline;gap:clamp(1.2rem,4vw,3rem);
  margin-top:clamp(1rem,2.6vh,1.8rem);color:var(--ink-46);
}
.pour__gauge b{
  font-size:clamp(1.5rem,4.2vw,3.4rem);font-weight:600;line-height:1;
  letter-spacing:-.035em;color:var(--ink);
}
.pour__temp b{color:color-mix(in oklab,var(--heat-hi) calc(var(--heat-v,0) * 100%),var(--ink))}
.pour__gauge u{color:var(--ink-46);font-size:var(--t-mono)}
.pour__bar{
  margin-top:clamp(.9rem,2vh,1.4rem);height:1px;background:var(--ink-14);
  max-width:34rem;
}
.pour__bar span{
  display:block;height:100%;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--heat-hi),var(--heat-lo));
}
.pour__track{
  position:relative;z-index:3;
  display:flex;align-items:stretch;
  padding-left:var(--gut);
  will-change:transform;
}
.pour__panel{
  flex:0 0 clamp(19rem,30vw,29rem);
  padding:clamp(1.4rem,2.6vw,2.2rem) clamp(1.4rem,2.6vw,2.4rem) clamp(1.4rem,2.6vw,2.2rem) 0;
  margin-right:clamp(1.4rem,2.6vw,2.4rem);
  border-left:1px solid var(--ink-14);padding-left:clamp(1.2rem,2.2vw,2rem);
  color:var(--ink-72);
}
.pour__panel:last-child{margin-right:calc(var(--gut) + 20vw)}
.pour__t{
  color:color-mix(in oklab,var(--heat-hi) calc(var(--heat-v,0) * 100%),var(--acc));
  margin-bottom:1rem;letter-spacing:.13em;
}
.pour__note{margin-top:1.1rem;color:var(--ink-28);letter-spacing:.11em}
.pour__panel--end{border-left-color:var(--acc-40)}

/* ═══ 04 · THE LATHE ═══════════════════════════════════════════════════════ */
.lathe{position:relative;z-index:2}
/* the left half of the screen is left empty on purpose — that is where the bell
   stands while the tool works down it */
.lathe__pin{
  position:relative;height:100svh;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  /* row 2 is the slack: it takes whatever the heading and the readouts leave,
     and collapses to nothing rather than letting them overlap */
  grid-template-rows:auto minmax(0,1fr) auto auto;
  gap:clamp(1rem,2.4vh,2rem) clamp(1.5rem,4vw,4rem);
  max-width:var(--maxw);margin-inline:auto;
  padding:clamp(5.5rem,13vh,8.5rem) var(--gut) clamp(2.5rem,7vh,4.5rem);
}
.lathe__head{grid-column:2;grid-row:1;align-self:start;max-width:34rem}
.lathe__h{
  font-family:var(--f-dsp);font-weight:var(--w-dsp);
  font-size:clamp(1.9rem,3.2vw,3.4rem);
  line-height:.96;letter-spacing:-.034em;margin-bottom:1.15rem;
}
.lathe__h em{font-style:normal;color:var(--acc)}
.lathe__sub{color:var(--ink-72);max-width:32ch;font-size:calc(var(--t-body) * .96)}
.lathe__panel{
  grid-column:2;grid-row:3;align-self:end;
  display:flex;flex-direction:column;gap:clamp(1.2rem,3vh,2.2rem);
}

.partials{border-top:1px solid var(--ink-14)}
.pt{
  display:grid;
  grid-template-columns:5.4rem 2.6rem minmax(3rem,1fr) 6.4rem 3.6rem;
  align-items:center;gap:.7rem;
  padding:.72rem 0;border-bottom:1px solid var(--ink-14);
  font-variant-numeric:tabular-nums;
}
.pt__n{color:var(--ink-46);letter-spacing:.13em}
.pt__note{color:var(--ink-28);letter-spacing:.08em}
.pt__meter{
  position:relative;height:2px;background:var(--ink-07);overflow:hidden;
}
.pt__meter i{
  position:absolute;top:0;bottom:0;left:0;width:100%;
  background:var(--ink-28);
  transform:scaleX(var(--p,1));transform-origin:0 50%;
}
.pt__hz{text-align:right;color:var(--ink)}
.pt__hz b{font-weight:500}
.pt__hz u{color:var(--ink-28);margin-left:.35em;font-size:.86em}
.pt__c{text-align:right;color:var(--ink-46);letter-spacing:.04em}
.pt__c u{opacity:.6;margin-left:.1em}
.pt.is-true .pt__c{color:var(--acc)}
.pt.is-true .pt__meter i{background:var(--acc)}
.pt.is-active .pt__n{color:var(--acc)}

.lathe__read{
  display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem 1rem;
  border-top:1px solid var(--ink-14);padding-top:1rem;
}
.lathe__read dt{color:var(--ink-28);letter-spacing:.13em;margin-bottom:.4rem}
.lathe__read dd{font-variant-numeric:tabular-nums;letter-spacing:.04em}
.lathe__read b{font-weight:500;font-size:calc(var(--t-mono) * 1.35)}
.lathe__read u{color:var(--ink-28);margin-left:.3em}
#lTool{color:var(--acc);text-transform:uppercase}

.lathe__foot{
  grid-column:1;grid-row:3;align-self:end;
  color:var(--ink-28);letter-spacing:.12em;max-width:24rem;padding-bottom:3.2rem;
}

/* ═══ 05 · EVIDENCE ════════════════════════════════════════════════════════ */
.ev{padding-block:clamp(8rem,20vh,15rem)}
.ev__h{max-width:14ch}
.ev__lede{
  max-width:44ch;margin:clamp(2rem,5vw,3.6rem) 0 clamp(2.6rem,6vw,4.4rem);
  margin-left:auto;color:var(--ink-72);
  font-size:calc(var(--t-body) * 1.1);
}
.tablewrap{overflow-x:auto;margin-bottom:clamp(3rem,7vw,5.5rem);
  -webkit-overflow-scrolling:touch;scrollbar-width:thin}
.tbl{width:100%;min-width:44rem;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{
  text-align:left;padding:.8rem 1.2rem .8rem 0;
  border-bottom:1px solid var(--ink-14);font-weight:400;
}
.tbl thead th{
  color:var(--ink-28);letter-spacing:.14em;
  border-bottom-color:var(--ink-28);padding-bottom:.7rem;
}
.tbl tbody th{color:var(--ink);letter-spacing:.11em;font-weight:500}
.tbl td{color:var(--ink-46);letter-spacing:.05em}
.tbl .num{text-align:right;padding-right:0;padding-left:1.2rem}
.tbl .sharp{color:var(--ink-46)}
.tbl .ok{color:var(--acc)}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}

.ev__grid{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(2rem,4vw,3.5rem) clamp(1.4rem,3vw,3rem);
}
.ev__block{grid-column:span 6}
.ev__block--wide{grid-column:span 12;max-width:52rem;margin-left:auto}
.ev__bh{
  color:var(--ink-28);letter-spacing:.14em;
  padding-bottom:.8rem;margin-bottom:1.3rem;border-bottom:1px solid var(--ink-14);
}
.ev__note{
  margin-top:1.4rem;color:var(--ink-46);max-width:42ch;
  font-size:calc(var(--t-body) * .93);
}
.bars li,.decay li{
  display:grid;grid-template-columns:2.8rem minmax(0,1fr) 5.4rem;align-items:center;gap:.9rem;
  padding:.44rem 0;font-variant-numeric:tabular-nums;
}
.decay li{grid-template-columns:4.4rem minmax(0,1fr) 6.2rem}
.bars i,.decay i{font-style:normal;color:var(--ink-46);letter-spacing:.11em}
.bars span,.decay span{height:1px;background:var(--ink-07);position:relative}
.bars span::after,.decay span::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:var(--v);
  background:var(--ink-28);
}
.bars b,.decay b{text-align:right;color:var(--ink);font-weight:450;letter-spacing:.04em}
.bars u,.decay u{color:var(--ink-28);margin-left:.25em}
.ev__trace{
  margin-top:.9rem;color:var(--ink-46);letter-spacing:.11em;
  padding-top:.7rem;border-top:1px solid var(--ink-07);
}

.dims > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.46rem 0;border-bottom:1px solid var(--ink-07);
}
.dims dt{color:var(--ink-46);letter-spacing:.1em}
.dims dd{
  font-variant-numeric:tabular-nums;letter-spacing:.04em;font-weight:450;
  white-space:nowrap;
}
.dims dd u{color:var(--ink-28);margin-left:.3em}
.dims > div:last-child dd{color:var(--acc)}

/* ═══ 06 · STRIKE ══════════════════════════════════════════════════════════ */
.strike{
  position:relative;z-index:2;background:var(--e0);--cut-fill:var(--e0);
  max-width:var(--maxw);margin-inline:auto;
  padding:clamp(7rem,18vh,13rem) var(--gut);
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(1.5rem,3vw,3rem);align-items:center;
}
.strike .kicker{grid-column:1/13;align-self:start}
.strike__stage{
  grid-column:1/7;position:relative;
  display:grid;place-items:center;
  aspect-ratio:1;max-width:30rem;
}
.strike__rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.strike__rings span{
  position:absolute;border:1px solid var(--acc);border-radius:50%;
  width:100%;height:100%;
  opacity:0;transform:scale(.16);
}
.strike__rings.is-ringing span{animation:ring var(--dur,2s) var(--e-soft) forwards}
.strike__rings span[data-r="hum"]{--dur:3.6s;--to:1}
.strike__rings span[data-r="prime"]{--dur:2.8s;--to:.82}
.strike__rings span[data-r="tierce"]{--dur:2.2s;--to:.66}
.strike__rings span[data-r="quint"]{--dur:1.7s;--to:.5}
.strike__rings span[data-r="nominal"]{--dur:1.25s;--to:.36}
@keyframes ring{
  0%{opacity:0;transform:scale(.16)}
  6%{opacity:.85}
  100%{opacity:0;transform:scale(var(--to))}
}

.strike__btn{
  position:relative;z-index:2;
  width:clamp(9rem,17vw,12.5rem);aspect-ratio:1;border-radius:50%;
  display:grid;place-content:center;gap:.5rem;text-align:center;
  background:radial-gradient(76% 76% at 50% 34%,var(--e3),var(--e1));
  border:1px solid var(--ink-edge);
  transition:border-color .4s var(--e-soft),transform .5s var(--e-cut),background .4s var(--e-soft);
}
.strike__btn:hover,.strike__btn:focus-visible{border-color:var(--acc);transform:scale(1.03)}
.strike__btn:active{transform:scale(.975)}
.strike__btn.is-hit{border-color:var(--acc);background:radial-gradient(76% 76% at 50% 34%,var(--acc-16),var(--e1))}
.strike__btnring{
  position:absolute;inset:-9px;border:1px solid var(--ink-14);border-radius:50%;
  pointer-events:none;
  transition:opacity .5s var(--e-soft),transform .6s var(--e-cut);
}
.strike__btn:hover .strike__btnring{transform:scale(1.05);opacity:.5}
.strike__btnlabel{
  position:relative;
  font-family:var(--f-dsp);font-weight:640;letter-spacing:-.03em;
  font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1;
}
.strike__btnnote{
  color:var(--ink-46);font-size:var(--t-mono-s);letter-spacing:.12em;
}

.strike__side{grid-column:8/13}
.strike__copy{color:var(--ink-72);max-width:38ch;margin-bottom:1.3rem}
.strike__copy b{color:var(--acc);font-weight:400;font-variant-numeric:tabular-nums}
.strike__hint{
  color:var(--ink-28);letter-spacing:.1em;text-transform:none;
  max-width:40ch;line-height:1.7;margin-bottom:2.2rem;
}
.strike__hint a{color:var(--ink-72);border-bottom:1px solid var(--ink-28)}
.strike__hint a:hover{color:var(--acc);border-bottom-color:var(--acc)}

.spectrum{
  display:flex;align-items:flex-end;gap:.5rem;height:5.5rem;
  border-bottom:1px solid var(--ink-14);margin-bottom:1.6rem;max-width:22rem;
}
.spectrum li{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.spectrum span{
  display:block;width:100%;background:var(--acc);
  height:100%;transform:scaleY(0);transform-origin:50% 100%;
  transition:transform .09s linear;
}
.spectrum i{
  font-style:normal;color:var(--ink-28);letter-spacing:.08em;
  font-size:var(--t-mono-s);margin-top:.5rem;
}
.strike__mute{
  color:var(--ink-46);letter-spacing:.12em;text-transform:uppercase;
  border-bottom:1px solid var(--ink-14);padding-bottom:.25rem;
}
.strike__mute:hover{color:var(--acc);border-bottom-color:var(--acc)}

/* ═══ 07 · THE QUIET ═══════════════════════════════════════════════════════ */
.quiet{
  position:relative;z-index:2;
  min-height:118svh;display:flex;flex-direction:column;justify-content:center;
  padding:var(--band) var(--gut);
  max-width:var(--maxw);margin-inline:auto;
}
/* the inscription is cast in relief around the shoulder, so it is set the way
   a founder lays it: capitals, even weight, no slant, opened up rather than
   tightened */
.quiet__line{
  font-family:var(--f-dsp);font-weight:520;
  text-transform:uppercase;
  font-size:clamp(1.35rem,3.9vw,3.5rem);line-height:1.24;letter-spacing:.01em;
  max-width:19ch;
  padding-bottom:.16em;margin-bottom:-.16em;
  margin-left:clamp(0rem,14vw,16rem);
}
.quiet__meta{
  margin-top:clamp(4rem,14vh,9rem);margin-left:clamp(0rem,14vw,16rem);
  color:var(--ink-28);letter-spacing:.11em;max-width:46ch;line-height:1.85;
  text-transform:none;
}

/* ═══ 08 · CLOSE ═══════════════════════════════════════════════════════════ */
.close{
  position:relative;z-index:2;
  max-width:var(--maxw);margin-inline:auto;
  padding:clamp(6rem,15vh,11rem) var(--gut) clamp(4rem,9vh,7rem);
}
.close__h{margin-bottom:clamp(3rem,8vw,6rem)}
.close__cols{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(2.2rem,5vw,5rem);align-items:start;
}
.close__rec{border-top:1px solid var(--ink-14)}
.close__rec > div{
  display:grid;grid-template-columns:8.5rem 1fr;gap:1.2rem;
  padding:.85rem 0;border-bottom:1px solid var(--ink-14);
}
.close__rec dt{color:var(--ink-28);letter-spacing:.13em}
.close__rec dd{color:var(--ink-72);letter-spacing:.05em;text-transform:none}
.close__next{padding-top:.4rem}
.close__nh{
  font-family:var(--f-dsp);font-weight:var(--w-dsp);font-size:var(--t-h3);
  line-height:1;letter-spacing:-.035em;margin-bottom:1.1rem;color:var(--acc);
}
.close__next p{color:var(--ink-72);max-width:40ch;margin-bottom:2rem}
.close__contact li{padding:.5rem 0;letter-spacing:.1em;text-transform:none}
.close__contact a{border-bottom:1px solid var(--ink-28);padding-bottom:.1rem}
.close__contact a:hover{color:var(--acc);border-bottom-color:var(--acc)}

.foot{
  position:relative;z-index:2;
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;
  max-width:var(--maxw);margin-inline:auto;
  padding:1.6rem var(--gut) clamp(1.6rem,4vh,2.6rem);
  border-top:1px solid var(--ink-14);
  color:var(--ink-28);letter-spacing:.11em;
}
.foot__mid{color:var(--ink-46)}

/* ═══ LOADER ═══════════════════════════════════════════════════════════════ */
.loader{
  position:fixed;inset:0;z-index:300;background:var(--e0);
  display:grid;place-content:center;justify-items:start;
  padding:var(--gut);
  transition:transform .9s var(--e-cut),opacity .5s linear .5s;
}
.loader.is-out{transform:translate3d(0,-101%,0);opacity:0;pointer-events:none}
.loader__inner{position:relative}
.loader__freqs{
  display:flex;flex-wrap:wrap;gap:.4rem clamp(1rem,3vw,2.4rem);
  margin-bottom:clamp(1.2rem,3vw,2rem);
}
.loader__freqs li{
  display:flex;flex-direction:column;gap:.3rem;
  font-family:var(--f-mono);font-size:var(--t-mono-s);letter-spacing:.12em;
  text-transform:uppercase;font-variant-numeric:tabular-nums;
  opacity:0;transform:translate3d(0,6px,0);
  transition:opacity .3s linear,transform .45s var(--e-cut);
}
.loader__freqs li.is-on{opacity:1;transform:none}
.loader__freqs i{font-style:normal;color:var(--ink-28)}
.loader__freqs b{font-weight:450;color:var(--acc)}
.loader__mark{
  font-family:var(--f-dsp);font-weight:720;
  font-size:clamp(3.4rem,12vw,9rem);line-height:.86;letter-spacing:-.058em;
  padding-bottom:.12em;margin-bottom:-.12em;
}

/* ═══ RESPONSIVE ═══════════════════════════════════════════════════════════
   Tablet and phone are their own layouts, not the desktop shrunk.            */

@media (max-width:1080px){
  .hero__spec{grid-column:8/13}
  .hero__blurb{grid-column:7/13}
  /* the bell moves out of the left column and into a band of its own, between
     the heading and the readouts */
  .lathe__pin{
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(24vh,1fr) auto auto;
    gap:clamp(1rem,2.4vh,1.8rem);
  }
  .lathe__head{grid-column:1;grid-row:1;max-width:34rem}
  .lathe__panel{grid-column:1;grid-row:3;align-self:end}
  .lathe__foot{grid-column:1;grid-row:4;max-width:none;padding-bottom:0}
  .ev__block{grid-column:span 12;max-width:42rem}
  .ev__block--wide{max-width:42rem;margin-left:0}
  .strike__stage{grid-column:1/8}
  .strike__side{grid-column:8/13}
}

@media (max-width:860px){
  :root{--band:clamp(4.5rem,11vh,7rem)}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}

  .topbar{padding-bottom:clamp(1.5rem,4vw,2.2rem)}
  .topbar__sub{display:none}

  /* the pinned tuning pass has to fit one screen, so the copy is shorter and
     the bell band takes whatever is left rather than claiming 24vh */
  .lathe__pin{
    grid-template-rows:auto minmax(0,1fr) auto auto;
    padding-top:clamp(4.4rem,10vh,6.5rem);
    padding-bottom:clamp(1.1rem,3vh,2rem);
  }
  .lathe__h{font-size:clamp(1.7rem,6.4vw,2.5rem);margin-bottom:.85rem}
  .lathe__sub{font-size:calc(var(--t-body) * .92)}
  .wide-only{display:none}
  .pt{padding:.5rem 0}
  .lathe__read{padding-top:.75rem;gap:.5rem .9rem}
  .lathe__read b{font-size:calc(var(--t-mono) * 1.2)}
  .lathe__read dt{margin-bottom:.25rem}
  .lathe__foot{padding-top:.35rem}

  .hero{
    grid-template-rows:auto auto 1fr auto;
    min-height:100svh;
    padding-top:clamp(6rem,17vh,9rem);
  }
  .hero__eyebrow{grid-column:1/13;grid-row:1;max-width:30ch}
  .hero__h1{grid-column:1/13;grid-row:2;align-self:start;margin-top:clamp(2rem,7vh,4rem)}
  .hero__spec{grid-column:1/13;grid-row:4;align-self:end;margin-top:0}
  .hero__id{grid-column:1/13;grid-row:3;align-self:end;padding-bottom:1.6rem}
  .hero__blurb{display:none}
  .hero__foot{display:none}

  .commission__body{margin-left:0;max-width:46ch}
  .mould__cols{grid-template-columns:1fr}
  .mould__cols > p,.facts--tight{grid-column:1}
  .ev__lede{margin-left:0}

  /* the pour stops being a pinned horizontal run and becomes a column */
  .pour__pin{height:auto;min-height:0;display:block;padding-bottom:0}
  .pour__head{margin-bottom:2.4rem}
  .pour__track{
    display:block;padding-inline:var(--gut);transform:none!important;
  }
  .pour__panel{
    margin-right:0;margin-bottom:1.4rem;padding-block:1.3rem;
    border-left:1px solid var(--ink-14);
  }
  .pour__panel:last-child{margin-right:0;margin-bottom:0;padding-bottom:clamp(3rem,8vh,5rem)}
  .pour__glow{position:fixed;inset:0}

  .strike{grid-template-columns:1fr;gap:2.6rem}
  .strike .kicker{grid-column:1}
  .strike__stage{grid-column:1;justify-self:center;max-width:22rem;width:100%}
  .strike__side{grid-column:1}
  .spectrum{max-width:none}

  .quiet{min-height:96svh}
  .quiet__line,.quiet__meta{margin-left:0}
  .close__cols{grid-template-columns:1fr;gap:3rem}
}

@media (max-width:640px){
  :root{
    --t-dsp:clamp(3.4rem,20vw,6rem);
    --t-l:clamp(2.3rem,10vw,3.4rem);
    --t-m:clamp(1.9rem,8.2vw,2.8rem);
    --band:4rem;
  }
  body{line-height:1.55}

  .hero__h1{line-height:.84;letter-spacing:-.038em}
  .hero__line--2{margin-left:.18em}

  /* the readout leaves the corner and becomes a strip along the bottom edge.
     Opaque, because it is permanently over the page here and a gradient would
     leave the last line of every section half readable. */
  .hud{
    left:0;right:0;bottom:0;padding:.5rem var(--gut) calc(.5rem + env(safe-area-inset-bottom));
    display:flex;gap:1.2rem;align-items:center;
    background:var(--e0);border-top:1px solid var(--ink-14);
  }
  .hud__rule{margin-top:0;flex:1;max-width:none}
  .hud__row b{min-width:3.4em}
  /* nothing may come to rest behind the strip */
  .foot{padding-bottom:calc(2.6rem + env(safe-area-inset-bottom))}

  .facts,.facts--tight{grid-template-columns:1fr}
  .facts li{padding-right:0}

  .pt{
    grid-template-columns:4.4rem 1fr 3.2rem;
    grid-template-areas:'n hz c' 'note meter meter';
    gap:.3rem .6rem;padding:.6rem 0;
  }
  .pt__n{grid-area:n}
  .pt__note{grid-area:note}
  .pt__meter{grid-area:meter;align-self:center}
  .pt__hz{grid-area:hz}
  .pt__c{grid-area:c}
  .lathe__read{grid-template-columns:repeat(2,1fr);gap:1rem}

  .decay li{grid-template-columns:3.8rem minmax(0,1fr) 5.6rem}

  .close__rec > div{grid-template-columns:1fr;gap:.3rem}
  .foot{flex-direction:column;gap:.45rem}
  .foot__mid{order:3}
}

/* A short phone in portrait (SE-class, 667 tall) cannot hold the heading copy
   and the readouts at once. The foot line carries the instruction, so the
   paragraph goes and the device stays whole. */
@media (max-width:860px) and (max-height:720px){
  .lathe__sub{display:none}
  .lathe__pin{padding-top:clamp(3.2rem,7vh,4.6rem);row-gap:.6rem}
  .lathe__h{margin-bottom:0;font-size:clamp(1.5rem,5.6vw,2rem)}
  .kicker{margin-bottom:.8rem}
}

/* ═══ REDUCED MOTION ═══════════════════════════════════════════════════════
   Keep the layout and every number. Kill anything scroll-driven or looping.  */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0ms!important;
  }
  .cut::after{display:none}
  [data-reveal]{opacity:1!important;transform:none!important}
  .bellstage{opacity:.42!important;transform:translate3d(-50%,-50%,0)!important}
  .pour__track{transform:none!important}
  .strike__rings{display:none}
  .loader{display:none}
}