/* ════════════════════════════════════════════════════════════
DESMOND AYETTEY — GLOBAL DESIGN SYSTEM
Single source of truth for design tokens, navigation,
the hamburger menu, the theme toggle, and light/dark themes.
Loaded LAST on every page so it overrides any page-level rules.
Theme is driven by [data-theme] on (set by theme.js),
defaulting to prefers-color-scheme and cached in localStorage.
All colors verified to meet WCAG 2.1 AA:
≥ 4.5:1 for normal text, ≥ 3:1 for large text / UI.
════════════════════════════════════════════════════════════ */
/* ════════════════════════════════
DESIGN TOKENS
════════════════════════════════ */
:root,
[data-theme="dark"] {
/* ── Typography (defined once here so the logo + all UI resolve the
same family on every page; previously --font-display was only set
in photography.html's inline block, so the logo's font silently
differed between pages). Matches the loaded Roboto/Open Sans set. ── */
--font-display: 'Roboto', system-ui, sans-serif;
--font-ui: 'Roboto', system-ui, sans-serif;
--font-body: 'Open Sans', system-ui, sans-serif;
/* ── Surfaces ── */
--bg: #08080d;
--surface: #0f0f17;
--surface2: #16161f;
--border: rgba(255,255,255,0.09);
--border2: rgba(255,255,255,0.16);
/* ── Text — fade removed per user request; muted greys now read as crisp ── */
--text: #f2f2f7; /* primary crisp text */
--muted2: #f2f2f7; /* body copy — now matches --text (was #c2c6d8) */
--muted: #e4e6ee; /* small labels — near-crisp, a hair softer so
ALL-CAPS label blocks aren't harsh (was #a6acbf) */
/* ── Accents ──
--accent : solid-fill backgrounds (buttons) — white text = 4.52:1 ✓
--accent-text : accent used as TEXT on dark surfaces — 6.6:1 ✓
--accent2 : lighter accent text / gradients — 9.4:1 ✓
On semi-transparent badge bg (~#13111e composite): 7.1:1 ✓ */
--accent: #615ad4; /* solid fill — white text = 4.52:1 ✓ (was #6c63e0 = 4.34:1 fail) */
--accent-hover: #5750c9; /* button hover — white text = 4.95:1 ✓ */
--accent-active: #524bbe; /* button active — white text = 5.45:1 ✓ */
--accent-text: #8b82ff; /* accent used as TEXT on dark surfaces — 6.6–6.95:1 ✓ */
--accent2: #b9a7ff; /* lighter accent text / gradients — 9.4–9.96:1 ✓ */
--on-accent: #ffffff;
--green: #34d399;
/* ── Project card ── */
--card-bg: #0d1220;
--card-gradient-l: rgba(0,0,0,0.55);
--card-gradient-r: rgba(0,0,0,0.55);
/* ── Nav ── */
--nav-bg: rgba(8,8,13,0.88);
--mobile-nav-bg: rgba(6,6,11,0.985);
color-scheme: dark;
/* ════════════════════════════════
SPACING SCALE (8px base grid)
════════════════════════════════ */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.5rem; /* 24px */
--space-6: 2rem; /* 32px */
--space-7: 3rem; /* 48px */
--space-8: 4rem; /* 64px */
--space-9: 6rem; /* 96px */
--space-10: 8rem; /* 128px */
/* ════════════════════════════════
TYPE SCALE (fluid, ~1.25 ratio)
════════════════════════════════ */
--fs-xs: 0.75rem; /* 12px micro-labels */
--fs-sm: 0.875rem; /* 14px small UI */
--fs-base: 1rem; /* 16px body */
--fs-lg: 1.125rem; /* 18px lead */
--fs-xl: clamp(1.35rem, 2.2vw, 1.75rem); /* card titles */
--fs-2xl: clamp(1.75rem, 3.5vw, 2.75rem); /* section titles */
--fs-3xl: clamp(2.5rem, 5vw, 4.5rem); /* page / CTA titles */
--fs-hero: clamp(3rem, 7vw, 6rem); /* hero titles */
--radius-sm: 6px;
--radius: 8px;
--radius-lg: 14px;
--radius-xl: 20px;
--maxw: 1200px;
}
/* ── LIGHT MODE ── */
[data-theme="light"] {
--bg: #f5f5fa;
--surface: #ffffff;
--surface2: #eeeef5;
--border: rgba(0,0,0,0.10);
--border2: rgba(0,0,0,0.16);
--text: #0d0d18; /* primary crisp text */
--muted2: #0d0d18; /* body copy — now matches --text (was #34344e) */
--muted: #2c2c40; /* small labels — near-crisp, a hair softer (was #56566f) */
--accent: #4f47d6; /* white text on this = 6.46:1 ✓ */
--accent-hover: #443cc4; /* white text = 7.4:1 ✓ */
--accent-active: #3a33ad; /* white text = 8.6:1 ✓ */
--accent-text: #4f47d6; /* 6.13:1 as text on --bg ✓ */
--accent2: #5a4fd0; /* 5.39:1 as text on --bg ✓ */
--on-accent: #ffffff;
--green: #0e7a52; /* 4.71:1 ✓ */
--card-bg: #ffffff;
--card-gradient-l: rgba(255,255,255,0.6);
--card-gradient-r: rgba(255,255,255,0.6);
--nav-bg: rgba(245,245,250,0.92);
--mobile-nav-bg: rgba(245,245,250,0.99);
color-scheme: light;
}
/* ════════════════════════════════
FOCUS VISIBILITY (keyboard a11y)
════════════════════════════════ */
:where(a, button, [tabindex], input, textarea, select):focus-visible {
outline: 2px solid var(--accent-text);
outline-offset: 3px;
border-radius: 4px;
}
/* ════════════════════════════════
GLOBAL NAVIGATION + HAMBURGER
Defined here so every page is identical.
════════════════════════════════ */
nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 200;
display: flex; align-items: center; justify-content: space-between;
padding: 1.1rem clamp(1.5rem, 5vw, 3rem);
background: var(--nav-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
}
.nav-logo {
display: inline-flex; align-items: center; gap: 0.55rem;
font-family: 'Syne', sans-serif;
font-weight: 800; font-size: 18px;
letter-spacing: -0.01em; color: var(--text);
text-decoration: none; z-index: 220;
transition: color 0.2s ease;
}
.nav-logo:hover { color: var(--nav-link-active, var(--accent-text)); }
.nav-logo span { color: var(--accent-text); }
.nav-logo .logo-mark {
width: 26px; height: 26px; flex-shrink: 0;
display: block;
transition: transform 0.3s ease;
}
.nav-logo:hover .logo-mark { transform: rotate(-8deg) scale(1.06); }
/* Gradient adapts to theme via currentColor stops set in markup */
.logo-mark .logo-stroke { stroke: var(--accent-text); }
.logo-mark .logo-stroke-soft { stroke: var(--accent2); }
/* ════════════════════════════════
BACK-TO-TOP BUTTON (injected globally)
════════════════════════════════ */
.back-to-top {
position: fixed;
bottom: clamp(1.25rem, 3vw, 2rem);
right: clamp(1.25rem, 3vw, 2rem);
z-index: 180;
width: 46px; height: 46px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
border: 1px solid var(--border2);
background: var(--surface2);
color: var(--accent-text);
cursor: pointer;
box-shadow: 0 8px 24px rgba(0,0,0,0.28);
opacity: 0; visibility: hidden; transform: translateY(12px);
transition: opacity 0.3s ease, transform 0.3s ease,
visibility 0.3s ease, background 0.2s ease,
border-color 0.2s ease, color 0.2s ease;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover {
background: var(--surface);
border-color: var(--accent-text);
transform: translateY(-3px);
}
.back-to-top svg { width: 18px; height: 18px; pointer-events: none; }
[data-theme="light"] .back-to-top {
background: var(--surface);
border-color: var(--border2);
box-shadow: 0 6px 20px rgba(13,13,24,0.16);
}
[data-theme="light"] .back-to-top:hover {
background: #fff;
border-color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
.back-to-top { transition: opacity 0.2s ease, visibility 0.2s ease; transform: none; }
.back-to-top.show { transform: none; }
}
.nav-right { display: flex; align-items: center; gap: 2rem; }
.nav-links { display: flex; align-items: center; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.nav-links a {
font-size: 16px; font-weight: 500;
color: var(--muted2); text-decoration: none;
letter-spacing: 0.02em; transition: color 0.2s;
}
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--accent); font-weight: 600; }
.nav-cta {
font-size: 14px; font-weight: 600;
padding: 0.55rem 1.25rem;
background: var(--accent); color: #fff;
border-radius: var(--radius-sm); text-decoration: none;
letter-spacing: 0.02em;
transition: background 0.2s, transform 0.2s;
}
.nav-cta:hover { background: var(--accent-hover); transform: translateY(-1px); }
.nav-cta:active { background: var(--accent-active); transform: translateY(0); }
/* Optional "back" link used on case studies */
.nav-back {
display: inline-flex; align-items: center; gap: 0.5rem;
font-size: 13px; font-weight: 500;
color: var(--muted2); text-decoration: none;
transition: color 0.2s, gap 0.2s;
}
.nav-back:hover { color: var(--text); gap: 0.75rem; }
.nav-back svg { width: 14px; height: 14px; }
/* ── Hamburger button (hidden on desktop) ── */
.nav-toggle {
display: none;
flex-direction: column; justify-content: center; gap: 5px;
width: 42px; height: 42px;
padding: 9px; margin: 0;
background: none; border: none; cursor: pointer;
z-index: 220;
}
.nav-toggle span {
display: block; width: 22px; height: 2px;
background: var(--text); border-radius: 2px;
transition: transform 0.3s ease, opacity 0.2s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ── THEME TOGGLE BUTTON ── */
.theme-toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px;
border-radius: var(--radius);
border: 1px solid var(--border2);
background: var(--surface2);
color: var(--muted2);
cursor: pointer;
transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
flex-shrink: 0;
}
.theme-toggle:hover {
background: var(--surface);
border-color: var(--accent-text);
color: var(--accent2);
transform: scale(1.05);
}
.theme-toggle svg { width: 16px; height: 16px; pointer-events: none; transition: opacity 0.2s; }
.theme-toggle .icon-sun { display: block; }
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }
/* ════════════════════════════════
RESPONSIVE NAV — hamburger drawer
Consolidates the full nav into the
hamburger at tablet & mobile widths.
════════════════════════════════ */
@media (max-width: 899px) {
.nav-toggle { display: flex; }
/* The links + CTA collapse into a full-width drawer */
.nav-right {
position: fixed;
top: 0; right: 0;
height: 100dvh;
width: min(78vw, 320px);
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 0;
padding: 6rem 0 2rem;
background: var(--mobile-nav-bg);
backdrop-filter: blur(26px);
-webkit-backdrop-filter: blur(26px);
border-left: 1px solid var(--border);
box-shadow: -24px 0 60px rgba(0,0,0,0.4);
transform: translateX(100%);
transition: transform 0.34s cubic-bezier(0.4,0,0.2,1);
overflow-y: auto;
}
.nav-right.open { transform: translateX(0); }
.nav-links {
flex-direction: column;
align-items: stretch;
width: 100%;
gap: 0;
}
.nav-links li { width: 100%; }
.nav-links a {
display: block;
padding: 1rem 1.75rem;
font-size: 17px;
color: var(--muted2);
border-bottom: 1px solid var(--border);
}
.nav-links a.active { color: var(--accent); font-weight: 600; }
.nav-cta {
margin: 1.25rem 1.75rem 0;
text-align: center;
padding: 0.85rem 1.25rem;
font-size: 16px;
}
.nav-back {
padding: 1rem 1.75rem;
border-bottom: 1px solid var(--border);
width: 100%;
}
.theme-toggle { margin: 1.25rem 1.75rem 0; }
/* Dim the page behind the open drawer */
.nav-scrim {
position: fixed; inset: 0;
background: rgba(0,0,0,0.5);
opacity: 0; visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
z-index: 190;
}
.nav-scrim.open { opacity: 1; visibility: visible; }
body.nav-locked { overflow: hidden; }
}
/* ════════════════════════════════
LIGHT-MODE COMPONENT OVERRIDES
════════════════════════════════ */
[data-theme="light"] .project-card {
background: var(--card-bg);
border-color: rgba(0,0,0,0.1);
box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
[data-theme="light"] .project-card:hover {
border-color: rgba(79,71,214,0.3);
box-shadow: 0 16px 48px rgba(79,71,214,0.12);
}
[data-theme="light"] .project-image-wrap { background: #f0f0f8; }
[data-theme="light"] .project-image-wrap::after {
background: linear-gradient(to right, var(--card-bg) 0%, transparent 18%);
}
[data-theme="light"] .project-card:nth-child(even) .project-image-wrap::after {
background: linear-gradient(to left, var(--card-bg) 0%, transparent 18%);
}
[data-theme="light"] .pill {
background: #ececf5;
border-color: rgba(0,0,0,0.13);
}
[data-theme="light"] .panel-stat,
[data-theme="light"] .cert-card,
[data-theme="light"] .value-card,
[data-theme="light"] .cs-stat,
[data-theme="light"] .cs-insight,
[data-theme="light"] .cs-persona,
[data-theme="light"] .cs-rec,
[data-theme="light"] .cs-reflection,
[data-theme="light"] .cs-friction-item {
background: var(--surface);
border-color: var(--border2);
}
[data-theme="light"] .cs-pullquote {
background: rgba(79,71,214,0.06);
border-left-color: var(--accent);
}
[data-theme="light"] .cs-outcome {
background: rgba(14,122,82,0.08);
border-color: rgba(14,122,82,0.25);
}
[data-theme="light"] .marquee-strip { background: var(--surface); }
[data-theme="light"] .hero-title-tag,
[data-theme="light"] .hero-badge {
background: rgba(79,71,214,0.08);
border-color: rgba(79,71,214,0.22);
}
[data-theme="light"] .exp-tag {
background: var(--surface2);
border-color: var(--border);
}
[data-theme="light"] .cert-badge,
[data-theme="light"] .cert-icon,
[data-theme="light"] .value-icon {
background: rgba(79,71,214,0.08);
border-color: rgba(79,71,214,0.2);
}
[data-theme="light"] .cs-hero-bg,
[data-theme="light"] .cs-hero { background: var(--bg); }
[data-theme="light"] .cs-meta-bar {
background: rgba(255,255,255,0.7);
border-color: var(--border2);
}
/* The big decorative drop-shadow glows are too heavy on a light bg */
[data-theme="light"] .hero-glow-1,
[data-theme="light"] .hero-glow-2 { opacity: 0.5; }
/* ════════════════════════════════
CASE-STUDY PROCESS STEPS
Sequential index numbers removed in favour of a clean
bold header + description. Single column, consistent
across every case study (overrides per-page grid values).
════════════════════════════════ */
.cs-step {
display: block !important;
grid-template-columns: none !important;
padding: 1.75rem 0 1.75rem 1.25rem;
border-bottom: 1px solid var(--border);
border-left: 2px solid var(--border2);
padding-left: 1.25rem;
position: relative;
}
.cs-step:last-child { border-bottom: none; }
.cs-step::before {
content: "";
position: absolute;
left: -2px; top: 1.9rem;
width: 2px; height: 1.4rem;
background: linear-gradient(to bottom, var(--accent-text), var(--accent2));
}
.cs-step-title {
font-family: 'Syne', sans-serif;
font-size: 1.15rem !important;
font-weight: 700 !important;
letter-spacing: -0.01em;
color: var(--text) !important;
margin-bottom: 0.5rem !important;
}
.cs-step p {
color: var(--muted2);
}
/* ════════════════════════════════
SMOOTH THEME TRANSITION
════════════════════════════════ */
*, *::before, *::after {
transition:
background-color 0.25s ease,
border-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease;
}
img, svg, .badge-dot, .scroll-bar::after,
.cs-scroll-line::after, [class*="glow"],
[class*="blob"], [class*="animation"],
.nav-right, .nav-scrim, .nav-toggle span,
.shooting_star { transition: none !important; }
/* ════════════════════════════════
REDUCED MOTION
════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.reveal { opacity: 1 !important; transform: none !important; }
}
/* ════════════════════════════════════════════════
GLOBAL LABEL / EYEBROW CONSISTENCY
One treatment for every "label" across all pages —
case studies and the photography page alike.
14px, tracked, accessible accent text (AA in both
themes: 6.4:1 dark / 6.1:1 light). Loads last so it
overrides page-local label rules.
═══════════════════════════════════════════════════ */
.cs-section-label,
.ch-label,
.eyebrow,
.section-label {
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase;
color: var(--accent-text) !important;
}
/* ════════════════════════════════════════════════════════════
NAVIGATION SYSTEM — FINAL (consolidated, authoritative, appended)
Supersedes earlier patch layers. Single source of truth for nav
color, contrast, typography, focus, and glassmorphism tuning.
Target: WCAG 2.1 AA on every state, verified including worst-case
bright-photo bleed-through behind the translucent bar; premium,
restrained aesthetic (Apple/Linear/Stripe register) — typography,
weight and spacing carry hierarchy, not glow.
════════════════════════════════════════════════════════════ */
/* ── 1. Logo typeface ──
No page loads the 'Syne' webfont the original rule asks for, so it
silently fell back to each OS's default sans. Pin it to the family
the site actually loads. Swap back to 'Syne' here (single point of
change) once/if that webfont is added to every page's . */
.nav-logo {
font-family: var(--font-display, 'Roboto'), system-ui, sans-serif;
font-size: 24px; /* was drifting: 24px on index.html (local override),
18px elsewhere — locked here as the single source
of truth so the wordmark is identical site-wide. */
gap: 0.6rem;
}
.nav-logo .logo-mark { width: 26px !important; height: 26px !important; }
/* ── 2. Glassmorphism container ──
Opacity raised slightly (was 0.88/0.92) so nav text keeps full AA
margin even when a bright highlight in a photo sits directly behind
it (verified against a worst-case pure-white bleed-through below).
Blur raised slightly for a softer, more premium edge. */
nav {
background: var(--nav-bg);
backdrop-filter: blur(24px) saturate(140%);
-webkit-backdrop-filter: blur(24px) saturate(140%);
}
:root, [data-theme="dark"] { --nav-bg: rgba(8,8,13,0.93); }
[data-theme="light"] { --nav-bg: rgba(245,245,250,0.95); }
/* ── 3. Nav color tokens ──
Dedicated tokens so nav hierarchy is independent of body-text
tokens. Three deliberate steps: inactive (recessive, present),
hover (lift), active (accent-as-text, AA-safe — NOT the raw
--accent button-fill purple, which fails as text on dark: 3.7:1). */
:root, [data-theme="dark"] {
--nav-link: #f2f2f7; /* inactive — white, 17.9:1 typical, 15.7:1 worst-case */
--nav-link-hover: #ffffff; /* hover — pure white, still a step up from inactive */
--nav-link-active: #a59dff; /* active — 7.4:1 worst-case, 8.4:1 typical*/
--nav-active-bar: #8b82ff; /* underline / pill fill */
--nav-active-tint: rgba(165,157,255,0.12); /* active pill background */
--nav-toggle-bd: #70708f; /* toggle border — 3.7:1 worst-case (UI) */
--nav-toggle-bd-hv: #a59dff;
--nav-toggle-ic: #c2c4d4; /* toggle icon — 8.7:1 worst-case */
--nav-text-shadow: 0 1px 3px rgba(0,0,0,0.45); /* legibility cushion over photos */
}
[data-theme="light"] {
--nav-link: #54546e; /* inactive — 6.05:1 worst-case */
--nav-link-hover: #0d0d18;
--nav-link-active: #473fce; /* active — 6.05:1 worst-case */
--nav-active-bar: #4f47d6;
--nav-active-tint: rgba(79,71,214,0.08);
--nav-toggle-bd: #7a7a90; /* toggle border — 3.46:1 worst-case (UI) */
--nav-toggle-bd-hv: #473fce;
--nav-toggle-ic: #2c2c40;
--nav-text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}
/* ── 4. Nav links: default / hover / active / focus ──
Weight + color + a background chip carry the active state together
— never color alone. Letter-spacing and weight (not glow) do the
typographic lifting, per the Apple/Linear/Stripe direction. */
.nav-links a {
position: relative;
color: var(--nav-link);
font-weight: 500;
letter-spacing: 0.01em;
padding: 0.4rem 0.7rem;
border-radius: var(--radius-sm, 6px);
text-shadow: var(--nav-text-shadow);
transition: color 0.2s ease, background-color 0.2s ease;
}
.nav-links a:hover { color: var(--nav-link-hover); }
.nav-links a.active {
color: var(--nav-link-active);
font-weight: 600;
background: var(--nav-active-tint); /* soft pill, not a glow */
}
.nav-links a.active::after {
content: "";
position: absolute;
left: 0.7rem; right: 0.7rem; bottom: -2px;
height: 2px;
background: var(--nav-active-bar);
border-radius: 2px;
}
.nav-links a:focus-visible {
outline: 2px solid var(--nav-toggle-bd-hv);
outline-offset: 3px;
border-radius: var(--radius-sm, 6px);
}
@media (max-width: 899px) {
/* Drawer rows: full-width, so the pill becomes a left accent bar
instead of floating — color + weight + bar carry the state. */
.nav-links a {
color: var(--nav-link);
border-radius: 0;
padding: 1rem 1.75rem;
}
.nav-links a.active {
color: var(--nav-link-active);
background: var(--nav-active-tint);
border-left: 3px solid var(--nav-active-bar);
padding-left: calc(1.75rem - 3px);
}
.nav-links a.active::after { display: none; }
}
/* ── 5. Theme toggle: visible container + states ── */
.theme-toggle {
border: 1px solid var(--nav-toggle-bd);
color: var(--nav-toggle-ic);
}
.theme-toggle:hover {
border-color: var(--nav-toggle-bd-hv);
color: var(--nav-link-active);
background: var(--surface);
transform: scale(1.05);
}
.theme-toggle:focus-visible {
outline: 2px solid var(--nav-toggle-bd-hv);
outline-offset: 3px;
}
/* ── 6. Logo wordmark dot + remaining focus states ── */
.nav-logo span { color: var(--nav-link-active); }
.nav-logo:focus-visible,
.nav-toggle:focus-visible {
outline: 2px solid var(--nav-toggle-bd-hv, var(--accent-text));
outline-offset: 3px;
border-radius: var(--radius, 8px);
}
/* ── 7. Skip link (WCAG 2.2 / 2.4.1 bypass blocks) ──
Markup: Skip to content as
the first child of . Visually hidden until focused. */
.skip-link {
position: fixed;
top: -100px; left: 1rem;
z-index: 300;
padding: 0.6rem 1rem;
background: var(--accent);
color: var(--on-accent, #fff);
border-radius: var(--radius-sm, 6px);
font-family: var(--font-ui, system-ui), sans-serif;
font-size: 14px; font-weight: 600;
text-decoration: none;
transition: top 0.2s ease;
}
.skip-link:focus-visible {
top: 1rem;
outline: 2px solid var(--on-accent, #fff);
outline-offset: 2px;
}
/* ════════════════════════════════════════════════════════════
JOURNEY RAIL — shared sticky section indicator (appended)
Originally built page-local for photography.html; promoted here
so any page can reuse it without duplicating/drifting CSS.
Markup contract per page:
Use a , never