/* ==========================================================================
   Opal, as the application wears it — loaded after site.css on every page.
   Source: OmniBlick/assets/design/tokens.json and docs/DESIGN_SYSTEM.md (Opal is the one look since
   2026-10-09): porcelain ground, white glass surfaces, petrol ink #17313D, hairlines #D3E3E8, radii
   8 (controls) / 12 (cards) / 18 (surfaces), ink pill buttons, a pill segmented control with a white thumb.
   From the brand concepts (omniblick-brand, designs 26 Opal and 24 Celadon): the stat bar, the eyebrow with
   its short opal dash, the glass lenses, and the celadon and sea tints that give a workspace page its identity.
   ========================================================================== */
:root, .theme-light {
  --bg: #f2f7f8;            /* porcelain */
  --bg-2: #e6f0f3;          /* lvl2 */
  --bg-3: #dbe9ee;          /* wash */
  --bg-4: #c3d6de;          /* lvl3 */
  --paper: #fafcfd;         /* pearl */
  --paper-2: #f2f7f8;
  --paper-3: #e6f0f3;
  --r-control: 8px;
  --r-card: 12px;
  --r-surface: 18px;
  --surface: #ffffff;
  --glass: linear-gradient(165deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.72));
  --glass-line: rgba(23, 49, 61, 0.07);
  --hair: #e4eff2;          /* line2: dividers inside a surface */
  --shadow-card: 0 0 0 1px rgba(23, 49, 61, 0.07), 0 1px 2px rgba(23, 49, 61, 0.05), 0 26px 50px -32px rgba(23, 49, 61, 0.34);
  --shadow-float: 0 0 0 1px rgba(23, 49, 61, 0.08), 0 2px 6px rgba(23, 49, 61, 0.07), 0 30px 60px -26px rgba(23, 49, 61, 0.4);
  --tag-bg: #e6f0f3;
  --tag-fg: #3e5a66;
}
:root[data-theme="dark"], .theme-dark, .section--dark, .explorer, .story {
  --surface: #212425;
  --glass: linear-gradient(165deg, rgba(33, 36, 37, 0.92), rgba(24, 26, 27, 0.86));
  --glass-line: rgba(255, 255, 255, 0.07);
  --hair: #303537;
  --shadow-card: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.3), 0 26px 50px -32px rgba(0, 0, 0, 0.7);
  --shadow-float: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.3), 0 30px 60px -24px rgba(0, 0, 0, 0.75);
  --tag-bg: rgba(255, 255, 255, 0.08);
  --tag-fg: #bcc3c6;
}
/* the page grounds: porcelain, with pearl and wash bands; the drafting grid belongs to Design alone */
body { background: var(--bg); }
.section--paper { background: var(--paper); }
.section--paper2 { background: var(--bg-2); }
.page--paper { background: var(--bg); }
.sheet::before { display: none; }
.page--design .sheet::before { display: block; }

