/* ============================================================ Mu Hat Capital — Volume II Prototype Design System Doorway + two registers (Path A / Path B) + shared backbone. Tokens ratified from brand-system v2: Mu Hound Coal Wax Vellum Marrow Ink Faint. Type: Newsreader (display + text via opsz), JetBrains Mono (figures + labels). "Carat italic" = Newsreader italic, the CTA / prestige face (resolves the "Wax" name collision: Wax stays the colour; the CTA face is Carat). No em dashes in copy. No public performance figure. Ever. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500;1,6..72,600&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* --- The eight named tokens (ratified as built) --- */ --mu: #003F53; /* primary teal */ --hound: #1C5A6D; /* lighter teal, links, secondary panels */ --coal: #0B1518; /* deepest panel, footer */ --wax: #722F2A; /* oxblood accent: carat, rules, attributions */ --vellum: #F1ECDD; /* primary paper */ --marrow: #FBF7EC; /* raised paper: cards */ --ink: #1A1A1A; /* body text */ --faint: #6F6256; /* muted text, marginalia, captions */ --wax-soft: #8a3a34; --accent-on-dark: #E3B4AA; /* wax, lifted for legibility on Mu/Coal grounds */ --line: #D9D2BF; /* hairline on paper */ --line-dark: rgba(241,236,221,0.14); /* --- Type --- */ --display: 'Newsreader', Georgia, 'Times New Roman', serif; --text: 'Newsreader', Georgia, 'Times New Roman', serif; --head: 'Newsreader', Georgia, 'Times New Roman', serif; --mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace; --gutter: 40px; --measure: 64ch; --duration: 220ms; --ease: cubic-bezier(0.16, 1, 0.3, 1); --radius: 4px; /* corner radius: all buttons, CTAs, cards (06.29.26) */ } * , *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--text); font-optical-sizing: auto; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.72; color: var(--ink); background: var(--vellum); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; line-height: 1.12; letter-spacing: -0.012em; color: var(--ink); margin: 0 0 0.5em; } p { margin: 0 0 1em; } a { color: var(--hound); text-decoration: none; transition: color var(--duration) var(--ease); } a:hover { color: var(--wax); } strong { font-weight: 600; } em { font-style: italic; } /* --- Layout primitives --- */ /* One content column for the whole site — header, footer and every section share the same 1100px max-width so left/right margins line up everywhere. */ .wrap { max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter); } /* .narrow shares .wrap's outer column; its content is left-aligned and capped to a readable line length so it starts at the same edge as .wrap content. */ .narrow { max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter); } .narrow > * { max-width: 720px; } .section { padding: 104px 0; } .section--mu { background: var(--mu); color: var(--marrow); } .section--coal { background: linear-gradient(180deg, rgba(28,90,109,0.38) 0%, rgba(28,90,109,0.12) 90px, rgba(11,21,24,0) 180px), var(--coal); color: var(--marrow); } .section--blue { background: linear-gradient(160deg, #1C5A6D 0%, #003F53 52%, #0B1518 100%); color: var(--marrow); } .section--blue h1, .section--blue h2, .section--blue h3, .section--blue h4 { color: var(--marrow); } .section--blue .label { color: var(--accent-on-dark); } .section--blue p { color: rgba(241,236,221,0.9) !important; } .section--blue strong { color: var(--marrow); } .section--blue .cite { color: rgba(241,236,221,0.6); } .section--blue .eqn { color: var(--marrow); } .section--blue code { color: var(--accent-on-dark) !important; background: rgba(241,236,221,0.08); } .section--blue a { color: var(--accent-on-dark); } .section--blue hr { border-color: rgba(241,236,221,0.2); } .section--blue .pillars, .section--blue .pillars--3.pillars { background: transparent; border: 0; gap: var(--rhythm-2); } /* Pillar cards on the blue section: vellum paper cards (IV 07.18.26). Copy remapped to paper tokens for accessibility on vellum: ink body/title (~14.6:1, AAA), wax eyebrow + rule (~8.2:1, AAA). NOTE: this is the .section--blue .pillar card ONLY — the .gate module ("Fund documents are gated") is a different component and is untouched. */ .section--blue .pillar { background: var(--vellum); border: 1px solid var(--line); border-radius: var(--radius); } .section--blue .pillar__no { color: var(--wax); } .section--blue .pillar__rule { background: var(--wax); } .section--blue .pillar__title { color:#262626; } .section--blue .pillar__desc { color: var(--ink) !important; } .section--marrow { background: var(--marrow); } .section--mu h1, .section--mu h2, .section--mu h3, .section--coal h1, .section--coal h2, .section--coal h3 { color: var(--marrow); } /* --- The carat label (mono eyebrow) --- */ .label { display: inline-block; font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wax); margin-bottom: 18px; } .section--mu .label, .section--coal .label { color: var(--accent-on-dark); } /* The mark: mu with oxblood carat. The combining circumflex is nudged left/down (em-based, so it scales) to seat centred over the mu bowl. */ .mark { font-family: var(--display); font-weight: 500; position: relative; color: var(--mu); } .carat { color: var(--wax); position: relative; left: -0.30em; top: 0.06em; display: inline-block; } /* --- Carat italic CTA (the face formerly colliding with "Wax") --- */ /* .cta — formerly an inline italic text-arrow link; promoted 07.17.26 to the wax-seal button form so every CTA reads as pressed oxblood wax (IV request). Fill, border, and shadow come from the wax-seal treatment block below. */ .cta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; padding: 14px 24px; color: #FFFAEB; text-decoration: none; text-shadow: none !important; transition: all var(--duration) var(--ease); } .cta .arrow { font-style: normal; font-family: var(--mono); font-size: 0.9em; } .cta--ondark { color: #FFFAEB; } /* button form for prominent moments */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; padding: 14px 24px; border: 1px solid var(--mu); background: var(--mu); color: #FFFAEB; /* No text-shadow on small mono caps against a coloured fill — even a hairline dark shadow under each glyph dims the perceived brightness at this size. The body's inherited paper-cream shadow is killed here too. */ text-shadow: none !important; transition: all var(--duration) var(--ease); } .btn:hover { background: var(--hound); color: #FFFAEB; } .btn--ghost { background: transparent; color: var(--mu); text-shadow: none !important; } .btn--ghost:hover { background: var(--mu); color: #FFFAEB; text-shadow: none !important; } .btn--ondark { border-color: var(--marrow); background: transparent; color: #FFFAEB; text-shadow: none !important; } .btn--ondark:hover { background: var(--marrow); color: var(--mu); text-shadow: none !important; } .head__cta, .head__nav .head__cta, .head__nav a.head__cta, .head__nav li a.head__cta { /* Nav pill: clean bright cream on wax. Higher-specificity selector chain forces this color past any .head__nav a { color: var(--faint) } rule that may sit later in the cascade. text-shadow is killed too. Padding also lives here so it beats .head__nav > li > a (8px 4px); the pill keeps a proportional ~1.7 ratio (11x19) like .btn instead of being squished. */ color: #FFFAEB !important; text-shadow: none !important; padding: 11px 19px; } /* ============================================================ SHARED HEADER (identical across both paths) ============================================================ */ /* ============================================================ LETTERPRESS + DIMENSION — visible, calibrated for screen. Multiple offset layers so the eye reads relief, not just shadow. Drop-shadow filter on all seal marks for tactile elevation. ============================================================ */ html { overflow-x: hidden; } html, body { overflow-y: visible; } /* Reserve the scrollbar gutter so content never shifts horizontally when navigating between pages that do/don't overflow vertically. Modern browsers honour scrollbar-gutter; older ones get the always-visible scrollbar fallback. Either way the page stays centered. */ html { scrollbar-gutter: stable; } @supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } } /* Letterpress restored on H1/H2 headlines per request — ink pressed into paper. Non-important so inline legibility shadows on hero copy over media/video still win. Italic inside a headline inherits the press (no own rule below). */ h1, h2, .cover h1, .sec-h, .sl-h, .door__head, .door-hero__head, .hero__lede-a, .hero__lede-b, .wf__h, .pillar__title, .hero__heading { text-shadow: 0 -1px 0 rgba(40, 20, 10, 0.55), 0 1px 0 rgba(255, 246, 230, 1); } /* Everything else renders flat (letterpress removed elsewhere per request). */ body, h3, .deck-section__h b, .head__word, .eyebrow, .pillar__no, .wf__eyebrow, .sl-eyebrow, .label, .door__kicker, .stats__num, .wf-stats__n, .sl-stats__n, .hero--b, .hero--b *, .section--mu, .section--mu *, .section--coal, .section--coal *, .foot, .foot *, .stats, .stats *, .cta-banner, .cta-banner *, .gate, .gate *, .portal-hero, .portal-hero *, .wf--mu *, .wf--coal *, .fullslide__page--mu *, .fullslide__page--coal * { text-shadow: none !important; } /* Images, SVG, code, nav links stay flat */ img, svg, code, pre, .browser__addr, .foot__link, .head__nav a, .head__cta { text-shadow: none !important; } @media (prefers-reduced-transparency: reduce) { body, body * { text-shadow: none !important; } } /* Mobile letterpress fix (IV 07.17.26): the desktop press stacks a dark line 1px ABOVE each glyph and an opaque cream line 1px BELOW. On high-DPR phones that fixed 1px becomes ~3 device px, so the dark upper line detaches into a ghost on thin serif strokes and reads as a blurry headline. On mobile we drop the dark upper line and keep only a soft cream hairline (near-invisible on paper), so headlines render crisp. Desktop letterpress is untouched. */ @media (max-width: 860px) { h1, h2, .cover h1, .sec-h, .sl-h, .door__head, .door-hero__head, .hero__lede-a, .hero__lede-b, .wf__h, .pillar__title, .hero__heading { text-shadow: 0 1px 0 rgba(255, 246, 230, 0.7); } } /* Mobile header Invest pill (IV 07.17.26): the intended smaller mobile padding was being overridden by the higher-specificity desktop rule `.head__nav li a.head__cta { padding: 11px 19px }`, so on mobile the pill kept its full desktop size and looked oversized in the compact header. Force a proportionate nav-scale size (needs to out-specify + !important the desktop rule). Matches the site's CTA scale without dominating the header. */ @media (max-width: 860px) { .head__nav li a.head__cta, .head__nav a.head__cta, .head__cta { padding: 10px 16px !important; font-size: 11px !important; letter-spacing: 0.09em !important; } } /* ============================================================ DROP-SHADOW + ELEVATION SYSTEM — visible across the page ============================================================ */ /* The mark — wax-seal drop shadow everywhere */ .head__mark img, .toc__mark img, .cover__mark img, .foot__mark img, .mark-img img, .sl-cover-seal img, .wf-gate__seal { /* Realistic seal-on-paper shadow: two layers, very tight. A pressed wax seal sits flat against paper — its shadow is a narrow contact ring, not a long cast. Works on both light and dark grounds. */ filter: contrast(1.16) brightness(1.05) saturate(1.06) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.42)) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.18)); } /* Defensive: never let any wrapper around a seal render a white frame. Plus a circular clip-path on every seal image so the photographic PNG's rectangular bounding box (and any antialiased cream edge in it) is masked to the seal's natural disc at every size. */ .cover__mark, .cover__mark img, .toc__mark, .toc__mark img, .head__mark, .head__mark img, .foot__mark, .foot__mark img, .mark-img, .mark-img img, .sl-cover-seal, .sl-cover-seal img, .wf-gate__seal, .wf-gate__seal img { background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; padding: 0 !important; } /* At tiny sizes (mark-img--xs/sm, head__mark, foot__mark), the 3-6 px drop-shadow extends a quarter of the seal's diameter and reads as a square halo box behind the disc. Strip the filter at small scales. */ .mark-img--xs img, .mark-img--sm img, .head__mark img, .foot__mark img { filter: none !important; } /* The header seal is now large (72 px); restore a soft, naturalistic contact shadow under it. Grey/cool only — the seal stays the warm element. */ .head__mark img { filter: contrast(1.16) brightness(1.05) saturate(1.06) drop-shadow(0 2px 3px rgba(11, 21, 24, 0.30)) drop-shadow(0 6px 12px rgba(11, 21, 24, 0.16)) !important; } /* (Removed clip-path: circle(50%) — it produced a hard circular alpha edge, which made the drop-shadow read as a uniform sticker-blob underneath the seal. mix-blend-mode: multiply on the .cover/.toc/.head/.mark-img/.sl-cover seal images above handles the PNG's light pixels against any cream ground without slicing the natural irregular edge of the wax.) */ .cover__mark img { /* Cover seal — tighter contact shadow scaled to the larger seal. */ filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45)) drop-shadow(0 5px 10px rgba(0, 0, 0, 0.22)) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.10)); } /* Seal sizing. The .mark-img wrapper defines the box; the image fills it. WITHOUT this the 1254x1254 seal.png renders at native size and overflows its container (a giant seal on the page). The size modifiers were referenced in markup but never defined; canonical scale per the design system. */ .mark-img { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 0; vertical-align: middle; } .mark-img img { width: 100%; height: 100%; object-fit: contain; display: block; } .mark-img--xs { width: 26px; height: 26px; } .mark-img--sm { width: 44px; height: 44px; } .mark-img--md { width: 88px; height: 88px; } .mark-img--lg { width: 160px; height: 160px; } .mark-img--xl { width: 220px; height: 220px; } /* Cards — visible elevation + hover lift */ .wf-card, .pillar, .photo-tile, .chart-frame, .grad-card, .anno, .motion-card, .auto-motion__card, .std-card, .eml, .mod, .memo, .pres-slide, .fullslide__page, .door__card, .feature-card, .portal-card, .tm-card, .dr-card, .login-card, .gate { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 2px rgba(11, 21, 24, 0.06), 0 4px 12px rgba(11, 21, 24, 0.08), 0 12px 32px rgba(11, 21, 24, 0.06); transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 520ms cubic-bezier(0.16, 1, 0.3, 1); } /* Lift only on true hover devices — prevents a tapped card from sticking in the lifted state on touch screens (no :hover to clear it). A slow, weighted float + subtle scale reads as material, not springy; the shadow warms and deepens as the card rises off the page. */ @media (hover: hover) { .wf-card:hover, .pillar:hover, .photo-tile:hover, .chart-frame:hover, .grad-card:hover, .anno:hover, .motion-card:hover, .auto-motion__card:hover, .std-card:hover, .eml:hover, .mod:hover, .memo:hover, .door__card:hover, .feature-card:hover, .portal-card:hover, .tm-card:hover, .dr-card:hover, .login-card:hover { transform: translateY(-14px) scale(1.014); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.98) inset, 0 2px 4px rgba(11, 21, 24, 0.10), 0 10px 20px rgba(11, 21, 24, 0.14), 0 30px 60px rgba(11, 21, 24, 0.22), 0 64px 120px rgba(20, 10, 4, 0.16); } } /* Buttons — letterpressed: recessed inset surface + debossed label */ .btn, .wf__btn, .head__cta { box-shadow: inset 0 2px 3px rgba(20, 10, 4, 0.45), inset 0 -1px 1px rgba(255, 255, 255, 0.16), 0 1px 2px rgba(20, 10, 4, 0.18); transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 140ms cubic-bezier(0.16, 1, 0.3, 1), background 140ms ease, color 140ms ease; } .btn, .head__cta, .wf__btn, .head__nav li a.head__cta { text-shadow: none !important; } .btn:hover, .wf__btn:hover, .head__cta:hover { box-shadow: inset 0 2px 3px rgba(20, 10, 4, 0.34), inset 0 -1px 1px rgba(255, 255, 255, 0.18), 0 2px 4px rgba(20, 10, 4, 0.16); } .btn:active, .wf__btn:active, .head__cta:active { transform: translateY(1px); box-shadow: 0 1px 1px rgba(20, 10, 4, 0.35); } /* Sections on dark — soft inner glow ring */ .hero--b, .section--mu, .section--coal, .portal-hero { box-shadow: inset 0 1px 0 rgba(224, 168, 120, 0.10); } /* Browser frames on Prototype Pages — clear elevation */ .browser { box-shadow: 0 2px 6px rgba(11, 21, 24, 0.12), 0 16px 40px rgba(11, 21, 24, 0.18), 0 32px 80px rgba(11, 21, 24, 0.10) !important; } /* ============================================================ ANIMATIONS — meaningful, restrained, infinite where appropriate ============================================================ */ @keyframes seal-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes wax-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(114, 47, 42, 0.0), 0 6px 14px rgba(114, 47, 42, 0.25); } 50% { box-shadow: 0 0 0 6px rgba(114, 47, 42, 0.12), 0 8px 18px rgba(114, 47, 42, 0.30); } } @keyframes seal-press { 0%, 90%, 100% { transform: scale(1); } 92% { transform: scale(0.96); } 96% { transform: scale(1.02); } } @keyframes underline-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Cover mark — slow float */ .cover__mark img { animation: seal-float 6s ease-in-out infinite; } .cover__mark:hover img { animation-play-state: paused; } /* Top-left mark — press on click */ .toc__mark img, .head__mark img { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .toc__mark:active img, .head__mark:active img { animation: seal-press 0.7s ease-in-out; } /* (Removed wax-pulse infinite on button hover — buttons now use a minimal drop shadow + lift transform; the looping glow competed with that quieter physical feel.) */ /* In-prose links — animated underline */ .foot__col a.foot__link, .nav-overlay-link, .feature-card a { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .foot__col a.foot__link:hover, .nav-overlay-link:hover, .feature-card a:hover { background-size: 100% 1px; } @media (prefers-reduced-motion: reduce) { .cover__mark img, .toc__mark img, .head__mark img, .wf-card, .pillar, .photo-tile, .chart-frame, .door__card, .btn, .wf__btn, .head__cta { animation: none !important; transition: none !important; } } /* STICKY HEADER */ .head { position: -webkit-sticky; position: sticky; top: 0; z-index: 100; background: linear-gradient(180deg, #E2DAC2 0%, #F1ECDD 55%, #FBF7EC 100%); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); box-shadow: 0 10px 22px rgba(11, 21, 24, 0.20), 0 22px 44px rgba(11, 21, 24, 0.10); transition: background .25s ease, box-shadow .25s ease, border-color .25s ease; } .head.is-scrolled { background: linear-gradient(180deg, #DED5BB 0%, #F1ECDD 55%, #FBF7EC 100%); box-shadow: 0 12px 26px rgba(11, 21, 24, 0.24), 0 24px 50px rgba(11, 21, 24, 0.12); border-bottom-color: rgba(217, 210, 191, 0.7); } .head--door { position: sticky; top: 0; background: rgba(241, 236, 221, 0.85); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid rgba(217, 210, 191, 0.5); box-shadow: 0 10px 22px rgba(11, 21, 24, 0.20), 0 22px 44px rgba(11, 21, 24, 0.10); } /* Gradient drop shadow beneath the first section (hero/intro) on every interior page. Homepage uses .head + main; its .door-hero already carries its own shadow. */ .head + section { position: relative; z-index: 2; box-shadow: 0 16px 30px rgba(11, 21, 24, 0.18), 0 32px 56px rgba(11, 21, 24, 0.10); } .head__in { display: flex; align-items: center; justify-content: space-between; height: 88px; } /* Sticky header keeps the same height, and the seal and wordmark keep the same size, on scroll. */ /* All header elements vertically centered on the same axis: brand (seal mark + wordmark), primary nav, and CTA pill all align-items: center against the 70-px header height. */ .head__brand { display: flex; align-items: center; gap: 12px; color: var(--mu); } .head__mark { font-family: var(--display); font-size: 27px; line-height: 1; color: var(--mu); display: inline-flex; align-items: center; justify-content: center; } .head__mark .carat { color: var(--wax); } .head__mark img { width: 72px; height: 72px; display: block; object-fit: contain; vertical-align: middle; } .head__mark canvas { width: 66px; height: 66px; display: block; } .head__word { line-height: 1; } /* Brand photograph treatment — applied to live pages (matches the doc) */ img.brand-photo { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.04) brightness(0.96) sepia(0.12); } /* Chart animation on live pages — drawn-line on scroll-into-view */ @keyframes chart-draw { from { stroke-dashoffset: 1200; } to { stroke-dashoffset: 0; } } figure svg path, .chart-frame svg path { stroke-dasharray: 1200; stroke-dashoffset: 1200; transition: stroke-dashoffset 1.6s cubic-bezier(0.16, 1, 0.3, 1); } figure.is-in svg path, .chart-frame.is-in svg path { stroke-dashoffset: 0; } figure.is-in svg path:nth-of-type(2), .chart-frame.is-in svg path:nth-of-type(2) { transition-delay: 0.35s; } figure svg text { opacity: 0; transition: opacity 0.6s ease 0.8s; } figure.is-in svg text { opacity: 1; } @media (prefers-reduced-motion: reduce) { figure svg path, .chart-frame svg path { stroke-dashoffset: 0 !important; transition: none !important; } figure svg text { opacity: 1 !important; transition: none !important; } } .head__word { font-family: var(--display); font-weight: 500; font-size: 18px; color: var(--ink); letter-spacing: normal; } /* 06.29.26 — show the wax seal in the header (top-left), inside the home-linked brand anchor. */ .head__mark { display: inline-flex; } .head__mark img { width: 48px; height: 48px; } /* ============================================================ PRIMARY NAV with hover/focus secondary dropdowns Three primary categories + CTA. Each primary item that has children ('.has-sub') reveals a small dropdown of sub-pages on hover or keyboard focus. Pure CSS, no JS. */ .head__nav { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; } .head__burger { display: none; } .head__nav > li { position: relative; margin: 0; } .head__nav > li > a { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); padding: 8px 4px; display: inline-flex; align-items: center; gap: 4px; transition: color 0.18s ease; } .head__nav > li > a:hover { color: var(--wax); } .head__nav > li.is-active > a { color: var(--wax); } /* Tiny down-triangle as a dropdown affordance. Pure CSS borders, not a glyph. */ .head__nav > li.has-sub > a::after { content: ''; display: inline-block; width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 4px solid currentColor; margin-left: 4px; opacity: 0.40; transform: translateY(0); transition: opacity 0.18s ease, transform 0.18s ease; background: transparent !important; /* override older bar-underline rule */ position: static !important; height: 0 !important; left: auto !important; right: auto !important; bottom: auto !important; } .head__nav > li.has-sub:hover > a::after, .head__nav > li.has-sub:focus-within > a::after { opacity: 1; transform: translateY(1px); } /* Subnav panel */ .head__subnav { position: absolute; top: calc(100% + 4px); left: -14px; min-width: 220px; list-style: none; margin: 0; padding: 8px 0; background: var(--marrow); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(20, 10, 4, 0.14), 0 2px 6px rgba(20, 10, 4, 0.08); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 100; } .head__nav > li.has-sub:hover > .head__subnav, .head__nav > li.has-sub:focus-within > .head__subnav { opacity: 1; visibility: visible; transform: translateY(0); } /* Hover-out bridge — the 4 px gap between trigger and panel doesn't drop hover */ .head__nav > li.has-sub::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 8px; } .head__subnav li { margin: 0; } .head__subnav a { display: block; padding: 9px 20px; white-space: nowrap; font-family: var(--mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink); border-left: 2px solid transparent; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .head__subnav a:hover, .head__subnav a:focus-visible { color: var(--wax); background: rgba(114, 47, 42, 0.04); border-left-color: var(--wax); outline: none; } .head__subnav .is-active { color: var(--wax); border-left-color: var(--wax); } /* Header CTA pill — matches .btn brand spec, scaled for nav height. Wax fill, bright cream text, 1px wax border for definition, no text-shadow, mono caps with 0.08em letter-spacing. */ .head__cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: #FFFAEB; background: var(--mu); border: 1px solid var(--mu); padding: 11px 19px; margin-left: 0; text-shadow: none !important; transition: background 0.15s ease, border-color 0.15s ease; } .head__cta:hover, .head__cta:focus-visible { color: #FFFAEB; background: var(--hound); border-color: var(--hound); outline: none; } /* doorway header is barer */ .head--door { border-bottom: none; background: transparent; } .head--door .head__in { height: 88px; } /* ============================================================ THE DOORWAY (/) — §9 Two equal cards. No toggle. No memory. No animation. ============================================================ */ .door { min-height: calc(100vh - 88px); display: flex; flex-direction: column; } .door__intro { text-align: center; max-width: 640px; margin: 28px auto 12px; padding: 0 var(--gutter); } .door__introline { font-family: var(--text); font-style: italic; font-size: 18px; color: var(--faint); line-height: 1.6; } .door__cards { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 1080px; margin: 36px auto 64px; width: 100%; padding: 0 var(--gutter); align-content: center; align-items: stretch; } .door__card { padding: 44px 40px 48px; display: flex; flex-direction: column; background: var(--marrow); border: 1px solid var(--line); } .door__card--a { /* divider removed — the two cards now stand apart with a gap */ } .door__kicker { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-bottom: 22px; } /* Path A is set larger; Path B tighter and justified — the differential signals the register before a word is read. */ .door__head { font-family: var(--display); font-style: italic; font-weight: 500; color:#262626; margin: 0 0 22px; } .door__card--a .door__head { font-size: 38px; line-height: 1.1; } .door__card--b .door__head { font-size: 38px; line-height: 1.1; } .door__body { color: var(--ink); margin: 0 0 auto; max-width: 46ch; } .door__card--a .door__body { font-size: 18px; line-height: 1.66; } .door__card--b .door__body { font-size: 18px; line-height: 1.66; text-align: justify; hyphens: auto; } .door__cta { margin-top: 40px; } /* ============================================================ HERO — forked by register ============================================================ */ .hero { padding: 96px 0 80px; min-height: 648px; display: flex; align-items: center; } .hero > .wrap { width: 100%; } .hero--a { background: var(--vellum); } .hero--b { background: var(--mu); color: var(--marrow); position: relative; overflow: hidden; } .hero__lede-a { font-family: var(--head); font-style: normal; font-weight: 500; font-size: clamp(34px, 5vw, 56px); line-height: 1.08; letter-spacing: -0.005em; color: var(--ink); max-width: 22ch; margin: 0 0 28px; } .hero__lede-b { font-family: var(--head); font-style: normal; font-weight: 500; font-size: clamp(34px, 5vw, 56px); line-height: 1.08; letter-spacing: -0.005em; color: var(--marrow); max-width: 22ch; margin: 0 0 28px; } .hero--a .hero__body { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.72; color: var(--ink); max-width: 60ch; } .hero--b .hero__body { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.72; color: #CFE0E6; max-width: 60ch; } .hero__actions { margin-top: 38px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } /* Scroll-to-next-section cue — a quiet chevron button at the foot of each section. The button is injected per page (inline script) and carries the visible chevron, so it works inside any section. Faint on paper; lightened on dark grounds via .is-ondark. */ .scroll-cue { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); width: 44px; height: 44px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; z-index: 4; -webkit-appearance: none; appearance: none; } .scroll-cue::before { content: ""; display: block; width: 13px; height: 13px; border-right: 1.6px solid var(--faint); border-bottom: 1.6px solid var(--faint); transform: rotate(45deg); opacity: .5; animation: scroll-cue 2.6s ease-in-out infinite; } .scroll-cue:hover::before, .scroll-cue:focus-visible::before { opacity: .9; } .scroll-cue:focus-visible { outline: 2px solid var(--wax); outline-offset: 3px; border-radius: 4px; } .scroll-cue.is-ondark::before { border-right-color: #CFE0E6; border-bottom-color: #CFE0E6; opacity: .6; } @keyframes scroll-cue { 0%, 100% { transform: translateY(-3px) rotate(45deg); opacity: .3; } 50% { transform: translateY(4px) rotate(45deg); opacity: .65; } } @media (prefers-reduced-motion: reduce) { .scroll-cue::before { animation: none; } } /* ============================================================ A single narrative figure (Path A replaces the stats bar) §7 ============================================================ */ .figline { background: var(--marrow); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 44px 0; } .figline__txt { font-family: var(--display); font-style: italic; font-size: clamp(22px, 3vw, 30px); color: var(--mu); text-align: center; margin: 0; } /* Path B methodological-constants stats bar */ .stats { background: var(--coal); color: var(--marrow); } .stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); } .stats__cell { padding: 40px 28px; border-left: 1px solid var(--line-dark); text-align: center; } .stats__cell:first-child { border-left: none; } .stats__num { font-family: var(--mono); font-weight: 500; font-size: 30px; color: var(--marrow); display: block; } .stats__lab { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #8FA6AD; margin-top: 10px; display: block; } /* ============================================================ PILLARS — forked ============================================================ */ .pillars { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); } .pillars--3 { grid-template-columns: repeat(3, 1fr); } .pillar { background: var(--vellum); padding: 38px 34px; } .pillar__no { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--wax); text-transform: uppercase; } .pillar__rule { display: block; width: 34px; height: 2px; background: var(--wax); margin: 16px 0 18px; } .pillar__title { font-size: 22px; font-weight: 500; margin: 0 0 12px; } .pillar__title--it { font-style: italic; } .pillar__desc { font-size: 16px; color: var(--ink); margin: 0; } .pillar--a .pillar__desc { font-size: 17px; line-height: 1.62; } /* Two-column institutional prose (Path B memo register) */ .twocol { columns: 2; column-gap: 48px; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.72; } .twocol p { margin: 0 0 1em; break-inside: avoid; } .eqn { font-family: var(--mono); font-size: 15px; color: var(--mu); text-align: center; margin: 22px 0; } .cite { font-family: var(--text); font-style: italic; color: var(--faint); } /* Letter from the CIO (Path A) */ .letter { background: var(--marrow); border: 1px solid var(--line); padding: 52px 56px; max-width: 720px; margin: 0 auto; } .letter__body { font-family: var(--display); font-style: italic; font-size: 19px; line-height: 1.7; color: var(--ink); } .letter__sign { font-family: var(--display); font-style: italic; font-size: 19px; color: var(--wax); margin-top: 28px; } .letter__role { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-top: 4px; } /* Pull quote */ .pull { padding: 88px 0; background: var(--vellum); } .pull__bar { display: block; width: 44px; height: 2px; background: var(--wax); margin: 0 auto 28px; } .pull__q { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(24px, 3.4vw, 34px); line-height: 1.3; text-align: center; color: var(--ink); margin: 0; } .pull__attr { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); text-align: center; margin-top: 26px; } /* Risk-episode block (Path A new module) */ .episode { border-left: 2px solid var(--wax); padding: 6px 0 6px 28px; margin: 0 0 40px; } .episode__date { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wax); } .episode__story { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.72; margin: 12px 0 16px; } .episode__principle { font-family: var(--display); font-style: italic; font-size: 18px; color: var(--mu); } /* Memo card */ .memo { display: block; background: var(--marrow); border: 1px solid var(--line); padding: 34px 36px; transition: border-color var(--duration) var(--ease); } .memo:hover { border-color: var(--wax); } .memo__meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); } .memo__title { font-family: var(--display); font-style: italic; font-size: 24px; color:#262626; margin: 14px 0 12px; } .memo__abstract { font-size: 16px; color: var(--ink); margin: 0 0 14px; } /* Gate notice + portal boundary */ .gate { background: linear-gradient(180deg, rgba(28,90,109,0.42) 0%, rgba(28,90,109,0.14) 80px, rgba(11,21,24,0) 200px), var(--coal); color: var(--marrow); border: 1px solid var(--line-dark); padding: 44px 48px; max-width: 760px; margin: 0 auto; } .gate__seal { font-family: var(--display); font-size: 32px; color: var(--marrow); } .gate__seal .carat { color: var(--accent-on-dark); } .gate__title { color: var(--marrow); font-size: 24px; font-style: italic; margin: 14px 0 12px; } .gate__text { color: #BFD2D8; font-size: 16px; margin: 0 0 22px; } /* CTA banner */ .cta-banner { background: linear-gradient(180deg, rgba(28,90,109,0.40) 0%, rgba(28,90,109,0.12) 110px, rgba(11,21,24,0) 220px), var(--coal); color: var(--marrow); padding: 84px 0; text-align: center; } .cta-banner__seal { display: inline-block; margin: 0 auto 18px; } .cta-banner__seal img { width: 96px; height: 96px; display: block; object-fit: contain; margin: 0 auto; } .cta-banner h2 { color: var(--marrow); font-style: italic; font-size: clamp(28px, 3.6vw, 38px); } .cta-banner p { color: #BFD2D8; max-width: 56ch; margin: 0 auto 30px; } /* ============================================================ SHARED FOOTER (identical) — standing Reg D disclosure ============================================================ */ .foot { background: linear-gradient(180deg, rgba(28,90,109,0.38) 0%, rgba(28,90,109,0.12) 90px, rgba(11,21,24,0) 180px), var(--coal); color: #A9BCC4; padding: 64px 0 40px; font-size: 14px; } .foot__top { display: grid; grid-template-columns: 1.4fr 2fr; gap: 48px; padding-bottom: 36px; border-bottom: 1px solid var(--line-dark); } .foot__mark { font-family: var(--display); font-size: 30px; color: var(--marrow); } .foot__mark .carat { color: var(--accent-on-dark); } .foot__co { font-family: var(--head); font-size: 17px; color: var(--marrow); margin: 12px 0 4px; } .foot__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .foot__col h4.foot__h { font-family: var(--mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--accent-on-dark); margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line-dark); } .foot__col ul { list-style: none; margin: 0; padding: 0; } .foot__col li { margin-bottom: 8px; line-height: 1.5; } .foot__col a.foot__link { color: #A9BCC4; font-size: 13px; } .foot__col a.foot__link:hover { color: var(--marrow); } /* Investor Login pill: the markup carries an inline font-size:9px (illegible on phones); force a legible, tappable size site-wide. */ .foot__login { font-size: 12px !important; padding: 12px 16px !important; letter-spacing: 0.08em; } /* Offset in-page anchor jumps so the sticky header never clips section labels. */ :target { scroll-margin-top: 92px; } section[id], [id].section { scroll-margin-top: 92px; } .foot__disclosure { padding-top: 28px; font-size: 12.5px; line-height: 1.6; color: #8497A0; } .foot__disclosure p { margin: 0 0 10px; max-width: none; } .foot__disclosure strong { color: #C3D4DA; } .foot__copy { margin: 0; } @media (max-width: 860px) { .foot__cols { grid-template-columns: 1fr 1fr; } } .foot__h { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #7E939B; margin: 0 0 14px; } .foot__cols ul { list-style: none; margin: 0; padding: 0; } .foot__cols li { margin-bottom: 9px; } .foot__cols a { color: #A9BCC4; font-size: 14px; } .foot__cols a:hover { color: var(--marrow); } .foot__disc { padding-top: 28px; font-size: 12.5px; line-height: 1.6; color: #8497A0; } .foot__disc p { margin: 0 0 10px; max-width: 92ch; } .foot__bottom { margin-top: 24px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: #6E838B; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .foot__credit { color: inherit; text-decoration: none; } .foot__credit:hover { color: var(--marrow); } /* ============================================================ Architecture page helpers ============================================================ */ .arch-tree { font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--ink); background: var(--marrow); border: 1px solid var(--line); padding: 32px; overflow-x: auto; white-space: pre; } .arch-table { width: 100%; border-collapse: collapse; font-size: 15px; } .arch-table th, .arch-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; } .arch-table th { font-family: var(--mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); } .tag { font-family: var(--mono); font-size: 11px; padding: 2px 8px; border: 1px solid var(--line); color: var(--faint); } .tag--a { color: var(--wax); border-color: var(--wax); } .tag--b { color: var(--mu); border-color: var(--mu); } .tag--s { color: var(--faint); } /* ============================================================ Responsive — comprehensive mobile rules ============================================================ */ /* Tablet & small desktop — first breakpoint */ @media (max-width: 1024px) { .wrap, .narrow { padding-left: 28px; padding-right: 28px; } .narrow { max-width: 100%; } .pillars--3 { grid-template-columns: repeat(2, 1fr); } } /* Tablet portrait & large phones */ @media (max-width: 860px) { :root { --gutter: 24px; } /* Layout */ .wrap, .narrow { padding-left: 24px; padding-right: 24px; } /* Header: mark + Request Access pill + hamburger; secondary nav collapses into a dropdown */ .head__in { padding: 12px 18px; height: 76px; position: relative; gap: 10px; } /* Mobile scroll perf: a blurred sticky header must re-blur the backdrop every scroll frame, which freezes/janks scrolling on phones. Drop the blur on mobile — the header keeps its opaque gradient background, so it looks the same but stops repainting on scroll. */ .head, .head--door, .head--portal { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .head--door { background: rgba(241, 236, 221, 0.98); } .head__word { font-size: 15px; } .head__brand { gap: 0; margin-right: auto; } .head__nav { display: flex; gap: 4px; } .head__nav li:not(:last-child) { display: none; } .head__cta { padding: 10px 16px; font-size: 13px; letter-spacing: 0.08em; min-height: 44px; display: inline-flex; align-items: center; } /* Hamburger button (shown only on mobile) */ .head__burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; background: transparent; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; flex: none; } .head__burger span { display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; } body.nav-open .head__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.nav-open .head__burger span:nth-child(2) { opacity: 0; } body.nav-open .head__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Open state: primary nav fills the viewport below the sticky bar (opaque, internally scrollable) so page content never bleeds through, and the body is scroll-locked (html/body.nav-open below). */ html.nav-open, body.nav-open { overflow: hidden; } /* overflow:hidden on the root un-sticks position:sticky in mobile Safari, which scrolls the header (and its close button) out of view and traps the user in the open menu. Pin the header explicitly so the X is always visible/tappable above the overlay. */ body.nav-open .head { position: fixed; top: 0; left: 0; right: 0; z-index: 210; } /* NB: .head has backdrop-filter, which makes it the containing block for fixed descendants — so height must be viewport-based (bottom:0 would resolve to the header box), not `bottom`. */ body.nav-open .head__nav { position: fixed; top: 76px; left: 0; right: 0; height: calc(100vh - 76px); height: calc(100dvh - 76px); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 40px; z-index: 200; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--vellum); border-top: 1px solid var(--line); box-shadow: 0 16px 40px rgba(11,21,24,0.12); } body.nav-open .head__nav li { display: block; } body.nav-open .head__nav > li > a { display: block; padding: 12px 24px; font-size: 15px; } body.nav-open .head__subnav { position: static; display: block; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; padding: 0 0 8px; min-width: 0; } body.nav-open .head__subnav a { padding: 8px 40px; font-size: 14px; } body.nav-open .head__nav .head__cta { display: inline-block; margin: 8px 24px 6px; } /* Portal (dark header) variants */ .head--portal .head__burger { border-color: rgba(251,247,236,0.25); } .head--portal .head__burger span { background: var(--marrow); } body.nav-open .head--portal .head__nav { background: #11161a; border-color: rgba(251,247,236,0.14); } body.nav-open .head--portal .head__nav a { color: rgba(251,247,236,0.85); } /* Hero */ .hero { padding: 64px 0 56px; } .hero__lede-a, .hero__lede-b { font-size: clamp(28px, 7vw, 38px); line-height: 1.2; } .hero__body { font-size: 16px; line-height: 1.6; } .hero__actions { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 28px; } .hero__actions > * { width: 100%; justify-content: center; text-align: center; } /* Doorway */ .door__cards { grid-template-columns: 1fr; } .door__card--a { border-bottom: none; } .door__card { padding: 36px 26px 40px; } /* Pillar grids */ .pillars--3, .pillars--2 { grid-template-columns: 1fr; gap: 36px; } /* Stats bar */ .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 28px 18px; } .stats__cell { padding: 18px; border-left: none; } .stats__cell:nth-child(2n+1) { border-right: 1px solid rgba(224, 168, 120, 0.18); } .stats__num { font-size: clamp(28px, 9vw, 40px); } .stats__lab { font-size: 10px; } /* Two-column content */ .twocol { columns: 1; } /* Section padding */ .section { padding: 64px 0; } /* Pull quotes */ .pull { padding: 56px 0; } .pull__q { font-size: clamp(22px, 6.5vw, 30px); } /* CTA banner */ .cta-banner { padding: 64px 20px; } .cta-banner h2 { font-size: clamp(26px, 7vw, 34px); } .cta-banner p { font-size: 15px; padding: 0 12px; } .cta-banner .btn { width: 100%; max-width: 320px; margin: 0 auto; justify-content: center; } /* Footer */ .foot { padding: 56px 0 32px; } .foot__top { grid-template-columns: 1fr; gap: 36px; } .foot__cols { grid-template-columns: repeat(2, 1fr); gap: 28px; } .foot__mark img { width: 48px !important; height: 48px !important; } .foot__disclosure { font-size: 12px; line-height: 1.55; } .foot__bottom { flex-direction: column; gap: 8px; align-items: flex-start; } /* Footer links: legible size + ~44px-tall tap rows for touch. Extra specificity (.foot …) and !important beat the site-wide underline rule that forces display:inline / padding-bottom:2px further down the file. */ .foot .foot__col a.foot__link, .foot .foot__cols a { font-size: 15px; display: inline-block !important; padding: 12px 0 !important; } .foot__col li, .foot__cols li { margin-bottom: 0; line-height: 1.2; } /* Buttons — proper touch targets, full-width when alone in a row */ .btn { padding: 13px 22px; font-size: 13px; min-height: 44px; } .cta { font-size: 16px; } /* Charts & SVGs — never overflow */ svg, .chart-frame svg { max-width: 100%; height: auto; } /* Tables — horizontal scroll when too wide */ table { font-size: 13px; } .arch-table, .ds-type { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* Phone portrait */ @media (max-width: 520px) { .wrap { padding-left: 20px; padding-right: 20px; } .narrow { padding-left: 18px; padding-right: 18px; } /* Stats single column */ .stats__grid { grid-template-columns: 1fr; } .stats__cell { border-left: none; border-right: none !important; border-top: 1px solid var(--line-dark); padding: 22px 0; } .stats__cell:first-child { border-top: none; } /* Footer single column */ .foot__cols { grid-template-columns: 1fr; gap: 24px; } .foot__disclosure { padding: 18px 0; } /* Hero tighter */ .hero { padding: 48px 0 40px; } .hero__lede-a, .hero__lede-b { font-size: clamp(26px, 8.5vw, 34px); } /* Section padding */ .section { padding: 48px 0; } /* Pillar gap */ .pillars { gap: 28px; } /* Header pad */ .head__in { padding: 10px 16px; } .head__mark img { width: 60px !important; height: 60px !important; } .head__mark canvas { width: 56px !important; height: 56px !important; } /* Door cards */ .door__card { padding: 36px 22px 44px; } .door__head { font-size: clamp(24px, 7vw, 30px); } /* CTA banner */ .cta-banner { padding: 48px 16px; } /* Buttons */ .btn { padding: 12px 20px; font-size: 12px; } } /* ============================================================ CANONICAL HEADER NAV — active state + animated underline ============================================================ */ .head__nav { display: flex; gap: clamp(10px, 1.6vw, 21px); align-items: center; list-style: none; margin: 0; padding: 0; } .head__nav li { margin: 0; } .head__nav a { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); padding: 8px 14px; position: relative; transition: color var(--duration) var(--ease); } /* Older animated underline bar removed — the primary+secondary nav uses a color change + a CSS-triangle dropdown affordance instead. Keeping the rule here as a no-op so anything that targets `.head__nav a::after` can be overridden cleanly. */ .head__nav a::after { content: none; background: transparent; height: 0; transform: none; } .head__nav a:hover { color: var(--wax); } .head__nav a.is-active { color: var(--wax); } /* Portal header — Coal ground, amber active state */ .head--portal { background: rgba(11, 21, 24, 0.92) !important; border-bottom: 1px solid rgba(224, 168, 120, 0.18) !important; } .head--portal .head__word { color: var(--marrow); } .head--portal .head__nav a { color: rgba(251, 247, 236, 0.6); } .head--portal .head__nav a:hover, .head--portal .head__nav a.is-active { color: var(--accent-on-dark); } /* Portal nav no longer paints the wax bar — the colour change carries the active state. */ /* ============================================================ ADDITIONAL DROP SHADOWS — heroes, figures, pull quotes, forms ============================================================ */ /* Hero panels — soft elevated shadow at base */ .hero, .hero--a, .hero--b, .portal-hero { box-shadow: 0 18px 32px -16px rgba(11, 21, 24, 0.16); position: relative; } /* Pull quotes — slight elevation */ .pull, .pullquote { box-shadow: inset 0 0 0 1px rgba(217, 210, 191, 0.5); } .pull__q, .pullquote__quote { text-shadow: none !important; } /* Form inputs — pressed-into-paper inset */ input[type="text"], input[type="email"], textarea { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(217, 210, 191, 0.5); transition: box-shadow 0.2s ease; } input[type="text"]:focus, input[type="email"]:focus, textarea:focus { outline: none; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.10), inset 0 0 0 1px var(--mu), 0 0 0 3px rgba(114, 47, 42, 0.25); } /* Stats bar cells — dimensional pressed numbers */ .stats__cell, .wf-stats__c { box-shadow: inset 0 1px 0 rgba(224, 168, 120, 0.08); } /* Figures with images — caption-anchored shadow */ figure img, .photo-tile__img img { box-shadow: 0 6px 14px rgba(11, 21, 24, 0.18), 0 14px 40px rgba(11, 21, 24, 0.10); } /* Gate notice — dramatic Coal-on-Coal elevation */ .gate, .wf-gate { box-shadow: inset 0 1px 0 rgba(224, 168, 120, 0.10), 0 8px 24px rgba(0, 0, 0, 0.35), 0 24px 64px rgba(0, 0, 0, 0.20); } /* ============================================================ ADDITIONAL ANIMATIONS — scroll progress, door cards, etc. ============================================================ */ @keyframes door-card-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .door__card { animation: door-card-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards; } .door__card--b { animation-delay: 0.12s; } @keyframes section-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } .hero, .hero--a, .hero--b, .portal-hero { animation: section-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; } /* Scroll-progress bar at the top of the viewport */ .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--wax) 0%, var(--wax) 100%); transform-origin: left; transform: scaleX(var(--p, 0)); z-index: 200; transition: transform 0.05s linear; pointer-events: none; } /* Footer link animated underline — already added; ensure it's visible here too */ .foot__col a.foot__link { position: relative; display: inline; padding-bottom: 2px; } .foot__col a.foot__link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .foot__col a.foot__link:hover::after { transform: scaleX(1); } /* Door card CTA hover — gap opens AND color glow */ .door__cta { transition: gap 0.3s ease, color 0.3s ease, text-shadow 0.3s ease; } .door__cta:hover { text-shadow: 0 0 14px rgba(114, 47, 42, 0.4); } @media (prefers-reduced-motion: reduce) { .door__card, .hero, .hero--a, .hero--b, .portal-hero { animation: none !important; } .scroll-progress { display: none; } } /* ============================================================ MODULE ANIMATIONS — staggered reveal, hover micro-motion Default state: visible (so content NEVER disappears). When the grid enters the viewport, JS adds .module-in to it, children fade-up with sequential delay. ============================================================ */ /* Entrance uses the independent `translate` property (NOT `transform`) so it composes with the :hover `transform` lift instead of overriding it. With fill-mode both, an entrance that animated `transform` would permanently pin `transform:none` onto every card and kill the hover lift. */ @keyframes module-rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } } @keyframes module-fade { from { opacity: 0; } to { opacity: 1; } } /* When a grid receives .module-in (JS-toggled), animate its children */ .module-in > *, .pillars.module-in > *, .wf-3.module-in > *, .wf-2.module-in > *, .modcat.module-in > *, .photo-grid.module-in > *, .annos.module-in > *, .std-grid.module-in > *, .grad-grid.module-in > *, .motion-grid.module-in > *, .auto-motion.module-in > *, .deck-track.module-in > *, .swatches.module-in > * { animation: module-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; } .module-in > *:nth-child(1) { animation-delay: 0.00s; } .module-in > *:nth-child(2) { animation-delay: 0.08s; } .module-in > *:nth-child(3) { animation-delay: 0.16s; } .module-in > *:nth-child(4) { animation-delay: 0.24s; } .module-in > *:nth-child(5) { animation-delay: 0.32s; } .module-in > *:nth-child(6) { animation-delay: 0.40s; } .module-in > *:nth-child(7) { animation-delay: 0.48s; } .module-in > *:nth-child(8) { animation-delay: 0.56s; } /* IA tree rows reveal with stagger when parent has .module-in */ .ia-kids.module-in .ia-row { animation: module-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } .ia-kids.module-in .ia-row:nth-child(1) { animation-delay: 0.00s; } .ia-kids.module-in .ia-row:nth-child(2) { animation-delay: 0.05s; } .ia-kids.module-in .ia-row:nth-child(3) { animation-delay: 0.10s; } .ia-kids.module-in .ia-row:nth-child(4) { animation-delay: 0.15s; } .ia-kids.module-in .ia-row:nth-child(5) { animation-delay: 0.20s; } .ia-kids.module-in .ia-row:nth-child(6) { animation-delay: 0.25s; } .ia-kids.module-in .ia-row:nth-child(7) { animation-delay: 0.30s; } .ia-kids.module-in .ia-row:nth-child(8) { animation-delay: 0.35s; } /* Stat cells reveal sequentially when parent grid is .module-in */ .stats__grid.module-in .stats__cell, .wf-stats__grid.module-in .wf-stats__c { animation: module-fade 0.5s ease-out both; } .stats__grid.module-in .stats__cell:nth-child(1), .wf-stats__grid.module-in .wf-stats__c:nth-child(1) { animation-delay: 0.00s; } .stats__grid.module-in .stats__cell:nth-child(2), .wf-stats__grid.module-in .wf-stats__c:nth-child(2) { animation-delay: 0.10s; } .stats__grid.module-in .stats__cell:nth-child(3), .wf-stats__grid.module-in .wf-stats__c:nth-child(3) { animation-delay: 0.20s; } .stats__grid.module-in .stats__cell:nth-child(4), .wf-stats__grid.module-in .wf-stats__c:nth-child(4) { animation-delay: 0.30s; } /* Card hover — Wax-edge glow inset */ .wf-card, .pillar, .photo-tile, .chart-frame, .anno, .std-card, .mod, .memo, .door__card, .portal-card, .grad-card, .motion-card, .auto-motion__card { position: relative; } .wf-card::before, .pillar::before, .photo-tile::before, .chart-frame::before, .anno::before, .std-card::before, .mod::before, .memo::before, .door__card::before, .portal-card::before, .grad-card::before, .motion-card::before, .auto-motion__card::before { content: ''; position: absolute; inset: 0; border: 1px solid transparent; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 0 rgba(114, 47, 42, 0); transition: border-color 0.52s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.52s cubic-bezier(0.16, 1, 0.3, 1); } @media (hover: hover) { .wf-card:hover::before, .pillar:hover::before, .photo-tile:hover::before, .chart-frame:hover::before, .anno:hover::before, .std-card:hover::before, .mod:hover::before, .memo:hover::before, .door__card:hover::before, .portal-card:hover::before, .grad-card:hover::before, .motion-card:hover::before, .auto-motion__card:hover::before { border-color: rgba(114, 47, 42, 0.55); box-shadow: 0 0 0 1px rgba(114, 47, 42, 0.10), 0 0 22px rgba(114, 47, 42, 0.14); } } @media (prefers-reduced-motion: reduce) { .module-in > *, .ia-kids.module-in .ia-row, .stats__grid.module-in .stats__cell, .wf-stats__grid.module-in .wf-stats__c { animation: none !important; } } /* ============================================================ SPACING RHYTHM — even cadence throughout the document ============================================================ */ :root { --rhythm-1: 16px; /* tight inter-element */ --rhythm-2: 24px; /* default inter-element */ --rhythm-3: 32px; /* between text groups */ --rhythm-4: 48px; /* between sub-sections within a section */ --rhythm-5: 64px; /* between major sub-sections */ --rhythm-6: 96px; /* between page sections (mobile) */ --rhythm-7: 128px; /* between page sections (desktop) */ } /* All sub-headings get consistent rhythm */ .sub-h { margin: var(--rhythm-5) 0 var(--rhythm-2); padding-bottom: 10px; } .sub-h:first-of-type { margin-top: var(--rhythm-3); } /* Notes and primary callouts always have rhythm space below */ .note { margin-bottom: var(--rhythm-3); } /* Grids — uniform gap */ .pillars, .wf-3, .wf-2, .modcat, .photo-grid, .annos, .std-grid, .grad-grid, .motion-grid, .auto-motion, .swatches { gap: var(--rhythm-2); margin-top: var(--rhythm-2); } /* Section frames inside the doc — uniform vertical padding */ .doc-section { padding-top: var(--rhythm-7); padding-bottom: var(--rhythm-7); } @media (max-width: 900px) { .doc-section { padding-top: var(--rhythm-6); padding-bottom: var(--rhythm-6); } } /* Section heros + section sub-sub uniform spacing */ .sec-h { margin: 0 0 12px; } .sec-sub { margin: 0 0 var(--rhythm-4); } /* Built-page section uniformity */ .section { padding: var(--rhythm-7) 0; } .section--marrow + .section, .section + .section--marrow, .section--coal + .section, .section + .section--coal { padding-top: var(--rhythm-6); } /* Hero band spacing inside built pages */ .hero, .hero--a, .hero--b, .portal-hero { padding-top: var(--rhythm-6); padding-bottom: var(--rhythm-6); } /* Heading-to-body spacing */ h1 + p, h2 + p, h3 + p, .sec-h + p, .sec-h + .note { margin-top: var(--rhythm-2); } p + p { margin-top: 0; } /* ============================================================ PRINCIPLE CARDS (cover) — included in module-in cascade ============================================================ */ .principles-grid { margin-top: 32px; } .principle-card { position: relative; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease; } .principle-card::before { content: ''; position: absolute; inset: 0; border: 1px solid transparent; pointer-events: none; transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .principle-card:hover { transform: translateY(-3px); background: #FDF9EE; } .principle-card:hover::before { border-color: rgba(114, 47, 42, 0.45); } /* When the grid enters the viewport, cascade in */ .principles-grid.module-in > * { animation: module-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; } .principles-grid.module-in > *:nth-child(1) { animation-delay: 0.00s; } .principles-grid.module-in > *:nth-child(2) { animation-delay: 0.10s; } .principles-grid.module-in > *:nth-child(3) { animation-delay: 0.20s; } /* ============================================================ ADDITIONAL MODULE ANIMATIONS — more places, same pattern ============================================================ */ /* Roadmap items (the appendix gate) */ .roadmap.module-in .rm { animation: module-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } .roadmap.module-in .rm:nth-child(1) { animation-delay: 0.00s; } .roadmap.module-in .rm:nth-child(2) { animation-delay: 0.08s; } .roadmap.module-in .rm:nth-child(3) { animation-delay: 0.16s; } .roadmap.module-in .rm:nth-child(4) { animation-delay: 0.24s; } .roadmap.module-in .rm:nth-child(5) { animation-delay: 0.32s; } .roadmap.module-in .rm:nth-child(6) { animation-delay: 0.40s; } /* Module catalog rows */ .modcat.module-in .mod { animation: module-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; } .modcat.module-in .mod:nth-child(1) { animation-delay: 0.00s; } .modcat.module-in .mod:nth-child(2) { animation-delay: 0.05s; } .modcat.module-in .mod:nth-child(3) { animation-delay: 0.10s; } .modcat.module-in .mod:nth-child(4) { animation-delay: 0.15s; } .modcat.module-in .mod:nth-child(5) { animation-delay: 0.20s; } .modcat.module-in .mod:nth-child(6) { animation-delay: 0.25s; } .modcat.module-in .mod:nth-child(7) { animation-delay: 0.30s; } .modcat.module-in .mod:nth-child(8) { animation-delay: 0.35s; } .modcat.module-in .mod:nth-child(9) { animation-delay: 0.40s; } .modcat.module-in .mod:nth-child(10) { animation-delay: 0.45s; } .modcat.module-in .mod:nth-child(11) { animation-delay: 0.50s; } .modcat.module-in .mod:nth-child(12) { animation-delay: 0.55s; } /* Glossary rows — slide in from left */ .gloss.module-in .gloss__row { animation: gloss-slide 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes gloss-slide { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } } .gloss.module-in .gloss__row:nth-child(1) { animation-delay: 0.00s; } .gloss.module-in .gloss__row:nth-child(2) { animation-delay: 0.04s; } .gloss.module-in .gloss__row:nth-child(3) { animation-delay: 0.08s; } .gloss.module-in .gloss__row:nth-child(4) { animation-delay: 0.12s; } .gloss.module-in .gloss__row:nth-child(5) { animation-delay: 0.16s; } .gloss.module-in .gloss__row:nth-child(6) { animation-delay: 0.20s; } .gloss.module-in .gloss__row:nth-child(7) { animation-delay: 0.24s; } .gloss.module-in .gloss__row:nth-child(8) { animation-delay: 0.28s; } .gloss.module-in .gloss__row:nth-child(9) { animation-delay: 0.32s; } /* Table rows fade in sequentially */ .arch-table.module-in tbody tr { animation: module-fade 0.5s ease-out both; } .arch-table.module-in tbody tr:nth-child(1) { animation-delay: 0.00s; } .arch-table.module-in tbody tr:nth-child(2) { animation-delay: 0.04s; } .arch-table.module-in tbody tr:nth-child(3) { animation-delay: 0.08s; } .arch-table.module-in tbody tr:nth-child(4) { animation-delay: 0.12s; } .arch-table.module-in tbody tr:nth-child(5) { animation-delay: 0.16s; } .arch-table.module-in tbody tr:nth-child(6) { animation-delay: 0.20s; } .arch-table.module-in tbody tr:nth-child(7) { animation-delay: 0.24s; } .arch-table.module-in tbody tr:nth-child(n+8){ animation-delay: 0.28s; } .arch-table tr:hover { background: rgba(114, 47, 42, 0.03); } /* Full slide pages stagger in the deck */ .fullslide.module-in .fullslide__page { animation: module-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; } /* Disclosure rows fade in */ .discrow { transition: background 0.2s ease; } .discrow:hover { background: rgba(114, 47, 42, 0.025); } /* Spec-strip rows (kvrow) sequential */ .kv.module-in .kv__cell { animation: module-fade 0.4s ease-out both; } .kv.module-in .kv__cell:nth-child(1) { animation-delay: 0.00s; } .kv.module-in .kv__cell:nth-child(2) { animation-delay: 0.08s; } .kv.module-in .kv__cell:nth-child(3) { animation-delay: 0.16s; } .kv.module-in .kv__cell:nth-child(4) { animation-delay: 0.24s; } /* Budget cells (perf budget in standards) */ .budget.module-in .budget__c { animation: module-fade 0.4s ease-out both; } .budget.module-in .budget__c:nth-child(1) { animation-delay: 0.00s; } .budget.module-in .budget__c:nth-child(2) { animation-delay: 0.08s; } .budget.module-in .budget__c:nth-child(3) { animation-delay: 0.16s; } .budget.module-in .budget__c:nth-child(4) { animation-delay: 0.24s; } /* Email cards sequential */ .wf-3.module-in .eml, .wf-2.module-in .eml { animation: module-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; } @media (prefers-reduced-motion: reduce) { .principle-card, .principles-grid > *, .roadmap.module-in .rm, .modcat.module-in .mod, .gloss.module-in .gloss__row, .arch-table.module-in tbody tr, .fullslide.module-in .fullslide__page, .kv.module-in .kv__cell, .budget.module-in .budget__c { animation: none !important; transform: none !important; } } /* ============================================================ PADDING / RHYTHM TIGHTENING — even cadence everywhere ============================================================ */ /* Cover-section internal rhythm */ .cover { padding-bottom: var(--rhythm-7, 128px); } .cover h1 { margin-bottom: 18px; } .cover > p { margin-bottom: 0; } /* Cards uniform internal padding */ .wf-card, .pillar, .photo-tile__cap, .anno, .std-card, .mod, .memo, .portal-card, .grad-card, .motion-card, .auto-motion__card, .principle-card { padding: 28px 26px; } /* Smaller cards (compact contexts) */ .wf-card { padding: 22px 24px; } /* Sub-section spacing */ .sub-h { margin-top: var(--rhythm-5, 64px); margin-bottom: var(--rhythm-2, 24px); padding-bottom: 10px; } .sub-h:first-of-type { margin-top: var(--rhythm-3, 32px); } /* Tables breathe more */ .arch-table th, .arch-table td { padding: 14px 16px; } .arch-table { margin-top: 8px; } /* Notes have consistent bottom rhythm */ .note { padding: 24px 28px; margin-bottom: var(--rhythm-3, 32px); } /* Grids: 24px gap is the standard */ .pillars, .wf-3, .wf-2, .modcat, .photo-grid, .annos, .std-grid, .grad-grid, .motion-grid, .auto-motion, .swatches, .principles-grid { gap: 24px; } /* Hairline-divided grids: 1px gap (these are intentionally seamless) */ .principles-grid, .pillars--3.pillars { gap: 1px; } /* Hero/section padding scale up on desktop */ @media (min-width: 1200px) { .doc-section { padding-top: 144px; padding-bottom: 144px; } } /* ============================================================ MOBILE RESPONSIVENESS — generic safeguards (added 2026-06-02) Many sections use INLINE multi-column grids and a few inline white-space:nowrap headings. These rules make those ad-hoc layouts collapse cleanly on small screens so nothing overflows (html has overflow-x:hidden, so overflow = clipped). ============================================================ */ /* Forced single-line headings/labels wrap on tablets and below. */ @media (max-width: 1024px) { [style*="white-space:nowrap"], [style*="white-space: nowrap"] { white-space: normal !important; } } /* Any inline multi-column grid becomes a single column on phones and small tablets, so two/three/four-up sections stack. */ @media (max-width: 760px) { [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } /* Tables keep full width and don't push the viewport. */ table { width: 100% !important; } } /* === Sans headline system =========================================== Headlines move to Space Grotesk (--head), set roman. Newsreader (--display) stays for body, pull-quotes, captions, letters, and figure lines. The font-style:normal !important neutralises inline italics on section headings; Space Grotesk has no true italic, so synthetic oblique is avoided. */ h1, h2, h3, h4, .hero__lede-a, .hero__lede-b, .door__head, .door-prose__lede, .pillar__title, .sec-h, .sl-h, .wf__h, .hero__heading { font-family: var(--head) !important; font-style: normal !important; letter-spacing: -0.012em; } /* === Homepage-aligned typography & layout ============================= Every page's headline + body copy brought into line with the Doorway: left-aligned reading column, one headline scale, one body treatment. (Sans family + roman style already set by the block above.) */ /* Reading column: .narrow keeps its original 720px width (text AND figures stay one tidy column), but the whole column is hung LEFT to the Doorway's position instead of centred. Full-width parents only; falls back to the gutter on narrow viewports. */ .narrow { margin-left: max(0px, calc((100% - 1100px) / 2)); margin-right: auto; } /* All content bands share the Doorway intro's 1100px width so every headline, body, and section heading starts at the same left edge (left ~104 at desktop). Header/footer keep the full 1200px chrome width. */ .hero .wrap, .hero .narrow, .section .wrap, .section .narrow, .pull .wrap, .cta-banner .wrap, .stats .wrap { max-width: 1100px; } /* Page H1s match the Doorway lede; section H2s sit one consistent step below. */ .section h1:not([class]), .narrow h1:not([class]) { font-size: clamp(34px, 5vw, 56px) !important; line-height: 1.08; letter-spacing: -0.005em; max-width: 22ch; } .section h2:not([class]), .narrow h2:not([class]), .cta-banner h2 { font-size: clamp(28px, 3.4vw, 40px) !important; line-height: 1.14; letter-spacing: -0.008em; } /* One reading treatment for body copy, matching the Doorway body. Forced over inline font-size/line-height (pages carried inline 18px/19px). Colour left alone so intentionally-muted intros keep their tone. */ .narrow p:not([class]), .twocol p:not([class]) { font-size: clamp(17px, 1.4vw, 19px) !important; line-height: 1.72 !important; } /* Corner radius — 4px on all buttons, CTAs, and cards (ratified 06.29.26) */ .btn, .btn--ghost, .btn--ondark, .head__cta, .wf__btn, .wf__navcta, .cta, .mod, .memo, .pillar, .gate, .door__card, .note, .feature-card, .portal-card, .chart-frame, .photo-tile { border-radius: var(--radius); } /* ============================================================ Wax-seal button treatment (07.17.26) Every filled CTA reads as pressed oxblood wax, echoing the mark: a molten radial fill (warm specular near the top-left, pooled dark toward the base), a raised specular top rim, and the seal's own cool contact shadow beneath. Tokens only — --wax / --wax-soft, the #FFFAEB cream, and the rgba(20,10,4) / seal-shadow values already used throughout v2.css. Wins by source order, so it also fills the .btn--ondark CTAs (they carry .btn) uniformly. ============================================================ */ .btn, .cta, .head__cta, .head__nav li a.head__cta, .wf__btn { color: #FFFAEB; border: 1px solid var(--mu); background: var(--mu); box-shadow: /* subtle raised contact shadow, cool and neutral */ 0 1px 2px rgba(0, 20, 27, 0.22), 0 3px 8px rgba(0, 20, 27, 0.12); } .btn:hover, .cta:hover, .cta:focus-visible, .head__cta:hover, .head__cta:focus-visible, .wf__btn:hover { /* Hover: the teal lifts to Hound (a clear, obvious state change), label to pure white. */ color: #FFFFFF !important; background: var(--hound); border-color: var(--hound); box-shadow: 0 2px 4px rgba(0, 20, 27, 0.24), 0 6px 14px rgba(0, 20, 27, 0.14); } .btn:active, .cta:active, .head__cta:active, .wf__btn:active { /* Pressed: the button sinks a hair into the paper. */ transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 20, 27, 0.30), 0 1px 1px rgba(0, 20, 27, 0.28); } /* ------------------------------------------------------------ .btn--ondark restored to its true on-dark form (07.18.26). The wax-seal treatment above fills every .btn; on dark / image / coal / mu grounds that produces two wax fills in one view (nav pill + hero/gate primary) and is off-brand. On dark grounds the primary is a clean cream outline, so the wax nav pill stays the only wax in view. Paper-ground .btn / .cta keep the wax seal. Placed after the wax block so it wins by source order. */ .btn--ondark { color: #FFFAEB; border: 1px solid var(--marrow); background: transparent; box-shadow: none; } .btn--ondark:hover, .btn--ondark:focus-visible { color: var(--mu) !important; /* beats the wax hover's #FFFFFF !important */ border-color: var(--marrow); background: var(--marrow); box-shadow: none; } .btn--ondark:active { transform: translateY(1px); box-shadow: none; } /* Mobile only (<=860px): the wax seal is the SOLE top-nav logo, and the animated wordmark type-treatment is removed — there isn't room for both, so the seal carries the brand alone. IV 07.17.26. The seal carries an inline opacity:0 that desktop JS fades in; here we force it visible so it never depends on the type animation running. */ @media (max-width: 860px) { .head__brand .head__mark { display: inline-flex !important; opacity: 1 !important; } .head__brand .head__mark img { width: 46px !important; height: 46px !important; } .head__brand .head__word { display: none !important; } } /* ============================================================ 06.29.26 — overrides (scroll-cue kill switch removed 07.03.26, chevrons re-enabled sitewide at IV's request) Widow/orphan control: balance short blocks (headlines), and use pretty wrapping on body text so no single word is left alone on a final line. ============================================================ */ h1, h2, h3, h4, .hero__lede-a, .hero__lede-b, .door__head, .door-prose__lede, .pillar__title, .sec-h, .sl-h, .wf__h, .hero__heading, .pull__q, .cta-banner h2, .door__introline, .figline__txt, .dr-hero h1, .gate__title, .letter__sign { text-wrap: balance; } p, li, blockquote, figcaption, .hero__body, .door__body, .pillar__desc, .anno__d, .memo__abstract, .episode__story, .foot__disclosure p, .dr-hero p, .note p { text-wrap: pretty; } /* ============================================================ 06.29.26 — seal shadow, animated blue gradient, pull centering ============================================================ */ /* slight drop shadow on hero/section wax seals */ .mark-img--md img, .mark-img--lg img { filter: drop-shadow(0 3px 6px rgba(11,21,24,0.28)) drop-shadow(0 8px 16px rgba(11,21,24,0.14)) !important; } /* animated gradient on blue sections */ @keyframes mh-blue-pan { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } } .section--blue { background-size: 200% 200% !important; animation: mh-blue-pan 16s ease-in-out infinite; } /* truly center pull quotes (720px child was pinned left) */ .pull__q, .pull__attr { margin-left: auto; margin-right: auto; } @media (prefers-reduced-motion: reduce) { .section--blue { animation: none !important; } } /* ============================================================ 07.04.26 — blue sections: darker ground + hover elevation. Darker teal-coal gradient sitewide; soft drop shadow on BOTH top and bottom edges so blue bands appear to float above the vellum. !important so it also wins over inline shadows. ============================================================ */ .section--blue { background-image: linear-gradient(160deg, #123B47 0%, #002B3A 52%, #06131A 100%) !important; position: relative; z-index: 2; box-shadow: 0 -14px 28px rgba(11, 21, 24, 0.20), 0 -28px 52px rgba(11, 21, 24, 0.10), 0 14px 28px rgba(11, 21, 24, 0.20), 0 28px 52px rgba(11, 21, 24, 0.10) !important; } /* ============================================================ 07.05.26 — nav collapse breakpoint fix. The hamburger collapse used to trigger at <=860px, which desktop windows hit via zoom or split-screen ("nav is gone"). Between 701-860px the full nav now stays visible in a compact size; the hamburger is reserved for true phone widths (<=700px). ============================================================ */ @media (min-width: 701px) and (max-width: 860px) { .head__nav li:not(:last-child) { display: block; } .head__nav { gap: 2px; } .head__nav > li > a { font-size: 10px; letter-spacing: 0.05em; padding: 8px 5px; } .head__cta { padding: 8px 12px !important; font-size: 10px; } .head__burger { display: none !important; } .head__word { display: none; } /* seal alone carries the brand at this width */ /* Right-align the hidden dropdowns so their absolute box opens on-screen; the default left:-14px pushes the rightmost panel past the viewport edge and creates horizontal scroll at tablet widths. */ .head__subnav { left: auto; right: -14px; } } /* ============================================================ 07.05.26 — MOBILE RESPONSIVENESS PASS The video heroes were fixed at 600px with absolutely-positioned overlays; on phones the stacked overlay (headline + copy + CTA + stats) overflowed the box. Below 760px heroes size to content with the video as a covering background. Plus hero-seal, banner, and spacing fixes for small screens. ============================================================ */ @media (max-width: 760px) { /* video heroes: grow with content; video stays as full-bleed bg */ .video-hero { height: auto !important; min-height: 480px; display: flex; flex-direction: column; justify-content: flex-end; } .video-hero > .wrap { position: relative !important; inset: auto !important; left: auto !important; right: auto !important; bottom: auto !important; padding-top: 220px; padding-bottom: 36px !important; display: block !important; } .video-hero h1 { font-size: clamp(26px, 8vw, 34px) !important; max-width: none !important; } .video-hero p { font-size: 15px !important; line-height: 1.6 !important; } /* homepage hero stat modules: 2x2 instead of 1-per-row */ .video-hero .wrap div[style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; gap: 16px !important; } /* deepen the scrim slightly since text sits over more of the frame */ .video-hero > div[style*="linear-gradient"] { background: linear-gradient(to top, rgba(11,21,24,0.94) 0%, rgba(11,21,24,0.62) 55%, rgba(11,21,24,0.18) 85%, rgba(11,21,24,0.05) 100%) !important; } } @media (max-width: 900px) { /* doorway hero: seal stacks above headline; reserve room for the caption */ .door-hero__top { margin: 0 0 56px !important; } .door-hero__seal-link { margin-bottom: 52px; align-self: center; } .door-hero__seal { margin-right: 0 !important; } .door-hero__seal-link .cta { transform: translateX(-50%) !important; } } @media (max-width: 760px) { /* doorway blue banner: relax the one-line constraint cleanly */ .section--blue[aria-label="The verification perimeter"] span { white-space: normal !important; } /* timeline art + portraits scale */ #methodology-timeline .stl__artcol { width: min(100%, 260px) !important; } /* the-mark page facsimile breathing room */ .facsim { padding: 26px 18px 20px !important; } /* footer stacks (rules exist; tighten the login column spacing) */ .foot__col .foot__login { margin-top: 6px; } } @media (max-width: 520px) { .video-hero { min-height: 420px; } .video-hero > .wrap { padding-top: 180px; } .video-hero .wrap div[style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; } .door-hero__seal { width: 120px !important; height: 120px !important; } } /* ============================================================ MOBILE OPTIMIZATION PASS — 2026-07-20 Touch ergonomics, legibility floor, scroll affordances. Tokens only. Desktop is deliberately untouched: touch rules are gated on (pointer: coarse), not on viewport width. Every selector below was verified against live markup. ============================================================ */ /* --- 1. Touch targets ------------------------------------------------ WCAG 2.5.5 asks for 44x44 CSS px. Delivered via min-height, so type sizes, colour, and the visual rhythm stay exactly as designed. */ @media (pointer: coarse) { /* Footer utility links measured 19px tall. */ .foot__bottom a, .foot__credit, .foot__col a.foot__link, .foot__cols a, .foot__login { display: inline-flex; align-items: center; min-height: 44px; } /* Footer list rhythm absorbs the now-taller rows. */ .foot__cols li { margin-bottom: 0; } /* FAQ / fact-sheet disclosure rows measured 34px. */ summary { min-height: 44px; display: flex; align-items: center; } /* Team "Read more" bio toggles measured 14px. */ .tm-toggle { min-height: 44px; } /* Performance chart index switches measured 29px. JS-generated: identified by their data-t attribute. */ button[data-t] { min-height: 44px; } /* Attestation checkbox: larger hit area, same visual weight. Element carries an inline width/height, hence the override. */ input[type="checkbox"] { width: 22px !important; height: 22px !important; } /* Soften the tap flash; :focus-visible still governs accessibility. */ a, button, summary, label, input, select, textarea { -webkit-tap-highlight-color: color-mix(in srgb, var(--wax) 12%, transparent); } } /* --- 2. Legibility floor -------------------------------------------- The 11px mono label is a deliberate brand device and is preserved. Only sub-11px incidental text is raised, and only on small screens. */ @media (max-width: 760px) { .stats__lab, .facsim__fn, .facsim__journal, .kt-label, caption, th { font-size: 11px; } } /* --- 3. Horizontal scroll affordance -------------------------------- Wide tables sit in overflow-x:auto wrappers and scrolled with no visual cue. A right-edge fade signals more content and retracts as the scroll reaches the end (background-attachment: local). */ @media (max-width: 860px) { div[style*="overflow-x:auto"], div[style*="overflow-x: auto"] { -webkit-overflow-scrolling: touch; scrollbar-width: thin; background: linear-gradient(to right, var(--marrow) 30%, transparent) left center, linear-gradient(to left, var(--marrow) 30%, transparent) right center, linear-gradient(to right, var(--line), transparent) left center, linear-gradient(to left, var(--line), transparent) right center; background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; } } /* --- 4. Touch scrolling hygiene -------------------------------------- */ @media (pointer: coarse) { pre, code, table { max-width: 100%; } body { -webkit-text-size-adjust: 100%; } } /* --- 5. Subscribe form touch corrections ----------------------------- Both elements carry inline styles, hence the overrides. */ @media (pointer: coarse) { /* Checkbox sat in a flex row and was being squeezed to 13px wide. */ #sub-attest { flex-shrink: 0; } /* Email field measured 39px; padding lifts it over the 44px line. */ #sub-email { padding-top: 13px !important; padding-bottom: 13px !important; } } /* --- 6. Article back-link ------------------------------------------- Standalone "← Research index" control measured 16px tall. */ @media (pointer: coarse) { a[href="/institutional/research"] { display: inline-flex; align-items: center; min-height: 44px; } } /* ============================================================ SEO PASS — 2026-07-20 — semantic heading corrections Section headings were marked

and the FAQ page had none. Tag levels are now correct for search engines and screen readers; rendered size is deliberately unchanged. These mirror the ".section h1/h2:not([class])" rules above — the added class is what opts them out of the default step. ============================================================ */ .section h2.h--h1-scale, .narrow h2.h--h1-scale { font-size: clamp(34px, 5vw, 56px) !important; line-height: 1.08; letter-spacing: -0.005em; } .section h1.h--h2-scale, .narrow h1.h--h2-scale { font-size: clamp(28px, 3.4vw, 40px) !important; line-height: 1.14; letter-spacing: -0.008em; } /* Visually hidden, still exposed to search engines and screen readers. Used where a page's visible heading is intentionally suppressed by the design but the document still needs a top-level heading. */ .u-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }