/* ==========================================================================
   CV page. Taken from the search consultancy's system and cut to what one
   page needs: paper, ink and electric blue; black sections that redefine the
   same tokens; pill buttons; glass panels on a 48px grid.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts, self-hosted. Each web font has a local fallback scaled to the same
   width and metrics, so when the web font arrives nothing on the page moves.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/assets/fonts/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/instrument-serif-italic-latin.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 400 500; font-style: normal; font-display: swap;
}
/* Body and UI weights. */
@font-face {
  font-family: "Schibsted Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 400 500; size-adjust: 103.46%; ascent-override: 94.72%; descent-override: 25.13%; line-gap-override: 0%;
}
/* Heading weights. */
@font-face {
  font-family: "Schibsted Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 600 800; size-adjust: 99.18%; ascent-override: 98.81%; descent-override: 26.21%; line-gap-override: 0%;
}
@font-face {
  font-family: "Instrument Fallback";
  src: local("Georgia Italic"), local("Georgia-Italic");
  font-style: italic; size-adjust: 78.13%; ascent-override: 126.71%; descent-override: 39.68%; line-gap-override: 0%;
}
@font-face {
  font-family: "Mono Fallback";
  src: local("Courier New"), local("CourierNewPSMT");
  size-adjust: 99.98%; ascent-override: 102.02%; descent-override: 30.01%; line-gap-override: 0%;
}

:root {
  --paper: #F4F3EF;
  --paper-2: #EBE9E3;
  --white: #FFFFFF;       /* raised surface: panels, tags */
  --ink: #111214;
  --ink-2: #3F4247;
  --ink-3: #62656B;       /* quietest text on paper, 5.4:1 */
  --rule: #D8D5CD;        /* decorative hairline only */
  --edge: #8A8780;        /* control boundaries, 3.3:1 */
  --signal: #2A33D9;      /* electric blue: actions and emphasis, 7.6:1 on paper */
  --signal-2: #1E26B0;    /* hover */
  --on-signal: #FFFFFF;   /* 8.2:1 on blue */
  --fill: #2A33D9;        /* solid fills that carry white text */
  --glow: rgba(42, 51, 217, .22);
  --on-blue: #FFFFFF;     /* closing band is blue: white text */
  --on-blue-2: #DDE0FF;   /* 6.3:1 on blue */
  --trail-a: 42, 51, 217;
  --trail-b: 110, 120, 255;
  --trail-mode: source-over;
  --glass: color-mix(in srgb, var(--white) 72%, transparent);
  --glass-edge: color-mix(in srgb, var(--ink) 9%, transparent);
  --grid-line: color-mix(in srgb, var(--ink) 4%, transparent);

  --sans: "Schibsted Grotesk", "Schibsted Fallback", ui-sans-serif, system-ui, sans-serif;
  --serif: "Instrument Serif", "Instrument Fallback", ui-serif, Georgia, serif;
  --mono: "JetBrains Mono", "Mono Fallback", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: clamp(20px, 4vw, 48px);
  --col-gap: clamp(20px, 3vw, 40px);
  --radius: 2px;
  --pill: 999px;

  --text-display: clamp(2.5rem, 5.2vw, 4.75rem);
  --text-h1: clamp(2.3rem, 5vw, 4.4rem);
  --text-h2: clamp(1.9rem, 3.6vw, 3.1rem);
  --text-h3-lg: clamp(1.3rem, 2vw, 1.65rem);
  --text-h3: clamp(1.15rem, 1.4vw, 1.3rem);
  --text-lede: clamp(1.15rem, 1.5vw, 1.35rem);
  --text-body: 1.0625rem;
  --text-md: 1rem;
  --text-sm: .9375rem;
  --text-label: .75rem;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-1: .15s;
  --dur-2: .25s;
}

/* Black sections: the same tokens, redefined, so everything inside follows.
   Blue text brightens to stay above 4.5:1 on black; solid fills keep the
   electric blue with white text. */
.section--dark, .close, .site-footer {
  --paper: #0B0C0E;
  --paper-2: #101114;
  --white: #15171B;
  --ink: #F4F3EF;
  --ink-2: #C3C7CC;
  --ink-3: #9A9FA7;       /* 7.4:1 on black, 6.7:1 on surface */
  --rule: #262930;
  --edge: #666A73;        /* 3.6:1 */
  --signal: #7C85FF;      /* 6.2:1 on black */
  --signal-2: #9AA2FF;
  --fill: #2A33D9;
  --on-signal: #FFFFFF;
  --glow: rgba(110, 120, 255, .35);
  --trail-a: 110, 120, 255;
  --trail-b: 170, 178, 255;
  --trail-mode: lighter;
  /* Derived tokens resolve where they are declared, so restate them here. */
  --glass: rgba(21, 23, 27, .72);
  --glass-edge: rgba(244, 243, 239, .09);
  --grid-line: rgba(244, 243, 239, .045);
  background: var(--paper); color: var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }
/* The sticky header height, read by anything that pins beneath it. */
:root { --header-h: 68px; }
@media (max-width: 860px) { :root { --header-h: 110px; } }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 20px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--text-body)/1.6 var(--sans);
  font-feature-settings: "ss01", "kern";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--signal); color: var(--on-signal); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 1px; }
main:focus { outline: none; }

