/* ============================================================
   FURMAL — $FURMAL · sol133
   Black marble × emerald velvet × silver-gilt.
   Cinzel (engraved display) / Work Sans (body) / Fragment Mono.
   ============================================================ */

/* ---------- fonts (self-hosted latin variable subsets) ---------- */
@font-face{
  font-family:'Cinzel';
  src:url('../fonts/cinzel-latin.woff2') format('woff2-variations');
  font-weight:400 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Work Sans';
  src:url('../fonts/worksans-latin.woff2') format('woff2-variations');
  font-weight:400 500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Fragment Mono';
  src:url('../fonts/fragmentmono-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}

/* ---------- tokens ---------- */
:root{
  --marble:#131009;
  --marble-2:#1A1512;
  --marble-3:#211B15;
  --velvet:#123B2D;
  --velvet-2:#1E5C44;
  --velvet-hi:#27714F;
  --gilt:#D3C89F;              /* hairlines + engraving ONLY */
  --gilt-soft:rgba(211,200,159,.34);
  --gilt-faint:rgba(211,200,159,.14);
  --ivory:#F3F1EA;             /* cold banker's bond */
  --ivory-dim:#CFC8B6;
  --body-text:#C4BCAB;
  --gunmetal:#2B3036;
  --gunmetal-2:#363C44;
  --gold-thread:#B99A50;       /* tie thread + hallmark only */
  --ink:#22242B;               /* signature ink on the card */
  --danger:#8E3B2E;            /* rare: walk fail accents */
  --font-display:'Cinzel','Times New Roman',Georgia,serif;
  --font-body:'Work Sans','Segoe UI',system-ui,sans-serif;
  --font-mono:'Fragment Mono',Consolas,'Courier New',monospace;
  --rail:1180px;
  --ease-velvet:cubic-bezier(.23,1,.32,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{overflow-x:clip;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--marble);
  color:var(--body-text);
  font-family:var(--font-body);
  font-weight:400;
  font-size:1rem;
  line-height:1.65;
  overflow-x:clip;
  min-height:100vh;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ivory);text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--velvet-2);color:var(--ivory)}
:focus-visible{outline:2px solid var(--gilt);outline-offset:3px;border-radius:2px}
/* on the ivory papers the gilt ring is invisible — use ink there */
.sig-card :focus-visible,.deed :focus-visible{outline-color:#3B372B}
body::-webkit-scrollbar{width:11px}
body::-webkit-scrollbar-track{background:var(--marble-2)}
body::-webkit-scrollbar-thumb{background:#4A4232;border:2px solid var(--marble-2);border-radius:6px}
body::-webkit-scrollbar-thumb:hover{background:#6B5F45}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:fixed;top:-100px;left:1rem;z-index:210;
  padding:.7rem 1.2rem;border-radius:4px;background:var(--velvet-2);color:var(--ivory);
  font-size:.9rem;transition:top .2s;
}
.skip-link:focus{top:1rem}

/* ---------- the marble (always visible — this is the ground's identity) ---------- */
.marble-field{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(120% 90% at 18% 0%, #1C1712 0%, transparent 55%),
    radial-gradient(130% 100% at 85% 100%, #191410 0%, transparent 60%),
    linear-gradient(160deg, #161210 0%, var(--marble) 45%, #100D08 100%);
}
.marble-field::before{
  content:"";position:absolute;inset:0;
  background-image:var(--vein-img);
  background-size:920px 920px;
  opacity:.55; /* veins are pre-faded in the SVG; net ~10% */
}
.marble-field::after{ /* grain */
  content:"";position:absolute;inset:0;
  background-image:var(--grain-img);
  background-size:180px 180px;
  opacity:.05;mix-blend-mode:overlay;
}

/* ---------- layout primitives ---------- */
.rail{width:min(var(--rail),100% - 2.6rem);margin-inline:auto}
section{position:relative;padding:6.5rem 0}
section[id]{scroll-margin-top:5.2rem}
.kicker{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.32em;
  color:var(--gilt);text-transform:uppercase;
  display:flex;align-items:center;gap:1rem;margin-bottom:1.1rem;
}
.kicker::before,.kicker.rule-both::after{
  content:"";height:1px;background:var(--gilt-soft);flex:0 0 3.2rem;
}
.kicker.rule-both::after{flex:1}
h1,h2,h3{font-family:var(--font-display);color:var(--ivory);line-height:1.12;letter-spacing:.04em;font-weight:700}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem);margin-bottom:1.2rem}
h3{font-size:1.05rem;font-weight:600;letter-spacing:.06em}
.lede{max-width:56ch;font-size:1.06rem}
.mono{font-family:var(--font-mono)}

/* ---------- engraved hairline card ---------- */
.plaque{
  position:relative;border:1px solid var(--gilt-faint);
  background:linear-gradient(165deg,var(--marble-2),var(--marble));
  border-radius:6px;
}
.plaque::before{
  content:"";position:absolute;inset:7px;border:1px solid var(--gilt-faint);
  border-radius:3px;pointer-events:none;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.85rem 1.6rem;border-radius:4px;
  font-weight:500;font-size:.95rem;letter-spacing:.02em;
  border:1px solid var(--gilt-faint);
  transition:transform .25s var(--ease-velvet),background .25s,border-color .25s;
}
.btn svg{width:1.05rem;height:1.05rem;flex:none}
.btn-velvet{background:var(--velvet-2);color:var(--ivory)}
.btn-velvet:hover{background:var(--velvet-hi);transform:translateY(-2px);border-color:var(--gilt-soft)}
.btn-ghost{background:transparent;color:var(--ivory-dim);border-color:var(--gilt-faint)}
.btn-ghost:hover{color:var(--ivory);border-color:var(--gilt-soft);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

/* ---------- preloader ---------- */
#preloader{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:var(--marble);
  transition:opacity .7s ease,visibility .7s;
}
#preloader.done{opacity:0;visibility:hidden}
.press-stage{position:relative;text-align:center;width:min(520px,86vw)}
.press-word{
  font-family:var(--font-display);font-weight:800;color:var(--ivory);
  font-size:clamp(2.6rem,9vw,4.6rem);letter-spacing:.14em;position:relative;
}
.press-creases{position:absolute;inset:0;overflow:visible;pointer-events:none}
.press-creases path{
  stroke:rgba(0,0,0,.55);stroke-width:2;fill:none;
  filter:drop-shadow(0 1px 0 rgba(243,241,234,.08));
  transition:opacity .45s ease;
}
.press-creases path.flat{opacity:0}
.press-iron{
  position:absolute;top:-1.4rem;left:-14%;width:74px;height:46px;
  transform:translateX(0);
}
#preloader.ironing .press-iron{animation:iron-glide 2.9s var(--ease-velvet) forwards}
@keyframes iron-glide{
  0%{left:-16%}100%{left:104%}
}
.press-steam{
  position:absolute;top:-2.2rem;left:50%;width:10px;height:26px;border-radius:50%;
  background:linear-gradient(to top,rgba(243,241,234,.28),transparent);
  opacity:0;filter:blur(3px);
}
#preloader.immaculate .press-steam{animation:steam-rise 1.1s ease forwards}
@keyframes steam-rise{0%{opacity:0;transform:translateY(8px) scaleY(.6)}35%{opacity:.8}100%{opacity:0;transform:translateY(-26px) scaleY(1.4)}}
.press-count{
  margin-top:1.6rem;font-family:var(--font-mono);font-size:.78rem;
  letter-spacing:.3em;color:var(--gilt);
}

/* ---------- scroll progress ---------- */
#progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:120;
  background:var(--gilt-soft);
}

/* ---------- nav ---------- */
#nav{
  position:sticky;top:0;z-index:100;
  background:rgba(19,16,9,.88);
  border-bottom:1px solid var(--gilt-faint);
}
@supports (backdrop-filter:blur(4px)){
  #nav{background:rgba(19,16,9,.72);backdrop-filter:blur(9px)}
}
.nav-inner{
  display:flex;align-items:center;gap:1.1rem;
  padding:.7rem 0;min-width:0;
}
.brand{display:flex;align-items:center;gap:.65rem;flex:none}
.brand img{width:36px;height:36px;border-radius:50%;border:1px solid var(--gilt-soft)}
.brand b{font-family:var(--font-display);font-weight:700;letter-spacing:.12em;color:var(--ivory);font-size:1.02rem}
.nav-links{display:flex;gap:1.35rem;margin-left:.8rem;min-width:0}
.nav-links a{
  font-size:.86rem;color:var(--ivory-dim);letter-spacing:.05em;white-space:nowrap;
  border-bottom:1px solid transparent;padding:2px 0;
  transition:color .2s,border-color .2s;
}
.nav-links a:hover{color:var(--ivory);border-color:var(--gilt-soft)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:.7rem;min-width:0}
.clock-chip{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.14em;
  color:var(--gilt);border:1px solid var(--gilt-faint);border-radius:4px;
  padding:.42rem .7rem;white-space:nowrap;flex:none;
  transition:border-color .2s;
}
.clock-chip:hover{border-color:var(--gilt-soft)}
.ca-pill{
  display:flex;align-items:center;gap:.5rem;min-width:0;
  border:1px solid var(--gilt-faint);border-radius:4px;padding:.42rem .7rem;
  font-family:var(--font-mono);font-size:.74rem;color:var(--ivory-dim);
  max-width:min(34vw,190px);cursor:pointer;transition:border-color .2s;
}
.ca-pill:hover{border-color:var(--gilt-soft)}
.ca-pill .lbl{color:var(--gilt);letter-spacing:.1em;flex:none}
.ca-pill .val{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#burger{display:none;flex:none;width:44px;height:44px;position:relative}
#burger span{
  position:absolute;left:11px;right:11px;height:1.5px;background:var(--ivory);
  transition:transform .3s var(--ease-velvet),opacity .2s;
}
#burger span:nth-child(1){top:16px}
#burger span:nth-child(2){top:22px}
#burger span:nth-child(3){top:28px}
#burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
#burger.open span:nth-child(2){opacity:0}
#burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
#mobile-panel{
  position:absolute;top:100%;left:0;right:0;display:none;
  background:var(--marble-2);border-bottom:1px solid var(--gilt-faint);
  padding:1rem 1.4rem 1.4rem;flex-direction:column;gap:1rem;
}
#mobile-panel.open{display:flex}
#mobile-panel a{font-size:1rem;color:var(--ivory-dim);letter-spacing:.05em}
#mobile-panel a:hover{color:var(--ivory)}

/* ---------- hero ---------- */
#hero{padding:4.6rem 0 6rem}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:3.6rem;align-items:center;
}
.hero-copy{min-width:0}
.hero-title{
  font-size:clamp(2.1rem,4.6vw,3.55rem);font-weight:800;letter-spacing:.05em;
  margin:0 0 1.3rem;
}
/* the accent line stays ivory — gilt is engraving, never an area fill;
   the metal appears only as the hairline underline */
