/* Last Thread — landing page. Palette and art come from the game. */
:root {
  --ink: #0d0b10;
  --ink-2: #16121c;
  --ink-3: #1f1927;
  --bone: #e9dfc8;
  --bone-dim: #b9ae98;
  --ember: #e07a2e;
  --ember-soft: #f0a25f;
  --loom: #5fe0b0;
  --blood: #c8324a;
  --brass: #b8893a;
  --display: "IM Fell English SC", "IM Fell English", Georgia, serif;
  --tell: "IM Fell English", Georgia, serif;
  --body: "Alegreya Sans", "Avenir Next", "Segoe UI", sans-serif;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font: 400 1.125rem/1.6 var(--body);
  scrollbar-color: var(--brass) var(--ink);
}
::selection { background: var(--blood); color: var(--bone); }
a { color: var(--loom); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--bone); }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 2px; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 20;
  background: var(--ember); color: var(--ink); padding: 0.5rem 1rem; text-decoration: none;
}
.skip:focus { top: 1rem; }
.skip:hover { color: var(--ink); }

/* The one red thread: it drops from the Loom's eye, runs down the page past every chapter and
   ends at the closing badge. main.js lays the path out over the real page and draws it with scroll. */
body { position: relative; }
main, .foot { position: relative; z-index: 2; }
.thread {
  position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.thread path {
  fill: none; stroke: var(--blood); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: var(--thread-left, 0);
  filter: drop-shadow(0 1px 2px rgba(200, 50, 74, 0.45));
}

/* ---- First viewport ---- */
.hero {
  position: relative; min-height: 100svh; display: grid; align-items: end;
  isolation: isolate; overflow: hidden;
}
.hero-art {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(13, 11, 16, 0.95) 0%, rgba(13, 11, 16, 0.5) 36%, rgba(13, 11, 16, 0) 64%),
    linear-gradient(to right, rgba(13, 11, 16, 0.6) 0%, rgba(13, 11, 16, 0) 45%);
  /* Only the copy column gets the wash: the lantern-bearer bottom right keeps its ember light. */
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 48%, transparent 66%);
  mask-image: linear-gradient(to right, #000 0%, #000 48%, transparent 66%);
}
.hero::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 5rem; z-index: -1;
  background: linear-gradient(to top, var(--ink), rgba(13, 11, 16, 0));
}
.hero-copy {
  padding: 0 var(--gutter) clamp(5.5rem, 13vh, 8.5rem);
  max-width: 44rem;
}
.hero h1 {
  font-size: clamp(3.1rem, 10vw, 6rem); line-height: 0.92; letter-spacing: 0.01em;
  color: var(--bone); text-shadow: 0 4px 30px rgba(0, 0, 0, 0.7);
}
.tagline {
  margin-top: 0.9rem; font: italic 400 clamp(1.25rem, 2.6vw, 1.7rem)/1.3 var(--tell); color: var(--loom);
}
.badge {
  display: inline-flex; flex-direction: column; gap: 0.1rem;
  margin-top: 1.8rem; padding: 0.7rem 1.4rem 0.75rem;
  border: 1px solid var(--ember); border-radius: 0.65rem;
  background: rgba(13, 11, 16, 0.78);

}
.badge-top {
  font: 500 0.8rem/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember-soft);
}
.badge-main { font: 400 1.45rem/1.15 var(--display); color: var(--bone); }
.badge-note { margin-top: 0.8rem; font-size: 0.95rem; color: var(--bone-dim); }
.lang {
  position: absolute; top: clamp(1rem, 3vh, 1.8rem); right: var(--gutter);
  font: 500 0.95rem/1 var(--body); color: var(--bone); text-decoration: none;
  padding: 0.55rem 0.9rem; border: 1px solid rgba(233, 223, 200, 0.35); border-radius: 0.5rem;
  background: rgba(13, 11, 16, 0.5);
}
.lang:hover { border-color: var(--ember); color: var(--ember-soft); }
.scroll-cue {
  position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 5;
  padding: 0.3rem 0.8rem; background: rgba(13, 11, 16, 0.8); border-radius: 1rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  color: var(--bone-dim); text-decoration: none; font-size: 0.9rem; letter-spacing: 0.08em;
}
.scroll-cue:hover { color: var(--bone); }

