/* ═══════════════════════════════════════════════════════════════
   ANACK PHOTO — Warm Editorial
   Fraunces + Inter · warm paper, soft black, slate blue
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────
   1. TOKENS
   ─────────────────────────────────────────────── */
:root {
  /* Palette */
  --paper:      #FBF8F3;
  --paper-warm: #F4EEE5;
  --paper-deep: #EBE3D7;
  --ink:        #211D19;
  --ink-soft:   #4A423A;
  --stone:      #8C8378;
  /* Slate blue — 6.68:1 on --paper, so it clears WCAG AA for the small
     uppercase labels as well as body-size text. */
  --accent:      #4A5A6B;
  --accent-deep: #374553;
  --line:       rgba(33, 29, 25, 0.13);
  --line-soft:  rgba(33, 29, 25, 0.07);

  /* Type */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --t-hero:  clamp(2.6rem, 6.4vw, 5.75rem);
  --t-h2:    clamp(2rem, 4.4vw, 3.6rem);
  --t-h3:    clamp(1.3rem, 2vw, 1.65rem);
  --t-lead:  clamp(1.1rem, 1.5vw, 1.35rem);
  --t-body:  1.0625rem;
  --t-sm:    0.9375rem;
  --t-label: 0.6875rem;

  /* Space */
  --pad-x: clamp(1.5rem, 5vw, 5rem);
  --section: clamp(5rem, 11vw, 10rem);
  --max: 1340px;
  --measure: 60ch;

  /* Every page sets viewport-fit=cover, so iOS extends the layout UNDER the
     notch and the home indicator. The env() insets below are written inline
     at each use site rather than piped through a custom property — routing
     env() through a var adds an indirection some engines resolve unreliably.
     The 0px fallback means nothing changes on desktop or Android. */
  --nav-h: 78px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ───────────────────────────────────────────────
   2. RESET & BASE
   ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: -0.003em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

::selection { background: var(--accent); color: var(--paper); }

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

.skip-link {
  position: absolute;
  top: -200px;
  left: var(--pad-x);
  z-index: 2000;
  padding: 0.9rem 1.5rem;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t-sm);
  transition: top 0.2s;
}
.skip-link:focus { top: 0.75rem; }

/* ───────────────────────────────────────────────
   3. TYPOGRAPHY PRIMITIVES
   ─────────────────────────────────────────────── */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 120;
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

h2 { font-size: var(--t-h2); }
h3 {
  font-size: var(--t-h3);
  line-height: 1.2;
  font-weight: 400;
  font-variation-settings: 'SOFT' 40, 'WONK' 0, 'opsz' 32;
}

em { font-style: italic; }

/* Small uppercase label with an accent rule */
.label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.75rem;
}
.label::before {
  content: '';
  display: block;
  width: 34px;
  height: 1px;
  background: var(--accent);
  margin-bottom: 1rem;
}
.label--plain::before { display: none; }
.label--light { color: rgba(251, 248, 243, 0.75); }
.label--light::before { background: rgba(251, 248, 243, 0.5); }

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: var(--measure);
}

.measure { max-width: var(--measure); }

/* Inline text link */
.tlink {
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  transition: color 0.25s, border-color 0.25s;
}
.tlink:hover { color: var(--accent); border-color: var(--accent-deep); }

/* ───────────────────────────────────────────────
   4. LAYOUT
   ─────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section { padding-block: var(--section); }
.section--warm { background: var(--paper-warm); }
.section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }

.rule { height: 1px; background: var(--line); border: 0; }

/* ───────────────────────────────────────────────
   5. BUTTONS
   ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-ui);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 1.15rem 2.1rem;
  border: 1px solid transparent;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease);
}

.btn--solid { background: var(--accent); color: var(--paper); }
.btn--solid:hover { background: var(--ink); }

.btn--outline { border-color: var(--line); color: var(--ink); }
.btn--outline:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }

.btn--light { border-color: rgba(251, 248, 243, 0.45); color: var(--paper); }
.btn--light:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* Text-only arrow link */
.arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
  transition: color 0.25s, border-color 0.25s, gap 0.25s var(--ease);
}
.arrow::after { content: '→'; font-size: 0.95rem; letter-spacing: 0; }
.arrow:hover { color: var(--accent); border-color: var(--accent); gap: 0.95rem; }

/* ───────────────────────────────────────────────
   6. NAVIGATION
   ─────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  /* Grows by the notch inset so the bar's contents clear the status bar */
  height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: max(var(--pad-x), env(safe-area-inset-left, 0px));
  padding-right: max(var(--pad-x), env(safe-area-inset-right, 0px));
  transition: background 0.4s var(--ease), border-color 0.4s;
  border-bottom: 1px solid transparent;
}

.nav__logo img {
  height: 34px;
  width: auto;
  transition: opacity 0.25s;
}
.nav__logo:hover img { opacity: 0.65; }
.nav__logo .logo-light { display: none; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 2.6vw, 2.75rem);
}
.nav__links a {
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  position: relative;
  padding-block: 0.35rem;
  transition: color 0.25s;
}
.nav__links a:not(.nav__cta)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.4s var(--ease);
}
.nav__links a:not(.nav__cta):hover::after { width: 100%; }

.nav__cta {
  border: 1px solid currentColor;
  padding: 0.7rem 1.35rem !important;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.nav__burger {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  margin-right: -10px;
}
.nav__burger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.2s;
}

/* Transparent state over the hero image */
.nav--over { color: var(--paper); }
.nav--over .nav__logo .logo-dark { display: none; }
.nav--over .nav__logo .logo-light { display: block; }
.nav--over .nav__cta:hover { background: var(--paper); color: var(--ink); }

/* Solid state */
.nav.is-stuck {
  background: rgba(251, 248, 243, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--line-soft);
  color: var(--ink);
}
.nav.is-stuck .nav__logo .logo-dark { display: block; }
.nav.is-stuck .nav__logo .logo-light { display: none; }
.nav.is-stuck .nav__links a:hover { color: var(--accent); }
.nav.is-stuck .nav__cta { border-color: var(--line); }
.nav.is-stuck .nav__cta:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); }

@media (max-width: 900px) {
  .nav__burger { display: flex; }

  .nav__links {
    position: fixed;
    inset: 0;
    background: var(--paper);
    color: var(--ink);
    flex-direction: column;
    /* `safe center` keeps the list centred normally but refuses to clip the
       top when it is taller than the screen (landscape phones). Plain
       `center` is the fallback for anything that doesn't support it. */
    justify-content: center;
    justify-content: safe center;
    align-items: stretch;
    gap: 0;
    /* Clear the bar at the top and the home indicator at the bottom */
    padding: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 1.5rem)
             max(var(--pad-x), env(safe-area-inset-right, 0px))
             calc(2rem + env(safe-area-inset-bottom, 0px))
             max(var(--pad-x), env(safe-area-inset-left, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), visibility 0.3s;
  }
  .nav__links.is-open { opacity: 1; visibility: visible; }

  /* Editorial list rather than small caps — this is a full screen, so the
     type can carry it. 56px rows clear the 44px tap-target minimum. */
  .nav__links a {
    font-family: var(--font-display);
    font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 48;
    font-size: 1.75rem;
    font-weight: 300;
    letter-spacing: -0.015em;
    text-transform: none;
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .nav__links a::after { display: none; }
  .nav__links a:active { color: var(--accent); }

  .nav__links .nav__cta {
    margin-top: 1.75rem;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--paper) !important;
    font-family: var(--font-ui);
    font-size: var(--t-label);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    justify-content: center;
    padding: 1.15rem 1.5rem !important;
    min-height: 56px;
  }

  /* The overlay is fixed inset:0, so the mark and the burger must sit above
     it or they get painted over. */
  .nav__burger,
  .nav__logo { position: relative; z-index: 2; }
  body.menu-open .nav { color: var(--ink); }
  body.menu-open { overflow: hidden; }
  /* The overlay is cream, so force the dark mark even while .nav--over is set */
  body.menu-open .nav--over .nav__logo .logo-dark { display: block; }
  body.menu-open .nav--over .nav__logo .logo-light { display: none; }
  .nav__burger.is-open span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
  .nav__burger.is-open span:nth-child(2) { opacity: 0; }
  .nav__burger.is-open span:nth-child(3) { transform: translateY(-3.75px) rotate(-45deg); width: 24px; }
}

/* ───────────────────────────────────────────────
   7. HERO
   ─────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 42%;
}

/* Light, directional scrims — the photograph stays the subject */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(28, 22, 17, 0.6) 0%, rgba(28, 22, 17, 0.1) 40%, transparent 64%),
    linear-gradient(to right, rgba(28, 22, 17, 0.5) 0%, rgba(28, 22, 17, 0.12) 40%, transparent 62%),
    linear-gradient(to bottom, rgba(28, 22, 17, 0.32) 0%, transparent 20%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  /* Bottom clears the home indicator; sides clear a landscape notch */
  padding: 0 max(var(--pad-x), env(safe-area-inset-right, 0px))
           calc(clamp(3.5rem, 8vw, 6.5rem) + env(safe-area-inset-bottom, 0px))
           max(var(--pad-x), env(safe-area-inset-left, 0px));
  color: var(--paper);
}

.hero__kicker {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(251, 248, 243, 0.82);
  margin-bottom: 1.5rem;
}

