/* Rave About It
 *
 * The site runs on two registers rather than one palette. `.t-day` is bone and warm, and carries
 * everything about people: the doors, the photographers, Brittany herself. `.t-floor` is ink
 * violet and carries everything about rooms: the archive, the stories, the peak. That split is
 * taken from her own photographs, where the venue frames sit at 88 to 94 percent saturation on a
 * hue cast ground and the portrait and kandi frames sit at 14 to 28 percent on a warm one.
 *
 * Type does three jobs and no more. Fraunces is the voice, Schibsted Grotesk is the furniture,
 * DM Mono is the stamps and the clock.
 */

/* ---------------------------------------------------------------- tokens */

:root {
  /* Warm register */
  --day-bg:        #f3ebe1;
  --day-bg-sunk:   #eae0d2;
  --day-ink:       #17101a;
  --day-ink-soft:  #5d5259;
  --day-rule:      #dbcdb9;
  --day-edge:      #827565;
  --day-accent:    #5c22c9;

  /* Dark register */
  --floor-bg:      #0c0716;
  --floor-raised:  #150d26;
  --floor-ink:     #ece5f6;
  --floor-ink-soft:#9d90b6;
  --floor-rule:    #2a1d45;
  --floor-edge:    #7360a5;
  --floor-accent:  #a97cff;

  /* Light sources. Used small, the way a laser is used small. Each has a darker sibling for the
     bone ground, where the bright value drops under AA. */
  --magenta:       #b81f57;
  --amber:         #a83f00;
  --cyan:          #0b5fa5;
  --mint:          #0f6b4a;
  --magenta-lit:   #e4467e;
  --amber-lit:     #ff7a2f;
  --cyan-lit:      #37a9e0;
  --mint-lit:      #23b273;

  --iris: conic-gradient(from 210deg,
      #662d91, #cb65cb, #046eb9, #23b273, #ffb020, #cb65cb, #662d91);

  --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-ui: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --measure: 34rem;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --shell: 84rem;
  --r: 3px;

  /* Live values, swapped by the register classes below. */
  --bg: var(--day-bg);
  --bg-sunk: var(--day-bg-sunk);
  --ink: var(--day-ink);
  --ink-soft: var(--day-ink-soft);
  --rule: var(--day-rule);
  --edge: var(--day-edge);
  --accent: var(--day-accent);
}

.t-day {
  --wonk: "SOFT" 70, "WONK" 1;
  --bg: var(--day-bg); --bg-sunk: var(--day-bg-sunk); --ink: var(--day-ink);
  --ink-soft: var(--day-ink-soft); --rule: var(--day-rule); --edge: var(--day-edge);
  --accent: var(--day-accent); --on-accent: #fff;
  background: var(--bg); color: var(--ink);
}

.t-floor {
  --magenta: var(--magenta-lit); --amber: var(--amber-lit);
  --cyan: var(--cyan-lit); --mint: var(--mint-lit);
  --wonk: "SOFT" 0, "WONK" 0;
  --bg: var(--floor-bg); --bg-sunk: var(--floor-raised); --ink: var(--floor-ink);
  --ink-soft: var(--floor-ink-soft); --rule: var(--floor-rule); --edge: var(--floor-edge);
  /* White on the light violet accent measures 2.99:1. Ink on it measures 6.63:1. */
  --accent: var(--floor-accent); --on-accent: #0c0716;
  background: var(--bg); color: var(--ink);
}

/* High ISO photography next to a flat CSS panel reads as a mistake. A little luminance noise
   over the dark register puts them in the same room. */
.t-floor::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='140' height='140' filter='url(%23n)' opacity='.045'/></svg>");
}
.t-floor > * { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  scrollbar-color: #6b4fa8 #ece2d6;
  scrollbar-width: thin;
}
html:has(body.t-floor) { scrollbar-color: #6b4fa8 #120b21; }

/* WebKit needs its own vocabulary for the same thing. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #ece2d6; }
body.t-floor ::-webkit-scrollbar-track,
html:has(body.t-floor) ::-webkit-scrollbar-track { background: #120b21; }
::-webkit-scrollbar-thumb {
  background: #6b4fa8; border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #8a68d0; background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Several components below set display, which would otherwise beat the hidden attribute. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--f-ui);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.6;
  background: var(--day-bg);
  color: var(--day-ink);
  overflow-x: hidden;
  font-synthesis-weight: none;
}
body.t-floor { background: var(--floor-bg); color: var(--floor-ink); }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-variation-settings: var(--wonk, "SOFT" 20, "WONK" 1);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.018em;
  margin: 0;
  text-wrap: balance;
}

:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--day-ink); color: var(--day-bg); padding: .75rem 1rem;
  font-family: var(--f-mono); font-size: .8rem;
}
.skip:focus { left: .5rem; top: .5rem; }

.eyebrow, .timestamp, .stamp, .filter-label, .chip, .tag,
.card-excerpt, .foot-nav h2, .foot-social h2, .section-more, .run-note {
  font-family: var(--f-ui);
}

.eyebrow {
  font-family: var(--f-mono);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 .75rem;
}

.lede {
  font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem);
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 1rem 0 0;
}

/* ---------------------------------------------------------------- chrome */

.site-head {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .85rem var(--gutter);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}
.site-head::after {
  content: ""; position: absolute; inset: auto 0 -1px 0; height: 1px;
  background: var(--iris); opacity: .3;
}

.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }

/* Her own mark, rebuilt as vectors from the 500px wordmark on the old site plus the ring she
   uses on Instagram, so it stays sharp at any size. The full lockup is drawn for a 320px avatar
   and closes up below about 64px, so the header carries the ring alone (build/make_mark.py) and
   the footer carries the lockup at 72px, where there is room to read it. */
.brand-mark { width: 2.9rem; height: 2.9rem; flex: none; }
.brand-mark--lg { width: 3.5rem; height: 3.5rem; }
.brand-disc { width: 3rem; height: 3rem; flex: none; border-radius: 50%; }
.brand-disc--lg { width: 4.5rem; height: 4.5rem; }

.brand-word {
  font-family: var(--f-display); font-size: 1.22rem; font-weight: 600;
  font-variation-settings: "SOFT" 30, "WONK" 1;
  letter-spacing: -.02em;
}
/* Camelcase is her own prior usage. Dropping the middle word back to the soft ink separates the
   three words without a space and without inventing an italic she has never used. */
.brand-about { color: var(--ink-soft); }

.site-nav { margin-left: auto; display: flex; gap: 1.6rem; align-items: center; }
.site-nav a {
  font-size: .9rem; text-decoration: none; letter-spacing: .01em;
  padding: .3rem 0; border-bottom: 2px solid transparent; color: var(--ink);
}
.site-nav a:hover { border-bottom-color: var(--accent); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--accent); }
.site-nav .nav-cta {
  border: 1px solid color-mix(in srgb, var(--ink) 32%, transparent);
  border-radius: 999px; padding: .4rem 1rem;
}
.site-nav .nav-cta:hover { border-color: var(--accent); background: var(--accent); color: var(--bg); }

.site-head--floor {
  --bg: var(--floor-bg); --ink: var(--floor-ink); --rule: var(--floor-rule);
  --edge: var(--floor-edge); --on-accent: #0c0716;
  --accent: var(--floor-accent); --ink-soft: var(--floor-ink-soft);
  --magenta: var(--magenta-lit); --cyan: var(--cyan-lit);
  color: var(--floor-ink);
}

.nav-toggle { display: none; }

/* ----------------------------------------------------------------- clock */

/* The spine of the home page. Each mark is an hour of the night, and the active one lights as you
   scroll, so the register change from bone to ink reads as time passing rather than as decoration. */
.clock { position: fixed; left: 0; top: 0; bottom: 0; width: 7rem; z-index: 30;
         display: grid; place-items: center; color: var(--day-ink); }
/* Fixed to the body, so it cannot inherit the register of the section behind it. The script
   swaps this class the same way it swaps the header. */
