:root{
    --ink:#14161B; --panel:#1B1E25; --panel2:#232833; --hair:#2E3340;
    --cream:#EFE9DC; --muted:#A39E92; --faint:#6E6A61;
    --gold:#C7A566; --gold-bright:#E5CD96; --gold-dim:rgba(199,165,102,.14);
    --danger:#C97B6E;
    --serif:'Marcellus', 'Times New Roman', serif;
    --sans:'Jost', 'Avenir Next', 'Segoe UI', sans-serif;
  }
  html{scroll-behavior:smooth}
  body{background:var(--ink); color:var(--cream); font-family:var(--sans);
    font-weight:300; font-size:16px; line-height:1.55; margin:0;}
  ::selection{background:var(--gold); color:var(--ink)}
  a{color:var(--gold-bright); text-decoration:none}
  a:hover{text-decoration:underline}
  button{font-family:var(--sans)}
  :focus-visible{outline:2px solid var(--gold-bright); outline-offset:2px}
  @media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important} html{scroll-behavior:auto} }

  .wrap{max-width:760px; margin:0 auto; padding:0 20px}

  /* ---------- header ---------- */
  header.hero{padding:64px 0 40px; text-align:center; position:relative}
  .eyebrow{font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold);
    display:flex; align-items:center; gap:14px; justify-content:center}
  .eyebrow::before,.eyebrow::after{content:""; height:1px; width:42px; background:var(--hair)}
  h1{font-family:var(--serif); font-weight:400; font-size:clamp(34px,7vw,58px); line-height:1.06;
    margin:20px 0 6px; text-wrap:balance; letter-spacing:.01em}
  .hero .year{font-family:var(--serif); color:var(--gold); font-size:clamp(20px,3.4vw,28px); letter-spacing:.35em; margin-left:.35em}
  .lede{max-width:56ch; margin:18px auto 0; color:var(--muted); font-size:17px}
  .lede b{color:var(--cream); font-weight:500}
  .countdown{margin-top:22px; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint)}
  .countdown b{color:var(--gold); font-weight:500; font-variant-numeric:tabular-nums}
  .disclaimer{margin:26px auto 0; max-width:60ch; font-size:12.5px; color:var(--faint);
    border:1px solid var(--hair); border-radius:3px; padding:10px 16px; background:var(--panel)}

  /* ---------- progress rail ---------- */
  .rail{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--ink) 88%, transparent);
    backdrop-filter:blur(8px); border-bottom:1px solid var(--hair)}
  .rail-in{max-width:760px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; gap:16px}
  .rail .label{font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
  .rail .label b{color:var(--gold-bright); font-weight:500; font-variant-numeric:tabular-nums}
  .bar{flex:1; height:2px; background:var(--hair); border-radius:1px; overflow:hidden}
  .bar i{display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--gold),var(--gold-bright)); transition:width .35s ease}

  /* ---------- categories ---------- */
  section.cat{padding:44px 0 8px}
  .cat-head{display:flex; align-items:baseline; gap:16px; border-bottom:1px solid var(--hair); padding-bottom:12px; margin-bottom:18px}
  .cat-num{font-family:var(--serif); color:var(--gold); font-size:15px; letter-spacing:.12em; min-width:34px}
  .cat-name{font-family:var(--serif); font-size:26px; letter-spacing:.02em}
  .cat-note{margin-left:auto; font-size:13px; color:var(--faint); font-style:italic; text-align:right}
  @media(max-width:560px){ .cat-note{display:none} }
  .opts{display:grid; grid-template-columns:1fr 1fr; gap:10px}
  @media(max-width:640px){ .opts{grid-template-columns:1fr} }
  .opt{position:relative; text-align:left; background:var(--panel); border:1px solid var(--hair); border-radius:4px;
    padding:14px 16px 13px; cursor:pointer; color:var(--cream); width:100%;
    transition:border-color .15s ease, background .15s ease; display:block}
  .opt:hover{border-color:var(--gold); background:var(--panel2)}
  .opt .brand{font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:3px}
  .opt .model{font-family:var(--serif); font-size:16.5px; line-height:1.25; letter-spacing:.01em}
  .opt .blurb{font-size:13px; color:var(--muted); margin-top:5px; line-height:1.4}
  .opt .tick{position:absolute; top:12px; right:12px; width:18px; height:18px; border:1px solid var(--hair); border-radius:50%;
    display:grid; place-items:center; transition:all .15s ease}
  .opt .tick::after{content:""; width:8px; height:8px; border-radius:50%; background:transparent; transition:background .15s ease}
  .opt[aria-pressed="true"]{border-color:var(--gold); background:var(--gold-dim)}
  .opt[aria-pressed="true"] .tick{border-color:var(--gold-bright)}
  .opt[aria-pressed="true"] .tick::after{background:var(--gold-bright)}
  .opt[aria-pressed="true"] .model{color:var(--gold-bright)}

  /* ---------- submit ---------- */
  .submit{margin:56px 0 20px; background:var(--panel); border:1px solid var(--hair); border-radius:4px; padding:26px 24px}
  .submit h2{font-family:var(--serif); font-weight:400; font-size:22px; margin:0 0 6px}
  .submit p{color:var(--muted); font-size:14px; margin:0 0 16px}
  .submit-row{display:flex; gap:10px; flex-wrap:wrap}
  input[type=text], textarea{background:var(--ink); border:1px solid var(--hair); color:var(--cream);
    border-radius:3px; padding:11px 14px; font-family:var(--sans); font-size:15px; font-weight:300}
  input[type=text]::placeholder, textarea::placeholder{color:var(--faint)}
  input[type=text]:focus, textarea:focus{border-color:var(--gold); outline:none}
  #voterName{flex:1; min-width:200px}
  .btn{border:1px solid var(--gold); background:transparent; color:var(--gold-bright); border-radius:3px;
    padding:11px 22px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
    transition:background .15s ease, color .15s ease}
  .btn:hover:not(:disabled){background:var(--gold); color:var(--ink)}
  .btn:disabled{opacity:.35; cursor:not-allowed}
  .btn.solid{background:var(--gold); color:var(--ink); font-weight:500}
  .btn.solid:hover:not(:disabled){background:var(--gold-bright)}
  .btn.ghost{border-color:var(--hair); color:var(--muted)}
  .btn.ghost:hover:not(:disabled){background:var(--panel2); color:var(--cream)}
  .btn.tiny{padding:6px 12px; font-size:11px}
  .hint{font-size:12.5px; color:var(--faint); margin-top:12px}

  /* ---------- modal ---------- */
  .veil{position:fixed; inset:0; background:rgba(10,11,14,.78); z-index:60; display:grid; place-items:center; padding:20px}
  .sheet{background:var(--panel); border:1px solid var(--hair); border-radius:5px; max-width:560px; width:100%;
    max-height:86vh; overflow:auto; padding:26px 24px}
  .sheet h3{font-family:var(--serif); font-weight:400; font-size:22px; margin:0 0 4px}
  .sheet .sub{color:var(--muted); font-size:14px; margin:0 0 16px}
  .ballot-text{white-space:pre-wrap; background:var(--ink); border:1px solid var(--hair); border-radius:3px;
    padding:14px 16px; font-size:13.5px; line-height:1.6; color:var(--cream); margin-bottom:16px}
  .sheet-row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
  .copied{color:var(--gold-bright); font-size:13px}

  /* ---------- results ---------- */
  .results-banner{margin:8px 0 0; text-align:center; padding:34px 20px 6px}
  .results-banner .eyebrow::before,.results-banner .eyebrow::after{width:30px}
  .results-banner h2{font-family:var(--serif); font-weight:400; font-size:clamp(26px,5vw,38px); margin:14px 0 4px}
  .results-banner p{color:var(--muted); font-size:15px; max-width:52ch; margin:6px auto 0}
  .res-cat{padding:34px 0 4px}
  .res-row{display:flex; align-items:center; gap:14px; padding:10px 4px; border-bottom:1px solid var(--hair)}
  .res-row:last-child{border-bottom:none}
  .res-info{flex:1; min-width:0}
  .res-info .brand{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
  .res-row.winner .res-info .brand{color:var(--gold)}
  .res-info .model{font-family:var(--serif); font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .res-row.winner .res-info .model{color:var(--gold-bright)}
  .res-info .voters{font-size:11.5px; color:var(--faint); margin-top:2px; overflow-wrap:anywhere}
  .res-bar-wrap{width:34%; min-width:110px}
  .res-bar{height:4px; background:var(--hair); border-radius:2px; overflow:hidden}
  .res-bar i{display:block; height:100%; background:var(--gold); border-radius:2px}
  .res-row.winner .res-bar i{background:linear-gradient(90deg,var(--gold),var(--gold-bright))}
  .res-count{font-variant-numeric:tabular-nums; font-size:14px; color:var(--muted); min-width:2ch; text-align:right}
  .res-row.winner .res-count{color:var(--gold-bright)}
  .laurel{font-family:var(--serif); color:var(--gold); font-size:12px; letter-spacing:.18em; text-transform:uppercase}

  /* ---------- organizer ---------- */
  .admin-list{margin:14px 0; border:1px solid var(--hair); border-radius:3px; max-height:200px; overflow:auto}
  .admin-item{display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid var(--hair); font-size:13.5px}
  .admin-item:last-child{border-bottom:none}
  .admin-item .who{flex:1}
  .admin-item .del{background:none; border:none; color:var(--danger); cursor:pointer; font-size:12px; letter-spacing:.08em}
  .status{font-size:13px; margin-top:10px; min-height:18px}
  .status.ok{color:var(--gold-bright)} .status.err{color:var(--danger)}
  .switch{display:flex; align-items:center; gap:10px; margin:16px 0; cursor:pointer; font-size:14px; color:var(--cream)}
  .switch input{accent-color:var(--gold); width:16px; height:16px}

  footer.colophon{margin:70px 0 46px; text-align:center; color:var(--faint); font-size:12.5px; line-height:1.9;
    border-top:1px solid var(--hair); padding-top:26px}
  .hidden{display:none!important}
/* ---------- site additions ---------- */
.thanks{margin:56px 0 20px; background:var(--gold-dim); border:1px solid var(--gold); border-radius:4px; padding:26px 24px; text-align:center}
.thanks h2{font-family:var(--serif); font-weight:400; font-size:24px; margin:0 0 8px; color:var(--gold-bright)}
.thanks p{color:var(--muted); font-size:14.5px; margin:0 0 18px}
.count-pill{display:inline-block; margin-top:14px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint)}
.count-pill b{color:var(--gold); font-weight:500; font-variant-numeric:tabular-nums}
.err-note{color:var(--danger); font-size:13.5px; margin-top:10px; min-height:18px}
.admin-shell{max-width:760px; margin:0 auto; padding:40px 20px}
.admin-card{background:var(--panel); border:1px solid var(--hair); border-radius:4px; padding:26px 24px; margin-bottom:22px}
.admin-card h2{font-family:var(--serif); font-weight:400; font-size:22px; margin:0 0 12px}
.stat-row{display:flex; gap:26px; flex-wrap:wrap; margin:6px 0 4px}
.stat{min-width:110px}
.stat .n{font-family:var(--serif); font-size:34px; color:var(--gold-bright); font-variant-numeric:tabular-nums}
.stat .l{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint)}

