/* Downtown Cabaret — 263 Golden Hill Street, Bridgeport
 *
 * The palette is taken from the building rather than invented: the brick of
 * the 1941 facade, the pale mortar, the white portico, the gold of the
 * marquee bulbs, and the sage of the painted floral frieze that runs around
 * the balcony rail inside.
 *
 * Type is Playfair Display over Barlow. Playfair is a transitional serif in
 * the same idiom as the building's Colonial Revival detailing; the old
 * theatre's Oswald was a poster face, right for a marquee and wrong for a
 * building with this much history behind it.
 *
 * Photography carries the page. The room is the product, so it is shown at
 * full bleed with type over it, rather than the other way round.
 */

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Barlow:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* From the building itself */
  --brick:      #8A4A32;
  --brick-dk:   #6B3524;
  --brick-lt:   #A86648;
  --mortar:     #E8DFD3;
  --plaster:    #FBF7F0;
  --plaster-2:  #F3ECE1;
  --bulb:       #E8B33A;
  --bulb-lt:    #F2C860;
  --sage:       #6E7256;

  /* Warm near-black: the house with the lights down, never a cold grey */
  --ink:        #17130F;
  --ink-2:      #211B15;
  --ink-3:      #2E251D;

  --tx:         #241E18;
  --tx-mute:    #5E534A;
  /* Darkened from #918479, which measured 3.40:1 on the plaster ground and
     2.76:1 on mortar, below the 4.5:1 AA minimum. This token carries form
     hints, the enquiry disclaimer and archive error messages, so it is body
     text and not decoration. #6B5C50 measures 6.01:1 and 4.87:1. */
  --tx-faint:   #6B5C50;
  --on-dark:    #F5F0E7;
  --on-dark-mute: #B5AC9F;
  /* 4.50:1 on ink was exactly at the line; #9A9086 gives 5.90:1 and reads
     better against warm photography behind the scrims. */
  --on-dark-faint: #9A9086;

  --rule:       rgba(245,240,231,.14);
  --rule-lt:    rgba(36,30,24,.14);
  --rule-soft:  rgba(36,30,24,.07);

  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1240px;
  --gut: clamp(20px, 5vw, 70px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tx);
  background: var(--plaster);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--bulb); outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.narrow { max-width: 68ch; }
/* Prose blocks align with the page's left column rather than centring,
   which is what `.wrap` alone would do to them. */
.wrap > .narrow:not(.center) { margin-left: 0; }
.measure { max-width: 62ch; }

/* ---- type ------------------------------------------------------------ */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.012em;
  margin: 0 0 .55em;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: clamp(40px, 6.4vw, 82px); line-height: 1.02; }
h2 { font-size: clamp(29px, 4vw, 50px); }
h3 { font-size: clamp(20px, 2.1vw, 26px); }
p { margin: 0 0 1.1em; }
em { font-style: italic; }

.lede {
  font-size: clamp(19px, 2.2vw, 25px);
  line-height: 1.5;
  color: var(--tx-mute);
  font-weight: 300;
  max-width: 54ch;
}

/* The eyebrow marks a section boundary. Set in mono so it reads as a label
   and never competes with the serif headline beneath it. */
.eyebrow {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brick);
  display: flex; align-items: center; gap: 12px; margin: 0 0 20px;
  font-weight: 500;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--brick); flex: none; opacity: .5; }
.dark .eyebrow, section.dark .eyebrow, .band .eyebrow { color: var(--bulb); }
.dark .eyebrow::before, section.dark .eyebrow::before, .band .eyebrow::before { background: var(--bulb); }

/* ---- marquee bulbs: the one flourish, rationed ----------------------- */
.bulbs {
  height: 9px;
  background-image: radial-gradient(circle, var(--bulb) 0 2px, transparent 2.4px);
  background-size: 19px 9px;
  background-repeat: repeat-x;
  background-position: center;
  opacity: .9;
}

/* ---- header ---------------------------------------------------------- */
header.site {
  position: sticky; top: 0; z-index: 70;
  background: var(--ink);
  color: var(--on-dark);
  border-bottom: 1px solid var(--rule);
}
/* align-items:center keeps the pill vertically centred rather than
   stretched, and the padding is what sets the bar's height. The pill grew
   past the row and clipped when it was sized without this. */
