/* 603010rule.com: Gallery child theme extensions (from the Gemini kolorwall draft, PR #250)
      Built on @fluid-theme/core v2.4.2 + themes/gallery.css */
@layer reset, tokens, base, layouts, components, themes, utilities;

@layer themes {
  :root {
    --space-2xs: 0.375rem;
    --kw-border: var(--border-width, 1px) solid var(--color-border);
    --kw-border-strong: 2px solid var(--color-text);
    --kw-swatch-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.12);
    --font-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  }

  /* Ensure zero horizontal overflow at 390px and 320px */
  html, body {
    max-inline-size: 100%;
    overflow-x: clip;
  }

  /* Skip link: visible on focus with strong contrast */
  .skip-link {
    position: absolute;
    inset-block-start: -100%;
    inset-inline-start: var(--space-m);
    z-index: 9999;
    padding-block: var(--space-xs);
    padding-inline: var(--space-m);
    background: var(--color-text);
    color: var(--color-background);
    font-weight: 700;
    text-decoration: none;
    border: 2px solid var(--accent-ink);
  }
  .skip-link:focus,
  .skip-link:focus-visible {
    inset-block-start: var(--space-xs);
    outline: 3px solid var(--accent-ink);
    outline-offset: 2px;
  }

  /* Playbook rule (forms.md): placeholders italic and readable */
  ::placeholder {
    font-style: italic;
    color: var(--color-text-muted);
    opacity: 0.85;
  }

  /* Gallery Header & Navigation */
  .site-header {
    border-block-end: var(--kw-border);
    background: var(--color-background);
  }
  .site-header .nav {
    display: flex;
    flex-wrap: wrap;
    align-items: safe center;
    justify-content: space-between;
    gap: var(--space-s) var(--space-m);
    padding-block: var(--space-s);
  }
  .site-header .nav__brand {
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
    text-decoration: none;
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-block-size: 44px;
  }
  .brand-swatch-dots {
    display: inline-flex;
    gap: 3px;
    forced-color-adjust: none;
  }
  .brand-swatch-dots span {
    display: inline-block;
    inline-size: 10px;
    block-size: 18px;
    border: 1px solid oklch(0% 0 0 / 0.2);
  }
  .site-header .nav__list {
    display: flex;
    flex-wrap: wrap;
    flex-wrap: balance;
    align-items: safe center;
    gap: 0.25rem 1.15rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .site-header .nav__link {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    padding-inline: 0.35rem;
    text-decoration: none;
    color: inherit;
  }
  .site-header .nav__link[aria-current="page"] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.35em;
  }

  /* Draft notice bar */
  .draft-banner {
    background: var(--color-surface);
    border-block-end: var(--kw-border);
    padding-block: var(--space-2xs);
    padding-inline: var(--page-edge);
    font-size: var(--step--2);
    color: var(--color-text-muted);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-xs);
  }
  .draft-banner strong {
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  /* Editorial Hero with Architectural Room SVG Stage */
  .hero-gallery {
    padding-block: clamp(2.5rem, 4vw, 5.5rem);
    padding-inline: var(--page-edge);
    border-block-end: var(--kw-border);
  }
  .hero-gallery__grid {
    max-inline-size: var(--container-content);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: var(--space-xl);
    align-items: center;
  }
  .hero-gallery__copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
  }
  .hero-gallery__copy h1 {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 1.6rem + 3.8vw, 4.75rem);
    line-height: 0.96;
    letter-spacing: -0.025em;
    margin: 0;
  }
  .hero-gallery__lede {
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--color-text);
    max-inline-size: 54ch;
    margin: 0;
  }
  .hero-gallery__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    padding-block-start: var(--space-2xs);
  }

  /* Buttons with 44px minimum target size */
  .button,
  button[type="submit"],
  .filter-chip {
    min-block-size: 44px;
    min-inline-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    padding-block: var(--space-xs);
    padding-inline: var(--space-m);
    border: 1px solid var(--color-text);
    background: var(--accent-fill, var(--accent));
    color: var(--on-accent, #ffffff);
    text-decoration: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--step--2);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .button[data-variant="outline"],
  .filter-chip {
    background: var(--color-background);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong, var(--color-text));
  }
  .button[data-variant="outline"]:hover,
  .filter-chip:hover {
    background: var(--color-surface);
  }
  .filter-chip[aria-pressed="true"] {
    background: var(--color-text);
    color: var(--color-background);
    border-color: var(--color-text);
  }

  /* Architectural Room Preview Frame */
  .room-stage {
    border: var(--kw-border-strong);
    background: var(--color-surface);
    padding: var(--space-m);
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
  }
  .room-stage__header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-xs);
    border-block-end: var(--kw-border);
    padding-block-end: var(--space-xs);
  }
  .room-stage__code {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .room-stage__meta {
    font-size: var(--step--2);
    color: var(--color-text-muted);
  }
  .room-scene-svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 10;
    border: var(--kw-border);
    forced-color-adjust: none;
  }

  /* 60-30-10 Swatch Legend Strip */
  .swatch-trio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
    gap: var(--space-xs);
  }
  .swatch-trio__item {
    border: var(--kw-border);
    background: var(--color-background);
    padding: var(--space-xs);
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }
  .swatch-chip {
    display: block;
    inline-size: 100%;
    block-size: 3.25rem;
    box-shadow: var(--kw-swatch-shadow);
    border: 1px solid oklch(0% 0 0 / 0.16);
    forced-color-adjust: none;
  }
  .swatch-trio__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2xs);
    font-size: var(--step--2);
  }
  .swatch-trio__pct {
    font-weight: 700;
    font-family: var(--font-mono);
  }
  .swatch-trio__hex {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--color-text-muted);
  }
  .swatch-trio__name {
    font-weight: 600;
    font-size: var(--step--1);
  }
  .swatch-trio__role {
    font-size: var(--step--2);
    color: var(--color-text-muted);
  }

  /* Section layout helpers */
  .kw-section {
    padding-block: clamp(3rem, 5vw, 6.5rem);
    padding-inline: var(--page-edge);
    border-block-end: var(--kw-border);
  }
  .kw-section[data-bg="tinted"] {
    background: var(--color-surface);
  }
  .kw-container {
    max-inline-size: var(--container-content);
    margin-inline: auto;
  }
  .kw-section-head {
    max-inline-size: 62ch;
    margin-block-end: var(--space-xl);
    border-block-start: 2px solid var(--color-text);
    padding-block-start: var(--space-s);
  }
  .kw-section-head .eyebrow {
    font-size: var(--step--2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
    margin-block-end: var(--space-2xs);
  }
  .kw-section-head h1,
  .kw-section-head h2 {
    margin-block: 0 var(--space-xs);
  }
  .kw-section-head p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--step-0);
  }

  /* 24-Palette Gallery Cards */
  .palette-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 23rem), 1fr));
    gap: var(--space-l);
  }
  .palette-card {
    border: var(--kw-border);
    background: var(--color-background);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .palette-card__head {
    padding: var(--space-m);
    border-block-end: var(--kw-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }
  .palette-card__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--step--2);
    color: var(--color-text-muted);
  }
  .palette-card__id {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--color-text);
  }
  .palette-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
  }
  .kw-badge {
    display: inline-block;
    padding-block: 2px;
    padding-inline: 8px;
    border: var(--kw-border);
    background: var(--color-surface);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text);
  }
  .palette-card__title {
    font-family: var(--font-heading);
    font-size: var(--step-1);
    margin: 0;
  }
  .palette-card__summary {
    font-size: var(--step--1);
    color: var(--color-text-muted);
    margin: 0;
  }

  /* Proportional 60-30-10 visual bar */
  .palette-bar {
    display: grid;
    grid-template-columns: 6fr 3fr 1fr;
    block-size: 5.5rem;
    border-block-end: var(--kw-border);
    forced-color-adjust: none;
  }
  .palette-bar__seg {
    display: flex;
    align-items: flex-end;
    padding: var(--space-2xs);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    border-inline-end: 1px solid oklch(0% 0 0 / 0.12);
  }
  .palette-bar__seg:last-child {
    border-inline-end: 0;
  }

  /* Detailed swatch rows inside each palette card */
  .palette-swatches {
    list-style: none;
    margin: 0;
    padding: var(--space-m);
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
  }
  .palette-swatch {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    gap: var(--space-s);
    align-items: start;
    padding-block-end: var(--space-xs);
    border-block-end: var(--kw-border);
  }
  .palette-swatch:last-child {
    border-block-end: 0;
    padding-block-end: 0;
  }
  .palette-swatch__chip {
    inline-size: 3.5rem;
    block-size: 3.5rem;
    border: 1px solid oklch(0% 0 0 / 0.2);
    box-shadow: var(--kw-swatch-shadow);
    forced-color-adjust: none;
  }
  .palette-swatch__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .palette-swatch__line1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2xs);
    font-weight: 600;
    font-size: var(--step--1);
  }
  .palette-swatch__hex {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    background: var(--color-surface);
    padding-inline: 6px;
    border: var(--kw-border);
  }
  .palette-swatch__where {
    font-size: var(--step--2);
    color: var(--color-text-muted);
  }
  .palette-card__foot {
    padding-block: var(--space-xs);
    padding-inline: var(--space-m);
    background: var(--color-surface);
    border-block-start: var(--kw-border);
    font-size: var(--step--2);
    color: var(--color-text-muted);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2xs);
  }

  /* Filter bar for Palettes & Rooms */
  .filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    align-items: center;
    padding: var(--space-m);
    border: var(--kw-border);
    background: var(--color-surface);
    margin-block-end: var(--space-l);
  }
  .filter-group {
    display: flex;
    flex-wrap: wrap;
    flex-wrap: balance;
    align-items: center;
    gap: var(--space-2xs);
  }
  .filter-group__label {
    font-size: var(--step--2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-inline-end: var(--space-2xs);
  }

  /* Room Guide Elevations & Grid */
  .room-nav-pills {
    display: flex;
    flex-wrap: wrap;
    flex-wrap: balance;
    gap: var(--space-xs);
    margin-block-end: var(--space-xl);
  }
  .room-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: var(--space-xl);
    align-items: start;
    padding-block: var(--space-xl);
    border-block-start: var(--kw-border);
  }
  .room-showcase:first-of-type {
    border-block-start: 0;
    padding-block-start: 0;
  }

  /* Palette Picker Interactive Studio */
  .picker-studio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: var(--space-xl);
    align-items: start;
  }
  .picker-controls {
    border: var(--kw-border-strong);
    background: var(--color-surface);
    padding: var(--space-l);
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
  }
  .picker-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }
  .picker-fieldset legend {
    font-weight: 700;
    font-size: var(--step--1);
    padding: 0;
    margin-block-end: var(--space-2xs);
  }
  .picker-radio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
    gap: var(--space-2xs);
  }
  .picker-radio {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    min-block-size: 44px;
    padding-block: var(--space-2xs);
    padding-inline: var(--space-xs);
    border: var(--kw-border);
    background: var(--color-background);
    cursor: pointer;
    font-size: var(--step--2);
    font-weight: 600;
  }
  .picker-radio:has(input:checked) {
    border-color: var(--color-text);
    box-shadow: inset 0 0 0 1px var(--color-text);
    background: var(--color-surface);
  }
  .picker-radio:has(input:focus-visible) {
    outline: 2px solid var(--color-focus, var(--accent-ink));
    outline-offset: 2px;
  }
  .picker-radio input {
    inline-size: 1.1rem;
    block-size: 1.1rem;
    margin: 0;
    accent-color: var(--accent);
  }

  /* Responsive Data Table (modern-web-guidance: responsive-table) */
  .table-wrapper {
    overflow: auto;
    max-inline-size: 100%;
    max-block-size: min(680px, 85vh);
    container-type: inline-size;
    border: var(--kw-border);
    background: var(--color-background);
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
  }
  .table-wrapper:focus-visible {
    outline: 3px solid var(--accent-ink);
    outline-offset: 2px;
  }
  .kw-table {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--step--1);
    --label-1: "Palette";
    --label-2: "Room";
    --label-3: "Mood";
    --label-4: "Light";
    --label-5: "60% Main Wall";
    --label-6: "30% Trim / Secondary";
    --label-7: "10% Focal Accent";
  }
  .kw-table caption {
    text-align: start;
    padding: var(--space-s) var(--space-m);
    font-weight: 700;
    background: var(--color-surface);
    border-block-end: var(--kw-border);
  }
  .kw-table thead {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    background: var(--color-surface);
  }
  .kw-table th,
  .kw-table td {
    padding: var(--space-xs) var(--space-s);
    text-align: start;
    vertical-align: top;
    border-block-end: var(--kw-border);
    border-inline-end: var(--kw-border);
  }
  .kw-table tbody th {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    background: var(--color-background);
    font-weight: 700;
  }
  .table-swatch-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: var(--step--2);
  }
  .table-swatch-inline__box {
    display: inline-block;
    inline-size: 1.15rem;
    block-size: 1.15rem;
    border: 1px solid oklch(0% 0 0 / 0.25);
    forced-color-adjust: none;
    flex-shrink: 0;
  }

  @container (width < 600px) {
    .kw-table,
    .kw-table caption,
    .kw-table thead,
    .kw-table tbody,
    .kw-table tr,
    .kw-table th,
    .kw-table td {
      display: block;
    }
    .kw-table thead {
      display: none;
    }
    .kw-table tr {
      margin-block-end: var(--space-m);
      border: var(--kw-border);
    }
    .kw-table tbody th {
      position: sticky;
      inset-block-start: 0;
      z-index: 2;
      background: var(--color-surface);
      border-block-end: var(--kw-border);
    }
    .kw-table td:nth-child(2)::before { content: var(--label-2) ": "; font-weight: 700; }
    .kw-table td:nth-child(3)::before { content: var(--label-3) ": "; font-weight: 700; }
    .kw-table td:nth-child(4)::before { content: var(--label-4) ": "; font-weight: 700; }
    .kw-table td:nth-child(5)::before { content: var(--label-5) ": "; font-weight: 700; display: block; }
    .kw-table td:nth-child(6)::before { content: var(--label-6) ": "; font-weight: 700; display: block; }
    .kw-table td:nth-child(7)::before { content: var(--label-7) ": "; font-weight: 700; display: block; }
  }

  /* Forms & Validation (modern-web-guidance: validate-input-after-interaction + playbook/forms.md) */
  .kw-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: var(--space-xl);
    align-items: start;
  }
  .kw-form-card {
    border: var(--kw-border);
    background: var(--color-background);
    padding: var(--space-l);
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
  }
  .form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-block-end: var(--space-s);
  }
  .form-field label {
    font-weight: 600;
    font-size: var(--step--1);
  }
  .field-hint {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--step--2);
    margin-block-end: 2px;
  }
  .form-field input,
  .form-field select,
  .form-field textarea {
    inline-size: 100%;
    min-block-size: 44px;
    padding-block: var(--space-2xs);
    padding-inline: var(--space-s);
    border: 1px solid var(--color-text);
    background: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--step-0);
  }
  .field-error {
    display: none;
    color: var(--color-error, #b3261e);
    font-size: var(--step--2);
    font-weight: 600;
    margin-block-start: 4px;
  }
  .form-field input:user-invalid,
  .form-field select:user-invalid,
  .form-field textarea:user-invalid,
  .form-field .user-invalid-fallback {
    border-color: var(--color-error, #b3261e);
    border-inline-start-width: 4px;
    background-color: var(--color-error-subtle, oklch(96% 0.03 25));
  }
  .form-field :is(input, select, textarea):user-invalid + .field-error,
  .form-field .user-invalid-fallback + .field-error {
    display: block;
  }
  .form-field :is(input, select, textarea):user-valid,
  .form-field .user-valid-fallback {
    border-color: var(--color-success, #188038);
  }
  /* Preserve high-contrast focus indicator on invalid fields (playbook/design-and-ux.md) */
  .form-field :is(input, select, textarea):focus,
  .form-field :is(input, select, textarea)[aria-invalid="true"]:focus,
  .form-field :is(input, select, textarea):user-invalid:focus,
  .form-field .user-invalid-fallback:focus {
    outline: 3px solid var(--color-focus, var(--accent-ink));
    outline-offset: 2px;
  }

  /* Conditional field rule for reason="other" */
  @supports selector(:has(*)) {
    .if-reason-other {
      display: none;
    }
    form:has(select[name="reason"] option[value="other"]:checked) .if-reason-other {
      display: flex;
    }
  }

  /* Honeypot & Turnstile placeholder */
  .hp {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: clip;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .turnstile-placeholder {
    border: 1px dashed var(--color-border-strong, var(--color-text-muted));
    background: var(--color-surface);
    padding: var(--space-xs) var(--space-s);
    font-size: var(--step--2);
    color: var(--color-text-muted);
    margin-block-end: var(--space-s);
  }

  /* Color Basics & Article diagrams */
  .concept-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    gap: var(--space-l);
  }
  .concept-card {
    border: var(--kw-border);
    background: var(--color-background);
    padding: var(--space-l);
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
  }
  .concept-card__num {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 700;
    color: var(--color-text-muted);
  }
  .concept-card h2,
  .concept-card h3 {
    margin: 0;
  }
  .source-cite {
    margin-block-start: auto;
    padding-block-start: var(--space-xs);
    border-block-start: var(--kw-border);
    font-size: var(--step--2);
    color: var(--color-text-muted);
  }
  .source-cite a {
    color: var(--color-text);
    font-weight: 600;
  }

  /* Article layout */
  .article-shell {
    max-inline-size: 46rem;
    margin-inline: auto;
  }
  .article-shell h1 {
    font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
    line-height: 1.04;
    margin-block-end: var(--space-s);
  }
  .article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    font-size: var(--step--2);
    color: var(--color-text-muted);
    padding-block-end: var(--space-m);
    margin-block-end: var(--space-l);
    border-block-end: var(--kw-border);
  }
  .article-diagram {
    border: var(--kw-border);
    background: var(--color-surface);
    padding: var(--space-m);
    margin-block: var(--space-l);
  }
  .article-diagram figcaption {
    font-size: var(--step--2);
    color: var(--color-text-muted);
    margin-block-start: var(--space-xs);
  }

  /* Footer */
  .kw-footer {
    padding-block: var(--space-xl);
    padding-inline: var(--page-edge);
    border-block-start: 2px solid var(--color-text);
    background: var(--color-background);
  }
  .kw-footer__grid {
    max-inline-size: var(--container-content);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--space-l);
    padding-block-end: var(--space-l);
    border-block-end: var(--kw-border);
  }
  .kw-footer__heading {
    font-size: var(--step--2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-block: 0 var(--space-xs);
  }
  .kw-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }
  .kw-footer__list a {
    display: inline-flex;
    align-items: center;
    min-block-size: 36px;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: var(--step--1);
  }
  .kw-footer__list a:hover {
    color: var(--color-text);
    text-decoration: underline;
  }
  .kw-footer__legal {
    max-inline-size: var(--container-content);
    margin-inline: auto;
    padding-block-start: var(--space-m);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-s);
    font-size: var(--step--2);
    color: var(--color-text-muted);
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}