/* ==========================================================================
   styles.css  (Part 1 of N — lines 1-857)
   --------------------------------------------------------------------------
   This is the SHARED stylesheet loaded on every page of the site.
   It provides:
     - Design tokens (CSS custom properties) for the brown / parchment palette
     - A CSS reset and box-model baseline
     - Body background with layered dark-wood grain textures
     - Typography defaults (headings, paragraphs, links)
     - The ".container" max-width wrapper
     - Octagonal clip-path used on many card elements
     - The ".parchment-card" component — a realistic aged-paper card
     - A simple static nav bar for secondary / sub-pages
     - Hero and main-section default styles, including decorative drop-cap
     - Footer
     - The primary "study-nav" navigation bar (3-column grid with brand mark,
       desktop links, and social icons)
     - A slide-out "drawer" overlay for additional navigation groups
     - The ".stage-copy" hero panel used on the homepage
   Individual page stylesheets (vg-styles.css, film-styles.css, etc.) layer
   on top of this file and override specific pieces as needed.
   ========================================================================== */


/* --------------------------------------------------------------------------
   DESIGN TOKENS
   CSS custom properties define the site-wide color palette, shadows, and
   a shared "notch" size for octagonal clip-paths. Centralising them here
   means a single change propagates everywhere.
   -------------------------------------------------------------------------- */
:root {
  /* Lightest ink — used for primary body text on dark backgrounds */
  --ink: #ead8b7;
  /* Slightly muted ink — used for secondary / supporting text */
  --ink-soft: #c8ad85;
  /* Dimmest ink — used for very subtle labels and the footer */
  --ink-faint: #9d7b55;

  /* Accent gold — links, focus rings, interactive highlights */
  --gold: #c39252;
  /* Darker gold — lower-contrast accent for borders or muted links */
  --gold-dim: #7a542e;

  /* Three shades of "paper" used in the parchment-card backgrounds */
  --paper-light: #dfc79f;
  --paper-mid: #c9a878;
  --paper-dark: #a67d4d;

  /* Dark brown used for text ON the parchment card (high contrast) */
  --paper-ink: #322115;
  /* Softer brown for body text / links inside parchment cards */
  --paper-ink-soft: #59412a;

  /* Near-black brown ramp (0 = almost pure black, 5 = darkest visible brown).
     These create the dark-wood body gradient. */
  --brown-0: #030201;
  --brown-1: #070503;
  --brown-2: #0d0805;
  --brown-3: #150d08;
  --brown-4: #1f140d;
  --brown-5: #2b1b11;

  /* Pre-mixed shadow colors — keeps box-shadow declarations concise */
  --shadow-heavy: rgba(0, 0, 0, 0.82);
  --shadow-soft: rgba(0, 0, 0, 0.58);

  /* Size of the corner cut on octagonal clip-paths.
     A single token so every clipped element stays consistent. */
  --notch: 14px;
}


/* --------------------------------------------------------------------------
   GLOBAL RESET
   The universal selector removes browser-default margins and padding,
   switches everything to border-box (so padding is included in width),
   and kills border-radius globally — the site's aesthetic is angular,
   relying on clip-path polygons rather than rounded corners.
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* !important ensures no library or user-agent injects rounded corners */
  border-radius: 0 !important;
}

/* Smooth-scroll to anchor links (e.g. clicking "Interests" scrolls gently) */
html {
  scroll-behavior: smooth;
}

/* When jumping to #interests, this prevents the sticky nav from
   covering the section heading — pushes the scroll target down 7rem. */
#interests {
  scroll-margin-top: 7rem;
}


/* --------------------------------------------------------------------------
   BODY — DARK WOOD-GRAIN BACKGROUND
   The body stacks five background layers (painted bottom-to-top):
     1. Base gradient: nearly-black brown, darkest at top → deepest brown at bottom
     2. Vertical pinstripes: faint brown lines every 50px simulating wood grain
     3. Bottom-right radial glow: warm brown bloom near the lower-right corner
     4. Bottom-left radial glow: warm brown bloom near the lower-left corner
     5. Top-center radial glow: warm amber bloom that catches the eye up top
   Together they produce a vignette-like dark-wood desk surface.
   -------------------------------------------------------------------------- */
body {
  min-height: 100vh;
  /* Libre Caslon Text is a classic serif — evokes old-fashioned print */
  font-family: "Libre Caslon Text", "Times New Roman", serif;
  font-size: 20px;
  line-height: 1.66;
  letter-spacing: 0.06px;
  color: var(--ink);
  background:
    /* Layer 5 (top): warm amber glow centered near the top edge */
    radial-gradient(1400px 760px at 50% -8%, rgba(163, 82, 24, 0.2), transparent 65%),
    /* Layer 4: brown glow at the bottom-left corner */
    radial-gradient(1200px 800px at 0% 100%, rgba(112, 53, 18, 0.18), transparent 70%),
    /* Layer 3: brown glow at the bottom-right corner */
    radial-gradient(1200px 780px at 100% 110%, rgba(95, 45, 15, 0.16), transparent 72%),
    /* Layer 2: faint vertical pinstripes — 2px brown line every 50px */
    repeating-linear-gradient(
      90deg,
      rgba(130, 68, 27, 0.08) 0,
      rgba(130, 68, 27, 0.08) 2px,
      transparent 2px,
      transparent 50px
    ),
    /* Layer 1 (bottom): the solid base — near-black fading to dark brown */
    linear-gradient(180deg, var(--brown-0), var(--brown-1) 16%, var(--brown-2) 44%, var(--brown-4) 100%);
  position: relative;
}

/* Horizontal scan-lines overlay — fixed so it doesn't scroll with content.
   Very low opacity (.18) adds a subtle CRT / aged-film texture. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.18;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(240, 207, 162, 0.03) 0,
      rgba(240, 207, 162, 0.03) 1px,
      transparent 1px,
      transparent 5px
    );
}

/* Large circular vignette — darkens all four edges while leaving the center
   clear, focusing the viewer's attention on the middle of the viewport. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 50% 42%, transparent 22%, rgba(0, 0, 0, 0.62) 100%);
}


/* --------------------------------------------------------------------------
   TYPOGRAPHY — HEADINGS
   All headings use "Libre Caslon Display" — a wider, more decorative cut of
   the same Caslon family used in body text. font-weight 400 keeps them
   elegant rather than bold. text-wrap: balance asks the browser to even out
   line lengths so short orphan words are avoided.
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: "Libre Caslon Display", "Libre Caslon Text", "Georgia", serif;
  color: #e3c49a;
  font-weight: 400;
  text-wrap: balance;
}

/* h1 uses clamp() for fluid sizing: never smaller than 2.5rem, grows with
   the viewport at 5vw, and caps at 4.9rem on wide screens. */
h1 {
  font-size: clamp(2.5rem, 5vw, 4.9rem);
  letter-spacing: 0.6px;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.62);
}

h2 {
  font-size: clamp(1.45rem, 2.4vw, 2.2rem);
  letter-spacing: 0.4px;
}

h3 {
  font-size: 1.18rem;
  letter-spacing: 0.3px;
}


/* --------------------------------------------------------------------------
   TYPOGRAPHY — BODY TEXT & LINKS
   -------------------------------------------------------------------------- */

/* Paragraphs use the softer ink for comfortable reading contrast. */
p {
  color: var(--ink-soft);
  margin-bottom: 1rem;
  font-size: 1.02rem;
}

/* Links default to the gold accent; underline is removed.
   Transitions cover color, background, and box-shadow so interactive
   states (hover, focus) animate smoothly. */
a {
  color: var(--gold);
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

a:hover {
  color: #edc98f;
}

/* Keyboard-accessible focus ring — a 2px gold outline offset 2px from the
   element edge. This replaces the browser default and matches the palette. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   .container — MAX-WIDTH WRAPPER
   Centers content horizontally with auto margins. min() ensures it never
   exceeds 1180px but shrinks to 100% on narrower viewports. Side padding
   keeps text off the screen edges.
   -------------------------------------------------------------------------- */
.container {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 0 1.4rem;
}


/* --------------------------------------------------------------------------
   .kicker — SMALL LABEL ABOVE A HEADING
   Typically sits above an h2 to provide a category label (e.g. "ABOUT").
   All-caps, wide letter-spacing, and a smaller font size give it a
   typographic "eyebrow" look.
   -------------------------------------------------------------------------- */
.kicker {
  margin-bottom: 0.42rem;
  font-family: "Libre Caslon Display", "Libre Caslon Text", "Georgia", serif;
  text-transform: uppercase;
  letter-spacing: 2.1px;
  font-size: 0.74rem;
  color: #c4a074;
}


/* --------------------------------------------------------------------------
   OCTAGONAL CLIP-PATH
   This rule applies the same 8-sided polygon to many different components —
   the nav shell, drawer, stage hero, room cards, parchment cards, section
   containers, and more. The corners are "notched" by var(--notch) (14px),
   creating a consistent angular / parchment-paper silhouette everywhere.
   -------------------------------------------------------------------------- */
.study-nav .nav-shell,
.site-drawer,
.stage-copy,
.room,
.room-card,
.parchment-card,
.shelf-book,
.hero .container,
main:not(.home-rooms) > section .container,
nav:not(.study-nav) .container {
  clip-path: polygon(
    var(--notch) 0,
    calc(100% - var(--notch)) 0,
    100% var(--notch),
    100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%,
    var(--notch) 100%,
    0 calc(100% - var(--notch)),
    0 var(--notch)
  );
}


/* --------------------------------------------------------------------------
   .parchment-card — AGED PAPER CARD
   A multi-layer background simulates realistic old paper:
     Layer 5 (bottom): solid gradient from light to dark paper tones
     Layer 4: faint vertical pinstripes (simulates woven fiber)
     Layer 3: faint horizontal lines (simulates ruled ledger paper)
     Layer 2: warm radial glow in the bottom-right (aged darkening)
     Layer 1 (top): bright radial glow top-left (sunlight bleaching)
   The box-shadow adds:
     - A deep drop shadow underneath the card
     - An inner shadow around the edges (worn-in feel)
     - A thin bright inset line along the top for an embossed edge
   -------------------------------------------------------------------------- */
.parchment-card {
  position: relative;
  color: var(--paper-ink);
  background:
    /* Bright hotspot near top-left — mimics light catching the paper */
    radial-gradient(circle at 15% 14%, rgba(255, 244, 220, 0.48), transparent 48%),
    /* Warm shadow in the bottom-right corner */
    radial-gradient(circle at 87% 88%, rgba(181, 134, 80, 0.24), transparent 56%),
    /* Horizontal ruled lines every 4px — very faint ledger texture */
    repeating-linear-gradient(
      0deg,
      rgba(94, 64, 37, 0.08) 0,
      rgba(94, 64, 37, 0.08) 1px,
      transparent 1px,
      transparent 4px
    ),
    /* Vertical pinstripes every 6px — simulates paper fiber direction */
    repeating-linear-gradient(
      90deg,
      rgba(84, 57, 33, 0.055) 0,
      rgba(84, 57, 33, 0.055) 1px,
      transparent 1px,
      transparent 6px
    ),
    /* Base paper color — light at top, darker at bottom */
    linear-gradient(155deg, var(--paper-light), var(--paper-mid) 58%, var(--paper-dark) 100%);
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.46),       /* deep drop shadow */
    inset 0 0 24px rgba(79, 51, 28, 0.22),  /* soft inner shadow (worn edges) */
    inset 0 1px 0 rgba(255, 241, 214, 0.45);/* bright top edge highlight */
  padding: 1.2rem 1.25rem 1rem;
}

/* ::before pseudo-element adds a second texture pass over the card:
   - More horizontal scan-lines (tighter spacing than the base)
   - A bright hotspot upper-left (light reflection)
   - A dark patch lower-right (age staining)
   mix-blend-mode: multiply darkens the layers below it
   rather than painting opaquely on top. */
.parchment-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(64, 43, 25, 0.08) 0,
      rgba(64, 43, 25, 0.08) 1px,
      transparent 1px,
      transparent 3px
    ),
    radial-gradient(circle at 22% 24%, rgba(255, 248, 234, 0.18), transparent 30%),
    radial-gradient(circle at 76% 70%, rgba(112, 79, 45, 0.2), transparent 35%);
  mix-blend-mode: multiply;
  opacity: 0.64;
}

/* ::after adds a top-to-bottom tint: a faint bright wash at the top and a
   warm brown shadow at the bottom, simulating uneven light exposure over
   decades of aging. */
.parchment-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 239, 210, 0.16), transparent 18%, rgba(79, 49, 26, 0.22) 100%);
  opacity: 0.66;
}

/* Because the ::before and ::after pseudo-elements are absolutely positioned,
   the card's real children (headings, paragraphs, etc.) need position:relative
   and z-index:1 so they paint ABOVE the texture overlays. */
.parchment-card > * {
  position: relative;
  z-index: 1;
}

/* On parchment cards, headings use the dark paper ink color for contrast
   against the light paper background. */
.parchment-card h2,
.parchment-card h3 {
  color: var(--paper-ink);
}

/* Body text, list items, and links inside parchment cards use the softer
   paper-ink tone so they read well but don't overpower headings. */
.parchment-card p,
.parchment-card li,
.parchment-card a {
  color: var(--paper-ink-soft);
}

/* Hover state for links inside parchment cards — darkens to near-black
   brown for a clear interactive signal. */
.parchment-card a:hover {
  color: #442b18;
}


/* --------------------------------------------------------------------------
   SIMPLE STATIC NAV — USED BY SECONDARY / SUB-PAGES
   Pages like Video Games, Film, Economics, etc. use this simpler nav bar
   (any <nav> that is NOT .study-nav). It sits in normal document flow
   (position: static) with z-index: 350 so it layers above page content
   but below the primary drawer (z-index: 600).
   -------------------------------------------------------------------------- */
nav:not(.study-nav) {
  position: static;
  z-index: 350;
  padding: 0.78rem 0;
}

/* The nav's .container gets a dark semi-transparent background with
   faint vertical pinstripes and a warm inner glow on its top edge. */
nav:not(.study-nav) .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background:
    /* Faint vertical pinstripes every 34px */
    repeating-linear-gradient(
      90deg,
      rgba(162, 97, 44, 0.08) 0,
      rgba(162, 97, 44, 0.08) 1px,
      transparent 1px,
      transparent 34px
    ),
    /* Near-opaque dark gradient base */
    linear-gradient(180deg, rgba(40, 24, 14, 0.93), rgba(14, 9, 7, 0.94));
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.66),        /* strong drop shadow */
    inset 0 1px 0 rgba(204, 142, 72, 0.2);  /* warm highlight along top edge */
  padding: 0.74rem 0.95rem;
}

/* Site name in the simple nav — uppercase serif, classic nameplate look */
nav:not(.study-nav) .site-name {
  font-family: "Libre Caslon Display", "Libre Caslon Text", "Georgia", serif;
  color: #e3c59b;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 1rem;
}

/* Nav link list — horizontal row, no bullet markers */
nav:not(.study-nav) ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Each nav link is styled as a small pill/tag: uppercase serif text on a
   very translucent brown background with a 1px inset border. */
nav:not(.study-nav) ul a {
  display: inline-block;
  color: #d6b58b;
  font-family: "Libre Caslon Display", "Libre Caslon Text", "Georgia", serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  background: rgba(164, 104, 55, 0.12);
  box-shadow: inset 0 0 0 1px rgba(161, 108, 57, 0.2);
  padding: 0.3rem 0.58rem;
}

/* Hover lightens both the text color and the background fill */
nav:not(.study-nav) ul a:hover {
  color: #efcea4;
  background: rgba(174, 113, 60, 0.24);
}


/* --------------------------------------------------------------------------
   .hero — PAGE HERO BANNER
   A top-of-page section for page titles on sub-pages. Its .container gets
   a dark background with a subtle warm radial glow in the upper-left corner.
   -------------------------------------------------------------------------- */
.hero {
  padding: 1.26rem 0 0.92rem;
}

.hero .container {
  position: relative;
  background:
    /* Warm radial highlight anchored upper-left */
    radial-gradient(circle at 15% 18%, rgba(144, 83, 37, 0.2), transparent 42%),
    /* Near-opaque dark base */
    linear-gradient(170deg, rgba(36, 22, 14, 0.94), rgba(14, 9, 7, 0.95));
  box-shadow:
    0 22px 38px var(--shadow-heavy),
    inset 0 0 24px rgba(160, 101, 49, 0.12);
  padding: 1.16rem 1.24rem 1rem;
}

/* Subtitle text beneath the hero h1 — muted warm tone, slightly larger
   than standard paragraph text */
.hero .hero-subtitle {
  margin-top: 0.34rem;
  color: #bda17d;
  font-size: 1.08rem;
}


/* --------------------------------------------------------------------------
   MAIN CONTENT AREA (non-homepage)
   Pages other than the homepage (.home-rooms) get bottom padding and
   section containers styled with a dark semi-transparent background — the
   same visual language as the nav and hero, keeping a consistent look.
   -------------------------------------------------------------------------- */
main:not(.home-rooms) {
  padding-bottom: 1.4rem;
}

main:not(.home-rooms) > section {
  padding: 0.92rem 0 0;
}

main:not(.home-rooms) > section .container {
  position: relative;
  background:
    linear-gradient(170deg, rgba(40, 25, 16, 0.95), rgba(16, 11, 8, 0.96));
  box-shadow:
    0 18px 32px var(--shadow-soft),
    inset 0 0 18px rgba(159, 101, 49, 0.12);
  padding: 1.18rem 1.2rem 1rem;
}


/* --------------------------------------------------------------------------
   DROP-CAP FIRST LETTER
   The first letter of the first paragraph inside each section (and inside
   .desk-note) floats left and becomes a large decorative initial — a
   classic editorial / old-book design pattern.
   -------------------------------------------------------------------------- */
main:not(.home-rooms) > section .container p:first-of-type::first-letter,
.desk-note p:first-of-type::first-letter {
  float: left;
  font-family: "Libre Caslon Display", "Libre Caslon Text", "Georgia", serif;
  color: #e2bf93;
  /* 2.2em relative to the paragraph's own font size */
  font-size: 2.2em;
  /* Pulls the letter upward so its baseline sits properly */
  line-height: 0.84;
  /* Tiny gap between the drop cap and the following text */
  padding-right: 0.09em;
}


/* --------------------------------------------------------------------------
   FOOTER
   Right-aligned, small uppercase text in the faintest ink color — it
   recedes into the background so it doesn't compete with page content.
   -------------------------------------------------------------------------- */
footer {
  padding: 1.55rem 0 1.25rem;
}

footer .container {
  text-align: right;
  font-family: "Libre Caslon Display", "Libre Caslon Text", "Georgia", serif;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.68rem;
  color: var(--ink-faint);
}


/* ==========================================================================
   PRIMARY NAVIGATION — .study-nav
   ==========================================================================
   This is the main nav bar used on the homepage (and potentially other
   "primary" routes). It uses a 3-column CSS grid layout:
     Column 1: brand mark (the calligraphic name logo)
     Column 2: desktop navigation links
     Column 3: social-media icon buttons + drawer toggle
   z-index: 600 keeps it above everything except modals.
   ========================================================================== */
.study-nav {
  position: relative;
  z-index: 600;
  /* overflow: visible lets the absolutely-positioned drawer extend
     below the nav without being clipped */
  overflow: visible;
  padding: 0.88rem 0 0.52rem;
  font-family: "Libre Caslon Display", "Libre Caslon Text", "Georgia", serif;
  color: #d6b58b;
}

/* --------------------------------------------------------------------------
   .nav-shell — THE NAV BAR CONTAINER
   A 3-column grid: [brand] [links] [icons]. Its background mirrors the
   sub-page nav — dark near-opaque gradient with faint vertical pinstripes
   and a triple-layer box-shadow for depth and edge highlights.
   -------------------------------------------------------------------------- */
.study-nav .nav-shell {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  background:
    /* Faint vertical pinstripes every 26px */
    repeating-linear-gradient(
      90deg,
      rgba(170, 104, 50, 0.08) 0,
      rgba(170, 104, 50, 0.08) 1px,
      transparent 1px,
      transparent 26px
    ),
    /* Near-opaque dark gradient base */
    linear-gradient(180deg, rgba(43, 25, 15, 0.93), rgba(15, 10, 8, 0.94));
  box-shadow:
    0 18px 32px rgba(0, 0, 0, 0.7),          /* heavy drop shadow */
    inset 0 1px 0 rgba(204, 142, 71, 0.22),  /* warm top-edge highlight */
    inset 0 -10px 20px rgba(0, 0, 0, 0.24);  /* dark gradient at the bottom */
  padding: 0.68rem 0.9rem;
}


/* --------------------------------------------------------------------------
   .brand-mark — CALLIGRAPHIC NAME LOGO
   Uses "Herr Von Muellerhoff" — a decorative cursive font that evokes
   hand-written ink on paper. The dark red color (#6b1a1a) looks like
   sealing-wax or old iron-gall ink. A slight rotation (-0.52deg) makes
   it feel hand-placed rather than pixel-perfect.
   isolation: isolate creates a new stacking context so the ::before
   background doesn't bleed out.
   -------------------------------------------------------------------------- */
.brand-mark {
  position: relative;
  display: inline-block;
  isolation: isolate;
  overflow: visible;
  font-family: "Herr Von Muellerhoff", "IM Fell English", "Georgia", cursive;
  font-size: clamp(2.24rem, 2.7vw, 2.9rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.56px;
  text-transform: none;
  color: #6b1a1a;
  padding: 0.34rem 1.08rem 0.42rem;
  transform: rotate(-0.52deg);
  text-shadow:
    /* Faint light halo above the letters — embossed look */
    0 1px 0 rgba(255, 230, 200, 0.3),
    /* Soft dark shadow below — gives depth */
    0 2px 8px rgba(80, 20, 20, 0.22);
}

/* Hover keeps the same color — the brand mark is decorative, not a
   typical link, so we suppress the default gold hover. */
.brand-mark:hover {
  color: #6b1a1a;
}

/* --------------------------------------------------------------------------
   .brand-mark::before — PARCHMENT PAPER BACKGROUND BEHIND THE NAME
   This pseudo-element paints a realistic torn-paper swatch:
     - Multiple radial and linear gradients mimic light, shadow, and fiber
     - An irregular clip-path polygon creates ragged, torn-paper edges
       (26 vertices that wobble slightly off a rectangle outline)
     - box-shadow layers add an inset border, an embossed top edge,
       and a small drop shadow
   z-index: -1 places it behind the text.
   -------------------------------------------------------------------------- */
.brand-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* Bright hotspot top-left — simulates light catching the paper */
    radial-gradient(circle at 16% 14%, rgba(255, 247, 224, 0.56), transparent 44%),
    /* Warm shadow bottom-right — aged darkening */
    radial-gradient(circle at 84% 84%, rgba(173, 124, 73, 0.34), transparent 60%),
    /* Tight horizontal ruled lines (3px apart) — paper fiber texture */
    repeating-linear-gradient(
      0deg,
      rgba(93, 63, 36, 0.09) 0,
      rgba(93, 63, 36, 0.09) 1px,
      transparent 1px,
      transparent 3px
    ),
    /* Vertical pinstripes (5px apart) — cross-fiber texture */
    repeating-linear-gradient(
      90deg,
      rgba(84, 57, 33, 0.08) 0,
      rgba(84, 57, 33, 0.08) 1px,
      transparent 1px,
      transparent 5px
    ),
    /* Base paper gradient — light cream to medium parchment */
    linear-gradient(152deg, rgba(236, 210, 168, 0.96), rgba(210, 174, 122, 0.94) 60%, rgba(178, 132, 77, 0.94) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(96, 64, 38, 0.28),    /* thin inset border */
    inset 0 1px 0 rgba(255, 241, 212, 0.46),    /* bright top-edge emboss */
    0 4px 9px rgba(0, 0, 0, 0.36);              /* small drop shadow */
  /* Irregular polygon — 26 points that jitter around the rectangle
     to simulate hand-torn paper edges */
  clip-path: polygon(
    2% 8%,
    9% 2%,
    19% 5%,
    33% 1%,
    47% 4%,
    61% 2%,
    75% 5%,
    89% 1%,
    98% 9%,
    99% 21%,
    96% 34%,
    99% 48%,
    97% 62%,
    100% 78%,
    95% 93%,
    83% 98%,
    68% 96%,
    53% 99%,
    38% 97%,
    24% 99%,
    11% 96%,
    2% 90%,
    0 75%,
    3% 61%,
    1% 46%,
    4% 31%,
    1% 16%
  );
}

/* A thin horizontal line beneath the brand name — imitates an ink flourish
   or signature underline. Slightly rotated for a hand-drawn feel. */
.brand-mark::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.18rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(120, 55, 44, 0.52), rgba(120, 55, 44, 0.12));
  transform: rotate(0.24deg);
  opacity: 0.72;
}


