/* New Year's Eve 2026, card 886.
   A countdown board: midnight ink, champagne gold split flap tiles, confetti dots. The board
   rows are real parks with their Dec 31 hours, the ribbon is the 2025 night by the clock, and
   the week grid is real crowd scores. Light mode is the board under the lobby lights. */

.nye {
    --paper: #f6f2ea;
    --paper2: #ece5d6;
    --card: #fffdf8;
    --ink: #17141f;
    --ink2: #57506a;
    --night: #1a1530;
    --gold: #a77b1c;
    --gold2: #f2d58a;
    --pink: #b3245a;
    --rule: color-mix(in srgb, var(--ink) 20%, transparent);
    --t-quiet: #c4e5d2;
    --t-moderate: #f3e1a0;
    --t-busy: #f3bc95;
    --t-packed: #e894a4;
    --t-ink: #17141f;
    --radius: 14px;
    --display: var(--font-display, "Bricolage Grotesque", system-ui, sans-serif);
    --body: var(--font-text, "Hanken Grotesk", system-ui, sans-serif);
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.55;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .nye {
        --paper: #100d1c; --paper2: #0b0915; --card: #1b1730; --ink: #f2ecdf; --ink2: #bdb4cc;
        --night: #241d42; --gold: #f2d58a; --gold2: #8a6a22; --pink: #ff8fb4;
        --t-quiet: #1d4a38; --t-moderate: #4b4219; --t-busy: #5a3422; --t-packed: #5c2132; --t-ink: #f2ecdf;
    }
}
:root[data-theme="dark"] .nye {
    --paper: #100d1c; --paper2: #0b0915; --card: #1b1730; --ink: #f2ecdf; --ink2: #bdb4cc;
    --night: #241d42; --gold: #f2d58a; --gold2: #8a6a22; --pink: #ff8fb4;
    --t-quiet: #1d4a38; --t-moderate: #4b4219; --t-busy: #5a3422; --t-packed: #5c2132; --t-ink: #f2ecdf;
}

.nye *, .nye *::before, .nye *::after { box-sizing: border-box; }
.nye-wrap { max-width: 1160px; margin-inline: auto; padding-inline: 16px; }
.nye h1, .nye h2, .nye h3 { font-family: var(--display); letter-spacing: -.02em; }
.nye h3 { line-height: 1.15; }
.nye :where(a) { color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.nye :where(a):focus-visible, .nye summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--gold2); border-radius: 8px; }

/* Hero, the night sky with confetti */
.nye-hero { padding: 40px 0 18px; background:
    radial-gradient(circle at 12% 20%, var(--gold2) 0 3px, transparent 4px),
    radial-gradient(circle at 34% 8%, var(--pink) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 58% 26%, var(--gold) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 12%, var(--pink) 0 3px, transparent 4px),
    radial-gradient(circle at 92% 40%, var(--gold2) 0 2px, transparent 3px),
    linear-gradient(180deg, var(--paper2), var(--paper)); border-bottom: 2px solid var(--rule); }
.nye-hero-in { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 36px; align-items: center; }
.nye-kick { display: inline-block; margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pink); }
.nye h1 { font-size: clamp(42px, 6.4vw, 82px); line-height: .95; margin: 14px 0 18px; color: var(--ink); font-weight: 800; }
.nye h1 span { display: block; color: var(--ink2); font-size: .38em; letter-spacing: -.01em; margin-top: 12px; line-height: 1.15; font-weight: 600; }
.nye-answer { margin: 0; font-size: 18.5px; max-width: 660px; background: var(--card); border: 2px solid var(--ink); border-radius: var(--radius); padding: 18px 20px; box-shadow: 6px 6px 0 var(--gold2); }
.nye-by { margin: 16px 0 0; font-size: 14.5px; color: var(--ink2); }

