/* Fit for Fall public board. Single dark look by choice: the poster's charcoal
   and gold foil carried into the page. Layout: the poster on top, dissolving
   into the board; a gold week ribbon; two stacked standings lists. */
:root {
  --ink: #1A1A19; --ink-2: #222221; --ink-3: #2B2B29; --line: #3A3730;
  --cream: #F3EBDD; --mute: #A89F8F; --dim: #6E675B;
  --gold: #C9A96A; --gold-hi: #F3E4BC; --gold-deep: #8E6F3A; --copper: #B5622F; --copper-hi: #E09A5A; --silver: #C9C6BE;
  --font-display: "Anton", "Arial Narrow", Impact, sans-serif;
  --font-serif: "Marcellus", Georgia, serif;
  --font-body: "Martel Sans", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--cream); font-family: var(--font-body); font-size: 17px; line-height: 1.5; overflow-x: hidden; }
a { color: var(--gold); }
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .9; }
.wrap { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; padding-block: 0 56px; padding-inline: 16px; }

/* Poster */
.poster { position: relative; margin: 0 -16px; aspect-ratio: 16 / 9; max-height: 560px; overflow: hidden; background: #111; }
.poster img { width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: 50% 40%; animation: drift 24s ease-in-out infinite alternate; }
.poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,26,25,0) 55%, rgba(26,26,25,.75) 85%, var(--ink) 100%); }
@keyframes drift { from { transform: scale(1.02) translateY(0); } to { transform: scale(1.09) translateY(-1.5%); } }

/* Week ribbon */
.ribbon { position: relative; margin-top: -34px; text-align: center; animation: rise .9s cubic-bezier(.2,.8,.2,1) both; }
.ribbon .eyebrow { margin: 0; font-family: var(--font-serif); font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.ribbon .week { margin: 2px 0 0; font-family: var(--font-display); font-size: clamp(40px, 11vw, 56px); line-height: 1; letter-spacing: .02em; background: linear-gradient(100deg, var(--gold-deep) 0%, var(--gold) 30%, var(--gold-hi) 50%, var(--gold) 70%, var(--gold-deep) 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear infinite; }
.ribbon .dates { margin: 4px 0 0; color: var(--mute); font-size: 15px; }
.ticks { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; margin: 14px auto 0; max-width: 360px; }
.ticks i { height: 5px; border-radius: 3px; background: var(--ink-3); transform-origin: left; }
.ticks i.done { background: linear-gradient(90deg, var(--gold-deep), var(--gold)); animation: fill .6s ease both; }
.ticks i.now { background: var(--gold-hi); box-shadow: 0 0 10px rgba(243,228,188,.7); animation: fill .6s ease both, pulse 2.4s ease-in-out infinite; }
@keyframes shimmer { from { background-position: 0% 0; } to { background-position: 220% 0; } }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 8px rgba(243,228,188,.5); } 50% { box-shadow: 0 0 16px rgba(243,228,188,.95); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Tabs */
.tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin: 26px 0 18px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--ink-2); }
.tabs .slide { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: linear-gradient(135deg, var(--gold-deep), var(--gold) 55%, var(--gold-hi)); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.tabs[data-on="people"] .slide { transform: translateX(100%); }
.tab { position: relative; appearance: none; border: 0; background: transparent; border-radius: 999px; padding: 12px 8px; font: inherit; font-family: var(--font-serif); font-size: 17px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); cursor: pointer; min-height: 48px; transition: color .25s; }
.tab.is-on { color: var(--ink); }
.tab:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }

/* Standings */
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.row { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 14px 16px 14px 10px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; opacity: 0; animation: rise .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.row.top1 { background: linear-gradient(120deg, #6E5529 0%, #B8975A 38%, #E9D6A4 55%, #B8975A 72%, #6E5529 100%); background-size: 200% 100%; border-color: var(--gold-hi); color: var(--ink); animation: rise .55s cubic-bezier(.2,.8,.2,1) both, foil 7s ease-in-out infinite alternate; box-shadow: 0 0 0 1px rgba(243,228,188,.25), 0 10px 40px rgba(201,169,106,.22); }
.row.top2 { border-color: #6B6861; }
.row.top3 { border-color: #7A4A28; }
@keyframes foil { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.rank { font-family: var(--font-display); font-size: 34px; line-height: 1; text-align: center; color: var(--gold); letter-spacing: .02em; }
.top1 .rank { color: var(--ink); } .top2 .rank { color: var(--silver); } .top3 .rank { color: var(--copper-hi); }
.who { min-width: 0; }
.name { font-weight: 800; font-size: 18px; line-height: 1.25; overflow-wrap: anywhere; }
.meta { font-size: 14px; color: var(--mute); margin-top: 2px; }
.top1 .meta { color: #3F3220; }
.pts { text-align: right; }
.total { font-family: var(--font-display); font-size: 36px; line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.week-pts { font-size: 13px; color: var(--mute); margin-top: 3px; white-space: nowrap; }
.week-pts b { color: var(--gold); font-weight: 800; }
.top1 .week-pts { color: #3F3220; } .top1 .week-pts b { color: var(--ink); }
.note { color: var(--mute); font-size: 15px; margin: 14px 4px 0; }
.empty { text-align: center; color: var(--mute); padding: 28px 8px; border: 1px dashed var(--line); border-radius: 14px; }

/* Rules */
.rules { margin-top: 36px; padding: 20px 18px 8px; border: 1px solid var(--gold-deep); border-radius: 16px; background: linear-gradient(180deg, rgba(201,169,106,.08), rgba(201,169,106,.02)); }
.rules h2 { margin: 0 0 12px; font-family: var(--font-serif); font-weight: 400; font-size: 14px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); text-align: center; }
.rules ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rules li { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; }
.rules .n { font-family: var(--font-display); font-size: 36px; line-height: 1; color: var(--gold-hi); text-align: center; }
.rules .n small { display: block; font-family: var(--font-serif); font-size: 13px; letter-spacing: .12em; color: var(--gold); }
.rules p { margin: 0; font-size: 16px; color: var(--cream); }
.foot { margin-top: 26px; text-align: center; color: var(--dim); font-size: 14px; }
.foot .brand { font-family: var(--font-serif); letter-spacing: .24em; text-transform: uppercase; color: var(--mute); font-size: 12px; margin-top: 6px; }
.error { color: var(--copper-hi); }

@media (min-width: 560px) { .row { padding: 16px 20px 16px 12px; } .rank { font-size: 40px; } .total { font-size: 40px; } }
@media (prefers-reduced-motion: reduce) {
  .poster img, .ribbon .week, .row.top1, .ticks i { animation: none; }
  .row, .ribbon { animation: none; opacity: 1; }
  .tabs .slide { transition: none; }
}