/* FACTORY OFF — paper, ink, stamp red, caution tape. */
:root {
  --paper: #F2ECDF;
  --paper-2: #E8DFCC;
  --card: #FBF8F1;
  --ink: #17140F;
  --ink-2: #3A342B;
  --muted: #6F6556;
  --rule: #17140F;
  --red: #D7261E;
  --red-deep: #A3170F;
  --yellow: #F3C21B;
  --kraft: #C49A5C;
  --green: #2E7D4F;
  --display: "Anton", "Impact", "Haettenschweiler", sans-serif;
  --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --zh: "Noto Serif SC", "Songti SC", "STSong", serif;
  --hand: "Caveat", "Bradley Hand", cursive;
  --gutter: clamp(16px, 4vw, 48px);
  --shadow: 5px 5px 0 var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

body {
  margin: 0;
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: inherit; }
b, strong { font-weight: 700; }
.red { color: var(--red); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }

/* ── ticker ── */
.ticker { background: var(--ink); color: var(--yellow); font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; overflow: hidden; white-space: nowrap; border-bottom: 2px solid var(--ink); }
.ticker__track { display: inline-block; padding: 9px 0; animation: tick 60s linear infinite; }
.ticker__track span { margin: 0 28px; }
.ticker__track span::before { content: "■"; color: var(--red); margin-right: 10px; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── masthead ── */
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px var(--gutter); border-bottom: 3px solid var(--ink); flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo__seal { display: grid; place-items: center; width: 52px; height: 52px; background: var(--red); color: #fff; font: 900 32px/1 var(--zh); border: 3px solid var(--ink); transform: rotate(-4deg); box-shadow: 3px 3px 0 var(--ink); }
.logo__word { font: 400 22px/.92 var(--display); letter-spacing: .02em; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 18px; font: 500 13px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.nav a { text-decoration: none; padding: 8px 0; border-bottom: 2px solid transparent; }
.nav a:hover { border-color: var(--red); }
.nav__cta { background: var(--ink); color: var(--paper); padding: 8px 12px !important; }
.nav__cta:hover { background: var(--red); }
@media (max-width: 760px) { .nav a:not(.nav__cta) { display: none; } .nav a[href="cny.html"] { display: inline; } }

/* ── shared ── */
.kicker { font: 500 12px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.kicker--light { color: var(--yellow); }
.section { padding: clamp(56px, 8vw, 104px) var(--gutter); max-width: 1280px; margin: 0 auto; }
.section--narrow { max-width: 860px; }
.section-head { max-width: 760px; margin-bottom: 36px; }
.section-title { font: 400 clamp(40px, 6.4vw, 76px)/.95 var(--display); text-transform: uppercase; margin: 0 0 16px; letter-spacing: .005em; }
.section-lede { font-size: 18px; color: var(--ink-2); margin: 0; }
.tiny { font: 400 12px/1.5 var(--mono); color: var(--muted); }
.fineprint { font: 400 13px/1.5 var(--mono); color: var(--muted); max-width: 820px; margin-top: 24px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px; font: 700 14px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; color: var(--ink); background: var(--card); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); cursor: pointer; transition: transform .08s, box-shadow .08s; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn--red { background: var(--red); color: #fff; }
.btn--yellow { background: var(--yellow); }
.btn--wide { width: 100%; }

.tape { height: 22px; background: repeating-linear-gradient(-45deg, var(--yellow) 0 18px, var(--ink) 18px 36px); border-block: 2px solid var(--ink); }

/* ── hero ── */
.hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(48px, 7vw, 96px); max-width: 1280px; margin: 0 auto; align-items: start; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } }
.hero__q { font: 400 clamp(30px, 4.2vw, 50px)/1 var(--display); text-transform: uppercase; margin: 0; max-width: 14ch; }
.hero__a { font: 400 clamp(84px, 15vw, 200px)/.86 var(--display); color: var(--red); text-transform: uppercase; margin: 22px 0 18px; letter-spacing: -.01em; display: inline-block; padding: 14px 18px 6px; border: 7px solid var(--red); transform: rotate(-3deg); transform-origin: left center; mix-blend-mode: multiply; position: relative; animation: stamp .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.hero__a.is-long { font-size: clamp(60px, 9.6vw, 128px); }
.hero__a.is-no { color: var(--green); border-color: var(--green); }
@keyframes stamp { from { transform: rotate(-3deg) scale(1.6); opacity: 0; } to { transform: rotate(-3deg) scale(1); opacity: 1; } }
.hero__why { font-size: clamp(18px, 1.8vw, 21px); max-width: 38ch; margin: 8px 0 28px; color: var(--ink-2); }
.hero__why b { color: var(--ink); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__right { display: grid; gap: 18px; }
.ticket { position: relative; background: var(--card); border: 2px solid var(--ink); padding: 18px 20px 20px; box-shadow: var(--shadow); }
.ticket::before, .ticket::after { content: ""; position: absolute; top: 44px; width: 18px; height: 18px; background: var(--paper); border: 2px solid var(--ink); border-radius: 50%; }
.ticket::before { left: -11px; clip-path: inset(0 0 0 50%); }
.ticket::after { right: -11px; clip-path: inset(0 50% 0 0); }
.ticket__head { display: flex; justify-content: space-between; font: 700 12px/1 var(--mono); letter-spacing: .12em; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 2px dashed currentColor; }
.ticket__no { color: var(--red); }
.ticket__name { font: 400 30px/1 var(--display); text-transform: uppercase; margin: 0; }
.ticket__zh { font: 900 18px/1 var(--zh); color: var(--red); margin: 6px 0 14px; min-height: 18px; }
.ticket__quote { font: 400 15px/1.4 var(--mono); margin: 14px 0 0; padding-left: 12px; border-left: 3px solid var(--red); color: var(--ink-2); }
.ticket__link { display: inline-block; margin-top: 12px; font: 700 13px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--yellow); }
.ticket--dark { background: var(--ink); color: var(--paper); }
.ticket--dark .ticket__no { color: var(--yellow); }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.countdown div { background: var(--ink); color: var(--paper); text-align: center; padding: 10px 2px 8px; }
.countdown b { display: block; font: 400 34px/1 var(--display); font-variant-numeric: tabular-nums; }
.countdown span { font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--yellow); }
.bigcount { font: 400 22px/1.1 var(--display); text-transform: uppercase; margin: 0; }
.bigcount b { display: block; font-size: 84px; line-height: .9; color: var(--yellow); font-weight: 400; }
.bigcount__sub { font: 400 14px/1.45 var(--mono); margin: 10px 0 0; color: #cfc6b4; }
.bigcount__sub b { color: var(--paper); }
.clock { display: flex; gap: 16px; align-items: center; border: 2px solid var(--ink); padding: 14px 16px; background: var(--paper-2); }
.clock__face { display: grid; text-align: center; min-width: 92px; border-right: 2px dashed var(--ink); padding-right: 16px; }
.clock__face b { font: 400 34px/1 var(--display); font-variant-numeric: tabular-nums; }
.clock__label, .clock__face span { font: 500 10px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.clock__state { margin: 0; font-size: 15px; line-height: 1.4; }

/* ── notice ── */
.notice-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); padding: clamp(56px, 8vw, 104px) var(--gutter); max-width: 1280px; margin: 0 auto; align-items: center; }
@media (max-width: 900px) { .notice-wrap { grid-template-columns: 1fr; } }
.notice-intro p:not(.kicker) { font-size: 18px; color: var(--ink-2); }
.notice { position: relative; background: #fff; padding: clamp(28px, 4vw, 48px) clamp(22px, 4vw, 52px) 56px; box-shadow: 0 1px 0 #d9d1c0, 0 18px 40px -18px rgba(40, 30, 10, .45); transform: rotate(1.2deg); font: 400 16px/1.6 var(--sans); max-width: 640px; }
.notice__tape { position: absolute; top: -14px; width: 110px; height: 30px; background: rgba(243, 194, 27, .55); border: 1px solid rgba(0,0,0,.08); }
.notice__tape--l { left: 22px; transform: rotate(-6deg); }
.notice__tape--r { right: 22px; transform: rotate(5deg); }
.notice__title { font: 900 clamp(38px, 5vw, 56px)/1 var(--zh); text-align: center; margin: 0; letter-spacing: .3em; padding-left: .3em; }
.notice__sub { text-align: center; font: 500 12px/1 var(--mono); letter-spacing: .3em; color: var(--muted); margin: 8px 0 26px; }
.notice__sign { margin-top: 26px; font-family: var(--mono); font-size: 14px; }
.notice .hl { background: linear-gradient(transparent 55%, rgba(215, 38, 30, .22) 55%); }
.notice .hl2 { text-decoration: underline wavy var(--red); text-underline-offset: 4px; }
.notice .hl3 { border: 2px solid var(--red); border-radius: 50%; padding: 0 6px; }
.seal { position: absolute; right: clamp(16px, 5vw, 56px); bottom: 26px; width: clamp(110px, 16vw, 150px); color: var(--red); opacity: .82; transform: rotate(-12deg); mix-blend-mode: multiply; }
.redpen { position: absolute; font: 700 clamp(19px, 2.1vw, 24px)/1.05 var(--hand); color: var(--red); max-width: 210px; transform: rotate(-4deg); }
.redpen--1 { right: -30px; top: 150px; transform: rotate(5deg); }
.redpen--2 { left: -46px; top: 300px; transform: rotate(-7deg); }
.redpen--3 { left: 30%; bottom: -36px; transform: rotate(-2deg); max-width: 300px; }
@media (max-width: 1100px) { .seal { position: static; display: block; width: 110px; margin: -70px 0 0 auto; } .redpen--1, .redpen--2 { position: static; display: block; transform: none; margin-top: 8px; max-width: none; } .redpen--3 { position: static; display: block; transform: none; margin-top: 8px; max-width: none; } }

/* ── calendar ── */
.yearstrip { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 2px solid var(--ink); background: var(--card); margin-bottom: 10px; overflow: hidden; }
.ys-month { position: relative; border-right: 1px solid rgba(23, 20, 15, .25); height: 76px; }
.ys-month:last-child { border-right: 0; }
.ys-month__label { position: absolute; left: 5px; top: 4px; font: 700 10px/1 var(--mono); letter-spacing: .06em; color: var(--muted); z-index: 2; }
.ys-month__label.is-jan { color: var(--ink); }
.ys-bar { position: absolute; bottom: 0; height: 52px; }
.ys-bar[data-i="1"] { height: 12px; background: #e9cfa0; }
.ys-bar[data-i="2"] { height: 24px; background: #f0a07d; }
.ys-bar[data-i="3"] { height: 34px; background: #e86a47; }
.ys-bar[data-i="4"] { height: 44px; background: var(--red); }
.ys-bar[data-i="5"] { height: 56px; background: var(--red-deep); }
.ys-today { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--ink); z-index: 3; }
.ys-today::after { content: "TODAY"; position: absolute; top: 3px; left: 6px; font: 700 10px/1 var(--mono); background: var(--ink); color: var(--yellow); padding: 3px 4px; }
@media (max-width: 600px) { .ys-month:nth-child(even) .ys-month__label:not(.is-jan) { display: none; } .ys-month__label { font-size: 9px; left: 3px; } }
.yearstrip__legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font: 400 12px/1 var(--mono); color: var(--muted); margin: 0 0 28px; }
.sw { display: inline-block; width: 14px; height: 10px; margin-right: 4px; vertical-align: -1px; }
.sw--5 { background: var(--red-deep); } .sw--4 { background: var(--red); } .sw--3 { background: #e86a47; } .sw--2 { background: #f0a07d; } .sw--1 { background: #e9cfa0; }
.today-key { display: inline-block; width: 3px; height: 14px; background: var(--ink); margin-right: -8px; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chip { font: 500 13px/1 var(--mono); padding: 10px 14px; border: 2px solid var(--ink); background: transparent; cursor: pointer; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); }
.chip.is-on { background: var(--ink); color: var(--paper); }
.chip--toggle { display: inline-flex; gap: 8px; align-items: center; border-style: dashed; }
.chip--toggle input { accent-color: var(--red); margin: 0; }

.ledger { border-top: 3px solid var(--ink); }
.month-head { font: 400 28px/1 var(--display); text-transform: uppercase; padding: 26px 0 10px; border-bottom: 2px solid var(--ink); display: flex; justify-content: space-between; align-items: baseline; }
.month-head small { font: 500 12px/1 var(--mono); color: var(--muted); letter-spacing: .1em; }
.row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 210px; gap: 20px; padding: 18px 0; border-bottom: 1px solid rgba(23, 20, 15, .22); align-items: start; }
.row.is-past { opacity: .45; }
.row.is-now { background: linear-gradient(90deg, rgba(215, 38, 30, .1), transparent 70%); box-shadow: inset 4px 0 0 var(--red); padding-left: 14px; }
.row__date { text-align: center; border: 2px solid var(--ink); background: var(--card); }
.row__date b { display: block; font: 400 40px/1 var(--display); padding: 6px 0 2px; }
.row__date span { display: block; font: 700 11px/1 var(--mono); letter-spacing: .1em; background: var(--ink); color: var(--paper); padding: 5px 0; text-transform: uppercase; }
.row__date em { display: block; font: normal 400 11px/1 var(--mono); color: var(--muted); padding: 0 0 6px; }
.row__title { font: 700 20px/1.2 var(--sans); margin: 2px 0 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.row__title .zh { font: 900 17px/1 var(--zh); color: var(--red); }
.tag { font: 700 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 4px 6px; border: 1.5px solid currentColor; }
.tag--official { color: var(--red); }
.tag--season { color: #8a5a12; }
.tag--trade { color: #1f5f8b; }
.tag--traditional { color: var(--muted); }
.tag--deadline { background: var(--ink); color: var(--yellow); border-color: var(--ink); }
.row__impact b.dl { color: var(--red); }
.tbc { font: 700 10px/1 var(--mono); letter-spacing: .08em; background: var(--yellow); color: var(--ink); padding: 4px 6px; }
.tag--now { background: var(--red); color: #fff; border-color: var(--red); }
.row__blurb { margin: 6px 0 8px; color: var(--ink-2); font-size: 16px; }
.row__windows { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 400 13px/1.4 var(--mono); }
.row__windows b { font-weight: 700; }
.row__windows .w-real b { color: var(--red); }
.row__excuse { font: 400 14px/1.4 var(--mono); margin: 10px 0 0; color: var(--muted); }
.row__excuse::before { content: "You'll hear: "; color: var(--ink); font-weight: 700; }
.row__impact { font: 400 12px/1.4 var(--mono); }
.meter { display: flex; gap: 3px; margin-bottom: 6px; }
.meter i { display: block; flex: 1; height: 14px; border: 1.5px solid var(--ink); }
.meter i.on { background: var(--red); }
.row__impact b { display: block; font: 700 11px/1 var(--mono); letter-spacing: .1em; margin-bottom: 6px; }
.row__cal { display: inline-block; margin-top: 10px; font: 700 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 760px) {
  .row { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; }
  .row__date b { font-size: 32px; }
  .row__impact { grid-column: 2; }
}
.empty { padding: 40px 0; font: 400 15px/1.5 var(--mono); color: var(--muted); }

/* ── ETA ── */
.waybill { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 3px solid var(--ink); background: var(--card); box-shadow: 8px 8px 0 var(--ink); }
@media (max-width: 900px) { .waybill { grid-template-columns: 1fr; } }
.waybill__form { display: grid; align-content: start; border-right: 3px solid var(--ink); }
@media (max-width: 900px) { .waybill__form { border-right: 0; border-bottom: 3px solid var(--ink); } }
.field { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; padding: 14px 18px 16px; border-bottom: 2px solid var(--ink); margin: 0; min-width: 0; }
fieldset.field { border: 0; border-bottom: 2px solid var(--ink); }
.field__n { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; background: var(--ink); color: var(--paper); font: 700 14px/1 var(--mono); }
.field__l { font: 500 11px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 0; margin-bottom: 6px; }
.field input:not([type=radio]), .field select { width: 100%; font: 500 18px/1.2 var(--mono); padding: 8px 0; border: 0; border-bottom: 2px dashed var(--ink); background: transparent; color: var(--ink); border-radius: 0; -webkit-appearance: none; appearance: none; }
.field select { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0h12L6 8z' fill='%2317140F'/%3E%3C/svg%3E") no-repeat right 4px center; padding-right: 24px; }
.field input:not([type=radio]):focus, .field select:focus { outline: none; border-bottom-style: solid; border-bottom-color: var(--red); }
.radios { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; }
.radios label { font: 500 13px/1 var(--mono); border: 2px solid var(--ink); padding: 9px 10px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.radios input { accent-color: var(--red); margin: 0; }
.radios label:has(input:checked) { background: var(--ink); color: var(--paper); }
.waybill__form .btn { margin: 18px; width: auto; }

.receipt { padding: 26px clamp(18px, 3vw, 34px) 30px; position: relative; display: grid; align-content: start; }
.receipt__empty { font: 400 16px/1.5 var(--mono); color: var(--muted); margin: auto 0; padding: 40px 0; text-align: center; }
.receipt__row { display: flex; justify-content: space-between; gap: 12px; font: 400 15px/1.3 var(--mono); padding: 8px 0; border-bottom: 1px dashed rgba(23,20,15,.4); }
.receipt__row b { text-align: right; }
.receipt__row.strike b { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; color: var(--muted); }
.receipt__big { margin: 18px 0 6px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.receipt__date { font: 400 clamp(46px, 6vw, 68px)/.95 var(--display); color: var(--red); text-transform: uppercase; margin: 0; }
.receipt__delta { font: 700 15px/1.3 var(--mono); margin: 8px 0 16px; }
.receipt__verdict { font: 700 26px/1.1 var(--hand); color: var(--red); transform: rotate(-2deg); margin: 6px 0 14px; }
.receipt__hits { list-style: none; margin: 0 0 16px; padding: 0; font: 400 13px/1.5 var(--mono); }
.receipt__hits li::before { content: "✕ "; color: var(--red); font-weight: 700; }
.receipt__bar { height: 46px; margin: 8px 0 6px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 7px, transparent 7px 8px, var(--ink) 8px 9px, transparent 9px 12px, var(--ink) 12px 15px, transparent 15px 17px); }
.receipt__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.receipt__actions .btn { padding: 10px 14px; font-size: 12px; }
.receipt .stamp { justify-self: end; margin: 0 4px 14px 0; font: 400 22px/1 var(--display); color: var(--red); border: 4px solid var(--red); padding: 6px 10px 4px; transform: rotate(9deg); mix-blend-mode: multiply; opacity: .9; }

/* ── phrasebook ── */
.section--ink { max-width: none; background: var(--ink); color: var(--paper); }
.section--ink > * { max-width: 1280px; margin-left: auto; margin-right: auto; }
.section--ink .section-head { margin-left: auto; margin-right: auto; max-width: 1280px; }
.section--ink .section-head > * { max-width: 760px; }
.section--ink .kicker { color: var(--yellow); }
.section--ink .section-lede { color: #cfc6b4; }
.phrasebook { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 0; border-top: 1px solid #4a4339; }
.phrasebook li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; padding: 20px 20px 22px 0; border-bottom: 1px solid #4a4339; counter-increment: pb; }
.phrasebook li::before { content: counter(pb, decimal-leading-zero); font: 700 12px/1.9 var(--mono); color: var(--yellow); grid-row: span 2; }
.pb-say { font: 400 26px/1.05 var(--display); text-transform: uppercase; }
.pb-mean { font: 400 15px/1.45 var(--mono); color: #cfc6b4; }
.pb-mean::before { content: "→ "; color: var(--red); font-weight: 700; }

/* ── excuses ── */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.chat { border: 3px solid var(--ink); background: #EDEDED; box-shadow: var(--shadow); max-width: 520px; width: 100%; }
.chat__bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--card); border-bottom: 2px solid var(--ink); font: 400 15px/1 var(--sans); }
.chat__dot { width: 10px; height: 10px; background: var(--green); border-radius: 50%; }
.chat__status { margin-left: auto; font: 400 12px/1 var(--mono); color: var(--muted); }
.chat__body { height: 380px; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.msg { max-width: 82%; padding: 10px 13px; font: 400 15px/1.4 var(--sans); border: 1.5px solid var(--ink); position: relative; animation: pop .25s ease-out both; }
.msg--me { align-self: flex-end; background: #A9E77E; }
.msg--them { align-self: flex-start; background: #fff; }
.msg--voice { align-self: flex-start; background: #fff; font: 500 14px/1 var(--mono); display: flex; gap: 10px; align-items: center; min-width: 170px; }
.msg--voice::after { content: ""; flex: 1; height: 12px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px); opacity: .6; }
.msg--typing { align-self: flex-start; background: #fff; font: 700 18px/1 var(--mono); letter-spacing: 2px; }
@keyframes pop { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── bingo ── */
.bingo-wrap { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 300px); gap: 32px; align-items: start; }
@media (max-width: 900px) { .bingo-wrap { grid-template-columns: 1fr; } }
.bingo { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 3px solid var(--ink); background: var(--card); box-shadow: 8px 8px 0 var(--ink); }
.bingo button { aspect-ratio: 1; border: 0; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); background: transparent; font: 600 clamp(10px, 1.5vw, 14px)/1.15 var(--sans); padding: 6px; cursor: pointer; position: relative; color: var(--ink); overflow: hidden; hyphens: auto; }
.bingo button:nth-child(5n) { border-right: 0; }
.bingo button:nth-last-child(-n+5) { border-bottom: 0; }
.bingo button:hover { background: var(--paper-2); }
.bingo button.on::after { content: ""; position: absolute; inset: 10%; border: 5px solid var(--red); border-radius: 50%; opacity: .85; mix-blend-mode: multiply; transform: rotate(-8deg); animation: ink .2s ease-out; }
.bingo button.free { background: var(--red); color: #fff; font-family: var(--display); font-weight: 400; font-size: clamp(13px, 2vw, 20px); text-transform: uppercase; }
.bingo button.free::after { display: none; }
.bingo button.win:not(.free) { background: #ffe9a3; }
@keyframes ink { from { transform: scale(1.4) rotate(-8deg); opacity: 0; } }
.bingo-side { display: grid; gap: 12px; }
.bingo-status { font: 400 32px/1 var(--display); text-transform: uppercase; margin: 0 0 8px; }
.bingo-status.won { color: var(--red); }

/* ── folklore ── */
.section--red { max-width: none; background: var(--red); color: #fff; }
.section--red > * { max-width: 1280px; margin-left: auto; margin-right: auto; }
.section--red .section-head > * { max-width: 760px; }
.section--red .kicker { color: var(--yellow); }
.section--red .section-lede { color: #ffe1dc; }
.almanac { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 18px; }
.lore { background: var(--card); color: var(--ink); border: 2px solid var(--ink); padding: 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: 5px 5px 0 var(--red-deep); }
.lore:nth-child(3n+2) { transform: rotate(.6deg); }
.lore:nth-child(3n) { transform: rotate(-.5deg); }
.lore h3 { font: 400 25px/1 var(--display); text-transform: uppercase; margin: 0; }
.lore__when { font: 500 12px/1.4 var(--mono); color: var(--red); margin: 0; }
.lore__when::before { content: "OBSERVED: "; font-weight: 700; color: var(--ink); }
.lore p { margin: 0; font-size: 15px; color: var(--ink-2); }
.lore blockquote { margin: auto 0 0; padding: 10px 12px; background: var(--paper-2); font: 400 13px/1.4 var(--mono); border-left: 3px solid var(--ink); }

/* ── CNY teaser ── */
.cny-teaser { background: var(--ink); color: var(--paper); padding: clamp(56px, 8vw, 104px) var(--gutter); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .cny-teaser { grid-template-columns: 1fr; } }
.cny-teaser > * { max-width: 620px; }
.cny-teaser p { color: #cfc6b4; font-size: 18px; margin: 0 0 26px; }
.cny-teaser__title { font: 400 clamp(44px, 7vw, 88px)/.92 var(--display); text-transform: uppercase; margin: 0 0 20px; }
.cny-teaser__title span { font-size: .42em; color: var(--yellow); display: block; margin-top: 10px; }
.mini-timeline { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 3px solid var(--yellow); }
.mini-timeline li { position: relative; padding: 0 0 18px 6px; font: 400 15px/1.4 var(--mono); color: #cfc6b4; }
.mini-timeline li::before { content: ""; position: absolute; left: -32px; top: 3px; width: 14px; height: 14px; background: var(--ink); border: 3px solid var(--yellow); }
.mini-timeline li b { display: block; color: var(--paper); font-family: var(--display); font-weight: 400; font-size: 22px; text-transform: uppercase; }
.mini-timeline li.hot::before { background: var(--red); border-color: var(--red); }
.mini-timeline li.hot b { color: var(--red); font-size: 30px; }

/* ── subscribe ── */
.sub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.sub-card { display: grid; gap: 6px; text-align: left; text-decoration: none; padding: 20px; border: 2px solid var(--ink); background: var(--card); box-shadow: 4px 4px 0 var(--ink); cursor: pointer; font: inherit; color: var(--ink); transition: transform .08s, box-shadow .08s; min-width: 0; }
.sub-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--red); }
.sub-card__n { font: 400 40px/1 var(--display); color: var(--red); }
.sub-card b { font: 700 17px/1.2 var(--sans); }
.sub-card span:last-child { font: 400 13px/1.4 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.share { margin-top: 48px; padding-top: 28px; border-top: 2px dashed var(--ink); }
.share__row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── FAQ ── */
details { border-bottom: 2px solid var(--ink); }
details:first-of-type { border-top: 3px solid var(--ink); }
summary { cursor: pointer; list-style: none; font: 700 19px/1.3 var(--sans); padding: 18px 40px 18px 0; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font: 400 32px/1 var(--display); color: var(--red); }
details[open] summary::after { content: "−"; }
details p { margin: 0 0 20px; color: var(--ink-2); max-width: 70ch; }

/* ── footer ── */
.footer { display: flex; gap: 22px; align-items: flex-start; padding: 40px var(--gutter) 56px; border-top: 3px solid var(--ink); background: var(--paper-2); }
.footer p { margin: 0 0 8px; }
.footer__seal { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border: 4px solid var(--red); color: var(--red); font: 900 36px/1 var(--zh); transform: rotate(-8deg); }

/* ── toast ── */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 200%); visibility: hidden; background: var(--ink); color: var(--yellow); font: 700 14px/1 var(--mono); padding: 14px 18px; border: 2px solid var(--yellow); z-index: 50; transition: transform .25s, visibility .25s; max-width: calc(100vw - 32px); }
.toast.show { transform: translate(-50%, 0); visibility: visible; }

/* ── CNY guide page ── */
.page-hero { padding: clamp(48px, 7vw, 96px) var(--gutter) clamp(40px, 6vw, 72px); max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: end; }
@media (max-width: 900px) { .page-hero { grid-template-columns: 1fr; } }
.page-hero h1 { font: 400 clamp(56px, 10vw, 140px)/.86 var(--display); text-transform: uppercase; margin: 0; }
.page-hero h1 em { font-style: normal; color: var(--red); }
.page-hero__zh { font: 900 clamp(90px, 16vw, 220px)/.9 var(--zh); color: var(--red); margin: 0; text-align: right; mix-blend-mode: multiply; }
@media (max-width: 900px) { .page-hero__zh { text-align: left; } }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); border: 3px solid var(--ink); background: var(--card); }
.facts div { padding: 18px 20px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); margin: 0 -2px -2px 0; }
.facts dt { font: 500 11px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 6px 0 0; font: 400 30px/1 var(--display); text-transform: uppercase; }
.facts dd small { display: block; font: 400 13px/1.4 var(--mono); text-transform: none; color: var(--ink-2); margin-top: 6px; }
.timeline { list-style: none; margin: 0; padding: 0; border-left: 4px solid var(--ink); }
.timeline > li { position: relative; padding: 0 0 36px 32px; }
.timeline > li::before { content: ""; position: absolute; left: -14px; top: 4px; width: 24px; height: 24px; background: var(--paper); border: 4px solid var(--ink); }
.timeline > li.is-done::before { background: var(--ink); }
.timeline > li.is-now::before { background: var(--red); border-color: var(--red); box-shadow: 0 0 0 6px rgba(215, 38, 30, .2); }
.timeline > li.is-hot::before { background: var(--red); }
.tl-when { font: 700 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.tl-title { font: 400 clamp(26px, 3.4vw, 36px)/1 var(--display); text-transform: uppercase; margin: 6px 0 10px; }
.tl-body { max-width: 72ch; color: var(--ink-2); margin: 0; }
.tl-body ul { margin: 8px 0 0; padding-left: 20px; }
.tl-body li { margin-bottom: 4px; }
.now-flag { display: inline-block; margin-left: 8px; background: var(--red); color: #fff; padding: 3px 6px; font: 700 10px/1 var(--mono); letter-spacing: .1em; vertical-align: 2px; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 0 32px; }
.checklist li { border-bottom: 1px solid rgba(23,20,15,.25); }
.checklist label { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 14px 0; cursor: pointer; }
.checklist input { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; border: 2px solid var(--ink); margin: 2px 0 0; background: var(--card); cursor: pointer; display: grid; place-items: center; }
.checklist input:checked { background: var(--red); border-color: var(--red); }
.checklist input:checked::after { content: "✓"; color: #fff; font: 700 15px/1 var(--mono); }
.checklist b { display: block; font-size: 16px; }
.checklist span { font-size: 15px; color: var(--ink-2); }
.checklist label:has(input:checked) b { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.progress { font: 400 13px/1 var(--mono); color: var(--muted); margin: 0 0 18px; }
.cost-table { width: 100%; border-collapse: collapse; border: 3px solid var(--ink); background: var(--card); font: 400 15px/1.4 var(--sans); }
.cost-table th, .cost-table td { padding: 12px 14px; border-bottom: 1.5px solid var(--ink); text-align: left; vertical-align: top; }
.cost-table th { font: 700 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--ink); color: var(--paper); }
.cost-table td:first-child { font-weight: 700; }
.cost-table .zh { font: 900 15px/1 var(--zh); color: var(--red); margin-left: 6px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.template { position: relative; background: #fff; border: 2px solid var(--ink); padding: 22px 24px; font: 400 15px/1.6 var(--mono); white-space: pre-wrap; box-shadow: var(--shadow); }
.template button { position: absolute; top: 12px; right: 12px; }
.callout { border: 3px solid var(--red); background: rgba(215, 38, 30, .06); padding: 18px 22px; font-size: 17px; margin: 28px 0 0; max-width: 880px; }
.callout b { color: var(--red); }

/* ── 404 ── */
.lost { min-height: 72vh; display: grid; place-items: center; text-align: center; padding: 60px var(--gutter); }
.lost h1 { font: 400 clamp(120px, 26vw, 300px)/.8 var(--display); color: var(--red); margin: 0; }
.lost p { font-size: 20px; max-width: 34ch; margin: 18px auto 28px; }

@media print {
  .ticker, .masthead nav, .tape, .hero__actions, .share, .toast { display: none !important; }
  body { background: #fff; }
}