/* ─────────────────────────────────────────────────────────────────
   ARKSTONE — editorial-clinical aesthetic
   First of the rewritten condition-family pages (IBS).
   Self-contained: does not inherit base.css variables — we want
   typography, color, and rhythm to come from a clean slate so the
   visual language stays sharp against the legacy site.
   ───────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..900,0..100,0..1;1,9..144,300..900,0..100,0..1&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');

:root {
  /* off-white-cream canvas — fresher than vellum, still warm.
     Iter-2 patron note: the previous #f7f1e6 read as "yellowed manuscript"
     and dampened action affordance. The lighter canvas restores actionability
     without breaking the editorial-clinical lane; the oxblood pops harder
     against it. */
  --paper: #fbf9f5;
  --paper-deep: #ece6d8;     /* footer, deep companion against new canvas */
  --paper-soft: #f4f0e6;     /* sidebar / callout backgrounds — calmer warmth */

  /* ink — near-black with warmth, never #000.
     Slightly deeper than before to maintain contrast against the lighter canvas. */
  --ink: #15110d;
  --ink-soft: #2e2a24;
  --ink-mute: #685f54;
  --ink-faint: #9b9181;

  /* single accent — deep oxblood. Editorially distinct.
     Not wellness terracotta. Not sage. Not SaaS blue. */
  --oxblood: #732722;
  --oxblood-deep: #5b1d1a;
  --oxblood-faint: rgba(115, 39, 34, 0.15);

  /* hairlines and rules */
  --hair: rgba(21, 17, 13, 0.16);
  --hair-soft: rgba(21, 17, 13, 0.08);

  /* type scale */
  --display-xl: clamp(2.6rem, 5.4vw, 4.4rem);  /* hero H1 — punchy, validating */
  --display-sub: clamp(1.7rem, 3.4vw, 2.7rem); /* hero sub-H1 — display register, ~65% of H1 */
  --display-l:  clamp(2rem, 3.8vw, 2.85rem);   /* section heads */
  --display-m:  clamp(1.5rem, 2.2vw, 1.85rem); /* sub-section */
  --display-s:  clamp(1.18rem, 1.4vw, 1.32rem);

  --body: 1.125rem; /* 18px */
  --body-lh: 1.62;
  --measure: 36rem; /* ~ 65 char @ 18px serif */

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --header-h: 4.6rem;
}

/* ─────────────────────────────────────────────────────────────────
   Reset (page-scoped — does not touch other pages)
   We rely on /css/reset.css from the base template, but we layer
   tighter resets for the page-scoped namespace.
   ───────────────────────────────────────────────────────────────── */

.arkstone {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Source Serif 4', 'Iowan Old Style', 'Hoefler Text', Georgia, serif;
  font-size: var(--body);
  line-height: var(--body-lh);
  font-weight: 380;
  font-variation-settings: 'opsz' 18;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Page-scoped reset: cancel base.css * { font-family/weight/size } leak.
   The legacy stylesheet sets * { font-size: 18px; font-weight: 300 }
   which would otherwise sink every <em>, <strong>, and <span> in the
   page back to body size. Explicit `font-size: inherit` hands sizing
   back to the cascade so headline italics scale with their parent. */
.arkstone,
.arkstone *,
.arkstone *::before,
.arkstone *::after {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  box-sizing: border-box;
}

.arkstone a {
  color: var(--oxblood);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--oxblood-faint);
  transition: color 180ms ease, text-decoration-color 180ms ease;
}
.arkstone a:hover {
  color: var(--oxblood-deep);
  text-decoration-color: var(--oxblood);
}

.arkstone strong {
  font-weight: 600;
  color: var(--ink);
}

.arkstone em {
  font-style: italic;
}

.arkstone ::selection {
  background: var(--oxblood);
  color: var(--paper);
}

/* Page-level chrome: paper background flushes to viewport edges and
   under the sticky header. We let the wrapper drive page color. */
