/* =========================================================
   SITE.CSS — design system for the Build Log hub
   (Home, Projects, About, Contact, 404)

   Brand: a precise, warm-neutral workshop. Ink and ivory
   surfaces, one confident "signal orange" for action, and a
   cool teal for status. Serif italics add a handcrafted
   voice to otherwise technical type.

   NOTE: the legacy files base.css / portfolio-nav.css /
   portfolio-nav.js / animations.js are still used by three
   project pages and are intentionally left untouched.

   Contents
   1. Tokens (colour, type, space, radius, shadow, motion)
   2. Reset and base
   3. Layout helpers
   4. Header, mobile menu, footer
   5. Buttons, chips, cards, forms, toast
   6. Motion utilities
   7. Print
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root {
  color-scheme: light;

  /* Neutral scale (warm) */
  --n-0: #ffffff;
  --n-50: #faf9f7;
  --n-100: #f3f1ed;
  --n-200: #e6e3dc;
  --n-300: #d2cec4;
  --n-500: #6f6a61;
  --n-600: #55514a;
  --n-900: #14120f;

  /* Semantic surfaces and text */
  --bg: var(--n-50);
  --bg-elev: var(--n-0);
  --bg-sunk: var(--n-100);
  --text: var(--n-900);
  --text-2: var(--n-600);
  --text-3: var(--n-500);
  --line: rgba(20, 18, 15, 0.1);
  --line-strong: rgba(20, 18, 15, 0.18);

  /* Brand */
  --primary: #c93c08;
  --primary-hover: #ae3207;
  --primary-ink: #ffffff;
  --primary-text: #b8350a;
  --primary-tint: rgba(217, 66, 11, 0.08);
  --accent: #0a7567;
  --accent-tint: rgba(11, 127, 113, 0.1);

  /* Semantic status */
  --success: #17803d;
  --warning: #9a5b00;
  --error: #c42b1c;
  --info: #1d5fd1;

  /* Type */
  --font-display: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", sans-serif;
  --font-body: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype",
    Georgia, serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo,
    Consolas, monospace;

  /* Fluid type scale */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --fs-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --fs-3xl: clamp(2.25rem, 1.6rem + 3vw, 4rem);
  --fs-hero: clamp(2.6rem, 1.5rem + 5.4vw, 5.5rem);

  /* Spacing (4px base) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: clamp(4rem, 3rem + 5vw, 8rem);

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(20, 18, 15, 0.06), 0 1px 1px rgba(20, 18, 15, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(20, 18, 15, 0.14), 0 2px 6px rgba(20, 18, 15, 0.05);
  --shadow-lg: 0 28px 60px -20px rgba(20, 18, 15, 0.28);
  --glow: 0 0 0 1px rgba(217, 66, 11, 0.35), 0 12px 40px -12px rgba(217, 66, 11, 0.45);

  /* Layout */
  --container: 1200px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --header-h: 72px;

  /* Stacking */
  --z-base: 1;
  --z-header: 50;
  --z-menu: 60;
  --z-toast: 80;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur: 280ms;
  --dur-slow: 700ms;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0c0b0a;
  --bg-elev: #151413;
  --bg-sunk: #100f0e;
  --text: #f4f1ea;
  --text-2: #b5afa3;
  --text-3: #8f897d;
  --line: rgba(244, 241, 234, 0.1);
  --line-strong: rgba(244, 241, 234, 0.2);

  --primary: #ff6a35;
  --primary-hover: #ff8456;
  --primary-ink: #1a0b04;
  --primary-text: #ff7d4d;
  --primary-tint: rgba(255, 106, 53, 0.12);
  --accent: #3ddbc4;
  --accent-tint: rgba(61, 219, 196, 0.12);

  --success: #4ade80;
  --warning: #fbbf24;
  --error: #ff7b6e;
  --info: #7aa7ff;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 10px 30px -10px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 30px 70px -20px rgba(0, 0, 0, 0.85);
  --glow: 0 0 0 1px rgba(255, 106, 53, 0.4), 0 14px 44px -12px rgba(255, 106, 53, 0.4);
}

