/* ─────────────────────────────────────────────────────────────
   Palette taken from the brand assets: 44% of the mark is warm
   paper, the parcel rim gives the bronze, the shadows give the
   cool grey. Contrast checked against paper: ink 13.7,
   secondary 4.8, link 4.8.
   ───────────────────────────────────────────────────────────── */
:root{
  --paper:#f2e7dc;
  --paper-2:#ece0d2;
  --card:#f7efe5;
  --ink:#241d14;
  --sec:#6f6259;
  --mut:#8a8079;
  --link:#7a6234;
  --bronze:#8f743f;
  --soft:#c69a66;
  --line:#dccdbe;
  --line-2:#cbb8a4;
  --ease:cubic-bezier(.16,1,.3,1);
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --w:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--w);margin:0 auto;padding:0 28px}

/* ── navigation ─────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex;align-items:center;gap:28px;height:64px}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.brand img{width:30px;height:30px;object-fit:contain;display:block}
.brand b{font-weight:600;font-size:17px;letter-spacing:-.01em}
.nav a.link{font-size:14px;color:var(--sec);transition:color .2s}
.nav a.link:hover{color:var(--ink)}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:999px;font-size:14px;font-weight:500;
  background:var(--ink);color:var(--card);border:1px solid var(--ink);
  transition:transform .25s var(--ease),background .25s;
}
.btn:hover{transform:translateY(-1px);background:#31281c}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--paper-2)}
.nav-toggle{display:none}

/* ── shared blocks ──────────────────────────────────────────── */
section{padding:96px 0;border-top:1px solid var(--line)}
section:first-of-type{border-top:0}
.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bronze);margin-bottom:22px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(40px,6.4vw,76px);line-height:1.04}
h2{font-size:clamp(30px,4vw,46px);line-height:1.1}
h3{font-size:21px;line-height:1.25}
.lede{color:var(--sec);font-size:17px;max-width:56ch;margin:18px 0 0}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ── hero ──────────────────────────────────────────────────── */
.hero{padding:86px 0 0;text-align:center}
.hero .eyebrow{justify-content:center}
.hero .eyebrow::after{display:none}
.hero .lede{margin:22px auto 0}
.cta{display:flex;gap:12px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.note{margin-top:16px;font-size:13px;color:var(--mut)}
.stage{
  position:relative;margin-top:56px;height:clamp(280px,42vw,520px);
  overflow:hidden;border-top:1px solid var(--line);
}

.stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,var(--paper) 0%,transparent 22%,transparent 74%,var(--paper) 100%),
    linear-gradient(to right,var(--paper) 0%,transparent 12%,transparent 88%,var(--paper) 100%);
}
@keyframes drift{
  from{transform:scale(1.05) translate3d(-1.4%,.7%,0)}
  to{transform:scale(1.13) translate3d(1.4%,-.9%,0)}
}


/* ── hero scene: layers at different depths ────────────────────
   Assembled from separate renders, so the parallax is real: every
   layer moves with its own amplitude from cursor and scroll, and
   bobs on its own period. */
.scene{position:relative;height:clamp(380px,52vw,680px);overflow:hidden;
  border-top:1px solid var(--line)}
.lay{position:absolute;display:block;will-change:transform;pointer-events:none}
.lay.sky{left:-4%;top:-6%;width:108%;height:112%;object-fit:cover}
/* The hero composition was generated as one finished frame, so a single
   layer is enough here. Hand placed islands are gone: parallax should work
   for meaning, not stand in for framing. */
.lay.frame{left:-3%;top:-4%;width:106%;height:108%;object-fit:cover}
.scene::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,var(--paper) 0%,transparent 14%,transparent 93%,var(--paper) 100%),
             linear-gradient(to right,var(--paper) 0%,transparent 8%,transparent 92%,var(--paper) 100%)}


/* ── floor ─────────────────────────────────────────────────── */
.floor{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.stack{display:flex;flex-direction:column;gap:26px}
.readout{border:1px solid var(--line);background:var(--card);border-radius:2px}
.readout .row{display:flex;justify-content:space-between;align-items:baseline;
  padding:20px 24px;border-bottom:1px solid var(--line)}
.readout .row:last-child{border-bottom:0}
.readout .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut)}
.readout .v{font-family:var(--mono);font-size:clamp(20px,2.6vw,30px);color:var(--ink)}
.readout .row.accent .v{color:var(--bronze)}
.hint{font-size:13px;color:var(--mut);margin-top:14px;font-family:var(--mono)}

