/* ============================================================
   VELLUM — COMPONENTS
   Nav, mobile overlay, curtain, grain, buttons, lightbox,
   masonry grid, page-title block, marquee, footer, statement.
   Every rule references --page-* / --color-* so the design
   system can recolor any of it from style.css.
   ============================================================ */

/* ── NAV ───────────────────────────────────────────────────── */
.vellum-nav {
  position: fixed; inset: 0 0 auto;
  z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px var(--gutter);
  color: var(--page-text);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-sm) var(--ease),
              color      var(--dur-sm) var(--ease),
              padding    var(--dur-sm) var(--ease),
              border-color var(--dur-sm) var(--ease);
}

.vellum-homepage .vellum-nav { mix-blend-mode: difference; color: #fff; }

/* ── SCROLLED STATE ──────────────────────────────────────────
   JS (main.js) adds .is-scrolled once the page scrolls past a small
   threshold. The nav fades from transparent to a solid, blurred bar
   with dark text + a hairline, so it stays legible over content. */
.vellum-nav.is-scrolled {
  background: var(--nav-scrolled-bg);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border-bottom-color: var(--page-line);
  padding-top: 16px;
  padding-bottom: 16px;
  color: var(--page-text);
}
/* The homepage nav normally inverts via mix-blend-mode; once it has a solid
   backing that would invert the bar itself, so drop the blend + reveal the
   wordmark and use the page's own text color. */
.vellum-homepage .vellum-nav.is-scrolled {
  mix-blend-mode: normal;
  color: var(--page-text);
}
.vellum-nav.is-scrolled .vellum-nav__mark { visibility: visible; }

/* ── NAV CLEARANCE ───────────────────────────────────────────
   The nav is position:fixed, so it sits ON TOP of page content. Without a
   top offset, any template that opens straight into <main> (single.php,
   WooCommerce, custom CPT archives, etc.) hides its first line under the
   nav. Give <main> a default offset equal to the nav height as a safety
   net, then opt out the cases that already handle their own clearance:

     • .vellum-homepage      — the homepage hero bleeds under the transparent nav
     • > .vellum-hero        — any full-bleed hero placed first in <main>
     • .vellum-page-title    — Vellum's title block carries its own top padding,
                               BUT ONLY when it is genuinely the first thing on
                               the page (see the first-child chain below)
     • > .vellum-bleed       — opt-in flush for a child theme's custom hero
                               (add class="vellum-bleed" to the first element)

   FIXED 2026-07-28 — the opt-out used to be a bare `:has(.vellum-page-title)`,
   which matched a title block ANYWHERE inside <main>. inc/page-title.php
   auto-injects that block into the_content, so any custom template that
   rendered its own heading first and then printed the_content silently lost
   ALL nav clearance and slid its first line under the fixed nav. The chain
   below requires the title to be first-child at every level, so a title
   injected further down the page no longer cancels the offset.

   :has() is well-supported; the .vellum-homepage rule is a non-:has
   fallback so the most important page (the homepage) is safe regardless. */
.vellum-main { padding-top: var(--nav-h); }

.vellum-homepage .vellum-main,
.vellum-main:has(> .vellum-hero:first-child),
.vellum-main:has(> .vellum-bleed:first-child),
.vellum-main:has(> *:first-child > .vellum-bleed:first-child),
.vellum-main:has(> .vellum-page-title:first-child),
.vellum-main:has(> *:first-child > .vellum-page-title:first-child),
.vellum-main:has(> *:first-child > *:first-child > .vellum-page-title:first-child) {
  padding-top: 0;
}

.vellum-nav__mark,
.vellum-nav__mark:link,
.vellum-nav__mark:visited {
  display: inline-flex; align-items: center;
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  letter-spacing: .06em;
  color: inherit;   /* wordmark links home; never let :visited turn it blue */
}
.vellum-nav__logo-img { max-height: 32px; width: auto; }

.vellum-nav__links {
  display: flex; gap: clamp(16px, 3vw, 40px);
  list-style: none; margin: 0; padding: 0;
}
.vellum-nav__links a {
  font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: currentColor;
  opacity: .8;
  transition: opacity var(--dur-sm) var(--ease);
}
.vellum-nav__links a:hover { opacity: 1; }

.vellum-nav__burger {
  display: none;
  width: 36px; height: 24px;
  flex-direction: column; justify-content: space-between;
  background: transparent;
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.vellum-nav__burger span {
  display: block; height: 1px;
  background: currentColor;
  transition: transform var(--dur-sm) var(--ease),
              opacity   var(--dur-sm) var(--ease);
}

.vellum-nav.is-open .vellum-nav__burger span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.vellum-nav.is-open .vellum-nav__burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.vellum-nav.is-open .vellum-nav__burger span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

/* ── REUSABLE BURGER UTILITY (vellum-burger) ─────────────────
   Drop-in, bulletproof hamburger→X for ANY child theme so the
   "middle bar leaves two dots" bug never recurs. Markup:
     <button class="vellum-burger" aria-expanded="false">
       <span></span><span></span><span></span>
     </button>
   Resize with --vb-w / --vb-h / --vb-bar on the button. Opens on
   `.is-open` on the button OR a `.nav-open` ancestor (e.g. body),
   so it works with any child's toggle pattern. The X math is
   derived from the size vars, and the middle bar collapses with
   BOTH opacity:0 AND scaleX(0) (+transform-origin:center) — the
   combination that guarantees no leftover dots.                  */
.vellum-burger {
  --vb-w: 30px; --vb-h: 20px; --vb-bar: 2px;
  display: inline-flex; flex-direction: column; justify-content: space-between;
  width: var(--vb-w); height: var(--vb-h);
  padding: 0; margin: 0; background: none; border: 0; cursor: pointer;
  box-sizing: content-box; color: inherit;
  -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
}
.vellum-burger span {
  display: block; width: 100%; height: var(--vb-bar);
  background: currentColor; border-radius: 2px;
  transform-origin: center;
  transition: transform .3s var(--ease-out, cubic-bezier(.16,1,.3,1)),
              opacity   .2s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.vellum-burger.is-open span:nth-child(1),
.nav-open .vellum-burger span:nth-child(1) { transform: translateY(calc((var(--vb-h) - var(--vb-bar)) / 2)) rotate(45deg); }
.vellum-burger.is-open span:nth-child(2),
.nav-open .vellum-burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.vellum-burger.is-open span:nth-child(3),
.nav-open .vellum-burger span:nth-child(3) { transform: translateY(calc((var(--vb-h) - var(--vb-bar)) / -2)) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .vellum-burger span { transition: none; } }

/* ── MOBILE NAV OVERLAY ──────────────────────────────────── */
.vellum-nav-overlay {
  position: fixed; inset: 0;
  background: var(--page-bg);
  z-index: var(--z-overlay);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-md) var(--ease);
}
.vellum-nav-overlay.is-open { opacity: 1; pointer-events: all; }
.vellum-nav-overlay[hidden] { display: flex; } /* hidden attr removed via JS on first open */

.vellum-nav-overlay ul {
  list-style: none; margin: 0; padding: 0;
  text-align: center;
}
.vellum-nav-overlay li { overflow: hidden; }
.vellum-nav-overlay a {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(36px, 8vw, 80px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--page-text);
  transform: translateY(110%);
  transition: transform var(--dur-lg) var(--ease-out),
              color     var(--dur-sm) var(--ease);
}
.vellum-nav-overlay.is-open a { transform: translateY(0); }
.vellum-nav-overlay a:hover { color: var(--page-accent); }

/* Stagger up to 8 menu items */
.vellum-nav-overlay li:nth-child(1) a { transition-delay: .05s; }
.vellum-nav-overlay li:nth-child(2) a { transition-delay: .10s; }
.vellum-nav-overlay li:nth-child(3) a { transition-delay: .15s; }
.vellum-nav-overlay li:nth-child(4) a { transition-delay: .20s; }
.vellum-nav-overlay li:nth-child(5) a { transition-delay: .25s; }
.vellum-nav-overlay li:nth-child(6) a { transition-delay: .30s; }
.vellum-nav-overlay li:nth-child(7) a { transition-delay: .35s; }
.vellum-nav-overlay li:nth-child(8) a { transition-delay: .40s; }

/* When the overlay is open, the in-page burger needs to use the
   overlay's text color (handled automatically because the overlay
   sits above the nav and the nav inherits currentColor). */

/* ── CURTAIN (page transition) ───────────────────────────────
   A pure opacity fade — NOT a wipe/slide. The page fades out to
   --page-bg, navigates, then the new page fades back in. Driven by
   a CSS transition on opacity so it works with zero JS libraries
   (main.js only toggles the `.is-active` class) — robust on mobile
   where the GSAP CDN may be slow or blocked. Sits below the nav so
   the nav stays put through the transition. Safe default: opacity 0,
   so if JS never runs the page is simply visible (no stuck overlay). */
.vellum-curtain {
  position: fixed; inset: 0;
  background: var(--page-bg);
  z-index: var(--z-curtain);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  /* Child themes can override --dur-curtain to speed the page transition
     without affecting every other --dur-sm hover/UI transition. */
  transition: opacity var(--dur-curtain, var(--dur-sm)) var(--ease);
}
/* Covering the screen mid-transition. */
.vellum-curtain.is-active { opacity: 1; }
/* Used to snap the curtain to a state with no animation (the first
   frame of the incoming-page fade-in), then removed so the fade runs. */
.vellum-curtain.is-instant { transition: none; }

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

/* ── GRAIN OVERLAY ───────────────────────────────────────── */
.vellum-grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 99;
  opacity: .055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* ── BUTTON ──────────────────────────────────────────────── */
.btn,
.vellum-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  border: 1px solid var(--page-line);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--page-text);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--dur-sm) var(--ease),
              color            var(--dur-sm) var(--ease),
              border-color     var(--dur-sm) var(--ease);
}
.btn:hover,
.vellum-btn:hover {
  background: var(--page-text);
  color: var(--page-bg);
  border-color: var(--page-text);
}
.btn--accent,
.vellum-btn--accent {
  border-color: var(--page-accent);
  color: var(--page-accent);
}
.btn--accent:hover,
.vellum-btn--accent:hover {
  background: var(--page-accent);
  color: var(--page-bg);
  border-color: var(--page-accent);
}
.btn--square,
.vellum-btn--square { border-radius: 0; }

