/* Custom properties only. A --sk-* token here is PUBLIC to every copied sheet; renaming one is a cross-distribution break. A theme re-declares a SUBSET of the --kit-* tokens below; the rest are defaults it may override. */

[data-sk] {
  --kit-background: #fdfdfc;
  --kit-surface: #f4f2ee;
  --kit-foreground: #1c1a17;
  --kit-muted: #6e6a62;
  --kit-accent: #9a5b34;
  /* Never for emphasis or decoration. */
  --kit-danger: #c4453c;
  --kit-divider: color-mix(in srgb, var(--kit-muted) 30%, transparent);
  --kit-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --kit-font-display: var(--kit-font-sans);
  --kit-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Constants, not theme roles: they sit on the fixed dark veil. */
  --sk-overlay-ink: rgba(255, 255, 255, 0.97);
  --sk-overlay-ink-muted: rgba(255, 255, 255, 0.85);
  --sk-overlay-stroke: rgba(255, 255, 255, 0.32);
  --kit-space-1: 0.35rem;
  --kit-space-2: 0.65rem;
  --kit-space-3: 1rem;
  --kit-space-4: 1.5rem;
  --kit-space-5: 3rem;
  --kit-space-6: 4.5rem;
  /* No breakpoint tokens: a media query cannot read a custom property; the rungs are literals. */
  --kit-radius: 6px;
  --kit-card-radius: 0px;
  --kit-media-radius: 0px;
  --kit-border-width: 1px;
  /* Body is 1. The heading family derives from the ONE title dial on Fibonacci powers (r = title^⅕: h4 ×r, h3 ×r², h2 ×r³, h1 ×r⁵, display ×r⁸). */
  --kit-type-base: 1.05rem;
  --kit-size-badge: 0.75;
  --kit-size-eyebrow: 0.75;
  --kit-size-detail: 0.75;
  --kit-weight-detail: 500;
  --kit-track-detail: 0.14;
  --kit-size-title: 3.44;
  --kit-size-button: 0.9;
  --kit-gap-badge: 1;
  --kit-gap-eyebrow: 0.5;
  --kit-gap-title: 1;
  --kit-gap-actions: 1.5;
  --kit-air-frame: 2.86;
  --kit-air-inline: 1.25;
  --kit-air-row: 1.5;
  --kit-air-data-row: var(--kit-air-row);
  --kit-air-band: 4.3;
  /* A naked-link row derives ×2.3 from this dial. */
  --kit-air-actions: 0.62;
  --kit-air-sitemap-x: 4.29;
  --kit-air-sitemap-y: 1.43;
  --kit-size-stage: 560;
  /* A photo declaring its own data-aspect wins. */
  --kit-aspect-plate: 2.4;
  --kit-weight-title: 650;
  --kit-weight-body: 400;
  --kit-weight-eyebrow: 620;
  --kit-weight-badge: 600;
  --kit-weight-button: 600;
  --kit-track-title: -0.02;
  --kit-track-body: 0;
  --kit-track-eyebrow: 0.14;
  --kit-track-badge: 0.02;
  --kit-track-button: 0;
  --kit-caps-button: none;
  /* 0 is a uniform heading family. */
  --kit-ramp-contrast: 1;
  --kit-type-slope: 1;
  /* Signed: durations divide by the magnitude, a negative value reverses travel. */
  --kit-anim-intensity: 1;
  --kit-tone-intensity: 1;
  --kit-shape-intensity: 1;
  --kit-border-intensity: 1;
  --kit-density-intensity: 1;
  /* The filter and the wash are separate decisions; each defaults to the shared dial. */
  --kit-tone-filter-intensity: var(--kit-tone-intensity);
  --kit-tone-wash-intensity: var(--kit-tone-intensity);
  /* ms as a bare number; every stagger is slot × beat. */
  --kit-cascade-beat: 90;
  --kit-size-brand: 1;
  --kit-weight-brand: 600;
  --kit-track-brand: 0.01;
  --kit-size-compact-brand: 0.85;
  --kit-font-brand: var(--kit-font-sans);
  --kit-caps-brand: none;
  /* A percent, not a color: a control boundary needs 3:1 non-text contrast (WCAG 1.4.11) on every tone. */
  --kit-control-stroke-mix: 100;
  --kit-size-nav: 0.75;
  --kit-weight-nav: 500;
  --kit-track-nav: 0.08;
  --kit-caps-nav: uppercase;
  /* The NAME --kit-<family>-<element> is the contract. Lengths default "0px", never bare 0, which reads as a ratio. */
  --kit-font-badge: var(--kit-font-sans);
  --kit-font-eyebrow: var(--kit-font-sans);
  --kit-font-title: var(--kit-font-display);
  --kit-font-body: var(--kit-font-sans);
  --kit-font-button: var(--kit-font-sans);
  --kit-slant-badge: normal;
  --kit-slant-eyebrow: normal;
  --kit-slant-title: normal;
  --kit-slant-body: normal;
  --kit-slant-button: normal;
  --kit-lead-badge: normal;
  --kit-lead-eyebrow: normal;
  --kit-lead-title: 1.08;
  --kit-lead-body: 1.65;
  --kit-lead-button: 1.2;
  --kit-caps-badge: none;
  --kit-caps-eyebrow: uppercase;
  --kit-caps-title: none;
  --kit-caps-body: none;
  --kit-edge-badge: var(--sk-border-width-min);
  --kit-edge-eyebrow: 0px;
  --kit-edge-title: 0px;
  --kit-edge-body: 0px;
  --kit-edge-button: var(--sk-border-width-min);
  --kit-edge-style-badge: solid;
  --kit-edge-style-eyebrow: solid;
  --kit-edge-style-title: solid;
  --kit-edge-style-body: solid;
  --kit-edge-style-button: solid;
  /* Control corner, not card: `full` still clamps to a pill. */
  --kit-round-badge: calc(var(--kit-radius) * 0.65);
  --kit-round-eyebrow: 0px;
  --kit-round-title: 0px;
  --kit-round-body: 0px;
  /* Raw, no cap: a cap would make the `full` lozenge impossible; CSS clamps to half the box anyway. */
  --kit-round-button: var(--kit-radius);
  --kit-pad-badge: 0.4em 0.95em;
  --kit-pad-eyebrow: 0px;
  --kit-pad-title: 0px;
  --kit-pad-body: 0px;
  --kit-pad-button: 0.8rem 1.6rem;
  --kit-size-icon: 1.05;
  /* Raw px; bar-height is a MIN-height. */
  --kit-bar-height: 64;
  --kit-bar-pad-y: 10.4;
  --kit-bar-gap: 24;
  --kit-zone-gap: 16;
  --kit-bar-divider: 0;
  /* Raw px; elevation is a shadow alpha, 0..1. */
  --kit-panel-radius: 10;
  --kit-panel-pad: 20;
  --kit-panel-shadow: 0.14;
  /* Raw px, a literal: a dial IS a bare number, never a var() ref. The DESKTOP rung; the two below it are fractions of it. */
  --kit-gutter: 32;
  /* Indirected so the tone axis can remap the whole set. */
  --sk-ink: var(--kit-foreground);
  --sk-ink-muted: var(--kit-muted);
  /* The ink's POLARITY as a number, for paint that cannot inherit currentColor (a raster logo): 1 while --sk-ink is a light ink on a dark ground. Every rule that sets --sk-ink sets it too. --sk-theme-dark is the theme's own polarity, stamped by the generated theme sheet. */
  --sk-theme-dark: 0;
  --sk-ink-on-dark: var(--sk-theme-dark);
  --sk-type-r: pow(var(--kit-size-title), 0.2);
  --sk-type-r-min: calc(1 + (var(--sk-type-r) - 1) * 0.55);
  --sk-text-badge-size: calc(var(--kit-type-base) * var(--kit-size-badge));
  --sk-text-eyebrow-size: calc(var(--kit-type-base) * var(--kit-size-eyebrow));
  --sk-text-detail-size: calc(var(--kit-type-base) * var(--kit-size-detail));
  --sk-text-btn-size: calc(var(--kit-type-base) * var(--kit-size-button));
  --sk-text-brand-size: calc(var(--kit-type-base) * var(--kit-size-brand));
  --sk-text-brand-size-compact: calc(var(--sk-text-brand-size) * var(--kit-size-compact-brand));
  --sk-text-nav-size: calc(var(--kit-type-base) * var(--kit-size-nav));
  --sk-icon-size: calc(var(--kit-type-base) * var(--kit-size-icon));
  --sk-bar-height: calc(var(--kit-bar-height) * 1px);
  --sk-bar-pad-y: calc(var(--kit-bar-pad-y) * 1px);
  --sk-bar-gap: calc(var(--kit-bar-gap) * 1px);
  --sk-zone-gap: calc(var(--kit-zone-gap) * 1px);
  /* Fixed values, like the overlay inks they hold up. ONE strength wherever a
   * VERDICT put the whites there: a second would answer a brightness the kit
   * cannot know. */
  --sk-chrome-scrim: linear-gradient(rgba(16, 15, 14, 0.25), rgba(16, 15, 14, 0));
  /* With no engine the bar wears the whites over whatever the row holds,
   * having read nothing, so this one carries the whole contrast alone. */
  --sk-chrome-scrim-unread: linear-gradient(rgba(16, 15, 14, 0.55), rgba(16, 15, 14, 0));
  --sk-chrome-scrim-fade: 2rem;
  --sk-gutter: calc(var(--kit-gutter) * 1px);
  /* Floored at 1, or a lowered density dial would resolve an inset inside the gutter. */
  --sk-air: max(1, var(--kit-air-inline));
  /* The 100% must stay a percentage: it resolves at the USE site, which is what lets one term serve padding, margin and scroll-padding. */
  --sk-page-cap: calc((100% - var(--sk-page-max, 200vw)) / 2);
  --sk-panel-radius: calc(var(--kit-panel-radius) * 1px);
  --sk-panel-pad: calc(var(--kit-panel-pad) * 1px);
  --sk-panel-shadow: 0 18px 40px -12px rgba(0, 0, 0, var(--kit-panel-shadow));
  /* Only the slopes scale; the floor and the ceiling are the dials. */
  --sk-type-slope: var(--kit-type-slope, 1);
  --sk-text-h4-size: calc(var(--kit-type-base) * var(--sk-type-r));
  --sk-text-h3-size: clamp(
    calc(var(--kit-type-base) * pow(var(--sk-type-r-min), 2)),
    calc(2.25 * var(--sk-page-vw) * var(--sk-type-slope)),
    calc(var(--kit-type-base) * pow(var(--sk-type-r), 2))
  );
  --sk-text-h2-size: clamp(
    calc(var(--kit-type-base) * pow(var(--sk-type-r-min), 3)),
    calc(3 * var(--sk-page-vw) * var(--sk-type-slope)),
    calc(var(--kit-type-base) * pow(var(--sk-type-r), 3))
  );
  --sk-text-h1-size: clamp(
    calc(var(--kit-type-base) * pow(var(--sk-type-r-min), 5)),
    /* Two arms: the fill is a constant with no page maximum, so the slope one carries an uncapped page. */
    max(
        calc(5 * var(--sk-page-vw) * var(--sk-type-slope)),
        calc(
          var(--kit-type-base) * var(--kit-size-title) * var(--sk-page-fill) * var(--sk-type-slope)
        )
      ),
    calc(var(--kit-type-base) * var(--kit-size-title))
  );
  --sk-text-display-size: clamp(
    calc(var(--kit-type-base) * pow(var(--sk-type-r-min), 8)),
    calc(7.75 * var(--sk-page-vw) * var(--sk-type-slope)),
    calc(var(--kit-type-base) * pow(var(--sk-type-r), 8))
  );
  /* One step above body, never a heading step. */
  --sk-lede-size: clamp(
    var(--kit-type-base),
    calc(1.5 * var(--sk-page-vw) * var(--sk-type-slope)),
    var(--sk-text-h4-size)
  );
  --sk-fit-floor: 2rem;
  /* Sections never re-cap or un-cap copy with their own max-width. */
  --kit-measure: 46;
  --sk-measure: calc(var(--kit-measure) * 1ch);
  /* In ch: resolves against the element's own size, so one number holds at every register. */
  --kit-measure-title: 20;
  --sk-measure-title: calc(var(--kit-measure-title) * 1ch);
  --sk-rhythm-badge: var(--kit-gap-badge);
  --sk-rhythm-label: var(--kit-gap-eyebrow);
  --sk-rhythm-title: var(--kit-gap-title);
  --sk-rhythm-departure: var(--kit-gap-actions);
  /* The innermost fallback of the --sk-frame-inset-y axis family. */
  --sk-frame-pad: calc(var(--kit-air-frame) * var(--kit-type-base));
  /* The focus floor paints from these; a component re-points one in its own scope. */
  --sk-focus-ring-width: 2px;
  --sk-focus-ring-color: var(--sk-accent);
  --sk-focus-ring-offset: 2px;
  --sk-ruled-pad: calc(var(--kit-air-row) * var(--kit-type-base));
  --sk-data-row-pad: calc(var(--kit-air-data-row) * var(--kit-type-base));
  --sk-actions-gap: calc(var(--kit-air-actions) * var(--kit-type-base));
  --sk-sitemap-gap-x: calc(var(--kit-air-sitemap-x) * var(--kit-type-base));
  --sk-sitemap-gap-y: calc(var(--kit-air-sitemap-y) * var(--kit-type-base));
  /* A plain px length, deliberately not vh-capped: a cap silently eats the dial. */
  --sk-stage-h: calc(var(--kit-size-stage) * 1px);
  --sk-band-pad: calc(var(--kit-type-base) * var(--kit-air-band));
  --sk-accent: var(--kit-accent);
  --sk-bg: var(--kit-background);
  --sk-surface: var(--kit-surface);
  --sk-card: var(--kit-surface);
  --sk-field: var(--kit-background);
  --sk-danger: var(--kit-danger);
  /* A fixed near-white ink, so the banner reads on every theme's danger red. */
  --sk-danger-ink: #fffdfc;
  --sk-btn-bg: var(--kit-foreground);
  --sk-btn-ink: var(--kit-background);
  --sk-stroke: var(--kit-divider);
  --sk-radius: var(--kit-radius);
  /* Capped: a text field must never become a capsule. */
  --sk-control-radius: min(var(--kit-radius), 1.2em);
  --sk-media-radius: var(--kit-media-radius);
  --sk-card-radius: var(--kit-card-radius);
  /* Floored at 1px. Functional edges belong here, and so does a line a prop draws on purpose: a dial that is on must never render nothing. Decorative ones ride the raw token, so 0 is borderless. */
  --sk-border-width: var(--kit-border-width);
  --sk-border-width-min: max(var(--kit-border-width), 1px);
  /* Off the border dial: a heavier rule posture must never fatten drawn glyphs. */
  --sk-icon-stroke: 1px;
}

