/* ============================================================
   ink.css — the Ink & Scroll layer.

   Everything here is the look: generated artwork, brush rules,
   seals, washed surfaces, and the speaking instruments that came
   with the rebuilt audio engine.
   ============================================================ */

/* ============================================================
   1. Generated artwork
   ============================================================ */
.art{display:block;width:100%;height:auto}

.art-glyph{
  font-family:var(--han);font-size:104px;font-weight:600;
  fill:var(--art-ink);opacity:.12;
}
.art-glyph.sm{font-size:56px;opacity:.15}

/* mist drifts very slowly; lanterns sway; windows flicker */
@keyframes drift{
  0%{transform:translateX(-4%)}
  50%{transform:translateX(5%)}
  100%{transform:translateX(-4%)}
}
.a-drift{animation:drift 34s ease-in-out infinite}
@keyframes sway{
  0%,100%{transform:translateY(0) rotate(-1.4deg)}
  50%{transform:translateY(2px) rotate(1.6deg)}
}
.a-sway{animation:sway 5.5s ease-in-out infinite;transform-origin:center top}
@keyframes flick{
  0%,92%,100%{opacity:.85}
  94%{opacity:.25}
  96%{opacity:.9}
}
.a-flicker{animation:flick 7s steps(1,end) infinite}

/* the hero band behind a page title */
.page-hd{position:relative;overflow:hidden;border-radius:var(--radius-lg);isolation:isolate}
.page-hd.has-art{
  padding:30px 32px 26px;margin-bottom:24px;
  border:1px solid var(--border);
  background:var(--bg-elev);
  box-shadow:var(--shadow-1);
}
.hero-art{
  position:absolute;inset:0;z-index:-1;
  -webkit-mask-image:linear-gradient(95deg,transparent 2%,rgba(0,0,0,.6) 26%,rgba(0,0,0,1) 52%);
  mask-image:linear-gradient(95deg,transparent 2%,rgba(0,0,0,.6) 26%,rgba(0,0,0,1) 52%);
}
.hero-art .art-hero{height:100%;width:100%}
/* a paper wash under the words only — the right-hand third stays open */
.page-hd.has-art::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(95deg,
    color-mix(in srgb,var(--bg-elev) 97%,transparent) 0%,
    color-mix(in srgb,var(--bg-elev) 93%,transparent) 34%,
    color-mix(in srgb,var(--bg-elev) 26%,transparent) 58%,
    transparent 74%);
}
.page-hd.has-art h1{max-width:24ch;position:relative}
.page-hd.has-art p{max-width:58ch;position:relative}
.page-hd.has-art .crumb,.page-hd.has-art .eyebrow{position:relative}

/* brush rule used as a divider */
.art-rule{height:11px;opacity:.55;margin:18px 0}
.brush-rule{
  height:10px;margin:16px 0;border:0;
  background:
    radial-gradient(60% 100% at 8% 50%, color-mix(in srgb,var(--text) 34%,transparent), transparent 70%),
    radial-gradient(70% 100% at 46% 50%, color-mix(in srgb,var(--text) 26%,transparent), transparent 72%),
    radial-gradient(50% 100% at 88% 50%, color-mix(in srgb,var(--text) 18%,transparent), transparent 70%);
  opacity:.55;
}

/* the seal stamp */
.art-seal{flex-shrink:0;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
.art-seal .seal-ch{font-family:var(--han);fill:var(--art-paper);font-weight:600}
.seal-badge{
  position:absolute;top:16px;right:18px;opacity:.9;transform:rotate(-6deg);
  pointer-events:none;
}

/* decorative character block */
.art-glyphart{width:100%;max-width:170px}
.glyph-big{font-family:var(--han);font-size:106px;fill:var(--text);opacity:.88;font-weight:600}

/* ink ring for progress */
.art-ring .ring-track{fill:none;stroke:var(--bg-sunk);stroke-width:9}
.art-ring .ring-val{fill:none;stroke:var(--seal);stroke-width:9;stroke-linecap:round;
  transition:stroke-dashoffset .7s cubic-bezier(.2,.8,.3,1)}

/* tone glyphs */
.art-tone.t1{color:var(--tone1)}
.art-tone.t2{color:var(--tone2)}
.art-tone.t3{color:var(--tone3)}
.art-tone.t4{color:var(--tone4)}
.art-tone.t5{color:var(--tone5)}

/* ============================================================
   2. Surfaces re-cut as paper
   ============================================================ */
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
  position:relative;
}
.card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--seal) 22%,transparent) 30%,color-mix(in srgb,var(--seal) 10%,transparent) 70%,transparent);
  opacity:0;transition:opacity .2s;border-radius:2px 0 0 2px;
}
.card:hover::before{opacity:.8}