/* ── HERO (homepage) ──────────────────────────────────────
   Owns its own vertical rhythm. Padding-top clears the fixed
   nav. Min-height: 100vh on desktop so the hero feels like a
   landing canvas; the rest of the page scrolls below it. */
.vellum-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: clamp(140px, 20vh, 240px) 0 clamp(80px, 10vh, 140px);
  overflow: hidden;
}

.vellum-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Overlay above the bg image, below the text — gives text legibility
   without nuking the image. Rendered only when an image is present
   (markup is conditional in homepage.php). */
.vellum-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
              rgba(0,0,0,.40) 0%,
              rgba(0,0,0,.15) 50%,
              rgba(0,0,0,.55) 100%);
  pointer-events: none;
}

.vellum-hero__inner {
  position: relative;
  z-index: 2;
}

.vellum-hero__name {
  font-family: var(--font-display);
  font-size: clamp(56px, 12vw, 200px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

.vellum-hero__caption {
  margin-top: clamp(20px, 3vw, 40px);
  max-width: 60ch;
  color: var(--page-text-muted);
}

/* When a background image is present, force white text against the
   gradient overlay regardless of the page-color tokens. */
.vellum-hero--has-bg .vellum-hero__name { color: #fff; }
.vellum-hero--has-bg .vellum-hero__caption { color: rgba(255, 255, 255, .85); }

/* On the homepage the nav already mix-blend-mode: differences against
   the hero text; we don't need a duplicate wordmark fighting for the
   same eyeline. Suppress it visually only — keep it in the DOM for
   screen readers and so the JS toggle still binds. */
.vellum-homepage .vellum-nav__mark { visibility: hidden; }

/* ── SPLIT — generic two-column layout ────────────────────
   text-left, image-right by default. Reverse with .vellum-split--reverse.
   Drop into any page content; the page.php container provides the
   gutter and max-width. */
.vellum-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap-lg);
  align-items: start;
  margin: clamp(20px, 4vh, 60px) 0;
}
.vellum-split--reverse {
  direction: rtl;
}
.vellum-split--reverse > * {
  direction: ltr;
}
.vellum-split__text > * + * { margin-top: 1em; }
.vellum-split__text .lede {
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.45;
  color: var(--page-text);
  margin: 0 0 1em;
}
.vellum-split__image { position: relative; }
.vellum-split__image img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 860px) {
  .vellum-split {
    grid-template-columns: 1fr;
    gap: var(--gap);
  }
  /* On mobile we want the image AFTER the text (visual order) regardless
     of source order, since the image is decorative. */
  .vellum-split__image { order: 2; }
}

