/* ═══ QUOTE SPLASH ═══ */
  .lesson-content { transition:filter 0.6s ease; }
  .lesson-content.blurred {
    filter:blur(12px) sepia(0.25) brightness(0.85);
    pointer-events:none;
    user-select:none;
    max-height:100vh;
    overflow:hidden;
  }
  /* Ink soaking into paper */
  .lesson-content.ink-reveal { animation:inkSoak 1.15s ease both; }
  @keyframes inkSoak {
    0%   { filter:blur(12px) sepia(0.3) brightness(1.12); opacity:0.35; }
    55%  { filter:blur(4px) sepia(0.12) brightness(1.04); opacity:0.8; }
    100% { filter:blur(0) sepia(0) brightness(1); opacity:1; }
  }

  .quote-splash {
    position:fixed; inset:0; z-index:90;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:32px 28px;
    background:
      radial-gradient(circle at 78% 18%, rgba(239,123,46,0.16) 0%, transparent 45%),
      radial-gradient(circle at 18% 85%, rgba(201,168,76,0.10) 0%, transparent 50%),
      #12100d;
    animation:lbIn 0.4s ease both;
    overflow:hidden;
  }

  .quote-splash::before { content:none; }

  /* Corner artwork (quill / candle) */
  .corner-art {
    position:absolute;
    pointer-events:none;
    z-index:1;
    animation:artFade 1.8s ease both 0.6s;
  }
  .corner-art svg { display:block; overflow:visible; }
  @keyframes artFade {
    from { opacity:0; transform:translateY(16px); }
    to   { opacity:1; transform:translateY(0); }
  }

  .corner-quill {
    right:6px; bottom:-16px;
    opacity:0.55;
    filter:drop-shadow(0 0 22px rgba(239,123,46,0.22));
  }

  .qs-inner {
    max-width:360px;
    text-align:center;
    animation:fadeUp 0.6s 0.15s ease both;
    margin-bottom:9vh;
    position:relative;
    z-index:2;
  }

  .qs-eyebrow {
    font-size:9px; letter-spacing:0.34em; text-transform:uppercase;
    color:var(--gold-dim);
    margin-bottom:56px;
  }

  .qs-mark {
    display:flex;
    justify-content:center;
    color:var(--orange);
    line-height:0;
    margin-bottom:-4px;
    filter:
      drop-shadow(0 0 9px rgba(239,123,46,0.6))
      drop-shadow(0 0 24px rgba(239,123,46,0.3));
    animation:markGlow 1.6s ease both 0.3s;
  }
  .qs-mark svg { display:block; }
  @keyframes markGlow {
    from { opacity:0; transform:translateY(6px); }
    to   { opacity:1; transform:translateY(0); }
  }

  .qs-text {
    font-family:'Forum', serif;
    font-style:normal;
    font-size:22px;
    font-weight:300;
    color:var(--cream);
    --lead:1.55em;              /* one uniform line box for the whole quote */
    --xt:0.48em;                /* x-height of Forum, for optical gap maths */
    line-height:var(--lead);
    margin-top:2px;
    margin-bottom:20px;
    position:relative;
  }
  .qs-inner.lines-5 .qs-text { font-size:19px; }
  .qs-inner.lines-6 .qs-text { font-size:17px; }

  /* a typeset line: sits above the calligraphy, with a soft halo so strokes
     passing behind the letters are gently shaded where they touch */
  .ql {
    display:block;
    position:relative;
    z-index:2;
    text-shadow:
      0 0 5px  rgba(24,15,7,0.95),
      0 0 11px rgba(24,15,7,0.78),
      0 0 20px rgba(24,15,7,0.5);
  }

  /* the calligraphy line: occupies exactly one line box in the layout,
     while the artwork is free to scale up and overlap its neighbours */
  /* The calligraphy line.

     Layout: it occupies exactly one line box, so the base rhythm of the quote
     never changes.  Optically: the artwork is shifted so that the band of its
     lowercase letters — not the bounding box of its flourishes — sits on the
     centre of that line box.  Without this, a phrase with long descenders
     floats high and its two neighbouring gaps read as unequal.

     --gt / --gb  multiply the gap above / below (1 = untouched)
     --sm         multiplies letter height for the days that asked for it   */
  .qc {
    display:block;
    position:relative;
    height:var(--lead);
    z-index:1;
    /* one unit of "interval" = the real optical gap between two letter bands */
    --clh0:calc(min(410px, 92vw) * 0.0378);
    --g0:calc((var(--lead) - var(--xt)) / 2 + (var(--lead) - var(--clh0)) / 2);
    margin-top:calc((var(--gt) - 1) * var(--g0) + (var(--sm) - 1) * var(--clh0) / 2);
    margin-bottom:calc((var(--gb) - 1) * var(--g0) + (var(--sm) - 1) * var(--clh0) / 2);
  }
  .qc > i {
    position:absolute;
    left:50%; top:50%;
    width:calc(min(410px, 92vw) * var(--wf) * var(--sm));
    transform:translate(calc(-50% - var(--ox)), calc(-50% - var(--oy)));
    background:linear-gradient(104deg,
      #f7e2c0 0%, #f3c68a 34%, #ef9a4e 68%, #e8752a 100%);
    -webkit-mask-image:var(--callig);
            mask-image:var(--callig);
    -webkit-mask-size:contain;  mask-size:contain;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center;
    filter:drop-shadow(0 0 15px rgba(239,123,46,0.24));
    animation:calligInk 1.4s ease both 0.55s;
  }
  @keyframes calligInk {
    from { opacity:0; }
    to   { opacity:1; }
  }


  .qs-author {
    font-size:10px; letter-spacing:0.20em; text-transform:uppercase;
    color:var(--muted);
    margin-bottom:74px;
  }

  .qs-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    /* the trailing letter-space of the last glyph would pull the label
       visually left, so the left padding carries one extra tracking unit */
    padding:15px 38px 15px calc(38px + 0.24em);
    line-height:1;
    background:linear-gradient(135deg, #c9892f 0%, var(--orange) 55%, #c9892f 100%);
    background-size:200% 100%;
    border:none; border-radius:14px;
    color:#0f0e0c;
    font-family:'Jost', sans-serif; font-size:11px; font-weight:500;
    letter-spacing:0.24em; text-transform:uppercase;
    white-space:nowrap;
    cursor:pointer;
    transition:all 0.28s ease;
    animation:fadeUp 0.6s 0.4s ease both;
  }
  .qs-btn:hover { background-position:100% 0; transform:translateY(-1px); }

  .qs-day {
    font-family:'Forum', serif;
    font-size:13px;
    color:var(--muted);
    font-style:italic;
    margin-top:16px;
    animation:fadeUp 0.6s 0.5s ease both;
  }