:root {
  --ground: #fff;
  --ground-subtle: #f6f5f3;
  --ground-image: #f1f0ed;
  --ink: #12100e;
  --ink-muted: #6e6a64;
  --ink-faint: #9c9791;
  --line: #e4e1dc;
  --accent: #1f5c3d;
  --accent-soft: #e8f0ea;
  --gutter: 20px;
}

@media (min-width: 900px) {
  :root { --gutter: 120px; }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 15px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; color: inherit; }

.sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.chrome {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 18px var(--gutter);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--ground);
  z-index: 10;
}

.wordmark {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}

.nav {
  display: flex;
  gap: 24px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }

.nav a {
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
  padding-bottom: 2px;
}
.nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 500;
  border-bottom: 1.5px solid var(--ink);
}

.acct {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}

.masthead { padding: 40px var(--gutter) 24px; }

.eyebrow {
  margin: 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

h1 {
  margin: 10px 0 0;
  font-size: clamp(32px, 6vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-weight: 600;
}

.standfirst {
  margin: 12px 0 0;
  max-width: 52ch;
  color: var(--ink-muted);
  line-height: 1.55;
}

.addbar { padding: 0 var(--gutter) 24px; }

#add-form { display: flex; }

#add-url {
  flex: 1;
  min-width: 0;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: 0;
  background: var(--ground);
}
#add-url:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

#add-form button {
  padding: 13px 26px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--ground);
  font-weight: 500;
  cursor: pointer;
}

.hint {
  margin: 9px 0 0;
  font-size: 12px;
  color: var(--ink-faint);
}
.hint.bad { color: var(--error); }

.rerank {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px var(--gutter);
  background: var(--accent-soft);
  font-size: 13px;
}
.rerank[hidden] { display: none; }
.rerank span { flex: 1; }
.rerank button {
  border: 0;
  background: none;
  color: var(--accent);
  font-weight: 500;
  cursor: pointer;
  padding: 0;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 20px var(--gutter);
  border-bottom: 1px solid var(--line);
}

.field input, .field select {
  padding: 9px 13px;
  border: 1px solid var(--line);
  background: var(--ground);
  border-radius: 0;
  max-width: 100%;
}

.count {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-faint);
}

.feed { padding: 0 var(--gutter); }

.piece {
  padding: 40px 0 48px;
  border-bottom: 1px solid var(--line);
}

.shot {
  position: relative;
  background: var(--ground-image);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

@media (max-width: 700px) {
  .shot { aspect-ratio: 4 / 3; }
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 24px;
}

.shot .nophoto {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.rate {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  background: var(--ground);
  border: 1px solid var(--line);
  max-width: calc(100% - 24px);
}

.rate button {
  width: 46px;
  height: 40px;
  border: 0;
  border-right: 1px solid var(--line);
  background: var(--ground);
  color: var(--ink-muted);
  cursor: pointer;
}
.rate button:last-child { border-right: 0; }
.rate button:hover { background: var(--ground-subtle); }
.rate button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--ground);
  font-weight: 500;
}
.rate .clear {
  width: auto;
  padding: 0 14px;
  background: var(--ground-subtle);
  border-left: 1px solid var(--line);
  font-size: 12px;
}

@media (max-width: 700px) {
  .rate { width: calc(100% - 24px); }
  .rate button { width: auto; flex: 1; height: 38px; font-size: 13px; }
  .rate .clear { flex: 0 0 auto; padding: 0 10px; }
}

.caption { padding-top: 22px; }

.kicker {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.piece h2 {
  margin: 8px 0 0;
  font-size: clamp(20px, 3vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-weight: 600;
}

.piece h2 a { color: inherit; text-decoration: none; }
.piece h2 a:hover { text-decoration: underline; }

.source { margin: 8px 0 0; font-size: 13px; color: var(--ink-muted); }

.facts {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  border-top: 1px solid var(--line);
}

.fact {
  flex: 1 1 140px;
  padding: 16px 20px;
  border-left: 1px solid var(--line);
}
.fact:first-child { border-left: 0; padding-left: 0; }

.fact dt {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.fact dd {
  margin: 6px 0 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.fact .sub {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-faint);
}

.sentinel { height: 1px; }

.empty, footer {
  padding: 40px var(--gutter);
  color: var(--ink-faint);
  font-size: 12px;
}

footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  margin-top: 24px;
}


/* Rate - Tinder-style deck (EG, 24 Sep 2026): thumbs up or thumbs down. */
.modes { display: flex; gap: 0; padding: 0 var(--gutter) 16px; flex-wrap: wrap; }
.modes button {
  border: 1px solid var(--line); background: var(--ground); padding: 10px 16px;
  min-height: 44px; cursor: pointer; margin-right: -1px;
}
.modes button[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.deck { padding: 8px var(--gutter) 32px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.deck[hidden] { display: none; }
.stack { position: relative; width: min(460px, 100%); }
.card {
  position: relative; background: var(--ground); border: 1px solid var(--line);
  padding: 16px; touch-action: pan-y; user-select: none; cursor: grab;
}
.card.behind { position: absolute; inset: 0; transform: scale(.96); opacity: .5; pointer-events: none; }
.card.dragging { cursor: grabbing; transition: none; }
.card.settle { transition: transform .18s cubic-bezier(.4,0,.2,1); }
.card .shot { aspect-ratio: auto; height: min(38vh, 360px); }
.card img { pointer-events: none; }
.card .verdict { margin: 8px 0 0; color: var(--ink-muted); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .caption { padding-top: 14px; }
.card .meta { margin: 10px 0 0; font-size: 13px; color: var(--ink-muted); }
.feed.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.feed.grid .piece { padding: 0 0 24px; }
.feed.grid .shot { aspect-ratio: 4 / 5; }
.feed.grid .piece h2 { font-size: 16px; }
.feed.grid .facts { grid-template-columns: repeat(3, 1fr); }
.stamp {
  position: absolute; top: 28px; padding: 2px 12px; border: 3px solid var(--ink);
  background: var(--ground); font-size: 28px; font-weight: 700; opacity: 0; pointer-events: none; z-index: 3;
}
.stamp.yes { left: 28px; transform: rotate(-12deg); }
.stamp.no { right: 28px; transform: rotate(12deg); }
.votebar { display: flex; gap: 12px; width: min(460px, 100%); }
.votebar button {
  flex: 1; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--ink); background: var(--ground); cursor: pointer; border-radius: var(--radius-control, 4px);
}
.votebar .up { background: var(--ink); color: var(--ground); }
.votebar .undo { flex: 0 0 48px; border-color: var(--line); }
.votebar button:disabled { opacity: .4; cursor: default; }
.votebar svg, .vote svg { width: 18px; height: 18px; fill: currentColor; }
.progress { margin: 0; color: var(--ink-faint); font-size: 13px; }
.vote { display: flex; gap: 4px; margin-top: 8px; }
.vote button {
  flex: 1; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line); background: var(--ground); cursor: pointer;
}
.vote button[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.done { text-align: center; padding: 40px 0; }

/* Guests EG approved: look only (27 Sep 2026). */
.guest .addbar, .guest .modes [data-mode="deck"], .guest .vote { display: none !important; }