/* ============================================================
   NIGHT CITY // design system
   A cyberpunk HUD: fixed chrome, chamfered panels, mono data
   labels, and a yellow/cyan/red signal palette.
   ============================================================ */

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

:root {
    /* ── NEO-TOKYO NIGHT (default) ───────────────────
       Never pure black: deep blue-black with city glow rising from below.
       One saturated red carries the identity; teal is structure; amber is
       reserved for things that are alive (pulse, clock, hover). */
    --dark-void: #070a14;
    --dark-panel: #0d1120;
    --dark-panel-2: #141a2c;
    --dark-ink: #e6e1d3;
    --dark-ink-dim: #8a8f9c;
    --dark-yellow: #ff2f3d;          /* primary accent: the red */
    --dark-accent-text: #ff4b57;
    --dark-cyan: #37d9c8;            /* secondary: muted teal */
    --dark-red: #ff6a3d;             /* alert: orange-red, distinct from accent */
    --dark-amber: #ffb03b;           /* glow: sodium amber */
    --dark-edge: rgba(55, 217, 200, 0.22);
    --dark-edge-soft: rgba(230, 225, 211, 0.10);
    --dark-grid: rgba(55, 217, 200, 0.04);
    --dark-scan: rgba(0, 0, 0, 0.35);
    --dark-on-accent: #070a14;
    --dark-warmth: rgba(58, 22, 30, 0.55);   /* city glow at the bottom of the frame */

    /* ── BLUEPRINT (light) ───────────────────────────── */
    --light-void: #efe9dc;
    --light-panel: #f8f4ea;
    --light-panel-2: #ebe5d6;
    --light-ink: #1b1c26;
    --light-ink-dim: #5e6270;
    --light-yellow: #d9202d;
    --light-accent-text: #b3141f;
    --light-cyan: #12807a;
    --light-red: #c2410c;
    --light-amber: #b86a00;
    --light-edge: rgba(27, 28, 38, 0.22);
    --light-edge-soft: rgba(27, 28, 38, 0.12);
    --light-grid: rgba(18, 128, 122, 0.07);
    --light-scan: rgba(0, 0, 0, 0.05);
    --light-on-accent: #fff6ee;
    --light-warmth: rgba(255, 210, 160, 0.35);

    /* Active set — overwritten by scheme/attribute below */
    --void: var(--dark-void);
    --panel: var(--dark-panel);
    --panel-2: var(--dark-panel-2);
    --ink: var(--dark-ink);
    --ink-dim: var(--dark-ink-dim);
    --yellow: var(--dark-yellow);
    --accent-text: var(--dark-accent-text);
    --cyan: var(--dark-cyan);
    --red: var(--dark-red);
    --edge: var(--dark-edge);
    --edge-soft: var(--dark-edge-soft);
    --grid: var(--dark-grid);
    --scan: var(--dark-scan);
    --on-accent: var(--dark-on-accent);
    --amber: var(--dark-amber);
    --warmth: var(--dark-warmth);

    /* Aliases kept for the canvas script */
    --bg-color: var(--void);
    --accent-color: var(--yellow);
    --secondary-color: var(--cyan);
    --alert-color: var(--red);
    --star-color: var(--edge);
    --line-color: var(--edge-soft);
    --glow-color: var(--amber);

    --rail: 64px;
    --topbar: 40px;
    --cut: 16px;
    --cut-sm: 8px;
    --font-display: 'Rajdhani', 'Chakra Petch', system-ui, sans-serif;
    --font-body: 'Chakra Petch', system-ui, sans-serif;
    --font-mono: 'Share Tech Mono', ui-monospace, 'SFMono-Regular', monospace;
}

@media (prefers-color-scheme: light) {
    :root {
        --void: var(--light-void);
        --panel: var(--light-panel);
        --panel-2: var(--light-panel-2);
        --ink: var(--light-ink);
        --ink-dim: var(--light-ink-dim);
        --yellow: var(--light-yellow);
        --accent-text: var(--light-accent-text);
        --cyan: var(--light-cyan);
        --red: var(--light-red);
        --edge: var(--light-edge);
        --edge-soft: var(--light-edge-soft);
        --grid: var(--light-grid);
        --scan: var(--light-scan);
        --on-accent: var(--light-on-accent);
        --amber: var(--light-amber);
        --warmth: var(--light-warmth);
    }
}