/* a thin ink edge under every scene */
.art-scene{border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent)}

/* lesson rows get a small scene chip */
.les-art{
  width:86px;height:58px;border-radius:9px;overflow:hidden;flex-shrink:0;
  border:1px solid var(--border);
}
.les-art .art-scene{height:100%;border:0;width:100%}

/* ============================================================
   3. The speaking instruments
   ============================================================ */
.setup-card{margin-bottom:18px}
.cap-list{display:grid;gap:9px;margin-top:4px}
.cap{display:flex;gap:10px;align-items:flex-start}
.cap > div{display:flex;flex-direction:column;line-height:1.45}
.cap b{font-size:.9rem;font-weight:650}
.cap .cap-dot{
  width:21px;height:21px;border-radius:50%;display:grid;place-items:center;
  font-size:.74rem;font-weight:800;flex-shrink:0;margin-top:2px;
}
.cap.ok .cap-dot{background:var(--ok-soft);color:var(--ok)}
.cap.no .cap-dot{background:var(--warn-soft);color:var(--warn)}

.serve-note{
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:10px 13px;background:var(--bg-sunk);
}
.serve-note summary{cursor:pointer;font-weight:640;font-size:.9rem}
.serve-note summary::marker{color:var(--seal)}
.serve-note p{margin:.7em 0}
.cmd{
  display:flex;align-items:center;gap:10px;justify-content:space-between;
  background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:8px 10px;margin:.4em 0;
}
.cmd code{font-size:.88rem;color:var(--accent-ink);word-break:break-all}

.slim-note{margin-bottom:16px}
.slim-note > summary{
  cursor:pointer;font-size:.88rem;color:var(--warn);font-weight:640;
  padding:9px 12px;border:1px dashed color-mix(in srgb,var(--warn) 45%,transparent);
  border-radius:var(--radius-sm);background:var(--warn-soft);
}
.slim-note[open] > summary{margin-bottom:12px}

/* say cards */
.say-card{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:15px 17px;box-shadow:var(--shadow-1);position:relative;
}
.say-card.ask{background:var(--bg-sunk)}
.say-py{color:var(--seal);font-weight:600;letter-spacing:.01em;margin-top:2px}
.say-row{flex-wrap:wrap;gap:7px}
.say-result{min-height:22px;color:var(--text-2)}
.say-audio{width:100%;margin-top:11px;height:36px}
.say-extra:not(:empty){margin-top:10px}

.btn.is-rec{
  background:var(--seal) !important;color:#fdf7ec !important;border-color:var(--seal) !important;
  animation:recpulse 1.5s ease-in-out infinite;
}
@keyframes recpulse{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--seal) 45%,transparent)}
  60%{box-shadow:0 0 0 7px transparent}
}
.btn.on{background:var(--accent-soft);border-color:var(--seal);color:var(--accent-ink)}

.ft-timer{font-family:var(--mono);font-size:1.5rem;font-weight:600;color:var(--seal)}
.check-list{list-style:none;padding:0}
.check-list li{margin:.3em 0}
.switch.inline{display:inline-flex;align-items:center;gap:9px;cursor:pointer}

/* ---------- tone trace ---------- */
.tonetrace{
  margin-top:12px;padding:14px;border-radius:var(--radius);
  background:var(--bg-sunk);border:1px solid var(--border);
}
.tt-svg{
  width:100%;height:132px;display:block;border-radius:var(--radius-sm);
  background:
    linear-gradient(180deg, color-mix(in srgb,var(--bg-elev) 90%,transparent), color-mix(in srgb,var(--bg-elev) 70%,transparent));
  border:1px solid var(--border);
}
.tt-staff{stroke:var(--border-strong);stroke-width:1;stroke-dasharray:3 5;opacity:.7}
.tt-staff.mid{stroke-dasharray:none;opacity:.35}
.tt-div{stroke:var(--border);stroke-width:1;opacity:.6}
.tt-target{
  fill:none;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;opacity:.42;
}
.tt-target.t1{stroke:var(--tone1)}
.tt-target.t2{stroke:var(--tone2)}
.tt-target.t3{stroke:var(--tone3)}
.tt-target.t4{stroke:var(--tone4)}
.tt-target.t5{stroke:var(--tone5)}
.tt-user{
  fill:none;stroke:var(--text);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  opacity:.92;filter:drop-shadow(0 1px 1px rgba(0,0,0,.15));
}
.tt-live{fill:var(--seal);opacity:.9}
.tt-syl{font-family:var(--han);font-size:13px;fill:var(--text-3);text-anchor:middle}

