/* ── Physics State ────────────────────────── */

@property --hover      { syntax: "<number>"; inherits: true;  initial-value: 0; }
@property --press      { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --scroll     { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --open-close { syntax: "<number>"; inherits: false; initial-value: 0; }


:root {

/* ═══════════════════════════════════════════════════════════
   PART 1 — INPUTS
   Sites override these. Everything in PART 2 derives from them.
   ═══════════════════════════════════════════════════════════ */

  /* ── Color ── */
  --hue:         250;
  --hue-colored: var(--hue);
  --hue-accent:  var(--hue);
  --hue-ink:     var(--hue);
  --hue-danger:  15;

  /* ── Typography ── */
  --type-base:       1.0625;
  --type-ratio:      1.2;
  --space-ratio:     1.2;
  --opacity-ratio:   1.2;
  --weight-body:     400;
  --weight-contrast: 100;
  --font-body:       system-ui, sans-serif;
  --font-display:    var(--font-body);
  --font-label:      var(--font-body);
  --font-display-policy: optional;
  --tracking-label:  0.04em;
  --tracking-caps:   0.08em;

  /* ── Layout ── */
  --radius:          0;
  --container-max:   75rem;
  --main-gutter:     var(--space-4);
  --body-gutter:     var(--space-5);
  --card-min:        17.5rem;
  --measure:         65ch;

  /* ── Section rhythm ── */
  --site-nav-height:           80px;
  --section-block:             clamp(var(--space-5), 8vh, var(--space-8));
  --first-section-block-start: 0;

  /* ── Depth ── */
  --elevation:       0;

  /* ── Break shapes ── */
  --break-amplitude: 3;

  /* ── Glass material ── hardcoded for now, sites override to tune
     (blur amounts, bevel inset stack, backdrop tint). Derivation
     will come once a pattern emerges across sites. */
  --glass-blur-sm:   blur(8px);
  --glass-blur-md:   blur(12px) saturate(120%);
  --glass-blur-lg:   blur(32px) saturate(180%);
  --glass-bevel:
    inset 0  1px 0 oklch(1 0 0 / 0.12),
    inset 0 -1px 0 oklch(0 0 0 / 0.05),
    0      8px 32px oklch(0 0 0 / 0.08);
  --glass-backdrop:  oklch(0 0 0 / 0.4);

  /* ── Timing ── platform constants, sites don't override */
  --anim-fast: 75ms;
  --anim-mid:  300ms;
  --anim-slow: 600ms;

  /* ── Easing ── Hooke's law and exponential decay approximations */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);


/* ═══════════════════════════════════════════════════════════
   PART 2 — DERIVED
   Formulas that use the inputs above. Do not edit.
   ═══════════════════════════════════════════════════════════ */

  /* ── Color Contract ────────────────────────────────────
     4 surfaces × 3-role ink triplets.

     Rule 1 — Paint ⇒ Surface.
       Anything that paints a background wears a surface class
       (.surface / .surface-colored / .surface-accent / .surface-danger).
       Anything that doesn't paint inherits from the nearest
       surface ancestor via the --ink-* cascade.

     Rule 2 — Triplets install as a unit.
       (background, --ink-display, --ink-body, --ink-label) are
       one decision, same polarity. Never cross-mix polarities. */

  /* DEFAULT — light surface, dark inks */
  --surface:             oklch(0.98 0.005 var(--hue));
  --ink-default-display: oklch(0.15 0.020 var(--hue-ink));
  --ink-default-body:    oklch(0.40 0.015 var(--hue-ink));
  --ink-default-label:   oklch(0.55 0.010 var(--hue-ink));

  /* COLORED — dark surface, light inks */
  --surface-colored:     oklch(0.18 0.015 var(--hue-colored));
  --ink-colored-display: oklch(0.98 0.005 var(--hue-ink));
  --ink-colored-body:    oklch(0.88 0.010 var(--hue-ink));
  --ink-colored-label:   oklch(0.68 0.010 var(--hue-ink));

  /* ACCENT — mid surface, dark inks (CTA) */
  --surface-accent:      oklch(0.60 0.150 var(--hue-accent));
  --ink-accent-display:  oklch(0.15 0.020 var(--hue-ink));
  --ink-accent-body:     oklch(0.30 0.015 var(--hue-ink));
  --ink-accent-label:    oklch(0.45 0.010 var(--hue-ink));

  /* DANGER — red surface, near-white inks. Hue anchored. */
  --surface-danger:      oklch(0.55 0.22  var(--hue-danger));
  --ink-danger-display:  oklch(0.98 0.005 var(--hue-danger));
  --ink-danger-body:     oklch(0.94 0.010 var(--hue-danger));
  --ink-danger-label:    oklch(0.80 0.010 var(--hue-danger));

  /* Highlights */
  --accent:      var(--surface-accent);
  --accent-tint: oklch(0.50 0.100 var(--hue-accent));
  --danger:      var(--surface-danger);

  /* Active ink installation — surface classes rewrite these in scope */
  --ink-display: var(--ink-default-display);
  --ink-body:    var(--ink-default-body);
  --ink-label:   var(--ink-default-label);

  /* ── Type Scale ──
     Weber-Fechner: type-base × type-scale × 1rem × pow(type-ratio, n).
     Platform owns --type-scale (responsive). */
  --type-scale: 1;
  --text-sm:   calc(var(--type-base) * var(--type-scale) * 1rem * pow(var(--type-ratio), -1));
  --text-base: calc(var(--type-base) * var(--type-scale) * 1rem);
  --text-lg:   calc(var(--type-base) * var(--type-scale) * 1rem * pow(var(--type-ratio), 1));
  --text-xl:   calc(var(--type-base) * var(--type-scale) * 1rem * pow(var(--type-ratio), 2));
  --text-2xl:  calc(var(--type-base) * var(--type-scale) * 1rem * pow(var(--type-ratio), 3));
  --text-3xl:  calc(var(--type-base) * var(--type-scale) * 1rem * pow(var(--type-ratio), 4));
  --text-4xl:  calc(var(--type-base) * var(--type-scale) * 1rem * pow(var(--type-ratio), 5));
  --text-5xl:  calc(var(--type-base) * var(--type-scale) * 1rem * pow(var(--type-ratio), 6));
  --text-6xl:  calc(var(--type-base) * var(--type-scale) * 1rem * pow(var(--type-ratio), 7));





  /* ── Weight Scale ──
     Linear: body ± contrast × n. Lands on standard CSS weight stops. */
  --weight-light:   calc(var(--weight-body) - var(--weight-contrast));
  --weight-semi:    calc(var(--weight-body) + var(--weight-contrast));
  --weight-label:   calc(var(--weight-body) + var(--weight-contrast) * 2);
  --weight-heavy:   calc(var(--weight-body) + var(--weight-contrast) * 3);
  --weight-display: calc(var(--weight-body) + var(--weight-contrast) * 4);

  /* ── Space Scale ──
     Weber-Fechner: --1 × pow(type-ratio, n×2). Same curve as opacity. */
  --1: 0.5rem;
  --space-1:  var(--1);
  --space-2:  calc(var(--1) * pow(var(--space-ratio), 2));
  --space-3:  calc(var(--1) * pow(var(--space-ratio), 4));
  --space-4:  calc(var(--1) * pow(var(--space-ratio), 6));
  --space-5:  calc(var(--1) * pow(var(--space-ratio), 8));
  --space-6:  calc(var(--1) * pow(var(--space-ratio), 10));
  --space-7:  calc(var(--1) * pow(var(--space-ratio), 12));
  --space-8:  calc(var(--1) * pow(var(--space-ratio), 14));
  --space-9:  calc(var(--1) * pow(var(--space-ratio), 16));
  --space-10: calc(var(--1) * pow(var(--space-ratio), 18));

  /* ── Opacity Scale ──
     Weber-Fechner: --opacity-1 × pow(type-ratio, n×2). */
  --opacity-1: 0.04;
  --opacity-2: calc(var(--opacity-1) * pow(var(--opacity-ratio), 2));
  --opacity-3: calc(var(--opacity-1) * pow(var(--opacity-ratio), 4));
  --opacity-4: calc(var(--opacity-1) * pow(var(--opacity-ratio), 6));
  --opacity-5: calc(var(--opacity-1) * pow(var(--opacity-ratio), 8));
  --opacity-6: calc(var(--opacity-1) * pow(var(--opacity-ratio), 10));
  --opacity-7: calc(var(--opacity-1) * pow(var(--opacity-ratio), 12));

  /* ── Radius Scale ── */
  --radius-sm: calc(var(--radius) * 0.5);
  --radius-md: var(--radius);
  --radius-lg: calc(var(--radius) * 2);
  --radius-xl: calc(var(--radius) * 3);

  /* ── Shadow ──
     Inverse-square light physics. Components set --elevation per-context. */
  --shadow-y:       calc(var(--elevation) * 4px);
  --shadow-blur:    calc(var(--elevation) * var(--elevation) * 4px);
  --shadow-spread:  calc(var(--elevation) * -1px);
  --shadow-opacity: calc(0.5 / (var(--elevation) + 1));
  --shadow:         0 var(--shadow-y) var(--shadow-blur) var(--shadow-spread) oklch(from var(--ink-display) l c h / var(--shadow-opacity));
  --shadow-strong:  0 8px 32px oklch(from var(--ink-display) l c h / var(--opacity-5));

  /* ── Color Layers — derive from active ink/accent ── */
  --shade:           oklch(from var(--ink-body)        l c h / var(--opacity-1));
  --border:          oklch(from var(--ink-body)        l c h / var(--opacity-4));
  --border-strong:   oklch(from var(--ink-display)     l c h / var(--opacity-5));

  --tint-opacity:    var(--opacity-4);
  --tint:            oklch(from var(--accent-tint)     l c h / var(--tint-opacity));

  --overlay-opacity: var(--opacity-7);
  --overlay:         oklch(from var(--surface-colored) l c h / var(--overlay-opacity));

  /* Scrollbar — derived from --ink-default-display (not active ink,
     because :root has no surface class installing the active values). */
  --scrollbar-thumb:       oklch(from var(--ink-default-display) l c h / var(--opacity-5));
  --scrollbar-thumb-hover: oklch(from var(--ink-default-display) l c h / var(--opacity-6));
  --scrollbar-track:       transparent;
}


/* ── Responsive Scaling ──────────────────────────────────
   Adjusts --1 (space base) and --type-scale (type base) at
   breakpoints. Everything derived from them scales automatically. */

@media (max-width: 1068px) { :root { --1: 0.4375rem; --type-scale: 0.97; } }
@media (max-width: 734px)  { :root { --1: 0.375rem;  --type-scale: 0.95; } }

/* ── Box Model + Element Resets ────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  font-size: clamp(16px, 0.6vw + 10px, 24px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  font-kerning: normal;
  font-optical-sizing: auto;
  scroll-behavior: smooth;
  scroll-padding-top: var(--site-nav-height);
  scroll-padding-bottom: var(--space-5);
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--surface);
  color: var(--ink-body);
  line-height: 1.2;
  letter-spacing: -0.025em;
  -webkit-tap-highlight-color: transparent;
  min-height: 100dvh;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--ink-display); line-height: 1; letter-spacing: -0.02em; text-wrap: balance; margin: 0; text-box-trim: both; text-box-edge: cap alphabetic; }
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }
p { margin-block: 0; text-wrap: pretty; }
p + p { margin-block-start: var(--space-2); }
p, li, blockquote, dd { font-size: var(--text-base); }

/* <data> and <output> — numeric/statistical values, auto-pick up label ink semantically */
data, output { color: var(--ink-label); }

img, video, svg, canvas, iframe { max-inline-size: 100%; height: auto; }
button, [role="button"] { margin: 0; border: 0; padding: 0; background: transparent; color: inherit; font: inherit; font-family: var(--font-label); cursor: pointer; }
label, caption, figcaption { font-family: var(--font-label); }

article ul, article ol { margin-top: var(--space-3); padding-left: var(--space-5); }
article li + li { margin-top: var(--space-1); }

/* ── Structural Defaults ── every site gets these for free, no per-section setup */
section { position: relative; }
main { display: flex; flex-direction: column; }
blockquote { border-inline-start: 3px solid var(--border); margin: 0; padding: 0 0 0 1em; }
hr { margin: 0; border: 0; border-block-end: 1px solid var(--border); }
iframe { display: block; border-radius: var(--radius-sm); border: 1px solid var(--border); }

::selection { background: oklch(from var(--accent) l c h / 0.25); }
mark { background: oklch(from var(--accent) l c h / 0.15); color: inherit; padding: 0 0.15em; border-radius: 0.2em; }

/* ── Texture ──────────────────────────────────────── */

body::after {
  --grain-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-film: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: var(--grain-opacity, 0.03);
  background: var(--grain, var(--grain-fine));
  background-size: var(--grain-size, 200px 200px);
}

/* ── Accessibility ────────────────────────────────── */

:root {
  --focus-ring-color: var(--accent);
  --focus-ring-offset: 2px;
  --focus-ring-size: 2px;
}

:focus-visible {
  outline: var(--focus-ring-size) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.site-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 0.75rem 1.5rem;
  background: oklch(0.12 0 0);
  color: oklch(0.95 0 0);
  font-weight: var(--weight-label);
  text-decoration: none;
}
.site-skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@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;
  }
}

