/* ==========================================================================
   FONTS — self-hosted. Served from this origin instead of fonts.googleapis.com
   so there is no third-party DNS, TLS and stylesheet round trip before any text
   can paint. Files are generated from the Google Fonts CSS API (Archivo, Big
   Shoulders Display and Oswald are all open licensed); to change weights,
   re-download and replace this block.
   ========================================================================== */
/* Variable fonts: one file per family and subset, with a weight range. The old
   per-weight files (archivo-400, -500, -600, -700 and so on) were byte-identical
   copies of the same variable font, so a phone was downloading Archivo four times.
   Weights outside the range fall back to the nearest edge of it. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('media/fonts/archivo-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('media/fonts/archivo-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Big Shoulders Display'; font-style: normal; font-weight: 700 900; font-display: swap; src: url('media/fonts/big-shoulders-display-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Big Shoulders Display'; font-style: normal; font-weight: 700 900; font-display: swap; src: url('media/fonts/big-shoulders-display-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('media/fonts/oswald-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('media/fonts/oswald-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ==========================================================================
   Pilgrimage Tattoo · one-page site
   Palette: lifted warm ink, bone, parchment, mustard gold (Nathan's Vans)
   Type: Big Shoulders Display (display) · Oswald letterpress caps (voice + tagline) · Archivo (body)
   ========================================================================== */

