/* Custom properties only (gated). A --sk-* token here is PUBLIC to every copied sheet; renaming one is a cross-distribution break. A THEME (`pieces/themes/*.json`) 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.5;
  --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 the Dressing Room writes. 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 (gated). --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);
  /* The vw slopes here are the ONE place fluid type is written. */
  --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));
  /* …and the UNREAD ground is the exception that proves it. With no engine the
   * bar wears the whites over whatever the row holds, having read nothing, so
   * this one carries the whole weight — a light plain row reads 1.38 under the
   * 25% wash and 2.19 under this, which is what main paints there today. */
  --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.25vw * 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(3vw * 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)),
    calc(5vw * 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.75vw * 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), 1.5vw, var(--sk-text-h4-size));
  /* 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);
  /* A fixed near-white ink, so the banner reads on every theme's danger red. */
  --sk-danger: var(--kit-danger);
  --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);
  /* Functional borders floor at 1px via max(); decorative ones ride this raw, 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;
}

@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 stay 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 (engines/container/server/coordinated-grid.ts, the editor's own span math) 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 pieces/icons/ ── */
.sk-icon-glyph[data-icon="bag"] {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 8h14l-1.2 11.4a2 2 0 0 1-2 1.6H8.2a2 2 0 0 1-2-1.6L5 8z"/><path d="M9 8V6a3 3 0 0 1 6 0v2"/></svg>');
}
.sk-icon-glyph[data-icon="bookmark"] {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4h12v17l-6-4-6 4z"/></svg>');
}
.sk-icon-glyph[data-icon="calendar"] {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round"><rect x="4" y="5" width="16" height="16" rx="2"/><path d="M4 9.5h16M8 3v4M16 3v4"/></svg>');
}
.sk-icon-glyph[data-icon="cart"] {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4h2l2.5 11.5a2 2 0 0 0 2 1.5h7.5a2 2 0 0 0 2-1.5L21 8H6"/><circle cx="10" cy="20" r="1.2" fill="black"/><circle cx="17" cy="20" r="1.2" fill="black"/></svg>');
}
.sk-icon-glyph[data-icon="chat"] {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H9.5L5 19v-3.5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z"/></svg>');
}
.sk-icon-glyph[data-icon="check"] {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>');
}
.sk-icon-glyph[data-icon="chevron-down"] {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
}
.sk-icon-glyph[data-icon="chevron-left"] {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6"/></svg>');
}
.sk-icon-glyph[data-icon="chevron-right"] {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg>');
}
.sk-icon-glyph[data-icon="close"] {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>');
}
.sk-icon-glyph[data-icon="discord"] {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M20.317 4.37a19.79 19.79 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.865-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.058a.082.082 0 0 0 .031.056 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128c.126-.094.252-.192.372-.291a.074.074 0 0 1 .078-.01c3.928 1.793 8.18 1.793 12.061 0a.074.074 0 0 1 .079.009c.12.099.246.198.373.292a.077.077 0 0 1-.006.128 12.3 12.3 0 0 1-1.873.891.077.077 0 0 0-.041.107c.36.698.772 1.363 1.225 1.993a.076.076 0 0 0 .084.029 19.84 19.84 0 0 0 6.002-3.03.077.077 0 0 0 .032-.055c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.029zM8.02 15.331c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>');
}
.sk-icon-glyph[data-icon="github"] {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-4 1.3-4-2.2-5.5-2.7M15 21v-3.3a3 3 0 0 0-.8-2.2c2.7-.3 5.5-1.3 5.5-6a4.6 4.6 0 0 0-1.3-3.2 4.3 4.3 0 0 0-.1-3.2s-1-.3-3.4 1.3a11.6 11.6 0 0 0-6 0C6.9 2.6 5.9 2.9 5.9 2.9a4.3 4.3 0 0 0-.1 3.2A4.6 4.6 0 0 0 4.5 9.3c0 4.6 2.8 5.6 5.5 6a3 3 0 0 0-.8 2.2V21"/></svg>');
}
.sk-icon-glyph[data-icon="globe"] {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18"/></svg>');
}
.sk-icon-glyph[data-icon="heart"] {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-7-4.5-9-9c-1.2-2.8.4-6 3.5-6 2 0 3.5 1 4.5 3 1-2 2.5-3 4.5-3 3.1 0 4.7 3.2 3.5 6-2 4.5-9 9-9 9Z"/></svg>');
}
.sk-icon-glyph[data-icon="info"] {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round"><circle cx="12" cy="12" r="8.5"/><path d="M12 11v5M12 8h.01"/></svg>');
}
.sk-icon-glyph[data-icon="instagram"] {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round"><rect x="4" y="4" width="16" height="16" rx="4.5"/><circle cx="12" cy="12" r="3.6"/><path d="M16.6 7.4h.01"/></svg>');
}
.sk-icon-glyph[data-icon="linkedin"] {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0z"/></svg>');
}
.sk-icon-glyph[data-icon="location"] {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21s7-5.6 7-11a7 7 0 0 0-14 0c0 5.4 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></svg>');
}
.sk-icon-glyph[data-icon="mail"] {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3.5 7l8.5 6 8.5-6"/></svg>');
}
.sk-icon-glyph[data-icon="menu"] {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg>');
}
.sk-icon-glyph[data-icon="pause"] {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 5.5v13M14.5 5.5v13"/></svg>');
}
.sk-icon-glyph[data-icon="phone"] {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3h3l1.5 4-2 1.5a11 11 0 0 0 5 5l1.5-2 4 1.5v3a2 2 0 0 1-2.2 2A15 15 0 0 1 4 5.2 2 2 0 0 1 6 3z"/></svg>');
}
.sk-icon-glyph[data-icon="play"] {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M8 5.5l10.5 6.5L8 18.5z"/></svg>');
}
.sk-icon-glyph[data-icon="search"] {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/></svg>');
}
.sk-icon-glyph[data-icon="settings"] {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round"><circle cx="12" cy="12" r="3"/><path d="M12 2.5v3M12 18.5v3M5.1 5.1l2.1 2.1M16.8 16.8l2.1 2.1M2.5 12h3M18.5 12h3M5.1 18.9l2.1-2.1M16.8 7.2l2.1-2.1"/></svg>');
}
.sk-icon-glyph[data-icon="star"] {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3.5l2.6 5.3 5.9.85-4.25 4.15 1 5.85L12 16.9l-5.25 2.75 1-5.85L3.5 9.65l5.9-.85z"/></svg>');
}
.sk-icon-glyph[data-icon="tiktok"] {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>');
}
.sk-icon-glyph[data-icon="user"] {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21c1.5-3.5 4.5-5 8-5s6.5 1.5 8 5"/></svg>');
}
.sk-icon-glyph[data-icon="x"] {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>');
}
.sk-icon-glyph[data-icon="youtube"] {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>');
}