/* ============================================================================
   FALLOW BOURNE — Super.so custom CSS
   Paste into Super → Settings → Custom Code → CSS
   ----------------------------------------------------------------------------
   Built on the signed-off design system (FallowBourne_DesignSystem_Cam.pdf §4),
   extended to a full component layer that targets Super's STABLE classes —
   never #block-<uuid>. Page-scoped only where a page genuinely differs.

   Authoring convention (set up by Cam, edited by Melis/Ruby):
     SECTION GROUND        = callout background colour
       Gray   callout  -> full-bleed light section band (Gentle White)
       Brown  callout  -> Fallow (tan) accent panel
       Green  callout  -> Eucalypt section (reversed text)
       Purple callout  -> Void dark section (reversed text)   [dark code]
       Pink   callout  -> Mountain Grass accent (reserved, not in beta)
     ELEMENT HOOKS
       First H3 in a section callout -> eyebrow / section label
       Quote block                   -> Fraunces italic pull quote
       Bold link                     -> Solid button   (colour set by ground)
       Bold + italic link            -> Hollow button  (colour set by ground)
       2 columns                     -> two-col grid, 80px gap
       3 columns                     -> three-col grid, 0.5px dividers, no gap
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,700;0,9..144,900;1,9..144,700;1,9..144,900&family=Jost:wght@300;400;500&display=swap');

/* ── 1. TOKENS ────────────────────────────────────────────────────────────── */
:root {
  --void:            #130A09;
  --gentle-white:    #FFF8F5;
  --fallow:          #D6AB88;   /* tan — accent/labels on DARK grounds */
  --fallow-deep:     #8F5C36;   /* deep sienna — tan-family labels on LIGHT grounds (AA) */
  --eucalypt:        #5E8F7A;
  --mountain-grass:  #B1688F;

  --rule-light:        rgba(19, 10, 9, 0.10);
  --rule-light-strong: rgba(19, 10, 9, 0.12);
  --rule-dark:         rgba(255, 248, 245, 0.12);
  --rule-fallow:       rgba(214, 171, 136, 0.18);

  /* Hand-drawn sketch lines (hosted on assets.super.so — permanent URLs).
     --sketch-fallow = tan line, reads on LIGHT grounds + the void footer.
     --sketch-light  = pale line, reserved for dark sections if ever needed. */
  --sketch-fallow: url('https://assets.super.so/284d2508-ccc6-46ac-abf9-1b2b055a49fe/images/c94e099b-9a41-4708-b7a8-3dd0d6b847fa/fallow_sketch_line.svg');
  --sketch-light:  url('https://assets.super.so/284d2508-ccc6-46ac-abf9-1b2b055a49fe/images/0f83f5da-faf1-4058-86a5-829395c7a4a7/light_fallow_sketch_line.svg');

  --ink-32: rgba(19, 10, 9, 0.32);
  --ink-38: rgba(19, 10, 9, 0.38);
  --ink-45: rgba(19, 10, 9, 0.45);
  --ink-50: rgba(19, 10, 9, 0.50);
  --paper-28: rgba(255, 248, 245, 0.28);
  --paper-38: rgba(255, 248, 245, 0.38);
  --paper-55: rgba(255, 248, 245, 0.55);
  --paper-65: rgba(255, 248, 245, 0.65);

  --pad-x: 64px;
  --pad-y: 80px;            /* design system §1.3: 64–80px section padding */
  --content-max: 1200px;    /* section backgrounds stay full-bleed; inner content caps here */
  --measure: 60ch;          /* readable line length for single-column body */

  /* Buttons are SOLID by default (primary CTA); colour-tinting the paragraph turns one
     OUTLINE (secondary). Ground sets the accent: Void on light, Fallow on dark.
     --btn-border doubles as the solid fill; --btn-fill-text is the contrasting label. */
  --btn-border: var(--void);
  --btn-text:   var(--void);
  --btn-fill-text: var(--gentle-white);
}

