*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* ── TOKENS ── */
    :root {
      --bg:          #f6f1e9;
      --surface:     #fffdf8;
      --surface-2:   #f9f3e9;
      --border:      rgba(39,34,28,0.11);
      --border-warm: rgba(168,108,40,0.18);
      --text:        #24201b;
      --text-muted:  #655c52;
      --text-dim:    #a79a8d;
      --saffron:     #D9702F;
      --marigold:    #E8B84E;
      --turmeric:    #B85C1D;
      --teal:        #1B7A72;
      --rose:        #B84C64;
      --violet:      #67579b;
      --ink:         #151311;
      --cream:       #fff8eb;
      --accent-2:    #1B7A72;
      --accent-3:    #B84C64;
      --room-accent: #C4512C;
      --room-soft:   rgba(196,81,44,0.09);
      --room-line:   rgba(36,32,27,0.105);
      --wash-1:      rgba(196,81,44,0.10);
      --wash-2:      rgba(27,122,114,0.075);
      --wash-3:      rgba(184,76,100,0.065);
      --pattern-ink: rgba(36,32,27,0.052);
      --panel-alpha: rgba(255,253,248,0.72);
      --card-shadow: 0 18px 42px rgba(41,31,22,0.09);
      --header-h:    88px;
      --card-r:      8px;
      --max-w:       1440px;
      --ff-body:     'Plus Jakarta Sans', system-ui, sans-serif;
      --ff-display:  'Fraunces', Georgia, serif;
      --ff-essay:    'Helvetica Neue', Arial, sans-serif;
    }

    html {
      background: var(--bg);
      color: var(--text);
      font-size: 13px;
      -webkit-font-smoothing: antialiased;
      scroll-behavior: smooth;
    }

    body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow-x: hidden;
      background:
        linear-gradient(90deg, var(--pattern-ink) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,0.38), transparent 34vh),
        linear-gradient(135deg, transparent 0 47%, rgba(255,255,255,0.34) 47% 48%, transparent 48% 100%),
        var(--bg);
      background-size: 56px 56px, auto, auto, auto;
      transition: background-color 0.7s ease, color 0.55s ease;
    }

    body::before,
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -1;
      transition: opacity 0.7s ease, background 0.7s ease;
    }

    body::before {
      background-image:
        repeating-linear-gradient(0deg, transparent 0 17px, color-mix(in srgb, var(--room-line) 52%, transparent) 17px 18px),
        linear-gradient(110deg, transparent 0 64%, color-mix(in srgb, var(--room-accent) 12%, transparent) 64% 64.4%, transparent 64.4% 100%);
      mask-image: linear-gradient(180deg, rgba(0,0,0,0.54), transparent 74%);
      opacity: 0.54;
    }

    body::after {
      background:
        repeating-linear-gradient(115deg, transparent 0 18px, color-mix(in srgb, var(--room-accent) 10%, transparent) 18px 19px, transparent 19px 42px);
      mix-blend-mode: multiply;
      opacity: 0.18;
    }

    body, #site-header, #accent-stripe, #tab-nav, .card, .portal-card, .book-card, .bm-panel, #site-footer, .masthead, .filter-btn, #global-search {
      transition: background-color 0.7s ease, border-color 0.5s ease, color 0.45s ease, box-shadow 0.45s ease;
    }

    #site-header {
      transition: background-color 0.7s ease, border-color 0.5s ease, box-shadow 0.5s ease;
    }

    body[data-theme='essays'] {
      --bg: #f8f1e8;
      --surface: #fffdf8;
      --surface-2: #f6eadb;
      --border: rgba(92,67,45,0.14);
      --text: #241d17;
      --text-muted: #6f5a47;
      --text-dim: #ad9580;
      --saffron: #c4512c;
      --marigold: #ddb35d;
      --teal: #286f68;
      --rose: #a84d61;
      --accent-2: #286f68;
      --accent-3: #a84d61;
      --room-accent: #c4512c;
      --room-soft: rgba(196,81,44,0.095);
      --room-line: rgba(92,67,45,0.12);
      --wash-1: rgba(196,81,44,0.10);
      --wash-2: rgba(40,111,104,0.07);
      --wash-3: rgba(168,77,97,0.065);
      --pattern-ink: rgba(92,67,45,0.052);
    }

    body[data-theme='library'] {
      --bg: #f4efe5;
      --surface: #fffaf0;
      --surface-2: #eadfcb;
      --border: rgba(89,70,49,0.16);
      --text: #211e18;
      --text-muted: #6b5b47;
      --text-dim: #a9977c;
      --saffron: #9e6b34;
      --marigold: #d9b871;
      --teal: #315f52;
      --rose: #9b6756;
      --accent-2: #315f52;
      --accent-3: #9b6756;
      --room-accent: #315f52;
      --room-soft: rgba(49,95,82,0.085);
      --room-line: rgba(89,70,49,0.12);
      --wash-1: rgba(158,107,52,0.09);
      --wash-2: rgba(49,95,82,0.08);
      --wash-3: rgba(155,103,86,0.065);
      --pattern-ink: rgba(89,70,49,0.052);
    }

    /* ── ACCENT STRIPE ── */
    #accent-stripe {
      height: 3px;
      background: linear-gradient(90deg,
        var(--saffron) 0%,
        var(--marigold) 19%,
        var(--bg) 25%,
        var(--bg) 28%,
        var(--teal) 34%,
        var(--accent-3) 50%,
        var(--saffron) 50%,
        var(--marigold) 69%,
        var(--bg) 75%,
        var(--bg) 78%,
        var(--teal) 84%,
        var(--accent-3) 100%);
      background-size: 200% 100%;
      flex-shrink: 0;
      box-shadow: 0 0 26px var(--wash-1);
      animation: stripeShimmer 14s linear infinite;
    }

    @keyframes stripeShimmer {
      from { background-position: 0% 0%; }
      to   { background-position: 100% 0%; }
    }

    /* ── HEADER ── */
    #site-header {
      position: sticky;
      top: 0;
      height: 64px;
      background: color-mix(in srgb, var(--bg) 92%, transparent);
      border-bottom: 1px solid rgba(168,108,40,0.14);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 28px;
      z-index: 200;
      backdrop-filter: blur(28px) saturate(1.6);
      -webkit-backdrop-filter: blur(28px) saturate(1.6);
      box-shadow: 0 1px 0 rgba(196,81,44,0.05), 0 8px 40px rgba(39,34,28,0.04);
    }

    #header-cluster {
      width: min(1140px, 100%);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    #hd-center {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .reading-room-brand {
      display: flex;
      flex-direction: column;
      gap: 2px;
      color: var(--text);
      text-decoration: none;
    }

    .reading-room-brand-title {
      font-family: var(--ff-display);
      font-size: 17px;
      font-weight: 500;
      letter-spacing: -0.018em;
      line-height: 1;
    }

    .reading-room-brand-note {
      color: var(--text-dim);
      font-family: var(--ff-body);
      font-size: 8px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    #essays-nav-link {
      padding: 7px 10px;
      border: 1px solid transparent;
      border-radius: 5px;
      color: var(--text-muted);
      font-family: var(--ff-display);
      font-size: 14px;
      text-decoration: none;
      transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
    }

    #essays-nav-link:hover,
    #essays-nav-link.active {
      border-color: var(--border);
      background: color-mix(in srgb, var(--surface) 70%, transparent);
      color: var(--room-accent);
    }

    #essays-nav-link[hidden],
    #tab-library[hidden],
    #essays-public-section[hidden] {
      display: none !important;
    }

    /* ── TAB NAV (in header) ── */
    #tab-nav {
      display: flex;
      align-items: center;
      gap: 1px;
      padding: 3px;
      background: rgba(168,108,40,0.055);
      border: 1px solid rgba(168,108,40,0.13);
      border-radius: 11px;
      position: relative;
    }

    #tab-pill {
      position: absolute;
      top: 3px;
      left: var(--active-tab-left, 3px);
      width: var(--active-tab-width, 33%);
      height: calc(100% - 6px);
      border-radius: 8px;
      background: linear-gradient(160deg, var(--cream), color-mix(in srgb, var(--cream) 84%, var(--saffron)));
      box-shadow:
        0 1px 5px rgba(196,81,44,0.13),
        0 0 0 0.75px rgba(168,108,40,0.16);
      transition: left 0.34s cubic-bezier(0.34, 1.25, 0.64, 1), width 0.34s cubic-bezier(0.34, 1.25, 0.64, 1);
      pointer-events: none;
    }

    .tab-btn {
      position: relative;
      z-index: 1;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
      height: 36px;
      padding: 0 18px;
      font-family: var(--ff-display);
      font-size: 14px;
      font-weight: 300;
      color: var(--text-muted);
      background: none;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      text-decoration: none;
      transition: color 0.22s ease, height 0.28s cubic-bezier(0.2,0.8,0.2,1);
      white-space: nowrap;
      letter-spacing: 0.01em;
    }

    .tab-btn:hover { color: color-mix(in srgb, var(--text) 90%, var(--saffron)); }

    .tab-btn.active {
      color: var(--room-accent);
      font-weight: 500;
      height: 46px;
    }

    .tab-title {
      font-family: inherit;
      font-size: inherit;
      font-weight: inherit;
      letter-spacing: inherit;
      color: inherit;
    }

    .tab-btn {
      flex-direction: column;
      gap: 0;
    }

    .tab-desc {
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      margin-top: 0;
      font-family: var(--ff-body);
      font-size: 10px;
      font-weight: 400;
      letter-spacing: 0;
      text-transform: none;
      transition: max-height 0.28s cubic-bezier(0.2,0.8,0.2,1), opacity 0.22s ease, margin-top 0.2s ease;
    }
    .tab-btn.active .tab-desc {
      max-height: 28px;
      opacity: 0.72;
      margin-top: 2px;
    }

    #global-search-wrap {
      position: relative;
      flex: 0 0 200px;
      display: flex;
      align-items: center;
    }

    #global-search-wrap::before {
      content: '⌕';
      position: absolute;
      left: 11px;
      top: 50%;
      transform: translateY(-52%);
      font-family: var(--ff-essay);
      font-size: 13px;
      color: var(--text-dim);
      pointer-events: none;
      z-index: 2;
    }

    #global-search {
      width: 100%;
      height: 36px;
      border: 1px solid rgba(168,108,40,0.14);
      border-radius: 8px;
      background: rgba(168,108,40,0.04);
      color: var(--text);
      padding: 0 34px 0 30px;
      font-family: var(--ff-body);
      font-size: 12px;
      outline: none;
      transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
    }

    #global-search::placeholder {
      color: var(--text-dim);
      font-family: var(--ff-display);
      font-style: italic;
      font-size: 13px;
    }

    #global-search:focus {
      background: color-mix(in srgb, var(--cream) 80%, transparent);
      border-color: rgba(168,108,40,0.28);
      box-shadow: 0 0 0 3px rgba(196,81,44,0.07);
    }

    #global-search-clear {
      position: absolute;
      right: 8px;
      top: 50%;
      width: 26px;
      height: 26px;
      transform: translateY(-50%);
      border: 1px solid var(--border);
      border-radius: 50%;
      background: rgba(255,255,255,0.58);
      color: var(--text-muted);
      cursor: pointer;
      font-family: var(--ff-essay);
      font-size: 13px;
      line-height: 1;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.16s ease, color 0.16s ease, background 0.16s ease, transform 0.16s ease;
    }

    #global-search-wrap.has-query #global-search-clear {
      opacity: 1;
      pointer-events: auto;
    }

    #global-search-clear:hover {
      color: var(--text);
      background: var(--surface);
      transform: translateY(-50%) scale(1.04);
    }

    /* ── TAB PANELS ── */
    .tab-panel { display: none; flex: 1; flex-direction: column; }
    .tab-panel.active {
      display: flex;
      animation: panelArrive 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    @keyframes panelArrive {
      from { opacity: 0; transform: translateY(8px); filter: blur(2px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes cabinetFloat {
      0%, 100% { transform: translateY(0) rotate(var(--tilt, 0deg)); }
      50% { transform: translateY(-5px) rotate(calc(var(--tilt, 0deg) * -0.45)); }
    }

    @keyframes drawerGlide {
      0% { transform: translateX(0); }
      48% { transform: translateX(var(--open, 8px)); }
      100% { transform: translateX(0); }
    }

    @keyframes labelShimmer {
      from { background-position: 0% 50%; }
      to { background-position: 100% 50%; }
    }

    /* ── SHARED SECTION STYLES ── */
    .site-section {
      padding-top: 22px;
      position: relative;
    }

    .site-section::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 1px;
      background: linear-gradient(90deg, var(--room-accent), transparent 38%);
      opacity: 0.34;
    }

    .site-section + .site-section {
      padding-top: 40px;
      margin-top: 12px;
      border-top: 1px solid var(--border);
    }

    #essay-controls, #lib-controls, #watch-controls {
      margin: 2px 0 18px;
      padding: 10px;
      border: 1px solid var(--border);
      border-radius: var(--card-r);
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 86%, transparent), color-mix(in srgb, var(--surface-2) 44%, transparent));
      box-shadow: 0 10px 28px rgba(41,31,22,0.045);
    }

    .card.essay-hidden {
      display: none;
    }

    /* ── ESSAYS TAB ── */
    .masthead {
      position: relative;
      min-height: 390px;
      margin-top: 22px;
      margin-bottom: 28px;
      padding: 18px;
      display: block;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: var(--card-r);
      background:
        linear-gradient(120deg, var(--panel-alpha), color-mix(in srgb, var(--surface) 66%, transparent)),
        repeating-linear-gradient(90deg, transparent 0 28px, color-mix(in srgb, var(--text) 4%, transparent) 28px 29px),
        repeating-linear-gradient(0deg, transparent 0 32px, color-mix(in srgb, var(--text) 3%, transparent) 32px 33px),
        radial-gradient(circle at 74% 28%, var(--wash-2), transparent 30%),
        radial-gradient(circle at 16% 86%, var(--wash-1), transparent 28%);
      box-shadow: var(--card-shadow);
      isolation: isolate;
    }

    .masthead::before {
      content: '';
      position: absolute;
      inset: 12px;
      border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
      border-radius: max(2px, calc(var(--card-r) - 2px));
      pointer-events: none;
      z-index: -1;
      box-shadow:
        inset 0 0 0 10px color-mix(in srgb, var(--surface) 36%, transparent),
        inset 0 0 0 11px color-mix(in srgb, var(--text) 8%, transparent);
    }

    .masthead::after {
      content: attr(data-mark);
      position: absolute;
      right: -22px;
      top: -44px;
      font-family: var(--ff-display);
      font-size: clamp(7rem, 18vw, 15rem);
      line-height: 0.9;
      font-weight: 500;
      color: color-mix(in srgb, var(--text) 8%, transparent);
      letter-spacing: 0;
      z-index: -1;
    }

    .mast-title {
      position: absolute;
      left: clamp(32px, 5vw, 64px);
      top: clamp(24px, 4vw, 46px);
      z-index: 4;
      font-family: var(--ff-essay);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--text);
      padding: 8px 12px;
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--surface) 82%, transparent);
      box-shadow: 0 10px 24px rgba(92,64,39,0.08);
    }

    .cabinet-visual {
      position: relative;
      width: 100%;
      min-height: 350px;
    }

    .cabinet-case {
      position: absolute;
      inset: 48px clamp(24px, 4vw, 54px) 10px clamp(42px, 6vw, 86px);
      border: 1px solid var(--border);
      border-radius: 6px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.58), rgba(255,255,255,0.24)),
        repeating-linear-gradient(90deg, transparent 0 92px, color-mix(in srgb, var(--text) 8%, transparent) 92px 93px),
        repeating-linear-gradient(0deg, transparent 0 54px, color-mix(in srgb, var(--text) 7%, transparent) 54px 55px),
        color-mix(in srgb, var(--surface) 72%, var(--saffron) 5%);
      box-shadow: 0 22px 58px rgba(92,64,39,0.12);
    }

    .cabinet-case::before,
    .cabinet-case::after {
      content: '';
      position: absolute;
      left: 16px;
      right: 16px;
      height: 1px;
      background: var(--border);
    }

    .cabinet-case::before { top: 36%; }
    .cabinet-case::after { top: 68%; }

    .cabinet-drawer {
      position: absolute;
      width: clamp(170px, 22vw, 260px);
      height: 46px;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: color-mix(in srgb, var(--surface) 86%, var(--marigold) 6%);
      box-shadow: 0 8px 18px rgba(92,64,39,0.08);
      animation: drawerGlide 5.8s ease-in-out infinite;
      animation-delay: var(--delay, 0s);
    }

    .cabinet-drawer::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      width: 30px;
      height: 7px;
      transform: translate(-50%, -50%);
      border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
    }

    .cabinet-drawer:nth-child(2) { left: 12%; top: 78px; --open: 12px; --delay: 0.2s; }
    .cabinet-drawer:nth-child(3) { left: 43%; top: 140px; --open: 7px; --delay: 1s; }
    .cabinet-drawer:nth-child(4) { left: 24%; top: 232px; --open: 15px; --delay: 1.8s; }

    .cabinet-object {
      position: absolute;
      display: block;
      border: 1px solid var(--border);
      background: var(--surface);
      box-shadow: 0 12px 30px rgba(92,64,39,0.10);
      animation: cabinetFloat 6.4s ease-in-out infinite;
      animation-delay: var(--delay, 0s);
    }

    .cabinet-object.ticket {
      left: 5%;
      top: 48px;
      width: 124px;
      height: 72px;
      --tilt: -5deg;
      background:
        linear-gradient(90deg, var(--saffron), var(--accent-2), var(--accent-3));
      background-size: 240% 100%;
      animation: cabinetFloat 6.4s ease-in-out infinite, labelShimmer 5.5s ease-in-out infinite alternate;
    }

    .cabinet-object.ticket::before,
    .cabinet-object.ticket::after {
      content: '';
      position: absolute;
      inset: 9px;
      border-top: 1px solid rgba(255,255,255,0.62);
      border-bottom: 1px solid rgba(255,255,255,0.4);
    }

    .cabinet-object.note {
      right: 8%;
      top: 24px;
      width: 92px;
      height: 116px;
      --tilt: 7deg;
      --delay: 0.5s;
      background:
        linear-gradient(var(--pattern-ink) 1px, transparent 1px),
        color-mix(in srgb, var(--surface) 88%, var(--marigold) 7%);
      background-size: 100% 13px;
    }

    .cabinet-object.specimen {
      left: 9%;
      bottom: 20px;
      width: 104px;
      height: 104px;
      border-radius: 50%;
      --tilt: 3deg;
      --delay: 1.2s;
      background:
        radial-gradient(circle at 50% 50%, transparent 0 18px, color-mix(in srgb, var(--accent-2) 38%, transparent) 19px 21px, transparent 22px),
        repeating-conic-gradient(from 10deg, color-mix(in srgb, var(--accent-3) 28%, transparent) 0 12deg, transparent 12deg 24deg),
        color-mix(in srgb, var(--surface) 74%, transparent);
    }

    .cabinet-object.cardlet {
      right: 24%;
      bottom: 36px;
      width: 132px;
      height: 88px;
      --tilt: -4deg;
      --delay: 0.8s;
      background:
        linear-gradient(90deg, color-mix(in srgb, var(--accent-2) 28%, transparent) 0 10px, transparent 10px),
        linear-gradient(var(--pattern-ink) 1px, transparent 1px),
        color-mix(in srgb, var(--surface) 86%, var(--rose) 5%);
      background-size: auto, 100% 15px, auto;
    }

    .cabinet-object.portrait {
      left: 36%;
      top: 42px;
      width: 98px;
      height: 126px;
      --tilt: 4deg;
      --delay: 1.4s;
      background:
        radial-gradient(ellipse at 50% 38%, color-mix(in srgb, var(--saffron) 32%, transparent) 0 22px, transparent 23px),
        linear-gradient(180deg, transparent 0 72px, color-mix(in srgb, var(--accent-3) 24%, transparent) 73px 91px, transparent 92px),
        color-mix(in srgb, var(--surface) 84%, var(--accent-2) 5%);
    }

    .cabinet-object.ruler {
      right: 7%;
      bottom: 58px;
      width: 170px;
      height: 22px;
      --tilt: 8deg;
      --delay: 2s;
      background:
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--text) 24%, transparent) 0 1px, transparent 1px 12px),
        color-mix(in srgb, var(--marigold) 34%, var(--surface));
    }

    .cabinet-object.seal {
      left: 58%;
      top: 208px;
      width: 74px;
      height: 74px;
      border-radius: 50%;
      --tilt: -3deg;
      --delay: 2.4s;
      background:
        radial-gradient(circle, color-mix(in srgb, var(--rose) 34%, transparent) 0 12px, transparent 13px 23px, color-mix(in srgb, var(--saffron) 32%, transparent) 24px 26px, transparent 27px),
        color-mix(in srgb, var(--surface) 80%, var(--rose) 7%);
    }

    #essays-main {
      flex: 1;
      display: flex;
      flex-direction: column;
      max-width: var(--max-w);
      width: 100%;
      margin: 0 auto;
      padding: 10px 24px 72px;
    }

    .shelf {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 18px;
      align-items: start;
    }

    /* ── ESSAY CARD ── */
    .card {
      background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface) 74%, transparent));
      border: 1px solid var(--border);
      border-radius: var(--card-r);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      text-decoration: none;
      color: inherit;
      position: relative;
      box-shadow: 0 8px 30px rgba(0,0,0,0.055);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .card::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--saffron) 14%, transparent), transparent 38%),
        linear-gradient(315deg, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 42%),
        repeating-linear-gradient(90deg, transparent 0 22px, color-mix(in srgb, var(--text) 4%, transparent) 22px 23px);
      opacity: 0;
      transition: opacity 0.24s ease;
      pointer-events: none;
      z-index: 1;
    }

    .card[data-note]::after {
      content: attr(data-note);
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: 12px;
      z-index: 5;
      padding: 8px 10px;
      border: 1px solid color-mix(in srgb, var(--room-accent) 20%, var(--border));
      border-radius: 6px;
      background: color-mix(in srgb, var(--surface) 90%, transparent);
      color: var(--text-muted);
      font-family: var(--ff-body);
      font-size: 11px;
      line-height: 1.45;
      box-shadow: 0 12px 24px rgba(41,31,22,0.11);
      opacity: 0;
      visibility: hidden;
      transform: translateY(6px);
      pointer-events: none;
      transition: opacity 0.18s ease, transform 0.18s ease;
    }

    .card-art {
      height: 150px;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
    }

    .card-art svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      transform: scale(1.01);
      transition: transform 0.5s ease, filter 0.5s ease;
    }

    .card-body {
      padding: 15px 17px 16px;
      display: flex;
      flex-direction: column;
      gap: 7px;
      border-top: 1px solid var(--border);
      position: relative;
      z-index: 2;
    }

    .card-meta {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .card-num {
      font-family: var(--ff-essay);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.12em;
      color: var(--text-dim);
      font-variant-numeric: tabular-nums;
    }

    .card-sep { font-size: 9px; color: var(--text-dim); opacity: 0.35; }

    .card-date {
      font-family: var(--ff-essay);
      font-size: 9px;
      letter-spacing: 0.07em;
      color: var(--text-dim);
    }

    .card-title {
      font-family: var(--ff-essay);
      font-size: 13.5px;
      font-weight: 600;
      letter-spacing: 0.01em;
      line-height: 1.3;
      color: var(--text);
    }

    .card-desc {
      font-family: var(--ff-essay);
      font-size: 11px;
      color: var(--text-muted);
      line-height: 1.6;
      letter-spacing: 0.02em;
    }

    .card-foot {
      display: flex;
      justify-content: flex-end;
      margin-top: 1px;
    }

    .card-arrow {
      font-size: 14px;
      color: var(--text-dim);
      transition: transform 0.14s ease, color 0.14s ease;
      line-height: 1;
    }

    a.card {
      cursor: pointer;
      transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
    }

    a.card:hover {
      border-color: color-mix(in srgb, var(--saffron) 34%, var(--border));
      box-shadow: var(--card-shadow);
      transform: translateY(-5px) rotate(-0.35deg);
    }

    a.card:hover::before { opacity: 1; }

    a.card:hover::after,
    a.card:focus-visible::after {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    a.card:hover .card-art svg {
      transform: scale(1.06);
      filter: saturate(1.16) contrast(1.03);
    }

    a.card:hover .card-arrow {
      transform: translateX(4px);
      color: var(--text-muted);
    }

    /* ── PORTAL CARD (Watchlist) ── */
    .portal-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--card-r);
      padding: 20px 22px;
      text-decoration: none;
      color: inherit;
      max-width: 480px;
      cursor: pointer;
      transition: box-shadow 0.16s ease, transform 0.16s ease;
    }

    .portal-card:hover {
      box-shadow: 0 6px 28px rgba(0,0,0,0.11);
      transform: translateY(-2px);
    }

    .portal-meta {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-bottom: 6px;
    }

    .portal-eyebrow {
      font-family: var(--ff-essay);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--teal);
    }

    .portal-date {
      font-family: var(--ff-essay);
      font-size: 9px;
      letter-spacing: 0.07em;
      color: var(--text-dim);
    }

    .portal-title {
      font-family: var(--ff-essay);
      font-size: 13.5px;
      font-weight: 600;
      letter-spacing: 0.01em;
      line-height: 1.3;
      color: var(--text);
      margin-bottom: 4px;
    }

    .portal-desc {
      font-family: var(--ff-essay);
      font-size: 11px;
      color: var(--text-muted);
      line-height: 1.6;
      letter-spacing: 0.02em;
    }

    .portal-arrow {
      font-size: 18px;
      color: var(--text-dim);
      margin-left: 20px;
      flex-shrink: 0;
      transition: transform 0.14s ease, color 0.14s ease;
    }

    .portal-card:hover .portal-arrow {
      transform: translateX(4px);
      color: var(--text-muted);
    }

    /* ── LIBRARY: A PHYSICAL, QUIET BOOKSHELF ── */
    body[data-theme='library'] {
      --bg: #f2efe8;
      --surface: #fbf8f1;
      --surface-2: #e8e0d3;
      --border: rgba(62, 55, 45, 0.14);
      --text: #24221d;
      --text-muted: #716a5e;
      --text-dim: #aaa193;
      --room-accent: #344c45;
      --room-soft: rgba(52, 76, 69, 0.07);
      --room-line: rgba(77, 65, 51, 0.08);
      --wash-1: rgba(122, 91, 56, 0.05);
      --wash-2: rgba(52, 76, 69, 0.055);
      --wash-3: rgba(131, 91, 83, 0.04);
      --pattern-ink: rgba(77, 65, 51, 0.028);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.44), transparent 38vh),
        #f2efe8;
    }

    body[data-theme='library']::before { opacity: 0.16; }
    body[data-theme='library']::after { opacity: 0.055; }
    body[data-theme='library'] #accent-stripe { display: none; }

    #lib-wrap {
      flex: 1;
      display: flex;
      flex-direction: column;
      max-width: var(--max-w);
      width: 100%;
      margin: 0 auto;
      padding: 28px 24px 78px;
    }

    .library-intro {
      padding: 12px 2px 22px;
      border-bottom: 1px solid rgba(67, 57, 45, 0.11);
    }

    .library-heading {
      max-width: 720px;
      margin: 0;
      color: var(--text);
      font-family: var(--ff-display);
      font-size: clamp(1.65rem, 3vw, 2.55rem);
      font-weight: 300;
      letter-spacing: -0.035em;
      line-height: 1.08;
    }

    #lib-controls {
      display: block;
      align-items: start;
      margin: 0;
      padding: 17px 2px 15px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .filter-groups {
      display: grid;
      gap: 9px;
      min-width: 0;
    }

    #lib-tag-buttons { display: contents; }

    .filter-row {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      align-items: center;
      min-width: 0;
    }

    .filter-row-label {
      flex: 0 0 72px;
      color: var(--text-dim);
      font-family: var(--ff-essay);
      font-size: 8.5px;
      font-weight: 500;
      letter-spacing: 0.13em;
      text-transform: uppercase;
    }

    .filter-btn {
      position: relative;
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      gap: 5px;
      min-height: 27px;
      padding: 5px 9px;
      border: 1px solid transparent;
      border-radius: 5px;
      background: transparent;
      box-shadow: none;
      color: var(--text-muted);
      cursor: pointer;
      font-family: var(--ff-essay);
      font-size: 9px;
      font-weight: 500;
      letter-spacing: 0.08em;
      line-height: 1;
      text-transform: uppercase;
      transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
      white-space: nowrap;
    }

    .filter-btn:hover {
      border-color: rgba(63, 56, 46, 0.12);
      background: rgba(255, 253, 248, 0.54);
      color: var(--text);
      transform: translateY(-1px);
    }

    .filter-btn.active {
      border-color: #344c45;
      background: #344c45;
      box-shadow: 0 4px 10px rgba(36, 48, 44, 0.11);
      color: #f9f5ec;
      transform: none;
    }

    .filter-btn.active:hover {
      border-color: #2c413b;
      background: #2c413b;
    }

    .filter-count {
      color: inherit;
      font-size: 8px;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0;
      opacity: 0.58;
    }

    .filter-clear {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      min-height: 27px;
      margin-left: 9px;
      padding: 5px 9px;
      border: 1px solid rgba(89, 67, 53, 0.22);
      border-radius: 5px;
      background: rgba(255, 253, 248, 0.6);
      color: #7a4f46;
      cursor: pointer;
      font-family: var(--ff-essay);
      font-size: 8.5px;
      font-weight: 600;
      letter-spacing: 0.08em;
      line-height: 1;
      text-transform: uppercase;
      transition: color 0.13s ease, opacity 0.13s ease, transform 0.13s ease, background 0.13s ease, border-color 0.13s ease;
    }

    .filter-clear::before {
      width: 1px;
      height: 13px;
      margin-right: 4px;
      background: rgba(89, 67, 53, 0.18);
      content: '';
    }

    .filter-symbol {
      display: inline-grid;
      width: 12px;
      height: 12px;
      place-items: center;
      font-size: 10px;
      line-height: 1;
    }

    .filter-symbol.changed { color: #b07b2f; }
    .filter-symbol.liked { color: #985762; }

    .filter-clear:hover:not(:disabled) {
      border-color: rgba(73, 49, 44, 0.4);
      background: #fffdf8;
      color: #49312c;
      transform: translateY(-1px);
    }

    .filter-clear:disabled {
      cursor: default;
      opacity: 0.28;
    }

    .library-shelf-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      min-height: 30px;
      padding: 2px 3px 7px;
      color: var(--text-dim);
      font-family: var(--ff-essay);
      font-size: 8.5px;
      letter-spacing: 0.11em;
      text-transform: uppercase;
    }

    #lib-result-count { font-variant-numeric: tabular-nums; }

    .shelf-gesture {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }

    .shelf-gesture::before {
      width: 22px;
      height: 1px;
      background: currentColor;
      content: '';
      opacity: 0.42;
    }

    /* Face-out covers on a real ledge. The shelf lip is a foreground layer:
       filtering pushes covers behind it before gravity takes over. */
    #lib-grid {
      position: relative;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
      align-content: start;
      min-height: 224px;
      padding: 0 16px 18px;
      border: 1px solid rgba(67, 57, 45, 0.11);
      border-top-color: rgba(67, 57, 45, 0.08);
      border-radius: 4px 4px 10px 10px;
      background:
        repeating-linear-gradient(
          to bottom,
          rgba(255,255,255,0.36) 0,
          rgba(255,255,255,0.12) 202px,
          rgba(116, 82, 49, 0.09) 202px,
          rgba(116, 82, 49, 0.04) 220px
        ),
        linear-gradient(90deg, rgba(76,60,43,0.045), transparent 8%, transparent 92%, rgba(76,60,43,0.045)),
        #f3eadb;
      box-shadow:
        inset 18px 0 28px -28px rgba(48, 37, 27, 0.32),
        inset -18px 0 28px -28px rgba(48, 37, 27, 0.32),
        0 18px 46px rgba(54, 43, 31, 0.07);
      isolation: isolate;
      perspective: 1100px;
      transform-style: preserve-3d;
    }

    #lib-grid::after {
      position: absolute;
      inset: 0;
      z-index: 4;
      background:
        repeating-linear-gradient(
          to bottom,
          transparent 0,
          transparent 201px,
          rgba(91, 57, 30, 0.34) 201px,
          #b77a42 202px,
          #9b6034 209px,
          #6f4228 213px,
          rgba(62, 38, 23, 0.22) 214px,
          transparent 220px
        );
      content: '';
      pointer-events: none;
    }

    #lib-grid[aria-busy='true'] { pointer-events: none; }

    @keyframes coverPlace {
      0% {
        opacity: 0;
        transform: translateX(-50%) translateY(38px) translateZ(-100px) rotateY(-7deg) scale(0.9);
      }
      72% {
        opacity: 1;
        transform: translateX(-50%) translateY(-3px) translateZ(4px) rotate(var(--book-lean)) scale(1.01);
      }
      100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) translateZ(0) rotate(var(--book-lean)) scale(1);
      }
    }

    @keyframes coverPushBehind {
      0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) translateZ(0) rotate(var(--book-lean)) scale(1);
      }
      28% {
        opacity: 0.95;
        transform: translateX(-50%) translateY(-5px) translateZ(-115px) rotate(calc(var(--book-lean) * -0.4)) scale(0.91);
      }
      48% {
        opacity: 0.82;
        transform: translateX(-50%) translateY(9px) translateZ(-155px) rotateX(5deg) scale(0.85);
      }
      100% {
        opacity: 0;
        transform: translateX(-50%) translate(var(--fall-x), 132px) translateZ(-170px) rotateX(13deg) rotate(var(--fall-rot)) scale(0.8);
      }
    }

    @keyframes coverReturn {
      0% {
        opacity: 0;
        transform: translateX(-50%) translateY(92px) translateZ(-165px) rotateX(11deg) rotate(var(--return-rot)) scale(0.82);
      }
      62% {
        opacity: 1;
        transform: translateX(-50%) translateY(-4px) translateZ(5px) rotate(calc(var(--book-lean) * -0.3)) scale(1.015);
      }
      100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) translateZ(0) rotate(var(--book-lean)) scale(1);
      }
    }

    .book-card {
      position: relative;
      z-index: 2;
      width: 100%;
      height: 220px;
      border: 0;
      background: transparent;
      cursor: pointer;
      outline: none;
      transform-style: preserve-3d;
    }

    .book-card[hidden] { display: none; }

    .book-face {
      position: absolute;
      bottom: 13px;
      left: 50%;
      z-index: 2;
      width: var(--book-width-fitted, var(--book-width));
      height: var(--book-height);
      overflow: hidden;
      border: 1px solid rgba(31, 27, 23, 0.2);
      border-radius: 2px 5px 5px 2px;
      background:
        linear-gradient(90deg, rgba(18,15,12,0.1), transparent 7%, rgba(255,255,255,0.14) 9%, transparent 20%),
        linear-gradient(145deg, rgba(255,255,255,0.14), transparent 48%, rgba(21,18,15,0.05)),
        var(--cover-bg);
      color: var(--cover-ink);
      box-shadow:
        3px 7px 13px rgba(41, 29, 20, 0.13),
        inset 0 1px 0 rgba(255,255,255,0.2);
      filter: saturate(0.98) contrast(1.015) brightness(1.015);
      transform: translateX(-50%) rotate(var(--book-lean));
      transform-origin: left bottom;
      transition: box-shadow 0.14s ease, filter 0.14s ease, transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .book-face::after {
      position: absolute;
      inset: 6px;
      z-index: 3;
      border-top: 1px solid rgba(255,255,255,0.32);
      border-bottom: 1px solid rgba(29,24,20,0.09);
      content: '';
      pointer-events: none;
    }

    .cover-ornament {
      position: absolute;
      z-index: 0;
      pointer-events: none;
    }

    .cover-design-0 .cover-ornament {
      top: -20%;
      right: -42%;
      width: 105%;
      aspect-ratio: 1;
      border: 12px solid var(--cover-accent);
      border-radius: 50%;
      opacity: 0.32;
    }

    .cover-design-1 .cover-ornament {
      top: 17%;
      right: -32%;
      width: 125%;
      height: 24%;
      background: var(--cover-accent);
      box-shadow: 0 17px 0 color-mix(in srgb, var(--cover-accent) 62%, transparent);
      transform: rotate(-28deg);
      opacity: 0.3;
    }

    .cover-design-2 .cover-ornament {
      inset: 0;
      background:
        linear-gradient(90deg, transparent 47%, color-mix(in srgb, var(--cover-accent) 76%, transparent) 47% 53%, transparent 53%),
        linear-gradient(0deg, transparent 47%, color-mix(in srgb, var(--cover-accent) 76%, transparent) 47% 53%, transparent 53%);
      background-size: 32px 32px;
      opacity: 0.22;
    }

    .cover-design-3 .cover-ornament {
      top: 11%;
      left: 50%;
      width: 54%;
      aspect-ratio: 1;
      border-radius: 50%;
      background:
        repeating-conic-gradient(var(--cover-accent) 0 8deg, transparent 8deg 16deg);
      opacity: 0.3;
      transform: translateX(-50%);
    }

    .cover-design-4 .cover-ornament {
      right: -20%;
      bottom: -7%;
      width: 112%;
      aspect-ratio: 1;
      border-radius: 50% 50% 0 0;
      background: var(--cover-accent);
      opacity: 0.27;
    }

    .cover-design-5 .cover-ornament {
      top: -3%;
      right: -12%;
      width: 58%;
      height: 106%;
      background:
        repeating-linear-gradient(0deg, var(--cover-accent) 0 9px, transparent 9px 18px);
      opacity: 0.25;
      transform: skewX(-12deg);
    }

    .cover-design-6 .cover-ornament {
      top: 12%;
      left: -16%;
      width: 85%;
      height: 32%;
      border: 8px double var(--cover-accent);
      opacity: 0.29;
      transform: rotate(9deg);
    }

    .book-cover-copy {
      position: absolute;
      inset: 4px 6px 6px 8px;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      overflow: hidden;
      padding: 44px 6px 6px;
      border-radius: 1px 3px 3px 1px;
      background: linear-gradient(
        180deg,
        transparent 0,
        color-mix(in srgb, var(--cover-bg) 38%, transparent) 28%,
        color-mix(in srgb, var(--cover-bg) 93%, white 7%) 58%
      );
      text-shadow: 0 1px 0 rgba(255,255,255,0.1);
    }

    .book-cover-title {
      display: -webkit-box;
      overflow: hidden;
      font-family: var(--ff-display);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: -0.012em;
      line-height: 1.08;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 7;
    }

    .book-cover-author {
      margin-top: 8px;
      overflow: hidden;
      font-family: var(--ff-essay);
      font-size: 7.5px;
      font-weight: 700;
      letter-spacing: 0.075em;
      line-height: 1.25;
      opacity: 0.9;
      text-overflow: ellipsis;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .book-rank {
      position: absolute;
      top: 8px;
      left: 10px;
      z-index: 4;
      padding: 3px 5px 2px;
      border: 1px solid color-mix(in srgb, var(--cover-ink) 24%, transparent);
      border-radius: 99px;
      background: color-mix(in srgb, var(--cover-bg) 86%, white 14%);
      font-family: var(--ff-essay);
      font-size: 8.5px;
      font-weight: 700;
      letter-spacing: 0.08em;
      line-height: 1;
      opacity: 0.9;
      text-transform: uppercase;
    }

    .book-rank.undated {
      font-size: 6px;
      letter-spacing: 0.055em;
    }

    .book-cover-marks {
      position: absolute;
      top: -1px;
      right: 7px;
      z-index: 5;
      display: flex;
      align-items: flex-start;
      gap: 4px;
      pointer-events: none;
    }

    .book-cover-mark {
      display: grid;
      place-items: center;
      color: #fff8e8;
      font-family: Georgia, serif;
      text-shadow: 0 1px 1px rgba(44, 30, 21, 0.22);
    }

    .book-cover-mark.changed {
      width: 22px;
      height: 22px;
      margin-top: 7px;
      border: 1px solid rgba(80, 52, 20, 0.32);
      border-radius: 50%;
      background: #b48436;
      box-shadow:
        inset 0 0 0 2px rgba(255, 244, 210, 0.28),
        0 2px 4px rgba(42, 29, 20, 0.2);
      font-size: 12px;
      transform: rotate(5deg);
    }

    .book-cover-mark.liked {
      width: 16px;
      height: 29px;
      padding-bottom: 7px;
      background: #9a5864;
      box-shadow: 0 2px 4px rgba(42, 29, 20, 0.18);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
      font-size: 8px;
    }

    .book-card:hover,
    .book-card:focus-visible { z-index: 30; }

    .book-card:hover .book-face,
    .book-card:focus-visible .book-face,
    .book-card.is-falling .book-face,
    .book-card.is-returning .book-face { will-change: transform; }

    .book-card:hover .book-face,
    .book-card:focus-visible .book-face {
      animation: none !important;
      filter: saturate(1.04) contrast(1.03) brightness(1.03);
      box-shadow: 8px 13px 20px rgba(41, 29, 20, 0.16);
      transform: translateX(-50%) translateY(-8px) rotate(var(--book-lean)) rotateY(-4deg) scale(1.008);
    }

    .book-card:focus-visible .book-face {
      outline: 2px solid var(--cover-accent);
      outline-offset: 3px;
    }

    .book-card.is-intro .book-face {
      animation: coverPlace 0.3s cubic-bezier(0.22, 0.78, 0.28, 1.02) backwards;
      animation-delay: var(--card-delay);
    }

    .book-card.is-falling {
      z-index: 1;
      pointer-events: none;
    }

    .book-card.is-falling .book-face {
      animation: coverPushBehind 0.15s cubic-bezier(0.36, 0.02, 0.7, 0.52) forwards;
      animation-delay: var(--fall-delay);
    }

    .book-card.is-returning { z-index: 2; }
    .book-card.is-returning .book-face {
      animation: coverReturn 0.18s cubic-bezier(0.2, 0.8, 0.24, 1.01) both;
      animation-delay: var(--return-delay);
    }

    .lib-empty {
      display: grid;
      grid-column: 1 / -1;
      min-height: 220px;
      place-items: center;
      color: var(--text-dim);
      font-family: var(--ff-display);
      font-size: 1rem;
      font-style: italic;
    }

    .lib-empty::before {
      position: absolute;
      width: 72px;
      height: 16px;
      margin-top: -52px;
      border: 1px solid rgba(67, 57, 45, 0.18);
      border-radius: 2px;
      background: #ef6c47;
      box-shadow: 3px 5px 8px rgba(54, 43, 31, 0.1);
      content: '';
      transform: rotate(-4deg);
    }

    /* ── OPENED BOOK DETAIL ── */
    #book-modal {
      position: fixed;
      inset: 0;
      z-index: 500;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(35, 32, 27, 0.32);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    #book-modal.open { display: flex; opacity: 1; }

    .bm-panel {
      position: relative;
      display: grid;
      grid-template-columns: minmax(210px, 0.78fr) minmax(320px, 1.22fr);
      width: min(760px, 100%);
      max-height: min(620px, 86vh);
      overflow: hidden;
      border: 1px solid rgba(62, 54, 44, 0.15);
      border-radius: 7px;
      background: #faf6ed;
      box-shadow: 0 35px 100px rgba(30, 26, 21, 0.25), 0 8px 24px rgba(30, 26, 21, 0.1);
      transform: perspective(1100px) rotateY(-10deg) translateX(-10px) scale(0.97);
      transform-origin: left center;
      transition: transform 0.16s ease;
    }

    #book-modal.open .bm-panel {
      transform: perspective(1100px) rotateY(0) translateX(0) scale(1);
    }

    .bm-visual {
      position: relative;
      display: grid;
      min-height: 430px;
      padding: 46px 40px;
      place-items: center;
      overflow: hidden;
      border-right: 1px solid rgba(62, 54, 44, 0.13);
      background:
        linear-gradient(145deg, rgba(255,255,255,0.44), transparent 50%),
        #e9e0d2;
    }

    .bm-visual::after {
      position: absolute;
      right: 0;
      bottom: 11%;
      left: 0;
      height: 1px;
      background: rgba(75, 60, 44, 0.16);
      box-shadow: 0 12px 24px rgba(63, 48, 34, 0.11);
      content: '';
    }

    .bm-cover {
      position: relative;
      z-index: 1;
      display: flex;
      width: min(188px, 100%);
      aspect-ratio: 0.68;
      padding: 34px 24px 25px 29px;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      border: 1px solid rgba(39, 34, 28, 0.2);
      border-radius: 2px 5px 5px 2px;
      background:
        linear-gradient(90deg, rgba(25,21,17,0.1), transparent 10%, rgba(255,255,255,0.14) 12%, transparent 32%),
        linear-gradient(155deg, rgba(255,255,255,0.14), transparent 46%, rgba(31,26,21,0.05)),
        var(--cover-bg, #167d8d);
      box-shadow:
        -4px 6px 0 #eee2cc,
        -7px 12px 20px rgba(48, 37, 27, 0.16);
      color: var(--cover-ink, #fff2d5);
      filter: saturate(0.98) contrast(1.015) brightness(1.015);
      text-align: center;
      transform: rotate(-1.5deg);
    }

    .bm-cover::before {
      position: absolute;
      inset: 8px;
      border-top: 1px solid rgba(255,255,255,0.2);
      border-bottom: 1px solid rgba(35,30,24,0.12);
      content: '';
    }

    .bm-cover-ornament {
      position: absolute;
      top: -12%;
      right: -38%;
      z-index: 0;
      width: 105%;
      aspect-ratio: 1;
      border: 18px solid var(--cover-accent, #f0b84b);
      border-radius: 50%;
      opacity: 0.72;
    }

    .bm-cover-title {
      position: relative;
      z-index: 1;
      font-family: var(--ff-display);
      font-size: clamp(1rem, 2.3vw, 1.35rem);
      font-weight: 500;
      line-height: 1.08;
    }

    .bm-cover-author {
      position: relative;
      z-index: 1;
      margin-top: 16px;
      font-family: var(--ff-essay);
      font-size: 7px;
      font-weight: 500;
      letter-spacing: 0.11em;
      line-height: 1.4;
      opacity: 0.68;
      text-transform: uppercase;
    }

    .bm-content {
      display: flex;
      min-width: 0;
      min-height: 0;
      flex-direction: column;
    }

    .bm-close {
      position: absolute;
      top: 14px;
      right: 14px;
      z-index: 4;
      display: grid;
      width: 30px;
      height: 30px;
      border: 1px solid rgba(62, 54, 44, 0.14);
      border-radius: 50%;
      background: rgba(250, 246, 237, 0.86);
      color: var(--text-muted);
      cursor: pointer;
      font-size: 15px;
      line-height: 1;
      place-items: center;
      transition: color 0.16s ease, border-color 0.16s ease, transform 0.2s ease;
    }

    .bm-close:hover {
      border-color: rgba(62, 54, 44, 0.28);
      color: var(--text);
      transform: rotate(90deg);
    }

    .bm-body {
      min-height: 0;
      padding: 34px 38px 24px;
      overflow-y: auto;
      color: var(--text);
      font-family: var(--ff-body);
      font-size: 0.86rem;
      line-height: 1.65;
    }

    .bm-eyebrow {
      margin-bottom: 9px;
      color: var(--text-dim);
      font-family: var(--ff-essay);
      font-size: 8px;
      font-weight: 500;
      letter-spacing: 0.15em;
      text-transform: uppercase;
    }

    #bm-title {
      max-width: 94%;
      font-family: var(--ff-display);
      font-size: clamp(1.7rem, 3.4vw, 2.65rem);
      font-weight: 300;
      letter-spacing: -0.035em;
      line-height: 1.02;
    }

    .bm-author {
      margin-top: 9px;
      color: var(--text-muted);
      font-family: var(--ff-body);
      font-size: 11px;
    }

    .bm-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin: 19px 0 17px;
    }

    .bm-tag {
      padding: 4px 8px;
      border: 1px solid rgba(62, 54, 44, 0.12);
      border-radius: 4px;
      background: rgba(255,255,255,0.32);
      color: var(--text-muted);
      font-family: var(--ff-essay);
      font-size: 8px;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

    .bm-tag.lc { color: #765b38; }
    .bm-tag.rl { color: #765354; }
    .bm-blurb { color: var(--text-muted); }
    .bm-blurb p + p { margin-top: 0.7em; }

    /* Future Essays landing. It remains unreachable until the public manifest
       is explicitly enabled and contains at least one promoted essay. */
    #essays-public-section {
      width: min(100%, var(--max-w));
      margin: 0 auto;
      padding: 64px 24px 84px;
    }

    .public-essays-header {
      max-width: 760px;
      padding-bottom: 30px;
      border-bottom: 1px solid var(--border);
    }

    .public-essays-header h1 {
      margin: 0;
      font-family: var(--ff-display);
      font-size: clamp(2.5rem, 7vw, 5.4rem);
      font-weight: 300;
      letter-spacing: -0.045em;
      line-height: 0.98;
    }

    .public-essays-header p {
      max-width: 620px;
      margin: 18px 0 0;
      color: var(--text-muted);
      font-family: var(--ff-display);
      font-size: 1.25rem;
      font-weight: 300;
      line-height: 1.45;
    }

    #essays-public-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
      gap: 1px;
      margin-top: 34px;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--border);
    }

    .public-essay-card {
      position: relative;
      min-height: 290px;
      padding: 28px;
      background: var(--surface);
      color: var(--text);
      text-decoration: none;
      transition: background 0.18s ease, transform 0.18s ease;
    }

    .public-essay-card:hover {
      z-index: 1;
      background: color-mix(in srgb, var(--surface) 90%, var(--marigold));
      transform: translateY(-2px);
    }

    .public-essay-card-number,
    .public-essay-card-category,
    .public-essay-card time {
      color: var(--text-dim);
      font-family: var(--ff-essay);
      font-size: 8px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .public-essay-card-category {
      margin-left: 12px;
      color: var(--room-accent);
    }

    .public-essay-card h2 {
      margin: 54px 0 12px;
      font-family: var(--ff-display);
      font-size: 1.75rem;
      font-weight: 300;
      letter-spacing: -0.025em;
      line-height: 1.08;
    }

    .public-essay-card p {
      margin: 0 0 28px;
      color: var(--text-muted);
      font-family: var(--ff-body);
      font-size: 0.9rem;
      line-height: 1.58;
    }

    .public-essay-card time {
      position: absolute;
      right: 28px;
      bottom: 24px;
      left: 28px;
      padding-top: 13px;
      border-top: 1px solid var(--border);
    }

    /* ── FOOTER ── */
    #site-footer {
      border-top: 1px solid var(--border);
      padding: 18px 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: var(--max-w);
      width: 100%;
      margin: 0 auto;
    }

    .footer-ornament {
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .footer-ornament span {
      display: inline-block;
      font-size: 10px;
      color: var(--saffron);
      opacity: 0.35;
    }

    #footer-text {
      font-family: var(--ff-essay);
      font-size: 9.5px;
      color: var(--text-dim);
      letter-spacing: 0.06em;
    }

    /* ── AMBIENT ORBS ── */
    #ambient-orbs {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
    }
    .ambient-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(72px);
      opacity: 0.13;
      mix-blend-mode: multiply;
      will-change: transform;
    }
    .ambient-orb:nth-child(1) { animation: orb1Float 32s ease-in-out infinite; }
    .ambient-orb:nth-child(2) { animation: orb2Float 40s ease-in-out infinite; }
    .ambient-orb:nth-child(3) { animation: orb3Float 28s ease-in-out infinite; }

    @keyframes orb1Float {
      0%, 100% { transform: translate(0, 0) scale(1); }
      33%       { transform: translate(70px, -50px) scale(1.08); }
      66%       { transform: translate(-40px, 60px) scale(0.94); }
    }
    @keyframes orb2Float {
      0%, 100% { transform: translate(0, 0) scale(1); }
      40%       { transform: translate(-80px, 40px) scale(1.06); }
      70%       { transform: translate(50px, -70px) scale(0.96); }
    }
    @keyframes orb3Float {
      0%, 100% { transform: translate(0, 0) scale(1); }
      50%       { transform: translate(60px, 50px) scale(1.1); }
    }

    /* ── CARD ENTRANCE STAGGER ── */
    .card-enter {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.44s ease, transform 0.44s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .card-enter.card-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ── BUTTON RIPPLE ── */
    .filter-btn, .tab-btn { overflow: hidden; }
    .btn-ripple {
      position: absolute;
      border-radius: 50%;
      background: rgba(255,255,255,0.32);
      transform: scale(0);
      animation: rippleAnim 0.55s ease-out forwards;
      pointer-events: none;
      z-index: 10;
    }
    @keyframes rippleAnim {
      to { transform: scale(1); opacity: 0; }
    }

    /* ── CARD SPOTLIGHT ── */
    a.card { --mx: 50%; --my: 50%; }
    a.card:hover::before {
      background:
        radial-gradient(circle at var(--mx) var(--my), color-mix(in srgb, var(--saffron) 24%, transparent), transparent 52%),
        linear-gradient(135deg, color-mix(in srgb, var(--saffron) 14%, transparent), transparent 38%),
        linear-gradient(315deg, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 42%),
        repeating-linear-gradient(90deg, transparent 0 22px, color-mix(in srgb, var(--text) 4%, transparent) 22px 23px);
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 640px) {
      #essays-main, #lib-wrap { padding: 0 14px 52px; }
      .shelf { grid-template-columns: 1fr; }
      #site-header {
        height: auto;
        padding: 10px 14px;
        justify-content: center;
      }
      #header-cluster { flex-wrap: wrap; gap: 8px; width: 100%; justify-content: space-between; }
      #hd-center { order: 0; flex: 0 0 auto; justify-content: flex-start; }
      #global-search-wrap { flex: 0 0 auto; min-width: 130px; }
      #site-footer { padding: 16px; flex-direction: column; gap: 10px; }
      #tab-nav { gap: 1px; }
      .tab-btn { height: 32px; padding: 0 13px; font-size: 13px; }
      #lib-wrap { padding-top: 22px; }
      .library-intro { padding-bottom: 17px; }
      .library-heading { font-size: 1.65rem; }
      #lib-controls {
        gap: 10px;
        overflow: hidden;
        padding: 14px 0 12px;
      }
      .filter-clear { margin-left: 8px; }
      .filter-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 0 1px 4px;
        scrollbar-width: none;
      }
      .filter-row::-webkit-scrollbar { display: none; }
      .filter-row-label {
        position: sticky;
        left: 0;
        z-index: 2;
        flex-basis: auto;
        padding-right: 10px;
        background: var(--bg);
      }
      .library-shelf-meta { padding-right: 1px; padding-left: 1px; }
      .shelf-gesture { display: none; }
      #lib-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding-right: 8px;
        padding-left: 8px;
        background:
          repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.36) 0,
            rgba(255,255,255,0.12) 156px,
            rgba(116, 82, 49, 0.09) 156px,
            rgba(116, 82, 49, 0.04) 172px
          ),
          linear-gradient(90deg, rgba(76,60,43,0.035), transparent 8%, transparent 92%, rgba(76,60,43,0.035)),
          #f3eadb;
      }
      #lib-grid::after {
        background:
          repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 155px,
            rgba(91, 57, 30, 0.34) 155px,
            #b77a42 156px,
            #9b6034 162px,
            #6f4228 165px,
            rgba(62, 38, 23, 0.22) 166px,
            transparent 172px
          );
      }
      .book-card { height: 172px; }
      .book-face {
        bottom: 11px;
        width: min(var(--book-width-fitted, var(--book-width)), 74px);
        height: min(var(--book-height), 132px);
      }
      .book-card.title-needs-room .book-face {
        width: min(var(--book-width-fitted, var(--book-width)), 78px);
      }
      .book-cover-copy { inset: 3px 4px 4px 5px; padding: 34px 4px 4px; }
      .book-cover-title { font-size: 9.5px; -webkit-line-clamp: 7; }
      .book-cover-author { margin-top: 5px; font-size: 5.75px; }
      .book-rank { top: 6px; left: 7px; padding: 2px 4px; font-size: 7px; }
      .book-rank.undated { font-size: 5px; }
      .book-cover-marks { right: 4px; gap: 2px; }
      .book-cover-mark.changed {
        width: 17px;
        height: 17px;
        margin-top: 5px;
        font-size: 9px;
      }
      .book-cover-mark.liked {
        width: 12px;
        height: 23px;
        padding-bottom: 6px;
        font-size: 6px;
      }
      .bm-panel {
        grid-template-columns: 142px minmax(0, 1fr);
        max-height: 88vh;
      }
      .bm-visual { min-height: 370px; padding: 38px 22px; }
      .bm-cover { width: 112px; padding: 24px 14px 19px 18px; }
      .bm-cover-title { font-size: 0.92rem; }
      .bm-body { padding: 39px 24px 20px; }
      #essays-public-section { padding: 42px 14px 62px; }
      #essays-public-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 400px) {
      #book-modal { padding: 10px; }
      .bm-panel {
        display: flex;
        max-height: 92vh;
        flex-direction: column;
      }
      .bm-visual { display: none; }
      .bm-body { padding: 42px 22px 18px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .book-face,
      .book-card.is-falling .book-face,
      .book-card.is-returning .book-face {
        animation: none !important;
      }
      .book-card:hover .book-face,
      .book-card:focus-visible .book-face { transform: translateX(-50%) rotate(var(--book-lean)); }
      .bm-panel { transition-duration: 0.01ms; }
    }

