/* ACME Creation Lab — the public site (facelift 2026-10-03).

   Look: a printed shop sheet. Warm paper, near-black ink, ONE accent — the
   machine red of the two dashes in the logo. Heavy condensed grotesque for
   headings (Archivo, width axis), the same family at normal width for text,
   IBM Plex Mono for the small labels and real data. Left-aligned, two-column
   sections with a sticky heading; hairlines only where they organise content.
   No glows, no gradients, no dark bands in the middle of the page.

   Motion (site.js): things settle in as they scroll into view, the hero's
   gears turn with the scroll and its layers drift at different rates
   (parallax). All of it is off under prefers-reduced-motion.

   Theme follows the visitor's system (data-bs-theme on <html>, set in the
   page head). Section HTML comes from the Website editor; the classes it uses
   are below — the older ones (.eyebrow, .btn-ember, .unit-info, …) are kept
   and restyled so existing snippets still fit. */

:root {
  --paper: #f2eee6;
  --paper-2: #e7e1d5;
  --ink: #1a1816;
  --ink-2: #57514a;
  --rule: rgba(26, 24, 22, .17);
  --red: #c2301c;
  --red-deep: #9a2413;
  --on-red: #fffaf4;
  --gear: #dcd5c7;
  --grain-blend: multiply;
  --grain-opacity: .055;

  /* older names, still used by editor snippets */
  --ember: var(--red);
  --ember-dark: var(--red-deep);
  --steel: var(--ink-2);
  --steel-light: var(--ink-2);

  --display: 'Archivo', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --text: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --nav-h: 4.25rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
[data-bs-theme="dark"] {
  --paper: #171513;
  --paper-2: #211e1b;
  --ink: #efe9df;
  --ink-2: #aea699;
  --rule: rgba(239, 233, 223, .17);
  --red: #e2503a;
  --red-deep: #f0705b;
  --on-red: #1a0b08;
  --gear: #2b2723;
  --grain-blend: screen;
  --grain-opacity: .035;
}

/* ── base ─────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + .5rem); }
html, body { overflow-x: clip; }
body {
  --bs-body-bg: var(--paper);
  --bs-body-color: var(--ink);
  --bs-link-color-rgb: 26, 24, 22;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* paper grain: one small tile, fixed, never in the way */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 1090; pointer-events: none;
  opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: var(--red); color: var(--on-red); }
img { max-width: 100%; }
a { color: inherit; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: .2em; }
a:hover { color: var(--red); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 1px; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 1100; padding: .6rem 1rem; background: var(--ink); color: var(--paper); text-decoration: none; transition: top .2s var(--ease); }
.skip-link:focus { top: .75rem; color: var(--paper); }

.wrap { width: min(100% - 2.5rem, 77rem); margin-inline: auto; }

h1, h2, h3, h4, h5 {
  font-family: var(--display); font-stretch: 78%; font-weight: 800;
  letter-spacing: -.012em; line-height: 1.02; color: var(--ink);
  text-wrap: balance; margin: 0 0 .5em;
}
h2 { font-size: clamp(2.3rem, 5vw, 4.1rem); }
h3 { font-size: clamp(1.45rem, 2.4vw, 2rem); font-stretch: 84%; }
h4 { font-size: 1.15rem; font-stretch: 88%; font-weight: 700; letter-spacing: 0; line-height: 1.2; }
.display { font-size: clamp(3.3rem, 10.5vw, 8.4rem); font-stretch: 68%; font-weight: 850; line-height: .9; letter-spacing: -.02em; }
p { margin: 0 0 1.1em; text-wrap: pretty; }
p, li, dd { max-width: 64ch; }
.lede { font-size: clamp(1.18rem, 1.7vw, 1.4rem); line-height: 1.45; font-weight: 500; color: var(--ink); }
.muted, .text-muted { color: var(--ink-2) !important; }
small, .small { color: var(--ink-2); }

/* the small label over a heading: mono, with the logo's red dash */
.kicker, .eyebrow {
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--mono); font-size: .78rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-2); margin: 0 0 1.4rem;
}
.kicker::before, .eyebrow::before { content: ""; flex: none; width: 1.75rem; height: 2px; background: var(--red); }
.eyebrow.text-center { justify-content: flex-start; text-align: left !important; }

