/* ============================================================
   IPEDRAX PORTFOLIO v4: "Profiler", after Watch Dogs 2
   The opening cinematic's two poles: a sterile black-and-white
   system (white label bars, grids) hijacked by DedSec (1-bit
   dither, glitches, hot color). Palette: ink and bone, DedSec
   pink for brand and action, cyan for live data. No glow.
   Type: Big Shoulders Display over IBM Plex Mono.
   ============================================================ */

:root {
    --ink: #0a0a0b;
    --panel: #101012;
    --panel-2: #17171a;
    --line: #242428;
    --line-2: #2e2e33;
    --line-3: #3c3c42;
    --bone: #f2f2f0;
    --text: #d6d6d8;
    --muted: #a8a8ae;
    --dim: #8f8f97;
    --accent: #ff2e88;
    --accent-hi: #ff5ca3;
    --accent-ink: #1c0610;
    --data: #3ad7ff;

    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
    --font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast: 160ms;
    --t-med: 280ms;
    --nav-h: 72px;

    --z-nav: 100;
    --z-blackout: 800;
    --z-boot: 1000;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--ink);
    background-image:
        linear-gradient(#141417 1px, transparent 1px),
        linear-gradient(90deg, #141417 1px, transparent 1px);
    background-size: 40px 40px;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 16px;
    line-height: 1.65;
    overflow-x: hidden;
}

::selection {
    background: var(--accent);
    color: var(--accent-ink);
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--ink);
}

::-webkit-scrollbar-thumb {
    background: var(--line-3);
    border: 2px solid var(--ink);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

.icon {
    width: 1.4em;
    height: 1.4em;
    flex: none;
}

/* ---- Accessibility ---- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: calc(var(--z-boot) + 1);
    background: var(--accent);
    color: var(--accent-ink);
    padding: 10px 18px;
    font-weight: 500;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* ---- Backdrop: 1-bit dither field, drawn at a quarter resolution ---- */
.bgfx {
    position: fixed;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    image-rendering: pixelated;
}

/* ---- Boot: the system's pitch, then the hijack ---- */
.boot-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-boot);
    display: grid;
    place-items: center;
    padding: 8vw;
    /* dark from the first frame: a white boot screen flashbangs anyone arriving
       from a dark page. The system still reads as sterile through its white bars. */
    background: var(--ink);
    color: var(--bone);
    cursor: pointer;
    transition: opacity 400ms ease, visibility 400ms;
}

.boot-overlay.done {
    opacity: 0;
    visibility: hidden;
}

.boot-sys,
.boot-hack {
    grid-area: 1 / 1;
}

/* the sterile side speaks the system's plain Helvetica, not the site's type */
.boot-sys {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.boot-strips span {
    display: block;
    width: fit-content;
    margin-top: -2px;
    padding: 0 0.14em 0.06em;
    background: var(--bone);
    color: var(--ink);
    font-size: clamp(2.4rem, 8vw, 6.2rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.04em;
    transform: scaleX(0);
    transform-origin: left;
    animation: strip-in 0.26s var(--ease-out) forwards;
}

.boot-strips span:nth-child(2) {
    animation-delay: 0.11s;
}

.boot-strips span:nth-child(3) {
    animation-delay: 0.22s;
}

.boot-strips span:nth-child(4) {
    animation-delay: 0.33s;
}

@keyframes strip-in {
    to {
        transform: none;
    }
}

/* Held on their first frame until js/main.js arms the boot, so they play once,
   already in the visitor's language. Otherwise they played at first paint, then
   again when the translation swapped new strips in at DOMContentLoaded. */
.boot-overlay:not(.armed) .boot-strips span,
.boot-overlay:not(.armed) .boot-tag {
    animation-play-state: paused;
}

.boot-tag {
    margin-top: 14px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    opacity: 0;
    animation: boot-fade 0.3s 0.55s forwards;
}

@keyframes boot-fade {
    to {
        opacity: 1;
    }
}

/* the hijack: a jolt and two torn signal bands. No invert() flicker: on a dark
   screen it strobes the whole viewport white. */
.boot-overlay.is-glitching {
    animation: boot-glitch 0.34s steps(1) both;
}

.boot-overlay.is-glitching::before,
.boot-overlay.is-glitching::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 7vh;
    animation: boot-band 0.34s steps(1) both;
}

.boot-overlay.is-glitching::before {
    top: 28%;
    background: var(--accent);
}

.boot-overlay.is-glitching::after {
    top: 61%;
    background: var(--data);
    animation-direction: reverse;
}

@keyframes boot-glitch {
    0% {
        transform: translateX(-8px);
    }

    30% {
        transform: translateX(6px) skewX(-4deg);
    }

    55% {
        transform: none;
    }

    80% {
        transform: translateX(-3px);
    }
}

@keyframes boot-band {
    0% {
        transform: translateX(-30%);
    }

    40% {
        transform: translateX(20%) scaleY(0.4);
    }

    70% {
        transform: translateX(-10%) scaleY(1.6);
    }
}

.boot-hack {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
}

.boot-overlay.is-hacked .boot-sys {
    display: none;
}

.boot-overlay.is-hacked .boot-hack {
    display: flex;
}

.boot-mark {
    width: 120px;
    height: 120px;
}

.boot-hello {
    color: var(--accent);
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 7vw, 4.6rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: 0.04em;
}

.boot-log {
    min-height: 7.6em;
    color: var(--data);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 1.9;
    letter-spacing: 0.08em;
    text-align: left;
    white-space: pre-wrap;
}

/* ---- Shared ---- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.section {
    padding: 110px 24px;
    scroll-margin-top: var(--nav-h);
}

.section-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 44px;
}

.kicker {
    font-size: 0.8rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent);
}

/* the system's white label bars, as in the cinematic's sterile half */
.section-head .kicker {
    width: fit-content;
    padding: 3px 9px;
    background: var(--bone);
    color: var(--ink);
    font-weight: 500;
}

.section-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2.75rem, 6vw, 4.75rem);
    line-height: 0.88;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: var(--bone);
}