:root {
  --ink: oklch(20% 0.01 60);
  --ink-2: oklch(24% 0.011 60);
  --ink-3: oklch(29% 0.012 60);
  --line: oklch(36% 0.012 60);
  --line-soft: oklch(30% 0.012 60);
  --bone: oklch(89% 0.035 78);
  --bone-dim: oklch(74% 0.03 76);
  --bone-mute: oklch(60% 0.014 72);
  --parchment: oklch(89% 0.035 78);
  --parchment-2: oklch(85% 0.042 76);
  --parchment-line: oklch(74% 0.04 74);
  --parchment-ink: oklch(22% 0.015 60);
  --parchment-mute: oklch(40% 0.02 65);
  --gold: oklch(74% 0.15 82);
  --gold-deep: oklch(60% 0.13 76);
  --gold-soft: oklch(74% 0.15 82 / 0.18);

  --display: "Big Shoulders Display", "Archivo Narrow", Impact, "Arial Narrow", sans-serif;
  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --letterpress: "Beatster", "Oswald", "Alternate Gothic", "Franklin Gothic Medium", "Arial Narrow", sans-serif;

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --max: 1440px;
  --nav-h: 80px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Licensed letterpress face: drop Beatster.woff2 (or .otf) into media/fonts and it takes over automatically */
/* Beatster, the licensed letterpress face for the hero tagline. The file is not
   in the repo yet, and a live @font-face for a missing file costs every visitor
   a 404, so the rule stays commented out. Drop the licensed file at
   media/fonts/Beatster.woff2 and uncomment these two lines to turn it on; until
   then the tagline uses its designed fallback (Oswald with the pressed texture). */
/* @font-face { font-family: "Beatster"; src: url("media/fonts/Beatster.woff2") format("woff2"), url("media/fonts/Beatster.otf") format("opentype"), url("media/fonts/Beatster.ttf") format("truetype"); font-weight: 400 500; font-display: swap; } */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--bone); font-family: var(--body); font-size: 1.0625rem; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; max-width: 62ch; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- type ---------- */
.eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.75rem; }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.display { font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: 0.9; letter-spacing: -0.005em; }
.h-xl { font-size: clamp(3.2rem, 9.4vw, 9.4rem); }
.h-lg { font-size: clamp(2.6rem, 6.2vw, 5.6rem); }
.h-md { font-size: clamp(2rem, 3.8vw, 3.2rem); }
.h-sm { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.voice { font-family: var(--letterpress); font-style: normal; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; line-height: 1.55; }
.lede { font-size: clamp(1.1rem, 1.5vw, 1.3rem); }
.muted { color: var(--bone-dim); }
.gold { color: var(--gold); }
.small { font-size: 0.9rem; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.95rem 1.5rem; border-radius: 999px; border: 1.5px solid var(--gold); color: var(--gold); transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease); white-space: nowrap; }
.btn:hover { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.btn--solid, .btn--gold { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn--solid:hover, .btn--gold:hover { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.btn--outline-gold, .btn--ghost { border-color: var(--gold); color: var(--gold); }
.btn--outline-gold:hover, .btn--ghost:hover { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.btn--sm { padding: 0.7rem 1.1rem; font-size: 0.7rem; }
.link-arrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease), gap 0.3s var(--ease); }
.link-arrow:hover { border-color: var(--gold); gap: 0.8rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* ---------- layout ---------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.section { padding-block: clamp(5rem, 10vw, 9rem); position: relative; scroll-margin-top: var(--nav-h); }
.statement { scroll-margin-top: var(--nav-h); }
.section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section--ink2 { background: var(--ink-2); }
.section--parchment { background: var(--parchment); color: var(--parchment-ink); }
.section--parchment-2 { background: var(--parchment-2); color: var(--parchment-ink); }
.section--gold { background: var(--gold); color: var(--ink); }
.section--gold .display { color: var(--ink); }
.signup { text-align: center; max-width: 52rem; margin-inline: auto; }
.signup__lead { font-size: clamp(1rem, 1.4vw, 1.2rem); color: var(--ink); opacity: 0.85; max-width: 40rem; margin: 1.5rem auto 2rem; }
.signup__form { min-height: 124px; }
/* Flodesk restyle. Scoped to the form's own container id (not #newsletter) because the
   newsletter prompt moves that container into its card; the id keeps the same
   specificity as before, so these still win over Flodesk's own rules. */
/* Flodesk embed: strip its own box, title, and theme so the form sits in the gold band as native fields */
#fd-form-65fc8c6e52e4ce9dcaa577ed .ff-65fc8c6e52e4ce9dcaa577ed, #fd-form-65fc8c6e52e4ce9dcaa577ed .ff-65fc8c6e52e4ce9dcaa577ed__container, #fd-form-65fc8c6e52e4ce9dcaa577ed .ff-65fc8c6e52e4ce9dcaa577ed__form, #fd-form-65fc8c6e52e4ce9dcaa577ed .ff-65fc8c6e52e4ce9dcaa577ed__content { background: transparent !important; padding: 0 !important; margin: 0 auto !important; max-width: none !important; border: 0 !important; }
#fd-form-65fc8c6e52e4ce9dcaa577ed .ff-65fc8c6e52e4ce9dcaa577ed__title, #fd-form-65fc8c6e52e4ce9dcaa577ed .ff-65fc8c6e52e4ce9dcaa577ed__subtitle { display: none !important; }
/* First name and Email side by side and centred as a pair, Subscribe on its own line beneath */
#fd-form-65fc8c6e52e4ce9dcaa577ed .ff-65fc8c6e52e4ce9dcaa577ed__content { display: flex !important; flex-direction: column; align-items: center; gap: 1rem; }
#fd-form-65fc8c6e52e4ce9dcaa577ed .ff-65fc8c6e52e4ce9dcaa577ed__fields { display: flex !important; flex: none; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 0 !important; width: 100%; max-width: 34rem; }
#fd-form-65fc8c6e52e4ce9dcaa577ed .ff-65fc8c6e52e4ce9dcaa577ed__field { margin: 0 !important; flex: 1 1 14rem; }
#fd-form-65fc8c6e52e4ce9dcaa577ed .ff-65fc8c6e52e4ce9dcaa577ed__control { background: transparent !important; border: 1.5px solid var(--ink) !important; border-radius: 0 !important; color: var(--ink) !important; font-family: var(--body) !important; font-size: 0.95rem !important; height: 54px !important; padding: 0 1.1rem !important; box-shadow: none !important; }
#fd-form-65fc8c6e52e4ce9dcaa577ed .ff-65fc8c6e52e4ce9dcaa577ed__control:focus { outline: 2px solid var(--ink) !important; outline-offset: 2px; }
#fd-form-65fc8c6e52e4ce9dcaa577ed .ff-65fc8c6e52e4ce9dcaa577ed__label { color: var(--ink) !important; font-family: var(--body) !important; font-size: 0.72rem !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; opacity: 0.75; }
#fd-form-65fc8c6e52e4ce9dcaa577ed .ff-65fc8c6e52e4ce9dcaa577ed__footer { margin: 0 !important; padding: 0 !important; display: flex; justify-content: center; }
#fd-form-65fc8c6e52e4ce9dcaa577ed .ff-65fc8c6e52e4ce9dcaa577ed__button { background: var(--ink) !important; color: var(--gold) !important; border: 1.5px solid var(--ink) !important; border-radius: 999px !important; height: 54px !important; padding: 0 1.75rem !important; font-family: var(--body) !important; font-weight: 600 !important; font-size: 0.78rem !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; box-shadow: none !important; transition: background 0.35s var(--ease), color 0.35s var(--ease) !important; }
#fd-form-65fc8c6e52e4ce9dcaa577ed .ff-65fc8c6e52e4ce9dcaa577ed__button:hover { background: var(--bone) !important; border-color: var(--bone) !important; color: var(--ink) !important; }
#fd-form-65fc8c6e52e4ce9dcaa577ed .ff-65fc8c6e52e4ce9dcaa577ed__success-message, #fd-form-65fc8c6e52e4ce9dcaa577ed .ff-65fc8c6e52e4ce9dcaa577ed__error { color: var(--ink) !important; font-family: var(--body) !important; }
.section--parchment .eyebrow, .section--parchment-2 .eyebrow { color: var(--gold-deep); }
.section--parchment .muted, .section--parchment-2 .muted { color: var(--parchment-mute); }
.section--parchment .gold, .section--parchment-2 .gold { color: var(--gold-deep); }
.section--parchment .btn, .section--parchment-2 .btn { border-color: var(--gold-deep); color: var(--gold-deep); }
.section--parchment .btn:hover, .section--parchment-2 .btn:hover { background: var(--parchment-ink); border-color: var(--parchment-ink); color: var(--parchment); }
.section--parchment .btn--gold, .section--parchment-2 .btn--gold { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--bone); }
.section--parchment .btn--gold:hover, .section--parchment-2 .btn--gold:hover { background: var(--parchment-ink); border-color: var(--parchment-ink); }
.section--parchment .link-arrow, .section--parchment-2 .link-arrow { color: var(--gold-deep); }
.section--parchment a.inline, .section--parchment-2 a.inline { color: var(--gold-deep); border-bottom: 1px solid oklch(60% 0.13 76 / 0.4); }
a.inline { color: var(--gold); border-bottom: 1px solid oklch(74% 0.15 82 / 0.4); }
.bar { width: 64px; height: 4px; background: var(--gold); border: 0; margin: 0; }
.section-head { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-head > p { margin: 0; max-width: 46ch; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
/* First-screen content must not wait for main.js: .reveal--now fades in on its own
   from the first paint, so the page's largest paint is never gated on script. */
.reveal.reveal--now { opacity: 1; transform: none; transition: none; animation: revealNow 0.9s var(--ease) both; }
.reveal.reveal--now[data-delay="1"] { animation-delay: 0.1s; }
@keyframes revealNow { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .reveal.reveal--now { animation: none; } html { scroll-behavior: auto; } }

/* ==========================================================================
   NAV: mark in the corner, links beside it, gold CTA on the right
   ========================================================================== */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-inline: var(--gutter); background: transparent; transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.nav.is-scrolled { background: oklch(20% 0.01 60 / 0.94); box-shadow: 0 1px 0 oklch(36% 0.012 60 / 0.6); }
.nav__left { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.5rem); }
.nav__mark { display: block; height: 64px; flex: none; transition: opacity 0.4s var(--ease); }
.nav__mark img { height: 100%; width: auto; }
.nav__mark:hover { opacity: 0.75; }
.nav__links { display: flex; gap: clamp(1rem, 2vw, 1.75rem); }
.nav__links a { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-dim); position: relative; padding-block: 0.25rem; transition: color 0.3s var(--ease); }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--gold); transition: right 0.35s var(--ease); }
.nav__links a:hover, .nav__links a.is-active { color: var(--bone); }
.nav__links a.is-active::after, .nav__links a:hover::after { right: 0; }
.nav__right { display: flex; align-items: center; gap: 1rem; }
.nav__burger { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; align-items: center; }
.nav__burger span { display: block; width: 22px; height: 1.5px; background: var(--bone); margin: 3px 0; transition: transform 0.35s var(--ease), opacity 0.35s var(--ease); }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.mobile-menu { position: fixed; inset: 0; z-index: 40; background: var(--ink); display: grid; grid-template-rows: 1fr auto; padding: calc(var(--nav-h) + 1.5rem) var(--gutter) 2rem; transform: translateY(-100%); visibility: hidden; transition: transform 0.5s var(--ease), visibility 0s linear 0.5s; }
.mobile-menu.is-open { transform: none; visibility: visible; transition-delay: 0s; }
@media (min-width: 901px) { .mobile-menu { display: none; } }
.mobile-menu ul { display: grid; gap: 0.25rem; align-content: start; }
.mobile-menu a.display { font-size: clamp(2.6rem, 12vw, 4.5rem); color: var(--bone); line-height: 1; padding: 0.35rem 0; display: block; }
.mobile-menu a.display span { color: var(--gold); font-size: 0.5em; vertical-align: super; margin-right: 0.35em; }
.mobile-menu__foot { display: grid; gap: 0.75rem; color: var(--bone-dim); font-size: 0.9rem; }

