/* Content library (/learn) — server-rendered article + hub pages.
   Hybrid template set: .tpl-editorial (done), .tpl-cinema / .tpl-notebook (next).
   Token-pure to the ratified design system; warm watercolor paper, Playfair +
   Cormorant, terracotta/gold. See plans/2026-06-17_seo-content-library.md. */

:root{
  --terracotta:#d97757; --terracotta-deep:#b85e3f; --gold:#b8893b; --gold-deep:#8a640f;
  --green:#3d8f6c; --rose:#b85c4a; --ink:#241a12; --ink-soft:rgba(36,26,18,.66);
  --ink-faint:rgba(36,26,18,.44); --paper:#fffdf8; --paper-soft:#faf5ec; --paper-edge:#f3ead9;
  --rule:rgba(184,137,59,.30); --rule-soft:rgba(184,137,59,.16);
  --font-display:"Playfair Display",Georgia,serif; --font-gloss:"Cormorant Garamond",Georgia,serif;
  --font-ui:"Inter",system-ui,sans-serif; --font-mono:"JetBrains Mono",monospace; --font-hand:"Caveat",cursive;
}
*{box-sizing:border-box}
body.content-page{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-ui);
  line-height:1.6;-webkit-font-smoothing:antialiased}
.content-page .kicker{font-family:var(--font-mono);font-size:.62rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.16em;color:var(--gold-deep)}
.content-page a{color:var(--terracotta-deep)}

/* ── hero ── */
.tpl-editorial .hero{position:relative;height:62vh;min-height:440px;display:flex;align-items:flex-end;overflow:hidden}
.tpl-editorial .hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tpl-editorial .hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,14,8,.12) 0%,rgba(20,14,8,.05) 38%,rgba(28,18,10,.62) 100%)}
.tpl-editorial .hero__inner{position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto;
  padding:0 clamp(1.2rem,5vw,3rem) clamp(1.6rem,4vw,2.6rem)}
.hero__breadcrumb{display:flex;gap:.5rem;align-items:center;color:rgba(255,250,240,.82);
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1rem}
.hero__breadcrumb a{color:inherit;text-decoration:none;opacity:.85}
.hero__breadcrumb b{opacity:.55;font-weight:400}
.hero__title{font-family:var(--font-display);font-weight:700;color:#fffaf0;margin:0;
  font-size:clamp(2.2rem,6vw,4.1rem);line-height:1.04;text-shadow:0 2px 30px rgba(20,12,4,.45);max-width:16ch}
.hero__title em{font-style:italic;font-weight:600}
.hero__meta{display:flex;gap:1.1rem;align-items:center;margin-top:1rem;color:rgba(255,250,240,.9);font-size:.86rem}
.hero__meta .pill{padding:.2rem .7rem;border-radius:999px;background:rgba(255,250,240,.16);
  border:1px solid rgba(255,250,240,.3);font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase}

/* ── article body ── */
.wrap{max-width:720px;margin:0 auto;padding:clamp(2.4rem,5vw,4rem) clamp(1.2rem,5vw,1.5rem) 5rem}
.lede{font-family:var(--font-gloss);font-style:italic;font-size:clamp(1.3rem,2.6vw,1.7rem);line-height:1.5;
  color:var(--ink-soft);margin:0 0 2.2rem;border-left:3px solid var(--terracotta);padding-left:1.2rem}
.prose p{font-size:1.075rem;line-height:1.74;margin:0 0 1.3rem;color:#2c2118}
.prose p.opening::first-letter{font-family:var(--font-display);font-weight:700;float:left;font-size:4.4rem;
  line-height:.78;padding:.4rem .6rem 0 0;color:var(--terracotta)}
.prose h2{font-family:var(--font-display);font-weight:600;font-size:clamp(1.5rem,3vw,1.95rem);line-height:1.18;
  margin:3rem 0 .5rem;color:var(--ink)}
.prose h2 + .sub{font-family:var(--font-gloss);font-style:italic;color:var(--ink-faint);font-size:1.15rem;margin:0 0 1.3rem}

/* hand-drawn divider (craft sprinkle) */
.divider{display:flex;align-items:center;gap:1rem;margin:2.6rem 0;color:var(--gold)}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--rule)}
.divider span{font-family:var(--font-display);font-size:1.2rem}

/* pull quote (craft sprinkle) */
blockquote.pull{font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:clamp(1.4rem,3vw,1.9rem);line-height:1.3;color:var(--terracotta-deep);
  margin:2.4rem 0;padding:0 0 0 1.4rem;border-left:4px solid var(--gold);max-width:24ch}
blockquote.pull cite{display:block;font-family:var(--font-ui);font-style:normal;font-size:.8rem;
  letter-spacing:.04em;color:var(--ink-faint);margin-top:.6rem}

/* margin note — handwritten Caveat aside (the human-eye scribble) */
.margin-note{font-family:var(--font-hand);font-size:1.5rem;line-height:1.25;color:var(--terracotta-deep);
  float:right;width:40%;min-width:200px;margin:.2rem -1.5rem 1.1rem 1.6rem;padding:.4rem 0 .4rem 1rem;
  border-left:2px dashed var(--gold);transform:rotate(.5deg)}
@media(max-width:620px){.margin-note{float:none;width:auto;margin:1rem 0;transform:none}}

/* lexicon table */
.lexicon{margin:1.6rem 0 2rem;border:1px solid var(--rule);border-radius:16px;overflow:hidden;
  box-shadow:0 18px 44px rgba(80,50,20,.10);background:#fff}
.lexicon__head{display:flex;align-items:center;gap:.6rem;padding:.7rem 1.1rem;background:var(--paper-soft);border-bottom:1px solid var(--rule)}
.lexrow{display:grid;grid-template-columns:1fr 1fr auto;gap:1rem;align-items:center;padding:.9rem 1.1rem;border-bottom:1px solid var(--rule-soft)}
.lexrow:last-child{border-bottom:0}
.lexrow .it{font-family:var(--font-display);font-weight:600;font-size:1.16rem;color:var(--ink)}
.lexrow .ipa{display:block;font-family:var(--font-mono);font-size:.72rem;color:var(--ink-faint);margin-top:.15rem}
.lexrow .gl{font-family:var(--font-gloss);font-style:italic;font-size:1.12rem;color:var(--ink-soft)}
.lexrow .play{width:38px;height:38px;border-radius:999px;border:1px solid var(--rule);background:#fff;
  color:var(--terracotta-deep);cursor:pointer;display:grid;place-items:center;transition:.18s;font-size:.8rem}
.lexrow .play:hover{background:var(--terracotta);color:#fff;border-color:transparent;transform:scale(1.06)}

/* dialogue script */
.script{margin:1.4rem 0 2rem;padding:1.6rem;border-radius:18px;background:
  linear-gradient(0deg,var(--paper-soft),var(--paper-soft)) padding-box,
  repeating-linear-gradient(135deg,var(--rule-soft) 0 2px,transparent 2px 10px) border-box;border:2px solid transparent}
.line{margin:0 0 1.05rem}
.line:last-child{margin-bottom:0}
.line .who{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.line.you .who{color:var(--terracotta-deep)}
.line .say{display:block;font-family:var(--font-display);font-weight:600;font-size:1.24rem;color:var(--ink);margin:.1rem 0 0}
.line .tr{font-family:var(--font-gloss);font-style:italic;color:var(--ink-soft);font-size:1.1rem}

/* culture note — floated card with watercolor wash */
.note{float:right;width:46%;min-width:240px;margin:.4rem 0 1.2rem 1.6rem;padding:1.3rem 1.3rem 1.5rem;
  background:#fff;border:1px solid var(--rule);border-radius:14px;box-shadow:0 14px 34px rgba(80,50,20,.12);position:relative;overflow:hidden}
.note::before{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:var(--note-img) center/cover;opacity:.10;mix-blend-mode:multiply}
.note .kicker{color:var(--terracotta-deep)}
.note h4{font-family:var(--font-display);font-weight:600;font-size:1.2rem;margin:.5rem 0 .5rem;position:relative}
.note p{font-size:.96rem;line-height:1.6;color:#2c2118;margin:0;position:relative}
@media(max-width:620px){.note{float:none;width:auto;margin:1.2rem 0}}

/* mistakes */
.slips{list-style:none;padding:0;margin:1.2rem 0 2rem;display:grid;gap:.7rem}
.slips li{display:flex;gap:.8rem;align-items:flex-start;padding:.85rem 1rem;border-radius:12px;
  background:rgba(184,92,74,.07);border:1px solid rgba(184,92,74,.2)}
.slips .x{color:var(--rose);font-family:var(--font-display);font-size:1.2rem;line-height:1.2}
.slips .wrong{text-decoration:line-through;text-decoration-color:rgba(184,92,74,.6);color:var(--ink-soft)}
.slips .right{color:var(--green);font-weight:600}

/* CTA */
.cta{margin:3.4rem 0 0;border-radius:22px;overflow:hidden;position:relative;color:#fffaf0;box-shadow:0 22px 50px rgba(120,60,30,.28)}
.cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(120,55,30,.92),rgba(176,70,40,.78))}
.cta__in{position:relative;z-index:2;padding:2.2rem clamp(1.4rem,4vw,2.4rem)}
.cta .kicker{color:rgba(255,250,240,.85)}
.cta h3{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,3.4vw,2.1rem);margin:.3rem 0 .4rem}
.cta p{margin:0 0 1.3rem;color:rgba(255,250,240,.92);max-width:46ch}
.cta a{display:inline-flex;align-items:center;gap:.5rem;background:#fffaf0;color:var(--terracotta-deep);font-weight:600;
  text-decoration:none;padding:.8rem 1.5rem;border-radius:999px;box-shadow:0 8px 20px rgba(60,20,8,.3)}

/* related */
.related{margin:3rem 0 0}
.related .kicker{color:var(--gold-deep)}
.relgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.9rem;margin-top:1rem}
.relgrid a{text-decoration:none;color:inherit;border:1px solid var(--rule);border-radius:14px;padding:1rem 1.1rem;background:#fff;transition:.18s;display:block}
.relgrid a:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(80,50,20,.12);border-color:var(--terracotta)}
.relgrid .rk{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep)}
.relgrid .rt{font-family:var(--font-display);font-weight:600;font-size:1.12rem;margin:.35rem 0 0}

/* ── library home + cluster hubs ── */
.lib-masthead{max-width:880px;margin:0 auto;padding:clamp(3rem,7vw,5rem) clamp(1.2rem,5vw,1.5rem) 1rem;text-align:center}
.lib-masthead h1{font-family:var(--font-display);font-weight:700;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.08;margin:.6rem 0 .8rem}
.lib-lede{font-family:var(--font-gloss);font-style:italic;font-size:1.3rem;color:var(--ink-soft);max-width:54ch;margin:0 auto}
.lib-masthead--cluster{text-align:left;max-width:1100px}
.lib-masthead--cluster .hero__breadcrumb{color:var(--ink-faint);justify-content:flex-start}
.lib-masthead--cluster .hero__breadcrumb a{color:inherit}
.lib-cluster{max-width:1100px;margin:0 auto;padding:2rem clamp(1.2rem,5vw,1.5rem)}
.lib-cluster__head{display:flex;align-items:baseline;gap:.8rem;margin-bottom:1.1rem;border-bottom:1px solid var(--rule);padding-bottom:.6rem}
.lib-cluster__head h2{font-family:var(--font-display);font-weight:600;font-size:1.7rem;margin:0}
.lib-cluster__head h2 a{color:var(--ink);text-decoration:none}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.2rem}
.lib-grid--cluster{max-width:1100px;margin:1.4rem auto 4rem;padding:0 clamp(1.2rem,5vw,1.5rem)}
.lib-card{text-decoration:none;color:inherit;border:1px solid var(--rule);border-radius:18px;overflow:hidden;
  background:#fff;box-shadow:0 14px 34px rgba(80,50,20,.10);transition:.2s;display:flex;flex-direction:column}
.lib-card:hover{transform:translateY(-4px);box-shadow:0 22px 48px rgba(80,50,20,.18);border-color:var(--terracotta)}
.lib-card__img{aspect-ratio:16/10;overflow:hidden;background:var(--paper-soft)}
.lib-card__img img{width:100%;height:100%;object-fit:cover}
.lib-card__body{padding:1.1rem 1.2rem 1.3rem}
.lib-card .rk{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep)}
.lib-card .rt{font-family:var(--font-display);font-weight:600;font-size:1.3rem;line-height:1.15;margin:.35rem 0 .5rem;color:var(--ink)}
.lib-card p{font-size:.92rem;line-height:1.55;color:var(--ink-soft);margin:0}
.lib-empty{text-align:center;color:var(--ink-faint);padding:3rem}