@media (forced-colors: active) {
  .card, input, textarea, select { border: 1px solid CanvasText !important; }
  svg { fill: CanvasText !important; stroke: CanvasText !important; }
}

@media (inverted-colors: inverted) {
  img, video, .no-inversion { filter: invert(1); }
}

/* ── Interaction ──────────────────────────────────── */

:target { animation: target-flash 1.4s 0.3s ease-out; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

/* ── Forms ────────────────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="number"],
textarea,
select {
  font-family: inherit;
  font-size: var(--text-base);
  line-height: inherit;
  min-block-size: 44px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px oklch(from var(--accent) l c h / 0.25);
}

input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.5;
  pointer-events: none;
}

input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown),
select:invalid {
  border-color: var(--surface-danger);
}

input:invalid:not(:placeholder-shown):focus-visible,
textarea:invalid:not(:placeholder-shown):focus-visible {
  box-shadow: 0 0 0 3px oklch(from var(--surface-danger) l c h / 0.25);
}

::placeholder {
  color: color-mix(in oklch, var(--ink-display, currentColor) 40%, transparent);
  opacity: 1;
}

textarea { resize: vertical; }

input[type="checkbox"],
input[type="radio"] {
  width: 1.25em;
  height: 1.25em;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ── Error Pages ── */

.error-status {
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.error-page main {
  display: grid;
  place-items: center;
  min-height: 80vh;
}

/* ── Prose ── */

.prose { max-inline-size: var(--measure, 65ch); }
.prose > * + * { margin-block-start: var(--space-3); }
.prose p { margin-block-end: var(--space-2); }
.prose h2, .prose h3, .prose h4 { margin-block-start: var(--space-5); margin-block-end: var(--space-2); }
.prose ul, .prose ol { padding-inline-start: var(--space-5); margin-block-end: var(--space-3); }
.prose li + li { margin-block-start: var(--space-1); }
.prose a { text-decoration: underline; text-underline-offset: 0.1em; }

/* ── Platform Keyframes ─────────────────────────────────
   Every @keyframes lives here. Source files reference them
   via animation: name ... and never define their own.
   Site-specific keyframes still live in sites/{slug}/. */


/* ── Component motion ──────────────────────────────── */

/* Dialog pop-in — used by .dialog-panel */
@keyframes pop-in-spring {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Dropdown slide-down — used by .dropdown__menu */
@keyframes slide-down-fade {
  from { opacity: 0; transform: scale(0.95) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Notice fade-in — used by output.notice */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Marquee scroll — used by .marquee__track */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Carousel progress bar — used by .carousel__dot[data-state="playing"]::after */
@keyframes progress-fill {
  to { width: 100%; }
}

/* Carousel ring fill — used by .gallery__play-pause progress angle */
@keyframes fill-ring {
  from { --progress-angle: 0deg; }
  to   { --progress-angle: 360deg; }
}


/* ── Chrome motion ─────────────────────────────────── */

/* Nav scroll-driven glass — used with animation-timeline: scroll() */
@keyframes nav-glass {
  from { --scroll: 0; }
  to   { --scroll: 1; }
}


/* ── Interaction feedback ──────────────────────────── */

/* :target flash — used by base.css :target rule */
@keyframes target-flash {
  from { background-color: var(--tint); }
  to   { background-color: transparent; }
}


/* ── Entrance patterns (scroll-driven) ─────────────────
   Designed for animation-timeline: view(). Sites consume
   these via [data-entrance="..."] rules in site CSS. */

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(2rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in-down {
  from { opacity: 0; transform: translateY(-2rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scale-fade-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* view-peak — peaks at 1 mid-viewport, fades out as the element exits */
@keyframes view-peak {
  0%   { opacity: 0; transform: translateY(2rem); }
  50%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-2rem); }
}

/* ── Layout — structural primitives ─────────────────
   section → .contain.flow → .split-* → children

   Composition:
   - section owns the band: padding, surface class, break shape
   - .contain owns the width box, co-classed with .flow
   - .flow owns vertical rhythm
   - .split-* owns horizontal arrangement
   - No primitive owns both axes */


/* ── Surfaces ────────────────────────────────────────
   Four surface classes. Each installs its ink triplet
   (--ink-display / --ink-body / --ink-label) in scope.
   This is the ONLY place ink triplets are installed.

   Components read var(--ink-*) from the cascade.
   Sections wear a surface class on <section>.
   Flip a component's polarity by wearing a surface class
   on the component element: <div class="card surface-colored">. */

.surface {
  background: var(--surface);
  --ink-display: var(--ink-default-display);
  --ink-body:    var(--ink-default-body);
  --ink-label:   var(--ink-default-label);
  color: var(--ink-body);
  --break-bumper-fill: var(--surface);
}

.surface-colored {
  background: var(--surface-colored);
  --ink-display: var(--ink-colored-display);
  --ink-body:    var(--ink-colored-body);
  --ink-label:   var(--ink-colored-label);
  color: var(--ink-body);
  --break-bumper-fill: var(--surface-colored);
}

.surface-accent {
  background: var(--surface-accent);
  --ink-display: var(--ink-accent-display);
  --ink-body:    var(--ink-accent-body);
  --ink-label:   var(--ink-accent-label);
  color: var(--ink-body);
  --break-bumper-fill: var(--surface-accent);
}

.surface-danger {
  background: var(--surface-danger);
  --ink-display: var(--ink-danger-display);
  --ink-body:    var(--ink-danger-body);
  --ink-label:   var(--ink-danger-label);
  color: var(--ink-body);
  --break-bumper-fill: var(--surface-danger);
}

/* Ink-flip — polarity switcher driven by --hover (0–1 written by JS).
   Interpolates from default to colored triplet as --hover rises. */
.ink-flip {
  --ink-display: color-mix(in oklch, var(--ink-default-display), var(--ink-colored-display) calc(var(--hover, 0) * 100%));
  --ink-body:    color-mix(in oklch, var(--ink-default-body),    var(--ink-colored-body)    calc(var(--hover, 0) * 100%));
  --ink-label:   color-mix(in oklch, var(--ink-default-label),   var(--ink-colored-label)   calc(var(--hover, 0) * 100%));
  color: var(--ink-body);
}


/* ── Section ─────────────────────────────────────────
   Every section gets --section-block top and bottom.
   First section overrides its top with --first-section-block-start. */

main > section               { padding-block: var(--section-block); position: relative; }
main > section:first-of-type { padding-block-start: var(--first-section-block-start); }


/* ── Contain ── width box, always co-classed with .flow */

.contain {
  max-inline-size: var(--container-max, 75rem);
  margin-inline: auto;
  padding-inline: clamp(var(--space-3), 5vw, var(--main-gutter, var(--space-4)));
  min-width: 0;
}


/* ── Flow ── vertical rhythm, goes on .contain */

.flow           { --flow-space: var(--space-2); display: flex; flex-direction: column; gap: var(--flow-space); }
.flow > *       { margin: 0; min-inline-size: 0; }
.flow--tight    { --flow-space: var(--space-1); }
.flow--center   { align-items: center; text-align: center; }
.flow--start    { align-items: flex-start; text-align: left; }


/* ── Split — horizontal layouts ──────────────────────
   .split       2-col, --split takes "1fr 1fr" etc.
   .split-3     3-col, 1 → 2 → 3 at 768/1024
   .split-4     4-col, 1 → 2 → 4 at 768/1024
   .split-cards fluid flex-wrap fed by --card-min
   .split-prose measure-clamped reading column */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--split-gap, var(--main-gutter, var(--space-4)));
  align-items: center;
  text-align: center;
  --split-align: center;
}
.split > *       { min-width: 0; }
.split > .flow   { align-items: center; }

@media (min-width: 768px) {
  .split {
    grid-template-columns: var(--split, 1fr 1fr);
    text-align: left;
    --split-align: flex-start;
  }
  .split > .flow { align-items: flex-start; }
}

/* Split reverse — flips visual column order without changing source order */
.split--reverse     { direction: rtl; }
.split--reverse > * { direction: ltr; }


/* ── Split-rail — primary content plus fitted rail ─────
   Use for main-plus-rail sections where one side should size to a
   specific rail width and the other should take the remaining space.

   Set --rail to the fitted track you want:
   auto
   16rem
   minmax(220px, 280px)

   Default order is rail first, content second. Add .split-rail--end
   when the rail should sit on the right. */

.split-rail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--split-gap, var(--main-gutter, var(--space-4)));
  align-items: start;
}
.split-rail > * { min-width: 0; }

@media (min-width: 768px) {
  .split-rail {
    grid-template-columns: var(--rail, minmax(16rem, 22rem)) minmax(0, 1fr);
  }
  .split-rail.split-rail--end {
    grid-template-columns: minmax(0, 1fr) var(--rail, minmax(16rem, 22rem));
  }
}


/* ── Split-centerlock — centered middle track with symmetric side rails ──
   Use when the middle item must stay truly centered while the left and
   right items absorb the remaining space.

   Default track list is 1fr auto 1fr. Collapse to one column at 360px.
   Add section-level media queries when the section needs a different
   collapse point or custom small-screen rebalancing. */

.split-centerlock {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--split-gap, var(--main-gutter, var(--space-4)));
  align-items: center;
}
.split-centerlock > * { min-width: 0; }

@media (max-width: 360px) {
  .split-centerlock { grid-template-columns: 1fr; }
}


/* ── Split-3 — 3-col grid, 1 → 2 → 3 breakpoints ───── */

.split-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--split-gap, var(--main-gutter, var(--space-4)));
}
.split-3 > * { min-width: 0; }
@media (min-width: 768px)  { .split-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .split-3 { grid-template-columns: repeat(3, 1fr); } }


/* ── Split-4 — 4-col grid, 1 → 2 → 4 breakpoints ───── */

.split-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--split-gap, var(--main-gutter, var(--space-4)));
}
.split-4 > * { min-width: 0; }
@media (min-width: 768px)  { .split-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .split-4 { grid-template-columns: repeat(4, 1fr); } }


/* ── Split-cards ── fluid flex-wrap fed by --card-min */

.split-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--split-gap, var(--main-gutter, var(--space-4)));
}
.split-cards > * {
  flex: 1 1 var(--card-min, 17.5rem);
  min-inline-size: 0;
}


/* ── Split-prose ── measure-clamped reading column with owl-selector rhythm */

.split-prose         { inline-size: min(100%, var(--measure, 65ch)); }
.split-prose > * + * { margin-block-start: var(--space-3); }
.split-prose p       { margin-block-end: var(--space-2); }
.split-prose h2,
.split-prose h3,
.split-prose h4      { margin-block-start: var(--space-5); margin-block-end: var(--space-2); }
.split-prose ul,
.split-prose ol      { padding-inline-start: var(--space-5); margin-block-end: var(--space-3); }
.split-prose li + li { margin-block-start: var(--space-1); }
.split-prose a       { text-decoration: underline; text-underline-offset: 0.1em; }


/* ── Scroll-driven entrance — .reveal-rise fades and rises on viewport entry */

@media (prefers-reduced-motion: no-preference) {
  .reveal-rise {
    animation: fade-in-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
}

/* ── Breaks ─────────────────────────────────────────
   Every shape is y(x) = --break-amplitude × shape-multiplier.
   One site knob drives every break; shapes calibrate their own weight.

   Multipliers: flat=0, slope=1, arc=2, dome=2, bumper=0.8 */


.break--flat { /* flat edge, no shape */ }


/* Slopes — linear ramps. Negative margin bleeds the next section
   into the slope; matching padding preserves content breathing room. */

.break--slope-left,
.break--slope-right {
  --_amp: calc(var(--break-amplitude, 3) * 1vw);
  margin-block-end: calc(-1 * var(--_amp));
  padding-block-end: calc(var(--section-block, var(--space-7)) + var(--_amp));
}

.break--slope-left {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--_amp)), 0 100%);
}

.break--slope-right {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--_amp)));
}


/* ── Arc — half-sine curve sitting below the section ── */

.break--arc {
  position: relative;
}
.break--arc::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  --_amp: calc(var(--break-amplitude, 3) * 2vw);
  block-size: var(--_amp);
  inset-block-end: calc(-1 * var(--_amp));
  background-color: var(--break-arc-fill, currentColor);
  pointer-events: none;
  z-index: 3;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,0 Q50,100 100,0 Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,0 Q50,100 100,0 Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}


/* ── Dome — arc flipped, sitting on top of the section ── */

.break--dome {
  --_amp: calc(var(--break-amplitude, 3) * 2vw);
  position: relative;
  z-index: 2;
  margin-block-start: calc(-0.5 * var(--_amp));
  padding-block-start: calc(var(--_amp) + var(--section-block, var(--space-7)));
  border-start-start-radius: 50% var(--_amp);
  border-start-end-radius:   50% var(--_amp);
  overflow: clip;
}


