/*
 * @f2b/site-kit — site.css (v0.1.0)
 *
 * CSS-first semantic layers (D6): one handwritten external stylesheet per
 * generated bundle, layered with the compiled brand `:root` sheet by
 * DOCUMENT ORDER — link site.css FIRST, brand.css SECOND. This file
 * declares neutral `--sk-*`/`--brand-*` defaults; the brand sheet
 * overrides them. No utility framework, no `@layer` (keeps the sheet
 * trivially safe through the import sanitizer), no scripts.
 *
 * Class namespace: `sk-` (BEM-lite: block__element, block--modifier).
 * Class names are adblock-neutral by authorship and pinned by a deny-list
 * test. Runtime primitive classes (`f2b-*`) come from the closed tenant
 * runtime catalog (CR-003); their motion pairing lives at the end of this
 * sheet and is no-JS-safe and reduced-motion-safe by construction.
 *
 * Layers:
 *   1. Tokens (neutral defaults; brand.css overrides)
 *   2. Base & reset
 *   3. Layout primitives (.sk-container, .sk-section)
 *   4. Shared atoms (.sk-kicker, .sk-button, .sk-prose)
 *   5. Components (.sk-nav … .sk-slot)
 *   6. Runtime-primitive motion pairing (f2b-scroll-reveal / f2b-stagger)
 */

/* ---------- 1. Tokens — neutral defaults ---------------------------- */

:root {
  --brand-ink-100: #201f1b;
  --brand-ink-200: #46453e;
  --brand-ink-300: #5d5c52;
  --brand-secondary-100: #3a4540;
  --brand-secondary-200: #4c5a53;
  --brand-secondary-300: #77877e;
  --brand-accent: #8c4a26;
  --brand-accent-hi: #a95e34;
  --brand-highlight-100: #a98a2f;
  --brand-highlight-200: #c4a94e;
  --brand-surface-100: #fbfaf7;
  --brand-surface-200: #f2efe8;
  --brand-muted-100: #8b887d;
  --brand-muted-200: #b5b1a4;
  --brand-rule-1: #e5e1d6;
  --brand-rule-2: #d6d1c2;
  --brand-nav-height: 72px;
  --brand-sticky-nav-height: 64px;
  --brand-sidebar-backdrop: color-mix(in srgb, var(--brand-ink-100, currentColor) 60%, transparent);

  --sk-font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sk-font-body: system-ui, "Helvetica Neue", Arial, sans-serif;
  --sk-text-xs: 0.64rem;
  --sk-text-sm: 0.8rem;
  --sk-text-base: 1rem;
  --sk-text-lg: 1.25rem;
  --sk-text-xl: 1.5625rem;
  --sk-text-2xl: 1.9531rem;
  --sk-text-3xl: 2.4414rem;
  --sk-text-4xl: 3.0518rem;
  --sk-radius: 4px;
  --sk-on-accent: #fbfaf7;
  --sk-on-ink: #fbfaf7;
  --sk-on-secondary: #fbfaf7;
  --sk-accent-text: #8c4a26;

  --sk-space-1: 0.25rem;
  --sk-space-2: 0.5rem;
  --sk-space-3: 1rem;
  --sk-space-4: 1.5rem;
  --sk-space-5: 2rem;
  --sk-space-6: 3rem;
  --sk-space-7: 4.5rem;
  --sk-measure: 66ch;
  --sk-leading-tight: 1.15;
  --sk-leading-snug: 1.35;
  --sk-leading-body: 1.65;
  --sk-container-max: 72rem;
  --sk-gutter: clamp(1.25rem, 4vw, 2rem);
}

/* ---------- 2. Base & reset ------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--brand-surface-100);
  color: var(--brand-ink-100);
  font-family: var(--sk-font-body);
  font-size: var(--sk-text-base);
  line-height: var(--sk-leading-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
  margin: 0;
}

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

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, var(--sk-accent-text) 65%, transparent);
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-color: var(--sk-accent-text);
}

:focus-visible {
  outline: 2px solid var(--sk-accent-text);
  outline-offset: 2px;
}

/* Skip-to-content link (WCAG 2.4.1): the shell's first focusable element,
 * parked above the viewport until keyboard focus lands on it. Sits above
 * every other layer (nav 50, mobile drawer 45). */
.sk-skip-link {
  position: absolute;
  left: var(--sk-space-3);
  top: -3.5rem;
  z-index: 80;
  background: var(--brand-ink-100);
  color: var(--sk-on-ink);
  padding: 0.6em 1em;
  border-radius: var(--sk-radius);
  font-family: var(--sk-font-body);
  font-size: var(--sk-text-sm);
  text-decoration: none;
}

.sk-skip-link:focus {
  top: var(--sk-space-3);
}

/* Shell-owned page heading (spec 22, G-026): the single meaningful `<h1>` the
 * page scaffold emits on no-hero routes so every generated route carries one
 * for SEO + the heading outline. Visually hidden (the standard clip technique)
 * — the visible page-heading design is spec 19; hiding it changes no pixels
 * while keeping the heading in the accessibility tree + the served markup. */
.sk-shell-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

::selection {
  background: var(--brand-accent);
  color: var(--sk-on-accent);
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

h1,
h2,
h3 {
  font-family: var(--sk-font-display);
  font-weight: 600;
  line-height: var(--sk-leading-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(var(--sk-text-2xl), 3.4vw + 1.2rem, var(--sk-text-4xl));
}

h2 {
  font-size: clamp(var(--sk-text-xl), 2vw + 1rem, var(--sk-text-3xl));
}

h3 {
  font-size: var(--sk-text-lg);
}

/* ---------- 3. Layout primitives ------------------------------------- */

.sk-container {
  max-width: var(--sk-container-max);
  margin-inline: auto;
  padding-inline: var(--sk-gutter);
}

.sk-section {
  /* Tighter default rhythm (owner feedback — less dead space): adjacent default
   * sections stack their top+bottom padding, so this halves the inter-section
   * gap. Colored bands (alt/ink) restore more internal room below. */
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
}

.sk-section--tight {
  padding-block: clamp(1.25rem, 3vw, 2rem);
}

.sk-section--alt {
  background: var(--brand-surface-200);
  padding-block: clamp(2.25rem, 4.5vw, 3.25rem);
}

/* A full-width dark band (spec 22 — the prototype's contact band): the section
 * carries the ink surface + on-ink text, and contained components ride
 * `currentColor` so they read on the dark ground. Keeps the roomier band
 * padding so the dark surface has breathing space. */
.sk-section--ink {
  background: var(--brand-ink-100);
  color: var(--sk-on-ink);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

/* The last component in a section owns no bottom margin — the section padding
 * provides the separation, so a trailing component margin (e.g. a link-band's)
 * doesn't stack into empty space at the band's foot. */
.sk-container > :last-child {
  margin-bottom: 0;
}

/* ---------- 4. Shared atoms ------------------------------------------ */

.sk-kicker {
  font-family: var(--sk-font-body);
  font-size: var(--sk-text-sm);
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sk-accent-text);
  margin-bottom: var(--sk-space-3);
}

.sk-button {
  display: inline-block;
  padding: 0.78em 1.7em;
  border: 1px solid transparent;
  border-radius: var(--sk-radius);
  background: transparent;
  font-family: var(--sk-font-body);
  font-size: var(--sk-text-base);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 160ms ease-out,
    color 160ms ease-out,
    border-color 160ms ease-out;
}

.sk-button--accent {
  background: var(--brand-accent);
  color: var(--sk-on-accent);
}

.sk-button--accent:hover {
  background: var(--brand-accent-hi);
}

.sk-button--quiet {
  border-color: currentColor;
  color: inherit;
}

.sk-button--quiet:hover {
  border-color: var(--brand-accent-hi);
  color: var(--sk-accent-text);
}

/* Visually-hidden but AT-exposed (the standard clip technique) — carries the
 * "opens in a new tab" hint for external links (spec 20). */
.sk-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Content link atom (spec 20): accent-text underline, AA-safe by the compiler's
 * derived token. `sk-link` is added by every text-link affordance
 * (section-intro/feature actions, link-band rows); component classes refine
 * layout on top. */
.sk-link {
  color: var(--sk-accent-text);
  text-underline-offset: 0.15em;
}

.sk-link:hover {
  color: var(--brand-accent-hi);
}

/* External links open in a new tab (spec 20) — a decorative trailing glyph
 * (the `/ ""` alt hides it from AT; the `sk-sr-only` hint carries the meaning). */
.sk-link--external::after {
  content: "\2197" / "";
  display: inline-block;
  margin-inline-start: 0.2em;
  font-size: 0.85em;
}

/* Inline action row for the text components (section-intro / feature): quiet
 * link-outs after the body, secondary to the copy. */
.sk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-space-4);
  margin-top: var(--sk-space-4);
}

