/* The Third Field: shared site stylesheet (brand system v2, design/SYSTEM.md sections 3, 4, 5 and 7).
   Colours, type families and motion timings come from src/styles/tokens.css; nothing here names a colour.
   Page groups add their own sheet through the layout's `styles` prop (/enterprise/*.css). */

/* ── Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; overflow-x: clip; overscroll-behavior-x: none; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: var(--text);
  font-weight: 400;
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
ul, ol { padding: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[data-realm="practice"] :focus-visible { outline-color: var(--accent); }
[hidden] { display: none; }
::selection { background: var(--tf-gold-wash); color: var(--ink); }

.skip { position: absolute; left: -999px; top: 0; z-index: 100; padding: .6rem 1rem; background: var(--heading); color: var(--canvas); }
.skip:focus { left: 1rem; top: 1rem; }
.sr, .scenario-sr { position: absolute; left: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Type scale ─────────────────────────────────────────────────────── */
h1, h2, h3 { color: var(--heading); font-family: var(--serif); font-weight: 400; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 1.55rem + 3.7vw, 4.25rem); line-height: 1.06; }
h2 { font-size: clamp(2rem, 1.4rem + 2.3vw, 3.125rem); line-height: 1.12; }
h3 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.625rem); line-height: 1.25; }
h4 { color: var(--ink); font-family: var(--sans); font-size: 1rem; font-weight: 600; line-height: 1.4; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: inherit; color: var(--emphasis-text); }
p { max-width: var(--measure); text-wrap: pretty; }
p + p { margin-top: 1.1em; }
strong { color: var(--ink); font-weight: 600; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .2em; transition: text-underline-offset var(--t-fast) var(--ease-settle), color var(--t-fast); }
p a:hover, li a:hover { text-underline-offset: .32em; }
.lead { max-width: 36rem; color: var(--ink); font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.375rem); line-height: 1.5; }
.small, .fine-print, .source-note { font-size: .875rem; line-height: 1.65; color: var(--ink-mute); }
.q { max-width: var(--measure); color: var(--heading); font: italic clamp(1.4rem, 2.6vw, 1.9rem) / 1.35 var(--serif); }

/* Eyebrow + heading + lead is the section opener everywhere */
.eyebrow {
  display: flex; align-items: center; gap: .75rem;
  margin: 0 0 1.1rem;
  color: var(--emphasis-text);
  font: 600 .8125rem / 1.4 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; flex: none; width: 1.5rem; height: 1px; background: var(--emphasis); }
[data-realm="practice"] .eyebrow { color: var(--accent); }

/* ── Layout ─────────────────────────────────────────────────────────── */
.wrap { width: min(var(--wide), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: var(--space-section); }
.section.tint, .band-soft { background: var(--canvas-2); }
.band-soft { padding-block: var(--space-section); }

/* 12 columns on desktop, 6 on tablet, 4 on phone. Children span the row until 64rem. */
:root { --cols: repeat(4, minmax(0, 1fr)); --gap: var(--space-inside); }
@media (min-width: 40rem) { :root { --cols: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 64rem) { :root { --cols: repeat(12, minmax(0, 1fr)); --gap: clamp(1.5rem, 3vw, 2.5rem); } }
.grid { display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); row-gap: var(--space-inside); }
.grid > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 64rem) {
  .grid > .s-3 { grid-column: span 3; } .grid > .s-4 { grid-column: span 4; } .grid > .s-5 { grid-column: span 5; }
  .grid > .s-6 { grid-column: span 6; } .grid > .s-7 { grid-column: span 7; } .grid > .s-8 { grid-column: span 8; }
}
/* Section opener: heading on the left, copy on the right */
.split-heading { display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); row-gap: 1.25rem; align-items: start; margin-bottom: var(--space-inside); }
.split-heading > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 64rem) {
  .split-heading > :first-child { grid-column: 1 / span 6; }
  .split-heading > :last-child { grid-column: 8 / span 5; }
}
.split-heading > div > p + p, .split-heading > p + p { margin-top: 1rem; }
.section-heading { margin-bottom: var(--space-inside); }
/* The one dark band a page is allowed (SYSTEM.md section 4) */
.band-deep, .section.deep { background: var(--deep); color: var(--deep-ink); }
.band-deep h1, .band-deep h2, .band-deep h3, .band-deep h4, .band-deep strong, .section.deep h1, .section.deep h2, .section.deep h3, .section.deep .q { color: var(--deep-ink); }
.band-deep h2 em, .band-deep h3 em, .section.deep h2 em { color: var(--deep-emphasis); }
.band-deep .eyebrow, .section.deep .eyebrow { color: var(--deep-emphasis); }
.band-deep .eyebrow::before { background: var(--deep-emphasis); }
.band-deep p, .section.deep p { color: color-mix(in srgb, var(--deep-ink) 86%, transparent); }
.band-deep a, .section.deep a { color: var(--deep-emphasis); }

