@font-face { font-family: "DM Sans"; src: url("/fonts/dm-sans-latin.woff2") format("woff2"); font-style: normal; font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("/fonts/playfair-display-latin.woff2") format("woff2"); font-style: normal; font-weight: 500 600; font-display: swap; }

:root {
  color-scheme: dark;
  --background: #0b0b0c;
  --card: #111113;
  --text: #ececea;
  --muted: #8a8a8f;
  --accent: #c8a96a;
  --hairline: rgba(255, 255, 255, .07);
  --serif: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--background); }
body { margin: 0; color: var(--text); background: var(--background); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, a { font: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .03; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E"); }
.site-shell { width: min(1120px, calc(100% - 64px)); margin: 0 auto; }
.masthead { height: 86px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; border-bottom: 1px solid var(--hairline); }
.wordmark { width: fit-content; color: var(--text); text-decoration: none; font-size: 14px; font-weight: 600; letter-spacing: .2em; }
.wordmark-period { color: var(--accent); }
.masthead-note, .masthead-date { margin: 0; color: var(--muted); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.masthead-note { text-align: center; }
.masthead-date { text-align: right; }
main { padding: 68px 0 78px; }
.intro { text-align: center; margin-bottom: 45px; }
.eyebrow { margin: 0; color: var(--accent); font-size: 9px; font-weight: 600; letter-spacing: .19em; }
.intro h1 { margin: 19px 0 14px; font-family: var(--serif); font-size: clamp(40px, 5.3vw, 64px); font-weight: 500; letter-spacing: -.045em; line-height: .99; }
.intro h1 span { color: #85847f; }
.intro-copy { margin: 0; color: var(--muted); font-size: 13px; letter-spacing: .015em; }
.matchup { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: center; }
.movie-card { position: relative; min-width: 0; padding: 13px 13px 15px; border: 1px solid var(--hairline); background: var(--card); transition: border-color .25s ease; }
.movie-card.is-picked { border-color: var(--accent); }
.poster-frame { position: relative; overflow: hidden; aspect-ratio: 2 / 3; border: 1px solid rgba(255,255,255,.08); background: #18181a; }
.poster-frame::after { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.035); content: ""; pointer-events: none; }
.poster-frame.has-image .poster-placeholder { display: none; }
.poster-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.poster-image[hidden] { display: none; }
.poster-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 9%; text-align: center; background: #151517; }
.poster-kicker { position: absolute; top: 8%; color: #8a8a8f; font-size: 8px; letter-spacing: .2em; }
.poster-title { max-width: 92%; color: #e5e2dc; font: 500 clamp(27px, 4.1vw, 48px)/1.02 var(--serif); letter-spacing: -.04em; }
.poster-year { margin-top: 15px; color: var(--accent); font-size: 10px; letter-spacing: .2em; }
.poster-index { position: absolute; bottom: 12px; left: 13px; z-index: 1; color: rgba(255,255,255,.55); font-size: 9px; letter-spacing: .15em; }
.movie-meta { min-height: 96px; padding: 22px 6px 15px; }
.movie-credit { margin: 0 0 7px; color: var(--muted); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; }
.movie-meta h2 { margin: 0; font: 500 clamp(23px, 3vw, 34px)/1.06 var(--serif); letter-spacing: -.03em; }
.movie-details { margin: 10px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55; white-space: pre-line; }
.result-line { height: 2px; margin: 0 6px; background: #29292b; }
.result-bar { display: block; width: 0; height: 100%; background: var(--accent); transition: width 900ms cubic-bezier(.2,.7,.2,1); }
.vote-row { display: grid; grid-template-columns: 45px 1fr; gap: 8px; align-items: center; padding: 13px 6px 0; }
.vote-percent { color: var(--accent); font-size: 13px; font-variant-numeric: tabular-nums; }
.vote-button { min-height: 43px; padding: 0 12px; border: 1px solid rgba(200,169,106,.6); background: transparent; color: var(--text); cursor: pointer; font-size: 10px; letter-spacing: .08em; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.vote-button:hover:not(:disabled) { border-color: var(--accent); background: var(--accent); color: #111; }
.vote-button:disabled { border-color: var(--hairline); color: var(--muted); cursor: default; }
.picked-check { position: absolute; top: 22px; right: 22px; z-index: 2; display: none; width: 25px; height: 25px; place-items: center; border: 1px solid var(--accent); border-radius: 50%; background: #111113; color: var(--accent); font-size: 12px; }
.movie-card.is-picked .picked-check { display: grid; }
.versus-divider { position: relative; z-index: 2; display: grid; place-items: center; }
.versus-divider::before { position: absolute; top: -170px; bottom: -170px; left: 50%; width: 1px; background: var(--hairline); content: ""; }
.versus-divider span { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(200,169,106,.45); border-radius: 50%; background: var(--background); color: var(--accent); font-family: var(--serif); font-size: 11px; }
.results-summary { display: flex; justify-content: center; align-items: center; gap: 14px; min-height: 52px; color: var(--muted); font-size: 10px; letter-spacing: .08em; }
.summary-rule { width: 25px; height: 1px; background: var(--hairline); }
.reactions { width: min(470px, 100%); margin: 22px auto 0; padding-top: 21px; border-top: 1px solid var(--hairline); }
.reactions-heading { display: flex; justify-content: space-between; align-items: baseline; }
.reactions-hint { color: var(--muted); font-size: 10px; }
.reaction-list { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.reaction-button { min-width: 76px; min-height: 43px; display: flex; justify-content: center; align-items: center; gap: 8px; border: 1px solid var(--hairline); background: transparent; color: var(--text); cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.reaction-button:hover, .reaction-button.is-active { border-color: rgba(200,169,106,.65); background: #171615; }
.reaction-button > span:first-child { font-size: 15px; }
.reaction-button[data-reaction="❤️"] > span:first-child { color: #c8a96a; }
.reaction-count { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.share-wrap { min-height: 50px; display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 21px; }
.share-button { padding: 8px 0; border: 0; background: none; color: var(--text); cursor: pointer; font-size: 10px; letter-spacing: .09em; }
.share-button span { padding-left: 6px; color: var(--accent); }
.share-status { min-width: 50px; color: var(--accent); font-size: 10px; }
.site-footer { min-height: 72px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--hairline); color: var(--muted); font-size: 9px; letter-spacing: .02em; }
.site-footer p { margin: 0; }
.tmdb-link { color: var(--muted); text-decoration: none; font-weight: 600; letter-spacing: .15em; }
.tmdb-link:hover { color: var(--text); }
@media (min-width: 900px) { .movie-card { padding: 15px 15px 17px; } }
@media (max-width: 640px) {
  .site-shell { width: min(100% - 28px, 480px); }
  .masthead { height: 66px; grid-template-columns: 1fr auto; }
  .masthead-note { display: none; }
  main { padding: 48px 0 55px; }
  .intro { margin-bottom: 31px; }
  .intro h1 { margin-top: 15px; font-size: clamp(39px, 12vw, 52px); }
  .intro-copy { max-width: 280px; margin: 0 auto; font-size: 12px; line-height: 1.6; }
  .matchup { grid-template-columns: 1fr; gap: 0; }
  .movie-card { display: grid; grid-template-columns: minmax(110px, 36%) 1fr; grid-template-rows: auto auto; column-gap: 15px; padding: 10px; }
  .poster-frame { grid-row: 1 / 3; }
  .movie-meta { min-height: 0; align-self: center; padding: 6px 0; }
  .movie-meta h2 { font-size: clamp(21px, 6.5vw, 30px); }
  .movie-credit { font-size: 8px; }
  .movie-details { margin-top: 8px; font-size: 8px; line-height: 1.5; }
  .result-line { grid-column: 2; align-self: end; margin: 0 0 0; }
  .vote-row { grid-column: 2; grid-template-columns: 39px 1fr; gap: 6px; padding: 10px 0 0; }
  .vote-button { min-height: 39px; padding: 0 4px; font-size: 9px; }
  .versus-divider { height: 42px; }
  .versus-divider::before { top: 0; bottom: 0; }
  .versus-divider span { width: 31px; height: 31px; }
  .picked-check { top: 15px; right: 15px; }
  .results-summary { font-size: 9px; }
  .reactions { margin-top: 17px; }
  .reaction-list { gap: 7px; }
  .reaction-button { min-width: 0; flex: 1; }
  .site-footer { align-items: flex-start; gap: 18px; padding: 18px 0; font-size: 8px; line-height: 1.6; }
  .site-footer p { max-width: 280px; }
}
@media (max-width: 360px) {
  .site-shell { width: calc(100% - 24px); }
  main { padding-top: 40px; padding-bottom: 46px; }
  .intro { margin-bottom: 27px; }
  .intro h1 { font-size: clamp(36px, 11.5vw, 42px); }
  .intro-copy { max-width: 260px; font-size: 11px; }
  .movie-card { grid-template-columns: minmax(96px, 35%) 1fr; column-gap: 12px; padding: 8px; }
  .movie-meta h2 { font-size: clamp(20px, 6.5vw, 25px); }
  .movie-details { font-size: 7.5px; line-height: 1.45; }
  .vote-row { grid-template-columns: 32px 1fr; gap: 5px; }
  .vote-percent { font-size: 11px; }
  .vote-button { padding-inline: 3px; font-size: 8px; letter-spacing: .035em; }
  .reaction-list { gap: 5px; }
  .reaction-button { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.movie-card.share-0 .result-bar { transform: scaleX(0); }
.movie-card.share-1 .result-bar { transform: scaleX(0.01); }
.movie-card.share-2 .result-bar { transform: scaleX(0.02); }
.movie-card.share-3 .result-bar { transform: scaleX(0.03); }
.movie-card.share-4 .result-bar { transform: scaleX(0.04); }
.movie-card.share-5 .result-bar { transform: scaleX(0.05); }
.movie-card.share-6 .result-bar { transform: scaleX(0.06); }
.movie-card.share-7 .result-bar { transform: scaleX(0.07); }
.movie-card.share-8 .result-bar { transform: scaleX(0.08); }
.movie-card.share-9 .result-bar { transform: scaleX(0.09); }
.movie-card.share-10 .result-bar { transform: scaleX(0.1); }
.movie-card.share-11 .result-bar { transform: scaleX(0.11); }
.movie-card.share-12 .result-bar { transform: scaleX(0.12); }
.movie-card.share-13 .result-bar { transform: scaleX(0.13); }
.movie-card.share-14 .result-bar { transform: scaleX(0.14); }
.movie-card.share-15 .result-bar { transform: scaleX(0.15); }
.movie-card.share-16 .result-bar { transform: scaleX(0.16); }
.movie-card.share-17 .result-bar { transform: scaleX(0.17); }
.movie-card.share-18 .result-bar { transform: scaleX(0.18); }
.movie-card.share-19 .result-bar { transform: scaleX(0.19); }
.movie-card.share-20 .result-bar { transform: scaleX(0.2); }
.movie-card.share-21 .result-bar { transform: scaleX(0.21); }
.movie-card.share-22 .result-bar { transform: scaleX(0.22); }
.movie-card.share-23 .result-bar { transform: scaleX(0.23); }
.movie-card.share-24 .result-bar { transform: scaleX(0.24); }
.movie-card.share-25 .result-bar { transform: scaleX(0.25); }
.movie-card.share-26 .result-bar { transform: scaleX(0.26); }
.movie-card.share-27 .result-bar { transform: scaleX(0.27); }
.movie-card.share-28 .result-bar { transform: scaleX(0.28); }
.movie-card.share-29 .result-bar { transform: scaleX(0.29); }
.movie-card.share-30 .result-bar { transform: scaleX(0.3); }
.movie-card.share-31 .result-bar { transform: scaleX(0.31); }
.movie-card.share-32 .result-bar { transform: scaleX(0.32); }
.movie-card.share-33 .result-bar { transform: scaleX(0.33); }
.movie-card.share-34 .result-bar { transform: scaleX(0.34); }
.movie-card.share-35 .result-bar { transform: scaleX(0.35); }
.movie-card.share-36 .result-bar { transform: scaleX(0.36); }
.movie-card.share-37 .result-bar { transform: scaleX(0.37); }
.movie-card.share-38 .result-bar { transform: scaleX(0.38); }
.movie-card.share-39 .result-bar { transform: scaleX(0.39); }
.movie-card.share-40 .result-bar { transform: scaleX(0.4); }
.movie-card.share-41 .result-bar { transform: scaleX(0.41); }
.movie-card.share-42 .result-bar { transform: scaleX(0.42); }
.movie-card.share-43 .result-bar { transform: scaleX(0.43); }
.movie-card.share-44 .result-bar { transform: scaleX(0.44); }
.movie-card.share-45 .result-bar { transform: scaleX(0.45); }
.movie-card.share-46 .result-bar { transform: scaleX(0.46); }
.movie-card.share-47 .result-bar { transform: scaleX(0.47); }
.movie-card.share-48 .result-bar { transform: scaleX(0.48); }
.movie-card.share-49 .result-bar { transform: scaleX(0.49); }
.movie-card.share-50 .result-bar { transform: scaleX(0.5); }
.movie-card.share-51 .result-bar { transform: scaleX(0.51); }
.movie-card.share-52 .result-bar { transform: scaleX(0.52); }
.movie-card.share-53 .result-bar { transform: scaleX(0.53); }
.movie-card.share-54 .result-bar { transform: scaleX(0.54); }
.movie-card.share-55 .result-bar { transform: scaleX(0.55); }
.movie-card.share-56 .result-bar { transform: scaleX(0.56); }
.movie-card.share-57 .result-bar { transform: scaleX(0.57); }
.movie-card.share-58 .result-bar { transform: scaleX(0.58); }
.movie-card.share-59 .result-bar { transform: scaleX(0.59); }
.movie-card.share-60 .result-bar { transform: scaleX(0.6); }
.movie-card.share-61 .result-bar { transform: scaleX(0.61); }
.movie-card.share-62 .result-bar { transform: scaleX(0.62); }
.movie-card.share-63 .result-bar { transform: scaleX(0.63); }
.movie-card.share-64 .result-bar { transform: scaleX(0.64); }
.movie-card.share-65 .result-bar { transform: scaleX(0.65); }
.movie-card.share-66 .result-bar { transform: scaleX(0.66); }
.movie-card.share-67 .result-bar { transform: scaleX(0.67); }
.movie-card.share-68 .result-bar { transform: scaleX(0.68); }
.movie-card.share-69 .result-bar { transform: scaleX(0.69); }
.movie-card.share-70 .result-bar { transform: scaleX(0.7); }
.movie-card.share-71 .result-bar { transform: scaleX(0.71); }
.movie-card.share-72 .result-bar { transform: scaleX(0.72); }
.movie-card.share-73 .result-bar { transform: scaleX(0.73); }
.movie-card.share-74 .result-bar { transform: scaleX(0.74); }
.movie-card.share-75 .result-bar { transform: scaleX(0.75); }
.movie-card.share-76 .result-bar { transform: scaleX(0.76); }
.movie-card.share-77 .result-bar { transform: scaleX(0.77); }
.movie-card.share-78 .result-bar { transform: scaleX(0.78); }
.movie-card.share-79 .result-bar { transform: scaleX(0.79); }
.movie-card.share-80 .result-bar { transform: scaleX(0.8); }
.movie-card.share-81 .result-bar { transform: scaleX(0.81); }
.movie-card.share-82 .result-bar { transform: scaleX(0.82); }
.movie-card.share-83 .result-bar { transform: scaleX(0.83); }
.movie-card.share-84 .result-bar { transform: scaleX(0.84); }
.movie-card.share-85 .result-bar { transform: scaleX(0.85); }
.movie-card.share-86 .result-bar { transform: scaleX(0.86); }
.movie-card.share-87 .result-bar { transform: scaleX(0.87); }
.movie-card.share-88 .result-bar { transform: scaleX(0.88); }
.movie-card.share-89 .result-bar { transform: scaleX(0.89); }
.movie-card.share-90 .result-bar { transform: scaleX(0.9); }
.movie-card.share-91 .result-bar { transform: scaleX(0.91); }
.movie-card.share-92 .result-bar { transform: scaleX(0.92); }
.movie-card.share-93 .result-bar { transform: scaleX(0.93); }
.movie-card.share-94 .result-bar { transform: scaleX(0.94); }
.movie-card.share-95 .result-bar { transform: scaleX(0.95); }
.movie-card.share-96 .result-bar { transform: scaleX(0.96); }
.movie-card.share-97 .result-bar { transform: scaleX(0.97); }
.movie-card.share-98 .result-bar { transform: scaleX(0.98); }
.movie-card.share-99 .result-bar { transform: scaleX(0.99); }
.movie-card.share-100 .result-bar { transform: scaleX(1); }