/* Bumper — repeating sine wave. Amplitude = crest height,
   wavelength = horizontal period. Calibrated to ~24px / ~120px at amp=3. */

.break--bumper {
  --_amp:  calc(var(--break-amplitude, 3) * 0.5vw);
  --_wave: calc(var(--break-amplitude, 3) * 2.5vw);
  position: relative;
  overflow: visible;
  isolation: isolate;
}
.break--bumper::before,
.break--bumper::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: var(--_amp);
  background-color: var(--break-bumper-fill, currentColor);
  pointer-events: none;
  z-index: 3;
}
.break--bumper::before {
  inset-block-start: calc(-1 * var(--_amp));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 24V12Q15 0 30 12T60 12T90 12T120 12V24Z'/%3E%3C/svg%3E") repeat-x center / var(--_wave) 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 24V12Q15 0 30 12T60 12T90 12T120 12V24Z'/%3E%3C/svg%3E") repeat-x center / var(--_wave) 100%;
}
.break--bumper::after {
  inset-block-end: calc(-1 * var(--_amp));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 0V12Q15 24 30 12T60 12T90 12T120 12V0Z'/%3E%3C/svg%3E") repeat-x center / var(--_wave) 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 0V12Q15 24 30 12T60 12T90 12T120 12V0Z'/%3E%3C/svg%3E") repeat-x center / var(--_wave) 100%;
}

/* ── Buttons ─────────────────────────────────────────────
   Variants set background / color / border-color directly.
   Effect modifiers (.btn--3d/--panel/--hover-fill/--spotlight)
   are pure CSS, driven by currentColor. */


/* ── Base ─────────────────────────────────────────────── */

.btn {
  -moz-appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
  line-height: 1.2;
  margin: 0;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;

  font-family: var(--btn-font, var(--font-label));
  font-size: var(--btn-size, var(--text-base));
  font-weight: var(--btn-weight, var(--weight-heavy));
  letter-spacing: var(--btn-spacing, var(--tracking-label));

  padding: var(--btn-pad-y, 0.75em) var(--btn-pad-x, 1.25em);
  gap: var(--btn-gap, 0.5em);
  border-radius: var(--btn-radius, var(--radius-md));
  border: 1px solid transparent;

  transition: background-color var(--anim-mid) var(--ease-out),
              color var(--anim-mid) var(--ease-out),
              border-color var(--anim-mid) var(--ease-out),
              transform var(--anim-mid) var(--ease-out);
}

.btn:focus:not(:focus-visible) { outline: none; }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 50%, transparent);
}


/* ── Sizes ────────────────────────────────────────────── */

.btn--sm {
  --btn-size: var(--text-sm);
  --btn-pad-y: 0.6em;
  --btn-pad-x: 1em;
}

.btn--nav {
  --btn-size: var(--nav-btn-size, var(--text-sm));
  --btn-pad-y: var(--nav-btn-pad-y, 0.68em);
  --btn-pad-x: var(--nav-btn-pad-x, 1.08em);
}

.btn--lg {
  --btn-size: var(--text-lg);
  --btn-pad-y: 0.85em;
  --btn-pad-x: 1.5em;
}

.btn--full-width { display: flex; width: 100%; }

/* Explicit opt-out of site's --radius (for sites that default to pill/rounded) */
.btn--squared { --btn-radius: 0; }


/* ── Variants ───────────────────────────────────────── */
/* --_btn-bg is an internal ref for effect modifiers (3d/panel/hover-fill)
   to derive shadow/fill colors from the variant's background. */

.btn--primary   { background: var(--surface-accent); color: var(--ink-accent-display);  border-color: var(--surface-accent); --_btn-bg: var(--surface-accent); }
.btn--secondary { background: var(--surface);        color: var(--ink-default-display); border-color: var(--surface);        --_btn-bg: var(--surface); }
.btn--ghost     { background: transparent;           color: var(--ink-display);         border-color: var(--border-strong);  --_btn-bg: var(--ink-display); }

.btn--danger        { background: var(--surface-danger); color: var(--ink-danger-display); border-color: var(--surface-danger); --_btn-bg: var(--surface-danger); }
.btn--danger-border { background: transparent;           color: var(--surface-danger);     border-color: var(--surface-danger); --_btn-bg: var(--surface-danger); }
.btn--danger-ghost  { background: transparent;           color: var(--surface-danger);     border-color: transparent;           --_btn-bg: var(--surface-danger); }


/* ── Effect Modifiers ───────────────────────────────── */


/* 3D isometric lift — face lifts on hover, shadow stays anchored */
.btn--3d {
  --_btn-3d-shadow: oklch(from var(--_btn-bg, var(--accent)) calc(l - 0.15) c h);
  position: relative;
  transform: translate(-2px, -2px);
  box-shadow: 2px 2px 0 var(--_btn-3d-shadow);
  transition: transform var(--anim-mid) var(--ease-out),
              box-shadow var(--anim-mid) var(--ease-out),
              background-color var(--anim-mid) var(--ease-out),
              color var(--anim-mid) var(--ease-out),
              border-color var(--anim-mid) var(--ease-out);
}
@media (hover: hover) {
  .btn--3d:hover {
    transform: translate(-5px, -5px);
    box-shadow: 5px 5px 0 var(--_btn-3d-shadow);
  }
}
.btn--3d:active {
  transform: translate(0, 0);
  box-shadow: 0 0 0 var(--_btn-3d-shadow);
}


/* Panel plunge — face presses into its own shadow on :active */
.btn--panel {
  --_btn-panel-offset: 6px;
  --_btn-panel-shadow: oklch(from var(--_btn-bg, var(--accent)) calc(l * 0.5) c h);
  box-shadow: var(--_btn-panel-offset) var(--_btn-panel-offset) 0 0 var(--_btn-panel-shadow);
  transition: transform var(--anim-fast) var(--ease-out),
              box-shadow var(--anim-fast) var(--ease-out),
              background-color var(--anim-mid) var(--ease-out),
              color var(--anim-mid) var(--ease-out),
              border-color var(--anim-mid) var(--ease-out);
}
.btn--panel:active {
  transform: translate(var(--_btn-panel-offset), var(--_btn-panel-offset));
  box-shadow: 0 0 0 0 var(--_btn-panel-shadow);
}


/* Hover fill — color layer sweeps in from the left */
.btn--hover-fill {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn--hover-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: oklch(from var(--_btn-bg, var(--accent)) calc(l + 0.05) c h);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--anim-mid) var(--ease-out);
  pointer-events: none;
  z-index: -1;
}
.btn--hover-fill:hover::before {
  transform: scaleX(1);
}


/* Cursor spotlight — radial glow tracks --pointer-x/--pointer-y
   (written by pointer-track controller). -1000px start = hidden. */
.btn--spotlight {
  position: relative;
  overflow: hidden;
}
.btn--spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    8em circle at var(--pointer-x, -1000px) var(--pointer-y, -1000px),
    oklch(1 0 0 / 0.15),
    transparent
  );
  opacity: 0;
  transition: opacity var(--anim-mid) var(--ease-out);
  pointer-events: none;
}
.btn--spotlight:hover::after {
  opacity: 1;
}


/* ── Group (Segmented Control) ────────────────────────── */

.button-group {
  display: inline-flex;
  align-items: stretch;
  background: var(--shade);
  border-radius: var(--radius-md);
  gap: 2px;
  padding: 2px;
  width: fit-content;
}
.button-group .btn { border: none; box-shadow: none; }
.button-group .btn:not(.active) { background: transparent; }


/* ── Tag (Badge for NEW / BETA / count) ──────────────── */

.btn__tag {
  display: inline-flex;
  align-items: center;
  padding: 0.1em 0.4em;
  margin-inline-start: 0.5em;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  font-size: 0.75em;
  font-weight: var(--weight-semi);
  opacity: 0.7;
}

/* ── Card ───────────────────────────────────────────
   Flex-column container with locked header/footer and
   body that grows — makes .split-cards align content to
   the bottom when cards wrap to equal height. */

.card {
  display: flex;
  flex-direction: column;
  position: relative;

  background: var(--surface);
  color: var(--ink-body);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  gap: var(--space-2);

  transition: transform var(--anim-fast) var(--ease-out),
              box-shadow var(--anim-fast) var(--ease-out),
              border-color var(--anim-fast) var(--ease-out);
}

.card__header, .card__footer { flex: none; }
.card__body { flex: 1; min-inline-size: 0; min-block-size: 0; }

a.card { text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) {
  a.card:hover { transform: translateY(-2px); }
}


/* Glass — transparent fill + backdrop blur */
.card--glass {
  background: transparent;
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border-color: oklch(from var(--ink-display) l c h / 0.1);
}

/* ── Carousel (Platform Primitive) ─────────────────────── */

.carousel {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.carousel__viewport {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.carousel__viewport::-webkit-scrollbar { display: none; }

.carousel__track {
  display: flex;
}

.carousel__panel {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

/* ── Navigation (Dots) ── */
.carousel__nav-wrap {
  display: flex;
  justify-content: center;
  padding-block: var(--space-4);
}

.carousel__nav {
  display: inline-flex;
  align-items: center;
  gap: var(--carousel-gap, var(--space-2));
  padding: var(--space-2) var(--space-4);
  background: oklch(from var(--ink-display) l c h / 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid oklch(from var(--ink-display) l c h / 0.1);
  border-radius: 999px;
}

.carousel__dot {
  width: var(--carousel-dot-size, 10px);
  height: var(--carousel-dot-size, 10px);
  border-radius: 999px;
  background: var(--carousel-dot-bg, oklch(from var(--ink-display) l c h / 0.2));
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  overflow: hidden;
  transition: width var(--anim-slow) var(--ease-out), background var(--anim-mid) var(--ease-out), scale var(--anim-mid) var(--ease-out), opacity var(--anim-mid) var(--ease-out);
}

.carousel__dot[aria-selected="true"] {
  width: var(--carousel-pill-width, 32px);
  background: var(--carousel-dot-active, var(--accent, var(--ink-display)));
}

/* Progress bar — pure CSS animation, no JS */
.carousel__dot[aria-selected="true"][data-state="playing"]::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: var(--carousel-progress-fill, oklch(1 0 0 / 0.3));
  border-radius: inherit;
  animation: progress-fill linear forwards;
  animation-duration: var(--autoplay-interval, 6000ms);
}

.carousel:hover .carousel__dot[data-state="playing"]::after {
  animation-play-state: paused;
}

/* Edge dots shrink for depth illusion */
.carousel__dot[data-trunc="2"] { scale: 0.7; opacity: 0.5; }
.carousel__dot[data-trunc="3"] { scale: 0.4; opacity: 0.2; }

/* ── Arrows ── */
.carousel__arrow {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: oklch(from var(--ink-display) l c h / 0.05);
  color: var(--ink-display);
  border: none; border-radius: 50%;
  cursor: pointer;
  transition: background var(--anim-mid) var(--ease-out), scale var(--anim-mid) var(--ease-out);
}
.carousel__arrow:hover { background: oklch(from var(--ink-display) l c h / 0.1); scale: 1.05; }

/* ── Dialog ─────────────────────────────────────────── */

dialog { border: none; padding: 0; background: transparent; max-width: none; max-height: none; overflow: hidden; }
html:has(dialog[open]) { overflow: hidden; }
dialog:not([open]) { display: none; }
dialog::backdrop { background: var(--glass-backdrop); backdrop-filter: var(--glass-blur-md); -webkit-backdrop-filter: var(--glass-blur-md); }

.dialog-panel {
  --dialog-edge-reserve: calc(var(--space-4) + var(--space-3));
  padding: 0;
  border-radius: var(--dialog-radius, var(--radius-xl));
  background: var(--surface);
  color: var(--ink-default-body);
  backdrop-filter: var(--glass-blur-lg);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  box-shadow: var(--dialog-shadow, var(--shadow));

  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;

  animation: pop-in-spring var(--anim-slow) var(--ease-spring);
}

.dialog__close {
  position: absolute;
  top: var(--space-4);
  right: var(--dialog-edge-reserve);
  z-index: 10;
  width: calc(var(--1) * 6);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: transparent;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--ink-display);
  cursor: pointer;
  transition: transform var(--anim-mid) var(--ease-spring), background-color var(--anim-mid) var(--ease-out), border-color var(--anim-mid) var(--ease-out);
}
.dialog__close svg { width: 50%; height: 50%; }
@media (hover: hover) {
  .dialog__close:hover { transform: scale(1.1); background-color: var(--shade); border-color: var(--ink-display); }
}
.dialog__close:active { transform: scale(0.9); }
.dialog__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dialog-body { padding: var(--space-6); padding-right: calc(var(--space-6) + var(--dialog-edge-reserve)); flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.dialog-header { padding: 0 0 var(--space-3) 0; margin-bottom: var(--space-3); }
.dialog-title { font-family: var(--font-display, var(--font-body)); font-size: var(--text-2xl); font-weight: var(--weight-label); margin: 0; padding-right: calc(var(--1) * 11); }
.dialog-desc { margin: var(--space-1) 0 0; font-size: var(--text-base); color: var(--ink-body); }
.dialog-footer { padding: var(--space-3) 0 0 0; margin-top: var(--space-5); }

.dialog-fields { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--1) * 2.5) var(--space-3); margin-bottom: var(--space-5); }
.dialog-field--full { grid-column: 1 / -1; }
.dialog-label { display: block; font-size: var(--text-sm); font-weight: var(--weight-label); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-display); margin-bottom: var(--space-1); }
.dialog-input, .dialog-textarea { width: 100%; font-family: var(--font-body); font-size: var(--text-base); color: var(--ink-display); background: var(--shade); border: 1px solid transparent; border-radius: var(--radius-md); padding: calc(var(--1) * 1.75) var(--space-3); transition: background var(--anim-mid), border-color var(--anim-mid); }
.dialog-input:focus, .dialog-textarea:focus { outline: none; background: var(--surface); border-color: var(--ink-display); box-shadow: var(--shadow); }
.dialog-textarea { resize: vertical; }
.dialog-submit { width: 100%; justify-content: center; padding: var(--space-3); font-size: var(--text-sm); }

