/* About as a route (Mumbai → Miami), the build philosophy, proof, and the JARVIS palette. */

/* ── Route ───────────────────────────────────────────────────── */
.about-route { gap: 0; }
.route { position: relative; list-style: none; margin: 0; padding: 0 0 0 52px; }
.route-svg { position: absolute; left: 0; top: 0; width: 44px; height: 100%; overflow: visible; pointer-events: none; }
.route-svg .route-track { stroke: rgba(255,255,255,.14); }
.route-svg .route-ink { stroke: var(--heading); }
.route-svg .route-node { fill: #050506; stroke: rgba(255,255,255,.4); transition: stroke .4s ease, fill .4s ease; }
.route-svg .route-node.is-reached { stroke: var(--heading); fill: var(--heading); }
.route-svg .route-plane { fill: var(--reading-accent); }

.route-stop { position: relative; padding: 0 0 56px; transition: opacity .6s ease; }
.route-log { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 10px; font: 400 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--reading-muted); }
.route-log span:first-child { color: var(--heading); }
.route-stop > p:not(.route-log) { margin: 0; max-width: 46ch; font-size: 15.5px; line-height: 1.7; color: var(--reading-text); }
.route-end { padding-bottom: 8px; }
#sec-about .route-closer { margin: 0; font: 400 clamp(24px, 2.4vw, 32px)/1.3 'Libre Baskerville', Georgia, serif; letter-spacing: -.01em; color: var(--heading); max-width: 18ch; }
.route-closer .cw { transition: opacity .25s linear; }

/* With JS, stops ahead of the line are quieter until the route reaches them. */
.js-route .route-stop:not(.is-reached) { opacity: .32; }
.js-route .route-closer .cw { opacity: calc(.18 + var(--lit, 0) * .82); }

/* ── Signature ───────────────────────────────────────────────── */
.signature { margin: 72px 0 0; padding: 28px 0 0; border-top: 1px solid rgba(255,255,255,.1); }
.signature-label { margin: 0 0 12px; font: 400 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--reading-muted); }
#sec-about .signature-line { margin: 0; font: 400 clamp(22px, 2.2vw, 30px)/1.3 'Libre Baskerville', Georgia, serif; color: var(--heading); }
.signature-line em { color: var(--reading-text); }
.signature-note { margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: var(--reading-muted); }
.principle-mark { font-family: var(--mono); color: var(--heading); }

/* ── Proof ───────────────────────────────────────────────────── */
.proof { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 28px; margin: 44px 0 0; }
.proof div { border-top: 1px solid rgba(255,255,255,.1); padding-top: 14px; }
.proof dt { font: 400 clamp(24px, 2.2vw, 30px)/1.1 'Libre Baskerville', Georgia, serif; color: var(--heading); font-variant-numeric: tabular-nums; }
.proof dd { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--reading-muted); }
.proof dd span { font-family: var(--mono); font-size: 11px; }
.proof dd .external-link { color: var(--reading-text); }

/* ── REZT demo ───────────────────────────────────────────────── */
.rezt-demo { margin: 36px 0 0; padding: 16px 18px; border: 1px dashed rgba(255,255,255,.18); border-radius: 14px; }
.rezt-demo p { margin: 0; }
.rezt-demo-label { display: flex; justify-content: space-between; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--heading); }
.rezt-demo-tag { color: var(--reading-muted); letter-spacing: .08em; }
.rezt-demo-line { margin-top: 10px !important; font-size: 14px; color: var(--reading-text); }
.rezt-demo-clock { font: 500 15px/1 var(--mono); color: var(--heading); font-variant-numeric: tabular-nums; }

/* ── Experience paper link, project principle line ──────────── */
.exp-paper { margin: -4px 0 12px; font-size: 13.5px; }
.proj-principle { margin-top: 12px !important; font-size: 13px; line-height: 1.5; color: var(--reading-text); }
.proj-principle span { font-family: var(--mono); color: var(--heading); margin-right: 4px; }
.proj-head .principle-mark { font-size: 12px; color: var(--reading-muted); margin-right: -8px; }
.proj-row:hover .proj-head .principle-mark, .proj-row.is-open .proj-head .principle-mark { color: var(--heading); }
.proj-head:has(.principle-mark) { grid-template-columns: 34px 1fr auto auto 96px; }