.hero__title {
  font-size: var(--t-hero);
  color: var(--paper);
  max-width: 15ch;
  margin-bottom: 1.75rem;
  font-variation-settings: 'SOFT' 50, 'WONK' 1, 'opsz' 144;
}
.hero__title em {
  font-style: italic;
  font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 144;
}

.hero__sub {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.55;
  color: rgba(251, 248, 243, 0.88);
  max-width: 42ch;
  margin-bottom: 2.5rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero__meta {
  position: absolute;
  right: var(--pad-x);
  bottom: clamp(3.5rem, 8vw, 6.5rem);
  z-index: 1;
  text-align: right;
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(251, 248, 243, 0.72);
  line-height: 2;
}
@media (max-width: 1024px) { .hero__meta { display: none; } }

/* ───────────────────────────────────────────────
   8. STATEMENT
   ─────────────────────────────────────────────── */
.statement { display: grid; gap: clamp(2rem, 5vw, 5rem); }
@media (min-width: 900px) {
  .statement { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
}

.statement__body p + p { margin-top: 1.5rem; }
.statement__body p {
  font-size: clamp(1.2rem, 1.85vw, 1.6rem);
  line-height: 1.5;
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 40, 'WONK' 0, 'opsz' 40;
  font-weight: 300;
  letter-spacing: -0.012em;
  color: var(--ink);
  max-width: 34ch;
}
.statement__body .fine {
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: var(--measure);
  margin-top: 2rem;
}

/* ───────────────────────────────────────────────
   9. WORK GRID (editorial, true aspect ratios)
   ─────────────────────────────────────────────── */
.work__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.work__head h2 { max-width: 12ch; }

/* Justified rows. Each item's flex-grow is its aspect ratio and its basis is
   0, so widths come out proportional to the ratios — which means every image
   in a row resolves to the SAME height. Rows fill edge to edge with no dead
   space, and because the height falls out of the ratio nothing is cropped. */
.gallery {
  --gg: clamp(0.75rem, 1.6vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
.gallery__row {
  display: flex;
  gap: var(--gg);
  align-items: flex-start;
}
.gallery__row > .shot {
  flex-grow: var(--ar);
  flex-shrink: 1;
  flex-basis: 0;
  min-width: 0;
}

@media (max-width: 700px) {
  .gallery__row { flex-direction: column; gap: clamp(1.5rem, 4vw, 2rem); }
}

.shot { position: relative; margin: 0; }

/* No aspect-ratio is imposed — every frame renders at the photograph's
   own proportions, so nothing is cropped to fit the layout. */
.shot__frame {
  overflow: hidden;
  background: var(--paper-deep);
  cursor: zoom-in;
}
.shot__frame img {
  width: 100%;
  height: auto;
  transition: transform 0.8s var(--ease);
}
.shot__frame:hover img { transform: scale(1.035); }
.shot__frame:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.shot figcaption {
  margin-top: 0.9rem;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
}

.work__foot {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* ───────────────────────────────────────────────
   10. PLACES (location landing pages)
   ─────────────────────────────────────────────── */
.places__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: var(--measure); }

.places__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 800px) { .places__grid { grid-template-columns: repeat(3, 1fr); } }

.place { display: block; }
.place__img {
  overflow: hidden;
  aspect-ratio: 3 / 2; /* matches the source files — no crop */
  background: var(--paper-deep);
}
.place__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.place:hover .place__img img { transform: scale(1.05); }

.place__name {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 300;
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 40;
  margin-top: 1.25rem;
  line-height: 1.15;
  transition: color 0.25s;
}
.place:hover .place__name { color: var(--accent); }
.place__note {
  font-size: var(--t-sm);
  color: var(--stone);
  margin-top: 0.4rem;
}

/* ───────────────────────────────────────────────
   11. ABOUT
   ─────────────────────────────────────────────── */
.about { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) {
  .about { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}
.about__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.about__copy p { color: var(--ink-soft); max-width: var(--measure); }
.about__copy p + p { margin-top: 1.25rem; }
.about__name {
  font-size: var(--t-h2);
  margin-bottom: 1.5rem;
}
.about__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  margin-top: 2.5rem;
}

/* ───────────────────────────────────────────────
   12. INVESTMENT (typographic list, not cards)
   ─────────────────────────────────────────────── */
.invest__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.tier {
  display: grid;
  gap: 0.5rem 2.5rem;
  padding-block: clamp(2rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.tier:last-of-type { border-bottom: 1px solid var(--line); }

@media (min-width: 800px) {
  .tier { grid-template-columns: 1.4fr 0.7fr 2.2fr auto; }
}

.tier__name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  font-weight: 300;
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 60;
  line-height: 1.1;
}
.tier__price {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  font-weight: 300;
  font-variation-settings: 'opsz' 40;
  color: var(--accent);
}
.tier__desc { color: var(--ink-soft); font-size: var(--t-sm); max-width: 46ch; }
.tier__mark {
  display: inline-block;
  margin-left: 0.85rem;
  vertical-align: middle;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.tier .arrow { justify-self: start; white-space: nowrap; }

.invest__foot {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.invest__foot p { color: var(--ink-soft); font-size: var(--t-sm); max-width: 52ch; }

/* ───────────────────────────────────────────────
   13. TESTIMONIALS
   ─────────────────────────────────────────────── */
.quotes { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 900px) { .quotes { grid-template-columns: repeat(3, 1fr); } }

.quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  font-weight: 300;
  font-variation-settings: 'SOFT' 40, 'WONK' 0, 'opsz' 32;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.quote__stars {
  color: var(--accent);
  letter-spacing: 0.25em;
  font-size: 0.8rem;
  margin-bottom: 1.25rem;
}
.quote cite {
  display: block;
  margin-top: 1.5rem;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
}

/* ───────────────────────────────────────────────
   14. PROOF BAR
   ─────────────────────────────────────────────── */
.proof { border-block: 1px solid var(--line); }
.proof__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding-block: clamp(2rem, 4vw, 3rem);
}
/* Capped on BOTH axes so wide wordmarks and tall badges land at a
   similar optical weight instead of one dominating the row. */
.proof__inner img {
  max-height: 30px;
  max-width: 130px;
  height: auto;
  width: auto;
  object-fit: contain;
  opacity: 0.5;
  filter: grayscale(1);
  transition: opacity 0.3s;
}
.proof__inner img:hover { opacity: 0.85; }
.proof__ppa { display: flex; align-items: center; gap: 0.75rem; }
.proof__ppa img { max-height: 38px; max-width: 44px; }
.proof__ppa span {
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--stone);
  letter-spacing: 0.04em;
}

/* ───────────────────────────────────────────────
   15. FAQ
   ─────────────────────────────────────────────── */
.faq { display: grid; gap: clamp(2rem, 5vw, 5rem); }
@media (min-width: 900px) { .faq { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }

.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }

.faq__item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 1.6rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight: 400;
  font-variation-settings: 'SOFT' 40, 'WONK' 0, 'opsz' 32;
  line-height: 1.25;
  transition: color 0.25s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '+';
  font-family: var(--font-ui);
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform 0.3s var(--ease);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:hover { color: var(--accent); }

.faq__answer {
  padding-bottom: 1.75rem;
  color: var(--ink-soft);
  font-size: var(--t-sm);
  line-height: 1.7;
  max-width: 58ch;
}

/* ───────────────────────────────────────────────
   16. CONTACT
   ─────────────────────────────────────────────── */
.contact { background: var(--paper-warm); }
.contact__grid { display: grid; gap: clamp(2.5rem, 5vw, 5rem); }
@media (min-width: 900px) {
  .contact__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

.contact__aside h2 { margin-bottom: 1.5rem; }
.contact__aside .lead { margin-bottom: 2.5rem; }
.contact__detail {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  line-height: 1.9;
}
.contact__detail strong {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
  margin-top: 1.5rem;
}

.field { position: relative; margin-bottom: 1.25rem; }
.field input,
.field textarea {
  width: 100%;
  font-family: var(--font-ui);
  font-size: var(--t-body);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 1.6rem 0 0.7rem;
  transition: border-color 0.3s;
  resize: none;
}
.field textarea { min-height: 7rem; }
.field label {
  position: absolute;
  left: 0;
  top: 1.5rem;
  font-size: var(--t-body);
  color: var(--stone);
  pointer-events: none;
  transition: transform 0.28s var(--ease), font-size 0.28s var(--ease), color 0.28s;
  transform-origin: left top;
}
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--accent); }
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
  transform: translateY(-1.45rem);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.field-row { display: grid; gap: 1.25rem; }
@media (min-width: 600px) { .field-row { grid-template-columns: 1fr 1fr; } }

.form__submit { margin-top: 1.5rem; }
.form__note {
  margin-top: 1.25rem;
  font-size: var(--t-label);
  letter-spacing: 0.05em;
  color: var(--stone);
}

.form__done {
  display: none;
  border: 1px solid var(--accent);
  padding: 2rem;
  margin-top: 1.5rem;
}
.form__done.is-shown { display: block; }
.form__done p:first-child {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 300;
  margin-bottom: 0.5rem;
}
.form__done p:last-child { color: var(--ink-soft); font-size: var(--t-sm); }

/* ───────────────────────────────────────────────
   17. FOOTER
   ─────────────────────────────────────────────── */
.foot {
  background: var(--ink);
  color: rgba(251, 248, 243, 0.72);
  padding-block: clamp(3.5rem, 7vw, 6rem) calc(2.5rem + env(safe-area-inset-bottom, 0px));
}
.foot a { color: rgba(251, 248, 243, 0.72); transition: color 0.25s; }
.foot a:hover { color: var(--paper); }

.foot__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
@media (min-width: 780px) {
  .foot__grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; }
}

.foot__logo img { height: 40px; width: auto; margin-bottom: 1.5rem; }
.foot__blurb {
  font-size: var(--t-sm);
  line-height: 1.7;
  max-width: 32ch;
  color: rgba(251, 248, 243, 0.55);
}

.foot__title {
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(251, 248, 243, 0.4);
  margin-bottom: 1.5rem;
}
.foot__list { list-style: none; }
.foot__list li { margin-bottom: 0.75rem; font-size: var(--t-sm); }

.foot__email {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 300;
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 40;
  color: var(--paper) !important;
  border-bottom: 1px solid rgba(251, 248, 243, 0.3);
  padding-bottom: 3px;
}

.foot__bottom {
  border-top: 1px solid rgba(251, 248, 243, 0.13);
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(251, 248, 243, 0.4);
}

/* ───────────────────────────────────────────────
   18. LIGHTBOX
   ─────────────────────────────────────────────── */
.lb {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: rgba(24, 20, 16, 0.96);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 5vw, 4rem);
}
.lb.is-open { display: flex; }
.lb img {
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  object-fit: contain;
}
.lb__btn {
  position: absolute;
  color: rgba(251, 248, 243, 0.7);
  font-size: 2rem;
  line-height: 1;
  padding: 1rem;
  transition: color 0.25s;
}
.lb__btn:hover { color: var(--paper); }
.lb__close {
  top: calc(1rem + env(safe-area-inset-top, 0px));
  right: calc(1.5rem + env(safe-area-inset-right, 0px));
  font-size: 2.2rem;
}
.lb__prev { left: 0.5rem; top: 50%; transform: translateY(-50%); }
.lb__next { right: 0.5rem; top: 50%; transform: translateY(-50%); }
.lb__count {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  color: rgba(251, 248, 243, 0.5);
}

/* ───────────────────────────────────────────────
   19. REVEAL (the only motion that survived)
   ─────────────────────────────────────────────── */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

/* ───────────────────────────────────────────────
   20. INNER PAGE SCAFFOLD (shared, used from step 2)
   ─────────────────────────────────────────────── */
.page {
  padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

/* Top-level children of an inner page centre themselves on the same
   measure as .wrap, so every page shares one horizontal rhythm. */
.page-block {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.crumb {
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  padding-block: 2rem 0;
}
.crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.crumb li + li::before { content: '/'; margin-right: 0.6rem; color: var(--line); }
.crumb a:hover { color: var(--accent); }

.page__head { padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem); }
.page__title { font-size: clamp(2.4rem, 5.5vw, 4.5rem); max-width: 18ch; }
.page__head .lead { margin-top: 1.75rem; }

/* ───────────────────────────────────────────────
   21. PROSE — the long-read column
   Location pages and blog posts run on this. A named grid gives the
   text a fixed 68ch measure while letting figures and venue lists
   opt into a wider column, without moving anything in the DOM.
   ─────────────────────────────────────────────── */
.prose {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--pad-x), 1fr)
    [wide-start] minmax(0, 5rem)
    [text-start] minmax(0, 68ch) [text-end]
    minmax(0, 5rem) [wide-end]
    minmax(var(--pad-x), 1fr) [full-end];
}
.prose > * { grid-column: text; }
.prose > figure,
.prose > .prose__wide { grid-column: wide; }

