/* Thermal spa in the Clove kit: all CSS in load order. The kit is chosen by data-kit="layer-clove" data-family="layer" data-layer3d="dome" data-tabs="pill" data-tab-motion="slide" data-switch="dial" on <html>. */

/* ---------- glass-tokens.css ---------- */
/* =====================================================================
   GLASS FAMILY - BASE DESIGN TOKENS
   Every value was tuned by eye on real glass compositions.
   Components never hard-code these numbers: they reference the tokens.

   Kit themes (theme.css) override tokens inside
   [data-kit="<id>"]. The selector below is ":root, [data-kit]" so every
   calculated token (shadows, fills, rims) is recalculated for each kit.

   Knobs a theme usually changes:
     colours       --color-primary / -light / -deep, --color-secondary..., neutrals, card tints
     shape         --radius-control (999px = pill), --radius-box / -menu / -card
     z-height      --elevation (shadow distance), --depth-scale (glass thickness)
     type          --font-sans, --font-display, --tracking-*, --weight-control
     environment   --page-bg, --blob-*

   Light model (same everywhere): light comes from the TOP-LEFT,
   shadows and glass thickness fall to the BOTTOM-RIGHT.
   Colours used inside rgba() are "r, g, b" triplets: rgba(var(--color-primary), .5)
   ===================================================================== */

:root, [data-kit] {
  /* ---------------------------------------------------------------
     COLOUR - base values
     --------------------------------------------------------------- */
  --color-ink:          #24212b;
  --color-ink-soft:     #55505e;
  --color-placeholder:  #45404d;
  --color-on-tinted:    #ffffff;
  --color-success:      #3fbf68;

  --color-primary:         120, 80, 245;
  --color-primary-light:   178, 140, 255;
  --color-primary-deep:    80, 45, 200;
  --color-secondary:       50, 185, 175;
  --color-secondary-light: 130, 230, 220;
  --color-secondary-deep:  20, 130, 125;
  --color-neutral-shade:      70, 50, 90;    /* shadow colour for uncoloured glass */
  --color-neutral-shade-deep: 45, 30, 65;

  --color-card-tint:   170, 225, 232;
  --color-card-tint-2: 190, 205, 240;
  --color-card-rim:    235, 250, 252;
  --color-card-halo:   90, 190, 210;
  --color-card-shade:  60, 90, 110;

  --iridescent: conic-gradient(from 90deg, #9be7f2, #b69bff, #f7a8d8, #ffe1a8, #9be7f2);
  --iridescent-linear: linear-gradient(90deg, #9be7f2, #b69bff 45%, rgba(255,255,255,.75));

  /* ---------------------------------------------------------------
     COLOUR - derived (themes normally leave these alone)
     --------------------------------------------------------------- */
  --color-accent-text: rgb(var(--color-primary-deep));   /* coloured text: ghost button, selected option, links */

  --fill-primary:
    radial-gradient(50% 32% at 50% 18%, rgba(255,255,255,.45), rgba(255,255,255,0)),
    linear-gradient(180deg, rgba(var(--color-primary-light), calc(.74 * var(--tint-opacity))) 0%,
                    rgba(var(--color-primary), calc(.72 * var(--tint-opacity))) 55%,
                    rgba(var(--color-primary-deep), calc(.66 * var(--tint-opacity))) 100%);
  --fill-secondary:
    radial-gradient(50% 32% at 50% 18%, rgba(255,255,255,.45), rgba(255,255,255,0)),
    linear-gradient(180deg, rgba(var(--color-secondary-light), calc(.74 * var(--tint-opacity))) 0%,
                    rgba(var(--color-secondary), calc(.72 * var(--tint-opacity))) 55%,
                    rgba(var(--color-secondary-deep), calc(.66 * var(--tint-opacity))) 100%);

  --rim-primary:         rgba(var(--color-primary-light), .55);
  --rim-secondary:       rgba(var(--color-secondary-light), .55);
  --edge-glow-primary:   color-mix(in srgb, rgb(var(--color-primary-light)) 25%, rgba(255, 255, 255, .92));
  --edge-halo-primary:   rgba(var(--color-primary), .8);
  --edge-glow-secondary: color-mix(in srgb, rgb(var(--color-secondary-light)) 25%, rgba(255, 255, 255, .92));
  --edge-halo-secondary: rgba(var(--color-secondary), .8);
  --edge-glow-neutral:   rgba(255, 255, 255, .92);
  --edge-halo-neutral:   rgba(255, 255, 255, .8);

  --accent-gradient: linear-gradient(90deg, rgb(var(--color-primary-light)), rgb(var(--color-primary)));
  --accent-solid:    linear-gradient(160deg, rgb(var(--color-primary)), rgb(var(--color-primary-deep)));

  /* ---------------------------------------------------------------
     TYPE
     --------------------------------------------------------------- */
  --font-sans:    "Gabarito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-sans);
  --text-sm:   13.5px;
  --text-md:   15.5px;
  --text-lg:   16px;
  --text-title: 18px;
  --text-display: 26px;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-control: 500;          /* buttons, tabs */
  --tracking-display: -.025em;    /* headings: tighter */
  --tracking-control: .015em;     /* buttons, tabs, field text */
  --tracking-caps:    .14em;      /* small uppercase labels: wide */
  --case-control:     none;       /* uppercase = buttons and tabs in capitals */

  /* ---------------------------------------------------------------
     SHAPE + SIZE
     --------------------------------------------------------------- */
  --radius-pill:    999px;
  --radius-control: 999px;   /* buttons, fields, switch, tabs. 999px = fully round */
  --radius-box:     8px;     /* checkbox */
  --radius-tile:    12px;
  --radius-menu:    20px;    /* textarea, dropdown menu */
  --radius-card:    26px;

  /* SHAPE - what border-radius actually uses. Defaults follow the radius tokens.
     Organic / irregular kits override these with multi-value radii
     (e.g. "28px 6px 28px 6px" or "46% 54% 42% 58% / 58% 44% 56% 42%").
     The --radius-* tokens stay single values: they size the glint arc. */
  --shape-control: var(--radius-control);
  --shape-round:   min(var(--radius-control), 50%);
  --shape-inner:   max(calc(var(--radius-control) - 4px), 3px);
  --shape-box:     var(--radius-box);
  --shape-menu:    var(--radius-menu);
  --shape-card:    var(--radius-card);
  --radius-panel:   34px;

  --size-control-lg: 58px;
  --size-control-md: 54px;
  --size-control-sm: 48px;

  /* ---------------------------------------------------------------
     Z-HEIGHT
     --------------------------------------------------------------- */
  --elevation:   1;   /* how high elements float: scales every shadow distance and softness */
  --depth-scale: 1;   /* how thick the glass is: scales the 3D wall and bottom rim */

  /* ---------------------------------------------------------------
     GLASS SURFACE
     --------------------------------------------------------------- */
  --glass-blur-see-through: 3px;
  --glass-blur-soft:        10px;
  --glass-blur-panel:       22px;
  --glass-saturate:         160%;

  --tint-opacity:      1;     /* how strongly coloured glass is tinted (lower = more see-through colour) */
  --glass-clear-alpha: .16;   /* how milky clear glass is (0 = fully transparent) */
  --glass-fill-clear:  rgba(255, 255, 255, var(--glass-clear-alpha));
  --glass-fill-faint:  rgba(255, 255, 255, .07);
  --glass-fill-chip:   rgba(255, 255, 255, .30);
  --glass-fill-card:   linear-gradient(160deg, rgba(var(--color-card-tint), calc(.2 * var(--tint-opacity))), rgba(var(--color-card-tint-2), calc(.12 * var(--tint-opacity))));

  --glass-rim-width:  1px;
  --glass-rim-clear:  rgba(255, 255, 255, .65);
  --glass-inner-light:
    inset 0 1.5px 0 rgba(255,255,255,.9),
    inset 0 calc(-1px * var(--depth-scale)) 0 rgba(255,255,255,.35),
    inset 0 0 18px rgba(255,255,255,.25);

  /* ---------------------------------------------------------------
     GLASS SHADOW
     --------------------------------------------------------------- */
  --shadow-rim-width: 3px;

  --shadow-offset-x-xs: calc(5px * var(--elevation));   --shadow-offset-y-xs: calc(7px * var(--elevation));
  --shadow-offset-x-sm: calc(12px * var(--elevation));  --shadow-offset-y-sm: calc(18px * var(--elevation));
  --shadow-offset-x-md: calc(14px * var(--elevation));  --shadow-offset-y-md: calc(20px * var(--elevation));
  --shadow-offset-x-lg: calc(16px * var(--elevation));  --shadow-offset-y-lg: calc(24px * var(--elevation));
  --shadow-offset-x-xl: calc(18px * var(--elevation));  --shadow-offset-y-xl: calc(26px * var(--elevation));
  --shadow-offset-x-panel: calc(26px * var(--elevation)); --shadow-offset-y-panel: calc(36px * var(--elevation));

  --shadow-soft-xs:      calc(2.5px * var(--elevation));
  --shadow-soft-defined: calc(4px * var(--elevation));
  --shadow-soft-md:      calc(5px * var(--elevation));
  --shadow-soft-card:    calc(7px * var(--elevation));
  --shadow-soft-panel:   calc(14px * var(--elevation));

  --shadow-tinted-fill:    .32;  --shadow-tinted-edge:    .50;
  --shadow-clear-fill:     .26;  --shadow-clear-edge:     .45;
  --shadow-colour-fill:    .28;  --shadow-colour-edge:    .48;
  --shadow-container-fill: .10;  --shadow-container-edge: .22;
  --shadow-track-fill:     .10;  --shadow-track-edge:     .42;
  --shadow-ring-fill:      .03;  --shadow-ring-edge:      .32;

  /* ---------------------------------------------------------------
     SOLID (opaque) ELEMENTS
     --------------------------------------------------------------- */
  --solid-ink:         var(--color-ink);           /* text and icons on the white solid pieces (dark kits: dark) */
  --solid-ink-soft:    var(--color-ink-soft);
  --solid-placeholder: var(--color-placeholder);
  --panel-rgb:         255, 255, 255;              /* floating panels (menu, tooltip, dialog, toast): milky white */
  --panel-alpha:       1;                          /* scales every panel's opacity (dark kits: denser) */
  --solid-fill:        linear-gradient(180deg, #ffffff, #efeaef);
  --solid-fill-field:  linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,245,248,.92));
  --solid-fill-domed:
    radial-gradient(70% 85% at 46% 42%, #ffffff 0%, rgba(255,255,255,.6) 35%, rgba(255,255,255,0) 75%),
    linear-gradient(145deg, #fbfafb 0%, #efebf1 55%, #e2dce6 100%);
  --solid-domed-inner:
    inset 1px 1.5px 0 #fff,
    inset 0 0 7px rgba(var(--color-neutral-shade), .08),
    inset -1px -2px 3px rgba(var(--color-neutral-shade), .09);

  --solid-shadow:
    calc(10px * var(--elevation)) calc(16px * var(--elevation)) calc(14px * var(--elevation)) rgba(var(--color-neutral-shade), .22);
  --solid-shadow-on-glass:
    calc(6px * var(--elevation)) calc(12px * var(--elevation)) calc(14px * var(--elevation)) rgba(var(--color-neutral-shade-deep), .30);
  --solid-shadow-tile:
    calc(6px * var(--elevation)) calc(10px * var(--elevation)) calc(12px * var(--elevation)) rgba(var(--color-neutral-shade-deep), .28);
  --solid-shadow-accent:
    calc(6px * var(--elevation)) calc(10px * var(--elevation)) calc(14px * var(--elevation)) rgba(var(--color-primary-deep), .45);
  --solid-shadow-in-track:
    var(--shadow-offset-x-md) var(--shadow-offset-y-md) calc(13px * var(--elevation)) 4px rgba(var(--color-neutral-shade-deep), .46);
  --solid-shadow-small:
    calc(6px * var(--elevation)) calc(10px * var(--elevation)) calc(10px * var(--elevation)) rgba(var(--color-neutral-shade), .26);

  /* ---------------------------------------------------------------
     GLINT / SHADOW GLINT / EDGE GLOW / 3D DEPTH
     --------------------------------------------------------------- */
  --glint-width:  1.5px;
  --glint-inset:  3px;
  --glint-color:  rgba(255, 255, 255, .95);
  --glint-halo:   2px;
  --glint-arc:    conic-gradient(transparent 105deg, #000 135deg, transparent 165deg);

  --shadow-glint-width:     3px;
  --shadow-glint-color:     rgba(255, 255, 255, .65);
  --shadow-glint-blur:      2.5px;
  --shadow-glint-distance:  .35;
  --shadow-glint-pressed:   .12;
  --shadow-glint-arc:       conic-gradient(transparent 100deg, #000 135deg, transparent 170deg);

  --edge-glow-width: 1.5px;
  --edge-glow-inset: 1.5px;
  --edge-glow-halo:  1.5px;
  --edge-glow-stretches:
    radial-gradient(14% 60% at 14% 0%, #000, transparent);

  --depth-offset-x: calc(.7px * var(--depth-scale));
  --depth-offset-y: calc(1px * var(--depth-scale));
  --depth-width:    calc(1.5px * var(--depth-scale));
  --depth-width-ring: 3px;
  --depth-blur:     .4px;
  --depth-fill: linear-gradient(135deg, rgba(255,255,255,.12) 25%, rgba(255,255,255,.6) 100%);
  --depth-bottom-rim: calc(3px * var(--depth-scale));   /* bright bottom band inside coloured glass */

  /* ---------------------------------------------------------------
     INTERACTION
     --------------------------------------------------------------- */
  --hover-brightness:   1.05;
  --hover-content-scale: 1.08;
  --press-brightness:   .95;
  --press-content-scale: 1.02;
  --press-shadow-pull:  .35;
  --press-inner-shadow: inset 3px 4px 9px;
  --press-inner-alpha:  .45;

  --motion-press:  .12s ease;
  --motion-hover:  .2s ease;
  --motion-slide:  .3s ease;
  --motion-switch: .25s ease;

  /* ---------------------------------------------------------------
     ENVIRONMENT (glass only looks right on colour)
     --------------------------------------------------------------- */
  --page-bg:
    linear-gradient(115deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 45%),
    linear-gradient(160deg, #efe7e3 0%, #e6dcdc 40%, #d9d0dd 75%, #cfc6d8 100%);
  /* the page behind blocks, layouts and templates: the same page, unless the kit's page is a busy pattern
     that text would sit on (stripes, checks), then a plain colour of that pattern */
  --page-bg-calm: var(--page-bg);
  --color-accent-text-calm: var(--color-accent-text);   /* accent text on that calmer page */
  --blob-pink:   #f7a8d8;
  --blob-cyan:   #8fe3f0;
  --blob-violet: #b69bff;
  --blob-peach:  #f3c7b9;
  --blob-blur:   60px;

  /* ---------------------------------------------------------------
     STATES
     --------------------------------------------------------------- */
  --focus-width: 2px;
  --focus-gap:   3px;
  --focus-alpha: .75;
  --focus-glow:  0 0 16px;
  --focus-glow-alpha: .35;

  --disabled-shadow-fill: .06;
  --disabled-shadow-edge: .14;
  --disabled-saturate:    .25;
  --disabled-surface-opacity: .6;
  --disabled-content-opacity: .55;

  --spinner-size:  18px;
  --spinner-width: 2px;
  --spinner-speed: .8s;

  --color-danger:      225, 75, 95;
  --color-danger-deep: 175, 40, 60;
  --rim-danger:        rgba(245, 170, 180, .7);
  --edge-glow-danger:  rgba(255, 225, 230, .92);
  --edge-halo-danger:  rgba(225, 75, 95, .8);
}


/* ---------- glass-recipe.css ---------- */
/* =====================================================================
   GLASS FAMILY - RECIPE
   The shared glass construction, built only from glass-tokens.css.
   Load glass-tokens.css first.

   Markup of a glass element (order matters):
     <el class="glass [variant] [glass-pressable]">
       <i class="glass-shadow-glint"></i>
       <i class="glass-depth"></i>          (optional: visible 3D thickness)
       <i class="glass-glint"></i>
       <i class="glass-edge-glow"></i>
       ...content...
     </el>

   Layers:
     ::before            cast shadow (see-through middle, dense rim)
     .glass-shadow-glint light arc inside the shadow
     .glass-depth        3D thickness, under the surface
     ::after             glass surface (tint, rim, light blur)
     .glass-glint        light arc on the bottom-right curve
     .glass-edge-glow    hairline glow along parts of the rim

   Stacking rule: the element must NOT create its own stacking context
   (no transform / filter / opacity / z-index on it), otherwise the
   shadow layers paint on top of the glass. Content scaling is done on
   a child (.glass-label or a direct svg), never on the element.
   The container that holds glass elements must create one.

   Per-element knobs:
     --r   actual corner radius (drives the glint arc). Always
           min(var(--radius-control), half the height) so it follows the theme.
     --sc / --sd   shadow colour / deeper rim colour (r, g, b)
     --sa / --se   shadow fill / edge strength
     --sx / --sy   shadow offset
     --sb          shadow softness
     --bg / --bd / --in   surface fill / rim / inner light
     --blur        backdrop blur
     --eg / --eh   edge glow line / halo colour
     --caust       coloured light spots inside the shadow
   ===================================================================== */

.glass {
  position: relative;
  --r:  min(var(--radius-control), calc(var(--size-control-md) / 2));
  --sc: var(--color-neutral-shade);
  --sd: var(--color-neutral-shade-deep);
  --sa: var(--shadow-clear-fill);
  --se: var(--shadow-clear-edge);
  --sx: var(--shadow-offset-x-sm);
  --sy: var(--shadow-offset-y-sm);
  --sb: var(--shadow-soft-md);
  --caust: linear-gradient(transparent, transparent);
  --bg: var(--glass-fill-clear);
  --bd: var(--glass-rim-width) solid var(--glass-rim-clear);
  --in: var(--glass-inner-light);
  --blur: var(--glass-blur-see-through);
  --eg: var(--edge-glow-neutral);
  --eh: var(--edge-halo-neutral);
  --focus-c: var(--color-primary);
}

.glass::before,
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* cast shadow */
.glass::before {
  z-index: -2;
  transform: translate(var(--sx), var(--sy));
  background: var(--caust), rgba(var(--sc), var(--sa));
  border: var(--shadow-rim-width) solid rgba(var(--sd), var(--se));
  filter: blur(var(--sb));
}

/* glass surface */
.glass::after {
  z-index: -1;
  background: var(--bg);
  border: var(--bd);
  box-shadow: var(--in);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--blur)) saturate(var(--glass-saturate));
}

/* ---------------------------------------------------------------------
   DETAIL LAYERS
   --------------------------------------------------------------------- */
.glass-glint,
.glass-shadow-glint {
  position: absolute;
  right: var(--glint-inset);
  bottom: var(--glint-inset);
  width:  max(calc(var(--r) * 2 - var(--glint-inset) * 2), 0px);
  height: max(calc(var(--r) * 2 - var(--glint-inset) * 2), 0px);
  border-radius: 50%;
  pointer-events: none;
}
.glass-glint {
  border: var(--glint-width) solid var(--glint-color);
  -webkit-mask: var(--glint-arc);
  mask: var(--glint-arc);
  filter: drop-shadow(0 0 var(--glint-halo) var(--glint-color));
}
.glass-shadow-glint {
  z-index: -2;
  border: var(--shadow-glint-width) solid var(--shadow-glint-color);
  -webkit-mask: var(--shadow-glint-arc);
  mask: var(--shadow-glint-arc);
  transform: translate(calc(var(--sx) * var(--shadow-glint-distance)),
                       calc(var(--sy) * var(--shadow-glint-distance)));
  filter: blur(var(--shadow-glint-blur));
  transition: transform var(--motion-press);
}

.glass-edge-glow {
  position: absolute;
  inset: var(--edge-glow-inset);
  border-radius: inherit;
  border: var(--edge-glow-width) solid var(--eg);
  -webkit-mask: var(--edge-glow-stretches);
  mask: var(--edge-glow-stretches);
  filter: drop-shadow(0 0 var(--edge-glow-halo) var(--eh));
  pointer-events: none;
}

.glass-depth {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  border: var(--dw, var(--depth-width)) solid transparent;
  background: var(--depth-fill) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
  transform: translate(var(--depth-offset-x), var(--depth-offset-y));
  filter: blur(var(--depth-blur));
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   VARIANTS
   --------------------------------------------------------------------- */

/* coloured glass buttons */
.glass--primary,
.glass--secondary {
  --r:  min(var(--radius-control), calc(var(--size-control-lg) / 2));
  --sx: var(--shadow-offset-x-md);
  --sy: var(--shadow-offset-y-md);
  --sa: var(--shadow-tinted-fill);
  --se: var(--shadow-tinted-edge);
  color: var(--color-on-tinted);
}
.glass--primary {
  --sc: var(--color-primary);
  --sd: var(--color-primary-deep);
  --bg: var(--fill-primary);
  --bd: var(--glass-rim-width) solid var(--rim-primary);
  --in:
    inset 0 1px 0 rgba(var(--color-primary-light), .7),
    inset 0 calc(-1 * var(--depth-bottom-rim)) calc(2 * var(--depth-bottom-rim)) rgba(var(--color-primary-deep), .35),
    0 calc(2px * var(--depth-scale)) 0 rgba(var(--color-primary-light), .45);
  --eg: var(--edge-glow-primary);
  --eh: var(--edge-halo-primary);
}
.glass--secondary {
  --sc: var(--color-secondary);
  --sd: var(--color-secondary-deep);
  --bg: var(--fill-secondary);
  --bd: var(--glass-rim-width) solid var(--rim-secondary);
  --in:
    inset 0 1px 0 rgba(var(--color-secondary-light), .7),
    inset 0 calc(-1 * var(--depth-bottom-rim)) calc(2 * var(--depth-bottom-rim)) rgba(var(--color-secondary-deep), .3),
    0 calc(2px * var(--depth-scale)) 0 rgba(var(--color-secondary-light), .45);
  --eg: var(--edge-glow-secondary);
  --eh: var(--edge-halo-secondary);
  --focus-c: var(--color-secondary);
}

/* ghost: nothing until hover / press, then it becomes light clear glass */
.glass--ghost {
  --sa: 0; --se: 0;
  --bg: transparent;
  --bd: var(--glass-rim-width) solid transparent;
  --in: none;
  --blur: 0px;
  color: var(--color-accent-text);
}
.glass--ghost :is(.glass-glint, .glass-edge-glow, .glass-shadow-glint) {
  opacity: 0;
  transition: opacity var(--motion-hover);
}
.glass--ghost:is(:hover, .is-hover, :active, .is-active, :focus-visible, .is-focus):not(:disabled, .is-disabled) {
  --bg: var(--glass-fill-clear);
  --bd: var(--glass-rim-width) solid var(--glass-rim-clear);
  --in: var(--glass-inner-light);
  --blur: var(--glass-blur-see-through);
  --sa: var(--shadow-container-fill);
  --se: var(--shadow-container-edge);
}
.glass--ghost:is(:hover, .is-hover, :active, .is-active, :focus-visible, .is-focus):not(:disabled, .is-disabled)
  :is(.glass-glint, .glass-edge-glow, .glass-shadow-glint) { opacity: 1; }

/* see-through card: faint own shadow, soft blur, 3D edge only bottom-right */
.glass--card {
  --r:  var(--radius-card);
  --sx: var(--shadow-offset-x-lg);
  --sy: var(--shadow-offset-y-lg);
  --sb: var(--shadow-soft-card);
  --sa: var(--shadow-container-fill);
  --se: var(--shadow-container-edge);
  --sc: var(--color-card-shade);
  --blur: var(--glass-blur-soft);
  --bg: var(--glass-fill-card);
  --bd: var(--glass-rim-width) solid rgba(var(--color-card-rim), .6);
  --in:
    inset calc(-2px * var(--depth-scale)) calc(-2.5px * var(--depth-scale)) 0 rgba(255,255,255,.55),
    inset -4px -5px 5px rgba(255,255,255,.15),
    inset 0 0 22px rgba(255,255,255,.14),
    var(--depth-offset-x) var(--depth-offset-y) 0 rgba(var(--color-card-rim), .45);
  --eg: rgba(var(--color-card-rim), .92);
  --eh: rgba(var(--color-card-halo), .7);
  border-radius: var(--shape-card);
}

/* container that holds other glass elements: its own layers go below the children's */
.glass--container::before { z-index: -4; }
.glass--container::after  { z-index: -3; }

/* track that holds a solid slider (tabs / segmented control) */
.glass--track {
  --r:  min(var(--radius-control), calc(var(--size-control-lg) / 2));
  --sx: var(--shadow-offset-x-md);
  --sy: var(--shadow-offset-y-md);
  --sb: var(--shadow-soft-defined);
  --sa: var(--shadow-track-fill);
  --se: var(--shadow-track-edge);
  --bg: var(--glass-fill-faint);
}

/* outline-only ring (switch track) */
.glass--ring {
  --r:  min(var(--radius-control), calc(var(--size-control-sm) / 2));
  --bg:
    linear-gradient(135deg, rgba(255,255,255,0) 50%, rgba(255,255,255,.55)),
    var(--iridescent-linear);
  --bd: 3px solid transparent;
  --in: none;
  --blur: 0px;
  --sa: var(--shadow-ring-fill);
  --se: var(--shadow-ring-edge);
}
.glass--ring::after {
  background-origin: border-box;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.glass--ring .glass-depth { --dw: var(--depth-width-ring); }

/* switch ON: the track fills with the same glass as the primary button (fill, rim, inner light, glow, tinted shadow);
   only the knob stays solid. Off keeps the thin ring. */
[data-family="glass"] .switch[aria-checked="true"].glass--ring {
  --sc: var(--color-primary);
  --sd: var(--color-primary-deep);
  --bg: var(--fill-primary);
  --bd: var(--glass-rim-width) solid var(--rim-primary);
  --in:
    inset 0 1px 0 rgba(var(--color-primary-light), .7),
    inset 0 calc(-1 * var(--depth-bottom-rim)) calc(2 * var(--depth-bottom-rim)) rgba(var(--color-primary-deep), .35),
    0 calc(2px * var(--depth-scale)) 0 rgba(var(--color-primary-light), .45);
  --eg: var(--edge-glow-primary);
  --eh: var(--edge-halo-primary);
  --sa: var(--shadow-tinted-fill);
  --se: var(--shadow-tinted-edge);
}
[data-family="glass"] .switch[aria-checked="true"].glass--ring::after { -webkit-mask: none; mask: none; }
[data-family="glass"] .switch[aria-checked="true"].glass--ring .glass-depth { --dw: var(--depth-width); }

/* ---------------------------------------------------------------------
   INTERACTION: hover grows content, press is shadow-only (no movement)
   Every state also has a class (.is-hover, .is-active, .is-focus, .is-disabled,
   .is-loading, .is-error) so previews can show it without a mouse.
   --------------------------------------------------------------------- */
.glass-pressable { cursor: pointer; }
.glass-pressable::before,
.glass-pressable::after {
  transition: transform var(--motion-press), filter var(--motion-press), box-shadow var(--motion-press);
}
.glass-pressable .glass-label,
.glass-pressable > svg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform var(--motion-hover);
}

.glass-pressable:is(:hover, .is-hover):not(:disabled, .is-disabled, .is-loading)::after {
  filter: brightness(var(--hover-brightness));
}
.glass-pressable:is(:hover, .is-hover):not(:disabled, .is-disabled, .is-loading) .glass-label,
.glass-pressable:is(:hover, .is-hover):not(:disabled, .is-disabled, .is-loading) > svg {
  transform: scale(var(--hover-content-scale));
}

.glass-pressable:is(:active, .is-active, [aria-pressed="true"]):not(:disabled, .is-disabled, .is-loading)::before {
  transform: translate(calc(var(--sx) * var(--press-shadow-pull)),
                       calc(var(--sy) * var(--press-shadow-pull)));
}
.glass-pressable:is(:active, .is-active, [aria-pressed="true"]):not(:disabled, .is-disabled, .is-loading)::after {
  filter: brightness(var(--press-brightness));
  box-shadow: var(--in), var(--press-inner-shadow) rgba(var(--sd), var(--press-inner-alpha));
}
.glass-pressable:is(:active, .is-active, [aria-pressed="true"]):not(:disabled, .is-disabled, .is-loading) .glass-shadow-glint {
  transform: translate(calc(var(--sx) * var(--shadow-glint-pressed)),
                       calc(var(--sy) * var(--shadow-glint-pressed)));
}
.glass-pressable:is(:active, .is-active, [aria-pressed="true"]):not(:disabled, .is-disabled, .is-loading) .glass-label,
.glass-pressable:is(:active, .is-active, [aria-pressed="true"]):not(:disabled, .is-disabled, .is-loading) > svg {
  transform: scale(var(--press-content-scale));
}

/* ---------------------------------------------------------------------
   STATES
   --------------------------------------------------------------------- */
.glass:focus { outline: none; }
.glass:is(:focus-visible, .is-focus) {
  outline: var(--focus-width) solid rgba(var(--focus-c), var(--focus-alpha));
  outline-offset: var(--focus-gap);
  box-shadow: var(--focus-glow) rgba(var(--focus-c), var(--focus-glow-alpha));
}

.glass:is(:disabled, .is-disabled) {
  cursor: not-allowed;
  --sa: var(--disabled-shadow-fill);
  --se: var(--disabled-shadow-edge);
}
.glass:is(:disabled, .is-disabled)::after {
  filter: saturate(var(--disabled-saturate)) brightness(1.06);
  opacity: var(--disabled-surface-opacity);
}
.glass:is(:disabled, .is-disabled) :is(.glass-glint, .glass-edge-glow, .glass-shadow-glint) { display: none; }
.glass:is(:disabled, .is-disabled) .glass-label,
.glass:is(:disabled, .is-disabled) > svg { opacity: var(--disabled-content-opacity); }

.glass.is-loading { cursor: progress; }
.glass.is-loading .glass-label { visibility: hidden; }
.glass-spinner {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--spinner-size);
  height: var(--spinner-size);
  margin: calc(var(--spinner-size) / -2) 0 0 calc(var(--spinner-size) / -2);
  border-radius: 50%;
  border: var(--spinner-width) solid currentColor;
  border-right-color: transparent;
  animation: glass-spin var(--spinner-speed) linear infinite;
}
.glass.is-loading .glass-spinner { display: block; }
@keyframes glass-spin { to { transform: rotate(360deg); } }

.glass.is-error {
  --sc: var(--color-danger);
  --sd: var(--color-danger-deep);
  --bd: var(--glass-rim-width) solid var(--rim-danger);
  --eg: var(--edge-glow-danger);
  --eh: var(--edge-halo-danger);
  --focus-c: var(--color-danger);
}

@media (prefers-reduced-transparency: reduce) {
  .glass::after { background: var(--bg), rgba(255, 255, 255, .6); }
}
@media (prefers-reduced-motion: reduce) {
  .glass-spinner { animation-duration: 2.4s; }
  .glass-pressable::before,
  .glass-pressable::after,
  .glass-pressable .glass-label,
  .glass-shadow-glint { transition: none; }
}

/* ---------------------------------------------------------------------
   SOLID ELEMENTS
   --------------------------------------------------------------------- */
.solid        { background: var(--solid-fill); box-shadow: inset 0 1px 0 #fff, inset 0 -2px 4px rgba(0,0,0,.06), var(--solid-shadow); }
.solid--domed { background: var(--solid-fill-domed); box-shadow: var(--solid-domed-inner), var(--solid-shadow-in-track); }
.glass--card .solid { box-shadow: inset 0 1px 0 #fff, var(--solid-shadow-on-glass); }

.solid-pressable { cursor: pointer; transition: box-shadow var(--motion-press); }
.solid-pressable > svg { transition: transform var(--motion-hover); }
.solid-pressable:is(:hover, .is-hover):not(:disabled, .is-disabled) > svg { transform: scale(var(--hover-content-scale)); }
.solid-pressable:is(:active, .is-active):not(:disabled, .is-disabled) {
  box-shadow: inset 0 1px 0 #fff, inset 2px 3px 6px rgba(var(--color-neutral-shade), .16),
              calc(3px * var(--elevation)) calc(5px * var(--elevation)) calc(6px * var(--elevation)) rgba(var(--color-neutral-shade), .18);
}
.solid-pressable:is(:active, .is-active):not(:disabled, .is-disabled) > svg { transform: scale(var(--press-content-scale)); }
.solid:focus { outline: none; }
.solid:is(:focus-visible, .is-focus) {
  outline: var(--focus-width) solid rgba(var(--color-primary), var(--focus-alpha));
  outline-offset: var(--focus-gap);
}
.solid:is(:disabled, .is-disabled) {
  cursor: not-allowed;
  opacity: var(--disabled-content-opacity);
  box-shadow: inset 0 1px 0 #fff, 4px 6px 8px rgba(var(--color-neutral-shade), .1);
}

/* ---------------------------------------------------------------------
   RELIEF (optional, per kit: data-relief3d on the same element as data-kit)
   Glass already has thickness and a cast shadow; a relief changes the shape of the
   glass surface itself on the controls (buttons, toggles, tabs slider, switch knob, slider thumb):
     lens     convex: a bright cap at the top, the colour deepens toward the bottom
     concave  the middle sinks: a shadow under the top rim, light along the bottom rim
     bevel    a cut edge: straight light lines top-left, dark lines bottom-right
     slab     thick block: a wide bright band along the bottom, like a slab of glass seen edge-on
   Two layers on top of the kit's own glass fill: --gr-face (gradient) and --gr-inner (shadows).
   Pressing swaps them for the -press set. Light comes from the top-left, as everywhere.
   --------------------------------------------------------------------- */
[data-family="glass"][data-relief3d="lens"] {
  --gr-face: radial-gradient(95% 70% at 50% 10%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%);
  --gr-face-sm: radial-gradient(95% 75% at 50% 12%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 65%);
  --gr-inner-sm: inset 0 -2.5px 5px rgba(var(--color-neutral-shade), .22);
}
[data-family="glass"][data-relief3d="concave"] {
  --gr-face: radial-gradient(100% 90% at 50% 65%, rgba(var(--sd), .2), rgba(var(--sd), 0) 72%);
  --gr-face-sm: radial-gradient(100% 90% at 50% 65%, rgba(var(--color-neutral-shade), .16), rgba(var(--color-neutral-shade), 0) 72%);
  --gr-inner-sm: inset 0 2px 4px rgba(var(--color-neutral-shade), .26), inset 0 -1px 0 rgba(255, 255, 255, .8);
}
[data-family="glass"][data-relief3d="bevel"] {
  --gr-face: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 50%);
  --gr-face-sm: var(--gr-face);
  --gr-inner-sm: inset 0 2px 0 rgba(255, 255, 255, .75), inset 2px 0 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(var(--color-neutral-shade), .3), inset -2px 0 0 rgba(var(--color-neutral-shade), .16);
}
[data-family="glass"][data-relief3d="slab"] {
  --gr-face: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .3) 100%);
  --gr-face-sm: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .3) 100%);
  --gr-inner-sm: inset 0 -3px 0 rgba(255, 255, 255, .4), inset 0 -4px 0 rgba(var(--color-neutral-shade), .2);
}
/* The inner shadows (--gr-inner and the press set) are built from --sd, the shade of each control's
   own variant, so they are declared on the control: declared on the page root they would have no
   shade to use and the whole box-shadow would fall away. The face gradients stay on the root. */
[data-family="glass"][data-relief3d="lens"] .glass-pressable {
  --gr-inner: inset 0 -4px 9px rgba(var(--sd), .28);
  --gr-press-face: linear-gradient(180deg, rgba(var(--sd), .18), rgba(255, 255, 255, .1));
  --gr-press-inner: inset 0 4px 9px rgba(var(--sd), .35);
}
[data-family="glass"][data-relief3d="concave"] .glass-pressable {
  --gr-inner: inset 0 3px 7px rgba(var(--sd), .3), inset 0 -1.5px 0 rgba(255, 255, 255, .85);
  --gr-press-face: radial-gradient(100% 90% at 50% 65%, rgba(var(--sd), .3), rgba(var(--sd), 0) 72%);
  --gr-press-inner: inset 0 4px 10px rgba(var(--sd), .42), inset 0 -1px 0 rgba(255, 255, 255, .6);
}
[data-family="glass"][data-relief3d="bevel"] .glass-pressable {
  --gr-inner: inset 0 2.5px 0 rgba(255, 255, 255, .75), inset 2.5px 0 0 rgba(255, 255, 255, .45), inset 0 -2.5px 0 rgba(var(--sd), .32), inset -2.5px 0 0 rgba(var(--sd), .18);
  --gr-press-face: linear-gradient(180deg, rgba(var(--sd), .1), rgba(255, 255, 255, .06));
  --gr-press-inner: inset 0 2.5px 0 rgba(var(--sd), .28), inset 2.5px 0 0 rgba(var(--sd), .16), inset 0 -2.5px 0 rgba(255, 255, 255, .6), inset -2.5px 0 0 rgba(255, 255, 255, .4);
}
[data-family="glass"][data-relief3d="slab"] .glass-pressable {
  --gr-inner: inset 0 -6px 0 rgba(255, 255, 255, .38), inset 0 -7px 0 rgba(var(--sd), .22), inset 0 1px 0 rgba(255, 255, 255, .6);
  --gr-press-face: linear-gradient(180deg, rgba(var(--sd), .12), rgba(255, 255, 255, .1) 60%, rgba(255, 255, 255, .2));
  --gr-press-inner: inset 0 -3px 0 rgba(255, 255, 255, .3), inset 0 -4px 0 rgba(var(--sd), .2), inset 0 3px 6px rgba(var(--sd), .3);
}
[data-family="glass"][data-relief3d] .glass-pressable::after {
  background: var(--gr-face), var(--bg);
  box-shadow: var(--in), var(--gr-inner);
}
[data-family="glass"][data-relief3d] .glass-pressable:is(:active, .is-active, [aria-pressed="true"]):not(:disabled, .is-disabled, .is-loading)::after {
  background: var(--gr-press-face), var(--bg);
  box-shadow: var(--in), var(--gr-press-inner), var(--press-inner-shadow) rgba(var(--sd), var(--press-inner-alpha));
}
[data-family="glass"][data-relief3d] .glass--ghost:not(:hover, .is-hover, :active, .is-active, :focus-visible, .is-focus)::after { background: transparent; box-shadow: none; }
[data-family="glass"][data-relief3d] .segmented-slider {
  background: var(--gr-face-sm), var(--solid-fill-domed);
  box-shadow: var(--solid-domed-inner), var(--gr-inner-sm), var(--solid-shadow-in-track);
}
[data-family="glass"][data-relief3d] .switch-knob {
  background: var(--gr-face-sm), var(--solid-fill);
  box-shadow: inset 0 1px 2px #fff, var(--gr-inner-sm), var(--solid-shadow);
}
[data-family="glass"][data-relief3d] .slider-thumb {
  background: var(--gr-face-sm), var(--solid-fill);
  box-shadow: inset 0 1px 2px #fff, var(--gr-inner-sm), var(--solid-shadow-small);
}

/* =====================================================================
   LIQUID SWITCH (kits that set data-switch="liquid"): the knob is a drop of
   liquid glass. It is see-through, blurs the track behind it and carries a
   bright crescent of light. When it moves, a second drop follows a beat behind,
   so the drop stretches out and gathers itself again at the other end. On, the
   drop takes a tint of the primary colour.
   Tokens: --liquid-tint (r, g, b) tint of the drop when off, --liquid-move and
   --liquid-lag (how the drop and its tail travel).
   ===================================================================== */
[data-family="glass"][data-switch="liquid"] {
  --liquid-tint: 255, 255, 255;
  --liquid-move: .38s cubic-bezier(.55, 0, .2, 1.15);
  --liquid-lag:  .62s cubic-bezier(.3, .9, .2, 1);
}
[data-family="glass"][data-switch="liquid"] .switch-knob {
  background: transparent;
  box-shadow: none;
  color: transparent;
  transition: left var(--liquid-move);
}
[data-family="glass"][data-switch="liquid"] .switch-knob svg { display: none; }
/* the drop (::before) and its tail (the unused depth element, same shape, a little smaller) */
[data-family="glass"][data-switch="liquid"] .switch-knob::before,
[data-family="glass"][data-switch="liquid"] .switch > .glass-depth {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 0;
  border-radius: 50%;
  transform: none;
  filter: none;
  opacity: 1;
  -webkit-mask: none;
  mask: none;
  pointer-events: none;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95) 0 9%, rgba(255, 255, 255, 0) 30%),
    radial-gradient(circle at 50% 50%, rgba(var(--liquid-tint), 0) 52%, rgba(var(--liquid-tint), .5) 100%);
  background-color: rgba(var(--liquid-tint), .22);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .8),
    inset -3px -4px 8px rgba(var(--color-neutral-shade), .28),
    inset 3px 4px 6px rgba(255, 255, 255, .6),
    0 6px 12px -4px rgba(var(--color-neutral-shade), .35);
  -webkit-backdrop-filter: blur(3px) saturate(1.3);
  backdrop-filter: blur(3px) saturate(1.3);
  transition: background-color var(--liquid-move), transform var(--motion-press);
}
[data-family="glass"][data-switch="liquid"] .switch > .glass-depth {
  inset: auto;
  top: 50%;
  left: -4px;
  width: var(--knob);
  height: var(--knob);
  transform: translateY(-50%) scale(.84);
  transition: left var(--liquid-lag), background-color var(--liquid-move);
}
[data-family="glass"][data-switch="liquid"] .switch[aria-checked="true"] > .glass-depth { left: calc(100% - var(--knob) + 4px); }
/* on: the drop is tinted with the primary colour */
[data-family="glass"][data-switch="liquid"] .switch[aria-checked="true"] .switch-knob::before,
[data-family="glass"][data-switch="liquid"] .switch[aria-checked="true"] > .glass-depth {
  background-color: rgba(var(--color-primary-light), .45);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .9),
    inset -3px -4px 8px rgba(var(--color-primary-deep), .35),
    inset 3px 4px 6px rgba(255, 255, 255, .7),
    0 6px 12px -4px rgba(var(--color-primary-deep), .4);
}
/* press squashes the drop a little; nothing else moves */
[data-family="glass"][data-switch="liquid"] .switch:is(:active, .is-active):not(:disabled, .is-disabled) .switch-knob { box-shadow: none; }
[data-family="glass"][data-switch="liquid"] .switch:is(:active, .is-active):not(:disabled, .is-disabled) .switch-knob::before { transform: scale(.92); }
/* disabled: a flat, cloudy drop */
[data-family="glass"][data-switch="liquid"] .switch:is(:disabled, .is-disabled) .switch-knob { background: transparent; box-shadow: none; }
[data-family="glass"][data-switch="liquid"] .switch:is(:disabled, .is-disabled) .switch-knob::before,
[data-family="glass"][data-switch="liquid"] .switch:is(:disabled, .is-disabled) > .glass-depth {
  background: rgba(var(--color-neutral-shade), .12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* =====================================================================
   DIAL SWITCH (kits that set data-switch="dial"): a glass ring with a disc of
   glass turning inside it. The disc is see-through, blurs what is behind it and
   carries a bright crescent; a pointer on it turns from seven o'clock (off) to
   five o'clock (on). The arc it travelled lights up on the ring in the primary
   colour and the disc takes a tint of it. Pressing squashes the disc a little.
   Tokens: --dial-tint (r, g, b) tint of the disc when off, --dial-turn (the turn).
   Per-kit variation (set on [data-kit][data-switch="dial"]): --dial-size, --dial-knob-inset, --dial-knob-bg/-shadow,
   --dial-ptr-top/-w/-h/-r/-clip/-bg/-on, --dial-rot-off/-on, --dial-from/-sweep, --dial-arc-o/-w/-off/-on,
   --dial-seg-mask (a mask layer over the arc) and --dial-seg (tick or block pitch where the family has one).
   ===================================================================== */
[data-family="glass"][data-switch="dial"] {
  --dial-size: 48px;
  --dial-knob-inset: 8px;
  --dial-ptr-top: 9%;
  --dial-ptr-w: 3px;
  --dial-ptr-h: 41%;
  --dial-ptr-r: 999px;
  --dial-ptr-clip: none;
  --dial-rot-off: -135deg;
  --dial-rot-on: 135deg;
  --dial-from: 225deg;
  --dial-sweep: 270deg;
  --dial-arc-o: 1px;
  --dial-arc-w: 3.5px;
  --dial-seg-mask: linear-gradient(#000 0 0);
  --dial-tint: 255, 255, 255;
  --dial-turn: .5s cubic-bezier(.34, 1.4, .64, 1);
}
[data-family="glass"][data-switch="dial"] .switch { --r: 50%; --bd: var(--dial-bd); border-radius: 50%; }
[data-family="glass"][data-switch="dial"] .switch--md { --dk: 1; width: var(--dial-size); height: var(--dial-size); --dial-bd: 5px solid transparent; }
[data-family="glass"][data-switch="dial"] .switch--sm { --dk: .75; width: calc(var(--dial-size) * .75); height: calc(var(--dial-size) * .75); --dial-bd: 4px solid transparent; }
/* the ring stays the same thin glass ring whether on or off: the arc carries the state */
[data-family="glass"][data-switch="dial"] .switch[aria-checked="true"].glass--ring {
  --sc: var(--color-neutral-shade);
  --sd: var(--color-neutral-shade-deep);
  --bd: var(--dial-bd);
  --bg:
    linear-gradient(135deg, rgba(255,255,255,0) 50%, rgba(255,255,255,.55)),
    var(--iridescent-linear);
  --in: none;
  --eg: var(--edge-glow-neutral);
  --eh: var(--edge-halo-neutral);
  --sa: var(--shadow-ring-fill);
  --se: var(--shadow-ring-edge);
}
[data-family="glass"][data-switch="dial"] .switch[aria-checked="true"].glass--ring::after {
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
[data-family="glass"][data-switch="dial"] .switch > :is(.glass-shadow-glint, .glass-edge-glow, .glass-depth) { display: none; }
/* the lit arc: the glint element, a conic band the width of the ring */
[data-family="glass"][data-switch="dial"] .switch > .glass-glint {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 50%;
  transform: none;
  background: var(--dial-arc-on, conic-gradient(from calc(var(--dial-from) - 1.5deg), transparent 0deg, rgb(var(--color-primary-light)) 1.5deg, rgb(var(--color-primary)) calc(var(--dial-sweep) / 2), rgb(var(--color-primary-deep)) 270deg, transparent 270deg));
  -webkit-mask: var(--dial-seg-mask), radial-gradient(circle closest-side, transparent 0 calc(100% - ((var(--dial-arc-o) + var(--dial-arc-w)) + 1px) * var(--dk)), #000 calc(100% - (var(--dial-arc-o) + var(--dial-arc-w)) * var(--dk)) calc(100% - (var(--dial-arc-o)) * var(--dk)), transparent calc(100% - ((var(--dial-arc-o)) - 1px) * var(--dk)));
  -webkit-mask-composite: source-in;
  mask: var(--dial-seg-mask), radial-gradient(circle closest-side, transparent 0 calc(100% - ((var(--dial-arc-o) + var(--dial-arc-w)) + 1px) * var(--dk)), #000 calc(100% - (var(--dial-arc-o) + var(--dial-arc-w)) * var(--dk)) calc(100% - (var(--dial-arc-o)) * var(--dk)), transparent calc(100% - ((var(--dial-arc-o)) - 1px) * var(--dk)));
  mask-composite: intersect;
  filter: var(--dial-arc-glow, drop-shadow(0 0 4px rgba(var(--color-primary), .7)));
  opacity: 0;
  transition: opacity var(--dial-turn);
  pointer-events: none;
}
[data-family="glass"][data-switch="dial"] .switch[aria-checked="true"] > .glass-glint { opacity: 1; }
/* the disc: a drop of glass filling the ring, with a pointer on it */
[data-family="glass"][data-switch="dial"] .switch-knob,
[data-family="glass"][data-switch="dial"] .switch[aria-checked="true"] .switch-knob {
  inset: calc(var(--dial-knob-inset) * var(--dk));
  top: calc(var(--dial-knob-inset) * var(--dk));
  left: calc(var(--dial-knob-inset) * var(--dk));
  width: auto;
  height: auto;
  transform: none;
  border-radius: 50%;
  color: transparent;
  background: var(--dial-knob-bg, radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95) 0 9%, rgba(255, 255, 255, 0) 30%), radial-gradient(circle at 50% 50%, rgba(var(--dial-tint), 0) 52%, rgba(var(--dial-tint), .5) 100%));
  background-color: rgba(var(--dial-tint), .22);
  box-shadow: var(--dial-knob-shadow, inset 0 0 0 1px rgba(255, 255, 255, .8), inset -3px -4px 8px rgba(var(--color-neutral-shade), .28), inset 3px 4px 6px rgba(255, 255, 255, .6), 0 6px 12px -4px rgba(var(--color-neutral-shade), .35));
  -webkit-backdrop-filter: blur(3px) saturate(1.3);
  backdrop-filter: blur(3px) saturate(1.3);
  transition: background-color var(--dial-turn), box-shadow var(--dial-turn), transform var(--motion-press);
}
[data-family="glass"][data-switch="dial"] .switch-knob svg { display: none; }
[data-family="glass"][data-switch="dial"] .switch-knob::before {
  content: "";
  position: absolute;
  top: var(--dial-ptr-top);
  left: calc(50% - var(--dial-ptr-w) * var(--dk) / 2);
  width: calc(var(--dial-ptr-w) * var(--dk));
  height: var(--dial-ptr-h);
  border-radius: var(--dial-ptr-r);
  clip-path: var(--dial-ptr-clip);
  background: var(--dial-ptr-bg, rgba(var(--color-neutral-shade), .55));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
  transform-origin: 50% 100%;
  transform: rotate(var(--dial-rot-off));
  transition: transform var(--dial-turn), background-color var(--dial-turn);
}
/* on: the disc is tinted with the primary colour and the pointer turns white */
[data-family="glass"][data-switch="dial"] .switch[aria-checked="true"] .switch-knob {
  background-color: rgba(var(--color-primary-light), .45);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .9),
    inset -3px -4px 8px rgba(var(--color-primary-deep), .35),
    inset 3px 4px 6px rgba(255, 255, 255, .7),
    0 6px 12px -4px rgba(var(--color-primary-deep), .4);
}
[data-family="glass"][data-switch="dial"] .switch[aria-checked="true"] .switch-knob::before {
  background: var(--dial-ptr-on, #fff);
  box-shadow: 0 0 4px rgba(var(--color-primary-deep), .5);
  transform: rotate(var(--dial-rot-on));
}
/* press squashes the disc a little */
[data-family="glass"][data-switch="dial"] .switch:is(:active, .is-active):not(:disabled, .is-disabled) .switch-knob { transform: scale(.92); }
/* disabled: a flat, cloudy disc, no arc */
[data-family="glass"][data-switch="dial"] .switch:is(:disabled, .is-disabled) > .glass-glint { opacity: 0; }
[data-family="glass"][data-switch="dial"] .switch:is(:disabled, .is-disabled) .switch-knob {
  background: rgba(var(--color-neutral-shade), .12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
[data-family="glass"][data-switch="dial"] .switch:is(:disabled, .is-disabled) .switch-knob::before { background: rgba(var(--color-neutral-shade), .3); box-shadow: none; }


/* ---------- glass-components.css ---------- */
/* =====================================================================
   GLASS FAMILY - COMPONENTS
   Load order: glass-tokens.css -> glass-recipe.css -> this file -> kit theme.
   Component classes only set sizes, layout and variant knobs; the glass
   itself always comes from the recipe. Radius, colour, font and z-height
   always come from tokens so every kit theme can reshape them.
   ===================================================================== */

/* small-control shadow scale (checkbox, radio, slider parts) */
.glass-xs {
  --sx: var(--shadow-offset-x-xs);
  --sy: var(--shadow-offset-y-xs);
  --sb: var(--shadow-soft-xs);
  --shadow-rim-width: 2px;
}

/* =====================================================================
   BUTTON
   ===================================================================== */
.btn {
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: var(--weight-control);
  letter-spacing: var(--tracking-control);
  text-transform: var(--case-control);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--shape-control);
  color: var(--color-ink);
}
.glass--primary.btn { color: var(--color-on-tinted); }
.glass--secondary.btn { color: var(--color-on-secondary, var(--color-on-tinted)); }   /* text on the secondary: set by "Your colours" when that colour is light */
.glass--ghost.btn { color: var(--color-accent-text); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.btn--sm { height: 44px; padding: 0 20px; font-size: 14px;   --r: min(var(--radius-control), 22px); }
.btn--md { height: 52px; padding: 0 26px; font-size: 15.5px; --r: min(var(--radius-control), 26px); }
.btn--lg { height: 58px; padding: 0 32px; font-size: 16px;   --r: min(var(--radius-control), 29px);
           --sx: var(--shadow-offset-x-md); --sy: var(--shadow-offset-y-md); }

/* =====================================================================
   ICON BUTTON
   ===================================================================== */
.btn-icon {
  border: 0;
  padding: 0;
  background: transparent;   /* remove the browser's grey button face, it covered the glass */
  font: inherit;
  border-radius: var(--shape-round);
  display: inline-grid;
  place-items: center;
  color: var(--color-ink);
}
.btn-icon--sm { width: 44px; height: 44px; --r: min(var(--radius-control), 22px); }
.btn-icon--md { width: 54px; height: 54px; --r: min(var(--radius-control), 27px); }
.btn-icon--lg { width: 60px; height: 60px; --r: min(var(--radius-control), 30px); --sx: var(--shadow-offset-x-md); --sy: var(--shadow-offset-y-md); }
.btn-icon--sm svg { width: 18px; height: 18px; }
.btn-icon--md svg { width: 22px; height: 22px; }
.btn-icon--lg svg { width: 24px; height: 24px; }
.btn-icon.glass:not(.glass--primary) { color: #fff; }
.btn-icon.glass:not(.glass--primary) > svg { filter: drop-shadow(1px 1px 1px rgba(var(--color-neutral-shade-deep), .4)); }
.btn-icon.glass--primary { color: var(--color-on-tinted); }
.btn-icon.solid { background: var(--solid-fill); color: var(--solid-ink); }

/* Icon buttons are small and have no label: stronger state changes. */
.btn-icon {
  --hover-content-scale: 1.16;
  --hover-brightness:    1.12;
  --press-shadow-pull:   .12;
  --shadow-glint-pressed: .05;
  --press-brightness:    .88;
  --press-content-scale: .92;
  --press-inner-shadow:  inset 4px 5px 11px;
  --press-inner-alpha:   .6;
  --disabled-shadow-fill: .03;
  --disabled-shadow-edge: .07;
  --disabled-surface-opacity: .42;
  --disabled-content-opacity: .38;
}
.btn-icon.solid-pressable:is(:hover, .is-hover):not(:disabled, .is-disabled) {
  box-shadow: inset 0 1px 2px #fff, inset 0 -2px 4px rgba(0, 0, 0, .04),
              calc(12px * var(--elevation)) calc(19px * var(--elevation)) calc(16px * var(--elevation)) rgba(var(--color-neutral-shade), .28);
}
.btn-icon.solid-pressable:is(:active, .is-active):not(:disabled, .is-disabled) {
  background: linear-gradient(180deg, #f1edf2, #e6e0e8);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .7), inset 3px 5px 9px rgba(var(--color-neutral-shade), .28),
              calc(2px * var(--elevation)) calc(3px * var(--elevation)) calc(4px * var(--elevation)) rgba(var(--color-neutral-shade), .18);
}
.btn-icon.solid:is(:disabled, .is-disabled) { box-shadow: inset 0 1px 2px #fff, 3px 5px 6px rgba(var(--color-neutral-shade), .06); }

/* =====================================================================
   TOGGLE BUTTON (aria-pressed)
   ===================================================================== */
.toggle-group { display: inline-flex; gap: 14px; }
.btn[aria-pressed="true"]:not(.glass--primary, .glass--secondary) { color: var(--color-accent-text); }
.btn-icon.glass[aria-pressed="true"]:not(.glass--primary) { color: var(--color-accent-text); }
.btn-icon.glass[aria-pressed="true"]:not(.glass--primary) > svg { filter: none; }

/* LIKE: the heart fills with the kit's main colour and glows. The button itself
   does not stay pressed (it keeps the normal click feel). */
.btn-like > svg path { transition: fill var(--motion-hover); }
.btn-icon.glass.btn-like.is-liked { color: rgb(var(--color-primary)); }
.btn-icon.glass.btn-like.is-liked > svg { filter: drop-shadow(0 0 6px rgba(var(--color-primary), .55)); }
.btn-icon.glass.btn-like.is-liked > svg path { fill: currentColor; }

/* =====================================================================
   SWITCH
   ===================================================================== */
.switch {
  position: relative;
  display: inline-block;
  flex: none;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: var(--shape-control);
  cursor: pointer;
}
.switch--md { width: 92px; height: 44px; --r: min(var(--radius-control), 22px); --knob: 50px; }
.switch--sm { width: 68px; height: 34px; --r: min(var(--radius-control), 17px); --knob: 40px;
              --sx: calc(9px * var(--elevation)); --sy: calc(13px * var(--elevation)); }
.switch[aria-checked="false"] {
  --bg:
    linear-gradient(135deg, rgba(255,255,255,0) 50%, rgba(255,255,255,.55)),
    linear-gradient(90deg, rgba(255,255,255,.75), rgba(255,255,255,.75));
}
.switch-knob {
  position: absolute;
  top: 50%;
  left: -4px;
  z-index: 1;
  width: var(--knob);
  height: var(--knob);
  border-radius: var(--shape-round);
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  color: var(--color-ink-soft);
  background: var(--solid-fill);
  box-shadow: inset 0 1px 2px #fff, var(--solid-shadow);
  transition: left var(--motion-switch), box-shadow var(--motion-press);
}
.switch[aria-checked="true"] .switch-knob { left: calc(100% - var(--knob) + 4px); }
.switch-knob svg { width: 40%; height: 40%; transition: transform var(--motion-hover); }
/* knob icon: plus when on, minus when off */
.switch[aria-checked="true"] .knob-off,
.switch[aria-checked="false"] .knob-on { display: none; }
.switch:is(:hover, .is-hover):not(:disabled, .is-disabled) .switch-knob svg { transform: scale(var(--hover-content-scale)); }
.switch:is(:active, .is-active):not(:disabled, .is-disabled) .switch-knob {
  box-shadow: inset 0 1px 2px #fff, inset 2px 3px 6px rgba(var(--color-neutral-shade), .14),
              calc(4px * var(--elevation)) calc(7px * var(--elevation)) calc(7px * var(--elevation)) rgba(var(--color-neutral-shade), .2);
}
/* disabled: nothing turns see-through. The knob stays solid but goes flat and greyish
   with a faded icon and almost no shadow; the track ring loses its colour. */
.switch:is(:disabled, .is-disabled) {
  --bg: linear-gradient(90deg, rgba(var(--color-neutral-shade), .16), rgba(var(--color-neutral-shade), .16));
}
.switch:is(:disabled, .is-disabled) .switch-knob {
  background: linear-gradient(rgba(var(--color-neutral-shade), .07), rgba(var(--color-neutral-shade), .07)), var(--solid-fill);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .8),
              calc(3px * var(--elevation)) calc(5px * var(--elevation)) calc(6px * var(--elevation)) rgba(var(--color-neutral-shade), .08);
  color: var(--color-placeholder);
}
.switch:is(:disabled, .is-disabled) .switch-knob svg { opacity: .4; }

/* =====================================================================
   ROLL SWITCH (kits that set data-switch="roll"): a square block in a slot three
   blocks long. It does not slide: on a click it tips over its bottom front edge,
   a quarter turn at a time, lifting a little at the middle of each turn, and
   lands two turns later at the other end. The motion runs only after a click
   (the script adds .was-toggled), so a page never opens mid-roll.
   Reduced motion: the block slides.
   Tokens: --roll-c (block size), --roll-in (gap around it), --roll-time.
   ===================================================================== */
@property --roll-1 { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --roll-2 { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
:where([data-switch="roll"]) { --roll-c: 28px; --roll-in: 4px; --roll-time: .62s; }
[data-family][data-switch="roll"] .switch--sm { --roll-c: 20px; }
[data-family][data-switch="roll"] .switch {
  width: calc(3 * var(--roll-c) + 2 * var(--roll-in));
  height: calc(var(--roll-c) + 2 * var(--roll-in));
}
/* the block turns about one bottom corner, then the next: two pivots, one angle each */
[data-family][data-switch="roll"] .switch .switch-knob,
[data-family][data-switch="roll"] .switch[aria-checked="true"] .switch-knob {
  --x0: 0px;
  --p1: calc(var(--roll-c) / 2);
  --p2: calc(var(--roll-c) * 1.5);
  --py: calc(var(--roll-c) / 2);
  top: var(--roll-in);
  bottom: auto;
  left: var(--roll-in);
  width: var(--roll-c);
  height: var(--roll-c);
  border-radius: max(calc(var(--r) - var(--roll-in)), 0px);
  transform: translateX(var(--x0))
             translate(var(--p2), var(--py)) rotate(var(--roll-2)) translate(calc(-1 * var(--p2)), calc(-1 * var(--py)))
             translate(var(--p1), var(--py)) rotate(var(--roll-1)) translate(calc(-1 * var(--p1)), calc(-1 * var(--py)));
  transition: transform var(--motion-switch), box-shadow var(--motion-press);
}
[data-family][data-switch="roll"] .switch[aria-checked="true"] .switch-knob { --x0: calc(2 * var(--roll-c)); }
@media (prefers-reduced-motion: no-preference) {
  [data-family][data-switch="roll"] .switch.was-toggled .switch-knob { transition: box-shadow var(--motion-press); }
  [data-family][data-switch="roll"] .switch.was-toggled[aria-checked="true"] .switch-knob {
    --x0: 0px;
    animation: roll-turns var(--roll-time) both;
  }
  [data-family][data-switch="roll"] .switch.was-toggled[aria-checked="false"] .switch-knob {
    --x0: calc(2 * var(--roll-c));
    --p1: calc(var(--roll-c) / -2);
    --p2: calc(var(--roll-c) * -1.5);
    animation: roll-turns-back var(--roll-time) both;
  }
}
/* each quarter turn: slow to tip, quick to fall */
@keyframes roll-turns {
  0%   { --roll-1: 0deg;  --roll-2: 0deg;  animation-timing-function: cubic-bezier(.5, 0, .75, .9); }
  50%  { --roll-1: 90deg; --roll-2: 0deg;  animation-timing-function: cubic-bezier(.5, 0, .75, .9); }
  100% { --roll-1: 90deg; --roll-2: 90deg; }
}
@keyframes roll-turns-back {
  0%   { --roll-1: 0deg;   --roll-2: 0deg;   animation-timing-function: cubic-bezier(.5, 0, .75, .9); }
  50%  { --roll-1: -90deg; --roll-2: 0deg;   animation-timing-function: cubic-bezier(.5, 0, .75, .9); }
  100% { --roll-1: -90deg; --roll-2: -90deg; }
}

/* =====================================================================
   CHECKBOX + RADIO
   ===================================================================== */
.check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--text-md);
  cursor: pointer;
  user-select: none;
}
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.check-box {
  width: 26px;
  height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--shape-box);
  --r: var(--radius-box);
  color: #fff;
}
.check--radio .check-box { border-radius: 50%; --r: 13px; }
.check-box > svg,
.check-box .radio-dot {
  grid-area: 1 / 1;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .15s ease, transform var(--motion-hover);
}
.check-box > svg { width: 15px; height: 15px; }
.radio-dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(var(--color-primary-deep), .45); }

.check input:checked + .check-box,
.check.is-indeterminate .check-box {
  --sc: var(--color-primary);
  --sd: var(--color-primary-deep);
  --sa: var(--shadow-tinted-fill);
  --se: var(--shadow-tinted-edge);
  --bg: var(--fill-primary);
  --bd: var(--glass-rim-width) solid var(--rim-primary);
  --in: inset 0 1px 2px rgba(var(--color-primary-light), .7), inset 0 -2px 4px rgba(var(--color-primary-deep), .3);
  --eg: var(--edge-glow-primary);
  --eh: var(--edge-halo-primary);
}
.check:not(.is-indeterminate) input:checked + .check-box .icon-check,
.check--radio input:checked + .check-box .radio-dot,
.check.is-indeterminate .icon-dash { opacity: 1; transform: scale(1); }

.check:is(:hover, .is-hover):not(.is-disabled) .check-box::after { filter: brightness(var(--hover-brightness)); }
.check:is(:hover, .is-hover):not(.is-disabled) input:checked + .check-box :is(svg, .radio-dot) { transform: scale(var(--hover-content-scale)); }
.check:is(:active, .is-active):not(.is-disabled) .check-box::before {
  transform: translate(calc(var(--sx) * var(--press-shadow-pull)), calc(var(--sy) * var(--press-shadow-pull)));
}
.check input:focus-visible + .check-box,
.check.is-focus .check-box {
  outline: var(--focus-width) solid rgba(var(--color-primary), var(--focus-alpha));
  outline-offset: var(--focus-gap);
  box-shadow: var(--focus-glow) rgba(var(--color-primary), var(--focus-glow-alpha));
}
.check.is-disabled { cursor: not-allowed; color: var(--color-ink-soft); }
.check.is-disabled .check-box { --sa: var(--disabled-shadow-fill); --se: var(--disabled-shadow-edge); }
.check.is-disabled .check-box::after { filter: saturate(var(--disabled-saturate)) brightness(1.06); opacity: var(--disabled-surface-opacity); }
.check.is-disabled .check-box :is(.glass-glint, .glass-edge-glow) { display: none; }
.check.is-disabled > span:last-child { opacity: var(--disabled-content-opacity); }

/* =====================================================================
   SEGMENTED CONTROL / TABS
   ===================================================================== */
.segmented {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);   /* equal columns, as wide as the longest label while there is room; in a tight spot the columns share the track and each label stays centred in its own tile, using up its side padding first (the slider follows the real column, see --sl-*) */
  max-width: 100%;
  height: var(--size-control-lg);
  padding: 4px;
  /* tabs follow the kit shape, irregular ones included: the slider shares the track's corner
     values, so at either end its corners run parallel to the track (--shape-tabs-inner = shape minus padding) */
  border-radius: var(--shape-control);
  --r: min(var(--radius-control), 29px);
  --n: 2;
  --i: 0;
}
.segmented-slider {
  position: absolute;
  top: 4px;
  bottom: 4px;
  /* --sl-l / --sl-w / --sl-f are written by the behaviour script from the selected option (exact column, whatever its width);
     without them the slider falls back to equal columns */
  left: var(--sl-l, 4px);
  width: var(--sl-w, calc((100% - 8px) / var(--n)));
  border-radius: var(--shape-tabs-inner, max(calc(var(--radius-control) - 4px), 0px));
  background: var(--solid-fill-domed);
  box-shadow: var(--solid-domed-inner), var(--solid-shadow-in-track);
  transform: translateX(calc(100% * var(--i) * var(--sl-f, 1)));
  transition: transform var(--motion-slide), left var(--motion-slide), width var(--motion-slide);
}
.segmented-option {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;   /* a label wider than its tile spills evenly to both sides, never to the right only */
  min-width: 0;
  padding: 0 26px;
  font: inherit;
  font-size: var(--text-lg);
  font-weight: var(--weight-control);
  letter-spacing: var(--tracking-control);
  text-transform: var(--case-control);
  color: var(--color-ink-soft);
  border-radius: var(--shape-tabs-inner, max(calc(var(--radius-control) - 4px), 0px));
  cursor: pointer;
  transition: color .2s ease;
}
/* letter-spacing is also added after the last letter, which pulls the visible word left of centre;
   an indent of the same size puts it back in the middle of the tile */
.segmented-option { text-indent: var(--tracking-control); }
.btn .glass-label { padding-left: var(--tracking-control); }
.segmented-option:is(:hover, .is-hover) { color: var(--color-ink); }
/* selected: text in the kit colour with a soft glow (replaces the old underline) */
.segmented-option[aria-selected="true"] {
  color: var(--color-accent-text);
  text-shadow: 0 0 10px rgba(var(--color-primary), .45), 0 0 2px rgba(var(--color-primary), .25);
}
.segmented-option:focus { outline: none; }
.segmented-option:is(:focus-visible, .is-focus) {
  outline: var(--focus-width) solid rgba(var(--color-primary), var(--focus-alpha));
  outline-offset: -2px;
}
.segmented-option:disabled { cursor: not-allowed; opacity: .45; }

/* =====================================================================
   FIELD (input + textarea)
   ===================================================================== */
.field-wrap { display: inline-flex; flex-direction: column; gap: 8px; max-width: 100%; }
.field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 280px;
  max-width: 100%;
  height: var(--size-control-md);
  padding: 0 18px;
  border-radius: var(--shape-control);
  --r: min(var(--radius-control), 27px);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-control);
  cursor: text;
}
.field input,
.field textarea {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  color: var(--field-ink, var(--color-ink));
}
/* the browser clips input text to the font's own line box, which cuts fonts whose letters rise above it:
   a taller line for typed text, no clipping for the placeholder (the field keeps its size) */
.field input { line-height: 1.6; position: relative; top: var(--field-text-shift, 0); }   /* a kit whose font rides high in its box nudges the text down */
.field input::placeholder { overflow: visible; }
.field input::placeholder,
.field textarea::placeholder { color: var(--field-placeholder, var(--color-placeholder)); }
.field-icon { width: 20px; height: 20px; flex: none; color: var(--color-placeholder); }
.field-ok { width: 22px; height: 22px; flex: none; color: var(--color-success); }
.field-err { width: 20px; height: 20px; flex: none; color: rgb(var(--color-danger)); }

.field--solid {
  --field-ink: var(--solid-ink);
  --field-placeholder: var(--solid-placeholder);
  background: var(--solid-fill-field);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .04), var(--solid-shadow);
}
.field.glass:is(:hover, .is-hover):not(.is-disabled)::after { filter: brightness(var(--hover-brightness)); }

.field { --focus-c: var(--color-primary); }
.field:is(:focus-within, .is-focus) {
  outline: var(--focus-width) solid rgba(var(--focus-c), var(--focus-alpha));
  outline-offset: var(--focus-gap);
}
.field.glass:is(:focus-within, .is-focus) { box-shadow: var(--focus-glow) rgba(var(--focus-c), var(--focus-glow-alpha)); }
.field--solid:is(:focus-within, .is-focus) {
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .04), var(--solid-shadow), var(--focus-glow) rgba(var(--focus-c), var(--focus-glow-alpha));
}

.field.is-error { --focus-c: var(--color-danger); }
.field--solid.is-error {
  border-color: rgba(var(--color-danger), .55);
  box-shadow: inset 0 0 0 1px rgba(var(--color-danger), .3), inset 0 -2px 4px rgba(0, 0, 0, .04), var(--solid-shadow);
}
.field-msg { padding-left: 18px; font-size: 13px; color: var(--color-ink-soft); }
.field-msg--error { color: rgb(var(--color-danger-deep)); }

.field.is-disabled { cursor: not-allowed; }
.field.is-disabled input,
.field.is-disabled textarea { cursor: not-allowed; }
.field--solid.is-disabled { opacity: var(--disabled-content-opacity); box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .03), 4px 6px 8px rgba(var(--color-neutral-shade), .1); }
.field.glass.is-disabled > :not(i) { opacity: var(--disabled-content-opacity); }

.field--action { padding-right: 0; }
.field-action {
  width: 50px;
  height: 50px;
  margin-right: -2px;
  flex: none;
  border: 0;
  border-radius: var(--shape-round);
  display: grid;
  place-items: center;
  color: #fff;
  cursor: pointer;
  background: var(--accent-solid);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .5), var(--solid-shadow-accent);
  transition: box-shadow var(--motion-press);
}
.field-action svg { width: 20px; height: 20px; transition: transform var(--motion-hover); }
.field-action:hover svg { transform: scale(var(--hover-content-scale)); }
.field-action:active {
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .5), inset 2px 3px 6px rgba(var(--color-primary-deep), .45),
              calc(2px * var(--elevation)) calc(4px * var(--elevation)) calc(6px * var(--elevation)) rgba(var(--color-primary-deep), .35);
}

.field--area {
  height: auto;
  align-items: flex-start;
  padding: 14px 18px;
  border-radius: var(--shape-menu);
  --r: var(--radius-menu);
}
.field--area textarea { min-height: 96px; resize: vertical; line-height: 1.45; }

/* =====================================================================
   SELECT
   ===================================================================== */
.select { position: relative; display: inline-block; max-width: 100%; }
.select-trigger { justify-content: space-between; border: 0; font: inherit; letter-spacing: var(--tracking-control); color: var(--color-ink); text-align: left; cursor: pointer; }
.select-trigger:disabled { cursor: not-allowed; }
.select-trigger.glass { background: transparent; }   /* no browser button face over the glass */
.select-value { flex: 1; }
.select-value.is-placeholder { color: var(--color-placeholder); }
.select-chevron { width: 18px; height: 18px; flex: none; color: var(--color-ink-soft); transition: transform var(--motion-hover); }
.select.is-open .select-chevron { transform: rotate(180deg); }

.select-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 14px);
  z-index: 20;
  margin: 0;
  padding: 8px;
  list-style: none;
  border-radius: var(--shape-menu);
  --r: var(--radius-menu);
  --sx: calc(10px * var(--elevation)); --sy: calc(16px * var(--elevation)); --sb: calc(6px * var(--elevation));
  --sa: .14; --se: .3;
  --blur: var(--glass-blur-soft);
  --bg: rgba(var(--panel-rgb), calc(.45 * var(--panel-alpha)));
}
.select:not(.is-open) .select-list { display: none; }
.select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-radius: min(var(--radius-menu), 12px);
  font-size: 15px;
  cursor: pointer;
  transition: background-color .15s ease;
}
.select-option:is(:hover, .is-hover) { background: rgba(255, 255, 255, .55); }
.select-option[aria-selected="true"] { font-weight: var(--weight-semibold); color: var(--color-accent-text); }
.select-option svg { width: 16px; height: 16px; opacity: 0; }
.select-option[aria-selected="true"] svg { opacity: 1; }

/* =====================================================================
   DATE PICKER
   Month view with one selected day, quick month / year pickers, and events on days.
   Two ways to use it:
     .cal          the calendar itself (inline, always visible)
     .datepicker   a field that opens the same calendar underneath
   Markup of the calendar:
     <div class="cal glass glass--card glass--container" data-view="days"> light layers, hidden input
       (glass--container keeps the panel surface under the selected day and the arrows)
       <div class="cal-head"> nav button, .cal-title (.cal-month + .cal-year buttons), nav button </div>
       <div class="cal-dows"> 7 x .cal-dow </div>                           (days view only)
       <div class="cal-grid"> 42 x <button class="cal-day"> <span class="cal-num">14</span> .cal-marks </button> </div>
       <div class="cal-agenda"> the selected day's events </div>            (optional)
     </div>
   Views: data-view="days" | "months" | "years" (the title buttons switch them; months and years use
   the same cells with .cal-day--wide in 3 columns).
   Day classes: is-weekend, is-outside (neighbour month), is-today, is-disabled;
   the selected day carries aria-selected="true" plus "glass glass--primary glass-pressable" and the light layers.
   Events for the app: "change" (detail.date, detail.events) when a day is picked,
   "monthchange" (detail.year, detail.month) when the shown month changes, "eventopen" (detail.event)
   when an agenda row is clicked. All bubble, so one listener on the page is enough.
   The whole calendar is fluid: 7 equal columns, square days, so it fits a 280px phone.
   ===================================================================== */
.cal {
  isolation: isolate;          /* its own layers stay under the days, above the page */
  display: grid;
  gap: 10px;
  width: 340px;
  max-width: 100%;
  min-width: 0;
  padding: min(16px, 5%);      /* narrower phones get a tighter frame so the days stay big enough to tap */
  color: var(--color-ink);
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
}
/* on a tablet or desktop the standalone calendar is a size bigger; the field's panel stays compact (its own width below) */
@media (min-width: 768px) {
  .cal { width: 384px; gap: 12px; }
  .cal .cal-day { font-size: var(--text-lg); }
  .datepicker-panel .cal-day { font-size: var(--text-md); }
}
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cal-title { display: flex; flex-direction: column; align-items: center; min-width: 0; line-height: 1.15; }
/* month and year are buttons: they open the quick pickers */
.cal-month,
.cal-year {
  border: 0;
  background: transparent;
  padding: 0 8px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: min(var(--radius-control), 10px);
  transition: color .15s ease;
}
.cal-month { font-family: var(--font-display); font-size: var(--text-title); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); }
.cal-year { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-ink-soft); }
.cal-month:is(:hover, .is-hover),
.cal-year:is(:hover, .is-hover),
.cal-month[aria-pressed="true"],
.cal-year[aria-pressed="true"] { color: var(--color-accent-text); }
.cal-month:focus, .cal-year:focus { outline: none; }
.cal-month:is(:focus-visible, .is-focus),
.cal-year:is(:focus-visible, .is-focus) { outline: var(--focus-width) solid rgba(var(--color-primary), var(--focus-alpha)); outline-offset: 1px; }
/* month arrows: the kit's icon button, a size smaller than the standalone one */
.cal-nav { width: 36px; height: 36px; --r: min(var(--radius-control), 18px); flex: none; }
.cal-nav svg { width: 16px; height: 16px; }
.cal-nav.btn-icon.glass { color: var(--color-ink); }           /* ink arrows: white ones vanish on the light panel */
.cal-nav.btn-icon.glass > svg { filter: none; }

.cal-dows,
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal-grid--months,
.cal-grid--years { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cal-dow {
  padding: 4px 0;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.cal-day {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-control);
  color: var(--color-ink);
  border-radius: var(--r);
  --r: min(var(--radius-control), 20px);
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.cal-day--wide { aspect-ratio: auto; height: 44px; }         /* month and year cells */
.cal-num { display: inline-block; position: relative; transition: transform var(--motion-hover); }
.cal-dow.is-weekend,
.cal-day.is-weekend { color: color-mix(in oklch, rgb(var(--color-danger)) 68%, var(--color-ink) 32%); } /* weekend red leans toward the kit's text colour so it reads on light and dark pages alike */
.cal-day.is-outside .cal-num { opacity: .4; }
.cal-day.is-today .cal-num { color: var(--color-accent-text); font-weight: var(--weight-bold); }
/* today's dot and the event marks share the same spot under the number */
.cal-dot,
.cal-marks {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9%;
  display: flex;
  justify-content: center;
  gap: 3px;
  pointer-events: none;
}
.cal-dot::before,
.cal-mark { content: ""; display: block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.cal-dot { color: var(--color-accent-text); }
.cal-mark { color: rgb(var(--color-primary)); }
.cal-mark:nth-child(2) { color: rgb(var(--color-secondary)); }
.cal-mark:nth-child(3) { color: var(--color-ink-soft); }
/* the selected day is a small primary glass tile: white number, dots and all */
.cal-day[aria-selected="true"] { color: var(--color-on-tinted); }
.cal-day[aria-selected="true"] :is(.cal-num, .cal-dot, .cal-mark) { color: inherit; opacity: 1; }
.cal-day[aria-selected="true"] .cal-num { font-weight: var(--weight-semibold); }

.cal-day:is(:hover, .is-hover):not(:disabled, .is-disabled, [aria-selected="true"]) { background: rgba(255, 255, 255, .55); }
.cal-day:is(:hover, .is-hover):not(:disabled, .is-disabled) .cal-num { transform: scale(var(--hover-content-scale)); }
.cal-day:is(:active, .is-active):not(:disabled, .is-disabled, [aria-selected="true"]) {
  background: rgba(var(--color-neutral-shade), .14);
  box-shadow: var(--press-inner-shadow) rgba(var(--color-neutral-shade-deep), calc(var(--press-inner-alpha) * .5));
}
.cal-day:is(:active, .is-active):not(:disabled, .is-disabled) .cal-num { transform: scale(var(--press-content-scale)); }
.cal-day:focus { outline: none; }
.cal-day:is(:focus-visible, .is-focus) {
  outline: var(--focus-width) solid rgba(var(--focus-c, var(--color-primary)), var(--focus-alpha));
  outline-offset: 1px;
}
.cal-day:is(:disabled, .is-disabled) { cursor: not-allowed; color: var(--color-placeholder); }
.cal-day:is(:disabled, .is-disabled) .cal-num { opacity: var(--disabled-content-opacity); }

/* agenda: the selected day's events, each row opens the event */
.cal-agenda {
  display: grid;
  gap: 4px;
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--color-neutral-shade), .18);
  text-align: left;
}
.cal-agenda-head {
  padding: 0 12px 4px;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.cal-event {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-ink);
  text-align: left;
  border-radius: min(var(--radius-control), 12px);
  cursor: pointer;
  transition: background-color .15s ease;
}
.cal-event::before { content: ""; flex: none; width: 4px; height: 18px; border-radius: 2px; background: rgb(var(--color-primary)); }
.cal-event:nth-of-type(2)::before { background: rgb(var(--color-secondary)); }
.cal-event:nth-of-type(3)::before { background: var(--color-ink-soft); }
.cal-event:is(:hover, .is-hover) { background: rgba(255, 255, 255, .55); }
.cal-event:is(:active, .is-active) { background: rgba(var(--color-neutral-shade), .14); }
.cal-event:focus { outline: none; }
.cal-event:is(:focus-visible, .is-focus) { outline: var(--focus-width) solid rgba(var(--color-primary), var(--focus-alpha)); outline-offset: -2px; }
.cal-event-time { flex: none; min-width: 42px; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; color: var(--color-ink-soft); }
.cal-event-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-agenda-empty { padding: 9px 12px; font-size: var(--text-sm); color: var(--color-placeholder); }

/* field that opens the calendar (same field as the select) */
.datepicker { position: relative; display: inline-block; max-width: 100%; }
.datepicker-trigger { justify-content: flex-start; }
.datepicker-trigger .select-value { flex: 1; }
.datepicker-panel {
  position: absolute;
  left: 0;
  top: calc(100% + 14px);
  z-index: 20;
  width: 340px;
  max-width: calc(100vw - 32px);
}
.datepicker:not(.is-open) .datepicker-panel { display: none; }
.datepicker .select-chevron { transition: transform var(--motion-hover); }
.datepicker.is-open .select-chevron { transform: rotate(180deg); }

/* =====================================================================
   SLIDER
   ===================================================================== */
.slider {
  position: relative;
  width: 280px;
  max-width: 100%;
  height: 34px;
  --v: 40;
}
.slider-track,
.slider-fill {
  position: absolute;
  top: 50%;
  height: 12px;
  margin-top: -6px;
  border-radius: min(var(--radius-control), 6px);
  --r: min(var(--radius-control), 6px);
}
.slider-track { left: 0; right: 0; --bg: rgba(255, 255, 255, .2); }
.slider-fill  { left: 0; width: calc(var(--v) * 1%); }
.slider-thumb {
  position: absolute;
  top: 50%;
  left: calc(var(--v) * 1%);
  z-index: 1;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: var(--shape-round);
  background: var(--solid-fill);
  box-shadow: inset 0 1px 2px #fff, var(--solid-shadow-small);
  transition: transform var(--motion-hover), box-shadow var(--motion-press);
  pointer-events: none;
}
.slider input[type="range"] {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.slider-value {
  position: absolute;
  bottom: calc(100% + 6px);
  left: calc(var(--v) * 1%);
  transform: translateX(-50%);
  padding: 3px 9px;
  border-radius: min(var(--radius-control), 10px);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  background: rgba(255, 255, 255, .6);
  box-shadow: 3px 5px 8px rgba(var(--color-neutral-shade), .14);
  white-space: nowrap;
}
.slider:is(:hover, .is-hover):not(.is-disabled) .slider-thumb { transform: scale(var(--hover-content-scale)); }
.slider:is(:active, .is-active):not(.is-disabled) .slider-thumb {
  transform: scale(var(--press-content-scale));
  box-shadow: inset 0 1px 2px #fff, inset 2px 3px 5px rgba(var(--color-neutral-shade), .14),
              calc(2px * var(--elevation)) calc(4px * var(--elevation)) calc(5px * var(--elevation)) rgba(var(--color-neutral-shade), .2);
}
.slider:is(:focus-within, .is-focus) .slider-thumb {
  outline: var(--focus-width) solid rgba(var(--color-primary), var(--focus-alpha));
  outline-offset: var(--focus-gap);
}
.slider.is-disabled { opacity: .6; }
.slider.is-disabled input { cursor: not-allowed; }
.slider.is-disabled .slider-fill::after { filter: saturate(var(--disabled-saturate)); }
.slider.is-disabled :is(.glass-glint, .glass-edge-glow, .glass-shadow-glint) { display: none; }

/* =====================================================================
   BADGE / CHIP
   ===================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 13px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: var(--weight-control);
  letter-spacing: var(--tracking-control);
  text-transform: var(--case-control);
  white-space: nowrap;
  color: var(--color-ink);
  border-radius: var(--shape-control);
  --r: min(var(--radius-control), 16px);
}
.badge.glass--primary, .badge.glass--secondary { color: var(--color-on-tinted); --r: min(var(--radius-control), 16px); }
.badge.glass--secondary { color: var(--color-on-secondary, var(--color-on-tinted)); }
.badge.is-selectable { cursor: pointer; }
.badge.is-selectable:is(:hover, .is-hover)::after { filter: brightness(var(--hover-brightness)); }
.badge:focus { outline: none; }
.badge.is-selectable:focus-visible {
  outline: var(--focus-width) solid rgba(var(--color-primary), var(--focus-alpha));
  outline-offset: var(--focus-gap);
}
.badge-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 6px var(--color-success); }
.badge-remove {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: -5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  cursor: pointer;
  transition: background-color .15s ease;
}
.badge-remove:hover { background: rgba(255, 255, 255, .7); }
.badge-remove svg { width: 11px; height: 11px; }

/* =====================================================================
   AVATAR
   ===================================================================== */
.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  padding: 3px;
  border-radius: var(--shape-round);
}
.avatar--sm { width: 36px; height: 36px; font-size: 12px; --r: min(var(--radius-control), 18px); }
.avatar--md { width: 48px; height: 48px; font-size: 15px; --r: min(var(--radius-control), 24px); }
.avatar--lg { width: 64px; height: 64px; font-size: 19px; --r: min(var(--radius-control), 32px); }
.avatar-face {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: inherit;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-control);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .45), inset 0 -2px 4px rgba(0, 0, 0, .12);
}
.avatar-face svg { width: 55%; height: 55%; }
.avatar-face--primary   { background: var(--accent-solid); color: var(--color-on-tinted); }
.avatar-face--secondary { background: linear-gradient(160deg, rgb(var(--color-secondary)), rgb(var(--color-secondary-deep))); color: var(--color-on-tinted); }
.avatar-face--neutral   { background: var(--solid-fill); color: var(--solid-ink); }
.avatar-face--icon      { background: var(--solid-fill); color: var(--solid-ink-soft); }
.avatar-status {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 28%;
  height: 28%;
  min-width: 10px;
  min-height: 10px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.avatar-status--online  { background: var(--color-success); }
.avatar-status--away    { background: #f2b33d; }
.avatar-status--offline { background: #a9a6b0; }
.avatar-group { display: inline-flex; }
.avatar-group .avatar + .avatar { margin-left: -12px; }

/* =====================================================================
   PROGRESS
   ===================================================================== */
.progress { display: grid; gap: 10px; width: 280px; max-width: 100%; --v: 40; }
.progress-head { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; letter-spacing: var(--tracking-control); color: var(--color-ink-soft); }
.progress-head span:first-child { color: var(--color-ink); font-weight: var(--weight-medium); }
.progress-bar { position: relative; height: 10px; }
.progress-track,
.progress-fill {
  position: absolute;
  top: 0;
  height: 10px;
  border-radius: min(var(--radius-control), 5px);
  --r: min(var(--radius-control), 5px);
}
.progress-track { left: 0; right: 0; --bg: rgba(255, 255, 255, .2); }
.progress-fill  { left: 0; width: calc(var(--v) * 1%); transition: width .4s ease; }
/* indeterminate: the fill loops left to right. It grows in from the left edge and
   shrinks into the right edge, so it never leaves the track (no clipping needed,
   the glass shadow stays visible). */
/* Continuous: both edges move at one constant speed (linear), the next loop starts
   the moment the previous one leaves, so there is no pause. Keyframe positions are
   where the leading edge reaches 35% and 100% of a 135% journey. */
.progress.is-indeterminate .progress-fill { left: 0; width: 0; animation: progress-loop 1.6s linear infinite; }
@keyframes progress-loop {
  0%      { left: 0;    width: 0; }
  25.93%  { left: 0;    width: 35%; }
  74.07%  { left: 65%;  width: 35%; }
  100%    { left: 100%; width: 0; }
}

/* =====================================================================
   CARD
   ===================================================================== */
.gcard {
  isolation: isolate;          /* own stacking context: its glass layers stay above the page glass it sits on */
  display: grid;
  gap: 14px;
  width: 320px;
  max-width: 100%;
  padding: 22px;
  color: var(--color-ink);
  text-align: left;
}
.gcard-top { display: flex; align-items: center; gap: 12px; }
.gcard :is(h3, h4) { margin: 0; font-family: var(--font-display); font-size: var(--text-title); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); }
.gcard-top > div > span { font-size: 13px; color: var(--color-ink-soft); }   /* only the subtitle, not the avatar inside */
.gcard p { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-soft); }
.gcard-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.gcard--color {
  --sc: var(--color-primary);
  --sd: var(--color-primary-deep);
  --sa: var(--shadow-colour-fill);
  --se: var(--shadow-colour-edge);
  --bd: var(--glass-rim-width) solid rgba(var(--color-primary-light), .6);
  --eg: var(--edge-glow-primary);
  --eh: var(--edge-halo-primary);
  --bg:
    radial-gradient(80% 90% at 0% 0%, rgba(var(--color-secondary-light), calc(.8 * var(--tint-opacity))), transparent 65%),
    radial-gradient(80% 80% at 100% 10%, rgba(var(--color-primary-light), calc(.75 * var(--tint-opacity))), transparent 65%),
    radial-gradient(90% 80% at 90% 100%, rgba(var(--color-primary), calc(.45 * var(--tint-opacity))), transparent 65%),
    rgba(255, 255, 255, .18);
  --caust:
    radial-gradient(26% 18% at 22% 96%, rgba(var(--color-secondary), .7), transparent),
    radial-gradient(26% 18% at 58% 97%, rgba(var(--color-primary), .7), transparent),
    radial-gradient(18% 30% at 97% 74%, rgba(var(--color-primary-light), .75), transparent);
}
.gcard.is-clickable { cursor: pointer; }
.gcard.is-clickable::before { transition: transform var(--motion-hover); }
.gcard.is-clickable:is(:hover, .is-hover)::after { filter: brightness(1.04); }
.gcard.is-clickable:is(:hover, .is-hover)::before { transform: translate(calc(var(--sx) * 1.3), calc(var(--sy) * 1.3)); }

/* =====================================================================
   TOOLTIP
   ===================================================================== */
.tooltip-wrap { position: relative; display: inline-flex; }
.tooltip {
  position: absolute;
  z-index: 30;
  left: 50%;
  bottom: calc(100% + 14px);
  padding: 8px 12px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-control);
  color: var(--color-ink);
  border-radius: var(--shape-menu);
  --r: min(var(--radius-menu), 12px);
  --sx: calc(6px * var(--elevation)); --sy: calc(9px * var(--elevation)); --sb: calc(3px * var(--elevation));
  --sa: .14; --se: .28;
  --bg: rgba(var(--panel-rgb), calc(.6 * var(--panel-alpha)));           /* readable text */
  --blur: var(--glass-blur-soft);
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}
.tooltip-wrap:is(:hover, :focus-within, .is-open) .tooltip { opacity: 1; transform: translate(-50%, 0); }
.tooltip--bottom { bottom: auto; top: calc(100% + 14px); transform: translate(-50%, -6px); }
.tooltip--right  { left: calc(100% + 14px); bottom: auto; top: 50%; transform: translate(-6px, -50%); }
.tooltip--left   { left: auto; right: calc(100% + 14px); bottom: auto; top: 50%; transform: translate(6px, -50%); }
.tooltip-wrap:is(:hover, :focus-within, .is-open) .tooltip--bottom { transform: translate(-50%, 0); }
.tooltip-wrap:is(:hover, :focus-within, .is-open) :is(.tooltip--right, .tooltip--left) { transform: translate(0, -50%); }

/* =====================================================================
   MODAL
   ===================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  font-family: var(--font-sans);
  background: rgba(var(--color-neutral-shade-deep), .22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .2s ease;
}
.modal-backdrop.is-open { opacity: 1; }
.modal {
  isolation: isolate;
  display: grid;
  gap: 14px;
  width: min(420px, 100%);
  padding: 24px 24px 22px;
  color: var(--color-ink);
  text-align: left;
  --bg: rgba(var(--panel-rgb), calc(.5 * var(--panel-alpha)));
  --blur: var(--glass-blur-panel);
  transform: translateY(10px) scale(.98);
  transition: transform .25s ease;
}
.modal-backdrop.is-open .modal,
.modal.is-static { transform: none; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.modal h3 { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); }
.modal-head .btn-icon { margin: -6px -6px 0 0; }
.modal p { margin: 0; font-size: var(--text-sm); line-height: 1.55; color: var(--color-ink-soft); }
.modal .field-wrap { display: flex; }
.modal .field { width: 100%; }
.modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 6px; }

/* =====================================================================
   TOAST
   ===================================================================== */
.toast-stack {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 110;
  display: grid;
  gap: 14px;
  width: min(360px, calc(100vw - 32px));
  font-family: var(--font-sans);
}
.toast {
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 360px;
  max-width: 100%;
  padding: 14px 14px 14px 16px;
  color: var(--color-ink);
  text-align: left;
  border-radius: var(--shape-menu);
  --r: min(var(--radius-menu), 18px);
  --bg: rgba(var(--panel-rgb), calc(.55 * var(--panel-alpha)));
  --blur: var(--glass-blur-soft);
  animation: toast-in .3s ease both;
}
.toast.is-static { animation: none; }
.toast.is-leaving { animation: toast-out .25s ease both; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(12px); } }
@keyframes toast-out { to   { opacity: 0; transform: translateY(12px); } }
.toast-icon {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--shape-round);
  color: #fff;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .45), 3px 5px 8px rgba(var(--color-neutral-shade), .2);
}
.toast-icon svg { width: 16px; height: 16px; }
.toast-icon--info    { background: var(--accent-solid); color: var(--color-on-tinted); }
.toast-icon--success { background: linear-gradient(160deg, #5fd489, #2f9e58); }
.toast-icon--error   { background: linear-gradient(160deg, rgb(var(--color-danger)), rgb(var(--color-danger-deep))); }
.toast-text { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: var(--text-sm); line-height: 1.4; }
.toast-text strong { font-weight: var(--weight-semibold); letter-spacing: var(--tracking-control); }
.toast-text span { color: var(--color-ink-soft); }
.toast-close {
  width: 26px;
  height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  margin: -2px -2px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-ink-soft);
  cursor: pointer;
}
.toast-close:hover { background: rgba(255, 255, 255, .5); color: var(--color-ink); }
.toast-close svg { width: 14px; height: 14px; }

@media (prefers-reduced-motion: reduce) {
  .progress.is-indeterminate .progress-fill { animation-duration: 4s; }
  .toast, .toast.is-leaving { animation: none; }
  .modal, .modal-backdrop, .tooltip { transition: none; }
}

/* ---------- browser leftovers: selected text and autofill ----------
   Selected text takes the kit's primary colour instead of the browser's blue.
   When the browser fills a saved login it paints the field pale yellow;
   the long transition keeps the field looking as designed. */
[data-kit] ::selection { background: rgba(var(--color-primary), .28); }
[data-kit] input:-webkit-autofill,
[data-kit] textarea:-webkit-autofill,
[data-kit] select:-webkit-autofill {
  -webkit-text-fill-color: currentColor;
  transition: background-color 600000s 0s, color 600000s 0s;
}


/* ---------- glass-blocks.css ---------- */
/* =====================================================================
   BLOCKS - page sections built only from the kit's components and tokens.
   This file is layout only (grid, spacing, widths, responsive behaviour).
   Colours, surfaces, shadows and type come from the tokens and the recipe,
   so every block looks right in every kit without a single override here.

   Responsive: each block is a CSS container and adapts to ITS OWN width,
   not the viewport. Drop a block into a narrow column and it turns into
   its mobile form by itself. Breakpoints: 900 (two columns fold) and 640 (phone).
   Width: .block--full spans the whole row, others centre on --block-max.
   ===================================================================== */
.block {
  container-type: inline-size;
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-ink);
}
.block-inner {
  width: 100%;
  max-width: var(--block-max, 1180px);
  margin: 0 auto;
  min-width: 0;
}
.block--full .block-inner { max-width: none; }
.block--narrow { --block-max: 920px; }

.block a { color: inherit; text-decoration: none; }
.block :is(h1, h2, h3, h4, p) { margin: 0; }

/* brand: a small mark in the primary colour + the name in the display font */
.block-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
  white-space: nowrap;
}
.brand-mark {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: var(--shape-inner, 9px);
  --r: 9px;
}
.brand-mark::before, .brand-mark::after { border-radius: inherit; }
.brand-mark svg { position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; color: var(--color-accent-text); }

/* ---------- HEADER: floating bar, links in the middle, actions on the right ---------- */
.block-header { border-radius: var(--shape-card); }
.block-header .block-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 68px;
  padding: 10px 14px 10px 22px;
}
.block-nav {
  display: flex;
  flex: 1;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}
.block-nav a {
  padding: 8px 14px;
  border-radius: var(--shape-control);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-control);
  text-transform: var(--case-control);
  color: var(--color-ink-soft);
  transition: color var(--motion-hover), background-color var(--motion-hover);
}
.block-nav a:hover { color: var(--color-ink); }
.block-nav a.is-current { color: var(--color-ink); font-weight: var(--weight-semibold); }
.block-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.block-menu { display: none; }

@container (max-width: 640px) {
  .block-header .block-inner { gap: 12px; min-height: 60px; padding: 8px 10px 8px 16px; }
  .block-nav, .block-actions .btn:not(.glass--primary) { display: none; }
  .block-menu { display: inline-flex; }
  .block-actions .btn { padding-inline: 14px; }
  .block-brand { min-width: 0; }
  .block-brand > span:last-child { overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- HERO: copy on the left, a live piece of the product on the right ---------- */
.block-hero { --block-max: 1120px; padding: clamp(28px, 6cqw, 84px) clamp(16px, 3cqw, 32px); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(28px, 5cqw, 72px);
}
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; min-width: 0; }
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 5.4cqw, 64px);
  font-weight: var(--weight-bold);
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.hero-lead {
  max-width: 50ch;
  font-size: clamp(16px, 1.5cqw, 19px);
  line-height: 1.55;
  color: var(--color-ink-soft);
  text-wrap: pretty;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero-proof { display: flex; align-items: center; gap: 14px; margin-top: 8px; font-size: var(--text-sm); color: var(--color-ink-soft); }
.hero-faces { display: flex; }
.hero-faces .avatar + .avatar { margin-left: -9px; }

/* the visual: a small, believable screen of the product made of the kit's own components */
.hero-visual {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  border-radius: var(--shape-card);
  min-width: 0;
}
.hero-visual-top { display: flex; align-items: center; gap: 12px; }
.hero-visual-top > div { display: flex; flex-direction: column; min-width: 0; }
.hero-visual-top h4 {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  line-height: 1.15;
  text-wrap: balance;
}
.hero-visual-top span { font-size: 13px; color: var(--color-ink-soft); }
.hero-visual-top .badge { flex-shrink: 0; margin-left: auto; }
.hero-visual .progress { width: 100%; }
.hero-visual-list { display: flex; flex-direction: column; gap: 12px; }
.hero-visual .segmented { width: 100%; }
.hero-visual-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

@container (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { max-width: 560px; }
}
@container (max-width: 640px) {
  .block-hero { padding: 28px 4px; }
  .hero-title { font-size: clamp(30px, 9.5cqw, 40px); }
  .hero-cta { width: 100%; }
  .hero-cta .btn { flex: 1 1 auto; }
  .hero-visual { padding: 18px; }
}

/* ---------- FOOTER: brand + newsletter, link columns, thin bottom bar ---------- */
.block-footer { border-radius: var(--shape-card); }
.block-footer .block-inner { padding: clamp(28px, 4cqw, 48px) clamp(20px, 3.5cqw, 44px) 22px; }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 36px 28px;
}
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.footer-brand p { max-width: 34ch; font-size: var(--text-sm); line-height: 1.55; color: var(--color-ink-soft); }
.footer-news { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; max-width: 380px; }
.footer-news .field-wrap { flex: 1 1 180px; min-width: 0; }
.footer-news .field { width: 100%; }
.footer-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.footer-col h4 {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.footer-col a { font-size: var(--text-sm); color: var(--color-ink); opacity: .82; transition: opacity var(--motion-hover); }
.footer-col a:hover { opacity: 1; }
.footer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--color-ink) 10%, transparent);
  font-size: 13px;
  color: var(--color-ink-soft);
}
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.footer-legal a:hover { color: var(--color-ink); }
.footer-side { display: flex; align-items: center; gap: 10px; }

/* the three link columns always share the full width: brand and newsletter move to their own row above them,
   and on a phone the third column spans the row with its links in two columns, so no column is ever left alone */
@container (max-width: 900px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-news { max-width: 460px; }
}
@container (max-width: 640px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
  .footer-col:last-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
  }
  .footer-col:last-child h4 { grid-column: 1 / -1; }
  .footer-bar { flex-direction: column; align-items: flex-start; margin-top: 28px; }
}

/* ---------- HERO CENTRED: everything on the centre line, a wide panel of the product below ---------- */
.block-hero--centre { --block-max: 1000px; }
.hero-centre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.hero-centre .hero-title { font-size: clamp(34px, 6cqw, 62px); }
.hero-centre .hero-lead { max-width: 54ch; }
.hero-centre .hero-cta { justify-content: center; }
.hero-strip {
  display: grid;
  gap: 18px;
  width: 100%;
  margin-top: 18px;
  padding: 22px 24px;
  border-radius: var(--shape-card);
  text-align: left;
}
.hero-strip .segmented { width: 100%; }
.hero-strip .progress { width: 100%; }
.hero-strip-row { display: flex; align-items: center; gap: 12px; }
.hero-strip-row > div { display: flex; flex-direction: column; min-width: 0; }
.hero-strip-row strong { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); }
.hero-strip-row span { font-size: 13px; color: var(--color-ink-soft); }
.hero-strip-row .badge { flex-shrink: 0; margin-left: auto; }
@container (max-width: 640px) {
  .hero-centre .hero-cta { width: 100%; flex-direction: column; }
  .hero-centre .hero-cta .btn { width: 100%; }
  .hero-strip { padding: 16px; }
}

/* ---------- HERO ON A PHOTO: image edge to edge, copy on a card over it ---------- */
.block-hero--photo {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(380px, 46cqw, 560px);
  padding: clamp(24px, 4cqw, 56px) clamp(16px, 3cqw, 48px);
  border-radius: var(--shape-card);
  overflow: hidden;
  isolation: isolate;
}
.hero-photo-img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.block-hero--photo::before {            /* keeps the card readable whatever the photo does */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .12) 55%, transparent);
}
.hero-photo-inner { display: flex; }
/* a plate in the kit's own page colour sits under the card: a translucent card alone is unreadable on a photo,
   and the plate keeps every family looking like itself (glass stays glass, flat stays flat) */
.hero-photo-plate {
  isolation: isolate;          /* its own stacking context, or its background would cover the glass layers inside */
  width: min(460px, 100%);
  border-radius: var(--shape-card);
  background: var(--page-bg);
  background-attachment: scroll;
}
.hero-photo-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  width: 100%;
  padding: 30px;
  border-radius: var(--shape-card);
}
.hero-photo-card .hero-title { font-size: clamp(28px, 3.4cqw, 42px); }
.hero-photo-card .hero-lead { font-size: var(--text-md); }
@container (max-width: 640px) {
  .block-hero--photo { min-height: 0; padding: 18px; }
  .hero-photo-plate { width: 100%; }
  .hero-photo-card { padding: 22px; }
  .hero-photo-card .hero-cta { width: 100%; }
  .hero-photo-card .hero-cta .btn { flex: 1 1 auto; }
}

/* ---------- HERO EDITORIAL: oversized headline, a thin column of facts beside it ---------- */
.block-hero--editorial { padding: clamp(28px, 5cqw, 76px) clamp(16px, 3cqw, 32px); }
.hero-ed {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  align-items: end;
  gap: clamp(28px, 5cqw, 72px);
}
.hero-ed-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.hero-ed-kicker {
  font-size: 12px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-ink-soft);
}
.hero-title--xl {
  font-size: clamp(38px, 8cqw, 96px);
  line-height: .96;
  letter-spacing: calc(var(--tracking-display) - .01em);
}
.hero-ed-meta { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hero-ed-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--color-ink) 18%, transparent);
}
.hero-ed-row span { font-size: 12px; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--color-ink-soft); }
.hero-ed-row strong { font-size: var(--text-md); font-weight: var(--weight-medium); }
.hero-ed-meta .btn { margin-top: 8px; align-self: flex-start; }
@container (max-width: 900px) {
  .hero-ed { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .hero-ed-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; }
  .hero-ed-meta .btn { grid-column: 1 / -1; }
}
@container (max-width: 640px) {
  .hero-ed-meta { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- HERO BENTO: copy tile, photo tile and three numbers ---------- */
.block-hero--editorial, .block-hero--bento { --block-max: 1120px; }
.block-hero--bento { padding: clamp(24px, 4cqw, 56px) clamp(16px, 3cqw, 32px); }
.hero-bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6cqw, 20px);
}
.bento-tile { border-radius: var(--shape-card); min-width: 0; }
.bento-lead {
  grid-column: span 2;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: clamp(22px, 3cqw, 38px);
}
.bento-lead .hero-title { font-size: clamp(30px, 4.4cqw, 54px); }
.bento-photo { grid-row: span 2; overflow: hidden; }
.bento-photo img { display: block; width: 100%; height: 100%; min-height: 150px; object-fit: cover; }
.bento-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 20px 22px;
}
.bento-stat strong {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2cqw, 40px);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: var(--tracking-display);
}
.bento-stat span { font-size: 13px; line-height: 1.35; color: var(--color-ink-soft); }
@container (max-width: 900px) {
  .bento-lead, .bento-photo { grid-column: 1 / -1; grid-row: auto; }   /* copy, then photo, then the three numbers in a row */
  .bento-photo img { height: 210px; min-height: 0; }
}
@container (max-width: 640px) {
  .hero-bento { grid-template-columns: minmax(0, 1fr); }
  .bento-photo img { min-height: 180px; }
  .bento-lead .hero-cta { width: 100%; }
  .bento-lead .hero-cta .btn { width: 100%; }
}


/* ---------- SECTION HEAD: shared by pricing, features, testimonials, FAQ ---------- */
.sec-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 760px; }
.sec-head.is-centre { align-items: center; margin: 0 auto; text-align: center; }
.sec-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4cqw, 42px);
  font-weight: var(--weight-bold);
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.sec-lead { font-size: var(--text-md); line-height: 1.55; color: var(--color-ink-soft); text-wrap: pretty; }
.sec-toggle { margin-top: 6px; }

/* ---------- PRICING: three plans, the middle one lifted ---------- */
.block-pricing, .block-features, .block-quotes, .block-faq { --block-max: 1120px; padding: clamp(28px, 4.5cqw, 72px) clamp(16px, 3cqw, 32px); }
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: clamp(14px, 1.8cqw, 22px);
  margin-top: clamp(28px, 4cqw, 52px);
}
.price-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: clamp(20px, 2.4cqw, 30px);
  border-radius: var(--shape-card);
  min-width: 0;
}
.price-card.is-best { padding-block: clamp(28px, 3.4cqw, 44px); }   /* the picked plan is taller, never moved sideways */
.price-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.price-top h3 {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  text-transform: var(--case-control);
}
.price-for { font-size: 13px; line-height: 1.4; color: var(--color-ink-soft); }
.price-amount { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 4px; }
.price-amount strong {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4cqw, 52px);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: var(--tracking-display);
}
.price-amount span { font-size: 13px; color: var(--color-ink-soft); }
.price-year {                                   /* only on the yearly plan: what actually leaves the account */
  margin-top: -2px;
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--color-accent-text);
}
.price-list { display: grid; gap: 10px; width: 100%; margin: 4px 0 8px; padding: 0; list-style: none; }
.price-list li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--text-sm); line-height: 1.45; }
.price-list svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--color-accent-text); }
.price-card .btn { width: 100%; margin-top: auto; }
.block-pricing .price-note { margin-top: clamp(32px, 4cqw, 48px); font-size: 13px; text-align: center; color: var(--color-ink-soft); }
@container (max-width: 900px) {
  .price-grid { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; }
  .price-card.is-best { padding-block: clamp(20px, 2.4cqw, 30px); }
}

/* ---------- FEATURES: six cards with an icon ---------- */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8cqw, 22px);
  margin-top: clamp(28px, 4cqw, 52px);
}
.feat-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 2.4cqw, 28px);
  border-radius: var(--shape-card);
  min-width: 0;
}
.feat-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--shape-inner, 12px);
  --r: 12px;
  color: var(--color-accent-text);
}
.feat-icon svg { width: 20px; height: 20px; }
.feat-item h3 {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--tracking-display);
}
.feat-item p { font-size: var(--text-sm); line-height: 1.55; color: var(--color-ink-soft); }
@container (max-width: 900px) { .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 640px) { .feat-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- TESTIMONIALS: one big quote, two small ones ---------- */
.quote-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(14px, 1.8cqw, 22px);
}
.quote-lead {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(24px, 3cqw, 40px);
  border-radius: var(--shape-card);
  min-width: 0;
}
.quote-mark { color: var(--color-accent-text); opacity: .55; }
.quote-mark svg { width: 34px; height: 34px; }
.quote-lead blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8cqw, 34px);
  font-weight: var(--weight-medium);
  line-height: 1.22;
  letter-spacing: var(--tracking-display);
  text-wrap: pretty;
}
.quote-side { display: grid; gap: clamp(14px, 1.8cqw, 22px); align-content: stretch; min-width: 0; }
.quote-small {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(18px, 2.2cqw, 26px);
  border-radius: var(--shape-card);
  min-width: 0;
}
.quote-small p { font-size: var(--text-sm); line-height: 1.55; }
.quote-by { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.quote-by > div { display: flex; flex-direction: column; min-width: 0; }
.quote-by strong { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.quote-by span { font-size: 12px; color: var(--color-ink-soft); }
@container (max-width: 900px) { .quote-grid { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 640px) { .quote-side { grid-template-columns: minmax(0, 1fr); } }

/* ---------- FAQ: heading and help card beside a hairline list ---------- */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 1.5fr);
  gap: clamp(28px, 4cqw, 64px);
  align-items: start;
}
.faq-aside { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.faq-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 22px;
  border-radius: var(--shape-card);
}
.faq-card h4 {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
}
.faq-card p { font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-soft); }
.faq-card .btn { margin-top: 6px; }
.faq-list { display: grid; min-width: 0; }
.faq-row { padding: 20px 0; border-top: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); }
.faq-row:first-child { border-top: 0; padding-top: 0; }
.faq-row h3 {
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
}
.faq-row p { font-size: var(--text-sm); line-height: 1.6; color: var(--color-ink-soft); max-width: 62ch; }
@container (max-width: 900px) {
  .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .faq-aside { gap: 18px; }
}

/* ---------- LOGO ROW: a caption and six word marks, each set its own way ---------- */
.block-logos, .block-feature-tabs, .block-stats, .block-cta { --block-max: 1120px; padding: clamp(28px, 4.5cqw, 72px) clamp(16px, 3cqw, 32px); }
.block-logos { padding-block: clamp(20px, 3cqw, 44px); }
.logos-cap { text-align: center; font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-ink-soft); }
.logos-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  gap: 22px clamp(14px, 2.4cqw, 32px);
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.7cqw, 21px);
  font-weight: var(--weight-bold);
  line-height: 1;
  white-space: nowrap;
  color: var(--color-ink-soft);
  opacity: .82;
}
.logo-mark i { flex: none; width: .8em; height: .8em; border-radius: 50%; background: currentColor; opacity: .7; }
.logo-mark.is-serif { font-family: var(--font-sans); font-weight: 400; font-style: italic; }
.logo-mark.is-serif i { border-radius: 2px; transform: rotate(45deg); width: .55em; height: .55em; }
.logo-mark.is-wide { letter-spacing: .08em; font-weight: var(--weight-medium); }
.logo-mark.is-wide i { border-radius: 0; height: .22em; width: 1em; }
.logo-mark.is-caps { letter-spacing: .24em; font-size: clamp(13px, 1.3cqw, 16px); }
.logo-mark.is-caps i { display: none; }
.logo-mark.is-lower { text-transform: lowercase; letter-spacing: -.02em; }
.logo-mark.is-lower i { border-radius: 50% 50% 0 50%; }
.logo-mark.is-italic { font-style: italic; font-weight: var(--weight-semibold); }
.logo-mark.is-italic i { background: none; border: 2px solid currentColor; }
.logo-mark.is-mono { font-family: var(--font-sans); letter-spacing: .04em; text-transform: uppercase; font-weight: 600; font-size: clamp(14px, 1.4cqw, 17px); }
.logo-mark.is-mono i { border-radius: 0; width: .5em; height: .9em; }
@container (max-width: 900px) { .logos-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (max-width: 640px) { .logos-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; } }

/* ---------- FEATURE TABS: tabs over one panel, a live screen left, the words right ---------- */
.ft-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(22px, 4cqw, 64px);
  margin-top: clamp(26px, 3.6cqw, 48px);
}
.ft-panel[hidden] { display: none; }
.ft-visual { display: grid; gap: 14px; padding: clamp(18px, 2.4cqw, 28px); border-radius: var(--shape-card); min-width: 0; }
.ft-visual-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ft-visual-head h4 { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); }
.ft-row { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--color-ink) 10%, transparent); }
.ft-row > div { display: grid; gap: 2px; min-width: 0; margin-right: auto; }
.ft-row strong { font-size: var(--text-sm); font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-row > div span { font-size: 12.5px; color: var(--color-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-row-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: var(--shape-inner, 9px);
               background: color-mix(in srgb, var(--color-ink) 6%, transparent); color: var(--color-accent-text); }
.ft-row-icon svg { width: 17px; height: 17px; }
.ft-row > .badge, .ft-row > .avatar, .ft-row > .btn { flex: none; }
.ft-visual .field-wrap, .ft-visual .field { width: 100%; }
.ft-hand { display: flex; align-items: center; gap: 10px; color: var(--color-ink-soft); }
.ft-hand > svg { width: 18px; height: 18px; }
.ft-list { display: grid; gap: 10px; }
.ft-copy { display: grid; gap: 14px; align-content: center; min-width: 0; }
.ft-copy h3 { font-family: var(--font-display); font-size: clamp(22px, 2.4cqw, 30px); font-weight: var(--weight-bold); line-height: 1.15; letter-spacing: var(--tracking-display); text-wrap: balance; }
.ft-copy p { font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); text-wrap: pretty; }
.ft-points { display: grid; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.ft-points li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--text-sm); line-height: 1.45; }
.ft-points svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--color-accent-text); }
@container (max-width: 900px) {
  .ft-panel { grid-template-columns: minmax(0, 1fr); }
  .ft-copy { order: -1; }
}
/* on a phone four tabs do not fit in one row: the tabs go and the four panels stack, each words first, then the screen */
@container (max-width: 640px) {
  .block-feature-tabs .sec-toggle { display: none; }
  .ft-panel[hidden] { display: grid; }
}

/* ---------- STATS BAND: three numbers on one card ---------- */
.stats-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-radius: var(--shape-card);
  padding: clamp(22px, 3.4cqw, 44px) clamp(18px, 3cqw, 40px);
  gap: clamp(18px, 3cqw, 40px);
}
.stat { display: grid; gap: 8px; align-content: start; min-width: 0; }
.stat + .stat { padding-left: clamp(18px, 3cqw, 40px); border-left: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); }
.stat strong { font-family: var(--font-display); font-size: clamp(32px, 4.6cqw, 58px); font-weight: var(--weight-bold); line-height: 1; letter-spacing: var(--tracking-display); }
.stat span { font-size: var(--text-sm); line-height: 1.45; color: var(--color-ink-soft); max-width: 26ch; }
@container (max-width: 640px) {
  .stats-band { grid-template-columns: minmax(0, 1fr); }
  .stat + .stat { padding-left: 0; padding-top: 18px; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); }
}

/* ---------- CLOSING CALL: a big line, two actions, one note ---------- */
.cta-card {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 4cqw, 56px);
  padding: clamp(26px, 4.4cqw, 64px);
  border-radius: var(--shape-card);
}
.cta-copy { display: grid; gap: 14px; min-width: 0; }
.cta-title { font-family: var(--font-display); font-size: clamp(28px, 4.2cqw, 52px); font-weight: var(--weight-bold); line-height: 1.04; letter-spacing: var(--tracking-display); text-wrap: balance; }
.cta-copy p { font-size: var(--text-md); line-height: 1.55; color: var(--color-ink-soft); text-wrap: pretty; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.cta-note { flex-basis: 100%; text-align: right; font-size: 13px; color: var(--color-ink-soft); }
@container (max-width: 900px) {
  .cta-card { grid-template-columns: minmax(0, 1fr); }
  .cta-actions { justify-content: flex-start; }
  .cta-note { text-align: left; }
}
@container (max-width: 640px) { .cta-actions .btn { flex: 1 1 100%; } }

/* =====================================================================
   LAYOUT: a whole page made of the blocks above. The page only sets the
   order and the rhythm; every block keeps its own width and folds by itself.
   ===================================================================== */
.layout { display: flex; flex-direction: column; min-width: 0; width: 100%; overflow-x: clip; }   /* glass shadows may spill sideways; they never widen the page */
.layout > .block { flex: none; }
.layout > .block-header { position: sticky; top: 12px; z-index: 20; width: auto; margin: 12px 12px 0; }   /* the bar floats and follows the scroll */
.layout > .block-footer { margin-top: clamp(24px, 4vw, 56px); }

/* =====================================================================
   PHOTOS: every photo is a .ph figure. Its corners follow the kit's card
   shape; a family that has a frame of its own puts it round the photo too.
   ===================================================================== */
.ph { position: relative; margin: 0; overflow: hidden; border-radius: var(--shape-card); background: color-mix(in srgb, var(--color-ink) 8%, transparent); min-width: 0; }
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
[data-family="brutal"] .ph { border: var(--nb-border) solid var(--nb-ink); box-shadow: var(--nb-sx) var(--nb-sy) 0 var(--nb-shadow-color); }
[data-family="classic"] .ph { box-shadow: 0 0 0 var(--cl-rule-w) var(--cl-rule-strong); }
:is([data-family="classic"], [data-family="flat"], [data-family="solid"]) .ph img { filter: saturate(.86); }

.word-mark { font-family: var(--font-display); font-size: 22px; font-weight: var(--weight-bold); letter-spacing: var(--tracking-display); white-space: nowrap; }

/* ---------- HEADER CENTRED: name in the middle, links split ---------- */
.block-nav-centre .block-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; min-height: 76px; padding: 0 clamp(16px, 3cqw, 40px); }
.nav-side { display: flex; align-items: center; gap: clamp(14px, 2cqw, 28px); font-size: var(--text-sm); }
.nav-side nav { display: flex; gap: clamp(14px, 2cqw, 28px); }
.nav-side.is-end { justify-content: flex-end; }
.block-nav-centre .word-mark { font-size: clamp(22px, 2.6cqw, 30px); }
.block-nav-centre .block-menu { display: none; }
@container (max-width: 900px) {
  .block-nav-centre .block-inner { grid-template-columns: auto minmax(0, 1fr); }
  .block-nav-centre .nav-side:not(.is-end), .block-nav-centre .nav-side nav { display: none; }
  .block-nav-centre .word-mark { order: -1; }
  .block-nav-centre .block-menu { display: inline-flex; }
}
@container (max-width: 640px) { .block-nav-centre .nav-side .btn { display: none; } }

/* ---------- HERO FULL BLEED: one photo edge to edge, the words on it, a facts card ---------- */
/* the height lives on the inner part: a container query can reach it (it cannot restyle the block itself), and cqw is the block's own width */
.block-hero-bleed { position: relative; display: flex; isolation: isolate; }
.hero-bleed-photo { position: absolute; inset: 0; z-index: -20; border-radius: 0; border: 0 !important; box-shadow: none !important; }
.hero-bleed-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 8, 6, .05) 30%, rgba(10, 8, 6, .62)); }
.hero-bleed-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); align-items: end; align-content: end; gap: 28px; min-height: min(58cqw, 760px); padding: clamp(20px, 4cqw, 56px); max-width: none; }
.hero-bleed-copy { display: grid; gap: 14px; color: #fbf8f2; min-width: 0; }
.hero-bleed-kicker { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; opacity: .9; }
.hero-bleed-title { font-family: var(--font-display); font-size: clamp(38px, 7.4cqw, 104px); font-weight: var(--weight-bold); line-height: .98; letter-spacing: var(--tracking-display); text-wrap: balance; }
.hero-bleed-card { display: grid; gap: 12px; padding: 22px; border-radius: var(--shape-card); }
.hero-bleed-row { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); font-size: var(--text-sm); }
.hero-bleed-row span { color: var(--color-ink-soft); }
.hero-bleed-row strong { font-weight: var(--weight-semibold); text-align: right; }
.hero-bleed-card .btn { width: 100%; margin-top: 4px; }
/* tablet: a taller photo, the card still beside the words */
@container (max-width: 900px) {
  .hero-bleed-inner { min-height: 78cqw; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); }
}
/* phone: the photo fills the whole hero; the words sit in the middle of it and the card rests on the bottom,
   so the screen is used from top to bottom instead of everything sliding down */
@container (max-width: 640px) {
  .hero-bleed-inner { min-height: 690px; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; gap: 26px; padding: 22px 18px 20px; }
  .hero-bleed-copy { align-self: center; gap: 16px; }
  .hero-bleed-title { font-size: clamp(38px, 12cqw, 50px); line-height: 1.02; }
  .hero-bleed-kicker { font-size: 12px; }
  .hero-bleed-photo::after { background: linear-gradient(180deg, rgba(10, 8, 6, .1) 0%, rgba(10, 8, 6, .5) 45%, rgba(10, 8, 6, .72)); }
  .hero-bleed-card { padding: 20px; }
  .hero-bleed-row { font-size: 15px; }
  .hero-bleed-card .btn { height: 52px; }
}

/* ---------- INTRO: one narrow column ---------- */
.block-intro { padding: clamp(40px, 7cqw, 110px) clamp(16px, 3cqw, 32px); }
.intro-col { --block-max: 720px; display: grid; justify-items: center; gap: 22px; text-align: center; }
.intro-eyebrow { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-accent-text); }
.intro-text { font-family: var(--font-display); font-size: clamp(22px, 3cqw, 34px); line-height: 1.35; letter-spacing: var(--tracking-display); text-wrap: balance; }
.intro-sign { font-size: var(--text-sm); color: var(--color-ink-soft); font-style: italic; }

/* ---------- MENU: tabs, dotted leaders, a photo per tab ---------- */
.block-food-menu, .block-gallery, .block-booking, .block-statement, .block-index, .block-contact-big { --block-max: 1120px; padding: clamp(28px, 4.5cqw, 72px) clamp(16px, 3cqw, 32px); }
.menu-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px; }
.menu-panel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(22px, 4cqw, 60px); align-items: center; margin-top: clamp(22px, 3cqw, 40px); }
.menu-panel[hidden] { display: none; }
.menu-list { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.menu-list li { display: flex; align-items: baseline; gap: 10px; font-size: var(--text-md); }
.menu-dish { min-width: 0; }
.menu-list i { flex: 1 1 24px; min-width: 24px; border-bottom: 2px dotted color-mix(in srgb, var(--color-ink) 30%, transparent); transform: translateY(-4px); }
.menu-price { font-family: var(--font-display); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu-photo { aspect-ratio: 4 / 3; }
.block-food-menu .menu-note { margin-top: 26px; font-size: 13px; color: var(--color-ink-soft); }
@container (max-width: 900px) { .menu-panel { grid-template-columns: minmax(0, 1fr); } .menu-photo { order: -1; aspect-ratio: 16 / 9; } }
.menu-panel-title { display: none; }
/* phone: four tabs do not fit, so the whole menu is shown, each part under its own heading, one photo on top */
@container (max-width: 640px) {
  .block-food-menu .menu-head .segmented { display: none; }
  .block-food-menu .menu-panel[hidden] { display: grid; }
  .menu-panel-title { display: block; font-family: var(--font-display); font-size: var(--text-title); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); }
  .menu-panel:not([data-panel="0"]) .menu-photo { display: none; }
}

/* ---------- PHOTO GRID: fills left to right, row by row (never masonry). Five photos: one 2x2, four 1x1 = two full rows ---------- */
.gallery-title { margin-bottom: clamp(18px, 2.6cqw, 32px); }
.gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(120px, 17cqw, 220px); gap: clamp(10px, 1.4cqw, 18px); }
.gallery-grid .g-1 { grid-column: span 2; grid-row: span 2; }
@container (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery-grid .g-1 { grid-row: span 1; } }
@container (max-width: 640px) { .gallery-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 220px; } .gallery-grid .g-1 { grid-column: auto; grid-row: span 1; } }

/* ---------- BOOKING BAR ---------- */
.booking-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); align-items: center; gap: clamp(20px, 3.4cqw, 48px); padding: clamp(22px, 3.4cqw, 44px); border-radius: var(--shape-card); }
.booking-copy { display: grid; gap: 10px; }
.booking-copy p { font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-soft); }
.booking-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 12px; }
.booking-field { display: grid; gap: 6px; min-width: 0; }
.booking-field > span { font-size: 12px; letter-spacing: var(--tracking-caps, .1em); text-transform: uppercase; color: var(--color-ink-soft); }
.booking-field .field-wrap, .booking-field .field { width: 100%; }
@container (max-width: 900px) {
  .booking-card { grid-template-columns: minmax(0, 1fr); }
  .booking-bar .btn { grid-column: 1 / -1; width: 100%; }
  .booking-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.booking-field input { min-width: 0; width: 100%; }
@container (max-width: 640px) { .booking-bar { grid-template-columns: minmax(0, 1fr); } .booking-bar .btn { width: 100%; } }

/* ---------- VISIT FOOTER: address, hours, drawn map ---------- */
.block-visit { --block-max: 1120px; padding: clamp(32px, 5cqw, 80px) clamp(16px, 3cqw, 32px) 26px; }
.visit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.3fr); gap: clamp(20px, 3.4cqw, 48px); }
.visit-col { display: grid; align-content: start; gap: 6px; font-size: var(--text-sm); line-height: 1.5; }
.visit-label { margin-top: 12px; font-size: 12px; letter-spacing: var(--tracking-caps, .1em); text-transform: uppercase; color: var(--color-ink-soft); }
.visit-label:first-child { margin-top: 0; }
.visit-hours { display: grid; gap: 8px; margin: 4px 0 0; }
.visit-hours div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 10%, transparent); }
.visit-hours dd { margin: 0; font-weight: var(--weight-semibold); text-align: right; }
.visit-map { position: relative; min-height: 220px; border-radius: var(--shape-card); overflow: hidden; }
.map-road { position: absolute; background: color-mix(in srgb, var(--color-ink) 16%, transparent); }
.map-road.r1 { left: -10%; right: -10%; top: 38%; height: 10px; transform: rotate(-8deg); }
.map-road.r2 { top: -10%; bottom: -10%; left: 56%; width: 8px; transform: rotate(12deg); }
.map-road.r3 { left: 10%; right: 30%; top: 72%; height: 6px; transform: rotate(4deg); }
.map-water { position: absolute; right: -20%; bottom: -30%; width: 60%; height: 70%; border-radius: 50%; background: color-mix(in srgb, rgb(var(--color-secondary)) 30%, transparent); }
.map-pin { position: absolute; left: 52%; top: 32%; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
           background: rgb(var(--color-primary)); color: var(--color-on-tinted); }
.map-pin svg { width: 15px; height: 15px; transform: rotate(45deg); }
.visit-legal { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: clamp(28px, 4cqw, 56px); padding-top: 18px;
               border-top: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); font-size: 13px; color: var(--color-ink-soft); }
@container (max-width: 900px) { .visit-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .visit-map { grid-column: 1 / -1; } }
@container (max-width: 640px) { .visit-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- HEADER MINIMAL: text only ---------- */
.block-nav-min .block-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; min-height: 72px; padding: 12px clamp(16px, 3cqw, 40px); }   /* no room: the links wrap under the name */
.block-nav-min nav { display: flex; gap: clamp(16px, 3cqw, 40px); font-size: var(--text-sm); letter-spacing: var(--tracking-control); text-transform: var(--case-control); }
.block-nav-min nav a.is-current { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
/* tablet and phone: the words fold into a menu button that looks like the page's main button */
.nav-min-menu { display: none; }
@container (max-width: 900px) {
  .block-nav-min nav { display: none; }
  .nav-min-menu { display: inline-flex; }
}

/* ---------- PROJECT SCREEN: one project per screen ---------- */
/* one project, one screen: exactly the height of the screen it is seen on (--screen-h is set by a device frame; a real page uses the window) */
.block-project { position: relative; isolation: isolate; min-height: var(--screen-h, 100svh); display: flex; align-items: flex-end; }
.project-photo { position: absolute; inset: 0; z-index: -20; border-radius: 0; border: 0 !important; box-shadow: none !important; }
.project-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 8, 8, .5), transparent 22%, transparent 45%, rgba(8, 8, 8, .58)); }   /* dark at the top too: the floating bar stays readable on a light photo */
.project-caption { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 6px 24px; max-width: none; padding: clamp(18px, 3.4cqw, 44px); color: #f6f5f2; }
.project-no { grid-row: span 2; font-family: var(--font-display); font-size: clamp(40px, 6cqw, 88px); line-height: .85; font-variant-numeric: tabular-nums; }
.project-name { font-family: var(--font-display); font-size: clamp(22px, 2.8cqw, 38px); font-weight: var(--weight-semibold); line-height: 1.1; letter-spacing: var(--tracking-display); }
.project-meta { grid-column: 2; font-size: var(--text-sm); opacity: .8; }
.project-link { grid-column: 3; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.project-link svg { width: 16px; height: 16px; }
@container (max-width: 640px) {
  .project-caption { grid-template-columns: auto minmax(0, 1fr); }
  .project-link { grid-column: 1 / -1; grid-row: auto; justify-self: start; margin-top: 10px; }
}

/* ---------- STATEMENT: oversized sentence, thin column of facts ---------- */
.statement-grid { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); align-items: end; gap: clamp(22px, 4cqw, 64px); }
.statement-kicker { display: block; margin-bottom: 18px; font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-ink-soft); }
.statement-title { font-family: var(--font-display); font-size: clamp(30px, 5cqw, 68px); font-weight: var(--weight-bold); line-height: 1.02; letter-spacing: var(--tracking-display); text-wrap: balance; }
.statement-facts { display: grid; gap: 14px; margin: 0; }
.statement-facts div { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); }
.statement-facts dt { font-size: 12px; letter-spacing: var(--tracking-caps, .1em); text-transform: uppercase; color: var(--color-ink-soft); }
.statement-facts dd { margin: 0; font-size: var(--text-md); }
@container (max-width: 900px) { .statement-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- PROJECT INDEX: one row per project, the photo peeks on hover ---------- */
.index-title { margin-bottom: 18px; font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-ink-soft); font-weight: var(--weight-medium); }
.index-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid color-mix(in srgb, var(--color-ink) 22%, transparent); }
.index-list a { position: relative; display: grid; grid-template-columns: 56px minmax(0, 2.4fr) minmax(0, 1.2fr) minmax(0, 1fr) 56px; align-items: baseline; gap: 16px;
                padding: 20px 0; border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 22%, transparent); transition: padding-left .3s ease, color .3s ease; }
.ix-no, .ix-year { font-variant-numeric: tabular-nums; font-size: var(--text-sm); color: var(--color-ink-soft); }
.ix-year { text-align: right; }
.ix-name { font-family: var(--font-display); font-size: clamp(19px, 2.2cqw, 28px); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); }
.ix-place, .ix-type { font-size: var(--text-sm); color: var(--color-ink-soft); }
.ix-peek { position: absolute; right: 12%; top: 50%; z-index: 2; width: 200px; aspect-ratio: 4 / 3; opacity: 0; pointer-events: none;
           transform: translateY(-50%) scale(.92) rotate(-2deg); transition: opacity .25s ease, transform .35s cubic-bezier(.22, .61, .36, 1); }
.index-list a:is(:hover, :focus-visible, .is-hover) { padding-left: 12px; color: var(--color-accent-text); }
.index-list a:is(:hover, :focus-visible, .is-hover) .ix-peek { opacity: 1; transform: translateY(-50%) scale(1) rotate(-2deg); }
@container (max-width: 640px) {
  .index-list a { grid-template-columns: 36px minmax(0, 1fr) 44px; }
  .ix-place, .ix-type, .ix-peek { display: none; }
}
@media (prefers-reduced-motion: reduce) { .index-list a, .ix-peek { transition: none; } }

/* ---------- CONTACT LARGE: the address as big as a headline ---------- */
.block-contact-big { padding-bottom: 26px; }
.contact-lead { font-size: var(--text-md); color: var(--color-ink-soft); }
.contact-email { display: inline-block; margin-top: 10px; font-family: var(--font-display); font-size: clamp(22px, 7cqw, 92px); font-weight: var(--weight-bold);
                 line-height: 1.05; letter-spacing: var(--tracking-display); overflow-wrap: break-word; max-width: 100%; border-bottom: 2px solid currentColor; }   /* 7cqw keeps a long address on one line on a phone */
.contact-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: clamp(28px, 4.4cqw, 64px); font-size: var(--text-sm); line-height: 1.55; }
.contact-cols span { display: block; margin-bottom: 6px; font-size: 12px; letter-spacing: var(--tracking-caps, .1em); text-transform: uppercase; color: var(--color-ink-soft); }
.contact-legal { margin-top: clamp(28px, 4cqw, 56px); padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); font-size: 13px; color: var(--color-ink-soft); }
@container (max-width: 640px) { .contact-cols { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================
   REVEAL: sections come in as the page scrolls. The hidden start is armed
   from JS (.rv-on on the layout), so without JS everything is simply there.
   data-rv = up | left | zoom | wipe | fade, --rv-i = place in its row (stagger).
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .layout.rv-on [data-rv] {
    transition: opacity .8s cubic-bezier(.22, .61, .36, 1), transform .9s cubic-bezier(.22, .61, .36, 1), clip-path 1.1s cubic-bezier(.7, 0, .2, 1);
    transition-delay: calc(var(--rv-i, 0) * 90ms);
  }
  .layout.rv-on [data-rv]:not(.is-in) { opacity: 0; }
  .layout.rv-on [data-rv="up"]:not(.is-in) { transform: translateY(32px); }
  .layout.rv-on [data-rv="left"]:not(.is-in) { transform: translateX(-28px); }
  .layout.rv-on [data-rv="zoom"]:not(.is-in) { transform: scale(.94); }
  .layout.rv-on [data-rv="wipe"] { clip-path: inset(0 0 0 0); }
  .layout.rv-on [data-rv="wipe"]:not(.is-in) { opacity: 1; clip-path: inset(100% 0 0 0); }
  /* the hero photo drifts in slowly, like a camera settling */
  .layout.rv-on .hero-bleed-photo img { animation: rv-drift 16s cubic-bezier(.22, .61, .36, 1) both; }
  .layout.rv-on .project-photo.is-in img { animation: rv-drift 12s cubic-bezier(.22, .61, .36, 1) both; }
}
@keyframes rv-drift { from { transform: scale(1.12); } to { transform: scale(1); } }

/* =====================================================================
   PHONE, for every block: a tab never gets narrower than its word, so on a
   phone the tabs give up side padding and a little size instead of pushing
   the screen sideways; a large button may break its label onto two lines.
   ===================================================================== */
@container (max-width: 640px) {
  .block .segmented.glass--track .segmented-option { padding-inline: 10px !important; font-size: 14px; }
  .block :is(.hero-cta, .cta-actions, .booking-bar, .hero-bleed-card) .btn { white-space: normal; height: auto; min-height: 52px; padding: 12px 18px; line-height: 1.2; text-align: center; }
}

/* =====================================================================
   SECOND SERIES: hotel, shop, yoga studio, journal, photographer
   ===================================================================== */
.block-rooms, .block-amen, .block-collage, .block-cats, .block-prods, .block-look, .block-sched, .block-team,
.block-mag, .block-srow, .block-hlist, .block-strip { --block-max: 1120px; padding: clamp(28px, 4.5cqw, 72px) clamp(16px, 3cqw, 32px); }
.small-caps-label, .hsp-kicker, .collage-kicker, .look-kicker, .qh-kicker, .mag-cat, .hli-sec {
  font-size: 12px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase;
}

/* ---------- HERO SPLIT PHOTO ---------- */
.hsp-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(62cqw, 820px); }
.hsp-photo { border-radius: 0; border: 0 !important; box-shadow: none !important; }
.hsp-copy { display: grid; align-content: center; gap: 20px; padding: clamp(24px, 5cqw, 80px); }
.hsp-kicker { color: var(--color-accent-text); }
.hsp-title { font-family: var(--font-display); font-size: clamp(52px, 10cqw, 150px); font-weight: var(--weight-bold); line-height: .9; letter-spacing: var(--tracking-display); }
.hsp-lead { max-width: 44ch; font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }
.hsp-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 4px 0 0; padding: 16px 0; border-block: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); }
.hsp-facts dt { font-size: 12px; letter-spacing: var(--tracking-caps, .1em); text-transform: uppercase; color: var(--color-ink-soft); }
.hsp-facts dd { margin: 4px 0 0; font-weight: var(--weight-semibold); }
.hsp-cta { display: flex; flex-wrap: wrap; gap: 12px; }
@container (max-width: 900px) {
  .hsp-inner { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hsp-photo { aspect-ratio: 4 / 3; }
}
@container (max-width: 640px) {
  .hsp-photo { aspect-ratio: 4 / 5; }
  .hsp-copy { padding: 26px 18px 34px; gap: 18px; }
  .hsp-title { font-size: clamp(56px, 20cqw, 84px); }
  .hsp-facts { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .hsp-facts div { display: flex; justify-content: space-between; gap: 12px; }
  .hsp-facts dd { margin: 0; }
  .hsp-cta .btn { width: 100%; }
}

/* ---------- PHOTO BAND ---------- */
.block-band { position: relative; isolation: isolate; }
.band-photo { height: min(46cqw, 620px); min-height: 320px; border-radius: 0; border: 0 !important; box-shadow: none !important; }
.band-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(8, 8, 8, .55)); }
.band-caption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 24px;
                padding: clamp(18px, 3.4cqw, 44px); color: #fbf8f2; }
.band-caption p { max-width: 24ch; font-family: var(--font-display); font-size: clamp(24px, 3.4cqw, 44px); line-height: 1.1; letter-spacing: var(--tracking-display); }
.band-caption span { font-size: 13px; opacity: .85; }
@container (max-width: 640px) { .band-photo { height: 440px; } }

/* ---------- ROOMS ---------- */
.rooms-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2cqw, 26px); margin-top: clamp(24px, 3.4cqw, 44px); }
.room-card { display: grid; gap: 14px; min-width: 0; }
.room-photo { aspect-ratio: 4 / 3; }
.room-body { display: grid; gap: 6px; }
.room-body h3 { font-family: var(--font-display); font-size: var(--text-title); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); }
.room-body p { font-size: var(--text-sm); color: var(--color-ink-soft); }
.room-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 6px; padding-top: 10px; font-size: var(--text-sm);
             border-top: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); }
.room-foot strong { font-family: var(--font-display); font-size: var(--text-title); }
.room-foot a { display: inline-flex; align-items: center; gap: 6px; color: var(--color-accent-text); }
.room-foot svg { width: 15px; height: 15px; }
@container (max-width: 900px) { .rooms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 640px) { .rooms-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* ---------- AMENITIES ---------- */
.amen-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(24px, 5cqw, 72px); align-items: start; }
.amen-side { display: grid; gap: 22px; }
.amen-photo { aspect-ratio: 5 / 4; }
.amen-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.amen-list li { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); }
.amen-list li:first-child { padding-top: 0; }
.amen-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--shape-inner, 10px);
             background: color-mix(in srgb, var(--color-ink) 6%, transparent); color: var(--color-accent-text); }
.amen-icon svg { width: 18px; height: 18px; }
.amen-list h3 { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.amen-list p { margin-top: 4px; font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-soft); }
@container (max-width: 900px) { .amen-grid { grid-template-columns: minmax(0, 1fr); } .amen-photo { aspect-ratio: 16 / 9; } }

/* ---------- BOOKING BAR, STICKY: rides on the bottom of the screen until it reaches its place ---------- */
.block-bkb { position: sticky; bottom: 14px; z-index: 15; padding: 14px clamp(12px, 3cqw, 32px); }
.bkb-bar { display: flex; align-items: center; gap: clamp(12px, 2.4cqw, 28px); max-width: 1000px; margin: 0 auto; padding: 12px 12px 12px 22px; border-radius: var(--shape-card); }
.bkb-label { font-family: var(--font-display); font-size: var(--text-md); letter-spacing: var(--tracking-display); white-space: nowrap; }
.bkb-fields { display: flex; flex: 1; gap: clamp(12px, 2.4cqw, 28px); justify-content: center; }
.bkb-fields label { display: grid; gap: 2px; }
.bkb-fields span { font-size: 12px; letter-spacing: var(--tracking-caps, .1em); text-transform: uppercase; color: var(--color-ink-soft); }
.bkb-fields b { font-weight: var(--weight-semibold); }
.bkb-bar .btn { flex: none; }
@container (max-width: 640px) {
  .bkb-fields { display: none; }
  .bkb-bar { justify-content: space-between; padding: 10px 10px 10px 16px; }
  .bkb-label { white-space: normal; font-size: 15px; }
}

/* ---------- COLLAGE HERO: title and three photos against each other ---------- */
.collage-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; gap: clamp(12px, 2cqw, 24px); align-items: start; }
.collage-copy { grid-column: 1 / span 6; grid-row: 1; display: grid; gap: 18px; align-content: start; padding-top: clamp(8px, 3cqw, 40px); }
.collage-kicker { color: var(--color-accent-text); }
.collage-title { font-family: var(--font-display); font-size: clamp(38px, 6.4cqw, 90px); font-weight: var(--weight-bold); line-height: .98; letter-spacing: var(--tracking-display); text-wrap: balance; }
.collage-copy p { max-width: 40ch; font-size: var(--text-md); line-height: 1.55; color: var(--color-ink-soft); }
.collage-copy .btn { justify-self: start; white-space: normal; }
.collage-copy { grid-template-columns: minmax(0, 1fr); }   /* a long button label never widens the column */
.collage-a { grid-column: 8 / span 5; grid-row: 1 / span 2; aspect-ratio: 3 / 4; }
.collage-b { grid-column: 1 / span 4; grid-row: 2; aspect-ratio: 4 / 3; }
.collage-c { grid-column: 5 / span 3; grid-row: 2; aspect-ratio: 3 / 4; margin-top: clamp(24px, 6cqw, 80px); }
@container (max-width: 900px) {
  .collage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collage-copy { grid-column: 1 / -1; }
  .collage-a { grid-column: 1; grid-row: 2 / span 2; }
  .collage-b { grid-column: 2; grid-row: 2; }
  .collage-c { grid-column: 2; grid-row: 3; margin-top: 0; aspect-ratio: 4 / 3; }
}
@container (max-width: 640px) {
  .collage-title { font-size: clamp(40px, 12cqw, 56px); }
  .collage-copy .btn { justify-self: stretch; }
}

/* ---------- CATEGORY TILES ---------- */
.cats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.6cqw, 20px); }
.cat-tile { position: relative; display: block; isolation: isolate; }
.cat-photo { aspect-ratio: 3 / 4; }
.cat-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(10, 10, 10, .55)); }
.cat-label { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; display: grid; gap: 2px; color: #fbf8f2; }
.cat-label strong { font-family: var(--font-display); font-size: var(--text-title); letter-spacing: var(--tracking-display); }
.cat-label em { font-style: normal; font-size: 13px; opacity: .85; }
@container (max-width: 900px) { .cats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- PRODUCT GRID ---------- */
.prods-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: clamp(18px, 2.6cqw, 32px); }
.prods-head a { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--color-accent-text); }
.prods-head svg { width: 15px; height: 15px; }
.prods-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2cqw, 24px); }
.prod-card { display: grid; gap: 12px; min-width: 0; }
.prod-photo { aspect-ratio: 4 / 5; }
.prod-body { display: grid; gap: 4px; }
.prod-body h3 { font-size: var(--text-md); font-weight: var(--weight-medium); line-height: 1.3; }
.prod-price { font-family: var(--font-display); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.prod-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.prod-swatches { display: flex; gap: 6px; }
.prod-swatches i { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-ink) 20%, transparent); }
@container (max-width: 900px) { .prods-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .prod-card:nth-child(4) { display: none; } }
@container (max-width: 640px) {
  .prods-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .prod-card:nth-child(4) { display: grid; }
  .prod-body h3 { font-size: 15px; }
}

/* ---------- LOOKBOOK: words stay, photos pass ---------- */
.look-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(24px, 5cqw, 80px); align-items: start; }
.look-copy { position: sticky; top: 90px; display: grid; gap: 18px; }
.look-kicker { color: var(--color-accent-text); }
.look-title { font-family: var(--font-display); font-size: clamp(32px, 4.6cqw, 64px); font-weight: var(--weight-bold); line-height: 1.02; letter-spacing: var(--tracking-display); text-wrap: balance; }
.look-copy p { font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }
.look-copy .btn { justify-self: start; }
.look-photos { display: grid; gap: clamp(14px, 2.4cqw, 28px); }
.look-photo { aspect-ratio: 4 / 3; }
.look-photo:nth-child(2) { width: 78%; justify-self: end; aspect-ratio: 4 / 5; }
@container (max-width: 900px) { .look-grid { grid-template-columns: minmax(0, 1fr); } .look-copy { position: static; } }
@container (max-width: 640px) { .look-photo:nth-child(2) { width: 100%; } .look-copy .btn { justify-self: stretch; } }

/* ---------- QUIET HERO: a round photo inside the sentence ---------- */
.block-qh { --block-max: 1000px; padding: clamp(48px, 9cqw, 150px) clamp(16px, 3cqw, 32px); }
.qh-inner { display: grid; justify-items: center; gap: 24px; text-align: center; }
.qh-kicker { color: var(--color-accent-text); }
.qh-title { font-family: var(--font-display); font-size: clamp(42px, 7.6cqw, 104px); font-weight: var(--weight-bold); line-height: 1.02; letter-spacing: var(--tracking-display); text-wrap: balance; }
.qh-pic { display: inline-block; width: 1.9em; height: .9em; vertical-align: -.06em; overflow: hidden; border-radius: 999px;
          box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-ink) 8%, transparent); }
.qh-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qh-lead { max-width: 46ch; font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }
.qh-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.qh-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 6px 0 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-ink-soft); }
.qh-facts li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: rgb(var(--color-primary)); vertical-align: middle; }
@container (max-width: 640px) {
  .qh-title { font-size: clamp(40px, 12.5cqw, 54px); }
  .qh-cta { width: 100%; flex-direction: column; }
  .qh-cta .btn { width: 100%; }
  .qh-facts { flex-direction: column; align-items: center; }
}

/* ---------- CLASS SCHEDULE: the week in tabs ---------- */
.sched-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: clamp(16px, 2.4cqw, 30px); }
.sched-day { display: grid; }
.sched-day[hidden] { display: none; }
.sched-day-title { display: none; }
.sched-row { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto 80px auto; align-items: center; gap: 18px; padding: 18px 0;
             border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); }
.sched-time { font-family: var(--font-display); font-size: var(--text-title); font-variant-numeric: tabular-nums; }
.sched-class { display: grid; gap: 6px; min-width: 0; }
.sched-class strong { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.sched-class span { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--color-ink-soft); }
.sched-len { font-size: var(--text-sm); color: var(--color-ink-soft); text-align: right; }
@container (max-width: 900px) { .sched-row { grid-template-columns: 64px minmax(0, 1fr) auto auto; } .sched-len { display: none; } }
/* phone: every day is listed under its own heading; each class becomes a small two-line row */
@container (max-width: 640px) {
  .block-sched .sched-head .segmented { display: none; }
  .sched-day[hidden] { display: grid; }
  .sched-day-title { display: block; margin: 22px 0 4px; font-family: var(--font-display); font-size: var(--text-title); letter-spacing: var(--tracking-display); }
  .sched-row { grid-template-columns: 58px minmax(0, 1fr) auto; grid-template-areas: "time class book" "time level book"; gap: 6px 12px; }
  .sched-time { grid-area: time; font-size: 18px; align-self: start; }
  .sched-class { grid-area: class; }
  .sched-row > .badge { grid-area: level; justify-self: start; }
  .sched-row > .btn { grid-area: book; }
}

/* ---------- TEAM ---------- */
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4cqw, 30px); margin-top: clamp(22px, 3.4cqw, 44px); }
.team-card { display: grid; gap: 8px; min-width: 0; }
.team-photo { aspect-ratio: 4 / 5; margin-bottom: 8px; }
.team-card h3 { font-family: var(--font-display); font-size: var(--text-title); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); }
.team-card span { font-size: var(--text-sm); color: var(--color-accent-text); }
.team-card p { font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-soft); font-style: italic; }
@container (max-width: 640px) { .team-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; } .team-photo { aspect-ratio: 4 / 3; } }

/* ---------- MAGAZINE LEAD ---------- */
.mag-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(20px, 3.4cqw, 48px); align-items: start; }
.mag-lead { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); grid-template-areas: "photo photo" "cat cat" "title dek" "title by";
            column-gap: clamp(20px, 3cqw, 40px); row-gap: 12px; align-items: end; }
.mag-lead-photo { grid-area: photo; aspect-ratio: 2 / 1; margin-bottom: 6px; }
.mag-lead > .mag-cat { grid-area: cat; }
.mag-lead-title { grid-area: title; align-self: end; }
.mag-lead > p { grid-area: dek; align-self: end; }
.mag-lead > .mag-by { grid-area: by; align-self: start; }
.mag-cat { color: var(--color-accent-text); }
.mag-lead-title { font-family: var(--font-display); font-size: clamp(30px, 3.8cqw, 50px); font-weight: var(--weight-bold); line-height: 1.04; letter-spacing: var(--tracking-display); text-wrap: balance; }
.mag-lead p { max-width: 56ch; font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }
.mag-by { font-size: 13px; color: var(--color-ink-soft); }
.mag-side { display: grid; gap: 0; }
.mag-small { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); }
.mag-small:first-child { padding-top: 0; }
.mag-small-photo { aspect-ratio: 1; }
.mag-small div { display: grid; gap: 6px; align-content: start; }
.mag-small h3 { font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: 1.3; }
@container (max-width: 900px) { .mag-grid { grid-template-columns: minmax(0, 1fr); } }
/* phone: the words go back under the title */
@container (max-width: 640px) { .mag-lead { grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "cat" "title" "dek" "by"; } }

/* ---------- STORY ROW ---------- */
.srow-title { margin-bottom: clamp(16px, 2.4cqw, 30px); }
.srow-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2cqw, 24px); }
.srow-card { display: grid; gap: 8px; align-content: start; min-width: 0; }
.srow-photo { aspect-ratio: 4 / 3; margin-bottom: 6px; }
.srow-card h3 { font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: 1.3; }
.srow-time { font-size: 13px; color: var(--color-ink-soft); }
@container (max-width: 900px) { .srow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; } }
@container (max-width: 640px) {
  .srow-grid { grid-template-columns: minmax(0, 1fr); }
  .srow-card { grid-template-columns: 110px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 14px; }
  .srow-photo { grid-row: 1 / span 3; margin: 0; aspect-ratio: 1; }
}

/* ---------- HEADLINE LIST ---------- */
.hlist-title { margin-bottom: 16px; font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-ink-soft); font-weight: var(--weight-medium); }
.hlist { margin: 0; padding: 0; list-style: none; border-top: 1px solid color-mix(in srgb, var(--color-ink) 22%, transparent); }
.hlist a { display: grid; grid-template-columns: 70px 90px minmax(0, 1fr) 60px; align-items: baseline; gap: 16px; padding: 18px 0;
           border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 22%, transparent); }
.hli-date, .hli-time { font-size: var(--text-sm); color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.hli-time { text-align: right; }
.hli-sec { color: var(--color-accent-text); }
.hli-head { font-family: var(--font-display); font-size: clamp(18px, 2cqw, 26px); letter-spacing: var(--tracking-display); }
.hlist a:is(:hover, :focus-visible) .hli-head { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
@container (max-width: 640px) {
  .hlist a { grid-template-columns: 56px minmax(0, 1fr); gap: 10px; }
  .hli-sec, .hli-time { display: none; }
}

/* ---------- NEWSLETTER ---------- */
.block-news { --block-max: 720px; padding: clamp(28px, 4.5cqw, 72px) clamp(16px, 3cqw, 32px); }
.news-card { display: grid; justify-items: center; gap: 14px; padding: clamp(26px, 4.4cqw, 52px); text-align: center; border-radius: var(--shape-card); }
.news-card p { max-width: 46ch; font-size: var(--text-md); line-height: 1.55; color: var(--color-ink-soft); }
.news-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; width: 100%; max-width: 520px; margin-top: 6px; }
.news-form .field-wrap, .news-form .field { width: 100%; }
.news-form input { min-width: 0; }
.news-note { font-size: 13px; color: var(--color-ink-soft); }
@container (max-width: 640px) { .news-form { grid-template-columns: minmax(0, 1fr); } .news-form .btn { width: 100%; } }

/* ---------- PROJECT STRIP: one row that scrolls sideways inside the page ---------- */
.strip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: clamp(16px, 2.4cqw, 30px); }
.strip-count { font-size: 13px; letter-spacing: var(--tracking-caps, .1em); text-transform: uppercase; color: var(--color-ink-soft); }
.strip-track { display: flex; gap: clamp(12px, 2cqw, 24px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
               padding: 0 clamp(16px, 3cqw, 32px) 14px; scroll-padding-inline: clamp(16px, 3cqw, 32px); scrollbar-width: thin; }
/* rows that swipe sideways follow a mouse drag too; while dragging the cards do not snap, on release they settle */
.block:not(.is-pinned) :is(.strip-track, .vrl-track, .atl-track, .sal-track) { cursor: grab; }
:is(.strip-track, .vrl-track, .atl-track, .sal-track).is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.strip-card { position: relative; flex: 0 0 clamp(240px, 34cqw, 420px); display: grid; gap: 6px; scroll-snap-align: start; }
.strip-photo { aspect-ratio: 3 / 4; margin-bottom: 8px; }
.strip-no { position: absolute; top: 12px; left: 14px; z-index: 1; font-family: var(--font-display); font-size: clamp(28px, 3.6cqw, 48px); line-height: 1; color: #fbf8f2;
            text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.strip-card strong { font-family: var(--font-display); font-size: var(--text-title); letter-spacing: var(--tracking-display); }
.strip-card em { font-style: normal; font-size: var(--text-sm); color: var(--color-ink-soft); }
@container (max-width: 640px) { .strip-card { flex-basis: 78%; } }

/* ---------- LAYOUTS WITH A PHOTO ON EVERY SCREEN (architect, photographer): the bar floats over the photo ----------
   It takes no room of its own, so the first photo fills the whole first screen, and it inverts against whatever is
   under it: white letters on a dark photo, dark letters on a light section. */
.layout--pricing > .block-pricing { padding-top: clamp(8px, 1.5cqw, 24px); }   /* the plans sit high enough to show whole on the first screen */
.layout--pricing > .block-pricing .price-grid { margin-top: clamp(20px, 2.6cqw, 36px); }
.layout:is(.layout--architect, .layout--photographer) > .block-nav-min { position: sticky; top: 0; z-index: 20; height: 0; color: #fff; mix-blend-mode: difference; }
.layout:is(.layout--architect, .layout--photographer) > .block-nav-min .block-inner { min-height: 72px; }
/* the page settles on each project as it scrolls, so the floating bar never parks on top of a caption
   (the window on a real page, the screen of a device frame here) */
html:has(.layout--architect), html:has(.layout--photographer),
.is-scroll:has(> .layout--architect), .is-scroll:has(> .layout--photographer) { scroll-snap-type: y proximity; }
.layout:is(.layout--architect, .layout--photographer) > .block-project { scroll-snap-align: start; }
/* PROJECT STRIP, PINNED (wide screens, with JS): the row stops on the screen and the page scroll moves it sideways,
   so the photos come in one by one instead of standing cut at the edge. Without JS, on a phone or with reduced motion
   it stays a row you swipe. The block gets its height from the script (screen + the distance the row travels). */
.block-strip.is-pinned { padding-block: 0; }
.block-strip.is-pinned .strip-pin { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center;
                                    height: var(--pin-h, 100svh); overflow: hidden; padding-block: 104px 40px; }   /* room for the floating bar above the title */
.block-strip.is-pinned .strip-track { overflow: visible; scroll-snap-type: none; will-change: transform; }
/* over a photo the bar inverts; its menu button is a plain light square, so it inverts with the rest */
.layout:is(.layout--architect, .layout--photographer) > .block-nav-min .nav-min-menu .glass::after { background: #fff; box-shadow: none; border: 0; }
.layout:is(.layout--architect, .layout--photographer) > .block-nav-min .nav-min-menu .glass { color: #000; }

/* =====================================================================
   THIRD SERIES: pricing page, sign in, dashboard
   ===================================================================== */
.block-compare, .block-foot-slim { --block-max: 1120px; padding: clamp(28px, 4.5cqw, 72px) clamp(16px, 3cqw, 32px); }

/* ---------- PLAN COMPARISON: the head sticks while the rows pass ---------- */
.cmp-title { margin-bottom: clamp(20px, 3cqw, 36px); }
.cmp-head, .cmp-row { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 12px; align-items: center; }
.cmp-head { position: sticky; top: 10px; z-index: 5; padding: 14px 18px; border-radius: var(--shape-card); }
.cmp-corner { font-size: 12px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-ink-soft); }
.cmp-plan { display: grid; justify-items: center; gap: 4px; text-align: center; min-width: 0; }
.cmp-plan strong { font-family: var(--font-display); font-size: var(--text-title); letter-spacing: var(--tracking-display); line-height: 1.1; }
.cmp-plan > span { font-size: var(--text-sm); color: var(--color-ink-soft); }
.cmp-plan .btn { margin-top: 6px; }
.cmp-group { margin-top: clamp(20px, 3cqw, 34px); }
.cmp-group-name { padding: 0 18px 8px; font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-accent-text); }
.cmp-row { padding: 14px 18px; border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 10%, transparent); transition: background var(--motion-hover, .2s); }
.cmp-row:hover, .cmp-row.is-hover { background: color-mix(in srgb, var(--color-ink) 4%, transparent); }
.cmp-feat { font-size: var(--text-sm); line-height: 1.4; }
.cmp-cell { display: flex; justify-content: center; text-align: center; min-width: 0; }
.cmp-cell.is-best .cmp-val { font-weight: var(--weight-bold); }
.cmp-yes svg { width: 18px; height: 18px; color: var(--color-accent-text); }
.cmp-no svg { width: 16px; height: 16px; opacity: .35; }
.cmp-val { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
@container (max-width: 640px) {
  .cmp-head, .cmp-row { grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); gap: 6px; }
  .cmp-head { top: 52px; padding: 12px 10px; }   /* clear of the camera island of a phone while it rides along */
  .cmp-head .btn { display: none; }
  .cmp-plan strong { font-size: 16px; }
  .cmp-plan > span { font-size: 12px; }
  .cmp-row { padding: 12px 10px; }
  .cmp-group-name { padding-inline: 10px; }
  .cmp-feat { font-size: 14px; }
  .cmp-val { font-size: 13px; }
}

/* ---------- FOOTER SLIM ---------- */
.block-foot-slim { padding-block: 28px 32px; border-top: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); }
.block-foot-slim .block-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 36px; }
.block-foot-slim nav { display: flex; flex-wrap: wrap; gap: 8px 22px; flex: 1; font-size: var(--text-sm); }
.block-foot-slim nav a:hover { color: var(--color-accent-text); }
.block-foot-slim p { font-size: 13px; color: var(--color-ink-soft); }
@container (max-width: 640px) { .block-foot-slim .block-inner { flex-direction: column; align-items: flex-start; } }

/* ---------- SIGN IN SPLIT ---------- */
.auth-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); min-height: var(--screen-h, 100svh); }
.auth-side { display: flex; flex-direction: column; gap: 24px; padding: clamp(18px, 2.6cqw, 36px) clamp(18px, 5cqw, 72px); min-width: 0; }
.auth-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; }
.auth-back { font-size: var(--text-sm); color: var(--color-ink-soft); }
.auth-back:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.auth-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; width: 100%; max-width: 400px; margin: auto; }
.auth-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.auth-panel[hidden] { display: none; }
.auth-title { font-family: var(--font-display); font-size: clamp(30px, 3.4cqw, 44px); font-weight: var(--weight-bold); line-height: 1.05; letter-spacing: var(--tracking-display); }
.block-auth .auth-lead { margin-top: -4px; color: var(--color-ink-soft); line-height: 1.55; }
.auth-field { display: grid; gap: 6px; }
.auth-label { font-size: 13px; font-weight: var(--weight-medium); }
.auth-field .field-wrap, .auth-field .field { width: 100%; }
.auth-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; font-size: var(--text-sm); }
.auth-row a { color: var(--color-accent-text); }
.auth-panel > .btn { width: 100%; white-space: normal; text-align: center; }
.auth-or { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--color-ink-soft); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--color-ink) 14%, transparent); }
.auth-choices { display: grid; gap: 10px; }
.auth-note { font-size: 13px; color: var(--color-ink-soft); text-align: center; }
.auth-visual { display: grid; grid-template-columns: minmax(0, 1fr); padding: 12px; min-width: 0; }
.auth-visual > * { grid-area: 1 / 1; }
.auth-photo { height: 100%; }
.auth-quote { align-self: end; display: grid; gap: 10px; max-width: 440px; margin: clamp(14px, 3cqw, 40px); padding: 22px 24px; border-radius: var(--shape-card); }
.auth-quote p { font-family: var(--font-display); font-size: clamp(18px, 1.9cqw, 24px); line-height: 1.3; letter-spacing: var(--tracking-display); }
.auth-quote cite { font-style: normal; font-size: 13px; color: var(--color-ink-soft); }
.auth-tag { align-self: start; justify-self: start; max-width: calc(100% - 24px); margin: clamp(14px, 3cqw, 40px); }
.auth-tag .badge { white-space: normal; }
@container (max-width: 900px) {
  .auth-inner { grid-template-columns: minmax(0, 1fr); }
  .auth-form { margin: 40px auto; }
  .auth-visual { min-height: 520px; padding-top: 0; }
}
@container (max-width: 640px) {
  .auth-side { padding: 16px 18px 8px; }
  .auth-form { margin: 24px auto 32px; }
  .auth-visual { min-height: 440px; padding: 0 12px 12px; }
  .auth-quote { margin: 12px; padding: 16px 18px; }
  .auth-tag { margin: 12px; }
}

/* ---------- DASHBOARD ---------- */
.block-dash { --dash-c0: rgb(var(--color-primary)); --dash-c1: color-mix(in srgb, var(--color-ink) 22%, transparent); --dash-c2: rgb(var(--color-danger)); }
.dash-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: var(--screen-h, 100svh); }
.dash-side { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; gap: 22px; height: var(--screen-h, 100svh); padding: 22px 14px;
             border-right: 1px solid color-mix(in srgb, var(--color-ink) 10%, transparent); }
.dash-brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 10px; }
.dash-menu { display: none; }
.dash-nav { display: grid; gap: 4px; }
.dash-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--shape-control); font-size: var(--text-sm); font-weight: var(--weight-medium);
              color: var(--color-ink-soft); transition: background var(--motion-hover, .2s), color var(--motion-hover, .2s); }
.dash-nav svg { flex: none; width: 18px; height: 18px; }
.dash-nav em { margin-left: auto; padding: 2px 8px; border-radius: var(--shape-round); font-size: 12px; font-style: normal; background: color-mix(in srgb, var(--color-ink) 8%, transparent); }
.dash-nav a:hover, .dash-nav a.is-hover { background: color-mix(in srgb, var(--color-ink) 6%, transparent); color: var(--color-ink); }
.dash-nav a.is-current { background: rgba(var(--color-primary), .18); color: var(--color-ink); }
.dash-user { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 14px 8px 0; border-top: 1px solid color-mix(in srgb, var(--color-ink) 10%, transparent); }
.dash-user div { display: grid; min-width: 0; }
.dash-user strong { font-size: 14px; }
.dash-user span { font-size: 12px; color: var(--color-ink-soft); }
.dash-main { display: grid; align-content: start; gap: clamp(14px, 1.8cqw, 22px); padding: clamp(16px, 2.4cqw, 32px); min-width: 0; }
.dash-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; }
.dash-day { font-size: 13px; color: var(--color-ink-soft); }
.dash-title { font-family: var(--font-display); font-size: clamp(26px, 2.6cqw, 36px); font-weight: var(--weight-bold); line-height: 1.1; letter-spacing: var(--tracking-display); }
.dash-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dash-tools .field-wrap { width: 240px; }
.dash-tools .field { width: 100%; }
.dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6cqw, 20px); }
.dash-kpi { display: grid; gap: 4px; padding: 18px 18px 14px; border-radius: var(--shape-card); min-width: 0; }
.dash-kpi-label { font-size: 13px; color: var(--color-ink-soft); }
.dash-kpi-value { font-family: var(--font-display); font-size: clamp(26px, 2.6cqw, 34px); line-height: 1.1; letter-spacing: var(--tracking-display); }
.dash-kpi-note { font-size: 12px; color: var(--color-accent-text); }
.dash-spark { width: 100%; height: 34px; margin-top: 6px; overflow: visible; }
.dash-spark polyline { fill: none; stroke: rgb(var(--color-primary)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dash-charts { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(12px, 1.6cqw, 20px); }
.dash-chart, .dash-table { display: grid; align-content: start; gap: 18px; padding: 20px 22px; border-radius: var(--shape-card); min-width: 0; }
.dash-chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: 10px 16px; }
.dash-chart-head h2 { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.dash-chart-head p { margin-top: 2px; font-size: 13px; color: var(--color-ink-soft); }
.dash-legend { display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--color-ink-soft); }
.dash-legend li::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; border-radius: min(var(--shape-inner, 3px), 3px); background: var(--dash-c1); }
.dash-legend li.is-today::before { background: var(--dash-c0); }
.dash-bars { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; height: 210px; padding-top: 22px; }
.dash-bar { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 6px; min-width: 0; }
.dash-bar-pair { display: flex; align-items: end; justify-content: center; gap: 3px; border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); }
.dash-bar-pair i { position: relative; width: min(14px, 40%); height: var(--h); border-radius: min(var(--shape-inner, 4px), 4px) min(var(--shape-inner, 4px), 4px) 0 0;
                   background: var(--dash-c1); transform-origin: bottom; }
.dash-bar-pair i.is-today { background: var(--dash-c0); }
.dash-bar-pair b { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -4px); font-size: 12px; font-weight: var(--weight-semibold);
                   white-space: nowrap; opacity: 0; transition: opacity var(--motion-hover, .2s); }
.dash-bar:hover b, .dash-bar.is-hover b { opacity: 1; }
.dash-bar em { font-size: 12px; font-style: normal; text-align: center; color: var(--color-ink-soft); }
.dash-donut-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px; }
.dash-donut { position: relative; flex: none; width: 150px; aspect-ratio: 1; }
.dash-donut::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ring);
                      -webkit-mask: radial-gradient(circle, transparent 55%, #000 56%); mask: radial-gradient(circle, transparent 55%, #000 56%); }
.dash-donut span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-size: 12px; color: var(--color-ink-soft); }
.dash-donut strong { display: block; font-family: var(--font-display); font-size: 28px; line-height: 1.1; color: var(--color-ink); }
.dash-donut-legend { display: grid; flex: 1; gap: 10px; min-width: 140px; margin: 0; padding: 0; list-style: none; }
.dash-donut-legend li { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); }
.dash-donut-legend i { flex: none; width: 10px; height: 10px; border-radius: min(var(--shape-inner, 3px), 3px); }
.dash-donut-legend strong { margin-left: auto; }
.dash-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-rows { display: grid; }
.dash-row { display: grid; grid-template-columns: 84px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.1fr) 96px; gap: 12px; align-items: center; padding: 12px 6px;
            border-top: 1px solid color-mix(in srgb, var(--color-ink) 10%, transparent); font-size: var(--text-sm); transition: background var(--motion-hover, .2s); }
.dash-row.is-head { padding-top: 0; border-top: 0; font-size: 12px; letter-spacing: var(--tracking-caps, .1em); text-transform: uppercase; color: var(--color-ink-soft); }
.dash-row:not(.is-head):hover, .dash-row.is-hover { background: color-mix(in srgb, var(--color-ink) 4%, transparent); }
.dash-batt { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dash-batt i { flex: 1; max-width: 90px; height: 6px; border-radius: var(--shape-round);
               background: linear-gradient(90deg, rgb(var(--color-primary)) var(--v), color-mix(in srgb, var(--color-ink) 12%, transparent) var(--v)); }
.dash-batt i.is-low { background: linear-gradient(90deg, rgb(var(--color-danger)) var(--v), color-mix(in srgb, var(--color-ink) 12%, transparent) var(--v)); }
.dash-batt em { min-width: 34px; font-size: 12px; font-style: normal; color: var(--color-ink-soft); }
.dash-state { justify-self: start; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: var(--weight-medium); }
.dash-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); }
.dash-state.is-warn::before { background: rgb(var(--color-primary)); }
.dash-state.is-bad::before { background: rgb(var(--color-danger)); }
.dash-when { font-size: 13px; text-align: right; color: var(--color-ink-soft); }
@container (max-width: 1080px) { .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 900px) {
  .dash-shell { grid-template-columns: 76px minmax(0, 1fr); }
  .dash-side { padding: 20px 10px; align-items: center; }
  .dash-brand { padding: 4px 0; }
  .dash-brand .word-mark { font-size: 15px; }
  .dash-nav a { justify-content: center; padding: 12px; }
  .dash-nav a span, .dash-nav em, .dash-user div { display: none; }
  .dash-user { padding-inline: 0; }
  .dash-charts { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 640px) {
  .dash-shell { grid-template-columns: minmax(0, 1fr); }
  .dash-side { position: static; flex-direction: row; align-items: center; height: auto; padding: 14px 16px; border-right: 0;
               border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 10%, transparent); }
  .dash-brand { flex: 1; }
  .dash-brand .word-mark { font-size: 19px; }
  .dash-menu { display: block; }
  .dash-nav, .dash-user { display: none; }
  .dash-tools, .dash-tools .field-wrap { width: 100%; }
  .dash-kpi { padding: 14px 14px 10px; }
  .dash-bars { gap: 4px; height: 180px; }
  .dash-bar-pair { gap: 2px; }
  .dash-chart, .dash-table { padding: 16px; }
  .dash-row { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.1fr); gap: 10px; padding-inline: 2px; }
  .dash-row > :nth-child(2), .dash-row > :nth-child(5) { display: none; }
  .dash-batt i { max-width: 56px; }
}
/* the charts draw themselves when they come in (only inside a layout, only with motion allowed) */
@media (prefers-reduced-motion: no-preference) {
  .layout.rv-on .dash-bar-pair i { transition: transform .9s cubic-bezier(.22, .61, .36, 1) calc(.25s + var(--b, 0) * 60ms); }
  .layout.rv-on .dash-chart:not(.is-in) .dash-bar-pair i { transform: scaleY(0); }
  .layout.rv-on .dash-donut::before { transition: transform 1.2s cubic-bezier(.22, .61, .36, 1) .2s, opacity .6s .2s; }
  .layout.rv-on .dash-chart:not(.is-in) .dash-donut::before { transform: rotate(-120deg) scale(.85); opacity: 0; }
}

/* =====================================================================
   FOURTH SERIES: docs, article, product, homes, event, podcast,
   chapters, tour, building, case study
   ===================================================================== */

/* ---------- DOCS: tree, page, "on this page"; the bar rides along on top ---------- */
.block-docs { --docs-rule: color-mix(in srgb, var(--color-ink) 11%, transparent); }
.docs-bar { position: sticky; top: 10px; z-index: 12; display: flex; align-items: center; gap: clamp(12px, 2cqw, 28px); margin: 10px; padding: 10px 12px 10px 20px; border-radius: var(--shape-card); }
.docs-name { display: flex; align-items: center; gap: 10px; }
.docs-search { position: relative; flex: 1 1 auto; max-width: 420px; min-width: 0; }
.docs-search .field-wrap, .docs-search .field { width: 100%; }
.docs-search kbd { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); padding: 1px 7px; border-radius: 6px; font: 12px/1.5 var(--font-sans);
                   color: var(--color-ink-soft); border: 1px solid var(--docs-rule); pointer-events: none; }
.docs-links { display: flex; gap: clamp(14px, 2cqw, 24px); margin-left: auto; font-size: var(--text-sm); }
.docs-links a { color: var(--color-ink-soft); }
.docs-links a:hover, .docs-links a.is-hover, .docs-links a.is-current { color: var(--color-ink); }
.docs-find, .docs-menu { display: none; }

.docs-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr) 208px; gap: clamp(20px, 3cqw, 56px); padding: 18px clamp(16px, 2.6cqw, 36px) 56px; }
.docs-tree, .docs-toc { position: sticky; top: 92px; align-self: start; display: grid; gap: 22px; }
.docs-group { display: grid; gap: 2px; }
.docs-group p, .docs-toc > p { margin-bottom: 6px; font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps, .08em); text-transform: uppercase; color: var(--color-ink-soft); }
.docs-group a { padding: 7px 12px; border-radius: var(--shape-control); font-size: var(--text-sm); color: var(--color-ink-soft); transition: background var(--motion-hover, .2s), color var(--motion-hover, .2s); }
.docs-group a:hover, .docs-group a.is-hover { color: var(--color-ink); background: color-mix(in srgb, var(--color-ink) 6%, transparent); }
.docs-group a.is-current { color: var(--color-ink); font-weight: var(--weight-medium); background: rgba(var(--color-primary), .16); }

.docs-main { display: grid; align-content: start; gap: 18px; max-width: 740px; min-width: 0; font-size: var(--text-md); line-height: 1.7; }
.docs-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--color-ink-soft); }
.docs-crumbs i { font-style: normal; opacity: .5; }
.docs-crumbs span { color: var(--color-ink); }
.docs-title { font-family: var(--font-display); font-size: clamp(34px, 4.4cqw, 52px); font-weight: var(--weight-bold); line-height: 1.05; letter-spacing: var(--tracking-display); }
.docs-lead { font-size: clamp(17px, 1.6cqw, 20px); line-height: 1.55; color: var(--color-ink-soft); }
.docs-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-bottom: 18px; border-bottom: 1px solid var(--docs-rule); font-size: 13px; color: var(--color-ink-soft); }
.block-docs .docs-h2 { margin-top: 18px; font-family: var(--font-display); font-size: clamp(22px, 2.2cqw, 28px); line-height: 1.2; letter-spacing: var(--tracking-display); scroll-margin-top: 100px; }
.docs-main code, .docs-note code { padding: 1px 6px; border-radius: 6px; font: max(12px, .88em)/1.5 ui-monospace, "SF Mono", Consolas, monospace; background: color-mix(in srgb, var(--color-ink) 7%, transparent); }
.docs-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: docs-step; }
.docs-steps li { position: relative; padding-left: 40px; counter-increment: docs-step; }
.docs-steps li::before { content: counter(docs-step); position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--shape-round);
                         font-size: 13px; font-weight: var(--weight-semibold); color: var(--color-on-tinted, #fff); background: rgb(var(--color-primary)); }
.docs-code { display: grid; border-radius: var(--shape-card); min-width: 0; }
.docs-code-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--docs-rule); font-size: 12px; color: var(--color-ink-soft); }
.docs-code pre { margin: 0; padding: 16px 18px 18px; font: 13.5px/1.7 ui-monospace, "SF Mono", Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }   /* long lines wrap: no scroll bar inside the page */
.docs-code pre[hidden] { display: none; }
.docs-code pre code { padding: 0; background: none; font: inherit; }
.tk-c { color: var(--color-ink-soft); font-style: italic; }
.tk-k { color: var(--color-accent-text); }
.tk-s { color: var(--color-accent-text); }
.tk-n { color: rgb(var(--color-danger)); }
.docs-note { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 14px 18px; border-radius: var(--shape-box);
             border: 1px solid rgba(var(--color-primary), .40); background: rgba(var(--color-primary), .09); font-size: var(--text-sm); }
.docs-note svg { width: 20px; height: 20px; margin-top: 3px; color: rgb(var(--color-primary)); }
.docs-table { display: grid; font-size: var(--text-sm); border-top: 1px solid var(--docs-rule); }
.docs-tr { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(0, 1.6fr) 80px; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--docs-rule); align-items: baseline; }
.docs-tr.is-head { font-size: 12px; font-weight: var(--weight-semibold); color: var(--color-ink-soft); }
.docs-tr code { justify-self: start; }
.docs-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.docs-page { display: grid; gap: 2px; padding: 16px 20px; border-radius: var(--shape-card); }
.docs-page span { font-size: 12px; color: var(--color-ink-soft); }
.docs-page strong { font-size: var(--text-md); }
.docs-page.is-next { text-align: right; }
.docs-toc { gap: 4px; }
.docs-toc > a { padding: 5px 0 5px 14px; border-left: 2px solid var(--docs-rule); font-size: 13px; color: var(--color-ink-soft); }
.docs-toc > a:hover, .docs-toc > a.is-hover { color: var(--color-ink); }
.docs-toc > a.is-current { color: var(--color-ink); border-left-color: rgb(var(--color-primary)); }
.docs-useful { display: grid; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--docs-rule); font-size: 13px; color: var(--color-ink-soft); }
.docs-useful div { display: flex; gap: 8px; }
@container (max-width: 1100px) {
  .docs-shell { grid-template-columns: 216px minmax(0, 1fr); }
  .docs-toc { display: none; }
}
@container (max-width: 900px) {
  .docs-shell { grid-template-columns: minmax(0, 1fr); padding-top: 8px; }
  .docs-tree, .docs-links { display: none; }
  .docs-menu { display: inline-flex; margin-left: auto; }
  .docs-main { max-width: none; }
}
@container (max-width: 640px) {
  .docs-bar { gap: 8px; padding: 8px 8px 8px 16px; }
  .docs-search, .docs-cta, .docs-name .badge { display: none; }
  .docs-find { display: inline-flex; margin-left: auto; }
  .docs-menu { margin-left: 0; }
  .docs-shell { padding-inline: 16px; }
  .docs-tr { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .docs-tr.is-head { display: none; }
  .docs-tr span:last-child::before { content: "Retried: "; color: var(--color-ink-soft); }
  .docs-pager { grid-template-columns: minmax(0, 1fr); }
  .docs-code-top { padding-inline: 12px; }
  .docs-code pre { padding: 14px; font-size: 13px; }
}

/* ---------- ARTICLE: a narrow column, chapters at the side, photos that break out ---------- */
.block-article { --read: 0; --art-rule: color-mix(in srgb, var(--color-ink) 12%, transparent); }
.art-head { display: grid; justify-items: center; gap: 18px; max-width: 900px; margin: 0 auto; padding: clamp(36px, 6cqw, 96px) 16px clamp(28px, 4cqw, 56px); text-align: center; }
.art-title { font-family: var(--font-display); font-size: clamp(38px, 6.4cqw, 88px); font-weight: var(--weight-bold); line-height: 1; letter-spacing: var(--tracking-display); text-wrap: balance; }
.art-dek { max-width: 620px; font-size: clamp(17px, 1.7cqw, 21px); line-height: 1.5; color: var(--color-ink-soft); }
.art-by { display: flex; align-items: center; gap: 12px; text-align: left; }
.art-by div { display: grid; }
.art-by strong { font-size: 15px; }
.art-by span { font-size: 13px; color: var(--color-ink-soft); }
.art-avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--shape-round); font-size: 14px; font-weight: var(--weight-semibold);
              color: var(--color-on-tinted, #fff); background: rgb(var(--color-primary)); }
.art-lead { display: grid; gap: 10px; margin: 0; padding: 0 clamp(12px, 2cqw, 28px); }
.art-lead .ph { aspect-ratio: 21 / 9; }
.block-article figcaption { font-size: 13px; line-height: 1.5; color: var(--color-ink-soft); }
.art-lead figcaption { padding-inline: 4px; }

.art-shell { display: grid; row-gap: 22px; padding: clamp(32px, 5cqw, 72px) 0 clamp(40px, 6cqw, 88px);
             grid-template-columns: [full-start] minmax(16px, 1fr) [side-start] 190px [side-end] clamp(28px, 4cqw, 64px) [text-start] minmax(0, 660px) [text-end] clamp(0px, 16cqw, 250px) [wide-end] minmax(16px, 1fr) [full-end]; }
.art-shell > * { grid-column: text; min-width: 0; }
.art-bar { display: none; }
.art-side { grid-column: side; grid-row: 2 / span 30; position: sticky; top: 24px; align-self: start; display: grid; gap: 14px; z-index: 1; }
.art-ring { position: relative; width: 60px; height: 60px; }
.art-ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.art-ring-svg circle { fill: none; stroke-width: 3; stroke: var(--art-rule); }
.art-ring-svg .art-ring-fill { stroke: rgb(var(--color-primary)); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--read) * 100); }
.art-pct { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: var(--weight-semibold); }
.block-article .art-side-title { font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps, .08em); text-transform: uppercase; color: var(--color-ink-soft); }
.art-toc { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.art-toc a { display: flex; gap: 10px; padding: 7px 0; font-size: 14px; line-height: 1.35; color: var(--color-ink-soft); transition: color var(--motion-hover, .2s); }
.art-toc a span { font-size: 12px; opacity: .7; padding-top: 1px; }
.art-toc a:hover, .art-toc a.is-hover, .art-toc a.is-current { color: var(--color-ink); }
.art-share { display: flex; gap: 8px; margin-top: 6px; }

.block-article .art-p { font-size: clamp(17px, 1.5cqw, 19px); line-height: 1.75; }
.block-article .art-first::first-letter { float: left; margin: 6px 12px 0 0; font-family: var(--font-display); font-size: 4.2em; line-height: .8; color: rgb(var(--color-primary)); }
.block-article .art-h2 { display: flex; align-items: baseline; gap: 14px; margin-top: 22px; font-family: var(--font-display); font-size: clamp(26px, 2.8cqw, 36px); line-height: 1.15; letter-spacing: var(--tracking-display); scroll-margin-top: 24px; }
.art-h2 span { font-size: .5em; color: rgb(var(--color-primary)); }
.art-wide { grid-column: full; position: relative; z-index: 2; display: grid; gap: 10px; margin: 26px 0; }   /* it passes over the chapters at the side */
.art-wide .ph { aspect-ratio: 16 / 7; border-radius: 0; }
.art-wide figcaption { padding: 0 clamp(16px, 4cqw, 56px); }
.art-quote { grid-column: text-start / wide-end; display: grid; gap: 14px; margin: 18px 0; padding-left: clamp(18px, 3cqw, 36px); border-left: 3px solid rgb(var(--color-primary)); }
.block-article .art-quote p { font-family: var(--font-display); font-size: clamp(26px, 3.4cqw, 44px); line-height: 1.15; letter-spacing: var(--tracking-display); text-wrap: balance; }
.art-quote cite { font-style: normal; font-size: 14px; color: var(--color-ink-soft); }
.art-pair { grid-column: text-start / wide-end; display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(12px, 1.6cqw, 20px); margin: 14px 0; }
.art-pair figure { display: grid; gap: 8px; margin: 0; align-content: start; }
.art-pair .ph img { position: absolute; inset: 0; }
.art-pair figure:first-child .ph { aspect-ratio: 4 / 3; }
.art-pair figure:last-child .ph { aspect-ratio: 4 / 5; }
.art-notes { display: grid; gap: 14px; padding: 20px 22px; border-radius: var(--shape-card); }
.block-article .art-notes-title { font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps, .08em); text-transform: uppercase; color: var(--color-ink-soft); }
.art-notes dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; }
.art-notes dt { font-size: 12px; color: var(--color-ink-soft); }
.art-notes dd { margin: 2px 0 0; font-family: var(--font-display); font-size: clamp(22px, 2.4cqw, 30px); line-height: 1.1; }
.art-end { display: grid; gap: 18px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--art-rule); }
.art-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.art-author { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--shape-card); }
.art-author strong { font-size: 16px; }
.block-article .art-author p { font-size: 14px; color: var(--color-ink-soft); }
@container (max-width: 1100px) {
  .art-shell { grid-template-columns: [full-start] minmax(16px, 1fr) [side-start] 170px [side-end] 36px [text-start] minmax(0, 640px) [text-end wide-end] minmax(16px, 1fr) [full-end]; }
}
@container (max-width: 900px) {
  .art-shell { grid-template-columns: [full-start] minmax(20px, 1fr) [side-start side-end text-start] minmax(0, 640px) [text-end wide-end] minmax(20px, 1fr) [full-end]; padding-top: 0; }
  .art-side { display: none; }
  .art-bar { display: block; grid-column: full; grid-row: 1; position: sticky; top: 0; z-index: 3; height: 3px; background: var(--art-rule); }   /* the ring becomes a line along the top */
  .art-bar i { display: block; height: 100%; width: calc(var(--read) * 100%); background: rgb(var(--color-primary)); }
  .art-lead .ph { aspect-ratio: 3 / 2; }
}
@container (max-width: 640px) {
  .art-shell { grid-template-columns: [full-start] 16px [side-start side-end text-start] minmax(0, 1fr) [text-end wide-end] 16px [full-end]; row-gap: 18px; }
  .art-lead { padding: 0; }
  .art-lead .ph { border-radius: 0; aspect-ratio: 4 / 3; }
  .art-lead figcaption { padding-inline: 16px; }
  .art-wide .ph { aspect-ratio: 4 / 3; }
  .art-pair { grid-template-columns: minmax(0, 1fr); }
  .art-pair figure:last-child .ph { aspect-ratio: 4 / 3; }
  .art-notes dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .art-author { grid-template-columns: auto minmax(0, 1fr); }
  .art-author .btn { grid-column: 1 / -1; }
}

/* ---------- PRODUCT PAGE: photos pass on the left, the buying stays on the right ---------- */
.block-pdp { --block-max: 1240px; --pdp-rule: color-mix(in srgb, var(--color-ink) 12%, transparent); padding: 16px clamp(16px, 3cqw, 32px) clamp(40px, 6cqw, 88px); }
.pdp-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; font-size: 13px; color: var(--color-ink-soft); }
.pdp-crumbs i { font-style: normal; opacity: .5; }
.pdp-crumbs span { color: var(--color-ink); }
.pdp-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4cqw, 64px); align-items: start; }
.pdp-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1.2cqw, 14px); }
.pdp-photo { aspect-ratio: 4 / 5; }
.pdp-photo-0, .pdp-photo-3 { grid-column: 1 / -1; aspect-ratio: 1 / 1; }
.pdp-photo-3 { aspect-ratio: 16 / 10; }
.pdp-buy { position: sticky; top: 24px; display: grid; gap: 18px; min-width: 0; }
.pdp-tag { justify-self: start; }
.pdp-name { font-family: var(--font-display); font-size: clamp(38px, 4.6cqw, 64px); font-weight: var(--weight-bold); line-height: 1; letter-spacing: var(--tracking-display); }
.block-pdp .pdp-sub { font-size: var(--text-md); line-height: 1.55; color: var(--color-ink-soft); }
.pdp-notes { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.pdp-notes span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: rgb(var(--color-primary)); vertical-align: 2px; }
.block-pdp .pdp-price { font-family: var(--font-display); font-size: clamp(30px, 3cqw, 40px); line-height: 1; padding-top: 16px; border-top: 1px solid var(--pdp-rule); }
.pdp-price[hidden] { display: none; }
.pdp-price small { font-family: var(--font-sans); font-size: 14px; color: var(--color-ink-soft); }
.pdp-opt { display: grid; gap: 10px; }
.pdp-label { font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps, .08em); text-transform: uppercase; color: var(--color-ink-soft); }
.pdp-opt .segmented { width: 100%; }
.pdp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp-plans { display: grid; gap: 8px; }
.pdp-add { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; }
.pdp-add .btn { width: 100%; }
.pdp-qty { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--shape-control); }
.pdp-qty > span { min-width: 30px; text-align: center; font-weight: var(--weight-semibold); }
.block-pdp .pdp-ship { display: flex; gap: 10px; align-items: start; font-size: 13px; line-height: 1.5; color: var(--color-ink-soft); }
.pdp-ship svg { flex: none; width: 18px; height: 18px; }
.pdp-details { border-top: 1px solid var(--pdp-rule); }
.pdp-fold { border-bottom: 1px solid var(--pdp-rule); }
.pdp-fold summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; cursor: pointer; list-style: none; font-weight: var(--weight-medium); }
.pdp-fold summary::-webkit-details-marker { display: none; }
.pdp-fold summary svg { flex: none; width: 18px; height: 18px; transition: transform var(--motion-hover, .2s); }
.pdp-fold[open] summary svg { transform: rotate(45deg); }
.pdp-fold summary:hover, .pdp-fold summary.is-hover { color: rgb(var(--color-primary)); }
.block-pdp .pdp-fold p { padding-bottom: 16px; font-size: 14px; line-height: 1.6; color: var(--color-ink-soft); }
@container (max-width: 900px) {
  .pdp-grid { grid-template-columns: minmax(0, 1fr); }
  .pdp-buy { position: static; }
  .pdp-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* the photos become a row of four above the buying */
  .pdp-photo-0 { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .pdp-photo, .pdp-photo-3 { grid-column: auto; aspect-ratio: 1 / 1; }
  .pdp-photo-0 { grid-column: 1 / -1; }
}
@container (max-width: 640px) {
  .pdp-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pdp-photo-3 { display: none; }
  .pdp-add { grid-template-columns: minmax(0, 1fr); }
  .pdp-qty { justify-self: start; }
}

/* ---------- SPOTS: numbered points on a photo, and what each one means ---------- */
.block-spots { --block-max: 1120px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.block-spots .block-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 5cqw, 72px); align-items: center; }
.spots-photo { position: relative; }
.spots-photo .ph { aspect-ratio: 4 / 5; }
.spot { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--shape-round); font-size: 14px; font-weight: var(--weight-bold);
        color: var(--color-ink); background: var(--page-bg, #fff); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-ink) 15%, transparent); transition: transform var(--motion-hover, .2s), background var(--motion-hover, .2s); }
.spots-photo .spot { position: absolute; transform: translate(-50%, -50%); box-shadow: 0 0 0 6px color-mix(in srgb, #fff 35%, transparent), 0 6px 18px rgba(0, 0, 0, .25); }
.spot.is-active { color: var(--color-on-tinted, #fff); background: rgb(var(--color-primary)); }
.spots-photo .spot.is-active { transform: translate(-50%, -50%) scale(1.15); }
.spots-copy { display: grid; gap: 24px; }
.spots-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.spots-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 14px 12px; border-radius: var(--shape-box); cursor: default; transition: background var(--motion-hover, .2s); }
.spots-list li.is-active { background: rgba(var(--color-primary), .10); }
.spots-list h3 { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.block-spots .spots-list p { margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--color-ink-soft); }
@container (max-width: 900px) {
  .block-spots .block-inner { grid-template-columns: minmax(0, 1fr); }
  .spots-photo .ph { aspect-ratio: 4 / 3; }
}
@container (max-width: 640px) {
  .spots-list li { padding: 12px 8px; gap: 12px; }
}

/* ---------- ESTATE HERO: a photo, a big line, the search across its bottom edge ---------- */
.block-estate-hero { display: grid; }
.eh-photo { position: relative; display: grid; margin: 0 clamp(10px, 1.6cqw, 20px); }
.eh-photo > * { grid-area: 1 / 1; }
.eh-photo .ph { min-height: min(52cqw, 640px); }
.eh-photo .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 10, 12, .1), rgba(8, 10, 12, .5)); }
.eh-copy { position: relative; align-self: end; display: grid; gap: 12px; max-width: 900px; padding: clamp(20px, 4cqw, 56px) clamp(20px, 4cqw, 56px) clamp(70px, 8cqw, 110px); color: #fbf8f2; }
.eh-kicker { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; opacity: .9; }
.eh-title { font-family: var(--font-display); font-size: clamp(36px, 6.4cqw, 92px); font-weight: var(--weight-bold); line-height: .98; letter-spacing: var(--tracking-display); text-wrap: balance; }
.eh-search { position: relative; z-index: 2; display: grid; gap: 14px; width: min(100% - 2 * clamp(12px, 4cqw, 56px), 1040px); margin: calc(-1 * clamp(44px, 5cqw, 64px)) auto 0; padding: 16px; border-radius: var(--shape-card); }
.eh-search .segmented { justify-self: start; }
.eh-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: stretch; }
.pick-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 10px 14px; text-align: left; font: inherit; color: var(--color-ink); cursor: pointer;
              background: transparent; border: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); border-radius: var(--shape-control); transition: border-color var(--motion-hover, .2s); }
.pick-field:hover, .pick-field.is-hover { border-color: color-mix(in srgb, var(--color-ink) 34%, transparent); }
.pick-field:focus-visible, .pick-field.is-focus { outline: 2px solid rgb(var(--color-primary)); outline-offset: 2px; }
.pick-label { grid-column: 1; font-size: 12px; color: var(--color-ink-soft); }
.pick-value { grid-column: 1; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 15px; font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-value svg { flex: none; width: 16px; height: 16px; color: rgb(var(--color-primary)); }
.pick-field > svg { grid-column: 2; grid-row: 1 / span 2; width: 16px; height: 16px; color: var(--color-ink-soft); transition: transform var(--motion-hover); }
@container (max-width: 900px) {
  .eh-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eh-fields .btn { grid-column: 1 / -1; }
}
@container (max-width: 640px) {
  .eh-photo { margin: 0; }
  .eh-photo .ph { min-height: 440px; border-radius: 0; }
  .eh-copy { padding: 20px 18px 64px; }
  .eh-search { width: calc(100% - 24px); padding: 12px; }
  .eh-fields { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- LISTINGS WITH MAP: cards on the left, the map stays on the right ---------- */
.block-listings { --block-max: 1240px; padding: clamp(40px, 6cqw, 88px) clamp(16px, 3cqw, 32px); }
.lst-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; }
.lst-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 24px; }
.lst-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(16px, 2.4cqw, 32px); align-items: start; }
.lst-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4cqw, 30px) clamp(12px, 1.8cqw, 22px); }
.lst-card { display: grid; gap: 8px; min-width: 0; }
.lst-photo { position: relative; }
.lst-photo .ph { aspect-ratio: 4 / 3; }
.lst-photo .ph img { transition: transform .6s ease; }
.lst-card:hover .ph img, .lst-card.is-hover .ph img { transform: scale(1.04); }
.lst-price { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: var(--shape-control); font-family: var(--font-display); font-size: 17px; font-weight: var(--weight-bold);
             color: #fff; background: rgba(12, 14, 16, .62); backdrop-filter: blur(6px); }
.lst-flag { position: absolute; left: 12px; top: 12px; }
.lst-save { position: absolute; right: 10px; top: 10px; }
.lst-card h3 { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.block-listings .lst-specs { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--color-ink-soft); }
.lst-specs strong { color: var(--color-ink); }
.lst-map { position: sticky; top: 24px; height: min(640px, calc(var(--screen-h, 100svh) - 48px)); min-height: 360px; border-radius: var(--shape-card); overflow: hidden; }
.lst-map-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-water { fill: rgb(var(--color-primary)); fill-opacity: .2; }
.map-park { fill: var(--color-success, #4a8); fill-opacity: .2; }
.map-road { fill: none; stroke: color-mix(in srgb, var(--color-ink) 16%, transparent); stroke-width: .8; vector-effect: non-scaling-stroke; }
.map-pin { position: absolute; z-index: 1; transform: translate(-50%, -100%); padding: 5px 10px; border-radius: var(--shape-round); font-size: 13px; font-weight: var(--weight-bold); white-space: nowrap;
           color: var(--color-ink); background: var(--page-bg, #fff); box-shadow: 0 4px 14px rgba(0, 0, 0, .16), 0 0 0 1px color-mix(in srgb, var(--color-ink) 12%, transparent); transition: transform var(--motion-hover, .2s); }
.map-pin.is-active { z-index: 2; color: var(--color-on-tinted, #fff); background: rgb(var(--color-primary)); transform: translate(-50%, -100%) scale(1.1); }
.map-note { position: absolute; left: 14px; bottom: 12px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-ink-soft); }
.map-note svg { width: 14px; height: 14px; }
@container (max-width: 900px) {
  .lst-grid { grid-template-columns: minmax(0, 1fr); }
  .lst-map { display: none; }   /* on a tablet the map waits behind the Map tab */
}
@container (max-width: 640px) {
  .lst-cards { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- NEARBY: everyday places in big numbers ---------- */
.block-nearby { --block-max: 1120px; padding: clamp(40px, 6cqw, 88px) clamp(16px, 3cqw, 32px); }
.near-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 3cqw, 40px); margin-top: clamp(24px, 4cqw, 48px); }
.near-item { display: grid; align-content: start; gap: 6px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--color-ink) 16%, transparent); }
.block-nearby .near-num { font-family: var(--font-display); font-size: clamp(56px, 8cqw, 112px); font-weight: var(--weight-bold); line-height: .9; letter-spacing: var(--tracking-display); }
.near-num small { margin-left: 6px; font-size: .3em; font-weight: var(--weight-medium); letter-spacing: 0; color: var(--color-ink-soft); }
.near-item h3 { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.block-nearby .near-note { font-size: 14px; line-height: 1.5; color: var(--color-ink-soft); }
@container (max-width: 900px) { .near-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- AGENT: a portrait, a few words, the ways to reach them ---------- */
.block-agent { --block-max: 1120px; padding: clamp(24px, 4cqw, 64px) clamp(16px, 3cqw, 32px) clamp(40px, 6cqw, 88px); }
.agent-card { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(20px, 4cqw, 56px); align-items: center; padding: clamp(12px, 1.6cqw, 18px); border-radius: var(--shape-card); }
.agent-photo { aspect-ratio: 4 / 5; }
.agent-copy { display: grid; gap: 16px; padding: 12px clamp(8px, 2cqw, 28px) 12px 0; }
.block-agent .agent-role { font-size: 13px; letter-spacing: var(--tracking-caps, .1em); text-transform: uppercase; color: var(--color-ink-soft); }
.agent-name { font-family: var(--font-display); font-size: clamp(34px, 4.4cqw, 56px); font-weight: var(--weight-bold); line-height: 1; letter-spacing: var(--tracking-display); }
.agent-quote { margin: 0; font-size: clamp(17px, 1.7cqw, 21px); line-height: 1.5; }
.agent-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 8px 0; }
.agent-facts dt { font-size: 12px; color: var(--color-ink-soft); }
.agent-facts dd { margin: 2px 0 0; font-size: 14px; font-weight: var(--weight-medium); }
.agent-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@container (max-width: 900px) {
  .agent-card { grid-template-columns: minmax(0, 1fr); }
  .agent-photo { aspect-ratio: 4 / 3; }
  .agent-copy { padding: 4px 8px 12px; }
}
@container (max-width: 640px) {
  .agent-facts { grid-template-columns: minmax(0, 1fr); }
  .agent-actions .btn { width: 100%; }
}

/* ---------- EVENT HERO: the date is the biggest thing, three facts across the bottom edge ---------- */
.block-event-hero { display: grid; padding: clamp(16px, 3cqw, 40px) clamp(16px, 3cqw, 40px) 0; }
.ev-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4cqw, 56px); align-items: stretch; }
.ev-copy { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 16px; min-width: 0; padding-bottom: clamp(56px, 7cqw, 96px); }
.ev-date { display: grid; font-family: var(--font-display); font-weight: var(--weight-bold); line-height: .82; letter-spacing: var(--tracking-display); }
.ev-date span { font-size: clamp(64px, 15cqw, 220px); }
.ev-kicker .badge { max-width: 100%; white-space: normal; }
.ev-date small { font-size: clamp(32px, 4.6cqw, 64px); line-height: 1; color: rgb(var(--color-primary)); }
.block-event-hero .ev-name { font-size: clamp(18px, 1.8cqw, 22px); font-weight: var(--weight-semibold); }
.block-event-hero .ev-lead { max-width: 480px; font-size: var(--text-md); line-height: 1.55; color: var(--color-ink-soft); }
.block-event-hero .ev-place { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ev-place svg { flex: none; width: 18px; height: 18px; color: rgb(var(--color-primary)); }
.ev-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ev-photo { min-height: min(52cqw, 640px); }
.ev-facts { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100% - 2 * clamp(12px, 5cqw, 80px), 900px); margin: calc(-1 * clamp(40px, 5cqw, 60px)) auto 0;
            padding: clamp(14px, 2cqw, 24px) 0; border-radius: var(--shape-card); }
.ev-facts div { display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; padding: 0 12px; text-align: center; }
.ev-facts div + div { border-left: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); }
.ev-facts dt { font-size: 13px; color: var(--color-ink-soft); }
.ev-facts dd { margin: 0; font-family: var(--font-display); font-size: clamp(30px, 3.6cqw, 48px); line-height: 1; }
@container (max-width: 900px) {
  .ev-inner { grid-template-columns: minmax(0, 1fr); }
  .ev-copy { padding-bottom: 8px; }
  .ev-photo { min-height: 0; aspect-ratio: 16 / 10; }
}
@container (max-width: 640px) {
  .ev-facts { width: calc(100% - 24px); }
  .ev-facts div { padding: 0 6px; }
  .ev-actions .btn { flex: 1 1 100%; }
}

/* ---------- SPEAKERS: three with a photo, the rest as lines ---------- */
.block-speakers { --block-max: 1120px; padding: clamp(56px, 8cqw, 112px) clamp(16px, 3cqw, 32px) clamp(40px, 6cqw, 80px); }
.spk-lead { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2cqw, 24px); margin-top: clamp(24px, 4cqw, 44px); }
.spk-card { display: grid; gap: 14px; min-width: 0; }
.spk-photo { aspect-ratio: 4 / 5; }
.spk-photo img { transition: transform .6s ease; }
.spk-card:hover .spk-photo img, .spk-card.is-hover .spk-photo img { transform: scale(1.04); }
.spk-body { display: grid; gap: 4px; }
.spk-body h3 { font-family: var(--font-display); font-size: clamp(20px, 2cqw, 26px); letter-spacing: var(--tracking-display); }
.block-speakers .spk-role { font-size: 13px; color: var(--color-ink-soft); }
.block-speakers .spk-talk { font-size: 15px; line-height: 1.45; }
.spk-rest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 4cqw, 48px); margin: clamp(28px, 4cqw, 48px) 0 0; padding: 0; list-style: none; }
.spk-rest li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 14px 0; border-top: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); }
.spk-initials { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--shape-round); font-size: 14px; font-weight: var(--weight-semibold);
                background: rgba(var(--color-primary), .16); }
.spk-rest li div { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.spk-rest strong { font-size: 15px; }
.spk-rest li div span { font-size: 13px; color: var(--color-ink-soft); }
.block-speakers .spk-rest p { font-size: 14px; line-height: 1.4; }
.spk-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14px; font-weight: var(--weight-medium); color: var(--color-accent-text); }
.spk-more svg { width: 16px; height: 16px; transition: transform var(--motion-hover, .2s); }
.spk-more:hover svg, .spk-more.is-hover svg { transform: translateX(4px); }
@container (max-width: 900px) { .spk-rest { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 640px) {
  .spk-lead { grid-template-columns: minmax(0, 1fr); }
  .spk-photo { aspect-ratio: 4 / 3; }
}

/* ---------- AGENDA: a day per tab, two rooms side by side ---------- */
.block-agenda { --block-max: 1120px; --agd-rule: color-mix(in srgb, var(--color-ink) 12%, transparent); padding: clamp(40px, 6cqw, 88px) clamp(16px, 3cqw, 32px); }
.agd-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: clamp(20px, 3cqw, 36px); }
.agd-rooms, .agd-row { display: grid; grid-template-columns: 90px repeat(2, minmax(0, 1fr)); gap: 12px clamp(12px, 2cqw, 24px); }
.agd-rooms { padding-bottom: 10px; font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps, .08em); text-transform: uppercase; color: var(--color-ink-soft); }
.agd-day[hidden] { display: none; }
.agd-row { padding: 16px 0; border-top: 1px solid var(--agd-rule); align-items: start; }
.agd-row time { font-family: var(--font-display); font-size: clamp(18px, 1.8cqw, 22px); font-variant-numeric: tabular-nums; }
.agd-row.is-single .agd-talk { grid-column: 2 / -1; }
.agd-row.is-break { align-items: center; }
.block-agenda .agd-row.is-break p { grid-column: 2 / -1; padding: 10px 16px; border-radius: var(--shape-box); font-size: 14px; color: var(--color-ink-soft);
                                     background: repeating-linear-gradient(135deg, transparent 0 8px, color-mix(in srgb, var(--color-ink) 5%, transparent) 8px 16px); }
.agd-talk { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--shape-box); background: rgba(var(--color-primary), .08); transition: background var(--motion-hover, .2s); }
.agd-talk:hover, .agd-talk.is-hover { background: rgba(var(--color-primary), .16); }
.agd-talk.is-empty { background: none; }
.agd-room { display: none; font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps, .08em); text-transform: uppercase; color: var(--color-accent-text); }
.agd-talk h3 { font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: 1.3; }
.block-agenda .agd-talk p { font-size: 13px; color: var(--color-ink-soft); }
@container (max-width: 640px) {
  .agd-rooms { display: none; }
  .agd-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .agd-row.is-single .agd-talk, .block-agenda .agd-row.is-break p { grid-column: 1; }
  .agd-talk.is-empty { display: none; }
  .agd-room { display: block; }   /* one column on a phone: each talk says its room */
  .agd-head .segmented { width: 100%; }
}

/* ---------- TICKETS: a stub with the price, a torn line, a sold out one shows it ---------- */
.block-tickets { --block-max: 1120px; padding: clamp(40px, 6cqw, 88px) clamp(16px, 3cqw, 32px); }
.tix-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2cqw, 24px); margin-top: clamp(24px, 4cqw, 44px); align-items: stretch; }
.tix { position: relative; display: grid; grid-template-rows: 1fr auto; border-radius: var(--shape-card); min-width: 0; }
.tix-main { display: grid; align-content: start; gap: 14px; padding: 24px 24px 20px; }
.tix-main h3 { font-family: var(--font-display); font-size: clamp(20px, 2cqw, 26px); letter-spacing: var(--tracking-display); }
.tix-main ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.tix-main li { display: flex; gap: 10px; align-items: start; }
.tix-main li svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: rgb(var(--color-primary)); }
.tix-stub { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 24px 24px; border-top: 2px dashed color-mix(in srgb, var(--color-ink) 22%, transparent); }
.tix-stub::before, .tix-stub::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--page-bg, #fff); background-attachment: fixed; }   /* the notches where it tears */
.tix-stub::before { left: -11px; }
.tix-stub::after { right: -11px; }
.block-tickets .tix-price { font-family: var(--font-display); font-size: clamp(32px, 3.4cqw, 44px); line-height: 1; }
.tix-price small { margin-left: 6px; font-family: var(--font-sans); font-size: 13px; color: var(--color-ink-soft); }
.tix.is-sold .tix-main, .tix.is-sold .tix-price { opacity: .5; }
.tix.is-sold .tix-price { text-decoration: line-through; text-decoration-thickness: 2px; }
.block-tickets .tix-note { margin-top: 24px; text-align: center; font-size: 14px; color: var(--color-ink-soft); }
@container (max-width: 900px) { .tix-grid { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; } }

/* ---------- PODCAST: the newest episode with a player, every episode as a line, the host ---------- */
.pod-play { display: inline-grid; place-items: center; flex: none; border-radius: var(--shape-round); cursor: pointer; }
.pod-play--lg { width: 64px; height: 64px; }
.pod-play--sm { width: 40px; height: 40px; }
.pod-play svg { width: 44%; height: 44%; }
.pod-play .glass-label { display: grid; place-items: center; }
.pod-play svg + svg, .pod-play.is-playing svg:first-child { display: none; }
.pod-play.is-playing svg + svg { display: block; }

.block-pod-hero { --block-max: 1180px; padding: clamp(28px, 5cqw, 80px) clamp(16px, 3cqw, 32px) clamp(40px, 6cqw, 88px); }
.pod-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5cqw, 72px); align-items: center; }
.pod-cover { position: relative; display: grid; }
.pod-cover .ph { aspect-ratio: 1 / 1; }
.pod-cover .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .55)); }
.pod-cover-name { position: absolute; left: clamp(16px, 3cqw, 32px); bottom: clamp(14px, 2.6cqw, 28px); font-family: var(--font-display); font-size: clamp(40px, 7cqw, 96px);
                  font-weight: var(--weight-bold); line-height: .9; letter-spacing: var(--tracking-display); color: #fff; }
.pod-copy { display: grid; gap: 18px; min-width: 0; }
.block-pod-hero .pod-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--color-ink-soft); }
.pod-title { font-family: var(--font-display); font-size: clamp(32px, 4.4cqw, 60px); font-weight: var(--weight-bold); line-height: 1.02; letter-spacing: var(--tracking-display); text-wrap: balance; }
.block-pod-hero .pod-lead { font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }
.pod-player { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 14px 18px 14px 14px; border-radius: var(--shape-card); }
.pod-track { display: grid; gap: 6px; min-width: 0; }
.pod-wave { position: relative; height: 44px; }
.pod-bars { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; }
.pod-bars i { flex: 1 1 0; min-width: 0; height: var(--h); border-radius: 2px; background: color-mix(in srgb, var(--color-ink) 22%, transparent); }
.pod-bars.is-done { clip-path: inset(0 75% 0 0); animation: pod-run 90s linear forwards paused; }
.pod-bars.is-done i { background: rgb(var(--color-primary)); }
.pod-player.is-playing .pod-bars.is-done { animation-play-state: running; }
@keyframes pod-run { to { clip-path: inset(0 0 0 0); } }
.pod-times { display: flex; justify-content: space-between; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--color-ink-soft); }
.pod-skip { display: flex; align-items: center; gap: 6px; }
.pod-follow { display: flex; flex-wrap: wrap; gap: 10px; }
@container (max-width: 900px) {
  .pod-hero { grid-template-columns: minmax(0, 1fr); }
  .pod-cover { max-width: 520px; }
}
@container (max-width: 640px) {
  .pod-player { grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; }
  .pod-skip { grid-column: 1 / -1; justify-content: space-between; }
  .pod-follow .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .pod-bars.is-done { animation: none; } }

.block-episodes { --block-max: 1120px; padding: clamp(32px, 5cqw, 72px) clamp(16px, 3cqw, 32px); }
.ep-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 20px; }
.ep-list { display: grid; margin: 0; padding: 0; list-style: none; }
.ep-list[hidden] { display: none; }
.ep-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; align-items: center; gap: clamp(12px, 2cqw, 24px); padding: 16px 12px; border-top: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent);
          border-radius: var(--shape-box); transition: background var(--motion-hover, .2s); }
.ep-row:hover, .ep-row.is-hover { background: color-mix(in srgb, var(--color-ink) 5%, transparent); }
.ep-num { font-family: var(--font-display); font-size: clamp(22px, 2.4cqw, 32px); color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.ep-text { display: grid; gap: 2px; min-width: 0; }
.ep-text h3 { font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: 1.3; }
.block-episodes .ep-text p { font-size: 13px; color: var(--color-ink-soft); }
.ep-len { font-size: 13px; color: var(--color-ink-soft); white-space: nowrap; }
@container (max-width: 640px) {
  .ep-head .segmented { width: 100%; }
  .ep-row { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 6px; gap: 6px 12px; }
  .ep-num { display: none; }
  .ep-len { grid-row: 2; }
  .ep-row .pod-play { grid-column: 2; grid-row: 1 / span 2; }
}

.block-host { --block-max: 1120px; padding: clamp(40px, 6cqw, 88px) clamp(16px, 3cqw, 32px); }
.host-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5cqw, 72px); align-items: center; }
.host-photos { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: auto; }
.host-photo { grid-column: 1 / 6; grid-row: 1; aspect-ratio: 4 / 5; }
.host-studio { grid-column: 4 / 7; grid-row: 1; align-self: end; aspect-ratio: 1 / 1; margin-bottom: -28px; z-index: 1; }   /* the studio overlaps the portrait's corner */
.host-copy { display: grid; justify-items: start; gap: 16px; }
.host-name { font-family: var(--font-display); font-size: clamp(34px, 4.4cqw, 56px); font-weight: var(--weight-bold); line-height: 1; letter-spacing: var(--tracking-display); }
.block-host .host-text { font-size: var(--text-md); line-height: 1.65; color: var(--color-ink-soft); }
.host-facts { display: grid; gap: 0; width: 100%; margin: 8px 0 0; }
.host-facts div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); font-size: 14px; }
.host-facts dt { color: var(--color-ink-soft); }
.host-facts dd { margin: 0; font-weight: var(--weight-medium); text-align: right; }
@container (max-width: 900px) {
  .host-grid { grid-template-columns: minmax(0, 1fr); }
  .host-photos { max-width: 560px; margin-bottom: 28px; }
}

/* ---------- CHAPTERS: a studio told in numbered chapters, the menu follows the reading ---------- */
.block-chapters { --chp-rule: color-mix(in srgb, var(--color-ink) 16%, transparent); }
.chp-intro { display: grid; gap: clamp(16px, 2.4cqw, 28px); padding: clamp(32px, 6cqw, 96px) clamp(16px, 4cqw, 56px) 0; }
.block-chapters .chp-kicker { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-ink-soft); }
.chp-title { max-width: 1100px; font-family: var(--font-display); font-size: clamp(38px, 6.6cqw, 96px); font-weight: var(--weight-bold); line-height: .98; letter-spacing: var(--tracking-display); text-wrap: balance; }
.chp-intro-photo { aspect-ratio: 21 / 8; margin-top: clamp(8px, 2cqw, 24px); }

.chp-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(24px, 5cqw, 80px); padding: clamp(40px, 6cqw, 96px) clamp(16px, 4cqw, 56px); }
.chp-menu { position: sticky; top: 24px; align-self: start; display: grid; gap: 2px; }
.chp-menu a { display: flex; gap: 12px; padding: 8px 0; font-size: 15px; color: var(--color-ink-soft); transition: color var(--motion-hover, .2s), padding var(--motion-hover, .2s); }
.chp-menu a span { font-size: 12px; font-variant-numeric: tabular-nums; padding-top: 2px; }
.chp-menu a:hover, .chp-menu a.is-hover { color: var(--color-ink); }
.chp-menu a.is-current { color: var(--color-ink); padding-left: 12px; background: linear-gradient(rgb(var(--color-primary)), rgb(var(--color-primary))) left / 3px 100% no-repeat; }
.chp-list { display: grid; gap: clamp(64px, 9cqw, 140px); max-width: 860px; min-width: 0; }
.chp { display: grid; gap: clamp(20px, 3cqw, 36px); scroll-margin-top: 24px; }
.block-chapters .chp-head { display: flex; align-items: baseline; gap: 16px; padding-top: 14px; border-top: 1px solid var(--chp-rule);
                            font-size: 14px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps, .1em); text-transform: uppercase; }
.chp-head span { color: rgb(var(--color-primary)); }
.block-chapters .chp-statement { font-family: var(--font-display); font-size: clamp(26px, 3.4cqw, 44px); line-height: 1.2; letter-spacing: var(--tracking-display); text-wrap: pretty; }
.chp-rows { display: grid; margin: 0; padding: 0; list-style: none; }
.chp-rows li { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--chp-rule); transition: padding var(--motion-hover, .2s); }
.chp-rows li:hover, .chp-rows li.is-hover { padding-left: 10px; }
.chp-rows span { font-size: 13px; color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.chp-rows h3 { font-family: var(--font-display); font-size: clamp(24px, 3cqw, 38px); line-height: 1.05; letter-spacing: var(--tracking-display); }
.block-chapters .chp-rows p { font-size: 14px; line-height: 1.5; color: var(--color-ink-soft); }
.chp-strips { display: flex; gap: 10px; height: clamp(320px, 44cqw, 520px); }
.chp-strip { position: relative; flex: 1 1 0; min-width: 0; display: grid; transition: flex-grow .6s cubic-bezier(.2, .7, .2, 1); }
.chp-strip.is-open { flex-grow: 3.2; }
.chp-strip .ph { height: 100%; }
.chp-strip-label { position: absolute; left: 14px; bottom: 14px; display: grid; gap: 2px; max-width: calc(100% - 28px); padding: 8px 12px; border-radius: var(--shape-control);
                   color: #fff; background: rgba(10, 10, 10, .55); backdrop-filter: blur(6px); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.chp-strip.is-open .chp-strip-label { opacity: 1; transform: none; }
.chp-strip-label strong { font-size: 15px; }
.chp-strip-label small { font-size: 12px; opacity: .85; }
.chp-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.chp-steps::before { content: ""; position: absolute; left: 0; right: 0; top: 19px; height: 1px; background: var(--chp-rule); }   /* the line the steps sit on */
.chp-steps li { position: relative; display: grid; gap: 8px; align-content: start; }
.chp-dot { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--shape-round); font-size: 13px; font-weight: var(--weight-bold);
           color: var(--color-on-tinted, #fff); background: rgb(var(--color-primary)); }
.chp-steps h3 { margin-top: 6px; font-size: var(--text-lg, 20px); font-weight: var(--weight-semibold); }
.block-chapters .chp-steps p { font-size: 14px; line-height: 1.5; color: var(--color-ink-soft); }
.chp-hello { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 20px 32px; align-items: end; }
.chp-mail { grid-column: 1 / -1; font-family: var(--font-display); font-size: clamp(30px, 5.6cqw, 76px); font-weight: var(--weight-bold); line-height: 1; letter-spacing: var(--tracking-display);
            overflow-wrap: anywhere; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.chp-mail:hover, .chp-mail.is-hover { color: rgb(var(--color-primary)); }
.chp-hello-photo { aspect-ratio: 4 / 3; }
.chp-hello ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 15px; color: var(--color-ink-soft); }
@container (max-width: 900px) {
  .chp-shell { grid-template-columns: minmax(0, 1fr); }
  .chp-menu { display: none; }
  .chp-intro-photo { aspect-ratio: 16 / 9; }
  .chp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .chp-steps::before { display: none; }
}
@container (max-width: 640px) {
  .chp-rows li { grid-template-columns: 40px minmax(0, 1fr); }
  .chp-rows p { grid-column: 2; }
  .chp-strips { flex-direction: column; height: auto; }
  .chp-strip { flex: none; height: 200px; }
  .chp-strip.is-open { height: 300px; }
  .chp-strip .chp-strip-label { opacity: 1; transform: none; }
  .chp-steps { grid-template-columns: minmax(0, 1fr); }
  .chp-hello { grid-template-columns: minmax(0, 1fr); }
  .chp-intro-photo { aspect-ratio: 4 / 3; }
}

/* ---------- TOUR HERO: the walk in numbers, three tall day cards leaning in ---------- */
.block-tour-hero { --block-max: 1240px; padding: clamp(28px, 5cqw, 80px) clamp(16px, 3cqw, 32px) clamp(40px, 6cqw, 88px); overflow: clip; }
.th-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4cqw, 64px); align-items: center; }
.th-copy { display: grid; justify-items: start; gap: 18px; min-width: 0; }
.th-copy .badge { max-width: 100%; white-space: normal; }
.th-title { font-family: var(--font-display); font-size: clamp(38px, 5.6cqw, 80px); font-weight: var(--weight-bold); line-height: 1; letter-spacing: var(--tracking-display); text-wrap: balance; }
.block-tour-hero .th-lead { max-width: 500px; font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }
.th-facts { display: grid; grid-template-columns: repeat(4, auto); gap: 8px clamp(16px, 3cqw, 36px); margin: 4px 0; }
.th-facts div { display: grid; }
.th-facts dd { margin: 0; font-family: var(--font-display); font-size: clamp(26px, 3cqw, 40px); line-height: 1; }
.th-facts dt { font-size: 13px; color: var(--color-ink-soft); }
.th-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.th-cards { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.4cqw, 16px); align-items: end; }
.th-card { position: relative; margin: 0; }
.th-card .ph { aspect-ratio: 9 / 16; }
.th-card-0 { transform: translateY(8%); }
.th-card-2 { transform: translateY(-6%); }
.th-card figcaption { position: absolute; left: 10px; right: 10px; bottom: 10px; display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--shape-control);
                      font-size: 14px; font-weight: var(--weight-semibold); color: #fff; background: rgba(12, 14, 12, .5); backdrop-filter: blur(6px); }
.th-card figcaption span { font-size: 12px; font-weight: var(--weight-regular); letter-spacing: var(--tracking-caps, .08em); text-transform: uppercase; opacity: .85; }
@container (max-width: 900px) {
  .th-grid { grid-template-columns: minmax(0, 1fr); }
  .th-card-0, .th-card-2 { transform: none; }
  .th-card .ph { aspect-ratio: 3 / 4; }
}
@container (max-width: 640px) {
  .th-facts { grid-template-columns: repeat(2, auto); }
  .th-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .th-card figcaption { left: 6px; right: 6px; bottom: 6px; padding: 6px 8px; font-size: 12px; }
  .th-card figcaption span { font-size: 12px; }
  .th-actions .btn { flex: 1 1 100%; }
}

/* ---------- ITINERARY: day by day down one line, sides swapping ---------- */
.block-itinerary { --block-max: 1120px; --iti-rule: color-mix(in srgb, var(--color-ink) 16%, transparent); padding: clamp(48px, 7cqw, 104px) clamp(16px, 3cqw, 32px); }
.iti-list { position: relative; display: grid; gap: clamp(32px, 5cqw, 64px); margin: clamp(32px, 5cqw, 56px) 0 0; padding: 0; list-style: none; }
.iti-list::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--iti-rule); }   /* the line the days hang on */
.iti-day { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: center; }
.iti-dot { grid-column: 2; grid-row: 1; justify-self: center; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--shape-round);
           font-family: var(--font-display); font-size: 18px; font-weight: var(--weight-bold); color: var(--color-on-tinted, #fff); background: rgb(var(--color-primary)); }
.iti-text { grid-column: 1; grid-row: 1; display: grid; gap: 8px; text-align: right; justify-items: end; }
.iti-photo { grid-column: 3; grid-row: 1; aspect-ratio: 4 / 3; }
.iti-day.is-flip .iti-text { grid-column: 3; text-align: left; justify-items: start; }
.iti-day.is-flip .iti-photo { grid-column: 1; }
.block-itinerary .iti-kicker { font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps, .1em); text-transform: uppercase; color: var(--color-accent-text); }
.iti-text h3 { font-family: var(--font-display); font-size: clamp(24px, 2.8cqw, 34px); line-height: 1.1; letter-spacing: var(--tracking-display); }
.block-itinerary .iti-stats { display: flex; gap: 8px; }
.iti-stats span { padding: 3px 10px; border-radius: var(--shape-round); font-size: 13px; background: color-mix(in srgb, var(--color-ink) 7%, transparent); }
.block-itinerary .iti-note { max-width: 400px; font-size: 15px; line-height: 1.6; color: var(--color-ink-soft); }
.iti-more { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: clamp(28px, 4cqw, 48px); font-size: 14px; font-weight: var(--weight-medium); color: var(--color-accent-text); }
.iti-more svg { width: 16px; height: 16px; }
@container (max-width: 640px) {
  .iti-list::before { left: 21px; }
  .iti-day, .iti-day.is-flip { grid-template-columns: 44px minmax(0, 1fr); gap: 14px 16px; align-items: start; }
  .iti-dot { grid-column: 1; }
  .iti-text, .iti-day.is-flip .iti-text { grid-column: 2; grid-row: 1; text-align: left; justify-items: start; }
  .iti-photo, .iti-day.is-flip .iti-photo { grid-column: 2; grid-row: 2; }
}

/* ---------- INCLUDED: what the price covers and what not, with the price ---------- */
.block-included { --block-max: 1040px; padding: clamp(40px, 6cqw, 88px) clamp(16px, 3cqw, 32px); }
.inc-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 5cqw, 64px); align-items: start; }
.inc-col { display: grid; gap: 18px; }
.inc-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 15px; }
.inc-list li { display: flex; gap: 12px; align-items: start; }
.inc-list svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.inc-list.is-yes svg { color: rgb(var(--color-primary)); }
.inc-list.is-no { color: var(--color-ink-soft); }
.block-included .inc-sub { margin-top: 10px; font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps, .1em); text-transform: uppercase; color: var(--color-ink-soft); }
.inc-price { position: sticky; top: 24px; display: grid; gap: 12px; padding: clamp(20px, 3cqw, 32px); border-radius: var(--shape-card); }
.block-included .inc-amount { font-family: var(--font-display); font-size: clamp(40px, 5cqw, 64px); line-height: 1; }
.inc-amount small { font-family: var(--font-sans); font-size: 15px; color: var(--color-ink-soft); }
.block-included .inc-per, .block-included .inc-note { font-size: 14px; color: var(--color-ink-soft); }
.inc-price .btn { width: 100%; }
@container (max-width: 900px) { .inc-grid { grid-template-columns: minmax(0, 1fr); } .inc-price { position: static; } }

/* ---------- REQUEST OVER A PHOTO: a short form card on a full width photo ---------- */
.req-inner { position: relative; display: grid; min-height: min(56cqw, 720px); padding: clamp(16px, 4cqw, 56px); isolation: isolate; }
.req-photo { position: absolute; inset: 0; z-index: -1; border-radius: 0; border: 0 !important; box-shadow: none !important; }
.req-card { align-self: center; justify-self: end; display: grid; gap: 14px; width: min(100%, 460px); padding: clamp(20px, 3cqw, 32px); border-radius: var(--shape-card); }
.req-title { font-family: var(--font-display); font-size: clamp(28px, 3.2cqw, 40px); font-weight: var(--weight-bold); line-height: 1.05; letter-spacing: var(--tracking-display); }
.block-request .req-lead, .block-request .req-note { font-size: 14px; line-height: 1.5; color: var(--color-ink-soft); }
.req-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.req-fields .field-wrap, .req-fields .field { width: 100%; }
.req-card > .btn { width: 100%; }
@container (max-width: 640px) {
  .req-inner { padding: 180px 12px 12px; }
  .req-card { justify-self: stretch; }
  .req-fields { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- TOWER HERO: a giant name the photo cuts off, facts on the photo's edge ---------- */
.tw-inner { display: grid; padding: clamp(12px, 2.4cqw, 32px) clamp(12px, 2.4cqw, 32px) 0; }
.tw-name { display: block; width: 100%; height: auto; overflow: visible; }
.tw-name text { font-family: var(--font-display); font-size: 190px; font-weight: var(--weight-bold); fill: var(--color-ink); }
.tw-stage { position: relative; z-index: 1; margin-top: -9cqw; }   /* the photo rises over the lower part of the name */
.tw-photo { aspect-ratio: 16 / 8; }
.tw-facts { position: absolute; right: clamp(12px, 2.4cqw, 32px); top: 50%; transform: translateY(-50%); display: grid; gap: 10px; margin: 0; }
.tw-facts div { display: grid; min-width: 150px; padding: 14px 18px; border-radius: var(--shape-card); }
.tw-facts dd { margin: 0; font-family: var(--font-display); font-size: clamp(24px, 2.6cqw, 34px); line-height: 1; }
.tw-facts dt { font-size: 13px; color: var(--color-ink-soft); }
.tw-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; padding: clamp(18px, 2.6cqw, 32px) 0 clamp(32px, 5cqw, 64px); }
.tw-kicker { max-width: 560px; font-family: var(--font-display); font-size: clamp(22px, 2.4cqw, 32px); font-weight: var(--weight-medium); line-height: 1.2; letter-spacing: var(--tracking-display); }
.tw-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@container (max-width: 900px) {
  .tw-photo { aspect-ratio: 4 / 3; }
  .tw-facts { position: static; transform: none; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 10px; }
  .tw-facts div { min-width: 0; padding: 12px 14px; }
}
@container (max-width: 640px) {
  .tw-facts { gap: 6px; }
  .tw-facts div { padding: 10px; }
  .tw-actions, .tw-actions .btn { width: 100%; }
  .tw-inner { padding-top: 40px; }
}

/* ---------- PHOTO WORDS: small photos set into one big sentence ---------- */
.block-photo-words { --block-max: 1120px; padding: clamp(48px, 7cqw, 112px) clamp(16px, 3cqw, 32px); }
.block-photo-words .block-inner { display: grid; justify-items: start; gap: clamp(18px, 2.6cqw, 32px); }
.block-photo-words .pw-line { font-family: var(--font-display); font-size: clamp(30px, 5cqw, 72px); font-weight: var(--weight-medium); line-height: 1.15; letter-spacing: var(--tracking-display); }
.pw-pill { display: inline-block; vertical-align: middle; width: 2.1em; height: .92em; margin: -.1em .04em 0; }
.pw-pill .ph { width: 100%; height: 100%; border-radius: var(--shape-round); }
.block-photo-words .pw-note { max-width: 560px; font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }

/* ---------- HOMES IN TABS: a big photo with a card of facts on it ---------- */
.block-home-types { --block-max: 1240px; padding: clamp(40px, 6cqw, 88px) clamp(16px, 3cqw, 32px); }
.ht-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 22px; }
.ht-panel { position: relative; display: grid; }
.ht-panel[hidden] { display: none; }
.ht-photo { aspect-ratio: 16 / 8; }
.ht-card { position: absolute; left: clamp(12px, 3cqw, 40px); bottom: clamp(12px, 3cqw, 40px); display: grid; gap: 14px; width: min(360px, 100% - 24px); padding: 22px 24px; border-radius: var(--shape-card); }
.ht-card h3 { font-family: var(--font-display); font-size: clamp(24px, 2.6cqw, 32px); letter-spacing: var(--tracking-display); }
.ht-card dl { display: grid; margin: 0; }
.ht-card dl div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); font-size: 14px; }
.ht-card dt { color: var(--color-ink-soft); }
.ht-card dd { margin: 0; font-weight: var(--weight-semibold); text-align: right; }
.ht-plan { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: var(--weight-medium); color: var(--color-accent-text); }
.ht-plan svg { width: 16px; height: 16px; transition: transform var(--motion-hover, .2s); }
.ht-plan:hover svg, .ht-plan.is-hover svg { transform: translateX(4px); }
@container (max-width: 900px) {
  .ht-photo { aspect-ratio: 4 / 3; }
  .ht-card { position: relative; left: auto; bottom: auto; width: auto; margin: -48px 12px 0; }
}
@container (max-width: 640px) {
  .ht-head .segmented { width: 100%; }
  .ht-card { margin: -32px 8px 0; padding: 18px; }
}

/* ---------- UNITS: every home as a line, with what is still free ---------- */
.block-units { --block-max: 1120px; padding: clamp(40px, 6cqw, 88px) clamp(16px, 3cqw, 32px); }
.un-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 18px; }
.un-table { display: grid; }
.un-table[hidden] { display: none; }
.un-row { display: grid; grid-template-columns: 80px repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr) 110px; gap: 12px; align-items: center; padding: 16px 12px;
          border-top: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); border-radius: var(--shape-box); font-size: 14px; transition: background var(--motion-hover, .2s); }
.un-row:hover, .un-row.is-hover { background: color-mix(in srgb, var(--color-ink) 5%, transparent); }
.un-row b { font-size: 16px; }
.un-id { font-family: var(--font-display); font-size: 18px; }
.un-price { font-weight: var(--weight-semibold); }
.un-state { justify-self: end; padding: 4px 12px; border-radius: var(--shape-round); font-size: 13px; font-weight: var(--weight-semibold); }
.un-row.is-free .un-state { color: var(--color-accent-text); background: rgba(var(--color-primary), .14); }
.un-row.is-reserved .un-state { background: color-mix(in srgb, var(--color-ink) 8%, transparent); }
.un-row.is-sold { color: var(--color-ink-soft); }
.un-row.is-sold .un-price { text-decoration: line-through; }
@container (max-width: 640px) {
  .un-head .segmented { width: 100%; }
  .un-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; padding: 14px 6px; }
  .un-id { grid-column: 1 / 3; }
  .un-state { grid-column: 3; grid-row: 1; }
  .un-price { grid-column: 1 / -1; }
}

/* ---------- CASE HERO: the name, the facts of the job in a ruled row, one big photo ---------- */
.ch-inner { display: grid; gap: clamp(14px, 2cqw, 24px); padding: clamp(32px, 6cqw, 96px) clamp(16px, 4cqw, 56px) 0; }
.ch-name { font-family: var(--font-display); font-size: clamp(52px, 12cqw, 188px); font-weight: var(--weight-bold); line-height: .88; letter-spacing: var(--tracking-display); overflow-wrap: anywhere; }
.block-case-hero .ch-line { max-width: 640px; font-size: clamp(18px, 2cqw, 26px); line-height: 1.4; }
.ch-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(8px, 2cqw, 24px) 0 0; border-top: 1px solid color-mix(in srgb, var(--color-ink) 18%, transparent); }
.ch-facts div { display: grid; gap: 4px; padding: 14px 16px 14px 0; }
.ch-facts div + div { padding-left: 16px; border-left: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); }
.ch-facts dt { font-size: 12px; letter-spacing: var(--tracking-caps, .08em); text-transform: uppercase; color: var(--color-ink-soft); }
.ch-facts dd { margin: 0; font-size: 15px; font-weight: var(--weight-medium); }
.ch-photo { aspect-ratio: 21 / 9; margin-top: clamp(8px, 2cqw, 24px); }
@container (max-width: 900px) {
  .ch-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-facts div:nth-child(3) { padding-left: 0; border-left: 0; }
  .ch-facts div:nth-child(n + 3) { border-top: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); }
  .ch-photo { aspect-ratio: 4 / 3; }
}

/* ---------- CASE STORY: a label that stays at the side, the words beside it ---------- */
.block-case-story { --block-max: 1120px; padding: clamp(48px, 7cqw, 112px) clamp(16px, 3cqw, 32px); }
.block-case-story .block-inner { display: grid; gap: clamp(48px, 7cqw, 96px); }
.cs-part { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(20px, 4cqw, 64px); align-items: start; }
.block-case-story .cs-label { position: sticky; top: 24px; display: flex; gap: 12px; align-items: baseline; font-family: var(--font-display); font-size: clamp(26px, 3cqw, 40px); line-height: 1.1; letter-spacing: var(--tracking-display); }
.cs-label span { font-size: max(12px, .45em); color: rgb(var(--color-primary)); }
.cs-text { display: grid; gap: 18px; }
.block-case-story .cs-text p { font-size: clamp(17px, 1.6cqw, 20px); line-height: 1.65; }
.cs-quote { display: grid; gap: 14px; margin: 0; padding: clamp(24px, 4cqw, 48px) 0; border-block: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); }
.block-case-story .cs-quote p { font-family: var(--font-display); font-size: clamp(30px, 4.6cqw, 64px); line-height: 1.08; letter-spacing: var(--tracking-display); text-wrap: balance; }
.cs-quote cite { font-style: normal; font-size: 14px; color: var(--color-ink-soft); }
.cs-photos { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(10px, 1.6cqw, 20px); align-items: end; }
.cs-photos .ph:first-child { aspect-ratio: 4 / 3; }
.cs-photos .ph:last-child { aspect-ratio: 4 / 5; }
@container (max-width: 900px) {
  .cs-part { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .block-case-story .cs-label { position: static; }
}
@container (max-width: 640px) {
  .cs-photos { grid-template-columns: minmax(0, 1fr); }
  .cs-photos .ph:last-child { aspect-ratio: 4 / 3; }
}

/* ---------- NEXT PROJECT: one wide link, its photo opens behind the name on pointing ---------- */
.nx-link { position: relative; display: grid; justify-items: center; gap: 10px; padding: clamp(56px, 10cqw, 160px) 16px; overflow: hidden; text-align: center; isolation: isolate;
           border-top: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); }
.nx-photo { position: absolute; inset: 0; z-index: -1; border-radius: 0; border: 0 !important; box-shadow: none !important; clip-path: inset(50% 30%); opacity: 0; transition: clip-path .7s cubic-bezier(.2, .7, .2, 1), opacity .4s; }
.nx-photo::after { content: ""; position: absolute; inset: 0; background: rgba(8, 8, 8, .45); }
.nx-link:hover .nx-photo, .nx-link.is-hover .nx-photo, .nx-link:focus-visible .nx-photo { clip-path: inset(0); opacity: 1; }
.nx-link:hover, .nx-link.is-hover, .nx-link:focus-visible { color: #fff; }
.nx-label { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; opacity: .8; }
.nx-name { display: inline-flex; align-items: center; gap: .2em; font-family: var(--font-display); font-size: clamp(44px, 9cqw, 140px); font-weight: var(--weight-bold); line-height: .95; letter-spacing: var(--tracking-display); }
.nx-name svg { width: .6em; height: .6em; transition: transform var(--motion-hover, .2s); }
.nx-link:hover .nx-name svg, .nx-link.is-hover .nx-name svg { transform: translateX(.12em); }
.nx-note { font-size: 15px; opacity: .8; }
@media (hover: none) {
  .nx-photo { clip-path: none; opacity: 1; }   /* no pointer to point with: the photo is simply there */
  .nx-link { color: #fff; }
}
/* ---------- CV HERO: the name very large, what they do, a tall portrait ---------- */
.block-cv-hero { --block-max: 1240px; padding: clamp(28px, 5cqw, 72px) clamp(16px, 3cqw, 32px) clamp(40px, 6cqw, 88px); }
.cvh-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 5cqw, 72px); align-items: end; }
.cvh-copy { display: grid; justify-items: start; gap: 18px; min-width: 0; }
.cvh-copy .badge { max-width: 100%; white-space: normal; }
.cvh-name { font-family: var(--font-display); font-size: clamp(56px, 11cqw, 168px); font-weight: var(--weight-bold); line-height: .88; letter-spacing: var(--tracking-display); overflow-wrap: anywhere; }
.block-cv-hero .cvh-role { font-family: var(--font-display); font-size: clamp(22px, 2.6cqw, 34px); line-height: 1.15; color: var(--color-accent-text); }
.block-cv-hero .cvh-lead { max-width: 520px; font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }
.cvh-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cvh-facts { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); gap: 12px clamp(18px, 3cqw, 40px); margin: 10px 0 0; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); }
.cvh-facts div { display: grid; gap: 2px; }
.cvh-facts dt { font-size: 12px; letter-spacing: var(--tracking-caps, .08em); text-transform: uppercase; color: var(--color-ink-soft); }
.cvh-facts dd { margin: 0; font-size: 15px; font-weight: var(--weight-medium); }
.cvh-photo { aspect-ratio: 4 / 5; }
@container (max-width: 900px) {
  .cvh-grid { grid-template-columns: minmax(0, 1fr); }
  .cvh-photo { aspect-ratio: 4 / 3; order: -1; }
}
@container (max-width: 640px) {
  .cvh-facts { grid-template-columns: minmax(0, 1fr); }
  .cvh-actions .btn { flex: 1 1 100%; }
}

/* ---------- CV TIMELINE: every job down one line, skills in a card at the side ---------- */
.block-cv-work { --block-max: 1120px; --cvw-rule: color-mix(in srgb, var(--color-ink) 16%, transparent); padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.cvw-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 5cqw, 72px); align-items: start; }
.cvw-main { display: grid; gap: 22px; min-width: 0; }
.cvw-list { display: grid; margin: 8px 0 0; padding: 0; list-style: none; }
.cvw-job { position: relative; display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 20px; padding: 0 0 28px 26px; border-left: 1px solid var(--cvw-rule); }
.cvw-job::before { content: ""; position: absolute; left: -6px; top: 5px; width: 11px; height: 11px; border-radius: var(--shape-round); background: var(--color-ink-soft); transform: scale(.7); }
.cvw-job.is-now::before { background: rgb(var(--color-primary)); transform: none; box-shadow: 0 0 0 5px rgba(var(--color-primary), .18); }
.block-cv-work .cvw-years { font-size: 14px; font-weight: var(--weight-semibold); color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.cvw-job.is-now .cvw-years { color: var(--color-accent-text); }
.cvw-text { display: grid; gap: 4px; }
.cvw-text h3 { font-family: var(--font-display); font-size: clamp(20px, 2.2cqw, 26px); line-height: 1.15; }
.block-cv-work .cvw-place { font-size: 13px; color: var(--color-ink-soft); }
.block-cv-work .cvw-note { max-width: 480px; font-size: 15px; line-height: 1.6; color: var(--color-ink-soft); }
.block-cv-work .cvw-sub { font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps, .1em); text-transform: uppercase; color: var(--color-ink-soft); }
.cvw-school { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 15px; }
.cvw-school li { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 12px; }
.cvw-school span { color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.cvw-side { position: sticky; top: 24px; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 14px; padding: clamp(20px, 3cqw, 30px); border-radius: var(--shape-card); }
.cvw-side h3 { font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps, .08em); text-transform: uppercase; color: var(--color-ink-soft); }
.cvw-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.cvw-tools { display: grid; gap: 8px; margin: 0 0 6px; padding: 0; list-style: none; font-size: 15px; }
.cvw-tools li { display: flex; gap: 10px; align-items: center; }
.cvw-tools svg { flex: none; width: 16px; height: 16px; color: rgb(var(--color-primary)); }
.cvw-side .btn { width: 100%; }
@container (max-width: 900px) { .cvw-grid { grid-template-columns: minmax(0, 1fr); } .cvw-side { position: static; } }
@container (max-width: 640px) {
  .cvw-job { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-left: 20px; }
}

/* ---------- CV PROJECTS: one large piece, two beside it, a wide one and what is next ---------- */
.block-cv-projects { --block-max: 1240px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.cvp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, auto); gap: clamp(10px, 1.6cqw, 20px); margin-top: clamp(24px, 4cqw, 44px); }
.cvp-card { position: relative; display: grid; min-width: 0; overflow: hidden; border-radius: var(--shape-card); isolation: isolate; }
.cvp-card .ph { aspect-ratio: 4 / 3; height: 100%; }
.cvp-card-0 { grid-column: span 2; grid-row: span 2; }
.cvp-card-0 .ph { position: absolute; inset: 0; aspect-ratio: auto; }   /* the two cards beside it set the height */
.cvp-card-3 { grid-column: span 2; }
.cvp-card-3 .ph { aspect-ratio: 16 / 7; }
.cvp-card .ph img { transition: transform .6s var(--ease-out, ease); }
.cvp-card:hover .ph img, .cvp-card.is-hover .ph img { transform: scale(1.04); }
.cvp-cap { position: absolute; left: 12px; right: 56px; bottom: 12px; display: grid; gap: 2px; padding: 10px 14px; border-radius: var(--shape-control); color: #fff; background: rgba(14, 14, 12, .52); backdrop-filter: blur(6px); }
.cvp-cap b { font-size: 16px; font-weight: var(--weight-semibold); }
.cvp-cap span { font-size: 13px; opacity: .85; }
.cvp-go { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--shape-round); color: var(--color-on-tinted, #fff); background: rgb(var(--color-primary)); transition: transform var(--motion-hover, .2s); }
.cvp-go svg { width: 18px; height: 18px; }
.cvp-card:hover .cvp-go, .cvp-card.is-hover .cvp-go { transform: rotate(-45deg); }
.cvp-next { display: grid; align-content: end; gap: 10px; padding: clamp(18px, 2.6cqw, 28px); border-radius: var(--shape-card); background: rgba(var(--color-primary), .12); border: 1px dashed rgba(var(--color-primary), .5); }
.block-cv-projects .cvp-kicker { font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps, .1em); text-transform: uppercase; color: var(--color-accent-text); }
.block-cv-projects .cvp-next-text { font-family: var(--font-display); font-size: clamp(20px, 2.2cqw, 28px); line-height: 1.2; }
@container (max-width: 640px) {
  .cvp-grid { grid-template-columns: minmax(0, 1fr); }
  .cvp-card-0, .cvp-card-3 { grid-column: auto; grid-row: auto; }
  .cvp-card-0 .ph, .cvp-card-3 .ph { position: relative; aspect-ratio: 4 / 3; }
}

/* ---------- CV CONTACT: the email address as the biggest thing on the page ---------- */
.block-cv-contact { --block-max: 1240px; padding: clamp(56px, 9cqw, 140px) clamp(16px, 3cqw, 32px) clamp(40px, 6cqw, 96px); }
.block-cv-contact .block-inner { display: grid; gap: clamp(14px, 2cqw, 24px); }
.block-cv-contact .cvc-ask { font-size: clamp(18px, 2cqw, 24px); color: var(--color-ink-soft); }
.cvc-mail { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .2em; justify-self: start; max-width: 100%; font-family: var(--font-display); font-size: clamp(36px, 7.4cqw, 112px);
            font-weight: var(--weight-bold); line-height: 1; letter-spacing: var(--tracking-display); overflow-wrap: anywhere; background: linear-gradient(rgb(var(--color-primary)), rgb(var(--color-primary))) 0 100% / 0 3px no-repeat;
            transition: background-size .5s var(--ease-out, ease); padding-bottom: 6px; }
.cvc-mail:hover, .cvc-mail.is-hover { background-size: 100% 3px; }
.cvc-arrow { display: inline-grid; place-items: center; width: .8em; height: .8em; color: var(--color-accent-text); }
.cvc-arrow svg { width: 100%; height: 100%; transition: transform var(--motion-hover, .2s); }
.cvc-mail:hover .cvc-arrow svg, .cvc-mail.is-hover .cvc-arrow svg { transform: rotate(-45deg); }
.block-cv-contact .cvc-note { font-size: 15px; color: var(--color-ink-soft); }
.cvc-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 32px; margin: clamp(24px, 4cqw, 48px) 0 0; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); }
.cvc-cols div { display: grid; gap: 6px; align-content: start; }
.cvc-cols dt { font-size: 12px; letter-spacing: var(--tracking-caps, .08em); text-transform: uppercase; color: var(--color-ink-soft); }
.cvc-cols dd { margin: 0; font-size: 15px; line-height: 1.5; }
.cvc-cols a { text-decoration: underline; text-underline-offset: 3px; }
@container (max-width: 640px) { .cvc-cols { grid-template-columns: minmax(0, 1fr); } .cvc-mail { font-size: clamp(26px, 8.4cqw, 40px); } }
/* ---------- APP SCREENS: a phone drawn in the page (the screen is a light app, whatever the kit) ---------- */
.app-phone { --aps-ink: #1d1f22; --aps-soft: #6a6e75; --aps-line: #e6e7ea; width: 100%; max-width: 300px; padding: 9px; border-radius: 42px; background: #16171a;
             box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .45), inset 0 0 0 1.5px rgba(255, 255, 255, .12); }
.app-screen { position: relative; display: grid; align-content: start; gap: 10px; aspect-ratio: 9 / 18.5; overflow: hidden; padding: 44px 16px 16px; border-radius: 34px;
              font-family: var(--font-sans); font-size: 13px; line-height: 1.35; color: var(--aps-ink); background: #fbfbfa; background-image: linear-gradient(rgba(var(--color-primary), .08), transparent 40%); }
.aps-island { position: absolute; left: 50%; top: 12px; width: 76px; height: 20px; margin-left: -38px; border-radius: 12px; background: #16171a; }
.app-screen .aps-kicker { font-size: 12px; font-weight: 600; color: rgb(var(--color-primary)); }
.app-screen .aps-title { margin-top: -6px; font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.1; }
.aps-list, .aps-plan, .aps-feed { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.aps-item { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: #fff; border: 1px solid var(--aps-line); }
.aps-tick { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--aps-line); }
.aps-tick svg { width: 12px; height: 12px; color: #fff; }
.aps-item.is-done .aps-tick { background: rgb(var(--color-primary)); border-color: rgb(var(--color-primary)); }
.aps-item.is-done span { color: var(--aps-soft); text-decoration: line-through; }
.aps-item b { font-size: 12px; font-weight: 600; padding: 1px 6px; border-radius: 8px; color: var(--aps-soft); background: #f0f1f3; }
.app-screen .aps-add { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: rgb(var(--color-primary)); }
.aps-add svg { width: 16px; height: 16px; }
.aps-plan li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; padding: 9px 10px; border-radius: 12px; background: #fff; border: 1px solid var(--aps-line); }
.aps-plan span { font-size: 12px; font-weight: 600; color: var(--aps-soft); }
.aps-plan li.is-today { border-color: rgb(var(--color-primary)); box-shadow: 0 0 0 3px rgba(var(--color-primary), .18); }
.app-screen .aps-note { font-size: 12px; color: var(--aps-soft); }
.aps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.aps-jar { display: grid; gap: 2px; min-height: 56px; align-content: end; padding: 8px 10px; border-radius: 12px; font-weight: 600; background: #fff; border: 1px solid var(--aps-line); }
.aps-jar i { font-size: 12px; font-style: normal; font-weight: 500; color: #b4541a; }
.aps-jar.is-low { background: #fff4ea; border-color: #f3d6bd; }
.aps-people { display: flex; gap: 6px; }
.aps-people span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-size: 12px; font-weight: 700; color: #fff; background: rgb(var(--color-primary)); }
.aps-people span:nth-child(2) { background: #3b7d6a; } .aps-people span:nth-child(3) { background: #8a5a9e; }
.aps-people .is-add { color: var(--aps-soft); background: #fff; border: 1.5px dashed var(--aps-line); }
.aps-people svg { width: 16px; height: 16px; }
.aps-feed li { padding: 9px 10px; border-radius: 12px; background: #fff; border: 1px solid var(--aps-line); color: var(--aps-soft); }
.aps-feed b { color: var(--aps-ink); }
.app-stores { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- APP HERO: the promise, the store buttons, two phones leaning on each other ---------- */
.block-app-hero { --block-max: 1200px; padding: clamp(28px, 5cqw, 80px) clamp(16px, 3cqw, 32px) clamp(40px, 6cqw, 96px); overflow: clip; }
.aph-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5cqw, 72px); align-items: center; }
.aph-copy { display: grid; justify-items: start; gap: 18px; min-width: 0; }
.aph-copy .badge { max-width: 100%; white-space: normal; }
.aph-title { font-family: var(--font-display); font-size: clamp(40px, 6cqw, 84px); font-weight: var(--weight-bold); line-height: .98; letter-spacing: var(--tracking-display); text-wrap: balance; }
.block-app-hero .aph-lead { max-width: 500px; font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }
.block-app-hero .aph-note { font-size: 13px; color: var(--color-ink-soft); }
.aph-phones { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; padding: 4% 0 8%; }
.aph-phones::before { content: ""; position: absolute; inset: 10% 6% 0; border-radius: var(--shape-card); background: rgba(var(--color-primary), .14); }
.aph-back { position: relative; grid-column: 1 / span 7; grid-row: 1; transform: rotate(-6deg) translateY(8%); opacity: .96; }
.aph-front { position: relative; grid-column: 5 / span 7; grid-row: 1; transform: rotate(4deg); }
.aph-phones .app-phone { max-width: none; }
@container (max-width: 900px) {
  .aph-grid { grid-template-columns: minmax(0, 1fr); }
  .aph-phones { max-width: 520px; width: 100%; justify-self: center; }
}
@container (max-width: 640px) {
  .app-stores .btn { flex: 1 1 100%; }
  .aph-back { grid-column: 1 / span 8; }
  .aph-front { grid-column: 4 / span 9; }
}

/* ---------- APP ON SCROLL: the phone stays, its screen follows the feature being read ---------- */
.block-app-scroll { --block-max: 1120px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.aps-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 6cqw, 96px); margin-top: clamp(24px, 4cqw, 48px); }
.aps-stage { position: relative; }
.aps-stick { position: sticky; top: 8%; display: grid; justify-items: center; }
.aps-screen { grid-area: 1 / 1; width: min(100%, 300px); opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .45s, transform .45s var(--ease-out, ease); }
.block-app-scroll[data-step="0"] .aps-screen[data-i="0"], .block-app-scroll[data-step="1"] .aps-screen[data-i="1"],
.block-app-scroll[data-step="2"] .aps-screen[data-i="2"], .block-app-scroll[data-step="3"] .aps-screen[data-i="3"] { opacity: 1; transform: none; }
.aps-steps { display: grid; margin: 0; padding: 0; list-style: none; }
.aps-step { display: grid; align-content: center; gap: 12px; min-height: clamp(380px, 50cqw, 560px); padding: 24px 0; opacity: .38; transition: opacity .4s; }
.block-app-scroll[data-step="0"] .aps-step[data-i="0"], .block-app-scroll[data-step="1"] .aps-step[data-i="1"],
.block-app-scroll[data-step="2"] .aps-step[data-i="2"], .block-app-scroll[data-step="3"] .aps-step[data-i="3"] { opacity: 1; }
.aps-num { font-family: var(--font-display); font-size: 15px; font-weight: var(--weight-bold); color: var(--color-accent-text); }
.aps-step h3 { font-family: var(--font-display); font-size: clamp(26px, 3.2cqw, 40px); line-height: 1.08; letter-spacing: var(--tracking-display); }
.aps-step > p { max-width: 420px; font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }
.aps-own { display: none; }
@container (max-width: 760px) {
  .aps-wrap { grid-template-columns: minmax(0, 1fr); }
  .aps-stage { display: none; }
  .aps-step { min-height: 0; opacity: 1; padding: 0 0 clamp(32px, 8cqw, 56px); }
  .aps-own { display: grid; justify-items: center; margin-top: 8px; padding: 22px 0 0; border-radius: var(--shape-card); background: rgba(var(--color-primary), .12); overflow: hidden; }
  .aps-own .app-phone { max-width: 250px; margin-bottom: -34%; }
}

/* ---------- APP WORDS: what people wrote, no stars, no scores ---------- */
.block-app-words { --block-max: 1120px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.apw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2cqw, 24px); margin-top: clamp(24px, 4cqw, 48px); }
.apw-card { display: grid; align-content: start; gap: 14px; margin: 0; padding: clamp(20px, 2.6cqw, 28px); border-radius: var(--shape-card); }
.apw-card:nth-child(2) { transform: translateY(24px); }
.apw-mark svg { width: 26px; height: 26px; color: rgb(var(--color-primary)); }
.apw-card blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(18px, 1.9cqw, 22px); line-height: 1.35; }
.apw-card figcaption { display: grid; gap: 2px; font-size: 14px; color: var(--color-ink-soft); }
.apw-card figcaption b { color: var(--color-ink); }
@container (max-width: 900px) { .apw-grid { grid-template-columns: minmax(0, 1fr); } .apw-card:nth-child(2) { transform: none; } }

/* ---------- APP GET: a phone cut by the edge of a coloured panel ---------- */
.block-app-get { --block-max: 1200px; padding: clamp(32px, 5cqw, 80px) clamp(16px, 3cqw, 32px); }
.apg-panel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px clamp(24px, 4cqw, 56px); align-items: center; overflow: hidden;
             padding: clamp(28px, 5cqw, 64px) clamp(20px, 5cqw, 64px) 0; border-radius: var(--shape-card); background: rgba(var(--color-primary), .14); }
.apg-copy { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 16px; padding-bottom: clamp(28px, 5cqw, 64px); }
.apg-title { font-family: var(--font-display); font-size: clamp(30px, 4.4cqw, 56px); font-weight: var(--weight-bold); line-height: 1.02; letter-spacing: var(--tracking-display); text-wrap: balance; }
.block-app-get .apg-lead { max-width: 460px; font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }
.apg-phone { align-self: end; display: grid; justify-items: center; height: clamp(260px, 34cqw, 420px); overflow: hidden; }
.apg-phone .app-phone { max-width: 280px; }
@container (max-width: 760px) {
  .apg-panel { grid-template-columns: minmax(0, 1fr); }
  .apg-copy { padding-bottom: 0; }
  .apg-phone { height: 240px; }
  .apg-phone .app-phone { max-width: 240px; }
}
/* ---------- CAUSE HERO: a wide photo, the cause in a coloured card over its lower edge ---------- */
.block-cause-hero { --block-max: 1280px; padding: clamp(16px, 3cqw, 40px) clamp(16px, 3cqw, 32px) clamp(40px, 6cqw, 88px); }
.cz-stage { position: relative; display: grid; }
.cz-photo { aspect-ratio: 16 / 8; }
.cz-card { position: relative; z-index: 1; display: grid; justify-items: start; gap: 14px; width: min(640px, 72%); margin: -18% 0 0 clamp(12px, 3cqw, 40px); padding: clamp(22px, 3.4cqw, 44px);
           border-radius: var(--shape-card); color: var(--color-on-tinted, #fff); background: rgb(var(--color-primary)); box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .45); }
.block-cause-hero .cz-kicker { font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps, .1em); text-transform: uppercase; opacity: .85; }
.cz-title { font-family: var(--font-display); font-size: clamp(34px, 5cqw, 68px); font-weight: var(--weight-bold); line-height: 1; letter-spacing: var(--tracking-display); text-wrap: balance; }
.block-cause-hero .cz-lead { max-width: 480px; font-size: var(--text-md); line-height: 1.55; opacity: .92; }
.cz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.cz-alt { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--weight-semibold); }
.cz-alt svg { width: 16px; height: 16px; transition: transform var(--motion-hover, .2s); }
.cz-alt:hover svg, .cz-alt.is-hover svg { transform: translateX(4px); }
.cz-promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px clamp(18px, 3cqw, 40px); margin: clamp(28px, 4cqw, 48px) 0 0; padding: 0; list-style: none; }
.cz-promises li { display: grid; gap: 4px; padding-top: 14px; border-top: 2px solid rgb(var(--color-primary)); font-size: 15px; line-height: 1.5; color: var(--color-ink-soft); }
.cz-promises b { font-family: var(--font-display); font-size: 19px; color: var(--color-ink); }
@container (max-width: 760px) {
  .cz-photo { aspect-ratio: 4 / 3; }
  .cz-card { width: auto; margin: -56px 10px 0; }
  .cz-promises { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- DONATE: pick an amount, the words beside it say what it does ---------- */
.block-donate { --block-max: 1120px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.dn-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5cqw, 72px); align-items: start; }
.dn-what { display: grid; gap: 18px; min-width: 0; }
.dn-does { display: none; gap: 8px; }
.block-donate[data-amt="0"] .dn-does[data-i="0"], .block-donate[data-amt="1"] .dn-does[data-i="1"],
.block-donate[data-amt="2"] .dn-does[data-i="2"], .block-donate[data-amt="3"] .dn-does[data-i="3"] { display: grid; animation: dn-in .4s var(--ease-out, ease); }
@keyframes dn-in { from { opacity: 0; transform: translateY(8px); } }
.block-donate .dn-sum { font-family: var(--font-display); font-size: clamp(48px, 7cqw, 88px); font-weight: var(--weight-bold); line-height: .95; color: var(--color-accent-text); }
.dn-sum small { font-size: .32em; }
.dn-does h3 { font-family: var(--font-display); font-size: clamp(22px, 2.4cqw, 30px); line-height: 1.15; }
.block-donate .dn-text { max-width: 420px; font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }
.dn-photo { aspect-ratio: 16 / 9; margin-top: 6px; }
.dn-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: clamp(20px, 3cqw, 32px); border-radius: var(--shape-card); }
.dn-card .segmented { width: 100%; }
.dn-card .segmented-option, .rsvp-answer .badge, .dn-amounts .badge { min-width: 0; white-space: normal; text-align: center; }
.dn-amounts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dn-amounts .badge { justify-content: center; min-height: 48px; font-size: 16px; font-weight: var(--weight-semibold); }
.block-donate .dn-label { margin-bottom: -8px; font-size: 13px; color: var(--color-ink-soft); }
.dn-card .field-wrap, .dn-card .field { width: 100%; }
.dn-give .btn { width: 100%; }
.block-donate .dn-note { display: flex; gap: 10px; align-items: start; font-size: 13px; line-height: 1.5; color: var(--color-ink-soft); }
.dn-note svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: rgb(var(--color-primary)); }
@container (max-width: 760px) {
  .dn-grid { grid-template-columns: minmax(0, 1fr); }
  .dn-photo { display: none; }
  .dn-amounts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- WHERE IT GOES: one euro as a bar, what each part pays for ---------- */
.block-where-goes { --block-max: 1120px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.wg-bar { display: flex; gap: 4px; height: clamp(56px, 8cqw, 88px); margin-top: clamp(24px, 4cqw, 44px); }
.wg-part { flex: var(--w) 1 0; display: flex; align-items: end; min-width: 44px; padding: 10px 12px; border-radius: var(--shape-control); color: var(--color-on-tinted, #fff); background: rgb(var(--color-primary)); }
.wg-part b { font-family: var(--font-display); font-size: clamp(16px, 2cqw, 24px); }
.wg-part-1 { background: rgba(var(--color-primary), .55); }
.wg-part-2 { background: rgba(var(--color-primary), .28); color: var(--color-ink); }
.wg-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px clamp(18px, 3cqw, 40px); margin: 22px 0 0; padding: 0; list-style: none; }
.wg-legend li { display: grid; align-content: start; gap: 6px; padding-left: 16px; border-left: 4px solid rgb(var(--color-primary)); }
.wg-legend li.wg-key-1 { border-color: rgba(var(--color-primary), .55); }
.wg-legend li.wg-key-2 { border-color: rgba(var(--color-primary), .28); }
.wg-legend b { font-size: 13px; color: var(--color-ink-soft); }
.wg-legend h3 { font-family: var(--font-display); font-size: 21px; line-height: 1.15; }
.wg-legend p { font-size: 15px; line-height: 1.55; color: var(--color-ink-soft); }
.wg-link { display: inline-flex; align-items: center; gap: 8px; margin-top: clamp(20px, 3cqw, 32px); font-size: 14px; font-weight: var(--weight-medium); color: var(--color-accent-text); }
.wg-link svg { width: 16px; height: 16px; }
@container (max-width: 640px) { .wg-legend { grid-template-columns: minmax(0, 1fr); } .wg-part { padding: 8px; min-width: 40px; } }

/* ---------- STORIES: one told at length beside the photo, two shorter below ---------- */
.block-stories { --block-max: 1180px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.block-stories .block-inner { display: grid; gap: clamp(20px, 3cqw, 36px); }
.st-lead { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 4cqw, 56px); align-items: center; margin: 0; }
.st-lead .st-photo { aspect-ratio: 4 / 3; }
.st-words { display: grid; gap: 16px; }
.st-mark svg { width: 34px; height: 34px; color: rgb(var(--color-primary)); }
.st-lead blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(24px, 3cqw, 38px); line-height: 1.2; letter-spacing: var(--tracking-display); }
.block-stories figcaption { display: grid; gap: 2px; font-size: 14px; color: var(--color-ink-soft); }
.block-stories figcaption b { font-size: 16px; color: var(--color-ink); }
.st-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3cqw, 32px); }
.st-small { display: grid; grid-template-columns: 160px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 10px 18px; margin: 0; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); }
.st-small .st-photo { grid-row: span 2; aspect-ratio: 1; }
.st-small blockquote { margin: 0; font-size: 17px; line-height: 1.5; }
@container (max-width: 900px) { .st-lead { grid-template-columns: minmax(0, 1fr); } .st-more { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 520px) {
  .st-small { grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "ph cap" "q q"; align-items: center; }
  .st-small .st-photo { grid-area: ph; grid-row: auto; }
  .st-small blockquote { grid-area: q; }
  .st-small figcaption { grid-area: cap; }
}
/* ---------- CLINIC HERO: a calm promise, open now, the next free visit over the photo ---------- */
.block-clinic-hero { --block-max: 1200px; padding: clamp(28px, 5cqw, 72px) clamp(16px, 3cqw, 32px) clamp(40px, 6cqw, 88px); }
.clh-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5cqw, 72px); align-items: center; }
.clh-copy { display: grid; justify-items: start; gap: 18px; min-width: 0; }
.block-clinic-hero .clh-open { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: var(--weight-semibold); color: var(--color-accent-text); }
.clh-open i { width: 9px; height: 9px; border-radius: var(--shape-round); background: var(--color-success, #2f9e62); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-success, #2f9e62) 22%, transparent); }
.clh-title { font-family: var(--font-display); font-size: clamp(40px, 5.8cqw, 80px); font-weight: var(--weight-bold); line-height: 1; letter-spacing: var(--tracking-display); text-wrap: balance; }
.block-clinic-hero .clh-lead { max-width: 480px; font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }
.clh-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.block-clinic-hero .clh-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 6px; font-size: 14px; }
.clh-quick span { width: 100%; font-size: 12px; letter-spacing: var(--tracking-caps, .08em); text-transform: uppercase; color: var(--color-ink-soft); }
.clh-quick a { font-weight: var(--weight-medium); text-decoration: underline; text-decoration-color: rgba(var(--color-primary), .5); text-underline-offset: 4px; }
.clh-quick a:hover, .clh-quick a.is-hover { text-decoration-color: rgb(var(--color-primary)); }
.clh-stage { position: relative; padding-bottom: 28px; }
.clh-photo { aspect-ratio: 5 / 4; }
.clh-next { position: absolute; left: clamp(-28px, -2cqw, -8px); bottom: 0; display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: var(--shape-card); }
.clh-next-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--shape-round); color: var(--color-on-tinted, #fff); background: rgb(var(--color-primary)); }
.clh-next-icon svg { width: 22px; height: 22px; }
.clh-next p { display: grid; gap: 1px; font-size: 13px; color: var(--color-ink-soft); }
.clh-next b { font-family: var(--font-display); font-size: 20px; color: var(--color-ink); }
@container (max-width: 900px) { .clh-grid { grid-template-columns: minmax(0, 1fr); } .clh-next { left: 12px; } }
@container (max-width: 640px) { .clh-actions .btn { flex: 1 1 100%; } .clh-next { right: 12px; } }

/* ---------- CARE LIST: what the practice does, one row each, with the starting price ---------- */
.block-care-list { --block-max: 1120px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.cl-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 4cqw, 48px); margin: clamp(24px, 4cqw, 44px) 0 0; padding: 0; list-style: none; }
.cl-list li { border-top: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); }
.cl-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "icon text go" "icon meta go"; align-items: center; gap: 4px 16px; padding: 18px 4px; }
.cl-icon { grid-area: icon; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--shape-control); color: var(--color-accent-text); background: rgba(var(--color-primary), .12); }
.cl-icon svg { width: 22px; height: 22px; }
.cl-text { grid-area: text; display: grid; gap: 2px; }
.cl-text b { font-size: 17px; font-weight: var(--weight-semibold); }
.cl-text span { font-size: 14px; line-height: 1.45; color: var(--color-ink-soft); }
.cl-time, .cl-price { font-size: 13px; color: var(--color-ink-soft); }
.cl-time { grid-area: meta; }
.cl-price { grid-area: meta; justify-self: end; }
.cl-price b { font-size: 15px; color: var(--color-ink); }
.cl-go { grid-area: go; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--shape-round); color: var(--color-accent-text); transition: transform var(--motion-hover, .2s), background var(--motion-hover, .2s); }
.cl-go svg { width: 16px; height: 16px; }
.cl-row:hover .cl-go, .cl-row.is-hover .cl-go { transform: translateX(4px); background: rgba(var(--color-primary), .14); }
@container (max-width: 760px) { .cl-list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- DOCTORS: a tall photo each, what they do most, their languages ---------- */
.block-doctors { --block-max: 1180px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.doc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4cqw, 28px); margin-top: clamp(24px, 4cqw, 44px); }
.doc-card { display: grid; align-content: start; justify-items: start; gap: 10px; min-width: 0; }
.doc-photo { width: 100%; aspect-ratio: 4 / 5; margin-bottom: 6px; }
.doc-card h3 { font-family: var(--font-display); font-size: clamp(20px, 2.2cqw, 26px); line-height: 1.15; }
.block-doctors .doc-focus { font-size: 15px; line-height: 1.55; color: var(--color-ink-soft); }
.block-doctors .doc-langs { display: flex; flex-wrap: wrap; gap: 6px; }
.doc-book { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 14px; font-weight: var(--weight-semibold); color: var(--color-accent-text); }
.doc-book svg { width: 16px; height: 16px; transition: transform var(--motion-hover, .2s); }
.doc-book:hover svg, .doc-book.is-hover svg { transform: translateX(4px); }
.doc-place .doc-photo { aspect-ratio: 4 / 3; }
.doc-place { padding: 14px; border-radius: var(--shape-card); background: rgba(var(--color-primary), .1); }
.block-doctors .doc-hours { display: flex; gap: 8px; align-items: start; font-size: 14px; line-height: 1.5; }
.doc-hours svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: rgb(var(--color-primary)); }
@container (max-width: 900px) { .doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .doc-place { grid-column: 1 / -1; } .doc-place .doc-photo { aspect-ratio: 16 / 7; } }
@container (max-width: 560px) { .doc-grid { grid-template-columns: minmax(0, 1fr); } .doc-photo { aspect-ratio: 4 / 3; } }

/* ---------- SLOTS: a day, a time, and the summary of what was picked ---------- */
.block-slots { --block-max: 1120px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.sl-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(16px, 3cqw, 40px); align-items: start; margin-top: clamp(24px, 4cqw, 44px); }
.sl-pick { display: grid; gap: 12px; padding: clamp(18px, 3cqw, 32px); border-radius: var(--shape-card); }
.block-slots .sl-label { margin-top: 4px; font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps, .1em); text-transform: uppercase; color: var(--color-ink-soft); }
.sl-days { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.sl-days .badge, .sl-day { display: grid; justify-items: center; align-content: center; gap: 0; min-height: 68px; padding: 8px 4px; font-size: 20px; font-weight: var(--weight-semibold); line-height: 1.1; }
.sl-days .badge > span { display: grid; justify-items: center; }
.sl-days small { font-size: 12px; font-weight: var(--weight-medium); opacity: .8; }
.sl-times { display: flex; flex-wrap: wrap; gap: 8px; }
.sl-times .badge, .sl-times .sl-off { min-width: 76px; justify-content: center; min-height: 40px; font-size: 15px; font-variant-numeric: tabular-nums; }
.sl-off { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--shape-control); color: var(--color-ink-soft); text-decoration: line-through;
          border: 1px dashed color-mix(in srgb, var(--color-ink) 22%, transparent); opacity: .7; }
.sl-day.sl-off { display: grid; text-decoration: none; }   /* a full day keeps its three lines */
.sl-sum { position: sticky; top: 24px; display: grid; gap: 12px; }
.sl-sum .pick-field { width: 100%; }
.block-slots .sl-when { display: flex; gap: 12px; align-items: start; padding: 14px 0; font-size: 16px; line-height: 1.4; border-top: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); }
.sl-when svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: rgb(var(--color-primary)); }
.sl-sum > .btn { width: 100%; }
.block-slots .sl-note { font-size: 13px; line-height: 1.5; color: var(--color-ink-soft); }
@container (max-width: 860px) { .sl-grid { grid-template-columns: minmax(0, 1fr); } .sl-sum { position: static; } }
@container (max-width: 520px) { .sl-days { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sl-times .badge, .sl-times .sl-off { flex: 1 1 calc(33% - 8px); min-width: 0; } }

/* ---------- INSURERS: plain names, never logos, and how paying works ---------- */
.block-insurers { --block-max: 1120px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.ins-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 5cqw, 72px); }
.ins-names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 24px 0 0; padding: 0; list-style: none; font-size: 16px; }
.ins-names li { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: var(--shape-control); background: color-mix(in srgb, var(--color-ink) 5%, transparent); }
.ins-names svg { flex: none; width: 18px; height: 18px; color: rgb(var(--color-primary)); }
.ins-notes { display: grid; gap: 22px; align-content: start; }
.ins-note { display: grid; gap: 6px; padding-left: 18px; border-left: 3px solid rgb(var(--color-primary)); }
.ins-note h3 { font-family: var(--font-display); font-size: 21px; }
.ins-note p { font-size: 15px; line-height: 1.6; color: var(--color-ink-soft); }
@container (max-width: 760px) { .ins-grid { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 480px) { .ins-names { grid-template-columns: minmax(0, 1fr); } }
/* ---------- WEDDING HERO: the two names over a full photo, the date, the time left ---------- */
.wh-inner { position: relative; display: grid; place-items: end center; min-height: min(62cqw, 820px); padding: clamp(80px, 12cqw, 160px) clamp(16px, 3cqw, 32px) clamp(28px, 5cqw, 64px); isolation: isolate; }
.wh-photo { position: absolute; inset: 0; z-index: -2; border-radius: 0; border: 0 !important; box-shadow: none !important; }
.wh-inner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 10, 12, .1) 20%, rgba(10, 10, 12, .62)); }
.wh-copy { display: grid; justify-items: center; gap: 14px; text-align: center; color: #fff; }
.block-wed-hero .wh-kicker { font-size: 13px; letter-spacing: var(--tracking-caps, .16em); text-transform: uppercase; }
.wh-names { font-family: var(--font-display); font-size: clamp(56px, 11cqw, 160px); font-weight: var(--weight-regular, 400); line-height: .9; letter-spacing: var(--tracking-display); }
.wh-names i { font-style: italic; font-weight: var(--weight-regular, 400); opacity: .85; }
.block-wed-hero .wh-date { display: grid; gap: 4px; font-family: var(--font-display); font-size: clamp(20px, 2.4cqw, 28px); }
.wh-date span { font-family: var(--font-sans); font-size: 15px; opacity: .85; }
.wd-count { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.wd-unit { display: grid; justify-items: center; min-width: 96px; padding: 12px 14px; border-radius: var(--shape-card); color: var(--color-ink); }
.wd-unit b { font-family: var(--font-display); font-size: clamp(28px, 3.4cqw, 42px); line-height: 1; font-variant-numeric: tabular-nums; }
.wd-unit span { font-size: 12px; letter-spacing: var(--tracking-caps, .08em); text-transform: uppercase; color: var(--color-ink-soft); }
@container (max-width: 640px) { .wh-inner { min-height: 620px; } .wd-unit { min-width: 0; padding: 10px 8px; } }

/* ---------- THE DAY: five stops along one line ---------- */
.block-wed-day { --block-max: 1180px; --wdd-rule: color-mix(in srgb, var(--color-ink) 18%, transparent); padding: clamp(48px, 7cqw, 112px) clamp(16px, 3cqw, 32px); }
.wdd-line { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: clamp(32px, 5cqw, 56px) 0; padding: 0; list-style: none; }
.wdd-line::before { content: ""; position: absolute; left: 10%; right: 10%; top: 58px; height: 1px; background: var(--wdd-rule); }
.wdd-line li { position: relative; display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; }
.wdd-time { font-family: var(--font-display); font-size: clamp(26px, 3cqw, 38px); line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--color-accent-text); }
.wdd-dot { width: 13px; height: 13px; margin: 4px 0 6px; border-radius: var(--shape-round); background: rgb(var(--color-primary)); box-shadow: 0 0 0 6px rgba(var(--color-primary), .16); }
.wdd-line h3 { font-family: var(--font-display); font-size: clamp(19px, 2cqw, 23px); line-height: 1.2; }
.wdd-line p { max-width: 200px; font-size: 14px; line-height: 1.5; color: var(--color-ink-soft); }
.wdd-photo { aspect-ratio: 16 / 6; }
@container (max-width: 760px) {
  .wdd-line { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .wdd-line::before { left: 94px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
  .wdd-line li { grid-template-columns: 76px 20px minmax(0, 1fr); justify-items: start; column-gap: 12px; row-gap: 2px; text-align: left; }
  .wdd-time { grid-row: span 2; font-size: 24px; }
  .wdd-dot { grid-row: span 2; margin: 8px 0 0 4px; }
  .wdd-line p { max-width: none; }
  .wdd-photo { aspect-ratio: 4 / 3; }
}

/* ---------- THE PLACE: a drawn map, how to get there, where to stay ---------- */
.block-wed-place { --block-max: 1180px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.wp-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "map copy" "photo copy"; gap: clamp(16px, 3cqw, 32px) clamp(24px, 5cqw, 64px); align-items: start; }
.wp-mapbox { grid-area: map; overflow: hidden; border-radius: var(--shape-card); }
.wp-map { display: block; width: 100%; height: auto; }
.wp-sea { fill: rgba(var(--color-primary), .16); }
.wp-land { fill: color-mix(in srgb, var(--color-ink) 7%, transparent); }
.wp-road { fill: none; stroke: color-mix(in srgb, var(--color-ink) 30%, transparent); stroke-width: 5; stroke-linecap: round; }
.wp-bus { fill: none; stroke: rgb(var(--color-primary)); stroke-width: 2.5; stroke-dasharray: 2 9; stroke-linecap: round; }
.wp-town circle { fill: var(--color-ink); }
.wp-map text { font-family: var(--font-sans); font-size: 20px; font-weight: 600; fill: var(--color-ink); }
.wp-venue circle:first-child { fill: rgba(var(--color-primary), .25); }
.wp-venue circle:last-child { fill: rgb(var(--color-primary)); }
.wp-copy { grid-area: copy; display: grid; gap: 16px; }
.block-wed-place .wp-address { display: flex; gap: 10px; align-items: center; font-size: 16px; font-weight: var(--weight-medium); }
.wp-address svg { flex: none; width: 18px; height: 18px; color: rgb(var(--color-primary)); }
.wp-way { display: grid; gap: 4px; }
.wp-way h3 { font-family: var(--font-display); font-size: 20px; }
.wp-way p { font-size: 15px; line-height: 1.6; color: var(--color-ink-soft); }
.block-wed-place .wp-sub { margin-top: 6px; font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps, .1em); text-transform: uppercase; color: var(--color-ink-soft); }
.wp-stay { display: grid; margin: 0; padding: 0; list-style: none; }
.wp-stay li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); font-size: 15px; }
.wp-stay span { color: var(--color-ink-soft); text-align: right; }
.wp-photo { grid-area: photo; aspect-ratio: 16 / 7; }
@container (max-width: 820px) { .wp-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "map" "copy" "photo"; } }

/* ---------- RSVP: yes or no, how many, what you do not eat, one song ---------- */
.block-rsvp { --block-max: 1120px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.rsvp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0; align-items: center; }
.rsvp-photo { aspect-ratio: 4 / 5; }
.rsvp-card { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-left: -12%; padding: clamp(22px, 3.4cqw, 40px); border-radius: var(--shape-card); }
.rsvp-title { font-family: var(--font-display); font-size: clamp(32px, 4cqw, 52px); line-height: 1; letter-spacing: var(--tracking-display); }
.block-rsvp .rsvp-lead, .block-rsvp .rsvp-gift { font-size: 14px; line-height: 1.55; color: var(--color-ink-soft); }
.rsvp-card .field-wrap, .rsvp-card .field { width: 100%; }
.rsvp-answer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rsvp-answer .badge { justify-content: center; min-height: 46px; font-size: 15px; }
.rsvp-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rsvp-row .pick-field { width: 100%; }
.rsvp-card > .btn { width: 100%; }
.block-rsvp .rsvp-gift { padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); font-style: italic; }
@container (max-width: 820px) {
  .rsvp-grid { grid-template-columns: minmax(0, 1fr); }
  .rsvp-photo { aspect-ratio: 16 / 10; }
  .rsvp-card { margin: -48px 10px 0; }
}
@container (max-width: 480px) { .rsvp-row { grid-template-columns: minmax(0, 1fr); } }
/* ---------- COURSE HERO: what you learn, four facts, the price, the first lesson ready to play ---------- */
.block-course-hero { --block-max: 1220px; padding: clamp(28px, 5cqw, 72px) clamp(16px, 3cqw, 32px) clamp(40px, 6cqw, 88px); }
.coh-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5cqw, 64px); align-items: center; }
.coh-copy { display: grid; justify-items: start; gap: 18px; min-width: 0; }
.coh-copy .badge { max-width: 100%; white-space: normal; }
.coh-title { font-family: var(--font-display); font-size: clamp(40px, 5.8cqw, 80px); font-weight: var(--weight-bold); line-height: 1; letter-spacing: var(--tracking-display); text-wrap: balance; }
.block-course-hero .coh-lead { max-width: 500px; font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }
.coh-facts { display: grid; grid-template-columns: repeat(4, auto); gap: 8px clamp(16px, 2.6cqw, 32px); margin: 4px 0; }
.coh-facts div { display: grid; }
.coh-facts dd { margin: 0; font-family: var(--font-display); font-size: clamp(22px, 2.6cqw, 32px); line-height: 1.1; }
.coh-facts dt { font-size: 13px; color: var(--color-ink-soft); }
.coh-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.block-course-hero .coh-price { font-family: var(--font-display); font-size: clamp(34px, 4cqw, 48px); line-height: 1; }
.coh-price small { font-family: var(--font-sans); font-size: 14px; color: var(--color-ink-soft); }
.coh-alt { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: var(--weight-medium); color: var(--color-accent-text); }
.coh-alt svg { width: 14px; height: 14px; }
.coh-video { position: relative; display: grid; place-items: center; margin: 0; }
.coh-video .ph { grid-area: 1 / 1; width: 100%; aspect-ratio: 4 / 3; }
.coh-video .pod-play { grid-area: 1 / 1; z-index: 1; }
.coh-video figcaption { position: absolute; left: 14px; bottom: 14px; right: 14px; display: grid; gap: 2px; padding: 12px 16px; border-radius: var(--shape-control); font-size: 15px; font-weight: var(--weight-semibold); color: #fff; background: rgba(14, 14, 12, .52); backdrop-filter: blur(6px); }
.coh-video figcaption span { font-size: 12px; font-weight: var(--weight-regular, 400); letter-spacing: var(--tracking-caps, .08em); text-transform: uppercase; opacity: .85; }
@container (max-width: 900px) { .coh-grid { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 560px) { .coh-facts { grid-template-columns: repeat(2, auto); } .coh-buy .btn { flex: 1 1 100%; } }

/* ---------- CURRICULUM: modules that open to their lessons ---------- */
.block-curriculum { --block-max: 1180px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.cur-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 5cqw, 72px); align-items: start; }
.cur-side { position: sticky; top: 24px; display: grid; gap: 20px; }
.cur-photo { aspect-ratio: 4 / 3; }
.block-curriculum .cur-note { font-size: 15px; line-height: 1.6; color: var(--color-ink-soft); }
.cur-list { display: grid; }
.cur-mod { border-top: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); }
.cur-mod:last-child { border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); }
.cur-mod summary { display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; align-items: center; gap: 14px; padding: 18px 4px; cursor: pointer; list-style: none; }
.cur-mod summary::-webkit-details-marker { display: none; }
.cur-mod summary:focus-visible { outline: 2px solid rgb(var(--color-primary)); outline-offset: 2px; }
.cur-num { font-family: var(--font-display); font-size: 22px; color: var(--color-accent-text); font-variant-numeric: tabular-nums; }
.cur-name { display: grid; gap: 2px; }
.cur-name b { font-family: var(--font-display); font-size: clamp(18px, 2cqw, 22px); font-weight: var(--weight-semibold); }
.cur-name span { font-size: 13px; color: var(--color-ink-soft); }
.cur-mod summary svg { width: 20px; height: 20px; transition: transform var(--motion-hover, .2s); }
.cur-mod[open] summary svg { transform: rotate(180deg); }
.cur-mod summary:hover .cur-name b, .cur-mod summary.is-hover .cur-name b { color: var(--color-accent-text); }
.cur-lessons { display: grid; gap: 2px; margin: 0 0 18px; padding: 0 0 0 58px; list-style: none; }
.cur-lessons li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--shape-control); font-size: 15px; }
.cur-lessons li:nth-child(odd) { background: color-mix(in srgb, var(--color-ink) 4%, transparent); }
.cur-lessons svg { width: 12px; height: 12px; color: rgb(var(--color-primary)); }
.cur-lessons em { font-style: normal; font-size: 13px; color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.cur-lessons li:not(:has(.badge)) em { grid-column: 4; }
@container (max-width: 860px) { .cur-grid { grid-template-columns: minmax(0, 1fr); } .cur-side { position: static; } .cur-photo { aspect-ratio: 16 / 9; } }
@container (max-width: 520px) { .cur-lessons { padding-left: 0; } .cur-lessons li { grid-template-columns: 14px minmax(0, 1fr) auto; } .cur-lessons .badge { grid-column: 2; grid-row: 2; justify-self: start; } .cur-lessons li em, .cur-lessons li:not(:has(.badge)) em { grid-column: 3; grid-row: 1; } }

/* ---------- TEACHER: a big photo, a few lines in their voice ---------- */
.block-teacher { --block-max: 1180px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.tch-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5cqw, 72px); align-items: center; }
.tch-photo { aspect-ratio: 4 / 5; }
.tch-copy { display: grid; gap: 16px; }
.block-teacher .tch-kicker { font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps, .1em); text-transform: uppercase; color: var(--color-accent-text); }
.tch-name { font-family: var(--font-display); font-size: clamp(36px, 5cqw, 64px); font-weight: var(--weight-bold); line-height: 1; letter-spacing: var(--tracking-display); }
.tch-quote { margin: 0; padding-left: 18px; border-left: 3px solid rgb(var(--color-primary)); font-family: var(--font-display); font-size: clamp(20px, 2.3cqw, 27px); font-style: italic; line-height: 1.35; }
.block-teacher .tch-bio { max-width: 520px; font-size: 16px; line-height: 1.65; color: var(--color-ink-soft); }
.tch-facts { display: grid; margin: 4px 0 0; }
.tch-facts div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); font-size: 15px; }
.tch-facts dt { color: var(--color-ink-soft); }
.tch-facts dd { margin: 0; font-weight: var(--weight-medium); text-align: right; }
@container (max-width: 820px) { .tch-grid { grid-template-columns: minmax(0, 1fr); } .tch-photo { aspect-ratio: 4 / 3; } }

/* ---------- COURSE PRICE: what everyone gets, two ways to buy in tabs ---------- */
.block-course-price { --block-max: 1120px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.cp-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 5cqw, 64px); align-items: center; }
.cp-get { display: grid; gap: 22px; }
.cp-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.45; }
.cp-list li { display: flex; gap: 12px; align-items: center; }
.cp-list span { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--shape-control); color: var(--color-accent-text); background: rgba(var(--color-primary), .12); }
.cp-list svg { width: 18px; height: 18px; }
.cp-photo { aspect-ratio: 16 / 6; }
.cp-card { display: grid; gap: 18px; padding: clamp(20px, 3cqw, 32px); border-radius: var(--shape-card); }
.cp-card .segmented { width: 100%; }
.cp-panel { display: grid; gap: 14px; }
.cp-panel[hidden] { display: none; }
.block-course-price .cp-price { font-family: var(--font-display); font-size: clamp(48px, 6cqw, 72px); line-height: 1; }
.cp-price small { font-family: var(--font-sans); font-size: 15px; color: var(--color-ink-soft); }
.block-course-price .cp-what { min-height: 3em; font-size: 15px; line-height: 1.55; color: var(--color-ink-soft); }
.cp-panel .btn { width: 100%; }
.block-course-price .cp-note { font-size: 13px; color: var(--color-ink-soft); }
@container (max-width: 820px) { .cp-grid { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 520px) { .cp-list { grid-template-columns: minmax(0, 1fr); } }
/* ---------- RECIPE HERO: the dish in a narrow column, the numbers that matter, the photo wide ---------- */
.block-recipe-hero { --block-max: 1200px; padding: clamp(28px, 5cqw, 72px) clamp(16px, 3cqw, 32px) clamp(24px, 4cqw, 48px); }
.rh-head { display: grid; justify-items: center; gap: 16px; max-width: 780px; margin: 0 auto clamp(24px, 4cqw, 44px); text-align: center; }
.block-recipe-hero .rh-kicker { font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps, .1em); text-transform: uppercase; color: var(--color-accent-text); }
.rh-title { font-family: var(--font-display); font-size: clamp(36px, 5.4cqw, 72px); font-weight: var(--weight-bold); line-height: 1.02; letter-spacing: var(--tracking-display); text-wrap: balance; }
.block-recipe-hero .rh-lead { max-width: 600px; font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); text-wrap: pretty; }
.rh-author { display: flex; align-items: center; gap: 10px; text-align: left; }
.rh-author span { display: grid; font-size: 13px; color: var(--color-ink-soft); }
.rh-author b { font-size: 15px; color: var(--color-ink); }
.rh-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; max-width: 620px; margin: 6px 0 0; border-block: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); }
.rh-meta div { display: grid; gap: 2px; padding: 12px 8px; }
.rh-meta div + div { border-left: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); }
.rh-meta dt { font-size: 12px; letter-spacing: var(--tracking-caps, .08em); text-transform: uppercase; color: var(--color-ink-soft); }
.rh-meta dd { margin: 0; font-family: var(--font-display); font-size: clamp(18px, 2cqw, 22px); }
.rh-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.rh-photo { aspect-ratio: 16 / 8; }
@container (max-width: 560px) {
  .rh-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rh-meta div:nth-child(3) { border-left: 0; }
  .rh-meta div:nth-child(n + 3) { border-top: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); }
  .rh-actions .btn:first-child { flex: 1 1 100%; }
  .rh-photo { aspect-ratio: 4 / 3; }
}

/* ---------- RECIPE: ingredients at the side with portions and ticks, steps with timers ---------- */
.block-recipe { --block-max: 1120px; padding: clamp(24px, 4cqw, 56px) clamp(16px, 3cqw, 32px) clamp(40px, 6cqw, 96px); }
.rc-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5cqw, 64px); align-items: start; }
.rc-ing { position: sticky; top: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: clamp(20px, 3cqw, 30px); border-radius: var(--shape-card); }
.rc-h { font-family: var(--font-display); font-size: clamp(24px, 2.6cqw, 32px); font-weight: var(--weight-bold); letter-spacing: var(--tracking-display); }
.rc-ing .segmented { width: 100%; }
.rc-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.rc-list[hidden] { display: none; }
.rc-list li { padding: 8px 0; border-bottom: 1px dashed color-mix(in srgb, var(--color-ink) 14%, transparent); }
.rc-list .check { align-items: start; font-size: 15px; line-height: 1.45; }
.rc-list .check > span:last-child { transition: color var(--motion-hover, .2s); }
.rc-list .check:has(input:checked) > span:last-child { color: var(--color-ink-soft); text-decoration: line-through; }
.block-recipe .rc-hint { font-size: 13px; color: var(--color-ink-soft); }
.rc-steps { display: grid; gap: 18px; }
.rc-steps ol { display: grid; gap: clamp(18px, 3cqw, 28px); margin: 0; padding: 0; list-style: none; }
.rc-step { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; }
.rc-num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--shape-round); font-family: var(--font-display); font-size: 20px; font-weight: var(--weight-bold);
          color: var(--color-accent-text); border: 2px solid rgba(var(--color-primary), .4); }
.rc-body { display: grid; justify-items: start; gap: 12px; padding-top: 8px; }
.rc-body p { font-size: 17px; line-height: 1.65; }
.rc-photo { width: 100%; aspect-ratio: 16 / 9; }
.rc-timer { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border: 1px solid rgba(var(--color-primary), .4); border-radius: var(--shape-round); font: inherit; font-size: 14px;
            color: var(--color-ink); background: rgba(var(--color-primary), .08); cursor: pointer; transition: background var(--motion-hover, .2s); }
.rc-timer svg { width: 18px; height: 18px; color: rgb(var(--color-primary)); }
.rc-timer b { font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }
.rc-timer:hover, .rc-timer.is-hover { background: rgba(var(--color-primary), .16); }
.rc-timer:focus-visible { outline: 2px solid rgb(var(--color-primary)); outline-offset: 2px; }
.rc-timer.is-running { color: var(--color-on-tinted, #fff); background: rgb(var(--color-primary)); }
.rc-timer.is-running svg { color: currentColor; animation: rc-tick 1s steps(2) infinite; }
.rc-timer.is-done { border-color: var(--color-success, #2f9e62); }
@keyframes rc-tick { 50% { transform: rotate(12deg); } }
@container (max-width: 820px) { .rc-grid { grid-template-columns: minmax(0, 1fr); } .rc-ing { position: static; } }
@container (max-width: 480px) { .rc-step { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; } .rc-num { width: 36px; height: 36px; font-size: 17px; } .rc-body p { font-size: 16px; } }

/* ---------- RECIPE NOTES: three short things worth knowing ---------- */
.block-recipe-notes { --block-max: 1120px; padding: clamp(32px, 5cqw, 72px) clamp(16px, 3cqw, 32px); }
.rn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2cqw, 24px); margin-top: 22px; }
.rn-note { display: grid; align-content: start; gap: 8px; padding: clamp(18px, 2.6cqw, 26px); border-radius: var(--shape-card); background: rgba(var(--color-primary), .08); }
.rn-icon svg { width: 22px; height: 22px; color: rgb(var(--color-primary)); }
.rn-note h3 { font-family: var(--font-display); font-size: 20px; }
.rn-note p { font-size: 15px; line-height: 1.6; color: var(--color-ink-soft); }
@container (max-width: 760px) { .rn-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- MORE RECIPES: three photo cards ---------- */
.block-more-recipes { --block-max: 1180px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.mr-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 24px; }
.mr-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: var(--weight-medium); color: var(--color-accent-text); }
.mr-link svg { width: 16px; height: 16px; }
.mr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4cqw, 28px); margin-top: clamp(20px, 3cqw, 36px); }
.mr-card { display: grid; align-content: start; gap: 10px; min-width: 0; }
.mr-photo { aspect-ratio: 4 / 3; margin-bottom: 4px; }
.mr-photo img { transition: transform .6s var(--ease-out, ease); }
.mr-card:hover .mr-photo img, .mr-card.is-hover .mr-photo img { transform: scale(1.05); }
.mr-card h3 { font-family: var(--font-display); font-size: clamp(19px, 2cqw, 23px); line-height: 1.2; }
.mr-card p { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-ink-soft); }
.mr-card p svg { width: 15px; height: 15px; }
@container (max-width: 760px) { .mr-grid { grid-template-columns: minmax(0, 1fr); } .mr-photo { aspect-ratio: 16 / 9; } }
/* ---------- CHANGELOG: releases down a line, a tag on every change, tabs by kind ---------- */
.block-changelog { --block-max: 1080px; --clg-rule: color-mix(in srgb, var(--color-ink) 14%, transparent); padding: clamp(28px, 5cqw, 72px) clamp(16px, 3cqw, 32px) clamp(40px, 6cqw, 96px); }
.clg-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px clamp(24px, 4cqw, 56px); align-items: end; padding-bottom: clamp(20px, 3cqw, 32px); border-bottom: 1px solid var(--clg-rule); }
.clg-intro { display: grid; gap: 12px; }
.clg-title { font-family: var(--font-display); font-size: clamp(36px, 5cqw, 64px); font-weight: var(--weight-bold); line-height: 1; letter-spacing: var(--tracking-display); }
.block-changelog .clg-lead { font-size: var(--text-md); line-height: 1.55; color: var(--color-ink-soft); }
.clg-sub { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.clg-sub .field-wrap, .clg-sub .field { width: 100%; }
.clg-rss { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; justify-self: start; font-size: 14px; color: var(--color-ink-soft); }
.clg-rss svg { width: 16px; height: 16px; color: rgb(var(--color-primary)); }
.clg-rss:hover, .clg-rss.is-hover { color: var(--color-ink); }
.clg-filter { position: sticky; top: 0; z-index: 2; display: flex; padding: 14px 0; }   /* the tabs stay at the top while the releases pass under them */
.clg-list { display: grid; margin: 0; padding: 0; list-style: none; }
.clg-rel { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: clamp(20px, 4cqw, 48px); padding: clamp(24px, 4cqw, 44px) 0; border-top: 1px solid var(--clg-rule); }
.clg-rel:first-child { border-top: 0; }
.clg-meta { position: sticky; top: 76px; align-self: start; display: grid; gap: 4px; }
.clg-ver { justify-self: start; padding: 3px 10px; border-radius: var(--shape-round); font-family: var(--font-mono, ui-monospace, monospace); font-size: 14px; font-weight: var(--weight-semibold);
           color: var(--color-on-tinted, #fff); background: rgb(var(--color-primary)); }
.clg-meta time { font-size: 14px; color: var(--color-ink-soft); }
.clg-body { display: grid; gap: 14px; min-width: 0; }
.clg-body h2 { font-family: var(--font-display); font-size: clamp(24px, 3cqw, 34px); line-height: 1.1; letter-spacing: var(--tracking-display); }
.block-changelog .clg-text { max-width: 620px; font-size: 16px; line-height: 1.6; color: var(--color-ink-soft); }
.clg-changes { display: grid; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.clg-change { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: baseline; font-size: 15px; line-height: 1.5; }
.clg-tag { justify-self: start; padding: 1px 9px; border-radius: var(--shape-control); font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: .02em; }
.is-new .clg-tag { color: var(--color-on-tinted, #fff); background: rgb(var(--color-primary)); }
.is-improved .clg-tag { color: var(--color-accent-text); background: rgba(var(--color-primary), .14); }
.is-fixed .clg-tag { color: var(--color-ink-soft); box-shadow: inset 0 0 0 1px var(--clg-rule); }
.block-changelog[data-kind="new"] .clg-change:not(.is-new), .block-changelog[data-kind="improved"] .clg-change:not(.is-improved), .block-changelog[data-kind="fixed"] .clg-change:not(.is-fixed) { display: none; }
.block-changelog[data-kind="new"] .clg-rel:not(:has(.is-new)), .block-changelog[data-kind="improved"] .clg-rel:not(:has(.is-improved)), .block-changelog[data-kind="fixed"] .clg-rel:not(:has(.is-fixed)) { display: none; }
.block-changelog:not([data-kind="all"]) .clg-shot { display: none; }
.clg-empty { display: none; }
/* a drawn screen of the release: no words, only the shape of the thing */
.clg-shot { overflow: hidden; border-radius: var(--shape-card); background: rgba(var(--color-primary), .1); box-shadow: inset 0 0 0 1px var(--clg-rule); }
.clg-shot-bar { display: flex; gap: 6px; padding: 10px 12px; }
.clg-shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--color-ink) 20%, transparent); }
.clg-shot-body { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); gap: 14px; padding: 6px clamp(12px, 3cqw, 28px) clamp(16px, 3cqw, 28px); }
.clg-shot-col { display: grid; align-content: start; gap: 8px; }
.clg-shot b, .clg-shot span { display: block; height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--color-ink) 14%, transparent); }
.clg-shot b { width: 60%; height: 14px; background: color-mix(in srgb, var(--color-ink) 26%, transparent); }
.clg-shot span.is-on { background: rgb(var(--color-primary)); }
.clg-shot span.is-short { width: 55%; }
.clg-shot-card { display: grid; gap: 9px; padding: 16px; border-radius: var(--shape-card); }
.clg-shot-card em { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; color: var(--color-on-tinted, #fff); background: rgb(var(--color-primary)); }
.clg-shot-card em.is-open { background: transparent; box-shadow: inset 0 0 0 1.5px var(--clg-rule); }
.clg-shot-card em svg { width: 12px; height: 12px; }
@container (max-width: 760px) {
  .clg-head { grid-template-columns: minmax(0, 1fr); }
  .clg-rel { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .clg-meta { position: static; grid-auto-flow: column; justify-content: start; align-items: center; gap: 10px; }
  .clg-change { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@container (max-width: 420px) { .clg-sub { grid-template-columns: minmax(0, 1fr); } .clg-sub .btn { width: 100%; } }

/* ---------- ROADMAP: now, next, later ---------- */
.block-roadmap { --block-max: 1120px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.rm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2cqw, 24px); margin-top: clamp(24px, 4cqw, 44px); }
.rm-col { display: grid; align-content: start; gap: 12px; padding: 14px; border-radius: var(--shape-card); background: color-mix(in srgb, var(--color-ink) 4%, transparent); }
.rm-when { display: flex; align-items: center; gap: 10px; padding: 4px 6px; font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps, .1em); text-transform: uppercase; }
.rm-when i { width: 10px; height: 10px; border-radius: 50%; background: rgb(var(--color-primary)); }
.rm-col-0 .rm-when i { box-shadow: 0 0 0 4px rgba(var(--color-primary), .2); animation: rm-pulse 2s ease-in-out infinite; }
.rm-col-1 .rm-when i { background: rgba(var(--color-primary), .5); }
.rm-col-2 .rm-when i { background: transparent; box-shadow: inset 0 0 0 2px rgba(var(--color-primary), .5); }
@keyframes rm-pulse { 50% { box-shadow: 0 0 0 7px rgba(var(--color-primary), .08); } }
.rm-card { display: grid; gap: 6px; padding: 16px 18px; border-radius: var(--shape-card); }
.rm-card h4 { font-size: 16px; font-weight: var(--weight-semibold); }
.rm-card p { font-size: 14px; line-height: 1.5; color: var(--color-ink-soft); }
.rm-ask { display: inline-flex; align-items: center; gap: 8px; margin-top: clamp(20px, 3cqw, 32px); font-size: 15px; font-weight: var(--weight-medium); color: var(--color-accent-text); }
.rm-ask svg { width: 16px; height: 16px; transition: transform var(--motion-hover, .2s); }
.rm-ask:hover svg, .rm-ask.is-hover svg { transform: translateX(4px); }
@container (max-width: 760px) { .rm-grid { grid-template-columns: minmax(0, 1fr); } }
/* ---------- BAND HERO: the stage full width, the band name across the bottom ---------- */
.bh-inner { position: relative; display: grid; align-content: space-between; gap: 32px; min-height: min(64cqw, 860px); padding: clamp(24px, 4cqw, 56px) clamp(16px, 3cqw, 40px) clamp(10px, 1.6cqw, 20px); isolation: isolate; color: #fff; }
.bh-photo { position: absolute; inset: 0; z-index: -2; border-radius: 0; border: 0 !important; box-shadow: none !important; }
.bh-inner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 8, 10, .55), rgba(8, 8, 10, .05) 45%, rgba(8, 8, 10, .6)); }
.bh-top { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 14px; max-width: 560px; }
.block-band-hero .bh-line { font-family: var(--font-display); font-size: clamp(24px, 3cqw, 38px); font-weight: var(--weight-bold); line-height: 1.1; letter-spacing: var(--tracking-display); }
.bh-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.bh-name { display: block; width: 100%; height: auto; overflow: visible; }
.bh-name text { font-family: var(--font-display); font-size: 160px; font-weight: var(--weight-bold); fill: #fff; }
@container (max-width: 640px) { .bh-inner { min-height: 560px; } .bh-actions .btn { flex: 1 1 100%; } }

/* ---------- RELEASE: the cover, the songs with play buttons, the records before ---------- */
.block-release { --block-max: 1200px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.rel-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, .45fr); gap: clamp(20px, 4cqw, 48px); align-items: start; }
.rel-cover { position: relative; display: grid; }
.rel-cover .ph { aspect-ratio: 1; }
.rel-cover-name { position: absolute; left: 8%; bottom: 7%; right: 8%; font-family: var(--font-display); font-size: clamp(34px, 5cqw, 64px); font-weight: var(--weight-bold); line-height: .9; color: #fff;
                  letter-spacing: var(--tracking-display); text-shadow: 0 2px 20px rgba(0, 0, 0, .35); }
.rel-main { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 12px; min-width: 0; }
.rel-title { font-family: var(--font-display); font-size: clamp(34px, 4.4cqw, 56px); font-weight: var(--weight-bold); line-height: 1; letter-spacing: var(--tracking-display); }
.block-release .rel-meta { font-size: 15px; line-height: 1.5; color: var(--color-ink-soft); }
.rel-songs { display: grid; width: 100%; margin: 6px 0 0; padding: 0; list-style: none; }
.rel-songs li { display: grid; grid-template-columns: auto 24px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); }
.rel-n { font-size: 13px; color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.rel-song { font-size: 16px; font-weight: var(--weight-medium); }
.rel-songs li:has(.is-playing) .rel-song { color: var(--color-accent-text); }
.rel-len { font-size: 14px; color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.block-release .rel-more { font-size: 14px; font-style: italic; color: var(--color-ink-soft); }
.rel-buy { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.rel-before { display: grid; gap: 14px; }
.block-release .rel-sub { font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps, .1em); text-transform: uppercase; color: var(--color-ink-soft); }
.rel-old { display: grid; gap: 8px; }
.rel-old .ph { aspect-ratio: 1; }
.rel-old .ph img { transition: transform .5s var(--ease-out, ease); }
.rel-old:hover .ph img, .rel-old.is-hover .ph img { transform: scale(1.05); }
.rel-old span { display: grid; font-size: 13px; color: var(--color-ink-soft); }
.rel-old b { font-size: 15px; color: var(--color-ink); }
@container (max-width: 1000px) { .rel-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } .rel-before { grid-column: 1 / -1; grid-template-columns: auto repeat(2, minmax(0, 200px)); align-items: start; } }
@container (max-width: 700px) {
  .rel-grid { grid-template-columns: minmax(0, 1fr); }
  .rel-before { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rel-before .rel-sub { grid-column: 1 / -1; }
  .rel-buy .btn { flex: 1 1 100%; }
}

/* ---------- GIGS: tour dates as rows ---------- */
.block-gigs { --block-max: 1120px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.gig-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: clamp(18px, 3cqw, 32px); }
.gig-list { display: grid; margin: 0; padding: 0; list-style: none; }
.gig-list[hidden] { display: none; }
.gig { display: grid; grid-template-columns: 110px minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 0; border-top: 2px solid var(--color-ink); transition: background var(--motion-hover, .2s); }
.gig:last-child { border-bottom: 2px solid var(--color-ink); }
.gig:hover, .gig.is-hover { background: rgba(var(--color-primary), .08); }
.gig-date { display: flex; align-items: center; gap: 10px; }
.gig-date b { font-family: var(--font-display); font-size: clamp(36px, 4.4cqw, 52px); font-weight: var(--weight-bold); line-height: .9; font-variant-numeric: tabular-nums; }
.gig-date span { font-size: 13px; font-weight: var(--weight-semibold); line-height: 1.25; text-transform: uppercase; letter-spacing: .06em; }
.gig-where { display: grid; font-size: 14px; color: var(--color-ink-soft); }
.gig-where b { font-family: var(--font-display); font-size: clamp(20px, 2.4cqw, 28px); line-height: 1.1; color: var(--color-ink); }
.gig-room { font-size: 15px; }
.gig-state { display: flex; align-items: center; justify-content: end; gap: 10px; }
.gig-sold { font-size: 14px; font-weight: var(--weight-semibold); text-decoration: line-through; color: var(--color-ink-soft); }
.gig.is-sold .gig-date, .gig.is-sold .gig-where, .gig.is-sold .gig-room { opacity: .5; }
@container (max-width: 700px) {
  .gig { grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "date where" "date room" "date state"; gap: 4px 14px; align-items: start; }
  .gig-date { grid-area: date; flex-direction: column; align-items: start; gap: 4px; }
  .gig-where { grid-area: where; } .gig-room { grid-area: room; font-size: 14px; color: var(--color-ink-soft); }
  .gig-state { grid-area: state; justify-content: start; margin-top: 6px; flex-wrap: wrap; }
}

/* ---------- BAND PHOTOS: one tall beside two wide ---------- */
.block-band-photos { --block-max: 1240px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.bp-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(10px, 1.6cqw, 20px); }
.bp-item { position: relative; margin: 0; }
.bp-item .ph { height: 100%; }
.bp-item-0 { grid-column: 1 / span 4; grid-row: 1 / span 2; }
.bp-item-0 .ph { aspect-ratio: auto; min-height: 100%; position: absolute; inset: 0; }
.bp-item-1 { grid-column: 5 / span 5; grid-row: 1; }
.bp-item-1 .ph { aspect-ratio: 4 / 3; }
.bp-item-2 { grid-column: 5 / span 8; grid-row: 2; }
.bp-item-2 .ph { aspect-ratio: 16 / 7; }
.bp-item figcaption { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: var(--shape-control); font-size: 13px; color: #fff; background: rgba(10, 10, 12, .55); }
.bp-words { grid-column: 10 / span 3; grid-row: 1; display: grid; align-content: end; gap: 12px; }
.bp-words .sec-title { font-size: clamp(22px, 2.4cqw, 30px); }
.block-band-photos .bp-note { font-size: 14px; line-height: 1.5; color: var(--color-ink-soft); }
.bp-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: var(--weight-semibold); color: var(--color-accent-text); }
.bp-link svg { width: 16px; height: 16px; }
@container (max-width: 820px) {
  .bp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-words { grid-column: 1 / -1; grid-row: 1; }
  .bp-item-0 { grid-column: 1; grid-row: 2 / span 2; }
  .bp-item-1 { grid-column: 2; grid-row: 2; }
  .bp-item-2 { grid-column: 2; grid-row: 3; }
  .bp-item-2 .ph { aspect-ratio: 4 / 3; }
}
@container (max-width: 520px) {
  .bp-grid { grid-template-columns: minmax(0, 1fr); }
  .bp-item-0, .bp-item-1, .bp-item-2 { grid-column: 1; grid-row: auto; }
  .bp-item-0 .ph { position: relative; aspect-ratio: 4 / 5; }
}
/* ---------- JOBS HERO: why work here, where and how, two photos overlapping ---------- */
.block-jobs-hero { --block-max: 1220px; padding: clamp(28px, 5cqw, 72px) clamp(16px, 3cqw, 32px) clamp(40px, 6cqw, 88px); }
.jh-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5cqw, 72px); align-items: center; }
.jh-copy { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 18px; }
.jh-copy .badge { max-width: 100%; white-space: normal; }
.jh-title { font-family: var(--font-display); font-size: clamp(40px, 5.8cqw, 80px); font-weight: var(--weight-bold); line-height: 1; letter-spacing: var(--tracking-display); text-wrap: balance; }
.block-jobs-hero .jh-lead { max-width: 500px; font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }
.jh-facts { display: grid; gap: 8px; margin: 0 0 6px; padding: 0; list-style: none; font-size: 15px; }
.jh-facts li { display: flex; gap: 10px; align-items: center; }
.jh-facts svg { flex: none; width: 18px; height: 18px; color: rgb(var(--color-primary)); }
.jh-photos { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-rows: auto auto; }
.jh-photo-0 { grid-column: 1 / span 8; grid-row: 1 / span 2; aspect-ratio: 4 / 3; }
.jh-photo-1 { grid-column: 6 / span 5; grid-row: 2; z-index: 1; margin-top: -30%; margin-bottom: -12%; aspect-ratio: 1; box-shadow: 0 0 0 6px var(--page-bg, #fff), 0 20px 40px -20px rgba(0, 0, 0, .4); }
@container (max-width: 900px) { .jh-grid { grid-template-columns: minmax(0, 1fr); } .jh-photos { margin-bottom: 8%; } }
@container (max-width: 560px) { .jh-copy .btn { width: 100%; } }

/* ---------- VALUES: a tall photo beside four numbered values ---------- */
.block-values { --block-max: 1180px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.val-grid { display: grid; grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2.4cqw, 28px); margin-top: clamp(24px, 4cqw, 44px); }
.val-photo { grid-row: span 2; min-height: 100%; }
.val-item { display: grid; align-content: start; gap: 8px; padding: clamp(18px, 2.6cqw, 28px); border-radius: var(--shape-card); background: rgba(var(--color-primary), .08); }
.val-num { font-family: var(--font-display); font-size: clamp(36px, 4cqw, 52px); font-weight: var(--weight-bold); line-height: 1; color: rgb(var(--color-primary)); }
.val-item h3 { font-family: var(--font-display); font-size: clamp(20px, 2.2cqw, 25px); line-height: 1.15; }
.val-item p { font-size: 15px; line-height: 1.6; color: var(--color-ink-soft); }
@container (max-width: 820px) { .val-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .val-photo { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 8; } }
@container (max-width: 520px) { .val-grid { grid-template-columns: minmax(0, 1fr); } .val-photo { aspect-ratio: 4 / 3; } }

/* ---------- OPEN ROLES: rows filtered by team chips ---------- */
.block-jobs { --block-max: 1120px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.jb-head { display: grid; gap: 16px; margin-bottom: clamp(16px, 3cqw, 28px); }
.jb-count { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; margin-left: 6px; padding: 0 .4em; border-radius: var(--shape-round); vertical-align: middle;
            font-family: var(--font-sans); font-size: .5em; color: var(--color-on-tinted, #fff); background: rgb(var(--color-primary)); }
.jb-teams { display: flex; flex-wrap: wrap; gap: 8px; }
.jb-list { display: grid; margin: 0; padding: 0; list-style: none; }
.jb-list li[hidden] { display: none; }
.jb-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, .6fr) 36px; align-items: center; gap: 16px; padding: 18px 8px;
          border-top: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); transition: background var(--motion-hover, .2s); }
.jb-list li:last-child .jb-row { border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); }
.jb-row:hover, .jb-row.is-hover { background: rgba(var(--color-primary), .07); }
.jb-title { font-family: var(--font-display); font-size: clamp(18px, 2cqw, 22px); font-weight: var(--weight-semibold); }
.jb-team, .jb-type { font-size: 14px; color: var(--color-ink-soft); }
.jb-where { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.jb-where svg { flex: none; width: 15px; height: 15px; color: rgb(var(--color-primary)); }
.jb-go { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--shape-round); color: var(--color-accent-text); transition: transform var(--motion-hover, .2s); }
.jb-go svg { width: 16px; height: 16px; }
.jb-row:hover .jb-go, .jb-row.is-hover .jb-go { transform: translateX(4px); }
.jb-none { display: none; padding: 24px 8px; font-size: 15px; color: var(--color-ink-soft); }
.block-jobs.is-empty .jb-none { display: block; }
@container (max-width: 760px) {
  .jb-row { grid-template-columns: minmax(0, 1fr) 36px; grid-template-areas: "title go" "meta go"; gap: 4px 12px; }
  .jb-title { grid-area: title; }
  .jb-team, .jb-type { display: none; }
  .jb-where { grid-area: meta; }
  .jb-go { grid-area: go; }
}

/* ---------- HIRING STEPS: what happens after you apply ---------- */
.block-hiring { --block-max: 1120px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.hi-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5cqw, 72px); align-items: start; }
.hi-side { position: sticky; top: 24px; display: grid; gap: 22px; }
.hi-photo { aspect-ratio: 4 / 3; }
.hi-steps { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.hi-steps li { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; padding-bottom: clamp(22px, 3cqw, 34px); }
.hi-steps li:not(:last-child)::before { content: ""; position: absolute; left: 25px; top: 52px; bottom: 0; width: 2px; background: rgba(var(--color-primary), .25); }
.hi-num { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--shape-round); font-family: var(--font-display); font-size: 22px; font-weight: var(--weight-bold);
          color: var(--color-on-tinted, #fff); background: rgb(var(--color-primary)); }
.hi-steps li:last-child .hi-num { color: rgb(var(--color-primary)); background: transparent; box-shadow: inset 0 0 0 2px rgb(var(--color-primary)); }
.hi-steps h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-top: 10px; font-family: var(--font-display); font-size: clamp(20px, 2.2cqw, 26px); line-height: 1.2; }
.hi-steps em { font-family: var(--font-sans); font-size: 13px; font-style: normal; font-weight: var(--weight-medium); color: var(--color-accent-text); }
.hi-steps p { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--color-ink-soft); }
@container (max-width: 820px) { .hi-grid { grid-template-columns: minmax(0, 1fr); } .hi-side { position: static; } }
@container (max-width: 480px) { .hi-steps li { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; } .hi-num { width: 40px; height: 40px; font-size: 18px; } .hi-steps li:not(:last-child)::before { left: 19px; top: 40px; } .hi-steps h3 { padding-top: 6px; } }

/* =====================================================================
   SITE LAYERS - dialogs, the phone menu, a field's list and short
   messages sit over the part of the page the visitor sees, in the kit's
   own modal, list and toast styles
   ===================================================================== */
.site-layer { position: absolute; left: 0; right: 0; z-index: 90; font-family: var(--font-sans); color: var(--color-ink); }
.site-layer.is-fixed { position: fixed; inset: 0; height: auto !important; }
.site-layer--toast { pointer-events: none; }
.site-layer--toast .toast { pointer-events: auto; }
.site-locked { overflow: hidden !important; scrollbar-gutter: stable; }   /* the page does not jump sideways when its bar goes */
.site-layer .modal-backdrop { position: absolute; inset: 0; place-items: safe center; overflow-y: auto; scrollbar-width: none; animation: site-fade .2s ease both; }
.site-layer .modal-backdrop::-webkit-scrollbar { display: none; }
.site-layer .modal { width: min(460px, 100%); animation: site-rise .25s ease both; }
.site-layer .modal.is-wide { width: min(640px, 100%); }
.site-layer .modal .modal-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.site-layer .modal .ph { aspect-ratio: 16 / 9; }
.site-layer .modal-actions .btn { white-space: normal; }
@keyframes site-fade { from { opacity: 0; } }
@keyframes site-rise { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes site-drop { from { opacity: 0; transform: translateY(-10px); } }

.site-menu-back, .site-pick-back { position: absolute; inset: 0; }
.site-menu-back { background: rgba(var(--color-neutral-shade-deep), .22); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: site-fade .2s ease both; }
.site-menu {
  position: absolute; top: 10px; left: 10px; right: 10px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
  max-height: calc(100% - 20px); overflow-y: auto; scrollbar-width: none;
  padding: 16px 18px 20px; isolation: isolate;
  --bg: rgba(255, 255, 255, .6); --blur: var(--glass-blur-panel);
  animation: site-drop .25s ease both;
}
.site-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.site-menu-brand { font-family: var(--font-display); font-size: 18px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); }
.site-menu-close { display: grid; place-items: center; width: 40px; height: 40px; margin: -6px -8px -6px 0; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.site-menu-close svg { width: 20px; height: 20px; }
.site-menu-links { display: grid; }
.site-menu-links a {
  padding: 12px 0; border-top: 1px solid rgba(var(--color-neutral-shade), .14);
  font-family: var(--font-display); font-size: 22px; line-height: 1.2; letter-spacing: var(--tracking-display);
  color: inherit; text-decoration: none;
}
.site-menu-links a.is-current { color: var(--color-accent-text); }
.site-menu-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.site-menu-actions .btn { flex: 1 1 auto; white-space: normal; }

.site-pick { position: absolute; right: auto; max-height: 280px; overflow-y: auto; scrollbar-width: none; animation: site-drop .2s ease both; }
.site-option {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-radius: min(var(--radius-menu), 12px);
  font-size: 15px; cursor: pointer; transition: background-color .15s ease;
}
.site-option svg { width: 16px; height: 16px; flex: none; opacity: 0; }
.site-option:is(:hover, :focus-visible, .is-hover) { background: rgba(255, 255, 255, .55); outline: none; }
.site-option[aria-selected="true"] { font-weight: var(--weight-semibold); color: var(--color-accent-text); }
.site-option[aria-selected="true"] svg { opacity: 1; }
.pick-field.is-open > svg:last-child { transform: rotate(180deg); }

.site-toasts { position: absolute; right: 16px; bottom: 16px; left: auto; width: min(360px, calc(100% - 32px)); }
.site-layer--toast { top: 0; height: 100%; }

.is-sent > :not(.site-sent):not(.modal-head):not(i) { display: none !important; }
.site-sent { display: grid; justify-items: start; align-content: center; gap: 8px; padding: 8px 0; text-align: left; }
.site-sent-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--shape-round); background: var(--accent-solid); color: var(--color-on-tinted); }
.site-sent-icon svg { width: 20px; height: 20px; }
.site-sent strong { font-family: var(--font-display); font-size: 20px; letter-spacing: var(--tracking-display); }
.site-sent p { margin: 0; font-size: var(--text-sm); line-height: 1.55; color: var(--color-ink-soft); }
.site-sent .modal-actions { justify-self: stretch; }
.site-msg { display: block; margin-top: 6px; }
/* ---------- SITE PAGES: page head, prose, contact form, legal, posts, not found ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; letter-spacing: var(--tracking-control); color: var(--color-ink-soft); }
.crumbs a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.crumbs a:hover { color: var(--color-ink); }
.crumbs [aria-current] { color: var(--color-ink); }

.block-page-head { --block-max: 1120px; padding: clamp(28px, 5cqw, 72px) clamp(16px, 3cqw, 32px) clamp(20px, 3cqw, 40px); }
.pgh-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2.4cqw, 28px); }
.pgh-text { display: grid; gap: 14px; max-width: 860px; }
.pgh-title { font-family: var(--font-display); font-size: clamp(34px, 6cqw, 76px); font-weight: var(--weight-bold); line-height: 1.02; letter-spacing: var(--tracking-display); text-wrap: balance; }
.pgh-lead { max-width: 640px; font-size: var(--text-md); line-height: 1.55; color: var(--color-ink-soft); text-wrap: pretty; }
.pgh-facts { display: flex; flex-wrap: wrap; gap: 12px clamp(20px, 4cqw, 48px); margin: 0; }
.pgh-facts div { display: grid; gap: 2px; }
.pgh-facts dt { font-size: 13px; color: var(--color-ink-soft); }
.pgh-facts dd { margin: 0; font-weight: var(--weight-semibold); }
.pgh-photo { aspect-ratio: 21 / 8; margin-top: clamp(4px, 1cqw, 12px); }
@container (max-width: 640px) { .pgh-photo { aspect-ratio: 4 / 3; } }

.block-prose { --block-max: 1120px; padding: clamp(24px, 4cqw, 64px) clamp(16px, 3cqw, 32px) clamp(40px, 6cqw, 96px); }
.prs-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 660px); justify-content: space-between; gap: clamp(24px, 6cqw, 96px); align-items: start; }
.prs-side { position: sticky; top: 96px; display: grid; gap: 20px; }
.prs-photo { aspect-ratio: 4 / 5; }
.prs-facts { display: grid; margin: 0; }
.prs-facts div { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); }
.prs-facts dt { font-size: 13px; color: var(--color-ink-soft); }
.prs-facts dd { margin: 0; font-weight: var(--weight-semibold); }
.prs-text { display: grid; gap: 16px; font-size: var(--text-md); line-height: 1.7; }
.block-prose .prs-text h2 { margin-top: 18px; font-family: var(--font-display); font-size: clamp(22px, 2.6cqw, 30px); line-height: 1.15; letter-spacing: var(--tracking-display); }
.block-prose .prs-text h2:first-child { margin-top: 0; }
.prs-text p { color: var(--color-ink-soft); text-wrap: pretty; }
.prs-quote { margin: 12px 0; padding-left: 20px; border-left: 3px solid rgb(var(--color-primary)); font-family: var(--font-display); font-size: clamp(20px, 2.4cqw, 28px); line-height: 1.3; letter-spacing: var(--tracking-display); text-wrap: balance; }
@container (max-width: 820px) { .prs-grid { grid-template-columns: minmax(0, 1fr); } .prs-side { position: static; } .prs-photo { aspect-ratio: 16 / 10; } }

.block-contact-form { --block-max: 1120px; padding: clamp(24px, 4cqw, 64px) clamp(16px, 3cqw, 32px) clamp(40px, 6cqw, 96px); }
.cf-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 5cqw, 72px); align-items: start; }
.cf-info { display: grid; gap: 28px; }
.cf-details { display: grid; margin: 0; }
.cf-details div { display: grid; grid-template-columns: minmax(0, 110px) minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); }
.cf-details dt { font-size: 14px; color: var(--color-ink-soft); }
.cf-details dd { margin: 0; font-weight: var(--weight-medium); overflow-wrap: break-word; min-width: 0; }
.cf-details a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.cf-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: clamp(20px, 3cqw, 32px); isolation: isolate; }
.cf-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cf-card > .btn { justify-self: start; white-space: normal; }
.block-contact-form .cf-note { font-size: 13px; color: var(--color-ink-soft); }
.cf-card .pick-field { width: 100%; }
@container (max-width: 820px) { .cf-grid { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 520px) { .cf-row { grid-template-columns: minmax(0, 1fr); } .cf-card > .btn { justify-self: stretch; } }

.site-field { display: grid; gap: 6px; min-width: 0; }
.site-label { font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-control); color: var(--color-ink-soft); }
.site-field .field-wrap { display: grid; }
.site-field .field { width: 100%; }
.site-row { display: flex; flex-wrap: wrap; gap: 12px; }
.site-row > * { flex: 1 1 130px; min-width: 0; }
.site-row .pick-field { width: 100%; }

.block-legal { --block-max: 1120px; padding: clamp(16px, 3cqw, 48px) clamp(16px, 3cqw, 32px) clamp(40px, 6cqw, 96px); }
.lg-grid { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 680px); justify-content: space-between; gap: clamp(24px, 6cqw, 96px); align-items: start; }
.lg-toc { position: sticky; top: 96px; display: grid; gap: 2px; font-size: 15px; }
.lg-toc-label { margin-bottom: 8px; font-size: 13px; font-weight: var(--weight-semibold); color: var(--color-ink-soft); }
.lg-toc a { padding: 6px 0 6px 12px; border-left: 2px solid color-mix(in srgb, var(--color-ink) 14%, transparent); }
.lg-toc a:hover { border-left-color: rgb(var(--color-primary)); }
.lg-text { display: grid; gap: 28px; }
.block-legal .lg-updated { font-size: 14px; color: var(--color-ink-soft); }
.lg-part { display: grid; gap: 10px; }
.block-legal .lg-part h2 { display: flex; align-items: baseline; gap: 14px; font-family: var(--font-display); font-size: clamp(20px, 2.4cqw, 26px); line-height: 1.2; letter-spacing: var(--tracking-display); }
.lg-part h2 span { font-family: var(--font-sans); font-size: 14px; font-weight: var(--weight-semibold); color: var(--color-accent-text); }
.lg-part p { font-size: var(--text-md); line-height: 1.7; color: var(--color-ink-soft); text-wrap: pretty; }
.block-legal .lg-contact { padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); overflow-wrap: anywhere; }
.lg-contact a { text-decoration: underline; text-underline-offset: 4px; }
@container (max-width: 820px) { .lg-grid { grid-template-columns: minmax(0, 1fr); } .lg-toc { position: static; } }

.block-posts { --block-max: 1120px; padding: clamp(16px, 3cqw, 40px) clamp(16px, 3cqw, 32px) clamp(40px, 6cqw, 96px); }
.pst-inner { display: grid; gap: clamp(28px, 4cqw, 48px); }
.pst-lead { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(20px, 4cqw, 48px); align-items: center; }
.pst-lead .pst-photo { aspect-ratio: 4 / 3; }
.pst-copy { display: grid; gap: 12px; justify-items: start; }
.block-posts .pst-copy h2 { font-family: var(--font-display); font-size: clamp(26px, 3.6cqw, 44px); line-height: 1.08; letter-spacing: var(--tracking-display); text-wrap: balance; }
.pst-copy p, .pst-card p { color: var(--color-ink-soft); line-height: 1.55; text-wrap: pretty; }
.pst-date { font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-control); color: var(--color-accent-text); }
.pst-more { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--weight-semibold); }
.pst-more svg { width: 18px; height: 18px; transition: transform var(--motion-hover); }
.pst-lead:hover .pst-more svg { transform: translateX(4px); }
.pst-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3cqw, 32px); }
.pst-card { display: grid; align-content: start; gap: 10px; }
.pst-card .pst-photo { aspect-ratio: 3 / 2; margin-bottom: 4px; }
.pst-card .ph img, .pst-lead .ph img { transition: transform .6s ease; }
.pst-card:hover .ph img, .pst-lead:hover .ph img { transform: scale(1.03); }
.block-posts .pst-card h3 { font-family: var(--font-display); font-size: clamp(19px, 2cqw, 23px); line-height: 1.2; letter-spacing: var(--tracking-display); }
@container (max-width: 820px) { .pst-lead { grid-template-columns: minmax(0, 1fr); } .pst-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 560px) { .pst-grid { grid-template-columns: minmax(0, 1fr); } }

.block-not-found { padding: clamp(56px, 10cqw, 140px) clamp(16px, 3cqw, 32px); }
.nf-inner { display: grid; justify-items: center; gap: 16px; max-width: 620px; text-align: center; }
.nf-code { font-family: var(--font-display); font-size: clamp(88px, 18cqw, 200px); font-weight: var(--weight-bold); line-height: .9; letter-spacing: var(--tracking-display); color: rgb(var(--color-primary)); }
.nf-title { font-family: var(--font-display); font-size: clamp(26px, 3.6cqw, 40px); line-height: 1.1; letter-spacing: var(--tracking-display); text-wrap: balance; }
.block-not-found .nf-lead { margin-bottom: 8px; color: var(--color-ink-soft); line-height: 1.55; text-wrap: pretty; }
.nf-inner .btn { white-space: normal; }
.site-bag { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.site-bag li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.site-bag-photo { aspect-ratio: 1; border-radius: var(--shape-control); }
.site-bag li div { display: grid; gap: 2px; min-width: 0; }
.site-bag li span { font-size: 13px; color: var(--color-ink-soft); }
.site-bag li b { font-weight: var(--weight-semibold); white-space: nowrap; }
.modal .site-bag-total { display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); color: var(--color-ink); }
.modal .site-code { padding: 12px 14px; border-radius: var(--shape-control); background: color-mix(in srgb, var(--color-ink) 7%, transparent); font-family: ui-monospace, monospace; font-size: 14px; color: var(--color-ink); overflow-wrap: anywhere; }
.site-list { display: grid; gap: 8px; margin: 0; padding-left: 20px; font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-soft); }
.site-results { display: grid; }
.site-results a { padding: 10px 2px; border-top: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); color: inherit; text-decoration: none; font-weight: var(--weight-medium); }
.site-results a:hover { color: var(--color-accent-text); }
.site-plan { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; aspect-ratio: 16 / 9; padding: 4px; border: 2px solid color-mix(in srgb, var(--color-ink) 40%, transparent); }
.site-plan i { border: 1px solid color-mix(in srgb, var(--color-ink) 30%, transparent); background: color-mix(in srgb, var(--color-ink) 4%, transparent); }
.site-plan i:first-child { grid-row: span 2; }
.block-cv-print { padding: 0 clamp(16px, 3cqw, 32px) clamp(40px, 6cqw, 80px); }
.block-cv-print .block-inner { max-width: 1120px; }
.site-video { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: 13px; color: var(--color-ink-soft); }
.site-video-bar { height: 6px; border-radius: var(--shape-round); background: color-mix(in srgb, var(--color-ink) 14%, transparent); overflow: hidden; }
.site-video-bar i { display: block; width: 100%; height: 100%; background: rgb(var(--color-primary)); transform: scaleX(0); transform-origin: left; animation: site-video 60s linear forwards paused; }
.site-video.is-playing .site-video-bar i { animation-play-state: running; }
@keyframes site-video { to { transform: scaleX(1); } }
/* an inner page: the first block after the page head starts close to it, whatever its own top space */
.layout .block-page-head + .block { padding-top: clamp(8px, 1.6cqw, 20px); }
/* overlays blur what is behind a little more than a card on the page does; a kit that draws them solid keeps its own */
:where(.site-layer) :is(.modal, .site-menu) { --blur: 26px; }
@media (prefers-reduced-motion: reduce) {
  .site-layer, .site-layer * { animation: none !important; }
}
.site-layer :is(.modal, .site-menu):focus { outline: none; }
/* ---------- SIXTH SERIES A: law hero, practice, fees, gym hero, timetable, cowork hero, floor plan, bouquets, delivery, exhibition, what is on, museum tickets ---------- */
.block-law-hero { --block-max: 1180px; padding: clamp(32px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.lh-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 6cqw, 88px); align-items: center; }
.lh-copy { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 22px; }
.lh-copy > .badge { max-width: 100%; white-space: normal; }
.lh-title { font-family: var(--font-display); font-size: clamp(38px, 6.2cqw, 84px); font-weight: var(--weight-bold); line-height: 1.02; letter-spacing: var(--tracking-display); text-wrap: balance; }
.lh-lead { max-width: 560px; font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); text-wrap: pretty; }
.lh-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.lh-actions .btn { white-space: normal; }
.lh-facts { display: flex; flex-wrap: wrap; gap: 14px clamp(24px, 4cqw, 48px); margin: 8px 0 0; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--color-ink) 16%, transparent); }
.lh-facts div { display: grid; gap: 2px; }
.lh-facts dt { font-size: 13px; color: var(--color-ink-soft); }
.lh-facts dd { margin: 0; font-family: var(--font-display); font-size: 22px; letter-spacing: var(--tracking-display); }
.lh-side { position: relative; }
.lh-photo { aspect-ratio: 4 / 5; }
.lh-who { position: absolute; left: -24px; bottom: 28px; display: grid; gap: 2px; margin: 0; padding: 14px 18px; isolation: isolate; }
.lh-who span { font-size: 13px; color: var(--color-ink-soft); }
@container (max-width: 820px) { .lh-grid { grid-template-columns: minmax(0, 1fr); } .lh-photo { aspect-ratio: 4 / 3; } .lh-who { left: 12px; bottom: 12px; } }

.block-practice { --block-max: 1120px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.pr-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 6cqw, 80px); align-items: start; }
.pr-side { position: sticky; top: 96px; display: grid; gap: 24px; }
.pr-photo { aspect-ratio: 4 / 3; }
.pr-list { display: grid; }
.pr-item { border-top: 1px solid color-mix(in srgb, var(--color-ink) 16%, transparent); }
.pr-item:last-child { border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 16%, transparent); }
.pr-item summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 20px 0; cursor: pointer; list-style: none; }
.pr-item summary::-webkit-details-marker { display: none; }
.pr-no { font-family: var(--font-display); font-size: 15px; color: var(--color-accent-text); font-variant-numeric: tabular-nums; }
.pr-name { display: grid; gap: 2px; min-width: 0; }
.pr-name strong { font-family: var(--font-display); font-size: clamp(20px, 2.4cqw, 26px); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); }
.pr-name span { font-size: 14px; color: var(--color-ink-soft); }
.pr-item summary > svg { width: 20px; height: 20px; color: var(--color-ink-soft); transition: transform var(--motion-hover); }
.pr-item[open] summary > svg { transform: rotate(45deg); }
.pr-body { display: grid; gap: 14px; padding: 0 0 22px 42px; }
.pr-body ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pr-body li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; color: var(--color-ink-soft); }
.pr-body li svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: rgb(var(--color-primary)); }
.block-practice .pr-fee { font-weight: var(--weight-semibold); }
@container (max-width: 820px) { .pr-grid { grid-template-columns: minmax(0, 1fr); } .pr-side { position: static; } }
@container (max-width: 480px) { .pr-body { padding-left: 0; } .pr-item summary { gap: 12px; } }

.block-fees { --block-max: 1120px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.fee-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(20px, 3cqw, 36px); }
.fee-panel:not([hidden]) { display: grid; }
.fee-panel-title { display: none; }
.fee-row { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) minmax(0, 170px) minmax(0, 150px); align-items: baseline; gap: 20px; padding: 18px 0; border-top: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); }
.fee-name { font-family: var(--font-display); font-size: 19px; letter-spacing: var(--tracking-display); }
.block-fees .fee-what { color: var(--color-ink-soft); line-height: 1.5; }
.fee-time { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--color-ink-soft); }
.fee-time svg { width: 15px; height: 15px; flex: none; }
.fee-price { justify-self: end; font-family: var(--font-display); font-size: 20px; text-align: right; }
.block-fees .fee-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); font-size: 14px; color: var(--color-ink-soft); }
.fee-note svg { flex: none; width: 18px; height: 18px; }
@container (max-width: 820px) { .fee-row { grid-template-columns: minmax(0, 1fr) auto; } .fee-what { grid-column: 1 / -1; grid-row: 2; } .fee-time { grid-column: 1; grid-row: 3; } .fee-price { grid-column: 2; grid-row: 1; } }
@container (max-width: 640px) { .block-fees .segmented { display: none; } .fee-panel[hidden] { display: grid; } .fee-panel-title { display: block; margin-top: 18px; font-family: var(--font-display); font-size: 22px; } }

.block-gym-hero { position: relative; isolation: isolate; overflow: clip; color: #fff; }
.gh-photo { position: absolute; inset: 0; border-radius: 0; z-index: -1; }
.gh-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .15) 40%, rgba(0, 0, 0, .7)); }
.gh-inner { display: grid; align-content: space-between; gap: 28px; min-height: min(var(--screen-h, 100svh), 900px); padding: clamp(24px, 4cqw, 48px) clamp(16px, 3cqw, 40px) clamp(20px, 3cqw, 40px); }
.gh-words { display: grid; margin: 0; font-family: var(--font-display); font-size: clamp(56px, 15cqw, 220px); font-weight: var(--weight-bold); line-height: .86; letter-spacing: var(--tracking-display); text-transform: uppercase; }
.gh-words em { margin-top: .25em; font-size: .28em; font-style: normal; line-height: 1; text-transform: none; }
.gh-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); align-items: end; gap: 24px; }
.gh-lead { max-width: 520px; font-size: var(--text-md); line-height: 1.55; }
.gh-card { display: grid; gap: 8px; padding: 20px; color: var(--color-ink); isolation: isolate; }
.gh-card strong { font-family: var(--font-display); font-size: 22px; letter-spacing: var(--tracking-display); }
.gh-card > span { color: var(--color-ink-soft); }
.gh-card .btn { margin-top: 6px; white-space: normal; }
.gh-card small { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-ink-soft); }
.gh-card small svg { width: 14px; height: 14px; }
@container (max-width: 700px) { .gh-bottom { grid-template-columns: minmax(0, 1fr); } }

.block-timetable { --block-max: 1180px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.tt-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(20px, 3cqw, 36px); }
.tt-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-week { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.tt-day h3 { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--color-ink); font-family: var(--font-display); font-size: 18px; letter-spacing: var(--tracking-display); }
.tt-day ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tt-class { display: grid; gap: 2px; width: 100%; padding: 10px 12px; border: 0; border-left: 4px solid rgb(var(--color-primary)); border-radius: var(--shape-inner); background: color-mix(in srgb, rgb(var(--color-primary)) 10%, transparent);
            font: inherit; color: var(--color-ink); text-align: left; cursor: pointer; transition: opacity .2s ease, transform var(--motion-hover); }
.tt-class[data-type="str"] { border-left-color: rgb(var(--color-secondary)); background: color-mix(in srgb, rgb(var(--color-secondary)) 12%, transparent); }
.tt-class[data-type="kid"] { border-left-color: var(--color-ink-soft); background: color-mix(in srgb, var(--color-ink) 7%, transparent); }
.tt-class:is(:hover, .is-hover) { transform: translateY(-2px); }
.tt-class:focus-visible { outline: 2px solid rgb(var(--color-primary)); outline-offset: 2px; }
.tt-time { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--color-ink-soft); }
.tt-class strong { font-size: 15px; line-height: 1.25; }
.tt-coach { font-size: 13px; color: var(--color-ink-soft); }
.block-timetable:not([data-kind=""]) .tt-class { opacity: .28; }
.block-timetable[data-kind="box"] .tt-class[data-type="box"], .block-timetable[data-kind="str"] .tt-class[data-type="str"], .block-timetable[data-kind="kid"] .tt-class[data-type="kid"] { opacity: 1; }
@container (max-width: 900px) { .tt-week { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; } }
@container (max-width: 520px) { .tt-week { grid-template-columns: minmax(0, 1fr); } }

.block-cowork-hero { --block-max: 1180px; padding: clamp(32px, 5cqw, 80px) clamp(16px, 3cqw, 32px); }
.cwh-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 5cqw, 64px); align-items: center; }
.cwh-copy { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 18px; }
.cwh-title { font-family: var(--font-display); font-size: clamp(36px, 5.6cqw, 72px); font-weight: var(--weight-bold); line-height: 1.04; letter-spacing: var(--tracking-display); text-wrap: balance; }
.cwh-lead { max-width: 540px; font-size: var(--text-md); line-height: 1.55; color: var(--color-ink-soft); }
.cwh-photo { width: 100%; aspect-ratio: 16 / 9; margin-top: 8px; }
.cwh-tiles { display: grid; gap: 14px; }
.cw-tile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 20px; isolation: isolate; transition: transform var(--motion-hover); }
.cw-tile:is(:hover, .is-hover) { transform: translateY(-3px); }
.cw-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--shape-round); background: color-mix(in srgb, rgb(var(--color-primary)) 14%, transparent); color: var(--color-accent-text); }
.cw-icon svg { width: 20px; height: 20px; }
.cw-name { display: grid; gap: 2px; min-width: 0; }
.cw-name strong { font-family: var(--font-display); font-size: 20px; letter-spacing: var(--tracking-display); }
.cw-name span { font-size: 14px; color: var(--color-ink-soft); }
.cw-price { font-size: 14px; color: var(--color-ink-soft); white-space: nowrap; }
.cw-price b { font-family: var(--font-display); font-size: 24px; color: var(--color-ink); }
.cw-tile > svg { width: 18px; height: 18px; }
@container (max-width: 820px) { .cwh-grid { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 480px) { .cw-tile { grid-template-columns: auto minmax(0, 1fr); } .cw-price { grid-column: 2; } .cw-tile > svg { display: none; } }

.block-floorplan { --block-max: 1180px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.fp-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 5cqw, 64px); align-items: start; }
.fp-plan { position: relative; aspect-ratio: 4 / 3; padding: 14px; isolation: isolate; }
.fp-svg { display: block; width: 100%; height: 100%; }
.fp-zone { fill: color-mix(in srgb, rgb(var(--color-primary)) 8%, transparent); stroke: var(--color-ink); stroke-width: 2.5; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .2s ease; }
.fp-zone:hover { fill: color-mix(in srgb, rgb(var(--color-primary)) 18%, transparent); }
.fp-label { position: absolute; transform: translate(-50%, -50%); margin: 7px; font-family: var(--font-display); font-size: clamp(12px, 1.5cqw, 16px); letter-spacing: var(--tracking-display); font-weight: var(--weight-semibold); text-align: center; pointer-events: none; }
.fp-side { display: grid; gap: 24px; }
.fp-list { display: grid; margin: 0; padding: 0; list-style: none; }
.fp-list li { border-top: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); }
.fp-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; width: 100%; padding: 14px 0; border: 0; background: transparent; font: inherit; color: var(--color-ink); text-align: left; cursor: pointer; }
.fp-item span { font-size: 14px; color: var(--color-ink-soft); }
.fp-item.is-active strong { color: var(--color-accent-text); }
.block-floorplan .fp-text { display: none; padding-bottom: 14px; color: var(--color-ink-soft); line-height: 1.5; }
.block-floorplan:is([data-zone="open"]) .fp-zone[data-zone="open"], .block-floorplan[data-zone="quiet"] .fp-zone[data-zone="quiet"], .block-floorplan[data-zone="calls"] .fp-zone[data-zone="calls"],
.block-floorplan[data-zone="meet"] .fp-zone[data-zone="meet"], .block-floorplan[data-zone="office"] .fp-zone[data-zone="office"], .block-floorplan[data-zone="kitchen"] .fp-zone[data-zone="kitchen"] { fill: color-mix(in srgb, rgb(var(--color-primary)) 30%, transparent); stroke: rgb(var(--color-primary)); }
.block-floorplan[data-zone="open"] .fp-text[data-zone="open"], .block-floorplan[data-zone="quiet"] .fp-text[data-zone="quiet"], .block-floorplan[data-zone="calls"] .fp-text[data-zone="calls"],
.block-floorplan[data-zone="meet"] .fp-text[data-zone="meet"], .block-floorplan[data-zone="office"] .fp-text[data-zone="office"], .block-floorplan[data-zone="kitchen"] .fp-text[data-zone="kitchen"] { display: block; }
@container (max-width: 820px) { .fp-grid { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 520px) { .fp-label { font-size: 12px; margin: 2px; max-width: 30%; line-height: 1.15; } .fp-plan { aspect-ratio: 1; } }

.block-bouquets { --block-max: 1180px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.bq-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4cqw, 28px); margin-top: clamp(20px, 3cqw, 36px); }
.bq-card { display: grid; grid-template-rows: auto 1fr; gap: 14px; }
.bq-photo { aspect-ratio: 3 / 4; }
.bq-body { display: grid; grid-template-rows: auto 1fr auto auto; gap: 10px; }   /* price and button line up across cards */
.block-bouquets .bq-body h3 { font-family: var(--font-display); font-size: 21px; letter-spacing: var(--tracking-display); }
.block-bouquets .bq-body p { color: var(--color-ink-soft); line-height: 1.5; font-size: 15px; }
.bq-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bq-sizes { display: flex; gap: 6px; }
.bq-sizes .badge { min-width: 38px; justify-content: center; }
.bq-price { font-family: var(--font-display); font-size: 20px; white-space: nowrap; }
.bq-body > .btn { justify-self: start; white-space: normal; }
@container (max-width: 980px) { .bq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 480px) { .bq-grid { grid-template-columns: minmax(0, 1fr); } .bq-photo { aspect-ratio: 4 / 3; } }

.block-delivery { --block-max: 1120px; padding: clamp(24px, 4cqw, 56px) clamp(16px, 3cqw, 32px); }
.dl-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 20px clamp(24px, 4cqw, 56px); padding: clamp(22px, 3.4cqw, 44px); isolation: isolate; }
.dl-copy { display: grid; gap: 10px; align-content: start; }
.dl-days { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-content: start; }
@container (max-width: 820px) { .dl-days { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); } }
.dl-days .badge { justify-content: center; padding-block: 10px; text-align: center; }
.dl-days .badge > span { display: grid; gap: 2px; font-weight: var(--weight-semibold); }
.dl-days small { font-size: 12px; font-weight: var(--weight-medium); opacity: .8; }
.dl-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; grid-column: 1 / -1; margin: 0; padding: 18px 0 0; list-style: none; border-top: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); }
.dl-facts li { display: flex; gap: 10px; align-items: flex-start; }
.dl-facts svg { flex: none; width: 20px; height: 20px; color: rgb(var(--color-primary)); }
.dl-facts span { display: grid; gap: 2px; font-size: 14px; color: var(--color-ink-soft); }
.dl-facts strong { color: var(--color-ink); font-size: 15px; }
.dl-card > .btn { grid-column: 1 / -1; justify-self: start; white-space: normal; }
@container (max-width: 820px) { .dl-card { grid-template-columns: minmax(0, 1fr); } .dl-facts { grid-template-columns: minmax(0, 1fr); } }

.block-exhibit-hero { --block-max: 1240px; padding: clamp(28px, 5cqw, 72px) clamp(16px, 3cqw, 32px); }
.xh-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 5cqw, 64px); align-items: end; }
.xh-copy > .badge, .cwh-copy > .badge { max-width: 100%; white-space: normal; }
.xh-copy { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 18px; }
.xh-title { display: grid; font-family: var(--font-display); font-size: clamp(56px, 11cqw, 168px); font-weight: var(--weight-bold); line-height: .9; letter-spacing: var(--tracking-display); }
.xh-title span:last-child { padding-left: .6em; font-style: italic; font-weight: var(--weight-medium); }
.xh-dates { font-size: clamp(18px, 2cqw, 24px); font-weight: var(--weight-semibold); }
.xh-sub { max-width: 480px; font-size: var(--text-md); line-height: 1.55; color: var(--color-ink-soft); }
.xh-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.xh-actions .btn { white-space: normal; }
.xh-side { display: grid; gap: 12px; }
.xh-photo { aspect-ratio: 3 / 4; }
.xh-today { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: var(--weight-semibold); }
.xh-today svg { width: 16px; height: 16px; color: rgb(var(--color-primary)); }
.xh-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding-top: 18px; border-top: 2px solid var(--color-ink); }
.xh-facts div { display: grid; gap: 2px; }
.xh-facts dt { font-size: 13px; color: var(--color-ink-soft); }
.xh-facts dd { margin: 0; font-family: var(--font-display); font-size: clamp(18px, 2cqw, 24px); }
@container (max-width: 760px) { .xh-grid { grid-template-columns: minmax(0, 1fr); } .xh-photo { aspect-ratio: 4 / 3; } .xh-title span:last-child { padding-left: 0; } }
@container (max-width: 480px) { .xh-facts { grid-template-columns: minmax(0, 1fr); } }

.block-whats-on { --block-max: 1180px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.wo-title { margin-bottom: clamp(16px, 2.6cqw, 32px); }
.wo-list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 16%, transparent); }
.wo-row { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr) minmax(0, 170px) minmax(0, 140px) 20px; align-items: center; gap: 18px; padding: 22px 0; border-top: 1px solid color-mix(in srgb, var(--color-ink) 16%, transparent); }
.wo-name { font-family: var(--font-display); font-size: clamp(22px, 3cqw, 38px); letter-spacing: var(--tracking-display); line-height: 1.1; }
.wo-dates, .wo-floor { font-size: 14px; color: var(--color-ink-soft); }
.wo-row > svg { width: 20px; height: 20px; transition: transform var(--motion-hover); }
.wo-row:hover > svg { transform: translateX(4px); }
.wo-peek { position: absolute; right: 12%; top: 50%; width: 180px; aspect-ratio: 4 / 3; transform: translateY(-50%) scale(.9); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; z-index: 2; }
.wo-row:hover .wo-peek { opacity: 1; transform: translateY(-50%) scale(1); }
@container (max-width: 760px) { .wo-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; } .wo-row > .badge { grid-column: 1 / -1; justify-self: start; } .wo-name { grid-column: 1; } .wo-row > svg { grid-column: 2; grid-row: 2; } .wo-dates, .wo-floor { grid-column: 1 / -1; } .wo-peek { display: none; } }

.block-museum-tickets { --block-max: 1120px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.mt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5cqw, 64px); align-items: center; }
.mt-photo { aspect-ratio: 4 / 5; }
.mt-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: clamp(22px, 3.4cqw, 40px); isolation: isolate; }
.block-museum-tickets .mt-lead { color: var(--color-ink-soft); line-height: 1.5; }
.mt-card .pick-field { width: 100%; }
.mt-kinds { display: grid; margin: 0; padding: 0; list-style: none; }
.mt-kinds li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); }
.mt-kinds li > span:first-child { display: grid; gap: 2px; min-width: 0; }
.mt-kinds small { font-size: 13px; color: var(--color-ink-soft); }
.mt-step { display: inline-flex; align-items: center; gap: 10px; }
.mt-step b { min-width: 1.4em; text-align: center; font-variant-numeric: tabular-nums; }
.block-museum-tickets .mt-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 2px solid var(--color-ink); }
.mt-total strong { font-family: var(--font-display); font-size: 26px; }
.mt-card > .btn { white-space: normal; }
@container (max-width: 760px) { .mt-grid { grid-template-columns: minmax(0, 1fr); } .mt-photo { aspect-ratio: 16 / 9; } }
/* ---------- SIXTH SERIES B: wine hero, wines, tasting, camp weeks, camp day, cuts, barber booking, move quote, film hero, film programme ---------- */
.block-wine-hero { padding-bottom: clamp(32px, 5cqw, 72px); }
.vh-stage { position: relative; isolation: isolate; }
.vh-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .55)); pointer-events: none; }
.vh-photo { aspect-ratio: 21 / 8; border-radius: 0; }
.vh-inner { --block-max: 1200px; padding: 0 clamp(16px, 3cqw, 32px); }
.vh-name { position: absolute; left: clamp(16px, 3cqw, 40px); right: clamp(16px, 3cqw, 40px); bottom: clamp(12px, 2.4cqw, 32px); z-index: 1; margin: 0; font-family: var(--font-display); font-size: clamp(56px, 13cqw, 190px); font-weight: var(--weight-bold); line-height: .9; letter-spacing: var(--tracking-display); color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.vh-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(24px, 5cqw, 64px); align-items: end; margin-top: clamp(24px, 3.4cqw, 44px); }
.vh-copy { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 16px; }
.vh-copy > .badge { max-width: 100%; white-space: normal; }
.vh-lead { max-width: 560px; font-size: var(--text-md); line-height: 1.55; color: var(--color-ink-soft); }
.vh-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.vh-actions .btn { white-space: normal; }
.vh-facts { display: grid; gap: 12px; margin: 0; }
.vh-facts div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 16%, transparent); }
.vh-facts dt { color: var(--color-ink-soft); }
.vh-facts dd { margin: 0; font-weight: var(--weight-semibold); text-align: right; }
@container (max-width: 760px) { .vh-photo { aspect-ratio: 4 / 3; } .vh-grid { grid-template-columns: minmax(0, 1fr); } }

.block-wines { --block-max: 1180px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.wn-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(20px, 3cqw, 36px); }
.wn-panel:not([hidden]) { display: grid; }
.wn-panel { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5cqw, 64px); align-items: start; }
.wn-photo { aspect-ratio: 4 / 5; position: sticky; top: 96px; }
.wn-panel-title { display: none; }
.wn-list { display: grid; }
.wn-wine { display: grid; gap: 10px; justify-items: start; padding: 24px 0; border-top: 1px solid color-mix(in srgb, var(--color-ink) 16%, transparent); }
.wn-wine:first-of-type { padding-top: 0; border-top: 0; }
.wn-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; width: 100%; }
.block-wines .wn-top h4 { font-family: var(--font-display); font-size: clamp(24px, 3cqw, 34px); letter-spacing: var(--tracking-display); line-height: 1.1; }
.wn-top h4 span { font-family: var(--font-sans); font-size: 15px; font-weight: var(--weight-medium); color: var(--color-ink-soft); }
.wn-price { font-family: var(--font-display); font-size: 22px; white-space: nowrap; }
.block-wines .wn-grape { color: var(--color-ink-soft); }
.wn-notes { display: flex; flex-wrap: wrap; gap: 6px; }
.block-wines .wn-pair { display: flex; gap: 8px; align-items: center; font-size: 15px; }
.wn-pair svg { width: 16px; height: 16px; flex: none; color: rgb(var(--color-primary)); }
@container (max-width: 760px) { .wn-panel { grid-template-columns: minmax(0, 1fr); } .wn-photo { position: static; aspect-ratio: 16 / 9; } }
@container (max-width: 560px) { .block-wines .segmented { display: none; } .wn-panel[hidden] { display: grid; margin-top: 28px; } .wn-panel-title { display: block; margin-bottom: 12px; font-family: var(--font-display); font-size: 22px; } }

.block-tasting { --block-max: 1120px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.ts-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5cqw, 64px); align-items: start; }
.ts-side { display: grid; gap: 24px; }
.ts-photo { aspect-ratio: 4 / 3; }
.ts-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: clamp(20px, 3cqw, 32px); isolation: isolate; }
.ts-options { display: grid; gap: 10px; }
.ts-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 14px 16px; border: 1.5px solid color-mix(in srgb, var(--color-ink) 16%, transparent); border-radius: var(--shape-inner);
             background: transparent; font: inherit; color: var(--color-ink); text-align: left; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.ts-option span { grid-column: 1; font-size: 14px; color: var(--color-ink-soft); }
.ts-option b { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--font-display); font-size: 18px; white-space: nowrap; }
.ts-option:is(:hover, .is-hover) { border-color: color-mix(in srgb, var(--color-ink) 40%, transparent); }
.ts-option.is-selected { border-color: rgb(var(--color-primary)); background: color-mix(in srgb, rgb(var(--color-primary)) 9%, transparent); }
.ts-option:focus-visible { outline: 2px solid rgb(var(--color-primary)); outline-offset: 2px; }
.ts-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ts-row .pick-field { width: 100%; }
.block-tasting .ts-sum { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--color-ink) 16%, transparent); }
.ts-sum strong { font-family: var(--font-display); font-size: 24px; }
.ts-card > .btn { white-space: normal; }
@container (max-width: 820px) { .ts-grid { grid-template-columns: minmax(0, 1fr); } }

.block-camp-weeks { --block-max: 1180px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.kc-weeks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4cqw, 28px); margin-top: clamp(20px, 3cqw, 36px); }
.kc-week { display: grid; grid-template-rows: auto 1fr; overflow: hidden; isolation: isolate; }
.kc-photo { aspect-ratio: 16 / 10; border-radius: 0; }
.kc-body { display: grid; align-content: start; justify-items: start; gap: 8px; padding: 18px 20px 22px; }
.block-camp-weeks .kc-dates { font-size: 14px; font-weight: var(--weight-semibold); color: var(--color-accent-text); }
.block-camp-weeks .kc-body h3 { font-family: var(--font-display); font-size: 23px; letter-spacing: var(--tracking-display); }
.block-camp-weeks .kc-text { color: var(--color-ink-soft); line-height: 1.5; }
.kc-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.kc-body .btn { white-space: normal; }
.kc-full { font-size: 14px; color: var(--color-ink-soft); }
.kc-week.is-full .kc-photo { filter: grayscale(.8); }
@container (max-width: 900px) { .kc-weeks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 560px) { .kc-weeks { grid-template-columns: minmax(0, 1fr); } }

.block-camp-day { --block-max: 1180px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.cd-line { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 16px; margin: clamp(28px, 4cqw, 48px) 0 0; padding: 0; list-style: none; }
.cd-line::before { content: ""; position: absolute; left: 4%; right: 4%; top: 25px; height: 3px; border-radius: 3px; background: color-mix(in srgb, rgb(var(--color-primary)) 35%, transparent); }
.cd-line li { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; }
.cd-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--shape-round); background: rgb(var(--color-primary)); color: var(--color-on-tinted); box-shadow: 0 0 0 6px var(--page-bg, #fff); }
.cd-icon svg { width: 22px; height: 22px; }
.cd-time { margin-top: 6px; font-size: 14px; font-weight: var(--weight-semibold); color: var(--color-accent-text); font-variant-numeric: tabular-nums; }
.cd-line strong { font-family: var(--font-display); font-size: 18px; line-height: 1.2; }
.cd-line p { font-size: 14px; line-height: 1.45; color: var(--color-ink-soft); }
@container (max-width: 900px) {
  .cd-line { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cd-line::before { left: 25px; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; }
  .cd-line li { grid-template-columns: 52px minmax(0, 1fr); justify-items: start; column-gap: 16px; row-gap: 2px; text-align: left; }
  .cd-icon { grid-row: 1 / span 3; }
  .cd-time { margin-top: 0; }
}

.block-cuts { --block-max: 1120px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.cu-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 5cqw, 64px); align-items: start; }
.cu-lists { display: grid; gap: 28px; }
.cu-group h3 { margin-bottom: 8px; font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-accent-text); }
.cu-group ul { display: grid; margin: 0; padding: 0; list-style: none; }
.cu-group li { display: grid; grid-template-columns: auto auto minmax(12px, 1fr) auto; align-items: baseline; gap: 10px; padding: 10px 0; }
.cu-name { font-family: var(--font-display); font-size: 20px; letter-spacing: var(--tracking-display); }
.cu-time { font-size: 13px; color: var(--color-ink-soft); white-space: nowrap; }
.cu-group li i { border-bottom: 2px dotted color-mix(in srgb, var(--color-ink) 30%, transparent); transform: translateY(-4px); }
.cu-price { font-family: var(--font-display); font-size: 20px; }
.block-cuts .cu-note { font-size: 14px; color: var(--color-ink-soft); }
.cu-photo { aspect-ratio: 3 / 4; position: sticky; top: 96px; }
@container (max-width: 760px) { .cu-grid { grid-template-columns: minmax(0, 1fr); } .cu-photo { position: static; aspect-ratio: 16 / 9; order: -1; } }
@container (max-width: 420px) { .cu-group li { grid-template-columns: minmax(0, 1fr) auto; } .cu-group li i { display: none; } .cu-time { grid-row: 2; } }

.block-barber-book { --block-max: 1120px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.bb-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding: clamp(22px, 3.4cqw, 44px); isolation: isolate; }
.bb-label { margin-bottom: 10px; font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-control); color: var(--color-ink-soft); }
.bb-barbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bb-barber { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 0 12px; padding: 12px; border: 1.5px solid color-mix(in srgb, var(--color-ink) 16%, transparent);
             border-radius: var(--shape-inner); background: transparent; font: inherit; color: var(--color-ink); text-align: left; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.bb-barber .bb-face { grid-row: 1 / span 2; width: 56px; aspect-ratio: 1; border-radius: var(--shape-round); }
.bb-any { display: grid; place-items: center; background: color-mix(in srgb, var(--color-ink) 8%, transparent); }
.bb-any svg { width: 24px; height: 24px; }
.bb-barber strong { align-self: end; }
.bb-barber span:not(.bb-face) { align-self: start; font-size: 13px; color: var(--color-ink-soft); }
.bb-barber:is(:hover, .is-hover) { border-color: color-mix(in srgb, var(--color-ink) 40%, transparent); }
.bb-barber.is-selected { border-color: rgb(var(--color-primary)); background: color-mix(in srgb, rgb(var(--color-primary)) 9%, transparent); }
.bb-barber:focus-visible { outline: 2px solid rgb(var(--color-primary)); outline-offset: 2px; }
.bb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bb-chips .badge { min-width: 70px; justify-content: center; padding-block: 8px; }
.bb-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--color-ink) 16%, transparent); }
.block-barber-book .bb-sum { display: flex; gap: 10px; align-items: center; font-size: var(--text-md); }
.bb-sum svg { width: 20px; height: 20px; flex: none; color: rgb(var(--color-primary)); }
.bb-foot .btn { white-space: normal; }
@container (max-width: 760px) { .bb-barbers { grid-template-columns: minmax(0, 1fr); } }

.block-move-quote { --block-max: 1180px; padding: clamp(28px, 5cqw, 80px) clamp(16px, 3cqw, 32px); }
.mq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5cqw, 64px); align-items: start; }
.mq-copy { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 18px; }
.mq-copy > .badge { max-width: 100%; white-space: normal; }
.mq-title { font-family: var(--font-display); font-size: clamp(36px, 5.4cqw, 68px); font-weight: var(--weight-bold); line-height: 1.04; letter-spacing: var(--tracking-display); text-wrap: balance; }
.mq-lead { max-width: 520px; font-size: var(--text-md); line-height: 1.55; color: var(--color-ink-soft); }
.mq-photo { width: 100%; aspect-ratio: 16 / 10; }
.mq-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: clamp(20px, 3cqw, 32px); isolation: isolate; }
.mq-label { margin-top: 6px; font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-control); color: var(--color-ink-soft); }
.mq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mq-extras { display: grid; margin: 0; padding: 0; list-style: none; }
.mq-extras li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); }
.mq-extras small { font-size: 13px; color: var(--color-ink-soft); }
.block-move-quote .mq-price { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 6px; padding-top: 14px; border-top: 2px solid var(--color-ink); }
.mq-price strong { font-family: var(--font-display); font-size: clamp(24px, 3cqw, 32px); white-space: nowrap; }
.mq-card > .btn { white-space: normal; }
@container (max-width: 860px) { .mq-grid { grid-template-columns: minmax(0, 1fr); } }

.block-film-hero { position: relative; isolation: isolate; overflow: clip; color: #fff; }
.fh-photo { position: absolute; inset: 0; border-radius: 0; z-index: -1; }
.fh-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .25) 45%, rgba(0, 0, 0, .8)); }
.fh-inner { display: grid; align-content: space-between; gap: 24px; min-height: min(var(--screen-h, 100svh), 860px); padding: clamp(24px, 4cqw, 48px) clamp(16px, 3cqw, 40px); }
.fh-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; font-size: clamp(14px, 1.6cqw, 18px); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; }
.fh-name { margin: 0 1%; line-height: 0; }
.fh-name svg { display: block; width: 100%; height: auto; overflow: visible; }
.fh-name text { fill: currentColor; font-family: var(--font-display); font-size: 160px; font-weight: var(--weight-bold); }
.fh-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px; }
.fh-lead { max-width: 560px; font-size: var(--text-md); line-height: 1.55; }
.fh-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.fh-actions .btn { white-space: normal; }
@container (max-width: 760px) { .fh-bottom { grid-template-columns: minmax(0, 1fr); } }

.block-film-programme { --block-max: 1180px; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 32px); }
.fp2-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(20px, 3cqw, 36px); }
.fp2-day { display: none; }
.fp2-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4cqw, 28px); }
.fp2-film { display: grid; gap: 12px; align-content: start; }
.fp2-still { aspect-ratio: 16 / 9; }
.fp2-body { display: grid; justify-items: start; gap: 6px; }
.fp2-when { display: flex; gap: 10px; align-items: baseline; font-size: 14px; }
.fp2-when b { font-family: var(--font-display); font-size: 20px; font-variant-numeric: tabular-nums; }
.fp2-when span { color: var(--color-accent-text); font-weight: var(--weight-semibold); }
.block-film-programme .fp2-body h4 { font-family: var(--font-display); font-size: clamp(20px, 2.2cqw, 26px); letter-spacing: var(--tracking-display); line-height: 1.15; }
.block-film-programme .fp2-meta { font-size: 14px; color: var(--color-ink-soft); margin-bottom: 4px; }
@container (max-width: 900px) { .fp2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 560px) { .fp2-grid { grid-template-columns: minmax(0, 1fr); } .block-film-programme .segmented { display: none; } .fp2-panel[hidden] { display: block; margin-top: 28px; } .fp2-day { display: block; margin-bottom: 12px; font-family: var(--font-display); font-size: 22px; } }
.hsp-title.is-long { font-size: clamp(44px, 7cqw, 112px); }
@container (max-width: 640px) { .hsp-title.is-long { font-size: clamp(40px, 13cqw, 64px); } }
.tix-stub .btn { white-space: normal; }

.site-row .field-wrap, .site-row .field { min-width: 0; width: 100%; }
.vh-stage > .vh-photo { position: relative; display: block; width: 100%; }
.block-move-quote .mq-price { flex-wrap: wrap; }

/* ---------- SEVENTH SERIES, shared: lines that rise, masks that open, films, magnetic buttons, page turns ---------- */
.rv-ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.rv-ln > span { display: inline-block; }
.ph-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.mgn { display: inline-flex; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.mgn.is-pulled { transform: translate(var(--mx, 0), var(--my, 0)); }
@media (prefers-reduced-motion: no-preference) {
  .layout.rv-on [data-rv="lines"]:not(.is-in) { opacity: 1; }
  .layout.rv-on [data-rv="lines"] .rv-ln > span { transition: transform 1.05s cubic-bezier(.2, .75, .1, 1); transition-delay: calc(var(--ln, 0) * 110ms + var(--rv-i, 0) * 90ms); }
  .layout.rv-on [data-rv="lines"]:not(.is-in) .rv-ln > span { transform: translateY(112%); }
  .layout.rv-on [data-rv="mask"] { clip-path: inset(0 0 0 0); }
  .layout.rv-on [data-rv="mask"]:not(.is-in) { opacity: 1; clip-path: inset(14% 16% 14% 16%); }
  .layout.rv-on [data-rv="mask"] img { transition: transform 1.8s cubic-bezier(.2, .7, .1, 1); }
  .layout.rv-on [data-rv="mask"]:not(.is-in) img { transform: scale(1.22); }
  .layout.rv-on [data-rv="iris"] { clip-path: circle(75% at 50% 50%); }
  .layout.rv-on [data-rv="iris"]:not(.is-in) { opacity: 1; clip-path: circle(0% at 50% 50%); }
  .layout.rv-on .ph > img[data-par] { scale: 1.2; will-change: transform; }
  /* a page that arrives inside the site: a curtain lifts off it, it rises, or it slides open (data-turn on the site) */
  .layout[data-turn="curtain"] > .is-arriving { animation: turn-curtain 1s cubic-bezier(.7, 0, .2, 1) both; }
  .layout[data-turn="rise"] > .is-arriving { animation: turn-rise .9s cubic-bezier(.2, .7, .1, 1) both; }
  .layout[data-turn="slide"] > .is-arriving { animation: turn-slide 1s cubic-bezier(.7, 0, .2, 1) both; }
}
@keyframes turn-curtain { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes turn-rise { from { clip-path: inset(0 0 14% 0); transform: translateY(48px); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes turn-slide { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes turn-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- SEVENTH SERIES A: fashion house (vrl), design studio (obq), interior architect (hal), gallery (hnx), villa (vil) ---------- */
/* FASHION: the bar floats over the film and inverts against it */
.layout--fashion > .block-nav-min { position: relative; z-index: 20; height: 0; color: #fff; mix-blend-mode: difference; }
.layout--fashion > .block-nav-min .block-inner { min-height: 72px; }
.layout--fashion > .block-nav-min .nav-min-menu .glass::after { background: #fff; box-shadow: none; border: 0; }
.layout--fashion > .block-nav-min .nav-min-menu .glass { color: #000; }
.block-vrl-hero { position: relative; isolation: isolate; overflow: clip; color: #fff; }
.vrl-film { position: absolute; inset: 0; border-radius: 0; z-index: -1; }
@media (prefers-reduced-motion: no-preference) { .layout.rv-on .vrl-film img { animation: rv-drift 16s cubic-bezier(.22, .61, .36, 1) both; } }
.vrl-film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .1) 40%, rgba(0, 0, 0, .72)); }
.vrl-inner { display: grid; grid-template-rows: auto 1fr auto; gap: clamp(28px, 4cqw, 56px); min-height: min(var(--screen-h, 100svh), 980px); padding: 96px clamp(16px, 3cqw, 40px) clamp(20px, 3cqw, 44px); }
.vrl-season { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; }
.vrl-mid { align-self: end; display: grid; justify-items: start; gap: 18px; max-width: 620px; }
.vrl-title { font-family: var(--font-display); font-size: clamp(34px, 5.4cqw, 72px); line-height: 1.02; letter-spacing: var(--tracking-display); }
.vrl-lead { font-size: var(--text-md); line-height: 1.55; opacity: .9; max-width: 520px; }
.vrl-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.vrl-actions .btn { white-space: normal; }
.vrl-name { display: flex; justify-content: space-between; margin: 0; font-family: var(--font-display); font-size: 23cqw; font-weight: var(--weight-bold); line-height: .78; letter-spacing: 0; }
.vrl-name .rv-ln { display: inline-block; padding-bottom: .02em; }

.block-vrl-look { padding: clamp(48px, 7cqw, 110px) 0; }
.vrl-pin { display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 2.4cqw, 32px); }
.vrl-look-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding: 0 clamp(16px, 3cqw, 40px); }
.vrl-look-title { font-family: var(--font-display); font-size: clamp(40px, 8cqw, 120px); line-height: .9; letter-spacing: var(--tracking-display); }
.vrl-look-head p { font-size: 14px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-ink-soft); }
.vrl-track { display: flex; gap: clamp(14px, 2cqw, 28px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
             padding: 0 clamp(16px, 3cqw, 40px); scroll-padding-inline: clamp(16px, 3cqw, 40px); }
.vrl-track::-webkit-scrollbar { display: none; }
.vrl-look { flex: 0 0 clamp(220px, 26cqw, 360px); display: grid; gap: 4px; align-content: start; scroll-snap-align: start; }
.vrl-look-link { position: relative; display: block; margin-bottom: 8px; }
.vrl-look-photo { aspect-ratio: 3 / 4; }
.vrl-look-photo img { transition: transform .9s cubic-bezier(.2, .7, .1, 1); }
.vrl-look-link:hover .vrl-look-photo img, .vrl-look-link.is-hover .vrl-look-photo img { transform: scale(1.04); }
.vrl-look-no { position: absolute; top: 12px; left: 12px; padding: 6px 9px 5px; border-radius: 4px; background: rgba(0, 0, 0, .55); font-family: var(--font-display); font-size: clamp(18px, 2cqw, 26px); line-height: 1; color: #fff; }
.vrl-look h3 { font-family: var(--font-display); font-size: clamp(17px, 1.7cqw, 21px); letter-spacing: var(--tracking-display); line-height: 1.2; }
.vrl-look p { font-size: 14px; color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.vrl-progress { height: 2px; margin: 0 clamp(16px, 3cqw, 40px); background: color-mix(in srgb, var(--color-ink) 14%, transparent); overflow: hidden; }
.vrl-progress i { display: block; height: 100%; background: var(--color-ink); transform-origin: 0 50%; transform: scaleX(max(.08, var(--p, 0))); transition: transform .2s linear; }
.block-vrl-look.is-pinned { padding-block: 0; }
.block-vrl-look.is-pinned .vrl-pin { position: sticky; top: 0; height: var(--pin-h, 100svh); overflow: hidden; padding-block: 88px 32px; }
.block-vrl-look.is-pinned .vrl-track { overflow: visible; scroll-snap-type: none; will-change: transform; }
.block-vrl-look.is-pinned .vrl-look { flex-basis: calc(var(--pin-h, 700px) * .4); }
@container (max-width: 640px) { .vrl-look { flex-basis: 74%; } }

.block-vrl-atelier { --block-max: 1240px; padding: clamp(56px, 8cqw, 128px) clamp(16px, 3cqw, 40px); }
.vrl-at-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: clamp(24px, 4cqw, 64px); align-items: start; }
.vrl-at-photo { grid-row: 1 / 3; aspect-ratio: 4 / 5; }
.vrl-at-copy { display: grid; justify-items: start; gap: 18px; padding-top: clamp(0px, 4cqw, 56px); }
.vrl-at-title { font-family: var(--font-display); font-size: clamp(30px, 4.2cqw, 58px); line-height: 1.05; letter-spacing: var(--tracking-display); }
.vrl-at-text { font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); max-width: 480px; }
.vrl-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; margin: 8px 0; }
.vrl-facts b { font-family: var(--font-display); font-size: clamp(36px, 4.6cqw, 64px); line-height: 1; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.vrl-facts dd { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--color-ink-soft); }
.vrl-at-detail { width: 100%; aspect-ratio: 16 / 9; }
@container (max-width: 760px) {
  .vrl-at-grid { grid-template-columns: minmax(0, 1fr); }
  .vrl-at-photo { grid-row: auto; }
}

/* STUDIO */
.block-obq-hero { padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 40px) clamp(40px, 5cqw, 80px); }
.obq-hero-inner { --block-max: 1320px; display: grid; gap: clamp(20px, 3cqw, 40px); min-height: min(calc(var(--screen-h, 100svh) - 80px), 900px); align-content: space-between; }
.obq-note { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--color-ink-soft); }
.obq-note i { width: 8px; height: 8px; border-radius: var(--radius-pill, 999px); background: rgb(var(--color-primary)); box-shadow: 0 0 0 4px color-mix(in srgb, rgb(var(--color-primary)) 22%, transparent); }
.obq-say { font-family: var(--font-display); font-size: clamp(44px, 10.5cqw, 176px); line-height: .92; letter-spacing: var(--tracking-display); font-weight: var(--weight-bold); }
.obq-say em { font-style: italic; color: var(--color-accent-text); }
.obq-hero-foot { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 40px; }
.obq-lead { max-width: 460px; font-size: var(--text-md); line-height: 1.55; color: var(--color-ink-soft); }
.obq-hero-foot .btn { white-space: normal; }

.block-obq-index { position: relative; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 40px); }
.block-obq-index .block-inner { --block-max: 1320px; }
.obq-index-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: clamp(16px, 2cqw, 28px); }
.obq-index-head span { font-size: 14px; color: var(--color-ink-soft); }
.obq-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid color-mix(in srgb, var(--color-ink) 16%, transparent); }
.obq-list li { border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 16%, transparent); }
.obq-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 220px) 56px; align-items: baseline; gap: 16px; padding: clamp(14px, 1.8cqw, 24px) 0; transition: opacity .3s ease; }
.obq-thumb { display: none; }
.obq-no { font-size: 13px; color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.obq-row strong { font-family: var(--font-display); font-size: clamp(26px, 5cqw, 72px); line-height: 1; letter-spacing: var(--tracking-display); font-weight: var(--weight-semibold); transition: transform .45s cubic-bezier(.2, .7, .1, 1); }
.obq-what { font-size: 14px; color: var(--color-ink-soft); }
.obq-year { font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.block-obq-index.is-peeking .obq-row:not(.is-hover) { opacity: .32; }
.obq-row:hover strong, .obq-row.is-hover strong { transform: translateX(14px); }
.obq-peek { position: absolute; left: 0; top: 0; z-index: 5; width: clamp(200px, 24cqw, 340px); aspect-ratio: 4 / 3; margin: 0; overflow: hidden; pointer-events: none;
            border-radius: var(--shape-card); opacity: 0; transform: translate(calc(var(--px, 0px) - 50%), calc(var(--py, 0px) - 50%)) scale(.86);
            transition: opacity .3s ease, transform .5s cubic-bezier(.2, .7, .1, 1); }
.obq-peek img { display: block; width: 100%; height: 100%; object-fit: cover; }
.block-obq-index.is-peeking .obq-peek { opacity: 1; transform: translate(calc(var(--px, 0px) - 50%), calc(var(--py, 0px) - 50%)) scale(1); }
@media (hover: none) { .obq-thumb { display: block; } .obq-peek { display: none; } .obq-row { grid-template-columns: 64px 36px minmax(0, 1fr) minmax(0, 200px) 48px; } }
@container (max-width: 640px) {
  .obq-peek { display: none; }
  .obq-row, .block-obq-index .obq-row { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "t n y" "t w w"; row-gap: 4px; align-items: center; }
  .obq-thumb { display: block; grid-area: t; aspect-ratio: 1; }
  .obq-row strong { grid-area: n; font-size: clamp(22px, 7cqw, 30px); }
  .obq-no { display: none; }
  .obq-what { grid-area: w; font-size: 13px; }
  .obq-year { grid-area: y; }
}

.block-obq-facts { padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 40px) clamp(56px, 7cqw, 120px); }
.block-obq-facts .block-inner { --block-max: 1320px; }
.obq-facts-title { font-family: var(--font-display); font-size: clamp(34px, 6cqw, 88px); line-height: 1; letter-spacing: var(--tracking-display); margin-bottom: clamp(24px, 4cqw, 56px); }
.obq-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: clamp(24px, 4cqw, 56px) 0 clamp(32px, 5cqw, 72px); }
.obq-nums dt { font-family: var(--font-display); font-size: clamp(48px, 8cqw, 128px); line-height: .9; font-weight: var(--weight-bold); color: var(--color-accent-text); font-variant-numeric: tabular-nums; }
.obq-nums dd { margin: 8px 0 0; font-size: 14px; color: var(--color-ink-soft); }
.obq-services { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.obq-services li { display: grid; gap: 8px; align-content: start; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--color-ink) 16%, transparent); }
.obq-services span { font-size: 13px; color: var(--color-ink-soft); }
.obq-services h3 { font-family: var(--font-display); font-size: clamp(20px, 2cqw, 26px); letter-spacing: var(--tracking-display); }
.obq-services p { font-size: 14px; line-height: 1.5; color: var(--color-ink-soft); }
@container (max-width: 820px) { .obq-nums, .obq-services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* INTERIOR */
.block-hal-hero { padding: clamp(16px, 2cqw, 28px) clamp(16px, 3cqw, 40px) clamp(40px, 5cqw, 80px); }
.hal-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4cqw, 72px); align-items: center; max-width: 1320px; margin: 0 auto; }
.hal-hero-copy { display: grid; justify-items: start; gap: 20px; }
.hal-kicker { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-ink-soft); }
.hal-title { font-family: var(--font-display); font-size: clamp(34px, 5cqw, 78px); line-height: .98; letter-spacing: var(--tracking-display); }
.hal-title em { font-style: italic; color: var(--color-accent-text); }
.hal-lead { max-width: 460px; font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }
.hal-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hal-actions .btn { white-space: normal; }
.hal-hero-media { position: relative; }
.hal-hero-photo { aspect-ratio: 4 / 5; max-height: min(calc(var(--screen-h, 100svh) - 120px), 820px); width: 100%; }
.hal-caption { background: var(--page-bg); position: absolute; left: clamp(-40px, -3cqw, -12px); bottom: clamp(16px, 3cqw, 40px); display: grid; gap: 2px; padding: 14px 18px; margin: 0; max-width: 70%; }
.hal-caption b { font-family: var(--font-display); font-size: 17px; }
.hal-caption span { font-size: 13px; color: var(--color-ink-soft); }
@container (max-width: 760px) { .hal-hero-grid { grid-template-columns: minmax(0, 1fr); } .hal-caption { left: 12px; } }

.block-hal-rooms { padding: 0; }
.hal-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hal-stage { position: sticky; top: 0; height: var(--screen-h, 100svh); overflow: hidden; }
.hal-shot { position: absolute; inset: 0; border-radius: 0; clip-path: inset(100% 0 0 0); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1); }
.hal-shot:first-child, .hal-shot.is-on { clip-path: inset(0 0 0 0); }
.hal-shot img { transition: transform 1.6s cubic-bezier(.2, .7, .1, 1); transform: scale(1.08); }
.hal-shot.is-on img { transform: scale(1); }
.hal-count { position: absolute; left: 20px; bottom: 18px; z-index: 5; padding: 6px 12px; border-radius: var(--radius-pill, 999px); background: rgba(0, 0, 0, .45); color: #fff; font-size: 13px; font-variant-numeric: tabular-nums; }
.hal-chapters { padding: clamp(40px, 6cqw, 96px) clamp(20px, 4cqw, 72px); }
.hal-rooms-title { font-family: var(--font-display); font-size: clamp(32px, 4.4cqw, 64px); line-height: 1; letter-spacing: var(--tracking-display); padding-bottom: clamp(24px, 4cqw, 48px); }
.hal-chap { display: grid; align-content: center; justify-items: start; gap: 12px; min-height: calc(var(--screen-h, 100svh) * .6); padding-block: 24px; }
.hal-chap-photo { display: none; aspect-ratio: 4 / 3; width: 100%; }
.hal-chap-no { font-size: 13px; color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.hal-chap h3 { font-family: var(--font-display); font-size: clamp(30px, 3.6cqw, 52px); line-height: 1; letter-spacing: var(--tracking-display); }
.hal-chap-sub { font-size: var(--text-md); font-style: italic; color: var(--color-accent-text); }
.hal-chap-text { max-width: 440px; line-height: 1.65; color: var(--color-ink-soft); }
.hal-mats { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hal-mats li { padding: 5px 12px; border: 1px solid color-mix(in srgb, var(--color-ink) 18%, transparent); border-radius: var(--radius-pill, 999px); font-size: 13px; }
@container (max-width: 760px) {
  .hal-split { grid-template-columns: minmax(0, 1fr); }
  .hal-stage { display: none; }
  .hal-chap { min-height: 0; padding-block: 20px 28px; }
  .hal-chap-photo { display: block; }
}
@media (prefers-reduced-motion: reduce) { .hal-shot, .hal-shot img { transition: none; } }

/* GALLERY */
.block-hnx-hero { padding: clamp(16px, 2.4cqw, 32px) clamp(16px, 3cqw, 40px) clamp(40px, 5cqw, 80px); }
.hnx-poster { --block-max: 1400px; display: grid; gap: clamp(8px, 1.4cqw, 20px); }
.hnx-word { margin: 0; font-family: var(--font-display); font-size: 21cqw; line-height: .78; font-weight: var(--weight-bold); letter-spacing: var(--tracking-display); }
.hnx-word--end { text-align: right; }
.hnx-mid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4cqw, 64px); align-items: end; }
.hnx-work { aspect-ratio: 16 / 10; }
.hnx-show { display: grid; justify-items: start; gap: 10px; }
.hnx-now { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-accent-text); }
.hnx-title { font-family: var(--font-display); font-size: clamp(36px, 5.6cqw, 84px); line-height: .95; letter-spacing: var(--tracking-display); }
.hnx-show p { color: var(--color-ink-soft); }
.hnx-dates { font-weight: var(--weight-semibold); color: var(--color-ink) !important; margin-bottom: 6px; }
.hnx-open { font-size: 14px; color: var(--color-ink-soft); }
@container (max-width: 700px) { .hnx-mid { grid-template-columns: minmax(0, 1fr); } }

.block-hnx-file { padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 40px); }
.hnx-file-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 40px; align-items: end; margin-bottom: clamp(20px, 3cqw, 40px); }
.hnx-file-head p { color: var(--color-ink-soft); line-height: 1.55; }
.hnx-drawer { position: relative; }
.hnx-tabs { position: relative; z-index: 30; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; }
.hnx-tab { display: grid; gap: 2px; justify-items: start; min-width: 0; padding: 10px 14px 16px; margin-bottom: -6px; background: transparent; border: 1px solid color-mix(in srgb, var(--color-ink) 16%, transparent); border-bottom: 0;
           border-radius: var(--shape-inner) var(--shape-inner) 0 0; font: inherit; font-size: 14px; color: var(--color-ink-soft); text-align: left; cursor: pointer;
           transition: color .25s ease, transform .35s cubic-bezier(.2, .7, .1, 1), background-color .25s ease; }
.hnx-tab span { font-size: 12px; font-variant-numeric: tabular-nums; }
.hnx-tab:hover, .hnx-tab.is-hover { color: var(--color-ink); transform: translateY(-3px); }
.hnx-tab[aria-selected="true"] { color: var(--color-ink); background: color-mix(in srgb, rgb(var(--color-primary)) 14%, transparent); transform: translateY(-6px); }
.hnx-cards { display: grid; padding-top: 24px; }
.hnx-card { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(20px, 3cqw, 48px); padding: clamp(16px, 2.4cqw, 32px);
            z-index: calc(20 - var(--d)); transform-origin: 50% 0; transform: translateY(calc(min(var(--d), 3) * -8px)) scale(calc(1 - min(var(--d), 3) * .025));
            opacity: calc(1 - var(--d) * .3); transition: transform .6s cubic-bezier(.2, .7, .1, 1), opacity .4s ease; }
.hnx-card:not(.is-front) { pointer-events: none; }
.hnx-card:not(.is-front) > :not(i) { visibility: hidden; }
.hnx-card-photo { aspect-ratio: 5 / 4; }
.hnx-card-body { display: grid; justify-items: start; align-content: center; gap: 12px; }
.hnx-card-no { font-size: 13px; color: var(--color-ink-soft); }
.hnx-card h3 { font-family: var(--font-display); font-size: clamp(28px, 3.4cqw, 48px); line-height: 1; letter-spacing: var(--tracking-display); }
.hnx-card dl { display: grid; gap: 8px; margin: 4px 0; width: 100%; }
.hnx-card dl div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; padding-bottom: 8px; border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); font-size: 14px; }
.hnx-card dt { color: var(--color-ink-soft); }
.hnx-card dd { margin: 0; }
.hnx-price { font-weight: var(--weight-semibold); }
.hnx-card-body .btn { white-space: normal; }
@container (max-width: 760px) {
  .hnx-file-head { grid-template-columns: minmax(0, 1fr); }
  .hnx-tabs { display: flex; overflow-x: auto; scrollbar-width: none; padding: 0; gap: 6px; }
  .hnx-tabs::-webkit-scrollbar { display: none; }
  .hnx-tab { flex: 0 0 auto; }
  .hnx-card { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .hnx-card, .hnx-tab { transition: none; } }

/* VILLA */
.layout--villa > .block-nav-min { position: relative; z-index: 20; height: 0; color: #fff; mix-blend-mode: difference; }
.layout--villa > .block-nav-min .block-inner { min-height: 72px; }
.layout--villa > .block-nav-min .nav-min-menu .glass::after { background: #fff; box-shadow: none; border: 0; }
.layout--villa > .block-nav-min .nav-min-menu .glass { color: #000; }
.block-vil-hero { position: relative; isolation: isolate; overflow: clip; color: #fff; }
.vil-film { position: absolute; inset: 0; border-radius: 0; z-index: -1; }
.vil-film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .05) 45%, rgba(0, 0, 0, .55)); }
.vil-inner { display: grid; align-content: end; justify-items: center; gap: 18px; min-height: min(var(--screen-h, 100svh), 960px); padding: 96px clamp(16px, 3cqw, 40px) clamp(24px, 4cqw, 48px); text-align: center; }
.vil-place { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; }
.vil-title { font-family: var(--font-display); font-size: clamp(44px, 9cqw, 140px); line-height: .95; letter-spacing: var(--tracking-display); margin-bottom: clamp(12px, 3cqw, 40px); }
.vil-ask { background: var(--page-bg); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 12px; width: min(100%, 860px); padding: 14px; text-align: left; color: var(--color-ink); }
.vil-ask .btn { white-space: normal; }
@container (max-width: 700px) { .vil-ask { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .vil-ask .btn { grid-column: 1 / -1; } }

.block-vil-stack { padding: clamp(24px, 4cqw, 56px) clamp(12px, 2.4cqw, 32px) clamp(40px, 5cqw, 80px); }
.vil-card { position: sticky; top: calc(12px + var(--i) * 16px); padding-bottom: clamp(24px, 4cqw, 48px); }
.vil-card-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 3cqw, 48px); align-items: center; max-width: 1320px; margin: 0 auto;
               min-height: min(calc(var(--screen-h, 100svh) - 110px), 720px); padding: clamp(12px, 1.6cqw, 20px); background: var(--page-bg); }
.vil-card-photo { height: 100%; min-height: 260px; }
.vil-card-copy { display: grid; justify-items: start; gap: 12px; padding: clamp(8px, 2cqw, 32px) clamp(4px, 2cqw, 32px); }
.vil-card-no { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--color-ink-soft); }
.vil-card-copy h2 { font-family: var(--font-display); font-size: clamp(34px, 4.6cqw, 68px); line-height: .95; letter-spacing: var(--tracking-display); }
.vil-card-sub { font-size: var(--text-md); font-style: italic; color: var(--color-accent-text); }
.vil-card-copy > p:not(.vil-card-sub) { line-height: 1.65; color: var(--color-ink-soft); max-width: 440px; }
.vil-card-copy ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vil-card-copy li { padding: 5px 12px; border: 1px solid color-mix(in srgb, var(--color-ink) 18%, transparent); border-radius: var(--radius-pill, 999px); font-size: 13px; }
@container (max-width: 760px) {
  .vil-card { position: relative; top: auto; }
  .vil-card-in { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .vil-card-photo { height: auto; aspect-ratio: 4 / 3; min-height: 0; }
}

/* ---------- SEVENTH SERIES B: perfume (sol), car (ast), music producer (rmy), fashion photographer (inm), tasting menu (tsl) ---------- */
/* PERFUME: the page takes on the colour of the note in the middle of the screen (a tint over the page, none at rest) */
.layout--perfume { transition: background-color 1.1s ease; }
.layout--perfume[data-tone-now="1"] { background-color: color-mix(in srgb, rgb(var(--color-primary)) 16%, transparent); }
.layout--perfume[data-tone-now="2"] { background-color: color-mix(in srgb, rgb(var(--color-secondary)) 20%, transparent); }
.layout--perfume[data-tone-now="3"] { background-color: color-mix(in srgb, rgb(var(--color-primary-deep)) 30%, transparent); }
.block-sol-hero { padding: clamp(16px, 3cqw, 40px) 0 clamp(40px, 6cqw, 96px); overflow: clip; }
.sol-stage { position: relative; display: grid; place-items: center; min-height: min(calc(var(--screen-h, 100svh) * .7), 720px); }
.sol-word { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); margin: 0; text-align: center; font-family: var(--font-display);
            font-size: 17.5cqw; font-weight: var(--weight-bold); line-height: .8; letter-spacing: -.01em; white-space: nowrap; }
.sol-word--line { z-index: 2; color: transparent; -webkit-text-stroke: max(1.5px, .14cqw) #fff; mix-blend-mode: difference; pointer-events: none; }
@container (max-width: 640px) { .sol-stage { min-height: 0; padding-block: 24px; } .sol-bottle { width: 58cqw; } }
.sol-bottle { position: relative; z-index: 1; width: clamp(180px, 28cqw, 400px); aspect-ratio: 3 / 4; }
.sol-copy { --block-max: 760px; display: grid; justify-items: center; gap: 14px; padding: clamp(24px, 3cqw, 40px) clamp(16px, 3cqw, 32px) 0; text-align: center; }
.sol-no { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-accent-text); }
.sol-title { font-family: var(--font-display); font-size: clamp(32px, 4.6cqw, 64px); line-height: 1; letter-spacing: var(--tracking-display); }
.sol-lead { max-width: 560px; font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }
.sol-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.sol-actions .btn { white-space: normal; }

.block-sol-notes { padding: 0 clamp(16px, 3cqw, 40px); }
.sol-note { display: grid; align-items: center; min-height: min(calc(var(--screen-h, 100svh) * .66), 760px); padding-block: clamp(28px, 4cqw, 56px); }
.sol-note-grid { --block-max: 1180px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5cqw, 96px); align-items: center; }
.sol-note.is-flip .sol-note-photo { order: 2; }
.sol-note-photo { aspect-ratio: 4 / 5; }
.sol-note-copy { display: grid; justify-items: start; gap: 14px; }
.sol-note-kind { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-accent-text); }
.sol-note-title { font-family: var(--font-display); font-size: clamp(36px, 5.4cqw, 80px); line-height: .98; letter-spacing: var(--tracking-display); }
.sol-note-copy > p { max-width: 440px; font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }
.sol-note-copy ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sol-note-copy li { padding: 5px 12px; border: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); border-radius: var(--radius-pill, 999px); font-size: 13px; }
.sol-note-copy .sol-note-time { font-size: 14px; font-style: italic; color: var(--color-ink); }
@container (max-width: 700px) { .sol-note-grid { grid-template-columns: minmax(0, 1fr); } .sol-note.is-flip .sol-note-photo { order: 0; } .sol-note { min-height: 0; } }

.block-sol-buy { padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 40px); }
.sol-buy-grid { --block-max: 1120px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4cqw, 64px); align-items: center; }
.sol-buy-photo { aspect-ratio: 1; }
.sol-buy-card { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 12px; padding: clamp(20px, 3cqw, 40px); }
.sol-buy-kind { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-accent-text); }
.sol-buy-name { font-family: var(--font-display); font-size: clamp(28px, 3.4cqw, 44px); line-height: 1.05; letter-spacing: var(--tracking-display); }
.sol-buy-text, .sol-buy-note { line-height: 1.6; color: var(--color-ink-soft); }
.sol-buy-note { font-size: 13px; }
.sol-buy-label { margin-top: 6px; font-size: 13px; font-weight: var(--weight-semibold); }
.sol-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.sol-price { font-size: 18px; }
.sol-price b { font-family: var(--font-display); font-size: clamp(34px, 4cqw, 48px); font-variant-numeric: tabular-nums; }
.sol-buy-card .btn { white-space: normal; }
@container (max-width: 700px) { .sol-buy-grid { grid-template-columns: minmax(0, 1fr); } }

/* CAR: the bar floats over the film */
.layout--car > .block-nav-min { position: relative; z-index: 20; height: 0; color: #fff; mix-blend-mode: difference; }
.layout--car > .block-nav-min .block-inner { min-height: 72px; }
.layout--car > .block-nav-min .nav-min-menu .glass::after { background: #fff; box-shadow: none; border: 0; }
.layout--car > .block-nav-min .nav-min-menu .glass { color: #000; }
.block-ast-hero { position: relative; isolation: isolate; overflow: clip; color: #fff; }
.ast-film { position: absolute; inset: 0; border-radius: 0; z-index: -1; }
.ast-film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .15) 40%, rgba(0, 0, 0, .8)); }
.ast-inner { display: grid; grid-template-rows: auto 1fr auto; gap: 20px; min-height: min(var(--screen-h, 100svh), 980px); padding: 96px clamp(16px, 3cqw, 40px) clamp(20px, 3cqw, 40px); }
.ast-maker { font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: .4em; }
.ast-mid { align-self: center; display: grid; gap: 8px; }
.ast-name { font-family: var(--font-display); font-size: clamp(120px, 30cqw, 420px); line-height: .78; font-weight: var(--weight-bold); letter-spacing: -.03em; }
.ast-line { font-family: var(--font-display); font-size: clamp(24px, 3.4cqw, 48px); line-height: 1.05; letter-spacing: var(--tracking-display); }
.ast-foot { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; }
.ast-specs { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); gap: clamp(16px, 4cqw, 56px); margin: 0; }
.ast-specs dt { display: flex; align-items: baseline; gap: 4px; }
.ast-specs b { font-family: var(--font-display); font-size: clamp(34px, 4.6cqw, 64px); line-height: 1; font-variant-numeric: tabular-nums; }
.ast-specs small { font-size: 15px; opacity: .8; }
.ast-specs dd { margin: 6px 0 0; font-size: 13px; opacity: .8; }
.ast-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ast-actions .btn { white-space: normal; }
@container (max-width: 560px) { .ast-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .ast-specs b { font-size: 30px; } .ast-specs small { font-size: 12px; } .ast-actions, .ast-actions .mgn, .ast-actions .btn { width: 100%; } }

.block-ast-details { padding: clamp(56px, 8cqw, 128px) clamp(16px, 3cqw, 40px); }
.block-ast-details .block-inner { --block-max: 1280px; }
.ast-det-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 48px; align-items: end; margin-bottom: clamp(32px, 5cqw, 80px); }
.ast-det-title { font-family: var(--font-display); font-size: clamp(38px, 6cqw, 96px); line-height: .95; letter-spacing: var(--tracking-display); }
.ast-det-head p { max-width: 460px; line-height: 1.6; color: var(--color-ink-soft); }
.ast-det-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2.4cqw, 32px); }
.ast-det { margin: 0; display: grid; gap: 12px; align-content: start; }
.ast-det--1 { grid-column: 1 / 8; }
.ast-det--2 { grid-column: 9 / 13; margin-top: clamp(40px, 12cqw, 200px); }
.ast-det--3 { grid-column: 2 / 8; margin-top: clamp(-120px, -6cqw, -16px); }
.ast-det--1 .ast-det-photo { aspect-ratio: 16 / 10; }
.ast-det--2 .ast-det-photo { aspect-ratio: 3 / 4; }
.ast-det--3 .ast-det-photo { aspect-ratio: 16 / 9; }
.ast-det figcaption { display: grid; gap: 4px; max-width: 420px; }
.ast-det figcaption b { font-family: var(--font-display); font-size: clamp(20px, 2cqw, 26px); letter-spacing: var(--tracking-display); }
.ast-det figcaption span { font-size: 14px; line-height: 1.55; color: var(--color-ink-soft); }
@container (max-width: 760px) {
  .ast-det-head { grid-template-columns: minmax(0, 1fr); }
  .ast-det--1, .ast-det--2, .ast-det--3 { grid-column: 1 / -1; margin-top: 0; }
}

.block-ast-build { padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 40px); }
.ast-build-grid { --block-max: 1280px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(20px, 3cqw, 48px); align-items: center; }
.ast-stage { position: relative; display: grid; }
.ast-shot { grid-area: 1 / 1; aspect-ratio: 4 / 3; opacity: 0; transition: opacity .7s ease; }
.ast-shot.is-on { opacity: 1; }
.ast-card { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 14px; padding: clamp(20px, 3cqw, 36px); }
.ast-build-title { font-family: var(--font-display); font-size: clamp(30px, 3.6cqw, 48px); line-height: 1; letter-spacing: var(--tracking-display); }
.ast-build-lead { line-height: 1.6; color: var(--color-ink-soft); }
.ast-vals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; margin: 4px 0; }
.ast-vals dt { font-size: 12px; color: var(--color-ink-soft); }
.ast-vals dd { margin: 2px 0 0; font-family: var(--font-display); font-size: clamp(20px, 2.2cqw, 28px); font-variant-numeric: tabular-nums; }
.ast-build-label { font-size: 13px; font-weight: var(--weight-semibold); }
.ast-build-label span { font-weight: var(--weight-regular); color: var(--color-ink-soft); }
.ast-swatches { display: flex; gap: 10px; }
.ast-swatch { width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--radius-pill, 999px); background: transparent; cursor: pointer; position: relative;
              box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 20%, transparent); transition: transform .25s ease; }
.ast-swatch::before { content: ""; position: absolute; inset: 4px; border-radius: inherit; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.ast-swatch:hover, .ast-swatch.is-hover { transform: scale(1.08); }
.ast-swatch[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--color-ink); }
.ast-total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; width: 100%; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); font-size: 14px; }
.ast-total strong { font-size: 16px; }
.ast-total b { font-family: var(--font-display); font-size: clamp(26px, 3cqw, 36px); font-variant-numeric: tabular-nums; }
.ast-card .btn { white-space: normal; }
.ast-card .segmented { max-width: 100%; }
@container (max-width: 820px) { .ast-build-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .ast-shot { transition: none; } }

/* PRODUCER */
.block-rmy-hero { padding: clamp(24px, 4cqw, 56px) clamp(16px, 3cqw, 40px) clamp(40px, 6cqw, 96px); }
.rmy-grid { --block-max: 1360px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 2cqw, 28px); align-items: start; }
.rmy-name { grid-column: 1 / 9; grid-row: 1; font-family: var(--font-display); font-size: clamp(64px, 14cqw, 220px); line-height: .82; font-weight: var(--weight-bold); letter-spacing: -.02em; }
.rmy-p1 { grid-column: 9 / 13; grid-row: 1 / 3; aspect-ratio: 3 / 4; }
.rmy-intro { grid-column: 1 / 5; grid-row: 2; display: grid; justify-items: start; gap: 14px; padding-top: clamp(8px, 2cqw, 24px); }
.rmy-role { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-accent-text); }
.rmy-lead { line-height: 1.6; color: var(--color-ink-soft); }
.rmy-intro .btn { white-space: normal; }
.rmy-p2 { grid-column: 5 / 9; grid-row: 2 / 4; aspect-ratio: 4 / 5; margin-top: clamp(20px, 6cqw, 96px); }
.rmy-now { grid-column: 1 / 5; grid-row: 3; align-self: start; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "p t l" "w w w"; align-items: center; gap: 12px 14px; padding: 16px; }
.rmy-now .rmy-play { grid-area: p; }
.rmy-now-t { grid-area: t; display: grid; min-width: 0; }
.rmy-now-t span { font-size: 12px; color: var(--color-ink-soft); }
.rmy-now-t strong { font-family: var(--font-display); font-size: 20px; }
.rmy-now-t em { font-style: normal; font-size: 14px; color: var(--color-ink-soft); }
.rmy-now .rmy-wave { grid-area: w; }
.rmy-now .rmy-len { grid-area: l; }
.rmy-p3 { grid-column: 9 / 13; grid-row: 3; aspect-ratio: 4 / 3; margin-top: clamp(0px, 3cqw, 40px); }
@container (max-width: 760px) {
  .rmy-name, .rmy-intro, .rmy-now { grid-column: 1 / -1; grid-row: auto; }
  .rmy-p1 { grid-column: 1 / 8; grid-row: auto; }
  .rmy-p2 { grid-column: 5 / -1; grid-row: auto; margin-top: 0; }
  .rmy-p3 { display: none; }
}
.rmy-play { position: relative; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-pill, 999px); background: transparent; cursor: pointer; color: var(--color-ink); }
.rmy-play::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid currentColor; transition: transform .25s ease, background-color .25s ease; }
.rmy-play[aria-pressed="true"]::before { background: color-mix(in srgb, var(--color-ink) 14%, transparent); }
.rmy-play:hover::before, .rmy-play.is-hover::before { transform: scale(1.08); }
.rmy-play i { position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -7px 0 0 -4px; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; }
.rmy-play[aria-pressed="true"] i { width: 12px; height: 14px; margin: -7px 0 0 -6px; border: 0; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.rmy-wave { display: flex; align-items: center; gap: 2px; height: 32px; min-width: 0; position: relative; }
.rmy-wave i { flex: 1 1 0; min-width: 2px; height: var(--h); border-radius: 2px; background: color-mix(in srgb, var(--color-ink) 45%, transparent); transform-origin: 50% 50%; }
.is-playing .rmy-wave i { background: rgb(var(--color-primary)); }
.rmy-len { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--color-ink-soft); }
@media (prefers-reduced-motion: no-preference) {
  .is-playing .rmy-wave i { animation: rmy-bar .9s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -73ms); }
}
@keyframes rmy-bar { from { transform: scaleY(.35); } to { transform: scaleY(1); } }

.block-rmy-tracks { padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 40px); }
.block-rmy-tracks .block-inner { --block-max: 1240px; }
.rmy-tracks-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: clamp(16px, 2.4cqw, 32px); }
.rmy-tracks-head p { color: var(--color-ink-soft); }
.rmy-tracks { list-style: none; margin: 0; padding: 0; }
.rmy-track { display: grid; grid-template-columns: 44px 32px minmax(0, 1.3fr) minmax(0, .9fr) minmax(0, 1.4fr) 48px 44px; align-items: center; gap: 16px; padding: 12px 0;
             border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); transition: background-color .3s ease; }
.rmy-track.is-playing { background: color-mix(in srgb, rgb(var(--color-primary)) 8%, transparent); }
.rmy-no, .rmy-year { font-size: 13px; color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.rmy-t { display: grid; min-width: 0; }
.rmy-t strong { font-family: var(--font-display); font-size: clamp(18px, 1.8cqw, 22px); }
.rmy-t em { font-style: normal; font-size: 14px; color: var(--color-ink-soft); }
.rmy-role-s { font-size: 14px; color: var(--color-ink-soft); }
@container (max-width: 820px) {
  .rmy-track { grid-template-columns: 44px minmax(0, 1fr) 44px; grid-template-areas: "p t l" "w w w"; row-gap: 8px; }
  .rmy-track .rmy-play { grid-area: p; }
  .rmy-track .rmy-t { grid-area: t; }
  .rmy-track .rmy-len { grid-area: l; }
  .rmy-track .rmy-wave { grid-area: w; height: 24px; }
  .rmy-no, .rmy-role-s, .rmy-year { display: none; }
}

/* FASHION PHOTOGRAPHER: the bar floats over the slides */
.layout--editorial > .block-nav-min { position: relative; z-index: 20; height: 0; color: #fff; mix-blend-mode: difference; }
.layout--editorial > .block-nav-min .block-inner { min-height: 72px; }
.layout--editorial > .block-nav-min .nav-min-menu .glass::after { background: #fff; box-shadow: none; border: 0; }
.layout--editorial > .block-nav-min .nav-min-menu .glass { color: #000; }
.block-inm-slides { position: relative; isolation: isolate; overflow: clip; color: #fff; min-height: min(var(--screen-h, 100svh), 980px); }
.inm-frames { position: absolute; inset: 0; z-index: -1; }
.inm-slide { position: absolute; inset: 0; border-radius: 0; z-index: 1; clip-path: inset(0 0 0 100%); transition: clip-path 1.2s cubic-bezier(.7, 0, .2, 1); }
.block-inm-slides[data-dir="back"] .inm-slide:not(.is-on):not(.was-on) { clip-path: inset(0 100% 0 0); }
.inm-slide.was-on { z-index: 1; clip-path: inset(0 0 0 0); transition: none; }
.inm-slide.is-on { z-index: 2; clip-path: inset(0 0 0 0); }
.inm-slide img { object-position: 50% 22%; }
.inm-frames::after { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .6)); }
.inm-over { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "c c" "t k"; align-content: space-between; gap: 20px;
            min-height: min(var(--screen-h, 100svh), 980px); padding: 96px clamp(16px, 3cqw, 40px) clamp(20px, 3cqw, 40px); }
.inm-count { grid-area: c; justify-self: end; font-size: 14px; font-variant-numeric: tabular-nums; }
.inm-cap { grid-area: t; align-self: end; display: grid; gap: 8px; }
.inm-title { font-family: var(--font-display); font-size: clamp(56px, 12cqw, 200px); line-height: .85; letter-spacing: var(--tracking-display); }
.inm-meta { font-size: var(--text-md); opacity: .9; }
.inm-ctrl { grid-area: k; align-self: end; display: flex; align-items: center; gap: 12px; }
.inm-arrow { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255, 255, 255, .6); border-radius: var(--radius-pill, 999px); background: transparent; color: #fff; cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.inm-arrow svg { width: 18px; height: 18px; }
.inm-arrow[data-step="-1"] svg { transform: scaleX(-1); }
.inm-arrow:hover, .inm-arrow.is-hover { background: #fff; color: #000; }
.inm-dots { display: flex; gap: 6px; }
.inm-dot { width: 28px; height: 20px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; }
.inm-dot::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: rgba(255, 255, 255, .45); transition: background-color .25s ease; }
.inm-dot[aria-current="true"]::before, .inm-dot:hover::before { background: #fff; }
@media (prefers-reduced-motion: no-preference) { .inm-cap.is-new > * { animation: turn-rise .8s cubic-bezier(.2, .7, .1, 1) both; } .inm-cap.is-new > :nth-child(2) { animation-delay: .1s; } }
@media (prefers-reduced-motion: reduce) { .inm-slide { transition: none; } }
@container (max-width: 640px) { .inm-over { grid-template-columns: minmax(0, 1fr); grid-template-areas: "c" "t" "k"; } .inm-dots { display: none; } }

.block-inm-sheet { padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 40px); }
.block-inm-sheet .block-inner { --block-max: 1280px; }
.inm-sheet-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: clamp(16px, 2.4cqw, 32px); }
.inm-sheet-head p { max-width: 520px; color: var(--color-ink-soft); }
.inm-roll { padding: 28px clamp(10px, 1.6cqw, 20px); border-radius: var(--shape-card); background:
            radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .22) 0 3px, transparent 3.5px) 0 7px / 18px 14px repeat-x,
            radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .22) 0 3px, transparent 3.5px) 0 calc(100% - 7px) / 18px 14px repeat-x, #141414; }
.inm-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 10px; }
.inm-frame { position: relative; display: block; }
.inm-shot { aspect-ratio: 2 / 3; border-radius: 2px; }
.inm-shot img { transition: transform .6s cubic-bezier(.2, .7, .1, 1); }
.inm-frame:hover .inm-shot img, .inm-frame.is-hover .inm-shot img { transform: scale(1.35); }
.inm-fno { position: absolute; left: 5px; bottom: 5px; padding: 1px 5px; border-radius: 3px; background: rgba(0, 0, 0, .7); font-size: 12px; font-weight: var(--weight-semibold); color: #f2c14e; font-variant-numeric: tabular-nums; }
.inm-circle { position: absolute; inset: -4px; border: 3px solid #e2412f; border-radius: 48% 52% 46% 54% / 55% 45% 55% 45%; transform: rotate(-4deg); pointer-events: none; }
@container (max-width: 760px) { .inm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* TASTING MENU: the bar floats over the fire */
.layout--tasting > .block-nav-min { position: relative; z-index: 20; height: 0; color: #fff; mix-blend-mode: difference; }
.layout--tasting > .block-nav-min .block-inner { min-height: 72px; }
.layout--tasting > .block-nav-min .nav-min-menu .glass::after { background: #fff; box-shadow: none; border: 0; }
.layout--tasting > .block-nav-min .nav-min-menu .glass { color: #000; }
.block-tsl-hero { position: relative; isolation: isolate; overflow: clip; color: #fff; }
.tsl-film { position: absolute; inset: 0; border-radius: 0; z-index: -1; }
.tsl-film::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, rgba(0, 0, 0, .45), rgba(0, 0, 0, .8)); }
.tsl-link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 8px; color: #fff; font-weight: var(--weight-semibold); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.tsl-link:hover, .tsl-link.is-hover { text-decoration-thickness: 2px; }
.tsl-inner { display: grid; align-content: center; justify-items: center; gap: 18px; min-height: min(var(--screen-h, 100svh), 960px); padding: 96px clamp(16px, 3cqw, 40px) 56px; text-align: center; }
.tsl-kicker { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; }
.tsl-title { font-family: var(--font-display); font-size: clamp(44px, 8.4cqw, 132px); line-height: .95; letter-spacing: var(--tracking-display); }
.tsl-lead { max-width: 520px; font-size: var(--text-md); line-height: 1.6; opacity: .9; }
.tsl-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.tsl-actions .btn { white-space: normal; }

.block-tsl-book { padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 40px); }
.block-tsl-book .block-inner { --block-max: 1180px; }
.tsl-book-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: clamp(16px, 2.4cqw, 32px); }
.tsl-book-head p { color: var(--color-ink-soft); }
.tsl-book { perspective: 1800px; }
.tsl-spread { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: clamp(10px, 1.4cqw, 18px); }
.tsl-spread[hidden] { display: none; }
.tsl-page { position: relative; min-width: 0; }
.tsl-page--left { padding-right: clamp(8px, 1.4cqw, 18px); border-right: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); }
.tsl-plate { aspect-ratio: 1; height: 100%; }
.tsl-page--right { display: grid; align-content: center; justify-items: start; gap: 14px; padding: clamp(20px, 4cqw, 64px); transform-origin: 0 50%;
                   background: linear-gradient(90deg, color-mix(in srgb, var(--color-ink) 10%, transparent), transparent 40px); }
.tsl-num { font-family: var(--font-display); font-size: clamp(64px, 9cqw, 140px); line-height: .8; color: color-mix(in srgb, var(--color-ink) 16%, transparent); font-variant-numeric: tabular-nums; }
.tsl-course { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-accent-text); }
.tsl-name { font-family: var(--font-display); font-size: clamp(40px, 6cqw, 88px); line-height: .95; letter-spacing: var(--tracking-display); }
.tsl-desc { max-width: 380px; font-size: var(--text-md); line-height: 1.6; }
.tsl-pair { display: grid; gap: 2px; font-size: 14px; color: var(--color-ink-soft); }
.tsl-pair span { font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-ink); }
.tsl-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; margin-top: 20px; }
@container (max-width: 480px) { .tsl-at { order: -1; width: 100%; text-align: center; } }
.tsl-at { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--color-ink-soft); }
.tsl-nav .btn { white-space: normal; }
@media (prefers-reduced-motion: no-preference) {
  .tsl-spread.is-turning .tsl-page--right { animation: tsl-turn .9s cubic-bezier(.2, .7, .1, 1) both; }
  .tsl-spread.is-turning.is-back .tsl-page--right { animation-name: tsl-turn-back; }
  .tsl-spread.is-turning .tsl-page--left { animation: turn-fade .7s ease both; }
}
@keyframes tsl-turn { from { transform: rotateY(-88deg); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes tsl-turn-back { from { transform: rotateY(60deg); opacity: 0; } to { transform: none; opacity: 1; } }
@container (max-width: 700px) {
  .tsl-spread { grid-template-columns: minmax(0, 1fr); }
  .tsl-page--left { padding: 0 0 12px; border-right: 0; }
  .tsl-plate { aspect-ratio: 4 / 3; }
  .tsl-page--right { padding: 16px 8px 36px; }
}
/* ---------- EIGHTH SERIES: sleep system (lul) ---------- */
/* SLEEP SYSTEM: night at the top, day at the bottom; the page takes the tone of the phase in the middle of the screen (none at rest) */
.layout--sleep { transition: background-color 1.2s ease; }
.layout--sleep[data-tone-now="1"] { background-color: color-mix(in srgb, rgb(var(--color-primary-deep)) 26%, transparent); }
.layout--sleep[data-tone-now="2"] { background-color: color-mix(in srgb, rgb(var(--color-primary)) 14%, transparent); }
.layout--sleep[data-tone-now="3"] { background-color: color-mix(in srgb, rgb(var(--color-secondary)) 50%, transparent); }
.layout--sleep > .block-nav-min { position: relative; z-index: 20; height: 0; color: #fff; mix-blend-mode: difference; }
.layout--sleep > .block-nav-min .block-inner { min-height: 72px; }
.layout--sleep > .block-nav-min .nav-min-menu .glass::after { background: #fff; box-shadow: none; border: 0; }
.layout--sleep > .block-nav-min .nav-min-menu .glass { color: #000; }

/* shared small parts */
.lul-kicker { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-accent-text); }
.lul-h2 { font-family: var(--font-display); font-size: clamp(30px, 4.6cqw, 60px); line-height: 1; letter-spacing: var(--tracking-display); }

/* NIGHT HERO */
.block-lul-night { position: relative; isolation: isolate; overflow: clip; color: #fff; }
.lul-film { position: absolute; inset: 0; border-radius: 0; z-index: -1; }
.lul-film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .18) 45%, rgba(0, 0, 0, .62)); }
.lul-inner { display: grid; grid-template-rows: 1fr auto; gap: clamp(28px, 4cqw, 56px); min-height: min(var(--screen-h, 100svh), 960px); padding: 108px clamp(16px, 3cqw, 40px) 0; }
.lul-copy { display: grid; justify-items: center; align-content: center; gap: 16px; text-align: center; max-width: 820px; margin: 0 auto; }
.lul-eyebrow { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; opacity: .85; }
.lul-title { font-family: var(--font-display); font-size: clamp(38px, 9cqw, 104px); line-height: .96; letter-spacing: var(--tracking-display); }
.lul-lead { max-width: 560px; font-size: var(--text-md); line-height: 1.6; opacity: .9; }
.lul-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.lul-actions .btn { white-space: normal; }
.block-lul-night .glass--ghost.btn { color: #fff; }
/* the pod: a soft capsule rising from the bottom of the screen, the product inside it */
.lul-pod { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); width: min(100%, 880px); margin: 0 auto; overflow: clip;
           border-radius: var(--radius-pill, 999px) var(--radius-pill, 999px) 0 0; background: var(--page-bg); color: var(--color-ink); }
.lul-pod-photo { border-radius: 0; height: 100%; min-height: 200px; }
.lul-reads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-content: center; margin: 0; padding: 28px clamp(20px, 3cqw, 40px) 24px clamp(16px, 2cqw, 28px); }
.lul-reads dt { display: flex; align-items: baseline; gap: 2px; white-space: nowrap; }
.lul-reads b { font-family: var(--font-display); font-size: clamp(28px, 3.6cqw, 44px); line-height: 1; font-variant-numeric: tabular-nums; }
.lul-reads small { font-size: 15px; color: var(--color-ink-soft); }
.lul-reads dd { margin: 6px 0 0; font-size: 13px; line-height: 1.3; color: var(--color-ink-soft); }
@container (max-width: 700px) {
  .lul-inner { padding-top: 92px; }
  .lul-pod { grid-template-columns: minmax(0, 1fr); border-radius: var(--radius-card) var(--radius-card) 0 0; }
  .lul-pod-photo { height: auto; aspect-ratio: 16 / 9; min-height: 0; }
  .lul-reads { padding: 18px 16px 20px; gap: 8px; }
  .lul-reads b { font-size: 24px; }
  .lul-reads small { font-size: 12px; }
  .lul-reads dd { font-size: 12px; }
  .lul-actions, .lul-actions .mgn, .lul-actions .btn { width: 100%; }
}

/* PHASES: three dots on one line, each phase hanging a little lower */
.block-lul-phases { padding: clamp(56px, 8cqw, 120px) clamp(16px, 3cqw, 40px) clamp(40px, 6cqw, 96px); }
.lul-head { display: grid; gap: 14px; max-width: 640px; margin-bottom: clamp(36px, 5cqw, 72px); }
.lul-sub { font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }
.lul-track { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3cqw, 48px); align-items: start; }
.lul-line { position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: color-mix(in srgb, var(--color-ink) 20%, transparent); }
.lul-phase { position: relative; display: grid; justify-items: start; }
.lul-dot { position: relative; z-index: 1; width: 15px; height: 15px; border-radius: var(--radius-pill, 999px); background: rgb(var(--color-primary)); box-shadow: 0 0 0 4px var(--page-bg); }
.lul-time { margin-top: 10px; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--color-ink-soft); }
.lul-stem { display: block; width: 1px; height: calc(var(--i) * clamp(48px, 8cqw, 112px)); margin: 8px 0 0 7px; background: color-mix(in srgb, var(--color-ink) 20%, transparent); }
.lul-phase-body { display: grid; justify-items: start; gap: 12px; width: 100%; padding-top: 12px; }
.lul-phase-photo { width: 100%; aspect-ratio: 4 / 5; margin-bottom: 8px; }
.lul-phase-body h3 { font-family: var(--font-display); font-size: clamp(22px, 2.4cqw, 30px); line-height: 1.05; letter-spacing: var(--tracking-display); }
.lul-phase-body > p { line-height: 1.6; color: var(--color-ink-soft); }
.lul-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
@container (max-width: 700px) {
  .lul-track { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-left: 30px; }
  .lul-line { left: 7px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .lul-dot { position: absolute; left: -30px; top: 0; }
  .lul-time { margin-top: 0; }
  .lul-stem { display: none; }
  .lul-phase-photo { aspect-ratio: 4 / 3; }
}

/* TUNE: photo and the card of chips */
.block-lul-tune { padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 40px); }
.lul-tune-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 4cqw, 64px); align-items: center; }
.lul-tune-photo { aspect-ratio: 4 / 5; }
.lul-tune-card { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 14px; padding: clamp(20px, 3cqw, 40px); }
.lul-tune-text { line-height: 1.6; color: var(--color-ink-soft); }
.lul-opt { display: grid; gap: 8px; width: 100%; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); }
.lul-opt-label { font-size: 13px; font-weight: var(--weight-semibold); }
.lul-opt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lul-say { margin-top: 6px; padding: 12px 16px; border-radius: var(--radius-control); background: color-mix(in srgb, rgb(var(--color-primary)) 10%, transparent); font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink); }
.lul-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: clamp(28px, 4cqw, 56px) 0 0; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); }
.lul-facts dt { font-size: 13px; color: var(--color-ink-soft); }
.lul-facts dd { margin: 4px 0 0; font-family: var(--font-display); font-size: clamp(20px, 2.2cqw, 28px); line-height: 1.1; letter-spacing: var(--tracking-display); }
@container (max-width: 700px) {
  .lul-tune-grid { grid-template-columns: minmax(0, 1fr); }
  .lul-tune-photo { aspect-ratio: 4 / 3; }
  .lul-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lul-facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); }
  .lul-facts dd { font-size: 18px; text-align: right; }
}

/* THE MORNING: a bright room behind the card */
.block-lul-buy { position: relative; isolation: isolate; overflow: clip; }
.lul-day { position: absolute; inset: 0; border-radius: 0; z-index: -1; }
.lul-buy-inner { display: grid; justify-items: end; align-content: center; min-height: min(var(--screen-h, 100svh), 860px); padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 40px); max-width: 1180px; margin: 0 auto; }
.lul-buy-card { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 12px; width: min(100%, 460px); padding: clamp(20px, 3cqw, 40px); border-radius: var(--shape-card); background: var(--page-bg); color: var(--color-ink); }
.lul-buy-text, .lul-buy-note { line-height: 1.6; color: var(--color-ink-soft); }
.lul-buy-note { font-size: 13px; }
.lul-buy-label { margin-top: 6px; font-size: 13px; font-weight: var(--weight-semibold); }
.lul-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.lul-price { font-size: 18px; }
.lul-price b { font-family: var(--font-display); font-size: clamp(34px, 4cqw, 48px); font-variant-numeric: tabular-nums; }
.lul-buy-card .btn { white-space: normal; }
@container (max-width: 700px) {
  .lul-buy-inner { min-height: 0; padding: 52cqw 16px 24px; }
  .lul-buy-card { width: 100%; }
  .lul-buy-card .mgn, .lul-buy-card .btn { width: 100%; }
}

/* the night photo settles slowly, like eyes adjusting to the dark */
@media (prefers-reduced-motion: no-preference) {
  .layout.rv-on .lul-film img { animation: rv-drift 14s cubic-bezier(.22, .61, .36, 1) both; }
}
@media (prefers-reduced-motion: reduce) {
  .layout--sleep { transition: none; }
  .lul-film img { animation: none; }
}
/* ---------- EIGHTH SERIES: furniture maker (hwn) ---------- */
/* FURNITURE: the header floats over the photo in white */
.layout--furniture > .block-nav-min { position: relative; z-index: 20; height: 0; color: #fff; mix-blend-mode: difference; }
.layout--furniture > .block-nav-min .block-inner { min-height: 72px; }
.layout--furniture > .block-nav-min .nav-min-menu .glass::after { background: #fff; box-shadow: none; border: 0; }
.layout--furniture > .block-nav-min .nav-min-menu .glass { color: #000; }

/* HERO: the piece fills the first screen, the words sit in the lower left corner, the tag floats on the right */
.block-hwn-hero { position: relative; isolation: isolate; overflow: clip; color: #fff; }
.hwn-hero-photo { position: absolute; inset: 0; border-radius: 0; z-index: -1; }
.hwn-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .52), rgba(0, 0, 0, .08) 42%, rgba(0, 0, 0, .72)); }
.hwn-hero-inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px clamp(24px, 4cqw, 64px);
                  min-height: min(var(--screen-h, 100svh), 900px); padding: 96px clamp(16px, 3cqw, 40px) clamp(24px, 4cqw, 56px); }
.hwn-hero-copy { display: grid; justify-items: start; gap: 18px; max-width: 720px; }
.hwn-title { font-family: var(--font-display); font-size: clamp(36px, 5.8cqw, 84px); line-height: .98; letter-spacing: var(--tracking-display); }
.hwn-lead { max-width: 520px; font-size: var(--text-md); line-height: 1.6; opacity: .9; }
.hwn-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hwn-actions .btn { white-space: normal; }
.block-hwn-hero .glass--ghost { color: #fff; }
.hwn-tag { background: var(--page-bg); display: flex; align-items: center; gap: 16px; max-width: 100%; margin-bottom: clamp(0px, 10cqw, 140px); padding: 10px 10px 10px 18px; color: var(--color-ink); }
.hwn-tag-text { display: grid; gap: 2px; font-size: 14px; }
.hwn-tag-text b { font-size: 15px; }
.hwn-tag-text span { color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
@container (max-width: 700px) {
  .hwn-hero-inner { flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 20px; padding-top: 80px; }
  .hwn-hero-copy { max-width: none; }
  .hwn-actions, .hwn-actions .mgn, .hwn-actions .btn { width: 100%; }
  .hwn-tag { margin-bottom: 0; }
}

/* ROOMS: the tabs and a grid of three pieces */
.block-hwn-rooms { padding: clamp(48px, 7cqw, 112px) clamp(16px, 3cqw, 40px) clamp(40px, 6cqw, 96px); }
.block-hwn-rooms .block-inner { --block-max: 1180px; display: grid; gap: clamp(20px, 3cqw, 36px); }
.hwn-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.hwn-tabs .btn { white-space: normal; }
.hwn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4cqw, 32px); }
.hwn-card { display: grid; gap: 14px; margin: 0; }
.hwn-card-photo { aspect-ratio: 4 / 5; }
.hwn-card-body { display: grid; gap: 6px; }
.hwn-card-body h3 { font-family: var(--font-display); font-size: clamp(19px, 1.8cqw, 24px); line-height: 1.15; letter-spacing: var(--tracking-display); }
.hwn-card-body p { font-size: 14px; line-height: 1.55; color: var(--color-ink-soft); }
.hwn-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 6px; }
.hwn-card-foot .btn { white-space: normal; }
.hwn-price { font-family: var(--font-display); font-size: 18px; font-variant-numeric: tabular-nums; }
@container (max-width: 900px) { .hwn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 600px) { .hwn-grid { grid-template-columns: minmax(0, 1fr); } .hwn-card-photo { aspect-ratio: 4 / 3; } }

/* FEATURED PIECE: the photo and a card where the cover sets the price */
.block-hwn-piece { padding: clamp(24px, 4cqw, 56px) clamp(16px, 3cqw, 40px) clamp(48px, 7cqw, 112px); }
.hwn-piece-grid { --block-max: 1180px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(20px, 3cqw, 48px); align-items: center; }
.hwn-piece-photo { aspect-ratio: 4 / 5; }
.hwn-piece-card { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 14px; padding: clamp(20px, 3cqw, 40px); }
.hwn-kind { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-accent-text); }
.hwn-piece-name { font-family: var(--font-display); font-size: clamp(28px, 3.4cqw, 44px); line-height: 1.05; letter-spacing: var(--tracking-display); }
.hwn-piece-text, .hwn-note { line-height: 1.6; color: var(--color-ink-soft); }
.hwn-note { font-size: 13px; }
.hwn-cover { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; width: 100%; margin-top: 6px; }
.hwn-cover-view { flex: none; width: calc(var(--size-control-lg, 58px) * 1.5); aspect-ratio: 1; border-radius: var(--shape-card); }
.hwn-cover-view img { transition: opacity .4s ease; }
.hwn-cover-pick { display: grid; gap: 10px; }
.hwn-label { font-size: 13px; font-weight: var(--weight-semibold); }
.hwn-label span { font-weight: var(--weight-regular); color: var(--color-ink-soft); }
.hwn-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.hwn-swatch { position: relative; width: var(--size-control-sm, 48px); height: var(--size-control-sm, 48px); padding: 0; border: 0; border-radius: var(--radius-pill, 999px);
              background: transparent; cursor: pointer; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 24%, transparent); transition: transform .25s ease, box-shadow .25s ease; }
.hwn-swatch > span { position: absolute; inset: 5px; border-radius: inherit; background-size: cover; background-position: center; }
.hwn-swatch:hover, .hwn-swatch.is-hover { transform: scale(1.06); }
.hwn-swatch:focus-visible, .hwn-swatch.is-focus { outline: 2px solid rgb(var(--color-primary)); outline-offset: 2px; }
.hwn-swatch[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--color-ink); }
.hwn-piece-price { font-size: 18px; }
.hwn-piece-price b { font-family: var(--font-display); font-size: clamp(34px, 4cqw, 48px); font-variant-numeric: tabular-nums; }
.hwn-piece-card .btn { white-space: normal; }
@container (max-width: 760px) { .hwn-piece-grid { grid-template-columns: minmax(0, 1fr); } .hwn-piece-photo { aspect-ratio: 4 / 3; } }

/* MATERIALS: three tall tiles; the open one grows to twice the width on wide screens */
.block-hwn-materials { padding: clamp(24px, 4cqw, 56px) clamp(16px, 3cqw, 40px) clamp(56px, 8cqw, 128px); }
.block-hwn-materials .block-inner { --block-max: 1180px; display: grid; gap: clamp(20px, 3cqw, 36px); }
.hwn-tiles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(12px, 1.6cqw, 20px); transition: grid-template-columns .6s cubic-bezier(.22, .61, .36, 1); }
.hwn-tiles[data-open="0"] { grid-template-columns: 2fr 1fr 1fr; }
.hwn-tiles[data-open="1"] { grid-template-columns: 1fr 2fr 1fr; }
.hwn-tiles[data-open="2"] { grid-template-columns: 1fr 1fr 2fr; }
.hwn-tile { position: relative; isolation: isolate; display: grid; align-content: end; min-height: clamp(300px, 34cqw, 480px); padding: clamp(16px, 2cqw, 28px); color: #fff; cursor: pointer; }
.hwn-tile:focus-visible, .hwn-tile.is-focus { outline: 2px solid rgb(var(--color-primary)); outline-offset: -4px; border-radius: var(--shape-card); }
.hwn-tile-photo { position: absolute; inset: 0; z-index: -1; }
.hwn-tile-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .7)); transition: background .4s ease; }
.hwn-tile:hover .hwn-tile-photo::after, .hwn-tile.is-hover .hwn-tile-photo::after { background: linear-gradient(180deg, rgba(0, 0, 0, .05) 35%, rgba(0, 0, 0, .78)); }
.hwn-tile-body { display: grid; gap: 4px; }
.hwn-tile-body b { font-family: var(--font-display); font-size: clamp(22px, 2.4cqw, 32px); line-height: 1.1; letter-spacing: var(--tracking-display); }
.hwn-tile-body span { font-size: 14px; opacity: .85; }
.hwn-tile-more { display: none; max-width: 460px; margin-top: 10px; font-size: 15px; line-height: 1.55; }
.hwn-tile.is-open .hwn-tile-more { display: block; }
.hwn-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: clamp(8px, 2cqw, 24px) 0 0; padding-top: clamp(20px, 3cqw, 32px);
             border-top: 1px solid color-mix(in srgb, var(--color-ink) 18%, transparent); }
.hwn-facts dt { font-family: var(--font-display); font-size: clamp(22px, 2.4cqw, 32px); line-height: 1.1; letter-spacing: var(--tracking-display); }
.hwn-facts dd { margin: 6px 0 0; font-size: 15px; color: var(--color-ink-soft); }
@container (max-width: 700px) {
  .hwn-tiles, .hwn-tiles[data-open] { grid-template-columns: minmax(0, 1fr); }
  .hwn-tile { min-height: 220px; }
  .hwn-tile.is-open { min-height: 300px; }
}
@container (max-width: 560px) { .hwn-facts { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
@media (prefers-reduced-motion: reduce) {
  .hwn-tiles, .hwn-swatch, .hwn-cover-view img, .hwn-tile-photo::after { transition: none; animation: none; }
}
/* ---------- EIGHTH SERIES: cabins in a northern forest (kel) ---------- */
/* CABINS: the header floats in white over the night photo */
.layout--cabins > .block-nav-min { position: relative; z-index: 20; height: 0; color: #fff; mix-blend-mode: difference; }
.layout--cabins > .block-nav-min .block-inner { min-height: 72px; }
.layout--cabins > .block-nav-min .nav-min-menu .glass::after { background: #fff; box-shadow: none; border: 0; }
.layout--cabins > .block-nav-min .nav-min-menu .glass { color: #000; }

/* hero: the lit A-frame fills the first screen, the words low over the dark of the trees */
.block-kel-hero { position: relative; isolation: isolate; overflow: clip; color: #fff; }
.kel-hero-photo { position: absolute; inset: 0; border-radius: 0; z-index: -1; }
.kel-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .38), rgba(0, 0, 0, .08) 40%, rgba(0, 0, 0, .72)); }
.kel-hero-inner { display: grid; align-content: end; justify-items: start; gap: 16px; max-width: 1180px; margin: 0 auto; min-height: min(var(--screen-h, 100svh), 900px);
                  padding: 110px clamp(16px, 3cqw, 40px) clamp(28px, 5cqw, 64px); }
.kel-hero-where { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; }
.kel-hero-where b { font-weight: var(--weight-bold); margin-right: 10px; }
.kel-hero-title { font-family: var(--font-display); font-size: clamp(40px, 9.5cqw, 118px); line-height: .96; letter-spacing: var(--tracking-display); }
.kel-hero-lead { max-width: 520px; font-size: var(--text-md); line-height: 1.6; }
.kel-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.kel-hero-actions .btn { white-space: normal; }
@container (max-width: 700px) { .kel-hero-inner { padding-top: 96px; gap: 12px; } .kel-hero-lead { font-size: 15px; } }

/* chapters: the index on the left follows the scroll; each chapter is a screen with a diamond photo and the words */
.block-kel-chapters { padding: clamp(32px, 5cqw, 80px) clamp(16px, 3cqw, 40px); }
.kel-ch-inner { --block-max: 1180px; display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: clamp(20px, 3cqw, 48px); align-items: start; }
.kel-index { position: sticky; top: calc(var(--screen-h, 100svh) * .38); align-self: start; padding-left: 18px; }
.kel-index ul { list-style: none; margin: 0; padding: 0; display: grid; }
.kel-index li { height: 40px; }
.kel-index a { display: flex; align-items: center; gap: 10px; height: 40px; text-decoration: none; color: var(--color-ink-soft); font-size: 14px; letter-spacing: var(--tracking-caps, .08em); text-transform: uppercase; transition: color .4s ease; }
.kel-index a i { font-style: normal; font-size: 11px; font-variant-numeric: tabular-nums; opacity: .7; }
.kel-index a:hover, .kel-index a.is-hover { color: var(--color-ink); }
.kel-index a.is-on { color: var(--color-accent-text); }
.kel-index-mark { position: absolute; left: 0; top: 0; width: 3px; height: 40px; border-radius: var(--radius-pill, 999px); background: var(--color-accent-text);
                  transform: translateY(calc(var(--kel-on, 0) * 40px)); transition: transform .55s cubic-bezier(.22, .61, .36, 1); }
.kel-ch-list { display: grid; }
.kel-ch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4cqw, 72px); align-items: center;
          min-height: min(calc(var(--screen-h, 100svh) * .82), 760px); padding-block: clamp(20px, 3cqw, 40px); }
.kel-ch.is-flip .kel-dia-wrap { order: 2; }
/* the diamond: a square photo frame turned a quarter turn, the picture inside turned back so it stays upright; the box around it is
   as wide as the turned frame, so the corners never cross the edge */
.kel-dia-wrap { display: grid; place-items: center; width: min(100%, 594px); aspect-ratio: 1; margin: 0 auto; }
.kel-dia { width: 70.7%; aspect-ratio: 1; border-radius: 0; transform: rotate(45deg); }
.kel-dia img { transform: rotate(-45deg) scale(1.42); }
.kel-ch-copy { display: grid; justify-items: start; gap: 14px; }
.kel-ch-no { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-accent-text); font-variant-numeric: tabular-nums; }
.kel-ch-title { font-family: var(--font-display); font-size: clamp(32px, 6.4cqw, 68px); line-height: .98; letter-spacing: var(--tracking-display); }
.kel-ch-copy > p { max-width: 440px; font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }
.kel-ch-copy ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kel-ch-copy li { padding: 5px 12px; border: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); border-radius: var(--radius-pill, 999px); font-size: 13px; }
@container (max-width: 760px) {
  .kel-ch-inner { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .kel-index { position: relative; top: auto; padding-left: 0; }
  .kel-index ul { display: flex; flex-wrap: wrap; gap: 8px; }
  .kel-index li { height: auto; }
  .kel-index a { height: auto; padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); border-radius: var(--radius-pill, 999px); font-size: 12px; }
  .kel-index a.is-on { border-color: var(--color-accent-text); }
  .kel-index-mark { display: none; }
  .kel-dia-wrap { width: min(100%, 424px); }
  .kel-ch { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: clamp(20px, 6cqw, 40px); }
  .kel-ch.is-flip .kel-dia-wrap { order: 0; }
  .kel-ch-title { font-size: clamp(30px, 11cqw, 52px); }
}
/* the diamond photo comes in from its middle, the picture settling as it does (it stays turned upright all the way) */
@media (prefers-reduced-motion: no-preference) {
  .layout.rv-on .kel-dia:not(.is-in) img { transform: rotate(-45deg) scale(1.7); }
}

/* three cabins: tall cards, one column on a phone */
.block-kel-three { padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 40px); }
.block-kel-three .block-inner { --block-max: 1180px; display: grid; gap: clamp(24px, 3cqw, 40px); }
.kel-three-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2cqw, 24px); }
.kel-cabin { display: grid; grid-template-rows: auto 1fr; padding: clamp(10px, 1.2cqw, 14px); }
.kel-cabin-photo { aspect-ratio: 4 / 5; }
.kel-cabin-body { display: grid; justify-items: start; align-content: start; gap: 10px; padding: clamp(14px, 1.6cqw, 20px) clamp(6px, 1cqw, 10px) clamp(6px, 1cqw, 10px); }
.kel-cabin-body h3 { font-family: var(--font-display); font-size: clamp(24px, 2.4cqw, 30px); line-height: 1.05; letter-spacing: var(--tracking-display); }
.kel-cabin-line { font-size: var(--text-md); line-height: 1.5; color: var(--color-ink-soft); }
.kel-cabin-facts { margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; width: 100%; font-size: 13px; }
.kel-cabin-facts div { padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--color-ink) 16%, transparent); }
.kel-cabin-facts dt { color: var(--color-ink-soft); }
.kel-cabin-facts dd { margin: 2px 0 0; color: var(--color-ink); }
.kel-cabin-price { margin-top: 6px; font-size: 15px; color: var(--color-ink-soft); }
.kel-cabin-price b { font-family: var(--font-display); font-size: clamp(30px, 3cqw, 38px); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.kel-cabin-price span { font-size: 13px; }
.kel-cabin .btn { white-space: normal; margin-top: 4px; }
@container (max-width: 900px) { .kel-three-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@container (max-width: 600px) { .kel-three-grid { grid-template-columns: minmax(0, 1fr); } .kel-cabin-photo { aspect-ratio: 4 / 3; } }

/* the booking bar over the campfire, and how to get here */
.block-kel-ask { position: relative; isolation: isolate; overflow: clip; color: #fff; }
.kel-ask-photo { position: absolute; inset: 0; border-radius: 0; z-index: -1; }
.kel-ask-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, .7)); }
.kel-ask-inner { --block-max: 1180px; display: grid; justify-items: start; gap: 18px; min-height: min(calc(var(--screen-h, 100svh) * .8), 760px); align-content: center;
                 padding: clamp(48px, 7cqw, 96px) clamp(16px, 3cqw, 40px); }
.kel-ask-eyebrow { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; }
.kel-ask-title { font-family: var(--font-display); font-size: clamp(36px, 7cqw, 88px); line-height: .96; letter-spacing: var(--tracking-display); }
.kel-ask-bar { background: var(--page-bg); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr) auto; align-items: end; gap: 12px; width: min(100%, 980px); margin-top: 10px; padding: 14px; color: var(--color-ink); }
.kel-ask-bar .site-label { display: none; }
.kel-ask-bar .btn { white-space: normal; }
.kel-ask-here { display: grid; gap: 8px; max-width: 520px; margin-top: 10px; }
.kel-ask-here h3 { font-family: var(--font-display); font-size: clamp(20px, 2cqw, 24px); }
.kel-ask-here p { font-size: 15px; line-height: 1.6; }
.kel-ask-here a { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: var(--weight-semibold); text-decoration: underline; text-underline-offset: 3px; }
.kel-ask-here a svg { width: 16px; height: 16px; }
@container (max-width: 760px) { .kel-ask-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .kel-ask-bar .site-field, .kel-ask-bar .btn { grid-column: 1 / -1; } }
@container (max-width: 360px) { .kel-ask-bar { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .kel-index a, .kel-index-mark { transition: none; animation: none; }
}
/* ---------- EIGHTH SERIES: thermal spa (stw) ---------- */
/* SPA: the header floats over the photo hero in white */
.layout--spa > .block-nav-min { position: relative; z-index: 20; height: 0; color: #fff; mix-blend-mode: difference; }
.layout--spa > .block-nav-min .block-inner { min-height: 72px; }
.layout--spa > .block-nav-min .nav-min-menu .glass::after { background: #fff; box-shadow: none; border: 0; }
.layout--spa > .block-nav-min .nav-min-menu .glass { color: #000; }
.stw-kicker { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-accent-text); }
.stw-sec-title { font-family: var(--font-display); font-size: clamp(36px, 6cqw, 84px); line-height: .98; letter-spacing: var(--tracking-display); }

/* HERO: the spring fills the first screen, the words sit at its foot */
.block-stw-hero { position: relative; isolation: isolate; overflow: clip; color: #fff; }
.stw-hero-photo { position: absolute; inset: 0; border-radius: 0; z-index: -1; }
.stw-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .04) 40%, rgba(0, 0, 0, .6)); }
.layout.rv-on .stw-hero-photo img { animation: rv-drift 16s cubic-bezier(.22, .61, .36, 1) both; }
.stw-hero-inner { display: grid; justify-items: start; align-content: end; gap: 16px; min-height: min(var(--screen-h, 100svh), 900px); padding: 96px clamp(16px, 3cqw, 40px) clamp(32px, 5cqw, 72px); }
.stw-eyebrow { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; }
.stw-title { max-width: 900px; font-family: var(--font-display); font-size: clamp(42px, 8.5cqw, 120px); line-height: .95; letter-spacing: var(--tracking-display); }
.stw-lead { max-width: 520px; font-size: var(--text-md); line-height: 1.6; }
.stw-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.stw-actions .btn { white-space: normal; }
.block-stw-hero .glass--ghost { color: #fff; }

/* SIX RITUALS: the portholes, then the chosen ritual in big type */
.block-stw-rituals { padding: clamp(48px, 7cqw, 112px) clamp(16px, 3cqw, 40px) clamp(40px, 6cqw, 96px); }
.block-stw-rituals .stw-sec-title { margin: 8px 0 clamp(24px, 4cqw, 48px); }
.stw-ports { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 2cqw, 24px); }
.stw-port { display: grid; gap: 12px; justify-items: center; align-content: start; width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent;
            color: inherit; font: inherit; text-align: center; cursor: pointer; }
.stw-port-photo { width: 100%; aspect-ratio: 1; border-radius: var(--shape-round); outline: 3px solid transparent; outline-offset: 5px; transition: outline-color .3s ease; }
.stw-port-photo img { transition: transform .8s cubic-bezier(.2, .7, .1, 1); }
.stw-port:hover .stw-port-photo img, .stw-port.is-hover .stw-port-photo img { transform: scale(1.06); }
.stw-port[aria-pressed="true"] .stw-port-photo { outline-color: rgb(var(--color-primary)); }
.stw-port:focus-visible { outline: none; }
.stw-port:focus-visible .stw-port-photo, .stw-port.is-focus .stw-port-photo { outline-color: var(--color-accent-text); }
.stw-port-name { font-size: 14px; font-weight: var(--weight-semibold); line-height: 1.3; }
.stw-port[aria-pressed="true"] .stw-port-name { color: var(--color-accent-text); }
.stw-ritual { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(20px, 4cqw, 64px); align-items: end; margin-top: clamp(28px, 4cqw, 56px); padding: clamp(20px, 3.5cqw, 48px); }
.stw-ritual-main, .stw-ritual-side { display: grid; justify-items: start; gap: 12px; min-width: 0; }
.stw-ritual-no { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--color-ink-soft); }
.stw-ritual-name { font-family: var(--font-display); font-size: clamp(36px, 6.5cqw, 92px); line-height: .95; letter-spacing: var(--tracking-display); overflow-wrap: anywhere; }
.stw-ritual-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: var(--text-md); color: var(--color-ink-soft); }
.stw-ritual-meta b { margin-right: 4px; font-family: var(--font-display); font-size: clamp(28px, 3.4cqw, 44px); font-variant-numeric: tabular-nums; color: var(--color-ink); }
.stw-ritual-text { max-width: 440px; line-height: 1.65; color: var(--color-ink-soft); }
.stw-ritual .btn { white-space: normal; }
@keyframes stw-swap { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.stw-ritual.is-swap .stw-ritual-main, .stw-ritual.is-swap .stw-ritual-side { animation: stw-swap .55s cubic-bezier(.2, .7, .1, 1) both; }
@container (max-width: 700px) {
  .stw-ports { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; }
  .stw-port { gap: 8px; }
  .stw-port-name { font-size: 13px; }
  .stw-ritual { grid-template-columns: minmax(0, 1fr); }
}

/* SILENCE, WATER, HANDS: a band each, photo and words changing sides, one number that counts up */
.block-stw-values { padding: 0 clamp(16px, 3cqw, 40px); }
.stw-band { display: grid; align-items: center; min-height: min(calc(var(--screen-h, 100svh) * .7), 720px); padding-block: clamp(24px, 3.5cqw, 48px); }
.stw-band-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5cqw, 96px); align-items: center; }
.stw-band.is-flip .stw-band-photo { order: 2; }
.stw-band-photo { aspect-ratio: 4 / 5; }
.stw-band-copy { display: grid; justify-items: start; gap: 14px; }
.stw-band-no { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--color-accent-text); }
.stw-band-title { font-family: var(--font-display); font-size: clamp(40px, 7cqw, 104px); line-height: .95; letter-spacing: var(--tracking-display); }
.stw-band-text { max-width: 440px; font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }
.stw-band-fact { display: grid; gap: 2px; width: min(100%, 440px); margin-top: 10px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); }
.stw-band-fact b { font-family: var(--font-display); font-size: clamp(48px, 6cqw, 88px); line-height: 1; font-variant-numeric: tabular-nums; }
.stw-band-fact small { font-size: 14px; color: var(--color-ink-soft); }
@container (max-width: 700px) {
  .stw-band-grid { grid-template-columns: minmax(0, 1fr); }
  .stw-band.is-flip .stw-band-photo { order: 0; }
  .stw-band { min-height: 0; }
  .stw-band-photo { aspect-ratio: 4 / 3; }
}

/* RESERVE: the dial with the hours around it, the card beside it, and the house's contact under a big word */
.block-stw-reserve { padding: clamp(48px, 7cqw, 112px) clamp(16px, 3cqw, 40px) clamp(40px, 6cqw, 80px); }
.stw-res-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 5cqw, 80px); align-items: start; }
.stw-res-copy { display: grid; justify-items: start; gap: 12px; min-width: 0; }
.stw-res-lead { max-width: 460px; line-height: 1.6; color: var(--color-ink-soft); }
.stw-dial-wrap { width: 100%; margin-top: 12px; padding: clamp(24px, 4cqw, 44px); }
.stw-dial { position: relative; width: min(100%, 400px); margin: 0 auto; }
.stw-dial-face { display: grid; place-content: center; justify-items: center; gap: 4px; width: 100%; aspect-ratio: 1; text-align: center; border-radius: var(--radius-pill, 999px);
                 border: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); background: color-mix(in srgb, var(--color-ink) 6%, transparent); }
.stw-dial-label, .stw-dial-sub { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-ink-soft); }
.stw-dial-time { font-family: var(--font-display); font-size: clamp(48px, 9cqw, 96px); line-height: 1; font-variant-numeric: tabular-nums; }
.stw-dial-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
@container (min-width: 701px) {
  .stw-dial-chips { display: contents; }
  .stw-dial-chips .badge { position: absolute; left: calc(50% + cos(calc(-90deg + var(--k) * 45deg)) * 50%); top: calc(50% + sin(calc(-90deg + var(--k) * 45deg)) * 50%); translate: -50% -50%; }
}
.stw-res-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: clamp(20px, 3cqw, 36px); }
.stw-res-title { font-family: var(--font-display); font-size: clamp(24px, 2.6cqw, 32px); line-height: 1.1; letter-spacing: var(--tracking-display); }
.stw-res-card .pick-field { width: 100%; }
.stw-res-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.stw-res-hourline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 14px; color: var(--color-ink-soft); }
.stw-res-hourline b { font-family: var(--font-display); font-size: 22px; font-variant-numeric: tabular-nums; color: var(--color-ink); }
.stw-res-card .btn { white-space: normal; }
.stw-res-note { font-size: 13px; line-height: 1.5; color: var(--color-ink-soft); }
.stw-contact { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4cqw, 64px); align-items: center; margin-top: clamp(48px, 7cqw, 112px); padding-top: clamp(24px, 3cqw, 40px);
               border-top: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); }
.stw-contact-word { writing-mode: vertical-rl; transform: rotate(180deg); margin: 0; font-family: var(--font-display); font-size: clamp(48px, 6.5cqw, 92px); line-height: .9;
                    letter-spacing: var(--tracking-display); text-transform: uppercase; color: color-mix(in srgb, var(--color-ink) 16%, transparent); }
.stw-contact-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px clamp(16px, 3cqw, 40px); margin: 0; }
.stw-contact-list div { display: grid; gap: 4px; min-width: 0; }
.stw-contact-list dt { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-ink-soft); }
.stw-contact-list dd { margin: 0; font-family: var(--font-display); font-size: clamp(18px, 2cqw, 26px); line-height: 1.25; overflow-wrap: anywhere; }
.stw-contact-list a { color: inherit; text-decoration: none; }
.stw-contact-list a:hover, .stw-contact-list a.is-hover { text-decoration: underline; text-underline-offset: 4px; }
@container (max-width: 700px) {
  .stw-res-grid { grid-template-columns: minmax(0, 1fr); }
  .stw-dial-wrap { padding: 0; }
  .stw-contact { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .stw-contact-word { writing-mode: horizontal-tb; transform: none; font-size: clamp(40px, 15cqw, 96px); }
  .stw-contact-list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .stw-port-photo, .stw-port-photo img, .stw-hero-photo img, .stw-ritual.is-swap .stw-ritual-main, .stw-ritual.is-swap .stw-ritual-side { transition: none; animation: none; }
}
/* ---------- EIGHTH SERIES: guided expeditions (nbd) ---------- */
/* HERO: a tall portrait on the left, the name letter by letter on the right; on a phone the photo on top, the name in two lines below */
.block-nbd-hero { padding: 0; overflow: clip; }
.nbd-hero-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: stretch; }
.nbd-hero-photo { border-radius: 0; height: min(var(--screen-h, 100svh), 900px); }
.nbd-hero-copy { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: start; gap: clamp(14px, 1.8cqw, 22px); padding: clamp(32px, 5cqw, 72px) clamp(20px, 5cqw, 80px); }
.nbd-kicker { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-accent-text); }
.nbd-name { display: flex; flex-wrap: wrap; justify-self: stretch; width: 100%; margin: 0; font-family: var(--font-display); font-size: clamp(34px, 5.6cqw, 104px); font-weight: var(--weight-bold); line-height: .92; letter-spacing: .14em; }
.nbd-name-w { display: inline-flex; }
.nbd-name .rv-ln { display: inline-block; padding-bottom: .06em; margin-bottom: -.06em; }
.nbd-lead { max-width: 560px; font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }
.nbd-facts { display: flex; flex-wrap: wrap; gap: 12px clamp(20px, 3cqw, 44px); margin: 6px 0 0; }
.nbd-facts div { min-width: 0; }
.nbd-facts dt { font-size: 12px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-ink-soft); }
.nbd-facts dd { margin: 4px 0 0; font-family: var(--font-display); font-size: clamp(20px, 2cqw, 26px); line-height: 1.1; }
.nbd-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.nbd-actions .btn { white-space: normal; }
@container (max-width: 1000px) { .nbd-name { font-size: clamp(34px, 7.6cqw, 104px); } }
@container (max-width: 700px) {
  .nbd-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .nbd-hero-photo { height: auto; aspect-ratio: 4 / 5; }
  .nbd-hero-copy { padding: clamp(24px, 6cqw, 40px) 16px 28px; }
  .nbd-name { font-size: clamp(36px, 13.6cqw, 120px); letter-spacing: .1em; }
  .nbd-facts { gap: 12px 24px; }
}

/* TILES: word tiles tinted from the kit and photos between them, three by two; on a phone two columns, the photos across both */
.block-nbd-tiles { padding: 0 clamp(16px, 3cqw, 40px); }
.block-nbd-tiles > .block-inner { padding-block: clamp(48px, 7cqw, 112px); }
.block-nbd-tiles .sec-head { margin-bottom: clamp(24px, 3cqw, 40px); }
.nbd-mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4cqw, 18px); }
.nbd-tile { aspect-ratio: 1; border-radius: var(--shape-card); min-width: 0; }
.nbd-tile--word { display: grid; align-content: end; gap: 10px; padding: clamp(18px, 2.6cqw, 32px); color: var(--color-ink); }
.nbd-tile--word.is-tone-1 { background: rgba(var(--color-primary), .16); }
.nbd-tile--word.is-tone-2 { background: rgba(var(--color-secondary), .14); }
.nbd-tile--word.is-tone-3 { background: color-mix(in srgb, var(--color-ink) 10%, transparent); }
.nbd-tile-word { font-family: var(--font-display); font-size: clamp(24px, 3.4cqw, 48px); line-height: 1; letter-spacing: var(--tracking-display); overflow-wrap: anywhere; }
.nbd-tile-text { font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-soft); max-width: 30ch; }
@container (max-width: 700px) {
  .block-nbd-tiles > .block-inner { padding-top: 36px; }
  .nbd-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; }
  .nbd-tile--photo { grid-column: span 2; aspect-ratio: 16 / 10; }
  .nbd-tile--word { aspect-ratio: auto; min-height: 44cqw; padding: 16px; }
  .nbd-tile--word:nth-child(5) { grid-column: span 2; min-height: 0; }
  .nbd-tile-word { font-size: clamp(20px, 7cqw, 40px); }
}

/* TRIPS: three numbers that count up, then the routes as cards */
.block-nbd-trips { padding: clamp(24px, 4cqw, 56px) clamp(16px, 3cqw, 40px) clamp(56px, 7cqw, 112px); }
.nbd-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 clamp(40px, 6cqw, 88px); padding: clamp(20px, 3cqw, 36px) 0;
            border-top: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); }
.nbd-band div { min-width: 0; }
.nbd-band dt b { display: block; font-family: var(--font-display); font-size: clamp(40px, 6cqw, 96px); font-weight: var(--weight-bold); line-height: 1; letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.nbd-band dd { margin: 8px 0 0; font-size: var(--text-sm); line-height: 1.4; color: var(--color-ink-soft); }
.nbd-trips-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(24px, 3cqw, 40px); }
.nbd-trips-head > div { min-width: 0; }
.nbd-trips-head .btn { white-space: normal; }
.nbd-trips-title { font-family: var(--font-display); font-size: clamp(32px, 5cqw, 72px); line-height: 1; letter-spacing: var(--tracking-display); overflow-wrap: anywhere; }
.nbd-trips-lead { max-width: 560px; margin-top: 12px; line-height: 1.6; color: var(--color-ink-soft); }
.nbd-trips-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.8cqw, 24px); }
.nbd-trip { display: grid; gap: 14px; min-width: 0; align-content: start; }
.nbd-trip-photo { aspect-ratio: 4 / 5; }
.nbd-trip-body { display: grid; gap: 6px; }
.nbd-trip-no { font-size: 12px; color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.nbd-trip h3 { font-family: var(--font-display); font-size: clamp(20px, 1.9cqw, 26px); line-height: 1.1; letter-spacing: var(--tracking-display); }
.nbd-trip-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--text-sm); color: var(--color-ink-soft); }
.nbd-trip-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 4px; }
.nbd-trip-foot .btn { white-space: normal; }
.nbd-trip-price { font-size: 13px; color: var(--color-ink-soft); }
.nbd-trip-price b { font-family: var(--font-display); font-size: 20px; font-weight: var(--weight-bold); color: var(--color-ink); }
@container (max-width: 1000px) { .nbd-trips-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 700px) { .nbd-band { gap: 10px; } .nbd-band dt b { font-size: clamp(28px, 11cqw, 56px); } .nbd-band dd { font-size: 12px; } }
@container (max-width: 460px) { .nbd-trips-grid { grid-template-columns: minmax(0, 1fr); } .nbd-trip-photo { aspect-ratio: 4 / 3; } }

/* JOIN: a photo band with the card that asks for a place */
.block-nbd-join { position: relative; isolation: isolate; overflow: clip; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 40px); }
.nbd-join-photo { position: absolute; inset: 0; border-radius: 0; z-index: -1; }
.nbd-join-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .5)); }
.nbd-join-inner { display: grid; justify-items: end; align-content: center; min-height: min(calc(var(--screen-h, 100svh) * .8), 780px); }
.nbd-join-card { width: min(100%, 540px); display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 12px; padding: clamp(20px, 3cqw, 36px); background: var(--page-bg); color: var(--color-ink); }
.nbd-join-title { font-family: var(--font-display); font-size: clamp(28px, 3.4cqw, 44px); line-height: 1.02; letter-spacing: var(--tracking-display); overflow-wrap: anywhere; }
.nbd-join-lead { line-height: 1.6; color: var(--color-ink-soft); }
.nbd-join-card .pick-field { width: 100%; }
.nbd-join-label { margin-top: 4px; font-size: 13px; font-weight: var(--weight-semibold); }
.nbd-months { display: flex; flex-wrap: wrap; gap: 8px; }
.nbd-join-form { display: grid; justify-items: start; gap: 12px; width: 100%; }
.nbd-join-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; width: 100%; }
.nbd-join-card .btn { white-space: normal; }
.nbd-join-note { font-size: 13px; line-height: 1.5; color: var(--color-ink-soft); }
.nbd-gear { margin: 0; padding: 0 0 0 18px; display: grid; gap: 6px; line-height: 1.5; }
@container (max-width: 700px) {
  .nbd-join-inner { justify-items: stretch; min-height: 0; }
  .nbd-join-card { width: 100%; padding: 18px 16px; }
  .nbd-join-row { grid-template-columns: minmax(0, 1fr); }
}

/* the trip photo leans in under the pointer */
@media (prefers-reduced-motion: no-preference) {
  .nbd-trip-photo img { transition: transform .9s cubic-bezier(.2, .7, .1, 1); }
  .nbd-trip:hover .nbd-trip-photo img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { .nbd-trip-photo img { transition: none; animation: none; } }
/* ---------- EIGHTH SERIES: stone works (ard) ---------- */
/* STONE: the header floats over the white marble, in its own colour */
.layout--stone > .block-nav-min { position: relative; z-index: 20; height: 0; }
.layout--stone > .block-nav-min .block-inner { min-height: 72px; }
.block-ard-hero { position: relative; isolation: isolate; overflow: clip; }
.ard-hero-photo { position: absolute; inset: 0; border-radius: 0; z-index: -1; }
.ard-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .04) 38%, rgba(255, 255, 255, .74)); }
.ard-hero-inner { display: grid; align-content: end; justify-items: start; gap: 16px; min-height: min(var(--screen-h, 100svh), 900px); padding: 96px clamp(16px, 3cqw, 40px) clamp(28px, 5cqw, 64px); }
.ard-brand { font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; }
.ard-title { font-family: var(--font-display); font-size: clamp(40px, 7.4cqw, 112px); line-height: .96; letter-spacing: var(--tracking-display); max-width: 12em; }
.ard-lead { max-width: 520px; font-size: var(--text-md); line-height: 1.6; }
.ard-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.ard-actions .btn { white-space: normal; }
@container (max-width: 700px) { .ard-hero-inner { min-height: min(var(--screen-h, 100svh), 760px); } }

/* the bands: a photo edge to edge on one side, the giant number on the other, a ghost word drawn behind */
.ard-band { position: relative; isolation: isolate; overflow: clip; }
.ard-ghost { position: absolute; z-index: -1; top: 8%; right: 6cqw; width: 44cqw; margin: 0; pointer-events: none; user-select: none; }
.ard-ghost svg { display: block; width: 100%; height: auto; overflow: visible; }
.ard-ghost text { font-family: var(--font-display); font-weight: var(--weight-bold); fill: none; stroke: color-mix(in srgb, var(--color-ink) 25%, transparent); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.ard-band.is-flip .ard-ghost { right: auto; left: 6cqw; }
.ard-band-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(calc(var(--screen-h, 100svh) * .7), 720px); }
.ard-band.is-flip .ard-band-photo { order: 2; }
.ard-band-photo { height: 100%; min-height: 320px; border-radius: 0; }
.ard-band-copy { display: grid; align-content: center; justify-items: start; gap: 10px; padding: clamp(32px, 5cqw, 80px) clamp(20px, 5cqw, 96px); }
.ard-chapter { display: inline-flex; align-items: baseline; gap: 10px; font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-accent-text); }
.ard-chapter i { font-style: normal; font-weight: var(--weight-regular); color: var(--color-ink-soft); }
.ard-big { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; font-family: var(--font-display); font-size: clamp(84px, 15cqw, 220px); line-height: .85; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ard-big small { font-size: .28em; letter-spacing: 0; color: var(--color-ink-soft); }
.ard-big-label { font-size: var(--text-md); color: var(--color-ink-soft); }
.ard-band-title { margin-top: 14px; font-family: var(--font-display); font-size: clamp(30px, 3.6cqw, 56px); line-height: 1; letter-spacing: var(--tracking-display); }
.ard-band-text { max-width: 440px; line-height: 1.6; color: var(--color-ink-soft); }
@container (max-width: 700px) {
  .ard-band-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ard-band.is-flip .ard-band-photo { order: 0; }
  .ard-band-photo { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .ard-band-copy { padding: clamp(24px, 6cqw, 40px) clamp(16px, 5cqw, 32px) clamp(32px, 8cqw, 48px); }
  .ard-big { font-size: clamp(64px, 22cqw, 120px); max-width: 100%; }
  .ard-ghost { top: calc(75cqw + 8cqw); right: 9cqw; width: 60cqw; }
  .ard-band.is-flip .ard-ghost { left: auto; right: 9cqw; }
}

/* the stones in the yard */
.block-ard-stones { padding: clamp(56px, 8cqw, 128px) clamp(16px, 3cqw, 40px) clamp(40px, 6cqw, 96px); }
.ard-stones-head { display: grid; justify-items: start; gap: 12px; max-width: 720px; margin-bottom: clamp(28px, 4cqw, 56px); }
.ard-stones-title { font-family: var(--font-display); font-size: clamp(34px, 5cqw, 72px); line-height: .98; letter-spacing: var(--tracking-display); }
.ard-stones-lead { max-width: 560px; line-height: 1.6; color: var(--color-ink-soft); }
.ard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4cqw, 32px); }
.ard-tile { margin: 0; min-width: 0; }
.ard-tile-link { display: grid; gap: 12px; color: inherit; text-decoration: none; }
.ard-tile-photo { aspect-ratio: 4 / 3; }
.ard-tile-photo img { transition: transform .8s cubic-bezier(.2, .7, .1, 1); }
.ard-tile-link:hover .ard-tile-photo img, .ard-tile.is-hover .ard-tile-photo img { transform: scale(1.04); }
.ard-tile-body { display: grid; justify-items: start; gap: 4px; }
.ard-tile-body h3 { font-family: var(--font-display); font-size: clamp(20px, 2cqw, 26px); line-height: 1.1; letter-spacing: var(--tracking-display); }
.ard-origin { font-size: 14px; color: var(--color-ink-soft); }
.ard-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ard-chips span { padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); border-radius: var(--radius-pill, 999px); font-size: 12px; }
.ard-modal-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
@container (max-width: 900px) { .ard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 350px) { .ard-grid { grid-template-columns: minmax(0, 1fr); } }

/* the quote: a photo and the card */
.block-ard-quote { padding: 0 clamp(16px, 3cqw, 40px) clamp(56px, 8cqw, 128px); }
.ard-quote-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4cqw, 64px); }
.ard-quote-photo { height: 100%; min-height: 360px; }
.ard-quote-card { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 14px; padding: clamp(20px, 3cqw, 40px); }
.ard-quote-title { font-family: var(--font-display); font-size: clamp(30px, 3.6cqw, 48px); line-height: 1; letter-spacing: var(--tracking-display); }
.ard-quote-lead { line-height: 1.6; color: var(--color-ink-soft); }
.ard-quote-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; width: 100%; }
.ard-quote-row .site-field, .ard-quote-row .pick-field, .ard-quote-row .field { min-width: 0; width: 100%; }
.ard-quote-card .btn { white-space: normal; }
.ard-facts { list-style: none; width: 100%; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); display: grid; gap: 8px; font-size: 14px; color: var(--color-ink-soft); }
.ard-facts li { display: flex; align-items: center; gap: 10px; }
.ard-facts li::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--color-ink); }
@container (max-width: 700px) {
  .ard-quote-grid { grid-template-columns: minmax(0, 1fr); }
  .ard-quote-photo { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
}
@container (max-width: 380px) { .ard-quote-row { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) { .ard-tile-photo img { transition: none; } }
/* ---------- EIGHTH SERIES: island resort (atl) ---------- */
/* ISLAND: the header floats in white over the lagoon */
.layout--island > .block-nav-min { position: relative; z-index: 20; height: 0; color: #fff; mix-blend-mode: difference; }
.layout--island > .block-nav-min .block-inner { min-height: 72px; }
.layout--island > .block-nav-min .nav-min-menu .glass::after { background: #fff; box-shadow: none; border: 0; }
.layout--island > .block-nav-min .nav-min-menu .glass { color: #000; }

/* the floating screen */
.block-atl-screen { position: relative; isolation: isolate; overflow: clip; display: grid; justify-items: center; align-content: center; gap: 14px;
                    min-height: min(var(--screen-h, 100svh), 960px); padding: 88px clamp(16px, 3cqw, 40px) clamp(20px, 3cqw, 36px); }
.atl-backdrop { position: absolute; inset: 0; z-index: -1; border-radius: 0; }
.atl-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .18)); }
.atl-screen { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; width: min(92cqw, 1100px);
              height: min(calc(var(--screen-h, 100svh) * .78), 760px); min-height: 460px; padding: 10px; }
.atl-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 2px 2px 0; }
.atl-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.atl-tabs .btn, .atl-slide-act .btn { white-space: normal; }
.atl-arrows { display: flex; gap: 6px; }
.atl-stage { position: relative; min-height: 0; border-radius: var(--shape-card); overflow: clip; }
.atl-slide { position: absolute; inset: 0; visibility: hidden; clip-path: inset(0 0 100% 0); color: #fff; }
.atl-slide.is-prev { visibility: visible; clip-path: inset(0); z-index: 1; }
.atl-slide.is-active { visibility: visible; clip-path: inset(0); z-index: 2; }
.atl-slide-photo { position: absolute; inset: 0; border-radius: 0; }
.atl-slide-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .62)); }
.atl-slide-copy { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: start; gap: 10px; padding: clamp(18px, 3cqw, 40px); }
.atl-slide-eyebrow { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; }
.atl-slide-title { font-family: var(--font-display); font-size: clamp(30px, 5.2cqw, 68px); line-height: .98; letter-spacing: var(--tracking-display); max-width: 14ch; }
.atl-ln { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; margin-bottom: -.06em; }
.atl-ln > span { display: inline-block; }
.atl-slide-line { max-width: 480px; font-size: var(--text-md); line-height: 1.55; }
.atl-slide-act { padding-top: 4px; }
.atl-place { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: #fff; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .atl-slide.is-active { transition: clip-path .9s cubic-bezier(.7, 0, .2, 1); }
  .atl-slide.is-active .atl-ln > span { animation: atl-rise .95s cubic-bezier(.2, .75, .1, 1) both; animation-delay: calc(.25s + var(--ln, 0) * 110ms); }
  .atl-slide.is-active .atl-slide-eyebrow, .atl-slide.is-active .atl-slide-line, .atl-slide.is-active .atl-slide-act { animation: atl-up .8s cubic-bezier(.22, .61, .36, 1) both; }
  .atl-slide.is-active .atl-slide-eyebrow { animation-delay: .2s; }
  .atl-slide.is-active .atl-slide-line { animation-delay: .5s; }
  .atl-slide.is-active .atl-slide-act { animation-delay: .6s; }
  .atl-slide.is-active .atl-slide-photo img { animation: atl-settle 1.6s cubic-bezier(.2, .7, .1, 1) both; }
}
@keyframes atl-rise { from { transform: translateY(112%); } to { transform: none; } }
@keyframes atl-up { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes atl-settle { from { transform: scale(1.08); } to { transform: none; } }
@container (max-width: 700px) {
  .block-atl-screen { padding: 0; gap: 0; min-height: 0; }
  .atl-screen { width: 100%; height: var(--screen-h, 100svh); min-height: 560px; border-radius: var(--radius-control); padding: 76px 8px 8px; }
  .atl-bar { padding: 0 2px 8px; }
  .atl-arrows { display: none; }
  .atl-tabs { gap: 4px; }
  .atl-slide-title { font-size: clamp(30px, 11cqw, 48px); }
  .atl-place { display: none; }
}

/* six villas */
.block-atl-villas { padding: clamp(48px, 7cqw, 110px) clamp(16px, 3cqw, 40px); }
.atl-head { display: grid; justify-items: start; gap: 12px; max-width: 720px; margin-bottom: clamp(24px, 4cqw, 48px); }
.atl-eyebrow { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-accent-text); }
.atl-title { font-family: var(--font-display); font-size: clamp(32px, 4.8cqw, 64px); line-height: .98; letter-spacing: var(--tracking-display); }
.atl-lead { font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); max-width: 560px; }
.atl-villas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2cqw, 28px); }
.atl-villa { display: grid; gap: 0; align-content: start; }
.atl-villa-photo { aspect-ratio: 4 / 3; }
.atl-villa-body { display: grid; justify-items: start; gap: 10px; padding: 16px 4px 0; }
.atl-villa-body h3 { font-family: var(--font-display); font-size: clamp(22px, 2.2cqw, 30px); line-height: 1.1; letter-spacing: var(--tracking-display); }
.atl-villa-body > p { line-height: 1.55; color: var(--color-ink-soft); }
.atl-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.atl-facts li { padding: 4px 11px; border: 1px solid color-mix(in srgb, var(--color-ink) 18%, transparent); border-radius: var(--radius-pill, 999px); font-size: 13px; }
.atl-villa-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; width: 100%; padding-top: 6px; }
.atl-villa-foot .btn { white-space: normal; }
.atl-price { font-size: 13px; color: var(--color-ink-soft); }
.atl-price b { font-family: var(--font-display); font-size: 20px; color: var(--color-ink); font-variant-numeric: tabular-nums; }
@container (max-width: 900px) { .atl-villas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 600px) { .atl-villas { grid-template-columns: minmax(0, 1fr); } }

/* a day at the atoll: the hours pass sideways as you scroll */
.block-atl-day { padding: clamp(48px, 7cqw, 110px) 0; }
.atl-pin { display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 2.4cqw, 32px); }
.atl-day-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding: 0 clamp(16px, 3cqw, 40px); }
.atl-day-title { font-family: var(--font-display); font-size: clamp(36px, 7cqw, 104px); line-height: .92; letter-spacing: var(--tracking-display); }
.atl-day-head p { font-size: 14px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-ink-soft); }
.atl-track { display: flex; gap: clamp(14px, 2cqw, 28px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
             padding: 0 clamp(16px, 3cqw, 40px); scroll-padding-inline: clamp(16px, 3cqw, 40px); }
.atl-track::-webkit-scrollbar { display: none; }
.atl-moment { flex: 0 0 clamp(220px, 26cqw, 340px); display: grid; gap: 8px; align-content: start; scroll-snap-align: start; padding-top: 14px;
              border-top: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); }
.atl-moment-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.atl-time { font-family: var(--font-display); font-size: clamp(26px, 3cqw, 40px); line-height: 1; letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.atl-moment-photo { flex: 0 0 auto; width: clamp(64px, 7cqw, 96px); aspect-ratio: 1; border-radius: var(--radius-pill, 999px); }
.atl-moment h3 { font-size: clamp(17px, 1.7cqw, 21px); font-weight: var(--weight-semibold); line-height: 1.2; }
.atl-moment p { font-size: 14px; line-height: 1.55; color: var(--color-ink-soft); }
.atl-progress { height: 2px; margin: 0 clamp(16px, 3cqw, 40px); background: color-mix(in srgb, var(--color-ink) 14%, transparent); overflow: hidden; }
.atl-progress i { display: block; height: 100%; background: var(--color-ink); transform-origin: 0 50%; transform: scaleX(max(.08, var(--p, 0))); transition: transform .2s linear; }
.block-atl-day.is-pinned { padding-block: 0; }
.block-atl-day.is-pinned .atl-pin { position: sticky; top: 0; height: var(--pin-h, 100svh); overflow: hidden; padding-block: 88px 32px; }
.block-atl-day.is-pinned .atl-track { overflow: visible; scroll-snap-type: none; will-change: transform; }
@container (max-width: 640px) {
  .atl-track { flex-direction: column; gap: 18px; overflow: visible; scroll-snap-type: none; }
  .atl-moment { flex-basis: auto; }
  .atl-moment-photo { width: 72px; }
  .atl-progress { display: none; }
}

/* the booking bar over the white beach */
.block-atl-book { position: relative; isolation: isolate; overflow: clip; padding: clamp(48px, 8cqw, 120px) clamp(16px, 3cqw, 40px); }
.atl-book-photo { position: absolute; inset: 0; z-index: -1; border-radius: 0; }
.atl-book-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .3)); }
.atl-book-inner { --block-max: 980px; }
.atl-book { display: grid; gap: 18px; padding: clamp(20px, 3cqw, 36px); background: var(--page-bg); }
.atl-book-title { font-family: var(--font-display); font-size: clamp(28px, 3.6cqw, 48px); line-height: 1; letter-spacing: var(--tracking-display); }
.atl-book-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr) auto; align-items: end; gap: 10px; }
.atl-book-fields .btn { white-space: normal; }
.atl-book-note { font-size: 13px; line-height: 1.55; color: var(--color-ink-soft); }
@container (max-width: 860px) { .atl-book-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .atl-book-fields .site-field, .atl-book-fields .btn { grid-column: 1 / -1; } }
@container (max-width: 380px) { .atl-book-fields { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .atl-slide, .atl-slide *, .atl-progress i { transition: none; animation: none; }
}
/* ---------- EIGHTH SERIES: modular timber houses (nst) ---------- */
/* HERO: the name huge across the page, the house photo standing in front of its lower half */
.block-nst-hero { --nst-word: calc(clamp(72px, 30cqw, 400px) * var(--nst-fit, 1)); padding: clamp(8px, 2cqw, 24px) clamp(16px, 3cqw, 40px) clamp(32px, 4cqw, 64px); overflow: clip; }
.nst-hero-inner { --block-max: 1280px; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.nst-word { width: 100%; min-width: 0; max-width: 100%; margin: 0; text-align: center; font-family: var(--font-display); font-size: var(--nst-word); font-weight: var(--weight-bold);
            line-height: .82; letter-spacing: -.03em; white-space: nowrap; color: var(--color-ink); }
.nst-word .rv-ln { padding: .16em 0 .12em; margin: -.16em 0 -.12em; }   /* the frame the word rises into must not cut its top */
.nst-hero-photo { position: relative; z-index: 1; width: min(100%, 70cqw); aspect-ratio: 16 / 9; margin-top: calc(var(--nst-word) * -.36); }
.nst-hero-copy { display: grid; justify-items: center; gap: 18px; max-width: 640px; margin-top: clamp(24px, 3cqw, 40px); text-align: center; }
.nst-hero-lead { font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }
.nst-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.nst-hero-actions .btn { white-space: normal; }
.nst-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; max-width: 900px; margin: clamp(32px, 4cqw, 56px) 0 0; padding-top: 20px;
             border-top: 1px solid color-mix(in srgb, var(--color-ink) 16%, transparent); text-align: center; }
.nst-stats dt { display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.nst-stats b { font-family: var(--font-display); font-size: clamp(30px, 4cqw, 56px); line-height: 1; font-variant-numeric: tabular-nums; }
.nst-stats small { font-size: 14px; color: var(--color-ink-soft); }
.nst-stats dd { margin: 6px 0 0; font-size: 13px; color: var(--color-ink-soft); }
@container (max-width: 700px) { .nst-hero-photo { width: 100%; } .nst-stats { gap: 8px; } .nst-stats b { font-size: 28px; } .nst-stats small { font-size: 12px; } }

/* STORY: slashed lines in the middle, four small photos set off the grid around them */
.block-nst-story { padding: clamp(32px, 4cqw, 56px) clamp(16px, 3cqw, 40px) clamp(40px, 5cqw, 72px); }
.nst-story-grid { --block-max: 1280px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2.4cqw, 32px); align-items: start; }
.nst-story-text { grid-column: 4 / 10; grid-row: 1 / 3; align-self: center; display: grid; justify-items: start; gap: 18px; padding-block: clamp(24px, 5cqw, 80px); }
.nst-story-kind, .nst-kind { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-accent-text); }
.nst-story-title { font-family: var(--font-display); font-size: clamp(22px, 2.6cqw, 38px); line-height: 1.15; letter-spacing: var(--tracking-display); }
.nst-story-text > p:not(.nst-story-kind) { max-width: 520px; font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }
.nst-story-text .btn { white-space: normal; }
.nst-p { min-width: 0; }
.nst-p1 { grid-column: 1 / 4; grid-row: 1; aspect-ratio: 4 / 5; margin-top: clamp(16px, 3cqw, 48px); }
.nst-p2 { grid-column: 10 / 13; grid-row: 1; aspect-ratio: 1; margin-top: clamp(40px, 10cqw, 140px); }
.nst-p3 { grid-column: 2 / 4; grid-row: 2; aspect-ratio: 3 / 4; margin-top: clamp(-32px, -2cqw, 0px); }
.nst-p4 { grid-column: 9 / 12; grid-row: 2; aspect-ratio: 4 / 5; margin-top: clamp(8px, 2cqw, 32px); }
@container (max-width: 700px) {
  .nst-story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .nst-story-text { grid-column: 1 / -1; grid-row: 1; padding-block: 0 16px; }
  .nst-p { grid-column: auto; grid-row: auto; margin-top: 0; aspect-ratio: 4 / 5; }
}

/* SIZES: three cards floating at different heights */
.block-nst-sizes { padding: clamp(40px, 5cqw, 80px) clamp(16px, 3cqw, 40px); }
.block-nst-sizes .block-inner { --block-max: 1180px; }
.nst-sizes-head { display: grid; justify-items: center; gap: 12px; max-width: 640px; margin: 0 auto clamp(32px, 5cqw, 64px); text-align: center; }
.nst-sizes-title { font-family: var(--font-display); font-size: clamp(32px, 4.6cqw, 64px); line-height: 1; letter-spacing: var(--tracking-display); }
.nst-sizes-lead { font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }
.nst-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4cqw, 28px); align-items: start; }
.nst-card { display: grid; gap: 14px; padding: clamp(12px, 1.4cqw, 16px); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.nst-card:nth-child(odd) { margin-top: clamp(24px, 4cqw, 56px); }
.nst-card:hover, .nst-card.is-hover { transform: translateY(-6px); }
.nst-card-photo { aspect-ratio: 4 / 3; }
.nst-card-body { display: grid; justify-items: start; gap: 8px; padding: 4px clamp(4px, .8cqw, 12px) clamp(8px, 1cqw, 12px); }
.nst-card-size { font-family: var(--font-display); font-size: clamp(40px, 5cqw, 72px); line-height: .9; letter-spacing: -.02em; color: var(--color-accent-text); }
.nst-card-body h3 { margin: 0; font-family: var(--font-display); font-size: clamp(22px, 2cqw, 28px); line-height: 1.1; letter-spacing: var(--tracking-display); }
.nst-card-area { font-size: 14px; color: var(--color-ink-soft); }
.nst-card-body ul { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; }
.nst-card-body li { position: relative; padding-left: 16px; }
.nst-card-body li::before { content: "/"; position: absolute; left: 0; color: var(--color-accent-text); }
.nst-card-price { margin-top: 4px; font-size: 14px; color: var(--color-ink-soft); }
.nst-card-price b { font-family: var(--font-display); font-size: clamp(24px, 2.4cqw, 32px); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.nst-card .btn { white-space: normal; }
@container (max-width: 700px) { .nst-cards { grid-template-columns: minmax(0, 1fr); } .nst-card:nth-child(odd) { margin-top: 0; } }

/* CONFIGURATOR: the photo swaps with the cladding, the total follows every choice */
.block-nst-build { padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 40px) clamp(56px, 8cqw, 128px); }
.nst-build-grid { --block-max: 1280px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(20px, 3cqw, 48px); align-items: center; }
.nst-stage { position: relative; display: grid; }
.nst-shot { grid-area: 1 / 1; aspect-ratio: 4 / 3; opacity: 0; transition: opacity .7s ease; }
.nst-shot.is-on { opacity: 1; }
.nst-build-card { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 12px; padding: clamp(20px, 3cqw, 36px); }
.nst-build-title { font-family: var(--font-display); font-size: clamp(30px, 3.6cqw, 48px); line-height: 1; letter-spacing: var(--tracking-display); }
.nst-build-lead { line-height: 1.6; color: var(--color-ink-soft); }
.nst-build-label { margin-top: 6px; font-size: 13px; font-weight: var(--weight-semibold); }
.nst-build-label span { font-weight: var(--weight-regular); color: var(--color-ink-soft); }
.nst-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nst-vals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; margin: 4px 0; }
.nst-vals dt { font-size: 12px; color: var(--color-ink-soft); }
.nst-vals dd { margin: 2px 0 0; font-family: var(--font-display); font-size: clamp(16px, 2cqw, 24px); line-height: 1.15; font-variant-numeric: tabular-nums; }
.nst-swatches { display: flex; gap: 10px; }
.nst-swatch { position: relative; width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--radius-pill, 999px); background: transparent; cursor: pointer;
              box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 20%, transparent); transition: transform .25s ease; }
.nst-swatch::before { content: ""; position: absolute; inset: 4px; border-radius: inherit; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.nst-swatch:hover, .nst-swatch.is-hover { transform: scale(1.08); }
.nst-swatch[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--color-ink); }
.nst-total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; width: 100%; padding-top: 12px;
             border-top: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); font-size: 14px; }
.nst-total .nst-sum { color: var(--color-ink-soft); }
.nst-total strong { font-size: 16px; white-space: nowrap; }
.nst-total b { font-family: var(--font-display); font-size: clamp(26px, 3cqw, 36px); font-variant-numeric: tabular-nums; }
.nst-build-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.nst-build-actions .btn { white-space: normal; }
@container (max-width: 820px) { .nst-build-grid { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 420px) { .nst-vals { gap: 8px; } .nst-build-actions, .nst-build-actions .mgn, .nst-build-actions .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .nst-shot, .nst-card, .nst-swatch { transition: none; animation: none; } }
/* ---------- EIGHTH SERIES: smart home system (dwl) ---------- */
/* SMART HOME: the header floats over the photo in white */
.layout--smarthome > .block-nav-min { position: relative; z-index: 20; height: 0; color: #fff; mix-blend-mode: difference; }
.layout--smarthome > .block-nav-min .block-inner { min-height: 72px; }
.layout--smarthome > .block-nav-min .nav-min-menu .glass::after { background: #fff; box-shadow: none; border: 0; }
.layout--smarthome > .block-nav-min .nav-min-menu .glass { color: #000; }

/* HERO: the kitchen at dusk fills the first screen; the words on the left, the panel of widgets on the right */
.block-dwl-hero { position: relative; isolation: isolate; overflow: clip; color: #fff; }
.dwl-hero-photo { position: absolute; inset: 0; border-radius: 0; z-index: -1; }
.dwl-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .25) 45%, rgba(0, 0, 0, .7)); }
.dwl-hero-inner { --block-max: 1180px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4cqw, 72px);
                  min-height: min(var(--screen-h, 100svh), 900px); padding: 104px clamp(16px, 3cqw, 40px) clamp(32px, 5cqw, 72px); }
.dwl-hero-copy { display: grid; justify-items: start; gap: 18px; }
.dwl-eyebrow { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; opacity: .85; }
.dwl-title { font-family: var(--font-display); font-size: clamp(40px, 6.2cqw, 88px); line-height: .98; letter-spacing: var(--tracking-display); }
.dwl-lead { max-width: 480px; font-size: var(--text-md); line-height: 1.6; opacity: .9; }
.dwl-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.dwl-actions .btn { white-space: normal; }
.block-dwl-hero .glass--ghost { color: #fff; }

/* the panel: a card of four widgets that really work */
.dwl-panel { display: grid; gap: 16px; width: min(100%, 520px); justify-self: end; padding: clamp(16px, 2cqw, 24px); background: var(--page-bg); color: var(--color-ink); }   /* solid, so the widgets read over any photo */
.dwl-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px; }
.dwl-panel-name { font-family: var(--font-display); font-size: 20px; letter-spacing: var(--tracking-display); }
.dwl-panel-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-ink-soft); }
.dwl-panel-status i { width: 8px; height: 8px; border-radius: var(--radius-pill, 999px); background: rgb(var(--color-primary-light)); box-shadow: 0 0 10px rgb(var(--color-primary-light)); }
.dwl-widgets { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.dwl-widget { display: grid; align-content: start; justify-items: start; gap: 12px; min-width: 0; padding: 14px; border: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); border-radius: var(--radius-card); }
.dwl-widget--lights { grid-row: span 2; }
.dwl-w-label { font-size: 12px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-ink-soft); }
.dwl-w-note { font-size: 13px; color: var(--color-ink-soft); }
.dwl-w-note b { color: var(--color-accent-text); font-weight: var(--weight-semibold); }
.dwl-lock { white-space: normal; }
.dwl-lock svg { width: 18px; height: 18px; flex: none; }
.dwl-lock .dwl-shackle-open { display: none; }
.dwl-lock[aria-pressed="false"] .dwl-shackle { display: none; }
.dwl-lock[aria-pressed="false"] .dwl-shackle-open { display: block; }
.dwl-lock .glass-label { gap: 8px; }
.dwl-widget--lights .dwl-rooms { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; width: 100%; }
.dwl-room { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; }
.dwl-room-name { font-size: 14px; }
.dwl-room-val { font-size: 13px; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; color: var(--color-accent-text); min-width: 3ch; text-align: right; }
.dwl-room:has(.switch[aria-checked="false"]) .dwl-room-val { color: var(--color-ink-soft); font-weight: var(--weight-regular, 400); }
.dwl-temp-row { display: flex; align-items: center; gap: 10px; }
.dwl-temp { font-family: var(--font-display); font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-display); min-width: 2.6ch; text-align: center; }
.dwl-temp sup { font-size: .5em; vertical-align: top; }
.dwl-scenes { display: flex; flex-wrap: wrap; gap: 6px; }
.dwl-widget--scenes { grid-column: 1 / -1; }

/* tablets: the panel goes under the words at its full width; phones: one widget under another */
@container (max-width: 900px) {
  .dwl-hero-inner { grid-template-columns: minmax(0, 1fr); align-content: end; gap: 28px; padding-top: 88px; }
  .dwl-panel { justify-self: start; }
}
@container (max-width: 700px) {
  .dwl-title { font-size: clamp(38px, 15cqw, 72px); }
  .dwl-panel { width: 100%; justify-self: stretch; }
  .dwl-widgets { grid-template-columns: minmax(0, 1fr); }
  .dwl-widget--lights { grid-row: auto; }
  .dwl-actions, .dwl-actions .mgn, .dwl-actions .btn { width: 100%; }
}

/* SCENES: three cards, a photo each, and a button that tries the scene in the panel */
.block-dwl-scenes { padding: clamp(48px, 7cqw, 112px) clamp(16px, 3cqw, 40px) clamp(24px, 4cqw, 56px); }
.block-dwl-scenes .block-inner { --block-max: 1180px; display: grid; gap: clamp(24px, 3cqw, 40px); }
.dwl-scene-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4cqw, 28px); }
.dwl-scene-card { display: grid; gap: 14px; margin: 0; min-width: 0; }
.dwl-scene-photo { aspect-ratio: 4 / 3; }
.dwl-scene-body { display: grid; justify-items: start; gap: 8px; }
.dwl-scene-no { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--color-accent-text); }
.dwl-scene-body h3 { font-family: var(--font-display); font-size: clamp(20px, 2cqw, 26px); line-height: 1.1; letter-spacing: var(--tracking-display); }
.dwl-scene-body p { font-size: 14px; line-height: 1.55; color: var(--color-ink-soft); }
.dwl-scene-body .btn { margin-top: 4px; white-space: normal; }
@container (max-width: 760px) { .dwl-scene-grid { grid-template-columns: minmax(0, 1fr); } .dwl-scene-photo { aspect-ratio: 16 / 10; } }

/* DEVICES: eight icons in four columns, the facts, and two photos */
.block-dwl-devices { padding: clamp(24px, 4cqw, 56px) clamp(16px, 3cqw, 40px) clamp(48px, 7cqw, 112px); }
.block-dwl-devices .block-inner { --block-max: 1180px; display: grid; gap: clamp(24px, 3cqw, 40px); }
.dwl-devices-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.dwl-devices-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); letter-spacing: var(--tracking-control); text-transform: var(--case-control); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.dwl-devices-link svg { width: 16px; height: 16px; }
.dwl-device-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dwl-device { display: grid; gap: 14px; padding: clamp(14px, 1.6cqw, 22px); border: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); border-radius: var(--radius-card); font-size: 15px; transition: border-color .3s ease; }
.dwl-device:hover { border-color: color-mix(in srgb, var(--color-ink) 40%, transparent); }
.dwl-device-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-control); background: color-mix(in srgb, var(--color-ink) 8%, transparent); color: var(--color-accent-text); }
.dwl-device-icon svg { width: 24px; height: 24px; }
.dwl-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: clamp(20px, 2.4cqw, 32px) 0; border-top: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); }
.dwl-facts div { display: grid; gap: 4px; min-width: 0; }
.dwl-facts dt { font-family: var(--font-display); font-size: clamp(30px, 3.6cqw, 52px); line-height: 1; letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.dwl-facts dd { margin: 0; font-size: 14px; color: var(--color-ink-soft); }
.dwl-pair { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(12px, 2cqw, 24px); }
.dwl-pair-photo { aspect-ratio: 16 / 10; }
.dwl-pair-photo + .dwl-pair-photo { aspect-ratio: auto; }
@container (max-width: 700px) {
  .dwl-device-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .dwl-device { gap: 10px; font-size: 14px; }
  .dwl-facts { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .dwl-pair { grid-template-columns: minmax(0, 1fr); }
  .dwl-pair-photo + .dwl-pair-photo { aspect-ratio: 4 / 3; }
}

/* PLANS: two cards and the list of what is in each, the photo on the side */
.block-dwl-plans { padding: clamp(24px, 4cqw, 56px) clamp(16px, 3cqw, 40px) clamp(48px, 7cqw, 112px); }
.dwl-plans-grid { --block-max: 1180px; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(20px, 3cqw, 48px); align-items: stretch; }
.dwl-plans-main { display: grid; align-content: start; gap: clamp(20px, 2.6cqw, 32px); min-width: 0; }
.dwl-plan-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.dwl-plan { display: grid; justify-items: start; align-content: start; gap: 10px; padding: clamp(18px, 2cqw, 28px); min-width: 0; }
.dwl-plan h3 { font-family: var(--font-display); font-size: clamp(20px, 2cqw, 26px); line-height: 1.1; letter-spacing: var(--tracking-display); }
.dwl-plan p { font-size: 14px; line-height: 1.55; color: var(--color-ink-soft); }
.dwl-price { margin-top: 6px; }
.dwl-price b { font-family: var(--font-display); font-size: clamp(30px, 3cqw, 40px); line-height: 1; letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; color: var(--color-ink); }
.dwl-price span { font-size: 13px; }
.dwl-plan .btn { margin-top: 8px; white-space: normal; }
.dwl-compare { width: 100%; border-collapse: collapse; font-size: 14px; }
.dwl-compare th, .dwl-compare td { padding: 10px 8px; text-align: left; border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); vertical-align: top; }
.dwl-compare thead th { font-size: 12px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-ink-soft); font-weight: var(--weight-regular, 400); }
.dwl-compare tbody th { font-weight: var(--weight-regular, 400); }
.dwl-compare td { color: var(--color-ink-soft); }
.dwl-yes { display: inline-flex; align-items: center; color: var(--color-accent-text); }
.dwl-yes svg { width: 18px; height: 18px; }
.dwl-yes i { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.dwl-no { opacity: .6; }
.dwl-plans-photo { min-height: 320px; }
@container (max-width: 860px) {
  .dwl-plans-grid { grid-template-columns: minmax(0, 1fr); }
  .dwl-plans-photo { aspect-ratio: 4 / 3; min-height: 0; }
}
@container (max-width: 560px) {
  .dwl-plan-row { grid-template-columns: minmax(0, 1fr); }
  .dwl-compare { font-size: 13px; }
  .dwl-compare th, .dwl-compare td { padding: 8px 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .dwl-device { transition: none; }
}
/* ---------- EIGHTH SERIES: landscape architecture studio (fen) ---------- */
/* LANDSCAPE: the name as wide as the screen, one wide photo, and the controls in a pill that floats at the bottom of the first screen */
.block-fen-hero { padding: clamp(4px, 1cqw, 12px) clamp(16px, 3cqw, 40px) clamp(24px, 3cqw, 40px); }
.fen-hero-inner { --block-max: 1320px; display: grid; gap: clamp(14px, 2cqw, 28px); }
.fen-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 clamp(8px, 1.6cqw, 24px); margin: 0; font-family: var(--font-display); font-size: clamp(40px, 35cqw, 520px);
            line-height: .8; letter-spacing: -.03em; font-weight: var(--weight-bold); text-transform: lowercase; }
.fen-name .rv-ln { display: inline-block; padding-bottom: .06em; margin-bottom: -.06em; }
.fen-kind { font-size: clamp(15px, 2.4cqw, 32px); line-height: 1; letter-spacing: .04em; font-weight: var(--weight-regular, 400); color: var(--color-ink-soft); }
.fen-shot { position: relative; }
.fen-hero-photo { aspect-ratio: 21 / 9; }
.fen-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .55)); }
.fen-claim { position: absolute; left: clamp(16px, 3cqw, 40px); right: clamp(16px, 3cqw, 40px); bottom: clamp(14px, 2.4cqw, 32px); margin: 0; color: #fff;
             font-family: var(--font-display); font-size: clamp(18px, 2.8cqw, 40px); line-height: 1.1; letter-spacing: var(--tracking-display); text-transform: lowercase; text-wrap: balance; }
.fen-bar { position: sticky; bottom: 16px; z-index: 15; justify-self: center; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; max-width: 100%;
           padding: 8px 8px 8px 10px; border-radius: var(--radius-pill, 999px); }
.fen-bar-links { display: flex; flex-wrap: wrap; gap: 2px; }
.fen-bar-links a { padding: 9px 14px; border-radius: var(--radius-pill, 999px); font-size: var(--text-sm); letter-spacing: var(--tracking-control); text-transform: var(--case-control); transition: background-color .25s ease; }
.fen-bar-links a:hover, .fen-bar-links a.is-hover { background: color-mix(in srgb, var(--color-ink) 8%, transparent); }
.fen-bar .btn { white-space: normal; }
@container (max-width: 700px) {
  .fen-hero-photo { aspect-ratio: 4 / 5; max-height: min(calc(var(--screen-h, 100svh) * .6), 620px); }
  .fen-name { font-size: clamp(40px, 34cqw, 500px); }
  .fen-bar { position: relative; bottom: auto; justify-self: stretch; justify-content: space-between; border-radius: var(--shape-card); padding: 10px; }
  .fen-bar-links a { padding: 8px 10px; }
  .fen-bar .mgn, .fen-bar .mgn .btn { width: 100%; }
}

/* ABOUT: the sentence in large type, the small photos sitting in it like words */
.block-fen-about { padding: clamp(48px, 7cqw, 120px) clamp(16px, 3cqw, 40px); }
.fen-about-inner { --block-max: 1180px; display: grid; gap: clamp(24px, 3.5cqw, 56px); }
.fen-eyebrow { margin: 0; font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-accent-text); }
.fen-about-text { margin: 0; font-family: var(--font-display); font-size: clamp(22px, 3.2cqw, 44px); line-height: 1.35; letter-spacing: var(--tracking-display); font-weight: var(--weight-medium, 500); text-wrap: pretty; }
.fen-inline { display: inline-block; vertical-align: middle; width: 1.8em; height: 1.1em; margin: -.1em .06em 0; border-radius: var(--radius-control); }
.fen-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding-top: clamp(20px, 3cqw, 36px); border-top: 1px solid color-mix(in srgb, var(--color-ink) 16%, transparent); }
.fen-facts div { display: grid; gap: 6px; }
.fen-facts dt { order: 2; font-size: 13px; color: var(--color-ink-soft); }
.fen-facts dd { margin: 0; font-family: var(--font-display); font-size: clamp(28px, 4.4cqw, 64px); line-height: 1; letter-spacing: var(--tracking-display); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }

/* WHY: three words as wide as the screen, a hairline between the rows */
.block-fen-why { padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 40px); }
.fen-why-inner { --block-max: 1320px; display: grid; gap: clamp(16px, 2.6cqw, 36px); }
.fen-why-head, .fen-projects-title { margin: 0; font-family: var(--font-display); font-size: clamp(28px, 4.2cqw, 60px); line-height: 1; letter-spacing: var(--tracking-display); font-weight: var(--weight-bold); text-transform: lowercase; }
.fen-why-head .rv-ln, .fen-projects-title .rv-ln, .fen-why-word .rv-ln { display: inline-block; padding-bottom: .08em; margin-bottom: -.08em; }
.fen-why-rows { border-top: 1px solid color-mix(in srgb, var(--color-ink) 16%, transparent); }
.fen-why-row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 200px); gap: clamp(20px, 3.6cqw, 56px); align-items: center; padding: clamp(20px, 2.6cqw, 36px) 0;
               border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 16%, transparent); }
.fen-why-word { margin: 0; font-family: var(--font-display); font-size: 8.5cqw; line-height: .9; letter-spacing: -.02em; font-weight: var(--weight-bold); }
.fen-why-row p { margin: 0; max-width: 460px; font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }
.fen-why-photo { aspect-ratio: 4 / 3; }
@container (max-width: 1000px) {
  .fen-why-row { grid-template-columns: minmax(0, 1fr) minmax(0, 200px); }
  .fen-why-word { grid-column: 1 / -1; font-size: 11cqw; }
}
@container (max-width: 700px) {
  .fen-why-row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .fen-why-word { grid-column: auto; font-size: clamp(36px, 15cqw, 80px); }
  .fen-why-photo { aspect-ratio: 16 / 10; }
}

/* PROJECTS: the list, the photo under the pointer, the contact line */
.block-fen-projects { position: relative; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 40px) clamp(56px, 7cqw, 120px); }
.fen-projects-inner { --block-max: 1320px; display: grid; gap: clamp(16px, 2cqw, 28px); }
.fen-projects-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.fen-projects-head p { margin: 0; font-size: 14px; color: var(--color-ink-soft); }
.fen-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid color-mix(in srgb, var(--color-ink) 16%, transparent); }
.fen-list li { border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 16%, transparent); }
.fen-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 220px) 56px; align-items: baseline; gap: 16px; padding: clamp(14px, 1.8cqw, 24px) 0; transition: opacity .3s ease; }
.fen-thumb { display: none; }
.fen-no { font-size: 13px; color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.fen-pname { margin: 0; font-family: var(--font-display); font-size: clamp(26px, 4.6cqw, 64px); line-height: 1; letter-spacing: var(--tracking-display); font-weight: var(--weight-semibold); transition: transform .45s cubic-bezier(.2, .7, .1, 1); }
.fen-place { font-size: 14px; color: var(--color-ink-soft); }
.fen-year { font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.block-fen-projects.is-peeking .fen-row:not(.is-hover) { opacity: .32; }
.fen-row:hover .fen-pname, .fen-row.is-hover .fen-pname { transform: translateX(14px); }
.fen-peek { position: absolute; left: 0; top: 0; z-index: 5; width: clamp(200px, 24cqw, 340px); aspect-ratio: 4 / 3; margin: 0; overflow: hidden; pointer-events: none;
            border-radius: var(--shape-card); opacity: 0; transform: translate(calc(var(--px, 0px) - 50%), calc(var(--py, 0px) - 50%)) scale(.86);
            transition: opacity .3s ease, transform .5s cubic-bezier(.2, .7, .1, 1); }
.fen-peek img { display: block; width: 100%; height: 100%; object-fit: cover; }
.block-fen-projects.is-peeking .fen-peek { opacity: 1; transform: translate(calc(var(--px, 0px) - 50%), calc(var(--py, 0px) - 50%)) scale(1); }
@media (hover: none) { .fen-thumb { display: block; } .fen-peek { display: none; } .fen-row { grid-template-columns: 64px 36px minmax(0, 1fr) minmax(0, 200px) 48px; } }
@container (max-width: 640px) {
  .fen-peek { display: none; }
  .fen-row, .block-fen-projects .fen-row { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "t n y" "t w w"; row-gap: 4px; align-items: center; }
  .fen-thumb { display: block; grid-area: t; aspect-ratio: 1; }
  .fen-pname { grid-area: n; font-size: clamp(22px, 7cqw, 30px); }
  .fen-no { display: none; }
  .fen-place { grid-area: w; font-size: 13px; }
  .fen-year { grid-area: y; }
}
.fen-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding-top: clamp(12px, 2cqw, 24px); }
.fen-contact p { margin: 0; max-width: 560px; font-size: var(--text-md); line-height: 1.55; color: var(--color-ink-soft); overflow-wrap: anywhere; }
.fen-contact a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.fen-contact a:hover { color: var(--color-accent-text); }
.fen-contact .btn { white-space: normal; }

@media (prefers-reduced-motion: reduce) {
  .fen-bar-links a, .fen-row, .fen-pname, .fen-peek { transition: none; animation: none; }
}
/* ---------- NINTH SERIES: travel agency (trv) ---------- */
/* TRAVEL: the header floats in white over the photo that carries the whole page */
.layout--travel > .block-nav-min { position: relative; z-index: 20; height: 0; color: #fff; mix-blend-mode: difference; }
.layout--travel > .block-nav-min .block-inner { min-height: 72px; }
.layout--travel > .block-nav-min .nav-min-menu .glass::after { background: #fff; box-shadow: none; border: 0; }
.layout--travel > .block-nav-min .nav-min-menu .glass { color: #000; }
/* two words in the name, so on the narrowest phone they may sit one under the other */
.layout--travel .word-mark { white-space: normal; overflow-wrap: break-word; max-width: 100%; }

/* one photo under every section, so the page reads as one journey */
.block-trv-screen, .block-trv-kinds, .block-trv-stage, .block-trv-discover { position: relative; isolation: isolate; overflow: clip; }
.trv-back { position: absolute; inset: 0; z-index: -1; border-radius: 0; }
.trv-back::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .68); }
.trv-eyebrow { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: #fff; }
/* nothing a kit with a wide font writes may grow past its column */
.trv-hero > *, .trv-cards > *, .trv-kinds-head > *, .trv-dis-copy > *, .trv-feat-body > *, .trv-jr-copy > *, .trv-stage-words > * { max-width: 100%; }
.trv-hero-title .rv-ln, .trv-kinds-title .rv-ln, .trv-stage-title .rv-ln,
.trv-hero-title .rv-ln > span, .trv-kinds-title .rv-ln > span, .trv-stage-title .rv-ln > span { max-width: 100%; }
.trv-eyebrow, .trv-hero-title, .trv-kinds-title, .trv-stage-title, .trv-quote, .trv-card-value { overflow-wrap: break-word; }

/* the first screen: the journey behind, the words on it, three cards beside them, the rail on the edge */
.block-trv-screen { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; min-height: min(var(--screen-h, 100svh), 900px); }
.trv-beds { position: absolute; inset: 0; z-index: -1; }
.trv-bed { position: absolute; inset: 0; z-index: 0; visibility: hidden; border-radius: 0; }
.trv-bed.is-under { visibility: visible; z-index: 1; }
.trv-bed.is-active { visibility: visible; z-index: 2; }
.trv-bed::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .58), rgba(0, 0, 0, .3) 45%, rgba(0, 0, 0, .66)); }
.trv-screen-inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: end; gap: clamp(20px, 3.4cqw, 56px);
                    padding: clamp(104px, 12cqw, 168px) clamp(54px, 6cqw, 86px) clamp(28px, 4cqw, 64px) clamp(16px, 3cqw, 40px); }
.trv-hero { display: grid; justify-items: start; gap: clamp(10px, 1.4cqw, 18px); }
.trv-hero-title { font-family: var(--font-display); font-size: clamp(38px, 6.4cqw, 104px); line-height: .96; letter-spacing: var(--tracking-display); color: #fff; max-width: 13ch; }
.trv-hero-lead { max-width: 52ch; font-size: var(--text-md); line-height: 1.6; color: #fff; }
.trv-hero-act { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 6px; }
.trv-hero-act .btn { white-space: normal; }
.trv-cards { display: grid; gap: clamp(8px, 1.2cqw, 14px); align-content: end; }
.trv-card { display: grid; gap: 4px; padding: clamp(12px, 1.5cqw, 20px) clamp(14px, 1.7cqw, 22px); }
.trv-card-label { font-size: 12px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-accent-text); }
.trv-card-value { font-family: var(--font-display); font-size: clamp(18px, 1.9cqw, 25px); line-height: 1.15; letter-spacing: var(--tracking-display); color: var(--color-ink); }
.trv-card-note { font-size: 13px; line-height: 1.4; color: var(--color-ink-soft); }
.trv-rail { position: absolute; top: 50%; right: clamp(6px, 1.4cqw, 20px); transform: translateY(-50%); display: grid; gap: 4px; }
.trv-rail .btn { height: auto; min-height: 0; padding: 6px 8px; white-space: nowrap; color: #fff; }
.trv-rail .btn .glass-label > span { display: flex; align-items: center; gap: 8px; }
.trv-rail-line { display: block; width: 14px; height: 1px; background: currentColor; transition: width .4s cubic-bezier(.22, .61, .36, 1); }
.trv-rail .btn[aria-pressed="true"] .trv-rail-line { width: 30px; }
.trv-rail-no { font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-control, .04em); }

/* what kind of days: the panel with three tiles, and the journeys it picks */
.trv-kinds-inner { display: grid; gap: clamp(18px, 2.6cqw, 36px); padding: clamp(48px, 7cqw, 112px) clamp(16px, 3cqw, 40px); }
.trv-kinds-head { display: grid; gap: 10px; max-width: 760px; }
.trv-kinds-title { font-family: var(--font-display); font-size: clamp(30px, 4.4cqw, 62px); line-height: 1; letter-spacing: var(--tracking-display); color: #fff; }
.trv-kinds-lead { max-width: 58ch; font-size: var(--text-md); line-height: 1.6; color: #fff; }
.trv-panel { display: grid; gap: 10px; padding: clamp(12px, 1.6cqw, 20px); }
.trv-panel-label { font-size: 12px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-accent-text); }
.trv-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.trv-tiles .btn { height: auto; min-height: 0; padding: clamp(12px, 1.6cqw, 20px); white-space: normal; }
.trv-tiles .btn .glass-label { width: 100%; }
.trv-tiles .btn .glass-label > span { display: grid; justify-items: center; text-align: center; gap: 4px; width: 100%; }
.trv-tile-icon { display: block; width: clamp(26px, 2.8cqw, 34px); }
.trv-tile-icon svg { display: block; width: 100%; height: auto; }
.trv-tile-name { font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: 1.2; }
.trv-tiles .btn[aria-pressed="true"] { box-shadow: inset 0 0 0 2px rgb(var(--color-primary)); }
.trv-tiles .btn[aria-pressed="true"] .trv-tile-name { color: var(--color-accent-text); }
.trv-tile-sub { font-size: 13px; line-height: 1.3; }
.trv-feat-grid { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.8cqw, 24px); }
.trv-feat-grid.is-active { display: grid; }
.trv-feat { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; overflow: clip; }
.trv-feat-photo { aspect-ratio: 4 / 3; border-radius: 0; }
.trv-feat-body { display: grid; justify-items: start; gap: 8px; padding: clamp(14px, 1.8cqw, 22px); }
.trv-feat-place { font-size: 12px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-accent-text); }
.trv-feat-body h3 { font-family: var(--font-display); font-size: clamp(20px, 2.1cqw, 28px); line-height: 1.1; letter-spacing: var(--tracking-display); }
.trv-feat-body > p { font-size: var(--text-sm); line-height: 1.55; color: var(--color-ink-soft); }
.trv-feat-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; width: 100%; padding-top: 4px; }
.trv-feat-foot .btn { white-space: normal; }
.trv-feat-price { font-size: 13px; color: var(--color-ink-soft); }
.trv-feat-price b { font-family: var(--font-display); font-size: 19px; color: var(--color-ink); font-variant-numeric: tabular-nums; }

/* the journeys: the middle card full, the one before and after smaller and darker */
.trv-stage-inner { display: grid; gap: clamp(16px, 2.4cqw, 32px); padding: clamp(48px, 7cqw, 112px) clamp(16px, 3cqw, 40px); }
.trv-stage-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.trv-stage-words { display: grid; gap: 8px; }
.trv-stage-title { font-family: var(--font-display); font-size: clamp(30px, 4.4cqw, 62px); line-height: 1; letter-spacing: var(--tracking-display); color: #fff; }
.trv-arrows { display: flex; gap: 10px; }
.trv-reel { display: grid; grid-template-columns: minmax(0, .76fr) minmax(0, 1.2fr) minmax(0, .76fr); align-items: center; gap: clamp(10px, 1.6cqw, 22px); }
.trv-jr { display: none; position: relative; aspect-ratio: 4 / 5; overflow: clip; border-radius: var(--shape-card); }
.trv-jr.is-prev { display: block; order: 1; }
.trv-jr.is-active { display: block; order: 2; }
.trv-jr.is-next { display: block; order: 3; }
.trv-jr-photo { position: absolute; inset: 0; border-radius: 0; }
.trv-jr-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .8)); }
.trv-jr:not(.is-active) .trv-jr-photo::after { background: linear-gradient(180deg, rgba(0, 0, 0, .46), rgba(0, 0, 0, .82)); }
.trv-jr-copy { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: start; gap: 6px; padding: clamp(14px, 1.8cqw, 26px); color: #fff; }
.trv-jr-no { font-size: 12px; letter-spacing: var(--tracking-caps, .12em); font-variant-numeric: tabular-nums; }
.trv-jr-copy h3 { font-family: var(--font-display); font-size: clamp(19px, 2.3cqw, 32px); line-height: 1.05; letter-spacing: var(--tracking-display); }
.trv-jr-copy p { font-size: var(--text-sm); line-height: 1.5; max-width: 34ch; }
.trv-jr-meta { font-size: 13px; letter-spacing: var(--tracking-caps, .1em); text-transform: uppercase; }
.trv-jr:not(.is-active) .trv-jr-copy p { display: none; }
.trv-jr:not(.is-active) .trv-jr-copy { padding: clamp(12px, 1.4cqw, 18px); }
.trv-stage-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.trv-stage-foot .btn { white-space: normal; }
.trv-count { font-size: 14px; letter-spacing: var(--tracking-caps, .1em); font-variant-numeric: tabular-nums; color: #fff; }
.trv-count b { font-family: var(--font-display); font-size: 22px; }

/* discover: a play link, a line from a guide, three small films beside it */
.trv-dis-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(22px, 3.6cqw, 64px);
                 padding: clamp(48px, 7cqw, 112px) clamp(16px, 3cqw, 40px); }
.trv-dis-copy { display: grid; justify-items: start; gap: clamp(10px, 1.4cqw, 18px); }
.trv-play { display: inline-flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; }
.trv-play-badge { display: grid; place-items: center; width: clamp(46px, 4.6cqw, 62px); aspect-ratio: 1; border-radius: var(--radius-pill, 999px);
                  border: 1px solid rgba(255, 255, 255, .55); }
.trv-play-badge svg { width: 38%; height: auto; }
.trv-play-word { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.trv-quote { font-family: var(--font-display); font-size: clamp(24px, 3.2cqw, 46px); line-height: 1.12; letter-spacing: var(--tracking-display); color: #fff; max-width: 18ch; }
.trv-who { font-size: 13px; line-height: 1.5; color: #fff; }
.trv-dis-act { padding-top: 6px; }
.trv-dis-act .btn { white-space: normal; }
.trv-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: clamp(10px, 1.6cqw, 20px); }
.trv-thumb { position: relative; display: grid; gap: 8px; color: #fff; text-decoration: none; }
.trv-thumb:nth-child(2) { margin-top: clamp(22px, 5cqw, 78px); }
.trv-thumb:nth-child(3) { margin-top: clamp(8px, 2cqw, 32px); }
.trv-thumb-ph { aspect-ratio: 3 / 4; }
.trv-thumb-play { position: absolute; left: 10px; top: 10px; display: grid; place-items: center; width: clamp(28px, 2.6cqw, 36px); aspect-ratio: 1;
                  border-radius: var(--radius-pill, 999px); border: 1px solid rgba(255, 255, 255, .55); background: rgba(0, 0, 0, .35); }
.trv-thumb-play svg { width: 40%; height: auto; }
.trv-thumb-cap { font-size: 14px; font-weight: var(--weight-semibold); line-height: 1.3; }

/* the switch of a journey, and the arrival of the first one */
@media (prefers-reduced-motion: no-preference) {
  .trv-bed.is-turn { animation: trv-wipe 1s cubic-bezier(.7, 0, .2, 1) both; }
  .trv-hero-title.is-turn .rv-ln > span { animation: trv-rise .85s cubic-bezier(.2, .75, .1, 1) both; animation-delay: calc(var(--ln, 0) * 110ms); }
  .trv-card-value.is-turn { animation: trv-up .6s cubic-bezier(.22, .61, .36, 1) both; }
  .trv-jr { transition: aspect-ratio .6s cubic-bezier(.22, .61, .36, 1); }
  .trv-feat-photo img, .trv-thumb-ph img, .trv-jr-photo img { transition: transform 1.4s cubic-bezier(.22, .61, .36, 1); }
  .trv-feat:hover .trv-feat-photo img, .trv-thumb:hover .trv-thumb-ph img { transform: scale(1.05); }
}
@keyframes trv-wipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes trv-rise { from { transform: translateY(112%); } to { transform: none; } }
@keyframes trv-up { from { transform: translateY(12px); } to { transform: none; } }

/* phone and tablet: the screen stacks, the cards become three lines, the rail lies down, one journey at a time */
@container (max-width: 980px) {
  .trv-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trv-dis-inner { grid-template-columns: minmax(0, 1fr); }
  .trv-quote { max-width: 26ch; }
}
@container (max-width: 760px) {
  .trv-screen-inner { grid-template-columns: minmax(0, 1fr); align-content: end; gap: clamp(14px, 3cqw, 24px);
                      padding: clamp(92px, 20cqw, 132px) clamp(14px, 4cqw, 28px) clamp(14px, 3cqw, 24px); }
  .trv-hero { justify-items: stretch; }
  .trv-hero-title { font-size: clamp(30px, 10.5cqw, 56px); max-width: none; }
  .trv-hero-lead { font-size: var(--text-sm); }
  .trv-hero-act { width: 100%; }
  .trv-hero-act .btn { flex: 1 1 auto; }
  .trv-kinds-title, .trv-stage-title { font-size: clamp(26px, 8cqw, 42px); }
  .trv-card { grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: baseline; gap: 4px 12px; padding: 10px 14px; }
  .trv-card-value { text-align: right; font-size: clamp(15px, 4.4cqw, 19px); }
  .trv-card-note { display: none; }
  .trv-rail { position: static; transform: none; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 4px; padding: 0 clamp(14px, 4cqw, 28px) clamp(14px, 3cqw, 22px); }
  .trv-rail .btn .glass-label > span { flex-direction: column; gap: 5px; }
  .trv-rail-line { width: 10px; }
  .trv-rail .btn[aria-pressed="true"] .trv-rail-line { width: 18px; }
  .trv-reel { grid-template-columns: minmax(0, 1fr); }
  .trv-jr:not(.is-active) { display: none; }
  .trv-jr.is-active { aspect-ratio: 3 / 4; }
  .trv-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trv-thumb:nth-child(2), .trv-thumb:nth-child(3) { margin-top: 0; }
  .trv-thumb:nth-child(3) { grid-column: 1 / -1; }
  .trv-thumb:nth-child(3) .trv-thumb-ph { aspect-ratio: 16 / 9; }
}
@container (max-width: 640px) {
  .trv-tiles { grid-template-columns: minmax(0, 1fr); }
  .trv-tiles .btn .glass-label > span { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; gap: 2px 12px; align-items: center; }
  .trv-tile-icon { grid-row: span 2; width: 28px; }
  .trv-feat-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .trv-bed, .trv-jr, .trv-rail-line, .trv-feat-photo img, .trv-thumb-ph img, .trv-jr-photo img, .trv-hero-title .rv-ln > span, .trv-card-value {
    transition: none; animation: none;
  }
}
/* ---------- NINTH SERIES: joinery (jnr) ---------- */
/* the whole page is a drawing sheet: a ruled line under the header, guide grids and tick marks inside the sections */
.layout--joinery > .block-nav-min .block-inner { min-height: 72px; border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); }

/* words that come back on every section */
.jnr-eyebrow { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-accent-text); }
.jnr-title { font-family: var(--font-display); font-size: clamp(28px, 4cqw, 56px); line-height: 1; letter-spacing: var(--tracking-display); }
.jnr-lead { font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); max-width: 58ch; }
.jnr-grid { position: absolute; inset: 0; z-index: -1; pointer-events: none;
            background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-ink) 9%, transparent) 0 1px, transparent 1px 56px),
                              repeating-linear-gradient(180deg, color-mix(in srgb, var(--color-ink) 9%, transparent) 0 1px, transparent 1px 56px); }
.jnr-ticks { position: absolute; inset: 0; z-index: -1; pointer-events: none;
             background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-ink) 34%, transparent) 0 1px, transparent 1px 14px),
                               repeating-linear-gradient(180deg, color-mix(in srgb, var(--color-ink) 34%, transparent) 0 1px, transparent 1px 14px);
             background-size: 100% 7px, 7px 100%; background-repeat: no-repeat; background-position: 0 0, 0 0; }

/* ---------- the drawing sheet, first screen ---------- */
.block-jnr-plan { overflow: clip; }
.jnr-sheet { position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1.05fr) minmax(0, 1fr);
             min-height: min(calc(var(--screen-h, 100svh) * .84), 880px); background: var(--page-bg); }
.jnr-side { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 18px;
            padding: clamp(18px, 2.4cqw, 34px) clamp(8px, 1.2cqw, 16px);
            border-right: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); }
.block-jnr-plan .jnr-rail { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; letter-spacing: var(--tracking-caps, .12em);
                            text-transform: uppercase; color: var(--color-ink-soft); }
.jnr-dots { display: flex; flex-direction: column; gap: 6px; }
.jnr-dots .btn { min-width: 0; padding-inline: 10px; }
.jnr-plan-copy { display: grid; align-content: center; justify-items: start; gap: 14px; padding: clamp(24px, 4cqw, 72px); }
.block-jnr-plan .jnr-brand { font-family: var(--font-display); font-size: clamp(44px, 8cqw, 132px); line-height: .92; letter-spacing: var(--tracking-display); }
.block-jnr-plan .jnr-lead { font-size: clamp(16px, 1.5cqw, 21px); max-width: 30ch; }
.jnr-plan-act { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 6px; }
.jnr-plan-act .btn { white-space: normal; }
.jnr-plan-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; margin: 0; padding-top: clamp(14px, 2cqw, 28px);
                  border-top: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); }
.jnr-plan-facts dt { font-size: 12px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-ink-soft); }
.jnr-plan-facts dd { margin: 4px 0 0; font-size: 14px; line-height: 1.4; }
.jnr-stage { position: relative; display: grid; }
.jnr-plan-view { position: relative; grid-area: 1 / 1; display: grid; }
.jnr-plan-photo { position: absolute; inset: 0; border-radius: 0; }
.jnr-plan-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .1) 0 42%, rgba(0, 0, 0, .58)); }
.jnr-tags { position: absolute; left: clamp(14px, 2cqw, 28px); top: clamp(14px, 2cqw, 28px); display: flex; flex-wrap: wrap; gap: 8px;
            max-width: calc(100% - clamp(28px, 4cqw, 56px)); margin: 0; padding: 0; list-style: none; }
.jnr-tags li { padding: 5px 12px; border: 1px solid #fff; border-radius: var(--radius-pill, 999px); color: #fff; font-size: 13px; }
.jnr-sheet-meta { position: absolute; left: clamp(14px, 2cqw, 28px); right: clamp(14px, 2cqw, 28px); bottom: clamp(14px, 2cqw, 28px);
                  color: #fff; font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; }
.jnr-view:not(.is-active) { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .jnr-plan-view { clip-path: inset(0 0 100% 0); transition: clip-path .85s cubic-bezier(.7, 0, .2, 1); }
  .jnr-plan-view.is-active { clip-path: inset(0); }
}

/* ---------- the pinned specification ---------- */
.block-jnr-spec { padding: clamp(44px, 6cqw, 104px) clamp(16px, 3cqw, 40px); }
.jnr-spec-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(24px, 4cqw, 64px); align-items: center; }
.jnr-spec-copy { display: grid; justify-items: start; gap: 14px; }
.jnr-rooms { display: grid; gap: 14px; width: 100%; margin: 0; padding-top: 6px; }
.jnr-rooms > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); }
.jnr-rooms dt { font-family: var(--font-display); font-size: clamp(17px, 1.7cqw, 21px); line-height: 1.2; }
.jnr-rooms dd { margin: 0; font-size: 14px; line-height: 1.55; color: var(--color-ink-soft); }
.jnr-spec-act { padding-top: 4px; }
.jnr-spec-act .btn { white-space: normal; }
.jnr-frame { position: relative; padding: 0; }
.jnr-frame-photo { aspect-ratio: 4 / 3; }
.jnr-frame::before, .jnr-frame::after { content: ""; position: absolute; pointer-events: none; z-index: 1; }
.jnr-frame::before { left: 0; right: 0; top: 38%; border-top: 1px dashed color-mix(in srgb, var(--color-ink) 45%, transparent); }
.jnr-frame::after { top: 0; bottom: 0; left: 46%; border-left: 1px dashed color-mix(in srgb, var(--color-ink) 45%, transparent); }
.jnr-notes { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; list-style: none; }
.jnr-note { position: absolute; top: var(--y, 20%); display: flex; align-items: flex-start; gap: 8px; max-width: min(42%, 240px);
            padding: 8px 12px; background: var(--page-bg); border: 1px solid color-mix(in srgb, var(--color-ink) 24%, transparent); border-radius: var(--shape-card); }
.jnr-note--l { left: 4%; }
.jnr-note--r { right: 4%; }
.jnr-note::before { content: ""; position: absolute; top: 18px; width: clamp(18px, 4cqw, 54px); border-top: 1px dashed color-mix(in srgb, var(--color-ink) 55%, transparent); }
.jnr-note::after { content: ""; position: absolute; top: 15px; width: 7px; height: 7px; border: 1px solid var(--color-ink); border-radius: var(--radius-pill, 999px); background: var(--page-bg); }
.jnr-note--l::before { left: 100%; }
.jnr-note--l::after { left: calc(100% + clamp(18px, 4cqw, 54px) - 1px); }
.jnr-note--r::before { right: 100%; }
.jnr-note--r::after { right: calc(100% + clamp(18px, 4cqw, 54px) - 1px); }
.jnr-note-no { font-size: 12px; letter-spacing: var(--tracking-caps, .12em); color: var(--color-accent-text); font-variant-numeric: tabular-nums; }
.jnr-note-text { display: grid; gap: 2px; font-size: 13px; line-height: 1.4; color: var(--color-ink-soft); }
.jnr-note-text b { font-weight: var(--weight-semibold); color: var(--color-ink); }

/* ---------- the material swatches ---------- */
.block-jnr-material { padding: clamp(44px, 6cqw, 104px) clamp(16px, 3cqw, 40px); }
.jnr-mat-head { display: grid; gap: clamp(14px, 2cqw, 24px); margin-bottom: clamp(20px, 3cqw, 40px); }
.jnr-mat-head > div:first-child { display: grid; gap: 8px; }
.jnr-swatches { display: flex; flex-wrap: wrap; gap: 6px; padding-top: clamp(12px, 1.6cqw, 20px);
                border-top: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); }
.jnr-swatches .btn { white-space: normal; }
.jnr-chip { display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px;
            border: 1px solid color-mix(in srgb, var(--color-ink) 30%, transparent); border-radius: var(--radius-pill, 999px); }
.jnr-mat-stage { position: relative; display: grid; }
.jnr-mat-view { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(18px, 3cqw, 44px); align-items: center; }
.jnr-mat-photo { aspect-ratio: 16 / 10; }
.jnr-mat-copy { display: grid; justify-items: start; gap: 12px; }
.jnr-mat-name { font-family: var(--font-display); font-size: clamp(24px, 3cqw, 40px); line-height: 1; letter-spacing: var(--tracking-display); }
.jnr-mat-line { font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }
.jnr-mat-facts { display: grid; gap: 8px; width: 100%; margin: 0; }
.jnr-mat-facts > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px;
                       padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); }
.jnr-mat-facts dt { font-size: 12px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-ink-soft); }
.jnr-mat-facts dd { margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.jnr-mat-act .btn { white-space: normal; }
@media (prefers-reduced-motion: no-preference) {
  .jnr-mat-view { clip-path: inset(0 0 0 100%); transition: clip-path .7s cubic-bezier(.7, 0, .2, 1); }
  .jnr-mat-view.is-active { clip-path: inset(0); }
}

/* ---------- three steps ---------- */
.block-jnr-steps { position: relative; isolation: isolate; padding: clamp(44px, 6cqw, 104px) clamp(16px, 3cqw, 40px); }
.jnr-steps-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(20px, 3cqw, 40px); }
.jnr-steps-head > div:first-child { display: grid; gap: 8px; }
.jnr-steps-act .btn { white-space: normal; }
.jnr-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.6cqw, 36px); margin: 0; padding: 0; list-style: none; }
.jnr-step { display: grid; align-content: start; gap: 10px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--color-ink) 24%, transparent); }
.jnr-step-no { font-family: var(--font-display); font-size: clamp(40px, 6cqw, 88px); line-height: .9; letter-spacing: var(--tracking-display);
               color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--color-ink) 55%, transparent); }
.jnr-step-photo { aspect-ratio: 3 / 2; }
.jnr-step-name { font-family: var(--font-display); font-size: clamp(19px, 2cqw, 26px); line-height: 1.15; letter-spacing: var(--tracking-display); }
.jnr-step-line { font-size: 14px; line-height: 1.6; color: var(--color-ink-soft); }

/* ---------- the work strip ---------- */
.block-jnr-strip { padding: clamp(44px, 6cqw, 104px) clamp(16px, 3cqw, 40px) clamp(52px, 7cqw, 120px); }
.jnr-strip-head { display: grid; gap: 10px; margin-bottom: clamp(18px, 2.6cqw, 34px); }
.jnr-strip-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.6cqw, 22px); align-items: start; }
.jnr-project { position: relative; display: grid; align-content: start; gap: 6px; }
.jnr-project-photo { aspect-ratio: 3 / 4; }
.jnr-project-no { position: absolute; top: 10px; left: 10px; padding: 3px 9px; background: var(--page-bg); border-radius: var(--radius-pill, 999px);
                  font-size: 12px; letter-spacing: var(--tracking-caps, .12em); font-variant-numeric: tabular-nums; }
.block-jnr-strip .jnr-project h3 { margin-top: 8px; font-family: var(--font-display); font-size: clamp(16px, 1.5cqw, 20px); line-height: 1.2; letter-spacing: var(--tracking-display); }
.block-jnr-strip .jnr-project p { font-size: 13px; line-height: 1.45; color: var(--color-ink-soft); }
.jnr-gallery { display: grid; align-content: space-between; gap: 16px; aspect-ratio: 3 / 4; padding: clamp(12px, 1.6cqw, 22px);
               background: rgb(var(--color-primary)); color: var(--color-on-tinted); border-radius: var(--shape-card); }
.jnr-gallery-word { font-family: var(--font-display); font-size: clamp(20px, 2.4cqw, 34px); line-height: 1; letter-spacing: var(--tracking-display); }
.jnr-gallery-line { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.4; }
.jnr-gallery-line svg { width: 18px; height: 18px; flex: 0 0 auto; }
@media (prefers-reduced-motion: no-preference) {
  .jnr-project-photo img, .jnr-gallery { transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
  .jnr-project:hover .jnr-project-photo img { transform: scale(1.04); }
}

/* ---------- tablet ---------- */
@container (max-width: 1000px) {
  .jnr-spec-grid { grid-template-columns: minmax(0, 1fr); }
  .jnr-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jnr-mat-view { grid-template-columns: minmax(0, 1fr); }
  .jnr-mat-photo { aspect-ratio: 16 / 9; }
}
@container (max-width: 860px) {
  .jnr-steps { grid-template-columns: minmax(0, 1fr); }
  .jnr-step { grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 16px; }
  .jnr-step-no { grid-row: span 2; font-size: clamp(34px, 8cqw, 56px); }
  .jnr-step-photo { grid-column: 2; aspect-ratio: 16 / 9; }
  .jnr-step-name { grid-column: 2; }
  .jnr-step-line { grid-column: 2; }
}

/* ---------- phone ---------- */
@container (max-width: 700px) {
  .jnr-sheet { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .jnr-stage { order: 1; height: min(calc(var(--screen-h, 100svh) * .44), 420px); }
  .jnr-plan-copy { order: 2; padding: 22px 16px 24px; gap: 12px; }
  .jnr-side { order: 3; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px;
              padding: 0 16px 24px; border-right: 0; }
  .block-jnr-plan .jnr-rail { writing-mode: horizontal-tb; transform: none; font-size: 12px; }
  .jnr-dots { flex-direction: row; }
  .block-jnr-plan .jnr-brand { font-size: clamp(34px, 13cqw, 68px); letter-spacing: 0; }
  .block-jnr-plan .jnr-lead { font-size: 15px; max-width: none; }
  .jnr-plan-act { width: 100%; }
  .jnr-plan-act .btn, .jnr-plan-act .mgn { width: 100%; }
  .jnr-plan-facts { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .jnr-tags li { font-size: 12px; padding: 4px 10px; }

  .jnr-frame::before, .jnr-frame::after { display: none; }
  .jnr-notes { position: static; display: grid; gap: 8px; margin-top: 14px; }
  .jnr-note { position: static; max-width: none; top: auto; }
  .jnr-note--l, .jnr-note--r { left: auto; right: auto; }
  .jnr-note::before, .jnr-note::after { display: none; }
  .jnr-frame-photo { aspect-ratio: 4 / 3; }

  .jnr-mat-head { display: grid; }
  .jnr-swatches .btn { padding-inline: 12px; }
  .jnr-strip-row { grid-template-columns: minmax(0, 1fr); }
  .jnr-project-photo { aspect-ratio: 4 / 3; }
  .jnr-gallery { aspect-ratio: 5 / 2; }
  .jnr-steps-head, .jnr-mat-head { gap: 14px; }
  .jnr-steps-act .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .jnr-plan-view, .jnr-mat-view, .jnr-project-photo img, .jnr-gallery { transition: none; animation: none; }
}
/* ---------- NINTH SERIES: civil engineering (eng) ---------- */
/* ENGINEERING: the header floats in white over the first crossing */
.layout--engineering > .block-nav-min { position: relative; z-index: 20; height: 0; color: #fff; mix-blend-mode: difference; }
.layout--engineering > .block-nav-min .block-inner { min-height: 72px; }
.layout--engineering > .block-nav-min .nav-min-menu .glass::after { background: #fff; box-shadow: none; border: 0; }
.layout--engineering > .block-nav-min .nav-min-menu .glass { color: #000; }

/* the hero: one crossing behind everything, the rail at the edge, the info strip at the foot */
.block-eng-hero { position: relative; isolation: isolate; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: min(var(--screen-h, 100svh), 900px); }
.eng-stage { position: absolute; inset: 0; z-index: -1; }
.eng-slide { position: absolute; inset: 0; visibility: hidden; clip-path: inset(0 0 0 100%); }
.eng-slide.is-active { visibility: visible; clip-path: inset(0); }
.eng-slide-photo { position: absolute; inset: 0; border-radius: 0; }
.eng-slide-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .52), rgba(0, 0, 0, .2) 45%, rgba(0, 0, 0, .66)); }
/* the full width blocks keep their words on the same line as the contained ones */
.eng-hero-inner, .eng-strip-inner, .eng-panels-head { --eng-pad: clamp(16px, 3cqw, 40px); max-width: calc(1180px + 2 * var(--eng-pad)); padding-inline: var(--eng-pad); }
.eng-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(18px, 3cqw, 44px);
                  padding-block: clamp(110px, 14cqw, 180px) clamp(22px, 3cqw, 44px); color: #fff; }
.eng-hero-copy { display: grid; justify-items: start; gap: clamp(12px, 1.6cqw, 20px); max-width: 22ch; }
.eng-hero-kicker { font-size: var(--text-sm); letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; }
.eng-hero-title { font-family: var(--font-display); font-size: clamp(34px, 6.2cqw, 98px); line-height: 1.02; letter-spacing: .06em; text-transform: uppercase; }
.eng-hero-lead { font-size: var(--text-md); line-height: 1.6; max-width: 46ch; }
.eng-hero-act { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.eng-hero-act .btn, .eng-panel-act .btn, .eng-head-act .btn, .eng-form .btn { white-space: normal; }
.eng-rail { display: grid; justify-items: center; align-content: end; gap: clamp(10px, 1.6cqw, 18px); color: #fff; }
.eng-count { display: grid; justify-items: center; gap: 2px; font-family: var(--font-display); font-size: var(--text-sm); letter-spacing: var(--tracking-caps, .12em); }
.eng-count b { font-size: clamp(22px, 2.4cqw, 34px); line-height: 1; font-variant-numeric: tabular-nums; }
.eng-count i { font-style: normal; opacity: .7; }
.eng-arrows, .eng-social { display: grid; gap: 8px; }
.eng-social { padding-top: clamp(6px, 1cqw, 12px); border-top: 1px solid rgba(255, 255, 255, .28); }
.eng-strip { position: relative; background: var(--page-bg); border-top: 1px solid color-mix(in srgb, var(--color-ink) 18%, transparent); }
.eng-strip-inner { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px clamp(12px, 2cqw, 32px); padding-block: clamp(12px, 1.6cqw, 20px); }
.eng-strip-item { font-size: var(--text-sm); color: var(--color-ink-soft); }
.eng-strip-item[href] { color: var(--color-accent-text); }
.eng-strip-caps { position: relative; display: grid; min-width: min(100%, 220px); }
.eng-cap { grid-area: 1 / 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; visibility: hidden; }
.eng-cap.is-active { visibility: visible; }
.eng-cap b { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.eng-cap i { font-style: normal; font-size: var(--text-sm); color: var(--color-ink-soft); }
.eng-strip-count { font-size: var(--text-sm); letter-spacing: var(--tracking-caps, .12em); color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.eng-strip-count b { color: var(--color-ink); }
@media (prefers-reduced-motion: no-preference) {
  .eng-slide.is-active { transition: clip-path .85s cubic-bezier(.66, 0, .2, 1); }
}
@container (max-width: 700px) {
  .eng-hero-inner { grid-template-columns: minmax(0, 1fr); align-content: end; padding-top: clamp(96px, 26cqw, 150px); }
  .eng-hero-copy { max-width: none; }
  .eng-hero-title { font-size: clamp(34px, 12.5cqw, 64px); letter-spacing: .04em; }
  .eng-hero-act .btn { flex: 1 1 auto; }
  .eng-rail { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 10px 12px; }
  .eng-arrows, .eng-social { grid-auto-flow: column; }
  .eng-social { padding: 0 0 0 12px; border-top: 0; border-left: 1px solid rgba(255, 255, 255, .28); }
  .eng-count { grid-auto-flow: column; align-items: baseline; gap: 4px; }
}

/* the ghost word behind a heading */
.eng-head { position: relative; display: grid; justify-items: start; gap: clamp(10px, 1.4cqw, 16px); max-width: 720px; }
.eng-ghost { position: absolute; left: 0; top: -.42em; z-index: -1; font-family: var(--font-display); font-size: min(13cqw, 150px); line-height: .8;
             text-transform: uppercase; letter-spacing: .01em; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--color-ink) 24%, transparent); }
.eng-eyebrow { font-size: var(--text-sm); letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-accent-text); }
.eng-title { font-family: var(--font-display); font-size: clamp(30px, 4.6cqw, 62px); line-height: 1.02; letter-spacing: var(--tracking-display); }
.eng-lead { font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); max-width: 56ch; }
.eng-head-act { padding-top: 4px; }

/* the bureau in four numbers */
.block-eng-facts { padding: clamp(52px, 7cqw, 112px) clamp(16px, 3cqw, 40px); }
.eng-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2cqw, 28px); margin: clamp(30px, 4cqw, 56px) 0 0;
             border-top: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); padding-top: clamp(18px, 2.4cqw, 30px); }
.eng-fact { display: grid; align-content: start; gap: 4px; }
.eng-fact dd { display: flex; align-items: baseline; gap: 3px; margin: 0; font-family: var(--font-display); font-size: clamp(34px, 5cqw, 72px); line-height: 1;
               letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; color: rgb(var(--color-primary)); }
.eng-fact dd i { font-style: normal; font-size: .4em; }
.eng-fact dt { font-size: var(--text-sm); letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-ink-soft); }
@container (max-width: 700px) { .eng-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; } }
@container (max-width: 320px) { .eng-facts { grid-template-columns: minmax(0, 1fr); } }

/* four projects standing side by side */
.block-eng-panels { padding: clamp(46px, 6cqw, 96px) 0 0; }
.eng-panels-head { padding-block: 0 clamp(26px, 4cqw, 52px); }
.eng-panels { display: flex; gap: 2px; }
.eng-panel { position: relative; flex: 1 1 0; min-width: 0; height: min(calc(var(--screen-h, 100svh) * .76), 740px);
             display: grid; align-content: end; justify-items: end; gap: 10px; padding: clamp(14px, 1.6cqw, 22px); }
.eng-panel-photo { position: absolute; inset: 0; z-index: -1; border-radius: 0; }
.eng-panel-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .74)); }
.eng-panel-cap { justify-self: start; display: flex; align-items: flex-start; gap: 10px; writing-mode: vertical-rl; transform: rotate(180deg); color: #fff; }
.eng-panel-no { font-family: var(--font-display); font-size: var(--text-sm); letter-spacing: var(--tracking-caps, .12em); opacity: .75; }
.eng-panel-cap h3 { font-family: var(--font-display); font-size: clamp(19px, 1.9cqw, 26px); line-height: 1.1; letter-spacing: var(--tracking-display); }
.eng-panel-meta { font-size: var(--text-sm); opacity: .8; }
.eng-panel-act { justify-self: start; display: flex; }
@media (prefers-reduced-motion: no-preference) {
  .eng-panel { transition: flex-grow .55s cubic-bezier(.2, .7, .1, 1); }
}
@container (min-width: 821px) {
  .eng-panel:hover { flex-grow: 2.3; }
}
@container (max-width: 820px) {
  .eng-panels { flex-direction: column; gap: 3px; }
  .eng-panel { height: auto; min-height: min(calc(var(--screen-h, 100svh) * .48), 460px); }
  .eng-panel-cap { writing-mode: horizontal-tb; transform: none; align-items: baseline; flex-wrap: wrap; }
}

/* the number cut out of a steel photograph */
.block-eng-twelve { padding: clamp(52px, 7cqw, 112px) 0 0; }
.eng-twelve-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: clamp(24px, 4cqw, 64px);
                   padding-bottom: clamp(40px, 5cqw, 76px); }
.eng-num-wrap { display: grid; justify-items: start; gap: clamp(10px, 1.4cqw, 18px); }
.eng-num { display: block; font-family: var(--font-display); font-size: min(26cqw, 340px); line-height: .82; letter-spacing: -.02em;
           background-size: cover; background-position: 50% 50%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
           -webkit-text-stroke: 1px color-mix(in srgb, var(--color-ink) 30%, transparent); }
.eng-num-note { font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); max-width: 42ch; }
.eng-discs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(12px, 2cqw, 28px); width: 100%; }
.eng-disc { padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--color-ink) 18%, transparent); font-size: var(--text-md); }
.eng-team-photo { width: 100%; aspect-ratio: 21 / 8; border-radius: 0; }
.eng-team-photo img { height: 114%; }
@container (max-width: 860px) {
  .eng-twelve-grid { grid-template-columns: minmax(0, 1fr); }
  .eng-num { font-size: min(44cqw, 280px); }
  .eng-team-photo { aspect-ratio: 4 / 3; }
}
@container (max-width: 420px) { .eng-discs { grid-template-columns: minmax(0, 1fr); } }

/* the enquiry: how to reach us, and the form */
.block-eng-contact { padding: clamp(52px, 7cqw, 112px) clamp(16px, 3cqw, 40px); }
.eng-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(22px, 3cqw, 48px); align-items: start; }
.eng-contact-info { display: grid; justify-items: start; gap: clamp(18px, 2.4cqw, 32px); }
.eng-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px clamp(12px, 2cqw, 28px); margin: 0; width: 100%; }
.eng-details dt { font-size: var(--text-sm); letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-ink-soft); }
.eng-details dd { margin: 0; font-size: var(--text-md); line-height: 1.5; }
.eng-details a { color: var(--color-accent-text); }
.eng-contact-photo { width: 100%; aspect-ratio: 4 / 3; }
.eng-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: clamp(18px, 2.6cqw, 32px); background: var(--page-bg); }
.eng-form-note { font-size: var(--text-sm); line-height: 1.55; color: var(--color-ink-soft); }
@container (max-width: 820px) {
  .eng-contact-grid { grid-template-columns: minmax(0, 1fr); }
  .eng-contact-photo { aspect-ratio: 3 / 2; }
}
@container (max-width: 380px) { .eng-details { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .eng-slide, .eng-panel { transition: none; animation: none; }
}
/* ---------- NINTH SERIES: holiday rentals (sty) ---------- */
/* STAYS: the header floats in white over the coast photo */
.layout--stays > .block-nav-min { position: relative; z-index: 20; height: 0; color: #fff; mix-blend-mode: difference; }
.layout--stays > .block-nav-min .block-inner { min-height: 72px; }
.layout--stays > .block-nav-min .nav-min-menu .glass::after { background: #fff; box-shadow: none; border: 0; }
.layout--stays > .block-nav-min .nav-min-menu .glass { color: #000; }
/* the name is two long words: on a narrow screen it may break and it comes down in size, whatever the kit's font */
@container (max-width: 760px) {
  .layout--stays :is(.block-nav-min, .block-foot-slim) .word-mark { font-size: clamp(15px, 4.2cqw, 20px); white-space: normal; }
  .layout--stays .block-foot-slim nav { font-size: 13px; gap: 8px 16px; }
}

/* ---------- the search hero ---------- */
.block-sty-find { position: relative; isolation: isolate; overflow: clip;
                  min-height: min(var(--screen-h, 100svh), 900px); display: grid; align-content: end; }
.sty-find-photo { position: absolute; inset: 0; z-index: -1; border-radius: 0; }
.sty-find-photo::after { content: ""; position: absolute; inset: 0;
                         background: linear-gradient(180deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, .06) 42%, rgba(0, 0, 0, .58)); }
.sty-find-inner { --block-max: 1180px; display: grid; justify-items: start; gap: 14px; color: #fff;
                  padding: 120px clamp(16px, 3cqw, 40px) clamp(28px, 4cqw, 60px); }
.sty-find-eyebrow { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; }
.sty-find-title { font-family: var(--font-display); font-size: clamp(44px, 7.2cqw, 112px); line-height: .94;
                  letter-spacing: var(--tracking-display); }
.block-sty-find .sty-find-lead { max-width: 52ch; font-size: var(--text-md); line-height: 1.6; }
.sty-search { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px;
              margin-top: clamp(10px, 1.6cqw, 22px); padding: clamp(12px, 1.6cqw, 18px); color: var(--color-ink); background: var(--page-bg); isolation: isolate; }
.sty-search-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sty-search-act .btn { white-space: normal; }
.block-sty-find .sty-find-note { max-width: 60ch; font-size: 13px; line-height: 1.55; }

@container (max-width: 900px) {
  .sty-search { grid-template-columns: minmax(0, 1fr); }
  .sty-search-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sty-search-act .btn { width: 100%; }
}
@container (max-width: 700px) {
  .block-sty-find { min-height: min(var(--screen-h, 100svh), 900px); align-content: space-between; }
  .sty-find-inner { padding: 96px 16px 28px; gap: 12px; align-content: end; }
  .sty-find-title { font-size: clamp(38px, 13cqw, 68px); }
  .block-sty-find .sty-find-lead { font-size: var(--text-sm); }
  .sty-search-fields { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 380px) {
  .block-sty-find .sty-find-lead { display: none; }
}

/* ---------- the six kinds and the homes ---------- */
.block-sty-stays { --block-max: 1180px; padding: clamp(44px, 6.5cqw, 104px) clamp(16px, 3cqw, 40px); }
.sty-head { display: grid; justify-items: start; gap: 12px; max-width: 760px; margin-bottom: clamp(20px, 3cqw, 36px); }
.sty-eyebrow { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-accent-text); }
.sty-title { font-family: var(--font-display); font-size: clamp(32px, 4.8cqw, 62px); line-height: 1; letter-spacing: var(--tracking-display); }
.block-sty-stays .sty-lead { max-width: 58ch; font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }
.sty-kinds { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(8px, 1.2cqw, 14px); }
.sty-kind { height: auto; min-height: 0; padding: clamp(12px, 1.6cqw, 18px) 8px; }
.sty-kind .glass-label { display: flex; flex-direction: column; align-items: center; gap: 8px; white-space: normal; text-align: center; line-height: 1.2; }
.sty-kind-icon { display: block; width: clamp(22px, 2.6cqw, 30px); height: clamp(22px, 2.6cqw, 30px); }
.sty-kind-icon svg { display: block; width: 100%; height: 100%; }
.block-sty-stays .sty-count { margin: clamp(14px, 2cqw, 22px) 0 clamp(12px, 1.6cqw, 18px); font-size: 13px;
                              letter-spacing: var(--tracking-caps, .1em); text-transform: uppercase; color: var(--color-ink-soft); }
.sty-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2cqw, 30px); }
.sty-card { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 0; }
.sty-card.is-out { display: none; }
.sty-card-top { position: relative; }
.sty-card-photo { aspect-ratio: 4 / 3; }
.sty-heart { position: absolute; top: 10px; right: 10px; }
.sty-heart .btn-icon.is-kept { color: rgb(var(--color-danger)); }
.sty-card-body { display: grid; justify-items: start; gap: 8px; padding: 14px 2px 0; }
.sty-card-body h3 { font-family: var(--font-display); font-size: clamp(19px, 1.9cqw, 25px); line-height: 1.15; letter-spacing: var(--tracking-display); }
.block-sty-stays .sty-where { font-size: 14px; line-height: 1.5; color: var(--color-ink-soft); }
.sty-specs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sty-specs li { padding: 4px 11px; border: 1px solid color-mix(in srgb, var(--color-ink) 18%, transparent);
                border-radius: var(--radius-pill, 999px); font-size: 13px; }
.sty-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; width: 100%; padding-top: 4px; }
.sty-card-foot .btn { white-space: normal; }
.sty-price { font-size: 13px; color: var(--color-ink-soft); }
.sty-price b { font-family: var(--font-display); font-size: 19px; color: var(--color-ink); font-variant-numeric: tabular-nums; }
@container (max-width: 1000px) { .sty-kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (max-width: 900px) { .sty-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 560px) {
  .sty-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sty-grid { grid-template-columns: minmax(0, 1fr); }
  .sty-card-photo { aspect-ratio: 3 / 2; }
}

/* ---------- why book here: three photos cut to diamonds ---------- */
.block-sty-why { --block-max: 1180px; padding: clamp(44px, 6.5cqw, 104px) clamp(16px, 3cqw, 40px); }
.sty-why-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(24px, 4cqw, 64px); }
.sty-gems { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2px, .5cqw, 8px); padding: 6%; }
.sty-gem { aspect-ratio: 1; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); border-radius: 0; }
.sty-gem--a { grid-row: span 2; align-self: center; transform: rotate(-5deg); }
.sty-gem--b { transform: rotate(4deg); }
.sty-gem--c { transform: rotate(-3deg); }
.sty-why-copy { display: grid; justify-items: start; gap: 14px; }
.sty-why-title { font-family: var(--font-display); font-size: clamp(30px, 4.2cqw, 56px); line-height: 1; letter-spacing: var(--tracking-display); }
.sty-reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(12px, 1.6cqw, 20px); width: 100%; }
.sty-reason { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; padding-top: clamp(12px, 1.6cqw, 18px);
              border-top: 1px solid color-mix(in srgb, var(--color-ink) 16%, transparent); }
.sty-reason-no { font-family: var(--font-display); font-size: 13px; letter-spacing: var(--tracking-caps, .1em);
                 color: var(--color-accent-text); font-variant-numeric: tabular-nums; }
.block-sty-why .sty-reason h3 { font-size: clamp(17px, 1.7cqw, 21px); font-weight: var(--weight-semibold); line-height: 1.25; }
.block-sty-why .sty-reason p { margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--color-ink-soft); }
.sty-why-act .btn { white-space: normal; }
@container (max-width: 900px) {
  .sty-why-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 4cqw, 36px); }
  .sty-gems { padding: 6% 12%; }
}
@container (max-width: 560px) { .sty-gems { padding: 6% 4%; } }

/* ---------- destinations ---------- */
.block-sty-places { --block-max: 1180px; padding: clamp(44px, 6.5cqw, 104px) clamp(16px, 3cqw, 40px); }
.sty-places-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
                   gap: 8px 24px; margin-bottom: clamp(18px, 2.6cqw, 32px); }
.sty-places-title { font-family: var(--font-display); font-size: clamp(30px, 4.2cqw, 56px); line-height: 1; letter-spacing: var(--tracking-display); }
.block-sty-places .sty-places-head p { font-size: 14px; line-height: 1.55; color: var(--color-ink-soft); max-width: 44ch; }
.sty-places { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.8cqw, 22px); }
.sty-place { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 0; text-decoration: none; color: inherit; }
.sty-place-photo { aspect-ratio: 3 / 4; }
.sty-place-body { display: grid; justify-items: start; gap: 5px; padding: 12px 2px 0; }
.sty-place-body strong { font-family: var(--font-display); font-size: clamp(18px, 1.8cqw, 23px); font-weight: var(--weight-semibold);
                         line-height: 1.15; letter-spacing: var(--tracking-display); }
.sty-place-body > span { font-size: 13px; line-height: 1.5; color: var(--color-ink-soft); }
.sty-place-more { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-accent-text); }
.sty-place-more svg { width: 15px; height: 15px; }
@container (max-width: 1000px) { .sty-places { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (max-width: 700px) { .sty-places { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sty-place-photo { aspect-ratio: 1; } }
@container (max-width: 300px) { .sty-places { grid-template-columns: minmax(0, 1fr); } .sty-place-photo { aspect-ratio: 3 / 2; } }

/* ---------- the letter, and the way in for hosts ---------- */
.block-sty-note { --block-max: 1180px; padding: clamp(44px, 6.5cqw, 104px) clamp(16px, 3cqw, 40px); }
.sty-note-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 3.4cqw, 56px); }
.sty-note-photo { aspect-ratio: 4 / 3; }
.sty-note-copy { display: grid; justify-items: start; gap: 12px; }
.sty-note-title { font-family: var(--font-display); font-size: clamp(28px, 4cqw, 52px); line-height: 1; letter-spacing: var(--tracking-display); }
.block-sty-note .sty-note-lead { max-width: 52ch; font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }
.sty-note-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; width: 100%; margin-top: 4px; }
.sty-note-form .btn { white-space: normal; }
.sty-host { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; width: 100%; padding-top: clamp(12px, 1.8cqw, 20px);
            border-top: 1px solid color-mix(in srgb, var(--color-ink) 16%, transparent); }
.block-sty-note .sty-host p { font-size: 14px; line-height: 1.5; color: var(--color-ink-soft); }
.sty-host .btn { white-space: normal; }
@container (max-width: 820px) {
  .sty-note-grid { grid-template-columns: minmax(0, 1fr); }
  .sty-note-photo { aspect-ratio: 16 / 9; }
}
@container (max-width: 520px) {
  .sty-note-form { grid-template-columns: minmax(0, 1fr); }
  .sty-note-form .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sty-heart .btn-icon, .sty-kind, .sty-place { transition: none; animation: none; }
}
/* ---------- NINTH SERIES: cooking school (cks) ---------- */
/* COOKING SCHOOL: the header floats in white over the kitchen photo */
.layout--cooking > .block-nav-min { position: relative; z-index: 20; height: 0; color: #fff; mix-blend-mode: difference; }
.layout--cooking > .block-nav-min .block-inner { min-height: 72px; }
.layout--cooking > .block-nav-min .nav-min-menu .glass::after { background: #fff; box-shadow: none; border: 0; }
.layout--cooking > .block-nav-min .nav-min-menu .glass { color: #000; }

/* the film hero */
.block-cks-film { position: relative; isolation: isolate; overflow: clip; }
.cks-film-photo { position: absolute; inset: 0; z-index: -1; border-radius: 0; }
.cks-film-photo::after { content: ""; position: absolute; inset: 0;
                         background: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .16) 42%, rgba(0, 0, 0, .7)); }
.cks-film-inner { position: relative; display: grid; align-content: space-between; justify-items: center; gap: clamp(18px, 3cqw, 40px);
                  min-height: min(var(--screen-h, 100svh), 900px); padding: clamp(86px, 9cqw, 130px) clamp(16px, 4cqw, 56px) clamp(22px, 3cqw, 44px); }
.cks-brand { color: #fff; font-size: 13px; line-height: 1.3; text-align: center; letter-spacing: .3em; text-transform: uppercase; }
.cks-film-mid { display: grid; justify-items: center; text-align: center; gap: clamp(14px, 2cqw, 26px); }
.cks-film-title { color: #fff; font-family: var(--font-display); font-size: clamp(34px, 8cqw, 112px); line-height: .96;
                  letter-spacing: var(--tracking-display); max-width: 15ch; }
.cks-film-title .rv-ln { display: block; }
.cks-play .btn { width: min(38cqw, 176px); min-width: 112px; height: auto; aspect-ratio: 1; padding: 12px;
                 border-radius: var(--radius-pill, 999px); white-space: normal; text-align: center; line-height: 1.25; }
.cks-film-note { color: #fff; font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; text-align: center; }
.cks-spec { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
.cks-spec li { color: #fff; font-size: 13px; line-height: 1.2; padding: 9px 16px; border-radius: var(--radius-pill, 999px);
               background: linear-gradient(rgba(0, 0, 0, .58), rgba(0, 0, 0, .58)); }
@container (max-width: 700px) {
  .cks-film-inner { min-height: min(var(--screen-h, 100svh), 780px); padding: 76px 16px 24px; gap: 16px; }
  .cks-film-title { font-size: clamp(30px, 11cqw, 58px); }
  .cks-play .btn { width: min(46cqw, 150px); }
  .cks-brand { letter-spacing: .22em; }
  .cks-spec li { padding: 8px 12px; font-size: 12px; }
}

/* the head every section below the hero shares */
.cks-head { display: grid; justify-items: start; gap: 12px; max-width: 760px; margin-bottom: clamp(24px, 4cqw, 52px); }
.cks-eyebrow { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-accent-text); }
.cks-title { font-family: var(--font-display); font-size: clamp(30px, 4.6cqw, 62px); line-height: 1; letter-spacing: var(--tracking-display); }
.cks-lead { font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); max-width: 58ch; }

/* four lessons */
.block-cks-lessons { padding: clamp(44px, 7cqw, 110px) clamp(16px, 3cqw, 40px); }
.cks-lesson-grid { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(16px, 3cqw, 44px); align-items: start; }
.cks-nums { display: grid; gap: 6px; align-content: start; }
.cks-nums .btn { justify-content: flex-start; width: 100%; height: auto; min-height: 52px; padding: 12px 14px; white-space: normal; text-align: left; }
.cks-nums .btn .glass-label > span { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.cks-no { font-family: var(--font-display); font-size: 15px; letter-spacing: var(--tracking-caps, .12em); color: var(--color-accent-text); font-variant-numeric: tabular-nums; }
.cks-lname { font-size: var(--text-md); line-height: 1.3; }
.cks-nums .btn.is-on .cks-lname { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 2px; }
.cks-panels { min-width: 0; }
.cks-panel { display: none; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(16px, 2.6cqw, 34px); align-items: start; }
.cks-panel.is-active { display: grid; }
.cks-panel-photo { aspect-ratio: 3 / 4; }
.cks-panel-copy { display: grid; justify-items: start; gap: 12px; min-width: 0; }
.cks-panel-no { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-ink-soft); }
.cks-panel-title { font-family: var(--font-display); font-size: clamp(22px, 2.6cqw, 34px); line-height: 1.1; letter-spacing: var(--tracking-display); }
.cks-panel-text { font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); max-width: 52ch; }
.cks-panel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; width: 100%; }
.cks-panel-list li { display: flex; gap: 10px; font-size: 14px; line-height: 1.45; padding-top: 8px;
                     border-top: 1px solid color-mix(in srgb, var(--color-ink) 18%, transparent); }
.cks-panel-list li::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-top: .45em; border-radius: var(--radius-pill, 999px); background: rgb(var(--color-primary)); }
.cks-panel-act { padding-top: 4px; }
.cks-panel-act .btn { white-space: normal; }
@media (prefers-reduced-motion: no-preference) {
  .cks-panel.is-active { animation: cks-panel-in .55s cubic-bezier(.22, .61, .36, 1) both; }
}
@keyframes cks-panel-in { from { transform: translateY(14px); } to { transform: none; } }
@container (max-width: 900px) {
  .cks-lesson-grid { grid-template-columns: minmax(0, 1fr); }
  .cks-nums { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
  .cks-nums .btn { min-height: 46px; padding: 10px; }
  .cks-nums .btn .glass-label > span { flex-direction: column; align-items: flex-start; gap: 2px; }
  .cks-lname { font-size: 14px; }
}
@container (max-width: 700px) {
  .cks-panel { grid-template-columns: minmax(0, 1fr); }
  .cks-panel-photo { aspect-ratio: 4 / 3; }
  .cks-nums { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cks-lname { font-size: 13px; }
}

/* the four chefs */
.block-cks-chefs { padding: clamp(44px, 7cqw, 110px) clamp(16px, 3cqw, 40px); }
.cks-chefs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2cqw, 26px); }
.cks-chef { display: grid; align-content: start; gap: 0; min-width: 0; }
.cks-chef-photo { aspect-ratio: 3 / 4; }
.cks-chef-body { display: grid; justify-items: start; gap: 6px; padding: 14px 2px 0; min-width: 0; }
.cks-chef-body h3 { font-family: var(--font-display); font-size: clamp(19px, 1.9cqw, 25px); line-height: 1.15; letter-spacing: var(--tracking-display); overflow-wrap: anywhere; }
.cks-chef-role { font-size: 12px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-accent-text); }
.cks-chef-line { font-size: 14px; line-height: 1.5; color: var(--color-ink-soft); }
@container (max-width: 980px) { .cks-chefs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 620px) {
  .cks-chefs { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cks-chef { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: center; }
  .cks-chef-photo { aspect-ratio: 1; }
  .cks-chef-body { padding: 0; }
}

/* next classes, and the gift card beside them */
.block-cks-dates { padding: clamp(44px, 7cqw, 110px) clamp(16px, 3cqw, 40px); }
.cks-dates-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: clamp(18px, 3cqw, 44px); align-items: start; }
.cks-dates-main { min-width: 0; }
.cks-dates-head { display: grid; justify-items: start; gap: 10px; margin-bottom: clamp(18px, 3cqw, 34px); }
.cks-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.cks-date-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px clamp(12px, 2cqw, 26px);
                padding: clamp(12px, 1.6cqw, 20px) 0; border-top: 1px solid color-mix(in srgb, var(--color-ink) 18%, transparent); }
.cks-date-row:last-child { border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 18%, transparent); }
.cks-day { display: grid; justify-items: center; line-height: 1; }
.cks-day b { font-family: var(--font-display); font-size: clamp(26px, 3cqw, 38px); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-display); }
.cks-day i { font-style: normal; font-size: 12px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-ink-soft); }
.cks-date-what { display: grid; gap: 3px; min-width: 0; }
.cks-date-what strong { font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: 1.25; }
.cks-date-meta { font-size: 13px; line-height: 1.4; color: var(--color-ink-soft); }
.cks-seats { font-size: 13px; line-height: 1.2; white-space: nowrap; padding: 6px 12px; border-radius: var(--radius-pill, 999px);
             border: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); color: var(--color-ink-soft); }
.cks-date-act .btn { white-space: normal; }
.cks-gift { display: grid; align-content: start; gap: 0; border-radius: var(--shape-card); overflow: clip; background: var(--page-bg);
            border: 1px solid color-mix(in srgb, var(--color-ink) 16%, transparent); }
.cks-gift-photo { aspect-ratio: 16 / 10; border-radius: 0; }
.cks-gift-body { display: grid; justify-items: start; gap: 10px; padding: clamp(16px, 2cqw, 24px); }
.cks-gift-body h3 { font-family: var(--font-display); font-size: clamp(20px, 2.2cqw, 28px); line-height: 1.1; letter-spacing: var(--tracking-display); }
.cks-gift-body p { font-size: 14px; line-height: 1.55; color: var(--color-ink-soft); }
.cks-gift-body .btn { white-space: normal; }
@container (max-width: 900px) { .cks-dates-grid { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 620px) {
  .cks-date-row { grid-template-columns: auto minmax(0, 1fr); }
  .cks-seats { grid-column: 1 / -1; justify-self: start; }
  .cks-date-act { grid-column: 1 / -1; }
  .cks-date-act .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cks-panel, .cks-panel.is-active { animation: none; }
}
/* ---------- NINTH SERIES: ski resort (ski) ---------- */
/* SKI: the header floats in white over the mountain */
.layout--ski > .block-nav-min { position: relative; z-index: 20; height: 0; color: #fff; mix-blend-mode: difference; }
.layout--ski > .block-nav-min .block-inner { min-height: 72px; }
.layout--ski > .block-nav-min .nav-min-menu .glass::after { background: #fff; box-shadow: none; border: 0; }
.layout--ski > .block-nav-min .nav-min-menu .glass { color: #000; }

.ski-eyebrow { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-accent-text); }

/* ---------- the first screen ---------- */
.block-ski-hero { padding-bottom: clamp(28px, 4cqw, 64px); }
.ski-screen { position: relative; isolation: isolate; overflow: clip; display: grid; align-content: end;
              min-height: min(var(--screen-h, 100svh), 940px); padding: 96px clamp(16px, 3cqw, 40px) clamp(72px, 8cqw, 148px); }
.ski-screen-photo { position: absolute; inset: 0; z-index: -1; border-radius: 0; }
.ski-screen-photo::after { content: ""; position: absolute; inset: 0;
                           background: linear-gradient(180deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, .05) 38%, rgba(0, 0, 0, .52)); }
.ski-screen-grid { width: 100%; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
                   align-items: end; gap: clamp(20px, 3cqw, 48px); }
.ski-screen-copy { display: grid; justify-items: start; gap: 14px; color: #fff; }
.ski-hero-eyebrow { color: #fff; }
.ski-hero-title { font-family: var(--font-display); font-size: clamp(44px, 8.4cqw, 148px); line-height: .92; letter-spacing: var(--tracking-display); }
.ski-hero-title .rv-ln { display: block; overflow: hidden; padding-bottom: .04em; margin-bottom: -.04em; }
.block-ski-hero .ski-hero-lead { max-width: 34ch; font-size: var(--text-md); line-height: 1.55; }

/* the planner over the photo */
.ski-plan { display: grid; gap: 14px; padding: clamp(16px, 2cqw, 24px); background: var(--page-bg); }
.ski-plan-title { font-family: var(--font-display); font-size: clamp(22px, 2.2cqw, 30px); line-height: 1.05; letter-spacing: var(--tracking-display); }
.ski-plan-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ski-plan-fields .pick-field { width: 100%; }
.block-ski-hero .ski-plan-sum { font-size: 14px; line-height: 1.5; color: var(--color-ink-soft); }
.ski-plan .btn { white-space: normal; }

/* the three cards that cross the bottom edge of the photo */
.ski-cards-wrap { position: relative; z-index: 2; padding-inline: clamp(16px, 3cqw, 40px); margin-top: clamp(-120px, -8cqw, -56px); }
.ski-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6cqw, 22px); }
.ski-card { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; justify-items: start; gap: 8px; padding: clamp(14px, 1.8cqw, 22px); background: var(--page-bg); }
.ski-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.ski-card-no { font-family: var(--font-display); font-size: clamp(26px, 3cqw, 40px); line-height: 1; letter-spacing: var(--tracking-display);
               color: rgb(var(--color-primary)); font-variant-numeric: tabular-nums; }
.ski-card-photo { flex: none; width: clamp(56px, 6cqw, 84px); aspect-ratio: 1; border-radius: var(--radius-pill, 999px); }
.ski-card-name { font-family: var(--font-display); font-size: clamp(18px, 1.8cqw, 24px); line-height: 1.15; letter-spacing: var(--tracking-display); }
.block-ski-hero .ski-card-line { font-size: 14px; line-height: 1.55; color: var(--color-ink-soft); }
.ski-card-act .btn { white-space: normal; }
@container (max-width: 900px) {
  .ski-screen-grid { grid-template-columns: minmax(0, 1fr); }
  .ski-plan { max-width: 520px; }
}
@container (max-width: 760px) { .ski-cards { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 700px) {
  .ski-screen { padding: 88px 16px clamp(56px, 9cqw, 84px); min-height: min(var(--screen-h, 100svh), 900px); }
  .ski-hero-title { font-size: clamp(40px, 15cqw, 92px); }
  .block-ski-hero .ski-hero-lead { max-width: none; }
  .ski-plan { max-width: none; }
  .ski-cards-wrap { margin-top: -40px; padding-inline: 12px; }
}

/* ---------- the snow report ---------- */
.block-ski-report { padding: clamp(36px, 5cqw, 80px) clamp(16px, 3cqw, 40px); }
.ski-report-inner { display: grid; gap: clamp(18px, 2.6cqw, 34px); }
.ski-report-head { display: grid; gap: 10px; max-width: 720px; }
.ski-report-title { font-family: var(--font-display); font-size: clamp(26px, 3.4cqw, 46px); line-height: 1.02; letter-spacing: var(--tracking-display); }
.ski-report-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2cqw, 26px); margin: 0;
                    padding-top: clamp(14px, 2cqw, 24px); border-top: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); }
.ski-fact { display: grid; gap: 4px; }
.ski-fact-label { font-size: 13px; letter-spacing: var(--tracking-caps, .1em); text-transform: uppercase; color: var(--color-ink-soft); }
.ski-fact-value { margin: 0; font-family: var(--font-display); font-size: clamp(34px, 5cqw, 66px); line-height: 1; letter-spacing: var(--tracking-display);
                  font-variant-numeric: tabular-nums; }
.ski-fact-unit { font-family: var(--font-sans); font-size: 14px; font-weight: var(--weight-medium); letter-spacing: 0; color: var(--color-ink-soft); }
.ski-report-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.block-ski-report .ski-report-note { max-width: 62ch; font-size: 14px; line-height: 1.55; color: var(--color-ink-soft); }
.ski-report-foot .btn { white-space: normal; }
@container (max-width: 760px) { .ski-report-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 360px) { .ski-fact-value { font-size: clamp(30px, 11cqw, 44px); } }

/* ---------- the gallery and its pills ---------- */
.block-ski-gallery { padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 40px); }
.ski-gal-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(20px, 3cqw, 36px); }
.ski-gal-words { display: grid; gap: 10px; max-width: 620px; }
.ski-gal-title { font-family: var(--font-display); font-size: clamp(28px, 4cqw, 56px); line-height: 1; letter-spacing: var(--tracking-display); }
.block-ski-gallery .ski-gal-lead { font-size: var(--text-md); line-height: 1.55; color: var(--color-ink-soft); }
.ski-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ski-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.6cqw, 20px); }
.ski-shot { margin: 0; display: grid; gap: 8px; align-content: start; }
.ski-shot.is-off { display: none; }
.ski-shot-photo { aspect-ratio: 4 / 5; }
.ski-shot figcaption { font-size: 13px; line-height: 1.45; color: var(--color-ink-soft); }
@container (max-width: 1000px) { .ski-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (max-width: 700px) { .ski-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 420px) { .ski-grid { grid-template-columns: minmax(0, 1fr); } .ski-shot-photo { aspect-ratio: 4 / 3; } }

/* ---------- the season pass banner ---------- */
.block-ski-pass { position: relative; overflow: clip; padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 40px) 0; }
.ski-pass-inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; gap: clamp(20px, 3cqw, 48px);
                  padding-bottom: clamp(24px, 3cqw, 44px); }
.ski-pass-copy { display: grid; justify-items: start; gap: 14px; }
.ski-pass-title { font-family: var(--font-display); font-size: clamp(34px, 5.4cqw, 78px); line-height: .96; letter-spacing: var(--tracking-display); }
.ski-pass-title .rv-ln { display: inline-block; overflow: hidden; padding-bottom: .05em; margin-bottom: -.05em; }
.block-ski-pass .ski-pass-lead { max-width: 52ch; font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }
.ski-pass-act { display: flex; flex-wrap: wrap; gap: 12px; }
.ski-pass-act .btn { white-space: normal; }
.ski-pass-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; }
.ski-pass-facts div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px;
                      padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 18%, transparent); }
.ski-pass-facts div:first-child { border-top: 1px solid color-mix(in srgb, var(--color-ink) 18%, transparent); }
.ski-pass-facts dt { font-size: 14px; color: var(--color-ink-soft); }
.ski-pass-facts dd { margin: 0; font-family: var(--font-display); font-size: clamp(17px, 1.7cqw, 22px); letter-spacing: var(--tracking-display); }
.ski-ridge { display: block; width: 100%; height: clamp(74px, 9.5cqw, 150px); color: color-mix(in srgb, var(--color-ink) 52%, transparent); }
.ski-ridge-back { color: color-mix(in srgb, var(--color-ink) 22%, transparent); }
@container (max-width: 820px) {
  .ski-pass-inner { grid-template-columns: minmax(0, 1fr); }
  .ski-pass-title { font-size: clamp(32px, 11cqw, 64px); }
  .ski-pass-act { width: 100%; grid-template-columns: minmax(0, 1fr); }
  .ski-pass-act .btn { flex: 1 1 200px; }
}

/* ---------- the questions ---------- */
.block-ski-faq { padding: clamp(40px, 6cqw, 96px) clamp(16px, 3cqw, 40px); }
.ski-faq-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: start; gap: clamp(20px, 3cqw, 56px); }
.ski-faq-side { display: grid; gap: clamp(12px, 1.6cqw, 20px); }
.ski-faq-photo { aspect-ratio: 3 / 4; }
.ski-faq-card { display: grid; justify-items: start; gap: 8px; padding: clamp(16px, 2cqw, 24px); background: var(--page-bg); }
.ski-faq-card h3 { font-family: var(--font-display); font-size: clamp(19px, 1.9cqw, 24px); line-height: 1.1; letter-spacing: var(--tracking-display); }
.block-ski-faq .ski-faq-card p { font-size: 14px; line-height: 1.55; color: var(--color-ink-soft); }
.ski-faq-card .btn { white-space: normal; }
.ski-faq-head { display: grid; gap: 10px; margin-bottom: clamp(12px, 1.6cqw, 20px); }
.ski-faq-title { font-family: var(--font-display); font-size: clamp(28px, 4cqw, 56px); line-height: 1; letter-spacing: var(--tracking-display); }
.ski-qa { border-top: 1px solid color-mix(in srgb, var(--color-ink) 18%, transparent); }
.ski-qa:last-child { border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 18%, transparent); }
.ski-qa > .btn { width: 100%; height: auto; min-height: 60px; padding-inline: 0; text-align: left; white-space: normal; }
.ski-qa > .btn .glass-label { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ski-qa > .btn .glass-label > span { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; }
.ski-q-text { font-family: var(--font-display); font-size: clamp(16px, 1.7cqw, 21px); line-height: 1.25; letter-spacing: var(--tracking-display); text-align: left; }
.ski-q-sign { position: relative; flex: none; width: 18px; height: 18px; }
.ski-q-sign::before, .ski-q-sign::after { content: ""; position: absolute; left: 50%; top: 50%; width: 15px; height: 2px;
                                          margin: -1px 0 0 -7.5px; background: currentColor; }
.ski-q-sign::after { transform: rotate(90deg); }
.ski-qa.is-open .ski-q-sign::after { transform: rotate(0deg); }
.ski-a { display: grid; grid-template-rows: 0fr; }
.ski-a > div { overflow: hidden; }
.ski-qa.is-open .ski-a { grid-template-rows: 1fr; }
.block-ski-faq .ski-a p { padding-bottom: 18px; max-width: 62ch; font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }
@media (prefers-reduced-motion: no-preference) {
  .ski-a { transition: grid-template-rows .42s cubic-bezier(.22, .61, .36, 1); }
  .ski-q-sign::before, .ski-q-sign::after { transition: transform .32s cubic-bezier(.22, .61, .36, 1); }
}
@container (max-width: 860px) {
  .ski-faq-grid { grid-template-columns: minmax(0, 1fr); }
  .ski-faq-side { grid-template-columns: minmax(0, 1fr); }
  .ski-faq-photo { aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) {
  .ski-a, .ski-q-sign::before, .ski-q-sign::after { transition: none; animation: none; }
}
/* ---------- NINTH SERIES: co-living houses (clv) ---------- */
/* CO-LIVING: the header floats in white over the roof photo */
.layout--coliving > .block-nav-min { position: relative; z-index: 20; height: 0; color: #fff; mix-blend-mode: difference; }
.layout--coliving > .block-nav-min .block-inner { min-height: 72px; }
.layout--coliving > .block-nav-min .nav-min-menu .glass::after { background: #fff; box-shadow: none; border: 0; }
.layout--coliving > .block-nav-min .nav-min-menu .glass { color: #000; }

/* shared parts of the section heads */
.clv-eyebrow { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-accent-text); }
.clv-lead { font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); max-width: 56ch; }
.block-clv-scatter .clv-lead, .block-clv-rooms .clv-lead { margin-top: 4px; }
.clv-title, .clv-why-title, .clv-rooms-title { font-family: var(--font-display); font-weight: var(--weight-bold); overflow-wrap: anywhere;
  font-size: clamp(30px, 6cqw, 74px); line-height: .96; letter-spacing: var(--tracking-display); text-transform: uppercase; overflow-wrap: anywhere; }
.clv-head { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 10px; max-width: 900px; margin-bottom: clamp(24px, 4cqw, 52px); }

/* the first screen: the roof, the two line headline, then what the house is */
.block-clv-hero { padding: 0 0 clamp(32px, 5cqw, 72px); }
.clv-stage { position: relative; isolation: isolate; overflow: clip; display: grid; grid-template-columns: minmax(0, 1fr); align-content: end;
             min-height: min(var(--screen-h, 100svh), 880px); padding: 96px clamp(16px, 4cqw, 64px) clamp(24px, 4cqw, 56px); }
.clv-hero-ph { position: absolute; inset: 0; z-index: -1; border-radius: 0; border: 0 !important; box-shadow: none !important; }
.clv-hero-ph::after { content: ""; position: absolute; inset: 0;
                      background: linear-gradient(180deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, .1) 34%, rgba(0, 0, 0, .06) 52%, rgba(0, 0, 0, .58)); }
.clv-hero-copy { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: clamp(10px, 1.6cqw, 20px); color: #fff; }
.clv-kicker { font-size: 13px; letter-spacing: var(--tracking-caps, .14em); text-transform: uppercase; overflow-wrap: anywhere; }
.clv-hero-title { font-family: var(--font-display); font-weight: var(--weight-bold); text-transform: uppercase;
                  font-size: clamp(34px, 10.5cqw, 150px); line-height: .92; letter-spacing: var(--tracking-display); overflow-wrap: anywhere; }
.clv-hero-title .rv-ln + .rv-ln { text-align: right; }
.clv-hero-title .rv-ln > span, .clv-title .rv-ln > span, .clv-why-title .rv-ln > span, .clv-rooms-title .rv-ln > span { display: block; max-width: 100%; }
.block-clv-hero .btn { max-width: 100%; }
.clv-acts { min-width: 0; }

/* what the house is, in two tones, with the four numbers under it */
.clv-say-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 2.6cqw, 36px);
                 padding: clamp(26px, 4cqw, 56px) clamp(16px, 4cqw, 64px) 0; }
.clv-say { font-family: var(--font-display); font-weight: var(--weight-bold); text-transform: uppercase;
           font-size: clamp(26px, 6.4cqw, 86px); line-height: 1; letter-spacing: var(--tracking-display); overflow-wrap: anywhere; }
.clv-say-ink { color: var(--color-ink); }
.clv-say-out { color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--color-ink) 45%, transparent); }
.clv-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 18px; margin: 0;
             padding-top: clamp(14px, 2cqw, 22px); border-top: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); }
.clv-fact dt { margin: 0; }
.clv-fact dt b { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: clamp(26px, 3.4cqw, 48px);
                 line-height: 1; letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.clv-fact dd { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--color-ink-soft); }
.clv-acts { display: flex; flex-wrap: wrap; gap: 12px; }
.clv-acts .btn { white-space: normal; }
@container (max-width: 700px) {
  .clv-stage { min-height: min(var(--screen-h, 100svh), 760px); padding: 86px 16px 24px; }
  .clv-hero-title { font-size: clamp(34px, 15cqw, 68px); }
  .clv-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clv-acts .btn { width: 100%; }
}

/* the pinboard of house photos */
.block-clv-scatter { padding: clamp(44px, 6cqw, 104px) clamp(16px, 3cqw, 40px); }
.clv-scatter { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 2cqw, 28px) clamp(12px, 1.6cqw, 24px); }
.clv-shot { display: grid; gap: 8px; align-content: start; min-width: 0; }
.clv-shot-ph { width: 100%; }
.clv-shot:nth-child(1) { grid-column: 1 / 4; }
.clv-shot:nth-child(1) .clv-shot-ph { aspect-ratio: 4 / 3; }
.clv-shot:nth-child(2) { grid-column: 5 / 7; margin-top: clamp(16px, 5cqw, 84px); }
.clv-shot:nth-child(2) .clv-shot-ph { aspect-ratio: 3 / 4; }
.clv-shot:nth-child(3) { grid-column: 2 / 4; margin-top: clamp(8px, 2cqw, 34px); }
.clv-shot:nth-child(3) .clv-shot-ph { aspect-ratio: 1; }
.clv-shot:nth-child(4) { grid-column: 4 / 7; }
.clv-shot:nth-child(4) .clv-shot-ph { aspect-ratio: 16 / 10; }
.clv-shot:nth-child(5) { grid-column: 3 / 7; margin-top: clamp(8px, 2cqw, 30px); }
.clv-shot:nth-child(5) .clv-shot-ph { aspect-ratio: 16 / 9; }
.clv-cap { display: flex; gap: 10px; font-size: 13px; line-height: 1.4; color: var(--color-ink-soft); }
.clv-cap-no { flex: none; color: var(--color-accent-text); font-variant-numeric: tabular-nums; }
@container (max-width: 700px) {
  .clv-scatter { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .clv-shot, .clv-shot:nth-child(1), .clv-shot:nth-child(2), .clv-shot:nth-child(3), .clv-shot:nth-child(4), .clv-shot:nth-child(5) {
    grid-column: auto; margin-top: 0;
  }
  .clv-shot .clv-shot-ph { aspect-ratio: 4 / 5; }
  .clv-shot:nth-child(5) { grid-column: 1 / -1; }
  .clv-shot:nth-child(5) .clv-shot-ph { aspect-ratio: 16 / 10; }
}

/* four reasons under thin rules */
.block-clv-why { padding: clamp(44px, 6cqw, 104px) clamp(16px, 3cqw, 40px); }
.clv-why-head { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 10px; margin-bottom: clamp(20px, 3cqw, 40px); }
.clv-why-list { list-style: none; margin: 0; padding: 0; display: grid; }
.clv-why-row { display: grid; grid-template-columns: clamp(64px, 8cqw, 130px) minmax(0, 1fr) minmax(0, 1.5fr);
               align-items: start; gap: 8px clamp(12px, 2cqw, 32px); padding: clamp(16px, 2.4cqw, 30px) 0;
               border-top: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); }
.clv-why-row:last-child { border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); }
.clv-why-no { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: clamp(22px, 2.6cqw, 40px);
              line-height: 1; letter-spacing: var(--tracking-display); color: var(--color-accent-text); font-variant-numeric: tabular-nums; }
.clv-why-name { font-family: var(--font-display); font-size: clamp(19px, 2.2cqw, 30px); line-height: 1.08;
                letter-spacing: var(--tracking-display); }
.clv-why-text { font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }
@container (max-width: 700px) {
  .clv-why-row { grid-template-columns: auto minmax(0, 1fr); }
  .clv-why-text { grid-column: 1 / -1; }
}

/* the bento: a tall photo in black and white beside four cards */
.block-clv-bento { padding: clamp(44px, 6cqw, 104px) clamp(16px, 3cqw, 40px); }
.clv-bento { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1fr);
             gap: clamp(12px, 1.6cqw, 22px); align-items: stretch; }
.clv-tall { grid-column: 1; grid-row: 1 / span 3; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 10px; min-width: 0; }
.clv-tall-ph { height: 100%; min-height: clamp(280px, 34cqw, 560px); filter: grayscale(1) contrast(1.06); }
.clv-tall-cap { font-size: 13px; line-height: 1.4; color: var(--color-ink-soft); }
.clv-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; min-width: 0;
            padding: clamp(16px, 2.2cqw, 30px); border: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); }
.clv-card h3 { font-family: var(--font-display); font-size: clamp(19px, 2.1cqw, 29px); line-height: 1.08; letter-spacing: var(--tracking-display); }
.clv-card p { font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }
.clv-card--wide { grid-column: 2 / 4; }
.clv-card--ink { grid-column: 2; border: 0; }
.clv-card--ink p { color: inherit; }
.clv-card-no { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: clamp(38px, 5cqw, 78px);
               line-height: .9; letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.clv-card--cost { grid-column: 2 / 4; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
                  gap: 12px clamp(14px, 2cqw, 28px); }
.clv-card--cost > div { display: grid; gap: 8px; min-width: min(100%, 260px); flex: 1 1 260px; }
.clv-card-act .btn { white-space: normal; }
@container (max-width: 860px) {
  .clv-bento { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .clv-tall { grid-column: 1 / -1; grid-row: auto; }
  .clv-tall-ph { min-height: 0; aspect-ratio: 4 / 3; }
  .clv-card--wide, .clv-card--cost { grid-column: 1 / -1; }
  .clv-card--ink { grid-column: 1; }
}
@container (max-width: 560px) {
  .clv-bento { grid-template-columns: minmax(0, 1fr); }
  .clv-card--ink { grid-column: 1; }
  .clv-tall-ph { aspect-ratio: 3 / 4; }
  .clv-card-act, .clv-card-act .btn { width: 100%; }
}

/* the rooms and the two choices an application starts with */
.block-clv-rooms { padding: clamp(44px, 6cqw, 104px) clamp(16px, 3cqw, 40px); }
.clv-rooms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2cqw, 28px); }
.clv-room { display: grid; align-content: start; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.clv-room.is-off { display: none; }
.clv-room-ph { aspect-ratio: 4 / 3; }
.clv-room-body { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 8px; padding: 14px 2px 0; }
.clv-room-house { font-size: 12px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-accent-text); }
.clv-room-name { font-family: var(--font-display); font-size: clamp(19px, 2.1cqw, 28px); line-height: 1.1; letter-spacing: var(--tracking-display); }
.clv-inc { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.clv-inc li { padding: 4px 10px; font-size: 13px; border: 1px solid color-mix(in srgb, var(--color-ink) 22%, transparent); }
.clv-room-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; width: 100%; padding-top: 4px; }
.clv-room-foot .btn { white-space: normal; }
.clv-price { font-size: 13px; color: var(--color-ink-soft); }
.clv-price b { font-family: var(--font-display); font-size: 20px; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.clv-apply { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto; align-items: end; gap: 18px clamp(16px, 2.4cqw, 36px);
             margin-top: clamp(26px, 4cqw, 56px); padding-top: clamp(20px, 3cqw, 36px);
             border-top: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); }
.clv-apply-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.clv-apply-title { font-family: var(--font-display); font-size: clamp(22px, 2.8cqw, 38px); line-height: 1.04; letter-spacing: var(--tracking-display); }
.clv-apply-lead { font-size: 14px; line-height: 1.55; color: var(--color-ink-soft); }
.clv-picks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.clv-pickset { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.clv-pick-label { font-size: 12px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-ink-soft); }
.clv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.clv-apply-act .btn { white-space: normal; }
.clv-apply-none { display: none; grid-column: 1 / -1; font-size: 14px; line-height: 1.55; color: var(--color-ink-soft); }
.block-clv-rooms.is-empty .clv-apply-none { display: block; }
@container (max-width: 900px) {
  .clv-rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clv-apply { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .clv-apply-act, .clv-apply-act .btn { width: 100%; }
}
@container (max-width: 560px) { .clv-rooms { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .block-clv-hero *, .block-clv-rooms * { transition: none; animation: none; }
}
/* ---------- NINTH SERIES: cocktail bar (bar) ---------- */
/* the header floats in white over the photo of the counter */
.layout--bar > .block-nav-min { position: relative; z-index: 20; height: 0; color: #fff; mix-blend-mode: difference; }
.layout--bar > .block-nav-min .block-inner { min-height: 72px; }
.layout--bar > .block-nav-min .nav-min-menu .glass::after { background: #fff; box-shadow: none; border: 0; }
.layout--bar > .block-nav-min .nav-min-menu .glass { color: #000; }

/* words shared by the sections */
.bar-eyebrow { font-size: 13px; letter-spacing: var(--tracking-caps, .14em); text-transform: uppercase; color: var(--color-accent-text); }
.bar-lead { font-size: var(--text-md); line-height: 1.6; overflow-wrap: break-word; max-width: min(100%, 52ch); }

/* ---------- the night hero ---------- */
.block-bar-hero { position: relative; isolation: isolate; overflow: clip; display: grid; align-items: end;
                  min-height: min(var(--screen-h, 100svh), 900px); }
.bar-hero-photo { position: absolute; inset: 0; z-index: -1; border-radius: 0; }
.bar-hero-photo::after { content: ""; position: absolute; inset: 0;
                         background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .2) 42%, rgba(0, 0, 0, .82)); }
.bar-hero-inner { --block-max: 1180px; display: grid; justify-items: start; gap: clamp(12px, 1.6cqw, 22px);
                  padding: 120px clamp(26px, 4cqw, 56px) clamp(28px, 4cqw, 64px); color: #fff; }
.block-bar-hero .bar-eyebrow { color: #fff; }
.bar-title { font-family: var(--font-display); font-size: clamp(42px, 9.4cqw, 132px); line-height: .92; letter-spacing: var(--tracking-display);
             text-transform: uppercase; max-width: min(100%, 13ch); }
.bar-em { font-family: Georgia, "Times New Roman", serif; font-style: italic; text-transform: none; letter-spacing: 0; }
.block-bar-hero .bar-lead { max-width: min(100%, 46ch); color: #fff; }
.bar-hero-act { display: flex; flex-wrap: wrap; gap: 10px 12px; padding-top: 4px; }
.bar-hero-act .btn { white-space: normal; }
.bar-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 18px; width: 100%; margin: 0;
             padding-top: clamp(14px, 2cqw, 24px); border-top: 1px solid rgba(255, 255, 255, .28); }
.bar-facts dt { font-size: 12px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; opacity: .72; }
.bar-facts dd { margin: 5px 0 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); }

/* the two labels standing on their ends at the edges of the first screen */
.bar-edge { position: absolute; top: 50%; z-index: 5; writing-mode: vertical-rl; font-size: 12px; letter-spacing: var(--tracking-caps, .2em);
            text-transform: uppercase; text-decoration: none; color: #fff; }
.bar-edge--back { left: clamp(10px, 1.6cqw, 22px); transform: translateY(-50%) rotate(180deg); }
.bar-edge--side { right: clamp(10px, 1.6cqw, 22px); transform: translateY(-50%); }
.bar-edge::after { content: ""; display: block; width: 1px; height: 40px; margin: 10px auto 0; background: rgba(255, 255, 255, .5); }
.bar-edge--back::after { margin: 0 auto 10px; }

/* ---------- the table: the form the page is built around ---------- */
.bar-book-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); align-items: stretch; }
.bar-book-side { display: grid; align-content: center; gap: clamp(18px, 2.4cqw, 32px); padding: clamp(48px, 6cqw, 112px) clamp(16px, 4cqw, 80px); }
.bar-book-head { display: grid; justify-items: start; gap: 12px; }
.bar-book-title { font-family: var(--font-display); font-size: clamp(30px, 4.2cqw, 58px); line-height: 1; letter-spacing: var(--tracking-display); max-width: min(100%, 16ch); }
.bar-book-photo { border-radius: 0; min-height: 100%; }
.bar-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
            padding: clamp(18px, 2.4cqw, 30px); border: 1px solid color-mix(in srgb, var(--color-ink) 26%, transparent); border-radius: var(--shape-card); }
.bar-picks { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bar-picks .pick-field { width: 100%; }
.bar-ring { grid-column: 1 / -1; position: relative; display: inline-grid; justify-self: start; padding: 16px 30px; color: var(--color-accent-text); }
.bar-ring-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bar-ring .btn { white-space: normal; }
.bar-book-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.bar-book-note { flex: 1 1 260px; font-size: 13px; line-height: 1.55; color: var(--color-ink-soft); }
.bar-book-foot .btn { white-space: normal; }
@media (prefers-reduced-motion: no-preference) {
  .layout.rv-on .bar-ring .bar-ring-line path { stroke-dasharray: 800; stroke-dashoffset: 800; }
  .layout.rv-on .bar-form.is-in .bar-ring-line path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s cubic-bezier(.4, 0, .2, 1) .25s; }
}

/* ---------- the list ---------- */
.block-bar-list { --block-max: 1180px; padding: clamp(48px, 7cqw, 110px) clamp(16px, 3cqw, 40px); }
.bar-list-head { display: grid; justify-items: start; gap: 12px; max-width: min(100%, 780px); }
.bar-list-title { font-family: var(--font-display); font-size: clamp(26px, 4.4cqw, 62px); overflow-wrap: break-word; line-height: 1; letter-spacing: var(--tracking-display); max-width: min(100%, 18ch); }
.bar-tonight { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: clamp(22px, 3cqw, 40px) 0 clamp(24px, 3.4cqw, 44px);
               padding: 14px 0; border-block: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); }
.bar-tonight-word { font-size: 12px; letter-spacing: var(--tracking-caps, .2em); text-transform: uppercase; color: var(--color-accent-text); }
.bar-tonight ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; }
.bar-tonight li { position: relative; padding-left: 15px; font-size: var(--text-sm); color: var(--color-ink-soft); }
.bar-tonight li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: var(--radius-pill, 999px); background: currentColor; }
.bar-list-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(20px, 3.4cqw, 56px); align-items: start; }
.bar-list-media { position: relative; }
.bar-list-photo { aspect-ratio: 3 / 4; }
.bar-hours { position: absolute; top: 7%; right: -7%; width: min(196px, 32cqw); aspect-ratio: 1; display: grid; align-content: center; justify-items: center;
             gap: 3px; padding: 12px; text-align: center; border: 1px solid color-mix(in srgb, var(--color-ink) 34%, transparent);
             border-radius: var(--radius-pill, 999px); background: var(--page-bg); }
.bar-hours-word { font-size: 12px; letter-spacing: var(--tracking-caps, .2em); text-transform: uppercase; color: var(--color-accent-text); }
.bar-hours span:not(.bar-hours-word) { font-size: 12px; line-height: 1.35; color: var(--color-ink-soft); }
.bar-hours b { font-family: var(--font-display); font-size: clamp(15px, 1.7cqw, 20px); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.bar-drinks { list-style: none; margin: 0; padding: 0; }
.bar-drink { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 4px 16px; padding: 16px 0;
             border-top: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); color: inherit; text-decoration: none; }
.bar-drinks li:last-child .bar-drink { border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); }
.bar-drink-no { font-family: var(--font-display); font-size: 13px; color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.bar-drink-copy h3 { font-family: var(--font-display); font-size: clamp(20px, 2.4cqw, 30px); line-height: 1.08; letter-spacing: var(--tracking-display); }
.block-bar-list .bar-drink-copy p { margin-top: 5px; font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-soft); }
.bar-drink-price { font-family: var(--font-display); font-size: clamp(16px, 1.8cqw, 22px); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-drink:hover .bar-drink-copy h3, .bar-drink:focus-visible .bar-drink-copy h3 { color: var(--color-accent-text); }
.block-bar-list .bar-list-note { margin-top: clamp(16px, 2cqw, 26px); font-size: 13px; line-height: 1.55; color: var(--color-ink-soft); max-width: min(100%, 58ch); }
@media (prefers-reduced-motion: no-preference) {
  .bar-drink .bar-drink-copy h3 { transition: color .35s ease; }
}

/* ---------- the letter ---------- */
.block-bar-sub { --block-max: 900px; padding: clamp(40px, 6cqw, 100px) clamp(16px, 3cqw, 40px) clamp(56px, 8cqw, 130px); }
.bar-sub-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 16px; padding: clamp(24px, 4cqw, 56px);
               border: 1px solid color-mix(in srgb, var(--color-ink) 26%, transparent); border-radius: var(--shape-card); }
.bar-sub-box > .bar-eyebrow, .bar-sub-title, .bar-sub-lead, .bar-sub-note { grid-column: 1 / -1; }
.bar-sub-title { font-family: var(--font-display); font-size: clamp(26px, 3.4cqw, 44px); line-height: 1.04; letter-spacing: var(--tracking-display); max-width: min(100%, 20ch); }
.block-bar-sub .bar-sub-lead { font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); max-width: min(100%, 52ch); }
.bar-sub-box .site-field { align-self: end; }
.bar-sub-box > .btn { align-self: end; white-space: normal; }
.block-bar-sub .bar-sub-note { margin-top: 2px; font-size: 13px; line-height: 1.55; color: var(--color-ink-soft); }

/* ---------- tablet ---------- */
@container (max-width: 980px) {
  .bar-book-grid { grid-template-columns: minmax(0, 1fr); }
  .bar-book-photo { aspect-ratio: 16 / 10; min-height: 0; }
  .bar-list-grid { grid-template-columns: minmax(0, 1fr); }
  .bar-list-media { display: grid; justify-items: start; gap: 14px; }
  .bar-list-photo { width: 100%; aspect-ratio: 16 / 10; }
  .bar-hours { position: static; width: auto; aspect-ratio: auto; grid-auto-flow: column; justify-content: start; align-items: center;
               justify-items: start; gap: 4px 14px; padding: 9px 20px; text-align: left; }
}

/* ---------- phone ---------- */
@container (max-width: 700px) {
  .bar-edge { display: none; }
  .bar-hero-inner { padding: 104px 18px 28px; gap: 12px; }
  .bar-title { font-size: clamp(40px, 15cqw, 92px); max-width: none; }
  .bar-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bar-hero-act { width: 100%; }
  .bar-hero-act .btn { flex: 1 1 100%; }
  .bar-form { grid-template-columns: minmax(0, 1fr); }
  .bar-picks { grid-template-columns: minmax(0, 1fr); }
  .bar-ring { justify-self: stretch; padding: 14px 20px; }
  .bar-ring .btn { width: 100%; }
  .bar-sub-box { grid-template-columns: minmax(0, 1fr); }
  .bar-sub-box > .btn { justify-self: stretch; }
}
@container (max-width: 520px) {
  .bar-drink { grid-template-columns: auto minmax(0, 1fr); }
  .bar-drink-price { grid-column: 2; justify-self: start; padding-top: 6px; }
  .bar-hours { grid-auto-flow: row; padding: 12px 18px; }
  .bar-tonight { gap: 8px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .bar-drink .bar-drink-copy h3, .bar-ring .bar-ring-line path { transition: none; animation: none; }
}
/* ---------- NINTH SERIES: jewellery atelier (jwl) ---------- */

/* shared type of the page */
.jwl-eyebrow { font-size: 12px; letter-spacing: var(--tracking-caps, .18em); text-transform: uppercase; color: var(--color-accent-text); }
.jwl-title { font-family: var(--font-display); font-size: clamp(28px, 4.4cqw, 58px); line-height: 1.02; letter-spacing: var(--tracking-display); }
.jwl-lead { font-size: var(--text-md); line-height: 1.65; color: var(--color-ink-soft); }
.jwl-pill .btn { border-radius: var(--radius-pill, 999px); }
.jwl-pill .btn > * { border-radius: inherit; }

/* ---------- the initials ---------- */
.block-jwl-initials { position: relative; overflow: clip; padding-inline: clamp(16px, 3cqw, 40px); }
.jwl-hero { --block-max: 1180px; position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); grid-template-rows: minmax(0, 1fr) auto;
            align-items: center; gap: clamp(20px, 3cqw, 48px); min-height: min(calc(var(--screen-h, 100svh) - 84px), 860px);
            padding-top: clamp(28px, 4cqw, 64px); padding-bottom: clamp(24px, 3cqw, 52px); }
.jwl-ghost { position: absolute; right: 36%; top: 50%; translate: 0 -54%; z-index: 0; pointer-events: none;
             font-family: var(--font-display); font-style: italic; font-size: clamp(190px, 44cqw, 620px); line-height: .78;
             color: color-mix(in srgb, var(--color-ink) 7%, transparent); }
.jwl-hero-copy { position: relative; z-index: 1; display: grid; justify-items: start; gap: clamp(12px, 1.6cqw, 22px); }
.jwl-initials { display: grid; gap: 2px; }
.jwl-initials .rv-ln { display: block; }
.jwl-initials .rv-ln:first-child > span { font-family: var(--font-display); font-style: italic; font-size: clamp(40px, 8.5cqw, 132px);
                                          line-height: .92; letter-spacing: var(--tracking-display); }
.jwl-initials .rv-ln:last-child > span { font-family: var(--font-sans); font-weight: var(--weight-regular, 400); font-size: clamp(20px, 3.2cqw, 48px);
                                         line-height: 1.1; letter-spacing: var(--tracking-caps, .2em); text-transform: uppercase; color: var(--color-ink-soft); }
.block-jwl-initials .jwl-lead { max-width: 46ch; }
.jwl-hero-act { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.jwl-hero-act .btn { white-space: normal; }
.jwl-hero-photo { position: relative; z-index: 1; aspect-ratio: 3 / 4; height: 100%; max-height: min(66cqw, 640px); align-self: center; }
.jwl-facts { position: relative; z-index: 1; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
             gap: clamp(12px, 2cqw, 28px); padding-top: clamp(14px, 2cqw, 26px);
             border-top: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); }
.jwl-fact { display: grid; gap: 4px; align-content: start; margin-top: calc(var(--i, 0) * clamp(0px, 1.7cqw, 26px)); }
.jwl-num { font-family: var(--font-display); font-size: clamp(22px, 2.8cqw, 38px); line-height: 1.05; letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.jwl-fact-line { font-size: 13px; line-height: 1.5; color: var(--color-ink-soft); }
@container (max-width: 760px) {
  .jwl-hero { grid-template-columns: minmax(0, 1fr); align-content: center; gap: clamp(18px, 4cqw, 30px); min-height: min(var(--screen-h, 100svh), 900px); }
  .jwl-initials .rv-ln:first-child > span { font-size: clamp(48px, 19cqw, 150px); }
  .jwl-initials .rv-ln:last-child > span { font-size: clamp(18px, 7cqw, 54px); }
  .jwl-ghost { right: 20%; font-size: clamp(190px, 62cqw, 480px); translate: 0 -58%; }
  .jwl-hero-photo { aspect-ratio: 16 / 10; height: auto; max-height: none; width: 100%; }
  .jwl-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .jwl-fact { margin-top: 0; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 4px 12px; padding: 10px 0; }
  .jwl-fact + .jwl-fact { border-top: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); }
  .jwl-fact-line { text-align: right; }
}
@container (max-width: 560px) {
  .jwl-hero-act .btn { width: 100%; }
  .jwl-hero-act > * { flex: 1 1 min(100%, 220px); }
}

/* ---------- the statement ---------- */
.block-jwl-say { padding: clamp(52px, 8cqw, 130px) clamp(16px, 3cqw, 40px); }
.jwl-say-inner { --block-max: 960px; display: grid; justify-items: center; gap: clamp(14px, 2cqw, 26px); text-align: center; }
.jwl-mark { font-size: 12px; letter-spacing: var(--tracking-caps, .2em); text-transform: uppercase; color: var(--color-accent-text); }
.jwl-say { font-family: var(--font-display); font-size: clamp(19px, 3.2cqw, 44px); line-height: 1.24; letter-spacing: var(--tracking-caps, .06em);
           text-transform: uppercase; text-wrap: balance; }
.jwl-say .rv-ln { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .1em; margin-bottom: -.1em; }
.jwl-say .rv-ln > span { display: inline-block; }
.jwl-hi { font-style: normal; color: var(--color-accent-text); }
.block-jwl-say .jwl-say-note { max-width: 62ch; margin-top: 6px; font-size: var(--text-md); line-height: 1.65; color: var(--color-ink-soft); }
.jwl-say-act .btn { white-space: normal; }
@container (max-width: 700px) { .jwl-say { font-size: clamp(19px, 5.4cqw, 34px); letter-spacing: .04em; } }

/* ---------- the collection ---------- */
.block-jwl-collection { --block-max: 1180px; padding: clamp(40px, 6cqw, 100px) clamp(16px, 3cqw, 40px); }
.jwl-col-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; gap: clamp(16px, 3cqw, 44px);
                margin-bottom: clamp(22px, 3.4cqw, 48px); }
.jwl-col-head .jwl-eyebrow { display: block; margin-bottom: 10px; }
.jwl-col-side { display: grid; justify-items: start; gap: 12px; }
.jwl-col-side .btn { white-space: normal; }
.jwl-pieces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.2cqw, 30px); }
.jwl-piece { display: grid; align-content: start; gap: 0; color: inherit; text-decoration: none; }
.jwl-piece-shot { position: relative; display: block; }
.jwl-piece-photo { aspect-ratio: 4 / 5; }
.jwl-piece-tag { position: absolute; left: 12px; bottom: 12px; padding: 7px 14px; border-radius: var(--radius-pill, 999px);
                 background: var(--page-bg); font-size: 14px; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums;
                 opacity: 0; translate: 0 10px; }
.jwl-piece-body { display: grid; gap: 4px; padding: 14px 2px 0; }
.jwl-piece-body h3 { font-family: var(--font-display); font-size: clamp(18px, 1.9cqw, 25px); line-height: 1.15; letter-spacing: var(--tracking-display); }
.jwl-piece-mat { font-size: 13px; line-height: 1.5; color: var(--color-ink-soft); }
@media (prefers-reduced-motion: no-preference) {
  .jwl-piece-tag { transition: opacity .35s ease, translate .35s cubic-bezier(.22, .61, .36, 1); }
}
.jwl-piece:hover .jwl-piece-tag, .jwl-piece:focus-visible .jwl-piece-tag, .jwl-piece.is-hover .jwl-piece-tag { opacity: 1; translate: 0 0; }
@container (max-width: 1000px) { .jwl-pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 900px) {
  .jwl-col-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .jwl-piece-tag { position: static; opacity: 1; translate: none; justify-self: start; margin-top: 10px; }
  .jwl-piece-shot { display: grid; justify-items: start; }
  .jwl-piece-shot .ph { width: 100%; }
}
@container (max-width: 560px) { .jwl-pieces { grid-template-columns: minmax(0, 1fr); } }

/* ---------- the metals ---------- */
.block-jwl-materials { --block-max: 1180px; padding: clamp(40px, 6cqw, 100px) clamp(16px, 3cqw, 40px); }
.jwl-mat-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; gap: clamp(20px, 4cqw, 60px); }
.jwl-mat-shot { position: relative; }
.jwl-mat-sample { display: none; }
.jwl-mat-sample.is-active { display: block; }
.jwl-mat-photo { aspect-ratio: 4 / 5; }
.jwl-mat-copy { display: grid; justify-items: start; gap: clamp(12px, 1.6cqw, 20px); }
.jwl-mat-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.jwl-mat-tabs .btn, .jwl-mat-act .btn { white-space: normal; }
.jwl-mat-panels { display: grid; }
.jwl-mat-panel { display: none; }
.jwl-mat-panel.is-active { display: grid; justify-items: start; gap: 12px; }
.jwl-mat-name { font-family: var(--font-display); font-size: clamp(20px, 2.4cqw, 32px); line-height: 1.12; letter-spacing: var(--tracking-display); }
.block-jwl-materials .jwl-mat-text { max-width: 54ch; font-size: var(--text-md); line-height: 1.65; color: var(--color-ink-soft); }
.jwl-mat-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; width: 100%; padding-top: 14px;
                 border-top: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); }
.jwl-mat-facts dt { font-size: 12px; letter-spacing: var(--tracking-caps, .14em); text-transform: uppercase; color: var(--color-ink-soft); }
.jwl-mat-facts dd { margin: 5px 0 0; font-size: 14px; line-height: 1.4; font-weight: var(--weight-semibold); }
@media (prefers-reduced-motion: no-preference) {
  .jwl-mat-sample.is-active, .jwl-mat-panel.is-active { animation: jwl-in .55s cubic-bezier(.22, .61, .36, 1) both; }
}
@keyframes jwl-in { from { transform: translateY(10px); } to { transform: none; } }
@container (max-width: 900px) {
  .jwl-mat-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 4cqw, 30px); }
  .jwl-mat-photo { aspect-ratio: 16 / 10; }
  .jwl-mat-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .jwl-mat-facts div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; padding: 9px 0; }
  .jwl-mat-facts div + div { border-top: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); }
  .jwl-mat-facts dd { margin: 0; }
  .jwl-mat-act, .jwl-mat-act .btn { width: 100%; }
}

/* ---------- bespoke in four steps ---------- */
.block-jwl-bespoke { --block-max: 1180px; padding: clamp(40px, 6cqw, 100px) clamp(16px, 3cqw, 40px) clamp(52px, 7cqw, 110px); }
.jwl-bes-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(22px, 4cqw, 64px); align-items: start; }
.jwl-bes-head { display: grid; justify-items: start; gap: clamp(12px, 1.6cqw, 20px); position: sticky; top: clamp(20px, 4cqw, 64px); }
.jwl-bes-photo { width: 100%; aspect-ratio: 4 / 3; margin-top: 4px; }
.jwl-bes-act .btn { white-space: normal; }
.block-jwl-bespoke .jwl-bes-note { max-width: 42ch; font-size: 13px; line-height: 1.6; color: var(--color-ink-soft); }
.jwl-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.jwl-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(14px, 2cqw, 28px); padding: clamp(16px, 2.2cqw, 28px) 0;
            border-top: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); }
.jwl-step:last-child { border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); }
.jwl-step-no { font-family: var(--font-display); font-size: clamp(22px, 2.6cqw, 34px); line-height: 1; letter-spacing: var(--tracking-display);
               color: var(--color-accent-text); font-variant-numeric: tabular-nums; }
.jwl-step-body { display: grid; gap: 7px; }
.jwl-step-body h3 { font-family: var(--font-display); font-size: clamp(19px, 2.1cqw, 28px); line-height: 1.15; letter-spacing: var(--tracking-display); }
.jwl-step-body p { font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }
@container (max-width: 900px) {
  .jwl-bes-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 4cqw, 32px); }
  .jwl-bes-head { position: static; }
  .jwl-bes-photo { aspect-ratio: 16 / 10; }
  .jwl-bes-act, .jwl-bes-act .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .jwl-piece-tag, .jwl-mat-sample, .jwl-mat-panel { transition: none; animation: none; }
}
/* ---------- NINTH SERIES: sailing charter (sal) ---------- */
/* SAILING: the header floats in white over the boat */
.layout--sailing > .block-nav-min { position: relative; z-index: 20; height: 0; color: #fff; mix-blend-mode: difference; }
.layout--sailing > .block-nav-min .block-inner { min-height: 72px; }
.layout--sailing > .block-nav-min .nav-min-menu .glass::after { background: #fff; box-shadow: none; border: 0; }
.layout--sailing > .block-nav-min .nav-min-menu .glass { color: #000; }

/* shared heads */
.sal-head { display: grid; justify-items: start; gap: 12px; max-width: 760px; margin-bottom: clamp(24px, 4cqw, 52px); }
.sal-eyebrow { font-size: 13px; letter-spacing: var(--tracking-caps, .14em); text-transform: uppercase; color: var(--color-accent-text); }
.sal-title { font-family: var(--font-display); font-size: clamp(30px, 4.6cqw, 62px); line-height: 1; letter-spacing: var(--tracking-display); }
.sal-lead { font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); max-width: 58ch; }

/* the outline frame, shifted off the photo; the shift lives inside the wrapper so nothing leans out of the page */
.sal-shot { --off: clamp(8px, 1.6cqw, 22px); position: relative; padding: var(--off) 0 0 var(--off); }
.sal-shot-box { position: relative; overflow: clip; border-radius: var(--shape-card); }
.sal-outline { position: absolute; inset: 0 var(--off) var(--off) 0; border: 1px solid color-mix(in srgb, var(--color-ink) 42%, transparent);
               border-radius: var(--shape-card); pointer-events: none; }
.sal-frame--right { padding: var(--off) var(--off) 0 0; }
.sal-frame--right .sal-outline { inset: 0 0 var(--off) var(--off); }

/* the harbour hero */
.block-sal-hero { position: relative; isolation: isolate; overflow: clip; display: grid; align-content: end;
                  min-height: min(var(--screen-h, 100svh), 940px); padding: 96px clamp(16px, 3cqw, 40px) clamp(24px, 4cqw, 56px); }
.sal-hero-photo { position: absolute; inset: 0; z-index: -1; border-radius: 0; }
.sal-hero-photo::after { content: ""; position: absolute; inset: 0;
                         background: linear-gradient(180deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, .12) 38%, rgba(0, 0, 0, .72)); }
.sal-hero-inner { display: grid; justify-items: start; gap: clamp(10px, 1.4cqw, 18px); color: #fff; }
.sal-hero-kicker { font-size: 13px; letter-spacing: var(--tracking-caps, .16em); text-transform: uppercase; }
.sal-hero-title { font-family: var(--font-display); font-size: clamp(44px, 9cqw, 132px); line-height: .92; letter-spacing: var(--tracking-display); max-width: 12ch; }
.sal-hero-lead { font-size: var(--text-md); line-height: 1.6; max-width: 46ch; }
/* its own stacking context, so the button keeps its surface over the solid strip */
.sal-search { width: 100%; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px;
              margin-top: clamp(6px, 1cqw, 14px); padding: clamp(12px, 1.6cqw, 20px); background: var(--page-bg); color: var(--color-ink); }
.sal-search-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sal-search-fields .pick-field { width: 100%; }
.sal-search-go .btn { white-space: normal; }
.sal-hero-note { font-size: 13px; line-height: 1.5; max-width: 60ch; }

/* the featured boat */
.block-sal-fleet { padding: clamp(48px, 7cqw, 112px) clamp(16px, 3cqw, 40px); }
.sal-fleet-stage { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(20px, 3.4cqw, 56px); align-items: center; }
.sal-fleet-stage .sal-shot-box { aspect-ratio: 4 / 3; }
.sal-slide { position: absolute; inset: 0; visibility: hidden; clip-path: inset(0 0 0 100%); }
.sal-slide.is-prev { visibility: visible; clip-path: inset(0); z-index: 1; }
.sal-slide.is-active { visibility: visible; clip-path: inset(0); z-index: 2; }
.sal-slide-photo { position: absolute; inset: 0; border-radius: 0; }
.sal-fleet-copy { display: grid; justify-items: start; gap: 12px; align-content: center; }
.sal-boat-kind { font-size: 13px; letter-spacing: var(--tracking-caps, .14em); text-transform: uppercase; color: var(--color-accent-text); }
.sal-boat-name { font-family: var(--font-display); font-size: clamp(28px, 3.4cqw, 46px); line-height: 1.02; letter-spacing: var(--tracking-display); }
.sal-boat-text { font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); max-width: 46ch; }
.sal-specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; width: 100%; margin: 0; padding-top: 6px;
             border-top: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); }
.sal-specs dt { font-size: 12px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-ink-soft); }
.sal-specs dd { margin: 0; font-family: var(--font-display); font-size: clamp(16px, 1.7cqw, 22px); line-height: 1.2; font-variant-numeric: tabular-nums; }
.sal-boat-price { font-size: 13px; color: var(--color-ink-soft); }
.sal-boat-price b { font-family: var(--font-display); font-size: clamp(20px, 2cqw, 26px); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.sal-boat-act { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.sal-boat-act .btn { white-space: normal; }
.sal-fleet-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: clamp(18px, 2.4cqw, 32px);
                 padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); }
.sal-dots, .sal-arrows { display: flex; flex-wrap: wrap; gap: 6px; }
.sal-dots .btn { min-width: 38px; font-variant-numeric: tabular-nums; }

/* aboard, mirrored: words left, the tall photo right */
.block-sal-aboard { padding: clamp(48px, 7cqw, 112px) clamp(16px, 3cqw, 40px); }
.sal-aboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(22px, 3.6cqw, 60px); align-items: center; }
.sal-aboard-copy { display: grid; justify-items: start; gap: 14px; }
.sal-points { display: grid; gap: 14px; width: 100%; margin: 0; padding-top: 6px; }
.sal-points > div { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); }
.sal-points dt { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-accent-text); }
.sal-points dd { margin: 0; font-size: var(--text-md); line-height: 1.55; color: var(--color-ink-soft); }
.sal-aboard-act .btn { white-space: normal; }
.sal-aboard-photo { border-radius: 0; }
.block-sal-aboard .sal-shot-box { aspect-ratio: 3 / 4; }
.block-sal-aboard .sal-shot-box .ph { position: absolute; inset: 0; }

/* the week: five bays the scroll carries sideways */
.block-sal-route { padding: clamp(48px, 7cqw, 112px) 0; }
.sal-pin { display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 2.4cqw, 34px); }
.sal-route-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 24px; padding: 0 clamp(16px, 3cqw, 40px); }
.sal-route-title { font-family: var(--font-display); font-size: clamp(34px, 6.4cqw, 96px); line-height: .94; letter-spacing: var(--tracking-display); }
.sal-route-side { display: grid; justify-items: end; gap: 10px; }
.sal-route-sub { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-ink-soft); }
.sal-route-act .btn { white-space: normal; }
.sal-track { display: flex; gap: clamp(14px, 2cqw, 28px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
             padding: 0 clamp(16px, 3cqw, 40px); scroll-padding-inline: clamp(16px, 3cqw, 40px); }
.sal-track::-webkit-scrollbar { display: none; }
.sal-bay { flex: 0 0 clamp(230px, 27cqw, 350px); display: grid; gap: 8px; align-content: start; scroll-snap-align: start; }
.sal-bay-photo { aspect-ratio: 5 / 4; margin-bottom: 6px; }
.sal-bay-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
               padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); }
.sal-bay-day { font-family: var(--font-display); font-size: clamp(20px, 2.2cqw, 28px); line-height: 1; letter-spacing: var(--tracking-display); }
.sal-bay-miles { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-accent-text); font-variant-numeric: tabular-nums; }
.sal-bay h3 { font-size: clamp(17px, 1.7cqw, 21px); font-weight: var(--weight-semibold); line-height: 1.2; }
.sal-bay p { font-size: 14px; line-height: 1.55; color: var(--color-ink-soft); }
.sal-progress { height: 2px; margin: 0 clamp(16px, 3cqw, 40px); background: color-mix(in srgb, var(--color-ink) 14%, transparent); overflow: hidden; }
.sal-progress i { display: block; height: 100%; background: var(--color-ink); transform-origin: 0 50%; transform: scaleX(max(.08, var(--p, 0))); transition: transform .2s linear; }
.block-sal-route.is-pinned { padding-block: 0; }
.block-sal-route.is-pinned .sal-pin { position: sticky; top: 0; height: var(--pin-h, 100svh); overflow: hidden; padding-block: 88px 36px; }
.block-sal-route.is-pinned .sal-track { overflow: visible; scroll-snap-type: none; will-change: transform; }

/* the skippers and the pontoon */
.block-sal-crew { padding: clamp(48px, 7cqw, 112px) clamp(16px, 3cqw, 40px); }
.sal-crew-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2cqw, 30px); }
.sal-person { display: grid; align-content: start; }
.sal-person-photo { aspect-ratio: 4 / 5; }
.sal-person-body { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 8px; padding: 16px 2px 0; }
.sal-person-body h3 { font-family: var(--font-display); font-size: clamp(20px, 2.1cqw, 28px); line-height: 1.1; letter-spacing: var(--tracking-display); }
.sal-person-role { font-size: 13px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-accent-text); }
.sal-person-body > p { font-size: 14px; line-height: 1.55; color: var(--color-ink-soft); }
.sal-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sal-tags li { padding: 4px 11px; border: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); border-radius: var(--radius-pill, 999px); font-size: 12px; }
.sal-person-act { width: 100%; padding-top: 2px; }
.sal-person-act .btn { white-space: normal; }
.sal-harbour { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px 24px;
               margin-top: clamp(28px, 4cqw, 56px); padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--color-ink) 28%, transparent); }
.sal-harbour-list { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 0; }
.sal-harbour-list > div { display: grid; gap: 3px; }
.sal-harbour-list dt { font-size: 12px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-ink-soft); }
.sal-harbour-list dd { margin: 0; font-size: 14px; line-height: 1.4; }
.sal-harbour-act .btn { white-space: normal; }

@media (prefers-reduced-motion: no-preference) {
  .sal-slide.is-active { transition: clip-path .8s cubic-bezier(.7, 0, .2, 1); }
  .sal-shot-box, .sal-outline { transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
  .sal-shot:hover .sal-outline { transform: translate(calc(var(--off) * -.4), calc(var(--off) * -.4)); }
  .sal-frame--right:hover .sal-outline { transform: translate(calc(var(--off) * .4), calc(var(--off) * -.4)); }
  .sal-bay-photo img, .sal-person-photo img { transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
  .sal-bay:hover .sal-bay-photo img, .sal-person:hover .sal-person-photo img { transform: scale(1.04); }
}

@container (max-width: 900px) {
  .sal-fleet-stage { grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 3cqw, 32px); }
  .sal-aboard-grid { grid-template-columns: minmax(0, 1fr); }
  .block-sal-aboard .sal-shot { order: -1; }
  .block-sal-aboard .sal-shot-box { aspect-ratio: 4 / 3; }
  .sal-crew-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sal-search { grid-template-columns: minmax(0, 1fr); }
  .sal-search-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sal-search-go .btn { width: 100%; }
}

@container (max-width: 700px) {
  .block-sal-hero { padding: 88px clamp(16px, 4cqw, 28px) clamp(18px, 3cqw, 30px); min-height: min(var(--screen-h, 100svh), 900px); }
  .block-sal-fleet, .block-sal-aboard, .block-sal-crew { padding-block: clamp(40px, 9cqw, 64px); }
  .sal-route-side { justify-items: start; }
  .sal-hero-title { font-size: clamp(40px, 15cqw, 92px); }
  .sal-hero-lead { font-size: var(--text-sm); }
  .sal-hero-note { font-size: 12px; }
  .sal-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sal-crew-grid { grid-template-columns: minmax(0, 1fr); }
  .sal-arrows { display: none; }
  .sal-track { flex-direction: column; gap: 20px; overflow: visible; scroll-snap-type: none; }
  .sal-bay { flex-basis: auto; }
  .sal-bay-photo { aspect-ratio: 16 / 10; }
  .sal-progress { display: none; }
  .sal-route-title { font-size: clamp(34px, 12cqw, 64px); }
  .sal-harbour { align-items: start; }
  .sal-harbour-list { gap: 12px 24px; }
}

/* the long house name and the line under it on a narrow footer: let them wrap instead of leaning out */
@container (max-width: 760px) {
  .layout--sailing :is(.block-nav-min, .block-foot-slim) .word-mark { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
  .layout--sailing > .block-foot-slim p { width: 100%; }
  .layout--sailing > .block-foot-slim nav { gap: 8px 16px; }
}

/* the strip is its own container: two fields a row on a phone, one only on the narrowest screens */
@container (max-width: 260px) {
  .sal-search-fields { grid-template-columns: minmax(0, 1fr); }
}

@container (max-width: 420px) {
  .sal-boat-act { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .sal-harbour-list { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .sal-slide, .sal-outline, .sal-shot-box, .sal-progress i, .sal-bay-photo img, .sal-person-photo img { transition: none; animation: none; }
}

/* ---------- HEADER SERIES: twelve headers that differ by what they hold, not by the kit ---------- */
.hx-row { display: flex; align-items: center; gap: clamp(16px, 2.6cqw, 36px); min-height: 72px; padding: 10px clamp(16px, 3cqw, 40px); }
.hx-nav { display: flex; align-items: center; gap: clamp(14px, 2.4cqw, 32px); min-width: 0;
          font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: var(--tracking-control); text-transform: var(--case-control); }
.hx-nav a, .hx-mega-trigger { color: var(--color-ink-soft); white-space: nowrap; transition: color var(--motion-hover); }
.hx-nav a:is(:hover, .is-hover), .hx-mega-trigger:is(:hover, .is-hover) { color: var(--color-ink); }
.hx-nav a.is-current { color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; text-decoration-color: var(--color-primary); }
.hx-end { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.hx-end > .btn { white-space: nowrap; }
.hx-icon { position: relative; display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0;
           background: transparent; font: inherit; color: var(--color-ink); cursor: pointer; transition: opacity var(--motion-hover); }
.hx-icon > svg { width: 22px; height: 22px; }
.hx-icon:is(:hover, .is-hover) > svg { opacity: .72; }
.hx-count { position: absolute; top: 0; right: -2px; display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px;
            border-radius: var(--shape-round); --r: 10px; font-size: 12px; font-weight: var(--weight-bold); line-height: 1; letter-spacing: 0; }
.hx-count > span { position: relative; }
.hx-text-link { font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: var(--tracking-control); text-transform: var(--case-control); white-space: nowrap; padding: 8px 6px; }
.hx-text-link:is(:hover, .is-hover) { text-decoration: underline; text-underline-offset: 6px; }
/* a strip that runs from edge to edge: the kit's colour without the rounded ends and the drop shadow of a button */
.hx-bar, .hx-ticker { border-radius: 0; --r: 0px; }
.hx-bar::before, .hx-ticker::before { display: none; }

/* 1. announcement bar */
.hx-bar { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 40px; padding: 8px 52px; }
.hx-bar-text { position: relative; font-size: 13px; line-height: 1.45; text-align: center; text-wrap: balance; }
.hx-bar-text a { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--weight-semibold); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.hx-bar-text svg { width: 14px; height: 14px; }
.hx-bar-close { position: absolute; right: clamp(8px, 2cqw, 28px); top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 32px; height: 32px;
                padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.hx-bar-close svg { width: 16px; height: 16px; }
.hx-bar-close:is(:hover, .is-hover) svg { opacity: .7; }
.block-hx-announce.is-closed .hx-bar { display: none; }
.block-hx-announce .hx-nav { flex: 1; justify-content: center; }

/* 2. shop, two rows */
.hx-shop-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 3cqw, 48px); min-height: 76px; padding: 10px clamp(16px, 3cqw, 40px); }
.hx-shop-search { justify-self: center; width: 100%; max-width: 560px; min-width: 0; }
.hx-shop-search .field-wrap, .hx-shop-search .field { width: 100%; }
.hx-shop-search input::-webkit-search-cancel-button { display: none; }
.hx-shop-cats { border-top: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); }
.hx-shop-track { display: flex; justify-content: center; gap: clamp(18px, 3cqw, 40px); padding: 0 clamp(16px, 3cqw, 40px);
                 font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: var(--tracking-control); text-transform: var(--case-control); }
.hx-shop-track a { position: relative; padding: 13px 0; color: var(--color-ink-soft); white-space: nowrap; transition: color var(--motion-hover); }
.hx-shop-track a:is(:hover, .is-hover, .is-current) { color: var(--color-ink); }
.hx-shop-track a.is-current::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--color-primary); }
.hx-shop-track a.is-sale { color: var(--color-danger); }

/* 3. mega menu: the panel hangs under the bar, over the page */
.block-hx-mega { z-index: 5; }
.block-hx-mega .hx-nav { flex: 1; justify-content: center; }
.hx-mega-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.hx-mega-trigger .select-chevron { width: 16px; height: 16px; }
.block-hx-mega.is-open .hx-mega-trigger { color: var(--color-ink); }
.block-hx-mega.is-open .hx-mega-trigger .select-chevron { transform: rotate(180deg); }
.hx-mega-menu { display: none; }
.hx-mega-panel { position: absolute; top: calc(100% + 6px); left: clamp(8px, 2cqw, 24px); right: clamp(8px, 2cqw, 24px); border-radius: var(--shape-card); }
.block-hx-mega:not(.is-open) .hx-mega-panel { display: none; }
.hx-mega-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr); gap: clamp(18px, 3cqw, 44px); padding: clamp(20px, 3cqw, 36px); }
.hx-mega-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hx-mega-col h3 { margin-bottom: 4px; font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-ink-soft); }
.hx-mega-col a { font-size: var(--text-md); line-height: 1.3; transition: color var(--motion-hover); }
.hx-mega-col a:is(:hover, .is-hover) { color: var(--color-accent-text); }
.hx-mega-feature { display: grid; gap: 6px; align-content: start; min-width: 0; }
.hx-mega-photo { aspect-ratio: 16 / 10; margin-bottom: 6px; }
.hx-mega-photo img { transition: scale .6s ease; }
.hx-mega-feature:is(:hover, .is-hover) .hx-mega-photo img { scale: 1.04; }
.hx-mega-kicker { font-size: 12px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--color-ink-soft); }
.hx-mega-feature strong { font-family: var(--font-display); font-size: var(--text-title); line-height: 1.2; letter-spacing: var(--tracking-display); text-wrap: balance; }
.hx-mega-more { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-accent-text); }
.hx-mega-more svg { width: 16px; height: 16px; transition: translate var(--motion-hover); }
.hx-mega-feature:is(:hover, .is-hover) .hx-mega-more svg { translate: 4px 0; }

/* 4. over a photo: white words while the photo is behind, the kit's own surface once the page moves */
.block-hx-overlay { isolation: isolate; display: grid; grid-template-rows: auto 1fr; overflow: clip; }
.hx-overlay-photo { position: absolute; inset: 0; z-index: -1; border-radius: 0; }
.hx-overlay-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .05) 34%, rgba(0, 0, 0, .55)); }
.hx-overlay-bar { position: sticky; top: 0; z-index: 3; color: #fff; transition: background-color .3s ease, color .3s ease, box-shadow .3s ease; }
.hx-overlay-bar .hx-nav a { color: inherit; opacity: .86; }
.hx-overlay-bar .hx-nav a:is(:hover, .is-hover) { opacity: 1; }
.hx-overlay-bar.is-solid { background: var(--page-bg); color: var(--color-ink); box-shadow: 0 1px 0 color-mix(in srgb, var(--color-ink) 12%, transparent); }
.block-hx-overlay .hx-nav { flex: 1; justify-content: center; }
.block-hx-overlay .block-menu .glass { color: var(--color-ink); }
.hx-overlay-copy { display: grid; align-content: end; gap: 12px; padding: 0 clamp(16px, 3cqw, 40px) clamp(28px, 5cqw, 64px); color: #fff; }
.hx-overlay-kicker { font-size: 13px; letter-spacing: var(--tracking-caps, .14em); text-transform: uppercase; }
.hx-overlay-title { font-family: var(--font-display); font-size: clamp(40px, 8cqw, 112px); font-weight: var(--weight-bold); line-height: .98; letter-spacing: var(--tracking-display); text-wrap: balance; max-width: 12ch; }
.hx-overlay-copy, .hx-overlay-bar .block-inner { max-width: none; }
.block-hx-overlay > .hx-overlay-copy { min-height: clamp(380px, 52cqw, 620px); }

/* 5. side rail */
.hx-rail-grid { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: clamp(16px, 2.4cqw, 32px); min-height: calc(var(--screen-h, 720px) - 56px); }
.hx-rail { display: flex; flex-direction: column; gap: 22px; padding: 16px 12px; border-radius: var(--shape-card); min-width: 0; transition: width .25s ease; }
.hx-rail > :not(i) { position: relative; }
.hx-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px 0 8px; }
.hx-rail-fold { display: grid; place-items: center; width: 34px; height: 34px; flex: none; padding: 0; border: 0; background: transparent; color: var(--color-ink-soft); cursor: pointer; }
.hx-rail-fold svg { width: 20px; height: 20px; }
.hx-rail-fold:is(:hover, .is-hover) { color: var(--color-ink); }
.hx-rail-nav { display: flex; flex-direction: column; gap: 4px; }
.hx-rail-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: var(--shape-control);
                font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: var(--tracking-control); text-transform: var(--case-control);
                color: var(--color-ink-soft); transition: color var(--motion-hover), background-color var(--motion-hover); }
.hx-rail-item:is(:hover, .is-hover) { color: var(--color-ink); background: color-mix(in srgb, var(--color-ink) 6%, transparent); }
.hx-rail-item.is-current { color: var(--color-accent-text); background: color-mix(in srgb, var(--color-primary) 14%, transparent); font-weight: var(--weight-semibold); }
.hx-rail-ico { position: relative; display: grid; place-items: center; flex: none; }
.hx-rail-ico svg { width: 20px; height: 20px; }
.hx-rail-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-rail-num { min-width: 22px; padding: 2px 7px; border-radius: var(--shape-round); background: color-mix(in srgb, var(--color-primary) 18%, transparent);
               color: var(--color-accent-text); font-size: 12px; font-weight: var(--weight-bold); text-align: center; letter-spacing: 0; }
.hx-rail-user { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 8px; min-width: 0; }
.hx-rail-who { display: flex; flex-direction: column; min-width: 0; font-size: var(--text-sm); line-height: 1.3; }
.hx-rail-who > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-rail-who > span { color: var(--color-ink-soft); font-size: 12px; }
.block-hx-rail.is-folded .hx-rail-grid { grid-template-columns: 76px minmax(0, 1fr); }
.block-hx-rail.is-folded :is(.hx-rail-head .block-brand > span:last-child, .hx-rail-label, .hx-rail-num, .hx-rail-who) { display: none; }
.block-hx-rail.is-folded .hx-rail-head { flex-direction: column; padding: 4px 0 0; }
.block-hx-rail.is-folded .hx-rail-item { justify-content: center; padding: 0; }
.block-hx-rail.is-folded .hx-rail-user { justify-content: center; padding: 8px 0; }
.hx-rail-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: clamp(8px, 1.6cqw, 20px) 0; }
.hx-rail-top { display: none; }
.hx-rail-title { font-family: var(--font-display); font-size: clamp(28px, 3.4cqw, 40px); font-weight: var(--weight-bold); line-height: 1.1; letter-spacing: var(--tracking-display); }
.hx-rail-lead { color: var(--color-ink-soft); font-size: var(--text-md); }
.hx-rail-sketch { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(120px, 1fr); gap: clamp(12px, 2cqw, 24px); margin-top: 18px; }
.hx-rail-sketch i { border-radius: var(--shape-card); background: color-mix(in srgb, var(--color-ink) 6%, transparent); }

/* 6. boutique: the name in the middle, never pushed off centre by what stands beside it */
.hx-bq-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; min-height: 92px; padding: 12px clamp(16px, 3cqw, 40px); }
.hx-bq-brand { display: grid; justify-items: center; gap: 4px; text-align: center; }
.hx-bq-brand .word-mark { font-size: clamp(24px, 3cqw, 34px); }
.hx-bq-line { font-size: 12px; letter-spacing: var(--tracking-caps, .2em); text-transform: uppercase; color: var(--color-ink-soft); white-space: nowrap; }
.hx-bq-grid .hx-end { justify-self: end; }

/* 7. giant name */
.block-hx-giant .block-inner { padding: clamp(12px, 2cqw, 24px) clamp(16px, 3cqw, 40px) 0; }
.hx-giant-name { display: block; overflow: hidden; line-height: .82; padding-bottom: .04em; }
.hx-giant-name [data-fit] { display: inline-block; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 13cqi; letter-spacing: var(--tracking-display); white-space: nowrap; }
.hx-giant-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; margin-top: clamp(8px, 1.4cqw, 16px);
                padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--color-ink) 30%, transparent); font-size: var(--text-sm); }
.hx-giant-info { color: var(--color-ink-soft); }
.hx-giant-since { justify-self: end; color: var(--color-ink-soft); }
.hx-giant-nav { display: flex; gap: clamp(16px, 3cqw, 36px); letter-spacing: var(--tracking-control); text-transform: var(--case-control); }
.hx-giant-nav a { white-space: nowrap; transition: opacity var(--motion-hover); }
.hx-giant-nav a:is(:hover, .is-hover) { opacity: .6; }
.hx-giant-nav a.is-current { text-decoration: underline; text-underline-offset: 5px; }

/* 8. floating island */
.block-hx-island { padding: clamp(10px, 2cqw, 20px) clamp(10px, 2cqw, 24px); }
.hx-island { display: flex; align-items: center; gap: clamp(12px, 2.4cqw, 28px); width: fit-content; max-width: 100%; margin: 0 auto;
             padding: 7px 7px 7px 16px; border-radius: var(--shape-control); --r: var(--radius-control); }
.hx-island > :not(i) { position: relative; }
.hx-island-brand { font-size: 17px; }
.hx-island-nav { position: relative; display: flex; gap: 2px; font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: var(--tracking-control); text-transform: var(--case-control); }
.hx-island-nav a { position: relative; z-index: 1; padding: 9px 14px; white-space: nowrap; color: var(--color-ink-soft); transition: color var(--motion-hover); }
.hx-island-nav a:is(:hover, .is-hover, .is-current) { color: var(--color-ink); }
.hx-island-mark { position: absolute; left: 0; top: 0; bottom: 0; width: var(--mw, 0px); translate: var(--mx, 0px) 0; opacity: .35;
                  border-radius: var(--shape-control); --r: var(--radius-control); transition: translate .28s cubic-bezier(.3, .7, .2, 1), width .28s cubic-bezier(.3, .7, .2, 1); pointer-events: none; }

/* 9. app header */
.block-hx-app .hx-row { min-height: 64px; border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); }
.hx-app-back, .hx-app-title, .hx-app-find { display: none; }
.hx-crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--text-sm); }
.hx-crumbs a { color: var(--color-ink-soft); white-space: nowrap; transition: color var(--motion-hover); }
.hx-crumbs a:is(:hover, .is-hover) { color: var(--color-ink); }
.hx-crumbs svg { width: 14px; height: 14px; flex: none; color: var(--color-ink-soft); }
.hx-crumbs [aria-current] { font-weight: var(--weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.block-hx-app .hx-end { gap: 12px; }
.hx-app-search { width: clamp(200px, 26cqw, 320px); height: 40px; }
.hx-app-search input { min-width: 0; }
.hx-app-search input::-webkit-search-cancel-button { display: none; }
.hx-kbd { position: relative; flex: none; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--shape-box);
          border: 1px solid color-mix(in srgb, var(--color-ink) 22%, transparent); font: inherit; font-size: 12px; color: var(--color-ink-soft); }
.hx-bell { position: relative; }
.hx-bell-list { position: absolute; top: calc(100% + 12px); right: -8px; z-index: 6; display: grid; gap: 4px; width: min(340px, calc(100cqi - 24px)); padding: 12px; border-radius: var(--shape-menu); }
.hx-bell:not(.is-open) .hx-bell-list { display: none; }
.hx-bell-list > :not(i) { position: relative; }
.hx-bell-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 6px 8px; font-size: var(--text-sm); }
.hx-bell-head a { color: var(--color-accent-text); font-size: 13px; }
.hx-note { display: flex; gap: 10px; align-items: flex-start; padding: 8px 6px; border-radius: var(--shape-inner); transition: background-color var(--motion-hover); }
.hx-note:is(:hover, .is-hover) { background: color-mix(in srgb, var(--color-ink) 6%, transparent); }
.hx-note > span:last-child { display: grid; gap: 2px; min-width: 0; font-size: 14px; line-height: 1.4; }
.hx-note-time { color: var(--color-ink-soft); font-size: 12px; }
.hx-app-user { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap; }

/* 10. links as a big list */
.hx-list-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: clamp(24px, 5cqw, 80px); align-items: start; padding: clamp(18px, 3cqw, 40px) clamp(16px, 3cqw, 40px); }
.hx-list-nav { display: grid; grid-template-columns: minmax(0, 1fr); }
.hx-list-nav a { display: flex; align-items: center; gap: clamp(12px, 2cqw, 28px); padding: clamp(4px, .8cqw, 10px) 0;
                 border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 16%, transparent); color: var(--color-ink-soft); transition: color var(--motion-hover); }
.hx-list-nav a:first-child { border-top: 1px solid color-mix(in srgb, var(--color-ink) 16%, transparent); }
.hx-list-no { flex: none; width: 2.4em; font-size: 13px; letter-spacing: .04em; }
.hx-list-word { flex: 1; min-width: 0; font-family: var(--font-display); font-size: clamp(34px, 6.4cqw, 84px); font-weight: var(--weight-bold); line-height: 1.04;
                letter-spacing: var(--tracking-display); text-transform: uppercase; transition: translate .3s ease; }
.hx-list-nav a svg { flex: none; width: clamp(22px, 3cqw, 40px); height: clamp(22px, 3cqw, 40px); opacity: 0; translate: -10px 0; transition: opacity .3s ease, translate .3s ease; }
.hx-list-nav a:is(:hover, .is-hover, .is-current) { color: var(--color-ink); }
.hx-list-nav a:is(:hover, .is-hover) .hx-list-word { translate: 10px 0; }
.hx-list-nav a:is(:hover, .is-hover) svg { opacity: 1; translate: 0 0; }
.hx-list-side { display: grid; justify-items: end; gap: 6px; text-align: right; }
.hx-list-role { font-size: var(--text-sm); color: var(--color-ink-soft); letter-spacing: var(--tracking-caps, .14em); text-transform: uppercase; }
.hx-list-note { margin-top: 18px; font-size: var(--text-md); line-height: 1.5; text-wrap: balance; }
.hx-list-mail { font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }

/* 11. language and currency */
.hx-util { border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); }
.hx-util-row { display: flex; align-items: center; gap: clamp(12px, 2.4cqw, 28px); min-height: 40px; padding: 2px clamp(16px, 3cqw, 40px); font-size: 13px; color: var(--color-ink-soft); }
.hx-util-row svg { width: 15px; height: 15px; flex: none; }
.hx-util-phone, .hx-util-hours { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.hx-util-phone:is(:hover, .is-hover) { color: var(--color-ink); }
.hx-util-picks { display: flex; gap: 4px; margin-left: auto; }
.hx-pick-trigger { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 8px; background: transparent; font-size: 13px; color: var(--color-ink); }
.hx-pick-trigger .select-chevron { width: 15px; height: 15px; }
.hx-pick .select-list { left: auto; right: 0; top: calc(100% + 6px); min-width: 170px; z-index: 6; }
.hx-pick .select-option { padding: 9px 12px; font-size: 14px; }
.block-hx-locale .hx-nav { flex: 1; justify-content: center; }

/* 12. running ribbon: two copies side by side, the track moves by one copy and starts again */
.hx-ticker { overflow: hidden; }
.hx-ticker-track { position: relative; display: flex; width: max-content; animation: hx-run 32s linear infinite; }
.hx-ticker:is(:hover, .is-hover) .hx-ticker-track { animation-play-state: paused; }
.hx-ticker-run { display: flex; align-items: center; flex: none; }
.hx-ticker-run > span { padding: 10px 22px; font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-control); text-transform: var(--case-control); white-space: nowrap; }
.hx-ticker-run > i { display: grid; place-items: center; }
.hx-ticker-run svg { width: 12px; height: 12px; }
@keyframes hx-run { to { transform: translateX(-50%); } }
.block-hx-ticker .hx-nav { flex: 1; justify-content: center; }

@container (max-width: 900px) {
  :is(.block-hx-announce, .block-hx-overlay, .block-hx-locale, .block-hx-ticker) .hx-nav { display: none; }
  :is(.block-hx-announce, .block-hx-overlay, .block-hx-locale, .block-hx-ticker, .block-hx-shop, .block-hx-boutique) .block-menu { display: inline-flex; }
  .block-hx-mega .hx-nav { display: none; }
  .hx-mega-menu { display: inline-flex; }
  .hx-mega-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hx-mega-feature { grid-column: 1 / -1; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); column-gap: 20px; align-items: center; }
  .hx-mega-photo { grid-row: span 3; margin: 0; }
  .hx-shop-cats { overflow-x: auto; scrollbar-width: none; }
  .hx-shop-cats::-webkit-scrollbar { display: none; }
  .hx-shop-track { justify-content: flex-start; width: max-content; }
  .hx-icon--saved { display: none; }
  .hx-rail-grid { grid-template-columns: 76px minmax(0, 1fr); min-height: calc(var(--screen-h, 720px) - 48px); }
  .hx-rail-head .block-brand > span:last-child, .hx-rail-label, .hx-rail-num, .hx-rail-who, .hx-rail-fold { display: none; }
  .hx-rail-head { justify-content: center; padding: 4px 0 0; }
  .hx-rail-item { justify-content: center; padding: 0; }
  .hx-rail-user { justify-content: center; padding: 8px 0; }
  .hx-rail-item:has(.hx-rail-num) .hx-rail-ico::after { content: ""; position: absolute; top: -3px; right: -5px; width: 8px; height: 8px; border-radius: var(--shape-round); background: var(--color-primary); }
  .hx-bq-nav { display: none; }
  .hx-bq-brand { grid-column: 2; }
  .hx-bq-grid > .hx-end { grid-column: 3; }
  .hx-giant-row { grid-template-columns: minmax(0, 1fr) auto; }
  .hx-giant-since { display: none; }
  .hx-crumbs > :nth-child(-n+2) { display: none; }
  .hx-app-user span { display: none; }
  .hx-list-grid { grid-template-columns: minmax(0, 1fr); }
  .hx-list-side { grid-row: 1; grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: baseline; column-gap: 14px; text-align: left; }
  .hx-list-note { grid-column: 1 / -1; margin-top: 6px; }
  .hx-list-mail { grid-column: 1 / -1; }
  .hx-util-hours { display: none; }
}

@container (max-width: 640px) {
  .hx-row { gap: 10px; min-height: 60px; padding: 8px 12px 8px 16px; }
  .hx-end { gap: 4px; }
  .hx-end > .btn { padding-inline: 13px; }
  .hx-row .word-mark { font-size: clamp(17px, 5.4cqi, 22px); }
  .hx-text-link { display: none; }
  .hx-bar { padding: 8px 44px 8px 16px; justify-content: flex-start; }
  .hx-bar-text { text-align: left; }
  .hx-bar-text > span { display: block; }
  .hx-shop-top { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; min-height: 0; padding: 10px 12px 12px 16px; }
  .hx-shop-search { grid-column: 1 / -1; grid-row: 2; max-width: none; }
  .hx-icon--account { display: none; }
  .hx-shop-track { padding: 0 16px; gap: 22px; }
  .hx-mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; padding: 18px; }
  .hx-mega-col:nth-child(3) { grid-column: 1 / -1; }
  .hx-mega-col:nth-child(3) h3 { grid-column: 1 / -1; }
  .hx-mega-col:nth-child(3) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  .hx-mega-feature { grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; }
  .hx-mega-feature strong { font-size: var(--text-md); }
  .hx-mega-panel { left: 8px; right: 8px; }
  .block-hx-mega .hx-end > .hx-icon:first-child { display: none; }
  .hx-overlay-title { font-size: clamp(38px, 13cqi, 64px); }
  .block-hx-overlay > .hx-overlay-copy { min-height: clamp(420px, 120cqi, 560px); }
  .hx-rail-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 12px; min-height: calc(var(--screen-h, 720px) - 50px); }
  .hx-rail { grid-row: 2; flex-direction: row; padding: 6px; }
  .hx-rail-head, .hx-rail-user { display: none; }
  .hx-rail-nav { flex: 1; flex-direction: row; justify-content: space-around; gap: 2px; }
  .hx-rail-item { flex: 1; flex-direction: column; gap: 3px; min-height: 52px; min-width: 0; padding: 6px 2px; justify-content: center; }
  .hx-rail .hx-rail-label { display: block; flex: none; max-width: 100%; font-size: 12px; text-transform: none; letter-spacing: 0; }
  .hx-rail-main { padding: 4px 4px 0; }
  .hx-rail-top { display: flex; justify-content: flex-end; margin-bottom: 4px; }
  .hx-rail-sketch { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(72px, 1fr); }
  .hx-rail-sketch i:nth-child(n+4) { display: none; }
  .hx-bq-grid { gap: 8px; min-height: 72px; padding: 8px 12px; }
  .hx-bq-grid { grid-template-columns: minmax(0, 1fr) auto; }
  .hx-bq-brand { grid-column: 1; justify-items: start; text-align: left; min-width: 0; }
  .hx-bq-brand .word-mark { font-size: 22px; white-space: normal; }
  .hx-bq-grid > .hx-end { grid-column: 2; }
  .hx-bq-grid .hx-icon--account { display: none; }
  .hx-giant-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hx-giant-info { order: 2; font-size: 13px; }
  .hx-giant-nav { justify-content: space-between; gap: 12px; }
  .block-hx-island { padding: 10px; }
  .hx-island { width: 100%; justify-content: space-between; gap: 8px; padding-left: 14px; }
  .hx-island-nav { display: none; }
  .hx-island > .btn { margin-left: auto; }
  .hx-crumbs { display: none; }
  .hx-app-back, .hx-app-title { display: inline-flex; }
  .hx-app-back { place-items: center; width: 36px; height: 36px; flex: none; margin-left: -8px; }
  .hx-app-back svg { width: 22px; height: 22px; }
  .hx-app-title { min-width: 0; font-weight: var(--weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hx-app-search { display: none; }
  .hx-app-find { display: inline-grid; }
  .block-hx-app .hx-end { gap: 4px; }
  .hx-bell-list { position: fixed; top: 64px; left: 8px; right: 8px; width: auto; }
  .hx-list-word { font-size: clamp(32px, 12cqi, 56px); }
  .hx-list-side { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .hx-list-side .word-mark { white-space: normal; }
  .hx-util-row { padding: 2px 8px 2px 16px; }
  .hx-util-phone span { display: none; }
  .hx-util-phone { width: 32px; height: 32px; justify-content: center; margin-left: -8px; }
  .hx-util-phone svg { width: 17px; height: 17px; }
  .block-hx-locale .word-mark, .block-hx-ticker .word-mark { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .hx-ticker-run > span { padding: 8px 16px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .hx-ticker-track { animation: none; }
  .hx-island-mark, .hx-list-word, .hx-list-nav a svg, .hx-mega-photo img, .hx-overlay-bar { transition: none; }
}

/* ---------- busy page patterns (stripes, checks): the pattern runs as tape between sections, never under text ---------- */
[data-plate] .block + .block {
  border-top: var(--page-band-h, 0px) solid transparent;
  border-image: var(--page-band) 24 0 0 0 / var(--page-band-h, 0px) 0 0 0 stretch;
}


/* ---------- layer-recipe.css ---------- */
/* =====================================================================
   LAYER FAMILY (layered tactile minimalism) - RECIPE
   Load order: glass-tokens -> glass-recipe -> glass-components -> soft-recipe -> THIS -> kit themes.

   Same components and markup as the other families. Inside [data-family="layer"]:
     - opaque stacked surfaces: page -> panel (layer-1) -> tile (layer-2), sunken wells
     - no hard lines: every edge, highlight and 3D side is a blurred shadow
     - the active thing (primary button, selected tab, checked box, switch on)
       is a solid accent tile with its own shadow
     - pressing a tile sinks it into the panel

   3D STYLE: pick one per kit with data-layer3d on <html>, next to data-kit:
     flat | keycap | dome | bevel | pillow | stack
   A kit theme then only sets its palette, depth, switch style and type.

   Theme knobs:
     palette     --layer-page / -1 / -2 / -sunken, --layer-lit, --layer-shade, --layer-edge
     depth       --layer-depth (side edge for keycap / bevel)
     accent      --layer-accent-bg / -ink / -lit / -edge
     switch      --layer-knob-ws / -hs / -pad / -shape / -bg / -shadow / -ink
                 --layer-knob-on-bg / -on-ink / -on-shadow
                 --layer-track-bg / -shadow / -on-bg / -on-shadow
                 --layer-led (indicator light shown when on, transparent = none)
   ===================================================================== */

[data-family="layer"] {
  --layer-page:    linear-gradient(180deg, #f1f1f3, #e6e6e9);
  --layer-1:       #f7f7f8;
  --layer-2:       #ffffff;
  --layer-sunken:  #eeeef1;
  --layer-line:    rgba(var(--color-neutral-shade), .07);

  --layer-lit:     rgba(255, 255, 255, .75);
  --layer-shade:   rgba(var(--color-neutral-shade), .12);
  --layer-edge:    rgba(var(--color-neutral-shade), .16);
  --layer-depth:   3px;
  --layer-extrude: 0px;
  --layer-face:    linear-gradient(transparent, transparent);
  --layer-sheet-1: var(--layer-1);
  --layer-sheet-2: var(--layer-sunken);

  /* flat (default) */
  --layer-highlight: inset 0 1px 2px var(--layer-lit);
  --layer-shadow-sm: 0 1px 2px rgba(var(--color-neutral-shade), .06), 0 2px 6px rgba(var(--color-neutral-shade), .05);
  --layer-shadow:    0 2px 4px rgba(var(--color-neutral-shade), .05), 0 8px 20px rgba(var(--color-neutral-shade), .08);
  --layer-shadow-lg: 0 4px 10px rgba(var(--color-neutral-shade), .05), 0 22px 50px rgba(var(--color-neutral-shade), .1);
  --layer-sunken-shadow: inset 0 1px 3px rgba(var(--color-neutral-shade), .1);

  --layer-accent-bg:    rgb(var(--color-primary));
  --layer-accent-gloss: linear-gradient(transparent, transparent);
  --layer-accent-fill:  var(--layer-accent-gloss), var(--layer-accent-bg);
  --layer-accent-ink:   var(--color-on-tinted);
  --layer-accent-lit:   rgba(255, 255, 255, .16);
  --layer-accent-edge:  rgba(0, 0, 0, .35);
  --layer-accent-sheet-1: rgba(var(--color-primary-deep), .45);
  --layer-accent-sheet-2: rgba(var(--color-primary-deep), .22);
  --layer-accent-shadow:
    inset 0 1px 2px var(--layer-accent-lit),
    inset 0 -2px 4px rgba(0, 0, 0, .2),
    0 6px 14px rgba(var(--color-neutral-shade), .22);
  --layer-accent-pressed: inset 0 2px 7px rgba(0, 0, 0, .35);

  /* switch */
  --layer-knob-ws:     1;
  --layer-knob-hs:     1;
  --layer-knob-pad:    -4px;
  --layer-knob-shape:  var(--shape-round);
  --layer-knob-bg:     var(--layer-face), var(--layer-2);
  --layer-knob-shadow: var(--layer-highlight), var(--layer-shadow);
  --layer-knob-ink:    var(--color-ink-soft);
  --layer-knob-on-bg:     var(--layer-knob-bg);
  --layer-knob-on-ink:    rgb(var(--color-primary-deep));
  --layer-knob-on-shadow: var(--layer-knob-shadow);
  --layer-track-bg:        var(--layer-sunken);
  --layer-track-shadow:    var(--layer-sunken-shadow);
  --layer-track-on-bg:     var(--layer-accent-fill);
  --layer-track-on-shadow: var(--layer-accent-pressed);
  --layer-led:             transparent;

  /* shared solid tokens become layer tiles */
  --solid-fill:             var(--layer-2);
  --solid-fill-field:       var(--layer-2);
  --solid-fill-domed:       var(--layer-2);
  --solid-domed-inner:      inset 0 0 0 transparent;
  --solid-shadow:           var(--layer-shadow-sm);
  --solid-shadow-small:     var(--layer-shadow-sm);
  --solid-shadow-on-glass:  var(--layer-shadow-sm);
  --solid-shadow-tile:      var(--layer-shadow-sm);
  --solid-shadow-in-track:  var(--layer-shadow-sm);
  --solid-shadow-accent:    var(--layer-shadow-sm);
  --accent-solid:           var(--layer-accent-bg);

  --focus-glow-alpha: 0;

  --page-bg:     var(--layer-page);
  --blob-pink:   transparent;
  --blob-cyan:   transparent;
  --blob-violet: transparent;
  --blob-peach:  transparent;
}

/* ---------------------------------------------------------------------
   3D STYLES
   --------------------------------------------------------------------- */
/* keycap: tiles stand on a soft side edge */
[data-layer3d="keycap"] {
  --layer-extrude: var(--layer-depth);
  --layer-face: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .05));
  --layer-highlight:
    inset 0 2px 3px var(--layer-lit),
    inset 0 -3px 5px var(--layer-shade),
    0 var(--layer-extrude) calc(var(--layer-extrude) * 1.8) var(--layer-edge);
  --layer-accent-shadow:
    inset 0 2px 3px var(--layer-accent-lit),
    inset 0 -3px 5px rgba(0, 0, 0, .25),
    0 var(--layer-extrude) calc(var(--layer-extrude) * 1.8) var(--layer-accent-edge),
    0 8px 16px rgba(var(--color-neutral-shade), .24);
}
/* dome: tiles bulge out, accent is a glossy bead */
[data-layer3d="dome"] {
  --layer-face:
    radial-gradient(120% 90% at 50% 0%, var(--layer-lit), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .07));
  --layer-highlight:
    inset 0 2px 3px var(--layer-lit),
    inset 0 -5px 9px var(--layer-shade),
    0 1px 3px var(--layer-edge);
  --layer-accent-gloss: radial-gradient(70% 45% at 50% 16%, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 70%);
  --layer-accent-shadow:
    inset 0 2px 4px var(--layer-accent-lit),
    inset 0 -5px 9px rgba(0, 0, 0, .35),
    0 8px 18px rgba(var(--color-neutral-shade), .26);
}
/* bevel: machined edge on all four sides */
[data-layer3d="bevel"] {
  --layer-extrude: var(--layer-depth);
  --layer-face: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .08));
  --layer-highlight:
    inset 0 2px 3px var(--layer-lit),
    inset 2px 0 3px var(--layer-lit),
    inset 0 -3px 5px var(--layer-shade),
    inset -2px 0 4px var(--layer-shade),
    0 var(--layer-extrude) calc(var(--layer-extrude) * 2) var(--layer-edge);
  --layer-accent-gloss: linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 46%, rgba(0, 0, 0, .06) 58%, rgba(255, 255, 255, .08) 100%);
  --layer-accent-shadow:
    inset 0 2px 3px var(--layer-accent-lit),
    inset 2px 0 3px var(--layer-accent-lit),
    inset 0 -3px 5px rgba(0, 0, 0, .25),
    inset -2px 0 4px rgba(0, 0, 0, .15),
    0 var(--layer-extrude) calc(var(--layer-extrude) * 2) var(--layer-accent-edge),
    0 8px 16px rgba(var(--color-neutral-shade), .26);
}
/* pillow: puffy, matte, floating */
[data-layer3d="pillow"] {
  --layer-face: radial-gradient(90% 80% at 50% 30%, var(--layer-lit), rgba(255, 255, 255, 0) 70%);
  --layer-highlight:
    inset 0 5px 9px var(--layer-lit),
    inset 0 -7px 13px var(--layer-shade);
  --layer-shadow-sm: 0 6px 12px rgba(var(--color-neutral-shade), .12), 0 14px 28px rgba(var(--color-neutral-shade), .08);
  --layer-shadow:    0 8px 16px rgba(var(--color-neutral-shade), .12), 0 20px 40px rgba(var(--color-neutral-shade), .1);
  --layer-shadow-lg: 0 12px 24px rgba(var(--color-neutral-shade), .12), 0 30px 60px rgba(var(--color-neutral-shade), .12);
  --layer-sunken-shadow: inset 0 3px 8px rgba(var(--color-neutral-shade), .16);
  --layer-accent-gloss: radial-gradient(90% 80% at 50% 25%, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 70%);
  --layer-accent-shadow:
    inset 0 5px 9px var(--layer-accent-lit),
    inset 0 -7px 13px rgba(0, 0, 0, .4),
    0 8px 18px rgba(var(--color-neutral-shade), .28);
}
/* stack: two thinner sheets peek out below every tile */
[data-layer3d="stack"] {
  --layer-highlight:
    inset 0 1px 3px var(--layer-lit),
    0 4px 1px -1px var(--layer-sheet-1),
    0 5px 4px -2px var(--layer-shade),
    0 8px 1px -3px var(--layer-sheet-2),
    0 9px 5px -3px var(--layer-shade);
  --layer-shadow-sm: 0 12px 14px -8px rgba(var(--color-neutral-shade), .2);
  --layer-shadow:    0 14px 18px -8px rgba(var(--color-neutral-shade), .22);
  --layer-shadow-lg: 0 22px 34px -12px rgba(var(--color-neutral-shade), .24);
  --layer-accent-shadow:
    inset 0 1px 3px var(--layer-accent-lit),
    0 4px 2px -1px var(--layer-accent-sheet-1),
    0 8px 3px -3px var(--layer-accent-sheet-2),
    0 14px 16px -8px rgba(var(--color-neutral-shade), .3);
}

/* ---------------------------------------------------------------------
   SURFACES
   --------------------------------------------------------------------- */
[data-family="layer"] .glass::before,
[data-family="layer"] :is(.glass-glint, .glass-shadow-glint, .glass-edge-glow, .glass-depth) { display: none; }

[data-family="layer"] .glass::after {
  background: var(--layer-face), var(--layer-2);
  border: 0;   /* no outline: tiles are shaped by soft shadows only */
  box-shadow: var(--layer-highlight), var(--layer-shadow-sm);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  filter: none;
}
[data-family="layer"] .glass--card::after { background: var(--layer-1); box-shadow: var(--layer-highlight), var(--layer-shadow-lg); }

/* the active tile */
[data-family="layer"] .glass--primary::after { background: var(--layer-accent-fill); box-shadow: var(--layer-accent-shadow); }
[data-family="layer"] .glass--primary { color: var(--layer-accent-ink); }
[data-family="layer"] .glass--secondary::after { background: var(--layer-sunken); box-shadow: var(--layer-sunken-shadow); }
[data-family="layer"] .glass--secondary { color: var(--color-ink); }

/* ghost */
[data-family="layer"] .glass--ghost::after { background: transparent; box-shadow: none; }
[data-family="layer"] .glass--ghost:is(:hover, .is-hover, :active, .is-active, :focus-visible, .is-focus):not(:disabled, .is-disabled)::after {
  background: var(--layer-sunken);
  box-shadow: none;
}

/* containers: tabs track is a raised tile, field / slider / progress are sunken */
[data-family="layer"] .glass--track::after { background: var(--layer-face), var(--layer-2); box-shadow: var(--layer-highlight), var(--layer-shadow); }
[data-family="layer"] .field.glass::after { background: var(--layer-sunken); box-shadow: var(--layer-sunken-shadow); }
[data-family="layer"] .field--solid { background: var(--layer-face), var(--layer-2); border: 0; box-shadow: var(--layer-highlight), var(--layer-shadow-sm); }
[data-family="layer"] .field--solid.is-error { box-shadow: var(--layer-highlight), var(--layer-shadow-sm), 0 0 0 3px rgba(var(--color-danger), .18); }
[data-family="layer"] .glass.is-error::after { box-shadow: var(--layer-sunken-shadow), 0 0 0 3px rgba(var(--color-danger), .18); }
[data-family="layer"] :is(.slider-track, .progress-track)::after { background: var(--layer-sunken); box-shadow: var(--layer-sunken-shadow); }
[data-family="layer"] :is(.slider-fill, .progress-fill)::after { background: var(--layer-accent-fill); box-shadow: inset 0 1px 2px var(--layer-accent-lit); }

/* ---------------------------------------------------------------------
   INTERACTION
   --------------------------------------------------------------------- */
[data-family="layer"] .glass-pressable:is(:hover, .is-hover):not(:disabled, .is-disabled, .is-loading)::after {
  filter: none;
  box-shadow: var(--layer-highlight), var(--layer-shadow);
}
[data-family="layer"] .glass--primary.glass-pressable:is(:hover, .is-hover):not(:disabled, .is-disabled, .is-loading)::after {
  filter: brightness(1.08);
  box-shadow: var(--layer-accent-shadow);
}
[data-family="layer"] .glass-pressable:is(:active, .is-active, [aria-pressed="true"]):not(:disabled, .is-disabled, .is-loading)::after {
  filter: none;
  background: var(--layer-sunken);
  box-shadow: var(--layer-sunken-shadow);
}
[data-family="layer"] .glass--primary.glass-pressable:is(:active, .is-active):not(:disabled, .is-disabled, .is-loading)::after {
  background: var(--layer-accent-fill);
  box-shadow: var(--layer-accent-pressed);
}
/* toggles that are on become the active tile */
[data-family="layer"] .glass-pressable[aria-pressed="true"]:not(.glass--ghost, :disabled, .is-disabled)::after {
  background: var(--layer-accent-fill);
  box-shadow: var(--layer-accent-shadow);
}
[data-family="layer"] :is(.btn, .btn-icon).glass[aria-pressed="true"]:not(.glass--primary) { color: var(--layer-accent-ink); }
[data-family="layer"] .glass:is(:disabled, .is-disabled)::after { opacity: .55; filter: saturate(.3); box-shadow: none; }

/* ---------------------------------------------------------------------
   COMPONENT DETAILS
   --------------------------------------------------------------------- */
[data-family="layer"] .solid { background: var(--layer-face), var(--layer-2); box-shadow: var(--layer-highlight), var(--layer-shadow-sm); }
[data-family="layer"] .btn-icon.solid-pressable:is(:hover, .is-hover):not(:disabled, .is-disabled) { box-shadow: var(--layer-highlight), var(--layer-shadow); }
[data-family="layer"] .btn-icon.solid-pressable:is(:active, .is-active):not(:disabled, .is-disabled) { background: var(--layer-sunken); box-shadow: var(--layer-sunken-shadow); }

[data-family="layer"] .btn-icon.glass:not(.glass--primary) { color: var(--color-ink); }
[data-family="layer"] .btn-icon.glass:not(.glass--primary) > svg { filter: none; }
[data-family="layer"] .btn-icon.glass.btn-like.is-liked { color: rgb(var(--color-primary)); }

/* switch: track, knob and indicator light all come from the kit's switch tokens */
[data-family="layer"] .glass--ring::after {
  -webkit-mask: none;
  mask: none;
  background: var(--layer-track-bg);
  border: 0;
  box-shadow: var(--layer-track-shadow);
}
[data-family="layer"] .switch[aria-checked="true"].glass::after { background: var(--layer-track-on-bg); box-shadow: var(--layer-track-on-shadow); }
[data-family="layer"] .switch-knob {
  width: calc(var(--knob) * var(--layer-knob-ws));
  height: calc(var(--knob) * var(--layer-knob-hs));
  left: var(--layer-knob-pad);
  border-radius: var(--layer-knob-shape);
  background: var(--layer-knob-bg);
  box-shadow: var(--layer-knob-shadow);
  color: var(--layer-knob-ink);
}
[data-family="layer"] .switch[aria-checked="true"] .switch-knob {
  left: calc(100% - var(--knob) * var(--layer-knob-ws) - var(--layer-knob-pad));
  background: var(--layer-knob-on-bg);
  box-shadow: var(--layer-knob-on-shadow);
  color: var(--layer-knob-on-ink);
}
[data-family="layer"] .switch:is(:active, .is-active):not(:disabled, .is-disabled) .switch-knob { box-shadow: var(--layer-shadow-sm); }
[data-family="layer"] .switch.glass::before {
  display: block;
  content: "";
  position: absolute;
  z-index: 0;
  inset: auto;
  top: 50%;
  left: 17%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border: 0;
  border-radius: 50%;
  transform: none;
  filter: none;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  transition: background-color .2s ease, box-shadow .2s ease;
}
[data-family="layer"] .switch[aria-checked="true"].glass::before {
  background: var(--layer-led);
  box-shadow: 0 0 7px var(--layer-led), 0 0 2px var(--layer-led);
}
[data-family="layer"] .switch:is(:disabled, .is-disabled).glass::after { background: var(--layer-sunken); box-shadow: var(--layer-track-shadow); opacity: .6; }
[data-family="layer"] .switch:is(:disabled, .is-disabled).glass::before { background: transparent; box-shadow: none; }
[data-family="layer"] .switch:is(:disabled, .is-disabled) .switch-knob { background: var(--layer-sunken); box-shadow: var(--layer-shadow-sm); color: var(--color-placeholder); }

/* checkbox + radio: sunken tile with a faint tick, checked = active tile */
[data-family="layer"] .check-box { color: var(--layer-accent-ink); }
[data-family="layer"] .check-box::after { background: var(--layer-sunken); box-shadow: var(--layer-sunken-shadow); }
[data-family="layer"] .check input:checked + .check-box::after,
[data-family="layer"] .check.is-indeterminate .check-box::after { background: var(--layer-accent-fill); box-shadow: var(--layer-accent-shadow); }
[data-family="layer"] .check:not(.check--radio):not(.is-indeterminate) input:not(:checked) + .check-box .icon-check { opacity: .3; transform: none; color: var(--color-ink-soft); }
[data-family="layer"] .radio-dot { background: var(--layer-accent-ink); box-shadow: none; }

/* tabs: raised track, active tab is the accent tile */
[data-family="layer"] .segmented-slider { background: var(--layer-accent-fill); box-shadow: var(--layer-accent-shadow); }
[data-family="layer"] .segmented-option[aria-selected="true"] { color: var(--layer-accent-ink); text-shadow: none; }
/* boxed tabs: every tab is its own raised tile like the buttons, the selected one is the accent tile */
[data-family="layer"][data-tabs="boxed"] .segmented.glass--track .segmented-option {
  border: 0;
  background: var(--layer-face), var(--layer-2);
  box-shadow: var(--layer-highlight), var(--layer-shadow-sm);
  transition: box-shadow .2s, background .2s, color .2s;
}
[data-family="layer"][data-tabs="boxed"] .segmented.glass--track .segmented-option:is(:hover, .is-hover):not([aria-selected="true"]) { box-shadow: var(--layer-highlight), var(--layer-shadow); }
[data-family="layer"][data-tabs="boxed"] .segmented.glass--track .segmented-option:is(:active, .is-active):not([aria-selected="true"]) { background: var(--layer-sunken); box-shadow: var(--layer-sunken-shadow); }
[data-family="layer"][data-tabs="boxed"] .segmented.glass--track .segmented-option[aria-selected="true"] { background: var(--layer-accent-fill); box-shadow: var(--layer-accent-shadow); }

/* slider: the thumb is built like the switch knob */
[data-family="layer"] .slider-thumb { background: var(--layer-knob-bg); box-shadow: var(--layer-knob-shadow); border-radius: var(--layer-knob-shape); }
[data-family="layer"] .slider-value { background: var(--layer-2); color: var(--color-ink); box-shadow: var(--layer-shadow-sm); }

/* small surfaces */
[data-family="layer"] .select-option:is(:hover, .is-hover) { background: var(--layer-sunken); }
[data-family="layer"] :is(.cal-day:not(:disabled, .is-disabled, [aria-selected="true"]), .cal-event):is(:hover, .is-hover) { background: var(--layer-sunken); }   /* calendar days and agenda rows hover like a menu option */
[data-family="layer"] .badge-remove { background: var(--layer-sunken); }
[data-family="layer"] .toast-close:hover { background: var(--layer-sunken); }
[data-family="layer"] .avatar-status { border-color: var(--layer-2); }
[data-family="layer"] .gcard.is-clickable:is(:hover, .is-hover)::after { filter: none; box-shadow: var(--layer-highlight), var(--layer-shadow-lg); }

/* =====================================================================
   DIAL SWITCH (kits that set data-switch="dial"): a flat opaque disc turning
   in a sunken round track, the same sheets as everything else. A slot cut into
   the disc turns from seven o'clock (off) to five o'clock (on); the arc it
   passed over, a groove in the track, fills with the accent colour, and the
   indicator light sits in the gap at the bottom. Pressing flattens the disc.
   Tokens: --layer-dial-turn (the turn).
   Per-kit variation (set on [data-kit][data-switch="dial"]): --dial-size, --dial-knob-inset, --dial-knob-bg/-shadow,
   --dial-ptr-top/-w/-h/-r/-clip/-bg/-on, --dial-rot-off/-on, --dial-from/-sweep, --dial-arc-o/-w/-off/-on,
   --dial-seg-mask (a mask layer over the arc) and --dial-seg (tick or block pitch where the family has one).
   ===================================================================== */
[data-family="layer"][data-switch="dial"] {
  --dial-size: 48px;
  --dial-knob-inset: 8px;
  --dial-ptr-top: 10%;
  --dial-ptr-w: 4px;
  --dial-ptr-h: 40%;
  --dial-ptr-r: var(--shape-inner, 2px);
  --dial-ptr-clip: none;
  --dial-rot-off: -135deg;
  --dial-rot-on: 135deg;
  --dial-from: 225deg;
  --dial-sweep: 270deg;
  --dial-arc-o: 2px;
  --dial-arc-w: 3.5px;
  --dial-seg-mask: linear-gradient(#000 0 0);
  --layer-dial-turn: .5s cubic-bezier(.34, 1.4, .64, 1); }
[data-family="layer"][data-switch="dial"] .switch { --r: 50%; border-radius: 50%; }
[data-family="layer"][data-switch="dial"] .switch--md { --dk: 1; width: var(--dial-size); height: var(--dial-size); }
[data-family="layer"][data-switch="dial"] .switch--sm { --dk: .75; width: calc(var(--dial-size) * .75); height: calc(var(--dial-size) * .75); }
/* the track stays the same sunken sheet whether on or off */
[data-family="layer"][data-switch="dial"] .switch.glass::after,
[data-family="layer"][data-switch="dial"] .switch[aria-checked="true"].glass::after {
  border-radius: 50%;
  background: var(--layer-track-bg);
  box-shadow: var(--layer-track-shadow);
}
/* the indicator light moves into the gap at the bottom of the arc */
[data-family="layer"][data-switch="dial"] .switch.glass::before {
  top: auto;
  bottom: calc(1.5px * var(--dk));
  left: 50%;
  width: calc(5px * var(--dk));
  height: calc(5px * var(--dk));
  margin: 0 0 0 calc(-2.5px * var(--dk));
}
/* the arc groove: the depth element is the groove, the glint the filled arc */
[data-family="layer"][data-switch="dial"] .switch > .glass-depth,
[data-family="layer"][data-switch="dial"] .switch > .glass-glint {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 50%;
  transform: none;
  filter: none;
  opacity: 1;
  background: var(--dial-arc-off, var(--dial-arc-on, conic-gradient(from calc(var(--dial-from) - 1.5deg), transparent 0deg, var(--layer-edge) 1.5deg calc(var(--dial-sweep) + 1.5deg), transparent calc(var(--dial-sweep) + 3deg))));
  -webkit-mask: var(--dial-seg-mask), radial-gradient(circle closest-side, transparent 0 calc(100% - ((var(--dial-arc-o) + var(--dial-arc-w)) + 1px) * var(--dk)), #000 calc(100% - (var(--dial-arc-o) + var(--dial-arc-w)) * var(--dk)) calc(100% - (var(--dial-arc-o)) * var(--dk)), transparent calc(100% - ((var(--dial-arc-o)) - 1px) * var(--dk)));
  -webkit-mask-composite: source-in;
  mask: var(--dial-seg-mask), radial-gradient(circle closest-side, transparent 0 calc(100% - ((var(--dial-arc-o) + var(--dial-arc-w)) + 1px) * var(--dk)), #000 calc(100% - (var(--dial-arc-o) + var(--dial-arc-w)) * var(--dk)) calc(100% - (var(--dial-arc-o)) * var(--dk)), transparent calc(100% - ((var(--dial-arc-o)) - 1px) * var(--dk)));
  mask-composite: intersect;
  pointer-events: none;
}
[data-family="layer"][data-switch="dial"] .switch > .glass-glint {
  background: conic-gradient(from calc(var(--dial-from) - 1.5deg), transparent 0deg, var(--layer-accent-bg) 1.5deg calc(var(--dial-sweep) + 1.5deg), transparent calc(var(--dial-sweep) + 3deg));
  opacity: 0;
  transition: opacity var(--layer-dial-turn);
}
[data-family="layer"][data-switch="dial"] .switch[aria-checked="true"] > .glass-glint { opacity: 1; }
/* the disc: a raised sheet filling the track, with a slot cut into it */
[data-family="layer"][data-switch="dial"] .switch-knob,
[data-family="layer"][data-switch="dial"] .switch[aria-checked="true"] .switch-knob {
  inset: calc(var(--dial-knob-inset) * var(--dk));
  top: calc(var(--dial-knob-inset) * var(--dk));
  left: calc(var(--dial-knob-inset) * var(--dk));
  width: auto;
  height: auto;
  transform: none;
  border-radius: 50%;
  background: var(--dial-knob-bg, var(--layer-knob-bg));
  box-shadow: var(--dial-knob-shadow, var(--layer-knob-shadow));
  color: transparent;
}
[data-family="layer"][data-switch="dial"] .switch-knob svg { display: none; }
[data-family="layer"][data-switch="dial"] .switch-knob::before {
  content: "";
  position: absolute;
  top: var(--dial-ptr-top);
  left: calc(50% - var(--dial-ptr-w) * var(--dk) / 2);
  width: calc(var(--dial-ptr-w) * var(--dk));
  height: var(--dial-ptr-h);
  border-radius: var(--dial-ptr-r);
  clip-path: var(--dial-ptr-clip);
  background: var(--dial-ptr-bg, var(--layer-sunken));
  box-shadow: var(--layer-sunken-shadow);
  transform-origin: 50% 100%;
  transform: rotate(var(--dial-rot-off));
  transition: transform var(--layer-dial-turn), background-color var(--layer-dial-turn);
}
[data-family="layer"][data-switch="dial"] .switch[aria-checked="true"] .switch-knob::before {
  background: var(--dial-ptr-on, var(--layer-accent-bg));
  box-shadow: inset 0 1px 1px var(--layer-accent-lit), inset 0 -1px 1px var(--layer-accent-edge);
  transform: rotate(var(--dial-rot-on));
}
/* pressed: the disc goes flat */
[data-family="layer"][data-switch="dial"] .switch:is(:active, .is-active):not(:disabled, .is-disabled) .switch-knob { box-shadow: var(--layer-shadow-sm); }
/* disabled: the arc goes out, the slot stays plain, the disc goes flat */
[data-family="layer"][data-switch="dial"] .switch:is(:disabled, .is-disabled) > .glass-glint { opacity: 0; }
[data-family="layer"][data-switch="dial"] .switch:is(:disabled, .is-disabled).glass::after { border-radius: 50%; }
[data-family="layer"][data-switch="dial"] .switch:is(:disabled, .is-disabled) .switch-knob { background: var(--layer-sunken); box-shadow: var(--layer-shadow-sm); }
[data-family="layer"][data-switch="dial"] .switch:is(:disabled, .is-disabled) .switch-knob::before { background: var(--layer-sunken); box-shadow: var(--layer-sunken-shadow); }


/* ---------- tab-types.css ---------- */
/* =====================================================================
   TAB TYPES
   The kit picks the KIND of tab, the family keeps supplying the surface.
   Two choices, both set per kit and written onto the page
   (and onto a card in a list) as attributes:

     data-tabs        slider | enclosed | lifted
                      folder | folder-angled | folder-rounded | folder-overlap | folder-cut
                      underline | underline-short | overline | outline
                      boxed | cards | pill | chips
                      icon | dot
                      vertical | stretch
                      flag | ticket | tail | stepper
     data-tab-motion  slide | grow | fade | elastic | ink

   "slider" is what every kit had before this file, so leaving the key out
   changes nothing. Only the construction lives here: where the marker sits,
   what shape it is, whether there is a track at all. Colour, depth and
   shadow still come from the family recipe, so one type works in all of them.

   Loaded AFTER every family recipe and BEFORE the kit themes, so a rule here
   beats the family's own tab styling and a theme can still tune it.

   The behaviour script measures the selected option and writes
   --sl-l / --sl-w (and --sl-t / --sl-h for the upright type) on the track,
   so the marker follows the real column in every type.

   Family rules reach (0,3,0) on the marker, so every rule here is written
   against .segmented.glass--track to sit above them.
   ===================================================================== */

:root, [data-kit] {
  --tab-line: 3px;                       /* the baseline under folder and underline tabs */
  --tab-gap: 0px;                        /* space between tabs, for the types that separate them */
  --tab-face: #fff;                      /* the marker's own surface, per family below */
}

/* The shaped types cut the marker with clip-path, which most families survive
   because their marker is a filled surface. Where it is only a line the shape
   would vanish, so the marker borrows the family's own paper. */
[data-family="glass"]    { --tab-face: rgba(255, 255, 255, .5); }
[data-family="soft"]     { --tab-face: rgb(var(--soft-base)); }
[data-family="layer"]    { --tab-face: var(--layer-1); }
[data-family="clay"]     { --tab-face: var(--clay-surface); }
[data-family="tech"]     { --tab-face: var(--tech-2); }
[data-family="brutal"]   { --tab-face: var(--nb-surface); }
[data-family="glitch"]   { --tab-face: var(--gl-surface); }
[data-family="skeuo"],
[data-family="real"]     { --tab-face: var(--sk-face); }
[data-family="aurora"]   { --tab-face: var(--au-surface); }
[data-family="flat"],
[data-family="solid"],
[data-family="gradient"] { --tab-face: var(--fl-surface); }
[data-family="y2k"]      { --tab-face: var(--yk-face); }
[data-family="classic"]  { --tab-face: var(--cl-paper); }

/* The rule colour: the kit's ink, faded, unless a theme names one outright. */
[data-tabs] .segmented, [data-tabs] .segmented .segmented-option {
  --tab-rule: color-mix(in srgb, var(--color-ink) calc(var(--tab-rule-fade, .25) * 100%), transparent);
}

/* Every type that throws the track away needs the glass layers gone with it. */
:is([data-tabs="underline"], [data-tabs="underline-short"], [data-tabs="overline"], [data-tabs="outline"],
    [data-tabs="folder"], [data-tabs="folder-angled"], [data-tabs="folder-rounded"],
    [data-tabs="folder-overlap"], [data-tabs="folder-cut"],
    [data-tabs="boxed"], [data-tabs="cards"], [data-tabs="chips"],
    [data-tabs="icon"], [data-tabs="dot"], [data-tabs="vertical"],
    [data-tabs="flag"], [data-tabs="ticket"], [data-tabs="tail"], [data-tabs="stepper"])
  .segmented.glass--track {
  height: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* the fill of a track does not live on the element, it lives on the layer underneath it: clearing only
   the element left a square slab of well colour sitting behind a rounded marker (seen on Clover) */
:is([data-tabs="underline"], [data-tabs="underline-short"], [data-tabs="overline"], [data-tabs="outline"],
    [data-tabs="folder"], [data-tabs="folder-angled"], [data-tabs="folder-rounded"],
    [data-tabs="folder-overlap"], [data-tabs="folder-cut"],
    [data-tabs="boxed"], [data-tabs="cards"], [data-tabs="chips"],
    [data-tabs="icon"], [data-tabs="dot"], [data-tabs="vertical"],
    [data-tabs="flag"], [data-tabs="ticket"], [data-tabs="tail"], [data-tabs="stepper"])
  .segmented.glass--track::after {
  background: none;
  box-shadow: none;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
:is([data-tabs="underline"], [data-tabs="underline-short"], [data-tabs="overline"], [data-tabs="outline"],
    [data-tabs="folder"], [data-tabs="folder-angled"], [data-tabs="folder-rounded"],
    [data-tabs="folder-overlap"], [data-tabs="folder-cut"],
    [data-tabs="boxed"], [data-tabs="cards"], [data-tabs="chips"],
    [data-tabs="icon"], [data-tabs="dot"], [data-tabs="vertical"],
    [data-tabs="flag"], [data-tabs="ticket"], [data-tabs="tail"], [data-tabs="stepper"])
  .segmented.glass--track > :is(.glass-glint, .glass-edge-glow, .glass-sheen, .glass-tint) { display: none; }

/* Where no filled marker sits behind the word, the word is on the page and has
   to take the kit's coloured ink. Families colour it for their own marker
   (Clay uses white), and without the marker it would disappear. */
:is([data-tabs="underline"], [data-tabs="underline-short"], [data-tabs="overline"], [data-tabs="outline"],
    [data-tabs="boxed"], [data-tabs="dot"], [data-tabs="icon"],
    [data-tabs="vertical"], [data-tabs="stepper"], [data-tabs="cards"])
  .segmented.glass--track .segmented-option[aria-selected="true"] {
  color: var(--color-accent-text);
}

/* =====================================================================
   TRACK TYPES
   ===================================================================== */

/* ENCLOSED - one framed track with a rule between the tabs */
[data-tabs="enclosed"] .segmented.glass--track {
  padding: 0;
  border: 1px solid var(--tab-rule, currentColor);
  --tab-rule-fade: .35;
  overflow: hidden;                       /* a square marker must not run past a rounded track */
}
[data-tabs="enclosed"] .segmented.glass--track .segmented-option {
  border-radius: 0;
  border-left: 1px solid var(--tab-rule, currentColor);
}
[data-tabs="enclosed"] .segmented.glass--track .segmented-option:first-of-type { border-left: 0; }
[data-tabs="enclosed"] .segmented.glass--track .segmented-slider { top: 0; bottom: 0; border-radius: 0; }

/* LIFTED - the selected tab floats above the track: centred in it, lifted by its shadow only */
[data-tabs="lifted"] .segmented.glass--track .segmented-slider {
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .22));
}

/* =====================================================================
   FOLDER TYPES - the selected tab is joined to the panel below it
   ===================================================================== */
:is([data-tabs="folder"], [data-tabs="folder-angled"], [data-tabs="folder-rounded"],
    [data-tabs="folder-cut"], [data-tabs="folder-overlap"]) .segmented.glass--track {
  border-bottom: var(--tab-line) solid var(--color-accent-text);
}
:is([data-tabs="folder"], [data-tabs="folder-angled"], [data-tabs="folder-rounded"],
    [data-tabs="folder-cut"], [data-tabs="folder-overlap"]) .segmented.glass--track .segmented-option {
  padding: 12px 24px;
}
/* the marker fills the tab and runs a line lower, so it sits ON the baseline */
:is([data-tabs="folder"], [data-tabs="folder-angled"], [data-tabs="folder-rounded"],
    [data-tabs="folder-cut"], [data-tabs="folder-overlap"]) .segmented.glass--track .segmented-slider {
  top: 0;
  bottom: 0;
  margin-bottom: calc(-1 * var(--tab-line));
}
/* Classic draws its marker as a hairline under the word, which leaves every
   shaped type empty. There it borrows the kit's paper instead, so the shape
   reads while the family keeps its flat, printed character. */
[data-family="classic"]:is([data-tabs="folder"], [data-tabs="folder-angled"], [data-tabs="folder-rounded"],
                           [data-tabs="folder-cut"], [data-tabs="folder-overlap"], [data-tabs="pill"],
                           [data-tabs="chips"], [data-tabs="flag"], [data-tabs="ticket"], [data-tabs="tail"],
                           [data-tabs="enclosed"], [data-tabs="lifted"], [data-tabs="icon"])
  .segmented.glass--track .segmented-slider {
  bottom: 0;
  background: var(--tab-face);
  box-shadow: none;
}

/* folder: square shoulders. The outline is drawn inside the option so nothing
   shifts, which also covers families whose marker is a thin line. */
[data-tabs="folder"] { --tab-fold: min(var(--radius-control), 14px); }   /* a pill kit would turn the tab into a dome */
[data-tabs="folder"] .segmented.glass--track .segmented-option { border-radius: var(--tab-fold) var(--tab-fold) 0 0; }
[data-tabs="folder"] .segmented.glass--track .segmented-option[aria-selected="true"] {
  box-shadow: inset 1px 0 0 var(--tab-rule), inset -1px 0 0 var(--tab-rule), inset 0 1px 0 var(--tab-rule);
}
[data-tabs="folder"] .segmented.glass--track .segmented-slider { border-radius: var(--tab-fold) var(--tab-fold) 0 0; }

/* folder-angled: a real file tab, shoulders under an angle */
[data-tabs="folder-angled"] .segmented.glass--track .segmented-slider {
  clip-path: polygon(0 100%, 14px 0, calc(100% - 14px) 0, 100% 100%);
  border-radius: 0;
}
[data-tabs="folder-angled"] .segmented.glass--track .segmented-option { padding: 12px 30px; }

/* folder-rounded: the shoulder curves out into the baseline, like a browser tab */
/* a deep, even top curve: the shoulder is the shape here, so it stays well clear
   of the small corner the plain folder tab uses */
[data-tabs="folder-rounded"] .segmented.glass--track .segmented-slider {
  border-radius: 18px 18px 0 0;
}
[data-tabs="folder-rounded"] .segmented.glass--track .segmented-option { padding: 12px 30px; border-radius: 18px 18px 0 0; }

/* folder-cut: the top outer corner is folded away */
[data-tabs="folder-cut"] .segmented.glass--track .segmented-slider {
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
  border-radius: 0;
}

/* folder-overlap: the tabs sit on each other, the chosen one in front */
[data-tabs="folder-overlap"] { --tab-fold: min(var(--radius-control), 12px); }
[data-tabs="folder-overlap"] .segmented.glass--track { padding-left: 10px; }
[data-tabs="folder-overlap"] .segmented.glass--track .segmented-option {
  margin-left: -10px;
  padding: 12px 28px;
  border-radius: var(--tab-fold) var(--tab-fold) 0 0;
  background: color-mix(in srgb, var(--tab-face) 70%, var(--color-ink) 8%);
  box-shadow: inset 1px 0 0 var(--tab-rule), inset -1px 0 0 var(--tab-rule), inset 0 1px 0 var(--tab-rule);
}
[data-tabs="folder-overlap"] .segmented.glass--track .segmented-option[aria-selected="true"] {
  background: none;                        /* the marker behind it is the face */
  z-index: 3;
}
[data-tabs="folder-overlap"] .segmented.glass--track .segmented-slider {
  z-index: 2;
  border-radius: var(--tab-fold) var(--tab-fold) 0 0;
}

/* =====================================================================
   LINE TYPES
   ===================================================================== */

/* UNDERLINE - a line under the selected tab */
[data-tabs="underline"] .segmented.glass--track {
  padding: 0 0 var(--tab-line);
  border-bottom: 1px solid var(--tab-rule, currentColor);
  --tab-rule-fade: .18;
}
[data-tabs="underline"] .segmented.glass--track .segmented-option { border-radius: 0; padding: 10px 22px; }
[data-tabs="underline"] .segmented.glass--track .segmented-slider {
  top: auto;
  bottom: calc(-1 * var(--tab-line));
  left: var(--sl-l, 0px);
  width: var(--sl-w, calc(100% / var(--n)));
  height: var(--tab-line);
  border-radius: var(--tab-line);
  background: var(--color-accent-text);
  box-shadow: none;
}

/* UNDERLINE-SHORT - the line is shorter than the word and centred under it */
[data-tabs="underline-short"] .segmented.glass--track {
  padding: 0 0 var(--tab-line);
  border-bottom: 1px solid var(--tab-rule, currentColor);
  --tab-rule-fade: .18;
}
[data-tabs="underline-short"] .segmented.glass--track .segmented-option { border-radius: 0; padding: 10px 22px; }
[data-tabs="underline-short"] .segmented.glass--track .segmented-slider {
  top: auto;
  bottom: calc(-1 * var(--tab-line));
  left: calc(var(--sl-l, 0px) + var(--sl-w, 60px) / 2 - 13px);
  width: 26px;
  height: var(--tab-line);
  border-radius: var(--tab-line);
  background: var(--color-accent-text);
  box-shadow: none;
  transform: none;
}

/* OVERLINE - the line is above the tab, not under it */
[data-tabs="overline"] .segmented.glass--track {
  padding: var(--tab-line) 0 0;
  border-top: 1px solid var(--tab-rule, currentColor);
  --tab-rule-fade: .18;
}
[data-tabs="overline"] .segmented.glass--track .segmented-option { border-radius: 0; padding: 10px 22px; }
[data-tabs="overline"] .segmented.glass--track .segmented-slider {
  bottom: auto;
  top: calc(-1 * var(--tab-line));
  left: var(--sl-l, 0px);
  width: var(--sl-w, calc(100% / var(--n)));
  height: var(--tab-line);
  border-radius: var(--tab-line);
  background: var(--color-accent-text);
  box-shadow: none;
}

/* OUTLINE - a frame is drawn around the word itself, no fill behind it */
[data-tabs="outline"] { --tab-gap: 2px; }
[data-tabs="outline"] .segmented.glass--track { gap: var(--tab-gap); }
[data-tabs="outline"] .segmented.glass--track .segmented-option { padding: 10px 20px; border-radius: var(--shape-control); }
[data-tabs="outline"] .segmented.glass--track .segmented-option[aria-selected="true"] {
  box-shadow: inset 0 0 0 2px var(--color-accent-text);
}
[data-tabs="outline"] .segmented.glass--track .segmented-slider { display: none; }

/* =====================================================================
   SEPARATED TYPES
   ===================================================================== */

/* BOXED - every tab keeps its own outline, the selected one is marked */
[data-tabs="boxed"] { --tab-gap: 8px; }
[data-tabs="boxed"] .segmented.glass--track { gap: var(--tab-gap); }
[data-tabs="boxed"] .segmented.glass--track .segmented-option {
  padding: 11px 22px;
  border: 1px solid var(--tab-rule, currentColor);
  border-radius: var(--shape-control);
  --tab-rule-fade: .3;
}
[data-tabs="boxed"] .segmented.glass--track .segmented-option[aria-selected="true"] { border-color: var(--color-accent-text); }
[data-tabs="boxed"] .segmented.glass--track .segmented-slider { display: none; }

/* CARDS - separated cards, the chosen one lifts */
[data-tabs="cards"] { --tab-gap: 8px; }
[data-tabs="cards"] .segmented.glass--track { gap: var(--tab-gap); align-items: center; }
[data-tabs="cards"] .segmented.glass--track .segmented-option {
  padding: 11px 22px;
  border-radius: var(--shape-control);
  background: var(--tab-face);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
}
[data-tabs="cards"] .segmented.glass--track .segmented-option[aria-selected="true"] {
  box-shadow: 0 5px 14px rgba(0, 0, 0, .2);
  transform: translateY(-3px);
}
[data-tabs="cards"] .segmented.glass--track .segmented-slider { display: none; }

/* PILL - no track, the chosen tab is a shape on its own */
[data-tabs="pill"] { --tab-gap: 4px; }
[data-tabs="pill"] .segmented.glass--track { gap: var(--tab-gap); }
[data-tabs="pill"] .segmented.glass--track .segmented-option { padding: 11px 24px; border-radius: var(--shape-control); }
[data-tabs="pill"] .segmented.glass--track .segmented-slider { top: 0; bottom: 0; border-radius: var(--shape-control); }

/* CHIPS - small and rounded, the way a row of filters looks */
[data-tabs="chips"] { --tab-gap: 7px; }
[data-tabs="chips"] .segmented.glass--track { gap: var(--tab-gap); }
[data-tabs="chips"] .segmented.glass--track .segmented-option {
  padding: 8px 16px;
  font-size: var(--text-md, .92em);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-ink) 8%, transparent);
}
[data-tabs="chips"] .segmented.glass--track .segmented-option[aria-selected="true"] { background: none; }
[data-tabs="chips"] .segmented.glass--track .segmented-slider { top: 0; bottom: 0; border-radius: 999px; }

/* =====================================================================
   TYPES THAT CARRY SOMETHING EXTRA
   The icon comes from the markup (the builder adds them only
   for the kits that ask for them); the dot is drawn here.
   ===================================================================== */

/* ICON - the icon sits above the label, which makes a taller tab */
[data-tabs="icon"] { --tab-gap: 2px; }
[data-tabs="icon"] .segmented.glass--track { gap: var(--tab-gap); }
[data-tabs="icon"] .segmented.glass--track .segmented-option {
  display: inline-grid;
  justify-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--shape-control);
}
[data-tabs="icon"] .segmented.glass--track .segmented-option svg { width: 18px; height: 18px; }
[data-tabs="icon"] .segmented.glass--track .segmented-slider { top: 0; bottom: 0; border-radius: var(--shape-control); }

/* DOT - a dot before the label instead of a line under it */
[data-tabs="dot"] { --tab-gap: 4px; }
[data-tabs="dot"] .segmented.glass--track { gap: var(--tab-gap); }
[data-tabs="dot"] .segmented.glass--track .segmented-option {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: var(--shape-control);
}
[data-tabs="dot"] .segmented.glass--track .segmented-option::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-ink) 28%, transparent);
}
[data-tabs="dot"] .segmented.glass--track .segmented-option[aria-selected="true"]::before { background: var(--color-accent-text); }
[data-tabs="dot"] .segmented.glass--track .segmented-slider { display: none; }

/* =====================================================================
   LAYOUT TYPES
   ===================================================================== */

/* VERTICAL - the tabs stack, the marker runs down the left edge.
   The behaviour script writes --sl-t / --sl-h for this one. */
[data-tabs="vertical"] .segmented.glass--track {
  grid-auto-flow: row;
  grid-auto-columns: auto;
  justify-items: stretch;
  padding: 0 0 0 var(--tab-line);
  border-left: 1px solid var(--tab-rule, currentColor);
  --tab-rule-fade: .18;
}
[data-tabs="vertical"] .segmented.glass--track .segmented-option {
  border-radius: 0;
  padding: 9px 18px;
  text-align: left;
}
[data-tabs="vertical"] .segmented.glass--track .segmented-slider {
  left: calc(-1 * var(--tab-line));
  right: auto;
  width: var(--tab-line);
  /* the calc() is not decoration: a bare var() on a property that also has a
     transition resolves to the fallback in Chromium and never updates, so the
     rail stayed parked at the top. Wrapping it forces a fresh substitution. */
  top: calc(var(--sl-t, 0px) + 0px);
  height: calc(var(--sl-h, 0px) + 0px);
  bottom: auto;
  border-radius: var(--tab-line);
  background: var(--color-accent-text);
  box-shadow: none;
  transform: none;
  transition: top var(--motion-slide), height var(--motion-slide);
}

/* STRETCH - the tabs share the full width, only dividers between them */
[data-tabs="stretch"] .segmented.glass--track {
  display: grid;
  width: 100%;
  padding: 0;
  border: 1px solid var(--tab-rule, currentColor);
  border-radius: var(--shape-control);
  overflow: hidden;
  --tab-rule-fade: .3;
}
[data-tabs="stretch"] .segmented.glass--track .segmented-option {
  border-radius: 0;
  text-align: center;
  border-left: 1px solid var(--tab-rule, currentColor);
}
[data-tabs="stretch"] .segmented.glass--track .segmented-option:first-of-type { border-left: 0; }
[data-tabs="stretch"] .segmented.glass--track .segmented-option[aria-selected="true"] {
  box-shadow: inset 0 calc(-1 * var(--tab-line)) 0 var(--color-accent-text);
  background: color-mix(in srgb, var(--color-ink) 6%, transparent);
}
[data-tabs="stretch"] .segmented.glass--track .segmented-slider { display: none; }

/* =====================================================================
   SHAPED TYPES
   ===================================================================== */

/* FLAG - arrow into arrow, the way a set of steps reads */
[data-tabs="flag"] .segmented.glass--track { padding-left: 11px; }
[data-tabs="flag"] .segmented.glass--track .segmented-option {
  margin-left: -11px;
  padding: 11px 26px 11px 32px;
  border-radius: 0;
  background: color-mix(in srgb, var(--tab-face) 70%, var(--color-ink) 8%);
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%, 11px 50%);
}
[data-tabs="flag"] .segmented.glass--track .segmented-option[aria-selected="true"] { background: none; z-index: 3; }
[data-tabs="flag"] .segmented.glass--track .segmented-slider {
  top: 0;
  bottom: 0;
  z-index: 2;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%, 11px 50%);
}

/* TICKET - a notch bitten out of each side, like a torn stub */
[data-tabs="ticket"] { --tab-gap: 9px; }
[data-tabs="ticket"] .segmented.glass--track { gap: var(--tab-gap); }
[data-tabs="ticket"] .segmented.glass--track .segmented-option {
  padding: 11px 22px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--tab-face) 70%, var(--color-ink) 8%);
  mask: radial-gradient(circle 6px at 0 50%, transparent 98%, #000),
        radial-gradient(circle 6px at 100% 50%, transparent 98%, #000);
  mask-composite: intersect;
  -webkit-mask: radial-gradient(circle 6px at 0 50%, transparent 98%, #000),
                radial-gradient(circle 6px at 100% 50%, transparent 98%, #000);
  -webkit-mask-composite: source-in;
}
[data-tabs="ticket"] .segmented.glass--track .segmented-option[aria-selected="true"] { background: none; }
[data-tabs="ticket"] .segmented.glass--track .segmented-slider {
  top: 0;
  bottom: 0;
  border-radius: 5px;
  mask: radial-gradient(circle 6px at 0 50%, transparent 98%, #000),
        radial-gradient(circle 6px at 100% 50%, transparent 98%, #000);
  mask-composite: intersect;
  -webkit-mask: radial-gradient(circle 6px at 0 50%, transparent 98%, #000),
                radial-gradient(circle 6px at 100% 50%, transparent 98%, #000);
  -webkit-mask-composite: source-in;
}

/* TAIL - the chosen tab points down at the panel it opens */
[data-tabs="tail"] { --tab-fold: min(var(--radius-control), 10px); }
[data-tabs="tail"] .segmented.glass--track { margin-bottom: 8px; }
[data-tabs="tail"] .segmented.glass--track .segmented-option {
  padding: 11px 22px;
  border-radius: var(--tab-fold) var(--tab-fold) 0 0;
}
[data-tabs="tail"] .segmented.glass--track .segmented-slider {
  top: 0;
  bottom: 0;
  border-radius: var(--tab-fold) var(--tab-fold) 0 0;
  /* the point is the marker's own bottom edge, pulled into a triangle */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(50% + 7px) calc(100% - 8px),
                     50% 100%, calc(50% - 7px) calc(100% - 8px), 0 calc(100% - 8px));
  margin-bottom: -8px;
}

/* STEPPER - dots joined by a line, the way a process reads */
[data-tabs="stepper"] { --tab-gap: 0px; }
[data-tabs="stepper"] .segmented.glass--track .segmented-option {
  display: inline-grid;
  justify-items: center;
  gap: 9px;
  padding: 4px 18px;
  border-radius: 0;
  position: relative;
}
/* the node */
[data-tabs="stepper"] .segmented.glass--track .segmented-option::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid var(--tab-rule);
  background: var(--tab-face);
  order: -1;
  z-index: 1;
}
[data-tabs="stepper"] .segmented.glass--track .segmented-option[aria-selected="true"]::before {
  border-color: var(--color-accent-text);
  background: var(--color-accent-text);
}
/* the line between nodes: every option draws its own two halves, from its node out to its own edges,
   and the halves of neighbours meet at the border between them. Tabs of unequal width still join,
   and each half stops 4px short of its node, so the line never shows through a hollow node. */
[data-tabs="stepper"] .segmented.glass--track .segmented-option::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  right: 0;
  height: 2px;
  background:
    linear-gradient(var(--tab-rule), var(--tab-rule)) left center / calc(50% - 10px) 100% no-repeat,
    linear-gradient(var(--tab-rule), var(--tab-rule)) right center / calc(50% - 10px) 100% no-repeat;
}
[data-tabs="stepper"] .segmented.glass--track .segmented-option:first-of-type::after { background-size: 0 100%, calc(50% - 10px) 100%; }
[data-tabs="stepper"] .segmented.glass--track .segmented-option:last-of-type::after { background-size: calc(50% - 10px) 100%, 0 100%; }
[data-tabs="stepper"] .segmented.glass--track .segmented-slider { display: none; }

/* =====================================================================
   HOW THE MARKER MOVES
   Independent of the type above: the same folder tabs can slide or fade.
   "slide" is the default and lives in the component, nothing needed here.
   ===================================================================== */
[data-tab-motion="grow"] .segmented.glass--track .segmented-slider {
  transition: left var(--motion-slide), width var(--motion-slide), transform .26s cubic-bezier(.34, 1.4, .5, 1);
  animation: tab-grow .26s cubic-bezier(.34, 1.4, .5, 1);
}

[data-tab-motion="fade"] .segmented.glass--track .segmented-slider {
  transition: opacity .18s ease, left 0s linear .18s, width 0s linear .18s;
  animation: tab-fade .36s ease;
}

[data-tab-motion="elastic"] .segmented.glass--track .segmented-slider {
  transition: left .42s cubic-bezier(.34, 1.56, .36, 1), width .42s cubic-bezier(.34, 1.56, .36, 1), transform .42s cubic-bezier(.34, 1.56, .36, 1);
}

/* ink: the marker stretches towards the new tab and pulls itself back together */
[data-tab-motion="ink"] .segmented.glass--track .segmented-slider {
  transition: left .34s cubic-bezier(.65, 0, .35, 1), width .34s cubic-bezier(.65, 0, .35, 1), transform .34s cubic-bezier(.65, 0, .35, 1);
  animation: tab-ink .34s ease;
}

@keyframes tab-grow { from { transform: translateX(calc(100% * var(--i) * var(--sl-f, 1))) scaleX(.4); } }
@keyframes tab-fade { 0% { opacity: 0; } 45% { opacity: .35; } 100% { opacity: 1; } }
@keyframes tab-ink { 40% { transform: translateX(calc(100% * var(--i) * var(--sl-f, 1))) scaleX(1.18); } }

@media (prefers-reduced-motion: reduce) {
  .segmented-slider { transition: none; animation: none; }
  [data-tabs="cards"] .segmented-option[aria-selected="true"] { transform: none; }
}

/* Where a relief kit draws the tabs as a sunken well (the well lives on .glass-shadow-glint), the line types keep the
   well and draw the line INSIDE it: the well paints the line as its own background, so its rounded edge cuts the ends
   of the line and nothing pokes past the curve. The slider is not drawn there. */
[data-relief]:is([data-tabs="underline"], [data-tabs="underline-short"]) .segmented.glass--track .segmented-slider { display: none; }
[data-relief][data-tabs="underline"] .segmented.glass--track > .glass-shadow-glint {
  background: linear-gradient(var(--color-accent-text), var(--color-accent-text)) no-repeat
              calc(var(--sl-l, 0px) - var(--rb)) 100% / var(--sl-w, calc(100% / var(--n))) var(--tab-line),
              rgb(var(--soft-base));
  transition: background-position var(--motion-slide), background-size var(--motion-slide);
}
[data-relief][data-tabs="underline-short"] .segmented.glass--track > .glass-shadow-glint {
  background: linear-gradient(var(--color-accent-text), var(--color-accent-text)) no-repeat
              calc(var(--sl-l, 0px) + var(--sl-w, 60px) / 2 - 13px - var(--rb)) 100% / 26px var(--tab-line),
              rgb(var(--soft-base));
  transition: background-position var(--motion-slide);
}
/* Without a relief well, the types that throw the track away drop its shadow arc as well (the top arc already goes
   in the reset above): otherwise a Glass kit kept a faint arc under the bare line. */
:is([data-tabs="underline"], [data-tabs="underline-short"], [data-tabs="overline"], [data-tabs="outline"],
    [data-tabs="folder"], [data-tabs="folder-angled"], [data-tabs="folder-rounded"],
    [data-tabs="folder-overlap"], [data-tabs="folder-cut"],
    [data-tabs="boxed"], [data-tabs="cards"], [data-tabs="chips"],
    [data-tabs="icon"], [data-tabs="dot"], [data-tabs="vertical"],
    [data-tabs="flag"], [data-tabs="ticket"], [data-tabs="tail"], [data-tabs="stepper"]):not([data-relief])
  .segmented.glass--track > .glass-shadow-glint { display: none; }


/* ---------- theme.css ---------- */
/* =====================================================================
   KIT: Clove (layer-clove)  -  dial switch, 3D style: dome
   Warm clove-brown sheets with a brick accent, domed tiles. Rokkitt.
   Every switch is a flat disc with a slot, turning in a sunken round track.
   ===================================================================== */
[data-kit="layer-clove"] {
  --color-ink: #281c15;
  --color-ink-soft: #6d5b50;
  --color-placeholder: #837267;
  --color-on-tinted: #ffffff;
  --color-primary: 153, 68, 51;
  --color-primary-light: 210, 136, 121;
  --color-primary-deep: 99, 44, 33;
  --color-secondary: 129, 111, 101;
  --color-secondary-light: 179, 166, 158;
  --color-secondary-deep: 86, 74, 67;
  --color-neutral-shade: 64, 48, 38;
  --color-neutral-shade-deep: 32, 24, 19;
  --color-accent-text: color-mix(in srgb, rgb(var(--color-primary)), black 15%);
  --layer-page: #e5d9d2;
  --layer-1: #eee6e2;
  --layer-2: #f7f4f3;
  --layer-sunken: #d9c8bf;
  --layer-lit: rgba(255, 255, 255, .9);
  --layer-accent-bg: rgb(var(--color-primary));
  --radius-control: 6px;
  --radius-box: 4px;
  --radius-menu: 8px;
  --radius-card: 12px;
  --shape-inner: 3px;
  --weight-control: 600;
  --tracking-display: -.01em;
  --tracking-control: .02em;
  --tracking-caps: .18em;
  --font-sans: "Rokkitt", Georgia, "Times New Roman", serif;
}

/* dial variation: wedge, dashes, small-knob, sunken-disc */
[data-kit="layer-clove"][data-switch="dial"] {
  --dial-ptr-w: 8px;
  --dial-ptr-h: 42%;
  --dial-ptr-top: 8%;
  --dial-ptr-r: 0;
  --dial-ptr-clip: polygon(50% 0, 100% 88%, 0 88%);
  --dial-arc-glow: none;
  --dial-seg-mask: repeating-conic-gradient(from var(--dial-from), transparent 0 .5deg, #000 2deg 6deg, transparent 7.5deg 11.25deg);
  --dial-knob-inset: 11px;
  --dial-arc-w: 5px;
  --dial-knob-bg: var(--layer-sunken);
  --dial-knob-shadow: var(--layer-sunken-shadow);
}

/* dark mode */
[data-kit="layer-clove"][data-mode="dark"] {
  --color-ink: #f0e8e3;
  --color-ink-soft: #ada6a2;
  --color-placeholder: #8d8681;
  --color-on-tinted: #22110d;
  --color-primary: 240, 146, 126;
  --color-primary-light: 254, 193, 180;
  --color-primary-deep: 181, 93, 75;
  --color-neutral-shade: 0, 0, 0;
  --color-neutral-shade-deep: 0, 0, 0;
  --color-accent-text: color-mix(in srgb, rgb(var(--color-primary)), white 23%);
  --layer-page: #2d2621;
  --layer-1: #362d28;
  --layer-2: #423832;
  --layer-sunken: #261f1b;
  --layer-lit: rgba(255, 255, 255, .08);
  --layer-shade: rgba(0, 0, 0, .3);
  --layer-edge: rgba(0, 0, 0, .4);
}


/* ---------- the page ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { --page-bg: var(--page-bg-calm); --color-accent-text: var(--color-accent-text-calm); margin: 0; min-height: 100vh; font-family: var(--font-sans); color: var(--color-ink); background: var(--page-bg); background-attachment: fixed; }
[data-plate] body::before, [data-plate] body::after { content: ""; display: block; height: var(--page-band-h, 0px); background: var(--page-band); }