@import url("fonts/fonts.css");
/* A bakery box. The home page is cream paper and a pink donut box; each night's page takes its donut's colors
   (--bg, --card, --ink, --accent, --deep, set from b13.js), some of them dark. Headings are wide, heavy Archivo like
   shop signage; prose is serif; dates and times are mono. Cards are stickers: a solid outline and a hard shadow. */
:root {
  --bg: #fff3ea; --card: #fffaf5; --ink: #3a1a24; --muted: #8a6b74; --line: #f0d9cc;
  --accent: #ff4f93; --on-accent: #ffffff; --deep: #7b3b1e;
  --box: #ffa6c9; --box-2: #ffd1e3; --wax: #fffdf7;
  --baked-bg: #2b1419; --baked-ink: #ffe9d6; --baked-hi: #ff8fbd;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --pop: cubic-bezier(.3, 1.6, .5, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body:not(.on-night) {
    --bg: #1f1411; --card: #2b1d19; --ink: #fbe9de; --muted: #bfa196; --line: #44302a;
    --box: #e9799f; --box-2: #f6a9c4; --wax: #fff8ef; --deep: #f2b27c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] body:not(.on-night) {
  --bg: #1f1411; --card: #2b1d19; --ink: #fbe9de; --muted: #bfa196; --line: #44302a;
  --box: #e9799f; --box-2: #f6a9c4; --wax: #fff8ef; --deep: #f2b27c;
  color-scheme: dark;
}
body.dark { color-scheme: dark; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--display); font-size: 16px; line-height: 1.5;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) calc(56px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  -webkit-tap-highlight-color: transparent; overflow-x: hidden;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
body.has-mini { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
body.sheet-open { overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.wrap { max-width: 620px; margin: 0 auto; }
.mono { font-family: var(--mono); }
.eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0; }
h1, h2, h3 { font-stretch: 118%; letter-spacing: -.01em; margin: 0; }
h2 { font-size: 21px; font-weight: 850; }

/* ---------- Baked by wjam.in ---------- */
.baked {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding: calc(13px + env(safe-area-inset-top, 0px)) 16px 13px;
  background: var(--baked-bg); color: var(--baked-ink); text-decoration: none;
  font-size: 17px; letter-spacing: .01em;
  background-image: radial-gradient(circle at 12px 12px, rgba(255, 143, 189, .14) 2px, transparent 2.5px);
  background-size: 22px 22px;
}
.baked-in { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.baked-in svg { align-self: center; }
.baked-in svg { width: 32px; height: 32px; flex: none; transition: transform .6s var(--ease); }
.baked:hover .baked-in svg { transform: rotate(200deg); }
.baked b { color: var(--baked-hi); font-weight: 900; font-stretch: 120%; font-size: 26px; letter-spacing: -.01em; }
.baked-go { font-family: var(--mono); font-size: 13px; padding: 5px 12px; border: 1.5px solid var(--baked-hi); border-radius: 99px; color: var(--baked-hi); white-space: nowrap; }
.baked:hover .baked-go { background: var(--baked-hi); color: var(--baked-bg); }

/* ---------- home ---------- */
.masthead { text-align: center; padding: 30px 0 8px; }
.masthead h1 { font-size: clamp(44px, 13.5vw, 78px); line-height: .88; font-weight: 900; font-stretch: 125%; margin: 12px 0 14px; letter-spacing: -.03em; }
.masthead h1 span { display: block; color: var(--accent); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--ink); }
.dek { font-family: var(--serif); font-size: 18px; line-height: 1.45; max-width: 30em; margin: 0 auto; }

.slot {
  width: 18.4%; padding: 0; border: 0; background: none; color: #5b3a2c;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  transition: transform .25s var(--pop);
}
.slot svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .08)); }
.slot:hover, .slot:focus-visible { transform: translateY(-4px) rotate(-6deg) scale(1.05); }
.slot:active { transform: scale(.94); }
.slot .tag { font-family: var(--mono); font-size: clamp(9px, 2.4vw, 11px); letter-spacing: .02em; line-height: 1.2; display: flex; align-items: center; gap: 2px; white-space: nowrap; }
.slot.ate .tag { color: #b0365f; font-weight: 500; transform: rotate(-4deg); }
.slot.ate .ok { display: inline-flex; width: 11px; height: 11px; color: #e8a400; }
.slot.ate .ok svg { width: 100%; height: 100%; filter: none; }
.opening .slot { animation: pop .55s var(--pop) var(--d) both; }
@keyframes pop { from { transform: translateY(12px) scale(.6); opacity: 0; } }

.progress { text-align: center; margin: 22px 0 6px; }
.pips { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.pips i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ink); background: radial-gradient(circle, var(--bg) 0 3px, var(--c) 3.5px); opacity: .28; }
.pips i.ate { opacity: 1; }
.pips i.done { opacity: 1; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #e8a400; }
.progress p { font-family: var(--serif); font-size: 16px; margin: 10px 0 0; color: var(--muted); }

.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 34px 0; }
.fact { background: var(--card); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); padding: 12px 14px; }
.fact b { display: block; font-size: 38px; line-height: 1; font-weight: 900; font-stretch: 125%; color: var(--accent); }
.fact span { display: block; font-size: 13.5px; line-height: 1.35; margin-top: 6px; }
.about h2, .menu h2 { margin: 6px 0 12px; }
.about p { font-family: var(--serif); font-size: 17px; line-height: 1.6; margin: 0 0 14px; }
.about .lead { font-size: 19px; }
.photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 28px 0; }
.photos .photo:first-child { grid-column: 1 / -1; }
.photo { margin: 0; }
.photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; border: 2px solid var(--ink); background: var(--line); }
.photos .photo:first-child img { aspect-ratio: 16 / 9; }
.photo figcaption { font-size: 12.5px; color: var(--muted); margin-top: 6px; line-height: 1.35; }
.photo figcaption span { font-family: var(--mono); font-size: 10.5px; display: block; }
.menu ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.menu a { display: flex; align-items: center; gap: 12px; text-decoration: none; background: var(--card); border: 2px solid var(--ink); border-radius: 14px; padding: 8px 12px 8px 8px; transition: transform .15s var(--ease), box-shadow .15s var(--ease); box-shadow: 3px 3px 0 var(--ink); }
.menu a:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.menu a:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.m-d { width: 46px; flex: none; }
.m-d svg { width: 100%; display: block; }
.m-t { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.m-t b { font-size: 17px; font-weight: 800; font-stretch: 115%; }
.m-t small { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.m-s { font-family: var(--mono); font-size: 11px; background: var(--ink); color: var(--bg); border-radius: 99px; padding: 2px 9px; }
.fine { font-size: 13px; color: var(--muted); margin: 12px 0 0; }

.foot { margin: 40px 0 10px; padding-top: 22px; border-top: 2px dashed var(--line); font-size: 13.5px; color: var(--muted); }
.foot p { line-height: 1.5; }
.wjam { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none; background: var(--baked-bg); color: var(--baked-ink); border-radius: 16px; padding: 14px 16px; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.wjam span { display: flex; flex-direction: column; }
.wjam b { font-size: 18px; font-stretch: 120%; color: var(--baked-hi); }
.wjam small { font-size: 13px; }
.wjam svg { width: 22px; height: 22px; flex: none; color: var(--baked-hi); }
.credits summary { cursor: pointer; font-family: var(--mono); font-size: 12px; }
.credits ul { padding-left: 18px; font-size: 12px; }
.reset { margin-top: 16px; background: none; border: 1.5px solid var(--line); border-radius: 99px; padding: 7px 14px; font-size: 13px; color: var(--muted); }

/* ---------- picking a donut ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.scrim { position: absolute; inset: 0; background: rgba(30, 12, 18, .5); opacity: 0; transition: opacity .25s; backdrop-filter: blur(2px); }
.sheet {
  position: relative; width: 100%; max-width: 520px; max-height: 94vh; overflow: auto;
  background: var(--bg); color: var(--ink); border: 2.5px solid #2b1419; border-bottom: 0; border-radius: 28px 28px 0 0;
  padding: 18px 22px calc(26px + env(safe-area-inset-bottom, 0px)); text-align: center;
  transform: translateY(100%); transition: transform .35s var(--ease);
}
.sheet-wrap.in .scrim { opacity: 1; }
.sheet-wrap.in .sheet { transform: none; }
.x { position: absolute; right: 14px; top: 14px; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--ink); background: var(--card); display: grid; place-items: center; padding: 7px; }
.x svg { width: 100%; height: 100%; }
.sheet-d { position: relative; width: min(230px, 62vw); margin: 4px auto 6px; }
.bite-host svg { width: 100%; display: block; transition: transform .5s var(--ease), opacity .4s; }
.bite-host.chomp svg { animation: chomp .22s var(--pop); }
@keyframes chomp { 40% { transform: scale(.93) rotate(-3deg); } }
.bite-host.gone svg { transform: scale(.2) rotate(30deg); opacity: 0; }
.spray { position: absolute; inset: 0; pointer-events: none; }
.spray i { position: absolute; width: 7px; height: 6px; border-radius: 2px; transform: translate(-50%, -50%); animation: fly .85s cubic-bezier(.2, .6, .4, 1) forwards; }
@keyframes fly { to { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y) + 70px)) rotate(var(--r)) scale(var(--s)); opacity: 0; } }
.sheet h2 { font-size: clamp(34px, 10vw, 48px); font-weight: 900; font-stretch: 125%; line-height: 1; margin: 6px 0 10px; }
.sheet .door { font-family: var(--serif); font-size: 17px; margin: 0 0 6px; }
.sheet .tease { font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 15.5px; margin: 0 0 18px; }
.munch {
  position: relative; overflow: hidden; width: 100%; max-width: 340px; height: 62px; border-radius: 99px;
  border: 2.5px solid var(--ink); background: var(--accent); color: var(--on-accent); box-shadow: 4px 4px 0 var(--ink);
  font-size: 19px; font-weight: 900; font-stretch: 120%; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.munch:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.munch .fill { position: absolute; inset: 0; background: var(--deep); transform: scaleX(0); transform-origin: left; opacity: .55; }
.munch .lbl { position: relative; }
.munch.armed { animation: wiggle .3s ease-in-out infinite alternate; }
@keyframes wiggle { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }
.hint { font-size: 12.5px; font-family: var(--mono); color: var(--muted); margin: 12px 0 0; }

/* ---------- a night ---------- */
body.on-night { background-image: radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%); background-attachment: fixed; }
.bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 4px; gap: 10px; }
.back { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; font-weight: 800; font-stretch: 115%; font-size: 15px; padding: 6px 12px 6px 6px; border-radius: 99px; border: 2px solid var(--ink); background: var(--card); }
.back svg { width: 20px; height: 20px; }
/* the spoiler switch: a label, a sliding knob, and the state beside it */
.spoil { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; padding: 6px 12px 6px 14px; border-radius: 99px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); }
.sw { position: relative; width: 40px; height: 22px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 22%, transparent); border: 2px solid var(--ink); transition: background .2s var(--ease); }
.sw i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--card); border: 2px solid var(--ink); box-sizing: content-box; margin: -2px 0 0 -2px; transition: transform .2s var(--pop); }
.spoil.on .sw { background: var(--accent); }
.spoil.on .sw i { transform: translateX(18px); }
.sw-s { min-width: 2em; font-family: var(--mono); font-weight: 500; font-size: 12.5px; }
.hero { text-align: center; padding: 8px 0 6px; }
.hero-d { width: min(250px, 66vw); margin: 4px auto 10px; }
.hero-d svg { width: 100%; display: block; animation: spin 9s linear infinite paused; }
.hero-d.spinning svg { animation-play-state: running; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero h1 { font-size: clamp(50px, 16vw, 96px); font-weight: 900; font-stretch: 125%; line-height: .86; letter-spacing: -.035em; margin: 8px 0 12px; color: var(--accent); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--ink); overflow-wrap: normal; hyphens: none; }
.when { font-family: var(--mono); font-size: 13px; margin: 0 0 12px; }
.door { font-family: var(--serif); font-size: 17.5px; line-height: 1.45; margin: 0 auto 14px; max-width: 28em; }
.door b { font-family: var(--display); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; background: var(--accent); color: var(--on-accent); padding: 2px 7px; border-radius: 4px; margin-right: 4px; vertical-align: 2px; }
.medals { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.medal { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 12px; border: 1.5px dashed var(--ink); border-radius: 99px; padding: 3px 11px; transform: rotate(-1.5deg); }
.medal.gold { border-style: solid; background: #ffd23f; color: #3a2600; border-color: #3a2600; transform: rotate(1.5deg); }
.medal svg { width: 13px; height: 13px; }
.bigplay {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px 14px 20px; border-radius: 99px;
  border: 2.5px solid var(--ink); background: var(--accent); color: var(--on-accent); box-shadow: 4px 4px 0 var(--ink);
  font-size: 18px; font-weight: 850; font-stretch: 115%; transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.bigplay svg { width: 24px; height: 24px; }
a.bigplay { text-decoration: none; }
.bigplay:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.tease { font-family: var(--serif); font-style: italic; font-size: 16.5px; color: var(--muted); max-width: 30em; margin: 18px auto 4px; }

.card { background: var(--card); border: 2.5px solid var(--ink); border-radius: 20px; box-shadow: 4px 4px 0 var(--ink); padding: 18px 16px; margin: 22px 0; }
.card > h2, .card-h { margin-bottom: 12px; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pill { font-family: var(--mono); font-size: 11px; background: var(--ink); color: var(--card); border-radius: 99px; padding: 2px 9px; }
.set + .set { margin-top: 14px; }
.set h3 { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--muted); padding-bottom: 6px; border-bottom: 2px solid var(--line); }
.set ol { list-style: none; margin: 0; padding: 0; }
.trk { border-bottom: 1px solid var(--line); }
.trk-b { width: 100%; display: flex; align-items: flex-start; gap: 10px; background: none; border: 0; padding: 10px 4px; text-align: left; border-radius: 10px; }
.trk-b:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.trk-n { width: 20px; font-size: 12px; color: var(--muted); padding-top: 3px; flex: none; text-align: right; }
.trk-t { flex: 1; min-width: 0; }
.trk-t b { font-size: 16px; font-weight: 700; }
.trk-t small { display: block; font-family: var(--serif); font-size: 14.5px; line-height: 1.4; color: var(--muted); margin-top: 3px; }
.trk-m { font-size: 12px; color: var(--muted); padding-top: 3px; }
.badges { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; vertical-align: 2px; }
.b { display: inline-flex; align-items: center; gap: 3px; font-family: var(--mono); font-size: 10.5px; border: 1.5px solid var(--ink); border-radius: 99px; padding: 0 7px; line-height: 1.6; white-space: nowrap; }
.b svg { width: 10px; height: 10px; }
.b.jc { background: #ffd23f; color: #3a2600; border-color: #3a2600; }
.b.th { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.eq { display: none; width: 16px; height: 14px; align-items: flex-end; gap: 2px; padding-top: 4px; flex: none; }
.eq i { width: 4px; background: var(--accent); border-radius: 1px; height: 30%; }
.trk.now .trk-b { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.trk.now .trk-t b { color: var(--accent); }
.trk.now .eq { display: flex; }
.trk.on .eq i { animation: eq .8s ease-in-out infinite alternate; }
.trk.on .eq i:nth-child(2) { animation-delay: -.3s; }
.trk.on .eq i:nth-child(3) { animation-delay: -.55s; }
@keyframes eq { to { height: 100%; } }
.oven { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px; border: 2px dashed var(--line); border-radius: 14px; }
.oven p { margin: 0; font-family: var(--serif); font-size: 15.5px; color: var(--muted); }
.oven-d { width: 52px; flex: none; animation: bob 2.4s ease-in-out infinite; }
.oven-d svg { width: 100%; display: block; filter: blur(.4px) saturate(.6); opacity: .8; }
@keyframes bob { 50% { transform: translateY(-5px) rotate(12deg); } }
.nods { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nods button { width: 100%; text-align: left; background: color-mix(in srgb, var(--accent) 10%, transparent); border: 2px solid var(--ink); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; }
.nods b { font-size: 16px; }
.nods span { font-family: var(--serif); font-size: 15px; color: var(--muted); }
.more-nods, .pa { font-family: var(--serif); font-size: 15.5px; color: var(--muted); margin: 12px 0 0; }
.pa { color: var(--ink); }
.story { font-family: var(--serif); font-size: 17.5px; line-height: 1.62; margin: 0; }
.locked { border: 2px dashed var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.locked p { margin: 0; font-family: var(--serif); font-size: 15.5px; color: var(--muted); }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 99px; border: 2px solid var(--ink); background: var(--card); }
.chip svg { width: 16px; height: 16px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stats div { border: 2px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.stats b { display: block; font-size: clamp(19px, 6vw, 26px); font-weight: 900; font-stretch: 120%; line-height: 1.1; color: var(--accent); }
.stats span { font-size: 12.5px; line-height: 1.25; display: block; }
.longest { font-family: var(--serif); font-size: 15.5px; margin: 12px 0 0; }
.pic .photo img { aspect-ratio: 3 / 2; object-fit: contain; background: #fff; }
.links { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }
.links a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; text-decoration: none; border: 2px solid var(--ink); border-radius: 99px; padding: 7px 14px; background: var(--card); }
.links small { font-weight: 400; color: var(--muted); }
.links svg { width: 15px; height: 15px; }
.sib { display: flex; justify-content: space-between; gap: 12px; margin: 26px 0; }
.sib a { display: flex; flex-direction: column; text-decoration: none; font-weight: 850; font-stretch: 115%; font-size: 17px; }
.sib a.nx { text-align: right; }
.sib small { font-family: var(--mono); font-weight: 400; font-size: 11px; color: var(--muted); }

/* ---------- the player ---------- */
.mini {
  position: fixed; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 40;
  width: calc(100% - 20px); max-width: 600px; background: var(--card); color: var(--ink);
  border: 2.5px solid var(--ink); border-radius: 22px; box-shadow: 4px 4px 0 var(--ink); padding: 10px 12px 10px;
}
.mini-row { display: flex; align-items: center; gap: 10px; }
.mini-art { width: 46px; height: 46px; flex: none; display: block; }
.mini-art svg { width: 100%; height: 100%; display: block; }
body.playing .mini-art svg { animation: spin 6s linear infinite; }
.mini-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.mini-t b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-t span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-c { display: flex; align-items: center; gap: 2px; }
.mini-b { width: 36px; height: 36px; border: 0; background: none; border-radius: 50%; display: grid; place-items: center; padding: 8px; }
.mini-b svg { width: 100%; height: 100%; }
.mini-b.big { width: 44px; height: 44px; background: var(--accent); color: var(--on-accent); border: 2px solid var(--ink); padding: 10px; }
.mini-b[data-p="close"] { width: 30px; padding: 8px; color: var(--muted); }
.mini-p { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.mini-p .mono { font-size: 11px; color: var(--muted); min-width: 36px; }
.mini-len { text-align: right; }
.mini-track { flex: 1; height: 16px; display: flex; align-items: center; cursor: pointer; touch-action: none; position: relative; }
.mini-track::before { content: ""; position: absolute; left: 0; right: 0; height: 6px; border-radius: 3px; background: var(--line); }
.mini-track i { position: absolute; left: 0; right: 0; height: 6px; border-radius: 3px; background: var(--accent); transform-origin: left; transform: scaleX(0); }

.toast { position: fixed; left: 50%; bottom: calc(132px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); opacity: 0; z-index: 60; max-width: min(440px, calc(100% - 32px)); background: var(--ink); color: var(--bg); border-radius: 14px; padding: 10px 16px; font-size: 14.5px; transition: opacity .3s, transform .3s var(--ease); pointer-events: none; }
.toast.in { opacity: 1; transform: translate(-50%, 0); }

/* ---------- the revisit: one night a day ---------- */
.presents { display: inline-flex; align-items: baseline; gap: 6px; text-decoration: none; font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--muted); }
.presents b { font-family: var(--display); font-style: normal; font-weight: 900; font-stretch: 120%; color: var(--accent); }
.masthead h1 { margin-bottom: 0; }
.revisited {
  display: inline-block; margin: 6px 0 14px; transform: rotate(-4deg); position: relative; z-index: 1;
  font-family: var(--serif); font-style: italic; font-weight: 700; font-size: clamp(26px, 8vw, 38px); line-height: 1;
  background: var(--ink); color: var(--bg); padding: 6px 18px 8px; border-radius: 10px; box-shadow: 3px 3px 0 var(--accent);
}
.masthead .eyebrow { margin-bottom: 12px; }
.slot { position: relative; }
.slot.sealed svg { filter: grayscale(.3); opacity: .75; }
.slot.sealed .tag { opacity: .7; }
.slot.sealed:hover { transform: rotate(4deg); }
.q { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1; display: grid; place-items: center; font-weight: 900; font-stretch: 125%; font-size: clamp(16px, 5vw, 24px); color: #8a5a3a; pointer-events: none; }
.slot.fresh svg { animation: fresh 2.6s ease-in-out infinite; }
.slot.fresh .tag { color: #fff; background: var(--accent); border-radius: 99px; padding: 0 6px; font-weight: 500; }
@keyframes fresh { 0%, 60%, 100% { transform: none; } 70% { transform: rotate(-10deg) scale(1.06); } 80% { transform: rotate(8deg) scale(1.06); } 90% { transform: rotate(-4deg); } }
.next { margin: 8px auto 0 !important; display: inline-block; font-family: var(--mono) !important; font-size: 13px !important; color: var(--ink) !important; border: 2px dashed var(--line); border-radius: 99px; padding: 5px 14px; }
.next b { color: var(--accent); }
.m-lock { display: flex; align-items: center; gap: 12px; border: 2px dashed var(--line); border-radius: 14px; padding: 8px 12px 8px 8px; color: var(--muted); }
.m-lock svg { opacity: .55; filter: grayscale(.5); }
.hero-d.mys { position: relative; }
.hero-d.mys svg { opacity: .6; filter: grayscale(.4); }
.hero-d.mys .q { font-size: 64px; }
.door b.when-b { font: inherit; font-weight: 700; text-transform: none; letter-spacing: 0; background: none; color: var(--accent); padding: 0; margin: 0; vertical-align: baseline; }

@media (min-width: 560px) {
  .facts { grid-template-columns: repeat(4, 1fr); }
  .fact span { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ======================================================================
   The show: dipped heroes, the counter, the countdown.
   One orchestrated moment on arrival (the donut drops in and the glaze runs down); everything else
   moves only when you do something, or while a show is playing.
   ====================================================================== */
.fx-sky { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.fx-burst { position: fixed; inset: 0; pointer-events: none; z-index: 90; }
.bleed { width: 100vw; margin-left: calc(50% - 50vw); }

/* ---------- dipped: a glaze-colored hero with rings, a donut with words around it, and drips ---------- */
.dip {
  --dipc: #ff4f8e; --ringc: rgba(40, 84, 255, .36); --on-dip: #fff6ea; --dip-deep: #6a0f33;
  position: relative; isolation: isolate; width: 100vw; margin-left: calc(50% - 50vw); margin-bottom: 64px;
  background-color: var(--dipc); color: var(--on-dip);
  /* the print: blue rings in a half-drop repeat */
  background-image: radial-gradient(circle, transparent 0 7px, var(--ringc) 7.5px 13px, transparent 13.5px), radial-gradient(circle, transparent 0 7px, var(--ringc) 7.5px 13px, transparent 13.5px);
  background-size: 64px 64px; background-position: 0 0, 32px 32px;
}
.dip > *:not(.fx-sky):not(.drip) { position: relative; z-index: 2; }
.drip { position: absolute; left: 0; top: calc(100% - 1px); width: 100%; height: 62px; fill: var(--dipc); z-index: 2; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .1)); transform-origin: top; }
.home-dip { padding: 28px 16px 26px; text-align: center; }
.home-dip .presents { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--on-dip); line-height: 1; }
.home-dip .presents b {
  /* a black plate with white letters pressed up out of it */
  display: inline-block; padding: 7px 16px 9px; border-radius: 12px; background: #000; color: #fff;
  font-family: var(--display); font-style: normal; font-weight: 900; font-stretch: 125%; letter-spacing: -.01em; font-size: clamp(24px, 7vw, 36px); line-height: 1;
  text-shadow: 1px 1px 0 #c9c9c9, 2px 2px 0 #9a9a9a, 3px 3px 0 #6e6e6e, 4px 4px 0 #444, 6px 7px 8px rgba(0, 0, 0, .9);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22), inset 0 -3px 0 rgba(255, 255, 255, .06), 0 1px 0 #2a2a2a, 0 2px 0 #222, 0 3px 0 #1a1a1a, 0 4px 0 #111, 0 5px 0 #000, 0 9px 14px rgba(43, 20, 25, .45);
  transform: perspective(300px) rotateX(10deg); transition: transform .2s var(--pop);
}
.home-dip .presents i { font-family: var(--serif); font-size: 18px; margin-top: 8px; }
.home-dip .presents:hover b { transform: perspective(300px) rotateX(0deg) translateY(-2px); }
.title { margin: 8px 0 0; line-height: .84; font-weight: 900; font-stretch: 125%; letter-spacing: -.035em; color: #fff6ea; }
.title span { display: block; }
.title .t1 { font-size: clamp(36px, 11vw, 70px); text-shadow: 3px 3px 0 var(--dip-deep); }
.title .t2 {
  font-size: clamp(66px, 21vw, 150px);
  text-shadow: 1px 1px 0 #f0d9c2, 2px 2px 0 #e2bc96, 3px 3px 0 #c9925f, 4px 4px 0 #a86c3c, 5px 5px 0 #8a5228, 6px 6px 0 #6b3a18, 7px 7px 0 #4e270d, 10px 14px 0 rgba(106, 15, 51, .35);
}
.script {
  display: inline-block; margin: 14px 0 0; padding: 4px 18px 7px; transform: rotate(-4deg);
  font-family: var(--serif); font-style: italic; font-weight: 700; font-size: clamp(28px, 8.4vw, 50px); line-height: 1;
  background: #fff6ea; color: var(--dip-deep); border: 3px solid #2b1419; border-radius: 12px; box-shadow: 4px 4px 0 #2b1419;
}
.spinner { position: relative; width: min(86vw, 440px); aspect-ratio: 1; margin: 20px auto 0; }
.spinner .ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring text { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 7.6px; letter-spacing: .06em; text-transform: uppercase; fill: var(--on-dip); }
.home-dip .ring { animation: spin 50s linear infinite reverse; }
.spinner .big, .spinner .hero-d { position: absolute; inset: 13%; }
.spinner .big svg { width: 100%; display: block; filter: drop-shadow(0 18px 18px rgba(80, 10, 30, .35)); animation: spin 90s linear infinite; }
.spinner .big.mys svg { opacity: .95; }
.spinner .big .q { font-size: clamp(36px, 11vw, 64px); color: #8a5a3a; }
.today { display: inline-block; margin: 14px 0 0; font-weight: 800; font-stretch: 112%; font-size: 15px; background: #2b1419; color: #fff6ea; padding: 7px 16px; border-radius: 99px; }

/* arrival: the donut drops in and bounces, the title slams, then the glaze runs down */
.intro .big { animation: dropIn 1s .15s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes dropIn { from { transform: translateY(-120%) rotate(-40deg); } }
.intro .ring { animation: ringIn .8s .7s var(--ease) both, spin 50s 1.5s linear infinite reverse; }
@keyframes ringIn { from { opacity: 0; transform: scale(.7) rotate(-60deg); } }
.intro .presents { animation: drop .6s .3s var(--pop) both; }
.intro .t1 { animation: drop .6s .45s var(--pop) both; }
.intro .t2 { animation: slam .7s .6s var(--pop) both; }
.intro .script { animation: stick .5s 1s var(--pop) both; }
.intro .today { animation: drop .5s 1.3s var(--pop) both; }
.intro .drip { animation: ooze 1.6s .9s cubic-bezier(.3, .7, .2, 1) both; }
@keyframes drop { from { opacity: 0; transform: translateY(-30px); } }
@keyframes slam { from { opacity: 0; transform: scale(1.6); } }
@keyframes stick { from { opacity: 0; transform: rotate(-30deg) scale(2); } }
@keyframes ooze { from { transform: scaleY(.15); } }

/* a night's page: the same dip in the night's own color */
.night-dip { --dipc: var(--accent); --ringc: color-mix(in srgb, var(--on-accent) 13%, transparent); --on-dip: var(--on-accent); padding: 10px 16px 20px; margin-bottom: 70px; }
.night-dip .spinner { width: min(84vw, 380px); margin-top: 6px; }
.platter { position: absolute; inset: -6%; border-radius: 50%; background: radial-gradient(circle, transparent 0 29%, #120c10 29.5%), repeating-radial-gradient(circle, #1d1519 0 2px, #2b2127 2px 3.4px); box-shadow: 0 16px 34px rgba(0, 0, 0, .4), inset 0 0 0 2px rgba(255, 255, 255, .06); }
.platter::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg, transparent 0 20%, rgba(255, 255, 255, .1) 25%, transparent 30% 70%, rgba(255, 255, 255, .08) 75%, transparent 80%); }
.spinner .hero-d svg { position: relative; z-index: 1; width: 100%; display: block; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); animation: none; }
.spinner.spinning .platter, .spinner.spinning .hero-d svg { animation: spin 3.6s linear infinite; }
.spinner.spinning .ring { animation: spin 30s linear infinite reverse; }

/* below the hero */
.masthead { padding: 26px 0 4px; }
.when-line { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--muted); margin: 0 0 10px; }

.steam { position: absolute; left: 50%; top: -18%; width: 40%; height: 60%; transform: translateX(-50%); pointer-events: none; }
.steam i { position: absolute; bottom: 0; width: 34%; height: 70%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .85), transparent); filter: blur(3px); opacity: 0; animation: steam 2.8s ease-out infinite; }
.steam i:nth-child(1) { left: 0; } .steam i:nth-child(2) { left: 33%; animation-delay: .9s; } .steam i:nth-child(3) { left: 66%; animation-delay: 1.8s; }
@keyframes steam { 0% { opacity: 0; transform: translateY(10px) scale(.6); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-28px) scale(1.3); } }

/* ---------- the countdown to the next night ---------- */
.countdown { margin: 18px 0 0; text-align: center; }
.cd-label { font-weight: 800; font-stretch: 112%; font-size: 15px; margin: 0 0 8px !important; color: var(--ink) !important; font-family: var(--display) !important; }
.cd-digits { display: flex; justify-content: center; gap: 10px; }
.cd-digits span { display: flex; flex-direction: column; align-items: center; min-width: 76px; padding: 8px 6px 6px; background: var(--ink); color: var(--bg); border-radius: 14px; }
.cd-digits b { font-family: var(--mono); font-weight: 500; font-size: 34px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.cd-digits small { font-size: 11.5px; opacity: .75; }
.cd-when { font-family: var(--serif); font-size: 15px; color: var(--muted); margin: 10px 0 0 !important; }

/* ---------- munching ---------- */
.sheet.shake { animation: shake .28s; }
@keyframes shake { 20% { transform: translate(-5px, 2px) rotate(-.6deg); } 40% { transform: translate(4px, -2px) rotate(.5deg); } 60% { transform: translate(-3px, 1px); } 80% { transform: translate(2px, 0); } }
.pow {
  position: fixed; z-index: 92; transform: translate(-50%, -50%); pointer-events: none;
  font-weight: 900; font-stretch: 125%; font-size: clamp(54px, 17vw, 96px); letter-spacing: -.03em; color: #fff;
  -webkit-text-stroke: 3px #2b1419; paint-order: stroke fill; text-shadow: 6px 6px 0 #2b1419;
  animation: pow 1.3s var(--pop) forwards;
}
.pow::before {
  content: ""; position: absolute; inset: -55% -22%; z-index: -1; background: var(--c);
  clip-path: polygon(50% 0, 58% 30%, 82% 8%, 70% 36%, 100% 30%, 76% 50%, 100% 70%, 70% 64%, 82% 92%, 58% 70%, 50% 100%, 42% 70%, 18% 92%, 30% 64%, 0 70%, 24% 50%, 0 30%, 30% 36%, 18% 8%, 42% 30%);
}
@keyframes pow { 0% { transform: translate(-50%, -50%) scale(.2) rotate(-14deg); } 25% { transform: translate(-50%, -50%) scale(1.15) rotate(-6deg); } 40% { transform: translate(-50%, -50%) scale(1) rotate(-6deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -70%) scale(1.05) rotate(-6deg); } }
.wipe { position: fixed; inset: 0; z-index: 91; pointer-events: none; clip-path: circle(0 at var(--x) var(--y)); animation: wipe .6s cubic-bezier(.6, 0, .4, 1) forwards; }
@keyframes wipe { to { clip-path: circle(150vmax at var(--x) var(--y)); } }
.wipe.out { opacity: 0; transition: opacity .6s .1s; }

/* ---------- the wjam.in card, bigger ---------- */
.wjam { padding: 20px 18px; position: relative; overflow: hidden; }
.wjam b { font-size: 22px; }
.wjam small { font-size: 14px; opacity: .9; }
.wjam::before { content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, transparent 0 18px, #e8a65f 19px 40px, transparent 41px), radial-gradient(circle, #ff8fbd 0 44px, transparent 45px); opacity: .25; }

.slot.fresh::before { content: ""; position: absolute; left: -18%; right: -18%; top: -18%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 79, 147, .38), rgba(255, 210, 120, .18) 60%, transparent); animation: halo 2.4s ease-in-out infinite; z-index: -1; }
@keyframes halo { 50% { transform: scale(1.12); opacity: .7; } }
.spinner .hero-d { width: auto; margin: 0; }

/* ---------- how do you want to hear it? ---------- */
.choose .sheet { padding-top: 26px; }
.ask-d { width: 96px; margin: 0 auto 8px; }
.ask-d svg { width: 100%; display: block; }
.choose h2 { font-size: clamp(26px, 7.5vw, 34px); font-weight: 900; font-stretch: 120%; line-height: 1.05; margin: 0 0 16px; }
.pick {
  display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; margin: 0 0 12px; padding: 14px 16px;
  background: var(--card); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 18px; box-shadow: 4px 4px 0 var(--ink);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.pick:first-of-type { background: var(--accent); color: var(--on-accent); }
.pick b { font-size: 20px; font-weight: 900; font-stretch: 115%; }
.pick span { font-family: var(--serif); font-size: 15.5px; line-height: 1.4; opacity: .9; }
.pick:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }

/* ---------- from the floor: real photos from the run ---------- */
.floor-sec { margin: 34px 0; }
.floor-sec h2 { margin-bottom: 4px; }
.floor-dek { font-family: var(--serif); font-size: 16px; color: var(--muted); margin: 0 0 12px; }
.strip { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 12px; margin: 0 -4px; -webkit-overflow-scrolling: touch; }
.shot { flex: none; width: min(72vw, 300px); aspect-ratio: 4 / 3; padding: 0; border: 2.5px solid var(--ink); border-radius: 14px; overflow: hidden; background: #111; box-shadow: 3px 3px 0 var(--ink); scroll-snap-align: start; transition: transform .15s var(--ease); }
.shot:first-child { width: min(84vw, 360px); }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot:hover { transform: rotate(-1.5deg) translateY(-2px); }
.floor-credit { font-size: 12.5px; color: var(--muted); margin: 2px 0 0; }
.floor-credit a { color: inherit; }
.lightbox { position: fixed; inset: 0; z-index: 95; background: rgba(12, 6, 10, .92); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 16px; gap: 12px; animation: lbIn .2s var(--ease); }
@keyframes lbIn { from { opacity: 0; } }
.lightbox img { max-width: 100%; max-height: 76vh; border-radius: 10px; object-fit: contain; }
.lightbox p { color: #fff6ea; font-family: var(--serif); font-size: 16px; text-align: center; margin: 0; max-width: 34em; }
.lightbox p span { display: block; font-family: var(--mono); font-size: 11.5px; opacity: .7; margin-top: 4px; }
.lightbox .x { position: absolute; top: 16px; right: 16px; }

/* ---------- the phish.net thread ---------- */
.thread { display: flex; align-items: center; gap: 14px; margin: 28px 0; padding: 16px 16px; text-decoration: none; background: var(--card); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 18px; box-shadow: 4px 4px 0 var(--ink); transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.thread:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.thread:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.thread > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.thread b { font-size: 19px; font-weight: 900; font-stretch: 115%; }
.thread small { font-family: var(--serif); font-size: 15px; color: var(--muted); line-height: 1.35; }
.thread-i { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #e2231a; color: #fff; padding: 10px; }
.thread-i svg, .thread > svg { width: 100%; height: 100%; }
.thread > svg { width: 20px; height: 20px; flex: none; color: var(--muted); }

.dek .wj { color: var(--accent); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ======================================================================
   The box, the star of the home page: a white bakery box seen from above, tied with red-and-white twine, with a
   sticker in today's color. Tap the lid and it lifts away to show the donuts on wax paper inside.
   Sizes are in cqw (percent of the box's width), so it scales as one piece.
   ====================================================================== */
.home-dip { --dipc: var(--accent); --on-dip: var(--on-accent); --ringc: color-mix(in srgb, var(--on-accent) 16%, transparent); --dip-deep: var(--deep); padding: 16px 16px 14px; z-index: 3; margin-bottom: 0; }
.home-dip .title { margin-top: 10px; }
.home-dip .title span { display: inline; font-size: clamp(34px, 10.4vw, 66px); }
.home-dip .title .t1, .home-dip .title .t2 { text-shadow: 1px 1px 0 #f0d9c2, 2px 2px 0 #e2bc96, 3px 3px 0 #c9925f, 4px 4px 0 #a86c3c, 5px 5px 0 #6b3a18; }
.home-dip .title .t2 { letter-spacing: -.035em; }
.home-dip .script { font-size: clamp(22px, 6.4vw, 34px); margin-top: 10px; color: #2b1419; }
.home-dip .today { margin-top: 12px; }

/* the counter: kraft paper */
.counter {
  position: relative; z-index: 1; width: 100vw; margin: 0 0 0 calc(50% - 50vw); padding: 84px 16px 30px;
  background: #ead8b9 radial-gradient(rgba(110, 70, 30, .1) 1px, transparent 1.6px) 0 0 / 7px 7px;
  border-bottom: 2.5px solid var(--ink);
}
.counter > * { max-width: 620px; margin-left: auto; margin-right: auto; }
.counter .progress { background: var(--bg); border: 2.5px solid var(--ink); border-radius: 18px; padding: 14px 14px 16px; box-shadow: 4px 4px 0 var(--ink); margin-top: 26px; }

.box { container-type: inline-size; position: relative; width: min(100%, 560px); margin: 0 auto; }
.tray {
  position: relative; padding: 4.5cqw 2.5cqw 3cqw; border-radius: 2cqw;
  /* the white cardboard walls seen from above, and the floor inside them */
  background: #fffdf8; border: 2.6cqw solid #ffffff; outline: .55cqw solid #2b1419;
  box-shadow: inset 0 0 0 .35cqw #d8cfc2, inset 0 3cqw 4cqw -2cqw rgba(90, 60, 30, .22), inset 0 -2cqw 3cqw -2cqw rgba(90, 60, 30, .16), 1.2cqw 1.6cqw 0 #2b1419, 0 5cqw 8cqw rgba(60, 35, 15, .3);
}
.row { display: flex; justify-content: center; gap: 2.4cqw; }
.row + .row { margin-top: 2.2cqw; }
.slot { width: 21.5cqw; isolation: isolate; }
.slot .tag { position: relative; z-index: 1; font-size: clamp(10px, 2.7cqw, 13px); font-weight: 500; color: #5b3a2c; }
/* each donut sits on its own square of wax paper */
.wax { position: absolute; left: -3%; right: -3%; top: -3%; aspect-ratio: 1; z-index: -1; transform: rotate(var(--wr)); background: rgba(255, 255, 255, .8); border: 1px solid rgba(160, 120, 100, .2); box-shadow: 0 1px 2px rgba(120, 60, 40, .12); border-radius: 2px; }
.wax::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 45%, rgba(255, 255, 255, .9) 50%, transparent 56%); }

/* the lid */
.lid {
  position: absolute; inset: -1.2cqw; padding: 0; border: .55cqw solid #2b1419; border-radius: 2.4cqw; overflow: hidden; z-index: 3;
  background: #fffefa linear-gradient(160deg, rgba(255, 255, 255, 0) 30%, rgba(230, 220, 205, .5)); box-shadow: 1.2cqw 1.6cqw 0 #2b1419;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4cqw;
  transition: transform .75s cubic-bezier(.5, -.3, .3, 1), opacity .45s .3s;
}
.string { position: absolute; background: repeating-linear-gradient(45deg, #e8304f 0 1.1cqw, #fff 1.1cqw 2.2cqw); box-shadow: 0 .25cqw 0 rgba(0, 0, 0, .12); }
.string.s1 { left: 50%; top: 0; bottom: 0; width: 1.3cqw; margin-left: -.65cqw; }
.string.s2 { top: 42%; left: 0; right: 0; height: 1.3cqw; margin-top: -.65cqw; }
.seal {
  position: relative; z-index: 2; width: 27cqw; height: 27cqw; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  background: var(--accent); color: var(--on-accent); border: .6cqw solid #2b1419; box-shadow: .9cqw .9cqw 0 #2b1419; margin-top: -3cqw;
  transition: transform .3s var(--pop);
}
.seal::before { content: ""; position: absolute; inset: 1.4cqw; border-radius: 50%; border: .4cqw dashed color-mix(in srgb, var(--on-accent) 55%, transparent); }
.seal b { font-size: 12.5cqw; font-weight: 900; font-stretch: 125%; }
.seal small { font-family: var(--mono); font-size: 2.6cqw; text-transform: uppercase; letter-spacing: .14em; margin-top: .6cqw; }
.lid-words { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; background: #fff; color: #2b1419; border: .5cqw solid #2b1419; border-radius: 2cqw; padding: 1.4cqw 4cqw; transform: rotate(-2deg); }
.lid-words b { font-size: 5.6cqw; font-weight: 900; font-stretch: 125%; }
.lid-words small { font-family: var(--serif); font-style: italic; font-size: 3.2cqw; }
.tap { position: absolute; z-index: 2; bottom: 5cqw; font-family: var(--mono); font-size: 3.4cqw; background: #2b1419; color: #fff; padding: 1cqw 3.4cqw; border-radius: 99px; animation: nudge 2.2s ease-in-out infinite; }
@keyframes nudge { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-1cqw); } 90% { transform: translateY(.3cqw); } }
.lid:hover .seal { transform: rotate(-8deg) scale(1.04); }
/* opening: the lid lifts up and away, then the donuts pop up one after another */
.box.open .lid { transform: translate(6%, -38%) rotate(-7deg); opacity: 0; pointer-events: none; }
.box.open:not(.opening) .lid { display: none; }
.box.opening .slot { animation: pop .55s var(--pop) var(--d) both; }
@keyframes pop { from { transform: translateY(4cqw) scale(.6); opacity: 0; } }