.sk-actions__link {
  font-weight: 600;
}

.sk-intro--center .sk-actions {
  justify-content: center;
}

.sk-prose {
  max-width: var(--sk-measure);
  margin-inline: auto;
}

.sk-prose > p,
.sk-prose > ul,
.sk-prose > ol {
  margin-block: var(--sk-space-3);
}

.sk-prose > ul,
.sk-prose > ol {
  padding-inline-start: 1.4em;
}

.sk-prose > h2 {
  margin-block: var(--sk-space-6) var(--sk-space-3);
}

.sk-prose > h3 {
  margin-block: var(--sk-space-5) var(--sk-space-2);
}

.sk-prose > .sk-quote,
.sk-prose > .sk-figure {
  margin-block: var(--sk-space-5);
}

/* ---------- 4b. Glyph-run lists (restored bullet copy, spec 19 G-035) - */

/* Bodies whose captured copy carried literal `• `/`– ` runs are restored to
 * real `<ul>/<li>` at render time (src/glyph-list.tsx) — same words, restored
 * semantics. Muted to the shared body ink so a restored list matches the
 * paragraphs it sits among (section-intro lead, feature body, offering
 * description). */
.sk-list {
  margin-block: var(--sk-space-3);
  padding: 0;
  list-style: none;
  color: var(--brand-ink-200);
}

.sk-list li {
  margin-top: var(--sk-space-1);
}

/* Top-level items carry the prototype's terracotta disc — a custom `::before`
 * (not the browser `::marker`): a bigger, brand-accented dot at the copy's
 * baseline. The `:not()` keeps the nested dash sub-list on its own marker. */
.sk-list:not(.sk-list--sub) > li {
  position: relative;
  padding-inline-start: 1.5em;
  margin-top: var(--sk-space-2);
}

.sk-list:not(.sk-list--sub) > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.62em;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--brand-accent);
}

/* A nested (or standalone) `– ` sub-run: indented one level under its bullet,
 * with a dash marker echoing the source glyph. */
.sk-list--sub {
  margin-top: var(--sk-space-1);
  padding-inline-start: 1.25em;
  list-style: none;
}

.sk-list--sub > li {
  position: relative;
  padding-inline-start: 1em;
}

.sk-list--sub > li::before {
  content: "–";
  position: absolute;
  inset-inline-start: 0;
  color: var(--brand-ink-300);
}

/* ---------- 5a. Nav header ------------------------------------------- */

.sk-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--brand-surface-100);
  border-bottom: 1px solid var(--brand-rule-1);
}

.sk-nav__inner {
  max-width: var(--sk-container-max);
  margin-inline: auto;
  padding-inline: var(--sk-gutter);
  min-height: var(--brand-nav-height);
  display: flex;
  align-items: center;
  gap: var(--sk-space-4);
}

.sk-nav__brand {
  font-family: var(--sk-font-display);
  font-size: var(--sk-text-lg);
  font-weight: 650;
  letter-spacing: 0.01em;
  text-decoration: none;
  margin-inline-end: auto;
}

/* Logo brand (spec 22, G-043): the mark replaces the wordmark; cap its height
 * to the nav band and let width follow the intrinsic aspect ratio. */
.sk-nav__brand--logo {
  display: inline-flex;
  align-items: center;
}

.sk-nav__logo {
  display: block;
  height: clamp(1.75rem, 4vw, 2.25rem);
  width: auto;
}

/* Mark + wordmark (spec 22, G-043): a brand symbol BESIDE the wordmark text
 * (the companion to the logo, which replaces it). The symbol caps to the nav
 * band; the wordmark keeps the .sk-nav__brand type and never wraps. */
.sk-nav__brand--mark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.sk-nav__mark {
  display: block;
  height: clamp(1.6rem, 3.6vw, 2rem);
  width: auto;
}

.sk-nav__wordmark {
  white-space: nowrap;
}

.sk-nav--stacked .sk-nav__inner {
  flex-direction: column;
  justify-content: center;
  gap: var(--sk-space-2);
  padding-block: var(--sk-space-3);
}

.sk-nav--stacked .sk-nav__brand {
  margin-inline-end: 0;
}

.sk-nav__list {
  display: flex;
  gap: var(--sk-space-4);
  list-style: none;
  padding: 0;
}

.sk-nav__link {
  font-size: var(--sk-text-sm);
  font-weight: 600;
  /* Render the authored nav label verbatim — title case as written in the site
   * plan — with restrained tracking, instead of forcing an all-caps transform.
   * The mobile drawer link and the accent CTA button already honor authored
   * casing, so the desktop link now matches them (one faithful nav treatment).
   * 0.02em suits mixed-case (the retired 0.08em was tuned for uppercase); it
   * mirrors the approved 4E prototype's `.mainnav a` tracking. */
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--brand-ink-200);
}

.sk-nav__link:hover {
  color: var(--sk-accent-text);
}

/* Active nav link (spec 22 — companion to the Home item): the current page's
 * link takes the accent color + an accent underline bar offset below the text,
 * echoing the prototype's active-nav treatment. Driven by the same
 * `aria-current` the markup sets, so the visual + semantic states are one; the
 * underline (not a block bar) keeps every nav item vertically aligned. */
.sk-nav__link--active {
  color: var(--sk-accent-text);
  text-decoration: underline;
  text-decoration-color: var(--brand-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.sk-nav__cta {
  font-size: var(--sk-text-sm);
  padding: 0.6em 1.3em;
}

.sk-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.sk-nav__toggle-bar {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--brand-ink-100);
  transition:
    transform 200ms ease-out,
    opacity 150ms ease-out;
}

.sk-nav__toggle[data-f2b-menu-open="true"] .sk-nav__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.sk-nav__toggle[data-f2b-menu-open="true"] .sk-nav__toggle-bar:nth-child(2) {
  opacity: 0;
}

.sk-nav__toggle[data-f2b-menu-open="true"] .sk-nav__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile drawer — display-driven per the f2b-mobile-menu contract: the
 * runtime stamps data-f2b-menu-open="true"; this rule does the unhide. */
.sk-nav__drawer {
  display: none;
  position: fixed;
  top: var(--brand-nav-height);
  left: 0;
  right: 0;
  /* Full-height overlay BELOW the nav. Height is viewport-relative (dvh) rather
   * than `inset`/`bottom: 0` on purpose: the f2b-sticky-nav-track runtime stamps
   * `will-change: transform` onto `.sk-nav` (and a real `translateY()` on
   * scroll), which makes the header a containing block for this fixed child. A
   * `bottom: 0` would then resolve against the ~72px nav box, not the viewport,
   * collapsing the drawer so its links overflow onto the page. `100dvh` stays
   * correct in either containing block (the nav is pinned to the viewport top)
   * and tracks the mobile URL bar. The `vh` line is the pre-`dvh` fallback. */
  height: calc(100vh - var(--brand-nav-height));
  height: calc(100dvh - var(--brand-nav-height));
  z-index: 45;
  background: var(--brand-surface-100);
  border-top: 1px solid var(--brand-rule-1);
  padding: var(--sk-space-5) var(--sk-gutter);
  overflow-y: auto;
}

.sk-nav__drawer[data-f2b-menu-open="true"] {
  display: block;
}

.sk-nav__drawer-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--sk-space-4);
}

.sk-nav__drawer-link {
  font-family: var(--sk-font-display);
  font-size: var(--sk-text-xl);
  text-decoration: none;
}