/* ── Positions ─────────────────────────────────────── */

dialog.modal[open] {
  margin: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  display: grid;
  place-items: center;
}
dialog.modal[open] .dialog-panel {
  width: min(calc(100vw - var(--space-4) * 2), 42rem);
  max-height: 90dvh;
}



/* ── Responsive ────────────────────────────────────── */
@media (max-width: 768px) {
  .dialog-panel { --dialog-edge-reserve: var(--space-4); }
  .dialog-body { padding: var(--space-5); padding-right: calc(var(--space-5) + var(--space-2)); }
  .dialog__close { right: var(--space-4); }
  .dialog-title { font-size: var(--text-xl); padding-right: calc(var(--1) * 8); }
  .dialog-fields { grid-template-columns: 1fr; }
}

/* ── Dropdown ──────────────────────────────────────── */

.dropdown { position: relative; }

.dropdown summary {
  display: flex;
  align-items: center;
  gap: calc(var(--1) * 0.5);
  cursor: pointer;
  list-style: none;
  outline: none;
}
.dropdown summary::-webkit-details-marker { display: none; }
.dropdown summary::marker { content: ""; }

.dropdown[open] .dropdown__chevron {
  transform: rotate(180deg);
  display: inline-block;
}

.dropdown__menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  inline-size: var(--dropdown-width, 16rem);

  background: var(--surface-colored);
  color: var(--ink-colored-body);
  border: 1px solid oklch(from var(--ink-colored-display) l c h / 0.1);

  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);

  border-radius: var(--radius-md);
  padding: calc(var(--1) * 0.5) 0;
  box-shadow: 0 10px 30px oklch(0 0 0 / 0.12);
  z-index: 1020;

  animation: slide-down-fade var(--anim-mid) var(--ease-out);
  transform-origin: top right;
}

.dropdown__item {
  display: block;
  width: 100%;
  padding: calc(var(--1) * 0.75) calc(var(--1) * 1.5);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--ink-colored-body);
  text-decoration: none;
  transition: background-color var(--anim-fast) var(--ease-out), color var(--anim-fast) var(--ease-out);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown__item--wraps {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.dropdown__item:hover {
  color: var(--ink-colored-display);
  background: oklch(from var(--ink-colored-display) l c h / 0.05);
}

.dropdown__item.is-active {
  color: var(--accent);
  font-weight: var(--weight-heavy);
}

/* ── Form States ───────────────────────────────── */
form.form--success > *:not(.form-success-message) {
  display: none !important;
}

.form-success-message {
  display: none;
  opacity: 0;
  padding: 3rem 2rem;
  background: var(--surface-raised, rgba(0,0,0,0.03));
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
  border-radius: 12px;
  text-align: center;
  transition: opacity 0.4s ease;
}

form.form--success .form-success-message {
  display: block;
  opacity: 1;
  animation: form-success-fade-in 0.5s ease forwards;
}

.form-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface-accent);
  color: var(--ink-accent-display);
  margin-bottom: 1rem;
}

.form-success-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink-display, inherit);
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.01em;
}

.form-success-body {
  font-size: 1rem;
  color: var(--ink-body, inherit);
  opacity: 0.8;
  margin: 0;
}

@keyframes form-success-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.form-error-message {
  display: none;
  color: oklch(62% 0.17 25);
  margin-bottom: 1rem;
  font-size: 0.95rem;
  text-align: center;
  padding: 0.75rem;
  background: oklch(62% 0.17 25 / 0.1);
  border-radius: 6px;
}

form.form--error .form-error-message {
  display: block;
}

/* ── Language switcher ─────────────────────────────
   Collapsed: one EN button. Expanded: inline strip of
   language codes that overlays the trigger so opening
   adds zero height (no layout shift).

   Driven by the shared toggle-class controller; markup
   from app/views/components/_translate.html.erb. */

.lang-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: var(--weight-semi);
  line-height: 1;
}

.lang-switch__trigger {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  min-inline-size: 44px;
  justify-content: center;
  gap: calc(var(--1) * 0.2);
  background: none;
  border: none;
  padding: 0 calc(var(--1) * 0.5);
  margin: 0;
  color: oklch(from var(--ink-display) l c h / 0.7);
  cursor: pointer;
  font: inherit;
  touch-action: manipulation;
}
.lang-switch__trigger:hover { color: var(--ink-display); }

.lang-switch__chevron { font-size: 0.85em; opacity: 0.7; }

/* Globe icon paired with the native locale name in the trigger. */
.lang-switch__globe {
  flex-shrink: 0;
  opacity: 0.8;
}

.lang-switch__current {
  font-weight: var(--weight-base);
}

.lang-switch__strip {
  display: none;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  gap: calc(var(--1) * 0.5);
  white-space: nowrap;
}

.lang-switch--static .lang-switch__strip {
  display: inline-flex;
  position: static;
  transform: none;
  align-items: center;
}

.lang-switch--static .lang-switch__trigger {
  display: none;
}

.lang-switch.is-open .lang-switch__trigger { visibility: hidden; }
.lang-switch.is-open .lang-switch__strip   { display: inline-flex; align-items: center; }

.lang-switch__link {
  color: oklch(from var(--ink-display) l c h / 0.6);
  text-decoration: none;
  padding-inline: calc(var(--1) * 0.4);
  transition: color var(--anim-fast) var(--ease-out);
}
.lang-switch__link + .lang-switch__link {
  border-inline-start: 1px solid oklch(from var(--ink-display) l c h / 0.2);
}
.lang-switch__link:hover     { color: var(--ink-display); }
.lang-switch__link.is-active { color: var(--ink-display); }

.lang-switch__close {
  background: none;
  border: none;
  padding: 0 calc(var(--1) * 0.4);
  margin-inline-start: calc(var(--1) * 0.5);
  color: oklch(from var(--ink-display) l c h / 0.7);
  cursor: pointer;
  font-size: 1.75em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.lang-switch__close:hover { color: var(--ink-display); }

/* ── Notice (Form Feedback) ────────────────────────── */
output.notice {
  display: block;
  padding: var(--space-5);
  text-align: center;
  font-size: var(--text-lg);
  font-weight: var(--weight-semi);
  border-radius: var(--radius-md);
  animation: fade-in var(--anim-mid) var(--ease-out);
}

.notice--success {
  background: oklch(from var(--accent) l c h / 0.08);
  color: var(--ink-display);
  border: 1px solid oklch(from var(--accent) l c h / 0.15);
}

.notice--error {
  background: oklch(from var(--surface-danger) l c h / 0.08);
  color: var(--surface-danger);
  border: 1px solid oklch(from var(--surface-danger) l c h / 0.15);
}

/* ── Tags (Inline Pills & Labels) ────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  
  /* Geometry */
  font-family: var(--tag-font, inherit);
  font-size: var(--tag-size, var(--text-sm));
  font-weight: var(--tag-weight, var(--weight-label, 600));
  letter-spacing: var(--tag-spacing, 0.05em);
  text-transform: var(--tag-case, uppercase);
  line-height: 1;
  padding: var(--tag-pad-y, 0.4em) var(--tag-pad-x, 0.8em);
  border-radius: var(--tag-radius, 999px); /* Default pill shape */
  
  /* Paint */
  background: var(--tag-bg, oklch(from var(--ink-display) l c h / 0.08));
  color: var(--tag-ink, var(--ink-display));
  border: 1px solid var(--tag-border, transparent);
}

/* ── Modifiers ── */
.tag--primary {
  --tag-bg: oklch(from var(--accent) l c h / 0.15);
  --tag-ink: var(--accent);
  --tag-border: oklch(from var(--accent) l c h / 0.2);
}

.tag--danger {
  --tag-bg: oklch(from var(--surface-danger) l c h / 0.15);
  --tag-ink: var(--surface-danger);
}

.tag--ghost {
  --tag-bg: transparent;
  --tag-border: oklch(from var(--ink-display) l c h / 0.2);
}
/* ── Footer ─────────────────────────────────────────── */

.footer {
  position: relative;
  overflow: clip;
  display: flex;
  flex-direction: column;

  padding-block: clamp(var(--space-5), 5vw, var(--space-6));
  background: var(--footer-surface-fill, var(--surface));
  color: var(--footer-ink, var(--ink-display));

  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
  box-shadow: inset 0 1px 1px oklch(1 1 1 / 0.15), inset 0 1px 0 oklch(from var(--footer-ink, var(--ink-display)) l c h / 0.05);

  --footer-field-fill: oklch(from var(--footer-ink, var(--ink-display)) l c h / 0.03);
  --footer-field-fill-soft: oklch(from var(--footer-ink, var(--ink-display)) l c h / 0.015);
}

/* ── Main grid ── */
.footer__main { max-inline-size: var(--chrome-max, var(--container-max, 1200px)); width: 100%; margin-inline: auto; padding-inline: clamp(var(--space-3), 5vw, var(--body-gutter, var(--main-gutter, var(--space-4)))); display: grid; grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); gap: clamp(var(--space-5), 5vw, var(--space-8)); align-items: start; }

/* ── Brand ── */
.footer__brand { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__brand-lockup { display: flex; flex-direction: row; align-items: center; gap: var(--space-3); }
.footer__brand-text { display: flex; flex-direction: column; }
.footer__logo { display: block; width: var(--footer-logo-width, auto); height: var(--footer-logo-height, 48px); object-fit: contain; border-radius: var(--footer-logo-radius, 0); background-color: var(--footer-logo-bg, transparent); border: var(--footer-logo-border, none); padding: var(--footer-logo-padding, 0); box-shadow: var(--footer-logo-shadow, none); filter: var(--footer-logo-filter, none); }
.footer__brand-name { margin: 0; font-family: var(--font-label, var(--font-display, var(--font-body))); font-size: clamp(var(--text-lg), 2vw, var(--text-xl)); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-label, -0.01em); line-height: 1.2; }
.footer__brand-sub { font-size: var(--text-sm); color: var(--ink-label); }
.footer__desc { margin: 0; max-inline-size: 36ch; font-size: var(--text-base); line-height: 1.6; color: var(--ink-body); }
.footer__kicker { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-heavy); letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-label); }

/* ── Contact ── */
.footer__contact { display: flex; flex-direction: column; gap: var(--space-4); }
.footer__contact-group { display: flex; flex-direction: column; gap: var(--space-1); }
.footer__contact-items { display: flex; flex-direction: column; gap: 0; }
.footer__contact-line { display: inline-flex; align-items: center; min-block-size: 24px; font-size: var(--text-sm); line-height: 1.4; color: var(--ink-body); text-decoration: none; }
.footer__contact-line--quiet { color: var(--ink-body); max-inline-size: 24ch; line-height: 1.5; margin-bottom: var(--space-1); }
.footer__contact-line--strong { display: block; font-family: var(--font-label, var(--font-display, var(--font-body))); font-size: clamp(var(--text-lg), 2vw, var(--text-xl)); font-weight: var(--weight-semi); letter-spacing: var(--tracking-label, -0.01em); color: var(--footer-accent, var(--ink-display)); line-height: 1.2; max-inline-size: 24ch; text-wrap: balance; white-space: pre-line; }
.footer__contact a:hover, .footer__link:hover, .footer__review:hover { color: var(--footer-link-hover, var(--ink-display)); transition: color 0.3s ease; }
.footer__legal-link:hover { color: var(--footer-legal-hover, var(--ink-display)); transition: color 0.3s ease; }

