@font-face { font-family: 'Fell'; src: url('/fonts/im-fell-english-latin-400-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Fell'; font-style: italic; src: url('/fonts/im-fell-english-latin-400-italic.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Hanken'; font-weight: 400; src: url('/fonts/hanken-grotesk-latin-400-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Hanken'; font-weight: 500; src: url('/fonts/hanken-grotesk-latin-500-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Hanken'; font-weight: 600; src: url('/fonts/hanken-grotesk-latin-600-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Hanken'; font-weight: 700; src: url('/fonts/hanken-grotesk-latin-700-normal.woff2') format('woff2'); font-display: swap; }

:root {
  --night: #201b17;
  --night-2: #2c251f;
  --moss: #e3e5da;
  --moss-2: #d4d8c8;
  --ink: #2f2f2b;
  --ink-soft: #55554d;
  --gold: #8f6418;
  --gold-bright: #e5b556;
  --glow: #f6d98b;
  --bone: #ede6d8;
  --bone-soft: #bdb4a4;
  --display: 'Fell', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --body: 'Hanken', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pad: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--moss); color: var(--ink); font: 400 1.0625rem/1.6 var(--body); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-color: var(--gold-bright); text-decoration-thickness: 2px; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; letter-spacing: -0.005em; }
h1 { font-size: clamp(3.4rem, 7.4vw, 6.6rem); line-height: 0.92; }
h2 { font-size: clamp(2.3rem, 4.8vw, 3.9rem); line-height: 1; }
h3 { font-size: 1.75rem; line-height: 1.1; }
p { margin: 0 0 1em; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--pad); }
.dark { background: var(--night); color: var(--bone); }
.dark a { text-decoration-color: var(--gold-bright); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--gold-bright); color: var(--night); padding: 8px 14px; z-index: 50; }
.skip:focus { left: 8px; }
.opt { color: var(--ink-soft); font-weight: 400; }
.dark .opt { color: var(--bone-soft); }

/* the shared WebGL canvas sits above section backgrounds, below overlays */
.gl-stage { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 1; }
.stage { position: relative; }
.no-gl-img { display: none; }
.no-gl .no-gl-img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; background: var(--gold-bright); color: var(--night); border: 0; border-radius: 3px; padding: 14px 22px; font: 600 1rem/1 var(--body); text-decoration: none; cursor: pointer; transition: background .15s, transform .15s; }
.btn:hover { background: var(--glow); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn-ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn-ghost:hover { background: rgba(229, 181, 86, .14); }
.btn-small { padding: 10px 16px; font-size: .95rem; }

/* header */
.site-head { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px var(--pad); background: rgba(227, 229, 218, .94); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(47, 47, 43, .12); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 400 1.7rem/1 var(--display); }
.brand img { width: 40px; height: 40px; }
.site-head nav { display: flex; align-items: center; gap: clamp(12px, 2.2vw, 28px); font-weight: 500; }
.site-head nav a:not(.btn) { text-decoration: none; }
.site-head nav a:not(.btn):hover { text-decoration: underline; text-decoration-color: var(--gold-bright); }
@media (max-width: 760px) {
  .site-head nav a:not(.btn) { display: none; }
  .brand { font-size: 1.45rem; }
}

/* hero */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); grid-template-rows: auto 1fr; grid-template-areas: "copy stage" "cast stage";
  min-height: calc(100vh - 61px); overflow: hidden; column-gap: 24px;
  background: radial-gradient(55% 75% at 74% 45%, rgba(229, 181, 86, .17), transparent 70%), var(--night); }
