/* =========================================================================
   Mnemosyne, and the memory she was never given — piece 04
   ========================================================================= */

/* ---------- page tuning -------------------------------------------------
   Values this page sets differently from css/mlfk.css, plus everything only
   this page uses. Kept explicit rather than folded into the shared file so no
   other page shifts by a pixel.
   --------------------------------------------------------------------- */
  .page { row-gap: clamp(2.6rem,6vw,4.2rem); }
  .band { padding: clamp(1.9rem,4.5vw,3rem) 0; }
  h1 { font-size: clamp(2.1rem,5.8vw,3.4rem); margin: 1.1rem 0 0; max-width: 20ch; }
  /* The title is remembered the way she remembers: it surfaces, starts to
     slip back into Lethe — and is saved by a fetch from the shelves. Each
     phrase almost arrives, dims toward forgetting, then returns crisp. */
  h1 span { display: inline-block; animation: refetch 2000ms cubic-bezier(.25,.6,.3,1) both; }
  h1 span:nth-child(2) { animation-delay: 340ms; }
  @keyframes refetch {
    0% { opacity:0;
    filter:blur(6px);
    } 30% { opacity:0.85;
    filter:blur(1px);
    } 55% { opacity:0.2;
    filter:blur(4px);
    } 100% { opacity:1;
    filter:blur(0);
    };
  }
  .lede { margin-top: 1.2rem; }
  .whofor { margin-top: 1.4rem; }
  .whofor a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-border); }
  .whofor a:hover { color: var(--gold-hover); }
  strong { font-weight: 600; color: inherit; }
  .sec { column-gap: 2.4rem; }
  .step { padding-top: 0.55rem; font-size: 0.64rem; letter-spacing: 0.2em; color: var(--info); }
@media (max-width:840px) {
    .sec { grid-template-columns: 1fr; }
    .sec > *, .step { grid-column: 1; }
}
  .hint { color: var(--gold); }
  .btn { font-size: 0.73rem; padding: 0.38rem 0.9rem; }
  .btn[aria-pressed="true"] {
    background: var(--text-primary);
    color: var(--bg-page);
    border-color: var(--text-primary);
  }
  .note { border-left: 2px solid var(--gold); margin: 1.4rem 0 0; font-size: 0.94rem; }
  .small { font-size: 0.88rem; color: var(--text-muted); max-width: 60ch; }
  table { border-collapse: collapse; width: 100%; font-size: 0.94rem; }
  td {
    border-bottom: 1px solid var(--border-subtle);
    padding: 0.6rem 0.4rem;
    vertical-align: top;
  }
  tr:last-child td { border-bottom: 0; }
  td:first-child { width: 46%; }
  td:last-child { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-muted); }
  .bigline { max-width: 26ch; }
  .seriesnav { font-size: 0.88rem; padding-top: 1.4rem; }
  .seriesnav a {
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px solid var(--gold-border);
  }
  a.eyebrow { text-decoration: none; color: var(--text-muted); }
  a.eyebrow:hover { color: var(--gold); }
  .seriesnav a:hover { color: var(--gold-hover); }
  footer { font-size: 0.78rem; }

/* ---------- the shelf map ---------------------------------------------- */
  .qrow { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 1rem; }
  .shelfmap { height: 360px; }
  .scrolltag {
    position: absolute;
    transform: translate(-50%,-50%);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    background: transparent;
    border: 1px solid var(--border-default);
    border-radius: 3px;
    padding: 0.18rem 0.42rem;
    white-space: nowrap;
    color: var(--text-secondary);
    transition: all 180ms ease;
    max-width: 46vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .scrolltag.near { background: var(--gold-subtle); border-color: var(--gold); color: var(--gold); }
  .qmark {
    position: absolute;
    transform: translate(-50%,-50%);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    background: var(--text-primary);
    color: var(--bg-page);
    border-radius: 3px;
    padding: 0.2rem 0.5rem;
    white-space: nowrap;
    max-width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 2;
  }
@media (max-width:640px) {
    .shelfmap { height: 420px; }
    .scrolltag { font-size: 0.62rem; padding: 0.14rem 0.3rem; }
}

/* ---------- the tearing ------------------------------------------------- */
  .pieces { display: flex; flex-direction: column; gap: 8px; margin: 1.1rem 0 0.9rem; }
  .piece {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
    border-radius: 3px;
    padding: 0.55rem 0.8rem;
    background: var(--bg-page);
    transition: all 180ms ease;
  }
  .piece.fetched { border-color: var(--gold); background: var(--gold-subtle); }
  .piece .plabel {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
  }
  .piece.fetched .plabel { color: var(--gold); }

/* ---------- the three fetches ------------------------------------------ */
  .thread {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 1.1rem 0 0.9rem;
    border-top: 1px solid var(--border-default);
    padding-top: 1.1rem;
    min-height: 8.5rem;
  }
  .pasted {
    font-size: 0.9rem;
    line-height: 1.55;
    border: 1px dashed var(--gold);
    border-radius: 3px;
    background: var(--gold-subtle);
    color: var(--text-secondary);
    padding: 0.55rem 0.8rem;
  }
  .pasted .plabel {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.12em;
    color: var(--gold);
    margin-bottom: 0.25rem;
  }
  .saidby { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--text-muted); display: block; margin-bottom: 0.2rem; }
  .youline, .echoline { margin: 0; font-size: 0.98rem; }
  .echoline { font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; }
  .cite {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--gold);
    border-bottom: 1px solid var(--gold-border);
  }
  .marginnote { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-muted); margin: 0; }