.clock--floor { color: var(--floor-ink); }
.clock-marks {
  list-style: none; margin: 0; padding: 1.2rem 0; display: grid; gap: .38rem;
  position: relative; justify-items: start;
}
/* the elastic */
.clock-marks::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 6px;
  width: 1px; background: currentColor; opacity: .38;
}
.clock-marks li { position: relative; }
.clock-marks a {
  display: grid; grid-template-columns: 13px 1fr; align-items: center; gap: .6rem;
  text-decoration: none; padding: .35rem .25rem; min-height: 24px;
}
.bead {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--bead, #6b5d84); opacity: .5;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.25);
  transition: opacity .3s, transform .3s;
}
.clock-marks li:nth-child(1) { --bead: #662d91; }
.clock-marks li:nth-child(2) { --bead: #cb65cb; }
.clock-marks li:nth-child(3) { --bead: #ff7a2f; }
.clock-marks li:nth-child(4) { --bead: #e4467e; }
.clock-marks li:nth-child(5) { --bead: #23b273; }
.clock-marks li:nth-child(6) { --bead: #046eb9; }
.clock-t {
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .05em;
  opacity: .72; transition: opacity .25s; white-space: nowrap; color: currentColor;
}

.clock-marks li.is-on .bead { opacity: 1; transform: scale(1.3) rotate(-8deg); }
.clock-marks li.is-on .clock-t { font-weight: 500; }
.clock-marks li.is-on .clock-t,
.clock-marks a:hover .clock-t,
.clock-marks a:focus-visible .clock-t { opacity: 1; }
.clock-marks a:hover .bead, .clock-marks a:focus-visible .bead { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .clock-marks li.is-on .bead { transform: none; }
}

/* ---------------------------------------------------------------- layout */

.hero, .floor, .peak, .people, .credits, .after,
.archive-head, .filters, .card-grid, .result-count, .more-wrap, .tag-rail,
.story, .related, .about, .shooters, .contact, .gallery,
.shooter-contact, .section-more, .run, .archive-fallback {
  padding-left: var(--gutter); padding-right: var(--gutter);
}

/* Centred prose blocks. Adding the gutter to the measure rather than subtracting it from it:
   the earlier version took the padding out of the 34rem cap and gave a 1512px screen the same
   320px column as a phone, and the version after that left phones with no side padding at all. */
.notfound, .shooter-bio {
  margin-inline: auto;
  padding-inline: var(--gutter);
  max-width: calc(var(--measure) + var(--gutter) * 2);
}
/* The biography is body copy, so it lines up with the heading above it rather than sitting in
   the middle of the shell 264px to its right. */
/* The biography lines up with the heading above it: same shell, same gutter, measure capped on
   the paragraphs rather than on the block. */
.shooter-bio {
  margin-inline: auto; max-width: var(--shell);
}
.shooter-bio > * { max-width: var(--measure); }
.contact > .archive-head { padding-inline: 0; }

.hero, .floor, .peak, .people, .credits, .after { padding-block: clamp(3.5rem, 8vw, 7rem); }
.hero { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3.5rem, 8vw, 6rem); }
.floor + .peak { padding-top: clamp(1.75rem, 4vw, 3.5rem); }

.section-head { max-width: var(--shell); margin: 0 auto clamp(2rem, 4vw, 3rem); }
.section-h {
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.4rem);
  margin: .3rem 0 0;
}
.section-lede { color: var(--ink-soft); max-width: var(--measure); margin: .9rem 0 0; }
.section-more { max-width: var(--shell); margin: 2.5rem auto 0; }

.timestamp {
  font-family: var(--f-mono); font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0;
  display: flex; align-items: center; gap: .8rem;
}
.timestamp span {
  color: var(--magenta); font-weight: 500;
}
.timestamp::after {
  content: ""; flex: 1; height: 1px; background: var(--rule); max-width: 8rem;
}

/* ------------------------------------------------------------------ hero */

.hero { position: relative; }
.hero .timestamp { max-width: var(--shell); margin: 0 auto 2rem; }

.hero-grid {
  max-width: var(--shell); margin: 0 auto;
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}

.hero-h {
  font-size: clamp(2.4rem, 1.1rem + 4.6vw, 4.6rem);
  font-variation-settings: "SOFT" 12, "WONK" 1;
  letter-spacing: -.03em;
}
.hero-h em { font-style: normal; color: var(--day-accent); }

.hero-sub {
  font-family: var(--f-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.1rem, 1rem + .8vw, 1.6rem);
  color: var(--ink); margin: 1.1rem 0 0;
}
.hero-body { max-width: 30rem; color: var(--ink-soft); margin: 1.4rem 0 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.9rem 0 0; }

.hero-art { margin: 0; }
.hero-art img { border-radius: var(--r); box-shadow: 0 24px 60px -30px rgba(23,16,26,.55); }
.hero-art figcaption,
.peak-art figcaption {
  font-family: var(--f-mono); font-size: .74rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-soft); margin-top: .7rem;
}

.stat-row {
  max-width: var(--shell); margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  padding: 1.5rem 0 0; border-top: 1px solid var(--rule);
  list-style: none; display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.stat-row li { display: grid; gap: .2rem; }
.stat-row strong {
  font-family: var(--f-display); font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem);
  font-weight: 600; font-variation-settings: "SOFT" 20, "WONK" 0;
}
.stat-row span {
  font-family: var(--f-mono); font-size: .74rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-soft);
}

/* --------------------------------------------------------------- marquee */

/* Igloofest's trick: the ticker runs slowly until you touch it, then snaps. Here it is the list of
   rooms she actually covers, so hovering it is a way of reading the beat, not an effect. */
.marquee {
  --speed: 44s;
  position: relative; display: flex; align-items: center; gap: .75rem;
  border-block: 1px solid var(--floor-rule);
  background: var(--floor-raised); padding: .7rem 1rem .7rem 0;
}
/* The control sits beside the moving band, not on top of it. Pinned over the track it chopped a
   venue name in half on every pass. */
.marquee-band {
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  /* Fade the names out at both edges instead of guillotining them. */
  mask-image: linear-gradient(90deg, transparent 0, #000 2.5rem,
                              #000 calc(100% - 2.5rem), transparent 100%);
}
.marquee-stop {
  flex: none; order: 2;
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .35rem .7rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--floor-edge); background: var(--floor-bg); color: var(--floor-ink);
}
.marquee-stop:hover { border-color: var(--floor-accent); color: var(--floor-accent); }
.marquee.is-paused .marquee-track { animation-play-state: paused; }
.marquee-track {
  display: flex; gap: 2.5rem; width: max-content;
  animation: slide var(--speed) linear infinite;
}
/* Pausing on hover beats speeding up: these are links, and you cannot click a moving target. */
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee a {
  font-family: var(--f-display); font-size: 1.05rem; font-weight: 600;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  color: var(--floor-ink-soft); white-space: nowrap; text-decoration: none;
  transition: opacity .2s, color .2s;
}
.marquee a:hover, .marquee a:focus-visible { color: var(--floor-accent); }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* ----------------------------------------------------------------- cards */

.card-grid {
  max-width: var(--shell); margin: 0 auto;
  display: grid; gap: clamp(1.25rem, 2.5vw, 2rem);
}
.card-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
/* The gutter widens at desktop while the shell stays capped, so auto-fill tipped from three
   columns to two on the widest screens and orphaned the last card. */
@media (min-width: 640px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.card-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }

.card-link {
  display: grid; gap: .9rem; text-decoration: none; height: 100%;
  align-content: start;
}
.card-art {
  aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r);
  background: var(--bg-sunk);
}
.card-art img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.3,1), filter .5s;
  filter: saturate(1.02);
}
.card-link:hover .card-art img { transform: scale(1.035); filter: saturate(1.18); }
.card-title {
  font-size: 1.16rem; line-height: 1.2; font-weight: 600;
  font-variation-settings: "SOFT" 30, "WONK" 0;
}
.card-excerpt {
  font-size: .88rem; color: var(--ink-soft); margin: .45rem 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card--noart .card-art { display: none; }

/* The stamp: where, how long ago, what kind. Age is relative on purpose, so a four year old recap
   reads as depth instead of as a site nobody has touched. */
.stamp {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0;
  font-family: var(--f-mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft);
}
.stamp > * { display: inline-flex; align-items: center; }
.stamp > *:not(:last-child)::after { content: "·"; margin-left: .5rem; opacity: .5; }
.stamp-format { color: var(--accent); }
.stamp-format[data-format="Interview"] { color: var(--magenta); }
.stamp-format[data-format="Recap"] { color: var(--amber); }
.stamp-format[data-format="Listen"], .stamp-format[data-format="Watch"] { color: var(--mint); }

/* ---------------------------------------------------------------- peak */

.peak { text-align: center; }
.peak .timestamp { max-width: var(--shell); margin: 0 auto 2.5rem; }
.peak-art { margin: 0 auto; max-width: 74rem; }
.peak-art img { border-radius: var(--r); }
.pull {
  max-width: 44rem; margin: clamp(2.5rem, 6vw, 4rem) auto; padding: 0;
}
.pull p {
  font-family: var(--f-display); font-weight: 400; font-style: italic;
  font-size: clamp(1.4rem, 1.1rem + 1.8vw, 2.4rem);
  line-height: 1.15; margin: 0;
  font-variation-settings: "SOFT" 60, "WONK" 1;
}
.pull cite {
  display: block; margin-top: 1rem; font-style: normal;
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft);
}