.nye-photo { margin: 0; }
.nye-frame { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 4; border: 3px solid var(--ink); background: #1a1530; }
.nye-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
.nye-count { position: absolute; left: 12px; bottom: 12px; background: #17141f; color: #f2d58a; border-radius: 10px; padding: 8px 12px; display: grid; justify-items: center; border: 2px solid #f2d58a; }
.nye-count b { font-family: var(--display); font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.nye-count small { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.nye-photo figcaption { font-size: 13px; color: var(--ink2); margin-top: 8px; }
.nye-photo figcaption a { color: inherit; }

.nye-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; padding-bottom: 8px; }
.nye-tabs a { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14.5px; padding: 7px 13px; border: 2px solid var(--ink); border-radius: 999px; background: var(--card); }
.nye-tabs a:hover { background: var(--ink); color: var(--paper); }

/* Sections */
.nye-sec { padding: 60px 0; }
.nye-alt { background: var(--paper2); }
.nye h2 { font-size: clamp(29px, 4vw, 44px); color: var(--ink); margin: 0 0 10px; line-height: 1.06; font-weight: 800; max-width: 920px; }
.nye-lede { max-width: 760px; margin: 0 0 24px; font-size: 18px; color: var(--ink2); }
.nye-src { font-size: 15px; color: var(--ink2); max-width: 900px; margin: 18px 0 0; }

/* The countdown board */
.nye-board { background: #17141f; color: #f2ecdf; border-radius: 16px; padding: 6px; border: 3px solid var(--gold); overflow: hidden; }
.nye-board table { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-variant-numeric: tabular-nums; }
.nye-board caption { caption-side: top; text-align: left; padding: 10px 12px; font-family: var(--display); font-weight: 700; color: #f2d58a; letter-spacing: .04em; text-transform: uppercase; font-size: 14px; }
.nye-board thead th { text-align: left; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #bdb4cc; padding: 4px 12px; }
.nye-board tbody th, .nye-board td { padding: 10px 12px; background: #221d35; vertical-align: middle; }
.nye-board tbody tr > :first-child { border-radius: 8px 0 0 8px; }
.nye-board tbody tr > :last-child { border-radius: 0 8px 8px 0; }
.nye-board tbody th { text-align: left; font-family: var(--display); font-size: 17px; }
.nye-board tbody th a { color: #f2ecdf; text-decoration: none; }
.nye-board tbody th a:hover { text-decoration: underline; }
.nye-board tr.nye-resort th { background: transparent; color: #f2d58a; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; padding: 14px 12px 2px; font-family: var(--body); font-weight: 800; border-radius: 0; }
.nye-board tr.is-midnight th::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff8fb4; margin-left: 8px; vertical-align: middle; box-shadow: 0 0 8px #ff8fb4; }
.nye-board td { font-size: 15px; color: #d9d2e6; }
.nye-flap { display: inline-block; font-family: var(--display); font-weight: 800; font-size: 17px; color: #f2d58a; background: linear-gradient(180deg, #2e2747 0 49%, #1a1530 51%); border-radius: 5px; padding: 4px 9px; border: 1px solid #3d3560; white-space: nowrap; }
.nye-flap.is-tba { color: #bdb4cc; font-weight: 600; font-size: 15px; }
.nye-score { display: inline-grid; place-content: center; width: 40px; height: 36px; border-radius: 8px; font-family: var(--display); font-size: 19px; color: #17141f; background: #4a4462; }
.nye-score.quiet { background: #c4e5d2; }
.nye-score.moderate { background: #f3e1a0; }
.nye-score.busy { background: #f3bc95; }
.nye-score.packed { background: #e894a4; }

/* The night ribbon */
.nye-ribbon { list-style: none; margin: 0; padding: 0; position: relative; max-width: 820px; }
.nye-ribbon::before { content: ""; position: absolute; left: 92px; top: 6px; bottom: 6px; width: 4px; border-radius: 2px; background: linear-gradient(180deg, var(--gold2), var(--gold) 78%, var(--pink) 80%, var(--ink2)); }
.nye-ribbon li { display: grid; grid-template-columns: 80px 1fr; column-gap: 34px; padding: 8px 0; position: relative; }
.nye-ribbon li::before { content: ""; position: absolute; left: 86px; top: 14px; width: 16px; height: 16px; border-radius: 50%; background: var(--card); border: 3px solid var(--gold); }
.nye-ribbon time { text-align: right; font-weight: 800; font-family: var(--display); font-variant-numeric: tabular-nums; grid-row: span 2; padding-top: 2px; }
.nye-ribbon b { display: block; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--pink); }
.nye-ribbon span { display: block; }
.nye-ribbon li.is-midnight { padding: 14px 0; }
.nye-ribbon li.is-midnight::before { width: 26px; height: 26px; left: 81px; top: 16px; background: var(--pink); border-color: var(--gold2); box-shadow: 0 0 0 5px color-mix(in srgb, var(--pink) 25%, transparent); }
.nye-ribbon li.is-midnight time, .nye-ribbon li.is-midnight span { font-size: 24px; font-family: var(--display); font-weight: 800; }
.nye-ribbon li.is-after { opacity: .75; }
@media (prefers-reduced-motion: no-preference) {
    .nye-ribbon li.is-midnight::before { animation: nye-pop 2.4s ease-in-out infinite; }
}
@keyframes nye-pop { 0%, 100% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--pink) 25%, transparent); } 50% { box-shadow: 0 0 0 11px color-mix(in srgb, var(--pink) 8%, transparent); } }

/* The week grid */
.nye-week { overflow-x: auto; background: var(--card); border: 2px solid var(--ink); border-radius: var(--radius); }
.nye-week table { width: 100%; min-width: 640px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.nye-week caption { caption-side: top; text-align: left; padding: 10px 14px; font-family: var(--display); font-weight: 700; border-bottom: 2px solid var(--ink); }
.nye-week th, .nye-week td { padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--rule); }
.nye-week thead th { font-size: 13px; font-weight: 700; line-height: 1.2; }
.nye-week thead th small { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.nye-week tbody th { text-align: left; font-weight: 700; padding-left: 14px; white-space: nowrap; position: sticky; left: 0; background: var(--card); }
.nye-week td { font-family: var(--display); font-weight: 800; font-size: 17px; color: var(--t-ink); }
.nye-week td.quiet { background: var(--t-quiet); }
.nye-week td.moderate { background: var(--t-moderate); }
.nye-week td.busy { background: var(--t-busy); }
.nye-week td.packed { background: var(--t-packed); }
.nye-week .is-eve { box-shadow: inset 2px 0 0 var(--pink), inset -2px 0 0 var(--pink); }
.nye-week thead th.is-eve { color: var(--pink); }

/* Capacity log */
.nye-log { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; max-width: 820px; }
.nye-log li { display: grid; grid-template-columns: 130px 1fr; column-gap: 16px; background: var(--card); border: 2px solid var(--ink); border-left: 10px solid var(--pink); border-radius: 8px var(--radius) var(--radius) 8px; padding: 12px 16px; }
.nye-log time { font-weight: 800; font-family: var(--display); grid-row: span 2; }
.nye-log b { font-family: var(--display); font-size: 19px; }
.nye-log span { color: var(--ink2); }

/* Parties, as admission tickets */
.nye-tickets { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.nye-tickets li { display: grid; background: var(--card); border: 2px solid var(--ink); border-radius: var(--radius); padding: 14px 18px 14px 26px; position: relative; background-image: radial-gradient(circle at 0 50%, var(--paper) 0 10px, transparent 11px); }
.nye-tickets small { font-size: 13px; color: var(--ink2); font-weight: 700; letter-spacing: .04em; }
.nye-tickets b { font-family: var(--display); font-size: 26px; color: var(--gold); }
.nye-tickets span { font-size: 15px; color: var(--ink2); }

/* FAQ */
.nye-faq { display: grid; gap: 10px; max-width: 900px; }
.nye-faq details { background: var(--card); border: 2px solid var(--ink); border-radius: 10px; padding: 4px 18px; }
.nye-faq summary { cursor: pointer; list-style: none; padding: 10px 0; }
.nye-faq summary::-webkit-details-marker { display: none; }
.nye-faq summary h3 { display: inline; margin: 0; font-size: 18.5px; }
.nye-faq summary::after { content: "+"; float: right; font-weight: 800; font-size: 22px; line-height: 1; color: var(--pink); }
.nye-faq details[open] summary::after { content: "\2212"; }
.nye-faq p { margin: 0 0 14px; }

/* Plan links */
.nye-plan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.nye-plan a { display: grid; gap: 2px; padding: 14px 16px; background: var(--card); border: 2px solid var(--ink); border-radius: 10px; text-decoration: none; color: var(--ink); }
.nye-plan a b { line-height: 1.2; }
.nye-plan a span { font-size: 14px; color: var(--ink2); }
.nye-plan a:hover { border-color: var(--pink); }

@media (max-width: 960px) {
    .nye-hero-in { grid-template-columns: 1fr; }
    .nye-photo { max-width: 340px; }
    .nye-plan { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    .nye { font-size: 16.5px; }
    .nye-sec { padding: 44px 0; }
    .nye-photo { max-width: none; }
    .nye-frame { aspect-ratio: 4 / 3; }
    .nye-board thead { display: none; }
    .nye-board table, .nye-board caption, .nye-board tbody, .nye-board tr, .nye-board th, .nye-board td { display: block; width: auto; }
    .nye-board table { border-spacing: 0; }
    .nye-board tbody tr:not(.nye-resort) { display: grid; grid-template-columns: 1fr auto; gap: 0; background: #221d35; border-radius: 8px; margin: 6px 4px; padding: 10px 12px; }
    .nye-board tbody tr > * { border-radius: 0 !important; padding: 2px 0; background: transparent; }
    .nye-board tbody th { grid-column: 1; }
    .nye-board td[data-label="Crowd"] { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
    .nye-board td[data-label="Dec 31, 2026"] { grid-column: 1; padding: 4px 0; }
    .nye-board td[data-label="Dec 31, 2025"], .nye-board td[data-label="At midnight in 2025"] { grid-column: 1 / -1; font-size: 14px; }
    .nye-board td[data-label="Dec 31, 2025"]::before { content: "2025 "; color: #f2d58a; font-weight: 700; }
    .nye-board td[data-label="At midnight in 2025"]::before { content: "Midnight "; color: #f2d58a; font-weight: 700; }
    .nye-ribbon::before { left: 82px; }
    .nye-ribbon li { grid-template-columns: 72px 1fr; column-gap: 30px; }
    .nye-ribbon li::before { left: 76px; }
    .nye-ribbon li.is-midnight::before { left: 71px; }
    .nye-ribbon time { font-size: 14.5px; white-space: nowrap; }
    .nye-ribbon li.is-midnight time { font-size: 15px; }
    .nye-log li { grid-template-columns: 1fr; }
    .nye-log time { grid-row: auto; color: var(--pink); }
    .nye-tickets { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
    .nye-plan { grid-template-columns: 1fr; }
}