/* ============================================================
   THE FIELD
   One continuous Linen ground the page moves through: Linen first,
   photographs that bleed, dark accent panels cut on a slight
   diagonal, and content that arrives as you reach it.
   5 September 2026. The layers of blurred light that used to sit
   under everything (her photograph blurred to haze, gold beams,
   discs) are gone. They cost weight, read as a template, and were
   nearly invisible. What carries the site now is photography and
   type. Texture stays in texture.css.

   Linen is the primary light surface, Deep Slate is names and
   headings, Oxblood is the voice, Raw Gold is mark, dividers and
   buttons, Obsidian and Deep Plum are dark surfaces, Sage takes
   labels and captions on light. No colour appears here that is not
   in tokens.css.

   js/field.js parallaxes the photographs and marks content as it
   arrives. Without it everything stands still and stays readable.
   ============================================================ */

body.is-field { background: var(--linen); color: var(--text); overflow-x: hidden; }
body.is-field main, body.is-field .site-footer, body.is-field .skip-link { position: relative; z-index: 1; }
body.is-field .site-header { z-index: 5; }   /* above the hero, which starts under it */

/* ---- Header. Linen, on its drawn rule, and it stays as you scroll. ----
   base.css makes it sticky; nothing here overrides that (5 September,
   Cléa: "her top nav bar to be persistent as you scroll down"). */
body.is-field .site-header { position: sticky; top: 0; background: var(--linen); }
body.is-field .site-header__inner { min-height: 5rem; }
@media (max-width: 78rem) {
  body.is-field .nav { background: var(--linen); border-bottom-color: var(--rule); }
}
body.is-field .site-footer { background: var(--obsidian); }

/* ---- Stretches. Linen field. The palette in its roles. ------------ */
.stretch { position: relative; padding-block: var(--section); }
.stretch--first { padding-top: 0; }
.stretch--gap { margin-top: clamp(3rem, 8vh, 6rem); }

/* ---- Panels. Deep Slate or Deep Plum, the dark accent surfaces. --------
   A panel is a dark ground the content sits on, cut on a slight diagonal
   with a straight edge. Ink is Linen, the voice is gold, buttons are
   gold with an Obsidian label. Slate replaced Obsidian on 5 September
   (Cléa: "I like slate as a panel color more than obsidian"); Obsidian
   keeps the footer and the veils under the photographs. The diagonal
   cut is gone (Cléa: "a white line separator that is thinner at one end
   than the other. I don't like it"); the polygon in the markup stays
   and is simply not drawn. */
.stretch--panel { color: var(--dk-text); isolation: isolate; padding-block: var(--section); --rule-dark: var(--rule-slate);
  background: var(--slate); }
.stretch--panel > .panel__bg { display: none; }
.stretch--plum { background: var(--plum); }

/* The crack of light. Where two dark surfaces meet, a hairline of gold
   between them, even from end to end. */
.stretch--panel + .stretch--panel, .stretch--panel + .bleed, .bleed + .stretch--panel, .bleed + .bleed,
main:has(> .stretch--panel:last-child) + .site-footer, main:has(> .bleed:last-child) + .site-footer {
  border-top: 2px solid var(--gold); }