.feature-list {
  max-width: var(--shell); margin: 0 auto; text-align: left;
  border-top: 1px solid var(--rule);
}
.feature {
  display: grid; gap: .35rem 1.5rem; align-items: baseline;
  grid-template-columns: 10rem 1fr auto;
  padding: 1.1rem .5rem; border-bottom: 1px solid var(--rule);
  text-decoration: none; transition: background .25s, padding-left .25s;
}
.feature:hover { background: var(--bg-sunk); padding-left: 1.1rem; }
.feature-date, .feature-format {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft);
}
.feature-format { color: var(--accent); }
.feature-title {
  font-family: var(--f-display); font-size: 1.15rem; font-weight: 600;
  font-variation-settings: "SOFT" 30, "WONK" 0;
}

/* ---------------------------------------------------------- the roll call */

/* Twenty four people who gave her an hour. Set as a list of names at display size, because the
   name is the story here and a card grid would bury it. */
.roll { list-style: none; margin: 0 auto; padding: 0; max-width: var(--shell); }
.roll li { border-bottom: 1px solid var(--rule); }
.roll a {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: .55rem .25rem; text-decoration: none;
  transition: color .25s, padding-left .25s;
}
.roll-name {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 1rem + 2.6vw, 3rem);
  font-weight: 600; line-height: 1.1; letter-spacing: -.02em;
  font-variation-settings: "SOFT" 20, "WONK" 1;
}
.roll a:hover { color: var(--magenta); padding-left: .9rem; }
.roll-meta {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft);
}

/* --------------------------------------------------------------- credits */