.skip {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 14px; text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.print-only { display: none; }
.mb-40 { margin-bottom: var(--space-5); }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

h1, h2, h3, .display { margin: 0; font-weight: 600; text-wrap: balance; }
.display, h1 { font-size: var(--text-display); line-height: .98; letter-spacing: -0.042em; }
h2 { font-size: var(--text-h2); line-height: 1.04; letter-spacing: -0.032em; }
h3 { font-size: var(--text-h3); line-height: 1.2; letter-spacing: -0.015em; }

/* The serif italic is for the one word a heading turns on. It is set larger
   because Instrument Serif runs small on the x-height. */
h1 em, h2 em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.1em; letter-spacing: -0.01em; line-height: .9;
}

p { margin: 0 0 1em; text-wrap: pretty; }
.lede { font-size: var(--text-lede); line-height: 1.5; color: var(--ink-2); max-width: 34em; letter-spacing: -0.005em; }

.label {
  font: 500 var(--text-label)/1.3 var(--mono);
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
.label .n { color: var(--signal); }

/* --------------------------------------------------------------------------
   Header: name, section anchors, the CV. No menu to open: on a phone the
   anchors drop and the name and the LinkedIn button stay.
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: saturate(1.2) blur(8px); -webkit-backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.site-header.is-scrolled { border-bottom-color: var(--rule); }
.header-row { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
/* The logo is the person: photo, name, then role and city. */
.brand-avatar { width: 36px; height: 36px; border-radius: 50%; flex: none; }
.brand-text { display: grid; gap: 3px; line-height: 1.15; }
.brand-name { font-weight: 650; font-size: 1.02rem; letter-spacing: -0.02em; }
.brand-role { font: 500 .75rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.site-nav ul { display: flex; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.site-nav a {
  text-decoration: none; font-size: .95rem; font-weight: 500; color: var(--ink-2);
  padding-block: 6px; background: linear-gradient(var(--ink), var(--ink)) 0 100% / 0 1px no-repeat;
  transition: background-size .25s var(--ease), color .2s;
}
.site-nav a:hover, .site-nav a[aria-current] { color: var(--ink); background-size: 100% 1px; }
/* Phones: the section links become a second row that scrolls sideways,
   each a 44px target, rather than disappearing. */
@media (max-width: 860px) {
  .header-row { flex-wrap: wrap; gap: 0 12px; min-height: 0; padding-top: 8px; }
  .header-row .brand { min-height: 44px; }
  .site-nav { order: 3; width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); overflow-x: auto; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav ul { gap: 4px; padding-inline: calc(var(--gutter) - 10px) var(--gutter); width: max-content; }
  .site-nav a { display: flex; align-items: center; min-height: 44px; padding: 0 10px; font-size: .92rem; background: none; }
}
.brand-name, .header-row .btn { white-space: nowrap; }
@media (max-width: 560px) { .header-row { gap: 12px; } .brand { gap: 10px; } }
/* Phones: logo and LinkedIn share one line. The role drops its spaced
   capitals (still 12px), the button tightens, and below 360px the photo
   steps out so nothing wraps. */
@media (max-width: 440px) {
  .brand-role { text-transform: none; letter-spacing: 0; }
  .header-row > .btn { padding: 10px 14px; font-size: .88rem; gap: 8px; }
}
@media (max-width: 360px) { .brand-avatar { display: none; } }

/* --------------------------------------------------------------------------
   Buttons and links
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--fill); color: var(--on-signal);
  font: 600 .98rem/1 var(--sans); letter-spacing: -0.005em;
  padding: 15px 24px; border-radius: var(--pill); border: 1px solid var(--fill);
  text-decoration: none; cursor: pointer; box-shadow: 0 0 0 0 var(--glow);
  transition: background var(--dur-1), border-color var(--dur-1), box-shadow var(--dur-2);
}
.btn::after {
  content: ""; width: 14px; height: 10px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12.5M8.5 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12.5M8.5 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur-2) var(--ease);
}
/* A link that leaves the site points up and out rather than along. */
.btn--ext::after { width: 11px; height: 11px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M1 10L9.5 1.5M3 1h7v7' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M1 10L9.5 1.5M3 1h7v7' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E"); }
.btn--ext:hover::after { transform: translate(2px, -2px); }
.btn:hover { background: var(--signal-2); border-color: var(--signal-2); box-shadow: 0 0 28px -4px var(--glow); }
.btn:hover::after { transform: translateX(3px); }
.btn--sm { padding: 11px 18px; font-size: .9rem; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--edge); }
.btn--ghost:hover { background: transparent; border-color: var(--signal); color: var(--signal); box-shadow: none; }

.link { color: var(--signal); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 24px; }
.link::after { content: "→"; transition: transform var(--dur-2) var(--ease); }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link:hover::after { transform: translateX(3px); }
.link--ext::after { content: "↗"; }
.link--ext:hover::after { transform: translate(2px, -2px); }

.actions { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }

/* --------------------------------------------------------------------------
   Sections. Each one starts at the page margin, in line with the hero.
   -------------------------------------------------------------------------- */

.section { padding-block: clamp(64px, 8vw, 112px); }
.section + .section:not(.section--dark):not(.section--alt) { border-top: 1px solid var(--rule); }
.section--dark + .section { border-top: 0; }
.section--alt { background: var(--paper-2); }

.section-head { max-width: 46rem; margin-bottom: clamp(32px, 4vw, 48px); }
.section-head h2 + p { margin-top: 24px; }

/* --------------------------------------------------------------------------
   Hero: a ribbon of light behind, a scrim that keeps the headline side
   clear, floating chips of real work, a credibility strip.
   -------------------------------------------------------------------------- */

.hero--x {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(calc(100svh - var(--header-h)), 900px); display: flex; align-items: center;
  padding-block: clamp(56px, 8vw, 112px) clamp(40px, 5vw, 64px);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
}
.hero--x::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 86%, transparent) 34%, color-mix(in srgb, var(--paper) 20%, transparent) 62%, transparent 80%),
              radial-gradient(60% 70% at 78% 55%, color-mix(in srgb, var(--signal) 10%, transparent), transparent 70%);
}
.trail { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }
.hero-inner { position: relative; width: 100%; }
/* Who this is, before what they do: avatar, name, then role and city. */
/* On screen the header carries this; it shows in print, where the header
   is hidden, so the printed CV still opens with the name. */
