/* Cave Spring Park — World 16 (copied from the Mayor’s Office: the shared Engine 2 world look (same frame, cards, easel and finale as the Civic Center),
   plus the Mayor’s Office pieces (Mayor Sharpe in the room, Visitors Log, Big Idea card, proclamation parchment, golden envelope, certificate) at the bottom. */
/* ---------- Frame ---------- */
main{position:fixed;z-index:10;left:0;right:0;top:var(--bar);bottom:0;padding:18px max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));outline:none;overflow:clip}
body.titled main{top:0;padding:0}

/* ---------- Title (the stitched page) & film ---------- */
.title{position:absolute;inset:0;display:flex;align-items:flex-end;padding:0 0 calc(7.5vh + 26px) max(5vw,20px)}
.title::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,10,22,.88) 0%,rgba(4,10,22,.55) 38%,transparent 66%),linear-gradient(0deg,rgba(4,10,22,.75),transparent 45%);pointer-events:none}
.title-in{position:relative;max-width:min(640px,92vw)}
.title .logo{width:clamp(84px,11vh,124px);height:auto;margin-bottom:clamp(10px,2vh,22px);filter:drop-shadow(0 8px 20px rgba(0,0,0,.55))}
.title .eyebrow{color:var(--gold);font-size:13px}
.title h1{font-size:clamp(44px,8vh,98px);color:var(--ivory);margin:12px 0 10px;text-shadow:0 4px 30px rgba(0,0,0,.6);font-weight:600}
.title h1 em{font-style:italic;color:var(--gold);font-weight:500}
.title .tag{font:500 clamp(18px,2.6vh,24px)/1.4 var(--display);font-style:italic;color:#efe7d3;margin:0 0 clamp(16px,3vh,28px);text-shadow:0 2px 10px rgba(0,0,0,.7)}
.title .row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.title .opts{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:clamp(14px,2.6vh,24px);font-weight:700;font-size:15px}
.title .opts label{display:flex;align-items:center;gap:9px;min-height:40px;cursor:pointer}
.title .opts input{width:20px;height:20px;accent-color:var(--gold)}
.title .fine{font:800 11px/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;color:rgba(248,243,231,.75);margin:14px 0 0}
.skipbtn{position:fixed;z-index:50;right:max(18px,env(safe-area-inset-right));bottom:calc(7.5vh + 18px);min-height:44px;padding:0 18px;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;border:1px solid rgba(255,255,255,.35);font-weight:800;backdrop-filter:blur(6px)}
.film-start{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:rgba(0,0,0,.6);color:#fff;font:600 28px var(--display);cursor:pointer;text-align:center;padding:20px}
.film-start small{display:block;font:700 14px var(--body);letter-spacing:.14em;margin-top:10px;opacity:.75;text-transform:uppercase}
body.film,body.film *{cursor:none!important}
body.film .caption{font-size:clamp(22px,2.8vw,40px)}
.endcard{position:fixed;inset:0;z-index:44;display:grid;place-items:center;text-align:center;opacity:0;transition:opacity 1.2s;pointer-events:none}
.endcard.on{opacity:1}
.endcard::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 50%,rgba(4,10,22,.72),rgba(4,10,22,.25))}
.endcard>div{position:relative}
.endcard img{width:clamp(120px,22vh,220px);margin:0 auto 18px;filter:drop-shadow(0 10px 30px rgba(0,0,0,.6))}
.endcard h2{font-size:clamp(34px,6vh,70px);color:var(--ivory)}
.endcard p{font:800 clamp(13px,1.8vh,17px)/1.5 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:14px 0 0}

/* ---------- Getting ready (solo card) ---------- */
.solo{height:100%;display:grid;place-items:center}
@media (min-width:1000px){.solo{justify-items:start;padding-left:4vw}}
.solo .felt{width:min(560px,100%);max-height:100%;overflow:auto;padding:clamp(24px,4.5vh,44px) clamp(22px,4vw,48px)}
.solo h2{font-size:clamp(30px,5vh,50px);color:var(--navy);margin:10px 0 8px}
.solo .sub{font-size:clamp(16px,2.2vh,19px);color:var(--ink-soft);margin:0 0 18px}
.hello h2{font-size:clamp(44px,8vh,84px);margin:8px 0 14px}
.hello h2 em{font-style:italic;color:var(--gold-deep)}
.hello .joyline{font-size:clamp(17px,2.4vh,21px);padding:14px 52px 14px 18px}
.namebox{width:100%;min-height:62px;border-radius:16px;border:2px solid #d3c6a8;background:#fff;padding:10px 18px;font:400 clamp(24px,3.6vh,32px) var(--hand);color:var(--navy)}
.namebox.small{min-height:50px;font-size:clamp(21px,2.8vh,26px);padding:6px 14px}
.namebox:focus{outline:3px solid var(--gold);border-color:var(--gold-deep)}
.levels{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.levels button{min-height:clamp(58px,9vh,84px);border-radius:16px;border:2px solid #d8ccb0;background:#fffdf7;color:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:600 clamp(22px,3.4vh,30px)/1 var(--display);transition:transform .15s,border-color .15s,background .15s}
.levels button small{font:800 11px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.levels button[aria-pressed="true"]{background:var(--navy);color:var(--ivory);border-color:var(--navy);transform:translateY(-2px)}
.levels button[aria-pressed="true"] small{color:var(--gold)}
.grownup-note{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:12px 14px;border-radius:12px;background:#f1ead8;font-size:14px;color:var(--ink)}

/* ---------- Story cards over the picture ---------- */
.story{height:100%;max-width:1500px;margin:0 auto;display:grid;align-items:center;padding:0 clamp(0px,2vw,32px)}
.story.side-l{justify-items:start}
.story.side-r{justify-items:end}
.story .qcard{width:min(540px,44vw);max-height:100%}
.qcard{min-height:0;display:flex;flex-direction:column;padding:clamp(18px,3vh,32px) clamp(20px,2.6vw,36px);overflow:auto;overscroll-behavior:contain;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.qcard>*{position:relative}
.qcard .eyebrow{display:flex;align-items:center;gap:10px;justify-content:space-between}
.qcard .eyebrow .lvl{color:var(--ink-soft);letter-spacing:.12em}
.qcard h2{font-size:clamp(28px,4.4vh,46px);color:var(--navy);margin:clamp(8px,1.6vh,14px) 0 4px;text-wrap:balance}
.qcard .prompt{margin:clamp(8px,1.4vh,12px) 0 0;padding-left:12px;border-left:3px solid var(--gold);font-size:clamp(14.5px,1.95vh,17px);line-height:1.45;color:var(--ink-soft)}
.story.k-story .joyline,.story.k-mission .joyline,.story.k-celebrate .joyline,.story.k-library .joyline,.story.k-next .joyline{font-size:clamp(18px,2.6vh,23px);line-height:1.45}
/* Look closer: the card steps aside so the picture is the whole screen */
body.peek main .qcard{animation:none;opacity:0;visibility:hidden;transform:translateY(24px);pointer-events:none}
body.peek .bar{opacity:.0;pointer-events:none}
.peekback{position:fixed;z-index:46;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%);min-height:50px;padding:0 24px;border-radius:999px;background:var(--gold);color:var(--navy);font-weight:800;font-size:16px;box-shadow:0 4px 0 var(--gold-deep),0 10px 30px rgba(0,0,0,.4);animation:rise .5s var(--ease) both}

/* ---------- Ms. Joy speaking ---------- */
.joyline{position:relative;display:flex;gap:12px;align-items:flex-start;margin:clamp(8px,1.5vh,14px) 0 0;padding:10px 52px 10px 12px;border-radius:16px;background:#fdf1d4;border:1.5px solid #f0d58e;font:500 clamp(15px,2vh,18px)/1.45 var(--display);color:var(--navy)}
.joyline b{font:800 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);display:block;margin-bottom:4px}
.joyline .face{width:46px;height:46px;border-radius:50%;flex:none;background:#f3e2b5 center/cover no-repeat;border:2px solid var(--gold)}
.joyline .say{min-width:0}
.joyline .again{position:absolute;right:8px;top:8px;width:36px;height:36px;border-radius:50%;background:#fff;border:1.5px solid #f0d58e;font-size:16px;line-height:1;display:grid;place-items:center}
.joyline .again:hover{border-color:var(--gold-deep)}

/* ---------- Answers: words, voice, drawing ---------- */
.answer{display:flex;flex-direction:column;gap:8px;margin-top:clamp(10px,1.8vh,16px)}
.answer label.lbl{font:800 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink)}
.answer .opt{font-weight:700;letter-spacing:.04em;text-transform:none;color:var(--ink-soft)}
.answer textarea{height:clamp(84px,15vh,150px);width:100%;resize:none;border-radius:16px;border:2px solid #d8ccb0;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='38'><line x1='0' y1='37' x2='10' y2='37' stroke='%23e8dcc0' stroke-width='1.5'/></svg>") 0 10px/10px 38px;padding:10px 16px;font:400 clamp(21px,2.8vh,26px)/38px var(--hand);color:var(--navy)}
.answer textarea.short{height:clamp(56px,8vh,80px);line-height:32px;background-size:10px 32px;font-size:21px}
.answer textarea:focus{outline:3px solid rgba(242,184,43,.8);border-color:var(--gold-deep)}
.tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(6px,1.2vh,10px)}
.tool .short{display:none}
.tools.look{margin-top:clamp(10px,1.8vh,16px)}
.recrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;border-radius:14px;background:#f1ead8;font-size:14px}
.recrow audio{flex:1;min-width:180px;height:36px}
.err{color:#a33a24;font-weight:800;font-size:15px;margin:8px 0 0}
.err:empty,.msg:empty{display:none}
.errjoy{display:block;margin-top:4px;font:500 15px/1.4 var(--display);color:var(--navy)}
.errjoy:empty{display:none}
.msg{font-size:14px;color:var(--ink-soft);margin:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{max-width:100%;padding:7px 13px;border-radius:999px;background:#eef6f4;border:1.5px solid #9fcfc8;color:var(--ink);font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drawtools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.swatch{width:34px;height:34px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1.5px #bdb19a}
.swatch.on{box-shadow:0 0 0 3px var(--navy)}
canvas.draw{height:clamp(120px,24vh,280px);width:100%;border-radius:16px;border:2px solid #cebd98;background:#fffaf0;touch-action:none;display:block}

/* ---------- Mission, celebration, library ---------- */
.mission{position:relative;margin-top:clamp(12px,2vh,18px);padding:clamp(14px,2.6vh,24px) 18px;text-align:center;border-radius:16px;background:#fcf8ef;border:1.5px solid #dfd3b9}
.mission .seal{width:clamp(48px,7vh,70px);height:clamp(48px,7vh,70px);margin:0 auto clamp(8px,1.4vh,14px);border-radius:50%;border:5px double var(--gold-deep);display:grid;place-items:center;font:600 clamp(24px,3.6vh,34px) var(--display);color:var(--gold-deep)}
.mission .eyebrow{color:var(--gold-deep);margin-bottom:8px}
.mission h3{font-size:clamp(24px,3.6vh,34px);color:var(--navy);margin:6px 0 8px}
.mission p{margin:0;font:500 clamp(15px,2vh,18px)/1.5 var(--display);font-style:italic;color:var(--ink)}
.mission .checks{display:flex;justify-content:space-between;gap:8px;border-top:1.5px dashed var(--line);margin-top:clamp(10px,2vh,16px);padding-top:clamp(8px,1.6vh,12px);font:800 11px var(--body);letter-spacing:.12em;color:var(--teal-ink)}
.badge{display:flex;align-items:center;gap:16px;padding:12px 0;border-top:1.5px dashed var(--line);border-bottom:1.5px dashed var(--line);margin:clamp(10px,2vh,16px) 0 4px;font-weight:800;color:var(--navy)}
.badge img{width:clamp(64px,11vh,104px);height:auto;border-radius:12px}
.badge img.stamped{animation:stamp .7s cubic-bezier(.2,1.6,.4,1) both 1s}
@keyframes stamp{0%{transform:scale(2.4) rotate(-14deg);opacity:0}100%{transform:scale(1) rotate(-4deg);opacity:1}}
.badge small{display:block;font-weight:600;color:var(--ink-soft)}
.libnote{margin-top:clamp(12px,2vh,16px);padding:14px 16px;border-radius:14px;background:#e8f4f1;border:1.5px solid #b7dcd5;font-size:clamp(15px,2vh,17px);color:var(--ink)}
.libnote b{display:block;font:600 clamp(20px,2.8vh,26px)/1.1 var(--display);color:var(--navy);margin-bottom:6px}
.libnote span{display:block;margin-top:8px;font-weight:800;color:var(--teal-ink)}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:clamp(12px,2vh,16px)}
.nbex{margin:clamp(10px,1.8vh,16px) 0 0;padding:0;list-style:none;display:grid;gap:8px}
.nbex li{padding:10px 14px;border-radius:12px;background:#fffdf7;border:1.5px dashed #d8ccb0;font:400 clamp(19px,2.6vh,23px)/1.25 var(--hand);color:var(--navy)}

/* ---------- Kit: bookbag, Idea Notebook, passport ---------- */
.stage{height:100%;max-width:1440px;margin:0 auto;display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:clamp(16px,2.4vw,34px)}
.stage>.qcard{max-height:100%;align-self:center}
.showcase{position:relative;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.spot{position:absolute;inset:-6% -2%;background:radial-gradient(48% 46% at 50% 50%,rgba(255,226,160,.26),transparent 70%);pointer-events:none}
.pp{position:relative;width:min(100%,640px,92vh);aspect-ratio:850/567;container-type:inline-size;filter:drop-shadow(0 26px 40px rgba(0,0,0,.5))}
.pp .base{width:100%;height:100%}
.pp .sym{position:absolute;left:16.5%;top:15.5%;width:22%;height:25%;object-fit:contain;transition:transform .3s}
.pp .ln{position:absolute;left:11.5%;width:31%;text-align:center;font:400 3.6cqw/1 var(--hand);color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp .l1{top:49%;font-size:4cqw}.pp .l2{top:58.5%;letter-spacing:.06em}.pp .l3{top:67.5%;font-size:3.2cqw;color:var(--teal-ink)}
.pp .st{position:absolute;left:55.5%;top:13%;width:17%;transform:rotate(-7deg);border-radius:8px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.item{position:relative;height:min(100%,66vh,620px);aspect-ratio:1;max-width:100%;container-type:inline-size;filter:drop-shadow(0 24px 36px rgba(0,0,0,.45))}
.item .base{width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.patch{position:absolute;transform:translate(-50%,-50%);line-height:0;touch-action:none;border-radius:10px;padding:0}
.patch img{width:100%;pointer-events:none;user-select:none;filter:drop-shadow(0 3px 3px rgba(0,0,0,.35))}
button.patch{cursor:grab}
.patch.sel{outline:3px dashed var(--gold);outline-offset:3px}
.booktitle{position:absolute;left:28%;top:16%;width:49%;height:14%;display:grid;place-items:center;text-align:center;padding:0 3%;font:600 5.4cqw/1.02 var(--display);color:var(--navy);overflow:hidden;pointer-events:none}
.swatches{display:flex;gap:10px;margin:clamp(8px,1.4vh,12px) 0 2px}
.swatches .swatch{width:42px;height:42px}
.hint-line{font-size:14px;color:var(--ink-soft);margin:8px 0 6px}
.patchgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:clamp(8px,1.4vh,12px)}
.patchgrid button{aspect-ratio:1;border-radius:14px;border:2px solid #e2d6bb;background:#fffdf7;padding:6px;transition:transform .12s,border-color .12s}
.patchgrid button:hover{transform:translateY(-2px);border-color:var(--gold-deep)}
.patchgrid button[aria-pressed="true"]{border-color:var(--navy);background:#f1ead8;box-shadow:0 0 0 2px var(--navy)}
.patchgrid img{width:100%;height:100%;object-fit:contain}
.patchgrid.small{max-width:440px}
.chips.titles{margin-top:8px}
.passrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:clamp(10px,1.8vh,14px)}
.passrow .tools{margin:0}
.passno{font:700 clamp(22px,3.4vh,32px)/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em;color:var(--navy);background:#f1ead8;border:2px dashed var(--gold-deep);border-radius:12px;padding:9px 14px;margin:0}
.pnote{margin:10px 0 0}

/* ---------- Finale & the notebook ---------- */
.finale{height:100%;max-width:1380px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(16px,3vw,44px);align-items:center}
.finale .felt.win{padding:clamp(22px,4vh,44px) clamp(22px,3vw,44px);max-height:100%;overflow:auto}
.finale h2{font-size:clamp(36px,6.4vh,72px);color:var(--navy);margin:10px 0 12px}
.finale p.lede{font-size:clamp(16px,2.3vh,19px);color:var(--ink);margin:0 0 6px}
.finale .cardwrap{max-height:100%;min-height:0;overflow:auto;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.finale .phone-card{display:none}
.cardsheet{background:#f8f3e7;box-shadow:inset 0 0 0 10px #f8f3e7,inset 0 0 0 12px #c48d14;border-radius:18px;padding:clamp(40px,7vh,64px) 13% clamp(52px,9vh,80px)}
.cc .eyebrow{color:var(--teal-ink)}
.cc h3{font-size:clamp(26px,3.6vh,36px);color:var(--navy);margin:8px 0 4px}
.cc h4{font:800 11.5px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin:14px 0 4px}
.cc p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:400 20px/1.35 var(--hand);color:var(--navy)}
.cc p.small{font:600 13px/1.4 var(--body);color:var(--ink-soft)}
.cc .by{font:700 13px var(--body);color:var(--ink-soft)}
.cc img.drawn{width:100%;max-height:220px;object-fit:contain;margin-top:10px;border-radius:12px;background:#fffaf0;border:1px solid var(--line)}
.cc audio{width:100%;height:36px;margin-top:6px}
.cc .empty-note{font:600 15px/1.5 var(--body);color:var(--ink-soft);text-align:center;padding:10px 0}

/* ---------- Sheets ---------- */
.kitrow{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:12px;align-items:end;margin:4px 0 8px}
.kitrow figure{margin:0;text-align:center}
.kitrow .item{height:auto;width:100%;filter:drop-shadow(0 8px 12px rgba(0,0,0,.25))}
.kitrow .pp{width:100%;filter:drop-shadow(0 8px 12px rgba(0,0,0,.25))}
.kitrow figcaption{font-weight:800;font-size:13px;color:var(--navy);margin-top:4px}
.rubric label{display:grid;grid-template-columns:1fr 170px;gap:12px;align-items:center;margin:8px 0;font-size:14px}
.rubric select,.sheet textarea{width:100%;border:1.5px solid #cfc3a6;border-radius:10px;background:#fffdf7;padding:9px;color:var(--ink)}
.sheet details{margin:10px 0}
.sheet summary{cursor:pointer;font-weight:800;color:var(--navy);min-height:36px}
.sheet a{color:var(--teal-ink);font-weight:700}
.sheet a.btn{color:var(--navy)}

/* ---------- Languages ---------- */
.langs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(14px,2.4vh,22px)}
.langs button{min-height:40px;padding:0 14px;border-radius:999px;font-weight:800;font-size:14px;color:var(--ivory);background:rgba(255,255,255,.08);border:1.5px solid rgba(248,243,231,.35)}
.langs button[aria-pressed="true"]{background:var(--ivory);color:var(--navy);border-color:var(--ivory)}
.langs.small{margin:0 0 6px}
.pop .langs button{color:var(--ink);background:#fffdf7;border-color:#d3c6a8;min-height:36px;font-size:13px;padding:0 11px}
.pop .langs button[aria-pressed="true"]{background:var(--navy);color:var(--ivory);border-color:var(--navy)}
.pop .poplabel{font:800 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink);margin:2px 0 6px}
.pop .popbtns{gap:8px;flex-wrap:wrap;margin:6px 0}
.pop{max-height:calc(100dvh - var(--bar) - 20px);overflow:auto}

/* ---------- Shorter laptop screens ---------- */
@media (max-height:760px) and (min-width:760px){
  .qcard h2{font-size:clamp(26px,4.2vh,36px)}
  .joyline{font-size:15.5px;padding:8px 50px 8px 10px}
  .joyline .face{width:40px;height:40px}
  .story.k-story .joyline,.story.k-mission .joyline,.story.k-celebrate .joyline,.story.k-library .joyline,.story.k-next .joyline{font-size:clamp(16.5px,2.5vh,20px)}
  .tool{min-height:38px}
  .tool .short{display:inline}.tool .long{display:none}
  .patchgrid{gap:6px}.patchgrid.small{max-width:360px}
  .swatches .swatch{width:36px;height:36px}
  .hint-line{display:none}
  .mission .seal{display:none}
  .badge img{width:64px}
  .badge{padding:8px 0}
}
@media (max-height:620px){
  .title h1{font-size:clamp(36px,8vh,60px)}
  .title .logo{display:none}
  .title .langs{margin-bottom:10px}
  .qcard .prompt{display:none}
}

/* ---------- Phones & tall screens: the picture on top, the card below ---------- */
@media (max-width:899px){
  .story{align-items:end;justify-items:stretch!important;padding:0}
  .story .qcard{width:100%;max-height:64%}
  .stage{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,34%) minmax(0,1fr);gap:10px}
  .stage .item{height:100%}
  .pp{width:min(100%,50vh)}
  .stage .qcard{align-self:stretch}
  .story.k-draw .qcard{max-height:86%}
  .story.k-draw .prompt{display:none}
}
@media (max-width:759px){
  main{padding:10px 10px max(10px,env(safe-area-inset-bottom))}
  .qcard{padding:14px 16px 14px;border-radius:16px}
  .qcard h2{font-size:clamp(23px,3.8vh,32px);margin:6px 0 2px}
  .qcard .prompt{font-size:14px;padding-left:10px}
  .joyline{padding:8px 46px 8px 10px;font-size:15px;line-height:1.4;gap:10px}
  .joyline .face{width:36px;height:36px}
  .joyline .again{width:32px;height:32px;right:6px;top:6px}
  .story.k-story .joyline,.story.k-mission .joyline,.story.k-celebrate .joyline,.story.k-library .joyline,.story.k-next .joyline{font-size:17px}
  .tool{min-height:40px;padding:0 11px;font-size:13.5px}
  .tools{gap:6px}
  .tool .short{display:inline}.tool .long{display:none}
  .answer{gap:6px;margin-top:8px}
  .answer textarea{height:clamp(64px,11vh,110px);font-size:21px;line-height:32px;background-size:10px 32px}
  .answer textarea.short{height:52px}
  canvas.draw{height:clamp(100px,20vh,200px)}
  .swatch{width:30px;height:30px}
  .levels{grid-template-columns:repeat(5,1fr);gap:6px}
  .levels button{min-height:54px;font-size:21px;border-radius:12px}
  .levels button small{font-size:8.5px;letter-spacing:.02em}
  .solo{place-items:end center}
  .solo .felt{padding:20px 18px}
  .hello h2{font-size:40px;margin:4px 0 8px}
  .hello .joyline{font-size:16px;padding:10px 46px 10px 12px}
  .solo .grownup-note{font-size:13px;padding:8px 10px;margin-top:10px}
  .namebox{min-height:52px;font-size:24px}
  .mission{padding:10px 12px}
  .mission .seal,.mission .checks{display:none}
  .mission h3{font-size:22px;margin:2px 0 4px}
  .mission p{font-size:15px}
  .badge{padding:8px 0}.badge img{width:56px}
  .libnote{padding:10px 12px;font-size:14.5px}
  .nbex{gap:6px}.nbex li{padding:7px 12px;font-size:18px}
  /* kit steps: the bag, notebook or passport on top */
  .stage{grid-template-rows:30vh minmax(0,1fr);gap:8px}
  .stage.pass{grid-template-rows:auto minmax(0,1fr)}
  .stage .item{height:30vh}
  .pp{width:min(100%,44vh)}
  .stage .qcard{align-self:stretch}
  .stage .qcard .joyline{display:none}
  .patchgrid{gap:5px}.patchgrid button{padding:3px;border-radius:10px}
  .swatches{gap:8px}.swatches .swatch{width:34px;height:34px}
  .hint-line{display:none}
  .chips.titles{display:none}
  .passno{font-size:21px;padding:7px 10px}
  .finale{grid-template-columns:minmax(0,1fr)}
  .finale .cardwrap{display:none}
  .finale .phone-card{display:inline-flex}
  .finale h2{font-size:clamp(30px,5vh,40px);margin:6px 0 8px}
  .kitrow{grid-template-columns:1fr 1fr 1fr}
  .rubric label{grid-template-columns:1fr}
  .title{padding:0 18px calc(7.5vh + 18px)}
  .title::before{background:linear-gradient(0deg,rgba(4,10,22,.94) 0%,rgba(4,10,22,.75) 45%,rgba(4,10,22,.1) 80%)}
  .title .langs{margin-bottom:12px}
  .langs button{min-height:36px;font-size:13px;padding:0 11px}
  .skipbtn{bottom:auto;top:calc(7.5vh + 12px)}
  .caption{bottom:calc(7.5vh + 14px)}
  .next .t{max-width:44vw;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:759px) and (max-height:700px){
  .story .qcard{max-height:70%}
  .story.k-draw .qcard{max-height:92%}
  .mission{display:none}
  .libnote p,.libnote{font-size:13.5px}
  .k-next .small,.finale .lede{display:none}
  .finale .badge{display:none}
  .qcard .prompt{display:none}
  .stage{grid-template-rows:24vh minmax(0,1fr)}
  .stage .item{height:24vh}
  .pp{width:min(100%,36vh)}
  .badge img{width:48px}
}
@media (max-width:759px) and (max-height:600px){
  .libnote{display:none}
  .finale h2{font-size:26px;margin:4px 0}
  .finale .tools .tool{min-height:36px}
  .stage{grid-template-rows:20vh minmax(0,1fr)}
  .stage .item{height:20vh}
  .qcard h2{font-size:22px}
  .story.k-response .joyline .say,.story.k-draw .joyline .say{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
/* Upright phones: keep the subject in frame */
@media (orientation:portrait) and (max-aspect-ratio:4/5){
  [data-shot="interior"] img{object-position:77% 50%}
  [data-shot="exterior"] img{object-position:62% 50%}
  [data-shot="bagdesk"] img,[data-shot="bookdesk"] img{object-position:50% 50%}
  [data-shot="library"] img{object-position:52% 50%}
}
@media print{
  main{position:static;padding:0}
  .finale{display:block}.finale .win{display:none}
  .finale .cardwrap{display:block!important;max-height:none;overflow:visible;box-shadow:none}
}

/* ---------- Fit fixes for tablets and small phones ---------- */
@media (max-width:899px){
  .stage .qcard .joyline{display:none}
  .story.k-mission .qcard{max-height:80%}
  .stage.pass{grid-template-rows:auto minmax(0,1fr)}
  .stage.pass .pp{width:min(100%,42vh)}
}
@media (max-width:759px){
  .stage.pass .pp{width:min(100%,34vh)}
  .stage.pass .pnote{display:none}
  .libnote span{display:none}
}
@media (max-width:759px) and (max-height:600px){
  .story.k-draw .joyline{display:none}
  .stage.pass .pp{width:min(100%,28vh)}
  .stage.pass .patchgrid{gap:4px}
  .passno{font-size:18px;padding:5px 8px}
}
@media (max-width:759px) and (max-height:600px){canvas.draw{height:92px}}
.story.k-draw .prompt{display:none}
canvas.draw{height:clamp(110px,21vh,250px)}
@media (max-width:899px){.story.k-response .qcard{max-height:74%}.story.k-library .qcard,.story.k-celebrate .qcard{max-height:76%}}
@media (max-width:759px){canvas.draw{height:clamp(96px,17vh,180px)}}
@media (max-width:759px) and (max-height:600px){canvas.draw{height:88px}}
@media (max-width:759px){.story.k-draw .joyline .say span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}
@media (max-height:760px) and (min-width:760px){.stage.pass .pnote{display:none}}

/* =====================================================================
   Music Hall pieces
   ===================================================================== */
.cardsheet{padding:clamp(28px,5vh,48px) clamp(26px,8%,56px)}
/* Guides' faces (felt portraits; Mrs. Crescendo and Brasswell get a felt badge) */
.joyline .face{display:grid;place-items:center;font:600 26px/1 var(--display);color:var(--navy)}
.joyline .face.badge-crescendo{background:radial-gradient(circle at 35% 30%,#ffe7a8,#f2b82b 70%);color:#5a2a12;font-size:30px}
.joyline .face.badge-brass{background:radial-gradient(circle at 35% 30%,#fff1c4,#e0a725 70%);font-size:22px}
.parchment .joyline{background:#fbf3df;border-style:dashed;border-color:#d5b467;font-style:italic}
/* Floating notes */
.notefx{position:fixed;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.notefx span{position:absolute;color:#ffe08a;text-shadow:0 0 14px rgba(242,184,43,.9),0 2px 6px rgba(0,0,0,.5);animation:float 2.4s cubic-bezier(.2,.6,.3,1) both;font-family:var(--display)}
@keyframes float{0%{opacity:0;transform:translateY(20px) scale(.6) rotate(-10deg)}15%{opacity:1}100%{opacity:0;transform:translateY(-34vh) scale(1.15) rotate(12deg)}}
body.performing main .qcard{opacity:0;visibility:hidden;transform:translateY(24px);transition:opacity .6s,transform .6s,visibility .6s}
body.performing .bar{opacity:0;pointer-events:none}
/* Choice chips, bigger for little hands */
.chips.big{margin-top:clamp(10px,1.8vh,16px);gap:10px}
.chips.big button{min-height:48px;padding:0 18px;font-size:16px;white-space:normal;text-align:left;border-radius:14px;background:#fffdf7;border:2px solid #d8ccb0;transition:transform .15s,background .15s,border-color .15s}
.chips.big button:hover{border-color:var(--gold-deep)}
.chips.big button[aria-pressed="true"]{background:var(--navy);color:var(--ivory);border-color:var(--navy);transform:translateY(-2px)}
.chips.titles button[data-idea]{background:#fff6dd;border-color:#ecd28e}
.fb{margin:10px 0 0;padding:10px 14px;border-radius:12px;font:600 clamp(15px,2vh,17px)/1.4 var(--display)}
.fb:empty{display:none}
.fb.good{background:#e3f4ef;border:1.5px solid #9fd1c5;color:#0f5560}
.fb.try{background:#fdf0e3;border:1.5px solid #ecc49a;color:#7a3d14}
.ask{margin:clamp(10px,1.6vh,14px) 0 0;font-weight:800;color:var(--navy)}
/* Conducting */
.tempo{display:block;margin-top:clamp(10px,1.8vh,16px);font-weight:800;color:var(--navy)}
.tempo .range{display:flex;align-items:center;gap:10px;margin-top:6px}
.tempo small{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.tempo input{flex:1;accent-color:var(--gold-deep);height:30px}
/* Clues */
.cluehead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:clamp(10px,1.8vh,14px)}
.cluetag{font:800 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ivory);background:var(--teal-ink);padding:6px 12px;border-radius:999px}
.memories{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:clamp(10px,1.6vh,14px)}
.memories div{padding:8px 12px;border-radius:12px;background:#fffdf7;border:1.5px dashed #d8ccb0;font:400 19px/1.2 var(--hand);color:var(--navy)}
.memories b{display:block;font:800 11px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink)}
/* Rhythm board */
.board{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:clamp(10px,1.8vh,16px);padding:10px;border-radius:16px;background:#0d2550;box-shadow:inset 0 0 0 2px rgba(242,184,43,.5)}
.slot{aspect-ratio:1/1.05;max-height:13vh;border-radius:12px;border:2px dashed rgba(248,243,231,.35);display:grid;place-items:center;align-content:center;gap:2px;color:var(--navy);transition:transform .15s,background .15s}
.slot.full{background:#fbf3df;border:2px solid #e6cf91}
.slot.on{transform:scale(1.08);background:var(--gold)}
.slot svg{width:38%;height:auto;fill:currentColor}
.slot small{font:800 11px var(--body);letter-spacing:.08em}
.rtiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.rtile{min-height:64px;border-radius:14px;background:#fffdf7;border:2px solid #d8ccb0;display:grid;justify-items:center;align-content:center;gap:1px;padding:6px 4px;color:var(--navy);transition:transform .12s,border-color .12s}
.rtile:hover{border-color:var(--gold-deep)}.rtile:active{transform:scale(.95)}
.rtile svg{height:26px;width:auto;fill:currentColor}
.rtile b{font-size:15px}.rtile small{font-size:11px;color:var(--ink-soft);line-height:1.1}
/* Backstage clues */
.cluebtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(10px,1.8vh,16px)}
.cluebtn{min-height:48px;padding:0 16px;border-radius:14px;background:#fffdf7;border:2px solid #d8ccb0;font-weight:800;color:var(--navy)}
.cluebtn[aria-pressed="true"]{background:#e3f4ef;border-color:var(--teal-ink)}
.cluelog{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.cluelog li{padding:8px 12px;border-radius:12px;background:#fdf1d4;border:1.5px solid #f0d58e;font:500 clamp(14.5px,1.9vh,16.5px)/1.4 var(--display);color:var(--navy)}
.count{margin:8px 0 0;font:800 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink)}
/* Composing: a felt staff and coloured keys */
.staff{position:relative;height:clamp(84px,13vh,120px);margin-top:clamp(10px,1.6vh,14px);border-radius:14px;background:#fffdf7;border:1.5px solid var(--line);display:grid;grid-template-columns:repeat(12,1fr);padding:0 10px}
.staff .lines{position:absolute;left:10px;right:10px;top:18%;bottom:18%;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.staff .lines i{height:2px;background:#cdbf9f;border-radius:2px}
.staff .measure{position:absolute;top:18%;bottom:18%;left:calc(10px + (100% - 20px) / 3);width:3px;background:#b9a67c;border-radius:2px}
.nslot{position:relative}
.nt{position:absolute;left:50%;bottom:calc(10% + var(--y) * 11%);width:clamp(22px,3.2vh,30px);aspect-ratio:1;transform:translate(-50%,0);border-radius:50%;background:var(--c);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),0 2px 5px rgba(0,0,0,.2);display:grid;place-items:center;transition:transform .2s}
.nt em{font:800 11px/1 var(--body);font-style:normal;color:#fff}
.nt.k{opacity:.55}
.nt.on{transform:translate(-50%,-6px) scale(1.25);box-shadow:0 0 0 4px rgba(242,184,43,.5)}
.keys{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:10px}
.key{min-height:clamp(48px,7vh,64px);border-radius:12px;background:var(--c);color:#fff;font:700 clamp(20px,3vh,26px) var(--display);box-shadow:inset 0 -5px 0 rgba(0,0,0,.2),0 3px 8px rgba(0,0,0,.15);text-shadow:0 1px 2px rgba(0,0,0,.35);transition:transform .1s}
.key:active{transform:translateY(3px);box-shadow:inset 0 -2px 0 rgba(0,0,0,.2)}
/* The concert programme + keepsake */
.program{margin-top:clamp(10px,1.8vh,16px);padding:14px 16px;border-radius:14px;background:#fbf3df;border:1.5px dashed #d5b467;text-align:center}
.program b{display:block;font:600 clamp(22px,3.4vh,30px)/1.1 var(--display);color:var(--navy)}
.program span{display:block;font-size:13px;font-weight:700;color:var(--ink-soft);margin-top:4px}
.dots i{display:inline-grid;place-items:center;width:clamp(18px,2.6vh,26px);aspect-ratio:1;margin:2px;border-radius:50%;background:var(--c);vertical-align:middle;font:800 11px var(--body);font-style:normal;color:#fff}
.dots i.k{opacity:.55}
p.dots{white-space:normal}
.cc .kmeta{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:10px;font:600 15px var(--body);color:var(--navy)}
.cc .kmeta b{display:block;font:800 11px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep)}
/* Passport stamp */
.mhstamp{flex:none;width:clamp(64px,11vh,100px);height:auto;color:#136f7d;transform:rotate(-6deg);display:block}
.mhstamp svg{width:100%;height:auto;display:block;font-family:var(--body)}
.mhstamp.stamped{animation:stamp .7s cubic-bezier(.2,1.6,.4,1) both .9s}
/* Hint text above textareas on writing pages */
.k-write .prompt{margin:clamp(8px,1.4vh,12px) 0 0;padding-left:12px;border-left:3px solid var(--gold);font-size:clamp(14px,1.9vh,16px);color:var(--ink-soft)}
.k-write .namebox{margin-top:clamp(10px,1.8vh,16px)}
.tool.active{background:#fde3dc;border-color:#d9694f}
@media (max-height:760px) and (min-width:760px){
  .slot{max-height:10vh}.rtile{min-height:54px}.rtile small{display:none}
  .staff{height:84px}
}
@media (max-width:759px){
  .chips.big button{min-height:44px;font-size:15px;padding:0 14px}
  .board{gap:6px;padding:8px}.slot{max-height:9vh}
  .rtile{min-height:52px}.rtile small{display:none}
  .keys{gap:4px}.key{min-height:44px;font-size:19px}
  .staff{height:76px;padding:0 4px}
  .memories{display:none}
  .cluelog li{font-size:14px;padding:6px 10px}
  .k-write .prompt{display:none}
  .program{padding:10px}
}
/* Cards never squash their own parts; busy pages get more room on phones */
.qcard>*{flex-shrink:0}
@media (max-width:899px){
  .story .qcard{max-height:86%}
  .story.k-compose .joyline .say span,.story.k-letter:not(.opened) .joyline .say span{font-size:14px}
}
@media (max-width:759px){
  .story.k-compose .joyline{display:none}
  .story.k-letter .qcard>.joyline{display:none}
  .story.k-search .joyline .say span{font-size:14px}
  .story.k-rhythm .slot{max-height:8vh}
}
h2[tabindex="-1"]:focus{outline:none}

/* =====================================================================
   Theater pieces
   ===================================================================== */
/* The stage drawn over the felt picture: positions are % of the 1600×900 stage art */
.shot{container-type:size}
.stagelayer{position:absolute;left:50%;top:50%;width:max(100cqw,177.78cqh);aspect-ratio:16/9;transform:translate(-50%,-50%);pointer-events:none;container-type:inline-size}
.stagelayer .set{position:absolute;left:36.6%;top:14.5%;width:26.8%;height:41.5%;transform:translateY(-135%);transition:transform 1.4s cubic-bezier(.3,1.25,.5,1);z-index:1}
.stagelayer .set.down{transform:translateY(0)}
.stagelayer .set img{width:100%;height:100%;object-fit:cover;border-radius:.4cqw;box-shadow:0 0 0 .35cqw #6b3a1c,0 0 0 .55cqw #f2b82b,0 1.2cqw 2cqw rgba(0,0,0,.55)}
.stagelayer .set .rope{position:absolute;top:-40%;width:.25cqw;height:40%;background:linear-gradient(#b48a4a,#7a5426)}
.stagelayer .set .rope.l{left:12%}.stagelayer .set .rope.r{right:12%}
.stagelayer .set:not(.down) .rope,.stagelayer .set:empty{display:none}
.stagelayer .lights{position:absolute;left:27%;top:0;width:46%;height:72%;z-index:2;mix-blend-mode:soft-light;opacity:0;transition:opacity .9s,background .9s}
.stagelayer .lights:not(.m-none){opacity:1}
.lights.m-hopeful{background:radial-gradient(ellipse at 50% 55%,rgba(255,214,110,.95),rgba(255,170,60,.55) 55%,transparent 80%)}
.lights.m-curious{background:radial-gradient(ellipse at 50% 55%,rgba(90,230,240,.9),rgba(32,184,208,.55) 55%,transparent 80%)}
.lights.m-worried{background:radial-gradient(ellipse at 50% 55%,rgba(70,90,190,.95),rgba(10,20,80,.85) 60%,rgba(0,0,30,.4))}
.lights.m-excited{background:radial-gradient(ellipse at 50% 55%,rgba(255,120,200,.95),rgba(255,180,60,.6) 55%,transparent 80%)}
.lights.m-caring{background:radial-gradient(ellipse at 50% 55%,rgba(255,150,140,.95),rgba(230,90,110,.55) 55%,transparent 80%)}
.lights.m-surprised{background:radial-gradient(ellipse at 50% 55%,rgba(190,140,255,.95),rgba(130,80,230,.6) 55%,transparent 80%)}
.stagelayer .actor{position:absolute;bottom:35%;margin:0;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;transform-origin:50% 100%}
.stagelayer .actor img{height:100%;width:auto;max-width:none;filter:drop-shadow(0 .5cqw .6cqw rgba(0,0,0,.55))}
.stagelayer .actor figcaption{position:absolute;bottom:-2.3cqw;white-space:nowrap;font:800 max(10px,.85cqw)/1 var(--body);letter-spacing:.06em;color:var(--ivory);background:rgba(7,26,61,.85);padding:.3cqw .7cqw;border-radius:99px;border:1px solid rgba(242,184,43,.6)}
.stagelayer .actor.enter{animation:enterL 1.1s cubic-bezier(.3,1.3,.5,1) both}
.stagelayer .actor.a1.enter{animation-name:enterR}
@keyframes enterL{0%{transform:translateX(-50%) translateX(-14cqw);opacity:0}100%{transform:translateX(-50%);opacity:1}}
@keyframes enterR{0%{transform:translateX(-50%) translateX(14cqw);opacity:0}100%{transform:translateX(-50%);opacity:1}}
.stagelayer .actor.talk{animation:talk .42s ease-in-out infinite alternate}
@keyframes talk{from{transform:translateX(-50%) translateY(0) rotate(-1deg)}to{transform:translateX(-50%) translateY(-1.1cqw) rotate(1deg)}}
.stagelayer .actor.hop{animation:hop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes hop{0%,100%{transform:translateX(-50%)}40%{transform:translateX(-50%) translateY(-2.2cqw) scale(1.04)}}
.stagelayer .actor.bow{animation:bow 1.3s ease-in-out 2}
@keyframes bow{0%,100%{transform:translateX(-50%)}45%,60%{transform:translateX(-50%) rotate(0) scaleY(.88) translateY(.6cqw)}}
.stagelayer .prop{position:absolute;height:10.5%;width:auto;max-width:none;transform:translate(-50%,-100%);z-index:4;filter:drop-shadow(0 .4cqw .5cqw rgba(0,0,0,.5));animation:land .7s cubic-bezier(.3,1.6,.5,1) both}
@keyframes land{0%{transform:translate(-50%,-260%);opacity:0}100%{transform:translate(-50%,-100%);opacity:1}}
.stagelayer .bubble{position:absolute;top:10%;max-width:20%;padding:1cqw 1.3cqw;border-radius:1.6cqw;background:#fffaf0;border:.2cqw solid #e6cf91;color:var(--navy);font:600 max(15px,1.25cqw)/1.3 var(--display);box-shadow:0 .8cqw 1.6cqw rgba(0,0,0,.35);z-index:6;opacity:0;transform:translateY(1cqw) scale(.9);transition:opacity .25s,transform .25s}
.stagelayer .bubble.on{opacity:1;transform:none}
.stagelayer .bubble.b0{right:56%}.stagelayer .bubble.b1{left:56%}
.stagelayer .bubble.solo{left:50%;right:auto;transform:translateX(-50%)}
.stagelayer .bubble::after{content:"";position:absolute;bottom:-1.1cqw;width:1.8cqw;height:1.8cqw;background:#fffaf0;border-right:.2cqw solid #e6cf91;border-bottom:.2cqw solid #e6cf91}
.stagelayer .bubble.b0::after{right:1.6cqw;transform:rotate(45deg)}
.stagelayer .bubble.b1::after{left:1.6cqw;transform:rotate(45deg)}
.stagelayer .bubble.solo::after{left:50%;margin-left:-.9cqw;transform:rotate(45deg)}
.stagelayer .curtain{position:absolute;top:2%;height:66%;width:21%;z-index:5;background:repeating-linear-gradient(90deg,#7d1420 0 1.2cqw,#a3202d 1.2cqw 2.2cqw,#8a1824 2.2cqw 3cqw);box-shadow:inset 0 2cqw 2cqw -1cqw rgba(0,0,0,.45),0 0 1.5cqw rgba(0,0,0,.5);transition:transform 1.4s cubic-bezier(.6,0,.3,1);border-bottom:.5cqw solid #f2b82b}
.stagelayer .curtain.l{left:29%;transform:translateX(-102%)}
.stagelayer .curtain.r{right:29%;transform:translateX(102%)}
.stagelayer.closed .curtain.l,.stagelayer.closed .curtain.r{transform:none}
.stagelayer:not(.closed) .curtain{visibility:hidden;transition:transform 1.4s cubic-bezier(.6,0,.3,1),visibility 0s 1.4s}
.stagelayer.closed .curtain{visibility:visible;transition:transform 1.4s cubic-bezier(.6,0,.3,1)}
body.still .stagelayer .set,body.still .stagelayer .curtain{transition:none}
/* "I can" */
.ican{margin-top:clamp(12px,2vh,18px);padding:12px 14px;border-radius:14px;background:#e3f4ef;border:1.5px solid #9fd1c5;color:#0f5560;font:500 clamp(15px,2vh,17px)/1.4 var(--display)}
.ican b{display:block;font:800 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink);margin-bottom:4px}
/* Director's badge */
.badgebox{display:flex;align-items:center;gap:14px;margin-top:clamp(10px,1.8vh,16px);padding:10px;border-radius:16px;background:#fffdf7;border:2px dashed #d8ccb0}
.badgebox img{width:clamp(70px,13vh,120px);height:auto;border-radius:14px;filter:grayscale(.8) opacity(.55);transform:rotate(-4deg);transition:filter .6s}
.badgebox.on img{filter:none;animation:stamp .7s cubic-bezier(.2,1.6,.4,1) both}
.badgebox p{margin:0;font:500 clamp(16px,2.2vh,19px)/1.35 var(--display);color:var(--navy)}
/* Cast picker */
.tabs{display:flex;gap:6px;margin-top:clamp(10px,1.6vh,14px);flex-wrap:wrap}
.tabs button{min-height:38px;padding:0 14px;border-radius:99px;font-weight:800;font-size:13.5px;color:var(--navy);background:#fffdf7;border:1.5px solid #d8ccb0}
.tabs button[aria-selected="true"]{background:var(--navy);color:var(--ivory);border-color:var(--navy)}
.castgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px;margin-top:8px;max-height:clamp(150px,26vh,240px);overflow:auto;padding:4px;border-radius:14px;background:#f6ecd5;overscroll-behavior:contain}
.puppet{display:grid;justify-items:center;gap:2px;padding:6px 4px;border-radius:12px;background:#fffdf7;border:2px solid transparent;color:var(--navy);transition:transform .12s,border-color .12s}
.puppet img{height:clamp(58px,9vh,80px);width:auto;object-fit:contain}
.puppet span{font:700 11px/1.15 var(--body);text-align:center}
.puppet:hover{border-color:var(--gold-deep)}
.puppet[aria-pressed="true"]{border-color:var(--navy);background:#fdf1d4;transform:translateY(-2px)}
.puppet[data-taken]{opacity:.38}
.castform .lbl{display:block;margin:10px 0 4px;font:800 12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink)}
.namebox.small{min-height:46px;font-size:20px;margin-top:0}
.castform .chips.big{margin-top:4px}
.castform .chips.big button{min-height:40px;font-size:14.5px;padding:0 12px}
.castform #cwant{margin-top:8px}
/* Same or different */
.wantpair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:clamp(10px,1.8vh,16px)}
.wantpair div{display:grid;justify-items:center;text-align:center;gap:2px;padding:10px;border-radius:14px;background:#fffdf7;border:1.5px solid var(--line);color:var(--navy)}
.wantpair img{height:clamp(60px,10vh,96px);width:auto}
.wantpair b{font:600 18px var(--display)}.wantpair span{font:400 18px/1.2 var(--hand)}
/* Felt picture cards: sets, lights, props */
.cardgrid{display:grid;gap:8px;margin-top:clamp(10px,1.8vh,16px);grid-template-columns:repeat(3,1fr)}
.cardgrid.props{grid-template-columns:repeat(4,1fr)}
.cardgrid button{display:grid;justify-items:center;gap:4px;padding:6px;border-radius:14px;background:#fffdf7;border:2px solid #d8ccb0;color:var(--navy);font-weight:800;font-size:13.5px;transition:transform .12s,border-color .12s}
.cardgrid button:hover{border-color:var(--gold-deep)}
.cardgrid button[aria-pressed="true"]{border-color:var(--navy);background:#fdf1d4;transform:translateY(-2px);box-shadow:0 0 0 2px var(--gold)}
.cardgrid img{width:100%;border-radius:9px;object-fit:cover}
.cardgrid.sets img{aspect-ratio:1.1;max-height:13vh}
.cardgrid.moods img{aspect-ratio:2.4;max-height:8vh}
.cardgrid.props img{height:clamp(40px,6.5vh,64px);width:auto;object-fit:contain}
/* The script */
.lineno{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:clamp(8px,1.4vh,12px)}
.lineno span:first-child{font:800 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ivory);background:var(--teal-ink);padding:5px 11px;border-radius:99px}
.lineno .guide{font:500 15px/1.3 var(--display);color:var(--ink-soft);font-style:italic}
.linedots{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin-top:8px}
.linedots button{min-height:32px;border-radius:9px;background:#fffdf7;border:1.5px solid #d8ccb0;font:800 13px var(--body);color:var(--navy)}
.linedots button.done{background:#e3f4ef;border-color:#9fd1c5}
.linedots button.now{background:var(--navy);color:var(--ivory);border-color:var(--navy)}
.qcard .lbl{display:block;margin:10px 0 4px;font:800 12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink)}
.chips.who{display:flex;gap:8px;flex-wrap:wrap}
.chips.who button{display:flex;align-items:center;gap:8px;min-height:44px;padding:2px 14px 2px 6px;border-radius:99px;background:#fffdf7;border:2px solid #d8ccb0;font-weight:800;color:var(--navy)}
.chips.who img{height:38px;width:auto}
.chips.who button[aria-pressed="true"]{background:var(--navy);color:var(--ivory);border-color:var(--navy)}
.k-script .answer textarea.short{height:clamp(64px,9vh,96px)}
.linenav{justify-content:space-between;align-items:center;margin-top:8px}
.linenav .count{margin:0}
/* Playbill */
.sumbox{padding:10px 14px;border-radius:12px;background:#fbf3df;border:1.5px dashed #d5b467;font:400 15px/1.45 var(--body);color:var(--navy)}
.sumbox p{margin:2px 0}.sumbox b{color:var(--gold-deep)}
.cc.playbill h3{text-align:center}.cc.playbill .by,.cc.playbill .eyebrow,.cc.playbill .foot{text-align:center}
.cc .kcast{display:flex;justify-content:center;gap:clamp(14px,4vw,40px);margin-top:12px}
.cc .kcast div{display:grid;justify-items:center;text-align:center;max-width:170px}
.cc .kcast img{height:clamp(70px,12vh,120px);width:auto}
.cc .kcast b{font:600 17px var(--display);color:var(--navy)}.cc .kcast small{font-size:13px;color:var(--ink-soft)}
.cc ol.script{margin:4px 0 0;padding-left:22px;font:400 15.5px/1.5 var(--body);color:var(--navy)}
.cc ol.script li{margin:3px 0}
.cc .foot{margin-top:18px;font:800 11px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.thstamp{flex:none;width:clamp(64px,11vh,100px);height:auto;transform:rotate(-6deg)}
.thstamp.stamped{animation:stamp .7s cubic-bezier(.2,1.6,.4,1) both .9s}
/* Printing the playbill */
.print-area{display:none}
@media print{
  body.printing>*:not(.print-area){display:none!important}
  body.printing .print-area{display:block!important;color:#071a3d;background:#fff}
  body.printing .print-area .cardsheet{box-shadow:none;border:6px double #c48d14;max-width:none}
}
/* Stage pages on phones: the stage sits above the card */
@media (max-width:899px){
  .story.k-cast .qcard,.story.k-wants .qcard,.story.k-mood .qcard,.story.k-props .qcard,.story.k-script .qcard,.story.k-rehearse .qcard,.story.k-perform .qcard,.story.k-setting .qcard{max-height:56%}
}
@media (max-width:759px){
  .story.k-cast .joyline,.story.k-script .joyline,.story.k-props .joyline{display:none}
  .castgrid{max-height:22vh;grid-template-columns:repeat(auto-fill,minmax(62px,1fr))}
  .puppet img{height:52px}
  .cardgrid{gap:6px}.cardgrid button{font-size:12px;padding:4px}
  .cardgrid.sets img{max-height:9vh}
  .cardgrid.moods{grid-template-columns:repeat(3,1fr)}
  .linedots button{min-height:28px;font-size:12px}
  .lineno .guide{font-size:13.5px}
  .chips.who button{min-height:40px}.chips.who img{height:32px}
  .wantpair img{height:56px}
}
@media (max-height:760px) and (min-width:760px){
  .castgrid{max-height:150px}
  .cardgrid.sets img{max-height:10vh}
}

/* Upright phones: the whole stage is shown small at the top (the camera pulls back), so the felt frame needs a dark mat around it */
@media (orientation:portrait) and (max-aspect-ratio:4/5){
  .shot[data-shot="stage"]{background:#05101f}
}


/* =====================================================================
   THE CITY PRESS
   ===================================================================== */
/* Live felt labels over the pictures (positions are % of each picture) */
.lay{position:absolute;left:50%;top:50%;width:max(100cqw,calc(var(--ar) * 100cqh));aspect-ratio:var(--ar);transform:translate(-50%,-50%);pointer-events:none;container-type:inline-size}
.lay>*{position:absolute}
.placard{display:grid;place-items:center;padding:0 1.4cqw;border-radius:1.4cqw;background:#fbf4e2;border:.22cqw solid #d9b86c;box-shadow:inset 0 0 0 .45cqw #fbf4e2,inset 0 0 0 .6cqw rgba(185,134,26,.55),0 .5cqw 1.2cqw rgba(0,0,0,.35);text-align:center}
.placard::after{content:"";position:absolute;left:-1.1cqw;top:42%;border:1cqw solid transparent;border-right-color:#d9b86c;border-left:0}
.placard b{font:600 max(13px,1.75cqw)/1.15 var(--display);color:var(--navy);text-wrap:balance}
.clue{display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;padding:0 .6cqw;border-radius:99px;background:#fbf4e2;border:.18cqw solid #d9b86c;font:800 max(10px,1.05cqw)/1 var(--body);color:var(--navy);box-shadow:0 .3cqw .8cqw rgba(0,0,0,.35);transition:background .3s,transform .3s}
.clue.on{background:var(--teal-ink,#127c8d);border-color:#e3f4ef;color:#fff}
.clue.hot{transform:scale(1.15);box-shadow:0 0 0 .5cqw rgba(242,184,43,.55),0 .3cqw .8cqw rgba(0,0,0,.35);animation:cluepulse 1.6s ease-in-out 2}
@keyframes cluepulse{50%{box-shadow:0 0 0 1.2cqw rgba(242,184,43,0),0 .3cqw .8cqw rgba(0,0,0,.35)}}
.wcard{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 1cqw;border-radius:.8cqw;background:#fbf4e2;border:.2cqw solid #d9b86c;box-shadow:0 .4cqw 1cqw rgba(0,0,0,.3);transition:background .3s}
.wcard b{font:700 max(12px,1.6cqw)/1.1 var(--display);color:var(--navy)}
.wcard span{font:600 max(9px,.95cqw)/1.25 var(--body);color:var(--ink-soft);margin-top:.3cqw}
.wcard i{position:absolute;right:.6cqw;top:.5cqw;font:800 max(11px,1.2cqw)/1 var(--body);font-style:normal;color:var(--teal-ink,#127c8d)}
.wcard.on{background:#e3f4ef;border-color:#9fd1c5}
.wcard.talk{box-shadow:0 0 0 .5cqw rgba(242,184,43,.7),0 .4cqw 1cqw rgba(0,0,0,.3)}
.talkdot{transform:translate(-50%,-50%) scale(.4);opacity:0;display:flex;gap:.4cqw;padding:.8cqw 1.1cqw;border-radius:2cqw;background:#fffaf0;border:.2cqw solid #e6cf91;box-shadow:0 .5cqw 1cqw rgba(0,0,0,.35);transition:opacity .3s,transform .3s}
.talkdot.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.talkdot i{width:.8cqw;height:.8cqw;border-radius:50%;background:var(--navy);animation:dot 1s ease-in-out infinite}
.talkdot i:nth-child(2){animation-delay:.15s}.talkdot i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{transform:translateY(-.5cqw);opacity:.4}}
.doctitle{display:grid;place-items:center;text-align:center;border-radius:.5cqw;background:#fbf4e2;font:700 max(10px,1.5cqw)/1.05 var(--display);color:var(--navy);padding:0 .6cqw;border:.15cqw solid #e2cf9f}
.docstamp{transform:translate(-50%,-50%) rotate(-8deg);white-space:nowrap;padding:.5cqw 1cqw;border:.3cqw double #127c8d;border-radius:.6cqw;background:rgba(251,244,226,.92);font:800 max(10px,1.1cqw)/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#127c8d;animation:stamp .6s cubic-bezier(.2,1.6,.4,1) both}
body.still .clue.hot,body.still .docstamp{animation:none}

/* The live newspaper, laid over the felt one */
.np{container-type:size;background:#fbf6e6;color:#16233a;display:flex;flex-direction:column;padding:1.6cqh 2.2cqw;font-family:Georgia,"Times New Roman",serif;border-radius:.4cqw}
.lay .np{box-shadow:0 0 .6cqw rgba(0,0,0,.18)}
.np .npmast{text-align:center;border-bottom:.6cqh double #102b4c;padding-bottom:.6cqh}
.np .npmast b{display:block;font:700 9cqw/1 var(--display);color:#102b4c}
.np .npmast small{font:700 2cqw/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase}
.np .npline{display:flex;justify-content:space-between;font:700 max(7px,2.1cqw)/1 var(--body);letter-spacing:.12em;text-transform:uppercase;border-bottom:.25cqh solid #102b4c;padding:.9cqh 0;color:#102b4c}
.np .nph{font:700 min(6.2cqw,7cqh)/1.08 var(--display);text-align:center;margin:1.4cqh 0;color:#102b4c;text-wrap:balance;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;flex:none}
.np .nph.ph{color:#9a8f78;font-style:italic}
.np .nptop{display:grid;grid-template-columns:55% 1fr;gap:2.2cqw;min-height:0;flex:1 1 45%}
.np .nptop img{width:100%;height:100%;object-fit:cover;border:.25cqw solid #102b4c;min-height:0}
.np .npcols{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;border-top:.25cqh solid #102b4c;padding-top:1.2cqh;margin-top:1.2cqh;min-height:0;flex:1 1 40%}
.np .npbox{min-height:0;overflow:hidden}
.np .npbox h5{margin:0 0 .6cqh;font:800 max(7px,2cqw)/1.1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#14507a}
.np .npbox p{margin:0;font-size:max(8px,2.35cqw);line-height:1.3;white-space:pre-wrap;overflow-wrap:anywhere;overflow:hidden;display:-webkit-box;-webkit-line-clamp:9;-webkit-box-orient:vertical}
.np .npcols .npbox p{-webkit-line-clamp:7}
.np .npbox em{display:block;font:700 max(7px,2cqw)/1.3 var(--body);font-style:normal;margin-top:.4cqh}
.np .npby{margin:.8cqh 0 0;text-align:right;font:700 max(7px,2cqw)/1 var(--body);letter-spacing:.06em;color:#4f5f6b}
.np.roll{animation:roll 1.5s cubic-bezier(.3,.7,.2,1)}
@keyframes roll{0%{clip-path:inset(0 0 100% 0);filter:brightness(1.3)}100%{clip-path:inset(0 0 0 0)}}
.np.sheetpaper{position:relative;aspect-ratio:3/4;width:100%;border:.6cqw double #102b4c;padding:2.6cqh 4cqw}
.np.sheetpaper .nph{font-size:min(7.4cqw,6cqh);-webkit-line-clamp:3}
.np.sheetpaper .npbox p{font-size:max(9px,2.9cqw)}
.np.sheetpaper .npcols{grid-template-columns:1fr;gap:1cqh}
.np.sheetpaper .npcols .npbox p{-webkit-line-clamp:4}

/* Press pass */
.presspass{margin-top:clamp(10px,1.8vh,16px);border-radius:16px;overflow:hidden;background:#fffdf7;border:2px solid #d8ccb0;box-shadow:0 10px 24px rgba(7,26,61,.15);max-width:380px;transform:rotate(-1.5deg);transition:transform .4s}
.presspass.on{transform:rotate(0);border-color:var(--gold-deep);box-shadow:0 0 0 4px rgba(242,184,43,.35),0 10px 24px rgba(7,26,61,.15)}
.pp-top{display:flex;justify-content:space-between;align-items:baseline;padding:8px 14px;background:var(--navy);color:var(--gold)}
.pp-top span{font:800 20px/1 var(--body);letter-spacing:.3em}
.pp-top small{font:600 14px var(--display);font-style:italic;color:var(--ivory)}
.pp-mid{display:flex;align-items:center;gap:12px;padding:12px 14px}
.pp-logo{width:54px;height:54px;border-radius:12px;object-fit:cover;border:2px solid var(--gold)}
.pp-mid b{display:block;font:400 clamp(24px,3.4vh,30px)/1.05 var(--hand);color:var(--navy);overflow-wrap:anywhere}
.pp-mid small{font:800 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink)}
.pp-bot{padding:6px 14px;border-top:1.5px dashed #d8ccb0;font:700 12px var(--body);letter-spacing:.2em;color:var(--ink-soft)}
.k-pass .lbl{display:block;margin-top:12px}

/* Clues, witnesses, documents */
.cluegrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:clamp(10px,1.8vh,16px)}
.cluegrid button,.docgrid button,.qlist button{display:flex;align-items:center;gap:10px;text-align:left;border-radius:14px;border:2px solid #d8ccb0;background:#fffdf7;color:var(--navy);padding:8px 12px;min-height:54px;transition:transform .15s,border-color .15s,background .15s}
.cluegrid button:last-child{grid-column:1/-1}
.cluegrid .ico{font-size:24px;flex:none}
.cluegrid b{display:block;font:700 15px/1.2 var(--body)}
.cluegrid small{display:block;font:500 14px/1.3 var(--display);color:var(--ink-soft)}
.cluegrid small:empty{display:none}
.cluegrid button[aria-pressed="true"],.docgrid button[aria-pressed="true"],.qlist button[aria-pressed="true"]{background:#e3f4ef;border-color:#9fd1c5}
.cluegrid button:hover,.docgrid button:hover,.qlist button:hover{border-color:var(--gold-deep)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:clamp(10px,1.8vh,16px)}
.trio div{text-align:center}
.trio img{width:min(100%,96px);aspect-ratio:1;border-radius:50%;border:3px solid var(--gold);display:block;margin:0 auto 6px;object-fit:cover}
.trio b{display:block;font:600 19px/1.1 var(--display);color:var(--navy)}
.trio span{font-size:13px;color:var(--ink-soft)}
.qlist{display:grid;gap:8px;margin-top:6px}
.qlist button{font:600 15.5px/1.3 var(--body)}
.qlist.quotes button{align-items:flex-start;font:500 16px/1.35 var(--display)}
.qlist.quotes img{width:44px;height:44px;border-radius:50%;border:2px solid var(--gold);flex:none;object-fit:cover}
.qlist.quotes b{display:block;font:800 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:2px}
.answerline .joyline{background:#eef6f4;border-color:#9fcfc8}
.answerline .joyline b{color:var(--teal-ink)}
.seeheard{margin-top:clamp(10px,1.8vh,14px);padding-top:10px;border-top:1.5px dashed var(--line)}
.seeheard .lbl{font:600 16px/1.35 var(--display);text-transform:none;letter-spacing:0;color:var(--navy);margin:0}
.seeheard .chips.big{margin-top:8px}
.docgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:clamp(10px,1.8vh,16px)}
.docgrid button{flex-direction:column;align-items:stretch;gap:4px;padding:8px}
.docgrid img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:9px}
.docgrid b{font:600 17px/1.15 var(--display)}
.docgrid small{font:800 11px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink)}

/* Claims and see-or-think, one at a time */
.k-sort .linedots,.k-claims .linedots{grid-template-columns:repeat(6,1fr);max-width:320px}
.linedots button.miss{background:#fdf0e3;border-color:#ecc49a}
.claim{position:relative;margin-top:clamp(10px,1.8vh,14px);padding:clamp(14px,2.4vh,22px) 18px 34px;border-radius:14px;background:#fffdf7;border:2px dashed #d8ccb0;overflow:hidden}
.claim p{margin:0;font:600 clamp(19px,2.8vh,25px)/1.3 var(--display);color:var(--navy)}
.claim.answered.ok{border-style:solid;border-color:#9fd1c5;background:#f3faf7}
.claim.answered.no{border-color:#ecc49a}
.rstamp{position:absolute;right:10px;bottom:8px;transform:rotate(-9deg);padding:4px 10px;border:3px double;border-radius:8px;font:800 13px var(--body);letter-spacing:.12em;background:rgba(255,253,247,.85);animation:stamp .55s cubic-bezier(.2,1.6,.4,1) both}
.rstamp.s-yes{color:#127c8d}.rstamp.s-no{color:#a33a24}.rstamp.s-unsure{color:#a87925}
body.still .rstamp{animation:none}
.chips.facts button{white-space:normal;text-align:left;border-radius:12px;background:#fffdf7;border-color:#d8ccb0}

/* Evidence document (opens in the sheet) */
.doc{border-radius:14px;padding:18px 20px;background:#f8f0dc;border:4px solid var(--dc,#127c8d);font-family:Georgia,"Times New Roman",serif;color:#16233a}
.doc.d-teal{--dc:#167f89}.doc.d-plum{--dc:#8b4c5f}.doc.d-green{--dc:#256a4a}.doc.d-brown{--dc:#9a6c35}
.doc .dtag{margin:0;font:800 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:#102b4c}
.doc h2{font:700 clamp(26px,3.6vh,34px)/1.1 Georgia,serif;margin:6px 0 4px;color:#0d1e3d;padding-bottom:8px;border-bottom:4px solid var(--dc)}
.doc .dsrc{margin:0 0 6px;font-size:15px;color:#3b4555}
.doc h3{margin:12px 0 4px;padding:5px 10px;border-radius:6px;background:var(--dc);color:#fff;font:700 13px var(--body);letter-spacing:.1em;text-transform:uppercase}
.doc p{margin:0 0 4px 4px;font-size:16.5px;line-height:1.45}
.dq{margin-top:14px}
.sheet .fb{margin-top:10px}

@media (max-width:899px){
  .cluegrid button{min-height:46px;padding:6px 10px}
  .cluegrid small{display:none}
  .docgrid{grid-template-columns:repeat(4,1fr);gap:6px}
  .docgrid b{font-size:13.5px}
  .docgrid small{font-size:9.5px;letter-spacing:.04em}
  .trio img{width:64px}
  .presspass{max-width:320px}
}
@media (max-width:759px){
  .qlist button{min-height:44px;font-size:14px;padding:6px 10px}
  .qlist.quotes button{font-size:14.5px}
  .claim p{font-size:19px}
  /* long lines fold to three lines on phones (the 🔊 button still reads all of it) */
  .k-meet .joyline .say>span,.k-docs .joyline .say>span,.qcard.answered>.joyline .say>span{display:block;max-height:4.3em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
  .placard b{font-size:max(10px,2.1cqw)}
}

.placard.small b{font-size:max(10px,1.3cqw)}
.placard.small::after{display:none}

/* pictures inside the live labels are ordinary pictures, not full-screen shots */
.shot .lay .np img{position:static;inset:auto;width:auto;height:auto;max-width:100%}
.shot .lay img.sprite,.shot .lay img.solart,.shot .lay img.folderdoc{position:absolute;inset:auto;max-width:none}
.shot .lay img.sprite{width:auto}
.shot .lay img.solart{height:auto}
.shot .lay .nptop img{width:100%;height:100%;object-fit:cover}
.shot .lay .qlist button .qi{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:var(--gold);font:800 14px var(--body)}
.qlist button[aria-pressed="true"] .qi{background:var(--teal-ink)}

@media (min-width:900px){.story.k-publish .qcard{width:min(440px,34vw)}}
@media (max-width:759px){
  /* idea and fact chips stay on phones, in one row you can swipe */
  .chips.titles{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .chips.titles::-webkit-scrollbar{display:none}
  .chips.titles button{flex:none;max-width:78vw}
  .chips.facts button{white-space:nowrap}
}
@media (min-width:900px) and (max-height:840px){.docgrid img{aspect-ratio:2.3/1}.docgrid button{gap:2px}}

/* ---------- Newsroom hub and the two investigations (Oct 31 2026) ---------- */
.assigns{display:grid;gap:10px;margin-top:clamp(10px,1.8vh,16px)}
.assign{display:flex;gap:12px;align-items:stretch;text-align:left;border-radius:16px;border:2px solid #d8ccb0;background:#fffdf7;color:var(--navy);padding:8px;transition:transform .15s,border-color .15s,box-shadow .15s}
.assign:hover{border-color:var(--gold-deep);transform:translateY(-1px)}
.assign[aria-pressed="true"]{border-color:var(--navy);box-shadow:0 0 0 3px var(--gold)}
.assign.done{background:#f3faf7;border-color:#9fd1c5}
.assign img{width:clamp(92px,11vw,132px);aspect-ratio:16/9;object-fit:cover;border-radius:10px;flex:none;align-self:center}
.assign span{min-width:0;display:flex;flex-direction:column;gap:2px}
.assign small{font:800 11px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink)}
.assign b{font:600 clamp(18px,2.4vh,21px)/1.15 var(--display)}
.assign i{font:500 13.5px/1.35 var(--body);font-style:normal;color:var(--ink-soft)}
.rule{margin-top:10px}
.rule summary{cursor:pointer;font:800 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);min-height:32px;display:flex;align-items:center}
.placard.market{flex-direction:column;align-content:center;gap:1.4cqw;padding:0 2.6cqw;display:flex;justify-content:center}
.placard.market::after{display:none}
.placard.market b{font-size:max(16px,3.6cqw)}
.placard.market small{font:600 max(11px,1.6cqw)/1.25 var(--body);color:#fff;background:#1f5f99;padding:.8cqw 1.4cqw;border-radius:.6cqw;text-align:center}
.clue.pin{transform:translate(-50%,-50%);padding:.5cqw 1.1cqw;width:auto;height:auto}
.clue.pin.hot{transform:translate(-50%,-50%) scale(1.15)}
.lay .sprite{position:absolute;bottom:0;width:auto;transform:translateX(-50%);filter:drop-shadow(0 1cqw 1.2cqw rgba(0,0,0,.45));animation:spritein .7s cubic-bezier(.3,1.3,.5,1) both}
.lay .sprite.talk{animation:spritetalk .45s ease-in-out infinite alternate}
@keyframes spritein{0%{transform:translateX(-50%) translateY(8%);opacity:0}100%{transform:translateX(-50%);opacity:1}}
@keyframes spritetalk{0%{transform:translateX(-50%)}100%{transform:translateX(-50%) translateY(-.6%) rotate(.6deg)}}
.lay .solart{position:absolute;left:66%;bottom:3%;width:44%;transform:translateX(-50%);filter:drop-shadow(0 1cqw 1.4cqw rgba(0,0,0,.5));animation:solland .7s cubic-bezier(.3,1.5,.5,1) both}
@keyframes solland{0%{transform:translateX(-50%) translateY(-30%) scale(.8);opacity:0}100%{transform:translateX(-50%);opacity:1}}
.lay .folderdoc{position:absolute;object-fit:cover;border-radius:.8cqw;box-shadow:0 .6cqw 1.4cqw rgba(0,0,0,.45);transform:rotate(-1deg)}
.lay .folderdoc:nth-of-type(even){transform:rotate(1.2deg)}
body.still .lay .sprite,body.still .lay .solart{animation:none}
.cluegrid.n4 button:last-child{grid-column:auto}
.trio.n4{grid-template-columns:repeat(4,1fr)}
.trio.n4 img{width:min(100%,80px)}
.trio.n4 b{font-size:16px}
.trio.n4 span{font-size:12px}
.solgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:clamp(10px,1.8vh,16px)}
.solgrid button{display:flex;flex-direction:column;gap:4px;text-align:left;border-radius:14px;border:2px solid #d8ccb0;background:#fffdf7;color:var(--navy);padding:8px;transition:border-color .15s}
.solgrid button[aria-pressed="true"]{background:#f3faf7;border-color:#9fd1c5}
.solgrid img{width:100%;aspect-ratio:2.6/1;object-fit:contain}
.solgrid b{font:600 16px/1.15 var(--display)}
.solgrid small{font:500 12.5px/1.35 var(--body);color:var(--ink-soft)}
.solgrid em{font-style:normal;font-weight:800;color:var(--teal-ink)}
.qlist.opts button{font:500 16px/1.3 var(--display)}
.qlist.opts .qi{background:#fffdf7;border:2px solid var(--navy);color:var(--teal-ink)}
.qlist.opts button[aria-pressed="true"] .qi{background:var(--teal-ink);color:#fff;border-color:var(--teal-ink)}
.answer textarea.mid{height:clamp(70px,11vh,110px)}
.checks{display:grid;gap:8px;margin-top:clamp(10px,1.8vh,16px)}
.checkline{display:flex;gap:12px;align-items:center;min-height:48px;padding:6px 12px;border-radius:12px;border:2px solid #d8ccb0;background:#fffdf7;font:500 16.5px/1.3 var(--display);color:var(--navy);cursor:pointer}
.checkline input{width:24px;height:24px;flex:none;accent-color:var(--teal-ink)}
.checkline:has(input:checked){background:#f3faf7;border-color:#9fd1c5}
.doc .docmap{display:block;width:100%;border-radius:10px;margin:8px 0}
.doc .dtable{width:100%;border-collapse:collapse;margin:8px 0;font-size:16px}
.doc .dtable th,.doc .dtable td{padding:6px 10px;border-bottom:1px solid #d9c9a3;text-align:left}
.doc .dtable thead th{background:var(--dc);color:#fff;font:700 13px var(--body);letter-spacing:.06em;text-transform:uppercase}
.doc .dtable td:last-child{font-weight:700;color:#8a2b16}
.doc .dnote{margin-top:10px;font:italic 13px/1.4 var(--body);color:#5b6170}
.doc.d-red{--dc:#a8452e}
.sheet .joyline{margin-bottom:12px}
.finale .papers{display:grid;gap:16px}
.sheet .cardsheet+.cardsheet{margin-top:16px}
@media (max-width:899px){
  .solgrid small{display:none}
  .trio.n4 img{width:56px}
  .assign img{width:88px}
  .assign i{display:none}
}
@media (max-width:759px){
  .qcard.answered>.joyline .say>span{display:block;max-height:4.3em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
  .k-hub .joyline[data-say="say"] .say>span,.k-reflect .joyline .say>span,.k-compare .joyline[data-say="say"] .say>span,.k-decide .joyline .say>span,.k-story .joyline .say>span,.k-write .joyline .say>span,.k-facts .joyline .say>span,.k-quote .joyline .say>span,.k-review .joyline .say>span,.k-publish .joyline .say>span,.k-docs .joyline .say>span,.k-meet .joyline .say>span,.k-claims .joyline .say>span{display:block;max-height:4.4em;overflow:auto;scrollbar-width:thin}
  .checkline{min-height:42px;font-size:15px}
}
@media (min-width:760px){
  .k-hub .joyline[data-say="say"] .say>span,.k-reflect .joyline[data-say="say"] .say>span,.k-decide .joyline[data-say="say"] .say>span,.k-compare .joyline[data-say="say"] .say>span,.k-docs .joyline[data-say="say"] .say>span,.k-publish .joyline[data-say="say"] .say>span,.k-story .joyline[data-say="say"] .say>span{display:block;max-height:clamp(5.6em,22vh,11.5em);overflow:auto;scrollbar-width:thin}
}

/* =================== THE CIVIC CENTER =================== */
/* Card on the left, the easel (a big framed felt picture) on the right */
.civic.story.has-easel{grid-template-columns:min(520px,42vw) minmax(0,1fr);gap:clamp(16px,2.6vw,44px);justify-items:stretch}
.civic.story.has-easel .qcard{width:100%}
.easel{margin:0;align-self:center;justify-self:center;width:100%;max-width:900px;max-height:100%;min-height:0;display:flex;flex-direction:column;gap:10px;padding:clamp(10px,1.4vw,16px);border-radius:22px;background:#fbf4e2;color:var(--ink);
  box-shadow:inset 0 0 0 6px #fbf4e2,inset 0 0 0 8px rgba(185,134,26,.55),0 30px 80px rgba(0,0,0,.5);position:relative}
.easel::before{content:"";position:absolute;inset:14px;border:2px dashed rgba(185,134,26,.45);border-radius:14px;pointer-events:none}
.easel>*{position:relative}
.easel .pic{position:relative;border-radius:14px;overflow:hidden;container-type:inline-size;background:#2a1a10;flex:none}
.easel .pic>img{width:100%;height:auto;max-height:56vh;object-fit:cover;transition:opacity .26s,transform .5s var(--ease)}
.easel.flip .pic>img{opacity:0;transform:scale(1.03)}
.easel figcaption{display:flex;gap:12px;align-items:center;font:500 clamp(15px,2vh,18px)/1.35 var(--display);color:var(--ink);padding:0 6px 4px}
.easel figcaption b{display:block;font:800 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.cface{width:52px;height:52px;border-radius:50%;border:3px solid var(--gold);object-fit:cover;flex:none}
.easel .tags{position:absolute;left:2.5cqw;right:2.5cqw;bottom:2.5cqw;display:flex;flex-wrap:wrap;gap:1.2cqw;justify-content:flex-start}
.easel .tag{background:#fffaf0;color:var(--navy);border:.35cqw solid #d9b86c;border-radius:99px;padding:.8cqw 1.8cqw;font:800 max(12px,1.7cqw)/1.2 var(--body);box-shadow:0 .6cqw 1.4cqw rgba(0,0,0,.35);animation:tagin .45s cubic-bezier(.3,1.5,.5,1) both}
@keyframes tagin{from{transform:translateY(40%) scale(.6);opacity:0}}
.easel .ribbon{position:absolute;left:50%;top:3cqw;transform:translateX(-50%) rotate(-2deg);white-space:nowrap;background:var(--gold);color:var(--navy);font:900 max(12px,2cqw)/1 var(--body);letter-spacing:.14em;padding:1.4cqw 3.4cqw;border-radius:1cqw;box-shadow:0 0 0 .4cqw #fbf4e2,0 0 0 .65cqw var(--gold-deep),0 1cqw 2cqw rgba(0,0,0,.4);animation:tagin .7s .3s cubic-bezier(.3,1.5,.5,1) both}
.easel .talkdot{position:absolute}

/* candidates list (meet) */
.qlist.cands button{gap:12px;align-items:center}
.qlist.cands img{width:48px;height:48px;border-radius:50%;border:2px solid var(--gold);object-fit:cover;flex:none}
.qlist.cands b{display:block;font:600 18px/1.15 var(--display)}
.qlist.cands small{display:block;font:500 14px/1.3 var(--body);color:var(--ink-soft)}
.qlist.cands em{margin-left:auto;font:800 12px var(--body);font-style:normal;color:var(--teal-ink);white-space:nowrap;padding-left:6px}
.qlist.cands button[aria-pressed="true"]{border-color:var(--navy);box-shadow:0 0 0 3px var(--gold)}
.answerline .say>span{display:block;max-height:clamp(96px,19vh,190px);overflow:auto}
.chips.who img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--gold)}
.chips.big.ideas button{text-align:left;white-space:normal}
.note{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:#fff1cb;border-left:5px solid var(--gold);color:var(--ink);font:600 15px/1.4 var(--body)}

/* The Fair Questions chart */
.chart{display:flex;flex-direction:column;gap:6px;padding:6px 8px 8px}
.chart h3{margin:0 0 4px;text-align:center;font:600 clamp(20px,2.8vh,28px)/1.1 var(--display);color:var(--navy)}
.crow{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,1fr));gap:6px;align-items:stretch}
.crow.head span{font:800 12px/1.2 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--teal-ink);text-align:center;align-self:end;padding:0 2px}
.cwho{display:flex;align-items:center;gap:8px;font:600 clamp(15px,2vh,18px)/1.1 var(--display);color:var(--navy)}
.cwho img{width:clamp(34px,5.6vh,52px);height:clamp(34px,5.6vh,52px);border-radius:50%;border:2px solid var(--gold);object-fit:cover;flex:none}
.cell{min-height:clamp(46px,8vh,78px);border-radius:12px;background:#fffdf7;border:2px dashed #d8ccb0;font:800 clamp(18px,3vh,26px) var(--body);color:#b9a986;transition:background .2s,transform .2s}
.cell:hover{border-color:var(--gold-deep)}
.cell.on{background:#e3f4ef;border:2px solid #9fd1c5;color:var(--teal-ink)}
.cell.now{box-shadow:0 0 0 3px var(--gold);transform:scale(1.04)}

/* The voting booth */
.booth{position:relative;aspect-ratio:4/3;max-height:62vh;width:100%;border-radius:14px;overflow:hidden;background:linear-gradient(#e9dcc0,#d8c7a2);box-shadow:inset 0 0 0 10px #6b3f22,inset 0 0 0 13px #3f2412}
.booth .rail{position:absolute;left:0;right:0;top:0;height:9%;background:linear-gradient(#8a5a33,#5d3a1f);z-index:3;box-shadow:0 4px 10px rgba(0,0,0,.35)}
.booth .curtain{position:absolute;top:6%;bottom:0;width:51%;z-index:2;transition:transform 1s cubic-bezier(.6,0,.25,1);
  background:radial-gradient(circle at 50% 50%,rgba(242,184,43,.9) 0 2.5px,transparent 3px) 0 0/34px 34px,repeating-linear-gradient(90deg,#0d2550 0 16px,#071a3d 16px 32px);box-shadow:inset 0 -20px 30px rgba(0,0,0,.35)}
.booth .curtain.l{left:0;border-right:3px solid var(--gold-deep)}
.booth .curtain.r{right:0;border-left:3px solid var(--gold-deep)}
.booth.open .curtain.l{transform:translateX(-86%)}
.booth.open .curtain.r{transform:translateX(86%)}
.boothsign{position:absolute;z-index:4;left:50%;top:14%;transform:translateX(-50%);background:#fbf4e2;color:var(--navy);font:600 clamp(16px,2.4vh,22px) var(--display);padding:6px 18px;border-radius:10px;border:2px solid #d9b86c;white-space:nowrap;transition:opacity .4s}
.privsign{position:absolute;z-index:4;left:50%;bottom:8%;transform:translateX(-50%);background:var(--gold);color:var(--navy);font:900 clamp(11px,1.5vh,14px) var(--body);letter-spacing:.1em;padding:8px 14px;border-radius:99px;white-space:nowrap;transition:opacity .4s;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.booth.open .boothsign,.booth.open .privsign{opacity:0}
.bbox{position:absolute;z-index:1;left:50%;bottom:10%;transform:translateX(-50%);width:34%;aspect-ratio:1.2;border-radius:10px;background:linear-gradient(#f8f3e7,#e6dcc4);border:4px solid #14507a;display:grid;place-items:center;box-shadow:0 12px 24px rgba(0,0,0,.3)}
.bbox b{font-size:clamp(30px,6vh,60px)}
.bbox .slot{position:absolute;top:10%;left:25%;right:25%;height:6%;background:#14507a;border-radius:99px}
.flyballot{position:absolute;left:38%;width:24%;aspect-ratio:3/4;top:-150%;background:#fffaf0;border:2px solid #c9bca1;border-radius:4px;opacity:0;
  background-image:repeating-linear-gradient(#fffaf0 0 10px,#d8ccb0 10px 11px)}
.booth.casting .flyballot{animation:dropin 1.4s .6s cubic-bezier(.5,0,.6,1) forwards}
@keyframes dropin{0%{opacity:1;transform:translateY(0) rotate(-8deg)}70%{opacity:1;transform:translateY(150%) rotate(0)}100%{opacity:0;transform:translateY(190%) scaleY(.2)}}

/* The ballot (in the card) */
.ballot{margin:12px 0 0;padding:12px 14px 14px;border:2px dashed #c9bca1;border-radius:14px;background:#fffdf7}
.ballot legend{font:800 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink);padding:0 8px}
.ballot .small{margin:0 0 8px}
.bchoice{display:flex;align-items:center;gap:12px;padding:10px 12px;margin-top:8px;border-radius:12px;border:2px solid #d8ccb0;background:#fff;cursor:pointer;color:var(--navy);transition:border-color .15s,background .15s}
.bchoice:hover{border-color:var(--gold-deep)}
.bchoice input{position:absolute;opacity:0;width:1px;height:1px}
.bchoice .oval{width:30px;height:20px;border-radius:50%;border:2.5px solid var(--navy);flex:none;background:#fff}
.bchoice.on{background:#eef6f4;border-color:var(--teal-ink)}
.bchoice.on .oval{background:var(--navy);box-shadow:inset 0 0 0 3px #fff}
.bchoice:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:2px}
.bchoice img{width:44px;height:44px;border-radius:50%;border:2px solid var(--gold);object-fit:cover;flex:none}
.bchoice b{display:block;font:600 18px/1.15 var(--display)}
.bchoice small{display:block;font:500 13.5px/1.3 var(--body);color:var(--ink-soft)}
.bchoice:has(input:disabled){cursor:default}
#reviewBtn[aria-disabled="true"]{opacity:.55}

/* The count */
.tally{display:flex;flex-direction:column;gap:14px;padding:10px 8px}
.tally .bbox{position:relative;left:auto;bottom:auto;transform:none;margin:0 auto;width:min(150px,30%)}
.tally .bbox::after{content:"";position:absolute;left:30%;right:30%;top:-34%;height:40%;background:#fffaf0;border:2px solid #c9bca1;border-radius:3px;animation:bob 1.1s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(55%)}}
body.still .tally .bbox::after{animation:none}
.tally .bars{display:flex;flex-direction:column;gap:12px}
.tbar{display:grid;grid-template-columns:auto minmax(80px,auto) minmax(0,1fr) 3ch;align-items:center;gap:10px}
.tbar img{width:42px;height:42px;border-radius:50%;border:2px solid var(--gold);object-fit:cover}
.tname{font:600 17px/1.1 var(--display);color:var(--navy)}
.track{height:26px;border-radius:99px;background:#efe6d1;box-shadow:inset 0 2px 4px rgba(0,0,0,.15);overflow:hidden}
.fill{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--teal-ink),var(--teal));transition:width .09s linear}
.tbar .num{font:800 20px var(--body);color:var(--navy);text-align:right}
.ttotal{margin:0;text-align:center;font:800 13px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink)}

/* Results (in the card) */
.results{display:grid;gap:8px;margin-top:12px}
.rrow{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:12px;border:2px solid #d8ccb0;background:#fffdf7;color:var(--navy)}
.rrow img{width:42px;height:42px;border-radius:50%;border:2px solid var(--gold);object-fit:cover;flex:none}
.rrow b{display:block;font:600 17px/1.15 var(--display)}
.rrow small{display:block;font-size:13px;color:var(--ink-soft)}
.rrow em{margin-left:auto;font:800 15px var(--body);font-style:normal;white-space:nowrap}
.rrow.win{background:#fff6dc;border-color:var(--gold);box-shadow:0 0 0 3px rgba(242,184,43,.35)}
.rrow.win em::before{content:"★ ";color:var(--gold-deep)}
.winline{font-weight:700}

/* The City Journal page (on the easel and in the sheet) */
.jpage{padding:16px 20px 18px;border-radius:12px;min-height:min(52vh,460px);background:#fffdf5 repeating-linear-gradient(transparent 0 33px,#d7e3ee 33px 34px);border-left:6px double #e5a3a3;color:var(--navy)}
.jpage h3{margin:0;font:600 clamp(24px,3.4vh,32px)/1.1 var(--display)}
.jby{margin:2px 0 6px;font:700 13px var(--body);color:var(--ink-soft)}
.jpage h4{margin:12px 0 0;font:800 11.5px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink)}
.jpage p{margin:2px 0 0;font:400 clamp(19px,2.6vh,24px)/1.4 var(--hand);white-space:pre-wrap;overflow-wrap:anywhere;max-height:7.2em;overflow:hidden}
.jpage p.ph{color:#b9a986}
.easel.insheet{box-shadow:none;padding:0;background:none}
.easel.insheet::before{display:none}

/* Phones and narrow tablets: the easel sits on top, the card below */
@media (max-width:899px){
  .civic.story.has-easel{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-content:stretch;gap:10px}
  .civic.story.has-easel .easel{order:-1;max-height:none;padding:8px;gap:6px;border-radius:16px}
  .civic.story.has-easel .easel::before{inset:8px}
  .civic.story.has-easel .qcard{max-height:100%;align-self:end}
  .easel .pic>img{max-height:26vh}
  .easel figcaption{font-size:13.5px;gap:8px}
  .easel figcaption>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .cface{width:36px;height:36px}
  .booth{max-height:17vh;aspect-ratio:auto;height:17vh}.boothsign{top:16%;font-size:14px;padding:3px 12px}.privsign{bottom:6%;font-size:10px;padding:5px 10px}.bchoice{padding:6px 10px;margin-top:6px}.bchoice img{width:36px;height:36px}
  .chart h3{font-size:17px}
  .cell{min-height:36px;font-size:16px}
  .crow.head span{font-size:9.5px;letter-spacing:0}
  .cwho{font-size:13px;gap:5px}.cwho img{width:28px;height:28px}
  .tally{gap:6px;padding:4px}.tally .bbox{display:none}.tbar img{width:30px;height:30px}.tname{font-size:14px}.track{height:16px}.tbar .num{font-size:16px}
  .jpage{min-height:0;max-height:22vh;overflow:hidden;padding:8px 12px}.jpage h3{font-size:18px}.jpage h4{margin-top:4px}.jpage p{font-size:16px;max-height:2.8em}
  .story.k-journal .easel{display:none}
  .story.k-journal.has-easel{grid-template-rows:minmax(0,1fr)}
}
@media (max-width:899px) and (max-height:700px){
  .easel .pic>img{max-height:20vh}
  .booth{height:18vh}
}

/* ======================= The Mayor’s Office ======================= */
/* Mayor Sharpe stands in the room beside the card (a cut-out of the felt puppet) */
.actor{position:fixed;z-index:9;right:max(3vw,18px);bottom:0;height:min(70vh,640px);aspect-ratio:3/5;pointer-events:none;opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.actor.on{opacity:1;transform:none}
.actor img{position:absolute;inset:auto 0 0 0;margin:auto;max-width:100%;max-height:100%;width:auto;height:100%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5));transform-origin:50% 100%}
.actor.talk img{animation:mtalk 1.6s ease-in-out infinite}
@keyframes mtalk{0%,100%{transform:rotate(0) translateY(0)}30%{transform:rotate(-.8deg) translateY(-3px)}65%{transform:rotate(.6deg) translateY(-1px)}}
body.titled .actor{opacity:0}
body.still .actor.talk img{animation:none}
@media (min-width:900px){.actor{right:max(8vw,40px)}}
@media (max-width:899px){
  .actor{height:34vh;right:8px;bottom:auto;top:calc(var(--bar) + 6px)}
  body.with-actor .mayor.story:not(.has-easel) .qcard{max-height:calc(100% - 30vh);align-self:end}
  body.with-actor .mayor.story:not(.has-easel){align-items:end}
}

.qlist .qi{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:var(--gold);font:800 14px var(--body)}
.qlist button[aria-pressed="true"] .qi{background:var(--teal-ink)}
.joyline.w-parker .face,.joyline.w-mayor .face{background-color:#f3e2b5}
.note.news,.small.news{background:#fff6dd;border:1.5px solid #ecd28e;border-radius:12px;padding:10px 12px;color:var(--navy);font:600 clamp(14px,1.9vh,16px)/1.4 var(--display)}
.note{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:#f6efe0;border:1.5px dashed #d8c08a;font:500 clamp(14.5px,1.95vh,17px)/1.4 var(--display);color:var(--navy)}
.small-lbl{margin-top:10px}
.answer input.field{min-height:52px;border-radius:14px;border:2px solid #d8ccb0;background:#fff;padding:6px 14px;font:400 clamp(22px,3vh,28px)/1.2 var(--hand);color:var(--navy);width:100%}
.answer input.field:focus{outline:3px solid rgba(242,184,43,.8);border-color:var(--gold-deep)}
.btn.done{background:var(--teal-ink);border-color:var(--teal-ink)}
.chips.tapins{margin-top:6px}
.chips.tapins button{background:#fff6dd;border-color:#ecd28e;min-height:40px}
.chips.tapins button.used{opacity:.55}
.chips.who button.hint{box-shadow:0 0 0 3px rgba(242,184,43,.7);animation:pulse 1.4s ease-in-out 3}
.chips.parts button{min-width:52px;justify-content:center;text-align:center;font-size:16px}
@keyframes pulse{50%{transform:scale(1.06)}}

/* The Visitors Log: the child's name inked on the next line */
.easel .pic.log{background:#3a2412}
.easel .pic .ink{position:absolute;transform:translateY(-50%) rotate(1.5deg);transform-origin:left center;font:400 max(11px,2.1cqw)/1 var(--hand);color:#1f3a7a;white-space:nowrap;max-width:12cqw;overflow:hidden;text-overflow:ellipsis}
.easel .pic .ink.sm{font-size:max(10px,1.8cqw);max-width:13cqw}
.easel .pic .ink.write{animation:inkwrite 1s steps(16) both}
@keyframes inkwrite{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* My Big Idea card */
.bigidea{position:relative;padding:18px 22px 20px;border-radius:14px;background:#fffaf0;border:2px solid #e9d8a9;min-height:min(52vh,460px);overflow:hidden}
.bigidea .bi-art{position:absolute;right:-30px;bottom:-30px;width:46%;opacity:.22;transform:rotate(-6deg);pointer-events:none}
.bigidea h3{margin:0 0 4px;font:600 clamp(24px,3.4vh,32px)/1.1 var(--display);color:var(--navy)}
.bi-row{position:relative;padding:8px 10px;border-radius:10px;margin-top:6px;transition:background .3s}
.bi-row.now{background:#fdf1d4;box-shadow:inset 3px 0 0 var(--gold)}
.bi-row h4{margin:0;font:800 11.5px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink)}
.bi-row p{margin:2px 0 0;font:400 clamp(19px,2.5vh,23px)/1.3 var(--hand);color:var(--navy);white-space:pre-wrap;overflow-wrap:anywhere;max-height:3.9em;overflow:hidden}
.bi-row p.ph{color:#b9a986}

/* The proclamation on its felt parchment */
.parch{position:relative;container-type:inline-size;max-width:min(560px,100%);margin:0 auto;aspect-ratio:355/505}
.parch>img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;filter:drop-shadow(0 12px 24px rgba(0,0,0,.35))}
.parch .ptext{position:absolute;left:11%;right:10%;top:21%;bottom:16%;padding:2.4cqw 3cqw;border-radius:2cqw;background:rgba(251,243,224,.94);box-shadow:0 0 2cqw 1cqw rgba(251,243,224,.9);display:flex;flex-direction:column;gap:1.6cqw;overflow:hidden;color:#2a2010;text-align:left}
.parch .pcity{margin:0;text-align:center;font:800 max(9px,2.4cqw)/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:#7a6232}
.parch h3{margin:0 0 1cqw;text-align:center;font:700 max(14px,5.2cqw)/1.05 var(--display);color:var(--navy)}
.parch .pline{margin:0;font:400 max(13px,4.1cqw)/1.25 var(--hand);color:#1f3a7a;overflow-wrap:anywhere;padding:.6cqw 1.2cqw;border-radius:1.4cqw;transition:background .3s}
.parch .pline b{font:700 max(10px,2.9cqw)/1.2 var(--display);color:#6b4a14;font-style:italic}
.parch .pline.now{background:rgba(242,184,43,.18);box-shadow:inset .6cqw 0 0 var(--gold)}
.parch .pline.ph{color:#b9a986}
.parch .psig{margin:auto 0 0;font:400 max(13px,4.2cqw)/1 var(--hand);color:#071a3d;border-top:1px solid #8a6a2a;padding-top:1cqw;width:70%}
.easel .parch{max-height:calc(100vh - var(--bar) - 80px);width:auto;height:min(68vh,640px)}
.easel.spot .parch{box-shadow:0 0 0 6px rgba(242,184,43,.35),0 0 60px rgba(242,184,43,.6);border-radius:12px}
.easel.handed .parch{transition:transform .9s var(--ease),opacity .9s;transform:translate(30%,-10%) rotate(8deg) scale(.7);opacity:.2}
.parch.big{height:auto;width:min(560px,100%)}
.partlist{margin:8px 0 0;padding-left:22px;display:grid;gap:6px;font:500 clamp(15px,2vh,18px)/1.35 var(--display);color:var(--navy)}
.partlist b{font-style:italic;color:#6b4a14}
.partlist span{color:var(--ink-soft)}

/* The podium choices and the three “move forward” cards */
.qlist.ways button{font:600 16px/1.3 var(--body);min-height:56px}
.fcards{display:grid;gap:8px;margin-top:8px}
.fcard{border-radius:14px;border:2px solid #d8ccb0;background:#fffdf7;overflow:hidden}
.fcard .fhead{width:100%;text-align:left;padding:12px 14px;background:var(--navy);color:var(--gold);font:700 17px var(--display);border:0;min-height:48px}
.fcard.open .fhead{background:#13305f}
.fcard .fbody{display:none;padding:10px 14px 12px}
.fcard.open .fbody{display:block}
.fcard .fbody p{margin:0 0 8px;font:500 16px/1.35 var(--display);color:var(--navy)}
.fcard .chips button[aria-pressed="true"]{background:var(--navy);color:var(--ivory);border-color:var(--navy)}

/* The golden envelope, the certificate and the Passport stamp */
.easel .pic.env{background:#2a1a10;display:grid;place-items:center}
.easel .pic.env>img{max-height:56vh;object-fit:contain}
.easel .pic.env.paper{background:#5a3a1c;padding:3cqw}
.easel .pic.env.paper .parch{height:min(50vh,520px);width:auto}
.easel .pic.env.paper .cert{width:min(640px,100%)}
.easel .pic.env.pass{background:#5a3a1c;padding:4cqw}
.easel .pic.env.pass .pp{margin:0 auto}
.cert{position:relative;container-type:inline-size;max-width:min(640px,100%);margin:0 auto}
.cert img{width:100%;height:auto;display:block;filter:drop-shadow(0 12px 24px rgba(0,0,0,.35))}
.cert .cname{position:absolute;left:22%;right:22%;top:52.5%;text-align:center;font:400 max(16px,6cqw)/1 var(--hand);color:#071a3d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:inkwrite 1.2s steps(16) .3s both}
.cert .cdate{position:absolute;left:19%;top:80%;width:20%;font:400 max(8px,2.3cqw)/1 var(--hand);color:#071a3d;white-space:nowrap}
.easel .pic.env.stamped>img:first-child{max-height:56vh}
.mostamp{position:absolute;left:50%;top:58%;width:36%;transform:translate(-50%,-50%) rotate(-12deg);mix-blend-mode:multiply;opacity:.92;animation:thump .55s cubic-bezier(.3,1.6,.5,1) .2s both}
@keyframes thump{0%{transform:translate(-50%,-50%) scale(1.8) rotate(-30deg);opacity:0}100%{transform:translate(-50%,-50%) scale(1) rotate(-12deg);opacity:.92}}
.envsteps{list-style:none;display:flex;gap:6px;padding:0;margin:12px 0 0}
.envsteps li{flex:1;height:8px;border-radius:99px;background:#e8dcc0}
.envsteps li.done{background:var(--gold)}
.envsteps li.now{background:var(--teal)}
.sheet .easel.insheet .cert{margin-top:16px}

/* Print: the proclamation and the certificate, one page each */
@media print{
  .print-area .printpage{page-break-after:always;padding:24px;display:grid;place-items:center}
  .print-area .parch{width:150mm;height:auto}
  .print-area .cert{width:240mm;max-width:100%}
  .print-area .cert .cname{animation:none}
}

/* Phones: keep the parchment and envelope pictures small enough for the card */
@media (max-width:899px){
  .easel .parch{height:24vh}
  .easel .pic.env>img,.easel .pic.env.stamped>img:first-child{max-height:24vh}
  .easel .pic.env.paper .parch{height:22vh}
  .easel .pic.env.paper .cert{width:min(360px,100%)}
  .bigidea{min-height:0;max-height:22vh;padding:8px 12px}.bigidea h3{font-size:18px}.bi-row{padding:2px 6px;margin-top:2px}.bi-row p{font-size:16px;max-height:1.3em}
  .story.k-problem .bi-row:not(.now),.story.k-who .bi-row:not(.now),.story.k-solution .bi-row:not(.now),.story.k-helpers .bi-row:not(.now){display:none}
  .story.k-write .easel .parch,.story.k-chamber .easel .parch,.story.k-podium .easel .parch{height:26vh}
}

/* ======================= Cave Spring Park ======================= */
/* Ranger Willow stands on the trail beside the card (a cut-out of the felt puppet) */
.actor{aspect-ratio:3/4}
.joyline.w-willow .face{background-color:#dfe9cf;background-size:cover;background-position:center 20%}
.qlist.ways button{font:600 17px/1.3 var(--body);min-height:58px}
.qlist.opts button>span:not(.qi),.qlist.acts button>span:not(.qi){display:flex;flex-direction:column;gap:2px;text-align:left}
.qlist.opts button b,.qlist.acts button b{font:600 18px/1.15 var(--display);color:var(--navy)}
.qlist.opts button small,.qlist.acts button small{font:500 14px/1.3 var(--body);color:var(--ink-soft)}
.qlist.acts button{min-height:60px;align-items:center}
.chips.spots{margin-top:6px}
.chips.spots button{min-height:44px}
.chips.spots button[aria-pressed="true"],.chips.cluechips button[aria-pressed="true"]{background:#2f5d3a;color:#fffaf0;border-color:#2f5d3a}
.chips.cluechips button{display:inline-flex;align-items:center;gap:8px;min-height:48px}
.chips.cluechips img{width:30px;height:44px;object-fit:cover;border-radius:5px;border:1.5px solid #d9b86c}
.count{margin:8px 0 0;font:800 12.5px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink)}
.rh{margin:8px 0 2px;font:600 clamp(22px,3vh,28px)/1.15 var(--display);color:#2f5d3a}
.qcard .lede{font:500 clamp(16px,2.2vh,19px)/1.45 var(--display);color:var(--navy);margin:4px 0 0}
.field.sm{min-height:44px;font-size:clamp(19px,2.5vh,23px)}
.two{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.two input.field{min-width:0;width:100%}

/* The pond sounds */
.sounds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:6px}
.snd{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:10px 12px;border-radius:14px;border:2px solid #d8ccb0;background:#fffdf7;color:var(--navy);text-align:left;cursor:pointer;min-height:96px;transition:border-color .15s,background .15s}
.snd:hover{border-color:var(--gold-deep)}
.snd b{font:700 15px/1.2 var(--body)}
.snd small{font:500 13px/1.3 var(--body);color:var(--ink-soft)}
.snd .pl{margin-top:auto;font:800 12px var(--body);letter-spacing:.06em;color:var(--teal-ink)}
.snd[aria-pressed="true"]{background:#eef5e8;border-color:#7da36b}
.snd.playing{box-shadow:0 0 0 3px var(--gold);background:#fff6dd}
.snd.playing .pl{color:var(--navy)}

/* Observation cards on the easel */
.easel .pic.card{background:#3b4a2c;display:grid;place-items:center;padding:2.5cqw}
.easel .pic.card>img{width:auto;max-width:100%;max-height:min(60vh,620px);object-fit:contain;border-radius:10px;box-shadow:0 10px 26px rgba(0,0,0,.45)}
.k-clues.has-easel .easel{max-width:560px}

/* The felt Nature Journal page with the child's words on it (positions are % of the page art) */
.jp{position:relative;container-type:inline-size;width:auto;height:min(72vh,720px);aspect-ratio:1102/1427;max-width:100%;margin:0 auto}
.jp>img{position:absolute;inset:0;width:100%;height:100%;border-radius:10px;box-shadow:0 12px 28px rgba(0,0,0,.35)}
.jp .jt{position:absolute;overflow:hidden;font:400 max(10px,3.4cqw)/1.18 var(--hand);color:#1f3a7a;white-space:pre-wrap;overflow-wrap:anywhere;padding:.3cqw .8cqw;border-radius:1.2cqw;transition:background .3s;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.jp .jt.ph{color:#c2b28c}
.jp .jt.now{background:rgba(242,184,43,.2);box-shadow:inset .5cqw 0 0 var(--gold)}
.jp>img.jstamp{inset:auto;height:auto;border-radius:0;box-shadow:none;filter:drop-shadow(0 3px 6px rgba(0,0,0,.3))}
.jp .jstamp{position:absolute;left:84.6%;top:87.3%;width:12.6%;transform:rotate(-10deg);animation:thump2 .55s cubic-bezier(.3,1.6,.5,1) .2s both}
@keyframes thump2{0%{transform:scale(1.8) rotate(-30deg);opacity:0}100%{transform:scale(1) rotate(-10deg);opacity:1}}
.easel:has(.jp){max-width:620px;background:#efe6cf}
.easel.insheet .jp{height:auto;width:min(560px,100%)}
@media print{.print-area .jp{width:170mm;height:auto}.print-area .jp .jstamp{animation:none}}

@media (min-width:900px){
  .park.story .qcard{width:min(540px,44vw)}
  .civic.park.story.has-easel{grid-template-columns:min(540px,44vw) minmax(0,1fr)}
}
/* Phones and narrow tablets */
@media (max-width:899px){
  .actor{aspect-ratio:3/4}
  .sounds{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .snd{min-height:0;padding:7px 8px}.snd small{display:none}.snd b{font-size:13.5px}
  .easel .pic.card>img{max-height:24vh}
  .jp{height:26vh}
  .story.k-journal .easel{display:none}
  .two{grid-template-columns:1fr}
  .qlist.opts button small,.qlist.acts button small{font-size:12.5px}
}

/* Phones: busy pages give the whole screen to the card (Ranger Willow waits off to the side), and the journal page tucks away while writing the setting */
@media (max-width:899px){
  body:has(.park.k-think) .actor,body:has(.park.k-pond) .actor,body:has(.park.k-solution) .actor,body:has(.park.k-describe) .actor,body:has(.park.k-chimney) .actor{display:none}
  body.with-actor .mayor.park.story.k-think .qcard,body.with-actor .mayor.park.story.k-pond .qcard,body.with-actor .mayor.park.story.k-solution .qcard,body.with-actor .mayor.park.story.k-describe .qcard,body.with-actor .mayor.park.story.k-chimney .qcard{max-height:100%}
  .story.k-setting .easel{display:none}
  .story.k-setting.has-easel{grid-template-rows:minmax(0,1fr)}
  .chips.cluechips img{width:22px;height:32px}
  .chips.cluechips button{min-height:42px}
  .park .joyline .say>span{max-height:5.6em;overflow:auto}
}