/* ============================================================
   ANONYMOUS MOLE ($ZMOLE) - sol161
   Archetype B: split hero + stat tiles. (No previous token used B.)
   Ground: cold graphite-blue. Ink: bone. Accent: one warm signal amber -
   a cold room with a single warm bulb, which is how every image is lit.
   ============================================================ */

@font-face{
  font-family:'Petrona';
  src:url('../fonts/petrona-var.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Petrona';
  src:url('../fonts/petrona-italic-var.woff2') format('woff2-variations');
  font-weight:100 900; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Roboto Mono';
  src:url('../fonts/robotomono-var.woff2') format('woff2-variations');
  font-weight:100 700; font-style:normal; font-display:swap;
}

:root{
  --ground:#131B21;
  --deep:#0C1216;
  --panel:#1B262E;
  --raised:#243139;
  --hair:#37474F;
  --ink:#E8E4DB;
  --dim:#A6B2B8;
  --amber:#E0952F;
  --amber-hi:#F0AE55;

  --serif:'Petrona',Georgia,'Times New Roman',serif;
  --mono:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --gut:clamp(20px,5vw,72px);
  --band:clamp(60px,8vw,124px);
  --maxw:1280px;
  --e:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}

html{background:var(--ground);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.rm{scroll-behavior:auto}

body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--serif);font-size:clamp(17px,1.05vw,19px);
  font-weight:300;line-height:1.62;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--amber);color:var(--deep)}

.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--amber);color:var(--deep);padding:12px 20px;font-family:var(--mono);font-size:14px;text-decoration:none}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--amber-hi);outline-offset:3px}

/* ---------------- type ---------------- */
h1,h2,h3{font-weight:300;line-height:1.1;letter-spacing:-.015em;margin:0}
h2{font-size:clamp(28px,3.3vw,46px)}
h3{font-size:clamp(19px,1.5vw,23px);line-height:1.22}
p{margin:0}

.kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--amber);margin:0 0 16px;
}
.kicker--c{text-align:center}

/* ---------------- top bar ---------------- */
.bar{
  position:fixed;inset:0 0 auto 0;z-index:40;
  display:flex;align-items:center;gap:16px;padding:13px var(--gut);
  background:color-mix(in srgb,var(--deep) 86%,transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .4s var(--e);
}
.bar.is-stuck{border-bottom-color:var(--hair)}
.bar__mark{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-size:clamp(15px,1.2vw,18px);margin-right:auto}
.bar__mark img{width:36px;height:36px;border-radius:3px;border:1px solid var(--hair)}
.bar__nav{display:flex;gap:clamp(14px,2vw,32px)}
.bar__nav a{
  color:var(--dim);text-decoration:none;font-family:var(--mono);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;padding:6px 0;
  border-bottom:1px solid transparent;transition:color .25s var(--e),border-color .25s var(--e);
}
.bar__nav a:hover,.bar__nav a:focus-visible{color:var(--ink);border-bottom-color:var(--amber)}
.bar__burger{display:none;width:42px;height:32px;padding:7px 6px;background:none;border:0;cursor:pointer;flex-direction:column;justify-content:space-between}
.bar__burger span{display:block;height:1.5px;background:var(--ink);transition:transform .3s var(--e),opacity .3s var(--e)}
.bar__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.bar__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.bar__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------------- HERO : the split (archetype B) ---------------- */
.hero{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,4vw,64px);align-items:center;
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(104px,14vh,168px) var(--gut) var(--band);
}
.hero__eyebrow{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--amber);margin-bottom:22px;
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--amber);flex:none;animation:pulse 2.6s var(--e) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
html.rm .dot{animation:none}
.hero__title{
  font-size:clamp(46px,6.4vw,92px);line-height:.94;letter-spacing:-.035em;
  font-weight:200;margin-bottom:20px;text-wrap:balance;
}
.hero__title span{font-style:italic;color:var(--amber-hi)}
.hero__beat{font-size:clamp(18px,1.9vw,26px);line-height:1.34;max-width:24ch;margin-bottom:32px}
.only-s{display:none}

.hero__fig{margin:0;position:relative}
/* The hero art was composed subject-right with an empty left half. In a frame
   (rather than as a full-bleed overlay) that empty half is dead space, so the
   frame crops to the subject instead of showing the whole plate. */
.hero__fig img{
  width:100%;aspect-ratio:5/4;object-fit:cover;object-position:74% 50%;
  border:1px solid var(--hair);border-radius:2px;
}
.hero__fig figcaption{
  margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.05em;
  color:var(--dim);line-height:1.5;
}

/* ---------------- buttons ---------------- */
.acts{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:26px}
.btn{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  padding:14px 24px;border:1px solid var(--hair);border-radius:2px;
  background:transparent;color:var(--ink);text-decoration:none;cursor:pointer;
  transition:border-color .28s var(--e),color .28s var(--e),background .28s var(--e),transform .28s var(--e);
}
.btn:hover,.btn:focus-visible{border-color:var(--amber);color:var(--amber-hi);transform:translateY(-2px)}
html.rm .btn:hover,html.rm .btn:focus-visible{transform:none}
.btn--solid{background:var(--amber);border-color:var(--amber);color:var(--deep);font-weight:500}
.btn--solid:hover,.btn--solid:focus-visible{background:var(--amber-hi);border-color:var(--amber-hi);color:var(--deep)}
.btn[data-state="pending"]{opacity:.6;cursor:not-allowed}
.btn[data-state="pending"]:hover{transform:none;border-color:var(--hair);color:var(--ink)}