/* ---------- navigation: a floating glass bar ---------- */
.nav { height: auto; padding-top: 10px; align-items: flex-start; }
.nav__inner.wrap {
  width: min(calc(100% - 2 * var(--gutter)), calc(var(--wrap) - 2 * var(--gutter))); height: 56px; padding: 0 8px 0 18px;
  border-radius: 999px; background: var(--glass); box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
}
.nav.is-solid, .page--paper .nav.is-solid:not(.is-open) { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav.is-open .nav__inner.wrap { height: auto; border-radius: 22px; padding: 12px 12px 22px 20px; }
.nav__menu { border-radius: 999px; }

/* ---------- buttons: the ink pill, the white pill ---------- */
.btn { border-radius: 999px; }
.btn--primary, .section--paper .btn--primary, .section--paper2 .btn--primary, .page--paper .nav:not(.is-open) .btn--primary {
  color: var(--btn-fg); background: var(--btn-bg); border: 0; animation: none;
  box-shadow: 0 1px 2px rgba(23, 49, 61, 0.18), 0 10px 22px -12px rgba(23, 49, 61, 0.55);
}
.btn--primary::before { display: none; }
.btn--primary:hover { filter: brightness(1.18); }
.btn--ghost, .section--paper .btn--ghost, .section--paper2 .btn--ghost { background: var(--surface); color: var(--text); border: 1px solid var(--line-2); }
.section--paper .btn--ghost, .section--paper2 .btn--ghost { color: var(--ink); border-color: #d3e3e8; }
.btn--ghost:hover { border-color: rgba(var(--fg-rgb), 0.35); }

/* ---------- the eyebrow: a short opal dash, the label, and its qualifier at the far end ---------- */
.sta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.sta__rule { order: -1; flex: none; width: 26px; height: 1.5px; background: var(--opal-rim) !important; border-radius: 2px; }
.sta__c { margin-left: auto; }
@media (max-width: 720px) { .sta__rule { grid-column: auto; order: -1; } }

/* ---------- surfaces: every figure, plate, ledger and stat bar is a rounded glass card ---------- */
.frame {
  display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 0; border-radius: var(--r-surface);
  background: var(--glass); box-shadow: var(--shadow-card);
}
.frame::after { display: none; }
.frame__tag {
  position: static; order: -1; align-self: flex-start; max-width: 100%; margin: 2px 2px 0; padding: 4px 11px;
  border-radius: 999px; background: var(--tag-bg); color: var(--tag-fg); font-size: 10.5px; letter-spacing: 0.1em;
}
.frame img, .frame video, .frame canvas { border-radius: var(--r-card); }
.frame > [data-svg] { border-radius: var(--r-card); background: var(--paper); overflow: hidden; }
.crop { padding: 14px; border-radius: var(--r-surface); background: var(--glass); box-shadow: var(--shadow-card); }
.crop::after { display: none; }
.plates { border: 0; gap: 16px; }
.plate {
  border: 0; border-radius: var(--r-surface); background: var(--surface); box-shadow: var(--shadow-card);
  padding: 18px 20px 22px; transition: box-shadow var(--t-panel) var(--ease), transform var(--t-panel) var(--ease);
}
.plate:hover { background: var(--surface); box-shadow: var(--shadow-float); transform: translateY(-2px); }
.plate__fig { border-radius: var(--r-card); background: var(--paper); }
.ledger, .section--paper .ledger, .section--paper2 .ledger {
  padding: 4px 26px; border-top: 0; border-radius: var(--r-surface); background: var(--surface); box-shadow: var(--shadow-card);
}
.ledger__row, .section--paper .ledger__row, .section--paper2 .ledger__row { border-bottom-color: var(--hair); }
.ledger__row:last-child { border-bottom: 0; }
.ledger__row:hover { background: none; }
/* the stat bar: big numbers in one card, cells divided by hairlines (the left and top ones are clipped away) */
.readings, .counts, .facts, .section--paper .readings, .section--paper2 .readings, .section--paper .facts, .section--paper2 .facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 0; padding: 0; border-top: 0;
  border-radius: var(--r-surface); background: var(--surface); box-shadow: var(--shadow-card); overflow: hidden;
}
.readings > div, .counts > div, .facts > .fact, .facts > .fact + .fact, .section--paper .fact + .fact, .section--paper2 .fact + .fact {
  padding: 18px 22px 20px; border: 0; box-shadow: -1px 0 0 var(--hair), 0 -1px 0 var(--hair);
}
.facts { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.vs { padding: 4px 26px; border-top: 0; border-radius: var(--r-surface); background: var(--surface); box-shadow: var(--shadow-card); }
.vs__row { border-bottom-color: var(--hair); }
.vs__row:last-child { border-bottom: 0; }

/* ---------- controls ---------- */
.seg, .seg button { border-radius: 999px; }
.seg button[aria-pressed="true"] { background: var(--surface); box-shadow: 0 1px 2px rgba(23, 49, 61, 0.14); }
.cmdk, .tour, .compare, .explorer, .reel-player__monitor { border-radius: var(--r-surface); }
.tour { border: 0; box-shadow: var(--shadow-card); }
.cmdline { border-radius: var(--r-card); }
.edl__clip { border-radius: var(--r-control); }
.media { border-radius: var(--r-card); }
.contact { border: 0; border-radius: var(--r-surface); box-shadow: var(--shadow-card); background: var(--surface); }

/* ---------- the glass lenses (brand art): three translucent discs that cross, mint, sky and lilac ---------- */
.lenses { position: absolute; pointer-events: none; aspect-ratio: 1; }
.lenses i {
  position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%; opacity: 0.55; mix-blend-mode: multiply;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.95) 0 8%, rgba(255, 255, 255, 0) 38%), var(--c);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.95), inset 0 -24px 60px rgba(23, 49, 61, 0.06);
  animation: lens-drift 22s ease-in-out infinite alternate;
}
.lenses i:nth-child(1) { --c: #a8e6d1; left: 19%; top: 0; }
.lenses i:nth-child(2) { --c: #a9d8f5; left: 0; top: 34%; animation-delay: -7s; }
.lenses i:nth-child(3) { --c: #c9c4f2; left: 38%; top: 34%; animation-delay: -14s; }
@keyframes lens-drift { to { transform: translate(2.5%, -2%); } }
:root[data-theme="dark"] .lenses i { mix-blend-mode: screen; opacity: 0.22; }
@media (prefers-reduced-motion: reduce) { .lenses i { animation: none; } }

/* ---------- a workspace page's identity: its own tint over the same family ---------- */
.page--twin { --id: #1f6a4e; --id-soft: #a9e0be; --id-wash: #e2f0e6; --id-tint: #eef5ef; }   /* celadon: the landscape */
.page--geo { --id: #12839a; --id-soft: #9fd8d2; --id-wash: #dbf0ee; --id-tint: #eef7f6; }    /* sea glass: the map */
.page--design { --id: #1e6fb8; --id-soft: #a9d8f5; --id-wash: #e6f0f3; --id-tint: #f2f7f8; } /* sky: the drawing */
.page--present { --id: #5e52c4; --id-soft: #c9c4f2; --id-wash: #ece9fa; --id-tint: #f5f4fd; } /* lilac: the screen */
[class*="page--"] .sta__k { color: var(--id, var(--accent)); }
.id-wash { background: var(--id-wash, var(--bg-2)); }
.id-tint { background: var(--id-tint, var(--paper)); }

/* ---------- the landing's cover: centred title over the glass lenses, a stat bar, the application itself ---------- */
.hero-o { position: relative; overflow: clip; padding: calc(var(--nav-h) + clamp(44px, 7vw, 104px)) 0 clamp(64px, 8vw, 120px); }
.hero-o__lenses { width: min(820px, 92vw); left: 50%; top: calc(var(--nav-h) - 40px); transform: translateX(-50%); opacity: 0.9; }
.hero-o .display { font-size: clamp(42px, 6vw, 94px); }
.hero-o .head-center { position: relative; }
.sta--center { justify-content: center; }
.sta--center .sta__rule { order: 0; }
.hero-o__stats { width: min(980px, 100%); margin: 6px auto 0; }
.hero-o__stats b { font-size: clamp(26px, 2.6vw, 38px); }
.hero-o__app { width: min(1180px, 100%); margin: 8px auto 0; }
@media (max-width: 600px) { .hero-o__lenses { width: 130vw; top: 40px; opacity: 0.6; } }

/* ---------- the start animation (assets/js/splash.js), at the head of the landing ---------- */
.splash { position: relative; height: clamp(250px, 34vh, 360px); margin: 0 auto -6px; width: min(560px, 100%); --splash-ink: var(--text); --splash-muted: #54666f; }
.splash canvas { position: absolute; inset: 0; }
:root[data-theme="dark"] .splash { --splash-muted: #a0a6ac; }
.hero-o { padding-top: calc(var(--nav-h) + clamp(16px, 3vw, 40px)); }

/* ---------- type, as the brand sets it: Outfit at two extremes — 200 for scale, 600 for weight ---------- */
@font-face { font-family: "Outfit"; src: url("../fonts/Outfit-ExtraLight.woff2") format("woff2"); font-weight: 200; font-display: swap; }
.display, .h2 { font-weight: 200; }
.display strong, .h2 strong { font-weight: 600; }
.display { letter-spacing: -0.045em; }
/* the brand's card radius for the large surfaces */
:root { --r-surface: 24px; }

/* ==========================================================================
   Photos to Twin — the photographic survey lab, in Celadon: prints on a white mat with their EXIF line,
   a contact sheet with frame numbers and the second each was taken, the flight plan in jade
   ========================================================================== */
.page--twin [data-svg] { --accent: var(--id); --soft: var(--id-soft); }
.twin-head { padding: calc(var(--nav-h) + clamp(40px, 6vw, 88px)) 0 clamp(56px, 7vw, 96px); background: radial-gradient(70% 80% at 85% 30%, var(--id-wash) 0%, transparent 70%), var(--bg); }
.page--twin .lead strong, .page--twin .opal-text { color: var(--id); }
/* a print: white mat, the photograph, and its EXIF under it like the back of a print */
.print { margin: 0 auto; width: min(1100px, 100%); padding: clamp(10px, 1.6vw, 22px) clamp(10px, 1.6vw, 22px) 0; background: #fff; border-radius: var(--r-surface); box-shadow: var(--shadow-float); }
.print img { width: 100%; border-radius: 6px; }
.print figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 22px; padding: 14px 4px 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-2); }
.print figcaption span:first-child { color: var(--id); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
/* the contact sheet: the frames as they came off the camera, numbered */
.contact-sheet { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; padding: 14px; border-radius: var(--r-surface); background: #17313d; box-shadow: var(--shadow-card); }
.contact-sheet figure { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.contact-sheet img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.contact-sheet figcaption { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; color: #a9e0be; }
.contact-sheet figcaption span { color: rgba(234, 246, 244, 0.55); }
@media (max-width: 900px) { .contact-sheet { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 460px) { .contact-sheet { grid-template-columns: repeat(3, minmax(0, 1fr)); } .contact-sheet figure:nth-child(n + 13) { display: none; } }
/* the stages as framed prints in a 2 x 2 */
.seq .frame img { aspect-ratio: 16 / 9; object-fit: cover; }
.seq .frame figcaption { display: flex; flex-direction: column; gap: 2px; padding: 2px 4px 4px; }
.seq .frame figcaption b { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--text); }
.seq .frame figcaption i { font-style: normal; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.limits { padding: 22px 26px; border-radius: var(--r-surface); background: var(--surface); box-shadow: var(--shadow-card); border: 0; }
.compare { box-shadow: var(--shadow-card); border: 0; }

/* ==========================================================================
   The landing's lenses: the app mark, drawn large behind the title (inline SVG on the mark's own 512 grid).
   With html.intro (once per visit, motion allowed) the start animation plays at the lens centre first; at
   .is-open the mark grows into the lenses and the title rises.
   ========================================================================== */
.hero-o { --lens-w: min(900px, 118vw); --lens-cy: calc(var(--nav-h) + clamp(230px, 31vh, 330px)); }
.hero-o__stage { position: absolute; left: 50%; top: var(--lens-cy); width: 0; height: 0; pointer-events: none; }
.hero-o__lenses { position: absolute; width: var(--lens-w); aspect-ratio: 1; left: calc(var(--lens-w) / -2); top: calc(var(--lens-w) / -2);
  opacity: 0.62; transform-origin: 50% 50%; }
.hero-o__lenses .hl { width: 100%; height: 100%; overflow: visible; }
.hl__core { opacity: 0.2; }
.hl__datum { opacity: 0.85; }
.hl__lens { transform-box: fill-box; transform-origin: center; animation: hl-drift 24s ease-in-out infinite alternate; }
.hl__lens--l { animation-delay: -8s; } .hl__lens--r { animation-delay: -16s; }
@keyframes hl-drift { to { transform: translate(1.2%, -0.9%) scale(1.012); } }
:root[data-theme="dark"] .hero-o__lenses { opacity: 0.32; }
:root[data-theme="dark"] .hl__lens circle:first-child { mix-blend-mode: screen !important; }
/* the start animation sits so its mark's centre is the lenses' centre */
.splash { position: absolute; width: 420px; height: 330px; left: -210px; top: -132px; margin: 0; --splash-ink: var(--text); --splash-muted: #54666f; }
html:not(.intro) .splash { display: none; }
.hero-o .head-center { position: relative; }
.hero-o .head-center .lead { max-width: 54ch; }
/* the intro */
html.intro .hero-o__lenses { opacity: 0; transform: scale(var(--s0, 0.19)); }
html.intro .hero-o.is-open .hero-o__lenses { opacity: 0.62; transform: none; transition: transform 1.7s var(--ease), opacity 0.6s var(--ease); }
html.intro .hero-o.is-open .splash { opacity: 0; transition: opacity 0.7s var(--ease) 0.15s; }
html.intro .hero-o .head-center > *, html.intro .hero-o .hero-o__app { opacity: 0; transform: translateY(18px); }
html.intro .hero-o.is-open .head-center > *, html.intro .hero-o.is-open .hero-o__app { opacity: 1; transform: none; transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
html.intro .hero-o.is-open .head-center > :nth-child(1) { transition-delay: 0.55s; }
html.intro .hero-o.is-open .head-center > :nth-child(2) { transition-delay: 0.7s; }
html.intro .hero-o.is-open .head-center > :nth-child(3) { transition-delay: 0.85s; }
html.intro .hero-o.is-open .head-center > :nth-child(4) { transition-delay: 1s; }
html.intro .hero-o.is-open .hero-o__app { transition-delay: 1.2s; }
@media (max-width: 600px) { .hero-o { --lens-w: 150vw; --lens-cy: calc(var(--nav-h) + 250px); } .splash { transform: scale(0.85); } }
@media (prefers-reduced-motion: reduce) { .hl__lens { animation: none; } }
/* behind text the fused core stays a faint tint and the datum dot (which would sit between words) is left out */
.hero-o .hl__core { opacity: 0.12; }
.hero-o .hl__datum { display: none; }
.twin-head .display { font-size: clamp(42px, 4.8vw, 76px); }

/* ==========================================================================
   Geo — the map sheet, in sea glass: contour plans with neatlines, legends and scale bars; the survey live
   ========================================================================== */
.page--geo [data-svg] { --accent: var(--id); --soft: var(--id-soft); }
.geo-head { padding: calc(var(--nav-h) + clamp(40px, 6vw, 88px)) 0 clamp(56px, 7vw, 96px); background: radial-gradient(70% 80% at 85% 30%, var(--id-wash) 0%, transparent 70%), var(--bg); }
.geo-head .display { font-size: clamp(42px, 4.8vw, 76px); }
.page--geo .explorer { box-shadow: var(--shadow-card); border: 0; }
.page--geo .explorer__read { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; }

/* ==========================================================================
   Present — the screening room: the one dark page, lilac light, the reel as its hero
   ========================================================================== */
.page--present.theme-dark { --id: #c9c4f2; --id-soft: #a69cf0; --id-wash: #17161f; --id-tint: #131217; background: #0e0f11; }
.present-head { padding: calc(var(--nav-h) + clamp(36px, 5vw, 72px)) 0 clamp(48px, 6vw, 88px); background: radial-gradient(60% 50% at 50% 0%, rgba(166, 156, 240, 0.16) 0%, transparent 70%); }
.present-head .display { font-size: clamp(42px, 5.6vw, 88px); }
.present-head .reel-player { width: min(1180px, 100%); margin: 0 auto; }
.page--present .reel-player__monitor { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 40px 90px -40px rgba(0, 0, 0, 0.9), 0 0 120px -40px rgba(166, 156, 240, 0.35); }
.page--present .ladder li { border-top-color: var(--line-2); border-left-color: var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); }
.page--present .ladder b { color: var(--text); }
.page--present .ladder span { color: var(--text-2); }
.page--present .ladder code { color: var(--id); }
.page--present .gallery figcaption { color: var(--text-3); }

/* ---------- dark mode: the paper sections become dark bands, and the ink tokens follow the theme ---------- */
:root[data-theme="dark"] {
  --ink: #e8eaeb; --ink-2: #bcc3c6; --ink-3: #8f979b; --accent-ink: #a9cdf0;
  --paper: #141617; --paper-2: #111314; --paper-3: #181a1b; --paper-line: rgba(236, 238, 239, 0.1);
}
:root[data-theme="dark"] .section--paper2 { background: #111314; }
:root[data-theme="dark"] .section--paper { background: #141617; }
:root[data-theme="dark"] .section--paper, :root[data-theme="dark"] .section--paper2 { color: var(--text); color-scheme: dark; }
/* a page that stays light whatever the theme keeps its ink (Design) */
.theme-light {
  --ink: #17313d; --ink-2: #3e5a66; --ink-3: #5b7480; --accent-ink: #24597d;
  --paper: #fafcfd; --paper-2: #f2f7f8; --paper-3: #e6f0f3; --paper-line: rgba(23, 49, 61, 0.12);
}
/* the workspace identity tints in the dark theme: the same hue, as a deep band, and a light accent */
:root[data-theme="dark"] .page--twin { --id: #a9e0be; --id-soft: #1f6a4e; --id-wash: #142019; --id-tint: #101814; }
:root[data-theme="dark"] .page--geo { --id: #9fd8d2; --id-soft: #12839a; --id-wash: #11201f; --id-tint: #0e1919; }
:root[data-theme="dark"] .id-wash, :root[data-theme="dark"] .id-tint { color: var(--text); }

/* ==========================================================================
   Gallery (gallery.html): sections by kind, one film and its stills each; a pill index at the head
   ========================================================================== */
.page--gallery { --id: #24597d; --id-wash: #e6f0f3; --id-tint: #eef4f6; }
:root[data-theme="dark"] .page--gallery { --id: #a9cdf0; --id-wash: #15191b; --id-tint: #111416; }
.gal-head { padding: calc(var(--nav-h) + clamp(40px, 6vw, 88px)) 0 clamp(32px, 4vw, 56px); background: radial-gradient(60% 70% at 50% 0%, var(--bg-2) 0%, transparent 70%); }
.gal-head .display { font-size: clamp(42px, 5.6vw, 88px); }
.gal-index { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.gal-index a { padding: 9px 16px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-card); font-size: 14.5px; color: var(--text-2); transition: color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.gal-index a:hover { color: var(--text); box-shadow: var(--shadow-float); }
.page--gallery .gallery figure.frame video, .page--gallery .gallery figure.frame img { aspect-ratio: 16 / 9; object-fit: cover; }
.page--gallery .gallery__main img { aspect-ratio: auto; height: 100%; }
@media (max-width: 900px) { .page--gallery .gallery__main img { aspect-ratio: 16 / 9; height: auto; } }

/* ==========================================================================
   Landing: what it does (stages), FusionCore (the engine), formats (in and out)
   ========================================================================== */
/* the kinds of data one scene holds, each with its data colour (tokens: k-cloud, k-mesh, k-splat …) */
.kinds { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; }
.kinds li { display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px 8px 12px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-card); font-size: 14.5px; color: var(--text); }
.kinds li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--k); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k) 18%, transparent); }
/* the four stages, one glass card each */
.stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stage { display: flex; flex-direction: column; gap: 14px; padding: 22px 20px 20px; border-radius: var(--r-surface); background: var(--surface); box-shadow: var(--shadow-card); }
.stage header { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; padding-bottom: 14px; border-bottom: 1px solid var(--hair); }
.stage__no { grid-row: span 2; font-family: var(--font-mono); font-size: 11px; color: var(--accent); }
.stage h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.01em; }
.stage header p { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.stage ul { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; }
.stage li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; }
.stage li svg { width: 26px; height: 26px; color: var(--accent); }
.stage li b { display: block; font-size: 15.5px; color: var(--text); }
.stage li span { display: block; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.scope__foot { text-align: center; color: var(--text-2); }
@media (max-width: 1100px) { .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .stages { grid-template-columns: 1fr; } }

/* FusionCore: four parts around the fused core */
.core { background: radial-gradient(60% 55% at 50% 58%, rgba(169, 216, 245, 0.28) 0%, transparent 70%), var(--bg); overflow: clip; }
.core__grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.core__mark { position: absolute; left: 50%; top: 50%; width: 168px; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 2; display: grid; place-items: center;
  border-radius: 50%; background: radial-gradient(circle, var(--bg) 0 58%, transparent 70%); pointer-events: none; }
.core__mark img { width: 118px; height: 118px; filter: drop-shadow(0 16px 30px rgba(23, 49, 61, 0.25)); }
.core__mark span { position: absolute; bottom: 4px; font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.02em; color: var(--text); }
.core__part { display: flex; flex-direction: column; gap: 12px; padding: 26px 28px 28px; border-radius: var(--r-surface); background: var(--glass); box-shadow: var(--shadow-card); }
.core__part:nth-of-type(odd) { padding-right: 104px; }   /* room for the core where the four cards meet */
.core__part:nth-of-type(even) { padding-left: 104px; }
.core__k { display: flex; gap: 10px; align-items: baseline; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.core__k span { color: var(--text-3); }
.core__part h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 1.8vw, 25px); line-height: 1.2; letter-spacing: -0.01em; color: var(--text); }
.core__part ul { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; }
.core__part li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.core__part li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 1.5px; border-radius: 2px; background: var(--opal-rim); }
:root[data-theme="dark"] .core { background: radial-gradient(60% 55% at 50% 58%, rgba(126, 196, 239, 0.08) 0%, transparent 70%), var(--bg); }
@media (max-width: 900px) {
  .core__grid { grid-template-columns: 1fr; }
  .core__mark { position: relative; left: auto; top: auto; transform: none; margin: 0 auto -6px; }
  .core__part:nth-of-type(odd), .core__part:nth-of-type(even) { padding: 22px 22px 24px; }
}

/* formats: the search, its answer, and the wall by kind */
.formats-x .h2 strong { font-weight: 600; }
.fmt-search { display: flex; flex-direction: column; gap: 16px; }
.fmt-search__bar { display: flex; align-items: center; gap: 12px; width: min(720px, 100%); margin: 0 auto; padding: 14px 20px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-float); }
.fmt-search__bar svg { width: 20px; height: 20px; flex: none; color: var(--text-3); }
.fmt-search__bar input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: 17px; color: var(--text); }
.fmt-search__answer { min-height: 1.6em; text-align: center; color: var(--text-2); font-size: 15.5px; }
.fmt-search__answer .ok { font-weight: 600; color: #1a7f57; }
.fmt-search__answer .no { font-weight: 600; color: #946209; }
:root[data-theme="dark"] .fmt-search__answer .ok { color: #7fd9bd; }
:root[data-theme="dark"] .fmt-search__answer .no { color: #e3b45e; }
.fmt-groups { columns: 3 300px; column-gap: 16px; }
.fmt-group { break-inside: avoid; margin: 0 0 16px; padding: 18px 20px 20px; border-radius: var(--r-surface); background: var(--surface); box-shadow: var(--shadow-card); }
.fmt-group h3 { margin-bottom: 12px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.fmt-group ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.fmt-group li { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--bg-2); font-size: 13.5px; color: var(--text); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), opacity var(--t-fast); }
.fmt-group li i { font-style: normal; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--text-3); }
.fmt-search.is-searching .fmt-group li { opacity: 0.38; }
.fmt-search.is-searching .fmt-group li.is-hit { opacity: 1; background: var(--btn-bg); color: var(--btn-fg); }
.fmt-search.is-searching .fmt-group li.is-hit i { color: inherit; opacity: 0.7; }