/* ── Hero: Now line + palette hint ───────────────────────────── */
.hero-now { margin: 22px 0 0 !important; max-width: none !important; font-size: 13px !important; line-height: 1.6 !important; color: var(--reading-text); }
.hero-now-label { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--heading); margin-right: 10px; }
.hero-now-date { display: block; margin-top: 2px; font: 400 10.5px/1.4 var(--mono); color: var(--reading-muted); }
/* ── JARVIS palette ──────────────────────────────────────────── */
.jarvis { width: min(560px, calc(100vw - 32px)); margin: 14vh auto auto; padding: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 16px;
    background: rgba(10,11,14,.9); color: var(--heading); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 30px 80px rgba(0,0,0,.6); font-family: var(--mono); }
.jarvis::backdrop { background: rgba(0,0,0,.5); }
.jarvis[open] { animation: jarvis-in .22s var(--ease-out, ease-out); }
@keyframes jarvis-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } }
.jarvis-form { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.jarvis-prompt { font-size: 12px; letter-spacing: .1em; color: var(--reading-accent); }
.jarvis-form input { flex: 1; background: none; border: 0; outline: 0; color: var(--heading); font: 400 15px/1.4 var(--mono); caret-color: var(--reading-accent); }
.jarvis-form input::placeholder { color: var(--reading-muted); }
.jarvis-list { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow-y: auto; }
.jarvis-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 8px; font-size: 13px; color: var(--reading-text); cursor: pointer; }
.jarvis-list li span:last-child { font-size: 11px; color: var(--reading-muted); text-transform: uppercase; letter-spacing: .08em; }
.jarvis-list li[aria-selected="true"] { background: rgba(255,255,255,.07); color: var(--heading); }
.jarvis-list .jarvis-empty { color: var(--reading-muted); cursor: default; }
.jarvis-foot { display: flex; gap: 18px; margin: 0; padding: 10px 18px; border-top: 1px solid rgba(255,255,255,.08); font-size: 10.5px; color: var(--reading-muted); }

@media (max-width: 720px) {
    .route { padding-left: 40px; }
    .proof { grid-template-columns: 1fr; }
    .proj-head:has(.principle-mark) { grid-template-columns: 26px 1fr auto auto; }
}
@media (prefers-reduced-motion: reduce) {
    .route-stop, .route-closer .cw, .route-svg .route-node { transition: none; }
    .jarvis[open] { animation: none; }
}

/* Palette jumps land rows below the fixed header, like section links. */
#sec-projects .proj-row { scroll-margin-top: 140px; }

/* ── JARVIS: answers, voice toggle, on-screen caption ────────── */
.jarvis-answer { margin: 0; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.08); font: 400 14px/1.65 Inter, system-ui, sans-serif; color: var(--heading); white-space: pre-wrap; }
.jarvis-answer[data-state="loading"] { color: var(--reading-muted); font-family: var(--mono); font-size: 12px; }
.jarvis-answer[data-state="error"] { color: var(--reading-muted); }
.jarvis-answer a { color: var(--heading); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.35); word-break: break-all; }
.jarvis-list li.jarvis-ask span:first-child { color: var(--heading); }
.jarvis-list li.jarvis-ask span:last-child { color: var(--reading-accent); }
.jarvis-voice { all: unset; cursor: pointer; margin-left: auto; color: var(--reading-muted); }
.jarvis-voice[aria-pressed="true"] { color: var(--reading-accent); }
.jarvis-voice:focus-visible { outline: 1px solid var(--heading); outline-offset: 3px; }
.jarvis-caption { position: fixed; left: 50%; bottom: 7vh; z-index: 60; margin: 0; padding: 10px 16px; transform: translate(-50%, 8px);
    font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--heading);
    background: rgba(8,9,12,.72); border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
    opacity: 0; pointer-events: none; transition: opacity .35s ease, transform .5s var(--ease-out, ease-out); }
.jarvis-caption.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .jarvis-caption { transition: none; } }