.hero-id { display: none; }
@media print { .hero-id {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 clamp(20px, 2.5vw, 32px);
  padding: 6px 18px 6px 6px; border: 1px solid var(--glass-edge); border-radius: var(--pill);
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hero-id img { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.hero-id p { margin: 0; display: grid; gap: 2px; line-height: 1.2; }
.hero-id strong { font-weight: 650; font-size: .98rem; letter-spacing: -0.015em; }
.hero-id .label { font-size: .75rem; } }
.hero--x h1 { max-width: 18ch; }
.hero--x h1 .line { display: block; }
.hero--x h1 em { color: var(--signal); }
.hero-lede { max-width: 37rem; margin: clamp(24px, 3vw, 32px) 0 32px; }

.hero-float { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-float li {
  position: absolute; left: var(--x); top: var(--y); white-space: nowrap;
  font: 400 .75rem/1 var(--mono); color: var(--ink-2);
  padding: 9px 12px; background: color-mix(in srgb, var(--paper) 55%, transparent); border: 1px solid var(--glass-edge); border-radius: 4px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: float 14s ease-in-out var(--d) infinite;
}
.hero-float span { color: var(--signal); text-transform: uppercase; letter-spacing: .06em; margin-right: 10px; }
@keyframes float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-14px, -10px); } }

.cred {
  list-style: none; margin: clamp(40px, 6vw, 72px) 0 0; padding: 22px 0 0; border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, 1.9fr) minmax(0, 1.1fr); gap: 20px var(--col-gap); max-width: 1100px;
}
.cred li { display: grid; gap: 6px; align-content: start; }
.cred strong { font-weight: 600; font-size: clamp(1.3rem, 2vw, 1.7rem); letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
.cred span { font: 400 .78rem/1.45 var(--mono); color: var(--ink-3); }

@media (max-width: 1320px) { .hero-float li:nth-child(5) { display: none; } }
@media (max-width: 1180px) { .hero-float li:nth-child(n+4) { display: none; } }
/* On narrower screens the two longer chips pin to the right edge instead of a percentage, so they cannot run off it. */
@media (max-width: 1180px) { .hero-float li:nth-child(2), .hero-float li:nth-child(3) { left: auto; right: 16px; } }
@media (max-width: 860px) {
  .hero--x { min-height: 0; }
  .hero-float { display: none; }
  .hero--x::before { background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 20%, transparent), color-mix(in srgb, var(--paper) 75%, transparent) 45%, var(--paper) 100%); }
  .cred { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .hero--x h1 .line { display: inline; } }

/* --------------------------------------------------------------------------
   Brands strip, under the hero. The names scroll in a loop (two copies of
   the list, the second hidden from assistive tech), pause on hover, off
   screen or from the button, and sit still as a wrapped list under reduced
   motion.
   -------------------------------------------------------------------------- */

.brands { padding-block: 22px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.brands-row { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "k m"; align-items: center; gap: 12px 28px; }
.brands-k { grid-area: k; margin: 0; font-weight: 500; white-space: nowrap; }
.marquee {
  grid-area: m; display: flex; overflow: hidden; min-width: 0;
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-list { flex: none; display: flex; list-style: none; margin: 0; padding: 0; animation: marquee 38s linear infinite; }
/* Sector names, set large with a blue square between each. */
.marquee-list li { display: flex; align-items: center; height: 56px; white-space: nowrap; }
.marquee-word { font: 600 clamp(1.1rem, 1.7vw, 1.45rem)/1.2 var(--sans); letter-spacing: -0.02em; color: var(--ink-2); }
.marquee-word::after { content: ""; width: 5px; height: 5px; margin-inline: clamp(20px, 2.6vw, 36px); background: var(--signal); flex: none; }
.marquee:hover .marquee-list, .marquee:focus .marquee-list, .marquee.is-paused .marquee-list, .marquee.is-off .marquee-list { animation-play-state: paused; }
.marquee { cursor: pointer; border-radius: 4px; position: relative; }
.marquee.is-paused::after {
  content: "Paused"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font: 500 var(--text-label)/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2); background: var(--paper); border: 1px solid var(--edge); border-radius: var(--pill); padding: 6px 10px;
}
@keyframes marquee { to { transform: translateX(-100%); } }
@media (max-width: 760px) {
  .brands-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "k" "m"; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask: none; mask: none; }
  .marquee-list { animation: none; flex-wrap: wrap; flex: 1; }
  .marquee-list[aria-hidden] { display: none; }
  .marquee-list li:last-child::after { display: none; }
}

/* --------------------------------------------------------------------------
   01 What I bring: three strengths as a ruled index, each with its proof.
   -------------------------------------------------------------------------- */

