/* The landing story. Real covers and app scenes, with working product instruments. */
.landing.visual-landing .topbar { background: var(--bg); color: var(--text); }
.landing.visual-landing .topbar a,
.landing.visual-landing .topbar .brand-name,
.landing.visual-landing .topbar .reading-options { color: var(--text); }
.landing.visual-landing .hero.hero-story { background: var(--bg); padding: 3.5rem 0 1rem; }
.landing .hero.hero-story > .wrap { padding-block: 0; container: story / inline-size; }
.story-copy { text-align: center; }
.landing .hero-story h1.display { max-width: none; margin: 0 0 1rem; text-wrap: balance; }
.landing .hero-story .lede { max-width: none; margin: 0; }
.landing .hero-story .cta-row { justify-content: center; gap: 1.5rem; margin-top: 1.5rem; }
.hero-story .btn.primary { min-height: 48px; padding-inline: 1.5rem; }
.story-link { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; }
.story-stage { position: relative; height: 400px; max-width: 1100px; margin: 3rem auto 0; }
.story-room { position: absolute; inset: 0 7%; border-radius: 140px 140px 12px 12px; overflow: hidden; background: var(--surface-2); }
.story-room::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #462a1eb3, transparent 75%); }
.story-room img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.story-books { position: absolute; inset: auto 17% 38px; height: 260px; display: flex; align-items: flex-end; justify-content: center; perspective: 1000px; }
.story-books img { width: 24%; max-width: 155px; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 3px 6px 6px 3px; margin: 0 -8px; transform: rotate(-12deg) translateY(14px); }
.story-books img:nth-child(2) { transform: rotate(-6deg) translateY(-5px); }
.story-books img:nth-child(3) { transform: translateY(-12px); z-index: 2; }
.story-books img:nth-child(4) { transform: rotate(6deg) translateY(-5px); z-index: 1; }
.story-books img:nth-child(5) { transform: rotate(12deg) translateY(14px); }
.story-slip { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: .6rem; width: 250px; padding: 1.25rem; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 12px; }
.story-slip:hover { color: var(--text); text-decoration: none; border-color: var(--accent); }
.story-slip:focus-visible { outline: 3px solid var(--ring); outline-offset: 5px; }
.story-slip strong { font-size: var(--type-card); line-height: 1.3; }
.slip-kicker, .slip-foot { color: var(--muted); }
.slip-foot { display: flex; gap: .5rem; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); padding-top: .75rem; }
.story-bookmark { top: 20px; left: 0; transform: rotate(-5deg); }
.story-rating { right: 0; bottom: 44px; transform: rotate(5deg); }
.slip-pages { font-size: var(--type-page); font-weight: 600; }
.slip-pages span { font-size: var(--type-body); font-weight: 400; color: var(--muted); }
.slip-progress { height: 6px; border-radius: 8px; background: var(--surface-2); overflow: hidden; margin-bottom: .25rem; }
.slip-progress i { display: block; width: 39.2%; height: 100%; background: var(--accent); }
.slip-score { display: flex; justify-content: space-between; gap: 1rem; }
.slip-score span:last-child { color: var(--star); letter-spacing: .05em; }
.story-shelf-tag { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); color: #fff; display: flex; gap: 1rem; white-space: nowrap; }
.story-caption { text-align: center; color: var(--muted); margin: 1rem auto 0; }
/* One sentence leads each interactive picture. */
.visual-landing .lp-say .lede { max-width: 42ch; }
.visual-landing #shelf > .lp-sect { grid-template-columns: 1fr; gap: 2rem; padding-block: 5rem 4rem; }
.visual-landing #shelf .lp-say { text-align: center; }
.visual-landing #shelf .lede { margin-inline: auto; }
.visual-landing #shelf .shelf-stage { border: 1px solid var(--border); background: var(--surface); border-radius: 18px; padding: 2rem 3rem; max-width: 1000px; margin: auto; }
.visual-landing #shelf .mock-body { grid-template-columns: 170px minmax(0,1fr); gap: 3rem; }
.visual-landing #shelf .mock-body > div:first-child { display: flex; flex-direction: column; justify-content: flex-start; gap: .6rem; }
.visual-landing #shelf .shelf-btn { width: 100%; }
.visual-landing #shelf .mock .grid { max-width: none; gap: 1.5rem; }
.visual-landing #shelf .tile .cover { max-height: 270px; }
.visual-landing #shelf .shelf-head { margin-bottom: 1.5rem; }
.visual-landing #shelf .tile .body { padding-top: 1.25rem; }
.visual-landing #shelf .tile .a { display: none; }
/* One book's page in miniature, its record beside the reader's take on it. */
.visual-landing .lp-do > .book-sheet { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2.5rem; padding: 2rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.visual-landing .book-sheet > * + * { margin-top: 0; }
.visual-landing .sheet-take { padding-left: 2.5rem; border-left: 1px solid var(--border); }
.visual-landing .book-sheet .lp-book { margin-bottom: 1.25rem; align-items: flex-start; }
.visual-landing .book-sheet .lp-book .lp-chip { color: var(--text); }
/* Buttons sized by their words and wrapping, since reading size scales words but not breakpoints. */
.visual-landing .book-sheet .lp-status { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; }
.visual-landing .book-sheet .lp-status-btn { flex: 1 1 auto; padding-inline: .75rem; }
.visual-landing .book-sheet .progress-read { margin-top: .75rem; }
.visual-landing .sheet-dates { display: flex; flex-wrap: wrap; gap: .5rem 2.5rem; margin: 1rem 0 0; }
.visual-landing .sheet-dates dt { color: var(--muted); }
.visual-landing .sheet-dates dd { margin: 0; font-weight: 600; }
.visual-landing .sheet-h { margin: 0 0 .5rem; font-size: var(--type-body); font-weight: 600; }
.visual-landing .sheet-h ~ .sheet-h { margin-top: 1.5rem; }
/* The stars wrap under their label once the two no longer fit side by side. */
.visual-landing .book-sheet .rating-demo .rating-row { flex-direction: row; flex-wrap: wrap; align-items: center; }
.visual-landing .book-sheet .rating-demo .rating-label { flex: 0 0 6.5rem; }
.visual-landing .book-sheet .rating-demo .aspects { gap: 0; }
.visual-landing .book-sheet .rating-clear { padding-inline: 6px; }
.visual-landing .book-sheet .avg-row { margin-top: .5rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.visual-landing .sheet-note { margin: 0 0 .4rem; font-style: italic; }
@media (max-width: 900px) {
  .visual-landing .lp-do > .book-sheet { grid-template-columns: minmax(0,1fr); }
  .visual-landing .sheet-take { padding: 2rem 0 0; border-left: 0; border-top: 1px solid var(--border); }
}
/* The appearance preview shows the same scene assets available in the app. */
.visual-landing #yours > .lp-sect { grid-template-columns: 1fr; gap: 2rem; padding-block: 2rem 4rem; }
.visual-landing #yours .lp-say { text-align: center; }
.visual-landing #yours .lp-say .lede { margin-inline: auto; }
.visual-landing #yours .lp-panel { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 0; border: 0; }
.visual-landing #yours .lp-panel > * { margin: 0; }
.visual-landing #yours .panel-title, .visual-landing #yours .lp-field { align-self: center; }
.visual-landing #yours .lp-swatches { justify-content: flex-end; }
.visual-landing #yours .lp-mini { position: relative; grid-column: 1 / -1; order: -1; height: 410px; gap: 2rem; justify-content: center; padding: 5rem 2rem 2rem; overflow: hidden; background: url('/static/media/scenes/seaside-nook-day.avif') center 55% / cover; }
.visual-landing #yours .lp-mini[data-tone='sand'] { background-image: url('/static/media/scenes/reading-room-day.avif'); }
.visual-landing #yours .lp-mini[data-tone='slate'] { background-image: url('/static/media/scenes/night-train-night.avif'); }
:root[data-theme='dark'] .visual-landing #yours .lp-mini[data-tone='tidepool'] { background-image: url('/static/media/scenes/seaside-nook-night.avif'); }
:root[data-theme='dark'] .visual-landing #yours .lp-mini[data-tone='sand'] { background-image: url('/static/media/scenes/reading-room-night.avif'); }
.visual-landing #yours .lp-mini::before { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent, #462a1e99); }
.visual-landing #yours .lp-mini img { position: relative; width: 130px; height: 195px; object-fit: cover; }
.visual-landing #yours .lp-mini img:nth-of-type(1) { transform: rotate(-8deg); }
.visual-landing #yours .lp-mini img:nth-of-type(2) { transform: translateY(-10px); }
.visual-landing #yours .lp-mini img:nth-of-type(3) { transform: rotate(8deg); }
.scene-label { position: absolute; top: 1.5rem; left: 1.5rem; background: var(--surface); color: var(--text); padding: .5rem 1rem; border-radius: 99px; z-index: 1; }
.visual-more { margin-block: 1rem 2rem; }
/* The landing's way on to /features, a ruled row across the column. */
.more-link { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-block: 1rem 2rem; padding-block: 1.5rem; border-block: 1px solid var(--border); color: var(--text); font-weight: 600; text-decoration: none; }
.more-link:hover { text-decoration: underline; }
.more-link span { color: var(--muted); margin-left: auto; font-weight: 400; }
.feature-intro .sect { padding-block: 4rem 1rem; }
.feature-intro h1 { margin: 0 0 1rem; text-wrap: balance; }
.feature-intro .lede { margin-inline: auto; }
.visual-landing .visual-more .lp-sect { padding-block: 3rem; }
.visual-landing .visual-more .lp-panel { padding: 1.5rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.visual-landing .visual-more .lp-kept { padding-block: 2rem; }
/* /features' search results and suggestions, each a row of books that scrolls sideways. */
/* The inline padding keeps a focus ring inside the scroller's clip, the margin keeps the cards aligned. */
.book-track { display: flex; gap: 1rem; margin: 1rem -.5rem 0; padding: 0 .5rem .75rem; scroll-padding-inline: .5rem; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: thin; }
.book-card { flex: 0 0 9.5rem; display: flex; flex-direction: column; gap: .25rem; scroll-snap-align: start; min-width: 0; }
.book-card[hidden] { display: none; }
.book-card img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; margin-bottom: .4rem; }
.book-card strong { line-height: 1.25; }
.book-card .lp-reason { margin: .2rem 0 .4rem; }
.book-card .lp-wish { margin-top: auto; align-self: flex-start; }
.carousel-nav { display: flex; justify-content: flex-end; gap: .75rem; margin-top: .5rem; }
.carousel-nav[hidden] { display: none; }
.carousel-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); color: var(--text); cursor: pointer; }
.carousel-btn:hover { background: var(--accent-soft); }
.carousel-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (forced-colors: active) { .carousel-btn { border-color: ButtonText; } }
.visual-landing .closer-band .lp-closer { padding-block: 4rem; }
.visual-landing .lp-closer .cta-row { justify-content: center; }
@media (max-width: 1050px) {
  .story-slip { width: 225px; }
  .story-books { inset-inline: 16%; }
  .visual-landing #shelf .shelf-stage { padding: 1.5rem; }
  .visual-landing #shelf .mock-body { gap: 1.5rem; }
}
/* The slips stack below the room once the hero is narrow for its text. The query is in em on
   the hero's own box, so the larger reading size and a raised browser font trip it too. */