/* ── JARVIS voice: push-to-talk mic + "show" button for answers ─── */
.jarvis-mic { all: unset; box-sizing: border-box; cursor: pointer; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--reading-muted); border: 1px solid rgba(255,255,255,.14); transition: color .2s ease, border-color .2s ease, background .2s ease; }
.jarvis-mic[hidden] { display: none; }
.jarvis-mic:hover { color: var(--heading); border-color: rgba(255,255,255,.35); }
.jarvis-mic:focus-visible { outline: 1px solid var(--heading); outline-offset: 2px; }
.jarvis-mic:disabled { opacity: .35; cursor: not-allowed; }
.jarvis-mic[aria-pressed="true"] { color: #0b0c0f; background: var(--reading-accent); border-color: var(--reading-accent); animation: jarvis-listen 1.4s ease-out infinite; }
@keyframes jarvis-listen { 0% { box-shadow: 0 0 0 0 rgba(199,161,92,.55); } 100% { box-shadow: 0 0 0 12px rgba(199,161,92,0); } }
.jarvis.is-listening .jarvis-form input::placeholder { color: var(--reading-accent); }
.jarvis-go { all: unset; cursor: pointer; display: block; margin-top: 12px; font: 500 12px/1 var(--mono); letter-spacing: .04em; color: var(--heading); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.35); }
.jarvis-go:hover, .jarvis-go:focus-visible { color: var(--reading-accent); text-decoration-color: var(--reading-accent); }
@media (prefers-reduced-motion: reduce) { .jarvis-mic[aria-pressed="true"] { animation: none; } }
/* Spoken answers that navigate stay on screen as a caption, so let them wrap. */
.jarvis-caption.is-answer { width: max-content; max-width: min(560px, calc(100vw - 32px)); padding: 12px 18px; border-radius: 14px;
    font: 400 14px/1.55 Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none; text-align: left; }

/* ── JARVIS arc: talk from anywhere on the page ─────────────────
   A glass disc centred on the screen's bottom-right corner, so only its quarter
   shows: a dial with the HUD ticks, a reactor core in the corner, and words running
   round its edge. The arc and its panel are .glass, drawn by liquid-glass.js with
   the same lens as the nav and cards (CSS glass without WebGL). */
:root { --arc-r: 150px; }
.jarvis-orb-wrap { position: fixed; inset: auto 0 0 auto; z-index: 55; pointer-events: none; transition: opacity .3s ease; }
body.preload .jarvis-orb-wrap, html.menu-open .jarvis-orb-wrap { opacity: 0; }
html.menu-open .jarvis-orb-wrap * { pointer-events: none !important; }

.jarvis-arc.glass { appearance: none; margin: 0; padding: 0; font: inherit; color: var(--heading); cursor: pointer; pointer-events: auto;
    position: fixed; right: calc(env(safe-area-inset-right) - var(--arc-r)); bottom: calc(env(safe-area-inset-bottom) - var(--arc-r));
    width: calc(var(--arc-r) * 2); height: calc(var(--arc-r) * 2); overflow: visible;
    /* In px, not %: liquid-glass.js reads the computed radius to shape the lens. */
    border-radius: var(--arc-r);
    transition: transform .45s var(--ease-out, ease-out); }
.jarvis-arc[hidden] { display: none; }
.jarvis-arc:hover { transform: scale(1.05); }
.jarvis-arc:focus-visible { outline: 1px solid var(--heading); outline-offset: -6px; }
.jarvis-arc-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* With view-box, 0 0 is the viewBox's own origin: the screen corner the arc is centred on. */
.jarvis-arc-art * { transform-box: view-box; transform-origin: 0 0; }
.jarvis-arc-line { fill: none; stroke: var(--heading); stroke-width: .8; opacity: .38; }
.jarvis-arc-line.faint { opacity: .16; }
.jarvis-arc-words text { font: 500 11.5px var(--mono); fill: var(--heading); opacity: .95; letter-spacing: .02em; }
.jarvis-arc-words { animation: arc-turn 48s linear infinite; }
.jarvis-orb-ticks line { stroke: var(--heading); stroke-width: .9; stroke-linecap: round; opacity: .38; }
.jarvis-orb-ticks line.major { opacity: .8; }
.jarvis-orb-halo { fill: var(--heading); opacity: .06; transition: fill .3s ease; }
.jarvis-orb-core { fill: var(--heading); filter: drop-shadow(0 0 10px rgba(243,240,233,.55)); transition: fill .3s ease; animation: orb-breathe 4s ease-in-out infinite; }

