/* ==========================================================================
   reader.css — "Last Week" banner + full-screen letter reader
   Companion stylesheet to style.css. Assumes style.css is already loaded
   (relies on its :root custom properties — --wall, --ink, --ink-soft,
   --navy, --navy-soft, --hairline, --up, --down, --serif, --sans, --glass,
   --glass-brd, --glass-shadow). No :root block here on purpose.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. "Last Week" banner
   A companion to .label/.card/.dot (see index.html "Sample week" card).
   Same glass-card family, but reads as an inviting, clickable object —
   lift-on-hover, navy-soft border glow, and a "Read it" affordance.
   -------------------------------------------------------------------------- */
.label.lw-banner[hidden]{
  display:none;
}
.label.lw-banner{
  cursor:pointer;
  border:none;
  background:none;
  padding:0;
  text-align:left;
  font:inherit;
  color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.label.lw-banner .card{
  position:relative;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),
             box-shadow .3s,
             border-color .3s;
}
.label.lw-banner .dot{
  background:var(--navy-soft);
  transition:background .3s,transform .3s;
}
.label.lw-banner:hover .card,
.label.lw-banner:focus-visible .card{
  transform:translateY(-3px);
  border-color:rgba(58,77,112,.55);
  box-shadow:0 18px 40px rgba(20,20,20,.12),0 2px 6px rgba(20,20,20,.06);
}
.label.lw-banner:hover .dot,
.label.lw-banner:focus-visible .dot{
  background:var(--navy);
  transform:scale(1.15);
}
.label.lw-banner:focus-visible{
  outline:none;
}
.label.lw-banner:focus-visible .card{
  outline:2px solid var(--navy-soft);
  outline-offset:2px;
}

/* "→ Read it" affordance, appended after the card's existing lines */
.label.lw-banner .card .read-more{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:11px;
  font-family:var(--sans);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--navy-soft);
  transition:gap .25s,color .25s;
}
.label.lw-banner .card .read-more::after{
  content:"\2192"; /* → */
  display:inline-block;
  transition:transform .25s;
}
.label.lw-banner:hover .card .read-more,
.label.lw-banner:focus-visible .card .read-more{
  color:var(--navy);
  gap:9px;
}
.label.lw-banner:hover .card .read-more::after,
.label.lw-banner:focus-visible .card .read-more::after{
  transform:translateX(2px);
}

/* --------------------------------------------------------------------------
   2. Reader overlay — dim, blurred backdrop, flex-centered
   -------------------------------------------------------------------------- */
.reader-overlay{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(20,20,20,.6);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity .32s ease;
  perspective:1600px;
}
.reader-overlay[hidden]{
  display:none;
}
.reader-overlay.open{
  opacity:1;
}

/* --------------------------------------------------------------------------
   3. Reader paper — the centerpiece: a warm, printed letter page
   -------------------------------------------------------------------------- */
.reader-paper{
  position:relative;
  width:100%;
  max-width:660px;
  height:70vh;
  max-height:800px;
  min-height:420px;
  background:#fbf8f0;
  background-image:
    radial-gradient(ellipse 120% 60% at 15% 0%,rgba(255,255,255,.55),transparent 55%),
    radial-gradient(ellipse 90% 50% at 100% 100%,rgba(28,43,69,.03),transparent 60%),
    repeating-linear-gradient(0deg,rgba(20,20,20,.012) 0px,rgba(20,20,20,.012) 1px,transparent 1px,transparent 3px);
  border-radius:3px 8px 6px 4px/6px 4px 8px 3px;
  box-shadow:
    0 40px 90px rgba(20,20,20,.35),
    0 12px 28px rgba(20,20,20,.22),
    0 1px 0 rgba(255,255,255,.6) inset;
  transform:scale(.85);
  opacity:0;
  transition:transform .32s cubic-bezier(.2,.9,.3,1.15),opacity .32s ease;
  transform-style:preserve-3d;
  display:flex;
  flex-direction:column;
}
.reader-overlay.open .reader-paper{
  transform:scale(1);
  opacity:1;
}

/* --------------------------------------------------------------------------
   4. Close button
   -------------------------------------------------------------------------- */
