/* ─────────────────────────────────────────────────────────
   sonicswitchyard.com — shot-for-shot port of the original
   Squarespace 7.1 design.

   The original is a DARK site built from four section themes
   (Squarespace names in parens):

     charcoal  (bright-inverse)  #272a28 bg / #d3c6b4 sand text — dominant
     terra     (dark)            #a65f46 bg / #fffffb text — about, art
     gold      (light-bold)      #a19e8b bg / black text — gallery marquee
     white     (white)           #fffffb bg / charcoal text — docs only

   Headings: Clash Display 500 (display voice, July 2026 type upgrade;
   originally Source Code Pro 300), lowercased site-wide by CSS.
   Body + meta labels: Space Mono, also lowercased. Nav: Space Mono uppercase.
   Buttons: outline, square, 2px border. (The original used Typekit
   aktiv-grotesk for buttons and ibm-plex-mono for blog meta; we
   substitute Space Mono — closest free equivalent at these sizes.)
   ───────────────────────────────────────────────────────── */

/* fonts are self-hosted (fonts/*.woff2) — no third-party request, no
   render-blocking font CSS. Space Mono: latin + latin-ext (Google Fonts).
   Clash Display: display face (Fontshare / ITF Free Font License). */
@font-face {
  font-family: 'Clash Display';
  src: url(/fonts/clash-display-400.woff2) format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Clash Display';
  src: url(/fonts/clash-display-500.woff2) format('woff2');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Clash Display';
  src: url(/fonts/clash-display-600.woff2) format('woff2');
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Space Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/space-mono-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/space-mono-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/space-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/space-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/space-mono-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/space-mono-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --white: #fffffb;           /* warm near-white */
  --black: #272a28;           /* charcoal, slight cool-green cast */
  --sand: #d3c6b4;            /* warm sand — text on charcoal */
  --gold: #a19e8b;            /* muted gold-beige — marquee bg */
  --terra: #a65f46;           /* terracotta — feature sections */

  --font-head: "Clash Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --max-w: 1500px;
  --gutter: 4vw;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* visually hidden, exposed to assistive tech + crawlers (page h1 on embed pages) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

html { scroll-behavior: smooth; scrollbar-gutter: stable; }

body {
  background: var(--black);
  color: var(--sand);
  font-family: var(--font-body);
  /* fluid body — grows on wide screens toward the Squarespace scale
     (~28px at 1920) instead of staying small; readable on mobile */
  font-size: clamp(1.15rem, 0.95rem + 0.62vw, 1.55rem);
  line-height: 1.72;
  text-transform: lowercase;   /* the original flattens all copy via CSS */
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* user-entered content keeps its case */
input, textarea, select, option, button { text-transform: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.12;
}
/* heading caps raised + steeper vw so type keeps growing into widescreen
   (matching the original's fluid scale) instead of capping early */
h1 { font-size: clamp(3rem, 8vw, 9.5rem); }
h2 { font-size: clamp(2.2rem, 5.2vw, 5.6rem); }
h3 { font-size: clamp(1.7rem, 3vw, 3rem); }
h4 { font-size: clamp(1.2rem, 1.9vw, 1.9rem); }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; transition: opacity 0.18s; }
a:hover { opacity: 0.65; }

/* height:auto lets the intrinsic width/height attrs derive aspect ratio
   (prevents CLS) WITHOUT the attr height being honored literally — without
   this, width:100% images (masonry, post cards) render squished tall. */
img { max-width: 100%; height: auto; display: block; }

main { flex: 1; }

/* ─── section themes ─────────────────────────────────── */
.theme-charcoal { background: var(--black); color: var(--sand); }
.theme-terra    { background: var(--terra); color: var(--white); }
.theme-gold     { background: var(--gold);  color: #000; }
.theme-white    { background: var(--white); color: var(--black); }

.section { padding: 4rem var(--gutter); }
.section-inner { max-width: var(--max-w); margin: 0 auto; }

/* ─── buttons — outline, square, 2px ─────────────────── */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  padding: 0.85rem 1.9rem;
  border: 2px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.btn:hover { opacity: 1; }
.theme-charcoal .btn:hover { background: var(--sand); color: var(--black); }
.theme-terra .btn:hover { background: var(--white); color: var(--terra); }
.theme-gold .btn:hover { background: #000; color: var(--gold); }

/* ─── header — solid black bar, white logo, nav right ── */
.site-header {
  background: var(--black);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.4rem var(--gutter);
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
}
.brand { flex-shrink: 0; }
.brand img { height: 96px; width: auto; }

.header-right {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
nav.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.8rem;
  font-family: var(--font-body);
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
nav.site-nav a { color: var(--white); }
nav.site-nav a[aria-current="page"] {
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.header-social { display: flex; align-items: center; gap: 0.35rem; }
/* padding (not icon size) makes the ~44px touch target; the negative margin
   keeps the visual gap where it was */
.header-social a { color: var(--white); display: inline-flex; padding: 10px; margin: -6px 0; }
.header-social svg { width: 26px; height: 26px; fill: currentColor; }

/* compact small-screen header: one row of logo + social, nav on its own row
   below. Covers tablets too (820px), not just phones. */
@media (max-width: 820px) {
  .site-header { padding: 0.8rem var(--gutter) 0.9rem; gap: 0.5rem 1rem; }
  .brand img { height: 48px; }
  /* dissolve the wrapper so nav + social lay out against the header itself */
  .header-right { display: contents; }
  .header-social { order: 2; }
  nav.site-nav { order: 3; flex-basis: 100%; gap: 0.4rem 1.1rem; font-size: 0.85rem; }
  /* taller tap targets without larger type */
  nav.site-nav a { padding: 0.55rem 0.1rem; margin: -0.35rem 0; }
  /* border-bottom would track the padded tap target; underline hugs the text */
  nav.site-nav a[aria-current="page"] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }
  .header-social svg { width: 22px; height: 22px; }
}
/* small phones: all five links on one nav row */
@media (max-width: 480px) {
  nav.site-nav { gap: 0.4rem 0.8rem; font-size: 0.8rem; }
  /* the smaller type needs more padding to hold a ~44px tap height */
  nav.site-nav a { padding: 0.7rem 0.1rem; margin: -0.5rem 0; }
}

/* skip link: hidden until keyboard focus, then a pill over the header */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--sand);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  padding: 0.7rem 1.2rem;
}
.skip-link:focus {
  left: var(--gutter);
  top: 0.6rem;
}

/* ─── footer — explore left, contact right (original) ── */
.site-footer {
  background: var(--black);
  color: var(--sand);
  padding: 3.5rem var(--gutter) 4rem;
  border-top: 1px solid rgba(211, 198, 180, 0.25);
  font-size: 1.05rem;
}
.site-footer .section-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
.footer-contact { grid-column: 2; grid-row: 1; margin: 0; }
.footer-explore-label { grid-column: 1; grid-row: 1; margin: 0 0 0.8rem; font-weight: 700; }
.footer-links { grid-column: 1; grid-row: 2; list-style: none; }
.footer-links li { margin-bottom: 0.55rem; }
.footer-links a {
  display: inline-block;
  border-bottom: 0.1em solid currentColor;   /* the underline-highlight decoration */
  padding-bottom: 0.1em;
}
@media (max-width: 720px) {
  .site-footer .section-inner { grid-template-columns: 1fr; }
  .footer-contact { grid-column: 1; grid-row: 3; margin-top: 1.5rem; }
}

/* ─── home: hero ─────────────────────────────────────── */
.home-hero {
  position: relative;
  /* Height tracks WIDTH (not viewport height) so the band keeps a steady
     ~2.3:1 aspect and the photo crops consistently whether the window is
     half-width or fullscreen. Capped at 80vh so it still fits the screen. */
  height: clamp(460px, 43vw, 80vh);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--black);
}
.home-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;   /* a touch lower — more floor, less ceiling */
}
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);   /* original imageOverlayOpacity */
}
.home-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 var(--gutter);
}
.home-hero-content img {
  /* big wordmark — fills ~half the container like the original */
  width: min(672px, 69vw);
  /* cap by both viewport height and width so the logo never crowds the
     tagline as the (width-based) hero band changes shape */
  max-height: min(54vh, 34vw);
  margin: 0 auto;
  /* when a height cap binds, letterbox inside the box — never stretch
     the mark (default object-fit: fill was squashing it) */
  object-fit: contain;
}
/* phones: the hero band sits at its 460px floor with room to spare, so
   the 34vw cap (which was squashing the mark to a ~2:1 box) can relax —
   natural aspect at the full 69vw width */