.section-title::after {
    content: "_";
    color: var(--accent);
}

.section-lead {
    max-width: 640px;
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.95rem;
}

.highlight-magenta,
.highlight-yellow,
.readout-ok {
    color: var(--accent);
}

/* ---- Navbar ---- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav);
    background: rgba(11, 12, 14, 0.97);
    border-bottom: 1px solid var(--line);
}

.nav-content {
    max-width: 1200px;
    height: var(--nav-h);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.logo-mark {
    width: 34px;
    height: 34px;
    flex: none;
}

.logo-text {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.7rem;
    line-height: 1;
    letter-spacing: 0.08em;
    color: var(--bone);
}

.logo-cursor,
.cursor {
    color: var(--accent);
    animation: blink 1.1s steps(1) infinite;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    order: 3;
}

.lang-toggle {
    display: none;
    /* hidden per request: language switch via Alt+B */
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 32px;
    order: 2;
    margin-left: auto;
}

.nav-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-decoration: none;
    transition: color var(--t-fast), border-color var(--t-fast);
}

.nav-num {
    color: var(--accent);
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--bone);
}

.nav-links a.active {
    border-bottom-color: var(--accent);
}

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--line-3);
    color: var(--bone);
    cursor: pointer;
}

.nav-toggle .icon-close {
    display: none;
}

body.nav-open .nav-toggle .icon-menu {
    display: none;
}

body.nav-open .nav-toggle .icon-close {
    display: block;
}

/* ---- Hero: the profiler ---- */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--nav-h) + 40px) 0 96px;
    overflow: hidden;
    background-image:
        linear-gradient(#18181c 1px, transparent 1px),
        linear-gradient(90deg, #18181c 1px, transparent 1px);
    background-size: 200px 200px;
}

.hero-grid {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr);
    gap: 48px;
    align-items: center;
}

.hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.hero-name {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(3.6rem, 11vw, 10.5rem);
    line-height: 0.82;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    color: var(--bone);
}

.hero-name > span {
    display: block;
}

/* a DedSec signal glitch every seven seconds, a tenth of a second long */
.hero-name {
    animation: name-glitch 7s steps(1) infinite;
}

@keyframes name-glitch {
    94% {
        text-shadow: -4px 0 var(--accent), 4px 0 var(--data);
        transform: translateX(3px) skewX(-4deg);
    }

    95% {
        text-shadow: 3px 0 var(--accent), -3px 0 var(--data);
        transform: translateX(-4px);
    }

    96% {
        text-shadow: none;
        transform: none;
    }
}

/* At this size the "_" glyph is ~95px wide; a fixed bar reads as a cursor. */
.hero-name .cursor {
    display: inline-block;
    width: 0.3em;
    height: 0.07em;
    margin-left: 0.05em;
    background: var(--accent);
    color: transparent;
    overflow: hidden;
    vertical-align: baseline;
}

.hero-roles {
    font-size: clamp(0.78rem, 1.15vw, 0.92rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
}

.hero-tagline {
    max-width: 560px;
    color: var(--muted);
    line-height: 1.7;
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 4px;
}

.blackout-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0;
    background: none;
    border: 0;
    color: #7f8381;
    font: inherit;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    cursor: pointer;
    transition: color var(--t-fast);
}

.blackout-btn kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--line-3);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    transition: border-color var(--t-fast), color var(--t-fast);
}

.blackout-btn:hover,
.blackout-btn[aria-pressed="true"] {
    color: var(--bone);
}

.blackout-btn:hover kbd,
.blackout-btn[aria-pressed="true"] kbd {
    border-color: var(--accent);
    color: var(--accent);
}