.bar { display: flex; align-items: center; gap: 26px; padding: 12px 0; min-height: 68px; }
.brand {
  display: flex; flex-direction: column; justify-content: center;
  text-decoration: none; flex: none; line-height: 1;
  /* 44px minimum: it is the way home from every page. */
  min-height: 44px;
}
.brand .dt {
  font-family: var(--mono); font-size: 10px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--bulb); margin-bottom: 4px;
}
.brand .cab {
  font-family: var(--display); font-size: 25px; font-weight: 600;
  color: var(--on-dark); letter-spacing: -.01em;
}
nav.main { margin-left: auto; display: flex; gap: 27px; align-items: center; }
nav.main a {
  font-family: var(--body); font-size: 14.5px; font-weight: 500;
  color: var(--on-dark-mute); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .16s, border-color .16s;
  /* 44px tall even on desktop. These measured 33px, which is fine for a
     mouse and not for the touchscreen laptops people actually use. The
     underline stays on the link's own bottom edge, so the row does not grow:
     the header is already taller than this. */
  /* min-width too: a short label like "Home" was 37px wide, and a target
     has two dimensions. Centred so the padding falls either side of the
     word rather than shifting it. */
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px;
}
nav.main a:hover, nav.main a[aria-current="page"] {
  color: var(--on-dark); border-bottom-color: var(--bulb);
}
/* Written at this weight deliberately: the generic `nav.main a` rule above is
   more specific than a bare class, so a `.btn-nav` alone loses and the pill
   inherits the link padding and clips its own label. */
nav.main a.btn-nav, .btn-nav {
  font-family: var(--body); font-size: 14px; font-weight: 600; line-height: 1.2;
  letter-spacing: .02em; background: var(--bulb); color: var(--ink);
  padding: 0 20px; min-height: 44px; display: inline-flex;
  align-items: center; text-decoration: none; border-radius: 1px;
  white-space: nowrap; display: inline-block; align-self: center;
  border-bottom: 1px solid transparent;
}
nav.main a.btn-nav:hover, .btn-nav:hover,
nav.main a.btn-nav[aria-current="page"] {
  background: var(--bulb-lt); color: var(--ink); border-bottom-color: transparent;
}
.menu-btn {
  display: none; background: none; border: 1px solid var(--rule);
  color: var(--on-dark); font-family: var(--mono); letter-spacing: .12em;
  text-transform: uppercase; font-size: 12px;
  /* 44px minimum: this is the only way to reach the nav on a phone, and it
     measured 65x36 before. A control a thumb misses is a control that is not
     there. */
  min-height: 44px; padding: 0 16px;
  border-radius: 1px; cursor: pointer; margin-left: auto;
}
@media (max-width: 960px) {
  nav.main {
    position: fixed; inset: 60px 0 auto 0; background: var(--ink);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px 0 20px; border-bottom: 1px solid var(--rule); margin-left: 0;
  }
  nav.main[hidden] { display: none; }
  nav.main a { padding: 14px var(--gut); border-bottom: 1px solid var(--rule); }
  nav.main a:hover, nav.main a[aria-current="page"] {
    border-bottom-color: var(--rule); color: var(--bulb);
  }
  nav.main .btn-nav { margin: 14px var(--gut) 0; text-align: center; }
  .menu-btn { display: block; }
}

/* ---- sections -------------------------------------------------------- */
section { padding: clamp(64px, 9vw, 128px) 0; }
section.dark { background: var(--ink); color: var(--on-dark); }
section.dark h2, section.dark h3 { color: var(--on-dark); }
section.dark p, section.dark .lede { color: var(--on-dark-mute); }
section.tint { background: var(--plaster-2); }
section.mortar { background: var(--mortar); }
section.tight { padding: clamp(44px, 6vw, 76px) 0; }

/* ---- hero: photography carries it ------------------------------------ */
.hero { position: relative; background: var(--ink); color: var(--on-dark); overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(23,19,15,.93) 0%, rgba(23,19,15,.76) 44%, rgba(23,19,15,.38) 100%),
    linear-gradient(180deg, rgba(23,19,15,.45) 0%, transparent 32%, rgba(23,19,15,.6) 100%);
}
/* When the photograph is itself the subject rather than a backdrop, the
   scrim only needs to carry the type, not hide the picture. */
