/* ============================================================
   PARCOURS · Reading — library + reader + word-marking
   ============================================================ */

/* ─── LIBRARY ──────────────────────────── */
.lib-filters{display:flex;flex-direction:column;gap:8px;margin:4px 0 18px}

.art-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.art-card{display:flex;flex-direction:column;min-height:150px}
.art-kicker{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);opacity:.85;margin-bottom:4px;
}
.art-topic{opacity:.78}
.art-min{opacity:.6}
.art-stamp{
  margin-left:auto;font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;
  padding:3px 8px;border-radius:6px;border:1px solid currentColor;
}
.art-stamp--reading{color:var(--amber)}

/* ─── READ ARTICLE · dimmed card + "bon à tirer" press stamp ─── */
/* Filed in the archive: the whole card (stamp included) goes monochrome,
   but the grayscale is re-tinted toward the warm cream/burgundy hue of the
   desk — a faded-newsprint duotone, never a flat neutral gray. */
.art-card--read{filter:grayscale(1) sepia(.42) saturate(1.7) hue-rotate(-12deg)}
.art-card--read .art-kicker,
.art-card--read .art-title,
.art-card--read .art-dek{opacity:.34;transition:opacity .2s}
.art-card--read::before{opacity:.2}                 /* mute the corner wash */
.art-card--read:hover{transform:none;box-shadow:none;border-color:var(--line)}
.art-card--read:hover .art-kicker,
.art-card--read:hover .art-title,
.art-card--read:hover .art-dek{opacity:.6}          /* peek through on hover */
.art-readstamp{
  position:absolute;z-index:3;
  top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(-7deg);
  font-family:var(--mono);font-weight:600;
  font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--burgundy);
  border:2.5px solid var(--burgundy);border-radius:9px;
  padding:7px 15px;
  background:rgba(251,247,239,.42);
  box-shadow:inset 0 0 0 1px rgba(139,35,49,.18);
  opacity:.9;pointer-events:none;white-space:nowrap;
}
.art-readstamp span{font-weight:700;letter-spacing:.1em}
.art-title{
  font-family:var(--serif-display);font-weight:700;font-size:1.5rem;line-height:1.12;
  letter-spacing:-.3px;margin:6px 0 8px;color:var(--ink);
}
.art-dek{font-family:var(--serif-lit);font-size:1.06rem;line-height:1.4;color:var(--ink-soft);opacity:.92;margin-top:auto}

/* ─── READER ───────────────────────────── */
.reader{max-width:var(--read-measure);margin:0 auto}
.reader-back{
  display:inline-block;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;opacity:.8;margin-bottom:18px;
}
.reader-back:hover{color:var(--burgundy)}

.reader-head{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:26px}
.reader-title{
  font-family:var(--serif-display);font-weight:800;font-size:clamp(2rem,5.4vw,3rem);
  line-height:1.08;letter-spacing:-.6px;margin:12px 0 12px;color:var(--ink);
}
.reader-trans{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);opacity:.62;margin:-4px 0 14px}
.reader-dek{font-family:var(--serif-lit);font-style:italic;font-size:1.3rem;line-height:1.45;color:var(--ink-soft);margin:0 0 16px}
.reader-byline{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);opacity:.7}

.reader-body{color:var(--ink)}
.reader-p{
  font-family:var(--serif-lit);font-weight:500;font-size:1.3rem;line-height:1.78;
  margin:0 0 1.15em;
}
/* drop-cap on the opening paragraph — a newspaper flourish */
.reader-body > .reader-p:first-of-type::first-letter{
  font-family:var(--serif-display);font-weight:700;float:left;
  font-size:3.4em;line-height:.72;padding:8px 12px 0 0;color:var(--burgundy);
}
.reader-h{
  font-family:var(--serif-display);font-weight:700;font-size:1.5rem;line-height:1.2;
  margin:1.5em 0 .5em;color:var(--ink);letter-spacing:-.2px;
}

