/* ============================================================
   Gökhan Arslan — Personal site
   Dark, prestigious, editorial. EN/TR bilingual.
   Typography: Apple SF system stack, fluid modular scale.

   Motion and materials follow Apple's interface guidance: response
   before anything else, springs over scripted curves, translucent
   layers that content scrolls under, and reduced-motion /
   reduced-transparency / high-contrast treated as first-class.
   ============================================================ */

:root {
  /* Tells the engine this is a dark UI: scrollbars, form controls and the
     browser's own surfaces render dark instead of being lightened. */
  color-scheme: dark;

  /* Palette */
  --bg: #0a0c10;
  --bg-alt: #0d1016;
  --panel: #11141b;
  --ink: #ece7db;
  --ink-dim: #aea99b;
  --muted: #838a99;
  --gold: #c6a15b;
  --gold-lift: #d9b76f;
  --gold-soft: rgba(198, 161, 91, 0.55);
  --gold-faint: rgba(198, 161, 91, 0.16);
  --hairline: rgba(236, 231, 219, 0.085);

  /* Materials. Weight encodes hierarchy: the scrim is heavier because it
     separates a whole region, chrome is lighter because it floats over
     content. --mat-edge is the bright top edge — light catching the
     material — that tells you the surface has thickness. */
  --mat-chrome: rgba(10, 12, 16, 0.60);
  --mat-scrim: rgba(9, 11, 15, 0.74);
  --mat-edge: rgba(236, 231, 219, 0.10);
  --mat-blur: 20px;

  /* Elevation. Bigger surfaces read as thicker, so they cast further. */
  --lift-sm: 0 2px 10px rgba(0, 0, 0, 0.26);
  --lift-md: 0 10px 30px rgba(0, 0, 0, 0.34);
  --lift-lg: 0 24px 64px rgba(0, 0, 0, 0.45);

  /* Type stacks */
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;

  /* Fluid type scale — 380px → 1280px viewport */
  --t-micro:  clamp(0.625rem, 0.60rem + 0.11vw, 0.6875rem);  /* 10 → 11   eyebrow */
  --t-tiny:   clamp(0.6875rem, 0.66rem + 0.13vw, 0.75rem);   /* 11 → 12   meta, dates */
  --t-small:  clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);  /* 13 → 14   captions */
  --t-body:   clamp(0.9375rem, 0.90rem + 0.17vw, 1.0625rem); /* 15 → 17   body */
  --t-lede:   clamp(1.0625rem, 1.00rem + 0.30vw, 1.25rem);   /* 17 → 20   lede */
  --t-h4:     clamp(1rem, 0.96rem + 0.20vw, 1.125rem);       /* 16 → 18 */
  --t-h3:     clamp(1.1875rem, 1.10rem + 0.40vw, 1.4375rem); /* 19 → 23 */
  --t-h2:     clamp(1.875rem, 1.45rem + 1.90vw, 2.875rem);   /* 30 → 46 */
  --t-h1:     clamp(2.875rem, 1.60rem + 5.60vw, 6.5rem);     /* 46 → 104 */

  /* Rhythm. Leading tracks size inversely — tight on display, open on body. */
  --lh-tight: 1.08;
  --lh-snug: 1.2;
  --lh-body: 1.65;
  --measure: 68ch;

  /* Motion.
     --spring is critically damped: it reaches the target quickly and settles
     without overshoot, which is what almost all UI wants. --spring-bounce
     adds the small overshoot that only earns its place when a gesture carried
     momentum into it. --exit is the exact inverse of --spring, so a
     reversible transition leaves along the path it arrived on. */
  --spring: cubic-bezier(0.32, 0.72, 0, 1);
  --spring-bounce: cubic-bezier(0.34, 1.32, 0.64, 1);
  --exit: cubic-bezier(1, 0, 0.68, 0.28);

  /* Response, not duration. Press feedback has to read as instant. */
  --d-press: 110ms;
  --d-base: 320ms;
  --d-slow: 420ms;

  /* In rem so a larger text setting scales the chrome with the type */
  --nav-h: 4.5rem;
  --tap: 2.75rem;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-optical-sizing: auto;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Sideways containment belongs here, not on body. Overflow set on body
   propagates to the viewport, and a viewport whose block axis is `visible`
   is not a scroll container — which silently switches off every
   scroll-driven animation on the page. `clip` contains the overflow without
   creating a scroll container, so the sticky card still sticks to the
   viewport. Nothing outside main needs clipping: the glows, the grain and
   the drawer are all fixed, and the carousel already scrolls in its own box. */
main { overflow-x: clip; }

/* We draw our own press states, so the platform's grey flash is noise.
   `manipulation` also drops the legacy ~300ms tap delay — the single
   cheapest latency win on touch. */
a, button, [role="button"], .btn, .edu-card, .skill {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Numerals align in columns wherever they carry data */
.t-date, .t-meta, .edu-date, .stat-num, .skill-num, .footer-inner {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

::selection { background: var(--gold); color: #0a0c10; }

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

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

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

.skip-link {
  position: absolute;
  left: 50%;
  top: 0.625rem;
  transform: translate(-50%, -200%);
  z-index: 200;
  background: var(--gold);
  color: #0a0c10;
  padding: 0.75rem 1.5rem;
  font-size: var(--t-tiny);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: transform var(--d-base) var(--spring);
}
.skip-link:focus { transform: translate(-50%, 0); }

.container {
  max-width: 71.25rem;
  margin: 0 auto;
  padding: 0 clamp(1.375rem, 3vw, 2rem);
}

section { scroll-margin-top: calc(var(--nav-h) + 0.75rem); }

/* ---------- Atmosphere ---------- */

/* The falloff is drawn into the gradient rather than added with a filter.
   A 90px blur over a 60vw layer is a full-viewport repaint the compositor
   has to redo, and it was only smoothing a ramp that was already smooth. */
.glow {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.glow-a {
  width: 60vw; height: 60vw;
  top: -30vw; right: -18vw;
  background: radial-gradient(circle,
    rgba(198,161,91,0.10) 0%,
    rgba(198,161,91,0.075) 26%,
    rgba(198,161,91,0.035) 46%,
    transparent 70%);
}
.glow-b {
  width: 50vw; height: 50vw;
  bottom: -25vw; left: -15vw;
  background: radial-gradient(circle,
    rgba(64,84,128,0.12) 0%,
    rgba(64,84,128,0.09) 26%,
    rgba(64,84,128,0.04) 46%,
    transparent 70%);
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  contain: layout paint;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

main, .nav, .footer { position: relative; z-index: 2; }

/* ---------- Scroll progress ---------- */

.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold));
  z-index: 110;
  pointer-events: none;
}

/* Where the engine can read the scroll position itself, it drives the bar —
   it runs off the main thread and main.js stops touching it on every frame.
   Elsewhere the script keeps setting the transform. */
@supports (animation-timeline: scroll()) {
  .progress {
    animation: progress-grow linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes progress-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* Must sit above the drawer, or the close button becomes unreachable */
  z-index: 106;
  transition: background var(--d-slow) var(--spring);
}
.nav.scrolled {
  background: var(--mat-chrome);
  -webkit-backdrop-filter: blur(var(--mat-blur, 20px)) saturate(180%);
  backdrop-filter: blur(var(--mat-blur, 20px)) saturate(180%);
  box-shadow: inset 0 1px 0 var(--mat-edge);
}

/* A scroll edge effect, not a rule. Content meeting floating chrome
   should dissolve into it rather than hit a drawn line. */
.nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 1.5rem;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to bottom, rgba(10, 12, 16, 0.55), transparent);
  transition: opacity var(--d-slow) var(--spring);
}
.nav.scrolled::after { opacity: 1; }

.nav-inner {
  max-width: 77.5rem;
  margin: 0 auto;
  padding: 0 clamp(1.375rem, 3vw, 2rem);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.monogram {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink);
  white-space: nowrap;
  transition: transform var(--d-press) ease-out;
}
.monogram span { color: var(--gold); }
.monogram:active { transform: scale(0.94); }

.nav-links { display: flex; gap: clamp(1.25rem, 2.6vw, 2.125rem); }
.nav-links a {
  font-size: var(--t-tiny);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  position: relative;
  padding: 0.375rem 0;
  transition: color var(--d-base) var(--spring), opacity var(--d-press) ease-out;
  white-space: nowrap;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--d-base) var(--spring);
}
.nav-links a[aria-current] { color: var(--ink); }
.nav-links a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.nav-links a:active { opacity: 0.55; }

@media (hover: hover) {
  .nav-links a:hover { color: var(--ink); }
  .nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
}

.nav-right { display: flex; align-items: center; gap: 0.75rem; }

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  font-size: var(--t-tiny);
  letter-spacing: 0.1em;
}
/* Was a ~14px-wide target. A language switch is a primary control on a
   bilingual site — it gets a real one. */
.lang-toggle button {
  background: none;
  border: none;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  min-width: var(--tap);
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--d-base) var(--spring), transform var(--d-press) ease-out;
}
.lang-toggle button[aria-pressed="true"] { color: var(--gold); }
.lang-toggle button:active { transform: scale(0.9); }
.lang-sep { color: rgba(236, 231, 219, 0.25); }

@media (hover: hover) {
  .lang-toggle button:hover { color: var(--ink); }
}

/* Menu button — hidden on desktop */
.menu-btn {
  display: none;
  width: var(--tap); height: var(--tap);
  margin-right: -0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  transition: transform var(--d-press) ease-out;
}
.menu-btn:active { transform: scale(0.9); }
.menu-btn span {
  position: absolute;
  left: 50%;
  margin-left: -0.6875rem;
  width: 1.375rem; height: 1.5px;
  background: var(--ink);
  transition: transform var(--d-base) var(--spring), opacity 0.15s var(--spring);
}
.menu-btn span:nth-child(1) { top: calc(50% - 0.4375rem); }
.menu-btn span:nth-child(2) { top: 50%; }
.menu-btn span:nth-child(3) { top: calc(50% + 0.4375rem); }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(0.4375rem) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-0.4375rem) rotate(-45deg); }

/* Mobile drawer.
   A real material: translucent enough that the page reads through it, and
   it *materializes* — blur and scale resolve together — rather than simply
   fading in. It leaves along the inverse curve it came in on. */
.menu {
  position: fixed;
  inset: 0;
  z-index: 105;
  background: var(--mat-scrim);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  padding: var(--nav-h) clamp(1.375rem, 8vw, 3.75rem) 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.04);
  transition:
    opacity var(--d-base) var(--exit),
    transform var(--d-base) var(--exit),
    backdrop-filter var(--d-base) var(--exit),
    -webkit-backdrop-filter var(--d-base) var(--exit),
    visibility var(--d-base);
}
.menu.open {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  transition:
    opacity var(--d-slow) var(--spring),
    transform var(--d-slow) var(--spring),
    backdrop-filter var(--d-slow) var(--spring),
    -webkit-backdrop-filter var(--d-slow) var(--spring),
    visibility var(--d-slow);
}