.hero-title .accent{
  color:var(--ivory);font-weight:700;
  text-decoration:underline;text-decoration-color:var(--gilt-soft);
  text-decoration-thickness:1px;text-underline-offset:.16em;
}
.hero-bio{font-size:1.08rem;max-width:52ch;margin-bottom:1.9rem}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:1.6rem}
.hero-ca{
  display:flex;align-items:center;gap:.7rem;max-width:100%;min-width:0;
  border:1px solid var(--gilt-faint);border-radius:4px;
  padding:.7rem 1rem;cursor:pointer;background:rgba(26,21,18,.5);
  font-family:var(--font-mono);font-size:.82rem;
  transition:border-color .2s;
}
.hero-ca:hover{border-color:var(--gilt-soft)}
.hero-ca .lbl{color:var(--gilt);letter-spacing:.14em;flex:none}
.hero-ca .val{color:var(--ivory-dim);min-width:0;overflow-wrap:anywhere}
.hero-ca svg{width:.95rem;height:.95rem;flex:none;color:var(--gilt)}
.hero-portrait{
  position:relative;border:1px solid var(--gilt-soft);border-radius:6px;
  padding:10px;background:linear-gradient(165deg,var(--marble-3),var(--marble-2));
}
.hero-portrait::before{
  content:"";position:absolute;inset:4px;border:1px solid var(--gilt-faint);border-radius:4px;
  pointer-events:none;
}
.hero-portrait img{border-radius:3px}
.hero-portrait figcaption{
  padding:.8rem .4rem .3rem;display:flex;justify-content:space-between;gap:1rem;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.22em;color:var(--gilt);
}

