/* ==========================================================================
   ihnatov.nl — landing surface
   World: "Lit Field". One continuous luminous volume; near-black display type;
   a single hot accent; veiled panels floating over the light; one night closer.
   This file styles index.html. article.css carries the same world into the
   long-form article pages under transcriber/.
   ========================================================================== */

:root {
    /* --- the field ----------------------------------------------------- */
    --field-cool: #b9c8d2;
    --field-warm: #ffd9b8;
    --field-ember: #ffcfa8;
    --field-haze: #cfd8d6;
    --base: #eceeed;
    --base-deep: #e2e6e6;

    /* --- ink ------------------------------------------------------------ */
    --ink: #0b0c0e;
    --ink-2: #23262b;
    --ink-3: #454a52;
    --ink-4: #5c626b;

    /* --- accent --------------------------------------------------------- */
    /* Two oranges, and two is the floor rather than a preference: a light
       ground needs low luminance and a night ground needs high, so no single
       value clears AA on both. They never meet on the same surface.
         --accent          fills, and anything on night (5.76:1 on #0b0c0e)
         --accent-on-light anything on a light ground, at any size
                           (4.86:1 on --base, 5.29:1 on the veil, 4.19:1 on
                           the darkest point of the field under the headline) */
    --accent: #ff4726;
    --accent-on-light: #c03210;

    /* --- night ---------------------------------------------------------- */
    --night: #0b0c0e;
    --night-2: #16181c;
    --night-3: #24272d;
    --on-night: #f4f5f5;
    --on-night-2: #a9b0b8;

    /* --- surfaces ------------------------------------------------------- */
    --veil: rgba(255, 255, 255, 0.54);
    --veil-strong: rgba(255, 255, 255, 0.74);
    --hair: rgba(11, 12, 14, 0.12);
    --hair-strong: rgba(11, 12, 14, 0.22);

    /* --- depth -----------------------------------------------------------
       A lit top edge plus a short, offset drop — a panel catching the light
       and casting a contact shadow. Not a hairline outline with a wide halo:
       that pairing is the tell of a surface nobody actually lit. */
    --edge: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --lift-1: var(--edge), 0 1px 1px rgba(16, 20, 28, 0.05), 0 6px 12px -8px rgba(16, 20, 28, 0.30);
    --lift-2: var(--edge), 0 1px 2px rgba(16, 20, 28, 0.06), 0 14px 26px -14px rgba(16, 20, 28, 0.38);
    --lift-3: var(--edge), 0 2px 3px rgba(16, 20, 28, 0.07), 0 26px 44px -22px rgba(16, 20, 28, 0.45);

    /* --- type ----------------------------------------------------------- */
    --display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --text: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

    /* --- motion --------------------------------------------------------- */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);

    /* --- metrics -------------------------------------------------------- */
    --gutter: clamp(20px, 4.5vw, 64px);
    --radius: 26px;
    --radius-sm: 14px;
}

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    scrollbar-color: var(--ink-4) var(--base-deep);
    /* clip, not hidden, and on html rather than body: `overflow-x: hidden` on
       body promotes body to the scroll container, which breaks window.scrollTo
       and scrollIntoView. `clip` guards the axis without creating a scroller. */
    overflow-x: clip;
}

body {
    margin: 0;
    background: var(--base);
    color: var(--ink);
    font-family: var(--text);
    font-size: 17px;
    line-height: 1.55;
    font-feature-settings: 'ss01' 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a {
    color: inherit;
    text-decoration-color: var(--hair-strong);
    text-underline-offset: 0.22em;
    text-decoration-thickness: 1px;
}

img, svg { max-width: 100%; }

strong { font-weight: 700; }

/* Browser surfaces belong to the design system too. */
::selection {
    background: var(--accent-on-light);
    color: #fff;
}

:focus-visible {
    outline: 2px solid var(--accent-on-light);
    outline-offset: 3px;
    border-radius: 4px;
}

/* On the night block the light-ground focus colour would sit at ~2:1, so the
   ring switches to the full accent there. */
.closer :focus-visible {
    outline-color: var(--accent);
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--base-deep); }
::-webkit-scrollbar-thumb {
    background: #b3b9bd;
    border: 3px solid var(--base-deep);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

input, textarea { caret-color: var(--accent-on-light); }

.skip-link {
    position: absolute;
    left: 16px;
    top: -100px;
    z-index: 90;
    padding: 12px 20px;
    background: var(--night);
    color: var(--on-night);
    font-family: var(--display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 999px;
    text-decoration: none;
    transition: top .18s var(--ease);
}
.skip-link:focus-visible { top: 16px; }

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

.arrow {
    width: 1em;
    height: 1em;
    flex: none;
    stroke: currentColor;
    stroke-width: 1.6;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ==========================================================================
   Stage — the lit field
   ========================================================================== */

.stage {
    position: relative;
    min-height: min(880px, 100svh);
    display: flex;
    flex-direction: column;
}

/* Fixed, not absolute, and a sibling of the content rather than a child of the
   hero: the luminous field has to run the whole page, or the design is a lit
   card sitting on flat grey. */
.field {
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(115% 85% at 6% 10%, var(--field-cool) 0%, rgba(185, 200, 210, 0) 58%),
        radial-gradient(85% 75% at 90% 14%, var(--field-warm) 0%, rgba(255, 217, 184, 0) 62%),
        radial-gradient(75% 65% at 76% 92%, var(--field-ember) 0%, rgba(255, 207, 168, 0) 64%),
        radial-gradient(95% 95% at 26% 84%, var(--field-haze) 0%, rgba(207, 216, 214, 0) 62%),
        linear-gradient(140deg, #dbe3e7 0%, #e9e6df 46%, #f7e6d4 100%);
}

/* The one authored ambient moment: a slow warm bloom crossing the field. */
.field::after {
    content: "";
    position: absolute;
    left: 46%;
    top: -12%;
    width: 62%;
    height: 78%;
    background: radial-gradient(closest-side, rgba(255, 158, 96, 0.5), rgba(255, 158, 96, 0) 72%);
    filter: blur(26px);
    animation: bloom-drift 54s var(--ease-soft) infinite alternate;
    will-change: transform;
}

@keyframes bloom-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(-11%, 7%, 0) scale(1.14); }
}

.grain {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.5;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Topbar
   ========================================================================== */

/* Sticky, so the CV and the section links stay in reach for the whole page.
   The veil keeps content legible as it passes underneath. */
.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(238, 238, 236, 0.58);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    backdrop-filter: blur(16px) saturate(1.1);
    box-shadow: 0 1px 0 rgba(11, 12, 14, 0.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: clamp(16px, 2.2vw, 26px) var(--gutter);
}

.wordmark {
    white-space: nowrap;
    /* inline-block, not inline-flex: flex drops the whitespace text node
       between "Yurı" and "Ihnatov" and welds the name together. */
    display: inline-block;
    font-family: var(--display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.03em;
    text-decoration: none;
    padding: 10px 4px;
    margin: -10px -4px;
}
.wordmark .dot { color: var(--accent-on-light); }
.wordmark .dotted-i {
    position: relative;
    display: inline-block;
    /* Pin the line box so the tittle's offset stays valid if the wordmark's
       line-height ever changes; the baseline alignment is unaffected. */
    line-height: 1;
}
.wordmark .dotted-i::before {
    content: "";
    position: absolute;
    left: 50%;
    /* Traced from Archivo's own "i": the tittle sits 0.73em above the baseline,
       is 0.13em tall, matches the stem's 0.145em width, and clears the stem by
       0.065em. Sizing the dot to fill that whole space closes the gap and the
       letter reads as broken, so match the glyph rather than the space. */
    top: 0.103em;
    width: 0.14em;
    height: 0.14em;
    background: var(--accent-on-light);
    border-radius: 50%;
    transform: translateX(-50%);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: clamp(4px, 1.4vw, 18px);
}

.nav-links a {
    display: inline-block;
    padding: 12px 10px;
    font-family: var(--display);
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: -0.008em;
    color: var(--ink-2);
    text-decoration: none;
    border-radius: 999px;
    transition: color .16s var(--ease), background-color .16s var(--ease);
}
.nav-links a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.5); }
.nav-links a.active { color: var(--accent-on-light); }

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.topbar-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 12px 14px;
    border-radius: 999px;
    font-family: var(--display);
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
    transition: color .16s var(--ease), background-color .16s var(--ease);
}
.topbar-link:hover { color: var(--ink); background: rgba(255, 255, 255, 0.55); }

.pill {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    gap: 10px;
    padding: 14px 20px;
    min-height: 48px;
    border: 0;
    border-radius: 999px;
    background: var(--night);
    color: var(--on-night);
    font-family: var(--display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--lift-1);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.pill:hover {
    background: var(--night-2);
    box-shadow: var(--lift-2);
    transform: translateY(-1px);
}
.pill .arrow { color: var(--accent); transition: transform .22s var(--ease); }
.pill:hover .arrow { transform: translate(2px, -2px); }

.pill-light {
    background: #fff;
    color: var(--ink);
}
.pill-light:hover { background: #fff; }
.pill-light .arrow { color: var(--accent-on-light); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
    position: relative;
    z-index: 2;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: clamp(24px, 4vw, 56px);
    padding: clamp(40px, 7vw, 96px) var(--gutter) clamp(28px, 4vw, 44px);
}

.hero h1 {
    font-size: clamp(2.75rem, 8vw, 8rem);
    line-height: 0.92;
    font-weight: 800;
    letter-spacing: -0.038em;
    font-stretch: 105%;
    max-width: 12ch;
}
.hero h1 .hot { color: var(--accent-on-light); }

.hero-copy {
    margin-top: clamp(22px, 2.6vw, 34px);
    max-width: 54ch;
    display: grid;
    gap: 14px;
}
.hero-copy p {
    font-size: clamp(16px, 1.15vw, 18.5px);
    line-height: 1.55;
    color: var(--ink-2);
}
.hero-copy .hero-note {
    font-size: 15.5px;
    color: var(--ink-3);
}

.hero-side {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    width: 300px;
    max-width: 100%;
}
.hero-side > * { width: 100%; }

/* Floating annotations — pinned claims, not decoration. */
.annotation {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    background: var(--veil);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    backdrop-filter: blur(14px) saturate(1.15);
    border: 0;
    box-shadow: var(--lift-1);
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink-2);
    text-align: left;
}
.annotation svg {
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: 1px;
    stroke: var(--accent-on-light);
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.proofcard {
    padding: 22px;
    border-radius: 20px;
    background: var(--veil-strong);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(1.2);
    border: 0;
    box-shadow: var(--lift-3);
}
.proofcard .n {
    display: block;
    font-family: var(--display);
    font-size: 66px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
}
.proofcard .n em {
    letter-spacing: normal;
    font-style: normal;
    font-size: 0.42em;
    color: var(--accent-on-light);
    vertical-align: super;
    margin-left: 0.06em;
}
.proofcard p {
    margin-top: 10px;
    font-size: 14.5px;
    line-height: 1.42;
    color: var(--ink-3);
}


/* ==========================================================================
   Sections
   ========================================================================== */

main { display: block; }

.section {
    padding: clamp(64px, 9vw, 128px) var(--gutter);
    max-width: 1320px;
    margin: 0 auto;
}

.section-head:not(:has(.section-summary)) {
    grid-template-columns: minmax(0, 1fr);
}

.section-head {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: end;
    gap: clamp(20px, 3vw, 48px);
    margin-bottom: clamp(32px, 4vw, 56px);
}

.section-title {
    font-size: clamp(1.9rem, 3.6vw, 3.1rem);
    line-height: 1.02;
    font-weight: 700;
    letter-spacing: -0.035em;
}
.section-title em {
    font-style: normal;
    color: var(--ink-4);
}

.section-summary {
    font-size: 16.5px;
    line-height: 1.5;
    color: var(--ink-3);
    max-width: 46ch;
}

/* ==========================================================================
   Proof strip
   ========================================================================== */

.proof-cells {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.proof-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px 24px 22px;
    border-radius: 18px;
    background: var(--veil);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 0;
    box-shadow: var(--lift-1);
    text-decoration: none;
    color: inherit;
    transition: transform .24s var(--ease), box-shadow .24s var(--ease), background-color .24s var(--ease);
}
.proof-cell:hover {
    transform: translateY(-3px);
    box-shadow: var(--lift-2);
    background: var(--veil-strong);
}

.proof-num {
    font-family: var(--display);
    font-size: clamp(40px, 4.4vw, 58px);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
}
.proof-num em {
    /* letter-spacing inherits as a resolved px length, so at 0.4em this
       arrives ~5x too tight. Reset rather than re-derive. */
    letter-spacing: normal;
    font-style: normal;
    font-size: 0.4em;
    font-weight: 700;
    color: var(--accent-on-light);
    vertical-align: super;
    margin-left: 0.05em;
}

.proof-label {
    font-size: 15px;
    line-height: 1.4;
    color: var(--ink-3);
}

.proof-cell-hot {
    background: var(--night);
    color: var(--on-night);
}
.proof-cell-hot:hover { background: var(--night-2); }
.proof-cell-hot .proof-num { color: var(--accent); }
/* --accent-on-light is for light grounds; on the night cell it is 2.6:1. */
.proof-cell-hot .proof-num em { color: var(--accent); }
.proof-cell-hot .proof-label { color: var(--on-night-2); }
.proof-cell-hot 
/* ==========================================================================
   Role fit
   ========================================================================== */

.fit-box {
    border-radius: 22px;
    background: var(--veil);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 0;
    box-shadow: var(--lift-2);
    overflow: hidden;
}

.role-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px;
    border-bottom: 1px solid var(--hair);
}

.role-tab {
    min-height: 44px;
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    font-family: var(--display);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink-3);
    cursor: pointer;
    transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.role-tab:hover { background: rgba(255, 255, 255, 0.6); color: var(--ink); }
.role-tab.active {
    background: var(--night);
    color: var(--on-night);
    border-color: var(--night);
}

/* Inactive panels stay in the document so browser find still reaches them. */
.role-panel:not(.active) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.role-panel { padding: 8px 14px 14px; }
.role-panel.active { animation: panel-in .22s var(--ease) both; }

@keyframes panel-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.role-panel-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    padding: 18px 10px 8px;
    color: var(--ink);
}
.role-panel-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.fit-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding: 16px 10px;
    border-top: 1px solid var(--hair);
}
.fit-row:first-of-type { border-top: 0; }

