/* claudlings.com — Vote for the Claudlings.
   Hand-authored. No build step, no CDN, no webfonts. Every byte this page needs
   is in this repo; the only script is our own, same-origin. */

:root{
  --ink:#0B0A09;        /* near-black, warmed */
  --ink-2:#131110;
  --surface:#1A1512;
  --line:#2E2620;
  --text:#F6F1EB;
  --dim:#A6998C;
  --coral:#D97757;      /* the accent — warm, not red */
  --amber:#E8A24A;
  --good:#7FB77E;

  --sans:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
         "Helvetica Neue", Arial, sans-serif;
  --mono:ui-monospace, "Cascadia Code", "Cascadia Mono", Consolas, monospace;

  --shell:min(1120px, 100% - 3rem);
  --bar:5.5rem;         /* height reserved for the sticky ballot bar */
}

*{box-sizing:border-box}

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  background:var(--ink);
  color:var(--text);
  font:16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* A single soft light behind the page. Purely decorative, pointer-inert. */
.glow{
  position:fixed;
  inset:-20vh -10vw auto;
  height:80vh;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(50% 55% at 50% 30%, rgba(217,119,87,.20), transparent 70%),
    radial-gradient(40% 45% at 70% 15%, rgba(232,162,74,.12), transparent 70%);
}

.site-nav{
  position:relative;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  gap:.4rem .9rem;
  justify-content:center;
  padding:1.1rem 1rem 0;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.site-nav a{ color:var(--dim); text-decoration:none }
.site-nav a:hover{ color:var(--amber) }
.site-nav a[aria-current="page"]{ color:var(--coral) }

main{
  position:relative;
  z-index:1;
  width:var(--shell);
  margin:0 auto;
  padding:clamp(3rem, 9vh, 6.5rem) 0 4rem;
  flex:1 0 auto;
}

.hub-grid{
  display:grid;
  grid-template-columns:1.3fr .9fr;
  gap:1.25rem;
  margin-top:2.5rem;
}
.hub-card{
  display:block;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  color:inherit;
  text-decoration:none;
}
.hub-card img{ display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover }
.hub-card .hub-body{ padding:1.15rem 1.25rem 1.35rem }
.hub-card .kicker{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--coral);
}
.hub-card h2{ margin:.35rem 0 .45rem; font-size:1.35rem; color:var(--text) }
.hub-card p{ margin:0; color:var(--dim); font-size:.95rem }
.hub-side{ display:flex; flex-direction:column; gap:1rem }
@media (max-width:720px){
  .hub-grid{ grid-template-columns:1fr }
}

/* The sticky bar is fixed, so it sits outside flow — the page has to reserve
   its own room or the last row of tiles hides underneath it. */
body.has-ballot main{ padding-bottom:calc(4rem + var(--bar)) }
body.has-ballot footer{ margin-bottom:var(--bar) }

/* ---- titles ---- */
.titles{ text-align:center; margin:0 0 clamp(2rem, 5vh, 3.25rem) }

.eyebrow{
  margin:0 0 1.1rem;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--coral);
}

h1{
  margin:0;
  font-size:clamp(2.1rem, 7vw, 4.6rem);
  line-height:1.04;
  letter-spacing:-.025em;
  font-weight:700;
  text-wrap:balance;
}

h1 .of{
  display:inline-block;
  font-size:.44em;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:lowercase;
  color:var(--dim);
  vertical-align:.32em;
  margin:0 .12em;
}

.sub{
  margin:1.4rem auto 0;
  max-width:46ch;
  font-size:clamp(1rem, 2vw, 1.12rem);
  line-height:1.55;
  color:var(--dim);
  text-wrap:balance;
}
.sub b{ color:var(--text); font-weight:600 }

.note{
  margin:1.1rem auto 0;
  max-width:46ch;
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--amber);
}

/* ---- the grid ---- */
.loading{ text-align:center; color:var(--dim); font-family:var(--mono); font-size:.8rem;
  letter-spacing:.1em; text-transform:uppercase }

.grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:clamp(.7rem, 1.6vw, 1.15rem);
}

.tile{
  position:relative;
  border-radius:12px;
}

/* The whole picture is the vote target — a button wrapping the image, so the
   keyboard gets it for free and aria-pressed carries the state. */
.pick{
  display:block;
  width:100%;
  margin:0;
  padding:0;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--ink-2);
  overflow:hidden;
  cursor:pointer;
  transition:border-color .15s, transform .15s, box-shadow .15s;
}

.pick img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:cover;
  background:var(--ink-2);
  transition:opacity .15s, filter .15s;
}

.pick:hover{ border-color:#4A3C31; transform:translateY(-2px) }

.tile.is-picked .pick{
  border-color:var(--coral);
  box-shadow:0 0 0 2px var(--coral), 0 14px 34px -18px rgba(217,119,87,.9);
  transform:translateY(-2px);
}

/* At the cap, everything unpicked steps back. Still focusable and still
   clickable — the click is what triggers the "ballot is full" nudge. */
.tile.is-blocked .pick img{ opacity:.32; filter:saturate(.35) }
.tile.is-blocked .pick{ cursor:not-allowed }
.tile.is-blocked:hover .pick{ transform:none }

/* Order badge — doubles as the tick mark and as the rank. */
.badge{
  position:absolute;
  top:.5rem; left:.5rem;
  min-width:1.55rem;
  height:1.55rem;
  display:grid;
  place-items:center;
  padding:0 .35rem;
  border-radius:999px;
  background:var(--coral);
  color:#1A0F09;
  font:600 .8rem/1 var(--mono);
  opacity:0;
  transform:scale(.6);
  transition:opacity .15s, transform .15s;
  pointer-events:none;
}
.tile.is-picked .badge{ opacity:1; transform:scale(1) }

.zoom{
  position:absolute;
  top:.5rem; right:.5rem;
  width:1.85rem; height:1.85rem;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(11,10,9,.72);
  color:var(--text);
  cursor:pointer;
  opacity:0;
  transition:opacity .15s, background .15s;
}
.tile:hover .zoom,
.zoom:focus-visible{ opacity:1 }
.zoom:hover{ background:var(--surface) }

/* Coarse pointers get no hover, so the zoom affordance has to be permanent. */
@media (hover:none){ .zoom{ opacity:.85 } }

.caption{
  display:block;
  margin-top:.5rem;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.07em;
  color:var(--dim);
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tile.is-picked .caption{ color:var(--text) }

/* ---- the sticky ballot bar ---- */
.ballot{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:5;
  background:rgba(11,10,9,.88);
  border-top:1px solid var(--line);
  backdrop-filter:blur(10px);
}
.ballot[hidden]{ display:none }

.ballot-inner{
  width:var(--shell);
  margin:0 auto;
  min-height:var(--bar);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 0;
}

.tally{
  margin:0;
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--dim);
}
.tally b{ color:var(--text); font-size:1.35rem; letter-spacing:0 }
.ballot.is-full .tally b:first-child{ color:var(--coral) }

.ballot-actions{ display:flex; gap:.6rem; align-items:center }

.btn{
  display:inline-block;
  padding:.72rem 1.35rem;
  border-radius:10px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
  font:600 .92rem/1.2 var(--sans);
  text-decoration:none;
  cursor:pointer;
  transition:background .15s, border-color .15s, color .15s, opacity .15s;
}
.btn-ghost:hover{ border-color:var(--dim) }

.btn-go{
  background:var(--coral);
  border-color:var(--coral);
  color:#1A0F09;
}
.btn-go:hover{ background:var(--amber); border-color:var(--amber); color:#1A0F09 }
.btn:disabled{ opacity:.4; cursor:not-allowed }
.btn-go:disabled:hover{ background:var(--coral); border-color:var(--coral) }

.sendfail{
  width:var(--shell);
  margin:0 auto;
  padding:0 0 .9rem;
  color:var(--amber);
  font-size:.85rem;
}

@keyframes nudge{
  0%,100%{ transform:translateX(0) }
  25%{ transform:translateX(-5px) }
  75%{ transform:translateX(5px) }
}
.ballot.shake .tally{ animation:nudge .28s ease-in-out }

/* ---- panels (empty, error, thank-you states) ---- */
.panel{
  max-width:44rem;
  margin:0 auto;
  padding:1.6rem 1.75rem;
  border:1px solid var(--line);
  border-left:3px solid var(--dim);
  border-radius:12px;
  background:var(--ink-2);
}
.panel h2{ margin:0 0 .5rem; font-size:1.15rem; letter-spacing:-.01em }
.panel p{ margin:0; color:var(--dim) }
.panel-warn{ border-left-color:var(--amber) }
.panel-good{ border-left-color:var(--good) }

.panel-actions{ margin:1.5rem 0 0; text-align:center }
.panel .panel-actions{ margin-top:1.25rem; text-align:left }

/* ---- lightbox ---- */
.lightbox{
  border:none;
  padding:0;
  max-width:min(92vw, 1000px);
  max-height:90vh;
  background:transparent;
  color:var(--text);
  overflow:visible;
}
.lightbox::backdrop{ background:rgba(6,5,5,.86) }

.lightbox img{
  display:block;
  max-width:100%;
  max-height:78vh;
  width:auto;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--ink-2);
}

.lb-caption{
  margin:.85rem 0 0;
  text-align:center;
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.1em;
  color:var(--dim);
}

.lb-close{
  position:absolute;
  top:-2.6rem; right:0;
  width:2.1rem; height:2.1rem;
  padding:0;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--ink-2);
  color:var(--text);
  font-size:1.3rem;
  line-height:1;
  cursor:pointer;
}
.lb-close:hover{ border-color:var(--dim) }

