/* ---------- Nav ---------- */
.nav {
    position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
    height: var(--nav-h);
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    padding-inline: var(--gutter);
    transition: transform 500ms var(--ease-out), background-color 300ms var(--ease-out);
}
.nav::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--line);
    opacity: 0; transition: opacity 300ms var(--ease-out);
}
.nav.is-scrolled::before { opacity: 1; border-bottom-color: transparent; }
.nav.is-scrolled .nav__progress { opacity: 0; }
.nav.is-hidden { transform: translateY(-100%); }
.nav__logo { display: inline-flex; align-items: center; justify-self: start; }
.nav__logo svg { width: 46px; height: auto; fill: currentColor; }
.nav__links { display: flex; gap: 32px; font-size: var(--fs-sm); font-weight: 500; }
.nav__links a { position: relative; display: inline-flex; align-items: center; padding: 6px 0; }
.nav__links a[aria-current="page"]::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
}
.nav__actions { display: flex; align-items: center; gap: 12px; justify-self: end; }

.nav__lang { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 500; }
.nav__lang a { color: var(--ink); letter-spacing: 0.04em; }
.nav__lang a[aria-current="true"] { color: var(--ink); }
@media (hover: hover) { .nav__lang a:hover { color: var(--ink); } }
@media (max-width: 767px) {
    .nav { grid-template-columns: auto 1fr auto; gap: 12px; }
    .nav__links { gap: 18px; justify-self: center; }
}

/* ---------- Buttons ---------- */
.btn {
    --pad-y: 12px; --pad-x: 20px;
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    padding: var(--pad-y) var(--pad-x);
    border-radius: var(--r-pill);
    font-size: var(--fs-sm); font-weight: 500; line-height: 1; white-space: nowrap;
    overflow: hidden; isolation: isolate;
    transition: transform var(--dur-ui) var(--ease-out), color 300ms var(--ease-out), border-color 300ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--lg { --pad-y: 16px; --pad-x: 26px; font-size: var(--fs-sm); }
.btn--solid { background: var(--ink); color: var(--bg); }
.btn--ghost { border: 1px solid var(--line); color: var(--ink); }
/* Fill wipes in from the bottom on hover */
.btn::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--accent); border-radius: inherit;
    transform: translateY(101%); transition: transform 450ms var(--ease-out);
}
@media (hover: hover) {
    .btn:hover::before { transform: translateY(0); }
    .btn--solid:hover, .btn--ghost:hover { color: var(--on-accent); border-color: var(--accent); }
}
.btn__label { position: relative; }

.icon-btn {
    width: 52px; height: 52px; border-radius: var(--r-pill); border: 1px solid var(--line);
    display: grid; place-items: center;
    transition: background-color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
}
.icon-btn svg { width: 20px; fill: currentColor; }
.icon-btn:active { transform: scale(0.94); }
@media (hover: hover) { .icon-btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); } }

.link-arrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }
.link-arrow::after {
    content: ""; width: 18px; height: 18px; flex: none;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M18.5 6L17.07 7.393L24.65 15H4.5V17H24.65L17.07 24.573L18.5 26L28.5 16L18.5 6Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M18.5 6L17.07 7.393L24.65 15H4.5V17H24.65L17.07 24.573L18.5 26L28.5 16L18.5 6Z'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 400ms var(--ease-out);
}
@media (hover: hover) { a:hover .link-arrow::after { transform: translateX(6px); } }

/* ---------- Rolling text (per-character) ---------- */
.roll { display: inline-flex; position: relative; overflow: clip; vertical-align: top; line-height: 1.15; }
.roll__line { display: inline-flex; white-space: pre; }
.roll__line--b { position: absolute; inset: 0; }
.roll__ch { display: inline-block; transition: transform 520ms var(--ease-out); transition-delay: calc(var(--i) * 18ms); }
.roll__line--b .roll__ch { transform: translateY(110%); }
@media (hover: hover) {
    .roll-host:hover .roll__line--a .roll__ch { transform: translateY(-110%); }
    .roll-host:hover .roll__line--b .roll__ch { transform: translateY(0); }
}
.roll-host:focus-visible .roll__line--a .roll__ch { transform: translateY(-110%); }
.roll-host:focus-visible .roll__line--b .roll__ch { transform: translateY(0); }