/* ── Review ── */
.footer__review { display: inline-flex; align-items: center; gap: var(--space-2); inline-size: fit-content; margin-top: var(--space-1); padding: calc(var(--1) * 0.75) calc(var(--1) * 1.25); border-radius: 6px; background: var(--footer-field-fill-soft); color: var(--ink-body); text-decoration: none; box-shadow: inset 0 1px 1px oklch(1 1 1 / 0.1), inset 0 0 0 1px oklch(from var(--ink-display) l c h / 0.04); }
.footer__review:hover { background: var(--footer-field-fill); transform: translateY(-2px); color: var(--ink-display); box-shadow: inset 0 1px 1px oklch(1 1 1 / 0.15), inset 0 0 0 1px oklch(from var(--ink-display) l c h / 0.06), 0 6px 12px -2px oklch(from var(--ink-display) l c h / 0.05); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.footer__review-stars { font-size: var(--text-sm); letter-spacing: 0.1em; color: var(--footer-stars, var(--ink-display)); }
.footer__review-text { font-size: var(--text-sm); font-weight: var(--weight-semi); }

/* ── Columns ── */
.footer__nav { display: grid; grid-template-columns: repeat(var(--footer-link-cols, 3), minmax(0, 1fr)); column-gap: clamp(var(--space-4), 4vw, var(--space-6)); row-gap: var(--space-6); align-items: start; margin-left: auto; width: 100%; }
.footer__nav-group { display: flex; flex-direction: column; gap: calc(var(--1) * 0.5); min-inline-size: 0; }
.footer__group-header { margin: 0; display: flex; align-items: center; justify-content: space-between; padding-block: 2px; }
.footer__group-header span { font-size: var(--text-sm); font-weight: var(--weight-heavy); letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-label); }
.footer__nav-links { display: flex; flex-direction: column; gap: calc(var(--1) * 0.25); }
.footer__link { display: inline-flex; align-items: center; min-block-size: 44px; padding-block: calc(var(--1) * 0.5); font-family: var(--footer-link-font, var(--font-label)); font-size: var(--footer-link-size, var(--text-base)); font-weight: var(--footer-link-weight, normal); letter-spacing: var(--footer-link-spacing, var(--tracking-label)); text-transform: var(--footer-link-case, none); line-height: 1.2; color: var(--ink-body); text-decoration: none; transform-origin: left center; touch-action: manipulation; }
.footer__link:hover { color: var(--footer-link-hover, var(--ink-display)); transform: translateX(3px); transition: color 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }

/* ── Legal ── */
.footer__legal { max-inline-size: var(--chrome-max, var(--container-max, 75rem)); width: 100%; margin-inline: auto; padding-inline: clamp(var(--space-3), 5vw, var(--body-gutter, var(--main-gutter, var(--space-4)))); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4); margin-top: clamp(var(--space-5), 5vw, var(--space-7)); padding-top: var(--space-4); border-top: 1px solid oklch(from var(--ink-display) l c h / 0.04); }
.footer__legal-group { display: flex; align-items: center; gap: var(--space-2); min-inline-size: 0; }
.footer__legal-group--left { justify-content: flex-start; }
.footer__legal-group--center { justify-content: center; }
.footer__legal-group--right { justify-content: flex-end; }
.footer__copy, .footer__legal-links { margin: 0; font-size: var(--text-sm); line-height: 1.3; color: var(--ink-label); }
.footer__legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.footer__legal-link { display: inline-flex; align-items: center; justify-content: center; min-block-size: 44px; color: inherit; text-decoration: none; transition: color 0.3s ease; font-weight: var(--weight-semi); touch-action: manipulation; }
.footer__legal-link:hover { color: var(--ink-display); }

/* ── Responsive ── */
@media (max-width: 720px) {
  .footer__main { grid-template-columns: 1fr; gap: var(--space-4); }
  .footer__nav { margin-left: 0; }
}

@media (max-width: 540px) {
  .footer__nav { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-4); column-gap: var(--space-3); }
  .footer__legal-links { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: center; gap: 0 var(--space-3); }
}

@media (max-width: 360px) {
  .footer__nav { grid-template-columns: 1fr; }
  .footer__legal { grid-template-columns: 1fr; gap: var(--space-3); text-align: center; }
  .footer__legal-group--left, .footer__legal-group--center, .footer__legal-group--right { justify-content: center; }
}

/* ── Hamburger ── */
.nav__hamburger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 0; }
.nav__hamburger-svg { width: 20px; height: 20px; overflow: visible; }
.nav__hamburger-line { 
  fill: none; 
  stroke: var(--hamburger-color, var(--ink)); 
  stroke-width: 2px; 
  stroke-linecap: round; 
  transition: stroke 0.24s, opacity 0.24s; 
}
.nav__hamburger-line.line--bot { stroke: var(--hamburger-color-bottom, var(--hamburger-color, var(--ink))); }

.nav__hamburger[aria-expanded="true"] .line--top { stroke: var(--hamburger-color-active, var(--hamburger-color, var(--ink))); }
.nav__hamburger[aria-expanded="true"] .line--bot { stroke: var(--hamburger-color-active, var(--hamburger-color, var(--ink))); }

@media (max-width: 899px) {
  .nav__hamburger { display: flex; }
}
/* ── Mobile panel (Dropdown Callout) ──
   `.nav-toggle` controller toggles `.nav--open` on the nav element;
   CSS transitions `--open-close` (0 → 1) via @property registration
   over 0.4s at the spring ease curve. Every reader (glass blur,
   opacity, transform) recomputes as the variable interpolates. */
