/* muchane.com — high-performance neo-brutalism.
   Tokens are authoritative here (see DECISIONS.md). Dark is default. */

:root {
    /* MOTION TUNABLES — retune live in devtools; no rebuild required. */
    --orbit-period: 75s;
    --teaser-fade: 160ms;
    --drawer-slide: 400ms;
    --star-highlight: 200ms;
    --contact-pulse: 2400ms;
    --copy-note: 900ms; /* "Address copied" note timing — split from --contact-pulse when the pulse hold grew to 2400ms */
    --email-unfurl: 320ms;

    /* LAYOUT TUNABLES — gate 5 (no-scroll) retired 2026-08-12; approved design
       frame is 1440×1360 and L0 is allowed to scroll. Scale floor 0.9 (below
       that, 0.72rem satellite pill text drops under ~10px legibility). */
    --constellation-scale: 1;
    --constellation-max-width: min(1600px, 92vw);

    --bg-color: #0a0a0a;
    --text-color: #ededed;
    --accent-color: #B07FFF;
    --border-color: #333333;
    --card-bg: #111111;
    --hover-bg: #1a1a1a;
    --header-height: 80px;
    --constellation-line: #262626; /* polyline color + drawer child rule divider */
    --meta-color: #a3a3a3;
    --quote-border: var(--accent-color);

    --drawer-width: 236px;
    --telemetry-height: 28px;
    --faint-color: #525252;
    --drawer-child-color: #7a7a7a;
    --telemetry-ok: #4ADE80;

    --icon-email-fg: #EA4335;
    --icon-email-border: #EA433566;
    --icon-email-bg: #EA43351A;
    --icon-github-fg: #ffffff;
    --icon-github-border: #ffffff4d;
    --icon-github-bg: #ffffff14;
    --icon-linkedin-fg: #3B93E8;
    --icon-linkedin-border: #0A66C280;
    --icon-linkedin-bg: #0A66C21F;
    --icon-resume-fg: #B07FFF;
    --icon-resume-border: #B07FFF66;
    --icon-resume-bg: #B07FFF1A;
    --satellite-link-border: #B07FFF66;
    --istar-dot: #e8eefa; /* matches starfield's dark-theme star color */
    --istar-dot-glow: #e8eefa66; /* lifted 30%->40% alpha, resting visibility pass */
    --istar-label: #6b6b7a; /* brightened from #2c2c31 via #3a3a42, #52525f (see DECISIONS.md for the iteration); contrast 1.43->3.78 vs bg */
    --istar-hover-glow: #B07FFF80;
    --istar-active-glow: #B07FFF8c;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg-color);
    color: var(--text-color);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

code, .mono {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

.is-hidden {
    display: none !important;
}

a {
    color: inherit;
}

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

main:focus {
    outline: none;
}

/* STARFIELD */
#starfield {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

main {
    position: relative;
    z-index: 1;
    transition: transform var(--drawer-slide) cubic-bezier(0.22, 1, 0.36, 1);
}

/* HEADER */
.header {
    position: sticky;
    top: 0;
    z-index: 20;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
    transition: transform var(--drawer-slide) cubic-bezier(0.22, 1, 0.36, 1);
}

.header__left {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.header__logo {
    display: flex;
    align-items: center;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: -0.02em;
}

body[data-depth="0"] .header__logo {
    display: none;
}

.menu-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    background: transparent;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    cursor: pointer;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.menu-trigger:hover,
.menu-trigger[aria-expanded="true"] {
    background: var(--hover-bg);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.header__contact {
    position: relative;
    display: flex;
    gap: 10px;
    border-radius: 6px;
}

.header__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid;
}

.header__icon--email {
    color: var(--icon-email-fg);
    border-color: var(--icon-email-border);
    background: var(--icon-email-bg);
}

.header__icon--github {
    color: var(--icon-github-fg);
    border-color: var(--icon-github-border);
    background: var(--icon-github-bg);
}

.header__icon--linkedin {
    color: var(--icon-linkedin-fg);
    border-color: var(--icon-linkedin-border);
    background: var(--icon-linkedin-bg);
}

.header__icon--resume {
    color: var(--icon-resume-fg);
    border-color: var(--icon-resume-border);
    background: var(--icon-resume-bg);
}

/* CONTACT WAYFINDER — the drawer's Contact button closes the drawer, moves
   focus to header-email, and pulses this group so the end state is never
   "nothing visible happened." */
@keyframes contact-pulse {
    0%   { box-shadow: 0 0 0 0 transparent; }
    8%   { box-shadow: 0 0 0 3px var(--accent-color); }
    89%  { box-shadow: 0 0 0 3px var(--accent-color); }
    100% { box-shadow: 0 0 0 3px transparent; }
}

.header__contact.is-pulsing {
    animation: contact-pulse var(--contact-pulse) ease-out;
}

.header__contact.is-pulse-static {
    box-shadow: 0 0 0 2px var(--accent-color);
}

/* "Address copied" confirmation for the email icon's clipboard fallback
   (app.js). Fade timing derives from the --copy-note tunable
   (900/4.5 = 200ms); visible duration is JS-timed at 2x --copy-note. */
.email-copied {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    padding: 4px 10px;
    background: var(--card-bg);
    border: 1px solid var(--accent-color);
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--accent-color);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity calc(var(--copy-note) / 4.5), visibility 0s linear calc(var(--copy-note) / 4.5);
}

.email-copied.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity calc(var(--copy-note) / 4.5), visibility 0s;
}

/* EMAIL UNFURL — persistent, selectable address revealed by clicking the mail
   icon (mailto dead-end fallback; handler detection is impossible, so this
   fires on every click and is simply hidden behind a real mail client). */
.email-reveal {
    display: flex;
    align-items: center;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.8rem;
    color: var(--text-color);
    white-space: nowrap;
    user-select: text;
    visibility: hidden;
    opacity: 0;
    clip-path: inset(0 0 0 100%);
    transition: clip-path var(--email-unfurl) ease-out, opacity var(--email-unfurl) ease-out, visibility 0s linear var(--email-unfurl);
}

.email-reveal.is-open {
    visibility: visible;
    opacity: 1;
    clip-path: inset(0);
    transition: clip-path var(--email-unfurl) ease-out, opacity var(--email-unfurl) ease-out, visibility 0s;
}

/* DRAWER */
.drawer {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--drawer-width);
    z-index: 25;
    display: flex;
    flex-direction: column;
    padding: 26px 0;
    background: var(--card-bg);
    border-right: 1px solid var(--border-color);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--drawer-slide) cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear var(--drawer-slide);
}