.prose > * + * { margin-top: 1.5rem; }
.prose p { color: var(--ink-soft); line-height: 1.78; }
.prose strong { color: var(--ink); font-weight: 600; }
/* Inline links get the accent underline; card-style links inside the prose
   column (related posts) must not. */
.prose a:not(.btn):not(.arrow):not(.related__card) {
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
  transition: color 0.25s, border-color 0.25s;
}
.prose a:not(.btn):not(.arrow):not(.related__card):hover {
  color: var(--accent);
  border-color: var(--accent-deep);
}

.prose h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.prose h2 + * { margin-top: 1.25rem; }
.prose h3 { margin-top: 2.5rem; }
.prose h3 + * { margin-top: 0.85rem; }

.prose figure { margin-block: clamp(2.5rem, 5vw, 4rem); }
.prose figcaption {
  margin-top: 0.9rem;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
}

/* Opening paragraphs sit a step up in size */
.prose__intro p {
  font-size: var(--t-lead);
  line-height: 1.65;
  color: var(--ink);
}
.prose__intro p + p { margin-top: 1.35rem; }

/* ───────────────────────────────────────────────
   22. VENUES / CARDS / ADDONS — shared list blocks
   ─────────────────────────────────────────────── */
.venues { display: grid; gap: 0; }
.venue { border-top: 1px solid var(--line); padding-block: clamp(1.75rem, 3vw, 2.5rem); }
.venue:last-child { border-bottom: 1px solid var(--line); }
.venue h3 { margin-bottom: 0.75rem; }
.venue p { color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.75; }