.stretch--panel h1, .stretch--panel h2, .stretch--panel h3, .stretch--panel h4 { color: var(--dk-text); }
.stretch--panel em, .stretch--panel i, .stretch--panel .pullquote, .stretch--panel .hero__sub, .stretch--panel .pillar__sub { color: var(--dk-voice); }
.stretch--panel p em, .stretch--panel li em { color: var(--dk-text); }
.stretch--panel .eyebrow, .stretch--panel .cta-note, .stretch--panel figcaption, .stretch--panel .plate__caption, .stretch--panel cite { color: var(--dk-soft); }
.stretch--panel a { color: var(--dk-text); text-decoration-color: var(--gold); }
.stretch--panel a:hover { color: var(--gold); }
.stretch--panel .btn { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.stretch--panel .btn:hover { background: transparent; border-color: var(--gold); color: var(--gold); }
.stretch--plum .btn { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.stretch--plum .btn:hover { background: transparent; color: var(--gold); }
.stretch--panel .btn--ghost { background: transparent; border-color: var(--gold); color: var(--gold); }
.stretch--panel .btn--ghost:hover { background: var(--gold); color: var(--on-gold); }
.stretch--panel .pullquote { border-left-color: var(--gold); }
.stretch--panel .testimonial, .stretch--panel .pillar { border-top-color: var(--rule-dark); }
.stretch--panel .field label { color: var(--dk-soft); }
.stretch--panel .field input { color: var(--dk-text); border-bottom-color: var(--gold); }
.stretch--panel .todo { background: transparent; border-left-color: var(--gold); color: var(--dk-soft); }
.stretch--panel .imgslot { color: var(--dk-soft); background: none; border-color: var(--rule-dark); }
.stretch--panel .mark, .stretch--panel .rule-roots { color: var(--gold); }
.stretch--panel .door { border-color: var(--rule-dark); }
.stretch--panel .door p { color: var(--dk-soft); }
.stretch--panel .door__more { color: var(--gold); }
.stretch--panel .door:hover { border-color: var(--gold); background: rgba(184,150,106,.07); }
.stretch--panel :focus-visible { outline-color: var(--gold); }

/* ---- The hero: Linen, the title in Slate, the doorway beside it -----
   The photograph is a column that runs to the right edge of the viewport
   and the words never cross it, at any width. Under 52rem the photograph
   follows the words. */
.hero--split-photo { padding-top: clamp(3rem, 8vh, 6rem); padding-bottom: 0; min-height: 0; }
.hero--split-photo .bleed-grid { align-items: center; }
.hero--split-photo .hero__inner { grid-column: wrap-start / 8; padding-bottom: clamp(3.5rem, 8vh, 6rem); padding-right: var(--s-5); }
.hero--split-photo .hero__plate { grid-column: 8 / edge-end; align-self: stretch; margin: 0; min-height: 34rem; }
.hero--split-photo .hero__plate img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; display: block; }
.hero--split-photo .eyebrow { margin-bottom: var(--s-4); }
.title { margin: 0 0 var(--s-3); font-weight: 300; line-height: 1.02; letter-spacing: .1em;
  font-variant-caps: small-caps; font-size: clamp(2.5rem, 5.6vw, 5.25rem); color: var(--heading); max-width: none; }
.title__rule { display: block; width: clamp(6rem, 12vw, 10rem); height: 1px; background: var(--gold); margin: var(--s-3) 0 var(--s-4); }
.hero--split-photo .hero__lede { max-width: 40ch; margin-bottom: var(--s-4); }
.hero--split-photo .hero__sub { max-width: 30ch; margin-bottom: var(--s-4); }

/* ---- Photographs that bleed, with a shore for an edge --------------- */
.plate { display: block; width: 100%; height: auto; overflow: visible; transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
.plate image { transform: scale(1.08); transform-origin: 50% 50%; transform-box: fill-box; }
.plate:hover .plate__veil { opacity: .5; }
.plate__veil { fill: var(--sage); opacity: 0; transition: opacity 2s; pointer-events: none; }
.plate__caption { font-family: var(--font-label); font-size: var(--step-meta); color: var(--text-soft); margin-top: var(--s-3); }

/* Drift. A framed photograph moves a little slower than the page: the
   frame clips, the image inside is scaled up so no edge shows. */
[data-drift] { overflow: hidden; }
[data-drift] img { transform: translate3d(0, var(--dy, 0px), 0) scale(1.12); will-change: transform; }
@media (max-width: 52rem) { [data-drift] img { transform: none; } }

/* A band: a photograph the full width of the viewport, between two
   stretches, with its caption in the gutter. */
.stretch--band { padding-block: 0; }
.band { margin: 0; }
.band img { width: 100%; height: auto; aspect-ratio: 21 / 8; object-fit: cover; display: block; }
.band figcaption { padding-inline: var(--gutter); margin-top: var(--s-2); }
@media (max-width: 52rem) { .band img { aspect-ratio: 3 / 2; } }

/* ---- Sheets are gone. On a Linen field a reading block sits on the
   field. The class stays for the markup; it only keeps the measure. */
.sheet { position: relative; }
.sheet__bg { display: none; }

/* ---- Compositions ----------------------------------------------------- */
/* A twelve column grid that knows where the viewport edge is, so a
   photograph can run to the edge while the sheet keeps the measure. */
.bleed-grid { display: grid; column-gap: 0;
  grid-template-columns: [edge-start] minmax(var(--gutter), 1fr) [wrap-start] repeat(12, minmax(0, calc((70rem - 2 * var(--gutter)) / 12))) [wrap-end] minmax(var(--gutter), 1fr) [edge-end]; }

/* The glimpse: photograph to the right edge, sheet over its foot. */
.glimpse .plate { grid-column: 7 / edge-end; grid-row: 1; }
.glimpse .card { grid-column: wrap-start / 10; grid-row: 1; align-self: end; z-index: 2; margin-bottom: -5rem; }
.glimpse-caption { grid-column: wrap-start / wrap-end; margin-top: 6.5rem; }

/* Michelle: her portrait as it is, unwarped and uncropped, words beside it. */
.portrait-row .portrait { grid-column: wrap-start / 7; grid-row: 1; align-self: center; margin: 0; }
.portrait-row .portrait img { width: 100%; height: auto; display: block; }
.portrait-row .prose { grid-column: 8 / wrap-end; grid-row: 1; align-self: center; padding-block: var(--s-5); }

/* The path: the four pillars as a numbered reading. The numerals are
   the graphic: Spectral Light, large, in Sage, the one place Sage is big
   enough to be seen (5 September). */
.path-sheet { grid-column: wrap-start / wrap-end; }
.pillars--numbered { counter-reset: pillar; gap: 0 var(--s-5); }
.pillars--numbered .pillar { counter-increment: pillar; display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--s-3);
  padding-block: var(--s-4); border-top: 1px solid var(--gold); align-items: start; }
.pillars--numbered .pillar::before { content: counter(pillar, upper-roman); font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.75rem, 5vw, 4.25rem); line-height: .8; color: var(--text-soft); margin-top: .1em; }
.pillars--numbered .pillar > div > p { max-width: 62ch; }
@media (min-width: 48rem) { .pillars--numbered .pillar { grid-template-columns: 7rem 1fr; } }