/* ==========================================================================
   HERO: video-ready, wordmark centered, tagline on one line
   ========================================================================== */
.hero { position: relative; min-height: 100svh; min-height: 100vh; display: grid; place-items: center; text-align: center; padding: calc(var(--nav-h) + 2rem) var(--gutter) 5rem; isolation: isolate; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: -2; background: var(--ink); }
.hero__bg video, .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.hero__bg img { transform: scale(1.06); animation: heroZoom 14s var(--ease) forwards; }
@keyframes heroZoom { to { transform: scale(1); } }
.hero__scrim { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 70% 60% at 50% 55%, oklch(20% 0.01 60 / 0.3), oklch(20% 0.01 60 / 0.72)), linear-gradient(to bottom, oklch(20% 0.01 60 / 0.6), oklch(20% 0.01 60 / 0.2) 30%, oklch(20% 0.01 60 / 0.86)); }
.hero__inner { display: grid; justify-items: center; row-gap: clamp(1.75rem, 3.5vw, 2.75rem); width: 100%; }
.hero__logo { width: min(560px, 82vw); filter: drop-shadow(0 8px 30px oklch(0% 0 0 / 0.45)); }
.hero__tag { font-family: var(--letterpress); font-weight: 500; font-size: clamp(1.05rem, 2vw, 1.85rem); letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.3; color: var(--bone); max-width: none; margin: 0; white-space: nowrap; padding-inline: 0.22em 0; }
.hero__tag.is-pressed {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.6 0.3'/></filter><rect width='300' height='300' fill='white' filter='url(%23g)'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.6 0.3'/></filter><rect width='300' height='300' fill='white' filter='url(%23g)'/></svg>");
  -webkit-mask-size: 180px 180px; mask-size: 180px 180px;
  text-shadow: 0 1px 0 oklch(0% 0 0 / 0.35);
}
.hero__cta { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
.hero__meta { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 1.75rem; display: flex; justify-content: space-between; align-items: end; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-dim); }
.hero__scroll { display: inline-flex; align-items: center; gap: 0.6rem; }
.hero__scroll i { display: block; width: 1px; height: 38px; background: linear-gradient(var(--gold), transparent); animation: scrollHint 2.2s var(--ease) infinite; }
@keyframes scrollHint { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ==========================================================================
   REVIEW LINE: plain ink, first thing below the hero, no box
   ========================================================================== */
.banner { background: var(--ink); padding-block: clamp(3.5rem, 6.7vw, 6rem); }
/* the studio sits under the review line: line padding + this top padding = the standard section gap */
#studio { padding-top: clamp(1.5rem, 3.3vw, 3rem); }
.banner__card { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: clamp(1.25rem, 3vw, 2.5rem); text-align: center; }
.banner__number { font-family: var(--display); font-weight: 800; font-size: clamp(3.4rem, 6vw, 5.6rem); line-height: 0.9; color: var(--gold); letter-spacing: 0.01em; min-width: 3ch; }
.banner__text { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.banner__text .stars { color: var(--gold); letter-spacing: 0.14em; font-size: 0.9rem; }
.banner__text p { margin: 0; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.3; color: var(--bone-dim); max-width: none; white-space: nowrap; }
.banner__text strong { font-weight: 700; color: var(--bone); }
.banner__link { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease); white-space: nowrap; }
.banner__link:hover { border-bottom-color: var(--gold); }

/* ==========================================================================
   STUDIO INTRO
   ========================================================================== */
.intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.intro__img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-3); }
.intro__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.intro__img:hover img { transform: scale(1.03); }
.intro__text h2 { margin-bottom: 1.5rem; max-width: 12ch; }
.intro__text h2 em { font-style: normal; color: var(--gold); }
.intro__cta { margin-top: 2rem; gap: 2.25rem; }
.proof { display: flex; align-items: center; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 2px solid var(--gold); color: var(--bone-dim); font-size: 0.9rem; max-width: 34rem; }
.proof b { font-family: var(--display); font-weight: 800; font-size: 2.6rem; letter-spacing: 0.02em; line-height: 1; color: var(--gold); min-width: 3ch; }
.proof .stars { color: var(--gold); letter-spacing: 0.1em; font-size: 0.8rem; display: block; margin-bottom: 0.2rem; }
.proof a { color: var(--bone); border-bottom: 1px solid var(--line); }