/* Subject: the axolotl in the reticle, the profiler card under it */
.hero-subject {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Eight 2px bars paint the four corner brackets without extra markup. */
.reticle {
    --c: var(--accent);
    --arm: 30px;
    position: relative;
    width: min(100%, 330px);
    padding: 22px;
    background:
        linear-gradient(var(--c), var(--c)) top left / var(--arm) 2px no-repeat,
        linear-gradient(var(--c), var(--c)) top left / 2px var(--arm) no-repeat,
        linear-gradient(var(--c), var(--c)) top right / var(--arm) 2px no-repeat,
        linear-gradient(var(--c), var(--c)) top right / 2px var(--arm) no-repeat,
        linear-gradient(var(--c), var(--c)) bottom left / var(--arm) 2px no-repeat,
        linear-gradient(var(--c), var(--c)) bottom left / 2px var(--arm) no-repeat,
        linear-gradient(var(--c), var(--c)) bottom right / var(--arm) 2px no-repeat,
        linear-gradient(var(--c), var(--c)) bottom right / 2px var(--arm) no-repeat;
}

.reticle-tag {
    position: absolute;
    left: calc(100% + 14px);
    top: 0;
    font-size: 0.68rem;
    line-height: 1.9;
    letter-spacing: 0.2em;
    white-space: nowrap;
    color: var(--accent);
}

.reticle-tag span {
    color: var(--dim);
}

/* The axolotl: pixel art on the same 6-unit grid as its LED eyes. Each eye is a
   6x6 LED matrix that js/main.js lights to look, blink, smile, emote and
   doze; the goggles are after Wrench's in Watch Dogs 2. The gills flutter in two
   frames, like a GIF, and hop up a pixel when it reacts. */
.mascot {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding: 18px;
    cursor: pointer;
}

.mascot path,
.mascot rect {
    shape-rendering: crispEdges;
}

.px-k { fill: #3b0f24; }
.px-p { fill: #ff8fbf; }
.px-s { fill: #e9669c; }
.px-w { fill: #ffc4de; }
.px-d { fill: #26262c; }
.px-e { fill: #0a0a0b; }
.px-m { fill: #7a1440; }
.px-b { fill: #ff5a9e; }
.px-g { fill: var(--accent); }
.px-f { fill: #ff7ab4; }

.gills-a {
    animation: frame-a 0.8s steps(1) infinite;
}

.gills-b {
    visibility: hidden;
    animation: frame-b 0.8s steps(1) infinite;
}

.mascot[data-mood="asleep"] .gills-a,
.mascot[data-mood="asleep"] .gills-b {
    animation-duration: 2.4s;
}

@keyframes frame-a {
    50% {
        visibility: hidden;
    }
}

@keyframes frame-b {
    50%,
    100% {
        visibility: visible;
    }
}

/* whole-pixel hops only, so the art stays crisp */
.mascot:not([data-mood="open"]):not([data-mood="asleep"]) .gills {
    transform: translateY(-6px);
}

.mascot[data-mood="surprised"] .gills {
    transform: translateY(-12px);
}

/* white LEDs, unlit ones faintly visible, like a real matrix */
.eye-led {
    fill: #18181c;
}

.eye-led.on {
    fill: var(--bone);
}

/* DedSec prints its art as die-cut stickers: a white rim round the silhouette */
.mascot-art {
    filter: url(#sticker);
}

.profiler {
    position: relative;
    width: min(100%, 460px);
    margin-top: 30px;
    background: var(--panel);
    border: 1px solid var(--line-2);
    border-top: 2px solid var(--accent);
}

/* leader line from the reticle down to the card */
.profiler::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -32px;
    width: 1px;
    height: 30px;
    background: #5b5f63;
}

.profiler-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    color: var(--dim);
}

.profiler-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--data);
}

.profiler-live::before {
    content: "";
    width: 7px;
    height: 7px;
    background: var(--data);
    animation: blink 1.6s steps(1) infinite;
}

.pf-name,
.pf-fact {
    width: fit-content;
    background: var(--bone);
    color: var(--ink);
}

.pf-name {
    margin: 0 16px 8px;
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.14em;
}

.pf-fact {
    margin: 0 16px 14px;
    padding: 8px 12px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.4rem;
    line-height: 1.1;
    letter-spacing: 0.02em;
}

.pf-strips {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 16px 16px;
    font-size: 0.75rem;
    line-height: 1.5;
}

.pf-strips div {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 12px;
    padding: 6px 10px;
    background: var(--panel-2);
}

.pf-strips dt {
    color: var(--dim);
    letter-spacing: 0.1em;
}

.pf-strips dd {
    color: var(--bone);
}

.scanbar {
    display: block;
    height: 2px;
    overflow: hidden;
    background: #1c1f22;
}

.scanbar::after {
    content: "";
    display: block;
    width: 40%;
    height: 100%;
    background: var(--accent);
    animation: scan 2.6s linear infinite;
}

@keyframes scan {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(260%);
    }
}

/* Feed strip: real counts only, never invented stats */
.feed {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--ink);
    border-top: 1px solid var(--line);
}

.feed-inner {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    color: var(--dim);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
}

.feed-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 36px;
}

.feed-ref {
    flex-shrink: 0;
    white-space: nowrap;
}

.feed-items span::before {
    content: "› ";
    color: var(--accent);
}

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 56px;
    padding: 0 28px;
    border: 1px solid transparent;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.3rem;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.btn .icon {
    width: 18px;
    height: 18px;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    background: var(--accent);
    color: var(--accent-ink);
}

.btn-primary:hover {
    background: var(--accent-hi);
}

.btn-ghost {
    border-color: #5b5f63;
    color: var(--bone);
}

.btn-ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.btn-card {
    align-self: flex-start;
    min-height: 44px;
    margin-top: 20px;
    padding: 0 16px;
    background: transparent;
    border-color: var(--line-3);
    color: var(--bone);
    font-size: 1.05rem;
}

.btn-card + .btn-card {
    margin-top: 10px;
}

.btn-card:hover {
    border-color: var(--accent);
    color: var(--accent);
}

button.btn {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--font-display);
}

/* ---- Panels (about, library) ---- */
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-top: 2px solid var(--accent);
}

.panel-body {
    padding: 36px;
}

.panel-readout {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 24px;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
}

.panel-readout span {
    padding: 5px 10px;
    background: var(--panel-2);
    color: var(--dim);
}

.panel-readout span:first-child {
    background: var(--bone);
    color: var(--ink);
    font-weight: 500;
}

.panel-readout .readout-ok {
    background: var(--accent);
    color: var(--accent-ink);
}

.panel-body p {
    max-width: 72ch;
    margin-bottom: 18px;
}

.panel-body .panel-log {
    color: var(--dim);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
}

.skills-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 26px;
}

.chip {
    padding: 6px 12px;
    border: 1px solid var(--line-3);
    color: var(--text);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    transition: border-color var(--t-fast), color var(--t-fast);
    cursor: default;
}

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

/* ---- Library ---- */
.book-showcase {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.book-tilt {
    --c: var(--accent);
    --arm: 22px;
    position: relative;
    width: 250px;
    height: 375px;
    transform-style: preserve-3d;
    transition: transform var(--t-fast) ease-out;
    will-change: transform;
}

.book-tilt::after {
    content: "";
    position: absolute;
    inset: -12px;
    pointer-events: none;
    background:
        linear-gradient(var(--c), var(--c)) top left / var(--arm) 2px no-repeat,
        linear-gradient(var(--c), var(--c)) top left / 2px var(--arm) no-repeat,
        linear-gradient(var(--c), var(--c)) top right / var(--arm) 2px no-repeat,
        linear-gradient(var(--c), var(--c)) top right / 2px var(--arm) no-repeat,
        linear-gradient(var(--c), var(--c)) bottom left / var(--arm) 2px no-repeat,
        linear-gradient(var(--c), var(--c)) bottom left / 2px var(--arm) no-repeat,
        linear-gradient(var(--c), var(--c)) bottom right / var(--arm) 2px no-repeat,
        linear-gradient(var(--c), var(--c)) bottom right / 2px var(--arm) no-repeat;
}

.cover-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid var(--line-2);
}

.book-title {
    margin-bottom: 16px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    line-height: 0.9;
    letter-spacing: 0.01em;
    color: var(--bone);
}

.panel-body .book-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 20px;
}