body[data-depth="0"] .drawer {
    bottom: var(--telemetry-height);
}

body.drawer-open .drawer {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--drawer-slide) cubic-bezier(0.22, 1, 0.36, 1);
}

body.drawer-open .header,
body.drawer-open main {
    transform: translateX(var(--drawer-width));
}

html,
body {
    overflow-x: clip;
}

.drawer__label {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--faint-color);
    padding: 0 24px 20px;
}

.drawer > a,
.drawer__group,
.drawer__contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 11px 24px;
    background: transparent;
    border: 0;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 12.5px;
    letter-spacing: 0.02em;
    color: var(--text-color);
}

.drawer > a[aria-current="page"] {
    color: var(--accent-color);
    background: var(--hover-bg);
}

.drawer__group svg {
    color: var(--faint-color);
    transition: transform var(--drawer-slide);
}

.drawer__group[aria-expanded="true"] svg {
    transform: rotate(90deg);
}

.drawer__children {
    display: flex;
    flex-direction: column;
    margin: 2px 0 6px 24px;
    border-left: 1px solid var(--constellation-line);
}

.drawer__children[hidden] {
    display: none;
}

.drawer__children a {
    display: block;
    padding: 9px 16px;
    text-decoration: none;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 11.5px;
    letter-spacing: 0.02em;
    color: var(--drawer-child-color);
}