.sk-nav__drawer-link--active {
  color: var(--sk-accent-text);
  text-decoration: underline;
  text-decoration-color: var(--brand-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.sk-nav__drawer-cta {
  margin-top: var(--sk-space-2);
}

@media (max-width: 879px) {
  .sk-nav__primary,
  .sk-nav__cta {
    display: none;
  }

  .sk-nav--stacked .sk-nav__inner {
    flex-direction: row;
    padding-block: 0;
  }

  .sk-nav--stacked .sk-nav__brand {
    margin-inline-end: auto;
  }

  .sk-nav__toggle {
    display: flex;
  }
}

/* ---------- 5b. Hero -------------------------------------------------- */

.sk-hero {
  position: relative;
}

.sk-hero__inner {
  max-width: var(--sk-container-max);
  margin-inline: auto;
  padding-inline: var(--sk-gutter);
}

.sk-hero__kicker {
  margin-bottom: var(--sk-space-3);
}

.sk-hero__heading {
  max-width: 22ch;
  /* Display scale (spec 21, G-029): the hero h1 reaches the kit's authored
   * display size when the brand kit sets `type.display`; otherwise it falls back
   * to the global `h1` ramp clamp verbatim (byte-stable for kits without the
   * slot). Scoped here — not on the global `h1` — so article titles keep their
   * own size. */
  font-size: var(--sk-display-h1, clamp(var(--sk-text-2xl), 3.4vw + 1.2rem, var(--sk-text-4xl)));
}

.sk-hero__lead {
  max-width: 52ch;
  margin-top: var(--sk-space-4);
  font-size: var(--sk-text-lg);
  line-height: var(--sk-leading-snug);
  color: var(--brand-ink-200);
}

/* A smaller supporting line under the lead (the editorial hero's location
 * plinth line); muted below the lead's ink so the two read as a hierarchy. */
.sk-hero__supporting {
  margin-top: var(--sk-space-2);
  font-size: var(--sk-text-sm);
  letter-spacing: 0.04em;
  color: var(--brand-ink-300);
}

.sk-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sk-space-3);
  margin-top: var(--sk-space-5);
}

/* full-bleed: photographic backdrop + brand scrim; text rides the derived
 * on-ink token so any compilable kit stays readable. */
.sk-hero--full-bleed {
  display: grid;
  align-items: end;
  min-height: min(88vh, 46rem);
  color: var(--sk-on-ink);
}

.sk-hero--full-bleed .sk-hero__backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.sk-hero--full-bleed .sk-hero__backdrop-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sk-hero--full-bleed .sk-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--brand-ink-100) 88%, transparent) 0%,
    color-mix(in srgb, var(--brand-ink-100) 55%, transparent) 55%,
    color-mix(in srgb, var(--brand-ink-100) 30%, transparent) 100%
  );
}

.sk-hero--full-bleed .sk-hero__inner {
  position: relative;
  width: 100%;
  padding-block: clamp(3.5rem, 10vh, 6.5rem);
}

.sk-hero--full-bleed .sk-hero__kicker,
.sk-hero--full-bleed .sk-hero__lead {
  color: inherit;
}

.sk-hero--full-bleed .sk-hero__lead {
  opacity: 0.92;
}

/* full-bleed · ink tone (spec 19, G-031) — the light-editorial treatment: a
 * LIGHT surface wash instead of the dark scrim, with dark brand ink text. The
 * content sits at the block end, so the wash is opaque (~92% surface-100) at the
 * bottom where the text lands and fades up the image — the text therefore reads
 * on ~surface-100. AA is guaranteed by the compiler's `ink-100`/`surface-100`
 * REQUIRED body pair (a kit failing it cannot compile), so `tone: "ink"` can
 * never ship sub-AA. Scoped to full-bleed; split/minimal have no scrim. */
.sk-hero--full-bleed.sk-hero--ink {
  color: var(--brand-ink-100);
}

.sk-hero--full-bleed.sk-hero--ink .sk-hero__scrim {
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--brand-surface-100) 92%, transparent) 0%,
    color-mix(in srgb, var(--brand-surface-100) 62%, transparent) 46%,
    color-mix(in srgb, var(--brand-surface-100) 12%, transparent) 100%
  );
}

.sk-hero--full-bleed.sk-hero--ink .sk-hero__lead {
  color: var(--brand-ink-200);
  opacity: 1;
}

/* editorial (spec 22) — the prototype's home hero. A full-bleed photo whose TOP
 * carries a paper veil for the kicker + h1, with the lead / supporting / actions
 * on a solid plinth BELOW the photo. This REMOVES the full-image wash (the veil
 * is top-anchored, so the photo shows its natural color below), and AA holds by
 * construction: the plinth text sits on the brand surface, and the heading rides
 * the densest part of the veil. Fully fluid — no breakpoint. */
.sk-hero--editorial .sk-hero__stage {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: clamp(26rem, 74svh, 50rem);
}

.sk-hero--editorial .sk-hero__backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.sk-hero--editorial .sk-hero__backdrop-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

/* The paper veil: opaque brand surface at the very top (where the kicker + h1
 * land → AA), fading to transparent by ~64% down so the photo shows natural. */
.sk-hero--editorial .sk-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--brand-surface-100) 80%, transparent) 0%,
    color-mix(in srgb, var(--brand-surface-100) 36%, transparent) 38%,
    color-mix(in srgb, var(--brand-surface-100) 0%, transparent) 64%
  );
}

.sk-hero--editorial .sk-hero__stage-inner {
  position: relative;
  width: 100%;
  max-width: var(--sk-container-max);
  margin-inline: auto;
  padding: clamp(3.5rem, 10vh, 6.5rem) var(--sk-gutter) var(--sk-space-7);
}

.sk-hero--editorial .sk-hero__plinth {
  padding-block: var(--sk-space-5) 0;
}

.sk-hero--editorial .sk-hero__plinth-inner {
  max-width: var(--sk-container-max);
  margin-inline: auto;
  padding-inline: var(--sk-gutter);
}

/* The plinth lead sits first, on the surface (no overlay); its top margin
 * collapses since the plinth owns the top pad. Owner feedback: the two plinth
 * lines each read ~25% larger than the base lead / supporting sizes. */
.sk-hero--editorial .sk-hero__lead {
  max-width: 32em;
  margin-top: 0;
  font-size: calc(var(--sk-text-lg) * 1.25);
}

.sk-hero--editorial .sk-hero__supporting {
  font-size: calc(var(--sk-text-sm) * 1.25);
}

/* Phone: trim the editorial hero photo so the first-viewport plinth copy —
 * the "Reserve your day retreat today." CTA lead — clears the fixed chat
 * launcher's bottom-right corner (remaining-site #3 no-overlap). A ~74svh
 * photo pushed that CTA line under the pill; a fixed bottom-anchored launcher
 * cannot geometrically clear bottom-anchored copy, so the hero yields the
 * clearance here. Side benefit: more of the lead sits above the fold. Desktop
 * (where the pill is far from the centered copy) is unaffected. */
@media (max-width: 640px) {
  .sk-hero--editorial .sk-hero__stage {
    min-height: clamp(20rem, 62svh, 34rem);
  }
}

/* split: copy beside media on a plain surface. */
.sk-hero--split {
  padding-block: clamp(3rem, 8vw, 5.5rem);
}

.sk-hero--split .sk-hero__inner {
  display: grid;
  gap: var(--sk-space-6);
  align-items: center;
}

.sk-hero--split .sk-hero__media img {
  border-radius: var(--sk-radius);
  width: 100%;
  object-fit: cover;
}