.credit-pair {
  max-width: var(--shell); margin: 0 auto;
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.credit {
  display: grid; gap: .8rem; align-content: start; text-decoration: none;
  padding: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  background: var(--bg-sunk); border: 1px solid var(--rule); border-radius: var(--r);
  overflow: hidden;
  transition: transform .3s, border-color .3s;
}
.credit > :not(.credit-art) { margin-inline: clamp(1.5rem, 3vw, 2.25rem); }
.credit-art {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: .6rem;
  transition: transform .5s, filter .5s; filter: saturate(1.02);
}
.credit:hover .credit-art { transform: scale(1.03); filter: saturate(1.15); }
.credit:hover { transform: translateY(-3px); border-color: var(--accent); }
.credit h3 { font-size: 1.6rem; }
.credit p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.credit-go {
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
}
.credit-go::after { content: " \2192"; }

/* ---------------------------------------------------------------- latest */

.latest { list-style: none; margin: 0 auto; padding: 0; max-width: var(--shell); }
.latest li { border-bottom: 1px solid var(--rule); }
.latest a {
  display: grid; gap: .3rem 1.5rem; align-items: baseline;
  grid-template-columns: 10rem 1fr auto;
  padding: 1rem .3rem; text-decoration: none;
  transition: background .25s, padding-left .25s;
}
.latest a:hover { background: var(--bg-sunk); padding-left: .9rem; }
.latest time, .latest-format {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft);
}
.latest-format { color: var(--accent); }
.latest-title { font-family: var(--f-display); font-size: 1.1rem; font-weight: 600; }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--f-ui); font-size: .88rem; font-weight: 500;
  padding: .7rem 1.35rem; border-radius: 999px; text-decoration: none;
  border: 1px solid currentColor; color: var(--ink); background: transparent;
  cursor: pointer; transition: background .25s, color .25s, border-color .25s;
}
.btn { border-color: var(--edge); }
.btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn--ghost { border-color: color-mix(in srgb, var(--ink) 22%, transparent); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--primary:hover { filter: brightness(1.12); background: var(--accent); color: var(--on-accent); }

/* --------------------------------------------------------------- archive */

.archive-head { max-width: var(--shell); margin: 0 auto; padding-block: clamp(3rem, 7vw, 5.5rem) 0; }
.archive-head h1 { font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem); }

/* The run: one bar per month of publishing. It is the shape of four years of work, and it doubles
   as the date filter. */
.run { max-width: var(--shell); margin: clamp(2.5rem, 5vw, 4rem) auto 0; }
.run-note { font-size: .9rem; color: var(--ink-soft); margin: .5rem 0 1.25rem; }
.run-chart { border-block: 1px solid var(--rule); padding: 1rem 0 .4rem; }
.run-bars { display: flex; align-items: stretch; gap: 1px; height: 6.5rem; }
.run-bar {
  flex: 1 1 0; min-width: 6px; border: 0; background: transparent;
  padding: 0 0 0 1px; margin: 0 -1px; box-sizing: content-box;
  display: flex; align-items: flex-end; cursor: pointer;
}
.run-bar > span {
  display: block; width: 100%; height: var(--h, 4%); border-radius: 1px 1px 0 0;
  background: linear-gradient(to top, var(--accent), color-mix(in srgb, var(--accent) 45%, transparent));
  transition: background .2s, filter .2s;
}
.run-bar:hover > span, .run-bar:focus-visible > span { background: var(--magenta); filter: brightness(1.15); }
.run-bar[aria-pressed="true"] > span { background: var(--amber); }
.run-bars:hover .run-bar:not(:hover) > span { filter: brightness(.7); }
.run-bar[disabled] { cursor: default; }
.run-bar[disabled] > span { opacity: .3; }
.run-bar:focus-visible { outline-offset: -2px; }
.run-axis {
  position: relative; height: 1rem; margin-top: .5rem;
  font-family: var(--f-mono); font-size: .64rem; letter-spacing: .1em; color: var(--ink-soft);
}
.run-axis span { position: absolute; transform: translateX(-50%); }

/* The list every visitor gets when the index cannot load, and the only list a visitor with
   JavaScript off ever sees. */
.archive-fallback { max-width: var(--shell); margin: 2rem auto 0; }
.archive-fallback h2 { font-size: 1.4rem; margin: 2rem 0 .75rem; }
.archive-fallback ul { list-style: none; margin: 0; padding: 0; columns: 2 20rem; column-gap: 2rem; }
.archive-fallback li { margin: 0 0 .4rem; break-inside: avoid; font-size: .92rem; }
.archive-fallback a { color: var(--ink); text-decoration: none; }
.archive-fallback a:hover { text-decoration: underline; }
.archive-fallback .stamp { display: inline-flex; margin-left: .5rem; }
.run-selection { margin: 1rem 0 0; display: flex; align-items: center; gap: .75rem;
                 font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; }

.filters { max-width: var(--shell); margin: clamp(2rem, 4vw, 3rem) auto 0; display: grid; gap: 1rem; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.filter-label {
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); width: 4.5rem; flex: none;
}
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip {
  font-family: var(--f-ui); font-size: .8rem; line-height: 1;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .85rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--edge); background: transparent; color: var(--ink);
  transition: border-color .2s, background .2s, color .2s;
}
.chip:hover { border-color: var(--accent); }
.chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chip.is-on .chip-n { opacity: .8; }
.chip-n { font-family: var(--f-mono); font-size: .66rem; opacity: .65; }
.chip--clear { border-style: dashed; }