/* ── Header ─────────────────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--canvas) 94%, transparent); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.5rem; }
.lockup { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--heading); text-decoration: none; white-space: nowrap; }
.brand-mark { width: 28px; height: 28px; flex: none; }
.brand-name { font: 400 1.25rem / 1 var(--serif); letter-spacing: -.01em; }
.brand-realm { display: inline-flex; align-items: center; gap: .65rem; color: var(--accent); font: 600 .6875rem / 1 var(--sans); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.brand-realm > span { color: var(--tf-gold); font-size: 2rem; line-height: 0; }
.site-nav { display: flex; align-items: center; gap: clamp(1rem, 1.6vw, 1.75rem); }
.site-nav a:not(.button) { white-space: nowrap; padding-block: .6rem; color: var(--ink-soft); font: 500 .9375rem / 1.2 var(--sans); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: .5em; }
.site-nav a:not(.button):hover { color: var(--ink); text-decoration-color: var(--emphasis); text-underline-offset: .4em; }
.site-nav a[aria-current="page"] { color: var(--ink); text-decoration-color: var(--emphasis); text-underline-offset: .4em; }
.nav-cta { min-height: 2.5rem; padding: .5rem 1.1rem; font-size: .9375rem; white-space: nowrap; }
.menu-toggle { display: none; align-items: center; gap: .6rem; min-height: 2.75rem; padding: 0 .95rem; border: 1px solid var(--line-strong); border-radius: var(--r-s); background: transparent; color: var(--heading); font: 600 .9375rem / 1 var(--sans); cursor: pointer; }
.menu-toggle span { font-size: 1.4rem; line-height: 1; transition: transform var(--t-fast) var(--ease-settle); }
.menu-toggle[aria-expanded="true"] span { transform: rotate(45deg); }
@media (max-width: 76rem) {
  .menu-toggle { display: inline-flex; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    padding: .5rem var(--gutter) 1.5rem; background: var(--canvas); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-2);
    opacity: 0; visibility: hidden; transform: translateY(-.75rem);
    transition: opacity var(--t-fast) var(--ease-settle), transform 240ms var(--ease-settle), visibility 0s linear 240ms;
  }
  .site-nav.open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .site-nav a:not(.button) { padding-block: .95rem; border-top: 1px solid var(--line); font-size: 1.0625rem; text-decoration: none; }
  .site-nav a:not(.button):first-child { border-top: 0; }
  .nav-cta { margin-top: 1rem; min-height: 3rem; }
}
@media (max-width: 30rem) { .brand-realm { display: none; } }

/* ── Footer ─────────────────────────────────────────────────────────── */
.site-footer { background: var(--canvas-2); border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.foot-grid { display: grid; gap: 2.5rem 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.foot-sign { grid-column: 1 / -1; }
@media (min-width: 40rem) { .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .foot-grid { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); } .foot-sign { grid-column: auto; } }
.foot-sign .brand-name { font-size: 1.375rem; }
.sign-off { position: relative; width: fit-content; margin-top: 1.5rem; padding-top: 1.25rem; color: var(--heading); font: italic 400 clamp(1.5rem, 1.2rem + 1vw, 2rem) / 1.2 var(--serif); letter-spacing: -.01em; }
.sign-off::before { content: ""; position: absolute; top: 0; left: 0; width: 3rem; height: 1px; background: var(--tf-gold); }
.footer-heading { margin: 0 0 .75rem; color: var(--emphasis-text); font: 600 .75rem / 1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
[data-realm="practice"] .footer-heading { color: var(--accent); }
.foot-col ul { margin: 0; list-style: none; }
.foot-col a { display: inline-block; padding-block: .35rem; color: var(--ink-soft); font-size: .9375rem; text-decoration: none; }
.foot-col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .3em; text-decoration-color: var(--emphasis); }
.legal { max-width: none; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--ink-mute); font-size: .875rem; }

