/* Hallmark · genre: atmospheric · macrostructure: Catalogue · tone: immersive historical fantasy · anchor hue: coral · theme: studied-DNA (source: Mythspan homepage) · enrichment: Tier C generated stills · nav: N5 preserved · footer: Ft1 preserved */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 · contrast: pass (40–41) · slop: 58 / 58 pass · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57) */
@import url("/tokens.css");

* { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { background: var(--myth-ink-deep); color-scheme: dark; scroll-behavior: smooth; }
body { margin: 0; background: var(--myth-ink-deep); color: var(--myth-paper); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.62; min-height: 100%; }
body::selection { background: var(--myth-coral); color: var(--myth-ink-deep); }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--myth-focus); outline-offset: 4px; }

.myth-nav-shell { inset: max(var(--space-lg), env(safe-area-inset-top)) 0 auto; padding-inline: max(var(--space-md), env(safe-area-inset-left)); pointer-events: none; position: fixed; z-index: var(--z-sticky); }
.myth-nav { align-items: center; background: var(--myth-glass); border: var(--rule-hair) solid var(--myth-line); border-radius: 999px; display: flex; gap: var(--space-lg); justify-content: space-between; margin-inline: auto; max-width: 78rem; min-height: 4rem; padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-lg); pointer-events: auto; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.myth-brand { align-items: center; display: inline-flex; flex: 0 0 auto; font-family: var(--font-body); font-weight: 600; gap: var(--space-sm); letter-spacing: -0.02em; min-height: 44px; text-decoration: none; white-space: nowrap; }
.myth-mark { display: grid; height: 1.55rem; place-items: center; position: relative; width: 1.55rem; }
.myth-mark span { border: var(--rule-hair) solid var(--myth-coral); display: block; height: 1rem; position: absolute; transform: rotate(45deg); width: 1rem; }
.myth-mark span:last-child { transform: translate(0.55rem) rotate(45deg); }
.myth-nav-links { align-items: center; display: flex; gap: clamp(var(--space-md), 2.8vw, var(--space-xl)); }
.myth-nav-links a { color: var(--myth-paper-muted); font-size: 0.9rem; min-height: 44px; padding-block: 0.65rem; text-decoration: none; white-space: nowrap; }
.myth-nav-links a[aria-current="page"] { color: var(--myth-white); }
.nav-cta, .primary-button { align-items: center; border: var(--rule-hair) solid var(--myth-coral); border-radius: 999px; display: inline-flex; font-size: 0.9rem; font-weight: 700; gap: var(--space-sm); justify-content: center; min-height: 48px; padding: var(--space-sm) var(--space-lg); text-decoration: none; white-space: nowrap; }
.nav-cta { background: var(--myth-coral); color: var(--myth-ink-deep); }
.primary-button { background: color-mix(in oklch, var(--myth-ink-deep) 58%, transparent); color: var(--myth-white); }

.inspiration-hero, .adventure-hero { background: var(--myth-ink); isolation: isolate; min-height: clamp(38rem, 86svh, 54rem); overflow: hidden; position: relative; }
.inspiration-hero > img, .adventure-hero > img { height: 100%; inset: 0; object-fit: cover; object-position: 60% center; position: absolute; width: 100%; z-index: -2; }
.inspiration-hero-shade, .adventure-hero-shade { background: linear-gradient(90deg, var(--myth-shadow), color-mix(in oklch, var(--myth-shadow) 18%, transparent)); inset: 0; position: absolute; z-index: -1; }
.inspiration-hero-shade::after, .adventure-hero-shade::after { background: linear-gradient(0deg, var(--myth-ink-deep), transparent 42%); content: ""; inset: 0; position: absolute; }
.inspiration-hero-copy, .adventure-hero-copy { display: flex; flex-direction: column; justify-content: flex-end; margin-inline: auto; min-height: clamp(38rem, 86svh, 54rem); max-width: 92rem; padding: 6rem clamp(var(--space-lg), 7vw, var(--space-4xl)) clamp(8rem, 12vh, 9rem); }
.story-kicker { color: var(--myth-apricot); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.12em; margin: 0 0 var(--space-md); text-transform: uppercase; }
.inspiration-hero h1, .adventure-hero h1, .thanks-page h1, .legal-page h1 { font-family: var(--font-display); font-size: var(--text-display); font-weight: 400; letter-spacing: -0.04em; line-height: 0.96; margin: 0; max-width: 12ch; min-width: 0; overflow-wrap: anywhere; text-wrap: balance; }
.inspiration-hero-copy > p:not(.story-kicker) { color: var(--myth-paper-muted); font-size: var(--text-md); margin: var(--space-lg) 0 var(--space-xl); max-width: 53ch; }
.inspiration-hero .primary-button { align-self: flex-start; }