.filter-row--search input[type="search"] {
  flex: 1 1 16rem; min-width: 0;
  font: inherit; font-size: .9rem; padding: .55rem .9rem;
  border: 1px solid var(--edge); border-radius: 999px;
  background: var(--bg-sunk); color: var(--ink);
}
.filter-row--search input::placeholder { color: var(--ink-soft); }

.result-count {
  max-width: var(--shell); margin: 2rem auto 1.25rem;
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft);
}
.more-wrap { max-width: var(--shell); margin: 2.5rem auto 0; text-align: center; }

.tag-rail { max-width: var(--shell); margin: clamp(3rem, 7vw, 5rem) auto; padding-block: 2.5rem 0;
            border-top: 1px solid var(--rule); }
.tag-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.tag {
  font-family: var(--f-ui); font-size: .82rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .8rem; border-radius: 999px;
  border: 1px solid var(--edge); background: transparent; color: var(--ink);
  transition: border-color .2s, background .2s, color .2s;
}
.tag:hover { border-color: var(--magenta); color: var(--magenta); }
.tag.is-on {
  background: var(--magenta); border-color: var(--magenta); color: var(--on-accent);
}
.tag.is-on .chip-n { opacity: .85; }

/* ----------------------------------------------------------------- story */

.story { max-width: 100%; padding-block: 0 clamp(3rem, 6vw, 5rem); }
.story-hero {
  margin: 0 calc(var(--gutter) * -1) clamp(2rem, 4vw, 3rem);
  max-height: 62vh; overflow: hidden;
}
.story-hero img { width: 100%; height: 62vh; object-fit: cover; }

/* The inset treatment for a small source: the same frame blurred and dimmed behind it, the sharp
   copy centred at its own size. */
.story-hero--inset {
  max-height: none; position: relative; isolation: isolate;
  display: grid; place-items: center;
  padding: clamp(1.25rem, 2.5vw, 2.25rem) var(--gutter);
  background: var(--floor-raised);
}
.story-hero--inset::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 35%, rgba(8,4,16,.72) 100%);
}
.story-hero--inset::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--plate); background-size: cover; background-position: center;
  filter: blur(56px) saturate(1.4) brightness(.34) hue-rotate(-8deg); transform: scale(1.3);
}
.story-hero--inset img {
  width: auto; height: auto; max-width: min(100%, 62rem); max-height: 62vh;
  object-fit: contain; border-radius: var(--r);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.75);
}
.story-head-inner { max-width: var(--measure); margin: 0 auto; }
.story-head h1 {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.2rem);
  margin: .9rem 0 0;
}
.story-byline {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em;
  color: var(--ink-soft); margin: 1.2rem 0 0; line-height: 1.7;
}
.story-byline .sep { color: var(--ink-soft); margin: 0 .35rem; }
.story-byline .byline-who, .story-byline .byline-when { display: block; }

.story-body { max-width: var(--measure); margin: clamp(2rem, 4vw, 3rem) auto 0; }

.prose {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-size: 1.14rem; line-height: 1.68; font-weight: 300;
}
.prose p { margin: 0 0 1.35em; }
.story-body > p:first-of-type::first-letter {
  float: left; font-size: 3.6em; line-height: .82; font-weight: 600;
  margin: .06em .09em 0 0; color: var(--accent);
  font-variation-settings: "SOFT" 60, "WONK" 1;
}
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose strong { font-weight: 600; }
.prose h2, .prose h3, .prose h4 {
  font-size: 1.5rem; margin: 2.2em 0 .6em; font-weight: 600;
  font-variation-settings: "SOFT" 20, "WONK" 1;
}
.prose h4 { font-size: 1.22rem; font-style: italic; }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 1.35em; }
.prose li { margin: 0 0 .5em; }
.prose img { margin: 2rem auto; border-radius: var(--r); }
.prose .answer {
  font-style: normal;
  margin-left: 1.1rem; padding-left: 1.15rem;
  border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
}

.prose blockquote {
  margin: 2rem 0; padding-left: 1.25rem; border-left: 2px solid var(--accent);
  font-style: italic; color: var(--ink-soft);
}
/* Several posts open with a bare "TICKETS" or "Donate Now" heading wrapping a single link. That
   is a button she wrote as a heading, and the extractor now gives every one of them the same
   shape, so this styles one thing instead of four. */
.prose .cta { margin: 0 0 1.6em; }
.prose .cta a {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--f-ui); font-size: .88rem; font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none;
  padding: .7rem 1.35rem; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
}
.prose .cta a::after { content: " \2197"; }
.prose .cta a:hover { filter: brightness(1.12); }

/* Photographs that were hot-linked to a CDN whose signed URLs have expired. Naming the gap beats
   leaving a sentence pointing at nothing. */