.menu a {
  font-family: var(--display);
  font-size: clamp(1.75rem, 8vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  /* Tight leading, because this is display type */
  line-height: 1.22;
  padding: 0.25rem 0;
  color: var(--ink-dim);
  opacity: 0;
  transform: translateY(0.75rem);
  transition: color var(--d-base) var(--spring),
              opacity var(--d-base) var(--spring),
              transform var(--d-base) var(--spring);
}
.menu.open a { opacity: 1; transform: none; }
.menu.open a:nth-child(1) { transition-delay: 0.04s; }
.menu.open a:nth-child(2) { transition-delay: 0.08s; }
.menu.open a:nth-child(3) { transition-delay: 0.12s; }
.menu.open a:nth-child(4) { transition-delay: 0.16s; }
.menu.open a:nth-child(5) { transition-delay: 0.20s; }
.menu.open a:nth-child(6) { transition-delay: 0.24s; }
.menu a[aria-current] { color: var(--gold); }
.menu a:active { color: var(--gold); opacity: 0.6; }

body.nav-open { overflow: hidden; }

/* ---------- Kicker ---------- */

.kicker {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.625rem;
}
.kicker .rule {
  display: inline-block;
  width: clamp(2rem, 5vw, 3.5rem);
  height: 1px;
  flex: none;
  background: linear-gradient(90deg, transparent, var(--gold-soft));
}
.kicker .rule:last-child {
  background: linear-gradient(90deg, var(--gold-soft), transparent);
}

/* ---------- Hero ---------- */

.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  padding: calc(var(--nav-h) + 3rem) 0 6rem;
}

.hero-watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: min(58vw, 620px);
  font-weight: 600;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(236, 231, 219, 0.045);
  user-select: none;
  pointer-events: none;
}

.hero-inner { display: flex; flex-direction: column; align-items: center; }
.hero-kicker { justify-content: center; margin-bottom: 2.125rem; }

.hero-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  /* Negative tracking, scaled with size — large type reads too loose at 0 */
  letter-spacing: clamp(-0.025em, -0.02em - 0.01vw, -0.015em);
  text-wrap: balance;
  margin-bottom: 1.75rem;
  background: linear-gradient(180deg, #f7f2e7 52%, #b5a98f);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.06em;
}

.hero-role {
  font-size: var(--t-tiny);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.75rem;
  text-wrap: balance;
}

.hero-lede {
  max-width: 34ch;
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--ink-dim);
  text-wrap: balance;
  margin-bottom: 2.75rem;
}

.hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0.9375rem 2.125rem;
  font-size: var(--t-tiny);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--d-base) var(--spring),
              color var(--d-base) var(--spring),
              border-color var(--d-base) var(--spring),
              box-shadow var(--d-base) var(--spring),
              transform var(--d-base) var(--spring);
}
.btn-solid { background: var(--gold); color: #0a0c10; }
.btn-ghost { border: 1px solid var(--gold-soft); color: var(--gold); }

/* Buttons don't inherit type styles the way anchors do */
button.btn {
  font-family: inherit;
  background: none;
  cursor: pointer;
}

/* Feedback lives on the press, and it's instant — waiting for the click
   to acknowledge a tap is what makes an interface feel dead. */
.btn:active {
  transform: scale(0.97);
  transition-duration: var(--d-press);
  transition-timing-function: ease-out;
}
.btn-solid:active { background: var(--gold-lift); }
.btn-ghost:active { background: var(--gold-faint); border-color: var(--gold); }

@media (hover: hover) {
  .btn-solid:hover {
    background: var(--gold-lift);
    box-shadow: 0 8px 32px rgba(198, 161, 91, 0.35);
    transform: translateY(-2px);
  }
  .btn-ghost:hover {
    border-color: var(--gold);
    background: var(--gold-faint);
    transform: translateY(-2px);
  }
  .btn-solid:active, .btn-ghost:active { transform: translateY(-1px) scale(0.97); }
}

.scroll-cue {
  position: absolute;
  bottom: 2.125rem;
  left: 50%;
  transform: translateX(-50%);
  width: var(--tap); height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--d-press) ease-out;
}
.scroll-cue::before {
  content: "";
  position: absolute;
  width: 1.625rem; height: 2.625rem;
  border: 1px solid rgba(236, 231, 219, 0.22);
  border-radius: 0.875rem;
}
.scroll-cue:active { opacity: 0.5; }
.scroll-cue span {
  position: absolute;
  top: calc(50% - 0.8125rem);
  width: 2px; height: 0.5rem;
  background: var(--gold);
  border-radius: 2px;
  animation: cue 2.2s infinite var(--spring);
}
@keyframes cue {
  0%, 100% { transform: translateY(0); opacity: 1; }
  55% { transform: translateY(0.75rem); opacity: 0; }
  56% { transform: translateY(0); opacity: 0; }
}

/* ---------- Stats ---------- */

.stats {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: rgba(17, 20, 27, 0.45);
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: clamp(2rem, 4vw, 2.875rem) clamp(0.875rem, 2vw, 1.5rem); text-align: center; }
.stat + .stat { border-left: 1px solid var(--hairline); }
.stat-num {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.2vw, 2.375rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--gold);
  line-height: 1.1;
  margin-bottom: 0.625rem;
}
.stat-label {
  display: block;
  font-size: var(--t-micro);
  font-weight: 500;
  /* Small type wants a touch of positive tracking to stay legible */
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--muted);
  text-wrap: balance;
}

/* ---------- Sections ---------- */

.section { padding: clamp(5rem, 10vw, 8.125rem) 0; }
.section-alt {
  background: var(--bg-alt);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.section-title,
.profile-text h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.625rem);
}
.section-title em,
.profile-text h2 em,
.contact-title em {
  font-style: italic;
  color: var(--gold);
}

/* ---------- Profile ---------- */

.profile-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.85fr;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: start;
}

.profile-text p {
  color: var(--ink-dim);
  max-width: var(--measure);
  text-wrap: pretty;
  margin-bottom: 1.35em;
}
.profile-text p:last-child { margin-bottom: 0; }

