/* ==========================================================================
   Optimize Consciousness — marketing site
   Design language is shared with the member portal (login.html / portal.html):
   ink ground, gold accent, Source Serif 4 display over Inter UI.
   ========================================================================== */

:root {
  /* Palette — same tokens as the portal, plus a few surfaces the longer
     marketing pages need (raised panels, deep footer, hairlines). */
  --ink: #161616;
  --ink-raised: #1B1A18;
  --ink-deep: #101010;
  --stone: #BFB9B4;
  --gold: #B69A6E;
  --gold-bright: #C9AE83;
  --gold-dim: rgba(182, 154, 110, 0.35);
  --gold-faint: rgba(182, 154, 110, 0.08);
  --text-on-dark: #F2F0EE;
  --text-muted: #9C9891;
  --line: rgba(242, 240, 238, 0.13);
  --line-soft: rgba(242, 240, 238, 0.07);

  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* One knob for the vertical rhythm of every section. */
  --section-y: clamp(72px, 9vw, 132px);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

  --header-h: 76px;
}

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

/* The browser hides [hidden] via its own stylesheet, and *any* author rule that
   sets display beats it — `.form { display: grid }` left the contact form on
   screen next to its own "Message sent" panel. !important is the point here:
   without it the next component that sets display reintroduces the bug. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  /* Anchor targets (/services#silent-mind) clear the sticky header. */
  scroll-padding-top: calc(var(--header-h) + 24px);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  min-height: 100%;
  background: var(--ink);
  color: var(--text-on-dark);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* A whisper of film grain over the whole page — keeps the large flat dark
   fields from banding and reads as depth rather than texture. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

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

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--gold);
  color: var(--ink);
  padding: 12px 20px;
  font-weight: 600;
  font-size: 14px;
}
.skip-link:focus { left: 12px; top: 12px; }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

h1 { font-size: clamp(36px, 5.4vw, 64px); }
h2 { font-size: clamp(28px, 3.6vw, 44px); }
h3 { font-size: clamp(21px, 2.2vw, 27px); line-height: 1.25; }
h4 { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.35; }

p { text-wrap: pretty; }
p + p { margin-top: 1.15em; }

strong, b { font-weight: 600; color: var(--text-on-dark); }
em { font-style: italic; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.lede {
  font-size: clamp(18px, 1.9vw, 21px);
  line-height: 1.62;
  color: var(--stone);
}

.muted { color: var(--text-muted); }
.serif { font-family: var(--font-serif); }
.center { text-align: center; }

/* Hairline rule with a gold pip — the recurring section punctuation. */
.rule {
  display: block;
  width: 100%;
  max-width: 220px;
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding-inline: clamp(20px, 5vw, 40px);
}
.container--narrow { max-width: 780px; }
.container--mid { max-width: 940px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(52px, 6vw, 84px); }
.section--raised { background: var(--ink-raised); }
.section--hairline { border-top: 1px solid var(--line-soft); }

.section-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head.center { margin-inline: auto; }
.section-head p { color: var(--text-muted); margin-top: 18px; }

/* --------------------------------------------------------------------------
   Scroll reveal
   The hiding rules are scoped to .js-reveal, which an inline script in <head>
   adds. Without JS (or with reduced motion) everything is simply visible.
   -------------------------------------------------------------------------- */

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.85s var(--ease-out),
    transform 0.85s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-reveal [data-reveal='fade'] { transform: none; }
.js-reveal [data-reveal='left'] { transform: translateX(-26px); }
.js-reveal [data-reveal='right'] { transform: translateX(26px); }
.js-reveal [data-reveal='scale'] { transform: scale(0.97); }

.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--gold);
  color: var(--ink);
  border: 1px solid var(--gold);
  border-radius: 2px;
  padding: 15px 30px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out),
    border-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.btn:hover { background: var(--gold-bright); border-color: var(--gold-bright); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.55; cursor: default; transform: none; }

.btn--ghost {
  background: transparent;
  color: var(--text-on-dark);
  border-color: var(--line);
}
.btn--ghost:hover {
  background: var(--gold-faint);
  border-color: var(--gold);
  color: var(--text-on-dark);
  transform: translateY(-2px);
}

.btn--sm { padding: 11px 22px; font-size: 14px; }