/* ── 2. BASE ──────────────────────────────────────────────────────────────── */
body,
.super-content,
.notion-root {
  background: var(--gentle-white);
  color: var(--void);
  font-family: 'Jost', sans-serif;
  font-weight: 400;            /* design system: body is Regular 400, not Light 300 */
  font-size: 18px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
.notion-text, .notion-text__content { font-weight: 400; }

/* Full-bleed shell — defeat Super's `.notion-root.max-width` ~720px container so
   section callouts run edge-to-edge. (The narrow column + stacked 2-col rows were
   both symptoms of this one constraint.) */
.super-content,
.super-content-wrapper { max-width: none; width: 100%; }
.notion-root,
.notion-root.max-width {
  max-width: none;
  width: 100%;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}
/* No gap below the last block (the subscribe band sits flush to the footer). */
.notion-root.has-footer { padding-bottom: 0; }
/* Section BACKGROUNDS stay full-bleed (padding lives on the callout, §3); the inner
   content is capped and centred so it doesn't sprawl on wide screens. */
.notion-root > .notion-callout > .notion-callout__content {
  max-width: var(--content-max);
  margin-inline: auto;
}

/* Heroes are authored as section callouts, so hide Notion's default page header
   (the big "Home"/page-title block). !important beats Super's .notion-header.page. */
.notion-header { display: none !important; }

/* Headings ------------------------------------------------------------------ */
h1.notion-heading,
h2.notion-heading,
h3.notion-heading {
  font-family: 'Fraunces', serif;
}
h1.notion-heading {
  font-weight: 900;
  font-size: clamp(44px, 6vw, 64px);
  line-height: 0.97;
  letter-spacing: -0.03em;
}
h2.notion-heading {
  font-weight: 900;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
h3.notion-heading {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
}
/* Fraunces has true italics — emphasis words in headings render as italic. */
h1.notion-heading em, h2.notion-heading em, h3.notion-heading em { font-style: italic; }

.notion-text { line-height: 1.75; }
.notion-text__content { max-width: var(--measure); }
em, i { font-style: italic; }
strong { font-weight: 500; }

/* ── ACCENT COLOURS (author-driven, scalable) ─────────────────────────────────
   Colour text in Notion → it maps to a brand colour ANYWHERE. Super emits
   <span class="highlighted-color color-<name>">. Mapping:
     Notion yellow → Fallow (tan accent words)
     Notion pink   → Mountain Grass (e.g. "challenge/tension" section headings)
     Notion green  → Eucalypt (e.g. "initiates differently", "the first threshold") */
.color-yellow, .highlighted-color.color-yellow { color: var(--fallow) !important; }
.color-pink,   .highlighted-color.color-pink   { color: var(--mountain-grass) !important; }
.color-green,  .highlighted-color.color-green   { color: var(--eucalypt) !important; }

/* SKETCH DIVIDERS — two ways to author one, both render as the hand-drawn line:
   (1) drop the sketch-line IMAGE block (fallow = light grounds, light = dark grounds);
   (2) type a `---` divider.
   Super renders a placed image at a narrow default width (~20%); these rules stretch
   it to a real divider width using the SVG's own ratio (viewBox 2697×197). */
.notion-image:has(img[src*="sketch_line"]) {
  width: min(1100px, 90%) !important;
  max-width: 1100px !important;
  margin: var(--pad-y) auto !important;
  opacity: 0.9;
}
.notion-image:has(img[src*="sketch_line"]) img {
  width: 100% !important;
  height: auto !important;
}
/* `---` divider fallback (author-driven). */
hr.notion-divider, .notion-divider {
  width: min(1100px, 90%);
  aspect-ratio: 2697 / 197;
  height: auto;
  border: none;
  background: var(--sketch-fallow) center / contain no-repeat;
  margin: var(--pad-y) auto;
  opacity: 0.85;
}
/* On dark sections (Void/Eucalypt) the pale variant keeps the line visible. */
.bg-purple-light hr.notion-divider, .bg-purple-light .notion-divider,
.bg-green-light hr.notion-divider,  .bg-green-light .notion-divider {
  background-image: var(--sketch-light);
}

/* Hide the brown utility toggle (a working/scratch block, not site content). */
.notion-toggle.bg-brown { display: none !important; }

/* ── 3. SECTION GROUNDS (callout colour → section type) ───────────────────── */
.notion-callout {
  display: block;
  margin: 0;
  border: none;
  border-radius: 0;
  width: 100%;
}
.notion-callout > .notion-callout__icon { display: none; }
.notion-callout > .notion-callout__content { width: 100%; margin: 0 auto; }

/* Any coloured callout becomes a full-bleed section band. */
.notion-callout.bg-gray-light,
.notion-callout.bg-brown-light,
.notion-callout.bg-green-light,
.notion-callout.bg-purple-light,
.notion-callout.bg-pink-light {
  padding: var(--pad-y) var(--pad-x);
}
/* Notion/Super draw a box border on every callout (.notion-callout.border), coloured
   with Notion's default ground rather than ours — so it shows as an off-colour box on
   all four sides. Remove it; the full-bleed background bands separate the sections. */
.notion-callout.border { border: none !important; }

.notion-callout.bg-gray-light   { background: var(--gentle-white); }            /* light band */
.notion-callout.bg-brown-light  { background: var(--fallow);  color: var(--void); }
.notion-callout.bg-green-light  { background: var(--eucalypt); color: var(--gentle-white); }
.notion-callout.bg-purple-light { background: var(--void);    color: var(--gentle-white); }
.notion-callout.bg-pink-light   { background: var(--mountain-grass); color: var(--gentle-white); }

/* Reversed-text grounds: force children + redefine button + rule colours. */
.bg-green-light, .bg-green-light .notion-text, .bg-green-light .notion-text__content,
.bg-purple-light, .bg-purple-light .notion-text, .bg-purple-light .notion-text__content {
  color: var(--gentle-white);
}

/* Dark / Eucalypt grounds flip the button accent to Fallow (auto via the cascade);
   a solid Fallow fill needs a Void label, not the light-ground gentle-white. */
.bg-purple-light, .bg-green-light {
  --btn-border: var(--fallow);
  --btn-text:   var(--fallow);
  --btn-fill-text: var(--void);
}

/* A coloured callout INSIDE a column is a panel/card, not a full section band:
   reset section padding + bottom rule, give it tidy card padding. (Facilitator
   green card, hero info panel, the Void logistics sub-panel all rely on this.) */
.notion-column .notion-callout.bg-gray-light,
.notion-column .notion-callout.bg-brown-light,
.notion-column .notion-callout.bg-green-light,
.notion-column .notion-callout.bg-purple-light,
.notion-column .notion-callout.bg-pink-light {
  padding: 28px 32px;
  border-bottom: none;
}

/* ── 4. EYEBROW (first H3 in a section callout) ───────────────────────────── */
.notion-callout__content > h3.notion-heading:first-of-type {
  font-family: 'Jost', sans-serif;
  font-weight: 400;                 /* design system bumped labels 300 -> 400 */
  font-size: 12px;                  /* nudged up from 10px — read too small live */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fallow-deep);        /* tan-family on light (AA), not grey ink */
  margin: 0 0 28px;
  max-width: none;
}
.bg-green-light .notion-callout__content > h3.notion-heading:first-of-type,
.bg-purple-light .notion-callout__content > h3.notion-heading:first-of-type {
  color: var(--fallow);             /* lighter tan on dark grounds */
}
/* But a nested PANEL callout's first H3 is a card title, not an eyebrow — reset it.
   (e.g. the "Fallow Bourne" name box, the Shoalhaven facilitator card.) */
.notion-column .notion-callout .notion-callout__content > h3.notion-heading:first-of-type {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: inherit;
  margin: 0 0 12px;
}

/* ── 5. PULL QUOTE ────────────────────────────────────────────────────────── */
.notion-quote {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.2;
  border-left: 1.5px solid var(--rule-light-strong);
  padding-left: 24px;
  max-width: var(--measure);
}
.bg-green-light .notion-quote,
.bg-purple-light .notion-quote {
  color: var(--gentle-white);
  border-left-color: rgba(255, 248, 245, 0.30);
}
/* Shoalhaven's "question" (green card INSIDE a facilitators column) is plain Jost,
   not Fraunces italic — its voice is different (design §2.7). Living World is a green
   SECTION, not in a column, so it keeps the Fraunces-italic default above. */
.notion-column .notion-callout.bg-green-light .notion-quote {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 15px;
  line-height: 1.4;
}

/* ── 6. BUTTONS — solid primary / outline secondary ───────────────────────────
   Concept: SOLID rounded buttons for primary CTAs, OUTLINE for secondary. Default
   here is SOLID (filled in the ground accent); tinting the button's paragraph with a
   colour in Notion subtracts the fill back to an OUTLINE (see the hooks below).
   Matches both Notion nesting orders (<strong><a> and <a><strong>). Accent comes
   from --btn-* set by the section ground (§3): Void on light, Fallow on dark/eucalypt. */
strong > a.notion-link.link,
a.notion-link.link:has(> strong) {
  display: inline-flex;        /* flex + line-height:1 vertically centres the label */
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  font-style: normal;
  padding: 14px 34px;
  border: 1.5px solid var(--btn-border);
  border-radius: 8px;
  background: var(--btn-border);            /* SOLID fill = ground accent (primary CTA) */
  color: var(--btn-fill-text) !important;   /* contrasting label on the fill */
  transition: opacity 0.2s ease;
}
strong > a.notion-link.link > strong,
a.notion-link.link:has(> strong) > strong { font-weight: 400; }

/* Author-driven OUTLINE (secondary): tint the button in Notion to subtract the solid
   fill back to a hollow outline. yellow -> Fallow, pink -> Mountain Grass; uncoloured
   stays SOLID in the ground accent (Void/Fallow). */
strong > a.notion-link.link:has(.color-yellow),
a.notion-link.link:has(> strong):has(.color-yellow) { background: transparent; border-color: var(--fallow); color: var(--fallow) !important; }
strong > a.notion-link.link:has(.color-pink),
a.notion-link.link:has(> strong):has(.color-pink) { background: transparent; border-color: var(--mountain-grass); color: var(--mountain-grass) !important; }
/* Author tints a button purple in Notion to make it the OUTLINE secondary. The tint can
   live on the whole PARAGRAPH (.notion-text.bg-purple) OR — when several buttons share one
   paragraph and only one should be outline — on an inline highlight span wrapping just that
   link (.highlighted-background.bg-purple). Match either: require only a .bg-purple ancestor
   plus a button descendant. Drop the purple highlight box + solid fill so only the outline shows. */
.notion-text.bg-purple { background: transparent !important; padding-left: 0; padding-right: 0; }
.highlighted-background.bg-purple:has(a.notion-link.link) { background: transparent !important; }
.bg-purple strong > a.notion-link.link,
.bg-purple a.notion-link.link:has(> strong) {
  background: transparent !important;
  border-color: var(--mountain-grass) !important;
  color: var(--mountain-grass) !important;
}

strong > a.notion-link.link:hover,
a.notion-link.link:has(> strong):hover { opacity: 0.7; }

/* Plain (non-bold) inline link = quiet text link. MUST be a DIRECT child of the
   paragraph — a button's <a> lives inside a <strong>, so direct-child scoping keeps
   this rule off buttons (otherwise it stamped an underline + 0.7 opacity on them). */
.notion-text__content > a.notion-link.link:not(:has(strong)) {
  color: inherit;
  text-decoration: none;
  border-bottom: 0.5px solid currentColor;
  padding-bottom: 1px;
  opacity: 0.7;
}

/* ── 7. COLUMNS / GRIDS ───────────────────────────────────────────────────────
   Super sizes columns INLINE so they sum to exactly 100%:
     width: calc((100% - var(--column-spacing) * N) * frac);
     margin-inline-start: var(--column-spacing);   (on later columns)
   So NEVER add `gap` or content-box padding — that overflows → columns wrap → stack.
   Control the gutter through --column-spacing; keep any padding inside via border-box. */
.notion-column-list {
  display: flex;
  align-items: stretch;
  gap: 0;                /* gutter comes from --column-spacing, NOT gap */
  flex-wrap: nowrap;     /* widths sum to EXACTLY 100% — sub-pixel rounding must not wrap → stack.
                            Mobile (§14) flips to flex-direction:column, so this only holds on desktop. */
}
.notion-column { box-sizing: border-box; min-width: 0; }   /* allow shrink-to-fit instead of overflow */

/* Two columns → 80px gutter, no divider (design §1.3). */
.notion-column-list:has(> .notion-column:nth-child(2):last-child) { --column-spacing: 80px; }

/* Three+ columns → no gutter, 0.5px dividers with internal padding (design §2.5). */
.notion-column-list:has(> .notion-column:nth-child(3)) { --column-spacing: 0px; }
.notion-column-list:has(> .notion-column:nth-child(3)) > .notion-column {
  padding: 0 40px;
  border-left: 0.5px solid var(--rule-light);
}
.notion-column-list:has(> .notion-column:nth-child(3)) > .notion-column:first-child {
  padding-left: 0;
  border-left: none;
}
.notion-column-list:has(> .notion-column:nth-child(3)) > .notion-column:last-child {
  padding-right: 0;
}
.bg-green-light .notion-column-list:has(> .notion-column:nth-child(3)) > .notion-column,
.bg-purple-light .notion-column-list:has(> .notion-column:nth-child(3)) > .notion-column {
  border-left-color: var(--rule-dark);
}

/* ── 8. INDEX NUMBERS / ATTRIBUTION / LOGISTICS TABLES ────────────────────── */

/* Index number = a solo bold "01" as the FIRST line of a column (e.g. WHAT WE OFFER).
   Scoped to :first-child so a fully-bold *paragraph* elsewhere isn't shrunk. */
.notion-column > .notion-text__content:first-child > strong:only-child {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 13px;                  /* nudged up from 11px — read too small live */
  letter-spacing: 0.16em;
  color: var(--fallow-deep);
  margin-bottom: 6px;
}
.bg-green-light .notion-column > .notion-text__content:first-child > strong:only-child,
.bg-purple-light .notion-column > .notion-text__content:first-child > strong:only-child {
  color: var(--fallow);
}

/* Testimonial attribution = an italic line directly after a pull quote. */
.notion-quote + .notion-text .notion-text__content em,
.notion-quote + .notion-text em {
  font-family: 'Jost', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-38);
}
.bg-green-light .notion-quote + .notion-text em,
.bg-purple-light .notion-quote + .notion-text em { color: var(--paper-38); }