[data-theme="dark"] {
    --void: var(--dark-void);
    --panel: var(--dark-panel);
    --panel-2: var(--dark-panel-2);
    --ink: var(--dark-ink);
    --ink-dim: var(--dark-ink-dim);
    --yellow: var(--dark-yellow);
    --accent-text: var(--dark-accent-text);
    --cyan: var(--dark-cyan);
    --red: var(--dark-red);
    --edge: var(--dark-edge);
    --edge-soft: var(--dark-edge-soft);
    --grid: var(--dark-grid);
    --scan: var(--dark-scan);
    --on-accent: var(--dark-on-accent);
    --amber: var(--dark-amber);
    --warmth: var(--dark-warmth);
}

[data-theme="light"] {
    --void: var(--light-void);
    --panel: var(--light-panel);
    --panel-2: var(--light-panel-2);
    --ink: var(--light-ink);
    --ink-dim: var(--light-ink-dim);
    --yellow: var(--light-yellow);
    --accent-text: var(--light-accent-text);
    --cyan: var(--light-cyan);
    --red: var(--light-red);
    --edge: var(--light-edge);
    --edge-soft: var(--light-edge-soft);
    --grid: var(--light-grid);
    --scan: var(--light-scan);
    --on-accent: var(--light-on-accent);
        --amber: var(--light-amber);
        --warmth: var(--light-warmth);
}


/* ============================================================
   BASE
   ============================================================ */

html {
    background: var(--void);
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    background: var(--void);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    overflow-x: hidden;
    padding-top: var(--topbar);
    padding-left: var(--rail);
}

/* Circuit grid + vignette, pinned behind content but above the canvas */
.fx-grid,
.fx-scan {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.fx-grid {
    z-index: 1;
    background-image:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 56px 56px;
}

.fx-scan {
    /* Grading: still film grain (no scanlines, nothing moves over text) */
    z-index: 60;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 160px 160px;
    opacity: 0.05;
    mix-blend-mode: overlay;
}

/* Grading: cool sky above, warm city glow rising from below */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 70% at 50% 115%, var(--warmth) 0%, transparent 60%),
        linear-gradient(180deg, transparent 0%, transparent 55%, color-mix(in srgb, var(--warmth) 40%, transparent) 100%);
}

@keyframes flicker {

    0%,
    97%,
    100% {
        opacity: 0.5;
    }

    98% {
        opacity: 0.28;
    }

    99% {
        opacity: 0.62;
    }
}

#bgCanvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

a {
    color: var(--cyan);
    text-decoration: none;
}

:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--yellow);
    color: var(--on-accent);
    padding: 0.5rem 1rem;
    font-family: var(--font-mono);
}

.skip-link:focus {
    left: var(--rail);
}

/* Mono micro-label used all over the HUD */
.tag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-dim);
}


/* ============================================================
   FIXED CHROME — topbar + left rail
   ============================================================ */

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar);
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem 0 calc(var(--rail) + 1rem);
    background: color-mix(in srgb, var(--void) 88%, transparent);
    border-bottom: 1px solid var(--edge-soft);
    backdrop-filter: blur(6px);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* ID chip: avatar + name, the always-present identity in the HUD */
.topbar__id {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
}

.topbar__id img {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border: 1px solid var(--yellow);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.topbar__id:hover img {
    border-color: var(--cyan);
}

.topbar__brand {
    color: var(--accent-text);
    white-space: nowrap;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.topbar__path {
    color: var(--ink-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar__path a {
    color: var(--ink-dim);
}

.topbar__path a:hover {
    color: var(--cyan);
}

.topbar__spacer {
    flex: 1;
}

.topbar__stat {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ink-dim);
    white-space: nowrap;
}

.topbar__stat b {
    color: var(--cyan);
    font-weight: 400;
}

.pulse {
    width: 7px;
    height: 7px;
    background: var(--red);
    animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }
}

/* Theme switch — an angular breaker */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.theme-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: relative;
    display: block;
    width: 46px;
    height: 20px;
    border: 1px solid var(--yellow);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.slider::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 14px;
    background: var(--yellow);
    transition: transform 0.2s steps(3);
}

.theme-toggle input:checked+.slider::before {
    transform: translateX(22px);
}

.theme-toggle input:focus-visible+.slider {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

/* Left rail */
.rail {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--rail);
    z-index: 55;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0 1rem;
    background: color-mix(in srgb, var(--void) 92%, transparent);
    border-right: 1px solid var(--edge-soft);
}

.rail__mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    background: var(--yellow);
    color: var(--on-accent);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.02em;
    clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

.rail__mark:hover {
    background: var(--cyan);
}

.rail__nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
}