.drawer > a:hover,
.drawer__group:hover,
.drawer__children a:hover,
.drawer__contact:hover {
    color: var(--accent-color);
}

/* TELEMETRY STRIP */
.telemetry {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--telemetry-height);
    z-index: 26;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 40px;
    background: var(--bg-color);
    border-top: 1px solid var(--hover-bg);
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--faint-color);
}

body[data-depth="0"] .telemetry {
    display: flex;
}

.telemetry__zone {
    display: flex;
    align-items: center;
    gap: 8px;
}

.telemetry__diamond {
    width: 6px;
    height: 6px;
    background: var(--accent-color);
    transform: rotate(45deg);
}

.telemetry__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--telemetry-ok);
}

/* MAIN / PAGE */
main {
    display: block;
    min-height: calc(100vh - var(--header-height));
}

.page {
    max-width: 720px;
    margin: 0 auto;
    padding: 60px 40px 100px;
}

.page__role {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text-color);
    margin: 0 0 6px;
}

.page h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.page h2 {
    font-size: 1.4rem;
    margin: 48px 0 16px;
    padding-bottom: 8px;
    color: var(--accent-color);
    border-bottom: 1px solid var(--accent-color);
}

.page h3 {
    font-size: 1.05rem;
    margin: 32px 0 10px;
}

.page p {
    margin: 16px 0;
}

.page ul {
    margin: 16px 0 16px 20px;
}

.page li {
    margin: 10px 0;
}

.page__meta {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.8rem;
    color: var(--meta-color);
    margin-bottom: 32px;
}

.up-link {
    display: inline-block;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.8rem;
    text-decoration: none;
    color: var(--accent-color);
    margin-bottom: 40px;
    border: 1px solid var(--border-color);
    padding: 8px 14px;
}

.up-link:hover {
    border-color: var(--accent-color);
    background: var(--hover-bg);
}

.company-line {
    font-size: 1.05rem;
    color: var(--meta-color);
}

/* HERO */
.hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 400px;
    max-width: 900px;
    margin: 0 auto;
    padding: 48px 40px;
}