@media (max-width: 480px) {
  .home-hero-content img { max-height: 54vh; }
}
/* weathered mark (dark body keyed out): a soft dark halo hugs the cream
   letterforms so they read over the bright lit-brick center, without a
   solid patch covering the photo */
.hero-logo-mark {
  filter: drop-shadow(0 0 16px rgba(0, 0, 0, 0.9)) drop-shadow(0 1px 5px rgba(0, 0, 0, 0.95));
}
.home-hero-tagline {
  /* rendered as the page h1 (SEO) but keeps the body-font tagline look */
  font-family: var(--font-body);
  font-weight: 400;
  margin-top: 1.2rem;
  /* nudge the tagline lower so it sits over the dark lower band of the hero */
  transform: translateY(1rem);
  /* floor raised so the h1 reads as the promise, not a caption, on phones;
     balance keeps the two-line phone wrap from stranding a lone word */
  font-size: clamp(1.75rem, 2.4vw, 2.5rem);
  text-wrap: balance;
  letter-spacing: 0.1em;
  color: var(--white);
  /* readable over the bright brick behind "you" */
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.75), 0 0 4px rgba(0, 0, 0, 0.6);
}
.hero-sq {
  position: absolute;
  top: 55%;
  z-index: 1;
  color: var(--sand);
  font-size: 0.9rem;
}
.hero-sq.left { left: var(--gutter); }
.hero-sq.right { right: var(--gutter); }
@media (max-width: 720px) { .hero-sq { display: none; } }

/* ─── home: statement ────────────────────────────────── */
.statement { text-align: center; padding: 5.5rem clamp(1.5rem, 2vw, 2.5rem); }
.statement p {
  max-width: 1000px;
  margin: 0 auto 1.6rem;
  font-size: clamp(1.25rem, 1.7vw, 1.7rem);
  line-height: 1.5;
}
.statement p:last-child { margin-bottom: 0; }
/* phones: tighter type, and the opening "who we are" line keeps the lead
   so the section scans instead of reading as three equal blocks */
@media (max-width: 720px) {
  .statement { padding-top: 4rem; padding-bottom: 4rem; }
  .statement p { font-size: 1.05rem; line-height: 1.55; margin-bottom: 1.3rem; }
  .statement p:first-child { font-size: 1.25rem; }
}
/* quiet early inquiry route — the full connect section stays at the bottom */
.statement p.statement-cta { margin-top: 2.6rem; margin-bottom: 0; }
.statement-cta button {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  /* padding (not type size) builds the ~44px tap height; the negative
     margin keeps the layout where it was. underline via text-decoration
     so it hugs the text instead of the padded box edge. */
  padding: 0.72rem 0;
  margin: -0.72rem 0;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.28em;
}
.statement-cta button:hover { opacity: 0.65; }

/* ─── home: field notes marquee — the archive, in motion ──────
   All 8 field-note cards drift slowly leftward on an infinite loop
   (two identical groups; the track translates -50% and wraps).
   Cards rest slightly dimmed/desaturated; hovering pauses the drift
   and the card comes up to full color and scale — an invitation to
   click. Touch + reduced-motion fall back to a hand-scrolled strip. */