.facts-card {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--gold);
  box-shadow: var(--lift-md);
  padding: clamp(1.75rem, 3vw, 2.375rem) clamp(1.5rem, 2.8vw, 2.25rem);
  position: sticky;
  top: calc(var(--nav-h) + 1.75rem);
}
.facts-card h3 {
  font-family: var(--display);
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 1.375rem;
}
.facts-card dl div {
  padding: 0.8125rem 0;
  border-bottom: 1px solid var(--hairline);
}
.facts-card dl div:last-child { border-bottom: none; }
.facts-card dt {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.25rem;
}
.facts-card dd {
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--ink-dim);
  overflow-wrap: anywhere;
}
.facts-card dd a {
  color: var(--ink);
  border-bottom: 1px solid var(--gold-soft);
  transition: color var(--d-base) var(--spring), border-color var(--d-base) var(--spring), opacity var(--d-press) ease-out;
}
.facts-card dd a:active { color: var(--gold); opacity: 0.6; }
@media (hover: hover) {
  .facts-card dd a:hover { color: var(--gold); border-color: var(--gold); }
}

/* ---------- Featured case study ---------- */

.quote-card {
  position: relative;
  max-width: 56.25rem;
  margin: 0 auto;
  padding: clamp(2.25rem, 5vw, 3.75rem) clamp(1.625rem, 4.5vw, 3.75rem) clamp(1.875rem, 4vw, 2.875rem);
  background: linear-gradient(150deg, rgba(198, 161, 91, 0.09), var(--panel) 58%);
  border: 1px solid rgba(198, 161, 91, 0.28);
  /* A large surface, so it casts further than the small chips do */
  box-shadow: var(--lift-lg);
}

.quote-mark {
  position: absolute;
  top: clamp(-0.125rem, 0.5vw, 0.375rem);
  left: clamp(1rem, 3vw, 2.125rem);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(5rem, 12vw, 9.375rem);
  line-height: 1;
  color: var(--gold);
  opacity: 0.18;
  user-select: none;
  pointer-events: none;
}

.quote-card blockquote p {
  position: relative;
  font-family: var(--display);
  font-size: clamp(1.1875rem, 0.95rem + 1.15vw, 1.75rem);
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: -0.018em;
  text-wrap: pretty;
  color: var(--ink);
  margin-bottom: 1.625rem;
}

.quote-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  padding-bottom: clamp(1.75rem, 3.5vw, 2.375rem);
  border-bottom: 1px solid var(--hairline);
}
.quote-who {
  font-size: var(--t-tiny);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.quote-src {
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--muted);
  max-width: 62ch;
  text-wrap: pretty;
}

.quote-metrics {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  padding: clamp(1.75rem, 3.5vw, 2.375rem) 0;
}
.quote-metrics li { display: flex; flex-direction: column; gap: 0.4375rem; }
.qm-num {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.qm-label {
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.13em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--muted);
  text-wrap: balance;
}

.quote-link,
.fc-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--tap);
  font-size: var(--t-tiny);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color var(--d-base) var(--spring), opacity var(--d-press) ease-out;
}
.quote-arrow { transition: transform var(--d-base) var(--spring); }

/* The arrow leads in the direction the tap is taking you */
.quote-link:active,
.fc-link:active { color: var(--gold); opacity: 0.7; }
.quote-link:active .quote-arrow,
.fc-link:active .quote-arrow { transform: translateX(0.25rem); }

@media (hover: hover) {
  .quote-link:hover, .fc-link:hover { color: var(--gold); }
  .quote-link:hover .quote-arrow, .fc-link:hover .quote-arrow { transform: translateX(0.3125rem); }
}

/* Stacked one per row, the metrics cost most of the card's height on a
   phone. Laid out as number-then-label they read the same in a third of it
   — and dissolving the list items into the grid lets the number column size
   itself to the widest figure, so every label starts on the same line. A
   fixed width would misalign the moment a figure grew. */
@media (max-width: 680px) {
  .quote-metrics {
    grid-template-columns: auto 1fr;
    gap: 0.875rem;
    align-items: baseline;
  }
  .quote-metrics li { display: contents; }
  .qm-label { text-wrap: pretty; }
}

/* ---------- Featured carousel ---------- */

.carousel {
  position: relative;
  max-width: 56.25rem;
  margin: 0 auto;
}

/* Native overscroll already gives 1:1 tracking, momentum projection and
   rubber-banding at the ends — all of it interruptible. Re-implementing
   that in JS would only be a worse copy of it. */
.carousel-track {
  display: flex;
  overflow-x: auto;
  /* The track carries an explicit height (see main.js), so a taller slide
     mid-transition must not turn it into a vertical scroller. */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }

/* Slides keep their own height and the track follows the swipe 1:1 (see
   main.js), so no slide is padded out to the tallest one. Without JS this
   falls back to the flex container taking the tallest slide's height. */
.carousel-track { align-items: flex-start; }
.carousel-track > * {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
}