/* ── PAGE TITLE BLOCK ──────────────────────────────────────
   Default: wrapped in .container for standalone use (archive.php,
   search.php, etc.) — provides its own max-width + gutter.
   `--unwrapped`: when the caller is already inside a container
   (page.php's auto-inject via the_content), the title becomes
   gutterless so it aligns with the body content. */
/* Top padding can never be less than the measured nav height, so the title
   clears the fixed nav even when --nav-h resolves larger than the design
   value (a tall logo, a long menu wrapping to two lines). */
.vellum-page-title {
  padding: max(clamp(96px, 14vh, 180px), calc(var(--nav-h) + var(--gap))) 0 clamp(40px, 6vh, 80px);
}
.vellum-page-title--unwrapped {
  padding-left: 0;
  padding-right: 0;
}
.vellum-page-title__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6.5vw, 96px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}

/* ── ARTWORK / CARD GRID (masonry-ready) ─────────────────── */
.vellum-grid--cards {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  padding: 0 var(--gutter) 14vh;
}
@media (max-width: 860px) {
  .vellum-grid--cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 480px) {
  .vellum-grid--cards { grid-template-columns: 1fr; }
}

.vellum-card {
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--color-accent-dim);
  border: 1px solid var(--page-line);
  cursor: pointer;
}
.vellum-card > img,
.vellum-card > picture > img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 6s var(--ease);
}
.vellum-card:hover > img,
.vellum-card:hover > picture > img { transform: scale(1); }
.vellum-card__info {
  position: absolute; inset: auto 0 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(0,0,0,.85), transparent);
  color: #fff;
  transform: translateY(100%);
  transition: transform var(--dur-md) var(--ease);
}
.vellum-card:hover .vellum-card__info { transform: translateY(0); }
.vellum-card__title { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
.vellum-card__meta  { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--page-accent); }