.home-work {
  max-width: min(1840px, 94vw);
  margin: 0 auto;
  padding: 1.5rem clamp(1.25rem, 2.5vw, 3rem) 3.5rem;
}
.home-marquee { overflow: hidden; padding: 10px 0; }
.marquee-track {
  display: flex;
  width: max-content;
  animation: home-marquee 90s linear infinite;
}
.marquee-group { display: flex; gap: 14px; padding-right: 14px; }
.home-marquee:hover .marquee-track,
.home-marquee:focus-within .marquee-track,
.home-marquee.paused .marquee-track { animation-play-state: paused; }
.home-marquee .rcard {
  width: clamp(260px, 26vw, 360px);
  flex: none;
  transition: transform 0.35s ease;
}
/* only the photo rests dimmed — captions stay readable at full brightness */
.home-marquee .rcard-thumb {
  filter: saturate(0.55) brightness(0.68);
  transition: filter 0.35s ease;
}
.home-marquee .rcard:hover,
.home-marquee .rcard:focus-within {
  transform: scale(1.04);
  z-index: 2;
}
.home-marquee .rcard:hover .rcard-thumb,
.home-marquee .rcard:focus-within .rcard-thumb {
  filter: none;
}
@keyframes home-marquee { to { transform: translateX(-50%); } }
/* pause/play toggle — WCAG 2.2.2 needs a persistent control, hover isn't one.
   Sits on the fn-tier row; hidden when the rail is a hand-scrolled strip. */
.fn-tier-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid rgba(211, 198, 180, 0.18);
  padding-top: 3.5rem;
  margin-bottom: 1.6rem;
}
/* the row carries the tier border so it spans past the toggle */
.fn-tier-row .fn-tier { flex: 1; border-top: none; padding-top: 0; margin-bottom: 0; }
.marquee-toggle {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
  padding: 0.5rem 0;
}
.marquee-toggle:hover { opacity: 1; }
/* quiet touch-only cue that the rail keeps going (shown by the media block below) */
.fn-swipe-note {
  display: none;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
  margin: 0.9rem 0 0;
}
/* touch + reduced motion: a normal scroll-snap strip, full color.
   hover:none catches touch tablets wider than the phone breakpoint. */
@media (max-width: 720px), (hover: none), (prefers-reduced-motion: reduce) {
  .home-marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .marquee-track { animation: none; width: auto; }
  .marquee-group[aria-hidden] { display: none; }
  .home-marquee .rcard { scroll-snap-align: start; }
  .home-marquee .rcard-thumb { filter: none; }
  .marquee-toggle { display: none; }
  .fn-swipe-note { display: block; }
}
@media (max-width: 720px) { .home-marquee .rcard { width: 78vw; } }

/* ─── home: zigzag lane photos (events / weddings / installations) ──
   Big cinematic photo bands with the lane label; the photo and the
   quiet "see services" line link onward (the old empty ">" buttons
   are gone). */
.zig {
  display: grid;
  grid-template-columns: 2.1fr 1fr;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: center;
  max-width: 1840px;
  margin: 0 auto;
  padding: 1.5rem clamp(1.25rem, 2.5vw, 3rem);
}
.zig.reverse { grid-template-columns: 1fr 2.1fr; }
.zig-media { display: block; }
.zig-media:hover { opacity: 0.92; }
.zig-media img {
  width: 100%;
  aspect-ratio: 2 / 1;   /* wide cinematic band */
  object-fit: cover;
  border-radius: 14px;
}
.zig-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
  /* modest inset keeps the label visually tied to its photo */
  padding: 1rem clamp(0.75rem, 2vw, 1.5rem);
}
.zig-copy .zig-label {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
}
.zig-copy .case-link { font-size: 0.95rem; }
.zig.reverse .zig-media { order: 2; }
.zig.reverse .zig-copy { order: 1; }
@media (max-width: 720px) {
  .zig, .zig.reverse { grid-template-columns: 1fr; gap: 1rem; }
  .zig.reverse .zig-media { order: 0; }
  .zig.reverse .zig-copy { order: 1; }
}

/* ─── home: presence over spectacle ──────────────────
   Big dominant photo on the left, thin gap. Pairs with the
   connect photo on the right below to form a nestled,
   staggered diagonal (tight top/bottom padding on both).
*/
.presence {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 2.5rem var(--gutter) 1rem;
}
.presence-media img {
  width: 100%;
  height: clamp(440px, 70vh, 760px);
  object-fit: cover;
  border-radius: 14px;
}
.presence-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.8rem; }
.presence-copy p { font-size: clamp(1.2rem, 1.7vw, 1.55rem); line-height: 1.65; }
.presence-copy .btn { font-size: 1.05rem; padding: 1.05rem 2.4rem; }
@media (max-width: 720px) {
  .presence { grid-template-columns: 1fr; padding: 2rem var(--gutter); }
}

/* ─── connect (home + contact) — left copy + photo ─────
   Left column: eyebrow → intent line → dominant filled CTA
   → quiet alt contact. Right column: a tall event photo.
   A full-width "what to expect" trust strip sits below.
   Left-anchored + photo fills the horizontal space that
   the centered version left empty.
*/
.connect {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1rem var(--gutter) 4rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.connect-main {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: stretch;
}
.connect-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  gap: 1.5rem;
}
.connect-eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.7;
}
.connect-lead {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.3;
  margin: 0;
}
/* the connect CTA sits a size up from the base filled trigger */
.connect .inquiry-trigger {
  font-size: 1.1rem;
  padding: 1.15rem 2.8rem;
  margin-top: 0.4rem;
}
.connect-alt { font-size: 0.9rem; opacity: 0.8; margin: 0; }
.connect-alt a { border-bottom: 0.1em solid currentColor; padding-bottom: 0.05em; }
/* email + instagram wrap as whole items; the separator never strands at a break */
.connect-alt-item { display: inline-block; white-space: nowrap; }
@media (max-width: 480px) {
  .connect-alt-item { display: block; }
  .connect-alt-item + .connect-alt-item { margin-top: 0.35rem; }
  .connect-alt-sep { display: none; }
}

.connect-media img {
  width: 100%;
  height: 100%;
  min-height: clamp(440px, 70vh, 760px);
  object-fit: cover;
  border-radius: 14px;
}

.connect-expect {
  width: 100%;
  border-top: 1px solid rgba(211, 198, 180, 0.22);
  padding-top: 2.2rem;
  text-align: left;
}
.connect-expect-label {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.7;   /* ≥4.5:1 on charcoal — don't lower (WCAG small-text contrast) */
  margin-bottom: 1.2rem;
}
.connect-lanes {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2.5rem;
  margin: 0 0 1rem;
  font-family: var(--font-head);
  font-weight: 300;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
}
.connect-meta { font-size: 0.85rem; opacity: 0.7; margin: 0; }
@media (max-width: 720px) {
  .connect-main { grid-template-columns: 1fr; }
  .connect-media { order: 2; }
  .connect-media img { min-height: 50vh; }
  .connect-lanes { flex-direction: column; gap: 0.6rem; }
}