/* Three doors, framed the way her quote is framed: two gold hairlines. */
.doors { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.door--framed { border: 1px solid var(--gold); outline: 1px solid var(--rule-dark); outline-offset: 4px; padding: var(--s-4);
  background: transparent; transition: background var(--transition), outline-color var(--transition); }
.door--framed:hover { background: rgba(184,150,106,.07); outline-color: var(--gold); border-color: var(--gold); }
.centered { text-align: center; } .centered > * { margin-inline: auto; }

/* Words, on a narrower sheet. */
.words-sheet { grid-column: 2 / 13; }

/* The close */
.close-row { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 52rem) { .close-row { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.close-row h2 { font-size: var(--step-display); line-height: var(--lh-display); letter-spacing: -0.02em; max-width: 16ch; }

/* ---- A card: a Deep Plum panel small enough to sit over a photograph. */
.card { position: relative; isolation: isolate; color: var(--dk-text); padding: clamp(2.25rem, 5vw, 4rem) clamp(1.5rem, 4.5vw, 4rem); background: var(--plum); }
.card > .panel__bg { display: none; }
.card .eyebrow { color: var(--dk-soft); } .card p { color: var(--dk-text); } .card em { color: var(--dk-text); }

/* ---- Arrivals ----------------------------------------------------- */
html[data-field] [data-reveal] { opacity: 0; transform: translateY(22px);
  transition: opacity 1.3s cubic-bezier(.2,.6,.2,1), transform 1.3s cubic-bezier(.2,.6,.2,1); }
html[data-field] [data-reveal].is-in { opacity: 1; transform: none; }
html[data-field] .bleed--hero [data-reveal], html[data-field] .bleed--page [data-reveal] { transition-delay: calc(var(--i, 0) * .18s); }

/* ---- Narrow -------------------------------------------------------- */
@media (max-width: 52rem) {
  .bleed-grid { display: block; }
  .glimpse .card { margin: -4rem var(--gutter) 0; }
  .glimpse-caption { margin: var(--s-3) var(--gutter) 0; }
  .portrait-row .portrait { margin-inline: var(--gutter); }
  .portrait-row .prose { padding: var(--s-5) var(--gutter) 0; }
  .path-sheet, .words-sheet { margin-inline: var(--gutter); }
  .stretch--panel > .panel__bg { inset: 0; }
  .plate { transform: none; }
}

/* ---- Off, when asked ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .plate { transform: none; }
  [data-drift] img { transform: none; }
  html[data-field] [data-reveal] { opacity: 1; transform: none; transition: none; }
  .plate__veil { transition: none; }
}

/* ---- Inner pages ------------------------------------------------------
   The same field under every page. The page's hero sits on the field,
   left aligned, under the header, with a photograph beside the title
   where one exists; the reading body sits in the measure; dark and plum
   sections and the close sit on the field. */
.hero--inner { padding-top: clamp(3.5rem, 9vh, 7rem); padding-bottom: clamp(3rem, 6vw, 5rem); min-height: 0; }
.hero--inner .hero__figure { margin-top: var(--s-5); }
.hero--inner .hero__title { max-width: 14ch; }
.hero--split .wrap { display: grid; gap: var(--s-5); align-items: end; }
@media (min-width: 52rem) { .hero--split .wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-6); } }
.hero__photo { margin: 0; }
.hero__photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.hero__photo--wide img { aspect-ratio: 3 / 2; }
.stretch--sheet { padding-block: calc(var(--section) * .8); }
.stretch--sheet .wrap.prose > * { max-width: var(--wrap-prose); }
.stretch--close { padding-bottom: calc(var(--section) * 1.2); }
html[data-field] .hero--inner [data-reveal] { transition-delay: calc(var(--i, 0) * .14s); }

/* Headings inside a card sit on Plum, so they go Linen (rule 4). */
.card h1, .card h2, .card h3 { color: var(--dk-text); }
.card h2 { font-size: var(--step-head); margin-bottom: var(--s-3); }

/* Narrow: the words first, then the photograph, full width. */
@media (max-width: 52rem) {
  .hero--split-photo .hero__inner { padding-inline: var(--gutter); padding-bottom: var(--s-5); padding-right: var(--gutter); }
  .hero--split-photo .hero__plate { min-height: 0; }
  .hero--split-photo .hero__plate img { aspect-ratio: 4 / 3; height: auto; }
}

/* ============================================================
   THE HOMEPAGE RHYTHM (5 September). Full-bleed photograph with one
   line centred on it, then air, a split of photograph and words, a
   quote on a photograph, the path as a grid, the doors, the portrait,
   the words, and a close on a photograph. A lot of air between.
   ============================================================ */

/* Air. The home's Linen stretches breathe more than the inner pages. */
.stretch--air { padding-block: clamp(5rem, 12vh, 10rem); }

/* Bleeds: a photograph the width of the viewport under one centred
   line. A flat Obsidian veil at 58 percent sits between the photograph
   and the words, so Linen ink measures on every part of the picture.
   On dark ground the voice becomes the mark: gold. */
.bleed { position: relative; isolation: isolate; color: var(--dk-text); text-align: center;
  display: grid; place-items: center; padding-block: clamp(6rem, 14vh, 10rem); margin: 0; }
.bleed--hero { min-height: 82svh; }
.bleed__photo { position: absolute; inset: 0; z-index: -1; margin: 0; overflow: hidden; background: var(--obsidian); }
.bleed__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bleed__photo::after { content: ""; position: absolute; inset: 0; background: rgba(26, 20, 16, .66); }
/* The banyan is busy, so where it carries a title the veil goes deeper. */
.bleed--deep .bleed__photo::after { background: rgba(26, 20, 16, .78); }
.bleed__inner { display: flex; flex-direction: column; align-items: center; }
.bleed__inner > * { max-width: 40ch; }
.bleed .eyebrow, .bleed .cta-note { color: var(--dk-text); }
.bleed .eyebrow { margin-bottom: var(--s-4); max-width: none; }
.bleed .title, .bleed h1, .bleed h2 { color: var(--dk-text); }
.bleed .title { font-size: clamp(1.75rem, 3.4vw, 3rem); letter-spacing: .12em; max-width: none; text-wrap: balance; }
.bleed .hero__sub, .bleed em { color: var(--dk-text); }
.bleed .title__rule { margin-inline: auto; }
.bleed .hero__sub { max-width: 30ch; margin-bottom: var(--s-4); }
.bleed .hero__lede { max-width: 40ch; margin-bottom: var(--s-4); color: var(--dk-text); }
.bleed .btn { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.bleed .btn:hover { background: transparent; color: var(--gold); }
.bleed .pullquote--bare { border: 0; padding: 0; margin: 0; max-width: 26ch; color: var(--dk-text);
  font-size: clamp(1.5rem, 2.6vw, 2.125rem); line-height: 1.4; }
.bleed h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.2; max-width: 22ch; margin-bottom: var(--s-4); }
.bleed :focus-visible { outline-color: var(--gold); }

/* The intro: one paragraph, centred, larger than body. */
.lede--intro { font-size: clamp(1.375rem, 2.4vw, 1.875rem); line-height: 1.55; max-width: 36ch; margin-inline: auto; color: var(--heading); }
/* 10 September: the doc's intro is two sentences, so it takes a wider measure a step smaller. */
.lede--intro.lede--long { font-size: clamp(1.25rem, 2vw, 1.625rem); max-width: 48ch; }
.path-sheet__intro + .path-sheet__intro { margin-top: var(--s-3); }
.path-sheet > h2.centered { text-align: center; margin-bottom: var(--s-5); }
.eyebrow.centered { text-align: center; }

/* A split: photograph one side, words the other, centred on each other. */
.split-photo { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 52rem) { .split-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(3rem, 7vw, 7rem); } }
.split-photo__img { margin: 0; }
.split-photo__img img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.split-photo--portrait .split-photo__img img { aspect-ratio: 4 / 5; }   /* 10 September: her headshots are upright */
.split-photo__text h2 { margin-bottom: var(--s-4); }