.hero.subject .hero-media::after {
  background:
    linear-gradient(100deg, rgba(23,19,15,.88) 0%, rgba(23,19,15,.6) 40%, rgba(23,19,15,.2) 100%),
    linear-gradient(180deg, rgba(23,19,15,.4) 0%, transparent 34%, rgba(23,19,15,.5) 100%);
}
.hero.subject .hero-media img { filter: saturate(1.06) contrast(1.05); }
.hero-inner { position: relative; padding: clamp(64px, 9vw, 116px) 0 clamp(48px, 6.5vw, 78px); }
.hero h1 { color: var(--on-dark); max-width: 15ch; margin-bottom: 26px; }
.hero h1 em { font-style: italic; color: var(--bulb); }
.hero .lede { color: var(--on-dark-mute); max-width: 48ch; }
.hero .since {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--bulb); margin: 0 0 28px;
  display: flex; align-items: center; gap: 14px; font-weight: 500;
}
.hero .since::after { content: ""; height: 1px; flex: 1; max-width: 110px; background: rgba(232,179,58,.4); }

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.btn {
  display: inline-block; font-family: var(--body); font-size: 15px;
  font-weight: 600; letter-spacing: .02em; text-decoration: none;
  padding: 15px 30px; border-radius: 1px; border: 1px solid transparent;
  transition: background .16s, border-color .16s, color .16s; cursor: pointer;
}
.btn-primary { background: var(--bulb); color: var(--ink); border-color: var(--bulb); }
.btn-primary:hover { background: var(--bulb-lt); border-color: var(--bulb-lt); }
.btn-ghost { border-color: rgba(245,240,231,.36); color: var(--on-dark); background: transparent; }
.btn-ghost:hover { border-color: var(--bulb); color: var(--bulb); }
.btn-dark { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.btn-dark:hover { background: var(--brick-dk); border-color: var(--brick-dk); }
.btn-brick { background: var(--brick); color: var(--plaster); border-color: var(--brick); }
.btn-brick:hover { background: var(--brick-dk); border-color: var(--brick-dk); }

/* ---- stat strip ------------------------------------------------------ */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--rule);
}
.stat { background: var(--ink-2); padding: 30px 26px; }
.stat b {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(34px, 4.6vw, 54px); color: var(--bulb);
  line-height: 1; margin-bottom: 10px;
}
.stat span {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--on-dark-faint); line-height: 1.5; display: block;
}

/* ---- editorial split ------------------------------------------------- */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 84px); align-items: center;
}
.split.wide-left { grid-template-columns: 1.25fr 1fr; }
.split.wide-right { grid-template-columns: 1fr 1.25fr; }
@media (max-width: 900px) {
  .split, .split.wide-left, .split.wide-right { grid-template-columns: 1fr; }
}
.split img { border-radius: 1px; }

/* A photograph with a caption reads as evidence rather than decoration,
   which is what venue photography has to be. */
figure { margin: 0; }
figure img { border-radius: 1px; }
figcaption {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tx-faint);
  margin-top: 12px; line-height: 1.6;
}
.dark figcaption, section.dark figcaption { color: var(--on-dark-faint); }

/* Archival images are small and soft. Presenting one as a framed plate is
   honest about its age instead of upscaling it and hoping nobody notices. */
.plate { background: var(--plaster); padding: clamp(14px, 2vw, 22px); border: 1px solid var(--rule-lt); }
.plate img { filter: saturate(.92) contrast(1.04); }
.dark .plate, section.dark .plate { background: var(--ink-2); border-color: var(--rule); }

/* The only surviving photograph of the facade is 400x300. Blown up to fill a
   hero it looks like a mistake; held at its own size inside a generous mount
   it reads as what it is, a small archival print of a building nobody
   photographed well. The mount does the work the pixels cannot.
   `image-rendering: auto` is explicit because some browsers apply nearest
   neighbour to heavily scaled images, which would make it worse. */