.tt-meter{
  height:6px;border-radius:3px;background:var(--bg-elev);border:1px solid var(--border);
  overflow:hidden;margin-top:9px;
}
.tt-meter i{display:block;height:100%;width:0;background:var(--seal);transition:width .08s linear}
.tt-status{margin-top:8px;min-height:20px}
.tt-row{flex-wrap:wrap;gap:7px}
.tt-audio{width:100%;margin-top:10px;height:34px}

.tt-marks{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.tt-mark{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:5px 9px;border-radius:8px;border:1px solid var(--border);background:var(--bg-elev);
  min-width:56px;
}
.tt-mark b{font-family:var(--han);font-size:1.15rem;line-height:1.1}
.tt-mark i{font-style:normal;font-size:.68rem;color:var(--text-3)}
.tt-mark u{text-decoration:none;font-size:.72rem;font-weight:700}
.tt-mark.ok{border-color:color-mix(in srgb,var(--ok) 50%,transparent);background:var(--ok-soft)}
.tt-mark.ok u{color:var(--ok)}
.tt-mark.warn{border-color:color-mix(in srgb,var(--warn) 50%,transparent);background:var(--warn-soft)}
.tt-mark.warn u{color:var(--warn)}
.tt-mark.bad{border-color:color-mix(in srgb,var(--bad) 50%,transparent);background:var(--bad-soft)}
.tt-mark.bad u{color:var(--bad)}
.tt-mark.na u{color:var(--text-3)}

.tt-legend{display:flex;gap:16px;margin-top:9px;flex-wrap:wrap}
.tt-legend span{display:inline-flex;align-items:center;gap:6px}
.tt-legend .k{width:18px;height:3px;border-radius:2px;display:inline-block}
.tt-legend .k.target{background:var(--tone2);opacity:.5}
.tt-legend .k.user{background:var(--text)}

/* status colours used across the speaking views */
.ok-text{color:var(--ok)}
.warn-text{color:var(--warn)}
.bad-text{color:var(--bad)}

/* ============================================================
   4. Typographic flourishes
   ============================================================ */
.eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;font-weight:700;
  color:var(--seal);margin-bottom:6px;
}
.eyebrow::before{
  content:"";width:22px;height:2px;border-radius:2px;background:var(--seal);opacity:.6;
}
.zh{font-family:var(--han)}
.zh-lg{font-size:1.62rem;line-height:1.55;letter-spacing:.02em}

/* a hanging seal-red quote mark on notes */
.note{
  border-radius:var(--radius-sm);padding:11px 14px;border:1px solid var(--border);
  background:var(--bg-sunk);position:relative;
}
.note.info{background:var(--info-soft);border-color:color-mix(in srgb,var(--info) 32%,transparent)}
.note.ok{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 32%,transparent)}
.note.warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 32%,transparent)}
.note.bad{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 32%,transparent)}

/* level chips carry their own hue */
.chip.lv1{background:color-mix(in srgb,var(--lvl1) 15%,transparent);color:var(--lvl1);border-color:color-mix(in srgb,var(--lvl1) 35%,transparent)}
.chip.lv2{background:color-mix(in srgb,var(--lvl2) 15%,transparent);color:var(--lvl2);border-color:color-mix(in srgb,var(--lvl2) 35%,transparent)}
.chip.lv3{background:color-mix(in srgb,var(--lvl3) 15%,transparent);color:var(--lvl3);border-color:color-mix(in srgb,var(--lvl3) 35%,transparent)}

/* ============================================================
   5. The dashboard scroll
   ============================================================ */
.hero{
  background:var(--bg-elev) !important;
  color:var(--text) !important;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:34px 34px 30px !important;
  position:relative;overflow:hidden;isolation:isolate;
  box-shadow:var(--shadow-2);
}
.hero .hero-art{
  position:absolute;inset:0;z-index:-1;
  -webkit-mask-image:linear-gradient(100deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.7) 38%,rgba(0,0,0,1) 72%);
  mask-image:linear-gradient(100deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.7) 38%,rgba(0,0,0,1) 72%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,
    color-mix(in srgb,var(--bg-elev) 96%,transparent) 0%,
    color-mix(in srgb,var(--bg-elev) 90%,transparent) 40%,
    color-mix(in srgb,var(--bg-elev) 24%,transparent) 68%,
    transparent 86%);
}
.hero h1{
  color:var(--text) !important;margin:0 0 6px !important;
  font-family:var(--serif);font-size:2.1rem !important;letter-spacing:-.02em;
}
.hero p{color:var(--text-2) !important;max-width:52ch;position:relative}
.hero .chip{
  background:var(--accent-soft) !important;color:var(--accent-ink) !important;
  border:1px solid color-mix(in srgb,var(--seal) 30%,transparent);
}
html[data-theme="dark"] .hero .chip{color:var(--accent) !important}
.hero .hero-actions{position:relative;z-index:1}
.hero .btn{background:var(--seal);color:#fdf7ec;border-color:var(--seal)}
.hero .btn:hover{background:var(--seal-deep);border-color:var(--seal-deep)}
html[data-theme="dark"] .hero .btn:hover{background:var(--accent-2);border-color:var(--accent-2)}
.hero .btn.outline{
  background:color-mix(in srgb,var(--bg-elev) 70%,transparent);
  color:var(--text);border-color:var(--border-strong);
  backdrop-filter:blur(3px);
}
.hero .btn.outline:hover{background:var(--bg-sunk)}

/* lesson rows now carry a thumbnail */
.lesson-row{gap:13px !important;padding:9px 11px !important;border-radius:11px !important}
.lesson-row .les-art{transition:transform .25s}
.lesson-row:hover .les-art{transform:scale(1.04)}
.lesson-row .lr-body b{font-size:.92rem}
.lesson-row.current{background:var(--accent-soft)}
.lesson-row.current .lr-dot{border-color:var(--seal);color:var(--seal);background:var(--bg-elev)}
.lesson-row.done .lr-dot{background:var(--ok);border-color:var(--ok);color:#fff}

@media (max-width:640px){
  .lesson-row .les-art{display:none}
  .hero{padding:24px 20px !important}
  .hero h1{font-size:1.55rem !important}
  .page-hd.has-art{padding:22px 20px 20px}
}

/* dark mode: ink on black silk — deepen the artwork */
html[data-theme="dark"] .art-glyph{fill:var(--text);opacity:.10}
html[data-theme="dark"] .hero-art{
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,1));
  mask-image:linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,1));
}
html[data-theme="dark"] .story-card:hover{box-shadow:0 10px 34px rgba(0,0,0,.6)}

/* the painter's inscription down the right edge of a hero */
.art-col-ch{
  font-family:var(--han);font-size:19px;font-weight:600;
  fill:var(--art-ink);opacity:.30;
}
html[data-theme="dark"] .art-col-ch{fill:var(--text);opacity:.22}

/* ============================================================
   6. Photography
   ============================================================ */
.ph{
  position:relative;overflow:hidden;display:block;width:100%;height:100%;
  background:var(--bg-sunk);
}
.ph-fallback{
  position:absolute;inset:0;width:100%;height:100%;
  transition:opacity .45s ease;
}
.ph-img{
  position:relative;z-index:1;display:block;width:100%;height:100%;
  object-fit:cover;opacity:0;transform:scale(1.02);
  transition:opacity .55s ease, transform .55s ease;
}
.ph.is-loaded .ph-img{opacity:1;transform:none}
.ph.is-loaded .ph-fallback{opacity:0}
.ph-hero,.ph-hero .ph-img,.ph-hero .ph-fallback{height:100%}