/* ── buttons and links ────────────────────────────────────────────────── */
.btn {
  --bs-btn-border-radius: 2px; --bs-btn-font-weight: 700;
  font-family: var(--display); font-stretch: 88%; letter-spacing: .005em;
  padding: .8rem 1.35rem; border-width: 1.5px;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
}
.btn-lg { padding: .95rem 1.6rem; font-size: 1.08rem; }
.btn-sm { padding: .45rem .85rem; font-size: .9rem; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
/* through Bootstrap's own button variables, so its :active / .active states (scrollspy marks the
   nav's Donate button "active" while that section is on screen) stay red instead of going see-through */
.btn-red, .btn-ember {
  --bs-btn-bg: var(--red); --bs-btn-border-color: var(--red); --bs-btn-color: var(--on-red);
  --bs-btn-hover-bg: var(--red-deep); --bs-btn-hover-border-color: var(--red-deep); --bs-btn-hover-color: var(--on-red);
  --bs-btn-active-bg: var(--red-deep); --bs-btn-active-border-color: var(--red-deep); --bs-btn-active-color: var(--on-red);
  background: var(--red); border-color: var(--red); color: var(--on-red);
}
.btn-red:hover, .btn-red:focus-visible, .btn-ember:hover, .btn-ember:focus-visible { background: var(--red-deep); border-color: var(--red-deep); color: var(--on-red); }
.btn-line, .btn-outline-dark, .btn-outline-light { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-line:hover, .btn-outline-dark:hover, .btn-outline-light:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* a text link with an arrow that leans forward on hover */
.link, .link-arrow, .link-btn {
  display: inline-flex; align-items: baseline; gap: .45rem; padding: 0; border: 0; background: none;
  font-family: var(--display); font-stretch: 88%; font-weight: 700; font-size: 1.05rem; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: .28em;
  cursor: pointer;
}
.link::after, .link-arrow::after, .link-btn::after { content: "\2192"; display: inline-block; transition: transform .2s var(--ease); }
.link:hover, .link-arrow:hover, .link-btn:hover { color: var(--red); }
.link:hover::after, .link-arrow:hover::after, .link-btn:hover::after { transform: translateX(.3rem); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }
.note { font-size: .85rem; color: var(--ink-2); margin: .8rem 0 0; }

/* ── top bar ──────────────────────────────────────────────────────────── */
#mainNav {
  min-height: var(--nav-h); padding-block: .5rem;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
#mainNav.scrolled { border-bottom-color: var(--rule); background: color-mix(in srgb, var(--paper) 95%, transparent); }
#mainNav .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); line-height: 1; }
.brand:hover { color: var(--ink); }
.brand-mark {
  display: inline-block; flex: none; height: 1.55rem; aspect-ratio: 512 / 273; background: currentColor;
  -webkit-mask: url(/assets/img/anvil-mark.png) center / contain no-repeat; mask: url(/assets/img/anvil-mark.png) center / contain no-repeat;
}
.brand-name { font-family: var(--display); font-size: 1.12rem; font-stretch: 100%; font-weight: 500; letter-spacing: .01em; }
.brand-name strong { font-weight: 900; font-stretch: 112%; letter-spacing: .02em; }
#mainNav .nav-link {
  position: relative; padding: .4rem 0; margin: 0 .85rem; font-size: .95rem; font-weight: 500; color: var(--ink-2);
  transition: color .2s var(--ease);
}
#mainNav .nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease);
}
#mainNav .nav-link:hover, #mainNav .nav-link.active { color: var(--ink); }
#mainNav .nav-link:hover::after, #mainNav .nav-link.active::after { transform: scaleX(1); }
.navbar-toggler { border: 0; padding: .35rem; color: var(--ink); }
.navbar-toggler:focus { box-shadow: none; }
.nav-bars { display: block; width: 1.6rem; height: 2px; background: currentColor; box-shadow: 0 -.45rem 0 currentColor, 0 .45rem 0 currentColor; }
@media (max-width: 991.98px) {
  #mainNav { background: var(--paper); }
  #mainNav .navbar-collapse { flex-basis: 100%; }
  #mainNav .navbar-nav { padding: .75rem 0 1rem; border-top: 1px solid var(--rule); margin-top: .5rem; }
  #mainNav .nav-link { margin: 0; padding: .55rem 0; font-size: 1.05rem; display: inline-block; }
  #mainNav .nav-item .btn { margin-top: .6rem; }
}

/* ── sections ─────────────────────────────────────────────────────────── */
.band { padding: clamp(4.5rem, 10vw, 8.5rem) 0 clamp(5rem, 11vw, 9.5rem); border-top: 1px solid var(--rule); }
.band-tint { background: var(--paper-2); }
/* a heading column that stays put while its content scrolls past */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6.5rem); align-items: start; }
.split-head { position: sticky; top: calc(var(--nav-h) + 2rem); }
.split-head > :last-child, .split-body > :last-child { margin-bottom: 0; }
@media (max-width: 899.98px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split-head { position: static; }
}
.section-sub { font-size: clamp(1.1rem, 1.5vw, 1.25rem); line-height: 1.5; color: var(--ink-2); margin-inline: 0 !important; text-align: left !important; }

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero { position: relative; min-height: 100dvh; display: flex; align-items: center; overflow: clip; padding: calc(var(--nav-h) + 2.5rem) 0 clamp(3rem, 7vw, 5rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.hero-copy { position: relative; z-index: 2; }
.hero .display { margin: 0 0 1.6rem; }
.hero .display em { font-style: normal; color: var(--red); }
.hero-lede, .hero-lead { max-width: 34rem; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.45; font-weight: 500; color: var(--ink); margin-inline: 0 !important; }
/* three plain facts under the buttons, set like a spec line */
.hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; gap: 0 clamp(1.5rem, 4vw, 3.5rem); margin: clamp(2.5rem, 5vw, 4rem) 0 0 !important; padding: 1.1rem 0 0 !important; border-top: 1px solid var(--rule); list-style: none; }
.hero-facts > * { display: flex; flex-direction: column-reverse; gap: .2rem; max-width: none; margin: 0; }
.hero-facts dt, .hero-facts span { font-family: var(--mono); font-size: .74rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.hero-facts dd, .hero-facts strong { margin: 0; font-family: var(--display); font-stretch: 80%; font-weight: 800; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.1; color: var(--ink); }
/* the logo, taken apart: two gears turning behind the anvil */
.hero-art { position: relative; z-index: 1; aspect-ratio: 1 / .86; width: min(100%, 34rem); justify-self: end; }
.hero-art .gear { position: absolute; fill: var(--gear); will-change: transform; }
.hero-art .gear-a { width: 62%; left: 19%; top: 0; }
.hero-art .gear-b { width: 42%; left: -6%; top: 20%; }
.hero-art .gear-c { width: 42%; right: -6%; top: 20%; }
.gear-a { transform: rotate(calc(var(--spin, 0) * 1deg)); }
.gear-b { transform: rotate(calc(var(--spin, 0) * -1.333deg + 11deg)); }
.gear-c { transform: rotate(calc(var(--spin, 0) * -1.333deg - 4deg)); }
/* the anvil is a mask, so it takes the ink colour in either theme and stays sharp at any size */
.hero-art .anvil {
  position: absolute; left: 4%; bottom: 6%; width: 92%; aspect-ratio: 512 / 273; background: var(--ink);
  -webkit-mask: url(/assets/img/anvil-mark.png) center / contain no-repeat; mask: url(/assets/img/anvil-mark.png) center / contain no-repeat;
}
@media (max-width: 899.98px) {
  .hero { min-height: 0; padding-top: calc(var(--nav-h) + 2rem); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-art { order: -1; width: min(72%, 19rem); justify-self: start; margin-left: 4%; }
  .hero-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1rem; }
}

/* ── about ────────────────────────────────────────────────────────────── */
/* label / value rows: a spec table, not three boxes */
.facts { margin: 2.75rem 0 0; }
.facts > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: .25rem 1.5rem; padding: 1.05rem 0; border-top: 1px solid var(--rule); }
.facts dt { font-family: var(--mono); font-size: .78rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); padding-top: .25rem; }
.facts dd { margin: 0; font-weight: 500; }
@media (max-width: 575.98px) { .facts > div { grid-template-columns: minmax(0, 1fr); } }
/* the numbers */
.tally { margin-top: clamp(4rem, 8vw, 7rem); padding-top: clamp(2.5rem, 5vw, 4rem); border-top: 2px solid var(--ink); }
.tally-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 6vw, 6.5rem); align-items: end; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.tally-head > * { margin-bottom: 0; }
.tally-list, .stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2rem clamp(1rem, 3vw, 2.5rem); margin: 0; padding: 0; list-style: none; }
.tally-list li, .stats > * { max-width: none; padding-top: .9rem; border-top: 2px solid var(--red); }
.tally-list strong, .stats strong { display: block; font-family: var(--display); font-stretch: 70%; font-weight: 850; font-size: clamp(2.4rem, 4.6vw, 3.9rem); line-height: .95; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.tally-list span, .stats span { display: block; margin-top: .45rem; font-size: .95rem; color: var(--ink-2); }
@media (max-width: 899.98px) {
  .tally-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .tally-list, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── membership ───────────────────────────────────────────────────────── */
/* one plan, set like a printed ticket: price, tear line, what you get */
.ticket { border: 1.5px solid var(--ink); background: var(--paper); padding: clamp(1.5rem, 3.5vw, 2.75rem); }
.ticket-label { font-family: var(--mono); font-size: .78rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 .6rem; }
.price { display: flex; align-items: baseline; gap: .15em; margin: 0; font-family: var(--display); font-stretch: 66%; font-weight: 850; line-height: .82; color: var(--ink); font-size: clamp(5.5rem, 13vw, 9.5rem); letter-spacing: -.03em; }
.price .currency { font-size: .42em; align-self: flex-start; margin-top: .12em; color: var(--red); }
.price .period { font-family: var(--text); font-stretch: 100%; font-size: 1.15rem; font-weight: 500; letter-spacing: 0; color: var(--ink-2); margin-left: .5rem; }
.ticket-terms { margin: 1rem 0 0; color: var(--ink-2); }
.perks { list-style: none; margin: clamp(1.5rem, 3vw, 2.25rem) 0; padding: clamp(1.5rem, 3vw, 2.25rem) 0 0; border-top: 1.5px dashed var(--ink); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 2rem; }
.perks li { position: relative; padding-left: 1.5rem; max-width: none; line-height: 1.4; }
.perks li::before { content: "+"; position: absolute; left: 0; top: -.08em; font-family: var(--mono); font-weight: 500; font-size: 1.1rem; color: var(--red); }
@media (max-width: 575.98px) { .perks { grid-template-columns: minmax(0, 1fr); } }

/* ── rentals ──────────────────────────────────────────────────────────── */
.tabs { display: flex; flex-wrap: wrap; gap: .25rem 1.9rem; margin: clamp(2.5rem, 5vw, 4rem) 0 .25rem; }
.tabs button {
  padding: .35rem 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ink-2);
  font-family: var(--display); font-stretch: 88%; font-weight: 700; font-size: 1.1rem; cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.tabs button sup { top: -.55em; margin-left: .3rem; font-family: var(--mono); font-size: .68rem; font-weight: 500; color: var(--ink-2); }
.tabs button:hover { color: var(--ink); }
.tabs button.active { color: var(--ink); border-bottom-color: var(--red); }
/* a building directory: every open space, one line each */
.dir-group { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.dir-label { font-family: var(--mono); font-size: .78rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 .85rem; }
.dir-label b { font-weight: 500; color: var(--red); }
.dir { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); column-gap: clamp(1.5rem, 3.5vw, 3.25rem); border-bottom: 1px solid var(--rule); }
.dir-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .85rem .25rem; border-top: 1px solid var(--rule); color: var(--ink); text-decoration: none;
  transition: background-color .2s var(--ease), padding .2s var(--ease);
}
.dir-row[hidden], .shot[hidden], .dir-group[hidden] { display: none; }
.dir-row:hover { background: var(--paper-2); padding-inline: .75rem; color: var(--ink); }
.band-tint .dir-row:hover { background: var(--paper); }
.dir-name { font-family: var(--display); font-stretch: 84%; font-weight: 750; font-size: 1.22rem; line-height: 1.2; }
.dir-meta { font-family: var(--mono); font-size: .76rem; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-2); }
.dir-meta .soon { color: var(--red); }
.dir-go { margin-left: auto; font-family: var(--display); font-stretch: 88%; font-weight: 700; font-size: .95rem; color: var(--ink-2); white-space: nowrap; transition: color .2s var(--ease), transform .2s var(--ease); }
.dir-row:hover .dir-go { color: var(--red); transform: translateX(.2rem); }
.dir-empty { margin-top: 1.5rem; color: var(--ink-2); }
/* spaces that have a photo get a picture above the directory */
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 2rem clamp(1.25rem, 3vw, 2.5rem); margin-top: 2rem; }
.shot { color: var(--ink); text-decoration: none; }
.shot-frame { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.shot-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.shot:hover .shot-frame img { transform: scale(1.04); }
.shot .dir-name { display: block; margin-top: .8rem; }

/* ── volunteer, donate ────────────────────────────────────────────────── */
/* title + one line, stacked with a rule between: used for "ways to help" and "where it goes" */
.ways, .ways-list, .gives { list-style: none; margin: 0; padding: 0; }
.ways > li, .ways-list > li, .gives > * { max-width: none; padding: 1.35rem 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: .3rem 2rem; align-items: baseline; }
.ways > li:first-child, .ways-list > li:first-child, .gives > :first-child { border-top: 2px solid var(--ink); }
.ways h3, .ways h4, .ways-list h4, .gives h3, .gives h4 { font-size: 1.22rem; font-stretch: 84%; font-weight: 750; letter-spacing: 0; line-height: 1.2; margin: 0; text-transform: none !important; }
.ways p, .ways-list p, .gives p { margin: 0; color: var(--ink-2); }
.ways-list > li > span { display: none; }       /* the old 01–04 numerals */
.ways-list > li > div { display: contents; }
@media (max-width: 575.98px) { .ways > li, .ways-list > li, .gives > * { grid-template-columns: minmax(0, 1fr); } }
/* the closing line of the page, large, drifting sideways with the scroll */
.shout { overflow: clip; margin: clamp(4rem, 9vw, 7.5rem) calc(50% - 50vw) 0; padding: clamp(3rem, 7vw, 5.5rem) 0; border-top: 1px solid var(--rule); }
.band:has(> .wrap > .shout) { padding-bottom: 0; }
.shout p { max-width: none; width: max-content; margin: 0 auto; white-space: nowrap; font-family: var(--display); font-stretch: 64%; font-weight: 850; font-size: clamp(2.2rem, 7.9vw, 7.6rem); line-height: .95; letter-spacing: -.02em; color: var(--ink); will-change: transform; }
.shout em { font-style: normal; color: var(--red); }

/* ── contact ──────────────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem clamp(1.5rem, 4vw, 4rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.contact-grid > div { padding-top: 1.1rem; border-top: 2px solid var(--ink); }
.contact-head { font-family: var(--mono); font-size: .78rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 .9rem; }
.contact-grid p { margin: 0 0 .9rem; font-size: 1.2rem; font-weight: 500; line-height: 1.4; }
.contact-grid a:not(.link) { text-decoration-color: var(--rule); }
.contact-grid a:not(.link):hover { text-decoration-color: var(--red); }
.socials { list-style: none; margin: 0; padding: 0; font-size: 1.2rem; font-weight: 500; }
.socials li + li { margin-top: .35rem; }
@media (max-width: 767.98px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── footer ───────────────────────────────────────────────────────────── */
.footer { position: relative; overflow: clip; background: var(--ink); color: var(--paper); padding: clamp(3rem, 6vw, 5rem) 0 2rem; }
[data-bs-theme="dark"] .footer { background: #0f0e0d; color: var(--ink); }
.footer a { color: inherit; text-decoration-color: transparent; }
.footer a:hover { color: inherit; text-decoration-color: var(--red); }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem 4rem; }
.footer .brand { color: inherit; }
.footer .brand-mark { height: 2.1rem; }
.footer .brand-name { font-size: 1.35rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; list-style: none; margin: 0; padding: 0; font-weight: 500; }
.footer-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.25rem; border-top: 1px solid rgba(242, 238, 230, .2); font-size: .88rem; opacity: .75; }
.footer-meta p { margin: 0; max-width: none; }
.footer-gear { position: absolute; right: -6rem; bottom: -9rem; width: 22rem; fill: rgba(242, 238, 230, .06); transform: rotate(calc(var(--spin, 0) * .8deg)); will-change: transform; pointer-events: none; }

/* ── calendar popup ───────────────────────────────────────────────────── */
.modal-content { --bs-modal-bg: var(--paper); --bs-modal-border-radius: 2px; border: 1.5px solid var(--ink); color: var(--ink); }
.modal-header { border-bottom-color: var(--rule); }
.modal-title { font-size: 1.4rem; text-transform: none !important; }

/* ── older snippet classes, restyled so they still belong ─────────────── */
.py-section { padding: clamp(4.5rem, 10vw, 8.5rem) 0; border-top: 1px solid var(--rule); }
.section-alt { background: var(--paper-2); }
.card { --bs-card-bg: transparent; --bs-card-border-color: var(--rule); --bs-card-border-radius: 2px; --bs-card-color: var(--ink); }
.unit-info { border: 0; border-top: 2px solid var(--ink); border-radius: 0; }
.unit-info .card-body { padding: 1.1rem 0 0; }
.cta-panel, .cta-panel.dark { border: 1.5px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); box-shadow: none; }
.cta-panel.dark h3 { color: var(--ink); }
.story { background: var(--paper-2); color: var(--ink); border-radius: 0 !important; }
.story-sub { color: var(--ink-2); }
.badge { --bs-badge-border-radius: 2px; --bs-badge-font-weight: 500; font-family: var(--mono); letter-spacing: .03em; text-transform: uppercase; }
.text-uppercase { text-transform: none !important; }      /* headings are sentence case now, whatever an older snippet asks for */
.rounded-3, .rounded-4 { border-radius: 2px !important; }
.shadow { box-shadow: none !important; }
.membership-section { background: var(--paper-2); }
.membership-card { border: 1.5px solid var(--ink); border-radius: 0; background: var(--paper); }
.membership-ribbon { display: none; }
.membership-price { font-family: var(--display); font-stretch: 66%; font-weight: 850; line-height: .85; }
.membership-price .amount { font-size: 6rem; }
.membership-price .currency { font-size: 2.4rem; color: var(--red); vertical-align: top; }
.membership-perks li { padding: .35rem 0 .35rem 1.5rem; position: relative; }
.membership-perks li::before { content: "+"; position: absolute; left: 0; font-family: var(--mono); color: var(--red); }

