/* ==========================================================================
   Meg Baker Photography — withmegsphoto.com
   Editorial, warm-neutral portfolio. No frameworks, no dependencies.
   ========================================================================== */

/* ---------- Self-hosted fonts ---------- */
/* Eldure — the only serif on the site (titles, captions, editorial copy).
   Weight range declared wide so heavier requests don't trigger faux bold. */
@font-face {
  font-family: 'Eldure';
  src: url('../fonts/Eldure-Regular.otf') format('opentype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Eldure';
  src: url('../fonts/Eldure-Italic.otf') format('opentype');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
/* Sabon Roman — classic book serif, used for select editorial accents
   (the About poem, the home collection labels). Single roman cut; weight
   range declared wide so heavier requests don't trigger faux bold. */
@font-face {
  font-family: 'Sabon';
  src: url('../fonts/Sabon-Roman.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
/* Zyntro — a fine high-waisted display serif, used only for the album-page
   titles (the gallery preface heading). Single cut. */
@font-face {
  font-family: 'Zyntro';
  src: url('../fonts/Zyntro-Regular.otf') format('opentype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
/* IBM Plex Sans — the only sans on the site (nav, labels, body copy).
   Two real cuts, Medium (500) and SemiBold (600), each with an italic; the
   weight ranges are split so a 500 request maps to Medium and a 600 request
   maps to SemiBold, with no faux-bolding in between. */
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ibm-plex-sans-500-normal.ttf') format('truetype');
  font-weight: 300 549;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ibm-plex-sans-500-italic.ttf') format('truetype');
  font-weight: 300 549;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ibm-plex-sans-600-normal.ttf') format('truetype');
  font-weight: 550 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ibm-plex-sans-600-italic.ttf') format('truetype');
  font-weight: 550 700;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --bg: #f6f1e6;            /* subtle off-white eggshell, a la annigraham.com */
  --bg-soft: #efe9dc;
  /* ink — softened off-black (warm espresso) for the fine-print editorial feel */
  --ink: #464034;
  --ink-soft: #6b6457;
  --muted: #8e8678;
  --line: #e2dccd;
  /* portfolio page paper — warm pale greige, sampled from s30 */
  --paper: #e3dfd2;
  /* sage band (collections + footer) — #aaa98e per s10 swatch, opacity eased
     a touch so the eggshell beneath warms it slightly */
  --band: rgba(170, 169, 142, 0.9);
  --band-ink: #45412f;
  --band-muted: rgba(69, 65, 47, 0.62);
  --band-line: rgba(69, 65, 47, 0.26);
  /* about spread — creamy paper, sampled from s11 */
  --cream: #f5e6c0;
  --cream-ink: #4a3f29;
  --cream-soft: rgba(74, 63, 41, 0.78);
  /* FAQ section — textured greige, sampled from s14 */
  --greige: #d3d2ce;
  --greige-ink: #4c4940;
  --greige-soft: #615e54;
  /* paper-grain texture (s11/s14) — inline SVG noise, tinted by each section.
     A finer, richer tooth than before: 4 octaves on a larger 320px tile, so it
     reads like real pressed paper and its repeat is far less visible (Greg). */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --serif: 'Eldure', Georgia, 'Times New Roman', serif;
  --sabon: 'Sabon', Georgia, 'Times New Roman', serif;
  --wordmark: 'Eldure', Georgia, serif;
  --sans: 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.21, 1);
  --header-h: 144px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 500;
  /* sans copy runs small, dense, and tight — like fine print on stationery */
  font-size: 0.88rem;
  line-height: 1.5;
  letter-spacing: -0.015em;
  font-synthesis: none;    /* never fake-bold/italic the single-weight IBM Plex */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* a whisper of extra weight on the sans. IBM Plex Sans ships here in only two
     real cuts (Medium 500 / SemiBold 600) and faux-bold is disabled, so a hair
     of same-colour text-stroke is the cleanest way to thicken every sans glyph
     a touch without tipping into full bold or swapping the typeface (Greg). The
     stroke inherits to all text; the serif & display faces opt out below, so
     ONLY the sans is affected. */
  -webkit-text-stroke: 0.3px currentColor;
}
/* serif & display faces keep their natural, unstroked weight — opt them out of
   the sans stroke above. (The About poem sets its own heavier 0.42px stroke,
   which is more specific and still wins, so it is deliberately not listed.) */
h1, h2, h3,
.eyebrow,
.brand-name,
.mobile-menu > a,
.philosophy blockquote,
.page-head .lede,
.filters,
.filter-btn,
.collection-card h3,
.band-seam span,
.about-sign .signature,
.testimonial-row blockquote,
.form-status,
.album-title {
  -webkit-text-stroke: 0;
}
/* the FAQ headings are sans (IBM Plex), not serif, even though they are h2/h3 —
   restore the sans stroke the blanket heading reset above stripped from them */
.faq-title,
.faq-item h3 {
  -webkit-text-stroke: 0.3px currentColor;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

::selection { background: #e8e0d0; color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: 1rem;
  z-index: 200;
  background: var(--ink);
  color: var(--bg);
  padding: 0.6em 1.2em;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  transition: top 0.3s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---------- Type helpers ---------- */
/* little titles — Cormorant Garamond serif, as with the "MEG BAKER" label */
.eyebrow {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.4rem;
  max-width: none;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  margin: 0 0 1.5rem;
  letter-spacing: 0.015em;
}

p { margin: 0 0 1.4em; color: var(--ink-soft); max-width: 64ch; }

.text-link {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.69rem;
  letter-spacing: 0.025em;
  color: var(--ink);
  padding-bottom: 0.35em;
  position: relative;
}
.text-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0.32);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.text-link:hover::after,
.text-link:focus-visible::after { transform: scaleX(1); }

/* buttons share the s33 text-link look — quiet text, short underline, no box */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.69rem;
  letter-spacing: 0.025em;
  color: var(--ink);
  background: transparent;
  border: 0;
  padding: 0 0 0.35em;
  cursor: pointer;
  position: relative;
}
.btn::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.32);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); }

/* ---------- Paper-grain texture (s11 / s14) ----------
   A faint noise layer painted OVER the section (like a scanned print);
   pointer-events off so links/inputs stay clickable. */
.textured { position: relative; isolation: isolate; }
.textured::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.16;
  mix-blend-mode: multiply;
  pointer-events: none;
  /* sit the grain BEHIND the section's content: it multiplies only with the
     element's own background color, while every item on top of it — text,
     icons, photographs, the embedded form — stays perfectly crisp and
     untextured. (isolation:isolate above keeps this negative layer contained
     to its own section.) The sole exception is the About text, restored below. */
  z-index: -1;
}
/* the colored halves of the About and Contact spreads read as fine stationery —
   their grain is pressed much harder than the default. The About cream is now
   pressed harder still — more intensity on the page's left half (Greg, 6/12). */
/* SOLE EXCEPTION (Greg): on the About page the pressed tooth stays OVER the
   text (z-index auto, the default painting above content) so the poem reads as
   genuinely printed on the cream stationery, not laid on a flat color. */
.about-cream.textured::after { opacity: 0.64; z-index: auto; }
/* the contact panel's sage sheet is pressed hardest of all — unmistakably
   printed paper, not a flat screen color */
.contact-panel.textured::after { opacity: 0.66; }
/* the seam strip between FAQ and footer carries the same tooth as both
   neighbors so the three read as one continuous sheet */
.band-seam--greige.textured::after { opacity: 0.3; }
/* the rest of the About/Contact paper (FAQ + footer) also gets a heavier tooth
   so the whole page reads like a printed sheet, not a flat screen */
.overlay-header .faq.textured::after,
.overlay-header .site-footer.textured::after,
.no-brand .faq.textured::after,
.no-brand .site-footer.textured::after { opacity: 0.3; }
/* every sage (--band) surface now carries the SAME pressed grain as the contact
   panel (0.66), so the printed-paper tooth is consistent site-wide (Greg, 6/12):
   home collections + mini-about + footer, and the portfolio prefooter + footer.
   (.portfolio-page .site-footer ties the .no-brand 0.3 rule above on specificity
   and wins by coming later, so the portfolio footer reads sage-pressed, not 0.3.) */
.collections.textured::after,
.mini-about.textured::after,
.prefooter.textured::after,
.home .site-footer.textured::after,
.portfolio-page .site-footer.textured::after { opacity: 0.66; }
/* keep the photographs that sit ON the sage crisp — lift them above the grain so
   only the paper around them carries the tooth (as on the contact panel, where
   the grain falls on sage + text but never on a photograph) */
.collections .frame,
.mini-about .frame,
.footer-ig-grid a { position: relative; z-index: 1; }
/* homepage landing — a much lighter, subtle tooth laid over the eggshell FIELD
   only; the photographs are lifted above it (.landing-tile z-index) so they stay
   crisp, only the paper around them carries the grain (Greg chose field-only) */
.landing.textured::after { opacity: 0.14; }
.landing-link { display: block; }   /* the album link wraps the whole cell */