/* Understated text link with an arrow that steps forward on hover. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--gold);
  text-decoration: none;
  transition: color 0.2s ease;
}
.link-arrow .arrow { transition: transform 0.25s var(--ease-out); }
.link-arrow:hover { color: var(--gold-bright); }
.link-arrow:hover .arrow { transform: translateX(5px); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 34px;
}
.btn-row.center { justify-content: center; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.site-header.is-stuck { border-bottom-color: var(--line-soft); }

/* The blurred bar lives on a pseudo-element rather than on .site-header
   itself: a backdrop-filter makes an element the containing block for its
   fixed-position descendants, which would trap the mobile drawer (position:
   fixed; inset: 0) inside the 76px-tall header instead of covering the page. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(18, 18, 18, 0.82);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.site-header.is-stuck::before { opacity: 1; }

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-decoration: none;
  color: var(--text-on-dark);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.brand:hover { color: var(--gold); }

.nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }

.nav a {
  font-size: 14.5px;
  color: var(--stone);
  text-decoration: none;
  position: relative;
  padding-block: 4px;
  transition: color 0.2s ease;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
.nav a:hover { color: var(--text-on-dark); }
.nav a:hover::after,
.nav a[aria-current='page']::after { transform: scaleX(1); }
.nav a[aria-current='page'] { color: var(--text-on-dark); }

/* The CTA is an <a> too, so it needs to win against the .nav a rules above —
   otherwise it renders stone-on-gold instead of ink-on-gold, and grows a
   hover underline it shouldn't have. */
.nav a.btn { color: var(--ink); }
.nav a.btn:hover { color: var(--ink); }
.nav a.btn::after { display: none; }

/* Hamburger */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text-on-dark);
  position: relative;
  z-index: 60;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  margin: 0 auto;
  background: currentColor;
  transition: transform 0.3s var(--ease-out), opacity 0.2s ease;
}
.nav-toggle span + span { margin-top: 6px; }
.nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: block; }

  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    background: var(--ink);
    padding: 80px 24px max(24px, env(safe-area-inset-bottom));
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.35s var(--ease-out), visibility 0.3s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav a { font-size: 22px; font-family: var(--font-serif); color: var(--text-on-dark); }
  .nav a.btn {
    margin-top: 8px;
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--ink);
  }
}

body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* Subtract the sticky header so "min-height: 100%-ish" means the actual
     visible area, and keep the padding modest — the hero carries a lot of copy
     and the CTA should stay near the fold on a laptop. */
  min-height: min(calc(88vh - var(--header-h)), 760px);
  padding-block: clamp(48px, 6vw, 88px);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  opacity: 0.55;
  /* A slow settle as the page loads — the first hint that this page moves. */
  animation: hero-settle 2.4s var(--ease-out) both;
}
@keyframes hero-settle {
  from { transform: scale(1.06); opacity: 0; }
  to { transform: scale(1); opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__bg img { animation: none; }
}

/* Scrims: darken toward the edges, warm the centre, guarantee text contrast. */
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(182, 154, 110, 0.14), transparent 58%),
    linear-gradient(to bottom, rgba(22, 22, 22, 0.62) 0%, rgba(22, 22, 22, 0.5) 45%, var(--ink) 97%),
    linear-gradient(to right, rgba(22, 22, 22, 0.78), rgba(22, 22, 22, 0.28) 62%);
}

/* Where the portrait appears, take the brain down to near-solid ink behind it.
   Two photographs competing in the same corner reads as clutter, and the
   portrait needs a clean ground for its outline to register. */
@media (min-width: 1080px) {
  .hero__bg::after {
    background:
      radial-gradient(ellipse at 62% 40%, rgba(182, 154, 110, 0.14), transparent 58%),
      linear-gradient(to bottom, rgba(22, 22, 22, 0.62) 0%, rgba(22, 22, 22, 0.5) 45%, var(--ink) 97%),
      linear-gradient(to right,
        var(--ink) 0%,
        var(--ink) 24%,
        rgba(22, 22, 22, 0.88) 36%,
        rgba(22, 22, 22, 0.46) 58%,
        rgba(22, 22, 22, 0.28) 78%);
  }
}

.hero .container { position: relative; z-index: 2; }
.hero__inner { max-width: 780px; }

/* Two columns only when there's room for both. Below this the portrait is
   dropped entirely rather than shrunk — the copy needs the full measure, and a
   squeezed h1 costs more than the photo gains. */
.hero__portrait { display: none; }

@media (min-width: 1080px) {
  .hero__grid {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    align-items: center;
    gap: clamp(44px, 5vw, 76px);
  }
  /* Source order is copy-then-portrait so the headline is read first; the
     columns are assigned explicitly to put the portrait on the left. */
  .hero__inner { grid-column: 2; grid-row: 1; max-width: 760px; }
  /* The copy column is narrower than the full-width hero it replaces, so the
     display size has to come down with it — at the page-wide scale the headline
     breaks to four lines and pushes the CTA under the fold. */
  .hero__grid h1 { font-size: clamp(34px, 3.5vw, 54px); }
  .hero__portrait { display: block; grid-column: 1; grid-row: 1; position: relative; }

  .hero__portrait img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    border-radius: 3px;
    border: 1px solid var(--line);
  }
  /* The same offset outline the practitioner section uses, so the two portraits
     on this page read as one treatment. */
  .hero__portrait::before {
    content: '';
    position: absolute;
    inset: 20px -20px -20px 20px;
    border: 1px solid var(--gold-dim);
    border-radius: 3px;
    z-index: 0;
  }
}
.hero h1 { margin-bottom: 22px; }
.hero__sub {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.35;
  color: var(--gold);
  margin-bottom: 30px;
}
.hero__body { max-width: 640px; color: var(--stone); }
.hero__body p + p { margin-top: 1.1em; }

/* Page hero for interior pages — quieter, no photograph. */
.page-hero {
  position: relative;
  padding-block: clamp(64px, 8vw, 116px) clamp(40px, 5vw, 64px);
  background: radial-gradient(ellipse at 50% -20%, rgba(182, 154, 110, 0.12), transparent 62%);
}
.page-hero h1 { margin-bottom: 20px; }
.page-hero .lede { max-width: 660px; }

/* --------------------------------------------------------------------------
   Prose (about, legal)
   -------------------------------------------------------------------------- */

.prose { font-size: 17.5px; line-height: 1.78; color: var(--stone); }
.prose > * + * { margin-top: 1.3em; }
.prose h2 { color: var(--text-on-dark); margin-top: 1.9em; }
.prose h3 { color: var(--text-on-dark); margin-top: 1.7em; }
.prose h4 { color: var(--text-on-dark); margin-top: 1.5em; font-family: var(--font-sans); font-weight: 600; font-size: 17px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.5em; }
.prose a { color: var(--gold); text-underline-offset: 3px; }
.prose a:hover { color: var(--gold-bright); }
.prose hr { border: 0; border-top: 1px solid var(--line-soft); margin-block: 2.4em; }

.prose--legal { font-size: 15.5px; line-height: 1.72; color: var(--text-muted); }
.prose--legal h2 { font-size: clamp(22px, 2.4vw, 28px); }
.prose--legal h3 { font-size: 19px; }
.prose--legal strong { color: var(--stone); }

/* The closing signature on the about page. */
.signature {
  font-family: var(--font-serif);
  font-size: 21px;
  color: var(--gold);
  margin-top: 1.6em;
}

/* --------------------------------------------------------------------------
   Two-column feature block
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.split--portrait { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
@media (max-width: 860px) {
  .split, .split--portrait { grid-template-columns: 1fr; }
}

.framed {
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.framed img { width: 100%; }
/* Warm the photographs so they sit in the same light as the palette. */
.framed--warm img { filter: saturate(0.88) contrast(1.02); }

/* --------------------------------------------------------------------------
   Modality band — the woman photograph as a full-section background, with all
   the copy on the left over the empty space and her on the right, the way the
   original site had it. The left of the photo is soft/empty, so a gradient
   fades it into the ink: the section reads as one dark ground that reveals her
   on the right, keeping light text and gold legible rather than reproducing
   the original's light look.
   -------------------------------------------------------------------------- */
.modality {
  position: relative;
  overflow: hidden;
  background: var(--ink-raised);
}
/* Padding lives on the container (not the section) so the background fills the
   band edge to edge, under the copy. */
.modality > .container {
  position: relative;
  z-index: 1;
  padding-block: var(--section-y);
}