/* ==========================================================================
   WORK STRIP: each tile links to the artist's profile
   ========================================================================== */
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px; }
.strip a { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--ink-3); display: block; }
.strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.strip a:hover img { transform: scale(1.04); }
.strip .strip__low img { object-position: 50% 50%; } /* panther: centred so the rainbow tail sits in frame */
.strip .strip__top img { object-position: 50% 10%; } /* hawk bodysuit: a 3:4 photo in a square, held near the top so the hawk's head stays in frame */
.strip .strip__upper img { object-position: 50% 30%; } /* carousel horse: the sword's pommel sits high, so keep it and let the caption cover the trimmed bottom */
.strip .strip__left img { transform: translateX(-9%) scale(1.18); }
.strip .strip__left:hover img { transform: translateX(-9%) scale(1.22); }
.strip figcaption { position: absolute; inset: auto 0 0 0; padding: 1.1rem 1.25rem; background: linear-gradient(to top, oklch(20% 0.01 60 / 0.9), transparent); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone); display: flex; justify-content: space-between; gap: 1rem; }
.strip figcaption b { font-weight: 600; color: var(--gold); }
/* The frame is the <a>; figure and picture must fill it or the image keeps its own height
   and the frame simply clips the bottom, which is what hid the panther's tail. */
.strip figure { margin: 0; height: 100%; }
.strip picture { display: block; height: 100%; }

/* ==========================================================================
   STATEMENT: hours and the two ways to reach us
   ========================================================================== */
.statement { padding-block: clamp(5rem, 10vw, 9rem); }
.statement__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; margin-top: clamp(2rem, 4vw, 3.5rem); }
.statement__grid p { max-width: 46ch; }
.hours { display: grid; gap: 0.25rem; }
.hours .eyebrow { margin-bottom: 0.5rem; }
.hours .big { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 0.95; color: var(--parchment-ink); }
.hours .big span { color: var(--gold-deep); }
.hours .closed { color: var(--parchment-mute); font-size: 0.95rem; margin-top: 0.4rem; margin-bottom: 0; }
.hours .cta-row { margin-top: calc(2rem - 0.25rem); } /* the grid gap supplies the other 0.25rem */

/* ==========================================================================
   ARTISTS
   ========================================================================== */
.artist-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.artist-card { position: relative; aspect-ratio: 3 / 4; overflow: hidden; text-align: left; padding: 0; background: var(--ink-3); display: block; width: 100%; }
.artist-card { --zoom: 1; --pos-y: 25%; --origin: 50% 26%; }
.artist-card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--pos-y); transform: scale(var(--zoom)); transform-origin: var(--origin); filter: saturate(0.9) brightness(0.72); transition: transform 1.2s var(--ease), filter 0.6s var(--ease); }
.artist-card:hover img, .artist-card.is-active img { transform: scale(calc(var(--zoom) * 1.04)); filter: saturate(1) brightness(0.9); }
/* per-portrait crops: eye line lands at about 26% of the card, heads sized alike */
/* Per-artist framing, computed from each portrait's face box (Apple Vision, see README):
   --pos-y is the face centre's height in the source, which keeps the framing identical in the
   3:4 desktop card and the 4:5 phone card; --zoom brings every face to the same height as
   Jessica's (about a fifth of the card); --origin is the point that stays put as the image
   grows, chosen so the face lands 50% across and about 28% down. Redo the numbers when a
   portrait changes. Jessica is the reference and stays at 1. */
.artist-card[data-artist="english"] { --zoom: 1.36; --pos-y: 29%; --origin: 68.5% 32.5%; }
.artist-card[data-artist="christopher"] { --zoom: 1.22; --pos-y: 36%; --origin: 100% 73%; }
.artist-card[data-artist="nathan"] { --zoom: 1.53; --pos-y: 37%; --origin: 47% 53%; }
.artist-card[data-artist="jessica"] { --zoom: 1; --pos-y: 26%; --origin: 46% 26%; }
.artist-card__label { position: absolute; inset: 0; display: grid; align-content: end; justify-items: center; text-align: center; padding: 1rem 1rem 1.4rem; color: var(--bone); pointer-events: none; background: linear-gradient(to top, oklch(20% 0.01 60 / 0.82), transparent 48%); }
.artist-card__label .display { font-size: clamp(1.7rem, 2.6vw, 2.5rem); line-height: 0.92; text-shadow: 0 2px 18px oklch(0% 0 0 / 0.6); }
.artist-card__label small { display: block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-top: 0.75rem; line-height: 1.5; }
.artist-card__hint { position: absolute; right: 1.1rem; top: 1.1rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); opacity: 0; transition: opacity 0.4s var(--ease); pointer-events: none; }
.artist-card:hover .artist-card__hint { opacity: 1; }
.artist-card.is-active::after { content: ""; position: absolute; inset: 0; border: 3px solid var(--gold); pointer-events: none; }