/* On the body, not [data-sk]: a flush band re-declares --sk-page-max on its own members. */
body {
  --sk-page-vw: min(1vw, var(--sk-page-max, 200vw) / 100);
  /* calc() cannot divide a length by a length; the trig pair gives the ratio. */
  --sk-page-fill: tan(atan2(calc(var(--sk-page-vw) * 100), var(--sk-page-max, 200vw)));
}

@media (width <= 900px) {
  [data-sk] {
    --sk-gutter: calc(var(--kit-gutter) * 0.75px);
  }
}
@media (width <= 560px) {
  [data-sk] {
    --sk-gutter: calc(var(--kit-gutter) * 0.625px);
    --sk-air: 1;
  }
}

/* `[data-tone]` too, since a var() substitutes where it is declared and a tone is stamped on cards the kit does not root. Never toward transparent: WebKit composites a selection background with its ground, which an author alpha would compound, so a dark ground takes the poles through the `-dark-` fallback instead of a mix. */
[data-sk],
[data-tone] {
  --sk-selection-bg: var(
    --sk-selection-dark-bg,
    color-mix(in srgb, var(--sk-accent) 32%, var(--sk-bg))
  );
  --sk-selection-ink: var(--sk-selection-dark-ink, var(--sk-ink));
  --sk-selection-page-bg: color-mix(in srgb, var(--kit-accent) 32%, var(--kit-background));
  --sk-selection-page-ink: var(--kit-foreground);
}

/* The tone axis. The resting ink comes first; the remaps sit AFTER it at equal specificity and win by order, so keep them below it. A remap moves the ring's ink too: base resolves it on the kit ROOT, so a remap below one would leave the ring behind. */
[data-sk] {
  color: var(--sk-ink);
}

[data-tone="surface"] {
  --sk-bg: var(--kit-surface);
  --sk-card: var(--kit-background);
  --sk-field: var(--kit-background);
  background-color: var(--sk-bg);
}

[data-tone="inverted"] {
  --sk-bg: var(--kit-foreground);
  --sk-ink: var(--kit-background);
  /* The page ink swapped for its ground: light on dark in a light theme, and the reverse in a dark one. */
  --sk-ink-on-dark: calc(1 - var(--sk-theme-dark));
  --sk-ink-muted: color-mix(in srgb, var(--kit-background) 62%, transparent);
  /* Lightened toward the background to stay legible on the dark band. */
  --sk-accent: color-mix(in srgb, var(--kit-accent) 55%, var(--kit-background));
  --sk-focus-ring-color: var(--sk-ink);
  --sk-surface: color-mix(in srgb, var(--kit-background) 8%, transparent);
  --sk-card: color-mix(in srgb, var(--kit-background) 7%, transparent);
  --sk-field: color-mix(in srgb, var(--kit-background) 8%, transparent);
  --sk-stroke: color-mix(in srgb, var(--kit-background) 22%, transparent);
  --sk-btn-bg: var(--kit-background);
  --sk-btn-ink: var(--kit-foreground);
  --sk-selection-bg: var(--sk-ink);
  --sk-selection-ink: var(--sk-bg);
  background-color: var(--sk-bg);
  color: var(--sk-ink);
}