/* ---------- Layout ---------- */
.container {
  width: min(1240px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.container--narrow { width: min(760px, 100% - 2 * var(--gutter)); }

.section { padding-block: clamp(4.5rem, 10vw, 8rem); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

main { padding-top: var(--header-h); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: flex-start;          /* sit content toward the top, then breathe it down with padding */
  background: rgba(246, 241, 230, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease);
  --hd-ink: var(--ink);
}
.site-header.scrolled { border-bottom-color: var(--line); }

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-top: clamp(1.5rem, 2.6vw, 2.4rem);  /* breathing room above the logo / nav */
}

.brand {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  color: var(--hd-ink);
  margin-left: clamp(-1rem, -2.4vw, -2.6rem);  /* nudge the wordmark toward the left edge */
  transition: opacity 0.6s var(--ease), color 0.4s var(--ease);
}
/* Wordmark — all-caps italic high-contrast serif, top left, a la sammblakeweddings.com */
.brand-name {
  font-family: var(--wordmark);
  font-style: italic;
  font-weight: 560;
  font-size: clamp(1.3rem, 1.8vw, 1.72rem);
  letter-spacing: 0.085em;
  text-transform: uppercase;
}
/* Logo wordmark image (homepage header) — sized by height to sit in the bar */
.brand-logo {
  height: clamp(54px, 6.4vw, 82px);
  width: auto;
  aspect-ratio: 1600 / 420;     /* resolve width from height */
  align-self: flex-start;       /* don't let the flex column stretch it to 0 */
  display: block;
  filter: brightness(0.8);      /* press the wordmark's ink a touch darker */
}

.site-nav { display: flex; gap: clamp(1.4rem, 2.6vw, 2.6rem); }
/* nav links — small, dense, typeset-tight */
.site-nav a {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.62rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--hd-ink);
  position: relative;
  padding: 0.4em 0;
  transition: color 0.4s var(--ease);
}
.site-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- Overlay header (About / Contact) ----------
   On the spread pages the menu bar is not its own color strip: it sits
   transparent over the page's own colors and scrolls away with the page. */
.overlay-header .site-header {
  position: absolute;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.overlay-header .site-header.scrolled { border-bottom-color: transparent; }
.overlay-header main { padding-top: 0; }

/* ---------- Logo-less pages (About / Contact / Portfolio) ----------
   The WITH MEGS wordmark lives on the home page only; elsewhere the bar is
   just the nav, so it runs much shorter and the page rises accordingly. */
.no-brand { --header-h: 84px; }
.no-brand .site-header .container {
  justify-content: flex-end;
  padding-top: clamp(1.3rem, 2vw, 1.9rem);
}

/* home — the tall logo block used to center the nav ~30px lower than on the
   logo-less pages; pin everything to the top at the same offset instead so
   the four text links sit at one uniform height across the whole site */
.home .site-header .container {
  align-items: flex-start;
  padding-top: clamp(1.3rem, 2vw, 1.9rem);
}

/* contact — the menu links shift right so the 't' in 'Contact' ends flush
   with the right edge of the panel's intro paragraph (s15) */
.contact-page .site-header .container {
  width: calc(100% - 2 * clamp(1.9rem, 4.5vw, 4.2rem));
}

/* ---------- Mobile nav ---------- */
.nav-toggle {
  display: none;
  position: relative;
  z-index: 120;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  position: absolute;
  left: 10px; right: 10px;
  height: 1px;
  background: var(--hd-ink);
  transition: transform 0.45s var(--ease), top 0.45s var(--ease), opacity 0.3s;
}
.nav-toggle span:nth-child(1) { top: 18px; }
.nav-toggle span:nth-child(2) { top: 26px; }
body.menu-open .nav-toggle span:nth-child(1) { top: 22px; transform: rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2) { top: 22px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0s 0.5s;
}
body.menu-open .mobile-menu {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s var(--ease);
}
.mobile-menu a {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 2.1rem;
  letter-spacing: 0.05em;
  padding: 0.45rem 1rem;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.mobile-menu .mobile-menu-social {
  margin-top: 2.2rem;
  display: flex;
  gap: 2rem;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s var(--ease) 0.3s, transform 0.55s var(--ease) 0.3s;
}
.mobile-menu .mobile-menu-social a {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: var(--muted);
  opacity: 1;
  transform: none;
  padding: 0;
}
body.menu-open .mobile-menu a { opacity: 1; transform: translateY(0); }
body.menu-open .mobile-menu a:nth-of-type(1) { transition-delay: 0.10s; }
body.menu-open .mobile-menu a:nth-of-type(2) { transition-delay: 0.18s; }
body.menu-open .mobile-menu a:nth-of-type(3) { transition-delay: 0.26s; }
body.menu-open .mobile-menu a:nth-of-type(4) { transition-delay: 0.34s; }
body.menu-open .mobile-menu .mobile-menu-social { opacity: 1; transform: translateY(0); }
body.menu-open .site-header {
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  --hd-ink: var(--ink);
}
body.menu-open .site-header .brand { opacity: 1; pointer-events: auto; }

/* ---------- Landing grid (home) — geometry measured off s12 (moodboard ref):
     grid spans 75.2% of the viewport (12.4% margins each side), 3 columns,
     column gaps 6.7% of viewport (8.93% of the grid), row gaps ~5.8vw, with
     small fine numbers ~1.9vw beneath each photo ---------- */
.landing {
  /* generous breathing room between the menu bar and the first row of photos */
  padding-top: max(5rem, calc(34svh - var(--header-h)));
  padding-bottom: clamp(4rem, 9vw, 8rem);
}
.landing-grid {
  width: 68%;            /* narrower → larger margins between page edge and outer columns */
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 5%;        /* tighter gaps between photos */
  row-gap: 4.6vw;
}
.landing-cell { margin: 0; }
.landing-tile {
  position: relative;
  z-index: 1;   /* lift the photo above the .landing field grain (field-only tooth) */
  aspect-ratio: 5 / 7;
  overflow: hidden;
  background: var(--bg-soft);
}
/* tiny print-typeset numbers — tucked close under their photo, small and dark */
.landing-num {
  display: block;
  margin-top: clamp(7px, 0.9vw, 14px);
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(7px, 0.68vw, 10px);
  line-height: 1.35;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}
.landing-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.8s ease-in-out; /* soft, slow crossfade */
}
.landing-tile img.is-active { opacity: 1; }

/* ---------- Philosophy quote ---------- */
.philosophy { text-align: center; }
.philosophy .rule {
  width: 56px;
  height: 1px;
  background: var(--ink);
  opacity: 0.35;
  margin: 0 auto 2.6rem;
}
.philosophy blockquote {
  margin: 0 auto;
  max-width: 21em;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.55rem, 3.4vw, 2.5rem);
  line-height: 1.42;
  color: var(--ink);
}
.philosophy cite {
  display: block;
  margin-top: 2.4rem;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Frames (images with hover) ---------- */
.frame {
  overflow: hidden;
  background: var(--bg-soft);
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
a:hover .frame img,
a:focus-visible .frame img,
figure.frame:hover img { transform: scale(1.04); }

/* ---------- Editorial grid (home: selected work) ---------- */
/* section opener — a small lowercase italic line beneath a short hairline,
   like the head of an editorial spread rather than a big banner heading */
.section-head {
  text-align: center;
  margin-bottom: clamp(3rem, 6vw, 5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.9rem, 1.8vw, 1.4rem);
}
.section-head::before {
  content: '';
  width: 42px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}
.section-head h2 {
  font-size: clamp(1.2rem, 2.1vw, 1.75rem);
  font-style: italic;        /* Eldure italic — quiet typeset line */
  letter-spacing: 0.01em;
  margin-bottom: 0;
}

.editorial-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}
.editorial-grid figure { margin: 0; }
.editorial-grid figcaption {
  margin-top: 0.9rem;
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--muted);
}
.ed-1 { grid-column: 1 / 8; }
.ed-2 { grid-column: 8 / 13; margin-top: clamp(2.5rem, 9vw, 7.5rem); }
.ed-3 { grid-column: 2 / 6; margin-top: clamp(1.5rem, 5vw, 4rem); }
.ed-4 { grid-column: 6 / 13; margin-top: clamp(3rem, 10vw, 8rem); }
.ed-1 .frame { aspect-ratio: 3 / 2; }
.ed-2 .frame { aspect-ratio: 3 / 4; }
.ed-3 .frame { aspect-ratio: 4 / 5; }
.ed-4 .frame { aspect-ratio: 16 / 10; }

.grid-cta { text-align: center; margin-top: clamp(2.4rem, 5vw, 4rem); }

/* ---------- Category trio — on the sage band ---------- */
.collections {
  background: var(--band);
  color: var(--band-ink);
}
.collections .section-head h2 { color: var(--band-ink); }
.collection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.collection-card { display: block; text-align: center; }
.collection-card .frame { aspect-ratio: 3 / 4; background: rgba(0, 0, 0, 0.08); }
.collection-card h3 {
  font-family: var(--sabon);   /* all-caps Sabon, per s40 */
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
  /* tracking pulled in tighter still (0.16em → 0.05em → 0.015em) */
  letter-spacing: 0.015em;
  color: var(--band-ink);
  margin: 1.3rem 0 0.2rem;
}
/* "View Portfolio" is a .text-link (matches "More about me") — recolor for the sage band */
.collections .grid-cta .text-link { color: var(--band-ink); }
.collections .grid-cta .text-link::after { background: var(--band-ink); }

/* ---------- Mini about (home) — small portrait + blurb, on the sage band.
     The band now runs unbroken from the collections through the footer;
     sections are demarcated by fine hairline seams (.band-seam) instead. ---------- */
.mini-about {
  background: var(--band);
  color: var(--band-ink);
}
.mini-about .container {
  width: min(880px, 100% - 2 * var(--gutter));
  display: grid;
  grid-template-columns: minmax(200px, 264px) 1fr;
  gap: clamp(2.2rem, 6vw, 4.5rem);
  align-items: start;
}
.mini-about .frame { aspect-ratio: 4 / 5; }
.mini-about h2 {
  font-family: var(--serif);
  font-weight: 500;
  /* larger and tighter-set than the old small tracked label (s41) */
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--band-ink);
  margin: 0 0 1.6rem;
}
.mini-about p {
  font-size: 0.74rem;
  line-height: 1.5;
  max-width: 56ch;
  color: rgba(69, 65, 47, 0.78);
}
.mini-about .text-link { color: var(--band-ink); }
.mini-about .text-link::after { background: var(--band-ink); }

/* fine print divider — a hairline interrupted by a tiny fleuron, like a
   typeset section break on continuous paper */
.band-seam {
  background: var(--band);
  color: var(--band-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin: 0;
}
/* the two hairline strokes flanking the fleuron are drawn as real <i> children
   (no longer ::before/::after) so the .textured grain pseudo is free to press
   the SAME paper tooth as the neighbouring sections onto the seam background.
   With the grain sitting behind content, only these strokes and the fleuron
   stay crisp ink — everything else matches the adjacent section in colour and
   texture exactly (s52). */
.band-seam i {
  height: 1px;
  background: var(--band-line);
  flex: 0 1 min(420px, 30vw);
}
.band-seam span {
  font-family: var(--serif);
  font-size: 0.72rem;
  line-height: 1;
}
/* same pressed sage tooth (0.66) as the collections / mini-about / footer the
   seam sits between, so the strip is indistinguishable from its neighbours
   apart from the ink strokes */
.band-seam.textured::after { opacity: 0.66; }

/* ---------- Testimonials (home) ---------- */
.testimonials {
  background: var(--bg-soft);
  text-align: center;
  scroll-margin-top: var(--header-h); /* so the nav anchor lands below the pinned header */
}
.testimonials h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  margin-bottom: clamp(2.8rem, 6vw, 4.5rem);
}
.testimonial-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2.2rem, 5vw, 4.5rem);
  align-items: start;
}
.testimonial-row blockquote {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.18rem;
  line-height: 1.65;
  color: var(--ink);
}
.testimonial-row cite {
  display: block;
  margin-top: 1.5rem;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* ---------- Page header (inner pages) ---------- */
.page-head {
  text-align: center;
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
}
.page-head h1 {
  font-size: clamp(2.8rem, 7vw, 4.6rem);
  font-weight: 300;
  margin-bottom: 1.2rem;
}
.page-head .lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--ink-soft);
  max-width: 38em;
  margin-inline: auto;
}

/* ---------- Portfolio page — warm paper ground sampled from s30 ---------- */
.portfolio-page { background: var(--paper); }
/* Portfolio + every album/gallery page let the menu bar scroll away with the
   page, exactly like About/Contact — only the Home page keeps a pinned (fixed)
   header. Anchoring the bar at the top (absolute) instead of fixed removes the
   pin; the tint matches the paper so it reads the same as the transparent
   About/Contact bars, and the on-scroll hairline is dropped to match them too. */
.portfolio-page .site-header { position: absolute; background: rgba(227, 223, 210, 0.94); }
.portfolio-page .site-header.scrolled { border-bottom-color: transparent; }

/* ---------- Portfolio filters — italic all-caps Eldure, '//' separated,
     set tight and right of center, a la s28 ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 0.3rem 0;
  margin: clamp(2.6rem, 6.5vw, 5.5rem) 0 clamp(2.8rem, 6vw, 5rem);
  padding: 0 16% 0 0;
  list-style: none;
}
.filters li { display: flex; align-items: baseline; }
.filters li + li::before {
  content: '//';
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.84rem;
  color: var(--muted);
  margin: 0 0.55em;
}
.filter-btn {
  background: none;
  border: 0;
  padding: 0.3em 0.05em;
  cursor: pointer;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  position: relative;
  transition: color 0.4s var(--ease);
}
.filter-btn::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.filter-btn:hover { color: var(--ink); }
.filter-btn.active { color: var(--ink); }
.filter-btn.active::after { transform: scaleX(1); }

/* ---------- Portfolio grid — mirrors the landing grid in every respect,
     with descriptive album captions where the landing page has numbers ---------- */
.masonry {
  width: 68%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 5%;
  row-gap: 4.6vw;
  transition: opacity 0.35s ease;
}
.masonry.is-fading { opacity: 0; }
.masonry figure {
  margin: 0;
  cursor: zoom-in;
}
.masonry figure.is-hidden { display: none; }
.masonry .frame {
  aspect-ratio: 5 / 7;
  background: rgba(0, 0, 0, 0.05);
}
.masonry .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* album captions — small dense sans (IBM Plex 500), numbered per collection:
   "01 // A hillside wedding in Sonoma, California" */
