/* Night River: shared layer (base, header, footer, controls, the scene slot). Colours come from tokens.css only. */

*, *::before, *::after { box-sizing: border-box; }
/* the root font size stays the browser's own (no step by screen width): a width step ignores browser zoom, so Ctrl and
   minus made text bigger, not smaller. Large screens get their sizes from the rem limits of the tokens instead. */
html { overflow-x: clip; background: var(--color-bg); color: var(--color-ink); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body { margin: 0; min-height: 100svh; font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--color-ink); background: var(--color-bg); -webkit-tap-highlight-color: transparent; overflow-x: clip; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }
::selection { background: var(--color-river-mint); color: var(--color-ink-on-bright); }
:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 3px; border-radius: 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.04; letter-spacing: -0.012em; text-wrap: balance; }
h1 em, h2 em, h3 em, .serif-em { font-style: italic; }
p { text-wrap: pretty; }
.lede { font-size: var(--text-lg); line-height: 1.55; color: var(--color-ink-muted); max-width: var(--measure); }
.muted { color: var(--color-ink-muted); }
.label { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-dim); }
.wrap { width: min(100% - 2 * var(--gutter), 82rem); margin-inline: auto; }
/* the two addresses of today's site that became sections (portfolio.html, press.html): they pass the visitor on */
.moved { display: grid; align-content: center; justify-items: start; gap: var(--space-5); min-height: 100svh; }
.moved h1 { font-size: var(--text-hero-2); }

/* ---------- skip link ---------- */
.skip { position: fixed; left: var(--space-4); top: var(--space-3); z-index: 200; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--color-marigold); color: var(--color-ink-on-bright); font-weight: 700; transform: translateY(-300%); transition: transform var(--duration-fast) var(--ease-premium); }
.skip:focus-visible { transform: none; }

/* ---------- the header: assets/css/header.css (the same on every page) ---------- */
.ext svg { width: 0.7em; height: 0.7em; flex: none; }
.p-mneme { --pc: var(--color-river-blue); --pi: var(--color-mneme); }
.p-skills { --pc: var(--color-river-mint); --pi: var(--color-skills); }
.p-orion { --pc: var(--color-river-cyan); --pi: var(--color-orion); }