/* ── the plate: the core diagram of the project ────────────────
   The rock thickness under a parcel is the coin's floor. As the
   treasury grows the plate thickens. The metaphor already sits in
   the mark, no need to invent one. */
.plate{width:100%;height:auto;display:block}
.plate .grass{fill:#8d9a5b}
.plate .town{fill:#f7efe5;stroke:var(--line-2);stroke-width:1}
.plate .rock{fill:url(#rockgrad)}
.plate .edge{fill:none;stroke:var(--line-2);stroke-width:1}
.plate .tick{stroke:var(--line-2);stroke-width:1}
.plate .lbl{font-family:var(--mono);font-size:9.5px;fill:var(--mut);letter-spacing:.1em}
.plate .val{font-family:var(--mono);font-size:12px;fill:var(--bronze)}
.plate .rockbody{transform-origin:center top;transform:scaleY(.18);
  transition:transform 1.5s var(--ease)}
.in .plate .rockbody{transform:scaleY(1)}
.platecap{display:flex;justify-content:space-between;font-family:var(--mono);
  font-size:11px;color:var(--mut);margin-top:14px;letter-spacing:.06em}

/* ── banner dividers ────────────────────────────────────────── */
.strip{position:relative;overflow:hidden;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);height:clamp(190px,26vw,330px)}
.strip video,.strip img{width:100%;height:100%;object-fit:cover;display:block}
.strip figcaption{position:absolute;left:0;right:0;bottom:18px;text-align:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sec)}

/* ── small glyphs for the charter articles ──────────────────── */
.cell svg{width:26px;height:26px;margin-bottom:14px;display:block}
.cell svg *{stroke:var(--bronze);stroke-width:1.2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}



/* ── closing section ────────────────────────────────────────── */
.closing{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.lonewrap{margin:0;overflow:hidden;border:1px solid var(--line);background:var(--card)}
.lonewrap img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.6s var(--ease);transform:scale(1.06)}
.in .lonewrap img,.lonewrap.in img{transform:scale(1)}
@media (max-width:820px){
  .closing{grid-template-columns:1fr;gap:30px}
  .scene.span .lay.p-brg{width:68%;left:14%}
  .scene.span .lay.p-left{width:30%;left:0%}
  .scene.span .lay.p-right{width:42%;left:58%}
  .scene.mini .lay.solo{width:36%;left:33%}
}


/* ── three states of a parcel ──────────────────────────────────
   The plates are aligned by their tops, by the village: the rock
   hangs below, and its height is the floor. Nothing to label. */
.plates{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;
  align-items:start;margin-top:54px;padding-top:40px;border-top:1px solid var(--line)}
.plates figure{margin:0;display:flex;flex-direction:column}
.plates img{width:100%;height:auto;display:block;align-self:start}
.plates figcaption{display:flex;flex-direction:column;gap:3px;margin-top:18px;
  padding-top:14px;border-top:1px solid var(--line)}
.plates b{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bronze);font-weight:500}
.plates .num{font-size:17px;color:var(--ink)}
.plates em{font-style:normal;font-size:13px;color:var(--mut)}
@media (max-width:820px){.plates{grid-template-columns:1fr;gap:26px}}

/* ── ledger ────────────────────────────────────────────────── */
.tablewrap{border:1px solid var(--line);background:var(--card);overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
th{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mut);text-align:left;font-weight:500;
  padding:14px 20px;border-bottom:1px solid var(--line);
}
td{padding:14px 20px;border-bottom:1px solid var(--line);color:var(--sec)}
tr:last-child td{border-bottom:0}
td.ev{color:var(--ink)}
td.amt,td.hash{font-family:var(--mono);font-variant-numeric:tabular-nums}
td.hash a{color:var(--link);border-bottom:1px solid transparent}
td.hash a:hover{border-bottom-color:var(--link)}
.tag{
  display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;padding:3px 8px;border:1px solid var(--line-2);
  border-radius:999px;color:var(--sec);
}
.tag.levy{color:var(--bronze);border-color:var(--soft)}

/* ── charter ───────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.cell{background:var(--card);padding:28px 26px 30px}
.cell .n{font-family:var(--mono);font-size:11px;color:var(--bronze);letter-spacing:.12em}
.cell h3{margin:12px 0 8px}
.cell p{margin:0;color:var(--sec);font-size:14.5px}

/* ── reserves marquee ───────────────────────────────────────── */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:18px 0;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.track{display:flex;gap:38px;width:max-content;animation:slide 46s linear infinite}
.track span{font-family:var(--mono);font-size:14px;color:var(--sec);letter-spacing:.06em}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── steps ─────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:34px}
.step .n{font-family:var(--mono);font-size:11px;color:var(--bronze);letter-spacing:.12em}
.step h3{margin:12px 0 8px}
.step p{margin:0;color:var(--sec);font-size:14.5px}