@container story (max-width: 50em) {
  .story-stage { height: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: .8rem; padding-top: 280px; margin-top: 2rem; }
  .story-room { inset: 0 0 auto; height: 310px; border-radius: 80px 80px 12px 12px; }
  .story-books { inset: 60px 9% auto; height: 215px; }
  .story-books img { width: 23%; max-width: 115px; margin-inline: -4px; }
  .story-slip { position: relative; inset: auto; width: auto; transform: none; padding: 1rem; gap: .5rem; }
  .story-slip strong { font-size: var(--type-body); }
  .slip-score { flex-wrap: wrap; gap: 0 .5rem; }
  .story-shelf-tag { display: none; }
}
@container story (max-width: 26.25em) {
  .story-stage { gap: .6rem; padding-top: 230px; }
  .story-room { height: 260px; }
  .story-books { top: 25px; }
  .story-slip { padding: .75rem; }
  .slip-kicker { display: none; }
  .slip-foot { font-size: var(--type-body); }
}
@media (max-width: 760px) {
  .landing.visual-landing .hero.hero-story { padding-top: 2rem; }
  .visual-landing #shelf > .lp-sect { padding-top: 3rem; }
  .visual-landing #shelf .mock-body { grid-template-columns: 1fr; }
  .visual-landing #shelf .mock-body > div:first-child { flex-direction: row; }
  .visual-landing #shelf .shelf-btn { width: auto; }
  .visual-landing #shelf .mock .grid { gap: .8rem; }
  .visual-landing #yours .lp-mini { height: 340px; gap: 1.25rem; padding-inline: 1.5rem; }
  .visual-landing #yours .lp-mini img { width: 24%; max-width: 110px; height: auto; aspect-ratio: 2 / 3; }
  .visual-landing #yours .lp-panel { grid-template-columns: 1fr; }
  .visual-landing #yours .lp-swatches { justify-content: flex-start; }
  .more-link span { margin-left: 0; }
}
@media (max-width: 420px) {
  .visual-landing #shelf .shelf-stage { padding: 1rem; }
  .visual-landing #shelf .mock .grid { gap: .6rem; }
  .visual-landing .lp-do > .book-sheet { padding: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .visual-landing *, .visual-landing *::before, .visual-landing *::after { scroll-behavior: auto; transition: none; animation: none; }
}

/* One autumn hue at 18°, from parchment through burnt sienna to deep russet. The light
   palette is the house one in field-guide.css. Dark stays landing-scoped. */
.visual-landing {
  --story-glow-soft: #f4d8cd;
  --story-glow-deep: #e7c8bb;
  --story-panel-soft: #f1e4df;
  --story-frame: #f9efeb;
  --story-rust: var(--accent);
  --story-on-rust: var(--on-accent);
  background: var(--bg);
}
:root[data-theme='dark'] .visual-landing {
  --bg: #231915;
  --surface: #30221d;
  --surface-2: #453027;
  --text: #f8f0ed;
  --muted: #e3cec4;
  --accent: #eab59e;
  --on-accent: #291a14;
  --accent-hover: #f5d5c7;
  --accent-soft: #483228;
  --accent-line: #bd8b75;
  --border: #76584c;
  --border-strong: #b28f80;
  --star: #eab59e;
  --star-empty: #a7897b;
  --ring: #eab59e;
  --want-bg: #3d2f29;
  --want-fg: #e8d6cf;
  --reading-bg: #533528;
  --reading-fg: #f7ede8;
  --read-bg: #47322a;
  --read-fg: #f2e4de;
  --dnf-bg: #4c3b33;
  --dnf-fg: #e8d6cf;
  --tidepool: #453027;
  --sand: #52392e;
  --story-glow-soft: #452c21;
  --story-glow-deep: #583628;
  --story-panel-soft: #402e26;
  --story-frame: #50362b;
  --story-rust: var(--accent);
  --story-on-rust: var(--on-accent);
  background: var(--bg);
}
.landing.visual-landing .topbar { background: var(--bg); }
:root[data-theme] .landing.visual-landing .topbar .reading-options { color: var(--text); }
.landing.visual-landing .hero.hero-story {
  isolation: isolate;
  padding-bottom: 2rem;
}
.story-highlight { position: relative; color: var(--story-rust); display: inline-block; }
.story-highlight::after {
  content: ''; position: absolute; left: 2%; right: 0; bottom: -.12em; height: .12em;
  border-top: .055em solid currentColor; border-radius: 50%; transform: rotate(-1deg);
  opacity: .55; pointer-events: none;
}
.landing .hero-story .lede { margin-top: 1.5rem; }
.landing.visual-landing .hero-story .btn.primary {
  background: var(--story-rust); border-color: var(--story-rust); color: var(--story-on-rust);
  border-radius: 999px;
}
.story-rating { background: var(--story-frame); }
.story-shelf-tag { background: var(--accent); color: var(--on-accent); padding: .2rem .8rem; border-radius: 999px; bottom: 10px; }
.visual-landing #yours .lp-mini { border-radius: 60px 12px 60px 12px; margin-bottom: 1rem; }
.visual-landing .closer-band {
  background: radial-gradient(ellipse at 50% 100%, var(--story-glow-soft), transparent 70%);
}
/* A short arrival. After that, movement only follows deliberate hover or focus. */
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion='reduced']):not([data-reading-motion='reduced']) .story-books img {
    animation: book-arrives 650ms backwards; animation-delay: 80ms;
    transition: translate 220ms ease;
  }
  :root:not([data-motion='reduced']):not([data-reading-motion='reduced']) .story-books img:nth-child(2) { animation-delay: 140ms; }
  :root:not([data-motion='reduced']):not([data-reading-motion='reduced']) .story-books img:nth-child(3) { animation-delay: 200ms; }
  :root:not([data-motion='reduced']):not([data-reading-motion='reduced']) .story-books img:nth-child(4) { animation-delay: 260ms; }
  :root:not([data-motion='reduced']):not([data-reading-motion='reduced']) .story-books img:nth-child(5) { animation-delay: 320ms; }
  :root:not([data-motion='reduced']):not([data-reading-motion='reduced']) .story-slip { transition: translate 220ms ease; }
  :root:not([data-motion='reduced']):not([data-reading-motion='reduced']) .story-slip:focus-visible { translate: 0 -6px; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :root:not([data-motion='reduced']):not([data-reading-motion='reduced']) .story-books img:hover { translate: 0 -12px; }
  :root:not([data-motion='reduced']):not([data-reading-motion='reduced']) .story-slip:hover { translate: 0 -6px; }
}
@keyframes book-arrives { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 760px) {
  .visual-landing #yours .lp-mini { border-radius: 32px 12px 32px 12px; }
}
@media (forced-colors: active) {
  .story-highlight { color: CanvasText; }
  .story-slip, .story-room { border: 1px solid CanvasText; }
}