.fit-row-head {
    padding-top: 8px;
    padding-bottom: 8px;
}
.fit-req-h,
.fit-ev-h {
    font-family: var(--display);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ink-4);
}
.fit-ev-h { color: var(--accent-on-light); }

.fit-req,
.fit-ev {
    font-size: 15.5px;
    line-height: 1.45;
}
.fit-req { color: var(--ink-3); }
.fit-ev { color: var(--ink); font-weight: 500; }

.fit-mid {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 2px;
}
.rung {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent-on-light);
    color: #fff;
    font-family: var(--display);
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Career
   ========================================================================== */

.career-list {
    display: grid;
    gap: 14px;
}

.career-item {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: clamp(18px, 3vw, 44px);
    padding: 26px;
    border-radius: 18px;
    background: var(--veil);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 0;
    box-shadow: var(--lift-1);
    scroll-margin-top: 90px;
}

.career-when {
    display: block;
    margin-bottom: 8px;
    font-family: var(--display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ink-4);
    font-variant-numeric: tabular-nums;
}
.career-meta h3 {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
}
.career-org {
    margin-top: 6px;
    font-size: 15px;
    color: var(--ink-3);
}

.career-shoulder {
    font-size: 18px;
    line-height: 1.45;
    color: var(--ink);
    margin-bottom: 14px;
}
.career-shoulder em {
    font-style: normal;
    font-weight: 600;
    color: var(--accent-on-light);
}

