/* SIHAN · About (owner: about). Built on /kit/kit.css: tokens, header, footer, runway, marks and links come from the
   kit; this file only lays out the About sections. Every scroll-linked value (--q, --p, --cv) is written by about.js
   as a pure function of the scroll position. */

/* ---------- The particle wordmark canvas (fixed, behind the hero and the statement) ---------- */
.ab-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; display: block; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity .5s var(--ease); }
html.ab-gl .ab-canvas { opacity: var(--cv, 1); transition: none; }
html.ab-gl.ab-gl-in .ab-canvas { transition: opacity .5s var(--ease); }

/* ---------- Header: one frosted band once the page scrolls (the content passes under it blurred, never sharp behind
   the nav; the kit's gradient alone left the statement legible under the links) ---------- */
[data-page="about"] .k-header::before { inset: 0; background: rgb(242 245 249 / .74); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: 0 1px 0 var(--ink-12); }

/* ---------- 1 · Hero ---------- */
.ab-hero { position: relative; height: 125vh; height: 125svh; }
.ab-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ab-word { position: absolute; left: 50%; top: calc(50% - var(--lift, 6svh)); transform: translate(-50%, -50%); margin: 0; font: inherit; pointer-events: none; }
/* The DOM wordmark: what shows before the light arrives, without WebGL and without JS. Same letters, same tracking. */
.ab-word-type { display: block; font: 600 clamp(64px, 20vw, 420px)/1 var(--sans); letter-spacing: .17em; margin-right: -.17em; white-space: nowrap;
  color: transparent; background: linear-gradient(180deg, #2a4a7a 0%, var(--ink) 55%, #20385e 100%); -webkit-background-clip: text; background-clip: text;
  transition: opacity .9s var(--ease); }
@media (max-aspect-ratio: 4/5) { .ab-word-type { font-size: 23vw; } }
/* With JS the DOM word waits for the light (no formed word flashing under the arrival iris): hidden until WebGL has
   drawn (html.ab-gl) and shown only if it fails (html.ab-no-gl); a CSS failsafe brings it back after 3.2 s if the
   script never runs. */
html.js:not(.ab-no-gl) .ab-word-type { opacity: 0; }
html.js:not(.ab-gl):not(.ab-no-gl) .ab-word-type { animation: ab-word-late .6s var(--ease) 3.2s both; }
@keyframes ab-word-late { from { opacity: 0; } to { opacity: 1; } }
.ab-tag { position: absolute; left: var(--gutter); bottom: clamp(56px, 11vh, 120px); margin: 0; font: 520 clamp(44px, 5.6vw, 112px)/.9 var(--sans); letter-spacing: -.045em;
  font-feature-settings: 'ss01', 'cv11'; color: var(--ink);
  transform: translateY(calc(var(--hp, 0) * -40px)); opacity: calc(1 - var(--hp, 0) * 2.2); }
/* One brand line: the home hero's own style (Inter display + the serif-italic "differently", indented, ink). */
.ab-tag-a, .ab-tag-b { display: block; }
.ab-tag-b { font: italic 400 1.1em/.9 var(--serif); letter-spacing: -.025em; padding-left: .527em; }
@media (max-width: 699px) { .ab-tag { font-size: clamp(42px, 12.4vw, 64px); } }
.ab-cue { position: absolute; right: var(--gutter); bottom: clamp(56px, 11vh, 120px); display: flex; align-items: center; gap: 12px; margin: 0; opacity: calc(1 - var(--hp, 0) * 4); }
.ab-cue i { position: relative; width: 1px; height: 46px; background: var(--ink-12); overflow: hidden; }
.ab-cue i::after { content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: var(--ink); animation: ab-cue 2.2s var(--ease-io) infinite; }
@keyframes ab-cue { from { transform: translateY(-100%); } to { transform: translateY(260%); } }
/* Touch hint (icon only): a press ring over the word until the first tap. */
.ab-play { position: absolute; left: 50%; top: calc(50% - var(--lift, 6svh) + clamp(78px, 14vw, 160px)); width: 46px; height: 46px; margin: -23px 0 0 -23px; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease); }
html.ab-gl.ab-coarse:not(.ab-played) .ab-play { opacity: calc(1 - var(--hp, 0) * 5); }
.ab-play-ring, .ab-play-dot { position: absolute; inset: 0; border-radius: 50%; }
.ab-play-ring { border: 1px solid rgb(14 26 44 / .45); animation: ab-press 2.4s var(--ease) infinite; }
.ab-play-dot { inset: 17px; background: var(--ink); opacity: .55; animation: ab-dot 2.4s var(--ease) infinite; }
@keyframes ab-press { 0% { transform: scale(.4); opacity: 0; } 25% { opacity: 1; } 70%, 100% { transform: scale(1.25); opacity: 0; } }
@keyframes ab-dot { 0%, 100% { transform: scale(1); } 20% { transform: scale(.7); } 40% { transform: scale(1); } }

/* ---------- 2 · Statement (scrubbed letter by letter) ---------- */
/* overlaps the hero's tail: the statement rises in while the word is still breaking up (no dead stretch of dust) */
.ab-statement { position: relative; height: 190vh; height: 190svh; margin-top: -35vh; margin-top: -35svh; pointer-events: none; }
.ab-statement-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: var(--header-h) var(--gutter) 0; }
.ab-kicker { display: flex; gap: 3em; margin-bottom: clamp(22px, 4vh, 44px); opacity: calc(.3 + var(--p, 0) * 2); }
.ab-statement-text { max-width: 14em; font: 540 clamp(56px, 8vw, 168px)/.98 var(--sans); letter-spacing: -.045em; color: var(--ink); text-wrap: balance; }
.ab-statement-text .ab-w { display: inline-block; white-space: nowrap; }
.ab-statement-text .ab-c { display: inline-block; --m: 0;
  --q: clamp(0, (var(--p, 0) * (var(--n, 1) + 12) - var(--i, 0)) / 12, 1);
  --hot: calc(min(var(--q), 1 - var(--q)) * 2);
  opacity: calc(.12 + var(--q) * .88);
  color: color-mix(in srgb, var(--blue) calc(max(var(--hot), var(--m) * .8) * 100%), var(--ink));
  transform: translateY(calc((1 - var(--q)) * .22em - var(--m) * .16em)) scale(calc(1 + var(--m) * .08));
  transition: --m .7s var(--ease-spring); }
/* the pointer lifts the letters near it (fine pointers; --m is set by about.js and springs back) */
@property --m { syntax: '<number>'; inherits: false; initial-value: 0; }
.ab-statement-text .ab-c.ab-near { transition: --m .12s linear; }
@media (max-width: 699px) { .ab-statement-text { font-size: clamp(38px, 11.2vw, 56px); line-height: 1; } .ab-kicker { justify-content: space-between; } }

/* ---------- HUD (art bible): system mono, uppercase, 10–11 px, .12em, ink at 70 %, mono numerals ---------- */
[data-page="about"] { --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --ab-hud: rgb(14 26 44 / .7); }
[data-page="about"] .k-micro, .ab-card-label .k-mono, .ab-peek-mark, .ab-callout {
  font: 500 11px/1.3 var(--mono); letter-spacing: var(--k-track, .16em); text-transform: uppercase; color: var(--ab-hud); font-variant-numeric: tabular-nums; }
@media (max-width: 699px) { [data-page="about"] .k-micro, .ab-card-label .k-mono, .ab-callout { font-size: 10px; } }
/* crosshair tick before a label */
.ab-x { position: relative; display: inline-block; width: 9px; height: 9px; margin-right: 10px; vertical-align: -1px; flex: none;
  background: linear-gradient(currentColor, currentColor) 50% 0 / 1px 100% no-repeat, linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat; opacity: .8; }

/* ---------- Section heads ---------- */
.ab-head { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: clamp(16px, 2.4vh, 28px); border-bottom: 1px solid var(--ink-12); }
/* ticks at both ends of the rule */
.ab-head::before, .ab-head::after { content: ''; position: absolute; bottom: -4px; width: 1px; height: 7px; background: var(--ink-40); }
.ab-head::before { left: 0; } .ab-head::after { right: 0; }
.ab-label { display: inline-flex; align-items: center; margin: 0; color: var(--ink) !important; }
.ab-label::before, .ab-kicker > span:first-child::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 10px; flex: none; opacity: .8;
  background: linear-gradient(currentColor, currentColor) 50% 0 / 1px 100% no-repeat, linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat; }
.ab-kicker > span:first-child { display: inline-flex; align-items: center; }
.ab-head-n { color: var(--ab-hud); }
.k-section { padding: clamp(96px, 18vh, 220px) 0 0; }