.masonry figcaption {
  margin-top: clamp(8px, 1vw, 15px);
  font-family: var(--sans);
  font-weight: 500;
  /* a touch smaller than before (was clamp(10px,0.84vw,12px)) */
  font-size: clamp(8.5px, 0.72vw, 10.5px);
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--ink);
  max-width: 34ch;
}
/* covers link through to their album's gallery page */
.masonry .album-link { display: block; }

/* ---------- Album gallery pages (gallery/*.html) ----------
   Formatted after the Samm Blake galleries: a quiet preface (s46) — a band of
   open space, the title + credits to the far left, a small staggered pair of
   plates to the right — then the photographs in an elegantly staggered,
   mixed-width grid (s45), ending on the handle + a way back. */

/* preface (s46) — title/credits left, an offset 2-plate collage right, set
   below a generous band of empty space at the top of the page */
.album-intro {
  width: min(1180px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(1.8rem, 5vw, 5rem);
  align-items: center;
  /* the open band at the top, below the fixed nav */
  padding-top: clamp(3.5rem, 11vh, 8.5rem);
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
}
.album-intro-text { max-width: 30ch; }
.album-eyebrow {
  display: block;
  margin-bottom: 1.1rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* album title — Zyntro display serif, shrunk a good bit from the old head */
.album-title {
  margin: 0;
  font-family: 'Zyntro', var(--serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.78rem);
  line-height: 1.16;
  letter-spacing: 0.01em;
  color: var(--ink);
}
/* small credits stack beneath the title (s46). PLACEHOLDER lines — Greg can
   swap in real vendor credits (Planning / Venue / Florist …) per album. */
.album-credits {
  list-style: none;
  margin: clamp(1.3rem, 2.6vw, 2rem) 0 0;
  padding: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.6rem;
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.album-credits li { margin-bottom: 0.45em; }
.album-credits .cr-key {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-right: 0.6em;
}
/* the offset 2-plate collage (s46): left plate sits high, right plate drops */
.album-intro-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.7rem, 1.5vw, 1.4rem);
  align-items: start;
}
.album-intro-collage figure { margin: 0; }
.album-intro-collage .frame { background: var(--bg-soft); }
.album-collage-a .frame { aspect-ratio: 3 / 4; }
.album-collage-b { margin-top: clamp(1.8rem, 5vw, 4.2rem); }
.album-collage-b .frame { aspect-ratio: 4 / 5; }
.album-intro-collage .frame img { width: 100%; height: 100%; object-fit: cover; }
/* left plate is the quiet black-&-white one, per s46 */
.album-collage-a .frame img { filter: grayscale(1) sepia(0.16) contrast(1.02) brightness(0.99); }

/* staggered gallery (s45) — a 12-column grid; each plate spans part of it and
   alternates wide/narrow, with offset plates dropped down a touch so columns
   never line up in tidy rows. Dense flow packs the bricks. */
.gallery-grid {
  width: min(1180px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1rem, 2.4vw, 2.4rem);
  row-gap: clamp(1.4rem, 3vw, 3rem);
  align-items: start;
  grid-auto-flow: row dense;
}
.gallery-grid figure { margin: 0; cursor: zoom-in; }
.gallery-grid .frame { background: var(--bg-soft); }
.gallery-grid .frame img { width: 100%; height: 100%; object-fit: cover; }
/* the repeating brick pattern (period 6): wide+narrow rows alternate sides,
   the second plate in each row drops to break the row line */
.gallery-grid .g-a { grid-column: span 7; }
.gallery-grid .g-a .frame { aspect-ratio: 4 / 5; }
.gallery-grid .g-b { grid-column: span 5; margin-top: clamp(2rem, 6vw, 5rem); }
.gallery-grid .g-b .frame { aspect-ratio: 3 / 4; }
.gallery-grid .g-c { grid-column: span 5; }
.gallery-grid .g-c .frame { aspect-ratio: 5 / 6; }
.gallery-grid .g-d { grid-column: span 7; margin-top: clamp(1.4rem, 4vw, 3.4rem); }
.gallery-grid .g-d .frame { aspect-ratio: 3 / 2; }
.gallery-grid .g-e { grid-column: span 6; }
.gallery-grid .g-e .frame { aspect-ratio: 4 / 5; }
.gallery-grid .g-f { grid-column: span 6; margin-top: clamp(2rem, 5vw, 4rem); }
.gallery-grid .g-f .frame { aspect-ratio: 7 / 5; }

/* ---------- Manual album gallery (built by album-studio.html) ----------
   Photos placed BY HAND, shown at their TRUE aspect ratio — never cropped.
   Each plate picks a width (full / large / half / third); plates flow left to
   right and wrap, so two halves (or a large + a third) sit side by side. This
   is the no-crop alternative to the blind g-a..g-f brick above. The lightbox
   in main.js also selects `.gallery-manual`. */
.gallery-manual {
  --gm-gap: clamp(1rem, 2.4vw, 2.4rem);
  width: min(1180px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;     /* paired plates top-align; shorter one leaves air below */
  column-gap: var(--gm-gap);
  row-gap: clamp(1.4rem, 3vw, 3rem);
}
.gallery-manual figure { margin: 0; cursor: zoom-in; }
.gallery-manual .frame { background: var(--bg-soft); }
/* the whole point: the image keeps its real shape — width fills the plate,
   height follows the photo, nothing is cropped */
.gallery-manual .frame img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}
/* plate widths — gap-aware so they tile cleanly across the column */
.gallery-manual .w-full  { width: 100%; }
.gallery-manual .w-large { width: calc(66.666% - var(--gm-gap) / 3); }
.gallery-manual .w-half  { width: calc(50% - var(--gm-gap) / 2); }
.gallery-manual .w-third { width: calc(33.333% - var(--gm-gap) * 2 / 3); }
/* a lone narrow plate can hug left (default), center, or hug right */
.gallery-manual .align-center { margin-inline: auto; }
.gallery-manual .align-right  { margin-left: auto; }
/* optional editorial drop, to stagger a plate down a touch (s45 feel) */
.gallery-manual .drop { margin-top: clamp(1.4rem, 4vw, 3.4rem); }

/* the sign-off below the photographs, before the footer */
.gallery-end {
  text-align: center;
  padding: clamp(3rem, 6.5vw, 5rem) var(--gutter) clamp(2.4rem, 5vw, 3.8rem);
}
.gallery-end .gallery-handle {
  margin: 0 0 0.9rem;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: var(--ink);
  max-width: none;
}
.gallery-end .gallery-bio {
  margin: 0 auto 2.2rem;
  max-width: 52ch;
  font-size: 0.72rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
/* gallery footer follows paper directly (no prefooter) — restore breathing
   room (out-specifies the portfolio page's tightened prefooter junction) */
.gallery-page.portfolio-page .site-footer { padding-top: clamp(2.6rem, 5vw, 4rem); }

/* ---------- Album gallery pagination (built by main.js) ----------
   A long album splits into pages of up to 24 plates; this quiet typeset
   page-bar sits beneath the grid — thin chevrons echoing the lightbox arrows,
   small letterpress page numbers between, the current one underlined. Only
   present when an album runs past a single page. */
.gallery-pager {
  width: min(1180px, 100% - 2 * var(--gutter));
  margin: clamp(2.8rem, 6vw, 5rem) auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.4rem, 3vw, 2.6rem);
}
.gallery-pager-arrow {
  background: none;
  border: 0;
  padding: 0.3rem;
  line-height: 0;
  cursor: pointer;
  color: var(--ink);
  opacity: 0.7;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.gallery-pager-arrow:hover:not(:disabled) { opacity: 1; }
.gallery-pager-arrow[data-step="-1"]:hover:not(:disabled) { transform: translateX(-2px); }
.gallery-pager-arrow[data-step="1"]:hover:not(:disabled) { transform: translateX(2px); }
.gallery-pager-arrow:disabled { opacity: 0.2; cursor: default; }
.gallery-pager-arrow svg { display: block; }
.gallery-pager-nums {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.7rem, 1.6vw, 1.3rem);
}
.gallery-pager-num {
  background: none;
  border: 0;
  padding: 0.2em 0.05em;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--muted);
  position: relative;
  transition: color 0.35s var(--ease);
}
.gallery-pager-num:hover { color: var(--ink); }
.gallery-pager-num::after {
  content: '';
  position: absolute;
  left: 0.05em; right: 0.05em; bottom: -0.25em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.4s var(--ease);
}
.gallery-pager-num.is-current { color: var(--ink); }
.gallery-pager-num.is-current::after { transform: scaleX(1); }
/* plates paged off the current page leave the flow entirely */
.gallery-grid figure.is-paged-out,
.gallery-manual figure.is-paged-out { display: none; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(246, 241, 230, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0s 0.4s;
}
.lightbox.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s var(--ease);
}
.lightbox img {
  max-width: min(86vw, 1100px);
  max-height: 78vh;
  width: auto;
  height: auto;
  box-shadow: 0 30px 80px rgba(33, 30, 26, 0.18);
}
.lightbox-caption {
  position: absolute;
  bottom: clamp(1.2rem, 4vh, 2.6rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--muted);
  white-space: nowrap;
}
.lightbox button {
  position: absolute;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
  padding: 0.8rem;
  line-height: 0;
  transition: opacity 0.3s, transform 0.3s var(--ease);
  opacity: 0.75;
}
.lightbox button:hover { opacity: 1; }
.lightbox .lb-close { top: max(1.2rem, calc(var(--header-h) / 2 - 22px)); right: clamp(1rem, 3vw, 2.4rem); }
.lightbox .lb-prev { left: clamp(0.4rem, 2.5vw, 2rem); top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: clamp(0.4rem, 2.5vw, 2rem); top: 50%; transform: translateY(-50%); }
.lightbox .lb-prev:hover { transform: translateY(-50%) translateX(-3px); }
.lightbox .lb-next:hover { transform: translateY(-50%) translateX(3px); }
.lightbox svg { display: block; }

/* ---------- About page — editorial spread a la s11:
     textured cream left half with flowing poem text, full-bleed photo right ---------- */
.about-spread {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* perfectly equal halves */
  height: 100svh;                   /* one solid block — the page never scrolls */
  overflow: hidden;
}
.about-cream {
  background: var(--cream);
  color: var(--cream-ink);
  /* top and bottom padding are mirrored: with the three equal auto-margins
     (title-top / poem-top / sign-bottom), matching the paddings makes the empty
     band ABOVE "ABOUT MEG" exactly equal the band BELOW "— Meg" at every
     viewport height — the title sits perfectly symmetric with the signature
     (Greg: balance the two). */
  /* horizontal padding is now asymmetric — more on the LEFT than the right — so
     the whole stacked block (ABOUT MEG / poem / — Meg) sits a touch right of where
     it was, while top & bottom stay mirrored for the title↔signature balance
     (Greg 6/13: move the whole block to the right a bit). */
  padding: calc(var(--header-h) + 4rem) clamp(1rem, 2vw, 1.8rem) calc(var(--header-h) - 0.8rem) clamp(4.8rem, 10.5vw, 9.5rem);
  display: flex;
  flex-direction: column;
}
/* spread title — one unbroken serif line, all caps (s11). margin-top:auto
   makes it a third auto-margin alongside the poem's and the signature's, so the
   free height splits evenly above the title / above the poem / below "— Meg":
   the title drops off the top edge into balance with the signature (Greg, 6/12) */
