/* STOORWORM - the marketing page, privacy and support.
   The game's own look (its spec 11.1, "folk cutout"): broad angular paper-cut
   shapes, almost no outlines, quiet paper grain, and six colours - ink navy,
   slate, lichen, rust, ochre and bone. Sky above, a turf line, the earth below:
   the page is laid out like the game's cross-section, and the worm's world is
   the dark half.
   Everything the marketing page adds is scoped under [data-page="home"], so
   privacy.html and support.html (what a store reviewer opens) stay plain. */

@font-face { font-family: "IM Fell"; src: url("fonts/imfell-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IM Fell"; src: url("fonts/imfell-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Karla"; src: url("fonts/karla-var.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
  --ink: #252d38;
  --earth: #1d232c;
  --slate: #657f91;
  --slate-hi: #7d95a5;
  --lichen: #737953;
  --rust: #a2553d;
  --ochre: #c4a258;
  --bone: #e3d5b4;
  --bone-dim: #b9ad92;
  --parchment: #e6d8b8;
  --quill: #2b2622;
  --blood: #8f2a22;
  --serif: "IM Fell", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: "Karla", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* Paper grain: fractal noise, very quiet, laid over every flat colour. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grain), var(--earth);
  color: var(--bone);
  font: 400 1.0625rem/1.6 var(--sans);
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--ochre); text-underline-offset: .18em; }
a:hover { color: var(--bone); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.1; margin: 0 0 .5em; }

/* ------------------------------------------------------------------ hero */
[data-page="home"] .hero { position: relative; overflow: hidden; }
[data-page="home"] .top {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); left: 18px; z-index: 2;
  font: 600 .8rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
}
[data-page="home"] .top a { color: var(--ink); text-decoration: none; opacity: .75; }
[data-page="home"] .top a:hover { opacity: 1; }
[data-page="home"] .sky {
  position: relative;
  padding: clamp(64px, 11vw, 120px) 16px clamp(120px, 16vw, 190px);
  text-align: center;
  background:
    /* the far isles, cut from paper, on the horizon */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90' preserveAspectRatio='none'%3E%3Cpath fill='%23566e7e' d='M0 90V62l60-14 50 9 70-30 60 20 40-8 80 26 40-4 60-34 70 18 50-6 90 30 60-9 70-25 60 17 50-3 80 22 50-12 60 8 50-20 50 6v83z'/%3E%3Cpath fill='%23485d6b' d='M0 90V74l90-10 60 12 110-26 70 16 50 8 90-18 80 14 60-6 70 20 90-24 60 12 80 4 90-16 60 10 90-6v36z'/%3E%3C/svg%3E") bottom / 100% clamp(40px, 7vw, 90px) no-repeat,
    /* paper-cut cloud bands */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none'%3E%3Cg fill='%23748ea0' opacity='.55'%3E%3Cpath d='M-20 70l180-14 220 10 160-16 240 12 170-8 270 10v18l-250 6-200-6-230 10-190-8-170 12-180-4z'/%3E%3Cpath d='M120 170l200-10 140 8 230-12 180 10 200-6 150 6v16l-220 4-180-8-200 10-160-6-180 6z'/%3E%3Cpath d='M-30 260l240-8 190 12 170-10 230 8 160-6 260 8v14l-240 6-210-8-190 10-200-6-200 4z'/%3E%3C/g%3E%3C/svg%3E") top / 100% 100% no-repeat,
    var(--grain),
    linear-gradient(180deg, #54697a 0%, var(--slate) 48%, #8a8f98 78%, #c29a86 100%);
}
[data-page="home"] .wordmark { margin: 0 auto; width: min(92vw, 880px); }
[data-page="home"] .wordmark img { width: 100%; filter: drop-shadow(0 6px 0 rgba(29, 35, 44, .35)); }
[data-page="home"] .motto {
  margin: clamp(4px, 1vw, 12px) 0 0;
  font: italic 400 clamp(1.3rem, 3.2vw, 2rem)/1.2 var(--serif);
  color: var(--ink);
}
[data-page="home"] .turf {
  height: 14px;
  background: linear-gradient(180deg, var(--ochre) 0 4px, var(--lichen) 4px 100%);
  clip-path: polygon(0 30%, 6% 0, 13% 45%, 22% 5%, 31% 40%, 40% 0, 52% 38%, 61% 8%, 70% 42%, 79% 2%, 88% 36%, 95% 6%, 100% 30%, 100% 100%, 0 100%);
}
[data-page="home"] .earth {
  /* the underground: navy, with stones, as the game draws it */
  background:
    radial-gradient(ellipse 9px 7px at 12% 18%, #2c3542 98%, transparent) ,
    radial-gradient(ellipse 12px 8px at 81% 9%, #2c3542 98%, transparent),
    radial-gradient(ellipse 7px 6px at 64% 71%, #2c3542 98%, transparent),
    radial-gradient(ellipse 10px 8px at 29% 88%, #2c3542 98%, transparent),
    radial-gradient(ellipse 8px 6px at 92% 58%, #2c3542 98%, transparent),
    var(--grain), var(--ink);
  padding: 0 16px clamp(48px, 7vw, 84px);
  text-align: center;
}
[data-page="home"] .reel {
  margin: calc(clamp(96px, 13vw, 160px) * -1) auto 0;
  width: min(100%, 1040px);
  padding: 10px;
  background: var(--bone);
  clip-path: polygon(0 1.2%, 2.5% 0, 97% .6%, 100% 2.4%, 99.4% 97.8%, 97.6% 100%, 1.8% 99.2%, .4% 96.8%);
  filter: drop-shadow(0 10px 0 rgba(0, 0, 0, .25));
  position: relative;
}
[data-page="home"] .reel video, [data-page="home"] .reel img {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  clip-path: polygon(0 .8%, 1.6% 0, 98.4% .4%, 100% 1.6%, 99.6% 98.6%, 98.2% 100%, 1.2% 99.4%, 0 98%);
}
[data-page="home"] .lede {
  max-width: 40rem;
  margin: clamp(28px, 4vw, 44px) auto 0;
  font: 400 clamp(1.15rem, 2.2vw, 1.4rem)/1.55 var(--serif);
  color: var(--bone);
}
[data-page="home"] .lede span { display: block; margin-top: .4em; color: var(--ochre); font-style: italic; }
.soon {
  display: inline-block;
  margin: 26px 0 0;
  padding: .7em 1.4em .75em;
  font: 700 .82rem/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bone);
  clip-path: polygon(4% 0, 100% 6%, 96% 100%, 0 92%);
}

/* ------------------------------------------------------------------ the Annal */
[data-page="home"] .annal { padding: clamp(40px, 7vw, 90px) 16px; }
[data-page="home"] .annal .page {
  position: relative;
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) clamp(22px, 6vw, 72px);
  background: var(--grain), linear-gradient(170deg, #eadfc6, var(--parchment) 55%, #d9c79f);
  color: var(--quill);
  /* a torn page: every edge is a little ragged */
  clip-path: polygon(0 3%, 3% 0, 11% 2%, 19% 0, 30% 1.6%, 42% .2%, 55% 2%, 67% 0, 78% 1.4%, 90% 0, 97% 2%, 100% 1%, 99% 14%, 100% 28%, 98.8% 45%, 100% 60%, 99% 76%, 100% 90%, 98.6% 100%, 88% 98.6%, 75% 100%, 61% 98.4%, 47% 100%, 33% 98.8%, 20% 100%, 8% 98.6%, 0 100%, 1% 86%, 0 70%, 1.2% 52%, 0 36%, 1% 18%);
}
[data-page="home"] .annal .rubric {
  margin: 0 0 1rem;
  font: 400 .95rem/1 var(--serif);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rust);
}
[data-page="home"] .annal blockquote { margin: 0; }
[data-page="home"] .annal blockquote p {
  margin: 0 0 1em;
  font: 400 clamp(1.2rem, 2.6vw, 1.55rem)/1.5 var(--serif);
  padding-bottom: .35em;
  border-bottom: 1px solid rgba(43, 38, 34, .18); /* the monk's ruled lines */
}
[data-page="home"] .annal blockquote p:last-child { margin-bottom: 0; }
[data-page="home"] .annal .margin {
  float: right;
  width: clamp(92px, 16vw, 150px);
  margin: 0 0 8px 18px;
  transform: rotate(-5deg);
  mix-blend-mode: multiply;
}
[data-page="home"] .annal.closing .page { max-width: 38rem; }

/* ------------------------------------------------------------------ the beats */
[data-page="home"] main > section { padding-left: 16px; padding-right: 16px; }
[data-page="home"] .beat { max-width: 1120px; margin: 0 auto; padding-block: clamp(40px, 7vw, 90px); }
[data-page="home"] h2 { font-size: clamp(2rem, 5.2vw, 3.4rem); color: var(--bone); text-align: center; }
[data-page="home"] .wide { max-width: 44rem; margin: 0 auto 1.4em; text-align: center; font-size: 1.12rem; color: var(--bone-dim); }
[data-page="home"] .pair {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  margin: 0 0 clamp(24px, 4vw, 44px);
}
[data-page="home"] .pair.flip .cut { order: 2; }
[data-page="home"] .words p { margin: 0 0 1em; color: var(--bone-dim); }
[data-page="home"] .words p:first-child { color: var(--bone); }
[data-page="home"] .cut {
  margin: 0;
  padding: 7px;
  background: var(--bone);
  clip-path: polygon(0 2%, 3% 0, 97.5% 1%, 100% 3.5%, 99% 97%, 96.8% 100%, 2% 99%, .6% 96%);
  filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .28));
}
[data-page="home"] .cut img { width: 100%; clip-path: polygon(0 1.4%, 2% 0, 98% .8%, 100% 2.4%, 99.4% 98%, 98% 100%, 1.4% 99.4%, 0 97.8%); }
[data-page="home"] .cut.wide { max-width: 1040px; margin: 0 auto; }
[data-page="home"] .offer {
  font: italic 400 1.35rem/1.35 var(--serif) !important;
  color: var(--ochre) !important;
  margin: 0 0 .5em !important;
}
[data-page="home"] .families { width: min(100%, 420px); margin: 0 auto clamp(20px, 3vw, 32px); }

/* ------------------------------------------------------------------ the Hag */
[data-page="home"] .hag {
  background: var(--grain), linear-gradient(180deg, var(--earth), #2a3340 40%, #3b4855);
  padding-block: clamp(40px, 7vw, 80px) 0;
}
[data-page="home"] .hag-in {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(16px, 4vw, 48px);
}
[data-page="home"] .hag .portrait { width: 100%; max-width: 520px; justify-self: center; }
[data-page="home"] .hag .words { padding-bottom: clamp(32px, 6vw, 72px); }
[data-page="home"] .hag h2 { text-align: left; }
[data-page="home"] .hag .quote {
  font: italic 400 clamp(1.3rem, 2.8vw, 1.75rem)/1.35 var(--serif);
  color: var(--bone) !important;
  border-left: 3px solid var(--rust);
  padding-left: .8em;
}

/* ------------------------------------------------------------------ the island */
[data-page="home"] .isle {
  padding-block: clamp(48px, 8vw, 100px);
  background:
    linear-gradient(rgba(29, 35, 44, .55), rgba(29, 35, 44, .72)),
    url("art/chart.webp") center / cover no-repeat,
    var(--ink);
}
[data-page="home"] .isle-in {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(26px, 5vw, 52px) clamp(20px, 5vw, 56px);
  background: var(--grain), var(--parchment);
  color: var(--quill);
  clip-path: polygon(0 1.5%, 4% 0, 60% 1%, 100% 0, 99% 50%, 100% 98.5%, 55% 100%, 3% 99%, 0 100%, 1% 45%);
}
[data-page="home"] .isle h2 { color: var(--ink); }
[data-page="home"] .isle .wide { color: #4a4238; }
[data-page="home"] .places { list-style: none; margin: 0; padding: 0; }
[data-page="home"] .places li {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: 4px 18px;
  padding: .7em 0;
  border-top: 1px solid rgba(43, 38, 34, .2);
}
[data-page="home"] .places strong { font: 400 1.3rem/1.2 var(--serif); color: var(--ink); }
[data-page="home"] .places span { color: #4a4238; }
[data-page="home"] .places .boss strong { color: var(--blood); }

/* ------------------------------------------------------------------ gallery, facts */
[data-page="home"] .gallery { max-width: 1120px; margin: 0 auto; padding-block: clamp(48px, 8vw, 96px) 0; }
[data-page="home"] .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 2vw, 18px); }
[data-page="home"] .grid a {
  display: block;
  padding: 5px;
  background: var(--bone);
  clip-path: polygon(0 3%, 4% 0, 97% 1.5%, 100% 5%, 98.5% 96%, 95% 100%, 2.5% 98.5%, 0 94%);
  transition: transform .15s ease;
}
[data-page="home"] .grid a:hover { transform: rotate(-.6deg) scale(1.015); }
[data-page="home"] .note { text-align: center; color: var(--bone-dim); font-size: .92rem; margin-top: 1.2rem; }

[data-page="home"] .facts {
  max-width: 900px;
  margin: 0 auto;
  padding-block: clamp(20px, 5vw, 60px) clamp(48px, 8vw, 90px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(18px, 4vw, 40px);
  align-items: center;
}
[data-page="home"] .facts .icon {
  width: clamp(96px, 16vw, 150px);
  border-radius: 22%;
  box-shadow: 0 8px 0 rgba(0, 0, 0, .3);
}
[data-page="home"] .facts .soon { margin: 0 0 .9rem; }
[data-page="home"] .facts p { margin: 0 0 .8rem; color: var(--bone-dim); }
[data-page="home"] .links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }

footer {
  padding: 22px 16px calc(28px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: .85rem;
  color: var(--bone-dim);
  border-top: 1px solid rgba(227, 213, 180, .12);
}
footer p { max-width: 44rem; margin: 0 auto; }

@media (max-width: 760px) {
  [data-page="home"] .pair, [data-page="home"] .hag-in { grid-template-columns: minmax(0, 1fr); }
  [data-page="home"] .pair.flip .cut { order: 0; }
  [data-page="home"] .hag h2 { text-align: center; }
  [data-page="home"] .hag .portrait { max-width: 340px; }
  [data-page="home"] .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-page="home"] .places li { grid-template-columns: minmax(0, 1fr); }
  [data-page="home"] .facts { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  [data-page="home"] .links { justify-content: center; }
}
@media (max-width: 440px) {
  [data-page="home"] .grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  [data-page="home"] .grid a { transition: none; }
}

/* ------------------------------------------------------------------ privacy + support
   The two pages a reviewer opens: a plain parchment sheet on the earth. No
   animation, no hero, nothing that can fail. */
.doc main {
  max-width: 44rem;
  margin: clamp(16px, 5vw, 56px) auto;
  padding: clamp(26px, 5vw, 52px) clamp(20px, 5vw, 56px);
  background: var(--grain), var(--parchment);
  color: var(--quill);
}
.doc h1 { font-size: clamp(2.1rem, 6vw, 3rem); color: var(--ink); margin-top: .4rem; }
.doc h2 { font-size: 1.5rem; color: var(--ink); margin-top: 1.6em; }
.doc .sub { margin-top: -.6rem; color: var(--rust); font: italic 400 1.2rem/1.3 var(--serif); }
.doc a { color: #7a3a26; }
.doc a:hover { color: var(--ink); }
.doc .back { font: 600 .8rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.doc .q { font-weight: 700; color: var(--ink); margin: 1.3em 0 .3em; }
.doc .updated { margin-top: 2.2em; font-size: .9rem; color: #5e554a; }
.doc table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: .5em .6em; border-top: 1px solid rgba(43, 38, 34, .2); }
.doc .scroll { overflow-x: auto; }