/* ---------- the signature card ---------- */
#sign{padding-top:0}
.sign-wrap{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:3rem;align-items:center;
}
.sign-copy{min-width:0}
.sign-stage{
  position:relative;min-height:380px;display:grid;place-items:center;
  perspective:900px;min-width:0;
}
.sig-card{
  position:relative;width:min(430px,100%);border-radius:3px;
  background:linear-gradient(172deg,#F6F4EE 0%,var(--ivory) 55%,#EBE8DF 100%);
  box-shadow:0 18px 44px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.4);
  padding:1.5rem 1.6rem 1.2rem;
  color:#4C4738;
  transition:transform .8s var(--ease-velvet),opacity .8s;
}
.sig-card.slide-in{animation:card-slide 1s var(--ease-velvet) both}
@keyframes card-slide{
  0%{transform:translateX(46%) rotate(4deg);opacity:0}
  100%{transform:translateX(0) rotate(0);opacity:1}
}
.sig-card.filed{transform:translateY(54%) scale(.55) rotate(-2.5deg);opacity:0} /* into the case below */
.sig-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  border-bottom:1px solid rgba(76,71,56,.28);padding-bottom:.55rem;margin-bottom:.9rem;
}
.sig-head b{font-family:var(--font-display);font-weight:700;letter-spacing:.16em;font-size:.82rem;color:#3B372B}
.sig-head span{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.18em;color:#6E6852}
.sig-canvas-frame{
  position:relative;border:1px dashed rgba(76,71,56,.35);border-radius:2px;
  height:172px;overflow:hidden;touch-action:pan-y; /* JS commits to none on first contact */
  background:
    repeating-linear-gradient(0deg,transparent 0 34px,rgba(76,71,56,.07) 34px 35px);
}
#sigCanvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
.sig-hint{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.3em;color:#6E6852;
  transition:opacity .4s;
}
.sig-card.marked .sig-hint{opacity:0}
.sig-foot{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  margin-top:.85rem;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;color:#6E6852;
}
.sig-onfile{display:flex;align-items:center;gap:.5rem}
.sig-onfile .pawmark{width:22px;height:22px;opacity:.75}
.sig-clear{
  position:relative;
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;color:#6E6852;
  border-bottom:1px solid rgba(76,71,56,.4);padding-bottom:1px;
}
.sig-clear::after{content:"";position:absolute;inset:-14px} /* real touch target */
.sig-clear:hover{color:#3B372B}
/* the black paw that slides the card away */
.sign-paw{
  position:absolute;right:-8%;bottom:6%;width:190px;height:auto;z-index:3;
  transform:translateX(120%) rotate(-6deg);pointer-events:none;
}
.sign-paw.enter{animation:paw-slide 1.5s var(--ease-velvet) both}
@keyframes paw-slide{
  0%{transform:translateX(130%) rotate(-6deg)}
  38%{transform:translateX(6%) rotate(0deg)}
  62%{transform:translateX(4%) rotate(0deg)}
  100%{transform:translateX(130%) rotate(2deg)}
}
/* the gunmetal case (drawn, lacquer — the pale-silver swatch is banned) */
.sign-case{
  position:absolute;bottom:-4%;left:50%;transform:translateX(-50%) translateY(30%);
  width:min(320px,72%);opacity:0;z-index:2;
  transition:transform .9s var(--ease-velvet),opacity .6s;
}
.sign-case.enter{opacity:1;transform:translateX(-50%) translateY(0)}
.sign-tag{
  position:absolute;z-index:4;left:calc(50% + 64px);bottom:14%;
  transform-origin:top center;opacity:0;
}
.sign-tag.swing{opacity:1;animation:tag-swing 2.2s var(--ease-velvet) both}
@keyframes tag-swing{
  0%{transform:rotate(24deg);opacity:0}
  20%{opacity:1}
  40%{transform:rotate(-10deg)}
  65%{transform:rotate(6deg)}
  85%{transform:rotate(-2.5deg)}
  100%{transform:rotate(0)}
}
.sign-verdict{
  position:absolute;top:5%;left:0;right:0;text-align:center;
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.24em;color:var(--gilt);
  opacity:0;transition:opacity .5s .2s;
}
.sign-verdict.show{opacity:1}
.sig-saucer{width:min(300px,70%);margin-inline:auto}

/* ---------- split-flap departures board ---------- */
#board{padding:4.4rem 0}
.board-shell{
  border:1px solid var(--gilt-faint);border-radius:8px;
  background:linear-gradient(180deg,#17130E,#100D09);
  padding:1.6rem clamp(.8rem,3vw,2.4rem) 1.9rem;
  overflow-x:auto;
}
.board-title{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.3em;color:var(--gilt);
  margin-bottom:1.2rem;white-space:nowrap;
}
.board-rows{display:grid;gap:.55rem;min-width:560px}
.board-row{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.55fr) minmax(0,1.1fr);
  gap:1.4rem;align-items:center;
}
.board-row.head{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.26em;color:#8F866F;
  padding-bottom:.3rem;border-bottom:1px solid var(--gilt-faint);
}
.flap-line{display:flex;gap:2px;min-width:0}
.flap{
  position:relative;width:1.06em;height:1.55em;flex:none;
  font-family:var(--font-mono);font-size:.92rem;color:var(--ivory);
  background:#211C15;border-radius:2px;
  perspective:220px;
  contain:layout style paint; /* scope the flip's forced reflow to the cell */
}
.flap.unjam .leaf{transition:transform .16s ease-in}
.flap::after{ /* the split line — the Solari signature */
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:rgba(0,0,0,.75);z-index:5;
}
.flap .half{
  position:absolute;left:0;right:0;height:50%;overflow:hidden;
  display:flex;justify-content:center;backface-visibility:hidden;
}
.flap .top{top:0;align-items:flex-start;border-radius:2px 2px 0 0;background:#252017}
.flap .bottom{bottom:0;align-items:flex-end;border-radius:0 0 2px 2px;background:#1E1912}
.flap .half span{height:1.55em;line-height:1.55em;display:block}
.flap .leaf{
  position:absolute;left:0;right:0;top:0;height:50%;z-index:4;
  transform-origin:bottom center;overflow:hidden;
  display:flex;justify-content:center;align-items:flex-start;
  background:#252017;border-radius:2px 2px 0 0;
  transform:rotateX(0);
}
.flap .leaf span{height:1.55em;line-height:1.55em;display:block}
.flap.flipping .leaf{animation:leaf-flip .17s ease-in both}
@keyframes leaf-flip{0%{transform:rotateX(0)}100%{transform:rotateX(-88deg)}}
.flap.jammed .leaf{transform:rotateX(-52deg);animation:none}
.flap-glove{position:absolute;z-index:9;width:44px;height:auto;top:-30px;left:-8px;
  transform:translateY(-14px);opacity:0;pointer-events:none}
.flap-glove.tap{animation:glove-tap .9s ease both}
@keyframes glove-tap{
  0%{opacity:0;transform:translateY(-16px)}
  35%{opacity:1;transform:translateY(-2px)}
  55%{transform:translateY(2px)}
  100%{opacity:0;transform:translateY(-14px)}
}
.board-note{
  margin-top:1.1rem;font-family:var(--font-mono);font-size:.6rem;
  letter-spacing:.22em;color:#8F866F;
}

/* ---------- syndicate dossiers ---------- */
.dossier-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem;margin-top:2.6rem;
}
.dossier{
  overflow:hidden;padding:0;
  transition:transform .35s var(--ease-velvet),border-color .3s;
}
.dossier:hover{transform:translateY(-6px);border-color:var(--gilt-soft)}
.dossier .photo{position:relative;overflow:hidden}
.dossier .photo img{transition:transform .8s var(--ease-velvet)}
.dossier:hover .photo img{transform:scale(1.045)}
.dossier .photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(19,16,9,.85),transparent 42%);
}
.dossier-body{padding:1.1rem 1.15rem 1.25rem;position:relative}
.dossier-name{font-family:var(--font-display);font-weight:700;letter-spacing:.1em;color:var(--ivory);font-size:1.06rem}
.dossier-role{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.24em;color:var(--gilt);margin:.35rem 0 .7rem}
.dossier-line{font-size:.86rem;color:var(--body-text);min-height:3.4em}
.dossier-stats{
  display:flex;justify-content:space-between;margin-top:.9rem;padding-top:.7rem;
  border-top:1px solid var(--gilt-faint);
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;color:#8F866F;
}
.dossier-stats b{color:var(--gilt);font-weight:400}
/* the crooked tie egg */
.tie-egg{position:absolute;top:-2.35rem;right:.9rem;width:26px;height:44px;cursor:pointer;
  overflow:visible;
  transform:rotate(3.2deg);transform-origin:top center;transition:transform .5s var(--ease-velvet)}
.tie-egg::after{content:"";position:absolute;inset:-12px} /* real touch target */
.tie-egg.straight{transform:rotate(0)}

/* ---------- the two minutes ---------- */
#twominutes .rail{max-width:820px}
.tm-line{position:relative;margin-top:3rem;padding-left:2.4rem}
.tm-line::before{
  content:"";position:absolute;left:9px;top:6px;bottom:6px;width:1px;
  background:var(--gilt-faint);
}
.tm-line .tm-draw{
  position:absolute;left:9px;top:6px;width:1px;height:0;
  background:var(--gilt-soft);transition:height .2s linear;
}
.tm-step{position:relative;padding-bottom:2.6rem}
.tm-step:last-child{padding-bottom:0}
.tm-step::before{
  content:"";position:absolute;left:-2.4rem;top:.42em;width:7px;height:7px;
  border:1px solid var(--gilt);border-radius:50%;background:var(--marble);
  transform:translateX(6px);
}
.tm-time{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;color:var(--gilt);margin-bottom:.3rem}
.tm-step h3{margin-bottom:.35rem}
.tm-step p{max-width:56ch;font-size:.95rem}
.tm-coda{
  margin-top:3rem;padding:1.6rem 1.8rem;
  background:linear-gradient(165deg,var(--velvet),#0E2F24);
  border:1px solid var(--gilt-faint);border-radius:6px;
}
.tm-coda p{color:#D8E4DA;font-size:1rem;max-width:none}
.tm-coda .mono{color:#9DBFA9;font-size:.7rem;letter-spacing:.22em}

/* ---------- terms (tokenomics) ---------- */
#terms .term-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem;margin-top:2.6rem;
}
.term-card{padding:1.5rem 1.4rem 1.4rem;transition:transform .35s var(--ease-velvet),border-color .3s}
.term-card:hover{transform:translateY(-5px);border-color:var(--gilt-soft)}
.term-label{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.26em;color:var(--gilt);margin-bottom:.7rem}
.term-value{font-family:var(--font-mono);font-size:clamp(1.15rem,2vw,1.5rem);color:var(--ivory);overflow-wrap:anywhere}
.term-note{font-size:.82rem;margin-top:.55rem;color:#9A9280}

/* ---------- the velvet walk ---------- */
#walk .walk-shell{
  margin-top:2.6rem;border:1px solid var(--gilt-faint);border-radius:8px;
  background:linear-gradient(180deg,var(--marble-2),#0F0C08);
  padding:clamp(.9rem,2.5vw,1.8rem);
}
.walk-hud{
  display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between;
  margin-bottom:1rem;
}
.hud-left{display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap}
.decorum{
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.2em;color:var(--gilt);
}
.decorum-track{
  width:170px;height:6px;border:1px solid var(--gilt-faint);border-radius:3px;
  overflow:hidden;background:rgba(0,0,0,.35);
}
.decorum-fill{
  height:100%;width:100%;background:linear-gradient(90deg,var(--velvet),var(--velvet-2));
  transform-origin:left;transition:transform .12s linear;
}
.stirs{display:flex;align-items:center;gap:.45rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.2em;color:var(--gilt)}
.stir-dot{width:9px;height:9px;border:1px solid var(--gilt-soft);border-radius:50%}
.stir-dot.hit{background:var(--danger);border-color:var(--danger)}
.walk-best{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.2em;color:#8F866F}
.walk-stage{position:relative;border-radius:5px;overflow:hidden;background:#0D0B07}
#walkCanvas{display:block;width:100%;height:auto;touch-action:none;cursor:none}
.walk-stage.idlecursor #walkCanvas{cursor:default}
.walk-overlay{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  background:rgba(10,8,5,.78);padding:1.5rem;z-index:5;
}
.walk-overlay .inner{max-width:430px}
.walk-overlay h3{font-size:1.3rem;letter-spacing:.1em;margin-bottom:.7rem}
.walk-overlay p{font-size:.92rem;margin-bottom:1.2rem}
.walk-plaque{
  display:inline-block;margin-bottom:1.2rem;padding:.5rem 1rem;
  border:1px solid var(--gilt-soft);border-radius:3px;
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.26em;color:var(--gilt);
}
.walk-caption{
  position:absolute;left:0;right:0;bottom:.7rem;text-align:center;z-index:4;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.22em;color:var(--gilt);
  text-shadow:0 1px 4px rgba(0,0,0,.8);pointer-events:none;
  opacity:0;transition:opacity .3s;
}
.walk-caption.show{opacity:1}
.walk-foot{
  margin-top:.9rem;display:flex;flex-wrap:wrap;gap:.9rem;justify-content:space-between;
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.18em;color:#8F866F;
}

/* the deed (win overlay) */
.deed{
  width:min(430px,92%);background:linear-gradient(172deg,#F6F4EE,var(--ivory) 60%,#EBE8DF);
  color:#4C4738;border-radius:3px;padding:1.7rem 1.8rem;text-align:left;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.deed h4{
  font-family:var(--font-display);font-weight:800;letter-spacing:.18em;color:#3B372B;
  font-size:1rem;text-align:center;margin-bottom:1.1rem;
}
.deed .row{
  display:flex;justify-content:space-between;gap:1rem;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;
  padding:.42rem 0;border-bottom:1px solid rgba(76,71,56,.18);
}
.deed .row b{font-weight:400;color:#3B372B}
.deed .deed-line{
  text-align:center;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.22em;
  color:#6E6852;margin-top:1.1rem;
}
.deed .btn{margin-top:1.2rem}

/* ---------- how to be acquired ---------- */
.how-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem;margin-top:2.6rem}
.how-card{padding:1.5rem 1.4rem;position:relative}
.how-num{
  font-family:var(--font-display);font-weight:800;font-size:1.6rem;color:var(--ivory-dim);
  margin-bottom:.8rem;
}
.how-card h3{margin-bottom:.5rem}
.how-card p{font-size:.88rem}
.how-card .chip-ico{width:30px;height:30px;position:absolute;top:1.45rem;right:1.3rem;opacity:.8}

/* ---------- ledger (telemetry) ---------- */
#ledger .ledger-shell{margin-top:2.6rem;padding:1.7rem clamp(1rem,3vw,2rem)}
.ledger-head{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  margin-bottom:1.3rem;
}
.ledger-state{
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.22em;color:var(--gilt);
}
.ledger-dot{width:8px;height:8px;border-radius:50%;background:#8F866F}
.ledger-dot.live{background:var(--velvet-2)}
.ledger-dot.err{background:var(--danger)}
.ledger-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem}
.ledger-tile{border:1px solid var(--gilt-faint);border-radius:5px;padding:1.05rem 1.1rem}
.ledger-tile .t-label{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.24em;color:#8F866F;margin-bottom:.5rem}
.ledger-tile .t-value{font-family:var(--font-mono);font-size:1.12rem;color:var(--ivory);overflow-wrap:anywhere}
.ledger-tile .t-value.neg{color:var(--danger)}
.ledger-tile .t-value.pos{color:var(--velvet-hi)}
.ledger-note{margin-top:1rem;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.18em;color:#8F866F}

/* ---------- community ---------- */
#community{padding-bottom:7rem}
.community-inner{
  text-align:center;padding:3.6rem clamp(1.2rem,4vw,3rem);
  background:linear-gradient(165deg,var(--velvet),#0D2C21);
  border:1px solid var(--gilt-faint);border-radius:8px;
}
.community-inner h2{margin-bottom:.7rem}
.community-inner p{color:#C9D8CC;max-width:46ch;margin:0 auto 1.8rem}
.community-inner .hero-ctas{justify-content:center;margin-bottom:0}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--gilt-faint);padding:2.6rem 0 3rem;
  font-size:.85rem;color:#8F866F;
}
.foot-grid{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
.foot-brand{display:flex;align-items:center;gap:.6rem}
.foot-brand img{width:30px;height:30px;border-radius:50%;border:1px solid var(--gilt-faint)}
.foot-brand b{font-family:var(--font-display);letter-spacing:.12em;color:var(--ivory-dim)}
.foot-ledger{
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.18em;color:var(--gilt);
  display:flex;flex-direction:column;gap:.45rem;
}
.foot-links{display:flex;gap:1.3rem;font-size:.84rem}
.foot-links a{color:#8F866F}
.foot-links a:hover{color:var(--ivory)}
.disclaimer{
  margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--gilt-faint);
  font-size:.76rem;line-height:1.7;max-width:74ch;
}

/* ---------- toasts + calling card + heist dim ---------- */
#toast{
  position:fixed;left:50%;bottom:2rem;transform:translateX(-50%) translateY(20px);
  z-index:150;padding:.7rem 1.3rem;border-radius:4px;
  background:var(--marble-3);border:1px solid var(--gilt-soft);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;color:var(--ivory);
  opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;
  max-width:min(92vw,480px);text-align:center;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#calling-card{
  position:fixed;right:2rem;bottom:2rem;z-index:150;width:250px;
  background:linear-gradient(172deg,#F6F4EE,var(--ivory));color:#4C4738;
  border-radius:3px;padding:1.1rem 1.2rem;box-shadow:0 16px 40px rgba(0,0,0,.55);
  transform:translateY(140%) rotate(3deg);transition:transform .8s var(--ease-velvet);
}
#calling-card.show{transform:translateY(0) rotate(0)}
#calling-card b{font-family:var(--font-display);letter-spacing:.16em;font-size:.85rem;color:#3B372B;display:block;margin-bottom:.4rem}
#calling-card p{font-size:.74rem;line-height:1.5;font-family:var(--font-mono);letter-spacing:.05em}
#heist-dim{
  /* z-index below the nav; body.heisting lifts the rest of the hard
     exclusion list (CA pill, buy/chart/swap links, telemetry, disclaimer)
     above the scrim so nothing on the list is ever dimmed */
  position:fixed;inset:0;z-index:90;pointer-events:none;opacity:0;
  background:rgba(6,5,3,.82);transition:opacity .45s;
}
body.heisting .hero-ca,
body.heisting .js-buy,
body.heisting .js-chart,
body.heisting .js-jup,
body.heisting .js-x,
body.heisting .ledger-shell,
body.heisting .disclaimer{position:relative;z-index:95}
#heist-dim.on{opacity:1}
#heist-dim .glint{
  position:absolute;top:0;bottom:0;width:130px;left:-140px;
  background:linear-gradient(100deg,transparent,rgba(211,200,159,.13),transparent);
}
#heist-dim.on .glint{animation:glint-sweep 1.9s ease .1s both}
@keyframes glint-sweep{0%{left:-140px}100%{left:110%}}
#heist-case{
  position:fixed;bottom:1.2rem;left:-220px;z-index:91;width:150px;opacity:0;
  pointer-events:none;
}
#heist-case.run{opacity:1;animation:case-glide 2s var(--ease-velvet) both}
@keyframes case-glide{0%{left:-220px}100%{left:110%}}

/* glove cursor mist (click FX — soft wipe, <400ms, no particles) */
.glove-mist{
  position:fixed;z-index:130;width:52px;height:52px;margin:-26px 0 0 -26px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(243,241,234,.16) 0%,transparent 70%);
  animation:mist .38s ease-out forwards;
}
@keyframes mist{0%{opacity:1;transform:scale(.5)}100%{opacity:0;transform:scale(1.5)}}
/* after a "please": the glove gains a cufflink glint */
html.gloved .glove-mist{box-shadow:inset 0 0 0 1px rgba(211,200,159,.4)}

/* ---------- the case egg (section prop) ---------- */
.case-egg{
  position:relative;margin:3rem auto 0;width:min(360px,88%);cursor:pointer;
  border-radius:6px;
}
.case-egg .case-photo{border-radius:6px;border:1px solid var(--gilt-faint)}
.case-lid{
  position:absolute;inset:0;border-radius:6px;overflow:hidden;
  transform-origin:top center;transition:transform .8s var(--ease-velvet),opacity .5s .3s;
  backface-visibility:hidden;
}
.case-egg.open .case-lid{transform:rotateX(78deg);opacity:0}
.case-caption{
  text-align:center;margin-top:1rem;font-family:var(--font-mono);
  font-size:.64rem;letter-spacing:.24em;color:var(--gilt);min-height:1.4em;
}

/* ---------- reveals ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s var(--ease-velvet)}
.reveal.shown{opacity:1;transform:none}
html.no-motion .reveal{opacity:1;transform:none;transition:none}

/* ---------- motion gates ---------- */
html.no-motion *,html.no-motion *::before,html.no-motion *::after{
  animation-duration:.001s!important;animation-iteration-count:1!important;
  transition-duration:.001s!important;
}
html.no-motion .sig-card.slide-in{animation:none;opacity:1;transform:none}
html.no-motion #walkCanvas{cursor:default}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .dossier-grid,.how-grid,#terms .term-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ledger-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:940px){
  .hero-grid,.sign-wrap{grid-template-columns:minmax(0,1fr);gap:2.6rem}
  .hero-portrait{max-width:560px}
  .nav-links{display:none}
  #burger{display:block}
}
@media (max-width:640px){
  section{padding:4.6rem 0}
  .dossier-grid,.how-grid,#terms .term-grid,.ledger-grid{grid-template-columns:minmax(0,1fr)}
  .ca-pill{max-width:min(34vw,150px)}
  .clock-chip{display:none}
  .hero-ca .val{white-space:normal;overflow-wrap:anywhere}
  #calling-card{right:1rem;bottom:1rem;width:220px}
  .sign-tag{left:auto;right:6%}
}
@media (max-width:400px){
  .ca-pill{display:none}
  .brand b{font-size:.92rem}
}