.spread-title {
  margin: auto 0 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.12rem, 1.62vw, 1.55rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.1;
}
.about-cream { position: relative; }
/* the flowing poem — hand-broken, LEFT-ragged lines as in s11: each line's
   indent (--x) grows to a single gentle bulge about two-thirds down, then
   recedes, so the left edge of the block draws one smooth arc */
.about-poem {
  /* top auto + the sign's bottom auto center the poem+signature as one unit,
     which lifts "— Meg" up off the bottom edge */
  margin: auto auto 0;
  width: min(40ch, 88%);
  text-align: left;
  font-family: var(--sabon);   /* Sabon — bookish, warmer than the display serif (s39) */
  font-weight: 400;
  /* a touch smaller than before (was clamp(0.86rem,1.04vw,1.04rem)) */
  font-size: clamp(0.69rem, 0.83vw, 0.83rem);
  line-height: 1.5;
  color: var(--cream-ink);
  /* a hair of stroke stands the single-cut Sabon up a half-step — Sabon has
     no real medium cut and faux bold would be far too heavy. Pressed a little
     firmer now for a bit more weight in the letters. */
  -webkit-text-stroke: 0.42px currentColor;
}
.about-poem span {
  display: block;
  transform: translateX(var(--x, 0));
}
.about-sign {
  /* a larger top gap drops "— Meg" a little lower down the cream than the old
     tight-to-the-poem balance (Greg 6/13: drop the — Meg text a little bit) */
  margin: clamp(3.2rem, 7vh, 5rem) 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}
.about-sign .signature {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.26rem;
  color: var(--cream-ink);
  margin: 0;
}
.about-cream .text-link { color: var(--cream-ink); }
.about-cream .text-link::after { background: var(--cream-ink); }
.about-photo-half {
  position: relative;
  overflow: hidden;
  background: var(--bg-soft);
}
.about-photo-half img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* warm-toned black & white, like the s11 plate */
  filter: grayscale(1) sepia(0.22) contrast(1.02) brightness(0.97);
}

/* ---------- Contact page — top spread a la s15:
     full-bleed B&W photo left, textured sage panel right with PRICING head,
     hairline pricing rows, and the form at the bottom of the half ---------- */
.contact-spread {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* perfectly equal halves */
  min-height: 100svh; /* spread runs to the top, under the transparent header */
}
.contact-photo-half {
  position: relative;
  overflow: hidden;
  background: var(--bg-soft);
}
.contact-photo-half img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 22% 50%; /* keep the couple in frame on the tall crop */
  filter: grayscale(1) contrast(1.03);
}
.contact-panel {
  background: var(--band);
  color: var(--band-ink);
  /* slim bottom padding so the scroll cue can ride right at the bottom edge */
  padding: calc(var(--header-h) + 0.8rem) clamp(1.9rem, 4.5vw, 4.2rem) 0.3rem;
  display: flex;
  flex-direction: column;
  /* s15 composition — head hangs ~62% up from the bottom, the form sits
     low against the bottom edge, the cue rides the very bottom */
  justify-content: flex-start;
  gap: clamp(1.6rem, 3.5vh, 3rem);
}
/* head — small letterspaced title left, intro copy hugging the right edge;
   the margin drops it so the block starts ~38svh down (≈62% from the bottom) */
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(1.6rem, 4vw, 4rem);
  /* raised ~25% from its old 38svh drop so the Inquire + intro block sits higher */
  margin-top: calc(28svh - var(--header-h) - 0.8rem);
  margin-bottom: 0;
}
.panel-title {
  margin: 0;
  /* Eldure caps — enlarged a good bit again (1.12rem → 1.6rem) per Greg; the
     head row's height is set by the taller intro paragraph beside it, so the
     bigger title fills that height without growing the spread. */
  font-family: var(--serif);
  font-weight: 500;
  font-size: 2.1rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--band-ink);
}
.panel-head p {
  margin: 0;
  max-width: 38ch;
  text-align: right;
  font-size: 0.69rem;
  line-height: 1.55;
  color: var(--band-muted);
}
/* inquiry form — the s35 hairline rows repurposed as Name / Email / Message,
   so the contact form reads like a typeset stationery sheet (not a price list);
   margin-top auto sinks it toward the bottom of the frame (s15) */
.contact-panel .contact-form.inquiry { width: 100%; margin-top: auto; }
.inquiry-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--band-line);
}
.inquiry-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  align-items: baseline;
  gap: 1.2rem;
  border-top: 1px solid var(--band-line);
  padding: 1.05rem 0.1rem;
  cursor: text;   /* the whole space between the hairlines is a click target (see main.js) */
}
/* scoped under .contact-panel so it beats the generic .contact-form label rule */
.contact-panel .inquiry-row label {
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--band-ink);
}
.contact-panel .inquiry-row input,
.contact-panel .inquiry-row textarea {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: -0.01em;
  line-height: 1.5;
  color: var(--band-ink);
  resize: none;
}
/* Name & Email sit on the same hairline as their label — start the caret at
   the right edge of the field so typing flows in from the right (s-request) */
.contact-panel .inquiry-row input { text-align: right; }
.contact-panel .inquiry-row input::placeholder { text-align: right; }
.contact-panel .inquiry-row input:focus,
.contact-panel .inquiry-row textarea:focus { outline: none; }
.contact-panel .inquiry-row input::placeholder,
.contact-panel .inquiry-row textarea::placeholder { color: var(--band-muted); }
.inquiry-row--message {
  grid-template-columns: 1fr;
  /* tightened so the label sits as close to its field as Name / Email do,
     keeping the row rhythm uniform across all three */
  gap: 0.3rem;
  align-items: stretch;
}
/* one line tall at rest — so the hairline below sits as close as on the Name
   and Email rows — then grows line by line as the message wraps (main.js).
   It only grows a few lines: once the writing passes max-height the box stops
   expanding (so the whole spread never grows) and scrolls internally instead.
   Scoped under .contact-panel to beat the generic .contact-form textarea rule. */
.contact-panel .inquiry-row--message textarea {
  min-height: 1.5em;
  max-height: 7.5em;   /* ~five lines — then it scrolls rather than expanding */
  overflow-y: hidden;  /* main.js flips this to auto once the cap is reached */
}
/* foot — submit on the left, contact line on the right, with real breathing room */
.inquiry-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.9rem 2rem;
  margin-top: clamp(1.4rem, 3vh, 2.2rem);
}
.contact-panel .btn { color: var(--band-ink); }
.contact-panel .form-status { color: var(--band-ink); margin-top: 1rem; }
.panel-meta {
  margin: 0;
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  color: var(--band-muted);
  max-width: none;
}
.panel-meta a { border-bottom: 1px solid transparent; transition: border-color 0.35s var(--ease); }
.panel-meta a:hover { border-bottom-color: var(--band-ink); }
/* subtle cue that the FAQ section lives below the fold — sticky, so it
   rides the bottom edge of the screen until the spread scrolls past */
.scroll-cue {
  position: sticky;
  bottom: 0.25rem;   /* dropped lower — hugs the very bottom edge of the frame */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;   /* tighter — the whole cue takes far less vertical room */
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--band-muted);
  transition: color 0.35s var(--ease);
}
.scroll-cue:hover { color: var(--band-ink); }
.scroll-cue::after {
  content: '';
  width: 1px;
  height: 13px;
  background: currentColor;
  transform-origin: top;
  animation: cue-drop 2.6s var(--ease) infinite;
}
@keyframes cue-drop {
  0% { transform: scaleY(0); }
  55% { transform: scaleY(1); }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ---------- Alternate contact spread — Studio Ninja embed ----------
   Reuses the .contact-spread / .contact-panel shell above so the two
   inquiry options read as a matched split-screen pair. Only the form
   area differs: an <iframe> served by Studio Ninja, which cannot be
   restyled from here (cross-origin) — so we frame it to blend in. */
.contact-panel--sn {
  /* the embedded form is tall, so the head rides near the top and the form
     fills the sheet below it in one even vertical rhythm — a single uniform
     gap separates head → form → cue (Greg: striking + balanced) */
  justify-content: flex-start;
  /* tighter vertical rhythm — pulls the cue up under the (auto-sunk) form and
     lets the form sit a touch lower (Greg: move the form down a bit more) */
  gap: clamp(0.9rem, 2vh, 1.5rem);
}
.contact-panel--sn .panel-head {
  /* dropped well below the menu bar — a wide open band of sage above the
     Inquire head, so the block sits low INTO the sheet rather than crowding
     the top edge (Greg: move it down again) */
  margin-top: clamp(3.4rem, 9.5vh, 6.5rem);
}
.sn-form {
  width: 100%;
  /* auto margin sinks the form block toward the bottom of the sheet (the s15
     move): the panel's spare height becomes one open band of sage between the
     Inquire head and the form, instead of the form crowding up under the head */
  margin-top: auto;
  /* echo the stationery hairline of the custom form's inquiry-rows so the
     Studio Ninja embed reads as if typeset onto the same sheet */
  border-top: 1px solid var(--band-line);
  padding-top: clamp(1.1rem, 2.4vh, 1.7rem);
  /* clip the few px of empty form frame that spill past the column's right
     edge once the frame is nudged right to align the lines (see iframe rule) */
  overflow: hidden;
}
/* tiny uppercase caption — same voice as the inquiry-row labels; right-aligned
   to sit above the right-shifted form, echoing the right-aligned intro copy */
.sn-form-label {
  display: block;
  /* tightened so the form sits close under the 'Booking enquiry' caption (Greg) */
  margin-bottom: 0.3rem;
  text-align: right;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--band-ink);
}
.sn-form iframe {
  display: block;
  /* The Studio Ninja form has a fixed internal max content width (Greg set it
     to ~570px in the SN Style tab) and its own side-margins we can't reach from
     out here (cross-origin). To land the form's field LINES' right edge exactly
     on the column's inner right edge — i.e. precisely under the right edge of
     the 'You're here…' intro paragraph (Greg: shift the form right so its lines
     meet the intro text's right edge) — we size the FRAME to (just under) that
     content width so the form fills it edge-to-edge (no centering margin), and
     right-align it. margin-left:auto pins the frame's right edge to the column's
     right edge at ANY viewport width; the small negative right margin nudges it
     past the form's ~10px intrinsic right padding so the lines themselves reach
     the edge, and .sn-form's overflow:hidden clips the few px of empty frame
     that spill past. NOTE 560px is tuned to SN's current max-width: keep it at
     or just below SN's setting — go OVER it and the form re-centres inside the
     frame and the lines pull short of the edge again. (Earlier: 420px before
     Greg widened the SN lines; full-width / 0.78-scale before that.) */
  width: 560px;
  margin-left: auto;
  margin-right: -14px;
  border: 0;
  /* iframeResizer.js sets the real height once it loads; this is just a
     pre-load floor so the panel doesn't jump before the script runs */
  min-height: 560px;
  /* print the form onto the sage sheet: multiply dissolves the embed's pale
     background into the paper beneath (light pixels vanish, ink stays), and
     the panel's grain overlay presses its tooth over the form — so the embed
     reads as typeset on the same stationery rather than a white card floating
     on it. The gentle sepia/hue grade warms Studio Ninja's cool blue-greys
     toward the site's olive ink. Cross-origin rules block restyling the
     form's internals; blending the whole frame from out here is fair game. */
  mix-blend-mode: multiply;
  filter: sepia(0.22) hue-rotate(8deg) saturate(0.9);
}
/* the booking form is tall and fills the sheet, so its scroll cue flows
   directly beneath it rather than sticking to the viewport bottom — on a tall
   form a sticky cue would ride up over the submit row */