.career-body ul { display: grid; gap: 9px; }
.career-body li {
    position: relative;
    padding-left: 20px;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--ink-3);
}
.career-body li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-on-light);
}

.resume-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}
.resume-detail {
    padding: 24px;
    border-radius: 18px;
    background: var(--veil);
    border: 0;
    box-shadow: var(--lift-1);
}
.resume-detail h3 {
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.resume-detail p {
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--ink-3);
}
.resume-detail .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.resume-detail .chips span {
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid var(--hair);
    font-size: 13.5px;
    color: var(--ink-2);
}
.resume-detail .chips b {
    font-weight: 600;
    color: var(--ink);
}

/* ==========================================================================
   Projects
   ========================================================================== */

.project-feature {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    padding: clamp(28px, 3.5vw, 44px);
    border-radius: 22px;
    background: var(--accent-on-light);
    color: #fff;
    text-decoration: none;
    box-shadow: var(--lift-2);
    transition: transform .24s var(--ease), box-shadow .24s var(--ease);
}
.project-feature:hover { transform: translateY(-3px); box-shadow: var(--lift-3); }
.project-feature h3 {
    font-size: clamp(1.6rem, 2.6vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -0.035em;
}
.project-feature p {
    margin-top: 10px;
    max-width: 52ch;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
}
.project-feature-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 20px;
    min-height: 46px;
    border-radius: 999px;
    background: var(--night);
    color: var(--on-night);
    font-family: var(--display);
    font-size: 15px;
    font-weight: 600;
}
.project-feature-cta .arrow { color: var(--accent); transition: transform .22s var(--ease); }
.project-feature:hover .project-feature-cta .arrow { transform: translate(2px, -2px); }