@media (min-width: 880px) {
  .sk-hero--split .sk-hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

/* minimal: type only. */
.sk-hero--minimal {
  padding-block: clamp(4rem, 12vw, 8rem);
  text-align: center;
}

.sk-hero--minimal .sk-hero__heading,
.sk-hero--minimal .sk-hero__lead {
  margin-inline: auto;
}

.sk-hero--minimal .sk-hero__actions {
  justify-content: center;
}

/* ---------- 5c. Section intro ----------------------------------------- */

.sk-intro {
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
}

/* Display scale (spec 21, G-029): the section-title h2 reaches the kit's
 * authored display size when the brand kit sets `type.display`; otherwise it
 * falls back to the global `h2` ramp clamp verbatim (byte-stable). Scoped to the
 * h2 level — a nested (level-3) intro keeps the global `h3` size, and
 * article-body h2s (no `sk-intro__heading`) keep the global `h2` size. */
h2.sk-intro__heading {
  font-size: var(--sk-display-h2, clamp(var(--sk-text-xl), 2vw + 1rem, var(--sk-text-3xl)));
}

.sk-intro--center {
  text-align: center;
}

.sk-intro--center .sk-intro__lead {
  margin-inline: auto;
}

.sk-intro__lead {
  max-width: 56ch;
  margin-top: var(--sk-space-3);
  color: var(--brand-ink-200);
  font-size: var(--sk-text-lg);
  line-height: var(--sk-leading-snug);
}

/* ---------- 5c-2. Feature (heading + body + media) -------------------- */

.sk-feature {
  display: grid;
  gap: var(--sk-space-5);
  align-items: center;
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
}

@media (min-width: 880px) {
  .sk-feature {
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
  }

  /* Default (`media-end`) keeps the text first in source order with the
   * figure trailing; `media-start` swaps the text to the second column so the
   * figure leads. Source order is unchanged (reading + a11y order stay text
   * → figure); only the visual column order flips. */
  .sk-feature--media-start .sk-feature__text {
    order: 2;
  }
}

/* Display scale (spec 21, G-029): a feature is a media-bearing content section,
 * and its title is the same "section heading" role as `sk-intro__heading` — the
 * prototype renders every section title at one display size, including its media
 * sections (e.g. the home's "Day retreat, just for you."). Consume the kit's
 * authored display h2 when `type.display` is set, else the current `2xl`
 * verbatim; the display-h2 clamp floors at `2xl`, so mobile + no-slot kits stay
 * byte-stable and only wide viewports grow toward the authored max. */
.sk-feature__heading {
  font-size: var(--sk-display-h2, var(--sk-text-2xl));
}

.sk-feature__body {
  max-width: 56ch;
  margin-top: var(--sk-space-3);
  color: var(--brand-ink-200);
  font-size: var(--sk-text-lg);
  line-height: var(--sk-leading-snug);
}

/* Text rhythm (spec 22): the FIRST body paragraph is the lead (the size above);
 * every subsequent paragraph drops to the base body size + ink, matching the
 * prototype's lead-then-prose cadence. The general-sibling combinator matches
 * across an intervening restored list, so it still catches paragraphs that
 * follow the bullets. */
.sk-feature__body ~ .sk-feature__body {
  font-size: var(--sk-text-base);
  line-height: var(--sk-leading-body);
  color: var(--brand-ink-100);
}

.sk-feature__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--sk-radius);
}

/* `duet` (the About biography — the prototype's `.duet--land`): a LANDSCAPE
 * figure leads, top-aligned beside the copy. The wider media column + the
 * visual media-first order apply only at the two-column breakpoint; below it
 * the section stacks (figure over copy). Source/reading order stays text →
 * figure for a11y — only the visual column order flips (matching media-start). */
.sk-feature--duet {
  align-items: start;
}

/* Lead with the figure at EVERY width (a media-first duet, matching the
 * prototype): the text takes visual order 2, so the landscape portrait is first
 * on mobile (single column) and in the wider left column on desktop. DOM /
 * reading order stays text → figure (heading → body → portrait alt) for a11y —
 * a standard responsive reorder, not a reading-order change. */
.sk-feature--duet .sk-feature__text {
  order: 2;
}

.sk-feature--duet .sk-feature__media img {
  aspect-ratio: 3 / 2;
}

@media (min-width: 880px) {
  .sk-feature--duet {
    grid-template-columns: 6fr 5fr;
  }
}

/* ---------- 5c-2b. Page folio (editorial page opener) ---------------- */

/* The prototype's About opener (`.folio`): a single-column text flow — kicker,
 * the page `<h1>`, intro prose — over a wide lead plate below. The
 * `<h1>`-owning lead for a hero-less editorial page (h1 census: `hero` +
 * `article` + `page-folio`), so it renders in the normal content column rather
 * than as a full-bleed band. */
.sk-folio {
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
}

.sk-folio__title {
  max-width: 15em;
  /* Display scale (spec 21, G-029): the folio h1 reaches the kit's authored
   * display size (like the hero h1) when `type.display` is set, else the global
   * h1 ramp clamp verbatim (byte-stable for kits without the slot). */
  font-size: var(--sk-display-h1, clamp(var(--sk-text-2xl), 3.4vw + 1.2rem, var(--sk-text-4xl)));
}

.sk-folio__body {
  max-width: var(--sk-measure);
  margin-top: var(--sk-space-4);
  font-size: var(--sk-text-lg);
  line-height: var(--sk-leading-snug);
  color: var(--brand-ink-200);
}

/* Lead-then-prose cadence (matching `sk-feature__body`): the FIRST paragraph is
 * the lead (the size above); every subsequent paragraph drops to base body size
 * + ink and picks up inter-paragraph rhythm. */
.sk-folio__body ~ .sk-folio__body {
  margin-top: var(--sk-space-3);
  font-size: var(--sk-text-base);
  line-height: var(--sk-leading-body);
  color: var(--brand-ink-100);
}

.sk-folio__media {
  margin: var(--sk-space-6) 0 0;
}

.sk-folio__media img {
  width: 100%;
  border-radius: var(--sk-radius);
}

/* ---------- 5b-2. Page header (h1-owning titled-page opener) --------- */

/* The prototype's `pagehead` — a hero-less titled page's `<h1>` opener (the
 * /blog + /gallery kind: kicker + page h1 + optional standfirst, no lead
 * plate). It sits in the normal content column; the section padding gives the
 * top room and this owns the gap down to the page body (e.g. the post list). */
.sk-page-header {
  margin-bottom: clamp(1.75rem, 4.5vw, 3rem);
}

.sk-page-header__title {
  /* Display scale (spec 21, G-029): reaches the kit's authored display size
   * (like the folio + hero h1) when `type.display` is set, else the global h1
   * ramp clamp verbatim (byte-stable for kits without the slot). */
  font-size: var(--sk-display-h1, clamp(var(--sk-text-2xl), 3.4vw + 1.2rem, var(--sk-text-4xl)));
}

.sk-page-header__intro {
  max-width: var(--sk-measure);
  margin-top: var(--sk-space-4);
  font-size: var(--sk-text-lg);
  line-height: var(--sk-leading-snug);
  color: var(--brand-ink-200);
}

/* ---------- 5b-3. Page opener (h1-owning split title-beside-portrait) - */

/* The prototype's `.opener` — a hero-less page's `<h1>` title (and an optional
 * kicker) BESIDE a portrait photograph (the /testimonials + /retreats
 * openers). Stacks to one column below the two-column breakpoint; at it the
 * title and portrait share a bottom baseline (6fr/5fr). */
.sk-opener {
  display: grid;
  gap: var(--sk-space-5);
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
}

.sk-opener__title {
  max-width: 10em;
  text-wrap: balance;
  /* Display scale (spec 21, G-029): reaches the kit's authored display size
   * (like the folio + page-header + hero h1) when `type.display` is set, else
   * the global h1 ramp clamp verbatim (byte-stable for kits without the slot). */
  font-size: var(--sk-display-h1, clamp(var(--sk-text-2xl), 3.4vw + 1.2rem, var(--sk-text-4xl)));
}

.sk-opener__media {
  margin: 0;
  /* Stacked openers need a shorter image so the lead content that follows is
   * reachable before the fixed tenant launcher crosses the reading line. The
   * split tablet/desktop layout restores the source portrait crop below. */
  aspect-ratio: 4 / 3;
}

.sk-opener__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--sk-radius);
}

@media (min-width: 760px) {
  .sk-opener {
    grid-template-columns: 6fr 5fr;
    column-gap: clamp(3rem, 7vw, 6rem);
    align-items: end;
  }
  .sk-opener__media {
    aspect-ratio: 3 / 4;
  }
  .sk-opener__title {
    /* Lift the title off the shared bottom baseline (the prototype's grammar). */
    padding-bottom: var(--sk-space-5);
  }
}

/* ---------- 5c-2b. Media collage (asymmetric lead image group) --------
 * The prototype's Retreats `.strip`: a deliberate single-column sequence of
 * three photos below the two-column breakpoint (first two 3:2 landscapes, the
 * third a 3:4 portrait), promoting at ≥960px to two landscapes stacked in the
 * wider left column beside the portrait spanning both rows on the right. */
.sk-collage {
  display: grid;
  gap: var(--sk-space-3);
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
}

.sk-collage__item {
  margin: 0;
}

.sk-collage__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--sk-radius);
}

/* Stacked-column crops (also the mobile/tablet crops): the two landscapes are
 * 3:2, the spanning portrait 3:4. */
.sk-collage__item:nth-child(1),
.sk-collage__item:nth-child(2) {
  aspect-ratio: 3 / 2;
}

.sk-collage__item:nth-child(3) {
  aspect-ratio: 3 / 4;
}

@media (min-width: 960px) {
  .sk-collage {
    grid-template-columns: 3fr 2fr;
    grid-template-rows: 1fr 1fr;
  }
  .sk-collage__item:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }
  .sk-collage__item:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }
  .sk-collage__item:nth-child(3) {
    grid-column: 2;
    grid-row: 1 / span 2;
    /* the portrait fills the stacked pair's combined height (the img covers it) */
    aspect-ratio: auto;
  }
}