/* the links rotate, not the container — vertical-rl on a flex container
   would swap its main axis and lay the items out sideways */
.rail__nav a {
    writing-mode: vertical-rl;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-dim);
    padding: 0.2rem 0;
    border-right: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.rail__nav a:hover,
.rail__nav a[aria-current="page"] {
    color: var(--accent-text);
    border-right-color: var(--yellow);
}

.rail__foot {
    writing-mode: vertical-rl;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    color: var(--ink-dim);
    opacity: 0.6;
}


/* ============================================================
   LAYOUT
   ============================================================ */

.shell {
    position: relative;
    z-index: 2;
}

.wrap {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 3rem);
}


/* ============================================================
   HERO
   ============================================================ */

.hero {
    position: relative;
    padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(2rem, 5vw, 3.5rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}

.hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.8rem;
}

.hero__eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--edge), transparent);
}

.hero__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 5.5vw, 3.6rem);
    line-height: 0.92;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--ink);
}

/* the home page gets the full-bleed treatment; section landings stay smaller */
.hero--home .hero__name {
    font-size: clamp(2.6rem, 8.5vw, 6rem);
}

.hero__name a {
    color: inherit;
}

.hero__name .line {
    display: block;
}

/* Chromatic-aberration glitch, driven by data-text (set in hud.js) */
.glitch {
    position: relative;
    display: inline-block;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
}

.glitch::before {
    color: var(--red);
    clip-path: inset(0 0 58% 0);
}

.glitch::after {
    color: var(--cyan);
    clip-path: inset(58% 0 0 0);
}

/* Glitch only on hover, or once briefly after boot */
.glitch:hover::before,
.hero__name.is-glitching .glitch::before {
    animation: glitchA 0.9s steps(2) 2;
}

.glitch:hover::after,
.hero__name.is-glitching .glitch::after {
    animation: glitchB 0.8s steps(2) 2;
}

@keyframes glitchA {

    0%,
    92%,
    100% {
        transform: none;
        opacity: 0;
    }

    93% {
        transform: translate(-4px, -2px);
        opacity: .85;
    }

    95% {
        transform: translate(4px, 1px);
        opacity: .85;
    }

    97% {
        transform: translate(-2px, 0);
        opacity: .5;
    }
}

@keyframes glitchB {

    0%,
    90%,
    100% {
        transform: none;
        opacity: 0;
    }

    91% {
        transform: translate(4px, 2px);
        opacity: .85;
    }

    94% {
        transform: translate(-4px, -1px);
        opacity: .85;
    }

    96% {
        transform: translate(2px, 0);
        opacity: .5;
    }
}

.hero__roles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    margin-top: 1.1rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cyan);
}

.hero__roles li {
    list-style: none;
    position: relative;
    padding-left: 0.9rem;
}

.hero__roles li::before {
    content: "▚";
    position: absolute;
    left: 0;
    color: var(--accent-text);
    font-size: 0.7em;
}

.hero__stack {
    margin-top: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: var(--ink-dim);
}

/* Portrait: angular frame with corner brackets and a scan sweep */
.portrait {
    position: relative;
    width: clamp(150px, 22vw, 230px);
    aspect-ratio: 1;
    flex-shrink: 0;
}

.portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.1) contrast(1.05);
    clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
}

.portrait::before,
.portrait::after {
    content: "";
    position: absolute;
    width: 26px;
    height: 26px;
    border: 2px solid var(--yellow);
    pointer-events: none;
}

.portrait::before {
    top: -6px;
    right: -6px;
    border-left: 0;
    border-bottom: 0;
}

.portrait::after {
    bottom: -6px;
    left: -6px;
    border-right: 0;
    border-top: 0;
}

.portrait__sweep {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
}