/* Two columns of words. */
.two-col { display: grid; gap: var(--s-5); }
@media (min-width: 52rem) { .two-col { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 6rem); align-items: start; } }
.two-col h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.25; }
.two-col h2 em { display: block; margin-top: var(--s-3); }

/* Inner pages open the same way: the photograph, the title centred on it,
   the one line under it. Shorter than the home's. */
.bleed--page { min-height: 56svh; padding-block: clamp(5rem, 12vh, 8rem); }
.bleed--page h1 { font-size: var(--step-display); line-height: var(--lh-display); letter-spacing: -0.02em;
  max-width: 22ch; text-wrap: balance; margin-bottom: var(--s-3); }
.bleed .hero__sub { color: var(--dk-text); }
.bleed .btn--ghost { background: transparent; border-color: var(--gold); color: var(--gold); }
.bleed .btn--ghost:hover { background: var(--gold); color: var(--on-gold); }
.bleed p > a:not(.btn) { color: var(--dk-text); text-decoration-color: var(--gold); }
.bleed p > a:not(.btn):hover { color: var(--gold); }
.bleed h2 em { color: var(--dk-text); }

/* ============================================================
   GATHERINGS (7 September). The copy doc rebuilt the page around a
   Google Calendar agenda embed. No photograph in the hero, since it
   pushes the dates too far down. One column at the reading measure.
   Spacing, tightest to loosest: sessions to calendar is tight, hero
   to Tandava is open, calendar to the newsletter is the widest gap
   on the page, because when the calendar is empty (and it will be,
   for months at a time) the newsletter panel is what the eye lands
   on next, and it has to read as the invitation rather than a footer
   signup. No discovery-call button anywhere on the page: Gatherings
   is the one deliberate exception to the site's single conversion,
   and the footer carries no call either.
   ============================================================ */