/* Logistics / info panels = a 2-column Notion simple table (label | value), header OFF.
   SITE-WIDE treatment (matches the concept): STACKED — each label sits in small uppercase
   Fallow ABOVE a larger value, with generous gaps between rows and NO dividing rules.
   This is the homepage-hero look applied to every table. Collapse the table structure to
   blocks so the two cells stack vertically rather than sitting side by side in a grid. */
.notion-table, .notion-table tbody, .notion-table tr,
.notion-table td, .notion-table__wrapper, .notion-table__cell, .notion-table__row,
.notion-simple-table, .notion-simple-table tbody, .notion-simple-table tr,
.notion-simple-table td, .notion-simple-table__cell {
  display: block;
  border: none !important;
  padding: 0;
  width: auto !important;
  max-width: none !important;
}
.notion-table tr, .notion-simple-table tr, .notion-table__row { margin-bottom: 26px; }
/* First cell in each row = the KEY label (Fallow, deepened on light grounds for contrast) */
.notion-table tr > td:first-child, .notion-simple-table tr > td:first-child,
.notion-table__row > .notion-table__cell:first-child {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fallow-deep);
  margin-bottom: 2px;
}
/* Second cell = the VALUE (inherits the ground text colour: Void on light, white on dark) */
.notion-table tr > td:nth-child(2), .notion-simple-table tr > td:nth-child(2),
.notion-table__row > .notion-table__cell:nth-child(2) {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 17px;
  color: inherit;
}
/* On dark / eucalypt grounds Super sets an inline dark colour on each <tr> that hides the
   panel. Force a bright value + Fallow label, with !important to beat the inline value. */
