@font-face {
  font-family:"Marteau";
  src:url("assets/font/Marteau-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face {
  font-family:"Marteau";
  src:url("assets/font/Marteau-SemiBold.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face {
  font-family:"Marteau";
  src:url("assets/font/Marteau-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face {
  font-family:"Marteau";
  src:url("assets/font/Marteau-Black.woff2") format("woff2");
  font-weight:900; font-style:normal; font-display:swap;
}

:root { --ink:#111; --paper:#fff; --rule:#d8d8d8; --muted:#666; --faint:#c4c4c4; --red:#F80000; }
* { box-sizing:border-box; }

/* Marteau: display type only — headings, wordmark, marquee, counter, buttons */
.mark, .sitetitle, .sitetitle-alt, h1, h2, .sign-button, .digit, .when, .occupation, #lang button {
  font-family:"Marteau",-apple-system,BlinkMacSystemFont,"Helvetica Neue","Noto Sans TC","PingFang TC","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
}
html { -webkit-text-size-adjust:100%; }

body {
  margin:0; padding:0 0 5rem;
  background:var(--paper); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Noto Sans TC","PingFang TC","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  font-size:16px; line-height:1.6;
}

/* language */
[data-lang="en"] .zh, [data-lang="en"] .ko,
[data-lang="zh"] .en, [data-lang="zh"] .ko,
[data-lang="ko"] .en, [data-lang="ko"] .zh { display:none; }

/* masthead */
.masthead {
  max-width:86rem; margin:0 auto; padding:1.6rem 2rem 1.2rem;
  display:grid; grid-template-columns:auto 1fr auto; align-items:end; gap:.5rem 1.5rem;
  border-bottom:1px solid var(--rule);
}
.sitetitle {
  grid-column:1; margin:0;
  font-size:clamp(2rem, 5.4vw, 4.4rem); font-weight:700; line-height:1.02;
  letter-spacing:-.02em;
}
.sitetitle span { display:block; }
.sitetitle .red { color:var(--red); }
.sitetitle-alt {
  grid-column:2; margin:0 0 .5rem;
  font-size:.8125rem; letter-spacing:.05em; color:var(--muted);
}
.sitetitle-alt i { font-style:normal; color:var(--rule); padding:0 .4em; }
.masthead #lang { grid-column:3; justify-self:end; align-self:start; }

/* top bar */
.topbar {
  max-width:86rem; margin:0 auto; padding:1.1rem 2rem;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  border-bottom:1px solid var(--ink);
}
.mark { font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; line-height:1.5; max-width:34rem; }
.mark i { font-style:normal; color:var(--muted); padding:0 .4em; }
#lang { display:flex; flex:0 0 auto; }
#lang button {
  padding:.25rem .55rem; margin-left:-1px; font:inherit; font-size:.75rem;
  color:var(--ink); background:var(--paper); border:1px solid var(--rule); cursor:pointer;
  white-space:nowrap;
}
#lang button[aria-current="true"] { background:var(--red); color:var(--paper); border-color:var(--red); }

/* full-width marquee under the header */
.marquee {
  overflow:hidden; border-bottom:1px solid var(--ink);
  padding:.62em 0; background:var(--paper);
}
.marquee-track {
  display:flex; width:max-content;
  animation:marquee 34s linear infinite;
}
.marquee-item {
  white-space:nowrap;
  font-size:clamp(1.75rem, 5.6vw, 4.6rem);
  font-weight:700; line-height:1.15; letter-spacing:-.01em; color:var(--faint);
}
@keyframes marquee { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) {
  .marquee { overflow-x:auto; }
  .marquee-track { animation:none; }
}

/* grid: C | B | A  /  D across */
.grid {
  display:grid; row-gap:1.75rem; column-gap:3rem;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  grid-template-areas:"a c";
  max-width:86rem; margin:0 auto; padding:2.5rem 2rem 0;
}
.zone-a { grid-area:a; }
.zone-b { grid-area:b; }
.zone-c { grid-area:c; }
.zone-d { padding-top:1.5rem; border-top:1px solid var(--ink); }


/* text */
h1 { font-size:1.5rem; line-height:1.3; font-weight:600; margin:0 0 1.25rem; }
.letter-title {
  font-size:1.5rem; line-height:1.3; font-weight:600; margin:0 0 1.25rem;
  letter-spacing:0; text-transform:none;
}
h2 { font-size:.8125rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin:0 0 1.25rem; }
p { margin:0 0 1rem; }
a { color:var(--red); text-underline-offset:.22em; text-decoration-thickness:.06em; }
.scramble { display:inline-block; font-variant-numeric:tabular-nums; cursor:default; }
.note { font-size:.8125rem; color:var(--muted); margin:.9rem 0 0; }
.more { font-size:.875rem; margin:1.5rem 0 0; }
.buttons { display:flex; flex-wrap:wrap; gap:.5rem; margin:0; }
.btn {
  display:inline-block; padding:.45rem .85rem; font-size:.8125rem;
  border:1px solid var(--ink); color:var(--ink); text-decoration:none; white-space:nowrap;
}
.btn:hover { background:var(--red); color:var(--paper); border-color:var(--red); }

/* campaign material */
.asset { display:block; }
.zone-c { display:flex; flex-direction:column; gap:1.5rem; align-items:flex-start; }
.poster { max-width:24rem; }
.poster .note { margin-top:.6rem; }

/* keep the letter readable on very wide screens */
.letter, .signers, .letter-title { max-width:52rem; }
.asset img { display:block; width:100%; height:auto; border:1px solid var(--rule); }
.asset:hover img { opacity:.88; }
.asset img { border-color:var(--rule); }

/* press page */
.press-head { margin-bottom:2.5rem; }
.press-head .standfirst { max-width:44rem; margin-bottom:.9rem; }
.press-head .more { margin-top:0; }

.press-group { margin-top:2.5rem; }
.press-group h2 {
  display:flex; align-items:baseline; gap:.6rem;
  padding-bottom:.5rem; margin-bottom:0; border-bottom:1px solid var(--ink);
}
.tally { color:var(--red); font-weight:400; letter-spacing:0; margin-left:auto; }
.head-lang {
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:.75rem; font-weight:400; letter-spacing:-.02em; text-transform:none; color:var(--muted);
}

.press-list { list-style:none; margin:0; padding:0; }
.press-list li {
  display:flex; align-items:baseline; justify-content:space-between; gap:.5rem 1.5rem;
  padding:.5rem 0; border-bottom:1px solid var(--rule);
  font-size:.9375rem;
}
.press-list a { text-decoration:none; }
.press-list a:hover { text-decoration:underline; }
.row-meta {
  flex:0 0 auto; display:flex; align-items:baseline; gap:.6rem;
  font-size:.75rem; color:var(--muted); white-space:nowrap;
}
.date { font-variant-numeric:tabular-nums; }
.tags { font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; letter-spacing:-.02em; }

@media (max-width:48rem) {
  .press-group { margin-top:2rem; }
  .press-list li { flex-wrap:wrap; gap:.15rem .75rem; padding:.45rem 0; }
  .press-list li a { flex:1 1 100%; }
  .row-meta { gap:.5rem; }
}


/* the letter */
.letter p { margin:0 0 1rem; }
.salutation { font-weight:600; }
.signed { margin-top:1.75rem; margin-bottom:.75rem; font-weight:600; }
.signers { list-style:none; margin:0 0 1.75rem; padding:0; font-size:.9375rem; line-height:1.9; }
.signers li { display:inline-block; margin:0; }
.signers li::after { content:"　/　"; color:var(--rule); }
.signers li:last-child::after { content:""; }

.sign-button {
  display:inline-block; margin-top:.75rem; padding:.7rem 1.3rem;
  background:var(--red); color:var(--paper); text-decoration:none; font-weight:600;
}
.sign-button:hover { background:var(--ink); }

/* --- the game --- */
.game { width:100%; max-width:42rem; }
.board {
  position:relative; width:100%; aspect-ratio:4/5;
  border:1px solid var(--ink); background:var(--paper);
  overflow:hidden; touch-action:none; user-select:none; --u:4px;
}
.bricks {
  position:absolute; inset:0; display:flex; flex-direction:column;
  gap:calc(var(--u) * .25);
  padding:calc(var(--u) * 3.5) 0 0;
}
.brick-row { display:flex; gap:calc(var(--u) * .25); }
.brick {
  flex:1 1 auto; min-width:0;
  display:flex; align-items:center; justify-content:center;
  height:calc(var(--u) * 7.6); padding:calc(var(--u) * .7) calc(var(--u) * .5) 0;
  font-family:"Marteau",sans-serif; font-weight:900;
  font-size:calc(var(--u) * 5.6); line-height:1;
  border:1px solid currentColor; border-radius:calc(var(--u) * .6);
  white-space:nowrap; overflow:hidden;
  opacity:0; transition:opacity .45s ease;
}
.bricks.on .brick { opacity:1; }
.brick.dead { visibility:hidden; transition:none; }

.ball, .paddle { position:absolute; top:0; left:0; will-change:transform; }
.ball { border-radius:50%; background:var(--red); }
.paddle { background:var(--ink); border-radius:calc(var(--u) * .5); }
.board:not(.playing) .ball, .board:not(.playing) .paddle { opacity:0; }

.sparks { position:absolute; inset:0; pointer-events:none; }
.spark {
  position:absolute; width:calc(var(--u) * .9); height:calc(var(--u) * .9);
  margin:calc(var(--u) * -.45) 0 0 calc(var(--u) * -.45);
  border-radius:50%; animation:spark .5s ease-out forwards;
}
@keyframes spark { to { transform:translate(var(--dx),var(--dy)) scale(.2); opacity:0; } }

.overlay {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:1rem; background:rgba(255,255,255,.6);
}
.overlay[hidden] { display:none; }
.game-start {
  padding:.85rem 1.4rem; font:inherit; font-size:1rem; font-weight:600; line-height:1.3;
  background:var(--ink); color:var(--paper); border:0; cursor:pointer; text-align:center;
}
.game-start:hover { background:var(--red); }

.hint {
  position:absolute; left:0; right:0; bottom:calc(var(--u) * 7);
  margin:0; text-align:center; font-size:.75rem; color:var(--muted);
}
.hint[hidden] { display:none; }

.game-msg { flex:1 1 100%; font-size:.875rem; color:var(--muted); margin:0; max-width:32rem; }

@media (prefers-reduced-motion:reduce) { .spark { display:none; } }

/* B — signature count, full-width band */
.wrap { max-width:86rem; margin:0 auto; padding:0 2rem; }
.count-band {
  margin:2.5rem 0; padding:2.5rem 1.5rem 2rem;
  background:var(--red); color:var(--paper);
  display:flex; flex-direction:column; align-items:center;
}
.count-band .flap { display:flex; gap:.55rem; }
.count-band .digit {
  width:clamp(3rem, 7vw, 5rem); height:clamp(4rem, 9.2vw, 6.6rem);
  font-size:clamp(2.4rem, 5.6vw, 4rem); line-height:clamp(4rem, 9.2vw, 6.6rem);
  border-radius:.35rem;
}
.count-band .flap-label {
  display:flex; align-items:center; gap:1rem; margin:1.1rem 0 0;
  color:var(--paper); font-size:.9375rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
}
.count-band .flap-label::before, .count-band .flap-label::after {
  content:""; width:4rem; height:1px; background:rgba(255,255,255,.65);
}
@media (max-width:48rem) {
  .wrap { padding:0 1.25rem; }
  .count-band { margin:2rem 0; padding:2rem 1rem 1.5rem; }
  .count-band .flap-label::before, .count-band .flap-label::after { width:2rem; }
}

/* B — split-flap counter, horizontal */
.flap { display:flex; gap:.35rem; }
.digit {
  position:relative; width:3rem; height:4rem;
  background:var(--ink); color:var(--paper);
  font-size:2.4rem; line-height:4rem; text-align:center;
  font-variant-numeric:tabular-nums; font-weight:600;
  border-radius:.2rem; overflow:hidden;
}
.digit::after {
  content:""; position:absolute; left:0; right:0; top:50%;
  border-top:2px solid var(--paper); opacity:.35;
}
.digit.flip { animation:flip .45s ease-out; }
@keyframes flip {
  0%   { transform:rotateX(-90deg); opacity:.3; }
  100% { transform:rotateX(0);      opacity:1; }
}
.flap-label { font-size:.75rem; color:var(--muted); margin:.6rem 0 0; text-align:center; }

/* C — timeline */
.timeline { list-style:none; margin:0; padding:0; }
.timeline li { display:flex; gap:1rem; padding:.6rem 0; border-top:1px solid var(--rule); font-size:.9375rem; }
.timeline li:last-child { border-bottom:1px solid var(--rule); }
.when { flex:0 0 5.5rem; color:var(--muted); font-size:.8125rem; font-variant-numeric:tabular-nums; padding-top:.15rem; }

/* D — signatories */
.count { color:var(--red); font-weight:400; letter-spacing:0; }
#list { list-style:none; margin:0; padding:0; columns:2; column-gap:2.5rem; }
@media (min-width:90rem) { #list { columns:3; } }
@media (min-width:130rem) { #list { columns:4; } }
#list li {
  break-inside:avoid; padding:.5rem 0; border-bottom:1px solid var(--rule);
  display:flex; flex-wrap:wrap; gap:.2rem 1rem; justify-content:space-between;
}
.name { font-weight:600; }
.latin { color:var(--muted); font-weight:400; }
.occupation { color:var(--muted); font-size:.75rem; font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace !important; letter-spacing:-.01em; text-align:right; }
.status { color:var(--muted); font-size:.875rem; }
.status:empty { display:none; }

/* footer */
.site-footer {
  max-width:86rem; margin:4rem auto 0; padding:1.25rem 2rem 0;
  border-top:1px solid var(--ink);
  display:flex; flex-wrap:wrap; gap:.4rem 2rem; justify-content:center; text-align:center;
  font-size:.8125rem; color:var(--muted);
}
.site-footer p { margin:0; }
.contact a { margin-left:.5em; overflow-wrap:anywhere; }
@media (max-width:48rem) { .site-footer { padding:1.25rem 1.25rem 0; margin-top:3rem; } }

/* info.html */
.page { max-width:86rem; margin:0 auto; padding:2.5rem 2rem 0; }
@media (max-width:48rem) { .page { padding:2rem 1.25rem 0; } .site-footer { padding:1.25rem 1.25rem 0; } }
.standfirst { margin:0 0 2.5rem; color:var(--muted); }
section + section { margin-top:3rem; }
.names { color:var(--muted); }
.sources { list-style:none; margin:0; padding:0; font-size:.875rem; }
.sources li { padding:.3rem 0; }

/* mobile: A → B → C → D */
@media (max-width:48rem) {
  body { padding:0 0 3.5rem; }
  .topbar { flex-direction:column; align-items:flex-start; gap:.7rem; padding:1rem 1.25rem; }
  .masthead { padding:1.2rem 1.25rem 1rem; grid-template-columns:1fr auto; align-items:start; }
  .sitetitle { grid-column:1 / -1; }
  .sitetitle-alt { grid-column:1; margin:.4rem 0 0; align-self:center; }
  .masthead #lang { grid-column:2; grid-row:2; }
  .mark { font-size:.6875rem; }
  .grid {
    grid-template-columns:1fr;
    grid-template-areas:"a" "c";
    row-gap:1.75rem; padding:1.75rem 1.25rem 0;
  }

  .digit { width:2.1rem; height:2.9rem; font-size:1.7rem; line-height:2.9rem; }
  .flap { gap:.25rem; }
  h1 { font-size:1.3rem; }
  .timeline li { flex-direction:column; gap:.1rem; }
  .when { flex:none; }
}