/* All Things Geeky by 2 Nerds. Everything on the comic is sized from the comic, so text can never size it. */
@font-face { font-family: "Titan One"; src: url(fonts/titan-one.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Zilla Slab"; src: url(fonts/zilla-slab-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Zilla Slab"; src: url(fonts/zilla-slab-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Kalam"; src: url(fonts/kalam-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Ranchers"; src: url(fonts/ranchers.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Permanent Marker"; src: url(fonts/permanent-marker.woff2) format("woff2"); font-display: swap; }
/* The hand-lettered face's own 1 is a bare stroke, so 11 read as II. Its digits come from another hand font, with a flagged 1. */
@font-face { font-family: "Kalam"; src: url(fonts/patrick-hand.woff2) format("woff2"); font-weight: 700; unicode-range: U+30-39; font-display: swap; }

:root { color-scheme: only light; --ink: #0A0708; --red: #C9252F; --page: #FBF8EF; --pa: 0; }
.wall-lime { --wall: #8DC63F; }
.wall-teal { --wall: #3CA7A5; }
.wall-yellow { --wall: #F2CF37; }
.cover-blue { --field: #334CA1; --ray: #2A3F8D; --dot: #1C2C6C; --paper: #FBF8EF; --line-fill: #F2CF37; }
.cover-white { --field: #FBF8EF; --ray: #F3E7BE; --dot: #E2CF8C; --paper: #FBF8EF; --line-fill: #F2CF37; }
.cover-foil { --field: #334CA1; --ray: #2A3F8D; --dot: #1C2C6C; --paper: #FBF8EF; --line-fill: #F2CF37; }

* { box-sizing: border-box; }
/* No pull-to-refresh: a downward drag at the top would otherwise reload the page and start the comic over. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overscroll-behavior-y: none; }
* { font-variant-numeric: lining-nums !important; }
body { margin: 0; background: var(--wall); color: var(--ink); font: 400 1rem/1.3 "Zilla Slab", Georgia, serif; overflow-x: clip; }
.page { min-height: 100vh; }
.nb { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Top of the page */
.draft { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 1px 8px 0; font-size: .6875rem; line-height: 1.2; }
.looks-link { padding: 0 2px; border: 0; background: none; color: var(--ink); font: 700 .6875rem/1.2 "Zilla Slab", Georgia, serif; text-decoration: underline; cursor: pointer; }
.bar { display: flex; align-items: center; gap: 5px; min-height: 41px; padding: 2px 6px 3px 8px; position: sticky; top: 0; z-index: 30; background: var(--wall); }
.nav { display: flex; gap: 8px; margin-right: auto; }
.nav a { color: var(--ink); font-weight: 700; padding: 6px 0; }

/* The grade: a printed price tag, punched for its string. */
.chip { position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 2px 6px 2px 15px; flex: 0 1 auto; min-width: 0; border: 1.5px solid var(--ink); border-radius: 3px 8px 8px 3px; background: #FFF9DE; color: var(--ink); font: 700 .625rem/1.02 "Zilla Slab", Georgia, serif; text-align: left; letter-spacing: .01em; cursor: pointer; transform: rotate(-1.2deg); max-width: 124px; }
.chip::before { content: ""; position: absolute; left: 5px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--wall); }
.chip-n { font: 400 1.125rem/1 "Titan One", Impact, sans-serif; color: var(--red); }
.chip-w { display: block; }
/* On phones the tag never changes the bar's height, whatever the grade or the text size: its name gets two lines at most. */
@media (max-width: 719px) {
  .bar { height: 46px; min-height: 0; }
  .chip { height: 38px; min-height: 0; max-width: 152px; }
  .chip-w { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
}
.hold { flex: none; width: 34px; height: 34px; padding: 6px; border: 1.5px solid var(--ink); border-radius: 4px; background: transparent; color: var(--ink); cursor: pointer; }
.hold[aria-pressed="true"] { background: var(--ink); color: #FFF9DE; }
.chip.bump { animation: chipBump .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes chipBump { 0% { transform: rotate(-1.2deg) scale(1.4); } 100% { transform: rotate(-1.2deg) scale(1); } }

/* First screen: the comic takes whatever the words leave, and gives up size first. */
.hero { overflow-x: clip; position: relative; display: flex; flex-direction: column; flex: none; height: calc(100vh - 60px); height: calc(100svh - 60px); min-height: 400px; background-color: var(--wall); background-image: url(art/dots-top.svg), url(art/dots-bottom.svg); background-repeat: repeat-x; background-position: 0 0, 0 100%; background-size: var(--wd) auto, var(--wd) auto; --wd: clamp(20px, 1.75vw, 62px); }
.slot { position: relative; flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; container-type: size; }
.scene { display: none; }
.words { position: relative; flex: none; padding: 2px 10px 6px; text-align: center; background: var(--wall); }
.words h1 { margin: 0; font: 400 1.25rem/1.08 "Titan One", Impact, sans-serif; text-wrap: balance; }
.addr { margin: 1px 0 3px; white-space: nowrap; font-weight: 700; font-size: .9375rem; }
.call { display: block; margin: 0 auto; max-width: 420px; padding: 9px 8px; background: var(--red); color: #fff; font: 700 1.25rem/1.1 "Zilla Slab", Georgia, serif; text-decoration: none; border-radius: 5px; }
.dir { display: inline-block; margin-top: 2px; padding: 3px 6px; color: var(--ink); font-weight: 700; }
.hrs { margin: 0; font-size: .9375rem; line-height: 1.15; }

/* The hinge needs room to play: the first screen stays put while the page scrolls past it. Nothing traps the finger, it's only scrolling. */
html.hinge .track { height: calc(100vh - 60px + 135vh); height: calc(100svh - 60px + 135svh); }
html.hinge .hero { position: sticky; top: 41px; }

/* The comic. Its size comes from the slot's own size, not from any text. */
.tilt { --w: min(84vw, 50vh); transform: rotate(-1.15deg); }
@supports (width: 1cqw) { .tilt { --w: min(calc(100cqw / 1.075), calc(100cqh / 1.64)); } }
.stage { position: relative; width: var(--w); height: calc(var(--w) * 1.547); margin: calc(var(--w) * .062) 0 calc(var(--w) * .012); touch-action: pan-y; will-change: transform; -webkit-user-select: none; user-select: none; perspective: calc(var(--w) * 2.8); perspective-origin: 40% 50%; }
.shadow { position: absolute; left: .6%; top: .6%; right: -1.2%; bottom: -1%; box-shadow: calc(var(--w) * .008) calc(var(--w) * .012) calc(var(--w) * .012) rgba(0, 0, 0, .34), calc(var(--w) * .016) calc(var(--w) * .03) calc(var(--w) * .07) rgba(0, 0, 0, .3); }
.board { position: absolute; left: .4%; top: .3%; right: -1.15%; bottom: -.85%; background: #FDFDF9; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.pages { position: absolute; left: .2%; top: .2%; right: -.62%; bottom: -.44%; background: repeating-linear-gradient(to bottom, #EEE8D6 0 1px, #D9D2BB 1px 2px); }
.leaf { position: absolute; inset: 0; transform-origin: 0 50%; }
.cover { position: absolute; inset: 0; overflow: hidden; background: #FBF8EF; }
.inside { position: absolute; inset: 0; background: #F7F1DF; overflow: hidden; visibility: hidden; }
.inside img { position: absolute; left: 0; top: 11%; width: 100%; height: auto; opacity: .07; transform: scaleX(-1); }
.page1 { position: absolute; inset: 0; overflow: hidden; background: #FBF8EF; visibility: hidden; }
.page1 img { display: block; width: 100%; height: 100%; object-fit: cover; }
.page1 .cap { position: absolute; left: 3.4%; top: 2.6%; width: 70%; font-size: calc(var(--w) * .037); line-height: 1.14; border-width: calc(var(--w) * .006); box-shadow: calc(var(--w) * .007) calc(var(--w) * .009) 0 #0A0708; }
.page1 .pno { right: 2.4%; bottom: 1.8%; padding: .18em .42em .12em; font-size: calc(var(--w) * .03); background: #FBF8EF; border: 1.5px solid #0A0708; }
.page1-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 7, 8, .55), rgba(10, 7, 8, 0) 26%); opacity: 0; pointer-events: none; }
html.hinge .leaf.turning { transform-style: preserve-3d; will-change: transform; }
html.hinge .leaf.turning .cover, html.hinge .leaf.turning .inside { backface-visibility: hidden; -webkit-backface-visibility: hidden; visibility: visible; }
html.hinge .leaf.turning .inside { transform: rotateY(180deg); }
.stage.opening .page1 { visibility: visible; }
.stage { -webkit-text-size-adjust: none; text-size-adjust: none; }
.print { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.logo { position: absolute; left: -.36%; top: 11.118%; width: 100.4%; aspect-ratio: 3294 / 3115; }
.logo-img { display: block; width: 100%; height: 100%; }
.ov { position: absolute; display: block; pointer-events: none; }
.stage img { -webkit-user-drag: none; -webkit-touch-callout: none; }
.logo-img { pointer-events: none; }
.face, .head { position: absolute; inset: 0; pointer-events: none; }
/* Rigged heads and pigtails: hidden at rest, so at rest it's exactly their file. */
.rp { visibility: hidden; }
.logo.rigged .rp { visibility: visible; }
.logo.rigged .head { will-change: transform; }
.logo.rigged .pig { will-change: transform; }
.yset { position: absolute; inset: 0; pointer-events: none; visibility: hidden; }
.yset.on { visibility: visible; }
.y-letter { will-change: transform; }

/* Eyes and mouths. Everything's in place from the first byte, and only shown when asked for. */
.lens, .ey, .pupil, .m { visibility: hidden; }
.pupil { position: absolute; display: block; }
.face[data-eyes="open"] .lens, .face[data-eyes="open"] .ey-open, .face[data-eyes="open"] .pupil,
.face[data-eyes="half"] .lens, .face[data-eyes="half"] .ey-half,
.face[data-eyes="x"] .lens, .face[data-eyes="x"] .ey-x,
.face[data-mouth="closed"] .m-closed, .face[data-mouth="gasp"] .m-gasp, .face[data-mouth="yell"] .m-yell { visibility: visible; }
.m { position: absolute; inset: 0; }

.gloss { position: absolute; inset: 0; overflow: hidden; opacity: .34; pointer-events: none; }
.gloss img { position: absolute; left: -30%; top: -20%; width: 160%; display: block; will-change: transform; }
.no-gloss .gloss, .bag-on .gloss { display: none; }
.spine { position: absolute; left: 0; top: 0; width: 4%; height: 100%; display: block; pointer-events: none; }
.note { position: absolute; left: 77.4%; top: 88.2%; width: 19.6%; display: block; transform: rotate(3.2deg); pointer-events: none; }

/* Wear: every mark sits in one layer. A grade change may repaint it once; nothing here runs per frame. */
.wear { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
.mk { position: absolute; display: block; }
.mk[hidden] { display: none; }
.age { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--age, 0); }
.creases { position: absolute; inset: 0; width: 100%; height: 100%; }
.mk-pen { left: 77.6%; top: 2.9%; width: 21%; }
.mk-crayon { pointer-events: none; }

/* The bend: small polygons in their own small layer. */
.bend { position: absolute; left: 38%; top: 60.116%; width: 62%; height: 39.884%; pointer-events: none; will-change: transform; overflow: hidden; }

/* Balloons */
.balloons { position: absolute; inset: 0; pointer-events: none; }
.bl { position: absolute; display: block; overflow: visible; }
.bl.pop { animation: pop .34s cubic-bezier(.2, 1.5, .4, 1) both; }
.bl.slam { animation: slam .16s cubic-bezier(.3, 0, .7, 1) both; }
.bl.out { animation: blOut .16s ease-in both; }
.bl.zz { animation: zz 3.4s ease-in-out infinite; }
@keyframes pop { 0% { transform: scale(.35); opacity: 0; } 55% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes slam { 0% { transform: scale(2.1) rotate(-5deg); opacity: 0; } 70% { opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes blOut { to { transform: scale(.8); opacity: 0; } }
@keyframes zz { 0%, 100% { transform: translateY(0) scale(1); opacity: .96; } 50% { transform: translateY(-1.5%) scale(1.04); opacity: 1; } }

/* The plastic */
.bag { position: absolute; left: -2.4%; right: -2.4%; top: -4.848%; bottom: -1.164%; z-index: 5; will-change: transform; cursor: grab; background: linear-gradient(118deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .05) 34%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .05) 68%, rgba(255, 255, 255, .14)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
.bag.grabbing { cursor: grabbing; }
.bag[hidden] { display: none; }
.bag-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.bag-clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.shine { position: absolute; display: block; left: -30%; top: -22%; width: 160%; will-change: transform; }
.s2 { opacity: .55; left: -40%; top: -30%; width: 190%; }

/* Hot spots. The corner is the only place on the comic that keeps the finger for itself. */
.hit-corner { position: absolute; right: -10px; bottom: -10px; width: 90px; height: 90px; z-index: 6; touch-action: none; cursor: grab; display: none; }
.bag-off .hit-corner { display: block; }
.hit-corner.grabbing { cursor: grabbing; }
.hit-y { position: absolute; left: 61%; top: 75.5%; width: 17%; height: 17.5%; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: none; }
.bag-off .hit-y { pointer-events: auto; }
.hit-y:focus-visible, .pull-btn:focus-visible, .bend-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.pull-btn, .bend-btn { position: absolute; z-index: 7; left: 50%; bottom: 3%; transform: translateX(-50%); padding: 8px 12px; border: 2px solid var(--ink); background: #FFF9DE; color: var(--ink); font: 700 .9375rem/1 "Zilla Slab", Georgia, serif; clip-path: inset(50%); }
.pull-btn:focus, .bend-btn:focus { clip-path: none; }
.bend-btn { left: auto; right: 2%; transform: none; }
.bag-off .pull-btn, .bag-on .bend-btn { display: none; }

/* Foil: three strips of rainbow, faded across each other as the light moves. */
.foil { opacity: 0; visibility: hidden; }
.cover-foil .foil { visibility: visible; will-change: opacity; }

/* Design preview. It won't be on the final site. */
.preview { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-height: 46vh; overflow: auto; padding: 6px 10px 8px; display: grid; gap: 5px; background: #FFF9DE; border-top: 1.5px solid var(--ink); font-size: .8125rem; }
.preview[hidden] { display: none; }
.pv-title { margin: 0; font-weight: 700; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.lab { min-width: 62px; font-weight: 700; }
.row button { padding: 4px 8px; font: inherit; border: 1.5px solid var(--ink); background: #fff; border-radius: 3px; cursor: pointer; color: var(--ink); }
.row button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.row input[type="range"] { flex: 1 1 110px; min-width: 90px; }
.row output { min-width: 120px; font-weight: 700; }

/* The fixed bar: once the first Call button has scrolled away. On phones it's at the bottom. On wide screens it joins the top bar, so it never sits on page text. */
.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: flex; align-items: stretch; gap: 4px; padding: 4px; background: var(--wall); border-top: 2px solid var(--ink); }
.callbar[hidden] { display: none; }
.cb-call { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 0 .3em; align-items: center; justify-content: center; min-height: 44px; padding: 3px 6px; background: var(--red); color: #fff; font-weight: 700; font-size: .9375rem; line-height: 1.05; text-decoration: none; border-radius: 4px; text-align: center; }
.cb-map { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 4.1em; padding: 2px; color: var(--ink); font-weight: 700; font-size: .8125rem; line-height: 1.05; text-align: center; }
.cb-looks { flex: 0 0 auto; width: 44px; padding: 0; border: 1.5px solid var(--ink); border-radius: 4px; background: #FFF9DE; color: var(--ink); font: 700 .6875rem/1 "Zilla Slab", Georgia, serif; cursor: pointer; }

/* Pop-ins: their heads poke in from the edge with a small balloon. Never in the way, gone in a few seconds, and a tap sends them off. */
.popins { position: fixed; left: 0; right: 0; bottom: var(--popb, 8px); height: 0; z-index: 34; pointer-events: none; }
.popin { position: absolute; bottom: 0; display: flex; align-items: flex-end; transition: transform .3s cubic-bezier(.2, 1.3, .4, 1); pointer-events: auto; touch-action: pan-y; cursor: pointer; }
.popin-him { left: 0; transform: translateX(-112%); }
.popin-her { right: 0; flex-direction: row-reverse; transform: translateX(112%); }
.popin.in { transform: none; }
.pop-head { position: relative; flex: none; width: clamp(78px, 11vw, 150px); overflow: hidden; }
.popin-her .pop-head { width: clamp(106px, 15vw, 204px); }
.pop-head .pop-inner { position: absolute; }
.pop-art { position: absolute; display: block; }
.popin .bal-pop { flex: none; display: block; margin-bottom: 18px; overflow: visible; }
.popin-him .pop-head { margin-left: -12px; }
.popin-her .pop-head { margin-right: -14px; }
.pop-face .m-laugh { visibility: hidden; }
.pop-face[data-mouth="laugh"] .m-laugh { visibility: visible; }

/* The inside of the comic. Paper ages with the grade; words stay dark on it at every step. */
.issue { background: var(--page); color: #17110C; position: relative; z-index: 1; font-size: 1.0625rem; line-height: 1.36; overflow: clip; }
.issue a, .back-wrap a { color: #17110C; }
[id] { scroll-margin-top: 46px; }
.sheet { position: relative; display: flex; flex-direction: column; padding: 22px 14px 48px; }
.spread { position: relative; }
.pno { position: absolute; right: 12px; bottom: 10px; z-index: 2; font: 400 .9375rem/1 "Titan One", Impact, sans-serif; }
.pno-art { right: 2.4%; bottom: 1.8%; padding: .18em .42em .12em; background: #FBF8EF; border: 1.5px solid #0A0708; }
.title { margin: 0 0 14px; max-width: 34rem; position: relative; z-index: 3; }
.ttl { display: block; width: 100%; height: auto; overflow: visible; }

/* Caption boxes */
.cap { margin: 0; padding: .42em .62em; background: #F2CF37; color: #0A0708; border: 2.5px solid #0A0708; font: 700 .9375em/1.16 "Kalam", "Comic Sans MS", cursive; text-transform: uppercase; box-shadow: 3px 4px 0 #0A0708; }
.live-cap[hidden] { display: none; }
.words .live-cap { display: none; }
.live-cap b { display: block; font-size: 1.12em; font-weight: 700; }

/* Panels: printed or drawn art, a slanted clip, and an inked edge over it. Never a card. */
.panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "art" "bot"; margin: 0 0 18px; flex: none; }
.art { grid-area: art; position: relative; aspect-ratio: var(--ar); overflow: hidden; background: #FBF8EF; }
.art > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.art::after { content: ""; position: absolute; inset: 0; background: rgba(214, 178, 108, calc(var(--pa) * .17)); pointer-events: none; }
.edge { grid-area: art; position: relative; display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
/* On a narrow page a caption sits on the panel's edge, in the flow, so it never covers the picture. */
.panel > .cap { position: relative; z-index: 3; max-width: 94%; }
.c-tl, .c-tr { grid-area: top; margin-bottom: -11px !important; }
.c-bl, .c-br, .c-bottom { grid-area: bot; margin-top: -11px !important; }
.c-tl, .c-bl { justify-self: start; }
.c-tr, .c-br { justify-self: end; }
.c-bottom { justify-self: center; transform: rotate(-.6deg); white-space: nowrap; }
.c-tl { transform: rotate(-1deg); }
.c-tr { transform: rotate(1deg); }
.c-bl { transform: rotate(.8deg); }
.c-br { transform: rotate(-.8deg); }
.panel > .c-big { font-size: 1.25em; }
.art-panel { position: relative; margin: 0 -4px 26px; flex: none; }
.art-panel > img { display: block; width: 100%; height: auto; }
.art-panel::after { content: ""; position: absolute; inset: 4%; background: rgba(214, 178, 108, calc(var(--pa) * .13)); pointer-events: none; }
.art-panel > .cap { position: absolute; z-index: 3; }
.cap-tr { left: 3%; bottom: -3%; max-width: 62%; transform: rotate(-.8deg); }
.cap-bl { left: 3%; bottom: -2%; max-width: 62%; transform: rotate(.6deg); }
.after-art { align-self: flex-start; max-width: 86%; margin: 4px 0 14px; transform: rotate(-.6deg); }
.die { position: absolute; right: -2%; bottom: -5%; width: 44%; aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; touch-action: pan-y; z-index: 3; -webkit-tap-highlight-color: transparent; }
.die svg { display: block; width: 100%; height: 100%; overflow: visible; }
.die:focus-visible { outline: 3px solid #0A0708; outline-offset: 2px; border-radius: 50%; }
.die-call { position: absolute; right: 2%; bottom: 44%; width: 56%; z-index: 4; pointer-events: none; }
.die-call svg { display: block; width: 100%; height: auto; overflow: visible; animation: slam .18s cubic-bezier(.3, 0, .7, 1) both; }

/* Real balloons: a stretched hand-drawn shape that keeps its line weight, and a proper tail. The words are real words. */
.bal { position: relative; margin: 0; padding: .78em 1.15em .86em; color: #0A0708; text-align: center; font: 700 1.0625em/1.1 "Kalam", "Comic Sans MS", cursive; --tw: 34px; }
.bal-w { position: relative; z-index: 1; display: block; }
.bal-b { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(2px 3px 0 #0A0708); }
.bal-b path { fill: #FDFAFA; stroke: #0A0708; stroke-width: 2.8px; stroke-linejoin: round; }
.bal-t { position: absolute; display: block; width: var(--tw); height: var(--tw); overflow: visible; top: calc(100% - var(--tw) * .1 - 2px); left: var(--tx, 62%); }
.bt-f { fill: #FDFAFA; }
.bt-l { fill: none; stroke: #0A0708; stroke-width: 3.4; stroke-linejoin: round; stroke-linecap: round; }
.bal-him { font: 400 1.1875em/1.05 "Ranchers", Impact, sans-serif; letter-spacing: .02em; word-spacing: .2em; }
.panel > .bal { position: absolute; z-index: 3; }

/* Their heads, on the page: a plain picture without scripts, the live one with them. Same drawing, same scale. */
.nerd { position: absolute; bottom: 0; display: block; pointer-events: none; }
.nerd-him { width: var(--s, 26%); aspect-ratio: 1170 / 1392; }
.nerd-her { width: calc(var(--s, 26%) * 1.62); aspect-ratio: 1896 / 1347; }
.nerd > img { display: block; width: 100%; height: 100%; }
.nerd .pop-head { width: 100%; margin: 0; }

/* First inside page */
.sheet-first { position: relative; padding: 16px 14px 12px; }
.splash { position: relative; margin: -16px -14px 18px; }
.splash img { display: block; width: 100%; height: auto; }
.splash .cap { position: absolute; left: 3.4%; top: 2.6%; width: 66%; }
html.hinge .splash { display: none; }
.title-narrow { max-width: 62%; }
.fw-caps { display: flex; flex-wrap: wrap; gap: 0 10px; align-items: flex-start; }
.fw-a { transform: rotate(-1deg); z-index: 1; position: relative; }
.fw-b { transform: rotate(.7deg); margin: -3px 0 0 4px; position: relative; z-index: 2; font-size: clamp(.75em, 4vw, .9375em); }
.fw-c { transform: rotate(-.5deg); margin: -3px 0 0 -4px; position: relative; flex: 1 1 100%; }
.contents { margin-top: 18px; }
.contents h2 { margin: 0 0 6px; font: 400 1.25rem/1 "Titan One", Impact, sans-serif; letter-spacing: .03em; }
.contents ol { list-style: none; margin: 0; padding: 0; }
.contents a { display: flex; align-items: baseline; gap: 6px; padding: 5px 0; color: inherit; font-weight: 700; text-decoration: none; border-bottom: 1.5px dotted currentColor; }
.contents a span { flex: 1 1 auto; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.contents i { font: 400 1.0625rem/1 "Titan One", Impact, sans-serif; font-style: normal; }
.contents-hero { display: none; }

/* The hunt: a real text box, and what you type is lettered on the tab. */
.hunt { position: relative; z-index: 2; margin: 2px 0 20px; container-type: inline-size; }
.hunt-art { display: block; width: 100%; height: auto; }
.hunt-q { position: absolute; left: -1%; top: -19px; z-index: 2; font-size: .9375em; transform: rotate(-1.4deg); display: block; }
.hunt-caret { position: absolute; left: 44%; top: 15%; width: 3px; height: 14%; background: #C9252F; display: none; animation: caret 1.1s steps(2, jump-none) infinite; pointer-events: none; }
.hunt-in:placeholder-shown:not(:focus) ~ .hunt-caret { display: block; }
@keyframes caret { from { opacity: 1; } to { opacity: 0; } }
.hunt-in { position: absolute; left: 10.5%; top: 12.5%; width: 67%; height: 19%; padding: 0 .15em; border: 0; border-radius: 0; background: transparent; color: #17110C; font: 400 26px/1 "Permanent Marker", "Comic Sans MS", cursive; font-size: 6.6cqw; text-align: center; caret-color: #C9252F; outline: 0; transform: rotate(-.8deg); -webkit-appearance: none; appearance: none; }
.hunt-in:focus { background: rgba(242, 207, 55, .22); box-shadow: 0 2px 0 #C9252F; }
.hunt-call { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 3px 8px; margin: -8.4% 8px 0 0; position: relative; font-weight: 700; }
.minicall { display: inline-block; padding: .34em .7em; background: var(--red); color: #fff !important; font-weight: 700; text-decoration: none; border-radius: 4px; }

/* Treats, and the free table with their real sign. */
.b-treats { right: 4%; bottom: 31%; max-width: 44%; --tx: 56%; }
.sign { position: absolute; z-index: 1; left: 8.6%; top: 27.8%; width: 79%; transform: rotate(-2.3deg); }
.sign > img { display: block; width: 100%; height: auto; }
.sign-tape { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

/* Talking heads, in a strip that laps over the panel above. */
.strip { z-index: 2; margin-top: -9%; container-type: inline-size; }
.strip .nerd { bottom: 1%; }
.b-funko-her { left: 37%; bottom: 27cqw; --tx: 66%; white-space: nowrap; }
.b-funko-him { left: 1%; bottom: 19cqw; --tx: 26%; white-space: nowrap; --tw: 26px; }
.strip-funko .bal-her .bal-t { --tw: 30px; }
.strip-letters { margin-top: 58px; }
.strip-letters .art::after { display: none; }
.b-letters-him { left: 1%; bottom: 25cqw; max-width: 49%; --tx: 20%; }
.b-letters-her { right: 1%; bottom: 25cqw; max-width: 44%; --tx: 44%; }

/* Buying for a nerd? Five big things to tap, and she answers. */
.buy-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 6px; }
.pick { grid-column: span 3; position: relative; display: block; min-width: 0; padding: 0; border: 0; background: none; color: #0A0708; cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent; transition: transform .12s cubic-bezier(.2, 1.5, .4, 1); }
.pick > img { display: block; width: 100%; height: auto; }
.pick-name { position: absolute; left: 3%; bottom: 3%; padding: .18em .5em .12em; background: #F2CF37; border: 2.5px solid #0A0708; font: 400 clamp(.875rem, 4.8vw, 1.125rem)/1.05 "Titan One", Impact, sans-serif; white-space: nowrap; box-shadow: 2px 3px 0 #0A0708; transform: rotate(-1.5deg); }
.pick:hover { transform: rotate(-.8deg) scale(1.02); }
.pick[aria-pressed="true"] { transform: rotate(-1deg) scale(1.03); z-index: 2; }
.pick[aria-pressed="true"] .pick-name { background: var(--red); color: #fff; }
.pick:focus-visible { outline: 3px solid #0A0708; outline-offset: 2px; }
.says-list { grid-column: 1 / -1; order: 3; position: relative; z-index: 3; min-height: 8.2em; display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; margin-top: 6px; }
.say-panel { grid-column: span 3; margin: 0; align-self: end; }
.say-panel .art::after { display: none; }
.says-list .bal { --tx: 72%; font-size: 1.0625em; font-weight: 700; }
.says-list .bal-t { top: auto; bottom: calc(100% - var(--tw) * .1 - 2px); transform: scaleY(-1); }
.lead { font-size: 1.25em; }
.pr-line { margin: 0 0 .4em; font: 400 1em/1.25 "Zilla Slab", Georgia, serif; font-weight: 700; }
.acts { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: center; margin: 0; font: 700 1rem/1.2 "Zilla Slab", Georgia, serif; }
.plainlink { font-weight: 700; }
.pick-result { display: block; }
html.scr .pick-result { display: none; }
html.scr .pick-result.on { display: block; animation: pop .3s cubic-bezier(.2, 1.5, .4, 1) both; transform-origin: 72% 0; }
html.scr .pr-name { display: none; }
html.scr .lead[hidden] { display: none; }
html:not(.scr) .pick-result .bal-t { display: none; }

/* The Letters Page: small type, a real column rule, and the grade tag as a real object on a string. */
.letterspage > .title { z-index: 1; }
.gradetag { position: relative; z-index: 2; align-self: flex-start; max-width: 21rem; margin: 2px 0 16px 18px; padding: 10px 14px 10px 36px; transform: rotate(-1.6deg); filter: drop-shadow(3px 4px 0 #0A0708); }
.tag-shape { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.tag-shape path { fill: #FFF9DE; stroke: #0A0708; stroke-width: 2.5px; stroke-linejoin: round; }
.tag-shape .tag-in { fill: none; stroke: #A91F2A; stroke-width: 1.2px; }
.tag-hole { position: absolute; left: 12px; top: 50%; width: 15px; height: 15px; margin-top: -8px; border-radius: 50%; border: 2.5px solid #0A0708; background: var(--page); }
.tag-string { position: absolute; left: -28px; top: calc(50% - 58px); display: block; width: 52px; height: 66px; overflow: visible; }
.tag-string path { fill: none; stroke: #0A0708; stroke-width: 3.4; stroke-linecap: round; }
.gradetag p { position: relative; margin: 0; }
.gt-a { font: 700 .875rem/1.2 "Zilla Slab", Georgia, serif; letter-spacing: .05em; }
.gt-b { font: 400 1.75rem/1.1 "Titan One", Impact, sans-serif; color: #A91F2A; }
.gt-c { font: 700 .9375rem/1.2 "Zilla Slab", Georgia, serif; }
.gt-d { font: 400 .8125rem/1.3 "Zilla Slab", Georgia, serif; }
.letters { position: relative; z-index: 1; }
.letters p { margin: 0 0 .62em; font-size: .9375rem; line-height: 1.3; }
.letters i { font-size: .875em; }

/* Origin */
.bigquote { margin: 4px 0 8px; }
.cap-big { font-size: 1.5em; transform: rotate(-.7deg); }
.attrib { margin: .7em 0 0; font-weight: 700; }
.store-base { object-position: 50% 15%; }
.store-props { z-index: 1; }

/* Next Issue: a real classic box, heavy rule, yellow, and everything you need inside it. */
.ni-box { position: relative; display: flex; flex-direction: column; padding: 14px 14px 12px; background: #F2CF37; border: 5px solid #0A0708; box-shadow: 5px 7px 0 #0A0708; outline: 2px solid #FDFAFA; outline-offset: -9px; transform: rotate(-.3deg); flex: 1 1 auto; }
.ni-box p { margin: .42em 0; color: #0A0708; }
.ni-box .title { margin-bottom: 8px; }
.ni-art { margin: 0 0 10px; }
.addr-big { font-size: 1.1875em; font-weight: 700; }
.hours-list { font-weight: 700; font-size: 1.0625em; }
.small-note { font-size: .9em; }
.ni-acts { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.ni-acts .call { flex: 1 1 15rem; max-width: 26rem; margin: 0; text-align: center; color: #fff !important; }
.ni-acts .dir { margin: 0; padding: 6px 2px; color: #0A0708; }
.bigguy { font-weight: 700; }
.fb a { font-weight: 700; color: #0A0708; }

/* The End */
.endpanel .art::after { display: none; }
.endpanel { grid-template-areas: "art"; }
.end-title { position: absolute; left: 6%; top: 3.5%; width: 68%; margin: 0; }
.wear-at { position: absolute; left: 0; top: 62%; width: 2px; height: 2px; }
.panel > .end-cap { position: absolute; left: 4%; top: 17.5%; max-width: 88%; transform: rotate(-1deg); }
.endpanel > .bal { font-size: 1.125em; padding: .72em .8em .8em; }
.endpanel > .bal-him { font-size: 1.25em; }
.b-end-him { left: 5%; top: 37%; max-width: 46%; --tx: 26%; }
.b-end-her { right: 3%; top: 43%; max-width: 40%; --tx: 56%; }
.putback-row { position: relative; z-index: 4; display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: -4% 0 0; }
.end-bag { display: block; flex: 0 1 auto; width: clamp(76px, 26%, 160px); height: auto; margin: -14% 0 0; }
.putback { padding: .6em .9em; border: 2.5px solid #0A0708; background: #F2CF37; color: #0A0708; font: 400 1.25rem/1.1 "Titan One", Impact, sans-serif; cursor: pointer; box-shadow: 3px 4px 0 #0A0708; }
.putback:focus-visible, .clip-btn:focus-visible, .scissors:focus-visible, .coupon-piece:focus-visible { outline: 3px solid #1F3F9E; outline-offset: 2px; }

/* The back cover, lying on the shop's floor: old mail-order ads, crammed and mismatched, three inks on newsprint. */
.back-wrap { position: relative; z-index: 1; padding: 20px 8px 0; background: var(--wall); }
.backcover { position: relative; max-width: clamp(60rem, 44vw, 84rem); margin: 0 auto; padding: 10px 10px 8px; background: var(--page); background-image: linear-gradient(rgba(245, 226, 140, .42), rgba(245, 226, 140, .42)); border: 1.5px solid #0A0708; box-shadow: 5px 8px 0 rgba(10, 7, 8, .55); color: #17110C; }
.ad-head { margin: 0 0 6px; }
.ad-head img { display: block; width: 100%; height: auto; }
.ads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.ad-col { display: contents; }
.ad { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; padding: 4px; border: 2.5px solid #0A0708; }
.ad > img { display: block; width: 100%; height: auto; }
.ad-comics { grid-column: span 4; order: 1; border: 7px double #0A0708; }
.ad-shirts { grid-column: span 2; order: 2; border-radius: 16px; }
.ad-stickers { grid-column: span 2; order: 3; border: 3px dashed #C8202E; }
.ad-drinks { grid-column: span 2; grid-row: span 2; order: 4; border: 4px solid #1F3F9E; }
.ad-dice { grid-column: span 2; order: 5; background: #1F3F9E; }
.ad-icecream { grid-column: span 2; order: 6; border: 4px dotted #C8202E; }
.ad-wifi { grid-column: span 4; order: 7; background: #0A0708; }
.ad-nerds { grid-column: span 4; order: 8; border: 7px double #1F3F9E; }
.ad-nerds .nerd { z-index: 1; }
.ad-walk { margin-top: 5px; background: #C8202E; }
.back-foot { display: grid; gap: 10px; margin-top: 8px; }

/* The coupon. The scissors really cut: the dashes become a slit behind them, the piece falls away, and there's a real hole in the page. */
.coupon { position: relative; padding: 0 0 0 30px; }
.clip-btn { display: inline-block; margin: 0 0 8px; padding: 6px 2px; border: 0; background: none; color: #17110C; font: 700 1.0625rem/1.2 "Zilla Slab", Georgia, serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.coupon-area { position: relative; }
.coupon-box { position: relative; padding: 16px 6px 14px; text-align: center; background: rgba(255, 253, 242, .75); }
.coupon-box p, .coupon-piece span { margin: 0; }
.cp-a { display: block; font: 400 clamp(1rem, 5.2vw, 1.5rem)/1.1 "Titan One", Impact, sans-serif; letter-spacing: .01em; color: #A91F2A; }
.cp-b { display: block; margin-top: .3em !important; font-weight: 700; font-size: clamp(.75rem, 3.7vw, .9375rem); }
.cp-c { display: block; font-size: .8125rem; margin-top: .15em !important; }
.coupon-hole { position: absolute; inset: 0; overflow: hidden; visibility: hidden; background: #E9DFC2; clip-path: polygon(.4% 1.6%, 26% .8%, 54% 1.8%, 99.6% .6%, 99.2% 48%, 99.8% 99.2%, 62% 98.6%, 30% 99.6%, .6% 98.8%, 1% 52%); }
.coupon-hole::before { content: ""; position: absolute; inset: 0; z-index: 1; box-shadow: inset 6px 8px 0 rgba(10, 7, 8, .3), inset 2px 3px 0 rgba(10, 7, 8, .6); }
.coupon-hole img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cut { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cut-dash { fill: none; stroke: #0A0708; stroke-width: 2.4px; stroke-dasharray: 10 7; }
.cut-slit { fill: none; stroke: #0A0708; stroke-width: 2.6px; }
.scissors { position: absolute; left: 0; top: 0; z-index: 4; display: block; width: 92px; height: 43px; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.scissors.grabbing { cursor: grabbing; }
.sc { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.coupon-area.is-cut .coupon-box, .coupon-area.is-cut .scissors, .coupon-area.is-cut .cut { visibility: hidden; }
.coupon-area.is-cut .coupon-hole { visibility: visible; }
.floor { position: relative; --bh: clamp(120px, 15vw, 190px); --fh: calc(var(--bh) * .3); height: calc(var(--bh) + var(--fh) + 40px); margin-top: 16px; background: url(art/boxes.svg) 0 calc(100% - var(--fh) + 6px) repeat-x, url(art/floor.svg) 0 100% repeat-x; background-size: auto var(--bh), auto var(--fh); scroll-margin-bottom: 70px; }
.coupon-piece { position: absolute; z-index: 5; left: 50%; bottom: 14px; display: block; width: min(88%, 25rem); margin-left: calc(min(88%, 25rem) / -2); padding: 12px 12px 10px; text-align: center; background: #FFFDF2; color: #17110C !important; text-decoration: none; border: 2px solid #0A0708; box-shadow: 4px 6px 0 rgba(10, 7, 8, .45); transform: rotate(-3deg); scroll-margin-bottom: 70px; }
.coupon-piece[hidden] { display: none; }
.cp-go { display: inline-block; margin-top: 8px !important; padding: .32em .9em; background: var(--red); color: #fff; font-weight: 700; border-radius: 4px; }

/* Tiny print, like a real comic's indicia. */
.indicia { padding: 0; color: #17110C; font-size: .75rem; line-height: 1.3; border-top: 1.5px solid #0A0708; padding-top: 6px; }
.indicia p { margin: 0 0 2px; }
.indicia .credit { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: #17110C; }
.credit img { display: block; }
.bar-on .back-wrap { padding-bottom: 56px; }

/* Marks a page picks up below 9.0. */
.pmark { position: absolute; z-index: 2; pointer-events: none; display: block; }
.letterspage > .pmark { z-index: 0; }
.ni-box > .pmark { z-index: 0; }

/* Two-page spreads on wide screens, with a shadow down the gutter all the way. One column on phones. */
@media (min-width: 720px) {
  .issue { font-size: clamp(1rem, .5vw + .6rem, 1.4375rem); }
  .spread { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .spread::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: clamp(50px, 6vw, 110px); transform: translateX(-50%); background: linear-gradient(90deg, rgba(23, 17, 12, 0), rgba(23, 17, 12, .2) 50%, rgba(23, 17, 12, 0)); pointer-events: none; z-index: 5; }
  .sheet { padding: 28px clamp(16px, 2.4vw, 48px) 46px; }
  .pg-l > .pno { right: auto; left: 14px; }
  .grow { flex: 1 1 auto; grid-template-rows: auto 1fr auto; }
  .grow > .art { height: 100%; }
  .pno { font-size: 1.125rem; }
  .title { max-width: 80%; }
  .title-narrow { max-width: 52%; }
  .fw-caps { font-size: 1.12em; }
  html:not(.hinge) .splash img { aspect-ratio: 1.5; object-fit: cover; object-position: 50% 22%; }
  html:not(.hinge) .splash { margin-left: calc(-1 * clamp(16px, 2.4vw, 48px)); margin-right: calc(-1 * clamp(16px, 2.4vw, 48px)); }
  html:not(.hinge) .splash .cap { width: 40%; }
  .sheet-first { padding: 18px clamp(16px, 2.4vw, 48px) 14px; }
  .fw-caps { flex-wrap: nowrap; justify-content: center; }
  .fw-c { flex: 0 1 26em; }
  .contents-inside { display: none; }
  .strip-letters { margin-top: auto; padding-top: 62px; }
  .endpanel { min-height: 0; }
  .ni-art { flex: 1 1 auto; grid-template-rows: auto 1fr auto; }
  .ni-art > .art { height: 100%; }
  .ads { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ad-col { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  .ad { flex: 1 1 auto; }
  .ad-walk { flex: none; }
  .backcover { padding: 14px 14px 10px; }
  .back-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: end; }
  .indicia { order: -1; border-top: 0; border-right: 1.5px solid #0A0708; padding: 0 10px 0 0; }
  .coupon { padding-left: 34px; }
  .cp-a { font-size: 1.5rem; }
}

/* Roomy two-page spreads: five picks in a real page layout, a real letters column, and the tag laid on top. */
@media (min-width: 1000px) {
  .pick-name { font-size: clamp(.875rem, 1.25vw, 1.5rem); }
  .buy-grid { gap: 8px 8px; }
  .pick-a { grid-column: span 3; }
  .pick-b { grid-column: span 2; }
  .says-list { grid-column: span 4; order: 0; margin: 0; justify-content: center; }
  .say-panel { grid-column: span 2; align-self: end; }
  .says-list .bal { --tx: 0; }
  .says-list .bal-t { top: 34%; bottom: auto; left: calc(100% - var(--tw) * .12 - 2px); transform: rotate(-90deg); }
  .letterspage > .title { max-width: 44%; }
  .gradetag { position: absolute; right: clamp(10px, 1.6vw, 34px); top: 24px; width: 47%; max-width: 25rem; margin: 0; transform: rotate(2.2deg); }
  .letters { columns: 2; column-gap: 26px; column-rule: 1.5px solid #17110C; margin-top: 14px; }
  .letters p { break-inside: avoid; font-size: .9375em; }
  .strip-letters { flex: 1 1 auto; grid-template-rows: auto 1fr auto; margin-top: 66px; padding-top: 0; }
  .strip-letters > .art { height: 100%; }
  .strip-letters .nerd { --s: 31%; }
  .strip-letters > .bal { font-size: 1.25em; }
  .strip-letters > .bal-him { font-size: 1.375em; }
  .b-letters-him { left: 7%; bottom: 35cqw; max-width: 36%; --tx: 24%; }
  .b-letters-her { right: 6%; bottom: 33cqw; max-width: 33%; --tx: 44%; }
}

/* Big enough pages: captions lap over the corners of the art, the way they do in a real comic. */
@media (min-width: 900px) {
  .b-end-him { max-width: 38%; }
  .b-end-her { max-width: 34%; }
  .endpanel > .bal { font-size: 1.375em; }
  .endpanel > .bal-him { font-size: 1.5em; }
  .panel { display: block; aspect-ratio: var(--ar); margin-bottom: 22px; }
  .panel > .art { position: absolute; inset: 0; aspect-ratio: auto; height: auto; }
  .edge { position: absolute; inset: 0; }
  .panel > .cap { position: absolute; max-width: 76%; margin: 0 !important; }
  .c-tl { left: -1%; top: -7px; }
  .c-tr { right: -1%; top: -7px; }
  .c-bl { left: -1%; bottom: -9px; }
  .c-br { right: -1%; bottom: -9px; }
  .c-bottom { left: 50%; bottom: -11px; transform: translateX(-50%) rotate(-.6deg); }
}

/* On wide screens the fixed bar joins the top bar. */
@media (min-width: 900px) {
  .callbar { position: static; order: 1; flex: 0 1 auto; margin-left: auto; padding: 0; background: none; border: 0; gap: 6px; }
  .cb-call { flex: 0 0 auto; flex-wrap: nowrap; min-height: 34px; padding: 3px 10px; white-space: nowrap; }
  .cb-map { width: auto; padding: 2px 4px; font-size: .9375rem; white-space: nowrap; }
  .cb-looks { width: 50px; min-height: 34px; }
  .bar { gap: 10px; }
  .nav { margin-right: 0; }
  .chip { order: 2; margin-left: auto; }
  .callbar:not([hidden]) ~ .chip { margin-left: 0; }
  .hold { order: 3; }
  .bar-on .back-wrap { padding-bottom: 0; }
}

/* Past a big screen's width, the comic stays comic-sized, lying on the wall. */
@media (min-width: 1900px) {
  .issue { max-width: 1880px; margin: 0 auto; box-shadow: 0 0 0 1.5px #0A0708, 10px 14px 0 rgba(10, 7, 8, .4); }
  .back-wrap { padding-top: 40px; }
}

/* Fold open, tablets, and up: side by side. */
@media (min-width: 720px) and (min-aspect-ratio: 1/1) {
  .draft { padding: 2px 16px 0; font-size: .75rem; }
  .bar { padding: 2px 16px 4px; font-size: clamp(1rem, .85vw, 1.5rem); }
  .chip { font-size: clamp(.625rem, .55vw, 1rem); max-width: none; }
  .chip-n { font-size: clamp(1.125rem, 1vw, 1.75rem); }
  .preview { left: auto; right: 6px; bottom: 6px; width: min(430px, 42vw); border: 1.5px solid var(--ink); border-radius: 4px; }
  .hero { flex-direction: row; align-items: stretch; justify-content: center; height: calc(100vh - 62px); height: calc(100svh - 62px); }
  html.hinge .track { height: calc(100vh - 62px + 135vh); height: calc(100svh - 62px + 135svh); }
  html.hinge .hero { top: 45px; }
  .slot { flex: 1.05 1 0; padding-left: clamp(26px, 3.4vw, 60px); }
  .words { background: none; flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 12px 28px 16px 14px; text-align: left; min-width: 0; --fs: min(1.3vw, 2.15vh); }
  .words h1 { font-size: clamp(1.625rem, calc(var(--fs) * 2.3), 4.2rem); margin: .3em 0 .12em; }
  .words .live-cap { display: block; font-size: clamp(.9375rem, calc(var(--fs) * 1.12), 1.75rem); max-width: 30em; }
  .words .live-cap[hidden] { display: none; }
  .addr { font-size: clamp(1rem, calc(var(--fs) * 1.14), 1.9rem); margin-bottom: .45em; }
  .call { width: 100%; max-width: 26rem; font-size: clamp(1.25rem, calc(var(--fs) * 1.5), 2.2rem); padding: .5em .5em; text-align: center; margin: 0; }
  .dir { font-size: clamp(1rem, calc(var(--fs) * 1.14), 1.9rem); margin-top: .3em; padding-left: 0; }
  .hrs { font-size: clamp(1rem, calc(var(--fs) * 1.14), 1.9rem); margin-top: .12em; }
  .contents-hero { display: block; width: 100%; max-width: 26rem; font-size: clamp(.9375rem, calc(var(--fs) * 1.05), 1.625rem); margin-top: .9em; }
  .contents-hero h2 { font-size: 1.2em; }
  .contents-hero a { padding: .2em 0; }
  .contents-hero i { font-size: 1em; }
}

/* Wide: real depth. A row of long boxes on the shop's plank floor, behind the comic. */
@media (min-width: 1100px) and (min-aspect-ratio: 5/4) {
  .slot { flex: none; width: 52%; }
  .tilt { --w: min(calc(100cqw / 1.09), calc(100cqh / 1.66)); }
  .scene { --bh: clamp(120px, 19vh, 215px); --fh: calc(var(--bh) * .3); display: block; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--bh) + var(--fh)); background: url(art/boxes.svg) 0 calc(100% - var(--fh) + 6px) repeat-x, url(art/floor.svg) 0 100% repeat-x; background-size: auto var(--bh), auto var(--fh); }
  .words { justify-content: flex-start; padding-top: 2.4vh; padding-bottom: clamp(160px, 25vh, 280px); max-width: 44%; }
}

/* Motion off: out of the bag, eyes open, no opening. Needs no script. */
@media (prefers-reduced-motion: reduce) {
  .bag { display: none; }
  html:not(.js) .face .lens, html:not(.js) .face .ey-open, html:not(.js) .face .pupil { visibility: visible; }
  .bl, .chip.bump, .die-call svg, .pick-result.on { animation: none !important; }
  .pick { transition: none; }
  html { scroll-behavior: auto; }
  .popin { transition: none; }
}