/* ─── inquiry: "get in touch" trigger + modal ──────────
   Ported from jfrostad.com, mapped to the dark theme. The
   form is three fields (name/email/message) in a modal.
*/
/* one grammar for the primary action: filled terracotta, everywhere */
.inquiry-trigger {
  display: inline-block;
  background: var(--terra);
  border: 2px solid var(--terra);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--white);
  cursor: pointer;
  padding: 0.8rem 1.8rem;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.inquiry-trigger:hover,
.inquiry-trigger:focus-visible {
  background: var(--terra-bright, #c4734f);
  border-color: var(--terra-bright, #c4734f);
  color: var(--white);
}

.inquiry-modal {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(20, 21, 20, 0.96);
  z-index: 1000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.inquiry-modal.open { display: block; }
.inquiry-close {
  position: fixed;
  top: 0.4rem;
  right: 0.5rem;
  /* padding (not type size) builds the ≥44px tap target; the reduced
     offsets above keep the visible word roughly where it was */
  padding: 0.9rem 1rem;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sand);
  cursor: pointer;
}
.inquiry-close:hover { color: var(--terra); }
.inquiry-card {
  max-width: 92vw;
  width: 480px;
  margin: 5rem auto;
  padding: 0 1rem;
  text-align: left;
}
.inquiry-title {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--sand);
  margin-bottom: 1.8rem;
}
.inquiry-form { display: flex; flex-direction: column; gap: 1.1rem; }
.inquiry-form label {
  font-size: 0.78rem;
  color: var(--sand);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.inquiry-form input[type="text"],
.inquiry-form input[type="email"],
.inquiry-form textarea {
  background: rgba(236, 233, 225, 0.06);
  border: 1px solid rgba(211, 198, 180, 0.5);
  color: var(--sand);
  font-family: var(--font-body);
  font-size: 1rem;   /* ≥16px — below that iOS Safari zooms the page on focus */
  text-transform: none;
  padding: 0.75rem 0.9rem;
  outline: none;
  transition: border-color 0.18s;
}
.inquiry-form input:focus,
.inquiry-form textarea:focus { border-color: var(--terra); }
.inquiry-form textarea { resize: vertical; min-height: 8rem; }
.inquiry-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.inquiry-submit {
  align-self: flex-start;
  background: var(--terra);
  border: 2px solid var(--terra);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  min-width: 8rem;
  padding: 0.8rem 2rem;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.inquiry-submit:hover { background: var(--terra-bright, #c4734f); border-color: var(--terra-bright, #c4734f); }
.inquiry-submit:disabled { opacity: 0.55; cursor: not-allowed; }
.inquiry-error { font-size: 0.85rem; color: var(--sand); }
.inquiry-thanks {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 1.3rem;
  color: var(--sand);
  padding: 1rem 0;
}

/* ─── blog masonry index (art, docs) ─────────────────── */
.post-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(2rem, 10vw, 150px);   /* original masonry spacing */
  row-gap: clamp(2.5rem, 7vw, 100px);
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 5rem var(--gutter);
  align-items: start;
}
.post-card img { width: 100%; }
.post-card-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
  margin: 1rem 0 0.4rem;
  opacity: 0.85;
}
.post-card-more {
  display: inline-block;
  border-bottom: 0.1em solid currentColor;
  padding-bottom: 0.1em;
  font-size: 0.9rem;
}
@media (max-width: 720px) { .post-grid { grid-template-columns: 1fr; } }

/* ─── blog post page (art/*, docs/*) ─────────────────── */
.post-meta {
  display: flex;
  gap: 1.5rem;
  font-size: 0.85rem;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 2.5rem var(--gutter) 1.5rem;
}
.att-embed { width: 100%; margin: 0 auto; height: 80vh; }
.att-embed iframe { width: 100%; height: 100%; border: none; background: #111; display: block; }
@media (max-width: 480px) { .att-embed { height: 100vh; height: 100dvh; } }
.att-embed.full { height: 100vh; height: 100dvh; }

/* native lede on the after-the-tone experience page — crawlable copy for a page
   whose body is otherwise a cross-origin iframe, plus the tel: participation CTA */
.att-lede {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 var(--gutter) 1.4rem;
  font-size: 0.95rem; line-height: 1.6; opacity: 0.9;
}
.att-lede a { border-bottom: 0.1em solid currentColor; padding-bottom: 0.05em; white-space: nowrap; }

/* the poster's main action, standing alone above the constellation —
   not an incidental link inside the lede prose */
.att-call { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter) 1.6rem; }
.att-call-btn {
  display: inline-block;
  border: 2px solid var(--white);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.85rem 1.8rem;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s;
}
.att-call-btn:hover, .att-call-btn:focus-visible { background: var(--white); color: var(--terra); opacity: 1; }
/* small phones: fill the gutter width and let the label breathe */
@media (max-width: 480px) {
  .att-call-btn {
    display: block;
    text-align: center;
    white-space: normal;
    font-size: 0.9rem;
    letter-spacing: 0;
    padding: 0.85rem 1rem;
  }
}

/* full-bleed mode: on the After the Tone pages the iframe grows to fill
   the viewport under the header + .att-nav, so the embed reads as native
   — no boxed frame, no page-background strip below it. The footer sits
   just past the fold. (The viz is a responsive canvas, so it adapts.) */
main.att-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
main.att-page .att-embed,
main.att-page .att-embed.full {
  flex: 1 1 auto;
  height: auto;
  min-height: 60svh;
  /* The container grows fine via flex, but a plain iframe `height:100%`
     can't resolve against a flex-derived height and collapses to its
     intrinsic 150px (Chrome flex:1 fixed it, Safari did not). Make the
     container a positioning context and absolutely fill it with the
     iframe — inset:0 stretches to the box regardless of how its height
     was computed, so it's bulletproof across browsers. */
  position: relative;
}
main.att-page .att-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.post-pagination {
  display: flex;
  justify-content: space-between;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 2rem var(--gutter) 3rem;
  font-size: 0.9rem;
}
.post-pagination a {
  border-bottom: 0.1em solid currentColor;
  padding-bottom: 0.1em;
}

/* after the tone — project sub-nav (ties the 3 pages together,
   links back to the gallery case study). entered from /gallery. */
.att-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem 1.5rem;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 2.5rem var(--gutter) 1.5rem;
  /* the primary tabs (experience / about the work) invite browsing */
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
}
.att-nav-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1.5rem; }
.att-nav a { opacity: 0.65; transition: opacity 0.2s; }
.att-nav a:hover { opacity: 1; }
/* documentation is an afternote for deep divers — stays quiet */
.att-nav a.att-nav-doc { font-size: 0.85rem; opacity: 0.5; }
.att-nav a[aria-current="page"] {
  opacity: 1;
  border-bottom: 0.1em solid currentColor;
  padding-bottom: 0.1em;
}
.att-nav-back { font-size: 0.95rem; letter-spacing: 0.03em; }
/* mobile: padding (not type size) builds ~44px tap targets on the sub-nav */
@media (max-width: 820px) {
  .att-nav a { padding: 0.65rem 0.15rem; margin: -0.45rem 0; }
  .att-nav a[aria-current="page"] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
  }
}