.strengths { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.strengths > li {
  display: grid; grid-template-columns: 2.5rem minmax(0, 5fr) minmax(0, 6fr); gap: 8px var(--col-gap);
  padding-block: var(--space-4); border-bottom: 1px solid var(--rule);
}
.strength-n { font: 500 var(--text-label)/1 var(--mono); color: var(--signal); padding-top: .55em; grid-row: span 2; }
.strengths h3 { font-size: var(--text-h3-lg); letter-spacing: -0.025em; line-height: 1.15; }
.strengths h3 + p { grid-column: 2; margin: 0; color: var(--ink-2); font-size: var(--text-md); }
.proof { grid-column: 3; grid-row: 1 / span 2; margin: 0; padding-left: var(--space-3); border-left: 2px solid var(--signal); font-size: var(--text-md); color: var(--ink); }
.proof span { display: block; font: 500 var(--text-label)/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--signal); margin-bottom: 4px; }
@media (max-width: 760px) {
  .strengths > li { grid-template-columns: 2rem minmax(0, 1fr); }
  .proof { grid-column: 2; grid-row: auto; margin-top: var(--space-2); }
}


/* --------------------------------------------------------------------------
   02 Experience: the career spine. It fills as you read down and each node
   lights as the fill reaches it. The current role is the blue node, study a
   dashed one.
   -------------------------------------------------------------------------- */

.career { --when: 8.5rem; --node: 12px; list-style: none; margin: 0; padding: 0; position: relative; border-top: 1px solid var(--ink); }
.career::before, .career::after {
  content: ""; position: absolute; top: var(--space-5); bottom: var(--space-5); width: 1px;
  left: calc(var(--when) + var(--space-3) + var(--node) / 2 - .5px);
}
.career::before { background: var(--rule); }
.career::after { background: var(--signal); transform-origin: 50% 0; transform: scaleY(var(--p, 1)); }
.js .career::after { transform: scaleY(var(--p, 0)); }

.career > li { display: grid; grid-template-columns: var(--when) var(--node) minmax(0, 1fr); gap: 0 var(--space-3); padding-block: var(--space-5); position: relative; }
.career > li + li { border-top: 1px solid var(--rule); }
.career-when { margin: 0; padding-top: .55em; white-space: nowrap; }
.career-now { color: var(--signal); }
.career-node {
  width: var(--node); height: var(--node); margin-top: .62em; position: relative; z-index: 1;
  background: var(--paper-2); border: 1.5px solid var(--edge); transition: background var(--dur-2), border-color var(--dur-2);
}
.career > li.is-reached .career-node, html:not(.js) .career-node { background: var(--ink); border-color: var(--ink); }
.career > li.is-current .career-node { background: var(--signal); border-color: var(--signal); }
.career > li.is-current .career-node::after {
  content: ""; position: absolute; inset: -6px; border: 1px solid var(--signal); opacity: 0; animation: node-ping 2.4s var(--ease) infinite;
}
@keyframes node-ping { 0% { opacity: .7; transform: scale(.6); } 70%, 100% { opacity: 0; transform: scale(1.4); } }
.career > li.is-study .career-node, .career > li.is-study.is-reached .career-node { background: var(--paper-2); border-style: dashed; border-color: var(--ink-3); }

.career-body { max-width: 46em; }
/* An employer logo beside the role, as a small white tile. */
.career-head { display: flex; align-items: center; gap: 16px; margin-bottom: var(--space-2); }
.career-head > div { min-width: 0; overflow-wrap: break-word; }
.career-head .career-meta { margin-bottom: 0; }
.career-logo { flex: none; width: 64px; height: 64px; padding: 4px; object-fit: contain; border: 1px solid var(--rule); border-radius: 6px; background: #fff; }
@media (max-width: 640px) { .career-logo { width: 52px; height: 52px; padding: 3px; } }
/* A logo that is itself a filled square runs to the tile edge. */
.career-logo--bleed { padding: 0; }
.career-body h3 { font-size: var(--text-h3-lg); letter-spacing: -0.025em; line-height: 1.15; margin-bottom: 6px; }
.career-meta { font: 500 var(--text-label)/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--space-2); }
.career-summary { margin: 0 0 var(--space-2); color: var(--ink); font-size: var(--text-md); }
.career-points { list-style: none; margin: 0 0 var(--space-2); padding: 0; display: grid; gap: 8px; }
.career-points li { position: relative; padding-left: var(--space-3); color: var(--ink-2); font-size: var(--text-md); line-height: 1.5; }
.career-points li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 1.5px; background: var(--signal); }
.career-tags { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.career-tags li { font: 400 .75rem/1 var(--mono); color: var(--ink-2); padding: 6px 8px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white); }

@media (max-width: 640px) {
  .career { --when: 0px; }
  .career::before, .career::after { left: calc(var(--node) / 2 - .5px); }
  .career > li { grid-template-columns: var(--node) minmax(0, 1fr); gap: 6px var(--space-3); }
  .career-when { grid-column: 2; grid-row: 1; padding-top: 0; }
  .career-node { grid-column: 1; grid-row: 1 / span 2; margin-top: 2px; }
  .career-body { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   03 The query fan-out explorer, on a glass panel over the measuring grid.
   -------------------------------------------------------------------------- */

.section--glow { position: relative; overflow: hidden; isolation: isolate; }
.section--glow .trail--band { inset: 0 0 auto; height: 220px; opacity: .55; -webkit-mask: linear-gradient(180deg, #000, transparent); mask: linear-gradient(180deg, #000, transparent); }

.fx {
  position: relative;
  background-color: var(--glass); border: 1px solid var(--glass-edge); border-radius: 6px;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  padding: clamp(16px, 2.4vw, 28px);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 5%, transparent), 0 30px 80px -50px color-mix(in srgb, var(--ink) 35%, transparent);
}
.fx-bar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--rule); }
.fx-flag { color: var(--ink-3); }
.fx-flag::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border: 1px solid var(--ink-3); border-radius: 50%; vertical-align: 1px; }
.fx-meta { display: block; font: 400 .75rem/1.4 var(--mono); color: var(--ink-3); margin-top: 2px; }
.fx-q { color: var(--ink-2); margin: 0 0 12px; }
.fx-list { margin: 0; padding-left: 1.2em; color: var(--ink-2); }
.fx-list > li { margin-bottom: 12px; }
.fx-list ul { margin: 6px 0 0; padding-left: 1.1em; }

