/* "How it works": the same candlelit room as the game pages. Loaded on that page only.
   Everything here is readable without guide.js; the .guide-js rules close the paper objects so a tap can open them. */

/* ---------- First screen: the invitation ---------- */
.how-hero {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; max-width: var(--measure); margin: 0 auto;
  padding: 5.6rem clamp(1.25rem, 4vw, 2.5rem) 3rem;
  background: radial-gradient(90% 26rem at 50% 24rem, rgba(226, 178, 90, 0.13), rgba(13, 10, 16, 0) 70%);
}
.how-hero__title { font-size: clamp(2.3rem, 9.6vw, 4.6rem); }
.how-hero .lede { margin: 0.9rem 0 0; font-size: clamp(1.06rem, 2.2vw, 1.35rem); }
.how-hero .kicker { margin-bottom: 0.6rem; }
.how-hero__after { margin: 1.5rem 0 0; font-family: var(--display); font-size: 1.15rem; color: var(--paper); }
.how-hero__go { margin: 1.1rem 0 0; }
.how-hero__go .button { display: block; }

/* ---------- Envelopes ---------- */
.how-env__face {
  position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; text-align: center;
}
.how-env__art { width: 100%; height: auto; filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.6)); }
.how-env__back { fill: #b7a47c; }
.how-env__front { fill: var(--paper); }
.how-env__fold { fill: none; stroke: rgba(42, 32, 24, 0.22); stroke-width: 1.5; }
.how-env__flap { stroke: rgba(42, 32, 24, 0.3); stroke-width: 1.2; stroke-linejoin: round; transform-box: fill-box; }
.how-env__flap--down { fill: var(--paper-shade); transform-origin: 50% 0; transition: transform 0.26s ease-in; }
.how-env__flap--up { fill: #cdbb93; transform-origin: 50% 100%; transform: scaleY(0); transition: transform 0.3s ease-out 0.24s; }
.how-env__sheet { fill: #fbf5e6; }
.how-env__ink { fill: none; stroke: rgba(42, 32, 24, 0.35); stroke-width: 3; stroke-linecap: round; }
.how-env__letter { transform: translateY(0); transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0.45s; }
.how-env__wax { transform-box: fill-box; transform-origin: 50% 50%; transition: transform 0.3s ease, opacity 0.3s ease; }
.how-env__seal { fill: var(--blood); stroke: rgba(0, 0, 0, 0.3); stroke-width: 1.5; }
.how-env__ring { fill: none; stroke: rgba(255, 214, 170, 0.45); stroke-width: 1.5; }
.how-env__mark { font-family: var(--display); font-size: 27px; font-weight: 600; fill: #f6d9b0; }
.how-env.is-open .how-env__flap--down { transform: scaleY(0); }
.how-env.is-open .how-env__flap--up { transform: scaleY(1); }
.how-env.is-open .how-env__letter { transform: translateY(-64px); }
.how-env.is-open .how-env__wax { transform: scale(1.7); opacity: 0; }
.how-env__inside { margin-top: 1rem; }

.how-env--hero { width: min(100%, 23rem); margin: -2.2rem auto 0; }
.how-env--hero .how-env__face { transition: width 0.6s ease 0.2s; margin: 0 auto; }
.how-env__to {
  position: absolute; left: 0; right: 0; bottom: 5.1rem; font-family: var(--hand); font-size: 1.5rem; color: var(--paper-ink);
  transform: rotate(-3deg); pointer-events: none;
}
.how-env__cta {
  display: inline-block; margin-top: 1rem; padding: 0.95rem 1.6rem; min-width: 14rem; border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 55%, var(--gold-deep)); color: #20150a;
  font-family: var(--label); font-size: 0.86rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  box-shadow: 0 6px 24px rgba(226, 178, 90, 0.3);
}
html:not(.guide-js) .how-env__cta, html:not(.guide-js) .how-pack__hint { display: none; }
.guide-js .how-env:not(.is-open) > .how-env__inside,
.guide-js .how-pack:not(.is-open) > .how-env__inside { display: none; }
.guide-js .how-env.is-open > .how-env__inside,
.guide-js .how-pack.is-open > .how-env__inside { animation: how-rise 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) 0.5s both; }
.guide-js .how-env--hero:not(.is-open) .how-env__wax { animation: how-beat 1.8s ease-in-out infinite; }
.guide-js .how-env--hero.is-open .how-env__face { width: 58%; cursor: default; }
.guide-js .how-env--hero.is-open, html:not(.guide-js) .how-env--hero { margin-top: 0.6rem; }
.guide-js .how-env--hero.is-open .how-env__cta,
.guide-js .how-env--hero.is-open .how-env__to { display: none; }
html:not(.guide-js) .how-env--hero .how-env__face { width: 58%; }
html:not(.guide-js) .how-env__to { display: none; }

/* ---------- Paper things ---------- */
.how-card, .how-slip, .how-booklet__paper {
  position: relative; color: var(--paper-ink);
  background: linear-gradient(180deg, var(--paper), var(--paper-shade));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), inset 0 0 40px rgba(120, 90, 40, 0.18);
}
.how-card { margin: 0 0.25rem; padding: 1.5rem 1.4rem 1.3rem; transform: rotate(-1deg); text-align: left; }
.how-card p { margin: 0; }
.how-card__when { font-family: var(--display); font-style: italic; font-size: 1.1rem; padding-right: 5rem; }
.how-card__label, .how-page__label, .how-slip__label, .how-rule__label, .how-page__no {
  font-family: var(--label); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #6a5330;
}
.how-card__label { margin-top: 1.1rem !important; }
.how-card__name { font-size: 2.1rem; color: var(--paper-ink); }
.how-card__role { font-style: italic; }
.how-card__secret {
  display: flex; align-items: center; gap: 0.8rem; margin: 1.3rem -0.5rem 0 !important; padding: 0.9rem 1rem;
  background: var(--ink); color: var(--paper); font-family: var(--display); font-size: 1.08rem; line-height: 1.35;
}
.how-wax {
  flex: none; display: inline-block; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d04a52, var(--blood) 60%, #5c0f15); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.how-stamp {
  position: absolute; top: 0.9rem; right: 0.9rem; margin: 0; padding: 0.2rem 0.5rem; transform: rotate(7deg);
  font-family: var(--label); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--blood); border: 2px solid var(--blood); opacity: 0.85;
}
.how-slip { padding: 1.1rem 1.2rem 1.2rem; transform: rotate(0.6deg); }
.how-slip p { margin: 0; }
.how-slip__label { margin-bottom: 0.35rem !important; }
.how-slip--dark { background: linear-gradient(180deg, #2a1215, #170a0c); color: var(--paper); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), inset 0 0 0 1px var(--gold-deep); transform: none; }
.how-slip--dark .how-slip__label { color: var(--gold); }

/* ---------- The evening on a clock ---------- */
.how-clock { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3rem; max-width: 34rem; margin: 1.4rem 0 0 !important; }
.how-clock a {
  display: grid; place-items: center; min-height: 44px; border: 1px solid var(--plum-line); border-radius: 2px;
  font-family: var(--label); font-size: 0.84rem; font-weight: 600; color: var(--mist); text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.how-clock a.is-past { color: var(--gold); border-color: var(--gold-deep); }
.how-clock a[aria-current] { background: var(--gold); border-color: var(--gold); color: #20150a; box-shadow: 0 0 18px rgba(226, 178, 90, 0.45); }
.how-night { margin-top: 2.2rem; max-width: 40rem; margin-left: 0 !important; }
.how-stage { position: relative; padding: 0 0 2.1rem 3rem; scroll-margin-top: 5rem; }
.how-stage:last-child { padding-bottom: 0; }
.how-stage::before { content: ""; position: absolute; left: 0.95rem; top: 0.7rem; bottom: -0.3rem; width: 2px; background: var(--plum-line); transition: background 0.6s ease; }
.how-stage:last-child::before { display: none; }
.how-stage__flame { position: absolute; left: 0.4rem; top: 0.25rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--ink); border: 1px solid var(--gold-deep); z-index: 1; }
.how-stage__flame::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 50% 62%, #fff4cf, #ffb347 55%, var(--ember)); box-shadow: 0 0 18px 5px rgba(255, 170, 70, 0.55);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 1.7, 0.4, 1);
}
.how-stage p { margin: 0 0 0.3rem; color: var(--mist); }
.how-stage h3 { font-size: 1.5rem; margin: 0.15rem 0 0.4rem; }
.how-stage .how-stage__time { display: flex; align-items: center; flex-wrap: wrap; gap: 0.7rem; font-family: var(--display); font-size: 1.3rem; color: var(--gold); margin: 0; }
.how-stage__tag {
  padding: 0.18rem 0.55rem; background: var(--paper); color: var(--paper-ink);
  font-family: var(--label); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.how-stage .how-stage__table { font-style: italic; color: var(--paper); }
.how-stage--shock h3 { color: #ff9a86; }
.guide-js .how-stage { cursor: pointer; }
.guide-js .how-stage > :not(.how-stage__flame) { opacity: 0.36; transition: opacity 0.6s ease; }
.guide-js .how-stage:not(.is-lit) .how-stage__flame::after { opacity: 0; transform: scale(0.3) translateY(4px); }
.guide-js .how-stage.is-lit > * { opacity: 1; }
.guide-js .how-stage.is-lit::before { background: linear-gradient(180deg, var(--gold), var(--ember)); }
.guide-js .how-stage.is-lit h3 { animation: how-rise 0.5s ease both; }
.guide-js .how-stage--shock.is-lit h3 { animation: how-slam 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.guide-js .how-stage--last.is-lit h3 { text-shadow: 0 0 22px rgba(255, 190, 100, 0.5); }

/* ---------- The host ---------- */
.how-jobs { counter-reset: job; margin-top: 0.4rem; max-width: 40rem; margin-left: 0 !important; }
.how-jobs li { counter-increment: job; position: relative; padding: 0.7rem 0 0.7rem 3rem; border-bottom: 1px solid var(--plum-line); color: var(--mist); }
.how-jobs li::before { content: counter(job); position: absolute; left: 0.3rem; top: 0.35rem; font-family: var(--display); font-size: 2rem; line-height: 1.2; color: var(--gold); }
.how-jobs strong { font-family: var(--display); font-size: 1.2rem; font-weight: 600; color: var(--snow); }
.how-desk { margin-top: 2.4rem; max-width: 34rem; margin-left: 0 !important; }
.how-desk__label { font-family: var(--display); font-size: 1.3rem; color: var(--paper); margin-bottom: 1rem; }
.how-env--round { margin-bottom: 1.6rem; }
.how-env--round .how-env__face { max-width: 8.5rem; min-height: 44px; }
.how-env__name { display: block; margin-top: 0.3rem; font-family: var(--label); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist); }
.how-env--round.is-open .how-env__name { color: var(--gold); }
.guide-js .how-desk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0.9rem; }
.guide-js .how-desk__label { grid-column: 1 / -1; grid-row: 1; }
.guide-js .how-env--round { display: contents; }
.guide-js .how-env--round .how-env__face { grid-row: 2; max-width: none; }
.guide-js .how-env--round .how-env__inside { grid-column: 1 / -1; grid-row: 3; margin: 1.1rem 0 0; }
.guide-js .how-desk:not(.is-touched) .how-env--round:nth-of-type(1) .how-env__wax { animation: how-beat 1.8s ease-in-out infinite; }
.guide-js .how-env--round .how-env__face:hover .how-env__art { transform: translateY(-3px); }
.how-env--round .how-env__art { transition: transform 0.2s ease; }
.guide-js .how-pack { grid-column: 1 / -1; grid-row: 4; }
.how-pack { margin-top: 1.8rem; }
.how-pack__face {
  position: relative; display: grid; gap: 0.5rem; justify-items: center; width: 100%; min-height: 9rem; padding: 1.3rem 1rem 1.2rem; overflow: hidden; cursor: pointer;
  border: 1px solid var(--gold-deep); border-radius: 2px; background: linear-gradient(160deg, #3a1519, #1c0b0e 70%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); -webkit-tap-highlight-color: transparent;
}
.how-pack__title { font-family: var(--display); font-size: 1.7rem; color: var(--paper); }
.how-pack__band {
  display: flex; align-items: center; justify-content: center; gap: 1.1rem; width: 130%; padding: 0.35rem 0; transform: rotate(-4deg);
  background: var(--paper); color: var(--blood); font-family: var(--label); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); transition: transform 0.6s cubic-bezier(0.5, 0, 0.8, 0.4), opacity 0.5s ease 0.15s;
}
.how-pack__hint { font-family: var(--label); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.how-pack.is-open .how-pack__band { position: absolute; top: 3.6rem; left: -15%; transform: rotate(-16deg) translate(-12%, 9rem); opacity: 0; }
.how-pack.is-open .how-pack__face { min-height: 0; cursor: default; }
.how-pack.is-open .how-pack__hint { display: none; }
.how-line--free { font-family: var(--body); font-size: 1.05rem; border-left-color: rgba(42, 32, 24, 0.35); }
.how-line--free span { color: #6a5330; }
.how-pack.is-open .how-pack__hint { visibility: hidden; }
.how-pack.is-open .how-pack__face { border-color: var(--gold); box-shadow: 0 0 34px rgba(226, 178, 90, 0.3); }

/* ---------- The guest's booklet ---------- */
.how-booklet { margin-top: 1.6rem; max-width: 30rem; margin-left: 0 !important; }
.how-booklet__tabs { display: none; }
.guide-js .how-booklet__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.25rem; padding: 0 0.5rem; }
.how-booklet__tabs button {
  min-height: 46px; padding: 0.3rem 0.2rem; border: 1px solid var(--plum-line); border-bottom: 0; border-radius: 4px 4px 0 0; cursor: pointer;
  background: var(--plum); color: var(--mist); font-family: var(--label); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.how-booklet__tabs button[aria-selected="true"] { background: var(--paper); border-color: var(--paper); color: var(--paper-ink); }
.how-booklet__paper { padding: 1.5rem 1.4rem 1.6rem; perspective: 900px; }
.guide-js .how-booklet__paper { min-height: 21rem; }
.how-page + .how-page { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px dashed rgba(42, 32, 24, 0.4); }
.guide-js .how-page { display: none; margin: 0; padding: 0; border: 0; }
.guide-js .how-page.is-current { display: block; transform-origin: 0 50%; animation: how-turn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.how-page p { margin: 0 0 0.5rem; }
.how-page h3 { font-size: 1.9rem; margin-top: 0.3rem; }
.how-page__role { font-style: italic; }
.how-page__label { margin-top: 1rem !important; margin-bottom: 0.15rem !important; }
.how-line { font-family: var(--display); font-size: 1.22rem; line-height: 1.4; margin: 1rem 0 0 !important; padding-left: 0.9rem; border-left: 3px solid var(--blood); }
.how-line span { display: block; font-family: var(--label); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blood); }
.how-rule { margin: 1.3rem -0.5rem 0; padding: 1rem 1.1rem; background: var(--ink); color: var(--paper); }
.how-rule p { margin: 0; }
.how-rule__label { color: var(--gold); margin-bottom: 0.3rem !important; }
.how-rule__line { font-family: var(--display); font-size: 1.5rem; line-height: 1.3; color: #fff6e0; margin-top: 0.4rem !important; }
.how-booklet__note { margin: 1rem 0 0; font-size: 1rem; font-style: italic; color: var(--mist); }

/* ---------- Facts ---------- */
.how-facts { display: grid; gap: 0 2.5rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin-top: 1rem; }
.how-fact { display: grid; grid-template-columns: 3.2rem 1fr; column-gap: 1rem; align-content: start; padding: 1.3rem 0; border-bottom: 1px solid var(--plum-line); }
.how-ico { grid-row: span 2; width: 3.2rem; height: 3.2rem; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.how-fact h3 { font-size: 1.35rem; color: var(--gold-light); margin-bottom: 0.3rem; }
.how-fact p { margin: 0; color: var(--mist); }

/* ---------- The mysteries ---------- */
.how-bills { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin-top: 1.4rem; }
.how-bill { display: flex; flex-direction: column; border: 1px solid var(--plum-line); background: var(--ink); overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }
.how-bill__art { position: relative; height: 11rem; overflow: hidden; }
.how-bill__art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.how-bill__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--ink) 0%, rgba(13, 10, 16, 0) 45%); }
.how-bill__copy { display: flex; flex-direction: column; flex: 1; padding: 0.4rem 1.3rem 1.4rem; }
.how-bill__setting { font-family: var(--label); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; }
.how-bill h3 { font-size: 1.7rem; margin-bottom: 0.6rem; }
.how-bill__tagline { font-style: italic; color: var(--paper); flex: 1; margin-bottom: 1.2rem; }

.page-how .masthead__nav a[aria-current="page"] { color: var(--gold); }

@media (min-width: 46.01rem) {
  .how-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 3rem; padding-top: 8rem; padding-bottom: 5rem; }
  .how-hero__go .button { display: inline-block; }
}

@keyframes how-rise { from { opacity: 0; transform: translateY(-22px) scale(0.96); } to { opacity: 1; } }
@keyframes how-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes how-slam { from { opacity: 0; transform: scale(1.3); } to { opacity: 1; transform: none; } }
@keyframes how-turn { from { opacity: 0; transform: rotateY(-62deg); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .page-how *, .page-how *::before, .page-how *::after { animation: none !important; transition: none !important; }
  .guide-js .how-stage > :not(.how-stage__flame) { opacity: 1; }
}
html:not(.guide-js) .how-js-only { display: none; }

/* ---------- The evening in five steps (home and game pages) ----------
   A strip that swipes on a phone and sits in one row on a desktop. A step is "on" once it has come into view
   (guide.js); without the script every step is on from the start. */
.eve { padding-block: clamp(2.6rem, 6vw, 4.5rem); overflow-x: clip; }
.eve__in { display: grid; grid-template-columns: minmax(0, 1fr); }
.eve__head .title { margin-bottom: 0; }
.eve__strip {
  display: flex; gap: 0; margin: 1.2rem calc(-1 * clamp(1.25rem, 4vw, 2.5rem)) 0; padding: 0 clamp(1.25rem, 4vw, 2.5rem) 0.6rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: clamp(1.25rem, 4vw, 2.5rem); scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.eve__strip::-webkit-scrollbar { display: none; }
.eve-step { position: relative; flex: 0 0 min(74vw, 17rem); padding-right: 1.4rem; scroll-snap-align: start; }
.eve-step--wide { flex-basis: min(80vw, 19rem); }
.eve-step:last-child { flex-basis: min(86vw, 19rem); }
.eve-step__art { display: flex; align-items: flex-end; height: 8.6rem; padding-bottom: 0.4rem; }
.eve-step__when {
  position: relative; display: flex; align-items: center; gap: 0.6rem; margin: 0.9rem 0 0.5rem; padding-top: 1.5rem;
  font-family: var(--label); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
}
.eve-step__when::before { content: ""; position: absolute; left: 0; right: -1.4rem; top: 0.55rem; height: 2px; background: var(--plum-line); }
.eve-step:last-child .eve-step__when::before { right: 0; }
.eve-step__when::after {
  content: ""; position: absolute; left: 0; right: -1.4rem; top: 0.55rem; height: 2px; background: linear-gradient(90deg, var(--gold), var(--ember));
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.9s ease;
}
.eve-step:last-child .eve-step__when::after { right: 0; }
.eve-step__n {
  position: absolute; left: 0; top: -0.2rem; z-index: 1; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--ink); border: 1px solid var(--gold-deep); color: var(--gold); font-family: var(--display); font-size: 0.95rem; letter-spacing: 0;
  transition: background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}
.eve-step h3 { font-size: 1.45rem; margin-bottom: 0.35rem; }
.eve-step > p:last-child { margin: 0; color: var(--mist); }
.guide-js .eve-step { cursor: pointer; }
.eve-step.is-on .eve-step__when::after, html:not(.guide-js) .eve-step__when::after { transform: scaleX(1); }
.eve-step.is-on .eve-step__n, html:not(.guide-js) .eve-step__n { background: var(--gold); color: #20150a; box-shadow: 0 0 16px rgba(255, 190, 100, 0.55); }

.eve-env { width: 8.6rem; }
.eve-env .how-env__art { display: block; }
.eve-trio { display: flex; gap: 0.5rem; }
.eve-trio .eve-env { width: 5.4rem; }

.eve-book { position: relative; width: 9.4rem; height: 7.4rem; perspective: 700px; }
.eve-book__page {
  position: absolute; inset: 0; padding: 0.6rem 0.65rem; overflow: hidden; color: var(--paper-ink);
  background: linear-gradient(180deg, var(--paper), var(--paper-shade)); box-shadow: 0 12px 22px rgba(0, 0, 0, 0.55);
}
.eve-book__page p { margin: 0 0 0.35rem; font-family: var(--display); font-size: 0.82rem; line-height: 1.3; }
.eve-book__page b { display: block; font-family: var(--label); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blood); }
.eve-book__cover {
  position: absolute; inset: 0; display: grid; place-items: center; transform-origin: 0 50%; backface-visibility: hidden;
  background: linear-gradient(160deg, var(--plum-line), var(--plum)); border: 1px solid var(--gold-deep);
  font-family: var(--display); font-size: 1rem; color: var(--gold-light); transition: transform 0.9s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.5s ease 0.35s;
}
.eve-step.is-on .eve-book__cover, html:not(.guide-js) .eve-book__cover { transform: rotateY(-118deg); opacity: 0; }

.eve-ballot { width: 6.6rem; height: auto; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.55)); transform: rotate(-3deg); }
.eve-ballot__paper { fill: var(--paper); }
.eve-ballot__ink { fill: none; stroke: var(--paper-ink); stroke-width: 4; stroke-linecap: round; opacity: 0.6; }
.eve-ballot__line { fill: none; stroke: var(--paper-ink); stroke-width: 3; stroke-linecap: round; opacity: 0.32; }
.eve-ballot__box { fill: none; stroke: var(--paper-ink); stroke-width: 2; }
.eve-ballot__cross { fill: none; stroke: var(--blood); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 36; stroke-dashoffset: 36; transition: stroke-dashoffset 0.35s ease-out 0.3s; }
.eve-ballot__cross--2 { transition-delay: 0.65s; }
.eve-step.is-on .eve-ballot__cross, html:not(.guide-js) .eve-ballot__cross { stroke-dashoffset: 0; }

.eve-pack {
  position: relative; display: grid; place-items: center; width: 9.4rem; height: 6.6rem; overflow: hidden;
  border: 1px solid var(--gold-deep); background: linear-gradient(160deg, #3a1519, #1c0b0e 70%); box-shadow: 0 12px 22px rgba(0, 0, 0, 0.55);
  transition: box-shadow 0.6s ease 0.5s, border-color 0.6s ease 0.5s;
}
.eve-pack__word { font-family: var(--display); font-size: 1.7rem; color: #fff6e0; opacity: 0; transform: scale(1.5); transition: opacity 0.4s ease 0.6s, transform 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) 0.6s; }
.eve-pack__band {
  position: absolute; left: -15%; top: 2.2rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 130%; padding: 0.2rem 0; transform: rotate(-5deg);
  background: var(--paper); color: var(--blood); font-family: var(--label); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase;
  transition: transform 0.7s cubic-bezier(0.5, 0, 0.8, 0.4) 0.15s, opacity 0.4s ease 0.4s;
}
.eve-pack__band .how-wax { width: 1.5rem; height: 1.5rem; }
.eve-step.is-on .eve-pack__band, html:not(.guide-js) .eve-pack__band { transform: rotate(-20deg) translateY(6rem); opacity: 0; }
.eve-step.is-on .eve-pack__word, html:not(.guide-js) .eve-pack__word { opacity: 1; transform: none; }
.eve-step.is-on .eve-pack, html:not(.guide-js) .eve-pack { border-color: var(--gold); box-shadow: 0 0 30px rgba(226, 178, 90, 0.35); }

.eve__dots { display: none; }
.guide-js .eve__dots { display: flex; gap: 0.4rem; margin: 0.9rem 0 0; }
.eve__dots span { width: 1.6rem; height: 3px; background: var(--plum-line); transition: background 0.3s ease; }
.eve__dots span.is-current { background: var(--gold); }
.eve__more { margin: 1.4rem 0 0; }
.eve__more .button { display: block; }

.eve-facts { display: grid; gap: 0 2.5rem; margin-top: 1.8rem; border-top: 1px solid var(--plum-line); }
.eve-fact { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: 0.9rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid var(--plum-line); }
.eve-fact .how-ico { grid-row: auto; width: 2.6rem; height: 2.6rem; }
.eve-fact p { margin: 0; color: var(--mist); }
.eve-fact strong { display: block; font-family: var(--display); font-size: 1.2rem; font-weight: 600; color: var(--snow); }

@media (min-width: 62rem) {
  .eve__in { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 2rem; }
  .eve__head { grid-column: 1; grid-row: 1; }
  .eve__more { grid-column: 2; grid-row: 1; margin: 0 0 0.4rem; }
  .eve__more .button { display: inline-block; }
  .eve__strip { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1.25fr 1fr 1fr; margin: 2rem 0 0; padding: 0; overflow: visible; }
  .eve__strip--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .eve-step, .eve-step--wide, .eve-step:last-child { padding-right: 1.6rem; }
  .eve-step:last-child { padding-right: 0; }
  .eve-step__when::before, .eve-step__when::after { right: -1.6rem; }
  .eve-step__art { height: 9.4rem; }
  .eve-trio .eve-env { width: 5.6rem; }
  .guide-js .eve__dots { display: none; }
  .eve-facts { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2.4rem; }
  .eve-fact { border-bottom: 0; padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .eve *, .eve *::before, .eve *::after { animation: none !important; transition: none !important; }
}

/* phone: all five steps visible at once, one under the other (a sideways scroller showed one and a half) */
@media (max-width: 46rem) {
  .eve__strip { flex-direction: column; overflow: visible; scroll-snap-type: none; margin-inline: 0; padding-inline: 0; }
  .eve-step, .eve-step--wide, .eve-step:last-child { flex: none; display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); column-gap: 1rem; align-items: start; padding: 0.9rem 0; border-top: 1px solid var(--plum-line); }
  .eve-step__art { grid-row: 1 / span 3; height: auto; min-height: 3.6rem; padding: 0; align-items: flex-start; justify-content: flex-start; }
  .eve-step__art > * { zoom: 0.56; }
  .eve-trio { gap: 0.3rem; }
  .eve-trio .eve-env { width: 3rem; }
  .eve-step__when { margin-top: 0; padding-top: 0; padding-left: 2.2rem; min-height: 1.6rem; }
  .eve-step__when::before, .eve-step__when::after { display: none; }
  .eve-step__n { top: -0.15rem; }
  .eve-step h3 { font-size: 1.25rem; }
  /* three steps: the small picture beside the step's name, its sentence across the whole width below */
  .eve__strip--three .eve-step, .eve__strip--three .eve-step:last-child { grid-template-columns: 3.7rem minmax(0, 1fr); column-gap: 0.85rem; padding: 0.75rem 0; }
  .eve__strip--three .eve-step__art { grid-row: 1 / span 2; min-height: 0; align-self: center; }
  .eve__strip--three .eve-step__art > * { zoom: 0.4; }
  .eve__strip--three .eve-step > p:last-child { grid-column: 1 / -1; margin-top: 0.4rem; }
  .eve__more { margin-top: 0.6rem; }
  /* the strip stands upright on a phone: nothing to swipe, so no marks for it */
  .eve__dots, .guide-js .eve__dots { display: none; }
}

/* Envelope labels stay readable while the other stages are dimmed. */
.guide-js .how-stage > .how-stage__time:has(.how-stage__tag) { opacity: 1; }

/* The way to the whole evening is a plain link, not a second button under the steps. */
.eve__link { display: inline-flex; align-items: center; min-height: 2.75rem; font-family: var(--label); font-size: 0.92rem; font-weight: 600; letter-spacing: 0.04em; color: var(--gold-light); text-decoration: underline; text-underline-offset: 0.25em; }
.eve__link::after { content: "\2192"; margin-left: 0.45rem; text-decoration: none; }
/* A phone's top bar on this page: the way back to the game keeps inside a 390 px screen. */
@media (max-width: 46rem) { .page-how .masthead { gap: 0.6rem; } .page-how .masthead__nav a.masthead__buy { padding-inline: 0.6rem; } }