/* ─── gallery → field notes (case-study archive) ──────
   Text-forward archive: each project is a tight case study
   (context → constraint → intervention → outcome), photos
   as evidence. Phase-2 facts joey still owes render as
   visibly-unfinished .todo slots. Borrow architecture's
   rigor, keep the warmth — not institutional white-space.
*/
.fieldnotes { max-width: min(1980px, 94vw); margin: 0 auto; padding: 4rem clamp(1.25rem, 2.2vw, 2.5rem) 2rem; }
.fn-eyebrow {
  /* used as the page h1 on the index and as the breadcrumb on project pages —
     pin the body font + weight so both render identically */
  font-family: var(--font-body); font-weight: 400;
  font-size: 0.85rem; letter-spacing: 0.22em; text-transform: uppercase;
  opacity: 0.65; margin-bottom: 1rem;
}
.fn-intro { max-width: 760px; font-size: clamp(1.2rem, 1.6vw, 1.6rem); line-height: 1.5; margin-bottom: 3.5rem; }

.case { padding: 3.5rem 0; border-top: 1px solid rgba(211, 198, 180, 0.18); }
.case:first-of-type { border-top: none; padding-top: 0; }
.case-head { margin-bottom: 1.8rem; }
/* case names carry the display voice at comp scale (uva/zimoun move):
   huge tight display over the tiny mono meta line */
.case-name { font-size: clamp(2.6rem, 5.6vw, 5.2rem); line-height: 1.02; margin-bottom: 0.7rem; }
.case-meta { font-size: 0.95rem; opacity: 0.8; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; }
/* venue / host crosslinks in the meta line */
.case-meta a { border-bottom: 1px solid rgba(211, 198, 180, 0.4); padding-bottom: 0.04em; }
.case-meta a:hover, .case-meta a:focus-visible { opacity: 1; border-bottom-color: var(--sand); }
.case-tag {
  border: 1px solid currentColor; border-radius: 999px;
  padding: 0.18em 0.85em; font-size: 0.78rem; letter-spacing: 0.04em; opacity: 0.9;
}
.case-lead img,
.case-lead video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; display: block; }

/* ambient loop leads: quiet sound toggle in the corner (audio is opt-in —
   browsers require muted autoplay, and the room should ask before it hums) */
.case-lead-loop { position: relative; }
/* portrait loops keep their vertical framing: centered figure at natural
   proportions instead of the 16:9 lead slot */
.case-loop-portrait { margin: 2.4rem auto 0; width: min(460px, 92vw); }
.case-loop-portrait video { width: 100%; height: auto; border-radius: 12px; display: block; }
.case-loop-portrait figcaption {
  font-size: 0.85rem; opacity: 0.7; margin-top: 0.7rem; text-align: center;
}
/* the figure includes the caption, so anchor the sound pill to the video's
   top corner instead of the figure's bottom */
.case-loop-portrait .lead-sound { top: 1rem; right: 1rem; bottom: auto; }

/* after the tone: media grid — the portrait room loop in the center, flanked
   by stacks of three photos. SERIES RULE: never crop these photos in a way
   that changes their framing — every image renders at its natural aspect
   (height: auto, no object-fit). The column widths are tuned so both stacks
   land at the video's height: left (portrait + 2 landscapes) is narrower,
   right (3 landscapes) wider; heights scale together at any container width. */
