:root { color-scheme: dark; --ink:#111713; --paper:#f1eee5; --sage:#b9d7c5; --line:#39433c; --gold:#caa35b; }
* { box-sizing:border-box; }
body { margin:0; background:var(--ink); color:var(--paper); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
header { height:76px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 clamp(20px,5vw,72px); letter-spacing:.12em; }
header span { color:var(--sage); font-weight:700; }
header span i { margin-left:.65em; color:#98a198; font-size:.68em; font-style:normal; font-weight:400; letter-spacing:.03em; text-transform:lowercase; }
header small { color:#98a198; }
main { max-width:1320px; margin:auto; padding:clamp(28px,5vw,68px); }
.intro,.complete { max-width:680px; margin:6vh auto; }
.gallery-home { max-width:980px; margin:4vh auto; }
.eyebrow { color:var(--sage); letter-spacing:.14em; font-size:.82rem; }
h1 { font-family:Georgia,serif; font-weight:400; font-size:clamp(2.2rem,6vw,4.8rem); line-height:1.02; margin:.35em 0; }
p { line-height:1.65; color:#c9ccc6; }
label { display:block; margin:36px 0 16px; color:#d8dbd5; }
label span,.privacy { color:#858e86; font-size:.78rem; }
input { display:block; width:100%; margin-top:10px; padding:15px; background:#151c17; border:1px solid var(--line); color:white; font:inherit; }
textarea { display:block; width:100%; padding:15px; resize:vertical; background:#151c17; border:1px solid var(--line); color:white; font:inherit; line-height:1.45; }
.primary,.secondary button { border:1px solid var(--sage); background:transparent; color:var(--sage); padding:15px 20px; font:inherit; cursor:pointer; }
.primary:hover,.secondary button:hover { background:var(--sage); color:var(--ink); }
.primary:disabled { cursor:wait; opacity:.45; background:transparent; color:var(--sage); }
.preload-status { min-height:1.5em; margin:18px 0 10px; color:var(--gold); font-size:.78rem; letter-spacing:.06em; }
.gallery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:22px; row-gap:44px; margin:34px 0; }
.gallery-filters { display:flex; justify-content:flex-end; gap:9px; margin:24px 0 -12px; }
.gallery-filters button { padding:10px 14px; border:1px solid var(--line); background:transparent; color:#9da59e; font:inherit; font-size:.74rem; letter-spacing:.07em; cursor:pointer; }
.gallery-filters button.active { border-color:var(--gold); background:var(--gold); color:var(--ink); }
.gallery-empty { padding:22px; border:1px dashed var(--line); text-align:center; }
.gallery-card { padding:0; border:1px solid var(--line); background:#0c110e; color:var(--paper); text-align:left; cursor:pointer; font:inherit; transition:border-color .18s,transform .18s; }
.gallery-card:hover { border-color:var(--gold); transform:translateY(-2px); }
.gallery-cover { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:8px; aspect-ratio:4/3; overflow:hidden; background:var(--paper); }
.gallery-cover img { width:100%; height:100%; min-height:0; object-fit:cover; }
.new-badge { position:absolute; right:0; bottom:0; padding:7px 11px 6px; background:#f0c65c; color:#17130a; font-size:.78rem; line-height:1; letter-spacing:.1em; }
.gallery-copy { display:block; padding:18px; }
.gallery-copy strong,.gallery-copy small,.gallery-copy em { display:block; }
.gallery-copy strong { font:400 1.45rem Georgia,serif; }
.gallery-copy small { color:#9da59e; line-height:1.45; margin-top:7px; }
.gallery-copy em { color:var(--gold); margin-top:14px; font-style:normal; text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; }
.home-link { margin-left:8px; padding:15px 20px; border:1px solid var(--line); background:transparent; color:var(--paper); font:inherit; cursor:pointer; }
.progress { display:flex; gap:18px; align-items:center; color:#aeb6ae; }
.progress i { height:2px; background:var(--line); flex:1; }
.progress b { display:block; height:100%; background:var(--gold); transition:width .3s; }
.question { text-align:center; color:var(--paper); font-family:Georgia,serif; font-size:clamp(1.4rem,3vw,2rem); }
.pair { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:18px; align-items:center; }
.work { position:relative; display:grid; gap:8px; margin:0; padding:0; border:1px solid var(--line); background:var(--ink); color:var(--paper); transition:border-color .14s,transform .14s; }
.work-preview { display:block; width:100%; padding:0; border:0; background:#090d0a; cursor:zoom-in; }
.work img { display:block; width:100%; aspect-ratio:4/5; object-fit:contain; background:#090d0a; transition:opacity .12s; }
.work-select { display:block; width:100%; padding:15px; border:0; border-top:1px solid var(--line); background:#0c110e; color:var(--paper); font:inherit; text-transform:uppercase; letter-spacing:.08em; cursor:pointer; }
@media (hover:hover) and (pointer:fine) {
  .work:has(.work-select:hover) { border-color:var(--gold); }
  .work-select:hover { color:var(--gold); }
}
.work.chosen { border-color:var(--gold); box-shadow:0 0 0 3px rgba(202,163,91,.28); transform:translateY(-2px); }
.pair.transitioning .work { border-color:var(--line); transform:none; background:repeating-linear-gradient(135deg,#111713 0 12px,#18221b 12px 24px); }
.pair.transitioning .work img { opacity:0; }
.pair.transitioning .work::after { content:'CONTINUUM'; position:absolute; z-index:2; inset:0 0 48px; display:grid; place-items:center; color:var(--sage); border:1px solid rgba(185,215,197,.18); letter-spacing:.18em; font-size:clamp(.72rem,2vw,1rem); }
.pair.transitioning .work-select { color:#79837b; }
.or { color:#707870; }
.secondary { display:flex; justify-content:center; gap:12px; margin-top:20px; }
.secondary button { border-color:var(--line); color:#b7bcb7; }
.busy { pointer-events:none; }
.history article { display:grid; grid-template-columns:1fr 90px 1fr; align-items:center; margin:24px 0; gap:8px; }
.history figure { margin:0; padding:4px; border:2px solid transparent; }
.history figure.selected { border-color:var(--gold); }
.history img { display:block; width:100%; }
.history strong { text-align:center; color:var(--gold); font-size:.72rem; font-weight:400; }
#message { text-align:center; color:#d58b83; }
#artwork-dialog { width:100vw; max-width:none; height:100dvh; max-height:none; margin:0; padding:18px; border:0; background:#080b09; color:var(--paper); }
#artwork-dialog::backdrop { background:#080b09; }
#artwork-dialog .artwork-shell { display:grid; grid-template-rows:auto minmax(0,1fr); justify-items:center; gap:12px; width:100%; height:100%; }
#artwork-dialog img { display:block; width:100%; height:100%; min-height:0; object-fit:contain; touch-action:pinch-zoom; }
#artwork-close { display:block; margin:0; padding:10px 22px; border:1px solid var(--sage); background:var(--ink); color:var(--sage); font:inherit; cursor:pointer; }
.complete-actions { display:flex; justify-content:center; align-items:stretch; gap:14px; margin:28px auto; }
.complete-actions button { margin:0; }
.totals { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:28px 0; }
.totals article,.total-button { border:1px solid var(--line); padding:18px; background:transparent; color:inherit; text-align:left; font:inherit; }
.total-button { cursor:pointer; }
.total-button:hover,.total-button[aria-expanded="true"] { border-color:var(--gold); }
.totals b { display:block; color:var(--sage); font:400 2rem Georgia,serif; }
.totals span { color:#98a198; font-size:.75rem; }
.participant-panel { margin:-14px 0 30px; padding:20px; border:1px solid var(--gold); }
.participant-panel p { margin:0 0 8px; }
.participant-panel b { color:var(--sage); }
.participant-names { color:#9da59e; font-size:.82rem; }
.unengaged-note { margin-top:12px !important; color:#788179; font-size:.72rem; }
.activity-table-wrap { overflow-x:auto; margin-top:18px; }
.participant-panel table { width:100%; border-collapse:collapse; font-size:.78rem; }
.participant-panel th,.participant-panel td { padding:11px 10px; border-top:1px solid var(--line); text-align:left; vertical-align:top; }
.participant-panel th { color:var(--sage); font-weight:400; letter-spacing:.06em; }
.activity-status { color:var(--gold); white-space:nowrap; }
.activity-status.completed { color:var(--sage); }
.theme-suggestions { margin-top:28px; padding-top:18px; border-top:1px solid var(--line); }
.theme-suggestions h2 { font:400 1.35rem Georgia,serif; }
.theme-suggestions article { padding:10px 0; border-top:1px solid var(--line); }
.theme-suggestions article p { margin:0 0 4px; color:var(--paper); }
.theme-suggestions small { color:#98a198; }
.suggestion-dialog { width:min(90vw,620px); padding:28px; border:1px solid var(--gold); background:var(--ink); color:var(--paper); }
.suggestion-dialog::backdrop { background:rgba(5,8,6,.84); }
.suggestion-dialog h2 { margin:.35em 0; font:400 clamp(1.7rem,5vw,2.6rem) Georgia,serif; }
.suggestion-dialog form>div { display:flex; justify-content:flex-end; gap:12px; margin-top:18px; }
.suggestion-dialog form>div button { padding:13px 18px; border:1px solid var(--line); background:transparent; color:var(--paper); font:inherit; }
.ranking article { display:grid; grid-template-columns:36px 96px 1fr; gap:16px; align-items:center; border-top:1px solid var(--line); padding:14px 0; }
.ranking .rank { color:var(--gold); }
.ranking img { width:96px; aspect-ratio:4/5; object-fit:cover; }
.ranking b,.ranking small { display:block; }
.ranking b { color:var(--paper); font:400 1.5rem Georgia,serif; }
.ranking small { color:#98a198; line-height:1.5; }
.ranking i { display:block; height:3px; margin-top:10px; background:var(--line); }
.ranking em { display:block; height:100%; background:var(--gold); }
.private-actions { display:flex; gap:12px; margin:28px 0; }
.private-actions button { padding:13px 18px; border:1px solid var(--line); background:transparent; color:var(--paper); font:inherit; cursor:pointer; }
.selection-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:26px; }
.selection-grid article { border:1px solid var(--line); padding:6px; transition:border-color .2s; }
.selection-grid article.decision-keep { border-color:var(--sage); }
.selection-grid article.decision-consider { border-color:var(--gold); }
.selection-grid article.decision-replace { border-color:#b66f69; }
.selection-image { position:relative; display:block; width:100%; padding:0; border:0; background:#090d0a; cursor:zoom-in; }
.selection-image img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; }
.selection-image span { position:absolute; z-index:1; top:8px; left:8px; padding:5px 8px; background:rgba(17,23,19,.82); color:var(--paper); }
.selection-grid article>div { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; margin-top:6px; }
.selection-grid article>div button { padding:8px 3px; border:1px solid var(--line); background:transparent; color:#9da59e; font:inherit; font-size:.68rem; cursor:pointer; }
.selection-grid article>div button.active { background:var(--gold); color:var(--ink); border-color:var(--gold); }
#selection-dialog { width:min(92vw,850px); max-height:94vh; padding:14px; border:1px solid var(--line); background:var(--ink); color:var(--paper); }
#selection-dialog::backdrop { background:rgba(0,0,0,.84); }
#selection-dialog img { display:block; max-width:100%; max-height:84vh; margin:auto; }
#selection-close { float:right; margin-bottom:10px; padding:10px 14px; border:1px solid var(--line); background:var(--ink); color:var(--paper); font:inherit; }
@media(max-width:720px) {
  header small { display:none; }
  .pair { grid-template-columns:1fr 1fr; gap:8px; }
  .pair .or { display:none; }
  .work span { font-size:.75rem; }
  .secondary { flex-wrap:wrap; }
  .history article { grid-template-columns:1fr 66px 1fr; }
  .totals { grid-template-columns:1fr 1fr; }
  .ranking article { grid-template-columns:24px 72px 1fr; gap:10px; }
  .ranking img { width:72px; }
  .selection-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .gallery-grid { grid-template-columns:1fr; }
  .gallery-filters { justify-content:stretch; }
  .gallery-filters button { flex:1; }
  .complete-actions { flex-direction:column; width:min(100%,520px); }
  .selection-grid article>div { grid-template-columns:1fr; }
}