/* ==========================================================================
   Base: reset, paper texture, typography, scrollbars
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--parchment);
  /* Layered subtle grain + faint constellation wash on the paper. */
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(154, 122, 47, 0.10) 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 60%, rgba(154, 122, 47, 0.08) 50%, transparent 51%),
    radial-gradient(1px 1px at 85% 20%, rgba(154, 122, 47, 0.08) 50%, transparent 51%),
    radial-gradient(1200px 800px at 110% -10%, rgba(199, 155, 67, 0.10), transparent 60%),
    radial-gradient(900px 700px at -10% 110%, rgba(74, 99, 148, 0.08), transparent 55%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Aged parchment scroll texture — desktop + mobile
   Layered over the flat --parchment color to read as a worn manuscript scroll:
     1. a fine fibrous grain (anisotropic fractal noise = horizontal fibres)
     2. a finer isotropic speckle
     3. a luminous cream highlight lifting the centre
     4. warm darkening down the left/right (rolled scroll) edges
     5. lighter warm darkening along the top/bottom edges
     6. a strong warm golden-tan vignette from centre to corners
     7. mottled corner/edge staining (irregular warm blotches)
     8. two gentle "wrinkle" creases (broad soft light/shadow bands)
     9. large-scale organic patchy staining (fractal-noise blotches)
   -------------------------------------------------------------------------- */
:root {
  --paper-fibre:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='fib'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014 0.55' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.30 0 0 0 0 0.22 0 0 0 0 0.10 0.15 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23fib)'/%3E%3C/svg%3E");
  --paper-grain:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='grn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.26 0 0 0 0 0.19 0 0 0 0 0.09 0.09 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grn)'/%3E%3C/svg%3E");
  /* Large-scale patchy staining: low-frequency noise with a steep, negatively
     offset alpha so only the high spots show as irregular warm blotches. */
  --paper-stain:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='stn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.015 0.018' numOctaves='4' seed='23' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.40 0 0 0 0 0.29 0 0 0 0 0.13 1.6 0 0 0 -0.98'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23stn)'/%3E%3C/svg%3E");

  /* Layer order = top -> bottom. Aged-scroll look: a clean, luminous cream
     centre that darkens into strong warm golden-tan edges. */
  --paper-texture:
    var(--paper-fibre),
    var(--paper-grain),
    radial-gradient(120% 104% at 50% 40%, rgba(255, 251, 240, 0.62), rgba(255, 250, 238, 0.20) 32%, transparent 56%),
    linear-gradient(90deg, rgba(150, 108, 50, 0.40), rgba(150, 108, 50, 0.06) 11%, transparent 22%, transparent 78%, rgba(150, 108, 50, 0.06) 89%, rgba(150, 108, 50, 0.40)),
    linear-gradient(180deg, rgba(150, 108, 50, 0.24), transparent 12%, transparent 88%, rgba(150, 108, 50, 0.24)),
    radial-gradient(142% 130% at 50% 45%, transparent 40%, rgba(180, 136, 68, 0.26) 74%, rgba(148, 106, 48, 0.48) 100%),
    radial-gradient(34% 30% at 8% 12%, rgba(120, 82, 34, 0.16), transparent 62%),
    radial-gradient(32% 34% at 94% 20%, rgba(104, 72, 30, 0.16), transparent 62%),
    radial-gradient(36% 32% at 90% 90%, rgba(96, 66, 28, 0.18), transparent 60%),
    radial-gradient(34% 34% at 10% 88%, rgba(110, 76, 32, 0.16), transparent 60%),
    radial-gradient(30% 26% at 50% 96%, rgba(96, 66, 28, 0.13), transparent 62%),
    linear-gradient(101deg, rgba(70, 50, 20, 0.05), transparent 22%, transparent 55%, rgba(255, 250, 235, 0.05) 62%, transparent 80%),
    linear-gradient(70deg, transparent 30%, rgba(255, 250, 235, 0.045) 44%, transparent 58%, rgba(70, 50, 20, 0.045) 72%, transparent 88%),
    var(--paper-stain);

  --paper-texture-size:
    240px 240px, 140px 140px,
    auto, auto, auto, auto,
    auto, auto, auto, auto, auto,
    auto, auto,
    700px 700px;

  --paper-texture-repeat:
    repeat, repeat,
    no-repeat, no-repeat, no-repeat, no-repeat,
    no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
    no-repeat, no-repeat,
    repeat;
}

body,
body #page-studio.page {
  background-color: var(--parchment);
  background-image: var(--paper-texture);
  background-size: var(--paper-texture-size);
  background-repeat: var(--paper-texture-repeat);
  background-position: 0 0;
  background-attachment: fixed;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
  letter-spacing: 0.01em;
}

p { margin: 0 0 0.8em; }

a {
  color: var(--gold-deep);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

button {
  font-family: var(--font-ui);
  cursor: pointer;
}

input, textarea, select {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

::selection {
  background: var(--gold-glow);
  color: var(--ink);
}

/* Scrollbars — thin and unobtrusive on both surfaces */
* { scrollbar-width: thin; scrollbar-color: var(--parchment-edge) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--parchment-edge);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.on-night *::-webkit-scrollbar-thumb,
.night-scroll::-webkit-scrollbar-thumb { background: var(--night-line); background-clip: content-box; }

.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;
}

.hidden { display: none !important; }

/* Reusable star divider */
.starline {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink-faint); font-family: var(--font-ui);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
}
.starline::before, .starline::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--parchment-edge), transparent);
}