.book-meta span {
    padding: 5px 10px;
    background: var(--panel-2);
    color: var(--dim);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
}

.book-meta b {
    font-weight: 500;
    color: var(--accent);
}

.panel-body .book-blurb {
    max-width: 600px;
    margin-bottom: 28px;
    color: var(--muted);
}

/* ---- Projects and skills: case-file cards ---- */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

/* Same corner-bracket trick as .reticle; the brackets appear on hover/focus. */
.cyber-card {
    --c: transparent;
    --arm: 16px;
    position: relative;
    border: 1px solid var(--line);
    background:
        linear-gradient(var(--c), var(--c)) top left / var(--arm) 2px no-repeat,
        linear-gradient(var(--c), var(--c)) top left / 2px var(--arm) no-repeat,
        linear-gradient(var(--c), var(--c)) top right / var(--arm) 2px no-repeat,
        linear-gradient(var(--c), var(--c)) top right / 2px var(--arm) no-repeat,
        linear-gradient(var(--c), var(--c)) bottom left / var(--arm) 2px no-repeat,
        linear-gradient(var(--c), var(--c)) bottom left / 2px var(--arm) no-repeat,
        linear-gradient(var(--c), var(--c)) bottom right / var(--arm) 2px no-repeat,
        linear-gradient(var(--c), var(--c)) bottom right / 2px var(--arm) no-repeat,
        var(--panel);
    transition: border-color var(--t-fast);
}

