/* ═══════════════════════════════════════════════════════════════════════════
   The page is built as an anatomical specimen sheet: disciplined, clinical
   typography and hairline rules wrapped around the dumbest possible subject.
   The drawing is the only rough thing here — that contrast is the whole idea.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── shared section furniture ─────────────────────────────────────────────── */
.section { padding-block: clamp(3.5rem, 9vw, 7.5rem); position: relative; }
.section + .section { border-top: var(--rule-thin) solid rgb(20 16 16 / .18); }

.eyebrow {
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 var(--gap-2);
  display: flex; align-items: center; gap: .7em;
}
.eyebrow::after {
  content: ''; flex: 1; height: var(--rule-thin);
  background: repeating-linear-gradient(90deg, rgb(20 16 16 / .3) 0 6px, transparent 6px 12px);
}

.h-sec {
  font-size: clamp(2.1rem, 6.5vw, 4.4rem);
  margin-bottom: var(--gap-3);
}

/* Specimen-plate figure numbers, set in mono in the margin. */
.plate-no {
  font-family: var(--font-ui);
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--ink-faint);
}

/* ── header ───────────────────────────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: var(--gap-2);
  padding: .55rem var(--pad-x);
  /* Deliberately opaque rather than a blurred translucent bar: the page
     ground is flat paper, so the blur bought nothing visually while forcing
     a compositing layer that costs scroll performance on mobile. */
  background: var(--paper-warm);
  border-bottom: var(--rule-thin) solid rgb(20 16 16 / .22);
}
.site-head__mark {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-display);
  font-size: 1.35rem; letter-spacing: -.01em;
  text-decoration: none;
}
.site-head__mark img { width: 30px; height: 30px; }
.site-head nav { margin-left: auto; display: flex; align-items: center; gap: clamp(.5rem, 1.6vw, 1.4rem); }
.site-head nav a {
  font-family: var(--font-ui); font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  color: var(--ink-soft);
}
.site-head nav a:hover { color: var(--cavity-mid); }
@media (max-width: 720px) { .site-head nav a.is-optional { display: none; } }

/* ── hero ─────────────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(2rem, 6vw, 4.5rem) clamp(3rem, 8vw, 6rem); overflow: clip; }
.hero__grid {
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1fr 1.12fr; } }

.hero__title {
  font-size: clamp(3.4rem, 15vw, 9.5rem);
  line-height: .82;
  letter-spacing: -.035em;
  text-transform: uppercase;
}
/* The stroke sits behind the fill so the counters stay open at display size.
   Without paint-order the stroke eats the letterform from the inside. */
.hero__title span {
  display: block;
  color: var(--paper);
  -webkit-text-stroke: clamp(3px, .9vw, 8px) var(--ink);
  paint-order: stroke fill;
  text-shadow: clamp(3px, .8vw, 7px) clamp(4px, .9vw, 8px) 0 var(--cavity-mid);
}
.hero__title span:nth-child(2) { margin-left: clamp(.4rem, 3vw, 2.6rem); }

/* Firefox doesn't honour paint-order on HTML text, so the stroke is centred
   on the outline and eats the counters from the inside. Where it's missing,
   halve the stroke and lean on the offset shadow to carry the weight. */
@supports not (paint-order: stroke) {
  .hero__title span { -webkit-text-stroke-width: clamp(1.5px, .4vw, 4px); }
}

.hero__lede {
  font-size: clamp(1.05rem, .6vw + .95rem, 1.32rem);
  max-width: 46ch;
  margin: var(--gap-3) 0 var(--gap-3);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; }

.hero__art { justify-self: center; margin: 0; width: 100%; }
/* The plate is the positioning box for the layered drawing AND the callouts;
   its width is the drawing's width. The layers inside size off it. */
.hero__plate { position: relative; width: min(100%, 430px); margin-inline: auto; }

/* The call-outs sit outside the image box, so the figure has to reserve room
   for them or they run off the viewport. Only at widths where that room
   actually exists do they get shown at all. */