.portrait__sweep::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 28%;
    background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--cyan) 22%, transparent), transparent);
    animation: sweep 4.5s linear infinite;
}

@keyframes sweep {
    0% {
        top: -30%;
    }

    100% {
        top: 100%;
    }
}


/* ============================================================
   ACTION BAR — angular buttons with a hover sweep
   ============================================================ */

.actionbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

/* inside a panel the surrounding padding already provides the spacing */
.panel__body .actionbar {
    padding-bottom: 0;
}

.act {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1.1rem;
    background: var(--panel-2);
    border: 1px solid var(--edge);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    clip-path: polygon(var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm));
    transition: color 0.15s, border-color 0.15s;
}

.act::before {
    content: "▶";
    font-size: 0.6em;
    color: var(--accent-text);
    transition: color 0.15s;
}

/* the sweep block that fills on hover */
.act::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--yellow);
    transform: translateX(-101%);
    transition: transform 0.22s cubic-bezier(.2, .8, .2, 1);
    z-index: -1;
}

.act:hover,
.act:focus-visible,
.act.glow {
    color: var(--on-accent);
    border-color: var(--yellow);
}

.act:hover::before,
.act:focus-visible::before,
.act.glow::before {
    color: var(--on-accent);
}

.act:hover::after,
.act:focus-visible::after,
.act.glow::after {
    transform: translateX(0);
}

.act--primary {
    border-color: var(--yellow);
    color: var(--accent-text);
}


/* ============================================================
   PANELS
   ============================================================ */

.panel {
    position: relative;
    background: var(--panel);
    margin-bottom: clamp(1.2rem, 3vw, 2rem);
    clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

/* 1px hairline that follows the chamfer (mask-composite border trick) */
.panel::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    background: var(--edge);
    clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

.panel__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1.4rem;
    background: var(--panel-2);
    border-bottom: 1px solid var(--edge-soft);
}

.panel__idx {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: var(--on-accent);
    background: var(--yellow);
    padding: 0.05rem 0.45rem;
    flex-shrink: 0;
}

.panel__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink);
}

.panel__rule {
    flex: 1;
    min-width: 1rem;
    height: 8px;
    background-image: repeating-linear-gradient(90deg, var(--edge) 0 4px, transparent 4px 8px);
    opacity: 0.8;
}

.panel__dot {
    width: 8px;
    height: 8px;
    background: var(--cyan);
    flex-shrink: 0;
}

.panel__body {
    padding: 1.4rem;
}

.panel__body> :is(p, ul, ol, table, pre, blockquote, h3, h4)+ :is(p, ul, ol, table, pre, blockquote) {
    margin-top: 0.9rem;
}

/* Page-level title block (used by the ISTE sub-pages) */
.pagehead {
    padding: clamp(1.5rem, 4vw, 2.5rem) 0 1rem;
    border-bottom: 1px solid var(--edge-soft);
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.pagehead__kicker {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cyan);
}

.pagehead__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.6rem, 4.5vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin-top: 0.3rem;
}

.pagehead__sub {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    color: var(--ink-dim);
    margin-top: 0.4rem;
}


/* ============================================================
   SHARDS — the big home-page navigation tiles
   ============================================================ */

.shards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    padding-bottom: clamp(2rem, 6vw, 4rem);
}

.shard {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 210px;
    padding: 1.4rem;
    background: var(--panel);
    color: var(--ink);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
    border-left: 3px solid var(--yellow);
    transition: transform 0.2s cubic-bezier(.2, .8, .2, 1);
}

.shard::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--yellow) 92%, transparent), color-mix(in srgb, var(--yellow) 55%, transparent));
    transform: translateY(101%);
    transition: transform 0.28s cubic-bezier(.2, .8, .2, 1);
    z-index: 0;
}

.shard>* {
    position: relative;
    z-index: 1;
}

.shard:hover,
.shard:focus-visible {
    transform: translateY(-4px);
}

.shard:hover::after,
.shard:focus-visible::after {
    transform: translateY(0);
}

.shard:hover,
.shard:focus-visible {
    color: var(--on-accent);
}

.shard:hover .shard__idx,
.shard:focus-visible .shard__idx,
.shard:hover .shard__go,
.shard:focus-visible .shard__go {
    color: var(--on-accent);
}