/* --------------------------------------------------------------------------
   .nav-links-desktop — HORIZONTAL LINK ROW
   All site destinations in one unified flex row. Editorial text links —
   no button boxes, just the typography doing the work.
   -------------------------------------------------------------------------- */
.nav-links-desktop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

/* --------------------------------------------------------------------------
   NAV LINKS & DRAWER TOGGLE — TEXT LINK STYLE
   Plain text links in IM Fell English SC. No button boxes — the nav is
   a clear, scannable list of destinations. A warm underline appears on
   hover to confirm interactivity without visual noise.
   -------------------------------------------------------------------------- */
.nav-links-desktop a,
.drawer-toggle {
  position: relative;
  border: none;
  background: none;
  box-shadow: none;
  color: #9e9472;
  font-family: "IM Fell English SC", "Georgia", serif;
  font-size: 0.78rem;
  letter-spacing: 0.4px;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.nav-links-desktop a::after,
.drawer-toggle::after {
  content: "";
  position: absolute;
  bottom: 0.2rem;
  left: 0.5rem;
  right: 0.5rem;
  height: 1px;
  background: rgba(180, 155, 90, 0.7);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.nav-links-desktop a:hover,
.drawer-toggle:hover {
  background: none;
  box-shadow: none;
  color: #d4c07a;
}

.nav-links-desktop a:hover::after,
.drawer-toggle:hover::after {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   DESKTOP NAV LINK DIMENSIONS
   Auto-width so each link sizes to its own label. Fixed height keeps the
   row vertically consistent. No clip-path — shape comes from the text.
   -------------------------------------------------------------------------- */
.nav-links-desktop a,
.nav-links-desktop .drawer-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  height: 2rem;
  padding: 0.3rem 0.72rem;
  clip-path: none;
  transition: color 0.18s ease;
}

.nav-links-desktop a:hover,
.nav-links-desktop .drawer-toggle:hover {
  background: none;
  box-shadow: none;
  color: #d4c07a;
}

/* Thin vertical rule separating page links from interest links */
.nav-sep {
  display: inline-block;
  width: 1px;
  height: 1rem;
  background: rgba(140, 120, 70, 0.35);
  margin: 0 0.5rem;
  align-self: center;
  flex-shrink: 0;
}


/* --------------------------------------------------------------------------
   .nav-icons — SOCIAL / UTILITY ICON LINKS
   Bare SVG icon links matching the text-link aesthetic of the nav — no
   backgrounds or borders, just the icon in the same muted gold tone.
   -------------------------------------------------------------------------- */
.nav-icons {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.nav-icons a {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  background: none;
  box-shadow: none;
  clip-path: none;
  color: #9e9472;
  transition: color 0.18s ease;
}

.nav-icons a svg {
  width: 15px;
  height: 15px;
}

.nav-icons a:hover {
  background: none;
  box-shadow: none;
  color: #d4c07a;
}

/* Mobile hamburger toggle — hidden by default on desktop; revealed by
   media queries at narrower breakpoints (defined later in the stylesheet). */
.nav-mobile-toggle {
  display: none;
}


/* --------------------------------------------------------------------------
   .site-drawer — SLIDE-DOWN NAVIGATION OVERLAY
   Positioned absolutely below the nav-shell (top: calc(100% + 0.28rem)).
   It's horizontally centered with left: 50% + transform: translateX(-50%).
   When closed:
     - opacity: 0 + visibility: hidden hides it visually and from the
       accessibility tree
     - pointer-events: none lets clicks pass through
     - transform includes translateY(-8px) and scale(0.985) so the opening
       animation slides down and zooms slightly
     - The visibility transition has a 0.22s delay (matches opacity duration)
       so visibility only flips AFTER the fade-out finishes
   -------------------------------------------------------------------------- */
.site-drawer {
  position: absolute;
  left: 50%;
  top: calc(100% + 0.28rem);
  width: min(1180px, calc(100% - 2.8rem));
  margin: 0;
  clip-path: none;
  background: linear-gradient(170deg, rgba(10, 7, 4, 0.97), rgba(5, 3, 2, 0.98));
  box-shadow: 0 20px 34px rgba(0, 0, 0, 0.72);
  max-height: min(78vh, 560px);
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -8px) scale(0.985);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    visibility 0s linear 0.22s;
}

.site-drawer.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
  transition-delay: 0s;
}

/* --------------------------------------------------------------------------
   .drawer-inner — LAYOUT INSIDE THE DRAWER
   -------------------------------------------------------------------------- */
.drawer-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  padding: 1.1rem 1.3rem 1.2rem;
}

/* Groups have no card background — just a thin gold rule at the top
   to separate them, matching the nav separator aesthetic. */
.drawer-group {
  background: none;
  box-shadow: none;
  padding: 0.6rem 0 0;
  border-top: 1px solid rgba(140, 120, 70, 0.22);
}

/* Section labels — dim, small, same font as nav links */
.drawer-group h2 {
  font-family: "IM Fell English SC", "Georgia", serif;
  font-size: 0.64rem;
  letter-spacing: 0.4px;
  text-transform: none;
  color: #6a6044;
  margin-bottom: 0.5rem;
}

/* Links match the desktop nav — IM Fell English SC, muted gold,
   underline on hover instead of a background fill. */
.drawer-group a {
  position: relative;
  display: block;
  color: #9e9472;
  font-family: "IM Fell English SC", "Georgia", serif;
  font-size: 0.84rem;
  padding: 0.24rem 0;
}

.drawer-group a::after {
  content: "";
  position: absolute;
  bottom: 0.12rem;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(180, 155, 90, 0.7);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.drawer-group a:hover {
  background: none;
  color: #d4c07a;
}

.drawer-group a:hover::after {
  opacity: 1;
}


/* --------------------------------------------------------------------------
   .interests-dropdown — DESKTOP-ONLY INTERESTS LINK PANEL
   A compact dropdown triggered by the "interests" button in the desktop nav.
   Separate from site-drawer (which is used only by the mobile menu button).
   Positioned centered below the nav bar, same anchor as site-drawer.
   -------------------------------------------------------------------------- */
.interests-dropdown {
  position: absolute;
  left: 50%;
  top: calc(100% + 0.28rem);
  width: 200px;
  transform: translateX(-50%) translateY(-4px) scale(0.97);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 200;
  background:
    linear-gradient(160deg, rgba(38, 28, 18, 0.98), rgba(22, 15, 8, 0.99));
  border: 1px solid rgba(140, 120, 70, 0.18);
  border-radius: 3px;
  padding: 0.7rem 0.9rem 0.8rem;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.3);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    visibility 0s linear 0.22s;
}

.interests-dropdown.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
  transition-delay: 0s;
}

.interests-dropdown a {
  position: relative;
  display: block;
  color: #9e9472;
  font-family: "IM Fell English SC", "Georgia", serif;
  font-size: 0.84rem;
  text-decoration: none;
  padding: 0.22rem 0;
}

.interests-dropdown a::after {
  content: "";
  position: absolute;
  bottom: 0.1rem;
  left: 0;
  right: 0;
  height: 1px;
  background: #d4c07a;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.interests-dropdown a:hover {
  color: #d4c07a;
}

.interests-dropdown a:hover::after {
  opacity: 1;
}

/* Hidden on mobile — the site-drawer handles full nav there */
@media (max-width: 760px) {
  .interests-dropdown {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   .stage-copy — HOMEPAGE HERO PANEL ("THE OPEN BOOK")
   A richly textured panel that serves as the main visual centerpiece on the
   homepage. It's placed via CSS Grid (grid-area: copy) and uses flexbox
   internally to center its children.

   Background stack (bottom to top):
     Layer 6: solid diagonal gradient — dark wood tones
     Layer 5: angled horizontal lines (8deg) — subtle wood grain
     Layer 4: vertical planks — alternating lighter/darker brown stripes
     Layer 3: dark central vignette
     Layer 2: warm radial glow bottom-right
     Layer 1: warm radial glow top-left

   box-shadow:
     - Heavy drop shadow for depth
     - 1px inset border in warm brown
     - Dark inner glow for a recessed appearance
   -------------------------------------------------------------------------- */
.stage-copy {
  grid-area: copy;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  clip-path: polygon(
    var(--notch) 0,
    calc(100% - var(--notch)) 0,
    100% var(--notch),
    100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%,
    var(--notch) 100%,
    0 calc(100% - var(--notch)),
    0 var(--notch)
  );
  background:
    /* Layer 1: warm highlight upper-left */
    radial-gradient(circle at 18% 14%, rgba(166, 104, 57, 0.3), transparent 42%),
    /* Layer 2: warm shadow lower-right */
    radial-gradient(circle at 82% 86%, rgba(94, 56, 33, 0.34), transparent 58%),
    /* Layer 3: dark central vignette — pulls focus inward */
    radial-gradient(circle at 48% 48%, rgba(0, 0, 0, 0.28), transparent 76%),
    /* Layer 4: vertical plank stripes — 2px highlight every 84px */
    repeating-linear-gradient(
      90deg,
      rgba(118, 73, 40, 0.22) 0,
      rgba(118, 73, 40, 0.22) 2px,
      rgba(64, 38, 23, 0.24) 2px,
      rgba(64, 38, 23, 0.24) 84px
    ),
    /* Layer 5: tight angled lines (wood grain at 8 degrees) */
    repeating-linear-gradient(
      8deg,
      rgba(103, 66, 39, 0.17) 0,
      rgba(103, 66, 39, 0.17) 1px,
      rgba(56, 34, 22, 0.14) 1px,
      rgba(56, 34, 22, 0.14) 4px
    ),
    /* Layer 6 (bottom): solid diagonal gradient — the panel's base color */
    linear-gradient(166deg, #5f3b25, #432a1b 56%, #28190f 100%);
  box-shadow:
    0 14px 24px var(--shadow-heavy),            /* deep drop shadow */
    inset 0 0 0 1px rgba(127, 85, 49, 0.38),   /* thin warm inset border */
    inset 0 0 24px rgba(0, 0, 0, 0.44);         /* dark inner glow */
  padding: 0.6rem;
}

/* --------------------------------------------------------------------------
   .stage-copy::before — INNER PARCHMENT / OPEN-BOOK PAGE
   Inset 0.46rem from the outer frame, this pseudo-element paints the
   "page" of the open book:
     - Radial highlights in the upper corners mimic light hitting the paper
     - A warm glow at the bottom mimics age staining
     - The key trick is the horizontal linear-gradient at 90deg:
       left edge (#ead2a7) → center gutter dip (#b88f5e → #98714a → #b78f60)
       → right edge (#ecd7b0). This creates the illusion of a book spine —
       the center is darker where the pages curve into the binding.
   box-shadow adds multiple rings: thin border, thick translucent frame,
   inner glow, and outer drop shadow.
   -------------------------------------------------------------------------- */
.stage-copy::before {
  content: "";
  position: absolute;
  inset: 0.46rem;
  pointer-events: none;
  background:
    /* Bright spot upper-left */
    radial-gradient(circle at 18% 18%, rgba(255, 246, 217, 0.56), transparent 38%),
    /* Bright spot upper-right */
    radial-gradient(circle at 82% 22%, rgba(255, 243, 208, 0.46), transparent 36%),
    /* Warm glow lower-center — age staining */
    radial-gradient(circle at 50% 72%, rgba(182, 133, 82, 0.2), transparent 58%),
    /* Book-spine gradient: light pages → dark center gutter → light pages */
    linear-gradient(
      90deg,
      #ead2a7 0%,          /* left page — bright parchment */
      #ddbf93 47.6%,       /* approaching the spine */
      #b88f5e 49.2%,       /* spine shadow begins */
      #98714a 50%,         /* deepest point of the spine crease */
      #b78f60 50.8%,       /* spine shadow ends */
      #dfc094 52.4%,       /* departing the spine */
      #ecd7b0 100%         /* right page — bright parchment */
    );
  box-shadow:
    inset 0 0 0 1px rgba(122, 86, 49, 0.48),    /* thin dark border */
    inset 0 0 0 5px rgba(250, 236, 205, 0.18),   /* thick parchment-toned frame */
    inset 0 0 12px rgba(97, 64, 38, 0.18),       /* subtle inner glow */
    0 10px 16px rgba(0, 0, 0, 0.42);             /* drop shadow */
}

/* --------------------------------------------------------------------------
   .stage-copy::after — PAGE TEXTURE OVERLAY
   Inset a bit further (0.68rem) so it sits inside the ::before "page".
   This adds ruled lines, coffee-ring stains, and binding details:
     - Vertical center line (49.35%–50.65%) simulates the spine shadow
     - Three radial spots mimic faint coffee-ring or foxing stains
     - Horizontal ruled lines every 18px — ledger/notebook look
     - Tight vertical lines every 8px — cross-hatched fiber texture
     - Left and right edge darkening (1.5% wide) — page-edge shadow
       where the paper meets the binding
   opacity: 0.84 keeps all these details very subtle.
   -------------------------------------------------------------------------- */
.stage-copy::after {
  content: "";
  position: absolute;
  inset: 0.68rem;
  pointer-events: none;
  background:
    /* Center spine shadow line */
    linear-gradient(90deg, transparent 49.35%, rgba(94, 64, 38, 0.34) 50%, transparent 50.65%),
    /* Faint foxing / coffee-ring stains at three spots */
    radial-gradient(circle at 24% 33%, rgba(116, 78, 46, 0.16) 0 4%, transparent 16%),
    radial-gradient(circle at 71% 58%, rgba(109, 73, 44, 0.14) 0 4%, transparent 17%),
    radial-gradient(circle at 61% 78%, rgba(104, 68, 41, 0.12) 0 3%, transparent 15%),
    /* Horizontal ruled lines every 18px */
    repeating-linear-gradient(
      0deg,
      rgba(120, 86, 52, 0.2) 0,
      rgba(120, 86, 52, 0.2) 1px,
      transparent 1px,
      transparent 18px
    ),
    /* Vertical fiber lines every 8px */
    repeating-linear-gradient(
      90deg,
      rgba(111, 78, 46, 0.07) 0,
      rgba(111, 78, 46, 0.07) 1px,
      transparent 1px,
      transparent 8px
    ),
    /* Left and right edge darkening — where pages meet the binding */
    linear-gradient(
      90deg,
      rgba(72, 47, 29, 0.24) 0 1.5%,
      transparent 1.5% 98.5%,
      rgba(72, 47, 29, 0.24) 98.5% 100%
    );
  box-shadow:
    inset 0 0 0 1px rgba(99, 66, 39, 0.24),
    inset 0 0 24px rgba(88, 56, 33, 0.16);
  opacity: 0.84;
}

/* Lift all real children above both pseudo-element texture layers */
.stage-copy > * {
  position: relative;
  z-index: 2;
  text-align: center;
}

/* --------------------------------------------------------------------------
   .stage-copy h1 — THE CALLIGRAPHIC HOMEPAGE TITLE
   Uses the same "Herr Von Muellerhoff" cursive as the brand mark.
   The dark red color, slight rotation, and upward nudge make it look like
   hand-lettered calligraphy placed on the open book. Width is capped so
   the text doesn't stretch too wide on large screens.
   -------------------------------------------------------------------------- */
.stage-copy h1 {
  margin: 0;
  width: min(94%, 620px);
  max-width: none;
  align-self: center;
  font-family: "Herr Von Muellerhoff", "IM Fell English", "Georgia", cursive;
  font-weight: 400;
  font-size: clamp(2.2rem, 3.8vw, 3.2rem);
  line-height: 0.88;
  text-transform: none;
  letter-spacing: 1px;
  color: #6b1a1a;
  text-shadow:
    0 1px 0 rgba(255, 230, 200, 0.3),
    0 2px 8px rgba(80, 20, 20, 0.22);
  transform: rotate(-0.54deg) translateY(-0.22rem);
}

/* The title is split into two lines via .archive-line spans.
   display: block forces each span onto its own line. */
.stage-copy h1 .archive-line {
  display: block;
}

/* Top line of the title — slightly smaller (0.9em), with a thin underline
   offset below the baseline to mimic a hand-drawn rule. */
.stage-copy h1 .archive-line--top {
  white-space: nowrap;
  font-size: 0.9em;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

/* Bottom line gets a small top margin to separate it from the underline */
.stage-copy h1 .archive-line--bottom {
  margin-top: 0.08em;
}

/* ==========================================================================
   TICKER TAPE
   A stock-ticker-style scrolling bar that appears on every page. It sticks
   to the top of the viewport and continuously scrolls a strip of financial
   data items (ticks) from right to left.
   ========================================================================== */

/* The ticker animation: translates the track leftward by exactly half its
   width.  Because the HTML duplicates its content, -50% brings the second
   copy into view just as the first scrolls away, creating a seamless loop. */
@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* The outer container — sticky-positioned so it stays visible while the user
   scrolls.  `overflow: hidden` clips the long scrolling track.  The parchment
   background (#f5eed8) keeps it visually consistent with the site's brown
   palette.  The compound box-shadow gives a soft drop shadow below and a
   subtle inset highlight along the bottom inner edge. */
.ticker-tape {
  position: sticky;
  top: 0;
  z-index: 700;
  overflow: hidden;
  height: 36px;
  background: #f5eed8;
  border-bottom: 2px solid #d8ceb0;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.4);
}

/* Decorative perforated dots along the top edge, mimicking the sprocket holes
   of real paper ticker tape.  A repeating radial-gradient draws evenly spaced
   semi-transparent circles. */
.ticker-tape::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  z-index: 2;
  background:
    radial-gradient(circle at 50% 4px, rgba(0, 0, 0, 0.08) 2.5px, transparent 2.5px);
  background-size: 20px 8px;
}

/* A subtle bottom-edge fade that darkens the tape slightly toward the bottom,
   adding a sense of depth as though the tape curls under. */
.ticker-tape::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.06));
}

/* The scrolling track itself — a flex row set to `width: max-content` so it
   grows to fit all tick items without wrapping.  The `tickerScroll` animation
   runs linearly forever, giving the smooth continuous scroll effect. */
.ticker-track {
  display: flex;
  align-items: center;
  width: max-content;
  height: 100%;
  padding-top: 4px;
  animation: tickerScroll 35s linear infinite;
}

/* Pausing the animation on hover lets users read the values comfortably. */
.ticker-track:hover {
  animation-play-state: paused;
}

/* Individual ticker items: monospace font to mimic a financial terminal.
   `white-space: nowrap` prevents any line break inside a single tick. */
.tick {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 13px;
  font-weight: 500;
  color: #1a1408;
  white-space: nowrap;
  letter-spacing: 0.3px;
}

/* Color-coding for market direction: green for gains, red for losses. */
.tick--up { color: #0a6b2e; }
.tick--down { color: #a01010; }

/* A small decorative separator between ticker items — rendered as a tiny
   bullet or diamond.  Low opacity keeps it unobtrusive. */
.tick-sep {
  display: inline-block;
  margin: 0 14px;
  font-size: 8px;
  color: rgba(26, 20, 8, 0.3);
}

/* On very small screens (under 440px), shrink the ticker bar and text so it
   doesn't dominate the viewport. */
@media (max-width: 440px) {
  .ticker-tape { height: 30px; }
  .tick { font-size: 11px; }
}


/* ==========================================================================
   HOMEPAGE "ROOMS" GRID — DESKTOP PANEL HEIGHTS
   On desktop (1081px+), the three middle rooms (intro, ledger, quote) are
   given a fixed height via a CSS custom property.  This keeps the row even
   and prevents content from stretching it unevenly.
   ========================================================================== */
@media (min-width: 1081px) {
  :root {
    --desktop-top-panel-height: 14.5rem;
    --desktop-room-panel-height: 21.5rem;
  }


  .room-intro,
  .room-ledger,
  .room-quote {
    height: var(--desktop-room-panel-height);
    overflow: hidden;
  }

}


/* ==========================================================================
   HOMEPAGE ROOMS GRID
   The homepage is divided into themed visual "rooms" arranged in a CSS Grid.
   The layout is three columns:
     Row 1: "archive" spans all three columns (a wide banner)
     Row 2: "intro" | "ledger" | "quote" (three equal-width panels)
     Row 3: "shelves" spans all three columns (the bookshelf)
   ========================================================================== */
.home-rooms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "archive archive archive"
    "intro ledger quote"
    "shelves shelves shelves";
  gap: 0.96rem;
  align-items: stretch;
  padding-top: 0.96rem;
  padding-bottom: 1.2rem;
}

/* The archive banner room — spans the full width at the top and uses the
   shared desktop panel height to stay consistent with the rest of the row. */
.room-archive {
  grid-area: archive;
  height: var(--desktop-room-panel-height);
}

.room-archive .stage-copy {
  width: 100%;
  height: 100%;
}

/* Base styling shared by all room panels.  The dark gradient goes from a warm
   brown to near-black, and the compound box-shadow adds a deep drop shadow
   plus a faint inner amber glow. */
.room {
  background:
    linear-gradient(168deg, rgba(40, 25, 16, 0.95), rgba(15, 10, 8, 0.97));
  box-shadow:
    0 20px 34px var(--shadow-soft),
    inset 0 0 22px rgba(159, 101, 49, 0.12);
  padding: 1.1rem 1.16rem 1rem;
}

/* The intro and quote rooms each use a single-column inner grid with a gap
   so their children stack neatly.  grid-area assigns them to their named
   positions in the parent grid. */
.room-intro {
  grid-area: intro;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.96rem;
}

.room-quote {
  grid-area: quote;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.96rem;
}

/* The shelves room spans the full bottom row. */
.room-shelves {
  grid-area: shelves;
}

/* Make the room-card and CRT components fill their parent grid cells fully
   so they stretch to the same height as their sibling rooms. */
.room-intro .room-card,
.room-quote .quote-crt {
  height: 100%;
}

/* Remove any default transform on the CRT inside the quote room and enforce
   full height so it matches its siblings. */
.room-quote .quote-crt {
  min-height: 100%;
  transform: none;
}

/* ==========================================================================
   CRT TELEVISION SKEUOMORPH
   The quote room contains a fully CSS-rendered retro CRT television that
   displays a random quote on a green phosphor screen.  The construction has
   several layers:
     .quote-crt          — outer plastic housing / shadow box
     .quote-crt-shell    — inner gray plastic shell (the TV body)
     .crt-badge          — model label bar at the top
     .crt-screen         — the recessed bezel around the glass
     .crt-screen-surface — the green "glass" with scanlines and reflections
     .crt-controls       — bottom control panel with brand, switches, knobs
   ========================================================================== */

/* Outer housing — a dark brown wooden-cabinet style surround.  Multiple
   radial-gradient layers create subtle warm highlights in two corners.
   The repeating-linear-gradient at 90deg draws faint vertical slat lines
   to mimic wood paneling.  The diagonal base gradient darkens from top-left
   to bottom-right. */
.quote-crt {
  position: relative;
  padding: 0.58rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 17% 16%, rgba(125, 73, 36, 0.28), transparent 44%),  /* warm highlight top-left */
    radial-gradient(circle at 84% 88%, rgba(74, 43, 25, 0.24), transparent 58%),   /* warm highlight bottom-right */
    repeating-linear-gradient(
      90deg,
      rgba(138, 84, 41, 0.08) 0,
      rgba(138, 84, 41, 0.08) 2px,
      transparent 1px,
      transparent 26px
    ),  /* faint vertical wood slats */
    linear-gradient(156deg, rgba(45, 28, 18, 0.95), rgba(20, 13, 10, 0.96));  /* base dark diagonal */
  box-shadow:
    0 18px 30px rgba(0, 0, 0, 0.5),       /* deep drop shadow */
    inset 0 0 16px rgba(86, 52, 28, 0.18), /* soft inner glow */
    inset 0 1px 0 rgba(209, 143, 79, 0.24); /* top-edge highlight */
}

/* A full-overlay pseudo-element that adds vertical shading: a slight warm
   highlight at the top fading to a dark shadow at the bottom, simulating
   overhead lighting on the cabinet. */
.quote-crt::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(201, 146, 90, 0.08), transparent 34%, rgba(0, 0, 0, 0.34));
  opacity: 0.82;
}

/* The inner plastic shell of the TV — a metallic gray gradient simulating
   injection-molded 1980s plastic.  The three-row grid stacks: badge (top),
   screen (middle, flex-grows), controls (bottom).  Multiple inset box-shadows
   create a beveled frame: thin highlight ring, thicker dark ring, and a
   bottom inner shadow for depth. */
.quote-crt-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.44rem;
  min-height: 100%;
  padding: 0.58rem 0.62rem 0.52rem;
  background:
    linear-gradient(152deg, #686a70, #4d4f55 38%, #303239 100%);
  box-shadow:
    0 14px 22px rgba(0, 0, 0, 0.58),        /* drop shadow behind shell */
    inset 0 0 0 1px rgba(159, 165, 177, 0.18), /* thin highlight border */
    inset 0 0 0 2px rgba(37, 39, 44, 0.72),    /* darker inner border */
    inset 0 -14px 18px rgba(0, 0, 0, 0.28);    /* bottom inner shadow for depth */
}