.hero-copy { grid-area: copy; position: relative; z-index: 2; padding: clamp(36px, 6vh, 80px) 0 0 var(--pad); max-width: 660px; }
.hero h1 { color: var(--bone); margin-bottom: 24px; }
.lede { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.5; color: var(--bone); max-width: 32ch; margin-bottom: 28px; }
#hero-stage { grid-area: stage; align-self: start; height: calc(100vh - 61px); min-height: 560px; max-height: 1100px; }
.cast-panel { grid-area: cast; position: relative; z-index: 2; padding: 0 0 40px var(--pad); max-width: 660px; }
.cast-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.mic { display: inline-flex; align-items: center; gap: 10px; background: var(--bone); color: var(--night); border: 0; border-radius: 999px; padding: 12px 20px 12px 14px; font: 600 1rem/1 var(--body); cursor: pointer; }
.mic svg { width: 22px; height: 22px; }
.mic.on { background: var(--gold-bright); animation: listen 1.2s ease-in-out infinite; }
@keyframes listen { 50% { box-shadow: 0 0 0 10px rgba(229, 181, 86, .18); } }
.or { color: var(--bone-soft); font-size: .95rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { font: italic 400 1.2rem/1 var(--display); color: var(--bone); background: transparent; border: 1px solid rgba(237, 230, 216, .3); border-radius: 999px; padding: 8px 14px 9px; cursor: pointer; transition: border-color .15s, color .15s; }
.chips button:hover, .chips button[aria-pressed="true"] { border-color: var(--spell); color: var(--spell); }
.cast-card { margin-top: 22px; min-height: 250px; border-left: 2px solid var(--spell, var(--gold-bright)); padding: 2px 0 2px 20px; }
.cast-card.show { animation: unfurl .5s ease-out both; }
@keyframes unfurl { from { opacity: 0; transform: translateY(6px); } }
.cast-word { font: italic 400 2.4rem/1 var(--display); color: var(--spell, var(--gold-bright)); margin-bottom: 6px; }
.cast-title { font-weight: 600; margin-bottom: 2px; }
.cast-does { color: var(--bone-soft); max-width: 46ch; }
.cast-steps { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 4px; }
.cast-steps li { position: relative; padding-left: 26px; color: rgba(237, 230, 216, .38); transition: color .3s; }
.cast-steps li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(237, 230, 216, .35); transition: all .3s; }
.cast-steps li.done { color: var(--bone); }
.cast-steps li.done::before { background: var(--spell); border-color: var(--spell); box-shadow: 0 0 10px var(--spell); }
.cast-conn { font-size: .9rem; color: var(--bone-soft); margin-bottom: 6px; }
.cast-foot { font-size: .95rem; color: var(--bone-soft); margin: 0; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "copy" "stage" "cast"; min-height: 0; }
  .hero-copy { padding: 36px var(--pad) 0; }
  .lede { margin-bottom: 0; }
  #hero-stage { min-height: 0; height: 58vh; }
  .cast-panel { padding: 0 var(--pad) 40px; }
}

/* sections */
section { padding: clamp(72px, 10vw, 136px) 0; }
.hero { padding: 0; }
.section-lede { font-size: 1.2rem; max-width: 56ch; color: var(--ink-soft); margin-top: 18px; }
.dark .section-lede { color: var(--bone-soft); }

/* what a spell is */
.spell-parts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); margin: 56px 0 64px; }
.part { border-top: 2px solid var(--ink); padding-top: 18px; }
.part h3 { margin-bottom: 10px; }
.part em { font-family: var(--display); font-size: 1.15em; }
.scroll-demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px 40px; align-items: start; }
.scroll-word { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; }
.scroll-word .say { color: var(--ink-soft); }
.scroll-word .word { font: italic 400 clamp(3rem, 6vw, 5rem)/1 var(--display); color: var(--gold); }
.scroll { margin: 0; white-space: pre-wrap; font: 400 1.05rem/1.7 var(--body); background: var(--moss-2); padding: 28px 32px; border-radius: 2px; border-left: 3px solid var(--gold); }
.scroll-foot { grid-column: 2; color: var(--ink-soft); max-width: 60ch; }
@media (max-width: 820px) {
  .spell-parts { grid-template-columns: 1fr; }
  .scroll-demo { grid-template-columns: 1fr; }
  .scroll-foot { grid-column: 1; }
}

/* writer */
.writer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.writer-intro > p { color: var(--bone-soft); margin: 18px 0 28px; max-width: 44ch; }
.writer-form { display: grid; gap: 10px; }
.writer-form label { font-weight: 600; margin-top: 8px; }
input, textarea, select { font: 400 1.05rem/1.4 var(--body); color: var(--ink); background: #f7f6f0; border: 1.5px solid rgba(47, 47, 43, .25); border-radius: 3px; padding: 12px 14px; width: 100%; }
.dark input, .dark textarea { background: var(--night-2); color: var(--bone); border-color: rgba(237, 230, 216, .25); }
.dark input::placeholder, .dark textarea::placeholder { color: rgba(237, 230, 216, .4); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--gold-bright); box-shadow: 0 0 0 3px rgba(229, 181, 86, .3); }
textarea { resize: vertical; }
.ideas { display: flex; flex-wrap: wrap; gap: 8px; }
.ideas button { background: transparent; color: var(--bone-soft); border: 1px dashed rgba(237, 230, 216, .3); border-radius: 3px; padding: 6px 10px; font: 400 .92rem/1.2 var(--body); cursor: pointer; }
.ideas button:hover { color: var(--bone); border-color: var(--gold-bright); }
.writer-form .btn { justify-self: start; margin-top: 14px; }
.form-note { color: var(--glow); min-height: 1.4em; }
.parchment { position: relative; min-height: 460px; background: #efe7d3; color: #3a2f22; padding: clamp(24px, 3.5vw, 44px); border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 30px 80px -20px rgba(229, 181, 86, .25);
  background-image: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.35), transparent 60%), radial-gradient(90% 60% at 50% 110%, rgba(143, 100, 24, .18), transparent 70%); }