.cyber-card:hover,
.cyber-card:focus-within {
    --c: var(--accent);
    border-color: var(--line-3);
}

.cyber-card--featured {
    border-top: 2px solid var(--accent);
}

.card-inner {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 30px 24px 24px;
}

.card-badge {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    background: var(--data);
    color: var(--ink);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.18em;
}

.cyber-card--featured .card-badge {
    background: var(--accent);
    color: var(--accent-ink);
}

.card-badge--os {
    background: var(--bone);
    color: var(--ink);
}

.live-dot {
    width: 6px;
    height: 6px;
    background: currentColor;
    animation: blink 1.6s steps(1) infinite;
}

.project-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 0 12px;
}

.project-icon {
    width: 1.6em;
    height: 1.6em;
    color: var(--dim);
    transition: color var(--t-fast);
}

.cyber-card:hover .project-icon,
.cyber-card:focus-within .project-icon {
    color: var(--accent);
}

.project-header h3 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.75rem;
    line-height: 1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--bone);
}

.project-desc {
    margin-bottom: 18px;
    color: var(--muted);
    font-size: 0.9rem;
}

.project-tags {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
}

.project-tags span {
    padding: 3px 8px;
    background: var(--panel-2);
    color: var(--dim);
}

/* ---- Modals (MTG suite, client work) ---- */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 950;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(5, 6, 7, 0.88);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-med) var(--ease-out), visibility var(--t-med);
}

.modal-overlay.open {
    opacity: 1;
    visibility: visible;
}

.modal-panel {
    position: relative;
    width: min(760px, 100%);
    max-height: 88vh;
    background: var(--panel);
    border: 1px solid var(--line-2);
    border-top: 2px solid var(--accent);
    transform: translateY(14px);
    transition: transform var(--t-med) var(--ease-out);
}

.modal-overlay.open .modal-panel {
    transform: none;
}

.modal-panel--wide {
    width: min(1020px, 100%);
}

.modal-inner {
    max-height: 88vh;
    padding: 40px;
    overflow-y: auto;
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--panel-2);
    border: 1px solid var(--line-3);
    color: var(--bone);
    cursor: pointer;
    transition: border-color var(--t-fast), color var(--t-fast);
}

.modal-close:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.modal-title {
    margin-bottom: 12px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 0.9;
    text-transform: uppercase;
    color: var(--bone);
}

.modal-lead {
    max-width: 60ch;
    margin-bottom: 28px;
    color: var(--muted);
    font-size: 0.92rem;
}

.modal-projects {
    display: grid;
    gap: 12px;
}

.modal-project {
    padding: 20px 22px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    transition: border-color var(--t-fast);
}

.modal-project:hover {
    border-color: var(--accent);
}

.stage-tag {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--accent);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
}

.modal-project h4 {
    margin-bottom: 8px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1;
    text-transform: uppercase;
    color: var(--bone);
}

.modal-project p {
    margin-bottom: 14px;
    color: var(--muted);
    font-size: 0.88rem;
}

.modal-project .btn-card {
    margin-top: 0;
}

/* ---- Contact: secure channel ---- */
.terminal-window {
    max-width: 720px;
    margin: 0 auto;
    background: var(--panel);
    border: 1px solid var(--line);
    border-top: 2px solid var(--accent);
}

.window-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
}

.led {
    width: 8px;
    height: 8px;
    background: var(--data);
    animation: blink 1.6s steps(1) infinite;
}

.window-title {
    color: var(--dim);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.window-mark {
    width: 28px;
    height: 28px;
    margin-left: auto;
}

.window-body {
    min-height: 230px;
    padding: 26px;
    font-size: 0.95rem;
}

.window-body p {
    margin-bottom: 8px;
    color: var(--text);
}

.social-links {
    display: flex;
    flex-direction: column;
    margin-top: 24px;
    border-top: 1px solid var(--line);
}

.social-link {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    padding: 0 8px;
    border-bottom: 1px solid var(--line);
    color: var(--bone);
    font-size: 0.9rem;
    letter-spacing: 0.16em;
    text-decoration: none;
    transition: color var(--t-fast), background var(--t-fast), padding-left var(--t-fast);
}

.social-link .icon {
    color: var(--dim);
    transition: color var(--t-fast);
}

.social-link::after {
    content: "›";
    margin-left: auto;
    color: var(--dim);
}

.social-link:hover {
    padding-left: 16px;
    background: var(--panel-2);
    color: var(--accent);
}

.social-link:hover .icon,
.social-link:hover::after {
    color: var(--accent);
}

/* ---- Reveal on scroll ---- */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}

.reveal.visible {
    opacity: 1;
    transform: none;
}

/* ---- Footer ---- */
footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px 24px;
    border-top: 1px solid var(--line);
    color: var(--dim);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
}