/* ---------- 3 · Cameras: five giant rows ---------- */
.ab-rows { margin-top: 0; }
.ab-row { --q: 1; --dir: 1; border-bottom: 1px solid var(--ink-12); overflow: hidden; }
.ab-row:nth-child(even) { --dir: -1; }
.ab-row a { position: relative; display: grid; grid-template-columns: clamp(34px, 4vw, 72px) clamp(64px, 7vw, 120px) minmax(0, 1fr) auto; align-items: center;
  padding: clamp(10px, 1.6vw, 26px) 0; color: var(--ink); text-decoration: none;
  transform: translateX(calc((1 - var(--q)) * var(--dir) * 22vw)); opacity: calc(.15 + var(--q) * .85); }
.ab-row-n, .ab-row-brand { color: var(--ab-hud) !important; }
.ab-row-name { display: block; font: 540 clamp(44px, 8.6vw, 156px)/1 var(--sans); letter-spacing: -.045em; padding: .04em 0 .1em; white-space: nowrap;
  transition: transform .7s var(--ease); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ab-row-name { color: transparent; -webkit-background-clip: text; background-clip: text;
    background-image: linear-gradient(100deg, var(--ink) 0 38%, var(--blue) 44%, var(--ice) 48%, #fff 50%, var(--ice) 52%, var(--blue) 56%, var(--ink) 62% 100%);
    background-size: 320% 100%; background-repeat: no-repeat; background-position: calc(100% - var(--q, 1) * 100%) 0; }
  /* the light sweeps across the name as the row slides in (scroll), and again on hover */
  .ab-row a:focus-visible .ab-row-name { background-position: 100% 0; transition: transform .7s var(--ease), background-position 1.1s var(--ease); }
  @media (hover: hover) and (pointer: fine) { .ab-row a:hover .ab-row-name { background-position: 100% 0; transition: transform .7s var(--ease), background-position 1.1s var(--ease); } }
}
.ab-row-ext { font: 400 clamp(28px, 3.6vw, 64px)/1 var(--sans); transition: transform .6s var(--ease), opacity .4s var(--ease); justify-self: end; }
.ab-row a:focus-visible .ab-row-name { transform: translateX(24px); }
@media (hover: hover) and (pointer: fine) { .ab-row a:hover .ab-row-name { transform: translateX(24px); } }
.ab-row a:focus-visible .ab-row-ext { transform: translate(6px, -6px) rotate(0deg); color: var(--blue); }
@media (hover: hover) and (pointer: fine) { .ab-row a:hover .ab-row-ext { transform: translate(6px, -6px) rotate(0deg); color: var(--blue); } }
.ab-row a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .7s var(--ease); }
.ab-row a:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }
@media (hover: hover) and (pointer: fine) { .ab-row a:hover::after { transform: scaleX(1); transform-origin: 0 50%; } }
/* phones: the brand sits above the name */
@media (max-width: 699px) {
  .ab-row a { grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: 'n brand ext' 'n name ext'; row-gap: 2px; padding: 14px 0 12px; }
  .ab-row-n { grid-area: n; align-self: start; padding-top: 2px; }
  .ab-row-brand { grid-area: brand; }
  .ab-row-name { grid-area: name; font-size: clamp(38px, 11.6vw, 64px); }
  .ab-row-ext { grid-area: ext; font-size: 26px; }
}
/* Hover peek (fine pointers): the filters for that camera on a glass card that follows the pointer. */
.ab-peek { position: fixed; left: 0; top: 0; z-index: 20; pointer-events: none; width: clamp(220px, 21vw, 360px); aspect-ratio: 4 / 5;
  transform: translate3d(var(--px, -999px), var(--py, -999px), 0) translate(-50%, -50%) perspective(900px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) rotateZ(var(--rz, 0deg)) scale(var(--ps, 0));
  opacity: var(--ps, 0); will-change: transform; }
.ab-peek-card { position: absolute; inset: 0; border-radius: 22px; overflow: hidden; isolation: isolate;
  background: radial-gradient(90% 70% at 30% 20%, rgb(255 255 255 / .9), rgb(232 240 248 / .55) 60%, rgb(198 210 223 / .55));
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .9), inset 0 -24px 50px -26px rgb(47 111 214 / .4), 0 40px 70px -34px rgb(14 26 44 / .5); }
.ab-peek-card::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg, rgb(255 255 255 / 0) 34%, rgb(216 243 252 / .7) 48%, rgb(255 255 255 / 0) 60%) 0 0 / 260% 100% no-repeat;
  background-position: calc(110% - var(--gx, .5) * 120%) 0; }
.ab-peek-imgs { position: absolute; inset: 12% 14% 17%; z-index: 1; }
.ab-peek-imgs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0;
  transform: translateX(var(--ox, 0%)) rotate(var(--or, 0deg)) scale(.92); transition: opacity .35s var(--ease), transform .6s var(--ease-spring);
  filter: drop-shadow(0 20px 22px rgb(14 26 44 / .3)); }
.ab-peek-imgs img.on { opacity: 1; transform: translateX(var(--ox, 0%)) rotate(var(--or, 0deg)) scale(1); }
.ab-peek-mark { position: absolute; left: 14px; bottom: 12px; z-index: 2; font-size: 10px !important; line-height: 1 !important; }
/* 3D models drawn in the card's own canvas (peek3d.js); the photos step aside, the rim and glint stay on top */
.ab-peek-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.ab-peek-3d .ab-peek-imgs { display: none; }
.ab-peek-3d::before { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .9), inset 0 0 0 2px rgb(14 26 44 / .05), inset 0 -24px 50px -26px rgb(47 111 214 / .22); }
.ab-peek-3d::after { opacity: .55; }
/* touch screens: a smaller card at the right edge beside the row in the middle of the screen (about.js) */
html:not(.k-fine) .ab-peek { width: clamp(96px, 27vw, 150px); }
html:not(.k-fine) .ab-peek-card { border-radius: 16px; }
html:not(.k-fine) .ab-peek-mark { left: 9px; bottom: 8px; font-size: 8px !important; letter-spacing: .1em; }
html:not(.k-fine) .ab-row-ext { opacity: calc(1 - var(--pk, 0)); }

/* ---------- 4 · How we show things ---------- */
.ab-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 36px); margin-top: clamp(28px, 5vh, 56px); perspective: 1200px; }
.ab-card { --q: 1; transform: translateY(calc((1 - var(--q)) * 90px)) rotateX(calc((1 - var(--q)) * 18deg)); opacity: calc(.2 + var(--q) * .8); transform-origin: 50% 100%; }
.ab-card-glass { aspect-ratio: 16 / 10; }
.ab-card-glass img { padding: 0; object-fit: cover; filter: none; }
.ab-card-glass--product img { padding: 7% 10%; object-fit: contain; filter: drop-shadow(0 18px 22px rgb(14 26 44 / .25)); }
.ab-card-label { display: flex; align-items: baseline; gap: 12px; margin-top: 18px; color: var(--ink); }
.ab-card-label .k-mono { color: var(--ink); }
.ab-card-n { color: var(--blue); }
.ab-card-line { margin-top: 8px; font: 540 clamp(22px, 1.9vw, 34px)/1.1 var(--sans); letter-spacing: -.035em; color: var(--ink); }
@media (max-width: 899px) { .ab-cards { grid-template-columns: 1fr; gap: 44px; } }
/* Card A when the live model is drawn by the kit stage behind it: the frame stays, the still steps aside. */
.ab-card-model.ab-model-on { background: radial-gradient(70% 80% at 50% 45%, rgb(255 255 255 / .18), rgb(255 255 255 / 0) 70%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .95), inset 0 0 0 2px rgb(14 26 44 / .06), 0 30px 60px -34px rgb(14 26 44 / .3); cursor: grab; }
.ab-card-model.ab-model-on img { opacity: 0; }
/* Card B when the live light study is drawn behind it: only the glass rim stays. */
.ab-card-study.ab-study-on { background: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5), 0 30px 60px -30px rgb(14 26 44 / .35), 0 2px 6px -2px rgb(14 26 44 / .12); cursor: grab; }
.ab-card-study.ab-study-on img { opacity: 0; }
.ab-card-study { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.ab-card-study img { pointer-events: none; }
.ab-card-study.ab-study-on::after { opacity: .35; }
/* HUD callout on the live model: a mono readout of the ring (stops = log2 of the ND factor) on a 1 px leader line. */
.ab-card { position: relative; container-type: inline-size; }
.ab-callout { position: absolute; right: 14px; top: calc(62.5cqw * .3 - 12px); z-index: 2; display: flex; align-items: center; pointer-events: none; color: var(--ink) !important;
  opacity: 0; transition: opacity .6s var(--ease); white-space: nowrap; }
.ab-card:has(.ab-model-on) .ab-callout { opacity: 1; }
.ab-callout-dot { width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ink); background: radial-gradient(circle, var(--ink) 0 1.2px, transparent 1.6px); flex: none; }
.ab-callout-line { width: clamp(20px, 3vw, 48px); height: 1px; background: var(--ink-40); margin-right: 8px; }
.ab-callout-t { padding: 4px 7px 3px; border-radius: 3px; background: rgb(246 248 251 / .72); box-shadow: inset 0 0 0 1px var(--ink-12); }