/* ---------- picture cards ---------- */
.media-card{
  position:relative;display:flex;flex-direction:column;cursor:pointer;
  border-radius:var(--radius-lg);overflow:hidden;
  background:var(--panel);border:1px solid var(--border);
  box-shadow:var(--shadow-1);
  transition:transform .24s cubic-bezier(.2,.7,.3,1), box-shadow .24s, border-color .24s;
}
.media-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--border-strong)}
.mc-media{position:relative;height:168px;overflow:hidden;background:var(--bg-sunk)}
.mc-media .ph{height:100%}
.mc-media .ph-img{transition:transform .65s cubic-bezier(.2,.7,.3,1), opacity .55s}
.media-card:hover .mc-media .ph-img{transform:scale(1.06)}
.mc-scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,10,8,.46) 0%,rgba(12,10,8,.04) 34%,rgba(12,10,8,.70) 100%);
}
.mc-glyph{
  position:absolute;z-index:3;right:14px;top:8px;
  font-size:50px;font-weight:600;color:#fff;opacity:.42;line-height:1;
  text-shadow:0 2px 14px rgba(0,0,0,.5);pointer-events:none;
}
.mc-zh{
  position:absolute;z-index:3;left:16px;bottom:12px;color:#fff;line-height:1.2;
  text-shadow:0 1px 10px rgba(0,0,0,.65);
}
.mc-zh b{display:block;font-size:1.34rem;font-weight:600;letter-spacing:.02em}
.mc-zh span{font-size:.76rem;opacity:.82}
.mc-badge{position:absolute;z-index:3;left:14px;top:12px}
.media-card.is-done .mc-media::after{
  content:"✓";position:absolute;z-index:4;right:12px;bottom:10px;
  width:24px;height:24px;border-radius:50%;background:var(--ok);color:#fff;
  display:grid;place-items:center;font-size:.8rem;font-weight:800;
}
.mc-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.mc-body > b{font-family:var(--serif);font-size:1.06rem;font-weight:600;line-height:1.3}
.mc-sub{color:var(--text-2);font-size:.85rem;line-height:1.45}
.mc-chips{margin-top:auto;padding-top:9px;gap:6px;flex-wrap:wrap}

/* ---------- the character tiles ---------- */
.sec-hd{align-items:center;margin-bottom:12px}
.glyph-row{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
}
.glyph-card{
  position:relative;aspect-ratio:3/4;min-height:230px;cursor:pointer;
  border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--shadow-1);
  background:var(--bg-sunk);
  transition:transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .26s;
}
.glyph-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-3)}
.gc-media,.glyph-card .ph{position:absolute;inset:0;width:100%;height:100%}
.glyph-card .ph-img{transition:transform .8s cubic-bezier(.2,.7,.3,1), opacity .55s}
.glyph-card:hover .ph-img{transform:scale(1.08)}
.gc-scrim{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(175deg,rgba(10,9,7,.52) 0%,rgba(10,9,7,.34) 34%,rgba(10,9,7,.90) 100%);
}
.gc-body{position:absolute;z-index:3;left:18px;top:16px;right:16px;color:#fff}
.gc-ch{
  display:block;font-size:3.1rem;line-height:1;font-weight:600;
  text-shadow:0 3px 20px rgba(0,0,0,.6);
}
.gc-py{display:block;margin-top:8px;font-size:1rem;color:#f3d9a8;font-weight:600;letter-spacing:.02em}
.gc-en{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:.84rem;opacity:.82;margin-top:2px;line-height:1.35;
}
.gc-seal{position:absolute;z-index:4;right:14px;bottom:56px;opacity:.92;transform:rotate(-5deg)}
.gc-foot{
  position:absolute;z-index:4;left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:11px 16px;font-size:.8rem;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(8,7,6,.72));
}
.gc-foot > span:first-child{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.9;font-weight:500;
}
.gc-arrow{transition:transform .22s;flex-shrink:0;font-size:1rem}
.glyph-card:hover .gc-arrow{transform:translateX(4px)}

/* the lesson-row thumbnail is now a photo too */
.les-art{
  width:86px;height:58px;border-radius:9px;overflow:hidden;flex-shrink:0;
  border:1px solid var(--border);position:relative;
}
.les-art .ph{height:100%}

/* the old generated-scene cards, kept for anything not yet converted */
.story-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}