/* Channel-selector slider rails on the left and right sides of the TV shell.
   Both ::before and ::after share the same base styling: narrow dark bars
   positioned near the bottom. */
.quote-crt-shell::before,
.quote-crt-shell::after {
  content: "";
  position: absolute;
  bottom: 0.86rem;
  width: 0.26rem;
  height: 1.82rem;
  background: linear-gradient(180deg, rgba(28, 31, 37, 0.94), rgba(8, 10, 14, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(118, 126, 142, 0.2),
    0 2px 5px rgba(0, 0, 0, 0.45);
}

/* Left slider rail */
.quote-crt-shell::before {
  left: 0.56rem;
}

/* Right slider rail */
.quote-crt-shell::after {
  right: 0.56rem;
}

/* The small brand/model badge bar across the top of the TV shell.  Flexbox
   puts the model text on the left and the indicator light on the right.
   The monospace font and uppercase style evoke vintage electronics labeling. */
.crt-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.12rem;
  min-height: 0.72rem;
  color: #b8bcc6;
  font-family: "Share Tech Mono", "Courier New", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.88px;
  text-transform: uppercase;
}

/* Slightly dimmed model name text */
.crt-badge-mark {
  opacity: 0.82;
}

/* The power/status indicator LED on the badge.  Multiple radial gradients
   stack to create a glowing yellow-green light with a metallic bezel.
   The final box-shadow adds a faint green glow halo around it. */
.crt-badge-light {
  width: 1.18rem;
  height: 0.72rem;
  background:
    radial-gradient(circle at 30% 38%, rgba(246, 255, 188, 0.66), rgba(168, 175, 124, 0.36) 58%, rgba(92, 96, 79, 0.24) 100%),
    linear-gradient(152deg, rgba(135, 141, 149, 0.5), rgba(42, 46, 52, 0.7));
  box-shadow:
    inset 0 0 0 1px rgba(28, 31, 36, 0.74),  /* dark bezel ring */
    0 0 0 1px rgba(120, 126, 136, 0.24),       /* outer highlight ring */
    0 0 8px rgba(214, 225, 146, 0.22);          /* green glow halo */
}

/* The recessed bezel around the CRT glass.  The near-black gradient simulates
   the deep plastic frame, and multiple inset shadows create a layered beveled
   effect — a thin highlight ring, a dark gasket ring, and top/bottom inner
   shadows to look concave. */
.crt-screen {
  position: relative;
  padding: 0.44rem;
  background:
    linear-gradient(145deg, rgba(16, 19, 24, 0.98), rgba(3, 4, 7, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(90, 95, 106, 0.22),   /* faint highlight ring */
    inset 0 0 0 2px rgba(7, 8, 12, 0.88),       /* dark gasket ring */
    inset 0 10px 14px rgba(0, 0, 0, 0.36),      /* shadow from top bezel */
    inset 0 -12px 14px rgba(0, 0, 0, 0.44);     /* shadow from bottom bezel */
}

/* The green phosphor screen surface — the "glass" of the CRT.  A central
   radial gradient creates the characteristic bright-center / dark-edge
   phosphor bloom.  The linear gradient base goes from dark green at top to
   near-black at bottom.  The inset box-shadow creates a thin green border
   glow and heavy vignette darkness around the edges. */
.crt-screen-surface {
  position: relative;
  height: 196px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0.78rem 0.82rem;
  background:
    radial-gradient(circle at 50% 42%, rgba(110, 190, 92, 0.2), rgba(32, 55, 28, 0.18) 44%, rgba(8, 13, 9, 0.98) 100%),
    linear-gradient(180deg, rgba(18, 35, 15, 0.94), rgba(7, 13, 9, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(125, 160, 111, 0.2),  /* thin green edge glow */
    inset 0 0 28px rgba(0, 0, 0, 0.6);          /* heavy vignette */
}

/* CRT scanlines and screen effects — ::before draws the scanlines.
   Layer 1: a top-edge white-green highlight simulating light reflecting off
   the curved glass at the top.
   Layer 2: repeating horizontal lines 1px green / 2px gap, which are the
   scanlines that make it look like a real CRT.
   Layer 3: left and right edge darkening to simulate the curvature of a tube. */
.crt-screen-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(214, 255, 194, 0.1), transparent 24%),  /* top reflection */
    repeating-linear-gradient(
      0deg,
      rgba(152, 230, 138, 0.11) 0,
      rgba(152, 230, 138, 0.11) 1px,
      transparent 1px,
      transparent 3px
    ),  /* horizontal scanlines */
    linear-gradient(90deg, rgba(7, 12, 9, 0.36), transparent 16%, transparent 84%, rgba(7, 12, 9, 0.36));  /* left/right edge darkening */
  opacity: 0.86;
}

/* Screen specular reflections — ::after adds two circular glare spots (one
   upper-left, one lower-right) that mimic light reflecting off the convex
   glass surface.  A bottom gradient simulates the shadow at the base of
   the screen. */
.crt-screen-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 14%, rgba(244, 255, 220, 0.2), transparent 28%),  /* upper-left glare */
    radial-gradient(circle at 78% 92%, rgba(130, 203, 118, 0.1), transparent 36%),  /* lower-right glare */
    linear-gradient(180deg, transparent 72%, rgba(6, 9, 8, 0.56) 100%);             /* bottom shadow */
}

/* The quote text displayed on the CRT screen.  The green phosphor color
   (#b2f7a2) with a matching green text-shadow creates the glowing-text
   effect.  The pixel font "Silkscreen" reinforces the retro terminal look.
   `max-width: 20ch` keeps lines short so the text wraps attractively on
   the small screen. */
.quote-crt #random-quote {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  max-width: 20ch;
  color: #b2f7a2;
  font-family: "Silkscreen", "Share Tech Mono", "Courier New", monospace;
  font-size: clamp(0.98rem, 1.56vw, 1.2rem);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: 0.5px;
  text-align: center;
  text-shadow:
    0 0 4px rgba(130, 228, 116, 0.48),  /* tight inner glow */
    0 0 10px rgba(99, 195, 88, 0.22);   /* wider diffuse glow */
}


/* The attribution line below the quote — slightly smaller and dimmer green
   to establish hierarchy while keeping the CRT aesthetic. */
.quote-crt #random-quote small {
  display: inline-block;
  margin-top: 0.36rem;
  color: #96df88;
  font-family: "Silkscreen", "Share Tech Mono", "Courier New", monospace;
  font-size: 0.7rem;
  line-height: 1.24;
  letter-spacing: 0.42px;
}

/* Emphasized text in quotes — rendered in a muted green without italics,
   since the pixel font doesn't have a true italic variant. */
.quote-crt #random-quote em {
  font-style: normal;
  color: #8ccf7f;
}

/* ==========================================================================
   CRT CONTROLS — the bottom panel of the television
   A dark metallic bar containing the brand label, channel-selector switches,
   and tuning knobs.  Uses a two-column grid: switches on the left, knobs on
   the right.  The ::before pseudo-element inserts the "SONY" brand text
   spanning the full width above both columns.
   ========================================================================== */
.crt-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.52rem;
  padding: 0.28rem 0.38rem 0.34rem;
  background:
    linear-gradient(180deg, rgba(44, 46, 52, 0.96), rgba(20, 22, 28, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(100, 106, 120, 0.22),  /* subtle highlight border */
    inset 0 1px 0 rgba(139, 146, 157, 0.16);     /* top-edge highlight line */
}

/* The "SONY" brand label — generated via CSS content and centered across the
   full grid width.  The text-shadow adds a dark pressed-in effect and a
   faint white glow, simulating embossed lettering on plastic. */
.crt-controls::before {
  content: "SONY";
  grid-column: 1 / -1;
  justify-self: center;
  margin-bottom: 0.04rem;
  color: #d7dce5;
  font-family: "Share Tech Mono", "Courier New", monospace;
  font-size: clamp(0.66rem, 1.06vw, 0.86rem);
  letter-spacing: 1.2px;
  line-height: 1;
  text-transform: uppercase;
  text-shadow:
    0 1px 0 rgba(19, 22, 30, 0.92),       /* dark emboss shadow below */
    0 0 4px rgba(220, 225, 236, 0.2);      /* faint ambient glow */
}

/* A row of six small channel-selector switches arranged in an even grid. */
.crt-switches {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.24rem;
}

/* Each individual switch — a small metallic rectangle with a top-to-bottom
   gradient simulating brushed metal, plus a dark inset border and a subtle
   drop shadow to look raised. */
.crt-switches span {
  height: 0.58rem;
  background:
    linear-gradient(180deg, rgba(170, 177, 186, 0.62), rgba(83, 89, 102, 0.7));
  box-shadow:
    inset 0 0 0 1px rgba(20, 22, 29, 0.74),
    0 1px 2px rgba(0, 0, 0, 0.42);
}

/* Container for the tuning knobs — a horizontal flex row. */
.crt-knobs {
  display: flex;
  align-items: center;
  gap: 0.24rem;
}

/* Each knob — a circular element created via equal width/height and the
   default border-radius (if set elsewhere) or inheriting rounded shape.
   The radial gradient places a highlight at upper-left and darkens toward
   the bottom-right, simulating a 3D spherical knob under overhead light. */
.crt-knobs span {
  position: relative;
  width: 0.82rem;
  height: 0.82rem;
  background:
    radial-gradient(circle at 34% 32%, rgba(195, 201, 210, 0.52), rgba(88, 94, 106, 0.74) 58%, rgba(42, 46, 54, 0.92) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(20, 24, 31, 0.82),  /* dark ring border */
    0 1px 2px rgba(0, 0, 0, 0.46);            /* small drop shadow */
}

/* The indicator notch on each knob — a tiny 1px-wide dark mark at the top
   center, showing the knob's rotational position. */
.crt-knobs span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.1rem;
  width: 1px;
  height: 0.2rem;
  transform: translateX(-50%);
  background: rgba(11, 13, 18, 0.92);
}

/* ==========================================================================
   ROOM CARD
   The generic "card" component used inside rooms (e.g., the intro room).
   Same dark warm gradient as the base `.room`, providing a recessed panel
   look within the room container.
   ========================================================================== */
.room-card {
  background:
    linear-gradient(168deg, rgba(38, 24, 16, 0.95), rgba(14, 10, 8, 0.96));
  box-shadow:
    0 20px 34px var(--shadow-soft),
    inset 0 0 20px rgba(158, 101, 50, 0.13);
  padding: 1.14rem 1.16rem 1rem;
}

/* ==========================================================================
   REGISTER CARD (House Register / Intro Card)
   A parchment-style card that sits in the intro room.  It's designed to look
   like an old guest register or ledger page — warm, papery, with visible
   texture.  Multiple background layers build up the effect:
     Layer 1: radial highlight in the upper-left (light hitting the page)
     Layer 2: radial warm tone in the lower-right (ambient color)
     Layer 3: repeating horizontal lines (ruled ledger lines)
     Layer 4: the base parchment gradient from cream to tan
   ========================================================================== */
.register-card {
  position: relative;
  color: var(--paper-ink);
  background:
    radial-gradient(circle at 14% 16%, rgba(255, 244, 220, 0.45), transparent 45%),  /* upper-left light */
    radial-gradient(circle at 88% 84%, rgba(179, 132, 78, 0.22), transparent 56%),   /* lower-right warmth */
    repeating-linear-gradient(
      0deg,
      rgba(91, 62, 35, 0.075) 0,
      rgba(91, 62, 35, 0.075) 1px,
      transparent 1px,
      transparent 4px
    ),  /* faint horizontal ruled lines */
    linear-gradient(152deg, #dcc59d, #caa978 58%, #ac8252 100%);  /* parchment base */
  box-shadow:
    0 18px 30px rgba(0, 0, 0, 0.44),          /* heavy drop shadow */
    inset 0 0 20px rgba(82, 53, 30, 0.2),     /* inner warmth */
    inset 0 1px 0 rgba(255, 239, 210, 0.42);  /* top highlight edge */
}

/* Cross-hatched texture overlay — two repeating linear gradients at 90deg
   and 0deg form a fine grid that simulates the woven fiber texture of aged
   paper.  `mix-blend-mode: multiply` lets the dark lines darken the card
   beneath without adding opacity to the light areas. */
.register-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(79, 53, 31, 0.06) 0,
      rgba(79, 53, 31, 0.06) 1px,
      transparent 1px,
      transparent 6px
    ),  /* vertical fiber lines */
    repeating-linear-gradient(
      0deg,
      rgba(67, 45, 26, 0.07) 0,
      rgba(67, 45, 26, 0.07) 1px,
      transparent 1px,
      transparent 3px
    );  /* horizontal fiber lines */
  mix-blend-mode: multiply;
  opacity: 0.62;
}

/* All direct children of the register card are lifted above the ::before
   texture overlay so they remain fully visible and interactive. */
.register-card > * {
  position: relative;
  z-index: 1;
}

/* Heading color inherits the paper ink variable. */
.register-card h2 {
  color: var(--paper-ink);
}

/* The register title — styled as a calligraphic signature using the
   "Herr Von Muellerhoff" cursive font.  The slight negative rotation and
   multi-layered text-shadow simulate the look of actual fountain-pen ink,
   with varying opacities creating the effect of ink pooling and bleeding
   slightly into the parchment. */
.register-card h2 {
  position: relative;
  display: inline-block;
  margin-bottom: 0.62rem;
  margin-left: 0.06rem;
  font-family: "Herr Von Muellerhoff", "IM Fell English", "Georgia", cursive;
  font-size: clamp(2.28rem, 3.6vw, 2.96rem);
  font-weight: 400;
  letter-spacing: 0.52px;
  line-height: 0.9;
  text-transform: none;
  color: #3b2315;
  text-shadow:
    -0.2px 0 rgba(43, 24, 14, 0.65),       /* slight leftward ink bleed */
    0.3px 0 rgba(69, 39, 23, 0.36),         /* rightward bleed, lighter */
    0.8px 0.9px 0 rgba(98, 62, 35, 0.16),   /* lower-right shadow (pen pressure) */
    0 0 1px rgba(44, 27, 16, 0.26);         /* diffuse ink halo */
  transform: rotate(-0.36deg);
}

/* A faint underline beneath the heading — a horizontal gradient that fades
   from visible to nearly invisible, mimicking a hand-ruled pen stroke that
   trails off at the right. */
.register-card h2::after {
  content: "";
  position: absolute;
  left: 0.1em;
  right: 0.1em;
  bottom: -0.1em;
  height: 1px;
  background: linear-gradient(90deg, rgba(83, 51, 30, 0.46), rgba(83, 51, 30, 0.16));
  transform: rotate(0.26deg);
  opacity: 0.84;
}

/* ==========================================================================
   REGISTER LINKS (Stacked Paper Sheets)
   The navigation links inside the register card are styled as overlapping
   sheets of paper, each offset slightly via CSS custom properties
   (--sheet-shift and --sheet-tilt).  Negative top margins cause them to
   overlap like papers in a pile.  A blurred shadow at the bottom of the
   container grounds the entire stack.
   ========================================================================== */
.register-links {
  position: relative;
  margin: 0;
  padding: 0.08rem 0.1rem 0.16rem;
}

/* A radial-gradient shadow beneath the link stack — blurred to create a
   soft pool of shadow, as if the pile of papers casts a diffuse shadow
   onto the card below. */
.register-links::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0;
  height: 16px;
  pointer-events: none;
  background: radial-gradient(60% 100% at 50% 50%, rgba(0, 0, 0, 0.34), transparent 80%);
  filter: blur(5px);
  opacity: 0.6;
}

/* Each link is a "sheet of paper" — block-level with a fixed height and
   negative top margin so sheets overlap.  The custom properties --sheet-shift
   and --sheet-tilt give each sheet a slightly different horizontal offset and
   rotation, so the pile looks naturally messy.  The background layers
   replicate the same parchment texture used on the register card, keeping
   visual consistency.  Transitions enable smooth hover animations. */
.register-links a {
  --sheet-shift: 0px;
  --sheet-tilt: 0deg;
  position: relative;
  display: block;
  height: 100px;
  margin-top: -56px;
  transform: translateX(var(--sheet-shift)) rotate(var(--sheet-tilt));
  transform-origin: left top;
  color: #4a311c;
  font-family: "IM Fell English SC", "IM Fell English", "Libre Caslon Text", "Georgia", serif;
  font-size: 0.96rem;
  text-transform: uppercase;
  letter-spacing: 0.72px;
  line-height: 1.15;
  background:
    radial-gradient(circle at 15% 14%, rgba(255, 244, 222, 0.5), transparent 44%),  /* upper-left light spot */
    repeating-linear-gradient(
      90deg,
      rgba(89, 61, 35, 0.05) 0,
      rgba(89, 61, 35, 0.05) 1px,
      transparent 1px,
      transparent 6px
    ),  /* vertical fiber texture */
    repeating-linear-gradient(
      0deg,
      rgba(89, 61, 35, 0.08) 0,
      rgba(89, 61, 35, 0.08) 1px,
      transparent 1px,
      transparent 4px
    ),  /* horizontal fiber texture */
    linear-gradient(152deg, #dfc8a2, #cfaf80 60%, #b88f5f 100%);  /* parchment gradient */
  box-shadow:
    inset 0 0 0 1px rgba(92, 62, 37, 0.3),        /* subtle inner border */
    inset 0 1px 0 rgba(255, 243, 219, 0.42),       /* top highlight edge */
    0 10px 16px rgba(0, 0, 0, 0.24);               /* drop shadow */
  padding: 0.5rem 0.72rem 0;
  transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease;
}

/* The first link doesn't need negative margin since there's nothing above
   it to overlap. */
.register-links a:first-child {
  margin-top: 0;
}

/* Per-sheet variations — each sheet gets a slightly different shift and tilt
   so the pile looks like papers were casually dropped.  Increasing z-index
   ensures later sheets stack on top of earlier ones. */
.register-links a:nth-child(1) {
  --sheet-shift: 3px;
  --sheet-tilt: -0.34deg;
  z-index: 1;
}

.register-links a:nth-child(2) {
  --sheet-shift: 9px;
  --sheet-tilt: 0.16deg;
  z-index: 2;
}

.register-links a:nth-child(3) {
  --sheet-shift: 13px;
  --sheet-tilt: 0.24deg;
  z-index: 3;
}

/* A shadow pseudo-element beneath each sheet that's slightly offset (3px right,
   4px down), creating the illusion of a secondary shadow where the paper lifts
   away from the surface.  The repeating lines add faint ruled-line texture
   visible in the shadow area. */
.register-links a::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(72, 47, 29, 0.24), transparent 32%, rgba(74, 49, 30, 0.08)),
    repeating-linear-gradient(
      0deg,
      rgba(86, 58, 34, 0.048) 0,
      rgba(86, 58, 34, 0.048) 1px,
      transparent 1px,
      transparent 4px
    );
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
  transform: translate(3px, 4px);
  opacity: 0.68;
}

/* Decorative faux handwriting lines on each paper sheet — drawn entirely
   with CSS gradients.  Four gradient layers at different vertical positions
   (0%, 36%, 62%, 86%) simulate broken horizontal lines of varying lengths,
   as if someone wrote fragmentary notes.  Each layer uses the shorthand
   `background-position / background-size` to position a 2px-tall stripe at
   a specific vertical offset.  The slight blur softens the lines to look
   more like pen strokes than sharp CSS edges. */
.register-links a::after {
  content: "";
  position: absolute;
  left: 0.72rem;
  right: 0.72rem;
  top: 1.28rem;
  bottom: 0.52rem;
  pointer-events: none;
  opacity: 0.56;
  background:
    linear-gradient(90deg, rgba(97, 66, 39, 0.48), rgba(97, 66, 39, 0.2)) 0 0 / 100% 1px no-repeat,
    linear-gradient(
      90deg,
      transparent 0 8%,
      rgba(84, 57, 34, 0.36) 8% 24%,
      transparent 24% 31%,
      rgba(84, 57, 34, 0.34) 31% 49%,
      transparent 49% 58%,
      rgba(84, 57, 34, 0.3) 58% 79%,
      transparent 79% 100%
    ) 0 36% / 100% 2px no-repeat,
    linear-gradient(
      90deg,
      transparent 0 5%,
      rgba(84, 57, 34, 0.3) 5% 19%,
      transparent 19% 27%,
      rgba(84, 57, 34, 0.33) 27% 43%,
      transparent 43% 56%,
      rgba(84, 57, 34, 0.29) 56% 72%,
      transparent 72% 83%,
      rgba(84, 57, 34, 0.27) 83% 94%,
      transparent 94% 100%
    ) 0 62% / 100% 2px no-repeat,
    linear-gradient(
      90deg,
      transparent 0 10%,
      rgba(84, 57, 34, 0.3) 10% 28%,
      transparent 28% 37%,
      rgba(84, 57, 34, 0.28) 37% 54%,
      transparent 54% 66%,
      rgba(84, 57, 34, 0.29) 66% 86%,
      transparent 86% 100%
    ) 0 86% / 100% 2px no-repeat;
  filter: blur(0.14px);
}

/* Hover state for the paper sheets — slightly lifts the sheet upward (-2px)
   and nudges it 1px to the left for a "picked up" effect.  The background
   brightens slightly (more saturated cream tones) to mimic paper catching
   light as it's raised. */
.register-links a:hover {
  color: #3f2817;
  transform: translateX(calc(var(--sheet-shift) - 1px)) rotate(var(--sheet-tilt)) translateY(-2px);
  background:
    radial-gradient(circle at 15% 14%, rgba(255, 248, 228, 0.58), transparent 44%),
    repeating-linear-gradient(
      90deg,
      rgba(89, 61, 35, 0.055) 0,
      rgba(89, 61, 35, 0.055) 1px,
      transparent 1px,
      transparent 6px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(89, 61, 35, 0.09) 0,
      rgba(89, 61, 35, 0.09) 1px,
      transparent 1px,
      transparent 4px
    ),
    linear-gradient(152deg, #e4cfab, #d3b487 60%, #be9668 100%);
}

/* ==========================================================================
   BOOKSHELF ROOM
   The bottom full-width room contains a decorative wooden bookshelf holding
   book-shaped navigation links.  The room itself has overflow hidden so no
   elements leak out, and a ::before overlay adds faint vertical wood-grain
   lines to the background.
   ========================================================================== */
.room-shelves {
  position: relative;
  overflow: hidden;
}

/* Faint vertical wood-grain lines overlaying the room background, adding
   texture that subtly reinforces the wooden furniture aesthetic. */
.room-shelves::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(148, 93, 45, 0.06) 0,
      rgba(148, 93, 45, 0.06) 2px,
      transparent 2px,
      transparent 28px
    );
  opacity: 0.55;
}

/* ==========================================================================
   BOOKSHELF TOP MOULDING
   A decorative wooden crown moulding that sits above the first row of books.
   Built from repeating gradients that alternate light-and-dark vertical
   stripes (simulating wood planks), over a vertical base gradient.  The
   box-shadow creates: a strong drop shadow below, a top-edge highlight, and
   a dark bottom-edge line.  Two pseudo-elements (::before and ::after) form
   inset moulding bands at different vertical positions on the plank.
   ========================================================================== */
.bookshelf-top {
  position: relative;
  z-index: 1;
  height: 44px;
  margin: 0.04rem 0.08rem 0.7rem;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(141, 87, 43, 0.2) 0,
      rgba(141, 87, 43, 0.2) 2px,
      rgba(67, 41, 24, 0.28) 2px,
      rgba(67, 41, 24, 0.28) 12px
    ),  /* alternating light/dark vertical wood planks */
    linear-gradient(180deg, rgba(106, 67, 37, 0.94), rgba(56, 35, 22, 0.95));  /* top-to-bottom gradient base */
  box-shadow:
    0 12px 16px rgba(0, 0, 0, 0.5),             /* drop shadow below */
    inset 0 1px 0 rgba(193, 133, 75, 0.32),     /* top-edge highlight */
    inset 0 -2px 0 rgba(25, 16, 11, 0.88);      /* dark bottom-edge line */
}

/* Upper moulding band — a narrower decorative strip near the top of the
   bookshelf-top element, using tighter plank spacing for visual variation. */
.bookshelf-top::before {
  content: "";
  position: absolute;
  left: 0.62rem;
  right: 0.62rem;
  top: 6px;
  height: 12px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(168, 114, 64, 0.25) 0,
      rgba(168, 114, 64, 0.25) 3px,
      rgba(83, 52, 30, 0.28) 3px,
      rgba(83, 52, 30, 0.28) 9px
    ),
    linear-gradient(180deg, rgba(95, 60, 35, 0.82), rgba(52, 33, 21, 0.84));
  box-shadow:
    inset 0 0 0 1px rgba(182, 126, 72, 0.28),  /* inner highlight ring */
    0 1px 0 rgba(22, 14, 10, 0.8);             /* bottom shadow line */
}

