/* SINNEAGE — palette sampled from the logo: bone on black, oxblood #8D3B3B */
:root {
  --void:    #08080a;
  --pitch:   #0d0d10;
  --coal:    #141418;
  --ash:     #1e1e24;
  --smoke:   #2a2a32;
  --bone:    #e8e4dd;
  --grey:    #8b8882;
  --dim:     #5d5b57;
  --blood:   #8d3b3b;
  --blood-hi:#a94747;
  --wrap: 1240px;
  --ease: cubic-bezier(.22,1,.36,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font-family: "Inter", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* grain — the whole grit of the thing, one fixed layer, no animation loop */
body::before {
  content: ""; position: fixed; inset: -50%; z-index: 9999; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* one slow scanline drift, barely there */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: .5;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 3px, rgba(0,0,0,.11) 3px 4px);
}


.wrap { width: min(var(--wrap), calc(100% - 3rem)); margin-inline: auto; }

h1, h2, h3, .display {
  font-family: "Anton", "Haettenschweiler", "Arial Narrow", Impact, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: .01em;
  margin: 0;
}
.mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .68rem;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.eyebrow { color: var(--blood-hi); margin: 0 0 1.4rem; }
.rule { height: 1px; background: var(--ash); border: 0; margin: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .8rem;
  padding: 1rem 2rem;
  font-family: "JetBrains Mono", monospace;
  font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  border: 1px solid var(--bone); background: transparent; color: var(--bone);
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn:hover { background: var(--bone); color: var(--void); }
.btn--blood { background: var(--blood); border-color: var(--blood); }
.btn--blood:hover { background: var(--blood-hi); border-color: var(--blood-hi); color: var(--bone); }
.btn--ghost { border-color: var(--smoke); color: var(--grey); }
.btn--ghost:hover { border-color: var(--bone); background: transparent; color: var(--bone); }

/* ---------- header ---------- */
header.site {
  position: sticky; top: 0; z-index: 100;
  background: rgba(8,8,10,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ash);
}
.nav { display: flex; align-items: center; gap: 2.5rem; padding: .9rem 0; }
.nav .lockup { margin-right: auto; }
.nav .lockup img { height: 34px; width: auto; }
.nav nav { display: flex; gap: 2rem; }
.nav nav a {
  font-family: "JetBrains Mono", monospace;
  font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--grey);
  position: relative; padding: .3rem 0;
}
.nav nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
  background: var(--blood-hi); transition: width .3s var(--ease);
}
.nav nav a:hover { color: var(--bone); }
.nav nav a:hover::after { width: 100%; }
.cart {
  font-family: "JetBrains Mono", monospace; font-size: .66rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--bone); border: 1px solid var(--ash);
  padding: .55rem 1rem; transition: border-color .3s var(--ease);
}
.cart:hover { border-color: var(--blood); }
.cart b { color: var(--blood-hi); font-weight: 400; }

/* ---------- hero ---------- */
/* .hero-scroll is a runway with no content of its own — its only job is to give
   the pinned stage something to scroll through, so the flip plays out in front
   of you. Shorten it and the animation gets twitchy; lengthen it and it drags. */
