/* ================================================================
       FL718 QUOTES PAGE — UNIFIED PROTOTYPE
       All 12 animations + Phase 1 engine
    ================================================================ */

    :where(body.fl718-quotes-page) *,
    :where(body.fl718-quotes-page) *::before,
    :where(body.fl718-quotes-page) *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body.fl718-quotes-page {
      overflow: hidden;
      min-height: 100vh;
      min-height: 100dvh;
      background-color: #171612;
      transition: background-color 0.7s ease;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* ── Mood backgrounds + per-mood text color ──────────────────── */

    body.fl718-mood-dark-raw {
      background-color: #171612;
      --fl718-bg: #171612;
      --fl718-text: #f5ede0;
      --fl718-rule: rgba(245, 237, 224, 0.16);
    }
    body.fl718-mood-tender-literary {
      background-color: #161b22;
      --fl718-bg: #161b22;
      --fl718-text: #eef2f8;
      --fl718-rule: rgba(238, 242, 248, 0.14);
    }
    body.fl718-mood-defiant-political {
      background-color: #1c1c1c;
      --fl718-bg: #1c1c1c;
      --fl718-text: #f0ece4;
      --fl718-rule: rgba(240, 236, 228, 0.15);
    }
    body.fl718-mood-contemplative-ancient {
      background-color: #1a1510;
      --fl718-bg: #1a1510;
      --fl718-text: #f7edd8;
      --fl718-rule: rgba(247, 237, 216, 0.14);
    }
    body.fl718-mood-wild-electric {
      background-color: #0f1520;
      --fl718-bg: #0f1520;
      --fl718-text: #e8eef8;
      --fl718-rule: rgba(232, 238, 248, 0.13);
    }

    /* ── Root stage ──────────────────────────────────────────────── */

    #fl718-quotes-root {
      width: 100%;
      height: 100vh;
      height: 100dvh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(2rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem) clamp(3.5rem, 6vw, 5rem);
      position: relative;
    }

    /* ── Quote block ─────────────────────────────────────────────── */

    #fl718-quote-block {
      width: 100%;
      opacity: 0;
      position: relative;
      z-index: 2;
      max-height: calc(100dvh - 8rem);
      overflow-y: auto;
      /* hide scrollbar visually on mobile; touch-scroll still works */
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    #fl718-quote-block::-webkit-scrollbar { display: none; }

    /* Tall quotes: align to top so block starts near the top padding, not mid-screen */
    #fl718-quotes-root:has(.fl718-has-overflow) {
      align-items: flex-start;
    }

    /* ── Per-quote top-alignment overrides (desktop + mobile) ──────────
       IDs reflect the Notion export as of 2026-04-30.
       Class A: desktop dense-line blocks needing flex-start only.
       Mobile: long poems / dense prose needing flex-start + padding-top. */

    /* Class A — desktop flex-start only (no padding-top) */
    #fl718-quotes-root:has([data-quote-id="101"]) { align-items: flex-start; } /* RATM No Shelter */
    #fl718-quotes-root:has([data-quote-id="3"])   { align-items: flex-start; } /* Aesop Holy Smoke */
    #fl718-quotes-root:has([data-quote-id="123"]) { align-items: flex-start; } /* Blake Poison Tree */
    #fl718-quotes-root:has([data-quote-id="26"])  { align-items: flex-start; } /* Bukowski Roll the Dice */
    #fl718-quotes-root:has([data-quote-id="100"]) { align-items: flex-start; } /* Tagore Where the Mind */
    #fl718-quotes-root:has([data-quote-id="17"])  { align-items: flex-start; } /* Bad Religion No Control */
    #fl718-quotes-root:has([data-quote-id="124"]) { align-items: flex-start; } /* Henley Invictus */
    #fl718-quotes-root:has([data-quote-id="104"]) { align-items: flex-start; } /* Tool Forty Six & 2 */

    /* Mobile top-align overrides — genuinely tall quotes only (493+ chars / 15+ lines) */
    /* Shorter quotes removed — they read better centered on mobile */
    #fl718-quotes-root:has(#fl718-quote-block[data-quote-id="100"]) { align-items: flex-start; padding-top: clamp(8vh, 10vh, 12vh); } /* Tagore — 507 chars / 15 lines */
    #fl718-quotes-root:has(#fl718-quote-block[data-quote-id="118"]) { align-items: flex-start; padding-top: clamp(8vh, 10vh, 12vh); } /* McKenna — 511 chars */
    #fl718-quotes-root:has(#fl718-quote-block[data-quote-id="60"])  { align-items: flex-start; padding-top: clamp(8vh, 10vh, 12vh); } /* Orwell Down and Out — 493 chars */
    #fl718-quotes-root:has(#fl718-quote-block[data-quote-id="86"])  { align-items: flex-start; padding-top: clamp(8vh, 10vh, 12vh); } /* HST F&L I — 492 chars */
    #fl718-quotes-root:has(#fl718-quote-block[data-quote-id="87"])  { align-items: flex-start; padding-top: clamp(8vh, 10vh, 12vh); } /* HST F&L II — 489 chars */
    #fl718-quotes-root:has(#fl718-quote-block[data-quote-id="32"])  { align-items: flex-start; padding-top: clamp(8vh, 10vh, 12vh); } /* David Whyte I — 585 chars */
    #fl718-quotes-root:has(#fl718-quote-block[data-quote-id="34"])  { align-items: flex-start; padding-top: clamp(8vh, 10vh, 12vh); } /* David Whyte II — 686 chars */
    #fl718-quotes-root:has(#fl718-quote-block[data-quote-id="70"])  { align-items: flex-start; padding-top: clamp(8vh, 10vh, 12vh); } /* Orwell doublethink — 780 chars */

    /* ── Scroll affordance: fade when content overflows ─────────────── */
    #fl718-quote-block.fl718-has-overflow::after {
      content: '';
      position: sticky;
      bottom: 0;
      display: block;
      height: 3rem;
      background: linear-gradient(to bottom, transparent, var(--fl718-bg, #1a1714));
      pointer-events: none;
      margin-top: -3rem;
    }

    /* ── Layout classes (left | center | display) ────────────────── */

    #fl718-quote-block.fl718-layout-left   { text-align: left; }
    #fl718-quote-block.fl718-layout-center { text-align: center; max-width: 65ch; margin-left: auto; margin-right: auto; }
    #fl718-quote-block.fl718-layout-display { text-align: center; }

    /* Balance line widths on centered layouts to prevent orphaned words (1-2 word last lines).
       Must target .fl718-quote-text directly to override the base text-wrap: pretty. */
    #fl718-quote-block.fl718-layout-center .fl718-quote-text,
    #fl718-quote-block.fl718-layout-display .fl718-quote-text {
      text-wrap: balance;
    }

    .fl718-layout-left .fl718-rule       { margin-left: 0; margin-right: auto; }
    .fl718-layout-left .fl718-attribution { text-align: left; }
    .fl718-layout-display .fl718-rule    { width: 30%; }

    #fl718-quote-block.fl718-layout-display .fl718-quote-text {
      font-size: clamp(3rem, 7.5vw, 6.5rem);
      line-height: 1.08;
    }

    /* ── Ornamental rules ────────────────────────────────────────── */

    .fl718-rule {
      display: block;
      width: 18%;
      height: 1px;
      background-color: var(--fl718-rule, rgba(245, 240, 232, 0.15));
      margin: 0 auto;
      border: none;
      transition: background-color 0.7s ease;
    }

    .fl718-rule--top    { margin-bottom: clamp(1.5rem, 3.5vw, 2.75rem); }
    .fl718-rule--bottom { margin-top:    clamp(1.5rem, 3.5vw, 2.75rem); }

    /* ── Quote text ──────────────────────────────────────────────── */

    .fl718-quote-text {
      display: block;
      font-style: normal;
      color: var(--fl718-text, #f5f0e8);
      white-space: pre-line;
      overflow-wrap: anywhere; /* Safari fix: prevents char-split spaces from blocking line wraps */
      text-wrap: pretty; /* left-aligned prose: prevents orphaned last word */
      transition: color 0.7s ease;
    }

    #fl718-quote-block.fl718-length-standard .fl718-quote-text,
    #fl718-quote-block:not([class*="fl718-length"]) .fl718-quote-text {
      font-size: clamp(1.8rem, 4vw, 3.5rem);
      line-height: 1.45;
    }

    #fl718-quote-block.fl718-length-long .fl718-quote-text {
      font-size: clamp(1.3rem, 3.2vw, 2.8rem);
      line-height: 1.65;
    }

    /* Dense: poems with many line breaks — tighter to fit viewport */
    #fl718-quote-block.fl718-length-long.fl718-dense-lines .fl718-quote-text {
      font-size: clamp(1.3rem, 3.2vw, 2.8rem);
      line-height: 1.5;
    }

    #fl718-quote-block.fl718-length-standard.fl718-dense-lines .fl718-quote-text {
      font-size: clamp(1.35rem, 3vw, 2.5rem);
      line-height: 1.3;
    }

    /* Pearl Jam — Daughter (id=29): has room for a larger ceiling than the long default */
    #fl718-quote-block[data-quote-id="29"] .fl718-quote-text {
      font-size: clamp(1.3rem, 3.2vw, 3.2rem);
    }

    /* Aesop Rock — Holy Smoke (id=66): top-aligned only — longest line too wide to bump */

    /* Bad Religion — No Control (id=110): small nudge only — longest line is wide */
    #fl718-quote-block[data-quote-id="110"] .fl718-quote-text {
      font-size: clamp(1.3rem, 3.2vw, 3.0rem);
    }

    /* Tagore — Where the Mind is Without Fear (id=60): align top so long poem starts high */
    #fl718-quotes-root:has(#fl718-quote-block[data-quote-id="60"]) {
      align-items: flex-start;
      padding-top: clamp(2rem, 4vw, 3rem);
    }

    /* Brother Ali — Rain Water (id=127): 4-line lyric, align top */
    #fl718-quotes-root:has(#fl718-quote-block[data-quote-id="127"]) {
      align-items: flex-start;
      padding-top: clamp(2rem, 4vw, 3rem);
    }

    /* Arundhati Roy — God of Small Things (id=86): long prose, align top */
    #fl718-quotes-root:has(#fl718-quote-block[data-quote-id="86"]) {
      align-items: flex-start;
      padding-top: clamp(2rem, 4vw, 3rem);
    }

    /* Aesop Rock — Battery (id=71): 7-line lyric, align top */
    #fl718-quotes-root:has(#fl718-quote-block[data-quote-id="71"]) {
      align-items: flex-start;
      padding-top: clamp(2rem, 4vw, 3rem);
    }

    /* Terence McKenna — Nature loves courage (id=91): long prose, align top */
    #fl718-quotes-root:has(#fl718-quote-block[data-quote-id="91"]) {
      align-items: flex-start;
      padding-top: clamp(2rem, 4vw, 3rem);
    }

    /* Stephen Crane — In the Desert (id=61): 10-line poem, align top */
    #fl718-quotes-root:has(#fl718-quote-block[data-quote-id="61"]) {
      align-items: flex-start;
      padding-top: clamp(2rem, 4vw, 3rem);
    }

    /* Hemsey — Lessons from a Nomad (id=96): align top so long lyric starts high */
    #fl718-quotes-root:has(#fl718-quote-block[data-quote-id="96"]) {
      align-items: flex-start;
      padding-top: clamp(2rem, 4vw, 3rem);
    }

    /* Blake — A Poison Tree (id=84): top-aligned, room for larger ceiling */
    #fl718-quote-block[data-quote-id="84"] .fl718-quote-text {
      font-size: clamp(1.6rem, 3.4vw, 3.2rem);
    }

    /* Tartt — The Goldfinch "holy rage" (id=57): nudge up from dense-lines default */
    #fl718-quote-block[data-quote-id="57"] .fl718-quote-text {
      font-size: clamp(1.5rem, 3.1vw, 2.6rem);
    }

    /* Mobile: shrink long/dense prose quotes so they don't overflow the viewport.
       On mobile, clamp() floor is always hit (vw value < floor), so we must
       override the floor directly. Tighter line-height compounds the saving. */
    @media (max-width: 480px) {
      /* Balance only short quotes on mobile — they're always <6 rendered lines,
         so balance redistributes cleanly. Standard and long quotes keep text-wrap:pretty
         (from base rule) because balance stops working at >6 lines and silently
         cancels pretty's last-line orphan protection for long prose. */
      #fl718-quote-block.fl718-length-short .fl718-quote-text {
        text-wrap: balance;
      }
      /* Brutal (Bebas Neue) standard-length lyrics: 28.8px is too wide at 375px (~20 CPL),
         producing single-word overflow sub-lines on nearly every lyric line break.
         1.35rem = ~21.6px → ~26 CPL, fits most lyric lines without wrapping. */
      #fl718-quote-block.fl718-font-brutal.fl718-length-standard .fl718-quote-text {
        font-size: clamp(1.35rem, 4.2vw, 1.8rem);
        line-height: 1.5;
      }
      #fl718-quote-block.fl718-length-long .fl718-quote-text {
        font-size: clamp(1.06rem, 3.8vw, 1.5rem);
        line-height: 1.6;
      }
      #fl718-quote-block.fl718-length-long.fl718-dense-lines .fl718-quote-text {
        font-size: clamp(0.98rem, 3.5vw, 1.4rem);
        line-height: 1.42;
      }
      /* Short display quotes (e.g. "Sanity is not statistical.") —
         scale down slightly so short statements fit on fewer lines */
      #fl718-quote-block.fl718-length-short .fl718-quote-text {
        font-size: clamp(1.65rem, 5.5vw, 2.4rem);
      }
      /* Brutal font (Bebas Neue) — max mobile size that avoids wrapping orphans
         on short-line rap lyrics (tested across all 8 brutal long quotes at 375px) */
      #fl718-quote-block.fl718-font-brutal.fl718-length-long .fl718-quote-text {
        font-size: clamp(0.96rem, 4vw, 1.5rem);
      }
      #fl718-quote-block.fl718-font-brutal.fl718-length-long.fl718-dense-lines .fl718-quote-text {
        font-size: clamp(0.95rem, 3.8vw, 1.4rem);
        line-height: 1.4;
      }
      /* Canibus id=42: DM Mono at desktop override (1.4rem) is too wide for 375px */
      #fl718-quote-block[data-quote-id="42"] .fl718-quote-text {
        font-size: clamp(1.1rem, 3.5vw, 1.4rem);
      }
      /* Blake id=84: desktop override (25.6px) makes every couplet wrap to single-word
         sub-lines on mobile. Drop to 17.6px so ~36 CPL fits most Blake couplets. */
      #fl718-quote-block[data-quote-id="84"] .fl718-quote-text {
        font-size: clamp(1.1rem, 3.2vw, 1.6rem);
      }
      /* NIN id=125: Bebas at 25.6px floor still too wide for 30-char lines at 375px.
         Drop to 1.2rem (~19.2px) so each line holds on narrow mobile. */
      #fl718-quote-block[data-quote-id="125"] .fl718-quote-text {
        font-size: clamp(1.2rem, 3.8vw, 1.8rem);
      }
      /* Literary (Playfair Display italic) standard-length quotes: 28.8px floor is too
         wide at mobile widths — only ~3-4 words per line. 1.2rem gives ~5-6 words/line. */
      #fl718-quote-block.fl718-font-literary.fl718-length-standard .fl718-quote-text {
        font-size: clamp(1.2rem, 4.2vw, 1.8rem);
        line-height: 1.55;
      }
      /* Literary short quotes: 38.4px floor is fine for ultra-short maxims but wraps
         medium-length short quotes (10-25 words) to a narrow 3-4 word tower.
         1.625rem (~26px) keeps impact while letting longer short quotes breathe. */
      #fl718-quote-block.fl718-font-literary.fl718-length-short .fl718-quote-text {
        font-size: clamp(1.625rem, 6vw, 2.4rem);
        line-height: 1.35;
      }
      /* System font (DM Mono) short quotes have the same problem — monospace is
         even wider per character than Playfair, same fix applies. */
      #fl718-quote-block.fl718-font-system.fl718-length-short .fl718-quote-text {
        font-size: clamp(1.5rem, 5.5vw, 2.2rem);
        line-height: 1.4;
      }
      /* Center-layout max-width: 65ch is designed for desktop; on mobile it
         squeezes the column too narrow (only ~3-4 words/line for literary italic).
         Widen to 92% so the text fills the padded container. */
      #fl718-quote-block.fl718-layout-center {
        max-width: 92%;
      }
      /* Q52 Orwell "War is peace" — text-wrap:balance forces "IGNORANCE IS STRENGTH."
         to split across two lines to balance the three-line block. Each sentence
         must be its own line; disable balance so the last line stays whole. */
      #fl718-quote-block[data-quote-id="52"] .fl718-quote-text {
        text-wrap: pretty;
      }
      /* Q14 Séamus Dolan "You are round, but real brother." — 32 chars should fit
         on one line at brutal short size; text-wrap:balance is splitting it. */
      #fl718-quote-block[data-quote-id="14"] .fl718-quote-text {
        text-wrap: pretty;
      }
    }

    #fl718-quote-block.fl718-length-short .fl718-quote-text {
      font-size: clamp(2.4rem, 6vw, 5rem);
      line-height: 1.15;
    }

    /* Short quotes: wider container + no balance so text runs long and breaks into ~2 lines */
    #fl718-quote-block.fl718-layout-center.fl718-length-short {
      max-width: 85ch;
    }
    #fl718-quote-block.fl718-layout-center.fl718-length-short .fl718-quote-text {
      text-wrap: pretty;
    }

    /* ── Per-quote font overrides (must come after length-class rules) ── */

    /* Canibus — Master Thesis (id=42): monospace lines too wide at standard size */
    #fl718-quote-block[data-quote-id="42"] .fl718-quote-text {
      font-size: clamp(1.4rem, 2.6vw, 2.2rem);
    }

    /* NIN — Somewhat Damaged (id=125): Bebas Neue at short size orphans "ANYMORE"
       and "CORE" on their own lines at desktop. Cap to 3.2rem so all 4 source
       lines hold together at 1280px+. */
    #fl718-quote-block[data-quote-id="125"] .fl718-quote-text {
      font-size: clamp(1.6rem, 3.8vw, 3.2rem);
    }

    /* Aesop Rock — 39 Thieves (id=69): "BUILD." orphaned at short/display size */
    #fl718-quote-block[data-quote-id="69"] .fl718-quote-text {
      font-size: clamp(2rem, 4.8vw, 3.8rem);
    }

    /* Aesop Rock — Battery (id=71): "me" orphaned on last line */
    #fl718-quote-block[data-quote-id="71"] .fl718-quote-text {
      font-size: clamp(1.6rem, 3.4vw, 2.8rem);
    }

    /* Zack Hemsey — Lessons from a Nomad (id=96): 4 stanzas shrink too small at long size.
       Extra class needed to beat .fl718-length-long.fl718-dense-lines specificity. */
    #fl718-quote-block.fl718-length-long[data-quote-id="96"] .fl718-quote-text {
      font-size: clamp(1.05rem, 1.95vw, 1.65rem);
      line-height: 1.4;
    }

    /* ── Attribution ─────────────────────────────────────────────── */

    .fl718-attribution {
      margin-top: clamp(1.1rem, 2.5vw, 1.8rem);
    }

    .fl718-attribution-name {
      display: block;
      font-style: normal;
      font-family: 'DM Mono', 'Courier New', monospace;
      font-size: clamp(0.62rem, 0.9vw, 0.78rem);
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: #a89e94;
    }

    .fl718-attribution-source {
      display: none;
      font-family: 'DM Mono', 'Courier New', monospace;
      font-size: clamp(0.54rem, 0.78vw, 0.68rem);
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #a89e94;
      opacity: 0.6;
      margin-top: 0.3rem;
    }

    .fl718-attribution-source.is-visible { display: block; }

    @media (max-width: 768px) {
      .fl718-attribution-name   { font-size: 0.70rem; }
      .fl718-attribution-source { font-size: 0.60rem; }
    }

    @media (max-width: 480px) {
      .fl718-attribution-name   { font-size: 0.72rem; }
      .fl718-attribution-source { font-size: 0.62rem; }
      /* Tighter horizontal padding on mobile — lets text fill the screen
         like a book page rather than floating in a narrow centered column. */
      #fl718-quotes-root {
        padding: 1.25rem 1rem;
      }
    }

    /* ── Font classes ────────────────────────────────────────────── */

    .fl718-font-literary   .fl718-quote-text { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 400; }
    .fl718-font-brutal     .fl718-quote-text { font-family: 'Bebas Neue', Impact, sans-serif; font-style: normal; font-weight: 400; letter-spacing: 0.04em; }
    .fl718-font-archival   .fl718-quote-text { font-family: 'IM Fell English', 'Times New Roman', serif; font-style: normal; font-weight: 400; }
    .fl718-font-system     .fl718-quote-text { font-family: 'DM Mono', 'Courier New', monospace; font-weight: 300; letter-spacing: -0.015em; }
    .fl718-font-expressive .fl718-quote-text { font-family: 'Abril Fatface', Georgia, serif; font-style: normal; font-weight: 400; }


    /* ── Scroll hint (inline with watermark) ─────────────────────── */

    #fl718-scroll-hint-wm {
      opacity: 0;
      transition: opacity 0.8s ease;
      display: inline-flex;
      align-items: center;
      gap: 0.55em;
    }

    #fl718-scroll-hint-wm.is-visible { opacity: 1; }
    #fl718-scroll-hint-wm.is-hidden  { opacity: 0; }

    /* ── Prevent GeneratePress container bleed ───────────────────── */

    body.fl718-quotes-page .site,
    body.fl718-quotes-page .site-content,
    body.fl718-quotes-page .inside-site-header,
    body.fl718-quotes-page .grid-container {
      overflow: visible !important;
      max-height: none !important;
      height: auto !important;
    }

    /* ================================================================
       ANIMATION-SPECIFIC CSS
    ================================================================ */

    /* ── Letterpress ─────────────────────────────────────────────── */

    .fl718-lp-word {
      display: inline-block;
      transform-origin: bottom center;
    }

    /* ── Ikea Assembly ───────────────────────────────────────────── */

    .fl718-ik-word {
      display: inline-block;
    }

    /* ── Card Shuffle ────────────────────────────────────────────── */

    .fl718-cs-word {
      display: inline-block;
    }

    /* Perspective for 3D word flips (card-shuffle + ikea) */
    .fl718-quote-text {
      perspective: 900px;
      perspective-origin: center center;
    }

    /* ── Marquee Bulb ────────────────────────────────────────────── */

    .fl718-mb-char {
      display: inline;
      opacity: 0.06;
      color: inherit;
      text-shadow: none;
    }
    /* .fl718-mb-char.space white-space: pre removed — caused Safari iOS horizontal overflow */

    @keyframes fl718BulbFlicker {
      0%   { opacity: 0.06; text-shadow: none; }
      20%  { opacity: 0.75; text-shadow: 0 0 6px rgba(255, 208, 80, 0.6); }
      40%  { opacity: 0.12; text-shadow: none; }
      70%  { opacity: 0.90; text-shadow: 0 0 10px rgba(255, 208, 80, 0.8); }
      100% { opacity: 1;    text-shadow: 0 0 4px rgba(255, 208, 80, 0.9), 0 0 12px rgba(255, 190, 40, 0.6), 0 0 28px rgba(255, 160, 20, 0.3); }
    }

    .fl718-mb-char.flickering { animation: fl718BulbFlicker 0.11s ease-in-out forwards; }
    .fl718-mb-char.lit { opacity: 1; color: #ffd070; text-shadow: 0 0 4px rgba(255, 208, 80, 0.9), 0 0 12px rgba(255, 190, 40, 0.6), 0 0 28px rgba(255, 160, 20, 0.3); }
    .fl718-mb-char.surging { opacity: 1; color: #fff5c8; text-shadow: 0 0 8px rgba(255, 245, 200, 1.0), 0 0 22px rgba(255, 220, 80, 0.9), 0 0 55px rgba(255, 200, 50, 0.7); }
    .fl718-mb-char.dead { opacity: 0.02; color: inherit; text-shadow: none; transition: opacity 0.07s ease-in, text-shadow 0.07s, color 0.07s; }

    /* ── Data Dissolve ───────────────────────────────────────────── */

    .fl718-dd-char {
      display: inline;
    }
    /* .fl718-dd-char.space white-space: pre removed — same Safari iOS fix */

    /* ── String Stitch ───────────────────────────────────────────── */

    .fl718-ss-char {
      display: inline-block;
      will-change: transform, opacity;
    }
    .fl718-ss-space {
      white-space: pre;
    }

    #fl718-thread-svg {
      position: fixed;
      top: 0; left: 0;
      width: 100vw;
      height: 100vh; height: 100dvh;
      pointer-events: none;
      z-index: 20;
      overflow: visible;
    }

    .fl718-thread {
      fill: none;
      stroke-linecap: round;
    }

    /* ── Pond Ripple ─────────────────────────────────────────────── */

    .fl718-pr-word {
      display: inline;
      opacity: 0;
    }

    #fl718-stone {
      position: fixed;
      top: 0; left: 0;
      width: 9px; height: 9px;
      border-radius: 50%;
      background: radial-gradient(circle at 34% 28%, #d8c8b0, #7a6850);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.75), inset 0 -1px 3px rgba(0, 0, 0, 0.4);
      pointer-events: none;
      z-index: 60;
      opacity: 0;
      transform-origin: center center;
    }

    #fl718-ripple-svg {
      position: fixed;
      top: 0; left: 0;
      width: 100vw; height: 100dvh;
      pointer-events: none;
      overflow: visible;
      z-index: 10;
    }

    .fl718-pr-particle {
      position: fixed;
      top: 0; left: 0;
      width: 3px; height: 3px;
      border-radius: 50%;
      pointer-events: none;
      z-index: 61;
      opacity: 0;
    }

    /* ── Paint Drip ──────────────────────────────────────────────── */

    .fl718-pd-word {
      display: inline;
      opacity: 0;
    }

    .fl718-pd-drip {
      position: fixed;
      width: 12px;
      height: 42px;
      background: linear-gradient(
        to bottom,
        transparent                0%,
        rgba(245, 237, 224, 0.18) 18%,
        rgba(245, 237, 224, 0.82) 55%,
        rgba(245, 237, 224, 0.96) 100%
      );
      border-radius: 50% 50% 52% 52% / 25% 25% 75% 75%;
      transform-origin: center bottom;
      pointer-events: none;
      z-index: 50;
    }

    /* ── Navigation Map ──────────────────────────────────────────── */

    #fl718-nav-map {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100vh; height: 100dvh;
      pointer-events: none;
      z-index: 1;
      overflow: visible;
    }

    .fl718-nm-line {
      display: block;
      opacity: 0;
    }

    /* ── Etch-A-Sketch ───────────────────────────────────────────── */

    #fl718-etch-frame {
      position: fixed;
      inset: 9vh 7vw;
      background: #c91a1a;
      background-image: radial-gradient(ellipse at 50% 0%, #e02222 0%, #b81414 60%, #9a0f0f 100%);
      border-radius: 16px;
      box-shadow:
        inset 0 3px 6px rgba(255, 90, 90, 0.25),
        inset 0 -8px 16px rgba(0, 0, 0, 0.45),
        0 16px 60px rgba(0, 0, 0, 0.75),
        0 4px 18px rgba(0, 0, 0, 0.55);
      opacity: 0;
      pointer-events: none;
      z-index: 50;
    }

    #fl718-etch-frame::after {
      content: '';
      position: absolute;
      bottom: 0; left: 4%; right: 4%; height: 3%;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 0 0 16px 16px;
    }

    #fl718-etch-screen {
      position: absolute;
      top: 9%; left: 6%; right: 6%; bottom: 21%;
      background: #b4b8b0;
      border-radius: 6px;
      overflow: hidden;
      box-shadow:
        0 0 0 2px rgba(0, 0, 0, 0.55),
        inset 0 3px 10px rgba(0, 0, 0, 0.4),
        inset 0 0 0 4px rgba(80, 64, 48, 0.22),
        inset 0 0 0 7px rgba(60, 46, 30, 0.12);
    }

    #fl718-etch-canvas {
      display: block; width: 100%; height: 100%;
    }

    .fl718-etch-knob {
      position: absolute;
      bottom: 5%; width: 10.5%; aspect-ratio: 1;
      border-radius: 50%;
      background:
        radial-gradient(circle at 38% 30%, #f0f0e8 0%, #ccccC4 32%, #9c9c94 64%, #787872 100%),
        repeating-conic-gradient(
          from 0deg,
          rgba(0, 0, 0, 0.20) 0deg 5deg,
          transparent 5deg 10deg
        );
      background-blend-mode: multiply;
      box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.70),
        0 2px 5px  rgba(0, 0, 0, 0.40),
        inset 0 2px 5px rgba(255, 255, 255, 0.65),
        inset 0 -3px 6px rgba(0, 0, 0, 0.32);
    }

    .fl718-etch-knob::before {
      content: '';
      position: absolute;
      top: 12%; left: 50%;
      width: 13%; aspect-ratio: 1;
      transform: translateX(-50%);
      border-radius: 50%;
      background: radial-gradient(circle at 38% 32%, #b0b0a8, #484844);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
    }

    .fl718-etch-knob::after {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      width: 20%; aspect-ratio: 1;
      transform: translate(-50%, -50%);
      background: radial-gradient(circle at 40% 35%, #d8d8d0, #848480);
      border-radius: 50%;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.50);
    }

    #fl718-knob-left  { left: 6.5%; }
    #fl718-knob-right { right: 6.5%; }

    #fl718-etch-brand {
      position: absolute;
      bottom: 7%; left: 50%; transform: translateX(-50%);
      font-family: 'DM Mono', monospace;
      font-size: clamp(0.65rem, 1.1vw, 0.95rem);
      letter-spacing: 0.28em; text-transform: uppercase;
      color: rgba(255, 255, 255, 0.88);
      text-shadow: 0 1px 4px rgba(0,0,0,0.35);
      white-space: nowrap; pointer-events: none; user-select: none;
    }

    /* ── Opening: Collision stage ──────────────────────────────────── */

    #fl718-col-stage {
      position: fixed; inset: 0;
      display: flex; align-items: center; justify-content: center;
      z-index: 10; opacity: 0; pointer-events: none;
      background-color: #171612;
    }
    .fl718-col-row {
      position: absolute; width: 100%;
      display: flex; align-items: center; justify-content: center;
    }
    #fl718-col-row-dan  { top: calc(50% - clamp(5rem, 10vh, 9rem)); }
    #fl718-col-row-lann { top: calc(50% + clamp(5rem, 10vh, 9rem)); }
    .fl718-col-traveler {
      position: absolute; display: flex; flex-direction: column;
      align-items: center; opacity: 0;
    }
    .fl718-col-word {
      font-family: 'IM Fell English', serif;
      font-size: clamp(2.2rem, 6vw, 5rem); font-weight: 400;
      color: rgba(245, 237, 224, 0.82); letter-spacing: 0.05em;
      line-height: 1; font-style: italic; min-width: 3em; text-align: center;
    }
    .fl718-col-result-fragment { position: absolute; text-align: center; opacity: 0; }
    #fl718-col-result-dan  { top: calc(50% - clamp(5rem, 10vh, 9rem)); }
    #fl718-col-result-lann { top: calc(50% + clamp(5rem, 10vh, 9rem)); }
    .fl718-col-result-text {
      font-family: 'IM Fell English', serif;
      font-size: clamp(2.6rem, 7vw, 5.8rem); font-weight: 400;
      color: #f5ede0; letter-spacing: 0.04em; line-height: 1;
    }
    .fl718-col-result-text .accent { color: #e8d4b8; }

    /* ── Opening: Landing — The Split Reveal ───────────────────────── */

    #fl718-landing {
      position: fixed; inset: 0; z-index: 10;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      pointer-events: none; opacity: 0;
      padding: 2rem clamp(1.5rem, 5vw, 4rem);
    }
    .fl718-land-header {
      text-align: center; margin-bottom: clamp(2rem, 4vh, 3.5rem);
    }
    .fl718-land-title {
      font-family: 'IM Fell English', serif;
      font-size: clamp(3rem, 8vw, 6.5rem); font-weight: 400;
      color: #f5ede0; letter-spacing: 0.04em; line-height: 1;
      opacity: 0;
    }
    .fl718-land-title .accent { color: #e8d4b8; }
    .fl718-land-rule {
      width: clamp(2rem, 4vw, 3.5rem); height: 1px;
      background: rgba(245, 237, 224, 0.18);
      margin: 1.2rem auto 1rem; opacity: 0;
    }
    .fl718-land-subtitle {
      font-family: 'DM Mono', monospace;
      font-size: clamp(0.6rem, 1vw, 0.82rem); font-weight: 300;
      color: #a89e94; letter-spacing: 0.32em;
      text-transform: uppercase; opacity: 0;
    }
    .fl718-land-pron {
      font-family: 'DM Mono', monospace;
      font-size: clamp(0.62rem, 0.95vw, 0.78rem);
      letter-spacing: 0.22em; color: rgba(168, 158, 148, 0.5);
      text-transform: uppercase; margin-top: 0.6rem; opacity: 0;
    }
    .fl718-land-split {
      display: flex; align-items: flex-start; justify-content: center;
      gap: clamp(3rem, 6vw, 5rem);
      margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
      width: 100%; max-width: 44rem;
      margin-left: auto; margin-right: auto;
    }
    .fl718-land-half { flex: 1 1 0; min-width: 0; opacity: 0; }
    .fl718-land-half-word {
      font-family: 'IM Fell English', serif; font-style: italic;
      font-size: clamp(1.6rem, 3.5vw, 2.8rem); font-weight: 400;
      color: rgba(245, 237, 224, 0.72); letter-spacing: 0.03em;
      line-height: 1; margin-bottom: 0.5rem;
    }
    .fl718-land-half-word .accent { color: #e8d4b8; }
    .fl718-land-half-rule {
      width: 100%; height: 1px;
      background: rgba(245, 237, 224, 0.08);
      margin-bottom: 0.8rem;
    }
    .fl718-land-half-def {
      font-family: 'IM Fell English', serif; font-style: italic;
      font-size: clamp(1rem, 1.6vw, 1.25rem); font-weight: 400;
      color: rgba(245, 237, 224, 0.4); letter-spacing: 0.01em;
      line-height: 1.7;
    }
    .fl718-land-half-def em {
      color: rgba(245, 237, 224, 0.65); font-style: italic;
    }
    #fl718-land-left  { text-align: center; }
    #fl718-land-right { text-align: center; }
    .fl718-land-ornament {
      font-family: 'EB Garamond', 'IM Fell English', Georgia, serif;
      font-size: 1.4rem; color: rgba(200, 185, 154, 0.35);
      margin-bottom: 1.2rem; opacity: 0;
    }
    .fl718-land-payoff {
      font-family: 'IM Fell English', serif; font-style: italic;
      font-size: clamp(1.1rem, 1.8vw, 1.45rem); font-weight: 400;
      color: rgba(245, 237, 224, 0.6); letter-spacing: 0.01em;
      line-height: 1.7; text-align: center;
      margin: 0 auto; opacity: 0;
    }
    .fl718-land-payoff em {
      color: rgba(245, 237, 224, 0.88); font-style: italic;
    }

    /* ── Opening: mobile overrides ──────────────────────────────── */
    @media (max-width: 480px) {
      .fl718-land-split { gap: clamp(1.5rem, 4vw, 2.5rem); }
    }
    @media (max-width: 360px) {
      .fl718-land-pron { display: none; }
      .fl718-land-ornament { display: none; }
      .fl718-land-header { margin-bottom: clamp(1.2rem, 3vh, 2rem); }
    }

    /* ── Persistent bottom watermark ─────────────────────────────── */

    #fl718-wm {
      position: fixed;
      bottom: 1.6rem;
      bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px));
      left: 50%;
      transform: translateX(-50%);
      font-family: 'DM Mono', 'Courier New', monospace;
      font-size: clamp(0.54rem, 0.72vw, 0.64rem);
      font-weight: 300;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #a89e94;
      opacity: 0;
      white-space: nowrap;
      pointer-events: none;
      user-select: none;
      z-index: 5;
      display: flex;
      align-items: center;
      gap: 0.55em;
    }

    #fl718-wm .wm-irish {
      font-family: 'IM Fell English', Georgia, serif;
      font-style: normal;
      font-size: 1.15em;
      letter-spacing: 0.06em;
      text-transform: none;
      color: #c8b99a;
    }

    #fl718-wm .wm-sep {
      font-size: 0.7em;
      color: rgba(168, 158, 148, 0.45);
      letter-spacing: 0;
    }

    /* ── Page-level copyright ──────────────────────────────────────── */

    .fl718-copyright {
      position: fixed;
      bottom: 10px;
      right: 14px;
      font-size: 10px;
      letter-spacing: 0.06em;
      color: rgba(255, 255, 255, 0.22);
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
      pointer-events: none;
      z-index: 9999;
      user-select: none;
      white-space: nowrap;
    }

    /* Mobile: single-line footer — watermark left, copyright right */
    @media (max-width: 600px) {
      #fl718-wm {
        left: 14px;
        transform: none;
        font-size: clamp(0.42rem, 0.6vw, 0.52rem);
        bottom: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        flex-wrap: wrap;
        justify-content: flex-start;
      }
      /* Place scroll hint on its own line above the watermark text */
      #fl718-scroll-hint-wm {
        order: -1;
        width: 100%;
      }
      .fl718-copyright {
        bottom: 12px;
        font-size: 8px;
        right: 14px;
      }
    }

