/* The Dune Series - shared page skeleton.
   Pages speak ONLY role variables here (--bg, --kw, ...); each page's
   :root maps its lore-named palette onto these and may override the
   optional slots:
     --accent       kicker color            (default: --kw)
     --rule-accent  masthead rule gradient  (default: --accent, --kw)
     --op           operators/punctuation   (default: --fg-dim)
     --fn-call      call sites              (default: --fn)
     --ty-builtin   builtin types           (default: --ty)
     --kw-weight    keyword font weight     (default: 400)
   Page-specific flourishes live in each page's own <style>, after this
   sheet in the cascade. */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg-dim); color: var(--fg-dim); font-family: 'Crimson Pro', Georgia, serif; font-size: 1.15rem; line-height: 1.65; }
::selection { background: var(--overlay); color: var(--fg); }

.series { position: sticky; top: 0; z-index: 10; text-align: center; padding: 1.1rem 1.5rem 0.9rem; font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); background: color-mix(in srgb, var(--bg-dim) 85%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.series b { color: var(--kw); font-weight: 500; }
.series a { color: inherit; text-decoration: none; }
.series a:hover { color: var(--series-hover); }

.hero { position: relative; }
.hero svg, .hero img { display: block; width: 100%; height: 65vh; object-fit: cover; object-position: center; }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 90px; background: linear-gradient(180deg, transparent, var(--bg-dim)); pointer-events: none; }
.hero-caption { position: absolute; right: 1.5rem; bottom: 1rem; z-index: 1; font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.08em; color: var(--fg); opacity: 0.45; }
.hero-caption a { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }

.masthead { text-align: center; padding: 3.5rem 1.5rem 1rem; }
.masthead h1 { font-family: 'Marcellus', serif; font-weight: 400; font-size: clamp(2.4rem, 7vw, 4.6rem); letter-spacing: 0.32em; text-indent: 0.32em; color: var(--fg); }
.masthead p.tagline { margin-top: 0.6rem; font-style: italic; color: var(--muted); font-size: 1.1rem; }
.rule { width: 72px; height: 2px; margin: 1.6rem auto 0; background: linear-gradient(90deg, transparent, var(--rule-accent, var(--accent, var(--kw))), transparent); }

main { max-width: 860px; margin: 0 auto; padding: 0 1.5rem 5rem; }
section { margin-top: 4.5rem; }
h2 { font-family: 'Marcellus', serif; font-weight: 400; font-size: 1.5rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg); margin-bottom: 0.4rem; }
.kicker { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent, var(--kw)); display: block; margin-bottom: 0.5rem; }
.story p + p { margin-top: 1rem; }
.story em { color: var(--fg); }

/* strata bar - the full palette as sediment layers */
.strata { margin-top: 2.2rem; border-radius: 10px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,0.5); }
.strata .layer { display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; height: 34px; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.06em; }
.strata .layer span:last-child { opacity: 0.75; }
.l-dark { color: var(--fg-dim); }
.l-light { color: var(--bg-dim); }

/* swatch grid */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.6rem; }
.swatch { background: var(--bg); border: 1px solid var(--surface); border-radius: 10px; overflow: hidden; transition: transform 0.18s ease, border-color 0.18s ease; }
.swatch:hover { transform: translateY(-3px); border-color: var(--overlay); }
.swatch .chip { height: 74px; position: relative; }
.swatch .chip::after { content: ""; position: absolute; inset: auto 0 0 0; height: 18px; background: radial-gradient(120% 100% at 50% 130%, color-mix(in srgb, var(--bg-dim) 55%, transparent), transparent 70%); }
.swatch .meta { padding: 0.85rem 1rem 1rem; }
.swatch .name { font-family: 'Marcellus', serif; color: var(--fg); font-size: 1.06rem; letter-spacing: 0.04em; }
.swatch .hex { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--muted); margin-left: 0.4rem; }
.swatch .role { font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 0.35rem; }
.swatch .lore { font-size: 0.98rem; font-style: italic; color: var(--muted); margin-top: 0.45rem; line-height: 1.45; }

/* code preview */
.editor { margin-top: 1.8rem; background: var(--bg); border: 1px solid var(--surface); border-radius: 12px; overflow: hidden; box-shadow: 0 16px 48px rgba(0,0,0,0.55); }
.editor .bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; background: var(--bg-dim); border-bottom: 1px solid var(--surface); font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: var(--muted); }
.editor .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--surface); }
.editor .dot.r { background: var(--err); opacity: 0.8; }
.editor .dot.y { background: var(--num); opacity: 0.8; }
.editor .dot.g { background: var(--add); opacity: 0.8; }
.editor pre { padding: 1.2rem 1.3rem; overflow-x: auto; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; line-height: 1.7; color: var(--fg); }

/* syntax tokens */
.tk-kw  { color: var(--kw); font-weight: var(--kw-weight, 400); }
.tk-fn  { color: var(--fn); }
.tk-fnc { color: var(--fn-call, var(--fn)); }
.tk-fng { color: var(--fn-call, var(--fn)); }
.tk-ty  { color: var(--ty); }
.tk-tyg { color: var(--ty-builtin, var(--ty)); }
.tk-op  { color: var(--op, var(--fg-dim)); }
.tk-st  { color: var(--str); }
.tk-nu  { color: var(--num); }
.tk-ct  { color: var(--num); }
.tk-cm  { color: var(--muted); font-style: italic; }
.tk-es  { color: var(--special); }
.tk-er  { color: var(--err); text-decoration: underline wavy; text-underline-offset: 3px; }
.tk-ex  { color: var(--err); }
.tk-vb  { color: var(--special); font-style: italic; }

footer { text-align: center; padding: 2.5rem 1.5rem 3.5rem; border-top: 1px solid var(--surface); font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.1em; color: var(--muted); }

.redact { cursor: default; }
a .redact { cursor: pointer; }
.redact .t { display: none; }
.redact:hover .g { display: none; }
.redact:hover .t { display: inline; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .swatch { transition: none; }
}