/* Chrome for the directory pages (root + set launchers that opt in).
   Prototypes style themselves; this is only the shelf they sit on. */
:root{--bg:#0e0e0c;--ink:#f2efe8;--soft:#8e887c;--line:rgba(242,239,232,.13);
  /* Accents, all >=4.5:1 on --bg. --acc was #c8502d (4.27:1) and failed AA on the
     9.5px facet labels below; #d35f38 is the nearest passing rust. */
  --acc:#d35f38;--acc2:#6b9db5;--ok:#78b68c}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;
  padding:7vh 6vw 12vh;line-height:1.65}
img{display:block;max-width:100%}
h1{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(40px,7vw,86px);
  margin:0 0 8px;letter-spacing:-.025em}
.lede{color:var(--soft);max-width:64ch;margin:0 0 12px}
.lede b{color:var(--ink);font-weight:500}
.lede a{color:var(--ink)}
.rule{border:0;border-top:1px solid var(--line);margin:40px 0 0}

.up{display:inline-block;font-family:ui-monospace,monospace;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--soft);text-decoration:none;margin:0 0 26px;
  border-bottom:1px solid transparent;padding-bottom:2px}
.up:hover{color:var(--ink);border-bottom-color:var(--line)}

.cat{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:10px;margin:46px 0 26px}
.cat h2{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--acc);
  font-weight:500;margin:0}
.cat .path,.cat .count{font-family:ui-monospace,monospace;font-size:11px;color:var(--soft)}
.cat .count{margin-left:auto}

.set{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:30px;margin:0 0 34px}
.set .about h3{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:34px;
  margin:0;letter-spacing:-.01em}
.set .about h3 a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.set .about h3 a:hover{border-bottom-color:var(--acc)}
.set .about .q{font-family:ui-monospace,monospace;font-size:11px;color:var(--soft);margin:8px 0 12px}
.set .about p{margin:0 0 14px;color:var(--soft);font-size:13.5px}
.set .about .open{font-family:ui-monospace,monospace;font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--acc);padding-bottom:2px}

ol.items{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
ol.items li{border-bottom:1px solid var(--line)}
ol.items a{display:grid;grid-template-columns:34px minmax(0,1fr);gap:16px;padding:15px 6px 16px;
  text-decoration:none;color:inherit;transition:.2s}
ol.items a:hover{background:rgba(242,239,232,.035);padding-left:12px;padding-right:0}
ol.items a:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
ol.items .n{font-family:ui-monospace,monospace;font-size:11px;color:var(--acc);padding-top:4px}
ol.items b{font-weight:500;font-size:16px}
ol.items .where{color:var(--soft);font-size:12px;margin-left:8px}
ol.items p{margin:3px 0 0;color:var(--soft);font-size:13px}
ol.items dl{display:flex;flex-wrap:wrap;gap:6px 22px;margin:10px 0 0}
ol.items dt{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);
  opacity:.85;margin:0 0 1px}
ol.items dd{margin:0;font-size:12px;color:var(--soft)}
ol.items .facet{min-width:0}

/* Thumbnail variant — same row structure, one extra column. Lets a set with
   real imagery (wedding/rsvp) use the shared pattern instead of a bespoke
   stylesheet, so every launcher in the collection matches. */
ol.items a.thumbed{grid-template-columns:34px 92px minmax(0,1fr)}
ol.items .shot{width:92px;aspect-ratio:4/3;border-radius:4px;overflow:hidden;
  border:1px solid var(--line);background:rgba(242,239,232,.04)}
ol.items .shot img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.4) brightness(.82);transition:.4s}
ol.items a:hover .shot img{filter:none;transform:scale(1.04)}

/* Status chip — "LIVE" on shipped work, so production and prototype are never
   mistaken for each other on a client-facing page. */
.chip{display:inline-block;font-family:ui-monospace,monospace;font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;padding:2px 6px;border-radius:3px;
  border:1px solid var(--line);color:var(--soft);vertical-align:middle;margin-left:8px}
.chip.live{color:var(--ok);border-color:rgba(120,182,140,.35)}
.chip.proto{color:var(--acc2);border-color:rgba(107,157,181,.35)}

/* Pull-quote used by set launchers to state the question the set asks. */
.q{border-left:2px solid var(--acc);padding-left:16px;margin:0 0 40px;
  max-width:66ch;font-size:14px;color:var(--soft)}
.q b{color:var(--acc);font-weight:500}

footer{margin-top:44px;color:var(--soft);font-size:12.5px;max-width:74ch;
  border-top:1px solid var(--line);padding-top:20px}
footer code{font-family:ui-monospace,monospace;color:var(--ink);font-size:12px}
footer p{margin:0 0 10px}
footer p:last-child{margin:0}

@media (max-width:760px){
  .set{grid-template-columns:1fr;gap:20px}
  ol.items dl{gap:6px 16px}
}
@media (max-width:520px){
  ol.items a.thumbed{grid-template-columns:34px minmax(0,1fr)}
  ol.items .shot{display:none}
}