/* ==========================================================================
   Gabriel Borg — portfolio
   World: a lens. Light-box ground, blue ink, one safelight accent.
   Night: the same ink becomes the ground; the safelight lifts to stay legible.
   ========================================================================== */

:root {
  color-scheme: light;
  /* colour */
  --ground: oklch(97.6% 0.006 245);
  --ground-2: oklch(94.8% 0.009 245);
  --card: oklch(100% 0 0);
  --ink: oklch(19% 0.028 258);
  --ink-2: oklch(40% 0.024 258);
  --ink-3: oklch(50% 0.02 258);
  --line: oklch(88% 0.009 250);
  --safelight: oklch(56% 0.2 33);
  --safelight-ink: oklch(48% 0.19 33);
  --ruby: oklch(25% 0.095 27);
  --ruby-2: oklch(20% 0.08 27);
  --ruby-line: oklch(100% 0 0 / .14);
  --paper: oklch(96% 0.02 60);
  --ember: oklch(76% 0.16 50);

  /* type */
  --display: 'Funnel Display', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body: 'Funnel Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* motion: exponential ease-out and a gentle spring (critically damped feel) */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --spring: linear(0, .0089 .6%, .0348 1.3%, .0765 2.1%, .1346 3%, .3033 5.2%, .5174 7.6%, .6867 9.6%, .8085 11.3%, .8943 13%, .9547 14.9%, .9886 17%, 1.0042 19.4%, 1.0068 21.9%, 1.0026 26%, 1);

  /* layout */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --max: 76rem;
  --radius: 1.5rem;
  /* theme roles (light) */
  --shade: oklch(20% .03 258); --shade-k: 1;
  --btn-bg: var(--ink); --btn-fg: #fff;
  --accent-solid: oklch(48% .19 33);
  --feature-bg: var(--ink); --feature-edge: transparent;
  --glass: oklch(100% 0 0 / .66); --glass-edge: oklch(100% 0 0 / .7);
  --tint: color-mix(in oklch, var(--shade) min(100%, calc(6% * var(--shade-k))), transparent); --tint-2: color-mix(in oklch, var(--shade) min(100%, calc(7% * var(--shade-k))), transparent);
  --ghost-bg: oklch(100% 0 0 / .5);
  --card-edge: color-mix(in oklch, var(--shade) min(100%, calc(6% * var(--shade-k))), transparent);
  --glow-a: oklch(93% .05 60 / .55); --glow-b: oklch(94% .03 240 / .8);
  --slide: var(--card);
  --scroll-thumb: oklch(75% .015 255);
  --readout: oklch(19% .028 258 / .82);
  --dial-rim: oklch(91% .008 250); --dial-s1: oklch(99.5% 0 0); --dial-s2: oklch(85% .012 250);
  --dial-knurl: oklch(45% .02 258 / .45); --dial-glyph: oklch(55% .02 258);

  --shadow-soft: 0 1px 2px color-mix(in oklch, var(--shade) min(100%, calc(6% * var(--shade-k))), transparent), 0 8px 24px -8px color-mix(in oklch, var(--shade) min(100%, calc(12% * var(--shade-k))), transparent), 0 24px 48px -24px color-mix(in oklch, var(--shade) min(100%, calc(16% * var(--shade-k))), transparent);
  --shadow-lift: 0 2px 4px color-mix(in oklch, var(--shade) min(100%, calc(6% * var(--shade-k))), transparent), 0 16px 40px -12px color-mix(in oklch, var(--shade) min(100%, calc(20% * var(--shade-k))), transparent), 0 40px 80px -32px color-mix(in oklch, var(--shade) min(100%, calc(24% * var(--shade-k))), transparent);
}

/* Night: chosen with the exposure dial, or inherited from the system until the visitor chooses */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: oklch(15.5% 0.022 258);
  --ground-2: oklch(23% 0.026 258);
  --card: oklch(20% 0.026 258);
  --ink: oklch(95% 0.008 250);
  --ink-2: oklch(81% 0.014 250);
  --ink-3: oklch(71% 0.016 252);
  --line: oklch(31% 0.024 256);
  --safelight: oklch(65% 0.19 36);
  --safelight-ink: oklch(72% 0.16 42);
  --ruby: oklch(22% 0.085 27);
  --ruby-2: oklch(17% 0.07 27);

  --shade: oklch(4% .02 258); --shade-k: 2.6;
  --btn-bg: oklch(95% 0.008 250); --btn-fg: oklch(17% 0.028 258);
  --feature-bg: oklch(25% 0.034 258); --feature-edge: oklch(100% 0 0 / .07);
  --glass: oklch(21% 0.026 258 / .72); --glass-edge: oklch(100% 0 0 / .09);
  --tint: oklch(100% 0 0 / .07); --tint-2: oklch(100% 0 0 / .1);
  --ghost-bg: oklch(100% 0 0 / .03);
  --card-edge: oklch(100% 0 0 / .06);
  --glow-a: oklch(40% .1 45 / .3); --glow-b: oklch(30% .06 250 / .45);
  --slide: oklch(95% 0.006 250);
  --scroll-thumb: oklch(36% .02 255);
  --readout: oklch(27% .03 258 / .86);
  --dial-rim: oklch(27% .026 258); --dial-s1: oklch(42% .02 255); --dial-s2: oklch(21% .025 258);
  --dial-knurl: oklch(85% .01 250 / .32); --dial-glyph: oklch(72% .015 252);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
main { overflow-x: clip; }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
em { font-style: normal; }
a, button, [role="switch"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
::selection { background: var(--accent-solid); color: #fff; }
:focus-visible { outline: 2px solid var(--safelight); outline-offset: 3px; border-radius: 6px; }
html { scrollbar-color: var(--scroll-thumb) var(--ground); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 10px; border: 2px solid var(--ground); }

.skip {
  position: fixed; left: 1rem; top: -4rem; z-index: 100;
  background: var(--btn-bg); color: var(--btn-fg); padding: .6rem 1rem; border-radius: 999px;
  transition: top .3s var(--ease);
}
.skip:focus { top: 1rem; }

/* ---------- Type ---------- */
.display {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.25rem, 5.2vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
  font-optical-sizing: auto;
}
.display--xl { font-size: clamp(3rem, 9vw, 6rem); letter-spacing: -0.035em; font-weight: 600; }
.display em { color: var(--safelight-ink); font-weight: 600; }
.sec__sub {
  max-width: 62ch;
  color: var(--ink-2);
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.55;
  text-wrap: pretty;
}
h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
h1, h2, h3, .mail, .nav__brand, .frame__label { font-feature-settings: 'calt' 0, 'liga' 0, 'kern' 1; }

/* ---------- Buttons ---------- */
.btn {
  --h: 3.25rem;
  display: inline-flex; align-items: center; gap: .55rem;
  height: var(--h); padding: 0 1.6rem;
  border-radius: 999px;
  font: 500 1rem/1 var(--body);
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: transform .35s var(--ease), background-color .25s ease, color .25s ease;
}
.btn:active { transform: scale(.97); transition-duration: .1s; }
.btn--small { --h: 2.5rem; padding: 0 1.15rem; font-size: .9375rem; background: var(--btn-bg); color: var(--btn-fg); }
.btn--small:hover { background: var(--accent-solid); color: #fff; }
.btn--primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 1px 2px color-mix(in oklch, var(--shade) min(100%, calc(20% * var(--shade-k))), transparent), 0 12px 24px -10px color-mix(in oklch, var(--shade) min(100%, calc(50% * var(--shade-k))), transparent); }
.btn--primary { position: relative; isolation: isolate; }
.btn--primary::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: 0 1px 2px oklch(40% .15 33 / .3), 0 16px 32px -10px oklch(48% .19 33 / .55);
  opacity: 0; transition: opacity .35s var(--ease);
}
.btn--primary:hover { background: var(--accent-solid); color: #fff; }
.btn--primary:hover::after { opacity: 1; }
.btn--ghost { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); background: var(--ghost-bg); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.btn--light { background: var(--paper); color: var(--ruby); }
.btn--light:hover { background: #fff; }
.arrow { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
a:hover > .arrow, .btn:hover .arrow { transform: translate(2px, -2px); }

/* ---------- Nav (frosted material) ---------- */
.nav {
  position: fixed; z-index: 50;
  top: max(.9rem, env(safe-area-inset-top)); left: 50%;
  translate: -50% 0;
  width: min(calc(100% - 1.5rem), 62rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .45rem .5rem .45rem 1.1rem;
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 0 0 1px var(--glass-edge), 0 0 0 1px var(--tint-2), 0 10px 30px -12px color-mix(in oklch, var(--shade) min(100%, calc(22% * var(--shade-k))), transparent);
  transition: transform .6s var(--ease), background-color .4s ease;
}
.nav.is-hidden { transform: translateY(-160%); }
.nav__brand { display: flex; align-items: center; gap: .65rem; font: 600 1rem/1 var(--display); letter-spacing: -0.02em; }
.nav__mark { width: 1.6rem; height: 1.6rem; }
.nav__links { display: flex; gap: .15rem; }
.nav__links a {
  padding: .5rem .85rem; border-radius: 999px;
  font-size: .9375rem; color: var(--ink-2); font-weight: 500;
  transition: background-color .25s ease, color .25s ease;
}
.nav__links a:hover { background: var(--tint); color: var(--ink); }
.nav__links a[aria-current="true"] { color: var(--ink); background: var(--tint-2); }

.nav__actions { display: flex; align-items: center; gap: .35rem; }

/* ---------- Mobile menu ----------
   Three lines at the right of the pill fold into a cross; the section list drops from the pill
   in the same frosted glass, and the page behind dims. Hidden on wide screens. */
.burger {
  display: none; position: relative; flex: none;
  width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%;
  background: var(--tint); color: var(--ink); cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color .25s ease;
}
.burger:hover { background: var(--tint-2); }
.burger:focus-visible { outline: 2px solid var(--safelight); outline-offset: 2px; }
.burger span {
  position: absolute; left: 50%; top: 50%; width: 1.05rem; height: 1.6px; margin: -.8px 0 0 -.525rem;
  border-radius: 2px; background: currentColor;
  transition: transform .5s var(--spring), opacity .2s ease;
}
.burger span:nth-child(1) { transform: translateY(-.34rem); }
.burger span:nth-child(3) { transform: translate(-.173rem, .34rem) scaleX(.67); }
.nav.is-open .burger span:nth-child(1) { transform: rotate(45deg); }
.nav.is-open .burger span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.nav.is-open .burger span:nth-child(3) { transform: rotate(-45deg); }

.menu {
  position: absolute; left: 0; right: 0; top: calc(100% + .5rem);
  padding: .5rem; border-radius: 1.75rem;
  /* nearly solid: a backdrop blur can't reach the page from inside the frosted nav */
  background: color-mix(in oklch, var(--card) 95%, transparent);
  box-shadow: inset 0 0 0 1px var(--glass-edge), 0 0 0 1px var(--tint-2), 0 24px 50px -16px color-mix(in oklch, var(--shade) min(100%, calc(35% * var(--shade-k))), transparent);
  max-height: calc(100svh - 6rem); overflow-y: auto; overscroll-behavior: contain;
  transform-origin: top right;
  opacity: 0; visibility: hidden; transform: translateY(-.5rem) scale(.97);
  transition: opacity .25s ease, transform .45s var(--ease), visibility 0s linear .45s;
}
.nav.is-open .menu { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .55s var(--spring), visibility 0s; }
.menu ul { display: grid; }
.menu li + li { border-top: 1px solid var(--line); }
.menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3.25rem; padding: .35rem 1rem;
  font: 500 1.375rem/1.1 var(--display); letter-spacing: -0.02em; color: var(--ink);
  border-radius: 1.1rem;
  transition: background-color .2s ease, color .2s ease;
  opacity: 0; transform: translateY(-.35rem);
}
.nav.is-open .menu a { opacity: 1; transform: none; transition: background-color .2s ease, color .2s ease, opacity .35s ease var(--d, 0s), transform .5s var(--ease) var(--d, 0s); }
.menu a:hover, .menu a:focus-visible { background: var(--tint); }
.menu a:focus-visible { outline: 2px solid var(--safelight); outline-offset: -2px; }
.menu a[aria-current="true"] { color: var(--safelight-ink); }
.menu a .arrow { color: var(--ink-3); }
.menu a[aria-current="true"] .arrow { color: var(--safelight-ink); }

.scrim {
  position: fixed; inset: 0; z-index: 49;
  background: color-mix(in oklch, var(--shade) min(100%, calc(22% * var(--shade-k))), transparent);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s;
}
.scrim.is-on { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; }

/* ---------- Exposure mode dial: the theme switch ----------
   A knurled camera mode dial with two detents. The sun and moon are printed on its face;
   turning it brings one under the safelight index mark. */
.dial {
  position: relative; display: grid; place-items: center; flex: none;
  width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--ink); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  view-transition-name: theme-dial;
}
.dial svg { width: 2.25rem; height: 2.25rem; overflow: visible; transition: scale .15s ease; }
.dial:active svg { scale: .92; }
.dial:focus-visible { outline: 2px solid var(--safelight); outline-offset: 2px; border-radius: 50%; }
.dial__rim { fill: var(--dial-rim); stroke: var(--line); stroke-width: 1.5; }
.dial__knurl line { stroke: var(--dial-knurl); stroke-width: 1.6; stroke-linecap: round; }
.dial__s1 { stop-color: var(--dial-s1); }
.dial__s2 { stop-color: var(--dial-s2); }
.dial__face { stroke: color-mix(in oklch, var(--shade) min(100%, calc(18% * var(--shade-k))), transparent); stroke-width: 1; }
.dial__hub { fill: var(--dial-rim); stroke: var(--dial-knurl); stroke-width: 1.2; }
.dial__index { fill: var(--safelight); }
.dial__sun, .dial__moon { color: var(--dial-glyph); transition: color .4s ease; }
.dial__sun circle, .dial__moon path { fill: currentColor; }
.dial__sun line { stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
:root:not([data-theme="dark"]) .dial__sun, :root[data-theme="dark"] .dial__moon { color: var(--safelight); }
.dial__rot {
  transform-box: fill-box; transform-origin: center;
  transform: rotate(45deg);                   /* day: the sun sits under the index */
  transition: transform .9s var(--spring), rotate .45s var(--ease);
}
:root[data-theme="dark"] .dial__rot { transform: rotate(-45deg); }   /* night: the moon */
@media (hover: hover) {
  .dial:hover .dial__rot { rotate: -7deg; }                          /* a hint of which way it turns */
  :root[data-theme="dark"] .dial:hover .dial__rot { rotate: 7deg; }
}
.dial.is-click svg { animation: dial-click .32s var(--ease); }
@keyframes dial-click { 30% { scale: .9; } }

/* The page re-exposes in the new theme: a short cross-fade with a brief overexposure,
   while the dial itself keeps turning on top, outside the fade. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .6s; animation-timing-function: var(--ease); mix-blend-mode: normal; }
::view-transition-old(root) { animation-name: expose-out; }
::view-transition-new(root) { animation-name: expose-in; }
@keyframes expose-out { to { opacity: 0; } }
@keyframes expose-in { from { opacity: 0; filter: brightness(1.35) saturate(.85); } }
::view-transition-group(theme-dial) { animation: none; }
::view-transition-old(theme-dial) { display: none; }
::view-transition-new(theme-dial) { animation: none; }

/* ---------- f-stop readout ---------- */
.fstop {
  position: fixed; z-index: 40;
  right: max(clamp(.75rem, 2vw, 1.5rem), env(safe-area-inset-right)); bottom: max(clamp(.75rem, 2vw, 1.5rem), env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: .55rem;
  padding: .4rem .85rem .4rem .45rem;
  border-radius: 999px;
  background: var(--readout);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  color: #fff;
  box-shadow: 0 10px 30px -10px oklch(10% .03 258 / .5);
  font: 500 .8125rem/1 var(--body);
  font-variant-numeric: tabular-nums;
  border: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .5s ease, translate .6s var(--ease), transform .3s var(--ease), background-color .25s ease;
}
/* Back to top: lifts slightly on hover, presses on click */
.fstop:hover { transform: translateY(-2px); background: color-mix(in oklch, var(--readout), oklch(40% .03 258) 30%); }
.fstop:active { transform: scale(.95); transition-duration: .1s; }
.fstop:focus-visible { outline: 2px solid var(--safelight); outline-offset: 3px; }
.fstop svg { width: 1.9rem; height: 1.9rem; }
.fstop__num { letter-spacing: .02em; min-width: 3.6ch; }
.fstop.is-dim { opacity: 0; translate: 0 1rem; pointer-events: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(1rem, 4vw, 4rem);
  padding: 7.5rem var(--gutter) 4rem;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
}
.hero::before {
  content: ''; position: absolute; inset: 0 -50vw; z-index: -1;
  background:
    radial-gradient(60rem 40rem at 82% 40%, var(--glow-a), transparent 70%),
    radial-gradient(40rem 30rem at 0% 0%, var(--glow-b), transparent 70%);
  pointer-events: none;
}
.hero__name {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(3.5rem, 9.2vw, 6rem);
  line-height: .96; letter-spacing: -0.025em;
  margin-bottom: 1.75rem;
}
.line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.line__in { display: block; }
.hero__lead {
  max-width: 34rem;
  font-size: clamp(1.1875rem, 1.9vw, 1.5rem);
  line-height: 1.45; letter-spacing: -0.012em;
  color: var(--ink-2);
  text-wrap: pretty;
}
.hero__lead em { color: var(--ink); font-weight: 600; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: .25rem 1.25rem;
  margin-top: 2.75rem;
  font-size: .9375rem; color: var(--ink-3);
}

.hero__lens {
  position: relative;
  width: min(100%, 36rem);
  aspect-ratio: 1;
  justify-self: end;
  filter: drop-shadow(0 40px 50px color-mix(in oklch, var(--shade) min(100%, calc(28% * var(--shade-k))), transparent)) drop-shadow(0 8px 12px color-mix(in oklch, var(--shade) min(100%, calc(18% * var(--shade-k))), transparent));
  will-change: transform;
}
.lens__svg { width: 100%; height: 100%; overflow: visible; }
.lens__glare {
  position: absolute; inset: 4%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(60% 40% at 32% 18%, oklch(100% 0 0 / .22), transparent 70%);
  mix-blend-mode: screen;
}
.hero__scroll {
  position: absolute; left: 50%; bottom: 1.5rem; translate: -50% 0;
  width: 1.6rem; height: 2.6rem; border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--ink-3);
  opacity: .6;
}
.hero__scroll span {
  position: absolute; left: 50%; top: .45rem; width: 3px; height: .55rem; margin-left: -1.5px; border-radius: 3px; background: var(--ink-3);
}

/* ---------- Sections ---------- */
.sec {
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding: clamp(5rem, 11vw, 9rem) var(--gutter) 0;
}
.sec__head { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); justify-items: start; }
.sec__head .display { max-width: 18ch; }
.sec__head--split {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center; gap: clamp(2rem, 5vw, 5rem);
}
.sec__copy { display: grid; gap: 1.25rem; justify-items: start; }

.vr {
  width: min(100%, 31rem); justify-self: end;
  filter: drop-shadow(0 32px 40px color-mix(in oklch, var(--shade) min(100%, calc(26% * var(--shade-k))), transparent)) drop-shadow(0 6px 10px color-mix(in oklch, var(--shade) min(100%, calc(16% * var(--shade-k))), transparent));
}
.vr__svg { display: block; width: 100%; height: auto; overflow: visible; }

/* RSO pipeline: one lesson through the lens, out as many formats and languages */
.pipe {
  width: min(100%, 32rem); justify-self: end;
  filter: drop-shadow(0 24px 30px color-mix(in oklch, var(--shade) min(100%, calc(14% * var(--shade-k))), transparent)) drop-shadow(0 4px 8px color-mix(in oklch, var(--shade) min(100%, calc(8% * var(--shade-k))), transparent));
}
.pipe__svg { display: block; width: 100%; height: auto; overflow: visible; }
.pipe__card { fill: var(--slide); stroke: var(--line); stroke-width: .8; transition: stroke .5s ease, stroke-width .5s ease; }
.pipe__out.is-hit .pipe__card { stroke: var(--safelight); stroke-width: 1.4; transition-duration: .08s; }
.pipe__lang { transition: opacity .25s ease; }
.pipe__lang.is-swap { opacity: 0; }

/* Project art: each project carries its own picture, same height across the pair */
.project__art { position: relative; display: grid; place-items: center; height: clamp(12rem, 21vw, 17rem); margin-bottom: -.5rem; }
.art__pause {
  position: absolute; left: -.5rem; top: -.5rem; z-index: 2;
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 50%;
  background: var(--tint); color: var(--ink-2); cursor: pointer;
  opacity: .6; transition: opacity .25s ease, background-color .25s ease;
}
.project--feature .art__pause { background: oklch(100% 0 0 / .1); color: oklch(92% .01 250); }
.project:hover .art__pause, .art__pause:focus-visible, .art__pause[aria-pressed="true"] { opacity: 1; }
.art__pause:hover { background: var(--tint-2); }
.project--feature .art__pause:hover { background: oklch(100% 0 0 / .18); }
.art__pause:focus-visible { outline: 2px solid var(--safelight); outline-offset: 2px; }
.art__pause svg { width: .9rem; height: .9rem; }
.art__i-pause { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.art__i-play { fill: currentColor; display: none; }
.art__pause[aria-pressed="true"] .art__i-pause { display: none; }
.art__pause[aria-pressed="true"] .art__i-play { display: inline; }
.project__art .pipe, .project__art .vr { width: auto; height: 100%; max-width: 100%; justify-self: center; display: grid; place-items: center; }
.project__art svg { width: auto; height: 100%; max-width: 100%; }
.project--feature .project__art { background: radial-gradient(closest-side, oklch(62% .14 45 / .22), transparent); }
.project--feature .vr { filter: drop-shadow(0 22px 30px oklch(5% .03 258 / .6)); }

/* Projects: asymmetric, one feature */
.projects { display: grid; grid-template-columns: 1fr 1.25fr; gap: 1.25rem; }
.project, .degree {
  position: relative; isolation: isolate;
  overflow: clip; overflow-clip-margin: 6rem;   /* clips content to the card, lets the hover shadow show */
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--card-edge);
  transition: transform .6s var(--ease);
}
.project::before, .degree::before {
  content: ''; position: absolute; inset: 0; z-index: -2; border-radius: inherit; pointer-events: none;
  box-shadow: var(--shadow-lift); opacity: 0; transition: opacity .6s var(--ease);
}
.project:hover::before, .degree:hover::before { opacity: 1; }
.project::after, .degree::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0;
  background: radial-gradient(28rem circle at var(--mx, 50%) var(--my, 50%), oklch(80% .12 55 / .28), transparent 60%);
  transition: opacity .5s ease;
}
.project:hover, .degree:hover { transform: translateY(-4px); }
.project:hover::after, .degree:hover::after { opacity: 1; }
.project h3 { font-size: clamp(1.6rem, 2.6vw, 2.25rem); margin-bottom: .6rem; }
.project__tag { color: var(--safelight-ink); font-weight: 500; font-size: .9375rem; line-height: 1.4; margin-bottom: 1rem; }
.project p:last-child { color: var(--ink-2); text-wrap: pretty; }
.project--feature { background: var(--feature-bg); color: #fff; box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--feature-edge); }
.project--feature .project__tag { color: var(--ember); }
.project--feature p:last-child { color: oklch(90% .01 250); }
.project--feature::after { background: radial-gradient(28rem circle at var(--mx, 50%) var(--my, 50%), oklch(70% .17 40 / .35), transparent 60%); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li { font-size: .8125rem; font-weight: 500; padding: .4rem .8rem; border-radius: 999px; background: var(--ground-2); color: var(--ink-2); }
.project--feature .chips li { background: oklch(100% 0 0 / .1); color: oklch(92% .01 250); }

/* Publications: ruled list */
.pubs { border-top: 1px solid var(--ink); }
.pub {
  display: grid; grid-template-columns: 12rem 1fr auto; gap: 1.5rem; align-items: baseline;
  padding: 1.75rem 0; border-bottom: 1px solid var(--line);
}
.pub__venue, .pub__main { transition: transform .6s var(--ease); }
.pub__venue { font-weight: 600; font-size: .9375rem; }
.pub__venue span { display: block; font-weight: 400; color: var(--ink-3); font-size: .875rem; margin-top: .15rem; }
.pub h3 { font-size: clamp(1.25rem, 2vw, 1.65rem); margin-bottom: .45rem; text-wrap: balance; }
.pub .me { color: var(--ink); font-weight: 600; }
.pub p { color: var(--ink-3); font-size: .9375rem; text-wrap: pretty; }
.pub__link { display: inline-flex; align-items: center; gap: .35rem; font-weight: 500; font-size: .9375rem; padding: .5rem .9rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); transition: background-color .25s ease, color .25s ease, box-shadow .25s ease; white-space: nowrap; }
.pub__links { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
a.pub__link:hover { background: var(--btn-bg); color: var(--btn-fg); box-shadow: none; }
@media (hover: hover) { .pub:hover .pub__venue, .pub:hover .pub__main { transform: translateX(.75rem); } }

/* Timeline */
.timeline { position: relative; display: grid; gap: 3rem; padding-left: clamp(1.5rem, 4vw, 3rem); }
.timeline__rail { position: absolute; left: 0; top: .5rem; bottom: .5rem; width: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.timeline__rail span { position: absolute; inset: 0; background: var(--safelight); transform-origin: top; transform: scaleY(var(--p, 0)); }
.role { position: relative; display: grid; grid-template-columns: 11rem 1fr; gap: 1.5rem; }
.role::before {
  content: ''; position: absolute; left: calc(-1 * clamp(1.5rem, 4vw, 3rem) - 5px); top: .55rem;
  width: 12px; height: 12px; border-radius: 50%; background: var(--ground); box-shadow: inset 0 0 0 2px var(--ink-3);
}
.role::after {
  content: ''; position: absolute; left: calc(-1 * clamp(1.5rem, 4vw, 3rem) - 5px); top: .55rem;
  width: 12px; height: 12px; border-radius: 50%; background: var(--safelight);
  opacity: 0; transform: scale(.4); transition: opacity .4s ease, transform .5s var(--spring);
}
.role.is-in::after { opacity: 1; transform: scale(1.15); }
.role__when { color: var(--ink-3); font-size: .9375rem; font-variant-numeric: tabular-nums; padding-top: .3rem; }
.role__when i { font-style: normal; opacity: .6; }
.role h3 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
.role__org { color: var(--safelight-ink); font-weight: 500; margin: .3rem 0 .8rem; }
.role__body p:last-child { color: var(--ink-2); max-width: 60ch; text-wrap: pretty; }
.role--minor h3 { font-size: 1.25rem; }

/* Degrees: stepped sizes */
.degrees { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; align-items: stretch; }
.degree { justify-content: flex-start; gap: .6rem; }
.degree h3 { font-size: 1.4rem; }
.degree__when { color: var(--ink-3); font-size: .875rem; font-variant-numeric: tabular-nums; margin-bottom: 1.5rem; }
.degree__field { color: var(--safelight-ink); font-weight: 500; font-size: .9375rem; }
.degree p:last-child { color: var(--ink-2); font-size: .9688rem; margin-top: .5rem; text-wrap: pretty; }
.degree--now { background: var(--feature-bg); color: #fff; box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--feature-edge); }
.degree--now .degree__when { color: oklch(78% .02 250); }
.degree--now .degree__field { color: var(--ember); }
.degree--now p:last-child { color: oklch(90% .01 250); }
.degree--now::after { background: radial-gradient(24rem circle at var(--mx, 50%) var(--my, 50%), oklch(70% .17 40 / .35), transparent 60%); }

.toolkit { display: grid; grid-template-columns: 1.6fr 1fr; gap: 3rem; margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.toolkit h3 { font-size: 1rem; color: var(--ink-3); font-weight: 500; letter-spacing: 0; margin-bottom: 1rem; }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.tags li { font-weight: 500; font-size: .9688rem; padding: .5rem 1rem; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.tags small { color: var(--ink-3); font-weight: 400; margin-left: .35rem; font-size: .8125rem; }

/* ---------- Scouts: compact card, photo row appears once photos exist ---------- */
.scouts__card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(1.5rem, 5vw, 4rem);
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--card-edge);
}
.scouts__copy { display: grid; gap: 1.1rem; justify-items: start; }
.scouts .display { font-size: clamp(1.9rem, 3.6vw, 3rem); max-width: 16ch; }
.scouts .sec__sub { max-width: 46ch; }
.compass {
  width: clamp(8rem, 16vw, 11.5rem); aspect-ratio: 1;
  filter: drop-shadow(0 18px 24px color-mix(in oklch, var(--shade) min(100%, calc(24% * var(--shade-k))), transparent)) drop-shadow(0 4px 6px color-mix(in oklch, var(--shade) min(100%, calc(14% * var(--shade-k))), transparent));
}
.compass svg { width: 100%; height: 100%; overflow: visible; }
.scouts__photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.scouts__photos:not(:has(img)) { display: none; }
.scouts__photos li { aspect-ratio: 4 / 3; border-radius: 1rem; overflow: hidden; background: var(--ground-2); box-shadow: var(--shadow-soft); }
.scouts__photos img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Photography: drenched safelight ---------- */
.photo {
  margin-top: clamp(5rem, 11vw, 9rem);
  background: radial-gradient(70rem 40rem at 85% 0%, oklch(32% .12 30), transparent 70%), var(--ruby);
  color: var(--paper);
  border-radius: clamp(1.5rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem) 0 0;
}
.photo__inner {
  max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding: clamp(4rem, 9vw, 7rem) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 6rem);
}
.photo__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.photo__aside .display { max-width: 12ch; }
/* Sticky within the aside column: starts under the copy, rides down beside the photos, stops at the section's end */
.photo__cta { position: sticky; top: max(7rem, 42svh); margin-top: 1rem; }
.photo .sec__sub { color: oklch(86% .03 50); }
.photo .display em { color: var(--ember); }
/* Contact sheet: 3 x 2, sized so the whole set fits one screen; the middle column steps down */
.sheet {
  --step: clamp(1.5rem, 3vw, 2.75rem);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.75rem, 1.4vw, 1.125rem);
  align-self: center; width: 100%;
  max-width: calc((100svh - 13rem) * .8 * 1.5);   /* two rows of 4:5 tiles never taller than the viewport allows */
  justify-self: end; padding-bottom: var(--step);
}
.sheet li:nth-child(3n+2) { transform: translateY(var(--step)); }
.frame {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  aspect-ratio: 4 / 5; border-radius: 1rem;
  background: var(--ruby-2); color: var(--paper);
  box-shadow: inset 0 0 0 1px var(--ruby-line), 0 20px 40px -20px oklch(5% .05 27 / .8);
  transition: transform .7s var(--ease);
}
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform 1.2s var(--ease); }
.frame::before {
  content: ''; position: absolute; inset: 0; z-index: 0; transition: transform 1.2s var(--ease);
  background: var(--study);
}
.frame--event    { --study: radial-gradient(circle at 22% 30%, oklch(82% .14 75 / .9) 0 7%, transparent 8%), radial-gradient(circle at 70% 22%, oklch(72% .17 40 / .8) 0 10%, transparent 11%), radial-gradient(circle at 58% 66%, oklch(88% .1 90 / .7) 0 6%, transparent 7%), radial-gradient(circle at 30% 78%, oklch(66% .2 25 / .8) 0 12%, transparent 13%), linear-gradient(160deg, oklch(30% .1 30), oklch(18% .06 27)); }
.frame--portrait { --study: radial-gradient(60% 45% at 50% 34%, oklch(80% .08 60), transparent 70%), linear-gradient(180deg, oklch(36% .08 35), oklch(17% .05 27)); }
.frame--travel   { --study: linear-gradient(180deg, oklch(82% .09 70) 0 38%, oklch(62% .15 40) 38% 56%, oklch(32% .08 30) 56% 100%); }
.frame--landscape{ --study: radial-gradient(50% 30% at 50% 58%, oklch(88% .12 80), transparent 70%), linear-gradient(180deg, oklch(45% .12 35), oklch(24% .08 28) 60%, oklch(16% .05 27)); }
.frame--product  { --study: radial-gradient(40% 40% at 50% 52%, oklch(92% .04 70), oklch(60% .1 45) 55%, transparent 56%), linear-gradient(180deg, oklch(28% .08 28), oklch(18% .05 27)); }
.frame--sports   { --study: linear-gradient(150deg, oklch(48% .18 33), oklch(22% .09 27)); }
.frame::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, transparent 55%, oklch(8% .04 27 / .75));
}
.frame__label {
  position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1rem; z-index: 3;
  display: flex; justify-content: space-between; align-items: center;
  font: 600 1.125rem/1 var(--display); letter-spacing: -0.02em;
}
.frame__label::after { content: '\2197'; font-size: 1rem; opacity: 0; transform: translate(-4px, 4px); transition: opacity .3s ease, transform .5s var(--ease); }
.frame:hover { transform: translateY(-6px); }
.frame:hover::before, .frame:hover img { transform: scale(1.06); }
.frame:hover .frame__label::after { opacity: 1; transform: none; }

/* ---------- Contact ---------- */
.contact { padding-bottom: clamp(5rem, 10vw, 8rem); text-align: center; display: grid; justify-items: center; gap: 1.5rem; }
.contact .sec__sub { text-align: center; }
.mail {
  font: 600 clamp(1.5rem, 4.6vw, 3.25rem)/1.1 var(--display); letter-spacing: -0.035em;
  position: relative; padding: .35rem .25rem; margin-top: .5rem;
  transition: color .3s ease;
  word-break: break-word;
}
.mail::after {
  content: ''; position: absolute; left: .25rem; right: .25rem; bottom: 0; height: 3px; border-radius: 2px;
  background: var(--safelight); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease);
}
.mail:hover { color: var(--safelight-ink); }
.mail:hover::after { transform: scaleX(1); }
/* Autofocus lock: brackets close in on the address while it racks into focus */
.af { position: relative; display: inline-block; margin-top: .5rem; }
.af .mail { display: inline-block; margin-top: 0; }
.af__c {
  --s: 1.6rem; --i: -.5rem;
  position: absolute; width: 1.15rem; height: 1.15rem; pointer-events: none; opacity: 0;
  border: 2px solid var(--ink-3);
}
.af__c--tl { left: var(--i); top: var(--i); border-right: 0; border-bottom: 0; border-top-left-radius: 5px; --dx: calc(-1 * var(--s)); --dy: calc(-1 * var(--s)); }
.af__c--tr { right: var(--i); top: var(--i); border-left: 0; border-bottom: 0; border-top-right-radius: 5px; --dx: var(--s); --dy: calc(-1 * var(--s)); }
.af__c--bl { left: var(--i); bottom: var(--i); border-right: 0; border-top: 0; border-bottom-left-radius: 5px; --dx: calc(-1 * var(--s)); --dy: var(--s); }
.af__c--br { right: var(--i); bottom: var(--i); border-left: 0; border-top: 0; border-bottom-right-radius: 5px; --dx: var(--s); --dy: var(--s); }
.af__dot {
  position: absolute; right: calc(var(--i, -.5rem) - 1.4rem); top: 50%; width: .5rem; height: .5rem; margin-top: -.25rem;
  border-radius: 50%; background: var(--safelight); opacity: 0; pointer-events: none;
}
.af.is-focusing .mail { animation: af-hunt 1.1s cubic-bezier(.3, .7, .4, 1) both; }
.af.is-focusing .af__c { animation: af-lock 2.4s var(--ease) both; }
.af.is-focusing .af__dot { animation: af-dot 2.4s ease both; }
@keyframes af-hunt {
  0% { filter: blur(10px); opacity: .55; }
  38% { filter: blur(.5px); opacity: 1; }
  56% { filter: blur(3.5px); }
  100% { filter: blur(0); }
}
@keyframes af-lock {
  0% { opacity: 0; translate: var(--dx) var(--dy); border-color: var(--ink-3); }
  12% { opacity: 1; }
  40% { translate: 0 0; border-color: var(--ink-3); }
  46% { border-color: var(--safelight); opacity: 1; }
  52% { opacity: .15; } 58% { opacity: 1; } 64% { opacity: .15; } 70%, 86% { opacity: 1; border-color: var(--safelight); }
  100% { opacity: 0; translate: 0 0; border-color: var(--safelight); }
}
@keyframes af-dot { 0%, 44% { opacity: 0; scale: .2; } 50%, 86% { opacity: 1; scale: 1; } 100% { opacity: 0; } }

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

/* Copy the address: for visitors without a mail app set up */
.copy-mail {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 2.75rem; padding: 0 1.1rem; border: 0; border-radius: 999px;
  background: var(--ghost-bg); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line);
  font: 500 .9375rem/1 var(--body); cursor: pointer;
  transition: color .25s ease, background-color .25s ease;
}
.copy-mail:hover { color: var(--ink); background: var(--tint); }
.copy-mail:focus-visible { outline: 2px solid var(--safelight); outline-offset: 3px; }
.copy-mail svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.copy-mail.is-done { color: var(--safelight-ink); }

.contact__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2rem; margin-top: .5rem; }
.contact__links a { display: inline-flex; gap: .35rem; align-items: center; color: var(--ink-2); font-weight: 500; border-bottom: 1px solid var(--line); padding-bottom: .15rem; transition: color .25s ease, border-color .25s ease; }
.contact__links a:hover { color: var(--ink); border-color: var(--ink); }
.contact__also { color: var(--ink-3); font-size: .9375rem; margin-top: 1.5rem; }

.foot {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1.5rem var(--gutter) max(5rem, calc(env(safe-area-inset-bottom) + 4rem)); max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto;
  color: var(--ink-3); font-size: .875rem; border-top: 1px solid var(--line);
  align-items: center;
}
.foot__link {
  padding: .5rem 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .25em;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.foot__link:hover { color: var(--ink); text-decoration-color: currentColor; }
.foot__link:focus-visible { outline: 2px solid var(--safelight); outline-offset: 2px; border-radius: 4px; }

/* ---------- Analytics consent ----------
   A quiet card in the nav's frosted material, bottom-left so it never covers the f-stop readout. */
.consent {
  position: fixed; z-index: 60;
  left: max(clamp(.75rem, 2vw, 1.5rem), env(safe-area-inset-left)); bottom: max(clamp(.75rem, 2vw, 1.5rem), env(safe-area-inset-bottom));
  width: min(23rem, calc(100vw - 1.5rem));
  padding: 1.1rem 1.15rem 1.15rem; border-radius: 1.35rem;
  background: var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 0 0 1px var(--glass-edge), 0 0 0 1px var(--tint-2), 0 24px 50px -16px color-mix(in oklch, var(--shade) min(100%, calc(35% * var(--shade-k))), transparent);
  opacity: 0; transform: translateY(.75rem);
  transition: opacity .35s ease, transform .5s var(--ease);
}
.consent.is-in { opacity: 1; transform: none; }
.consent[hidden] { display: none; }
.consent__title { font-size: 1rem; letter-spacing: -0.01em; margin-bottom: .35rem; }
.consent__text { color: var(--ink-2); font-size: .9375rem; line-height: 1.45; text-wrap: pretty; }
.consent__actions { display: flex; gap: .5rem; margin-top: .9rem; }
.consent__btn { flex: 1; justify-content: center; }
html.has-consent .fstop { opacity: 0; pointer-events: none; }

/* ---------- Night details ---------- */
:root[data-theme="dark"] .fstop { box-shadow: inset 0 0 0 1px oklch(100% 0 0 / .1), 0 10px 30px -10px oklch(0% 0 0 / .6); }
:root[data-theme="dark"] .hero__lens { filter: drop-shadow(0 40px 60px oklch(0% 0 0 / .55)) drop-shadow(0 0 70px oklch(62% .16 45 / .16)); }
:root[data-theme="dark"] .pipe__src-card { stroke: oklch(100% 0 0 / .14); stroke-width: 1; }
:root[data-theme="dark"] .photo { box-shadow: 0 -1px 0 oklch(100% 0 0 / .06); }

/* ---------- Reveal motion ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .line__in { transform: translateY(105%); transition: transform 1.3s var(--ease); transition-delay: var(--d, 0s); }
.js .is-ready .line__in, .js .line__in.is-in { transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 62rem) {
  .nav__links { display: none; }
  .burger { display: block; }
  .hero { grid-template-columns: 1fr; padding-top: 6.5rem; text-align: left; }
  .hero__lens { justify-self: center; width: min(78vw, 26rem); order: -1; margin-bottom: -1rem; }
  .hero__scroll { display: none; }
  .projects, .degrees { grid-template-columns: 1fr; }
  .sec__head--split { grid-template-columns: 1fr; }
  .vr { justify-self: center; width: min(100%, 26rem); }
  .photo__inner { grid-template-columns: 1fr; }
  .photo__cta { position: static; margin-top: .25rem; }
  .sheet { max-width: none; justify-self: stretch; }
  .toolkit { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 44rem) {
  body { font-size: 1rem; }
  .pub { grid-template-columns: 1fr; gap: .75rem; }
  .pub__link { justify-self: start; }
  .pub__links { justify-self: start; justify-content: flex-start; }
  .role { grid-template-columns: 1fr; gap: .35rem; }
  .sheet { grid-template-columns: repeat(2, 1fr); --step: 2rem; }
  .sheet li:nth-child(3n+2) { transform: none; }
  .sheet li:nth-child(even) { transform: translateY(var(--step)); }
  .scouts__card { grid-template-columns: 1fr; }
  .compass { order: -1; width: 7rem; }
  .nav { padding-left: .9rem; gap: .5rem; }
  .nav__brand span { white-space: nowrap; }
  .nav .btn--small { display: none; }          /* the hero CTA and the menu's Contact cover it on phones */
  .fstop__num { display: none; }
  .fstop { padding: .4rem; }
}

/* ---------- Accessibility preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { transform: none; transition: opacity .4s ease; }
  .js .line__in { transform: none; transition: none; }
  .project:hover, .degree:hover, .frame:hover { transform: none; }
  .frame:hover::before, .frame:hover img { transform: none; }
  .btn:active { transform: none; }
  .dial__rot { transition: none; }
  .dial:hover .dial__rot, :root[data-theme="dark"] .dial:hover .dial__rot { rotate: none; }
  .dial.is-click svg { animation: none; }
  .consent { transition: opacity .2s ease; transform: none; }
  .menu, .nav.is-open .menu, .menu a, .nav.is-open .menu a, .burger span { transition: opacity .15s ease, visibility 0s; transform: none; }
  .nav.is-open .burger span:nth-child(1) { transform: rotate(45deg); }
  .nav.is-open .burger span:nth-child(3) { transform: rotate(-45deg); }
  .burger span:nth-child(1) { transform: translateY(-.34rem); }
  .burger span:nth-child(3) { transform: translate(-.173rem, .34rem) scaleX(.67); }
  .af.is-focusing .mail { animation: none; }
  .af.is-focusing .af__c { animation: af-still 2s ease both; }
  .af.is-focusing .af__dot { animation: none; }
}
@keyframes af-still { 0%, 80% { opacity: 1; border-color: var(--safelight); } 100% { opacity: 0; border-color: var(--safelight); } }
@media (prefers-reduced-transparency: reduce) {
  .nav, .menu, .consent { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .scrim { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .fstop { background: oklch(19% .028 258); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --ink-3: oklch(38% .02 258); --line: oklch(65% .01 250); }
  .nav { background: var(--card); box-shadow: 0 0 0 1.5px var(--ink); }
}