/* ---- The story: seven illustrated chapters ---- */
.story { padding: clamp(4rem, 10vh, 7rem) 0 2rem; }
.chapter {
  display: grid; gap: clamp(1.4rem, 3vw, 3rem); align-items: center;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(2.5rem, 7vh, 5rem) var(--gutter);
  max-width: 82rem; margin: 0 auto;
}
.plate {
  margin: 0; border-radius: 0.4rem; overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(184, 137, 58, 0.28);
  background: var(--ink-2);
}
.plate img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.telling h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--ember-soft); letter-spacing: 0.02em;
}
.telling p {
  margin-top: 0.7rem; max-width: 30ch;
  font: 400 clamp(1.35rem, 2.3vw, 1.95rem)/1.42 var(--tell); color: var(--bone);
}
@media (min-width: 60rem) {
  .chapter { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
  .chapter:nth-child(odd of .chapter) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); }
  .chapter:nth-child(odd of .chapter) .plate { order: 2; }
  .chapter:nth-child(odd of .chapter) .telling { justify-self: end; }
}
/* The last chapter is the turn: full width, the picture first, the words under it. */
.story .chapter.chapter:last-child { grid-template-columns: minmax(0, 1fr); text-align: center; }
.story .chapter.chapter:last-child .plate { order: 0; }
.story .chapter.chapter:last-child .telling { order: 1; justify-self: center; }
.chapter:last-child .telling p { max-width: 36ch; margin-inline: auto; }

/* The storybook stage (wide screens, motion allowed, JS): the plates sit in one pinned frame and
   cross-fade as each chapter's words scroll past; the words type themselves in. main.js moves the
   plates into .stage and adds .staged; without it the chapters stay stacked as above. */
.story.staged {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 4vw, 4rem); max-width: 86rem; margin: 0 auto;
  padding: 0 var(--gutter) 6vh;
}
.story.staged .stage {
  grid-column: 1; grid-row: 1 / span 7; position: sticky; top: 12vh; height: 76vh; align-self: start;
  display: grid; align-items: center;
}
.story.staged .stage .plate {
  grid-area: 1 / 1; opacity: 0; transform: scale(1.025);
  /* A real page-turn blend: both plates share the frame for most of the second. */
  transition: opacity 1.2s cubic-bezier(0.45, 0, 0.25, 1), transform 1.8s var(--ease);
}
.story.staged .stage .plate.on { opacity: 1; transform: none; }
.story.staged .chapter {
  grid-column: 2; display: flex; align-items: center; min-height: 82vh; padding: 0; margin: 0; max-width: none;
  text-align: left;
}
.story.staged .chapter .telling { justify-self: start; }
.story.staged .chapter .telling p { max-width: 24ch; margin-inline: 0; }
.story.staged .chapter .telling h3, .story.staged .chapter .telling p {
  opacity: 0.18; transition: opacity 0.6s var(--ease);
}
.story.staged .chapter.on .telling h3 { opacity: 1; }
.story.staged .chapter.on .telling p {
  opacity: 1;
  animation: type-in 1.8s steps(36, end) both;
}
@keyframes type-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Reveal: content is visible without JS; with JS each chapter develops as it enters. */
.js .story:not(.staged) .chapter .plate, .js .story:not(.staged) .chapter .telling {
  transition: opacity 0.9s var(--ease), filter 1.2s var(--ease), transform 0.9s var(--ease);
}
.js .story:not(.staged) .chapter:not(.in) .plate { opacity: 0.12; filter: blur(10px) saturate(0.4); transform: scale(0.985); }
.js .story:not(.staged) .chapter:not(.in) .telling { opacity: 0; transform: translateY(1.2rem); }
.js .story:not(.staged) .chapter.in .telling { transition-delay: 0.25s; }