.artist-panels { display: grid; }
.artist-panel { display: none; grid-column: 1; grid-row: 1; }
.artist-panel.is-open { display: block; animation: panelIn 0.6s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.panel-inner { position: relative; margin-top: 6px; background: var(--ink-2); border: 1px solid var(--line-soft); padding: clamp(1.75rem, 4vw, 3.5rem); }
.panel-close { position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 999px; display: grid; place-items: center; color: var(--bone-dim); transition: color 0.3s var(--ease), border-color 0.3s var(--ease); }
.panel-close:hover { color: var(--bone); border-color: var(--bone); }
.panel__top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 4rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); border-bottom: 1px solid var(--line-soft); }
.panel__name { margin-bottom: 0.25rem; }
.panel__handle { color: var(--gold); font-size: 0.85rem; letter-spacing: 0.06em; display: inline-block; margin-bottom: 1.5rem; }
.panel__bio { color: var(--bone-dim); }
.panel__bio p { max-width: 58ch; }
.panel__meta { display: grid; gap: 1.1rem; margin: 0; }
.panel__meta dt { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-mute); margin-bottom: 0.35rem; }
.panel__meta dd { margin: 0; font-size: 0.95rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip { font-size: 0.72rem; letter-spacing: 0.06em; padding: 0.35rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; color: var(--bone-dim); }
.status { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.status--seasonal::before, .status--closed::before { background: var(--bone-mute); box-shadow: 0 0 0 4px oklch(60% 0.014 72 / 0.2); }
.panel__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }
.gallery-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1rem; font-size: 0.8rem; color: var(--bone-mute); }
.gallery-head h4 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.3rem; letter-spacing: 0.04em; color: var(--bone); }
.gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.gallery button { aspect-ratio: 1 / 1; overflow: hidden; background: var(--ink-3); padding: 0; display: block; width: 100%; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.gallery button:hover img { transform: scale(1.06); }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 100; background: oklch(12% 0.008 60 / 0.96); display: none; place-items: center; padding: clamp(1rem, 4vw, 3rem); }
.lightbox.is-open { display: grid; animation: lbIn 0.35s var(--ease); }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox img { max-width: min(100%, 1200px); max-height: calc(100vh - 2 * clamp(1rem, 4vw, 3rem)); object-fit: contain; box-shadow: 0 30px 80px oklch(0% 0 0 / 0.6); }
.lightbox__btn { position: absolute; width: 48px; height: 48px; border-radius: 999px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--bone); background: oklch(20% 0.01 60 / 0.7); transition: border-color 0.3s, background 0.3s; }
.lightbox__btn:hover { border-color: var(--gold); background: oklch(24% 0.011 60); }
.lightbox__btn svg { width: 18px; height: 18px; }
.lightbox__close { top: 1.25rem; right: 1.25rem; }
.lightbox__prev { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox__count { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); font-size: 0.72rem; letter-spacing: 0.16em; color: var(--bone-mute); }
body.lb-open { overflow: hidden; }

/* ==========================================================================
   STORY (two sections) + REVIEWS + GALLERY ROW
   ========================================================================== */
.story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: stretch; }
.story__img { margin: 0; min-height: 100%; overflow: hidden; background: var(--parchment-2); }
.story__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 52% 24%; transition: transform 1.4s var(--ease); }
.story__img:hover img { transform: scale(1.03); }
.story__body h2 { color: var(--parchment-ink); }
.story__body h2 .gold { color: var(--gold-deep); }
.story__body .voice { margin-top: 1.5rem; font-size: 0.95rem; color: var(--parchment-mute); max-width: 42ch; }
.story__block { margin-top: clamp(1.75rem, 3vw, 2.5rem); max-width: 68ch; }
.story__body h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.35rem; letter-spacing: 0.03em; margin-bottom: 0.75rem; }
.story__body p { color: var(--parchment-mute); font-size: 1rem; }
.story__body p:last-child { margin-bottom: 0; }

/* ---------- for artists ---------- */
/* copy on the left, portrait photo on the right, vertically centered (same shape as "Before your appointment") */
.thrive { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.thrive__text h2 { margin-bottom: 1.5rem; max-width: 12ch; }
.thrive__text p { max-width: 56ch; }
.thrive__cta { margin-top: 2rem; gap: 2.25rem; }
.thrive__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-3); } /* landscape photo of Christopher and Nathan: 4:3 keeps both in frame */
.thrive__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: transform 1.4s var(--ease); }
.thrive__img:hover img { transform: scale(1.03); }

/* ---------- reviews: heading across the top, reviews side by side in columns, each shown in full, CTA under them ---------- */
.reviews__cta { margin-top: clamp(2rem, 4vw, 3.5rem); gap: 2.25rem; }
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.quotes[hidden], .quote[hidden] { display: none; }
.quote { display: grid; gap: 1.5rem; padding-top: 1.75rem; border-top: 2px solid var(--parchment-ink); }
.quote__meta { display: grid; gap: 0.6rem; align-content: start; }
.quote__stars { color: var(--gold-deep); font-size: 1rem; letter-spacing: 0.14em; line-height: 1; }
.quote cite { font-style: normal; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.4rem; line-height: 1.05; color: var(--parchment-ink); }
.quote__when { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); }
.quote__when:empty { display: none; }
.quote blockquote { margin: 0; }
.quote .voice { font-size: 0.95rem; line-height: 1.75; color: var(--parchment-ink); margin: 0; max-width: none; white-space: pre-line; }
.placeholder { outline: 1px dashed var(--gold-deep); outline-offset: 8px; position: relative; }
.placeholder::before { content: "Placeholder · replace with a real review"; position: absolute; top: -0.65rem; right: 0.5rem; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); background: var(--parchment-2); padding: 0.2rem 0.5rem; }

/* Three equal frames across the full width, one band, same height, at every screen size */
.gallery-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 6px 6px; background: var(--parchment-2); }
/* Per-frame framing, the same idea as the artist cards: --zoom grows the image around --origin
   (the point in the frame that stays put) and --pos-y picks which part of a taller image shows. */
.gallery-row figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--parchment); --zoom: 1; --pos-y: 50%; --origin: 50% 50%; }
.gallery-row img { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--pos-y); transform: scale(var(--zoom)); transform-origin: var(--origin); transition: transform 1.2s var(--ease); }
.gallery-row figure:hover img { transform: scale(calc(var(--zoom) * 1.04)); }
/* English sits mid-frame in her photo, so the frame simply tightens on her. Christopher works at
   the right edge of his, so the right edge stays put and the image grows around a point level with
   his shoulders, which brings him toward the centre and keeps his hands in view. */