/* ---------- buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: 3.25rem; padding: 0 var(--space-6); border-radius: var(--radius-pill); font-weight: 700; font-size: var(--text-base); letter-spacing: 0.01em; transition: transform var(--duration-fast) var(--ease-premium), background-color var(--duration-fast) var(--ease-premium), box-shadow var(--duration-normal) var(--ease-premium), border-color var(--duration-fast) var(--ease-premium); }
.btn:active { transform: scale(0.97); }
.btn svg { width: 1.05em; height: 1.05em; flex: none; transition: transform var(--duration-normal) var(--ease-premium); }
.btn:hover svg { transform: translateX(3px); }
.btn--primary { background: var(--gradient-brand); color: var(--color-ink-on-bright); box-shadow: 0 10px 34px color-mix(in srgb, var(--color-river-mint) 28%, transparent); }
.btn--primary:hover { box-shadow: 0 14px 44px color-mix(in srgb, var(--color-river-cyan) 44%, transparent); }
.btn--ghost { border: 1px solid var(--color-control-line); background: color-mix(in srgb, var(--color-surface) 72%, transparent); color: var(--color-ink); }
.btn--ghost:hover { border-color: var(--color-moon); background: color-mix(in srgb, var(--color-surface-2) 86%, transparent); }
.btn--warm { background: var(--color-marigold); color: var(--color-ink-on-bright); }
.btn--warm:hover { box-shadow: 0 12px 36px color-mix(in srgb, var(--color-marigold) 36%, transparent); }
.link { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; padding-bottom: 2px; transition: background-size var(--duration-slow) var(--ease-premium), color var(--duration-fast) var(--ease-premium); }
.link:hover, .link:focus-visible { background-size: 100% 1.5px; }
.ext { display: inline-flex; align-items: baseline; gap: 0.4em; font-weight: 700; color: var(--pi, var(--color-ink)); }
.mail { font-family: var(--font-display); font-style: italic; color: var(--color-marigold); }

/* ---------- chips, wells, cards ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { display: inline-flex; align-items: center; min-height: 2rem; padding: 0 var(--space-3); border-radius: var(--radius-pill); border: 1px solid color-mix(in srgb, var(--pc, var(--color-moon)) 38%, transparent); background: color-mix(in srgb, var(--pc, var(--color-moon)) 9%, transparent); font-size: var(--text-sm); color: var(--color-ink); white-space: nowrap; }
.tag { display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0 var(--space-3); border-radius: var(--radius-sm); background: var(--color-surface-2); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-muted); }
.well { border-radius: var(--radius-lg); background: var(--color-bg-deep); border: 1px solid var(--color-line); box-shadow: 0 30px 80px var(--color-shadow); }
.panel { border-radius: var(--radius-xl); background: var(--color-glass); border: 1px solid var(--color-glass-line); box-shadow: 0 30px 80px var(--color-shadow); }

/* ---------- the terminal (Mneme and the install wells) ---------- */
.term { font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.75; color: var(--color-ink-muted); }
.term__bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-line); color: var(--color-ink-dim); font-size: var(--text-xs); }
.term__bar::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--pc, var(--color-river-blue)); box-shadow: 1rem 0 0 var(--color-line-strong), 2rem 0 0 var(--color-line-strong); margin-right: 2rem; }
.term__body { padding: var(--space-4) var(--space-5) var(--space-5); overflow-x: auto; }
.term__line { display: flex; gap: var(--space-3); white-space: pre-wrap; overflow-wrap: anywhere; }
.term__line > :first-child { flex: none; min-width: 1.6em; white-space: nowrap; color: var(--color-ink-dim); }
.term__line.is-cmd { color: var(--color-ink); }
.term__line.is-ok > :first-child { color: var(--color-success); }
.term__line.is-warn > :first-child, .term__line.is-warn { color: var(--color-warning); }
.term__line.is-note { color: var(--color-ink-dim); }
.term__line .q { color: var(--pi, var(--color-mneme)); }
.term__line .dim { color: var(--color-ink-dim); }
.term__caret { display: inline-block; width: 0.6em; height: 1.1em; vertical-align: -0.18em; background: var(--pc, var(--color-river-blue)); animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.js .term[data-play] .term__line[data-step] { opacity: 0; }
.js .term[data-play] .term__line[data-step].is-shown { opacity: 1; transition: opacity var(--duration-slow) var(--ease-premium); }
.runbar { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-5) var(--space-4); }
.run { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; padding: 0 var(--space-4); border-radius: var(--radius-pill); border: 1px solid color-mix(in srgb, var(--pc) 50%, transparent); background: color-mix(in srgb, var(--pc) 12%, transparent); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink); transition: background-color var(--duration-fast) var(--ease-premium), transform var(--duration-fast) var(--ease-premium); }
.run:hover { background: color-mix(in srgb, var(--pc) 24%, transparent); }
.run:active { transform: scale(0.97); }
.run[aria-pressed="true"], .run[aria-selected="true"] { background: var(--pc); color: var(--color-ink-on-bright); border-color: var(--pc); }
.run svg { width: 0.9em; height: 0.9em; }