/* ── faq ───────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line)}
.q{border-bottom:1px solid var(--line)}
.q summary{
  list-style:none;cursor:pointer;padding:22px 0;display:flex;gap:20px;align-items:baseline;
  font-family:var(--serif);font-size:20px;
}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:"+";margin-left:auto;color:var(--bronze);font-family:var(--mono);font-size:18px}
.q[open] summary::after{content:"−"}
.q p{margin:0 0 24px;color:var(--sec);max-width:70ch;font-size:15px}

/* ── footer ────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:56px 0 44px;color:var(--sec);font-size:14px}
.fgrid{display:flex;gap:40px;flex-wrap:wrap;align-items:flex-start}
.fgrid .col{display:flex;flex-direction:column;gap:9px}
.fgrid .col b{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut);font-weight:500}
.fbot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:44px;padding-top:22px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:12px;color:var(--mut)}

/* ── reveal on scroll ───────────────────────────────────────── */
.r{opacity:0;transform:translateY(20px);filter:blur(5px);
  transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease)}
.r.in{opacity:1;transform:none;filter:none}

@media (max-width:820px){
  .floor{grid-template-columns:1fr;gap:32px}
  .nav .link{display:none}
  section{padding:68px 0}
}
@media (prefers-reduced-motion:reduce){
  .r{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .track{animation:none}
  /* do not play video, show the poster instead */
  .stage video,.strip video{display:none}
  .stage,.strip{background:center/cover no-repeat}
  .stage{background-image:url('/hero-poster.jpg')}
}

/* ── mobile navigation ─────────────────────────────────────────
   The links used to be hidden below 820px with nothing to open them,
   so a phone could not reach any section at all. */
.burger{display:none;width:38px;height:38px;align-items:center;justify-content:center;
  border:1px solid var(--line-2);background:transparent;border-radius:2px;cursor:pointer;
  margin-left:auto;padding:0}
.burger span{display:block;width:16px;height:1.5px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;
  height:1.5px;background:var(--ink);transition:transform .28s var(--ease),top .28s var(--ease)}
.burger span::before{top:-5px}
.burger span::after{top:5px}
.burger[aria-expanded=true] span{background:transparent}
.burger[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded=true] span::after{top:0;transform:rotate(-45deg)}

.sheet{display:none;position:fixed;inset:64px 0 auto 0;z-index:45;
  background:var(--paper);border-bottom:1px solid var(--line);
  padding:14px 28px 22px;transform:translateY(-8px);opacity:0;
  transition:opacity .26s var(--ease),transform .26s var(--ease)}
.sheet.on{opacity:1;transform:none}
.sheet a{display:block;padding:13px 0;font-size:16px;color:var(--ink);
  border-bottom:1px solid var(--line)}
.sheet a:last-of-type{border-bottom:0}
.sheet .btn{margin-top:16px;width:100%;justify-content:center}

@media (max-width:820px){
  .burger{display:flex}
  .sheet{display:block}
  .nav .wrap .btn,.appbar .wrap .btn{display:none}
  .appbar .wrap a.link,.appbar .wrap .pill,.appbar .wrap select{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sheet{transition:none}
  .burger span::before,.burger span::after{transition:none}
}

/* wallet chooser in the top bar */
.wpick{font:inherit;font-family:var(--mono);font-size:12px;padding:8px 10px;
  border:1px solid var(--line-2);background:var(--card);color:var(--ink);border-radius:999px;
  max-width:190px}
.wpick:focus{outline:none;border-color:var(--bronze)}
/* The chooser used to be hidden below 820px, which left a phone with no way
   to pick a wallet at all. Narrow it instead of removing it. */
@media (max-width:820px){.wpick{max-width:104px;padding:7px 6px;font-size:11px}}

/* connected state: the button doubles as the way out */
.btn[data-connected]{background:transparent;color:var(--ink);border-color:var(--line-2);
  font-family:var(--mono);font-size:12.5px}
.btn[data-connected]:hover{background:var(--paper-2);border-color:var(--bronze);color:var(--link)}
.wpick:disabled{opacity:.5;cursor:not-allowed}

/* Leaving is its own control, not a hover state, so it works on touch too. */
.btn.leave{padding-left:12px;padding-right:12px}

/* A button carries its own display, which quietly beats the browser default
   for [hidden]. Without this the disconnect control sat next to "Connect
   wallet" on a page where nothing was connected. */
[hidden]{display:none!important}