/* ──────────────────────────────────────────────────────────
       THE STACK — the quiet cousin of the homepage.
       Calm editorial canvas, strong type, minimal chrome.
       One reading room, one screening room. No placeholders.
       Data regions between the AUTO markers are maintained by
       the weekly Goodreads/IMDb job — keep those markers intact.
       ────────────────────────────────────────────────────────── */

    :root{
      --stk-canvas:#f6f3eb;
      --stk-line:#dcd8cf;
      --stk-ink:#1a1712;
      --stk-quiet:#8c887e;
      --stk-orange:#ff5a00;
      --stk-screen:#0f0d0a;
    }

    .reading-room{ background:var(--stk-canvas); color:var(--stk-ink); padding:clamp(56px,9vh,96px) 0; border-top:2px solid var(--stk-ink); }
    
    .stk-wrap{ max-width:1080px; margin:0 auto; padding:0 var(--container-pad); }

    /* ── header ── */
    .stk-head{ padding:clamp(52px,10vh,104px) 0 clamp(30px,5vh,52px); max-width:860px; }
    .stk-eyebrow{
      display:inline-block; font-family:var(--font-mono);
      font-size:12px; letter-spacing:.22em; text-transform:uppercase;
      color:var(--stk-ink); border:1.5px solid var(--stk-ink);
      padding:5px 12px; margin-bottom:26px;
    }
    .stk-h1{
      font-family:var(--font-display);
      font-size:clamp(52px,8.5vw,128px); line-height:.9; letter-spacing:-.025em;
      text-transform:uppercase; margin:0 0 26px;
    }
    .stk-h1 em{ font-family:var(--font-serif); font-style:italic; font-weight:400; color:var(--stk-orange); text-transform:none; }
    .stk-lead{ font-size:17px; line-height:1.65; max-width:600px; color:#3a362f; margin:0 0 18px; }
    .stk-lead a{ color:var(--stk-ink); text-decoration:none; border-bottom:2px solid var(--stk-orange); padding-bottom:1px; font-weight:500; }
    .stk-stamp{
      font-family:var(--font-mono); font-size:11px; letter-spacing:.16em;
      text-transform:uppercase; color:var(--stk-quiet);
      display:flex; align-items:center; gap:9px;
    }
    .stk-stamp::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--stk-orange); display:inline-block; }

    /* ── a clean stat line ── */
    .stk-stats{
      display:flex; flex-wrap:wrap; gap:clamp(28px,6vw,72px);
      padding:clamp(28px,5vh,44px) 0; border-top:1px solid var(--stk-line);
      margin-top:clamp(24px,4vh,40px);
    }
    .stk-stat-n{ font-family:var(--font-display); font-size:clamp(40px,5vw,64px); line-height:1; letter-spacing:-.02em; }
    .stk-stat-l{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--stk-quiet); margin-top:10px; }

    /* ── section scaffold ── */
    .stk-sec{ padding:clamp(46px,8vh,88px) 0; border-top:1px solid var(--stk-line); }
    .stk-kicker{
      font-family:var(--font-mono); font-size:11.5px; letter-spacing:.2em;
      text-transform:uppercase; color:var(--stk-quiet); margin-bottom:14px;
    }
    .stk-h2{
      font-family:var(--font-display); font-size:clamp(30px,4.4vw,58px);
      line-height:.95; letter-spacing:-.015em; text-transform:uppercase; margin:0 0 14px;
    }
    .stk-h2 em{ font-family:var(--font-serif); font-style:italic; font-weight:400; color:var(--stk-orange); text-transform:none; }
    .stk-note{ font-size:15.5px; line-height:1.6; max-width:58ch; color:#4a463d; margin:0 0 38px; }

    /* ── currently reading: clean spine row ── */
    .reading-row{ display:flex; align-items:flex-end; gap:10px; padding-bottom:16px; border-bottom:2px solid var(--stk-ink); min-height:250px; }
    .rspine{
      position:relative; border:none; cursor:pointer; text-align:left;
      display:flex; align-items:flex-end; justify-content:flex-start;
      padding:16px 6px; border-radius:2px 2px 0 0;
      transition:transform .24s cubic-bezier(.16,1,.3,1);
      box-shadow:2px 0 6px rgba(0,0,0,.14);
    }
    .rspine:hover{ transform:translateY(-12px); }
    .rspine .rs-text{
      writing-mode:vertical-rl; transform:rotate(180deg);
      font-family:var(--font-display); font-size:15px; letter-spacing:.03em;
      text-transform:uppercase; line-height:1.05; white-space:nowrap;
    }
    .rspine .rs-auth{
      writing-mode:vertical-rl; transform:rotate(180deg);
      font-family:var(--font-mono); font-size:9px; letter-spacing:.14em;
      text-transform:uppercase; opacity:.8; margin-left:6px; white-space:nowrap;
    }
    .rspine--a{ background:#8a2820; color:#f4eedb; height:250px; width:58px; }
    .rspine--b{ background:#c8902c; color:#1a1208; height:224px; width:52px; }
    .rspine--c{ background:#1f2e5e; color:#f4eedb; height:236px; width:60px; }
    /* the hidden gap — a book that isn't there (speakeasy) */
    .rspine--gap{
      width:26px; height:210px; background:transparent; cursor:pointer;
      box-shadow:inset 7px 0 14px rgba(0,0,0,.14), inset -7px 0 14px rgba(0,0,0,.14);
      border-radius:0;
    }
    .rspine--gap::after{
      content:"?"; position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
      font-family:var(--font-serif); font-style:italic; font-size:20px;
      color:rgba(26,23,18,.12); transition:color .4s ease;
    }
    .rspine--gap:hover{ transform:none; }
    .rspine--gap:hover::after{ color:rgba(26,23,18,.5); }

    .reading-card{
      margin-top:26px; padding:26px 28px 28px; background:#fff;
      border:1px solid var(--stk-line); border-left:3px solid var(--stk-orange);
      display:none;
    }
    .reading-card.is-open{ display:block; }
    .rc-eyebrow{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--stk-quiet); margin-bottom:9px; }
    .rc-title{ font-family:var(--font-serif); font-style:italic; font-size:clamp(24px,3.2vw,34px); line-height:1.15; margin:0 0 3px; }
    .rc-auth{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--stk-quiet); margin-bottom:14px; }
    .rc-note{ font-family:var(--font-serif); font-size:16px; line-height:1.6; max-width:62ch; }

    /* ── books i press on people: calm face-out grid ── */
    .pbook-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
    .pbook{
      position:relative; aspect-ratio:5/7; border:1px solid var(--stk-ink);
      padding:16px 15px; display:flex; flex-direction:column; justify-content:space-between;
      cursor:pointer; overflow:hidden;
      transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s;
      background:#fff; color:var(--stk-ink);
    }
    .pbook:hover{ transform:translateY(-5px); box-shadow:0 14px 30px -14px rgba(20,18,14,.4); }
    .pbook .p-num{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; opacity:.65; }
    .pbook .p-title{ font-family:var(--font-display); font-size:clamp(19px,2.3vw,27px); line-height:.98; text-transform:uppercase; margin:10px 0 0; }
    .pbook .p-auth{ font-family:var(--font-serif); font-style:italic; font-size:13px; margin-top:8px; }
    /* one restrained accent per cover, not a rainbow */
    .pbook--o{ border-color:var(--stk-orange); }
    .pbook--o .p-num, .pbook--o .p-title{ color:var(--stk-orange); }
    .pbook .p-note{
      position:absolute; inset:0; background:var(--stk-ink); color:var(--stk-canvas);
      padding:18px 16px; display:flex; flex-direction:column; justify-content:center;
      font-family:var(--font-serif); font-size:14px; line-height:1.55;
      opacity:0; transition:opacity .24s ease; pointer-events:none;
    }
    .pbook.is-open .p-note{ opacity:1; pointer-events:auto; }
    .pbook .p-note-meta{ font-family:var(--font-mono); font-style:normal; font-size:10px; letter-spacing:.16em; text-transform:uppercase; opacity:.7; margin-bottom:9px; }

    /* ── screening room: one dark screen + a clean list ── */
    .screen{
      background:var(--stk-screen); color:#f4eedb;
      border:1px solid var(--stk-ink);
      padding:clamp(26px,4vw,44px); margin-bottom:34px;
      aspect-ratio:21/9; display:flex; flex-direction:column; justify-content:space-between;
    }
    .screen-now{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--stk-orange); display:flex; align-items:center; gap:9px; }
    .screen-now::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--stk-orange); animation:blink 1.6s ease-in-out infinite; }
    @keyframes blink{ 0%,50%,100%{opacity:1;} 55%,95%{opacity:.25;} }
    .screen-film{ font-family:var(--font-display); font-size:clamp(30px,5vw,60px); line-height:.95; text-transform:uppercase; margin:0; }
    .screen-meta{ font-family:var(--font-serif); font-style:italic; font-size:17px; color:#c8b58c; margin:12px 0 0; }
    .screen-meta strong{ font-family:var(--font-mono); font-style:normal; font-weight:400; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--stk-orange); margin-left:12px; }
    .screen-q{ font-family:var(--font-serif); font-style:italic; font-size:14.5px; line-height:1.5; color:#a99b82; max-width:64ch; margin:14px 0 0; }

    .film-list{ display:grid; grid-template-columns:1fr 1fr; gap:0 48px; }
    .film-row{
      display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:baseline;
      padding:15px 0; border-bottom:1px solid var(--stk-line); cursor:pointer;
      transition:padding-left .2s ease;
    }
    .film-row:hover{ padding-left:8px; }
    .film-row:hover .fr-title{ color:var(--stk-orange); }
    .fr-rate{ font-family:var(--font-display); font-size:17px; color:var(--stk-orange); width:22px; }
    .fr-title{ font-family:var(--font-serif); font-weight:500; font-size:16.5px; line-height:1.3; transition:color .18s ease; }
    .fr-title .fr-by{ display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--stk-quiet); margin-top:3px; }
    .fr-tag{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--stk-quiet); white-space:nowrap; }

    /* ── recently (weekly job writes here) ── */
    .recent-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 48px; }
    .recent-col h3{ font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; padding-bottom:12px; border-bottom:2px solid var(--stk-ink); margin:0 0 4px; }
    .recent-row{ display:grid; grid-template-columns:1fr auto; gap:16px; align-items:baseline; padding:13px 0; border-bottom:1px solid var(--stk-line); }
    .recent-t{ font-family:var(--font-serif); font-weight:500; font-size:16px; line-height:1.3; }
    .recent-t .recent-by{ display:block; font-family:var(--font-serif); font-style:italic; font-size:12.5px; color:var(--stk-quiet); margin-top:2px; }
    .recent-m{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--stk-quiet); white-space:nowrap; }

    .stk-tail{ text-align:center; font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--stk-quiet); padding:clamp(40px,7vh,72px) 0; border-top:1px solid var(--stk-line); }

    

    @media (max-width:760px){
      .stk-stats{ gap:26px 40px; }
      .reading-row{ flex-wrap:wrap; min-height:0; gap:8px; }
      .pbook-grid{ grid-template-columns:repeat(2,1fr); gap:16px; }
      .screen{ aspect-ratio:auto; gap:26px; }
      .film-list, .recent-grid{ grid-template-columns:1fr; gap:0; }
      .recent-col + .recent-col{ margin-top:32px; }
    }