footer .logo-mark {
    width: 22px;
    height: 22px;
}

/* ---- Jolly Roger: easter egg parked in an empty side gutter, lights off only ----
   js/main.js sets top/left and unhides it; nothing here may set `display`,
   or it would override the [hidden] the script relies on. It sits in the page,
   not the viewport, so it scrolls away with its section like anything else, and
   above the blackout like the axolotl's LEDs. With the lights on it is hidden,
   not just transparent: no clicks, no tab stop. */
.jolly-roger {
    position: absolute;
    z-index: calc(var(--z-blackout) + 1);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--t-fast), visibility 0s var(--t-fast);
}

/* it fades in a beat after the lights go, the way eyes adjust to the dark */
body.is-blackout .jolly-roger {
    visibility: visible;
    opacity: 0.75;
    transition: opacity 1.2s ease 0.8s, visibility 0s;
}

/* A pixel sprite only moves and scales in whole pixels: a two-frame bob of one
   2px cell, and a hover that snaps to 1.5x, where each cell is exactly 3px. */
.jolly-roger img {
    display: block;
    width: 54px;
    height: auto;
    animation: jolly-bob 1.6s steps(1) infinite;
}

/* .playing holds the hover state for the 2s of audio, so the click reads as
   "something is happening" rather than a dead link. */
body.is-blackout .jolly-roger:hover,
body.is-blackout .jolly-roger:focus-visible,
body.is-blackout .jolly-roger.playing {
    opacity: 1;
    transform: scale(1.5);
    transition: opacity var(--t-fast);
}

.jolly-roger:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 8px;
}

@keyframes jolly-bob {
    50% {
        transform: translateY(-2px);
    }
}

/* ---- Blackout (F key): the grid goes dark, the pointer is a flashlight ----
   The overlay ignores the pointer so the page stays usable in the dark. The
   axolotl is lifted above it so only its LED eyes keep shining. */
.blackout {
    position: fixed;
    inset: 0;
    z-index: var(--z-blackout);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    background: radial-gradient(circle at var(--fx, 50%) var(--fy, 40%),
            rgba(3, 3, 4, 0) 0, rgba(3, 3, 4, 0) 90px, rgba(3, 3, 4, 0.97) 170px);
    transition: opacity 0.45s ease, visibility 0.45s;
}

body.is-blackout .blackout {
    opacity: 1;
    visibility: visible;
}

body.is-blackout .mascot {
    z-index: calc(var(--z-blackout) + 1);
}

/* in the dark only the LEDs stay lit */
body.is-blackout .mascot-body,
body.is-blackout .gills {
    opacity: 0.18;
}

body.is-blackout .eye-led:not(.on) {
    fill: #0e0e11;
}

body.is-blackout .mascot-art {
    filter: none;
}

/* ---- OSINT layer: the page reads as a case file on its own subject ---- */

/* About: dossier text beside a link-analysis graph */
.dossier {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.redact {
    cursor: help;
}

/* redacted until hovered or focused */
.redact mark {
    background: var(--bone);
    color: transparent;
    transition: background var(--t-fast), color var(--t-fast);
}

.redact:hover mark,
.redact:focus mark {
    background: transparent;
    color: var(--accent);
}

.entity-graph {
    margin: 0;
    padding: 14px 14px 6px;
    background: var(--ink);
    border: 1px solid var(--line);
}

.entity-graph figcaption {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    color: var(--dim);
    font-size: 0.68rem;
    letter-spacing: 0.22em;
}

.entity-graph svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    font-family: var(--font-mono);
}

/* edges draw themselves in when the panel scrolls into view */
.eg-edges path {
    fill: none;
    stroke: #4a4f54;
    stroke-width: 1.2;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.4s var(--ease-out) 0.2s;
}

.visible .eg-edges path {
    stroke-dashoffset: 0;
}

.eg-rel text {
    fill: #6d7276;
    font-size: 9.5px;
    font-style: italic;
}

.eg-id {
    fill: var(--ink);
    stroke: var(--bone);
    stroke-width: 1.5;
}

.eg-art {
    fill: var(--bone);
}

.eg-person {
    fill: var(--accent);
}

/* labels carry a halo in the panel color so edges pass behind them cleanly */
.eg-labels text {
    paint-order: stroke;
    stroke: var(--ink);
    stroke-width: 5px;
    stroke-linejoin: round;
}

.eg-type {
    fill: var(--dim);
    font-size: 9.5px;
    letter-spacing: 0.14em;
}

.eg-val {
    fill: var(--bone);
    font-size: 12px;
}

/* Projects and skills: exhibit tags and the source each card points at */
#projects {
    --exh: "03-";
}

#skills {
    --exh: "04-";
}

.projects-grid {
    counter-reset: exh;
}

.cyber-card {
    counter-increment: exh;
}