/* The band holding the archival plate gets its own tighter cap: at 1920 the
   default wrap let the mount and its copy drift apart. */
.split--plate { max-width: 1040px; margin-inline: auto; }
.plate--archival {
  background: var(--plaster);
  padding: clamp(28px, 5vw, 64px) clamp(24px, 5vw, 56px) clamp(20px, 3vw, 36px);
  border: 1px solid var(--rule-lt);
  box-shadow: 0 1px 0 rgba(36,30,24,.05), 0 18px 40px -28px rgba(36,30,24,.4);
  max-width: 520px;
}
.plate--archival img {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  image-rendering: auto;
  filter: saturate(.88) contrast(1.08) brightness(1.02);
  border: 1px solid rgba(36,30,24,.18);
}
.plate--archival figcaption {
  margin-top: clamp(18px, 2.5vw, 26px);
  text-align: center;
  border-top: 1px solid var(--rule-soft);
  padding-top: 14px;
}
section.dark .plate--archival { background: var(--ink-2); border-color: var(--rule); }
section.dark .plate--archival img { border-color: rgba(245,240,231,.18); }
section.dark .plate--archival figcaption { border-top-color: var(--rule); }

/* ---- full-bleed band ------------------------------------------------- */
.band { position: relative; min-height: clamp(360px, 52vw, 620px); display: grid; }
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(23,19,15,.92) 0%, rgba(23,19,15,.62) 46%, rgba(23,19,15,.12) 100%);
}
.band .band-inner {
  position: relative; z-index: 2; align-self: center;
  padding: clamp(50px, 7vw, 90px) 0; color: var(--on-dark);
}
.band h2 { color: var(--on-dark); }
.band p { color: var(--on-dark-mute); }
.band .lede { color: var(--on-dark-mute); }

/* ---- uses: not everything is a card ---------------------------------- */
.grid { display: grid; gap: 26px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }

.use { border-top: 2px solid var(--brick); padding-top: 22px; display: flex; flex-direction: column; }
.use .num {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  color: var(--brick); margin-bottom: 14px; text-transform: uppercase; font-weight: 500;
}
.use h3 { margin-bottom: 10px; }
.use p { font-size: 16px; color: var(--tx-mute); margin-bottom: 18px; }
.use .more {
  margin-top: auto; font-family: var(--body); font-size: 14.5px; font-weight: 600;
  text-decoration: none; color: var(--ink);
  align-self: flex-start;
  /* The rule stays visually tight to the text while the hit area reaches
     44px: an inline-flex box with min-height, and the underline drawn as a
     border on an inner span rather than on the link itself. Padding alone
     would push the rule away from the words. */
  display: inline-flex; align-items: center; min-height: 44px;
}
.use .more > span, .use .more::after { border-bottom: 2px solid var(--bulb); }
.use .more::after { content: none; }
.use .more:hover { color: var(--brick); }
section.dark .use { border-top-color: var(--bulb); }
section.dark .use .num { color: var(--bulb); }
section.dark .use h3 { color: var(--on-dark); }
section.dark .use p { color: var(--on-dark-mute); }
section.dark .use .more { color: var(--on-dark); }

.card {
  background: #fff; border: 1px solid var(--rule-soft);
  padding: 30px 28px; display: flex; flex-direction: column;
}
.card h3 { margin-bottom: 10px; }
.card p { font-size: 16px; color: var(--tx-mute); }

/* ---- heritage timeline: the building's own spine --------------------- */
.timeline { border-left: 1px solid var(--rule-lt); margin: 40px 0 0; padding: 0; list-style: none; }
section.dark .timeline { border-left-color: var(--rule); }
.timeline li { position: relative; padding: 0 0 38px 34px; }
.timeline li::before {
  content: ""; position: absolute; left: -5px; top: 9px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bulb); border: 2px solid var(--plaster);
}
section.dark .timeline li::before { border-color: var(--ink); }
section.tint .timeline li::before { border-color: var(--plaster-2); }
section.mortar .timeline li::before { border-color: var(--mortar); }
.timeline .year {
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
  color: var(--brick); display: block; margin-bottom: 7px; font-weight: 500;
}
section.dark .timeline .year { color: var(--bulb); }
.timeline h3 { font-size: 21px; margin-bottom: 7px; }
.timeline p { font-size: 16px; color: var(--tx-mute); margin: 0; max-width: 58ch; }
section.dark .timeline p { color: var(--on-dark-mute); }