.hero-scroll { position: relative; height: 260vh; }
.hero-stage {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
.hero-mark {
  width: min(100%, 1180px); margin-inline: auto; padding-inline: 1.5rem;
  position: relative; z-index: 2;
}
.hero-mark img { width: 100%; }
.hero-copy { position: relative; z-index: 2; opacity: var(--copy-o, 1); }

/* The wordmark is split in two: the letters, and the cross that stands in for
   the "I". Both are the same canvas, so they stack with no alignment maths.
   The origin is the cross's own bounding-box centre, measured off the source
   PNG — a 180deg turn about it maps the shape exactly onto itself, so nothing
   shifts as it flips. */
.mark-stack { position: relative; }

/* The letters take a chromatic split at the moment the cross goes over — two
   drop-shadows pulling apart, driven by the strobe, worth nothing at rest.
   They clear out as the cross opens up. */
.mark-letters {
  filter:
    drop-shadow(calc(3px * var(--cross-strobe, 0)) 0 0 rgba(169, 71, 71, .7))
    drop-shadow(calc(-4px * var(--cross-strobe, 0)) 0 0 rgba(120, 170, 190, .45));
  transform: translateX(calc(1.5px * var(--cross-strobe, 0)));
  opacity: calc(1 - var(--cross-open, 0));
}

.mark-cross {
  position: absolute; inset: 0;
  transform-origin: 17.0762% 50.4662%;
  /* Rotation and the settled growth ride the eased flip; the kick rides the
     flash peak so it overshoots mid-turn; the last term is the expansion that
     swallows the screen and hands you the rest of the site. */
  /* The cross sits at 17% across the canvas, so left to itself the expansion
     swallows the screen lopsided. This walks its centre to the middle as it
     opens — 32.92% of the canvas is exactly the gap between the two. */
  transform:
    translateX(calc(32.92% * var(--cross-open, 0)))
    rotate(calc(180deg * (1 - var(--cross-p, 0))))
    scale(calc(1 + .2 * var(--cross-p, 0) + .12 * var(--cross-flash, 0) + 42 * var(--cross-open, 0)));
  filter:
    drop-shadow(0 0 calc(40px * var(--cross-p, 0)) rgba(141, 59, 59, .5))
    drop-shadow(0 0 calc(55px * var(--cross-strobe, 0)) rgba(200, 90, 90, .6))
    brightness(calc(1 + .35 * var(--cross-strobe, 0)));
  will-change: transform, filter;
}

.hero-sub {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-top: 2.2rem; color: var(--grey);
}
.hero-sub p { margin: 0; max-width: 44ch; font-size: .98rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.6rem; }

.hero-glow {
  position: absolute; z-index: 0; left: 50%; top: 8%; translate: -50% 0;
  width: min(120vw, 1100px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(141,59,59,.22) 0%, rgba(141,59,59,.05) 45%, transparent 68%);
  opacity: calc(.55 + .45 * var(--cross-p, 0));
}

/* Full-bleed oxblood bloom behind the mark, only alive during the turn. */
.hero-flash {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: calc(.34 * var(--cross-strobe, 0));
  background:
    radial-gradient(52% 48% at 17% 46%, rgba(200, 90, 90, .34), transparent 72%),
    linear-gradient(180deg, transparent 0%, rgba(141, 59, 59, .1) 45%, transparent 100%);
}

.scroll-cue {
  position: absolute; left: 50%; bottom: 2.2rem; translate: -50% 0; z-index: 3;
  color: var(--dim); opacity: var(--copy-o, 1);
}
.scroll-cue::after {
  content: ""; display: block; width: 1px; height: 26px; margin: .8rem auto 0;
  background: linear-gradient(var(--blood), transparent);
}

/* Guarantees full cover at any viewport width — the scaled cross alone would
   leave the corners of an ultrawide screen — and gives the seam into the red
   band below an exact colour match. Only appears once the cross has all but
   filled the screen anyway. */
.stage-fill {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: var(--blood);
  opacity: clamp(0, calc((var(--cross-open, 0) - .78) * 5), 1);
}

/* What lands on the red once it has swallowed the screen. */
.stage-said {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; justify-content: center;
  width: min(var(--wrap), calc(100% - 3rem)); margin-inline: auto;
  opacity: clamp(0, calc((var(--cross-open, 0) - .66) * 5), 1);
  transform: translateY(calc(18px * (1 - clamp(0, calc((var(--cross-open, 0) - .66) * 5), 1))));
}
.stage-said h2 { font-size: clamp(2.6rem, 8vw, 6rem); color: var(--bone); margin: .6rem 0 0; }
.stage-said .lede { color: rgba(232, 228, 221, .78); max-width: 46ch; margin-top: 1.4rem; }

/* No pin, no expansion — the mark simply sits in its finished state. */
body.no-pin .hero-scroll { height: auto; }
body.no-pin .hero-stage { position: static; height: auto; padding: 4rem 0; opacity: 1; }
body.no-pin .mark-cross { transform: none; filter: none; }
body.no-pin .mark-letters { filter: none; transform: none; opacity: 1; }
body.no-pin .hero-flash, body.no-pin .scroll-cue, body.no-pin .stage-fill { display: none; }
body.no-pin .stage-said { position: static; opacity: 1; transform: none; padding: 3rem 0 0; }
body.no-pin .revert-scroll { height: auto; }
body.no-pin .revert-stage { position: static; height: auto; padding: 4rem 0; }
body.no-pin .revert-cross { position: static; transform: none; width: 90px; margin: 0 auto 2rem; }
body.no-pin .revert-said { opacity: 1; transform: none; }
body.no-pin .revert-flash { display: none; }

/* ---------- marquee ---------- */
.marquee {
  margin-top: clamp(3rem, 7vh, 5rem);
  border-block: 1px solid var(--ash);
  background: var(--pitch);
  overflow: hidden; white-space: nowrap; padding: .95rem 0;
}
.marquee div { display: inline-flex; gap: 3rem; animation: crawl 34s linear infinite; padding-right: 3rem; }
.marquee span { color: var(--grey); }
.marquee i { font-style: normal; color: var(--blood); }
@keyframes crawl { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .marquee div { animation: none; } }

/* ---------- sections ---------- */
section { padding: clamp(4.5rem, 11vh, 8rem) 0; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-bottom: 3.2rem; }
.sec-head h2 { font-size: clamp(2.4rem, 6.5vw, 5rem); }
.sec-head p { color: var(--grey); margin: .8rem 0 0; max-width: 46ch; font-size: .96rem; }
.count { color: var(--dim); }

/* ---------- product grid ---------- */
.drops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ash); border: 1px solid var(--ash); }
.item { background: var(--void); padding: 0; position: relative; display: flex; flex-direction: column; transition: background .35s var(--ease); }
.item:hover { background: var(--pitch); }
.tee { overflow: clip; }
.tag {
  position: absolute; top: 1rem; left: 1rem; z-index: 3;
  font-family: "JetBrains Mono", monospace; font-size: .58rem; letter-spacing: .2em;
  text-transform: uppercase; padding: .32rem .6rem;
  background: var(--blood); color: var(--bone);
}
.tag--out { background: var(--ash); color: var(--dim); }