.nav__mobile {
  --surface: oklch(from var(--km-charcoal) l c h / 0.97);
  --open-close: 0;
  --glass-progress: var(--open-close);
  --_glass-fill: pow(var(--glass-progress), var(--glass-fill-curve));
  --_glass-blur: pow(var(--glass-progress), var(--glass-blur-curve));
  --_glass-rim: pow(var(--glass-progress), var(--glass-rim-curve));
  --_glass-shadow: pow(var(--glass-progress), var(--glass-shadow-curve));
  --_mobile-glass-alpha-max: 99%;
  --_mobile-glass-border-alpha-max: 0.16;
  --_mobile-glass-shadow-alpha-max: 0.14;
  position: absolute;
  top: calc(100% + var(--space-2));
  left: var(--body-gutter, var(--space-5));
  right: var(--body-gutter, var(--space-5));
  width: auto;
  max-width: 420px;
  margin-inline: auto;

  /* Glass Callout — uses --surface (installed above) which holds the
     same chrome color the nav uses, so the menu matches it. */
  background: color-mix(in oklch, var(--surface, #fff) calc(var(--_mobile-glass-alpha-max) * var(--_glass-fill)), transparent);
  color: var(--ink-display, #000);
  backdrop-filter: blur(calc(var(--glass-blur-max) * var(--_glass-blur))) saturate(calc(1 + (var(--glass-saturate-max) - 1) * var(--_glass-fill)));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur-max) * var(--_glass-blur))) saturate(calc(1 + (var(--glass-saturate-max) - 1) * var(--_glass-fill)));
  border: 1px solid color-mix(in oklch, var(--ink-display, #000) calc(var(--_mobile-glass-border-alpha-max) * var(--_glass-rim) * 100%), transparent);
  box-shadow: 0 calc(var(--glass-shadow-y-max) * 2 * var(--_glass-shadow)) calc(var(--glass-shadow-blur-max) * 2.2 * var(--_glass-shadow)) oklch(0 0 0 / calc(var(--_mobile-glass-shadow-alpha-max) * var(--_glass-shadow)));
  border-radius: var(--radius-xl);

  box-sizing: border-box;
  padding: var(--space-4) var(--space-4) var(--space-3);
  max-block-size: calc(100dvh - 100px);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 1020;

  transform-origin: top center;
  opacity: clamp(0, var(--open-close), 1);
  visibility: hidden;
  transform: translateY(calc((1 - var(--open-close)) * -10px)) scale(calc(0.985 + (var(--open-close) * 0.015)));
  pointer-events: none;
  transition: --open-close 0.4s var(--ease-spring),
              visibility 0s linear 0.4s;
}

/* Open state — `.nav-toggle` controller adds `.nav--open` on click. */
.nav--open .nav__mobile {
  --open-close: 1;
  visibility: visible;
  pointer-events: auto;
  transition: --open-close 0.4s var(--ease-spring),
              visibility 0s linear 0s;
}

.nav__mobile ul { list-style: none; padding: 0; margin: 0; }
.nav__mobile > ul { padding-top: 0; }
.nav__mobile li { text-align: center; }

.nav__mobile li > a,
.nav__mobile summary {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) 0;
  font-family: var(--nav-mobile-font, var(--font-label));
  font-size: var(--text-xl);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--nav-mobile-spacing, -0.01em);
  text-transform: var(--nav-mobile-case, none);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.nav__mobile li > a:hover,
.nav__mobile summary:hover { 
  opacity: 0.7;
}

.nav__mobile details > summary { position: relative; }
.nav__mobile summary::-webkit-details-marker { display: none; }
.nav__mobile summary::marker { content: ""; }
.nav__mobile summary::after {
  content: "+";
  color: inherit;
  opacity: 0.5;
  font-size: var(--text-2xl);
  font-weight: 300;
  position: static;
  margin-left: var(--space-2);
  line-height: 0.8;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav__mobile details[open] > summary::after { transform: rotate(45deg); opacity: 1; }
.nav__mobile details > ul { padding: 0 0 var(--space-3) var(--space-4); display: none; }
.nav__mobile details[open] > ul { display: block; }
.nav__mobile details > ul a {
  font-family: var(--nav-mobile-sub-font, var(--font-body));
  font-size: var(--text-base);
  color: var(--ink-body);
  padding: var(--space-2) 0;
  text-align: left;
  transition: color 0.2s ease;
}
.nav__mobile details > ul a:hover { 
  color: var(--ink-display, #000); 
}

.nav__mobile-locales { display: flex; flex-direction: column; align-items: center; gap: calc(var(--1) * 0.5); margin-top: var(--space-4); padding: var(--space-4) 0 var(--space-2); border-top: 1px solid color-mix(in oklch, var(--ink-display, #000) 10%, transparent); }
.nav__mobile-locales-label { font-size: var(--text-sm); font-weight: var(--weight-label); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-body); }
.nav__mobile-locales-list { display: flex; gap: var(--space-3); }
.nav__mobile-locale-link { display: inline-flex; align-items: center; justify-content: center; min-block-size: 44px; min-inline-size: 44px; color: var(--ink-body); text-decoration: none; font-size: var(--text-sm); text-transform: uppercase; font-weight: var(--weight-label); letter-spacing: 0.06em; transition: color 0.2s ease; touch-action: manipulation; }
.nav__mobile-locale-link + .nav__mobile-locale-link { border-left: 1px solid color-mix(in oklch, var(--ink-display, #000) 20%, transparent); padding-left: var(--space-3);  }
.nav__mobile-locale-link.is-active, .nav__mobile-locale-link:hover { color: var(--ink-display, #000); }

.nav__mobile-phone { display: block; width: 100%; font-family: var(--font-label); font-size: var(--text-lg); font-weight: var(--weight-semi); line-height: 1.2; color: inherit; text-decoration: none; text-align: center; margin-top: var(--space-3); padding: var(--space-4) 0 var(--space-1); border-top: 1px solid color-mix(in oklch, var(--ink-display, #000) 10%, transparent); transition: opacity 0.2s ease; }
.nav__mobile-phone:hover { opacity: 0.7; }

.nav__mobile-cta { display: flex; width: 100%; justify-content: center; padding: var(--space-4) 0 0; }
.nav__mobile-cta .btn { 
  width: 100%; 
  justify-content: center; 
  --btn-size: var(--text-base); 
  --btn-pad-y: 0.85em; 
}

/* ── Nav ────────────────────────────────────────────
   Scroll-driven glass: transparent at top, fades to full
   glass backdrop at ~84px scroll. Tuned by the glass profile. */

:root {
  --glass-alpha-max: 90%;
  --glass-blur-max: 0px;
  --glass-saturate-max: 1;
  --glass-border-alpha-max: 0.1;
  --glass-shadow-y-max: 4px;
  --glass-shadow-blur-max: 12px;
  --glass-shadow-alpha-max: 0.05;
  --glass-fill-curve: 1.35;
  --glass-blur-curve: 1.1;
  --glass-rim-curve: 0.72;
  --glass-shadow-curve: 1.9;
}

.nav {
  --nav-brand-gap: var(--space-1);
  --nav-brand-mark-size: 34px;
  --nav-brand-name-size: var(--text-sm);
  --nav-brand-sub-size: var(--text-sm);
  --nav-links-gap: var(--space-2);
  --nav-actions-gap: var(--space-2);
  --nav-link-size: var(--text-base);
  --nav-link-weight: var(--weight-body);
  --nav-link-spacing: 0.08em;
  --nav-link-hover: var(--ink-display);
  --nav-btn-size: var(--text-sm);
  --nav-btn-pad-y: 0.62em;
  --nav-btn-pad-x: 1em;
  --glass-progress: var(--scroll);
  --_glass-fill: pow(var(--glass-progress), var(--glass-fill-curve));
  --_glass-blur: pow(var(--glass-progress), var(--glass-blur-curve));
  --_glass-rim: pow(var(--glass-progress), var(--glass-rim-curve));
  --_glass-shadow: pow(var(--glass-progress), var(--glass-shadow-curve));
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  isolation: isolate;
  color: var(--ink-display);
}

.nav {
  animation: nav-glass linear both;
  animation-timeline: scroll();
  animation-range: 0px 64px;
}

.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: color-mix(in oklch, var(--canvas, var(--surface)) calc(var(--glass-alpha-max) * var(--_glass-fill)), transparent);
  backdrop-filter: blur(calc(var(--glass-blur-max) * var(--_glass-blur))) saturate(calc(1 + (var(--glass-saturate-max) - 1) * var(--_glass-fill)));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur-max) * var(--_glass-blur))) saturate(calc(1 + (var(--glass-saturate-max) - 1) * var(--_glass-fill)));
  border-bottom: 1px solid color-mix(in oklch, var(--ink-display) calc(var(--glass-border-alpha-max) * var(--_glass-rim) * 100%), transparent);
  box-shadow: 0 calc(var(--glass-shadow-y-max) * var(--_glass-shadow)) calc(var(--glass-shadow-blur-max) * var(--_glass-shadow)) oklch(0 0 0 / calc(var(--glass-shadow-alpha-max) * var(--_glass-shadow)));
  backface-visibility: hidden;
  transform: translateZ(0);
}


/* Utility bar — language switcher row above the main nav. Right-aligned. */
.nav__utility { box-sizing: border-box; }

.nav__utility-inner {
  box-sizing: border-box;
  max-inline-size: var(--chrome-max, var(--container-max));
  width: 100%;
  margin-inline: auto;
  /* Tight row — just enough vertical space to seat the switcher. */
  block-size: 28px;
  padding-block: 0;
  padding-inline: clamp(var(--space-3), 5vw, var(--body-gutter, var(--main-gutter, var(--space-4))));
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  overflow: visible;
}

.nav__main {
  box-sizing: border-box;
  max-inline-size: var(--chrome-max, var(--container-max));
  width: 100%;
  margin-inline: auto;
  padding-block-start: 0;
  padding-block-end:   var(--space-2);
  padding-inline:      clamp(var(--space-3), 5vw, var(--body-gutter, var(--main-gutter, var(--space-4))));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  position: relative;
}

.nav__brand { 
  display: flex; 
  align-items: center; 
  gap: var(--nav-brand-gap); 
  text-decoration: none; 
  color: inherit; 
  flex-shrink: 0; 
}

.nav__brand-img { 
  display: block; 
  height: var(--nav-brand-mark-size); 
  width: auto; 
  flex-shrink: 0; 
}

.nav__brand-text { display: flex; flex-direction: column; flex-shrink: 0; }
.nav__brand-name {
  font-weight: var(--weight-heavy);
  font-size: var(--nav-brand-name-size);
  line-height: 1.2;
}
.nav__brand-sub { 
  font-size: var(--nav-brand-sub-size); 
  line-height: 1.2;
  opacity: 0.7; 
}

.nav__right-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 auto;
  gap: var(--space-4);
}

.nav__links { 
  display: flex; 
  align-items: center; 
  gap: var(--nav-links-gap);
}

.nav__link { 
  --_link-color: var(--nav-link, var(--ink-body));
  --_link-font: var(--nav-link-font, var(--font-label, inherit));
  --_link-size: var(--nav-link-size);
  --_link-weight: var(--nav-link-weight);
  --_link-spacing: var(--nav-link-spacing);

  color: var(--_link-color); 
  font-family: var(--_link-font); 
  font-size: var(--_link-size); 
  font-weight: var(--_link-weight); 
  letter-spacing: var(--_link-spacing);
  line-height: 1.2;
  
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  border: none;
  cursor: pointer;
  padding-inline: 0; padding-block: var(--space-2);
  text-decoration: underline transparent;
  text-decoration-thickness: var(--nav-link-border-width, 2px);
  text-underline-offset: 0.25em;
  transition: color var(--anim-fast) var(--ease-out), text-decoration-color var(--anim-fast) var(--ease-out);
}

@media (hover: hover) {
  .nav__link:hover { color: var(--nav-link-hover); text-decoration-color: var(--nav-link-hover-border, transparent); }
}
.nav__caret { opacity: 0.5; margin-left: 4px; vertical-align: middle; }

.nav__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  gap: var(--nav-actions-gap);
}

@media (max-width: 899px) {
  .nav__links { display: none; }
  .nav__actions .btn,
  .nav__actions .nav__lang-dropdown { display: none; }
}

@media (min-width: 900px) {
  .nav__mobile { display: none !important; }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .nav__main {
    gap: var(--space-2);
  }
  .nav__links {
    gap: var(--space-2);
  }
  .nav__link {
    --_link-size: var(--nav-link-size-tablet, var(--nav-link-size));
    padding-inline: calc(var(--1) * 0.5);
  }
  .nav__actions {
    gap: var(--space-2);
  }
  .nav__actions .btn {
    --btn-size: var(--text-sm);
    --btn-pad-x: 1em;
    --btn-pad-y: 0.6em;
  }
}

/* ─────────────────────────────────────────────
   Kreidler Mechanical — Site Contract
   Four sections: Typography · Color · Site · Motion
   Dark-default (charcoal) with opt-in cream (.surface-colored) and rust (.surface-accent).
   ───────────────────────────────────────────── */


/* ── Typography ─────────────────────────────── */

@font-face { font-family: 'Oswald'; font-weight: 400; font-display: swap; src: url("/assets/kreidlermechanical/fonts/oswald-400-732abb17.woff2") format('woff2'); }
@font-face { font-family: 'Oswald'; font-weight: 700; font-display: swap; src: url("/assets/kreidlermechanical/fonts/oswald-700-89a6e337.woff2") format('woff2'); }
@font-face { font-family: 'Inter';  font-weight: 400; font-display: swap; src: url("/assets/kreidlermechanical/fonts/inter-400-e18b4e5e.woff2")  format('woff2'); }
@font-face { font-family: 'Inter';  font-weight: 500; font-display: swap; src: url("/assets/kreidlermechanical/fonts/inter-500-659d95ea.woff2")  format('woff2'); }
@font-face { font-family: 'Inter';  font-weight: 700; font-display: swap; src: url("/assets/kreidlermechanical/fonts/inter-700-eeab71fd.woff2")  format('woff2'); }

:root {
  --font-display:    'Oswald', system-ui, sans-serif;
  --font-body:       'Inter',  system-ui, sans-serif;
  --font-label:      var(--font-display);
  --weight-body:     400;
  --weight-contrast: 100;
  --tracking-label:  0.15em;
}


/* ── Color ────────────────────────────────────
   Two hues feed three surfaces. Each surface owns
   a 3-role ink triplet (display / body / label).
   Surface classes (.surface, .surface-colored,
   .surface-accent) install the right triplet into
   the generic --ink-* names that components read.
   Kreidler is dark-default: body inherits charcoal.
   ──────────────────────────────────────────── */

:root {
  --hue:       35; /* rust/safety orange brand */
  --hue-cream: 85;

  /* DEFAULT — charcoal surface, light inks (industrial canvas) */
  --surface:             oklch(0.20 0.01 var(--hue-cream));
  --ink-default-display: oklch(0.96 0.01 var(--hue-cream));
  --ink-default-body:    oklch(0.85 0.02 var(--hue-cream));
  --ink-default-label:   oklch(0.65 0.015 var(--hue-cream));

  /* COLORED — cream surface, dark inks (opt-in polarity flip) */
  --surface-colored:     oklch(0.96 0.01 var(--hue-cream));
  --ink-colored-display: oklch(0.14 0.01 var(--hue-cream));
  --ink-colored-body:    oklch(0.25 0.01 var(--hue-cream));
  --ink-colored-label:   oklch(0.45 0.015 var(--hue-cream));

  /* ACCENT — rust surface, dark inks (CTA / highlight) */
  --surface-accent:      oklch(0.60 0.18 var(--hue));
  --ink-accent-display:  oklch(0.14 0.01 var(--hue-cream));
  --ink-accent-body:     oklch(0.25 0.01 var(--hue-cream));
  --ink-accent-label:    oklch(0.40 0.015 var(--hue-cream));

  /* HIGHLIGHTS — used for links, icons, decorative emphasis.
     --accent is the primary highlight (rust — buttons, bolts, beams).
     --accent-tint is a foreground tint — for Kreidler we reuse the rust
     since the industrial palette doesn't have a secondary accent. */
  --accent:      var(--surface-accent);
  --accent-tint: var(--surface-accent);
}


/* ── Site Parameters ────────────────────────── */

:root {
  --radius:          0;      /* sharp industrial edges */
  --elevation:       1;
  --slope:           3;
  --section-block:   var(--space-7);
  --main-gutter:     var(--space-5);
  --body-gutter:     var(--space-4);
  --container-max:   75rem;
  --card-min:        17.5rem;
  --site-nav-height: 78px;

  /* Nav clearance plus a smaller breathing step so the hero sits
     closer to the chrome without colliding with it. */
  --first-section-block-start: calc(var(--site-nav-height) + var(--space-4));
}



/* ── Motion ─────────────────────────────────── */

:root {
  --motion-tempo:       1;
  --motion-damping:     1.1;
  --motion-range:       1;
  --motion-mass:        1.2;
  --motion-falloff:     2;
  --motion-attenuation: 0.7;
}


/* ── Reset / Base ───────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--site-nav-height);
}

body[data-site-template="kreidlermechanical"] {
  /* ── Cascade entry — installs the default ink triplet on body.
        Surface classes rewrite these inside their scope. ── */
  --ink-display: var(--ink-default-display);
  --ink-body:    var(--ink-default-body);
  --ink-label:   var(--ink-default-label);

  --grain-opacity: 0;
  line-height: 1.45;
  letter-spacing: normal;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;

  /* ── Site palette aliases — kept so SVG fills and decorative
        tokens continue to resolve. Map to contract values. ── */
  --km-charcoal:  var(--surface);
  --km-black:     oklch(0.14 0.01 var(--hue-cream));
  --km-dark:      oklch(0.25 0.01 var(--hue-cream));
  --km-cream:     var(--ink-default-body);
  --km-off-white: var(--ink-default-display);
  --km-white:     oklch(1 0 0);
  --km-accent:    var(--accent);
  --km-accent-label: #ff8a65;

}

body[data-site-template="kreidlermechanical"]::after {
  display: none;
}

body[data-site-template="kreidlermechanical"] .km-capabilities > .contain[id],
body[data-site-template="kreidlermechanical"] .km-section > .contain[id],
body[data-site-template="kreidlermechanical"] .km-lifecycle > .contain[id],
body[data-site-template="kreidlermechanical"] .km-home-cta > .contain[id] {
  scroll-margin-top: var(--space-5);
}


/* ── Utilities ──────────────────────────────── */
.km-text-center { text-align: center; }

/* Global Hairline Schematic Overlay (Background Grid) */
.km-coverage-map {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(var(--km-accent) 1px, transparent 1px),
    linear-gradient(90deg, var(--km-accent) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

/* ── Typography ─────────────────────────────────────────── */
.km-label {
  font-family: var(--font-body);
  font-size: var(--text-sm); /* Micro scale for contrast */
  font-weight: var(--weight-label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--km-accent-label);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.km-label::before {
  content: "";
  display: block;
  width: 24px;
  height: 1px; /* Hairline precision */
  background: currentColor;
}

.km-section-heading {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-heavy);
  line-height: calc(1em + var(--leading));
  letter-spacing: -0.02em;
  color: inherit;
  text-transform: uppercase;
}

.km-section-subtext {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: calc(1em + var(--leading));

  font-weight: var(--weight-body);
  color: var(--ink-body);
}

/* ── Industrial Buttons (Steel Plate) ─────────────── */
body[data-site-template="kreidlermechanical"] {
  --btn-font: var(--font-display);
  --btn-weight: var(--weight-heavy);
  --btn-spacing: 0.1em;
  --btn-pad-y: var(--space-3);
  --btn-pad-x: var(--space-6);
  --btn-radius: 0;
}

body[data-site-template="kreidlermechanical"] .btn--primary {
  --btn-bg: var(--km-accent);
  --btn-ink: var(--km-black);
}

body[data-site-template="kreidlermechanical"] .btn--ghost {
  --btn-bg: var(--km-off-white);
  --btn-ink: var(--km-dark);
}

/* ── Kreidler button effect — structural plate with shadow plunge ──
   At rest: button face with a 6×6 hard-offset shadow below-right
   (the visible "base" the button is mounted on).
   On press: button face translates down-right INTO the shadow,
   shadow shrinks to 0. Face sinks into the panel.
   No hover movement — hover only intensifies hazard stripes. */
body[data-site-template="kreidlermechanical"] .btn {
  position: relative;
  z-index: 1;
  box-shadow: 6px 6px 0 0 oklch(from var(--btn-bg, var(--accent)) calc(l * 0.5) c h);
  transition: transform 0.15s var(--ease-out),
              box-shadow 0.15s var(--ease-out),
              background-color 0.2s var(--ease-out),
              color 0.2s var(--ease-out),
              border-color 0.2s var(--ease-out);
}
body[data-site-template="kreidlermechanical"] .btn:active {
  transform: translate(6px, 6px);
  box-shadow: 0 0 0 0 oklch(from var(--btn-bg, var(--accent)) calc(l * 0.5) c h);
}

/* Hover stripes — hazard pattern intensifies on hover, no motion */
body[data-site-template="kreidlermechanical"] .btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-45deg, currentColor 0, currentColor 3px, transparent 3px, transparent 8px);
  opacity: 0;
  transition: opacity 0.2s var(--ease-out);
  pointer-events: none;
  z-index: 2;
}
@media (hover: hover) {
  body[data-site-template="kreidlermechanical"] .btn:hover::before {
    opacity: 0.12;
  }
}

/* The 4 Turning Bolts — CSS-driven rotation via :hover and :active
   descendant selectors. --press is inherits:false so children can't
   read it via var(); using the parent's :active pseudo-class cascades
   binary state down, and transition on transform smooths the jump. */
body[data-site-template="kreidlermechanical"] .km-bolt {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--km-charcoal);
  border: 1px solid var(--ink-display);
  transform: translateZ(0) rotate(45deg);
  opacity: 0.6;
  transition: transform 0.4s var(--ease-out), opacity 0.3s var(--ease-out);
  will-change: transform, opacity;
}

/* Hover: bolts rotate +90deg (unscrewing) and brighten */
@media (hover: hover) {
  body[data-site-template="kreidlermechanical"] .btn:hover .km-bolt {
    transform: translateZ(0) rotate(135deg);
    opacity: 1;
  }
  /* Alternate corners spin the other direction so the 4 screws
     look like a coordinated set, not all turning the same way */
  body[data-site-template="kreidlermechanical"] .btn:hover .km-bolt-tr,
  body[data-site-template="kreidlermechanical"] .btn:hover .km-bolt-bl {
    transform: translateZ(0) rotate(-45deg);
  }
}

/* Press: bolts turn back to resting position (tighten back down).
   Press selector wins over :hover in CSS cascade ordering. */
body[data-site-template="kreidlermechanical"] .btn:active .km-bolt,
body[data-site-template="kreidlermechanical"] .btn:active .km-bolt-tr,
body[data-site-template="kreidlermechanical"] .btn:active .km-bolt-bl {
  transform: translateZ(0) rotate(45deg);
}

/* Nav buttons get smaller bolts — the 10px default is too chunky
   against the smaller button--nav size. */
body[data-site-template="kreidlermechanical"] .btn--nav .km-bolt {
  width: 6px;
  height: 6px;
  border-width: 0.5px;
}
body[data-site-template="kreidlermechanical"] .btn--nav .km-bolt::after {
  height: 1px;
}
body[data-site-template="kreidlermechanical"] .btn--nav .km-bolt-tl { top: 3px; left: 3px; }
body[data-site-template="kreidlermechanical"] .btn--nav .km-bolt-tr { top: 3px; right: 3px; }
body[data-site-template="kreidlermechanical"] .btn--nav .km-bolt-bl { bottom: 3px; left: 3px; }
body[data-site-template="kreidlermechanical"] .btn--nav .km-bolt-br { bottom: 3px; right: 3px; }

/* Flat Physical Slot */
.km-bolt::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--ink-display);
}

body[data-site-template="kreidlermechanical"] .btn--primary .km-bolt {
  background-color: var(--km-accent);
  border-color: var(--km-black);
  /* Slot ink is dark against the orange button face */
  --ink-display: var(--ink-accent-display);
}

body[data-site-template="kreidlermechanical"] .btn--primary .km-bolt::after {
  background-color: var(--km-black);
}

body[data-site-template="kreidlermechanical"] .btn--ghost .km-bolt {
  background-color: var(--km-off-white);
  border-color: var(--km-dark);
  --ink-display: var(--ink-colored-display);
}

body[data-site-template="kreidlermechanical"] .btn--ghost .km-bolt::after {
  background-color: var(--km-dark);
}

.km-bolt-tl { top: 4px; left: 4px; }
.km-bolt-tr { top: 4px; right: 4px; }
.km-bolt-bl { bottom: 4px; left: 4px; }
.km-bolt-br { bottom: 4px; right: 4px; }

/* Small Bolts */
body[data-site-template="kreidlermechanical"] .btn--sm .km-bolt {
  width: 8px;
  height: 8px;
}
body[data-site-template="kreidlermechanical"] .btn--sm .km-bolt::after {
  height: 1.5px;
}
body[data-site-template="kreidlermechanical"] .btn--sm .km-bolt-tl { top: 2px; left: 2px; }
body[data-site-template="kreidlermechanical"] .btn--sm .km-bolt-tr { top: 2px; right: 2px; }
body[data-site-template="kreidlermechanical"] .btn--sm .km-bolt-bl { bottom: 2px; left: 2px; }
body[data-site-template="kreidlermechanical"] .btn--sm .km-bolt-br { bottom: 2px; right: 2px; }

/* ── Forms (Schematic Inputs) ───────────────────────────── */
.km-form-group {
  margin-bottom: var(--space-4);
  position: relative;
}

.km-form-group .km-label {
  margin-bottom: var(--space-1);
}

.km-input {
  width: 100%;
  background: oklch(from var(--ink-display) l c h / 0.02);
  border: 1px solid oklch(from var(--ink-display) l c h / 0.2);
  color: var(--ink-display);
  padding: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-base);
  border-radius: 0;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.km-input:focus {
  outline: none;
  border-color: var(--km-accent);
  background: oklch(from var(--ink-display) l c h / 0.05);
}

.km-input::placeholder {
  color: var(--ink-label);
  opacity: 0.5;
}

/* Targeting reticles on focus */
.km-form-group::before, 
.km-form-group::after {
  content: "";
  position: absolute;
  width: 8px; 
  height: 8px;
  border: 2px solid transparent;
  pointer-events: none;
  z-index: 2;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.km-form-group::before {
  bottom: -2px; left: -2px;
  transform: translate(-4px, 4px);
}
.km-form-group::after {
  bottom: -2px; right: -2px;
  transform: translate(4px, 4px);
}

.km-form-group:focus-within::before {
  border-bottom-color: var(--km-accent);
  border-left-color: var(--km-accent);
  transform: translate(0, 0);
}
.km-form-group:focus-within::after {
  border-bottom-color: var(--km-accent);
  border-right-color: var(--km-accent);
  transform: translate(0, 0);
}

/* ── Crosshairs & Schematics ────────────────────────────── */
.km-crosshair {
  position: absolute;
  width: 15px;
  height: 15px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.5;
}
.km-crosshair::before,
.km-crosshair::after {
  content: "";
  position: absolute;
  background-color: var(--km-crosshair-ink, var(--border-strong));
}
.km-crosshair::before {
  top: 7px; left: 0; right: 0; height: 1px;
}
.km-crosshair::after {
  top: 0; bottom: 0; left: 7px; width: 1px;
}

/* Positioning helpers — sit just inside the section box, not half off-canvas */
.km-crosshair-tl { top: 0; left: 0; transform: translate(0.35rem, 0.35rem); }
.km-crosshair-tr { top: 0; right: 0; transform: translate(-0.35rem, 0.35rem); }
.km-crosshair-bl { bottom: 0; left: 0; transform: translate(0.35rem, -0.35rem); }
/* ── Nav ───────────────────────────────── */
/* ── Navigation (Reinforced Glass) ─────────── */
body[data-site-template="kreidlermechanical"] .nav {
  --canvas: oklch(from var(--km-charcoal) l c h / 0.85);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 2px solid var(--km-black);
  box-shadow: var(--shadow);
  
  --nav-link: var(--km-cream);
  --nav-link-weight: var(--weight-label);
  --nav-link-spacing: 0.1em;
  --nav-link-case: uppercase;
  --hamburger-color: var(--km-cream);
  
  --nav-mobile-bg: var(--km-dark);
  --nav-mobile-ink: var(--km-off-white);
  --nav-mobile-font: var(--font-display);
}

body[data-site-template="kreidlermechanical"] .nav__utility-inner {
  block-size: 14px;
}

body[data-site-template="kreidlermechanical"] .nav__main {
  padding-block: 0;
}

/* Scroll-driven light catch on the bottom edge */
body[data-site-template="kreidlermechanical"] .nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--km-cream);
  opacity: calc(var(--scroll, 0) * 0.3);
  pointer-events: none;
}

/* ── Logo: original ripped lockup ───────────────────────
   Rendered inside chrome/_nav.html.erb's `.nav__brand` anchor
   (and chrome/_footer.html.erb's `.footer__brand-lockup` div),
   both of which already own their surrounding layout. */

body[data-site-template="kreidlermechanical"] .nav__brand {
  color: var(--km-off-white);
  line-height: 1;
  min-inline-size: 0;
}

.km-logo {
  display: inline-flex;
  align-items: center;
  min-inline-size: 0;
  line-height: 1;
  text-decoration: none;
}

.km-logo__image {
  display: block;
  inline-size: clamp(112px, 10vw, 144px);
  block-size: auto;
  padding: 0.14rem;
  background: var(--km-off-white);
  border: 1px solid oklch(from var(--km-accent) l c h / 0.75);
  border-radius: 4px;
  box-shadow: 0 2px 0 oklch(0 0 0 / 0.35);
}

body[data-site-template="kreidlermechanical"] .nav__links {
  gap: calc(var(--1) * 6);
}

body[data-site-template="kreidlermechanical"] .nav__link {
  position: relative;
  padding-bottom: calc(var(--1) * 1); /* Give room for the beam */
}

/* The Horizontal I-Beam */
body[data-site-template="kreidlermechanical"] .nav__link::after {
  content: "";
  position: absolute;
  left: -4px; /* Extend past text slightly */
  right: -4px;
  bottom: 0;
  height: 6px; /* Thick spine */
  background-color: var(--km-accent);

  /* The left and right vertical flanges (caps) */
  background-image:
    linear-gradient(to right, var(--km-accent) 2px, transparent 2px),
    linear-gradient(to left, var(--km-accent) 2px, transparent 2px);
  background-size: 2px 14px, 2px 14px;
  background-position: left center, right center;
  background-repeat: no-repeat;

  /* Make the flanges taller than the spine */
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box, border-box;

  transform: scaleX(0);
  transform-origin: center; /* Snap out from center like a heavy latch */
  transition: transform 0.2s ease;
}

body[data-site-template="kreidlermechanical"] .nav__link:hover { color: var(--km-off-white); }
body[data-site-template="kreidlermechanical"] .nav__link:hover::after { transform: scaleX(1); }

/* ── Footer ────────────────────────────── */
body[data-site-template="kreidlermechanical"] .footer {
  --footer-surface-fill: oklch(from var(--km-charcoal) l c h / 0.85);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);

  --footer-block: var(--space-8);
  border-top: 4px solid var(--km-black);
  box-shadow: 0 -12px 24px -12px oklch(0 0 0 / 0.4);
}

/* Footer logo — chrome/_footer.html.erb wraps the logo partial in
   .footer__brand-lockup, so we target that wrapper to size the
   footer instance down from the nav size. */
body[data-site-template="kreidlermechanical"] .footer__brand-lockup {
  display: flex;
  align-items: center;
}

body[data-site-template="kreidlermechanical"] .footer__brand-lockup .km-logo {
  max-inline-size: 100%;
}

body[data-site-template="kreidlermechanical"] .footer__brand-lockup .km-logo__image {
  inline-size: min(14rem, 100%);
  padding: 0.2rem;
}

/* ── Footer link hover — chrome footer class names ── */
body[data-site-template="kreidlermechanical"] .footer__link:hover {
  color: var(--km-accent);
}

/* ── Home ──────────────────────────────── */
/* ── Hero (Dark & Calibrated) ────────────────────────────── */
.km-hero {
  position: relative;
  min-height: min(54rem, 92svh);
  padding-block-start: clamp(4rem, 6vw, 5rem);
  display: flex;
  align-items: center;
  border-bottom: 1px solid oklch(from var(--ink-display) l c h / 0.1);
  overflow: hidden;
}

.km-hero__shell,
.km-capabilities__shell,
.km-section__shell,
.km-lifecycle__shell,
.km-home-cta__shell {
  position: relative;
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(var(--space-3), 5vw, var(--main-gutter));
  width: 100%;
}

.km-hero__shell {
  z-index: 2;
}

.km-hero__inner {
  --split: 7fr 5fr;
  --split-gap: var(--space-8);
  height: 100%;
  position: relative;
}

.km-hero__inner::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: oklch(from var(--ink-display) l c h / 0.1);
}