.hero--plain { padding-top: clamp(4rem, 10vh, 7rem); padding-bottom: 0; }
.hero--plain h1 { max-width: none; }
.hero--plain .hero__sub { font-family: var(--font-display); font-weight: 300; font-style: italic;
  font-size: var(--step-voice); line-height: var(--lh-voice); color: var(--voice); max-width: 30ch; }
.gath { position: relative; }
.gath h2 { margin-bottom: var(--s-3); }
.hero--plain + .gath { margin-top: clamp(3.5rem, 9vh, 6rem); }
.gath--tandava, .gath--sessions { margin-top: clamp(3rem, 7vh, 5rem); }
.gath--dates .gatherings-calendar { margin-top: var(--s-4); }
.gath--letter { margin-top: clamp(6rem, 16vh, 10rem); }

/* The calendar fills the text column, never wider. The iframe never
   scrolls inside itself; its height is tuned so three or four entries
   fill it. The dashed slot holds the same room until the calendar ID
   arrives. */
.gatherings-calendar { width: 100%; }
.gatherings-calendar iframe { display: block; width: 100%; border: 0; background: var(--linen); }
.embed--calendar { min-height: 25rem; }

/* The newsletter panel on Gatherings: the letter, larger, beside the form. */
.gath--letter .lede { color: var(--dk-text); max-width: 34ch; }
.gath--letter .field { max-width: none; }
/* The footer carried a discovery-call column until 7 September (Cléa: "it
   should not be there"); nothing on Gatherings needs hiding now, and the
   body class stays as the page's name. */