.prose .lost-photos {
  margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rule);
  font-family: var(--f-ui); font-size: .82rem; font-style: normal; color: var(--ink-soft);
}

.prose .embed { margin: 2rem 0; }
.prose .embed iframe { width: 100%; border: 0; border-radius: var(--r); min-height: 20rem; }
.prose .embed--spotify iframe, .prose .embed--soundcloud iframe { min-height: 10rem; }
.prose .embed--instagram {
  position: relative; padding: 1.4rem 1.4rem 1.4rem 2.6rem;
  border-left: 2px solid var(--magenta); border-radius: 0;
  background: var(--bg-sunk); font-size: 1rem; font-style: italic;
}
.prose .embed--instagram::before {
  content: "\201C"; position: absolute; left: .7rem; top: .35rem;
  font-family: var(--f-display); font-size: 2.4rem; line-height: 1; color: var(--magenta);
}
.prose .embed--instagram p { margin: 0; }
.prose .embed--instagram a {
  display: inline-block; margin-top: .9rem; font-style: normal; color: var(--accent);
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; border-bottom: 1px solid currentColor;
}

/* A Facebook video post needs more room than the shared minimum, and clipping one mid image with
   no scroll looks broken. */
.prose .embed--facebook iframe { min-height: 30rem; }
.prose .embed--youtube iframe, .prose .embed--vimeo iframe { aspect-ratio: 16 / 9; min-height: 0; }

.story-foot { max-width: var(--measure); margin: clamp(2.5rem, 5vw, 4rem) auto 0;
              padding-top: 2rem; border-top: 1px solid var(--rule); }
.story-tags { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.story-tags a {
  font-size: .78rem; text-decoration: none; padding: .35rem .75rem; border-radius: 999px;
  border: 1px solid var(--edge); color: var(--ink);
}
.story-tags a:hover { border-color: var(--magenta); color: var(--magenta); }
.story-share { font-family: var(--f-display); font-size: 1.15rem; font-style: italic; margin: 0 0 .9rem; }
.share-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.share {
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .5rem .9rem; border: 1px solid var(--edge); border-radius: 999px;
  text-decoration: none; background: transparent; color: var(--ink); cursor: pointer;
}
.share:hover { border-color: var(--accent); color: var(--accent); }

.related { max-width: var(--shell); margin: clamp(3rem, 6vw, 5rem) auto 0;
           padding-top: 2.5rem; border-top: 1px solid var(--rule); }
.related h2 { font-size: 1.6rem; margin-bottom: 1.75rem; }

/* ----------------------------------------------------------------- about */

.about { max-width: var(--shell); margin: 0 auto; padding-block: clamp(3rem, 7vw, 5rem); }
.about-head { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
              grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); }
.about-portrait { margin: 0; }
.about-portrait img { border-radius: var(--r); }
.about-head h1 { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.2rem); }
.about-body { margin: clamp(2.5rem, 5vw, 4rem) 0 0; max-width: var(--measure); }
.stat-row--about { margin-top: clamp(2.5rem, 5vw, 4rem); }
.about-values { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 2.5rem; border-top: 1px solid var(--rule); }
.about-values p { max-width: var(--measure); color: var(--ink-soft); }
.about-values .section-more { margin-left: 0; }

/* ------------------------------------------------------------- spotlight */

.shooters {
  max-width: var(--shell); margin: clamp(2.5rem, 5vw, 4rem) auto clamp(3rem, 7vw, 5rem);
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.shooter { text-decoration: none; display: grid; gap: 1rem; }
.shooter-art { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: var(--bg-sunk); }
.shooter-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.shooter:hover .shooter-art img { transform: scale(1.03); }
.shooter h2 { font-size: 1.9rem; }
.shooter-role, .shooter-count {
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); margin: .35rem 0 0;
}
.shooter-bio { margin-top: 2.5rem; }
.shooter-contact {
  max-width: var(--shell); margin: 1.5rem auto 0; display: flex; flex-wrap: wrap; gap: .75rem;
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
}
.shooter-contact a { color: var(--accent); }

.gallery { max-width: var(--shell); margin: clamp(2.5rem, 5vw, 4rem) auto 0; }
.gallery .section-h { font-size: 1.5rem; margin-bottom: 1.5rem; }
.gallery-grid {
  columns: 4 16rem; column-gap: clamp(.75rem, 1.5vw, 1.25rem);
}
.shot { margin: 0 0 clamp(.75rem, 1.5vw, 1.25rem); break-inside: avoid; position: relative; }
.shot img { border-radius: var(--r); width: 100%; }
/* The caption was revealed on hover, which meant a keyboard or touch visitor never learned who
   was in the frame. It is small, it is useful, it stays. */