[data-tone="accent"] {
  --sk-bg: var(--kit-accent);
  --sk-ink: var(--kit-background);
  --sk-ink-on-dark: calc(1 - var(--sk-theme-dark));
  --sk-ink-muted: color-mix(in srgb, var(--kit-background) 78%, transparent);
  --sk-accent: var(--kit-background);
  --sk-focus-ring-color: var(--sk-ink);
  --sk-surface: color-mix(in srgb, var(--kit-background) 12%, transparent);
  --sk-card: color-mix(in srgb, var(--kit-background) 10%, transparent);
  --sk-field: color-mix(in srgb, var(--kit-background) 12%, transparent);
  --sk-stroke: color-mix(in srgb, var(--kit-background) 30%, transparent);
  --sk-btn-bg: var(--kit-background);
  --sk-btn-ink: var(--kit-accent);
  /* The theme's own poles: the default derivation tints this ground toward its own ink, and an accent ink is the ground's own colour, which WebKit's compositing then closes on. */
  --sk-selection-bg: var(--kit-background);
  --sk-selection-ink: var(--kit-foreground);
  background-color: var(--sk-bg);
  color: var(--sk-ink);
}

/* A container's remap restated at the child roots, reach enumerated. :where()-wrapped to (0,1,0), they win by ORDER: keep them last. */
:where(.sk-section[data-tone="surface"])
  > [data-sk]:where(:not([data-tone="surface"], [data-tone="inverted"], [data-tone="accent"])),
:where(.sk-section[data-tone="surface"])
  > :where(.sk-section-col:not([data-tone]))
  > [data-sk]:where(:not([data-tone="surface"], [data-tone="inverted"], [data-tone="accent"])),
:where(.sk-section-col[data-tone="surface"])
  > [data-sk]:where(:not([data-tone="surface"], [data-tone="inverted"], [data-tone="accent"])) {
  --sk-bg: var(--kit-surface);
  --sk-card: var(--kit-background);
  --sk-field: var(--kit-background);
}
:where(.sk-section[data-tone="inverted"])
  > [data-sk]:where(:not([data-tone="surface"], [data-tone="inverted"], [data-tone="accent"])),
:where(.sk-section[data-tone="inverted"])
  > :where(.sk-section-col:not([data-tone]))
  > [data-sk]:where(:not([data-tone="surface"], [data-tone="inverted"], [data-tone="accent"])),
:where(.sk-section-col[data-tone="inverted"])
  > [data-sk]:where(:not([data-tone="surface"], [data-tone="inverted"], [data-tone="accent"])) {
  --sk-bg: var(--kit-foreground);
  --sk-ink: var(--kit-background);
  --sk-ink-on-dark: calc(1 - var(--sk-theme-dark));
  --sk-ink-muted: color-mix(in srgb, var(--kit-background) 62%, transparent);
  --sk-accent: color-mix(in srgb, var(--kit-accent) 55%, var(--kit-background));
  --sk-focus-ring-color: var(--sk-ink);
  --sk-surface: color-mix(in srgb, var(--kit-background) 8%, transparent);
  --sk-card: color-mix(in srgb, var(--kit-background) 7%, transparent);
  --sk-field: color-mix(in srgb, var(--kit-background) 8%, transparent);
  --sk-stroke: color-mix(in srgb, var(--kit-background) 22%, transparent);
  --sk-btn-bg: var(--kit-background);
  --sk-btn-ink: var(--kit-foreground);
  --sk-selection-bg: var(--sk-ink);
  --sk-selection-ink: var(--sk-bg);
}
:where(.sk-section[data-tone="accent"])
  > [data-sk]:where(:not([data-tone="surface"], [data-tone="inverted"], [data-tone="accent"])),
:where(.sk-section[data-tone="accent"])
  > :where(.sk-section-col:not([data-tone]))
  > [data-sk]:where(:not([data-tone="surface"], [data-tone="inverted"], [data-tone="accent"])),
:where(.sk-section-col[data-tone="accent"])
  > [data-sk]:where(:not([data-tone="surface"], [data-tone="inverted"], [data-tone="accent"])) {
  --sk-bg: var(--kit-accent);
  --sk-ink: var(--kit-background);
  --sk-ink-on-dark: calc(1 - var(--sk-theme-dark));
  --sk-ink-muted: color-mix(in srgb, var(--kit-background) 78%, transparent);
  --sk-accent: var(--kit-background);
  --sk-focus-ring-color: var(--sk-ink);
  --sk-surface: color-mix(in srgb, var(--kit-background) 12%, transparent);
  --sk-card: color-mix(in srgb, var(--kit-background) 10%, transparent);
  --sk-field: color-mix(in srgb, var(--kit-background) 12%, transparent);
  --sk-stroke: color-mix(in srgb, var(--kit-background) 30%, transparent);
  --sk-btn-bg: var(--kit-background);
  --sk-btn-ink: var(--kit-accent);
  --sk-selection-bg: var(--kit-background);
  --sk-selection-ink: var(--kit-foreground);
}

[data-sk] {
  --sk-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  /* Only this block reads the kit dials; generated rules read the --sk-* seam. */
  --sk-anim-intensity: var(--kit-anim-intensity);
  --sk-tone-intensity: var(--kit-tone-intensity);
  --sk-shape-intensity: var(--kit-shape-intensity);
  --sk-border-intensity: var(--kit-border-intensity);
  --sk-density-intensity: var(--kit-density-intensity);
  --sk-tone-filter-intensity: var(--kit-tone-filter-intensity);
  --sk-tone-wash-intensity: var(--kit-tone-wash-intensity);
}

/* Each bar names itself for the transition in its own sheet. The ease literals repeat --sk-ease-out: a ::view-transition pseudo-element sits outside the [data-sk] token scope. */
@view-transition {
  navigation: auto;
}
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: sk-vt-out 0.26s ease both;
  }
  ::view-transition-new(root) {
    animation: sk-vt-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(*),
  ::view-transition-new(*),
  ::view-transition-group(*) {
    /* !important: a qualified html[...]::view-transition-* outranks this. */
    animation: none !important;
  }
}
@keyframes sk-vt-out {
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}
@keyframes sk-vt-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* The floor for everything outside the framework; the framework never arms under reduced motion. */