@keyframes arc-turn { to { transform: rotate(360deg); } }
@keyframes orb-breathe { 0%, 100% { transform: scale(.92); opacity: .82; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes orb-halo { 0%, 100% { transform: scale(1); opacity: .06; } 50% { transform: scale(1.3); opacity: .14; } }
@keyframes orb-heard { 0% { transform: scale(1.25); } 100% { transform: scale(1); } }
/* Listening uses the site's "active" gold, like the section tracker's marker. */
.jarvis-arc[data-state="listening"] .jarvis-arc-words { animation-duration: 16s; }
.jarvis-arc[data-state="listening"] .jarvis-orb-ticks { animation: arc-turn 12s linear infinite reverse; }
.jarvis-arc[data-state="listening"] .jarvis-orb-ticks line.major,
.jarvis-arc[data-state="listening"] .jarvis-arc-words text { stroke: none; fill: var(--reading-accent); }
.jarvis-arc[data-state="listening"] .jarvis-orb-ticks line.major { stroke: var(--reading-accent); }
.jarvis-arc[data-state="listening"] .jarvis-orb-core { fill: var(--reading-accent); }
.jarvis-arc[data-state="listening"] .jarvis-orb-halo { fill: var(--reading-accent); animation: orb-halo 1.4s ease-in-out infinite; }
.jarvis-arc.is-hearing .jarvis-orb-core { animation: orb-heard .4s ease-out; }
.jarvis-arc[data-state="thinking"] .jarvis-orb-ticks { animation: arc-turn 1.6s linear infinite; }
.jarvis-arc[data-state="thinking"] .jarvis-arc-words { animation-duration: 10s; }
.jarvis-arc[data-state="intro"] .jarvis-orb-halo, .jarvis-arc[data-state="speaking"] .jarvis-orb-halo { animation: orb-halo .9s ease-in-out infinite; }
.jarvis-arc[data-state="ready"] .jarvis-orb-halo { fill: var(--reading-accent); animation: orb-halo 1.8s ease-in-out infinite; }
.jarvis-arc[data-state="ready"] .jarvis-arc-words text { fill: var(--reading-accent); }

/* ── Panel ─────────────────────────────────────────────────────── */
.jarvis-panel.glass { pointer-events: auto; position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: calc(var(--arc-r) + 18px + env(safe-area-inset-bottom));
    width: min(360px, calc(100vw - 32px)); padding: 18px 20px 14px; border-radius: var(--card-radius, 24px); animation: bubble-in .4s var(--ease-out, ease-out); }
.jarvis-panel[hidden] { display: none; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.jarvis-panel-head { display: flex; align-items: center; gap: 10px; margin: -4px 0 12px; }
.jarvis-panel-name { font: 400 30px/1 'Pinyon Script', cursive; color: var(--heading); }
.jarvis-panel-status { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--reading-muted); }
.jarvis-panel[data-mode="listening"] .jarvis-panel-status, .jarvis-panel[data-mode="ready"] .jarvis-panel-status { color: var(--reading-accent); }
.jarvis-bubble-close { all: unset; cursor: pointer; margin-left: auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font: 400 18px/1 'Inter', system-ui, sans-serif; color: var(--reading-muted); }
.jarvis-bubble-close:hover, .jarvis-bubble-close:focus-visible { color: var(--heading); }
/* Sound bars: shown while listening or speaking. Decorative; no audio is analysed. */
.jarvis-wave { display: none; align-items: center; gap: 2px; height: 14px; }
.jarvis-wave i { width: 2px; height: 100%; border-radius: 1px; background: currentColor; transform: scaleY(.3); animation: wave .9s ease-in-out infinite; }
.jarvis-wave i:nth-child(2) { animation-delay: .15s; } .jarvis-wave i:nth-child(3) { animation-delay: .3s; }
.jarvis-wave i:nth-child(4) { animation-delay: .45s; } .jarvis-wave i:nth-child(5) { animation-delay: .6s; }
@keyframes wave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.jarvis-panel[data-mode="listening"] .jarvis-wave { display: inline-flex; color: var(--reading-accent); }
.jarvis-panel[data-mode="speaking"] .jarvis-wave, .jarvis-panel[data-mode="intro"] .jarvis-wave { display: inline-flex; color: var(--heading); }

.jarvis-you { margin: 0 0 10px; font: italic 400 15px/1.5 'Libre Baskerville', Georgia, serif; color: var(--reading-text); }
.jarvis-you::before { content: "“"; } .jarvis-you::after { content: "”"; }
.jarvis-you:empty { display: none; }
.jarvis-bubble-text { margin: 0; font: 400 14.5px/1.6 'Inter', system-ui, sans-serif; color: var(--heading); overflow-wrap: anywhere; }
.jarvis-bubble-text:empty { display: none; }
.jarvis-panel[data-state="error"] .jarvis-bubble-text { color: var(--reading-text); }
.jarvis-bubble-text a { color: var(--heading); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.35); }
.jarvis-bubble-actions:empty { display: none; }
.jarvis-bubble-actions .jarvis-go { margin-top: 12px; }

/* Suggestions read like the Projects index: hairline rows, arrow on hover. */
.jarvis-chips { margin-top: 14px; }
.jarvis-chips[hidden] { display: none; }
.jarvis-chips-label { margin: 0 0 4px; font: 400 10.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--reading-muted); }
.jarvis-chip-list { list-style: none; margin: 0; padding: 0; }
.jarvis-chip-list li + li { border-top: 1px solid var(--reading-border); }
.jarvis-chip { all: unset; box-sizing: border-box; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; width: 100%; padding: 9px 0;
    font: 400 15px/1.3 'Libre Baskerville', Georgia, serif; color: var(--reading-text); transition: color .2s ease, transform .3s var(--ease-out, ease-out); }