.parchment.empty { display: grid; place-items: center; background: transparent; box-shadow: none; border: 1.5px dashed rgba(237, 230, 216, .22); }
.empty-note { color: var(--bone-soft); font: italic 400 1.5rem/1.3 var(--display); text-align: center; max-width: 24ch; margin: 0; }
.writing { font: italic 400 1.4rem/1.3 var(--display); color: #7a6446; animation: breathe 1.4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .45; } }
.p-word { font: italic 400 clamp(2.6rem, 4.6vw, 3.8rem)/1 var(--display); color: #8f6418; margin-bottom: 10px; }
.p-does { font-size: 1.15rem; margin-bottom: 18px; }
.parchment h3 { font-size: 1.2rem; margin: 18px 0 6px; color: #6b5537; }
.p-skill { white-space: pre-wrap; font: 400 1rem/1.65 var(--body); margin: 0; }
.p-conn { display: flex; flex-wrap: wrap; gap: 6px; }
.p-conn span { border: 1px solid rgba(58, 47, 34, .35); border-radius: 999px; padding: 3px 12px; font-size: .92rem; }
.p-teach { margin: 0; font-size: .98rem; }
.quill { display: inline-block; width: 9px; height: 1.1em; background: #8f6418; vertical-align: text-bottom; animation: blink .8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.out-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
@media (max-width: 900px) { .writer-grid { grid-template-columns: 1fr; } .parchment { min-height: 300px; } }

/* catalog */
.catalog { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: 48px; }
.wand-card { display: flex; flex-direction: column; }
.wand-view { aspect-ratio: 3 / 5; cursor: grab; touch-action: pan-y; border-radius: 2px;
  background: radial-gradient(70% 55% at 50% 45%, #f2f2ea, var(--moss-2) 75%); }
.wand-view.dragging { cursor: grabbing; }
.wand-info { padding-top: 16px; }
.wand-info h3 { font-size: 2rem; }
.wood { color: var(--ink-soft); font-size: .95rem; margin-bottom: 10px; }
.wand-info p { font-size: .98rem; }
.buy { display: flex; align-items: baseline; gap: 14px; }
.price { font: 400 1.6rem/1 var(--display); }
.link { font-weight: 600; }
@media (max-width: 1100px) { .catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .wand-info h3 { font-size: 1.6rem; } .wand-info p:not(.wood):not(.buy) { font-size: .92rem; } }

/* inside */
.inside { padding-bottom: clamp(56px, 8vw, 104px); background: radial-gradient(60% 50% at 50% 55%, rgba(229, 181, 86, .1), transparent 70%), var(--night); }
.inside-head { max-width: 760px; }
.inside-head p { color: var(--bone-soft); margin: 18px 0 24px; font-size: 1.15rem; }
.inside-stage-wrap { padding: 0 var(--pad); }
.inside-stage { height: clamp(260px, 38vw, 480px); max-width: 1400px; margin: 0 auto; }
.labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.label { position: absolute; left: 0; top: 0; white-space: nowrap; font: italic 400 1.15rem/1 var(--display); color: var(--glow); }
.label::before { content: ''; position: absolute; left: 0; width: 1px; background: rgba(246, 217, 139, .55); }
.label-up { margin-top: -78px; margin-left: -1px; padding: 0 0 0 8px; }
.label-up::before { top: 12px; height: 62px; }
.label-down { margin-top: 18px; padding: 52px 0 0 8px; }
.label-down::before { top: 0; height: 48px; }
.parts-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; margin: 24px 0 0; }
.parts-list div { border-top: 1px solid rgba(237, 230, 216, .25); padding-top: 14px; }
.parts-list dt { font: 400 1.35rem/1.1 var(--display); color: var(--glow); margin-bottom: 6px; }
.parts-list dd { margin: 0; color: var(--bone-soft); font-size: .95rem; }
@media (max-width: 980px) { .parts-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .labels { display: none; } .inside-stage { height: 92vw; } }

/* ways */
.ways-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: 48px; }
.way { padding: clamp(28px, 3.5vw, 44px); border: 1.5px solid rgba(47, 47, 43, .3); border-radius: 2px; display: flex; flex-direction: column; }
.way-feature { background: var(--night); color: var(--bone); border-color: var(--night); }
.way .price { font-size: 3.4rem; margin: 10px 0 16px; color: var(--gold); }
.way-feature .price { color: var(--gold-bright); }
.way ul { margin: 0 0 28px; padding-left: 1.1em; }
.way li { margin-bottom: 4px; }
.way li::marker { color: var(--gold-bright); }
.way .btn { margin-top: auto; align-self: flex-start; }
.way:not(.way-feature) .btn { background: var(--ink); color: var(--moss); }
.way:not(.way-feature) .btn:hover { background: #000; }
.pay-after { margin-top: 28px; font: italic 400 1.6rem/1.2 var(--display); }
@media (max-width: 760px) { .ways-grid { grid-template-columns: 1fr; } }

/* reserve */
.reserve { padding-top: 0; }
.reserve-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); padding-top: clamp(48px, 6vw, 80px); background: linear-gradient(var(--ink), var(--ink)) var(--pad) 0 / calc(100% - 2 * var(--pad)) 2px no-repeat; }
.reserve-grid > div p { color: var(--ink-soft); margin-top: 18px; max-width: 36ch; font-size: 1.1rem; }
.reserve-form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hp { position: absolute; left: -9999px; }
.reserve-form .btn { justify-self: start; background: var(--ink); color: var(--moss); }
.reserve-form .btn:hover { background: #000; }
@media (max-width: 760px) { .reserve-grid, .field-row { grid-template-columns: 1fr; } }

/* visit + footer */
.visit-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 48px; align-items: end; }
.visit p { color: var(--bone-soft); margin-top: 18px; max-width: 46ch; font-size: 1.1rem; }
address { font-style: normal; font-size: 1.1rem; line-height: 1.7; }
address strong { font: 400 1.6rem/1.4 var(--display); color: var(--glow); }
@media (max-width: 760px) { .visit-grid { grid-template-columns: 1fr; } }
.site-foot { background: var(--night); color: var(--bone-soft); border-top: 1px solid rgba(237, 230, 216, .12); padding: 32px var(--pad); display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.site-foot p { margin: 0; flex: 1; }
.site-foot nav { display: flex; gap: 20px; }
.site-foot a { color: var(--bone); }

/* spellbook page */
.book-hero { background: radial-gradient(45% 80% at 82% 50%, rgba(229, 181, 86, .15), transparent 70%), var(--night); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); align-items: center; min-height: 62vh; padding: 0; }
.book-hero .copy { padding: 64px 0 64px var(--pad); }
.book-hero .copy p { color: var(--bone-soft); font-size: 1.25rem; max-width: 44ch; margin-top: 22px; }
.book-hero .stage { height: 100%; min-height: 420px; }
.lessons { counter-reset: lesson; max-width: 880px; margin: 0 auto; padding: 0 var(--pad); }
.lesson { counter-increment: lesson; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px 28px; padding: 48px 0; border-top: 1px solid rgba(47, 47, 43, .2); }
.lesson::before { content: counter(lesson); font: 400 4.4rem/0.9 var(--display); color: var(--gold); }
.lesson h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); margin-bottom: 16px; }
.lesson > div > p, .lesson li { max-width: 62ch; }
.lesson ol, .lesson ul { padding-left: 1.2em; }
.lesson li { margin-bottom: 6px; }
.lesson .scroll { margin: 18px 0 8px; }
.tip { border-left: 3px solid var(--gold-bright); padding: 4px 0 4px 16px; color: var(--ink-soft); }
.book-spells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 40px; }
.book-spell h3 { font: italic 400 2.4rem/1 var(--display); color: var(--gold-bright); }
.book-spell .what { color: var(--bone-soft); margin: 8px 0 14px; }
.book-spell pre { white-space: pre-wrap; margin: 0; font: 400 .98rem/1.65 var(--body); background: var(--night-2); padding: 22px 24px; border-left: 3px solid var(--gold-bright); }
@media (max-width: 820px) {
  .book-hero { grid-template-columns: 1fr; }
  .book-hero .copy { padding: 48px var(--pad) 0; }
  .book-hero .stage { min-height: 46vh; }
  .lesson { grid-template-columns: 1fr; }
  .lesson::before { font-size: 3rem; }
  .book-spells { grid-template-columns: 1fr; }
}
.thanks { min-height: 70vh; display: grid; place-items: center; text-align: center; }
.thanks p { color: var(--bone-soft); font-size: 1.2rem; max-width: 40ch; margin: 18px auto 28px; }