html:has(.arkstone-page),
body:has(.arkstone-page) {
  background: var(--paper);
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────────
   Header — logo + Discovery Call only.
   Optional secondary link: Christian Hypnotherapy Guide.
   The seven-link site nav is bricked up for this page.
   ───────────────────────────────────────────────────────────────── */

/* Header — quiet at hero, lifts to higher action affordance once the visitor
   scrolls past the hero. The .is-scrolled state is toggled by the inline JS
   sentinel; honour prefers-reduced-motion by transitioning instantly. */
.ark-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: rgba(251, 249, 245, 0.86);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--hair-soft);
  transition: background 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}
.ark-header.is-scrolled {
  background: rgba(251, 249, 245, 0.96);
  border-bottom-color: var(--hair);
  box-shadow: 0 1px 0 0 var(--hair-soft), 0 8px 24px -16px rgba(21, 17, 13, 0.18);
}
@media (prefers-reduced-motion: reduce) {
  .ark-header { transition: none; }
}
.ark-header__inner {
  max-width: 78rem;
  margin: 0 auto;
  height: 100%;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.ark-header__brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 36, 'SOFT' 30;
  font-weight: 420;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
  line-height: 1;
}
.ark-header__brand:hover { color: var(--oxblood); text-decoration: none; }
.ark-header__brand img { height: 28px; width: auto; }
.ark-header__nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.ark-header__nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 14;
  font-size: 0.84rem;
  font-weight: 480;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 180ms ease;
}
.ark-header__nav a.ark-header__cta {
  color: var(--paper);
  background: var(--oxblood);
  padding: 0.55rem 1rem;
  letter-spacing: 0.08em;
  border: 1px solid var(--oxblood);
  transition: background 180ms ease, color 180ms ease, padding 240ms ease, box-shadow 240ms ease;
}
.ark-header__nav a.ark-header__cta:hover {
  background: var(--oxblood-deep);
  color: var(--paper);
  text-decoration: none;
}
.ark-header__nav a:not(.ark-header__cta):hover { color: var(--oxblood); }

/* Sticky-header lift state.
   Once the visitor passes the hero, the header CTA gains a touch more presence:
   slightly heavier padding, a subtle drop-glow under the plate. The non-CTA link
   keeps its quiet text-link register so the hierarchy stays clear (CTA wins). */
.ark-header.is-scrolled .ark-header__nav a.ark-header__cta {
  padding: 0.62rem 1.15rem;
  box-shadow: 0 1px 0 0 var(--oxblood-deep), 0 6px 14px -6px rgba(115, 39, 34, 0.42);
}
@media (prefers-reduced-motion: reduce) {
  .ark-header__nav a.ark-header__cta { transition: none; }
}

@media (max-width: 640px) {
  .ark-header__nav a:not(.ark-header__cta) { display: none; }
  .ark-header__brand { font-size: 0.92rem; }
  .ark-header__nav a.ark-header__cta { padding: 0.5rem 0.85rem; font-size: 0.78rem; letter-spacing: 0.04em; }
  .ark-header.is-scrolled .ark-header__nav a.ark-header__cta { padding: 0.55rem 0.95rem; }
}
@media (max-width: 380px) {
  .ark-header__brand span { display: none; }
}

/* ─────────────────────────────────────────────────────────────────
   Layout — single-column reading flow with optional sidebar gallery.
   ───────────────────────────────────────────────────────────────── */

.ark-page {
  width: 100%;
}

/* General article container — single column, generous margins */
.ark-section {
  max-width: 78rem;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6.5rem) var(--gutter);
}

.ark-section--narrow {
  max-width: 48rem;
}

/* Reading column — body sits in this measure */
.ark-prose {
  max-width: var(--measure);
  margin: 0 auto;
}

.ark-prose p {
  margin: 0 0 1.15em;
  hanging-punctuation: first last;
}

/* ─────────────────────────────────────────────────────────────────
   1. HERO — above-fold guarantee
   Eyebrow + headline + sub-headline + trust line + CTA on first paint.
   ───────────────────────────────────────────────────────────────── */