@media (min-width: 721px) {
  .case-photos.att-media-grid {
    grid-template-columns: 0.611fr 1fr 0.857fr;
    align-items: start;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }
  .case-photos.att-media-grid .case-loop-portrait { margin: 0; width: auto; }
}
.case-photos.att-media-grid .att-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.case-photos.att-media-grid img { width: 100%; height: auto; aspect-ratio: auto; object-fit: unset; border-radius: 10px; }
@media (max-width: 720px) {
  .case-photos.att-media-grid { grid-template-columns: 1fr; }
  .case-photos.att-media-grid .case-loop-portrait { margin: 0 auto; width: min(460px, 92vw); }
}
.lead-sound {
  position: absolute; right: 1rem; bottom: 1rem;
  font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.08em;
  color: var(--sand); background: rgba(20, 21, 20, 0.62);
  border: 1px solid rgba(211, 198, 180, 0.4); border-radius: 999px;
  padding: 0.45rem 1rem; cursor: pointer; backdrop-filter: blur(6px);
  transition: background 0.18s, color 0.18s;
}
.lead-sound:hover, .lead-sound:focus-visible { background: var(--sand); color: var(--black); }
.lead-sound[aria-pressed="true"] { background: rgba(201, 106, 55, 0.85); border-color: transparent; color: var(--white); }
.lead-sound[aria-pressed="true"]:hover { background: var(--terra-bright, #c4734f); }
/* stacked fields: bold label, value wraps underneath it. flows into two columns
   so the text fills the width instead of a tiny column beside dead space. */
/* columns sized by width so the block spans the full width (matching the photo's
   margins) while each column stays a readable measure — 2 across in a card, 3 in
   the wider featured area */
.case-fields { columns: 26rem; column-gap: 3.5rem; margin: 2.4rem 0; }
.case-fields dt {
  /* field labels stay in the mono voice — the typewriter layer of the system */
  font-family: var(--font-body); font-weight: 700;
  font-size: 0.9rem; letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0.72; margin: 1.9rem 0 0.5rem; break-after: avoid; break-inside: avoid;
}
.case-fields dt:first-of-type { margin-top: 0; }
.case-fields dd { margin: 0; font-size: 1.18rem; line-height: 1.72; break-inside: avoid; }
.case-fields dd p { margin: 0 0 0.9rem; }
.case-fields dd p:last-child { margin-bottom: 0; }
/* featured cases (not the rail): on wide screens, a fixed three-column
   field layout with a deterministic mapping — context+constraint / intervention
   / outcome(+they said) — via forced column breaks on the 3rd and 4th labels. */
@media (min-width: 1080px) {
  .case > .case-fields { columns: 3; column-gap: 3.5rem; }
  .case > .case-fields dt:nth-of-type(3),
  .case > .case-fields dt:nth-of-type(4) { break-before: column; }
}
/* after the tone: 'they said' is a way into the constellation, not a quote —
   larger label, an orange line UNDER the link to invite the click */
.case-fields dt.said-cta-dt { font-size: 1.15rem; opacity: 0.85; }
.case-fields dd.said-cta { font-size: 1.3rem; line-height: 1.5; }
.case-fields dd.said-cta a {
  color: inherit;
  border-bottom: 2px solid rgba(201, 106, 55, 0.75);
  padding-bottom: 0.16em;
  transition: border-color 0.2s, color 0.2s;
}
.case-fields dd.said-cta a:hover,
.case-fields dd.said-cta a:focus-visible { border-bottom-color: var(--sand); color: var(--sand); }
/* skim emphasis: a soft, desaturated warm tint (ghost emphasis) — a gentle
   nudge for the eye, not a high-contrast highlight */
.em { font-weight: 400; color: #cd9a6a; }
/* series relationship subtitle under a case title (e.g. camp long) */
.case-series { font-size: 0.85rem; opacity: 0.7; letter-spacing: 0.03em; margin: 0.35rem 0 0; }
/* a testimonial as a field, sitting under the outcome */
.case-fields .fq { border-left: 2px solid rgba(201, 106, 55, 0.55); padding-left: 0.95rem; }
.case-fields .fq-cite { display: block; margin-top: 0.55rem; font-size: 0.85em; opacity: 0.7; }
.case-credits { font-size: 0.9rem; opacity: 0.7; margin-top: 1.6rem; }
.case-credits a { color: inherit; border-bottom: 1px solid rgba(211, 198, 180, 0.4); padding-bottom: 0.04em; }
.case-credits a:hover, .case-credits a:focus-visible { border-bottom-color: var(--sand); }
.case-link { margin-top: 0.8rem; }
.case-link a { border-bottom: 0.1em solid currentColor; padding-bottom: 0.05em; }
.case-photos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px; margin-top: 2.2rem;
}
.case-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
/* 4+ photos: gallery.js rebuilds the strip as a drifting marquee (same motion
   language as the homepage) — photos rest dimmed, hover pauses + ignites */
.case-photos.photo-marquee { display: block; overflow: hidden; padding: 10px 0; }
.photo-marquee .pm-track { display: flex; width: max-content; animation: home-marquee 60s linear infinite; }
.photo-marquee .pm-group { display: flex; gap: 14px; padding-right: 14px; }
.photo-marquee:hover .pm-track,
.photo-marquee:focus-within .pm-track { animation-play-state: paused; }
.photo-marquee img {
  width: clamp(240px, 24vw, 340px); flex: none;
  filter: saturate(0.55) brightness(0.68);
  transition: filter 0.35s ease, transform 0.35s ease;
}
.photo-marquee img:hover { filter: none; transform: scale(1.05); position: relative; z-index: 2; }
.case-quote {
  font-family: var(--font-head); font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.85rem); line-height: 1.35;
  max-width: 900px; margin: 2.2rem 0 0;
}
.case-quote cite { display: block; font-family: var(--font-body); font-style: normal; font-size: 0.9rem; opacity: 0.7; margin-top: 0.9rem; }

/* visibly-unfinished phase-2 slot — must stand out, never blend in */
.todo {
  display: inline-block;
  border: 1px dashed var(--terra); color: var(--terra);
  background: rgba(196, 115, 79, 0.09);
  border-radius: 4px; padding: 0.2em 0.6em; font-size: 0.85rem; line-height: 1.4;
  text-transform: none;
}
.todo::before { content: "TODO — "; font-weight: 700; letter-spacing: 0.04em; }
.case-todo { margin-top: 1.6rem; }

/* ─── field-notes tiers: featured (above) + the archive rail ── */
/* tier label: a section break that re-anchors the eye and sets honest
   information scent (featured = deep; the rail = the growing corpus) */
.fn-tier {
  font-family: var(--font-body); font-weight: 400;
  font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase;
  opacity: 0.7; margin: 0 0 1.6rem;   /* ≥4.5:1 on charcoal — don't lower */
  border-top: 1px solid rgba(211, 198, 180, 0.18); padding-top: 3.5rem;
}
.fn-tier-note { font-size: 0.95rem; opacity: 0.7; max-width: 640px; margin: -0.8rem 0 1.8rem; }

/* the archive rail — a grid of link cards; each card is the doorway to that
   project's own field-note page (/gallery/<slug>), so every project has a
   shareable, indexable URL. */
.fn-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0; }
.rcard { min-width: 0; }
.rcard-open {
  display: block; height: 100%; text-align: left; cursor: pointer;
  background: rgba(211, 198, 180, 0.025); color: inherit; font: inherit;
  border: 1px solid rgba(211, 198, 180, 0.16); border-radius: 12px;
  overflow: hidden; padding: 0; transition: border-color 0.2s, transform 0.2s;
}
.rcard-open:hover, .rcard-open:focus-visible { opacity: 1; border-color: rgba(211, 198, 180, 0.5); transform: translateY(-2px); }
.rcard-thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.rcard-cap { display: block; padding: 0.9rem 1.05rem 1.1rem; }
.rcard-cap .case-name {
  font-family: var(--font-head); font-weight: 500; letter-spacing: -0.01em;
  font-size: clamp(1.2rem, 1.8vw, 1.6rem); line-height: 1.15; margin-bottom: 0.5rem;
}
.rcard-cap .case-meta { margin-bottom: 0.6rem; }
.rcard-hint { display: inline-block; font-size: 0.78rem; opacity: 0.7; letter-spacing: 0.05em; }
.rcard-hint::after { content: " \2192"; }
@media (max-width: 1080px) { .fn-rail { grid-template-columns: repeat(2, 1fr); } }