/* Lower moulding band — another decorative strip near the bottom, slightly
   wider insets and different plank proportions for visual rhythm. */
.bookshelf-top::after {
  content: "";
  position: absolute;
  left: 0.24rem;
  right: 0.24rem;
  bottom: 6px;
  height: 10px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(183, 126, 72, 0.24) 0,
      rgba(183, 126, 72, 0.24) 2px,
      rgba(84, 53, 30, 0.3) 2px,
      rgba(84, 53, 30, 0.3) 11px
    ),
    linear-gradient(180deg, rgba(86, 54, 31, 0.86), rgba(44, 28, 18, 0.9));
  box-shadow:
    inset 0 0 0 1px rgba(174, 120, 68, 0.24),
    0 -1px 0 rgba(15, 10, 7, 0.84);
}

/* The main bookshelf grid — holds rows of books with consistent spacing. */
.bookshelf {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.7rem;
  padding: 0 0.16rem 0.12rem;
}

/* ==========================================================================
   BOOKSHELF ROWS
   Each row holds books side by side.  The default layout is a 2-column grid
   with minimum 230px and maximum 338px per column, centered horizontally.
   Books align to the bottom edge (like real books sitting on a shelf).
   ========================================================================== */
.bookshelf-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(230px, 338px));
  justify-content: center;
  align-items: end;
  gap: 1.08rem;
}

/* Triple-column variant for rows with three books.  Uses flexible columns
   that fill available space equally. */
.bookshelf-row--triple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.96rem;
}

/* Cap each book's width in triple rows so they don't stretch too wide on
   large screens. */
.bookshelf-row--triple > .shelf-book {
  width: min(100%, 334px);
}

/* In triple rows, the three books are justified to start, center, and end
   respectively, so the row looks balanced even if columns are wider than
   the books' max-width. */
.bookshelf-row--triple > .shelf-book:nth-of-type(1) {
  justify-self: start;
}

.bookshelf-row--triple > .shelf-book:nth-of-type(2) {
  justify-self: center;
}

.bookshelf-row--triple > .shelf-book:nth-of-type(3) {
  justify-self: end;
}

/* Single variant also uses a 3-column grid (for consistent shelf plank
   widths) but may contain fewer than three books. */
.bookshelf-row--single {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.96rem;
}

.bookshelf-row--single > .shelf-book {
  width: min(100%, 334px);
}

.bookshelf-row--single > .shelf-book:nth-of-type(1) {
  justify-self: start;
}

.bookshelf-row--single > .shelf-book:nth-of-type(2) {
  justify-self: center;
}

.bookshelf-row--single > .shelf-book:nth-of-type(3) {
  justify-self: end;
}

/* ==========================================================================
   SHELF PLANK
   The wooden plank that each row of books sits on.  Like the bookshelf-top,
   it uses repeating vertical gradients for a wood-plank texture over a
   dark-to-darker base.  The negative top margin pulls it slightly up to
   tuck under the books.  The ::before and ::after pseudo-elements are small
   wooden bracket/support blocks at the left and right ends of the plank.
   ========================================================================== */
.shelf-plank {
  position: relative;
  height: 18px;
  margin: -0.08rem 0.08rem 0.06rem;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(132, 80, 40, 0.25) 0,
      rgba(132, 80, 40, 0.25) 2px,
      rgba(62, 38, 23, 0.34) 2px,
      rgba(62, 38, 23, 0.34) 14px
    ),  /* vertical wood-plank stripes */
    linear-gradient(180deg, rgba(92, 58, 33, 0.94), rgba(49, 31, 20, 0.95));  /* base gradient */
  box-shadow:
    0 10px 14px rgba(0, 0, 0, 0.52),            /* drop shadow below plank */
    inset 0 1px 0 rgba(186, 126, 71, 0.32),     /* top-edge wood highlight */
    inset 0 -2px 0 rgba(28, 19, 13, 0.85);      /* dark underside edge */
  transform: translateY(-1px);
}

/* Support brackets beneath the plank — small squares at the left and right
   sides that look like wooden wall-mounted shelf supports.  They share a
   warm wood gradient and a highlight ring. */
.shelf-plank::before,
.shelf-plank::after {
  content: "";
  position: absolute;
  bottom: -6px;
  width: 22px;
  height: 22px;
  background:
    linear-gradient(180deg, rgba(168, 117, 66, 0.5), rgba(83, 54, 32, 0.6));
  box-shadow:
    inset 0 0 0 1px rgba(188, 132, 75, 0.34),  /* inner highlight ring */
    0 6px 8px rgba(0, 0, 0, 0.36);              /* drop shadow */
}

/* Left bracket */
.shelf-plank::before {
  left: 12px;
}

/* Right bracket */
.shelf-plank::after {
  right: 12px;
}

/* Mobile-only plank variant — hidden by default on desktop; shown via media
   queries on smaller screens where the layout changes. */
.shelf-plank--mobile {
  display: none;
}

/* ==========================================================================
   SHELF BOOK
   Each navigation link on the bookshelf is styled as a 3D book.  The book
   uses CSS custom properties for its color theme so variant books can simply
   override these variables.  The default palette is a warm brown leather.

   The grid layout splits each book into two columns: a 68px spine on the
   left and the front cover filling the remaining space.

   The background layers build up the book cover texture:
     Layer 1: radial highlight in the upper-right corner
     Layer 2: repeating vertical grain lines
     Layer 3: diagonal base gradient using --cover-main / --cover-dark

   Heavy box-shadow creates depth.  The border adds a subtle edge.  Right
   padding and bottom padding leave room for the page-edge detail (::after).
   ========================================================================== */
.shelf-book {
  --spine-main: #6f4324;
  --spine-dark: #442818;
  --spine-emboss: rgba(194, 132, 68, 0.34);
  --cover-main: #43291a;
  --cover-dark: #1d120d;
  --book-title-font: "Libre Caslon Display";
  --title-front-size: 2rem;
  --title-front-spacing: 0.35px;
  --title-front-tilt: rotate(0deg);
  --title-spine-size: 0.68rem;
  --title-spine-spacing: 1.05px;
  --book-rib: repeating-linear-gradient(
    90deg,
    rgba(196, 137, 75, 0.14) 0,
    rgba(196, 137, 75, 0.14) 1px,
    rgba(66, 39, 24, 0.22) 1px,
    rgba(66, 39, 24, 0.22) 5px
  );  /* horizontal rib texture for the spine */
  --book-grain: repeating-linear-gradient(
    0deg,
    rgba(168, 114, 63, 0.11) 0,
    rgba(168, 114, 63, 0.11) 1px,
    rgba(43, 27, 18, 0.2) 1px,
    rgba(43, 27, 18, 0.2) 4px
  );  /* vertical grain texture for the spine */
  position: relative;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  width: min(100%, 334px);
  min-height: 388px;
  background:
    radial-gradient(circle at 85% 12%, rgba(196, 136, 74, 0.16), transparent 42%),  /* upper-right cover highlight */
    repeating-linear-gradient(
      90deg,
      rgba(124, 80, 45, 0.07) 0,
      rgba(124, 80, 45, 0.07) 2px,
      rgba(61, 38, 24, 0.12) 2px,
      rgba(61, 38, 24, 0.12) 9px
    ),  /* vertical grain lines */
    linear-gradient(168deg, var(--cover-main), var(--cover-dark));  /* base cover gradient */
  box-shadow:
    0 18px 30px rgba(0, 0, 0, 0.63),            /* deep drop shadow */
    inset 0 0 20px rgba(157, 102, 52, 0.18),    /* inner warm glow */
    inset 0 1px 0 rgba(214, 154, 90, 0.12);     /* top-edge highlight */
  border: 1px solid rgba(74, 46, 28, 0.5);
  overflow: hidden;
  margin-top: 0;
  margin-right: 0;
  padding-right: 28px;
  padding-bottom: 22px;
  transform-origin: center bottom;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

/* A full-cover lighting overlay — a vertical gradient that's bright at the
   top and dark at the bottom, simulating overhead light falling on the front
   cover.  Inset by the padding values to match the visible cover area. */
.shelf-book::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 28px;
  bottom: 22px;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(205, 146, 88, 0.08), transparent 30%, rgba(19, 13, 9, 0.38) 100%);
  z-index: 2;
}

/* The page edges — a narrow strip on the right side of the book that
   simulates the visible pages.  The repeating horizontal gradient alternates
   light cream and slightly darker cream stripes (individual pages).
   The clip-path creates an irregular jagged edge, mimicking the uneven
   look of real book pages.  A left-side shadow suggests the pages recede
   under the cover. */
.shelf-book::after {
  content: "";
  position: absolute;
  right: 0.18rem;
  top: 0.86rem;
  width: 10px;
  height: calc(100% - 1.7rem);
  pointer-events: none;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(224, 196, 156, 0.92) 0,
      rgba(224, 196, 156, 0.92) 2px,
      rgba(170, 132, 90, 0.92) 2px,
      rgba(170, 132, 90, 0.92) 3px
    );  /* alternating page-edge stripes */
  clip-path: polygon(0 0, 100% 5%, 82% 14%, 100% 24%, 76% 37%, 100% 51%, 80% 64%, 100% 78%, 74% 90%, 100% 100%, 0 100%);  /* jagged right edge */
  box-shadow:
    inset 0 0 0 1px rgba(82, 53, 30, 0.32),  /* subtle border */
    -2px 0 4px rgba(0, 0, 0, 0.34);           /* shadow where pages meet spine */
  opacity: 0.86;
  z-index: 3;
}

/* Hover effect — the book lifts slightly upward and scales up just barely,
   with a deeper shadow to enhance the floating illusion. */
.shelf-book:hover {
  transform: translateY(-6px) scale(1.008);
  box-shadow:
    0 28px 36px rgba(0, 0, 0, 0.74),
    inset 0 0 20px rgba(171, 113, 60, 0.24);
}

/* A modifier for books that lean — removes any default transform so the
   lean transform (set elsewhere, e.g., inline style) takes precedence. */
.shelf-book--lean {
  transform: none;
}

/* On hover the leaning book still lifts and scales like a normal book. */
.shelf-book--lean:hover {
  transform: translateY(-6px) scale(1.008);
}

/* Taller variant for books that need extra height. */
.shelf-book--tall {
  min-height: 418px;
}

/* ==========================================================================
   UMBER BOOK VARIANT (shelf-book--umber)
   A yellow-and-black color scheme override — resembles a "For Dummies"
   style book.  Overrides the default brown custom properties with dark
   near-black for the spine and bright yellow for the cover.  The rib and
   grain patterns are recolored to match.  The title font switches to
   Trebuchet MS for a modern sans-serif look.
   ========================================================================== */
.shelf-book--umber {
  --spine-main: #1a1d20;
  --spine-dark: #0d0f11;
  --spine-emboss: rgba(241, 244, 246, 0.18);
  --cover-main: #f5d20d;
  --cover-dark: #e2bf05;
  --book-rib: repeating-linear-gradient(
    90deg,
    rgba(13, 15, 17, 0.07) 0,
    rgba(13, 15, 17, 0.07) 1px,
    rgba(255, 233, 115, 0.12) 1px,
    rgba(255, 233, 115, 0.12) 6px
  );
  --book-grain: repeating-linear-gradient(
    0deg,
    rgba(13, 15, 17, 0.05) 0,
    rgba(13, 15, 17, 0.05) 1px,
    rgba(255, 247, 183, 0.1) 1px,
    rgba(255, 247, 183, 0.1) 4px
  );
  --book-title-font: "Trebuchet MS";
  --title-front-size: 1.48rem;
  --title-front-spacing: 1.1px;
  --title-front-tilt: rotate(0deg);
  --title-spine-size: 1.29rem;
  --title-spine-spacing: 0.9px;
}

/* The umber book has no visible page edges since the yellow cover design
   doesn't call for them. */
.shelf-book--umber::after {
  content: none;
}

/* The umber spine title gets white text on a multi-band background: mostly
   black with a thin yellow stripe and a thin red stripe (at 72%-78% and
   78%-82% respectively) for a distinctive color-blocked spine design.
   The text-shadow creates a deeply pressed-in and subtly glowing effect. */
.shelf-book--umber .book-spine-title {
  color: #f8fbff;
  font-weight: 700;
  text-transform: uppercase;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  background:
    linear-gradient(90deg, #101316 0 72%, #f0cd0a 72% 78%, #d73122 78% 82%, #101316 82% 100%),  /* color-blocked spine bands */
    repeating-linear-gradient(
      0deg,
      rgba(236, 239, 242, 0.06) 0,
      rgba(236, 239, 242, 0.06) 1px,
      rgba(7, 8, 10, 0.28) 1px,
      rgba(7, 8, 10, 0.28) 3px
    );  /* subtle horizontal grain */
  box-shadow:
    inset 0 0 0 1px rgba(243, 246, 249, 0.14),  /* faint inner highlight */
    inset -1px 0 0 rgba(6, 7, 8, 0.84),         /* right-side dark edge */
    inset 2px 0 0 rgba(55, 58, 62, 0.42);       /* left-side mid-tone edge */
  text-shadow:
    0 1px 0 rgba(8, 9, 10, 0.95),    /* strong dark press-in */
    0 0 5px rgba(255, 255, 255, 0.2); /* faint white glow */
}

/* The umber spine title's decorative lines (::before and ::after) are
   restyled as thin horizontal dividers that fade from transparent at the
   edges to a faint white at center, replacing the default brown embossed
   lines with something that works on the dark spine. */
.shelf-book--umber .book-spine-title::before,
.shelf-book--umber .book-spine-title::after {
  left: 8px;
  right: 8px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(246, 248, 250, 0.26), transparent);
  box-shadow: none;
}

/* ==========================================================================
   SHELF-BOOK--UMBER: "Video Games" book variant
   This book uses a bright golden-yellow cover to stand out on the shelf.
   The umber variant overrides the generic book styles with a custom
   cover image area, spine binding detail, and decorative red dots.
   ========================================================================== */

/* Book cover face — layered gradients build a realistic yellow cloth texture:
   1. Top-left radial highlight simulates light catching the cover
   2. Bottom-right radial adds a warm shadow pocket
   3. Vertical repeating-linear-gradient creates fine ribbing (cloth weave)
   4. Horizontal repeating-linear-gradient adds cross-grain texture
   5. Base diagonal gradient provides the dominant gold-to-dark-gold color */
.shelf-book--umber .book-cover {
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 243, 162, 0.42), transparent 42%),
    radial-gradient(circle at 82% 84%, rgba(199, 158, 0, 0.24), transparent 58%),
    repeating-linear-gradient(
      90deg,
      rgba(17, 19, 22, 0.06) 0,
      rgba(17, 19, 22, 0.06) 1px,
      rgba(255, 235, 126, 0.12) 1px,
      rgba(255, 235, 126, 0.12) 6px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(12, 14, 16, 0.04) 0,
      rgba(12, 14, 16, 0.04) 1px,
      rgba(255, 246, 184, 0.08) 1px,
      rgba(255, 246, 184, 0.08) 4px
    ),
    linear-gradient(164deg, #f7d511, #f0cc08 67%, #dcba03 100%);
  /* Triple inset shadow: dark border line, inner bright highlight, bottom edge darkening */
  box-shadow:
    inset 0 0 0 1px rgba(35, 35, 35, 0.3),
    inset 0 0 0 3px rgba(255, 247, 189, 0.28),
    inset 0 -1px 0 rgba(30, 27, 5, 0.32);
}

/* Cover illustration area — a rectangular panel on the top portion of the cover.
   The three-band gradient (white, gray, dark) mimics a small screen or image area,
   with inset shadows for a recessed look and a drop shadow for depth. */
