/* ── DESIGN TOKENS (mirrors index.html) ── */
:root, [data-theme="light"] {
--font-display: 'Instrument Serif', Georgia, serif;
--font-body: 'DM Sans', 'Helvetica Neue', sans-serif;
--text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
--text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
--text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
--text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
--text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
--text-3xl: clamp(3.5rem, 2.5rem + 5vw, 6rem);
--space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
--space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
--space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
--space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
--space-32: 8rem;
--color-bg: #f6f5f1;
--color-surface: #f9f8f5;
--color-surface-2: #fbfaf8;
--color-surface-offset: #eeecea;
--color-divider: #dddbd7;
--color-border: #d1cec8;
--color-text: #1a1917;
--color-text-muted: #6b6965;
--color-text-faint: #b0aea9;
--color-text-inverse: #f5f4f0;
--color-primary: #14365a;
--color-primary-hover: #0f2842;
--color-primary-highlight: #d0dce8;
--color-accent: #c5813d;
--color-accent-hover: #a96929;
--radius-sm: 0.375rem; --radius-md: 0.5rem;
--radius-lg: 0.75rem; --radius-xl: 1rem; --radius-full: 9999px;
--transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
--shadow-sm: 0 1px 2px oklch(0.2 0.01 240 / 0.06);
--shadow-md: 0 4px 12px oklch(0.2 0.01 240 / 0.08);
--shadow-lg: 0 12px 32px oklch(0.2 0.01 240 / 0.12);
--content-default: 960px;
--content-wide: 1200px;
/* Category colours */
--cat-training: #14365a; --cat-training-bg: #d0dce8;
--cat-course: #5a3e14; --cat-course-bg: #e8d8c0;
--cat-session: #1a4d2e; --cat-session-bg: #c6e0ce;
--cat-project: #3d1458; --cat-project-bg: #dbc8e8;
--cat-workshop: #4d2a14; --cat-workshop-bg: #e8d4c0;
}
[data-theme="dark"] {
--color-bg: #131210;
--color-surface: #1a1916;
--color-surface-2: #1e1d1b;
--color-surface-offset: #252320;
--color-divider: #2e2c29;
--color-border: #383532;
--color-text: #d4d2ce;
--color-text-muted: #888580;
--color-text-faint: #5a5855;
--color-text-inverse: #1a1917;
--color-primary: #7aafd4;
--color-primary-hover: #5b98c6;
--color-primary-highlight: #1e2d3e;
--color-accent: #e09e5a;
--color-accent-hover: #c8843c;
--shadow-sm: 0 1px 2px oklch(0 0 0 / 0.25);
--shadow-md: 0 4px 12px oklch(0 0 0 / 0.35);
--shadow-lg: 0 12px 32px oklch(0 0 0 / 0.45);
--cat-training: #7aafd4; --cat-training-bg: #1e2d3e;
--cat-course: #d4a45a; --cat-course-bg: #2e2010;
--cat-session: #5ad47a; --cat-session-bg: #102010;
--cat-project: #b07ad4; --cat-project-bg: #201028;
--cat-workshop: #d4855a; --cat-workshop-bg: #281810;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--color-bg:#131210; --color-surface:#1a1916; --color-surface-2:#1e1d1b;
--color-surface-offset:#252320; --color-divider:#2e2c29; --color-border:#383532;
--color-text:#d4d2ce; --color-text-muted:#888580; --color-text-faint:#5a5855;
--color-text-inverse:#1a1917; --color-primary:#7aafd4; --color-primary-hover:#5b98c6;
--color-accent:#e09e5a; --color-accent-hover:#c8843c;
--shadow-sm:0 1px 2px oklch(0 0 0 / 0.25); --shadow-md:0 4px 12px oklch(0 0 0 / 0.35);
--cat-training:#7aafd4; --cat-training-bg:#1e2d3e;
--cat-course:#d4a45a; --cat-course-bg:#2e2010;
--cat-session:#5ad47a; --cat-session-bg:#102010;
--cat-project:#b07ad4; --cat-project-bg:#201028;
--cat-workshop:#d4855a; --cat-workshop-bg:#281810;
}
}
/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: none; text-size-adjust: none;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility; scroll-behavior: smooth;
scroll-padding-top: var(--space-16); }
body { min-height: 100dvh; line-height: 1.6; font-family: var(--font-body);
font-size: var(--text-base); color: var(--color-text); background-color: var(--color-bg); }
img, picture, svg { display: block; max-width: 100%; }
ul[role="list"] { list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }
h1,h2,h3,h4,h5,h6 { text-wrap: balance; line-height: 1.15; }
p, li { text-wrap: pretty; max-width: 72ch; }
::selection { background: oklch(from var(--color-primary) l c h / 0.15); color: var(--color-text); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
button { cursor: pointer; background: none; border: none; }
a, button, [role="button"] { transition: color var(--transition-interactive), background var(--transition-interactive), border-color var(--transition-interactive), opacity var(--transition-interactive); }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0; }
/* ── LAYOUT ── */
.container { max-width: var(--content-default); margin-inline: auto; padding-inline: clamp(var(--space-4), 5vw, var(--space-12)); }
.container--wide { max-width: var(--content-wide); margin-inline: auto; padding-inline: clamp(var(--space-4), 5vw, var(--space-12)); }
/* ── NAV ── */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100;
background: oklch(from var(--color-bg) l c h / 0.92);
backdrop-filter: blur(16px);
border-bottom: 1px solid oklch(from var(--color-text) l c h / 0.07);
transition: background var(--transition-interactive); }
.nav__inner { max-width: var(--content-wide); margin-inline: auto;
padding-inline: clamp(var(--space-4), 5vw, var(--space-12));
height: clamp(56px, 7vw, 68px); display: flex; align-items: center; justify-content: space-between; }
.nav__logo { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--color-text); }
.nav__logo-mark { width: 36px; height: 36px; flex-shrink: 0; }
.nav__logo-name { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 400; letter-spacing: 0.01em; color: var(--color-text); }
.nav__links { display: flex; align-items: center; gap: var(--space-6); list-style: none; }
.nav__links a { font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none; letter-spacing: 0.02em; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--color-text); }
.nav__right { display: flex; align-items: center; gap: var(--space-3); }
.theme-toggle { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
color: var(--color-text-muted); border-radius: var(--radius-md); }
.theme-toggle:hover { color: var(--color-text); background: oklch(from var(--color-text) l c h / 0.06); }
.nav__cta { font-size: var(--text-xs); font-weight: 500; padding: var(--space-2) var(--space-4);
background: var(--color-primary); color: var(--color-text-inverse);
border-radius: var(--radius-full); text-decoration: none; letter-spacing: 0.03em; }
.nav__cta:hover { background: var(--color-primary-hover); }
.nav__hamburger { display: none; width: 36px; height: 36px; align-items: center; justify-content: center;
color: var(--color-text-muted); border-radius: var(--radius-md); }
.nav__hamburger:hover { color: var(--color-text); }
.nav__mobile { display: none; padding: var(--space-4) clamp(var(--space-4), 5vw, var(--space-12)) var(--space-6);
border-top: 1px solid var(--color-divider); }
.nav__mobile.open { display: block; }
.nav__mobile-links { list-style: none; display: flex; flex-direction: column; gap: var(--space-4); }
.nav__mobile-links a { font-size: var(--text-base); color: var(--color-text-muted); text-decoration: none; display: block; padding: var(--space-2) 0; }
.nav__mobile-links a:hover { color: var(--color-text); }
/* ── FOOTER ── */
.footer { padding-block: var(--space-8); border-top: 1px solid var(--color-divider); margin-top: var(--space-16); }
.footer__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); }
.footer__copy { font-size: var(--text-xs); color: var(--color-text-faint); }
.footer__links { display: flex; gap: var(--space-4); list-style: none; }
.footer__links a { font-size: var(--text-xs); color: var(--color-text-faint); text-decoration: none; }
.footer__links a:hover { color: var(--color-text-muted); }
/* ── SCROLL-TO-TOP ── */
.scroll-top { position: fixed; bottom: var(--space-6); right: var(--space-6);
width: 44px; height: 44px; background: var(--color-primary); color: var(--color-text-inverse);
border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center;
box-shadow: var(--shadow-md); opacity: 0; pointer-events: none;
transition: opacity var(--transition-interactive); z-index: 50; }
.scroll-top.visible { opacity: 1; pointer-events: auto; }
.scroll-top:hover { background: var(--color-primary-hover); }
/* ── SHARED RESPONSIVE ── */
/* ── RESPONSIVE ── */
@media (max-width: 1023px) { .nav__links { gap: var(--space-4); } .nav__links a { font-size: 0.8rem; } }
@media (max-width: 767px) {
.nav__links, .nav__cta { display: none; }
.nav__hamburger { display: flex; }
.nav__logo-name { font-size: 0.85rem; }
}
@media (max-width: 599px) {
.footer__inner { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}
@media (max-width: 479px) {
.scroll-top { bottom: var(--space-4); right: var(--space-4); width: 40px; height: 40px; }
}
@media (pointer: coarse) {
.nav__cta { padding: var(--space-3) var(--space-5); }
.theme-toggle, .nav__hamburger { min-width: 44px; min-height: 44px; }
}