/* Hallmark · shape: chaptered editorial (a manga volume: title page, chapters, colophon) · genre: playful · theme: custom (brand: Weevii) · job: join · idea: "the reader's progress is the brand mark: a fox fills with purple as you read" · vibe: "inked, late-night, warm, a little mischievous"
 * paper: oklch(14.7% 0.026 299) night, one chapter on oklch(96.2% 0.01 299) · accent: oklch(45.8% 0.265 286) brand purple · display: Fredoka · body: Nunito Sans · hero: a title page, the fox on three planes with ink speed lines · nav: a static masthead, then a folio in the margin · footer: a colophon where the fox lands · imagery: two founder-supplied scene covers and the six clan crests · signature: the reading fox
 * axes: dark/rounded-sans/chromatic-violet · posture: brand · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V5 · weakest: P and S, a community page risks reading like any app; every head names a Weevii fact (orbit, clans, crests, reminders, no payments, 18+) and the fox is the brand's own opening animation */
/* Hallmark · waive 58 on the document pages (Terms, Privacy, rules, delete account): their text is shared word for word with the app (legal_text.dart) and terms are never reworded in a redesign; they get a contents list and a reading measure instead
 * waive 77, 78 and 79 on the document pages: a document is one reading column under the masthead, with no hero and no landing-page sections
 * waive 62 and 67 on scrollcraft.css: the scroll engine is copied untouched by the scroll-craft rule; site.css shows [data-sc-*] content when scripting is off, and .sc-label is not used
 * waive 77 on the home page's Marketplace and colophon: the mass there is a statement set at section size and the 340px landing fox, both on purpose
 * waive 38iii on .title-page .lead: it is the hero sentence, a separate paragraph in the muted ink, not a coloured word inside the head */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- Page ---------- */
body {
  font-size: var(--text-md);
  line-height: 1.6;
}
a { color: var(--color-link); }
a:hover { color: var(--color-ink); }
a:active { opacity: 0.8; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
  border-radius: var(--space-2xs);
}
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.skip {
  position: absolute;
  left: var(--space-md);
  top: var(--space-md);
  z-index: var(--z-modal);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-radius: var(--radius-control);
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

/* Without scripting nothing waits for the scroll engine to show it. */
html:not(.js) [data-sc-in],
html:not(.js) [data-sc-stagger] > *,
html:not(.js) [data-sc-cue] { opacity: 1; transform: none; }
html:not(.js) [data-sc-reveal] { clip-path: none; }

/* ---------- Masthead (static, not fixed) ---------- */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding-block: var(--space-lg);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--text-xl);
}
.brand img { width: 40px; height: 40px; border-radius: var(--radius-control); }
.brand:hover { color: var(--color-ink); }
.masthead nav { display: flex; flex-wrap: wrap; gap: var(--space-lg); font-size: var(--text-sm); }
.masthead nav a { color: var(--color-muted); text-decoration: none; }
.masthead nav a:hover, .masthead nav a[aria-current="page"] { color: var(--color-ink); }

/* ---------- Buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-control);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.button:hover { color: var(--color-accent-ink); background: var(--color-accent-hover); }
.button:active { transform: scale(0.97); }
.button--quiet {
  background: transparent;
  color: var(--color-ink);
  box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule);
}
.button--quiet:hover { color: var(--color-ink); background: var(--color-paper-2); }
.status {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-control);
  background: var(--color-paper-3);
  color: var(--color-ink);
  font-weight: 700;
}

/* ---------- Title page ---------- */
.title-page { position: relative; padding-bottom: var(--space-xl); }
.title-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--gap-columns);
  min-height: min(calc(100svh - 96px), 820px);
}
.title-page h1 {
  font-size: var(--text-display);
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
  font-weight: 600;
}
.title-page .lead {
  margin-top: var(--space-lg);
  max-width: 34ch;
  font-size: var(--text-lead);
  color: var(--color-muted);
}
.title-page .actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.cover { position: relative; aspect-ratio: 1; isolation: isolate; }
.cover__plane { position: absolute; inset: 0; }
.cover__lines { color: var(--color-muted); opacity: 0.5; }
.cover__lines svg { width: 100%; height: 100%; }
.cover__ghost {
  inset: -14%;
  background: var(--color-paper-3);
  -webkit-mask: url("fox-mark.png") center / contain no-repeat;
  mask: url("fox-mark.png") center / contain no-repeat;
  opacity: 0.55;
}
.cover__fox { display: grid; place-items: center; }
.cover__fox img { width: 62%; height: auto; }
.cover__frame {
  inset: 6%;
  border: var(--rule-ink) solid var(--color-ink);
  border-radius: var(--space-2xs);
  opacity: 0.9;
  pointer-events: none;
}