.shelf-book--umber .book-cover::before {
  content: "";
  left: 0.96rem;
  right: 1.04rem;
  top: 0.74rem;
  height: 43%;
  background:
    linear-gradient(180deg, #eceff1 0 58%, #59626d 58% 66%, #313741 66% 100%);
  box-shadow:
    inset 0 0 0 1px rgba(72, 79, 86, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Vertical spine binding strip on the left edge of the cover.
   A narrow dark band runs the full cover height, with right-edge colored
   lines (gold + red) that evoke the layered binding tape of a real book. */
.shelf-book--umber .book-cover::after {
  content: "";
  left: 0.48rem;
  right: auto;
  top: 0.58rem;
  width: 8px;
  height: calc(100% - 1.16rem);
  background: linear-gradient(180deg, #111417, #060708 100%);
  clip-path: none;
  box-shadow:
    1px 0 0 rgba(252, 215, 36, 0.62),   /* gold stripe along the right edge */
    2px 0 0 rgba(212, 45, 32, 0.78);     /* red stripe just outside the gold */
  opacity: 1;
  z-index: 3;
}

/* Front-face body container for the umber book — stretches to fill the
   cover, aligns children centrally, and pushes content toward the bottom
   with justify-content: flex-end so the title sits near the book's base. */
.shelf-book--umber .shelf-body {
  min-height: 100%;
  padding: 0.92rem 0.5rem 0.5rem;
  align-items: center;
  justify-content: flex-end;
}

/* Decorative red dots on the cover face — both ::before and ::after create
   small circular badges. A radial gradient gives each dot a 3D highlight
   (lighter top-left, darker bottom-right). Clipped to a circle via clip-path. */
.shelf-book--umber .shelf-body::before,
.shelf-book--umber .shelf-body::after {
  content: "";
  width: 18px;
  height: 18px;
  top: 49%;
  background: radial-gradient(circle at 34% 30%, #ff8f8a, #de3428 68%, #9c190f 100%);
  border: 1px solid rgba(73, 20, 14, 0.54);
  clip-path: circle(50% at 50% 50%);
  box-shadow:
    inset 0 1px 0 rgba(255, 193, 189, 0.58),  /* top specular highlight */
    0 1px 2px rgba(0, 0, 0, 0.32);              /* subtle drop shadow */
  opacity: 1;
}

/* Position the first red dot slightly left of center */
.shelf-book--umber .shelf-body::before {
  left: 47%;
}

/* Position the second red dot to the right */
.shelf-book--umber .shelf-body::after {
  right: 33%;
}

/* Title container on the umber cover — made invisible (color: transparent,
   font-size: 0) so its actual text content is hidden. The real visible title
   is rendered via ::before and ::after pseudo-elements below. This approach
   keeps the semantic <h3> in the DOM for accessibility while allowing full
   visual control over the two-line title layout. */
.shelf-book--umber .shelf-body h3 {
  width: min(78%, 206px);
  margin-top: 0;
  position: relative;
  min-height: 2.78rem;
  color: transparent;
  background: none;
  border: none;
  box-shadow: none;
  font-size: 0;
  line-height: 1;
  padding: 0;
  text-shadow: none;
  transform: none;
}

/* First line of the title: "VIDEO GAMES" — positioned absolutely so it
   sits at the top of the invisible h3 container. Uses Trebuchet MS for
   a clean sans-serif look distinct from the serif used on other books. */
.shelf-book--umber .shelf-body h3::before {
  content: "VIDEO GAMES";
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  top: 0;
  color: #11161c;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 1.04rem;
  font-weight: 700;
  letter-spacing: 1.14px;
  line-height: 1.02;
  text-transform: uppercase;
  border: none;
  box-shadow: none;
  background: none;
}

/* Second line of the title: "CONSOLE 2.0" — uses display:block with
   margin-top to sit below the first line. Slightly larger font creates
   a hierarchical subtitle effect. */
.shelf-book--umber .shelf-body h3::after {
  content: "CONSOLE 2.0";
  display: block;
  margin-top: 1.26rem;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.7px;
  color: #13171d;
  text-transform: uppercase;
}

/* ==========================================================================
   SHELF-BOOK--COPPER: "Screenplay" book variant
   A dark charcoal/near-black book that feels like a leather-bound notebook.
   Custom properties define the dark color palette, fine cloth texture
   gradients, and serif typography for its spine and cover titles.
   ========================================================================== */
.shelf-book--copper {
  --spine-main: #2a2d30;
  --spine-dark: #141618;
  --spine-emboss: rgba(242, 244, 247, 0.12);
  --cover-main: #26292c;
  --cover-dark: #121416;
  /* Vertical ribbing: alternating thin bright lines and wide dark bands */
  --book-rib: repeating-linear-gradient(
    90deg,
    rgba(241, 243, 245, 0.04) 0,
    rgba(241, 243, 245, 0.04) 1px,
    rgba(14, 16, 18, 0.26) 1px,
    rgba(14, 16, 18, 0.26) 5px
  );
  /* Horizontal grain: very subtle light flecks against a dark weave */
  --book-grain: repeating-linear-gradient(
    0deg,
    rgba(237, 239, 242, 0.03) 0,
    rgba(237, 239, 242, 0.03) 1px,
    rgba(8, 9, 11, 0.2) 1px,
    rgba(8, 9, 11, 0.2) 3px
  );
  --book-title-font: "Libre Caslon Text";
  --title-front-size: 1.56rem;
  --title-front-spacing: 1.1px;
  --title-front-tilt: rotate(0deg);
  --title-spine-size: 1.26rem;
  --title-spine-spacing: 0.92px;
}

/* Disable the default page-edge ribbon for this variant */
.shelf-book--copper::after {
  content: none;
}

/* Spine title on the dark copper book — white text on a dark background
   with subtle cloth texture layered over a top-to-bottom gradient.
   The text glows faintly (white text-shadow) against the dark spine. */
.shelf-book--copper .book-spine-title {
  color: #f6f8fb;
  font-weight: 700;
  text-transform: uppercase;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.07), transparent 36%),
    var(--book-grain),
    var(--book-rib),
    linear-gradient(180deg, #35393d, #1a1c1f 68%, #101113 100%);
  box-shadow:
    inset 0 0 0 1px rgba(241, 243, 245, 0.11),  /* faint outline */
    inset -2px 0 0 rgba(8, 9, 10, 0.8),           /* deep left groove */
    inset 2px 0 0 rgba(70, 73, 78, 0.34);         /* lighter right edge */
  text-shadow:
    0 1px 0 rgba(10, 11, 12, 0.94),               /* hard drop shadow for legibility */
    0 0 7px rgba(255, 255, 255, 0.2);              /* soft glow halo */
}

/* Horizontal rule lines at top and bottom of the spine title.
   A centered-fade gradient creates a thin silver line that tapers at both ends. */
.shelf-book--copper .book-spine-title::before,
.shelf-book--copper .book-spine-title::after {
  left: 8px;
  right: 8px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(241, 243, 245, 0.28), transparent);
  box-shadow: none;
}

/* Front cover of the copper book — extremely dark with layered textures:
   1. Top-left radial highlight (very faint white)
   2. Bottom-right radial adds depth
   3. Horizontal grain texture
   4. Vertical rib texture
   5. Dark diagonal base gradient
   Heavy inset shadows create a deep "sunken leather" feel. */
.shelf-book--copper .book-cover {
  background:
    radial-gradient(circle at 24% 17%, rgba(255, 255, 255, 0.08), transparent 42%),
    radial-gradient(circle at 84% 84%, rgba(255, 255, 255, 0.04), transparent 56%),
    repeating-linear-gradient(
      0deg,
      rgba(235, 238, 243, 0.028) 0,
      rgba(235, 238, 243, 0.028) 1px,
      rgba(11, 12, 14, 0.2) 1px,
      rgba(11, 12, 14, 0.2) 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(235, 238, 242, 0.024) 0,
      rgba(235, 238, 242, 0.024) 1px,
      rgba(16, 18, 20, 0.24) 1px,
      rgba(16, 18, 20, 0.24) 5px
    ),
    linear-gradient(165deg, #2f3337, #17191c 70%, #0d0e10 100%);
  box-shadow:
    inset 0 0 0 1px rgba(227, 230, 236, 0.1),   /* thin bright border */
    inset 0 0 0 3px rgba(0, 0, 0, 0.34),          /* wider dark frame */
    inset 0 0 26px rgba(0, 0, 0, 0.58),           /* large inner vignette */
    inset 0 -1px 0 rgba(0, 0, 0, 0.82);           /* bottom crease */
}

/* No top decorative panel on this book — keep the cover clean */
.shelf-book--copper .book-cover::before {
  content: none;
}

/* Right-edge binding strip — a narrow vertical bar simulating the fore
   edge or a raised binding seam on the right side of the cover. */
.shelf-book--copper .book-cover::after {
  content: "";
  right: 0.66rem;
  top: 0.42rem;
  width: 10px;
  height: calc(100% - 0.84rem);
  background: linear-gradient(180deg, #3d4145, #1d1f22 74%, #151719 100%);
  clip-path: none;
  box-shadow:
    -1px 0 0 rgba(238, 241, 245, 0.08),  /* left highlight edge */
    0 0 8px rgba(0, 0, 0, 0.42);           /* ambient shadow */
  opacity: 1;
  z-index: 3;
}

/* Front-face body layout: centered content, vertically centered via
   justify-content: center (unlike the umber book which pushes to bottom). */
.shelf-book--copper .shelf-body {
  min-height: 100%;
  padding: 0.94rem 0.48rem 0.46rem;
  align-items: center;
  justify-content: center;
}

/* No decorative pseudo-element ornaments on this dark book's face */
.shelf-book--copper .shelf-body::before,
.shelf-book--copper .shelf-body::after {
  content: none;
}

/* Invisible h3 container — same technique as umber: the real text is
   hidden and replaced by styled pseudo-elements for full layout control. */
.shelf-book--copper .shelf-body h3 {
  width: min(76%, 194px);
  margin-top: 0.42rem;
  position: relative;
  min-height: 2.72rem;
  color: transparent;
  background: none;
  border: none;
  box-shadow: none;
  font-size: 0;
  line-height: 1;
  padding: 0;
  text-shadow: none;
  transform: none;
}

/* "SCREENPLAY" title line — light text on the dark cover, uppercase serif */
.shelf-book--copper .shelf-body h3::before {
  content: "SCREENPLAY";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  color: #edf0f3;
  font-family: "Libre Caslon Text", "Georgia", serif;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: 1.22px;
  line-height: 1.02;
  text-transform: uppercase;
  background: none;
  border: none;
}

/* "IN PROGRESS" subtitle — slightly larger, display-weight serif for emphasis */
.shelf-book--copper .shelf-body h3::after {
  content: "IN PROGRESS";
  display: block;
  margin-top: 1.28rem;
  color: #f1f3f6;
  font-family: "Libre Caslon Display", "Libre Caslon Text", "Georgia", serif;
  font-size: 1.34rem;
  font-weight: 700;
  letter-spacing: 1.28px;
  line-height: 0.98;
  text-transform: uppercase;
}

/* ==========================================================================
   SHELF-BOOK--OLIVE: "Film" book variant
   A rich purple book with gold foil accents — inspired by classic literary
   editions. Custom properties set the deep violet palette and warm gold
   textures for spine ribs and grain patterns.
   ========================================================================== */
.shelf-book--olive {
  --spine-main: #4f356e;
  --spine-dark: #251737;
  --spine-emboss: rgba(199, 160, 89, 0.46);
  --cover-main: #563a78;
  --cover-dark: #271a3d;
  /* Vertical ribs: thin gold lines separated by dark purple bands */
  --book-rib: repeating-linear-gradient(
    90deg,
    rgba(208, 168, 95, 0.12) 0,
    rgba(208, 168, 95, 0.12) 1px,
    rgba(41, 27, 60, 0.28) 1px,
    rgba(41, 27, 60, 0.28) 5px
  );
  /* Horizontal grain: thin gold flecks on a dark violet weave */
  --book-grain: repeating-linear-gradient(
    0deg,
    rgba(219, 181, 108, 0.07) 0,
    rgba(219, 181, 108, 0.07) 1px,
    rgba(31, 19, 46, 0.3) 1px,
    rgba(31, 19, 46, 0.3) 4px
  );
  --book-title-font: "Libre Caslon Display";
  --title-front-size: 1.7rem;
  --title-front-spacing: 1.02px;
  --title-front-tilt: rotate(0deg);
  --title-spine-size: 1.2rem;
  --title-spine-spacing: 0.9px;
}

/* Disable the default page-edge ribbon for this variant */
.shelf-book--olive::after {
  content: none;
}

/* Spine title — warm gold text on a purple background, layered with
   grain and rib textures for realistic cloth. The glow text-shadow
   gives the gold lettering a "hot stamp" foil appearance. */
.shelf-book--olive .book-spine-title {
  color: #f7dfae;
  font-family: "Libre Caslon Text", "Georgia", serif;
  font-weight: 700;
  text-transform: uppercase;
  background:
    radial-gradient(circle at 50% 12%, rgba(218, 178, 102, 0.16), transparent 34%),
    var(--book-grain),
    var(--book-rib),
    linear-gradient(180deg, #593c7c, #2d1d42 72%, #1f142d 100%);
  box-shadow:
    inset 0 0 0 1px rgba(199, 160, 88, 0.42),   /* gold border outline */
    inset -2px 0 0 rgba(18, 11, 26, 0.8),         /* left binding crease */
    inset 2px 0 0 rgba(102, 74, 136, 0.44);       /* right purple highlight */
  text-shadow:
    0 1px 0 rgba(14, 9, 20, 0.98),                /* hard dark drop shadow */
    0 0 7px rgba(236, 198, 125, 0.32);             /* warm gold glow */
}

/* Decorative gold bands at top and bottom of the spine — a dashed pattern
   (repeating-linear-gradient) layered over a solid gold bar that fades
   at the edges (the second linear-gradient). Creates an ornamental motif. */
.shelf-book--olive .book-spine-title::before,
.shelf-book--olive .book-spine-title::after {
  left: 10px;
  right: 10px;
  height: 10px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(220, 179, 102, 0.22) 0,
      rgba(220, 179, 102, 0.22) 1px,
      transparent 1px,
      transparent 6px
    ),
    linear-gradient(
      90deg,
      transparent,
      rgba(219, 176, 95, 0.94) 20%,
      rgba(219, 176, 95, 0.94) 80%,
      transparent
    );
  box-shadow: none;
}

/* Cover face — deep purple with gold-tinted highlights:
   1. Top-left warm radial highlight
   2. Bottom-right cool purple radial
   3. Horizontal and vertical texture grids
   5. Base diagonal gradient from light purple to very dark violet */
.shelf-book--olive .book-cover {
  background:
    radial-gradient(circle at 18% 15%, rgba(225, 188, 111, 0.18), transparent 42%),
    radial-gradient(circle at 82% 84%, rgba(147, 106, 188, 0.13), transparent 54%),
    repeating-linear-gradient(
      0deg,
      rgba(34, 21, 49, 0.34) 0,
      rgba(34, 21, 49, 0.34) 1px,
      rgba(46, 30, 66, 0.34) 1px,
      rgba(46, 30, 66, 0.34) 4px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(87, 59, 119, 0.22) 0,
      rgba(87, 59, 119, 0.22) 1px,
      rgba(36, 24, 53, 0.28) 1px,
      rgba(36, 24, 53, 0.28) 6px
    ),
    linear-gradient(165deg, #64458a, #35224f 70%, #221535 100%);
  box-shadow:
    inset 0 0 0 1px rgba(31, 21, 46, 0.84),       /* dark inner border */
    inset 0 0 0 3px rgba(199, 159, 88, 0.2),       /* faint gold inner frame */
    inset 0 0 22px rgba(10, 7, 17, 0.54);           /* deep purple vignette */
}

/* Top gold ornamental bar on the cover — a dashed gold stripe (repeating
   gradient) over a semi-transparent purple band, with a gold inset border
   and a bottom shadow line for depth. */
.shelf-book--olive .book-cover::before {
  left: 0.74rem;
  right: 0.74rem;
  top: 0.76rem;
  height: 9px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(220, 179, 101, 0.9) 0,
      rgba(220, 179, 101, 0.9) 1px,
      transparent 1px,
      transparent 7px
    ),
    linear-gradient(180deg, rgba(90, 62, 124, 0.24), rgba(45, 29, 66, 0.24));
  box-shadow:
    inset 0 0 0 1px rgba(206, 166, 92, 0.4),
    0 1px 0 rgba(11, 8, 17, 0.74);
}

/* Centered asterisk ornament on the cover — instead of a shape, this
   pseudo-element renders a gold "*" character centered horizontally
   near the bottom of the cover face for a classic publisher's mark. */
.shelf-book--olive .book-cover::after {
  content: "*";
  right: auto;
  top: auto;
  left: 50%;
  bottom: 4.8rem;
  width: auto;
  height: auto;
  transform: translateX(-50%);
  clip-path: none;
  background: none;
  box-shadow: none;
  color: rgba(228, 187, 109, 0.88);
  font-size: 0.7rem;
  line-height: 1;
  opacity: 0.9;
}

/* Front-face body — pushed to the top with flex-start and extra top padding,
   leaving room for the decorative lines at the bottom. */
.shelf-book--olive .shelf-body {
  min-height: 100%;
  padding: 1.32rem 0.5rem 0.64rem;
  justify-content: flex-start;
}

/* Twin horizontal gold lines near the bottom of the cover face.
   Both pseudo-elements are positioned absolutely; the gradient fades
   at both ends so the line tapers gracefully into the background. */
.shelf-book--olive .shelf-body::before,
.shelf-book--olive .shelf-body::after {
  content: "";
  left: 14%;
  right: 14%;
  width: auto;
  height: 1px;
  top: auto;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(222, 181, 102, 0.96) 14%,
    rgba(222, 181, 102, 0.96) 86%,
    transparent
  );
  clip-path: none;
  box-shadow: none;
  opacity: 0.94;
}

/* First decorative line — positioned higher (further from bottom) */
.shelf-book--olive .shelf-body::before {
  bottom: 2.12rem;
}

/* Second decorative line — positioned closer to the bottom edge */
.shelf-book--olive .shelf-body::after {
  bottom: 1.44rem;
}

/* Title text on the olive cover — gold-colored with a deep drop shadow
   and warm glow to simulate gold-foil stamping on dark cloth.
   Unlike umber and copper, this h3 is directly visible (not hidden). */
.shelf-book--olive .shelf-body h3 {
  width: min(74%, 188px);
  margin-top: 2.08rem;
  color: #f0ce96;
  background: none;
  border: none;
  box-shadow: none;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  line-height: 1.05;
  font-size: 1.64rem;
  padding: 0;
  text-shadow:
    0 1px 0 rgba(18, 11, 26, 0.95),
    0 0 8px rgba(228, 188, 112, 0.3);
}

/* Top ornamental band above the title — a dashed gold stripe matching
   the spine decoration, creating visual continuity between spine and cover. */
.shelf-book--olive .shelf-body h3::before {
  content: "";
  position: absolute;
  left: 11%;
  right: 11%;
  top: -1.1rem;
  height: 8px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(219, 177, 98, 0.88) 0,
      rgba(219, 177, 98, 0.88) 1px,
      transparent 1px,
      transparent 8px
    ),
    linear-gradient(
      90deg,
      transparent,
      rgba(219, 177, 98, 0.86) 10%,
      rgba(219, 177, 98, 0.86) 90%,
      transparent
    );
}

/* Volume number subtitle — small gold text flanked by asterisks,
   indicating this is the third book in the collection. */
.shelf-book--olive .shelf-body h3::after {
  content: "*  VOLUME III  *";
  display: block;
  margin-top: 0.34rem;
  font-family: "Libre Caslon Display", "Libre Caslon Text", "Georgia", serif;
  font-size: 0.54rem;
  line-height: 1;
  letter-spacing: 1.04px;
  color: rgba(226, 185, 108, 0.84);
}

/* ==========================================================================
   SHELF-BOOK--CLARET: "Self-Hosting" book variant
   A light cream/off-white book with a teal accent band at the bottom —
   looks like a modern Penguin Classics-style paperback. The two-tone
   design (cream top, teal bottom) is the most distinctive feature.
   ========================================================================== */
.shelf-book--claret {
  --spine-main: #f4efe6;
  --spine-dark: #d8d0c2;
  --spine-emboss: rgba(61, 68, 75, 0.22);
  --cover-main: #f7f3ec;
  --cover-dark: #ddd3c5;
  /* Subtle gray ribbing on the light cover */
  --book-rib: repeating-linear-gradient(
    90deg,
    rgba(92, 97, 102, 0.08) 0,
    rgba(92, 97, 102, 0.08) 1px,
    rgba(244, 239, 230, 0.12) 1px,
    rgba(244, 239, 230, 0.12) 5px
  );
  /* Fine horizontal grain — very low opacity on the light background */
  --book-grain: repeating-linear-gradient(
    0deg,
    rgba(109, 114, 121, 0.06) 0,
    rgba(109, 114, 121, 0.06) 1px,
    rgba(252, 249, 244, 0.14) 1px,
    rgba(252, 249, 244, 0.14) 4px
  );
  --book-title-font: "Libre Caslon Text";
  --title-front-size: 1.56rem;
  --title-front-spacing: 0.98px;
  --title-front-tilt: rotate(0deg);
  --title-spine-size: 1.26rem;
  --title-spine-spacing: 0.88px;
}

/* Disable the default page-edge ribbon */
.shelf-book--claret::after {
  content: none;
}

/* Spine title — dark text on a light cream background with a teal
   band occupying the bottom 26% of the spine. The grain overlay adds
   a paper-like texture to the cream portion. */
.shelf-book--claret .book-spine-title {
  color: #12171d;
  font-family: "Libre Caslon Text", "Georgia", serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(108, 113, 118, 0.07) 0,
      rgba(108, 113, 118, 0.07) 1px,
      transparent 1px,
      transparent 4px
    ),
    linear-gradient(180deg, #faf6ef 0 74%, #39a4b1 74% 100%);
  box-shadow:
    inset 0 0 0 1px rgba(73, 79, 86, 0.34),
    inset -1px 0 0 rgba(0, 0, 0, 0.22),
    inset 2px 0 0 rgba(255, 255, 255, 0.34);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.44);
}

/* Horizontal teal divider lines that mark the boundary between
   the cream and teal sections of the spine. Positioned at ~74%
   and ~76% from the top to frame the color transition. */
.shelf-book--claret .book-spine-title::before,
.shelf-book--claret .book-spine-title::after {
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #2d737d, #245f67);
  box-shadow: none;
}

.shelf-book--claret .book-spine-title::before {
  top: 73.8%;
}

.shelf-book--claret .book-spine-title::after {
  top: 76%;
  bottom: auto;
}

/* Cover face — same two-tone treatment: cream on top (67%), teal
   on the bottom (33%). The subtle grain overlay adds paper texture
   across the entire cover. */
.shelf-book--claret .book-cover {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(106, 111, 118, 0.05) 0,
      rgba(106, 111, 118, 0.05) 1px,
      transparent 1px,
      transparent 4px
    ),
    linear-gradient(180deg, #fbf8f3 0 67%, #3aa5b3 67% 100%);
  box-shadow:
    inset 0 0 0 1px rgba(84, 90, 97, 0.34),
    inset 0 0 0 3px rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

/* No decorative panels or binding strips on the clean claret cover */
.shelf-book--claret .book-cover::before,
.shelf-book--claret .book-cover::after {
  content: none;
}

/* Front-face body pushed to the top for the claret book */
.shelf-book--claret .shelf-body {
  min-height: 100%;
  padding: 1.16rem 0.52rem 0.64rem;
  justify-content: flex-start;
}

/* Author name bar — "ERIC M. ARMBRUSTER" rendered as a teal banner
   positioned at the 67% mark (the cream-teal boundary). Uses flexbox
   for vertical centering of the text within the narrow bar. */
.shelf-book--claret .shelf-body::before {
  content: "ERIC M. ARMBRUSTER";
  left: 0.42rem;
  right: 0.42rem;
  top: 67%;
  width: auto;
  height: 19px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 0.36rem;
  font-family: "Libre Caslon Text", "Georgia", serif;
  font-size: 0.43rem;
  letter-spacing: 0.68px;
  text-transform: uppercase;
  color: #eef4f5;
  background: linear-gradient(180deg, #286d76, #235e66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),   /* top highlight */
    inset 0 -1px 0 rgba(0, 0, 0, 0.22);         /* bottom crease */
  opacity: 1;
  clip-path: none;
}

/* Thin bright line directly below the author bar — a subtle separator
   between the bar and the teal section beneath it. */
.shelf-book--claret .shelf-body::after {
  content: "";
  left: 0.42rem;
  right: 0.42rem;
  top: calc(67% + 19px);
  width: auto;
  height: 1px;
  background: rgba(241, 247, 248, 0.42);
  box-shadow: none;
  opacity: 0.82;
  clip-path: none;
}

/* Title text — dark serif on the cream background, directly visible
   (no hidden-text pseudo-element trick needed on this light cover). */
.shelf-book--claret .shelf-body h3 {
  width: min(74%, 182px);
  margin-top: 0.74rem;
  color: #23262a;
  font-family: "Libre Caslon Text", "Georgia", serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.02px;
  line-height: 1.06;
  font-size: 1.56rem;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  text-shadow: none;
}

/* Subtle horizontal rule above the title — a thin, semi-transparent
   dark line to frame the top of the title block. */
.shelf-book--claret .shelf-body h3::before {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: -0.76rem;
  height: 1px;
  background: rgba(38, 42, 48, 0.32);
}

/* Volume subtitle in a lighter weight, not uppercased — "Volume IV"
   in a smaller, more literary style below the main title. */
.shelf-book--claret .shelf-body h3::after {
  content: "Volume IV";
  display: block;
  margin-top: 0.32rem;
  font-family: "Libre Caslon Text", "Georgia", serif;
  font-size: 0.58rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.74px;
  text-transform: none;
  color: #2e3237;
}

/* ==========================================================================
   SHELF-BOOK--AZURE: "Seymour" memorial book variant
   A soft sky-blue book dedicated to a pet memorial. Features an elliptical
   portrait image on the cover and a memorial banner. The cool palette
   contrasts with the warm tones of the other books.
   ========================================================================== */
.shelf-book--azure {
  --spine-main: #5ca8d6;
  --spine-dark: #2e6f9a;
  --spine-emboss: rgba(240, 250, 255, 0.28);
  --cover-main: #79bde4;
  --cover-dark: #63addb;
  /* Vertical ribs: faint icy-blue lines on a deeper blue background */
  --book-rib: repeating-linear-gradient(
    90deg,
    rgba(236, 246, 252, 0.1) 0,
    rgba(236, 246, 252, 0.1) 1px,
    rgba(48, 102, 141, 0.14) 1px,
    rgba(48, 102, 141, 0.14) 6px
  );
  /* Horizontal grain: very light icy flecks */
  --book-grain: repeating-linear-gradient(
    0deg,
    rgba(225, 241, 252, 0.08) 0,
    rgba(225, 241, 252, 0.08) 1px,
    rgba(66, 124, 168, 0.08) 1px,
    rgba(66, 124, 168, 0.08) 4px
  );
  --book-title-font: "Libre Caslon Display";
  --title-spine-size: 1.18rem;
  --title-spine-spacing: 0.88px;
}

/* Disable the default page-edge ribbon */
.shelf-book--azure::after {
  content: none;
}

/* Spine title — white text on a blue gradient with icy highlights.
   The text has a subtle frost-like glow effect. */
.shelf-book--azure .book-spine-title {
  color: #f3f9ff;
  font-family: "Libre Caslon Text", "Georgia", serif;
  font-weight: 700;
  text-transform: uppercase;
  background:
    radial-gradient(circle at 50% 10%, rgba(246, 252, 255, 0.18), transparent 34%),
    var(--book-grain),
    var(--book-rib),
    linear-gradient(180deg, #6bb4df, #3078a5 76%, #266389 100%);
  box-shadow:
    inset 0 0 0 1px rgba(240, 250, 255, 0.2),
    inset -2px 0 0 rgba(22, 55, 80, 0.56),
    inset 2px 0 0 rgba(214, 241, 255, 0.24);
  text-shadow:
    0 1px 0 rgba(20, 53, 77, 0.9),
    0 0 6px rgba(225, 246, 255, 0.3);
}

/* Spine decorative lines — center-fade icy blue lines at top and bottom */
.shelf-book--azure .book-spine-title::before,
.shelf-book--azure .book-spine-title::after {
  left: 8px;
  right: 8px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(238, 250, 255, 0.58), transparent);
  box-shadow: none;
}

/* Cover face — soft blue with highlights:
   1. Top-left bright radial for light catch
   2. Bottom-right darker radial for depth
   3. Horizontal fine texture
   4. Base diagonal gradient from light to medium blue */
.shelf-book--azure .book-cover {
  background:
    radial-gradient(circle at 20% 14%, rgba(241, 251, 255, 0.22), transparent 42%),
    radial-gradient(circle at 84% 86%, rgba(53, 120, 163, 0.22), transparent 56%),
    repeating-linear-gradient(
      0deg,
      rgba(224, 241, 252, 0.08) 0,
      rgba(224, 241, 252, 0.08) 1px,
      rgba(84, 144, 187, 0.08) 1px,
      rgba(84, 144, 187, 0.08) 4px
    ),
    linear-gradient(166deg, #81c3e7, #5eaddb 68%, #4ea3d6 100%);
  box-shadow:
    inset 0 0 0 1px rgba(68, 123, 163, 0.3),
    inset 0 0 0 3px rgba(239, 250, 255, 0.2),
    inset 0 -1px 0 rgba(44, 94, 130, 0.32);
}

/* Top decorative line on the cover — a thin icy-white horizontal rule
   near the top, with a box-shadow that also creates a matching line
   74px below it (used for framing the portrait area). */
.shelf-book--azure .book-cover::before {
  content: "";
  left: 0.7rem;
  right: 0.72rem;
  top: 0.64rem;
  height: 1px;
  background: rgba(239, 250, 255, 0.62);
  box-shadow:
    0 1px 0 rgba(53, 113, 153, 0.34),
    0 74px 0 rgba(235, 248, 255, 0.32);
}

/* Elliptical portrait of Seymour — the ::after pseudo-element displays
   the memorial image, clipped to an ellipse. A light overlay gradient
   gives a soft vignette. The image is loaded via url() and cover-fitted. */
.shelf-book--azure .book-cover::after {
  content: "";
  left: 16%;
  right: 16%;
  top: auto;
  bottom: 5.8rem;
  width: auto;
  height: 42%;
  background:
    linear-gradient(180deg, rgba(247, 252, 255, 0.18), rgba(70, 130, 171, 0.08)),
    url("../images/seymour-memoriam.png") center 42% / cover no-repeat;
  clip-path: ellipse(48% 44% at 50% 50%);
  box-shadow:
    inset 0 0 0 2px rgba(247, 251, 255, 0.5),
    0 6px 10px rgba(34, 79, 111, 0.24);
  opacity: 0.94;
  z-index: 1;
}

/* Front-face body — pushed to top, with z-index ensuring text layers
   above the portrait image behind it. */
.shelf-book--azure .shelf-body {
  min-height: 100%;
  padding: 0.86rem 0.5rem 0.62rem;
  justify-content: flex-start;
  z-index: 3;
}

/* "IN LOVING MEMORY" banner — a teal bar positioned near the bottom
   of the cover face, centered text, resembling an engraved plaque.
   The inset shadows add a beveled edge effect. */
.shelf-book--azure .shelf-body::before {
  content: "IN LOVING MEMORY";
  left: 11%;
  right: 11%;
  top: auto;
  bottom: 0.84rem;
  width: auto;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Libre Caslon Text", "Georgia", serif;
  font-size: 0.42rem;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: #f2fbff;
  background: linear-gradient(180deg, #458cba, #31739e);
  box-shadow:
    inset 0 1px 0 rgba(239, 250, 255, 0.28),
    inset 0 -1px 0 rgba(34, 84, 117, 0.34);
  clip-path: none;
  opacity: 1;
  z-index: 5;
}

/* Disable the second pseudo-element — only the banner is needed */
.shelf-book--azure .shelf-body::after {
  content: none;
}

/* Title container — hidden text technique (same as umber/copper).
   The actual h3 content is invisible; pseudo-elements handle rendering.
   High z-index ensures the text sits above the portrait image. */
.shelf-book--azure .shelf-body h3 {
  width: min(84%, 206px);
  margin-top: 0.24rem;
  min-height: 3.8rem;
  position: relative;
  color: transparent;
  background: none;
  border: none;
  box-shadow: none;
  font-size: 0;
  line-height: 1;
  padding: 0;
  text-shadow: none;
  transform: none;
  z-index: 4;
}

/* "SEYMOUR" main title — large white display serif with a soft blue
   drop shadow and subtle icy glow to match the cool palette. */
.shelf-book--azure .shelf-body h3::before {
  content: "SEYMOUR";
  position: absolute;
  left: 0;
  right: 0;
  top: 0.08rem;
  color: #f5fbff;
  font-family: "Libre Caslon Display", "Libre Caslon Text", "Georgia", serif;
  font-size: 1.72rem;
  font-weight: 700;
  letter-spacing: 1.16px;
  line-height: 0.96;
  text-transform: uppercase;
  background: none;
  border: none;
  text-shadow:
    0 1px 0 rgba(45, 96, 133, 0.62),
    0 0 10px rgba(237, 250, 255, 0.24);
}

/* "A Remembrance" italic subtitle — darker blue, lowercase, italic
   serif for a softer emotional tone beneath the bold name. */
.shelf-book--azure .shelf-body h3::after {
  content: "A Remembrance";
  display: block;
  margin-top: 1.96rem;
  color: #1d5f8b;
  font-family: "Libre Caslon Text", "Georgia", serif;
  font-size: 0.74rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.28px;
  text-transform: none;
}

/* ==========================================================================
   SHELF-BOOK--BITCOIN: "Economics / Bitcoin" book variant
   A warm terracotta/burnt-orange book with gold foil accents, designed
   to evoke an antique financial tome. Features an ornamental border
   pattern and a large Bitcoin symbol on the front cover.
   ========================================================================== */
.shelf-book--bitcoin {
  --spine-main: #9f4f35;
  --spine-dark: #6a2d1f;
  --spine-emboss: rgba(255, 218, 166, 0.22);
  --cover-main: #a95338;
  --cover-dark: #7a3725;
  /* Vertical ribs: warm cream lines on dark rust bands */
  --book-rib: repeating-linear-gradient(
    90deg,
    rgba(255, 223, 174, 0.08) 0,
    rgba(255, 223, 174, 0.08) 1px,
    rgba(79, 33, 23, 0.14) 1px,
    rgba(79, 33, 23, 0.14) 6px
  );
  /* Horizontal grain: warm parchment flecks on rust */
  --book-grain: repeating-linear-gradient(
    0deg,
    rgba(255, 224, 178, 0.08) 0,
    rgba(255, 224, 178, 0.08) 1px,
    rgba(94, 40, 27, 0.08) 1px,
    rgba(94, 40, 27, 0.08) 4px
  );
  --book-title-font: "Libre Caslon Display";
  --title-spine-size: 1.18rem;
  --title-spine-spacing: 0.92px;
}

/* Disable the default page-edge ribbon */
.shelf-book--bitcoin::after {
  content: none;
}

/* Spine title — warm cream/gold text on a terracotta spine with
   grain and rib textures. The glow text-shadow mimics gold leaf. */
.shelf-book--bitcoin .book-spine-title {
  color: #ffe8c0;
  font-family: "Libre Caslon Display", "Libre Caslon Text", "Georgia", serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.58px;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 228, 181, 0.2), transparent 32%),
    var(--book-grain),
    var(--book-rib),
    linear-gradient(180deg, #b15a3c, #873b28 78%, #6f2f20 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 218, 163, 0.22),
    inset -2px 0 0 rgba(52, 20, 14, 0.5),
    inset 2px 0 0 rgba(247, 201, 132, 0.2);
  text-shadow:
    0 1px 0 rgba(55, 23, 16, 0.84),
    0 0 6px rgba(255, 214, 148, 0.2);
}

/* Center-fade gold decorative lines at top and bottom of the spine */
.shelf-book--bitcoin .book-spine-title::before,
.shelf-book--bitcoin .book-spine-title::after {
  left: 9px;
  right: 9px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(250, 213, 152, 0.62), transparent);
  box-shadow: none;
}

/* Cover face — warm terracotta gradient with subtle light highlights.
   Simpler than some other variants — no fine texture overlays, just
   two radial highlights over a base diagonal gradient. */
.shelf-book--bitcoin .book-cover {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 223, 172, 0.2), transparent 42%),
    radial-gradient(circle at 82% 90%, rgba(95, 41, 28, 0.24), transparent 56%),
    linear-gradient(152deg, #ba6241, #8f412b 66%, #793523 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 218, 161, 0.24),
    inset 0 0 0 4px rgba(56, 22, 15, 0.38),
    inset 0 -1px 0 rgba(0, 0, 0, 0.26);
}

/* Ornamental border pattern — uses repeating-conic-gradient to create
   a checkerboard/pinwheel mosaic of gold and dark rust squares. This
   fills the entire cover inset area, giving an elaborate border feel.
   background-size controls the tile dimensions of the repeating pattern. */
.shelf-book--bitcoin .book-cover::before {
  content: "";
  left: 0.56rem;
  right: 0.56rem;
  top: 0.56rem;
  bottom: 0.56rem;
  border: 1px solid rgba(245, 203, 141, 0.5);
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(247, 217, 164, 0.84) 0deg 10deg,
      rgba(148, 76, 56, 0.92) 10deg 20deg
    );
  background-size: 13px 13px;
  box-shadow:
    inset 0 0 0 1px rgba(65, 26, 18, 0.54);
}

/* Inner panel — a second inset rectangle that sits inside the ornamental
   border, creating the illusion of a framed area. This terracotta panel
   with a warm highlight becomes the visual center of the cover. */
.shelf-book--bitcoin .book-cover::after {
  content: "";
  left: 1.04rem;
  right: 1.04rem;
  top: 1.04rem;
  bottom: 1.04rem;
  border: 1px solid rgba(250, 219, 171, 0.56);
  background:
    radial-gradient(circle at 26% 14%, rgba(255, 227, 183, 0.18), transparent 46%),
    linear-gradient(180deg, #b25c3d, #873b29 100%);
  box-shadow: inset 0 0 0 1px rgba(77, 31, 21, 0.54);
}

/* Front-face body — content pushed to top, z-index ensures text
   renders above the decorative border and inner panel pseudo-elements. */
.shelf-book--bitcoin .shelf-body {
  min-height: 100%;
  padding: 0.95rem 0.56rem 0.66rem;
  justify-content: flex-start;
  z-index: 4;
}

/* "SATOSHI SCRIPT" header text — small, uppercase gold text positioned
   at the top of the cover face, serving as a publisher imprint line. */
.shelf-book--bitcoin .shelf-body::before {
  content: "SATOSHI SCRIPT";
  left: 0.86rem;
  right: 0.86rem;
  top: 0.9rem;
  width: auto;
  height: auto;
  color: rgba(253, 225, 178, 0.88);
  font-family: "Libre Caslon Text", "Georgia", serif;
  font-size: 0.48rem;
  letter-spacing: 0.82px;
  text-transform: uppercase;
  background: none;
  box-shadow: none;
  clip-path: none;
}

/* Thin gold separator line below the "SATOSHI SCRIPT" text */
.shelf-book--bitcoin .shelf-body::after {
  content: "";
  left: 0.86rem;
  right: 0.86rem;
  top: 1.42rem;
  width: auto;
  height: 1px;
  background: rgba(250, 221, 175, 0.38);
  box-shadow: none;
  clip-path: none;
  opacity: 1;
}

/* Title container — hidden-text technique. The h3's own text is invisible;
   pseudo-elements display the Bitcoin symbol and title text instead. */
.shelf-book--bitcoin .shelf-body h3 {
  width: min(84%, 196px);
  margin-top: 1.66rem;
  min-height: 4.58rem;
  position: relative;
  color: transparent;
  background: none;
  border: none;
  box-shadow: none;
  font-size: 0;
  line-height: 1;
  padding: 0;
  text-shadow: none;
}

/* Large Bitcoin currency symbol (U+20BF) — the centerpiece of the cover.
   Rendered in a decorative serif at 3.5rem for dramatic visual impact.
   The warm gold color and glow shadow create a "stamped coin" effect. */
.shelf-book--bitcoin .shelf-body h3::before {
  content: "\20BF";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  color: #fce2b8;
  font-family: "IM Fell English SC", "Cinzel", serif;
  font-size: 3.5rem;
  line-height: 0.9;
  text-transform: none;
  text-shadow:
    0 1px 0 rgba(61, 25, 17, 0.8),
    0 0 8px rgba(255, 211, 139, 0.24);
}

/* "The Bitcoin Standard" title below the symbol — uppercase gold text
   in a classical serif, positioned with margin-top to clear the large
   Bitcoin symbol above it. */
.shelf-book--bitcoin .shelf-body h3::after {
  content: "The Bitcoin Standard";
  display: block;
  margin-top: 3.3rem;
  color: #f9ddb0;
  font-family: "Cinzel", "Libre Caslon Text", serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  line-height: 1.05;
  text-transform: uppercase;
}

/* ==========================================================================
   BOOK-INDEX: Volume number badge
   A small label positioned at the bottom-left of each book's cover face,
   showing the book's number in the collection. Styled as a parchment
   tag with a warm gradient and inset/outset shadows for a 3D look.
   ========================================================================== */
.book-index {
  position: absolute;
  left: 0.5rem;
  bottom: 0.62rem;
  width: 2.2rem;
  min-height: 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Libre Caslon Display", "Libre Caslon Text", "Georgia", serif;
  color: #3f2817;
  font-size: 0.44rem;
  letter-spacing: 0.95px;
  line-height: 1.1;
  /* Layered parchment background:
     1. Top-left highlight radial
     2. Horizontal grain texture
     3. Base warm tan diagonal gradient */
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 241, 214, 0.58), transparent 44%),
    repeating-linear-gradient(
      0deg,
      rgba(108, 72, 41, 0.1) 0,
      rgba(108, 72, 41, 0.1) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(152deg, #e3ca9f, #cbab79 62%, #b68d5c 100%);
  box-shadow:
    inset 0 0 0 1px rgba(90, 58, 33, 0.34),     /* dark border */
    inset 0 1px 0 rgba(255, 239, 208, 0.42),     /* top highlight */
    0 3px 6px rgba(0, 0, 0, 0.28);                /* drop shadow */
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
  z-index: 5;
}

/* ==========================================================================
   BOOK-SPINE-TITLE: Base spine title styling
   The default (non-variant-overridden) look for text on a book spine.
   Uses vertical writing mode rotated 180deg so text reads bottom-to-top,
   which is the Western convention for book spine text.
   ========================================================================== */
.book-spine-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* writing-mode: vertical-rl makes text flow top-to-bottom in a right-to-left column.
     rotate(180deg) flips it so it reads bottom-to-top instead — standard for English spines. */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transform-origin: center;
  white-space: normal;
  line-height: 1.02;
  text-transform: none;
  letter-spacing: var(--title-spine-spacing);
  font-family: var(--book-title-font), "Libre Caslon Display", "Libre Caslon Text", "Georgia", serif;
  font-size: var(--title-spine-size);
  color: #efcca0;
  /* Default spine background: grain + rib textures layered over a
     top-to-bottom gradient from the main to dark spine color */
  background:
    var(--book-grain),
    var(--book-rib),
    linear-gradient(180deg, var(--spine-main), var(--spine-dark));
  box-shadow:
    inset 0 0 0 1px var(--spine-emboss),           /* outer emboss highlight */
    inset -2px 0 0 rgba(24, 16, 10, 0.7);          /* binding groove shadow */
  text-shadow:
    0 1px 0 rgba(33, 19, 11, 0.94),                /* hard drop for depth */
    0 0 5px rgba(206, 150, 93, 0.2);                /* warm glow */
  overflow: hidden;
  z-index: 4;
}

/* Decorative bands at top and bottom of the default spine — small
   rectangular strips with a dashed gold pattern layered over a semi-
   transparent brown gradient. Simulates ornamental tooling on a spine. */
.book-spine-title::before,
.book-spine-title::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  height: 14px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(182, 127, 70, 0.2) 0,
      rgba(182, 127, 70, 0.2) 1px,
      rgba(81, 50, 29, 0.18) 1px,
      rgba(81, 50, 29, 0.18) 4px
    ),
    linear-gradient(180deg, rgba(127, 78, 40, 0.76), rgba(66, 39, 23, 0.82));
  box-shadow:
    inset 0 0 0 1px rgba(184, 130, 74, 0.24),
    0 1px 0 rgba(12, 8, 6, 0.6);
}