/* ---------------- contract pill ---------------- */
.ca{
  display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12.5px;
  padding:12px 16px;border:1px solid var(--hair);border-radius:2px;
  background:var(--panel);max-width:100%;
}
.ca__k{color:var(--amber);letter-spacing:.16em;text-transform:uppercase;font-size:10.5px;flex:none}
.ca__v{color:var(--ink);word-break:break-all;overflow-wrap:anywhere;min-width:0;flex:1 1 auto}
.ca__v[data-state="pending"]{color:var(--dim);font-style:italic}
.ca__copy{
  flex:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  background:none;border:1px solid var(--hair);border-radius:2px;color:var(--dim);
  padding:7px 12px;cursor:pointer;transition:color .25s var(--e),border-color .25s var(--e);
}
.ca__copy:hover,.ca__copy:focus-visible{color:var(--amber-hi);border-color:var(--amber)}
.ca__copy[data-state="pending"]{opacity:.5;cursor:not-allowed}
.ca--c{justify-content:center;margin:40px auto 0;width:fit-content}

/* ---------------- STAT TILES (archetype B signature) ---------------- */
.tiles-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) var(--band)}
.tiles{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--hair);border-radius:2px;overflow:hidden;
}
.tile{
  background:var(--panel);padding:clamp(20px,2.2vw,30px);
  display:flex;flex-direction:column;gap:6px;
  border-right:1px solid var(--hair);
}
.tile:last-child{border-right:0}
.tile__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.tile__n{font-size:clamp(40px,4.6vw,62px);line-height:1;font-weight:200;color:var(--ink);letter-spacing:-.03em}
.tile__d{color:var(--dim);font-size:14.5px;line-height:1.5}

/* ---------------- REDACTION ---------------- */
.redact{
  max-width:940px;margin:0 auto;padding:0 var(--gut) var(--band);text-align:center;
}
.redact p:first-child{font-size:clamp(22px,3vw,40px);line-height:1.3;font-weight:200;text-wrap:balance}
.bar-out{position:relative;white-space:nowrap}
/* The text underneath keeps its real bone colour - the bar is an overlay, so
   the words are genuinely legible to a screen reader and to a contrast check. */
.bar-out::after{
  content:"";position:absolute;inset:-1px -6px;background:var(--ink);
  transform-origin:left;transition:transform .45s var(--e);
}
.bar-out:hover::after,.bar-out:focus-visible::after{transform:scaleX(0)}
html.rm .bar-out::after{transition:none}
@media (hover:none){ .bar-out::after{transform:scaleX(0)} }
.redact__note{margin-top:20px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
@media (hover:none){ .redact__note{visibility:hidden} }

/* ---------------- splits ---------------- */
.split{
  display:grid;gap:clamp(26px,4vw,68px);align-items:center;grid-template-columns:1fr 1fr;
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) var(--band);
}
.split--flip .split__fig{order:2}
.split__fig{margin:0}
.split__fig img{width:100%;border-radius:2px;border:1px solid var(--hair)}
.split__txt h2{margin-bottom:18px;text-wrap:balance}
.split__txt p{color:var(--dim);max-width:48ch}

/* ---------------- archive band (the 3:1 banner) ---------------- */
.archive{margin:0 0 var(--band)}
.archive img{width:100%;height:auto;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.archive__cap{
  max-width:var(--maxw);margin:20px auto 0;padding:0 var(--gut);
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--dim);text-align:center;
}

/* ---------------- gallery ---------------- */
.gal{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) var(--band)}
.gal__i{margin:0;position:relative;overflow:hidden;border:1px solid var(--hair);border-radius:2px}
.gal__i--wide{grid-column:1 / -1}
.gal__i img{width:100%;transition:transform .9s var(--e)}
.gal__i:hover img{transform:scale(1.035)}
html.rm .gal__i:hover img{transform:none}
.gal__i figcaption{
  position:absolute;inset:auto 0 0 0;padding:32px 18px 14px;
  background:linear-gradient(to top,color-mix(in srgb,var(--deep) 94%,transparent),transparent);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--ink);
}

/* ---------------- the chair ---------------- */
.chair{
  position:relative;min-height:min(84svh,720px);display:grid;align-items:center;
  margin-bottom:var(--band);overflow:hidden;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
}
.chair__art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.chair__txt{position:relative;padding:clamp(36px,6vw,84px) var(--gut);max-width:var(--maxw);margin:0 auto;width:100%}
.chair__txt::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to right,color-mix(in srgb,var(--deep) 90%,transparent),transparent 72%);
}
.chair__txt h2{max-width:15ch;margin-bottom:14px;text-wrap:balance}
.chair__txt p{color:var(--dim);max-width:42ch}

