@font-face {
  font-family:"Five Year Quiz Sans";
  src:url("./fonts/five-year-quiz-sans.woff2") format("woff2");
  font-style:normal;
  font-weight:250 900;
  font-display:swap;
}
:root {
  color-scheme:light;
  --red:#b9342e; --deep:#842b27; --gold:#d6a64c; --paper:#fffaf0; --cream:#fff4df;
  --ink:#522f28; --soft:#896657; --line:#e9d5af;
  --font:"Five Year Quiz Sans",sans-serif;
}
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; min-height:100vh; font-family:var(--font); color:var(--ink); background:radial-gradient(circle at 2px 2px,#d6a64c19 1px,transparent 1.7px) 0 0/24px 24px,linear-gradient(150deg,#fff9ed,#fff0d8); }
button { font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:disabled { cursor:default; }
button:focus-visible,summary:focus-visible { outline:3px solid var(--deep); outline-offset:5px; }
[hidden] { display:none!important; }
h1,h2,h3,p { margin:0; }
.page { max-width:1120px; padding:24px 36px 0; margin:0 auto; }
.masthead { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-bottom:22px; border-bottom:1px solid #d6a64c55; }
.campaign { font-size:12px; font-weight:650; color:var(--deep); border:1px solid #b9342e55; padding:7px 11px; border-radius:4px; letter-spacing:1px; }
.edition { color:var(--soft); font-size:12px; letter-spacing:1px; }
.view { animation:arrive .3s ease-out both; }
@keyframes arrive { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.intro { display:grid; grid-template-columns:1fr 1.13fr; column-gap:20px; row-gap:25px; align-items:center; padding-top:38px; }
.kicker { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--soft); letter-spacing:1.3px; }
.kicker-line { width:25px; height:2px; background:var(--gold); }
.intro-title { font-size:clamp(58px,6.3vw,82px); line-height:1.12; font-weight:900; color:var(--red); letter-spacing:1px; margin:21px 0 34px; text-shadow:0 5px 0 #efc6a3; }
.intro-title span { color:var(--deep); }
.intro-title small { display:block; font-size:22px; line-height:1.5; letter-spacing:2px; margin-bottom:10px; color:var(--deep); text-shadow:none; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:25px; min-height:53px; border-radius:999px; padding:13px 27px; font-size:16px; font-weight:750; text-decoration:none; transition:transform .15s,box-shadow .15s; }
.button-primary { background:var(--red); color:#fffaf0; border:1px solid var(--red); box-shadow:0 5px 0 var(--deep); }
.button-primary:active { transform:translateY(3px); box-shadow:0 2px 0 var(--deep); }
.button-primary span { font-size:24px; font-weight:400; line-height:1; }
.button-secondary { background:transparent; color:var(--deep); border:1px solid #b9342e66; }
.intro-note { font-size:11px; color:var(--soft); line-height:1.8; margin-top:16px; }
.intro-art { position:relative; min-width:0; align-self:stretch; display:flex; align-items:center; }
.intro-art::before { content:""; position:absolute; width:90%; aspect-ratio:1; top:0; right:0; border-radius:50%; border:1px solid #d6a64c40; background:radial-gradient(ellipse,#f7d89c55,transparent 67%); z-index:-1; }
.intro-art img { width:108%; max-width:none; margin-left:-4%; height:auto; display:block; }
.art-caption { position:absolute; top:7px; right:0; color:var(--soft); font-size:12px; display:grid; gap:4px; text-align:right; }
.art-caption strong { font-family:var(--font); font-size:21px; color:var(--deep); font-weight:600; }
.round-stamp { position:absolute; right:1%; bottom:0; width:68px; height:68px; border:2px solid var(--red); border-radius:50%; padding-top:11px; text-align:center; line-height:1.4; font-size:16px; color:var(--red); font-family:var(--font); transform:rotate(12deg); opacity:.8; outline:1px solid #b9342e55; outline-offset:-7px; }
.years-block { grid-column:1/-1; margin-top:12px; }
.years-caption { display:flex; justify-content:space-between; gap:8px; font-size:11px; color:var(--soft); letter-spacing:.5px; margin-bottom:13px; }
.years { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.years li { display:grid; place-items:center; gap:14px; min-height:118px; padding:20px 8px 16px; background:var(--paper); border:1px solid var(--line); border-radius:8px; box-shadow:0 4px 0 #d6a64c22; position:relative; }
.years li::before { content:""; position:absolute; top:-1px; left:-1px; right:-1px; height:6px; border-radius:8px 8px 0 0; background:var(--red); }
.year { font-family:var(--font); font-size:15px; letter-spacing:2px; color:var(--soft); }
.year-word { border:1.5px solid #b9342e88; padding:4px 9px; transform:rotate(-9deg); border-radius:3px; color:var(--red); font-size:17px; font-weight:650; font-family:var(--font); }
.years .year-now { background:var(--deep); border-color:var(--deep); }
.year-now::before { background:var(--gold)!important; }
.year-now .year { color:#ffe6b8; }
.year-now .year-word { color:#f8d38c; border-color:#f8d38c; }
.intro-foot { grid-column:1/-1; color:var(--soft); font-size:12px; line-height:1.8; text-align:center; padding:5px 0 10px; }
.mobile-break { display:none; }
.footer { margin-top:24px; padding:17px 0 22px; display:flex; justify-content:space-between; gap:12px; border-top:1px solid #d6a64c55; font-size:10px; letter-spacing:1px; color:var(--soft); }
.quiz { max-width:740px; margin:38px auto 20px; }
.quiz-header { display:flex; justify-content:space-between; font-size:12px; font-weight:600; color:var(--deep); margin-bottom:12px; letter-spacing:1px; }
.progress { border-radius:6px; height:7px; background:#e8cf9f; padding:1px; margin-bottom:30px; }
.progress span { display:block; height:100%; border-radius:5px; background:linear-gradient(90deg,var(--gold),var(--red)); transition:width .2s; }
.ticket { background:var(--paper); border:1px solid #ecd6b4; border-radius:5px 5px 18px 18px; box-shadow:0 8px 0 #d6a64c14,0 16px 40px #842b2710; padding:30px; position:relative; }
.ticket::before { content:""; position:absolute; top:-8px; left:-1px; right:-1px; height:9px; background:radial-gradient(circle at 8px 0,transparent 5px,var(--paper) 5.7px) 0 0/16px 9px repeat-x; }
.ticket-top { display:flex; justify-content:space-between; font-family:var(--font); color:var(--red); font-size:11px; letter-spacing:1.5px; }
.ticket-dots { color:var(--gold); letter-spacing:3px; font-size:7px; }
.question-title { font-size:26px; line-height:1.55; font-weight:750; margin:18px 0 24px; outline:none; }
.options { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.option { display:flex; width:100%; gap:12px; min-height:100px; align-items:flex-start; border:1.5px solid var(--line); border-radius:12px; background:#fff5e6; text-align:left; font-size:14px; line-height:1.65; padding:16px 13px; transition:background .15s,border-color .15s; }
@media (hover:hover) and (pointer:fine) {
  .option:hover { background:#fffdf7; border-color:#cc9c60; }
}
.option.is-selected { background:#fce7d3; border-color:var(--red); box-shadow:inset 0 0 0 1px var(--red); }
.option-key { flex:none; width:27px; height:27px; border-radius:50%; background:var(--red); color:#fffaf0; display:grid; place-items:center; font-size:13px; font-weight:750; line-height:1; margin-top:1px; }
.ticket-bottom { border-top:1px dashed var(--line); display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:23px; padding-top:12px; color:var(--soft); font-size:11px; }
.text-button { padding:8px 0; background:none; border:0; font-size:12px; font-weight:600; color:var(--deep); }
.quiz-foot { text-align:center; font-size:11px; line-height:1.8; color:var(--soft); margin-top:26px; }
.result { margin-top:32px; }
.result-top { margin-bottom:23px; }
.result-top h2 { color:var(--deep); font-size:31px; margin-top:9px; font-weight:800; outline:none; }
.result-layout { display:grid; grid-template-columns:minmax(300px,420px) 1fr; gap:60px; align-items:center; }
.poster-figure { margin:0; text-align:center; }
.poster-image { width:100%; height:auto; display:block; border-radius:8px; box-shadow:0 14px 35px #842b2725; -webkit-touch-callout:default; }
.poster-figure figcaption { font-size:12px; font-weight:650; color:var(--deep); margin-top:15px; line-height:1.8; }
.result-copy { max-width:440px; padding:24px 0; }
.result-message { font-size:14px; line-height:1.9; color:var(--soft); margin:24px 0; }
.result-copy .button { width:100%; margin-top:12px; }
.result-copy .button-secondary { margin-top:18px; }
.result-foot { font-size:11px; color:var(--soft); line-height:1.8; text-align:center; margin-top:20px; }
.image-error { padding:24px; border:1px solid var(--line); border-radius:8px; background:var(--paper); font-size:13px; line-height:1.8; }
.noscript-note { padding:25px; font-size:14px; }
dialog { width:min(400px,calc(100vw - 28px)); max-height:94dvh; max-height:94vh; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--ink); }
dialog::backdrop { background:#311914b8; }
.dialog-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; font-size:13px; color:var(--deep); }
.close-button { background:none; border:0; padding:0 4px; font-size:24px; color:var(--deep); }
#full-poster { display:block; width:100%; height:auto; -webkit-touch-callout:default; }
.dialog-hint { font-size:11px; color:var(--soft); text-align:center; line-height:1.8; margin-top:12px; }
@media(min-width:1200px) { .intro { padding-top:46px; } }
@media(max-width:759px) {
  .page { padding:17px 20px 0; }
  .masthead { padding-bottom:16px; gap:8px; }
  .campaign { font-size:10px; padding:6px 8px; letter-spacing:0; }
  .edition { font-size:9px; letter-spacing:0; }
  .intro { grid-template-columns:1fr; row-gap:20px; padding-top:27px; }
  .kicker { font-size:10px; letter-spacing:.8px; }
  .intro-title { font-size:clamp(50px,15.5vw,70px); margin:17px 0 28px; line-height:1.1; }
  .intro-title small { font-size:19px; letter-spacing:1px; margin-bottom:9px; }
  .intro-note { font-size:10px; margin-top:13px; }
  .intro-art { min-height:230px; margin-top:11px; }
  .intro-art img { width:100%; margin-left:0; }
  .intro-art::before { top:-14px; width:75%; }
  .art-caption { top:-6px; font-size:9px; right:5px; }
  .art-caption strong { font-size:16px; }
  .round-stamp { width:49px; height:49px; font-size:12px; padding-top:7px; bottom:-5px; right:2px; }
  .years-block { margin-top:14px; }
  .years-caption { font-size:9px; margin-bottom:11px; }
  .years { gap:9px; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .years li { min-height:89px; gap:10px; padding:15px 8px 12px; }
  .year { font-size:12px; }
  .year-word { font-size:14px; padding:3px 7px; }
  .intro-foot { font-size:11px; padding:2px 0 0; }
  .mobile-break { display:block; }
  .footer { margin-top:24px; padding:15px 0 18px; font-size:9px; letter-spacing:0; }
  .quiz { margin:27px auto 18px; }
  .quiz-header { font-size:11px; }
  .ticket { padding:24px 18px 18px; }
  .question-title { font-size:22px; line-height:1.5; margin:16px 0 20px; }
  .options { grid-template-columns:1fr; gap:11px; }
  .option { min-height:66px; font-size:13px; padding:13px 12px; gap:10px; }
  .option-key { width:25px; height:25px; font-size:12px; }
  .ticket-bottom { font-size:10px; margin-top:20px; }
  .result { margin-top:27px; }
  .result-top { margin-bottom:20px; }
  .result-top h2 { font-size:26px; }
  .result-layout { grid-template-columns:1fr; gap:16px; }
  .poster-figure { max-width:430px; width:100%; margin:0 auto; }
  .result-copy { width:100%; max-width:430px; margin:auto; padding:10px 2px 0; }
  .result-message { font-size:13px; margin:18px 0 12px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }