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

   Look: a printed shop sheet. Concrete-grey ground, near-black ink, ONE accent — the
   machine red of the two dashes in the logo. Space Grotesk for headings, Atkinson
   Hyperlegible Next for text, Atkinson Hyperlegible Mono for the small labels.
   Left-aligned, two-column sections with a sticky heading.
   No glows, no gradients, no dark bands in the middle of the page.

   2026-10-22 pass with the Impeccable + Taste skills (owner's request: "more
   professional, less AI generated"): the cream ground became a neutral concrete
   grey (cream + rust read as an AI-assistant palette), the monospace uppercase
   labels and the dash-led kickers over headings are gone (text face, sentence
   case, 14 px or more), sections and lists are separated by space and a tone
   step instead of hairlines, the top bar is solid instead of blurred glass, and
   arrows are drawn icons instead of text glyphs. Kept on purpose (owner's calls):
   the red, the gears and their shadows, the section photos and the logo.

   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: #f1f1ef;
  --paper-2: #e3e3e0;
  --band-dark: #d3d3cf;   /* the Rentals / Donate band colour before its carbon weave loads */
  --ink: #151515;
  --ink-2: #4a4a47;
  --rule: rgba(21, 21, 21, .16);
  --red: #c2301c;
  --red-deep: #9a2413;
  --on-red: #ffffff;
  --gear: #d6d6d3;

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

  /* fonts (2026-10-22, owner's choice): Space Grotesk leads (headlines, names, prices, big figures, never under ~18 px),
     Atkinson Hyperlegible Next is everything read or tapped, Atkinson Hyperlegible Mono is the small uppercase labels
     and anything copied exactly. Archivo stays only in the logo's lettering. */
  --display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --text: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Atkinson Hyperlegible Mono', ui-monospace, Consolas, Menlo, monospace;
  --logo: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --small: .9375rem;   /* the type scale (2026-10-22): small 15 · body 17 · lead 21 · h3 26 · h2 · display */
  --lead: 1.3125rem;
  --h3: 1.625rem;

  --nav-h: 4.25rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
[data-bs-theme="dark"] {
  --paper: #131313;
  --paper-2: #1d1d1c;
  --band-dark: #1d1d1c;
  --ink: #ededeb;
  --ink-2: #ababa7;
  --rule: rgba(237, 237, 235, .16);
  --red: #e2503a;
  --red-deep: #f0705b;
  --on-red: #1a0b08;
  --gear: #2a2a29;
}

/* ── 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;
}
::selection { background: var(--red); color: var(--on-red); }
/* the browser's own surfaces in the page's colours */
html { scrollbar-color: color-mix(in srgb, var(--ink) 35%, transparent) var(--paper); accent-color: var(--red); }
input, textarea { caret-color: var(--red); }
strong, .price, .tally-list strong { font-variant-numeric: tabular-nums; }
/* drawn icons (a mask, so they take the text colour) instead of → ‹ › glyphs */
.ico-arrow, .ico-chev { display: inline-block; flex: none; width: .95em; height: .95em; background: currentColor; vertical-align: -.12em;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ico-arrow, .link::after, .link-arrow::after, .link-btn::after { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='M3 12h16M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.ico-chev { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='square'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); width: 1.15rem; height: 1.15rem; }
.ico-chev-left { transform: scaleX(-1); }
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-weight: 700;
  letter-spacing: -.025em; line-height: 1.04; color: var(--ink);
  text-wrap: balance; margin: 0 0 .5em;
}
h2 { font-size: clamp(2.1rem, 4.2vw, 3.5rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, var(--h3)); font-stretch: 84%; }
h4 { font-size: var(--lead); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.display { font-size: clamp(3rem, 9vw, 7.4rem); font-weight: 700; line-height: .94; letter-spacing: -.045em; }
p { margin: 0 0 1.1em; text-wrap: pretty; }
p, li, dd { max-width: 64ch; }
.lede { font-size: clamp(1.18rem, 1.7vw, var(--lead)); 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: Atkinson Mono, uppercase, with the logo's red dash (owner's font rules, 2026-10-22) */
.kicker, .eyebrow, .label-mono {
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--mono); font-size: .8125rem; font-weight: 500; letter-spacing: .08em; 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(--text); letter-spacing: .01em;
  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.0625rem; }
.btn-sm { padding: .45rem .85rem; font-size: var(--small); }
.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(--text); font-weight: 700; font-size: 1.0625rem; 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: ""; display: inline-block; width: .9em; height: .9em; align-self: center; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; 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: var(--small); color: var(--ink-2); margin: .8rem 0 0; }

/* ── top bar ──────────────────────────────────────────────────────────── */
#mainNav {
  min-height: var(--nav-h); padding-block: .5rem;
  background: var(--paper);
  transition: box-shadow .25s var(--ease);
}
/* a solid bar; once the page moves under it, a soft shadow (it really does float) */
#mainNav.scrolled { box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .5); }
#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(--logo); 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: var(--small); 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; margin-top: .5rem; }
  #mainNav .nav-link { margin: 0; padding: .55rem 0; font-size: 1.0625rem; 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); }
.band-tint { background: var(--band-dark); }
/* the carbon sections (Rentals, Donate — 2026-10-22, owner: "the same carbon fiber background from admin"):
   dark in both themes, so the colour tokens flip to light-on-dark inside them; the red stays the page's */
.band-tint:not(.band-photo) {
  --paper: #1f2126; --paper-2: #2a2c31; --band-dark: #1f2126;
  --ink: #f1f3f5; --ink-2: #bcc1c8; --rule: rgba(255, 255, 255, .14);
  color: var(--ink);
}
/* 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; }
/* the About timelapse (2026-10-19): under the heading, in the sticky column left of the copy */
.about-video { display: block; width: 100%; height: auto; margin-top: 1.5rem; background: var(--ink); }
@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, var(--lead)); 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, var(--lead)); 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: 0 !important; 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: .8125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.hero-facts dd, .hero-facts strong { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.25rem, 2vw, var(--h3)); 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: .7rem 0; }
.facts dt { font-family: var(--mono); font-size: .8125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding-top: .3rem; }
.facts dd { margin: 0; font-weight: 500; }
@media (max-width: 575.98px) { .facts > div { grid-template-columns: minmax(0, 1fr); } }
/* the numbers */
/* a whole field of the second tone, not a rule above it */
.tally { margin-top: clamp(4rem, 8vw, 7rem); padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem); background: var(--paper-2); }
.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; }
.tally-list strong, .stats strong { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 3.3vw, 3.1rem); line-height: .95; white-space: nowrap; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.tally-list span, .stats span { display: block; margin-top: .45rem; font-size: var(--small); 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 { background: var(--paper); padding: clamp(1.5rem, 3.5vw, 2.75rem); }
.ticket-label { font-family: var(--mono); font-size: .8125rem; font-weight: 500; letter-spacing: .08em; 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-weight: 700; line-height: .86; 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-size: 1.0625rem; 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.75rem, 3.5vw, 2.5rem) 0; padding: 0; 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: .5em; width: .55rem; height: .55rem; background: 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(--text); font-weight: 700; font-size: var(--lead); cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.tabs button sup { top: -.5em; margin-left: .3rem; font-size: var(--small); 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: .8125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 .9rem; }
.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-weight: 700; letter-spacing: -.01em; font-size: var(--lead); line-height: 1.2; }
.dir-meta { font-size: var(--small); color: var(--ink-2); }
.dir-meta .soon { color: var(--red); }
.dir-go { display: inline-flex; align-items: center; gap: .35rem; margin-left: auto; font-family: var(--text); font-weight: 700; font-size: var(--small); 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; }
/* rentals as picture tiles (2026-10-06): name and Inquire on one line under the picture */
.dir-group .shots { margin-top: 0; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1.75rem clamp(1rem, 2.5vw, 2rem); }
.shot { display: block; }
.shot-line { display: flex; align-items: baseline; gap: .75rem; margin-top: .75rem; }
.shot-line .dir-name { margin-top: 0; }
.shot .dir-meta { display: block; margin-top: .2rem; }
.shot:hover .dir-go { color: var(--red); transform: translateX(.2rem); }
.shot[hidden] { display: none; }
/* no photo yet: the anvil on the paper, so the space still has a face */
.shot-none { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; }
.shot-mark { width: 42%; aspect-ratio: 1; background: var(--ink-2); opacity: .32;
  -webkit-mask: url(/assets/img/anvil-mark.png) center / contain no-repeat; mask: url(/assets/img/anvil-mark.png) center / contain no-repeat;
  transition: opacity .3s var(--ease), transform .6s var(--ease); }
.shot:hover .shot-mark { opacity: .5; transform: scale(1.04); }
.shot-soon { font-size: var(--small); color: var(--ink-2); }

/* ── volunteer, donate ────────────────────────────────────────────────── */
/* title + one line, stacked with space 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.1rem 0; 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 { padding-top: 0; }
.ways h3, .ways h4, .ways-list h4, .gives h3, .gives h4 { font-size: var(--lead); font-weight: 700; letter-spacing: -.01em; 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; }
.band:has(> .wrap > .shout:last-child) { padding-bottom: 0; }
.shout p { max-width: none; width: max-content; margin: 0 auto; white-space: nowrap; font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 6.2vw, 6rem); line-height: .98; letter-spacing: -.04em; 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-head { font-family: var(--mono); font-size: .8125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 .9rem; }
.contact-grid p { margin: 0 0 .9rem; font-size: var(--lead); 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: var(--lead); 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: #000; color: #f1f1ef; padding: clamp(3rem, 6vw, 5rem) 0 2rem; }
[data-bs-theme="dark"] .footer { background: #000; color: var(--ink); }   /* black in both themes (owner, 2026-10-22) */
.footer a { color: inherit; text-decoration-color: transparent; }
.footer a:hover { color: inherit; text-decoration-color: #ef5a45; }
.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); font-size: var(--small); color: color-mix(in srgb, currentColor 78%, transparent); }
.footer-meta p { margin: 0; max-width: none; }
/* corner gears, both bottom corners (2026-10-06): 13 rem (the twice-as-big try was undone), only a third of each
   in the window, the left one turning the other way */
.footer-gear { position: fixed; right: calc(var(--fg) * -4 / 5); top: calc(var(--nav-h) - var(--fg) / 3); --fg: 13rem; z-index: 1020; width: var(--fg); fill: #64625e;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)) drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
  transform: rotate(calc(var(--spin, 0) * 2.4deg)); will-change: transform; pointer-events: none; }
.footer-gear-left { right: auto; left: calc(var(--fg) * -4 / 5); transform: rotate(calc(var(--spin, 0) * -2.4deg)); }
@media (max-width: 575.98px) { .footer-gear { --fg: 9rem; } }

/* ── calendar popup ───────────────────────────────────────────────────── */
.modal-content { --bs-modal-bg: var(--paper); --bs-modal-border-radius: 2px; border: 0; color: var(--ink); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45); }
.modal-header { border-bottom: 0; }
.modal-title { font-size: var(--h3); text-transform: none !important; }

/* ── older snippet classes, restyled so they still belong ─────────────── */
.py-section { padding: clamp(4.5rem, 10vw, 8.5rem) 0; }
.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-radius: 0; background: var(--paper-2); }
.unit-info .card-body { padding: 1.25rem; }
.cta-panel, .cta-panel.dark { border: 0; border-radius: 0; background: var(--paper-2); 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: 600; }
.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: 0; border-radius: 0; background: var(--paper); }
.membership-ribbon { display: none; }
.membership-price { font-family: var(--display); font-weight: 700; 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; top: .85em; width: .55rem; height: .55rem; background: 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.2rem, 10.5vw, 4rem); 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; }
}

/* Rental inquiry popup (2026-10-06): the site's own type and colours, not Bootstrap's form look */
.inquire { background: var(--paper); color: var(--ink); border: 0; border-radius: 0; }
.inquire .modal-header { border-bottom: 0; }
.inquire .modal-title { font-family: var(--display); font-weight: 700; font-size: 1.6rem; line-height: 1.1; }
.inq-field { display: block; margin: 0 0 1rem; }
.inq-field span { display: block; font-size: var(--small); font-weight: 600; color: var(--ink); margin-bottom: .3rem; }
.inq-field em { font-style: normal; font-weight: 400; color: var(--ink-2); }
.inq-field input, .inq-field textarea { width: 100%; font: inherit; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--rule); padding: .45rem 0; border-radius: 0; }
.inq-field textarea { border: 1px solid var(--rule); padding: .6rem .7rem; resize: vertical; }
.inq-field input:focus, .inq-field textarea:focus { outline: none; border-color: var(--red); }
.inq-field input:disabled, .inq-field textarea:disabled { opacity: .6; }
.inq-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.inq-note { min-height: 1.3em; margin: 0 0 .9rem; font-size: var(--small); }
.inq-note.bad { color: var(--red); }
.inq-actions { display: flex; align-items: center; gap: 1.25rem; }
.inq-cancel { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--ink-2); text-decoration: underline; text-underline-offset: .2em; }

/* the space's photos in the inquiry popup (2026-10-06) */
.inq-dialog { max-width: 640px; }
.inq-gallery { background: var(--paper-2); }
.inq-stage { position: relative; aspect-ratio: 4 / 3; background: var(--paper-2); overflow: hidden; }
.inq-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inq-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%;
  background: rgba(21, 21, 21, .55); color: #fff; line-height: 1; display: flex; align-items: center; justify-content: center; }
.inq-nav:hover { background: var(--red); }
.inq-prev { left: .75rem; } .inq-next { right: .75rem; }
.inq-count { position: absolute; right: .75rem; bottom: .6rem; font-size: var(--small); font-variant-numeric: tabular-nums; color: #fff; background: rgba(21, 21, 21, .6); padding: .1rem .5rem; }
.inq-strip { display: flex; gap: .4rem; padding: .6rem 1rem; overflow-x: auto; }
.inq-strip button { flex: 0 0 auto; width: 4.5rem; aspect-ratio: 4 / 3; padding: 0; border: 2px solid transparent; background: var(--paper-2); opacity: .7; }
.inq-strip button.on { border-color: var(--red); opacity: 1; }
.inq-strip button:hover { opacity: 1; }
.inq-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inq-gallery.single .inq-nav, .inq-gallery.single .inq-strip, .inq-gallery.single .inq-count { display: none; }

/* A section with a photo behind it (2026-10-06; website setting bg_<slug>): the
   picture under a wash of the page's own paper colour so the type stays readable
   and the page keeps its printed look; fixed on wide screens for the parallax. */
.band-photo { position: relative; isolation: isolate; background: var(--paper); }
.band-photo::before { content: ''; position: absolute; inset: 0; z-index: -2;
  background: var(--band-photo) center / cover no-repeat; }
.band-photo::after { content: ''; position: absolute; inset: -1px 0; z-index: -1; /* taste-skill-ignore: a neutral scrim over a photo */
  background: linear-gradient(90deg, color-mix(in srgb, var(--paper) 94%, transparent) 0%,
    color-mix(in srgb, var(--paper) 86%, transparent) 55%, color-mix(in srgb, var(--paper) 72%, transparent) 100%); }
@media (min-width: 992px) and (hover: hover) {
  .band-photo::before { background-attachment: fixed; }
}

/* The hero over its photo (2026-10-06, owner's call): the gears in a light grey that
   reads against the picture, and a dark drop shadow under the gears and the anvil.
   The shadow is on .hero-art as a whole — the anvil is a CSS mask, which would cut
   off a shadow of its own. */
.hero.band-photo .hero-art .gear { fill: #d4d4d2; }
.hero.band-photo .hero-art { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)) drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
/* in the dark theme the anvil is light, so the gears go a mid grey to keep it standing out
   (a dark anvil disappeared into the dark photo) */
[data-bs-theme=dark] .hero.band-photo .hero-art .gear { fill: #8c8984; }

/* A section's photo gallery (2026-10-06): a masonry wall of the pictures as they
   are (portrait and landscape mixed), under the donate section's closing line */
.photo-wall { columns: 4 15rem; column-gap: .75rem; margin: 0 0 clamp(4rem, 9vw, 7rem); }
.photo-wall-item { display: block; break-inside: avoid; margin: 0 0 .75rem; overflow: hidden; background: var(--paper-2); }
.photo-wall-item img { display: block; width: 100%; height: auto; transition: transform .6s var(--ease), filter .3s var(--ease); }
.photo-wall-item:hover img { transform: scale(1.03); }
.wall-view { position: relative; background: #000; border: 0; border-radius: 0; }
.wall-view img { display: block; width: 100%; max-height: 86vh; object-fit: contain; }
.wall-close { position: absolute; top: .75rem; right: .75rem; z-index: 2; }
/* the photo wall quieter and smaller (2026-10-06, owner's call): half opacity until
   hovered, six narrower columns */
.photo-wall { columns: 6 9.5rem; column-gap: .6rem; }
.photo-wall-item { margin-bottom: .6rem; }
.photo-wall-item img { opacity: .5; transition: transform .6s var(--ease), opacity .3s var(--ease); }
.photo-wall-item:hover img, .photo-wall-item:focus-visible img { opacity: 1; }
@media (hover: none) { .photo-wall-item img { opacity: .8; } }
/* the centre gear behind the anvil a step darker than the two beside it (2026-10-06, owner's call) */
.hero.band-photo .hero-art .gear-a { fill: #a3a19c; }
[data-bs-theme=dark] .hero.band-photo .hero-art .gear-a { fill: #6b6864; }

/* the anvil's own shadow falls on the gears behind it (2026-10-06, owner's call) */
.hero-art .anvil-shadow { position: absolute; inset: 0; pointer-events: none; }
.hero.band-photo .hero-art .anvil-shadow { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .55)) drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); }
/* the two small gears cast a shadow onto the centre one (2026-10-06, owner's call). It is
   centred (no offset) because a filter turns with its gear — an offset shadow would swing
   round as the gears spin. */
.hero.band-photo .hero-art .gear-b, .hero.band-photo .hero-art .gear-c {
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, .5)) drop-shadow(0 0 2px rgba(0, 0, 0, .35)); }