.contact-panel--sn .scroll-cue { position: static; bottom: auto; }
/* on the stacked layout, drop the head offset just like the section above
   (this rule out-specifies the generic .panel-head reset, so restate it) */
@media (max-width: 980px) {
  .contact-panel--sn .panel-head { margin-top: 0; }
  /* on the stacked phone layout the form isn't sunk to the bottom of a tall
     split-screen half — it flows naturally right under its caption, and goes
     back to a full-width, left-aligned, unclipped frame (the right-shift align
     is a desktop split-screen move only) */
  .sn-form { margin-top: 0; overflow: visible; }
  .sn-form-label { text-align: left; }
  .sn-form iframe { width: 100%; margin-left: 0; margin-right: 0; }
}

/* ---------- FAQ — textured greige page a la s14: title pinned top left,
     the whole 3-column text + photo block pushed to the far bottom left,
     right quarter left empty, photos in squarer 4/5 plates ---------- */
.faq {
  background: var(--greige);
  color: var(--greige-ink);
  /* header scrolls away on this page, so the anchor lands flush at the top */
  scroll-margin-top: 0;
  display: flex;
  flex-direction: column;
  /* size to content — the old min-height:100svh left a big empty greige void
     below the photos on taller screens, which ran straight into the greige
     seam + footer and read as one shapeless block. Now the seam sits right
     under the last row. A large top pad opens a tall band of empty greige
     between the contact spread above and the FAQ title (doubled per request),
     enlarging the whole section. */
  padding-block: clamp(14rem, 30vh, 23rem) clamp(2.4rem, 5vh, 3.6rem);
}
.faq .container {
  display: flex;
  flex-direction: column;
  /* pin hard to the left edge (no centering) so the whole block sits far left, per s14 */
  margin-inline: clamp(1.25rem, 3vw, 2.5rem) auto;
}
.faq-title {
  /* sits just above the questions now — only a modest gap below it */
  margin: 0 0 clamp(2rem, 5vh, 3.4rem);
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(0.96rem, 1.32vw, 1.28rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--greige-ink);
}
.faq-grid {
  width: 74%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(1.8rem, 4.2vw, 4.2rem);
  row-gap: clamp(2.4rem, 5vw, 3.4rem);
}
/* each Q&A carries its own photograph beneath it — answer, then plate */
.faq-item { display: flex; flex-direction: column; }
.faq-item h3 {
  margin: 0 0 1.1rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--greige-ink);
}
.faq-item p {
  margin: 0 0 1.7rem;
  font-size: 0.69rem;
  line-height: 1.55;
  color: var(--greige-soft);
}
/* margin-top auto bottom-aligns the plates across a row even when one
   answer runs a line or two longer than its neighbors */
.faq-item .frame {
  margin-top: auto;
  aspect-ratio: 4 / 5;
  background: rgba(0, 0, 0, 0.06);
}

.contact-form .field { margin-bottom: 2rem; }
.contact-form label {
  display: block;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 0.6rem;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 0.55em 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.88rem;
  color: var(--ink);
  transition: border-color 0.4s var(--ease);
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-bottom-color: var(--ink);
}
.contact-form textarea { resize: vertical; min-height: 7.5em; }
.contact-form .btn { margin-top: 0.6rem; }
.form-status {
  margin-top: 1.6rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink);
  display: none;
}
.form-status.visible { display: block; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Pre-footer CTA — on the footer's sage green (s32) ---------- */
.prefooter {
  background: var(--band);
  color: var(--band-ink);
  text-align: center;
}
.prefooter h2 {
  font-family: var(--serif);   /* Eldure — Regular cut (upright, weight 400) per Greg */
  /* dialed down a good bit from the old clamp(1.9rem,4vw,2.8rem) */
  font-size: clamp(1.45rem, 2.8vw, 2rem);
  font-style: normal;
  font-weight: 400;
  margin-bottom: 2.2rem;
  color: var(--band-ink);
}
.prefooter .btn { color: var(--band-ink); }
/* portfolio — the prefooter (sage) flows straight into the footer (sage); the
   old double padding left an awkward void (s34). Both gaps around "Get in
   touch" now share ONE value (--cta-gap) so the link sits perfectly centered
   between the heading above and the menu links below (s42). */
.portfolio-page { --cta-gap: clamp(2.4rem, 3.2vw, 3rem); }
.portfolio-page .prefooter { padding-block: clamp(3rem, 6vw, 5rem) 0; }
.portfolio-page .prefooter h2 { margin-bottom: var(--cta-gap); }
.portfolio-page .site-footer { padding-top: calc(var(--cta-gap) + 3px); } /* +3px offsets the line-box leading above the link so both gaps measure identical */
.portfolio-page .site-footer .footer-nav { margin-top: 0; }

/* ---------- Footer — sage band (s10 swatch) ---------- */
.site-footer {
  background: var(--band);
  color: var(--band-ink);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 2.2rem;
  text-align: center;
}
.footer-handle {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: var(--band-ink);
  margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
  transition: opacity 0.35s var(--ease);
}
.footer-handle:hover { opacity: 0.75; }
/* recent-work strip — seven larger frames reaching almost to both page edges */
.footer-ig-grid {
  width: calc(100% - 2 * clamp(0.9rem, 2.4vw, 2.2rem));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: clamp(6px, 0.8vw, 12px);
}
.footer-ig-grid a {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.08);
}
.footer-ig-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease), opacity 0.5s var(--ease);
}
.footer-ig-grid a:hover img { transform: scale(1.04); opacity: 0.92; }
.footer-blurb {
  max-width: 60ch;
  margin: clamp(2.2rem, 5vw, 3.4rem) auto 0;
  padding: 0 var(--gutter);
  font-size: 0.8rem;
  line-height: 1.9;
  color: var(--band-muted);
}
.footer-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.6rem, 4.5vw, 3.4rem);
  /* tightened now that the blurb above it is gone */
  margin: clamp(1.5rem, 3.5vw, 2.4rem) 0 0;
}
.footer-nav a {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--band-ink);
  transition: opacity 0.35s var(--ease);
}
.footer-nav a:hover { opacity: 0.72; }
.footer-icons {
  display: flex;
  justify-content: center;
  gap: 1.9rem;
  margin: clamp(1.8rem, 4vw, 2.6rem) 0 clamp(2.4rem, 5vw, 3.6rem);
}
.footer-icons a {
  color: var(--band-muted);
  line-height: 0;
  transition: color 0.35s var(--ease);
}
.footer-icons a:hover { color: var(--band-ink); }
.footer-icons svg { display: block; }
/* footer links row (s44) — the icon cluster and the text links share one
   container-width line: icons hard left, "Portfolio About Contact" hard right,
   so the icons' left edge and the 't' of Contact line up exactly with the two
   ends of the hairline rule (.footer-bottom border) directly beneath. */
.footer-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 2rem;
  flex-wrap: wrap;
  margin: clamp(1.6rem, 3.5vw, 2.6rem) auto clamp(1.8rem, 4vw, 2.8rem);
}
/* both clusters pulled in from the page edges by the same distance — icons
   nudged right, the Portfolio/About/Contact links nudged left — so they sit a
   little closer to center while staying balanced (Greg, 6/12) */
.footer-links .footer-icons { order: -1; margin: 0 0 0 var(--footer-inset, clamp(1.5rem, 4.5vw, 4rem)); justify-content: flex-start; gap: 1.7rem; }
.footer-links .footer-nav { margin: 0 var(--footer-inset, clamp(1.5rem, 4.5vw, 4rem)) 0 0; justify-content: flex-end; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--band-line);
  padding-top: 1.9rem;
  text-align: left;
}
.footer-legal {
  margin: 0;
  font-size: 0.64rem;
  letter-spacing: 0.02em;
  color: var(--band-muted);
  max-width: none;
}
.back-top {
  font-family: var(--sans);
  font-size: 0.64rem;
  letter-spacing: 0.02em;
  color: var(--band-muted);
  transition: color 0.35s var(--ease);
  white-space: nowrap;
}
.back-top:hover { color: var(--band-ink); }

/* ---------- Contact page — footer continues the FAQ's greige paper ----------
   Remap the footer's band-ink/muted/line tokens to the greige set so every
   nested element recolors automatically; a greige seam joins the two. */
.site-footer.footer-greige {
  background: var(--greige);
  --band-ink: var(--greige-ink);
  --band-muted: var(--greige-soft);
  --band-line: rgba(76, 73, 64, 0.22);
  /* much shallower than the sage footer — the seam sits right above it */
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
}
/* (the contact page's FAQ→footer seam was removed entirely — Greg, 6/12 — so the
   greige seam overrides that used to live here are gone; on contact the FAQ now
   meets the greige footer directly, both already sharing the same paper + tooth) */

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s);
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  :root { --header-h: 104px; }
  /* about / contact spreads stack — content half first, photo below */
  .about-spread,
  .contact-spread { grid-template-columns: 1fr; min-height: 0; }
  /* stacked panel is no longer viewport-high — drop the s15 offset */
  .panel-head { margin-top: 0; }
  .about-spread { display: flex; flex-direction: column; height: auto; overflow: visible; }
  /* the desktop rightward shift (asymmetric L/R padding) would skew the narrow
     stacked layout — restore symmetric horizontal padding on phones/tablets */
  .about-cream { padding: calc(var(--header-h) + 1.4rem) clamp(1.4rem, 5vw, 2.6rem); }
  .about-photo-half,
  .contact-photo-half { position: relative; aspect-ratio: 4 / 5; }
  .contact-spread .contact-photo-half { order: 2; }
  .ed-1 { grid-column: 1 / 9; }
  .ed-2 { grid-column: 9 / 13; }
  .ed-3 { grid-column: 1 / 6; }
  .ed-4 { grid-column: 6 / 13; }
}

@media (max-width: 720px) {
  :root { --header-h: 88px; }
  .site-nav { display: none; }
  .nav-toggle { display: block; }
  .collection-grid { grid-template-columns: 1fr; gap: 2.8rem; }
  .editorial-grid { grid-template-columns: 1fr; }
  .ed-1, .ed-2, .ed-3, .ed-4 {
    grid-column: 1 / -1;
    margin-top: 0;
  }
  .ed-2 .frame, .ed-3 .frame { aspect-ratio: 4 / 5; }
  .landing-grid,
  .masonry { width: calc(100% - 2 * var(--gutter)); }
  .filters { justify-content: center; padding-right: 0; }
  .mini-about .container { grid-template-columns: 1fr; }
  .mini-about .frame { max-width: 300px; }
  .testimonial-row { grid-template-columns: 1fr; gap: 2.8rem; }
  /* the footer links row stacks and recenters on narrow screens */
  .footer-links { flex-direction: column; align-items: center; gap: 1.5rem; }
  .footer-links .footer-icons, .footer-links .footer-nav { justify-content: center; }
  .footer-bottom { justify-content: center; text-align: center; }
  .panel-head { flex-direction: column; }
  .panel-head p { text-align: left; }
  /* in the stacked layout the cue floats over form fields if left sticky */
  .scroll-cue { position: static; }
  .contact-form .form-row { grid-template-columns: 1fr; }
  .faq { min-height: 0; }
  .faq-grid { width: 100%; grid-template-columns: 1fr; }
  /* album preface stacks; the staggered grid becomes one clean column */
  .album-intro { grid-template-columns: 1fr; gap: clamp(1.6rem, 6vw, 2.6rem); padding-top: clamp(2rem, 8vh, 4rem); }
  .album-intro-text { max-width: none; }
  .album-collage-b { margin-top: 0; }
  .gallery-grid { display: flex; flex-direction: column; gap: clamp(14px, 3.5vw, 24px); }
  .gallery-grid figure[class] { margin-top: 0; grid-column: auto; }
  .gallery-grid .frame { aspect-ratio: auto; }
  .gallery-grid .frame img { height: auto; }
  /* the manual gallery also collapses to one clean, uncropped column */
  .gallery-manual { gap: clamp(14px, 3.5vw, 24px); }
  .gallery-manual figure[class] { width: 100%; margin-top: 0; margin-inline: 0; }
}