.bg-purple-light .notion-table td, .bg-green-light .notion-table td,
.bg-purple-light .notion-simple-table td, .bg-green-light .notion-simple-table td {
  color: var(--gentle-white) !important;
}
.bg-purple-light .notion-table tr > td:first-child,
.bg-green-light .notion-table tr > td:first-child,
.bg-purple-light .notion-simple-table tr > td:first-child,
.bg-green-light .notion-simple-table tr > td:first-child { color: var(--fallow) !important; }

/* ── 9. NAVBAR ────────────────────────────────────────────────────────────── */
.super-navbar {
  background: rgba(254, 248, 245, 0.72);   /* #FEF8F5, translucent */
  backdrop-filter: saturate(1.2) blur(12px);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  border-bottom: 0.5px solid var(--rule-light-strong);
  transition: background 0.25s ease, backdrop-filter 0.25s ease;
}
/* Solid on hover. */
.super-navbar:hover {
  background: #FEF8F5;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.super-navbar__logo {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: 19px;
  color: var(--void);
  letter-spacing: -0.02em;
}
.super-navbar__item {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.super-navbar__item:hover,
.super-navbar__item.is-active,
.super-navbar__item[aria-current] { color: var(--void); font-weight: 500; }

/* Apply CTA in the navbar = solid button */
.super-navbar__button:not(.super-navbar__menu-open), .super-navbar__cta {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--fallow);
  color: var(--void);
  border: none;
  border-radius: 0;
  padding: 12px 26px;
}
/* The mobile hamburger toggle also carries .super-navbar__button — keep it a plain icon
   button (no tan CTA fill, no wide padding that pushed it off the corner). */
.super-navbar__menu-open {
  background: transparent;
  color: var(--void);
  padding: 8px;
}

/* ── 10. FOOTER (site-wide) ────────────────────────────────────────────────────
   Super renders: logo · divider · footnote (© line) · social icons.
   The concept footer also wants a hand-drawn sketch line on top, a small
   "Nature-Based Leadership Practice" tagline, and the Acknowledgement of Country.
   None of those three are addable inside Super, so they are injected here via CSS:
     • sketch line       → .super-footer::before
     • acknowledgement   → .super-footer::after  (verbatim from the design bundle)
   (The "Nature-Based Leadership Practice" tagline is already baked into the Super
    logo image, so it is NOT injected here — that would duplicate it.)
   The Super footer is a centred stack, so everything stacks and centres cleanly. */
.super-footer {
  position: relative;
  background: var(--void);
  color: var(--gentle-white);
  padding: var(--pad-y) var(--pad-x);
  border: none;
  text-align: center;
}
/* Hand-drawn sketch line across the top (tan line on the void ground). Sized by the
   SVG's own ratio (viewBox 2697×197) so it spans a real width — a fixed height alone
   lets `contain` collapse it to ~60% of the footer. */
.super-footer::before {
  content: '';
  display: block;
  width: min(1100px, 90%);
  aspect-ratio: 2697 / 197;
  margin: 0 auto var(--pad-y);
  background: var(--sketch-fallow) center / contain no-repeat;
  opacity: 0.9;
}
.super-footer__logo, .super-footer__logo-image {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: 15px;
  color: var(--gentle-white);
}
/* Super pins the logo container to height:48px, which clips the lockup and throws the
   stack off-centre. Release the height and scale the logo up. */
.super-footer.stack .super-footer__logo,
.super-footer__logo,
.super-footer__logo-image { height: auto; }
.super-footer__logo-image img {
  height: 84px !important;
  width: auto !important;
  object-position: center !important;
}
/* Super's thin internal divider is redundant once the sketch line + tagline rule
   provide the structure — hide it so the brand area reads cleanly. */