.shot figcaption {
  margin-top: .45rem;
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------- contact */

.contact { max-width: var(--shell); margin: 0 auto; padding-block: clamp(3rem, 7vw, 5rem); }
.contact-grid {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.routes { margin: 1.5rem 0 0; }
.routes dt {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: 1.25rem;
}
.routes dd { margin: .3rem 0 0; }
.routes a { color: var(--accent); }
.field { display: grid; gap: .4rem; margin: 1.1rem 0 0; }
.field label {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.field input, .field textarea {
  font: inherit; font-size: .95rem; padding: .65rem .85rem;
  border: 1px solid var(--edge); border-radius: var(--r);
  background: var(--bg-sunk); color: var(--ink); width: 100%;
}
.field--actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.6rem; }
/* The honeypot has to be reachable by a bot and invisible to everyone else, so it is moved out of
   view rather than display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .85rem; color: var(--ink-soft); }

/* -------------------------------------------------------------- not found */

.notfound { max-width: var(--measure); margin: 0 auto; padding-block: clamp(5rem, 14vw, 10rem); text-align: center; }
.notfound h1 { font-size: clamp(2.2rem, 1.5rem + 3vw, 4rem); }
.notfound .hero-actions { justify-content: center; }

/* ---------------------------------------------------------------- footer */

.site-foot {
  --magenta: var(--magenta-lit); --amber: var(--amber-lit);
  --cyan: var(--cyan-lit); --mint: var(--mint-lit);
  --accent: var(--floor-accent); --rule: var(--floor-rule); --edge: var(--floor-edge);
  /* The footer is a register like any other. Without these two, anything placed here that reaches
     for the live token gets the bone value on an ink ground. */
  --ink: var(--floor-ink); --ink-soft: var(--floor-ink-soft);
  --on-accent: #0c0716;
  background: var(--floor-bg); color: var(--floor-ink);
  padding: clamp(3rem, 6vw, 4.5rem) var(--gutter) 2rem;
  border-top: 1px solid var(--floor-rule);
}
.foot-grid {
  max-width: var(--shell); margin: 0 auto;
  display: grid; gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
}
/* The footer names her, which the disc alone never did. */
.foot-lockup { display: flex; align-items: center; gap: .75rem; margin: 0; }
.foot-lockup .brand-word { font-size: 1.45rem; }
.foot-tagline {
  font-family: var(--f-display); font-size: 1.05rem; line-height: 1.35;
  margin: 1.15rem 0 0; color: var(--floor-ink-soft); max-width: 22rem;
}
.foot-nav, .foot-social { display: grid; gap: .5rem; align-content: start; }
.foot-nav h2, .foot-social h2 {
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--floor-ink-soft); font-weight: 400; margin: 0 0 .35rem;
}
.foot-nav a, .foot-social a {
  font-size: .9rem; text-decoration: none; color: var(--floor-ink);
  width: fit-content; border-bottom: 1px solid transparent;
}
.foot-nav a:hover, .foot-social a:hover { border-bottom-color: var(--floor-accent); }
.foot-legal {
  max-width: var(--shell); margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding-top: 1.5rem; border-top: 1px solid var(--floor-rule);
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: .08em;
  color: var(--floor-ink-soft);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
}

/* ------------------------------------------------------------ responsive */

/* The clock needs its own column. Widening the gutter gives it one without letting the body
   background show beside the dark sections. Below this width the page reclaims the space. */
@media (min-width: 1180px) {
  :root { --gutter: 8.5rem; }
}
@media (max-width: 1179px) {
  .clock { display: none; }
}

@media (max-width: 900px) {
  .hero-grid, .about-head { grid-template-columns: 1fr; }
  .about-portrait { max-width: 16rem; }
  .feature, .latest a { grid-template-columns: 1fr; }
  .feature-format, .latest-format { justify-self: start; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-hero img { height: 44vh; }
  .gallery-grid { columns: 3 12rem; }
}

@media (max-width: 760px) {
  .run-bars { pointer-events: none; }
  .run-bar { min-width: 2px; }
  .run-note::after {
    content: " Use the year buttons below to filter.";
  }
}

@media (max-width: 720px) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: .5rem; margin-left: auto;
    background: transparent; border: 1px solid var(--rule); border-radius: 999px;
    padding: .45rem .85rem; color: var(--ink); cursor: pointer;
    font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  }
  .nav-toggle-bars {
    width: 15px; height: 9px; border-top: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor; display: inline-block;
  }
  .site-nav {
    position: fixed; inset: 3.6rem 0 auto 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--rule);
    padding: .5rem var(--gutter) 1.25rem;
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: .85rem 0; border-bottom: 1px solid var(--rule); }
  .site-nav .nav-cta { margin-top: .85rem; text-align: center; border-radius: 999px; }
  .filter-label { width: 100%; }
  .foot-grid { grid-template-columns: 1fr; }
  .gallery-grid { columns: 2 8rem; }
  .story-hero { margin-inline: calc(var(--gutter) * -1); }
  .story-hero img { height: 34vh; }
  .story-hero--inset img { height: auto; max-height: 42vh; }
  .roll-name { font-size: clamp(1.35rem, 6vw, 2rem); }
}