/* ---------- 5c-3. Link band (heading-optional link-out rows) ---------- */

.sk-linkband {
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
}

/* Display scale (spec 21, G-029): a heading-bearing link band is a content
 * section — its title takes the same display h2 as the other section headings
 * (the prototype's `band__title`, e.g. "upcoming day retreats", renders at the
 * section display size). The `2xl` fallback keeps mobile + no-slot kits
 * byte-stable. */
.sk-linkband__heading {
  font-size: var(--sk-display-h2, var(--sk-text-2xl));
  margin-bottom: var(--sk-space-4);
}

.sk-linkband__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* rows (default): full-width tappable rows, label left + external glyph right,
 * hairline dividers top-to-bottom. */
.sk-linkband--rows .sk-linkband__list {
  display: grid;
}

.sk-linkband--rows .sk-linkband__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sk-space-3);
  padding-block: var(--sk-space-4);
  border-top: 1px solid var(--brand-rule-1);
  color: var(--brand-ink-100);
  font-size: var(--sk-text-lg);
  font-weight: 600;
  text-decoration: none;
}

.sk-linkband--rows .sk-linkband__item:last-child .sk-linkband__row {
  border-bottom: 1px solid var(--brand-rule-1);
}

.sk-linkband--rows .sk-linkband__row:hover {
  color: var(--sk-accent-text);
}

/* inline: a compact wrapping row — a short social band. */
.sk-linkband--inline .sk-linkband__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-space-4);
}

.sk-linkband--inline .sk-linkband__row {
  font-weight: 600;
}

.sk-linkband__note {
  margin-top: var(--sk-space-3);
  color: var(--brand-ink-200);
  font-size: var(--sk-text-sm);
}

/* ---------- 5d. Offerings --------------------------------------------- */

.sk-offerings {
  display: grid;
  gap: var(--sk-space-5);
}

@media (min-width: 640px) {
  .sk-offerings {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .sk-offerings--columns-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.sk-offering__card {
  height: 100%;
  background: var(--brand-surface-200);
  border-radius: var(--sk-radius);
  overflow: hidden;
}

.sk-offering__media {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.sk-offering__body {
  padding: var(--sk-space-4);
}

.sk-offering__name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sk-space-2);
  font-size: var(--sk-text-lg);
}

.sk-offering__badge {
  border-left: 3px solid var(--brand-highlight-100);
  padding-left: var(--sk-space-2);
  font-family: var(--sk-font-body);
  font-size: var(--sk-text-xs);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-ink-200);
  white-space: nowrap;
}

.sk-offering__description {
  margin-top: var(--sk-space-2);
  color: var(--brand-ink-200);
  font-size: var(--sk-text-sm);
  line-height: var(--sk-leading-body);
}

.sk-offering__price {
  margin-top: var(--sk-space-3);
  font-weight: 650;
  color: var(--sk-accent-text);
}

/* Per-offering external link-out CTA (spec 20, D6): the offering's booking /
 * product link. A prominent accent affordance on top of the shared `.sk-link`
 * atom (accent text + the `--external` trailing glyph for off-origin links). */
.sk-offering__cta {
  margin-top: var(--sk-space-4);
}

.sk-offering__link {
  font-weight: 650;
}

/* ---------- 5d-2. Profile grid (team / people cards) ----------------- */

.sk-profiles {
  display: grid;
  gap: var(--sk-space-5);
}

@media (min-width: 640px) {
  .sk-profiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .sk-profiles--columns-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.sk-profile__card {
  height: 100%;
  background: var(--brand-surface-200);
  border-radius: var(--sk-radius);
  overflow: hidden;
}

.sk-profile__media {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.sk-profile__body {
  padding: var(--sk-space-4);
}

.sk-profile__role {
  font-family: var(--sk-font-body);
  font-size: var(--sk-text-xs);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sk-accent-text);
}

.sk-profile__name {
  margin-top: var(--sk-space-1);
  font-size: var(--sk-text-lg);
}

.sk-profile__bio {
  margin-top: var(--sk-space-2);
  color: var(--brand-ink-200);
  font-size: var(--sk-text-sm);
  line-height: var(--sk-leading-body);
}

/* rows (remaining-site slice 6): one spacious editorial row per profile — a
 * portrait beside the full bio, alternating the image side down the list (the
 * prototype's Retreats team). Single column below the two-column breakpoint;
 * the card sheds its compact chrome so the pairing reads as open editorial. The
 * `.sk-profiles.sk-profiles--rows` compound overrides the base multi-column
 * track deterministically. */
.sk-profiles.sk-profiles--rows {
  grid-template-columns: 1fr;
  row-gap: clamp(3.5rem, 8vw, 6rem);
}

.sk-profiles--rows .sk-profile__card {
  display: grid;
  gap: var(--sk-space-5);
  align-items: start;
  height: auto;
  background: none;
  border-radius: 0;
  overflow: visible;
}

.sk-profiles--rows .sk-profile__media {
  /* the portrait renders at its intrinsic ratio within the media column (the
   * prototype's team media carries no forced crop) */
  aspect-ratio: auto;
  height: auto;
  border-radius: var(--sk-radius);
}

.sk-profiles--rows .sk-profile__body {
  padding: 0;
}

.sk-profiles--rows .sk-profile__name {
  font-family: var(--sk-font-display);
  font-size: var(--sk-text-2xl);
  line-height: var(--sk-leading-tight);
}

.sk-profiles--rows .sk-profile__bio {
  max-width: var(--sk-measure);
  font-size: var(--sk-text-base);
}

/* multi-paragraph bios (authored `\n\n` → BodyText paragraphs) get rhythm */
.sk-profiles--rows .sk-profile__bio + .sk-profile__bio {
  margin-top: var(--sk-space-3);
}

@media (min-width: 960px) {
  .sk-profiles--rows .sk-profile__card {
    grid-template-columns: 5fr 7fr;
    column-gap: clamp(3rem, 6vw, 5rem);
  }
  /* alternate the image side on successive rows (the prototype's nth-child) */
  .sk-profiles--rows .sk-profile:nth-child(even) .sk-profile__card {
    grid-template-columns: 7fr 5fr;
  }
  .sk-profiles--rows .sk-profile:nth-child(even) .sk-profile__media {
    order: 2;
  }
}

/* ---------- 5e. Price list -------------------------------------------- */

.sk-pricelist {
  max-width: var(--sk-measure);
  margin-inline: auto;
  display: grid;
  gap: var(--sk-space-6);
}

.sk-pricelist__title {
  font-size: var(--sk-text-xl);
  margin-bottom: var(--sk-space-4);
}

.sk-pricelist__items {
  display: grid;
  gap: var(--sk-space-4);
}

.sk-pricelist__row {
  display: flex;
  align-items: baseline;
  gap: var(--sk-space-2);
}

.sk-pricelist__name {
  font-weight: 600;
}

.sk-pricelist__leader {
  flex: 1;
  border-bottom: 1px dotted var(--brand-muted-200);
  transform: translateY(-0.3em);
}

.sk-pricelist__price {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.sk-pricelist__description {
  margin-top: var(--sk-space-1);
  max-width: 48ch;
  color: var(--brand-ink-300);
  font-size: var(--sk-text-sm);
}

/* ---------- 5f. Testimonials ------------------------------------------ */

.sk-quote {
  position: relative;
}

.sk-quote__text p {
  font-family: var(--sk-font-display);
  font-style: italic;
  text-wrap: pretty;
}

.sk-quote--large {
  max-width: var(--sk-measure);
  margin-inline: auto;
  text-align: center;
  padding-block: var(--sk-space-3);
}

.sk-quote--large .sk-quote__text p {
  font-size: clamp(var(--sk-text-lg), 1.6vw + 0.9rem, var(--sk-text-2xl));
  line-height: var(--sk-leading-snug);
}

.sk-quote--large::before {
  content: "\201C";
  display: block;
  font-family: var(--sk-font-display);
  font-size: var(--sk-text-4xl);
  line-height: 0.6;
  color: var(--sk-accent-text);
  margin-bottom: var(--sk-space-3);
}

.sk-quote--compact .sk-quote__text p {
  font-size: var(--sk-text-lg);
  line-height: var(--sk-leading-snug);
}

.sk-quote__caption {
  margin-top: var(--sk-space-3);
  font-size: var(--sk-text-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-space-2);
  justify-content: inherit;
}

.sk-quote--large .sk-quote__caption {
  justify-content: center;
}

.sk-quote__attribution {
  font-weight: 650;
}

.sk-quote__detail {
  color: var(--brand-ink-300);
}

.sk-quotes__list {
  display: grid;
  gap: var(--sk-space-5);
}

.sk-quotes--row .sk-quotes__list {
  align-items: start;
}

@media (min-width: 880px) {
  .sk-quotes--row .sk-quotes__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.sk-quotes__item {
  border-top: 2px solid var(--brand-rule-2);
  padding-top: var(--sk-space-4);
}

/* Editorial column (the prototype's Testimonials page): a spacious centered
 * stack of display pull-quotes — no per-row divider, generous vertical rhythm.
 * Each row is an `editorial` quote (below). */
.sk-quotes--editorial .sk-quotes__list {
  max-width: 46rem;
  margin-inline: auto;
  row-gap: clamp(3.5rem, 9vw, 6rem);
}

.sk-quotes--editorial .sk-quotes__item {
  border-top: 0;
  padding-top: 0;
}

/* The editorial pull-quote: a large display quote led by a pale-green opening
 * mark, with a short-rule + tracked-uppercase attribution (the prototype's
 * `.quote`). The base `.sk-quote` is `position: relative`, so the mark anchors
 * to the figure. */
.sk-quote--editorial {
  padding-top: var(--sk-space-4);
}

.sk-quote--editorial::before {
  content: "\201C";
  position: absolute;
  top: -0.18em;
  left: -0.06em;
  font-family: var(--sk-font-display);
  font-size: var(--sk-text-4xl);
  line-height: 1;
  color: var(--brand-secondary-300);
}

.sk-quote--editorial .sk-quote__text p {
  font-family: var(--sk-font-display);
  /* The editorial quote is display-weight, not the base italic. */
  font-style: normal;
  font-size: clamp(var(--sk-text-xl), 1.1rem + 1.4vw, var(--sk-text-3xl));
  line-height: var(--sk-leading-snug);
}

.sk-quote--editorial .sk-quote__caption {
  align-items: center;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-ink-300);
}

.sk-quote--editorial .sk-quote__caption::before {
  content: "";
  flex: none;
  width: 1.6em;
  height: 1px;
  background: var(--brand-rule-2);
}

/* ---------- 5g. Gallery ----------------------------------------------- */

.sk-gallery__track {
  display: grid;
  gap: var(--sk-space-3);
}

.sk-gallery--strip .sk-gallery__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: var(--sk-space-3);
  padding-bottom: var(--sk-space-2);
}

.sk-gallery--strip .sk-gallery__item {
  flex: 0 0 min(72vw, 26rem);
  scroll-snap-align: start;
}

.sk-gallery--grid .sk-gallery__track {
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

/* masonry: CSS multi-column varied-height tiles (spec 19, G-039 — the
 * prototype's `columns` gallery). Natural-height images (the 4/3 crop is lifted
 * below) give the varied emphasis; 2 columns on mobile, 3 at >=640px. The live
 * ADR-030 projection mirrors this exact layout with `.f2b-gallery__grid--masonry`
 * in the tenant-runtime style contract (both bake sides agree). */
.sk-gallery--masonry .sk-gallery__track {
  display: block;
  columns: 2;
  column-gap: var(--sk-space-3);
}

@media (min-width: 640px) {
  .sk-gallery--masonry .sk-gallery__track {
    columns: 3;
  }
}

.sk-gallery--masonry .sk-gallery__item {
  break-inside: avoid;
  margin-bottom: var(--sk-space-3);
}

.sk-gallery__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--sk-radius);
}