/* ── Buttons and links ──────────────────────────────────────────────── */
.button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 2.75rem; padding: .7rem 1.4rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-s);
  background: transparent; color: var(--ink);
  font: 600 1rem / 1.2 var(--sans); text-decoration: none; cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast), filter var(--t-fast);
}
.button, .btn.solid { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.button:hover, .btn.solid:hover { filter: brightness(.94); }
.btn:not(.solid):hover { background: var(--canvas-2); border-color: var(--ink-mute); }
.btn.sm { min-height: 2.5rem; padding: .5rem 1rem; font-size: .9375rem; }
.button:disabled, .btn:disabled { opacity: .65; cursor: wait; }
.band-deep .button { background: var(--deep-ink); border-color: var(--deep-ink); color: var(--deep); }
.text-link, .field-text-link {
  display: inline-flex; align-items: center; gap: .6rem; padding-block: .6rem;
  color: var(--link); font: 600 .9375rem / 1.3 var(--sans);
  text-decoration: underline; text-decoration-color: var(--emphasis); text-decoration-thickness: 1px; text-underline-offset: .35em;
}
.text-link:hover, .field-text-link:hover { text-decoration-color: currentColor; text-underline-offset: .5em; }
.band-deep .text-link { color: var(--deep-emphasis); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.5rem; }

/* ── Cards, stage cards, fact rows ──────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: clamp(1.4rem, 2.4vw, 2rem); transition: box-shadow var(--t-fast); }
.card:hover { box-shadow: var(--shadow-1); }
/* A stage is a 3 px rule or a dot plus its label, never a filled block behind text (SYSTEM.md section 2) */
[data-stage="prepare"] { --stage: var(--stage-prepare); --stage-wash: var(--stage-prepare-wash); --stage-text: var(--stage-prepare); }
[data-stage="discuss"] { --stage: var(--stage-discuss); --stage-wash: var(--stage-discuss-wash); --stage-text: var(--stage-discuss); }
[data-stage="decide"] { --stage: var(--stage-decide); --stage-wash: var(--stage-decide-wash); --stage-text: var(--tf-gold-text); }
[data-stage="follow"] { --stage: var(--stage-follow); --stage-wash: var(--stage-follow-wash); --stage-text: var(--stage-follow); }
.stage-card { border: 1px solid var(--line); border-left: 3px solid var(--stage, var(--line)); border-radius: var(--r-s); background: var(--surface); }
.fact-rows { margin: 0; }
.fact-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: .9rem 0; border-top: 1px solid var(--line); }
.fact-rows > div:last-child { border-bottom: 1px solid var(--line); }
.fact-rows dt { color: var(--ink-soft); font-size: .9375rem; }
.fact-rows dd { margin: 0; color: var(--ink); font-weight: 600; white-space: nowrap; }
.note { max-width: var(--measure); padding: .9rem 1.1rem; border-left: 3px solid var(--emphasis); border-radius: 0 var(--r-s) var(--r-s) 0; background: var(--canvas-2); color: var(--ink-soft); }

/* ── Form ───────────────────────────────────────────────────────────── */
.form { display: grid; gap: 1.25rem; min-width: 0; }
.form label { display: grid; gap: .5rem; color: var(--ink); font-size: .9375rem; font-weight: 600; }
.form input, .form select, .form textarea {
  width: 100%; min-width: 0; min-height: 3rem; padding: .7rem .9rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-s); background: var(--surface); color: var(--ink);
  font-size: 1rem; font-weight: 400; line-height: 1.4;
}
.form textarea { min-height: 8rem; resize: vertical; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.form input[readonly], .form textarea[readonly], .form select:disabled { opacity: .7; }
.form .btn { justify-self: start; }
.form .note { padding: 0; border: 0; background: none; font-size: .875rem; line-height: 1.7; color: var(--ink-mute); }
.alert { position: relative; padding: 1rem 1.1rem 1rem 3.1rem; border-left: 3px solid var(--tf-terracotta-fn); border-radius: 0 var(--r-s) var(--r-s) 0; background: var(--tf-terracotta-wash); color: var(--ink); line-height: 1.6; }
.alert::before { content: "!"; position: absolute; top: 1.05rem; left: 1rem; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--tf-terracotta-fn); color: var(--tf-alabaster); font: 700 .8125rem / 1 var(--sans); }
.alert[hidden] { display: none; }