.project-group-label {
    margin: 38px 0 14px;
    font-family: var(--display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink-3);
}

.project-rows { display: grid; gap: 10px; }

.project-row {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr) 26px;
    align-items: start;
    gap: 20px;
    padding: 22px 24px;
    border-radius: 16px;
    background: var(--veil);
    border: 0;
    box-shadow: var(--lift-1);
    text-decoration: none;
    color: inherit;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.project-row:hover {
    transform: translateY(-2px);
    background: var(--veil-strong);
    box-shadow: var(--lift-2);
}

.project-platform {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--night);
    color: var(--on-night);
    font-family: var(--display);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.project-row h4 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.022em;
}
.project-row p {
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--ink-3);
}
.project-stack {
    display: block;
    margin-top: 8px;
    font-size: 13.5px;
    color: var(--ink-4);
}
.project-row .arrow {
    width: 20px;
    height: 20px;
    margin-top: 3px;
    color: var(--ink-4);
    transition: transform .22s var(--ease), color .22s var(--ease);
}
.project-row:hover .arrow { color: var(--accent-on-light); transform: translate(2px, -2px); }

/* ==========================================================================
   Closer — contact
   ========================================================================== */

.closer {
    margin: 0 clamp(8px, 1.2vw, 16px) clamp(8px, 1.2vw, 16px);
    padding: clamp(48px, 7vw, 96px) var(--gutter);
    border-radius: var(--radius);
    background: var(--night);
    color: var(--on-night);
    box-shadow: var(--lift-2);
}

.closer-inner { max-width: 1320px; margin: 0 auto; }

.closer .section-title { color: var(--on-night); }
.closer .section-title em { color: var(--on-night-2); }
.closer .section-summary { color: var(--on-night-2); }