/* Reading room: cloth covers, paper edges and slim oak ledges. */

#ambient-orbs { display:none; }
#lib-controls .filter-groups { display:flex; flex-direction:column; align-items:stretch; gap:5px; width:100%; }
#lib-wrap { padding-top:22px; }
#lib-wrap .library-intro { padding-bottom:12px; }
#lib-wrap .library-heading { font-size:26px; }
#lib-controls { padding:10px 0; }
.library-shelf-meta { padding-top:10px; padding-bottom:6px; }
#lib-years-row { gap:3px; flex-wrap:wrap; overflow:visible; }
#lib-years-row .filter-btn { padding:7px 9px; }

#lib-grid { --shelf-row:248px; grid-template-columns:repeat(auto-fill,minmax(142px,1fr)); padding:0 20px 20px; border:0; border-radius:0; box-shadow:none; background:repeating-linear-gradient(to bottom,transparent 0,transparent 209px,rgba(74,48,25,.075) 225px,transparent 248px); }
#lib-grid::after { background:repeating-linear-gradient(to bottom,transparent 0,transparent 225px,#d1b691 225px,#b49672 229px,#a48764 233px,rgba(68,47,28,.12) 234px,transparent 245px,transparent 248px); }
#lib-grid { perspective:none; transform-style:flat; }
.book-card { height:var(--shelf-row); perspective:900px; perspective-origin:center center; transform-style:flat; }
.book-face,.book-card.title-needs-room .book-face { width:calc(var(--book-width) + 28px); max-width:calc(100% - 24px); height:calc(var(--book-height) + 22px); bottom:19px; overflow:visible; border-radius:3px 5px 4px 2px; transform:translateX(-50%) rotate(var(--book-lean)) rotateY(-7deg); transform-origin:center bottom; background:linear-gradient(90deg,rgba(0,0,0,.25),transparent 4%,rgba(255,255,255,.18) 6%,rgba(0,0,0,.12) 8%,transparent 11%),repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,rgba(0,0,0,.025) 1px 2px),var(--cover-bg); box-shadow:5px 5px 0 -1px #e8dfcc,7px 6px 0 -1px var(--cover-bg),9px 9px 12px rgba(45,32,21,.18); }
.book-face::before { content:''; position:absolute; right:-6px; top:4px; bottom:3px; width:5px; background:repeating-linear-gradient(0deg,#f4efdf 0 1px,#d9d0bc 1px 2px); transform:skewY(12deg); z-index:-1; }
.book-face::after { inset:0; border:0; box-shadow:inset 0 1px 1px rgba(255,255,255,.35),inset -1px 0 2px rgba(0,0,0,.18); border-radius:inherit; }
.book-face .cover-ornament { inset:22px 20px auto 24px; width:auto; height:42px; aspect-ratio:auto; border:0; border-top:1px solid currentColor; border-bottom:3px double currentColor; border-radius:0; background:none; box-shadow:none; transform:none; opacity:.22; }
.book-face.cover-design-1 .cover-ornament,.book-face.cover-design-4 .cover-ornament { height:34px; width:34px; left:calc(50% - 17px); border:1px solid currentColor; border-radius:50%; }
.book-face.cover-design-3 .cover-ornament,.book-face.cover-design-6 .cover-ornament { height:28px; width:28px; left:calc(50% - 14px); border:3px double currentColor; transform:rotate(45deg); }
.book-cover-copy { inset:0; justify-content:center; padding:54px 12px 25px 17px; background:none; overflow:hidden; }
.book-cover-title { font-size:16px; line-height:1.15; font-weight:500; -webkit-line-clamp:7; overflow-wrap:normal; }
.book-cover-author { margin-top:13px; font-size:9px; line-height:1.4; white-space:normal; letter-spacing:.04em; }
.book-card.title-needs-room .book-cover-title { font-size:13px; }
.book-rank { top:auto; bottom:10px; left:21px; padding:0; border:0; background:none; font-size:8px; opacity:.65; }
.book-rank.undated { display:none; }
.book-card:hover .book-face,.book-card:focus-visible .book-face { transform:translateX(-50%) translateY(-10px) rotateY(-2deg); box-shadow:5px 5px 0 -1px #e8dfcc,7px 6px 0 -1px var(--cover-bg),12px 19px 22px rgba(45,32,21,.2); }
.book-card:focus-visible .book-face { outline:2px solid var(--text); outline-offset:7px; }
.bm-panel { width:min(820px,100%); grid-template-columns:260px minmax(0,1fr); border-radius:8px; }
.bm-visual { background:#ece2d1; min-height:420px; display:grid; place-items:center; padding:48px 32px; }
.bm-cover { width:180px; min-height:265px; transform:rotate(-4deg); }
.bm-body { padding:48px 36px 30px; }
.bm-blurb { font-size:15px; line-height:1.8; }
.bm-browse { display:flex; justify-content:space-between; gap:12px; margin-top:28px; padding-top:18px; border-top:1px solid var(--border); }
.bm-browse button { min-height:44px; background:none; border:0; color:var(--text); font:500 12px var(--ff-body); cursor:pointer; }
.bm-browse button:disabled { opacity:.3; cursor:default; }
.bm-close { width:44px; height:44px; }
@media(max-width:640px) {
  #lib-grid { grid-template-columns:repeat(3,minmax(0,1fr)); padding:0 6px 20px; }
  #lib-tags-row { flex-wrap:wrap; overflow:visible; gap:6px; }
  #lib-tags-row .filter-row-label { display:none; }
  #lib-tag-buttons { display:flex; flex-wrap:wrap; gap:3px; }
  .filter-clear:disabled { display:none; }
  .library-shelf-meta { font-size:10px; }
  .book-cover-copy { padding:48px 7px 24px 12px; }
  .book-cover-title { font-size:12.5px; }
  .book-card.title-needs-room .book-cover-title { font-size:11px; }
  .book-face,.book-card.title-needs-room .book-face { max-width:calc(100% - 12px); }
  #lib-years-row .filter-btn { min-height:36px; }
  #lib-years-row .filter-count { display:none; }
  #lib-years-row .filter-row-label { position:static; }
  #lib-wrap .library-heading { font-size:23px; }
  .book-face .cover-ornament { inset:18px 14px auto 16px; height:24px; }
  .book-cover-author { font-size:7px; }
  .bm-panel { display:block; max-height:90dvh; overflow:auto; }
  .bm-visual { display:none; }
  .bm-body { padding:48px 25px 24px; }
  .bm-content { overflow:visible; }
}
@media(prefers-reduced-motion:reduce) {
  .book-face { transition:none; }
  .book-card:hover .book-face,.book-card:focus-visible .book-face { transform:translateX(-50%) rotate(var(--book-lean)); }
}