/* ---------- Chapters ---------- */
.chapter { padding-block: var(--section-gap-s); }
.chapter--page {
  background: var(--color-page);
  color: var(--color-page-ink);
}
.chapter--page a { color: var(--color-accent); }
.chapter--page a:hover { color: var(--color-page-ink); }
.chapter--page :focus-visible { outline-color: var(--color-accent); }
.chapter--deep { background: var(--color-paper-2); }
.folio-line {
  display: block;
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.chapter--page .folio-line { color: var(--color-page-muted); }
.chapter h2, .rail__lead h2 {
  font-size: var(--text-section);
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
  font-weight: 600;
  max-width: 18ch;
}
.chapter p, .rail__lead p { margin-top: var(--space-md); max-width: 46ch; font-size: var(--text-lead); }
.chapter p.muted { color: var(--color-muted); font-size: var(--text-md); }
.chapter--page p.muted { color: var(--color-page-muted); }
.spread {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-2xl);
  align-items: center;
}
.spread--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.spread--flip .spread__text { order: 2; }

/* A manga panel: the photograph sits inside an ink border that draws itself
   as the chapter scrolls in (the engine publishes --sc-p on the section). */
.panel { position: relative; margin: 0; }
.panel__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--space-2xs);
}
.panel__img img { width: 100%; height: 118%; object-fit: cover; }
.panel__ink {
  position: absolute;
  inset: calc(var(--space-xs) * -1);
  width: calc(100% + var(--space-md));
  height: calc(100% + var(--space-md));
  overflow: visible;
  color: var(--color-ink);
  pointer-events: none;
}
.panel__ink rect {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--rule-ink);
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - min(1, var(--sc-p, 1) * 2.4));
  vector-effect: non-scaling-stroke;
}
.panel figcaption { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }

/* Clans: the crests pass by. */
.crests { height: 100vh; display: flex; align-items: center; overflow: hidden; }
.rail { display: flex; align-items: center; gap: var(--space-2xl); padding-inline: var(--gutter); }
.rail__lead { flex: 0 0 min(80vw, 420px); }
.crest { flex: 0 0 auto; width: clamp(180px, 22vw, 260px); text-align: center; margin: 0; }
.crest img { width: 100%; height: auto; aspect-ratio: 1; }
.crest figcaption { margin-top: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); }
html:not(.js) .crests { height: auto; padding-block: var(--section-gap-s); }
html:not(.js) .rail { flex-wrap: wrap; }

/* Events: the scene opens edge to edge. */
.scene { position: relative; }
.scene__img { width: 100%; height: clamp(320px, 62vh, 640px); object-fit: cover; }
.scene__copy { padding-top: var(--space-xl); }

/* Marketplace: a plain page. */
.chapter--page .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: end; }
.chapter--page .pull {
  margin-top: 0;
  font-family: var(--font-display);
  font-size: var(--text-section);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  max-width: 20ch;
}

/* Safe by design: four facts. */
.facts { list-style: none; padding: 0; margin: var(--space-2xl) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-2xl); }
.facts li { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.2; padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }

/* ---------- Colophon: where the fox lands ---------- */
.colophon {
  padding-block: var(--section-gap) var(--space-2xl);
  text-align: center;
}
.landing-fox {
  width: clamp(220px, 30vw, 340px);
  aspect-ratio: 1314 / 1199;
  margin: 0 auto var(--space-xl);
}
.colophon h2 {
  font-size: var(--text-display-s);
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
  font-weight: 600;
}
.colophon .lead { margin: var(--space-md) auto 0; max-width: 40ch; color: var(--color-ink-2); font-size: var(--text-lead); }
.colophon .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); margin-top: var(--space-xl); }