.modality__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.modality__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 82% 26%; /* hold her (upper-right) in frame as the band scales */
}
.modality__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* darken the left for the copy, fade out to reveal her on the right */
    linear-gradient(100deg,
      var(--ink-raised) 0%,
      var(--ink-raised) 32%,
      rgba(27, 26, 24, 0.86) 48%,
      rgba(27, 26, 24, 0.45) 63%,
      rgba(27, 26, 24, 0.12) 79%,
      transparent 93%),
    /* melt the top and bottom edges into the surrounding ink */
    linear-gradient(to bottom, var(--ink-raised), transparent 14%, transparent 86%, var(--ink-raised));
}

.modality__content { max-width: min(64%, 720px); }
.modality__content .lede { max-width: 560px; }
.modality__challenges { margin-top: clamp(40px, 5vw, 68px); }

@media (max-width: 860px) {
  /* The photo becomes a banner at the top (she stays visible); the copy stacks
     below on the solid ink ground, legible under all the challenge lists. */
  .modality__bg {
    position: relative;
    height: auto;
    aspect-ratio: 3 / 2;
  }
  .modality__bg img { object-position: 78% 24%; }
  .modality__bg::after {
    background: linear-gradient(to bottom, transparent 42%, rgba(27, 26, 24, 0.55) 72%, var(--ink-raised));
  }
  .modality > .container { padding-top: clamp(32px, 7vw, 52px); }
  .modality__content { max-width: none; }
}

/* --------------------------------------------------------------------------
   Challenge columns ("Resolve these challenges in your life")
   -------------------------------------------------------------------------- */

.challenges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(24px, 3vw, 40px);
  margin-top: 44px;
}
.challenge-col {
  border-top: 1px solid var(--gold-dim);
  padding-top: 22px;
}
.challenge-col h4 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.challenge-col ul { list-style: none; }
.challenge-col li {
  font-size: 15.5px;
  color: var(--stone);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}
.challenge-col li + li { margin-top: 11px; }
.challenge-col li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.63em;
  width: 5px;
  height: 1px;
  background: var(--gold);
}

/* --------------------------------------------------------------------------
   Video
   -------------------------------------------------------------------------- */

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  background: var(--ink-deep);
}
.video-frame img,
.video-frame iframe,
.video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

/* The injected HLS/MP4 player: contain (never crop the frame or the controls)
   on a black ground, so any aspect mismatch letterboxes cleanly. */
.video-frame video.video-embed {
  object-fit: contain;
  background: #000;
}

/* Click-to-load facade: we ship a poster + play button and only insert the
   third-party player iframe once someone actually asks for it. */
.video-facade { position: absolute; inset: 0; cursor: pointer; }
.video-facade__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(16, 16, 16, 0.68), rgba(16, 16, 16, 0.18));
  transition: background 0.35s ease;
}
.video-facade:hover .video-facade__scrim { background: linear-gradient(to top, rgba(16, 16, 16, 0.5), rgba(16, 16, 16, 0.08)); }

.video-facade__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(62px, 8vw, 84px);
  aspect-ratio: 1;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: rgba(22, 22, 22, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  color: var(--gold);
  transition: transform 0.35s var(--ease-out), background 0.3s ease;
}
.video-facade:hover .video-facade__play {
  transform: translate(-50%, -50%) scale(1.07);
  background: rgba(182, 154, 110, 0.2);
}
/* No optical nudge here — the icon carries its own centring (see the path in
   home.html). The margin-left this replaces resolved against the button, not
   the icon, so "12%" shifted the triangle ~5px rather than the ~2px intended. */
.video-facade__play svg { width: 26%; fill: currentColor; }

.video-facade__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
}

/* Until a video URL is configured (SESSION_VIDEO_URL), data-video is empty:
   hide the play affordance and explain the placeholder instead of offering a
   button that would do nothing. */
.video-pending { display: none; }