.story-gallery-section { background: var(--myth-ink-deep); padding-block: clamp(var(--space-3xl), 12vw, var(--space-4xl)); }
.gallery-heading { align-items: end; display: grid; gap: var(--space-xl); grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.65fr); margin-inline: auto; max-width: 92rem; padding-inline: clamp(var(--space-lg), 7vw, var(--space-4xl)); }
.gallery-heading > div { display: flex; flex-direction: column; }
.gallery-heading h2, .library-heading h2, .share-story h2, .twist-section h2, .adventure-afterword h2, .next-story h2 { font-family: var(--font-display); font-size: clamp(2.65rem, 5vw, 5rem); font-style: normal; font-weight: 400; letter-spacing: -0.035em; line-height: 0.98; margin: 0; min-width: 0; overflow-wrap: anywhere; text-wrap: balance; }
.gallery-heading > p { color: var(--myth-paper-muted); margin: 0; max-width: 52ch; }
.gallery-controls { align-items: center; display: flex; gap: var(--space-lg); justify-content: space-between; margin: var(--space-xl) auto var(--space-md); max-width: 92rem; padding-inline: clamp(var(--space-lg), 7vw, var(--space-4xl)); }
.carousel-buttons { align-items: center; display: flex; gap: var(--space-sm); }
.carousel-position { color: var(--myth-paper-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; white-space: nowrap; }
.carousel-position [data-carousel-current] { color: var(--myth-white); font-weight: 700; }
.gallery-controls button { align-items: center; background: transparent; border: var(--rule-hair) solid var(--myth-line); border-radius: 50%; color: var(--myth-paper); cursor: pointer; display: inline-flex; height: 3rem; justify-content: center; width: 3rem; }
.gallery-controls button:active { transform: translateY(1px); }
.gallery-controls button:disabled { cursor: not-allowed; opacity: 0.45; }
.story-carousel { cursor: grab; display: flex; gap: var(--space-lg); overflow-x: auto; overscroll-behavior-inline: contain; padding: 0 clamp(var(--space-lg), 7vw, var(--space-4xl)) var(--space-lg); scroll-padding-inline: clamp(var(--space-lg), 7vw, var(--space-4xl)); scrollbar-width: none; touch-action: pan-x pan-y; user-select: none; }
.story-carousel.is-dragging { cursor: grabbing; }
.story-carousel::-webkit-scrollbar { display: none; }
.story-card { aspect-ratio: 16 / 10; flex: 0 0 clamp(20rem, 54vw, 48rem); overflow: hidden; position: relative; }
.story-card > a { display: block; height: 100%; min-height: 44px; position: relative; text-decoration: none; }
.story-card img { height: 100%; object-fit: cover; width: 100%; }
.story-card-shade { background: linear-gradient(0deg, var(--myth-shadow), color-mix(in oklch, var(--myth-shadow) 8%, transparent) 72%); inset: 0; position: absolute; }
.story-card-copy { bottom: 0; display: flex; flex-direction: column; gap: var(--space-xs); left: 0; padding: clamp(var(--space-lg), 4vw, var(--space-2xl)); position: absolute; right: 0; }
.story-card-meta { color: var(--myth-apricot); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.story-card-copy strong { font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 4rem); font-weight: 400; letter-spacing: -0.035em; line-height: 1; }
.story-card-copy > span:not(.story-card-meta):not(.story-card-open) { color: var(--myth-paper-muted); max-width: 54ch; }
.story-card-open { align-items: center; display: inline-flex; font-weight: 700; gap: var(--space-sm); margin-top: var(--space-sm); }
.story-card-open b { color: var(--myth-coral); font-size: var(--text-md); }
.story-library { background: linear-gradient(180deg, var(--myth-ink), var(--myth-ink-deep)); color: var(--myth-paper); padding: clamp(var(--space-3xl), 11vw, var(--space-4xl)) clamp(var(--space-lg), 7vw, var(--space-4xl)); }
.library-heading { align-items: end; display: grid; gap: var(--space-xl); grid-template-columns: minmax(0, 1fr) auto; margin-inline: auto; max-width: 92rem; }
.library-heading > div > p { color: var(--myth-paper-muted); margin: var(--space-lg) 0 0; max-width: 58ch; }
.library-count { border-block-end: var(--rule-hair) solid var(--myth-coral); color: var(--myth-apricot); font-size: var(--text-sm); font-variant-numeric: tabular-nums; margin: 0; padding-block-end: var(--space-xs); white-space: nowrap; }
.library-tools { align-items: end; display: grid; gap: var(--space-md); grid-template-columns: minmax(16rem, 1.4fr) repeat(3, minmax(10rem, 0.7fr)) auto; margin: var(--space-2xl) auto var(--space-xl); max-width: 92rem; }
.library-tools label { color: var(--myth-paper-muted); display: grid; font-size: 0.86rem; font-weight: 700; gap: var(--space-xs); min-width: 0; }
.library-tools input, .library-tools select { background: var(--myth-panel); border: var(--rule-hair) solid var(--myth-line); border-radius: var(--radius-sm); color: var(--myth-paper); min-height: 3rem; min-width: 0; outline: 2px solid transparent; outline-offset: 1px; padding: var(--space-sm) var(--space-md); width: 100%; }
.library-tools input::placeholder { color: var(--myth-paper-muted); opacity: 0.72; }
.library-tools input:focus-visible, .library-tools select:focus-visible { border-color: var(--myth-cyan); outline-color: var(--myth-focus); }
.library-tools input:disabled, .library-tools select:disabled { cursor: not-allowed; opacity: 0.55; }
.library-reset, .library-empty button { background: transparent; border: var(--rule-hair) solid var(--myth-coral); border-radius: 999px; color: var(--myth-paper); cursor: pointer; min-height: 3rem; padding: var(--space-sm) var(--space-lg); white-space: nowrap; }
.library-reset:active, .library-empty button:active { transform: translateY(1px); }
.library-reset:disabled { border-color: var(--myth-line); cursor: not-allowed; opacity: 0.45; transform: none; }
.story-library-grid { display: grid; gap: var(--space-2xl) var(--space-lg); grid-template-columns: repeat(3, minmax(0, 1fr)); margin-inline: auto; max-width: 92rem; }
.library-card { background: var(--myth-panel); min-width: 0; }
.library-card[hidden] { display: none; }
.library-card > a { color: var(--myth-paper); display: grid; height: 100%; min-height: 44px; text-decoration: none; }
.library-card > a:active .library-card-media img { transform: scale(0.995); }
.library-card-media { aspect-ratio: 4 / 3; display: block; overflow: hidden; }
.library-card-media img { height: 100%; object-fit: cover; width: 100%; }
.library-card-body { align-content: start; display: grid; gap: var(--space-sm); padding: var(--space-lg); }
.library-card-meta { color: var(--myth-apricot); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.06em; min-width: 0; overflow-wrap: anywhere; text-transform: uppercase; }
.library-card strong { font-family: var(--font-display); font-size: var(--text-xl); font-style: normal; font-weight: 400; letter-spacing: -0.025em; line-height: 1.05; min-width: 0; overflow-wrap: anywhere; }
.library-card-detail { color: var(--myth-paper-muted); display: flex; flex-wrap: wrap; font-size: 0.9rem; gap: var(--space-xs) var(--space-md); }
.library-card-detail span + span::before { color: var(--myth-coral); content: "·"; margin-inline-end: var(--space-md); }
.library-card-open { align-items: center; display: inline-flex; font-size: 0.9rem; font-weight: 700; gap: var(--space-sm); margin-top: var(--space-xs); white-space: nowrap; width: fit-content; }
.library-card-open b { color: var(--myth-coral); font-size: var(--text-md); }
.library-empty { border-block: var(--rule-hair) solid var(--myth-line); margin: var(--space-2xl) auto 0; max-width: 92rem; padding-block: var(--space-2xl); }
.library-empty[hidden] { display: none; }
.library-empty h3 { font-family: var(--font-display); font-size: var(--text-xl); font-style: normal; font-weight: 400; margin: 0; }
.library-empty p { color: var(--myth-paper-muted); margin: var(--space-sm) 0 var(--space-lg); }

.share-story { background: var(--myth-plum); display: grid; gap: clamp(var(--space-2xl), 7vw, var(--space-4xl)); grid-template-columns: minmax(0, 0.72fr) minmax(24rem, 1.1fr); padding: clamp(var(--space-3xl), 11vw, var(--space-4xl)) clamp(var(--space-lg), 7vw, var(--space-4xl)); }
.share-story-copy { align-self: start; max-width: 36rem; position: sticky; top: 8rem; }
.share-story-copy > p:last-child { color: var(--myth-paper-muted); font-size: var(--text-md); margin: var(--space-xl) 0 0; }
.share-story form { background: var(--myth-panel); display: grid; gap: var(--space-lg); padding: clamp(var(--space-lg), 5vw, var(--space-2xl)); }
.share-story label { display: grid; font-size: 0.9rem; font-weight: 700; gap: var(--space-xs); }
.share-story input, .share-story textarea { background: var(--myth-ink-deep); border: var(--rule-hair) solid var(--myth-line); border-radius: var(--radius-sm); color: var(--myth-paper); min-height: 3rem; outline: 2px solid transparent; outline-offset: 1px; padding: var(--space-sm) var(--space-md); resize: vertical; }
.share-story textarea { min-height: 7rem; }
.share-story input:hover, .share-story textarea:hover { border-color: var(--myth-apricot); }
.share-story input:focus-visible, .share-story textarea:focus-visible { border-color: var(--myth-cyan); }
.share-story input:active, .share-story textarea:active { border-color: var(--myth-cyan); }
.share-story input:invalid:not(:focus):not(:placeholder-shown), .share-story textarea:invalid:not(:focus):not(:placeholder-shown) { border-color: var(--color-error); }
.share-story input:disabled, .share-story textarea:disabled { cursor: not-allowed; opacity: 0.5; }
.form-pair { display: grid; gap: var(--space-lg); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.share-story .check { align-items: start; font-weight: 400; gap: var(--space-sm); grid-template-columns: auto minmax(0, 1fr); }
.share-story .check input { accent-color: var(--myth-coral); min-height: 1.25rem; width: 1.25rem; }
.share-story button { background: var(--myth-coral); border: 0; border-radius: 999px; color: var(--myth-ink-deep); cursor: pointer; font-weight: 700; justify-self: start; min-height: 3rem; padding: var(--space-sm) var(--space-xl); }
.share-story button:active { transform: translateY(1px); }
.share-story button:disabled { cursor: not-allowed; opacity: 0.5; transform: none; }
.share-story small { color: var(--myth-paper-muted); }
.form-trap { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }

.adventure-hero-copy { align-items: flex-start; }
.back-link { color: var(--myth-paper-muted); margin-bottom: auto; min-height: 44px; padding-block: var(--space-sm); text-decoration-color: var(--myth-coral); text-underline-offset: var(--space-xs); white-space: nowrap; }
.adventure-hero .story-kicker { margin-top: var(--space-2xl); }
.adventure-subtitle { color: var(--myth-paper-muted); font-family: var(--font-display); font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.25; margin: var(--space-lg) 0 0; max-width: 46ch; }
.adventure-layout { background: var(--myth-paper); color: var(--myth-ink); display: grid; gap: clamp(var(--space-2xl), 8vw, var(--space-4xl)); grid-template-columns: minmax(13rem, 0.38fr) minmax(0, 1fr); margin-inline: auto; max-width: 92rem; padding: clamp(var(--space-3xl), 10vw, var(--space-4xl)) clamp(var(--space-lg), 7vw, var(--space-4xl)); }
.adventure-facts { align-self: start; position: sticky; top: 8rem; }
.adventure-facts > p { color: var(--myth-plum-light); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.12em; margin: 0 0 var(--space-lg); text-transform: uppercase; }
.adventure-facts dl { margin: 0; }
.adventure-facts dl > div { border-top: var(--rule-hair) solid var(--myth-line-dark); display: grid; gap: var(--space-xs); padding-block: var(--space-md); }
.adventure-facts dt { color: color-mix(in oklch, var(--myth-ink) 62%, var(--myth-paper)); font-size: var(--text-sm); }
.adventure-facts dd { font-family: var(--font-display); font-size: var(--text-md); line-height: 1.25; margin: 0; }
.adventure-story { max-width: 48rem; }
.story-prose h2, .adventure-line h2 { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.7rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1; margin: 0 0 var(--space-xl); }
.story-prose p, .twist-copy p, .history-note p, .content-notes p { font-size: 1.08rem; margin: 0 0 var(--space-lg); max-width: 65ch; }
.story-prose blockquote { border-left: 3px solid var(--myth-coral); font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.28; margin: var(--space-2xl) 0; padding-left: var(--space-lg); }
.adventure-line { margin-top: var(--space-3xl); }
.adventure-line ol, .endings ol { counter-reset: trail; display: grid; gap: var(--space-md); list-style: none; margin: 0; padding: 0; }
.adventure-line li, .endings li { border-top: var(--rule-hair) solid var(--myth-line-dark); counter-increment: trail; display: grid; gap: var(--space-md); grid-template-columns: 2.5rem minmax(0, 1fr); padding-block: var(--space-lg); }
.adventure-line li::before, .endings li::before { color: var(--myth-plum-light); content: counter(trail, decimal-leading-zero); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.08em; }

.twist-section { background: var(--myth-ink); display: grid; gap: clamp(var(--space-2xl), 9vw, var(--space-4xl)); grid-template-columns: minmax(15rem, 0.45fr) minmax(0, 1fr); padding: clamp(var(--space-3xl), 11vw, var(--space-4xl)) clamp(var(--space-lg), 7vw, var(--space-4xl)); }
.twist-warning { align-self: start; border-top: var(--rule-hair) solid var(--myth-coral); display: grid; gap: var(--space-sm); padding-top: var(--space-md); }
.twist-warning span { color: var(--myth-apricot); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.twist-warning strong { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400; line-height: 1.2; }
.twist-copy { max-width: 51rem; }
.twist-copy h2 { margin-bottom: var(--space-xl); }
.twist-copy p { color: var(--myth-paper-muted); }

.adventure-afterword { background: var(--myth-paper); color: var(--myth-ink); display: grid; gap: var(--space-3xl); grid-template-columns: repeat(12, minmax(0, 1fr)); padding: clamp(var(--space-3xl), 11vw, var(--space-4xl)) clamp(var(--space-lg), 7vw, var(--space-4xl)); }
.adventure-afterword h2 { font-size: clamp(2.2rem, 4vw, 3.5rem); margin-bottom: var(--space-xl); }
.endings { grid-column: 2 / span 5; }
.history-note { grid-column: 7 / span 5; }
.content-notes { border-top: var(--rule-hair) solid var(--myth-line-dark); grid-column: 2 / span 10; padding-top: var(--space-xl); }
.content-notes h2 { font-size: var(--text-xl); }
.source-list { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-xl); }
.source-list a { color: var(--myth-plum); font-weight: 700; min-height: 44px; text-decoration-color: var(--myth-coral); text-underline-offset: var(--space-xs); }

.next-story { background-image: linear-gradient(90deg, var(--myth-shadow), color-mix(in oklch, var(--myth-shadow) 12%, transparent)), var(--next-image); background-position: center; background-size: cover; min-height: 36rem; position: relative; }
.next-story > div { display: flex; flex-direction: column; justify-content: flex-end; min-height: 36rem; padding: clamp(var(--space-3xl), 10vw, var(--space-4xl)) clamp(var(--space-lg), 7vw, var(--space-4xl)); }
.next-story p { color: var(--myth-apricot); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.12em; margin: 0 0 var(--space-md); text-transform: uppercase; }
.next-story h2 { max-width: 13ch; }
.next-story a { align-items: center; display: inline-flex; font-weight: 700; gap: var(--space-sm); margin-top: var(--space-xl); min-height: 44px; text-decoration-color: var(--myth-coral); text-underline-offset: var(--space-xs); width: fit-content; }
.next-story b { color: var(--myth-coral); font-size: var(--text-md); }

.story-footer { align-items: start; background: var(--myth-ink-deep); display: grid; gap: var(--space-2xl); grid-template-columns: 0.65fr 1fr auto; padding: var(--space-3xl) clamp(var(--space-lg), 5vw, var(--space-3xl)) var(--space-2xl); }
.story-footer > p { color: var(--myth-paper-muted); margin: 0; max-width: 42ch; }
.story-footer > p a, .story-footer > div a { text-decoration-color: var(--myth-coral); text-underline-offset: var(--space-xs); }
.story-footer > div { display: flex; flex-direction: column; gap: var(--space-sm); text-align: right; }
.story-footer > div a, .story-footer > div span { white-space: nowrap; }
.story-footer small { border-top: var(--rule-hair) solid var(--myth-line); color: var(--myth-paper-muted); grid-column: 1 / -1; padding-top: var(--space-lg); }

.legal-page { background: var(--myth-paper); color: var(--myth-ink); min-height: 75svh; }
.legal-page article { margin-inline: auto; max-width: 52rem; padding: 11rem clamp(var(--space-lg), 7vw, var(--space-3xl)) var(--space-4xl); }
.legal-page h1 { max-width: 14ch; }
.legal-page h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; line-height: 1.1; margin: var(--space-2xl) 0 var(--space-md); }
.legal-page p { color: color-mix(in oklch, var(--myth-ink) 72%, var(--myth-paper)); }
.thanks-page { align-items: end; background: var(--myth-plum); display: grid; min-height: 75svh; padding: 12rem clamp(var(--space-lg), 7vw, var(--space-4xl)) var(--space-3xl); }
.thanks-page > div { max-width: 52rem; }
.thanks-page p:not(.story-kicker) { color: var(--myth-paper-muted); font-size: var(--text-md); }
.thanks-page a { display: inline-flex; font-weight: 700; margin-top: var(--space-lg); min-height: 44px; text-decoration-color: var(--myth-coral); text-underline-offset: var(--space-xs); }

@media (hover: hover) and (pointer: fine) {
  .myth-nav-links a, .nav-cta, .primary-button, .gallery-controls button, .story-card img, .story-card-open b, .library-card-media img, .library-card-open b, .library-reset, .library-empty button, .share-story button, .source-list a, .next-story b { transition-duration: var(--dur-short); transition-property: color, background-color, border-color, opacity, transform; transition-timing-function: var(--ease-out); }
  .myth-nav-links a:hover { color: var(--myth-white); }
  .nav-cta:hover, .share-story button:hover { transform: translateY(-1px); }
  .primary-button:hover, .gallery-controls button:hover, .library-reset:not(:disabled):hover, .library-empty button:hover { background: var(--myth-coral); color: var(--myth-ink-deep); }
  .story-card a:hover img, .library-card a:hover img { transform: scale(1.02); }
  .next-story a:hover b { transform: translateX(0.25rem); }
  .source-list a:hover { color: var(--myth-coral); }
  .library-tools input:hover, .library-tools select:hover { background: color-mix(in oklch, var(--myth-panel) 88%, var(--myth-paper)); }
}

@media (max-width: 64rem) {
  .gallery-heading, .share-story, .twist-section { grid-template-columns: minmax(0, 1fr); }
  .library-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-search { grid-column: 1 / -1; }
  .library-reset { justify-self: start; }
  .story-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .share-story-copy { position: static; }
  .adventure-layout { gap: var(--space-2xl); grid-template-columns: minmax(12rem, 0.38fr) minmax(0, 1fr); }
  .endings { grid-column: 1 / span 6; }
  .history-note { grid-column: 7 / span 6; }
  .content-notes { grid-column: 1 / -1; }
}

@media (max-width: 48rem) {
  .myth-nav-shell { inset-block-start: max(var(--space-sm), env(safe-area-inset-top)); }
  .myth-nav { min-height: 3.5rem; padding-left: var(--space-md); }
  .myth-nav-links { display: none; }
  .nav-cta { min-height: 44px; padding-inline: var(--space-md); }
  .inspiration-hero, .adventure-hero, .inspiration-hero-copy, .adventure-hero-copy { min-height: clamp(38rem, 84svh, 47rem); }
  .inspiration-hero > img, .adventure-hero > img { object-position: 62% center; }
  .inspiration-hero-copy, .adventure-hero-copy { padding: 5rem max(var(--space-lg), env(safe-area-inset-left)) 7rem; }
  .inspiration-hero h1, .adventure-hero h1 { font-size: clamp(3rem, 13vw, 4.4rem); }
  .inspiration-hero-copy > p:not(.story-kicker) { font-size: 1.05rem; }
  .gallery-heading { padding-inline: var(--space-lg); }
  .gallery-controls { padding-inline: var(--space-lg); }
  .story-carousel { padding-inline: var(--space-lg); scroll-padding-inline: var(--space-lg); }
  .story-card { flex-basis: min(86vw, 30rem); }
  .story-card-copy > span:not(.story-card-meta):not(.story-card-open) { display: none; }
  .story-card-copy strong { font-size: clamp(2rem, 9vw, 3rem); }
  .story-library, .share-story, .twist-section, .adventure-afterword { padding-inline: var(--space-lg); }
  .form-pair { grid-template-columns: 1fr; }
  .adventure-layout { grid-template-columns: 1fr; padding-inline: var(--space-lg); }
  .adventure-facts { position: static; }
  .adventure-facts dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adventure-facts dl > div:nth-child(odd) { padding-right: var(--space-md); }
  .adventure-facts dl > div:nth-child(even) { padding-left: var(--space-md); }
  .twist-warning { max-width: 22rem; }
  .endings, .history-note, .content-notes { grid-column: 1 / -1; }
  .next-story, .next-story > div { min-height: 30rem; }
  .story-footer { grid-template-columns: 1fr; padding-inline: var(--space-lg); }
  .story-footer > div { text-align: left; }
  .story-footer small { grid-column: 1; }
}

@media (max-width: 40rem) {
  .library-heading, .library-tools { grid-template-columns: minmax(0, 1fr); }
  .library-search { grid-column: auto; }
  .library-count { justify-self: start; }
  .library-reset { justify-self: stretch; }
  .story-library-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 25rem) {
  .myth-brand { font-size: 0.92rem; }
  .nav-cta { font-size: 0.78rem; padding-inline: var(--space-sm); }
  .inspiration-hero-copy, .adventure-hero-copy { padding-inline: var(--space-md); }
  .story-card { flex-basis: calc(100vw - 2rem); }
  .story-card-copy { padding: var(--space-lg); }
  .adventure-facts dl { grid-template-columns: 1fr; }
  .adventure-facts dl > div:nth-child(n) { padding-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 150ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 150ms !important; }
}