@media (prefers-reduced-motion: reduce) {
  [data-sk] *,
  [data-sk] *::before,
  [data-sk] *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  /* Alone: an unknown pseudo-element invalidates the list it joins. */
  [data-sk] *::details-content {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Antialiased, or macOS subpixel rendering reads a weight step heavier than the design. */
[data-sk] {
  font-family: var(--kit-font-sans);
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Tiled air: every band carries its own air and every seam docks at zero. Never a flow margin on a section. */

.sk-component {
  padding-block: var(--sk-band-pad);
  background-color: var(--sk-bg);
}
.sk-component:where(
  [data-sk-face="flat"]:not(
    [data-tone="surface"],
    [data-tone="inverted"],
    [data-tone="accent"],
    [data-inset="page"]
  )
) {
  background-color: transparent;
}
/* Above a background photo the members go transparent, or their ground covers the media layer. */
.sk-section[data-bg] > [data-sk]:where(:not([data-tone], .sk-section-bg)),
.sk-section[data-bg]
  > .sk-section-col:where(:not([data-tone]))
  > [data-sk]:where(:not([data-tone])) {
  background-color: transparent;
  /* The WHOLE ink set remaps; a hand-picked pair leaves every other part on the light plate. */
  --sk-ink: var(--sk-overlay-ink);
  --sk-ink-on-dark: 1;
  --sk-ink-muted: var(--sk-overlay-ink-muted);
  --sk-accent: var(--sk-overlay-ink-muted);
  --sk-stroke: var(--sk-overlay-stroke);
  --sk-surface: rgba(255, 255, 255, 0.14);
  --sk-card: rgba(255, 255, 255, 0.12);
  --sk-field: rgba(255, 255, 255, 0.12);
  --sk-btn-bg: var(--sk-overlay-ink);
  --sk-btn-ink: rgb(14, 12, 10);
  --sk-selection-bg: var(--sk-selection-page-bg);
  --sk-selection-ink: var(--sk-selection-page-ink);
}
/* Inside the media layer, above the photo and below every pane: no z-index of its own. */
.sk-section > .sk-section-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(
    --sk-image-wash,
    linear-gradient(to bottom, rgba(14, 12, 10, 0.35), rgba(14, 12, 10, 0.55))
  );
}

/* The page frame: a row holds one or two panes (data-ratio names a split), wrappers carry geometry and an optional data-tone only. */

/* The cap is a PERCENTAGE, so it resolves at the reader: a pane's term answers its band, the chrome's the document. The cqi twin is for a box below a grid area. */
[data-sk] {
  --sk-page-cap-pane: max(0px, calc((100cqi - var(--sk-page-max, 200vw)) / 2));
  --sk-member-air: var(--sk-gutter);
  --sk-inset-member-offset: calc(
    var(--sk-gutter) +
      max(var(--sk-member-air), max(0px, calc(var(--sk-page-cap) - var(--sk-gutter)))) -
      max(var(--sk-gutter), var(--sk-page-cap))
  );
  --sk-inset-flush-member-offset: calc(
    var(--sk-gutter) + var(--sk-member-air) - max(var(--sk-gutter), var(--sk-page-cap))
  );
  --sk-page-rail: max(var(--sk-gutter), var(--sk-page-cap));
  --sk-page-rail-start: var(--sk-page-rail);
  --sk-page-rail-end: var(--sk-page-rail);
}

/* A dial handed a unit invalidates `--sk-air` alone, not every inset reading it; a `<length>` computes at its declaration, so the row's cap survives a pane. */
@property --sk-air {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --sk-page-cap-row {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

.sk-section {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
.sk-section[data-ratio="60/40"] {
  grid-template-columns: 3fr 2fr;
}
.sk-section[data-ratio="40/60"] {
  grid-template-columns: 2fr 3fr;
}
/* min-width 0, or a pane's own media blows its column out. */
.sk-section > * {
  min-width: 0;
  /* A named inline-size container: the pane rungs key on the band's own width. */
  container: sk-pane / inline-size;
}
/* A row whose margin IS the rail hands its FLAT members nothing facing the page. Paint earns the air: the band's, a column's, or the member's own. */
.sk-section:where(
  [data-width="page"]:not(
    [data-tone="surface"],
    [data-tone="inverted"],
    [data-tone="accent"],
    [data-bg]
  ),
  :not([data-width], [data-content="full"]):has(
    > :nth-child(2 of :is(.sk-component, .sk-section-col))
  )
) {
  &
    > .sk-component[data-sk-face="flat"]:not([data-inset="page"]):nth-child(
      1 of :is(.sk-component, .sk-section-col)
    ),
  &
    > .sk-section-col:not(
      [data-tone="surface"],
      [data-tone="inverted"],
      [data-tone="accent"]
    ):nth-child(1 of :is(.sk-component, .sk-section-col))
    > .sk-component[data-sk-face="flat"]:not([data-inset="page"]) {
    --sk-page-rail-start: 0px;
  }
  &
    > .sk-component[data-sk-face="flat"]:not([data-inset="page"]):nth-last-child(
      1 of :is(.sk-component, .sk-section-col)
    ),
  &
    > .sk-section-col:not(
      [data-tone="surface"],
      [data-tone="inverted"],
      [data-tone="accent"]
    ):nth-last-child(1 of :is(.sk-component, .sk-section-col))
    > .sk-component[data-sk-face="flat"]:not([data-inset="page"]) {
    --sk-page-rail-end: 0px;
  }
  @media (width <= 900px) {
    & > .sk-component[data-sk-face="flat"]:not([data-inset="page"]),
    &
      > .sk-section-col:not([data-tone="surface"], [data-tone="inverted"], [data-tone="accent"])
      > .sk-component[data-sk-face="flat"]:not([data-inset="page"]) {
      --sk-page-rail-start: 0px;
      --sk-page-rail-end: 0px;
    }
  }
}

/* Outranks the flush zeroing, so a flush row hands its members the same air. */
.sk-section:where(
  :has(> :nth-child(2 of :is(.sk-component, .sk-section-col))),
  [data-width="page"],
  [data-width="inset"]
) {
  & > .sk-component,
  & > .sk-section-col > .sk-component {
    --sk-page-rail: max(var(--sk-member-air), var(--sk-page-cap));
  }
  @media (width > 900px) {
    &:where([data-width="full"]):where(:not([data-content="full"])) {
      & > .sk-component:nth-child(1 of :is(.sk-component, .sk-section-col)),
      & > .sk-section-col:nth-child(1 of :is(.sk-component, .sk-section-col)) > .sk-component {
        --sk-page-rail-start: max(var(--sk-gutter), var(--sk-page-cap-row));
      }
      & > .sk-component:nth-last-child(1 of :is(.sk-component, .sk-section-col)),
      & > .sk-section-col:nth-last-child(1 of :is(.sk-component, .sk-section-col)) > .sk-component {
        --sk-page-rail-end: max(var(--sk-gutter), var(--sk-page-cap-row));
      }
    }
    /* Declared ON the row, a container unit answers the viewport. Kept narrow: a query container is also a containing block for fixed descendants. */
    &:where(:not([data-width="page"], [data-width="inset"], [data-content="full"])) {
      container: sk-row / inline-size;
      & > * {
        --sk-page-cap-row: max(0px, calc((100cqi - var(--sk-page-max, 200vw)) / 2));
      }
    }
    &:where(:not([data-content="full"])) > .sk-component,
    &:where(:not([data-content="full"])) > .sk-section-col > .sk-component {
      --sk-frame-inset-y: var(--sk-band-pad);
    }
  }
}

@media (width > 900px) {
  [data-sk] {
    --sk-member-air: calc(var(--sk-gutter) * var(--sk-air));
  }
}

@media (width > 900px) {
  /* Only a flat member has a seat; an inner-painted face grows its payload instead. */
  .sk-section[data-valign="top"] > .sk-component[data-sk-face="flat"] {
    align-content: start;
  }
  .sk-section[data-valign="center"] > .sk-component[data-sk-face="flat"] {
    align-content: center;
  }
  .sk-section[data-valign="bottom"] > .sk-component[data-sk-face="flat"] {
    align-content: end;
  }
  /* Unstated, the seat reads the member's siblings. */
  .sk-section:where(:not([data-valign]))
    > .sk-component[data-sk-face="flat"]:where(
      :has(
        ~ .sk-component:is(
            :not([data-sk-face="flat"]),
            [data-tone="surface"],
            [data-tone="inverted"],
            [data-tone="accent"],
            [data-inset="page"]
          ),
        ~ .sk-section-col:is([data-tone="surface"], [data-tone="inverted"], [data-tone="accent"]),
        ~ .sk-section-col
          > :last-child:is(
            :not([data-sk-face="flat"]),
            [data-tone="surface"],
            [data-tone="inverted"],
            [data-tone="accent"],
            [data-inset="page"]
          )
      )
    ),
  .sk-section:where(:not([data-valign]))
    > :where(
      .sk-component:is(
        :not([data-sk-face="flat"]),
        [data-tone="surface"],
        [data-tone="inverted"],
        [data-tone="accent"],
        [data-inset="page"]
      ),
      .sk-section-col:is([data-tone="surface"], [data-tone="inverted"], [data-tone="accent"]),
      .sk-section-col:has(
        > :last-child:is(
            :not([data-sk-face="flat"]),
            [data-tone="surface"],
            [data-tone="inverted"],
            [data-tone="accent"],
            [data-inset="page"]
          )
      )
    )
    ~ .sk-component[data-sk-face="flat"] {
    align-content: center;
  }
}
.sk-section-col {
  display: flex;
  flex-direction: column;
}
.sk-section-col > * {
  min-width: 0;
}
/* Height match: passes the cell stretch into an inner-painted band and a column's last member, grow-only. */
@media (width > 900px) {
  /* :has(> :nth-child(2)): multi-pane rows only. */
  .sk-section:where(:has(> :nth-child(2 of :is(.sk-component, .sk-section-col))))
    :where(.sk-component[data-sk-face="construct"], .sk-component[data-sk-face="figure"]) {
    display: flex;
    flex-direction: column;
  }
  .sk-section:where(:has(> :nth-child(2 of :is(.sk-component, .sk-section-col))))
    :where(.sk-component[data-sk-face="construct"], .sk-component[data-sk-face="figure"])
    > * {
    flex: 1 0 auto;
  }
  .sk-section:where(:has(> :nth-child(2 of :is(.sk-component, .sk-section-col))))
    .sk-section-col
    > :last-child {
    flex-grow: 1;
  }
}
@media (max-width: 900px) {
  /* The ratio arms repeat at their own rank, or a weighted split would never collapse. */
  .sk-section,
  .sk-section[data-ratio="60/40"],
  .sk-section[data-ratio="40/60"] {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }
}

/* WIDTH bounds the box on the content rails' formula, so inside a page-width box a pane rail's centering term is zero. */
.sk-section[data-width="page"] {
  margin-inline: max(var(--sk-gutter), var(--sk-page-cap));
}
/* A multi-pane row RESTS on the rail; `data-width="full"` is the row that bleeds. */
.sk-section:where(:has(> :nth-child(2 of :is(.sk-component, .sk-section-col)))):where(
    :not([data-width])
  ) {
  margin-inline: max(var(--sk-gutter), var(--sk-page-cap));
}
.sk-section:where(:has(> :nth-child(2 of :is(.sk-component, .sk-section-col)))):where(
    :not([data-width])
  ):where([data-content="full"]) {
  margin-inline: max(0px, var(--sk-page-cap));
}
.sk-section[data-width="inset"] {
  margin-inline: var(--sk-gutter);
}
/* Flush drops the CAP, not the gutter. Both vars land at the CHILD roots; on the row they poison its own width margins. */
:where(.sk-section[data-content="full"]) [data-sk] {
  --sk-page-max: 200vw;
  --sk-page-rail: var(--sk-gutter);
}
/* A bounded band IS a card; the width alone decides. */
.sk-section:is([data-width="page"], [data-width="inset"]) {
  border-radius: var(--sk-card-radius);
  overflow: clip;
  /* Half a band, or a card seam stacks to three band units against the tiled stack's two. */
  margin-block: calc(var(--sk-band-pad) / 2);
}
/* Everything above a band, subtracted from every stage; :where so it costs no specificity. */
:where(.sk-section, .sk-section-col, .sk-component) {
  --sk-chrome-above: calc(var(--sk-chrome-push, 0px) + var(--sk-chrome-strip, 0px));
}

/* Registered, so a share the paint cannot read falls to the ceiling. */
@property --sk-section-height {
  syntax: "<number>";
  inherits: true;
  initial-value: 100;
}
/* Registered too: unregistered, a bad seam invalidates the band's whole calc. */
@property --sk-band-seam {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

/* The band's CEILING, stated by BOTH band postures so a member sizing against
 * the band reads the row's number. The chrome re-states it per member. */
.sk-section:is([data-height="full"], [data-height="custom"]) {
  --sk-band-stage: calc(100svh - var(--sk-chrome-above, 0px) - var(--sk-band-seam));
}
.sk-section[data-height="full"] {
  min-height: var(--sk-band-stage);
}
/* The share is the ROW's own height and never enters the stage, so it cannot
 * reach a member. Floored at the band's air. */
.sk-section[data-height="custom"] {
  --sk-band-share: round(clamp(0, var(--sk-section-height), 100), 5);
  min-height: max(
    var(--sk-band-pad),
    calc(var(--sk-band-share) * 1svh - var(--sk-chrome-above, 0px) - var(--sk-band-seam))
  );
}
/* The RELEASE: a member takes the whole band only where the row owns its
 * payload alone, counted at BOTH levels, or a col stacking two of them stacks
 * two bands. Read in place of the stage; unset, the reader's declaration is
 * invalid and the member keeps its resting height. */
.sk-section[data-height="full"]:not(
    :has(> :nth-child(2 of :is(.sk-component, .sk-section-col)))
  ):not(:has(> .sk-section-col > :nth-child(2 of .sk-component))) {
  --sk-band-release: 0px;
}
/* The last MEMBER, not the last child: a col can hold a child that is not one. */
.sk-section:is([data-height="full"], [data-height="custom"])
  > .sk-section-col
  > .sk-component:nth-last-child(1 of .sk-component) {
  flex-grow: 1;
}
/* The cell stretch sizes the box and stops; height match passes it to the payload. */
.sk-section:is([data-height="full"], [data-height="custom"])
  :where(.sk-component[data-sk-face="construct"], .sk-component[data-sk-face="figure"]) {
  display: flex;
  flex-direction: column;
}
.sk-section:is([data-height="full"], [data-height="custom"])
  :where(.sk-component[data-sk-face="construct"], .sk-component[data-sk-face="figure"])
  > * {
  flex: 1 0 auto;
}

/* A card row spends its own frame air; off the ceiling once, for every posture. */
.sk-section:is([data-width="page"], [data-width="inset"]) {
  --sk-band-seam: var(--sk-band-pad);
}

.sk-section:is([data-width="page"], [data-width="inset"])
  + .sk-section:is([data-width="page"], [data-width="inset"]) {
  margin-top: 0;
}
/* Card-scaled (×0.6); the row's own card margin reads the OUTER token. */
.sk-section:where([data-width="page"], [data-width="inset"]) > .sk-component,
.sk-section:where([data-width="page"], [data-width="inset"]) > .sk-section-col > .sk-component {
  --sk-band-pad: calc(var(--kit-type-base) * var(--kit-air-band) * 0.6);
}
/* isolation keeps the negative z inside the row. */
.sk-section[data-bg] {
  position: relative;
  isolation: isolate;
}
/* (0,2,0): rides .sk-crop for image basics, whose own positioning must not win here. */
.sk-section > .sk-section-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Takes the row's corner and carries none, or a shaped theme shows page under the corners. */
  --sk-media-radius: 0px;
}
.sk-section > .sk-section-bg .sk-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Kit-wide: first the invariants no component may override, then the floors every component may. */

/* `inherit` reads the computed value, so this and the root's border-box need not be adjacent. */
[data-sk] *,
[data-sk] *::before,
[data-sk] *::after {
  box-sizing: inherit;
}

/* !important: the UA [hidden] rule loses to any author display; here the attribute is lifecycle. */
[data-sk][hidden],
[data-sk] [hidden] {
  display: none !important;
}

/* An element selector's weight only: unwrapping the :where() would outrank the one-class registers the parts tier is written in. */
:where([data-sk]) a {
  color: inherit;
}
/* On the descendants too: an em resolved on the anchor INHERITS as a length, so a smaller label would wear the anchor's. */
:where([data-sk]) :is(a, a *) {
  text-underline-offset: 0.2em;
}

/* Scoped under [data-sk] so a bare [data-text-style] rule at head-end cannot outrank the ramp. No absolute size or weight here, only offsets. */

/* Leading interpolates from the one lead-title dial through structural offsets (display −0.16, h2 +0.07, h3 +0.14, h4 +0.22). */
[data-sk] [data-text-style="display"] {
  font-family: var(--kit-font-title);
  font-style: var(--kit-slant-title);
  text-transform: var(--kit-caps-title);
  font-size: var(--sk-text-display-size);
  line-height: calc(var(--kit-lead-title) - 0.16 * var(--kit-ramp-contrast));
  font-weight: calc(var(--kit-weight-title) + 50 * var(--kit-ramp-contrast));
  letter-spacing: calc(var(--kit-track-title) * (1 + 0.5 * var(--kit-ramp-contrast)) * 1em);
  margin: 0;
}
[data-sk] [data-text-style="heading-1"] {
  font-family: var(--kit-font-title);
  font-style: var(--kit-slant-title);
  text-transform: var(--kit-caps-title);
  font-size: var(--sk-text-h1-size);
  line-height: var(--kit-lead-title);
  font-weight: var(--kit-weight-title);
  letter-spacing: calc(var(--kit-track-title) * 1em);
  margin: 0;
}
[data-sk] [data-text-style="heading-2"] {
  font-family: var(--kit-font-title);
  font-style: var(--kit-slant-title);
  text-transform: var(--kit-caps-title);
  font-size: var(--sk-text-h2-size);
  line-height: calc(var(--kit-lead-title) + 0.07 * var(--kit-ramp-contrast));
  font-weight: calc(var(--kit-weight-title) - 10 * var(--kit-ramp-contrast));
  letter-spacing: calc(var(--kit-track-title) * (1 - 0.5 * var(--kit-ramp-contrast)) * 1em);
  margin: 0;
}
[data-sk] [data-text-style="heading-3"] {
  font-family: var(--kit-font-title);
  font-style: var(--kit-slant-title);
  text-transform: var(--kit-caps-title);
  font-size: var(--sk-text-h3-size);
  line-height: calc(var(--kit-lead-title) + 0.14 * var(--kit-ramp-contrast));
  font-weight: calc(var(--kit-weight-title) - 20 * var(--kit-ramp-contrast));
  letter-spacing: calc(var(--kit-track-title) * (1 - 0.5 * var(--kit-ramp-contrast)) * 1em);
  margin: 0;
}
[data-sk] [data-text-style="heading-4"] {
  font-family: var(--kit-font-title);
  font-style: var(--kit-slant-title);
  text-transform: var(--kit-caps-title);
  font-size: var(--sk-text-h4-size);
  line-height: calc(var(--kit-lead-title) + 0.22 * var(--kit-ramp-contrast));
  font-weight: calc(var(--kit-weight-title) - 30 * var(--kit-ramp-contrast));
  letter-spacing: calc(var(--kit-track-title) * (1 - 0.5 * var(--kit-ramp-contrast)) * 1em);
  margin: 0;
}
[data-sk] [data-text-style="body"] {
  font-family: var(--kit-font-body);
  font-style: var(--kit-slant-body);
  text-transform: var(--kit-caps-body);
  font-size: var(--kit-type-base);
  line-height: var(--kit-lead-body);
  font-weight: var(--kit-weight-body);
  letter-spacing: calc(var(--kit-track-body) * 1em);
}
/* Emphasis steps into the title face, enlarged so the two x-heights meet. */
[data-sk] [data-text-style="body"] em {
  font-family: var(--kit-font-title);
  font-size: 1.08em;
}
[data-sk] [data-text-style="caption"] {
  font-size: var(--sk-text-detail-size);
  line-height: 1.5;
  font-weight: var(--kit-weight-detail);
}

/* Re-states the ramp per tag; keep in lockstep with the [data-text-style] rules above. */
[data-sk] .sk-richtext > * {
  margin: 0;
}
[data-sk] .sk-richtext > * + * {
  margin-top: var(--kit-space-3);
}
[data-sk] .sk-richtext > * + :is(h1, h2, h3) {
  margin-top: var(--kit-space-4);
}
[data-sk] .sk-richtext :is(h1, h2, h3) {
  font-family: var(--kit-font-title);
  font-style: var(--kit-slant-title);
  text-transform: var(--kit-caps-title);
}
[data-sk] .sk-richtext h1 {
  font-size: var(--sk-text-h1-size);
  line-height: var(--kit-lead-title);
  font-weight: var(--kit-weight-title);
  letter-spacing: calc(var(--kit-track-title) * 1em);
}
[data-sk] .sk-richtext h2 {
  font-size: var(--sk-text-h2-size);
  line-height: calc(var(--kit-lead-title) + 0.07 * var(--kit-ramp-contrast));
  font-weight: calc(var(--kit-weight-title) - 10 * var(--kit-ramp-contrast));
  letter-spacing: calc(var(--kit-track-title) * (1 - 0.5 * var(--kit-ramp-contrast)) * 1em);
}
[data-sk] .sk-richtext h3 {
  font-size: var(--sk-text-h3-size);
  line-height: calc(var(--kit-lead-title) + 0.14 * var(--kit-ramp-contrast));
  font-weight: calc(var(--kit-weight-title) - 20 * var(--kit-ramp-contrast));
  letter-spacing: calc(var(--kit-track-title) * (1 - 0.5 * var(--kit-ramp-contrast)) * 1em);
}
[data-sk] .sk-richtext :is(ul, ol) {
  padding-inline-start: var(--kit-space-4);
}
[data-sk] .sk-richtext blockquote {
  padding-inline-start: var(--kit-space-4);
  border-inline-start: var(--sk-border-width) solid var(--sk-accent);
  color: var(--sk-ink-muted);
}
[data-sk] .sk-richtext hr {
  border: 0;
  border-top: var(--sk-border-width) solid var(--sk-stroke);
}
[data-sk] .sk-richtext :is(pre, code) {
  font-family: var(--kit-font-mono);
  font-size: calc(var(--sk-text-detail-size) * 0.88);
}
[data-sk] .sk-richtext pre {
  overflow-x: auto;
}
[data-sk] .sk-richtext img {
  max-width: 100%;
  height: auto;
  border-radius: var(--sk-media-radius);
}

/* Scoped so the eyebrow's own voice wins the (0,2,0) tie with the caption step by source order. */
[data-sk] .sk-eyebrow {
  margin: 0 0 var(--kit-space-3);
  font-family: var(--kit-font-eyebrow);
  font-style: var(--kit-slant-eyebrow);
  line-height: var(--kit-lead-eyebrow);
  text-transform: var(--kit-caps-eyebrow);
  letter-spacing: calc(var(--kit-track-eyebrow) * 1em);
  font-size: var(--sk-text-eyebrow-size);
  font-weight: var(--kit-weight-eyebrow);
  border-width: var(--kit-edge-eyebrow);
  border-style: var(--kit-edge-style-eyebrow);
  border-color: currentcolor;
  border-radius: var(--kit-round-eyebrow);
  padding: var(--kit-pad-eyebrow);
  color: var(--sk-accent);
}

.sk-detail {
  margin: 0;
  font-family: var(--kit-font-sans);
  font-size: var(--sk-text-detail-size);
  font-weight: var(--kit-weight-detail);
  letter-spacing: calc(var(--kit-track-detail) * 1em);
  text-transform: var(--kit-caps-eyebrow);
  line-height: 1.5;
  color: var(--sk-ink-muted);
}

/* Decorative hairlines ride --sk-border-width, so 0 silences them; functional borders, and a line a prop draws on purpose, belong on --sk-border-width-min. */
.sk-ruled > * {
  border-top: var(--sk-border-width) solid var(--sk-stroke);
  padding-block: var(--sk-ruled-pad);
  margin: 0;
}
.sk-ruled[data-cap] > :last-child {
  border-bottom: var(--sk-border-width) solid var(--sk-stroke);
}

/* The dial is a ceiling; --sk-columns-min is a floor on what FITS, under the count and the dial, and an INTEGER because a script parses it. Loosen with --sk-columns-min, declared outside every rung; tighten by re-declaring --sk-columns-fit at a rung; never hard-set tracks. */
.sk-cell-grid {
  display: grid;
  --sk-columns-fit: var(--sk-columns, 3);
  --sk-active-columns: min(
    var(--sk-cell-count, var(--sk-columns, 3)),
    var(--sk-columns, 3),
    max(
      var(--sk-columns-min, 1),
      min(var(--sk-columns-fit), var(--sk-pane-fit, var(--sk-columns, 3)))
    )
  );
  grid-template-columns: repeat(var(--sk-active-columns), minmax(0, 1fr));
  gap: var(--kit-space-5) var(--kit-space-4);
}
@media (max-width: 1440px) {
  .sk-cell-grid {
    --sk-columns-fit: 4;
  }
}
@media (max-width: 1200px) {
  .sk-cell-grid {
    --sk-columns-fit: 3;
  }
}
@media (max-width: 900px) {
  .sk-cell-grid {
    --sk-columns-fit: 2;
  }
  .sk-cell-grid {
    gap: var(--kit-space-4);
  }
}
@media (max-width: 560px) {
  .sk-cell-grid {
    --sk-columns-fit: 1;
  }
}
/* The pane cap is its own term the fold reads, not a re-declaration of --sk-columns-fit. */
@container sk-pane (max-width: 1440px) {
  .sk-cell-grid {
    --sk-pane-fit: 4;
  }
}
@container sk-pane (max-width: 1200px) {
  .sk-cell-grid {
    --sk-pane-fit: 3;
  }
}
@container sk-pane (max-width: 900px) {
  .sk-cell-grid {
    --sk-pane-fit: 2;
  }
  .sk-cell-grid {
    gap: var(--kit-space-4);
  }
}
@container sk-pane (max-width: 560px) {
  .sk-cell-grid {
    --sk-pane-fit: 1;
  }
}

/* The COORDINATED grid. Its two inputs are props the render substituted and nothing about it is measured, so the render plans it and stamps the answer as data-sk-grid-cols and data-sk-span; these rules only read it. */
@media (min-width: 900px) {
  .sk-cell-grid[data-sk-grid-cols="1"] {
    --sk-grid-cols: 1;
  }
  .sk-cell-grid[data-sk-grid-cols="2"] {
    --sk-grid-cols: 2;
  }
  .sk-cell-grid[data-sk-grid-cols="3"] {
    --sk-grid-cols: 3;
  }
  .sk-cell-grid[data-sk-grid-cols="4"] {
    --sk-grid-cols: 4;
  }
  .sk-cell-grid[data-sk-grid-cols="5"] {
    --sk-grid-cols: 5;
  }
  .sk-cell-grid[data-sk-grid-cols="6"] {
    --sk-grid-cols: 6;
  }
  /* The ladder is the fallback, not `none`: only the six arms above define
     --sk-grid-cols, so a stamp outside 1-6 (a hand edit, a value that
     round-tripped into a file) would otherwise make this declaration invalid at
     computed-value time and collapse the grid to ONE full-width track. */
  .sk-cell-grid[data-sk-grid-cols] {
    grid-template-columns: repeat(var(--sk-grid-cols, var(--sk-active-columns)), minmax(0, 1fr));
  }
  .sk-cell-grid[data-sk-grid-cols] > [data-sk-span="2"] {
    --sk-grid-span: 2;
  }
  .sk-cell-grid[data-sk-grid-cols] > [data-sk-span="3"] {
    --sk-grid-span: 3;
  }
  .sk-cell-grid[data-sk-grid-cols] > [data-sk-span="4"] {
    --sk-grid-span: 4;
  }
  .sk-cell-grid[data-sk-grid-cols] > [data-sk-span="5"] {
    --sk-grid-span: 5;
  }
  .sk-cell-grid[data-sk-grid-cols] > [data-sk-span="6"] {
    --sk-grid-span: 6;
  }
  .sk-cell-grid[data-sk-grid-cols] > [data-sk-span] {
    grid-column: span var(--sk-grid-span, 1);
  }
}
/* The PANE has the last word, exactly as --sk-pane-fit caps the ladder above: a coordinated grid in a narrow pane of a wide window folds with its own ladder instead of laying out as if it had the page. Last, so it wins at equal specificity; a surface with no pane container (the gallery's section stage) keeps the plan. */
@container sk-pane (max-width: 900px) {
  .sk-cell-grid[data-sk-grid-cols] {
    grid-template-columns: repeat(var(--sk-active-columns), minmax(0, 1fr));
  }
  .sk-cell-grid[data-sk-grid-cols] > [data-sk-span] {
    grid-column: auto;
  }
}

/* The band gutter, at (0,1,0) so a section's own override wins, and the PAIR, because a row may part its two edges. The % resolves PER BAND; 200vw is the uncapped sentinel. Also the snapport, or the leading rail is scrolled away on load. */
[data-sk-rail] {
  padding-inline: var(--sk-page-rail-start) var(--sk-page-rail-end);
  scroll-padding-inline: var(--sk-page-rail-start) var(--sk-page-rail-end);
}

/* A consumer whose rules would repaint the skeleton yields in card mode from its own sheet. */
.sk-card {
  background-color: var(--sk-card);
  color: var(--sk-ink);
  border: var(--sk-border-width) solid var(--sk-stroke);
  border-radius: var(--sk-card-radius);
  padding: var(--sk-card-pad, var(--kit-space-5));
}

.sk-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  padding: var(--kit-pad-badge);
  border-width: var(--kit-edge-badge);
  border-style: var(--kit-edge-style-badge);
  border-color: var(--sk-stroke);
  border-radius: var(--kit-round-badge);
  font-family: var(--kit-font-badge);
  font-style: var(--kit-slant-badge);
  line-height: var(--kit-lead-badge);
  text-transform: var(--kit-caps-badge);
  font-size: var(--sk-text-badge-size);
  font-weight: var(--kit-weight-badge);
  letter-spacing: calc(var(--kit-track-badge) * 1em);
  color: var(--sk-ink-muted);
}
.sk-badge::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sk-accent);
}

/* One ring from three root tokens. :where() holds it at (0,2,0), under a boxed control's `outline: none`. */
[data-sk] :where(a[href], button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--sk-focus-ring-width) solid var(--sk-focus-ring-color);
  outline-offset: var(--sk-focus-ring-offset);
}

/* Both properties, or a link keeps its own ink on the tint; universal, since highlight inheritance differs by engine. The picture arm below is the one place an alpha is right: over a photograph the tint is the point. */
[data-sk] *::selection,
[data-sk]::selection {
  background-color: var(--sk-selection-bg);
  color: var(--sk-selection-ink);
}

[data-sk] img::selection,
[data-sk] video::selection {
  background-color: color-mix(in srgb, var(--sk-selection-bg) 50%, transparent);
}

.sk-link {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-weight: var(--kit-weight-button);
  letter-spacing: calc(var(--kit-track-button) * 1em);
  text-transform: var(--kit-caps-button);
  font-size: var(--sk-text-btn-size);
  text-decoration: none;
  color: var(--sk-ink);
  /* After the `background: none` shorthand, or the image dies in the reset. */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 1px;
  padding-bottom: 2px;
  transition: background-size 0.35s var(--sk-ease-out);
}
.sk-link:hover {
  background-size: 100% 1px;
}

/* Platform-minted: the editor writes it on ANY kit page, so it stays in base. Paint only. */
.sk-skeleton {
  background: var(--sk-surface);
  border-radius: var(--sk-radius);
  animation: sk-skeleton-pulse 1.4s ease-in-out infinite;
}
@keyframes sk-skeleton-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

/* Base because one consumer includes no form part. Border-width stays instant. */
.sk-control {
  /* Block: an inline control reserves descender space below it. */
  display: block;
  width: 100%;
  font: inherit;
  color: var(--sk-ink);
  background: var(--sk-field);
  border: var(--sk-border-width-min) solid
    color-mix(in srgb, var(--sk-ink-muted) calc(var(--kit-control-stroke-mix) * 1%), var(--sk-bg));
  border-radius: var(--sk-control-radius);
  transition:
    border-color 140ms ease,
    border-radius 150ms ease;
}
.sk-input {
  padding: 0.7rem 0.9rem;
}
.sk-input::placeholder {
  color: var(--sk-ink-muted);
}

/* focus-ring-exempt: a boxed control's focus is its border, by design. */
.sk-control:focus-visible {
  --sk-focus-grow: calc(max(var(--kit-border-width), 2px) - var(--sk-border-width-min));
  outline: none;
  border-color: var(--sk-accent);
  border-width: max(var(--kit-border-width), 2px);
}
.sk-input:focus-visible {
  padding: calc(0.7rem - var(--sk-focus-grow)) calc(0.9rem - var(--sk-focus-grow));
}
.sk-field-hint {
  margin: var(--kit-space-1) 0 0;
  font-size: var(--sk-text-detail-size);
  color: var(--sk-ink-muted);
}

/* Stamped on the frame whose copy sits ON the picture. A new gallery wears the marker and never copies these blocks. */
/* The dress needs a picture, so an element stating it carries none is not
   dressed; the stamp is the serve's (SITESCRIPT.md, "Row pictures") and the
   gate is weightless, so nothing is re-ranked. The near-whites below are
   FIXED, never brand tokens: they sit on the fixed dark base. */
.sk-on-media:where(:not([data-sk-pictures="none"])):is(
    [data-layout="bleed"],
    [data-layout="strip"]
  ),
:is([data-layout="bleed"], [data-layout="strip"])
  .sk-on-media:where(:not([data-sk-pictures="none"])),
[data-media="cover"] .sk-on-media:where(:not([data-sk-pictures="none"])) {
  overflow: hidden;
  isolation: isolate;
  background-color: var(--sk-on-media-base, rgb(14, 12, 10));
  color: var(--sk-on-media-ink, var(--sk-overlay-ink));

  --sk-ink: var(--sk-overlay-ink);
  --sk-ink-on-dark: 1;
  --sk-ink-muted: var(--sk-overlay-ink-muted);
  --sk-accent: var(--sk-overlay-ink-muted);
  --sk-focus-ring-color: var(--sk-overlay-ink-muted);
  --sk-stroke: var(--sk-overlay-stroke);
  --sk-surface: rgba(255, 255, 255, 0.14);
  --sk-card: rgba(255, 255, 255, 0.12);
  --sk-field: rgba(255, 255, 255, 0.12);
  --sk-btn-bg: var(--sk-overlay-ink);
  --sk-btn-ink: rgb(14, 12, 10);
  --sk-selection-bg: var(--sk-selection-page-bg);
  --sk-selection-ink: var(--sk-selection-page-ink);
}
/* Between media and box (z-index 1, under the box's 2). The paint is the theme's tonality. */
.sk-on-media:where(:not([data-sk-pictures="none"])):is(
    [data-layout="bleed"],
    [data-layout="strip"]
  )::before,
:is([data-layout="bleed"], [data-layout="strip"])
  .sk-on-media:where(:not([data-sk-pictures="none"]))::before,
[data-media="cover"] .sk-on-media:where(:not([data-sk-pictures="none"]))::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(
    --sk-image-wash,
    linear-gradient(to bottom, rgba(14, 12, 10, 0.35), rgba(14, 12, 10, 0.55))
  );
}