.ark-hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  padding: clamp(2rem, 4vw, 3rem) var(--gutter) clamp(2.5rem, 5vw, 4rem);
  display: grid;
  align-items: center;
  overflow: hidden;
}

/* paper-grain background — tiny, intentional, non-distracting.
   Calibrated against the lighter canvas; grain reads as paper texture, not noise. */
.ark-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(21, 17, 13, 0.038) 1px, transparent 1px),
    radial-gradient(rgba(21, 17, 13, 0.024) 1px, transparent 1px);
  background-size: 5px 5px, 13px 13px;
  background-position: 0 0, 2px 2px;
  pointer-events: none;
  opacity: 0.6;
  z-index: 0;
}

.ark-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 78rem;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 880px) {
  .ark-hero__inner {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
}

/* Hero copy column — normal block flow. The CTA and scroll cue are inline-flex
   anchors but we want the cue to sit on its own line under the CTA, so we
   break flow with a forced block on the cue itself (no extra wrapper needed). */
.ark-hero__copy { width: 100%; }

.ark-eyebrow {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 14;
  font-size: 0.84rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--oxblood);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.ark-eyebrow::before {
  content: "";
  width: 2.4rem;
  height: 1px;
  background: var(--oxblood);
  opacity: 0.7;
  display: inline-block;
}

/* H1 — punchy, identification-validating. The largest type on the page. */
.ark-hero__head {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
  font-size: var(--display-xl);
  line-height: 1.0;
  font-weight: 380;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 0.65rem;
  text-wrap: balance;
}
.ark-hero__head em {
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 60;
  color: var(--oxblood);
}

/* Sub-H1 — display register, ~65% of H1 scale. Carries the rest of the spine claim. */
.ark-hero__sub-head {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 96, 'SOFT' 30;
  font-size: var(--display-sub);
  line-height: 1.1;
  font-weight: 340;
  letter-spacing: -0.012em;
  color: var(--ink-soft);
  margin: 0 0 1.15rem;
  text-wrap: balance;
  max-width: 32rem;
}
.ark-hero__sub-head em {
  font-style: italic;
  font-variation-settings: 'opsz' 96, 'SOFT' 60;
  color: var(--oxblood);
}

.ark-hero__sub {
  font-family: 'Source Serif 4', serif;
  font-size: 1.06rem;
  line-height: 1.45;
  color: var(--ink-soft);
  font-weight: 360;
  font-variation-settings: 'opsz' 24;
  margin: 0 0 1rem;
  max-width: 36rem;
  text-wrap: pretty;
}

.ark-hero__trust {
  font-family: 'Source Serif 4', serif;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ink-mute);
  font-style: italic;
  font-weight: 360;
  margin: 0 0 1.4rem;
  max-width: 36rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--hair-soft);
}

@media (max-width: 880px) {
  /* Tighten vertical budget on mobile — six elements + CTA must remain above-fold.
     The sub-H1 still reads as display register; trust line compresses to a tighter
     line-height; eyebrow margins shrink. */
  .ark-eyebrow { margin-bottom: 0.85rem; }
  .ark-hero__head { margin-bottom: 0.5rem; }
  .ark-hero__sub-head { margin-bottom: 0.85rem; line-height: 1.12; }
  .ark-hero__sub { font-size: 1rem; margin-bottom: 0.85rem; }
  .ark-hero__trust { font-size: 0.82rem; line-height: 1.45; margin-bottom: 1.1rem; padding-top: 0.7rem; }
}

/* Primary CTA — used in hero, S8, S9. Iter-2: heavier.
   The problem is the iter-1 CTA read as a hyperlink, not a door. The way we
   solve this is more surface, deeper oxblood, a softer drop-shadow that
   anchors it to the page, and a fill-on-hover micro-interaction that
   resolves into the deep oxblood without bouncing. Uses .arkstone class
   boost to outrank `.arkstone a { color }`. */