/* ---------- Theme toggle: 3D rocker light switch ---------- */
.theme-toggle {
    width: 40px; height: 40px; border: 0; background: transparent;
    display: grid; place-items: center; transition: transform var(--dur-ui) var(--ease-out);
}
.theme-toggle:active { transform: scale(0.94); }
/* wall plate: no outline, soft recessed surface */
.theme-toggle__icon {
    position: relative; width: 20px; height: 28px; border-radius: 4px;
    background: color-mix(in srgb, currentColor 10%, transparent);
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.18);
    perspective: 60px; display: grid; place-items: center;
}
/* rocker paddle: top pressed in = light on; I / O marks show it is a light switch */
.theme-toggle__rocker {
    position: relative; width: 12px; height: 20px; border-radius: 2px;
    background: linear-gradient(180deg, color-mix(in srgb, currentColor 55%, transparent) 0 48%, currentColor 52% 100%);
    transform: rotateX(-24deg);
    box-shadow: 0 2px 0 -0.5px color-mix(in srgb, currentColor 45%, transparent);
    transition: transform 420ms cubic-bezier(.34,1.56,.64,1), background 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
}
.theme-toggle__rocker::before,
.theme-toggle__rocker::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); }
/* I = on (top half) */
.theme-toggle__rocker::before { top: 3px; width: 1.5px; height: 5px; border-radius: 1px; background: var(--bg); }
/* O = off (bottom half) */
.theme-toggle__rocker::after { bottom: 3px; width: 5px; height: 5px; border-radius: 50%; border: 1.5px solid var(--bg); box-sizing: border-box; }
[data-theme="dark"] .theme-toggle__rocker {
    background: linear-gradient(180deg, currentColor 0 48%, color-mix(in srgb, currentColor 55%, transparent) 52% 100%);
    transform: rotateX(24deg);
    box-shadow: 0 -2px 0 -0.5px color-mix(in srgb, currentColor 45%, transparent);
}
/* tiny indicator glow when the light is on */
.theme-toggle__icon::after {
    content: ""; position: absolute; inset: -6px; border-radius: 6px; pointer-events: none;
    background: radial-gradient(closest-side, rgb(255 214 140 / 0.35), transparent);
    opacity: 0; transition: opacity 500ms var(--ease-out);
}
:root:not([data-theme="dark"]) .theme-toggle:hover .theme-toggle__icon::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .theme-toggle__rocker { transition: none; } }

/* ---------- Status pill ---------- */
.status-pill {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 14px 8px 12px; border: 1px solid var(--line); border-radius: var(--r-pill);
    font-size: var(--fs-xs); font-weight: 500; color: var(--ink-2);
    background: color-mix(in srgb, var(--bg) 70%, transparent);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
/* Real semantic state: availability */
.status-pill__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #3fb950; }
.status-pill__dot::after {
    content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid #3fb950;
    animation: pulse 2.2s var(--ease-out) infinite;
}
@keyframes pulse { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .status-pill__dot::after { animation: none; } }

/* ---------- Typer ---------- */
.typer { color: var(--accent); font-weight: 500; white-space: nowrap; }
.typer__caret {
    display: inline-block; width: 2px; height: 1.05em; margin-left: 3px; vertical-align: -0.15em;
    background: currentColor; animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .typer__caret { display: none; } }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; background: var(--bg); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; gap: clamp(24px, 4vw, 64px); align-items: center; will-change: transform; }
.logos__img { height: clamp(44px, 5vw, 64px); width: auto; mix-blend-mode: multiply; opacity: 0.8; }
[data-theme="dark"] .logos__img { filter: invert(1); mix-blend-mode: screen; }

/* ---------- Rows (What I do) ---------- */
.rows { border-top: 1px solid var(--line); }
.rows__item {
    position: relative; display: grid; grid-template-columns: 1fr minmax(0, 32ch); gap: 24px; align-items: baseline;
    padding: clamp(22px, 3vw, 40px) 0; border-bottom: 1px solid var(--line);
}
.rows__item::before {
    content: ""; position: absolute; inset: 0 calc(var(--gutter) * -1); z-index: -1;
    background: var(--accent-soft); transform: scaleY(0); transform-origin: bottom;
    transition: transform 500ms var(--ease-out);
}
.rows__label { font-size: var(--fs-xl); font-weight: var(--fw-display); color: var(--rows-ink, var(--ink)); letter-spacing: -0.025em; line-height: 1.1; transition: transform 500ms var(--ease-out); }
.rows__meta { color: var(--ink-2); font-size: var(--fs-sm); }
@media (hover: hover) {
    .rows__item:hover::before { transform: scaleY(1); }
    .rows__item:hover .rows__label { transform: translateX(16px); }
}
@media (max-width: 767px) { .rows__item { grid-template-columns: 1fr; gap: 8px; } }
.js .rows--lit .rows__label { color: var(--dim-word); transition: color 500ms var(--ease-out), transform 500ms var(--ease-out); }
.js .rows--lit .rows__item.is-lit .rows__label { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .js .rows--lit .rows__label { color: var(--ink); } }