.video-facade[data-video=''] { cursor: default; }
.video-facade[data-video=''] .video-facade__play,
.video-facade[data-video=''] .video-facade__label { display: none; }
.video-facade[data-video=''] .video-pending {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  /* Opaque enough that the poster's own titling doesn't compete with the note. */
  background: rgba(14, 14, 14, 0.9);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.video-pending > div {
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  padding: 22px 26px;
  background: rgba(22, 22, 22, 0.6);
  max-width: 420px;
}
.video-pending p { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.video-pending .eyebrow { margin-bottom: 10px; }

.video-note {
  margin-top: 26px;
  font-size: 15px;
  color: var(--text-muted);
  max-width: 720px;
}
.video-note strong { color: var(--stone); font-weight: 500; }

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}

.quote {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(242, 240, 238, 0.02);
  padding: clamp(30px, 3.4vw, 42px) clamp(26px, 3vw, 34px) 30px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.35s ease, background 0.35s ease, transform 0.35s var(--ease-out);
}
.quote:hover {
  border-color: var(--gold-dim);
  background: rgba(182, 154, 110, 0.045);
  transform: translateY(-3px);
}
.quote::before {
  content: '\201C';
  position: absolute;
  top: 6px;
  left: 20px;
  font-family: var(--font-serif);
  font-size: 84px;
  line-height: 1;
  color: var(--gold);
  opacity: 0.22;
  pointer-events: none;
}
.quote blockquote {
  position: relative;
  font-family: var(--font-serif);
  font-size: clamp(17.5px, 1.7vw, 19.5px);
  line-height: 1.55;
  color: var(--text-on-dark);
  flex: 1;
}
.quote figcaption {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   Practitioner band — proof, then the person behind it. Its own treatment
   (offset-framed portrait, warm side-lit ground) so it reads as a feature
   rather than another alternating panel.
   -------------------------------------------------------------------------- */
.practitioner {
  background:
    radial-gradient(ellipse at 14% 50%, rgba(182, 154, 110, 0.11), transparent 56%),
    var(--ink-raised);
  border-block: 1px solid var(--line-soft);
}
.practitioner__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
@media (max-width: 780px) {
  .practitioner__grid { grid-template-columns: 1fr; gap: 34px; }
}

/* Portrait with an offset gold outline behind it — gallery framing that reads
   as considered rather than corporate-headshot. */
.practitioner__portrait {
  position: relative;
  width: 100%;
  max-width: 340px;
}
.practitioner__portrait img {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: 3px;
  border: 1px solid var(--line);
  filter: saturate(0.9) contrast(1.02);
}
.practitioner__portrait::before {
  content: '';
  position: absolute;
  inset: 18px -18px -18px 18px; /* nudged down-right, peeking out behind */
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  z-index: 0;
}
@media (max-width: 480px) {
  /* Keep the offset frame from reaching into the page edge on small screens. */
  .practitioner__portrait::before { inset: 12px -12px -12px 12px; }
}

.practitioner__body h2 { margin: 8px 0 20px; }
.practitioner__body p { color: var(--stone); font-size: 16.5px; }
.practitioner__body p + p { margin-top: 1.05em; }

/* --------------------------------------------------------------------------
   Offerings
   -------------------------------------------------------------------------- */

/* Compact grid — used on the home page as a preview of the services. */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(16px, 2vw, 22px);
}

.offer-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  background: rgba(242, 240, 238, 0.02);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.35s ease, transform 0.35s var(--ease-out), background 0.35s ease;
}
.offer-card:hover {
  border-color: var(--gold-dim);
  background: rgba(182, 154, 110, 0.05);
  transform: translateY(-4px);
}
.offer-card__media { aspect-ratio: 16 / 10; overflow: hidden; position: relative; }
.offer-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bright and colourful, holding back just a little for the hover lift. */
  filter: saturate(1.1) brightness(0.9);
  transition: transform 0.7s var(--ease-out), filter 0.5s ease;
}
.offer-card:hover .offer-card__media img { transform: scale(1.05); filter: none; } /* 100% bright */
/* A light seat under the image that fades away on hover, so the hovered card
   reads fully bright. */
.offer-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(22, 22, 22, 0.3), transparent 52%);
  transition: opacity 0.5s ease;
}
.offer-card:hover .offer-card__media::after { opacity: 0; }