/* ── Legacy page vocabulary (components Hero, Section, Door, KV, Steps ...) ── */
.rule { margin-block: 1.5rem; border: 0; border-top: 1px solid var(--line); }
.grid2, .grid3 { display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 3vw, 2.5rem); }
@media (min-width: 52rem) { .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hero.section { padding-block: clamp(3.5rem, 8vw, 6rem) var(--space-section); }
/* Editorial pieces shared with the couples page and the Director page (folded in from the retired editorial sheet) */
.field-opening { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 56rem) { .field-opening { grid-template-columns: 1.02fr .98fr; } }
.field-opening h1 { max-width: 13ch; margin-bottom: 1.5rem; }
.field-opening .lead { max-width: 35rem; }
.field-caption { color: var(--ink-mute); font-size: .875rem; }
.field-return { display: grid; grid-template-columns: 1fr; gap: 2rem 3rem; align-items: start; }
@media (min-width: 52rem) { .field-return { grid-template-columns: 1fr 1fr; } }
.field-return .lead { font-family: var(--serif); font-size: 1.9rem; line-height: 1.35; max-width: none; }
.field-paths { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 52rem) { .field-paths { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.field-paths article { display: flex; flex-direction: column; align-items: flex-start; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.field-paths h3 { margin-bottom: 1rem; font-size: 2rem; }
.field-paths p { margin-bottom: 1rem; font-size: .96rem; }
.field-movements { max-width: 52rem; margin: 2rem 0; list-style: none; }
.field-movements li { display: grid; grid-template-columns: 2rem 1fr; gap: .8rem; padding: 1.3rem 0; border-top: 1px solid var(--line); }
@media (min-width: 40rem) { .field-movements li { grid-template-columns: 3rem 1fr; gap: 1.2rem; } }
.field-movements .n { color: var(--emphasis-text); font: italic 1.6rem / 1.2 var(--serif); }
.field-movements h3 { margin: 0 0 .5rem; font-size: 1.75rem; line-height: 1.18; }
.field-movements p { margin: 0; font-size: .95rem; line-height: 1.7; }
.field-example { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.field-example-intro { max-width: 46rem; margin-bottom: 2rem; }
.field-example-intro h3 { font-size: clamp(2rem, 3.1vw, 2.8rem); line-height: 1.12; }
.field-example-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 52rem) { .field-example-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2rem; } }
.field-example-grid article { padding-bottom: 1.3rem; border-bottom: 1px solid var(--line); }
@media (min-width: 52rem) { .field-example-grid article { padding: 0 1.8rem 0 0; border-right: 1px solid var(--line); border-bottom: 0; } .field-example-grid article:last-child { padding-right: 0; border-right: 0; } }
.field-example-grid .eyebrow { margin-bottom: 1rem; font-size: .75rem; }
.field-example-grid h3 { margin: 0 0 1rem; font-size: 1.8rem; line-height: 1.16; }
.field-example-grid p { font-size: .96rem; line-height: 1.75; }
.field-example-foot { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
@media (min-width: 52rem) { .field-example-foot { grid-template-columns: 1.4fr 1fr; gap: 3rem; } }
.field-example-foot p { margin: 0; font-size: .9rem; line-height: 1.7; }

/* ── Stones: placement and motion (SYSTEM.md section 5) ─────────────── */
/* Resting state: a plain image on the alabaster canvas. The cut-outs carry real alpha, so there is no plate. */
.stone-art { position: relative; width: min(100%, 520px); margin-inline: auto; transform: translate3d(0, var(--py, 0px), 0); }
.stone-art img { display: block; width: 100%; height: auto; }
.stone-breathe { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes settle { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
  @keyframes breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
  @keyframes sheen { 0% { background-position: 100% 0; } 11.4% { background-position: 0 0; } 100% { background-position: 0 0; } }

  /* 1. Settle. Hero on load; everything else once, on first entering the viewport. Copy follows 120 ms behind. */
  .stone-art.is-hero .stone-settle { animation: settle var(--t-settle) var(--ease-settle) both; }
  .settle-late:not([data-settle]) { animation: settle var(--t-settle) var(--ease-settle) 120ms both; }
  .js [data-settle]:not(.in) { opacity: 0; transform: translateY(14px) scale(.985); }
  .js [data-settle].in { animation: settle var(--t-settle) var(--ease-settle) both; }
  .js [data-settle].in.settle-late { animation-delay: 120ms; }

  /* 2. Breathe. The hero only, once it has settled. */
  .stone-art.is-hero .stone-breathe { animation: breathe var(--t-idle) ease-in-out calc(var(--t-settle) + 120ms) infinite; }

  /* 3. Light on the gold: a narrow diagonal highlight, masked by the stone itself, crossing once per --t-sheen. */
  @supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
    .stone-breathe::after {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(115deg, transparent 42%, var(--sheen) 50%, transparent 58%) 100% 0 / 250% 100% no-repeat;
      -webkit-mask: var(--stone) center / 100% 100% no-repeat;
      mask: var(--stone) center / 100% 100% no-repeat;
      mix-blend-mode: soft-light;
      animation: sheen var(--t-sheen) linear calc(var(--t-settle) + 400ms) infinite paused;
    }
    .stone-art.is-hero .stone-breathe::after, [data-settle].in .stone-breathe::after { animation-play-state: running; }
  }

  /* 4. Parallax (hero only, fine pointers) is applied from the layout script through --py. */
  @media (hover: hover) and (pointer: fine) { .stone-art.is-hero { will-change: transform; } }
}

/* ── Reduced motion: every stone is a plain static image ────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stone-art { transform: none; }
  .site-nav, .menu-toggle span { transition: none; }
}

@media print {
  .site-header, .site-footer, .skip { display: none; }
}