.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.seg button {
  font: 500 var(--text-label)/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2); background: transparent; border: 1px solid var(--rule); border-radius: var(--pill);
  padding: 9px 13px; cursor: pointer; min-height: 36px; transition: color var(--dur-1), border-color var(--dur-1), background var(--dur-1);
}
.seg button:hover { color: var(--ink); border-color: var(--edge); }
.seg button[aria-checked="true"], .seg button[aria-selected="true"] { color: var(--on-signal); background: var(--fill); border-color: var(--fill); }

.fx-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 20px; }
.fx-stage { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(16px, 2.5vw, 32px); align-items: start; }
.fx-net { position: relative; aspect-ratio: 1; width: 100%; }
.fx-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fx-rings circle { fill: none; stroke: var(--rule); stroke-dasharray: 2 5; }
.fx-spoke { fill: none; stroke: var(--signal); stroke-width: 1.2; opacity: .55; stroke-dasharray: 1; stroke-dashoffset: 1; }
.fx.is-run .fx-spoke { animation: draw .8s var(--ease) calc(var(--i) * 70ms) forwards; }
.fx-twig { fill: none; stroke: var(--edge); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .5s var(--ease) calc(var(--j) * 50ms) forwards; }
.fx-twig.is-opp { stroke: var(--signal); opacity: .7; }
.fx-leaf { fill: var(--white); stroke: var(--edge); stroke-width: 1.2; opacity: 0; animation: pop .35s var(--ease) calc(120ms + var(--j) * 50ms) forwards; }
.fx-leaf.is-opp { fill: var(--signal); stroke: var(--signal); filter: drop-shadow(0 0 6px var(--glow)); }
.fx-leaf.is-focus { stroke-width: 2; }
.fx-twig.is-dim, .fx-leaf.is-dim { opacity: .18 !important; animation: none; stroke-dashoffset: 0; }
.fx-dot { fill: var(--signal); filter: drop-shadow(0 0 4px var(--signal)); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { from { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.3); } to { opacity: 1; transform-box: fill-box; transform-origin: center; transform: scale(1); } }
@keyframes fade { to { opacity: 1; } }

.fx-centre {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34%;
  padding: 12px 14px; text-align: center; border-radius: 6px;
  background: var(--paper); border: 1px solid var(--signal); box-shadow: 0 0 40px -6px var(--glow);
}
.fx-centre .label { display: block; color: var(--signal); margin-bottom: 6px; }
.fx-centre p { margin: 0; font-size: clamp(.78rem, 1.15vw, .92rem); line-height: 1.35; color: var(--ink); }
.fx-cat {
  position: absolute; transform: translate(-50%, -50%); display: grid; gap: 3px; justify-items: center;
  padding: 8px 11px; max-width: 128px; text-align: center; cursor: pointer;
  background: var(--paper); color: var(--ink-2); border: 1px solid var(--rule); border-radius: var(--pill);
  opacity: 0; transition: color var(--dur-1), border-color var(--dur-1), background var(--dur-1), box-shadow var(--dur-2);
}
.fx.is-run .fx-cat { animation: fade .4s var(--ease) .3s forwards; }
.fx-cat:hover { color: var(--ink); border-color: var(--edge); }
.fx-cat[aria-expanded="true"] { border-color: var(--signal); color: var(--ink); }
.fx-cat.is-focus { background: var(--fill); color: var(--on-signal); box-shadow: 0 0 24px -4px var(--glow); }
.fx-cat-k { font: 500 .75rem/1.1 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.fx-cat-n { font: 600 .75rem/1 var(--mono); }
.fx-cat-tiny { display: none; }

.fx-panel { min-width: 0; }
.fx-views { margin-bottom: 16px; }
.fx-panel-h { margin: 0 0 12px; font-weight: 600; font-size: 1.15rem; letter-spacing: -0.02em; }
.fx-panel-h span { display: block; font: 400 .78rem/1.5 var(--mono); color: var(--ink-3); letter-spacing: 0; margin-top: 4px; }
.fx-rows { list-style: none; margin: 0; padding: 0; max-height: 440px; overflow: auto; scrollbar-width: thin; }
.fx-row { padding: 12px 0 12px 14px; border-top: 1px solid var(--rule); border-left: 2px solid transparent; }
.fx-row.is-opp { border-left-color: var(--signal); }
.fx-row-q { margin: 0 0 8px; font-size: .95rem; color: var(--ink); }
.fx-row-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fx-chip { font: 400 .75rem/1 var(--mono); color: var(--ink-2); padding: 5px 8px; border: 1px solid var(--rule); border-radius: var(--pill); }
.fx-chip.is-commercial, .fx-chip.is-transactional, .fx-chip.is-page { color: var(--signal); border-color: color-mix(in srgb, var(--signal) 35%, transparent); }
.fx-take { margin: 24px 0 0; padding: 16px 18px; border-left: 2px solid var(--signal); background: var(--paper); font-size: var(--text-md); color: var(--ink); max-width: 52em; }
.fx-take .label { display: block; color: var(--signal); margin-bottom: 6px; }
.fx-mode { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--rule); font-size: var(--text-sm); color: var(--ink-3); }
@media (max-width: 960px) {
  .fx-stage { grid-template-columns: 1fr; }
  .fx-net { max-width: 560px; margin-inline: auto; }
}
@media (max-width: 520px) {
  /* One line per pill (short label, then the count) so neighbours never touch. */
  .fx-cat { grid-auto-flow: column; align-items: center; gap: 5px; padding: 6px 9px; max-width: none; white-space: nowrap; }
  .fx-cat-k { letter-spacing: .02em; }
  .fx-cat-full { display: none; }
  .fx-cat-tiny { display: inline; }
  .fx-centre { width: 40%; padding: 8px; }
  .fx-centre .label { display: none; }
  .fx-centre p { font-size: .75rem; }
}
@media (max-width: 360px) { .fx-cat { padding: 5px 7px; } .fx-cat-k { letter-spacing: 0; } .fx-cat-n { display: none; } }