.card-inner::before {
    content: "EXH " var(--exh) counter(exh, upper-alpha);
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px 10px;
    background: var(--panel-2);
    color: var(--dim);
    font-size: 0.64rem;
    letter-spacing: 0.18em;
}

.card-src {
    margin-top: 16px;
    padding-top: 10px;
    border-top: 1px dashed var(--line-2);
    color: var(--dim);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    overflow-wrap: anywhere;
}

.card-src b {
    margin-right: 8px;
    color: var(--data);
    font-weight: 500;
    letter-spacing: 0.16em;
}

/* Contact: the channel beside an opt-in trace of the visitor */
.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.contact-grid .terminal-window {
    max-width: none;
    margin: 0;
}

.trace-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 0 16px 18px;
}

.trace-lead {
    color: var(--muted);
    font-size: 0.85rem;
}

.trace-body .pf-fact,
.trace-body .pf-strips {
    margin: 0;
    padding: 0;
}

.trace-body .pf-fact {
    padding: 8px 12px;
    font-size: 1.2rem;
}

.trace-body .pf-strips {
    align-self: stretch;
}

.trace-body .btn-card {
    margin-top: 0;
}


/* Footer: when this copy of the page was collected, and its hash */
footer {
    flex-wrap: wrap;
}

.evidence {
    flex-basis: 100%;
    text-align: center;
    color: #6d7276;
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    overflow-wrap: anywhere;
}

/* ---- Client work modal: every card wears its own client's brand ----
   Carried over unchanged from the v3 stylesheet. */
.client-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 18px;
}

.client-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px 22px 22px;
    overflow: hidden;
    transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}

.client-card:hover {
    transform: translateY(-5px);
}

.client-name {
    font-size: 1.05rem;
    line-height: 1.25;
    margin-bottom: 5px;
}

.client-kicker {
    display: block;
    margin-bottom: 13px;
    font-size: 0.66rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.client-desc {
    margin-bottom: 16px;
    font-size: 0.86rem;
    line-height: 1.55;
}

.client-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: auto;
    margin-bottom: 16px;
    font-size: 0.64rem;
    letter-spacing: 0.8px;
}

.client-cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-decoration: none;
    font-size: 0.71rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}

.client-cta-arrow {
    transition: transform var(--t-fast) var(--ease-out);
}

.client-card:hover .client-cta-arrow {
    transform: translateX(4px);
}

.client-logo {
    display: block;
    align-self: flex-start;
    width: auto;
    height: 46px;
    max-width: 60%;
    margin-bottom: 16px;
    object-fit: contain;
    object-position: left center;
}

/* --- Talent Ads: indigo/orange product UI, soft radii --- */
.client-card--talentads {
    font-family: 'Poppins', 'Inter', system-ui, sans-serif;
    background: linear-gradient(165deg, #1E1A33, #0F0C1B);
    border: 1px solid rgba(239, 120, 51, 0.26);
    border-radius: 16px;
}

.client-card--talentads::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #372873, #B8286A 55%, #EF7833);
}

.client-card--talentads:hover {
    box-shadow: 0 14px 34px rgba(239, 120, 51, 0.22);
}

.client-card--talentads .client-name {
    color: #F1F5F9;
    font-weight: 600;
}

.client-card--talentads .client-kicker {
    color: #EF7833;
}

.client-card--talentads .client-desc {
    color: #94A3B8;
}

.client-card--talentads .client-tags span {
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(55, 40, 115, 0.6);
    color: #C7BEE8;
}

.client-card--talentads .client-cta {
    padding: 11px 17px;
    border-radius: 999px;
    background: #EF7833;
    color: #16112A;
    font-weight: 600;
}

.client-card--talentads .client-cta:hover {
    box-shadow: 0 0 22px rgba(239, 120, 51, 0.5);
}