.arkstone .ark-cta,
a.ark-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--oxblood);
  color: var(--paper);
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 24;
  font-size: 1.06rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 1.1rem 1.9rem;
  border: 1px solid var(--oxblood);
  border-radius: 0;
  text-decoration: none;
  transition: background 200ms ease, transform 200ms ease, color 200ms ease, box-shadow 200ms ease;
  box-shadow: 0 1px 0 0 var(--oxblood-deep), 0 8px 18px -10px rgba(115, 39, 34, 0.45);
  position: relative;
}
.arkstone .ark-cta:hover,
a.ark-cta:hover {
  background: var(--oxblood-deep);
  color: var(--paper);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 1px 0 0 var(--oxblood-deep), 0 12px 24px -10px rgba(91, 29, 26, 0.55);
}
.ark-cta::after {
  content: "→";
  display: inline-block;
  font-family: inherit;
  transform: translateY(-1px);
  transition: transform 200ms ease;
}
.ark-cta:hover::after { transform: translate(3px, -1px); }
@media (prefers-reduced-motion: reduce) {
  .arkstone .ark-cta,
  a.ark-cta { transition: none; }
  .ark-cta::after { transition: none; }
  .arkstone .ark-cta:hover,
  a.ark-cta:hover { transform: none; }
  .ark-cta:hover::after { transform: translateY(-1px); }
}

/* Hero CTA — present, but does not dwarf the H1. */
.ark-cta--hero {
  font-size: 1.04rem;
  padding: 1.05rem 1.8rem;
}

/* Closing-chamber CTA — S8 and S9. The largest, most decisive door on the page. */
.ark-cta--large {
  font-size: 1.18rem;
  font-weight: 500;
  padding: 1.35rem 2.4rem;
  gap: 0.85rem;
  box-shadow: 0 2px 0 0 var(--oxblood-deep), 0 14px 30px -12px rgba(115, 39, 34, 0.5);
}
.ark-cta--large:hover {
  box-shadow: 0 2px 0 0 var(--oxblood-deep), 0 18px 36px -12px rgba(91, 29, 26, 0.6);
}

/* Quiet scroll cue — one paragraph mark under the hero CTA, breathing slowly.
   Optional. Cut if it competes with the CTA on aesthetic.
   The way we keep it on its own line is `display: flex` with width fixed —
   the flex element drops below the inline CTA without a wrapper. */
.ark-scroll-cue {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  margin: 1.4rem 0 0 0.4rem;
  color: var(--oxblood);
  text-decoration: none;
  opacity: 0.55;
  transition: opacity 220ms ease, transform 220ms ease;
}
.ark-scroll-cue:hover {
  opacity: 0.95;
  text-decoration: none;
  transform: translateY(2px);
}
.ark-scroll-cue__mark {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 36;
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1;
  animation: ark-scroll-breath 3.6s ease-in-out infinite;
}
@keyframes ark-scroll-breath {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%      { transform: translateY(3px); opacity: 0.95; }
}
@media (prefers-reduced-motion: reduce) {
  .ark-scroll-cue { transition: none; }
  .ark-scroll-cue__mark { animation: none; }
}
@media (max-width: 880px) {
  /* On mobile the cue eats into the above-fold budget — drop it on small screens. */
  .ark-scroll-cue { display: none; }
}

/* Hero side — placeholder portrait or diagram */
.ark-hero__figure {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--paper-soft);
  border: 1px solid var(--hair);
  overflow: hidden;
}
.ark-hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.05) contrast(1.02);
}
.ark-hero__figure figcaption {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 12;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(21, 17, 13, 0.72);
  padding: 0.5rem 0.7rem;
  backdrop-filter: blur(6px);
}
@media (max-width: 880px) {
  .ark-hero__figure { aspect-ratio: 4 / 3; max-width: 32rem; }
}

/* ─────────────────────────────────────────────────────────────────
   2. THE MATH YOU ALREADY DO — long editorial passage.
   Drop cap; pull-quote.
   ───────────────────────────────────────────────────────────────── */

.ark-section-eyebrow {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 14;
  font-size: 0.78rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin: 0 auto 1.4rem;
  text-align: center;
  display: block;
  max-width: var(--measure);
}
.ark-section-eyebrow::before {
  content: "§";
  margin-right: 0.5rem;
  font-style: normal;
  opacity: 0.6;
}