.jarvis-chip::after { content: "→"; font: 400 12px var(--mono); color: var(--reading-muted); opacity: 0; transform: translateX(-6px); transition: opacity .2s ease, transform .3s var(--ease-out, ease-out); }
.jarvis-chip:hover, .jarvis-chip:focus-visible { color: var(--heading); }
.jarvis-chip:hover::after, .jarvis-chip:focus-visible::after { opacity: 1; transform: none; color: var(--reading-accent); }
.jarvis-panel-foot { display: flex; justify-content: space-between; gap: 12px; margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--reading-border);
    font: 400 10px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--reading-muted); }
.jarvis-panel-foot span:first-child { display: none; }
.jarvis-panel[data-mode="listening"] .jarvis-panel-foot span:first-child { display: inline; }
.jarvis-panel[data-mode="listening"] .jarvis-foot-keys { display: none; }
@media (hover: none) {
    .jarvis-foot-keys { display: none; }
    .jarvis-panel:not([data-mode="listening"]) .jarvis-panel-foot { display: none; }
}

@media (max-width: 720px) {
    :root { --arc-r: 118px; }
    .jarvis-arc-words text { font-size: 13.5px; }
    .jarvis-panel.glass { right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .jarvis-arc, .jarvis-arc *, .jarvis-panel, .jarvis-panel * { animation: none !important; transition: none !important; }
}

/* The arc and panel are pure liquid glass like the cards: no tint, no border. Unlike
   the cards they float over page text, which the WebGL lens can't bend (it only draws
   the 3D canvas), so a light blur matching the lens's own frost keeps that text from
   showing through sharp. The arc keeps a faint edge so its curve reads on black. */
html.lg-on .jarvis-panel.glass {
    background: transparent;
    -webkit-backdrop-filter: blur(7px);
            backdrop-filter: blur(7px);
}
html.lg-on .jarvis-arc.glass {
    background: transparent;
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
    border-color: rgba(255, 255, 255, 0.22);
}
.jarvis-foot-privacy { opacity: .8; }