/* the tee is drawn, not photographed — no product shots exist yet */
.tee { aspect-ratio: 4/5; display: grid; place-items: center; background:
  radial-gradient(circle at 50% 38%, rgba(255,255,255,.045), transparent 62%), var(--pitch); }
.tee svg { width: 82%; height: auto; overflow: visible; transition: transform .5s var(--ease); }
.item:hover .tee svg { transform: scale(1.045); }
.tee .body { fill: var(--coal); stroke: var(--smoke); stroke-width: 1.4; }
.item:hover .tee .body { fill: #17171c; }
.tee .fold { stroke: rgba(255,255,255,.055); stroke-width: 1.2; fill: none; }
.tee .print { transition: opacity .35s var(--ease); }
.tee--bone .body { fill: #cfcbc4; stroke: #a9a59e; }
.item:hover .tee--bone .body { fill: #d8d4cd; }
.tee--blood .body { fill: #4a2020; stroke: #6b3030; }
.item:hover .tee--blood .body { fill: #532424; }

.item-info { padding: 1.4rem 1.5rem 1.7rem; display: flex; flex-direction: column; gap: .45rem; border-top: 1px solid var(--ash); }
.item-info h3 { font-size: 1.35rem; }
.item-info .meta { color: var(--dim); }
.item-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: .5rem; }
.price { font-family: "JetBrains Mono", monospace; font-size: .95rem; color: var(--bone); }
.price s { color: var(--dim); margin-right: .5rem; }
.sizes { display: flex; gap: .4rem; }
.sizes span {
  font-family: "JetBrains Mono", monospace; font-size: .6rem; color: var(--dim);
  border: 1px solid var(--ash); padding: .2rem .42rem;
}
.sizes span.on { color: var(--bone); border-color: var(--grey); }
.add {
  margin-top: 1rem; width: 100%; justify-content: center;
  padding: .85rem 1rem; border-color: var(--ash); color: var(--grey);
}
.item:hover .add { border-color: var(--bone); color: var(--bone); }
.add[disabled] { opacity: .35; cursor: not-allowed; }
.item:hover .add[disabled] { border-color: var(--ash); color: var(--grey); }

/* ---------- monster feature ---------- */
.feature { background: var(--pitch); border-block: 1px solid var(--ash); }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.feature-art { position: relative; }
.feature-art img { width: 100%; filter: saturate(.72) contrast(1.08); transition: transform .8s var(--ease), filter .8s var(--ease); }
.feature-art:hover img { transform: scale(1.03); filter: saturate(.92) contrast(1.12); }
.feature-art::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 45%, transparent 40%, rgba(8,8,10,.55) 100%);
  pointer-events: none;
}
.feature h2 { font-size: clamp(2.2rem, 5vw, 4rem); }
.feature p { color: var(--grey); }
.spec { list-style: none; padding: 0; margin: 2rem 0; display: grid; gap: 0; border-top: 1px solid var(--ash); }
.spec li { display: flex; justify-content: space-between; gap: 1.5rem; padding: .85rem 0; border-bottom: 1px solid var(--ash); font-size: .9rem; }
.spec b { color: var(--dim); font-weight: 400; font-family: "JetBrains Mono", monospace; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; }

/* ---------- ethos ---------- */
.creed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ash); border: 1px solid var(--ash); }
.creed article { background: var(--void); padding: 2.4rem 2rem 2.6rem; }
.creed .num { font-family: "Anton", Impact, sans-serif; font-size: 2.6rem; color: var(--blood); line-height: 1; }
.creed h3 { font-size: 1.25rem; margin: 1rem 0 .7rem; }
.creed p { color: var(--grey); margin: 0; font-size: .93rem; }