/* teaser excerpt under a featured case on the gallery index */
.case-excerpt { max-width: 940px; font-size: 1.18rem; line-height: 1.72; margin: 2rem 0 0; }
.case-excerpt + .case-link { margin-top: 1.4rem; }

/* end-of-field-note actions: inquiry CTA + share, a matched primary/secondary
   button pair (same geometry, the share one weight quieter) */
.case-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 1rem 1.2rem; margin-top: 2.6rem; }
/* the same action offered early: right after the outcome, before the photo strip */
.case-actions-lead { margin-top: 2rem; }
.case-share {
  background: none; cursor: pointer; font: inherit; color: inherit;
  font-size: 0.9rem; letter-spacing: 0.02em; opacity: 0.75;
  border: 1px solid rgba(211, 198, 180, 0.45);
  padding: 0.75rem 1.6rem;
  transition: background 0.18s, color 0.18s, border-color 0.18s, opacity 0.18s;
}
.case-share:hover, .case-share:focus-visible {
  opacity: 1; border-color: var(--sand);
  background: var(--sand); color: var(--black);
}

/* prev/next between field notes — full rail cards, not text links, so the
   path onward through the archive stays as compelling as the index */
.fn-rail-pager { grid-template-columns: repeat(2, 1fr); }
.rcard-hint.prev::before { content: "\2190 "; }
.rcard-hint.prev::after { content: ""; }
.fn-all { margin-top: 1.8rem; font-size: 0.95rem; }

/* a quiet embedded listen row (soundcloud mini player) under the credits */
.case-listen { max-width: 760px; margin-top: 1.8rem; }
.case-listen-label {
  font-family: var(--font-body); font-weight: 700;
  font-size: 0.9rem; letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0.72; margin-bottom: 0.6rem;
}
.case-listen iframe { display: block; border: 0; margin-top: 0.9rem; }
.case-listen-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.4rem; }
.listen-cta {
  background: none; cursor: pointer; font: inherit; color: inherit;
  font-size: 0.95rem; letter-spacing: 0.02em;
  border: 2px solid currentColor;
  padding: 0.75rem 1.6rem;
  transition: background 0.18s, color 0.18s;
}
.listen-cta:hover, .listen-cta:focus-visible { background: var(--sand); color: var(--black); }
.listen-cta[aria-pressed="true"] { background: rgba(201, 106, 55, 0.85); border-color: transparent; color: var(--white); }
.case-listen-alt { font-size: 0.85rem; opacity: 0.65; border-bottom: 1px solid rgba(211, 198, 180, 0.4); padding-bottom: 0.04em; }
.case-listen-alt:hover { opacity: 1; }

/* after the tone: the line is still open — participation block */
.att-participate {
  border: 1px solid rgba(201, 106, 55, 0.55); border-radius: 12px;
  background: rgba(196, 115, 79, 0.07);
  padding: 1.4rem 1.6rem; margin-top: 2.4rem; max-width: 760px;
}
.att-participate p { margin: 0; font-size: 1.05rem; line-height: 1.6; }
.att-participate p + p { margin-top: 0.55rem; }
.att-participate a {
  color: #cd9a6a; border-bottom: 2px solid rgba(201, 106, 55, 0.75);
  padding-bottom: 0.1em; white-space: nowrap;
}
.att-participate a:hover, .att-participate a:focus-visible { opacity: 1; color: var(--sand); border-bottom-color: var(--sand); }

/* the quiet breadth line — real engagements without photos yet */
.fn-also { font-size: 0.92rem; opacity: 0.7; max-width: 760px; margin: 1.6rem 0 0; line-height: 1.55; }

/* any field-note photo is zoomable into the lightbox (leads that are links,
   e.g. the gallery-index teasers, navigate instead — see gallery.js) */
.case-lead img, .case-photos img { cursor: zoom-in; }
a .case-lead img { cursor: pointer; }

/* fullscreen image lightbox (native <dialog>) — click image / backdrop / x / esc to close */
.lightbox {
  position: fixed; inset: 0; max-width: none; max-height: none;
  padding: 0; margin: 0; border: none; background: transparent; overflow: hidden;
}
/* only render when actually open — otherwise the UA's display:none keeps it hidden */
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(8, 9, 8, 0.92); }
.lightbox .lb-img { max-width: 92vw; max-height: 86vh; width: auto; height: auto; object-fit: contain; cursor: zoom-out; border-radius: 4px; }
.lightbox .lb-cap { position: fixed; left: 0; right: 0; bottom: 1.1rem; text-align: center; font-size: 0.85rem; opacity: 0.7; padding: 0 1rem; }
.lightbox .lb-x {
  position: fixed; top: 1rem; right: 1rem; width: 2.6rem; height: 2.6rem; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(211, 198, 180, 0.35); background: rgba(20, 21, 20, 0.6);
  color: var(--sand); font-size: 1.4rem; line-height: 1;
}
.lightbox .lb-x:hover, .lightbox .lb-x:focus-visible { background: var(--sand); color: var(--black); }
.lightbox .lb-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 3rem; height: 3rem; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(211, 198, 180, 0.35); background: rgba(20, 21, 20, 0.6);
  color: var(--sand); font-size: 1.7rem; line-height: 1;
}
.lightbox .lb-prev { left: 1rem; }
.lightbox .lb-next { right: 1rem; }
.lightbox .lb-nav:hover, .lightbox .lb-nav:focus-visible { background: var(--sand); color: var(--black); }
.lightbox.lb-single .lb-nav { display: none; }