/* ── MASONRY VARIANT (CSS columns) ──────────────────────── */
.vellum-masonry {
  column-count: 3;
  column-gap: var(--gap);
  padding: 0 var(--gutter);
}
.vellum-masonry > * {
  break-inside: avoid;
  margin-bottom: var(--gap);
  display: block;
  width: 100%;
}
@media (max-width: 1024px) { .vellum-masonry { column-count: 2; } }
@media (max-width: 600px)  { .vellum-masonry { column-count: 1; } }

/* ── LIGHTBOX ────────────────────────────────────────────── */
.vellum-lightbox {
  position: fixed; inset: 0;
  z-index: var(--z-lightbox);
  background: rgba(13, 12, 10, .97);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-md) var(--ease);
}
.vellum-lightbox.is-open { opacity: 1; pointer-events: all; }
.vellum-lightbox[hidden] { display: flex; } /* hidden attr removed once initialized */

.vellum-lightbox__figure {
  margin: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 18px;
  max-width: 92vw; max-height: 92vh;
}
.vellum-lightbox__img {
  max-width: 92vw; max-height: 80vh;
  object-fit: contain;
  background: #000;
}
/* Captions run to a couple of sentences on archive and press images, and a
   centred paragraph spanning the full viewport is unreadable at that length.
   Cap the measure at 700px and set the text left; the block still centres
   under the image because the figure is a centred flex column, so short
   captions read as centred and long ones read as a paragraph. */