.fc-card {
  padding: clamp(2rem, 4.5vw, 3.25rem) clamp(1.625rem, 4vw, 3rem);
  background: linear-gradient(150deg, rgba(198, 161, 91, 0.07), var(--panel) 58%);
  border: 1px solid rgba(198, 161, 91, 0.22);
  box-shadow: var(--lift-lg);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.fc-kicker {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.fc-headline {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.fc-body {
  color: var(--ink-dim);
  font-size: var(--t-small);
  line-height: 1.62;
  max-width: 62ch;
  text-wrap: pretty;
}
.fc-stats {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: auto;
  padding-top: 0.5rem;
}
.fc-stats li { display: flex; flex-direction: column; gap: 0.25rem; }
.fc-stat-num {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.fc-stat-label {
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 3vw, 2.125rem);
}
.carousel-btn {
  width: var(--tap); height: var(--tap);
  border-radius: 50%;
  border: 1px solid var(--gold-soft);
  background: none;
  color: var(--gold);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--d-base) var(--spring),
              background var(--d-base) var(--spring),
              transform var(--d-base) var(--spring);
}
.carousel-btn:active {
  transform: scale(0.9);
  background: var(--gold-faint);
  border-color: var(--gold);
  transition-duration: var(--d-press);
  transition-timing-function: ease-out;
}
@media (hover: hover) {
  .carousel-btn:hover {
    border-color: var(--gold);
    background: var(--gold-faint);
    transform: translateY(-2px);
  }
  .carousel-btn:active { transform: translateY(-1px) scale(0.9); }
}

.carousel-dots { display: flex; gap: 0.125rem; }
/* An 8px dot with hit padding around it — the target is what the finger
   needs, the dot is what the eye needs. */
.carousel-dot {
  width: 1.75rem; height: 1.75rem;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--d-press) ease-out;
}
.carousel-dot::before {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  border: 1px solid var(--gold-soft);
  background: transparent;
  transition: background var(--d-base) var(--spring),
              border-color var(--d-base) var(--spring),
              transform var(--d-base) var(--spring-bounce);
}
.carousel-dot.active::before {
  background: var(--gold);
  border-color: var(--gold);
  transform: scale(1.25);
}
.carousel-dot:active { transform: scale(0.85); }
@media (hover: hover) {
  .carousel-dot:hover::before { border-color: var(--gold); }
}

@media (max-width: 680px) {
  .fc-stats { gap: 1.375rem; }
  /* Without a basis each figure claims its label's full unwrapped width,
     so two of them wrap onto separate rows and stretch the card. Equal
     columns let the labels wrap instead and keep the pair on one line. */
  .fc-stats li { flex: 1 1 0; min-width: 0; }
}

/* ---------- Timeline ---------- */

.timeline {
  margin-top: 1.5rem;
  position: relative;
  padding-left: clamp(1.75rem, 4vw, 2.5rem);
}
.timeline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem; bottom: 0.5rem;
  width: 1px;
  background: linear-gradient(180deg, var(--gold-soft), rgba(198,161,91,0.08));
}

.t-entry { position: relative; padding-bottom: clamp(3.25rem, 6vw, 4.625rem); }
.t-entry:last-child { padding-bottom: 0; }
.t-entry::before {
  content: "";
  position: absolute;
  left: calc(clamp(1.75rem, 4vw, 2.5rem) * -1 - 4.5px);
  top: 0.75rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--bg-alt);
  border: 1.5px solid var(--gold);
  box-shadow: 0 0 0 5px rgba(198, 161, 91, 0.08);
}

.t-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.875rem;
}
.t-company { line-height: 0; }
.t-logo {
  display: block;
  height: var(--logo-h, 1.75rem);
  width: auto;
  filter: brightness(0) invert(0.92);
  opacity: 0.92;
}
.t-meta {
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.t-note {
  font-size: var(--t-small);
  font-style: italic;
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 58ch;
  text-wrap: pretty;
  margin-bottom: 1.625rem;
}

.t-role { margin-bottom: 1.875rem; }
.t-role:last-child { margin-bottom: 0; }

.t-role-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.375rem 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 0.625rem;
}
.t-role-head h4 {
  font-size: var(--t-tiny);
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--gold);
}
.t-date {
  font-size: var(--t-tiny);
  color: var(--muted);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.t-entry ul { list-style: none; }
.t-entry li {
  position: relative;
  padding-left: 1.625rem;
  color: var(--ink-dim);
  font-size: var(--t-small);
  line-height: 1.62;
  max-width: 74ch;
  text-wrap: pretty;
  margin-bottom: 0.625rem;
}
.t-entry li:last-child { margin-bottom: 0; }
.t-entry li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 0.75rem; height: 1px;
  background: var(--gold-soft);
}

/* ---------- Education ---------- */

.edu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.625rem);
  margin-top: 1.25rem;
}

.edu-card {
  background: var(--panel);
  border: 1px solid var(--hairline);
  box-shadow: var(--lift-sm);
  padding: clamp(1.75rem, 3.4vw, 2.5rem) clamp(1.5rem, 3vw, 2.375rem);
  position: relative;
  transition: transform var(--d-base) var(--spring),
              border-color var(--d-base) var(--spring),
              box-shadow var(--d-base) var(--spring),
              background var(--d-base) var(--spring);
}
.edu-card:active {
  transform: scale(0.985);
  border-color: rgba(198, 161, 91, 0.45);
  transition-duration: var(--d-press);
  transition-timing-function: ease-out;
}
@media (hover: hover) {
  .edu-card:hover {
    transform: translateY(-4px);
    border-color: rgba(198, 161, 91, 0.45);
    background: linear-gradient(135deg, rgba(198,161,91,0.10), var(--panel) 55%);
    box-shadow: var(--lift-md);
  }
  .edu-card:active { transform: translateY(-2px) scale(0.985); }
}
.edu-crest {
  display: flex;
  align-items: center;
  height: 3.25rem;
  margin-bottom: 1.375rem;
}
.edu-crest img {
  max-height: 100%;
  width: auto;
  filter: brightness(0) invert(0.92);
  opacity: 0.9;
}
.edu-crest.wide img { max-height: 1.9375rem; }
.edu-crest.raw img { filter: grayscale(1) invert(0.92) brightness(1.08); opacity: 0.95; }

.edu-tag {
  display: inline-block;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.875rem;
}
.edu-card h3 {
  font-family: var(--display);
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.25;
  text-wrap: balance;
  margin-bottom: 0.375rem;
}
.edu-card p {
  font-size: var(--t-small);
  color: var(--ink-dim);
  margin-bottom: 1rem;
}
.edu-date {
  font-size: var(--t-tiny);
  letter-spacing: 0.12em;
  color: var(--muted);
}

/* ---------- Expertise ---------- */

.skills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.625rem);
  margin-top: 1.25rem;
}