/* Masonry tiles keep their natural aspect ratio (the varied-height effect); the
 * intrinsic width/height attributes still reserve the box, so no CLS. */
.sk-gallery--masonry .sk-gallery__figure img {
  aspect-ratio: auto;
}

.sk-gallery__caption {
  margin-top: var(--sk-space-3);
  font-size: var(--sk-text-sm);
  color: var(--brand-ink-300);
}

/* ---------- 5h. Media figure ------------------------------------------ */

.sk-figure img {
  width: 100%;
  border-radius: var(--sk-radius);
}

.sk-figure--inline {
  max-width: var(--sk-measure);
  margin-inline: auto;
}

.sk-figure--wide {
  max-width: var(--sk-container-max);
  margin-inline: auto;
}

.sk-figure--full-bleed {
  width: 100%;
}

.sk-figure--full-bleed img {
  border-radius: 0;
  max-height: 70vh;
  object-fit: cover;
}

.sk-figure__caption {
  margin-top: var(--sk-space-2);
  font-size: var(--sk-text-sm);
  color: var(--brand-ink-300);
}

/* ---------- 5i. CTA band ---------------------------------------------- */

.sk-cta {
  text-align: center;
}

.sk-cta--accent {
  background: var(--brand-accent);
  color: var(--sk-on-accent);
}

.sk-cta--ink {
  background: var(--brand-ink-100);
  color: var(--sk-on-ink);
}

.sk-cta__inner {
  max-width: var(--sk-container-max);
  margin-inline: auto;
  padding: clamp(3.25rem, 9vw, 5.5rem) var(--sk-gutter);
}

.sk-cta__heading {
  max-width: 26ch;
  margin-inline: auto;
}

.sk-cta__lead {
  max-width: 52ch;
  margin: var(--sk-space-3) auto 0;
  font-size: var(--sk-text-lg);
  line-height: var(--sk-leading-snug);
  opacity: 0.92;
}

.sk-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sk-space-4);
  margin-top: var(--sk-space-5);
}

.sk-cta--accent .sk-cta__button {
  background: var(--sk-on-accent);
  color: var(--brand-accent);
}

.sk-cta--ink .sk-cta__button {
  background: var(--brand-accent);
  color: var(--sk-on-accent);
}

.sk-cta__secondary {
  color: inherit;
  font-weight: 600;
}

/* `paper` (the prototype's light mission band `.band`): the alt surface +
 * hairline rules, left-aligned, with the solid accent button. AA rests on the
 * brand compiler's REQUIRED ink/surface body pair (a failing kit can't
 * compile), like every other surface — no discipline-dependent contrast check. */
.sk-cta--paper {
  background: var(--brand-surface-200);
  border-block: 1px solid var(--brand-rule-1);
  text-align: left;
}

.sk-cta--paper .sk-cta__heading {
  max-width: none;
  margin-inline: 0;
}

.sk-cta--paper .sk-cta__lead {
  max-width: var(--sk-measure);
  margin-inline: 0;
}

.sk-cta--paper .sk-cta__actions {
  justify-content: flex-start;
}

.sk-cta--paper .sk-cta__button {
  background: var(--brand-accent);
  color: var(--sk-on-accent);
}

.sk-cta--paper .sk-cta__button:hover {
  background: var(--brand-accent-hi);
}

/* ---------- 5j. Hours & contact --------------------------------------- */

.sk-contact__heading {
  margin-bottom: var(--sk-space-5);
}

.sk-contact__body {
  max-width: 56ch;
  margin-bottom: var(--sk-space-5);
  color: var(--brand-ink-200);
  font-size: var(--sk-text-lg);
  line-height: var(--sk-leading-snug);
}

/* Collapses with the heading's space-5 bottom margin to a space-3 gap —
 * the lead line reads as part of the heading group. */
.sk-contact__heading + .sk-contact__body {
  margin-top: calc(var(--sk-space-3) - var(--sk-space-5));
}

.sk-contact__columns {
  display: grid;
  gap: var(--sk-space-6);
}

.sk-contact--split .sk-contact__columns {
  align-items: start;
}