.offer-card__body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.offer-card__price {
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.offer-card h3 { margin-bottom: 12px; }
.offer-card p { font-size: 15.5px; color: var(--text-muted); line-height: 1.6; flex: 1; }
.offer-card .link-arrow { margin-top: 22px; }

/* Full detail rows — used on the services page. Image and text sit in two
   separate columns: the image is ~half the width, top-aligned and full
   brightness, and the columns alternate sides down the page. Longer entries
   just run taller on the text side, leaving the image at the top of its
   column. */
.offer-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(30px, 4.5vw, 60px);
  row-gap: 0; /* the wide gap is for the two columns only, not between stacked rows */
  align-items: start;
  padding-block: clamp(46px, 5.5vw, 76px);
  border-top: 1px solid var(--line-soft);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
/* Image side (the aside — image + promise + button) and the description each
   take a column, even rows mirrored. Both placed with explicit columns (not
   auto-placement) so the taller aside can't shove the body into a second row. */
.offer-detail__aside { grid-column: 1; grid-row: 1; }
.offer-detail__body { grid-column: 2; grid-row: 1; }
.offer-detail:nth-child(even) .offer-detail__aside { grid-column: 2; }
.offer-detail:nth-child(even) .offer-detail__body { grid-column: 1; }

.offer-detail__media {
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 3 / 2;
}
.offer-detail__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* full brightness, full colour — no dimming filter */
}

/* Line the image top up with the heading rather than the price pill above it.
   53px is the price block's height (one line, +padding/border/margin) — stable
   because the price is always a single line at these two-column widths. Desktop
   only: on mobile the image stacks on top of the text. */
@media (min-width: 861px) {
  .offer-detail__media { margin-top: 53px; }
}

@media (max-width: 860px) {
  .offer-detail { grid-template-columns: 1fr; gap: 26px; }
  .offer-detail__aside,
  .offer-detail__body { grid-column: auto; grid-row: auto; }
  /* Dissolve the aside so everything stacks in one column, in the same reading
     order as the desktop columns: image, its promise, then the description with
     the button at its end. */
  .offer-detail__aside { display: contents; }
  .offer-detail__aside .offer-detail__media { order: 1; }
  .offer-detail__aside .offer-detail__promise { order: 2; margin-top: 0; }
  .offer-detail__body { order: 3; }
}

.offer-detail__price {
  display: inline-block;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  border-radius: 100px;
  padding: 5px 14px;
  margin-bottom: 20px;
}
.offer-detail h2 { margin-bottom: 20px; }
.offer-detail p { color: var(--stone); font-size: 16.5px; }
.offer-detail ul { margin-top: 1.1em; padding-left: 1.15em; color: var(--stone); font-size: 16px; }
.offer-detail li + li { margin-top: 0.6em; }

/* "unlimited sessions until the result is achieved" — the repeated promise,
   nestled under the image (margin-top is the small gap below it). */
.offer-detail__promise {
  margin-top: 18px;
  padding: 14px 18px;
  border-left: 1px solid var(--gold);
  background: var(--gold-faint);
  font-size: 14.5px;
  color: var(--stone);
}

/* Healing's worked examples span the whole row and flow into two columns; its
   button sits full-width below them. */
.offer-detail > .examples,
#healing > .btn-row { grid-column: 1 / -1; }
#healing > .btn-row { margin-top: 14px; } /* hug the examples above */

/* Every other item: the promise nestles under the image at image width (in the
   aside), while the Inquire button sits at the bottom of the description
   column instead. */
.offer-detail__body .btn-row { margin-top: 30px; }

.examples { margin-top: 20px; }
@media (min-width: 861px) {
  /* Match the grid column-gap so the left example column's right edge lines up
     with the image's right edge — the examples sit in the same two columns. */
  .examples { columns: 2; column-gap: clamp(30px, 4.5vw, 60px); }
}
.example {
  break-inside: avoid;           /* keep each box intact across the column break */
  margin-bottom: 14px;           /* replaces the old grid gap */
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  padding: 18px 20px;
  background: rgba(242, 240, 238, 0.015);
  font-size: 15.5px;
  line-height: 1.6;
}
.example__before { color: var(--stone); }
.example__after {
  display: block;
  margin-top: 8px;
  color: var(--gold);
  font-size: 14.5px;
}
.example__after::before {
  content: '→';
  margin-right: 8px;
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   FAQ accordion
   -------------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--line-soft); }

.faq-item { border-bottom: 1px solid var(--line-soft); }

.faq-item__trigger {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  padding: 24px 4px;
  color: var(--text-on-dark);
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 500;
  line-height: 1.4;
  transition: color 0.25s ease;
}
.faq-item__trigger:hover { color: var(--gold); }
.faq-item__trigger[aria-expanded='true'] { color: var(--gold); }