.skill {
  border: 1px solid var(--hairline);
  background: rgba(17, 20, 27, 0.55);
  padding: clamp(1.75rem, 3vw, 2.25rem) clamp(1.5rem, 2.6vw, 2rem);
  transition: transform var(--d-base) var(--spring),
              border-color var(--d-base) var(--spring),
              background var(--d-base) var(--spring),
              box-shadow var(--d-base) var(--spring);
}
.skill:active {
  transform: scale(0.985);
  border-color: rgba(198, 161, 91, 0.4);
  transition-duration: var(--d-press);
  transition-timing-function: ease-out;
}
@media (hover: hover) {
  .skill:hover {
    transform: translateY(-4px);
    border-color: rgba(198, 161, 91, 0.4);
    background: var(--panel);
    box-shadow: var(--lift-sm);
  }
  .skill:active { transform: translateY(-2px) scale(0.985); }
}
.skill-num {
  display: block;
  font-family: var(--display);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin-bottom: 1rem;
}
.skill h3 {
  font-size: var(--t-h4);
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1.35;
  text-wrap: balance;
  margin-bottom: 0.625rem;
}
.skill p {
  font-size: var(--t-small);
  color: var(--muted);
  line-height: 1.62;
  text-wrap: pretty;
}

/* ---------- Contact ---------- */

.contact {
  padding: clamp(6rem, 12vw, 10rem) 0 clamp(5.625rem, 11vw, 9.375rem);
  border-top: 1px solid var(--hairline);
}
.contact-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.contact .kicker { justify-content: center; }

.contact-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.125rem, 1.30rem + 3.6vw, 3.75rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin-bottom: 1.5rem;
}
.contact-sub {
  max-width: 46ch;
  color: var(--ink-dim);
  text-wrap: pretty;
  margin-bottom: 2.625rem;
}
.contact-mail {
  font-family: var(--display);
  font-size: clamp(1.0625rem, 0.85rem + 1.0vw, 1.625rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-bottom: 2.375rem;
  transition: color var(--d-base) var(--spring), transform var(--d-press) ease-out;
  overflow-wrap: anywhere;
}
.contact-mail::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0.3125rem;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0.35);
  opacity: 0.5;
  transition: transform var(--d-slow) var(--spring), opacity var(--d-base) var(--spring);
}
.contact-mail:active { color: var(--gold); transform: scale(0.98); }
.contact-mail:active::after { transform: scaleX(1); opacity: 1; }
@media (hover: hover) {
  .contact-mail:hover { color: var(--gold); }
  .contact-mail:hover::after { transform: scaleX(1); opacity: 1; }
}

/* ---------- Footer ---------- */

.footer { border-top: 1px solid var(--hairline); padding: 1.875rem 0; }
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem 1rem;
  flex-wrap: wrap;
  font-size: var(--t-tiny);
  color: var(--muted);
  letter-spacing: 0.03em;
}
.footer-loc {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: var(--t-micro);
}

/* ---------- Back to top ---------- */

.back-to-top {
  position: fixed;
  right: clamp(1.125rem, 3vw, 2rem);
  bottom: clamp(1.125rem, 3vw, 2rem);
  z-index: 90;
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  border: 1px solid var(--gold-soft);
  background: var(--mat-chrome);
  -webkit-backdrop-filter: blur(var(--mat-blur, 20px)) saturate(180%);
  backdrop-filter: blur(var(--mat-blur, 20px)) saturate(180%);
  box-shadow: var(--lift-md), inset 0 1px 0 var(--mat-edge);
  color: var(--gold);
  font-size: 1.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem) scale(0.92);
  transition: opacity var(--d-base) var(--exit),
              transform var(--d-base) var(--exit),
              visibility var(--d-base),
              border-color var(--d-base) var(--spring),
              background var(--d-base) var(--spring);
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--d-slow) var(--spring),
              transform var(--d-slow) var(--spring-bounce),
              visibility var(--d-slow),
              border-color var(--d-base) var(--spring),
              background var(--d-base) var(--spring);
}
.back-to-top:active {
  transform: scale(0.9);
  border-color: var(--gold);
  transition-duration: var(--d-press);
  transition-timing-function: ease-out;
}
@media (hover: hover) {
  .back-to-top:hover {
    border-color: var(--gold);
    background: rgba(10, 12, 16, 0.86);
  }
  .back-to-top:hover:not(:active) { transform: translateY(-2px); }
}
body.nav-open .back-to-top { display: none; }

/* ---------- Reveal animations ---------- */

@keyframes reveal-in {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: none; }
}

/* The reveal is a scroll position, not an event, so where the engine can
   express it as one it does: no scroll listener, no per-frame rect reads,
   and nothing can be left stranded at opacity 0 by a jump the script
   didn't observe. The range is measured in viewport height rather than a
   percentage of the element, so a tall entry and a one-line kicker resolve
   over the same amount of scrolling. */
@supports (animation-timeline: view()) {
  @media not (prefers-reduced-motion: reduce) {
    .reveal {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 24vh;
    }

    /* The hero is already on screen when the page loads — it has an
       entrance, not a scroll link. The stagger is short enough to read as
       one gesture. */
    .hero .reveal {
      animation: reveal-in var(--d-slow) var(--spring) both;
      animation-timeline: auto;
    }
    .hero .hero-kicker { animation-delay: 0ms; }
    .hero .hero-name   { animation-delay: 70ms; }
    .hero .hero-role   { animation-delay: 140ms; }
    .hero .hero-lede   { animation-delay: 210ms; }
    .hero .hero-cta    { animation-delay: 280ms; }

    /* The rail draws itself at reading pace instead of arriving whole */
    .timeline::before {
      transform-origin: top;
      animation: rail-draw linear both;
      animation-timeline: view();
      animation-range: cover 8% cover 62%;
    }
    @keyframes rail-draw {
      from { transform: scaleY(0); }
      to   { transform: scaleY(1); }
    }
  }
}

