/* Shared shell for every Pheromone page: colour tokens, the soil backdrop, the
   nav, buttons and the footer. Page-specific layout stays inline in each page.

   Copied to out/style.css by tools/generate.js. Nothing hand-written may live in
   out/ — it is rebuilt from these templates. */

:root{
  /* Soil, taken from the X banner so the site and the header match:
     #3B2A1B topsoil, #241910 mid, #120D08 deep. */
  --soil-0:#3B2A1B; --soil-1:#241910; --soil-2:#120D08; --ink:#0A0704;
  --panel:#241910; --panel-2:#2C1F14; --line:#4A3524; --line-2:#63482F;
  --paper:#F0E9DC; --dim:#A6947E; --dimmer:#7A6A58;
  --lime:#D6FD52; --amber:#E8A33D;
  --mono:"Courier New",ui-monospace,SFMono-Regular,Menlo,monospace;
  --nav-h:58px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--paper); font-family:var(--mono);
  background:var(--soil-1);
  /* Fixed, so a long page does not stretch the gradient into bands. */
  background-image:linear-gradient(180deg, var(--soil-0) 0, var(--soil-1) 55%, var(--soil-2) 100%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}
/* Grain, the same idea as the banner's: one turbulence tile so the soil is never
   a flat wash — but rendered at 45px and blown up to 180 with pixelated scaling,
   so the noise comes out in 4px blocks matching the 8-bit stones. Fine-grain
   noise over pixel-art rock reads as two different materials. */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='45'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='45' height='45' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-size:180px 180px;
  image-rendering:pixelated;
  mix-blend-mode:overlay;
}
/* The stones, drawn by tanah.js. */
#tanah{position:fixed; inset:0; z-index:1; pointer-events:none; image-rendering:pixelated}
.page{position:relative; z-index:2}

.wrap{max-width:1080px; margin:0 auto; padding:0 20px}
/* On a big monitor a 1080 column leaves the page looking like a phone layout that
   got lost. Widen it rather than scaling type up, so line lengths stay readable. */
@media (min-width:1440px){
  .wrap, .nav .inner{max-width:1200px}
}

/* ── nav ─────────────────────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:20; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 20px; background:rgba(12,9,6,.86); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(214,253,82,.16);
}
.nav .inner{max-width:1080px; margin:0 auto; width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:16px}
/* padding, not just line-height: the wordmark is 18px of ink and needs a real
   tap target around it on a phone */
.brand{
  font-size:15px; font-weight:700; letter-spacing:.22em; color:var(--lime);
  text-decoration:none; white-space:nowrap; padding:11px 0;
}
.brand span{color:var(--dimmer); letter-spacing:.1em; font-weight:400; font-size:11px}
.links{display:flex; align-items:center; gap:8px}
.links a{
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; text-decoration:none;
  color:var(--dim); padding:9px 13px; border:1px solid transparent; white-space:nowrap;
}
.links a:hover{color:var(--paper); border-color:var(--line-2)}
.links a.on{color:var(--lime); border-color:rgba(214,253,82,.4)}
.links a:focus-visible{outline:2px solid var(--paper); outline-offset:2px}

/* Claim $PHERO: the real button is rendered, then stamped over. The label stays
   underneath on purpose — people should see what is coming, not a blank slot. */
.claim{position:relative; display:inline-block; isolation:isolate}
.claim .lbl{
  display:inline-block; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  padding:13px 18px; border:1px solid var(--line-2); color:var(--dimmer);
  background:rgba(44,31,20,.5); filter:saturate(.4);
}
/* The stamp has to sit *inside* the button and be visibly smaller than the label,
   or the two lines of type collide and it reads as a rendering fault rather than
   as something stamped over. The label stays a ghost behind it. */
/* flex, not grid: the <i> wrapper makes "Coming" and "soon" two separate children,
   and a grid puts every child on its own row — the stamp broke onto two lines. */
.claim .stamp{
  position:absolute; inset:4px;
  display:flex; align-items:center; justify-content:center; gap:.3em;
  transform:rotate(-3.5deg); pointer-events:none;
  font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--lime);
  background:rgba(10,7,4,.55); border:1px dashed rgba(214,253,82,.6);
}
.claim i{font-style:normal}   /* the parts that get dropped on a phone */
.claim[aria-disabled="true"]{cursor:not-allowed}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn{
  font:inherit; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; padding:14px 24px; border:2px solid var(--lime);
  background:var(--lime); color:#1B1F08; font-weight:700; display:inline-block;
  cursor:pointer;
}
.btn:hover{background:#E4FF7A; border-color:#E4FF7A}
.btn.ghost{background:transparent; color:var(--paper); border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--lime); color:var(--lime)}
.btn:focus-visible{outline:3px solid var(--paper); outline-offset:3px}
.btn[disabled], .btn.off{
  background:transparent; color:var(--dimmer); border-color:var(--line);
  cursor:not-allowed; filter:saturate(.3);
}
.btn[disabled]:hover, .btn.off:hover{background:transparent; border-color:var(--line)}

/* ── chambers: the excavated boxes the content sits in ───────────────────── */
section{padding:38px 0}
.chamber{
  position:relative; background:var(--panel); border:2px solid var(--line);
  border-radius:38px 14px 44px 18px; padding:30px 28px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.05), inset 0 -18px 34px rgba(0,0,0,.4),
    0 10px 30px rgba(0,0,0,.42);
}
.chamber + .chamber{margin-top:20px}
h2{font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--lime); margin:0 0 6px}
.h2sub{font-size:22px; letter-spacing:-.02em; margin:0 0 16px; line-height:1.25}
.body{font-size:13.5px; line-height:1.8; color:var(--dim); max-width:66ch; margin:0}
.body + .body{margin-top:12px}
.body b{color:var(--paper); font-weight:400}
.body code{color:var(--lime); font-size:12.5px}

footer{
  padding:40px 0 60px; color:var(--dimmer); font-size:11.5px; line-height:1.9;
  border-top:1px solid rgba(255,255,255,.07); margin-top:30px;
}
footer a{color:var(--lime)}

/* Phones: keep the nav to one row. Stacking brand over links made the sticky bar
   ~100px tall, which is a tenth of the viewport following you down every page.
   The claim button loses its longer words to fit — see the <i> wrappers in the
   markup, which are the only thing hidden. */
@media (max-width:640px){
  .nav{height:50px; padding:0 12px}
  .nav .inner{gap:6px}
  .brand{font-size:12px; letter-spacing:.13em; padding:12px 0}
  .links{gap:1px}
  /* 13px of padding on 10px type gives a ~38px target inside a 50px bar */
  .links a{font-size:10px; letter-spacing:.09em; padding:13px 7px}
  .claim i, .links a i{display:none}
  .claim .lbl{font-size:10px; letter-spacing:.09em; padding:11px 10px}
  .claim .stamp{font-size:7.5px; letter-spacing:.1em; inset:3px}
  .chamber{border-radius:26px 10px 30px 12px; padding:24px 18px}
}
/* Narrower still: drop the nav's own words to their shortest form. */
@media (max-width:380px){
  .brand{font-size:11px; letter-spacing:.1em}
  .links a{padding:13px 5px}
  .claim .lbl{padding:11px 8px}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }