/* Home "Guess Today's Object" (?home=c). Everything is scoped under .hg so it never touches the shared header, strips or footer.
   No inline styles: the page script only sets sizes through the CSS object model, which the strict CSP allows. */
:root{--foot-label-color:#b1bbb3;--foot-accent:#f45340;--stageH:clamp(170px,calc(100svh - 440px),460px)} /* the page script overwrites --stageH on phones so the four options stay above the fold */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
::selection{background:#eff773;color:#173f35}
body{margin:0;color:#173f35;background:#fffef4;font:16px/1.5 Arial,Helvetica,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
img{display:block;width:100%;height:auto} /* same base as magazine.css so the shared print strips lay out the same */
p{line-height:1.6}
.hg p{line-height:1.5}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
:focus{outline:none}
:focus-visible{outline:3px solid #f45340;outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:16px;top:-100px;padding:15px;background:#eff773;z-index:300}
.skip:focus{top:16px}
footer{padding-left:5vw;padding-right:5vw;background:#173c32;color:#faf7ef}
footer>div:last-child a{padding:10px 0;display:inline-block;min-height:44px}

/* The page script sets the final heights (options, picture window) in one go; until then the game is laid out but not painted, so the panel never jumps.
   If the script never runs, the pure-CSS timer below shows it anyway. Without JS the class is never set and everything shows. */
.hg-js:not(.hg-ready) .hg{visibility:hidden;animation:hg-show 0s 2s forwards}
@keyframes hg-show{to{visibility:visible}}
.hg{--ink:#173f35;--paper:#fffef4;--coral:#f45340;--yellow:#eff773;--line:#173f3525;--gut:max(16px,5vw);--ease:cubic-bezier(.2,.7,.1,1)}
.hg .hero{position:relative;display:flex;flex-direction:column;isolation:isolate}
/* A's mosaic, cut from the editions' own pictures, drawn into canvases on idle (after the hero has painted) */
.hg .mzc{position:absolute;left:0;top:0;pointer-events:none;opacity:0}
.hg .mzc.on{opacity:1;transition:opacity 1s var(--ease)}
.hg #mzh{z-index:-1;-webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent)}
.hg #mzh.on{opacity:.16}
.hg .bar{display:flex;align-items:center;min-height:34px;padding:2px var(--gut) 0}
.hg .streak{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;white-space:nowrap;
  pointer-events:none;user-select:none;-webkit-user-select:none;cursor:default}
.hg .streak i{width:8px;height:8px;border-radius:50%;background:var(--coral);flex:none}
.hg .stage{position:relative;margin:0 var(--gut);height:var(--stageH);display:flex;align-items:center;justify-content:center}
@keyframes hg-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hg .frame{position:relative;padding:8px;background:var(--ink);border:2px solid var(--ink);box-shadow:0 14px 32px -14px #173f3566;overflow:hidden}
.hg .window{position:relative;width:300px;height:180px;overflow:hidden;background:#12342b;contain:paint;border:0}
.hg .fr{position:absolute;left:0;top:0;transform-origin:0 0;visibility:hidden}
.hg .fr.on{visibility:visible}
.hg .fr img{width:100%;height:100%;object-fit:fill;user-select:none;-webkit-user-drag:none}
.hg .cap{position:absolute;left:8px;right:8px;bottom:8px;max-width:max-content;padding:5px 10px;border-radius:8px;background:#fffef4ee;color:var(--ink);font-size:11px;line-height:1.35;font-weight:600;
  display:block;animation:hg-rise .5s var(--ease) both}
.hg .cap[hidden]{display:none}
.hg .cap.below{position:static;max-width:none;margin:12px var(--gut) 0;padding:0;border-radius:0;background:none;font-size:12px;line-height:1.45;opacity:.85}
.hg .panel{padding:12px var(--gut) 20px}
.hg .k{display:flex;gap:8px;align-items:center;font-size:12px;font-weight:700;letter-spacing:1.6px}
.hg .k .rd{color:var(--coral)}
.hg .q{font-size:clamp(24px,6.8vw,40px);font-weight:900;letter-spacing:-1.2px;line-height:1.04;margin:4px 0 10px;text-wrap:balance}
.hg .opts{display:grid;gap:6px}
.hg .opt{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:5px 12px 5px 10px;text-align:left;cursor:pointer;
  background:var(--paper);border:1.5px solid var(--ink);border-radius:12px;font-size:14px;font-weight:700;line-height:1.2;
  transition:background-color .2s,opacity .2s,transform .2s var(--ease)}
.hg .opt b{flex:none;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-size:13px}
.hg .opt .l{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hg .opt:active{transform:scale(.985)}
.hg .opt.no{opacity:.42;border-style:dashed;text-decoration:line-through;text-decoration-thickness:1px;cursor:default}
.hg .opt.ok{background:var(--yellow);opacity:1}
.hg .opt.ok b{background:var(--coral)}
.hg .opt[disabled]{cursor:default}
.hg .shake{animation:hg-shake .42s var(--ease)}
@keyframes hg-shake{20%{transform:translateX(-7px)}45%{transform:translateX(6px)}70%{transform:translateX(-3px)}100%{transform:none}}
.hg .hint{font-size:13px;margin-top:8px;opacity:.8;min-height:18px}
.hg .story[hidden]{display:none}
.hg .story{animation:hg-rise .6s var(--ease) both}
.hg .ans{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:11px;letter-spacing:1.4px;font-weight:700;margin-bottom:8px}
.hg .ans b{background:var(--yellow);border:1.5px solid var(--ink);border-radius:100px;padding:5px 12px}
.hg .t{font-size:clamp(26px,7.2vw,40px);font-weight:900;letter-spacing:-1.4px;line-height:1;margin-bottom:10px;text-wrap:balance}
.hg .deck{font-family:Georgia,'Times New Roman',serif;font-size:17px;line-height:1.38;margin-bottom:14px;max-width:56ch}
.hg .read{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 22px;border-radius:100px;background:var(--coral);color:var(--paper);font-weight:900;font-size:16px}
.hg .send{display:flex;gap:14px;align-items:center;margin-top:12px;padding:10px 12px;border:1.5px solid var(--ink);border-radius:16px;background:#fffef4cc}
.hg .thumb{flex:none;width:54px;height:96px;object-fit:cover;border:1.5px solid var(--ink);border-radius:6px}
.hg .thumb[hidden]{display:none}
.hg .sendtxt{min-width:0}
.hg .share{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:100px;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);font-weight:900;font-size:15px;cursor:pointer}
.hg .small{font-size:12px;margin-top:6px;opacity:.8}
.hg .back{font-size:13px;margin-top:12px;font-weight:700}
.hg .play{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:4px}
.hg .play[hidden]{display:none}
.toast{width:max-content;position:fixed;left:50%;bottom:20px;z-index:20;transform:translate(-50%,16px);opacity:0;pointer-events:none;max-width:min(92vw,420px);padding:12px 18px;border-radius:100px;background:#173f35;color:#fffef4;font-size:14px;font-weight:700;transition:opacity .25s,transform .25s cubic-bezier(.2,.7,.1,1)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.hg .issue{max-width:1200px;margin:0 auto;padding:30px var(--gut) 34px}
.hg .issue h2{font-size:clamp(30px,8vw,56px);letter-spacing:-2.5px;line-height:1;font-weight:900;margin-bottom:6px}
.hg .sub{font-size:14px;margin-bottom:16px;opacity:.8}
.hg .rail{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 12px}
.hg .card{display:block;min-width:0}
.hg .card img{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--line);height:auto}
.hg .card .c{font-size:10px;letter-spacing:1.3px;font-weight:700;margin:8px 0 3px;color:#173f35b0}
.hg .card h3{font-size:16px;letter-spacing:-.5px;line-height:1.12;font-weight:900}
.hg .all{display:inline-flex;align-items:center;min-height:44px;margin-top:18px;font-weight:700;text-decoration:underline;text-underline-offset:5px}
@media(max-width:899px){.hg .stage{align-items:flex-start}}
@media(min-width:900px){
  .hg .cap.below{grid-column:1;grid-row:3;margin:12px 0 0 var(--gut)}
  :root{--stageH:clamp(480px,calc(100svh - 300px),660px)}
  .hg{--gut:4.5vw}
  .hg .hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(400px,520px);grid-template-rows:auto 1fr;column-gap:48px;padding-bottom:36px}
  .hg .bar{grid-column:1/-1}
  .hg .stage{grid-column:1;grid-row:2;margin:0 0 0 var(--gut)}
  .hg .panel{grid-column:2;grid-row:2;align-self:center;padding:0 var(--gut) 0 0}
  .hg .rail{grid-template-columns:repeat(4,1fr);gap:26px 20px}
  .hg .opt{padding:8px 14px;font-size:16px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}