/* ---------- watch detail modal ---------- */
.detail-sheet{max-width:700px; padding:0; overflow:hidden; display:flex; flex-direction:column}
.detail-top{display:flex; align-items:baseline; gap:12px; padding:18px 22px 14px; border-bottom:1px solid var(--hair); flex-wrap:wrap}
.detail-top .brand{font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold)}
.detail-top .model{font-family:var(--serif); font-size:21px; line-height:1.2; flex:1 1 100%}
.detail-top .catlab{font-size:11.5px; color:var(--faint); letter-spacing:.14em; text-transform:uppercase; margin-left:auto}
.detail-x{background:none; border:none; color:var(--muted); font-size:22px; cursor:pointer; line-height:1; padding:2px 6px}
.detail-x:hover{color:var(--cream)}
.detail-body{overflow-y:auto; padding:0 22px 20px}
.detail-gallery{margin:16px 0 6px; text-align:center}
.detail-gallery .main{width:100%; max-width:420px; aspect-ratio:1; object-fit:contain; background:#fff; border-radius:4px; border:1px solid var(--hair)}
.dg-thumbs{display:flex; gap:8px; justify-content:center; margin-top:10px}
.dg-thumbs img{width:52px; height:52px; object-fit:cover; border-radius:3px; border:1px solid var(--hair); cursor:pointer; opacity:.55; background:#fff}
.dg-thumbs img.on{opacity:1; border-color:var(--gold)}
.detail-nav{display:flex; align-items:center; gap:10px; padding:12px 22px; border-top:1px solid var(--hair); flex-wrap:wrap}
.detail-nav .counter{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); font-variant-numeric:tabular-nums}
.detail-nav .spacer{flex:1}
.spec-grid{display:grid; grid-template-columns:max-content 1fr; gap:6px 18px; margin:16px 0 4px; font-size:13.5px}
.spec-grid dt{color:var(--gold); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; align-self:baseline; padding-top:2px}
.spec-grid dd{margin:0; color:var(--cream)}
.detail-desc{color:var(--muted); font-size:14px; line-height:1.65; margin-top:14px}
.detail-desc p{margin:0 0 12px}
.detail-desc .rm{color:var(--gold-bright); cursor:pointer; background:none; border:none; font-size:13px; letter-spacing:.08em; padding:0}
@media(max-width:560px){ .spec-grid{grid-template-columns:1fr; gap:2px} .spec-grid dd{margin-bottom:8px} }

.res-row{cursor:pointer}