/* ════════════════════════════════════════════════════════════════════
   Shared blocks usable by any template (summary TL;DR + FAQ accordion)
   ════════════════════════════════════════════════════════════════════ */
.content-page .summary{background:#fff;border:1px solid var(--rule);border-radius:16px;
  padding:1.3rem 1.5rem;margin:0 0 2.2rem;box-shadow:0 14px 34px rgba(80,50,20,.10)}
.content-page .summary h2{font-family:var(--font-display);font-weight:600;font-size:1.25rem;margin:.2rem 0 .9rem}
.content-page .summary ul{margin:0;padding:0;list-style:none;display:grid;gap:.5rem}
.content-page .summary li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:baseline;
  padding-bottom:.5rem;border-bottom:1px dashed var(--rule-soft)}
.content-page .summary li:last-child{border-bottom:0;padding-bottom:0}
.content-page .summary .it{font-family:var(--font-display);font-weight:600;color:var(--ink)}
.content-page .summary .gl{font-family:var(--font-gloss);font-style:italic;color:var(--ink-soft);font-size:1.05rem}
.content-page .faq{margin:1rem 0 0}
.content-page .faq details{border:1px solid var(--rule);border-radius:12px;margin-bottom:.6rem;background:#fff;overflow:hidden}
.content-page .faq summary{cursor:pointer;list-style:none;padding:.9rem 1.1rem;font-family:var(--font-display);
  font-weight:600;font-size:1.08rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.content-page .faq summary::-webkit-details-marker{display:none}
.content-page .faq summary::after{content:"+";color:var(--terracotta);font-size:1.3rem;line-height:1}
.content-page .faq details[open] summary::after{content:"\2013"}
.content-page .faq .ans{padding:0 1.1rem 1rem;color:#2c2118;font-size:1rem;line-height:1.65}
.content-page .quick-answer{margin:0 0 2rem;padding:1.1rem 1.3rem;background:var(--paper-soft);
  border:1px solid var(--rule);border-left:3px solid var(--gold);border-radius:0 14px 14px 0}
.content-page .quick-answer .qa-label{display:block;font-family:var(--font-ui);font-size:.72rem;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:.4rem}
.content-page .quick-answer p{margin:0;font-family:var(--font-display);font-size:1.12rem;
  line-height:1.6;color:var(--ink)}

/* ════════════════════════════════════════════════════════════════════
   Cinema (.tpl-cinema) — story-open hero → numbered acts → interactive
   ════════════════════════════════════════════════════════════════════ */
.tpl-cinema .cinema{position:relative;min-height:88vh;display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;color:#fff6e8}
.tpl-cinema .cinema img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.tpl-cinema .cinema::after{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 90% at 50% 35%,rgba(18,10,4,.18),rgba(14,8,3,.74) 78%),
  linear-gradient(180deg,rgba(14,8,3,.55) 0%,rgba(14,8,3,.1) 30%,rgba(18,10,4,.55) 70%,var(--paper) 100%)}
.tpl-cinema .cinema__in{position:relative;z-index:2;max-width:780px;padding:0 1.4rem}
.tpl-cinema .cinema .crumb{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,246,232,.7);margin-bottom:1.6rem}
.tpl-cinema .cinema .scene{font-family:var(--font-gloss);font-style:italic;font-size:clamp(1.5rem,3.6vw,2.3rem);
  line-height:1.5;color:rgba(255,246,232,.94);text-shadow:0 2px 30px rgba(0,0,0,.5)}
.tpl-cinema .cinema h1{font-family:var(--font-display);font-weight:700;font-size:clamp(2.4rem,7vw,4.6rem);
  line-height:1.02;margin:1.8rem 0 0;text-shadow:0 4px 40px rgba(0,0,0,.55)}
.tpl-cinema .cinema h1 em{font-style:italic;font-weight:600;color:#f3c9a8}
.tpl-cinema .scrollcue{margin-top:2.4rem;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,246,232,.7);animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
.tpl-cinema .stage{max-width:840px;margin:0 auto;padding:clamp(2rem,5vw,3.4rem) clamp(1.2rem,5vw,1.5rem) 5rem}
.tpl-cinema .act{margin:3.2rem 0 0}
.tpl-cinema .act--intro{margin-top:1.4rem}
.tpl-cinema .act__label{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.tpl-cinema .act__num{width:34px;height:34px;border-radius:999px;background:var(--terracotta);color:#fff;
  display:grid;place-items:center;font-family:var(--font-mono);font-weight:500;font-size:.8rem;box-shadow:0 8px 18px rgba(176,70,40,.3)}
.tpl-cinema .act h2{font-family:var(--font-display);font-weight:600;font-size:clamp(1.5rem,3vw,2rem);margin:0}
.tpl-cinema .act p.intro{font-size:1.08rem;line-height:1.7;color:#2c2118;margin:.4rem 0 1.4rem}
.tpl-cinema .deck{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.9rem}
.tpl-cinema .card{perspective:1000px;height:150px;cursor:pointer}
.tpl-cinema .card__in{position:relative;width:100%;height:100%;transition:transform .55s cubic-bezier(.6,.2,.1,1);transform-style:preserve-3d}
.tpl-cinema .card.flip .card__in{transform:rotateY(180deg)}
.tpl-cinema .face{position:absolute;inset:0;backface-visibility:hidden;border-radius:18px;padding:1.1rem;
  display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--rule);box-shadow:0 14px 30px rgba(80,50,20,.12)}
.tpl-cinema .face.front{background:#fff}
.tpl-cinema .face.front .it{font-family:var(--font-display);font-weight:700;font-size:1.4rem;color:var(--ink)}
.tpl-cinema .face.front .ipa{font-family:var(--font-mono);font-size:.68rem;color:var(--ink-faint);margin-top:.2rem}
.tpl-cinema .face.front .flipcue{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep)}
.tpl-cinema .face.front .play{align-self:flex-end;width:40px;height:40px;border-radius:999px;border:0;
  background:var(--terracotta);color:#fff;font-size:.85rem;cursor:pointer;display:grid;place-items:center;box-shadow:0 6px 14px rgba(176,70,40,.35)}
.tpl-cinema .face.back{background:linear-gradient(150deg,var(--terracotta),var(--terracotta-deep));color:#fff6e8;
  transform:rotateY(180deg);justify-content:center;text-align:center}
.tpl-cinema .face.back .gl{font-family:var(--font-gloss);font-style:italic;font-size:1.3rem;line-height:1.35}
.tpl-cinema .chat{margin:.4rem 0 0;display:flex;flex-direction:column;gap:1rem}
.tpl-cinema .bubble{max-width:78%;padding:.85rem 1.1rem;border-radius:18px;position:relative}
.tpl-cinema .bubble .say{font-family:var(--font-display);font-weight:600;font-size:1.18rem}
.tpl-cinema .bubble .tr{font-family:var(--font-gloss);font-style:italic;font-size:1.05rem;margin-top:.15rem}
.tpl-cinema .bubble.them{align-self:flex-start;background:#fff;border:1px solid var(--rule);border-bottom-left-radius:5px}
.tpl-cinema .bubble.them .say{color:var(--ink)}.tpl-cinema .bubble.them .tr{color:var(--ink-soft)}
.tpl-cinema .bubble.me{align-self:flex-end;background:linear-gradient(150deg,var(--terracotta),var(--terracotta-deep));
  color:#fff6e8;border-bottom-right-radius:5px}
.tpl-cinema .bubble.me .tr{color:rgba(255,246,232,.85)}
.tpl-cinema .bubble .mini{position:absolute;bottom:-9px;width:30px;height:30px;border-radius:999px;background:#fff;
  border:1px solid var(--rule);display:grid;place-items:center;color:var(--terracotta-deep);font-size:.7rem;cursor:pointer}
.tpl-cinema .bubble.them .mini{right:-12px}.tpl-cinema .bubble.me .mini{left:-12px;background:#fff6e8}
.tpl-cinema .poster{margin:3.2rem 0 0}
.tpl-cinema .poster__wrap{position:relative;border-radius:24px;overflow:hidden;min-height:300px;display:flex;
  align-items:flex-end;color:#fff6e8;box-shadow:0 22px 50px rgba(80,40,15,.25)}
.tpl-cinema .poster__wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tpl-cinema .poster__wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,10,4,.82),rgba(18,10,4,.2))}
.tpl-cinema .poster__txt{position:relative;z-index:2;padding:1.8rem;max-width:30rem}
.tpl-cinema .poster__txt .kicker{color:rgba(255,246,232,.8)}
.tpl-cinema .poster__txt h3{font-family:var(--font-display);font-weight:700;font-size:1.7rem;margin:.4rem 0 .5rem}
.tpl-cinema .poster__txt p{font-size:.98rem;line-height:1.6;color:rgba(255,246,232,.92);margin:0}

/* ════════════════════════════════════════════════════════════════════
   Notebook (.tpl-notebook) — scannable, ruled paper, TOC, tables, FAQ
   ════════════════════════════════════════════════════════════════════ */
body.tpl-notebook{background-image:linear-gradient(rgba(184,137,59,.07) 1px,transparent 1px);background-size:100% 2.1rem}
.tpl-notebook .top{max-width:1100px;margin:0 auto;padding:2.4rem clamp(1.2rem,4vw,2rem) 0;display:flex;gap:2rem;align-items:flex-start}
.tpl-notebook .crumb{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.tpl-notebook .crumb a{color:inherit;text-decoration:none}
.tpl-notebook .headline{flex:1}
.tpl-notebook .headline h1{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,4.4vw,3rem);line-height:1.08;margin:.8rem 0 .5rem}
.tpl-notebook .headline .dek{font-family:var(--font-gloss);font-style:italic;font-size:1.3rem;color:var(--ink-soft);margin:0 0 1rem;max-width:48ch}
.tpl-notebook .headline .meta{display:flex;gap:.6rem;flex-wrap:wrap;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.06em;color:var(--ink-faint)}
.tpl-notebook .headline .meta b{color:var(--gold-deep);font-weight:500}
.tpl-notebook .thumb{width:240px;flex:none;border-radius:16px;overflow:hidden;box-shadow:0 14px 34px rgba(80,50,20,.16);aspect-ratio:4/5}
.tpl-notebook .thumb img{width:100%;height:100%;object-fit:cover}
@media(max-width:760px){.tpl-notebook .top{flex-direction:column-reverse}.tpl-notebook .thumb{width:100%;aspect-ratio:16/9}}
.tpl-notebook .shell{max-width:1140px;margin:0 auto;padding:2.2rem clamp(1.2rem,4vw,2rem) 5rem;display:grid;grid-template-columns:270px 1fr;gap:2.5rem;align-items:start}
@media(max-width:880px){.tpl-notebook .shell{grid-template-columns:1fr}.tpl-notebook .toc{display:none}}
.tpl-notebook .toc{position:sticky;top:1.5rem}
.tpl-notebook .toc .kicker{margin-bottom:.7rem;display:block}
.tpl-notebook .toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--rule)}
.tpl-notebook .toc li a{display:block;padding:.4rem 0 .4rem 1rem;margin-left:-2px;border-left:2px solid transparent;color:var(--ink-soft);text-decoration:none;font-size:.9rem}
.tpl-notebook .toc li a:hover{color:var(--terracotta-deep);border-left-color:var(--terracotta)}
.tpl-notebook article{min-width:0}
.tpl-notebook article h2{font-family:var(--font-display);font-weight:600;font-size:clamp(1.4rem,2.8vw,1.85rem);margin:2.6rem 0 .4rem;scroll-margin-top:1.5rem}
.tpl-notebook article h2 .num{font-family:var(--font-mono);font-size:.95rem;color:var(--gold-deep);margin-right:.5rem;vertical-align:.15em}
.tpl-notebook article p{font-size:1.05rem;line-height:1.74;margin:.5rem 0 1.1rem;color:#2c2118}
.tpl-notebook .tbl{width:100%;border-collapse:collapse;margin:1rem 0 1.6rem;background:#fff;border:1px solid var(--rule);border-radius:14px;overflow:hidden}
.tpl-notebook .tbl th{text-align:left;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);padding:.7rem 1rem;background:var(--paper-soft);border-bottom:1px solid var(--rule)}
.tpl-notebook .tbl td{padding:.75rem 1rem;border-bottom:1px solid var(--rule-soft);vertical-align:middle}
.tpl-notebook .tbl tr:last-child td{border-bottom:0}
.tpl-notebook .tbl .it{font-family:var(--font-display);font-weight:600;font-size:1.1rem}
.tpl-notebook .tbl .ipa{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-faint)}
.tpl-notebook .tbl .gl{font-family:var(--font-gloss);font-style:italic;font-size:1.05rem;color:var(--ink-soft)}
.tpl-notebook .tbl .play{width:32px;height:32px;border-radius:999px;border:1px solid var(--rule);background:#fff;color:var(--terracotta-deep);cursor:pointer}
.tpl-notebook .tbl .play:hover{background:var(--terracotta);color:#fff}
.tpl-notebook .dlg{border:1px solid var(--rule);border-radius:14px;overflow:hidden;margin:1rem 0 1.6rem}
.tpl-notebook .dlg .row{display:grid;grid-template-columns:90px 1fr;gap:1rem;padding:.85rem 1.1rem;border-bottom:1px solid var(--rule-soft);background:#fff}
.tpl-notebook .dlg .row:nth-child(even){background:var(--paper-soft)}
.tpl-notebook .dlg .row:last-child{border-bottom:0}
.tpl-notebook .dlg .who{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);padding-top:.25rem}
.tpl-notebook .dlg .row.you .who{color:var(--terracotta-deep)}
.tpl-notebook .dlg .say{font-family:var(--font-display);font-weight:600;font-size:1.12rem}
.tpl-notebook .dlg .tr{font-family:var(--font-gloss);font-style:italic;color:var(--ink-soft)}
.tpl-notebook .ncard{background:#fff;border:1px solid var(--rule);border-left:3px solid var(--terracotta);border-radius:12px;padding:1.1rem 1.3rem;margin:1.2rem 0}
.tpl-notebook .ncard .kicker{color:var(--terracotta-deep)}
.tpl-notebook .ncard h4{font-family:var(--font-display);font-weight:600;font-size:1.15rem;margin:.4rem 0 .4rem}
.tpl-notebook .ncard p{margin:0}

/* ── blog dispatch page (/blog/<slug>) — text-first editorial, no hero image ── */
.content-page .post{padding-top:clamp(2.4rem,6vw,4.5rem)}
.content-page .post__crumb{color:var(--ink-faint);margin-bottom:1.4rem}
.content-page .post__crumb a{color:inherit;text-decoration:none}
.content-page .post__crumb b{opacity:.5}
.content-page .post__title{font-family:var(--font-display);font-weight:700;color:var(--ink);
  font-size:clamp(2rem,5vw,3.2rem);line-height:1.06;margin:.5rem 0 1.6rem}
.content-page .post__body{font-size:1.08rem}
.content-page .post__body h3{font-family:var(--font-display);font-weight:600;font-size:1.4rem;margin:2.2rem 0 .5rem;color:var(--ink)}
.content-page .post__body blockquote{font-family:var(--font-gloss);font-style:italic;font-size:1.3rem;
  color:var(--terracotta-deep);border-left:4px solid var(--gold);margin:1.8rem 0;padding-left:1.2rem}
.content-page .post__body ul{padding-left:1.2rem}
.content-page .post__body li{margin:.3rem 0}

/* ════════════════════════════════════════════════════════════════════
   Annotated Journal (.tpl-journal) — handcrafted/tactile (port of lab post-1).
   Uses var(--accent) (per-slug variation); data-hero-frame tilts the hero.
   ════════════════════════════════════════════════════════════════════ */
body.tpl-journal{background:#fdf8ee;
  background-image:radial-gradient(rgba(184,137,59,.05) 1px,transparent 1.4px),
    radial-gradient(circle at 18% 12%,rgba(217,119,87,.05),transparent 38%);
  background-size:7px 7px,100% 100%}
.tpl-journal .hero{position:relative;max-width:1080px;margin:1.6rem auto 0;padding:0 1.2rem}
.tpl-journal .hero__frame{position:relative;border-radius:8px;overflow:hidden;box-shadow:0 24px 60px rgba(80,50,20,.22);transform:rotate(-.5deg)}
[data-hero-frame="tiltL"] .hero__frame{transform:rotate(-1.1deg)}
[data-hero-frame="tiltR"] .hero__frame{transform:rotate(1.1deg)}
[data-hero-frame="bleed"] .hero__frame{transform:none}
.tpl-journal .hero__frame img{display:block;width:100%;height:46vh;min-height:320px;object-fit:cover;filter:sepia(.1) saturate(1.05)}
.tpl-journal .hero__frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(28,18,10,.55))}
.tpl-journal .hero__cap{position:absolute;left:1.4rem;bottom:1.1rem;right:1.4rem;z-index:2;color:#fff6e8}
.tpl-journal .hero__cap .kicker{color:#f0d9bf}
.tpl-journal .hero__title{font-family:var(--font-display);font-weight:700;color:#fffaf0;margin:.4rem 0 0;font-size:clamp(2rem,5vw,3.4rem);line-height:1.05;text-shadow:0 2px 24px rgba(0,0,0,.5)}
.tpl-journal .tape{position:absolute;width:120px;height:34px;background:rgba(184,137,59,.42);top:-12px;left:50%;transform:translateX(-50%) rotate(-3deg);box-shadow:0 2px 6px rgba(0,0,0,.15);z-index:3;mix-blend-mode:multiply}
.tpl-journal .sheet{max-width:1080px;margin:0 auto;padding:2.6rem 1.2rem 5rem;display:grid;grid-template-columns:1fr minmax(0,300px);gap:2.4rem}
@media(max-width:900px){.tpl-journal .sheet{grid-template-columns:1fr}}
.tpl-journal .col-main{min-width:0;max-width:680px}
.tpl-journal .col-margin{position:relative}
.tpl-journal .prose p.opening::first-letter{color:var(--accent)}
.tpl-journal .prose h2{margin:3.6rem 0 .9rem}
/* handwritten margin notes (override the editorial .note card) */
.tpl-journal .note{float:none;background:none;border:0;box-shadow:none;overflow:visible;
  font-family:var(--font-hand);font-size:1.42rem;line-height:1.2;color:var(--accent);
  position:relative;margin:0 0 2.2rem;padding-left:1.6rem;
  opacity:0;transform:translateY(14px) rotate(.8deg);transition:opacity .6s ease,transform .6s ease}
.tpl-journal .note.in{opacity:1;transform:translateY(0) rotate(-.6deg)}
.tpl-journal .note::before{content:none}
.tpl-journal .note .arrow{position:absolute;left:-6px;top:.2rem;width:26px;height:40px;color:var(--gold)}
.tpl-journal .note .arrow path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s ease .2s}
.tpl-journal .note.in .arrow path{stroke-dashoffset:0}
@media(max-width:900px){.tpl-journal .note{font-size:1.3rem;border-left:2px dashed var(--gold);margin:1.2rem 0}.tpl-journal .note .arrow{display:none}}
.tpl-journal .polaroid{background:#fff;padding:.6rem .6rem 2.2rem;box-shadow:0 16px 40px rgba(80,50,20,.2);transform:rotate(2.2deg);position:relative;margin:0 0 2rem}
.tpl-journal .polaroid img{display:block;width:100%;height:170px;object-fit:cover}
.tpl-journal .polaroid figcaption{font-family:var(--font-hand);font-size:1.3rem;color:var(--ink-soft);text-align:center;padding-top:.5rem;transform:rotate(-1deg)}
.tpl-journal .polaroid .tape{top:-10px}
.tpl-journal .ring{position:absolute;width:120px;height:120px;border-radius:999px;border:6px solid rgba(150,90,40,.1);right:-30px;top:34%;transform:rotate(20deg);pointer-events:none}
.tpl-journal .ring::after{content:"";position:absolute;inset:8px;border-radius:999px;border:2px solid rgba(150,90,40,.07)}
/* torn pull-quote */
.tpl-journal .pull{position:relative;background:var(--paper-soft);padding:1.6rem 1.8rem;margin:2.4rem 0;transform:rotate(-.6deg);box-shadow:0 12px 30px rgba(80,50,20,.14);
  clip-path:polygon(0 4%,6% 0,18% 3%,33% 0,48% 4%,63% 0,80% 3%,94% 0,100% 5%,100% 96%,93% 100%,78% 97%,62% 100%,45% 97%,30% 100%,15% 97%,4% 100%,0 95%)}
.tpl-journal .pull p{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:clamp(1.3rem,2.6vw,1.7rem);line-height:1.32;color:var(--accent);margin:0}
/* did-you-know with wax seal */
.tpl-journal .dyk{position:relative;background:#fff;border:1px solid var(--rule);border-radius:14px;padding:1.4rem;margin:2.2rem 0;box-shadow:0 14px 34px rgba(80,50,20,.1)}
.tpl-journal .dyk h4{font-family:var(--font-display);font-weight:600;font-size:1.2rem;margin:.4rem 0 .5rem}
.tpl-journal .dyk p{margin:0;font-size:.98rem;color:#2c2118}
.tpl-journal .dyk .seal{position:absolute;right:-14px;top:-14px;width:52px;height:52px;border-radius:999px;background:radial-gradient(circle at 35% 30%,var(--accent),rgba(0,0,0,.25));display:grid;place-items:center;color:#fff6e8;font-family:var(--font-display);font-weight:700;font-size:1.2rem;box-shadow:0 6px 14px rgba(120,40,20,.4);transform:rotate(-8deg)}
/* ledger (lexicon) */
.tpl-journal .ledger{border:1px solid var(--rule);border-radius:14px;background:#fff;overflow:hidden;margin:1.6rem 0 2rem;box-shadow:0 14px 34px rgba(80,50,20,.08)}
.tpl-journal .ledger .hd{padding:.7rem 1.1rem;background:var(--paper-soft);border-bottom:1px solid var(--rule)}
.tpl-journal .ledger .row{display:grid;grid-template-columns:1fr 1fr auto;gap:1rem;align-items:center;padding:.8rem 1.1rem;border-bottom:1px solid var(--rule-soft)}
.tpl-journal .ledger .row:last-child{border-bottom:0}
.tpl-journal .ledger .it{font-family:var(--font-display);font-weight:600;font-size:1.12rem}
.tpl-journal .ledger .ipa{display:block;font-family:var(--font-mono);font-size:.72rem;color:var(--ink-faint);margin-top:.1rem}
.tpl-journal .ledger .gl{font-family:var(--font-gloss);font-style:italic;color:var(--ink-soft);font-size:1.08rem}
.tpl-journal .ledger .play{width:36px;height:36px;border-radius:999px;border:1px solid var(--rule);background:#fff;color:var(--accent);cursor:pointer}
@media(prefers-reduced-motion:reduce){.tpl-journal .note{opacity:1;transform:none}.tpl-journal .note .arrow path{stroke-dashoffset:0}}

/* ════════════════════════════════════════════════════════════════════
   /learn HOME — the locked "blend" (newspaper front → editorial sections).
   Scoped to .tpl-library (port of lab home-blend).
   ════════════════════════════════════════════════════════════════════ */
body.tpl-library{background:#fbf3e3}
.tpl-library .lib-wrap{max-width:1160px;margin:0 auto;padding:0 clamp(1.1rem,4vw,2.4rem)}
.tpl-library a{text-decoration:none;color:inherit}
.tpl-library .plate{text-align:center;padding:2.4rem 0 1.1rem;border-bottom:4px double var(--ink)}
.tpl-library .plate .line{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);padding-bottom:.8rem}
.tpl-library .plate h1{font-family:var(--font-display);font-weight:800;font-size:clamp(3rem,8vw,5.6rem);letter-spacing:.005em;line-height:.92;margin:0}
.tpl-library .plate .motto{font-family:var(--font-gloss);font-style:italic;font-size:1.3rem;color:var(--ink-soft);margin-top:.4rem}
.tpl-library .front{display:grid;grid-template-columns:2.15fr 1fr;gap:0;margin-top:1.6rem}
@media(max-width:860px){.tpl-library .front{grid-template-columns:1fr}}
.tpl-library .lead{padding-right:2.4rem}
@media(max-width:860px){.tpl-library .lead{padding-right:0}}
.tpl-library .lead .kk{display:block;margin-bottom:.5rem;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep)}
.tpl-library .lead h2{font-family:var(--font-display);font-weight:700;font-size:clamp(2.1rem,4.4vw,3.3rem);line-height:1.03;margin:0 0 .8rem}
.tpl-library .lead .fig{margin:1rem 0 1.1rem}
.tpl-library .lead .fig img{width:100%;height:360px;object-fit:cover}
.tpl-library .lead .fig figcaption{font-family:var(--font-gloss);font-style:italic;color:var(--ink-faint);font-size:1rem;margin-top:.5rem}
.tpl-library .lead .body{column-count:2;column-gap:2rem;font-size:1.06rem;line-height:1.78;color:#2a2015}
@media(max-width:560px){.tpl-library .lead .body{column-count:1}}
.tpl-library .lead .body p:first-child::first-letter{font-family:var(--font-display);font-weight:700;float:left;font-size:4.4rem;line-height:.7;padding:.4rem .5rem 0 0;color:var(--accent)}
.tpl-library .lead .more-link{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--terracotta-deep);margin-top:.6rem;display:inline-block}
.tpl-library .aside{border-left:1px solid var(--rule);padding-left:2.4rem}
@media(max-width:860px){.tpl-library .aside{border-left:0;padding-left:0;border-top:1px solid var(--rule);margin-top:1.6rem;padding-top:1.4rem}}
.tpl-library .aside .hd{font-family:var(--font-display);font-weight:600;font-size:1.05rem;border-bottom:2px solid var(--ink);padding-bottom:.35rem;margin:0 0 .9rem}
.tpl-library .aside .hd:not(:first-child){margin-top:2rem}
.tpl-library .potd{position:relative}
.tpl-library .potd .word{font-family:var(--font-display);font-weight:700;font-size:2.1rem;color:var(--accent);line-height:1}
.tpl-library .potd .potd-play{margin-left:.5rem;width:30px;height:30px;border-radius:999px;border:1px solid var(--rule);background:#fff;color:var(--accent);cursor:pointer;vertical-align:.25rem}
.tpl-library .potd .ph{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-faint);margin:.3rem 0 .5rem}
.tpl-library .potd .gl{font-family:var(--font-gloss);font-style:italic;font-size:1.2rem;color:var(--ink-soft)}
.tpl-library .try .q{font-family:var(--font-gloss);font-style:italic;font-size:1.15rem;margin-bottom:.7rem}
.tpl-library .try .q b{font-style:normal;color:var(--gold-deep)}
.tpl-library .try .r{display:flex;gap:.4rem;align-items:stretch}
.tpl-library .try input{flex:1;min-width:0;border:1px solid var(--rule);border-radius:7px;padding:.55rem .7rem;font-family:var(--font-ui);font-size:.95rem;background:#fff}
.tpl-library .try .btn{border:1px solid var(--rule);background:var(--paper-soft);color:var(--terracotta-deep);border-radius:7px;padding:.55rem .7rem;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.tpl-library .try .btn--go{background:var(--terracotta);color:#fff;border-color:transparent}
.tpl-library .try .v{margin-top:.6rem;font-family:var(--font-display);font-weight:600;min-height:1.3em;font-size:1.05rem}
.tpl-library .try .v.ok{color:var(--green)} .tpl-library .try .v.no{color:var(--terracotta-deep)}
.tpl-library .try .hint{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-top:.5rem}
.tpl-library .continued{text-align:center;border-top:1px solid var(--rule);margin-top:1.8rem;padding-top:1rem}
.tpl-library .continued span{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.tpl-library .continued .chev{width:13px;height:13px;border-right:2px solid var(--terracotta);border-bottom:2px solid var(--terracotta);transform:rotate(45deg);margin:.7rem auto 0;animation:libbob 2s ease-in-out infinite}
@keyframes libbob{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(45deg) translate(3px,3px)}}
.tpl-library .section{margin:3.4rem 0 0}
.tpl-library .shead{display:flex;align-items:center;gap:1.2rem;margin-bottom:1.4rem}
.tpl-library .shead::before{content:"";height:2px;background:var(--ink);width:2.2rem;flex:none}
.tpl-library .shead h3{font-family:var(--font-display);font-weight:700;font-size:1.5rem;margin:0;white-space:nowrap}
.tpl-library .shead .rule{flex:1;height:1px;background:var(--rule)}
.tpl-library .shead .all{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--terracotta-deep);white-space:nowrap}
.tpl-library .culture{display:grid;grid-template-columns:1.4fr 1fr;gap:2.4rem}
@media(max-width:720px){.tpl-library .culture{grid-template-columns:1fr}}
.tpl-library .cfeat .cut{display:block;margin-bottom:.8rem}
.tpl-library .cfeat .cut img{width:100%;height:230px;object-fit:cover}
.tpl-library .cfeat h4{font-family:var(--font-display);font-weight:700;font-size:1.7rem;line-height:1.08;margin:.4rem 0 .4rem}
.tpl-library .cfeat p{font-size:1rem;line-height:1.7;color:var(--ink-soft);margin:0}
.tpl-library .clist a{display:block;padding:.95rem 0;border-bottom:1px solid var(--rule-soft)}
.tpl-library .clist a:first-child{padding-top:0}.tpl-library .clist a:last-child{border-bottom:0}
.tpl-library .clist .kk{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep)}
.tpl-library .clist .t{font-family:var(--font-display);font-weight:600;font-size:1.3rem;line-height:1.12;margin:.2rem 0 .15rem}
.tpl-library .clist .s{font-size:.92rem;color:var(--ink-soft)}
.tpl-library .foot{margin:4rem 0;text-align:center;color:var(--ink-faint);font-size:.8rem;font-family:var(--font-mono);letter-spacing:.06em}
@media(prefers-reduced-motion:reduce){.tpl-library .continued .chev{animation:none}}

/* ════════════════════════════════════════════════════════════════════
   Dispatch (.tpl-dispatch) — postcard/travel (port of lab post-5; idioms).
   ════════════════════════════════════════════════════════════════════ */
body.tpl-dispatch{background:#f7efe1;
  background-image:radial-gradient(circle at 20% 10%,rgba(217,119,87,.06),transparent 40%),radial-gradient(circle at 85% 60%,rgba(184,137,59,.06),transparent 42%)}
.tpl-dispatch .frame{max-width:980px;margin:0 auto;padding:2.4rem clamp(1.1rem,4vw,2rem) 5rem}
.tpl-dispatch .postcard{position:relative;background:#fffdf8;border-radius:6px;box-shadow:0 26px 60px rgba(80,50,20,.22);display:grid;grid-template-columns:1.3fr 1fr;overflow:hidden;transform:rotate(-.6deg)}
@media(max-width:720px){.tpl-dispatch .postcard{grid-template-columns:1fr}}
.tpl-dispatch .postcard__img{position:relative;min-height:340px}
.tpl-dispatch .postcard__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tpl-dispatch .postcard__img picture{position:absolute;inset:0}
.tpl-dispatch .postcard__msg{padding:1.8rem 1.6rem;position:relative;border-left:2px dashed var(--rule)}
@media(max-width:720px){.tpl-dispatch .postcard__msg{border-left:0;border-top:2px dashed var(--rule)}}
.tpl-dispatch .stamp{position:absolute;top:1rem;right:1.2rem;width:74px;height:92px;background:#fffdf8;padding:5px;box-shadow:0 2px 8px rgba(0,0,0,.15);transform:rotate(4deg)}
.tpl-dispatch .stamp img{width:100%;height:100%;object-fit:cover}
.tpl-dispatch .stamp__edge{position:absolute;inset:0;border:1px dashed rgba(33,25,16,.25)}
.tpl-dispatch .postmark{position:absolute;top:2.4rem;right:5.2rem;width:80px;height:80px;border:2px solid rgba(120,55,30,.4);border-radius:999px;color:rgba(120,55,30,.5);font-family:var(--font-mono);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;display:grid;place-items:center;text-align:center;transform:rotate(-12deg)}
.tpl-dispatch .postcard__msg .kicker{margin-bottom:.6rem;display:block}
.tpl-dispatch .postcard__msg h1{font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.08;margin:.2rem 4.5rem .8rem 0}
.tpl-dispatch .postcard__msg .hand{font-family:var(--font-hand);font-size:1.5rem;line-height:1.3;color:var(--accent)}
.tpl-dispatch .lede{font-family:var(--font-gloss);font-style:italic;font-size:clamp(1.3rem,2.5vw,1.65rem);line-height:1.55;color:var(--ink-soft);max-width:42ch;margin:2.8rem auto;text-align:center}
.tpl-dispatch .dp-p{font-size:1.08rem;line-height:1.85;max-width:620px;margin:0 auto 1.3rem}
.tpl-dispatch .dp-h{font-family:var(--font-display);font-weight:600;font-size:clamp(1.5rem,3vw,2rem);text-align:center;margin:2.8rem 0 .3rem}
.tpl-dispatch .dp-sub{font-family:var(--font-gloss);font-style:italic;text-align:center;color:var(--ink-faint);margin:0 0 1.2rem}
.tpl-dispatch .tickets{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.9rem;margin:1.6rem 0}
.tpl-dispatch .ticket{position:relative;background:#fffdf8;border:1px dashed var(--rule);border-radius:10px;padding:1rem 1.1rem 1.1rem;box-shadow:0 8px 20px rgba(80,50,20,.07)}
.tpl-dispatch .ticket .it{font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--ink)}
.tpl-dispatch .ticket .ph{font-family:var(--font-mono);font-size:.68rem;color:var(--ink-faint);margin:.1rem 0 .4rem}
.tpl-dispatch .ticket .gl{font-family:var(--font-gloss);font-style:italic;color:var(--ink-soft);font-size:1.05rem}
.tpl-dispatch .ticket .play{position:absolute;top:.8rem;right:.8rem;width:30px;height:30px;border-radius:999px;border:1px solid var(--rule);background:#fff;color:var(--accent);cursor:pointer}
.tpl-dispatch .vignette{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;margin:3rem auto;max-width:880px}
.tpl-dispatch .vignette:nth-of-type(even) .vignette__photo{order:2}
@media(max-width:680px){.tpl-dispatch .vignette{grid-template-columns:1fr}.tpl-dispatch .vignette:nth-of-type(even) .vignette__photo{order:0}}
.tpl-dispatch .vignette__photo{position:relative;background:#fffdf8;padding:.6rem .6rem 2rem;box-shadow:0 16px 40px rgba(80,50,20,.18);transform:rotate(-1.2deg)}
.tpl-dispatch .vignette:nth-of-type(even) .vignette__photo{transform:rotate(1.4deg)}
.tpl-dispatch .vignette__photo img{display:block;width:100%;height:230px;object-fit:cover}
.tpl-dispatch .vignette__photo figcaption{font-family:var(--font-hand);font-size:1.25rem;color:var(--ink-soft);text-align:center;padding-top:.5rem}
.tpl-dispatch .vignette__txt h2{font-family:var(--font-display);font-weight:600;font-size:clamp(1.4rem,3vw,1.9rem);margin:0 0 .7rem}
.tpl-dispatch .vignette__txt p{font-size:1.08rem;line-height:1.85;margin:0;color:#2c2118}
.tpl-dispatch .cta{max-width:600px;margin:3.4rem auto 0}

/* Rich-editorial upgrades to .tpl-notebook (TL;DR in the rail; floated facts) */
.tpl-notebook .rail{position:sticky;top:1.5rem;display:grid;gap:1.2rem}
.tpl-notebook .rail .summary{margin:0;padding:1.1rem 1.2rem;box-shadow:0 12px 28px rgba(80,50,20,.08)}
.tpl-notebook .rail .summary h2{font-size:1.05rem;margin:0 0 .7rem}
.tpl-notebook .rail .summary li{font-size:.9rem}
.tpl-notebook .rail .toc{position:static}
.tpl-notebook .ncard{float:right;width:46%;min-width:240px;margin:.3rem 0 1.1rem 1.5rem}
@media(max-width:600px){.tpl-notebook .ncard{float:none;width:auto;margin:1.2rem 0}}

.content-page .related__all{display:inline-block;margin-top:1rem;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--terracotta-deep)}

/* handwritten sign-off — varies slightly per page (placement + tilt via inline vars) */
.content-page .signature{max-width:720px;margin:2.8rem auto .4rem;padding:0 1.3rem}
.content-page .signature.sig--left{text-align:left}
.content-page .signature.sig--center{text-align:center}
.content-page .signature.sig--right{text-align:right}
.content-page .signature__mark{display:inline-block;font-family:var(--font-hand);font-size:2.05rem;line-height:1;color:var(--terracotta-deep);transform:rotate(var(--sig-rot,-1deg));transform-origin:left center}

/* language switch — read this guide in the other language */
.content-page .lang-switch{max-width:720px;margin:1.6rem auto 0;padding:0 1.3rem;text-align:center}
.content-page .lang-switch a{display:inline-block;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--terracotta-deep);text-decoration:none;border:1px solid var(--rule);border-radius:999px;padding:.45rem 1rem;background:var(--paper-soft)}
.content-page .lang-switch a:hover{border-color:var(--terracotta-deep)}

/* byline trust footer (E-E-A-T) — appended to every article */
.content-page .byline{max-width:720px;margin:1.4rem auto 0;padding:1.1rem 1.3rem;border:1px solid var(--rule);border-radius:14px;background:var(--paper-soft)}
.content-page .byline__in{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:baseline}
.content-page .byline__by{font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--ink)}
.content-page .byline a{color:var(--terracotta-deep)}
.content-page .byline__note{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint)}

/* ════════════════════════════════════════════════════════════════════
   Kit (.tpl-kit) — "The Trail": watercolor map hero → winding stop-pin trail →
   wayside note → the embedded Passeggiata story. (.lpsd styles: landing-rebuild.css)
   ════════════════════════════════════════════════════════════════════ */
body.tpl-kit{background:#fdf7ea;background-image:radial-gradient(circle at 12% 6%,rgba(217,119,87,.06),transparent 34%),radial-gradient(circle at 90% 40%,rgba(184,137,59,.06),transparent 38%)}
.tpl-kit .kwrap{max-width:780px;margin:0 auto;padding:2.2rem clamp(1.1rem,4vw,1.6rem) 1rem}
.tpl-kit .kwrap--foot{padding-top:0}
.tpl-kit .plate{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 22px 54px rgba(80,50,20,.2);transform:rotate(-.4deg)}
.tpl-kit .plate img{display:block;width:100%;height:38vh;min-height:260px;object-fit:cover;filter:saturate(1.03)}
.tpl-kit .plate::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 46%,rgba(28,18,10,.5))}
.tpl-kit .plate .tape{position:absolute;width:120px;height:30px;background:rgba(184,137,59,.42);top:-10px;left:50%;transform:translateX(-50%) rotate(-3deg);z-index:3;mix-blend-mode:multiply}
.tpl-kit .plate__cap{position:absolute;left:1.4rem;bottom:1.2rem;right:1.4rem;z-index:2;color:#fff6e8}
.tpl-kit .plate__cap .kicker{color:#f0d9bf}
.tpl-kit .plate__cap h1{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,5.2vw,3.3rem);line-height:1.02;margin:.35rem 0 0;text-shadow:0 2px 22px rgba(0,0,0,.5)}
.tpl-kit .plate__cap h1 em{font-style:italic}
.tpl-kit .ksub{font-family:var(--font-hand);font-size:1.7rem;color:var(--terracotta-deep);text-align:center;margin:1rem 0 .2rem;transform:rotate(-1deg)}
.tpl-kit .lead{font-size:1.08rem;line-height:1.8;max-width:600px;margin:1rem auto 1.6rem;text-align:center;color:#2c2118}
.tpl-kit .trail{position:relative;max-width:720px;margin:1rem auto 0;padding:1rem 0}
.tpl-kit .trail::before{content:"";position:absolute;left:50%;top:0;bottom:38px;width:0;transform:translateX(-50%);border-left:3px dashed var(--gold);opacity:.7}
.tpl-kit .stop{position:relative;min-height:118px;margin-bottom:1.4rem;display:flex}
.tpl-kit .stop__pin{position:absolute;left:50%;top:6px;transform:translateX(-50%);width:56px;height:56px;border-radius:999px;z-index:2;background:#fff;border:3px solid var(--terracotta);box-shadow:0 8px 20px rgba(176,70,40,.28);overflow:hidden;display:grid;place-items:center}
.tpl-kit .stop__pin img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.tpl-kit .stop__pin span{position:relative;font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6);z-index:2}
.tpl-kit .stop__card{width:calc(50% - 46px);background:var(--card,#fffdf8);border:1px solid var(--rule);border-radius:14px;padding:.85rem 1rem 1rem;box-shadow:0 14px 32px rgba(80,50,20,.1);background:#fffdf8}
.tpl-kit .stop:nth-child(odd){justify-content:flex-start}
.tpl-kit .stop:nth-child(even){justify-content:flex-end}
.tpl-kit .stop:nth-child(odd) .stop__card{text-align:right;transform:rotate(-.6deg)}
.tpl-kit .stop:nth-child(even) .stop__card{transform:rotate(.6deg)}
.tpl-kit .stop__label{font-family:var(--font-hand);font-size:1.3rem;color:var(--gold-deep);line-height:1;margin-bottom:.2rem}
.tpl-kit .stop__card .it{font-family:var(--font-display);font-weight:700;font-size:1.35rem;line-height:1.08}
.tpl-kit .stop__card .ph{font-family:var(--font-mono);font-size:.66rem;color:var(--ink-faint);margin:.1rem 0 .3rem}
.tpl-kit .stop__card .gl{font-family:var(--font-gloss);font-style:italic;color:var(--ink-soft);font-size:1.05rem}
.tpl-kit .stop__card .play{margin-top:.4rem;width:34px;height:34px;border-radius:999px;border:1px solid var(--rule);background:#fff;color:var(--terracotta-deep);cursor:pointer}
@media(max-width:620px){.tpl-kit .trail::before{left:28px}.tpl-kit .stop{justify-content:flex-end!important}.tpl-kit .stop__pin{left:28px;width:48px;height:48px}.tpl-kit .stop__pin span{font-size:1.2rem}.tpl-kit .stop__card{width:calc(100% - 74px);text-align:left!important;transform:none!important}}
.tpl-kit .wayside{position:relative;max-width:600px;margin:1rem auto 1.4rem;background:#fffdf8;border:1px solid var(--rule);border-radius:14px;padding:1.1rem 1.3rem;box-shadow:0 14px 32px rgba(80,50,20,.1);overflow:hidden}
.tpl-kit .wayside::before{content:"";position:absolute;inset:0;background:var(--note-img) center/cover;opacity:.12;mix-blend-mode:multiply}
.tpl-kit .wayside .lab{position:relative;font-family:var(--font-hand);font-size:1.4rem;color:var(--terracotta-deep)}
.tpl-kit .wayside h4{position:relative;font-family:var(--font-display);font-weight:700;font-size:1.2rem;margin:.2rem 0 .4rem}
.tpl-kit .wayside p{position:relative;margin:0;font-size:.98rem;line-height:1.6}
.tpl-kit .arrive{text-align:center;max-width:600px;margin:1.6rem auto .6rem;padding:0 1rem}
.tpl-kit .arrive .orn{color:var(--gold);font-family:var(--font-display);font-size:1.5rem}
.tpl-kit .arrive h2{font-family:var(--font-display);font-weight:800;font-size:1.8rem;margin:.2rem 0 .2rem}
.tpl-kit .arrive p{font-family:var(--font-gloss);font-style:italic;font-size:1.2rem;color:var(--ink-soft);margin:0}
.tpl-kit .storywrap{max-width:1040px;margin:0 auto;padding:1rem clamp(1rem,4vw,1.5rem) 3rem}

/* ── save-a-phrase bridge: star button, toast, notebook page ────────────────── */
.content-page .ca-save{margin-left:.35rem;color:var(--gold-deep);border-color:transparent;background:transparent}
.content-page .ca-save:hover{color:var(--terracotta-deep);transform:scale(1.12)}
.content-page .ca-save.saved{color:var(--terracotta-deep)}
.ca-toast{position:fixed;left:50%;bottom:1.4rem;transform:translate(-50%,1rem);background:var(--ink,#2a2320);color:#fff;
  font:600 .85rem/1.2 var(--font-ui,Inter,system-ui,sans-serif);padding:.7rem 1.1rem;border-radius:999px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;transition:opacity .25s,transform .25s;z-index:9999;pointer-events:none}
.ca-toast.on{opacity:1;transform:translate(-50%,0)}
/* Floating "save selection" button (mark a span of Italian -> notebook) */
.ca-sel-save{position:absolute;z-index:9998;display:inline-flex;align-items:center;gap:.3rem;
  font:700 .82rem/1 var(--font-ui,Inter,system-ui,sans-serif);color:#fff;
  background:var(--terracotta-deep,#b5532e);border:none;border-radius:999px;padding:.45rem .8rem;
  box-shadow:0 8px 22px rgba(120,50,20,.32);cursor:pointer;white-space:nowrap}
.ca-sel-save:hover{filter:brightness(1.06)}

/* notebook page */
.content-page .nb-empty{max-width:640px;margin:2rem auto;text-align:center;color:var(--ink-soft)}
.content-page .nb-empty p{font-size:1.15rem;line-height:1.6}
.content-page .nb-star{color:var(--gold-deep)}
.content-page .nb-cta,.content-page .nb-actions .nb-cta{display:inline-block;margin-top:1rem;background:var(--terracotta-deep);color:#fff;
  text-decoration:none;font-weight:600;padding:.7rem 1.3rem;border-radius:999px}
.content-page .nb-actions{max-width:720px;margin:1.5rem auto .5rem;display:flex;justify-content:space-between;align-items:center;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.content-page .nb-actions .nb-cta{margin-top:0;text-transform:none;letter-spacing:0;font-size:.85rem}
.content-page .nb-list{max-width:720px;margin:0 auto;display:grid;gap:.7rem}
.content-page .nb-card{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:center;
  background:#fff;border:1px solid var(--rule);border-radius:14px;padding:.9rem 1.1rem}
.content-page .nb-card .it{font-family:var(--font-display);font-weight:600;color:var(--ink)}
.content-page .nb-card .gl{font-family:var(--font-gloss);font-style:italic;color:var(--ink-soft)}
.content-page .nb-src{display:inline-block;margin-top:.2rem;font-family:var(--font-mono);font-size:.62rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);text-decoration:none}
.content-page .nb-src:hover{color:var(--terracotta-deep)}
.content-page .nb-remove{background:transparent;border:0;color:var(--ink-faint);font-size:.7rem;cursor:pointer;
  font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
.content-page .nb-remove:hover{color:var(--terracotta-deep)}

/* link_list — pillar index + in-body "related guides" */
.content-page .link-list{margin:2.2rem 0}
.content-page .link-list>h2{font-family:var(--font-display);font-size:1.5rem;margin:0 0 1rem;color:var(--ink)}
.content-page .link-list ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.content-page .link-list li{margin:0}
.content-page .link-list a{display:block;text-decoration:none;background:#fff;border:1px solid var(--rule);
  border-radius:14px;padding:.85rem 1.1rem;transition:border-color .15s ease,transform .15s ease}
.content-page .link-list a:hover{border-color:var(--terracotta-deep);transform:translateX(3px)}
.content-page .link-list .ll-title{display:block;font-family:var(--font-display);font-weight:600;
  font-size:1.08rem;color:var(--ink)}
.content-page .link-list .ll-title::after{content:" \2192";color:var(--terracotta-deep);font-weight:400}
.content-page .link-list .ll-note{display:block;margin-top:.2rem;font-family:var(--font-gloss);font-style:italic;
  color:var(--ink-soft);font-size:.97rem;line-height:1.45}

/* practice_drill — interactive type/speak rehearsal (#7) */
.content-page .drill{margin:2.4rem 0;padding:1.4rem 1.5rem;background:var(--paper-soft);
  border:1px solid var(--rule);border-radius:18px}
.content-page .drill>h2{font-family:var(--font-display);font-size:1.5rem;margin:0 0 .3rem;color:var(--ink)}
.content-page .drill-intro{margin:0 0 1rem;color:var(--ink-soft);font-family:var(--font-gloss);
  font-size:1.08rem;font-style:italic}
.content-page .drill-cards{list-style:none;margin:0;padding:0;display:grid;gap:.9rem;counter-reset:drill}
.content-page .drill-card{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:.95rem 1.1rem;
  transition:border-color .2s ease}
.content-page .drill-card.is-correct{border-color:var(--green);background:rgba(61,143,108,.06)}
.content-page .drill-prompt{margin:0 0 .6rem;font-weight:600;color:var(--ink);counter-increment:drill}
.content-page .drill-prompt::before{content:counter(drill)". ";color:var(--terracotta-deep)}
.content-page .drill-io{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.content-page .drill-input{flex:1 1 200px;min-width:140px;font-family:var(--font-ui);font-size:1rem;
  padding:.55rem .7rem;border:1px solid var(--rule);border-radius:10px;background:var(--paper);color:var(--ink)}
.content-page .drill-input:focus{outline:none;border-color:var(--terracotta-deep)}
.content-page .drill-check{font-family:var(--font-ui);font-weight:600;font-size:.92rem;cursor:pointer;
  padding:.55rem 1rem;border:0;border-radius:999px;background:var(--terracotta-deep);color:#fff}
.content-page .drill-check:hover{background:var(--terracotta)}
.content-page .drill-speak,.content-page .drill-listen{cursor:pointer;font-size:1.05rem;line-height:1;
  padding:.5rem .6rem;border:1px solid var(--rule);border-radius:999px;background:var(--paper)}
.content-page .drill-speak:hover,.content-page .drill-listen:hover{border-color:var(--terracotta-deep)}
.content-page .drill-speak.is-recording{background:var(--rose);color:#fff;border-color:var(--rose);
  animation:drillpulse 1s ease-in-out infinite}
.content-page .drill-speak.is-unsupported{display:none}
@keyframes drillpulse{0%,100%{opacity:1}50%{opacity:.55}}
.content-page .drill-feedback{min-height:0;margin-top:.5rem;font-size:.95rem;font-weight:600}
.content-page .drill-feedback.ok{color:var(--green)}
.content-page .drill-feedback.close{color:var(--gold-deep)}
.content-page .drill-feedback.no{color:var(--rose)}
.content-page .drill-feedback .heard{font-weight:400;font-style:italic;color:var(--ink-soft)}
.content-page .drill-reveal{margin-top:.55rem}
.content-page .drill-reveal summary{cursor:pointer;font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}
.content-page .drill-reveal[open] summary{color:var(--terracotta-deep)}
.content-page .drill-it{display:block;margin-top:.5rem;font-family:var(--font-display);font-weight:600;
  font-size:1.12rem;color:var(--ink)}
.content-page .drill-ipa{display:block;font-family:var(--font-mono);font-size:.8rem;color:var(--ink-faint)}
.content-page .drill-gloss{display:block;font-family:var(--font-gloss);font-style:italic;color:var(--ink-soft)}
.content-page .drill-note{margin:1rem 0 0;font-size:.82rem;color:var(--ink-faint)}

/* ====== /learn home RESTRUCTURE variants (lab, 2026-06-22) ====================== */
.tpl-library .lhv-switch{margin:1rem 0 0;padding:.5rem .8rem;border:1px dashed var(--rule);border-radius:10px;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.04em;color:var(--ink-soft)}
.tpl-library .lhv-switch a{color:var(--terracotta-deep);text-decoration:none}
.tpl-library .lhv-switch b{color:var(--ink)}
.tpl-library .lhv-eyebrow{margin:2.8rem 0 1.2rem;text-align:center}
.tpl-library .lhv-eyebrow h2{font-family:var(--font-display);font-size:clamp(1.6rem,4vw,2.3rem);margin:0;color:var(--ink)}
.tpl-library .lhv-eyebrow p{margin:.3rem 0 0;font-family:var(--font-gloss);font-style:italic;font-size:1.1rem;color:var(--ink-soft)}
.tpl-library .lhv-tag{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:var(--accent,var(--terracotta-deep));padding:.22rem .5rem;border-radius:999px}
.tpl-library .all{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent,var(--terracotta-deep));text-decoration:none;white-space:nowrap}

/* shared S-tier featured card */
.tpl-library .lhv-feat{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fff;
  border:1px solid var(--rule);border-top:3px solid var(--accent,var(--terracotta-deep));border-radius:16px;
  overflow:hidden;transition:transform .15s ease,box-shadow .15s ease}
.tpl-library .lhv-feat:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(80,50,20,.18)}
.tpl-library .lhv-feat__img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper-edge)}
.tpl-library .lhv-feat__img img{width:100%;height:100%;object-fit:cover}
.tpl-library .lhv-ribbon,.tpl-library .lhv-railcard .lhv-ribbon{position:absolute;top:.6rem;left:.6rem;
  font-family:var(--font-mono);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  background:var(--accent,var(--terracotta-deep));padding:.22rem .55rem;border-radius:999px;
  box-shadow:0 4px 12px rgba(0,0,0,.18)}
.tpl-library .lhv-feat__body{padding:.85rem 1rem 1.1rem}
.tpl-library .lhv-feat__body .rk{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent,var(--gold-deep))}
.tpl-library .lhv-feat__body .rt{font-family:var(--font-display);font-weight:600;font-size:1.22rem;line-height:1.15;
  margin:.3rem 0 .4rem;color:var(--ink)}
.tpl-library .lhv-feat__body p{margin:0;font-size:.9rem;line-height:1.5;color:var(--ink-soft)}

/* compact mini card */
.tpl-library .lhv-mini{display:flex;flex-direction:column;gap:.2rem;text-decoration:none;color:inherit;
  padding:.7rem .85rem;border:1px solid var(--rule);border-left:3px solid var(--accent,var(--rule));
  border-radius:10px;background:#fff;transition:border-color .15s ease}
.tpl-library .lhv-mini:hover{border-color:var(--accent,var(--terracotta-deep))}
.tpl-library .lhv-mini__t{font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--ink);line-height:1.2}
.tpl-library .lhv-mini__m{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}

/* --- Variant A: start-here two-tier --- */
.tpl-library .lhv-ess-row{margin:0 0 2rem}
.tpl-library .lhv-ess-head{display:flex;align-items:center;gap:.7rem;margin:0 0 .9rem}
.tpl-library .lhv-ess-head h3{font-family:var(--font-display);font-size:1.4rem;margin:0;color:var(--ink)}
.tpl-library .lhv-ess-head .all{margin-left:auto}
.tpl-library .lhv-ess-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.1rem}
.tpl-library .lhv-archive{margin-top:1rem}
.tpl-library .lhv-arc-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.6rem 2rem}
.tpl-library .lhv-arc-head{display:flex;align-items:baseline;gap:.6rem;border-bottom:2px solid var(--accent,var(--rule));
  padding-bottom:.35rem;margin-bottom:.7rem}
.tpl-library .lhv-arc-head h3{font-family:var(--font-display);font-size:1.15rem;margin:0;color:var(--ink)}
.tpl-library .lhv-arc-head .all{margin-left:auto}
.tpl-library .lhv-arc-grid{display:grid;gap:.5rem}

/* --- Variant B: departments with distinct layouts --- */
.tpl-library .lhv-dept{margin:2.6rem 0}
.tpl-library .lhv-dept-head{display:flex;align-items:center;gap:.7rem;margin:0 0 1rem}
.tpl-library .lhv-dept-head h3{font-family:var(--font-display);font-size:1.5rem;margin:0;color:var(--ink)}
.tpl-library .lhv-dept-head .rule{flex:1;height:1px;background:var(--accent,var(--rule));opacity:.5}
.tpl-library .lhv-rail{display:flex;gap:1rem;overflow-x:auto;padding:.3rem .2rem 1rem;scroll-snap-type:x mandatory}
.tpl-library .lhv-railcard{flex:0 0 240px;scroll-snap-align:start;text-decoration:none;color:inherit;background:#fff;
  border:1px solid var(--rule);border-radius:14px;overflow:hidden}
.tpl-library .lhv-railcard.is-ess{border-top:3px solid var(--accent,var(--terracotta-deep))}
.tpl-library .lhv-railcard__img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-edge)}
.tpl-library .lhv-railcard__img img{width:100%;height:100%;object-fit:cover}
.tpl-library .lhv-railcard .rt{display:block;padding:.6rem .8rem .9rem;font-family:var(--font-display);font-weight:600;
  font-size:1.05rem;line-height:1.2;color:var(--ink)}
.tpl-library .lhv-ruled{background:#fff;border:1px solid var(--rule);border-radius:14px;overflow:hidden}
.tpl-library .lhv-ruledrow{display:grid;grid-template-columns:minmax(180px,1fr) 2fr;gap:1rem;align-items:baseline;
  padding:.85rem 1.1rem;border-bottom:1px solid var(--rule-soft);text-decoration:none;color:inherit;
  background-image:linear-gradient(transparent 95%,var(--rule-soft) 0)}
.tpl-library .lhv-ruledrow:last-child{border-bottom:0}
.tpl-library .lhv-ruledrow:hover{background:var(--paper-soft)}
.tpl-library .lhv-ruledrow.is-ess{border-left:3px solid var(--accent,var(--green))}
.tpl-library .lhv-ruledrow__t{font-family:var(--font-display);font-weight:600;font-size:1.08rem;color:var(--ink)}
.tpl-library .lhv-ruledrow.is-ess .lhv-ruledrow__t::after{content:" · Essential";font-family:var(--font-mono);
  font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent,var(--green));vertical-align:middle}
.tpl-library .lhv-ruledrow__d{font-family:var(--font-gloss);font-style:italic;font-size:1rem;color:var(--ink-soft)}
.tpl-library .lhv-mosaic{display:grid;grid-template-columns:1.4fr 1fr;gap:1.2rem}
@media(max-width:760px){.tpl-library .lhv-mosaic{grid-template-columns:1fr}}
.tpl-library .lhv-mosaic__big{position:relative;text-decoration:none;color:inherit;border-radius:16px;overflow:hidden;
  min-height:260px;display:block;background:var(--paper-edge)}
.tpl-library .lhv-mosaic__big img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.tpl-library .lhv-mosaic__big.is-ess{outline:3px solid var(--accent,var(--gold-deep));outline-offset:-3px}
.tpl-library .lhv-mosaic__cap{position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1.1rem .9rem;color:#fff;
  background:linear-gradient(transparent,rgba(20,12,6,.78))}
.tpl-library .lhv-mosaic__cap .rk{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.tpl-library .lhv-mosaic__cap .rt{font-family:var(--font-display);font-weight:600;font-size:1.4rem;line-height:1.1;margin-top:.2rem}
.tpl-library .lhv-mosaic__grid{display:grid;gap:.5rem;align-content:start}
.tpl-library .lhv-chips{display:flex;flex-wrap:wrap;gap:.6rem}
.tpl-library .lhv-chip{text-decoration:none;font-family:var(--font-display);font-weight:600;font-size:1.05rem;
  color:var(--ink);background:#fff;border:1px solid var(--rule);border-radius:999px;padding:.55rem 1.1rem;
  transition:background .15s ease,color .15s ease}
.tpl-library .lhv-chip:hover{background:var(--accent,var(--rose));color:#fff;border-color:transparent}

/* --- Variant C: spotlight + quiet index --- */
.tpl-library .lhv-spotcols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
@media(max-width:860px){.tpl-library .lhv-spotcols{grid-template-columns:1fr}}
.tpl-library .lhv-spotcol h3{font-family:var(--font-display);font-size:1.35rem;margin:0;color:var(--ink)}
.tpl-library .lhv-spotsub{margin:.15rem 0 .9rem;font-family:var(--font-gloss);font-style:italic;color:var(--ink-soft)}
.tpl-library .lhv-spotitems{display:grid;gap:.6rem}
.tpl-library .lhv-spotitem{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--rule);
  border-radius:12px;padding:.8rem .95rem;transition:transform .15s ease,border-color .15s ease}
.tpl-library .lhv-spotitem:hover{transform:translateX(3px);border-color:var(--terracotta-deep)}
.tpl-library .lhv-spotitem__t{display:block;font-family:var(--font-display);font-weight:600;font-size:1.06rem;color:var(--ink)}
.tpl-library .lhv-spotitem__d{display:block;margin-top:.2rem;font-size:.85rem;line-height:1.45;color:var(--ink-soft)}
.tpl-library .lhv-index{margin-top:1rem}
.tpl-library .lhv-idxcols{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.4rem 2rem}
.tpl-library .lhv-idxcol h4{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  margin:0 0 .5rem;padding-bottom:.3rem;border-bottom:2px solid var(--accent,var(--rule))}
.tpl-library .lhv-idxcol h4 a{color:var(--ink);text-decoration:none}
.tpl-library .lhv-idxcol ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.tpl-library .lhv-idxcol li a{font-family:var(--font-gloss);font-size:1.08rem;color:var(--ink-soft);text-decoration:none}
.tpl-library .lhv-idxcol li a:hover{color:var(--terracotta-deep)}

/* ====== Round 2: implicit weighting + per-category personality (lab) ============ */
/* Clarity pass: one consistent skeleton — clear dividers, equal rhythm, a calm neutral
   rule, a small accent marker. Personality = accent colour + the section-heading font +
   one quiet signature; card titles stay one font so the page reads orderly. */
.tpl-library .lhv2-dept{margin:0;padding:2.9rem 0;border-top:1px solid var(--rule-soft)}
.tpl-library .lhv2-dept:first-of-type{border-top:0;padding-top:1.6rem}
.tpl-library .lhv2-head{display:flex;align-items:center;gap:.75rem;margin:0 0 1.4rem}
.tpl-library .lhv2-head h3{font-family:var(--font-display);font-size:1.55rem;margin:0;color:var(--ink);
  display:flex;align-items:center;gap:.6rem;line-height:1}
.tpl-library .lhv2-head h3::before{content:"";flex:0 0 auto;width:.7rem;height:.7rem;border-radius:3px;
  background:var(--accent,var(--terracotta-deep))}
.tpl-library .lhv2-rule{flex:1;height:1px;background:var(--rule)}
.tpl-library .lhv2-kicker{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent,var(--gold-deep))}
.tpl-library .lhv2-title{font-family:var(--font-display);font-weight:600;color:var(--ink);line-height:1.12}
.tpl-library .lhv2-snip{font-family:var(--font-gloss);font-style:italic;color:var(--ink-soft);line-height:1.5}
.tpl-library .lhv2-more{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent,var(--terracotta-deep))}

/* D — editorial departments: wide semi-open lead + grid */
.tpl-library .lhv2-lead{display:grid;grid-template-columns:1.1fr 1fr;gap:0;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--rule);border-radius:18px;overflow:hidden;margin-bottom:1.2rem;
  transition:box-shadow .15s ease,transform .15s ease}
.tpl-library .lhv2-lead:hover{transform:translateY(-3px);box-shadow:0 22px 50px rgba(80,50,20,.16)}
@media(max-width:720px){.tpl-library .lhv2-lead{grid-template-columns:1fr}}
.tpl-library .lhv2-lead__img{aspect-ratio:16/11;overflow:hidden;background:var(--paper-edge)}
.tpl-library .lhv2-lead__img img{width:100%;height:100%;object-fit:cover}
.tpl-library .lhv2-lead__body{padding:1.3rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;justify-content:center}
.tpl-library .lhv2-lead__body .lhv2-title{font-size:1.7rem}
.tpl-library .lhv2-lead__body .lhv2-snip{font-size:1.12rem}
.tpl-library .lhv2-rest{margin-top:.2rem}

/* E — watercolor collage: dominant S-tier tile, rest tiled around */
.tpl-library .lhv2-collage{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;grid-auto-rows:170px}
@media(max-width:860px){.tpl-library .lhv2-collage{grid-template-columns:repeat(2,1fr)}}
.tpl-library .lhv2-tile{position:relative;overflow:hidden;border-radius:14px;text-decoration:none;color:#fff;
  background:var(--paper-edge);display:block}
.tpl-library .lhv2-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tpl-library .lhv2-tile.is-lead{grid-column:span 2;grid-row:span 2}
.tpl-library .lhv2-tilecap{position:absolute;left:0;right:0;bottom:0;padding:1.2rem .9rem .85rem;
  background:linear-gradient(transparent,rgba(18,11,5,.55) 38%,rgba(18,11,5,.9));display:flex;
  flex-direction:column;gap:.2rem}
.tpl-library .lhv2-tilecap .lhv2-kicker{color:rgba(255,255,255,.82)}
.tpl-library .lhv2-tilecap .lhv2-title{color:#fff;font-size:1.1rem}
.tpl-library .lhv2-tile.is-lead .lhv2-title{font-size:1.7rem}
.tpl-library .lhv2-tilesnip{margin:.25rem 0 0;font-family:var(--font-gloss);font-style:italic;
  color:rgba(255,255,255,.9);font-size:1rem;line-height:1.4}

/* F — typographic reading list: type-weighted lead + quiet rows */
.tpl-library .lhv2-flead{display:flex;gap:1.2rem;align-items:flex-start;text-decoration:none;color:inherit;
  padding-bottom:1.1rem;margin-bottom:1rem;border-bottom:1px solid var(--rule)}
.tpl-library .lhv2-fthumb{flex:0 0 110px}
.tpl-library .lhv2-fthumb img{width:110px;height:110px;object-fit:cover;border-radius:12px}
.tpl-library .lhv2-fbody{display:flex;flex-direction:column;gap:.35rem}
.tpl-library .lhv2-flead .lhv2-title{font-size:clamp(1.6rem,3.2vw,2.3rem)}
.tpl-library .lhv2-flead .lhv2-snip{font-size:1.12rem}
.tpl-library .lhv2-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.2rem 2rem}
@media(max-width:720px){.tpl-library .lhv2-list{grid-template-columns:1fr}}
.tpl-library .lhv2-list li a{display:block;padding:.6rem 0;border-bottom:1px solid var(--rule-soft);text-decoration:none}
.tpl-library .lhv2-rt{display:block;font-family:var(--font-display);font-weight:600;font-size:1.12rem;color:var(--ink)}
.tpl-library .lhv2-rd{display:block;font-family:var(--font-gloss);font-style:italic;font-size:.98rem;color:var(--ink-soft)}
.tpl-library .lhv2-list li a:hover .lhv2-rt{color:var(--accent,var(--terracotta-deep))}

/* --- per-category PERSONALITY (disciplined: heading font + ONE quiet signature) ---
   Imagery is unified across the page (one subtle warm treatment) so adjacent sections
   don't clash; card/lead titles stay in the display font. Personality lives in the
   accent colour, the section-heading typeface, and a single restrained motif. */
.tpl-library .lhv2-dept img{filter:saturate(.97)}
/* grammar — notebook: serif-italic heading + faint ruled paper on the lead */
.tpl-library .lhv2-cat--grammar .lhv2-head h3{font-family:var(--font-gloss);font-style:italic;font-weight:600;font-size:1.7rem}
.tpl-library .lhv2-cat--grammar .lhv2-flead{
  background-image:repeating-linear-gradient(transparent,transparent 31px,rgba(61,143,108,.09) 32px)}
/* culture — gallery: airy serif heading */
.tpl-library .lhv2-cat--culture .lhv2-head h3{font-family:var(--font-display);letter-spacing:.015em}
/* idioms — playful: handwritten heading (one category only) */
.tpl-library .lhv2-cat--idioms .lhv2-head h3{font-family:var(--font-hand);font-weight:700;font-size:2rem}
/* pronunciation — sound: a dashed accent rule */
.tpl-library .lhv2-cat--pronunciation .lhv2-rule{
  background:repeating-linear-gradient(90deg,var(--accent) 0 5px,transparent 5px 11px)}

/* /learn/pronunciation hub */
.pron-hub {
  width: min(100% - 2rem, 1180px);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4.5rem) 0 1.5rem;
}
.pron-hub__hero {
  max-width: 820px;
  margin: 1.5rem 0 1.75rem;
}
.pron-hub__kicker,
.pron-section-head p,
.pron-feature__kicker,
.pron-food__kicker,
.pron-sound-card span {
  margin: 0 0 0.55rem;
  font: 800 0.68rem/1.2 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta, #b45f42);
}
.pron-hub h1 {
  margin: 0;
  max-width: 11ch;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: 0.9;
  color: var(--ink, #1f1a16);
}
.pron-hub__hero p {
  max-width: 62ch;
  margin: 1.15rem 0 0;
  color: var(--muted, #5f554c);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.62;
}
.pron-hub__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.3rem;
}
.pron-hub__actions a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0.65rem 0.95rem;
  border: 1px solid rgba(159, 92, 62, 0.24);
  border-radius: 999px;
  color: var(--ink, #1f1a16);
  background: rgba(255, 252, 246, 0.72);
  font-weight: 800;
  text-decoration: none;
}
.pron-hub__features {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.75fr);
  gap: 1rem;
}
.pron-feature,
.pron-food,
.pron-sound-card {
  color: inherit;
  text-decoration: none;
}
.pron-feature {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1fr);
  min-height: 280px;
  border: 1px solid rgba(118, 96, 72, 0.14);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 252, 246, 0.78);
  box-shadow: 0 18px 50px rgba(47, 35, 22, 0.08);
}
.pron-feature__img {
  display: block;
  min-height: 100%;
}
.pron-feature__img picture,
.pron-feature__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pron-feature__body,
.pron-food {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.2rem, 3vw, 2rem);
}
.pron-feature strong,
.pron-food strong {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  line-height: 1.04;
  color: var(--ink, #1f1a16);
}
.pron-feature em,
.pron-food em,
.pron-sound-card em {
  display: block;
  margin-top: 0.75rem;
  color: var(--muted, #5f554c);
  font-style: normal;
  line-height: 1.52;
}
.pron-food {
  min-height: 280px;
  border: 1px solid rgba(118, 96, 72, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 252, 246, 0.86), rgba(242, 232, 216, 0.78)),
    url("/learn-img/john_smith/524830ldsdl.jpg?w=800") center / cover;
  box-shadow: 0 18px 50px rgba(47, 35, 22, 0.07);
}
.pron-sounds,
.pron-library {
  width: min(100% - 2rem, 1180px);
  margin: clamp(2.5rem, 6vw, 4.5rem) auto 0;
}
.pron-section-head {
  margin-bottom: 1rem;
}
.pron-section-head h2 {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.75rem, 4vw, 3rem);
  color: var(--ink, #1f1a16);
}
.pron-sound-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}
.pron-sound-card {
  min-height: 168px;
  padding: 1rem;
  border: 1px solid rgba(118, 96, 72, 0.14);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.82);
}
.pron-sound-card strong {
  display: block;
  font-size: 1.05rem;
  color: var(--ink, #1f1a16);
}
@media (max-width: 840px) {
  .pron-hub__features,
  .pron-feature,
  .pron-sound-grid {
    grid-template-columns: 1fr;
  }
  .pron-feature__img {
    aspect-ratio: 16 / 9;
  }
}
/* history — archival: serif heading + a faint warm wash on its imagery */
.tpl-library .lhv2-cat--history .lhv2-head h3{font-family:var(--font-gloss)}
.tpl-library .lhv2-cat--history img{filter:sepia(.18) saturate(.92)}

/* Round 3: curated mix — compact (D-lite) card + compacts row */
.tpl-library .lhv2-compacts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1.4rem 1.8rem;margin-top:1rem}
.tpl-library .lhv2-mix--compact{margin:0}
.tpl-library .lhv2-mix--compact .lhv2-head h3{font-size:1.15rem}
.tpl-library .lhv2-compact{display:flex;gap:.9rem;align-items:stretch;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--rule);border-left:3px solid var(--accent,var(--rule));
  border-radius:14px;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease}
.tpl-library .lhv2-compact:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(80,50,20,.14)}
.tpl-library .lhv2-compact__img{flex:0 0 96px;overflow:hidden;background:var(--paper-edge)}
.tpl-library .lhv2-compact__img img{width:96px;height:100%;object-fit:cover}
.tpl-library .lhv2-compact__body{padding:.7rem .9rem;display:flex;flex-direction:column;gap:.2rem;justify-content:center}
.tpl-library .lhv2-compact__body .lhv2-title{font-size:1.12rem}
.tpl-library .lhv2-compact__body .lhv2-snip{font-size:.95rem}
/* in the mix, sections get a touch more breathing room */
.tpl-library .lhv2-mix--feature,.tpl-library .lhv2-mix--list,.tpl-library .lhv2-mix--collage{margin:2.6rem 0}
.tpl-library .lhv2-mix--feature .lhv2-rest .lib-card .rt{font-size:1.15rem}
/* capped collage: dominant lead tile + two stacked beside it */
.tpl-library .lhv2-collage--mini{grid-template-columns:repeat(3,1fr);grid-auto-rows:140px}
@media(max-width:860px){.tpl-library .lhv2-collage--mini{grid-template-columns:repeat(2,1fr)}}


/* ── Embedded ISA speech-test — say one word, one dimension checked ─────────── */
.speech-test{margin:1.8rem 0 2rem;border:1px solid var(--rule);border-radius:16px;
  background:var(--paper-soft);padding:1.1rem 1.2rem 1.2rem;position:relative}
.speech-test .st-kicker{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--terracotta-deep)}
.st-word{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin:.5rem 0 .9rem}
.st-word .it{font-family:var(--font-display);font-weight:700;font-size:1.6rem;color:var(--ink)}
.st-word .ipa{font-family:var(--font-mono);font-size:.8rem;color:var(--ink-faint);margin-left:.45rem}
.st-word .gl{font-family:var(--font-gloss);font-style:italic;font-size:1.15rem;color:var(--ink-soft)}
.st-controls{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.st-listen{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--rule);background:#fff;
  color:var(--terracotta-deep);border-radius:999px;padding:.5rem .9rem;font-family:var(--font-ui);
  font-size:.9rem;cursor:pointer;transition:.18s}
.st-listen:hover{background:var(--terracotta);color:#fff;border-color:transparent}
.st-listen--alt{font-style:italic;color:var(--ink-soft)}
.st-record{display:inline-flex;align-items:center;gap:.4rem;border:none;background:var(--terracotta);
  color:#fff;border-radius:999px;padding:.55rem 1.1rem;font-family:var(--font-ui);font-weight:600;
  font-size:.92rem;cursor:pointer;transition:.18s}
.st-record:hover{background:var(--terracotta-deep)}
.st-record:disabled{opacity:.7;cursor:default}
.st-record.is-recording{background:var(--rose);animation:st-pulse 1s ease-in-out infinite}
@keyframes st-pulse{0%,100%{box-shadow:0 0 0 0 rgba(184,92,74,.5)}50%{box-shadow:0 0 0 8px rgba(184,92,74,0)}}
.st-prompt{font-family:var(--font-gloss);font-style:italic;font-size:1.08rem;color:var(--ink-soft);margin:.8rem 0 0}
.st-result{margin-top:1rem}
.st-card{border-radius:12px;padding:.9rem 1rem;border:1px solid var(--rule);background:#fff}
.st-card.st-ok{background:rgba(61,143,108,.08);border-color:rgba(61,143,108,.4)}
.st-card.st-off{border-left:3px solid var(--terracotta)}
.st-title{font-family:var(--font-display);font-weight:700;font-size:1.12rem;color:var(--ink);margin:0 0 .3rem}
.st-card.st-ok .st-title{color:var(--green)}
.st-problem{font-size:.95rem;color:var(--ink-soft);margin:0 0 .4rem;line-height:1.5}
.st-fix{font-size:.95rem;color:var(--ink);margin:.5rem 0 0;line-height:1.5}
.st-fix::before{content:"\2192 ";color:var(--terracotta-deep);font-weight:700}
.st-viz{display:grid;gap:.35rem;margin:.6rem 0}
.st-bar{display:grid;grid-template-columns:3.2rem 1fr auto;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:.72rem;color:var(--ink-faint)}
.st-bar i{height:9px;border-radius:999px;background:var(--terracotta);display:block;min-width:2px}
.st-bar--nat i{background:var(--green)}
.st-cta{display:inline-block;margin-top:.7rem;font-family:var(--font-ui);font-weight:600;
  font-size:.9rem;color:var(--terracotta-deep);text-decoration:none}
.st-cta:hover{text-decoration:underline}
.st-locked .st-locktext,.st-err{font-family:var(--font-gloss);font-style:italic;color:var(--ink-soft);margin:0}
.st-err{color:var(--rose)}