.super-footer__divider { display: none; }
.super-footer__list-heading {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-38);
}
.super-footer__link {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: var(--paper-65);
}
.super-footer__link:hover { color: var(--gentle-white); }
.super-footer__footnote {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.6;
  color: var(--paper-55);
  text-align: center;
  max-width: 70ch;
  margin-inline: auto;
}
/* Acknowledgement of Country — quiet Jost Light italic footnote, verbatim from the
   design bundle. Sits beneath the social icons, centred and measure-limited. */
.super-footer::after {
  content: 'Fallow Bourne is committed to the rigour, honesty and ecological integrity we ask of our participants. We hold ourselves to the same standard. We arrive at each location as guests. We acknowledge the custodians of the land on which we work, and the ancestral presence of place and body. We do not claim relationships we have not earned.';
  display: block;
  max-width: 70ch;
  margin: var(--pad-y) auto 0;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 13px;
  line-height: 1.7;
  color: var(--paper-55);
}

/* ── 11. SUBSCRIBE band — the page-foot Notion form (.notion-form__wrapper), styled as
   the concept's full-bleed dark band: Fraunces-italic Fallow headline, soft subhead, a
   paper input with the submit button flush on the right. */
.notion-form__wrapper.as-embed {
  background: var(--void);
  color: var(--gentle-white);
  width: 100%;
  padding: var(--pad-y) var(--pad-x);
  border: none !important;
  border-radius: 0 !important;   /* square band, flush to the footer */
  margin-top: 0 !important;      /* kill Notion's default top gap so the band sits flush */
}
.notion-form__wrapper .notion-header.form { display: none; }   /* hide the auto "Subscriptions" title */

.notion-form.as-embed {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.notion-form__field-title {
  width: 100% !important;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--fallow);
  margin: 0 0 16px;
}
.notion-form__field-title-required { display: none; }          /* hide the * */
.notion-form__field-description {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--paper-65);
  max-width: 46ch;
  margin: 0 auto 30px;
}
/* Input (paper pill), then the submit button centred below it. The submit button is a
   sibling of the input's field, so a stacked layout is the robust choice. */
.notion-form__input-field {
  width: 100%;
  background: var(--gentle-white);
  border: none;
  border-radius: 8px;
  color: var(--void);
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  padding: 18px 20px;
}
.notion-form__input-field::placeholder { color: var(--ink-45); }
.notion-form__submit-button {
  margin: 18px 0 0;
  display: flex;
  justify-content: center;
}
.notion-form__submit-button .notion-button__content {
  display: inline-flex;
  align-items: center;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--fallow) !important;   /* same Fallow as the title text */
  color: var(--void) !important;
  border: none;
  border-radius: 8px;
  padding: 16px 40px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.notion-form__submit-button .notion-button__content:hover { opacity: 0.85; }

/* ── 12. PAGE-SCOPED OVERRIDES (only where a page genuinely differs) ───────── */
/* Home + Offerings open on a DARK hero; Residential + Who We Are open LIGHT.
   The hero is authored as the first section callout (Purple = dark / Gray = light),
   so no per-page colour override is needed — kept here as the hook if required. */
/* #page-index    .notion-callout.bg-purple-light:first-of-type { } */
/* #page-offerings .notion-callout.bg-purple-light:first-of-type { } */

/* Hero = first section callout on any page. Padding per design system, headline at
   spec size (NOT inflated). */
.notion-root > .notion-callout:first-of-type { padding-top: 96px; padding-bottom: 96px; }
.notion-root > .notion-callout:first-of-type h1.notion-heading {
  font-size: clamp(44px, 5vw, 64px);
  line-height: 0.97;
  letter-spacing: -0.03em;
}

/* ── HERO — Home (dark) — matched to the concept mockup ──────────────────────── */
/* (Accent word "in service" is Fallow via the global .color-yellow rule above —
   author coloured it yellow in Notion + kept it italic. No per-hero hack.) */

/* (Hero headline keeps "in service" together via a non-breaking space authored in
   Notion — so it reflows naturally without splitting the accent phrase.) */

/* Info panel (stacked label / value, Fallow labels, no rules) is now the SITE-WIDE table
   treatment — see §"Logistics / info panels" above. No homepage-specific override needed. */

/* Hero CTA runs slightly larger than body buttons (colour/border from the default). */
#page-index .notion-callout.bg-purple-light:first-of-type strong > a.notion-link.link,
#page-index .notion-callout.bg-purple-light:first-of-type a.notion-link.link:has(> strong) {
  font-size: 14px;
  padding: 18px 40px;
  margin-top: 8px;
}

/* The Practice (Home) is the ONLY centred gray section. Identify it robustly — a gray
   callout with no columns and no quote — instead of a fragile nth-of-type (which was
   wrongly centring The Challenge when the DOM order shifted). The Challenge keeps its
   default left alignment (it has a column-list). */
#page-index .notion-callout.bg-gray-light:not(:has(.notion-column-list)):not(:has(.notion-quote)) > .notion-callout__content {
  text-align: center;
}
#page-index .notion-callout.bg-gray-light:not(:has(.notion-column-list)):not(:has(.notion-quote)) .notion-text__content {
  max-width: 60ch;
  margin-inline: auto;
}

/* ── 13. DECORATIVE LAYER ──────────────────────────────────────────────────────
   Brand art is DROPPED INTO the relevant callout as a Notion image block (so Super
   hosts it at assets.super.so); the CSS below positions it. See GRAPHICS.md for the
   "which asset → which callout" map. Until an image is placed, nothing shows.
   The testimonial quote-marks (below) are pure CSS and already work. */

/* Sections become a positioning context so absolute art is clipped to the band. */
.notion-root > .notion-callout { position: relative; }

/* HOME hero (dark) → Bull_Fallow.png. Placement tuned on the LIVE site via dev tools
   (Cam): the bull renders in flow at the top of the callout (not absolutely positioned),
   the columns are pulled up over it, and top padding is minimal. My render harness omits
   the navbar, so I couldn't see the bull clipping behind the transparent nav — these
   real-site values are the source of truth. */
