:root {
    color-scheme: dark;
    --background: #0c0c0e;
    --foreground: #f5f5f2;
    --secondary: #a2a29e;
    --accent: #ff4c24;
    --display: 'Manrope', sans-serif;
    --body: 'DM Sans', sans-serif;
    --gutter: clamp(1.25rem, 7vw, 5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; background: var(--background); }
body { min-height: 100svh; margin: 0; overflow-x: hidden; background: var(--background); color: var(--foreground); font-family: var(--body); -webkit-font-smoothing: antialiased; transition: opacity .18s ease, transform .18s ease; }
body.is-leaving { opacity: 0; transform: translateY(-8px); pointer-events: none; }
a { color: inherit; text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--accent); }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 5px; }

.subsite-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem var(--gutter); }
.back-link { color: var(--secondary); font-size: .88rem; }
.language-switch { display: flex; gap: .2rem; padding: .2rem; border: 1px solid rgba(245,245,242,.18); border-radius: 999px; cursor: pointer; }
.language-switch button { min-width: 2.1rem; padding: .4rem .45rem; border: 0; border-radius: 999px; background: transparent; color: var(--secondary); font: 600 .72rem var(--body); cursor: pointer; transition: background-color .24s ease, color .24s ease, transform .24s ease; }
.language-switch button[aria-pressed="true"] { transform: scale(1.06); background: var(--foreground); color: var(--background); }
.page-nav { display: flex; flex-wrap: wrap; gap: .6rem 1.3rem; padding: .8rem var(--gutter); border-top: 1px solid rgba(245,245,242,.1); border-bottom: 1px solid rgba(245,245,242,.1); color: var(--secondary); font-size: .82rem; }
.page-nav a { transition: color .22s ease, transform .22s ease; }
.page-nav a:active { transform: translateY(2px); }
.page-nav a[aria-current="page"] { color: var(--foreground); }
.page-main { width: min(100%, 1100px); min-height: 65svh; margin: 0 auto; padding: clamp(3.5rem, 9vw, 7rem) var(--gutter) 5rem; animation: page-enter .45s cubic-bezier(.16, 1, .3, 1) both; }
.page-main h1 { margin: 0 0 clamp(2.5rem, 6vw, 5rem); font: 700 clamp(3.3rem, 9vw, 7rem)/.95 var(--display); letter-spacing: -.07em; overflow-wrap: anywhere; }
.page-main h2 { margin: 0 0 1.4rem; font: 600 clamp(1.15rem, 2.2vw, 1.5rem)/1.3 var(--display); }
.page-main h3 { margin: 0 0 .5rem; font: 600 clamp(1.1rem, 2vw, 1.35rem)/1.3 var(--display); }
.page-main p { margin: 0; color: var(--secondary); font-size: .95rem; line-height: 1.7; }
.page-main strong { color: var(--foreground); font-weight: 500; }
.page-main section + section { margin-top: clamp(3rem, 7vw, 5rem); }
.timeline { display: grid; gap: 2rem; margin: 0; padding: 0; list-style: none; }
.timeline-entry { display: grid; grid-template-columns: minmax(7rem, .22fr) minmax(0, 1fr); gap: 1.5rem; }
.timeline-date { color: var(--secondary); font-size: .82rem; line-height: 1.5; }
.timeline-entry h3 { margin: 0 0 .45rem; }
.timeline-entry p + p { margin-top: .65rem; }
.content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 5vw, 4rem); }
.content-item { padding-top: 1.15rem; border-top: 1px solid rgba(245,245,242,.18); }
.network-list { display: grid; gap: 1.5rem; }
.network-person { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .6rem 1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(245,245,242,.14); }
.network-person a { font: 600 clamp(1.3rem, 4vw, 2rem) var(--display); letter-spacing: -.04em; }
.network-person span { color: var(--secondary); font-size: .85rem; }
.contact-details { display: grid; gap: .7rem; }
.contact-email { display: inline-block; width: fit-content; font: 500 clamp(1.15rem, 3.4vw, 2.1rem) var(--display); letter-spacing: -.04em; overflow-wrap: anywhere; }
.contact-location { margin-top: .5rem !important; }
.social-links { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; margin-top: 2rem; color: var(--secondary); font-size: .9rem; }
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin: 0 var(--gutter); padding: 1.2rem 0 2rem; border-top: 1px solid rgba(245,245,242,.14); color: #858580; font-size: .78rem; }
.translation-toast { position: fixed; z-index: 40; right: 1rem; bottom: max(.75rem, env(safe-area-inset-bottom)); left: 1rem; display: flex; align-items: center; justify-content: center; gap: .6rem; width: max-content; max-width: calc(100vw - 2rem); margin: auto; padding: .6rem .8rem; background: rgba(12,12,14,.12); color: #fff; backdrop-filter: blur(28px); opacity: 0; visibility: hidden; transform: translateY(1rem); transition: opacity .25s ease, transform .35s ease, visibility .25s; pointer-events: none; }
.translation-toast[hidden] { display: none; }
.translation-toast.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.translation-toast-mark { color: var(--accent); font-size: 1.2rem; font-weight: 800; line-height: 1; }
.translation-toast p { color: #fff; font-size: .85rem; }

@keyframes page-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 700px) {
    .language-switch { display: none; }
}
@media (max-width: 600px) {
    .subsite-header { padding-top: 1.1rem; }
    .page-nav { gap: .6rem 1rem; font-size: .75rem; }
    .page-main { padding-top: 3.5rem; }
    .timeline-entry { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
    .content-grid { grid-template-columns: 1fr; gap: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}