@media (min-width: 880px) {
  .sk-contact--split .sk-contact__columns {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.sk-contact__address {
  font-style: normal;
  font-size: var(--sk-text-lg);
  line-height: var(--sk-leading-snug);
}

.sk-contact__address-line {
  display: block;
}

.sk-contact__channels {
  margin-top: var(--sk-space-4);
  display: grid;
  gap: var(--sk-space-2);
}

.sk-contact__link {
  font-weight: 600;
}

.sk-contact__hours-title {
  font-size: var(--sk-text-base);
  font-family: var(--sk-font-body);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-ink-200);
  margin-bottom: var(--sk-space-3);
}

.sk-contact__hours-list {
  display: grid;
  gap: var(--sk-space-2);
}

.sk-contact__hours-row {
  display: flex;
  justify-content: space-between;
  gap: var(--sk-space-3);
  padding-bottom: var(--sk-space-2);
  border-bottom: 1px solid var(--brand-rule-1);
}

.sk-contact__hours-row dt {
  color: var(--brand-ink-200);
}

.sk-contact__hours-row dd {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* panel (spec 22) — the prototype's labeled contact band: Email / Call or text /
 * Visit / Elsewhere cells in a 1-col → 2×2 grid. Every value rides currentColor,
 * so an `sk-section--ink` wrapper renders the dark band while a light section
 * would render the same layout in ink. */
.sk-contact--panel .sk-contact__heading {
  font-size: var(--sk-display-h2, var(--sk-text-2xl));
}

.sk-contact--panel .sk-contact__body {
  color: inherit;
}

.sk-contact--panel .sk-contact__channels {
  margin-top: var(--sk-space-6);
  display: grid;
  gap: var(--sk-space-4);
}

@media (min-width: 880px) {
  .sk-contact--panel .sk-contact__channels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sk-space-6);
  }
}

.sk-contact--panel .sk-contact__channel {
  border-top: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  padding-top: var(--sk-space-3);
}

.sk-contact--panel .sk-contact__label {
  display: block;
  font-family: var(--sk-font-body);
  font-size: var(--sk-text-xs);
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sk-contact--panel .sk-contact__values {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-space-2) var(--sk-space-4);
}

.sk-contact--panel .sk-contact__value {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  margin-top: var(--sk-space-1);
  color: inherit;
  font-family: var(--sk-font-display);
  font-size: var(--sk-text-xl);
  line-height: var(--sk-leading-snug);
  text-decoration: none;
}

.sk-contact--panel a.sk-contact__value {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color 160ms ease-out;
}

.sk-contact--panel a.sk-contact__value:hover {
  text-decoration-color: currentColor;
}

/* ---------- 5k. Blog index -------------------------------------------- */

.sk-posts {
  display: grid;
  gap: var(--sk-space-5);
}

@media (min-width: 880px) {
  .sk-posts--cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.sk-post-card {
  height: 100%;
  border: 1px solid var(--brand-rule-1);
  border-radius: var(--sk-radius);
  overflow: hidden;
  background: var(--brand-surface-100);
}

.sk-posts--list .sk-post-card {
  display: flex;
  gap: var(--sk-space-4);
  align-items: flex-start;
  border: 0;
  border-top: 1px solid var(--brand-rule-2);
  border-radius: 0;
  padding-top: var(--sk-space-4);
}

.sk-post-card__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* A small cover thumbnail leads each list row when the post has one (spec 19,
 * G-045 residual); text-only rows keep the body full-width. */
.sk-posts--list .sk-post-card__media {
  flex: none;
  width: 7rem;
  border-radius: var(--sk-radius);
}

.sk-post-card__body {
  padding: var(--sk-space-4);
}

.sk-posts--list .sk-post-card__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}

.sk-post-card__date {
  display: block;
  font-size: var(--sk-text-sm);
  color: var(--brand-ink-300);
  margin-bottom: var(--sk-space-2);
}

.sk-post-card__title {
  font-size: var(--sk-text-lg);
}

.sk-post-card__title a {
  text-decoration: none;
}

.sk-post-card__title a:hover {
  color: var(--sk-accent-text);
}

.sk-post-card__excerpt {
  margin-top: var(--sk-space-2);
  color: var(--brand-ink-200);
  font-size: var(--sk-text-sm);
}

/* Editorial post rows (remaining-site slice 4 — the prototype's `/blog`): a
 * wide 3:2 cover beside the post text at >=60em, stacked on narrow. The row is
 * open (no card chrome); the title + a "Read the post" CTA both link the
 * article route, with hover + the shared `:focus-visible` outline. */
.sk-posts--editorial {
  gap: clamp(3rem, 7vw, 5rem);
}

.sk-posts--editorial .sk-post-card {
  height: auto;
  display: grid;
  gap: var(--sk-space-4);
  align-items: start;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

@media (min-width: 60em) {
  .sk-posts--editorial .sk-post-card {
    grid-template-columns: 18rem 1fr;
    column-gap: var(--sk-space-6);
  }
}

.sk-posts--editorial .sk-post-card__media {
  aspect-ratio: 3 / 2;
  border-radius: var(--sk-radius);
}

.sk-posts--editorial .sk-post-card__body {
  padding: 0;
}

.sk-posts--editorial .sk-post-card__title {
  margin-top: var(--sk-space-2);
  font-size: var(--sk-text-2xl);
}

.sk-posts--editorial .sk-post-card__excerpt {
  margin-top: var(--sk-space-3);
  font-size: var(--sk-text-base);
  max-width: var(--sk-measure);
}

/* The "Read the post" CTA (brief item 2): accent, underlined, weighted — the
 * underline, hover, and `:focus-visible` outline come from the global `a`
 * idiom, so a keyboard user sees a clear focus ring. */
.sk-post-card__cta {
  display: inline-block;
  margin-top: var(--sk-space-3);
  color: var(--sk-accent-text);
  font-weight: 600;
}

/* ---------- 5l. Article ----------------------------------------------- */

.sk-article__header {
  max-width: var(--sk-measure);
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(2rem, 6vw, 3.5rem);
}

.sk-article__date {
  display: block;
  margin-top: var(--sk-space-3);
  color: var(--brand-ink-300);
  font-size: var(--sk-text-sm);
}

.sk-article__hero {
  max-width: var(--sk-container-max);
  margin: 0 auto clamp(2rem, 6vw, 3.5rem);
}

.sk-article__hero img {
  width: 100%;
  max-height: 60vh;
  object-fit: cover;
  border-radius: var(--sk-radius);
}

.sk-article__footer {
  max-width: var(--sk-measure);
  margin-inline: auto;
  margin-top: var(--sk-space-6);
  padding-top: var(--sk-space-4);
  border-top: 1px solid var(--brand-rule-1);
}

.sk-article__back {
  font-weight: 600;
  text-decoration: none;
  color: var(--sk-accent-text);
}

/* ---------- 5l-ii. Events (listing + one occurrence's page) ------------ */

/* The dated-occurrence listing (F2B events spec `12`) — `blog-index`'s card
 * grid one collection along, so the two listings read as one system rather
 * than as two designs. Every visible token here is structure; the state a
 * card can carry (sold out, seats left, price, the next action) arrives
 * through the ADR-030 tier-2 runtime projection and styles itself. */
.sk-events {
  display: grid;
  gap: var(--sk-space-5);
}

@media (min-width: 880px) {
  .sk-events {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* No upcoming dates — an ordinary state for a tenant between seasons, not an
 * error. One column regardless of breakpoint: a single sentence stretched
 * across a third of a 3-up grid reads as a card that failed to load. */
.sk-events--empty {
  grid-template-columns: 1fr;
}

@media (min-width: 880px) {
  .sk-events--empty {
    grid-template-columns: 1fr;
  }
}

.sk-events__empty {
  margin: 0;
  color: var(--sk-color-muted, inherit);
}

/* A column, so the state block the runtime appends lands on the card's FLOOR
 * rather than wherever the excerpt happens to stop. The grid already stretches
 * every card to the tallest in its row; without this the price and the
 * *Register and pay* button sit at a different height in each one, because a
 * one-line excerpt puts them a line higher than a two-line one. Found by the
 * served screenshot pass at slice 5b, on the tenant's own listing — the block
 * is a runtime child of this element, so only the bake's own stylesheet can
 * place it, and it costs no style-contract edit and no runtime rebuild. */
.sk-event-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--brand-rule-1);
  border-radius: var(--sk-radius);
  overflow: hidden;
  background: var(--brand-surface-100);
}

.sk-event-card__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Absorbs the slack, which is what pins the state block to the floor. */
.sk-event-card__body {
  flex: 1 1 auto;
  padding: var(--sk-space-4);
}

/* The when-line leads the card, because a dated thing's first question is
 * "when": accent-toned and weighted so it carries, small enough that the title
 * still leads the hierarchy. Deliberately NOT the tracked-uppercase kicker
 * treatment it shares a slot with — a kicker is one or two words, while a
 * multi-day range ("Friday, September 18, 2026 at 4:00 PM PDT – Sunday,
 * September 20…") runs to three lines on a phone, and three lines of caps is
 * a shout rather than a label. */
.sk-event-card__when {
  display: block;
  font-size: var(--sk-text-sm);
  font-weight: 600;
  color: var(--sk-accent-text);
  margin-bottom: var(--sk-space-2);
}

.sk-event-card__title {
  font-size: var(--sk-text-lg);
}

.sk-event-card__title a {
  text-decoration: none;
}

.sk-event-card__title a:hover {
  color: var(--sk-accent-text);
}

.sk-event-card__place {
  margin-top: var(--sk-space-2);
  color: var(--brand-ink-300);
  font-size: var(--sk-text-sm);
}

.sk-event-card__excerpt {
  margin-top: var(--sk-space-2);
  color: var(--brand-ink-200);
  font-size: var(--sk-text-sm);
}

/* One occurrence's own page — `article`'s centered editorial opener, with the
 * two facts a dated thing must answer above the fold (when, and where). */
.sk-event__header {
  max-width: var(--sk-measure);
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(2rem, 6vw, 3.5rem);
}

.sk-event__facts {
  display: grid;
  gap: var(--sk-space-2);
  margin-top: var(--sk-space-3);
}

.sk-event__when {
  font-weight: 600;
}

.sk-event__place {
  display: grid;
  gap: 0.15em;
  color: var(--brand-ink-300);
  font-size: var(--sk-text-sm);
}

.sk-event__place-name {
  color: var(--brand-ink-200);
}

.sk-event__hero {
  max-width: var(--sk-container-max);
  margin: 0 auto clamp(2rem, 6vw, 3.5rem);
}

.sk-event__hero img {
  width: 100%;
  max-height: 60vh;
  object-fit: cover;
  border-radius: var(--sk-radius);
}

/* ---------- 5m. Footer ------------------------------------------------ */

.sk-footer {
  background: var(--brand-ink-100);
  color: var(--sk-on-ink);
}

.sk-footer__inner {
  max-width: var(--sk-container-max);
  margin-inline: auto;
  padding: clamp(3rem, 7vw, 4.5rem) var(--sk-gutter) var(--sk-space-5);
  display: grid;
  gap: var(--sk-space-6);
}

@media (min-width: 880px) {
  .sk-footer--columns .sk-footer__inner {
    grid-template-columns: 1.2fr 2fr;
  }
}

.sk-footer__name {
  font-family: var(--sk-font-display);
  font-size: var(--sk-text-xl);
  font-weight: 650;
}

.sk-footer__tagline {
  margin-top: var(--sk-space-2);
  opacity: 0.85;
  max-width: 36ch;
}

/* Business identity (spec 22, G-032): NAP contact channels + profile links,
 * under the footer brand. Each channel renders independently — a missing fact
 * drops its own line (element-wise degrade). */
.sk-footer__identity {
  margin-top: var(--sk-space-4);
  display: grid;
  gap: var(--sk-space-3);
}

.sk-footer__contact {
  font-style: normal; /* <address> defaults to italic */
  display: grid;
  gap: var(--sk-space-2);
  font-size: var(--sk-text-sm);
  opacity: 0.9;
}

.sk-footer__address {
  margin: 0;
  line-height: 1.5;
}

.sk-footer__channel {
  width: fit-content;
  color: inherit;
  text-decoration: none;
  opacity: 0.92;
}

.sk-footer__channel:hover {
  text-decoration: underline;
  opacity: 1;
}

.sk-footer__profiles {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-space-3);
  font-size: var(--sk-text-sm);
}