/* ---------- signup ---------- */
.congregation { text-align: center; }
.congregation h2 { font-size: clamp(2.4rem, 7vw, 5.5rem); }
.congregation p { color: var(--grey); max-width: 48ch; margin: 1.2rem auto 2.4rem; }
.signup { display: flex; gap: 0; max-width: 520px; margin-inline: auto; }
.signup input {
  flex: 1; min-width: 0; background: var(--coal); border: 1px solid var(--ash); border-right: 0;
  color: var(--bone); padding: 1rem 1.2rem; font: inherit; font-size: .9rem;
}
.signup input::placeholder { color: var(--dim); }
.signup input:focus { outline: none; border-color: var(--blood); }
.signup .btn { flex: none; }
.signup-note { color: var(--dim); font-size: .78rem; margin-top: 1.2rem; }

/* ---------- footer ---------- */
footer.site { border-top: 1px solid var(--ash); padding: 4rem 0 2rem; background: var(--pitch); }
.foot { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; }
.foot img { height: 30px; width: auto; }
.foot p { color: var(--dim); font-size: .88rem; margin: 1.2rem 0 0; max-width: 32ch; }
.foot h4 { color: var(--grey); margin: 0 0 1.1rem; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.foot li a { color: var(--grey); font-size: .9rem; }
.foot li a:hover { color: var(--blood-hi); }
.foot-bottom {
  margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--ash);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--dim);
}

/* ---------- act II — the red band ---------- */
/* Must be exactly the oxblood of the cross art, or the seam out of the pinned
   stage shows as a colour step. Type is near-black ink, not bone: bone over
   oxblood goes muddy at any opacity below full, and the earlier translucent
   panels read as cards floating on a colour rather than a printed page. */
.red-band {
  --ink: #170a0a;
  background: var(--blood);
  color: var(--ink);
  padding: clamp(3.5rem, 8vh, 5.5rem) 0;
}
.red-band--ledger { padding-top: 0; }
.red-eyebrow { color: rgba(23, 10, 10, .62); margin: 0 0 1.2rem; }
.red-title { color: var(--ink); font-size: clamp(2.3rem, 6vw, 4.4rem); }
.red-lede { color: rgba(23, 10, 10, .8); max-width: 52ch; margin: 1.4rem 0 0; font-size: 1rem; }

