/* SIHAN · /filters/ and /filters/<id>/ (owner: kit). Uses the tokens in kit.css. */

/* =================== Index =================== */
.f-hero { position: relative; min-height: 76vh; min-height: 76svh; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--header-h) + 24px) var(--gutter) clamp(20px, 4vh, 48px); }
.f-title { display: flex; align-items: flex-start; flex-wrap: nowrap; }
.f-title sup { font: 500 clamp(11px, .9vw, 14px)/1 var(--mono); letter-spacing: .12em; top: .6em; margin-left: .5em; font-variant-numeric: tabular-nums; color: var(--ink-70); }
.f-arrow { align-self: flex-end; margin-left: auto; font: 300 clamp(40px, 6vw, 110px)/1 var(--sans); color: var(--ink); transform: translateY(calc(var(--pg-hero, 0) * 30px)); }
.f-aperture { position: absolute; right: 7vw; top: calc(var(--header-h) + 2vh); width: min(60vh, 40vw); aspect-ratio: 1; cursor: grab; touch-action: pan-y; }
.f-runway-ap { width: min(40vw, 460px); }
@media (max-width: 699px) {
  .f-hero { min-height: 92svh; }
  .f-aperture { right: auto; left: 14vw; top: calc(var(--header-h) + 3vh); width: 72vw; }
}

/* The camera row sticks under the header; once stuck, ONE frosted bar covers header + row (the WebGL models pass
   under it blurred, never sharp behind the type). filters-index.js sets .is-stuck / html.f-stuck. */
.f-cams-bar { position: sticky; top: calc(var(--header-h) - 8px); z-index: 20; margin-bottom: clamp(24px, 4vh, 48px); }
.f-cams-bar::before { content: ''; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; top: calc(8px - var(--header-h) - env(safe-area-inset-top)); pointer-events: none;
  background: rgb(242 245 249 / .8); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); box-shadow: 0 1px 0 var(--ink-12);
  opacity: 0; transition: opacity .3s var(--ease); }
.f-cams-bar.is-stuck::before { opacity: 1; }
html.f-stuck .k-header::before { opacity: 0; }
.f-cams { display: flex; flex-wrap: wrap; gap: 6px clamp(18px, 2.4vw, 40px); padding: 14px var(--gutter) 16px; }
.f-cams a { position: relative; display: inline-flex; align-items: flex-start; gap: 4px; min-height: 40px; padding: 8px 0; color: var(--ink-60); text-decoration: none;
  font: 520 clamp(17px, 1.5vw, 26px)/1.1 var(--sans); letter-spacing: -.03em; transition: color .35s var(--ease); }
.f-cams a sup { font: 500 10px/1 var(--mono); letter-spacing: .12em; color: var(--ink-70); margin-top: 2px; }
.f-cams a span { background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat; transition: background-size .5s var(--ease); padding-bottom: 2px; }
.f-cams a:hover, .f-cams a:focus-visible, .f-cams a[aria-current="true"] { color: var(--ink); }
.f-cams a:hover span, .f-cams a[aria-current="true"] span { background-position: 0 100%; background-size: 100% 1px; }
.f-cams a[aria-current="true"]::before { content: ''; position: absolute; left: -10px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--blue); }
@media (max-width: 699px) {
  .f-cams { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 22px; padding-left: calc(var(--gutter) + 10px); -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); }
  .f-cams::-webkit-scrollbar { display: none; }
  .f-cams a { white-space: nowrap; font-size: 17px; }
}

.f-grid-wrap { padding: 0 var(--gutter) clamp(80px, 16vh, 200px); }
.f-grid { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 6vh, 72px) clamp(16px, 2.2vw, 40px); max-width: var(--maxw); margin: 0 auto; }
@media (min-width: 700px) { .f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .f-card:nth-child(2n) { margin-top: 12vh; } }
@media (min-width: 1100px) { .f-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .f-card:nth-child(2n) { margin-top: 0; } .f-card:nth-child(3n + 2) { margin-top: 14vh; } .f-card:nth-child(3n) { margin-top: 5vh; } }
.f-card { position: relative; transition: opacity .6s var(--ease); will-change: transform; }
.f-card-link { display: block; color: var(--ink); text-decoration: none; }
.f-slab { aspect-ratio: 4 / 5; width: 100%; touch-action: pan-y; }
.f-card-meta { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; padding-top: 18px; align-items: baseline; }
/* HUD leader: a 1 px line with a crosshair tick from the caption up toward the model */
.f-card-meta::before { content: ''; position: absolute; left: 3px; top: -30px; width: 1px; height: 38px; background: linear-gradient(var(--ink-40), rgb(14 26 44 / 0)); }
.f-card-meta::after { content: ''; position: absolute; left: -3px; top: -36px; width: 13px; height: 13px; opacity: .7;
  background: linear-gradient(var(--ink), var(--ink)) 50% 0 / 1px 100% no-repeat, linear-gradient(var(--ink), var(--ink)) 0 50% / 100% 1px no-repeat; }
.f-card-n { grid-row: 1 / span 3; color: var(--steel); }
.f-card-name { font: 540 var(--t-h3)/1.1 var(--sans); letter-spacing: -.035em; display: inline-block; }
.f-card-name > span { display: inline-block; background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat; transition: background-size .5s var(--ease); }
.f-card-link:hover .f-card-name > span, .f-card-link:focus-visible .f-card-name > span { background-position: 0 100%; background-size: 100% 1px; }
.f-card-fit, .f-card-type { color: var(--ink-60); }
.f-card.is-out { opacity: .15; }
.f-card.is-out .f-card-link { pointer-events: none; }
.f-card-link:focus-visible { outline-offset: 8px; }

/* =================== Filter page =================== */
.p-hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
.p-marquee { position: absolute; z-index: -1; left: 0; right: 0; top: 46%; transform: translateY(-50%); font: 200 clamp(120px, 22vw, 420px)/1 var(--sans); letter-spacing: -.05em; }
.p-hero-stage { position: absolute; inset: 0; display: grid; place-items: center; padding: calc(var(--header-h) + 10px) var(--gutter) clamp(150px, 22vh, 240px); }
.p-hero-slab { width: min(54vh, 74vw, 600px); aspect-ratio: 4 / 5; touch-action: pan-y; cursor: grab; }
/* HUD callout attached to the 3D model: a 1 px leader with a crosshair tick on the object, mono facts at its end. */
.p-hud { position: absolute; left: calc(50% + min(54vh, 74vw, 600px) * .26); top: 33%; margin: 0; display: flex; align-items: center; pointer-events: none;
  font: 500 var(--hud)/1.55 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-70);
  opacity: 0; transform: translateX(-12px); animation: p-hud-in .9s var(--ease) 1.1s forwards; }
.p-hud-line { position: relative; width: clamp(64px, 10vw, 180px); height: 1px; margin-right: 14px; background: var(--ink-40); transform-origin: 0 50%; }
.p-hud-line::before { content: ''; position: absolute; left: -6px; top: -6px; width: 13px; height: 13px;
  background: linear-gradient(var(--ink), var(--ink)) 50% 0 / 1px 100% no-repeat, linear-gradient(var(--ink), var(--ink)) 0 50% / 100% 1px no-repeat; }
.p-hud-line::after { content: ''; position: absolute; right: -1px; top: -3px; width: 1px; height: 7px; background: var(--ink-40); }
.p-hud-txt { display: grid; gap: 2px; white-space: nowrap; }
.p-hud-txt b { font-weight: 600; color: var(--ink); }
@keyframes p-hud-in { to { opacity: 1; transform: none; } }
html.no-webgl .p-hud { display: none; }
@media (max-width: 899px) { .p-hud { display: none; } }
.p-hero-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; padding: 0 var(--gutter) clamp(28px, 6vh, 64px); }
.p-crumb { margin-bottom: 14px; color: var(--steel); }
.p-crumb a { color: var(--ink); }
.p-name > span { display: inline-block; }
.p-facts { --cols: 3; }
@media (max-width: 699px) {
  .p-hero { min-height: 640px; }
  .p-marquee { top: 40%; font-size: 46vw; }
  .p-hero-stage { padding-bottom: 230px; }
  .p-hero-slab { width: min(62vw, 40vh); }
  .p-hero-foot { flex-direction: column; align-items: flex-start; gap: 18px; }
  .p-facts { grid-template-columns: 1fr 1fr; gap: 12px 24px; }
  .p-facts > div:last-child:nth-child(3) { grid-column: 1 / -1; }
}

.p-line { padding-top: clamp(100px, 22vh, 240px); padding-bottom: clamp(80px, 16vh, 200px); }
.p-line-big { max-width: 14em; }
.p-use { margin-top: clamp(24px, 4vh, 44px); max-width: 30em; color: var(--ink-60); }

/* Study: pinned for ~220vh; the WebGL quad is drawn over .p-study-frame. */
.p-study { position: relative; height: 320vh; }
.p-study-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; padding: calc(var(--header-h) + 8px) var(--gutter) clamp(40px, 8vh, 80px); }
.p-study-box { position: relative; width: min(100%, calc((100svh - var(--header-h) - 120px) * 1.6)); }
.p-study-frame { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: clamp(14px, 1.6vw, 26px); overflow: hidden; touch-action: pan-y; cursor: grab;
  background: #0d1626; box-shadow: 0 40px 80px -40px rgb(14 26 44 / .55), 0 0 0 1px rgb(255 255 255 / .6); }
.p-study-frame:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }
.p-study-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s var(--ease); pointer-events: none; -webkit-user-drag: none; user-select: none; }
.p-study-frame { -webkit-user-select: none; user-select: none; }
html.gl-live .p-study-frame.gl-on { background: transparent; box-shadow: 0 40px 80px -40px rgb(14 26 44 / .55); }
html.gl-live .p-study-frame.gl-on .p-study-still { opacity: 0; }
.p-study-hud { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none;
  display: grid; grid-template-columns: 1fr auto; align-items: end; padding: 0 clamp(16px, 2vw, 32px) clamp(16px, 2.4vw, 32px); color: #eef4fb; }
.p-study-title { grid-column: 1 / -1; color: rgb(238 244 251 / .8); margin-bottom: 10px; }
.p-readout { font: 500 clamp(28px, 3.6vw, 64px)/1 var(--sans); letter-spacing: -.045em; font-variant-numeric: tabular-nums; min-height: 1em; text-shadow: 0 2px 20px rgb(3 9 22 / .4); }
.p-readout small { font: 500 var(--hud)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; margin-left: .8em; vertical-align: middle; opacity: .8; }
.no-webgl .p-hint { display: none; }
.p-hint { display: flex; align-items: center; gap: 10px; color: rgb(238 244 251 / .85); }
.p-hint i { width: 28px; height: 28px; border-radius: 50%; border: 1px solid currentColor; position: relative; animation: p-hint 2.4s var(--ease) infinite; }
.p-hint i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: currentColor; }
@keyframes p-hint { 0%, 100% { transform: translateX(-6px); } 50% { transform: translateX(6px); } }
.p-study.is-touched .p-hint { opacity: 0; transition: opacity .6s var(--ease); }
@media (max-width: 699px) {
  .p-study { height: 300vh; }
  .p-study-box { width: 100%; }
  .p-study-frame { aspect-ratio: 4 / 5; max-height: calc(100svh - var(--header-h) - 60px); }
}