.cards { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); } }
.card h3 { margin-bottom: 0.75rem; }
.card p { color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.75; }

.addons { display: grid; gap: 0; }
.addon {
  display: grid;
  gap: 0.35rem 2rem;
  padding-block: 1.4rem;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.addon:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 700px) { .addon { grid-template-columns: 1fr 2fr; } }
.addon__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 300;
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 32;
}
.addon__desc { color: var(--ink-soft); font-size: var(--t-sm); }

/* Feature list inside a .tier */
.tier__list { list-style: none; margin-top: 1rem; }
.tier__list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: var(--t-sm);
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}
.tier__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 1px;
  background: var(--accent);
}

/* ───────────────────────────────────────────────
   23. PULL QUOTE / SIGNATURE / CHIPS / RATING
   ─────────────────────────────────────────────── */
.pullquote { border-block: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 5rem); }
.pullquote p {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  font-weight: 300;
  font-variation-settings: 'SOFT' 50, 'WONK' 1, 'opsz' 72;
  font-style: italic;
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 26ch;
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
}

.signature { margin-top: 2.5rem; }
.signature img { height: 58px; width: auto; opacity: 0.75; }

.chips { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.chips a {
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--line);
  color: var(--ink);
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.chips a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.rating__score {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 6rem);
  font-weight: 300;
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 144;
  line-height: 1;
}
.rating__stars { color: var(--accent); letter-spacing: 0.3em; margin-top: 1rem; }
.rating__count {
  margin-top: 0.75rem;
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
}