/* ---------- Feature banner ---------- */
.feature-banner { position: relative; display: grid; margin-top: clamp(48px, 7vw, 96px); border-radius: var(--r-media); overflow: hidden; color: #fff; }
.feature-banner__media { grid-area: 1 / 1; position: relative; aspect-ratio: 21 / 9; overflow: hidden; background: #111; }
.feature-banner__media img {
    position: absolute; left: 0; top: -10%; width: 100%; height: 120%;
    object-fit: cover; will-change: transform;
}
.feature-banner__copy {
    grid-area: 1 / 1; align-self: end; z-index: 1; display: grid; gap: 16px; max-width: 46ch;
    padding: clamp(24px, 4vw, 56px);
    background: linear-gradient(180deg, transparent 10%, rgb(0 0 0 / 0.72));
    width: 100%; max-width: none;
}
.feature-banner__copy > * { max-width: 40ch; }
.feature-banner__kicker { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.8; }
.feature-banner__title { font-size: var(--fs-lg); font-weight: 400; line-height: 1.25; letter-spacing: -0.015em; }
@media (max-width: 767px) { .feature-banner__media { aspect-ratio: 4 / 5; } }

/* ---------- Case card ---------- */
.case-card { display: grid; gap: 20px; align-content: start; }
.case-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-media); background: var(--bg-elev); }
.case-card__media img, .case-card__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out), opacity 400ms var(--ease-out); }
.case-card__media video { opacity: 0; }
.case-card.is-playing video { opacity: 1; }
@media (hover: hover) { .case-card:hover .case-card__media img, .case-card:hover .case-card__media video { transform: scale(1.04); } }
.case-card__body { display: grid; gap: 8px; }
.case-card__client { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); }
.case-card__title { font-size: var(--fs-lg); font-weight: 400; line-height: 1.22; letter-spacing: -0.015em; max-width: 30ch; }
.case-card__tags { font-size: var(--fs-xs); color: var(--ink-3); }
.case-card--all {
    align-content: center; justify-items: start; gap: 24px; padding: 40px;
    border: 1px solid var(--line); border-radius: var(--r-media);
    font-size: var(--fs-xl); font-weight: var(--fw-display); letter-spacing: -0.02em;
    transition: background-color 400ms var(--ease-out), color 400ms var(--ease-out);
}
.case-card--all svg { width: 48px; fill: currentColor; transition: transform 500ms var(--ease-out); }
@media (hover: hover) { .case-card--all:hover { background: var(--ink); color: var(--bg); } .case-card--all:hover svg { transform: translateX(10px); } }

/* ---------- Chips (light text list) ---------- */
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px 32px; }
.chips li {
    font-size: var(--fs-lg); font-weight: var(--fw-display); line-height: 1.3; letter-spacing: -0.01em;
    transition: color var(--dur-ui) var(--ease-out), transform 400ms var(--ease-out);
}
@media (hover: hover) { .chips li:hover { color: var(--accent); transform: translateX(6px); } }