.km-hero__content {

  position: relative;
  z-index: 2;
}

.km-hero__content { --flow-space: var(--space-4); }

.km-hero__headline {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: var(--weight-heavy);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-display);
  text-transform: uppercase;
}

.km-hero__body {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  max-inline-size: 42rem;
  color: var(--ink-body);
  line-height: calc(1em + var(--leading));
  font-weight: var(--weight-body);
}

.km-hero__actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .km-hero__content { text-align: center; }
  .km-hero__actions { justify-content: center; }
}

.km-hero__visual {
  position: relative;
  height: 100%;
  width: 100%;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hero Blueprint SVG — scaled up and anchored to the right edge so
   the crane schematic reads monumentally, bleeding past the right side
   of its split column for a full-bleed industrial effect. */
.km-hero__blueprint {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 14px 18px oklch(from var(--km-black) l c h / 0.42));
  transform-origin: right center;
  transform: translateZ(0) scale(1.4);
}

@media (max-width: 767px) {
  .km-hero__visual { min-height: 280px; }
  .km-hero__blueprint { transform: translateZ(0) scale(1); }
}

/* ── Stats Bar (Data Output) ─────────────────────────────── */
.km-stats {
  --section-block: var(--space-6);
  background: var(--km-black);
  border-bottom: 1px solid oklch(from var(--ink-display) l c h / 0.15);
}