/* ---------- 2. RESET AND BASE ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

main {
  flex: 1 0 auto;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

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

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Styled scrollbar (progressive enhancement) */
html {
  scrollbar-color: var(--n-300) transparent;
}
:root[data-theme="dark"] {
  scrollbar-color: #3a3631 transparent;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: var(--s-3);
  left: var(--s-3);
  z-index: calc(var(--z-toast) + 1);
  padding: var(--s-3) var(--s-4);
  background: var(--text);
  color: var(--bg);
  border-radius: var(--r-sm);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus {
  transform: translateY(0);
}

/* ---------- 3. LAYOUT HELPERS ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--s-9);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--primary);
}

.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--primary-text);
}

.section-head {
  display: grid;
  gap: var(--s-4);
  max-width: 46rem;
  margin-bottom: var(--s-7);
}
.section-head h2 {
  font-size: var(--fs-3xl);
}
.section-head p {
  color: var(--text-2);
  font-size: var(--fs-lg);
}

.page-hero {
  padding-top: calc(var(--header-h) + var(--s-8));
  padding-bottom: var(--s-7);
  position: relative;
}
.page-hero h1 {
  font-size: var(--fs-hero);
  margin-top: var(--s-4);
  max-width: 16ch;
}
.page-hero p.lede {
  margin-top: var(--s-5);
  max-width: 40rem;
  color: var(--text-2);
  font-size: var(--fs-lg);
}

/* Ambient background: fine grid + soft glow behind heroes */
.ambient {
  position: absolute;
  inset: 0 0 auto 0;
  height: min(900px, 100vh);
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent);
  mask-image: linear-gradient(to bottom, #000 30%, transparent);
}
.ambient::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center top;
}
.ambient::after {
  content: "";
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  left: 50%;
  top: -42vmax;
  translate: -50% 0;
  background: radial-gradient(closest-side, var(--primary-tint), transparent 70%);
  transform: translate3d(var(--gx, 0px), var(--gy, 0px), 0);
  transition: transform 600ms var(--ease-out);
}

/* ---------- 4. HEADER, MENU, FOOTER ---------- */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: calc(var(--z-header) + 1);
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0));
  pointer-events: none;
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--header-h);
  transition: height var(--dur) var(--ease-out), background-color var(--dur), border-color var(--dur);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  --header-h: 60px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  border-bottom-color: var(--line);
}
.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: var(--fs-sm);
}
.brand__mark {
  width: 32px;
  height: 32px;
  flex: none;
  transition: transform var(--dur) var(--ease-out);
}
@media (max-width: 420px) {
  .site-header .brand__sub { display: none; }
}
.brand:hover .brand__mark {
  transform: rotate(-6deg) scale(1.05);
}
.brand__sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.15em;
  color: var(--text-3);
}

.nav {
  display: none;
  align-items: center;
  gap: var(--s-1);
}
.nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s-3);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-2);
  transition: color var(--dur-fast);
}
.nav a::after {
  content: "";
  position: absolute;
  left: var(--s-3);
  right: var(--s-3);
  bottom: 9px;
  height: 1.5px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur) var(--ease-out);
}
.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--text);
}
.nav a:hover::after,
.nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  transition: background-color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.icon-btn:hover {
  background: var(--bg-sunk);
  border-color: var(--line-strong);
}
.icon-btn:active {
  transform: scale(0.94);
}
.icon-btn svg {
  width: 18px;
  height: 18px;
}
.theme-toggle .i-sun {
  display: none;
}
:root[data-theme="dark"] .theme-toggle .i-sun {
  display: block;
}
:root[data-theme="dark"] .theme-toggle .i-moon {
  display: none;
}