/* All three candids sit at their natural scale, centred: the earlier face crops lost what
   each picture is about (the stencil check, English laughing with a client, the ring light). */
.gallery-row .frame--english, .gallery-row .frame--christopher { --zoom: 1; --pos-y: 50%; --origin: 50% 50%; }

/* ==========================================================================
   BOOKING + POLICIES
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); margin-top: 1rem; }
.step { padding-top: 1.5rem; border-top: 3px solid var(--gold); }
.step__n { font-family: var(--display); font-weight: 800; font-size: clamp(3rem, 5vw, 4.5rem); line-height: 1; color: var(--gold); margin-bottom: 0.75rem; }
.step h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.5rem; letter-spacing: 0.03em; margin-bottom: 0.6rem; }
.step p { color: var(--bone-dim); font-size: 0.98rem; margin-bottom: 0.75rem; }
.booking__cta { margin-top: clamp(2rem, 4vw, 3.5rem); }
.booking__cta .muted { font-size: 0.85rem; margin-left: 0.5rem; }

.policies { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 6rem); }
.policies__title { position: sticky; top: calc(var(--nav-h) + 2rem); align-self: start; }
.policies__title p { color: var(--parchment-mute); margin-top: 1.5rem; }
.policy-list { margin: 0; }
.policy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 1.5rem; padding: 1.4rem 0; border-top: 1px solid var(--parchment-line); }
.policy:last-child { border-bottom: 1px solid var(--parchment-line); }
.policy dt { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.25rem; line-height: 1.1; }
.policy dd { margin: 0; color: var(--parchment-mute); font-size: 0.98rem; }
.policy dd b { color: var(--parchment-ink); font-weight: 600; }
.policy dd code { font-family: var(--body); font-weight: 700; color: var(--gold-deep); letter-spacing: 0.06em; }

/* ==========================================================================
   BEFORE + AFTERCARE: text paired with an image, mirrored
   ========================================================================== */
.pair { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: center; }
.pair--flip .pair__img { order: -1; }
.pair__img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-3); position: sticky; top: calc(var(--nav-h) + 2rem); }
.pair__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.pair__img:hover img { transform: scale(1.03); }
.pair h2 { margin-bottom: 1.5rem; }
.pair .lead-in { color: var(--bone-dim); margin-bottom: 2rem; }
.pair .cta-row { margin-top: 2rem; }
.checklist li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; padding: 1.25rem 0; border-top: 1px solid var(--line-soft); }
.checklist li:last-child { border-bottom: 1px solid var(--line-soft); }
.checklist .n { font-family: var(--display); font-weight: 800; font-size: 1.6rem; color: var(--gold); line-height: 1; padding-top: 0.15rem; }
.checklist h3 { font-weight: 600; font-size: 1rem; margin-bottom: 0.35rem; }
.checklist p { color: var(--bone-dim); font-size: 0.95rem; margin: 0; }

.timeline details { border-top: 1px solid var(--line-soft); }
.timeline details:last-of-type { border-bottom: 1px solid var(--line-soft); }
.timeline summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; gap: 1.25rem; align-items: center; padding: 1.15rem 0; font-weight: 500; }
.timeline summary::-webkit-details-marker { display: none; }
.timeline summary .when { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.1rem; letter-spacing: 0.05em; color: var(--gold); min-width: 7.5rem; }
/* the plus is drawn with two centered bars, not a text glyph, so it sits dead center in every browser */
.plus { flex: none; position: relative; width: 28px; height: 28px; border: 1.5px solid var(--gold); border-radius: 999px; color: var(--gold); transition: transform 0.4s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease); }
.plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; transform: translate(-50%, -50%); border-radius: 1px; }
.plus::before { width: 12px; height: 2px; }
.plus::after { width: 2px; height: 12px; }
details[open] > summary .plus { transform: rotate(45deg); background: var(--gold); color: var(--ink); }
.timeline .body { padding: 0 0 1.4rem calc(7.5rem + 1.25rem); color: var(--bone-dim); font-size: 0.95rem; }
.timeline .body ul { display: grid; gap: 0.5rem; }
.timeline .body li { padding-left: 1.1rem; position: relative; }
.timeline .body li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 5px; height: 5px; background: var(--gold); border-radius: 50%; }
.timeline .body p { margin: 0 0 0.6rem; }

/* ==========================================================================
   FAQ (parchment)
   ========================================================================== */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 6rem); }