.contact-grid {
    display: grid;
    /* The three routes are peers: reveal an address, open a message, take the
       CV. Prominence for the CV lives in the sticky topbar, not here. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 900px;
}

.contact-link {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 20px 22px;
    min-height: 92px;
    border: 1px solid var(--night-3);
    border-radius: 16px;
    background: var(--night-2);
    color: var(--on-night);
    text-decoration: none;
    transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.contact-link:hover {
    background: #1d2025;
    border-color: #343941;
    transform: translateY(-2px);
}
.contact-link > span:first-child {
    font-family: var(--display);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--accent);
}
.contact-value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    word-break: break-word;
}
.contact-value .arrow {
    width: 18px;
    height: 18px;
    color: var(--accent);
    transition: transform .22s var(--ease);
}
.contact-link:hover .contact-value .arrow { transform: translate(2px, -2px); }
.contact-link[download]:hover .contact-value .arrow { transform: translateY(2px); }
.contact-link .revealed { display: none; }
.contact-link.show-real .masked { display: none; }
.contact-link.show-real .revealed { display: inline; }
.contact-link.loading .masked { opacity: 0.6; }

.contact-status {
    min-height: 19px;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--on-night-2);
}
.contact-link.error .contact-status { color: #ff8b6d; }

.contact-hint {
    margin-top: 10px;
    font-size: 14px;
    color: var(--on-night-2);
}

.closer-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid var(--night-3);
    font-size: 14.5px;
    color: var(--on-night-2);
}
.closer-foot b {
    font-family: var(--display);
    font-weight: 600;
    color: var(--on-night);
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

.scroll-animate {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.scroll-animate.visible { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1040px) {
    .hero { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .hero-side {
        flex-direction: row;
        align-items: flex-start;
        flex-wrap: wrap;
        max-width: none;
        margin-top: 8px;
    }
    .proofcard { width: 232px; }
    .section-head { grid-template-columns: minmax(0, 1fr); }
    .career-item { grid-template-columns: 200px minmax(0, 1fr); }
}

@media (max-width: 820px) {
    .nav-links { display: none; }
    .proof-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .career-item { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .fit-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 18px 10px;
    }
    .fit-row-head { display: none; }
    .fit-mid { display: none; }
    .fit-req::before,
    .fit-ev::before {
        display: block;
        margin-bottom: 5px;
        font-family: var(--display);
        font-size: 13px;
        font-weight: 600;
        color: var(--ink-4);
    }
    .fit-req::before { content: "The role asks for"; }
    .fit-ev::before { content: "My experience shows"; color: var(--accent-on-light); }
    .project-row { grid-template-columns: minmax(0, 1fr) 24px; }
    .project-platform { grid-column: 1 / -1; justify-self: start; }
    .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    body { font-size: 16px; }
    /* One line, or the bar eats the first viewport. Contact stays reachable
       from the closer and from the section nav's Contact link. */
    .topbar { padding: 12px 16px; gap: 10px; }
    .topbar-link { display: none; }
    .wordmark { font-size: 18px; }
    .pill { padding: 12px 16px; font-size: 14px; }
    .stage { min-height: 0; }
    .hero { padding-top: 34px; }
    .proofcard { width: 100%; }
    .annotation { width: 100%; }
    .resume-detail-grid { grid-template-columns: minmax(0, 1fr); }
    .contact-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .field::after { animation: none; }
    .role-panel.active { animation: none; }
    .scroll-animate,
    .scroll-animate.visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ==========================================================================
   Print — the page is often saved to PDF and attached to a candidate record
   ========================================================================== */

@media print {
    :root { --gutter: 0; }

    body { background: #fff; color: #000; font-size: 11pt; }

    .stage,
    .career-item,
    .proof-cell,
    .fit-box,
    .resume-detail,
    .project-row,
    .project-feature,
    .closer {
        box-shadow: none !important;
        background: #fff !important;
        color: #000 !important;
        border: 1px solid #bbb !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        break-inside: avoid;
    }

    .field,
    .grain,
    .topbar,
    .role-tabs,
    .skip-link,
    .project-feature-cta { display: none !important; }

    /* Nothing may be withheld from a printed page. */
    .scroll-animate,
    .scroll-animate.visible {
        opacity: 1 !important;
        transform: none !important;
    }
    .role-panel,
    .role-panel:not(.active) {
        position: static !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        overflow: visible !important;
        clip-path: none !important;
        white-space: normal !important;
        page-break-inside: auto;
    }
    .role-panel-title,
    .role-panel-title {
        position: static !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        overflow: visible !important;
        clip-path: none !important;
        font-size: 13pt;
    }

    .closer .section-title,
    .closer .section-summary,
    .contact-link,
    .closer-foot { color: #000 !important; }
    .contact-link { border: 1px solid #bbb !important; }

    .proof-num em,
    .fit-ev-h { color: #000 !important; }

    /* The printed sheet is attached to a candidate record, so it has to carry
       a way to act on it. The protected value still never prints — the page
       does, and the CV and LinkedIn cards resolve to real URLs. */
    .contact-value .arrow { display: none !important; }
    .closer a[href^="http"]::after,
    .closer a[href$=".pdf"]::after,
    .project-row::after,
    .project-feature::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #444;
        word-break: break-all;
    }
    .protected-contact .masked { display: none !important; }
    .protected-contact .contact-value::after {
        content: "revealed at ihnatov.nl";
        font-size: 10pt;
        color: #444;
    }

    a { text-decoration: none; }
    .section { padding: 12pt 0; max-width: none; }
}