.hero h1 {
    font-size: clamp(2.5rem, 7.5vw, 5rem);
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.hero__copy {
    margin-top: 24px;
    max-width: 62ch;
    font-size: 1.1rem;
}

.hero .page__meta {
    font-size: 0.9rem;
}

/* In-copy contact trigger (L0 hero) — a button, not a link (no page behind it);
   activation is shared with the drawer's Contact wayfinder (app.js). */
.hero__contact-trigger {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    vertical-align: baseline;
    line-height: inherit;
    color: var(--accent-color);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.hero__contact-trigger:hover {
    background: var(--hover-bg);
}

.hero__nobr {
    white-space: nowrap;
}

/* CONSTELLATION */
.constellation-section {
    padding: 56px 40px 88px;
}

.constellation {
    position: relative;
    aspect-ratio: 12 / 7;
    max-width: var(--constellation-max-width);
    margin: 0 auto;
    /* Transformed (scale()) descendant of .constellation-wrap paints as its
       own stacking context, above the sibling .istars layer in DOM order —
       its transparent border-box was intercepting hover/click for any
       indexed star whose --x/--y fell inside this rect (WFU-2019, IAPLY-26,
       MC-25). Remove it from hit-testing and restore hit-testing only on
       the interactive .node children; zero paint-order/visual change. */
    pointer-events: none;
}

.constellation .node {
    pointer-events: auto;
}

/* Constellation scale wrapper: reserves the SCALED flow height so the page
   never gains dead space when --constellation-scale < 1. `.constellation`
   itself always keeps its native aspect-ratio:12/7 layout box (board-1i
   geometry untouched) and is shrunk purely visually via transform.
   `height` is computed directly from `--constellation-max-width` (not a
   self-referential `aspect-ratio` — tried that first; it's a no-op here
   because `.constellation` is a normal in-flow child whose own native
   772px box forces the wrap's auto height regardless of the wrap's own
   aspect-ratio, per the CSS block-sizing algorithm) rather than measuring
   `.constellation`'s actual rendered width, so it's exact wherever
   `--constellation-max-width` is the binding constraint on `.constellation`
   (viewport ≥ ~1000px, true at all three verified breakpoints:
   1280/1440/1920) and only approximate below that, same accepted-residual
   class as gate 5's prior 1280×800 overflow. Scoped by DOM ancestry so
   /workday's `.constellation--sub`, which shares the base `.constellation`
   rule, is untouched. */
.constellation-wrap {
    max-width: var(--constellation-max-width);
    margin: 0 auto;
    height: calc(var(--constellation-max-width) * 7 / 12 * var(--constellation-scale));
}

.constellation-wrap .constellation {
    transform: scale(var(--constellation-scale));
    transform-origin: top center;
}

.constellation__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.constellation__svg polyline {
    stroke: var(--accent-color);
    stroke-opacity: 0.55;
    stroke-width: 1;
    fill: none;
    vector-effect: non-scaling-stroke;
}

.node {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
    display: block;
    max-width: 360px;
}

.node__card,
a.node {
    display: block;
    text-decoration: none;
    color: inherit;
}

.node__inner {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 22px 28px;
    transition: background 0.2s ease-out, border-color 0.2s ease-out, transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.node__inner--center {
    text-align: center;
}

.node__inner--center .node__meta {
    white-space: nowrap;
}

.node__card:hover .node__inner,
.node__card:focus-visible .node__inner,
a.node:hover .node__inner,
a.node:focus-visible .node__inner {
    background: var(--hover-bg);
    border-color: var(--accent-color);
}

.node__title {
    font-size: 1.3rem;
    font-weight: 650;
    line-height: 1.2;
}

.node__meta {
    display: block;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.72rem;
    color: var(--meta-color);
    margin-top: 6px;
}

/* TIMELINE SPINE + NARROW HERO (narrow-only; see the max-width:600px block) */
.timeline-spine,
.spine-era,
.node__foot,
.hero__copy--narrow {
    display: none;
}

.node__satellite {
    position: absolute;
    left: 50%;
    top: 50%;
    display: inline-block;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none;
    color: var(--meta-color);
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    cursor: default;
    animation: none var(--orbit-period) linear infinite;
    animation-delay: calc(-1 * var(--s) * var(--orbit-period));
}

.node--tsdp .node__satellite { animation-name: orbit-tsdp; }
.node--wd .node__satellite { animation-name: orbit-wd; }
.node--mc .node__satellite { animation-name: orbit-mc; }
.node--edu .node__satellite { animation-name: orbit-edu; }

/* Orbit rectangles per board-1i extents — TSDP ±156x±72 (a second TSDP
   satellite would take s: 0.5), WD ±161x±72, MC ±203x±72, EDU ±139x±72.
   TSDP's A is card half-width + a real 4px clearance + pill half-width
   (a bare floor of card-half+pill-half gives a sub-pixel margin that
   rounds to a self-overlap with the card at side phases — matches WD's
   own real shipped clearance of ~3.77px). Label "Wrangling" (not a
   longer heading-derived phrase) is required to keep this real
   clearance while also staying inside the 1280 viewport at every
   orbit phase — see DECISIONS.md for the full measurement trail.
   Waypoint offsets are cumulative segment length / perimeter, so
   linear timing = constant perimeter speed. 0% = top center,
   clockwise. */
@keyframes orbit-tsdp {
    0%     { transform: translate(-50%, -50%) translate(0, -72px); }
    17.11% { transform: translate(-50%, -50%) translate(156px, -72px); }
    32.89% { transform: translate(-50%, -50%) translate(156px, 72px); }
    67.11% { transform: translate(-50%, -50%) translate(-156px, 72px); }
    82.89% { transform: translate(-50%, -50%) translate(-156px, -72px); }
    100%   { transform: translate(-50%, -50%) translate(0, -72px); }
}

@keyframes orbit-wd {
    0%     { transform: translate(-50%, -50%) translate(0, -72px); }
    17.27% { transform: translate(-50%, -50%) translate(161px, -72px); }
    32.73% { transform: translate(-50%, -50%) translate(161px, 72px); }
    67.27% { transform: translate(-50%, -50%) translate(-161px, 72px); }
    82.73% { transform: translate(-50%, -50%) translate(-161px, -72px); }
    100%   { transform: translate(-50%, -50%) translate(0, -72px); }
}

@keyframes orbit-mc {
    0%     { transform: translate(-50%, -50%) translate(0, -72px); }
    18.45% { transform: translate(-50%, -50%) translate(203px, -72px); }
    31.55% { transform: translate(-50%, -50%) translate(203px, 72px); }
    68.45% { transform: translate(-50%, -50%) translate(-203px, 72px); }
    81.55% { transform: translate(-50%, -50%) translate(-203px, -72px); }
    100%   { transform: translate(-50%, -50%) translate(0, -72px); }
}

@keyframes orbit-edu {
    0%     { transform: translate(-50%, -50%) translate(0, -72px); }
    16.47% { transform: translate(-50%, -50%) translate(139px, -72px); }
    33.53% { transform: translate(-50%, -50%) translate(139px, 72px); }
    66.47% { transform: translate(-50%, -50%) translate(-139px, 72px); }
    83.53% { transform: translate(-50%, -50%) translate(-139px, -72px); }
    100%   { transform: translate(-50%, -50%) translate(0, -72px); }
}

.node__satellite--link {
    cursor: pointer;
    border-color: var(--satellite-link-border);
}

.node__satellite--link::after {
    content: '\203A';
    margin-left: 6px;
    color: var(--accent-color);
}

/* Informational (non-navigable) satellite: dotted accent border, no chevron —
   "content here, hover it" without promising a destination. Converting one to
   navigable later = swap --info for --link on an <a href> with data-zoom="chain". */
.node__satellite--info {
    border-style: dotted;
    border-color: var(--satellite-link-border);
}

.node__satellite:hover,
.node__satellite:focus-visible {
    border-color: var(--accent-color);
    color: var(--text-color);
    animation-play-state: paused;
}

/* SATELLITE HOVER TEASERS */
.satellite__teaser {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) scale(calc(1 / var(--constellation-scale)));
    transform-origin: 50% 100%;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 10px 14px;
    width: max-content;
    max-width: 310px;
    white-space: normal;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.72rem;
    line-height: 1.4;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--teaser-fade), visibility 0s linear var(--teaser-fade);
    pointer-events: none;
}

.node__satellite:hover .satellite__teaser,
.node__satellite:focus-visible .satellite__teaser {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--teaser-fade), visibility 0s linear 0s;
}