.shard__idx {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    color: var(--cyan);
}

.shard__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    line-height: 1.05;
    text-transform: uppercase;
    margin-top: auto;
}

.shard__go {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.8rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-dim);
}


/* ============================================================
   TIMELINE — experience entries
   ============================================================ */

.timeline {
    position: relative;
    padding-left: 1.6rem;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: linear-gradient(to bottom, var(--yellow), var(--edge), transparent);
}

.job {
    position: relative;
    padding-bottom: 1.8rem;
}

.job:last-child {
    padding-bottom: 0;
}

.job::before {
    content: "";
    position: absolute;
    left: -1.6rem;
    top: 0.55rem;
    width: 9px;
    height: 9px;
    background: var(--yellow);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.job__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.3;
    letter-spacing: 0.03em;
    text-transform: none;
    color: var(--accent-text);
}

.job__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.3rem 1rem;
    margin-bottom: 0.5rem;
}

.job__org {
    font-size: 0.95rem;
    color: var(--ink);
}

.job__date {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--on-accent);
    background: var(--cyan);
    padding: 0 0.5rem;
    white-space: nowrap;
}

.job__points {
    font-size: 0.95rem;
}


/* ============================================================
   CHIP GRID — skills
   ============================================================ */

.chipgrid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chip {
    padding: 0.25rem 0.75rem;
    background: var(--panel-2);
    border: 1px solid var(--edge-soft);
    border-left: 2px solid var(--cyan);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.chip:hover,
.chip.glow {
    background: var(--yellow);
    border-color: var(--yellow);
    color: var(--on-accent);
}

/* group separator inherited from the source markup */
.chipgrid__break {
    flex-basis: 100%;
    height: 0;
}


/* ============================================================
   POST LIST
   ============================================================ */

.postlist {
    display: grid;
    gap: 0.6rem;
}

.postlist a {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 1rem;
    background: var(--panel-2);
    border-left: 2px solid var(--edge);
    color: var(--ink);
    font-size: 1rem;
    transition: border-color 0.15s, color 0.15s, transform 0.15s;
}

.postlist a::before {
    content: "▸";
    color: var(--yellow);
}

.postlist a:hover {
    border-left-color: var(--yellow);
    color: var(--accent-text);
    transform: translateX(3px);
}


/* ============================================================
   TYPOGRAPHY INSIDE PANELS
   ============================================================ */

.panel__body h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-top: 1.2rem;
}

.panel__body h4 {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-top: 1rem;
}

.panel__body> :is(h3, h4):first-child {
    margin-top: 0;
}

ul {
    list-style: none;
    padding-left: 1.3rem;
}

ul>li {
    position: relative;
}

ul>li::before {
    content: "▪";
    position: absolute;
    left: -1.1rem;
    color: var(--cyan);
}

ol {
    padding-left: 1.5rem;
}

ol>li::marker {
    font-family: var(--font-mono);
    color: var(--accent-text);
}

li>ul,
li>ol {
    margin-top: 0.2rem;
}

.glow-link {
    color: var(--cyan);
    border-bottom: 1px dotted var(--edge);
    transition: color 0.15s, border-color 0.15s, text-shadow 0.15s;
}

.glow-link:hover {
    color: var(--accent-text);
    border-bottom-color: var(--yellow);
    text-shadow: 0 0 10px color-mix(in srgb, var(--yellow) 60%, transparent);
}

blockquote {
    padding: 0.7rem 1.2rem;
    border-left: 3px solid var(--red);
    background: color-mix(in srgb, var(--red) 8%, transparent);
    font-style: italic;
}

code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    color: var(--accent-text);
    background: color-mix(in srgb, var(--ink) 10%, transparent);
    padding: 0.05rem 0.35rem;
}

pre {
    font-family: var(--font-mono);
    background: var(--panel-2);
    border-left: 2px solid var(--cyan);
    padding: 1rem;
    overflow-x: auto;
}

pre code {
    background: none;
    padding: 0;
    color: var(--ink);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

th,
td {
    border: 1px solid var(--edge-soft);
    padding: 0.45rem 0.7rem;
    text-align: left;
}

th {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--yellow);
    color: var(--on-accent);
}