.vellum-lightbox__caption {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  text-align: left;
  max-width: min(700px, 92vw);
  margin-inline: auto;
  line-height: 1.6;
  text-wrap: pretty;
}

/* ── LIGHTBOX CONTROLS ─────────────────────────────────────
   66x66 buttons, CSS-drawn chevrons + X. 1.5px stroke. Same
   shape and size across every lightbox so muscle memory works.
   Visible button text is hidden via font-size:0; aria-label
   keeps the controls accessible. */
.vellum-lightbox__close,
.vellum-lightbox__prev,
.vellum-lightbox__next {
  position: absolute;
  width: 66px;
  height: 66px;
  padding: 0;
  background: transparent;
  border: 0;
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
  opacity: .7;
  font-size: 0;       /* hide the literal char inside the button */
  color: transparent;
  line-height: 0;
  transition: opacity var(--dur-sm) var(--ease);
}
.vellum-lightbox__close:hover,
.vellum-lightbox__prev:hover,
.vellum-lightbox__next:hover { opacity: 1; }

.vellum-lightbox__close { top: 20px;  right: 20px; }
.vellum-lightbox__prev  { left: 20px;  top: 50%; transform: translateY(-50%); }
.vellum-lightbox__next  { right: 20px; top: 50%; transform: translateY(-50%); }

/* Prev / next: CSS-drawn chevron from two borders rotated 45°. */
.vellum-lightbox__prev::before,
.vellum-lightbox__next::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  border-top: 1.5px solid #fff;
  border-left: 1.5px solid #fff;
}
.vellum-lightbox__prev::before {
  transform: translate(-30%, -50%) rotate(-45deg);
}
.vellum-lightbox__next::before {
  transform: translate(-70%, -50%) rotate(135deg);
}

/* Close: two crossed 1.5px lines. */
.vellum-lightbox__close::before,
.vellum-lightbox__close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 1.5px;
  background: #fff;
}
.vellum-lightbox__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.vellum-lightbox__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* ── MARQUEE ─────────────────────────────────────────────── */
.vellum-marquee {
  overflow: hidden;
  border-top: 1px solid var(--page-line);
  border-bottom: 1px solid var(--page-line);
  padding: 24px 0;
}
.vellum-marquee__track {
  display: flex;
  animation: vellum-marquee 45s linear infinite;
  width: max-content;
}
.vellum-marquee__item {
  font-size: 11px; font-weight: 600;
  letter-spacing: .25em; text-transform: uppercase;
  color: var(--page-text-muted);
  padding: 0 30px;
  flex-shrink: 0;
}
.vellum-marquee__item b { color: var(--page-accent); font-weight: 400; }

@keyframes vellum-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── STATEMENT (show/hide on text-heavy pages) ──────────── */
.vellum-statement {
  padding: clamp(60px, 8vh, 120px) var(--gutter);
}
.vellum-statement__copy {
  max-width: var(--reading-max);
  margin: 0 auto;
  position: relative;
}
.vellum-statement__copy.is-collapsed {
  max-height: clamp(180px, 24vh, 280px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
          mask-image: linear-gradient(to bottom, #000 60%, transparent);
}
.vellum-statement__toggle {
  display: inline-flex;
  margin-top: 24px;
  font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--page-accent);
  background: transparent;
  border-bottom: 1px solid var(--page-accent);
  padding: 4px 0;
  cursor: pointer;
}

/* ── FOOTER ──────────────────────────────────────────────── */
.vellum-footer {
  background: var(--page-bg);
  color: var(--page-text-muted);
  padding: 36px 0;
  margin-top: 80px;
}
.vellum-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: var(--type-footer);
}