/* The reading fox: a fox mark filled bottom-up by --fill (0 to 1). */
.fox-fill { position: relative; display: block; }
.fox-fill::before,
.fox-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask: url("fox-mark.png") center / contain no-repeat;
  mask: url("fox-mark.png") center / contain no-repeat;
}
.fox-fill::before { background: var(--color-paper-3); }
.fox-fill::after {
  background: var(--color-accent);
  clip-path: inset(calc((1 - var(--fill, 1)) * 100%) 0 0 0);
}

/* The folio: chapter name and the reading fox, in the margin. */
.folio {
  position: fixed;
  left: var(--space-lg);
  bottom: var(--space-lg);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-xs);
  border-radius: var(--radius-pill);
  background: var(--color-paper-2);
  box-shadow: 0 8px 24px var(--color-shadow), inset 0 0 0 var(--rule-hair) var(--color-rule);
  color: var(--color-ink);
  font-size: var(--text-sm);
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
  pointer-events: none;
}
.folio .fox-fill { width: 32px; height: 29px; }
html.js .folio { opacity: 0; transform: translateY(var(--space-xs)); }
html.js .folio.is-shown { opacity: 1; transform: none; }
html.js .folio.is-landed { opacity: 0; transform: translateY(var(--space-xs)); }
html:not(.js) .folio { display: none; }

/* ---------- Documents (legal, account deletion, contact) ---------- */
.doc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  padding-top: var(--space-xl);
}
@media (min-width: 75rem) {
  .doc-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--space-2xl); }
  .toc { position: sticky; }
}
.doc-layout--single { grid-template-columns: minmax(0, 1fr); max-width: calc(var(--measure) + var(--gutter) * 2); }
.toc { top: var(--space-xl); align-self: start; font-size: var(--text-sm); }
.toc h2 { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; color: var(--color-muted); }
.toc ol { list-style: none; padding: 0; margin: var(--space-sm) 0 0; display: grid; gap: var(--space-xs); }
.toc a { color: var(--color-muted); text-decoration: none; }
.toc a:hover { color: var(--color-ink); }
.doc { max-width: var(--measure); }
.doc h1 {
  font-size: var(--text-display-s);
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
  font-weight: 600;
}
.doc .meta { margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }
.doc .meta span { display: block; }
.draft {
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-control);
  background: var(--color-paper-2);
  box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule);
  color: var(--color-ink-2);
}
.doc h2 {
  margin-top: var(--space-2xl);
  font-size: var(--text-xl);
  line-height: 1.2;
  font-weight: 600;
  scroll-margin-top: var(--space-xl);
}
.doc p { margin-top: var(--space-sm); max-width: none; }
.doc ul, .doc ol { margin: var(--space-sm) 0 0; padding-left: var(--space-lg); }
.doc li { margin-top: var(--space-xs); }
.doc .steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); margin-top: var(--space-xl); }
.doc .step { padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); }
.doc .step h2 { margin-top: 0; font-size: var(--text-2xl); }
.doc .actions { margin-top: var(--space-lg); }

/* ---------- Footer ---------- */
.site-footer {
  border-top: var(--rule-hair) solid var(--color-rule);
  margin-top: var(--space-3xl);
  padding-block: var(--space-xl) var(--space-2xl);
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.colophon + .site-footer { margin-top: 0; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-bottom: var(--space-md); }
.site-footer a { color: var(--color-muted); }
.site-footer a:hover { color: var(--color-ink); }
.site-footer p { max-width: none; }
.site-footer p + p { margin-top: var(--space-xs); }

/* ---------- Narrow screens ---------- */
@media (max-width: 60rem) {
  .title-page__grid, .spread, .spread--flip { grid-template-columns: minmax(0, 1fr); }
  .spread--flip .spread__text { order: 0; }
  .cover { width: min(100%, 360px); margin-inline: auto; order: -1; }
  .title-page__grid { min-height: 0; padding-top: var(--space-md); }
  .chapter--page .wrap, .facts, .doc .steps { grid-template-columns: minmax(0, 1fr); }
  .cover__ghost { inset: 0; }
  .folio { left: var(--space-md); bottom: var(--space-md); }
}

@media (prefers-reduced-motion: reduce) {
  .folio { transition: none; }
  .panel__ink rect { stroke-dashoffset: 0; }
}