/* Plus that rotates into a minus. */
.faq-item__icon {
  position: relative;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 6px;
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform 0.35s var(--ease-out), opacity 0.25s ease;
}
.faq-item__icon::before { top: 7px; left: 0; width: 15px; height: 1px; }
.faq-item__icon::after { left: 7px; top: 0; width: 1px; height: 15px; }
.faq-item__trigger[aria-expanded='true'] .faq-item__icon::after { transform: rotate(90deg); opacity: 0; }

.faq-item__panel {
  overflow: hidden;
  height: 0;
  transition: height 0.4s var(--ease-out);
}
.faq-item__inner {
  padding: 0 44px 28px 4px;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.72;
  max-width: 760px;
}
.faq-item__inner p + p { margin-top: 1em; }

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

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form { display: grid; gap: 20px; max-width: 620px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }

.field { display: grid; gap: 8px; }
.field > label {
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field .req { color: var(--gold); }

.field input,
.field textarea,
.field select {
  width: 100%;
  background: rgba(242, 240, 238, 0.025);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 13px 15px;
  color: var(--text-on-dark);
  font-family: inherit;
  font-size: 15.5px;
  outline: none;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.field input:focus,
.field textarea:focus,
.field select:focus { border-color: var(--gold); background: rgba(242, 240, 238, 0.04); }
.field input::placeholder, .field textarea::placeholder { color: #6E6A65; }

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B69A6E' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
  cursor: pointer;
}
.field select option { background: var(--ink-raised); color: var(--text-on-dark); }

/* Checkbox with a gold tick drawn in CSS. */
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 15px;
  color: var(--stone);
  line-height: 1.5;
}
.checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.checkbox .box {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1px solid var(--line);
  border-radius: 2px;
  position: relative;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.checkbox:hover .box { border-color: var(--gold-dim); }
.checkbox input:checked + .box { background: var(--gold); border-color: var(--gold); }
.checkbox input:checked + .box::after {
  content: '';
  position: absolute;
  left: 5.5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checkbox input:focus-visible + .box { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Honeypot — off-screen, never shown to a person. */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form__msg { min-height: 20px; font-size: 14px; color: #E7B4A6; }
.form__msg.ok { color: var(--gold); }

/* Success panel swapped in after the contact form posts. */
.form-sent {
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  background: var(--gold-faint);
  padding: 34px 32px;
  max-width: 620px;
}
.form-sent .check {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--gold-dim);
  display: grid;
  place-items: center;
  color: var(--gold);
  font-size: 20px;
  margin-bottom: 18px;
}
.form-sent h3 { margin-bottom: 10px; }
.form-sent p { color: var(--text-muted); font-size: 15.5px; }

/* --------------------------------------------------------------------------
   Side notes (contact page)
   -------------------------------------------------------------------------- */

.booking-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(20px, 3vw, 36px);
  margin-top: 44px;
}
.booking-point { border-top: 1px solid var(--gold-dim); padding-top: 20px; }
.booking-point h4 { font-size: 17px; margin-bottom: 8px; }
.booking-point p { font-size: 15px; color: var(--text-muted); line-height: 1.6; }

/* --------------------------------------------------------------------------
   Closing CTA band
   -------------------------------------------------------------------------- */

.cta-band {
  position: relative;
  text-align: center;
  padding-block: clamp(72px, 8vw, 116px);
  background:
    radial-gradient(ellipse at 50% 120%, rgba(182, 154, 110, 0.16), transparent 62%),
    var(--ink-raised);
  border-top: 1px solid var(--line-soft);
}
.cta-band h2 { margin-bottom: 16px; }
.cta-band p { color: var(--stone); max-width: 560px; margin-inline: auto; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--ink-deep);
  border-top: 1px solid var(--line-soft);
  padding-block: clamp(56px, 6vw, 80px) 40px;
  font-size: 14.5px;
  color: var(--text-muted);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: clamp(32px, 5vw, 64px);
  padding-bottom: 44px;
  border-bottom: 1px solid var(--line-soft);
}
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr; gap: 38px; } }

.footer-brand {
  font-family: var(--font-serif);
  font-size: 21px;
  color: var(--text-on-dark);
  margin-bottom: 14px;
  display: inline-block;
  text-decoration: none;
}
.footer-address { font-style: normal; line-height: 1.7; font-size: 14px; }