/* FIXED 2026-07-28 — the size above was only ever set on the flex CONTAINER,
   and the footer's text lives in <p> elements. The global
   `p, li, td, th, label { font-size: var(--type-body) }` rule in style.css
   applies directly to those paragraphs, and a direct rule always beats an
   inherited value — so the footer silently rendered at full body size (18px
   at desktop) on every Vellum site, never at the intended small size. These
   selectors target the elements themselves so the footer size actually wins. */
.vellum-footer p,
.vellum-footer li,
.vellum-footer a,
.vellum-footer small,
.vellum-footer__credit,
.vellum-footer__tagline {
  font-size: var(--type-footer);
  line-height: 1.5;
}

.vellum-footer p { margin: 0; }
.vellum-footer__links {
  display: flex; gap: var(--gap);
  list-style: none; margin: 0; padding: 0;
}
.vellum-footer__links a {
  font-size: var(--type-footer);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ── REVEAL (intersection-observer driven) ──────────────── */
.vellum-reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity var(--dur-lg) var(--ease),
              transform var(--dur-lg) var(--ease);
}
.vellum-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── RESPONSIVE NAV ─────────────────────────────────────── */
@media (max-width: 860px) {
  .vellum-nav__links { display: none; }
  .vellum-nav__burger { display: flex; }
}

/* ── CONTACT FORM 7 ─────────────────────────────────────────
   Drop-in styling for CF7. Large, well-padded inputs that
   feel intentional next to the editorial typography. Uses
   the page color tokens so the form recolors per-page along
   with everything else. */
.wpcf7 {
  max-width: 720px;
  margin: 0;
}

.wpcf7-form p {
  margin: 0 0 22px;
}

.wpcf7-form label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--page-text-muted);
  margin: 0 0 10px;
}

.wpcf7-form input.wpcf7-text,
.wpcf7-form input.wpcf7-email,
.wpcf7-form input.wpcf7-tel,
.wpcf7-form input.wpcf7-number,
.wpcf7-form input.wpcf7-date,
.wpcf7-form input.wpcf7-url,
.wpcf7-form input.wpcf7-password,
.wpcf7-form textarea.wpcf7-textarea,
.wpcf7-form select.wpcf7-select {
  display: block;
  width: 100%;
  padding: 18px 20px;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.4;
  color: var(--page-text);
  background: transparent;
  border: 1px solid var(--page-line);
  border-radius: 0;
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur-sm) var(--ease);
}

.wpcf7-form textarea.wpcf7-textarea {
  min-height: 180px;
  resize: vertical;
  line-height: 1.55;
}

.wpcf7-form input.wpcf7-text:focus,
.wpcf7-form input.wpcf7-email:focus,
.wpcf7-form input.wpcf7-tel:focus,
.wpcf7-form textarea.wpcf7-textarea:focus,
.wpcf7-form select.wpcf7-select:focus {
  outline: none;
  border-color: var(--page-accent);
}

.wpcf7-form input.wpcf7-submit,
.wpcf7-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  padding: 18px 36px;
  border: 1px solid var(--page-text);
  background: var(--page-text);
  color: var(--page-bg);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: 0;
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
  width: auto;
  min-height: 56px;
  transition: background var(--dur-sm) var(--ease),
              color      var(--dur-sm) var(--ease);
}
.wpcf7-form input.wpcf7-submit:hover,
.wpcf7-form button[type="submit"]:hover {
  background: transparent;
  color: var(--page-text);
}

/* Response messages and per-field validation. */
.wpcf7-response-output {
  margin: 24px 0 0;
  padding: 14px 18px;
  border: 0;
  border-left: 3px solid var(--page-accent);
  font-size: 14px;
  background: var(--color-accent-dim);
}
.wpcf7-not-valid-tip {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: #c00;
  letter-spacing: 0;
  text-transform: none;
}
.wpcf7-form .wpcf7-not-valid {
  border-color: #c00;
}