@media (max-width:640px){
  .glyph-row{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .gc-ch{font-size:2.8rem}
  .mc-media{height:150px}
}

/* ============================================================
   7. The scenery — a landscape behind the whole app
   ------------------------------------------------------------
   One fixed layer, veiled per theme so the painting reads as
   atmosphere. The veil thickens on reading pages (html.sc-quiet)
   and the surfaces above it turn translucent so the landscape
   shows between them.
   ============================================================ */

.scenery{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  contain:layout paint style;
}
.scenery .sc-art,
.scenery .sc-img,
.scenery .sc-veil,
.scenery .sc-hush{position:absolute;inset:0}

/* the generated ink landscape, always behind the photograph */
.scenery .sc-art{opacity:.5;transition:opacity .8s ease}
.scenery .sc-art svg{width:100%;height:100%;display:block}
.scenery.is-loaded .sc-art{opacity:0}

.scenery .sc-img{
  width:100%;height:100%;object-fit:cover;object-position:50% 40%;
  opacity:0;transition:opacity 1.1s cubic-bezier(.2,.7,.3,1);
  will-change:opacity;
}
.scenery.is-loaded .sc-img{opacity:var(--sc-strength,.45)}

/* the veil that makes text possible over a photograph */
.scenery .sc-veil{background:var(--sc-veil)}

/* the extra hush on reading pages */
.scenery .sc-hush{
  background:var(--bg);opacity:0;transition:opacity .45s ease;
}
html.sc-quiet .scenery .sc-hush{opacity:.72}

/* ---------- light: faint ink on rice paper ---------- */
:root{
  --sc-strength:.60;
  --sc-veil:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 20%, transparent) 0%,
      color-mix(in srgb, var(--bg) 54%, transparent) 42%,
      color-mix(in srgb, var(--bg) 76%, transparent) 100%),
    radial-gradient(1100px 480px at 10% -8%, color-mix(in srgb, var(--seal) 7%, transparent), transparent 62%);
}
.scenery .sc-img{filter:saturate(.62) contrast(1.02)}

/* ---------- dark: the mountain at dusk ---------- */
html[data-theme="dark"]{
  --sc-strength:.95;
  --sc-veil:
    linear-gradient(180deg,
      rgba(9,8,7,.12) 0%,
      rgba(9,8,7,.42) 46%,
      rgba(9,8,7,.66) 100%),
    radial-gradient(1200px 520px at 14% -10%, color-mix(in srgb, var(--seal) 18%, transparent), transparent 64%),
    radial-gradient(900px 420px at 88% 2%, rgba(120,150,175,.08), transparent 60%);
}
html[data-theme="dark"] .scenery .sc-img{filter:brightness(.78) saturate(.92) contrast(1.04)}
html[data-theme="dark"] .scenery .sc-art{opacity:.62}

/* ---------- surfaces float over it ---------- */
body.has-scenery{
  --panel:color-mix(in srgb, var(--bg-elev) 84%, transparent);
}
html[data-theme="dark"] body.has-scenery{
  --panel:color-mix(in srgb, var(--bg-elev) 78%, transparent);
}
body.has-scenery .card,
body.has-scenery .stat{
  backdrop-filter:blur(9px) saturate(1.18);
  -webkit-backdrop-filter:blur(9px) saturate(1.18);
}
body.has-scenery .sidebar{
  background:color-mix(in srgb, var(--bg-elev) 76%, transparent);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
}
body.has-scenery .topbar{
  background:color-mix(in srgb, var(--bg-elev) 84%, transparent);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
}
/* the paper bloom would muddy the painting */
body.has-scenery::before{opacity:.35}

/* ---------- the picker in Settings ---------- */
.sc-label{display:block;font-size:.78rem;font-weight:650;color:var(--text-2);margin-bottom:3px}
.sc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px;margin-top:6px}
.sc-opt{
  position:relative;border:1px solid var(--border);border-radius:11px;overflow:hidden;
  cursor:pointer;background:var(--bg-sunk);padding:0;text-align:left;
  transition:border-color .15s,transform .15s,box-shadow .15s;
}
.sc-opt:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.sc-opt.is-on{border-color:var(--seal);box-shadow:0 0 0 2px color-mix(in srgb,var(--seal) 30%,transparent)}
.sc-opt .sc-thumb{display:block;width:100%;height:82px;object-fit:cover;background:var(--bg-sunk)}
.sc-opt .sc-none{
  height:82px;display:grid;place-items:center;font-family:var(--han);font-size:24px;color:var(--text-3);
  background:repeating-linear-gradient(45deg,var(--bg-sunk),var(--bg-sunk) 7px,var(--bg-elev) 7px,var(--bg-elev) 14px);
}
.sc-opt b{display:block;padding:7px 10px 2px;font-size:.82rem;font-weight:650}
.sc-opt span{display:block;padding:0 10px 9px;font-size:.72rem;color:var(--text-3);line-height:1.4}
.sc-opt .sc-tick{
  position:absolute;top:7px;right:7px;width:21px;height:21px;border-radius:50%;
  background:var(--seal);color:#fdf7ec;display:none;place-items:center;font-size:12px;font-weight:700;
}
.sc-opt.is-on .sc-tick{display:grid}