/* The media-facts serve pass stamps --sk-media-ratio and --sk-focal-x/-y; CSS owns the rest. The box must be extrinsically sized (size containment gives a content-sized box ZERO height), the media its direct child. */
.sk-crop {
  position: relative;
  display: block;
  overflow: hidden;
  container-type: size;
  border-radius: var(--sk-media-radius);
  background: var(--sk-surface);
}
.sk-crop > :is(img, video).sk-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* The overflow IS the slide room; a host `max-width: 100%` would silently kill the crop. */
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: var(--sk-focal-x, 50%) var(--sk-focal-y, 50%);
  border-radius: 0;
  background: none;
}
.sk-crop[data-sk-ratio] > :is(img, video).sk-art {
  inset: auto;
  left: 0;
  top: 0;
  width: max(100cqw, 100cqh * var(--sk-media-ratio));
  height: max(100cqh, 100cqw / var(--sk-media-ratio));
  translate: clamp(100cqw - 100%, 50cqw - var(--sk-focal-x, 50%), 0px)
    clamp(100cqh - 100%, 50cqh - var(--sk-focal-y, 50%), 0px);
}
.sk-crop[data-focal="top"] {
  --sk-focal-y: 0%;
}
.sk-crop[data-focal="bottom"] {
  --sk-focal-y: 100%;
}
.sk-crop[data-focal="left"] {
  --sk-focal-x: 0%;
}
.sk-crop[data-focal="right"] {
  --sk-focal-x: 100%;
}
.sk-crop:has(> [src=""]),
.sk-crop:has(> [src*="{"]) {
  display: none;
}