/* ───────────────────────────────────────────────
   24. CLOSING CTA — every inner page ends on this
   Bordered rather than filled, so it reads the same whether it sits
   at page level or nested inside a .wrap / .prose column.
   ─────────────────────────────────────────────── */
.cta-band, .prose__cta {
  border-top: 1px solid var(--line);
  text-align: center;
}
.cta-band { margin-top: clamp(3rem, 6vw, 5rem); }
.prose__cta {
  grid-column: text;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
}

.cta-band h2, .prose__cta h2 { font-size: var(--t-h2); max-width: 20ch; margin-inline: auto; }
.cta-band p, .prose__cta p {
  color: var(--ink-soft);
  font-size: var(--t-lead);
  line-height: 1.6;
  max-width: 46ch;
  margin: 0 auto;
}
.cta-band .btn, .prose__cta .btn { margin-top: 2rem; }
.cta-band .chips, .prose__cta .chips { justify-content: center; margin-top: 2.5rem; }

.cta-lede {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 300;
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 60;
  line-height: 1.2;
  margin-bottom: 2rem;
  text-wrap: balance;
}

.note {
  margin-top: 1.75rem;
  font-size: var(--t-sm);
  color: var(--stone);
}

/* Centred heading used by the inner-page section blocks */
.h2-mark { font-size: var(--t-h2); margin-bottom: clamp(2rem, 4vw, 3rem); }

.label--center { text-align: center; }
.label--center::before { margin-inline: auto; }

/* Hero figure at the top of a location page. No bottom margin — the
   section that follows supplies the gap. */
.page__hero img { width: 100%; }

/* The packages page numbers each tier */
.tier__num {
  font-family: var(--font-ui);
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  color: var(--stone);
}

/* ───────────────────────────────────────────────
   25. JOURNAL (listing) + POST
   ─────────────────────────────────────────────── */
.journal { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 760px) { .journal { grid-template-columns: repeat(2, 1fr); } }

.jcard__img { overflow: hidden; aspect-ratio: 3 / 2; background: var(--paper-deep); }
.jcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.jcard:hover .jcard__img img { transform: scale(1.05); }
.jcard__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 300;
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 48;
  line-height: 1.15;
  margin-top: 1.25rem;
  transition: color 0.25s;
}
.jcard:hover .jcard__title { color: var(--accent); }
.jcard__excerpt { color: var(--ink-soft); font-size: var(--t-sm); margin-top: 0.85rem; max-width: 46ch; }