#page-index .notion-callout.bg-purple-light:first-of-type {
  overflow: visible;
  padding-top: 10px;
}
#page-index .notion-callout.bg-purple-light:first-of-type > .notion-callout__content > .notion-image {
  margin: 0;
  opacity: 0.85;
  z-index: 0;
  pointer-events: none;
}
#page-index .notion-callout.bg-purple-light:first-of-type > .notion-callout__content > .notion-image img {
  width: 100%;
  height: auto;
  display: block;
}
#page-index .notion-callout.bg-purple-light:first-of-type > .notion-callout__content > .notion-column-list {
  position: relative;
  z-index: 1;
  margin-top: -100px;
}

/* HOME — the wave_half_logo lives INSIDE The Challenge callout and sweeps DOWN behind both
   The Challenge and The Practice. The Practice is made transparent so the downward sweep
   shows through it; the wave (z-index:0) sits behind The Challenge's text (raised to z:1).
   `height` is tuned so the bottom of the sweep lands at the bottom of The Practice.
   NOTE: requires the wave to be a block INSIDE The Challenge section (the FIRST of the two). */
#page-index .notion-callout.bg-gray-light:has(> .notion-callout__content > .notion-image img[src*="wave_half_logo"]),
#page-index .notion-callout.bg-gray-light:has(> .notion-callout__content > .notion-image img[src*="wave_half_logo"]) > .notion-callout__content {
  position: relative;
  overflow: visible;
}
/* The Practice (the gray section directly after The Challenge) → transparent so the sweep shows. */
#page-index .notion-callout.bg-gray-light:has(> .notion-callout__content > .notion-image img[src*="wave_half_logo"]) + .notion-callout.bg-gray-light {
  background: transparent !important;
}
#page-index .notion-image:has(img[src*="wave_half_logo"]) {
  position: absolute;
  bottom: -600px;            /* anchored below The Challenge, reaching into The Practice (Cam's tuning) */
  right: -5%;
  width: min(64%, 740px);
  height: 1000px;
  margin: 0;
  opacity: 0.42;
  z-index: 0;
  pointer-events: none;
}
#page-index .notion-image:has(img[src*="wave_half_logo"]) img {
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;   /* override the inline height:auto / object-fit:contain */
  display: block;
}
/* Keep The Challenge text above the wave. */
#page-index .notion-callout.bg-gray-light:has(> .notion-callout__content > .notion-image img[src*="wave_half_logo"]) > .notion-callout__content > :not(.notion-image) {
  position: relative;
  z-index: 1;
}

/* WHO THIS IS FOR — dark panel (a bg-purple-light callout nested in the gray section's
   right column). Concept: the prose is Fallow (not white); the "Our Leadership
   Residential…" line is the emphasised CTA — bold Fallow, larger, on its own line. */
#page-index .notion-callout.bg-gray-light .notion-column .notion-callout.bg-purple-light {
  border-radius: 40px;
}
#page-index .notion-callout.bg-gray-light .notion-column .notion-callout.bg-purple-light .notion-text {
  color: var(--fallow);
}
#page-index .notion-callout.bg-gray-light .notion-column .notion-callout.bg-purple-light .notion-text .color-pink {
  display: block;
  margin-top: 20px;
  font-size: 24px;
  line-height: 1.3;
  color: var(--fallow) !important;   /* override the global pink → mountain-grass */
}

/* WHO WE ARE → Living World (green) → Bull_Fallow.png, bottom-right. */
#page-who-we-are .notion-callout.bg-green-light > .notion-callout__content > .notion-image {
  position: absolute;
  bottom: -40px;
  right: -30px;
  width: min(40%, 380px);
  margin: 0;
  opacity: 0.45;
  z-index: 0;
  pointer-events: none;
}

/* The hero wave bleeds off the right (right:-4%), which widened the document and left a
   gap strip on every full-width block. Clip horizontal overflow at the page (x-only, so the
   desktop wave still peeks ABOVE the hero, and the sticky navbar — outside <main> — is fine). */
#page-who-we-are { overflow-x: clip; }

/* WHO WE ARE hero → the placed Sketchy_Logo renders full-width (720px) and dominates
   the top. Treat it as the concept's faint hero backdrop: small, faded, behind the text. */
#page-who-we-are .notion-callout.bg-gray-light:first-of-type { overflow: visible; }
#page-who-we-are .notion-image:has(img[src*="ketchy" i]) {
  position: absolute;
  top: -28px;
  right: -4%;
  width: min(66%, 820px);      /* desktop (Cam): larger, more present on the green */
  margin: 0;
  opacity: 0.42;               /* desktop (Cam) */
  z-index: 0;
  pointer-events: none;
}
#page-who-we-are .notion-image:has(img[src*="ketchy" i]) img { width: 100%; height: auto; display: block; }
#page-who-we-are .notion-callout.bg-gray-light:first-of-type > .notion-callout__content > :not(.notion-image) {
  position: relative;
  z-index: 1;
}

/* OFFERINGS → Bull_Black.svg, PROMINENT, LEFT. In the concept this drinking bull is a
   real illustration in the "Our offering" LIGHT section (around the Private Sessions
   row), not a watermark. Sits behind the left column's whitespace at full strength.
   Drop the bull into the "Our offering" gray callout (the one WITHOUT a quote). The
   top offset places it near the second row; tune live once it's in. */
#page-offerings .notion-callout.bg-gray-light:not(:has(.notion-quote)) { overflow: visible; }
#page-offerings .notion-callout.bg-gray-light:not(:has(.notion-quote)) > .notion-callout__content > .notion-image {
  /* In-flow (Cam's tuning): negative margins tuck the bull between the offering rows
     instead of absolutely positioning it. Mobile drops the negative margins below. */
  opacity: 0.92;
  z-index: 0;
  pointer-events: none;
  margin-bottom: -80px;
  margin-top: -30px;
}
#page-offerings .notion-callout.bg-gray-light:not(:has(.notion-quote)) > .notion-callout__content > * {
  position: relative;
  z-index: 1;
}