.km-stats__grid {
  --card-min: 200px;
  gap: 0;
  border-left: 1px solid oklch(from var(--ink-display) l c h / 0.15);
}

.km-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-5);
  border-right: 1px solid oklch(from var(--ink-display) l c h / 0.15);
  position: relative;
}

.km-stat__value {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-heavy);
  color: var(--km-off-white);
  line-height: 1;
  letter-spacing: -0.02em;
}

.km-stat__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--km-accent);
}

/* ── Structural Lattice (Equipment Matrix) ─────────────────── */
.km-capabilities {
  /* Background + ink come from .surface-colored class on the section template. */
  position: relative;
}

.km-structural-lattice {
  --card-min: 20rem;
  /* Thick structural gaps acting as the underlying steel framework */
  gap: calc(var(--1) * 1);
  background: var(--km-charcoal); /* The dark steel frame showing through */
  padding: 8px; /* Outer frame */
  position: relative;
  --elevation: 2;
  box-shadow: var(--shadow);
}

.km-structural-panel {
  background: var(--km-off-white);
  padding: var(--space-5) var(--space-4);
  position: relative;
  transition: transform 0.2s ease, background-color 0.2s ease;
  z-index: 1;
}

.km-structural-panel:hover {
  background: var(--km-white);
  transform: scale(0.99); /* Press in slightly on hover */
}

/* The 4 Corner Nodes / Rivets bolting the panel to the lattice */
.km-structural-panel__nodes span {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--km-charcoal);
  border-radius: 50%;
  opacity: 0.5;
}
.km-structural-panel__nodes span:nth-child(1) { top: 12px; left: 12px; }
.km-structural-panel__nodes span:nth-child(2) { top: 12px; right: 12px; }
.km-structural-panel__nodes span:nth-child(3) { bottom: 12px; left: 12px; }
.km-structural-panel__nodes span:nth-child(4) { bottom: 12px; right: 12px; }

.km-structural-panel__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-heavy);
  text-transform: uppercase;
  color: var(--ink-display);
  line-height: calc(1em + var(--leading));
  letter-spacing: -0.02em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-block-size: auto;
  margin-block-end: var(--space-2);
}

.km-structural-panel__body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--ink-body);
  line-height: calc(1em + var(--leading));
  text-wrap: pretty;
}

/* Inner mechanical border snap on hover */
.km-structural-panel::after {
  content: "";
  position: absolute;
  inset: var(--space-3);
  border: 1px solid var(--km-accent);
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.km-structural-panel:hover::after {
  opacity: 1;
  transform: scale(1);
}

/* ── Lifecycle Steps (Linear Track) ───────────────────────── */
.km-lifecycle {
  background: var(--km-dark);
  position: relative;
}

/* ── Vertical Timeline (Assembly Rail) ──────────────────
   ERB structure:
     .km-timeline
       .km-step.km-step--left|right
       .km-step__marker
       … repeat
   Flex column; central rail via ::before; steps alternate
   left/right via align-self; markers centered on the rail. */
.km-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.km-timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--km-accent);
  transform: translateX(-50%);
  z-index: 0;
}

.km-step {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  padding: var(--space-5);
  border: 1px solid oklch(from var(--ink-display) l c h / 0.12);
  background: oklch(from var(--km-black) l c h / 0.4);
}

/* Bolt head — square, centered on the rail between steps */
.km-step__marker {
  position: relative;
  z-index: 2;
  align-self: center;
  inline-size: 18px;
  block-size: 18px;
  background: var(--km-accent);
}

/* Tablet+: steps alternate left / right with the rail between them.
   On mobile the timeline is a single-column stack — all steps full
   width, rail hidden, markers centered. */
@media (max-width: 767px) {
  .km-timeline::before { display: none; }
  .km-step--left,
  .km-step--right { text-align: left; }
}

@media (min-width: 768px) {
  .km-step {
    inline-size: calc(50% - var(--space-6));
  }
  .km-step--left {
    align-self: flex-start;
    text-align: right;
  }
  .km-step--right {
    align-self: flex-end;
    text-align: left;
  }
}

.km-step__number {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-label);
  color: var(--km-accent);
  line-height: 1;
  letter-spacing: -0.02em;
  display: block;
}

.km-step__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-label);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: calc(1em + var(--leading));
}

.km-step__body {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: calc(1em + var(--leading));
  color: var(--ink-body);
}

/* Mobile: rail on left */


/* ── OSHA & Maintenance Services ────────────────────────── */
.km-osha-header .km-section-heading {
  font-size: var(--text-3xl);
}

.km-osha-services {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid oklch(from var(--ink-display) l c h / 0.1);
  position: relative;
}

/* OSHA card grid — standard platform .split-cards flex wrap. Cross-card
   alignment comes from line-clamping the title to 2 lines so every
   card's title area is identical height regardless of content length.
   Bodies start at the same Y across every card. */
.km-osha-grid {
  --card-min: 17.5rem;
  --split-gap: var(--space-3);
  background: var(--km-dark);
  padding: var(--space-3);
  border: 4px solid var(--km-black);
  --elevation: 3;
  box-shadow: var(--shadow);
}

.km-osha-card {
  background: var(--km-charcoal);
  padding: var(--space-5);
  border: 1px solid oklch(from var(--ink-display) l c h / 0.1);
}

/* Inner dashed frame — rivet/template look */
.km-osha-card::before {
  content: "";
  position: absolute;
  inset: var(--space-2);
  border: 1px dashed oklch(from var(--ink-display) l c h / 0.2);
  pointer-events: none;
}

.km-osha-card__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-heavy);
  text-transform: uppercase;
  color: var(--km-accent);
  line-height: calc(1em + var(--leading));
  letter-spacing: -0.02em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-block-size: 2lh;
}

.km-osha-card__body {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--ink-body);
  line-height: calc(1em + var(--leading));
}

/* ── Split Sections (Measurement Nodes) ─────────────────── */
.km-section {
  position: relative;
}

.km-section__inner {
  --split: 1fr 1fr;
  --split-gap: var(--space-6);
  position: relative;
}

.km-section__text { }

.km-section-lists {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}

.km-section-list {
  position: relative;
  padding: var(--space-3);
  background:
    linear-gradient(135deg, oklch(from var(--km-accent) l c h / 0.14), transparent 42%),
    oklch(from var(--km-black) l c h / 0.38);
  border: 1px solid oklch(from var(--km-accent) l c h / 0.28);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.04);
}

.km-section-list__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-heavy);
  line-height: 1;
  color: var(--km-off-white);
  text-transform: uppercase;
}

.km-section-list__items {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--1) * 1.2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.km-section-list__items li {
  padding: calc(var(--1) * 0.65) calc(var(--1) * 1.1);
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: var(--weight-label);
  line-height: 1.1;
  color: var(--km-cream);
  text-transform: uppercase;
  border: 1px solid oklch(from var(--km-cream) l c h / 0.18);
  background: oklch(from var(--km-charcoal) l c h / 0.62);
}

/* Kreidler sections: default platform --flow-space (space-2) is too
   tight for Kreidler's heavy typography. Apply space-5 across every
   .flow container inside a kreidler section — outer contain.flow,
   inner osha-services flow, and any other nested flows. The .flow
   rule's own --flow-space: space-2 is (0,1,0); this is (0,2,0) and
   wins regardless of nesting depth. */
body[data-site-template="kreidlermechanical"] .flow {
  --flow-space: var(--space-5);
}

/* Exception: header-level flows (eyebrow + heading) stay tight so
   the eyebrow doesn't float detached from its heading. */
body[data-site-template="kreidlermechanical"] .flow.km-section__text,
body[data-site-template="kreidlermechanical"] .flow.km-hero__content {
  --flow-space: var(--space-2);
}
body[data-site-template="kreidlermechanical"] .km-hero__content {
  --flow-space: var(--space-4);
}

.km-section__media {
  background: var(--km-charcoal);
  position: relative;
  border: 1px solid oklch(from var(--ink-display) l c h / 0.15);
  padding: var(--space-2); /* Frame within a frame calibration */
}

/* Base image styling — descendant selector so it matches both bare <img>
   and <img> nested inside a <picture> wrapper. */
.km-section__media img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  filter: grayscale(50%);
}

/* Dual Media Layout (Diagonal Stack) */
.km-section__dual-stack {
  width: 100%;
  aspect-ratio: 1; /* A square container to hold the diagonal stack */
  position: relative;
}

.km-dual-stack__main {
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  filter: grayscale(60%);
  border: 12px solid var(--km-charcoal);
  --elevation: 2;
  box-shadow: var(--shadow);
  z-index: 1;
}

.km-dual-stack__inset {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 80%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border: 12px solid var(--km-cream);
  --elevation: 4;
  box-shadow: var(--shadow);
  filter: grayscale(10%) contrast(1.1);
  z-index: 2;
}

.km-section__media::after {
  content: "";
  position: absolute;
  inset: var(--space-2);
  border: 1px solid oklch(from var(--ink-display) l c h / 0.1);
  pointer-events: none;
  z-index: 2; /* Below the inset image z-index of 5 */
}

/* Coverage Map Graphic */
.km-section__media--coverage {
  aspect-ratio: 4/3;
  background: var(--km-black);
  border-color: var(--km-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.km-us-map {
  width: 90%;
  height: 90%;
  display: block;
  overflow: visible;
}

.km-us-perimeter {
  /* Heavy physical shadow so the country hovers off the dark canvas */
  filter: drop-shadow(0 20px 20px oklch(from var(--km-black) l c h / 0.8));
}

.km-us-map circle {
  opacity: 0.8;
}

/* ── Home CTA ───────────────────────────────────────────── */
.km-home-cta {
  border-top: 1px solid oklch(from var(--ink-display) l c h / 0.15);
}

.km-home-cta__inner {
  --split: 1fr 1fr;
  --split-gap: var(--space-6);
  align-items: start;
  position: relative;
}

.km-home-cta__text {
  display: flex;
  flex-direction: column;
  justify-content: center;

}

.km-contact-info {
  font-family: var(--font-body);
  line-height: calc(1em + var(--leading));
  font-size: var(--text-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.km-contact-info p {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  border-bottom: 1px dashed oklch(from var(--ink-display) l c h / 0.2);
  padding-bottom: var(--space-1);
}

.km-contact-info a {
  color: var(--km-accent);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: var(--weight-label);
  letter-spacing: 0.05em;
}

.km-contact-info a:hover {
  color: var(--km-off-white);
}

/* ── Legal / Privacy — Industrial frame treatment ────────
   Applies the kreidler industrial look to the shared
   `components/_legal_page.html.erb` partial so the privacy
   page reads like the rest of the site: black frame, dashed
   rivets, orange header underline, uppercase display type. */

body[data-site-template="kreidlermechanical"] .legal-page {
  min-height: 100svh;
  position: relative;
}

body[data-site-template="kreidlermechanical"] .legal-page__frame {
  position: relative;
  background: var(--km-black);
  border: 4px solid var(--km-charcoal);
  padding: var(--space-8);
  --elevation: 3;
  box-shadow: var(--shadow);
}

/* Inner dashed rivet border */
body[data-site-template="kreidlermechanical"] .legal-page__frame::before {
  content: "";
  position: absolute;
  inset: var(--space-3);
  border: 1px dashed oklch(from var(--ink-display) l c h / 0.1);
  pointer-events: none;
}

body[data-site-template="kreidlermechanical"] .legal-page__header {
  margin-bottom: var(--space-7);
  border-bottom: 4px solid var(--km-accent);
  padding-bottom: var(--space-3);
}

body[data-site-template="kreidlermechanical"] .legal-page__header h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-heavy);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-1);
}

body[data-site-template="kreidlermechanical"] .legal-page__updated {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--km-accent);
  font-weight: var(--weight-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body[data-site-template="kreidlermechanical"] .legal-page__section {
  margin-bottom: var(--space-6);
  color: var(--ink-body);
}

body[data-site-template="kreidlermechanical"] .legal-page__section h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-label);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

body[data-site-template="kreidlermechanical"] .legal-page__section p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: calc(1em + var(--leading));
}