/* Top band positioned 12px from the top of the spine */
.book-spine-title::before {
  top: 12px;
}

/* Bottom band positioned 12px from the bottom of the spine */
.book-spine-title::after {
  bottom: 12px;
}

/* ==========================================================================
   BOOK-COVER: Base cover styling
   Default front-cover appearance shared by all book variants that don't
   fully override it. Uses CSS Grid with a single-row template so content
   fills the cover face naturally. Layered gradients create a dark
   leather/cloth look with subtle grain.
   ========================================================================== */
.book-cover {
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
  z-index: 3;
  /* Five-layer default cover background:
     1. --book-grain: horizontal fine texture
     2. --book-rib: vertical ribbing texture
     3. Top highlight gradient (warm light fading down)
     4. Base dark diagonal gradient (leather/cloth base color) */
  background:
    var(--book-grain),
    var(--book-rib),
    linear-gradient(180deg, rgba(187, 128, 70, 0.1), rgba(15, 10, 8, 0.28) 26%, transparent 64%),
    linear-gradient(167deg, rgba(51, 30, 19, 0.74), rgba(16, 10, 8, 0.82));
  box-shadow:
    inset 0 0 0 1px rgba(142, 93, 52, 0.24),      /* warm border */
    inset 0 -1px 0 rgba(11, 8, 6, 0.65);           /* bottom crease */
  padding: 0.34rem 0.44rem 0.6rem;
}

/* Top decorative strip on the default cover — a narrow horizontal bar
   with the rib texture and a dark gradient, simulating a tooled band
   near the top of a leather-bound book cover. */
.book-cover::before {
  content: "";
  position: absolute;
  left: 0.42rem;
  right: 0.78rem;
  top: 0.4rem;
  height: 20px;
  background:
    var(--book-rib),
    linear-gradient(180deg, rgba(102, 65, 35, 0.74), rgba(53, 33, 21, 0.78));
  box-shadow:
    inset 0 0 0 1px rgba(170, 114, 61, 0.2),
    0 1px 0 rgba(10, 7, 5, 0.6);
  opacity: 0.86;
}

/* Right-edge "page block" visible from the cover side — the ::after
   pseudo-element creates a narrow strip of alternating parchment-colored
   bands that simulate visible page edges. The clip-path creates an
   irregular, slightly ragged edge (like real paper) using a zigzag polygon. */
.book-cover::after {
  content: "";
  position: absolute;
  right: 0.04rem;
  top: 22%;
  width: 12px;
  height: 56%;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(221, 193, 153, 0.94) 0,
      rgba(221, 193, 153, 0.94) 2px,
      rgba(170, 130, 88, 0.9) 2px,
      rgba(170, 130, 88, 0.9) 3px
    );
  /* Zigzag polygon that creates the ragged page-edge effect —
     alternating left-right points simulate uneven paper edges */
  clip-path: polygon(0 0, 100% 5%, 84% 16%, 100% 28%, 78% 43%, 100% 58%, 82% 73%, 100% 85%, 76% 94%, 100% 100%, 0 100%);
  box-shadow:
    inset 0 0 0 1px rgba(79, 50, 30, 0.26),
    -1px 0 2px rgba(0, 0, 0, 0.24);
  opacity: 0.76;
  z-index: 2;
}

/* ==========================================================================
   BOOK-PAGES: The visible page block underneath the cover
   This element sits behind the cover (z-index: 1) and shows through as
   the book's thickness. A repeating gradient of alternating cream and
   tan bands simulates individual page edges stacked together.
   ========================================================================== */
.book-pages {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  /* Four-band repeating gradient simulates stacked page edges:
     cream → tan → lighter cream → darker tan, cycling every 4.6px */
  background:
    repeating-linear-gradient(
      180deg,
      #f5eed6 0,
      #f5eed6 1.8px,
      #ddd4b6 1.8px,
      #ddd4b6 2.4px,
      #ebe3ca 2.4px,
      #ebe3ca 4px,
      #d2c9ab 4px,
      #d2c9ab 4.6px
    );
}

/* Right-edge shadow on the page block — a dark-to-transparent gradient
   on the right side creates the illusion of the cover casting a shadow
   over the pages, adding depth where the cover meets the page block. */
.book-pages::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 22px;
  width: 28px;
  background:
    linear-gradient(90deg, rgba(40, 28, 16, 0.32), transparent 60%);
  border-left: 1px solid rgba(80, 60, 35, 0.3);
}

/* Bottom-edge shadow on the page block — similar to the right edge,
   this creates a shadow along the bottom where page edges are visible,
   simulating the slight shadow under the page stack. */
.book-pages::before {
  content: "";
  position: absolute;
  left: 68px;
  right: 0;
  bottom: 0;
  height: 22px;
  background:
    linear-gradient(180deg, rgba(40, 28, 16, 0.28), transparent 55%);
  border-top: 1px solid rgba(80, 60, 35, 0.25);
}

/* ==========================================================================
   SHELF-BODY: Base front-face content container
   The visible front face of each book, rendered as a flex column so
   title, description, and decorations stack vertically. Positioned
   relative so its pseudo-elements and children can be absolute.
   ========================================================================== */
.shelf-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  padding: 0.62rem 0.3rem 0.42rem;
  text-align: center;
}

/* Default decorative side tabs — narrow vertical strips positioned just
   outside the left and right edges of the cover face. They simulate
   bookmark ribbons or edge tabs sticking out. A warm tan gradient with
   a subtle grain overlay gives them a parchment/leather look.
   Clip-path creates a zigzag silhouette resembling torn or decorative edges. */
.shelf-body::before,
.shelf-body::after {
  content: "";
  position: absolute;
  top: 44%;
  width: 16px;
  height: 112px;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(104, 74, 45, 0.09) 0,
      rgba(104, 74, 45, 0.09) 1px,
      transparent 1px,
      transparent 4px
    ),
    linear-gradient(160deg, #e0caa4, #c9a677 62%, #b58859 100%);
  box-shadow:
    inset 0 0 0 1px rgba(87, 58, 33, 0.28),
    0 4px 7px rgba(0, 0, 0, 0.26);
  opacity: 0.78;
}

/* Left tab: zigzag polygon with points facing right */
.shelf-body::before {
  left: -7px;
  clip-path: polygon(0 0, 100% 6%, 84% 18%, 100% 33%, 82% 47%, 100% 62%, 80% 78%, 100% 92%, 0 100%);
}

/* Right tab: zigzag polygon with points facing left */
.shelf-body::after {
  right: -8px;
  clip-path: polygon(0 0, 100% 8%, 84% 22%, 100% 39%, 82% 55%, 100% 70%, 80% 84%, 100% 100%, 0 100%);
}

/* Default title styling on the book's front face — warm gold serif text
   with a bottom border and a warm glow text-shadow. Uses CSS custom
   properties for font, size, spacing, and tilt so each variant can
   customize the title appearance without rewriting the entire rule. */
.shelf-body h3 {
  margin-top: 0.04rem;
  margin-bottom: 0;
  color: #e2bd86;
  font-family: var(--book-title-font), "Libre Caslon Display", "Libre Caslon Text", "Georgia", serif;
  font-weight: 700;
  text-transform: none;
  letter-spacing: var(--title-front-spacing);
  line-height: 0.96;
  font-size: var(--title-front-size);
  transform: var(--title-front-tilt);
  padding: 0.2rem 0.3rem 0.3rem;
  border-bottom: 1px solid rgba(161, 109, 58, 0.34);
  text-shadow:
    0 1px 0 rgba(49, 31, 19, 0.8),
    0 0 7px rgba(207, 153, 89, 0.24);
}

/* Thin horizontal rule above the title — a fade-to-center line for
   gentle visual separation from any content above the title. */
.shelf-body h3::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: -0.44rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(171, 116, 63, 0.2), rgba(171, 116, 63, 0.44), rgba(171, 116, 63, 0.2));
}

/* Description text below the title — muted warm brown, small and readable */
.shelf-body p {
  margin-top: 0.2rem;
  margin-bottom: 0;
  color: #ac8662;
  font-size: 0.84rem;
  line-height: 1.32;
}

/* ==========================================================================
   BOOK-SLIP: Hover-reveal link label
   A small tag positioned at the bottom-right of the cover that is hidden
   by default (opacity: 0, shifted down) and slides into view when the
   user hovers over the book. Acts as a call-to-action overlay.
   ========================================================================== */
.book-slip {
  position: absolute;
  right: 0.42rem;
  bottom: 0.38rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 0.58rem;
  font-family: "Libre Caslon Display", "Libre Caslon Text", "Georgia", serif;
  color: #5a3b22;
  background:
    linear-gradient(160deg, #d8bf95, #bc9a67);
  box-shadow:
    inset 0 0 0 1px rgba(86, 58, 33, 0.28),
    0 5px 8px rgba(0, 0, 0, 0.36);
  padding: 0.22rem 0.4rem;
  /* Hidden by default — faded out and pushed down 5px */
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* On hover: slide the book-slip tag up into view and make it fully opaque */
.shelf-book:hover .book-slip {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   ROOM-LEDGER: Grid area for the Hector (dog portrait) section
   This is one of the "rooms" in the homepage grid layout. It contains
   a framed portrait card of the dog Hector.
   ========================================================================== */
.room-ledger {
  grid-area: ledger;
  overflow: hidden;
}

/* Ensure the Hector card fills the entire ledger grid cell */
.room-ledger .hector-card {
  height: 100%;
}

/* ==========================================================================
   HECTOR-CARD: Framed dog portrait card
   A dark, wood-paneled card that holds a gold-framed portrait image.
   Multiple layered gradients simulate dark wood grain with warm brown
   highlights. The card uses flex layout to stack the frame and plaque.
   ========================================================================== */
.hector-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  clip-path: none;
  padding: 0.46rem 0.46rem 0.4rem;
  /* Dark wood-panel background with four gradient layers:
     1. Top-left warm brown highlight
     2. Bottom-right darker shadow
     3. Vertical wood-grain stripe pattern
     4. Base dark diagonal gradient (nearly black) */
  background:
    radial-gradient(circle at 18% 14%, rgba(132, 70, 36, 0.24), transparent 42%),
    radial-gradient(circle at 86% 88%, rgba(62, 31, 18, 0.28), transparent 56%),
    repeating-linear-gradient(
      90deg,
      rgba(124, 66, 35, 0.16) 0,
      rgba(124, 66, 35, 0.16) 2px,
      rgba(56, 30, 18, 0.2) 2px,
      rgba(56, 30, 18, 0.2) 10px
    ),
    linear-gradient(165deg, rgba(55, 32, 20, 0.97), rgba(22, 14, 10, 0.98));
  box-shadow:
    0 14px 24px var(--shadow-heavy),               /* heavy outer drop shadow */
    inset 0 0 0 1px rgba(191, 134, 78, 0.24),     /* warm inner border */
    inset 0 0 16px rgba(0, 0, 0, 0.34);            /* inner vignette */
  transform: none;
}

/* Inner panel overlay — a semi-transparent layer with its own wood-grain
   pattern, positioned just inside the card edges. This creates a "double
   panel" effect as though the card has an inner wood matting. */
.hector-card::before {
  content: "";
  position: absolute;
  inset: 0.28rem;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(101, 56, 29, 0.2) 0,
      rgba(101, 56, 29, 0.2) 2px,
      rgba(61, 35, 20, 0.22) 2px,
      rgba(61, 35, 20, 0.22) 8px
    ),
    linear-gradient(145deg, rgba(106, 61, 32, 0.46), rgba(41, 24, 16, 0.56));
  box-shadow:
    inset 0 0 0 1px rgba(199, 142, 86, 0.26),
    inset 0 0 16px rgba(0, 0, 0, 0.5);
  opacity: 0.68;
  z-index: 0;
}

/* ==========================================================================
   HECTOR-FRAME: Gold picture frame around the portrait image
   A multi-stop diagonal gradient creates the illusion of a polished gold
   frame with highlight and shadow bands. The 5px padding acts as the
   frame's visible width around the image inside.
   ========================================================================== */
.hector-frame {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  /* Multi-stop gradient simulates a metallic gold frame:
     dark bronze -> warm gold -> bright highlight -> mid gold ->
     bright again -> darker gold -> deep bronze */
  background:
    linear-gradient(
      158deg,
      #5c3b14 0%,
      #9d6f2a 12%,
      #e5c27c 26%,
      #c59343 45%,
      #efd594 58%,
      #ba8538 74%,
      #6f4919 100%
    );
  padding: 5px;
}

/* Portrait image — fills the frame completely using object-fit: cover
   so the image crops to fill regardless of its native aspect ratio. */
.hector-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   HECTOR-PLAQUE: Name plaque below the portrait
   A small centered text label styled as a museum-style engraved plaque.
   Uses a decorative serif font and warm gold text color with a dark
   text shadow for a pressed/engraved look.
   ========================================================================== */
.hector-plaque {
  position: relative;
  z-index: 1;
  margin: 0.34rem auto 0;
  padding: 0.16rem 0.92rem 0.2rem;
  font-family: "IM Fell English SC", "Libre Caslon Display", Georgia, serif;
  font-size: 0.72rem;
  letter-spacing: 1.2px;
  text-align: center;
  color: #d4b87a;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   READING-CARD: Stacked paper cards component
   Displays a list of links as overlapping parchment "sheets" that look
   like a messy stack of paper on a desk. Each list item is a card that
   partially overlaps the one below it. The stack uses negative margins
   and slight rotations for a natural scattered effect.
   ========================================================================== */
.reading-card {
  position: relative;
  padding: 0.08rem 0.14rem 0.22rem;
}

/* Soft shadow underneath the entire stack — a radial gradient blurred
   with CSS filter creates a diffuse shadow beneath all the cards. */
.reading-card::before {
  content: "";
  position: absolute;
  left: 0.56rem;
  right: 0.56rem;
  bottom: 0;
  height: 18px;
  pointer-events: none;
  background: radial-gradient(60% 100% at 50% 50%, rgba(0, 0, 0, 0.38), transparent 80%);
  filter: blur(5px);
  opacity: 0.66;
}

/* Strip default list styling from the card stack */
.reading-card ul {
  list-style: none;
  margin: 0;
  padding: 0.08rem 0.1rem 0.14rem;
}

/* Each card (list item) — uses CSS custom properties for per-card shift
   and tilt values so each one can be individually offset. Large negative
   margin-top makes cards overlap. Transform-origin is top-left so
   rotations pivot from the corner for a natural paper scatter look. */
.reading-card li {
  --sheet-shift: 0px;
  --sheet-tilt: 0deg;
  position: relative;
  height: 122px;
  margin-top: -76px;
  transform: translateX(var(--sheet-shift)) rotate(var(--sheet-tilt));
  transform-origin: left top;
  transition: transform 0.2s ease;
}

/* First card has no overlap — sits at the natural top of the stack */
.reading-card li:first-child {
  margin-top: 0;
}

/* Individual card positions — each has a unique horizontal shift and
   slight tilt angle. Higher z-index values place later cards on top
   of earlier ones in the visual stack order. */
.reading-card li:nth-child(1) {
  --sheet-shift: 4px;
  --sheet-tilt: -0.42deg;
  z-index: 1;
}

.reading-card li:nth-child(2) {
  --sheet-shift: 12px;
  --sheet-tilt: 0.22deg;
  z-index: 2;
}

.reading-card li:nth-child(3) {
  --sheet-shift: 7px;
  --sheet-tilt: -0.19deg;
  z-index: 3;
}

.reading-card li:nth-child(4) {
  --sheet-shift: 15px;
  --sheet-tilt: 0.28deg;
  z-index: 4;
}

/* Card shadow layer — a ::before pseudo-element offset slightly down-right
   creates a layered drop shadow behind each card. The vertical gradient
   adds a darker top edge (simulating the card above casting shadow). */
.reading-card li::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(72, 47, 29, 0.26), transparent 32%, rgba(74, 49, 30, 0.1)),
    repeating-linear-gradient(
      0deg,
      rgba(86, 58, 34, 0.05) 0,
      rgba(86, 58, 34, 0.05) 1px,
      transparent 1px,
      transparent 4px
    );
  box-shadow: 0 10px 14px rgba(0, 0, 0, 0.24);
  transform: translate(4px, 5px);
  opacity: 0.7;
}