/* ─── DANLANN MENU CURTAIN (desktop + mobile) ────────────────────────────── */

/* Amber thread — left at the top after nav rises */
body.fl718-quotes-page #fl718-danlann-thread {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(180, 148, 82, 0.30);
  z-index: 400;
  opacity: 0;
  pointer-events: none;
}

@keyframes fl718-danlann-thread-glow {
  0%, 100% { opacity: 1;    background: rgba(180, 148, 82, 0.30); }
  50%       { opacity: 0.4; background: rgba(180, 148, 82, 0.12); }
}

body.fl718-quotes-page #fl718-danlann-thread.fl718-danlann-thread--breathing {
  animation: fl718-danlann-thread-glow 4.5s ease-in-out infinite;
}

/* Invisible hover zone covering top 40px — catches mouse on desktop */
body.fl718-quotes-page #fl718-danlann-hover-zone {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  z-index: 410;
  cursor: pointer;
  display: none; /* shown by JS after curtain rises */
}

/* Recall glyph — ✦ centered at the top */
body.fl718-quotes-page #fl718-menu-recall {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 420;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  padding: 4px 12px 6px;
  font-family: 'IM Fell English', serif;
  font-size: 0.72rem;
  color: rgba(180, 148, 82, 0.70);
  line-height: 1;
  user-select: none;
  transition: color 0.25s ease;
}

body.fl718-quotes-page #fl718-menu-recall:hover {
  color: rgba(220, 185, 110, 1);
}

/* Mobile: bigger tap target on recall glyph, slightly larger glyph */
@media (max-width: 767px) {
  body.fl718-quotes-page #fl718-menu-recall {
    padding: 10px 24px 14px;
    font-size: 0.85rem;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Hover zone not used on mobile — swipe gesture handles it */
  body.fl718-quotes-page #fl718-danlann-hover-zone {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.fl718-quotes-page #fl718-danlann-thread.fl718-danlann-thread--breathing {
    animation: none;
  }
}

/* Cancel the global fl718-menu.css 56px spacer — Dánlann needs full-height stage */
body.fl718-quotes-page #content {
  padding-top: 0 !important;
}

/* Suppress GP footer — page uses overflow containment, not template suppression */
body.fl718-quotes-page .site-footer {
  display: none !important;
}