.burger {
  position: relative;
}
.burger span {
  position: absolute;
  left: 13px;
  right: 13px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast);
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 26px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  padding: calc(var(--header-h) + var(--s-5)) var(--gutter) var(--s-6);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}
.menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: -0.03em;
}
.menu a[aria-current="page"] {
  color: var(--primary-text);
}
/* The header sits above the open menu so its close button stays visible */
body.menu-open .site-header {
  z-index: calc(var(--z-menu) + 1);
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.menu-open {
  overflow: hidden;
}

@media (min-width: 860px) {
  .nav { display: flex; }
  .burger, .menu { display: none; }
}

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-sunk);
  padding-block: var(--s-8) var(--s-6);
  margin-top: var(--s-9);
}
.footer-grid {
  display: grid;
  gap: var(--s-7);
}
.footer-brand p {
  margin-top: var(--s-4);
  max-width: 28rem;
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.footer-cols {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.footer-cols h2 {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--s-3);
}
.footer-cols a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--text-2);
  font-size: var(--fs-sm);
  transition: color var(--dur-fast);
}
.footer-cols a:hover {
  color: var(--primary-text);
}
.footer-bottom {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  justify-content: space-between;
  color: var(--text-3);
  font-size: var(--fs-xs);
}
@media (min-width: 860px) {
  .footer-grid { grid-template-columns: 1.2fr 2fr; }
}

.to-top {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: var(--z-header);
  background: var(--bg-elev);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), background-color var(--dur-fast);
}
.to-top.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* ---------- 5. COMPONENTS ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 0 var(--s-5);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease-out), background-color var(--dur-fast),
    border-color var(--dur-fast), box-shadow var(--dur), color var(--dur-fast);
  will-change: transform;
}
.btn svg {
  width: 16px;
  height: 16px;
  transition: transform var(--dur) var(--ease-out);
}
.btn:hover svg {
  transform: translate(2px, -2px);
}
.btn--primary {
  background: var(--primary);
  color: var(--primary-ink);
}
.btn--primary:hover {
  background: var(--primary-hover);
  box-shadow: var(--glow);
}
.btn--ghost {
  border-color: var(--line-strong);
  background: transparent;
  color: var(--text);
}
.btn--ghost:hover {
  background: var(--bg-sunk);
  border-color: var(--text-3);
}
.btn--sm {
  min-height: 44px;
  padding: 0 var(--s-4);
}
.btn:active {
  transform: scale(0.97);
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--bg-elev);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-2);
}

.card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-elev);
  padding: var(--s-6);
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur), box-shadow var(--dur);
}
/* Cursor-aware glow, driven by --mx / --my set in site.js */
.card--glow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), var(--primary-tint), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur);
  pointer-events: none;
}
.card--glow:hover::before {
  opacity: 1;
}
.card--lift:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}
.card > * {
  position: relative;
}

/* Forms */
.field {
  display: grid;
  gap: var(--s-2);
}
.field label {
  font-size: var(--fs-sm);
  font-weight: 600;
}
.field .opt {
  font-weight: 400;
  color: var(--text-3);
}
.field input,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field textarea {
  min-height: 160px;
  resize: vertical;
  line-height: 1.55;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-3);
}
.field input:hover,
.field textarea:hover {
  border-color: var(--text-3);
}
.field input:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-tint);
}
.field input:disabled,
.field textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.field.has-error input,
.field.has-error textarea {
  border-color: var(--error);
}
.field.has-error input:focus-visible,
.field.has-error textarea:focus-visible {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--error) 18%, transparent);
}
.field__error {
  min-height: 0;
  color: var(--error);
  font-size: var(--fs-xs);
  font-weight: 500;
}
.field__error:empty {
  display: none;
}

/* Toasts */
.toasts {
  position: fixed;
  left: 50%;
  bottom: var(--s-5);
  z-index: var(--z-toast);
  display: grid;
  gap: var(--s-2);
  width: min(92vw, 380px);
  transform: translateX(-50%);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--bg-elev);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
  font-weight: 500;
  animation: toast-in var(--dur) var(--ease-out) both;
}
.toast::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--success);
}
.toast--error::before { background: var(--error); }
.toast--info::before { background: var(--info); }
.toast.is-leaving {
  animation: toast-out var(--dur) var(--ease-in-out) both;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(8px) scale(0.98); }
}

/* ---------- 6. MOTION UTILITIES ---------- */
/* Reveal only hides content when JS is running (class set in <head>). */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  @view-transition { navigation: none; }
}

/* ---------- 7. PRINT ---------- */
@media print {
  .site-header, .progress, .to-top, .menu, .ambient, .toasts { display: none !important; }
  body { background: #fff; color: #000; }
  .page-hero { padding-top: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
  .js .reveal { opacity: 1; transform: none; }
}