.p-fit { padding-top: clamp(80px, 16vh, 200px); padding-bottom: clamp(60px, 12vh, 140px); }
/* Strength tiles share the content width evenly: one column per strength (--n from the generator), so one, two or five
   tiles all span the row instead of piling up on the left. */
.p-chips { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); margin: 22px 0 clamp(60px, 12vh, 140px); }
.p-chip { position: relative; display: grid; align-content: end; gap: 8px; min-width: 0; min-height: clamp(150px, 15vw, 240px); padding: clamp(14px, 1.4vw, 22px); color: var(--ink);
  transform: translateY(calc((1 - var(--chip-in, 1)) * 60px)) rotate(calc((1 - var(--chip-in, 1)) * 4deg)); opacity: var(--chip-in, 1); transition: transform .3s var(--ease); }
.p-chip-glass { position: absolute; inset: 0; z-index: -1; }
.p-chip b { font: 560 clamp(30px, 3.2vw, 56px)/1 var(--sans); letter-spacing: -.045em; }
@media (hover: hover) and (pointer: fine) { .p-chip:hover { transform: translateY(-6px) rotate(-1deg); } }   /* no sticky tilt after a tap */
.p-fits-title { margin-bottom: 12px; }
.p-fits { font: 560 clamp(40px, 7vw, 132px)/.98 var(--sans); letter-spacing: -.045em; }
.p-fits > span { display: block; }
.p-notes { margin-top: clamp(24px, 4vh, 40px); display: grid; gap: 8px; max-width: 46em; }
.p-notes li { color: var(--ink-70); line-height: 1.5; }
@media (max-width: 699px) {
  .p-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-chip { min-height: 140px; }
  .p-chip:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* an odd last tile spans the row */
}

.p-store { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding-top: clamp(40px, 8vh, 100px); padding-bottom: clamp(100px, 20vh, 240px); }
.p-store .k-biglink { font-size: clamp(36px, 6vw, 112px); }

.p-runway .k-runway-name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .4em; }
.p-runway-fit { letter-spacing: .12em; }

@media (prefers-reduced-motion: reduce) {
  .p-hud { animation: none; opacity: 1; transform: none; }
  .p-hint i { animation: none; }
  .p-chip { transform: none !important; }
}

/* =================== Round 12: the home's dark stage (both /filters/ and /filters/<id>/) ===================
   Same visual language as the home journey: a deep night ground with a blue horizon band, light-born type, mono HUD
   callouts with leader lines and spec chips, hero-finish 3D products. Tokens flip on the body so every kit rule
   (header, links, facts, footer, runway) follows. No soft discs anywhere: flares are thin horizontal lines. */