/* Section 6 letter — eyebrow aligns to the letter body's left-shifted column,
   not to the page's centred axis. Lifted out of inline style per Apis post-flight. */
.ark-section-eyebrow--letter {
  text-align: left;
  margin-left: clamp(0rem, 4vw, 3rem);
}

.ark-section-head {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 80, 'SOFT' 30;
  font-size: var(--display-l);
  line-height: 1.05;
  font-weight: 380;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 auto 2.2rem;
  text-align: center;
  text-wrap: balance;
  max-width: 32rem;
}
.ark-section-head em {
  font-style: italic;
  font-variation-settings: 'opsz' 80, 'SOFT' 80;
  color: var(--oxblood);
}

/* drop cap — opening of section 2 */
.ark-prose--drop > p:first-of-type::first-letter {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 144, 'SOFT' 80;
  font-style: italic;
  font-weight: 400;
  font-size: 5.4em;
  float: left;
  line-height: 0.84;
  color: var(--oxblood);
  margin: 0.06em 0.08em -0.04em -0.04em;
  letter-spacing: -0.04em;
}

.ark-pullquote {
  margin: 3.2rem auto;
  max-width: var(--measure);
  padding: 2rem 0 1.8rem;
  border-top: 1px solid var(--oxblood);
  border-bottom: 1px solid var(--oxblood);
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 80, 'SOFT' 60;
  font-size: clamp(1.5rem, 2.4vw, 1.85rem);
  line-height: 1.25;
  font-weight: 360;
  font-style: italic;
  color: var(--ink);
  text-align: center;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.ark-pullquote::before,
.ark-pullquote::after {
  content: "";
  display: block;
  width: 1px;
  height: 1.4rem;
  background: var(--oxblood);
  margin: 0 auto;
  opacity: 0.6;
}
.ark-pullquote::before { margin-bottom: 1rem; }
.ark-pullquote::after  { margin-top: 1rem; }

/* ─────────────────────────────────────────────────────────────────
   3. WHAT YOUR GUT IS ACTUALLY DOING
   Single-column body + right-floating sidebar (desktop).
   Mechanism diagram as a magazine figure.
   ───────────────────────────────────────────────────────────────── */

.ark-mechanism {
  position: relative;
}

.ark-figure {
  margin: 2.6rem auto 3rem;
  max-width: 44rem;
}
.ark-figure__panel {
  background: var(--paper-soft);
  border: 1px solid var(--hair);
  padding: 1.4rem;
}
.ark-figure__panel img,
.ark-figure__panel svg {
  display: block;
  width: 100%;
  height: auto;
}
.ark-figure__caption {
  display: block;
  margin-top: 0.9rem;
  font-family: 'Source Serif 4', serif;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-mute);
  font-style: italic;
}
.ark-figure__caption strong {
  font-style: normal;
  font-weight: 600;
  color: var(--ink);
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 14;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin-right: 0.5rem;
}

/* Citation sidebar — appears alongside body on desktop, inline on mobile */
.ark-sidebar {
  background: var(--paper-soft);
  border-left: 2px solid var(--oxblood);
  padding: 1.4rem 1.6rem;
  font-family: 'Source Serif 4', serif;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 2rem 0;
}
.ark-sidebar__label {
  display: block;
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 12;
  font-size: 0.72rem;
  font-weight: 540;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin-bottom: 0.9rem;
}
.ark-sidebar p {
  margin: 0 0 0.7rem;
  font-size: 0.92rem;
  line-height: 1.55;
}
.ark-sidebar p:last-child { margin-bottom: 0; }
.ark-sidebar cite {
  font-style: italic;
  display: block;
  margin-top: 0.2rem;
  color: var(--ink-mute);
}

/* footnote-style numbered references in body */
.ark-fn {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 14;
  font-size: 0.7em;
  vertical-align: super;
  color: var(--oxblood);
  font-weight: 540;
  margin-left: 0.1em;
  text-decoration: none;
}