/* Ajax loader. */
.wpcf7-spinner {
  margin-left: 14px;
  vertical-align: middle;
}

/* ── BOA Premium Contact Form (Formiqa-compatible markup) ───
   When CF7's form uses the Suite's .boa-form-group markup, the
   Suite ships its own (navy/amber) inline CSS. We re-skin it
   with Vellum tokens. The body-prefixed selectors bump
   specificity above the Suite's inline style block so we win
   regardless of source order. */
body .wpcf7 .boa-form-row {
  display: grid;
  gap: 20px;
  margin: 0 0 22px;
}
body .wpcf7 .boa-form-row--half {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 600px) {
  body .wpcf7 .boa-form-row--half { grid-template-columns: 1fr; }
}

body .wpcf7 .boa-form-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 22px;
}
body .wpcf7 .boa-form-group--last { margin-bottom: 28px; }

body .wpcf7 .boa-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--page-text-muted);
  margin: 0;
}
body .wpcf7 .boa-required {
  color: var(--page-accent);
  margin-left: 4px;
}

body .wpcf7 .boa-form-group input,
body .wpcf7 .boa-form-group select,
body .wpcf7 .boa-form-group textarea {
  display: block;
  width: 100%;
  padding: 18px 20px;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.4;
  color: var(--page-text);
  background: transparent;
  border: 1px solid var(--page-line);
  border-radius: 0;
  box-shadow: none;
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur-sm) var(--ease);
}
body .wpcf7 .boa-form-group input:focus,
body .wpcf7 .boa-form-group select:focus,
body .wpcf7 .boa-form-group textarea:focus {
  outline: none;
  border-color: var(--page-accent);
  box-shadow: none;
}
body .wpcf7 .boa-form-group textarea {
  min-height: 180px;
  resize: vertical;
  line-height: 1.55;
}

body .wpcf7 input.boa-form-submit,
body .wpcf7 .boa-form-submit {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  padding: 18px 36px;
  border: 1px solid var(--page-text);
  background: var(--page-text);
  color: var(--page-bg);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: 0;
  cursor: pointer;
  width: auto;
  min-height: 56px;
  transform: none;
  -webkit-appearance: none; appearance: none;
  transition: background var(--dur-sm) var(--ease),
              color      var(--dur-sm) var(--ease);
}
body .wpcf7 input.boa-form-submit:hover,
body .wpcf7 .boa-form-submit:hover {
  background: transparent;
  color: var(--page-text);
  transform: none;
}

/* ── CONTACT PAGE — two-column layout ──
   Intro / contact info on the left, form on the right.
   Stacks on mobile. When the Suite's Formiqa mode is on
   (body.boa-tf-active), the form takes over the viewport,
   so we collapse the two columns and hide the intro. */
.vellum-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: var(--gap-lg);
  align-items: start;
  margin: 0 auto;
  max-width: var(--content-max);
  padding: 0 var(--gutter) clamp(60px, 8vh, 120px);
}
.vellum-contact-grid__intro p { font-size: var(--type-body); margin-bottom: 16px; }
.vellum-contact-grid__intro p.lede {
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.5;
  margin-bottom: 28px;
  color: var(--page-text);
}
.vellum-contact-grid__intro strong { color: var(--page-text); font-weight: 600; }
.vellum-contact-grid__intro a {
  border-bottom: 1px solid var(--page-line);
  transition: border-color var(--dur-sm) var(--ease);
}
.vellum-contact-grid__intro a:hover { border-color: var(--page-accent); }

@media (max-width: 860px) {
  .vellum-contact-grid {
    grid-template-columns: 1fr;
    gap: var(--gap);
  }
}
body.boa-tf-active .vellum-contact-grid {
  display: block;
}
body.boa-tf-active .vellum-contact-grid__intro {
  display: none;
}