/* ---------------- story / buy ---------------- */
.story{padding:0 var(--gut) var(--band);max-width:var(--maxw);margin:0 auto}
.story__cards{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}
.card{background:var(--panel);border:1px solid var(--hair);border-radius:2px;padding:clamp(22px,2.4vw,34px)}
.card h3{color:var(--amber-hi);margin-bottom:11px}
.card p{color:var(--dim);font-size:15.5px}

.buy{padding:0 var(--gut) var(--band);max-width:var(--maxw);margin:0 auto}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}
.step{border-top:1px solid var(--hair);padding:24px 0 0}
.step__n{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--amber);margin-bottom:12px}
.step h3{margin-bottom:9px}
.step p{color:var(--dim);font-size:15.5px}

/* ---------------- footer ---------------- */
.foot{background:var(--deep);border-top:1px solid var(--hair);padding:clamp(40px,5.5vw,72px) var(--gut) 32px}
.foot__in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:clamp(18px,3vw,40px);flex-wrap:wrap}
.foot__id{display:flex;align-items:center;gap:13px;margin-right:auto}
.foot__id img{width:50px;height:50px;border-radius:3px;border:1px solid var(--hair)}
.foot__n{font-size:19px}
.foot__t{font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;color:var(--amber)}
.foot__links{display:flex;gap:9px;flex-wrap:wrap}
.foot__fine{max-width:var(--maxw);margin:32px auto 0;padding-top:22px;border-top:1px solid var(--hair);font-size:12.5px;line-height:1.6;color:var(--dim)}


/* ---------------- official platform icons ---------------- */
/* One monochrome law. dexscreener.svg uses fill="currentColor" and solana.svg /
   x.svg carry no fill at all; inside an <img> those resolve against the SVG's own
   document (black), so `color:` is inert and a filter is the only lever. */
.btn{display:inline-flex;align-items:center;gap:10px}
.btn__ic{width:20px;height:20px;flex:none}
.btn__ic[src$="x.svg"]{width:18px;height:18px}
.btn__ic,.step__ic,.foot__ic{filter:brightness(0) invert(1)}
.btn--solid .btn__ic{filter:brightness(0)}
/* .btn:hover flips the ground to amber, so a white mark would vanish */
.btn:hover .btn__ic,.btn:focus-visible .btn__ic{filter:brightness(0)}
.btn--text:hover .btn__ic,.btn--text:focus-visible .btn__ic{filter:brightness(0) invert(1)}

/* ---------------- CTA hierarchy ---------------- */
.btn--lg{font-size:14px;padding:18px 36px;letter-spacing:.14em}
.btn--lg .btn__ic{width:24px;height:24px}
.btn--text{
  border:0;padding:0 0 3px;background:transparent;color:var(--dim);
  font-size:12px;letter-spacing:.13em;border-bottom:2px solid var(--hair);border-radius:0;
}
.btn--text:hover,.btn--text:focus-visible{background:transparent;color:var(--amber-hi);border-bottom-color:var(--amber);transform:none}
.btn--text .btn__ic{width:18px;height:18px}
.acts{align-items:center;gap:14px 22px}

.bar__buy{padding:10px 18px;font-size:11.5px;margin-left:auto}
.bar__buy .btn__ic{width:18px;height:18px}
@media (max-width:900px){ .bar__buy{margin-left:0;order:2;padding:9px 14px} .bar__burger{order:3} }
@media (max-width:420px){ .bar__buy span{display:none} .bar__buy{padding:9px 11px} }

section[id]{scroll-margin-top:84px}

/* ---------------- reveal ---------------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--e),transform .8s var(--e)}
.reveal.in{opacity:1;transform:none}
html.rm .reveal{opacity:1;transform:none;transition:none}
html.no-js .reveal{opacity:1;transform:none}

/* ---------------- responsive ---------------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:clamp(92px,12vh,132px)}
  .hero__fig{order:-1}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .tile:nth-child(2){border-right:0}
  .tile:nth-child(1),.tile:nth-child(2){border-bottom:1px solid var(--hair)}
  .split,.story__cards,.steps,.gal{grid-template-columns:1fr}
  .split--flip .split__fig{order:0}
  .gal__i--wide{grid-column:auto}
  .only-s{display:inline}
  .bar__burger{display:flex}
  .bar__nav{
    position:absolute;inset:100% 0 auto 0;flex-direction:column;gap:0;
    background:var(--deep);border-bottom:1px solid var(--hair);padding:6px var(--gut) 18px;
  }
  .bar__nav a{padding:13px 0;border-bottom:1px solid var(--hair)}
  .bar__nav:not(.is-open){display:none}
}

@media (max-width:520px){
  .tiles{grid-template-columns:1fr}
  .tile{border-right:0;border-bottom:1px solid var(--hair)}
  .tile:last-child{border-bottom:0}
  .acts{flex-direction:column;align-items:stretch}
  .btn{text-align:center}
  .ca{font-size:11px;padding:11px 13px;gap:9px}
  .ca--c{width:100%}
  .foot__in{flex-direction:column;align-items:flex-start}
}

@media print{ .bar,.acts,.foot__links{display:none} body{background:#fff;color:#000} }