.faq__title { position: sticky; top: calc(var(--nav-h) + 2rem); align-self: start; }
.faq__title p { color: var(--parchment-mute); margin-top: 1.5rem; }
.faq-list details { border-top: 1px solid var(--parchment-line); }
.faq-list details:last-of-type { border-bottom: 1px solid var(--parchment-line); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.3rem 0; font-size: 1.1rem; font-weight: 500; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list .plus { border-color: var(--gold-deep); color: var(--gold-deep); }
.faq-list details[open] > summary .plus { background: var(--gold-deep); color: var(--parchment); }
.faq-list .body { padding: 0 3rem 1.5rem 0; color: var(--parchment-mute); }
.faq-list .body p { margin-bottom: 0.6rem; }

/* ==========================================================================
   VISIT
   ========================================================================== */
.visit { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; margin-top: clamp(2rem, 4vw, 3.5rem); }
.map { aspect-ratio: 4 / 3; background: var(--ink-3); border: 1px solid var(--line-soft); position: relative; overflow: hidden; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(0.9) contrast(0.9) sepia(0.25); }
/* The embed has no src until main.js fills it in near the viewport; until then show a quiet label */
.map iframe:not([src]) { visibility: hidden; }
.map__loading { position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-mute); pointer-events: none; }
.map.is-loaded .map__loading { display: none; }
/* top right: Google's own address card sits top left and its pan control bottom right */
.map__pin { position: absolute; right: 1rem; top: 1rem; z-index: 1; }
.visit__details { margin: 0; }
.visit__row { padding: 1.35rem 0; border-top: 1px solid var(--line-soft); display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; }
.visit__row:last-child { border-bottom: 1px solid var(--line-soft); }
.visit__row dt { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-mute); padding-top: 0.3rem; }
.visit__row dd { margin: 0; }
.visit__row dd .big { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.5rem; letter-spacing: 0.03em; line-height: 1.05; display: block; }
.visit__row dd p { color: var(--bone-dim); font-size: 0.95rem; margin: 0.4rem 0 0; }
.visit__row a:hover { color: var(--gold); }
.visit__cta { margin-top: 2rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { background: var(--ink-2); border-top: 3px solid var(--gold); padding: clamp(3rem, 6vw, 5rem) 0 2rem; }
.footer__top { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: clamp(2rem, 4vw, 4rem); }
.footer__brand { display: grid; justify-items: center; text-align: center; align-content: start; }
.footer__brand img { height: 150px; width: auto; margin-bottom: 1.75rem; }
.footer__brand p { color: var(--bone-dim); font-size: 0.95rem; max-width: 34ch; margin-inline: auto; }
.footer h3 { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.footer ul { display: grid; gap: 0.55rem; }
.footer li a { color: var(--bone-dim); font-size: 0.95rem; transition: color 0.3s; }
.footer li a:hover { color: var(--bone); }
/* bone-mute on ink-2 reads at 4.17:1, under the 4.5:1 that 12px text needs; this is the same hue lifted to 62.5% (4.61:1). */
.footer__bottom { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 0.78rem; color: oklch(62.5% 0.014 72); }
.footer__bottom .voice { color: var(--bone-dim); font-size: 0.72rem; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* ---------- guest artist page ---------- */
.page-top { padding-top: var(--nav-h); }
/* The page opens on this section, so it sits closer to the nav than a mid-page section would */
#apply { padding-top: clamp(2.5rem, 5vw, 4rem); }
.guest__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
/* The headline is two lines, "Guest spot at" over "Pilgrimage." Its size is capped to the
   column (19.5cqw: the first line measures 4.95em in Big Shoulders 800), because on
   wide screens the column stops growing before the type does and the line broke in two. */
.guest__body { container-type: inline-size; }
.guest__body h1 { color: var(--bone); font-size: min(clamp(3.2rem, 9.4vw, 9.4rem), 19.5cqw); }
.guest__body .lede { margin-top: 1rem; color: var(--bone-dim); max-width: 40ch; }
.guest__media { display: grid; gap: 6px; position: sticky; top: calc(var(--nav-h) + 2rem); }
.guest__media figure { margin: 0; overflow: hidden; background: var(--ink-3); aspect-ratio: 4 / 5; }
.guest__media img { width: 100%; height: 100%; object-fit: cover; }
.form { display: grid; gap: 1.4rem; margin-top: 2.5rem; max-width: 38rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
/* In a two-up row a hint sits beside its label, so the two inputs stay level */
.form__row label { grid-template-columns: auto 1fr; column-gap: 0.6rem; align-items: baseline; }
.form__row label > input { grid-column: 1 / -1; }
.form__row label small { margin-top: 0; }
.form label, .form legend { display: grid; gap: 0.5rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-dim); padding: 0; }
.form label small, .form legend small { font-weight: 400; letter-spacing: 0.01em; text-transform: none; font-size: 0.88rem; color: var(--bone-mute); margin-top: -0.2rem; }
.form input:not([type="checkbox"]):not([type="radio"]), .form textarea { width: 100%; background: transparent; border: 1.5px solid var(--line); border-radius: 0; color: var(--bone); font: inherit; font-size: 1rem; letter-spacing: 0; text-transform: none; padding: 0.85rem 1rem; transition: border-color 0.3s var(--ease); }
.form input::placeholder, .form textarea::placeholder { color: var(--bone-mute); }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--gold); }
.form textarea { resize: vertical; min-height: 8rem; }
.form input[type="file"] { padding: 0.7rem 1rem; color: var(--bone-dim); }
.form input[type="file"]::file-selector-button { font: inherit; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); background: transparent; border: 1.5px solid var(--gold); border-radius: 999px; padding: 0.5rem 0.9rem; margin-right: 1rem; cursor: pointer; }
.form__check, .form__radio { display: flex !important; align-items: center; gap: 0.65rem; text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; font-size: 0.98rem !important; color: var(--bone) !important; cursor: pointer; }
.form input[type="checkbox"], .form input[type="radio"] { accent-color: var(--gold); width: 18px; height: 18px; margin: 0; }
.form__set { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 0.75rem; }
.form__choices { display: flex; gap: 1.75rem; }
.form .cta-row { margin-top: 0.5rem; gap: 2.25rem; }
.form__hint { font-size: 0.95rem; color: var(--bone-dim); margin: 0; padding: 1rem 1.1rem; border: 1.5px solid var(--line); }
.form__hint b { color: var(--bone); font-weight: 600; }
.form__note { font-size: 0.92rem; color: var(--bone-dim); margin: 0; }
.form__note:empty { display: none; }
.form__done { margin-top: 2.5rem; max-width: 38rem; }
.form__done p { color: var(--bone-dim); margin-top: 1rem; }
.form__done a.inline { color: var(--gold); }