/* ---- The task ---- */
.task {
  display: grid; gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
  padding: clamp(4rem, 12vh, 8rem) var(--gutter);
  max-width: 76rem; margin: 0 auto;
}
.task img, .end-heart {
  justify-self: center;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
}
.task img { width: min(100%, 26rem); }
.task h2 { font-size: clamp(2.8rem, 7vw, 5.4rem); line-height: 1; color: var(--loom); }
.task p { margin-top: 1.2rem; max-width: 52ch; font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--bone); }
@media (min-width: 52rem) { .task { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }

/* ---- Heroes ---- */
.heroes { padding: clamp(3rem, 9vh, 6rem) var(--gutter); max-width: 76rem; margin: 0 auto; }
.heroes h2, .shots h2, .box h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); color: var(--bone); }
.pair { display: grid; gap: clamp(2rem, 5vw, 4rem); margin-top: 2.5rem; }
@media (min-width: 46rem) { .pair { grid-template-columns: 1fr 1fr; } }
.who img {
  width: 100%; max-width: 22rem; aspect-ratio: 1; object-fit: contain;
  background: radial-gradient(closest-side, var(--ink-3), var(--ink-2) 70%, var(--ink) 100%);
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
}
.who h3 { margin-top: 1rem; font-size: clamp(1.8rem, 3vw, 2.4rem); }
.who h3 span { font-size: 1.05rem; color: var(--ember-soft); margin-left: 0.4rem; }
.who p { margin-top: 0.6rem; max-width: 44ch; color: var(--bone-dim); }

/* ---- Screenshots ---- */
.shots { padding: clamp(3rem, 9vh, 6rem) 0; }
.shots h2 { padding: 0 var(--gutter); max-width: 76rem; margin: 0 auto; }
.reel {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(86vw, 58rem); gap: 1.4rem;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 2rem var(--gutter) 1.5rem; scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
}
.shot { margin: 0; scroll-snap-align: start; }
.shot img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0.4rem;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(184, 137, 58, 0.25);
}
.shot figcaption { margin-top: 0.8rem; color: var(--bone-dim); font-size: 1rem; max-width: 60ch; }

/* ---- What's in it ---- */
.box { padding: clamp(3rem, 9vh, 6rem) var(--gutter); max-width: 76rem; margin: 0 auto; }
.box ul { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: 0 3.5rem; }
@media (min-width: 46rem) { .box ul { grid-template-columns: 1fr 1fr; } }
.box li { padding: 1.2rem 0 1.3rem; border-top: 1px solid rgba(184, 137, 58, 0.28); color: var(--bone-dim); }
.box li strong {
  display: block; margin-bottom: 0.25rem;
  font: 400 1.45rem/1.2 var(--display); color: var(--bone);
}

/* ---- The close ---- */
.end {
  text-align: center; padding: clamp(5rem, 16vh, 10rem) var(--gutter) clamp(4rem, 10vh, 6rem);
  background: radial-gradient(60rem 30rem at 50% 100%, rgba(200, 50, 74, 0.16), rgba(13, 11, 16, 0) 70%);
}
.end-heart { width: min(70vw, 17rem); margin: 0 auto 1.5rem; }
.end h2 { font-size: clamp(2.6rem, 7vw, 5.4rem); line-height: 1; color: var(--bone); }
.end p { margin-top: 1rem; color: var(--bone-dim); font-size: 1.15rem; }
.end .badge { margin-top: 2rem; }

/* ---- Footer ---- */
.foot {
  display: grid; justify-items: center; gap: 0.9rem; text-align: center;
  padding: 3rem var(--gutter) 3.5rem; border-top: 1px solid rgba(184, 137, 58, 0.25);
  color: var(--bone-dim); font-size: 0.95rem;
}
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.6rem; }
.foot nav a { color: var(--bone); }
.credits { max-width: 52ch; }
.copy { font-size: 0.85rem; }

/* ---- Privacy / support pages ---- */
.doc-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.2rem var(--gutter); border-bottom: 1px solid rgba(184, 137, 58, 0.25);
}
.doc-home { display: flex; align-items: center; gap: 0.7rem; color: var(--bone); text-decoration: none; font: 400 1.4rem var(--display); }
.doc .lang { position: static; }
.doc-main { max-width: 42rem; margin: 0 auto; padding: 3.5rem var(--gutter) 4rem; }
.doc-main h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); margin-bottom: 1.5rem; }
.doc-main h2 { font-size: 1.6rem; margin: 2.2rem 0 0.5rem; color: var(--ember-soft); }
.doc-main p { margin-bottom: 1rem; color: var(--bone); }
.doc-main .date { color: var(--bone-dim); font-size: 0.95rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .story:not(.staged) .chapter .plate, .js .story:not(.staged) .chapter .telling { transition: none; }
  .js .story:not(.staged) .chapter:not(.in) .plate, .js .story:not(.staged) .chapter:not(.in) .telling { opacity: 1; filter: none; transform: none; }
  .thread path { stroke-dashoffset: 0; }
}