/* Fallback path: the script hides these only once it is running, so a
   script failure can never leave content permanently invisible. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity var(--d-slow) var(--spring), transform var(--d-slow) var(--spring);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-reveal .reveal.in { opacity: 1; transform: none; }

/* ---------- Language change ---------- */

/* Switching language rewrites every string on the page at once. Handing the
   swap to the engine turns that hard cut into a dissolve, and the name —
   the one thing that doesn't change — is named so it holds still while the
   rest of the page resolves around it. */
::view-transition-old(root) { animation: vt-out 140ms var(--exit) both; }
::view-transition-new(root) { animation: vt-in var(--d-base) var(--spring) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

.hero-name { view-transition-name: hero-name; }

/* ---------- Accessibility preferences ---------- */

/* Reduced motion is not "no feedback" — it's the same information without
   the vestibular cost. Travel and overshoot go; opacity and colour, which
   are what actually carry the meaning, stay. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .js-reveal .reveal {
    transform: none !important;
    transition: opacity 200ms ease !important;
  }
  .js-reveal .reveal.in { opacity: 1; }

  .scroll-cue span { animation: none; }
  .carousel-track { scroll-behavior: auto; }

  .menu {
    transform: none !important;
    transition: opacity 200ms ease, visibility 200ms !important;
  }
  .menu a { opacity: 1; transform: none; transition: color 200ms ease; }

  .back-to-top { transform: none !important; }
  .back-to-top.visible { transform: none !important; }

  /* Press feedback survives — it's the one animation that reduces
     confusion rather than causing it — but without the travel. */
  .btn:active, .edu-card:active, .skill:active, .carousel-btn:active,
  .carousel-dot:active, .lang-toggle button:active, .menu-btn:active,
  .monogram:active, .back-to-top:active, .contact-mail:active {
    transform: none;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Frostier and solid instead of glass, so nothing depends on what's behind */
@media (prefers-reduced-transparency: reduce) {
  .nav.scrolled {
    background: #0a0c10;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 1px 0 var(--hairline);
  }
  .nav::after { display: none; }
  .menu, .menu.open {
    background: #0a0c10;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .back-to-top {
    background: #11141b;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .glow, .grain { display: none; }
  .skill { background: var(--panel); }
  .stats { background: var(--panel); }
}

/* Near-solid surfaces with defined borders, and no colour carried by a
   gradient the user may not be able to resolve. */
@media (prefers-contrast: more) {
  :root {
    --ink: #fffdf7;
    --ink-dim: #ded8ca;
    --muted: #b6bcc9;
    --gold: #e0bd76;
    --gold-soft: rgba(224, 189, 118, 0.85);
    --hairline: rgba(236, 231, 219, 0.28);
  }
  .hero-name {
    background: none;
    -webkit-text-fill-color: var(--ink);
    color: var(--ink);
  }
  .hero-watermark { display: none; }
  .glow, .grain { display: none; }
  .nav.scrolled {
    background: #05070a;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .menu, .menu.open {
    background: #05070a;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .facts-card, .edu-card, .skill, .quote-card, .fc-card, .back-to-top {
    border-color: var(--gold-soft);
    background: #0d1016;
  }
  .quote-mark { opacity: 0.4; }
  :focus-visible { outline-width: 3px; }
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .profile-grid { grid-template-columns: 1fr; }
  .facts-card { position: static; }
  .skills-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: none; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--hairline); }
}

@media (max-width: 780px) {
  :root { --nav-h: 4rem; }
  .nav-links { display: none; }
  .menu-btn { display: block; }
  .skills-grid, .edu-grid { grid-template-columns: 1fr; }
  .t-logo { height: calc(var(--logo-h, 1.75rem) * 0.82); }
  .t-head { gap: 0.5rem 1rem; }
  .t-meta { font-size: 0.625rem; letter-spacing: 0.12em; }
  .edu-crest { height: 2.75rem; margin-bottom: 1.125rem; }
  .edu-crest.wide img { max-height: 1.6875rem; }
  .footer-inner { justify-content: center; text-align: center; }
}

@media (max-width: 420px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat + .stat { border-left: none; border-top: 1px solid var(--hairline); }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: none; }
  .hero-cta { width: 100%; flex-direction: column; }
  .btn { width: 100%; text-align: center; }
}

/* Header block that only exists in the printed/PDF CV */
.print-head { display: none; }

/* ---------- Print (recruiters print CVs) ---------- */

