:root {
  --font-display: 'Lora', Georgia, serif;
  --font-body: 'Work Sans', system-ui, sans-serif;

  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --text-xl: clamp(1.625rem, 1.3rem + 1.4vw, 2.5rem);
  --text-2xl: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);

  --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; --space-32: 8rem;

  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-interactive: 180ms var(--ease);

  /* light — from the Comp #1 cover */
  --color-bg: #FBF8EE;
  --color-surface: #FFFDF7;
  --color-surface-2: #F4EEDD;
  --color-text: #2E363E;
  --color-text-muted: #5E6A75;
  --color-slate: #5B6772;
  --color-accent: #E9962B;
  --color-accent-text: #A55E0E;
  --color-primary: #3E4B57;
  --color-on-primary: #FBF8EE;
  --color-border: rgba(62, 75, 87, 0.14);
  --glow: rgba(255, 255, 255, 0.95);
  --shadow: 0 30px 60px -25px rgba(90, 70, 30, 0.35), 0 10px 20px -10px rgba(62, 75, 87, 0.2);
}

[data-theme='dark'] {
  --color-bg: #1A1F24;
  --color-surface: #222830;
  --color-surface-2: #2A313A;
  --color-text: #F1ECDF;
  --color-text-muted: #B3B8B9;
  --color-slate: #AAB6C1;
  --color-accent: #F0A23A;
  --color-accent-text: #F2B25E;
  --color-primary: #F1ECDF;
  --color-on-primary: #1A1F24;
  --color-border: rgba(241, 236, 223, 0.12);
  --glow: rgba(255, 236, 190, 0.12);
  --shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.6);
}

body { background: var(--color-bg); }
.wrap { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }
.section { padding-block: clamp(var(--space-16), 9vw, var(--space-32)); }
.muted { color: var(--color-text-muted); }
.small { font-size: var(--text-xs); }
a { color: inherit; }

.skip { position: absolute; left: -999px; top: 0; background: var(--color-primary); color: var(--color-on-primary); padding: .5rem 1rem; z-index: 99; }
.skip:focus { left: 1rem; }

h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); letter-spacing: -0.01em; color: var(--color-text); }
h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); }

.eyebrow { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.22em; color: var(--color-accent-text); font-weight: 600; margin-bottom: var(--space-4); }
.eyebrow-light { color: #F2C27E; }
.section-lede { color: var(--color-text-muted); margin-top: var(--space-4); max-width: 60ch; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.4rem; border-radius: 999px; font-weight: 500; font-size: var(--text-sm); text-decoration: none; border: 1px solid transparent; }
.btn-sm { min-height: 40px; padding: 0 1rem; }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { background: var(--color-accent-text); }
[data-theme='dark'] .btn-primary:hover { background: var(--color-accent); color: #1A1F24; }
.btn-ghost { border-color: var(--color-border); color: var(--color-text); background: transparent; }
.btn-ghost:hover { border-color: var(--color-accent); color: var(--color-accent-text); }
.btn:active { transform: translateY(1px); }

/* header */
.site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--color-bg) 82%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: 76px; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--color-slate); }
.brand-mark { width: 34px; height: 34px; }
.brand-text { font-family: var(--font-display); font-size: 1.05rem; color: var(--color-text); }
.brand-text i, .footer-brand i { color: var(--color-accent-text); }
.nav { display: flex; gap: var(--space-6); font-size: var(--text-sm); }
.nav a { text-decoration: none; color: var(--color-text-muted); }
.nav a:hover { color: var(--color-text); }
.header-actions { display: flex; align-items: center; gap: var(--space-3); }
.theme-toggle { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--color-text-muted); }
.theme-toggle:hover { color: var(--color-text); background: var(--color-surface-2); }

/* hero */
.hero { position: relative; overflow: hidden; min-height: min(92vh, 860px); display: flex; align-items: center; padding-block: var(--space-16);
  background:
    radial-gradient(circle at 28% 42%, var(--glow) 0, transparent 38%),
    radial-gradient(ellipse at 70% 60%, rgba(233, 150, 43, 0.10), transparent 55%),
    var(--color-bg); }