/* Card link — the visible parchment card itself. Fills its parent li
   completely and layers four gradients for a convincing aged paper look:
   1. Top-left warm radial highlight (light catch)
   2. Vertical rib texture (subtle vertical lines)
   3. Horizontal grain texture (subtle horizontal lines)
   4. Base warm parchment diagonal gradient */
.reading-card li a {
  position: relative;
  z-index: 1;
  display: block;
  height: 100%;
  color: #4a311c;
  font-family: "Libre Caslon Display", "Libre Caslon Text", "Georgia", serif;
  font-size: 0.9rem;
  letter-spacing: 1.18px;
  text-transform: uppercase;
  background:
    radial-gradient(circle at 15% 14%, rgba(255, 244, 222, 0.52), transparent 44%),
    repeating-linear-gradient(
      90deg,
      rgba(89, 61, 35, 0.05) 0,
      rgba(89, 61, 35, 0.05) 1px,
      transparent 1px,
      transparent 6px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(89, 61, 35, 0.08) 0,
      rgba(89, 61, 35, 0.08) 1px,
      transparent 1px,
      transparent 4px
    ),
    linear-gradient(152deg, #dfc8a2, #cfaf80 60%, #b88f5f 100%);
  box-shadow:
    inset 0 0 0 1px rgba(92, 62, 37, 0.3),        /* dark border outline */
    inset 0 1px 0 rgba(255, 243, 219, 0.42),       /* top highlight edge */
    0 12px 18px rgba(0, 0, 0, 0.26);                /* deep card shadow */
  padding: 0.54rem 0.76rem 0;
  line-height: 1.15;
}

/* Underline rule inside each card — a thin horizontal gradient line
   positioned below the card's title text area. Fades from a warm
   brown to near-transparent for a subtle separation line. */
.reading-card li a::after {
  content: "";
  position: absolute;
  left: 0.76rem;
  right: 0.76rem;
  top: 1.58rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(97, 66, 39, 0.52), rgba(97, 66, 39, 0.24));
}

/* Hover: lift the card slightly upward (-2px) while preserving its
   individual shift and tilt. The transform recalculates to include
   the translateY adjustment, creating a natural "picked up" feel. */
.reading-card li:hover {
  transform: translateX(calc(var(--sheet-shift) - 1px)) rotate(var(--sheet-tilt)) translateY(-2px);
}

/* Hover state for the link itself — slightly brighter/warmer parchment
   colors and darker text to indicate interactivity. The same four-layer
   gradient structure is used with tweaked opacity and color values. */
