/* Generated by tools/build-site-assets.mjs. Edit source layers, not this file. */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400;1,6..72,500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400&display=swap");
/* source: site.css */
/* =================================================================
Vertex — shared site styles
All pages link this. Page-specific CSS stays inline per page.
================================================================= */
/* Editorial drop-cap face — Playfair Display italic 700, loaded directly
in the tag of pages that use drop caps (manifesto, safety,
culture, model-card). Lives on the same Google Fonts request as Inter
Tight + JetBrains Mono so there's no extra round trip. */
:root {
--bg: #0a0b0d;
--bg-2: #101216;
--bg-3: #15171b;
--line: #1f2227;
--line-2: #2a2d33;
--fg: #e8e6e1;
--fg-dim: #8b8d92;
--fg-dimmer: #74767c;
--accent: #b8e6b3;
--grid-line: rgba(255,255,255,0.025);
--topnav-bg: rgba(10,11,13,0.92);
--topnav-bg-mid: rgba(10,11,13,0.6);
--hero-overlay:
radial-gradient(ellipse at 50% 55%, transparent 35%, rgba(10,11,13,0.35) 75%, rgba(10,11,13,0.9) 100%),
linear-gradient(to right, rgba(10,11,13,0.95), transparent 25%);
}
[data-theme="light"] {
--bg: #c4c6ca;
--bg-2: #b9bbbf;
--bg-3: #afb1b5;
--line: #8a8c90;
--line-2: #75777b;
--fg: #16181c;
--fg-dim: #3c3e44;
--fg-dimmer: #454649;
--accent: #185014;
--grid-line: rgba(0,0,0,0.06);
--topnav-bg: rgba(196,198,202,0.95);
--topnav-bg-mid: rgba(196,198,202,0.7);
--hero-overlay:
radial-gradient(ellipse at 50% 55%, transparent 35%, rgba(196,198,202,0.35) 75%, rgba(196,198,202,0.9) 100%),
linear-gradient(to right, rgba(196,198,202,0.95), transparent 25%);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
background: var(--bg);
color: var(--fg);
font-family: 'Inter Tight', -apple-system, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Text selection — native ::selection only (compositor-rendered, zero lag).
Backgrounds are OPAQUE on purpose: WebKit repaints translucent selection
backgrounds on every live extension, which flickers per character. These
hexes are the accent pre-blended against each theme's --bg, so they look
identical to the translucent version without the flicker. */
::selection {
background-color: #425142; /* accent @32% over #0a0b0d */
color: inherit;
text-shadow: none;
}
::-moz-selection {
background-color: #425142;
color: inherit;
text-shadow: none;
}
[data-theme="light"] ::selection,
[data-theme="light"] ::-moz-selection {
background-color: #a3b5a6; /* green @22% over #c4c6ca */
color: inherit;
}
body { min-height: 100vh; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
/* Defensive: prevent any embedded media from causing horizontal scroll on
narrow viewports. Targets img/video/iframe — not canvas (Three.js wants
to manage its own width). */
img, video, iframe, picture, source { max-width: 100%; }
img, video { height: auto; }
img.fill, video.fill { height: 100%; }
/* Background grid */
body::before {
content: '';
position: fixed; inset: 0;
background-image:
linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
background-size: 80px 80px;
pointer-events: none; z-index: 1;
}
/* ════════════════════════════════════════════════════════════════════
Command palette — Cmd/Ctrl+K. Searchable list of nav targets +
actions. Esc closes. Up/Down navigates, Enter executes. Lives at
top of stacking order so it never gets buried.
════════════════════════════════════════════════════════════════════ */
.cmdpal-scrim {
position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.66);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 2147483640;
display: none;
opacity: 0;
transition: opacity 0.18s ease;
}
.cmdpal-scrim.is-open { display: block; opacity: 1; }
.cmdpal {
position: fixed;
top: 22vh; left: 50%;
transform: translateX(-50%) translateY(-8px);
width: min(560px, 92vw);
background: var(--bg);
border: 1px solid var(--line-2);
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
z-index: 2147483641;
display: none;
opacity: 0;
transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
font-family: 'Inter Tight', sans-serif;
}
.cmdpal-scrim.is-open + .cmdpal,
.cmdpal.is-open {
display: block;
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.cmdpal-input {
width: 100%;
background: transparent;
border: none;
border-bottom: 1px solid var(--line);
color: var(--fg);
font-family: inherit;
font-size: 16px;
padding: 18px 20px;
outline: none;
}
.cmdpal-input::placeholder { color: var(--fg-dimmer); }
.cmdpal-list {
max-height: 50vh;
overflow-y: auto;
padding: 8px 0;
}
.cmdpal-item {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 18px;
padding: 10px 20px;
cursor: pointer;
font-size: 14px;
color: var(--fg-dim);
border-left: 2px solid transparent;
}
.cmdpal-item.is-active {
background: var(--bg-2);
color: var(--fg);
border-left-color: var(--accent);
}
.cmdpal-item .label { display: flex; flex-direction: column; gap: 2px; }
.cmdpal-item .name { color: inherit; }
.cmdpal-item.is-active .name { color: var(--fg); }
.cmdpal-item .sub {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.16em;
color: var(--fg-dimmer);
text-transform: uppercase;
}
.cmdpal-item .kbd {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.12em;
color: var(--fg-dimmer);
border: 1px solid var(--line);
padding: 2px 6px;
border-radius: 2px;
}
.cmdpal-foot {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
border-top: 1px solid var(--line);
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.16em;
color: var(--fg-dimmer);
text-transform: uppercase;
}
.cmdpal-foot .keys { display: flex; gap: 10px; }
.cmdpal-foot .keys span { display: inline-flex; align-items: center; gap: 4px; }
.cmdpal-foot .keys span::before {
content: attr(data-key);
border: 1px solid var(--line);
padding: 1px 5px;
border-radius: 2px;
color: var(--fg-dim);
font-size: 9px;
}
.cmdpal-empty {
padding: 24px 20px;
text-align: center;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.14em;
color: var(--fg-dimmer);
text-transform: uppercase;
}
/* ════════════════════════════════════════════════════════════════════
Site search — press `/` to open. Shares modal chrome with cmdpal
but indexes a richer corpus (titles + descriptions + headings) and
highlights matched terms inline. Distinct DOM so both can coexist.
════════════════════════════════════════════════════════════════════ */
.search-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.66); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 2147483640; display: none; opacity: 0; transition: opacity 0.18s ease; }
.search-scrim.is-open { display: block; opacity: 1; }
.search-modal {
position: fixed; top: 14vh; left: 50%;
transform: translateX(-50%) translateY(-8px);
width: min(640px, 94vw);
background: var(--bg);
border: 1px solid var(--line-2);
box-shadow: 0 24px 80px rgba(0,0,0,0.6);
z-index: 2147483641;
display: none; opacity: 0;
transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
font-family: 'Inter Tight', sans-serif;
}
.search-modal.is-open { display: block; opacity: 1; transform: translateX(-50%) translateY(0); }
.search-input {
width: 100%; background: transparent; border: none;
border-bottom: 1px solid var(--line);
color: var(--fg); font-family: inherit; font-size: 17px;
padding: 20px 22px 20px 52px; outline: none;
}
.search-input::placeholder { color: var(--fg-dimmer); }
.search-icon {
position: absolute; top: 22px; left: 22px;
width: 16px; height: 16px;
border: 1px solid var(--accent); border-radius: 50%;
pointer-events: none;
}
.search-icon::after {
content: ''; position: absolute; top: 14px; left: 12px;
width: 8px; height: 1px; background: var(--accent);
transform: rotate(45deg); transform-origin: left center;
}
.search-list { max-height: 56vh; overflow-y: auto; padding: 8px 0; }
.search-item {
display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 16px;
padding: 12px 22px; cursor: pointer; color: var(--fg-dim);
border-left: 2px solid transparent;
text-decoration: none;
}
.search-item.is-active { background: var(--bg-2); color: var(--fg); border-left-color: var(--accent); }
.search-item-body { display: grid; gap: 4px; min-width: 0; }
.search-item-crumb {
font-family: 'JetBrains Mono', monospace;
font-size: 10px; letter-spacing: 0.16em; color: var(--fg-dimmer); text-transform: uppercase;
}
.search-item-crumb .sep { color: var(--line-2); margin: 0 6px; }
.search-item-title { font-size: 15px; font-weight: 500; color: inherit; letter-spacing: -0.01em; line-height: 1.3; }
.search-item.is-active .search-item-title { color: var(--fg); }
.search-item-snippet { font-size: 13px; line-height: 1.5; color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.search-item mark { background: rgba(184,230,179,0.22); color: var(--accent); padding: 0 1px; border-radius: 1px; }
.search-item .kbd {
font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em;
color: var(--fg-dimmer); border: 1px solid var(--line); padding: 2px 6px; border-radius: 2px; align-self: center;
}
.search-foot {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 22px; border-top: 1px solid var(--line);
font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em;
color: var(--fg-dimmer); text-transform: uppercase;
}
.search-foot .keys { display: flex; gap: 10px; }
.search-foot .keys span { display: inline-flex; align-items: center; gap: 4px; }
.search-foot .keys span::before {
content: attr(data-key);
border: 1px solid var(--line); padding: 1px 5px; border-radius: 2px;
color: var(--fg-dim); font-size: 9px;
}
.search-empty {
padding: 32px 22px; text-align: center;
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.14em; color: var(--fg-dimmer); text-transform: uppercase;
}
.search-empty .hint { display: block; margin-top: 8px; font-size: 10px; opacity: 0.7; }
@media (max-width: 600px) {
.search-modal { top: 8vh; width: 96vw; }
.search-input { padding: 16px 18px 16px 44px; font-size: 16px; /* iOS won't zoom on 16+ */ }
.search-icon { top: 18px; left: 18px; width: 14px; height: 14px; }
.search-icon::after { top: 12px; left: 11px; width: 7px; }
.search-item { padding: 10px 18px; gap: 12px; }
.search-item-title { font-size: 14px; }
.search-item-snippet { font-size: 12px; -webkit-line-clamp: 2; line-clamp: 2; }
.search-foot { padding: 10px 18px; gap: 8px; flex-wrap: wrap; font-size: 9px; }
.search-foot .keys { gap: 6px; }
.search-foot > div:last-child { display: none; }
}
/* Focus-visible — every interactive element added this loop gets the same
accent outline treatment as the legacy controls. */
.d-chip:focus-visible, .d-rule-head:focus-visible,
.ar-chip:focus-visible, .ar-run:focus-visible, .ar-reset:focus-visible, .ag-cell:focus-visible,
.tr-dot:focus-visible, .cmd-go:focus-visible, .cmd-input:focus-visible,
.ev-row:focus-visible, .op-card:focus-visible, .sc-row:focus-visible,
.hm-rule:focus-visible, .search-item:focus-visible, .ann-toggle:focus-visible,
#dExport:focus-visible, #citeCopy:focus-visible, #mListen:focus-visible {
outline: 1px solid var(--accent);
outline-offset: 2px;
}
/* Skip-to-content — visually hidden until keyboard-focused. */
.skip-link {
position: fixed;
top: -48px; left: 16px;
z-index: 2147483641;
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.14em;
padding: 10px 16px;
background: var(--bg); color: var(--accent);
border: 1px solid var(--accent);
transition: top 0.18s ease;
}
.skip-link:focus, .skip-link:focus-visible { top: 16px; outline: none; }
/* ════════════════════════════════════════════════════════════════════
Topnav state — current-section tick + careers role count.
════════════════════════════════════════════════════════════════════ */
a.nav-link.is-here { position: relative; color: var(--fg); }
.mega-col.is-current { border-color: var(--line-2) !important; background: var(--bg-2); }
.mega-col.is-current .mega-title::after { content: ' ·'; color: var(--accent); }
.search-summary { padding: 8px 22px 4px; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .18em; color: var(--fg-dimmer); }
.nav-count {
font-size: 9px;
color: var(--accent);
vertical-align: super;
letter-spacing: 0;
margin-left: 1px;
}
/* ════════════════════════════════════════════════════════════════════
Section rail — fixed left nav on long-form pages (body.has-section-rail).
Built by initSectionRail(); fades in after the hero scrolls past.
════════════════════════════════════════════════════════════════════ */
.sec-rail {
position: fixed;
left: 28px; top: 50%;
transform: translateY(-50%);
z-index: 50;
display: grid;
gap: 2px;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease;
max-width: 200px;
}
.sec-rail.is-visible { opacity: 1; pointer-events: auto; }
.sec-rail a {
display: grid;
grid-template-columns: 26px 1fr;
gap: 10px;
align-items: baseline;
padding: 5px 8px;
border-left: 2px solid transparent;
transition: border-color 0.18s, background 0.18s;
}
.sec-rail a:hover { background: var(--bg-2); }
.sec-rail a.is-active { border-left-color: var(--accent); }
.sec-rail .n { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.12em; color: var(--fg-dimmer); }
.sec-rail a.is-active .n { color: var(--accent); }
.sec-rail .t {
font-size: 11px; line-height: 1.35; color: var(--fg-dimmer);
overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
-webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
transition: color 0.18s;
}
.sec-rail a.is-active .t { color: var(--fg-dim); }
.sec-rail a:hover .t { color: var(--fg); }
@media (max-width: 1280px) { .sec-rail { display: none; } }
/* ════════════════════════════════════════════════════════════════════
Keyboard overlay — `?` opens, Esc closes. Lists g-chords + globals.
════════════════════════════════════════════════════════════════════ */
.kbd-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.66); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 2147483640; display: none; opacity: 0; transition: opacity 0.18s ease; }
.kbd-scrim.is-open { display: block; opacity: 1; }
.kbd-modal {
position: fixed; top: 18vh; left: 50%;
transform: translateX(-50%) translateY(-8px);
width: min(560px, 92vw);
background: var(--bg); border: 1px solid var(--line-2);
box-shadow: 0 24px 80px rgba(0,0,0,0.6);
z-index: 2147483641; display: none; opacity: 0;
transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
padding: 26px 30px 30px;
}
.kbd-modal.is-open { display: block; opacity: 1; transform: translateX(-50%) translateY(0); }
.kbd-title { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.22em; color: var(--accent); margin-bottom: 20px; }
.kbd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.kbd-h { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.2em; color: var(--fg-dimmer); margin-bottom: 10px; }
.kbd-row { display: flex; align-items: center; gap: 14px; padding: 4px 0; font-size: 13px; color: var(--fg-dim); }
.kbd-row .keys { display: inline-flex; gap: 4px; min-width: 58px; }
.kbd-row kbd {
font-family: 'JetBrains Mono', monospace; font-size: 10px;
border: 1px solid var(--line-2); border-bottom-width: 2px;
padding: 2px 7px; border-radius: 3px; color: var(--fg);
background: var(--bg-2);
}
@media (max-width: 600px) { .kbd-grid { grid-template-columns: 1fr; gap: 20px; } }
/* ════════════════════════════════════════════════════════════════════
Operator photography plates — 16:9 cinematic image in a bordered
frame with a mono caption beneath. Used on vertical pages and the
landing "WHO WE BUILD FOR" grid. Swap the inner ![]()
path to a
real photograph (jpg / webp) when one is available.
════════════════════════════════════════════════════════════════════ */
.op-plate-wrap {
max-width: 1280px;
margin: 0 auto;
padding: 60px 40px 0;
position: relative;
z-index: 2;
}
.op-plate {
display: block;
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border: 1px solid var(--line);
background: var(--bg-2);
margin: 0;
z-index: 2;
}
.op-plate picture { display: block; width: 100%; height: 100%; }
.op-plate img {
width: 100%; height: 100%; display: block; object-fit: cover;
transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.4s ease;
filter: saturate(0.92) contrast(1.02);
}
a.op-plate:hover img { transform: scale(1.018); filter: saturate(1.05) contrast(1.05); }
.op-plate-cap {
display: flex; justify-content: space-between; flex-wrap: wrap;
gap: 16px; padding-top: 14px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.16em; color: var(--fg-dimmer);
text-transform: uppercase;
}
.op-plate-cap .ti { color: var(--fg-dim); }
.op-plate-cap .src { color: var(--accent); }
@media (max-width: 700px) {
.op-plate-wrap { padding: 40px 20px 0; }
.op-plate-cap { font-size: 10px; letter-spacing: 0.14em; }
}
/* Landing-page "WHO WE BUILD FOR" grid — 2×2 of plates with overlay labels.
Used inside the index.html capabilities flow. */
.op-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin: 32px 0 0;
position: relative;
z-index: 2;
}
.op-card {
position: relative; display: block;
overflow: hidden;
border: 1px solid var(--line);
background: var(--bg-2);
aspect-ratio: 16 / 10;
text-decoration: none; color: inherit;
z-index: 2;
}
.op-card picture { display: block; width: 100%; height: 100%; }
.op-card img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(0.9) contrast(1.02); transition: transform 0.6s cubic-bezier(0.22,0.61,0.36,1), filter 0.4s ease; }
.op-card:hover img { transform: scale(1.02); filter: saturate(1.05) contrast(1.06); }
.op-card-veil {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(10,11,13,0.92) 0%, rgba(10,11,13,0.4) 45%, rgba(10,11,13,0) 75%);
pointer-events: none;
}
.op-card-label {
position: absolute; left: 22px; right: 22px; bottom: 20px;
display: grid; gap: 6px;
pointer-events: none;
}
.op-card-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 10px; letter-spacing: 0.18em; color: var(--accent); text-transform: uppercase;
}
.op-card-title {
font-family: 'Inter Tight', sans-serif;
font-size: clamp(20px, 2.3vw, 28px); font-weight: 500; letter-spacing: -0.02em;
color: #e8e6e1; /* locked light — sits on the always-dark .op-card-veil regardless of theme */
}
.op-card-title em { font-style: italic; font-weight: 400; color: var(--accent); }
.op-card-arrow {
position: absolute; top: 18px; right: 18px;
font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em;
color: var(--accent); border: 1px solid var(--accent); padding: 4px 9px;
background: rgba(10,11,13,0.65); backdrop-filter: blur(4px);
transition: background 0.2s, color 0.2s;
}
.op-card:hover .op-card-arrow { background: var(--accent); color: #0a0b0d; }
@media (max-width: 700px) {
.op-grid { grid-template-columns: 1fr; gap: 12px; }
.op-card { aspect-ratio: 16 / 9; }
}
/* ════════════════════════════════════════════════════════════════════
Vertex wordmark — Monoton display face (same as the drop cap).
Replaces the old monospace VERTEX + 10px accent square combo with a
single brand element. !important overrides because most pages have
inline page-CSS that sets .topnav-mark / .footer-mark fonts at the
same specificity. The mark-square is hidden site-wide.
════════════════════════════════════════════════════════════════════ */
.topnav-mark,
.footer-mark,
.mobile-nav-mark,
.mobile-nav-foot .mobile-nav-mark {
font-family: 'Monoton', 'Inter Tight', sans-serif !important;
font-weight: 400 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase;
}
.topnav-mark { font-size: 22px !important; gap: 0 !important; }
.footer-mark { font-size: 26px !important; gap: 0 !important; }
.mobile-nav-mark { font-size: 22px !important; gap: 0 !important; }
/* The accent square was the old mark — Monoton wordmark replaces it */
.mark-square { display: none !important; }
/* ────────────────────────────────────────────────────────────────────
Logo morph on scroll — VERTEX collapses to V[X-with-only-/-stroke].
Implementation: two overlapping X glyphs in the end slot. One full,
one clipped via clip-path to a diagonal strip that keeps the /
stroke and hides the \ stroke. As you scroll, the full X cross-fades
out and the clipped X cross-fades in. Same glyph, same baseline,
same stripes — the result reads as 'the X lost one diagonal,' not
'X replaced with /'. Middle letters ERTE collapse and fade in sync.
Continuous scroll-driven via the --logo-t CSS variable (updated by
site.js initLogoMorph()), 0 at top of page → 1 once you've scrolled
~120px. No CSS transitions: rAF-driven variable updates already run
at 60fps and a transition would add latency.
Markup is constructed at boot by initLogoMorph(): the wordmark span
becomes ERTEXX. */
.topnav-mark .logo-v,
.topnav-mark .logo-mid,
.topnav-mark .logo-end,
.topnav-mark .logo-x,
.topnav-mark .logo-x-slash {
display: inline-block;
}
.topnav-mark .logo-mid {
overflow: hidden;
vertical-align: top;
white-space: nowrap;
opacity: calc(1 - var(--logo-t, 0));
max-width: calc((1 - var(--logo-t, 0)) * 5em);
letter-spacing: calc(var(--logo-t, 0) * -0.5em);
}
.topnav-mark .logo-end {
position: relative;
/* As the morph completes, pull the X (and its visible /) leftward
so it sits tight against the V. Layout-shifting margin, not
transform, so the overall wordmark also gets visually compact. */
margin-left: calc(var(--logo-t, 0) * -0.6em);
}
.topnav-mark .logo-x {
opacity: calc(1 - var(--logo-t, 0));
}
/* Compact-state slash — a real Monoton V character clipped to its
right half, so only the V's right leg is visible. Same font as the
wordmark and the drop cap; no hand-drawn approximations. */
.topnav-mark .logo-x-slash {
display: inline-block;
position: absolute;
left: 0;
top: 0;
opacity: var(--logo-t, 0);
pointer-events: none;
/* Diagonal cut — left edge slopes from (72%, 0%) at top to (15%, 100%)
at bottom. The bottom-left vertex pulled leftward from 28% → 15%
so the right leg's bottom stripe isn't sliced by the diagonal
(the stripe extends below the clip line at this y range). Less
steep slope, full stripe visibility through the bottom. */
-webkit-clip-path: polygon(72% 0%, 100% 0%, 100% 100%, 15% 100%);
clip-path: polygon(72% 0%, 100% 0%, 100% 100%, 15% 100%);
}
/* Reduced motion: skip to end state once a small scroll happens, no
continuous interpolation. */
@media (prefers-reduced-motion: reduce) {
.topnav-mark .logo-mid,
.topnav-mark .logo-x,
.topnav-mark .logo-x-slash { transition: none; }
}
/* ================ Topnav ================ */
.topnav {
position: fixed; top: 0; left: 0; right: 0;
z-index: 100;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 22px 40px;
background: linear-gradient(to bottom, var(--topnav-bg), var(--topnav-bg-mid) 70%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: background 0.22s ease, backdrop-filter 0.22s ease, -webkit-backdrop-filter 0.22s ease;
}
/* At the very top of the page the nav background disappears entirely,
so heroes / explainers / scene plates show through edge-to-edge.
The body.is-scrolled flag is set / cleared by initNavScroll() in site.js. */
body:not(.is-scrolled) .topnav {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.topnav-mark {
display: flex; align-items: center; gap: 10px;
font-family: 'JetBrains Mono', monospace;
font-size: 12px; letter-spacing: 0.12em; font-weight: 600;
}
.topnav-mark a { display: flex; align-items: center; gap: 10px; }
.mark-square { width: 10px; height: 10px; display: inline-block; background: var(--accent); }
.nav-links-row { display: flex; gap: 32px; align-items: center; }
a.nav-link {
color: #b8babf;
font-family: 'JetBrains Mono', monospace;
font-size: 12px; font-weight: 500; letter-spacing: 0.14em;
white-space: pre; min-width: 9ch;
display: inline-block; text-align: center;
padding: 6px 10px;
border: 1px solid transparent;
transition: color 0.18s, border-color 0.18s, background 0.18s;
}
a.nav-link:hover, a.nav-link:focus-visible {
color: #ffffff;
border-color: var(--accent);
background: rgba(184, 230, 179, 0.08);
}
[data-theme="light"] a.nav-link { color: #2a2c30; }
[data-theme="light"] a.nav-link:hover, [data-theme="light"] a.nav-link:focus-visible { color: #000; }
/* ════════════════════════════════════════════════════════════════════
Nav dropdowns — bento panels, one distinct grid per menu.
Shared shell: rounded 24, gradient wash, deep float shadow, spring
stagger, cursor spotlight, orbiting conic edge. Per-menu: its own
width, grid, tile placement, and semantically-matched ornaments.
════════════════════════════════════════════════════════════════════ */
@property --bt-angle {
syntax: '';
initial-value: 0deg;
inherits: false;
}
.nav-item { position: relative; }
.nav-item::after {
content: ''; position: absolute; top: 100%; left: -12px; right: -12px; height: 12px;
}
.nav-item:hover::before,
.nav-item:focus-within::before {
content: '';
position: fixed;
left: 0; right: 0;
top: 56px; height: 22px;
z-index: 150;
}
.nav-item .mega-menu {
position: fixed;
top: 74px;
left: 50%; right: auto;
transform: translate(-50%, -8px) scale(0.97);
transform-origin: top center;
background:
linear-gradient(135deg, rgba(184,230,179,0.05), rgba(126,179,216,0.03) 55%, transparent),
var(--bg);
border: 1px solid var(--line-2);
border-radius: 24px;
display: grid;
gap: 10px;
padding: 16px;
opacity: 0;
/* visibility:hidden takes the closed menu's links out of the keyboard tab
order (opacity alone leaves them focusable while invisible). Delayed in
the transition so the fade-out still plays before it's pulled. */
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.2s;
z-index: 200;
box-shadow: 0 30px 70px rgba(0,0,0,0.6);
}
.nav-item:hover .mega-menu,
.nav-item:focus-within .mega-menu,
.nav-item.is-open .mega-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(-50%, 0) scale(1);
transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}
/* ── Tile base ── */
.bt {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 13px 15px;
border-radius: 15px;
overflow: hidden;
border: 1px solid transparent;
background:
linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
linear-gradient(155deg, rgba(184,230,179,0.28), rgba(255,255,255,0.06) 45%, rgba(126,179,216,0.14)) border-box;
}
@keyframes bt-orbit { to { --bt-angle: 360deg; } }
.bt:hover {
background:
linear-gradient(var(--bg-3), var(--bg-3)) padding-box,
conic-gradient(from var(--bt-angle),
rgba(184,230,179,0.9), rgba(126,179,216,0.35) 30%,
rgba(184,230,179,0.12) 55%, rgba(184,230,179,0.9)) border-box;
animation: bt-orbit 2.6s linear infinite;
}
.bt::after {
content: '';
position: absolute; inset: 0;
border-radius: inherit;
background: radial-gradient(190px circle at var(--mx, 50%) var(--my, 50%),
rgba(184,230,179,0.13), transparent 65%);
opacity: 0;
transition: opacity 0.25s ease;
pointer-events: none;
z-index: 1;
}
.bt:hover::after { opacity: 1; }
.bt-name {
position: relative; z-index: 2;
font-family: 'Inter Tight', sans-serif;
font-size: 14.5px; font-weight: 600;
color: var(--fg); letter-spacing: -0.005em;
line-height: 1.15;
}
.bt-sub {
position: relative; z-index: 2;
margin-top: 3px;
padding-right: 34px;
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
color: var(--fg-dim); letter-spacing: 0.03em;
line-height: 1.35;
}
.bt:hover .bt-name { color: var(--accent); transition: color 0.15s; }
.bt.is-current .bt-sub::after { content: ' ·'; color: var(--accent); }
.bt-hero .bt-name { font-size: 21px; letter-spacing: -0.02em; }
.bt:not(.bt-hero):not(.bt-banner) .bt-name { padding-right: 30px; }
.bt-hero .bt-sub, .bt-banner .bt-sub { padding-right: 0; }
.bt-hero .bt-name, .bt-banner .bt-name { padding-right: 0; }
.bt-banner { flex-direction: row; align-items: center; justify-content: space-between; }
.bt-banner .bt-text { display: flex; flex-direction: column; }
/* ── shared ornaments ── */
.bt-clouds {
position: absolute; inset: -40%;
width: 180%; height: 180%;
background:
radial-gradient(circle at 28% 30%, rgba(184,230,179,0.16), transparent 42%),
radial-gradient(circle at 75% 60%, rgba(126,179,216,0.12), transparent 45%),
radial-gradient(circle at 50% 85%, rgba(184,230,179,0.08), transparent 40%);
filter: blur(20px);
animation: bt-breathe 9s ease-in-out infinite;
pointer-events: none;
}
.bt-clouds.warm {
background:
radial-gradient(circle at 30% 35%, rgba(255,138,92,0.16), transparent 42%),
radial-gradient(circle at 72% 65%, rgba(184,230,179,0.10), transparent 45%),
radial-gradient(circle at 50% 90%, rgba(255,96,96,0.08), transparent 40%);
}
@keyframes bt-breathe {
0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
40% { transform: translate(5%, -4%) scale(1.25) rotate(35deg); }
75% { transform: translate(-4%, 3%) scale(0.92) rotate(-18deg); }
}
.bt-go {
position: absolute; top: 12px; right: 12px; z-index: 2;
width: 28px; height: 28px;
border: 1px solid var(--line-2);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: 'JetBrains Mono', monospace;
font-size: 12px; color: var(--fg-dim);
transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.bt:hover .bt-go {
transform: rotate(45deg);
background: rgba(184,230,179,0.14);
color: var(--accent);
}
.bt-dot {
position: absolute; top: 14px; right: 14px; z-index: 2;
width: 8px; height: 8px; border-radius: 50%;
background: var(--accent);
animation: bt-pulse 1.8s ease-out infinite;
}
@keyframes bt-pulse {
0% { box-shadow: 0 0 0 0 rgba(184,230,179,0.45); }
100% { box-shadow: 0 0 0 8px rgba(184,230,179,0); }
}
.bt-pill {
position: absolute; top: 11px; right: 11px; z-index: 2;
font-family: 'JetBrains Mono', monospace;
font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--accent);
background: rgba(184,230,179,0.1);
border: 1px solid rgba(184,230,179,0.25);
border-radius: 99px;
padding: 2px 7px;
white-space: nowrap;
}
.bt-banner .bt-pill { position: static; order: 2; margin-right: 4px; flex: none; }
.bt-banner { gap: 10px; }
.bt-avatars { display: flex; z-index: 2; flex: none; }
.bt-avatars i {
width: 26px; height: 26px; border-radius: 50%;
border: 2px solid var(--bg-2);
background-size: cover; background-position: center;
margin-left: -9px;
transition: margin 0.25s ease, transform 0.25s ease;
}
.bt-avatars i:first-child { margin-left: 0; }
.bt-banner:hover .bt-avatars i { margin-left: 3px; transform: translateY(-2px); }
/* Tiles carrying a top strip reserve headroom for it. */
.bt:has(.bt-quarters), .bt:has(.bt-steps), .bt:has(.bt-week), .bt:has(.bt-ekg) { padding-top: 36px; }
/* ── semantic ornaments ── */
/* equalizer — activity (Arena, Press coverage) */
.bt-eq {
position: absolute; right: 14px; bottom: 13px; z-index: 2;
display: flex; align-items: flex-end; gap: 3px; height: 28px;
}
.bt-eq i {
width: 6px; border-radius: 3px 3px 0 0;
background: linear-gradient(to top, rgba(184,230,179,0.25), var(--accent));
transform-origin: bottom;
}
.bt-eq i:nth-child(1) { height: 35%; }
.bt-eq i:nth-child(2) { height: 60%; }
.bt-eq i:nth-child(3) { height: 45%; }
.bt-eq i:nth-child(4) { height: 80%; }
@keyframes bt-eq-bounce { 0%, 100% { transform: scaleY(0.44); } 50% { transform: scaleY(1.25); } }
.bt:hover .bt-eq i { animation: bt-eq-bounce 1s ease-in-out infinite; }
.bt:hover .bt-eq i:nth-child(2) { animation-delay: 0.15s; }
.bt:hover .bt-eq i:nth-child(3) { animation-delay: 0.30s; }
.bt:hover .bt-eq i:nth-child(4) { animation-delay: 0.45s; }
/* EKG — medics. A faint resting trace with a bright pulse segment that
sweeps along it on hover. pathLength=100 normalizes the dash math. */
.bt-ekg { position: absolute; top: 12px; right: 12px; width: 56px; height: 20px; z-index: 2; }
.bt-ekg .ekg-base {
fill: none; stroke: var(--accent); stroke-width: 1.25;
stroke-linejoin: round;
opacity: 0.22;
}
.bt-ekg .ekg-pulse {
fill: none; stroke: var(--accent); stroke-width: 1.5;
stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 22 78;
stroke-dashoffset: 100;
opacity: 0;
}
.bt:hover .bt-ekg .ekg-pulse {
opacity: 1;
animation: bt-ekg-sweep 2.8s linear infinite;
}
@keyframes bt-ekg-sweep { to { stroke-dashoffset: -100; } }
/* reticle — military. Ring + crosshair, ring spins on hover. */
.bt-reticle {
position: absolute; top: 12px; right: 14px; z-index: 2;
width: 26px; height: 26px;
}
.bt-reticle::before {
content: ''; position: absolute; inset: 0;
border: 1px solid rgba(184,230,179,0.55);
border-radius: 50%;
border-top-color: transparent;
}
.bt-reticle::after {
content: ''; position: absolute; inset: 0;
background:
linear-gradient(var(--accent), var(--accent)) center/1px 8px no-repeat,
linear-gradient(var(--accent), var(--accent)) center/8px 1px no-repeat;
opacity: 0.7;
}
@keyframes bt-spin { to { transform: rotate(360deg); } }
.bt:hover .bt-reticle::before { animation: bt-spin 2.4s linear infinite; }
/* sonar — rescue. Expanding ring from a hollow center. */
.bt-sonar {
position: absolute; bottom: 16px; right: 16px; z-index: 2;
width: 10px; height: 10px; border-radius: 50%;
border: 1.5px solid var(--accent);
}
.bt-sonar::before {
content: ''; position: absolute; inset: -2px;
border-radius: 50%;
border: 1px solid rgba(184,230,179,0.6);
animation: bt-sonar-ring 2s ease-out infinite;
}
@keyframes bt-sonar-ring {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(3.2); opacity: 0; }
}
/* § seal — doctrine. Stamps down on hover. */
.bt-seal {
position: absolute; top: 9px; right: 12px; z-index: 2;
font-family: 'JetBrains Mono', monospace;
font-size: 17px; color: rgba(184,230,179,0.5);
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s;
}
.bt:hover .bt-seal { transform: scale(1.25) rotate(-8deg); color: var(--accent); }
/* quarter bars — roadmap. Four segments fill on hover. */
.bt-quarters { position: absolute; top: 14px; right: 14px; width: 64px; display: flex; gap: 4px; z-index: 2; }
.bt-quarters i { height: 4px; flex: 1; border-radius: 2px; background: var(--bg-3); overflow: hidden; position: relative; }
.bt-quarters i::before { content: ''; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease; }
.bt-quarters i:nth-child(1)::before { transform: scaleX(1); opacity: 0.9; }
.bt-quarters i:nth-child(2)::before { transform: scaleX(0.5); opacity: 0.6; }
.bt:hover .bt-quarters i::before { transform: scaleX(1); }
.bt:hover .bt-quarters i:nth-child(2)::before { transition-delay: 0.12s; }
.bt:hover .bt-quarters i:nth-child(3)::before { transition-delay: 0.24s; }
.bt:hover .bt-quarters i:nth-child(4)::before { transition-delay: 0.36s; }
/* ledger check — safety. Tick draws on hover. */
.bt-check { position: absolute; top: 11px; right: 13px; z-index: 2; width: 16px; height: 16px; }
.bt-check polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset 0.4s ease 0.1s; opacity: 0.8; }
.bt:hover .bt-check polyline { stroke-dashoffset: 0; }
/* week dots — culture. Mon–Thu solid, Fri pulses (think day). */
.bt-week { position: absolute; top: 14px; right: 14px; display: flex; gap: 5px; z-index: 2; }
.bt-week i { width: 7px; height: 7px; border-radius: 2px; background: rgba(184,230,179,0.55); }
.bt-week i:last-child { background: transparent; border: 1px solid var(--accent); animation: bt-pulse 1.8s ease-out infinite; border-radius: 2px; }
/* stepper — hiring. Seven ticks light in sequence on hover. */
.bt-steps { position: absolute; top: 14px; right: 13px; width: 84px; display: flex; gap: 3px; z-index: 2; }
.bt-steps i { height: 5px; flex: 1; background: var(--bg-3); border-radius: 1px; transition: background 0.15s ease; }
.bt:hover .bt-steps i { background: var(--accent); }
.bt:hover .bt-steps i:nth-child(2) { transition-delay: 0.07s; }
.bt:hover .bt-steps i:nth-child(3) { transition-delay: 0.14s; }
.bt:hover .bt-steps i:nth-child(4) { transition-delay: 0.21s; }
.bt:hover .bt-steps i:nth-child(5) { transition-delay: 0.28s; }
.bt:hover .bt-steps i:nth-child(6) { transition-delay: 0.35s; }
.bt:hover .bt-steps i:nth-child(7) { transition-delay: 0.42s; }
/* caret — apply. Blinking input cursor. */
.bt-caret { position: absolute; top: 12px; right: 14px; z-index: 2; width: 7px; height: 14px; background: var(--accent); animation: bt-blink 1.1s steps(1) infinite; }
@keyframes bt-blink { 50% { opacity: 0.15; } }
/* newswire — press. Three lines stream in on hover. */
.bt-wire { position: absolute; top: 13px; right: 14px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; z-index: 2; }
.bt-wire i { height: 3px; border-radius: 2px; background: rgba(184,230,179,0.5); width: 26px; transform-origin: right; transition: transform 0.3s ease; }
.bt-wire i:nth-child(2) { width: 18px; opacity: 0.7; }
.bt-wire i:nth-child(3) { width: 22px; opacity: 0.5; }
.bt:hover .bt-wire i { transform: scaleX(1.45); }
.bt:hover .bt-wire i:nth-child(2) { transition-delay: 0.08s; }
.bt:hover .bt-wire i:nth-child(3) { transition-delay: 0.16s; }
/* swatches — brand. The palette, literally. */
.bt-swatches { position: absolute; top: 13px; right: 13px; display: flex; gap: 4px; z-index: 2; }
.bt-swatches i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--line-2); transition: transform 0.25s ease; }
.bt-swatches i:nth-child(1) { background: #b8e6b3; }
.bt-swatches i:nth-child(2) { background: #e8e6e1; }
.bt-swatches i:nth-child(3) { background: #0a0b0d; }
.bt:hover .bt-swatches i { transform: translateY(-2px); }
.bt:hover .bt-swatches i:nth-child(2) { transition-delay: 0.07s; }
.bt:hover .bt-swatches i:nth-child(3) { transition-delay: 0.14s; }
/* hero art — ghosted scratchboard cutouts per hero tile, same treatment
as the team portrait: bottom-right, contained, grayscale, sharpening
slightly on hover. Files live in assets/bento/.png. */
.bt-art {
position: absolute; right: -10px; bottom: -6px; z-index: 1;
width: 62%; height: 108%;
background-size: contain;
background-position: right bottom;
background-repeat: no-repeat;
opacity: 0.26;
filter: grayscale(1);
transition: opacity 0.3s ease;
pointer-events: none;
}
.bt:hover .bt-art { opacity: 0.46; }
.bt-art.art-manifesto { background-image: url('bento/manifesto.png'); }
.bt-art.art-colosseum { background-image: url('bento/colosseum.png'); }
.bt-art.art-firefighting { background-image: url('bento/firefighting.png'); }
.bt-art.art-culture { background-image: url('bento/culture.png'); }
/* portrait wash — team hero. The founder cutout, ghosted. */
.bt-portrait {
position: absolute; right: -12px; bottom: -6px; z-index: 1;
width: 65%; height: 110%;
background: url('team/romir-cutout.png') right bottom / contain no-repeat;
opacity: 0.28;
filter: grayscale(1);
transition: opacity 0.3s ease;
pointer-events: none;
}
.bt:hover .bt-portrait { opacity: 0.48; }
/* ════ Per-menu grids — five genuinely different layouts ════ */
/* ABOUT — 440px · 3-col editorial: tall hero left, two stacked, banner. */
.mega-menu.mega-about { width: 440px; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 66px; }
.mega-about .bt:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
.mega-about .bt:nth-child(2) { grid-column: 3; grid-row: 1; }
.mega-about .bt:nth-child(3) { grid-column: 3; grid-row: 2; }
.mega-about .bt:nth-child(4) { grid-column: 1 / 4; grid-row: 3; }
/* RESEARCH — 540px · 4-col flagship: big hero, wide arena, two smalls, banner. */
.mega-menu.mega-research { width: 540px; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 64px; }
.mega-research .bt:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
.mega-research .bt:nth-child(2) { grid-column: 3 / 5; grid-row: 1; }
.mega-research .bt:nth-child(3) { grid-column: 3; grid-row: 2; }
.mega-research .bt:nth-child(4) { grid-column: 4; grid-row: 2; }
.mega-research .bt:nth-child(5) { grid-column: 1 / 5; grid-row: 3; }
/* OPERATORS — 560px · 6-col field board: wide hero, tall right pair, banner. */
.mega-menu.mega-operators { width: 560px; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 60px; }
.mega-operators .bt:nth-child(1) { grid-column: 1 / 4; grid-row: 1 / 3; }
.mega-operators .bt:nth-child(2) { grid-column: 4 / 7; grid-row: 1; }
.mega-operators .bt:nth-child(3) { grid-column: 4 / 6; grid-row: 2; }
.mega-operators .bt:nth-child(4) { grid-column: 6; grid-row: 2; }
.mega-operators .bt:nth-child(5) { grid-column: 1 / 7; grid-row: 3; }
/* TEAM — 400px · 2-col card: tall portrait hero left, three stacked right. No banner. */
.mega-menu.mega-team { width: 400px; grid-template-columns: 1.25fr 1fr; grid-auto-rows: 58px; }
.mega-team .bt:nth-child(1) { grid-column: 1; grid-row: 1 / 4; }
.mega-team .bt:nth-child(2) { grid-column: 2; grid-row: 1; }
.mega-team .bt:nth-child(3) { grid-column: 2; grid-row: 2; }
.mega-team .bt:nth-child(4) { grid-column: 2; grid-row: 3; }
/* CAREERS — 480px · inverted: full-width CTA banner on top, then the grid. */
.mega-menu.mega-careers { width: 480px; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 62px; }
.mega-careers .bt:nth-child(1) { grid-column: 1 / 5; grid-row: 1; }
.mega-careers .bt:nth-child(2) { grid-column: 1 / 3; grid-row: 2 / 4; }
.mega-careers .bt:nth-child(3) { grid-column: 3 / 5; grid-row: 2; }
.mega-careers .bt:nth-child(4) { grid-column: 3 / 5; grid-row: 3; }
@media (prefers-reduced-motion: reduce) {
.bt, .nav-item .mega-menu { transition: opacity 0.1s ease !important; transform: none !important; }
.bt-clouds, .bt-dot, .bt:hover, .bt-sonar::before, .bt-caret,
.bt:hover .bt-eq i, .bt:hover .bt-ekg polyline, .bt:hover .bt-reticle::before, .bt-week i:last-child { animation: none !important; }
}
/* Page veil — dims content under the nav while any menu is open. */
.nav-veil {
position: fixed;
inset: 0;
background: rgba(10, 11, 13, 0.55);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
opacity: 0;
pointer-events: none;
transition: opacity 0.28s ease;
z-index: 99;
}
body:has(.nav-item:hover .mega-menu) .nav-veil,
body:has(.nav-item:focus-within .mega-menu) .nav-veil { opacity: 1; }
/* Mobile menu trigger */
.menu-toggle {
display: none;
background: none;
border: 1px solid var(--line-2);
color: var(--fg);
width: 40px; height: 40px;
cursor: pointer;
position: relative;
}
.menu-toggle span {
display: block;
position: absolute; left: 10px; right: 10px;
height: 1.5px;
background: currentColor;
transition: transform 0.25s ease, opacity 0.2s ease;
}
.menu-toggle span:nth-child(1) { top: 13px; }
.menu-toggle span:nth-child(2) { top: 19.5px; }
.menu-toggle span:nth-child(3) { top: 26px; }
body.menu-open .menu-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* Mobile slide-out panel */
.mobile-nav {
display: none;
position: fixed;
top: 0; right: 0; bottom: 0;
width: min(420px, 100vw);
background: var(--bg);
border-left: 1px solid var(--line);
z-index: 99;
transform: translateX(100%);
transition: transform 0.36s cubic-bezier(0.22, 0.61, 0.36, 1);
padding: 96px 28px 32px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
body.menu-open .mobile-nav { transform: translateX(0); }
.mobile-nav-section { margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.mobile-nav-section:last-of-type { border-bottom: none; padding-bottom: 4px; margin-bottom: 8px; }
.mobile-nav-label {
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.22em;
color: var(--fg-dimmer); margin-bottom: 6px;
text-transform: uppercase;
}
.mobile-nav a {
display: flex;
align-items: center;
justify-content: space-between;
font-family: 'Inter Tight', sans-serif;
font-size: 22px; font-weight: 500;
letter-spacing: -0.01em;
padding: 12px 0;
color: var(--fg);
border-bottom: 1px solid transparent;
transition: color 0.18s ease, border-color 0.18s ease;
min-height: 48px;
}
.mobile-nav a:active,
.mobile-nav a:hover,
.mobile-nav a:focus-visible {
color: var(--accent);
outline: none;
}
.mobile-nav a:focus-visible { border-bottom-color: var(--accent); }
.mobile-nav-arrow {
font-family: 'JetBrains Mono', monospace;
font-size: 16px;
color: var(--fg-dimmer);
transition: transform 0.18s ease, color 0.18s ease;
margin-left: 12px;
}
.mobile-nav a:active .mobile-nav-arrow,
.mobile-nav a:hover .mobile-nav-arrow,
.mobile-nav a:focus-visible .mobile-nav-arrow {
color: var(--accent);
transform: translateX(4px);
}
.mobile-nav-blurb { font-size: 13px; color: var(--fg-dim); line-height: 1.5; margin: -4px 0 8px; }
/* Footer block at the bottom of the mobile drawer */
.mobile-nav-foot {
margin-top: 28px; padding-top: 24px;
border-top: 1px solid var(--line);
display: grid; gap: 10px;
}
.mobile-nav-mark {
display: flex; align-items: center; gap: 10px;
font-family: 'JetBrains Mono', monospace;
font-size: 12px; letter-spacing: 0.24em;
color: var(--fg);
}
.mobile-nav-mail {
font-family: 'JetBrains Mono', monospace;
font-size: 12px; letter-spacing: 0.14em;
color: var(--fg-dim);
padding: 6px 0;
}
.mobile-nav-mail:hover, .mobile-nav-mail:active { color: var(--accent); }
/* Drawer entrance — sections fade + rise in a gentle stagger when the
panel opens. Closed state resets (hidden behind the sliding panel) so
each open replays the motion. Restrained: no bounce, short travel. */
.mobile-nav-section,
.mobile-nav-foot {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
body.menu-open .mobile-nav-section,
body.menu-open .mobile-nav-foot {
opacity: 1;
transform: none;
transition: opacity 0.42s ease, transform 0.46s cubic-bezier(0.22, 0.61, 0.36, 1);
}
body.menu-open .mobile-nav-section:nth-of-type(1) { transition-delay: 0.07s; }
body.menu-open .mobile-nav-section:nth-of-type(2) { transition-delay: 0.12s; }
body.menu-open .mobile-nav-section:nth-of-type(3) { transition-delay: 0.17s; }
body.menu-open .mobile-nav-section:nth-of-type(4) { transition-delay: 0.22s; }
body.menu-open .mobile-nav-section:nth-of-type(5) { transition-delay: 0.27s; }
body.menu-open .mobile-nav-foot { transition-delay: 0.32s; }
/* Current page — accent text + a small square bullet on the active link */
.mobile-nav a.is-current { color: var(--accent); }
.mobile-nav a.is-current .mobile-nav-arrow { color: var(--accent); }
.mobile-nav a.is-current > span:first-child { position: relative; padding-left: 16px; }
.mobile-nav a.is-current > span:first-child::before {
content: ""; position: absolute; left: 0; top: 50%;
width: 6px; height: 6px; margin-top: -3px;
background: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
.mobile-nav-section, .mobile-nav-foot { opacity: 1; transform: none; transition: none; }
}
/* Scrim behind mobile nav — blurred for a more premium feel */
.menu-scrim {
display: none;
position: fixed; inset: 0;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 98;
opacity: 0;
transition: opacity 0.28s ease;
}
body.menu-open .menu-scrim { display: block; opacity: 1; }
body.menu-open { overflow: hidden; }
[data-theme="light"] .menu-scrim { background: rgba(196,198,202,0.6); }
/* Theme toggle, vision toggle, terminal trigger — hidden by default for
editorial restraint. Theme + cursor remain reachable via the terminal
(` opens it). Konami still unlocks the rainbow flag. */
.theme-toggle,
.theme-picker,
.vision-toggle,
.terminal-trigger { display: none !important; }
.nav-right { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.theme-toggle {
background: none;
border: 1px solid transparent;
color: #b8babf;
font-family: 'JetBrains Mono', monospace;
font-size: 12px; font-weight: 500; letter-spacing: 0.14em;
padding: 6px 10px;
cursor: pointer;
transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.theme-toggle:hover, .theme-toggle:focus-visible {
color: var(--fg);
border-color: var(--accent);
background: rgba(184,230,179,0.08);
}
[data-theme="light"] .theme-toggle { color: #2a2c30; }
[data-theme="light"] .theme-toggle:hover, [data-theme="light"] .theme-toggle:focus-visible { color: #000; background: rgba(45,122,38,0.10); }
/* ================ Page shells (sub-pages) ================ */
.page-hero {
padding: 200px 40px 140px;
border-bottom: 1px solid var(--line);
max-width: 1280px; margin: 0 auto;
}
.page-eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.22em;
color: var(--fg-dimmer); margin-bottom: 48px;
text-transform: uppercase;
}
/* Page titles — matches the 'No model yet.' style: lighter weight 500,
smaller clamp, italic em with accent. The model-card hero feels
restrained in a way the heavier weight didn't. */
.page-title {
font-family: 'Inter Tight', sans-serif;
font-size: clamp(48px, 6vw, 88px);
font-weight: 500;
line-height: 0.95;
letter-spacing: -0.035em;
margin-bottom: 32px;
}
.page-title em { font-style: italic; font-weight: 400; color: var(--accent); }
.page-lead { font-size: 20px; line-height: 1.5; color: var(--fg-dim); max-width: 640px; font-weight: 400; }
/* ================ Buttons ================ */
.btn-primary {
position: relative; display: inline-flex; align-items: center;
padding: 0;
border: 1px solid var(--accent);
color: var(--accent);
background: transparent;
font-family: 'JetBrains Mono', monospace;
font-size: 12px; letter-spacing: 0.14em;
text-transform: uppercase; font-weight: 500;
overflow: hidden; isolation: isolate;
transition: color 0.35s;
cursor: pointer;
}
.btn-fill {
position: absolute; inset: 0;
background: var(--accent);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.45s cubic-bezier(0.6,0.05,0.2,1);
z-index: 0;
}
.btn-label {
position: relative; z-index: 1;
display: inline-flex; align-items: center; gap: 14px;
padding: 16px 24px;
}
.btn-primary:hover .btn-fill, .btn-primary:focus-visible .btn-fill { transform: scaleX(1); }
.btn-primary:hover, .btn-primary:focus-visible { color: var(--bg); outline: none; }
.btn-ghost {
color: var(--fg-dim);
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.14em;
padding: 16px 8px;
}
.btn-ghost:hover { color: var(--fg); }
/* ================ Footer ================ */
.footer {
position: relative; z-index: 5;
background: var(--bg);
border-top: 1px solid var(--line);
padding: 80px 40px 32px;
}
.footer-top {
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 2fr;
gap: 80px; padding-bottom: 64px;
}
.footer-mark {
display: flex; align-items: center; gap: 10px;
font-family: 'JetBrains Mono', monospace;
font-size: 13px; letter-spacing: 0.12em; font-weight: 600;
}
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; align-items: start; }
.footer-col { display: grid; gap: 12px; align-content: start; }
.footer-col-h {
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.16em;
color: var(--fg-dimmer); margin-bottom: 4px;
}
.footer-col a { font-size: 14px; color: var(--fg-dim); transition: color 0.2s; }
.footer-col a:hover { color: var(--fg); }
.footer-bottom {
max-width: 1280px; margin: 0 auto;
padding-top: 32px;
border-top: 1px solid var(--line);
display: flex; justify-content: space-between;
flex-wrap: wrap; gap: 16px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.08em;
color: var(--fg-dimmer);
}
/* ================ Focus styles (a11y) ================ */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:focus-visible, a:focus-visible { outline-offset: 4px; }
.btn-primary:focus-visible, a.nav-link:focus-visible, .theme-toggle:focus-visible {
outline: none; /* these already have border-based focus indication */
}
/* ================ Hidden terminal (press ` to open) ================ */
.terminal {
position: fixed; left: 0; right: 0; bottom: 0;
z-index: 1100;
background: var(--bg);
border-top: 1px solid var(--line);
height: 0; overflow: hidden;
transition: height 0.32s cubic-bezier(0.22, 1, 0.36, 1);
font-family: 'JetBrains Mono', monospace;
box-shadow: 0 -16px 64px rgba(0,0,0,0.5);
}
.terminal.is-open { height: min(420px, 60vh); }
.terminal-inner { padding: 20px 28px; height: 100%; display: grid; grid-template-rows: 1fr auto; gap: 8px; }
.terminal-log { overflow-y: auto; font-size: 13px; color: var(--fg-dim); line-height: 1.55; padding-bottom: 6px; }
.terminal-log .out { color: var(--fg); }
.terminal-log .err { color: #ff6b6b; }
.terminal-log .accent { color: var(--accent); }
.terminal-log pre { font-family: 'JetBrains Mono', monospace; line-height: 1.15; color: var(--accent); font-size: 11px; margin: 4px 0; }
.terminal-row { display: flex; gap: 12px; align-items: center; padding-top: 12px; border-top: 1px solid var(--line); }
.terminal-prompt { color: var(--accent); font-size: 13px; letter-spacing: 0.08em; }
.terminal-input { flex: 1; background: transparent; border: none; outline: none; color: var(--fg); font-family: 'JetBrains Mono', monospace; font-size: 13px; padding: 0; }
.terminal-hint { font-size: 10px; color: var(--fg-dimmer); letter-spacing: 0.16em; }
@media (max-width: 700px) { .terminal-inner { padding: 16px 18px; } .terminal-hint { display: none; } }
.terminal-trigger {
position: fixed; bottom: 18px; right: 18px;
z-index: 1099;
width: 40px; height: 40px;
background: var(--bg);
border: 1px solid var(--line-2);
color: var(--accent);
font-family: 'JetBrains Mono', monospace;
font-size: 16px;
cursor: pointer;
transition: border-color 0.18s, background 0.18s, transform 0.18s;
display: grid; place-items: center;
}
.terminal-trigger:hover, .terminal-trigger:focus-visible {
border-color: var(--accent);
background: var(--bg-2);
transform: translateY(-1px);
outline: none;
}
@media (max-width: 700px) { .terminal-trigger { bottom: 12px; right: 12px; width: 36px; height: 36px; } }
/* ================ Konami-mode (rainbow accent) ================ */
[data-konami="on"] .mark-square,
[data-konami="on"] .page-title em,
[data-konami="on"] .hero-title em,
[data-konami="on"] .ops-stat .value,
[data-konami="on"] .role-team,
[data-konami="on"] .accent,
[data-konami="on"] .nf-title em,
[data-konami="on"] .m-title em {
animation: konami-shift 5s linear infinite;
}
@keyframes konami-shift {
0% { filter: hue-rotate(0deg) saturate(1.25); }
100% { filter: hue-rotate(360deg) saturate(1.25); }
}
[data-konami="on"] .ops-pulse { animation-duration: 0.6s; }
/* ================ Robot Vision Mode ================ */
/* Toggle adds [data-vision="on"] on . The whole site renders as if
seen through the robot's perception stack — greyscale, scanlines, HUD,
feature boxes around content blocks. Pure CSS + a fixed-position SVG-ish
overlay; no rendering changes anywhere else. */
[data-vision="on"] body { filter: grayscale(0.92) contrast(1.06) brightness(0.94); }
[data-vision="on"] body::after {
content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 999;
background:
repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(184,230,179,0.045) 3px, rgba(184,230,179,0.045) 4px),
radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,0.5) 100%);
mix-blend-mode: normal;
}
[data-vision="on"] .replay-card.
[data-vision="on"] .team-card,
[data-vision="on"] .role-row,
[data-vision="on"] .paper-row,
[data-vision="on"] .principle-card,
[data-vision="on"] .coverage-row,
[data-vision="on"] .repo-card,
[data-vision="on"] .task-card,
[data-vision="on"] .m-stage,
[data-vision="on"] .hero-scene,
[data-vision="on"] .nf-scene {
outline: 1px dashed rgba(184,230,179,0.55);
outline-offset: -1px;
position: relative;
}
[data-vision="on"] .replay-card.:after,
[data-vision="on"] .team-card::after,
[data-vision="on"] .role-row::after,
[data-vision="on"] .paper-row::after,
[data-vision="on"] .principle-card::after,
[data-vision="on"] .coverage-row::after,
[data-vision="on"] .repo-card::after,
[data-vision="on"] .task-card::after {
content: 'OBJ ' attr(data-vision-id);
position: absolute; top: 0; right: 0;
background: var(--bg); color: var(--accent);
font-family: 'JetBrains Mono', monospace;
font-size: 9px; letter-spacing: 0.18em;
padding: 2px 6px;
border-left: 1px solid rgba(184,230,179,0.35);
border-bottom: 1px solid rgba(184,230,179,0.35);
z-index: 5;
pointer-events: none;
}
/* HUD overlay (created by site.js, only visible when vision is on) */
.vision-hud {
display: none;
position: fixed; inset: 0;
pointer-events: none;
z-index: 1000;
font-family: 'JetBrains Mono', monospace;
color: var(--accent);
font-size: 10px;
letter-spacing: 0.18em;
}
[data-vision="on"] .vision-hud { display: block; }
.vision-hud .corner { position: absolute; padding: 6px 0; line-height: 1.6; }
.vision-hud .tl { top: 80px; left: 18px; }
.vision-hud .tr { top: 80px; right: 18px; text-align: right; }
.vision-hud .bl { bottom: 18px; left: 18px; }
.vision-hud .br { bottom: 18px; right: 18px; text-align: right; }
.vision-hud .crosshair { position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; transform: translate(-50%, -50%); opacity: 0.45; }
.vision-hud .crosshair::before, .vision-hud .crosshair::after { content: ''; position: absolute; background: var(--accent); }
.vision-hud .crosshair::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
.vision-hud .crosshair::after { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
.vision-hud .frame { position: absolute; top: 70px; left: 16px; right: 16px; bottom: 16px; border: 1px solid rgba(184,230,179,0.18); }
/* ================ Scroll-triggered reveal ================ */
.reveal {
opacity: 0;
transform: translateY(22px);
transition:
opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--reveal-delay, 0s);
will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
/* ================ Reduced motion ================ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.nav-item .mega-menu { transition: opacity 0.001ms !important; transform: translateX(-50%) translateY(0) !important; }
.mobile-nav { transition: none !important; }
.btn-fill { transition: none !important; }
.reveal { opacity: 1 !important; transform: none !important; }
}
/* ================ View Transitions API (modern browsers) ================ */
/* Deliberate 200/280ms crossfade — outgoing fades + blurs slightly so the
eye accepts the swap as one motion; incoming settles a few pixels up.
The fade-out / fade-in keyframes are defined further down. */
@view-transition { navigation: auto; }
/* ================ Responsive ================ */
@media (max-width: 1100px) {
.nav-item .mega-menu { display: none; }
}
@media (max-width: 900px) {
.nav-links-row { display: none; }
.menu-toggle { display: block; }
.mobile-nav { display: block; }
.topnav {
padding: 16px 20px;
grid-template-columns: 1fr auto;
gap: 12px;
}
/* Hide the desktop-only toggles on mobile — vision toggle isn't useful
without the hover-revealed canvas, and the theme toggle is collapsed
into a single round button below. */
.vision-toggle { display: none; }
.page-hero { padding: 110px 20px 56px; }
.page-hero .page-title { font-size: clamp(36px, 9vw, 72px); }
}
@media (max-width: 600px) {
.topnav { padding: 14px 16px; }
.topnav-mark { font-size: 11px; letter-spacing: 0.10em; }
.footer { padding: 60px 20px 24px; }
.footer-top { grid-template-columns: 1fr; gap: 40px; }
.footer-cols { grid-template-columns: 1fr 1fr; }
.mobile-nav { width: 100vw; padding: 88px 22px 28px; }
.mobile-nav a { font-size: 20px; }
/* Compact theme toggle on small screens — round, icon-style */
.theme-toggle {
width: 38px; height: 38px;
padding: 0;
border-radius: 50%;
font-size: 10px; letter-spacing: 0;
border-color: var(--line-2);
}
}
/* ═══════════════════════════════════════════════════════════════════
EXPERIMENTAL FEATURES (TEST BATCH — not yet pushed)
#3 agent feed #4 view transitions polish #5 capability carousel
#6 sitemap #7 ambient sound mute #8 custom cursor
#9 voice mfsto #16 char reveals #19 micro-interactions
#20 themes #24 photo mode (mission) #25 terminal commands
═══════════════════════════════════════════════════════════════════ */
/* ── #20 Theme variants beyond light/dark ──────────────────────── */
[data-theme="combat"] {
--bg: #1a1410; --bg-2: #221812; --bg-3: #2a1f18;
--line: #3a2820; --line-2: #4a3528;
--fg: #e8dac8; --fg-dim: #b8a48a; --fg-dimmer: #7a6852;
--accent: #ffb070;
--grid-line: rgba(255,176,112,0.04);
--topnav-bg: rgba(26,20,16,0.92);
--topnav-bg-mid: rgba(26,20,16,0.6);
}
[data-theme="avalanche"] {
--bg: #0e1418; --bg-2: #131c22; --bg-3: #18242c;
--line: #243038; --line-2: #2e3d48;
--fg: #e0eaf0; --fg-dim: #98b0c0; --fg-dimmer: #607888;
--accent: #88c8f0;
--grid-line: rgba(136,200,240,0.04);
--topnav-bg: rgba(14,20,24,0.92);
--topnav-bg-mid: rgba(14,20,24,0.6);
}
[data-theme="hazmat"] {
--bg: #14130a; --bg-2: #1a190d; --bg-3: #221f10;
--line: #2d2916; --line-2: #3d3820;
--fg: #f0ecc8; --fg-dim: #b8b088; --fg-dimmer: #807858;
--accent: #f5d040;
--grid-line: rgba(245,208,64,0.04);
--topnav-bg: rgba(20,19,10,0.92);
--topnav-bg-mid: rgba(20,19,10,0.6);
}
/* ── #8 Custom cursor (compact crosshair, no center dot) ──────── */
@media (hover: hover) and (pointer: fine) {
html.cursor-on, html.cursor-on * { cursor: none !important; }
html.cursor-on input, html.cursor-on textarea { cursor: text !important; }
.vx-cursor {
position: fixed; top: 0; left: 0;
width: 16px; height: 16px;
pointer-events: none;
transform: translate(-50%, -50%);
z-index: 2147483646; /* near max — sits above selection overlay, popovers, etc. */
mix-blend-mode: difference;
will-change: transform;
}
.vx-cursor::before,
.vx-cursor::after {
content: ''; position: absolute; background: var(--accent);
}
.vx-cursor::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-0.5px); }
.vx-cursor::after { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-0.5px); }
/* Chip rides outside the difference-blend cursor frame so its colours
stay readable over any text underneath. Own stacking context via z-index
placed even higher than the cursor body. */
.vx-chip-layer {
position: fixed; top: 0; left: 0;
pointer-events: none;
z-index: 2147483647;
will-change: transform, opacity;
opacity: 0;
transition: opacity 0.14s;
transform: translate(20px, 20px);
}
.vx-chip-layer.is-on { opacity: 1; }
.vx-chip-layer .chip {
font-family: 'JetBrains Mono', monospace;
font-size: 9px; letter-spacing: 0.18em;
padding: 3px 7px; white-space: nowrap;
background: var(--accent); color: var(--bg);
box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.vx-cursor.is-hot { width: 22px; height: 22px; }
}
/* ── #20 Theme picker dropdown ──────────────────────────────────── */
.theme-picker {
position: relative; display: inline-block;
}
.theme-picker .pick-list {
position: absolute; top: calc(100% + 8px); right: 0;
background: var(--bg); border: 1px solid var(--line);
padding: 6px;
display: none;
z-index: 200;
min-width: 140px;
box-shadow: 0 12px 36px rgba(0,0,0,0.45);
}
.theme-picker.is-open .pick-list { display: block; }
.theme-picker .pick-item {
display: flex; align-items: center; gap: 10px;
width: 100%; padding: 8px 10px;
background: transparent; border: 1px solid transparent;
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.14em;
color: var(--fg-dim); cursor: pointer; text-align: left;
}
.theme-picker .pick-item:hover { background: var(--bg-2); color: var(--fg); border-color: var(--line-2); }
.theme-picker .pick-item.is-current { color: var(--accent); }
.theme-picker .pick-swatch {
width: 10px; height: 10px; flex-shrink: 0;
}
.theme-picker .pick-swatch.dark { background: #b8e6b3; }
.theme-picker .pick-swatch.light { background: #2d7a26; }
.theme-picker .pick-swatch.combat { background: #ffb070; }
.theme-picker .pick-swatch.avalanche { background: #88c8f0; }
.theme-picker .pick-swatch.hazmat { background: #f5d040; }
/* ── #16 Char-level reveal animation ───────────────────────────── */
.reveal-chars { display: inline-block; }
.reveal-chars .c {
display: inline-block;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.45s cubic-bezier(0.22,0.61,0.36,1), transform 0.45s cubic-bezier(0.22,0.61,0.36,1);
}
.reveal-chars .c.s { width: 0.32em; } /* preserves space breaks */
.reveal-chars.is-visible .c { opacity: 1; transform: translateY(0); }
.reveal-chars.is-visible .c {
transition-delay: calc(var(--ci, 0) * 0.018s);
}
/* ── #19 Hover micro-interactions ───────────────────────────────── */
.btn-primary {
position: relative; overflow: hidden;
}
.btn-primary .btn-fill {
position: absolute; inset: 0;
background: var(--accent);
transform: translateX(-101%);
transition: transform 0.36s cubic-bezier(0.6,0.05,0.2,1);
}
.btn-primary:hover .btn-fill { transform: translateX(0); }
.btn-primary .btn-label { position: relative; z-index: 1; transition: color 0.24s; }
.btn-primary:hover .btn-label { color: var(--bg); }
/* Generic hover micro-shift for cards and tiles */
.mega-col, .scenario-card, .role-row {
transition: transform 0.22s cubic-bezier(0.22,0.61,0.36,1), background 0.22s, border-color 0.22s;
}
.mega-col:hover, .scenario-card:hover { transform: translateY(-2px); }
/* Link underline grow */
a:not(.nav-link):not(.mega-col):not(.btn-primary):not(.btn-ghost):not(.mobile-nav a):not(.footer-mark a):not(.footer-bottom a):hover {
text-decoration: none;
}
/* ── #6 3D site map overlay ──────────────────────────────────────── */
.sitemap-overlay {
position: fixed; inset: 0;
z-index: 1500;
background: rgba(10,11,13,0.85);
backdrop-filter: blur(12px);
display: none;
opacity: 0;
transition: opacity 0.34s ease;
}
.sitemap-overlay.is-open { display: block; opacity: 1; }
.sitemap-mount { position: absolute; inset: 0; }
.sitemap-meta {
position: absolute; top: 24px; left: 32px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.18em;
color: var(--accent);
}
.sitemap-close {
position: absolute; top: 22px; right: 32px;
background: transparent; border: 1px solid var(--line-2);
color: var(--fg); cursor: pointer;
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.16em;
padding: 6px 12px;
}
.sitemap-close:hover { color: var(--accent); border-color: var(--accent); }
.sitemap-tooltip {
position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.14em;
color: var(--fg-dim);
pointer-events: none;
}
.sitemap-tooltip kbd {
font-family: inherit; color: var(--accent); border: 1px solid var(--line-2);
padding: 1px 5px; margin: 0 2px;
}
/* ── #5 Capability replays carousel on landing ─────────────────── */
.cap-replays {
position: relative;
padding: 100px 40px;
border-top: 1px solid var(--line);
background: var(--bg);
}
.cap-replays-eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.22em;
color: var(--accent);
margin-bottom: 16px;
}
.cap-replays-title {
font-size: clamp(28px, 4vw, 48px);
font-weight: 500; letter-spacing: -0.025em;
margin-bottom: 8px; max-width: 760px;
}
.cap-replays-title em { font-style: italic; color: var(--accent); font-weight: 400; }
.cap-replays-lead {
color: var(--fg-dim); font-size: 15px; line-height: 1.55;
max-width: 540px; margin-bottom: 48px;
}
.replay-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}
.replay-card {
position: relative;
aspect-ratio: 4 / 5;
border: 1px solid var(--line);
overflow: hidden;
cursor: pointer;
background: var(--bg-2);
transition: border-color 0.24s, transform 0.24s;
}
.replay-card.hover { border-color: var(--accent); transform: translateY(-4px); }
.replay-card canvas { display: block; width: 100% !important; height: 100% !important; }
.replay-card .cap-fx { position: absolute; inset: 0; pointer-events: none; }
.replay-card .cap-label {
position: absolute; bottom: 14px; left: 16px; right: 16px;
z-index: 2;
}
.replay-card .cap-eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 9px; letter-spacing: 0.22em;
color: var(--accent);
margin-bottom: 6px;
}
.replay-card .cap-name {
font-size: 18px; font-weight: 500;
letter-spacing: -0.015em;
color: var(--fg);
}
.replay-card .cap-state {
position: absolute; top: 12px; left: 14px; z-index: 2;
font-family: 'JetBrains Mono', monospace;
font-size: 9px; letter-spacing: 0.20em;
color: var(--fg-dimmer);
}
.replay-card.fire .cap-fx { background: radial-gradient(ellipse at 50% 85%, rgba(255,80,30,0.55), rgba(255,150,40,0.20) 30%, transparent 65%); animation: cap-fire 1.2s ease-in-out infinite alternate; }
.replay-card.medic .cap-fx { background: linear-gradient(180deg, rgba(255,217,176,0.18), transparent 55%), radial-gradient(circle at 30% 70%, rgba(120,40,40,0.35), transparent 50%); }
.replay-card.medic::after { content: ''; position: absolute; left: 0; right: 0; top: 40%; height: 1px; background: linear-gradient(to right, transparent, #ff5050, transparent); animation: cap-tracer 1.4s linear infinite; z-index: 1; }
.replay-card.hazmat .cap-fx { background: radial-gradient(ellipse at 70% 35%, rgba(200,217,106,0.40), transparent 55%), linear-gradient(180deg, rgba(180,200,80,0.10), transparent 70%); }
.replay-card.rubble .cap-fx { background: radial-gradient(ellipse at 50% 50%, rgba(208,200,176,0.25), transparent 60%); animation: cap-shake 0.32s ease-in-out infinite alternate; }
.replay-card.avalanche .cap-fx { background: linear-gradient(180deg, rgba(180,212,240,0.30), rgba(214,226,238,0.40)); }
.replay-card.avalanche::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, white 0.5px, transparent 1px), radial-gradient(circle at 80% 60%, white 0.5px, transparent 1px), radial-gradient(circle at 50% 90%, white 0.5px, transparent 1px); background-size: 100px 100px, 80px 80px, 120px 120px; opacity: 0.6; animation: cap-snow 6s linear infinite; }
@keyframes cap-fire { 0% { opacity: 0.85; } 100% { opacity: 1; } }
@keyframes cap-tracer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes cap-shake { 0% { transform: translate(0, 0); } 100% { transform: translate(-2px, 1px); } }
@keyframes cap-snow { 0% { background-position: 0 0, 0 0, 0 0; } 100% { background-position: 0 100px, 0 80px, 0 120px; } }
@media (max-width: 600px) { .cap-replays { padding: 60px 20px; } .replay-grid { grid-template-columns: 1fr 1fr; gap: 10px; } }
/* ── View Transitions polish — deliberate, with a hint of blur out ─ */
::view-transition-old(root) {
animation: vt-out 200ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
mix-blend-mode: normal;
}
::view-transition-new(root) {
animation: vt-in 280ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
mix-blend-mode: normal;
}
@keyframes vt-out { to { opacity: 0; filter: blur(3px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) { animation: none !important; }
}
/* ═══════════════════════════════════════════════════════════════════
ELEGANCE BATCH — #4 drop caps · #5 read progress · #6 section rail
#7 smart micro-typography (handled in JS; no CSS needed here)
═══════════════════════════════════════════════════════════════════ */
/* ── #4 Drop cap on long-form opening paragraphs ─────────────────── */
.drop-cap::first-letter {
font-family: 'Monoton', 'Georgia', 'Times New Roman', serif;
font-style: normal;
font-weight: 400;
font-size: 4.6em;
line-height: 0.92;
float: left;
margin: 0.06em 0.14em -0.02em 0;
color: var(--accent);
letter-spacing: 0;
}
[data-theme="light"] .drop-cap::first-letter { color: var(--accent); }
@media (max-width: 600px) {
.drop-cap::first-letter { font-size: 3.8em; margin-right: 0.10em; }
}
/* ── Reading-progress hairline at top of viewport ─────────────────
1px gray (--fg-dimmer), low opacity. Subtle positional anchor,
not an accent stripe. Fades further when scroll stops. */
.read-progress {
position: fixed;
top: 0; left: 0; right: 0;
height: 1px;
background: var(--fg-dimmer);
transform-origin: left center;
transform: scaleX(0);
z-index: 200;
pointer-events: none;
opacity: 0.30;
transition: transform 0.08s linear, opacity 0.2s ease;
will-change: transform;
}
.read-progress.is-idle { opacity: 0.10; }
@media (prefers-reduced-motion: reduce) { .read-progress { transition: none; } }
/* ── #10 Held-still section transition ───────────────────────────────
Drops into long-form pages between thematic clusters. A wide hairline,
a numeric / date stamp on the left, a single monospace label on the
right. Vertical breathing room is intentional — these are pause beats
in the reading rhythm, not decoration. */
.section-break {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 28px;
margin: 96px 0 88px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.22em;
color: var(--fg-dimmer);
text-transform: uppercase;
}
.section-break::before,
.section-break::after {
content: '';
height: 1px;
background: var(--line);
}
.section-break .sr-mark {
display: inline-flex;
align-items: center;
gap: 14px;
white-space: nowrap;
}
.section-break .sr-num { color: var(--fg-dim); }
.section-break .sr-dot {
width: 4px; height: 4px;
background: var(--fg-dimmer);
display: inline-block;
}
@media (max-width: 600px) {
.section-break {
margin: 64px 0 56px;
grid-template-columns: 1fr;
text-align: center;
gap: 14px;
}
.section-break::before,
.section-break::after { width: 60%; margin: 0 auto; }
}
/* ── #6 Section-marker (sticky margin label) ─────────────────────── */
.section-marker {
position: fixed;
left: 32px;
top: 50%;
transform: translateY(-50%);
z-index: 70;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.20em;
color: var(--fg-dim);
pointer-events: none;
max-width: 200px;
opacity: 0;
transition: opacity 0.32s ease;
}
.section-marker.is-on { opacity: 1; }
.section-marker .sm-num {
color: var(--accent);
margin-bottom: 8px;
}
.section-marker .sm-title {
color: var(--fg);
font-family: 'Inter Tight', sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: -0.005em;
line-height: 1.3;
text-transform: none;
}
.section-marker .sm-bar {
width: 28px;
height: 1px;
background: var(--accent);
margin-bottom: 14px;
opacity: 0.5;
}
/* Hide on narrow viewports where there's no margin to put it in */
@media (max-width: 1300px) { .section-marker { display: none; } }
/* ════════════════════════════════════════════════════════════════════
Canonical footer — five columns, every page represented. The
.footer-cols-5 class out-specifies the older per-page 3-col rules.
════════════════════════════════════════════════════════════════════ */
.footer-cols.footer-cols-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 36px; align-items: start; }
@media (max-width: 1100px) { .footer-cols.footer-cols-5 { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
@media (max-width: 700px) { .footer-cols.footer-cols-5 { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
/* Footer sub-group — Colosseum's pages nest under one expandable entry. */
.footer-sub { margin: 0; }
.footer-sub summary {
list-style: none; cursor: pointer;
font-size: 14px; color: var(--fg-dim);
display: inline-flex; align-items: center; gap: 7px;
transition: color 0.2s;
}
.footer-sub summary::-webkit-details-marker { display: none; }
.footer-sub summary::after {
content: '';
width: 6px; height: 6px;
border-right: 1px solid var(--fg-dimmer);
border-bottom: 1px solid var(--fg-dimmer);
transform: rotate(45deg) translateY(-1px);
transition: transform 0.2s ease;
}
.footer-sub[open] summary::after { transform: rotate(225deg) translateY(-1px); }
.footer-sub summary:hover { color: var(--fg); }
.footer-sub .footer-sub-links {
display: grid; gap: 10px;
padding: 10px 0 4px 14px;
border-left: 1px solid var(--line);
margin: 8px 0 2px 2px;
}
.footer-sub .footer-sub-links a { font-size: 13px; }
/* ════════════════════════════════════════════════════════════════════
Footer link underline — draws in left→right on hover, exits stage
right on leave. Background-size trick: the anchor point swaps sides
(right at rest, left on hover) so grow and shrink run in the same
visual direction.
════════════════════════════════════════════════════════════════════ */
/* .footer prefix out-specifies the per-page inline `.footer-col a`
rules that would otherwise clobber the transition list. */
.footer .footer-col a,
.footer .footer-sub-links a,
.footer .footer-bottom a {
width: fit-content;
background-image: linear-gradient(var(--accent), var(--accent));
background-repeat: no-repeat;
background-position: right bottom;
background-size: 0% 1px;
padding-bottom: 2px;
transition: background-size 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.2s;
}
.footer .footer-col a:hover,
.footer .footer-sub-links a:hover,
.footer .footer-bottom a:hover {
background-position: left bottom;
background-size: 100% 1px;
}
/* source: site-v2.css */
/* Vertex — 2026 editorial system
This sheet intentionally loads after page-local CSS so every internal
page shares one visual language without altering the written content. */
:root,
[data-theme="light"],
[data-theme="dark"] {
--bg: #f3efe6;
--bg-2: #e9e3d8;
--bg-3: #c8b7e8;
--line: rgba(20, 20, 20, 0.19);
--line-2: rgba(20, 20, 20, 0.34);
--fg: #141414;
--fg-dim: #5f5b55;
--fg-dimmer: #787169;
--accent: #6c548d;
--grid-line: rgba(20, 20, 20, 0.045);
--topnav-bg: rgba(243, 239, 230, 0.92);
--topnav-bg-mid: rgba(243, 239, 230, 0.92);
--cream: #f3efe6;
--paper: #e9e3d8;
--ink: #141414;
--ink-soft: #5f5b55;
--lavender: #c8b7e8;
--lavender-deep: #6c548d;
--mono: "JetBrains Mono", monospace;
--sans: "Inter Tight", -apple-system, BlinkMacSystemFont, sans-serif;
--serif: "Newsreader", Georgia, serif;
--page-pad: clamp(22px, 3.25vw, 52px);
--content-max: 1480px;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--ease-soft: cubic-bezier(0.25, 0.1, 0.25, 1);
color-scheme: light;
}
html {
background: var(--cream) !important;
color: var(--ink) !important;
scroll-behavior: auto;
}
body {
min-height: 100vh;
background: var(--cream) !important;
color: var(--ink) !important;
font-family: var(--sans) !important;
overflow-x: clip;
}
body::before {
background-image:
linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px) !important;
background-size: 72px 72px !important;
opacity: 0.85;
}
::selection {
background: var(--lavender) !important;
color: var(--ink) !important;
}
a,
button,
input,
textarea,
select,
summary {
-webkit-tap-highlight-color: transparent;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
outline: 2px solid var(--lavender-deep);
outline-offset: 4px;
}
main {
position: relative;
z-index: 2;
}
/* The utility overlays were a layer of product-demo theater, not useful
navigation. Keep them out of the calmer editorial system. */
.mega-menu,
.nav-veil,
.vision-hud,
.terminal,
.terminal-scrim,
.keyboard-layer,
.cmdpal,
.cmdpal-scrim,
.search-modal,
.search-scrim,
.shortcuts-overlay,
.site-map-overlay,
.section-rail,
.theme-toggle,
.theme-picker,
.vision-toggle,
.terminal-trigger {
display: none !important;
}
.has-section-rail {
padding-left: 0 !important;
}
.read-progress {
z-index: 220 !important;
height: 2px !important;
background: var(--lavender-deep) !important;
opacity: 0.9 !important;
}
/* Navigation */
.topnav,
body:not(.is-scrolled) .topnav {
min-height: 76px !important;
padding: 0 var(--page-pad) !important;
background: rgba(243, 239, 230, 0.9) !important;
border-bottom: 1px solid rgba(20, 20, 20, 0.14);
backdrop-filter: blur(18px) saturate(120%) !important;
-webkit-backdrop-filter: blur(18px) saturate(120%) !important;
}
.topnav-mark {
justify-self: start;
color: var(--ink) !important;
font-size: 22px !important;
line-height: 1;
}
.topnav-mark a {
color: inherit !important;
gap: 0 !important;
}
.nav-links-row {
gap: clamp(18px, 2.3vw, 38px) !important;
}
.nav-item {
position: relative;
}
.nav-item::before,
.nav-item::after {
display: none !important;
}
a.nav-link,
[data-theme="light"] a.nav-link,
[data-theme="dark"] a.nav-link {
position: relative;
min-width: 0 !important;
padding: 28px 0 25px !important;
border: 0 !important;
background: transparent !important;
color: var(--ink) !important;
font-family: var(--sans) !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0.015em !important;
text-transform: none;
}
a.nav-link::after {
content: "";
position: absolute;
right: 0;
bottom: 20px;
left: 0;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform 440ms var(--ease);
}
a.nav-link:hover::after,
a.nav-link:focus-visible::after,
.nav-item.is-current > a.nav-link::after {
transform: scaleX(1);
transform-origin: left;
}
.nav-right {
gap: 10px !important;
}
.menu-toggle {
position: relative !important;
width: 40px !important;
height: 40px !important;
border: 0 !important;
border-radius: 50%;
background: transparent !important;
color: var(--ink) !important;
transition: background-color 360ms var(--ease-soft);
}
.menu-toggle:hover,
.menu-toggle:focus-visible {
background: rgba(200, 183, 232, 0.44) !important;
}
.menu-toggle span {
right: auto !important;
left: 10px !important;
width: 20px !important;
height: 1px !important;
background: currentColor !important;
}
.menu-toggle span:nth-child(1) { top: 16px !important; }
.menu-toggle span:nth-child(2) { display: none !important; }
.menu-toggle span:nth-child(3) { top: 23px !important; }
body.menu-open .menu-toggle span:nth-child(1) { transform: translateY(3.5px) rotate(45deg) !important; }
body.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-3.5px) rotate(-45deg) !important; }
.mobile-nav {
width: min(520px, 100vw) !important;
padding: 104px clamp(24px, 6vw, 48px) 34px !important;
background: var(--lavender) !important;
border-left: 1px solid rgba(20, 20, 20, 0.2) !important;
color: var(--ink) !important;
}
.mobile-nav-section {
margin: 0 !important;
padding: 18px 0 !important;
border-bottom: 1px solid rgba(20, 20, 20, 0.25) !important;
}
.mobile-nav-label {
margin-bottom: 8px !important;
color: rgba(20, 20, 20, 0.6) !important;
font-size: 9px !important;
}
.mobile-nav a {
min-height: 44px !important;
padding: 7px 0 !important;
border: 0 !important;
color: var(--ink) !important;
font-family: var(--serif) !important;
font-size: clamp(24px, 7vw, 38px) !important;
font-weight: 400 !important;
letter-spacing: -0.025em !important;
transition: color 360ms var(--ease-soft) !important;
}
.mobile-nav a:hover,
.mobile-nav a:focus-visible,
.mobile-nav a.is-current {
color: var(--lavender-deep) !important;
}
.mobile-nav a.is-current > span:first-child {
padding-left: 0 !important;
}
.mobile-nav a.is-current > span:first-child::before {
display: none !important;
}
.mobile-nav-arrow {
color: rgba(20, 20, 20, 0.55) !important;
transition: transform 420ms var(--ease) !important;
}
.mobile-nav-foot {
border-top-color: rgba(20, 20, 20, 0.25) !important;
}
.mobile-nav-mark,
.mobile-nav-mail {
color: var(--ink) !important;
}
.menu-scrim {
background: rgba(20, 20, 20, 0.3) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
}
/* Editorial heroes */
.page-hero,
.explainer-hero,
.paper-hero,
.fs-head,
.nf-wrap {
position: relative;
width: min(100%, var(--content-max)) !important;
max-width: none !important;
min-height: min(760px, 78svh);
margin: 0 auto !important;
padding: clamp(150px, 17vh, 210px) var(--page-pad) clamp(76px, 9vw, 136px) !important;
border-bottom: 1px solid var(--line) !important;
overflow: hidden;
}
.page-hero::before,
.explainer-hero::before,
.paper-hero::before,
.fs-head::before {
content: "";
position: absolute;
top: 76px;
right: var(--page-pad);
width: min(40vw, 560px);
aspect-ratio: 1;
border: 1px solid rgba(20, 20, 20, 0.18);
border-radius: 50%;
background:
linear-gradient(rgba(20, 20, 20, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(20, 20, 20, 0.08) 1px, transparent 1px),
var(--lavender);
background-size: 48px 48px;
opacity: 0.86;
transform: translate(22%, -22%);
pointer-events: none;
}
.page-hero > *,
.explainer-hero > *,
.paper-hero > *,
.fs-head > * {
position: relative;
z-index: 2;
}
.page-eyebrow,
.paper-eyebrow,
.m-eyebrow,
.content-label,
.section-label,
.prose-label,
.v-label,
.paper-section-label,
.role-section-label,
.sm-label,
.values-label {
color: var(--lavender-deep) !important;
font-family: var(--mono) !important;
font-size: 10px !important;
font-weight: 500 !important;
letter-spacing: 0.13em !important;
line-height: 1.4;
text-transform: uppercase;
}
.page-title,
.paper-hero > .paper-title,
.m-title,
.fs-title,
.nf-title {
max-width: 1120px !important;
margin: 0 0 34px !important;
color: var(--ink) !important;
font-family: var(--sans) !important;
font-size: clamp(58px, 9.2vw, 142px) !important;
font-weight: 500 !important;
letter-spacing: -0.06em !important;
line-height: 0.86 !important;
}
.page-title em,
.paper-hero > .paper-title em,
.m-title em,
.fs-title em,
.nf-title em,
.accent {
color: var(--lavender-deep) !important;
font-family: var(--serif) !important;
font-weight: 400 !important;
}
.page-lead,
.m-lead,
.fs-lead,
.nf-lead,
.lead {
max-width: 760px !important;
color: var(--ink-soft) !important;
font-size: clamp(18px, 1.7vw, 25px) !important;
line-height: 1.45 !important;
}
/* Content rhythm */
.content-section,
.v-wrap,
.m-wrap,
.paper-body,
.role-body,
.press-body,
.careers-body,
.culture-wrap,
.prose-wrap,
.form-wrap,
.assets-section,
.bio-section,
.embed-section,
.timeline-section {
position: relative;
z-index: 3;
width: min(100%, var(--content-max)) !important;
max-width: none !important;
margin: 0 auto !important;
}
.content-section,
.v-section,
.m-section,
.paper-section,
.role-section,
.prose-section,
.values-section,
.fs-section,
.assets-section,
.bio-section,
.embed-section,
.timeline-section,
.role-apply-section {
padding: clamp(72px, 8vw, 126px) var(--page-pad) !important;
border-bottom: 1px solid var(--line) !important;
}
.content-grid,
.v-section,
.m-section,
.paper-section,
.role-section,
.prose-section {
grid-template-columns: minmax(150px, 0.32fr) minmax(0, 1fr) !important;
gap: clamp(34px, 7vw, 130px) !important;
}
.content-body,
.v-body,
.paper-section-body,
.role-section-body,
.prose,
.m-section p,
.bio-body,
.philosophy-body {
max-width: 920px;
color: var(--ink-soft) !important;
font-size: clamp(16px, 1.25vw, 19px) !important;
line-height: 1.68 !important;
}
.content-body strong,
.v-body strong,
.paper-section-body strong,
.role-section-body strong,
.prose strong {
color: var(--ink) !important;
font-weight: 500 !important;
}
.content-body h2,
.v-body h2,
.paper-section-body h2,
.role-section-body h2,
.prose h2,
.principles-headline,
.timeline-title {
color: var(--ink) !important;
font-family: var(--serif) !important;
font-size: clamp(36px, 5vw, 74px) !important;
font-weight: 400 !important;
letter-spacing: -0.04em !important;
line-height: 0.98 !important;
}
.content-body h3,
.v-body h3,
.paper-section-body h3,
.role-section-body h3,
.prose h3 {
color: var(--ink) !important;
font-size: clamp(22px, 2.3vw, 34px) !important;
font-weight: 500 !important;
letter-spacing: -0.025em !important;
}
blockquote,
.v-quote,
.m-pullquote,
.finding-quote,
.stage-quote {
border: 0 !important;
border-left: 4px solid var(--lavender-deep) !important;
background: var(--lavender) !important;
color: var(--ink) !important;
padding: clamp(28px, 5vw, 72px) !important;
font-family: var(--serif) !important;
font-size: clamp(26px, 4vw, 54px) !important;
font-weight: 400 !important;
line-height: 1.04 !important;
}
code,
pre,
kbd,
.code,
.log-wrap {
font-family: var(--mono) !important;
}
pre,
.log-wrap {
border: 1px solid rgba(243, 239, 230, 0.18) !important;
background: var(--ink) !important;
color: var(--cream) !important;
}
/* Data, cards and lists: no layout movement on hover */
.stat-row,
.v-stat-row,
.v-cap-grid,
.principle-grid,
.principles-grid,
.values-grid,
.method-grid,
.provisions-grid,
.rigor-grid,
.repo-list,
.vh-grid,
.scn-grid,
.assets-grid,
.pov-grid {
gap: 0 !important;
border-top: 1px solid var(--line) !important;
border-left: 1px solid var(--line) !important;
}
.stat-cell,
.v-stat-cell,
.v-cap-card,
.principle-card,
.value-item,
.method-card,
.provision-card,
.rigor-card,
.repo-card,
.vh-card,
.scn-card,
.related-card,
.asset-cell {
position: relative;
margin: 0 !important;
border: 0 !important;
border-right: 1px solid var(--line) !important;
border-bottom: 1px solid var(--line) !important;
border-radius: 0 !important;
background: rgba(243, 239, 230, 0.68) !important;
color: var(--ink) !important;
box-shadow: none !important;
transform: none !important;
transition:
background-color 520ms var(--ease-soft),
color 520ms var(--ease-soft) !important;
}
.stat-cell:hover,
.v-stat-cell:hover,
.v-cap-card:hover,
.principle-card:hover,
.value-item:hover,
.method-card:hover,
.provision-card:hover,
.rigor-card:hover,
.repo-card:hover,
.vh-card:hover,
.scn-card:hover,
.related-card:hover,
.asset-cell:hover {
background: var(--lavender) !important;
color: var(--ink) !important;
transform: none !important;
}
.stat-num,
.v-stat-num,
.finding-stat {
color: var(--ink) !important;
font-family: var(--serif) !important;
font-weight: 400 !important;
letter-spacing: -0.05em !important;
}
.stat-num span,
.v-stat-num span {
color: var(--lavender-deep) !important;
}
.stat-desc,
.stat-label,
.v-stat-label,
.v-stat-desc,
.v-stat-src,
.v-cap-body,
.principle-body,
.value-body,
.method-body,
.provision-body,
.rigor-body,
.repo-desc,
.vh-tag,
.scn-desc {
color: var(--ink-soft) !important;
}
.v-cap-title,
.principle-title,
.value-title,
.method-title,
.provision-title,
.rigor-title,
.repo-title,
.vh-title,
.scn-dom {
color: var(--ink) !important;
}
.paper-list,
.role-list,
.sm-list,
.v-doc-list,
.g-list,
.dl-list,
.rule-list {
border-top-color: var(--line) !important;
}
.paper-row,
.role-row,
.sm-item,
.v-doc-row,
.g-row,
.dl-row,
.rule-row,
.fs-row,
.pov-row,
.agp-row,
.cp-row,
.sc-row,
.ty-row {
margin: 0 !important;
border-color: var(--line) !important;
background: transparent !important;
transform: none !important;
transition:
background-color 520ms var(--ease-soft),
color 520ms var(--ease-soft) !important;
}
.paper-row:hover,
.role-row:hover,
.sm-item:hover,
.v-doc-row:hover,
.g-row:hover,
.dl-row:hover,
.rule-row:hover,
.fs-row:hover,
.pov-row:hover,
.agp-row:hover,
.cp-row:hover,
.sc-row:hover,
.ty-row:hover {
padding-left: 0 !important;
padding-right: 0 !important;
background: var(--lavender) !important;
color: var(--ink) !important;
transform: none !important;
}
.paper-title,
.role-title,
.sm-name,
.v-doc-title,
.g-term,
.fs-key {
color: var(--ink) !important;
}
.paper-authors,
.paper-abstract,
.sm-desc,
.sm-meta,
.v-doc-code,
.g-def,
.fs-val,
.role-meta,
.role-loc,
.role-type {
color: var(--ink-soft) !important;
}
.tag,
.chip,
.d-chip,
.paper-conf,
.repo-tag,
.provision-tag,
.vh-tag {
border-color: rgba(20, 20, 20, 0.28) !important;
border-radius: 999px !important;
background: transparent !important;
color: var(--lavender-deep) !important;
}
/* Buttons use opposing flat shutters. There is motion, but no glow,
blob, bloom, or geometry shift. */
.btn-primary,
.paper-link,
.btn-ghost,
.apply-btn,
.b-cta,
.os-cta,
.nf-cta,
.v-cta a,
.closing-cta a,
.cta-section a,
.culture-cta a,
.role-apply-section a {
position: relative !important;
isolation: isolate;
overflow: hidden !important;
border: 1px solid var(--ink) !important;
border-radius: 0 !important;
background: var(--ink) !important;
color: var(--cream) !important;
box-shadow: none !important;
transform: none !important;
transition: color 460ms var(--ease-soft) !important;
}
.btn-primary::before,
.paper-link::before,
.btn-ghost::before,
.apply-btn::before,
.b-cta::before,
.os-cta::before,
.nf-cta::before,
.v-cta a::before,
.closing-cta a::before,
.cta-section a::before,
.culture-cta a::before,
.role-apply-section a::before,
.btn-primary::after,
.paper-link::after,
.btn-ghost::after,
.apply-btn::after,
.b-cta::after,
.os-cta::after,
.nf-cta::after,
.v-cta a::after,
.closing-cta a::after,
.cta-section a::after,
.culture-cta a::after,
.role-apply-section a::after {
content: "";
position: absolute;
right: -1px;
left: -1px;
z-index: -1;
height: calc(50% + 1px);
background: var(--lavender);
transition: transform 660ms var(--ease);
}
.btn-primary::before,
.paper-link::before,
.btn-ghost::before,
.apply-btn::before,
.b-cta::before,
.os-cta::before,
.nf-cta::before,
.v-cta a::before,
.closing-cta a::before,
.cta-section a::before,
.culture-cta a::before,
.role-apply-section a::before {
top: -1px;
transform: translateX(-102%);
}
.btn-primary::after,
.paper-link::after,
.btn-ghost::after,
.apply-btn::after,
.b-cta::after,
.os-cta::after,
.nf-cta::after,
.v-cta a::after,
.closing-cta a::after,
.cta-section a::after,
.culture-cta a::after,
.role-apply-section a::after {
bottom: -1px;
transform: translateX(102%);
}
.btn-primary:hover,
.paper-link:hover,
.btn-ghost:hover,
.apply-btn:hover,
.b-cta:hover,
.os-cta:hover,
.nf-cta:hover,
.v-cta a:hover,
.closing-cta a:hover,
.cta-section a:hover,
.culture-cta a:hover,
.role-apply-section a:hover {
color: var(--ink) !important;
transform: none !important;
}
.btn-primary:hover::before,
.paper-link:hover::before,
.btn-ghost:hover::before,
.apply-btn:hover::before,
.b-cta:hover::before,
.os-cta:hover::before,
.nf-cta:hover::before,
.v-cta a:hover::before,
.closing-cta a:hover::before,
.cta-section a:hover::before,
.culture-cta a:hover::before,
.role-apply-section a:hover::before,
.btn-primary:hover::after,
.paper-link:hover::after,
.btn-ghost:hover::after,
.apply-btn:hover::after,
.b-cta:hover::after,
.os-cta:hover::after,
.nf-cta:hover::after,
.v-cta a:hover::after,
.closing-cta a:hover::after,
.cta-section a:hover::after,
.culture-cta a:hover::after,
.role-apply-section a:hover::after {
transform: translateX(0);
}
/* Forms */
input,
textarea,
select,
.cmd-input {
border: 0 !important;
border-bottom: 1px solid var(--line-2) !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--ink) !important;
font-family: var(--sans) !important;
box-shadow: none !important;
transition: border-color 360ms var(--ease-soft), background-color 360ms var(--ease-soft) !important;
}
input:focus,
textarea:focus,
select:focus,
.cmd-input:focus {
border-bottom-color: var(--lavender-deep) !important;
background: rgba(200, 183, 232, 0.16) !important;
}
label {
color: var(--ink-soft) !important;
}
/* Operator plates and visual explainers */
.op-plate-wrap,
.ar-panel,
.hm-grid,
.vitals-grid,
.d-map,
.ar-grid-wrap {
border-color: var(--line) !important;
background-color: var(--paper) !important;
box-shadow: none !important;
}
.op-plate {
filter: saturate(0.72) contrast(1.02);
}
/* Footer */
.footer {
position: relative;
z-index: 5;
padding: clamp(72px, 8vw, 118px) var(--page-pad) 30px !important;
border-top: 0 !important;
background: var(--ink) !important;
color: var(--cream) !important;
}
.footer-top,
.footer-bottom {
width: min(100%, var(--content-max)) !important;
max-width: none !important;
}
.footer-top {
grid-template-columns: minmax(220px, 0.6fr) minmax(0, 1.4fr) !important;
gap: clamp(54px, 8vw, 140px) !important;
padding-bottom: 82px !important;
}
.footer-mark {
align-self: start;
color: var(--cream) !important;
font-size: 28px !important;
}
.footer-cols,
.footer-cols.footer-cols-5 {
grid-template-columns: repeat(5, minmax(110px, 1fr)) !important;
gap: clamp(22px, 3vw, 54px) !important;
}
.footer-col-h,
.footer-sub summary {
color: #9c978f !important;
font-size: 9px !important;
}
.footer .footer-col a,
.footer .footer-sub-links a,
.footer .footer-bottom a {
color: var(--cream) !important;
background-image: linear-gradient(currentColor, currentColor) !important;
background-position: 100% 100% !important;
background-repeat: no-repeat !important;
background-size: 0 1px !important;
transition: background-size 440ms var(--ease), color 360ms var(--ease-soft) !important;
}
.footer .footer-col a:hover,
.footer .footer-sub-links a:hover,
.footer .footer-bottom a:hover {
color: var(--lavender) !important;
background-position: 0 100% !important;
background-size: 100% 1px !important;
}
.footer-bottom {
border-top-color: rgba(243, 239, 230, 0.2) !important;
color: #9c978f !important;
}
.reveal {
opacity: 0.78 !important;
transform: translateY(16px) !important;
transition: opacity 700ms var(--ease-soft), transform 700ms var(--ease) !important;
}
.reveal.is-visible {
opacity: 1 !important;
transform: none !important;
}
@media (max-width: 1100px) {
.nav-links-row {
gap: 18px !important;
}
a.nav-link {
font-size: 12px !important;
}
.footer-cols,
.footer-cols.footer-cols-5 {
grid-template-columns: repeat(3, 1fr) !important;
row-gap: 42px !important;
}
}
@media (max-width: 900px) {
.topnav,
body:not(.is-scrolled) .topnav {
min-height: 66px !important;
grid-template-columns: 1fr auto !important;
}
.nav-links-row {
display: none !important;
}
.menu-toggle {
display: block !important;
}
.page-hero,
.explainer-hero,
.paper-hero,
.fs-head,
.nf-wrap {
min-height: 650px;
padding-top: 138px !important;
}
.page-hero::before,
.explainer-hero::before,
.paper-hero::before,
.fs-head::before {
width: 58vw;
top: 66px;
}
.content-grid,
.v-section,
.m-section,
.paper-section,
.role-section,
.prose-section {
grid-template-columns: 1fr !important;
gap: 34px !important;
}
.footer-top {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 660px) {
:root,
[data-theme="light"],
[data-theme="dark"] {
--page-pad: 20px;
}
.topnav-mark {
font-size: 19px !important;
}
.mobile-nav {
width: 100vw !important;
border-left: 0 !important;
}
.mobile-nav-section {
padding: 12px 0 !important;
}
.mobile-nav a {
min-height: 38px !important;
font-size: 25px !important;
}
.page-hero,
.explainer-hero,
.paper-hero,
.fs-head,
.nf-wrap {
min-height: 590px;
padding-top: 122px !important;
padding-bottom: 72px !important;
}
.page-hero::before,
.explainer-hero::before,
.paper-hero::before,
.fs-head::before {
width: 72vw;
opacity: 0.62;
}
.page-title,
.paper-hero > .paper-title,
.m-title,
.fs-title,
.nf-title {
font-size: clamp(50px, 16vw, 82px) !important;
}
.content-section,
.v-section,
.m-section,
.paper-section,
.role-section,
.prose-section,
.values-section,
.fs-section,
.assets-section,
.bio-section,
.embed-section,
.timeline-section,
.role-apply-section {
padding-top: 70px !important;
padding-bottom: 70px !important;
}
.stat-row,
.v-stat-row,
.v-cap-grid,
.principle-grid,
.principles-grid,
.values-grid,
.method-grid,
.provisions-grid,
.rigor-grid,
.vh-grid,
.scn-grid,
.assets-grid,
.pov-grid {
grid-template-columns: 1fr !important;
}
.paper-row,
.role-row,
.sm-item,
.v-doc-row,
.g-row,
.dl-row,
.rule-row,
.fs-row,
.pov-row,
.agp-row,
.cp-row,
.sc-row,
.ty-row {
gap: 12px !important;
}
.footer-cols,
.footer-cols.footer-cols-5 {
grid-template-columns: 1fr 1fr !important;
row-gap: 38px !important;
}
.footer-bottom {
display: grid !important;
grid-template-columns: 1fr !important;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.reveal {
opacity: 1 !important;
transform: none !important;
}
}
/* source: site-v3.css */
/* Vertex multi-page rebuild
Loaded last. The old page copy remains, but the legacy site shell and
presentation are replaced by a category-aware editorial system. */
:root {
--v3-cream: #f3efe6;
--v3-paper: #e8e1d5;
--v3-ink: #141414;
--v3-muted: #68625a;
--v3-lavender: #c8b7e8;
--v3-lavender-deep: #6c548d;
--v3-rule: rgba(20, 20, 20, 0.2);
--v3-page: clamp(20px, 3.4vw, 54px);
--v3-max: 1500px;
--v3-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
body[data-page] {
background: var(--v3-cream) !important;
}
body[data-page]::before {
background-size: 64px 64px !important;
opacity: 0.58 !important;
}
/* New shell */
.topnav.site-shell {
min-height: 74px !important;
grid-template-columns: 1fr auto 1fr !important;
padding: 0 var(--v3-page) !important;
border-bottom: 1px solid var(--v3-rule) !important;
background: rgba(243, 239, 230, 0.92) !important;
color: var(--v3-ink) !important;
}
.site-shell .topnav-mark {
line-height: 1 !important;
}
.site-shell .nav-links-row {
display: flex;
gap: clamp(20px, 2.6vw, 42px) !important;
}
.site-shell .nav-link {
min-width: 0 !important;
padding: 27px 0 24px !important;
color: var(--v3-ink) !important;
font-family: var(--sans) !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
.site-shell .nav-link::after {
bottom: 19px !important;
}
.site-shell .nav-right {
justify-self: end;
}
.site-contact {
position: relative;
padding: 9px 0;
color: var(--v3-ink) !important;
font-size: 13px;
font-weight: 500;
}
.site-contact::after {
content: "";
position: absolute;
right: 0;
bottom: 5px;
left: 0;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform 440ms var(--v3-ease);
}
.site-contact:hover::after,
.site-contact:focus-visible::after {
transform: scaleX(1);
transform-origin: left;
}
.site-shell .menu-toggle {
flex: none;
}
.mobile-nav.site-drawer {
display: block;
padding-top: 98px !important;
}
.mobile-nav-primary {
border-top: 1px solid rgba(20, 20, 20, 0.24);
}
.mobile-nav-primary a {
min-height: 0 !important;
padding: 14px 0 !important;
border-bottom: 1px solid rgba(20, 20, 20, 0.24) !important;
font-family: var(--serif) !important;
font-size: clamp(32px, 9vw, 52px) !important;
line-height: 0.98 !important;
}
.mobile-nav-index {
color: rgba(20, 20, 20, 0.48);
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.1em;
}
.site-drawer .mobile-nav-foot {
margin-top: 38px !important;
}
/* Hero architecture */
body[data-page] .page-hero,
body[data-page] .paper-hero,
body[data-page] .fs-head {
display: grid !important;
grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr) !important;
grid-template-rows: auto 1fr auto !important;
column-gap: clamp(44px, 8vw, 140px) !important;
align-content: end !important;
min-height: min(820px, 84svh) !important;
padding: clamp(142px, 18vh, 210px) var(--v3-page) clamp(76px, 8vw, 126px) !important;
border-bottom: 1px solid var(--v3-rule) !important;
}
body[data-page] .page-hero::before,
body[data-page] .paper-hero::before,
body[data-page] .fs-head::before {
top: 74px !important;
right: 0 !important;
bottom: 0 !important;
width: min(39vw, 590px) !important;
height: auto !important;
aspect-ratio: auto !important;
border: 0 !important;
border-left: 1px solid var(--v3-rule) !important;
border-radius: 0 !important;
background-color: var(--v3-lavender) !important;
background-image:
linear-gradient(rgba(20, 20, 20, 0.09) 1px, transparent 1px),
linear-gradient(90deg, rgba(20, 20, 20, 0.09) 1px, transparent 1px) !important;
background-size: 52px 52px !important;
opacity: 1 !important;
transform: none !important;
}
body[data-page] .page-hero::after,
body[data-page] .paper-hero::after,
body[data-page] .fs-head::after {
content: "V/";
position: absolute;
right: clamp(24px, 5vw, 80px);
bottom: clamp(38px, 6vw, 92px);
z-index: 1;
color: rgba(20, 20, 20, 0.75);
font-family: "Monoton", var(--sans);
font-size: clamp(74px, 10vw, 160px);
font-weight: 400;
letter-spacing: -0.08em;
line-height: 0.8;
}
body[data-page] .page-eyebrow,
body[data-page] .paper-eyebrow {
grid-column: 1;
align-self: start;
margin: 0 0 clamp(70px, 11vh, 150px) !important;
}
body[data-page] .page-title,
body[data-page] .paper-hero > .paper-title,
body[data-page] .fs-title {
grid-column: 1;
align-self: end;
max-width: 1050px !important;
margin: 0 !important;
font-size: clamp(62px, 8.6vw, 136px) !important;
line-height: 0.86 !important;
}
body[data-page] .page-lead,
body[data-page] .paper-authors,
body[data-page] .fs-meta {
grid-column: 1;
max-width: 720px !important;
margin: clamp(28px, 4vw, 52px) 0 0 !important;
}
body[data-page] .paper-back,
body[data-page] .paper-links {
grid-column: 1;
position: relative;
z-index: 2;
}
/* Research — instrument-panel clarity without the old demo chrome */
body[data-category="research"] .page-hero::before,
body[data-category="research"] .paper-hero::before {
background-color: var(--v3-ink) !important;
background-image:
linear-gradient(rgba(243, 239, 230, 0.09) 1px, transparent 1px),
linear-gradient(90deg, rgba(243, 239, 230, 0.09) 1px, transparent 1px) !important;
}
body[data-category="research"] .page-hero::after,
body[data-category="research"] .paper-hero::after {
color: var(--v3-lavender);
}
body[data-category="research"] :is(
.b-wrap,
.d-wrap,
.ar-wrap,
.ag-wrap,
.os-wrap,
.papers,
.paper-body
) {
width: min(100%, var(--v3-max)) !important;
max-width: none !important;
margin: 0 auto !important;
padding-right: var(--v3-page) !important;
padding-left: var(--v3-page) !important;
}
body[data-category="research"] :is(
.d-map-panel,
.ar-config,
.ar-panel,
.cmd-sandbox,
.log-wrap
) {
border: 1px solid rgba(20, 20, 20, 0.28) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
body[data-category="research"] :is(
.agp,
.repo-card,
.paper-row,
.scn-card,
.d-rule
) {
border-radius: 0 !important;
box-shadow: none !important;
transform: none !important;
}
body[data-category="research"] :is(
.agp,
.repo-card,
.paper-row,
.scn-card,
.d-rule
):hover {
background: var(--v3-lavender) !important;
transform: none !important;
}
body[data-page="benchmark"] .explainer-hero {
min-height: 92svh !important;
padding: 150px var(--v3-page) 86px !important;
background: var(--v3-ink) !important;
color: var(--v3-cream) !important;
border-bottom: 1px solid rgba(243, 239, 230, 0.2) !important;
}
body[data-page="benchmark"] .explainer-hero :is(h1, h2, h3, p, span) {
color: inherit;
}
body[data-page="benchmark"] .explainer-hero::before {
background-color: var(--v3-lavender) !important;
}
body[data-page="mission"] .m-shell {
width: min(100%, var(--v3-max));
margin: 0 auto;
padding: 140px var(--v3-page) 70px !important;
background: var(--v3-cream) !important;
}
body[data-page="mission"] .m-panel {
border: 1px solid var(--v3-rule) !important;
border-radius: 0 !important;
background: var(--v3-paper) !important;
box-shadow: none !important;
}
body[data-page="mission"] .m-title,
body[data-page="mission"] .m-lead {
color: var(--v3-ink) !important;
}
/* Operator pages — visual, field-first layouts */
body[data-category="operators"] .page-hero::before {
background-color: var(--v3-lavender) !important;
}
body[data-category="operators"] .op-plate-wrap {
width: min(calc(100% - (2 * var(--v3-page))), var(--v3-max)) !important;
margin: clamp(50px, 7vw, 100px) auto 0 !important;
border: 0 !important;
background: var(--v3-ink) !important;
aspect-ratio: 16 / 7 !important;
overflow: hidden;
}
body[data-category="operators"] .op-plate {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
filter: saturate(0.72) contrast(1.08) !important;
}
body[data-category="operators"] .v-wrap,
body[data-page="verticals"] .vh-wrap {
width: min(100%, var(--v3-max)) !important;
max-width: none !important;
margin: 0 auto !important;
}
body[data-category="operators"] .v-stat-row {
margin: 0 var(--v3-page) !important;
border-color: var(--v3-rule) !important;
}
body[data-category="operators"] .v-section {
margin: 0 !important;
padding: clamp(76px, 8vw, 124px) var(--v3-page) !important;
}
body[data-category="operators"] .v-section:nth-of-type(even) {
background: var(--v3-paper) !important;
}
body[data-category="operators"] .v-cap-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body[data-page="verticals"] .vh-wrap {
padding: clamp(70px, 8vw, 118px) var(--v3-page) !important;
}
body[data-page="verticals"] .vh-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0 !important;
border-top: 1px solid var(--v3-rule) !important;
border-left: 1px solid var(--v3-rule) !important;
}
body[data-page="verticals"] .vh-card {
min-height: 420px;
padding: clamp(28px, 4vw, 54px) !important;
border: 0 !important;
border-right: 1px solid var(--v3-rule) !important;
border-bottom: 1px solid var(--v3-rule) !important;
border-radius: 0 !important;
}
body[data-page="verticals"] .vh-card:hover {
background: var(--v3-lavender) !important;
}
/* Company/editorial — magazine rhythm */
body[data-category="company"] .page-hero::before {
background-color: var(--v3-paper) !important;
}
body[data-category="company"] :is(
.content-section,
.m-section,
.mc-section,
.principles,
.assets-section,
.br-wrap,
.press-body
) {
width: min(100%, var(--v3-max)) !important;
max-width: none !important;
margin: 0 auto !important;
}
body[data-category="company"] :is(
.content-section,
.m-section,
.mc-section
):nth-of-type(even) {
background: var(--v3-paper) !important;
}
body[data-category="company"] .m-wrap {
max-width: var(--v3-max) !important;
}
body[data-category="company"] .m-pullquote {
margin: 0 !important;
border-left: 0 !important;
background: var(--v3-lavender) !important;
}
body[data-page="brand"] .br-wrap {
padding: clamp(76px, 8vw, 120px) var(--v3-page) !important;
}
body[data-page="brand"] :is(.sw-grid, .assets-grid) {
gap: 0 !important;
border-top: 1px solid var(--v3-rule) !important;
border-left: 1px solid var(--v3-rule) !important;
}
/* Careers — warmer, more human, but still technical */
body[data-category="careers"] .page-hero,
body[data-category="careers"] .fs-head {
background: var(--v3-lavender) !important;
}
body[data-category="careers"] .page-hero::before {
background-color: var(--v3-cream) !important;
}
body[data-category="careers"] :is(
.careers-body,
.culture-wrap,
.timeline-section,
.form-wrap,
.philosophy
) {
width: min(100%, var(--v3-max)) !important;
max-width: none !important;
margin: 0 auto !important;
}
body[data-category="careers"] :is(
.careers-body,
.form-wrap,
.philosophy
) {
padding: clamp(74px, 8vw, 122px) var(--v3-page) !important;
}
body[data-category="careers"] .role-row {
min-height: 112px !important;
padding: 28px 0 !important;
border-color: var(--v3-rule) !important;
}
body[data-category="careers"] .role-row:hover {
padding-right: 0 !important;
padding-left: 0 !important;
background: var(--v3-ink) !important;
color: var(--v3-cream) !important;
}
body[data-category="careers"] .value-item,
body[data-category="careers"] .timeline-stage {
border-radius: 0 !important;
box-shadow: none !important;
}
body[data-page="apply"] .form-wrap {
max-width: 1040px !important;
}
body[data-page="apply"] :is(input, textarea, select) {
min-height: 56px;
padding: 14px 10px !important;
font-size: 17px !important;
}
/* Reference — dense information that is still easy to scan */
body[data-category="reference"] .page-hero::before,
body[data-category="reference"] .fs-head::before {
background-color: var(--v3-ink) !important;
background-image:
linear-gradient(rgba(243, 239, 230, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(243, 239, 230, 0.08) 1px, transparent 1px) !important;
}
body[data-category="reference"] .page-hero::after,
body[data-category="reference"] .fs-head::after {
color: var(--v3-lavender);
}
body[data-category="reference"] :is(
.g-wrap,
.fn-wrap,
.sm-wrap,
.prose-wrap,
.fs-wrap
) {
width: min(100%, var(--v3-max)) !important;
max-width: none !important;
margin: 0 auto !important;
}
body[data-category="reference"] :is(
.g-wrap,
.fn-wrap,
.sm-wrap,
.prose-wrap
) {
padding: clamp(70px, 8vw, 118px) var(--v3-page) !important;
}
body[data-category="reference"] :is(.g-row, .fn, .sm-item, .fs-row) {
border-color: var(--v3-rule) !important;
}
body[data-category="reference"] :is(.g-row, .fn, .sm-item, .fs-row):hover {
background: var(--v3-lavender) !important;
}
body[data-page="fact-sheet"] .fs-wrap {
padding: 0 !important;
}
/* Canonical, always-visible footer inventory */
.footer.site-footer-v3 {
padding: clamp(78px, 8vw, 120px) var(--v3-page) 28px !important;
}
.site-footer-v3 .footer-top {
grid-template-columns: minmax(180px, 0.5fr) minmax(0, 1.5fr) !important;
}
.site-footer-v3 .footer-cols {
display: grid !important;
grid-template-columns: repeat(5, minmax(110px, 1fr)) !important;
gap: clamp(22px, 3vw, 52px) !important;
}
.site-footer-v3 .footer-col {
align-content: start;
}
.site-footer-v3 .footer-col a {
width: fit-content;
}
.footer-col-count {
margin-left: 5px;
color: var(--v3-lavender);
}
@media (max-width: 1000px) {
.site-shell .nav-links-row,
.site-shell .site-contact {
display: none !important;
}
.topnav.site-shell {
min-height: 66px !important;
grid-template-columns: 1fr auto !important;
}
.site-shell .menu-toggle {
display: block !important;
}
body[data-page] .page-hero,
body[data-page] .paper-hero,
body[data-page] .fs-head {
grid-template-columns: 1fr !important;
min-height: 720px !important;
padding-top: 132px !important;
}
body[data-page] .page-hero::before,
body[data-page] .paper-hero::before,
body[data-page] .fs-head::before {
top: 66px !important;
width: 36vw !important;
opacity: 0.72 !important;
}
body[data-page] .page-title,
body[data-page] .paper-hero > .paper-title,
body[data-page] .fs-title {
max-width: 82vw !important;
}
.site-footer-v3 .footer-top {
grid-template-columns: 1fr !important;
}
.site-footer-v3 .footer-cols {
grid-template-columns: repeat(3, 1fr) !important;
row-gap: 42px !important;
}
}
@media (max-width: 660px) {
.topnav.site-shell {
padding: 0 18px !important;
}
body[data-page] .page-hero,
body[data-page] .paper-hero,
body[data-page] .fs-head {
min-height: 620px !important;
padding: 118px 20px 66px !important;
}
body[data-page] .page-hero::before,
body[data-page] .paper-hero::before,
body[data-page] .fs-head::before {
width: 42vw !important;
opacity: 0.46 !important;
}
body[data-page] .page-hero::after,
body[data-page] .paper-hero::after,
body[data-page] .fs-head::after {
right: 18px;
bottom: 32px;
font-size: 62px;
opacity: 0.45;
}
body[data-page] .page-eyebrow,
body[data-page] .paper-eyebrow {
margin-bottom: 76px !important;
}
body[data-page] .page-title,
body[data-page] .paper-hero > .paper-title,
body[data-page] .fs-title {
max-width: 100% !important;
font-size: clamp(48px, 15vw, 76px) !important;
}
body[data-category="operators"] .op-plate-wrap {
width: 100% !important;
aspect-ratio: 4 / 3 !important;
}
body[data-category="operators"] .v-cap-grid,
body[data-page="verticals"] .vh-grid {
grid-template-columns: 1fr !important;
}
body[data-page="verticals"] .vh-card {
min-height: 340px;
}
.site-footer-v3 .footer-cols {
grid-template-columns: 1fr 1fr !important;
gap: 38px 24px !important;
}
}
/* source: site-v5.css */
/* Vertex internal pages — restrained editorial pass.
This layer removes the broad auto-layout rules from v4 and restores
readable hierarchy to dense, long-form, and reference content. */
:root {
--v5-ground: #f4f0e8;
--v5-paper: #ece6dc;
--v5-ink: #151515;
--v5-muted: #625d55;
--v5-lavender: #cfc2ea;
--v5-lavender-ink: #70598f;
--v5-rule: rgba(21, 21, 21, 0.17);
--v5-page: clamp(22px, 3.4vw, 54px);
--v5-content: 1240px;
--v5-copy: 790px;
--v5-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
body[data-rebuilt="true"] {
--page-ground: var(--v5-ground);
--page-paper: var(--v5-paper);
--page-ink: var(--v5-ink);
--page-muted: var(--v5-muted);
--page-accent: var(--v5-lavender);
--page-accent-deep: var(--v5-lavender-ink);
--page-rule: var(--v5-rule);
background: var(--v5-ground) !important;
}
/* Keep the header mark geometrically identical to the landing page.
Internal pages wrap the link in an extra grid item, so both wrappers
must inherit the landing wordmark's exact inline-flex metrics. */
body[data-rebuilt="true"] .topnav-mark,
body[data-rebuilt="true"] .topnav-mark > a {
display: inline-flex;
align-items: center;
justify-self: start;
gap: 0 !important;
color: var(--v5-ink) !important;
font-family: "Monoton", var(--sans) !important;
font-size: 22px !important;
font-weight: 400 !important;
letter-spacing: 0.06em !important;
line-height: normal;
text-transform: uppercase;
}
body[data-rebuilt="true"] .topnav-mark .logo-v,
body[data-rebuilt="true"] .topnav-mark .logo-mid,
body[data-rebuilt="true"] .topnav-mark .logo-end,
body[data-rebuilt="true"] .topnav-mark .logo-x,
body[data-rebuilt="true"] .topnav-mark .logo-x-slash {
flex: 0 0 auto;
line-height: normal;
}
/* A shorter, calmer opening frame. */
body[data-rebuilt="true"] .v4-hero {
min-height: min(690px, calc(100svh - 74px));
grid-template-columns: minmax(0, 1fr) minmax(230px, 28vw);
padding: clamp(128px, 15vh, 170px) var(--v5-page) clamp(62px, 7vw, 94px);
}
body[data-rebuilt="true"] .v4-hero-copy {
align-self: center;
width: min(100%, 980px);
}
body[data-rebuilt="true"] .v4-hero-copy h1 {
max-width: 930px;
margin-top: clamp(34px, 6vh, 68px);
font-size: clamp(58px, 7.2vw, 112px);
letter-spacing: -0.058em;
line-height: 0.9;
}
body[data-rebuilt="true"] .v4-hero-copy :is(p, .lead) {
max-width: 720px;
margin-top: 30px;
color: var(--v5-muted);
font-size: clamp(17px, 1.35vw, 21px);
line-height: 1.55;
}
body[data-rebuilt="true"] .v4-hero-visual {
top: 74px;
width: 28vw;
max-width: 440px;
border-left-color: var(--v5-rule);
background-size: 68px 68px;
opacity: 0.48;
}
body[data-rebuilt="true"][data-category="research"] .v4-hero {
background: var(--v5-ink);
}
body[data-rebuilt="true"][data-category="research"] .v4-hero-copy p {
color: rgba(244, 240, 232, 0.68);
}
body[data-rebuilt="true"][data-category="operators"] .v4-hero,
body[data-rebuilt="true"][data-category="careers"] .v4-hero {
background: var(--v5-lavender);
}
/* One continuous editorial rhythm instead of alternating slabs. */
body[data-rebuilt="true"] .v4-section,
body[data-rebuilt="true"] .v4-section:nth-child(even) {
min-height: 0;
padding: clamp(64px, 7vw, 96px) var(--v5-page);
background: var(--v5-ground);
}
body[data-rebuilt="true"] .v4-section::before {
top: 28px;
left: var(--v5-page);
color: var(--v5-lavender-ink);
opacity: 0.8;
}
body[data-rebuilt="true"] .v4-section-inner {
width: min(100%, var(--v5-content));
}
body[data-rebuilt="true"] .v4-main h2 {
max-width: 930px;
margin-bottom: clamp(24px, 3.4vw, 46px);
font-size: clamp(42px, 5.3vw, 76px);
letter-spacing: -0.05em;
line-height: 0.94;
}
body[data-rebuilt="true"] .v4-main h3 {
margin-bottom: 12px;
font-size: clamp(25px, 2.4vw, 36px);
line-height: 1.08;
}
body[data-rebuilt="true"] .v4-main :is(p, li, dd, td) {
font-size: clamp(15px, 1.08vw, 17px);
line-height: 1.65;
}
body[data-rebuilt="true"] .v4-main p {
max-width: var(--v5-copy);
}
/* Undo automatic cards and nested grids. These selectors were the main
source of crowded columns and text collisions. */
body[data-rebuilt="true"] .v4-section div:has(> h3),
body[data-rebuilt="true"] .v4-section article,
body[data-rebuilt="true"] .v4-section li:has(> h3) {
padding: 0;
border: 0;
background: transparent;
transition: none;
}
body[data-rebuilt="true"] .v4-section div:has(> h3):hover,
body[data-rebuilt="true"] .v4-section article:hover,
body[data-rebuilt="true"] .v4-section li:has(> h3):hover {
background: transparent;
}
body[data-rebuilt="true"] .v4-section div:has(> h3) + div:has(> h3),
body[data-rebuilt="true"] .v4-section article + article {
margin-top: 0;
}
body[data-rebuilt="true"] .v4-section div:has(> div + div):not(:has(h2)):not(:has(form)) {
display: block;
}
/* Repeating links become calm two-column records, not billboard cards. */
body[data-rebuilt="true"] .v4-section-inner > div:has(> a + a) {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
border: 0;
}
body[data-rebuilt="true"] .v4-section-inner > div:has(> a + a) > a {
min-height: 148px;
padding: clamp(24px, 2.7vw, 36px);
border: 1px solid var(--v5-rule);
background: transparent;
transition:
background-color 420ms var(--v5-ease),
border-color 420ms var(--v5-ease);
}
body[data-rebuilt="true"] .v4-section-inner > div:has(> a + a) > a:nth-child(n + 3) {
margin-top: -1px;
}
body[data-rebuilt="true"] .v4-section-inner > div:has(> a + a) > a:nth-child(even) {
margin-left: -1px;
}
body[data-rebuilt="true"] .v4-section-inner > div:has(> a + a) > a:hover {
z-index: 1;
border-color: rgba(112, 89, 143, 0.5);
background: rgba(207, 194, 234, 0.34);
}
body[data-rebuilt="true"] .v4-section-inner > div:has(> a + a) > a img {
opacity: 0.28;
}
body[data-rebuilt="true"] .v4-section-inner > div:has(> a + a) > a:hover img {
opacity: 0.2;
transform: scale(1.015);
}
body[data-rebuilt="true"] .v4-section-inner :is(div, a) > span {
line-height: 1.35;
}
body[data-rebuilt="true"] .v4-section-inner :is(div, a) > span + span {
margin-left: 10px;
}
/* Lists use whitespace and a single rule instead of boxed rows. */
body[data-rebuilt="true"] .v4-main :is(ul, ol) {
max-width: 900px;
margin-top: 24px;
border-top-color: var(--v5-rule);
}
body[data-rebuilt="true"] .v4-main :is(ul, ol) > li {
padding: 17px 0 17px 28px;
border-bottom-color: var(--v5-rule);
}
body[data-rebuilt="true"] .v4-main ul > li::before {
top: 26px;
width: 7px;
height: 7px;
}
/* Tables are legible records with horizontal separators only. */
body[data-rebuilt="true"] .v4-main table {
margin-top: 28px;
table-layout: auto;
border-top: 1px solid var(--v5-ink);
}
body[data-rebuilt="true"] .v4-main :is(th, td) {
padding: 17px 18px;
border-right: 0;
border-bottom-color: var(--v5-rule);
}
body[data-rebuilt="true"] .v4-main tbody tr:hover {
background: rgba(207, 194, 234, 0.24);
}
body[data-rebuilt="true"] .v4-main blockquote {
margin: 36px 0;
padding: clamp(28px, 4vw, 50px);
border-left-width: 2px;
background: rgba(207, 194, 234, 0.42);
font-size: clamp(27px, 3.6vw, 48px);
}
body[data-rebuilt="true"] .v4-main pre {
margin: 28px 0;
}
/* Controls stay compact and never push neighboring copy around. */
body[data-rebuilt="true"] .v4-main button,
body[data-rebuilt="true"] .v4-main a[role="button"],
body[data-rebuilt="true"] .v4-main a[href^="mailto:"]:not(p a):not(span a) {
min-height: 46px;
margin-top: 18px;
padding: 11px 15px;
transition:
background-color 360ms var(--v5-ease),
border-color 360ms var(--v5-ease),
color 360ms var(--v5-ease);
}
body[data-rebuilt="true"] .v4-main form {
gap: 28px 24px;
}
/* Doctrine: compact filter strip, readable registry labels, and source rows. */
body[data-page="doctrine"] .v4-section:first-child .v4-section-inner > div {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
body[data-page="doctrine"] .v4-section:first-child button,
body[data-page="doctrine"] .v4-section:nth-child(3) button {
min-height: 38px;
margin: 0;
padding: 8px 11px;
border-color: var(--v5-rule);
background: transparent;
color: var(--v5-ink);
font-family: var(--mono);
font-size: 10px;
}
body[data-page="doctrine"] .v4-section:first-child button:hover,
body[data-page="doctrine"] .v4-section:nth-child(3) button:hover,
body[data-page="doctrine"] .v5-filter-bar button.is-active {
background: var(--v5-lavender);
border-color: rgba(112, 89, 143, 0.45);
}
body[data-page="doctrine"] .v4-section:first-child span {
margin: 0 3px 0 12px;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.08em;
}
body[data-page="doctrine"] .v4-section:nth-child(2),
body[data-page="doctrine"] .v4-section:nth-child(3) {
padding-top: 54px;
padding-bottom: 54px;
}
body[data-page="doctrine"] .v4-section:nth-child(3) .v4-section-inner > div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
body[data-page="doctrine"] .v4-section:nth-child(3) span {
display: inline-block;
margin: 0 12px 0 0;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.07em;
line-height: 1.5;
}
body[data-page="doctrine"] .v5-registry-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 30px;
margin-bottom: 28px;
}
body[data-page="doctrine"] .v5-registry-head > div {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
}
body[data-page="doctrine"] .v5-registry-head span {
margin: 0;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.08em;
line-height: 1.5;
}
body[data-page="doctrine"] .v5-table-scroll {
max-width: 100%;
overflow-x: auto;
}
body[data-page="doctrine"] .v5-table-scroll table {
min-width: 820px;
margin: 0;
}
body[data-page="doctrine"] .v5-table-scroll tr {
cursor: pointer;
}
body[data-page="doctrine"] .v5-table-scroll tr.is-selected {
background: rgba(207, 194, 234, 0.42);
}
body[data-page="doctrine"] .v5-rule-detail {
display: block;
max-width: 900px;
margin-top: 28px;
padding: 28px;
border-left: 2px solid var(--v5-lavender-ink);
background: rgba(207, 194, 234, 0.28);
}
body[data-page="doctrine"] .v5-rule-detail > div {
display: flex;
justify-content: space-between;
gap: 24px;
margin-bottom: 18px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.06em;
}
body[data-page="doctrine"] .v5-rule-detail p + p {
margin-top: 12px;
}
body[data-page="doctrine"] .v5-rule-detail small {
display: block;
margin-top: 18px;
color: var(--v5-lavender-ink);
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.06em;
}
body[data-page="doctrine"] .v4-section:nth-child(4) .v4-section-inner > div {
display: grid;
grid-template-columns: 210px minmax(0, 1fr);
gap: clamp(28px, 5vw, 70px);
}
body[data-page="doctrine"] .v4-section:nth-child(4) .v4-section-inner > div > div:last-child {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 30px;
}
body[data-page="doctrine"] .v4-section:nth-child(4) .v4-section-inner > div > div:last-child > div {
display: flex;
justify-content: space-between;
gap: 18px;
padding: 13px 0;
border-top: 1px solid var(--v5-rule);
}
body[data-page="doctrine"] .v4-section:nth-child(4) span {
display: block;
margin: 0;
font-size: 12px;
line-height: 1.4;
}
body[data-page="doctrine"] .v4-section:nth-child(4) small {
display: block;
margin-top: 3px;
color: var(--v5-muted);
font-family: var(--mono);
font-size: 8px;
letter-spacing: 0.04em;
line-height: 1.35;
}
/* FAQ: a single readable question-and-answer list. */
body[data-page="faq"] .v4-section-inner > div > div {
display: block;
}
body[data-page="faq"] .v4-section-inner > div > div > div {
display: grid;
grid-template-columns: minmax(210px, 0.7fr) minmax(0, 1.3fr);
gap: clamp(28px, 5vw, 72px);
padding: 28px 0;
border-top: 1px solid var(--v5-rule);
}
body[data-page="faq"] .v4-section-inner > div > div > div:last-child {
border-bottom: 1px solid var(--v5-rule);
}
body[data-page="faq"] .v4-section-inner > div > div > div > span {
display: block;
margin: 0;
color: var(--v5-muted);
font-size: 16px;
line-height: 1.6;
}
body[data-page="faq"] .v4-section-inner > div > div > div > span:first-child {
color: var(--v5-ink);
font-family: var(--serif);
font-size: clamp(22px, 2.2vw, 31px);
line-height: 1.15;
}
/* Careers: two-column role records and a composed values section. */
body[data-page="careers"] .v4-section:nth-child(2) .v4-section-inner > div > div {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body[data-page="careers"] .v4-section:nth-child(2) a {
display: grid;
min-height: 178px;
align-content: end;
justify-items: start;
padding: 28px;
border: 1px solid var(--v5-rule);
transition: background-color 380ms var(--v5-ease);
}
body[data-page="careers"] .v4-section:nth-child(2) a:nth-child(even) {
margin-left: -1px;
}
body[data-page="careers"] .v4-section:nth-child(2) a:nth-child(n + 3) {
margin-top: -1px;
}
body[data-page="careers"] .v4-section:nth-child(2) a:hover {
background: rgba(207, 194, 234, 0.38);
}
body[data-page="careers"] .v4-section:nth-child(2) a > * {
display: block;
margin: 0 0 7px;
}
body[data-page="careers"] .v4-section:nth-child(2) a > span {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
margin-top: 15px;
}
body[data-page="careers"] .v4-section:nth-child(2) a > span > span {
margin: 0;
}
body[data-page="careers"] .v4-section:nth-child(3) .v4-section-inner > div {
display: grid;
grid-template-columns: 210px minmax(0, 1fr);
gap: clamp(34px, 6vw, 86px);
}
body[data-page="careers"] .v4-section:nth-child(3) .v4-section-inner > div > div:last-child {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 40px;
}
body[data-page="careers"] .v4-section:nth-child(3) .v4-section-inner > div > div:last-child > div {
padding: 20px 0;
border-top: 1px solid var(--v5-rule);
}
body[data-page="careers"] .v4-section:nth-child(4) .v4-section-inner > div {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 30px;
padding: clamp(28px, 4vw, 50px);
border: 1px solid var(--v5-rule);
}
body[data-page="careers"] .v4-section:nth-child(4) a {
margin: 0;
}
/* Operator index: fewer, larger choices and a non-overlapping CTA. */
body[data-page="verticals"] .v4-section:first-child .v4-section-inner > div {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body[data-page="verticals"] .v4-section:first-child .v4-section-inner > div > a {
min-height: 250px;
}
body[data-page="verticals"] .v4-section:first-child .v4-section-inner > div > a > span:last-child {
z-index: 2;
display: grid;
max-width: 82%;
gap: 6px;
padding: 13px 15px;
background: rgba(244, 240, 232, 0.78);
backdrop-filter: blur(8px);
}
body[data-page="verticals"] .v4-section:first-child .v4-section-inner > div > a > span:last-child > span {
display: block;
margin: 0;
}
body[data-page="verticals"] .v4-section:nth-child(2) {
padding-top: 48px;
padding-bottom: 48px;
}
body[data-page="verticals"] .v4-section:nth-child(4) .v4-section-inner > div {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
gap: clamp(32px, 6vw, 86px);
align-items: start;
}
body[data-page="verticals"] .v4-section:nth-child(4) .v4-section-inner > div > div:last-child {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
body[data-page="verticals"] .v4-section:nth-child(4) a {
margin: 0;
}
/* Operator detail pages share a calm label/content spine. */
body[data-category="operators"]:not([data-page="verticals"]) .v4-section:nth-child(2) .v4-section-inner > section {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 1px solid var(--v5-rule);
border-left: 1px solid var(--v5-rule);
}
body[data-category="operators"]:not([data-page="verticals"]) .v4-section:nth-child(2) .v4-section-inner > section > div {
display: grid;
min-height: 178px;
align-content: end;
gap: 5px;
padding: 24px;
border-right: 1px solid var(--v5-rule);
border-bottom: 1px solid var(--v5-rule);
}
body[data-category="operators"]:not([data-page="verticals"]) .v4-section:nth-child(2) .v4-section-inner > section > div > div:first-child {
font-family: var(--serif);
font-size: clamp(31px, 3vw, 44px);
line-height: 1;
}
body[data-category="operators"]:not([data-page="verticals"]) .v4-section:nth-child(2) .v4-section-inner > section > div > div:nth-child(2) {
color: var(--v5-ink);
font-size: 15px;
font-weight: 500;
}
body[data-category="operators"]:not([data-page="verticals"]) .v4-section:nth-child(2) .v4-section-inner > section > div > div:nth-child(n + 3) {
color: var(--v5-muted);
font-size: 12px;
line-height: 1.45;
}
body[data-category="operators"]:not([data-page="verticals"]) .v4-section:nth-child(n + 3):not(:nth-last-child(-n + 2)) .v4-section-inner > section {
display: grid;
grid-template-columns: 190px minmax(0, 1fr);
gap: clamp(34px, 6vw, 86px);
}
body[data-category="operators"]:not([data-page="verticals"]) .v4-section:nth-child(n + 3):not(:nth-last-child(-n + 2)) .v4-section-inner > section > div:first-child {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.06em;
line-height: 1.5;
}
body[data-category="operators"]:not([data-page="verticals"]) .v4-section:nth-child(n + 3):not(:nth-last-child(-n + 2)) .v4-section-inner > section > div:last-child > :first-child {
margin-top: 0;
}
body[data-category="operators"]:not([data-page="verticals"]) .v4-section:nth-last-child(2) .v4-section-inner > div {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 32px;
padding: clamp(28px, 4vw, 48px);
border: 1px solid var(--v5-rule);
}
body[data-category="operators"]:not([data-page="verticals"]) .v4-section:nth-last-child(2) a {
margin: 0;
}
body[data-category="operators"]:not([data-page="verticals"]) .v4-section:last-child {
padding-top: 36px;
padding-bottom: 36px;
}
body[data-category="operators"]:not([data-page="verticals"]) .v4-section:last-child .v4-section-inner > div {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: 1px solid var(--v5-rule);
}
body[data-category="operators"]:not([data-page="verticals"]) .v4-section:last-child a {
padding: 16px 0;
border-bottom: 1px solid var(--v5-rule);
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.04em;
}
body[data-category="operators"]:not([data-page="verticals"]) .v4-section:last-child a:nth-child(2) {
text-align: center;
}
body[data-category="operators"]:not([data-page="verticals"]) .v4-section:last-child a:last-child {
text-align: right;
}
/* Dense benchmark sections stay bounded and avoid auto-columns. */
body[data-page="benchmark"] .v4-section:first-child .v4-section-inner > div {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 18px;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.04em;
}
body[data-page="benchmark"] .v4-section:first-child .v4-section-inner > div > * {
margin: 0;
}
body[data-page="benchmark"] .v4-section:nth-child(2) .v4-section-inner > section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
border-top: 1px solid var(--v5-rule);
border-left: 1px solid var(--v5-rule);
}
body[data-page="benchmark"] .v4-section:nth-child(2) .v4-section-inner > section > a {
display: grid;
min-height: 150px;
align-content: end;
gap: 5px;
padding: 24px;
border-right: 1px solid var(--v5-rule);
border-bottom: 1px solid var(--v5-rule);
}
body[data-page="benchmark"] .v4-section:nth-child(2) .v4-section-inner > section > a > div:first-child {
font-family: var(--serif);
font-size: 34px;
line-height: 1;
}
body[data-page="benchmark"] .v4-section:nth-child(2) .v4-section-inner > section > a > div:nth-child(2) {
font-size: 15px;
font-weight: 500;
}
body[data-page="benchmark"] .v4-section:nth-child(2) .v4-section-inner > section > a > div:last-child {
color: var(--v5-muted);
font-size: 13px;
line-height: 1.45;
}
body[data-page="benchmark"] .v4-section:nth-child(3) {
padding-top: 42px;
padding-bottom: 42px;
}
body[data-page="benchmark"] .v4-section:nth-child(3) .v4-section-inner {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.04em;
line-height: 1.6;
}
body[data-page="benchmark"] .v4-section > .v4-section-inner > section {
display: block;
}
body[data-page="benchmark"] .v4-section > .v4-section-inner > section > div + div {
margin-top: 30px;
}
body[data-page="benchmark"] .v4-section > .v4-section-inner > section > div:has(> div + div) {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
body[data-page="benchmark"] .v4-section:nth-child(4) .v4-section-inner > section > div:nth-child(2) {
display: none;
}
body[data-page="benchmark"] .v4-section:nth-child(4) .v4-section-inner > section > div:last-child {
display: flex;
flex-wrap: wrap;
gap: 10px 18px;
margin-top: 26px;
font-family: var(--mono);
font-size: 9px;
}
body[data-page="benchmark"] .v4-section:nth-child(n + 5):nth-child(-n + 16) .v4-section-inner > section {
display: grid;
grid-template-columns: 190px minmax(0, 1fr);
gap: clamp(34px, 6vw, 86px);
}
body[data-page="benchmark"] .v4-section:nth-child(n + 5):nth-child(-n + 16) .v4-section-inner > section > div:first-child {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.06em;
line-height: 1.5;
}
body[data-page="benchmark"] .v4-section:nth-child(6) .v4-section-inner > section > div:last-child > div > div {
display: grid;
grid-template-columns: 62px minmax(170px, 0.65fr) minmax(260px, 1.35fr) auto;
gap: 16px;
padding: 15px 0;
border-top: 1px solid var(--v5-rule);
}
body[data-page="benchmark"] .v4-section:nth-child(6) span {
display: block;
margin: 0;
font-size: 13px;
line-height: 1.45;
}
body[data-page="benchmark"] .v4-section:nth-child(6) span:first-child,
body[data-page="benchmark"] .v4-section:nth-child(6) span:last-child {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.04em;
}
body[data-page="benchmark"] .v4-section:nth-child(7) .v4-section-inner > section > div:last-child > div {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 34px;
}
body[data-page="benchmark"] .v4-section:nth-child(7) .v4-section-inner > section > div:last-child > div > div {
padding: 20px 0;
border-top: 1px solid var(--v5-rule);
}
body[data-page="benchmark"] .v4-section:nth-child(7) .v4-section-inner > section > div:last-child > div > div > div:first-child {
margin-bottom: 10px;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.05em;
}
body[data-page="benchmark"] .v4-section:nth-child(10) .v4-section-inner > section > div:last-child > div {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body[data-page="benchmark"] .v4-section:nth-child(10) .v4-section-inner > section > div:last-child > div > a {
display: grid;
min-height: 150px;
align-content: end;
gap: 7px;
padding: 24px;
border: 1px solid var(--v5-rule);
}
body[data-page="benchmark"] .v4-section:nth-child(10) .v4-section-inner > section > div:last-child > div > a + a {
margin-left: -1px;
}
body[data-page="benchmark"] .v4-section:nth-child(10) a > span {
display: block;
margin: 0;
}
body[data-page="benchmark"] #hmWrap table {
min-width: 620px;
margin: 20px 0 0;
}
body[data-page="benchmark"] #hmWrap td:not(:first-child) {
text-align: center;
font-family: var(--mono);
font-size: 11px;
}
body[data-page="benchmark"] .v4-section:nth-child(12) .v4-section-inner > section > div:last-child > div:nth-child(2) {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0 28px;
}
body[data-page="benchmark"] .v4-section:nth-child(12) .v4-section-inner > section > div:last-child > div:nth-child(2) > div {
padding: 17px 0;
border-top: 1px solid var(--v5-rule);
}
body[data-page="benchmark"] .v4-section:nth-child(12) .v4-section-inner > section > div:last-child > div:nth-child(2) span {
display: block;
margin: 0 0 5px;
}
body[data-page="benchmark"] #trShell {
display: none;
}
body[data-page="benchmark"] .v4-section:nth-child(15) .v4-section-inner > section > div:last-child > div {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0 28px;
}
body[data-page="benchmark"] .v4-section:nth-child(15) .v4-section-inner > section > div:last-child > div > div {
padding: 20px 0;
border-top: 1px solid var(--v5-rule);
}
body[data-page="benchmark"] .v4-section:nth-child(17) .v4-section-inner > div {
display: grid;
grid-template-columns: minmax(0, 1fr) repeat(3, auto);
align-items: end;
gap: 14px;
}
body[data-page="benchmark"] .v4-section:nth-child(17) a {
margin: 0;
}
/* The old mission simulator was an unconnected visual prototype. Keep its
source available, but present the page as a quiet interface study. */
#legacyMission {
display: none !important;
}
body[data-page="mission"] .v5-mission-status {
max-width: 900px;
}
body[data-page="mission"] .v5-mission-status > span,
body[data-page="mission"] .v5-mission-flow > div > span {
display: block;
margin-bottom: 22px;
color: var(--v5-lavender-ink);
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.08em;
}
body[data-page="mission"] .v5-mission-flow {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: 1px solid var(--v5-rule);
border-left: 1px solid var(--v5-rule);
}
body[data-page="mission"] .v5-mission-flow > div {
min-height: 240px;
padding: clamp(25px, 3vw, 38px);
border-right: 1px solid var(--v5-rule);
border-bottom: 1px solid var(--v5-rule);
}
body[data-page="mission"] .v5-mission-flow h3 {
font-family: var(--sans);
font-size: clamp(24px, 2.6vw, 36px);
}
/* Glossaries, agents, and field-note collections stack as records. */
body[data-page="glossary"] .v4-section-inner > div {
display: block;
}
body[data-page="glossary"] .v4-section-inner > div > div {
display: grid;
grid-template-columns: minmax(190px, 0.55fr) minmax(0, 1.45fr);
gap: clamp(28px, 5vw, 72px);
padding: 26px 0;
border-top: 1px solid var(--v5-rule);
}
body[data-page="glossary"] .v4-section-inner > div > div:last-child {
border-bottom: 1px solid var(--v5-rule);
}
body[data-page="glossary"] .v4-section-inner > div > div > span {
display: block;
min-width: 0;
margin: 0;
overflow-wrap: anywhere;
color: var(--v5-muted);
font-size: 16px;
line-height: 1.62;
}
body[data-page="glossary"] .v4-section-inner > div > div > span:first-child {
color: var(--v5-ink);
font-size: 18px;
font-weight: 500;
line-height: 1.25;
}
body[data-page="glossary"] .v4-section-inner > div > div > span:first-child > span {
display: block;
margin: 7px 0 0;
color: var(--v5-lavender-ink);
font-family: var(--mono);
font-size: 8px;
font-weight: 500;
letter-spacing: 0.08em;
}
body[data-page="agents"] .v4-section-inner > div > div {
display: block;
}
body[data-page="agents"] .v4-section-inner > div > div > div {
padding: clamp(30px, 4vw, 50px) 0;
border-top: 1px solid var(--v5-rule);
}
body[data-page="agents"] .v4-section-inner > div > div > div:last-child {
border-bottom: 1px solid var(--v5-rule);
}
body[data-page="agents"] .v4-section-inner > div > div > div > div:first-child,
body[data-page="agents"] .v4-section-inner > div > div > div > div:last-child {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 10px 20px;
}
body[data-page="agents"] .v4-section-inner > div > div > div > div:nth-child(2) {
margin-top: 20px;
font-family: var(--serif);
font-size: clamp(26px, 3vw, 42px);
line-height: 1.05;
}
body[data-page="agents"] .v4-section-inner > div > div > div > p {
margin-top: 20px;
}
body[data-page="agents"] .v4-section-inner > div > div > div > div:nth-child(4) {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0 26px;
margin-top: 24px;
}
body[data-page="agents"] .v4-section-inner > div > div > div > div:nth-child(4) > div {
padding: 14px 0;
border-top: 1px solid var(--v5-rule);
}
body[data-page="agents"] .v4-section-inner > div > div > div > div:nth-child(4) span {
display: block;
margin: 0 0 5px;
}
body[data-page="field-notes"] .v4-section-inner article {
padding: 24px 0;
border-top: 1px solid var(--v5-rule);
}
/* Arena: restore the data-driven runner with a compact, legible interface. */
body[data-page="arena"] .v4-section:nth-child(1) .v4-section-inner > div {
display: grid;
grid-template-columns: 130px minmax(0, 1fr);
gap: 24px 30px;
align-items: start;
}
body[data-page="arena"] .v4-section:nth-child(1) .v4-section-inner > div > span,
body[data-page="arena"] .v4-section:nth-child(3) .v4-section-inner > div > div > div:first-child,
body[data-page="arena"] .v4-section:nth-child(4) .v4-section-inner > div > div:first-child {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.08em;
}
body[data-page="arena"] #agentChips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
body[data-page="arena"] #scnChips {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
body[data-page="arena"] .ar-chip {
display: grid;
min-height: 42px;
margin: 0;
padding: 10px 12px;
border: 1px solid var(--v5-rule);
background: transparent;
color: var(--v5-ink);
text-align: left;
}
body[data-page="arena"] #scnChips .ar-chip {
grid-template-columns: 48px minmax(0, 1fr) auto;
gap: 10px;
}
body[data-page="arena"] .ar-chip > span {
display: block;
margin: 0;
font-size: 12px;
line-height: 1.35;
}
body[data-page="arena"] .ar-chip > span:first-child,
body[data-page="arena"] .ar-chip > span:last-child {
font-family: var(--mono);
font-size: 8px;
letter-spacing: 0.05em;
}
body[data-page="arena"] .ar-chip:hover,
body[data-page="arena"] .ar-chip.is-active {
border-color: rgba(112, 89, 143, 0.5);
background: rgba(207, 194, 234, 0.42);
}
body[data-page="arena"] .v4-section:nth-child(2) {
padding-top: 28px;
padding-bottom: 28px;
}
body[data-page="arena"] .v4-section:nth-child(2) .v4-section-inner > span {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
body[data-page="arena"] .v4-section:nth-child(2) button {
margin: 0;
}
body[data-page="arena"] .v4-section:nth-child(3) .v4-section-inner > div {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
gap: 20px;
}
body[data-page="arena"] .v4-section:nth-child(3) .v4-section-inner > div > div {
min-width: 0;
padding: 24px;
border: 1px solid var(--v5-rule);
}
body[data-page="arena"] .v4-section:nth-child(3) .v4-section-inner > div > div > div:first-child {
display: flex;
justify-content: space-between;
gap: 18px;
margin-bottom: 18px;
}
body[data-page="arena"] .v4-section:nth-child(3) button {
min-height: 26px;
margin: 0 0 0 5px;
padding: 3px 7px;
}
body[data-page="arena"] .ar-line,
body[data-page="arena"] .ar-rule {
display: grid;
grid-template-columns: 70px minmax(0, 1fr);
gap: 14px;
padding: 10px 0;
border-top: 1px solid var(--v5-rule);
font-size: 12px;
line-height: 1.5;
}
body[data-page="arena"] .ar-line > span:first-child,
body[data-page="arena"] .ar-rule > span:first-child {
color: var(--v5-lavender-ink);
font-family: var(--mono);
font-size: 8px;
letter-spacing: 0.05em;
}
body[data-page="arena"] .ar-rule {
grid-template-columns: 46px minmax(0, 1fr) auto;
}
body[data-page="arena"] .ar-rule > span {
display: block;
margin: 0;
}
body[data-page="arena"] #stamp {
margin-top: 18px;
color: var(--v5-lavender-ink);
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.08em;
}
body[data-page="arena"] .v4-section:nth-child(4) .v4-section-inner > div > div:first-child,
body[data-page="arena"] #tallies {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 10px 24px;
}
body[data-page="arena"] #tallies {
margin: 22px 0;
}
body[data-page="arena"] #tallies > span {
display: flex;
gap: 10px;
margin: 0;
}
body[data-page="arena"] #grid {
display: grid;
grid-template-columns: 116px repeat(10, minmax(38px, 1fr));
min-width: 700px;
border-top: 1px solid var(--v5-rule);
border-left: 1px solid var(--v5-rule);
}
body[data-page="arena"] #grid > * {
display: grid;
min-height: 42px;
margin: 0;
place-items: center;
border: 0;
border-right: 1px solid var(--v5-rule);
border-bottom: 1px solid var(--v5-rule);
font-family: var(--mono);
font-size: 8px;
}
body[data-page="arena"] #grid .ag-row {
justify-items: start;
padding-left: 10px;
}
body[data-page="arena"] #grid .ag-cell {
min-height: 42px;
padding: 0;
background: transparent;
color: var(--v5-muted);
}
body[data-page="arena"] #grid .c-clean {
background: rgba(207, 194, 234, 0.55);
color: var(--v5-ink);
}
body[data-page="arena"] #grid .c-safe {
background: rgba(21, 21, 21, 0.07);
}
body[data-page="arena"] .v4-section:nth-child(4) .v4-section-inner > div > div:nth-child(3) {
overflow-x: auto;
}
body[data-page="arena"] .v4-section:nth-child(4) .v4-section-inner > div > div:last-child {
margin-top: 18px;
color: var(--v5-muted);
font-family: var(--mono);
font-size: 8px;
line-height: 1.7;
}
body[data-page="arena"] .v4-section:nth-child(5) .v4-section-inner > div {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 30px;
align-items: end;
padding: clamp(28px, 4vw, 48px);
border: 1px solid var(--v5-rule);
}
body[data-page="arena"] .v4-section:nth-child(5) a {
display: block;
margin: 8px 0 0;
}
/* Application: remove the inherited four-panel hero and keep the form quiet. */
body[data-page="apply"] .v4-hero-copy > div {
display: block !important;
width: min(100%, 760px) !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
body[data-page="apply"] .v4-hero-copy > div > * {
position: static !important;
width: auto !important;
border: 0 !important;
background: transparent !important;
}
body[data-page="apply"] #roleTag {
margin-top: 18px;
color: var(--v5-muted);
font-size: 14px;
}
body[data-page="apply"] .v4-hero-copy h1 {
margin-top: 42px;
}
body[data-page="apply"] #applyForm {
display: grid;
grid-template-columns: 1fr !important;
max-width: 920px;
gap: 30px;
}
body[data-page="apply"] #applyForm > div {
display: grid;
gap: 24px;
}
body[data-page="apply"] #applyForm > div:has(> div + div) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body[data-page="apply"] #applyForm label {
display: block;
margin-bottom: 9px;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.06em;
}
body[data-page="apply"] #applyForm label span {
margin: 0;
}
body[data-page="apply"] #applyForm :is(input, textarea) {
width: 100%;
}
body[data-page="apply"] #applyForm > div:has(> button) {
display: flex;
align-items: center;
gap: 18px;
}
body[data-page="apply"] #applyForm button {
margin: 0;
}
/* Editorial articles: metadata, dividers, and body copy stay separated. */
body[data-page="manifesto"] .v4-section:nth-child(1) .v4-section-inner > div {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 26px;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.04em;
}
body[data-page="manifesto"] .v4-section:nth-child(1) span {
display: inline;
margin: 0;
}
body[data-page="manifesto"] .v4-section:nth-child(1) button {
margin: 0;
}
body[data-page="manifesto"] .v4-section-inner > section {
max-width: 920px;
}
body[data-page="manifesto"] .v4-section-inner > section > span {
display: block;
margin-bottom: 18px;
color: var(--v5-lavender-ink);
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.08em;
}
body[data-page="manifesto"] .v4-section-inner > section p + p {
margin-top: 22px;
}
body[data-page="manifesto"] .v4-section:nth-child(5),
body[data-page="manifesto"] .v4-section:nth-child(8) {
padding-top: 34px;
padding-bottom: 34px;
background: rgba(207, 194, 234, 0.3);
}
/* Research and repository indexes become bordered records. */
body[data-page="publications"] .v4-section-inner > div > div > div {
display: grid;
grid-template-columns: 70px minmax(0, 1fr);
gap: 28px;
padding: 30px 0;
border-top: 1px solid var(--v5-rule);
}
body[data-page="publications"] .v4-section-inner > div > div > div > div:first-child {
color: var(--v5-lavender-ink);
font-family: var(--mono);
font-size: 10px;
}
body[data-page="publications"] .v4-section-inner > div > div > div > div:last-child > div:first-child {
max-width: 920px;
font-family: var(--serif);
font-size: clamp(25px, 3vw, 40px);
line-height: 1.08;
}
body[data-page="publications"] .v4-section-inner > div > div > div > div:last-child > div + div,
body[data-page="publications"] .v4-section-inner > div > div > div p {
margin-top: 13px;
}
body[data-page="open-source"] .v4-section:nth-child(3) .v4-section-inner > div > div {
padding: 28px 0;
border-top: 1px solid var(--v5-rule);
}
body[data-page="open-source"] .v4-section:nth-child(3) .v4-section-inner > div > div > div {
margin-top: 10px;
}
body[data-page="open-source"] .v4-section:nth-child(3) .v4-section-inner > div > div > div:first-child,
body[data-page="open-source"] .v4-section:nth-child(3) .v4-section-inner > div > div > div:last-child {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 10px 20px;
}
body[data-page="open-source"] .v4-section:nth-child(3) span {
display: block;
margin: 0;
}
/* Brand: show the system as swatches and records instead of a text dump. */
body[data-page="brand"] .v4-section-inner > section {
display: grid;
grid-template-columns: 190px minmax(0, 1fr);
gap: clamp(30px, 6vw, 80px);
}
body[data-page="brand"] .v4-section-inner > section > div:first-child {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.06em;
}
body[data-page="brand"] .v4-section:nth-child(1) section > div:last-child {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
}
body[data-page="brand"] .v4-section:nth-child(1) section > div:last-child > div {
min-height: 205px;
padding: 134px 12px 12px;
border: 1px solid var(--v5-rule);
background-repeat: no-repeat;
background-size: 100% 120px;
}
body[data-page="brand"] .v4-section:nth-child(1) section > div:last-child > div > div:first-child {
display: none;
}
body[data-page="brand"] .v4-section:nth-child(1) section > div:last-child > div:nth-child(1) { background-image: linear-gradient(#0a0b0d, #0a0b0d); }
body[data-page="brand"] .v4-section:nth-child(1) section > div:last-child > div:nth-child(2) { background-image: linear-gradient(#101216, #101216); }
body[data-page="brand"] .v4-section:nth-child(1) section > div:last-child > div:nth-child(3) { background-image: linear-gradient(#e8e6e1, #e8e6e1); }
body[data-page="brand"] .v4-section:nth-child(1) section > div:last-child > div:nth-child(4) { background-image: linear-gradient(#8b8d92, #8b8d92); }
body[data-page="brand"] .v4-section:nth-child(1) section > div:last-child > div:nth-child(5) { background-image: linear-gradient(#b8e6b3, #b8e6b3); }
body[data-page="brand"] .v4-section:nth-child(1) section > div:last-child > div > div:last-child {
padding: 0;
}
body[data-page="brand"] .v4-section:nth-child(1) span,
body[data-page="brand"] .v4-section:nth-child(2) span,
body[data-page="brand"] .v4-section:nth-child(3) span,
body[data-page="brand"] .v4-section:nth-child(4) span {
display: block;
margin: 0 0 5px;
}
body[data-page="brand"] .v4-section:nth-child(n + 2) section > div:nth-child(n + 2) {
grid-column: 2;
padding: 20px 0;
border-top: 1px solid var(--v5-rule);
}
body[data-page="brand"] .v4-section:nth-child(2) section > div:nth-child(n + 2) {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: 24px;
}
body[data-page="brand"] .v4-section:nth-child(3) section > div:last-child > div {
display: grid;
grid-template-columns: 70px minmax(0, 1fr);
gap: 24px;
padding: 18px 0;
border-top: 1px solid var(--v5-rule);
}
body[data-page="brand"] .v4-section:nth-child(4) section > div:last-child > div {
display: flex;
justify-content: space-between;
gap: 24px;
padding: 17px 0;
border-top: 1px solid var(--v5-rule);
}
/* Fact sheet: keep the first twelve facts together as a compact reference. */
body[data-page="fact-sheet"] .v4-stream {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body[data-page="fact-sheet"] .v4-section:nth-child(-n + 12) {
padding: 0 !important;
border-right: 1px solid var(--v5-rule);
border-bottom: 1px solid var(--v5-rule);
}
body[data-page="fact-sheet"] .v4-section:nth-child(-n + 12)::before {
display: none;
}
body[data-page="fact-sheet"] .v4-section:nth-child(-n + 12) .v4-section-inner {
width: 100%;
}
body[data-page="fact-sheet"] .v4-section:nth-child(-n + 12) .v4-section-inner > div {
display: grid;
grid-template-columns: 145px minmax(0, 1fr);
gap: 24px;
padding: 24px var(--v5-page);
}
body[data-page="fact-sheet"] .v4-section:nth-child(-n + 12) .v4-section-inner > div > div:first-child {
color: var(--v5-lavender-ink);
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.05em;
}
body[data-page="fact-sheet"] .v4-section:nth-child(n + 13) {
grid-column: 1 / -1;
}
body[data-page="fact-sheet"] .v4-section:nth-child(13) .v4-section-inner > div,
body[data-page="fact-sheet"] .v4-section:nth-child(14) .v4-section-inner > div {
display: grid;
grid-template-columns: 190px minmax(0, 1fr);
gap: 40px;
}
body[data-page="fact-sheet"] .v4-section:nth-child(15) .v4-section-inner > div {
display: flex;
justify-content: space-between;
gap: 24px;
}
/* Sitemap: clear category spine with one record per destination. */
body[data-page="sitemap"] .v4-section-inner > section {
display: grid;
grid-template-columns: 170px minmax(0, 1fr);
gap: clamp(30px, 6vw, 80px);
}
body[data-page="sitemap"] .v4-section-inner > section > div:first-child {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.07em;
}
body[data-page="sitemap"] .v4-section-inner > section > div:last-child > a {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 20px;
padding: 18px 0;
border-top: 1px solid var(--v5-rule);
}
body[data-page="sitemap"] .v4-section-inner > section > div:last-child > a > div:first-child > div:first-child {
margin-bottom: 6px;
font-size: 18px;
font-weight: 500;
}
body[data-page="sitemap"] .v4-section-inner > section > div:last-child > a > div:first-child > div:last-child,
body[data-page="sitemap"] .v4-section-inner > section > div:last-child > a > div:last-child {
color: var(--v5-muted);
font-size: 13px;
line-height: 1.5;
}
/* Hiring and culture: long collections read as a single vertical timeline. */
body[data-page="hiring"] .v4-section:nth-child(1) .v4-section-inner > div {
display: grid;
grid-template-columns: 190px minmax(0, 1fr);
gap: 50px;
}
body[data-page="hiring"] #timeline > div > div:nth-child(2) {
display: none;
}
body[data-page="hiring"] #tl-track {
display: block;
}
body[data-page="hiring"] #tl-track > article {
display: grid;
grid-template-columns: 170px minmax(0, 1fr);
gap: 32px;
padding: 34px 0;
border-top: 1px solid var(--v5-rule);
}
body[data-page="hiring"] #tl-track > article > div:first-child {
color: var(--v5-lavender-ink);
font-family: var(--mono);
font-size: 10px;
}
body[data-page="hiring"] #tl-track > article > div:first-child span {
display: block;
margin: 8px 0 0;
}
body[data-page="hiring"] #tl-track > article > div:last-child > div {
margin-top: 18px;
}
body[data-page="hiring"] .v4-section:nth-child(3) .v4-section-inner > div > div:last-child {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 34px;
}
body[data-page="hiring"] .v4-section:nth-child(3) .v4-section-inner > div > div:last-child > div {
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
gap: 18px;
padding: 18px 0;
border-top: 1px solid var(--v5-rule);
}
body[data-page="culture"] .v4-section:nth-child(1) {
padding-top: 64px !important;
}
body[data-page="culture"] .v4-section:nth-child(1) .v4-section-inner > div {
max-width: 900px;
}
body[data-page="culture"] .v4-section:nth-child(2) .v4-section-inner > section,
body[data-page="culture"] .v4-section:nth-child(4) .v4-section-inner > section {
display: grid;
grid-template-columns: 180px minmax(0, 1fr);
gap: 50px;
}
body[data-page="culture"] .v4-section:nth-child(2) section > div:last-child,
body[data-page="culture"] .v4-section:nth-child(4) section > div:last-child > div:first-child {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 34px;
}
body[data-page="culture"] .v4-section:nth-child(2) section > div:last-child > div,
body[data-page="culture"] .v4-section:nth-child(4) section > div:last-child > div:first-child > div {
padding: 24px 0;
border-top: 1px solid var(--v5-rule);
}
body[data-page="culture"] details {
border-top: 1px solid var(--v5-rule);
}
body[data-page="culture"] summary {
padding: 22px 0;
}
/* About: repeat one quiet label/content spine instead of nested auto-grids. */
body[data-page="about"] .v4-section-inner > div > div {
display: grid;
grid-template-columns: 190px minmax(0, 1fr);
gap: clamp(36px, 7vw, 96px);
}
body[data-page="about"] .v4-section-inner > div > div > div:first-child {
color: var(--v5-lavender-ink);
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.06em;
}
body[data-page="about"] .v4-section-inner > div > div > div:last-child {
max-width: 830px;
}
body[data-page="about"] .v4-section-inner p + p {
margin-top: 18px;
}
/* Roadmap: make the empty interactive shell read as a status record and
separate the useful destinations into auditable, scan-friendly rows. */
body[data-page="model-card"] .v4-section-inner > div {
display: grid;
grid-template-columns: 190px minmax(0, 1fr);
gap: clamp(36px, 7vw, 96px);
}
body[data-page="model-card"] .v4-section-inner > div > div:first-child {
color: var(--v5-lavender-ink);
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.06em;
}
body[data-page="model-card"] .v4-section:nth-child(3) .v4-section-inner > div > div:last-child {
display: grid;
gap: 26px;
}
body[data-page="model-card"] #rmap {
display: none;
}
body[data-page="model-card"] #rmapTrack:empty,
body[data-page="model-card"] #rmapDetail:empty {
display: none;
}
body[data-page="model-card"] #rmap > div:last-child {
color: var(--v5-muted);
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.06em;
}
body[data-page="model-card"] .v4-section:nth-child(3) .v4-section-inner > div > div:last-child > div:last-child {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body[data-page="model-card"] .v4-section:nth-child(3) a {
display: grid;
min-height: 150px;
align-content: end;
gap: 7px;
padding: 26px;
border: 1px solid var(--v5-rule);
transition:
background-color 420ms var(--v5-ease),
border-color 420ms var(--v5-ease);
}
body[data-page="model-card"] .v4-section:nth-child(3) a:nth-child(even) {
margin-left: -1px;
}
body[data-page="model-card"] .v4-section:nth-child(3) a:nth-child(n + 3) {
margin-top: -1px;
}
body[data-page="model-card"] .v4-section:nth-child(3) a:hover {
z-index: 1;
border-color: rgba(112, 89, 143, 0.5);
background: rgba(207, 194, 234, 0.34);
}
body[data-page="model-card"] .v4-section:nth-child(3) a span {
display: block;
margin: 0;
}
body[data-page="model-card"] .v4-section:nth-child(3) a span:first-child,
body[data-page="model-card"] .v4-section:nth-child(3) a span:last-child {
color: var(--v5-lavender-ink);
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.05em;
}
body[data-page="model-card"] .v4-section:nth-child(3) a span:nth-child(2) {
font-family: var(--serif);
font-size: clamp(24px, 2.6vw, 36px);
line-height: 1.05;
}
/* Safety: a compact ledger followed by disclosure rows with a stable
four-column summary. Opening a row grows downward without lateral shift. */
body[data-page="safety"] .v4-section:nth-child(1),
body[data-page="press"] .v4-section:nth-child(1) {
padding-top: 30px !important;
padding-bottom: 30px !important;
}
body[data-page="safety"] .v4-section:nth-child(1)::before,
body[data-page="press"] .v4-section:nth-child(1)::before {
display: none;
}
body[data-page="safety"] .v4-section:nth-child(1) .v4-section-inner,
body[data-page="press"] .v4-section:nth-child(1) .v4-section-inner {
color: var(--v5-lavender-ink);
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.08em;
}
body[data-page="safety"] .v4-section:nth-child(2) .v4-section-inner > div {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body[data-page="safety"] .v4-section:nth-child(2) a {
display: grid;
min-height: 230px;
align-content: space-between;
gap: 18px;
padding: clamp(25px, 3vw, 38px);
border: 1px solid var(--v5-rule);
transition:
background-color 420ms var(--v5-ease),
border-color 420ms var(--v5-ease);
}
body[data-page="safety"] .v4-section:nth-child(2) a:nth-child(even) {
margin-left: -1px;
}
body[data-page="safety"] .v4-section:nth-child(2) a:nth-child(n + 3) {
margin-top: -1px;
}
body[data-page="safety"] .v4-section:nth-child(2) a:hover {
z-index: 1;
border-color: rgba(112, 89, 143, 0.5);
background: rgba(207, 194, 234, 0.34);
}
body[data-page="safety"] .v4-section:nth-child(2) a > span {
display: block;
margin: 0;
}
body[data-page="safety"] .v4-section:nth-child(2) a > span:first-child,
body[data-page="safety"] .v4-section:nth-child(2) a > span:nth-last-child(-n + 2) {
color: var(--v5-lavender-ink);
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.05em;
}
body[data-page="safety"] .v4-section:nth-child(2) a > span:nth-child(2) {
max-width: 520px;
font-family: var(--serif);
font-size: clamp(21px, 2.15vw, 30px);
line-height: 1.15;
}
body[data-page="safety"] .v4-section:nth-child(3) .v4-section-inner > div {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(48px, 7vw, 90px);
}
body[data-page="safety"] details {
border-top: 1px solid var(--v5-rule);
}
body[data-page="safety"] details:last-child {
border-bottom: 1px solid var(--v5-rule);
}
body[data-page="safety"] summary {
position: relative;
display: grid;
grid-template-columns: 46px minmax(170px, 0.65fr) minmax(0, 1.35fr) 24px;
gap: clamp(18px, 3vw, 42px);
align-items: start;
padding: 26px 0;
cursor: pointer;
list-style: none;
}
body[data-page="safety"] summary::-webkit-details-marker {
display: none;
}
body[data-page="safety"] summary > div:first-child {
color: var(--v5-lavender-ink);
font-family: var(--mono);
font-size: 10px;
}
body[data-page="safety"] summary > div:nth-child(2) {
font-family: var(--serif);
font-size: clamp(21px, 2vw, 29px);
line-height: 1.08;
}
body[data-page="safety"] summary > p {
margin: 0;
color: var(--v5-muted);
font-size: 15px;
line-height: 1.55;
}
body[data-page="safety"] summary > span {
margin: 0;
color: var(--v5-lavender-ink);
font-family: var(--mono);
font-size: 18px;
transition: transform 380ms var(--v5-ease);
}
body[data-page="safety"] details[open] summary > span {
transform: rotate(45deg);
}
body[data-page="safety"] details > div {
display: grid;
grid-template-columns: minmax(170px, 0.65fr) minmax(0, 1.35fr);
gap: clamp(18px, 3vw, 42px);
margin-left: calc(46px + clamp(18px, 3vw, 42px));
padding: 18px 48px 34px 0;
}
body[data-page="safety"] details > div > div:first-child,
body[data-page="safety"] .v4-section:nth-child(3) .v4-section-inner > div > div:nth-child(n + 2) > div:first-child {
color: var(--v5-lavender-ink);
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.05em;
}
body[data-page="safety"] details li + li {
margin-top: 12px;
}
body[data-page="safety"] .v4-section:nth-child(3) .v4-section-inner > div > div:nth-child(2),
body[data-page="safety"] .v4-section:nth-child(3) .v4-section-inner > div > div:nth-child(3) {
display: grid;
grid-template-columns: 190px minmax(0, 1fr);
gap: clamp(36px, 7vw, 96px);
}
body[data-page="safety"] .v4-section:nth-child(3) .v4-section-inner > div > div:last-child {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
padding: clamp(28px, 4vw, 48px);
border: 1px solid var(--v5-rule);
}
body[data-page="safety"] .v4-section:nth-child(3) .v4-section-inner > div > div:last-child a {
margin: 0;
}
/* Press: separate assets, source material, biography, and embed code into
distinct systems so the page no longer reads as one long text dump. */
body[data-page="press"] .v4-section:nth-child(2) .v4-section-inner > div {
display: grid;
grid-template-columns: 150px minmax(0, 1fr);
gap: 8px clamp(34px, 7vw, 92px);
align-items: start;
}
body[data-page="press"] .v4-section:nth-child(2) span {
grid-row: 1 / 3;
color: var(--v5-lavender-ink);
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.06em;
}
body[data-page="press"] .v4-section:nth-child(2) .v4-section-inner > div > div {
font-family: var(--serif);
font-size: clamp(27px, 3.3vw, 46px);
line-height: 1.05;
}
body[data-page="press"] .v4-section:nth-child(2) p {
margin: 10px 0 0;
}
body[data-page="press"] .v4-section:nth-child(n + 3):nth-child(-n + 6) .v4-section-inner > div {
display: grid;
grid-template-columns: 190px minmax(0, 1fr);
gap: clamp(36px, 7vw, 96px);
}
body[data-page="press"] .v4-section:nth-child(n + 3):nth-child(-n + 6) .v4-section-inner > div > div:first-child {
color: var(--v5-lavender-ink);
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.06em;
}
body[data-page="press"] .v4-section:nth-child(3) .v4-section-inner > div > div:last-child {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body[data-page="press"] .v4-section:nth-child(3) a {
display: grid;
min-height: 230px;
align-content: end;
gap: 10px;
padding: 28px;
border: 1px solid var(--v5-rule);
background: transparent;
color: var(--v5-ink);
transition:
background-color 420ms var(--v5-ease),
border-color 420ms var(--v5-ease);
}
body[data-page="press"] .v4-section:nth-child(3) a:nth-child(even) {
margin-left: -1px;
}
body[data-page="press"] .v4-section:nth-child(3) a:nth-child(n + 3) {
margin-top: -1px;
}
body[data-page="press"] .v4-section:nth-child(3) a:hover {
z-index: 1;
border-color: rgba(112, 89, 143, 0.5);
background: rgba(207, 194, 234, 0.34);
}
body[data-page="press"] .v4-section:nth-child(3) a > div:first-child,
body[data-page="press"] .v4-section:nth-child(3) a > span {
margin: 0;
color: var(--v5-lavender-ink);
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.05em;
}
body[data-page="press"] .v4-section:nth-child(3) a > div:nth-child(2) {
font-family: var(--serif);
font-size: clamp(22px, 2.35vw, 33px);
line-height: 1.08;
}
body[data-page="press"] .v4-section:nth-child(3) a p {
margin: 0;
color: var(--v5-muted);
font-size: 14px;
}
body[data-page="press"] .v4-section:nth-child(4) .v4-section-inner > div > div:last-child > p {
margin: 0 0 28px;
}
body[data-page="press"] .v4-section:nth-child(4) .v4-section-inner > div > div:last-child > div a {
display: grid;
grid-template-columns: 120px minmax(0, 1fr) auto;
gap: 24px;
align-items: baseline;
padding: 18px 0;
border-top: 1px solid var(--v5-rule);
}
body[data-page="press"] .v4-section:nth-child(4) .v4-section-inner > div > div:last-child > div a:last-child {
border-bottom: 1px solid var(--v5-rule);
}
body[data-page="press"] .v4-section:nth-child(4) a span {
display: block;
margin: 0;
}
body[data-page="press"] .v4-section:nth-child(4) a span:first-child,
body[data-page="press"] .v4-section:nth-child(4) a span:last-child {
color: var(--v5-lavender-ink);
font-family: var(--mono);
font-size: 9px;
}
body[data-page="press"] .v4-section:nth-child(5) .v4-section-inner > div > div:last-child > div:first-child {
display: grid;
grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
gap: clamp(28px, 5vw, 64px);
align-items: start;
}
body[data-page="press"] .v4-section:nth-child(5) picture {
display: block;
}
body[data-page="press"] .v4-section:nth-child(5) img {
width: 100%;
margin: -24px 0 0;
object-fit: cover;
}
body[data-page="press"] .v4-section:nth-child(5) picture + div > div:first-child {
font-family: var(--serif);
font-size: clamp(30px, 3.6vw, 50px);
line-height: 1;
}
body[data-page="press"] .v4-section:nth-child(5) picture + div > div:nth-child(2) {
margin: 8px 0 26px;
color: var(--v5-lavender-ink);
font-family: var(--mono);
font-size: 10px;
}
body[data-page="press"] .v4-section:nth-child(5) p + p {
margin-top: 16px;
}
body[data-page="press"] .v4-section:nth-child(5) .v4-section-inner > div > div:last-child > div:last-child {
margin-top: 18px;
color: var(--v5-muted);
font-family: var(--mono);
font-size: 9px;
line-height: 1.7;
}
body[data-page="press"] .v4-section:nth-child(6) pre {
max-width: 100%;
margin: 22px 0 0;
padding: 22px;
overflow-x: auto;
border: 1px solid var(--v5-rule);
background: rgba(236, 230, 220, 0.58);
white-space: pre-wrap;
}
body[data-page="press"] .v4-section:nth-child(6) #embed-copy {
margin-top: 10px;
}
body[data-page="press"] .v4-section:nth-child(7) .v4-section-inner > div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
padding: clamp(28px, 4vw, 48px);
border: 1px solid var(--v5-rule);
}
body[data-page="press"] .v4-section:nth-child(7) a {
margin: 0;
}
/* Small reference improvements that remove accidental visual weight. */
body[data-page="open-source"] .v4-section:nth-child(-n + 2) {
padding-top: 38px !important;
padding-bottom: 38px !important;
}
body[data-page="verticals"] .v4-section:nth-child(3) .v4-section-inner {
overflow-x: auto;
}
body[data-page="verticals"] .v4-section:nth-child(3) table {
min-width: 850px;
}
body[data-page="fact-sheet"] .v4-section:nth-child(-n + 12) a[href^="mailto:"] {
display: inline;
min-height: 0;
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: inherit;
text-decoration: underline;
text-decoration-color: var(--v5-lavender-ink);
text-underline-offset: 3px;
}
/* Empty section labels should not occupy an entire panel. */
body[data-page="press"] .v4-section:nth-child(1) {
padding-top: 32px;
padding-bottom: 32px;
}
@media (max-width: 900px) {
body[data-rebuilt="true"] .v4-hero {
min-height: 610px;
grid-template-columns: 1fr;
padding-top: 120px;
}
body[data-rebuilt="true"] .v4-hero-copy {
align-self: end;
max-width: 88vw;
}
body[data-rebuilt="true"] .v4-hero-visual {
top: 66px;
width: 34vw;
}
}
@media (max-width: 660px) {
body[data-rebuilt="true"] .v4-hero {
min-height: 540px;
padding: 104px 20px 48px;
}
body[data-rebuilt="true"] .v4-hero-copy {
max-width: 100%;
}
body[data-rebuilt="true"] .v4-hero-copy h1 {
margin-top: 28px;
font-size: clamp(46px, 14.5vw, 68px);
line-height: 0.92;
}
body[data-rebuilt="true"] .v4-hero-copy :is(p, .lead) {
margin-top: 22px;
font-size: 16px;
}
body[data-rebuilt="true"] .v4-hero-visual {
width: 38vw;
opacity: 0.28;
}
body[data-rebuilt="true"] .v4-section,
body[data-rebuilt="true"] .v4-section:nth-child(even) {
padding: 54px 20px;
}
body[data-rebuilt="true"] .v4-section::before {
top: 20px;
left: 20px;
}
body[data-rebuilt="true"] .v4-main h2 {
font-size: clamp(36px, 11vw, 52px);
}
body[data-rebuilt="true"] .v4-section-inner > div:has(> a + a),
body[data-page="careers"] .v4-section:nth-child(2) .v4-section-inner > div > div,
body[data-page="verticals"] .v4-section:first-child .v4-section-inner > div,
body[data-page="mission"] .v5-mission-flow,
body[data-page="agents"] .v4-section-inner > div > div > div > div:nth-child(4),
body[data-page="benchmark"] .v4-section > .v4-section-inner > section > div:has(> div + div),
body[data-page="benchmark"] .v4-section:nth-child(7) .v4-section-inner > section > div:last-child > div,
body[data-page="benchmark"] .v4-section:nth-child(10) .v4-section-inner > section > div:last-child > div,
body[data-page="benchmark"] .v4-section:nth-child(12) .v4-section-inner > section > div:last-child > div:nth-child(2),
body[data-page="benchmark"] .v4-section:nth-child(15) .v4-section-inner > section > div:last-child > div,
body[data-page="arena"] #scnChips,
body[data-page="brand"] .v4-section:nth-child(1) section > div:last-child,
body[data-page="hiring"] .v4-section:nth-child(3) .v4-section-inner > div > div:last-child,
body[data-page="culture"] .v4-section:nth-child(2) section > div:last-child,
body[data-page="culture"] .v4-section:nth-child(4) section > div:last-child > div:first-child,
body[data-page="fact-sheet"] .v4-stream {
grid-template-columns: 1fr;
}
body[data-rebuilt="true"] .v4-section-inner > div:has(> a + a) > a,
body[data-page="careers"] .v4-section:nth-child(2) a {
margin: -1px 0 0;
}
body[data-page="faq"] .v4-section-inner > div > div > div,
body[data-page="glossary"] .v4-section-inner > div > div,
body[data-page="doctrine"] .v4-section:nth-child(4) .v4-section-inner > div,
body[data-page="about"] .v4-section-inner > div > div,
body[data-page="model-card"] .v4-section-inner > div,
body[data-page="careers"] .v4-section:nth-child(3) .v4-section-inner > div,
body[data-page="careers"] .v4-section:nth-child(4) .v4-section-inner > div,
body[data-page="verticals"] .v4-section:nth-child(4) .v4-section-inner > div {
grid-template-columns: 1fr;
gap: 22px;
}
body[data-page="doctrine"] .v4-section:nth-child(4) .v4-section-inner > div > div:last-child,
body[data-page="careers"] .v4-section:nth-child(3) .v4-section-inner > div > div:last-child {
grid-template-columns: 1fr;
}
body[data-page="doctrine"] .v4-section:nth-child(3) .v4-section-inner > div {
align-items: flex-start;
flex-direction: column;
}
body[data-page="doctrine"] .v5-registry-head,
body[data-page="doctrine"] .v5-rule-detail > div {
align-items: flex-start;
flex-direction: column;
}
body[data-page="verticals"] .v4-section:first-child .v4-section-inner > div > a {
min-height: 210px;
}
body[data-page="benchmark"] .v4-section:nth-child(n + 5):nth-child(-n + 16) .v4-section-inner > section,
body[data-page="benchmark"] .v4-section:nth-child(17) .v4-section-inner > div,
body[data-category="operators"]:not([data-page="verticals"]) .v4-section:nth-child(n + 3):not(:nth-last-child(-n + 2)) .v4-section-inner > section,
body[data-category="operators"]:not([data-page="verticals"]) .v4-section:nth-last-child(2) .v4-section-inner > div,
body[data-page="arena"] .v4-section:nth-child(1) .v4-section-inner > div,
body[data-page="arena"] .v4-section:nth-child(3) .v4-section-inner > div,
body[data-page="arena"] .v4-section:nth-child(5) .v4-section-inner > div,
body[data-page="brand"] .v4-section-inner > section,
body[data-page="sitemap"] .v4-section-inner > section,
body[data-page="hiring"] .v4-section:nth-child(1) .v4-section-inner > div,
body[data-page="hiring"] #tl-track > article,
body[data-page="culture"] .v4-section:nth-child(2) .v4-section-inner > section,
body[data-page="culture"] .v4-section:nth-child(4) .v4-section-inner > section,
body[data-page="safety"] .v4-section:nth-child(3) .v4-section-inner > div > div:nth-child(2),
body[data-page="safety"] .v4-section:nth-child(3) .v4-section-inner > div > div:nth-child(3),
body[data-page="press"] .v4-section:nth-child(2) .v4-section-inner > div,
body[data-page="press"] .v4-section:nth-child(n + 3):nth-child(-n + 6) .v4-section-inner > div,
body[data-page="fact-sheet"] .v4-section:nth-child(13) .v4-section-inner > div,
body[data-page="fact-sheet"] .v4-section:nth-child(14) .v4-section-inner > div {
grid-template-columns: 1fr;
gap: 24px;
}
body[data-page="fact-sheet"] .v4-section:nth-child(n + 13) {
grid-column: auto;
}
body[data-page="fact-sheet"] .v4-section:nth-child(-n + 12) .v4-section-inner > div {
grid-template-columns: 105px minmax(0, 1fr);
padding: 22px 20px;
}
body[data-page="apply"] #applyForm > div:has(> div + div) {
grid-template-columns: 1fr;
}
body[data-page="publications"] .v4-section-inner > div > div > div {
grid-template-columns: 40px minmax(0, 1fr);
gap: 16px;
}
body[data-page="sitemap"] .v4-section-inner > section > div:last-child > a {
grid-template-columns: 1fr;
gap: 5px;
}
body[data-page="brand"] .v4-section:nth-child(n + 2) section > div:nth-child(n + 2) {
grid-column: auto;
}
body[data-page="brand"] .v4-section:nth-child(2) section > div:nth-child(n + 2) {
grid-template-columns: 1fr;
gap: 8px;
}
body[data-category="operators"]:not([data-page="verticals"]) .v4-section:nth-child(2) .v4-section-inner > section {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body[data-page="model-card"] .v4-section:nth-child(3) .v4-section-inner > div > div:last-child > div:last-child,
body[data-page="safety"] .v4-section:nth-child(2) .v4-section-inner > div,
body[data-page="press"] .v4-section:nth-child(3) .v4-section-inner > div > div:last-child,
body[data-page="press"] .v4-section:nth-child(5) .v4-section-inner > div > div:last-child > div:first-child {
grid-template-columns: 1fr;
}
body[data-page="safety"] .v4-section:nth-child(2) a:nth-child(even),
body[data-page="model-card"] .v4-section:nth-child(3) a:nth-child(even),
body[data-page="press"] .v4-section:nth-child(3) a:nth-child(even) {
margin-left: 0;
}
body[data-page="safety"] .v4-section:nth-child(2) a:nth-child(n + 2),
body[data-page="model-card"] .v4-section:nth-child(3) a:nth-child(n + 2),
body[data-page="press"] .v4-section:nth-child(3) a:nth-child(n + 2) {
margin-top: -1px;
}
body[data-page="safety"] summary {
grid-template-columns: 34px minmax(0, 1fr) 20px;
gap: 14px;
}
body[data-page="safety"] summary > p {
grid-column: 2 / -1;
padding-right: 24px;
}
body[data-page="safety"] summary > span {
grid-column: 3;
grid-row: 1;
}
body[data-page="safety"] details > div {
grid-template-columns: 1fr;
margin-left: 48px;
padding-right: 0;
}
body[data-page="safety"] .v4-section:nth-child(3) .v4-section-inner > div > div:last-child,
body[data-page="press"] .v4-section:nth-child(7) .v4-section-inner > div {
align-items: flex-start;
flex-direction: column;
}
body[data-page="press"] .v4-section:nth-child(2) span {
grid-row: auto;
}
body[data-page="press"] .v4-section:nth-child(4) .v4-section-inner > div > div:last-child > div a {
grid-template-columns: 92px minmax(0, 1fr);
gap: 12px 18px;
}
body[data-page="press"] .v4-section:nth-child(4) a span:last-child {
grid-column: 2;
}
body[data-page="benchmark"] .v4-section:nth-child(6) .v4-section-inner > section > div:last-child > div > div {
grid-template-columns: 48px minmax(0, 1fr);
}
body[data-page="benchmark"] .v4-section:nth-child(6) .v4-section-inner > section > div:last-child > div > div > span:nth-child(n + 3) {
grid-column: 2;
}
body[data-rebuilt="true"] .v4-main table {
min-width: 640px;
}
.site-footer-v3 .footer-cols {
grid-template-columns: 1fr 1fr !important;
}
}
/* source: site-v6.css */
/* Vertex internal pages — final editorial refinement.
This layer adds page-specific composition and working-state affordances
without changing the written content or the shared logo geometry. */
:root {
--v6-wash: rgba(207, 194, 234, 0.16);
--v6-wash-strong: rgba(207, 194, 234, 0.28);
--v6-focus: #70598f;
--v6-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
body[data-rebuilt="true"] .v4-main :is(h1, h2, h3) {
text-wrap: balance;
}
body[data-rebuilt="true"] .v4-main :is(p, li) {
text-wrap: pretty;
}
body[data-rebuilt="true"] .v4-section,
body[data-rebuilt="true"] .v4-section-inner,
body[data-rebuilt="true"] [id] {
scroll-margin-top: 92px;
}
/* The technical plate now echoes the landing-page instrument rather than
reading as an empty grid rectangle. */
body[data-rebuilt="true"] .v4-hero-visual {
background-image:
radial-gradient(
circle at 50% 50%,
transparent 0 19%,
rgba(20, 20, 20, 0.16) 19.2% 19.7%,
transparent 20% 35%,
rgba(20, 20, 20, 0.11) 35.2% 35.7%,
transparent 36%
),
linear-gradient(rgba(20, 20, 20, 0.09) 1px, transparent 1px),
linear-gradient(90deg, rgba(20, 20, 20, 0.09) 1px, transparent 1px);
background-size: 100% 100%, 68px 68px, 68px 68px;
opacity: 0.62;
}
body[data-rebuilt="true"][data-category="research"] .v4-hero-visual,
body[data-rebuilt="true"][data-category="operators"] .v4-hero-visual,
body[data-rebuilt="true"][data-category="reference"] .v4-hero-visual {
background-image:
radial-gradient(
circle at 50% 50%,
transparent 0 19%,
rgba(244, 240, 232, 0.22) 19.2% 19.7%,
transparent 20% 35%,
rgba(244, 240, 232, 0.13) 35.2% 35.7%,
transparent 36%
),
linear-gradient(rgba(244, 240, 232, 0.09) 1px, transparent 1px),
linear-gradient(90deg, rgba(244, 240, 232, 0.09) 1px, transparent 1px);
}
body[data-rebuilt="true"] .v4-hero-visual::before,
body[data-rebuilt="true"] .v4-hero-visual::after {
opacity: 0.7;
}
/* Calm, consistent feedback: color and rule changes, never layout jumps. */
body[data-rebuilt="true"] .v4-main :is(a, button, summary) {
transition-timing-function: var(--v6-ease);
}
body[data-rebuilt="true"] .v4-main :is(a, button, summary):focus-visible {
outline-color: var(--v6-focus);
outline-offset: 4px;
}
/* Manifesto: remove the non-functional audio ornament and make its pull
statements feel authored instead of falling into the paragraph stack. */
body[data-page="manifesto"] #mListen {
display: none !important;
}
body[data-page="manifesto"] .v4-section-inner > section > div {
max-width: 820px;
margin: 34px 0 4px;
padding: clamp(24px, 3vw, 38px);
border-left: 3px solid var(--v5-lavender-ink);
background: var(--v6-wash);
font-family: var(--serif);
font-size: clamp(22px, 2.3vw, 32px);
line-height: 1.28;
}
body[data-page="manifesto"] .v4-section:nth-child(10) .v4-section-inner > div {
display: grid;
grid-template-columns: 1fr auto;
gap: 18px;
align-items: end;
padding-top: 28px;
border-top: 1px solid var(--v5-rule);
}
/* About: a thin thesis rule gives the three compact sections a common
reading axis without turning them into cards. */
body[data-page="about"] .v4-section-inner > div > div > div:last-child {
padding-left: clamp(22px, 3vw, 38px);
border-left: 1px solid rgba(112, 89, 143, 0.42);
}
/* Privacy: policy pages work better as a stable question/answer spine than
seven oversized headings stacked above similarly sized paragraphs. */
body[data-page="privacy"] .v4-section {
padding-top: clamp(48px, 5vw, 70px);
padding-bottom: clamp(48px, 5vw, 70px);
}
body[data-page="privacy"] .v4-section-inner {
display: grid;
grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1.28fr);
gap: clamp(42px, 7vw, 104px);
align-items: start;
}
body[data-page="privacy"] .v4-section-inner > h2 {
position: sticky;
top: 112px;
margin: 0;
font-size: clamp(34px, 4vw, 56px);
}
body[data-page="privacy"] .v4-section-inner > :not(h2) {
grid-column: 2;
}
body[data-page="privacy"] .v4-section-inner > ul {
margin: 0 0 22px;
padding: 0;
list-style: none;
}
body[data-page="privacy"] .v4-section-inner > ul li {
padding: 13px 0 13px 22px;
border-top: 1px solid var(--v5-rule);
}
body[data-page="privacy"] .v4-section-inner > ul li::before {
content: "·";
float: left;
margin-left: -20px;
color: var(--v5-lavender-ink);
}
/* Field notes: metadata becomes a quiet left rail while the actual dispatch
remains a readable long-form column. */
body[data-page="field-notes"] .v4-section {
padding-top: clamp(52px, 6vw, 82px);
padding-bottom: clamp(52px, 6vw, 82px);
}
body[data-page="field-notes"] .v4-section-inner article {
display: grid;
grid-template-columns: 190px minmax(0, 1fr);
gap: 0 clamp(42px, 7vw, 100px);
padding: 34px 0 0;
}
body[data-page="field-notes"] .v4-section-inner article > div:first-child {
position: sticky;
top: 112px;
grid-column: 1;
grid-row: 1 / span 4;
display: grid;
height: max-content;
gap: 8px;
align-content: start;
color: var(--v5-lavender-ink);
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.06em;
}
body[data-page="field-notes"] .v4-section-inner article > div:first-child span {
display: block;
margin: 0;
}
body[data-page="field-notes"] .v4-section-inner article > :not(div:first-child) {
grid-column: 2;
}
body[data-page="field-notes"] .v4-section-inner article h2 {
max-width: 900px;
margin: 0 0 28px;
font-size: clamp(40px, 5vw, 70px);
}
body[data-page="field-notes"] .v4-section-inner article p + p {
margin-top: 20px;
}
/* The single publication should feel like a deliberate research record,
not an undersized list item stranded above the footer. */
body[data-page="publications"] .v4-section:first-child {
min-height: 520px;
}
body[data-page="publications"] .v4-section-inner > div > div > div {
grid-template-columns: 86px minmax(0, 1fr);
gap: clamp(28px, 5vw, 70px);
padding: clamp(34px, 5vw, 64px);
border: 1px solid var(--v5-rule);
background:
linear-gradient(135deg, var(--v6-wash) 0 26%, transparent 26% 100%);
}
body[data-page="publications"] .v4-section-inner > div > div > div > div:last-child > div:first-child {
max-width: 960px;
font-size: clamp(31px, 4vw, 54px);
}
body[data-page="publications"] .v4-section-inner a {
display: inline-flex;
min-height: 42px;
align-items: center;
margin-top: 10px;
padding: 0 18px;
border: 1px solid var(--v5-ink);
transition:
color 380ms var(--v6-ease),
background-color 380ms var(--v6-ease);
}
body[data-page="publications"] .v4-section-inner a:hover {
background: var(--v5-ink);
color: var(--v5-ground);
}
/* Open-source records gain a stable left edge and alternating paper wash;
all information stays in place on hover. */
body[data-page="open-source"] .v4-section:nth-child(3) .v4-section-inner > div > div {
margin-top: -1px;
padding: clamp(26px, 3vw, 38px);
border: 1px solid var(--v5-rule);
border-left: 3px solid rgba(112, 89, 143, 0.5);
}
body[data-page="open-source"] .v4-section:nth-child(3) .v4-section-inner > div > div:nth-child(even) {
background: rgba(236, 230, 220, 0.55);
}
body[data-page="open-source"] .v4-section:nth-child(3) .v4-section-inner > div > div > div:nth-child(2) {
font-family: var(--serif);
font-size: clamp(23px, 2.5vw, 34px);
line-height: 1.1;
}
/* FAQ, glossary, and sitemap rows receive a very light reading cursor.
Padding is present in the resting state, so hover never shifts content. */
body[data-page="faq"] .v4-section-inner > div > div > div,
body[data-page="glossary"] .v4-section-inner > div > div,
body[data-page="sitemap"] .v4-section-inner > section > div:last-child > a {
margin-right: -16px;
margin-left: -16px;
padding-right: 16px;
padding-left: 16px;
transition:
background-color 420ms var(--v6-ease),
border-color 420ms var(--v6-ease);
}
body[data-page="faq"] .v4-section-inner > div > div > div:hover,
body[data-page="glossary"] .v4-section-inner > div > div:hover,
body[data-page="sitemap"] .v4-section-inner > section > div:last-child > a:hover {
background: var(--v6-wash);
}
/* Hiring: the stage number stays visible while each substantial stage is
read, and the active stage changes by color only. */
body[data-page="hiring"] #timeline > div > div:first-child {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 18px;
align-items: end;
margin-bottom: 28px;
}
body[data-page="hiring"] #timeline > div > div:first-child > div:first-child {
grid-column: 1 / -1;
color: var(--v5-lavender-ink);
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.07em;
}
body[data-page="hiring"] #timeline > div > div:first-child > h2 {
margin: 0;
}
body[data-page="hiring"] #timeline > div > div:first-child > div:last-child {
color: var(--v5-muted);
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.08em;
}
body[data-page="hiring"] #tl-track > article {
position: relative;
grid-template-columns: 150px minmax(0, 1fr);
padding: clamp(34px, 4vw, 54px) 0 clamp(34px, 4vw, 54px) 22px;
border-left: 2px solid transparent;
transition:
border-color 420ms var(--v6-ease),
background-color 420ms var(--v6-ease);
}
body[data-page="hiring"] #tl-track > article.is-current {
border-left-color: var(--v5-lavender-ink);
background: linear-gradient(90deg, var(--v6-wash) 0, transparent 62%);
}
body[data-page="hiring"] #tl-track > article > div:first-child {
position: sticky;
top: 112px;
height: max-content;
}
body[data-page="hiring"] #tl-track > article > div:last-child > div:first-of-type {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
color: var(--v5-muted);
font-family: var(--mono);
font-size: 9px;
}
body[data-page="hiring"] #tl-track > article > div:last-child > div:nth-of-type(2) {
margin-top: 28px;
color: var(--v5-lavender-ink);
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.06em;
}
/* The most data-dense pages need stable table chrome on narrow screens. */
body[data-page="benchmark"] .v4-main table,
body[data-page="doctrine"] .v4-main table,
body[data-page="verticals"] .v4-main table {
border-collapse: separate;
border-spacing: 0;
}
body[data-page="benchmark"] .v4-main thead th,
body[data-page="doctrine"] .v4-main thead th,
body[data-page="verticals"] .v4-main thead th {
background: var(--v5-paper);
}
@media (max-width: 900px) {
body[data-rebuilt="true"] .v4-hero-visual {
opacity: 0.3;
}
}
@media (max-width: 660px) {
body[data-page="manifesto"] .v4-section:nth-child(10) .v4-section-inner > div,
body[data-page="privacy"] .v4-section-inner,
body[data-page="field-notes"] .v4-section-inner article,
body[data-page="hiring"] #timeline > div > div:first-child {
grid-template-columns: 1fr;
}
body[data-page="privacy"] .v4-section-inner > h2,
body[data-page="field-notes"] .v4-section-inner article > div:first-child,
body[data-page="hiring"] #tl-track > article > div:first-child {
position: static;
}
body[data-page="privacy"] .v4-section-inner > :not(h2),
body[data-page="field-notes"] .v4-section-inner article > :not(div:first-child) {
grid-column: 1;
}
body[data-page="privacy"] .v4-section-inner {
gap: 24px;
}
body[data-page="field-notes"] .v4-section-inner article {
gap: 24px;
}
body[data-page="field-notes"] .v4-section-inner article > div:first-child {
grid-row: auto;
grid-template-columns: repeat(3, auto);
justify-content: start;
gap: 8px 14px;
}
body[data-page="field-notes"] .v4-section-inner article h2 {
font-size: clamp(35px, 11vw, 50px);
}
body[data-page="publications"] .v4-section:first-child {
min-height: 0;
}
body[data-page="publications"] .v4-section-inner > div > div > div {
grid-template-columns: 40px minmax(0, 1fr);
gap: 16px;
padding: 24px 20px;
}
body[data-page="publications"] .v4-section-inner > div > div > div > div:last-child > div:first-child {
font-size: clamp(25px, 8vw, 36px);
}
body[data-page="hiring"] #timeline > div > div:first-child > div:first-child {
grid-column: 1;
}
body[data-page="hiring"] #tl-track > article {
grid-template-columns: 1fr;
padding-left: 16px;
}
}
/* source: site-v7.css */
/* Vertex internal pages — consolidation and spacing pass.
Colosseum is now one readable record, operators retain natural color,
and high-density company pages use consistent editorial rhythms. */
:root {
--v7-ink: #151515;
--v7-cream: #f4f0e8;
--v7-paper: #ece6dc;
--v7-lavender: #cfc2ea;
--v7-lavender-ink: #70598f;
--v7-rule: rgba(21, 21, 21, 0.17);
--v7-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
body[data-rebuilt="true"] {
overflow-x: clip;
}
body[data-rebuilt="true"] :is(#agents, #trajectories) {
scroll-margin-top: 88px;
}
body[data-rebuilt="true"] .topnav .nav-link[href*="careers"],
body[data-rebuilt="true"] .mobile-nav-primary a[href*="careers"] > span:first-child {
text-transform: none;
}
body[data-rebuilt="true"] .nav-links-row {
column-gap: clamp(24px, 3vw, 44px) !important;
}
body[data-rebuilt="true"] :is(details, summary) {
box-sizing: border-box;
}
body[data-rebuilt="true"] summary {
list-style: none;
}
body[data-rebuilt="true"] summary::-webkit-details-marker {
display: none;
}
body[data-page="press"] .press-legacy-embed {
display: none !important;
}
/* Colosseum ------------------------------------------------------------- */
body[data-page="benchmark"] .trajectory-primer {
background: var(--v7-ink);
color: var(--v7-cream);
}
body[data-page="benchmark"] .trajectory-primer .v4-section-inner > section {
display: grid !important;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
gap: clamp(50px, 8vw, 120px) !important;
align-items: end;
}
body[data-page="benchmark"] .trajectory-primer .v4-section-inner > section > div {
margin: 0 !important;
}
body[data-page="benchmark"] .trajectory-primer h2 {
max-width: 620px;
margin: 24px 0 20px;
font-size: clamp(42px, 5.2vw, 76px);
line-height: 0.98;
}
body[data-page="benchmark"] .trajectory-primer p {
max-width: 620px;
color: rgba(244, 240, 232, 0.69);
}
body[data-page="benchmark"] .trajectory-primer-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
border-top: 1px solid rgba(244, 240, 232, 0.25);
}
body[data-page="benchmark"] .trajectory-primer-grid > div {
display: grid;
grid-template-columns: 46px minmax(130px, 0.6fr) minmax(0, 1.4fr);
gap: 18px;
align-items: baseline;
padding: 23px 0;
border-bottom: 1px solid rgba(244, 240, 232, 0.25);
}
body[data-page="benchmark"] .trajectory-primer-grid :is(span, strong) {
color: var(--v7-lavender);
font-family: var(--mono);
font-size: 9px;
font-style: normal;
font-weight: 500;
letter-spacing: 0.07em;
}
body[data-page="benchmark"] .trajectory-primer-grid p {
margin: 0;
color: rgba(244, 240, 232, 0.78);
font-size: 14px;
line-height: 1.55;
}
body[data-page="benchmark"] .agent-fingerprints .v4-section-inner > section,
body[data-page="benchmark"] .trajectory-library .v4-section-inner > section {
display: grid !important;
grid-template-columns: 190px minmax(0, 1fr) !important;
gap: clamp(38px, 6vw, 88px) !important;
}
body[data-page="benchmark"] .agent-fingerprints .v4-section-inner > section > div,
body[data-page="benchmark"] .trajectory-library .v4-section-inner > section > div {
margin-top: 0 !important;
}
body[data-page="benchmark"] .trajectory-library .v4-section-inner > section > div:last-child {
display: block !important;
}
body[data-page="benchmark"] .agent-list,
body[data-page="benchmark"] .trajectory-list {
display: block !important;
margin-top: 38px !important;
border-top: 1px solid var(--v7-rule);
}
body[data-page="benchmark"] .agent-list details,
body[data-page="benchmark"] .trajectory-list details {
display: block;
border-bottom: 1px solid var(--v7-rule);
transition: background-color 500ms var(--v7-ease), color 500ms var(--v7-ease);
}
body[data-page="benchmark"] .agent-list details[open],
body[data-page="benchmark"] .trajectory-list details[open] {
background: rgba(207, 194, 234, 0.34);
}
body[data-page="benchmark"] .agent-list summary {
display: grid;
grid-template-columns: minmax(190px, 1.1fr) minmax(190px, 0.9fr) 80px 26px;
gap: 20px;
align-items: center;
min-height: 84px;
padding: 20px 22px;
cursor: pointer;
transition: background-color 500ms var(--v7-ease);
}
body[data-page="benchmark"] .agent-list details:not([open]) summary:hover,
body[data-page="benchmark"] .trajectory-list details:not([open]) summary:hover {
background: rgba(207, 194, 234, 0.2);
}
body[data-page="benchmark"] .agent-list summary > span:first-child,
body[data-page="benchmark"] .trajectory-list summary > span:nth-child(2) {
font-family: var(--serif);
font-size: clamp(21px, 2vw, 28px);
line-height: 1.05;
}
body[data-page="benchmark"] .agent-list summary > span:nth-child(2),
body[data-page="benchmark"] .trajectory-list summary > :is(span:first-child, span:nth-child(3), span:nth-child(4)) {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.06em;
}
body[data-page="benchmark"] .agent-list summary strong {
font-family: var(--serif);
font-size: 22px;
font-weight: 400;
text-align: right;
}
body[data-page="benchmark"] .agent-list summary i,
body[data-page="benchmark"] .trajectory-list summary i,
body[data-page="culture"] .week-day summary > span:last-child {
font-family: var(--sans);
font-size: 21px;
font-style: normal;
font-weight: 300;
text-align: center;
transition: transform 500ms var(--v7-ease);
}
body[data-page="benchmark"] .agent-list details[open] summary i,
body[data-page="benchmark"] .trajectory-list details[open] summary i,
body[data-page="culture"] .week-day[open] summary > span:last-child {
transform: rotate(45deg);
}
body[data-page="benchmark"] .agent-detail {
display: grid;
grid-template-columns: minmax(210px, 0.8fr) minmax(0, 1.2fr);
gap: 28px 54px;
padding: 10px 70px 42px 22px;
}
body[data-page="benchmark"] .agent-detail h3 {
margin: 0;
font-size: clamp(26px, 3vw, 39px);
line-height: 1.08;
}
body[data-page="benchmark"] .agent-detail p {
margin: 0;
color: var(--v5-muted);
}
body[data-page="benchmark"] .agent-detail > div {
grid-column: 1 / -1;
display: flex !important;
flex-wrap: wrap;
gap: 8px !important;
}
body[data-page="benchmark"] .agent-detail > div span {
margin: 0;
padding: 7px 9px;
border: 1px solid rgba(21, 21, 21, 0.22);
font-family: var(--mono);
font-size: 8px;
letter-spacing: 0.04em;
}
body[data-page="benchmark"] .trajectory-library {
background: rgba(207, 194, 234, 0.19);
}
body[data-page="benchmark"] .trajectory-head {
display: block !important;
}
body[data-page="benchmark"] .trajectory-head > div > span,
body[data-page="benchmark"] .trajectory-body > div:first-child > span {
color: var(--v7-lavender-ink);
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.07em;
}
body[data-page="benchmark"] .trajectory-head h2 {
max-width: 820px;
margin: 22px 0 0;
font-size: clamp(43px, 5vw, 68px);
line-height: 0.95;
}
body[data-page="benchmark"] .trajectory-head p {
max-width: 690px;
margin: 30px 0 0;
color: var(--v5-muted);
}
body[data-page="benchmark"] .trajectory-list summary {
display: grid;
grid-template-columns: 42px minmax(220px, 1fr) 112px 112px 26px;
gap: 20px;
align-items: center;
min-height: 86px;
padding: 20px 22px;
cursor: pointer;
}
body[data-page="benchmark"] .trajectory-list summary > span:nth-child(4) {
color: var(--v7-lavender-ink);
text-align: right;
}
body[data-page="benchmark"] .trajectory-body {
padding: 6px 70px 42px 84px;
}
body[data-page="benchmark"] .trajectory-body > div:first-child {
display: flex !important;
flex-wrap: wrap;
justify-content: space-between;
gap: 12px 24px !important;
padding: 15px 0;
border-top: 1px solid rgba(21, 21, 21, 0.18);
border-bottom: 1px solid rgba(21, 21, 21, 0.18);
}
body[data-page="benchmark"] .trajectory-body > div:first-child strong {
font-family: var(--mono);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.04em;
}
body[data-page="benchmark"] .trajectory-body p {
max-width: 690px;
margin: 24px 0;
color: var(--v5-muted);
}
body[data-page="benchmark"] .trajectory-schema {
display: grid !important;
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
gap: 1px !important;
background: rgba(21, 21, 21, 0.17);
border: 1px solid rgba(21, 21, 21, 0.17);
}
body[data-page="benchmark"] .trajectory-schema span {
min-width: 0;
margin: 0;
padding: 14px 8px;
background: var(--v7-cream);
font-family: var(--mono);
font-size: 8px;
letter-spacing: 0.04em;
text-align: center;
}
body[data-page="benchmark"] .colosseum-cta {
padding-top: clamp(86px, 9vw, 132px) !important;
padding-bottom: clamp(86px, 9vw, 132px) !important;
background: var(--v7-ink);
color: var(--v7-cream);
}
body[data-page="benchmark"] .colosseum-cta .v4-section-inner > div {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 12px !important;
align-items: stretch !important;
}
body[data-page="benchmark"] .colosseum-cta .v4-section-inner > div > div {
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 0.72fr);
gap: 50px;
align-items: end;
margin-bottom: 34px;
}
body[data-page="benchmark"] .colosseum-cta h3 {
max-width: 800px;
margin: 0;
color: var(--v7-cream) !important;
font-family: var(--serif);
font-size: clamp(42px, 5.2vw, 72px);
font-weight: 400;
letter-spacing: -0.04em;
line-height: 0.98;
}
body[data-page="benchmark"] .colosseum-cta p {
margin: 0;
color: rgba(244, 240, 232, 0.66);
}
body[data-page="benchmark"] .colosseum-cta .v4-section-inner > div > a {
position: relative;
display: flex !important;
min-height: 190px;
flex-direction: column;
justify-content: space-between;
margin: 0 !important;
padding: 24px !important;
overflow: hidden;
border: 1px solid rgba(244, 240, 232, 0.24) !important;
background: transparent !important;
color: var(--v7-cream) !important;
isolation: isolate;
transition: color 500ms var(--v7-ease), border-color 500ms var(--v7-ease) !important;
}
body[data-page="benchmark"] .colosseum-cta .v4-section-inner > div > a::before {
position: absolute;
inset: auto 0 0;
z-index: -1;
height: 0;
background: var(--v7-lavender);
content: "";
transition: height 600ms var(--v7-ease);
}
body[data-page="benchmark"] .colosseum-cta .v4-section-inner > div > a:hover {
border-color: var(--v7-lavender) !important;
color: var(--v7-ink) !important;
}
body[data-page="benchmark"] .colosseum-cta .v4-section-inner > div > a:hover::before {
height: 100%;
}
body[data-page="benchmark"] .colosseum-cta a > span:first-child {
color: var(--v7-lavender);
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.07em;
transition: color 500ms var(--v7-ease);
}
body[data-page="benchmark"] .colosseum-cta a:hover > span:first-child {
color: var(--v7-lavender-ink);
}
body[data-page="benchmark"] .colosseum-cta a > span:last-child {
display: flex;
align-items: end;
justify-content: space-between;
gap: 20px;
margin: 0;
font-family: var(--serif);
font-size: clamp(26px, 2.5vw, 38px);
line-height: 1;
}
body[data-page="benchmark"] .colosseum-cta a > span:last-child > span {
margin: 0;
}
body[data-page="benchmark"] .colosseum-cta a > span:last-child > span:last-child {
font-family: var(--sans);
font-size: 22px;
transition: transform 500ms var(--v7-ease);
}
body[data-page="benchmark"] .colosseum-cta a:hover > span:last-child > span:last-child {
transform: translate(4px, -4px);
}
body[data-page="benchmark"] .colosseum-cta a[data-action="trajectories"]:hover > span:last-child > span:last-child {
transform: translateY(5px);
}
/* Operator index and detail pages -------------------------------------- */
body[data-page="verticals"] .v4-section:first-child .v4-section-inner > div {
gap: 12px;
}
body[data-page="verticals"] .v4-section:first-child .v4-section-inner > div > a {
min-height: clamp(300px, 34vw, 470px);
border: 0;
background: var(--v7-ink);
}
body[data-page="verticals"] .v4-section:first-child .v4-section-inner > div > a img {
margin: 0;
opacity: 0.86 !important;
filter: saturate(0.94) contrast(1.02) !important;
transform: scale(1.002);
transition: opacity 600ms var(--v7-ease), filter 600ms var(--v7-ease), transform 900ms var(--v7-ease);
}
body[data-page="verticals"] .v4-section:first-child .v4-section-inner > div > a:hover img {
opacity: 1 !important;
filter: saturate(1.08) contrast(1.02) !important;
transform: scale(1.025);
}
body[data-page="verticals"] .v4-section:first-child .v4-section-inner > div > a > span:nth-of-type(1) {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, transparent 28%, rgba(21, 21, 21, 0.6) 100%);
}
body[data-page="verticals"] .v4-section:first-child .v4-section-inner > div > a > span:last-child {
max-width: calc(100% - 32px);
padding: 15px 17px;
background: rgba(244, 240, 232, 0.91);
backdrop-filter: blur(12px);
transition: background-color 500ms var(--v7-ease), transform 600ms var(--v7-ease);
}
body[data-page="verticals"] .v4-section:first-child .v4-section-inner > div > a:hover > span:last-child {
background: var(--v7-lavender);
transform: translateY(-5px);
}
body[data-page="verticals"] .v4-section:nth-child(3) table {
width: 100%;
min-width: 1000px;
table-layout: fixed;
}
body[data-page="verticals"] .v4-section:nth-child(3) :is(th, td) {
width: 20%;
padding: 22px 20px;
vertical-align: top;
}
body[data-page="verticals"] .v4-section:nth-child(3) thead th:first-child {
color: var(--v7-lavender-ink);
}
body[data-page="verticals"] .v4-section:nth-child(3) tbody th {
background: rgba(207, 194, 234, 0.16);
font-family: var(--mono);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.05em;
text-align: left;
}
body[data-category="operators"]:not([data-page="verticals"]) .v4-section:nth-child(n + 3):not(:nth-last-child(-n + 2)) {
padding-top: clamp(84px, 8vw, 120px) !important;
padding-bottom: clamp(84px, 8vw, 120px) !important;
}
body[data-category="operators"]:not([data-page="verticals"]) .v4-section:nth-child(n + 3):not(:nth-last-child(-n + 2)) .v4-section-inner > section {
grid-template-columns: 190px minmax(0, 1fr);
gap: clamp(54px, 8vw, 118px);
}
body[data-category="operators"]:not([data-page="verticals"]) .v4-section:nth-child(n + 3):not(:nth-last-child(-n + 2)) .v4-section-inner > section > div:last-child {
max-width: 880px;
}
body[data-category="operators"]:not([data-page="verticals"]) .v4-section:nth-child(n + 3):not(:nth-last-child(-n + 2)) .v4-section-inner > section > div:last-child > * + * {
margin-top: 25px;
}
body[data-category="operators"]:not([data-page="verticals"]) .v4-section:nth-child(n + 3):not(:nth-last-child(-n + 2)) .v4-section-inner > section > div:last-child > div {
margin-top: 38px;
}
body[data-category="operators"]:not([data-page="verticals"]) .v4-section p:has(> button + a) {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px 30px;
margin-top: 38px !important;
}
body[data-category="operators"]:not([data-page="verticals"]) .v4-section p:has(> button + a) > * {
margin: 0 !important;
}
body[data-category="operators"]:not([data-page="verticals"]) .v4-section p:has(> button + a) > a {
text-decoration-line: underline;
text-decoration-color: transparent;
text-decoration-thickness: 1px;
text-underline-offset: 5px;
transition: text-decoration-color 450ms var(--v7-ease);
}
body[data-category="operators"]:not([data-page="verticals"]) .v4-section p:has(> button + a) > a:hover {
text-decoration-color: currentColor;
}
/* About --------------------------------------------------------------- */
body[data-page="about"] .v4-section {
padding-top: clamp(86px, 8vw, 118px) !important;
padding-bottom: clamp(86px, 8vw, 118px) !important;
}
body[data-page="about"] .v4-section-inner > div > div {
gap: clamp(58px, 9vw, 128px);
}
body[data-page="about"] .v4-section-inner > div > div > div:last-child {
padding-top: 8px;
padding-left: clamp(28px, 3.4vw, 46px);
}
body[data-page="about"] .v4-section-inner p + p {
margin-top: 25px;
}
/* Brand --------------------------------------------------------------- */
body[data-page="brand"] .brand-mark-section {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
body[data-page="brand"] .brand-mark-specimen {
min-height: clamp(430px, 50vw, 680px);
padding: clamp(30px, 4vw, 56px);
background: var(--v7-ink);
color: var(--v7-cream);
}
body[data-page="brand"] .brand-mark-specimen > div:first-child {
display: flex;
justify-content: space-between;
gap: 24px;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.07em;
}
body[data-page="brand"] .brand-wordmark {
display: flex;
min-height: 300px;
align-items: center;
justify-content: center;
color: var(--v7-lavender);
font-family: "Monoton", var(--sans);
font-size: clamp(64px, 13vw, 190px);
letter-spacing: 0.06em;
line-height: 0.9;
}
body[data-page="brand"] .brand-mark-specimen p {
max-width: 620px;
margin: 0 0 0 auto;
color: rgba(244, 240, 232, 0.7);
}
body[data-page="brand"] :is(.brand-palette-section, .brand-type-section, .brand-rules-section, .brand-assets-section) .v4-section-inner > section {
display: grid;
grid-template-columns: 190px minmax(0, 1fr);
gap: clamp(54px, 8vw, 116px);
}
body[data-page="brand"] :is(.brand-palette-section, .brand-type-section, .brand-rules-section, .brand-assets-section) .v4-section-inner > section > div {
grid-column: auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
body[data-page="brand"] .brand-palette {
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
gap: 1px !important;
background: var(--v7-rule);
border: 1px solid var(--v7-rule);
}
body[data-page="brand"] .brand-palette > div {
display: flex;
min-height: 310px;
flex-direction: column;
justify-content: flex-end;
padding: 18px;
}
body[data-page="brand"] .brand-palette [data-swatch="ink"] {
background: #141414;
color: #f3efe6;
}
body[data-page="brand"] .brand-palette [data-swatch="cream"] {
background: #f3efe6;
}
body[data-page="brand"] .brand-palette [data-swatch="cream-deep"] {
background: #e7e0d4;
}
body[data-page="brand"] .brand-palette [data-swatch="lavender"] {
background: #c8b7e8;
}
body[data-page="brand"] .brand-palette [data-swatch="lavender-dark"] {
background: #5b477a;
color: #f3efe6;
}
body[data-page="brand"] .brand-palette :is(span, strong, small) {
display: block;
margin: 0;
}
body[data-page="brand"] .brand-palette span,
body[data-page="brand"] .brand-palette small {
font-family: var(--mono);
font-size: 8px;
letter-spacing: 0.05em;
}
body[data-page="brand"] .brand-palette strong {
margin: 8px 0 3px;
font-size: 15px;
font-weight: 500;
}
body[data-page="brand"] .brand-type {
border-top: 1px solid var(--v7-rule);
}
body[data-page="brand"] .brand-type > div {
display: grid !important;
grid-template-columns: 210px minmax(0, 1fr) !important;
gap: 34px !important;
align-items: baseline;
padding: 30px 0 !important;
border-bottom: 1px solid var(--v7-rule) !important;
}
body[data-page="brand"] .brand-type span {
font-family: var(--mono);
font-size: 8px;
letter-spacing: 0.05em;
}
body[data-page="brand"] .brand-type p {
margin: 0;
font-size: clamp(24px, 3vw, 44px);
line-height: 1.08;
}
body[data-page="brand"] .brand-type > div:nth-child(2) p {
font-family: var(--serif);
}
body[data-page="brand"] .brand-type > div:nth-child(3) p {
font-family: var(--mono);
font-size: clamp(13px, 1.4vw, 18px);
line-height: 1.5;
}
body[data-page="brand"] .brand-type > div:nth-child(4) p {
font-family: "Monoton", var(--sans);
letter-spacing: 0.06em;
}
body[data-page="brand"] .brand-rules {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 1px !important;
background: var(--v7-rule);
border: 1px solid var(--v7-rule);
}
body[data-page="brand"] .brand-rules > div {
min-height: 250px;
padding: 28px !important;
background: var(--v7-cream);
}
body[data-page="brand"] .brand-rules > div:nth-child(2) {
background: var(--v7-lavender);
}
body[data-page="brand"] .brand-rules :is(span, strong, p) {
display: block;
margin: 0;
}
body[data-page="brand"] .brand-rules span {
color: var(--v7-lavender-ink);
font-family: var(--mono);
font-size: 9px;
}
body[data-page="brand"] .brand-rules strong {
max-width: 380px;
margin: 68px 0 18px;
font-family: var(--serif);
font-size: clamp(26px, 2.6vw, 38px);
font-weight: 400;
line-height: 1.06;
}
body[data-page="brand"] .brand-rules p {
color: var(--v5-muted);
}
body[data-page="brand"] .brand-assets {
border-top: 1px solid var(--v7-rule);
}
body[data-page="brand"] .brand-assets > a {
display: grid;
grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
gap: 24px;
align-items: center;
min-height: 92px;
padding: 20px 0;
border-bottom: 1px solid var(--v7-rule);
transition: padding 500ms var(--v7-ease), background-color 500ms var(--v7-ease);
}
body[data-page="brand"] .brand-assets > a:hover {
padding-right: 18px;
padding-left: 18px;
background: rgba(207, 194, 234, 0.34);
}
body[data-page="brand"] .brand-assets :is(span, strong, i) {
margin: 0;
font-style: normal;
}
body[data-page="brand"] .brand-assets span {
font-family: var(--serif);
font-size: 24px;
}
body[data-page="brand"] .brand-assets strong,
body[data-page="brand"] .brand-assets i {
font-family: var(--mono);
font-size: 8px;
font-weight: 500;
letter-spacing: 0.05em;
}
/* Careers ------------------------------------------------------------- */
body[data-page="careers"] .careers-roles {
padding-top: clamp(78px, 8vw, 116px) !important;
padding-bottom: clamp(78px, 8vw, 116px) !important;
}
body[data-page="careers"] .careers-roles .roles-head {
display: flex !important;
justify-content: space-between;
gap: 24px;
padding-bottom: 18px;
border-bottom: 1px solid var(--v7-ink);
color: var(--v7-lavender-ink);
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.06em;
}
body[data-page="careers"] .careers-roles .roles-head + div {
display: block !important;
}
body[data-page="careers"] .careers-roles .roles-head + div > a {
display: grid !important;
grid-template-columns: 142px minmax(300px, 1fr) 190px 28px;
gap: 24px;
align-items: center;
min-height: 132px;
margin: 0 !important;
padding: 24px 0 !important;
border: 0 !important;
border-bottom: 1px solid var(--v7-rule) !important;
transition: padding 500ms var(--v7-ease), background-color 500ms var(--v7-ease) !important;
}
body[data-page="careers"] .careers-roles .roles-head + div > a:hover {
padding-right: 22px !important;
padding-left: 22px !important;
background: rgba(207, 194, 234, 0.34);
}
body[data-page="careers"] .careers-roles .roles-head + div > a > * {
display: block;
margin: 0 !important;
}
body[data-page="careers"] .careers-roles .roles-head + div > a > span:first-child {
color: var(--v7-lavender-ink);
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.05em;
}
body[data-page="careers"] .careers-roles .roles-head + div > a > span:nth-child(2) {
font-family: var(--serif);
font-size: clamp(25px, 2.8vw, 40px);
line-height: 1.02;
}
body[data-page="careers"] .careers-roles .roles-head + div > a > div {
display: flex;
flex-direction: column;
gap: 5px;
color: var(--v5-muted);
font-family: var(--mono);
font-size: 8px;
letter-spacing: 0.04em;
}
body[data-page="careers"] .careers-roles .roles-head + div > a > span:last-child {
justify-self: end;
font-size: 22px;
transition: transform 500ms var(--v7-ease);
}
body[data-page="careers"] .careers-roles .roles-head + div > a:hover > span:last-child {
transform: translate(5px, -5px);
}
/* Culture ------------------------------------------------------------- */
body[data-page="culture"] .culture-week .v4-section-inner > section {
display: grid !important;
grid-template-columns: 180px minmax(0, 1fr) !important;
gap: clamp(50px, 8vw, 112px) !important;
}
body[data-page="culture"] .week-list {
display: block !important;
border-top: 1px solid var(--v7-ink);
}
body[data-page="culture"] .week-day {
border: 0;
border-bottom: 1px solid var(--v7-rule);
transition: background-color 500ms var(--v7-ease);
}
body[data-page="culture"] .week-day[open] {
background: rgba(207, 194, 234, 0.28);
}
body[data-page="culture"] .week-day.week-off[open] {
background: rgba(231, 224, 212, 0.82);
}
body[data-page="culture"] .week-day summary {
display: grid;
grid-template-columns: 84px minmax(0, 1fr) 28px;
gap: 26px;
align-items: start;
padding: 29px 24px;
cursor: pointer;
transition: padding 500ms var(--v7-ease), background-color 500ms var(--v7-ease);
}
body[data-page="culture"] .week-day:not([open]) summary:hover {
padding-right: 34px;
padding-left: 34px;
background: rgba(207, 194, 234, 0.17);
}
body[data-page="culture"] .week-day summary > div:first-child {
color: var(--v7-lavender-ink);
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.05em;
}
body[data-page="culture"] .week-day summary > div:nth-child(2) {
font-family: var(--serif);
font-size: clamp(25px, 2.8vw, 39px);
line-height: 1;
}
body[data-page="culture"] .week-day summary > div:nth-child(2) > span {
display: block;
max-width: 720px;
margin-top: 10px;
color: var(--v5-muted);
font-family: var(--sans);
font-size: 14px;
line-height: 1.55;
}
body[data-page="culture"] .week-day > div {
padding: 0 60px 38px 134px;
}
body[data-page="culture"] .week-day > div ul {
max-width: 720px;
margin: 0;
padding: 0;
list-style: none;
}
body[data-page="culture"] .week-day > div li {
padding: 13px 0;
border-top: 1px solid rgba(21, 21, 21, 0.14);
border-bottom: 0;
}
body[data-page="culture"] .week-day > div li::before {
display: none;
}
body[data-page="culture"] .week-day > div li:first-child {
border-top-color: rgba(21, 21, 21, 0.34);
}
body[data-page="culture"] .week-field summary > div:nth-child(2) > span {
margin-top: 0;
}
body[data-page="culture"] .week-field summary > div:nth-child(2) > div {
margin-top: 10px;
font-family: var(--serif);
}
body[data-page="culture"] .week-field summary > div:nth-child(2) > p {
max-width: 720px;
margin: 12px 0 0;
color: var(--v5-muted);
font-family: var(--sans);
font-size: 14px;
line-height: 1.55;
}
@media (max-width: 900px) {
body[data-page="benchmark"] .trajectory-primer .v4-section-inner > section,
body[data-page="benchmark"] .agent-fingerprints .v4-section-inner > section,
body[data-page="benchmark"] .trajectory-library .v4-section-inner > section,
body[data-page="benchmark"] .colosseum-cta .v4-section-inner > div > div,
body[data-page="brand"] :is(.brand-palette-section, .brand-type-section, .brand-rules-section, .brand-assets-section) .v4-section-inner > section,
body[data-page="culture"] .culture-week .v4-section-inner > section {
grid-template-columns: 1fr !important;
gap: 34px !important;
}
body[data-page="benchmark"] .agent-list summary {
grid-template-columns: minmax(0, 1fr) 70px 24px;
gap: 12px;
}
body[data-page="benchmark"] .agent-list summary > span:nth-child(2) {
grid-column: 1 / -1;
grid-row: 2;
}
body[data-page="benchmark"] .agent-list summary strong {
grid-column: 2;
grid-row: 1;
}
body[data-page="benchmark"] .agent-list summary i {
grid-column: 3;
grid-row: 1;
}
body[data-page="benchmark"] .agent-detail {
grid-template-columns: 1fr;
padding: 8px 22px 34px;
}
body[data-page="benchmark"] .agent-detail > div {
grid-column: auto;
}
body[data-page="benchmark"] .trajectory-head {
grid-template-columns: 1fr !important;
}
body[data-page="benchmark"] .trajectory-list summary {
grid-template-columns: 34px minmax(0, 1fr) 24px;
gap: 12px;
}
body[data-page="benchmark"] .trajectory-list summary > span:nth-child(3) {
grid-column: 2;
grid-row: 2;
}
body[data-page="benchmark"] .trajectory-list summary > span:nth-child(4) {
grid-column: 2;
grid-row: 3;
text-align: left;
}
body[data-page="benchmark"] .trajectory-list summary i {
grid-column: 3;
grid-row: 1;
}
body[data-page="benchmark"] .trajectory-body {
padding: 5px 22px 32px 68px;
}
body[data-page="benchmark"] .trajectory-schema {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
body[data-page="benchmark"] .colosseum-cta .v4-section-inner > div {
grid-template-columns: 1fr !important;
}
body[data-page="verticals"] .v4-section:first-child .v4-section-inner > div {
grid-template-columns: 1fr;
}
body[data-page="verticals"] .v4-section:nth-child(3) .v4-section-inner::before {
position: sticky;
left: 20px;
display: block;
width: max-content;
margin-bottom: 14px;
color: var(--v7-lavender-ink);
content: "SWIPE THE FIVE COLUMNS →";
font-family: var(--mono);
font-size: 8px;
letter-spacing: 0.06em;
}
body[data-category="operators"]:not([data-page="verticals"]) .v4-section:nth-child(n + 3):not(:nth-last-child(-n + 2)) .v4-section-inner > section {
gap: 38px;
}
body[data-page="brand"] .brand-wordmark {
min-height: 260px;
font-size: clamp(52px, 17vw, 116px);
}
body[data-page="brand"] .brand-palette {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body[data-page="brand"] .brand-palette > div {
min-height: 220px;
}
body[data-page="brand"] .brand-palette > div:last-child {
grid-column: 1 / -1;
}
body[data-page="brand"] .brand-rules {
grid-template-columns: 1fr !important;
}
body[data-page="brand"] .brand-type > div {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
body[data-page="brand"] .brand-assets > a {
grid-template-columns: minmax(0, 1fr) auto;
}
body[data-page="brand"] .brand-assets > a strong {
grid-column: 1;
grid-row: 2;
}
body[data-page="brand"] .brand-assets > a i {
grid-column: 2;
grid-row: 1 / 3;
}
body[data-page="careers"] .careers-roles .roles-head + div > a {
grid-template-columns: 104px minmax(0, 1fr) 24px;
gap: 15px;
}
body[data-page="careers"] .careers-roles .roles-head + div > a > div {
grid-column: 2;
grid-row: 2;
}
body[data-page="careers"] .careers-roles .roles-head + div > a > span:last-child {
grid-column: 3;
grid-row: 1;
}
}
@media (max-width: 620px) {
body[data-page="benchmark"] .trajectory-primer-grid > div {
grid-template-columns: 34px minmax(0, 1fr);
}
body[data-page="benchmark"] .trajectory-primer-grid p {
grid-column: 2;
}
body[data-page="benchmark"] .trajectory-body {
padding-left: 22px;
}
body[data-page="benchmark"] .trajectory-schema {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body[data-page="verticals"] .v4-section:first-child .v4-section-inner > div > a {
min-height: 280px;
}
body[data-page="about"] .v4-section-inner > div > div > div:last-child {
padding-top: 28px;
padding-left: 0;
border-top: 1px solid rgba(112, 89, 143, 0.42);
border-left: 0;
}
body[data-page="brand"] .brand-mark-specimen {
min-height: 390px;
padding: 24px 20px;
}
body[data-page="brand"] .brand-wordmark {
min-height: 240px;
font-size: 17vw;
}
body[data-page="brand"] .brand-palette {
grid-template-columns: 1fr !important;
}
body[data-page="brand"] .brand-palette > div:last-child {
grid-column: auto;
}
body[data-page="careers"] .careers-roles .roles-head {
align-items: flex-start;
flex-direction: column;
}
body[data-page="careers"] .careers-roles .roles-head + div > a {
grid-template-columns: minmax(0, 1fr) 24px;
}
body[data-page="careers"] .careers-roles .roles-head + div > a > span:first-child {
grid-column: 1;
}
body[data-page="careers"] .careers-roles .roles-head + div > a > span:nth-child(2) {
grid-column: 1;
grid-row: 2;
}
body[data-page="careers"] .careers-roles .roles-head + div > a > div {
grid-column: 1;
grid-row: 3;
}
body[data-page="careers"] .careers-roles .roles-head + div > a > span:last-child {
grid-column: 2;
grid-row: 1;
}
body[data-page="culture"] .week-day summary {
grid-template-columns: 56px minmax(0, 1fr) 24px;
gap: 14px;
padding: 24px 10px;
}
body[data-page="culture"] .week-day > div {
padding: 0 10px 32px 80px;
}
}
@media (prefers-reduced-motion: reduce) {
body[data-rebuilt="true"] .v4-main *,
body[data-rebuilt="true"] .v4-main *::before,
body[data-rebuilt="true"] .v4-main *::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
}
/* source: site-v8.css */
/* Vertex internal pages — homepage navigation parity.
The destinations, proportions, typography, motion, and mobile drawer
now follow the landing-page shell exactly. */
:root {
--v8-cream: #f3efe6;
--v8-ink: #141414;
--v8-lavender: #c8b7e8;
--v8-line: rgba(20, 20, 20, 0.2);
--v8-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--v8-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}
body[data-page] .topnav.site-shell,
body[data-page]:not(.is-scrolled) .topnav.site-shell {
min-height: 76px !important;
height: 76px;
grid-template-columns: 1fr auto 1fr !important;
padding: 0 32px !important;
border-bottom: 1px solid var(--v8-line) !important;
background: rgba(243, 239, 230, 0.9) !important;
color: var(--v8-ink) !important;
backdrop-filter: blur(18px) saturate(120%) !important;
-webkit-backdrop-filter: blur(18px) saturate(120%) !important;
}
body[data-page] .site-shell .topnav-mark {
justify-self: start;
display: inline-flex !important;
align-items: center !important;
gap: 0 !important;
color: var(--v8-ink) !important;
font-family: "Monoton", "Inter Tight", Arial, sans-serif !important;
font-size: 22px !important;
font-weight: 400 !important;
letter-spacing: 0.06em !important;
line-height: normal !important;
text-transform: uppercase !important;
}
body[data-page] .site-shell .topnav-mark .logo-v,
body[data-page] .site-shell .topnav-mark .logo-mid,
body[data-page] .site-shell .topnav-mark .logo-end,
body[data-page] .site-shell .topnav-mark .logo-x,
body[data-page] .site-shell .topnav-mark .logo-x-slash {
flex: 0 0 auto;
line-height: normal !important;
}
body[data-page] .site-shell .nav-links-row {
display: flex !important;
align-items: center;
gap: 34px !important;
}
body[data-page] .site-shell .nav-link {
position: relative;
display: inline-block;
min-width: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
color: var(--v8-ink) !important;
font-family: "Inter Tight", Arial, sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
line-height: 1.2;
text-transform: none !important;
}
body[data-page] .site-shell .nav-link::after {
right: 0;
bottom: -7px !important;
left: 0;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform 460ms var(--v8-ease-out);
}
body[data-page] .site-shell .nav-link:hover::after,
body[data-page] .site-shell .nav-link:focus-visible::after,
body[data-page] .site-shell .nav-link.is-here::after {
transform: scaleX(1);
transform-origin: left;
}
body[data-page] .site-shell .nav-right {
justify-self: end;
display: flex;
align-items: center;
}
body[data-page] .site-shell .site-contact {
position: relative;
display: inline-flex !important;
padding: 0;
color: var(--v8-ink) !important;
font-family: "Inter Tight", Arial, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1.2;
}
body[data-page] .site-shell .site-contact::after {
bottom: -7px;
}
body[data-page] .site-shell .menu-toggle {
display: none !important;
}
body[data-page] .menu-scrim {
display: none !important;
}
@media (max-width: 900px) {
body[data-page] .topnav.site-shell,
body[data-page]:not(.is-scrolled) .topnav.site-shell {
min-height: 66px !important;
height: 66px;
grid-template-columns: 1fr auto !important;
padding: 0 20px !important;
}
body[data-page] .site-shell .nav-links-row,
body[data-page] .site-shell .site-contact {
display: none !important;
}
body[data-page] .site-shell .menu-toggle {
justify-self: end;
position: relative !important;
display: block !important;
width: 40px !important;
height: 40px !important;
border: 0 !important;
border-radius: 50%;
background: transparent !important;
color: var(--v8-ink) !important;
cursor: pointer;
transition: background-color 460ms var(--v8-ease-soft);
}
body[data-page] .site-shell .menu-toggle:hover,
body[data-page] .site-shell .menu-toggle:focus-visible {
background: rgba(200, 183, 232, 0.42) !important;
}
body[data-page] .site-shell .menu-toggle span {
position: absolute;
right: auto !important;
left: 10px !important;
display: block;
width: 20px !important;
height: 1px !important;
background: currentColor !important;
transition: transform 460ms var(--v8-ease-out);
}
body[data-page] .site-shell .menu-toggle span:nth-child(1) {
top: 17px !important;
}
body[data-page] .site-shell .menu-toggle span:nth-child(2) {
display: none !important;
}
body[data-page] .site-shell .menu-toggle span:nth-child(3) {
top: 23px !important;
}
body[data-page].menu-open .site-shell .menu-toggle span:nth-child(1) {
transform: translateY(3px) rotate(45deg) !important;
}
body[data-page].menu-open .site-shell .menu-toggle span:nth-child(3) {
transform: translateY(-3px) rotate(-45deg) !important;
}
body[data-page] .mobile-nav.site-drawer {
position: fixed;
inset: 66px 0 0;
z-index: 99;
width: 100vw !important;
display: grid !important;
grid-template-rows: 1fr auto;
padding: 28px 20px !important;
overflow-y: auto;
border: 0 !important;
background: var(--v8-lavender) !important;
color: var(--v8-ink) !important;
visibility: hidden;
pointer-events: none;
transform: translateY(-12px);
opacity: 0;
transition:
opacity 460ms var(--v8-ease-soft),
transform 460ms var(--v8-ease-out),
visibility 460ms;
}
body[data-page].menu-open .mobile-nav.site-drawer {
visibility: visible;
pointer-events: auto;
transform: translateY(0);
opacity: 1;
}
body[data-page] .mobile-nav-primary {
display: flex;
flex-direction: column;
border-top: 0;
}
body[data-page] .mobile-nav-primary a {
min-height: 0 !important;
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 18px 0 !important;
border: 0 !important;
border-bottom: 1px solid rgba(20, 20, 20, 0.3) !important;
color: var(--v8-ink) !important;
font-family: "Newsreader", Georgia, serif !important;
font-size: clamp(32px, 9vw, 54px) !important;
font-weight: 400 !important;
letter-spacing: -0.025em !important;
line-height: 0.98 !important;
}
body[data-page] .mobile-nav-primary a.is-current {
color: var(--v8-ink) !important;
}
body[data-page] .mobile-nav-primary a.is-current > span:first-child {
padding-left: 0 !important;
}
body[data-page] .mobile-nav-primary a.is-current > span:first-child::before {
display: none !important;
}
body[data-page] .mobile-nav-index {
color: var(--v8-ink);
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0;
}
body[data-page] .site-drawer .mobile-nav-foot {
display: flex;
justify-content: space-between;
gap: 24px;
margin-top: 0 !important;
padding-top: 30px;
border-top: 0 !important;
color: var(--v8-ink) !important;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
opacity: 1;
transform: none;
}
body[data-page] .site-drawer .mobile-nav-mail {
min-height: 0 !important;
padding: 0 !important;
color: var(--v8-ink) !important;
font: inherit !important;
letter-spacing: inherit !important;
text-transform: inherit;
}
}
/* source: footer-parity.css */
/* Canonical footer parity.
Internal pages keep their semantic link inventory while rendering with the
landing page's exact footer composition and responsive behavior. */
body[data-page] .footer.site-footer-v3 {
position: relative;
z-index: 5;
padding: 80px 32px 28px !important;
border: 0 !important;
background: #141414 !important;
color: #f3efe6 !important;
}
body[data-page] .site-footer-v3 .footer-top {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 50px !important;
align-items: start;
padding: 0 !important;
}
body[data-page] .site-footer-v3 .footer-top::after {
content: "Foundation models for extreme-purpose robotics.";
grid-column: 2;
grid-row: 1;
justify-self: end;
max-width: 600px;
color: #f3efe6;
font-family: "Newsreader", Georgia, serif;
font-size: clamp(28px, 4vw, 58px);
font-weight: 400;
letter-spacing: 0;
line-height: 1;
text-align: right;
}
body[data-page] .site-footer-v3 .footer-mark {
grid-column: 1;
grid-row: 1;
align-self: start;
display: inline-flex;
align-items: center;
width: fit-content;
gap: 0 !important;
color: #f3efe6 !important;
font-family: "Monoton", "Inter Tight", Arial, sans-serif !important;
font-size: 26px !important;
font-weight: 400 !important;
letter-spacing: 0.06em !important;
line-height: normal;
text-transform: uppercase;
}
body[data-page] .site-footer-v3 .footer-cols,
body[data-page] .site-footer-v3 .footer-cols.footer-cols-5 {
grid-column: 1 / -1;
grid-row: 2;
width: 100%;
margin-top: 40px;
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
gap: 30px !important;
padding: 40px 0 70px;
border-top: 1px solid rgba(243, 239, 230, 0.22);
}
body[data-page] .site-footer-v3 .footer-col {
display: flex !important;
flex-direction: column;
align-items: flex-start;
align-content: initial;
gap: 10px !important;
}
body[data-page] .site-footer-v3 .footer-col-h {
margin: 0 0 12px;
color: #c8b7e8 !important;
font-family: "JetBrains Mono", ui-monospace, monospace !important;
font-size: 10px !important;
font-weight: 500 !important;
letter-spacing: 0.12em !important;
line-height: normal !important;
text-transform: uppercase;
}
body[data-page] .site-footer-v3 .footer-col-count {
display: none;
}
body[data-page] .site-footer-v3 .footer-col a {
width: fit-content;
padding: 0;
color: #aaa69e !important;
background-image: none !important;
font-family: "Inter Tight", Arial, sans-serif;
font-size: 14px !important;
font-weight: 400;
line-height: normal;
transition: color 460ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body[data-page] .site-footer-v3 .footer-col a:hover,
body[data-page] .site-footer-v3 .footer-col a:focus-visible {
color: #f3efe6 !important;
background-image: none !important;
}
body[data-page] .site-footer-v3 .footer-bottom {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
display: grid !important;
grid-template-columns: 1fr auto 1fr !important;
gap: 30px !important;
padding: 24px 0 0 !important;
border-top: 1px solid rgba(243, 239, 230, 0.22) !important;
color: #aaa69e !important;
font-family: "JetBrains Mono", ui-monospace, monospace !important;
font-size: 10px !important;
font-weight: 500;
letter-spacing: 0.12em !important;
line-height: normal;
text-transform: uppercase;
}
body[data-page] .site-footer-v3 .footer-bottom a {
color: #aaa69e !important;
background-image: none !important;
transition: color 460ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body[data-page] .site-footer-v3 .footer-bottom a:hover,
body[data-page] .site-footer-v3 .footer-bottom a:focus-visible {
color: #f3efe6 !important;
background-image: none !important;
}
body[data-page] .site-footer-v3 .footer-bottom span:last-child {
justify-self: end;
}
@media (max-width: 1180px) {
body[data-page] .site-footer-v3 .footer-cols,
body[data-page] .site-footer-v3 .footer-cols.footer-cols-5 {
grid-template-columns: repeat(3, 1fr) !important;
row-gap: 44px !important;
}
}
@media (max-width: 660px) {
body[data-page] .footer.site-footer-v3 {
padding-right: 20px !important;
padding-left: 20px !important;
}
body[data-page] .site-footer-v3 .footer-top {
grid-template-columns: 1fr !important;
}
body[data-page] .site-footer-v3 .footer-top::after {
grid-column: 1;
grid-row: 2;
justify-self: start;
text-align: left;
}
body[data-page] .site-footer-v3 .footer-cols,
body[data-page] .site-footer-v3 .footer-cols.footer-cols-5 {
grid-column: 1;
grid-row: 3;
grid-template-columns: 1fr 1fr !important;
}
body[data-page] .site-footer-v3 .footer-bottom {
grid-template-columns: 1fr !important;
}
body[data-page] .site-footer-v3 .footer-bottom span:last-child {
justify-self: start;
}
}
/* source: site-v9.css */
/* Vertex verification and restraint layer — July 2026.
This layer standardizes claim states, removes jumpy hover motion, and
gives dense research pages a calmer editorial rhythm. */
:root {
--claim-measured: #3f6a4b;
--claim-released: #56447a;
--claim-planned: #7a552f;
--claim-external: #445e72;
}
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
body[data-page] :is(a, button, summary, input, textarea, select):focus-visible {
outline: 2px solid #6f5594 !important;
outline-offset: 4px;
}
body[data-page] .reveal {
transform: translateY(9px);
transition:
opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
body[data-page] .reveal.is-visible {
transform: translateY(0);
}
/* Broad auto-card rules made editorial rows feel boxed and caused the
hover field to stop at each child. One continuous inset covers the row. */
body[data-rebuilt="true"] .v4-section :is(article, div:has(> h3), li:has(> h3)) {
transform: none !important;
}
body[data-rebuilt="true"] .v4-section :is(article, div:has(> h3), li:has(> h3)):hover {
transform: none !important;
}
.claim-strip {
position: relative;
z-index: 4;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 18px;
width: 100%;
padding: 13px clamp(22px, 3.4vw, 54px);
border-top: 1px solid rgba(20, 20, 20, 0.18);
border-bottom: 1px solid rgba(20, 20, 20, 0.18);
background: #c8b7e8;
color: #141414;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 9px;
font-weight: 500;
letter-spacing: 0.08em;
line-height: 1.55;
text-transform: uppercase;
}
.claim-strip strong {
font-weight: 600;
}
.claim-strip a {
margin-left: auto;
border-bottom: 1px solid currentColor;
}
.claim-strip--quiet {
background: #e9e2d7;
}
.claim-strip--warning {
background: #e7d3bc;
}
.claim-badge {
display: inline-flex;
align-items: center;
width: max-content;
gap: 7px;
padding: 5px 8px;
border: 1px solid rgba(20, 20, 20, 0.28);
border-radius: 999px;
color: #141414;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 8px;
font-style: normal;
font-weight: 600;
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
}
.claim-badge::before {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
content: "";
}
.claim-badge[data-state="measured"] { color: var(--claim-measured); }
.claim-badge[data-state="released"] { color: var(--claim-released); }
.claim-badge[data-state="planned"] { color: var(--claim-planned); }
.claim-badge[data-state="external"] { color: var(--claim-external); }
.section-status {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: 0 0 28px;
}
.section-status > span:last-child {
color: var(--v5-muted, #625d55);
font-size: 13px;
line-height: 1.5;
}
/* Colosseum gets a compact orientation rail, not a faux film control. */
.benchmark-jump {
position: sticky;
top: 76px;
z-index: 5;
display: flex;
align-items: center;
gap: 0;
overflow-x: auto;
border-bottom: 1px solid rgba(20, 20, 20, 0.2);
background: rgba(243, 239, 230, 0.94);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
scrollbar-width: none;
}
.benchmark-jump::-webkit-scrollbar { display: none; }
.benchmark-jump > span,
.benchmark-jump > a {
flex: 0 0 auto;
min-height: 48px;
display: inline-flex;
align-items: center;
padding: 0 18px;
border-right: 1px solid rgba(20, 20, 20, 0.14);
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 9px;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.benchmark-jump > span {
background: #141414;
color: #f3efe6;
}
.benchmark-jump > a {
transition: background-color 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.benchmark-jump > a:hover {
background: rgba(200, 183, 232, 0.54);
}
body[data-page="benchmark"] .trajectory-head {
gap: clamp(30px, 5vw, 80px);
}
body[data-page="benchmark"] .artifact-pending {
margin: 0 0 28px;
padding: 18px 20px;
border-left: 2px solid #70598f;
background: rgba(200, 183, 232, 0.24);
color: #4e4850;
font-size: 14px;
line-height: 1.65;
}
body[data-page="benchmark"] .artifact-pending strong {
display: block;
margin-bottom: 5px;
color: #141414;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 9px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* Doctrine utilities. */
body[data-page="doctrine"] .v4-section:first-child .v4-section-inner > .doctrine-tools {
display: grid;
grid-template-columns: minmax(220px, 1fr) auto;
gap: 12px;
width: 100%;
margin-bottom: 20px;
}
.doctrine-search {
width: 100%;
min-height: 44px;
padding: 10px 13px;
border: 1px solid rgba(20, 20, 20, 0.23);
border-radius: 0;
background: rgba(255, 255, 255, 0.15);
color: #141414;
font: 13px/1.4 "Inter Tight", sans-serif;
}
.doctrine-search::placeholder {
color: #6e685f;
}
body[data-page="doctrine"] .doctrine-export-group {
display: flex;
gap: 8px;
}
body[data-page="doctrine"] .doctrine-export-group button {
min-height: 44px !important;
margin: 0 !important;
}
.doctrine-result-note {
margin: 12px 0 0;
color: #655f57;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 9px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.v5-rule-detail .rule-detail-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
}
.v5-rule-detail .rule-detail-actions :is(button, a) {
min-height: 36px !important;
margin: 0 !important;
padding: 7px 10px !important;
border: 1px solid rgba(20, 20, 20, 0.24);
background: transparent;
color: #141414;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 8px;
letter-spacing: 0.07em;
text-transform: uppercase;
}
/* Operator pages are design targets, never ambiguous deployment records. */
body[data-category="operators"] .operator-trace-note {
margin-bottom: 26px;
padding: 18px 20px;
border-left: 2px solid #70598f;
background: rgba(200, 183, 232, 0.24);
font-size: 14px;
line-height: 1.6;
}
body[data-category="operators"] blockquote.operator-question {
background: rgba(200, 183, 232, 0.24) !important;
font-size: clamp(24px, 3vw, 42px) !important;
}
body[data-category="operators"] blockquote.operator-question::after {
display: block;
margin-top: 18px;
color: #625d55;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 9px;
font-style: normal;
letter-spacing: 0.08em;
content: "DESIGN QUESTION · NOT AN ENDORSEMENT";
text-transform: uppercase;
}
.external-source-note {
margin-top: 18px;
color: #625d55;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 9px;
letter-spacing: 0.06em;
line-height: 1.65;
text-transform: uppercase;
}
.roadmap-record {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
border-top: 1px solid rgba(20, 20, 20, 0.2);
}
.roadmap-record > div {
display: grid !important;
grid-template-columns: minmax(130px, 180px) minmax(180px, 260px) minmax(0, 1fr) !important;
gap: 24px !important;
align-items: start;
padding: 24px 0 !important;
border: 0 !important;
border-bottom: 1px solid rgba(20, 20, 20, 0.18) !important;
background: transparent !important;
}
.roadmap-record strong {
font-size: 18px;
line-height: 1.3;
}
.roadmap-record p {
color: #625d55;
font-size: 14px;
line-height: 1.65;
}
/* Honest application handoff. */
.application-handoff {
margin-top: 20px;
padding: 18px;
border: 1px solid rgba(20, 20, 20, 0.2);
background: rgba(200, 183, 232, 0.2);
}
.application-handoff[hidden] { display: none; }
.application-handoff h2 {
margin-bottom: 10px;
font-size: clamp(26px, 4vw, 46px);
}
.application-handoff p {
max-width: 640px;
}
.application-handoff-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 18px;
}
/* Lightweight redirect and 404 pages. */
.utility-page {
min-height: calc(100vh - 76px);
display: grid;
place-items: center;
padding: 120px clamp(22px, 5vw, 72px) 70px;
background:
radial-gradient(circle at 72% 28%, rgba(200, 183, 232, 0.48), transparent 25%),
#f3efe6;
color: #141414;
}
.utility-card {
width: min(760px, 100%);
padding-top: 22px;
border-top: 1px solid rgba(20, 20, 20, 0.28);
}
.utility-card > span {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 9px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.utility-card h1 {
max-width: 700px;
margin: 25px 0 24px;
font-family: "Newsreader", Georgia, serif;
font-size: clamp(48px, 9vw, 108px);
font-weight: 400;
letter-spacing: -0.045em;
line-height: 0.88;
}
.utility-card p {
max-width: 580px;
color: #625d55;
font-size: 17px;
line-height: 1.6;
}
.utility-card a {
display: inline-flex;
margin-top: 28px;
padding-bottom: 3px;
border-bottom: 1px solid currentColor;
}
@media (max-width: 900px) {
html {
scroll-padding-top: 7.25rem;
}
.benchmark-jump {
top: 66px;
}
.claim-strip {
padding-right: 20px;
padding-left: 20px;
}
.claim-strip a {
width: 100%;
margin-left: 0;
}
.doctrine-tools {
grid-template-columns: 1fr;
}
.doctrine-export-group {
flex-wrap: wrap;
}
.roadmap-record > div {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
}
@media (prefers-reduced-motion: reduce) {
.topnav-mark,
.topnav-mark * {
transition: none !important;
}
body[data-page] *,
body[data-page] *::before,
body[data-page] *::after {
scroll-behavior: auto !important;
transition-duration: 0.001ms !important;
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
}
}
@media print {
.topnav,
.mobile-nav,
.menu-scrim,
.site-footer-v3,
.read-progress,
.benchmark-jump,
.claim-strip a,
script {
display: none !important;
}
body,
body[data-page],
body[data-rebuilt="true"],
.v4-main,
.v4-section {
background: #fff !important;
color: #111 !important;
}
.v4-hero {
min-height: 0 !important;
padding-top: 40px !important;
}
.v4-section {
break-inside: avoid;
}
a[href]::after {
content: " (" attr(href) ")";
font-size: 9pt;
}
}
html {
scroll-padding-top: 8.25rem;
}
/* State-triggered wordmark transition. The endpoint glyph construction is
unchanged: the middle letters leave in sequence and the original clipped
Monoton V resolves into the compact slash. */
.topnav-mark .logo-v,
.topnav-mark .logo-mid,
.topnav-mark .logo-letter,
.topnav-mark .logo-end,
.topnav-mark .logo-x,
.topnav-mark .logo-x-slash {
display: inline-block;
}
.topnav-mark .logo-mid {
display: inline-flex;
max-width: 5em;
overflow: hidden;
vertical-align: top;
white-space: nowrap;
opacity: 1;
letter-spacing: inherit;
transition:
max-width 680ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 220ms cubic-bezier(0.4, 0, 0.2, 1) 80ms,
letter-spacing 680ms cubic-bezier(0.22, 1, 0.36, 1);
}
.topnav-mark .logo-letter {
opacity: 1;
transform: translateX(0) scaleX(1);
transform-origin: left center;
transition:
opacity 180ms cubic-bezier(0.4, 0, 0.2, 1),
transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.topnav-mark .logo-letter-1 { transition-delay: 150ms; }
.topnav-mark .logo-letter-2 { transition-delay: 100ms; }
.topnav-mark .logo-letter-3 { transition-delay: 50ms; }
.topnav-mark .logo-letter-4 { transition-delay: 0ms; }
.topnav-mark.is-logo-collapsed .logo-mid {
max-width: 0;
opacity: 0;
letter-spacing: -0.5em;
}
.topnav-mark.is-logo-collapsed .logo-letter {
opacity: 0;
transform: translateX(-0.44em) scaleX(0.72);
}
.topnav-mark.is-logo-collapsed .logo-letter-1 { transition-delay: 150ms; }
.topnav-mark.is-logo-collapsed .logo-letter-2 { transition-delay: 100ms; }
.topnav-mark.is-logo-collapsed .logo-letter-3 { transition-delay: 50ms; }
.topnav-mark.is-logo-collapsed .logo-letter-4 { transition-delay: 0ms; }
.topnav-mark .logo-end {
margin-left: 0;
transition: margin-left 680ms cubic-bezier(0.22, 1, 0.36, 1);
}
.topnav-mark.is-logo-collapsed .logo-end {
margin-left: -0.6em;
}
.topnav-mark .logo-x {
opacity: 1;
transition: opacity 210ms cubic-bezier(0.4, 0, 0.2, 1) 160ms;
}
.topnav-mark.is-logo-collapsed .logo-x {
opacity: 0;
transition-delay: 250ms;
}
.topnav-mark .logo-x-slash {
opacity: 0;
transition: opacity 240ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
}
.topnav-mark.is-logo-collapsed .logo-x-slash {
opacity: 1;
transition-delay: 300ms;
}
.topnav-mark.logo-no-motion *,
.topnav-mark.logo-no-motion {
transition: none !important;
}
/* Editorial structures for copy-heavy pages ------------------------- */
body[data-page="careers"] .careers-brief {
padding-top: clamp(78px, 8vw, 118px) !important;
padding-bottom: clamp(78px, 8vw, 118px) !important;
}
body[data-page="careers"] .careers-brief-grid {
display: grid !important;
grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.72fr) !important;
gap: clamp(46px, 7vw, 110px) !important;
align-items: stretch;
}
body[data-page="careers"] .careers-brief-copy {
display: flex !important;
flex-direction: column;
justify-content: space-between;
min-height: 620px;
padding: 12px 0 2px;
}
body[data-page="careers"] .careers-brief-copy > span,
body[data-page="careers"] .robot-study figcaption,
body[data-page="careers"] .careers-brief-facts span {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.075em;
line-height: 1.5;
text-transform: uppercase;
}
body[data-page="careers"] .careers-brief-copy > span {
color: #70598f;
}
body[data-page="careers"] .careers-brief-copy > p {
max-width: 720px;
margin: auto 0;
color: #171717;
font-family: "Newsreader", Georgia, serif !important;
font-size: clamp(32px, 4vw, 58px) !important;
font-weight: 400;
letter-spacing: -0.035em;
line-height: 1.03 !important;
}
body[data-page="careers"] .careers-brief-copy > p a {
display: inline !important;
width: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
color: #70598f;
font: inherit !important;
letter-spacing: inherit !important;
line-height: inherit !important;
text-decoration-line: underline !important;
text-decoration-thickness: 1px;
text-underline-offset: 0.13em;
}
body[data-page="careers"] .careers-brief-copy > p a::before,
body[data-page="careers"] .careers-brief-copy > p a::after {
display: none !important;
content: none !important;
}
body[data-page="careers"] .careers-brief-facts {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
margin-top: 48px;
border-top: 1px solid rgba(20, 20, 20, 0.24);
border-bottom: 1px solid rgba(20, 20, 20, 0.24);
}
body[data-page="careers"] .careers-brief-facts span {
display: flex;
flex-direction: column;
gap: 6px;
padding: 17px 12px 17px 0;
color: #65605a;
}
body[data-page="careers"] .careers-brief-facts span + span {
padding-left: 16px;
border-left: 1px solid rgba(20, 20, 20, 0.18);
}
body[data-page="careers"] .careers-brief-facts strong {
color: #171717;
font-family: "Newsreader", Georgia, serif;
font-size: clamp(28px, 3vw, 42px);
font-weight: 400;
letter-spacing: -0.04em;
line-height: 0.9;
}
body[data-page="careers"] .robot-study {
min-width: 0;
margin: 0;
}
body[data-page="careers"] .robot-study-image {
position: relative;
height: 620px;
overflow: hidden;
background: #e9e2d9;
}
body[data-page="careers"] .robot-study-image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 72%, rgba(20, 20, 20, 0.12));
pointer-events: none;
}
body[data-page="careers"] .robot-study img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 22%;
filter: saturate(0.82) contrast(1.04);
transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1), filter 600ms ease;
}
body[data-page="careers"] .robot-study:hover img {
transform: scale(1.018);
filter: saturate(1) contrast(1.04);
}
body[data-page="careers"] .robot-study figcaption {
display: flex;
justify-content: space-between;
gap: 20px;
padding-top: 13px;
color: #625d56;
}
body[data-page="careers"] .robot-study figcaption span:last-child {
text-align: right;
}
body[data-page="careers"] .principles-index {
display: grid !important;
grid-template-columns: 180px minmax(0, 1fr) !important;
gap: clamp(42px, 7vw, 100px) !important;
counter-reset: career-principle;
}
body[data-page="careers"] .principles-index > div:first-child {
padding-top: 9px;
color: #70598f;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.075em;
}
body[data-page="careers"] .principles-index > div:last-child {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0 clamp(36px, 5vw, 74px) !important;
}
body[data-page="careers"] .principles-index > div:last-child > div {
position: relative;
min-height: 240px;
padding: 58px 0 34px !important;
border-top: 1px solid rgba(20, 20, 20, 0.32) !important;
counter-increment: career-principle;
}
body[data-page="careers"] .principles-index > div:last-child > div::before {
content: "0" counter(career-principle);
position: absolute;
top: 17px;
left: 0;
color: #70598f;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.08em;
}
body[data-page="careers"] .principles-index > div:last-child > div > div {
margin-bottom: 14px;
color: #171717;
font-family: "Newsreader", Georgia, serif;
font-size: clamp(28px, 3vw, 43px);
letter-spacing: -0.035em;
line-height: 1;
}
body[data-page="careers"] .principles-index p {
max-width: 520px;
margin: 0;
color: #625d56;
font-family: "Inter Tight", Arial, sans-serif !important;
font-size: 15px !important;
letter-spacing: 0 !important;
line-height: 1.58 !important;
}
body[data-page="culture"] .culture-thesis {
display: grid !important;
grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.75fr) !important;
gap: 0 clamp(58px, 8vw, 126px) !important;
max-width: none !important;
}
body[data-page="culture"] .culture-thesis > p {
margin: 0 !important;
}
body[data-page="culture"] .culture-thesis > p:first-child {
grid-row: 1 / 3;
color: #171717;
font-family: "Newsreader", Georgia, serif !important;
font-size: clamp(34px, 4.1vw, 61px) !important;
letter-spacing: -0.04em !important;
line-height: 1.02 !important;
}
body[data-page="culture"] .culture-thesis > p:nth-child(n + 2) {
padding: 24px 0;
border-top: 1px solid rgba(20, 20, 20, 0.25);
color: #5f5a54;
font-family: "Inter Tight", Arial, sans-serif !important;
font-size: 16px !important;
letter-spacing: 0 !important;
line-height: 1.62 !important;
}
body[data-page="culture"] .culture-principles,
body[data-page="culture"] .culture-benefits {
display: grid !important;
grid-template-columns: 165px minmax(0, 1fr) !important;
gap: clamp(46px, 7vw, 104px) !important;
}
body[data-page="culture"] .culture-section-label {
padding-top: 10px;
color: #70598f;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.075em;
}
body[data-page="culture"] .culture-principles-list {
display: block !important;
border-top: 1px solid #171717;
}
body[data-page="culture"] .culture-principle {
display: grid !important;
grid-template-columns: 54px minmax(180px, 0.62fr) minmax(0, 1.38fr) !important;
gap: clamp(20px, 3vw, 48px) !important;
align-items: start;
min-height: 170px;
padding: 28px 0 !important;
border-top: 0 !important;
border-bottom: 1px solid rgba(20, 20, 20, 0.22);
}
body[data-page="culture"] .culture-principle > div:first-child {
padding-top: 5px;
color: #70598f;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.08em;
}
body[data-page="culture"] .culture-principle > div:nth-child(2) {
color: #171717;
font-family: "Newsreader", Georgia, serif;
font-size: clamp(25px, 2.7vw, 39px);
letter-spacing: -0.035em;
line-height: 1.02;
}
body[data-page="culture"] .culture-principle > p {
max-width: 660px;
margin: 0;
color: #625d56;
font-family: "Inter Tight", Arial, sans-serif !important;
font-size: 15px !important;
letter-spacing: 0 !important;
line-height: 1.6 !important;
}
body[data-page="culture"] .culture-benefits-body {
display: block !important;
}
body[data-page="culture"] .benefits-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 0 !important;
border-top: 1px solid #171717;
}
body[data-page="culture"] .benefit-item {
display: block !important;
min-height: 285px;
padding: 28px 25px 36px !important;
border-top: 0 !important;
border-right: 1px solid rgba(20, 20, 20, 0.18);
border-bottom: 1px solid rgba(20, 20, 20, 0.18);
}
body[data-page="culture"] .benefit-item:nth-child(3n + 1) {
padding-left: 0 !important;
}
body[data-page="culture"] .benefit-item:nth-child(3n) {
padding-right: 0 !important;
border-right: 0;
}
body[data-page="culture"] .benefit-item > div:first-child {
margin-bottom: 38px;
color: #70598f;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.08em;
}
body[data-page="culture"] .benefit-item > div:nth-child(2) {
margin-bottom: 14px;
color: #171717;
font-family: "Newsreader", Georgia, serif;
font-size: clamp(24px, 2.4vw, 35px);
letter-spacing: -0.035em;
line-height: 1.02;
}
body[data-page="culture"] .benefit-item > div:nth-child(3) {
color: #625d56;
font-family: "Inter Tight", Arial, sans-serif;
font-size: 14px;
line-height: 1.55;
}
body[data-page="culture"] .benefits-footer {
padding: 25px 0 0;
color: #171717;
font-family: "Newsreader", Georgia, serif;
font-size: clamp(21px, 2.2vw, 30px);
letter-spacing: -0.025em;
}
body[data-rebuilt="true"] .editorial-note-section {
padding-top: clamp(82px, 8vw, 120px) !important;
padding-bottom: clamp(82px, 8vw, 120px) !important;
}
body[data-rebuilt="true"] .editorial-note {
position: relative;
max-width: 1040px;
margin: 0;
padding: 52px 0 0 clamp(42px, 7vw, 112px);
color: #171717;
font-family: "Newsreader", Georgia, serif !important;
font-size: clamp(29px, 3.8vw, 54px) !important;
font-weight: 400;
letter-spacing: -0.035em !important;
line-height: 1.08 !important;
}
body[data-rebuilt="true"] .editorial-note::before {
content: attr(data-label);
position: absolute;
top: 0;
left: clamp(42px, 7vw, 112px);
color: #70598f;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.08em;
}
body[data-rebuilt="true"] .editorial-note::after {
content: "";
position: absolute;
top: 4px;
bottom: 5px;
left: 0;
width: 1px;
background: #c8b7e8;
}
body[data-rebuilt="true"] .editorial-note--technical {
max-width: 1120px;
font-family: "Inter Tight", Arial, sans-serif !important;
font-size: clamp(22px, 2.6vw, 36px) !important;
letter-spacing: -0.022em !important;
line-height: 1.32 !important;
}
body[data-rebuilt="true"] .editorial-note--links {
font-family: var(--mono) !important;
font-size: clamp(14px, 1.6vw, 20px) !important;
letter-spacing: 0.02em !important;
line-height: 2 !important;
}
@media (max-width: 980px) {
body[data-page="careers"] .careers-brief-grid,
body[data-page="culture"] .culture-thesis {
grid-template-columns: 1fr !important;
}
body[data-page="careers"] .careers-brief-copy {
min-height: 0;
}
body[data-page="careers"] .careers-brief-copy > p {
margin: 54px 0;
}
body[data-page="careers"] .robot-study-image {
height: min(720px, 95vw);
}
body[data-page="culture"] .culture-thesis > p:first-child {
grid-row: auto;
margin-bottom: 46px !important;
}
body[data-page="culture"] .benefits-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body[data-page="culture"] .benefit-item:nth-child(3n + 1),
body[data-page="culture"] .benefit-item:nth-child(3n) {
padding: 28px 25px 36px !important;
border-right: 1px solid rgba(20, 20, 20, 0.18);
}
body[data-page="culture"] .benefit-item:nth-child(2n + 1) {
padding-left: 0 !important;
}
body[data-page="culture"] .benefit-item:nth-child(2n) {
padding-right: 0 !important;
border-right: 0;
}
}
@media (max-width: 720px) {
body[data-page="careers"] .careers-brief-facts {
grid-template-columns: 1fr !important;
}
body[data-page="careers"] .careers-brief-facts span + span {
padding-left: 0;
border-top: 1px solid rgba(20, 20, 20, 0.18);
border-left: 0;
}
body[data-page="careers"] .principles-index,
body[data-page="culture"] .culture-principles,
body[data-page="culture"] .culture-benefits {
grid-template-columns: 1fr !important;
gap: 32px !important;
}
body[data-page="careers"] .principles-index > div:last-child,
body[data-page="culture"] .benefits-grid {
grid-template-columns: 1fr !important;
}
body[data-page="careers"] .principles-index > div:last-child > div {
min-height: 0;
}
body[data-page="culture"] .culture-principle {
grid-template-columns: 38px minmax(0, 1fr) !important;
min-height: 0;
}
body[data-page="culture"] .culture-principle > p {
grid-column: 2;
}
body[data-page="culture"] .benefit-item,
body[data-page="culture"] .benefit-item:nth-child(n) {
min-height: 0;
padding: 28px 0 36px !important;
border-right: 0;
}
body[data-page="careers"] .robot-study figcaption {
flex-direction: column;
gap: 3px;
}
body[data-page="careers"] .robot-study figcaption span:last-child {
text-align: left;
}
body[data-rebuilt="true"] .editorial-note {
padding-left: 26px;
}
body[data-rebuilt="true"] .editorial-note::before {
left: 26px;
}
}