.hero-rays { position: absolute; inset: -30%; pointer-events: none; opacity: .55;
  background: repeating-conic-gradient(from 0deg at 28% 42%, rgba(214, 196, 150, 0.16) 0deg 2deg, transparent 2deg 7deg);
  -webkit-mask-image: radial-gradient(circle at 28% 42%, transparent 6%, #000 20%, transparent 70%);
          mask-image: radial-gradient(circle at 28% 42%, transparent 6%, #000 20%, transparent 70%); }
[data-theme='dark'] .hero-rays { opacity: .35; }
.hero-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(var(--space-8), 6vw, var(--space-24)); align-items: center; }
.wordmark { width: min(100%, 620px); height: auto; margin-left: -6px; }
.wordmark-text { font-family: 'Work Sans', sans-serif; font-weight: 800; font-size: 180px; letter-spacing: -6px; }
.subtitle { font-family: var(--font-display); font-style: italic; font-size: var(--text-xl); color: var(--color-slate); margin-top: var(--space-2); }
.lede { margin-top: var(--space-6); font-size: var(--text-base); color: var(--color-text-muted); max-width: 52ch; }
.lede em { font-style: italic; color: var(--color-text); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.hero-meta { margin-top: var(--space-6); font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: .04em; }
.hero-cover { justify-self: center; perspective: 1400px; }
.hero-cover img { width: min(360px, 70vw); border-radius: 4px 10px 10px 4px; box-shadow: var(--shadow); transform: rotateY(-8deg) rotateX(2deg); transition: transform 600ms var(--ease); }
.hero-cover:hover img { transform: rotateY(0) rotateX(0); }

/* hook */
.hook { border-block: 1px solid var(--color-border); background: var(--color-surface); }
.hook-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.hook-grid p { padding: var(--space-8) var(--space-6); font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); color: var(--color-slate); text-align: center; margin-inline: auto; }
.hook-grid p + p { border-left: 1px solid var(--color-border); }

/* define */
.define-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-12); align-items: start; }
.define-quote { border-left: 3px solid var(--color-accent); padding-left: var(--space-8); }
.define-quote p { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.5; color: var(--color-text); }
.define-quote footer { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }

/* scenes */
.scenes { background: var(--color-surface-2); }
.scene-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-12); }
.scene { position: relative; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-8) var(--space-6); cursor: pointer; outline: none; transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive); }
.scene-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.scene-num { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-accent); line-height: 1; }
.scene-icon { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 1px solid var(--color-border); }
.scene p { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.scene .scene-means { padding-top: var(--space-3); border-top: 1px solid var(--color-border); color: var(--color-text); }
.scene-means span { display: block; font-size: var(--text-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-text); margin-bottom: var(--space-2); }
.scene .scene-said { font-family: var(--font-display); font-style: italic; color: var(--color-text); }
.scene-full { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #F9F6E1; opacity: 0; transform: scale(1.04); transition: opacity 350ms var(--ease), transform 600ms var(--ease); pointer-events: none; }
.scene:focus-visible { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent); }
.scene:focus-visible .scene-full, .scene.is-open .scene-full { opacity: 1; transform: none; }
@media (hover: hover) { .scene:hover .scene-full { opacity: 1; transform: none; } .scene:hover { box-shadow: var(--shadow); } }

/* parts */
.part-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-12); border-bottom: 1px solid var(--color-border); }
.part-tabs button { padding: var(--space-3) var(--space-4); min-height: 44px; font-size: var(--text-sm); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.part-tabs button:hover { color: var(--color-text); }
.part-tabs button[aria-selected='true'] { color: var(--color-text); border-bottom-color: var(--color-accent); }
.part-panel { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--space-12); padding-top: var(--space-12); animation: fadeIn 500ms var(--ease); }
.part-panel[hidden] { display: none; }
.part-label { font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: .1em; text-transform: uppercase; }
.panel-copy h3 { font-size: var(--text-2xl); font-weight: 500; margin: var(--space-2) 0 var(--space-6); }
.panel-copy > p:not(.part-label) { color: var(--color-text-muted); }
.part-quote { margin-top: var(--space-8); font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); color: var(--color-accent-text); }
.chapters { display: grid; gap: 0; align-content: start; }
.chapters li { display: flex; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); font-family: var(--font-display); font-size: var(--text-base); max-width: none; }
.chapters li span { min-width: 2ch; color: var(--color-accent-text); font-family: var(--font-body); font-size: var(--text-sm); font-variant-numeric: tabular-nums; padding-top: 2px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* evergreen */
.evergreen { position: relative; min-height: min(78vh, 760px); display: grid; place-items: center; overflow: hidden; isolation: isolate; color: #F6F1E6; }
.evergreen-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.evergreen::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 34, 28, .78), rgba(14, 34, 28, .55) 45%, rgba(14, 34, 28, .85)); }
.evergreen-inner { text-align: center; display: grid; justify-items: center; padding-block: var(--space-24); }
.evergreen blockquote p { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.3; max-width: 26ch; margin-inline: auto; }

/* excerpt */
.excerpt-grid { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: var(--space-12); }
.excerpt-head { position: sticky; top: 100px; align-self: start; }
.excerpt-head .muted { margin-top: var(--space-6); font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); }
.excerpt-body { position: relative; font-family: var(--font-display); font-size: var(--text-base); line-height: 1.8; }
.excerpt-body p + p { margin-top: var(--space-6); }
.dropcap::first-letter { float: left; font-size: 4.2em; line-height: .85; padding: .08em .1em 0 0; color: var(--color-accent-text); }
.excerpt-fade { height: 80px; margin-top: -80px; position: relative; background: linear-gradient(transparent, var(--color-bg)); }
.excerpt-body .btn { margin-top: var(--space-6); font-family: var(--font-body); }