/* --------------------------------------------------------------------------
   04 Tools and skills: mono tags grouped by area.
   -------------------------------------------------------------------------- */

.skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: var(--space-4) var(--col-gap); }
.skills > div { border-top: 1px solid var(--ink); padding-top: var(--space-2); }
.skills h3.label { margin: 0 0 12px; color: var(--ink); }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { font: 400 .78rem/1.2 var(--mono); color: var(--ink-2); padding: 7px 9px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white); }

/* --------------------------------------------------------------------------
   Close: the blue band, white text, a white button.
   -------------------------------------------------------------------------- */

.close { padding-block: clamp(32px, 4vw, 48px); border-top: 1px solid var(--rule); }
.close-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.close-row > div { padding-left: 18px; border-left: 2px solid var(--signal); }
.close h2 { font-size: var(--text-h3-lg); letter-spacing: -0.025em; line-height: 1.15; margin-bottom: 6px; }
.close h2 em { color: var(--signal); }
.close p { margin: 0; color: var(--ink-3); font-size: var(--text-md); }
.close + .site-footer .footer-base { padding-top: var(--space-3); border-top: 1px solid var(--rule); }

.site-footer { padding-block: var(--space-4); }
.footer-base { display: flex; flex-wrap: wrap; gap: 8px 24px; font: 500 var(--text-label)/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.footer-base span { margin-right: auto; }
.footer-base a { text-decoration: none; color: var(--ink-2); min-height: 24px; }
.footer-base a:hover { color: var(--ink); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Where I'm based: a map that starts on Leeds City Centre and zooms out to
   the UK as you scroll, the steps beside it lighting as it passes each
   scale. Without script, or under reduced motion, it is the UK view with
   every step shown.
   -------------------------------------------------------------------------- */

/* Heading, then the three steps in a row, then the photograph and the map
   side by side. On a phone the photograph shrinks to sit beside the heading. */
.map-stage {
  display: grid; gap: 20px var(--col-gap);
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  grid-template-areas: "title title" "steps steps" "photo map";
}
.map-title { grid-area: title; }
.map-steps { grid-area: steps; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.map-steps li { display: grid; gap: 4px; align-content: start; padding: 10px 0 0; border-top: 2px solid var(--rule); transition: border-color var(--dur-2); }
.map-steps li:has(> .map-step-btn) { display: block; padding: 0; }
.map-step-btn { display: grid; gap: 4px; align-content: start; padding: 10px 0 0; width: 100%; height: 100%; font: inherit; color: inherit; text-align: left; background: none; border: 0; cursor: pointer; }
.map-step-t { color: var(--ink-2); font-size: var(--text-md); line-height: 1.45; }
.map-step-t strong { color: var(--ink); font-weight: 600; }
.map-steps li.is-on, html:not(.js) .map-steps li { border-top-color: var(--signal); }

.map-portrait { grid-area: photo; position: relative; margin: 0; align-self: start; overflow: hidden; border: 1px solid var(--glass-edge); border-radius: 6px; background: var(--white); }
.map-portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
.map-portrait figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 14px; color: var(--ink-2); background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.map-portrait figcaption span:first-child { color: var(--ink); }
.map-frame { grid-area: map; }
.map-steps li.is-on .label { color: var(--signal); }
.map-step-btn:hover .label { color: var(--ink); }

.map-frame {
  position: relative; overflow: hidden; isolation: isolate; justify-self: center;
  width: min(100%, 460px); aspect-ratio: 700 / 1240;
  background-color: var(--glass); border: 1px solid var(--glass-edge); border-radius: 6px;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 5%, transparent), 0 30px 80px -50px #000;
}
.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-svg path, .map-svg circle { vector-effect: non-scaling-stroke; }
.map-uk { fill: color-mix(in srgb, var(--signal) 9%, transparent); stroke: var(--signal); stroke-width: 1; stroke-linejoin: round; }
.map-ie { fill: color-mix(in srgb, var(--ink) 3%, transparent); stroke: var(--edge); stroke-width: .8; stroke-linejoin: round; }
.map-rings circle { fill: color-mix(in srgb, var(--signal) 7%, transparent); stroke: var(--signal); stroke-width: 1; stroke-dasharray: 3 4; }

/* Central Leeds in 3D, drawn by script at the closest zoom. Landmarks are
   labelled on their roofs; the OSM credit shows whenever its data does. */
.map-3d { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.map-marks { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.map-marks li { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.map-marks li::before { content: ""; position: absolute; left: -.5px; top: -14px; width: 1px; height: 14px; background: var(--signal); }
.map-marks span {
  position: absolute; left: 0; top: -14px; transform: translate(-50%, -100%); white-space: nowrap;
  font: 500 .75rem/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink);
  padding: 4px 6px; background: color-mix(in srgb, var(--paper) 80%, transparent); border: 1px solid color-mix(in srgb, var(--signal) 45%, transparent); border-radius: 3px;
}
.map-credit { display: none; position: absolute; top: 10px; right: 12px; z-index: 3; font: 400 .75rem/1 var(--mono); color: var(--ink-3); text-decoration: none; padding: 4px 6px; background: color-mix(in srgb, var(--paper) 70%, transparent); border-radius: 3px; }
.map-credit:hover { color: var(--ink); text-decoration: underline; }
.is-live .map-credit { display: block; }

/* Crosshairs through Leeds, placed by script. */
.map-cross { display: none; position: absolute; inset: 0; pointer-events: none; }
.map-cross::before, .map-cross::after { content: ""; position: absolute; background: color-mix(in srgb, var(--signal) 35%, transparent); }
.map-cross::before { left: 0; right: 0; top: var(--ly); height: 1px; }
.map-cross::after { top: 0; bottom: 0; left: var(--lx); width: 1px; }

.map-pins, .map-ring-labels { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.map-pin { position: absolute; width: 0; height: 0; }
.map-pin::before { content: ""; position: absolute; width: 6px; height: 6px; left: -3px; top: -3px; background: var(--ink-2); border-radius: 50%; }
.map-pin span {
  position: absolute; left: 9px; top: -10px; white-space: nowrap;
  font: 400 .75rem/1 var(--mono); color: var(--ink-2); padding: 5px 7px;
  background: color-mix(in srgb, var(--paper) 70%, transparent); border: 1px solid var(--glass-edge); border-radius: 4px;
}
.map-pin--l span { left: auto; right: 9px; }
.map-pin--home.map-pin--l span { left: auto; right: 14px; }
.map-pin--home { z-index: 2; }
.map-pin--home::before { width: 12px; height: 12px; left: -6px; top: -6px; background: var(--signal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 25%, transparent), 0 0 24px var(--glow); }
.map-pin--home::after { content: ""; position: absolute; width: 12px; height: 12px; left: -6px; top: -6px; border: 1px solid var(--signal); border-radius: 50%; animation: map-ping 2.4s var(--ease) infinite; }
@keyframes map-ping { 0% { opacity: .8; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(3.2); } }
.map-pin--home span { left: 14px; top: -12px; color: var(--on-signal); background: var(--fill); border-color: var(--fill); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; padding: 6px 8px; }
/* At UK scale the West Yorkshire towns would sit on top of Leeds. */
html:not(.js) .map-pin[data-tier="1"], html:not(.js) .map-ring-labels { display: none; }

.map-ring-labels li { position: absolute; width: 0; height: 0; display: none; }
.map-ring-labels span { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font: 500 .75rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--signal); background: var(--paper); padding: 3px 6px; border-radius: 3px; }

.map-readout { position: absolute; left: 14px; right: 14px; bottom: 12px; margin: 0; display: flex; justify-content: space-between; gap: 12px; color: var(--ink-3); }
.map-readout > span { white-space: nowrap; padding: 4px 6px; border-radius: 3px; background: color-mix(in srgb, var(--paper) 78%, transparent); }
.map-readout { justify-content: flex-end; }
.map-scale { display: none; align-items: center; gap: 8px; }
.map-scale i { display: block; height: 6px; border: 1px solid var(--ink-3); border-top: 0; }

/* Live: the section becomes a scroll track and the stage pins while the map
   zooms. Script sets every pin's position from here on. */
.map-section:has(.is-live) { padding-block: 0; }
.map-track.is-live { height: 220vh; }
.is-live .map-stage { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); padding-block: clamp(20px, 3.5vh, 48px); grid-template-rows: auto auto minmax(0, 1fr); }
.is-live .map-portrait { height: 100%; align-self: stretch; }
.is-live .map-portrait img { height: 100%; aspect-ratio: auto; }
.is-live .map-frame { width: 100%; height: 100%; aspect-ratio: auto; }
.is-live .map-ring-labels li { display: block; left: 0; top: 0; }
.is-live-static .map-ring-labels li { display: block; left: 0; top: 0; }
.is-live-static .map-cross, .is-live-static .map-scale { display: flex; }
.is-live .map-cross, .is-live .map-scale { display: flex; }

@media (max-width: 860px) {
  .map-stage { grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "photo title" "steps steps" "map map"; gap: 14px 14px; align-items: center; }
  .map-title { font-size: clamp(1.5rem, 6.4vw, 1.9rem); }
  .map-portrait, .is-live .map-portrait { width: 56px; height: 56px; align-self: center; }
  .map-portrait img, .is-live .map-portrait img { height: 100%; aspect-ratio: 1; object-position: 50% 25%; }
  .map-portrait figcaption { display: none; }
  .map-steps { gap: 10px; }
  .map-step-t { font-size: .8rem; line-height: 1.35; }
  .is-live .map-stage { gap: 12px 14px; padding-block: 14px; }
  .is-live .map-step-btn, .map-steps li { padding-top: 8px; }
}

/* --------------------------------------------------------------------------
   Work page (Protein Bakery Co.): a short intro, a facts row, the
   screenshots on hairline frames. Nothing else.
   -------------------------------------------------------------------------- */

.work-hero { padding-block: clamp(40px, 6vw, 88px) clamp(28px, 4vw, 48px); }
.work-back { margin: 0 0 var(--space-4); }
.work-back--end { margin: var(--space-6) 0 0; }
.link--back::after { content: none; }
.link--back::before { content: "←"; transition: transform var(--dur-2) var(--ease); }
.link--back:hover::before { transform: translateX(-3px); }
.work-title { font-size: var(--text-h1); line-height: 1; letter-spacing: -0.038em; margin-bottom: var(--space-3); }
.work-title em { color: var(--signal); }
.work-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px var(--col-gap); margin: var(--space-5) 0 0; padding-top: 18px; border-top: 1px solid var(--rule); max-width: 980px; }
.work-facts div { display: grid; gap: 4px; align-content: start; }
.work-facts dt { font: 500 var(--text-label)/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.work-facts dd { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
@media (max-width: 760px) { .work-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.work-gallery { padding-top: 0; }
.work-gallery-h { margin: 0 0 var(--space-2); }
.shots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.shots .shot--wide { grid-column: 1 / -1; }
.shots figure { margin: 0; }
.shots img { width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 6px; background: var(--white); }
.shots figcaption { margin-top: 10px; }
@media (max-width: 760px) { .shots { grid-template-columns: 1fr; } }

.career-link { margin: var(--space-2) 0 0; }
/* Phones: standalone links and footer links get a 44px tap target. */
@media (max-width: 860px) {
  .career-link .link, .work-back .link, .footer-base a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Reduced motion: everything at its end state, nothing loops. */
@media (prefers-reduced-motion: reduce) {
  .hero-float li { animation: none; }
  .fx-spoke, .fx-twig { animation: none !important; stroke-dashoffset: 0; }
  .fx-leaf, .fx-cat { animation: none !important; opacity: 1; }
  .js .career::after { transform: none; }
  .career > li .career-node { background: var(--ink); border-color: var(--ink); }
  .career > li.is-current .career-node::after { display: none; }
  .map-pin--home::after { animation: none; display: none; }
}

/* --------------------------------------------------------------------------
   Print: a plain CV, black on white. No canvas, chips, explorer or buttons;
   contact details printed as text.
   -------------------------------------------------------------------------- */

@media print {
  @page { margin: 14mm 14mm 16mm; }
  :root, .section--dark, .site-footer {
    --paper: #fff; --paper-2: #fff; --white: #fff; --ink: #000; --ink-2: #222; --ink-3: #444;
    --rule: #bbb; --edge: #888; --signal: #000; --fill: #000; --on-blue: #000; --on-blue-2: #222;
  }
  html { font-size: 10pt; }
  body { background: #fff; color: #000; font-size: 10pt; line-height: 1.4; }
  .site-header, .skip, .trail, .hero-float, .actions, #thinking, #based, .brands, .career-link, .career-logo, .site-footer, .btn, .career-tags { display: none !important; }
  .print-only { display: block; }
  .print-contact { font: 400 9pt/1.4 var(--mono); margin: 6pt 0 0; }
  .hero--x { min-height: 0; padding: 0 0 8pt; background: none; display: block; }
  .hero--x::before { display: none; }
  .hero-id { margin-bottom: 6pt; padding: 0; border: 0; background: none; }
  .hero-id img { display: none; }
  .hero--x h1 { font-size: 22pt; max-width: none; line-height: 1.1; letter-spacing: -0.02em; }
  .hero--x h1 .line { display: inline; }
  .hero-lede { font-size: 11pt; margin: 6pt 0 0; max-width: none; }
  .cred { margin-top: 8pt; padding-top: 6pt; max-width: none; gap: 6pt 12pt; grid-template-columns: .8fr 1.1fr 1.9fr 1.1fr; }
  .cred strong { font-size: 13pt; }
  .cred span { font-size: 8pt; }
  .section, .close { padding-block: 5pt; border: 0 !important; background: none !important; color: #000; }
  h2 { font-size: 15pt; margin-bottom: 6pt !important; }
  h1 em, h2 em { font-size: 1em; color: inherit !important; }
  h3 { font-size: 11pt; }
  .strengths > li { padding-block: 4pt; break-inside: avoid; grid-template-columns: 1.2rem minmax(0, 4fr) minmax(0, 7fr); }
  .strengths h3 + p { display: none; }
  .proof { grid-column: 3; grid-row: 1; }
  .strengths h3, .career-body h3 { font-size: 11pt; }
  .strengths h3 + p, .proof, .career-points li, .career-summary { font-size: 9.5pt; }
  .proof { border-left-width: 1pt; padding-left: 8pt; }
  .career { border-top-width: 1pt; --when: 5.6rem; }
  .career-when { font-size: 7pt; padding-top: 2pt; letter-spacing: .03em; white-space: normal; }
  .close { display: none; }
  h2 { break-after: avoid; }
  .career::before, .career::after { display: none; }
  .career-node { display: none; }
  .career > li { grid-template-columns: var(--when) minmax(0, 1fr); gap: 0 10pt; padding-block: 3.5pt; break-inside: avoid; }
  .career-body { grid-column: 2; max-width: none; }
  .career-meta { margin-bottom: 4pt; }
  .career-head { display: block; margin-bottom: 4pt; }
  .career-head .career-meta { margin-bottom: 0; }
  .career-points { gap: 1pt; margin-bottom: 0; }
  .career-summary { margin-bottom: 3pt; }
  .skills { grid-template-columns: repeat(5, 1fr); gap: 6pt 10pt; }
  .tags { display: block; font: 400 8pt/1.4 var(--sans); color: #222; }
  .tags li { display: inline; padding: 0; border: 0; background: none; font: inherit; }
  .tags li + li::before { content: " · "; }
  .skills > div { padding-top: 4pt; border-top-width: 1pt; }
  .skills h3.label { margin-bottom: 3pt; }
  #skills h2 { display: none; }
  a { text-decoration: none; color: #000; }
}