/* One settle for every linked photo: a section stamps `data-sk-settle` and at most a `transform: none`. */
[data-sk] a .sk-art,
[data-sk] [data-sk-settle] .sk-art {
  transition: transform 0.9s var(--sk-ease-out);
}
[data-sk] a:hover .sk-art,
[data-sk] [data-sk-settle]:hover .sk-art {
  transform: scale(1.05);
}

/* Forma stamps data-sk-editing and data-sk-dragging during a WYSIWYG drag. */

[data-sk-editing] [data-sk-dragging] {
  opacity: 0.4;
  transition: opacity 120ms ease;
}

/* A neutral token with no paint. It INHERITS, so a per-item consumer stays presence-keyed on the item and excludes "auto". */
[data-aspect="1:1"],
[data-image-crop="1:1"] {
  --sk-aspect: 1 / 1;
}
[data-aspect="3:2"],
[data-image-crop="3:2"] {
  --sk-aspect: 3 / 2;
}
[data-aspect="2:3"],
[data-image-crop="2:3"] {
  --sk-aspect: 2 / 3;
}
[data-aspect="4:3"],
[data-image-crop="4:3"] {
  --sk-aspect: 4 / 3;
}
[data-aspect="3:4"],
[data-image-crop="3:4"] {
  --sk-aspect: 3 / 4;
}
[data-aspect="4:5"],
[data-image-crop="4:5"] {
  --sk-aspect: 4 / 5;
}
[data-aspect="16:9"],
[data-image-crop="16:9"] {
  --sk-aspect: 16 / 9;
}
[data-aspect="21:9"],
[data-image-crop="21:9"] {
  --sk-aspect: 21 / 9;
}
[data-aspect="2.4:1"],
[data-image-crop="2.4:1"] {
  --sk-aspect: 2.4 / 1;
}
/* auto/none resolve the token too, so a consumer never reads an ancestor's ratio. */
[data-aspect="auto"],
[data-aspect="none"] {
  --sk-aspect: auto;
}