/* ─────────────────────────────────────────────────────────────────
   4. WHEN THE SIGNAL SETTLES — quiet, generous whitespace.
   ───────────────────────────────────────────────────────────────── */

.ark-settle {
  background: var(--paper-soft);
  position: relative;
}
.ark-settle::before,
.ark-settle::after {
  content: "";
  display: block;
  width: 1px;
  height: 4rem;
  background: var(--oxblood);
  opacity: 0.4;
  margin: 0 auto;
}
.ark-settle::before { margin-bottom: clamp(2rem, 5vw, 4rem); }
.ark-settle::after  { margin-top: clamp(2rem, 5vw, 4rem); }
.ark-settle .ark-section {
  padding-top: 0;
  padding-bottom: 0;
}
.ark-settle .ark-prose p {
  font-size: 1.18rem;
  line-height: 1.65;
  font-style: italic;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.ark-settle .ark-prose p:last-child {
  font-style: normal;
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 80;
  font-size: 1.32rem;
  font-weight: 380;
  color: var(--ink);
  text-align: center;
  margin-top: 2.4rem;
  text-wrap: balance;
}

/* ─────────────────────────────────────────────────────────────────
   5. THE SIX SESSIONS — narrative + practical sidebar
   ───────────────────────────────────────────────────────────────── */

.ark-sessions__layout {
  max-width: 78rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 920px) {
  .ark-sessions__layout {
    grid-template-columns: 1fr;
  }
}

.ark-sessions__body {
  max-width: var(--measure);
  width: 100%;
}

.ark-practical {
  position: sticky;
  top: calc(var(--header-h) + 1rem);
  background: var(--paper-soft);
  border: 1px solid var(--hair);
  padding: 1.6rem 1.6rem 1.4rem;
}
@media (max-width: 920px) {
  .ark-practical { position: static; }
}
.ark-practical__label {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 12;
  font-size: 0.72rem;
  font-weight: 540;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin: 0 0 1.2rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--hair-soft);
}
.ark-practical__row {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.8rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--hair-soft);
  font-size: 0.92rem;
  line-height: 1.45;
}
.ark-practical__row:last-child { border-bottom: 0; }
.ark-practical__row dt {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 14;
  font-style: italic;
  font-weight: 400;
  color: var(--ink-mute);
  font-size: 0.86rem;
}
.ark-practical__row dd {
  margin: 0;
  color: var(--ink-soft);
}
.ark-practical__price {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hair);
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 36;
  font-size: 1.4rem;
  font-weight: 380;
  color: var(--ink);
  text-align: center;
  line-height: 1.2;
}
.ark-practical__price em {
  display: block;
  font-style: italic;
  font-size: 0.82rem;
  font-variation-settings: 'opsz' 14;
  color: var(--ink-mute);
  margin-top: 0.3rem;
}

/* ─────────────────────────────────────────────────────────────────
   6. WHY A CHRISTIAN PRACTITIONER — letter treatment
   ───────────────────────────────────────────────────────────────── */

.ark-letter {
  background: var(--paper-soft);
}
.ark-letter__inner {
  max-width: 56rem;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6.5rem) var(--gutter);
  position: relative;
}
.ark-letter__inner::before {
  content: "";
  position: absolute;
  top: clamp(3rem, 8vw, 6.5rem);
  bottom: clamp(3rem, 8vw, 6.5rem);
  left: var(--gutter);
  width: 1px;
  background: var(--oxblood);
  opacity: 0.45;
}
@media (max-width: 720px) {
  .ark-letter__inner::before { display: none; }
}
.ark-letter__body {
  margin-left: clamp(0rem, 4vw, 3rem);
  max-width: var(--measure);
}
.ark-letter__body p:first-of-type {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 80, 'SOFT' 60;
  font-size: 1.42rem;
  line-height: 1.35;
  font-style: italic;
  font-weight: 380;
  color: var(--ink);
  margin-bottom: 1.6rem;
  text-wrap: balance;
}
.ark-letter__sig {
  margin-top: 2rem;
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 36, 'SOFT' 80, 'WONK' 1;
  font-style: italic;
  font-size: 1.4rem;
  color: var(--oxblood);
  letter-spacing: -0.005em;
}
.ark-letter__guidelink {
  margin-top: 1.8rem;
  display: inline-block;
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 18;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-bottom: 1px solid var(--oxblood);
  padding-bottom: 2px;
  color: var(--oxblood);
}
.ark-letter__guidelink:hover { color: var(--oxblood-deep); }