/* The creed as a manifesto list — full-width rows split by hairlines, with the
   numeral carrying the weight instead of a box. */
.rules { list-style: none; padding: 0; margin: 3rem 0 0; border-top: 1px solid rgba(23, 10, 10, .3); }
.rules li {
  display: grid; grid-template-columns: clamp(70px, 9vw, 120px) 1fr;
  gap: clamp(1.2rem, 4vw, 3rem); align-items: start;
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  border-bottom: 1px solid rgba(23, 10, 10, .3);
  transition: padding-left .4s var(--ease);
}
.rules li:hover { padding-left: .6rem; }
.rule-n {
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: .85;
  color: rgba(23, 10, 10, .42);
  transition: color .4s var(--ease);
}
.rules li:hover .rule-n { color: var(--ink); }
.rule-body h3 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); color: var(--ink); }
.rule-body p { color: rgba(23, 10, 10, .78); margin: .7rem 0 0; max-width: 62ch; }

/* The chapter, as figures rather than a thin row list. */
.ledger-head {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 5vw, 4rem); align-items: end;
}
.facts {
  margin: clamp(2.4rem, 5vw, 3.4rem) 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: rgba(23, 10, 10, .28);
  border: 1px solid rgba(23, 10, 10, .28);
}
.facts > div {
  background: var(--blood); padding: clamp(1.3rem, 2.4vw, 1.9rem);
  transition: background .35s var(--ease);
}
.facts > div:hover { background: #964040; }
.facts dt {
  font-family: "JetBrains Mono", monospace; font-size: .62rem;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(23, 10, 10, .62);
}
.facts dd { margin: 0; }
.facts .big {
  font-family: "Anton", Impact, sans-serif; text-transform: uppercase;
  font-size: clamp(2.2rem, 4.4vw, 3.2rem); line-height: 1; color: var(--ink);
  margin: .5rem 0 .4rem;
}
.facts .big em { font-style: normal; font-size: .38em; margin-left: .12em; }
.facts .note { color: rgba(23, 10, 10, .72); font-size: .86rem; line-height: 1.5; }

/* ---------- act III — unwinding it ---------- */
.revert-scroll { position: relative; height: 210vh; background: var(--void); }
.revert-stage {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden; background: var(--void);
}
/* Sized in vw so the scaled-up cross covers the screen at any width. It starts
   filled — matching the band above — and unwinds down to the mark. */
.revert-cross {
  position: absolute; left: 50%; top: 34%; width: 14vw; height: auto;
  transform-origin: 50% 50%;
  /* Pure scale, no rotation. A shape this size cannot turn without reading as
     a windmill blade sweeping the viewport — it was built with a spin twice and
     was wrong both times. It pulls back to the mark and the glow does the rest. */
  transform:
    translate(-50%, -50%)
    scale(calc(1 + 30 * (1 - var(--rev-shrink, 0))));
  filter:
    drop-shadow(0 0 calc(18px + 90px * var(--rev-glow, 0)) rgba(200, 90, 90, calc(.15 + .6 * var(--rev-glow, 0))))
    brightness(calc(1 + .45 * var(--rev-glow, 0)));
  will-change: transform, filter;
}
.revert-flash {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: calc(.34 * var(--rev-glow, 0));
  background: radial-gradient(46% 42% at 50% 34%, rgba(200, 90, 90, .38), transparent 72%);
}
/* One ring breaking outward off the settled mark — the beat that closes the
   red before the page carries on. Expands and thins as it goes. */
.revert-ring {
  position: absolute; left: 50%; top: 34%; z-index: 1; pointer-events: none;
  width: 26vw; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid rgba(200, 90, 90, .55);
  transform: translate(-50%, -50%) scale(calc(.15 + 2.6 * var(--rev-ring, 0)));
  opacity: calc(var(--rev-ring, 0) * (1 - var(--rev-ring, 0)) * 3.2);
}
/* Sits below the settled cross rather than over it — centred copy on a centred
   mark reads as a collision, not a composition. */
.revert-said {
  position: absolute; left: 0; right: 0; top: 58%; z-index: 2; text-align: center;
  opacity: var(--rev-copy, 0);
  transform: translateY(calc(18px * (1 - var(--rev-copy, 0))));
}
.revert-said h2 { font-size: clamp(2.4rem, 6.5vw, 4.6rem); margin-top: .5rem; }
.revert-said .lede { color: var(--grey); max-width: 44ch; margin: 1.2rem auto 0; }

/* ---------- the closing cross ---------- */
.coda { text-align: center; padding: 5rem 0 1rem; }
.coda img { width: 34px; margin: 0 auto 1.4rem; opacity: .55; }
.coda p { color: var(--dim); margin: 0; }

/* reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* responsive */
@media (max-width: 1000px) {
  .drops, .creed { grid-template-columns: 1fr 1fr; }
  .ledger-head { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .revert-cross { width: 26vw; }
  .feature-grid { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr 1fr; }
  .nav nav { display: none; }
}
@media (max-width: 620px) {
  .drops, .creed, .facts, .foot { grid-template-columns: 1fr; }
  .rules li { grid-template-columns: 1fr; gap: .6rem; }
  .hero-scroll { height: 260vh; }
  .revert-scroll { height: 220vh; }
  .wrap { width: calc(100% - 2.2rem); }
  .hero-sub { display: block; }
  .signup { flex-direction: column; }
  .signup input { border-right: 1px solid var(--ash); }
}


/* ---------- arrival fade ----------
   Handed over on shydore.dev's void, so the page comes up out of the same
   colour the expanding card faded into. CSS only — it must not need JS. */
.page-in{position:fixed;inset:0;z-index:9500;background:#0a0b08;pointer-events:none;
  opacity:0;animation:page-in .62s ease;}   /* base state is invisible: if animations never run, the page is still readable */
@keyframes page-in{from{opacity:1;}to{opacity:0;visibility:hidden;}}

/* ---------- the page turn back ----------
   A folded corner, always there, bottom-right. Lifts and names itself on hover
   or focus; otherwise it stays out of the way. */
.back-shy{position:fixed;right:0;bottom:0;z-index:9000;width:74px;height:74px;
  display:block;text-decoration:none;-webkit-tap-highlight-color:transparent;
  transition:width .34s cubic-bezier(.42,.02,.18,1),height .34s cubic-bezier(.42,.02,.18,1);}
.back-shy-fold{position:absolute;inset:0;
  clip-path:polygon(100% 0,100% 100%,0 100%);
  background:linear-gradient(315deg,#b9b3aa 0%,#e8e4dd 46%);
  filter:drop-shadow(-5px -5px 9px rgba(0,0,0,.65));
  transition:background .34s ease;}
.back-shy-arr{position:absolute;right:19px;bottom:12px;font-size:15px;line-height:1;
  color:#08080a;transition:transform .34s cubic-bezier(.42,.02,.18,1),color .34s ease;}
.back-shy-txt{position:absolute;right:18px;bottom:15px;white-space:nowrap;
  font-family:'Inter',system-ui,sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#08080a;opacity:0;transform:translateX(8px);
  transition:opacity .3s ease,transform .34s cubic-bezier(.42,.02,.18,1);}
.back-shy-txt b{font-weight:inherit;color:#8D3B3B;}
.back-shy:hover,.back-shy:focus-visible{width:172px;height:172px;outline:0;}
.back-shy:hover .back-shy-arr,.back-shy:focus-visible .back-shy-arr{transform:translate(0,-22px);}
.back-shy:hover .back-shy-txt,.back-shy:focus-visible .back-shy-txt{opacity:1;transform:none;transition-delay:.1s;}
.back-shy:focus-visible{outline:2px solid #8D3B3B;}
@media (prefers-reduced-motion:reduce){
  .page-in{display:none;}
  .back-shy,.back-shy *{transition:none;}
}
@media (max-width:600px){
  .back-shy{width:58px;height:58px;}
  .back-shy:hover,.back-shy:focus-visible{width:140px;height:140px;}
}

/* ---------- iOS Safari and older phones ----------
   .mark-cross is 342x120 in layout and was scaled 42x — a ~14,700px-wide layer,
   three times that again on a retina phone — while an animated drop-shadow
   forced it to re-rasterise every frame. Safari hits its texture/memory ceiling
   and drops the layer outright, which is why the cross was simply missing on
   iPhone; the same per-frame filter work is what makes the act stutter on older
   hardware. .revert-cross had it at 30x.

   Touch screens keep the choreography. The scale is capped to what actually
   covers the viewport (12x and 10x both cover comfortably), and the filters come
   off so the transform rides the compositor alone. Desktop is untouched. */
@media (hover: none), (max-width: 760px) {
  .mark-cross {
    will-change: transform;
    filter: none;
    transform:
      translateX(calc(32.92% * var(--cross-open, 0)))
      rotate(calc(180deg * (1 - var(--cross-p, 0))))
      scale(calc(1 + .2 * var(--cross-p, 0) + .12 * var(--cross-flash, 0) + 12 * var(--cross-open, 0)));
  }
  .revert-cross {
    will-change: transform;
    filter: none;
    transform: translate(-50%, -50%) scale(calc(1 + 10 * (1 - var(--rev-shrink, 0))));
  }
  /* the grain covered four viewports and blended every one of them */
  body::before { inset: 0; }
  /* backdrop-filter on a sticky header is among the most expensive things an
     older iPhone can be asked to do, and this bar is near-opaque anyway */
  header.site { backdrop-filter: none; background: rgba(8, 8, 10, .96); }
}

/* ---------- demo-site gate ----------------------------------------------
   The studio speaking before the example opens: what this is, what it is not,
   and a door. Sits above .page-in (9500) so the visitor lands on it first.

   Hidden until the script turns it on, the same reasoning as .reveal on
   shydore.dev: with no JavaScript there is nothing to dismiss it with, and a
   black screen you cannot get past is worse than no disclaimer. Shown once per
   tab per site, so clicking through the work on a call is not a toll gate.

   Accent and display face come in per site as --dg-accent / --dg-face, so this
   block stays identical in all four and can be edited in one pass. --------- */
.dgate{display:none;position:fixed;inset:0;z-index:9600;background:#0a0b08;color:#e9e6d8;
  place-items:center;padding:34px 22px;overflow-y:auto;opacity:1;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  transition:opacity .28s ease;}
.dgate.on{display:grid;}
.dgate.out{opacity:0;pointer-events:none;}
.dgate-in{max-width:53ch;text-align:center;animation:dgate-up .5s cubic-bezier(.2,.7,.2,1) both;}
@keyframes dgate-up{from{opacity:0;transform:translateY(12px);}}
.dgate-ck{margin:0;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:.64rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--dg-accent,#ff9a1f);}
.dgate-nm{margin:14px 0 22px;font-family:var(--dg-face,inherit);font-weight:var(--dg-weight,400);
  font-size:clamp(1.9rem,6.4vw,3.2rem);line-height:1.04;color:#e9e6d8;text-wrap:balance;}
.dgate-p{margin:0 0 14px;font-size:.94rem;font-weight:400;line-height:1.66;color:#a4a797;}
.dgate-p b{color:#e9e6d8;font-weight:700;}
.dgate-p--care{color:#e9e6d8;}
.dgate-rule{width:46px;height:1px;background:#2b2e22;margin:24px auto 22px;}
.dgate-go{font:inherit;font-size:.87rem;font-weight:700;letter-spacing:.03em;background:#e9e6d8;
  color:#0a0b08;border:0;border-radius:100px;padding:14px 27px;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;
  transition:transform .2s ease,background .2s ease;}
.dgate-go:hover{background:#fff;transform:translateY(-1px);}
.dgate-go:focus-visible,.dgate-back:focus-visible{outline:2px solid var(--dg-accent,#ff9a1f);
  outline-offset:3px;}
.dgate-back{display:block;margin-top:20px;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:#6b6e5e;text-decoration:none;}
.dgate-back:hover{color:#a4a797;}
html.dgate-lock,html.dgate-lock body{overflow:hidden;}
@media (prefers-reduced-motion:reduce){
  .dgate,.dgate-go{transition:none;}
  .dgate-in{animation:none;}
}