/* ==========================================================================
   Design tokens — "Enso" (Japanese ink-wash)
   Change values here; nothing below this block should hardcode a color,
   font, or spacing value.
   ========================================================================== */
:root {
  color-scheme: light;

  /* Palette */
  --color-parchment: #F0E6D2; /* backgrounds */
  --color-paper:     #F8F0DE; /* warmer than parchment — the question flow's notebook input */
  --color-ink:       #1A1A18; /* primary text */
  --color-crimson:   #9B2226; /* accent — one thing per screen */
  --color-ash:       #6B6459; /* secondary text */
  --color-mist:      #D8CDB8; /* dividers, subtle fills */
  --color-mist-dark: #BFB194; /* mist, darkened — rules/lines that need to read against parchment */

  /* Type */
  --font-display: 'Yuji Syuku', serif;            /* brush-ink H1 — main title, saga chapter heading */
  --font-heading-secondary: 'Caudex', serif;      /* H2/H3 — questions, subtitles, button text */
  --font-body: 'EB Garamond', serif;              /* readable literary serif — body copy, saga story body */
  --font-cursive: 'Caveat', cursive;              /* quiet handwritten aside — question flow suggestions only */

  /* Type scale multipliers — driven by the admin panel, 1 = default */
  --heading-scale: 1;
  --body-scale: 1;

  /* Texture — driven by the admin panel */
  --grain-frequency: 0.85;  /* feTurbulence baseFrequency; lower = coarser grain */
  --grain-opacity: 0.05;
  --vignette-alpha: 0.06;   /* darkness at the very edge */
  --vignette-inner: 45%;    /* how far in the darkening starts */

  /* Scale — mobile-first, fluid via clamp() */
  --size-title: clamp(2.75rem, 14vw, 4.5rem);
  --size-lede:  clamp(1.125rem, 4.4vw, 1.375rem);
  --size-cta:   clamp(1.05rem, 4vw, 1.2rem);
  --size-quiet: clamp(0.875rem, 3.2vw, 0.95rem);

  /* Rhythm */
  --measure: 34ch;             /* comfortable line length on mobile */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 2.75rem;
}

/* ==========================================================================
   Reset (minimal)
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
}

/* ==========================================================================
   Page surface — parchment, grain, vignette
   ========================================================================== */
body {
  background-color: var(--color-parchment);
  color: var(--color-ink);
  font-family: var(--font-body);
  position: relative;
  overflow-x: hidden;
}

/* Paper grain: SVG fractal noise (filter defined inline in each page's
   markup, coarseness controlled by --grain-frequency via the admin panel) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
  filter: url(#grainFilter);
}

/* Vignette: soft darkening toward the edges, ink-wash restraint */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(
    ellipse at center,
    transparent var(--vignette-inner),
    rgba(26, 26, 24, var(--vignette-alpha)) 100%
  );
}

/* ==========================================================================
   Hero — the entire page, one screen tall on mobile
   ========================================================================== */
.hero {
  position: relative;
  z-index: 3;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-4) var(--space-3);
}

/* The recurring SA/GA hanko mark — see design.md. Sits below everything
   else, closing the page out rather than introducing it. */
.hero__mark {
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  margin: var(--space-4) 0 0;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(var(--size-title) * var(--heading-scale));
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  -webkit-text-fill-color: var(--color-ink);
  margin: 0 0 var(--space-3);
  max-width: 12ch;
}

.hero__lede {
  font-size: calc(var(--size-lede) * var(--body-scale));
  line-height: 1.6;
  color: var(--color-ash);
  -webkit-text-fill-color: var(--color-ash);
  max-width: var(--measure);
  margin: 0 0 var(--space-4);
}

.hero__cta {
  display: inline-block;
  font-family: var(--font-heading-secondary);
  font-size: var(--size-cta);
  font-style: italic;
  color: var(--color-parchment);
  -webkit-text-fill-color: var(--color-parchment);
  text-decoration: none;
  background: var(--color-crimson);
  padding: 0.6em 1.3em;
  transition: opacity 0.2s ease, transform 0.1s ease;
}

.hero__cta:hover,
.hero__cta:focus-visible {
  opacity: 0.85;
}

.hero__cta:active {
  transform: scale(0.97);
}

.hero__quiet {
  font-size: calc(var(--size-quiet) * var(--body-scale));
  color: var(--color-ash);
  -webkit-text-fill-color: var(--color-ash);
  margin: var(--space-3) 0 0;
}

.hero__archive-block {
  margin: var(--space-4) 0 0;
}

.hero__archive-label {
  font-family: var(--font-heading-secondary);
  font-weight: 700;
  font-size: calc(var(--size-lede) * var(--body-scale));
  color: var(--color-ink);
  -webkit-text-fill-color: var(--color-ink);
  margin: 0 0 var(--space-2);
}

/* ==========================================================================
   Site footer — quiet, out of the way of the one call to action
   ========================================================================== */
.site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--space-2);
  z-index: 5;
  text-align: center;
  font-size: calc(var(--size-quiet) * var(--body-scale));
  line-height: 1.7;
  color: var(--color-ash);
  -webkit-text-fill-color: var(--color-ash);
}

.site-footer a {
  font-size: inherit;
  color: var(--color-ash);
  -webkit-text-fill-color: var(--color-ash);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  opacity: 0.7;
}

.site-footer__sep {
  margin: 0 0.5em;
  color: var(--color-mist-dark);
  -webkit-text-fill-color: var(--color-mist-dark);
}