@media (prefers-reduced-motion:reduce){
  .scenery .sc-img,.scenery .sc-art,.scenery .sc-hush{transition:none}
}
@media print{.scenery{display:none}}

/* ============================================================
   8. Phones
   ------------------------------------------------------------
   Faults this fixes, all seen on a real handset at 390px:
     · lesson rows squeezed the title into a two-word column
       because the chips beside them refused to shrink
     · the header wash is a 95deg gradient that runs out before
       the right edge, so on a narrow screen the last third of
       every paragraph sat on bare artwork and went unreadable
     · the bottom bar was translucent enough to read the page
       through it
     · icon buttons sat under the rounded corner / home bar
   ============================================================ */

@media (max-width:720px){

  /* ---- lesson and unit rows stack instead of squeezing ---- */
  .lesson-row{
    flex-wrap:wrap;
    row-gap:9px;
    padding:13px 14px;
    align-items:flex-start;
  }
  .lesson-row .lr-dot{margin-top:1px}
  /* the dot is 26px and the gap 12px; the extra 14px of slack keeps
     sub-pixel rounding from pushing the body onto its own line */
  .lesson-row .lr-body{
    flex:1 1 calc(100% - 52px);
    min-width:0;
  }
  .lesson-row .lr-body b{
    font-size:.95rem;line-height:1.35;margin-bottom:2px;
    overflow-wrap:break-word;
  }
  .lesson-row .lr-body span{font-size:.8rem;line-height:1.5}
  /* the meta line: chips left, chevron pushed to the edge */
  .lesson-row .chip{margin-left:0;flex-shrink:0}
  .lesson-row > .chip:first-of-type{margin-left:38px}
  .lesson-row > .muted:last-child{margin-left:auto;align-self:center}

  .unit-hd{align-items:flex-start;padding:14px}
  .unit-hd .u-n{margin-top:1px}
  .unit-hd .u-title b{line-height:1.35}
  .unit-hd .u-title span{line-height:1.5;display:block;margin-top:2px}

  /* ---- the header wash covers the whole width, not two thirds ---- */
  .page-hd.has-art::after{
    background:linear-gradient(180deg,
      color-mix(in srgb,var(--bg-elev) 92%,transparent) 0%,
      color-mix(in srgb,var(--bg-elev) 95%,transparent) 62%,
      color-mix(in srgb,var(--bg-elev) 97%,transparent) 100%);
  }
  .page-hd.has-art h1,
  .page-hd.has-art p{max-width:none}
  .page-hd.has-art p{font-size:.92rem}
  .hero-art{
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,1),rgba(0,0,0,.55));
    mask-image:linear-gradient(180deg,rgba(0,0,0,1),rgba(0,0,0,.55));
  }
  .hero .hero-art{opacity:.9}

  /* ---- breathing room between the cards on a page ---- */
  .page > .card,
  .page > section.card{margin-bottom:16px}
  .page-hd.has-art{margin-bottom:18px}

  /* ---- the scenery must not read through the chrome ---- */
  .mobilebar{
    background:var(--bg-elev);
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  body.has-scenery .mobilebar{background:var(--bg-elev)}
  body.has-scenery .topbar{
    background:color-mix(in srgb, var(--bg-elev) 94%, transparent);
  }
}

/* ---- keep the chrome clear of notches and home bars ---- */
.topbar{
  padding-left:max(14px, env(safe-area-inset-left));
  padding-right:max(14px, env(safe-area-inset-right));
}
.topbar-right{gap:8px}
.topbar-right .icon-btn{flex-shrink:0}
.main{
  padding-left:max(30px, env(safe-area-inset-left));
  padding-right:max(30px, env(safe-area-inset-right));
}

@media (max-width:1020px){
  .main{
    padding-left:max(16px, env(safe-area-inset-left));
    padding-right:max(16px, env(safe-area-inset-right));
  }
}

@media (max-width:720px){
  .topbar{
    gap:8px;
    padding-left:max(12px, env(safe-area-inset-left));
    padding-right:max(12px, env(safe-area-inset-right));
  }
  /* the search box was eating the row; the icons come first */
  .topbar-search{margin:0 0 0 auto;max-width:none;min-width:0}
  .topbar-right{gap:4px}
  .main{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}