/* Every selector is `:is(img, video)`: the video pass swaps a twin in. True focal centering needs the .sk-crop box. */

:is(img, video).sk-art {
  display: block;
  width: 100%;
  aspect-ratio: var(--sk-image-aspect, auto);
  object-fit: cover;
  object-position: var(--sk-focal, center);
  border-radius: var(--sk-media-radius);
  background: var(--sk-surface);
  filter: var(--sk-image-filter, none);
}
/* A src that shows nothing disappears rather than paint a dead-image glyph: an empty one, and a token no value ever replaced. */
:is(img, video).sk-art[src=""],
:is(img, video).sk-art[src*="{"] {
  display: none;
}

/* Padding, so the paint keeps running edge to edge. .sk-component is in the selector for RANK (0,3,0). */
.sk-component[data-sk][data-inset="page"] {
  padding-block: var(--sk-gutter);
  padding-inline: max(var(--sk-gutter), var(--sk-page-cap));
  --sk-page-rail: calc(var(--sk-gutter) * var(--sk-air));
  /* Re-derived: an arm raising the PAIR would reach past the paint this box makes. */
  --sk-page-rail-start: calc(var(--sk-gutter) * var(--sk-air));
  --sk-page-rail-end: calc(var(--sk-gutter) * var(--sk-air));
}