@media (max-width: 1100px) {
  /* headline across the top, then the two text blocks and the photo side by side */
  .story { gap: clamp(1.75rem, 3.5vw, 3rem); }
  .artist-grid { grid-template-columns: repeat(2, 1fr); }
  .panel__top { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(4, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .hero__tag { white-space: normal; max-width: 30ch; letter-spacing: 0.14em; }
}
@media (max-width: 900px) {
  .guest__grid { grid-template-columns: 1fr; }
  .guest__media { position: static; }
  .guest__media figure { aspect-ratio: 4 / 3; }
  :root { --nav-h: 68px; }
  .nav__links { display: none; }
  .nav__mark { height: 50px; }
  .nav__right .btn { display: none; }
  .nav__burger { display: flex; }
  .intro, .thrive, .pair { grid-template-columns: 1fr; }
  .pair--flip .pair__img { order: 0; }
  .pair__img { position: static; aspect-ratio: 4 / 3; }
  .intro__img, .thrive__img { aspect-ratio: 4 / 3; }
  .strip { grid-template-columns: 1fr 1fr; }
  .statement__grid { grid-template-columns: 1fr; }
  .banner__card { flex-direction: column; gap: 0.75rem; }
  .banner__text p { white-space: normal; }
  .section-head { grid-template-columns: 1fr; }
  .story { grid-template-columns: 1fr; }
  .story__img { min-height: 0; aspect-ratio: 16 / 9; }
  .story__block { max-width: none; }
  .steps { grid-template-columns: 1fr; }
  .policies, .faq { grid-template-columns: 1fr; }
  .policies__title, .faq__title { position: static; }
  .policy { grid-template-columns: 1fr; gap: 0.5rem; }
  .timeline .body { padding-left: 0; }
  .timeline summary { grid-template-columns: 1fr auto; }
  .timeline summary .when { grid-column: 1 / -1; min-width: 0; }
  .quotes { grid-template-columns: 1fr; }
  .visit { grid-template-columns: 1fr; }
  .visit__row { grid-template-columns: 1fr; gap: 0.35rem; }
  .footer__top { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .form__row { grid-template-columns: 1fr; }
  .story__img { aspect-ratio: 4 / 3; }
  .btn { white-space: normal; text-align: center; line-height: 1.3; }
  .artist-grid { grid-template-columns: 1fr 1fr; }
  .artist-card { aspect-ratio: 4 / 5; }
  .artist-card__label .display { font-size: 1.45rem; }
  .artist-card__label small { font-size: 0.56rem; letter-spacing: 0.1em; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .hero__meta { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .hero__meta .hero__scroll { display: none; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 1.25rem; transform: none; }
  .lightbox__prev { left: 1.25rem; } .lightbox__next { right: 1.25rem; }
  .lightbox__count { bottom: 2.1rem; }
}

/* ---------- portfolio / wannados switch (Christopher's profile) ---------- */
.gallery-switch { display: flex; gap: 0; border: 1.5px solid var(--line); border-radius: 999px; overflow: hidden; margin-right: auto; }
.gallery-switch__btn { font: inherit; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-mute); background: transparent; border: 0; padding: 0.5rem 1.1rem; cursor: pointer; transition: color 0.3s var(--ease), background 0.3s var(--ease); }
.gallery-switch__btn:hover { color: var(--bone); }
.gallery-switch__btn.is-on { background: var(--gold); color: var(--ink); }
.gallery-note { font-size: 0.95rem; color: var(--bone-dim); margin: -0.25rem 0 1.1rem; max-width: 62ch; }
@media (max-width: 720px) {
  .gallery-head { flex-wrap: wrap; }
  .gallery-switch { order: 3; margin-right: 0; }
}

/* ==========================================================================
   NEWSLETTER PROMPT
   Ten seconds in, once per visitor. Deliberately does not lock scrolling: it is
   an interruption, and trapping the page behind it costs more goodwill than the
   signup is worth.
   ========================================================================== */
.promo { position: fixed; inset: 0; z-index: 90; background: oklch(12% 0.008 60 / 0.72); display: grid; place-items: center; padding: clamp(1rem, 5vw, 3rem); }
.promo[hidden] { display: none; }
.promo__card { position: relative; width: min(34rem, 100%); background: var(--gold); color: var(--ink); border: 1.5px solid var(--ink); padding: clamp(2rem, 5vw, 2.75rem); text-align: center; box-shadow: 0 30px 80px oklch(0% 0 0 / 0.55); animation: promoIn 0.45s var(--ease); }
.promo__card h2 { margin-top: 0.5rem; }
.promo__card .eyebrow, .promo__card .display { color: var(--ink); }
.promo__lead { color: var(--ink); opacity: 0.85; margin: 1rem auto 1.5rem; max-width: 34ch; }
/* the card's own fields; Subscribe hands the values to the Flodesk embed in #newsletter (see main.js) */
.promo__form { margin: 0 0 1.25rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.promo__fields { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; width: 100%; }
.promo__field { flex: 1 1 12rem; display: grid; gap: 0.4rem; text-align: left; }
.promo__field span { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); opacity: 0.75; }
.promo__field input { width: 100%; height: 54px; padding: 0 1.1rem; background: transparent; border: 1.5px solid var(--ink); border-radius: 0; color: var(--ink); font-family: var(--body); font-size: 1rem; }
.promo__field input:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.promo__submit { background: var(--ink); border-color: var(--ink); color: var(--gold); height: 54px; padding: 0 1.75rem; }
.promo__submit:hover { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.promo__submit[disabled] { opacity: 0.6; cursor: default; }
.promo__note { margin: 0; font-size: 0.95rem; color: var(--ink); }
.promo__note:empty { display: none; }
.promo__form.is-done .promo__fields, .promo__form.is-done .promo__submit { display: none; }
.promo__card .btn--ghost { color: var(--ink); border-color: oklch(20% 0.01 60 / 0.45); }
.promo__card .btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--gold); }
.promo__cta { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.promo__close { position: absolute; top: 0.75rem; right: 0.75rem; width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink); opacity: 0.7; background: transparent; border: 0; cursor: pointer; transition: opacity 0.3s var(--ease); }
.promo__close:hover { opacity: 1; }
.promo__close svg { width: 18px; height: 18px; }
@keyframes promoIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .promo__card { animation: none; } }
@media (max-width: 560px) {
  .promo { place-items: end center; padding: 0; }
  .promo__card { width: 100%; border-width: 1.5px 0 0; padding: 2rem 1.5rem 2.5rem; }
}