.reader-close{
  position:absolute;
  top:14px;
  right:14px;
  z-index:5;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1px solid transparent;
  background:rgba(20,20,20,.04);
  color:var(--ink-soft);
  font-family:var(--sans);
  font-size:1.3rem;
  line-height:1;
  cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.reader-close:hover{
  background:rgba(164,31,47,.1);
  border-color:rgba(164,31,47,.25);
  color:var(--down);
  transform:rotate(90deg);
}
.reader-close:focus-visible{
  outline:2px solid var(--navy-soft);
  outline-offset:2px;
}

/* --------------------------------------------------------------------------
   5. Page content — the letter text itself
   Fixed height + overflow:hidden so the pagination engine can size text to
   fit exactly, no internal scrolling.
   -------------------------------------------------------------------------- */
.reader-page-content{
  flex:1 1 auto;
  overflow:hidden;
  padding:56px 60px 40px;
  font-family:var(--serif);
  font-size:1.02rem;
  line-height:1.85;
  color:var(--ink);
  transform:rotateY(0deg);
  opacity:1;
  transform-origin:left center;
  transition:transform .26s cubic-bezier(.4,.05,.2,1),opacity .26s ease;
  backface-visibility:hidden;
}
.reader-page-content p{margin:0 0 1em}
.reader-page-content p:last-child{margin-bottom:0}
.reader-page-content h1,
.reader-page-content h2,
.reader-page-content h3{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.25;
  margin:0 0 .6em;
}
.reader-page-content b,
.reader-page-content strong{color:var(--ink);font-weight:600}
.reader-page-content .up{color:var(--up)}
.reader-page-content .down{color:var(--down)}
.reader-page-content a{color:var(--navy-soft)}

/* Page-flip transition — brief 3D rotation + opacity dip, added by JS for
   ~200-300ms around a content swap, then removed. */
.reader-paper.flip-next .reader-page-content{
  transform:rotateY(-8deg);
  opacity:.4;
  transform-origin:right center;
}
.reader-paper.flip-prev .reader-page-content{
  transform:rotateY(8deg);
  opacity:.4;
  transform-origin:left center;
}

/* --------------------------------------------------------------------------
   6. Left / right click zones for page turning
   -------------------------------------------------------------------------- */
.reader-zone{
  position:absolute;
  top:0;
  bottom:0;
  width:38%;
  cursor:pointer;
  z-index:3;
  display:flex;
  align-items:center;
  background:transparent;
  transition:background .25s;
}
.reader-zone-left{
  left:0;
  justify-content:flex-start;
  background-image:linear-gradient(to right,rgba(20,20,20,.05),transparent 70%);
  opacity:0;
  transition:opacity .25s;
}
.reader-zone-right{
  right:0;
  justify-content:flex-end;
  background-image:linear-gradient(to left,rgba(20,20,20,.05),transparent 70%);
  opacity:0;
  transition:opacity .25s;
}
.reader-zone:hover{
  opacity:1;
}
.reader-zone::before{
  font-family:var(--serif);
  font-size:1.6rem;
  color:var(--ink-soft);
  opacity:0;
  transition:opacity .25s,transform .25s;
}
.reader-zone-left::before{
  content:"\2039"; /* ‹ */
  margin-left:14px;
  transform:translateX(4px);
}
.reader-zone-right::before{
  content:"\203A"; /* › */
  margin-right:14px;
  transform:translateX(-4px);
}
.reader-zone-left:hover::before,
.reader-zone-right:hover::before{
  opacity:.55;
  transform:translateX(0);
}

/* --------------------------------------------------------------------------
   7. Page indicator
   -------------------------------------------------------------------------- */
.reader-page-indicator{
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  z-index:4;
  font-family:var(--sans);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
  background:rgba(251,248,240,.85);
  padding:4px 12px;
  border-radius:99px;
  pointer-events:none;
}
.reader-page-indicator:empty{
  display:none;
}

/* --------------------------------------------------------------------------
   8. Mobile responsiveness
   -------------------------------------------------------------------------- */
@media(max-width:640px){
  .reader-overlay{padding:0;}
  .reader-paper{
    width:92vw;
    height:78vh;
    max-width:none;
    min-height:340px;
    border-radius:3px 6px 5px 3px/5px 3px 6px 3px;
  }
  .reader-page-content{
    padding:40px 26px 34px;
    font-size:.94rem;
    line-height:1.75;
  }
  .reader-close{
    top:8px;
    right:8px;
    width:40px;
    height:40px;
  }
  .reader-page-indicator{
    bottom:10px;
    font-size:.62rem;
    padding:4px 10px;
  }
  .reader-zone{width:35%;}
}

/* --------------------------------------------------------------------------
   9. Reduced motion
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .reader-overlay{transition:opacity .01ms linear;}
  .reader-paper{transition:opacity .01ms linear;transform:none !important;}
  .reader-overlay.open .reader-paper{transform:none;}
  .reader-page-content{transition:opacity .01ms linear;}
  .reader-paper.flip-next .reader-page-content,
  .reader-paper.flip-prev .reader-page-content{
    transform:none;
    opacity:.4;
  }
  .label.lw-banner .card,
  .label.lw-banner .dot,
  .label.lw-banner .card .read-more,
  .label.lw-banner .card .read-more::after,
  .reader-close,
  .reader-zone,
  .reader-zone-left,
  .reader-zone-right,
  .reader-zone::before{
    transition:none;
  }
}