/* RESIDENTIAL → The Arc → Descent_Arc.png, inline full-width between intro + phase strip.
   Negative bottom margin pulls the 5 phase columns up so the curve weaves around them
   (scoped to the IMAGE-bearing purple callout = the arc, NOT the table-only NEXT RESIDENTIAL). */
#page-residential .notion-callout.bg-purple-light:has(.notion-image) > .notion-callout__content > .notion-image {
  display: block;
  max-width: 920px;
  margin: 24px auto -150px;   /* desktop (Cam): deep overlap so the curve weaves the phases */
  opacity: 0.6;               /* desktop: softened (mobile restored below) */
}
/* The 5 phase columns sit tighter + raised above the overlapping curve. NO `gap` — Super's
   column width math uses margins, so gap overflows → wrap (see §7 note). Reduce the 3-col
   divider padding (default 40px → 18px) for "less padding"; keep the outer edges flush.
   padding-bottom gives breathing room below the phases now the image pulls them up hard. */
#page-residential .notion-callout.bg-purple-light:has(.notion-image) .notion-column-list:last-of-type {
  position: relative;
  z-index: 1;
  padding-bottom: 50px;       /* desktop (Cam); mobile reset below */
}
#page-residential .notion-callout.bg-purple-light:has(.notion-image) .notion-column-list:last-of-type > .notion-column {
  padding-left: 18px;
  padding-right: 18px;
}
#page-residential .notion-callout.bg-purple-light:has(.notion-image) .notion-column-list:last-of-type > .notion-column:first-child { padding-left: 0; }
#page-residential .notion-callout.bg-purple-light:has(.notion-image) .notion-column-list:last-of-type > .notion-column:last-child { padding-right: 0; }

/* RESIDENTIAL HERO → half-wave line graphic. Place the wave as its OWN block directly in the
   hero callout (NOT inside a column) so it anchors to the whole hero, like the homepage wave.
   Sweeps the right side behind "Together we make room to fallow". */
#page-residential .notion-root > .notion-callout:first-of-type { position: relative; overflow: visible; }
#page-residential .notion-root > .notion-callout:first-of-type > .notion-callout__content { position: relative; overflow: visible; }
#page-residential .notion-root > .notion-callout:first-of-type > .notion-callout__content > .notion-image {
  position: absolute;
  top: -30%;                 /* desktop (Cam): lift the wave above the hero for a taller sweep */
  right: -4%;
  width: min(54%, 720px);
  height: 150%;              /* desktop (Cam) */
  margin: 0;
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}
#page-residential .notion-root > .notion-callout:first-of-type > .notion-callout__content > .notion-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: top right;
  display: block;
}
#page-residential .notion-root > .notion-callout:first-of-type > .notion-callout__content > :not(.notion-image) {
  position: relative;
  z-index: 1;
}

/* NEXT RESIDENTIAL panel heading = distinct from the other section eyebrows: Eucalypt +
   bigger. It's the dark panel that contains a table (the ARC is also purple but table-free). */
#page-residential .notion-callout.bg-purple-light:has(.notion-table) > .notion-callout__content > h3.notion-heading:first-of-type {
  color: var(--eucalypt) !important;
  font-size: clamp(15px, 1.6vw, 19px);
  letter-spacing: 0.16em;
}

/* FACILITATORS — names bigger, italic questions smaller, green card rounded. Identify the
   section as the gray callout that contains the nested green Shoalhaven card. */
#page-residential .notion-callout.bg-gray-light:has(.notion-callout.bg-green-light) .notion-column h3.notion-heading {
  font-size: clamp(26px, 2.6vw, 32px);
}
#page-residential .notion-callout.bg-gray-light:has(.notion-callout.bg-green-light) .notion-column:not(:has(.bg-green-light)) .notion-quote {
  font-size: clamp(18px, 2vw, 22px);
}
/* Nested green facilitator card → rounded corners (matches the concept). */
.notion-column .notion-callout.bg-green-light,
.notion-column .notion-callout.bg-brown-light { border-radius: 16px; }

/* Who We Are → bio portraits — drop Melis/Ruby photos into each bio's LEFT column →
   circular crop (matches the mockup). */
#page-who-we-are .notion-column .notion-image {
  width: 280px;          /* bundle: 280px portrait column */
  max-width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 0 24px;
}
#page-who-we-are .notion-column .notion-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 16px 14px 0 2px var(--fallow);   /* offset tan ring behind the circle (concept) */
}

/* Bios = gray callout that holds a portrait (excludes hero/Our Name/testimonial). Name →
   Eucalypt + larger; the role line under the portrait → Eucalypt too (matches the concept). */
#page-who-we-are .notion-callout.bg-gray-light:has(.notion-image) .notion-column h3.notion-heading {
  color: var(--eucalypt);
  font-size: clamp(30px, 3.4vw, 42px);
}
#page-who-we-are .notion-callout.bg-gray-light:has(.notion-image) .notion-column:has(.notion-image) .notion-text {
  color: var(--eucalypt);
}

/* WHAT WE STAND FOR → the 01–06 index numbers are large Fraunces Fallow numerals (concept),
   not the small Jost labels used elsewhere. */
#page-who-we-are .notion-callout.bg-purple-light .notion-column > .notion-text__content:first-child > strong:only-child {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: clamp(40px, 5vw, 56px);
  letter-spacing: 0;
  color: var(--fallow);
  margin-bottom: 12px;
}

/* WHO WE ARE hero → Eucalypt ground (concept). The Notion callout is gray and its image URL
   is a volatile signed link (can't reliably flip the callout in Notion), so paint it here and
   light the text. Eyebrow + headline + subhead all go to gentle-white on the green. */