/* ---- spec table ------------------------------------------------------ */
.tbl-scroll { overflow-x: auto; margin: 26px 0 0; }
.spec { width: 100%; border-collapse: collapse; min-width: 480px; }
.spec th, .spec td {
  text-align: left; padding: 15px 16px; border-bottom: 1px solid var(--rule-soft);
  vertical-align: top; font-size: 16px;
}
.spec th {
  font-family: var(--body); font-weight: 600; font-size: 15px;
  width: 34%; color: var(--ink);
}
.spec td { color: var(--tx-mute); }
section.dark .spec th, section.dark .spec td { border-color: var(--rule); }
section.dark .spec th { color: var(--on-dark); }
section.dark .spec td { color: var(--on-dark-mute); }

/* A fact we have not verified is marked, never quietly published. */
.tbd {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; background: rgba(232,179,58,.22);
  color: #5C4409; padding: 3px 8px; white-space: nowrap; border-radius: 1px;
}
section.dark .tbd { color: var(--bulb); background: rgba(232,179,58,.14); }

/* ---- pull quote ------------------------------------------------------ */
blockquote {
  margin: 34px 0; padding: 0 0 0 30px; border-left: 2px solid var(--bulb);
  font-family: var(--display); font-size: clamp(22px, 2.9vw, 34px);
  font-style: italic; font-weight: 400; line-height: 1.32;
  color: var(--ink); max-width: 24ch;
}
section.dark blockquote, .band blockquote { color: var(--on-dark); }
blockquote cite {
  display: block; font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tx-faint);
  font-style: normal; margin-top: 20px; line-height: 1.7;
}
section.dark blockquote cite, .band blockquote cite { color: var(--on-dark-faint); }

/* ---- forms ----------------------------------------------------------- */
.form {
  background: #fff; border: 1px solid var(--rule-soft);
  padding: clamp(26px, 4vw, 44px);
}
.field { margin-bottom: 21px; }
.field label {
  display: block; font-size: 15px; font-weight: 600;
  margin-bottom: 8px; color: var(--ink);
}
.field .hint {
  font-size: 14px; color: var(--tx-faint); margin: -4px 0 9px; font-weight: 400;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; font-family: var(--body); font-size: 16px;
  border: 1px solid #CFC4B6; border-radius: 1px; background: #fff; color: var(--tx);
}
.field input:focus, .field select:focus, .field textarea:focus,
/* A date input delegates focus to its internal day/month/year spinners, so
   `:focus` never matches the control and the ring vanishes for a keyboard
   user on exactly the two fields this form most needs them to complete.
   `:focus-within` puts it back. Found by a Tab walk, not by looking. */
.field:focus-within input[type="date"] {
  outline: 2px solid var(--bulb); outline-offset: 0; border-color: var(--bulb);
}
/* Radios and checkboxes carry their own ring: accent-color styles the control
   but does not give it a focus indicator. */
.checks input:focus-visible {
  outline: 2px solid var(--bulb); outline-offset: 2px;
}
.field textarea { min-height: 116px; resize: vertical; }
/* In a two-up row, a hint under one label pushes its input down while the
   other stays put. Aligning to the bottom keeps the row reading as one
   object regardless of how much helper text each field carries. */
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 21px; align-items: end; }
.f2 .field { margin-bottom: 0; display: flex; flex-direction: column; }
.f2 .field input, .f2 .field select { margin-top: auto; }
.form .f2 { margin-bottom: 21px; }
@media (max-width: 620px) { .f2 { grid-template-columns: 1fr; } }
.req { color: var(--brick); }
fieldset { border: 0; padding: 0; margin: 0 0 21px; }
fieldset legend {
  font-size: 15px; font-weight: 600; color: var(--ink); padding: 0; margin-bottom: 9px;
}
.checks { display: grid; gap: 9px; }
.checks label {
  display: flex; gap: 11px; align-items: flex-start; font-size: 16px;
  color: var(--tx-mute); font-weight: 400;
}
.checks input { width: auto; margin-top: 4px; flex: none; accent-color: var(--brick); }