/* author */
.author { background: var(--color-surface); border-block: 1px solid var(--color-border); }
.author-grid { display: grid; grid-template-columns: 0.6fr 1.4fr; gap: var(--space-12); align-items: center; }
.author-mark { color: var(--color-slate); text-align: center; }
.author-mark svg { width: min(240px, 60vw); margin-inline: auto; }
.photo-note { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); max-width: none; }
.author h2 { margin-bottom: var(--space-6); }
.author p + p { margin-top: var(--space-4); }
.author p:not(.eyebrow) { color: var(--color-text-muted); }

/* groups */
.groups-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-12); align-items: start; }
.groups-grid > div p { color: var(--color-text-muted); margin: var(--space-4) 0 var(--space-8); }
.question-cards { display: grid; gap: var(--space-4); }
.question-cards li { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.45; max-width: none; }
.question-cards span { display: block; font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent-text); margin-bottom: var(--space-2); }

/* join */
.join { background:
    radial-gradient(circle at 50% 0%, var(--glow), transparent 60%),
    var(--color-surface-2); text-align: center; }
.join-inner { max-width: 720px; }
.join-inner h2 { font-size: var(--text-2xl); }
.join-inner > p { margin: var(--space-4) auto 0; color: var(--color-text-muted); }
.join-form { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-8); }
.join-form input { min-height: 48px; padding: 0 1.1rem; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); flex: 1 1 200px; max-width: 260px; }
.join-form input:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.join-embed { margin: var(--space-8) auto 0; width: 100%; max-width: 480px; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--color-border); box-shadow: 0 18px 40px -24px rgba(40,40,30,.45); }
.join-embed iframe { display: block; width: 100%; height: 320px; border: 0; background: #fff; }
.join .fine a { color: var(--color-accent-text); }
.form-msg { min-height: 1.6em; margin: var(--space-4) auto 0; color: var(--color-accent-text); font-weight: 500; }
.fine { font-size: var(--text-xs); color: var(--color-text-muted); margin: var(--space-2) auto 0; }

/* footer */
.site-footer { padding-block: var(--space-12); border-top: 1px solid var(--color-border); }
.footer-inner { display: flex; flex-wrap: wrap; gap: var(--space-6); justify-content: space-between; align-items: end; font-size: var(--text-sm); }
.footer-brand { font-family: var(--font-display); font-size: 1.1rem; }

/* reveal */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* responsive */
@media (max-width: 960px) {
  .nav { display: none; }
  .hero-grid, .define-grid, .part-panel, .excerpt-grid, .author-grid, .groups-grid { grid-template-columns: 1fr; }
  .hero-cover { order: -1; }
  .hero-cover img { width: min(240px, 60vw); }
  .scene-list { grid-template-columns: repeat(2, 1fr); }
  .excerpt-head { position: static; }
  .hero { min-height: auto; }
}
@media (max-width: 640px) {
  .hook-grid { grid-template-columns: 1fr; }
  .hook-grid p + p { border-left: 0; border-top: 1px solid var(--color-border); }
  .scene-list { grid-template-columns: 1fr; }
  .header-actions .btn-sm { display: none; }
  .wordmark-text { letter-spacing: -4px; }
}

/* Legends & Wonders logo */
.logo { height: 62px; width: auto; }
.footer-logo { height: 132px; width: auto; margin-bottom: var(--space-3); }
.logo-light { display: none; }
[data-theme='dark'] .logo-dark { display: none; }
[data-theme='dark'] .logo-light { display: block; }
.brand:hover .logo { opacity: .8; }
@media (max-width: 640px) { .logo { height: 48px; } }

.lede-2 { margin-top: var(--space-4); font-size: var(--text-base); }
.truth-def { font-family: var(--font-display); font-style: italic; color: var(--color-slate) !important; font-size: var(--text-lg); margin-bottom: var(--space-4); }
.author-photo { margin: 0; justify-self: center; }
.author-photo img { width: min(260px, 70vw); height: auto; border-radius: var(--radius-lg, 12px); box-shadow: 0 18px 40px -18px rgba(40,40,30,.45); display: block; }

/* part icons from the book */
.part-icon { display: inline-block; width: 1.15em; height: 1.15em; flex: none; background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.icon-encounter { -webkit-mask-image: url('./assets/icons/encounter.webp'); mask-image: url('./assets/icons/encounter.webp'); }
.icon-identity { -webkit-mask-image: url('./assets/icons/identity.webp'); mask-image: url('./assets/icons/identity.webp'); }
.icon-restoration { -webkit-mask-image: url('./assets/icons/restoration.webp'); mask-image: url('./assets/icons/restoration.webp'); }
.icon-kingship { -webkit-mask-image: url('./assets/icons/kingship.webp'); mask-image: url('./assets/icons/kingship.webp'); }
.icon-honor { -webkit-mask-image: url('./assets/icons/honor.webp'); mask-image: url('./assets/icons/honor.webp'); }
.part-tabs button { display: inline-flex; align-items: center; gap: .5em; }
.part-tabs button .part-icon { opacity: .7; }
.part-tabs button[aria-selected='true'] .part-icon { color: var(--color-accent); opacity: 1; }
.part-title { display: flex; align-items: center; gap: .4em; }
.part-title .part-icon { color: var(--color-accent); width: .95em; height: .95em; }