.node__satellite.teaser-below .satellite__teaser {
    top: calc(100% + 12px);
    bottom: auto;
    transform-origin: 50% 0%;
}

.satellite__teaser-title {
    color: var(--text-color);
    text-wrap: balance;
}

.satellite__teaser-meta {
    color: var(--meta-color);
    text-wrap: balance;
}

.satellite__teaser-accent {
    color: var(--accent-color);
}

.teaser__nobr {
    white-space: nowrap;
}

/* INDEXED BACKGROUND STARS — ~6 tiny mono designations, always visible but
   heavily muted so they read as grain; click one to highlight its related
   constellation node. First child of main#stage so they zoom away with the
   rest of L0's content. */
.istars {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.istar {
    pointer-events: auto;
    position: absolute;
    left: var(--x);
    top: var(--y);
    display: flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: 0;
    padding: 2px;
    cursor: pointer;
}

.istar__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--istar-dot);
    box-shadow: 0 0 4px 1px var(--istar-dot-glow);
    transition: width var(--star-highlight), height var(--star-highlight), background var(--star-highlight), box-shadow var(--star-highlight);
}

.istar__label {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--istar-label);
    transition: color var(--star-highlight);
}

.istar:hover .istar__dot,
.istar:focus-visible .istar__dot {
    width: 4px;
    height: 4px;
    background: var(--accent-color);
    box-shadow: 0 0 8px 2px var(--istar-hover-glow);
}