.sk-footer__nav {
  display: grid;
  gap: var(--sk-space-5);
}

@media (min-width: 640px) {
  .sk-footer__nav {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  }
}

.sk-footer__group-title {
  font-size: var(--sk-text-xs);
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: var(--sk-space-3);
}

.sk-footer__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--sk-space-2);
}

.sk-footer__link {
  text-decoration: none;
  opacity: 0.92;
}

.sk-footer__link:hover {
  text-decoration: underline;
  opacity: 1;
}

.sk-footer__legal {
  max-width: var(--sk-container-max);
  margin-inline: auto;
  padding: var(--sk-space-4) var(--sk-gutter) var(--sk-space-5);
  border-top: 1px solid color-mix(in srgb, var(--sk-on-ink) 22%, transparent);
  font-size: var(--sk-text-sm);
  opacity: 0.75;
}

.sk-footer--minimal .sk-footer__inner {
  padding-bottom: var(--sk-space-4);
}

/* compact (spec 22) — the prototype's light NAP footer: on the page surface with
 * a hairline top rule and a 3-column brand · address · contact layout that
 * stacks below the breakpoint. Overrides the base dark-footer ground; NAP-forward
 * (no nav group), so the identity + contact channels + legal all remain. */
.sk-footer--compact {
  background: transparent;
  color: var(--brand-ink-100);
  border-top: 1px solid var(--brand-rule-1);
}

.sk-footer--compact .sk-footer__inner {
  padding: var(--sk-space-7) var(--sk-gutter) var(--sk-space-6);
  gap: var(--sk-space-5);
}

@media (min-width: 880px) {
  .sk-footer--compact .sk-footer__inner {
    grid-template-columns: 1.4fr 1fr 1fr;
    column-gap: var(--sk-space-6);
  }
}

/* Footer type scale (owner feedback — each element up one notch on the scale). */
.sk-footer--compact .sk-footer__name {
  font-size: var(--sk-text-2xl);
}

.sk-footer--compact .sk-footer__tagline {
  margin-top: var(--sk-space-1);
  max-width: 32ch;
  color: var(--brand-ink-300);
  font-size: var(--sk-text-base);
  opacity: 1;
}

.sk-footer--compact .sk-footer__facts {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: var(--sk-space-2);
  font-size: var(--sk-text-base);
  color: var(--brand-ink-200);
}

.sk-footer--compact .sk-footer__fact {
  width: fit-content;
  color: var(--brand-ink-200);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--brand-rule-2);
}

.sk-footer--compact .sk-footer__fact:hover {
  color: var(--sk-accent-text);
  text-decoration-color: currentColor;
}

.sk-footer--compact .sk-footer__legal {
  margin-top: var(--sk-space-5);
  padding-top: var(--sk-space-3);
  border-top: 1px solid var(--brand-rule-1);
  font-size: var(--sk-text-sm);
  letter-spacing: 0.03em;
  color: var(--brand-ink-300);
  opacity: 1;
}

/* ---------- 5n. Widget slot ------------------------------------------- */

/* The runtime projects the live widget into the region; keep the baked
 * fallback unstyled beyond flow spacing so the widget owns its box. */
.sk-slot {
  display: block;
}

/* ---------- 6. Runtime-primitive motion pairing ----------------------- */

/* Paired-class contract: the tenant runtime only toggles `.visible` on
 * elements that carry a non-f2b class (site-kit components always do), so
 * this CSS owns the initial state and the transition. Both guards are
 * load-bearing:
 *   - `scripting: enabled` — content is NEVER hidden for no-JS visitors
 *     (or where the media feature is unsupported: the whole block drops,
 *     which fails visible-safe);
 *   - `prefers-reduced-motion: no-preference` — reduced-motion users get
 *     static, fully visible content; the runtime's own RM path also marks
 *     `.visible` instantly.
 */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .f2b-scroll-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
      transform 700ms cubic-bezier(0.16, 1, 0.3, 1),
      opacity 550ms ease-out;
  }

  .f2b-scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* CSS-only stagger: inter-child reveal delay inside a stagger parent. */
  .f2b-stagger > :nth-child(2) .f2b-scroll-reveal,
  .f2b-stagger > :nth-child(2).f2b-scroll-reveal {
    transition-delay: 70ms;
  }

  .f2b-stagger > :nth-child(3) .f2b-scroll-reveal,
  .f2b-stagger > :nth-child(3).f2b-scroll-reveal {
    transition-delay: 140ms;
  }

  .f2b-stagger > :nth-child(4) .f2b-scroll-reveal,
  .f2b-stagger > :nth-child(4).f2b-scroll-reveal {
    transition-delay: 210ms;
  }

  .f2b-stagger > :nth-child(5) .f2b-scroll-reveal,
  .f2b-stagger > :nth-child(5).f2b-scroll-reveal {
    transition-delay: 280ms;
  }

  .f2b-stagger > :nth-child(n + 6) .f2b-scroll-reveal,
  .f2b-stagger > :nth-child(n + 6).f2b-scroll-reveal {
    transition-delay: 350ms;
  }
}