/* A footer action that isn't a navigation link (e.g. "Remove my data") —
   same look as the <a> links beside it, reused wherever a footer needs one
   (site-footer, saga-after__footer). Reads identically, but a <button>
   since it does something rather than going somewhere. appearance:none
   strips the native button chrome Safari/iOS otherwise keeps even with
   background/border set to none. */
.footer-action {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
  -webkit-text-fill-color: inherit;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.footer-action:hover,
.footer-action:focus-visible {
  opacity: 0.7;
}

/* ==========================================================================
   Archive — other chapters, as book covers. Shared between the landing
   page (read-only browsing) and the saga screen (adds a current-chapter
   mark) — see archive.js for the rendering, saga.css for the saga
   screen's own after-reveal layout. Roughly playing-card proportions,
   three sit comfortably side by side at 380px.
   ========================================================================== */
.saga__archive {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  max-width: var(--saga-measure, var(--measure));
  margin: var(--space-4) auto 0;
}

.saga__archive[hidden] {
  display: none;
}

/* The cover itself is a plain, non-interactive card — it holds two separate
   buttons (select, delete) rather than being a button itself, since a
   button can't contain another button. See archive.js's renderCovers. */
.saga__archive-cover {
  position: relative;
  flex: 1 1 0;
  max-width: 8.5rem;
  aspect-ratio: 5 / 7;
  background:
    linear-gradient(180deg, rgba(26, 26, 24, 0.02), rgba(26, 26, 24, 0.07)),
    color-mix(in srgb, var(--color-mist-dark) 68%, var(--color-parchment) 32%);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.saga__archive-cover::before {
  /* spine edge */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 5px;
  background: color-mix(in srgb, var(--color-mist-dark) 55%, var(--color-ink) 45%);
  pointer-events: none;
}

/* :hover/:focus-within on the card (not just the select button) so the
   whole card lifts together, whichever part triggered it. */
.saga__archive-cover:hover,
.saga__archive-cover:focus-within {
  transform: translateY(-2px);
}

/* Fills almost the entire card — the large, forgiving tap target for
   switching chapters. Sits below the delete button in stacking order. */
.saga__archive-cover-select {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0.7em 0.6em 0.6em 0.9em;
}

.saga__archive-cover--current .saga__archive-cover-select {
  cursor: default;
}

/* Small, cornered, and visually quiet by default — deliberately not sized
   or placed to compete with the select button underneath it, so switching
   chapters doesn't risk deleting one by accident. */
.saga__archive-cover-delete {
  position: absolute;
  top: 0.35em;
  right: 0.35em;
  z-index: 2;
  width: 1.6rem;
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--color-ash);
  -webkit-text-fill-color: var(--color-ash);
  background: color-mix(in srgb, var(--color-parchment) 80%, transparent);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.saga__archive-cover-delete:hover,
.saga__archive-cover-delete:focus-visible {
  opacity: 1;
  background: var(--color-parchment);
}

.saga__archive-cover--current .saga__archive-cover-delete {
  color: color-mix(in srgb, var(--color-parchment) 85%, white 15%);
  -webkit-text-fill-color: color-mix(in srgb, var(--color-parchment) 85%, white 15%);
  background: color-mix(in srgb, var(--color-crimson) 55%, black 20%);
}

.saga__archive-cover--current .saga__archive-cover-delete:hover,
.saga__archive-cover--current .saga__archive-cover-delete:focus-visible {
  opacity: 1;
  background: color-mix(in srgb, var(--color-crimson) 40%, black 35%);
}

.saga__archive-cover-title {
  font-family: var(--font-display);
  font-size: calc(1rem * var(--body-scale));
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  -webkit-text-fill-color: var(--color-ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.saga__archive-cover-num {
  margin-top: 0.4em;
  font-family: var(--font-heading-secondary);
  font-style: italic;
  font-size: calc(0.7rem * var(--body-scale));
  color: var(--color-ash);
  -webkit-text-fill-color: var(--color-ash);
}

/* The chapter currently being read gets the one crimson cover on the
   screen (saga screen only — opts.isCurrent is never set on the landing
   page, so its covers are always the quiet, unread style). */
.saga__archive-cover--current {
  cursor: default;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.08)),
    var(--color-crimson);
  transform: translateY(-6px);
  box-shadow: 0 6px 14px -8px rgba(26, 26, 24, 0.45);
}

.saga__archive-cover--current::before {
  background: color-mix(in srgb, var(--color-crimson) 60%, black 30%);
}

.saga__archive-cover--current .saga__archive-cover-title {
  color: var(--color-parchment);
  -webkit-text-fill-color: var(--color-parchment);
}

.saga__archive-cover--current .saga__archive-cover-num {
  color: color-mix(in srgb, var(--color-parchment) 80%, white 20%);
  -webkit-text-fill-color: color-mix(in srgb, var(--color-parchment) 80%, white 20%);
}

@media (prefers-reduced-motion: reduce) {
  .saga__archive-cover,
  .saga__archive-cover-delete {
    transition: none;
  }
}

/* ==========================================================================
   Larger screens — scale up, keep composition centered and restrained
   ========================================================================== */
@media (min-width: 640px) {
  .hero__title {
    max-width: 16ch;
  }

  .saga__archive {
    max-width: 62ch;
  }
}

@media (min-width: 900px) {
  .saga__archive {
    max-width: 78ch;
  }
}