/* tappable words + the kept-word "highlighter" mark */
.w{cursor:pointer;border-radius:3px;transition:background .15s, box-shadow .15s;-webkit-tap-highlight-color:transparent}
.w:hover{background:rgba(200,155,74,.20)}
.w.marked{
  background:linear-gradient(transparent 60%, rgba(200,155,74,.48) 0);
  box-shadow:inset 0 -1px 0 rgba(176,108,46,.5);
}
.w.marked:hover{background:linear-gradient(transparent 55%, rgba(200,155,74,.65) 0)}

.reader-note{
  font-family:var(--serif-lit);font-style:italic;font-size:1rem;color:var(--ink-soft);opacity:.78;
  border-top:1px solid var(--line);margin-top:28px;padding-top:16px;text-align:center;
}
.reader-note .lbl-orn{color:var(--burgundy);font-style:normal;margin-right:6px}
.reader-note a{color:var(--burgundy);text-decoration:none;border-bottom:1px solid currentColor}

.read-actions{display:flex;justify-content:center;margin:26px 0 10px}
.read-mark{min-width:240px}
.read-done{display:flex;flex-direction:column;align-items:center;gap:12px}
.read-done-stamp{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--burgundy);border:2px solid var(--burgundy);border-radius:8px;
  padding:8px 16px;transform:rotate(-2.5deg);opacity:.85;
}

/* ─── KEEP-A-WORD · centred modal w/ full-page blur ───────── */
.sheet-backdrop{
  position:fixed;inset:0;z-index:140;background:rgba(26,31,46,.40);
  opacity:0;transition:opacity .24s;
  backdrop-filter:blur(7px) saturate(1.1);
  -webkit-backdrop-filter:blur(7px) saturate(1.1);
}
.sheet-backdrop.show{opacity:1}
.sheet{
  position:fixed;left:50%;top:50%;z-index:150;
  width:min(92vw,460px);
  background:var(--paper);border:1px solid var(--line);
  border-radius:18px;
  padding:24px 24px 26px;
  box-shadow:0 30px 90px -34px rgba(26,31,46,.65);
  transform:translate(-50%,-46%) scale(.98);opacity:0;
  transition:transform .24s cubic-bezier(.2,.7,.25,1), opacity .22s ease;
}
.sheet.show{transform:translate(-50%,-50%) scale(1);opacity:1}
.sheet-eyebrow{font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--burgundy);opacity:.85}
.sheet-word{font-family:var(--serif-lit);font-style:italic;font-weight:600;font-size:2.2rem;line-height:1.1;color:var(--ink);margin:4px 0 10px}
.sheet-sentence{font-family:var(--serif-lit);font-size:1.12rem;line-height:1.5;color:var(--ink-soft);margin-bottom:16px}
.sheet-sentence em{font-style:italic;color:var(--burgundy);font-weight:600}
.sheet-note-label{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);opacity:.75;margin-bottom:6px}
.sheet-note-label span{opacity:.6;text-transform:none;letter-spacing:0;font-style:italic;font-family:var(--serif-lit)}
.sheet-note{
  width:100%;font-family:var(--serif-lit);font-size:1.1rem;color:var(--ink);
  border:1.5px solid var(--line);border-radius:12px;background:var(--cream);padding:11px 14px;resize:none;
}
.sheet-note:focus{outline:none;border-color:var(--burgundy);background:#fff}
.sheet-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.sheet-actions .btn-primary,.sheet-actions .btn-ghost{flex:0 1 auto}

/* ─── RESPONSIVE ───────────────────────── */
@media(max-width:540px){
  .art-grid{grid-template-columns:1fr;gap:12px}
  .art-card{min-height:0}
  .art-title{font-size:1.35rem}
  .reader-p{font-size:1.2rem;line-height:1.72}
  .reader-dek{font-size:1.16rem}
  .sheet-word{font-size:1.9rem}
}