.ark-bio {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 1rem;
  align-items: center;
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--hair-soft);
}
.ark-bio img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--paper);
  border: 1px solid var(--hair);
}
.ark-bio__name {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 18;
  font-size: 1rem;
  font-weight: 480;
  color: var(--ink);
  margin: 0 0 0.15rem;
}
.ark-bio__role {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-mute);
}

/* ─────────────────────────────────────────────────────────────────
   7. HONEST QUESTIONS — accordion
   ───────────────────────────────────────────────────────────────── */

.ark-questions {
  max-width: 52rem;
  margin: 0 auto;
}
.ark-question {
  border-bottom: 1px solid var(--hair-soft);
  padding: 0;
}
.ark-question:first-child { border-top: 1px solid var(--hair-soft); }
.ark-question summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 2.4rem 1.4rem 0;
  position: relative;
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 36, 'SOFT' 30;
  font-size: clamp(1.18rem, 1.6vw, 1.32rem);
  font-weight: 380;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.005em;
  transition: color 200ms ease;
}
.ark-question summary::-webkit-details-marker { display: none; }
.ark-question summary::after {
  content: "+";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 80;
  font-size: 1.6rem;
  font-weight: 380;
  color: var(--oxblood);
  transition: transform 220ms ease;
  line-height: 1;
}
.ark-question[open] summary::after { content: "−"; }
.ark-question summary:hover { color: var(--oxblood); }
.ark-question__answer {
  padding: 0.2rem 0 1.6rem;
  max-width: var(--measure);
  font-family: 'Source Serif 4', serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.ark-question__answer p {
  margin: 0 0 0.9rem;
}
.ark-question__answer p:last-child { margin-bottom: 0; }

/* ─────────────────────────────────────────────────────────────────
   8. THE DISCOVERY CALL — closing chamber, larger CTA
   ───────────────────────────────────────────────────────────────── */

.ark-call {
  text-align: center;
}
.ark-call__inner {
  max-width: 44rem;
  margin: 0 auto;
}
.ark-call__head {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  line-height: 1.04;
  font-weight: 360;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 1.6rem;
  text-wrap: balance;
}
.ark-call__head em {
  font-style: italic;
  color: var(--oxblood);
  font-variation-settings: 'opsz' 144, 'SOFT' 80;
}
.ark-call__body p {
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 1rem;
  text-wrap: pretty;
}
.ark-call__cta-wrap {
  margin-top: 2.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.ark-call__under {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: 0.94rem;
  color: var(--ink-mute);
  text-wrap: balance;
  max-width: 32rem;
}

/* ─────────────────────────────────────────────────────────────────
   9. FINAL CTA — full-bleed inverse: ink on warm-paper-deep
   ───────────────────────────────────────────────────────────────── */

.ark-final {
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ark-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(251, 249, 245, 0.04) 1px, transparent 1px);
  background-size: 7px 7px;
  pointer-events: none;
}
.ark-final__inner {
  position: relative;
  z-index: 1;
  max-width: 52rem;
  margin: 0 auto;
  padding: clamp(4rem, 9vw, 7rem) var(--gutter);
}
.ark-final__head {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.02;
  font-weight: 340;
  letter-spacing: -0.022em;
  color: var(--paper);
  margin: 0 0 2rem;
  text-wrap: balance;
}
.ark-final__head em {
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 80;
  color: #d99c84; /* warm oxblood-tinted highlight on dark */
}
.ark-final__body {
  font-size: 1.12rem;
  line-height: 1.6;
  color: rgba(251, 249, 245, 0.78);
  margin: 0 0 2.4rem;
  text-wrap: pretty;
}
.arkstone .ark-final .ark-cta {
  background: var(--paper);
  color: var(--oxblood);
  border-color: var(--paper);
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.4);
}
.arkstone .ark-final .ark-cta:hover {
  background: #ffffff;
  color: var(--oxblood-deep);
}
.ark-final__under {
  margin-top: 1rem;
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: 0.94rem;
  color: rgba(251, 249, 245, 0.6);
}