.tag {
  display: inline-block;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.jcard__read, .post__read {
  display: inline-block;
  margin-top: 1rem;
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
}

.post__head { padding-block: clamp(3rem, 7vw, 5rem) clamp(2rem, 4vw, 3rem); }
.post__title { font-size: clamp(2.2rem, 5vw, 4rem); max-width: 20ch; margin-top: 1.25rem; }
.post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  margin-top: 1.75rem;
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
}
.post__hero { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.post__hero img { width: 100%; }

.related { border-top: 1px solid var(--line); margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2.5rem, 5vw, 3.5rem); }
.related h2 { font-size: var(--t-h3); margin-top: 0; }
.related__grid { display: grid; gap: 1.5rem; margin-top: 1.75rem; }
@media (min-width: 620px) { .related__grid { grid-template-columns: repeat(2, 1fr); } }
.related__card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.related__card span {
  display: block;
  margin-top: 0.85rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 300;
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 32;
  line-height: 1.25;
  transition: color 0.25s;
}
.related__card:hover span { color: var(--accent); }

/* The inner pages wrap their logos in an extra div; without this it is a
   block child of the flex row and the logos stack vertically. */
.proof__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 4vw, 3.5rem);
}

/* A .prose child that groups a heading with its paragraphs. Direct-child
   spacing on .prose can't reach inside it, so restate it here. */
.prose__block > * + * { margin-top: 1.25rem; }
.prose__block > h2:first-child { margin-top: 0; }

.post { display: block; }
.jcard__body { display: block; }

/* Packages page: the same .tier rows as the homepage.
   Grouped into the same four cells — head | price | body | action — so one
   grid definition serves both pages. */
.tiers { display: grid; }
.tier__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.85rem; }
.tier__body { max-width: 46ch; }
.tier__body .tier__desc { max-width: none; }

/* Four-up gallery strip used on the location pages */
.quad { display: grid; gap: var(--gg, 1rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 800px) { .quad { grid-template-columns: repeat(4, 1fr); } }
.quad img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* ───────────────────────────────────────────────
   26. /links — the bio-link page
   Mobile-first: base rules are the phone layout, the media query only
   widens it. Standalone (no nav/footer) by convention, but built on the
   same tokens and type as every other page.
   ─────────────────────────────────────────────── */
.links-page {
  background: var(--paper-warm);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.links {
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
  padding: calc(clamp(2.5rem, 9vw, 4rem) + env(safe-area-inset-top, 0px))
           max(1.25rem, env(safe-area-inset-right, 0px))
           calc(clamp(2rem, 6vw, 3rem) + env(safe-area-inset-bottom, 0px))
           max(1.25rem, env(safe-area-inset-left, 0px));
  flex: 1;
}

.links__head { text-align: center; margin-bottom: clamp(2rem, 7vw, 2.75rem); }
/* Bare mark, no container. Height-driven with width:auto so it keeps its
   own 1.25:1 proportions and nothing is cropped. */
.links__avatar {
  display: block;
  width: auto;
  height: 58px;
  margin: 0 auto 1.5rem;
}
.links__name {
  font-size: clamp(1.9rem, 8vw, 2.5rem);
  font-variation-settings: 'SOFT' 50, 'WONK' 1, 'opsz' 72;
}
.links__tag {
  margin-top: 0.6rem;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
}
.links__blurb {
  margin-top: 1rem;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--ink-soft);
}

.links__list { display: flex; flex-direction: column; gap: 0.75rem; }

/* 68px tall — comfortably above the 44px minimum tap target */
.lnk {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 68px;
  padding: 0.9rem 1.15rem;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.lnk:hover, .lnk:focus-visible {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  transform: translateY(-2px);
}
.lnk:active { transform: none; }

.lnk--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}
.lnk--primary:hover, .lnk--primary:focus-visible { background: var(--ink); border-color: var(--ink); }

.lnk__icon { flex-shrink: 0; width: 22px; height: 22px; }
.lnk__icon svg { width: 100%; height: 100%; display: block; }

.lnk__text { flex: 1; min-width: 0; }
.lnk__title {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.lnk__sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--stone);
  transition: color 0.25s;
}
.lnk:hover .lnk__sub,
.lnk:focus-visible .lnk__sub { color: rgba(251, 248, 243, 0.7); }
.lnk--primary .lnk__sub { color: rgba(251, 248, 243, 0.75); }

.lnk__go { flex-shrink: 0; opacity: 0.45; font-size: 1rem; }