@media (max-width: 620px) {
  .lightbox img { max-width: 92vw; }
}

/* ===================== WM MONOGRAM (master SVG, recolorable mask) ===================== */
.wm-mark{ display:block; aspect-ratio:1855.132 / 1000;
  /* SVG embedded as a data-URI so the mask also renders on file:// pages
     (Chrome blocks external-SVG masks over file://) */
  --wm-src:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxODU1LjEzMiAxMDAwIiB3aWR0aD0iMTg1NS4xMzIiIGhlaWdodD0iMTAwMCIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsPSJXTSBtb25vZ3JhbSI+CiAgPHRpdGxlPldNIE1vbm9ncmFtPC90aXRsZT4KICA8cGF0aCBmaWxsPSIjMDAwMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMzY5LjIyNiA5OTkuODg2QzEzNzEuMDUzIDk5OS40MzEgMTM3Mi42NTUgOTk4LjQ0IDEzNzMuNDQxIDk5Ni42MzZDMTM3NC44MzMgOTkzLjQ0IDEzNzUuNDc1IDk4OS41OTIgMTM3Ni42MDUgOTg2LjIzN0MxMzgxLjM4OCA5NzIuMDM3IDEzODUuMzg3IDk1Ny41OTQgMTM5MC4wNDEgOTQzLjM0MUMxNDA0Ljk3OSA4OTcuNTg5IDE0MTguNDM2IDg1MS4zOTkgMTQzMy4wNDUgODA1LjU1NUMxNDM3LjMxIDc5Mi4xNyAxNDQwLjk4OCA3NzguNTEyIDE0NDUuNjIyIDc2NS4yNTlDMTQ1OC4zOTIgNzI4Ljc0IDE0NjguNTYzIDY5MS40MDggMTQ4MS4wMjcgNjU0Ljc3QzE0ODMuNzk0IDY0Ni42MzYgMTQ4NS43IDYzOC4xNzMgMTQ4OC40OTcgNjMwLjA3MkMxNDk3LjM5NyA2MDQuMjk0IDE1MDQuODgyIDU3OC4wMzYgMTUxMy4yMjkgNTUyLjA4QzE1MjguODI5IDUwMy41NzMgMTU0NC4wMjcgNDU0Ljk3OSAxNTU5LjczMSA0MDYuNDk0QzE1NjcuNDMyIDM4Mi43MjEgMTU3NS45IDM1OS4wMzMgMTU4Mi44NzEgMzM1LjAwMUMxNTkwLjgzMSAzMDcuNTYzIDE1OTkuNjY1IDI4MC4xNjkgMTYwOC43NTUgMjUzLjEwOUMxNjEyLjIyMyAyNDIuNzg2IDE2MTQuNzk3IDIzMi4xNjcgMTYxOC40NjEgMjIxLjkxMkMxNjIzLjYyNyAyMDcuNDU0IDE2MjguNDYxIDE5Mi41MzYgMTYzMi41MDEgMTc3LjcxNkMxNjM1LjcyOSAxNjUuODcyIDE2NDAuNTI5IDE1NC40MDQgMTY0My45NSAxNDIuNjJDMTY0Ny40NzMgMTMwLjQ4MiAxNjUxLjA2NSAxMTguMDk3IDE2NTUuMzggMTA2LjIyM0MxNjU4LjQ0NSA5Ny43ODYgMTY3Mi40MDMgNDYuOTkyIDE2NzQuOTY1IDQ0LjE1MkMxNjc2LjMzMiA0OS4zMzIgMTY3NS4wODUgMTIxLjk2IDE2NzUuMDkyIDEzMy44NDZDMTY3NS4xMjYgMjAwLjU3MSAxNjc0Ljg0NSAyNjcuMyAxNjc1LjA3NyAzMzQuMDI2QzE2NzUuNTM1IDQ2NS43NDQgMTY3NC4yODIgNTk3LjQ3IDE2NzQuODA5IDcyOS4xODdDMTY3NC45ODYgNzczLjM4MyAxNjc0LjgwNCA4MTcuNTc5IDE2NzQuODA0IDg2MS43NzRDMTY3NC44MDQgODc2LjcwMyAxNjc2LjQ2IDkxNS43OTggMTY3My43OTYgOTI4LjA2OEMxNjY3LjcxOCA5NTYuMDcxIDE2MzUuMjg4IDk2MS44MDMgMTYxMS41OTYgOTY1LjI3MkMxNjA1LjY3NCA5NjYuMTQgMTU4Ni42NzYgOTY1LjEzNSAxNTgyLjk5OSA5NjYuODg1QzE1ODEuMDYxIDk2Ny44MDcgMTU4MC40MTYgOTY5LjI3NCAxNTgwLjIyMiA5NzEuMjg4QzE1ODAuMTA2IDk3My43NDggMTU4MC44MDMgOTc1LjkxMyAxNTgzLjMyNCA5NzYuOTIyQzE1ODYuOTQgOTc4LjM2OSAxNjMwLjM3NSA5NzcuMTIgMTYzNy45MTggOTc3LjEyMkMxNjkzLjM3OSA5NzcuMTMgMTc0OC44NDEgOTc3LjA2NyAxODA0LjMwMiA5NzcuMTM3QzE4MTEuNSA5NzcuMTQ2IDE4NDYuOTY0IDk3OC4zOTQgMTg1MS4wOTcgOTc2LjgzQzE4NTMuNjE0IDk3NS44NzggMTg1NC4zOTggOTc0LjEzIDE4NTQuNTExIDk3MS42MTNDMTg1NC4yOTYgOTY5LjUyNCAxODUzLjQxMSA5NjcuODQyIDE4NTEuNDIyIDk2Ni45MDNDMTg0Ny4zNzYgOTY0Ljk5MSAxODMwLjA0NiA5NjYuMTgzIDE4MjQuMTI1IDk2NS4zNjJDMTc5OS43OCA5NjEuOTg4IDE3NzAuOSA5NTcuODAxIDE3NjIuODM1IDkzMC4zNDJDMTc1OS4yOTIgOTE4LjI4MSAxNzYxLjE5MSA4NTYuMzM2IDE3NjEuMTkxIDgzOS4zNTFDMTc2MS4xOTEgNzc0LjM1OCAxNzYxLjIxMiA3MDkuMzY0IDE3NjEuMjExIDY0NC4zNzFDMTc2MS4yMDcgNTEzLjk1MiAxNzYxLjYzIDM4My41MjUgMTc2MS4yMjQgMjUzLjEwOUMxNzYxLjA4MiAyMDcuNjE2IDE3NjEuMTE5IDE2Mi4xMTYgMTc2MS4yNDIgMTE2LjYyMkMxNzYxLjI5MiA5OC4yOCAxNzU5LjY2NSA3MS41NDcgMTc2MS43NTEgNTQuMjI4QzE3NjUuMjQ2IDI1LjIwOSAxNzk2Ljc5MSAxNi4xODUgMTgyMS41MjUgMTMuNTUxQzE4MjYuNzAzIDEzIDE4NTAuMTIgMTMuMTk4IDE4NTIuNzIyIDExLjY2NEMxODU0LjY0MSAxMC41MzMgMTg1NC45ODQgOS4xNTkgMTg1NS4xMzIgNy4xMDhDMTg1NC45MjEgNC45ODcgMTg1NC4zMyAzLjUzMSAxODUyLjA3MiAyLjgxOUMxODQ4LjMwOSAxLjYzMyAxODE5LjM4MyAyLjgwOCAxODEzLjA3NiAyLjc5OEMxNzgxLjAxMyAyLjc0NCAxNzQ4Ljk0OSAyLjc5IDE3MTYuODg2IDIuNzlDMTcwNi4yODIgMi43OSAxNjg2LjA3OCAxLjQ0OCAxNjc2LjU5IDMuMDczTDE0MDYuODY2IDg1MC42MDJDMTQwMS4xNzMgODM1LjM1MyAxMzk3Ljg3MiA4MTkuMDc5IDEzOTIuNzY5IDgwMy42MDVDMTM4Mi44NDkgNzczLjUyNSAxMzc1LjUwNCA3NDIuNjA0IDEzNjUuMzQ2IDcxMi42MTRDMTM1OS45NDMgNjk2LjY2IDEzNTMuMDgxIDY3NS41MTQgMTM0OS4xMzQgNjU5LjMxOUMxMzQ3IDY1MC41NTkgMTM0My45MDQgNjQxLjk4OSAxMzQxLjM3MiA2MzMuMzIyQzEzMzguOTg4IDYyNS4xNTkgMTMzNi45OTUgNjE2LjY1OCAxMzM0LjE2NCA2MDguNjI0QzEzMjYuMTk5IDU4Ni4wMjUgMTMyMC45NDEgNTYyLjQ4NCAxMzEzLjM5NyA1MzkuNzMxQzEzMDIuNTc2IDUwNy4wOTYgMTI5My43NzUgNDczLjc4NSAxMjgzLjY1MSA0NDAuOTRDMTI3NS41MiA0MTQuNTU4IDEyNjguMDY1IDM4Ny44ODUgMTI1OS40NDkgMzYxLjY0OEMxMjU2LjQ4OCAzNTIuNjMxIDEyNTQuMzIxIDM0My4yOTUgMTI1MS4xMzQgMzM0LjM1MUMxMjQzLjAxMSAzMTEuNTUyIDEyMzUuNjYxIDI4Ni4yMDQgMTIyOS4wNSAyNjIuODU4QzEyMjEuMjYyIDIzNS4zNTkgMTIxMS40NzQgMjA4LjM3NCAxMjAzLjM4OCAxODAuOTY2QzExOTQuNjU3IDE1MS4zNzUgMTE4NS41MDggMTIwLjQ0MyAxMTc1LjU2NiA5MS4yNzVDMTE3Mi4yNDggODEuNTM5IDExNTEuNjM1IDE5Ljg4NyAxMTUyLjI1MyAxNC41ODJDMTE2MS4yNjIgMTEuOTMxIDExNzUuNDE0IDEzLjk2OCAxMTgyLjMxMyAxMi4zNzRDMTE4NC42NzEgMTEuODI5IDExODYuMTc4IDkuNjg3IDExODYuNDYgNy40MzNDMTE4Ni42MzggNS41OTcgMTE4Ni4xNDkgMy44NjQgMTE4NC4yNjMgMy4wMzFDMTE4MS40MDYgMS43NzEgMTE2Ni4yNTUgMi44NDggMTE2Mi4xNjUgMi44NUMxMTM0Ljg2OCAyLjg2NCAxMTA3LjU3MSAyLjc2NCAxMDgwLjI3MyAyLjc5OUMxMDQ2LjkxIDIuODQyIDEwMTMuNTQ1IDIuODYyIDk4MC4xODMgMi44MTRDOTc0LjgwNCAyLjgwNiA5NTYuODg3IDEuNzI1IDk1Mi44ODYgMi45NDFDOTUwLjg3OCAzLjU1MiA5NDkuNzY0IDUuMTYgOTQ5LjQ1OCA3LjEwOEM5NDkuMzY3IDkuNjUgOTUwLjI1NiAxMS42OTMgOTUyLjg4NiAxMi41NTJDOTU3LjIzNSAxMy45NzIgOTY0Ljk3NCAxMi44NDEgOTY5Ljc4NCAxMy4zMzJDOTc1LjQ0MyAxMy45MSA5ODEuMDcgMTQuNjY0IDk4Ni42ODIgMTUuNTM0QzEwMTUuMTY2IDE5Ljk0OCAxMDM0LjY0NCAzNC44NjUgMTAzMy4xMDYgNjUuNjAyQzEwMzIuMjQxIDgyLjg4OCAxMDIwLjg0NSA5Ni44MDggMTAxMy4wMDUgMTExLjUzOEMxMDA1Ljg0NyAxMjQuOTg0IDk5Ny44NTMgMTM4LjAxNCA5OTAuMjU3IDE1MS4yMTJDOTc5LjM4IDE3MC4xMDkgOTY5LjE5NCAxODkuMzk2IDk1OC4wODUgMjA4LjE2OUM5MzUuODQ2IDI0NS43NTMgOTE1LjAyMSAyODQuMzkxIDg5My45NDcgMzIyLjY1MkM4NTUuMDU4IDM5My4yNiA4MTQuODg3IDQ2My4yNiA3NzQuODQ2IDUzMy4yMzFDNzQ0LjczNiA1ODUuODQ3IDcxNS43NzkgNjM5LjExNyA2ODUuMjkgNjkxLjQ5MUM2NjkuMzM5IDcxOC44OTIgNjU1LjA2NyA3NDcuMzYzIDYzOC42NDEgNzc0LjQ3MkM2MjcuNDU4IDc5Mi45MjggNjE3Ljg5MyA4MTIuMzkxIDYwNy4xMTkgODMxLjEwM0M2MDYuMjMzIDgzMi42NDIgNTk3LjUwNSA4NDguMTAxIDU5Ny40MjQgODQ4LjEyNkM1OTYuOTU2IDg0OC4yNjUgNTk2LjU0OCA4NDcuNjkyIDU5Ni4xMTEgODQ3LjQ3NkM1OTYuMjU1IDgzNC4xNjkgNTk0LjE5OSA4MjAuNDU2IDU5My4xNCA4MDcuMThDNTkwLjcyNSA3NzYuOSA1ODguNzk1IDc0Ni41MTUgNTg2Ljg3OCA3MTYuMTg4QzU4MS4yODkgNjI3Ljc5MSA1NzUuNzY3IDUzOS4zNTEgNTY5LjMwOSA0NTEuMDE1QzU2Ni43NzggNDE2LjQwOSA1NjUuNzczIDM4MS41NTkgNTYyLjQyNiAzNDcuMDI1QzU2MS44NjIgMzQxLjIxIDU1OC41MzggMzA1LjgzNCA1NTkuNTk0IDMwMi44MjlDNTYwLjUxNyAzMDAuMjAyIDU2Mi43MzcgMjk3LjczNyA1NjQuMTc1IDI5NS4zNTVDNTcyLjQxMSAyODEuNzA5IDU3OS44ODkgMjY3LjUzOSA1ODcuOTEyIDI1My43NTlDNjA4LjkxNSAyMTcuNjg2IDYyOS4zODMgMTgxLjI3MyA2NTAuMDE1IDE0NS4wMDRDNjU5LjQwMyAxMjguNTAyIDY2OC44MSAxMTIuMDIyIDY3OC4xNTQgOTUuNDk5QzY4OC4yMTYgNzcuNzA3IDY5Ni45NjUgNTcuMTA1IDcxMS45NzIgNDIuODU1QzczMy45NTMgMjEuOTggNzYzLjA1OSAxNS4zNzQgNzkyLjM1MSAxMi45M0M3OTYuODE5IDEyLjU1NyA4MTUuOTA0IDEzLjE2MyA4MTguMzQ5IDExLjU0QzgyMCAxMC40NDMgODIwLjgzMiA4LjY1NyA4MjEuMDY3IDYuNzgzQzgyMC45MzQgNS4zIDgyMC43MDUgNC4xNDMgODE5LjMyNCAzLjMwMkM4MTcuMTM0IDEuOTY4IDgwMC44OSAyLjgxNyA3OTcuMjI2IDIuODIyQzc3Mi4wOTYgMi44NTggNzQ2Ljk2MiAyLjg5OSA3MjEuODMzIDIuNzc1QzYyOC42ODIgMi4zMTcgNTM1LjUxNSAyLjg1NCA0NDIuMzYxIDIuNzVDNDIwLjY5NyAyLjcyNiAzOTkuMDMgMi43ODMgMzc3LjM2NyAyLjgwMUMzNzEuMjcyIDIuODA3IDM1Ny40MzggMCAzNTYuNzQxIDguNDA4QzM1Ni44NjMgMTAuMzQ3IDM1Ny44MzMgMTEuNzE4IDM1OS44MTkgMTIuMjA4QzM2Mi4wMTIgMTIuNzQ5IDM4My44MjggMTIuNzY2IDM4OS43MTYgMTMuNDcyQzQxNC41MDMgMTYuNDQzIDQ0Ni45MzQgMjMuOTU4IDQ1Mi4yNzMgNTIuOTI5QzQ1My45MSA2MS44MSA0NTIuOTc1IDcxLjI0MSA0NTMuNDExIDgwLjIyNkM0NTQuMDYxIDkzLjY0IDQ1NC41NTMgMTA3LjEyMyA0NTUuNjExIDEyMC41MjJDNDU5Ljc3NiAxNzMuMjkzIDQ2Mi40OTIgMjI2LjI3MyA0NjUuNzk2IDI3OS4xMDZDNDY4LjEyOSAzMTYuMzk5IDQ3MC45NTYgMzUzLjYzOSA0NzMuNDg3IDM5MC44OTVDNDc0LjA1IDM5OS4xODcgNDc3LjAzIDQyMy4zOTUgNDc2LjMwNCA0MjkuODkyQzQ3NS44OTMgNDMzLjU3MSA0NDAuNzgxIDQ5My4zOCA0MzUuOTYgNTAyLjAzNUM0MTguNzg1IDUzMi44NzQgNDAwLjc1MyA1NjMuMjg1IDM4My45NTYgNTk0LjMyNUMzNjkuNDg1IDYyMS4wNjcgMzU0LjYwNCA2NDcuNzYyIDMzOS4xNjUgNjczLjk0M0MzMTQuNjA2IDcxNS41ODkgMjkxLjUwMSA3NTguMTk5IDI2Ny45MDQgODAwLjM1NUMyNjQuMzk3IDgwNi42MjIgMjQyLjk0NyA4NDYuOTc3IDIzOS45MDUgODQ4LjQ0QzIzOC40MDEgODQ0LjgzMyAyMzYuNzkyIDgwMS40MzMgMjM2LjM0NSA3OTMuODU2QzIzNC4wNDYgNzU0Ljg0MSAyMzAuOTc0IDcxNS44ODUgMjI4LjYzMyA2NzYuODY3QzIyMC4yMDYgNTM2LjQ0NCAyMDkuNTI3IDM5Ni4xNzcgMjAxLjMxMyAyNTUuNzA5QzE5OC41MjUgMjA4LjAzMiAxOTUuMDI0IDE2MC4zODIgMTkyLjAwOSAxMTIuNzIzQzE5MS4xMDIgOTguMzg4IDE4Ni41MjUgNTUuMDcgMTkwLjIzMyA0My44MjlDMTk3LjgyIDIwLjgyOCAyMjcuMzg1IDE0LjYxNSAyNDguNjggMTMuMjMxQzI1My4wNzMgMTIuOTQ1IDI3My42NzQgMTMuMjM3IDI3NS45NzcgMTEuOTMyQzI3Ny44NjMgMTAuODYyIDI3OC4zMzcgOS4zOTkgMjc4Ljg0IDcuNDMzQzI3OS4wODcgNS41MzUgMjc4LjcwNSAzLjY0NyAyNzYuNjI3IDIuODkzQzI3My41NjQgMS43ODIgMjU1LjE2MiAyLjc2OCAyNTAuNjI5IDIuODA4QzIxOS44NzIgMy4wODEgMTg5LjA5OCAyLjgxOCAxNTguMzM4IDIuNzhDMTE4LjA0MyAyLjczMSA3Ny43NDYgMi44NzIgMzcuNDUgMi44NEMzMS41NzEgMi44MzUgNy41NDIgMS42MjUgMy42NTQgMi45NjlDMS42NjUgMy42NTcgMC41MjYgNS4xNTMgMC4xMTQgNy4xMDhDMCA5LjQwNCAwLjEzMSAxMC42NjcgMi4zNTQgMTEuOTEzQzQuNDI0IDEzLjA3NCAyNi4zNDQgMTIuODc4IDMwLjk1MSAxMy4zNjdDNTQuNjU5IDE1Ljg4MSA5MS40MzEgMjQuMjE5IDk2LjMzOSA1Mi4yNzlDOTguMjg3IDYzLjQxNiA5Ni45NTMgNzQuODI2IDk3LjcyMyA4Ni4wNzVDOTkuOTQ3IDExOC41NjggMTAxLjU5NiAxNTEuMDggMTAzLjg0OSAxODMuNTY2QzEwNC41OTkgMTk0LjM3MSAxMDQuNjg1IDIwNS4yOCAxMDUuNjIzIDIxNi4wNjNDMTA3LjM1MyAyMzUuOTQxIDEwNy43NjMgMjU1Ljk2OSAxMDkuNTIyIDI3NS44NTdDMTExLjg1MiAzMDIuMjA2IDExMy4yNjMgMzI4LjczNyAxMTQuNTkxIDM1NS4xNDlDMTE3Ljc1MiA0MTguMDA5IDEyMy4xNjIgNDgwLjgxOCAxMjcuMjgxIDU0My42M0MxMzAuMDkzIDU4Ni41MjUgMTMyLjc3NiA2MjkuNDA4IDEzNS40MjQgNjcyLjMxOEMxMzcuMzUgNzAzLjUyNiAxNDAuMzkyIDczNC42NzEgMTQxLjg4IDc2NS45MDlDMTQzLjg2MyA4MDcuNTQzIDE0OC41MDEgODQ5LjA3MyAxNTAuNjc5IDg5MC42OTZDMTUyLjEzMiA5MTguNDQgMTU0LjIzNiA5NDYuMTYxIDE1Ni4wNDEgOTczLjg4OEMxNTYuNDkgOTgwLjc3NSAxNTYuMjE3IDk4OS4zNzkgMTU3LjUyMiA5OTUuOTg2QzE1Ny45NDggOTk4LjE0NiAxNTkuNzQgOTk5LjA4NiAxNjEuNTg4IDk5OS43MzlDMTYzLjUwNSAxMDAwIDE2NC45MzggOTk5LjQ0MSAxNjYuNDYzIDk5OC4yMjdDMTcwLjE3NSA5OTUuMjcxIDE3OC45NjEgOTc2LjA3NiAxODIuMjY4IDk3MC42MzlDMjAyLjIyMSA5MzcuODMzIDIxOS42NTcgOTAzLjM3NCAyMzkuMjU2IDg3MC4yNzlDMjYzLjU1MiA4MjkuMjUxIDI4Ni4wODggNzg3LjE3OCAzMDkuNzY3IDc0NS43NjFDMzQzLjE0NyA2ODcuMzc4IDM3Ni44MTEgNjI5LjA3OCA0MDkuMjE0IDU3MC4xNThDNDI0LjQ2MiA1NDIuNDMxIDQ0MC4xNzggNTE0Ljg5IDQ1NS44NjkgNDg3LjQxMUM0NTkuMTk2IDQ4MS41ODQgNDczLjgyMSA0NTIuODc5IDQ3Ni44MDcgNDUwLjEyM0M0NzguOTg5IDQ1My4yNTQgNDc5LjM0NyA0NzcuMDkgNDc5LjY0NyA0ODIuNTM2QzQ4MS4xNzUgNTEwLjI2MiA0ODMuMDYzIDUzOC4wMzIgNDg1LjA0NCA1NjUuNzI4QzQ5MC4xODUgNjM3LjYzOCA0OTUuMTQ4IDcwOS41NyA0OTkuNjM4IDc4MS41MDdDNTAxLjQ1MSA4MTAuNTU0IDUwNC4wNDkgODM5LjU0MSA1MDUuNjk3IDg2OC41OTlDNTA3LjU5MSA5MDEuOTg3IDUxMC4zODkgOTM1LjMwMyA1MTIuMzQzIDk2OC42ODlDNTEyLjU0IDk3Mi4wNjEgNTEzLjcyIDk5Ni4zMDEgNTE0LjA3IDk5Ny4yODZDNTE0LjcwMyA5OTkuMDY4IDUxNS4zMjYgOTk5LjUxIDUxNy4xMDMgOTk5LjkwOUM1MTkuMTg4IDk5OS43MDggNTIxLjkgOTk5LjE1NCA1MjMuMjc4IDk5Ny4zNzZDNTI2LjQ0MSA5OTMuMjk0IDUyOC4zNjggOTg3LjQ5OSA1MzAuOTUxIDk4Mi45ODdDNTM1Ljc0OCA5NzQuNjA5IDU0MC42NzUgOTY2LjI2OSA1NDUuMzc2IDk1Ny44NDJDNTcwLjExMyA5MTMuNDkzIDU5NS4xMTcgODY5LjIzMyA2MjAuNjc4IDgyNS4zNzhDNjUwLjggNzczLjY5OCA2NzkuNDU0IDcyMS4xMzkgNzA5LjE1OSA2NjkuMjEzQzc1Mi4yNTUgNTkzLjg3OCA3OTUuMDExIDUxOC4zOCA4MzcuNzk5IDQ0Mi44OUM4NTcuOTg1IDQwNy4yNzkgODc3Ljg2MSAzNzEuNDk4IDg5OC4xOTUgMzM1Ljk3NkM5MDcuOTc2IDMxOC44ODkgOTE2LjkyMyAzMDEuMTcyIDkyNy4yMTMgMjg0LjM5NkM5NDEuMjUxIDI2MS41MTIgOTUzLjUwNiAyMzcuNDQxIDk2Ni44NTkgMjE0LjE0Qzk4My41MjkgMTg1LjA0OSAxMDAwLjQ2NCAxNTYuMDk1IDEwMTYuNTc5IDEyNi42OTlDMTAyMy4zNjUgMTE0LjMyMSAxMDMwLjM5MiAxMDAuODg4IDEwNDAuMzAyIDkwLjcwNEMxMDQxLjI4MiA4OS42OTggMTA0OS4wMDEgODEuNzQ5IDEwNDkuNDAxIDgxLjcyQzEwNDkuOSA4MS42ODMgMTA1MC4yNTYgODIuMjQgMTA1MC42ODQgODIuNTAxQzEwNTEuMjAxIDEwMS4xMTQgMTA1MC43NzEgMTE5Ljc3OCAxMDUwLjczNCAxMzguMzk1QzEwNTAuNjQ2IDE4My44ODkgMTA1MC43MjQgMjI5LjM4NiAxMDUwLjY1OCAyNzQuODgyQzEwNTAuNDg1IDM5NS4zMjcgMTA0OS45NjkgNTE1LjgwNCAxMDUwLjY3IDYzNi4yNDZDMTA1MS4wNDggNzAxLjIzIDEwNTAuODY5IDc2Ni4yNDMgMTA1MC42MzMgODMxLjIyN0MxMDUwLjU1OCA4NTIuMDI0IDEwNTAuNjU3IDg3Mi44MjQgMTA1MC42NTcgODkzLjYyMUMxMDUwLjY1NyA5MDUuMDk4IDEwNTEuODQ3IDkxNy40MDYgMTA0OS42MjIgOTI4LjcxOEMxMDQ0LjA2MyA5NTYuOTgzIDEwMTIuMTMyIDk2Mi4zMjkgOTg4LjMwNyA5NjUuMzQ1Qzk4Mi44MSA5NjYuMDQgOTYyLjk4OCA5NjUuMjA1IDk1OS43MSA5NjcuMTI1Qzk1Ny45NjcgOTY4LjE0NiA5NTcuMDQzIDk2OS42NjUgOTU2Ljg2MyA5NzEuNjEzQzk1Ni43NDIgOTc0LjA2IDk1Ny45MzMgOTc2LjEzOCA5NjAuMzYgOTc2Ljk5NUM5NjQuNzIxIDk3OC41MzUgOTkxLjQwOSA5NzcuMTMgOTk4LjA1NiA5NzcuMTU1QzEwMzcuOTE0IDk3Ny4zMDYgMTA3Ny43ODYgOTc3LjI4IDExMTcuNjQ0IDk3Ny4xNThDMTEyMy40MzEgOTc3LjE0IDExNDcuNzgyIDk3OC42MDIgMTE1MS40NDEgOTc2LjU0OEMxMTUzLjQyIDk3NS40MzcgMTE1My45MTggOTczLjY5NyAxMTU0LjE2IDk3MS42MTNDMTE1My45NDYgOTY5LjY2NiAxMTUzLjU5NyA5NjguMDkyIDExNTEuNzY2IDk2Ni45OEMxMTQ5LjYzOSA5NjUuNjg4IDExMjcuOTczIDk2NS43NDIgMTEyMy4xNjkgOTY0Ljk5N0MxMDk5LjY0OCA5NjEuMzUyIDEwNjcuNTg5IDk1Ni4wMzIgMTA2Mi41NjggOTI3LjQxOEMxMDYwLjY0MSA5MTYuNDM3IDEwNjEuNjYxIDkwNC43NDUgMTA2MS42NjEgODkzLjYyMUMxMDYxLjY2MSA4NzQuOTg5IDEwNjEuNjY5IDg1Ni4zNTggMTA2MS42NjkgODM3LjcyN0MxMDYxLjY2OCA3NzkuMjMzIDEwNjEuNDc4IDcyMC43MzYgMTA2MS42NyA2NjIuMjQ0QzEwNjIuMDU2IDU0NC44MjMgMTA2MS43MSA0MjcuMzk5IDEwNjEuNzA1IDMwOS45NzhDMTA2MS43MDMgMjM0LjE3NSAxMDYyLjcyIDE1OC4yOTMgMTA2MS43IDgyLjUwMUMxMDYyLjE1IDgyLjMyOCAxMDYyLjU3NCA4MS45MDIgMTA2My4wNSA4MS45ODFDMTA2NS45MTcgODIuNDU5IDEwNzkuNDE4IDEwMy40OSAxMDgwLjc3MiAxMDYuODczQzEwODMuMTI2IDExMi43NTUgMTA4NC44MTQgMTE5LjA0OSAxMDg2LjgwMSAxMjUuMDcxQzExMDMuNzUgMTc2LjQ0NCAxMTE5LjAwNCAyMjguMzkgMTEzNi4wMSAyNzkuNzU2QzExNTAuMzAxIDMyMi45MjIgMTE2My40MTkgMzY2LjQ2NyAxMTc3LjM3NyA0MDkuNzQ0QzExOTUuMDk5IDQ2NC42ODcgMTIxMy4wNDEgNTE5LjU1NSAxMjI5LjYyIDU3NC44MjdDMTIzOS42ODMgNjA4LjM3NyAxMjUxLjIwNiA2NDEuNDg0IDEyNjEuNjA1IDY3NC44ODZDMTI3Ny42NTIgNzI2LjQyOSAxMjkzLjk4MSA3NzguMDE5IDEzMTAuMDI2IDgyOS41OTJDMTMyMy41MzIgODczLjAwNSAxMzM3LjY2NSA5MTYuMTY5IDEzNTEuMTI3IDk1OS41OUMxMzUyLjY2OCA5NjQuNTYxIDEzNjEuNzA5IDk5NS40MjcgMTM2My4xNzQgOTk3LjI4NkMxMzY0LjcxNCA5OTkuMjQgMTM2Ni43OTIgOTk5Ljg4NyAxMzY5LjE3IDk5OS44OTRMMTM2OS4yMjYgOTk5Ljg4NlogTTU1OC42OTkgMjg0LjM2NUM1NTguMzM0IDI4NC4xMjggNTU3LjgwOSAyODQuMDM5IDU1Ny42MDMgMjgzLjY1NkM1NTYuOTYxIDI4Mi40NiA1NTYuNzU3IDI2NS43MDQgNTU2LjU0NyAyNjIuODU4QzU1NC45MjEgMjQwLjc3NyA1NTQuMDYgMjE4LjYzMSA1NTIuMjgzIDE5Ni41NjRDNTQ5LjIxOCAxNTguNTExIDU0Ny4zNDUgMTIwLjI5NiA1NDUuMjYgODIuMTc2QzU0NC40MTcgNjYuNzU5IDU0MC40NTQgNDcuMzQgNTUwLjUyNCAzNC4wOEM1NjkuNzY5IDguNzQyIDYyOC42MzcgMTAuNjQzIDY1Ny4xNjUgMTQuMkM2NjkuNzIgMTUuNzY2IDY4Ni41NDEgMTguOTM3IDY5Mi4wOTYgMzIuMTMxQzY5NC4yMDIgMzcuMTMzIDY5My45OTkgNDIuNTggNjkyLjYxMSA0Ny43MjlDNjg5LjY3NCA1OC42MzEgNjY2LjA4NSA5Ny42MjUgNjU4Ljk2NCAxMDkuNDczQzY0NC42NCAxMzMuMzA5IDYzMS45NSAxNTguMTY5IDYxNy41NzQgMTgxLjk0MUM2MDMuMDYzIDIwNS45MzcgNTg5Ljk5NyAyMzAuODE3IDU3NS44ODggMjU1LjA1OUM1NzEuNTE2IDI2Mi41NzEgNTY0LjAzNiAyNzguNDkgNTU4Ljc1MiAyODQuMzA2TDU1OC42OTkgMjg0LjM2NVoiLz4KPC9zdmc+Cg==");
  -webkit-mask:var(--wm-src) center/contain no-repeat;
          mask:var(--wm-src) center/contain no-repeat;
  background-color:currentColor; }
/* Header WM, top-left — adopts Contact's narrower container so About/Portfolio/Contact line up */
body.nav-mark .site-header .container{ justify-content:space-between; width:calc(100% - 2 * clamp(1.9rem, 4.5vw, 4.2rem)); }
.brand-mark{ display:flex; align-items:center; color:var(--hd-ink); transition:opacity .4s var(--ease), color .4s var(--ease); }
.brand-mark .wm-mark{ height:28px; width:auto; opacity:.92; }
.contact-page .brand-mark{ color:#f4efe2; }
.contact-page .brand-mark .wm-mark{ opacity:1; filter:drop-shadow(0 1px 3px rgba(20,16,10,.5)); }
/* Footer WM (all pages) — clean, centered midpoint between the icon cluster & the nav */
.footer-links{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
.footer-links .footer-icons{ grid-column:1; justify-self:start; }
.footer-links .footer-nav{ grid-column:3; justify-self:end; }
.footer-wm{ grid-column:2; justify-self:center; color:var(--band-ink); display:flex; align-items:center; justify-content:center; }
.footer-wm .wm-mark{ width:34px; opacity:.9; }
@media (max-width:720px){ .footer-links{ display:flex; } .footer-wm{ justify-self:auto; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}