@media print {
  @page { margin: 12mm 13mm; }

  /* Keep the gold accents; browsers drop backgrounds/colors by default */
  *, *::before, *::after {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Chrome, decoration, navigation and web-only calls to action. The
     contact section goes too — its details move into the header block. */
  .glow, .grain, .nav, .progress, .menu, .scroll-cue, .hero-watermark,
  .hero-kicker, .hero-lede, .hero-cta, .skip-link, .back-to-top,
  .carousel-controls, .quote-mark, .quote-link, .fc-link,
  .fc-body, .fc-stats, .facts-card, .contact, .footer,
  .kicker .rule { display: none !important; }

  html { scroll-behavior: auto; }
  body {
    background: #fff;
    color: #111;
    font-size: 9.5pt;
    line-height: 1.45;
  }
  /* Nothing needs containing on paper, and a clipping box around the whole
     document is not something to hand to a paginator. */
  main { overflow: visible; }
  .container { max-width: none; padding: 0; }
  .js-reveal .reveal { opacity: 1 !important; transform: none !important; }
  a { color: #111; text-decoration: none; }

  /* ---- Header ---- */
  .hero {
    display: block;
    min-height: 0;
    padding: 0 0 6pt;
    text-align: left;
    border-bottom: 0.5pt solid #ccc;
  }
  .hero-inner { display: block; }
  .hero-name {
    background: none;
    -webkit-text-fill-color: #111;
    color: #111;
    font-size: 21pt;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 1pt;
    padding: 0;
  }
  .hero-role {
    font-size: 8pt;
    letter-spacing: 0.13em;
    color: #7a5f2a;
    margin: 0 0 4pt;
  }
  .print-head { display: block; }
  .print-head p {
    font-size: 8pt;
    line-height: 1.4;
    color: #333;
    margin: 0;
  }
  .print-sep { color: #aaa; padding: 0 3pt; }

  /* ---- Shared section rhythm ---- */
  .section { padding: 9pt 0 0; }
  .section-alt { background: none; border: none; }
  .section-title, .profile-text h2 {
    font-size: 12.5pt;
    line-height: 1.2;
    margin: 0 0 4pt;
  }
  .section-title em, .profile-text h2 em, .contact-title em { color: #7a5f2a; }
  .kicker {
    font-size: 6.5pt;
    letter-spacing: 0.2em;
    color: #7a5f2a;
    margin: 0 0 2pt;
  }

  /* ---- Credentials strip ---- */
  .stats { background: none; border: none; }
  .stats-grid {
    display: flex;
    gap: 16pt;
    padding: 5pt 0;
    border-top: 0.5pt solid #ddd;
    border-bottom: 0.5pt solid #ddd;
  }
  .stat { padding: 0; text-align: left; border: none !important; }
  .stat-num { font-size: 11pt; color: #7a5f2a; margin: 0; line-height: 1.1; }
  .stat-label { font-size: 6.5pt; letter-spacing: 0.08em; color: #555; }

  /* ---- Summary ---- */
  .profile-grid { display: block; }
  .profile-text p {
    font-size: 9pt;
    color: #333;
    max-width: none;
    margin: 0 0 3.5pt;
  }

  /* ---- Featured: stack the carousel, drop the social counts ---- */
  .carousel { max-width: none; }
  .carousel-track { display: block; overflow: visible; }
  .carousel-track > * { width: auto; flex: none; break-inside: avoid; }
  .quote-card {
    background: none;
    border: 0.5pt solid #ddd;
    box-shadow: none;
    padding: 6pt 8pt;
    margin: 0 0 4pt;
  }
  .quote-card blockquote p {
    font-size: 9.5pt;
    line-height: 1.35;
    color: #111;
    margin: 0 0 3pt;
  }
  .quote-card figcaption { padding-bottom: 4pt; gap: 1pt; }
  .quote-who { font-size: 7pt; color: #7a5f2a; }
  .quote-src { font-size: 7.5pt; color: #555; max-width: none; }
  .quote-metrics { padding: 4pt 0 0; gap: 12pt; grid-template-columns: repeat(3, auto); }
  .qm-num { font-size: 10.5pt; color: #7a5f2a; }
  .qm-label { font-size: 6.5pt; color: #555; }
  .fc-card {
    background: none;
    border: none;
    box-shadow: none;
    border-bottom: 0.5pt dotted #ddd;
    padding: 2.5pt 0;
    gap: 0;
    break-inside: avoid;
  }
  .fc-kicker { font-size: 6.5pt; color: #7a5f2a; }
  .fc-headline { font-size: 9pt; line-height: 1.3; color: #111; }

  /* ---- Experience ---- */
  .timeline { margin-top: 3pt; padding-left: 9pt; }
  .timeline::before { background: #ddd; }
  .t-entry { padding-bottom: 7pt; break-inside: avoid; }
  .t-entry::before {
    left: -12pt;
    width: 4pt; height: 4pt;
    background: #7a5f2a;
    border: none;
    box-shadow: none;
  }
  .t-head { margin-bottom: 3pt; gap: 2pt 10pt; }
  .t-meta { font-size: 6.5pt; color: #555; }
  .t-note { font-size: 8pt; color: #444; max-width: none; margin-bottom: 4pt; }
  .t-role { margin-bottom: 5pt; }
  .t-role-head { margin-bottom: 2pt; }
  .t-role-head h4 { font-size: 8pt; color: #7a5f2a; }
  .t-date { font-size: 7pt; color: #555; }
  .t-entry li {
    font-size: 8.5pt;
    line-height: 1.4;
    color: #333;
    max-width: none;
    margin-bottom: 2pt;
    padding-left: 9pt;
  }
  .t-entry li::before { width: 5pt; top: 0.6em; background: #999; }

  /* ---- Education ---- */
  .edu-grid { grid-template-columns: repeat(4, 1fr); gap: 8pt; margin-top: 3pt; }
  .edu-card {
    background: none;
    border: none;
    box-shadow: none;
    border-left: 0.5pt solid #ddd;
    padding: 0 0 0 6pt;
    break-inside: avoid;
  }
  .edu-crest { display: none; }
  .edu-tag { font-size: 6.5pt; color: #7a5f2a; margin-bottom: 2pt; }
  .edu-card h3 { font-size: 9pt; line-height: 1.2; margin-bottom: 1pt; }
  .edu-card p { font-size: 8pt; color: #444; margin-bottom: 2pt; }
  .edu-date { font-size: 7pt; color: #666; }

  /* ---- Expertise ---- */
  .skills-grid { grid-template-columns: repeat(3, 1fr); gap: 6pt 12pt; margin-top: 3pt; }
  .skill {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    break-inside: avoid;
  }
  .skill-num { font-size: 6.5pt; color: #7a5f2a; margin-bottom: 2pt; }
  .skill h3 { font-size: 8.5pt; line-height: 1.25; margin-bottom: 1pt; }
  .skill p { font-size: 7.5pt; line-height: 1.35; color: #444; }

  /* Logos are filtered to near-white for the dark UI, which would print
     invisible on paper — flip them back to solid black. */
  .t-logo { filter: brightness(0) !important; opacity: 1 !important; }
}