@media (min-width: 1080px) {
  .hero__art { padding-inline: 112px; }
  .hero__plate { width: min(100%, 400px); }
}

/* Anatomical call-outs pinned to the drawing. Hidden below 1080px — at
   narrower widths the leader lines cross the face and read as damage. */
.callout {
  position: absolute; display: none;
  font-family: var(--font-ui); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft);
  white-space: nowrap;
}
@media (min-width: 1080px) { .callout { display: block; } }
.callout::before {
  content: ''; position: absolute; top: 50%;
  width: var(--lead, 54px); height: var(--rule-thin); background: var(--ink);
}
.callout--l { right: calc(100% + 10px); text-align: right; }
.callout--l::before { left: 100%; margin-left: 6px; }
.callout--r { left: calc(100% + 10px); }
.callout--r::before { right: 100%; margin-right: 6px; }
.callout b { display: block; font-weight: 700; color: var(--ink); }
.callout i { font-style: normal; color: var(--ink-faint); }

/* ── contract cards ───────────────────────────────────────────────────────── */
.ca { display: grid; gap: .8rem; }
@media (min-width: 860px) { .ca { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* min-width:0 at every level of this chain — grid and flex items both default
   to min-width:auto, and a 44-character mint address will happily push the
   copy button off the side of a phone through all of them. */
.ca__card {
  padding: 1rem 1.15rem; display: flex; flex-direction: column; gap: .45rem;
  min-width: 0;
}
.ca__label {
  font-family: var(--font-ui); font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint);
  display: flex; align-items: center; gap: .5em;
}
.ca__row { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.ca__addr {
  font-family: var(--font-ui); font-size: clamp(.7rem, 1.6vw, .86rem);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  /* flex items default to min-width:auto, so a 44-character address refuses
     to shrink and shoves the copy button off the side of a phone. */
  flex: 1 1 0; min-width: 0;
  color: var(--ink);
}
.ca__copy {
  flex: none; padding: .42em .8em; font-size: .72rem;
  border-radius: 8px 5px 9px 6px / 5px 9px 6px 8px;
}
.ca__copy.is-done { --btn-bg: var(--drool); --btn-fg: var(--ink); }

/* ── marquee ──────────────────────────────────────────────────────────────── */
.marquee {
  overflow: hidden; border-block: var(--rule) solid var(--ink);
  background: var(--ink); color: var(--paper);
  padding-block: .55rem;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__track > span {
  font-family: var(--font-display); font-size: clamp(1.3rem, 3.4vw, 2.2rem);
  text-transform: uppercase; letter-spacing: .01em;
  padding-inline: 1.1rem; white-space: nowrap;
}
.marquee__track > span::after { content: '\2022'; margin-left: 1.1rem; color: var(--cavity-rim); }
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: mq 34s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
  .marquee--rev .marquee__track { animation-direction: reverse; animation-duration: 44s; }
}
@keyframes mq { to { transform: translateX(-50%); } }
.marquee--pink { background: var(--brain); color: var(--ink); }
.marquee--pink .marquee__track > span::after { color: var(--cavity-mid); }

/* ── specimen panel ───────────────────────────────────────────────────────── */
.spec { display: grid; gap: clamp(1.4rem, 4vw, 3rem); align-items: start; }
@media (min-width: 880px) { .spec { grid-template-columns: 1fr 1.1fr; } }
.spec__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.spec__list li {
  display: grid; grid-template-columns: auto 1fr; gap: .9rem;
  padding: .95rem 0;
  border-bottom: var(--rule-thin) dashed rgb(20 16 16 / .3);
}
.spec__list li:first-child { border-top: var(--rule-thin) dashed rgb(20 16 16 / .3); }
.spec__k {
  font-family: var(--font-ui); font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; color: var(--cavity-mid); padding-top: .28em;
  min-width: 3.4ch;
}
.spec__v b { display: block; font-family: var(--font-display); font-size: 1.32rem; letter-spacing: -.01em; }
.spec__v span { color: var(--ink-soft); font-size: .95rem; }
.spec__art { position: relative; }
.spec__art img { width: min(100%, 460px); margin-inline: auto; }

/* ── meme gallery ─────────────────────────────────────────────────────────── */
.memes { columns: 1; column-gap: 1rem; }
@media (min-width: 640px) { .memes { columns: 2; } }
@media (min-width: 1000px) { .memes { columns: 3; } }
.meme {
  break-inside: avoid; margin-bottom: 1rem; padding: .55rem .55rem .5rem;
  position: relative;
  transition: rotate var(--t-mid) var(--ease);
}
.meme img { border-radius: 6px; background: var(--paper); }
.meme figcaption {
  font-family: var(--font-ui); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
  display: flex; justify-content: space-between; align-items: center;
  gap: .6rem; padding: .5rem .2rem .05rem;
}
.meme a {
  color: var(--cavity-mid); text-decoration: none; font-weight: 700;
  border-bottom: var(--rule-thin) solid currentColor;
}
/* Small, repeating rotations so the grid reads as pinned-up paper rather
   than a CSS grid. Never more than 1 degree — past that it reads as broken. */
.meme:nth-child(3n+1) { rotate: -.9deg; }
.meme:nth-child(3n+2) { rotate: .7deg; }
.meme:nth-child(3n+3) { rotate: -.35deg; }
.meme:hover { rotate: 0deg; z-index: 3; }

/* ── steps ────────────────────────────────────────────────────────────────── */
.steps { display: grid; gap: 1rem; counter-reset: step; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { padding: 1.3rem 1.15rem; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-ui); font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; color: var(--cavity-mid);
}
.step h3 { font-size: 1.4rem; margin: .35rem 0 .4rem; }
.step p { margin: 0; font-size: .95rem; color: var(--ink-soft); }

/* ── the pairing note (deliberately quiet) ────────────────────────────────── */
.pairing { background: var(--paper); }
.pairing__box { padding: clamp(1.3rem, 3.5vw, 2.4rem); }
.pairing__box p { margin: 0 0 .9rem; }
.pairing__box p:last-child { margin-bottom: 0; }
.pairing__box .small {
  font-size: .86rem; color: var(--ink-soft);
  padding-top: .9rem; border-top: var(--rule-thin) dashed rgb(20 16 16 / .3);
}

/* ── faq ──────────────────────────────────────────────────────────────────── */
.faq { display: grid; gap: .55rem; }
.faq details {
  border: var(--rule-thin) solid rgb(20 16 16 / .35);
  border-radius: 10px 6px 11px 7px / 6px 11px 7px 10px;
  background: var(--paper);
  padding: .85rem 1.1rem;
}
.faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: 1.18rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.4rem; color: var(--cavity-mid); line-height: 1; }
.faq details[open] summary::after { content: '\2013'; }
.faq p { margin: .7rem 0 .15rem; color: var(--ink-soft); font-size: .96rem; }

/* ── footer ───────────────────────────────────────────────────────────────── */
.site-foot {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) 2.5rem;
  background: var(--paper);
  border-top: var(--rule) solid var(--ink);
}
.site-foot__top { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; justify-content: space-between; }
.site-foot__links { display: flex; flex-wrap: wrap; gap: 1rem; }
.site-foot__links a {
  font-family: var(--font-ui); font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  border-bottom: var(--rule-thin) solid currentColor; padding-bottom: 2px;
}
.disclaimer {
  margin-top: var(--gap-4); padding-top: var(--gap-3);
  border-top: var(--rule-thin) solid rgb(20 16 16 / .25);
  font-size: .8rem; line-height: 1.6; color: var(--ink-soft);
  display: grid; gap: .8rem;
}
.disclaimer strong { color: var(--ink); }

/* ── grain overlay ────────────────────────────────────────────────────────── */
.grain::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}