/* --- Talent Intelligence Brasil: event-poster purple, dashed ticket frame --- */
.client-card--summit {
    font-family: 'Inter', system-ui, sans-serif;
    padding: 30px 26px 26px;
    background: linear-gradient(150deg, #372873 0%, #581C87 58%, #2B1152 100%);
    border-radius: 14px;
}

.client-card--summit .client-logo {
    height: 58px;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
}

.client-card--summit::before {
    content: "";
    position: absolute;
    inset: 9px;
    border: 1px dashed rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    pointer-events: none;
}

.client-card--summit:hover {
    box-shadow: 0 14px 34px rgba(88, 28, 135, 0.45);
}

.client-card--summit .client-name {
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.client-card--summit .client-kicker {
    color: #D8B4FE;
}

.client-card--summit .client-desc {
    color: rgba(255, 255, 255, 0.78);
}

.client-card--summit .client-tags span {
    padding: 3px 10px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: rgba(255, 255, 255, 0.8);
}

.client-card--summit .client-cta {
    padding: 11px 17px;
    background: #F59E0B;
    color: #2B1152;
    font-weight: 700;
}

.client-card--summit .client-cta:hover {
    background: #FFB733;
}

/* --- A Toca: the burrow. Warm dark wood, gold lantern, old-style serif --- */
.client-card--toca {
    font-family: 'Inter', system-ui, sans-serif;
    background: radial-gradient(125% 95% at 50% 0%, #241C13 0%, #15110D 72%);
    border: 1px solid #3A2C1B;
    border-radius: 10px;
}

.client-card--toca .client-logo {
    height: 54px;
}

.client-card--toca::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #4B8A4E, #D99A35 52%, #CF6A3A);
}

.client-card--toca:hover {
    box-shadow: 0 14px 34px rgba(217, 154, 53, 0.2);
}

.client-card--toca .client-name {
    font-family: Georgia, 'Times New Roman', serif;
    color: #F3E9D6;
    font-weight: 700;
}

.client-card--toca .client-kicker {
    color: #7CB267;
}

.client-card--toca .client-desc {
    color: #C3B393;
}

.client-card--toca .client-tags span {
    padding: 3px 10px;
    border-radius: 4px;
    background: #221A12;
    border: 1px solid #3A2C1B;
    color: #A08C68;
}

.client-card--toca .client-cta {
    padding: 11px 17px;
    border-radius: 6px;
    background: #D99A35;
    color: #15110D;
    font-weight: 700;
}

.client-card--toca .client-cta:hover {
    background: #E8BD63;
}

/* --- E.C Estrategia Criativa: warm editorial. Her rule: zero shadow,
   zero bordered card; separation is a 1px hairline or white space. --- */
.client-card--ec {
    font-family: 'Archivo', system-ui, 'Segoe UI', sans-serif;
    padding: 27px 24px 22px;
    background: #FAF6EF;
    border-radius: 0;
}

.client-card--ec .client-rule {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #F5C518 0 25%, #E86A8E 25% 50%, #2E9E75 50% 75%, #7B5EA7 75% 100%);
}

.client-card--ec .client-logo {
    height: 48px;
    margin-bottom: 14px;
}

.client-card--ec .client-name {
    font-family: 'Oswald', 'Archivo Narrow', sans-serif;
    font-weight: 500;
    font-size: 1.16rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #0D1230;
}

.client-card--ec .client-kicker {
    color: #C0421D;
    letter-spacing: 0.16em;
}

.client-card--ec .client-desc {
    padding-top: 13px;
    border-top: 1px solid rgba(42, 58, 96, 0.14);
    color: #5B688C;
}

.client-card--ec .client-tags span {
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(42, 58, 96, 0.28);
    color: #5B688C;
}

.client-card--ec .client-cta {
    width: 100%;
    padding: 13px 0 0;
    border-top: 1px solid rgba(42, 58, 96, 0.28);
    font-family: 'Oswald', 'Archivo Narrow', sans-serif;
    font-weight: 500;
    color: #0D1230;
}

.client-card--ec .client-cta:hover {
    color: #C0421D;
}

@media (prefers-reduced-motion: reduce) {

    .client-card,
    .client-cta-arrow {
        transition: none;
    }

    .client-card:hover {
        transform: none;
    }
}

/* ---- Responsive ---- */
@media (max-width: 1200px) {
    .feed-ref {
        display: none;
    }
}

@media (max-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .hero-subject {
        align-items: flex-start;
    }

    .reticle-tag {
        display: none;
    }

    .dossier,
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    :root {
        --nav-h: 64px;
    }

    .section {
        padding: 80px 20px;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .nav-links {
        position: fixed;
        top: var(--nav-h);
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        margin: 0;
        padding: 8px 24px 16px;
        background: rgba(11, 12, 14, 0.98);
        border-bottom: 1px solid var(--line);
        transform: translateY(-130%);
        visibility: hidden;
        transition: transform var(--t-med) var(--ease-out), visibility var(--t-med);
    }

    body.nav-open .nav-links {
        transform: translateY(0);
        visibility: visible;
    }

    .nav-links a {
        display: flex;
        height: 52px;
        border-bottom: 1px solid var(--line);
        font-size: 0.9rem;
    }

    .hero {
        padding-bottom: 0;
    }


    .hero-cta {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .feed {
        position: static;
        margin-top: 56px;
    }

    .feed-inner {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .feed-ref {
        display: none;
    }

    .pf-strips div {
        grid-template-columns: 100px minmax(0, 1fr);
    }

    .panel-body {
        padding: 24px;
    }

    .book-showcase {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .book-details {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .panel-body .book-meta {
        justify-content: center;
    }

    .modal-inner {
        padding: 28px 20px;
    }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

    .logo-cursor,
    .cursor,
    .hero-name,
    .scanbar::after,
    .profiler-live::before,
    .live-dot,
    .led,
    .gills-a,
    .gills-b {
        animation: none !important;
    }
}