.sk-icons {
  display: inline-flex;
  align-items: center;
  gap: var(--kit-space-2);
}
.sk-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.sk-icon > svg {
  width: var(--sk-icon-size);
  height: var(--sk-icon-size);
}
/* The per-glyph mask rules are GENERATED by the loader from the SVG catalog; never hand-authored here. */
.sk-icon-glyph {
  display: inline-block;
  width: var(--sk-icon-size);
  height: var(--sk-icon-size);
  background-color: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
.sk-icon:hover {
  color: var(--sk-ink-muted);
}

/* Anchored to the glyph, not the box: the box inflates to the 44px tap floor while the glyph stays centered. */
.sk-icon-badge {
  position: absolute;
  left: calc(50% + var(--sk-icon-size) * 0.44);
  top: calc(50% - var(--sk-icon-size) * 0.44);
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0 0.35em;
  border-radius: 999px;
  font-size: max(9px, calc(var(--sk-icon-size) * 0.46));
  font-weight: var(--kit-weight-badge);
  line-height: 1;
  background: var(--sk-btn-bg);
  color: var(--sk-btn-ink);
}
/* NO RULE, deliberately: `.sk-cart-text` is a lint marker; the look is the nav-link register it stacks with. */

/* ── Icon glyphs — GENERATED from /forma/static/site-kit/icons/ ── */
.sk-icon-glyph[data-icon="bag"] {
  mask-image: url(/forma/static/site-kit/icons/bag.svg);
}
.sk-icon-glyph[data-icon="bookmark"] {
  mask-image: url(/forma/static/site-kit/icons/bookmark.svg);
}
.sk-icon-glyph[data-icon="calendar"] {
  mask-image: url(/forma/static/site-kit/icons/calendar.svg);
}
.sk-icon-glyph[data-icon="cart"] {
  mask-image: url(/forma/static/site-kit/icons/cart.svg);
}
.sk-icon-glyph[data-icon="chat"] {
  mask-image: url(/forma/static/site-kit/icons/chat.svg);
}
.sk-icon-glyph[data-icon="check"] {
  mask-image: url(/forma/static/site-kit/icons/check.svg);
}
.sk-icon-glyph[data-icon="chevron-down"] {
  mask-image: url(/forma/static/site-kit/icons/chevron-down.svg);
}
.sk-icon-glyph[data-icon="chevron-left"] {
  mask-image: url(/forma/static/site-kit/icons/chevron-left.svg);
}
.sk-icon-glyph[data-icon="chevron-right"] {
  mask-image: url(/forma/static/site-kit/icons/chevron-right.svg);
}
.sk-icon-glyph[data-icon="close"] {
  mask-image: url(/forma/static/site-kit/icons/close.svg);
}
.sk-icon-glyph[data-icon="discord"] {
  mask-image: url(/forma/static/site-kit/icons/discord.svg);
}
.sk-icon-glyph[data-icon="facebook"] {
  mask-image: url(/forma/static/site-kit/icons/facebook.svg);
}
.sk-icon-glyph[data-icon="github"] {
  mask-image: url(/forma/static/site-kit/icons/github.svg);
}
.sk-icon-glyph[data-icon="globe"] {
  mask-image: url(/forma/static/site-kit/icons/globe.svg);
}
.sk-icon-glyph[data-icon="heart"] {
  mask-image: url(/forma/static/site-kit/icons/heart.svg);
}
.sk-icon-glyph[data-icon="info"] {
  mask-image: url(/forma/static/site-kit/icons/info.svg);
}
.sk-icon-glyph[data-icon="instagram"] {
  mask-image: url(/forma/static/site-kit/icons/instagram.svg);
}
.sk-icon-glyph[data-icon="linkedin"] {
  mask-image: url(/forma/static/site-kit/icons/linkedin.svg);
}
.sk-icon-glyph[data-icon="location"] {
  mask-image: url(/forma/static/site-kit/icons/location.svg);
}
.sk-icon-glyph[data-icon="mail"] {
  mask-image: url(/forma/static/site-kit/icons/mail.svg);
}
.sk-icon-glyph[data-icon="menu"] {
  mask-image: url(/forma/static/site-kit/icons/menu.svg);
}
.sk-icon-glyph[data-icon="pause"] {
  mask-image: url(/forma/static/site-kit/icons/pause.svg);
}
.sk-icon-glyph[data-icon="phone"] {
  mask-image: url(/forma/static/site-kit/icons/phone.svg);
}
.sk-icon-glyph[data-icon="play"] {
  mask-image: url(/forma/static/site-kit/icons/play.svg);
}
.sk-icon-glyph[data-icon="search"] {
  mask-image: url(/forma/static/site-kit/icons/search.svg);
}
.sk-icon-glyph[data-icon="settings"] {
  mask-image: url(/forma/static/site-kit/icons/settings.svg);
}
.sk-icon-glyph[data-icon="star"] {
  mask-image: url(/forma/static/site-kit/icons/star.svg);
}
.sk-icon-glyph[data-icon="tiktok"] {
  mask-image: url(/forma/static/site-kit/icons/tiktok.svg);
}
.sk-icon-glyph[data-icon="user"] {
  mask-image: url(/forma/static/site-kit/icons/user.svg);
}
.sk-icon-glyph[data-icon="x"] {
  mask-image: url(/forma/static/site-kit/icons/x.svg);
}
.sk-icon-glyph[data-icon="youtube"] {
  mask-image: url(/forma/static/site-kit/icons/youtube.svg);
}