/* Compact icon row for the social profiles */
.links__social {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 2rem;
}
.links__social a {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.links__social a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.links__social svg { width: 19px; height: 19px; display: block; }

.links__foot {
  margin-top: 2.5rem;
  text-align: center;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
}
.links__foot a { border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.links__foot a:hover { color: var(--ink); border-color: var(--ink); }

@media (min-width: 480px) {
  .links { padding-inline: 0; }
  .lnk { padding-inline: 1.4rem; }
}

/* ───────────────────────────────────────────────
   27. GUIDES — the downloadable lead magnets
   Built on .prose so they inherit the same measure and rhythm.
   ─────────────────────────────────────────────── */
.guide__kicker {
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.guide__head { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.guide__title { font-size: clamp(2.2rem, 5.5vw, 4rem); max-width: 17ch; margin-top: 1.25rem; }
.guide__standfirst {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 52ch;
  margin-top: 1.5rem;
}
.guide__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }

/* Contents box */
.toc {
  border: 1px solid var(--line);
  padding: clamp(1.5rem, 3vw, 2rem);
  margin-block: clamp(2rem, 4vw, 3rem);
}
.toc h2 {
  font-size: var(--t-label) !important;
  font-family: var(--font-ui) !important;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 0 0 1rem !important;
}
.toc ol { list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; margin-bottom: 0.55rem; font-size: var(--t-sm); }
.toc li::before {
  content: counter(toc, decimal-leading-zero);
  margin-right: 0.85rem;
  color: var(--accent);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
}
.toc a { border: 0 !important; }
.toc a:hover { color: var(--accent); }

/* Data tables */
.gtable-wrap { overflow-x: auto; margin-block: 2rem; }
.gtable { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.gtable th, .gtable td {
  text-align: left;
  padding: 0.85rem 1rem 0.85rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.gtable th {
  font-family: var(--font-ui);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
  border-bottom-color: var(--ink);
  white-space: nowrap;
}
.gtable td:first-child { color: var(--ink); font-weight: 500; white-space: nowrap; }
.gtable td { color: var(--ink-soft); }

/* Run-of-day timeline */
.runsheet { margin-block: 2rem; }
.runsheet__row {
  display: grid;
  gap: 0.25rem 1.5rem;
  padding-block: 1rem;
  border-top: 1px solid var(--line);
}
.runsheet__row:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 620px) { .runsheet__row { grid-template-columns: 8.5rem 1fr; } }
.runsheet__time {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  font-variation-settings: 'opsz' 32;
  color: var(--accent);
  white-space: nowrap;
}
.runsheet__what { font-weight: 500; font-size: var(--t-sm); }
.runsheet__note { font-size: var(--t-sm); color: var(--ink-soft); }
@media (min-width: 620px) { .runsheet__note { grid-column: 2; } }

/* Checklist */
.checklist { list-style: none; margin-block: 1.5rem; }
.checklist li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.8rem;
  font-size: var(--t-sm);
  color: var(--ink-soft);
}
.checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 15px;
  height: 15px;
  border: 1px solid var(--stone);
}

/* Callout */
.callout {
  border-left: 2px solid var(--accent);
  padding: 0.25rem 0 0.25rem 1.5rem;
  margin-block: 2rem;
}
.callout p { font-size: var(--t-sm); line-height: 1.7; }
.callout strong {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

/* Email capture */
.optin {
  background: var(--paper-warm);
  border: 1px solid var(--line);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.optin h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 0.75rem !important; }
.optin > p { font-size: var(--t-sm); color: var(--ink-soft); max-width: 46ch; }
.optin form { margin-top: 1.5rem; }
.optin .field { margin-bottom: 1rem; }
.optin__row { display: grid; gap: 1rem; }
@media (min-width: 560px) { .optin__row { grid-template-columns: 1fr 1fr; } }
.optin__fine { margin-top: 1rem; font-size: 0.75rem; color: var(--stone); letter-spacing: 0.02em; }

/* ───────────────────────────────────────────────
   28. REDUCED MOTION & PRINT
   ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

@media print {
  @page { margin: 16mm 14mm; }

  .nav, .lb, .hero__actions, .foot,
  .guide__actions, .optin, .crumb, .cta-band, .prose__cta { display: none !important; }

  html, body { background: #fff !important; color: #000 !important; }
  .page, .guide__head { padding-top: 0 !important; }

  /* The prose grid collapses to a single full-width column on paper */
  .prose { display: block !important; max-width: none !important; }
  .prose > *, .prose > figure, .prose > .prose__wide { max-width: none !important; }

  a { color: #000 !important; border: 0 !important; text-decoration: none !important; }
  /* Spell out internal destinations, which are useless as bare text on paper */
  .prose a[href^="http"]::after {
    content: ' (' attr(href) ')';
    font-size: 0.75em;
    color: #555;
    word-break: break-all;
  }

  h1, h2, h3 { break-after: avoid; }
  .runsheet__row, .callout, .venue, .gtable tr, .checklist li { break-inside: avoid; }
  .gtable { font-size: 10pt; }
  .guide__title { font-size: 28pt; }

  .print-only { display: block !important; }
}

.print-only { display: none; }