.reading-card li a:hover {
  color: #3f2817;
  background:
    radial-gradient(circle at 15% 14%, rgba(255, 248, 228, 0.6), transparent 44%),
    repeating-linear-gradient(
      90deg,
      rgba(89, 61, 35, 0.055) 0,
      rgba(89, 61, 35, 0.055) 1px,
      transparent 1px,
      transparent 6px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(89, 61, 35, 0.09) 0,
      rgba(89, 61, 35, 0.09) 1px,
      transparent 1px,
      transparent 4px
    ),
    linear-gradient(152deg, #e4cfab, #d3b487 60%, #be9668 100%);
}

/* ==========================================================================
   CONTACT-LINKS: Contact info / social links row
   A simple flexbox row that wraps contact link items with consistent
   spacing. flex-wrap ensures items flow to the next line on narrow screens.
   ========================================================================== */
.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ==========================================================================
   TABLET BREAKPOINT — max-width: 1080px
   At this threshold the viewport is too narrow for a multi-column homepage
   grid. The layout collapses from the desktop's complex grid-area mosaic
   into a single-column stack so every "room" card gets full width.
   ========================================================================== */
@media (max-width: 1080px) {
  /* Switch the homepage grid from its multi-column desktop arrangement to a
     single column. The explicit grid-template-areas list controls the visual
     order: archive on top, then intro, ledger, quote, and shelves. */
  .home-rooms {
    grid-template-columns: 1fr;
    grid-template-areas:
      "archive"
      "intro"
      "ledger"
      "quote"
      "shelves";
  }

  /* On desktop the archive room has a fixed height to fit the grid. In a
     single column it should grow naturally with its content instead. */
  .room-archive {
    height: auto;
  }

  /* The ledger room still benefits from a fixed height so the ticker /
     register section keeps a consistent proportion at tablet width. */
  .room-ledger {
    height: 21.5rem;
  }
}

/* ==========================================================================
   INTERMEDIATE BREAKPOINT — max-width: 920px
   This sits between tablet and mobile. The main purpose is to collapse
   inner two-column grids (intro, ledger, quote) into single columns and
   to reformat the bookshelf from a side-by-side row of books into a
   vertically stacked layout with centered, uniformly-sized book cards.
   ========================================================================== */
@media (max-width: 920px) {
  /* These three rooms used a two-column inner grid on wider screens.
     At 920px that inner grid becomes a single column so content reads
     top-to-bottom without cramped side-by-side panels. */
  .room-intro,
  .room-ledger,
  .room-quote {
    grid-template-columns: 1fr;
  }

  /* Bookshelf rows also go single-column: books stack vertically and
     center horizontally, with a tighter gap between them. */
  .bookshelf-row {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.4rem;
  }

  /* Ensure every book in the triple-book row is individually centered
     now that they occupy their own row in the single-column layout. */
  .bookshelf-row--triple > .shelf-book:nth-of-type(1),
  .bookshelf-row--triple > .shelf-book:nth-of-type(2),
  .bookshelf-row--triple > .shelf-book:nth-of-type(3) {
    justify-self: center;
  }

  /* Same centering treatment for books in single-book rows. */
  .bookshelf-row--single > .shelf-book {
    justify-self: center;
  }

  .bookshelf-row--single > .shelf-book:nth-of-type(1),
  .bookshelf-row--single > .shelf-book:nth-of-type(2),
  .bookshelf-row--single > .shelf-book:nth-of-type(3) {
    justify-self: center;
  }

  /* Desktop shelf planks span the full row beneath multiple books.
     That no longer makes visual sense in a stacked layout, so they
     are hidden entirely. */
  .bookshelf > .shelf-plank {
    display: none;
  }

  /* A mobile-specific plank appears instead — narrower, matching the
     single-book width with small negative margins to tuck it right
     under each book card for a realistic shelf illusion. */
  .shelf-plank--mobile {
    display: block;
    width: min(100%, 392px);
    margin: -0.06rem 0.08rem 0.1rem;
    height: 16px;
    transform: translateY(-1px);
  }

  /* Books are given a fixed max width and uniform height. The internal
     grid switches to a narrow 60px spine column + flexible content area
     so the book metaphor still reads correctly at this size. */
  .shelf-book,
  .shelf-book--tall {
    width: min(100%, 392px);
    min-height: 438px;
    height: 438px;
    grid-template-columns: 60px minmax(0, 1fr);
  }

  /* Remove any diagonal lean transform on book cards so they sit flat
     in the centered single-column layout. */
  .shelf-book--lean {
    transform: none;
  }

  /* The hover effect still lifts the card up and scales it slightly
     to give tactile feedback, even without the resting lean. */
  .shelf-book--lean:hover {
    transform: translateY(-7px) scale(1.012);
  }

  /* Plank height is reduced to match the thinner mobile planks. */
  .shelf-plank {
    height: 16px;
  }

  /* The "pages" pseudo-element along the top edge of the book needs its
     left offset and height adjusted to match the new 60px spine width. */
  .book-pages::before {
    left: 60px;
    height: 20px;
  }

  /* The bottom-edge "pages" strip is similarly reduced to stay
     proportional with the smaller book dimensions. */
  .book-pages::after {
    bottom: 20px;
    width: 24px;
  }

  /* Padding on the book card itself mirrors the page-edge pseudo-elements
     so content doesn't overlap the decorative page edges. */
  .shelf-book,
  .shelf-book--tall {
    padding-right: 24px;
    padding-bottom: 20px;
  }

  /* The book's ::before corner accent is repositioned to sit flush
     against the updated padding values. */
  .shelf-book::before {
    right: 24px;
    bottom: 20px;
  }

  /* The book cover's internal grid collapses to a single row since
     the taller desktop layout with distinct zones isn't needed. */
  .book-cover {
    grid-template-rows: 1fr;
  }

  /* The navigation drawer switches from a wider multi-column grid
     to a two-column layout, which fits better on mid-size screens. */
  .drawer-inner {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   MOBILE BREAKPOINT — max-width: 760px
   This is the primary phone layout. Major changes include:
   - Shrinking the global spacing notch for tighter margins
   - Reducing the base font size
   - Hiding desktop nav links entirely and showing a mobile toggle
   - Reflowing the navigation drawer to a single column
   - Scaling down the bookshelf books, CRT quote widget, and all
     decorative elements to fit narrow viewports
   ========================================================================== */
@media (max-width: 760px) {
  /* Reduce the global notch custom property. This variable is used
     throughout the site for consistent spacing — making it smaller
     tightens everything up on phones. */
  :root {
    --notch: 10px;
  }

  /* Slightly smaller base font keeps text comfortable on small screens
     without requiring zooming out. */
  body {
    font-size: 18px;
  }

  /* Tighter horizontal padding on the main container so content stretches
     closer to the screen edges and maximizes usable space. */
  .container {
    padding: 0 1rem;
  }

  /* Less top padding above the nav to reclaim vertical real estate. */
  .study-nav {
    padding-top: 0.72rem;
  }

  /* The nav shell drops to a simple two-column grid: brand on the left,
     mobile toggle on the right, with space-between alignment. Internal
     padding is also reduced. */
  .study-nav .nav-shell {
    grid-template-columns: auto auto;
    justify-content: space-between;
    padding: 0.62rem 0.72rem;
  }

  /* Desktop navigation links and icon shortcuts are completely hidden
     on mobile — the hamburger / mobile toggle replaces them. */
  .nav-links-desktop,
  .nav-icons {
    display: none;
  }

  /* The brand mark (site title) shrinks and gets tighter letter-spacing
     so it doesn't overflow on narrow screens. Line-height: 1 removes
     extra vertical space. */
  .brand-mark {
    font-size: 1.74rem;
    letter-spacing: 0.28px;
    line-height: 1;
    padding: 0.14rem 0.5rem 0.22rem;
  }

  /* The decorative border pseudo-element stretches to fill the brand
     mark completely (inset: 0) rather than having offset margins. */
  .brand-mark::before {
    inset: 0;
  }

  /* The underline accent under the brand mark is adjusted to sit
     slightly inward from the edges at mobile size. */
  .brand-mark::after {
    left: 0.3rem;
    right: 0.3rem;
    bottom: 0.1rem;
  }

  /* The mobile menu toggle button becomes visible (it is hidden on
     desktop). Sized small to sit neatly beside the brand mark. */
  .nav-mobile-toggle {
    display: inline-block;
    font-size: 0.72rem;
    padding: 0.32rem 0.62rem;
  }

  /* The slide-out drawer takes nearly full viewport width (minus 2rem
     for breathing room) and caps its height so it doesn't push content
     off-screen on short devices. */
  .site-drawer {
    width: calc(100% - 2rem);
    max-height: min(76vh, 700px);
  }

  /* Drawer internals collapse to a single column with compact padding
     and a small gap, since there's no room for side-by-side groups. */
  .drawer-inner {
    grid-template-columns: 1fr;
    gap: 0.66rem;
    padding: 0.8rem 0.84rem 0.86rem;
  }

  /* Individual drawer groups (link sections) get reduced padding. */
  .drawer-group {
    padding: 0.6rem 0.64rem;
  }

  /* The hero / stage area loses its fixed height and becomes flexible
     so the heading text can wrap naturally at small widths without
     being clipped. Min-height keeps it from collapsing too small. */
  .stage-copy {
    min-height: 180px;
    height: auto;
    padding: 0.5rem;
  }

  /* The inner and outer decorative border pseudo-elements on the
     stage are pulled slightly inward to maintain visual proportions
     at the reduced padding. */
  .stage-copy::before {
    inset: 0.42rem;
  }

  .stage-copy::after {
    inset: 0.58rem;
  }

  /* The main heading inside the stage uses a fluid clamp() for font
     size — it scales between 2.6rem and 3.8rem based on viewport width
     (9vw), staying legible without overflowing. max-width: none removes
     any desktop width cap so it can use up to 96% of available space. */
  .stage-copy h1 {
    width: min(96%, 420px);
    max-width: none;
    font-size: clamp(2.6rem, 9vw, 3.8rem);
    letter-spacing: 0.6px;
  }

  /* The CRT (cathode-ray tube) quote widget gets reduced outer padding
     so it doesn't eat into the limited horizontal space. */
  .quote-crt {
    padding: 0.62rem;
  }

  /* When the CRT widget lives inside the quote room card on the
     homepage, enforce a minimum height so the quote text and
     decorative controls have enough room to render. */
  .room-quote .quote-crt {
    min-height: 332px;
  }

  /* Tighten the CRT shell's internal spacing — less padding around
     the screen area and a smaller gap between the screen and controls. */
  .quote-crt-shell {
    padding: 0.62rem 0.64rem 0.58rem;
    gap: 0.52rem;
  }

  /* Less padding around the inner CRT screen bezel. */
  .crt-screen {
    padding: 0.5rem;
  }

  /* The glowing screen surface (where the quote text appears) gets a
     fixed height and tighter padding for mobile. */
  .crt-screen-surface {
    height: 220px;
    padding: 0.9rem 0.84rem;
  }

  /* The quote text itself uses a fluid font size that scales with
     viewport width, preventing overflow on very narrow screens while
     staying readable on wider phones. */
  .quote-crt #random-quote {
    font-size: clamp(1rem, 4.4vw, 1.3rem);
    line-height: 1.26;
    letter-spacing: 0.42px;
  }

  /* The attribution line (author name) beneath the quote is smaller
     and more tightly spaced to stay subordinate to the quote itself. */
  .quote-crt #random-quote small {
    margin-top: 0.48rem;
    font-size: 0.74rem;
    letter-spacing: 0.36px;
  }

  /* CRT control bar below the screen: reduce gap and padding to
     compress the decorative switches and knobs into a phone-sized bar. */
  .crt-controls {
    gap: 0.56rem;
    padding: 0.32rem 0.38rem 0.38rem;
  }

  /* Tighter gap between the toggle switches. */
  .crt-switches {
    gap: 0.2rem;
  }

  /* Individual switch elements are shorter. */
  .crt-switches span {
    height: 0.66rem;
  }

  /* Tighter gap between the decorative knobs. */
  .crt-knobs {
    gap: 0.24rem;
  }

  /* Each knob shrinks slightly to stay proportional. */
  .crt-knobs span {
    width: 0.88rem;
    height: 0.88rem;
  }

  /* Room cards (the main content panels on the homepage) get reduced
     padding on all sides to maximize content space on phones. */
  .room {
    padding: 1rem 1rem 0.9rem;
  }

  /* Parchment-style cards similarly tighten their internal padding. */
  .room-card,
  .parchment-card {
    padding: 1rem 1rem 0.9rem;
  }

  /* The bookshelf container loses its desktop padding and uses a
     slightly smaller gap between rows. */
  .bookshelf {
    gap: 0.42rem;
    padding: 0;
  }

  /* The decorative top molding of the bookshelf shrinks and gets
     adjusted margins for the narrower layout. */
  .bookshelf-top {
    height: 38px;
    margin: 0 0.04rem 0.56rem;
  }

  /* Inner decorative line on the bookshelf top — repositioned and
     made shorter to match the reduced molding height. */
  .bookshelf-top::before {
    left: 0.5rem;
    right: 0.5rem;
    top: 5px;
    height: 10px;
  }

  /* Second decorative line on the bookshelf top, similarly adjusted. */
  .bookshelf-top::after {
    left: 0.16rem;
    right: 0.16rem;
    bottom: 5px;
    height: 8px;
  }

  /* A bit more gap between book rows than the 920px breakpoint had,
     giving each book breathing room in the stacked layout. */
  .bookshelf-row {
    gap: 0.52rem;
  }

  /* Mobile shelf planks narrow further and thin out at phone size
     to stay proportional with the smaller book cards. */
  .shelf-plank--mobile {
    width: min(100%, 334px);
    margin: -0.04rem 0.04rem 0.08rem;
    height: 14px;
  }

  /* Book cards shrink again: max 334px wide, 374px tall, with a
     narrower 56px spine column. This keeps the book metaphor intact
     while fitting comfortably on a phone screen. */
  .shelf-book,
  .shelf-book--tall {
    width: min(100%, 334px);
    grid-template-columns: 56px minmax(0, 1fr);
    min-height: 374px;
    height: 374px;
  }

  /* Spine title letter-spacing tightens slightly at mobile size. */
  .book-spine-title {
    letter-spacing: 0.9px;
  }

  /* Per-book spine adjustments — each book variant (umber, copper,
     olive, claret, azure, bitcoin) has its own font-size and spacing
     tuned via custom properties so the rotated spine text fits neatly
     within the narrower 56px spine at mobile dimensions. */
  .shelf-book--umber {
    --title-spine-size: 1.14rem;
    --title-spine-spacing: 0.8px;
  }

  .shelf-book--copper {
    --title-spine-size: 1.11rem;
    --title-spine-spacing: 0.82px;
  }

  .shelf-book--olive {
    --title-spine-size: 1.05rem;
    --title-spine-spacing: 0.78px;
  }

  .shelf-book--claret {
    --title-spine-size: 1.11rem;
    --title-spine-spacing: 0.78px;
  }

  .shelf-book--azure {
    --title-spine-size: 1.08rem;
    --title-spine-spacing: 0.78px;
  }

  .shelf-book--bitcoin {
    --title-spine-size: 1.08rem;
    --title-spine-spacing: 0.78px;
  }

  /* The small index badge on each book (a circled number or letter)
     shrinks at mobile — smaller width, font, and repositioned to
     the bottom-left of the book cover. */
  .book-index {
    width: 1.82rem;
    min-height: 1.5rem;
    left: 0.42rem;
    bottom: 0.5rem;
    font-size: 0.36rem;
  }

  /* ---- Per-book cover typography adjustments (mobile) ----
     Each book-variant has unique cover art built with pseudo-elements
     and headings. The following blocks fine-tune title size, position,
     and spacing for each variant so the typographic design doesn't
     break at 760px and below. */

  /* Umber book: the h3 shrinks to font-size: 0 (hiding the HTML text)
     while its ::before and ::after pseudo-elements render the decorative
     title at sizes appropriate for mobile. */
  .shelf-book--umber .shelf-body h3 {
    width: min(78%, 190px);
    margin-top: 0;
    min-height: 2.4rem;
    font-size: 0;
    padding: 0;
  }

  .shelf-book--umber .shelf-body h3::before {
    font-size: 0.9rem;
    letter-spacing: 1.02px;
  }

  .shelf-book--umber .shelf-body h3::after {
    margin-top: 1.04rem;
    font-size: 1.08rem;
    letter-spacing: 0.58px;
  }

  /* Copper book: slightly narrower title block, nudged down a bit. */
  .shelf-book--copper .shelf-body h3 {
    width: min(76%, 182px);
    margin-top: 0.34rem;
  }

  .shelf-book--copper .shelf-body h3::before {
    font-size: 0.92rem;
    letter-spacing: 1.04px;
  }

  .shelf-book--copper .shelf-body h3::after {
    margin-top: 1.1rem;
    font-size: 1.14rem;
    letter-spacing: 1.1px;
  }

  /* Olive book: pushed further down with a larger visible font-size
     since this variant uses the actual h3 text rather than hiding it. */
  .shelf-book--olive .shelf-body h3 {
    width: min(74%, 172px);
    margin-top: 1.82rem;
    font-size: 1.34rem;
  }

  .shelf-book--olive .shelf-body h3::after {
    font-size: 0.48rem;
    margin-top: 0.28rem;
  }

  /* Decorative pseudo-elements on the olive book body (horizontal
     rules or ornaments) are repositioned to stay centered relative
     to the shorter mobile book card. */
  .shelf-book--olive .shelf-body::before {
    bottom: 1.86rem;
  }

  .shelf-book--olive .shelf-body::after {
    bottom: 1.26rem;
  }

  /* Claret book: similar treatment — narrower, shifted down, with
     scaled-down subtitle text. */
  .shelf-book--claret .shelf-body h3 {
    width: min(74%, 168px);
    margin-top: 0.62rem;
    font-size: 1.3rem;
  }

  .shelf-book--claret .shelf-body h3::after {
    font-size: 0.48rem;
    margin-top: 0.26rem;
  }

  /* The claret book's decorative band (::before) is a horizontal
     accent stripe; it gets repositioned and its text shrinks. */
  .shelf-book--claret .shelf-body::before {
    top: 66.6%;
    height: 17px;
    font-size: 0.39rem;
    letter-spacing: 0.6px;
    padding-left: 0.3rem;
  }

  /* The lower ornament (::after) anchors right below the band. */
  .shelf-book--claret .shelf-body::after {
    top: calc(66.6% + 17px);
  }

  /* Azure book: wider title area (82%) with a very small top margin.
     The min-height reserves space for the two-line pseudo-element title. */
  .shelf-book--azure .shelf-body h3 {
    width: min(82%, 172px);
    margin-top: 0.08rem;
    min-height: 3.1rem;
  }

  .shelf-book--azure .shelf-body h3::before {
    font-size: 1.36rem;
    letter-spacing: 0.92px;
  }

  .shelf-book--azure .shelf-body h3::after {
    margin-top: 1.56rem;
    font-size: 0.64rem;
    letter-spacing: 0.2px;
  }

  /* The azure book cover has an illustrative element (::after) that
     acts as a centered panel or image placeholder — repositioned
     and resized for the smaller card. */
  .shelf-book--azure .book-cover::after {
    left: 14%;
    right: 14%;
    height: 43%;
    bottom: 4.9rem;
  }

  /* Author / subtitle bar at the bottom of the azure book body. */
  .shelf-book--azure .shelf-body::before {
    left: 10%;
    right: 10%;
    bottom: 0.72rem;
    height: 16px;
    font-size: 0.36rem;
    letter-spacing: 0.56px;
  }

  /* Bitcoin book: title pushed down further with a taller reserved
     area (min-height: 3.98rem) to accommodate the large symbol. */
  .shelf-book--bitcoin .shelf-body h3 {
    width: min(82%, 176px);
    margin-top: 1.48rem;
    min-height: 3.98rem;
  }

  /* The bitcoin symbol pseudo-element stays large but is scaled
     down from desktop to fit the narrower mobile card. */
  .shelf-book--bitcoin .shelf-body h3::before {
    font-size: 2.94rem;
  }

  .shelf-book--bitcoin .shelf-body h3::after {
    margin-top: 2.82rem;
    font-size: 0.76rem;
    letter-spacing: 0.66px;
  }

  /* Top decorative label on the bitcoin book body. */
  .shelf-book--bitcoin .shelf-body::before {
    top: 0.78rem;
    font-size: 0.42rem;
    letter-spacing: 0.72px;
  }

  /* Underline / ornament beneath the bitcoin book label. */
  .shelf-book--bitcoin .shelf-body::after {
    top: 1.24rem;
  }

  /* ---- Book page-edge decorations (mobile) ----
     Re-adjust the faux page edges (the white strips along the right
     and bottom of each book) to match the 56px spine at this size. */
  .book-pages::before {
    left: 56px;
    height: 18px;
  }

  .book-pages::after {
    bottom: 18px;
    width: 22px;
  }

  /* Book card padding mirrors the page-edge thickness so the cover
     content area stops before the decorative edges. */
  .shelf-book,
  .shelf-book--tall {
    padding-right: 22px;
    padding-bottom: 18px;
  }

  /* Corner accent pseudo-element repositioned for the new padding. */
  .shelf-book::before {
    right: 22px;
    bottom: 18px;
  }

  /* On mobile, the book "slip" (a pull-out info overlay) is always
     visible and un-transformed since hover isn't reliable on touch.
     This ensures the content is accessible without hover interaction. */
  .book-slip {
    opacity: 1;
    transform: none;
  }

  /* Collapse the book cover grid to a single row — no need for the
     desktop's multi-row layout at this small size. */
  .book-cover {
    grid-template-rows: 1fr;
  }

  /* Generic shelf-body pseudo-element height is standardized at 92px
     for the decorative bands across all book variants. */
  .shelf-body::before,
  .shelf-body::after {
    height: 92px;
  }

  /* The book cover heading uses a fluid clamp() so it scales smoothly
     between phone sizes without a hard jump. */
  .shelf-body h3 {
    font-size: clamp(1.42rem, 6.8vw, 1.92rem);
    padding-bottom: 0.16rem;
  }

  /* ---- Register / tab-link cards (mobile) ----
     The register is a stacked-tab navigation UI. On mobile the tabs
     get compressed padding to conserve space. */
  .register-links {
    padding: 0.04rem 0.04rem 0.12rem;
  }

  /* Register section heading shrinks with a fluid clamp to stay
     proportional, and its bottom margin decreases. */
  .register-card h2 {
    margin-bottom: 0.72rem;
    font-size: clamp(2.2rem, 10vw, 2.9rem);
  }

  /* Individual tab links are shorter, overlap more (negative margin),
     and have smaller text for the mobile layout. */
  .register-links a {
    height: 108px;
    margin-top: -62px;
    font-size: 0.76rem;
    letter-spacing: 1px;
    padding: 0.44rem 0.6rem 0;
  }

  /* Per-tab stagger offsets — each tab "sheet" is shifted a few pixels
     to create the layered-paper illusion. These values are tuned for
     mobile so the stack still looks natural at smaller scale. */
  .register-links a:nth-child(1) {
    --sheet-shift: 2px;
  }

  .register-links a:nth-child(2) {
    --sheet-shift: 7px;
  }

  .register-links a:nth-child(3) {
    --sheet-shift: 9px;
  }

  /* The shadow / offset pseudo-element behind each tab is nudged
     slightly to maintain the 3D paper-stack look at mobile size. */
  .register-links a::before {
    transform: translate(2px, 3px);
  }

  /* The inner border accent on each tab link is repositioned with
     tighter insets to stay proportional. */
  .register-links a::after {
    left: 0.6rem;
    right: 0.6rem;
    top: 1.28rem;
    bottom: 0.56rem;
  }

  /* ---- Reading list card (mobile) ----
     The reading card is a similar stacked-sheet UI for book entries.
     Padding and spacing are reduced for phone screens. */
  .reading-card {
    padding: 0.02rem 0.02rem 0.18rem;
  }

  .reading-card ul {
    padding: 0.04rem 0.04rem 0.1rem;
  }

  /* Each reading-list item (styled as a paper sheet) has a fixed
     height and large negative top margin so they overlap and form
     a cascading stack of cards. */
  .reading-card li {
    height: 108px;
    margin-top: -68px;
  }

  /* Per-item sheet stagger offsets — like the register tabs, each
     list item shifts by a few pixels for the layered effect. */
  .reading-card li:nth-child(1) {
    --sheet-shift: 3px;
  }

  .reading-card li:nth-child(2) {/* ==========================================================================
   styles.css — Part 5  (lines 4101-4619)
   Continuation of responsive breakpoints:
     1. Tail end of the 760px mobile breakpoint (reading cards, nav, hero)
     2. The 420px "small mobile" breakpoint (phones ≤ 420px)
     3. A 761px+ "desktop-only" rule for the site drawer
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Still inside @media (max-width: 760px) — the general mobile breakpoint.
   These final rules tighten spacing on reading-card list items, the main
   navigation bar, the hero section, and generic content sections so that
   everything stays readable on phones up to 760px wide.
   --------------------------------------------------------------------------- */

  .reading-card li:nth-child(2) {
    --sheet-shift: 8px;
  }

  .reading-card li:nth-child(3) {
    --sheet-shift: 5px;
  }

  .reading-card li:nth-child(4) {
    --sheet-shift: 10px;
  }

  /* Nudge the decorative ::before pseudo-element on each reading-card
     list item slightly right and down so it stays aligned with the
     smaller card dimensions at mobile sizes. */
  .reading-card li::before {
    transform: translate(3px, 4px);
  }

  /* Scale down the link text inside reading cards and reduce padding
     to keep the cards compact on narrow screens. */
  .reading-card li a {
    font-size: 0.78rem;
    letter-spacing: 1.02px;
    padding: 0.48rem 0.62rem 0;
  }

  /* Reposition the decorative underline pseudo-element on reading-card
     links to match the smaller font size and padding above. */
  .reading-card li a::after {
    left: 0.62rem;
    right: 0.62rem;
    top: 1.46rem;
  }

  /* Reduce top padding on the primary nav (excluding the study-nav
     variant) to reclaim vertical space on mobile. */
  nav:not(.study-nav) {
    padding-top: 0.7rem;
  }

  nav:not(.study-nav) .container {
    padding: 0.62rem 0.72rem;
  }

  /* Shrink the site name and nav link text so the entire navigation bar
     fits comfortably in a single row on small viewports. */
  nav:not(.study-nav) .site-name {
    font-size: 0.84rem;
  }

  nav:not(.study-nav) ul a {
    font-size: 0.66rem;
    padding: 0.24rem 0.48rem;
  }

  /* Tighten hero and section padding to maximise usable content width
     on mobile screens. */
  .hero .container {
    padding: 1rem 1rem 0.9rem;
  }

  .hero .hero-subtitle {
    font-size: 0.98rem;
  }

  main:not(.home-rooms) > section .container {
    padding: 1rem 1rem 0.9rem;
  }
}

/* ===========================================================================
   SMALL MOBILE BREAKPOINT — max-width: 420px
   Targets the narrowest phones (≤ 420px). At this size almost every
   component needs further scaling: the brand mark, stage copy, CRT quote
   widget, bookshelf cards, register links, reading cards, and the footer.
   The goal is to prevent horizontal overflow and keep tap targets usable
   while still preserving the site's visual character.
   =========================================================================== */
@media (max-width: 420px) {

  /* Slightly tighten the global container side-padding so content uses
     as much horizontal space as possible on very small screens. */
  .container {
    padding: 0 0.86rem;
  }

  /* Scale the brand-mark logotype down to fit narrow screens. Reduce
     font-size, letter-spacing, and internal padding proportionally.
     line-height: 1 removes extra leading so the mark sits tight. */
  .brand-mark {
    font-size: 1.56rem;
    letter-spacing: 0.2px;
    line-height: 1;
    padding: 0.12rem 0.42rem 0.18rem;
  }

  /* Reset the decorative border pseudo-element to hug the edges of
     the now-smaller brand mark. */
  .brand-mark::before {
    inset: 0;
  }

  /* Pull the underline accent inward to stay proportional. */
  .brand-mark::after {
    left: 0.24rem;
    right: 0.24rem;
    bottom: 0.08rem;
  }

  /* Shrink the hamburger-menu toggle label so it doesn't crowd the
     brand mark on very narrow screens. */
  .nav-mobile-toggle {
    font-size: 0.68rem;
  }

  /* Uniform compact padding for the main card-type components —
     stage-copy, room cards, and parchment cards — so they all breathe
     consistently at this breakpoint. */
  .stage-copy,
  .room,
  .room-card,
  .parchment-card {
    padding: 0.88rem 0.84rem 0.78rem;
  }

  /* The stage-copy hero block gets a reduced minimum height and extra-
     tight padding, since on a ≤ 420px screen it already dominates the
     viewport. The decorative double-border pseudo-elements (::before
     and ::after) pull inward to match. */
  .stage-copy {
    min-height: 160px;
    padding: 0.44rem;
  }

  .stage-copy::before {
    inset: 0.36rem;
  }

  .stage-copy::after {
    inset: 0.5rem;
  }

  /* Constrain the main heading width and use a fluid clamp() so it
     scales smoothly between 2.2rem and 3.2rem, peaking around 8vw.
     max-width: none removes any earlier cap so the heading can use
     the full 96% / 340px allowance. */
  .stage-copy h1 {
    width: min(96%, 340px);
    max-width: none;
    font-size: clamp(2.2rem, 8vw, 3.2rem);
    letter-spacing: 0.4px;
  }

  /* -----------------------------------------------------------------------
     CRT Quote Widget — small-mobile overrides
     The CRT-styled random-quote component is built from nested shells:
       .quote-crt  →  .quote-crt-shell  →  .crt-screen  →  .crt-screen-surface
     Each layer's padding, font sizes, and decorative details are reduced
     here so the widget still looks like a miniature CRT monitor even on
     the narrowest phones.
     ----------------------------------------------------------------------- */
  .quote-crt {
    padding: 0.52rem;
  }

  .room-quote .quote-crt {
    min-height: 286px;
  }

  .quote-crt-shell {
    padding: 0.52rem 0.54rem 0.5rem;
    gap: 0.44rem;
  }

  /* Scale the decorative brand badge and its LED indicator light down. */
  .crt-badge {
    font-size: 0.5rem;
    letter-spacing: 0.74px;
  }

  .crt-badge-light {
    width: 0.96rem;
    height: 0.58rem;
  }

  .crt-screen {
    padding: 0.42rem;
  }

  /* Reduce the inner screen surface to a fixed height so the
     quote text has enough room but the overall widget doesn't overflow. */
  .crt-screen-surface {
    height: 188px;
    padding: 0.74rem 0.7rem;
  }

  /* Use a fluid clamp for the quote text (0.88rem → 1.08rem) so it
     remains legible without overflowing on tiny screens. Tighten
     line-height and letter-spacing to match the smaller container. */
  .quote-crt #random-quote {
    font-size: clamp(0.88rem, 5.2vw, 1.08rem);
    line-height: 1.24;
    letter-spacing: 0.34px;
  }

  /* The attribution line below the quote gets proportionally smaller. */
  .quote-crt #random-quote small {
    margin-top: 0.4rem;
    font-size: 0.64rem;
    letter-spacing: 0.28px;
  }

  /* Compact the row of decorative CRT control knobs, switches, and
     the gaps between them. */
  .crt-controls {
    gap: 0.44rem;
    padding: 0.26rem 0.3rem 0.3rem;
  }

  .crt-switches span {
    height: 0.58rem;
  }

  .crt-knobs span {
    width: 0.76rem;
    height: 0.76rem;
  }

  /* The CRT "feet" (vertical bars created with ::before / ::after on
     the shell) shrink to stay proportionate with the smaller monitor. */
  .quote-crt-shell::before,
  .quote-crt-shell::after {
    bottom: 0.9rem;
    height: 1.86rem;
    width: 0.22rem;
  }

  /* -----------------------------------------------------------------------
     Bookshelf Cards — small-mobile overrides
     Each "book" is a CSS-only card rendered with a two-column grid
     (spine + cover). At ≤ 420px the books shrink to a max of 292px wide,
     the spine column narrows to 52px, and the simulated page-edge
     pseudo-elements (::before for bottom edge, ::after for right edge)
     adjust their offsets to match.
     ----------------------------------------------------------------------- */
  .shelf-book,
  .shelf-book--tall {
    width: min(100%, 292px);
    grid-template-columns: 52px minmax(0, 1fr);
    min-height: 326px;
    height: 326px;
    padding-right: 18px;
    padding-bottom: 16px;
  }

  /* Reposition the page-edge pseudo-elements to align with the
     narrower spine (52px) and thinner page edges (16px / 18px). */
  .book-pages::before {
    left: 52px;
    height: 16px;
  }

  .book-pages::after {
    bottom: 16px;
    width: 18px;
  }

  /* The book shadow (::before on .shelf-book) matches the new padding. */
  .shelf-book::before {
    right: 18px;
    bottom: 16px;
  }

  /* The decorative shelf header above the book row scales down. */
  .bookshelf-top {
    height: 34px;
    margin: 0 0.02rem 0.5rem;
  }

  /* Inner decorative lines inside the shelf header reposition. */
  .bookshelf-top::before {
    left: 0.42rem;
    right: 0.42rem;
    top: 4px;
    height: 9px;
  }

  .bookshelf-top::after {
    left: 0.12rem;
    right: 0.12rem;
    bottom: 4px;
    height: 7px;
  }

  /* The mobile-only shelf plank (visible divider between stacked books)
     matches the book width and stays slim. */
  .shelf-plank--mobile {
    width: min(100%, 292px);
    margin: -0.02rem 0.02rem 0.06rem;
    height: 12px;
  }

  /* Slightly tighten spine title letter-spacing globally. */
  .book-spine-title {
    letter-spacing: 0.84px;
  }

  /* Per-book custom-property overrides for spine title sizing.
     Each book variant (umber, copper, olive, etc.) has a different title
     length, so font-size and letter-spacing are individually tuned via
     CSS custom properties to prevent overflow on the narrow spine. */
  .shelf-book--umber {
    --title-spine-size: 1.02rem;
    --title-spine-spacing: 0.72px;
  }

  .shelf-book--copper {
    --title-spine-size: 0.99rem;
    --title-spine-spacing: 0.72px;
  }

  .shelf-book--olive {
    --title-spine-size: 0.93rem;
    --title-spine-spacing: 0.68px;
  }

  .shelf-book--claret {
    --title-spine-size: 0.99rem;
    --title-spine-spacing: 0.68px;
  }

  .shelf-book--azure {
    --title-spine-size: 0.95rem;
    --title-spine-spacing: 0.66px;
  }

  .shelf-book--bitcoin {
    --title-spine-size: 0.94rem;
    --title-spine-spacing: 0.66px;
  }

  /* The small index label on each book cover (e.g., a number or icon)
     shrinks and repositions to stay in the lower-left corner. */
  .book-index {
    width: 1.68rem;
    min-height: 1.38rem;
    left: 0.36rem;
    bottom: 0.44rem;
    font-size: 0.33rem;
  }

  /* -----------------------------------------------------------------------
     Per-book cover typography — small-mobile overrides
     Each book-variant has unique cover art built entirely with CSS
     pseudo-elements (::before for a subtitle / label, ::after for the
     main title or decorative rule). These rules fine-tune positions,
     font sizes, and spacing for the ≤ 420px viewport.
     ----------------------------------------------------------------------- */

  /* UMBER book: The heading collapses its own font-size to 0 and
     renders its text entirely through ::before and ::after, giving
     full control over the two-line title layout at small sizes. */
  .shelf-book--umber .shelf-body h3 {
    width: min(78%, 168px);
    margin-top: 0;
    min-height: 2.08rem;
    font-size: 0;
    padding: 0;
  }

  .shelf-book--umber .shelf-body h3::before {
    font-size: 0.78rem;
    letter-spacing: 0.88px;
  }

  .shelf-book--umber .shelf-body h3::after {
    margin-top: 0.9rem;
    font-size: 0.88rem;
    letter-spacing: 0.5px;
  }

  /* COPPER book: Slightly narrower title block with a small top offset. */
  .shelf-book--copper .shelf-body h3 {
    width: min(76%, 158px);
    margin-top: 0.26rem;
  }

  .shelf-book--copper .shelf-body h3::before {
    font-size: 0.78rem;
    letter-spacing: 0.88px;
  }

  .shelf-book--copper .shelf-body h3::after {
    margin-top: 0.94rem;
    font-size: 0.94rem;
    letter-spacing: 0.92px;
  }

  /* OLIVE book: Title pushed down with a larger margin-top to leave
     room for decorative elements above it. The ::after subtitle and
     the body pseudo-elements (decorative lines) reposition. */
  .shelf-book--olive .shelf-body h3 {
    width: min(74%, 150px);
    margin-top: 1.54rem;
    font-size: 1.16rem;
  }

  .shelf-book--olive .shelf-body h3::after {
    font-size: 0.42rem;
    letter-spacing: 0.9px;
  }

  .shelf-book--olive .shelf-body::before {
    bottom: 1.62rem;
  }

  .shelf-book--olive .shelf-body::after {
    bottom: 1.08rem;
  }

  /* CLARET book: Similar to olive but with its own proportions. The
     body ::before holds a small label positioned partway down the cover
     and ::after draws a rule just below it. */
  .shelf-book--claret .shelf-body h3 {
    width: min(74%, 148px);
    margin-top: 0.54rem;
    font-size: 1.12rem;
  }

  .shelf-book--claret .shelf-body h3::after {
    font-size: 0.42rem;
    letter-spacing: 0.62px;
  }

  .shelf-book--claret .shelf-body::before {
    top: 66.1%;
    height: 15px;
    font-size: 0.35rem;
    letter-spacing: 0.5px;
    padding-left: 0.24rem;
  }

  .shelf-book--claret .shelf-body::after {
    top: calc(66.1% + 15px);
  }

  /* AZURE book: Wider title area (82%) to accommodate a longer name.
     The cover illustration (::after on .book-cover) and the bottom
     label (::before on .shelf-body) are repositioned for the smaller
     card dimensions. */
  .shelf-book--azure .shelf-body h3 {
    width: min(82%, 150px);
    margin-top: 0.04rem;
    min-height: 2.62rem;
  }

  .shelf-book--azure .shelf-body h3::before {
    font-size: 1.12rem;
    letter-spacing: 0.8px;
  }

  .shelf-book--azure .shelf-body h3::after {
    margin-top: 1.28rem;
    font-size: 0.54rem;
    letter-spacing: 0.16px;
  }

  .shelf-book--azure .book-cover::after {
    left: 13%;
    right: 13%;
    height: 41%;
    bottom: 4.2rem;
  }

  .shelf-book--azure .shelf-body::before {
    left: 9%;
    right: 9%;
    bottom: 0.62rem;
    height: 14px;
    font-size: 0.32rem;
    letter-spacing: 0.5px;
  }

  /* BITCOIN book: The symbol (::before on h3) stays large at 2.44rem
     so it remains the visual anchor of the cover. The subtitle below
     and the top decorative elements scale down. */
  .shelf-book--bitcoin .shelf-body h3 {
    width: min(82%, 154px);
    margin-top: 1.26rem;
    min-height: 3.42rem;
  }

  .shelf-book--bitcoin .shelf-body h3::before {
    font-size: 2.44rem;
  }

  .shelf-book--bitcoin .shelf-body h3::after {
    margin-top: 2.36rem;
    font-size: 0.66rem;
    letter-spacing: 0.56px;
  }

  .shelf-book--bitcoin .shelf-body::before {
    top: 0.68rem;
    font-size: 0.36rem;
    letter-spacing: 0.6px;
  }

  .shelf-book--bitcoin .shelf-body::after {
    top: 1.08rem;
  }

  /* Collapse the book-cover grid to a single row so the cover content
     stacks naturally without leftover row space. */
  .book-cover {
    grid-template-rows: 1fr;
  }

  /* Global height for the decorative rule pseudo-elements inside every
     book body at this breakpoint. */
  .shelf-body::before,
  .shelf-body::after {
    height: 78px;
  }

  /* Fluid book-body heading size using clamp, ensuring it never drops
     below 1.2rem or exceeds 1.58rem. */
  .shelf-body h3 {
    font-size: clamp(1.2rem, 7.2vw, 1.58rem);
    padding-bottom: 0.12rem;
  }

  /* The small "slip" label on each book (genre / tag) gets tiny to fit. */
  .book-slip {
    font-size: 0.5rem;
    padding: 0.2rem 0.34rem;
  }

  /* -----------------------------------------------------------------------
     Register Card — small-mobile overrides
     The "register" card uses a cash-register visual metaphor. Its links
     look like receipt slips stacked with negative margins. At ≤ 420px
     the heading uses a fluid clamp, the slips shrink, and their
     decorative sheet-shift offsets are reduced.
     ----------------------------------------------------------------------- */
  .register-card h2 {
    font-size: clamp(2rem, 12vw, 2.56rem);
  }

  .register-links a {
    height: 94px;
    margin-top: -56px;
    font-size: 0.7rem;
    letter-spacing: 0.9px;
    padding: 0.38rem 0.5rem 0;
  }

  /* Each receipt-slip link gets a unique horizontal offset via
     --sheet-shift to create a staggered, hand-placed look. */
  .register-links a:nth-child(1) {
    --sheet-shift: 1px;
  }

  .register-links a:nth-child(2) {
    --sheet-shift: 4px;
  }

  .register-links a:nth-child(3) {
    --sheet-shift: 6px;
  }

  /* Reduce the shadow pseudo-element offset on register links. */
  .register-links a::before {
    transform: translate(2px, 2px);
  }

  /* Reposition the decorative border on each register link to fit
     the smaller card dimensions. */
  .register-links a::after {
    left: 0.5rem;
    right: 0.5rem;
    top: 1.08rem;
    bottom: 0.5rem;
  }

  /* -----------------------------------------------------------------------
     Reading Card — small-mobile overrides
     Like the register links, reading-card list items stack with negative
     margins and per-item --sheet-shift offsets. Everything scales down
     further for the ≤ 420px viewport.
     ----------------------------------------------------------------------- */
  .reading-card li {
    height: 94px;
    margin-top: -60px;
  }

  .reading-card li:nth-child(1) {
    --sheet-shift: 2px;
  }

  .reading-card li:nth-child(2) {
    --sheet-shift: 6px;
  }

  .reading-card li:nth-child(3) {
    --sheet-shift: 3px;
  }

  .reading-card li:nth-child(4) {
    --sheet-shift: 8px;
  }

  /* Smaller shadow offset on the decorative ::before pseudo-element. */
  .reading-card li::before {
    transform: translate(2px, 3px);
  }

  /* Scale link text and padding to match the smaller card height. */
  .reading-card li a {
    font-size: 0.72rem;
    letter-spacing: 0.94px;
    padding: 0.42rem 0.52rem 0;
  }

  /* Reposition the underline pseudo-element for the smaller text. */
  .reading-card li a::after {
    left: 0.52rem;
    right: 0.52rem;
    top: 1.3rem;
  }

  /* Center the footer text on very small screens and add generous
     letter-spacing for a clean, balanced appearance. */
  footer .container {
    text-align: center;
    letter-spacing: 1.3px;
  }
}

/* ===========================================================================
   DESKTOP-ONLY RULES — min-width: 761px
   These rules apply only when the viewport is wider than 760px (i.e.,
   tablets in landscape and desktops). On those screens the main navigation
   is always visible in the header, so the slide-out drawer only needs to
   show supplementary content — the duplicate nav links in the first
   drawer-group are hidden, and only the second group (e.g., social links
   or secondary nav) is displayed.
   =========================================================================== */
@media (min-width: 761px) {

  /* Cap the drawer width at 540px so it doesn't stretch too wide on
     large monitors, while still allowing it to shrink with a 2.8rem
     margin from the viewport edge. */
  .site-drawer {
    width: min(540px, calc(100% - 2.8rem));
  }

  /* Simplify the drawer's internal grid to a single column and apply
     comfortable padding for the wider layout. */
  .drawer-inner {
    grid-template-columns: 1fr;
    gap: 0.72rem;
    padding: 0.84rem 0.92rem 0.88rem;
  }

  /* On desktop, hide all drawer groups except interests — About, Projects,
     and the contact icons are already present in the nav bar. */
  .drawer-group {
    display: none;
  }

  .drawer-group--interests {
    display: block;
  }
}