.istar:hover .istar__label,
.istar:focus-visible .istar__label {
    color: var(--accent-color);
}

.istar.is-active .istar__dot {
    width: 5px;
    height: 5px;
    background: var(--text-color);
    box-shadow: 0 0 10px 3px var(--istar-active-glow);
}

.istar.is-active .istar__label {
    color: var(--accent-color);
}

.istar-link {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    visibility: hidden;
}

.istar-link.is-visible {
    visibility: visible;
}

.istar-link line {
    stroke: var(--accent-color);
    stroke-opacity: 0.7;
    stroke-width: 1;
    stroke-dasharray: 3 5;
}

.node--flagged .node__inner {
    background: var(--hover-bg);
    border-color: var(--accent-color);
    box-shadow: none;
}

.node--flagged .node__meta {
    color: var(--accent-color);
}

/* SUB-CONSTELLATION (e.g. /workday role stars) — same grammar as L0's
   .constellation, scaled down to read as a cluster within a page rather
   than a second homepage. */
.constellation--sub {
    aspect-ratio: 16 / 10;
    max-width: 100%;
    margin: 8px 0 40px;
}

.constellation--sub .node {
    width: min(197px, 100%);
}

.constellation--sub .node__inner {
    padding: 12px 16px;
}

.constellation--sub .node__title {
    font-size: 0.95rem;
}

/* CHILD CARDS */
.children {
    display: grid;
    gap: 16px;
    margin: 32px 0;
}

.children--single {
    grid-template-columns: minmax(min-content, 360px);
    justify-content: center;
}

.children--single .child-card {
    text-align: center;
}

.children--pair {
    grid-template-columns: repeat(2, minmax(min-content, 360px));
    justify-content: center;
}

.child-card {
    display: block;
    text-decoration: none;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 20px 24px;
}

.child-card:hover {
    background: var(--hover-bg);
    border-color: var(--accent-color);
}

.child-card .node__title {
    font-size: 1rem;
}

/* CHANGELOG — Muchane Cloud release entries (single column; page column is
   720px and entries are text-heavy, so a multi-column grid would cramp
   line length). Cards reuse .node__inner-family tokens, no new colors. */
.changelog {
    display: grid;
    gap: 16px;
    margin: 32px 0;
}

.entry {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}

/* Neutralize the generic `details` rule (below) inside entries — it would
   double-border and shift the card, since .entry already owns the border. */
.entry .entry__details {
    border: 0;
    padding: 0;
    margin: 0;
}

.entry .entry__details[open] summary {
    margin-bottom: 0;
}

.entry__card {
    display: block;
    padding: 20px 24px;
}

summary.entry__card {
    cursor: pointer;
    list-style: none;
}

summary.entry__card::-webkit-details-marker {
    display: none;
}

/* Hover/focus affordance on interactive cards only — the renderer stamps
   entry--interactive on full entries and cross-list link cards, never on
   compact (no-drill-in) cards. No transitions, matching .child-card;
   nothing to exempt under reduced motion. */
.entry--interactive:hover,
.entry--interactive:focus-within {
    border-color: var(--accent-color);
}

.entry--interactive .entry__card:hover,
.entry--interactive summary.entry__card:focus-visible,
a.entry--link:hover,
a.entry--link:focus-visible {
    background: var(--hover-bg);
}

a.entry--link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.entry__more {
    color: var(--accent-color);
}

.entry__head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: baseline;
}

.entry__title {
    font-weight: 650;
    font-size: 1.05rem;
    line-height: 1.25;
}