tbody tr:nth-child(even) td,
tr:nth-child(even) td {
    background: color-mix(in srgb, var(--ink) 4%, transparent);
}

.panel__body img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--edge);
}

.table-scroll {
    overflow-x: auto;
}


/* ============================================================
   FOOTER
   ============================================================ */

.footer {
    position: relative;
    z-index: 2;
    margin-top: clamp(2rem, 6vw, 4rem);
    border-top: 1px solid var(--edge-soft);
    background: color-mix(in srgb, var(--void) 90%, transparent);
}

.footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding: 1.2rem clamp(1rem, 4vw, 3rem);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-dim);
}

.footer__mark {
    color: var(--accent-text);
}


/* ============================================================
   BOOT OVERLAY
   ============================================================ */

.boot {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: var(--void);
    display: grid;
    place-content: center;
    gap: 0.35rem;
    padding: 2rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cyan);
    transition: opacity 0.35s ease, visibility 0.35s;
}

.boot[hidden] {
    display: none;
}

.boot.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.boot__line {
    opacity: 0;
}

.boot__line.is-on {
    opacity: 1;
}

.boot__line b {
    color: var(--accent-text);
    font-weight: 400;
}


/* ============================================================
   SCROLL REVEAL
   ============================================================ */

/* Scoped to .js so the content is never hidden when scripts don't run */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(.2, .8, .2, 1);
}

.js [data-reveal].is-in {
    opacity: 1;
    transform: none;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
    :root {
        --rail: 0px;
    }

    body {
        padding-left: 0;
        padding-bottom: 54px;
    }

    .topbar {
        padding-left: 1rem;
    }

    .topbar__path {
        display: none;
    }

    /* rail becomes a bottom nav bar */
    .rail {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        height: 54px;
        flex-direction: row;
        justify-content: space-around;
        padding: 0 0.5rem;
        border-right: 0;
        border-top: 1px solid var(--edge-soft);
        /* opaque: content scrolls underneath this bar */
        background: var(--void);
    }

    .panel__rule {
        display: none;
    }

    .rail__nav {
        flex-direction: row;
        gap: 1rem;
    }

    .rail__nav a {
        writing-mode: horizontal-tb;
        border-right: 0;
        border-bottom: 2px solid transparent;
        font-size: 0.62rem;
        letter-spacing: 0.12em;
    }

    .rail__nav a:hover,
    .rail__nav a[aria-current="page"] {
        border-bottom-color: var(--yellow);
    }

    .rail__foot {
        display: none;
    }

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

    .hero {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
    }

    .hero .portrait {
        order: -1;
    }

    table {
        display: block;
        overflow-x: auto;
    }
}

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

    *,
    *::before,
    *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .js [data-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* Three.js background: soften the flat grid overlay so the 3D floor reads */
body.has-3d .fx-grid {
    opacity: 0.35;
}

/* Sticky footer: the shell fills the viewport below the top bar and the
   footer sits at the bottom even on short pages */
.shell {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--topbar));
}

.shell > main {
    flex: 1 0 auto;
}

.shell > .footer {
    margin-top: auto;
    padding-top: clamp(2rem, 6vw, 4rem);
}


/* Professional polish: calmer background behind content, factual hero note */
#bgCanvas {
    opacity: 0.65;
}

.hero__note {
    margin-top: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--ink-dim);
}

/* Job titles in sentence case (outranks the generic panel h3 rule) */
.panel__body .job__title {
    text-transform: none;
}


/* Bloom: only on light sources */
.pulse {
    box-shadow: 0 0 8px var(--amber), 0 0 18px color-mix(in srgb, var(--amber) 50%, transparent);
}

.topbar__stat b {
    color: var(--amber);
    text-shadow: 0 0 10px color-mix(in srgb, var(--amber) 55%, transparent);
}

.hero__name:hover .line {
    text-shadow: 0 0 22px color-mix(in srgb, var(--amber) 45%, transparent);
}

.act--primary:hover,
.rail__nav a:hover {
    text-shadow: 0 0 10px color-mix(in srgb, var(--amber) 60%, transparent);
}


/* Home page: portfolio content scrolls below the cards */
#dev {
    scroll-margin-top: calc(var(--topbar) + 1rem);
    margin-top: clamp(2rem, 6vw, 4rem);
}