#page-who-we-are .notion-root > .notion-callout:first-of-type {
  background: var(--eucalypt) !important;
}
#page-who-we-are .notion-root > .notion-callout:first-of-type,
#page-who-we-are .notion-root > .notion-callout:first-of-type .notion-text,
#page-who-we-are .notion-root > .notion-callout:first-of-type .notion-text__content,
#page-who-we-are .notion-root > .notion-callout:first-of-type h1.notion-heading,
#page-who-we-are .notion-root > .notion-callout:first-of-type > .notion-callout__content > h3.notion-heading:first-of-type {
  color: var(--gentle-white) !important;
}

/* TESTIMONIAL — one treatment on ALL screens: JOST quote, centred, framed by a sketch
   divider above + below (no squiggle frame), with Fallow quote-marks in the corners.
   Any placed squiggle image is hidden. */
.notion-callout.bg-gray-light:has(> .notion-callout__content > .notion-quote) > .notion-callout__content {
  position: relative;
}
.notion-callout.bg-gray-light:has(> .notion-callout__content > .notion-quote) > .notion-callout__content > .notion-image {
  display: none;
}
.notion-callout.bg-gray-light > .notion-callout__content > .notion-quote {
  position: relative;
  z-index: 1;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  border-left: none;
  max-width: 760px;
  margin: 24px auto 0;
  padding: 72px 24px;
  text-align: center;
  font-size: clamp(19px, 2.2vw, 26px);
  line-height: 1.4;
  color: var(--void);
  background: var(--sketch-fallow) top center    / min(560px, 78%) auto no-repeat,
             var(--sketch-fallow) bottom center / min(560px, 78%) auto no-repeat;
}
/* Fallow quote-marks tucked into the corners. */
.notion-callout.bg-gray-light > .notion-callout__content > .notion-quote::before,
.notion-callout.bg-gray-light > .notion-callout__content > .notion-quote::after {
  position: absolute;
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: clamp(46px, 5vw, 64px);
  line-height: 1;
  color: var(--fallow);
  z-index: 2;
}
.notion-callout.bg-gray-light > .notion-callout__content > .notion-quote::before { content: '\201C'; top: 26px; left: 6px; }
.notion-callout.bg-gray-light > .notion-callout__content > .notion-quote::after  { content: '\201D'; bottom: 26px; right: 6px; }
/* Attribution line under the quote (centred; override the 60ch measure that left-biases it). */
.notion-callout.bg-gray-light > .notion-callout__content > .notion-quote + .notion-text {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  text-align: center !important;
  max-width: initial !important;
}

/* Hand-drawn section dividers are now author-driven: drop a divider (`---`) in
   Notion between two sections and §2 renders it as the sketch line. Homepage is
   divider-free by design (suppressed in §2). */

/* ── 14. RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --pad-x: 24px; --pad-y: 48px; }
  .notion-column-list { flex-direction: column; gap: 32px; }
  /* Override Super's inline width:50% so stacked columns are full-width. */
  .notion-column-list > .notion-column {
    width: 100% !important;
    margin-inline-start: 0 !important;
    padding: 0 !important;
    border-left: none !important;
  }
  .notion-text__content { max-width: none; }

  /* Drop heavy background art on small screens so text stays legible. */
  #page-who-we-are .notion-callout.bg-green-light,
  #page-offerings .notion-callout.bg-gray-light:first-of-type,
  #page-residential .notion-callout.bg-purple-light { background-image: none; }

  /* WHO WE ARE hero wave on mobile (Cam): full-width, seated lower; clip the hero so the
     overhang can't cause horizontal scroll. */
  #page-who-we-are .notion-callout.bg-gray-light:first-of-type { overflow: hidden; }
  #page-who-we-are .notion-image:has(img[src*="ketchy" i]) {
    top: 10px;
    width: min(100%, 820px);
  }

  /* Arc on mobile: no negative margin (Cam) — the curve-weaves-columns effect doesn't apply
     once the phases stack vertically; full opacity, no extra padding-bottom. */
  #page-residential .notion-callout.bg-purple-light:has(.notion-image) > .notion-callout__content > .notion-image {
    margin-bottom: 0;
    opacity: 1;
  }
  #page-residential .notion-callout.bg-purple-light:has(.notion-image) .notion-column-list:last-of-type {
    padding-bottom: 0;
  }

  /* Hero wave on mobile: the desktop top:-30% / height:150% would spill above the hero and
     off the right edge → horizontal scroll. Clip the hero and re-seat the wave fully inside it
     as a faint right-side backdrop. Conservative starting point — tune from a phone screenshot. */
  #page-residential .notion-root > .notion-callout:first-of-type { overflow: hidden; }
  #page-residential .notion-root > .notion-callout:first-of-type > .notion-callout__content > .notion-image {
    top: -20%;
    height: 200%;
    width: 200%;
    right: -15%;
    opacity: 0.6;
  }

  /* The Challenge/Practice wave looks stretched on a narrow screen (the tall, thin box
     distorts the square image under object-fit:fill). Use cover so it keeps its
     proportions — shows an undistorted vertical sweep — and soften it a touch. */
  #page-index .notion-image:has(img[src*="wave_half_logo"]) img { object-fit: cover !important; }
  #page-index .notion-image:has(img[src*="wave_half_logo"]) { width: 78%; opacity: 0.3; }

  /* HERO — give the in-flow bull room below the navbar; don't pull the title up over
     it on a narrow screen (the desktop -100px overlap looks cramped here). */
  #page-index .notion-callout.bg-purple-light:first-of-type { padding-top: 48px; }
  #page-index .notion-callout.bg-purple-light:first-of-type > .notion-callout__content > .notion-image { margin-bottom: 12px; }
  #page-index .notion-callout.bg-purple-light:first-of-type > .notion-callout__content > .notion-column-list { margin-top: 0; }

  /* Offerings bull: drop the desktop negative margins on a narrow screen so it sits
     naturally in flow rather than overlapping the stacked rows. */
  #page-offerings .notion-callout.bg-gray-light:not(:has(.notion-quote)) > .notion-callout__content > .notion-image {
    margin-top: 0;
    margin-bottom: 0;
  }
  /* Testimonial now uses the same sketch-divider treatment on all screens (§13). */
}