.entry__date {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.72rem;
    color: var(--meta-color);
    white-space: nowrap;
}

.entry__summary {
    display: block;
    margin-top: 8px;
    font-weight: 400;
    color: var(--meta-color);
    text-wrap: pretty;
}

.entry__foot {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    align-items: center;
    flex-wrap: wrap;
}

.entry__tag {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--meta-color);
    border: 1px solid var(--border-color);
    padding: 2px 8px;
}

.entry__metric {
    margin-left: auto;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.72rem;
    color: var(--accent-color);
    border: 1px solid var(--satellite-link-border);
    padding: 2px 8px;
    white-space: nowrap;
}

.entry__body {
    border-top: 1px solid var(--border-color);
    padding: 4px 24px 20px;
}

.entry__label {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin: 20px 0 6px;
}

.entry__body p,
.entry__body ul {
    margin: 6px 0;
}

.entry__body ul {
    margin-left: 20px;
}

.entry__body li {
    margin: 6px 0;
}

/* Screenshot embed (built now, dormant): soft backlight treatment. Invisible
   while every instance carries `hidden` + `.is-hidden` (amendment A2) — no
   visible output until real captures exist. */
.entry-shot {
    margin: 20px 0 4px;
    margin-inline: max(calc((100% - 1400px) / 2), calc((100% + 80px - 100vw) / 2));
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    box-shadow: 0 0 72px -6px var(--istar-active-glow);
}

.entry-shot img {
    display: block;
    width: 100%;
    height: auto;
}

.entry-shot__full {
    display: block;
}

.entry-shot figcaption {
    padding: 8px 12px;
    border-top: 1px solid var(--border-color);
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.75rem;
    color: var(--meta-color);
}

.entry-shot__hint {
    display: none;
    margin-top: 12px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.72rem;
}

@media (min-width: 1280px) {
    .entry__body .entry-shot {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
    }

    .entry__body .entry-shot figcaption {
        border-top: 0;
        border-left: 1px solid var(--border-color);
        padding: 16px 20px;
        font-size: 0.84rem;
        line-height: 1.6;
    }

    .entry__body .entry-shot .entry-shot__hint {
        display: block;
    }
}

/* CONTENT BLOCKS */
blockquote {
    border-left: 2px solid var(--quote-border);
    padding-left: 20px;
    margin: 32px 0;
    font-size: 1.15rem;
}

.decision-callout {
    border-left: 2px solid var(--quote-border);
    padding-left: 20px;
    margin: 24px 0;
    font-size: 1.15rem;
}

ul.stat-row {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0;
    padding: 0;
}

.stat-row li {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.8rem;
    color: var(--meta-color);
    border: 1px solid var(--border-color);
    padding: 6px 9px;
}

blockquote cite {
    display: block;
    margin-top: 10px;
    font-style: normal;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.75rem;
    color: var(--meta-color);
}

details {
    border: 1px solid var(--border-color);
    padding: 16px 20px;
    margin: 24px 0;
}

details summary {
    cursor: pointer;
    font-weight: 600;
}

details[open] summary {
    margin-bottom: 8px;
}

.note {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.8rem;
    color: var(--meta-color);
}

.page .recognition-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent-color);
}

.contact-list {
    list-style: none;
    margin: 24px 0;
}

.contact-list li {
    margin: 14px 0;
}

.contact-list a {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 1.05rem;
    text-decoration: none;
    border-bottom: 1px solid var(--border-color);
}

.contact-list a:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
}

.todo-block {
    border: 2px dashed var(--accent-color);
    padding: 28px;
    margin: 32px 0;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.9rem;
}

/* ZOOM ENGINE */
main.is-zooming {
    position: relative;
    overflow: clip;
    min-height: 100vh;
}

.zoom-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    will-change: transform, opacity;
}

/* CHAR REVEAL */
.reveal-heading {
    perspective: 800px;
}