/* The MailChimp embed form's slot, on Home, Contact and Gatherings
   (7 September, Cléa: a placeholder for the embed, no copy around it). */
.embed--form { min-height: 16rem; }
.stretch--panel .embed { border-color: var(--rule-dark); color: var(--dk-soft); }

/* THE FORK on Coaching. Two paths that look like two paths: the first
   on the sunk Linen with a gold rule down its left edge and Sage marks,
   the second on Plum with the marks in gold. A drawn gold line splits
   from the lead line to reach them and rejoins under them at the close.
   Under 52rem the paths stack and the lines stay out of it. */
.fork { margin-top: var(--s-6); }
.fork__lead { margin: 0 auto; color: var(--heading); max-width: 44ch; }
.fork__lines { display: none; width: 100%; height: 6.5rem; color: var(--gold); }
.paths { display: grid; gap: var(--s-4); }
.path { position: relative; padding: var(--s-5) var(--s-4) var(--s-6); }
.path--before { background: var(--bg-sunk); border-left: 1px solid var(--gold); }
.path--after { background: var(--plum); color: var(--dk-text); }
.path--after h3, .path--after p { color: var(--dk-text); }
.path__mark { display: block; width: 3.25rem; height: auto; margin-bottom: var(--s-4); color: var(--sage); }
.path--after .path__mark { color: var(--gold); }
.path h3 { font-size: var(--step-sub); line-height: 1.25; max-width: 20ch; margin-bottom: var(--s-3); }
.path p { max-width: 46ch; }
.fork__close { margin: 0 auto; max-width: 44ch; }
@media (min-width: 52rem) {
  .fork__lines { display: block; }
  .paths { grid-template-columns: 1fr 1fr; }
  .path { padding: var(--s-6) var(--s-5) var(--s-7); }
}
@media (max-width: 52rem) { .fork__lead { margin-bottom: var(--s-5); } .fork__close { margin-top: var(--s-5); } }