/* ---------- 5 · Independent ---------- */
.ab-indep-line { max-width: 19em; font: 540 var(--t-h2)/1.02 var(--sans); letter-spacing: -.045em; color: var(--ink); }
.ab-indep-op { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: clamp(24px, 4vh, 40px); font: 500 var(--t-lead)/1.4 var(--sans); letter-spacing: -.015em; color: var(--ink-2); }
.ab-indep-op .k-micro { color: var(--ab-hud); }
.ab-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--blue); align-self: center; }
@media (max-width: 699px) { .ab-dot { display: none; } .ab-indep-op [lang] { flex-basis: 100%; } }

/* ---------- 6 · Contact ---------- */
.ab-contact { padding-bottom: clamp(96px, 16vh, 200px); }
.ab-mail { position: relative; margin-top: clamp(28px, 6vh, 72px); }
.ab-email { position: relative; display: inline-block; color: var(--ink); text-decoration: none; }
.ab-email-text { display: inline-block; font: 540 clamp(34px, 7.2vw, 144px)/1.02 var(--sans); letter-spacing: -.045em; padding-bottom: .08em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .7s var(--ease), color .4s var(--ease); }
.ab-email:hover .ab-email-text, .ab-email:focus-visible .ab-email-text { background-size: 100% 2px; }
@media (max-width: 699px) { .ab-email-text { font-size: clamp(30px, 9.6vw, 48px); } }
/* The lens: a round glass loupe that magnifies the address under it (fine pointers only: on touch it would sit on
   the address at rest). */
html.ab-coarse .ab-lens { display: none; }
.ab-lens { position: absolute; left: 0; top: 0; width: clamp(130px, 13vw, 220px); aspect-ratio: 1; border-radius: 50%; pointer-events: none; overflow: hidden;
  transform: translate3d(var(--lx, 0px), var(--ly, 0px), 0) translate(-50%, -50%) scale(var(--ls, 0)); opacity: var(--ls, 0);
  background: radial-gradient(circle at 34% 28%, #fdfeff, #f0f5fa 55%, #dfe7f0);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .95), inset 0 0 0 5px rgb(216 243 252 / .35), inset 0 -16px 30px -12px rgb(47 111 214 / .35), 0 26px 50px -22px rgb(14 26 44 / .5); }
.ab-lens-view { position: absolute; left: 0; top: 0; color: var(--blue-deep);
  text-shadow: -1.5px 0 rgb(255 70 120 / .28), 1.5px 0 rgb(40 170 255 / .32); transform-origin: 0 0; }
.ab-lens-view .ab-email-text { background: none; }
.ab-lens-rim { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from var(--la, 0deg), rgb(255 255 255 / 0) 0 8%, rgb(255 255 255 / .8) 10%, rgb(255 255 255 / 0) 13% 58%, rgb(216 243 252 / .7) 60%, rgb(255 255 255 / 0) 63%);
  -webkit-mask: radial-gradient(circle, transparent 66%, #000 67%, #000 70%, transparent 71%); mask: radial-gradient(circle, transparent 66%, #000 67%, #000 70%, transparent 71%); }
.ab-lines { margin-top: clamp(40px, 7vh, 80px); border-top: 1px solid var(--ink-12); }
.ab-lines li { display: grid; grid-template-columns: clamp(110px, 12vw, 200px) minmax(0, 1fr) auto; align-items: baseline; gap: 8px 24px; padding: 18px 0; border-bottom: 1px solid var(--ink-12); }
.ab-lines .k-micro { color: var(--ab-hud); }
.ab-lines-v { font: 500 var(--t-lead)/1.35 var(--sans); color: var(--ink); letter-spacing: -.015em; }
.ab-lines-a { color: var(--ink); font-size: var(--t-body); white-space: nowrap; }
@media (max-width: 699px) { .ab-lines li { grid-template-columns: 1fr auto; } .ab-lines-v { grid-column: 1 / -1; grid-row: 2; font-size: 17px; } .ab-lines-a { grid-row: 1; grid-column: 2; } }

/* ---------- No WebGL / no JS ---------- */
html.no-js .ab-hero { height: auto; }
html.no-js .ab-stage { position: relative; }
html.no-js .ab-statement { height: auto; margin-top: 0; }
html.no-js .ab-statement-pin { position: relative; height: auto; min-height: 80vh; }
html.no-js .ab-c { opacity: 1 !important; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ab-row a, .ab-card { transform: none; }
  .ab-statement-text .ab-c { transform: none; }
  .ab-cue i::after, .ab-play-ring, .ab-play-dot { animation: none; }
  .ab-row-name, .ab-row-ext, .ab-email-text { transition: none; }
  .ab-peek { transform: translate3d(var(--px, -999px), var(--py, -999px), 0) translate(-50%, -50%) scale(var(--ps, 0)); }
}

/* =====================================================================================================================
   Round 12 · the home finale's dark stage under the hero and the statement (only while the WebGL light is drawn:
   html.ab-gl; without it the page stays silver). Everything over the canvas reads as light; --cv (canvas opacity, a pure
   function of scroll) carries the type back to ink as the canvas fades into the silver page.
   ===================================================================================================================== */
html.ab-gl .ab-hero, html.ab-gl .ab-statement {
  --ink: color-mix(in srgb, #e8f0fb calc(var(--cv, 1) * 100%), #0e1a2c);
  --ink-12: color-mix(in srgb, rgb(232 240 251 / .14) calc(var(--cv, 1) * 100%), rgb(14 26 44 / .12));
  --ink-40: color-mix(in srgb, rgb(232 240 251 / .42) calc(var(--cv, 1) * 100%), rgb(14 26 44 / .4));
  --ab-hud: color-mix(in srgb, rgb(214 228 250 / .78) calc(var(--cv, 1) * 100%), rgb(14 26 44 / .7));
}
/* the header and the honesty pill over the dark stage */
html.ab-dark .k-header { --ink: #e8f0fb; --ink-70: rgb(232 240 251 / .8); --ink-12: rgb(255 255 255 / .1); --ab-hud: rgb(214 228 250 / .82); }
html.ab-dark .k-header .k-wordmark, html.ab-dark .k-header .k-link { color: #e8f0fb; }
html.ab-dark [data-page="about"] .k-header::before, html.ab-dark .k-header::before { background: rgb(3 8 20 / .55); box-shadow: 0 1px 0 rgb(255 255 255 / .08); }
html.ab-dark .k-mark { color: rgb(220 232 250 / .86); background: rgb(6 14 30 / .55); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), 0 0 0 1px rgb(120 160 230 / .14); }
html.ab-dark .k-progress { filter: invert(1) hue-rotate(180deg); }
html.ab-dark { background: #02060f; }

/* the light-born tagline: each letter ignites after the word's ignition (blur + white heat → ice) */
html.ab-gl .ab-tag { color: #e8f0fb; }
/* the brand line keeps the home hero's signature: "differently" in the Source Serif 4 italic, born from the light */
html.ab-gl .ab-tag-b { font: italic 400 1.1em/.9 var(--serif); letter-spacing: -.025em; padding-left: .527em;
  background: none; color: #f2f7ff; }
.ab-tag .ab-l { display: inline-block; }
html.ab-gl .ab-tag .ab-l { opacity: 0; }
html.ab-gl.ab-lit .ab-tag .ab-l { animation: ab-born 1.25s cubic-bezier(.2, .7, .2, 1) calc(.25s + var(--i) * 38ms) both; }
@keyframes ab-born {
  0% { opacity: 0; filter: blur(14px) brightness(2.6); transform: translateY(.18em) scale(1.25); text-shadow: 0 0 34px rgb(170 205 255 / 1); }
  35% { opacity: 1; filter: blur(2px) brightness(2.2); text-shadow: 0 0 26px rgb(170 205 255 / .9); }
  100% { opacity: 1; filter: none; transform: none; text-shadow: 0 0 22px rgb(110 160 255 / .28); }
}
html.ab-gl .ab-tag .ab-l { text-shadow: 0 0 22px rgb(110 160 255 / .28); }

/* the statement on the dark stage: lit letters glow ice-white as the scroll reaches them */
html.ab-gl .ab-statement-text .ab-c {
  color: color-mix(in srgb, color-mix(in srgb, #ffffff calc(max(var(--hot), var(--m) * .8) * 100%), #dbe7f8) calc(var(--cv, 1) * 100%), #0e1a2c);
  text-shadow: 0 0 calc(var(--hot) * 30px + 2px) rgb(140 185 255 / calc(var(--cv, 1) * (.18 + var(--hot) * .7))); }
html.ab-gl .ab-play-ring { border-color: rgb(232 240 251 / .5); }
html.ab-gl .ab-play-dot { background: #e8f0fb; }

/* HUD: corner ticks, the section rail, the leader-line callout, the play hint (mono, 10–11 px) */
.ab-hud { position: absolute; inset: 0; pointer-events: none; display: none; color: var(--ab-hud); font: 500 var(--hud, 10.5px)/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
html.ab-gl .ab-hud { display: block; opacity: 0; transition: opacity .9s var(--ease) .6s; }
html.ab-gl.ab-lit .ab-hud { opacity: calc(1 - var(--hp, 0) * 3); }
.ab-hud-c { position: absolute; width: 11px; height: 11px; opacity: .7;
  background: linear-gradient(currentColor, currentColor) 50% 0 / 1px 100% no-repeat, linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat; }
.ab-hud-tl { left: calc(var(--gutter) - 5px); top: calc(var(--header-h) + 14px); }
.ab-hud-tr { right: calc(var(--gutter) - 5px); top: calc(var(--header-h) + 14px); }
.ab-hud-bl { left: calc(var(--gutter) - 5px); bottom: 22px; display: none; }
.ab-hud-br { right: calc(var(--gutter) - 5px); bottom: 22px; }
.ab-hud-rail { position: absolute; right: var(--gutter); top: calc(50% - var(--lift, 6svh) - 110px); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.ab-hud-n b { font-weight: 700; color: #fff; }
.ab-hud-s::before { content: '+ '; }
.ab-hud-line { width: 1px; height: 220px; margin-right: 0; background: linear-gradient(currentColor, currentColor) 0 0 / 1px 100% no-repeat; opacity: .55; position: relative; }
.ab-hud-line::after { content: ''; position: absolute; right: 0; top: 0; width: 5px; height: 100%; opacity: .9;
  background: repeating-linear-gradient(180deg, currentColor 0 1px, transparent 1px 44px); }
.ab-hud-call { position: absolute; left: calc(50% - var(--ab-ww, 60vw) / 2 + var(--ab-ww, 60vw) * .03); top: calc(50% - var(--lift, 6svh) + var(--ab-ww, 60vw) * .125);
  display: flex; align-items: flex-start; }
.ab-hud-dot { width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; background: radial-gradient(circle, currentColor 0 1.2px, transparent 1.6px); flex: none; margin-top: -3px; }
.ab-hud-lead { width: 54px; height: 44px; margin-top: 0; flex: none;
  background: linear-gradient(currentColor, currentColor) 0 0 / 1px 100% no-repeat, linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; opacity: .6; margin-left: -4px; }
.ab-hud-t { display: flex; flex-direction: column; gap: 2px; padding: 34px 0 0 10px; }
.ab-hud-t span:first-child { color: #fff; }
.ab-hud-play { position: absolute; left: 50%; bottom: clamp(56px, 11vh, 120px); transform: translateX(-50%); margin: 0; display: flex; gap: 22px; }
.ab-hud-play span::before { content: '+ '; opacity: .6; }
html.ab-coarse .ab-hud-play, html.ab-coarse .ab-hud-rail { display: none; }
@media (max-width: 699px) { .ab-hud-rail, .ab-hud-play, .ab-hud-call, .ab-hud-tl, .ab-hud-tr { display: none; } }
@media (prefers-reduced-motion: reduce) { html.ab-gl.ab-lit .ab-tag .ab-l { animation: none; opacity: 1; } }


/* =====================================================================================================================
   Round 12b · the WHOLE page on the home's dark stage (not only the hero and the statement): the tokens flip on the
   body like the filter pages (/kit/filters.css), so the kit's header, links, footer and runway follow; the kit stage's
   transmission backdrop takes the page's night ground (--gl-backdrop, KIT-API §7). Lower sections: light-born mono HUD
   heads over a thin flare streak, a faint horizon band per section (a band masked at its ends, never a disc), smoked
   glass with HUD corner ticks, ice-white type. Text contrast on the night ground ≥ 4.5:1 throughout.
   ===================================================================================================================== */
body[data-page="about"] {
  --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; --blue-deep: #a9c8ff;
  --night-0: #03050a; --night-1: #070b13;
  --gl-backdrop: #0a1120; --gl-backdrop-2: #03050a;
  --ab-hud: rgb(214 228 250 / .78);
  color: var(--ink); color-scheme: dark;
  background: linear-gradient(180deg, #02060f 0%, var(--night-0) 40%, var(--night-0) 100%) fixed var(--night-0);
  scrollbar-color: rgb(226 234 245 / .25) transparent;
}
body[data-page="about"] ::selection { background: var(--blue); color: #fff; }
/* hero + statement: light type for the whole scroll (no carry back to ink: the canvas now fades into the night) */
html.ab-gl .ab-hero, html.ab-gl .ab-statement { --ink: #e8f0fb; --ink-12: rgb(232 240 251 / .14); --ink-40: rgb(232 240 251 / .42); --ab-hud: rgb(214 228 250 / .78); }
html.ab-gl .ab-statement-text .ab-c {
  color: color-mix(in srgb, #ffffff calc(max(var(--hot), var(--m) * .8) * 100%), #dbe7f8);
  text-shadow: 0 0 calc(var(--hot) * 30px + 2px) rgb(140 185 255 / calc(.18 + var(--hot) * .7)); }
.ab-word-type { background-image: linear-gradient(180deg, #ffffff 0%, #d6e3f5 55%, #8fb0e0 100%); }
/* chrome: the night header band, the plain HUD honesty line (no pill), the progress rail in light */
body[data-page="about"] .k-header::before { background: rgb(5 8 14 / .72); box-shadow: 0 1px 0 rgb(255 255 255 / .08); }
body[data-page="about"] .k-mark { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: rgb(226 234 245 / .8);
  text-shadow: 0 0 12px rgb(3 5 10 / .9); }
html.ab-dark .k-progress, body[data-page="about"] .k-progress { filter: none; }
body[data-page="about"] .k-progress::after { background: linear-gradient(var(--ink), var(--blue)); }
body[data-page="about"] .k-footer { color: rgb(200 212 228 / .74); }

/* sections: a faint horizon band behind each (a wide band masked at both ends, never a disc) */
.ab-cams, .ab-honest, .ab-contact { position: relative; isolation: isolate; }
.ab-cams::before, .ab-honest::before, .ab-contact::before { content: ''; position: absolute; left: 0; right: 0; top: clamp(60px, 14vh, 180px); height: 46vh; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgb(40 80 170 / 0), rgb(40 80 170 / .13) 50%, rgb(40 80 170 / 0));
  -webkit-mask: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent); mask: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent); }

/* heads: light-born mono HUD labels over a thin anamorphic streak (the head rule) */
.ab-head { border-bottom-color: rgb(226 234 245 / .1); }
.ab-label { color: #f6f9fd !important; text-shadow: 0 0 1px rgb(255 255 255 / .6), 0 0 18px rgb(150 190 255 / .5), 0 0 48px rgb(90 140 255 / .22); }
.ab-flare { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgb(140 185 255 / .2) 0%, rgb(140 185 255 / .7) 14%, #ffffff 24%, rgb(140 185 255 / .6) 34%, rgb(140 185 255 / .14) 62%, rgb(140 185 255 / 0) 100%);
  box-shadow: 0 0 8px 0 rgb(150 190 255 / .55), 0 0 26px 2px rgb(90 140 255 / .18); }
@supports (animation-timeline: view()) {
  .ab-flare { animation: ab-flare linear both; animation-timeline: view(); animation-range: entry 10% cover 34%; }
  .ab-label, .ab-head-n { animation: ab-born-v linear both; animation-timeline: view(); animation-range: entry 20% cover 30%; }
}
@keyframes ab-flare { from { transform: scaleX(0); opacity: 0; } 30% { opacity: 1; } to { transform: scaleX(1); opacity: 1; } }
@keyframes ab-born-v { from { opacity: 0; filter: blur(8px) brightness(2.4); } 50% { opacity: 1; filter: blur(1.5px) brightness(1.8); } to { opacity: 1; filter: none; } }

/* cameras: ice-white names; the light sweep runs white-hot with blue fringes; the hover rule is a lit streak */
.ab-row { border-bottom-color: rgb(226 234 245 / .12); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ab-row-name { background-image: linear-gradient(100deg, #e4ebf5 0 38%, #5b9bff 44%, #d8f3fc 48%, #ffffff 50%, #d8f3fc 52%, #5b9bff 56%, #f2f6fb 62% 100%); }
}
.ab-row a:focus-visible .ab-row-name { filter: drop-shadow(0 0 22px rgb(110 160 255 / .35)); }
@media (hover: hover) and (pointer: fine) { .ab-row a:hover .ab-row-name { filter: drop-shadow(0 0 22px rgb(110 160 255 / .35)); } }
.ab-row a::after { background: linear-gradient(90deg, rgb(140 185 255 / .2), #ffffff 30%, rgb(140 185 255 / .5) 70%, rgb(140 185 255 / 0)); box-shadow: 0 0 10px rgb(150 190 255 / .6); }
/* the peek: smoked glass, hairline rim, a narrow glint streak */
.ab-peek-card { background: linear-gradient(160deg, rgb(28 38 56 / .86), rgb(6 10 18 / .82));
  box-shadow: inset 0 0 0 1px rgb(226 234 245 / .16), inset 0 1px 0 rgb(255 255 255 / .14), 0 40px 70px -30px rgb(0 0 0 / .9); }
.ab-peek-card::after { background: linear-gradient(115deg, rgb(255 255 255 / 0) 44%, rgb(216 243 252 / .32) 49.5%, rgb(255 255 255 / 0) 55%) 0 0 / 260% 100% no-repeat;
  background-position: calc(110% - var(--gx, .5) * 120%) 0; }
.ab-peek-3d::before { box-shadow: inset 0 0 0 1px rgb(226 234 245 / .16), inset 0 1px 0 rgb(255 255 255 / .12); }
.ab-peek-imgs img { filter: drop-shadow(0 20px 26px rgb(0 0 0 / .6)); }

/* how we show things: smoked glass with HUD corner ticks; the live model and study sit behind a hairline rim */
body[data-page="about"] .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[data-page="about"] .k-glass::after { background: linear-gradient(115deg, rgb(255 255 255 / 0) 42%, rgb(216 243 252 / .28) 49%, rgb(255 255 255 / 0) 56%) 0 0 / 260% 100% no-repeat;
  background-position: calc(110% - var(--gx, 0) * 120%) 0; }
.ab-card-glass::before { content: ''; position: absolute; inset: 10px; z-index: 3; pointer-events: none; opacity: .7; --c: rgb(226 234 245 / .8);
  background: linear-gradient(var(--c), var(--c)) 0 0 / 12px 1px no-repeat, linear-gradient(var(--c), var(--c)) 0 0 / 1px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / 12px 1px no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / 1px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / 12px 1px no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / 1px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / 12px 1px no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / 1px 12px no-repeat; }
.ab-card-glass--product img { filter: drop-shadow(0 22px 30px rgb(0 0 0 / .6)); }
.ab-card-model.ab-model-on { background: none; box-shadow: inset 0 0 0 1px rgb(226 234 245 / .14), 0 30px 60px -34px rgb(0 0 0 / .7); }
.ab-card-study.ab-study-on { box-shadow: inset 0 0 0 1px rgb(226 234 245 / .16), 0 30px 60px -30px rgb(0 0 0 / .7); }
.ab-callout-t { background: rgb(6 10 20 / .76); box-shadow: inset 0 0 0 1px rgb(226 234 245 / .18); }
.ab-card-line { color: #f2f6fb; }

/* independent: the line in light-born white */
.ab-indep-line { color: #f6f9fd; text-shadow: 0 0 1px rgb(255 255 255 / .4), 0 0 36px rgb(110 160 255 / .22); }

/* contact: the address light-born; the loupe becomes a square smoked viewfinder with corner ticks (no round glass) */
.ab-email { color: #f6f9fd; }
.ab-email-text { text-shadow: 0 0 1px rgb(255 255 255 / .5), 0 0 30px rgb(130 175 255 / .32), 0 0 80px rgb(90 140 255 / .14); }
.ab-lens { border-radius: 3px; background: rgb(4 8 16 / .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgb(226 234 245 / .2), 0 30px 60px -24px rgb(0 0 0 / .9); }
.ab-lens-view { color: #ffffff; text-shadow: -1.5px 0 rgb(255 70 120 / .4), 1.5px 0 rgb(40 170 255 / .45), 0 0 18px rgb(150 190 255 / .55); }
.ab-lens-rim { inset: 7px; border-radius: 0; -webkit-mask: none; mask: none; --c: #ffffff;
  background: linear-gradient(var(--c), var(--c)) 0 0 / 14px 1px no-repeat, linear-gradient(var(--c), var(--c)) 0 0 / 1px 14px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / 14px 1px no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / 1px 14px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / 14px 1px no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / 1px 14px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / 14px 1px no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / 1px 14px no-repeat; }
.ab-lines, .ab-lines li { border-color: rgb(226 234 245 / .12); }
.ab-lines-a:hover, .ab-lines-a:focus-visible { color: #fff; }
/* the kit cursor on the night ground: a HUD reticle (corner ticks, mono label), not a frosted sphere */
body:is([data-page="about"], [data-page="404"]) .k-cursor { border-radius: 0; background: linear-gradient(#fff, #fff) 0 0 / 10px 1px no-repeat, linear-gradient(#fff, #fff) 0 0 / 1px 10px no-repeat,
    linear-gradient(#fff, #fff) 100% 0 / 10px 1px no-repeat, linear-gradient(#fff, #fff) 100% 0 / 1px 10px no-repeat,
    linear-gradient(#fff, #fff) 0 100% / 10px 1px no-repeat, linear-gradient(#fff, #fff) 0 100% / 1px 10px no-repeat,
    linear-gradient(#fff, #fff) 100% 100% / 10px 1px no-repeat, linear-gradient(#fff, #fff) 100% 100% / 1px 10px no-repeat, rgb(4 8 16 / .35);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); box-shadow: inset 0 0 0 1px rgb(226 234 245 / .12); }
body:is([data-page="about"], [data-page="404"]) .k-cursor span { color: #f6f9fd; text-shadow: 0 0 12px rgb(130 175 255 / .6); }
@media (prefers-reduced-motion: reduce) { .ab-flare, .ab-label, .ab-head-n { animation: none !important; } }
/* the touch "tap here" hint: a HUD reticle (corner ticks + a crosshair), not a ring around a soft dot */
html.ab-gl .ab-play-ring { border: 0; border-radius: 0; --t: rgb(232 240 251 / .85);
  background: linear-gradient(var(--t), var(--t)) 0 0 / 9px 1px no-repeat, linear-gradient(var(--t), var(--t)) 0 0 / 1px 9px no-repeat,
    linear-gradient(var(--t), var(--t)) 100% 0 / 9px 1px no-repeat, linear-gradient(var(--t), var(--t)) 100% 0 / 1px 9px no-repeat,
    linear-gradient(var(--t), var(--t)) 0 100% / 9px 1px no-repeat, linear-gradient(var(--t), var(--t)) 0 100% / 1px 9px no-repeat,
    linear-gradient(var(--t), var(--t)) 100% 100% / 9px 1px no-repeat, linear-gradient(var(--t), var(--t)) 100% 100% / 1px 9px no-repeat; }
html.ab-gl .ab-play-dot { inset: 15px; border-radius: 0; opacity: .9; box-shadow: none;
  background: linear-gradient(#f6f9fd, #f6f9fd) 50% 50% / 100% 1px no-repeat, linear-gradient(#f6f9fd, #f6f9fd) 50% 50% / 1px 100% no-repeat;
  filter: drop-shadow(0 0 4px rgb(130 175 255 / .7)); }

/* =====================================================================================================================
   Round 13 · quiet confidence (owner: 「不够高级」, reference igloo.inc). Restraint over spectacle: one focal point per
   frame; a few large display lines in a thin weight; small, wide-tracked technical caps on one grid; a cool graphite
   night (no navy), clean highlights instead of text halos; calm space between sections. Layout and skin only.
   ===================================================================================================================== */
body[data-page="about"] {
  --ink: #e9eef5; --ink-2: #a9b4c3; --ink-40: rgb(226 234 245 / .36); --ink-12: rgb(226 234 245 / .11);
  --blue: #9cc0f5; --blue-deep: #d3e3fa;
  --night-0: #040508; --night-1: #07090d;
  --gl-backdrop: #0a0d13; --gl-backdrop-2: #040508;
  --ab-hud: rgb(196 208 224 / .6);
  --ab-disp: 520;   /* BRIEF display weight (one switch: 300 reads lighter, see the report) */
  --steel: #8a9bb0; --void: #05070b;
  background: #05070b;
}
html.ab-dark { background: #05070b; }
body[data-page="about"] ::selection { background: #d3e3fa; color: #05070b; }
/* the technical caps: one size, one tracking, everywhere on the page */
[data-page="about"] .k-micro, .ab-card-label .k-mono, .ab-peek-mark, .ab-callout { font: 450 11px/1.3 var(--mono); letter-spacing: var(--k-track, .16em); }
@media (max-width: 699px) { [data-page="about"] .k-micro, .ab-card-label .k-mono, .ab-callout { font-size: 10px; letter-spacing: .12em; } }

/* 1 · Hero: the word of light is the only focal point. The HUD clutter (corner ticks, rail, callout, play line) goes;
   the brand line and the scroll cue sit on one baseline at the foot of the frame. */
.ab-hud-c, .ab-hud-rail, .ab-hud-call, .ab-hud-play { display: none !important; }
.ab-tag, .ab-cue { bottom: clamp(48px, 9vh, 104px); }
.ab-tag { font-weight: var(--ab-disp); font-size: clamp(38px, 4.2vw, 80px); letter-spacing: -.04em; line-height: .92; }
html.ab-gl .ab-tag { color: #eef2f8; }
html.ab-gl .ab-tag-b { color: #f4f7fb; font-weight: 300; }
html.ab-gl .ab-tag .ab-l { text-shadow: none; }
@keyframes ab-born {
  0% { opacity: 0; filter: blur(12px) brightness(2.2); transform: translateY(.14em); }
  40% { opacity: 1; filter: blur(1.5px) brightness(1.5); }
  100% { opacity: 1; filter: none; transform: none; }
}
.ab-cue { gap: 14px; }
.ab-cue i { height: 56px; background: rgb(226 234 245 / .14); }
.ab-cue i::after { background: #eef2f8; animation-duration: 3.2s; }
@media (max-width: 699px) { .ab-tag { font-size: clamp(38px, 11vw, 54px); } }

/* 2 · Statement: no kicker (the hero already names the page); one thin, large paragraph, lit letter by letter. */
.ab-kicker { display: none; }
.ab-statement-text { max-width: 15.5em; font: var(--ab-disp) clamp(46px, 6.4vw, 128px)/1.02 var(--sans); letter-spacing: -.04em; }
html.ab-gl .ab-statement-text .ab-c {
  color: color-mix(in srgb, #ffffff calc(max(var(--hot), var(--m) * .8) * 100%), #dfe6f0);
  text-shadow: 0 0 calc(var(--hot) * 26px) rgb(190 214 255 / calc(var(--hot) * .55)); }
@media (max-width: 699px) { .ab-statement-text { font-size: clamp(36px, 10.4vw, 52px); line-height: 1.04; } }

/* Section rhythm and heads: more air between chapters; the head is a label and an index over a hairline with one
   travelling highlight (the end ticks go). */
.k-section { padding-top: clamp(128px, 24vh, 280px); }
.ab-head { padding-bottom: clamp(18px, 2.6vh, 30px); border-bottom-color: rgb(226 234 245 / .1); }
.ab-head::before, .ab-head::after, .ab-label::before { display: none; }
.ab-label { color: #eef2f8 !important; text-shadow: none; }
.ab-head-n { color: rgb(196 208 224 / .5); }
.ab-flare { background: linear-gradient(90deg, rgb(200 220 255 / 0) 0%, rgb(200 220 255 / .55) 10%, #ffffff 18%, rgb(200 220 255 / .3) 30%, rgb(200 220 255 / 0) 52%);
  box-shadow: 0 0 6px rgb(190 214 255 / .35); }
.ab-cams::before, .ab-honest::before, .ab-contact::before { background: linear-gradient(180deg, rgb(110 140 190 / 0), rgb(110 140 190 / .055) 50%, rgb(110 140 190 / 0)); }

/* 3 · Cameras: brand caps in a fixed column, the name in a thin display weight, the arrow a hairline glyph. */
.ab-row-n { display: none; }
.ab-row a { grid-template-columns: clamp(110px, 11vw, 176px) minmax(0, 1fr) auto; padding: clamp(14px, 2vw, 30px) 0; }
.ab-row-name { font-weight: var(--ab-disp); font-size: clamp(44px, 7.6vw, 140px); letter-spacing: -.045em; }
.ab-row-ext { font-weight: 200; font-size: clamp(24px, 2.6vw, 44px); color: rgb(226 234 245 / .7); }
.ab-row { border-bottom-color: rgb(226 234 245 / .09); }
.ab-row a:focus-visible .ab-row-name { filter: none; }
@media (hover: hover) and (pointer: fine) { .ab-row a:hover .ab-row-name { filter: none; } }
@media (max-width: 699px) {
  .ab-row a { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'brand ext' 'name ext'; padding: 18px 0 14px; }
  .ab-row-name { font-size: clamp(40px, 12.4vw, 60px); }
  .ab-row-ext { font-size: 24px; }
}

/* 4 · How we show things: three equal frames, quiet labels, the line in the thin display weight. */
.ab-card-glass::before { display: none; }
.ab-cards { gap: clamp(20px, 2.4vw, 44px); margin-top: clamp(36px, 6vh, 72px); }
.ab-card-label { margin-top: 22px; gap: 14px; }
.ab-card-n { color: rgb(196 208 224 / .5); }
.ab-card-line { margin-top: 10px; font: var(--ab-disp) clamp(22px, 2vw, 32px)/1.1 var(--sans); letter-spacing: -.03em; color: #eef3fa; }

/* 5 · Independent: not a headline but a quiet, centred note under a single falling hairline. */
.ab-indep { padding-top: clamp(150px, 26vh, 300px); }
.ab-indep .k-wrap::before { content: ''; display: block; width: 1px; height: clamp(56px, 9vh, 96px); margin: 0 auto clamp(28px, 5vh, 48px);
  background: linear-gradient(rgb(226 234 245 / 0), rgb(226 234 245 / .45)); }
.ab-indep-line { max-width: 31em; margin: 0 auto; text-align: center; font: 400 clamp(20px, 1.8vw, 30px)/1.42 var(--sans); letter-spacing: -.012em;
  color: var(--ink-2); text-shadow: none; text-wrap: balance; }

/* 6 · Contact: the address is the last focal point; thin, no halo, a hairline that draws on hover. */
.ab-email { color: #f2f5fa; }
.ab-email-text { font-weight: var(--ab-disp); font-size: clamp(34px, 6.6vw, 132px); letter-spacing: -.045em; text-shadow: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; }
.ab-email:hover .ab-email-text, .ab-email:focus-visible .ab-email-text { background-size: 100% 1px; }
@media (max-width: 699px) { .ab-email-text { font-size: clamp(30px, 9.4vw, 46px); } }
.ab-lines { margin-top: clamp(56px, 9vh, 104px); }
.ab-lines li { padding: 22px 0; }
.ab-lines-v { font-weight: 400; color: var(--ink-2); font-size: clamp(16px, 1.15vw, 19px); }
.ab-lines-a { color: #eef2f8; }
.ab-contact { padding-bottom: clamp(120px, 20vh, 240px); }

/* the runway's "Next" sits right above the name instead of floating mid-screen */
[data-page="about"] .k-runway-label { align-self: end; margin-bottom: clamp(16px, 2.4vh, 28px); }
[data-page="about"] .k-runway-name { font-weight: 300; letter-spacing: -.03em; }
[data-page="about"] .k-runway-line::after { background: linear-gradient(90deg, rgb(226 234 245 / .5), #ffffff); }
body[data-page="about"] .k-progress::after { background: linear-gradient(rgb(226 234 245 / .5), #ffffff); }

/* 4 · How we show things, as three chapters instead of a row of small cards: each label gets a large frame (8 of 12
   columns) and a hold of its own, alternating sides; the chapter letter is set large and thin beside it. */
@media (min-width: 900px) {
  .ab-cards { display: flex; flex-direction: column; gap: clamp(120px, 20vh, 240px); margin-top: clamp(72px, 12vh, 140px); --cg: clamp(32px, 4vw, 72px); }
  .ab-card { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); grid-template-rows: 1fr auto; column-gap: var(--cg); align-items: end; }
  .ab-card > figure { grid-column: 1; grid-row: 1 / span 2; }
  .ab-card-label { grid-column: 2; grid-row: 1; flex-direction: column; align-items: flex-start; gap: 18px; margin: 0; align-self: end; }
  .ab-card-line { grid-column: 2; grid-row: 2; margin-top: 18px; max-width: 11em; font-size: clamp(26px, 2.4vw, 40px); line-height: 1.08; }
  .ab-card:nth-child(even) { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .ab-card:nth-child(even) > figure { grid-column: 2; }
  .ab-card:nth-child(even) .ab-card-label, .ab-card:nth-child(even) .ab-card-line { grid-column: 1; }
  /* the chapter letter: a large thin capital with a hairline under it */
  .ab-card-n { font: 200 clamp(72px, 8vw, 150px)/.8 var(--sans) !important; letter-spacing: -.04em !important; color: #eef2f8 !important;
    padding-bottom: clamp(18px, 2.6vh, 28px); margin-bottom: 2px; border-bottom: 1px solid rgb(226 234 245 / .14); min-width: 2.2em; }
  /* the ring readout sits on the frame (8/12 of the card, aspect 16:10), not on the card */
  .ab-callout { right: calc((100cqw - var(--cg)) * 4 / 12 + var(--cg) + 18px); top: calc((100cqw - var(--cg)) * 8 / 12 * .625 * .3 - 12px); }
  .ab-card-glass--product img { padding: 8% 22%; }
}
@media (max-width: 899px) {
  .ab-cards { gap: clamp(64px, 10vh, 96px); }
  .ab-card-n { font: 200 44px/.8 var(--sans) !important; letter-spacing: -.03em !important; color: #eef2f8 !important; }
  .ab-card-label { align-items: flex-end; }
}
/* the statement as a three-line block; card C as a plain frame like A and B (the refractive slab read as a toy at
   chapter size) with the product resting on a soft floor light */
.ab-statement-text { max-width: 12.4em; }
.ab-card-glass--product { background: radial-gradient(60% 46% at 50% 86%, rgb(200 214 236 / .1), rgb(200 214 236 / 0) 70%), linear-gradient(160deg, rgb(30 38 52 / .5), rgb(8 10 16 / .4)); }
.ab-card-glass--product img { filter: drop-shadow(0 30px 34px rgb(0 0 0 / .65)); }

/* micro type colour (BRIEF): labels in steel, values in ice-ink; luminous display type is a gradient fill (ice-ink → ice)
   with no halo */
body[data-page="about"] { --ab-hud: #8a9bb0; }
.ab-label { color: #eef3fa !important; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ab-email-text { color: transparent; -webkit-background-clip: text; background-clip: text;
    background-image: linear-gradient(180deg, #eef3fa 30%, #a9c2ea 100%), linear-gradient(#eef3fa, #eef3fa);
    background-size: 100% 100%, 0 1px; background-position: 0 0, 0 100%; background-repeat: no-repeat; }
  .ab-email:hover .ab-email-text, .ab-email:focus-visible .ab-email-text { background-size: 100% 100%, 100% 1px; }
}
/* hero: one micro hint line in the frame (top right, under the header), instead of the callout and the three hints */
html.ab-gl.k-fine .ab-hud-play, html.ab-gl:not(.ab-coarse) .ab-hud-play { display: flex !important; left: auto; right: var(--gutter); bottom: auto; top: calc(var(--header-h) + 18px);
  transform: none; gap: 0; color: #8a9bb0; }
.ab-hud-play span::before { content: none; }
.ab-hud-play span + span::before { content: ' · '; white-space: pre; opacity: .7; }
html.ab-coarse .ab-hud-play { display: none !important; }
@media (max-width: 699px) { .ab-hud-play { display: none !important; } }

/* 3 · Cameras on a fixed grid: index | brand | name | arrow. The rows rise in place (no sideways slide, so the left
   edge never goes ragged); while one row is hovered or focused the others step back to ~35 %. */
.ab-row-n { display: block; }
.ab-row a { grid-template-columns: clamp(44px, 4.4vw, 76px) clamp(96px, 9vw, 150px) minmax(0, 1fr) auto;
  transform: translateY(calc((1 - var(--q)) * 56px)); }
.ab-row-n, .ab-row-brand { color: #8a9bb0 !important; }
.ab-row a > * { transition: opacity .45s var(--ease); }
.ab-rows:has(a:focus-visible) .ab-row a:not(:focus-visible) > * { opacity: .35; }
@media (hover: hover) and (pointer: fine) { .ab-rows:has(a:hover) .ab-row a:not(:hover) > * { opacity: .35; } }
@media (max-width: 699px) {
  .ab-row a { grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: 'n brand ext' 'n name ext'; }
  .ab-row-n { grid-area: n; align-self: start; padding-top: 2px; }
}

/* =====================================================================================================================
   Round 14 · pages r2 (「不够高级」·「一下就看完了」). (a) The display type goes light site-wide: weight 300, tracking
   −.03em, solid ice-ink (no gradient fills, no glows). (b) The camera list becomes a pinned chapter: each row holds in
   turn while that camera's filters turn into view on the optical axis, one camera at a time (about.js, peek3d.js
   scrub). (c) The phone hero is one lockup: the word of light with the brand line right under it, the HUD on the foot.
   ===================================================================================================================== */
body[data-page="about"] { --ab-disp: 300; --ab-track: -.03em; }
.ab-tag { font-weight: 300; letter-spacing: var(--ab-track); }
html.ab-gl .ab-tag-b { font-weight: 300; }
.ab-statement-text { font-weight: 300; letter-spacing: var(--ab-track); }
html.ab-gl .ab-statement-text .ab-c { text-shadow: none; }
.ab-card-line { font-weight: 300; letter-spacing: -.02em; }
/* the address: solid ice-ink (no clipped gradient), a hairline that draws on hover */
.ab-email-text { font-weight: 300; letter-spacing: var(--ab-track); color: #eef3fa; -webkit-background-clip: border-box; background-clip: border-box;
  background-image: linear-gradient(#eef3fa, #eef3fa); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; }
.ab-email:hover .ab-email-text, .ab-email:focus-visible .ab-email-text { background-size: 100% 1px; }
/* camera names: solid ice-ink (the gradient light sweep and its glow go); the hairline under a row is plain light */
.ab-row-name { font-weight: 300; letter-spacing: var(--ab-track); color: #eef3fa; background-image: none; -webkit-background-clip: border-box; background-clip: border-box; }
.ab-row a::after { background: rgb(238 243 250 / .62); box-shadow: none; }
.ab-row-ext { font-weight: 200; }

/* (b) the camera chapter ------------------------------------------------------------------------------------------- */
.ab-cams { padding-top: clamp(40px, 8vh, 96px); height: calc(var(--ab-cams-n, 5) * 92vh + 100vh); height: calc(var(--ab-cams-n, 5) * 92svh + 100svh); }
.ab-cams::before { display: none; }
.ab-cams-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; }
.ab-cams-wrap { padding-top: var(--header-h); }
.ab-cams-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 96px); align-items: center;
  margin-top: clamp(16px, 3vh, 40px); }
.ab-cams .ab-rows { grid-column: 1; grid-row: 1; }
.ab-cams .ab-row { overflow: visible; }
.ab-cams .ab-row a { grid-template-columns: clamp(40px, 3.6vw, 64px) clamp(84px, 7.4vw, 128px) minmax(0, 1fr) auto; padding: clamp(10px, 1.7vh, 20px) 0; transform: none; }
.ab-cams .ab-row-name { font-size: clamp(36px, 4.5vw, 86px); padding: .02em 0 .06em; }
.ab-cams .ab-row-ext { font-size: clamp(20px, 1.9vw, 32px); }
.ab-cams .ab-row a > * { transition: opacity .5s var(--ease), color .5s var(--ease); }
/* only the held row is lit; the rest step back (hover and focus still light the one under the pointer) */
.ab-cams[data-live] .ab-row:not(.is-on) a > * { opacity: .28; }
.ab-cams[data-live] .ab-rows:has(a:hover) .ab-row a:hover > *, .ab-cams[data-live] .ab-row a:focus-visible > * { opacity: 1; }
.ab-cams .ab-row.is-on a::after { transform: scaleX(1); transform-origin: 0 50%; transition: transform .9s var(--ease); }
.ab-cams .ab-row.is-on .ab-row-n, .ab-cams .ab-row.is-on .ab-row-brand { color: #eef3fa !important; }
.ab-cams .ab-row.is-on .ab-row-ext { color: #fff; }
/* the showcase: a borderless frame on the page's own black (the scene's edges are #05070b), the model on the axis */
.ab-show { grid-column: 2; grid-row: 1; position: relative; margin: 0; height: min(66vh, 680px); height: min(66svh, 680px); }
.ab-show-card { position: absolute; inset: 0; touch-action: pan-y; cursor: grab; }
.ab-show-card:active { cursor: grabbing; }
.ab-show-card .ab-peek-gl { -webkit-mask: radial-gradient(50% 50% at 50% 50%, #000 62%, transparent 100%); mask: radial-gradient(50% 50% at 50% 50%, #000 62%, transparent 100%); }
.ab-show-card.ab-peek-3d::before, .ab-show-card.ab-peek-3d::after, .ab-show-card::after { display: none; }
/* the photo fallback turns with the same phase (no WebGL, or until the models are built) */
.ab-show .ab-peek-imgs { position: absolute; inset: 16% 14% 18%; perspective: 900px; }
.ab-show .ab-peek-imgs img { opacity: 0; transform: none; transition: none; }
.ab-show .ab-peek-imgs img.on { opacity: calc(1 - max(0, (max(var(--ph, 0), calc(var(--ph, 0) * -1)) - .62) / .36));
  transform: translateX(var(--ox, 0%)) rotate(var(--or, 0deg)) rotateY(calc(var(--ph, 0) * 70deg)) scale(calc(1 - .2 * var(--ph, 0) * var(--ph, 0))); }
.ab-show-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; pointer-events: none; }
.ab-show-n { color: #eef3fa; }
.ab-show-mark { color: #8a9bb0; }
.ab-show-mark::before { content: '+ '; }
/* tablets and below (single column): the model above, the list under it */
@media (max-width: 899px) {
  .ab-cams-pin { align-items: stretch; }
  .ab-cams-wrap { display: flex; flex-direction: column; height: 100%; padding-top: calc(var(--header-h) + 10px); padding-bottom: clamp(16px, 3svh, 28px); }
  .ab-cams-grid { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; row-gap: clamp(8px, 1.6svh, 16px); margin-top: 6px; }
  .ab-show { grid-column: 1; grid-row: 1; height: auto; min-height: 0; align-self: stretch; }
  .ab-cams .ab-rows { align-self: end; }
  .ab-cams .ab-rows { grid-column: 1; grid-row: 2; }
}
@media (max-width: 699px) {
  .ab-cams .ab-row a { grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: 'n brand ext' 'n name ext'; row-gap: 0; padding: 8px 0 7px; }
  .ab-cams .ab-row-name { font-size: clamp(28px, 8.2vw, 40px); }
  .ab-cams .ab-row-ext { font-size: 20px; }
  .ab-show-cap { bottom: 2px; }
}
/* no JS: a plain list (no pin, no empty frame) */
html.no-js .ab-cams { height: auto; }
html.no-js .ab-cams-pin { position: static; height: auto; display: block; }
html.no-js .ab-show { display: none; }
html.no-js .ab-cams-grid { grid-template-columns: minmax(0, 1fr); }

/* (c) phone hero: one lockup. The brand line sits right under the word of light, on the word's left edge (--ab-ww and
   --lift come from the wordmark), so there is no dead third between them; the foot carries the HUD line (hints left,
   scroll cue right) as the frame's baseline. */
@media (max-width: 699px) and (max-aspect-ratio: 4/5) {
  html.ab-gl .ab-tag { top: calc(50% - var(--lift, 13svh) + var(--ab-ww, 92vw) * .11 + clamp(22px, 3.6svh, 36px)); bottom: auto;
    left: max(var(--gutter), calc(50% - var(--ab-ww, 92vw) / 2 + 2px)); font-size: clamp(36px, 10.4vw, 50px); }
  html.ab-gl .ab-cue { bottom: clamp(28px, 5svh, 48px); }
  html.ab-gl .ab-play { display: none; }
  html.ab-gl .ab-hero .ab-hud-play { display: flex !important; left: var(--gutter); right: auto; top: auto; bottom: clamp(28px, 5svh, 48px); transform: none; gap: 0;
    color: #8a9bb0; font-size: 10px; letter-spacing: .14em; align-items: center; height: 46px; }
}

/* Round 14 · P6: the serif italic as a 59 KB Latin WOFF2 subset (OFL 1.1; renamed per the Reserved Font Name 'Source',
   see /assets/fonts/LICENSES.txt); the full TTF stays as a fallback until every lane has switched. */
@font-face { font-family: 'SIHAN Serif'; src: url(/assets/fonts/SIHANSerif-Italic.woff2) format('woff2'); font-style: italic; font-weight: 200 900; font-display: swap; }
body[data-page="about"] { --serif: 'SIHAN Serif', 'Source Serif 4', 'Iowan Old Style', Georgia, serif; }

/* =====================================================================================================================
   Round 15 · pages r3. (a) The hero is one still composition: no shockwave arc (wordmark.js), a faint neutral key, and
   the brand line arrives as two calm lines (no per-letter blur), so any frame of it is a poster. (b) The camera model sits
   on the page's own black with a mirrored floor (peek3d.js), no lit disc and no CSS mask. (c) A/B/C are three held
   frames, the independent line a held caption, and the page ends on one composed frame: contact over the runway poster
   (the next page's filter on the optical axis), the footer as the last quiet band.
   ===================================================================================================================== */
/* (a) the brand line: two lines that rise in after the ignition; the letters stay whole */
html.ab-gl .ab-tag .ab-l { animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important; text-shadow: none !important; }
html.ab-gl .ab-tag-a, html.ab-gl .ab-tag-b { opacity: 0; }
html.ab-gl.ab-lit .ab-tag-a, html.ab-gl.ab-lit .ab-tag-b { animation: ab-line-in 1.1s var(--ease) .35s both; }
html.ab-gl.ab-lit .ab-tag-b { animation-delay: .5s; }
@keyframes ab-line-in { from { opacity: 0; transform: translateY(.18em); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html.ab-gl .ab-tag-a, html.ab-gl .ab-tag-b { animation: none !important; opacity: 1; } }

/* (b) the camera model: no mask, no frame; the floor is drawn in the scene */
.ab-show-card .ab-peek-gl { -webkit-mask: none; mask: none; }

/* (c) A/B/C: each a held frame (the figure and its label centred in one screen); the head opens the first */
.ab-honest { padding-top: clamp(96px, 16vh, 180px); }
@media (min-width: 900px) {
  .ab-cards { gap: 0; margin-top: 0; }
  .ab-card { grid-template-rows: auto auto; align-content: center; min-height: 100vh; min-height: 100svh; padding: clamp(40px, 7vh, 80px) 0; box-sizing: border-box; }
  .ab-card:first-child { min-height: calc(100svh - clamp(96px, 16vh, 180px) - 64px); padding-top: clamp(20px, 3vh, 40px); }
  .ab-card > figure { align-self: center; }
  .ab-card-glass { max-height: 64svh; }
}
@media (max-width: 899px) {
  .ab-cards { gap: 0; margin-top: clamp(24px, 4svh, 40px); }
  .ab-card { min-height: 78svh; display: flex; flex-direction: column; justify-content: center; }
}
/* the independent line: a held caption between the chapters and the contact (no orphan frame) */
.ab-indep { padding-top: 0; min-height: 100vh; min-height: 100svh; display: grid; align-content: center; }
.ab-indep .k-wrap::before { height: clamp(48px, 8vh, 80px); }

/* the end: contact (display-2 address, the two lines) and the runway poster share the last frame; the footer closes it */
.ab-contact { padding-top: clamp(40px, 7vh, 72px); padding-bottom: clamp(36px, 6vh, 64px); }
.ab-contact::before { display: none; }
.ab-mail { margin-top: clamp(20px, 3.4vh, 36px); }
.ab-email-text { font-size: clamp(40px, 6.4vw, 120px); line-height: 1; }
.ab-lines { margin-top: clamp(24px, 4vh, 44px); }
.ab-lines li { padding: clamp(12px, 1.8vh, 18px) 0; }
[data-page="about"] .k-runway-wrap { height: 36vh; height: 36svh; min-height: 290px; }
[data-page="about"] .k-runway { padding-top: clamp(16px, 2.6vh, 28px); padding-bottom: clamp(18px, 3vh, 32px); grid-template-rows: auto 1fr auto; }
[data-page="about"] .k-runway-label { align-self: start; margin: 0; justify-content: space-between; }
[data-page="about"] .k-runway-name { grid-row: 2; align-self: end; font-size: clamp(64px, 9vw, 168px); }
[data-page="about"] .k-runway-line { grid-row: 3; }
.ab-run-mark { color: var(--ab-hud) !important; }
.ab-run-preview { grid-column: 8 / -1; grid-row: 1 / 3; justify-self: end; align-self: end; width: auto; height: min(25svh, 236px); aspect-ratio: 1111 / 1416;
  background: none !important; box-shadow: none !important; border-radius: 0; }
.ab-run-preview::after { display: none; }
.ab-run-preview img { object-fit: contain; filter: drop-shadow(0 26px 30px rgb(0 0 0 / .6)); }
@media (max-width: 699px) {
  [data-page="about"] .k-runway-wrap { height: 32svh; min-height: 250px; }
  .ab-contact { padding-bottom: 28px; }
  .ab-mail { margin-top: 16px; }
  .ab-lines { margin-top: 20px; }
  .ab-lines li { padding: 10px 0; }
  [data-page="about"] .k-runway-name { font-size: clamp(52px, 16vw, 72px); grid-column: 1 / span 8; }
  .ab-run-preview { grid-column: 8 / -1; grid-row: 1 / 3; height: min(19svh, 160px); align-self: end; }
  .ab-email-text { font-size: clamp(30px, 9.4vw, 46px); }
}

/* =================== Aesthetic pass · 2026-10-30 round 2 (Claude): the camera index and its plate =================== */
/* stepped-back rows keep their index legible (the names still recede) */
.ab-cams[data-live] .ab-row:not(.is-on) a > :is(.ab-row-n, .ab-row-brand) { opacity: .62; }
.ab-cams[data-live] .ab-row:not(.is-on) a > .ab-row-name { opacity: .34; }
/* the showcase plate: a softened corner like the glass boards, its caption inset from the edge */
.ab-show-card { border-radius: clamp(14px, 1.4vw, 22px); overflow: hidden; }
.ab-show-cap { left: clamp(14px, 1.2vw, 20px); right: clamp(14px, 1.2vw, 20px); bottom: clamp(12px, 1.1vw, 18px); }