/* ---------- the scene slot: poster first, canvas over it ---------- */
.slot { position: relative; overflow: hidden; background: var(--color-bg-deep); isolation: isolate; }
.slot__poster, .slot canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.slot__poster { object-fit: cover; transition: opacity 260ms var(--ease-premium); }
.slot__poster.is-swapping { opacity: 0; }
.slot canvas { opacity: 0; transition: opacity 600ms var(--ease-premium); pointer-events: none; touch-action: pan-y; }
.slot.is-ready canvas { opacity: 1; }
.slot__pause { position: absolute; right: var(--space-4); bottom: var(--space-4); z-index: 3; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; padding: 0 var(--space-4); border-radius: var(--radius-pill); background: var(--color-scrim-strong); border: 1px solid var(--color-glass-line); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; color: var(--color-ink); opacity: 0; transition: opacity var(--duration-normal) var(--ease-premium); }
.slot.is-ready .slot__pause { opacity: 1; }
.slot__pause svg { width: 0.9rem; height: 0.9rem; }
html[data-scene="poster"] .slot__pause, html[data-scene="still"] .slot__pause { display: none; }
.scene-note { font-size: var(--text-xs); color: var(--color-ink-dim); }
html[data-scene="live"] .scene-note, html[data-scene="still"] .scene-note { display: none; }
/* the line that says why a still is shown, with the way to the live scene */
.scene-say { position: absolute; left: var(--space-4); bottom: var(--space-4); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); max-width: min(34rem, calc(100% - 2 * var(--space-4))); margin: 0; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-radius: var(--radius-lg); background: var(--color-scrim-strong); border: 1px solid var(--color-glass-line); font-size: var(--text-sm); color: var(--color-ink); }
.scene-say--page { position: fixed; left: auto; right: var(--gutter); bottom: var(--space-4); z-index: 30; }
/* a phone: under the header, over the sky. At the bottom it lay on the main action (the mail address of Contact) */
@media (max-width: 60rem) { .scene-say--page { left: var(--space-3); right: var(--space-3); top: calc(var(--header-h) + var(--space-2)); bottom: auto; max-width: none; } }
.scene-say__try { min-height: 2.75rem; padding: 0 var(--space-4); border-radius: var(--radius-pill); background: var(--color-marigold); color: var(--color-ink-on-bright); font-weight: 700; font-size: var(--text-sm); transition: transform var(--duration-fast) var(--ease-premium), box-shadow var(--duration-normal) var(--ease-premium); }
.scene-say__try:hover { box-shadow: 0 8px 24px color-mix(in srgb, var(--color-marigold) 36%, transparent); }
.scene-say__try:active { transform: scale(0.97); }
/* the still is not dead: it drifts very slowly and the light at the horizon breathes (transform and opacity only) */
html[data-scene="poster"] .slot__poster { animation: still-drift 46s ease-in-out infinite alternate; transform-origin: 62% 52%; }
html[data-scene="poster"] .slot::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(60% 34% at 58% 50%, color-mix(in srgb, var(--color-coral) 26%, transparent), transparent 70%), radial-gradient(40% 60% at 64% 86%, color-mix(in srgb, var(--color-moon) 16%, transparent), transparent 70%); animation: still-breathe 7s ease-in-out infinite alternate; }
@keyframes still-drift { from { transform: scale(1.02) translate3d(-0.6%, 0.3%, 0); } to { transform: scale(1.09) translate3d(1.1%, -0.8%, 0); } }
@keyframes still-breathe { from { opacity: 0.15; } to { opacity: 1; } }

/* ---------- reveals: the content is there without script; script only adds the arrival ---------- */
.js [data-reveal] { opacity: 0; }
.js [data-reveal].is-in { opacity: 1; transition: opacity 700ms var(--ease-premium) calc(var(--i, 0) * 90ms); }
.js [data-reveal="rise"] { transform: translateY(18px); }
.js [data-reveal="rise"].is-in { transform: none; transition: opacity 700ms var(--ease-premium) calc(var(--i, 0) * 90ms), transform 900ms var(--ease-premium) calc(var(--i, 0) * 90ms); }
.line-mask { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.line-mask > span { display: block; }
.js .line-mask > span { transform: translateY(108%); }
.js .is-arrived .line-mask > span { transform: none; transition: transform var(--duration-page) var(--ease-premium) calc(var(--l, 0) * 130ms); }

/* ---------- footer ---------- */
.site-footer { position: relative; z-index: 2; background: var(--color-bg-deep); border-top: 1px solid var(--color-line); padding: var(--space-8) 0 var(--space-6); }
.site-footer .wrap { display: grid; gap: var(--space-7); }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 0.8fr)); gap: var(--space-7); align-items: start; }
.footer__say { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.1; max-width: 16ch; }
.footer__say em { color: var(--color-marigold); }
.footer__col h2 { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-dim); margin-bottom: var(--space-3); }
.footer__col li a { display: inline-flex; align-items: center; min-height: 2.5rem; color: var(--color-ink-muted); transition: color var(--duration-fast) var(--ease-premium); }
.footer__col li a:hover { color: var(--color-ink); }
.footer__base { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); justify-content: space-between; align-items: center; padding-top: var(--space-5); border-top: 1px solid var(--color-line); font-size: var(--text-sm); color: var(--color-ink-dim); }
.footer__base a { color: var(--color-ink-muted); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 48rem) { .footer__top { grid-template-columns: 1fr 1fr; } .footer__say { grid-column: 1 / -1; } }

/* ---------- the reduced-motion net: fades stay, movement goes ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal], .js [data-reveal="rise"], .js .line-mask > span { opacity: 1; transform: none; transition: none; }
  .btn:hover svg { transform: none; }
  .term__caret { animation: none; }
  .slot canvas { transition: none; }
  html[data-scene="poster"] .slot__poster, html[data-scene="poster"] .slot::before { animation: none; }
  .skip { transition: none; }
}
@media (forced-colors: active) {
  .btn, .chip, .run { border: 1px solid ButtonText; }
}

/* joined 2026-10-14: the credit line */
.footer__made { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-ink-muted); }
.footer__made a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 0.2em; }