.footer-col h4 {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; }
.footer-col li + li { margin-top: 10px; }
.footer-col a { text-decoration: none; transition: color 0.2s ease; }
.footer-col a:hover { color: var(--text-on-dark); }

.socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.socials a {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--stone);
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s var(--ease-out);
}
.socials a:hover { color: var(--gold); border-color: var(--gold-dim); transform: translateY(-2px); }
/* No fill/stroke here: each icon declares its own (some are outlined, some
   solid) and a CSS fill would beat those presentation attributes, filling the
   outlined ones into solid blocks. */
.socials svg { width: 16px; height: 16px; }

.newsletter { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.newsletter input {
  flex: 1 1 190px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 12px 14px;
  color: var(--text-on-dark);
  font-family: inherit;
  font-size: 14.5px;
  outline: none;
  transition: border-color 0.25s ease;
}
.newsletter input:focus { border-color: var(--gold); }
.newsletter input::placeholder { color: #6E6A65; }
.newsletter__msg { flex-basis: 100%; font-size: 13px; min-height: 16px; color: var(--gold); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  justify-content: space-between;
  align-items: center;
  padding-top: 26px;
  font-size: 13px;
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-bottom a { text-decoration: none; transition: color 0.2s ease; }
.footer-bottom a:hover { color: var(--stone); }

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.stack-sm > * + * { margin-top: 10px; }
.mt-0 { margin-top: 0; }

/* --------------------------------------------------------------------------
   Blog — index cards and the article itself.
   Cards reuse the .offer-card shape so the two grids on the site read as one
   family; the article is .prose with a wider measure than the legal pages.
   -------------------------------------------------------------------------- */

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(22px, 3vw, 34px);
  padding-bottom: var(--section-y);
}

.post-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: var(--ink-raised);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s var(--ease-out);
}
.post-card:hover {
  border-color: var(--gold-dim);
  background: rgba(182, 154, 110, 0.05);
  transform: translateY(-2px);
}

.post-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92);
  transition: transform 0.6s var(--ease-out);
}
.post-card:hover .post-card__media img { transform: scale(1.03); }

.post-card__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 26px; }
.post-card__date {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.post-card__body h2 { font-size: 21px; line-height: 1.3; color: var(--text-on-dark); }
.post-card:hover .post-card__body h2 { color: var(--gold-bright); }
.post-card__body p { font-size: 15px; line-height: 1.6; color: var(--stone); }
.post-card__body .link-arrow { margin-top: 6px; font-size: 14px; }

/* ---- article ---- */
.post { padding-block: clamp(48px, 6vw, 84px) 0; }
.post__head { max-width: 760px; }
.post__back {
  display: inline-flex;
  font-size: 13px;
  margin-bottom: 26px;
}
.post__back .arrow { margin-right: 8px; }
.post h1 { font-size: clamp(30px, 4.2vw, 50px); margin-bottom: 18px; }
.post__meta {
  display: flex;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.post__media {
  margin: clamp(32px, 4vw, 52px) 0;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.post__media img { display: block; width: 100%; height: auto; }

.post__body { max-width: 720px; margin: 0 auto; }
.post__body > * + * { margin-top: 1.35em; }
.post__body h2 { font-size: clamp(22px, 2.6vw, 30px); margin-top: 1.9em; }
.post__body h3 { font-size: clamp(19px, 2vw, 23px); margin-top: 1.6em; }
.post__body figure { margin: 2em 0; }
.post__body figure img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  border: 1px solid var(--line);
}
.post__body a { color: var(--gold); text-underline-offset: 3px; }
.post__body a:hover { color: var(--gold-bright); }

.post__foot {
  max-width: 720px;
  margin: clamp(48px, 6vw, 76px) auto 0;
  padding-bottom: var(--section-y);
}
.post__byline {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.post__byline img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--gold-dim);
}
.post__byline-name { font-family: var(--font-serif); font-size: 16.5px; color: var(--text-on-dark); }
.post__byline-role {
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.post__adjacent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 34px;
}
.post__adj {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 4px;
  text-decoration: none;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.post__adj:hover { border-color: var(--gold-dim); background: rgba(182, 154, 110, 0.05); }
.post__adj-label {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.post__adj-title { font-family: var(--font-serif); font-size: 16px; color: var(--text-on-dark); line-height: 1.35; }
.post__adj:hover .post__adj-title { color: var(--gold-bright); }