/* ─────────────────────────────────────────────────────────────────
   10. FOOTER — quiet, multi-column on desktop
   ───────────────────────────────────────────────────────────────── */

.ark-footer {
  background: var(--paper-deep);
  color: var(--ink-soft);
  padding: clamp(3rem, 6vw, 4.5rem) var(--gutter) 2rem;
  font-size: 0.92rem;
  line-height: 1.55;
  border-top: 1px solid var(--hair-soft);
}
.ark-footer__inner {
  max-width: 78rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.6rem, 4vw, 3rem);
}
@media (max-width: 880px) {
  .ark-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .ark-footer__inner { grid-template-columns: 1fr; }
}
.ark-footer__col h4 {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 14;
  font-size: 0.74rem;
  font-weight: 540;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin: 0 0 1rem;
}
.ark-footer__bio {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0.9rem;
  align-items: center;
  margin-bottom: 0.9rem;
}
.ark-footer__bio img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--hair);
}
.ark-footer__bio strong {
  display: block;
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 18;
  font-weight: 480;
  color: var(--ink);
  margin-bottom: 0.15rem;
}
.ark-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ark-footer__col ul li {
  margin: 0 0 0.4rem;
}
.ark-footer__col a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--hair-soft);
  padding-bottom: 1px;
}
.ark-footer__col a:hover {
  color: var(--oxblood);
  border-bottom-color: var(--oxblood);
  text-decoration: none;
}
.ark-footer__legal {
  max-width: 78rem;
  margin: 2.2rem auto 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hair-soft);
  font-size: 0.82rem;
  color: var(--ink-mute);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.7rem;
}

/* ─────────────────────────────────────────────────────────────────
   Section dividers and rhythm
   ───────────────────────────────────────────────────────────────── */

.ark-rule {
  display: block;
  width: 2.4rem;
  height: 1px;
  background: var(--oxblood);
  margin: 0 auto;
  opacity: 0.7;
}

.ark-section + .ark-section {
  border-top: none;
}

/* alternating background — odd sections paper, even sections paper-soft.
   Used selectively, not blindly. */
.ark-section--soft {
  background: var(--paper-soft);
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.ark-section--soft > .ark-section-inner {
  max-width: 78rem;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6.5rem) var(--gutter);
}

/* ─────────────────────────────────────────────────────────────────
   Motion — reading-aware fade-up.
   Page-scoped IntersectionObserver flips `.is-visible` once.
   No reliance on AOS — that library hides content when the script
   doesn't run and feels too long at the inherited 2000ms duration.
   ───────────────────────────────────────────────────────────────── */

.arkstone [data-fade] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.arkstone [data-fade].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* No-JS fallback: if the inline observer never runs, content still
   shows after one second via the .arkstone-loaded class — but we
   also fall back to opacity:1 if prefers-reduced-motion is set. */
.arkstone-page.is-noscript [data-fade] {
  opacity: 1;
  transform: none;
}

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

/* ─────────────────────────────────────────────────────────────────
   Mobile: collapse sidebar, citations inline, single-column.
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .ark-pullquote {
    font-size: 1.32rem;
    margin: 2.4rem auto;
  }
  .ark-section { padding: clamp(2.4rem, 7vw, 4rem) var(--gutter); }
  .ark-prose--drop > p:first-of-type::first-letter { font-size: 4.4em; }
}

/* page-scoped anchor offset for sticky header */
.arkstone :target { scroll-margin-top: calc(var(--header-h) + 1rem); }