body:is([data-page="filters"], [data-page="filter"]) {
  --ink: #eef3f9; --ink-2: #c9d4e2; --ink-70: rgb(226 234 245 / .72); --ink-60: rgb(226 234 245 / .6); --ink-40: rgb(226 234 245 / .4); --ink-12: rgb(226 234 245 / .14);
  --steel: #8ea3bd; --blue: #5b9bff;
  --night-0: #03050a; --night-1: #070b13; --night-2: #0c1220;
  --gl-backdrop: #0a1120; --gl-backdrop-2: #03050a;
  /* the colour sits INSIDE the shorthand (a later shorthand resets background-color): it is propagated to the page
     canvas, which is what shows between the two snapshots of a view-transition morph (no grey/white wash) */
  color: var(--ink); color-scheme: dark;
  background: linear-gradient(180deg, var(--night-1) 0%, var(--night-0) 38%, var(--night-0) 100%) fixed var(--night-0);
  scrollbar-color: rgb(226 234 245 / .25) transparent;
}
body:is([data-page="filters"], [data-page="filter"]) ::selection { background: var(--blue); color: #fff; }
body:is([data-page="filters"], [data-page="filter"]) .k-header::before { background: rgb(5 8 14 / .72); }
body:is([data-page="filters"], [data-page="filter"]) .k-wordmark { color: var(--ink); }
body:is([data-page="filters"], [data-page="filter"]) .k-footer { color: rgb(200 212 228 / .62); }
body:is([data-page="filters"], [data-page="filter"]) .k-progress::after { background: linear-gradient(var(--ink), var(--blue)); }
/* honesty mark: the home's plain HUD line (crosshair + mono caps), no pill; docked top-left under the wordmark so it
   never sits on a title, the facts or a card caption */
body:is([data-page="filters"], [data-page="filter"]) .k-mark { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: rgb(226 234 245 / .78);
  top: calc(var(--header-h) + env(safe-area-inset-top) + 10px); bottom: auto; padding: 4px 0; margin: 0; text-shadow: 0 0 12px rgb(3 5 10 / .9); }
body[data-page="filters"] .k-mark { top: auto; bottom: max(18px, env(safe-area-inset-bottom)); }
@media (max-width: 699px) {
  body[data-page="filter"] .k-mark { top: calc(var(--header-h) + env(safe-area-inset-top) + 6px); }
  body[data-page="filters"] .k-mark { top: calc(var(--header-h) + env(safe-area-inset-top) + 70px); bottom: auto; }
}
/* CSS glass fallback (no WebGL / before the model is live): smoked dark glass, hairline rim */
body:is([data-page="filters"], [data-page="filter"]) .k-glass { background: linear-gradient(160deg, rgb(30 40 58 / .55), rgb(8 12 20 / .35));
  box-shadow: inset 0 0 0 1px rgb(226 234 245 / .12), 0 40px 60px -40px rgb(0 0 0 / .8); }
body:is([data-page="filters"], [data-page="filter"]) .k-glass img { filter: drop-shadow(0 22px 30px rgb(0 0 0 / .55)); }

/* light-born type: white core, cool falloff, a hairline flare through it */
.r-born { color: #f6f9fd; text-shadow: 0 0 1px rgb(255 255 255 / .6), 0 0 22px rgb(150 190 255 / .35), 0 0 60px rgb(90 140 255 / .18); }
/* the flare: a thin anamorphic streak + a wide faint horizon band (lines, never discs) */
.r-flare { position: absolute; left: -10vw; right: -10vw; height: 1px; pointer-events: none; z-index: -1;
  background: linear-gradient(90deg, rgb(120 170 255 / 0) 0%, rgb(140 185 255 / .55) 30%, #ffffff 50%, rgb(140 185 255 / .55) 70%, rgb(120 170 255 / 0) 100%);
  box-shadow: 0 0 8px 1px rgb(150 190 255 / .55), 0 0 40px 4px rgb(90 140 255 / .25); transform-origin: 50% 50%; animation: r-flare 1.6s var(--ease) .3s both; }
.r-flare::before { content: ''; position: absolute; left: 0; right: 0; top: -14vh; height: 28vh; background: linear-gradient(180deg, rgb(40 80 170 / 0), rgb(40 80 170 / .16) 50%, rgb(40 80 170 / 0));
  -webkit-mask: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
@keyframes r-flare { from { transform: scaleX(0); opacity: 0; } 40% { opacity: 1; } to { transform: scaleX(1); opacity: 1; } }

/* HUD callouts: crosshair on the product, 1 px leader, mono label + sub (the home's callouts.js look) */
.r-call { position: absolute; z-index: 3; display: flex; align-items: center; gap: 0; pointer-events: none; font: 500 var(--hud)/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-70);
  opacity: 0; animation: r-call-in .8s var(--ease) both; animation-delay: calc(1s + var(--k, 0) * .14s); }
.r-call i { position: relative; flex: none; width: var(--len, 110px); height: 1px; background: linear-gradient(90deg, rgb(226 234 245 / .75), rgb(226 234 245 / .3)); }
.r-call i::before { content: ''; position: absolute; top: -5px; width: 11px; height: 11px; opacity: .9;
  background: linear-gradient(#fff, #fff) 50% 0 / 1px 100% no-repeat, linear-gradient(#fff, #fff) 0 50% / 100% 1px no-repeat; }
.r-call span { display: grid; gap: 1px; white-space: nowrap; padding: 0 12px; }
.r-call b { color: #fff; font-weight: 600; }
.r-call em { font-style: normal; font-size: .92em; color: var(--ink-60); }
.r-call sup { font-size: .85em; color: var(--blue); margin-right: .6em; vertical-align: 0; }
.r-call.is-l { flex-direction: row-reverse; text-align: right; }
.r-call.is-l i { background: linear-gradient(270deg, rgb(226 234 245 / .75), rgb(226 234 245 / .3)); }
.r-call.is-l i::before { right: -5px; }
.r-call.is-r i::before { left: -5px; }
@keyframes r-call-in { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.r-call.is-l { animation-name: r-call-in-l; }
@keyframes r-call-in-l { from { opacity: 0; clip-path: inset(0 0 0 100%); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

/* spec chips (the home's spec block) */
.r-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.r-chips li { font: 500 var(--hud)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); padding: 7px 9px; border: 1px solid rgb(226 234 245 / .28); border-radius: 2px; background: rgb(8 13 22 / .45); white-space: nowrap; }
.r-chips li.is-wide { flex-basis: auto; }
.r-kicker { display: flex; align-items: center; gap: 10px; color: var(--ink); margin-bottom: 12px; }
.r-kicker::before { content: ''; width: 9px; height: 9px; flex: none; background: linear-gradient(currentColor, currentColor) 50% 0 / 1px 100% no-repeat, linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat; }

/* ---- index (dark) ---- */
body[data-page="filters"] .f-hero { min-height: 88vh; min-height: 88svh; overflow: hidden; }
body[data-page="filters"] .f-hero .r-flare { top: 46%; }
body[data-page="filters"] .f-title { font-size: clamp(72px, 15vw, 280px); line-height: .84; }
body[data-page="filters"] .f-title sup { color: var(--blue); }
body[data-page="filters"] .f-arrow { color: var(--ink-70); }
.f-hero-spec { position: absolute; top: calc(var(--header-h) + 6vh); right: var(--gutter); max-width: min(520px, 46vw); }
.f-hero-spec p:not(.r-kicker) { font: 400 clamp(15px, 1.1vw, 18px)/1.5 var(--sans); color: var(--ink-2); margin-bottom: 14px; max-width: 30em; }
@media (max-width: 699px) {
  .f-hero-spec { position: relative; top: auto; right: auto; max-width: none; margin-bottom: 7vh; }
  body[data-page="filters"] .f-hero { justify-content: flex-end; }
  body[data-page="filters"] .f-title { font-size: 26vw; }
}
body[data-page="filters"] .f-cams-bar::before { background: rgb(5 8 14 / .82); }
body[data-page="filters"] .f-card-meta::after { background: linear-gradient(#fff, #fff) 50% 0 / 1px 100% no-repeat, linear-gradient(#fff, #fff) 0 50% / 100% 1px no-repeat; }
body[data-page="filters"] .f-card-n { color: var(--blue); }
body[data-page="filters"] .f-slab { position: relative; }
/* each model stands on a thin stage line, lit from the side (no disc, no card) */
body[data-page="filters"] .f-slab::before { content: ''; position: absolute; left: 8%; right: 8%; bottom: 7%; height: 1px; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgb(140 185 255 / 0), rgb(170 205 255 / .55) 50%, rgb(140 185 255 / 0)); box-shadow: 0 0 14px rgb(120 170 255 / .35); }
body[data-page="filters"] .f-runway-ap { display: none; }

/* ---- product page (dark) ---- */
body[data-page="filter"] .p-hero .r-flare { top: 47%; }
body[data-page="filter"] .p-marquee { color: rgb(226 234 245 / .9); opacity: .16; }
body[data-page="filter"] .p-marquee .k-outline, body[data-page="filter"] .p-marquee.k-outline { -webkit-text-stroke-color: rgb(226 234 245 / .7); }
body[data-page="filter"] .p-name { font-size: clamp(48px, 7.4vw, 140px); }
body[data-page="filter"] .p-crumb { color: var(--blue); }
/* the hero model is the page: big, centred on the flare (W = its rect width; callout leaders end at --x × W from the centre) */
body[data-page="filter"] .p-hero { --W: min(64vh, 50vw, 780px); }
body[data-page="filter"] .p-hero-slab { width: var(--W); }
body[data-page="filter"] .p-hero-stage { padding-bottom: clamp(120px, 16vh, 190px); }
.p-calls { position: absolute; inset: 0; pointer-events: none; }
.p-calls .r-call { top: var(--y); }
.p-calls .r-call.is-r { left: calc(50% + var(--x) * var(--W)); }
.p-calls .r-call.is-l { right: calc(50% + var(--x) * var(--W)); }
.p-spec { margin-top: clamp(36px, 6vh, 64px); max-width: 640px; }
.p-spec p:not(.r-kicker) { font: 400 clamp(14px, 1vw, 17px)/1.5 var(--sans); color: var(--ink-2); margin-bottom: 14px; }
/* index hero model: right of centre, over the flare */
body[data-page="filters"] .f-hero { --W: min(68vh, 44vw, 720px); }
.f-hero-model { position: absolute; z-index: 1; right: 6vw; top: calc(var(--header-h) + 2vh); width: var(--W); aspect-ratio: 4 / 5; max-height: calc(100% - var(--header-h) - 4vh); touch-action: pan-y; cursor: grab; }
body[data-page="filters"] .f-calls .r-call.is-l { right: calc(6vw + var(--W) * (.5 + var(--x))); }
@media (min-width: 700px) { body[data-page="filters"] .f-hero-spec { right: auto; left: var(--gutter); } }
@media (max-width: 899px) { body[data-page="filters"] .f-calls { display: none; } }
@media (max-width: 699px) {
  body[data-page="filters"] .f-hero { --W: 80vw; }
  .f-hero-model { right: 10vw; top: calc(var(--header-h) + 96px); width: 80vw; aspect-ratio: 1; }
  body[data-page="filter"] .p-hero { --W: min(76vw, 44vh); }
  body[data-page="filter"] .p-hero-stage { padding-bottom: 300px; }
  body[data-page="filters"] .f-hero { min-height: 120svh; }
}
@media (max-width: 899px) {
  .p-calls .r-call { --len: 34px; }
  .p-calls .r-call.is-r { left: auto; right: var(--gutter); }
  .p-calls .r-call.is-l { right: auto; left: var(--gutter); flex-direction: row; text-align: left; }
  .p-calls .r-call.is-l i { display: none; }
  .p-calls .r-call.is-r i { display: none; }
  .p-calls .r-call span { padding: 0; }
  .p-calls .r-call:nth-child(n + 3) { display: none; }
  .p-calls .r-call:nth-child(1) { top: calc(var(--header-h) + 30px); }
  .p-calls .r-call:nth-child(2) { top: calc(var(--header-h) + 30px); }
  .p-calls .r-call.is-l, .p-calls .r-call.is-r { max-width: 44vw; }
  /* phones: 01 always top-left, 02 top-right, whatever side they take on desktop */
  .p-calls .r-call:nth-child(1) { left: var(--gutter); right: auto; flex-direction: row; text-align: left; }
  .p-calls .r-call:nth-child(2) { right: var(--gutter); left: auto; flex-direction: row-reverse; text-align: right; }
  .p-calls .r-call span { white-space: normal; }
}
.p-mob-chips { display: none; }
@media (max-width: 899px) { .p-mob-chips { display: flex; margin-top: 4px; } }
html.no-webgl .p-calls { display: none; }
body[data-page="filter"] .p-hud { display: none; }
body[data-page="filter"] .p-study-frame { box-shadow: 0 40px 90px -40px rgb(0 0 0 / .9), 0 0 0 1px rgb(226 234 245 / .14); }
body[data-page="filter"] .p-chip { color: var(--ink); }
body[data-page="filter"] .p-chip-glass.k-glass { border-radius: 3px; background: linear-gradient(180deg, rgb(16 24 38 / .7), rgb(6 10 18 / .5)); box-shadow: inset 0 0 0 1px rgb(226 234 245 / .16); }
body[data-page="filter"] .p-chip-glass.k-glass::after { display: none; }
body[data-page="filter"] .p-chip b { color: #fff; }
body[data-page="filter"] .p-line-big { color: #f4f8fd; }
@media (prefers-reduced-motion: reduce) { .r-flare, .r-call { animation: none; opacity: 1; } }
/* round 12: the big lines, the fits, the store link and the runway names are light-born too */
body:is([data-page="filters"], [data-page="filter"]) :is(.p-line-big, .p-fits, .p-store .k-biglink, .k-runway-name) { color: #f6f9fd; text-shadow: 0 0 22px rgb(150 190 255 / .28), 0 0 60px rgb(90 140 255 / .14); }
body:is([data-page="filters"], [data-page="filter"]) .k-runway-line::after { background: linear-gradient(90deg, rgb(140 185 255 / .2), #fff 70%, var(--blue)); box-shadow: 0 0 10px rgb(150 190 255 / .6); }
/* round 12 studies: the frame is a dark stage with a crisp mono HUD readout (light-born), no soft rings */
body[data-page="filter"] .p-study-frame { background: #020306; }
body[data-page="filter"] .p-readout { font: 400 clamp(24px, 2.9vw, 50px)/1 var(--mono); letter-spacing: -.03em; color: #f6f9fd;
  text-shadow: 0 0 18px rgb(150 190 255 / .35), 0 0 46px rgb(90 140 255 / .18); }
body[data-page="filter"] .p-readout small { color: rgb(200 220 255 / .82); }
body[data-page="filter"] .p-readout .p-sep { color: var(--blue); }
body[data-page="filter"] .p-study-title { font-family: var(--mono); letter-spacing: .16em; color: rgb(228 238 252 / .9); text-shadow: 0 1px 10px rgb(1 3 8 / .9); }
body[data-page="filter"] .p-readout small { text-shadow: 0 1px 10px rgb(1 3 8 / .9); }
body[data-page="filter"] .p-hint i { border-radius: 2px; width: 22px; height: 22px; }
body[data-page="filter"] .p-hint i::after { border-radius: 0; width: 4px; height: 4px; margin: -2px; box-shadow: 0 0 8px #fff; }
body[data-page="filter"] .p-study-hud { background: linear-gradient(0deg, rgb(1 3 8 / .78), rgb(1 3 8 / .42) 45%, rgb(1 3 8 / 0) 100%); padding-top: 60px; border-radius: 0 0 clamp(14px, 1.6vw, 26px) clamp(14px, 1.6vw, 26px); }

/* =================== Round 13 · composition (quiet, premium) ===================
   One focal point per frame, a 12-column grid, calm negative space, light display type (Inter 300, tight) against
   small wide-tracked mono marks, crisp light instead of glow. Index = a hairline catalogue (3 × 3 on desktop, 2-up on
   phones); filter pages = a centred hero standing on a floor line, editorial label | content sections. */
body:is([data-page="filters"], [data-page="filter"]) {
  --g12: repeat(12, minmax(0, 1fr)); --col-gap: clamp(16px, 1.6vw, 28px);
  --hair: rgb(226 234 245 / .11); --hair-hi: rgb(226 234 245 / .26);
  --fw-display: 300;
}
/* light-born type, but crisp: a hairline core and a short cool falloff (no smudge) */
body:is([data-page="filters"], [data-page="filter"]) :is(.r-born, .p-line-big, .p-fits, .p-store .k-biglink, .k-runway-name) {
  text-shadow: 0 0 1px rgb(255 255 255 / .35), 0 0 24px rgb(140 180 255 / .16);
}
body:is([data-page="filters"], [data-page="filter"]) :is(.k-giant, .p-name, .p-line-big, .p-fits, .p-store .k-biglink, .k-runway-name) {
  font-weight: var(--fw-display); letter-spacing: -.055em;
}
/* the outline marquee and the drifting arrows were gimmicks competing with the product: gone */
body[data-page="filter"] .p-marquee { display: none; }

/* ---- /filters/ hero: the word stands behind the product, the product is the one focal point ---- */
body[data-page="filters"] .f-hero { --W: min(58vh, 36vw, 620px); min-height: 100vh; min-height: 100svh; justify-content: flex-end; padding-bottom: clamp(18px, 3vh, 36px); }
body[data-page="filters"] .f-hero-model { left: 50%; right: auto; transform: translateX(-50%); top: calc(var(--header-h) + 3vh); width: var(--W); max-height: none; }
body[data-page="filters"] .f-title { position: relative; z-index: -1; justify-content: center; font-size: clamp(96px, 22.5vw, 420px); line-height: .8; margin: 0 auto; letter-spacing: -.065em; }
body[data-page="filters"] .f-title sup { position: absolute; top: .16em; right: -1.4em; margin: 0; font-size: clamp(11px, .8vw, 13px); letter-spacing: .2em; }
body[data-page="filters"] .f-arrow { position: absolute; right: calc(-1 * (50vw - 50%) + var(--gutter)); bottom: .06em; font: 200 clamp(22px, 1.8vw, 30px)/1 var(--sans); transform: none; color: var(--ink-60); margin: 0; }
body[data-page="filters"] .f-hero .r-flare { top: auto; bottom: clamp(150px, 24vh, 250px); opacity: .7; }
body[data-page="filters"] .f-hero-spec { top: calc(var(--header-h) + 5vh); left: auto; right: var(--gutter); max-width: min(330px, 24vw); }
body[data-page="filters"] .f-hero-spec p:not(.r-kicker) { font-size: clamp(13px, .95vw, 15px); line-height: 1.6; color: var(--ink-60); }
body[data-page="filters"] .f-hero-spec .r-chips { display: none; }
body[data-page="filters"] .f-calls .r-call.is-l { right: calc(50% + var(--W) * var(--x)); }

/* ---- camera row: small precise caps on a hairline, not big grey words ---- */
body[data-page="filters"] .f-cams { gap: 6px clamp(22px, 2.6vw, 44px); padding: 18px var(--gutter) 18px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
body[data-page="filters"] .f-cams a { font: 500 var(--micro)/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; min-height: 44px; align-items: center; padding: 0; }
body[data-page="filters"] .f-cams a sup { font-size: 9px; color: var(--blue); margin-top: -8px; }
body[data-page="filters"] .f-cams-bar { margin-bottom: 0; }
body[data-page="filters"] .f-cams-bar.is-stuck .f-cams { border-top-color: transparent; }

/* ---- the catalogue: a hairline 3 × 3 vitrine, every cell the same plinth, no stagger ---- */
body[data-page="filters"] .f-grid-wrap { padding: 0 0 clamp(120px, 22vh, 260px); }
body[data-page="filters"] .f-grid { max-width: none; gap: 0; border-bottom: 1px solid var(--hair); }
body[data-page="filters"] .f-card { margin-top: 0 !important; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
body[data-page="filters"] .f-card:nth-child(3n) { border-right: 0; }
body[data-page="filters"] .f-card-link { position: relative; padding: clamp(18px, 2vw, 32px) clamp(18px, 2vw, 32px) clamp(22px, 2.6vw, 40px); }
/* a crosshair on every grid intersection (the cell's top-left corner) */
body[data-page="filters"] .f-card::before { content: ''; position: absolute; left: -6px; top: -6px; width: 11px; height: 11px; z-index: 2; pointer-events: none; opacity: .5;
  background: linear-gradient(var(--ink), var(--ink)) 50% 0 / 1px 100% no-repeat, linear-gradient(var(--ink), var(--ink)) 0 50% / 100% 1px no-repeat; }
body[data-page="filters"] .f-slab { aspect-ratio: 1 / 1; }
body[data-page="filters"] .f-slab::before { left: 18%; right: 18%; bottom: 9%; opacity: .55; }
body[data-page="filters"] .f-card-meta { position: static; grid-template-columns: 1fr auto; gap: 10px 16px; padding-top: clamp(10px, 1.6vh, 18px); }
body[data-page="filters"] .f-card-meta::before, body[data-page="filters"] .f-card-meta::after { display: none; }
body[data-page="filters"] .f-card-n { position: absolute; top: clamp(18px, 2vw, 32px); left: clamp(18px, 2vw, 32px); grid-row: auto; letter-spacing: .2em; }
body[data-page="filters"] .f-card-name { grid-column: 1 / -1; font: 380 clamp(22px, 1.9vw, 34px)/1.05 var(--sans); letter-spacing: -.04em; }
body[data-page="filters"] .f-card-fit { grid-column: 1; letter-spacing: .14em; }
body[data-page="filters"] .f-card-type { grid-column: 2; text-align: right; letter-spacing: .14em; color: var(--ink-40); }
/* hover: the cell's hairlines light up (no fill: the WebGL product is drawn behind the DOM) */
body[data-page="filters"] .f-card-link::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgb(226 234 245 / 0); transition: box-shadow .6s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  body[data-page="filters"] .f-card-link:hover::after { box-shadow: inset 0 0 0 1px var(--hair-hi); }
  body[data-page="filters"] .f-card-link:hover .f-card-n { color: #fff; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  body[data-page="filters"] .f-card:nth-child(3n) { border-right: 1px solid var(--hair); }
  body[data-page="filters"] .f-card:nth-child(2n) { border-right: 0; }
}

/* ---- filter page hero: centred, smaller, standing on a floor line of light ---- */
body[data-page="filter"] .p-hero { --W: min(52vh, 40vw, 620px); }
body[data-page="filter"] .p-hero-stage { padding-top: calc(var(--header-h) + 3vh); padding-bottom: clamp(170px, 24vh, 250px); }
body[data-page="filter"] .p-hero .r-flare { top: auto; bottom: clamp(160px, 23vh, 240px); }
body[data-page="filter"] .p-hero .r-flare::before { top: 0; height: 22vh; background: linear-gradient(180deg, rgb(60 100 190 / .16), rgb(40 80 170 / 0)); }
body[data-page="filter"] .p-hero-foot { align-items: flex-end; padding-bottom: clamp(26px, 5vh, 56px); }
body[data-page="filter"] .p-name { font-size: clamp(52px, 7.6vw, 150px); line-height: .9; }
body[data-page="filter"] .p-crumb { letter-spacing: .2em; margin-bottom: 18px; }
body[data-page="filter"] .p-facts { gap: 10px clamp(28px, 3.4vw, 64px); }
body[data-page="filter"] .p-facts dt { letter-spacing: .18em; }
body[data-page="filter"] .p-facts dd { font-size: clamp(13px, .95vw, 15px); color: var(--ink-2); }
body[data-page="filter"] .p-facts > div { border-top: 1px solid var(--hair-hi); padding-top: 12px; min-width: 9em; }

/* ---- statement section: big light statement left (cols 1–7), the spec sheet right (cols 9–12) ---- */
body[data-page="filter"] .p-line { display: grid; grid-template-columns: var(--g12); column-gap: var(--col-gap); align-items: end; padding-top: clamp(140px, 30vh, 320px); padding-bottom: clamp(120px, 24vh, 280px); }
body[data-page="filter"] .p-line-big { grid-column: 1 / span 8; grid-row: 1; max-width: 11em; font-size: clamp(48px, 6.8vw, 132px); line-height: .92; }
body[data-page="filter"] .p-use { grid-column: 1 / span 5; grid-row: 2; margin-top: clamp(28px, 5vh, 56px); font-size: clamp(15px, 1.1vw, 19px); line-height: 1.6; color: var(--ink-60); }
body[data-page="filter"] .p-spec { grid-column: 9 / -1; grid-row: 1 / span 2; align-self: end; margin: 0; padding-top: 18px; border-top: 1px solid var(--hair-hi); }
body[data-page="filter"] .p-spec p:not(.r-kicker) { font-size: clamp(13px, .95vw, 15px); line-height: 1.6; color: var(--ink-60); }
body[data-page="filter"] .p-spec .r-chips { gap: 0; flex-direction: column; flex-wrap: nowrap; margin-top: 20px; }
body[data-page="filter"] .p-spec .r-chips li { border: 0; border-top: 1px solid var(--hair); border-radius: 0; background: none; padding: 11px 0; color: var(--ink-70); white-space: normal; }

/* ---- study: more air round the frame, a calm hold ---- */
body[data-page="filter"] .p-study-frame { border-radius: 4px; }
body[data-page="filter"] .p-study-hud { border-radius: 0 0 4px 4px; }
body[data-page="filter"] .p-hint i { animation-duration: 3.6s; }

/* ---- strengths + fits: editorial label | content rows on hairlines ---- */
body[data-page="filter"] .p-fit { display: grid; grid-template-columns: var(--g12); column-gap: var(--col-gap); padding-top: clamp(140px, 26vh, 300px); padding-bottom: clamp(100px, 18vh, 220px); }
body[data-page="filter"] .p-fit > h2 { grid-column: 1 / span 3; padding-top: 18px; border-top: 1px solid var(--hair-hi); margin: 0; letter-spacing: .2em; }
body[data-page="filter"] .p-fit > :not(h2) { grid-column: 4 / -1; }
body[data-page="filter"] #p-fit-title, body[data-page="filter"] .p-chips { grid-row: 1; }
body[data-page="filter"] .p-fits-title, body[data-page="filter"] .p-fits { grid-row: 2; }
body[data-page="filter"] .p-notes { grid-row: 3; }
body[data-page="filter"] .p-chips { margin: 0 0 clamp(90px, 16vh, 180px); gap: 0; border-top: 1px solid var(--hair-hi); }
body[data-page="filter"] .p-chip { min-height: 0; padding: 18px clamp(14px, 1.6vw, 28px) 0; align-content: start; gap: 14px; border-left: 1px solid var(--hair); }
body[data-page="filter"] .p-chip:first-child { border-left: 0; padding-left: 0; }
body[data-page="filter"] .p-chip-glass.k-glass { display: none; }
body[data-page="filter"] .p-chip b { font: 300 clamp(40px, 4.6vw, 92px)/.95 var(--sans); letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
body[data-page="filter"] .p-fits { padding-top: 14px; border-top: 1px solid var(--hair-hi); font-size: clamp(44px, 6.4vw, 124px); line-height: .96; }
body[data-page="filter"] .p-notes { margin-top: clamp(40px, 7vh, 72px); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); gap: 0 var(--col-gap); max-width: none; }
body[data-page="filter"] .p-notes li { padding: 12px 0; border-top: 1px solid var(--hair); color: var(--ink-60); }

/* ---- store + runway ---- */
body[data-page="filter"] .p-store { display: grid; grid-template-columns: var(--g12); column-gap: var(--col-gap); align-items: end; border-top: 1px solid var(--hair); padding-top: clamp(80px, 14vh, 160px); }
body[data-page="filter"] .p-store .k-biglink { grid-column: 1 / span 9; font-size: clamp(40px, 5.6vw, 108px); }
body[data-page="filter"] .p-store-cam { grid-column: 10 / -1; justify-self: end; letter-spacing: .16em; }
body:is([data-page="filters"], [data-page="filter"]) .k-runway-name { font-size: clamp(48px, 7vw, 132px); }

/* ---- phones ---- */
@media (max-width: 699px) {
  body:is([data-page="filters"], [data-page="filter"]) { --col-gap: 12px; }
  /* index hero: product on top, the word under it, one short line */
  body[data-page="filters"] .f-hero { --W: 84vw; min-height: 100svh; }
  body[data-page="filters"] .f-hero-model { top: calc(var(--header-h) + 34px); width: var(--W); aspect-ratio: 1; }
  body[data-page="filters"] .f-title { order: 1; font-size: 31vw; margin-bottom: 26px; }
  body[data-page="filters"] .f-title sup { right: -1.1em; }
  body[data-page="filters"] .f-arrow { display: none; }
  body[data-page="filters"] .f-hero-spec { order: 2; position: relative; top: auto; right: auto; max-width: none; margin: 0; padding-top: 14px; border-top: 1px solid var(--hair); }
  body[data-page="filters"] .f-hero .r-flare { bottom: calc(100svh - var(--header-h) - 34px - 84vw - 4px); }
  body[data-page="filters"] .f-cams { padding-left: var(--gutter); gap: 24px; border-top: 0; }
  body[data-page="filters"] .f-cams a { font-size: 11px; }
  /* 2-up catalogue */
  body[data-page="filters"] .f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page="filters"] .f-card:nth-child(n) { border-right: 1px solid var(--hair); }
  body[data-page="filters"] .f-card:nth-child(2n) { border-right: 0; }
  body[data-page="filters"] .f-card:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
  body[data-page="filters"] .f-card-link { padding: 14px 14px 18px; }
  body[data-page="filters"] .f-card-n { top: 14px; left: 14px; }
  body[data-page="filters"] .f-card-name { font-size: 18px; letter-spacing: -.03em; }
  body[data-page="filters"] .f-card-type { display: none; }
  body[data-page="filters"] .f-card-fit { font-size: 9px; letter-spacing: .12em; }
  body[data-page="filters"] .f-card:last-child:nth-child(odd) .f-slab { aspect-ratio: 16 / 10; }
  /* filter page */
  body[data-page="filter"] .p-hero { --W: min(78vw, 46vh); }
  body[data-page="filter"] .p-hero-stage { padding-bottom: 290px; }
  body[data-page="filter"] .p-hero .r-flare { bottom: 300px; }
  body[data-page="filter"] .p-mob-chips { display: none; }
  body[data-page="filter"] .p-name { font-size: clamp(44px, 13.5vw, 64px); }
  body[data-page="filter"] .p-facts { width: 100%; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
  body[data-page="filter"] .p-line { padding-top: 120px; padding-bottom: 110px; }
  body[data-page="filter"] .p-line-big { grid-column: 1 / -1; font-size: 15vw; }
  body[data-page="filter"] .p-use { grid-column: 1 / -1; }
  body[data-page="filter"] .p-spec { grid-column: 1 / -1; grid-row: 3; margin-top: 56px; }
  body[data-page="filter"] .p-fit > h2 { grid-column: 1 / -1; border-top: 0; padding-top: 0; margin-bottom: 14px; }
  body[data-page="filter"] .p-fit > :not(h2) { grid-column: 1 / -1; }
  body[data-page="filter"] #p-fit-title { grid-row: 1; } body[data-page="filter"] .p-chips { grid-row: 2; }
  body[data-page="filter"] .p-fits-title { grid-row: 3; } body[data-page="filter"] .p-fits { grid-row: 4; } body[data-page="filter"] .p-notes { grid-row: 5; }
  body[data-page="filter"] .p-chip { padding: 16px 12px 18px; border-bottom: 1px solid var(--hair); }
  body[data-page="filter"] .p-chip:nth-child(odd) { border-left: 0; padding-left: 0; }
  body[data-page="filter"] .p-chip b { font-size: 11vw; }
  body[data-page="filter"] .p-fits { font-size: 13vw; }
  body[data-page="filter"] .p-notes { grid-template-columns: 1fr; }
  body[data-page="filter"] .p-store .k-biglink { grid-column: 1 / -1; font-size: 11vw; }
  body[data-page="filter"] .p-store-cam { grid-column: 1 / -1; justify-self: start; margin-top: 18px; }
}
/* round 13 tuning after the first shots */
body[data-page="filters"] .f-hero { --W: min(50vh, 31vw, 560px); }
body[data-page="filters"] .f-hero-model { top: calc(var(--header-h) + 7vh); }
@media (max-width: 699px) {
  body[data-page="filters"] .f-hero { --W: 80vw; }
  body[data-page="filters"] .f-hero-model { top: calc(var(--header-h) + 78px); }
  body[data-page="filter"] .p-hero-foot { align-items: flex-start; }
  body[data-page="filter"] .p-chip b { font-size: 8.6vw; }
}

/* ---- round 13 · the close-up (filter-page.js closeUp): a pinned material study, one fact at a time ---- */
.p-close { position: relative; }
.p-close.is-live { height: calc(100vh + var(--steps, 3) * 75vh); height: calc(100svh + var(--steps, 3) * 75svh); }
.p-close-pin { display: grid; grid-template-columns: var(--g12); column-gap: var(--col-gap); align-items: center; padding: clamp(80px, 14vh, 160px) var(--gutter); }
.p-close.is-live .p-close-pin { position: sticky; top: 0; height: 100vh; height: 100svh; padding: calc(var(--header-h) + 4vh) var(--gutter) 6vh; }
.p-close-copy { grid-column: 1 / span 4; position: relative; z-index: 1; }
.p-close-stage { grid-column: 5 / -1; height: 80vh; height: 80svh; pointer-events: auto; touch-action: pan-y; }
.p-close:not(.is-live) .p-close-stage { display: none; }
.p-close:not(.is-live) .p-close-copy { grid-column: 1 / -1; }
.p-close-kicker { padding-top: 16px; border-top: 1px solid var(--hair-hi); margin-bottom: clamp(48px, 10vh, 110px); letter-spacing: .2em; }
.p-close-list { display: grid; gap: 40px; }
.p-close.is-live .p-close-list { position: relative; display: block; height: clamp(180px, 26vh, 260px); }
.p-close-step { display: grid; align-content: start; gap: 20px; }
.p-close.is-live .p-close-step { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(22px); filter: blur(4px);
  transition: opacity .9s var(--ease), transform 1.2s var(--ease), filter .9s var(--ease); }
.p-close.is-live .p-close-step.is-on { opacity: 1; transform: none; filter: none; transition-delay: .12s; }
.p-close-n { color: var(--blue); letter-spacing: .22em; }
.p-close-t { font: 300 clamp(38px, 3.9vw, 76px)/.98 var(--sans); letter-spacing: -.05em; color: #f6f9fd; text-shadow: 0 0 1px rgb(255 255 255 / .35), 0 0 24px rgb(140 180 255 / .14); }
.p-close-s { letter-spacing: .16em; color: var(--ink-60); max-width: 26em; }
.p-close-meter { display: none; }
.p-close.is-live .p-close-meter { display: grid; gap: 14px; margin-top: clamp(40px, 8vh, 90px); }
.p-close-count { letter-spacing: .22em; color: var(--ink-40); }
.p-close-count b { color: var(--ink); font-weight: 500; }
.p-close-meter i { position: relative; display: grid; grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr)); gap: 6px; max-width: 280px; }
.p-close-meter em { height: 1px; background: var(--hair-hi); }
.p-close-meter i::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; transform-origin: 0 50%; transform: scaleX(var(--k, 0));
  background: linear-gradient(90deg, rgb(226 234 245 / .5), #fff); box-shadow: 0 0 8px rgb(150 190 255 / .5); }
@media (max-width: 699px) {
  .p-close.is-live .p-close-pin { grid-template-rows: auto auto; align-content: center; row-gap: 12px; padding: calc(var(--header-h) + 8px) var(--gutter) 4vh; }
  .p-close-stage { grid-column: 1 / -1; grid-row: 1; height: 46vh; height: 46svh; }
  .p-close-copy { grid-column: 1 / -1; grid-row: 2; }
  .p-close-kicker { margin-bottom: 22px; }
  .p-close.is-live .p-close-list { height: 150px; }
  .p-close-t { font-size: 10vw; }
  .p-close.is-live .p-close-meter { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .p-close.is-live .p-close-step, .p-close.is-live .p-close-step.is-on { transition: none; filter: none; transform: none; }
}

/* =================== Round 13 · aligned to the art-direction BRIEF ("Black glass, one light") ===================
   §2 tokens, display type at 520 with a gradient fill (no halos), the product on the optical axis (≈ .62 W), the type on
   the baseline band (cols 1–6, ≈ .80 H), F2 index hero, F3 gallery (2 large columns, a full-width feature every 5th),
   F4 hero (ghost name engraved and cropped, 2 callouts, facts as a hairline grid under the title). */
body:is([data-page="filters"], [data-page="filter"]) {
  --void: #05070b; --stage: #0b0f15; --line: rgb(230 239 250 / .14); --ice-ink: #eef3fa; --ice: #a9c2ea; --steel: #8a9bb0; --state-blue: #5b8cff;
  --blue: var(--state-blue); --hair: rgb(230 239 250 / .1); --hair-hi: var(--line);
  --night-0: var(--void); --night-1: var(--stage); --gl-backdrop: #0b0f15; --gl-backdrop-2: #05070b;
  --fw-display: 520; --axis: 62vw;
  background: linear-gradient(180deg, var(--stage) 0%, var(--void) 42%, var(--void) 100%) fixed var(--void);
}
body:is([data-page="filters"], [data-page="filter"]) :is(.k-giant, .p-name, .p-line-big, .p-fits, .p-close-t, .k-runway-name > span:first-child, .f-card-name) { letter-spacing: -.05em; text-shadow: none; }
body:is([data-page="filters"], [data-page="filter"]) :is(.p-name > span, .p-close-t, .k-runway-name > span:first-child),
body:is([data-page="filters"], [data-page="filter"]) :is(.k-giant, .p-line-big, .p-fits) .k-c {
  background: linear-gradient(180deg, var(--ice-ink) 35%, var(--ice) 115%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
body:is([data-page="filters"], [data-page="filter"]) :is(.p-store .k-biglink, .r-born) { text-shadow: none; }
body:is([data-page="filters"], [data-page="filter"]) .k-micro { color: var(--steel); }

/* ---- F2 · /filters/ hero: one statement ---- */
body[data-page="filters"] .f-hero { --W: min(60vh, 42vw, 640px); justify-content: flex-end; padding-bottom: clamp(28px, 6vh, 64px); }
body[data-page="filters"] .f-hero .r-flare, body[data-page="filters"] .f-calls, body[data-page="filters"] .f-hero-spec .r-kicker { display: none; }
body[data-page="filters"] .f-hero-model { left: calc(var(--axis) - var(--W) / 2); transform: none; top: calc(var(--header-h) + (100svh - var(--header-h) - var(--W) * 1.25) / 2); }
body[data-page="filters"] .f-title { order: 1; z-index: auto; justify-content: flex-start; margin: 0; font-size: clamp(64px, 11vw, 220px); line-height: .9; letter-spacing: -.05em; }
body[data-page="filters"] .f-title sup { position: relative; top: .3em; right: auto; margin-left: .6em; color: var(--state-blue); }
body[data-page="filters"] .f-arrow { display: none; }
body[data-page="filters"] .f-hero-spec { order: 2; position: relative; top: auto; right: auto; left: auto; max-width: 36em; margin: clamp(18px, 3vh, 30px) 0 0; padding: 0; border: 0; }
body[data-page="filters"] .f-hero-spec p:not(.r-kicker) { font-size: 17px; line-height: 1.5; letter-spacing: .005em; color: var(--steel); margin: 0; }

/* ---- F3 · the gallery: 2 large plinths per row, a full-width feature every 5th ---- */
@media (min-width: 700px) {
  body[data-page="filters"] .f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page="filters"] .f-card:nth-child(n) { border-right: 1px solid var(--hair); }
  body[data-page="filters"] .f-card:nth-child(5n + 2), body[data-page="filters"] .f-card:nth-child(5n + 4) { border-right: 0; }
  body[data-page="filters"] .f-card:nth-child(5n) { grid-column: 1 / -1; border-right: 0; }
  body[data-page="filters"] .f-slab { aspect-ratio: 16 / 11; }
  body[data-page="filters"] .f-card:nth-child(5n) .f-slab { aspect-ratio: 21 / 8; }
}
body[data-page="filters"] .f-card-link { padding: clamp(22px, 2.6vw, 48px); }
body[data-page="filters"] .f-card-meta { grid-template-columns: 1fr auto; align-items: baseline; }
body[data-page="filters"] .f-card-name { grid-column: 1; font: 520 clamp(22px, 2vw, 32px)/1.1 var(--sans); letter-spacing: -.03em; color: var(--ice-ink); }
body[data-page="filters"] .f-card-fit { grid-column: 2; grid-row: 1; text-align: right; }
body[data-page="filters"] .f-card-type { display: none; }
/* a slow light sweep crosses the plinth on hover / focus (screen blend over the product, never a fill) */
body[data-page="filters"] .f-card-link::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; mix-blend-mode: screen; opacity: 0;
  background: linear-gradient(105deg, transparent 35%, rgb(169 194 234 / .1) 48%, rgb(238 243 250 / .16) 50%, rgb(169 194 234 / .1) 52%, transparent 65%) -60% 0 / 220% 100% no-repeat; }
@media (hover: hover) and (pointer: fine) {
  body[data-page="filters"] .f-card-link:hover::before { opacity: 1; background-position: 160% 0; transition: background-position 1.4s var(--ease), opacity .3s; }
}
body[data-page="filters"] .f-card-link:focus-visible { outline: 2px solid var(--state-blue); outline-offset: -2px; }

/* ---- F4 · filter page hero: product on the optical axis, type on the baseline band ---- */
body[data-page="filter"] .p-hero { --W: min(58vh, 44vw, 660px); }
body[data-page="filter"] .p-hero-stage { place-items: center start; padding: calc(var(--header-h) + 2vh) 0 6vh calc(var(--axis) - var(--W) / 2); }
body[data-page="filter"] .p-hero .r-flare { display: none; }
body[data-page="filter"] .p-marquee { display: block; top: 50%; font-size: clamp(200px, 30vw, 560px); font-weight: 520; letter-spacing: -.05em; opacity: 1; color: transparent; }
body[data-page="filter"] .p-marquee .k-marquee-track { -webkit-text-stroke: 1px rgb(230 239 250 / .07); text-shadow: 0 -1px 0 rgb(230 239 250 / .05); }
body[data-page="filter"] .p-hero-foot { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 22px; top: auto; padding-bottom: clamp(28px, 7vh, 72px); max-width: calc(var(--axis) - var(--W) / 2 + var(--W) * .08); }
body[data-page="filter"] .p-name { font-size: clamp(44px, 5.4vw, 104px); line-height: .95; }
body[data-page="filter"] .p-facts { width: min(100%, 560px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
body[data-page="filter"] .p-calls .r-call:nth-child(n + 3) { display: none; }
body[data-page="filter"] .p-calls .r-call.is-r { left: calc(var(--axis) + var(--x) * var(--W)); }
body[data-page="filter"] .p-calls .r-call.is-l { right: calc(100% - var(--axis) + var(--x) * var(--W)); }
@media (prefers-reduced-motion: reduce) { body[data-page="filter"] .p-marquee .k-marquee-track { transform: none !important; } }

/* ---- phones: the product in the top half on the axis, the title meets it ---- */
@media (max-width: 699px) {
  body:is([data-page="filters"], [data-page="filter"]) { --axis: 50vw; }
  body[data-page="filters"] .f-hero { --W: 78vw; min-height: 0; padding-top: calc(var(--header-h) + 78vw + 70px); }
  body[data-page="filters"] .f-hero-model { left: 11vw; top: calc(var(--header-h) + 44px); aspect-ratio: 1; }
  body[data-page="filters"] .f-title { font-size: 25vw; }
  body[data-page="filters"] .f-hero-spec p:not(.r-kicker) { font-size: 15px; }
  body[data-page="filters"] .f-grid { grid-template-columns: 1fr; }
  body[data-page="filters"] .f-card:nth-child(n) { border-right: 0; grid-column: auto; }
  body[data-page="filters"] .f-slab, body[data-page="filters"] .f-card:last-child:nth-child(odd) .f-slab { aspect-ratio: 5 / 4; }
  body[data-page="filters"] .f-card-link { padding: 18px var(--gutter) 24px; }
  body[data-page="filters"] .f-card-n { left: var(--gutter); top: 18px; }
  body[data-page="filters"] .f-card-name { font-size: 22px; }
  body[data-page="filters"] .f-card-fit { font-size: 10px; }
  body[data-page="filter"] .p-hero { --W: min(80vw, 48vh); }
  body[data-page="filter"] .p-hero-stage { place-items: start center; padding: calc(var(--header-h) + 64px) 0 0; }
  body[data-page="filter"] .p-hero-foot { max-width: none; }
  body[data-page="filter"] .p-marquee { top: 30%; font-size: 52vw; }
  body[data-page="filter"] .p-facts { grid-template-columns: 1fr 1fr; }
}
body[data-page="filter"] .p-chips[style*="--n:5"] .p-chip b, body[data-page="filter"] .p-chips[style*="--n:4"] .p-chip b { font-size: clamp(30px, 3.3vw, 72px); }
@media (max-width: 899px) {
  body[data-page="filter"] .p-calls .r-call:nth-child(1) { left: var(--gutter); right: auto; }
  body[data-page="filter"] .p-calls .r-call:nth-child(2) { right: var(--gutter); left: auto; }
}
@media (max-width: 699px) { body[data-page="filter"] .p-chips .p-chip b { font-size: 8.6vw; } }

/* =================== Round 14 · filters lane, round 2: light display type, slow close-up, composed endings ===================
   Coordinator: display headlines are LIGHT site-wide (weight 300, tracking −0.03em, solid ice ink, no gradient or glow
   fills); micro type = small mono caps, wide tracking, on the grid. Endings: store band → 70 vh runway → footer. */
body:is([data-page="filters"], [data-page="filter"]) { --fw-display: 300; }
body:is([data-page="filters"], [data-page="filter"]) :is(.k-giant, .f-title, .p-name, .p-line-big, .p-fits, .p-close-t, .k-runway-name, .p-chip b, .p-store .k-biglink) {
  font-weight: 300; letter-spacing: -.03em; color: var(--ice-ink); text-shadow: none; }
/* the gradient text fills of round 13 are gone: solid ice ink */
body:is([data-page="filters"], [data-page="filter"]) :is(.p-name > span, .p-close-t, .k-runway-name > span:first-child, .k-giant .k-c, .p-line-big .k-c, .p-fits .k-c, .f-title .k-c) {
  background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; color: var(--ice-ink); }
body[data-page="filters"] .f-card-name { font-weight: 340; letter-spacing: -.02em; }
body[data-page="filters"] .f-title { letter-spacing: -.035em; }
body[data-page="filter"] .p-name { font-size: clamp(44px, 5.6vw, 108px); line-height: .94; text-wrap: balance; }      /* display-2, sized so "Dome ND Two-pack" never breaks at its hyphen */
body[data-page="filter"] .p-line-big { font-size: clamp(48px, 6.4vw, 120px); line-height: .96; max-width: 10em; }

/* kinetic type on these pages: words settle up and in, never a rotating, clipped letter roll (it read as blur mid-frame) */
body:is([data-page="filters"], [data-page="filter"]) [data-split] .k-mask { overflow: visible; }
body:is([data-page="filters"], [data-page="filter"]) [data-split] .k-c { will-change: auto;
  transform: translateY(calc((1 - var(--ri)) * .28em)); opacity: calc(var(--ri) * var(--ri)); }
@media (prefers-reduced-motion: reduce) { body:is([data-page="filters"], [data-page="filter"]) [data-split] .k-c { transform: none; opacity: 1; } }

/* header + the stuck camera row: an edge-fade band, no hard line under it */
body[data-page="filters"] .f-cams-bar::before { box-shadow: none; bottom: -28px;
  -webkit-mask: linear-gradient(180deg, #000 0, #000 calc(100% - 44px), transparent); mask: linear-gradient(180deg, #000 0, #000 calc(100% - 44px), transparent); }
/* the band must fully hold back display type that scrolls under the wordmark (the dual-vnd collision): near-opaque,
   solid to the header's base, then a 24 px feather */
body:is([data-page="filters"], [data-page="filter"]) .k-header::before { background: rgb(5 7 11 / .95); bottom: -24px;
  -webkit-mask: linear-gradient(180deg, #000 0, #000 calc(100% - 28px), transparent); mask: linear-gradient(180deg, #000 0, #000 calc(100% - 28px), transparent); }

/* ---- strengths: every chip on one baseline, the row never touches the edge ---- */
body[data-page="filter"] .p-fit { padding-top: clamp(110px, 18vh, 220px); padding-bottom: clamp(80px, 12vh, 150px); }
body[data-page="filter"] .p-chips { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); margin-bottom: clamp(70px, 12vh, 140px); }
body[data-page="filter"] .p-chip { min-width: 0; }
body[data-page="filter"] .p-chips .p-chip b { font-size: clamp(30px, 3.2vw, 64px); white-space: nowrap; }
body[data-page="filter"] .p-chips[style*="--n:5"] .p-chip b { font-size: clamp(28px, 2.7vw, 54px); }
body[data-page="filter"] .p-fits { font-size: clamp(48px, 6.4vw, 120px); line-height: .98; }

/* ---- the close-up: slow, one fact at a time, no blur (opacity + a short rise only), the product inside its stage ---- */
.p-close.is-live .p-close-step { filter: none; transform: translateY(14px); transition: opacity .7s var(--ease), transform 1.4s var(--ease); }
.p-close.is-live .p-close-step.is-on { transition: opacity 1.1s var(--ease) .28s, transform 1.6s var(--ease) .28s; }
.p-close-t { font-size: clamp(40px, 4.2vw, 80px); line-height: 1; }
.p-close-step { gap: 18px; }
.p-close-copy { align-self: stretch; display: grid; grid-template-rows: auto 1fr auto; padding-bottom: 2vh; }
.p-close-kicker { margin-bottom: 0; }
.p-close.is-live .p-close-list { align-self: center; }
.p-close.is-live .p-close-meter { margin-top: 0; }

/* ---- F7 · the store band: the link on the baseline band, the product name engraved behind it, the camera link on the
   same baseline (filter-page.js adds the ghost name); no empty band before the runway ---- */
body[data-page="filter"] .p-store { position: relative; overflow: hidden; min-height: 56vh; min-height: 56svh; padding-top: clamp(60px, 10vh, 120px); padding-bottom: clamp(36px, 7vh, 72px); align-content: end; }
body[data-page="filter"] .p-store .k-biglink { position: relative; z-index: 1; font-size: clamp(44px, 6.4vw, 120px); }
body[data-page="filter"] .p-store-cam { position: relative; z-index: 1; align-self: end; padding-bottom: .6em; }
.p-store-ghost { position: absolute; z-index: 0; left: calc(var(--gutter) - .04em); right: 0; top: clamp(24px, 5vh, 56px); pointer-events: none; user-select: none; white-space: nowrap;
  font: 300 clamp(120px, 19vw, 360px)/.86 var(--sans); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px rgb(230 239 250 / .09); }
@supports not (-webkit-text-stroke: 1px black) { .p-store-ghost { color: rgb(230 239 250 / .04); } }

/* ---- F6 · runways on these pages: the next filter on its plinth line, a calm keylight, never a near-empty screen ---- */
body:is([data-page="filters"], [data-page="filter"]) .k-runway { border-top-color: var(--hair-hi); }
body:is([data-page="filters"], [data-page="filter"]) .k-runway-name { font-size: clamp(64px, 9vw, 180px); }
body:is([data-page="filters"], [data-page="filter"]) .k-runway-line::after { background: linear-gradient(90deg, rgb(230 239 250 / .35), var(--ice-ink) 70%, var(--state-blue)); box-shadow: none; }
body:is([data-page="filters"], [data-page="filter"]) .k-runway::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: calc(.4 + var(--ra) * .6);
  background: radial-gradient(60% 70% at 72% 46%, rgb(169 194 234 / .07), rgb(169 194 234 / 0) 70%); }
.p-runway .k-runway-name { align-items: baseline; }
.p-runway-fit { flex-basis: 100%; margin-top: 18px; letter-spacing: .16em; color: var(--steel); }
/* the index runway has no object: a shorter poster, the name owns it */
body[data-page="filters"] .k-runway-wrap { height: 52vh; height: 52svh; }
body[data-page="filters"] .k-runway-name { grid-column: 1 / -1; font-size: clamp(64px, 11vw, 220px); }
body[data-page="filters"] .f-grid-wrap { padding-bottom: clamp(60px, 10vh, 120px); }
@media (max-width: 699px) {
  body[data-page="filter"] .p-store { min-height: 0; padding-top: 90px; }
  .p-store-ghost { font-size: 34vw; top: 30px; }
  body:is([data-page="filters"], [data-page="filter"]) .k-runway-name { font-size: clamp(44px, 14vw, 64px); }
  body[data-page="filters"] .k-runway-wrap { height: 40svh; }
  body[data-page="filter"] .p-chips[style*="--n:5"], body[data-page="filter"] .p-chips[style*="--n:4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page="filter"] .p-chips[style*="--n:5"] .p-chip b, body[data-page="filter"] .p-chips .p-chip b { font-size: 10vw; }
}

/* =================== Round 15 · filters lane, round 3: one focal point, a consistent product mass, quiet callouts ===================
   The hero is framed per product by stage.js (the real silhouette in its pose → √(w·h) ≈ 60 % of the hero height on
   desktop, ≈ 70 % of the width on phones; tall ones capped in height, wide ones in width), all on the same optical
   axis. Fine optical corrections per product: --frame-k (mass ×), --frame-x / --frame-y (offset in units of the mass,
   +y = down). The ghost name behind the hero is gone (it read as a muddy grey fill fighting the product and the title);
   the store band keeps the one engraved, cropped name. Callouts: max 2, on one datum line, placed by stage.js. */
body[data-page="filter"] .p-hero .p-marquee { display: none; }
/* the optical axis sits at 58 % on product pages (62 % left too little room right of round filters for a callout) */
@media (min-width: 700px) { body[data-page="filter"] { --axis: 58vw; } }
body[data-page="filter"] .p-hero.is-framed .p-calls .r-call { --y: 0; }
body[data-page="filter"] .p-hero.calls-off .p-calls { display: none; }
html.no-webgl body[data-page="filter"] .p-hero .p-calls { display: none; }
body[data-page="filter"] .p-calls .r-call span { padding: 0 14px; }
body[data-page="filter"] .p-calls .r-call i { background: rgb(226 234 245 / .42); }
body[data-page="filter"] .p-calls .r-call i::before { opacity: .75; }

/* per-product optical corrections (the measured silhouette does the rest) */
body[data-id="dual-vnd"] .p-hero { --frame-k: .96; }
body[data-id="pocket-nd"] .p-hero { --frame-k: .97; --frame-x: -.06; }
body[data-id="pocket-anamorphic"] .p-hero { --frame-k: .94; }
body[data-id="nano-uv"] .p-hero { --frame-k: .96; }

@media (max-width: 699px) {
  /* the product in a fixed band under the header (clear of the "3D render" mark), centred on the axis */
  body[data-page="filter"] .p-hero-stage { place-items: start center; padding: calc(var(--header-h) + 56px) 0 0; }
  body[data-page="filter"] .p-hero-slab { width: 86vw; height: 42svh; aspect-ratio: auto; }
}

/* runways: the object-less index runway is the kit's compact poster (kit.css round 15), never a fixed empty band */
body[data-page="filters"] .k-runway-wrap { height: auto; }
@media (max-width: 699px) { body[data-page="filters"] .k-runway-wrap { height: auto; } }
/* the next filter's name never runs into its object: name cols 1–7 (balanced, a size for two-line names), object 8–12 */
@media (min-width: 700px) {
  body[data-page="filter"] .p-runway .k-runway-name { grid-column: 1 / span 7; font-size: clamp(56px, 7vw, 136px); line-height: .92; text-wrap: balance; }
  body[data-page="filter"] .p-runway .k-runway-preview { grid-column: 8 / -1; }
}
/* the facts keep one line per value with the axis at 58 % */
@media (min-width: 700px) { body[data-page="filter"] .p-hero-foot { max-width: calc(var(--axis) - var(--W) / 2 + var(--W) * .18); } }

/* =================== Round 16 · filters lane, round 4: the index as a vitrine, products on black glass ===================
   Every product (hero and gallery) stands on a black-glass floor that mirrors it (stage.js → gl.floorReflection).
   /filters/ hero: the CPL on the optical axis with its museum label on the baseline band; the word and the line bottom
   left; the camera row closes the first frame. Gallery: one visual mass per product (stage.js frames the silhouette),
   every foot on the same floor line (82 % down the stage), a faint down-light per case, hairline cases. */
body[data-page="filters"] { --cams-h: 78px; }
@media (min-width: 700px) {
  body[data-page="filters"] .f-hero { min-height: calc(100vh - var(--cams-h)); min-height: calc(100svh - var(--cams-h)); padding-bottom: clamp(30px, 5vh, 56px); }
  body[data-page="filters"] .f-hero { --W: min(52vh, 36vw, 600px); }
  /* the object's foot ~200 px above the camera row: its reflection, then the label on the baseline band */
  body[data-page="filters"] .f-hero-model { top: max(calc(var(--header-h) + 8px), calc(100svh - var(--cams-h) - 210px - var(--W) * 1.2)); }
}
/* the museum label: under the object, on the baseline band, starting at the object's left edge */
.f-hero-label { position: absolute; z-index: 2; left: calc(var(--axis) - var(--W) * .42); bottom: clamp(30px, 5vh, 56px); display: grid; grid-template-columns: auto auto; column-gap: 18px; row-gap: 8px; align-items: baseline;
  padding-top: 14px; border-top: 1px solid var(--hair-hi); min-width: min(300px, calc(var(--W) * .84)); color: var(--ice-ink); text-decoration: none; }
.f-hero-label-n { grid-row: 1 / span 2; color: var(--state-blue) !important; letter-spacing: .2em; }
.f-hero-label-name { font: 400 clamp(17px, 1.25vw, 21px)/1.15 var(--sans); letter-spacing: -.015em; background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat; transition: background-size .5s var(--ease); justify-self: start; padding-bottom: 2px; }
.f-hero-label-fit { letter-spacing: .16em; }
@media (hover: hover) and (pointer: fine) { .f-hero-label:hover .f-hero-label-name { background-position: 0 100%; background-size: 100% 1px; } }
.f-hero-label:focus-visible { outline: 2px solid var(--state-blue); outline-offset: 6px; }
/* the camera row: the first frame's last line, a precise index between two hairlines */
body[data-page="filters"] .f-cams { min-height: var(--cams-h); align-items: center; padding-top: 0; padding-bottom: 0; }

/* the vitrine: each case lit from above, the floor line at the products' feet (no blue glow) */
body[data-page="filters"] .f-slab::before { left: 20%; right: 20%; bottom: 18%; opacity: 1; box-shadow: none;
  background: linear-gradient(90deg, rgb(230 239 250 / 0), rgb(230 239 250 / .16) 50%, rgb(230 239 250 / 0)); }
body[data-page="filters"] .f-card::after { content: ''; position: absolute; z-index: 0; left: 12%; right: 12%; top: 0; height: 62%; pointer-events: none; opacity: .75;
  background: radial-gradient(44% 72% at 50% 0%, rgb(169 194 234 / .06), rgb(169 194 234 / 0) 72%); }
body[data-page="filters"] .f-card:nth-child(5n)::after { left: 30%; right: 30%; }
body[data-page="filters"] .f-card-meta { padding-top: 0; }
body[data-page="filters"] .f-card-n { letter-spacing: .2em; }
/* hover: the case's down-light brightens a touch as the product turns into the light (stage.js) */
@media (hover: hover) and (pointer: fine) {
  body[data-page="filters"] .f-card::after { transition: opacity .8s var(--ease); }
  body[data-page="filters"] .f-card:hover::after { opacity: 1; }
}
@media (max-width: 699px) {
  body[data-page="filters"] { --cams-h: 60px; }
  .f-hero-label { position: relative; left: auto; bottom: auto; order: 0; margin: 0 0 28px; min-width: 0; width: 100%; grid-template-columns: 3.2em 1fr; }
  /* the object clear of the "3D render" mark, its reflection between it and the label */
  body[data-page="filters"] .f-hero-model { top: calc(var(--header-h) + 74px); width: 72vw; left: 14vw; }
  body[data-page="filters"] .f-hero { padding-top: calc(var(--header-h) + 74px + 72vw + 64px); }
}
@media (prefers-reduced-motion: reduce) { .f-hero-label-name, body[data-page="filters"] .f-card::after { transition: none; } }

/* =================== Round 17 · QA, mid widths (the owner's ~800 × 930 pane, tablets, small laptops) ===================
   Between 700 and 1199 the type column left of the optical axis is narrow, so the three facts side by side ran into
   each other ("DJI Pocket 3 · Pocket" over "Variable ND · ND2–32" over "Magnetic") or left a lone "4" on a line. There
   they read as a hairline spec table instead: one row per fact, the mono label in a fixed column, the value beside it.
   A portrait pane narrower than 900 stacks like a phone instead (below). The hero callouts step aside below 900, as on
   phones (stage.js). */
@media (min-width: 900px) and (max-width: 1199px), (min-width: 700px) and (max-width: 899px) and (orientation: landscape) {
  body[data-page="filter"] .p-facts { grid-template-columns: minmax(0, 1fr); gap: 0; width: min(100%, 420px); }
  body[data-page="filter"] .p-facts > div { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); column-gap: 14px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--hair); }
  body[data-page="filter"] .p-facts > div:last-child { border-bottom: 1px solid var(--hair); }
  body[data-page="filter"] .p-facts dt { margin: 0; }
  body[data-page="filter"] .p-facts dd { margin: 0; font-size: 15px; line-height: 1.35; }
}
/* portrait panes 700–899 (the owner's ~800 × 930 pane, an upright tablet): the phones' composition at a larger scale —
   the product centred in a band under the header (stage.js frames it with the phone rule), the title, chips and the
   three facts across the full width below it, so nothing shares a row with the filter */
@media (min-width: 700px) and (max-width: 899px) and (orientation: portrait) {
  body[data-page="filter"] { --axis: 50vw; }
  body[data-page="filter"] .p-hero { --W: min(80vw, 48vh); }
  body[data-page="filter"] .p-hero-stage { place-items: start center; padding: calc(var(--header-h) + 56px) 0 0; }
  body[data-page="filter"] .p-hero-slab { width: 86vw; height: 42svh; aspect-ratio: auto; }
  body[data-page="filter"] .p-hero-foot { max-width: none; }
  body[data-page="filter"] .p-facts { width: 100%; }
}
/* /filters/ hero: the intro paragraph ends before the museum label (which starts at the object's left edge, axis − .42 W);
   at 800–1024 its 36em measure ran into "03 CPL Polariser" */
@media (min-width: 700px) {
  body[data-page="filters"] .f-hero-spec { max-width: min(36em, calc(var(--axis) - var(--W) * .42 - var(--gutter) - 32px)); }
}

/* =================== Aesthetic pass · 2026-10-30 round 2 (Claude): pairing, legible micro type, quieter secondaries =================== */
/* the homepage's sans + serif-italic pairing: a second camera line in "Fits" is set in SIHAN Serif italic, stepped in */
body[data-page="filter"] .p-fits > span + span { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.012em;
  padding-left: .42em; margin-top: .04em; }
body[data-page="filter"] .p-fits > span + span .k-c { font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: inherit; }
/* micro type: one step up so the mono labels read at a glance on the dark ground (still the smallest voice) */
@media (min-width: 700px) { body:is([data-page="filters"], [data-page="filter"]) { --hud: clamp(11px, .76vw, 12px); } }
/* fit notes: sentence-weight grey, a calmer leading, aligned to the column hairlines */
body[data-page="filter"] .p-notes li { color: var(--ink-70); padding: 14px 0; line-height: 1.55; }
/* hero facts: values never strand a single token on a second line */
body[data-page="filter"] .p-facts dd { text-wrap: balance; }
/* camera index: the counts become quiet ink (one accent per view), the current dot sits inside the gutter */
body[data-page="filters"] .f-cams a sup { color: var(--ink-40); }
body[data-page="filters"] .f-cams a[aria-current="true"] sup { color: var(--ink-70); }
body[data-page="filters"] .f-cams a[aria-current="true"]::before { left: -9px; background: var(--ink); }
/* index hero: the intro reads as a lede (measure ~52ch, softer ink, more air above it) */
body[data-page="filters"] .f-hero-spec { max-width: 52ch; color: var(--ink-70); }
body[data-page="filters"] .f-title sup { color: var(--ink-60); }
/* review fix (round 2): on phones the short "All" chip in the camera index keeps a 44px-wide tap target */
@media (max-width: 699px) { body[data-page="filters"] .f-cams a { min-width: 44px; } }
/* review fix (round 2): the product breadcrumb link gets a 44px-tall tap area on phones without moving the line */
@media (max-width: 699px) { body[data-page="filter"] .p-crumb a { display: inline-block; padding: 15px 0; margin: -15px 0; } }