.form-status { margin: 18px 0 0; padding: 13px 16px; font-size: 15px; border-radius: 1px; }
.form-status.is-ok { background: rgba(232,179,58,.16); color: var(--tx); }
.form-status.is-error { background: rgba(138,74,50,.1); color: var(--brick-dk); border-left: 2px solid var(--brick); }
.form-done {
  background: #fff; border: 1px solid var(--rule-soft); border-left: 2px solid var(--bulb);
  padding: clamp(28px, 4vw, 44px);
}
.form-done h3 { margin-bottom: 12px; }
.form-done p { color: var(--tx-mute); margin-bottom: 0; }
.form-done .form-ref {
  font-family: var(--mono); font-size: 13px; color: var(--tx-faint);
  margin-top: 16px; letter-spacing: .05em;
}

/* ---- archive --------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; align-items: center; }
.chip {
  font-family: var(--body); font-size: 14px; font-weight: 500;
  padding: 9px 17px; border: 1px solid var(--rule-lt); background: transparent;
  border-radius: 1px; cursor: pointer; color: var(--tx-mute);
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bulb); border-color: var(--ink); }
.archive { border-top: 1px solid var(--rule-lt); }
.arow {
  display: grid; grid-template-columns: 1fr auto auto; gap: 20px;
  align-items: baseline; padding: 15px 4px; border-bottom: 1px solid var(--rule-soft);
}
.arow .t { font-family: var(--display); font-size: 19px; font-weight: 500; }
.arow .d { font-family: var(--mono); font-size: 12px; color: var(--tx-faint); }
.arow .s {
  font-family: var(--mono); font-size: 10px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--tx-faint);
  border: 1px solid var(--rule-lt); padding: 4px 9px; white-space: nowrap;
}
@media (max-width: 640px) { .arow { grid-template-columns: 1fr; gap: 4px; } }
.count { font-family: var(--mono); font-size: 12px; color: var(--tx-faint); letter-spacing: .07em; margin-bottom: 16px; }

/* ---- notes ----------------------------------------------------------- */
.note {
  background: var(--mortar); border-left: 2px solid var(--brick);
  padding: 20px 24px; margin: 28px 0; font-size: 16px; color: var(--tx-mute);
}
.note strong { color: var(--ink); }
section.dark .note { background: var(--ink-2); color: var(--on-dark-mute); border-left-color: var(--bulb); }
section.dark .note strong { color: var(--on-dark); }
section.mortar .note { background: var(--plaster); }

/* ---- gallery --------------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 3px; }
.gallery figure { position: relative; }
.gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

/* ---- footer ---------------------------------------------------------- */
footer.site { background: var(--ink); color: var(--on-dark-mute); padding: 68px 0 34px; font-size: 15px; }
footer.site .fcol-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--on-dark); margin: 0 0 16px; font-weight: 500;
}
footer.site a { color: var(--on-dark-mute); text-decoration: none; }
footer.site a:hover { color: var(--bulb); }
.fgrid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 38px; margin-bottom: 48px; }
@media (max-width: 900px) { .fgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .fgrid { grid-template-columns: 1fr; } }
.flist { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.fbot {
  border-top: 1px solid var(--rule); padding-top: 26px; display: flex;
  flex-wrap: wrap; gap: 18px; justify-content: space-between;
  font-size: 13px; color: var(--on-dark-faint);
}
.fbrand .cab {
  font-family: var(--display); font-size: 30px; font-weight: 600;
  color: var(--on-dark); line-height: 1; display: block;
}
.fbrand .dt {
  font-family: var(--mono); font-size: 10px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--bulb); display: block; margin-bottom: 6px;
}

/* ---- utility --------------------------------------------------------- */
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.center .lede, .center p { margin-left: auto; margin-right: auto; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.skip {
  position: absolute; left: -9999px;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
}
.skip:focus {
  left: 10px; top: 10px; z-index: 200; background: var(--bulb);
  color: var(--ink); padding: 0 18px; border-radius: 1px;
  display: inline-flex; align-items: center; min-height: 44px;
}