/* Section photos at every width (2026-10-06): the photo is pinned to the window below the
   top bar on every screen size — a fixed layer clipped to its own section, so the hero,
   About and Membership show one still picture behind them instead of a fresh copy per
   section (background-attachment: fixed only ran on wide screens, and phones ignore it).
   Anchored to its TOP edge just under the bar, so the top of the picture always shows and
   any cut comes off the bottom. */
.band-photo { clip-path: inset(0); }
.band-photo::before { position: fixed; inset: var(--nav-h) 0 0 0; background-position: center top; background-attachment: scroll; }

/* top-bar logo (2026-10-06, owner's call): the anvil nearly the bar's height (the bar keeps
   its height), and "ACME" in the red */
:is(#mainNav, .footer) .brand-mark { height: calc(var(--nav-h) - .9rem); }
:is(#mainNav, .footer) .brand-name strong { color: var(--red); }
/* (same day) ACME at 2rem, slid left over half the anvil, the three words run together */
:is(#mainNav, .footer) .brand-name { position: relative; z-index: 1; margin-left: calc((var(--nav-h) - .9rem) * 512 / 273 / -2 - .7rem); }
:is(#mainNav, .footer) .brand-name strong { font-size: 2rem; vertical-align: -.12em; }
/* (same day) all three words on one baseline, and ACME lifted off the anvil by a shadow */
:is(#mainNav, .footer) .brand-name strong { vertical-align: baseline; text-shadow: 0 2px 3px rgba(0, 0, 0, .55), 0 0 1px rgba(0, 0, 0, .4); }
/* (same day) the words sit 12px lower, over the anvil's body */
:is(#mainNav, .footer) .brand-name { top: 12px; }
:is(#mainNav, .footer) .brand-name { left: -30px; }   /* (same day) 30px further over the anvil */
/* (same day) ACME a touch heavier than the font's 900 allows (a thin stroke of its own colour),
   CreationLab in small caps */
:is(#mainNav, .footer) .brand-name { font-variant-caps: small-caps; }
:is(#mainNav, .footer) .brand-name strong { font-variant-caps: normal; -webkit-text-stroke: .6px currentColor; paint-order: stroke fill; }
:is(#mainNav, .footer) .brand-name strong { text-shadow: 0 3px 5px rgba(0, 0, 0, .85), 0 1px 2px rgba(0, 0, 0, .7); }   /* (same day) a heavier, darker shadow */
/* iPhone Safari drew no text-shadow on ACME (WebKit skips it alongside -webkit-text-stroke):
   the shadow is a filter on the word instead, which every browser draws */
:is(#mainNav, .footer) .brand-name strong { display: inline-block; text-shadow: none;
  -webkit-filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, .85)) drop-shadow(0 .5px .5px rgba(0, 0, 0, .7));
  filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, .85)) drop-shadow(0 .5px .5px rgba(0, 0, 0, .7)); }

/* Texture + parallax on the plain sections (2026-10-22, owner's request: "the solid grey and dark grey
   backgrounds feel flat"). From the shop itself, not generic noise: the light bands are poured concrete
   (soft blotches, fine grit, a few aggregate specks — a background image: Chrome will not use a filter-built
   SVG as a mask); Rentals and Donate are the console's carbon-fibre weave (the footer is solid black) (was pegboard until the owner
   swapped it the same night; the COVID panel stays solid). Each texture is a ::before layer, taller than its band, that site.js slides at 30 % of the scroll (--py) — a transform, so
   it costs no repaint. Off under prefers-reduced-motion (the texture stays, it just doesn't drift). */
:root {
  --tex-concrete: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='b' filterUnits='userSpaceOnUse' x='0' y='0' width='320' height='320'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1.5 0 0 0 -.55'/%3E%3C/filter%3E%3Cfilter id='g' filterUnits='userSpaceOnUse' x='0' y='0' width='320' height='320'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  2.2 0 0 0 -1.15'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23b)' opacity='.55'/%3E%3Crect width='320' height='320' filter='url(%23g)'/%3E%3Cg opacity='.7'%3E%3Ccircle cx='41' cy='63' r='1.6'/%3E%3Ccircle cx='212' cy='38' r='1.1'/%3E%3Ccircle cx='133' cy='171' r='1.9'/%3E%3Ccircle cx='277' cy='229' r='1.3'/%3E%3Ccircle cx='88' cy='262' r='1.2'/%3E%3Ccircle cx='181' cy='297' r='1.7'/%3E%3Ccircle cx='306' cy='112' r='1'/%3E%3Ccircle cx='18' cy='190' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
  --tex-concrete-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='b' filterUnits='userSpaceOnUse' x='0' y='0' width='320' height='320'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  1.5 0 0 0 -.55'/%3E%3C/filter%3E%3Cfilter id='g' filterUnits='userSpaceOnUse' x='0' y='0' width='320' height='320'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  2.2 0 0 0 -1.15'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23b)' opacity='.55'/%3E%3Crect width='320' height='320' filter='url(%23g)'/%3E%3Cg opacity='.7' fill='white'%3E%3Ccircle cx='41' cy='63' r='1.6'/%3E%3Ccircle cx='212' cy='38' r='1.1'/%3E%3Ccircle cx='133' cy='171' r='1.9'/%3E%3Ccircle cx='277' cy='229' r='1.3'/%3E%3Ccircle cx='88' cy='262' r='1.2'/%3E%3Ccircle cx='181' cy='297' r='1.7'/%3E%3Ccircle cx='306' cy='112' r='1'/%3E%3Ccircle cx='18' cy='190' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
  --concrete: var(--tex-concrete); --concrete-op: .12;
  /* the console's carbon-fibre weave (console.css body.console) */
  --cf-base: #1f2126; --cf-a: #191b1f; --cf-b: #292c32; --cf-c: #1d1f24; --cf-d: #232529; --cf-e: #26282e;
}
[data-bs-theme="dark"] { --concrete: var(--tex-concrete-light); --concrete-op: .06; }
.band:not(.band-photo) { position: relative; isolation: isolate; overflow: clip; }
.band:not(.band-photo)::before {
  content: ""; position: absolute; left: 0; right: 0; top: -32%; bottom: -40vh; z-index: -1; pointer-events: none;
  background: var(--concrete) 0 0 / 320px 320px repeat; opacity: var(--concrete-op);
  transform: translate3d(0, calc(var(--py, 0) * 1px), 0); will-change: transform;
}
.band-tint:not(.band-photo)::before {
  opacity: 1;
  background-color: var(--cf-base);
  background-image:
    radial-gradient(1100px 640px at 12% 30%, rgba(255, 255, 255, .07), transparent 62%),
    linear-gradient(27deg, var(--cf-a) 5px, transparent 5px),
    linear-gradient(207deg, var(--cf-a) 5px, transparent 5px),
    linear-gradient(27deg, var(--cf-b) 5px, transparent 5px),
    linear-gradient(207deg, var(--cf-b) 5px, transparent 5px),
    linear-gradient(90deg, var(--cf-c) 10px, transparent 10px),
    linear-gradient(var(--cf-d) 25%, var(--cf-base) 25%, var(--cf-base) 50%, transparent 50%, transparent 75%, var(--cf-e) 75%, var(--cf-e));
  background-position: 0 0, 0 5px, 10px 0, 0 10px, 10px 5px, 0 0, 0 0;
  background-size: 100% 100%, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px;
  background-repeat: no-repeat, repeat, repeat, repeat, repeat, repeat, repeat;
}
/* the footer is SOLID black, no texture (owner, 2026-10-22) */
@media (prefers-reduced-motion: reduce) {
  .band:not(.band-photo)::before { transform: none; }
}