.reveal-heading .char {
    display: inline-block;
    transform-origin: bottom center;
}

/* MOTION SAFETY */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .header,
    main,
    .drawer,
    .drawer__group svg {
        transition: none;
    }

    .node__inner {
        transition: none;
    }

    .email-copied,
    .email-copied.is-visible {
        transition: none;
    }

    .email-reveal,
    .email-reveal.is-open {
        transition: none;
    }

    .node__satellite {
        animation: none;
        transform: translate(-50%, -50%) translate(var(--rest-x), var(--rest-y));
    }
}

/* Narrow (mobile) — L0 becomes the timeline spine (design-refs 1d).
   Desktop ≥601px is untouched by everything in this block. */
@media (max-width: 600px) {
    .header,
    .page,
    .hero,
    .constellation-section {
        padding-left: 20px;
        padding-right: 20px;
    }

    .entry-shot {
        margin-inline: 0;
    }

    .children--pair {
        grid-template-columns: none;
        justify-content: normal;
    }

    /* Narrow hero: swap the paragraphs. display (not visibility) — a
       populated but hidden layout box is a known defect class here (the
       email-unfurl width bug). */
    .hero__copy--wide {
        display: none;
    }

    .hero__copy--narrow {
        display: block;
    }

    /* Tap-target floor (44px) for the fixed header controls. */
    .menu-trigger {
        height: 44px;
    }

    .header__icon {
        width: 44px;
        height: 44px;
    }

    /* Constellation reflows from a 2D map into a vertical timeline. */
    .constellation-wrap {
        height: auto;
    }

    .constellation-wrap .constellation {
        transform: none;
    }

    .constellation {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
    }

    .constellation__svg {
        display: none;
    }

    .timeline-spine {
        display: block;
        position: absolute;
        left: 31px;
        top: 0;
        bottom: 26px;
        width: 1px;
        background: var(--accent-color);
        opacity: 0.55;
    }

    .spine-era {
        display: block;
        padding: 0 0 8px 56px;
        font-family: 'JetBrains Mono', 'Fira Code', monospace;
        font-size: 10px;
        letter-spacing: 0.16em;
        color: var(--faint-color);
    }

    .spine-era--end {
        position: relative;
        padding: 0 0 0 56px;
    }

    .spine-era--end::before {
        content: '';
        position: absolute;
        left: 27px;
        top: 5px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--border-color);
    }

    .node {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        max-width: none;
        padding: 0 0 22px 56px;
    }

    .constellation--sub .node {
        width: auto;
        max-width: 240px;
    }

    /* Filled dot on the spine + horizontal connector stub. */
    .node::before {
        content: '';
        position: absolute;
        left: 25px;
        top: 16px;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: var(--accent-color);
        box-shadow: 0 0 10px 3px var(--istar-active-glow);
    }

    .node::after {
        content: '';
        position: absolute;
        left: 38px;
        top: 22px;
        width: 18px;
        height: 1px;
        background: var(--accent-color);
        opacity: 0.55;
    }

    .node__inner {
        padding: 16px 18px;
    }

    .node__inner--center {
        text-align: left;
    }

    .node__foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 12px;
        padding-top: 11px;
        border-top: 1px solid var(--constellation-line);
        font-family: 'JetBrains Mono', 'Fira Code', monospace;
    }

    .node__count {
        font-size: 10.5px;
        letter-spacing: 0.06em;
        color: var(--istar-label);
    }

    .node__open {
        font-size: 11px;
        letter-spacing: 0.06em;
        color: var(--accent-color);
    }

    .node__open::after {
        content: '\203A';
        margin-left: 6px;
    }

    .node__satellite {
        display: none;
    }

    .istars {
        display: none;
    }

    /* Telemetry: two zones at narrow — the middle metrics zone (static
       placeholder copy, being rewritten before launch) is hidden, the
       left/right identity zones stay. */
    .telemetry {
        padding: 0 20px;
    }

    .telemetry__metrics {
        display: none;
    }
}