/* ── motion ───────────────────────────────────────────────────────────── */
/* site.js tags the blocks; they are only hidden once it has (html.js), so the
   page reads fine without scripts */
.js .reveal { opacity: 0; transform: translate3d(0, 1.15rem, 0); transition: opacity .7s var(--ease) var(--rd, 0s), transform .8s var(--ease) var(--rd, 0s); }
.js .reveal.in { opacity: 1; transform: none; }
/* rules that draw themselves left to right as their block arrives */
.js .tally.reveal, .js .tally-list li.reveal { transition-property: opacity, transform, border-color; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .dir-row, .link::after, .link-arrow::after, .link-btn::after { transition: none; }
  .gear-a, .gear-b, .gear-c, .footer-gear { transform: none; }
}

/* small screens: the closing line wraps instead of sliding off the edge */
@media (max-width: 699.98px) {
  .shout p { width: auto; white-space: normal; padding-inline: 1.25rem; font-size: clamp(2.6rem, 13vw, 4.5rem); transform: none !important; }
}

/* phones: the directory runs two-up, and "Inquire" is just its arrow */
@media (max-width: 575.98px) {
  .dir { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; }
  .dir-go-word { display: none; }
  .dir-row { padding-inline: 0; }
  .dir-row:hover { padding-inline: .35rem; }
}