/* ==========================================================================
   CSS RESUME & CAREER TIMELINE STYLESHEET
   Design System: "Paper" — light editorial, one deep green accent
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIABLES & THEMING
   -------------------------------------------------------------------------- */

/* Self-hosted variable fonts (SIL OFL, licenses in fonts/): Source Serif 4
   for headings, Source Sans 3 for text, Source Code Pro for tags. All three
   cover Latin and Cyrillic */

/* Source Serif 4, cyrillic */
@font-face {
    font-family: "Source Serif 4";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("fonts/source-serif-4-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Source Serif 4, latin-ext */
@font-face {
    font-family: "Source Serif 4";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("fonts/source-serif-4-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Source Serif 4, latin */
@font-face {
    font-family: "Source Serif 4";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("fonts/source-serif-4-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Source Sans 3, cyrillic */
@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("fonts/source-sans-3-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Source Sans 3, latin-ext */
@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("fonts/source-sans-3-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Source Sans 3, latin */
@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("fonts/source-sans-3-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Source Code Pro, cyrillic */
@font-face {
    font-family: "Source Code Pro";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("fonts/source-code-pro-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Source Code Pro, latin-ext */
@font-face {
    font-family: "Source Code Pro";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("fonts/source-code-pro-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Source Code Pro, latin */
@font-face {
    font-family: "Source Code Pro";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("fonts/source-code-pro-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Color Palette: green-grey page, white surfaces, ink text */
    --bg-main: #f4f6f3;
    --bg-surface: #fff;
    --bg-surface-alt: #e9efe8;    /* Tags and hovered outline buttons */
    --text-primary: #1a1f1c;
    --text-secondary: #4a524d;
    --text-muted: #68716b;

    /* The only accent: links, primary button, side branch */
    --accent: #1f4d3a;            /* Deep green */
    --accent-hover: #143426;
    --on-accent: #fff;

    /* Dark call-to-action block; its accent is the green of the logo */
    --bg-inverse: #1a1f1c;
    --text-on-inverse: #f4f6f3;
    --text-on-inverse-muted: #b5bdb7;
    --accent-on-inverse: #9fd8b0;
    --accent-on-inverse-hover: #c3e8cd;

    /* Career Tree Colors */
    --tree-trunk: #1a1f1c;        /* Ink for the main career trunk */
    --tree-branch: var(--accent); /* Side branch */
    --tree-root: #a3aca6;         /* Green-grey for education (lines only) */
    --border-color: #dbe2da;
    --error-color: #a8261b;       /* Form errors: text and border */
    --error-bg: #fcefed;

    /* Typography */
    --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
    --font-sans: "Source Sans 3", system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco,
                 Consolas, monospace;
    --heading-weight: 600;
    --heading-tracking: -0.01em;

    /* Layout & Geometry */
    --container-max-width: 1040px;
    --radius-lg: 6px;
    --radius-md: 6px;
    --radius-sm: 4px;
    --radius-round: 50%;          /* Round buttons and timeline nodes */
    --shadow-card: 0 1px 2px rgb(26 31 28 / 6%);
    --shadow-menu: 0 6px 20px rgb(26 31 28 / 14%);  /* Dropdowns over the page */
    --backdrop-color: rgb(26 31 28 / 45%);  /* Page under an open window */
    --shadow-flag: 0 0 0 1px var(--border-color);  /* Keeps white flag stripes visible */
    --shadow-card-highlight: 0 4px 16px rgb(26 31 28 / 10%);  /* Hovered career card */
    --shadow-node-highlight: 0 0 0 4px var(--bg-surface-alt); /* Its timeline node */
    --icon-size: 1em;             /* Icons follow the text size */
    --icon-gap: 0.4em;            /* Space between an icon and its label */
    --icon-stroke: 2;             /* Thin outline on the 24px icon grid */

    /* Career Timeline Geometry */
    --timeline-dates-width: 13rem;  /* Dates column left of the trunk */
    --timeline-axis-width: 5rem;    /* Column centred on the trunk line */
    --timeline-lane-width: 3rem;    /* Column centred on the side branch line */
    --timeline-line-width: 3px;
    --timeline-corner: 14px;        /* Rounded corners of the side branch */
    --timeline-gap: 2rem;           /* Space below a row with a card */
    --timeline-event-gap: 1.25rem;  /* Space below a row with dates only */
    --timeline-when-line: 1.4rem;   /* Line height of the dates column */
    --timeline-arrow-size: 1.1rem;
    --node-size: 16px;
    --node-size-small: 10px;

    /* Career Card: the trunk node is level with the card title */
    --card-padding: 1.75rem;
    --card-title-size: 1.3rem;
    --card-title-leading: 1.4;
    --transition-fast: 0.2s ease;
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-reveal: 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
    --case-grow-duration: 0.4s;     /* A case card growing or shrinking */
    --case-fade-duration: 0.3s;     /* Its story fading in or out */
    --transition-case: var(--case-grow-duration) cubic-bezier(0.45, 0, 0.25, 1);
    --transition-case-fade: var(--case-fade-duration) ease;
    --reveal-shift: 12px;           /* How far a block rises when it appears */
    --technology-shift: 4px;        /* How far a hidden tag rises when it shows */

    /* Legal pages: a readable text column */
    --legal-text-width: 45rem;
    --legal-body-padding: 2rem;
    --legal-title-size: 2.25rem;
    --footer-legal-indent: 2.1rem;  /* Logo plus its gap: under the copyright */
    --footer-legal-separator: "\00B7";
    --footer-legal-gap: 0;
    --footer-email-basis: auto;  /* Phone: the email takes its own row */
}

/* --------------------------------------------------------------------------
   2. RESET & BASE STYLES
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    color-scheme: light;
}

/* Anchor jumps glide, unless the visitor asked for less motion */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}

ul, ol {
    list-style: none;
}

/* Visually Hidden Helper (Accessibility) */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Panel: shared surface for cards and content blocks */
.panel {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 2rem;
}

.panel__title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: var(--heading-weight);
    color: var(--text-primary);
    margin-bottom: 1rem;
}

/* Button: outlined action (links and <button>); --primary is filled */
.button {
    display: inline-flex;
    font: inherit;
    background: transparent;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.925rem;
    font-weight: 600;
    white-space: nowrap;
    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast);
}

.button:hover {
    color: var(--text-primary);
    background-color: var(--bg-surface-alt);
    text-decoration: none;
}

.button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

.button--primary {
    border-color: var(--accent);
    background-color: var(--accent);
    color: var(--on-accent);
}

.button--primary:hover {
    border-color: var(--accent-hover);
    background-color: var(--accent-hover);
    color: var(--on-accent);
}

/* Compact variant for the sticky header */
.button--small {
    flex-shrink: 0;
    padding: 0.3rem 0.85rem;
    font-size: 0.85rem;
}

/* Icon: decorative SVG before a label, takes the colour of the text */
.icon {
    display: inline-block;
    flex-shrink: 0;
    width: var(--icon-size);
    height: var(--icon-size);
    margin-right: var(--icon-gap);
    vertical-align: -0.125em;
    fill: none;
    stroke: currentcolor;
    stroke-width: var(--icon-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Brand logos are filled glyphs, not outlines */
.icon--solid {
    fill: currentcolor;
    stroke: none;
}

/* An icon alone in a button: no gap for a label after it */
.icon--bare {
    margin-right: 0;
}

/* "Download PDF" stays hidden until print.js reveals it */
.button--print[hidden] {
    display: none;
}

/* --------------------------------------------------------------------------
   3. SITE HEADER, CONTACT LINKS & LANGUAGE SWITCHER
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-main);
    border-bottom: 1px solid var(--border-color);
}

.site-header__inner {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.site-header__menu {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

.site-header__link {
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.site-header__link:hover {
    color: var(--accent);
    text-decoration: none;
}

/* Contact icons appear in the header only on phones (section 9) */
.site-header__icon {
    display: none;
}

/* Brand: logo and name, a link to the home page */
.site-brand {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.6rem;
    color: var(--text-primary);
}

.site-brand:hover {
    text-decoration: none;
}

.site-brand__logo {
    width: 2rem;
    height: 2rem;
}

.site-brand__name {
    font-weight: 700;
    font-size: 1.05rem;
    white-space: nowrap;
}

/* Section menu sits right after the brand, actions stay on the right */
.site-header__nav--sections {
    flex: 1;
    margin-left: 1.5rem;
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Language switcher: a <details> menu that drops over the page content */
.language-switcher {
    position: relative;
}

.language-switcher__toggle {
    gap: 0.4rem;
    list-style: none;
    user-select: none;
}

.language-switcher__toggle::-webkit-details-marker {
    display: none;
}

/* Chevron after the code, decorative */
.language-switcher__toggle::after {
    content: "";
    width: 0.4em;
    height: 0.4em;
    margin: -0.2em 0 0 0.15em;
    border-right: 1.5px solid currentcolor;
    border-bottom: 1.5px solid currentcolor;
    transform: rotate(45deg);
    transition: transform var(--transition-fast);
}

.language-switcher[open] .language-switcher__toggle::after {
    margin-top: 0.2em;
    transform: rotate(-135deg);
}

.language-switcher__code {
    font-weight: 600;
    text-decoration: none;
}

.language-switcher__flag {
    flex-shrink: 0;
    width: 1.25em;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-flag);
}

.language-switcher__menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 1;
    min-width: 11rem;
    padding: 0.35rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-menu);
}

.language-switcher__link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.95rem;
    white-space: nowrap;
}

.language-switcher__link:hover {
    background: var(--bg-surface-alt);
    text-decoration: none;
}

.language-switcher__link[aria-current="true"] {
    background: var(--bg-surface-alt);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   4. MAIN CONTAINER & HERO
   -------------------------------------------------------------------------- */
.resume {
    max-width: var(--container-max-width);
    width: 100%;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
    flex: 1;
}

/* Narrow profile next to a wide About me; both panels share the taller height */
.resume__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: stretch;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.profile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    box-shadow: var(--shadow-card);
}

.profile__name {
    font-family: var(--font-serif);
    font-size: 2.25rem;
    font-weight: var(--heading-weight);
    line-height: 1.2;
    letter-spacing: var(--heading-tracking);
    color: var(--text-primary);
}

.profile__headline {
    font-size: 1.15rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.profile__location {
    font-size: 0.95rem;
    color: var(--text-muted);
}

/* The city opens Google Maps; the note after it stays plain text */
.profile__location-link {
    color: var(--text-secondary);
    white-space: nowrap;
}

.profile__location-link:hover {
    color: var(--accent);
}

.profile__location-note {
    display: block;
}

.profile__phone {
    font-size: 0.95rem;
}

.profile__phone-link {
    color: var(--text-primary);
    white-space: nowrap;
}

/* Spare height goes above the button, so it lines up with the panel bottom */
.profile__actions {
    margin-top: auto;
    padding-top: 0.75rem;
}

/* --------------------------------------------------------------------------
   5. ABOUT ME, KEY EXPERTISE & LANGUAGES
   -------------------------------------------------------------------------- */
.profile-summary__text {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.7;
}

.profile-summary__text + .profile-summary__text {
    margin-top: 1rem;
}

/* Key Expertise Grid: three groups in a row on desktop, wraps when narrow */
.expertise__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: 1.25rem;
}

.expertise__group {
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.25rem;
}

.expertise__term {
    font-weight: 600;
    color: var(--accent);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.expertise__skills {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Technology List Badges. Margins instead of a gap: a folded tag drops its
   margins too and takes no room at all, so the tags around it never jump */
.technology-list {
    --technology-gap: 0.5rem;

    display: flex;
    flex-wrap: wrap;
    margin: 0.75rem calc(-1 * var(--technology-gap)) calc(-1 * var(--technology-gap)) 0;
}

.technology-list__item,
.technology-list__toggle {
    margin: 0 var(--technology-gap) var(--technology-gap) 0;
}

.technology-list__item {
    overflow: hidden;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

/* "and N more" / "Show less": an empty <details> at the end of the list.
   While it is closed the hidden tags stay out, folded to zero size, so
   they can unfold smoothly; screen only, print shows every tag.
   Desktop tags fold the same way on tablets and phones (section 9) */
@media screen {
    .technology-list:has(.technology-toggle:not([open]))
    .technology-list__item--hidden {
        display: none;
        opacity: 0;
        transform: translateY(var(--technology-shift));
        inline-size: 0;
        block-size: 0;
        margin: 0;
        padding: 0;
        border-width: 0;
    }
}

/* Hidden tags fade in, rise and unfold; on "Show less" they fold back
   before they leave the layout */
@media screen and (prefers-reduced-motion: no-preference) {
    .technology-list {
        interpolate-size: allow-keywords;
    }

    .technology-list__item--hidden,
    .technology-list__item--desktop {
        transition:
            opacity var(--transition-smooth),
            transform var(--transition-smooth),
            inline-size var(--transition-smooth),
            block-size var(--transition-smooth),
            margin var(--transition-smooth),
            padding var(--transition-smooth),
            border-width var(--transition-smooth),
            display var(--transition-smooth) allow-discrete;
    }

    @starting-style {
        .technology-list:has(.technology-toggle[open])
        .technology-list__item--hidden,
        .technology-list:has(.technology-toggle[open])
        .technology-list__item--desktop {
            opacity: 0;
            transform: translateY(var(--technology-shift));
            inline-size: 0;
            block-size: 0;
            margin: 0;
            padding: 0;
            border-width: 0;
        }
    }
}

/* The toggle shows the count for the screen width: desktop counts without
   the desktop tags. A toggle with nothing left to show on desktop is for
   tablets and phones only (section 9) */
.technology-toggle__more--narrow,
.technology-list__toggle--narrow {
    display: none;
}

.technology-list__toggle {
    display: flex;
    align-items: center;
}

.technology-toggle__summary {
    list-style: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.technology-toggle__summary::-webkit-details-marker {
    display: none;
}

.technology-toggle__summary:hover {
    color: var(--accent-hover);
}

.technology-toggle__summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.technology-toggle[open] .technology-toggle__more,
.technology-toggle:not([open]) .technology-toggle__less {
    display: none;
}

/* Languages: one line under the career, wraps on narrow screens */
.languages {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1.5rem;
    margin-top: 1.5rem;
    padding-block: 1rem;
    box-shadow: var(--shadow-card);
}

.languages__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.languages__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0;
}

.languages__item {
    display: flex;
    gap: 0.35em;
    white-space: nowrap;
}

/* Decorative separator between languages, hidden from screen readers;
   it trails the item so a wrapped line never starts with it */
.languages__item:not(:last-child)::after {
    content: "·" / "";
    margin-inline: 0.25em 0.6em;
    color: var(--text-muted);
}

.languages__name {
    color: var(--text-primary);
}

.languages__level {
    color: var(--text-secondary);
}

/* ==========================================================================
   6. CAREER TIMELINE
   Every row is the same grid: dates | trunk | card | side lane. Each row
   draws its own piece of the trunk (::before) and of the side branch
   (::after), so the lines stay continuous whatever the card heights.
   ========================================================================== */
.timeline {
    margin-top: 2.75rem;
}

.timeline__row {
    /* Trunk centre from the left edge, side lane centre from the right edge */
    --trunk-x: calc(var(--timeline-dates-width) + var(--timeline-axis-width) / 2);
    --lane-right: calc(var(--timeline-lane-width) / 2);
    --node-top: calc(
        var(--card-padding) + var(--card-title-size) * var(--card-title-leading) / 2
    );
    --axis-color: var(--tree-trunk);

    position: relative;
    display: grid;
    grid-template-columns:
        var(--timeline-dates-width)
        var(--timeline-axis-width)
        minmax(0, 1fr)
        var(--timeline-lane-width);
    grid-template-areas: "when axis card lane";
    align-items: start;
    padding-bottom: var(--timeline-gap);
}

/* Trunk segment */
.timeline__row::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--trunk-x) - var(--timeline-line-width) / 2);
    width: var(--timeline-line-width);
    background: var(--axis-color);
}

/* The trunk ends at the oldest node */
.timeline__row:last-child::before {
    bottom: auto;
    height: var(--node-top);
}

/* Rows with dates only: node level with the first line of text */
.timeline__row--marker,
.timeline__row--merge,
.timeline__row--fork {
    --node-top: calc(var(--timeline-when-line) / 2);

    padding-bottom: var(--timeline-event-gap);
}

/* Header row: title on the left, arrow on top of the trunk */
.timeline__row--head {
    padding-bottom: 1.5rem;
}

/* The trunk starts inside the solid tip of the arrow, so it never pokes out */
.timeline__row--head::before {
    top: var(--timeline-line-width);
}

/* Rotated square with two borders; (√2 − 1) / 2 of its side puts the tip
   exactly at the row top */
.timeline__row--head::after {
    content: "";
    position: absolute;
    top: calc(var(--timeline-arrow-size) * 0.2071);
    left: calc(var(--trunk-x) - var(--timeline-arrow-size) / 2);
    width: var(--timeline-arrow-size);
    height: var(--timeline-arrow-size);
    border-top: var(--timeline-line-width) solid var(--axis-color);
    border-left: var(--timeline-line-width) solid var(--axis-color);
    transform: rotate(45deg);
}

.timeline__title {
    grid-area: when;
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: var(--heading-weight);
    line-height: 1.2;
    letter-spacing: var(--heading-tracking);
    color: var(--text-primary);
}

/* Dates column */
.timeline__when {
    grid-area: when;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-top: calc(var(--node-top) - var(--timeline-when-line) / 2);
    line-height: var(--timeline-when-line);
    text-align: right;
}

.timeline__period {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.timeline__duration,
.timeline__date {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.timeline__caption {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Nodes */
.timeline__node {
    --node-color: var(--axis-color);

    grid-area: axis;
    justify-self: center;
    position: relative;
    z-index: 2;
    width: var(--node-size);
    height: var(--node-size);
    margin-top: calc(var(--node-top) - var(--node-size) / 2);
    border-radius: var(--radius-round);
    background: var(--bg-main);
    border: 3px solid var(--node-color);
}

.timeline__node--event {
    --node-color: var(--tree-branch);

    width: var(--node-size-small);
    height: var(--node-size-small);
    margin-top: calc(var(--node-top) - var(--node-size-small) / 2);
    background: var(--node-color);
    border: 0;
}

.timeline__node--side {
    --node-color: var(--tree-branch);

    grid-area: lane;
}

/* Side branch: leaves the trunk at the merge point, runs down the lane
   on the right and comes back at the fork point */
.timeline__row--merge::after,
.timeline__row--fork::after,
.timeline__row--in-branch::after {
    content: "";
    position: absolute;
    left: var(--trunk-x);
    right: calc(var(--lane-right) - var(--timeline-line-width) / 2);
    border: 0 solid var(--tree-branch);
    border-right-width: var(--timeline-line-width);
}

.timeline__row--merge::after {
    top: calc(var(--node-top) - var(--timeline-line-width) / 2);
    bottom: 0;
    border-top-width: var(--timeline-line-width);
    border-top-right-radius: var(--timeline-corner);
}

.timeline__row--fork::after {
    top: 0;
    height: calc(var(--node-top) + var(--timeline-line-width) / 2);
    border-bottom-width: var(--timeline-line-width);
    border-bottom-right-radius: var(--timeline-corner);
}

.timeline__row--in-branch::after {
    top: 0;
    bottom: 0;
    left: auto;
}

/* Education: roots of the trunk */
.timeline__roots .timeline__row {
    --axis-color: var(--tree-root);
}

.timeline__row--group {
    padding-bottom: 1rem;
}

.timeline__group-title {
    grid-area: card;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Career Card: main and side positions, education */
.career-card {
    --card-accent: var(--tree-trunk);

    grid-area: card;
    padding: var(--card-padding);
    box-shadow: var(--shadow-card);
}

.career-card--side {
    --card-accent: var(--tree-branch);
}

/* The root colour is too light for text: programs use the secondary text */
.career-card--education {
    --card-accent: var(--text-secondary);
}

.career-card__company {
    font-family: var(--font-serif);
    font-size: var(--card-title-size);
    font-weight: var(--heading-weight);
    line-height: var(--card-title-leading);
    color: var(--text-primary);
}

.career-card__company-link {
    color: inherit;
}

.career-card__role {
    font-size: 1rem;
    font-weight: 600;
    color: var(--card-accent);
    margin-top: 0.25rem;
}

.career-card__meta {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Main positions and education show their dates in the dates column;
   the copy in the card stays for screen readers, phones and print */
.career-card--main .career-card__when,
.career-card--education .career-card__when {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.career-card__description {
    margin-top: 1.25rem;
    color: var(--text-secondary);
    font-size: 0.975rem;
}

.career-card__section {
    margin-top: 1.25rem;
}

.career-card__section-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.career-card__list {
    list-style-type: disc;
    padding-left: 1.25rem;
    color: var(--text-secondary);
    font-size: 0.925rem;
}

.career-card__list-item {
    margin-bottom: 0.4rem;
}

/* --------------------------------------------------------------------------
   7. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
    margin-top: auto;
    border-top: 1px solid var(--border-color);
    background: var(--bg-surface);
    padding: 3rem 1.5rem 2rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.site-footer__title {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: var(--heading-weight);
    letter-spacing: var(--heading-tracking);
    color: var(--text-primary);
}

.site-footer__intro {
    max-width: 36rem;
    margin: 0.75rem auto 0;
    color: var(--text-secondary);
    font-size: 1rem;
}

.site-footer__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.site-footer__phone {
    margin-top: 1.5rem;
    font-size: 1rem;
}

.site-footer__phone-link {
    color: var(--text-primary);
    white-space: nowrap;
}

.site-footer__copyright {
    margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   8. HOME PAGE
   -------------------------------------------------------------------------- */
.home,
.legal {
    max-width: var(--container-max-width);
    width: 100%;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
    flex: 1;
}

/* Hero: text on the left, the big logo on the right, key numbers below */
.home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem 3rem;
    align-items: center;
    box-shadow: var(--shadow-card);
}

.home-hero__eyebrow {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.home-hero__title {
    margin-top: 0.75rem;
    font-family: var(--font-serif);
    font-size: 2.75rem;
    font-weight: var(--heading-weight);
    line-height: 1.15;
    letter-spacing: var(--heading-tracking);
    color: var(--text-primary);
}

.home-hero__text {
    max-width: 36rem;
    margin-top: 1rem;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

.home-hero__logo {
    width: 12rem;
    height: auto;
}

/* Key numbers: a row under the hero, separated by a line */
.home-stats {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1.25rem 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--border-color);
}

.home-stats__value {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: var(--heading-weight);
    color: var(--text-primary);
}

.home-stats__label {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Section: heading and a one-line intro above the content */
.home-section {
    margin-top: 4rem;
    scroll-margin-top: 6rem;
}

.home-section__title {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: var(--heading-weight);
    letter-spacing: var(--heading-tracking);
    color: var(--text-primary);
}

.home-section__intro {
    margin-top: 0.5rem;
    font-size: 1.05rem;
    color: var(--text-secondary);
}

/* Services: three cards per row, as many rows as there are services */
.services {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 1.75rem;
}

.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.75rem;
    box-shadow: var(--shadow-card);
    transition: border-color var(--transition-fast);
}

.service-card__icon {
    display: inline-flex;
    font-size: 1.75rem;
    color: var(--accent);
}

.service-card__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
}

.service-card__text {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* "More" sits at the bottom right of the card */
.service-card__foot {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 0.5rem;
}

/* "More" opens the service window; its ::after covers the whole card, so
   a click anywhere on the card opens it */
.service-card__more {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.2rem;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.service-card__more::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
}

.service-card__more:focus-visible {
    outline: none;
}

.service-card__more:focus-visible::after {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Service window: a native popover over the dimmed page, the page under it
   does not scroll */
.service-window {
    --window-padding: 1.75rem;

    width: min(52rem, calc(100% - 2rem));
    max-height: calc(100dvh - 4rem);
    margin: auto;
    padding: var(--window-padding);
    overflow-y: auto;
    overscroll-behavior: contain;
    color: var(--text-primary);
    box-shadow: var(--shadow-menu);
    pointer-events: auto;
}

.service-window::backdrop {
    background: var(--backdrop-color);
}

/* While a window is open, a click outside only closes it: the page under
   it ignores the pointer, so the click does not open another card; the
   window itself takes the pointer back */
body:has(.service-window:popover-open) {
    overflow: hidden;
    pointer-events: none;
}

.service-window__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.service-window__icon {
    display: inline-flex;
    font-size: 1.5rem;
    color: var(--accent);
}

.service-window__title {
    font-size: 1.35rem;
    font-weight: 700;
}

.service-window__close {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-left: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 1.1rem;
    cursor: pointer;
    transition:
        border-color var(--transition-fast),
        color var(--transition-fast);
}

.service-window__close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.service-window__text {
    margin-top: 0.5rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.service-window__label {
    margin-top: 1.1rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.service-window__list,
.service-window__proofs {
    display: grid;
    gap: 0.4rem;
    margin-top: 0.5rem;
    color: var(--text-secondary);
}

/* What I do in two columns */
.service-window__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
}

.service-window__columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
}

.service-window__item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.service-window__check {
    flex-shrink: 0;
    color: var(--accent);
}

.service-window__case {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-weight: 700;
    transition: border-color var(--transition-fast);
}

.service-window__discuss {
    margin-top: 1.25rem;
}

/* Contact window: the frame of the service window, narrower, with the form.
   Phones get the full screen from the service window rules (section 9) */
.contact-window {
    width: min(34rem, calc(100% - 2rem));
}

.contact-form__intro {
    margin-top: 0.5rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.contact-form__fields {
    display: grid;
    gap: 0.4rem;
    min-inline-size: 0;
    margin: 0.75rem 0 0;
    padding: 0;
    border: 0;
}

.contact-form__label {
    margin-top: 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.contact-form__input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-primary);
    font: inherit;
    transition: border-color var(--transition-fast);
}

.contact-form__input::placeholder {
    color: var(--text-muted);
}

.contact-form__input:focus-visible {
    border-color: var(--accent);
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.contact-form__input--message {
    min-height: 8rem;
    resize: vertical;
}

/* Spam trap: off the screen for people, still in the form for bots */
.contact-form__trap {
    position: absolute;
    left: -100vw;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-form__consent {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 0.9rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    cursor: pointer;
}

.contact-form__checkbox {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15rem;
    accent-color: var(--accent);
}

.contact-form__policy {
    color: var(--accent);
    font-weight: 600;
    text-decoration: underline;
}

.contact-form__error {
    margin-top: 0.75rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--error-color);
    border-radius: var(--radius-sm);
    background: var(--error-bg);
    color: var(--error-color);
    font-size: 0.95rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.contact-form__send {
    justify-self: start;
    margin-top: 1rem;
}

/* While the form is sending, the fields and the button are off */
.contact-form__fields:disabled .contact-form__input,
.contact-form__fields:disabled .contact-form__consent,
.contact-form__send:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Sent: the form gives way to a thank-you message */
.contact-window__sent {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 0 1rem;
    text-align: center;
}

.contact-window__sent[hidden] {
    display: none;
}

.contact-window__sent-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border: 2px solid var(--accent);
    border-radius: var(--radius-round);
    color: var(--accent);
    font-size: 1.75rem;
}

.contact-window__sent-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.contact-window__sent-text {
    color: var(--text-secondary);
}

.contact-window__sent-close {
    margin-top: 1rem;
}

/* How I work: hovering a step fills its number circle with the accent */
@media screen and (hover: hover) {
    .process__step:hover .process__number {
        background: var(--accent);
        color: var(--text-on-inverse);
    }
}

@media screen and (hover: hover) and (prefers-reduced-motion: no-preference) {
    .process__number {
        transition:
            background-color var(--transition-fast),
            color var(--transition-fast);
    }
}

/* Service cards open a window, so they react to the pointer */
@media screen and (hover: hover) {
    .case-card:has(> .case-card__more:not([open])):hover,
    .service-card:has(.service-card__more):hover,
    .service-window__case:hover,
    .service-window__close:hover {
        border-color: var(--accent);
    }

    .service-window__close:hover {
        color: var(--accent);
    }
}

/* Section title and intro on the left, slider arrows on the right */
.home-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
}

/* Cases: a slider. The cards scroll sideways and snap to the left edge, part
   of the next card stays in view; slider.js adds the arrows. Card widths are
   in cqi of the slider, so the card columns can be sized from them too */
.cases {
    --case-card-width: 40cqi;
    --cases-gap: 1.5rem;
    --case-card-open-width: calc(var(--case-card-width) * 2 + var(--cases-gap));
    --case-card-padding: 1.75rem;
    --case-column-gap: 2rem;
    --case-toggle-size: 2.25rem;
    --case-toggle-offset: 1rem;

    container-type: inline-size;
    display: flex;
    gap: var(--cases-gap);
    margin-top: 1.75rem;
    padding-bottom: 0.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

.case-card {
    position: relative;
    flex: 0 0 var(--case-card-width);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: var(--case-card-padding);
    box-shadow: var(--shadow-card);
    scroll-snap-align: start;
}

/* The card grows and shrinks smoothly, unless the visitor asked for less
   motion; slider.js turns snapping off while it does. A closing card waits
   for its story to fade out before it shrinks */
@media (prefers-reduced-motion: no-preference) {
    .case-card {
        transition: flex-basis var(--transition-case) var(--case-fade-duration);
    }

    .case-card:has(> .case-card__more[open]) {
        transition: flex-basis var(--transition-case);
    }
}

.cases[data-animating] {
    scroll-snap-type: none;
}

/* Closed cards share the height of the tallest one; while a case is open,
   the others keep their own height instead of growing to the open one */
.cases:has(.case-card__more[open]) > .case-card:has(> .case-card__more:not([open])) {
    align-self: flex-start;
}

/* Open case: the card grows sideways to two cards. The short part stays on
   the left, Problem -> Solution -> Result take the right column; <details>
   steps out of the way (display: contents), so its toggle and its content
   become cells of the card grid. The grid is the same on a closed card: the
   story waits in the second column, cut off at the card edge. Both columns
   have their final widths from the start (the left one as wide as a closed
   card, the right one takes the rest of an open card), so no text re-wraps
   while the card grows. Phones open the card downwards instead */
@media screen and (width >= 768px) {
    .case-card {
        display: grid;
        grid-template-columns:
            calc(var(--case-card-width) - 2 * var(--case-card-padding))
            calc(
                var(--case-card-open-width) - var(--case-card-width)
                - var(--case-column-gap)
            );
        grid-template-rows: repeat(4, auto) 1fr;
        align-content: start;
        column-gap: var(--case-column-gap);
        min-inline-size: 0;
        overflow-x: clip;
    }

    .case-card:has(> .case-card__more[open]) {
        flex-basis: var(--case-card-open-width);
    }

    .case-card__more {
        display: contents;
    }

    .case-card__more::details-content {
        grid-column: 2;
        grid-row: 1 / -1;
    }
}

/* The story shows up after the card has grown: it fades in and unfolds to
   its height. On closing it goes first, then the card shrinks */
@media screen and (width >= 768px) and (prefers-reduced-motion: no-preference) {
    .cases {
        interpolate-size: allow-keywords;
    }

    .case-card__more::details-content {
        block-size: 0;
        overflow-y: clip;
        opacity: 0;
        transition:
            opacity var(--transition-case-fade),
            block-size var(--transition-case-fade),
            content-visibility var(--transition-case-fade) allow-discrete;
    }

    .case-card__more[open]::details-content {
        block-size: auto;
        opacity: 1;
        transition:
            opacity var(--transition-case-fade) var(--case-grow-duration),
            block-size var(--transition-case-fade) var(--case-grow-duration);
    }
}

.case-card__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-right: calc(var(--case-toggle-size) + 0.75rem);
}

.case-card__logo {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
    object-fit: contain;
}

/* The logo links to the project site; like the bare logo, it sits above
   the card-wide toggle, so a click on it does not open the case */
.case-card__logo-link {
    position: relative;
    z-index: 1;
    display: flex;
    flex-shrink: 0;
    border-radius: var(--radius-md);
}

.case-card__logo-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.case-card__summary {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.55;
}

/* The toggle is a round button in the top right corner of the card: + on a
   closed card, x on an open one. The <summary> itself stays in the flow
   with no visible content; the button is placed against the card */
.case-card__toggle {
    display: block;
    list-style: none;
    cursor: pointer;
}

.case-card__toggle::-webkit-details-marker {
    display: none;
}

/* A closed card opens on a click anywhere: the toggle's ::before covers the
   whole card. The logo sits above it (position and z-index on the logo) */
.case-card__more:not([open]) > .case-card__toggle::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
}

.case-card__toggle-button {
    position: absolute;
    top: var(--case-toggle-offset);
    right: var(--case-toggle-offset);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--case-toggle-size);
    height: var(--case-toggle-size);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-round);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 1.1rem;
    transition:
        border-color var(--transition-fast),
        color var(--transition-fast);
}

.case-card__more[open] .case-card__icon-more,
.case-card__more:not([open]) .case-card__icon-less,
.case-card__more[open] .case-card__toggle-more,
.case-card__more:not([open]) .case-card__toggle-less {
    display: none;
}

.case-card__toggle:hover .case-card__toggle-button {
    border-color: var(--accent);
    color: var(--accent);
}

.case-card__toggle:focus-visible {
    outline: none;
}

.case-card__toggle:focus-visible .case-card__toggle-button {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.slider-nav {
    display: flex;
    flex-shrink: 0;
    gap: 0.5rem;
}

.slider-nav[hidden] {
    display: none;
}

.slider-nav__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
    transition:
        border-color var(--transition-fast),
        color var(--transition-fast);
}

.slider-nav__button:disabled {
    color: var(--text-muted);
    cursor: default;
    opacity: 0.5;
}

.slider-nav__button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

.slider-nav__button:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}

.case-card__tags {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.case-card__metric {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: var(--heading-weight);
    line-height: 1.2;
    color: var(--accent);
}

.case-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.case-card__story {
    display: grid;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.case-card__term {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.case-card__text {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.55;
}

/* About: photo with name and city on the left, the pitch on the right */
.home-about {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: 2.5rem;
    margin-top: 1.75rem;
    box-shadow: var(--shadow-card);
}

.home-about__person {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.home-about__photo {
    width: 12rem;
    height: 12rem;
    border-radius: var(--radius-round);
    object-fit: cover;
}

/* No photo yet: a round placeholder with a person outline */
.home-about__photo--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    background: var(--bg-surface-alt);
    color: var(--text-muted);
    font-size: 4rem;
}

.home-about__name {
    margin-top: 1rem;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.home-about__city {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.home-about__title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: var(--heading-weight);
    color: var(--text-primary);
}

.home-about__text {
    margin-top: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.65;
}

.home-about__points {
    display: grid;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.home-about__point {
    display: flex;
    align-items: baseline;
    color: var(--text-primary);
}

.home-about__check {
    flex-shrink: 0;
    color: var(--accent);
}

.home-about__note {
    margin-top: 1.25rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.home-about__cv-link {
    display: inline-flex;
    align-items: center;
    margin-top: 1rem;
    font-weight: 700;
}

/* How I work: numbered steps, the numbers sit on one line */
.process {
    --process-number-size: 2.75rem;
    --process-gap: 2rem;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--process-gap);
    margin-top: 2rem;
    list-style: none;
}

.process__step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* Line from this number to the next one, decorative */
.process__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--process-number-size) / 2 - 1px);
    left: var(--process-number-size);
    width: calc(100% + var(--process-gap) - var(--process-number-size));
    border-top: 2px solid var(--border-color);
}

.process__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--process-number-size);
    height: var(--process-number-size);
    margin-bottom: 0.75rem;
    border: 2px solid var(--accent);
    border-radius: var(--radius-round);
    background: var(--bg-main);
    color: var(--accent);
    font-weight: 700;
    font-size: 1.1rem;
}

.process__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.process__text {
    color: var(--text-primary);
}

.process__details {
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.process__duration {
    margin-top: 0.25rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Call to action: a dark block at the end of the page */
.home-cta {
    margin-top: 4rem;
    padding: 3.5rem 2rem;
    border-radius: var(--radius-lg);
    background: var(--bg-inverse);
    color: var(--text-on-inverse);
    text-align: center;
}

.home-cta__title {
    font-family: var(--font-serif);
    font-size: 2.25rem;
    font-weight: var(--heading-weight);
    letter-spacing: var(--heading-tracking);
}

.home-cta__text {
    max-width: 32rem;
    margin: 0.75rem auto 0;
    color: var(--text-on-inverse-muted);
}

.home-cta__button {
    margin-top: 1.75rem;
    border-color: var(--accent-on-inverse);
    background-color: var(--accent-on-inverse);
    color: var(--bg-inverse);
    font-size: 1rem;
    padding: 0.7rem 1.75rem;
}

.home-cta__button:hover {
    border-color: var(--accent-on-inverse-hover);
    background-color: var(--accent-on-inverse-hover);
    color: var(--bg-inverse);
}

.home-cta__email {
    margin-top: 1rem;
    font-size: 0.95rem;
}

/* Light link on the dark block; on a very narrow screen the address wraps
   instead of overflowing */
.home-cta__email-link {
    color: var(--text-on-inverse-muted);
    overflow-wrap: anywhere;
    transition: color var(--transition-fast);
}

.home-cta__email-link:hover {
    color: var(--accent-on-inverse);
}

.home-cta__email-link:focus-visible {
    outline-color: var(--accent-on-inverse);
}

/* Home footer: one line with the copyright on the left, links on the right */
.home-footer {
    margin-top: auto;
    border-top: 1px solid var(--border-color);
}

.home-footer__inner {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.home-footer__copyright {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.home-footer__logo {
    width: 1.5rem;
    height: 1.5rem;
}

.home-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

.home-footer__link {
    font-size: 0.9rem;
    color: var(--text-primary);
}

.home-footer__links-item--email {
    flex-basis: var(--footer-email-basis);
}

/* Legal links: their own row under the copyright, in line with its text */
.home-footer__legal {
    display: flex;
    flex-basis: 100%;
    flex-wrap: wrap;
    gap: var(--footer-legal-gap);
    padding-left: var(--footer-legal-indent);
    font-size: 0.85rem;
    color: var(--text-muted);
}

.home-footer__legal-item + .home-footer__legal-item::before {
    content: var(--footer-legal-separator);
    margin: 0 0.5rem;
}

.home-footer__legal-link {
    color: var(--text-muted);
}

.home-footer__legal-link:hover {
    color: var(--accent);
}

/* ==========================================================================
   9. RESPONSIVE DESIGN
   Ranges: phone up to 767px, tablet 768-1023px, desktop 1024-1439px (the
   base styles), wide screen from 1440px
   ========================================================================== */

/* Phone */
@media screen and (width <= 767px) {
    /* Legal pages: a smaller title and padding, footer links from the edge */
    :root {
        --legal-body-padding: 1.25rem;
        --legal-title-size: 1.75rem;
        --footer-legal-indent: 0;
        --footer-legal-separator: none;
        --footer-legal-gap: 0.25rem 1rem;
        --footer-email-basis: 100%;
    }

    /* Keep the contact links and "Download PDF" on one line */
    .site-header__inner {
        padding: 0.75rem 1rem;
        gap: 0.75rem;
    }

    /* Contacts become a single row of icons; the labels stay for screen
       readers */
    .site-header__menu {
        flex-wrap: nowrap;
        gap: 0.25rem;
    }

    .site-header__link {
        display: inline-flex;
        padding: 0.2rem;
        font-size: 0.9rem;
    }

    .site-header__icon {
        display: inline-block;
        width: 1.25rem;
        height: 1.25rem;
        margin-right: 0;
    }

    .site-header__label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* Section menu moves to its own row under the brand and actions */
    .site-header__inner:has(.site-header__nav--sections) {
        flex-wrap: wrap;
    }

    .site-header__inner:has(.site-header__nav--sections) .site-header__actions {
        gap: 0.5rem;
    }

    .site-header__nav--sections {
        order: 1;
        flex-basis: 100%;
        margin-left: 0;
    }

    .resume__hero {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Home: logo goes under the text, cards stack in one column */
    .home-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-hero__title {
        font-size: 2rem;
    }

    .home-hero__logo {
        width: 7rem;
    }

    .home-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Narrow phones: the numbers shrink with the screen to stay in their
       column */
    .home-stats__value {
        font-size: clamp(1.2rem, 6.5vw, 1.75rem);
    }

    .services,
    .home-about {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The service window takes the whole screen, × stays on top */
    .service-window {
        --window-padding: 1.25rem;

        width: 100%;
        max-width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border: 0;
        border-radius: 0;
    }

    .service-window__list,
    .service-window__columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .service-window__head {
        position: sticky;
        top: calc(-1 * var(--window-padding));
        margin: calc(-1 * var(--window-padding)) calc(-1 * var(--window-padding)) 0;
        padding: var(--window-padding);
        background: var(--bg-surface);
    }

    /* One case in view, the edge of the next one hints at the swipe */
    .cases {
        --case-card-width: 85cqi;
    }

    /* Steps go in a column; the line runs down through the numbers */
    .process {
        --process-gap: 1.75rem;
        --process-indent: calc(var(--process-number-size) + 1rem);

        grid-template-columns: minmax(0, 1fr);
        padding-left: var(--process-indent);
    }

    .process__step:not(:last-child)::after {
        top: var(--process-number-size);
        left: calc(var(--process-number-size) / 2 - 1px - var(--process-indent));
        width: 0;
        height: calc(100% + var(--process-gap) - var(--process-number-size));
        border-top: 0;
        border-left: 2px solid var(--border-color);
    }

    .process__number {
        position: absolute;
        top: 0;
        left: calc(-1 * var(--process-indent));
        margin-bottom: 0;
    }

    .process__title {
        margin-top: 0.6rem;
    }

    /* Hero buttons one under the other, full width */
    .home-hero__actions {
        flex-direction: column;
    }

    /* Footer contacts in two columns, "Download PDF" under them */
    .site-footer__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer__print {
        grid-column: 1 / -1;
    }

    .site-footer__button {
        width: 100%;
        justify-content: center;
    }

    .home-cta {
        padding: 2.5rem 1.25rem;
    }

    .home-cta__title {
        font-size: 1.75rem;
    }

    .panel {
        padding: 1.5rem;
    }

    /* Timeline: trunk at the left edge, side lane right next to it,
       dates move into the cards */
    .timeline__row {
        --timeline-dates-width: 0px;
        --timeline-axis-width: 1.75rem;
        --timeline-lane-width: 1.5rem;
        --lane-right: calc(
            100% - var(--timeline-axis-width) - var(--timeline-lane-width) / 2
        );
        --card-padding: 1.25rem;

        grid-template-columns:
            var(--timeline-axis-width)
            var(--timeline-lane-width)
            minmax(0, 1fr);
        grid-template-areas: "axis lane card";
    }

    .timeline__title {
        grid-area: card;
    }

    .timeline__when {
        display: none;
    }

    .timeline__when--event {
        grid-area: card;
        display: flex;
        flex-flow: row wrap;
        align-items: baseline;
        gap: 0 0.5rem;
        padding-top: 0;
        text-align: left;
    }

    .career-card--main .career-card__when,
    .career-card--education .career-card__when {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
        white-space: normal;
    }
}

/* Tablets and phones: desktop tags hide with the rest, and the toggle
   counts them */
@media screen and (width <= 767px), screen and (768px <= width <= 1023px) {
    .technology-list:has(.technology-toggle:not([open]))
    .technology-list__item--desktop {
        display: none;
        opacity: 0;
        transform: translateY(var(--technology-shift));
        inline-size: 0;
        block-size: 0;
        margin: 0;
        padding: 0;
        border-width: 0;
    }

    .technology-toggle__more--wide {
        display: none;
    }

    .technology-toggle:not([open]) .technology-toggle__more--narrow {
        display: inline;
    }

    .technology-list__toggle--narrow {
        display: flex;
    }
}

/* Tablet */
@media screen and (768px <= width <= 1023px) {
    :root {
        --timeline-dates-width: 7.5rem;
        --timeline-axis-width: 3rem;
        --timeline-lane-width: 2.5rem;
    }

    /* CV: the profile spans the row, About me goes under it */
    .resume__hero {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Name and headline on the left, contacts and the button on the right */
    .profile {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "name location"
            "headline phone"
            ". actions";
        align-items: start;
        column-gap: 1.5rem;
    }

    .profile__name {
        grid-area: name;
    }

    .profile__headline {
        grid-area: headline;
    }

    .profile__location {
        grid-area: location;
    }

    .profile__phone {
        grid-area: phone;
    }

    .profile__actions {
        grid-area: actions;
        margin-top: 0;
    }

    .expertise__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* The dates column is too narrow for the heading: it moves next to the
       arrow, over the cards */
    .timeline__title {
        grid-area: card;
    }

    /* Home page */
    .home-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .services {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Two whole cases in view; an open case takes the whole slider */
    .cases {
        --case-card-width: calc((100cqi - var(--cases-gap)) / 2);
        --case-card-open-width: 100cqi;
    }

    /* Steps 2 × 2: the line joins only the two steps of a row */
    .process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .process__step:nth-child(2n)::after {
        content: none;
    }
}

/* Wide screen: a wider centred column, the side margins take the rest */
@media screen and (width >= 1440px) {
    :root {
        --container-max-width: 1200px;
    }
}

/* --------------------------------------------------------------------------
   10. PRINT STYLES (PDF GENERATION / HARD COPY)
   -------------------------------------------------------------------------- */

/* A4 without margins: the page background reaches the paper edges */
@page {
    size: a4;
    margin: 0;
}

/* The desktop page scaled to the A4 width (210mm is about 794px, 794 / 0.62
   is about 1280px), with its colours and backgrounds. The mobile breakpoint
   is screen-only, so the desktop grid and the timeline branches stay */
@media print {
    :root {
        print-color-adjust: exact;
        zoom: 0.62;
    }

    .site-header {
        position: static;
    }

    .button--print,
    .language-switcher,
    .technology-list__toggle,
    .slider-nav,
    .case-card__toggle,
    .service-card__more {
        display: none;
    }

    /* The cases slider prints as a grid of whole cards; slider.js opens
       their <details> before printing */
    .cases {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
    }

    /* Opened right before printing, a story would still be fading in on
       screen: print it whole at once */
    .case-card__more::details-content {
        transition: none;
    }

    /* Small panels stay whole; long career cards may split between pages,
       but never right after their header */
    .panel {
        break-inside: avoid;
    }

    .career-card {
        break-inside: auto;
    }

    .career-card__header {
        break-inside: avoid;
        break-after: avoid;
    }
}

/* --------------------------------------------------------------------------
   11. SCROLL ANIMATIONS
   -------------------------------------------------------------------------- */

/* reveal.js marks blocks as hidden and then shown as they scroll into view.
   Screen only and only without reduced motion: print and visitors without
   JS always see every block */
@media screen and (prefers-reduced-motion: no-preference) {
    [data-reveal="hidden"] {
        opacity: 0;
        transform: translateY(var(--reveal-shift));
    }

    [data-reveal="shown"] {
        transition:
            opacity var(--transition-reveal),
            transform var(--transition-reveal);
        transition-delay: var(--reveal-delay, 0s);
    }
}

/* --------------------------------------------------------------------------
   12. CAREER HOVER HIGHLIGHT
   -------------------------------------------------------------------------- */

/* Hovering a position or education card outlines it in its accent colour;
   highlight.js fills the card's node on the timeline. Screen pointer devices only: phones
   and print never show it. Nothing moves or changes size */
@media screen and (hover: hover) {
    .career-card--main,
    .career-card--side,
    .career-card--education {
        position: relative;
    }

    /* The outline lives on a pseudo-element, so the card's own transitions
       (scroll reveal) stay untouched */
    .career-card--main::after,
    .career-card--side::after,
    .career-card--education::after {
        content: "";
        position: absolute;
        inset: -1px;
        border: 1px solid var(--card-accent);
        border-radius: inherit;
        box-shadow: var(--shadow-card-highlight);
        opacity: 0;
        pointer-events: none;
    }

    .career-card--main:hover::after,
    .career-card--side:hover::after,
    .career-card--education:hover::after {
        opacity: 1;
    }

    .timeline__node[data-highlighted] {
        background: var(--node-color);
        box-shadow: var(--shadow-node-highlight);
    }
}

/* Smooth only without reduced motion; otherwise the colours switch at once */
@media screen and (hover: hover) and (prefers-reduced-motion: no-preference) {
    .career-card--main::after,
    .career-card--side::after,
    .career-card--education::after {
        transition: opacity var(--transition-fast);
    }

    .timeline__node {
        transition:
            background-color var(--transition-fast),
            box-shadow var(--transition-fast);
    }
}

/* --------------------------------------------------------------------------
   13. LEGAL PAGES
   -------------------------------------------------------------------------- */

/* Same column and header as the home page: back link, tabs between the
   three pages, the title and the text in a readable column */
.legal__back {
    display: inline-block;
    font-weight: 700;
    color: var(--text-primary);
}

.legal__back:hover {
    color: var(--accent);
}

/* The tabs scroll sideways when they do not fit (phones) */
.legal-tabs {
    margin-top: 1rem;
    padding: 0.35rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    overflow-x: auto;
    scrollbar-width: thin;
}

.legal-tabs__list {
    display: flex;
    gap: 0.25rem;
}

.legal-tabs__link {
    display: block;
    padding: 0.45rem 1.25rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast);
}

.legal-tabs__link:hover {
    background-color: var(--bg-surface-alt);
}

.legal-tabs__link[aria-current="page"] {
    background-color: var(--accent);
    color: var(--on-accent);
}

.legal-tabs__link:focus-visible {
    outline-offset: 2px;
}

.legal__page {
    max-width: var(--legal-text-width);
    margin-top: 2rem;
}

.legal__title {
    font-family: var(--font-serif);
    font-size: var(--legal-title-size);
    font-weight: var(--heading-weight);
    letter-spacing: var(--heading-tracking);
    line-height: 1.2;
    overflow-wrap: break-word;
    hyphens: auto;
}

.legal__updated {
    margin-top: 0.35rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.legal__body {
    display: grid;
    gap: 1.75rem;
    margin-top: 1.5rem;
    padding: var(--legal-body-padding);
}

.legal__section-title {
    font-size: 1.15rem;
    font-weight: 700;
}

.legal__text,
.legal__list {
    margin-top: 0.5rem;
    color: var(--text-secondary);
    line-height: 1.65;
}

.legal__list {
    padding-left: 1.25rem;
}

.legal__list-item + .legal__list-item {
    margin-top: 0.25rem;
}