/* ========================================================================== rahulhimalian.com — "The Architecture of Public Service" Design system. Authored for this profile; not derived from any template. ========================================================================== */ /* --------------------------------------------------------------- 1. TOKENS */ :root { /* Core palette — midnight navy ground, signal red accent, warm paper */ --ink-900: #070C1B; --ink-800: #0B1226; --ink-700: #111B34; --ink-600: #1A2745; --ink-500: #253558; --ink-400: #35486F; --paper: #F6F4EF; --paper-2: #EFEBE3; --paper-3: #E4DFD4; --signal: #C2172A; /* railway signal red — accent only */ --signal-lo: #9E1222; --signal-hi: #E23B45; --brass: #B08D3F; /* muted metallic gold */ --brass-lo: #8C6E2B; --slate: #5D6A82; --slate-lo: #7C879C; --charcoal: #23282F; /* Semantic */ --bg: var(--paper); --bg-alt: var(--paper-2); --bg-dark: var(--ink-900); --fg: #131A28; --fg-muted: #4E5A70; --fg-faint: #5A6478; --fg-on-dark: #EDEFF4; --fg-on-dark-mu: #A3AEC4; --rule: rgba(19, 26, 40, 0.13); --rule-strong: rgba(19, 26, 40, 0.26); --rule-dark: rgba(237, 239, 244, 0.16); --rule-dark-str: rgba(237, 239, 244, 0.32); /* Type */ --f-display: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif; --f-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --f-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace; /* Rhythm */ --gutter: clamp(1.25rem, 4vw, 3.5rem); --maxw: 1320px; --maxw-text: 66ch; --sec-y: clamp(4.5rem, 9vw, 9rem); /* Motion */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --hdr-h: 72px; } @media (min-width: 1024px) { :root { --hdr-h: 96px; } } /* ------------------------------------------------------------ 2. RESET/BASE */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 16px); } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--f-body); font-size: 1rem; line-height: 1.68; font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4, h5 { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.022em; line-height: 1.1; margin: 0; text-wrap: balance; } figure, blockquote, dl, dd { margin: 0; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } ul, ol { margin: 0; padding: 0; } ::selection { background: var(--signal); color: #fff; } /* Focus — visible, high contrast, never removed */ :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; } .on-dark :focus-visible, .site-header :focus-visible, .site-footer :focus-visible { outline-color: #F2C14E; } .skip-link { position: absolute; left: 1rem; top: -100px; z-index: 200; background: var(--ink-900); color: #fff; padding: 0.8rem 1.25rem; font: 600 0.8rem/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: top 0.2s var(--ease); } .skip-link:focus { top: 1rem; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---------------------------------------------------- 3. AUTH ANTI-FLASH */ /* Protected pages carry class "protected" on . Content stays hidden until the guard confirms authorisation, so nothing is painted before the redirect fires. There is deliberately NO no-js escape hatch here: if the guard cannot run, the content must not be shown at all. */ html.protected body { visibility: hidden; } html.protected.is-authorised body { visibility: visible; } /* The gate needs JavaScript. Without it, show a notice instead of the page. visibility is inherited, so a descendant may re-enable it on its own. */ noscript { visibility: visible; } .nojs-notice { position: fixed; inset: 0; z-index: 999; display: grid; place-content: center; gap: 0.9rem; padding: clamp(1.5rem, 6vw, 3rem); background: var(--ink-900); color: var(--fg-on-dark); text-align: center; } .nojs-notice p { margin: 0; max-width: 42ch; font: 500 0.92rem/1.7 var(--f-body); color: rgba(237,239,244,0.82); } .nojs-notice p:first-child { font: 600 clamp(1.1rem, 3vw, 1.4rem)/1.35 var(--f-display); letter-spacing: -0.02em; color: #fff; } .nojs-notice .rule { width: 44px; height: 2px; background: var(--signal); margin: 0.25rem auto 0.5rem; } /* Grid and flex children must be allowed to shrink below their min-content width, otherwise a wide scrollable child (a route diagram, a table) pushes the whole document sideways on small screens. */ .split > *, .statement-grid > *, .contact-grid > *, .sec-head > *, .offset-figure > *, .hero__top > *, .milestones > *, .briefs > *, .data-strip > *, .route > li, .route > li > *, .record__item > * { min-width: 0; } /* ------------------------------------------------------------ 4. PRIMITIVES */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: 980px; } .section { padding-block: var(--sec-y); position: relative; } .section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); } .on-dark { background: var(--ink-900); color: var(--fg-on-dark); } .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; } .on-dark .lede, .on-dark .body-lg { color: var(--fg-on-dark-mu); } .on-alt { background: var(--bg-alt); } /* Engineering grid — faint blueprint field for dark sections */ .grid-field { position: relative; isolation: isolate; } .grid-field::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(to right, rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.045) 1px, transparent 1px); background-size: 88px 88px; -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 10%, transparent 82%); mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 10%, transparent 82%); pointer-events: none; } /* --------------------------------------------------------- 5. TYPE SCALE */ .eyebrow { font: 500 clamp(0.66rem, 1.1vw, 0.72rem)/1 var(--f-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-faint); display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1.5rem; } .eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--signal); flex: none; } .on-dark .eyebrow { color: var(--fg-on-dark-mu); } .eyebrow--num { gap: 0.9rem; } .eyebrow--num::before { display: none; } .eyebrow .num { color: var(--signal); font-weight: 600; position: relative; padding-right: 0.9rem; } .on-dark .eyebrow .num { color: var(--signal-hi); } .eyebrow .num::after { content: ''; position: absolute; right: 0; top: 50%; width: 1px; height: 11px; transform: translateY(-50%); background: currentColor; opacity: 0.4; } .h-xl { font-size: clamp(2.35rem, 6.4vw, 4.6rem); line-height: 1.02; letter-spacing: -0.035em; } .h-lg { font-size: clamp(1.95rem, 4.4vw, 3.25rem); line-height: 1.06; letter-spacing: -0.03em; } .h-md { font-size: clamp(1.4rem, 2.5vw, 2rem); line-height: 1.16; letter-spacing: -0.022em; } .h-sm { font-size: clamp(1.08rem, 1.6vw, 1.28rem); line-height: 1.28; letter-spacing: -0.014em; } .lede { font-size: clamp(1.06rem, 1.65vw, 1.28rem); line-height: 1.62; color: var(--fg-muted); max-width: 62ch; font-weight: 400; } .body-lg { font-size: clamp(1rem, 1.3vw, 1.075rem); line-height: 1.75; color: var(--fg-muted); max-width: var(--maxw-text); } .body-lg strong, .lede strong { color: var(--fg); font-weight: 600; } .on-dark .body-lg strong, .on-dark .lede strong { color: #fff; } .mono-label { font: 500 0.7rem/1.4 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint); } .on-dark .mono-label { color: var(--fg-on-dark-mu); } /* Sleeper rule — the track-sleeper divider used between major blocks */ .sleepers { height: 8px; background-image: repeating-linear-gradient( to right, var(--rule-strong) 0 1px, transparent 1px 11px ); border: 0; margin: 0; opacity: 0.75; } .on-dark .sleepers { background-image: repeating-linear-gradient(to right, var(--rule-dark-str) 0 1px, transparent 1px 11px); } /* --------------------------------------------------------------- 6. LINKS */ .link-arrow { display: inline-flex; justify-self: start; align-self: start; width: fit-content; align-items: center; gap: 0.6rem; font: 600 0.82rem/1 var(--f-mono); letter-spacing: 0.11em; text-transform: uppercase; text-decoration: none; color: var(--fg); padding-block: 0.35rem; border-bottom: 1px solid var(--rule-strong); transition: color 0.25s var(--ease), border-color 0.25s var(--ease), gap 0.25s var(--ease); } .link-arrow svg { flex: none; transition: transform 0.3s var(--ease-out); } .link-arrow:hover, .link-arrow:focus-visible { color: var(--signal); border-color: var(--signal); gap: 0.85rem; } .link-arrow:hover svg { transform: translateX(3px); } .on-dark .link-arrow { color: #fff; border-color: var(--rule-dark-str); } .on-dark .link-arrow:hover, .on-dark .link-arrow:focus-visible { color: #F2C14E; border-color: #F2C14E; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem; min-height: 50px; padding: 0.85rem 1.6rem; background: var(--ink-900); color: #fff; border: 1px solid var(--ink-900); border-radius: 2px; font: 600 0.8rem/1 var(--f-mono); letter-spacing: 0.13em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease); } .btn:hover, .btn:focus-visible { background: var(--signal); border-color: var(--signal); } .btn--ghost { background: transparent; color: var(--fg); border-color: var(--rule-strong); } .btn--ghost:hover, .btn--ghost:focus-visible { background: transparent; color: var(--signal); border-color: var(--signal); } .on-dark .btn { background: #fff; color: var(--ink-900); border-color: #fff; } .on-dark .btn:hover, .on-dark .btn:focus-visible { background: var(--signal); border-color: var(--signal); color: #fff; } .on-dark .btn--ghost { background: transparent; color: #fff; border-color: var(--rule-dark-str); } .on-dark .btn--ghost:hover, .on-dark .btn--ghost:focus-visible { color: #F2C14E; border-color: #F2C14E; background: transparent; } /* --------------------------------------------------------------- 7. HEADER */ .site-header { position: sticky; top: 0; z-index: 90; background: var(--ink-900); color: var(--fg-on-dark); border-bottom: 1px solid rgba(255,255,255,0.09); } /* Top utility bar */ .util-bar { border-bottom: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.025); font: 500 0.68rem/1 var(--f-mono); letter-spacing: 0.09em; text-transform: uppercase; } .util-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 34px; padding-block: 0.45rem; } .util-bar__note { color: rgba(237,239,244,0.62); display: flex; align-items: center; gap: 0.55rem; } .util-bar__note::before { content: ''; width: 5px; height: 5px; background: var(--signal-hi); border-radius: 50%; flex: none; } .util-bar__links { display: flex; align-items: center; gap: 1.35rem; list-style: none; } .util-bar__links a { color: rgba(237,239,244,0.62); text-decoration: none; transition: color 0.2s var(--ease); padding-block: 0.35rem; } .util-bar__links a:hover, .util-bar__links a:focus-visible { color: #fff; } @media (max-width: 899px) { .util-bar__note { display: none; } .util-bar__inner { justify-content: flex-end; } .util-bar__links { gap: 1.1rem; } } @media (max-width: 419px) { .util-bar__links li:nth-child(2) { display: none; } } /* Main header row */ .masthead { display: flex; align-items: center; justify-content: space-between; gap: clamp(0.75rem, 2vw, 1.5rem); min-width: 0; min-height: calc(var(--hdr-h) - 34px); padding-block: 0.9rem; } .brand { display: flex; align-items: center; gap: 0.9rem; min-height: 44px; min-width: 0; /* allow the brand to shrink before the toggle does */ flex: 0 1 auto; text-decoration: none; color: inherit; } .brand__mark { width: 40px; height: 40px; flex: none; border: 1px solid rgba(255,255,255,0.24); display: grid; place-items: center; position: relative; } .brand__mark::after { content: ''; position: absolute; left: -1px; top: -1px; width: 8px; height: 8px; border-top: 2px solid var(--signal-hi); border-left: 2px solid var(--signal-hi); } .brand__mark span { font: 700 0.82rem/1 var(--f-display); letter-spacing: 0.04em; color: #fff; } .brand__text { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; } .brand__name { font: 700 clamp(1.02rem, 2vw, 1.22rem)/1 var(--f-display); letter-spacing: -0.02em; color: #fff; white-space: nowrap; } .brand__role { font: 500 0.62rem/1.25 var(--f-mono); letter-spacing: 0.13em; text-transform: uppercase; color: rgba(237,239,244,0.66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* On phones the descriptor is dropped so the wordmark always stays whole */ @media (max-width: 479px) { .brand__role { display: none; } } @media (max-width: 359px) { .brand__mark { display: none; } .brand__name { font-size: 1rem; } } /* Desktop navigation */ .nav-primary { display: none; } @media (min-width: 1100px) { .nav-primary { display: block; } .nav-primary ul { display: flex; align-items: center; gap: clamp(0.5rem, 1.4vw, 1.4rem); list-style: none; } .nav-primary a { position: relative; display: block; padding: 0.55rem 0.15rem; font: 500 0.775rem/1 var(--f-body); letter-spacing: 0.01em; color: rgba(237,239,244,0.74); text-decoration: none; white-space: nowrap; transition: color 0.22s var(--ease); } .nav-primary a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--signal-hi); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease-out); } .nav-primary a:hover, .nav-primary a:focus-visible { color: #fff; } .nav-primary a:hover::after, .nav-primary a:focus-visible::after { transform: scaleX(1); } .nav-primary a[aria-current='page'] { color: #fff; font-weight: 600; } .nav-primary a[aria-current='page']::after { transform: scaleX(1); } } .header-cta { display: none; } @media (min-width: 1280px) { .header-cta { display: inline-flex; align-items: center; gap: 0.5rem; flex: none; min-height: 40px; padding: 0.55rem 1.05rem; border: 1px solid rgba(255,255,255,0.26); color: #fff; text-decoration: none; font: 600 0.7rem/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; transition: background 0.22s var(--ease), border-color 0.22s var(--ease); } .header-cta:hover, .header-cta:focus-visible { background: var(--signal); border-color: var(--signal); } } /* Hamburger */ .nav-toggle { display: inline-flex; align-items: center; gap: 0.7rem; flex: none; min-height: 46px; padding: 0.55rem 0.9rem 0.55rem 1rem; background: transparent; border: 1px solid rgba(255,255,255,0.22); color: #fff; cursor: pointer; font: 600 0.68rem/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; transition: border-color 0.22s var(--ease), background 0.22s var(--ease); } .nav-toggle:hover { border-color: rgba(255,255,255,0.5); } @media (min-width: 1100px) { .nav-toggle { display: none; } } .nav-toggle__bars { position: relative; width: 20px; height: 12px; flex: none; } .nav-toggle__bars i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform 0.32s var(--ease-out), opacity 0.2s linear; } .nav-toggle__bars i:nth-child(1) { top: 0; } .nav-toggle__bars i:nth-child(2) { top: 5.25px; } .nav-toggle__bars i:nth-child(3) { top: 10.5px; } .nav-toggle[aria-expanded='true'] .nav-toggle__bars i:nth-child(1) { transform: translateY(5.25px) rotate(45deg); } .nav-toggle[aria-expanded='true'] .nav-toggle__bars i:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded='true'] .nav-toggle__bars i:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); } .nav-toggle__label--close { display: none; } .nav-toggle[aria-expanded='true'] .nav-toggle__label--open { display: none; } .nav-toggle[aria-expanded='true'] .nav-toggle__label--close { display: inline; } @media (max-width: 479px) { .nav-toggle { padding-inline: 0.75rem; } .nav-toggle__label { display: none; } } /* Mobile drawer */ .nav-drawer { position: fixed; inset: var(--hdr-h) 0 0 0; z-index: 88; background: var(--ink-900); border-top: 1px solid rgba(255,255,255,0.09); overflow-y: auto; -webkit-overflow-scrolling: touch; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 0.28s var(--ease), transform 0.32s var(--ease-out), visibility 0.28s; } .nav-drawer.is-open { opacity: 1; visibility: visible; transform: none; } @media (min-width: 1100px) { .nav-drawer { display: none; } } body.nav-locked { overflow: hidden; } .nav-drawer__inner { padding-block: 1.5rem 3rem; } .nav-drawer ul { list-style: none; } .nav-drawer li { border-bottom: 1px solid rgba(255,255,255,0.08); } .nav-drawer li:first-child { border-top: 1px solid rgba(255,255,255,0.08); } .nav-drawer a { display: flex; align-items: baseline; gap: 1rem; min-height: 58px; padding: 1rem 0.25rem; color: rgba(237,239,244,0.86); text-decoration: none; font: 600 1.06rem/1.3 var(--f-display); letter-spacing: -0.015em; transition: color 0.2s var(--ease), padding-left 0.25s var(--ease); } .nav-drawer a .idx { font: 500 0.66rem/1 var(--f-mono); letter-spacing: 0.12em; color: rgba(237,239,244,0.62); flex: none; width: 2.1em; } .nav-drawer a:hover, .nav-drawer a:focus-visible { color: #fff; padding-left: 0.75rem; } .nav-drawer a[aria-current='page'] { color: #fff; } .nav-drawer a[aria-current='page'] .idx { color: var(--signal-hi); } .nav-drawer__foot { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,0.1); display: grid; gap: 0.85rem; } .nav-drawer__foot a { display: inline-flex; min-height: 44px; align-items: center; padding: 0; font: 500 0.9rem/1.4 var(--f-body); color: rgba(237,239,244,0.7); letter-spacing: 0; } .nav-drawer__foot a:hover { padding-left: 0; color: #fff; } /* --------------------------------------------------------------- 8. FOOTER */ .site-footer { background: var(--ink-900); color: var(--fg-on-dark); padding-block: clamp(3.25rem, 6vw, 5rem) 0; border-top: 3px solid var(--signal); } .footer-grid { display: grid; gap: clamp(2.25rem, 5vw, 3.5rem); grid-template-columns: 1fr; padding-bottom: clamp(2.5rem, 5vw, 3.5rem); } @media (min-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1060px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.15fr; } } .footer-brand__name { font: 700 clamp(1.35rem, 2.6vw, 1.7rem)/1.1 var(--f-display); letter-spacing: -0.028em; color: #fff; margin: 0 0 0.6rem; } .footer-brand__desc { font-size: 0.9rem; line-height: 1.65; color: var(--fg-on-dark-mu); max-width: 40ch; margin: 0; } .footer-col h3 { font: 500 0.68rem/1 var(--f-mono); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(237,239,244,0.62); margin: 0 0 1.15rem; } .footer-col ul { list-style: none; display: grid; gap: 0.1rem; } .footer-col li a, .footer-contact a, .footer-contact span { display: block; padding-block: 0.4rem; font-size: 0.9rem; line-height: 1.5; color: var(--fg-on-dark-mu); text-decoration: none; transition: color 0.2s var(--ease); } .footer-col li a:hover, .footer-col li a:focus-visible, .footer-contact a:hover, .footer-contact a:focus-visible { color: #fff; } .footer-contact { display: grid; gap: 0.1rem; } .footer-contact .who { color: #fff; font-weight: 600; } .social-row { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.35rem; list-style: none; } .social-row > li { display: block; } .social-row a, .social-row span { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.18); color: rgba(237,239,244,0.72); transition: color 0.22s var(--ease), border-color 0.22s var(--ease), background 0.22s var(--ease); } .social-row span { color: rgba(237,239,244,0.5); border-color: rgba(255,255,255,0.16); } .social-row a:hover, .social-row a:focus-visible { color: #fff; border-color: var(--signal); background: var(--signal); } .social-row svg { width: 17px; height: 17px; fill: currentColor; } .social-note { margin: 0.9rem 0 0; font: 400 0.72rem/1.62 var(--f-body); letter-spacing: 0; color: rgba(237,239,244,0.62); max-width: 46ch; } .footer-base { border-top: 1px solid rgba(255,255,255,0.1); padding-block: 1.5rem 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.9rem 1.5rem; font: 500 0.72rem/1.6 var(--f-mono); letter-spacing: 0.05em; color: rgba(237,239,244,0.62); } .footer-base a { color: rgba(237,239,244,0.72); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.22); padding-bottom: 1px; } .footer-base a:hover, .footer-base a:focus-visible { color: #fff; border-color: #fff; } /* ------------------------------------------------------------- 9. PAGE HEAD */ .page-head { background: var(--ink-900); color: var(--fg-on-dark); padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem); position: relative; overflow: hidden; } .page-head__inner { position: relative; z-index: 2; } .page-head h1 { color: #fff; margin-bottom: 1.35rem; } .page-head .lede { color: var(--fg-on-dark-mu); } .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; list-style: none; margin: 0 0 1.75rem; font: 500 0.68rem/1.6 var(--f-mono); letter-spacing: 0.13em; text-transform: uppercase; color: rgba(237,239,244,0.62); } .breadcrumb a { color: rgba(237,239,244,0.66); text-decoration: none; } .breadcrumb a:hover, .breadcrumb a:focus-visible { color: #fff; } .breadcrumb li + li::before { content: '/'; margin-right: 0.55rem; opacity: 0.45; } .breadcrumb [aria-current='page'] { color: var(--signal-hi); } /* Route line motif inside dark page heads */ .route-decor { position: absolute; right: -60px; top: 0; bottom: 0; width: min(48%, 560px); opacity: 0.5; pointer-events: none; z-index: 1; } .route-decor svg { width: 100%; height: 100%; } @media (max-width: 767px) { .route-decor { opacity: 0.24; width: 78%; right: -80px; } } /* --------------------------------------------------------------- 10. HERO */ .hero { background: var(--ink-900); color: var(--fg-on-dark); position: relative; overflow: hidden; } .hero__inner { position: relative; z-index: 2; padding-block: clamp(2.75rem, 6vw, 5rem) 0; } .hero__top { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: end; } @media (min-width: 960px) { .hero__top { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(2.5rem, 5vw, 4.5rem); } } .hero__id { display: flex; align-items: center; gap: 0.85rem; font: 500 0.68rem/1 var(--f-mono); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(237,239,244,0.66); margin-bottom: 1.75rem; flex-wrap: wrap; } .hero__id .dot { width: 6px; height: 6px; background: var(--signal-hi); border-radius: 50%; flex: none; } .hero h1 { font-size: clamp(2.6rem, 8.2vw, 5.6rem); line-height: 0.98; letter-spacing: -0.042em; color: #fff; margin-bottom: 1.5rem; } .hero h1 .sur { display: block; color: rgba(237,239,244,0.58); } .hero__creds { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-bottom: 1.9rem; font: 500 0.76rem/1.5 var(--f-mono); letter-spacing: 0.09em; text-transform: uppercase; color: rgba(237,239,244,0.8); } .hero__creds span { display: inline-flex; align-items: center; gap: 0.9rem; } .hero__creds span:not(:last-child)::after { content: ''; width: 4px; height: 4px; background: var(--signal-hi); transform: rotate(45deg); flex: none; } .hero__lede { color: var(--fg-on-dark-mu); max-width: 52ch; margin-bottom: 2.25rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; } /* Hero image: overlapping editorial band */ .hero__figure { position: relative; margin-top: clamp(2.5rem, 5vw, 4rem); } .hero__frame { position: relative; overflow: hidden; background: var(--ink-800); aspect-ratio: 1240 / 720; border-top: 1px solid rgba(255,255,255,0.14); } .hero__frame picture { display: block; width: 100%; height: 100%; } .hero__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 34%; } @media (max-width: 767px) { .hero__frame { aspect-ratio: 5 / 4; } .hero__frame img { object-position: 74% 30%; } } .hero__frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,12,27,0.86) 0%, rgba(7,12,27,0.28) 42%, rgba(7,12,27,0.05) 70%); pointer-events: none; } .hero__caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; margin: 0; padding: clamp(1.1rem, 2.5vw, 1.9rem) clamp(1.1rem, 2.5vw, 2rem); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1.5rem; } .hero__caption p { margin: 0; font: 500 clamp(0.7rem, 1.4vw, 0.78rem)/1.55 var(--f-mono); letter-spacing: 0.05em; color: rgba(237,239,244,0.78); max-width: 46ch; } @media (max-width: 767px) { /* Below the image, on the navy ground, so nothing sits over the face */ .hero__caption { position: static; padding: 1.05rem 0 0; display: grid; gap: 0.85rem; justify-items: start; } .hero__caption p { color: rgba(237,239,244,0.72); max-width: none; } .hero__frame::after { background: linear-gradient(to top, rgba(7,12,27,0.5) 0%, rgba(7,12,27,0.05) 40%); } } .hero__caption .stamp { font: 600 clamp(0.66rem, 1.3vw, 0.72rem)/1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: #fff; border: 1px solid rgba(255,255,255,0.32); padding: 0.5rem 0.85rem; white-space: nowrap; } /* Vertical identity rail beside the hero copy */ .id-rail { border-left: 1px solid rgba(255,255,255,0.14); padding-left: clamp(1.25rem, 2.5vw, 2rem); display: grid; gap: 1.35rem; position: relative; } .id-rail::before { content: ''; position: absolute; left: -4px; top: 0; width: 7px; height: 7px; background: var(--signal); border-radius: 50%; } .id-rail__row { display: grid; gap: 0.3rem; } .id-rail__k { font: 500 0.64rem/1 var(--f-mono); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(237,239,244,0.62); } .id-rail__v { font: 600 clamp(0.92rem, 1.6vw, 1.02rem)/1.45 var(--f-display); letter-spacing: -0.012em; color: #fff; } .id-rail__v small { display: block; font: 400 0.8rem/1.5 var(--f-body); letter-spacing: 0; color: rgba(237,239,244,0.62); margin-top: 0.15rem; } /* Ticker strip below hero */ .hero__strip { --cellpad: clamp(1rem, 2vw, 1.5rem); border-top: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); } .hero__strip .wrap { padding-inline: max(0px, calc(var(--gutter) - var(--cellpad))); } .hero__strip ul { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 860px) { .hero__strip ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .hero__strip li { padding: clamp(1.2rem, 2.5vw, 1.75rem) var(--cellpad); border-right: 1px solid rgba(255,255,255,0.09); border-bottom: 1px solid rgba(255,255,255,0.09); } @media (min-width: 860px) { .hero__strip li { border-bottom: 0; } } .hero__strip li:last-child { border-right: 0; } @media (max-width: 859px) { .hero__strip li:nth-child(2n) { border-right: 0; } } .hero__strip .k { display: block; font: 500 0.63rem/1 var(--f-mono); letter-spacing: 0.17em; text-transform: uppercase; color: rgba(237,239,244,0.62); margin-bottom: 0.6rem; } .hero__strip .v { display: block; font: 700 clamp(1.15rem, 2.4vw, 1.55rem)/1.15 var(--f-display); letter-spacing: -0.028em; color: #fff; } .hero__strip .v em { font-style: normal; color: var(--signal-hi); } /* --------------------------------------------------- 11. SECTION HEADINGS */ .sec-head { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); margin-bottom: clamp(2.25rem, 5vw, 3.5rem); } @media (min-width: 900px) { .sec-head--split { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: end; gap: clamp(2rem, 5vw, 4rem); } } .sec-head__aside { display: grid; gap: 1.1rem; align-content: end; } /* ------------------------------------------------------- 12. STATEMENT BLOCK */ .statement { font: 600 clamp(1.45rem, 3.6vw, 2.6rem)/1.28 var(--f-display); letter-spacing: -0.03em; max-width: 21ch; margin: 0; color: var(--fg); } .statement em { font-style: normal; color: var(--signal); } .on-dark .statement { color: #fff; } .on-dark .statement em { color: var(--signal-hi); } .statement-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); } @media (min-width: 900px) { .statement-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 6rem); } } /* ------------------------------------------------------- 13. DATA / LEDGER */ .ledger { border-top: 1px solid var(--rule-strong); } ul.ledger, ol.ledger { list-style: none; } .on-dark .ledger { border-top-color: var(--rule-dark-str); } .ledger__row { display: grid; gap: 0.35rem 2rem; padding-block: clamp(1.05rem, 2.2vw, 1.5rem); border-bottom: 1px solid var(--rule); align-items: baseline; } .on-dark .ledger__row { border-bottom-color: var(--rule-dark); } @media (min-width: 760px) { .ledger__row { grid-template-columns: minmax(140px, 0.32fr) minmax(0, 1fr); } } .ledger__k { font: 500 0.67rem/1.5 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint); } .on-dark .ledger__k { color: rgba(237,239,244,0.62); } .ledger__v { font: 600 clamp(1rem, 1.75vw, 1.14rem)/1.5 var(--f-display); letter-spacing: -0.016em; color: var(--fg); } .on-dark .ledger__v { color: #fff; } .ledger__v small { display: block; margin-top: 0.3rem; font: 400 0.885rem/1.65 var(--f-body); letter-spacing: 0; color: var(--fg-muted); } .on-dark .ledger__v small { color: var(--fg-on-dark-mu); } /* --------------------------------------------------------- 14. DATA STRIP */ .data-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rule-strong); border-left: 1px solid var(--rule); } @media (min-width: 780px) { .data-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1100px) { .data-strip--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .on-dark .data-strip { border-top-color: var(--rule-dark-str); border-left-color: var(--rule-dark); } .data-strip > div { padding: clamp(1.3rem, 2.8vw, 2rem) clamp(1.1rem, 2.2vw, 1.65rem); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .on-dark .data-strip > div { border-color: var(--rule-dark); } .data-strip .n { display: block; font: 700 clamp(2rem, 5.2vw, 3.2rem)/1 var(--f-display); letter-spacing: -0.045em; color: var(--fg); margin-bottom: 0.65rem; font-variant-numeric: tabular-nums; } .on-dark .data-strip .n { color: #fff; } .data-strip .n sup { font-size: 0.42em; vertical-align: super; color: var(--signal); letter-spacing: 0; margin-left: 0.12em; } .on-dark .data-strip .n sup { color: var(--signal-hi); } .data-strip .l { display: block; font: 500 0.685rem/1.55 var(--f-mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--fg-faint); } .on-dark .data-strip .l { color: rgba(237,239,244,0.66); } /* ------------------------------------------------------------ 15. TIMELINE */ .route { position: relative; padding-left: 2.15rem; list-style: none; } @media (min-width: 860px) { .route { padding-left: 0; } } .route::before { content: ''; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px; background: var(--rule-strong); } @media (min-width: 860px) { .route::before { left: calc(0.26 * 100% - 1px); } } .on-dark .route::before { background: var(--rule-dark-str); } .route__fill { position: absolute; left: 6px; top: 10px; width: 2px; height: 0; background: var(--signal); transition: height 0.9s var(--ease-out); z-index: 1; } @media (min-width: 860px) { .route__fill { left: calc(0.26 * 100% - 1px); } } .route li { position: relative; padding-block: clamp(1.5rem, 3vw, 2.35rem); border-bottom: 1px solid var(--rule); display: grid; gap: 0.85rem; } .on-dark .route li { border-bottom-color: var(--rule-dark); } .route li:last-child { border-bottom: 0; } @media (min-width: 860px) { .route li { grid-template-columns: minmax(0, 0.26fr) minmax(0, 0.74fr); gap: 0 clamp(2rem, 4vw, 3.5rem); align-items: start; } } .route li::before { content: ''; position: absolute; left: -2.15rem; top: calc(clamp(1.5rem, 3vw, 2.35rem) + 4px); width: 15px; height: 15px; border-radius: 50%; background: var(--bg); border: 2px solid var(--rule-strong); z-index: 2; transition: border-color 0.4s var(--ease), background 0.4s var(--ease), transform 0.4s var(--ease-out); } @media (min-width: 860px) { .route li::before { left: calc(0.26 * 100% - 7.5px); } } .on-dark .route li::before { background: var(--ink-900); border-color: var(--rule-dark-str); } .route li.is-in::before { border-color: var(--signal); transform: scale(1.12); } .route li.is-key::before { background: var(--signal); border-color: var(--signal); } .route__meta { display: grid; gap: 0.5rem; align-content: start; } .route__when { font: 600 0.9rem/1.3 var(--f-mono); letter-spacing: 0.06em; color: var(--signal); font-variant-numeric: tabular-nums; } .on-dark .route__when { color: var(--signal-hi); } .route__where { font: 500 0.665rem/1.55 var(--f-mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-faint); } .on-dark .route__where { color: rgba(237,239,244,0.62); } .route__body h3 { font-size: clamp(1.12rem, 2.1vw, 1.4rem); margin-bottom: 0.7rem; letter-spacing: -0.022em; } .route__body p { color: var(--fg-muted); font-size: 0.97rem; line-height: 1.72; max-width: 60ch; } .on-dark .route__body p { color: var(--fg-on-dark-mu); } .route__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.95rem; list-style: none; } .route__tags li { padding: 0.32rem 0.65rem; border: 1px solid var(--rule-strong); font: 500 0.63rem/1.4 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); display: block; } .route__tags li::before { display: none; } .on-dark .route__tags li { border-color: var(--rule-dark-str); color: var(--fg-on-dark-mu); } /* ------------------------------------------------- 16. EDITORIAL SPLIT */ .split { display: grid; gap: clamp(2rem, 4.5vw, 3.5rem); align-items: center; } .split--top { align-items: start; } @media (min-width: 940px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5rem); } .split--wide-media { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } .split--wide-text { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } } .split__media { position: relative; } .split__frame { position: relative; overflow: hidden; background: var(--ink-800); border: 1px solid var(--rule); } .on-dark .split__frame { border-color: var(--rule-dark); } .split__frame picture { display: block; width: 100%; height: 100%; } .split__frame img { width: 100%; height: 100%; object-fit: cover; } .split__frame--wide { aspect-ratio: 16 / 9; } .split__frame--sq { aspect-ratio: 1 / 1; } .split__frame--tall { aspect-ratio: 4 / 5; } .split__frame--photo { aspect-ratio: 720 / 422; } /* Corner tick marks — engineering-drawing detail */ .ticked { position: relative; } .ticked::before, .ticked::after { content: ''; position: absolute; width: 18px; height: 18px; pointer-events: none; z-index: 3; } .ticked::before { left: 10px; top: 10px; border-left: 2px solid var(--signal); border-top: 2px solid var(--signal); } .ticked::after { right: 10px; bottom: 10px; border-right: 2px solid var(--signal); border-bottom: 2px solid var(--signal); } .figcap { margin: 0.9rem 0 0; font: 500 0.7rem/1.6 var(--f-mono); letter-spacing: 0.05em; color: var(--fg-faint); display: flex; gap: 0.7rem; } .figcap::before { content: ''; width: 14px; height: 1px; background: var(--signal); margin-top: 0.62rem; flex: none; } .on-dark .figcap { color: rgba(237,239,244,0.62); } /* --------------------------------------------------------- 17. BRIEF BLOCKS */ .briefs { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); } @media (min-width: 720px) { .briefs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1080px) { .briefs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .on-dark .briefs { background: var(--rule-dark); border-color: var(--rule-dark); } .brief { background: var(--bg); padding: clamp(1.6rem, 3vw, 2.3rem); display: grid; gap: 0.85rem; align-content: start; position: relative; transition: background 0.3s var(--ease); } .on-alt .brief { background: var(--bg-alt); } .on-dark .brief { background: var(--ink-900); } .brief__n { font: 500 0.66rem/1 var(--f-mono); letter-spacing: 0.16em; color: var(--signal); } .on-dark .brief__n { color: var(--signal-hi); } .brief h3 { font-size: clamp(1.06rem, 1.9vw, 1.24rem); letter-spacing: -0.02em; } .brief p { font-size: 0.94rem; line-height: 1.72; color: var(--fg-muted); margin: 0; } .on-dark .brief p { color: var(--fg-on-dark-mu); } .brief::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: var(--signal); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease-out); } .brief:hover::after { transform: scaleX(1); } /* ------------------------------------------------------ 18. RECORD / MEDIA */ .record { list-style: none; border-top: 1px solid var(--rule-strong); } .on-dark .record { border-top-color: var(--rule-dark-str); } .record > li { border-bottom: 1px solid var(--rule); } .on-dark .record > li { border-bottom-color: var(--rule-dark); } .record__item { display: grid; gap: 0.9rem 2rem; padding-block: clamp(1.5rem, 3vw, 2.15rem); text-decoration: none; color: inherit; transition: padding-left 0.35s var(--ease), background 0.3s var(--ease); align-items: start; } @media (min-width: 900px) { .record__item { grid-template-columns: minmax(140px, 0.2fr) minmax(0, 1fr) minmax(0, 34px); gap: 0 clamp(1.5rem, 3.5vw, 3rem); } } a.record__item:hover, a.record__item:focus-visible { padding-left: 0.85rem; } .record__date { font: 600 0.83rem/1.5 var(--f-mono); letter-spacing: 0.05em; color: var(--signal); font-variant-numeric: tabular-nums; } .on-dark .record__date { color: var(--signal-hi); } .record__src { display: block; font: 500 0.645rem/1.5 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); margin-top: 0.35rem; } .on-dark .record__src { color: rgba(237,239,244,0.62); } .record__body h3 { font-size: clamp(1.08rem, 2vw, 1.32rem); letter-spacing: -0.022em; margin-bottom: 0.6rem; transition: color 0.25s var(--ease); } a.record__item:hover .record__body h3 { color: var(--signal); } .on-dark a.record__item:hover .record__body h3 { color: var(--signal-hi); } .record__body p { font-size: 0.945rem; line-height: 1.72; color: var(--fg-muted); margin: 0; max-width: 68ch; } .on-dark .record__body p { color: var(--fg-on-dark-mu); } .record__go { display: none; width: 34px; height: 34px; border: 1px solid var(--rule-strong); place-items: center; color: var(--fg-muted); transition: all 0.28s var(--ease); flex: none; } @media (min-width: 900px) { .record__go { display: grid; margin-top: 0.2rem; } } a.record__item:hover .record__go, a.record__item:focus-visible .record__go { background: var(--signal); border-color: var(--signal); color: #fff; } .on-dark .record__go { border-color: var(--rule-dark-str); color: var(--fg-on-dark-mu); } .record__tag { display: inline-block; margin-top: 0.9rem; padding: 0.3rem 0.6rem; border: 1px solid var(--rule-strong); font: 500 0.62rem/1.4 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); } .on-dark .record__tag { border-color: var(--rule-dark-str); color: rgba(237,239,244,0.66); } /* ------------------------------------------------------- 19. MILESTONE GRID */ .milestones { display: grid; gap: clamp(1.5rem, 3vw, 2rem); } @media (min-width: 820px) { .milestones { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .milestone { border-top: 2px solid var(--fg); padding-top: clamp(1.25rem, 2.5vw, 1.75rem); display: grid; gap: 0.75rem; align-content: start; } .on-dark .milestone { border-top-color: rgba(255,255,255,0.85); } .milestone--accent { border-top-color: var(--signal); } .milestone__n { font: 700 clamp(2.4rem, 6.5vw, 4rem)/0.92 var(--f-display); letter-spacing: -0.05em; color: var(--fg); font-variant-numeric: tabular-nums; } .on-dark .milestone__n { color: #fff; } .milestone__n small { font-size: 0.34em; letter-spacing: 0.02em; color: var(--signal); font-weight: 600; margin-left: 0.2em; } .on-dark .milestone__n small { color: var(--signal-hi); } .milestone h3 { font-size: clamp(1.06rem, 1.9vw, 1.22rem); letter-spacing: -0.02em; } .milestone p { font-size: 0.94rem; line-height: 1.7; color: var(--fg-muted); margin: 0; } .on-dark .milestone p { color: var(--fg-on-dark-mu); } .milestone__src { font: 500 0.63rem/1.5 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); } .on-dark .milestone__src { color: rgba(237,239,244,0.62); } /* ---------------------------------------------------------- 20. PULL FACT */ .pull { border-left: 3px solid var(--signal); padding: clamp(1.1rem, 2.5vw, 1.6rem) 0 clamp(1.1rem, 2.5vw, 1.6rem) clamp(1.25rem, 3vw, 2rem); margin: clamp(2rem, 4vw, 2.75rem) 0; } .pull p { font: 600 clamp(1.08rem, 2.1vw, 1.38rem)/1.5 var(--f-display); letter-spacing: -0.022em; color: var(--fg); margin: 0; max-width: 44ch; } .on-dark .pull p { color: #fff; } .pull cite { display: block; margin-top: 0.85rem; font: 500 0.66rem/1.5 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; font-style: normal; color: var(--fg-faint); } .on-dark .pull cite { color: rgba(237,239,244,0.62); } /* ------------------------------------------------------- 21. OFFSET FIGURE */ .offset-figure { position: relative; display: grid; gap: 1rem; } @media (min-width: 900px) { .offset-figure { grid-template-columns: repeat(12, 1fr); align-items: center; } .offset-figure__main { grid-column: 1 / 9; grid-row: 1; } .offset-figure__panel { grid-column: 7 / 13; grid-row: 1; z-index: 2; margin-top: clamp(4rem, 12vw, 9rem); } .offset-figure--right .offset-figure__main { grid-column: 5 / 13; } .offset-figure--right .offset-figure__panel { grid-column: 1 / 7; } } .offset-figure__panel-inner { background: var(--ink-900); color: var(--fg-on-dark); padding: clamp(1.6rem, 3.5vw, 2.75rem); border-top: 3px solid var(--signal); } .offset-figure__panel-inner h2, .offset-figure__panel-inner h3 { color: #fff; font-size: clamp(1.2rem, 2.3vw, 1.55rem); margin-bottom: 1rem; letter-spacing: -0.025em; } .offset-figure__panel-inner p { color: var(--fg-on-dark-mu); font-size: 0.95rem; line-height: 1.72; } .offset-figure__panel-inner .ledger__row { border-bottom-color: var(--rule-dark); } .offset-figure__panel-inner .ledger { border-top-color: var(--rule-dark-str); } .offset-figure__panel-inner .ledger__k { color: rgba(237,239,244,0.62); } .offset-figure__panel-inner .ledger__v { color: #fff; } /* --------------------------------------------------------- 22. FULL BLEED */ .bleed { position: relative; overflow: hidden; background: var(--ink-900); } .bleed__media { position: absolute; inset: 0; } .bleed__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; } .bleed__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(7,12,27,0.95) 0%, rgba(7,12,27,0.86) 42%, rgba(7,12,27,0.55) 100%); } @media (max-width: 767px) { .bleed__media::after { background: linear-gradient(to bottom, rgba(7,12,27,0.82) 0%, rgba(7,12,27,0.93) 55%); } .bleed__media img { object-position: 70% 25%; } } .bleed__inner { position: relative; z-index: 2; padding-block: clamp(4.5rem, 11vw, 8.5rem); color: var(--fg-on-dark); background: transparent; /* keeps the photograph visible under .on-dark */ } .bleed__inner h2 { color: #fff; } .bleed__inner .lede, .bleed__inner .body-lg { color: var(--fg-on-dark-mu); } .bleed__box { max-width: 56ch; } /* ------------------------------------------------------ 23. ROUTE MAP SVG */ .routemap { max-width: 100%; border: 1px solid var(--rule); background: var(--bg-alt); padding: clamp(1.35rem, 3vw, 2.5rem); overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } .on-dark .routemap { border-color: var(--rule-dark); background: rgba(255,255,255,0.03); } .routemap svg { width: 100%; min-width: 560px; height: auto; } /* A quiet hint that the diagram can be scrolled sideways on narrow screens */ .routemap-hint { display: none; margin: 0.7rem 0 0; font: 500 0.66rem/1.5 var(--f-mono); letter-spacing: 0.11em; text-transform: uppercase; color: var(--fg-faint); } @media (max-width: 719px) { .routemap-hint { display: block; } } .on-dark .routemap-hint { color: rgba(237,239,244,0.62); } /* ------------------------------------------------------------ 24. CONTACT */ .contact-grid { display: grid; gap: clamp(2rem, 4.5vw, 3.5rem); } @media (min-width: 940px) { .contact-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2.5rem, 6vw, 5rem); } } .contact-card { border: 1px solid var(--rule); background: var(--bg); padding: clamp(1.6rem, 3.5vw, 2.6rem); } .on-alt .contact-card { background: var(--bg); } .on-dark .contact-card { border-color: var(--rule-dark); background: rgba(255,255,255,0.03); } .contact-list { list-style: none; display: grid; } .contact-list li { border-top: 1px solid var(--rule); } .on-dark .contact-list li { border-top-color: var(--rule-dark); } .contact-list li:last-child { border-bottom: 1px solid var(--rule); } .on-dark .contact-list li:last-child { border-bottom-color: var(--rule-dark); } .contact-list a, .contact-list .static { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1.5rem; min-height: 62px; padding-block: 1.05rem; text-decoration: none; color: inherit; transition: color 0.22s var(--ease), padding-left 0.28s var(--ease); } .contact-list a:hover, .contact-list a:focus-visible { color: var(--signal); padding-left: 0.6rem; } .on-dark .contact-list a:hover, .on-dark .contact-list a:focus-visible { color: var(--signal-hi); } .contact-list .k { font: 500 0.655rem/1.5 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint); flex: none; min-width: 96px; } .on-dark .contact-list .k { color: rgba(237,239,244,0.62); } .contact-list .v { font: 600 clamp(1.02rem, 2vw, 1.22rem)/1.4 var(--f-display); letter-spacing: -0.02em; word-break: break-word; } .contact-portrait { border: 1px solid var(--rule); background: var(--bg-alt); overflow: hidden; } .on-dark .contact-portrait { border-color: var(--rule-dark); background: rgba(255,255,255,0.04); } .contact-portrait img { width: 100%; aspect-ratio: 905 / 471; object-fit: contain; object-position: center; background: #B9BABC; } /* ---------------------------------------------------------- 25. PAGE NEXT */ .next-page { border-top: 1px solid var(--rule); background: var(--bg-alt); } .on-dark .next-page { border-top-color: var(--rule-dark); background: rgba(255,255,255,0.03); } .next-page a { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-block: clamp(2rem, 4vw, 3rem); text-decoration: none; color: inherit; transition: color 0.25s var(--ease); } .next-page a:hover, .next-page a:focus-visible { color: var(--signal); } .next-page .k { display: block; font: 500 0.66rem/1 var(--f-mono); letter-spacing: 0.17em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 0.7rem; } .next-page .v { font: 700 clamp(1.5rem, 4vw, 2.4rem)/1.1 var(--f-display); letter-spacing: -0.032em; } /* ------------------------------------------------- 26. DISCLOSURE / NOTE */ .note { border: 1px solid var(--rule); border-left: 3px solid var(--slate); background: var(--bg-alt); padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.2rem, 2.6vw, 1.8rem); font-size: 0.9rem; line-height: 1.68; color: var(--fg-muted); } .on-alt .note { background: var(--bg); } .on-dark .note { background: rgba(255,255,255,0.04); border-color: var(--rule-dark); border-left-color: var(--slate-lo); color: var(--fg-on-dark-mu); } .note strong { color: var(--fg); } .on-dark .note strong { color: #fff; } .note a { color: var(--signal-lo); text-decoration: underline; text-underline-offset: 3px; } .on-dark .note a { color: #fff; text-decoration-color: var(--signal-hi); text-decoration-thickness: 2px; } /* ------------------------------------------------------------- 27. REVEAL */ [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out); transition-delay: var(--d, 0ms); } [data-reveal].is-visible { opacity: 1; transform: none; } html.no-js [data-reveal] { opacity: 1; transform: none; } /* --------------------------------------------------------- 28. GATE PAGE */ body.gate { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: clamp(1.25rem, 5vw, 3rem); background: var(--ink-900); color: var(--fg-on-dark); position: relative; overflow: hidden; } body.gate::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 72%); mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 72%); pointer-events: none; } .gate-panel { position: relative; z-index: 2; width: 100%; max-width: 400px; } .gate-mark { width: 46px; height: 46px; margin: 0 auto 2.25rem; position: relative; } .gate-mark::before, .gate-mark::after { content: ''; position: absolute; background: rgba(255,255,255,0.3); } .gate-mark::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-0.5px); } .gate-mark::after { left: 50%; top: 50%; width: 11px; height: 11px; background: var(--signal); border-radius: 50%; transform: translate(-50%, -50%); } .gate-field { display: grid; gap: 0.85rem; } .gate-field label { font: 500 0.655rem/1 var(--f-mono); letter-spacing: 0.24em; text-transform: uppercase; color: rgba(237,239,244,0.62); text-align: center; } .gate-input { width: 100%; min-height: 58px; padding: 0.9rem 1.1rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2); border-radius: 2px; color: #fff; font: 500 1.02rem/1.4 var(--f-mono); letter-spacing: 0.34em; text-align: center; transition: border-color 0.25s var(--ease), background 0.25s var(--ease); -webkit-appearance: none; appearance: none; } .gate-input::placeholder { color: rgba(237,239,244,0.42); letter-spacing: 0.3em; } .gate-input:focus { outline: none; border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.08); } .gate-input:focus-visible { outline: 2px solid #F2C14E; outline-offset: 2px; } .gate-form.is-error .gate-input { border-color: var(--signal-hi); } .gate-submit { width: 100%; min-height: 54px; margin-top: 0.35rem; background: #fff; color: var(--ink-900); border: 1px solid #fff; border-radius: 2px; cursor: pointer; font: 600 0.76rem/1 var(--f-mono); letter-spacing: 0.2em; text-transform: uppercase; transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); } .gate-submit:hover:not(:disabled), .gate-submit:focus-visible:not(:disabled) { background: var(--signal); color: #fff; border-color: var(--signal); } .gate-submit:disabled { opacity: 0.5; cursor: progress; } .gate-msg.is-working { color: rgba(237,239,244,0.66); } .gate-msg { min-height: 1.5rem; margin: 1.1rem 0 0; text-align: center; font: 500 0.775rem/1.5 var(--f-body); color: var(--signal-hi); letter-spacing: 0.01em; } .gate-form.is-error { animation: gate-shake 0.42s var(--ease); } @keyframes gate-shake { 0%, 100% { transform: translateX(0); } 22% { transform: translateX(-7px); } 46% { transform: translateX(6px); } 70% { transform: translateX(-3px); } } /* ------------------------------------------------- 29. REDUCED MOTION / PRINT */ @media (max-width: 1099px) { .link-arrow { padding-block: 0.85rem; min-height: 44px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } .route__fill { transition: none; } } @media print { .site-header, .site-footer, .nav-drawer, .next-page, .skip-link, .route-decor { display: none !important; } body { background: #fff; color: #000; } .on-dark, .hero, .page-head, .bleed { background: #fff !important; color: #000 !important; } .on-dark h1, .on-dark h2, .on-dark h3, .page-head h1, .hero h1 { color: #000 !important; } .bleed__media { display: none; } a { text-decoration: underline; } } /* ------------------------------------------------------------- 30. UTILITY */ .mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: clamp(0.85rem, 1.6vw, 1.15rem); } .mt-2 { margin-top: clamp(1.35rem, 2.6vw, 1.85rem); } .mt-3 { margin-top: clamp(2rem, 4vw, 2.85rem); } .mt-4 { margin-top: clamp(2.75rem, 5.5vw, 4rem); } .mb-2 { margin-bottom: clamp(1.35rem, 2.6vw, 1.85rem); } .mb-3 { margin-bottom: clamp(2rem, 4vw, 2.85rem); } .stack-sm { display: grid; gap: clamp(0.9rem, 1.8vw, 1.25rem); } .stack { display: grid; gap: clamp(1.4rem, 3vw, 2rem); } .stack-lg { display: grid; gap: clamp(2.25rem, 5vw, 3.5rem); } .flow > * + * { margin-top: 1.15em; } .text-max { max-width: var(--maxw-text); }