/* ---- results board ---- */
.board{
  list-style:none;
  margin:0 auto;
  padding:0;
  max-width:44rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}

.row{
  display:grid;
  grid-template-columns:2.1rem 3.2rem 1fr auto;
  align-items:center;
  gap:.9rem;
  padding:.6rem .85rem;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--ink-2);
}
.row-podium{ border-color:#463629 }

.place{
  font:600 .95rem/1 var(--mono);
  color:var(--dim);
  text-align:right;
}
.row-podium .place{ color:var(--coral) }

.thumb{
  width:3.2rem; height:3.2rem;
  border-radius:7px;
  overflow:hidden;
  background:var(--surface);
}
.thumb img{ display:block; width:100%; height:100%; object-fit:cover }

.row-body{ min-width:0 }

.row-name{
  display:block;
  font-size:.9rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.bar{
  display:block;
  height:6px;
  margin-top:.45rem;
  border-radius:999px;
  background:var(--surface);
  overflow:hidden;
}
.bar-fill{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--coral), var(--amber));
}

.votes{
  font:600 1.05rem/1 var(--mono);
  color:var(--text);
  min-width:2.2rem;
  text-align:right;
}

/* ---- footer ---- */
footer{
  position:relative;
  z-index:1;
  flex:none;
  width:var(--shell);
  margin:0 auto;
  padding:1.75rem 0 2.5rem;
  border-top:1px solid var(--line);
}

footer p{
  display:flex;
  align-items:center;
  gap:.6rem;
  justify-content:center;
  margin:0;
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dim);
}

footer .mark{
  width:9px; height:9px;
  border-radius:50%;
  background:var(--coral);
  box-shadow:0 0 12px rgba(217,119,87,.7);
}

/* ---- links & focus ---- */
a{ color:var(--coral) }
a:hover{ color:var(--amber) }

:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
  border-radius:4px;
}

/* ---- reduced motion / small screens ---- */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
  .pick:hover, .tile.is-picked .pick{ transform:none }
}

@media (max-width:640px){
  :root{ --shell:min(1120px, 100% - 1.75rem); --bar:4.9rem }
  /* Three across, not two: fifty candidates two-at-a-time is twenty-five
     screens of scrolling. The zoom button is what recovers the detail. */
  .grid{ grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)) }
  h1 .of{ vertical-align:.2em }
  .ballot-inner{ padding:.8rem 0 }
  .btn{ padding:.65rem 1rem; font-size:.86rem }
  .tally b{ font-size:1.15rem }
  .row{ grid-template-columns:1.7rem 2.6rem 1fr auto; gap:.65rem }
  .thumb{ width:2.6rem; height:2.6rem }
}

/* The page is dark by design — the pictures are the light in it. Respect a
   light preference only to the extent of easing the surround. */
@media (prefers-color-scheme:light){
  :root{ --ink:#0E0C0B }
}