/* ---------- Copy email ---------- */
.copy-email {
    display: inline-flex; align-items: center; gap: 14px;
    font-size: var(--fs-lg); font-weight: 500; letter-spacing: -0.01em;
}
.copy-email__text { font-variant-ligatures: none; min-width: 16ch; text-align: left; }
.copy-email__hint {
    font-size: var(--fs-xs); padding: 6px 10px; border-radius: var(--r-pill); border: 1px solid var(--line);
    transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
@media (hover: hover) { .copy-email:hover .copy-email__hint { background: var(--ink); color: var(--bg); } }

/* ---------- Cursor pill (only over cases/drag areas, system cursor stays) ---------- */
.cursor-pill {
    position: fixed; top: 0; left: 0; z-index: var(--z-cursor); pointer-events: none;
    padding: 12px 18px; border-radius: var(--r-pill);
    background: var(--accent); color: var(--on-accent);
    font-size: var(--fs-sm); font-weight: 500;
    transform: translate(-50%, -50%) scale(0); opacity: 0;
}
@media (hover: none) { .cursor-pill { display: none; } }

/* ---------- Preloader ---------- */
.preloader {
    position: fixed; inset: 0; z-index: var(--z-preloader);
    display: none; align-items: end; justify-content: end;
    padding: var(--gutter);
    background: var(--ink); color: var(--bg);
}
.js .preloader.is-active { display: flex; }
.preloader__count { font-size: var(--fs-3xl); font-weight: var(--fw-display); letter-spacing: var(--track-display); line-height: 0.85; font-variant-numeric: tabular-nums; }

/* ---------- Outro / footer ---------- */
.outro {
    position: relative; overflow: hidden; box-sizing: border-box;
    min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column; justify-content: center;
    padding-block: clamp(4rem, 8vh, 6rem);
}
.outro__inner {
    max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
    width: 100%; display: grid; justify-items: start; align-content: center; text-align: left;
    gap: clamp(72px, 12vh, 140px);
}
.outro__lede { font-size: var(--fs-lg); color: var(--ink-2); max-width: 34ch; line-height: 1.35; }
.outro__title {
    display: inline-flex; align-items: center; gap: clamp(16px, 2vw, 32px); justify-self: start;
    font-size: clamp(3.5rem, 1.4rem + 7vw, 8.5rem); font-weight: 300; letter-spacing: var(--track-display); line-height: 0.92;
}
.outro__title .roll { line-height: 1; padding-bottom: 0.06em; }
.outro__arrow { width: 0.7em; height: 0.7em; fill: var(--accent); transition: transform 600ms var(--ease-out); flex: none; }
@media (hover: hover) { .outro__title:hover .outro__arrow { transform: translateX(0.12em) rotate(-45deg); } }
.outro__row { display: grid; justify-items: start; gap: 20px; }
.outro__social { display: flex; align-items: center; gap: 28px; }
.outro__social a { display: inline-flex; color: inherit; opacity: 0.85; transition: opacity var(--dur-ui) var(--ease-out); }
@media (hover: hover) { .outro__social a:hover { opacity: 1; } }
.outro__logo { display: block; width: auto; }
/* viewBoxes are 16 / 12 / 20 tall, so one height makes the ink look uneven */
.outro__logo--linkedin { height: 20px; }
.outro__logo--behance { height: 14px; }
.outro__logo--instagram { height: 23px; }
.outro__top { display: grid; justify-items: start; gap: clamp(20px, 3vh, 36px); }
/* same voice as the header roles line: mono, uppercase, typed */
.outro__meta { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 10px; margin: 0;
    font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.outro__meta a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.outro__typer { display: inline-flex; flex: none; color: var(--interactive); }
.outro__typer-slot { display: inline-grid; }
.outro__typer-slot > * { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.outro__typer-live { justify-self: start; }
.outro__typer-sizer { visibility: hidden; }
.outro__caret { width: 7px; height: 1.1em; background: currentColor; animation: ws-caret 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .outro__caret { animation: none; } }
/* home: the story sits on the blob — every text white */
.outro.story { color: #0e0e10; --ink: #0e0e10; --ink-2: rgb(14 14 16 / 0.78); --ink-3: rgb(14 14 16 / 0.62); --line: rgb(14 14 16 / 0.22); }
.outro.story .outro__typer { color: #0e0e10; }
.outro.story .outro__arrow { fill: #0e0e10; }
[data-theme="dark"] .outro.story { color: #fff; --ink: #fff; --ink-2: rgb(255 255 255 / 0.88); --ink-3: rgb(255 255 255 / 0.72); --line: rgb(255 255 255 / 0.28); }
[data-theme="dark"] .outro.story .outro__typer { color: #fff; }
[data-theme="dark"] .outro.story .outro__arrow { fill: #fff; }
/* home: bent like the case cards, turned to face the middle of the screen; it stays still */
.outro.story { perspective: 900px; perspective-origin: 50% 50%; }
.outro.story .outro__inner { transform: rotateX(6deg) rotateY(18deg); transform-origin: 0 50%; }
@media (max-width: 899px) {
    .outro__title { font-size: clamp(2.4rem, 11vw, 3.2rem); }
    .outro__meta { display: grid; justify-items: start; gap: 8px; font-size: 10px; letter-spacing: 0.08em; }
    .outro__meta > span[aria-hidden="true"] { display: none; }
    .outro { padding-bottom: 96px; }
    main { padding-bottom: 88px; }
}

/* location and availability in the nav: two lines, small and quiet */
.nav__status { position: absolute; left: calc(var(--gutter) + 90px); top: 50%; transform: translateY(-50%); display: grid; gap: 2px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; line-height: 1.3; letter-spacing: 0.04em; color: var(--ink-3); white-space: nowrap; }
.nav__status span:first-child { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.nav__dot { width: 5px; height: 5px; background: var(--brand-lime); }
@media (max-width: 899px) { .nav__status { display: none; } }

/* scroll cue + page progress: fixed bottom-right on every page; the bar fills as you scroll */
.scroll-cue { position: fixed; right: var(--gutter); bottom: 28px; z-index: var(--z-nav); display: grid; justify-items: center; gap: 12px; pointer-events: none;
    font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.scroll-cue i { position: relative; width: 1px; height: 56px; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.scroll-cue b { position: absolute; inset: 0; background: var(--interactive); transform-origin: 50% 0; transform: scaleY(0); }
@media (max-width: 899px) { .scroll-cue { display: none; } }

/* label reads vertically above the bar; a pulse keeps travelling down the bar to say "keep going" */
.scroll-cue span { writing-mode: vertical-rl; letter-spacing: 0.2em; }
.scroll-cue i { overflow: hidden; height: 72px; }
.scroll-cue i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 30%; background: linear-gradient(transparent, var(--ink)); animation: cue-run 1.8s var(--ease-in-out, ease-in-out) infinite; }
@keyframes cue-run { 0% { transform: translateY(-100%); } 100% { transform: translateY(340%); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue i::after { animation: none; } }

/* corners: the nav pieces sit fixed at the four corners of the viewport, in the scroll-cue type */
.nav { inset: 0; height: auto; display: block; padding: 0; pointer-events: none; transform: none !important; background: none;
    font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.nav::before, .nav__progress, .scroll-cue { display: none; }
.nav > * { position: fixed; pointer-events: auto; }
.nav__logo { top: 24px; left: var(--gutter); color: var(--ink); }
.nav__links { top: 24px; right: var(--gutter); gap: 24px; font-size: inherit; font-weight: 400; }
.nav__links a { padding: 0; color: var(--ink-3); transition: color 240ms var(--ease-out); }
.nav__links a[aria-current="page"] { color: var(--ink); }
@media (hover: hover) { .nav__links a:hover { color: var(--ink); } }
.nav .nav__ask { width: auto; height: auto; padding: 0; border: 0; background: none; color: var(--ink-3); gap: 8px; bottom: 24px; left: var(--gutter); font: inherit; letter-spacing: inherit; text-transform: inherit; }
.nav__status { position: fixed; inset: auto var(--gutter) 24px auto; transform: none; display: grid; justify-items: end; letter-spacing: 0.12em; }
.nav__settings { top: 50%; right: var(--gutter); transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.nav__settings summary { list-style: none; cursor: pointer; writing-mode: vertical-rl; letter-spacing: 0.2em; color: var(--ink-3); transition: color 240ms var(--ease-out); }
.nav__settings summary::-webkit-details-marker { display: none; }
.nav__settings[open] summary, .nav__settings summary:hover { color: var(--ink); }
.nav__settings-panel { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.nav__settings .nav__lang { flex-direction: column; font-size: inherit; }
@media (max-width: 899px) { .nav__status { display: grid; } }
@media (hover: hover) { .nav .nav__ask:hover { color: var(--ink); } }
.nav .nav__ask .ask-trigger__label { display: inline; }
/* one weight for every corner: same tone, so no piece reads smaller than the others */
.nav { color: var(--ink-2); }
.nav__links a, .nav .nav__ask, .nav__settings summary, .nav__status, .nav__status span { color: var(--ink-2); }
.nav__links a[aria-current="page"] { color: var(--ink); }
.nav__links a { transition: color 240ms var(--ease-out); }
@media (hover: hover) { .nav__links a:hover { color: var(--ink); } }
/* hover: TV tuning. Scanlines roll down through the label and fade while the letters rebuild (tune.js) */
.btn__label, .nav .nav__ask .ask-trigger__label, .outro__title-text, a[data-tune] { display: inline-block; } .nav__links > a, .nav__lang a { font-variant-numeric: tabular-nums; }
.nav__links > a.is-tuning, .nav__lang a.is-tuning, .btn__label.is-tuning, .ask-trigger__label.is-tuning, .outro__title-text.is-tuning, [data-tune].is-tuning {
    /* the scanlines live inside the glyphs only: the label is painted by a striped background clipped to the text */
    background: repeating-linear-gradient(to bottom, currentColor 0 1px, color-mix(in srgb, currentColor 25%, transparent) 1px 2px);
    background-size: 100% 3px;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: nav-tune 420ms steps(9) forwards;
}
@keyframes nav-tune {
    0%   { background-position: 0 0;   transform: translateX(-2px); }
    30%  { transform: translateX(1px); }
    60%  { transform: translateX(-1px); }
    100% { background-position: 0 9px; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .nav__links > a.is-tuning, .nav__lang a.is-tuning, .btn__label.is-tuning, .ask-trigger__label.is-tuning, [data-tune].is-tuning { animation: none; } }
/* the pointer is a small ball: no system cursor, no shadow */
html.has-ball, html.has-ball * { cursor: none !important; }
.st-ball { position: fixed; left: 0; top: 0; z-index: 9999; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; pointer-events: none; background: var(--ink); will-change: transform; }
@media (hover: none) { .st-ball { display: none; } }
/* Settings moved to the bottom centre: one horizontal label, the options unfold beside it */
.nav__settings { top: auto; bottom: 24px; right: auto; left: 50%; transform: translateX(-50%); flex-direction: row; gap: 16px; }
.nav__settings summary { writing-mode: horizontal-tb; }
.nav__settings-panel, .nav__settings .nav__lang { flex-direction: row; }
/* Section index on the right edge: a thin progress line with ticks; hovering opens the timeline */
.nav__index { top: 50%; right: var(--gutter); transform: translateY(-50%); display: flex; align-items: stretch; gap: 0; }
.nav__index-line { position: absolute; right: 3px; top: 4px; bottom: 4px; width: 1px; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.nav__index-line b { position: absolute; inset: 0; background: var(--ink); transform-origin: 50% 0; transform: scaleY(0); }
.nav__index ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.nav__index a { display: flex; align-items: center; justify-content: flex-end; gap: 12px; color: var(--ink-3); text-decoration: none; }
.nav__index a i { width: 7px; height: 1px; background: currentColor; flex: none; transition: width 300ms var(--ease-out); }
.nav__index a span { opacity: 0; translate: 8px 0; transition: opacity 260ms var(--ease-out), translate 260ms var(--ease-out); white-space: nowrap; pointer-events: none; }
.nav__index a[aria-current] { color: var(--ink); }
.nav__index a[aria-current] i { width: 14px; }
.nav__index:hover a span, .nav__index:focus-within a span { opacity: 1; translate: 0 0; pointer-events: auto; }
.nav__index:hover a:hover { color: var(--ink); }
.nav__index:hover li:nth-child(2) span { transition-delay: 30ms; } .nav__index:hover li:nth-child(3) span { transition-delay: 60ms; } .nav__index:hover li:nth-child(4) span { transition-delay: 90ms; } .nav__index:hover li:nth-child(5) span { transition-delay: 120ms; } .nav__index:hover li:nth-child(6) span { transition-delay: 150ms; } .nav__index:hover li:nth-child(7) span { transition-delay: 180ms; }
.nav__index { display: none !important; }
/* index: ticks on the line, names hung to the left of them (out of the flow), a wide hover area */
.nav__index { padding: 8px 0 8px 24px; }
.nav__index a { position: relative; justify-content: flex-end; width: 16px; height: 12px; }
.nav__index a i { margin-left: auto; }
.nav__index a span { position: absolute; right: calc(100% + 10px); top: 50%; translate: 8px -50%; }
.nav__index:hover a span, .nav__index:focus-within a span { translate: 0 -50%; }
.nav__index-line { right: 0; }
/* index: no horizontal tick marks, only the line, the current dot and the names */
.nav__index a i { width: 0 !important; height: 0; }
.nav__index a[aria-current]::after { content: ""; position: absolute; right: -3px; top: 50%; width: 7px; height: 7px; translate: 0 -50%; border-radius: 50%; background: var(--ink); }
.nav__index a span { right: 14px; }
/* settings: the label stays put at the centre; the options open beside it without shifting it */
.nav__settings { display: block; }
.nav__settings-panel { position: absolute; left: calc(100% + 16px); top: 50%; translate: 0 -50%; white-space: nowrap; }
/* settings as a gear beside About (top right); the options open under it, right-aligned */
.nav__links { align-items: center; }
.nav__links .nav__settings { position: relative; inset: auto; transform: none; }
.nav__links .nav__settings summary { display: grid; place-items: center; width: 16px; height: 16px; }
.nav__settings summary svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: rotate 500ms var(--ease-out); }
.nav__settings[open] summary svg { rotate: 60deg; }
.nav__links .nav__settings-panel { left: auto; right: 0; top: calc(100% + 16px); translate: none; }

/* Menu canvas: Work, About and Settings, opened from the Menu label like the original site */
.nav__menu { top: 24px; right: var(--gutter); z-index: 3; display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--ink-2); font: inherit; letter-spacing: inherit; text-transform: inherit; }
.nav__logo { z-index: 3; }
.nav__menu-arrow { display: flex; flex-direction: column; gap: 5px; width: 14px; }
.nav__menu-arrow i { display: block; height: 1px; background: currentColor; transition: transform 300ms var(--ease-out); }
.nav__menu[aria-expanded="true"] .nav__menu-arrow i:first-child { transform: translateY(3px) rotate(45deg); }
.nav__menu[aria-expanded="true"] .nav__menu-arrow i:last-child { transform: translateY(-3px) rotate(-45deg); }
@media (hover: hover) { .nav__menu:hover { color: var(--ink); } }
.nav__canvas { inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: 120px var(--gutter) 48px; background: var(--bg); color: var(--ink);
    font-family: var(--font); font-size: 16px; letter-spacing: normal; text-transform: none; line-height: 1.2;
    transform: translateX(-100%); transition: transform 500ms cubic-bezier(.22, 1, .36, 1); }
.nav__canvas.is-open { transform: translateX(0); }
.nav__canvas[hidden] { display: none; }
.nav__canvas-links { display: grid; gap: 24px; align-content: end; margin-top: auto; }
.nav__canvas-links a { font-weight: 300; font-size: clamp(3.2rem, 8vw, 6.5rem); letter-spacing: -0.04em; line-height: 0.95; color: var(--ink); }
.nav__canvas-links a[aria-current="page"] { color: var(--interactive); }
.nav__canvas-foot { display: grid; gap: 28px; }
.nav__canvas-set { display: flex; align-items: center; gap: 28px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.nav__canvas-set .nav__lang { gap: 0; }
.nav__canvas-set .nav__lang a { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
.nav__canvas-set .theme-toggle { width: 44px; height: 44px; margin-left: -13px; color: var(--ink); }
.nav__canvas-legal { display: grid; gap: 8px; margin: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.nav__canvas-legal a { color: inherit; }
.nav__canvas-legal a[href^="mailto:"] { text-transform: none; letter-spacing: 0.02em; }
html.is-menu-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .nav__canvas { transition: none; } }
@media (min-width: 900px) { .nav__menu, .nav__canvas { display: none !important; } }
@media (max-width: 899px) { .nav__settings { display: none !important; } }
.nav__settings:not([open]) .nav__settings-panel { display: none; }
@media (max-width: 899px) { .nav__links { display: none; } }


/* Settings inline in the nav, after Let's talk (no gear): theme toggle, then EN / IT */
.nav__prefs { display: inline-flex; align-items: center; gap: 14px; margin-left: 6px; padding-left: 20px; border-left: 1px solid var(--line); }
.nav__prefs .nav__lang { display: inline-flex; gap: 10px; }
.nav__links .nav__prefs .nav__lang, .nav__links .nav__prefs .nav__lang a { font: inherit; font-size: inherit; letter-spacing: inherit; text-transform: inherit; }
@media (max-width: 899px) { .nav__prefs { display: none; } }
/* Ask AI / location: clear of the home indicator where the page reaches the screen edge (iPhone, standalone) */
.nav .nav__ask { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.nav__status { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }