/* ============================================================================
   Krayt Studios · Devious Demigods — landing page
   v4 "handcrafted" pass, referenced from real indie-studio sites (Massive
   Monster / Cult of the Lamb / Thunder Lotus): sticker components with ink
   outlines + HARD offset shadows, wavy band dividers, badge-labeled sections,
   character cutouts leaning into the layout. Light parchment, strap-red accent.
   Scott: tokens in :root; hero layer depths are data-depth attrs in index.html.
   ========================================================================== */

:root {
  --paper: #f2e8d5;            /* ground — warm parchment */
  --paper-deep: #e6d8bc;       /* alternate band */
  --card: #fbf6ea;             /* raised paper */
  --ink: #2e241a;              /* warm near-black ink */
  --ink-soft: #7a6650;         /* secondary text */
  --accent: #b04434;           /* the journal's strap red */
  --accent-deep: #8e352a;
  --hairline: rgba(46, 36, 26, 0.16);

  --border: 3px solid var(--ink);
  --hard: 6px 6px 0 rgba(46, 36, 26, 0.85);        /* the sticker shadow */
  --hard-sm: 4px 4px 0 rgba(46, 36, 26, 0.85);

  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --w: 1200px;
  --pad: clamp(20px, 4vw, 48px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* faint uniform paper grain — makes the flats feel like material */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 95; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.05; mix-blend-mode: multiply;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { width: min(var(--w), calc(100% - 2 * var(--pad))); margin-inline: auto; position: relative; }

.display {
  font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.96;
}
.h-major { font-size: clamp(42px, 6.6vw, 86px); margin-top: 16px; }
.h-major .dim { color: var(--accent); }

/* ---- the sticker system ------------------------------------------------------ */
.sticker {
  background: var(--card);
  border: var(--border);
  border-radius: 16px;
  box-shadow: var(--hard);
}
.tilt-l { transform: rotate(-1.4deg); }
.tilt-r { transform: rotate(1.6deg); }

.chip {
  display: inline-block;
  background: var(--card);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 rgba(46, 36, 26, 0.85);
  padding: 4px 14px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink);
}
.chip.red { background: var(--accent); color: #fdf5e8; border-color: var(--ink); }
.chip.mini {
  position: absolute; left: 14px; bottom: 12px;
  font-size: 10px; padding: 3px 10px; box-shadow: 2px 2px 0 rgba(46, 36, 26, 0.85);
  background: rgba(251, 246, 234, 0.95);
}
.chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

/* section badge = the game's stone title plate with the label riding on it */
.plate {
  position: relative; display: inline-block;
  filter: drop-shadow(4px 4px 0 rgba(46, 36, 26, 0.55));
}
.plate img { width: 210px; display: block; }
.plate b {
  position: absolute; inset: 0 0 14% 0;      /* optical centre of the plate art */
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 400;
  font-size: 19px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #4a3826;
}

/* bronze divider from the save/load pages, under the big headings */
.divider { width: min(420px, 80%); margin: 20px 0 16px; image-rendering: auto; }

/* drachmae bullets in the perks list */
.perks .coin { width: 26px; align-self: center; flex: none; filter: drop-shadow(1px 2px 0 rgba(46,36,26,0.35)); }

/* ---- buttons: game-y sticker buttons ---------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 15px; letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 13px 26px; border-radius: 12px;
  border: var(--border); color: var(--ink); background: var(--card);
  box-shadow: var(--hard-sm);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(46, 36, 26, 0.85); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(46, 36, 26, 0.85); }
.btn.red { background: var(--accent); color: #fdf5e8; }
.btn.red:hover { background: var(--accent-deep); }
.btn.cream { background: var(--card); }
.btn.big { font-size: 17px; padding: 16px 34px; }
.btn.small { padding: 8px 18px; font-size: 12.5px; box-shadow: 3px 3px 0 rgba(46, 36, 26, 0.85); }

/* ---- header ------------------------------------------------------------------ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.site-header.scrolled {
  background: rgba(242, 232, 213, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 3px 0 var(--ink);
}
.site-header .bar { display: flex; align-items: center; gap: 30px; height: 74px; }
.wordmark {
  font-family: var(--font-display); font-size: 17px; letter-spacing: 0.26em;
  text-transform: uppercase; color: #fdf8ec;
  text-shadow: 2px 2px 0 rgba(46, 36, 26, 0.9);
}
.wordmark span { color: #ffcf9e; }
.site-header.scrolled .wordmark { color: var(--ink); text-shadow: none; }
.site-header.scrolled .wordmark span { color: var(--accent); }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 24px; }
.site-nav a.link {
  font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: #fdf8ec; text-shadow: 1px 1px 0 rgba(46, 36, 26, 0.9);
}
.site-header.scrolled a.link { color: var(--ink); text-shadow: none; }
.site-nav a.link:hover { color: var(--accent); }

/* ---- hero -------------------------------------------------------------------- */
.hero {
  position: relative; height: 100svh; min-height: 660px;
  overflow: hidden; isolation: isolate;
}
.hero .layer {
  position: absolute; top: 50%; left: 50%;
  width: 108%; height: 108%;
  transform: translate(-50%, -50%);
  object-fit: cover; object-position: center 38%;
  filter: blur(7px) saturate(1.06);          /* backdrop, not subject — the logo is the subject */
  will-change: transform;
}
#motes { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hero .shade {
  position: absolute; inset: 0; z-index: 6;
  background: linear-gradient(rgba(30, 22, 14, 0.32), transparent 24%, transparent 52%, rgba(30, 22, 14, 0.38) 88%, rgba(30, 22, 14, 0.42));
}
.hero .content {
  position: absolute; inset: 0; z-index: 7;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-align: center; padding: clamp(80px, 10vh, 130px) 0 clamp(56px, 8vh, 96px);
}
.hero .logo {
  width: min(760px, 84vw);                   /* the logo IS the hero now */
  filter: drop-shadow(0 22px 54px rgba(30, 22, 14, 0.65));
}
.hero .foot { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 26px; }
.hero .tagline {
  font-size: clamp(16px, 2vw, 21px); font-weight: 700; letter-spacing: 0.02em;
  color: #fdf8ec; text-shadow: 0 2px 16px rgba(30, 22, 14, 0.9);
}
.hero .cta { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.hero .chips { margin-top: 0; }
.hero .chip { box-shadow: 3px 3px 0 rgba(46, 36, 26, 0.9); }
/* the red band's wave rises into the painting */
.wave { line-height: 0; }
.wave svg { display: block; width: 100%; height: clamp(28px, 4.5vw, 64px); }
.hero-wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 8; }
.hero-wave svg path { fill: var(--accent); }

/* ---- marquee (red band) ------------------------------------------------------- */
.marquee {
  background: var(--accent);
  overflow: hidden; white-space: nowrap;
  padding: 12px 0 16px;
}
.marquee .track {
  display: inline-block;
  font-family: var(--font-display); font-size: 16px; letter-spacing: 0.30em;
  text-transform: uppercase; color: #fdf5e8;
  animation: marquee 36s linear infinite;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- bands + wavy seams -------------------------------------------------------- */
section { position: relative; }
.intro { background: var(--paper); padding: 0 0 clamp(90px, 10vw, 140px); }
.intro > .wave.top svg path { fill: var(--accent); }       /* red descends into paper */
.support { background: var(--paper-deep); padding: 0 0 clamp(90px, 9vw, 130px); }
.support > .wave.top svg path { fill: var(--paper); }      /* paper descends into tan */
.site-footer { background: var(--ink); padding: 0 0 42px; position: relative; }
.site-footer > .wave.top svg path { fill: var(--paper-deep); }  /* tan descends into ink */
.intro > .container, .support > .container { padding-top: clamp(56px, 7vw, 100px); }

/* ---- the game section ----------------------------------------------------------- */
.head-row { position: relative; }
.head-row .lede { max-width: 52ch; font-size: clamp(16.5px, 1.5vw, 19px); color: var(--ink-soft); margin-top: 16px; }
.head-row .lede strong { color: var(--ink); }
.cutout {
  pointer-events: none; user-select: none;
  /* die-cut sticker edge: cream outline via stacked drop-shadows, then the cast shadow —
     hides raggedy crop edges and matches the chip/button language */
  filter: drop-shadow(2px 0 0 var(--card)) drop-shadow(-2px 0 0 var(--card))
          drop-shadow(0 2px 0 var(--card)) drop-shadow(0 -2px 0 var(--card))
          drop-shadow(5px 6px 0 rgba(46, 36, 26, 0.3));
}
.cutout.annabeth {
  /* SMALL accent: head + crossed arms peeking in from the page edge (clip kills the
     neighbour-crop fragments on the png's right side and her lower half). */
  position: absolute; right: calc(-1 * clamp(16px, 3vw, 44px)); top: -30px;
  width: clamp(140px, 15vw, 210px);
  clip-path: polygon(3% 0, 89% 0, 89% 57%, 3% 51%);  /* slanted crop = deliberate sticker cut */
  transform: rotate(3deg);
  z-index: 1;
}

.feature {
  display: grid; grid-template-columns: repeat(12, 1fr);
  align-items: center; gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(60px, 7vw, 100px);
}
.feature .art {
  grid-column: 1 / span 7; position: relative;
  padding: 10px; overflow: hidden;
}
.feature .art img { border-radius: 8px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.feature .copy { grid-column: 8 / span 5; position: relative; z-index: 0; }  /* stacking anchor so .num's z:-1 stays visible over the band bg */
.feature.flip .art { grid-column: 6 / span 7; grid-row: 1; }
.feature.flip .copy { grid-column: 1 / span 5; grid-row: 1; }
.feature .num {
  position: absolute; top: -0.55em; left: -4px; z-index: -1;
  font-family: var(--font-display); font-size: clamp(84px, 9vw, 140px); line-height: 1;
  color: transparent; -webkit-text-stroke: 2.5px rgba(176, 68, 52, 0.4);
}
.feature h3 { font-size: clamp(27px, 3vw, 42px); margin-bottom: 12px; }
.feature p { color: var(--ink-soft); font-size: 15.5px; }

/* ---- support -------------------------------------------------------------------- */
.support .grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(30px, 5vw, 80px); align-items: center;
}
.support .lede { color: var(--ink-soft); margin-top: 14px; max-width: 50ch; }
.support .cta-row { display: flex; align-items: center; gap: 18px; margin-top: 26px; flex-wrap: wrap; }
.support .fine { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.cutout.katie {
  position: absolute; right: clamp(8px, 6vw, 120px); top: 0;
  width: clamp(120px, 13vw, 190px);
  transform: translateY(-58%) rotate(-2deg);   /* sitting ON the wave seam */
  z-index: 3;
  clip-path: inset(0 0 2% 0);                  /* trim crop-edge slivers */
}
.perks { list-style: none; padding: 10px 26px; transform: rotate(0.8deg); }
.perks li {
  display: flex; gap: 16px; align-items: baseline;
  padding: 15px 0; border-bottom: 2px dashed var(--hairline);
  font-size: 15.5px; font-weight: 500;
}
.perks li:last-child { border-bottom: 0; }
.perks .k {
  font-family: var(--font-display); color: var(--accent); font-size: 14px;
  letter-spacing: 0.1em; min-width: 76px; text-transform: uppercase;
}

/* ---- footer (ink band) ------------------------------------------------------------ */
.site-footer { color: #cfc4ad; font-size: 14px; }
.site-footer .container { padding-top: clamp(40px, 5vw, 70px); }
.site-footer .row { display: flex; gap: 40px; align-items: start; flex-wrap: wrap; }
.site-footer .studio { max-width: 460px; }
.site-footer .studio p { margin-top: 10px; color: #b3a78e; }
.site-footer .studio em { color: #fdf5e8; font-style: normal; font-weight: 700; }
.site-footer .wordmark { color: #fdf5e8; text-shadow: none; }
.site-footer .wordmark span { color: #ff9d86; }
.site-footer .row nav { margin-left: auto; display: flex; gap: 24px; font-weight: 700; }
.site-footer .row a:hover { color: #fdf5e8; }
.site-footer .legal {
  margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(253, 245, 232, 0.15);
  font-size: 12px; line-height: 1.75; color: #8f8570; max-width: 980px;
}
.cutout.louellen {
  /* right side — on the left she sat on the BECOME A PATRON button */
  position: absolute; right: clamp(24px, 7vw, 130px); top: 0;
  width: clamp(140px, 15vw, 220px);
  transform: translateY(-72%) rotate(2deg);    /* mostly on the light band — her dark skirt
                                                  vanished against the ink footer lower down */
  z-index: 3;
  clip-path: inset(0 3% 4% 0);                 /* trim the neighbour-crop toe sliver */
}

/* ---- age gate ---------------------------------------------------------------------- */
.age-gate {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: rgba(38, 29, 20, 0.62); backdrop-filter: blur(14px);
}
.age-gate[hidden] { display: none; }
.age-gate .panel {
  width: min(500px, calc(100% - 48px)); text-align: center;
  padding: 42px 40px; transform: rotate(-0.8deg);
}
.age-gate .gate-logo { width: 250px; margin: 0 auto 16px; }
.age-gate h2 { font-size: 27px; }
.age-gate p { color: var(--ink-soft); font-size: 14.5px; margin-top: 10px; }
.age-gate .row { display: flex; gap: 14px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
body.gated { overflow: hidden; }

/* ---- reveal-on-scroll ---------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee .track { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---- responsive ------------------------------------------------------------------------ */
@media (max-width: 940px) {
  .hero .logo { margin-left: 0; }
  .head-row { grid-template-columns: 1fr; }
  .cutout.annabeth { display: none; }
  .feature .art, .feature.flip .art { grid-column: 1 / -1; grid-row: auto; }
  .feature .copy, .feature.flip .copy { grid-column: 1 / -1; grid-row: auto; }
  .support .grid { grid-template-columns: 1fr; }
  .cutout.katie { width: 110px; right: 12px; }
  .cutout.louellen { width: 120px; }
  .site-nav a.link { display: none; }
}

/* ---- inner pages (privacy / terms) — no age gate, no main.js ------------------ */
.site-header.solid {
  position: static;
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
}
.site-header.solid .wordmark { color: var(--ink); text-shadow: none; }
.site-header.solid .wordmark span { color: var(--accent); }
.site-header.solid a.link { color: var(--ink); text-shadow: none; }
.page { max-width: 820px; margin-inline: auto; padding: clamp(40px, 6vw, 80px) var(--pad) 90px; }
.page h1 { font-size: clamp(38px, 5vw, 58px); }
.page .updated { color: var(--ink-soft); font-size: 14px; margin: 10px 0 8px; }
.page .divider { margin-top: 6px; }
.page h2 {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: 21px; letter-spacing: 0.04em; margin: 38px 0 10px; color: var(--accent);
}
.page p, .page li { color: #5d4c3a; font-size: 15.5px; }
.page ul { padding-left: 22px; margin-top: 8px; }
.page li { margin-bottom: 6px; }
.page .note {
  margin-top: 46px; padding: 18px 22px; font-size: 14px; color: var(--ink-soft);
  border-radius: 12px;
}
.page a { color: var(--accent); font-weight: 700; }
.page-footer {
  border-top: 3px solid var(--ink); background: var(--paper);
  padding: 26px 0; font-size: 13px; color: var(--ink-soft); text-align: center;
}

/* dev screenshot mode (?shotmode): vh heights pinned so full-page captures are honest */
.shotmode .hero { height: 940px; min-height: 0; }