@media (prefers-reduced-motion: reduce) { .rcard-open { transition: none; } }

@media (max-width: 720px) {
  .case-fields { columns: 1; }
  .fn-rail { grid-template-columns: 1fr; }
}

/* ─── services ───────────────────────────────────────── */
.services-label {
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 1.4rem;
}
.services-method {
  max-width: 920px;
  margin: 0 auto 4.5rem;
  font-size: clamp(1.25rem, 1.7vw, 1.7rem);
  line-height: 1.5;
  text-align: center;
}
.services-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 2.5rem);
  margin-bottom: 1rem;
  align-items: start;
}
.service-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.service-item h2,
.service-item h3 { font-size: clamp(1.4rem, 1.8vw, 1.7rem); margin: 1.3rem 0 0.7rem; }
.service-item p { font-size: 1rem; line-height: 1.55; }
.lane-proof {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.95rem;
  /* sand text (terra on charcoal is ~3:1, too low for small text);
     the terracotta underline keeps the accent */
  color: var(--sand);
  border-bottom: 0.1em solid var(--terra);
  padding-bottom: 0.1em;
}
.services-accountability {
  max-width: 860px;
  margin: 4.5rem auto 0;
  padding-top: 2.8rem;
  border-top: 1px solid rgba(211, 198, 180, 0.22);
  font-size: clamp(1.1rem, 1.45vw, 1.45rem);
  line-height: 1.55;
  text-align: center;
}
@media (max-width: 860px) { .services-list { grid-template-columns: 1fr; } }
.services-cta { text-align: center; margin-top: 2.5rem; }
.services-cta .connect-alt { margin-top: 1.1rem; }

/* services faq — the about accordion, tuned down a size for questions */
.section .fn-tier { margin-top: 4.5rem; }
.services-faq summary { font-size: clamp(1.3rem, 2vw, 1.9rem); }
.services-faq .acc-body a { border-bottom: 0.1em solid currentColor; padding-bottom: 0.05em; }

/* ─── about ──────────────────────────────────────────── */
.about-intro {
  /* original: terracotta block fills the viewport; the photo runs flush
     to the section's top/right/bottom edges, text inset on the left */
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  align-items: stretch;
}
.about-intro-copy {
  padding: 3.5rem var(--gutter);
  align-self: start;
}
.about-intro-copy h1,
.about-intro-copy h2 { font-size: clamp(2.2rem, 5.2vw, 5.6rem); margin-bottom: 1.8rem; }
.about-intro-copy p { font-size: clamp(1.15rem, 1.5vw, 1.55rem); line-height: 1.6; max-width: 46ch; }
.about-intro-media img {
  width: 100%;
  height: 100%;
  min-height: clamp(560px, 88vh, 950px);
  object-fit: cover;
}
@media (max-width: 720px) {
  .about-intro { grid-template-columns: 1fr; }
  .about-intro-media img { min-height: 60vh; }
}

/* ─── about: accountability line + two team tiers ───── */
.team-accountability {
  max-width: 900px;
  margin: 0 auto 3.5rem;
  font-size: clamp(1.25rem, 1.7vw, 1.7rem);
  line-height: 1.5;
  text-align: center;
}
.team-portraits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
  max-width: var(--max-w);
  margin: 0 auto 3rem;
}
.team-portraits img {
  width: 100%;
  aspect-ratio: 5 / 8;     /* original portraits are tall cards */
  object-fit: cover;
  border-radius: 10px;     /* original portraits have rounded corners */
}
@media (max-width: 720px) {
  .team-portraits { grid-template-columns: repeat(2, 1fr); }
}

/* ─── about: bio accordion (original is collapsed rows + "+") ─ */
.team-accordion { max-width: var(--max-w); margin: 0 auto; }
.team-accordion details {
  border-top: 1px solid rgba(211, 198, 180, 0.35);
}
.team-accordion details:last-child {
  border-bottom: 1px solid rgba(211, 198, 180, 0.35);
}
.team-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-head);
  font-weight: 300;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  padding: 0.7rem 0.2rem;
}
.team-accordion summary::-webkit-details-marker { display: none; }
.team-accordion .acc-icon {
  font-size: 1.6rem;
  font-weight: 300;
  transition: transform 0.25s ease;
}
.team-accordion details[open] .acc-icon { transform: rotate(45deg); }
.team-accordion .acc-body { padding: 0.5rem 0.2rem 2rem; max-width: 70ch; }

/* quiet two-step exit after the bios: services first (about is a trust
   page, not a sales page), the inquiry modal second */
.about-exit { text-align: center; margin: 3.5rem auto 0; }
.about-exit .statement-cta { margin-top: 1.4rem; }

/* ─── generic content pages (privacy, 404) ───────────── */
.page {
  max-width: 900px;
  margin: 0 auto;
  padding: 4rem var(--gutter) 6rem;
}
.page h1 { font-size: clamp(2rem, 4.1vw, 3.6rem); margin-bottom: 2rem; }
.page h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 2.5rem 0 1rem; }
.page a { border-bottom: 0.1em solid currentColor; padding-bottom: 0.05em; }
.muted { opacity: 0.8; }

/* ─── cross-page transitions (MPA View Transitions API) ─────
   same-origin navigations crossfade (~quarter second) so the site reads as
   one continuous surface. the header keeps its own transition group so it
   holds steady while the page content fades under it. unsupported browsers
   (firefox) and reduced-motion get instant navigation, as today. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation-duration: 0.2s; }
::view-transition-new(root) { animation-duration: 0.26s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ─── mobile long-form pass (2026-07 usability critique) ─────
   left-align the long centered passages (short declarations stay
   centered), tighten long-form line height, and compact the gallery
   index's featured teasers so the archive rail surfaces sooner.
   sits at the end of the file so it wins over the section rules. */
@media (max-width: 720px) {
  .services-method,
  .services-accountability,
  .team-accountability { text-align: left; }
  .case-fields dd,
  .case-excerpt { line-height: 1.6; }
  .fn-featured .case-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
  }
  .fn-featured .case-quote { display: none; }
}

/* ─── reveal-on-scroll (original "fade" animation) ───── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}