@font-face { font-family: "Pinyon Script"; src: url("/fonts/pinyon-script.woff2") format("woff2"); font-display: block; }
* { box-sizing: border-box; }
/* No rubber-band at the page edges: it drags the sticky header off the top and shows the backdrop above it. */
html { background: var(--color-ground); -webkit-text-size-adjust: 100%; scroll-padding-top: var(--size-nav-h); overscroll-behavior-y: none; }
body { margin: 0; color: var(--color-ivory); font-family: var(--font-body); font-size: var(--font-size-body); line-height: 1.6; overflow-x: hidden; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: var(--tracking-display); line-height: 1.1; }
main { overflow-x: clip; }
.wrap { max-width: var(--size-max); margin-inline: auto; padding-inline: var(--space-gutter); }
.visually-hidden { position: absolute; width: var(--size-hairline); height: var(--size-hairline); margin: calc(var(--size-hairline) * -1); padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.label { font-family: var(--font-mono); font-size: var(--font-size-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-ivory-faint); }

.todo { font-family: var(--font-mono); font-size: 0.78em; letter-spacing: var(--tracking-chip); text-transform: none; color: var(--color-ivory); background: var(--color-chip); border: var(--size-hairline) dashed var(--color-ivory-dash); border-radius: var(--size-chip); padding: 0.05em 0.45em; white-space: normal; }
.filler { color: var(--color-ivory-dim); font-style: italic; }
.filler::before { content: "FILLER · "; font-family: var(--font-mono); font-style: normal; font-size: 0.7em; letter-spacing: var(--tracking-micro); color: var(--color-ivory-faint); }

.backdrop { position: fixed; inset: 0; z-index: -1; background: var(--color-ground); }
.backdrop .rays { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.backdrop::after { content: ""; position: absolute; inset: 0; background: var(--shade-backdrop); }

.site-header { position: sticky; top: 0; z-index: 10; background: var(--color-bar); border-bottom: var(--size-hairline) solid var(--color-line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-7); min-height: var(--size-nav-h); }
.brand { font-family: var(--font-script); font-synthesis: none; font-size: var(--font-size-brand); text-decoration: none; line-height: 1; padding-top: var(--size-brand-lift); white-space: nowrap; transition: opacity var(--motion-reveal) ease; }
/* Set by the inline script in <head>; without JS the attribute is absent and the wordmark shows as usual. */
[data-wordmark="pending"] .brand { opacity: 0; }
[data-wordmark="fallback"] .brand { font-style: italic; }
.site-nav { display: flex; align-items: center; gap: var(--space-4); font-size: var(--font-size-nav); white-space: nowrap; }
.site-nav a { text-decoration: none; color: var(--color-ivory-dim); padding: var(--space-4) 0.125em; }
.site-nav a:hover { color: var(--color-ivory); }
.site-nav .dot { color: var(--color-ivory-faint); }

.glass { position: relative; background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); border: var(--size-hairline) solid var(--color-line); box-shadow: var(--glass-inset), var(--glass-shadow); border-radius: var(--glass-radius); }
/* Liquid-glass rim: a bevel that catches light at the top-left and bottom-right corners. */
.glass::before { content: ""; position: absolute; inset: calc(var(--size-hairline) * -1); padding: var(--size-hairline); border-radius: inherit; pointer-events: none;
  background: var(--glass-rim);
  mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); mask-composite: exclude; }
/* Prismatic edge: the patch of border nearest the pointer lights up, ivory at the core with pastel fringes.
   The fringe is a conic gradient spun with a transform, so the spin composites instead of repainting.
   Rings use padding + mask-composite: exclude, which Firefox and Safari render the same as Chrome.
   JS writes --x/--y (nearest edge point, relative to the frame) and --on, and adds .lit so only lit frames spin. */
.glow { position: absolute; inset: calc(var(--size-hairline) * -1); border-radius: inherit; pointer-events: none; z-index: 2; opacity: var(--on, 0); transition: opacity var(--motion-glow) ease;
  mask: radial-gradient(circle var(--size-glow-reach) at var(--x) var(--y), black 12%, var(--shade-glow-mask) 45%, transparent 100%);
  filter: drop-shadow(0 0 var(--size-glow-blur) var(--color-ivory-glow)); }
.glow-edge { position: absolute; inset: 0; border-radius: inherit; padding: var(--size-glow-line); overflow: hidden;
  mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); mask-composite: exclude; }
.glow-spin { position: absolute; left: var(--x); top: var(--y); width: var(--size-glow-spin); height: var(--size-glow-spin); margin: calc(var(--size-glow-spin) / -2) 0 0 calc(var(--size-glow-spin) / -2);
  background: conic-gradient(var(--glint-rose), var(--glint-champagne), var(--glint-mint), var(--glint-ice), var(--glint-lavender), var(--glint-rose));
  animation: glow-spin var(--motion-spin) linear infinite paused; }
.glow.lit .glow-spin { animation-play-state: running; }
.glow-edge::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle var(--size-glow-core) at var(--x) var(--y), var(--glint-core), var(--color-ivory-rim) 45%, transparent 100%); }
@keyframes glow-spin { to { transform: rotate(360deg); } }
.corners .glow-edge { padding: var(--size-hairline); }

/* Border beam: Magic UI's BorderBeam (size 100) in the glint colours, one lap per frame when it first scrolls into view.
   The ring mask keeps the streak on the border; metric frames add a corner mask so it only lights the brackets. */
.beam { position: absolute; inset: calc(var(--size-hairline) * -1); padding: var(--size-hairline); border-radius: inherit; pointer-events: none; z-index: 3;
  mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); mask-composite: exclude; }
.beam::after { content: ""; position: absolute; width: var(--size-beam); aspect-ratio: 1;
  offset-path: rect(0 auto auto 0 round var(--glass-radius)); background: linear-gradient(to left, var(--glint-core), var(--glint-champagne) 14%, var(--glint-rose) 30%, var(--glint-lavender) 46%, var(--glint-ice) 62%, var(--glint-mint) 78%, transparent);
  animation: beam-lap var(--motion-beam) linear var(--beam-delay, 0s) 1 both; }
.corners { position: absolute; inset: 0; pointer-events: none; z-index: 3;
  mask: linear-gradient(black 0 0) top left / var(--size-bracket) var(--size-bracket) no-repeat, linear-gradient(black 0 0) top right / var(--size-bracket) var(--size-bracket) no-repeat,
        linear-gradient(black 0 0) bottom left / var(--size-bracket) var(--size-bracket) no-repeat, linear-gradient(black 0 0) bottom right / var(--size-bracket) var(--size-bracket) no-repeat; }
.corners .beam { inset: 0; }
.corners .beam::after { offset-path: rect(0 auto auto 0); }
@keyframes beam-lap { from { offset-distance: 0%; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } to { offset-distance: 100%; opacity: 0; } }

.btn { display: inline-flex; align-items: center; gap: var(--space-5); min-height: var(--size-tap); padding: var(--space-5) var(--space-10); font-family: var(--font-mono); font-size: var(--font-size-btn); letter-spacing: var(--tracking-label); text-transform: uppercase; text-decoration: none; color: var(--color-ivory); }

.metric { position: relative; padding: var(--space-10) var(--space-10) var(--space-8); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.metric.sunk { opacity: 0; transform: translateY(var(--size-rise)); }
.metric.rising { transition: opacity var(--motion-rise) linear var(--rise-delay), transform var(--motion-rise) var(--ease-enter) var(--rise-delay); }
.metric .num { font-family: var(--font-display); font-size: var(--font-size-num); line-height: 1; letter-spacing: var(--tracking-num); color: var(--color-ivory); transition: text-shadow var(--motion-num) ease; }
.metric .num small { font-size: 0.42em; letter-spacing: var(--tracking-meta); }
.metric .sub { font-size: var(--font-size-lede); font-weight: 700; line-height: 1.35; color: var(--color-ivory); text-wrap: balance; }
.metric .br { position: absolute; width: var(--size-bracket); height: var(--size-bracket); border: 0 solid var(--color-ivory); }
.metric .br.tl { top: 0; left: 0; border-top-width: var(--size-hairline); border-left-width: var(--size-hairline); }
.metric .br.tr { top: 0; right: 0; border-top-width: var(--size-hairline); border-right-width: var(--size-hairline); }
.metric .br.bl { bottom: 0; left: 0; border-bottom-width: var(--size-hairline); border-left-width: var(--size-hairline); }
.metric .br.br-r { bottom: 0; right: 0; border-bottom-width: var(--size-hairline); border-right-width: var(--size-hairline); }
.metric:hover .num, .metric.is-lit .num { text-shadow: calc(var(--size-hairline) * -1) 0 var(--color-split-red), var(--size-hairline) 0 var(--color-split-cyan); }
.metrics { display: grid; gap: var(--space-grid); }

section { padding-block: var(--space-section); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-7); flex-wrap: wrap; margin-bottom: var(--space-head); }
.section-head h2 { font-size: var(--font-size-h2); }

.hero { position: relative; min-height: calc(100svh - var(--size-nav-h)); display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; padding-block: var(--space-hero-top) var(--space-hero-bottom); }
.hero .wrap { width: 100%; }
.hero-text { container-type: inline-size; }
.hero h1 { font-size: var(--font-size-hero); letter-spacing: var(--tracking-hero); line-height: 1; }
.name-first { display: block; }
.name-via { white-space: nowrap; }
.name-slot { display: inline-grid; overflow: clip visible; }
.name-word { grid-area: 1 / 1; opacity: 0; transform: translateY(var(--size-name-rise)); }
.name-word[data-ending] { transform: translateX(var(--size-name-slide)); }
.name-word[data-state='in'] { opacity: 1; transform: none;
  transition: opacity var(--motion-hero-slide) linear var(--motion-hero-handoff), transform var(--motion-hero-slide) var(--ease-enter) var(--motion-hero-handoff); }
.name-word[data-state='out'] { transform: translateY(calc(var(--size-name-rise) * -1));
  transition: opacity var(--motion-hero-leave) linear, transform var(--motion-hero-leave) var(--ease-leave); }
.name-word[data-ending][data-state='out'] { transform: translateX(var(--size-name-slide)); }
.hero .position { margin-top: var(--space-11); max-width: 34em; font-size: var(--font-size-lede); }
.hero .position strong { font-weight: 700; }
.hero .definition summary { list-style: none; pointer-events: none; }
.hero .definition summary::-webkit-details-marker { display: none; }
.hero .definition blockquote { margin: var(--space-6) 0 0; padding-left: var(--space-8); max-width: 34em; border-left: var(--size-quote-rule) solid var(--color-ivory-faint); font-size: var(--font-size-lede); font-style: italic; color: var(--color-ivory-dim); text-wrap: balance; }
.hero .summary { margin-top: var(--space-7); max-width: 34em; font-size: var(--font-size-lede); }
.hero .metrics { margin-top: var(--space-hero-metrics); grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: var(--size-hero-metrics); }

.about .intro { max-width: 36em; font-size: var(--font-size-lede); }
.timeline { list-style: none; margin: var(--space-block) 0 0; padding: 0; display: grid; gap: var(--space-11); }
.timeline li { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: var(--space-11); padding-top: var(--space-9); border-top: var(--size-hairline) solid var(--color-line-soft); }
.timeline .when { font-family: var(--font-mono); font-size: var(--font-size-micro); letter-spacing: var(--tracking-meta); color: var(--color-ivory-faint); padding-top: var(--space-1); }
.timeline h3 { font-size: var(--font-size-h3); letter-spacing: var(--tracking-hero); }
.timeline .belief { margin-top: var(--space-2); color: var(--color-ivory-dim); font-style: italic; }
.timeline h3 + p, .timeline .belief + p { margin-top: var(--space-3); max-width: 36em; }

.impact .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-9); margin-top: var(--space-block); }
.quote { margin: 0; padding: var(--space-12); display: flex; flex-direction: column; gap: var(--space-6); }
.quote p { font-size: var(--font-size-quote); line-height: 1.45; }
.quote cite { font-style: normal; }

.projects-grid, .wins-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-9); }
.wins-grid { align-items: start; }
.project { padding: var(--space-12); display: flex; flex-direction: column; gap: var(--space-5); min-height: var(--size-project-min); }
.project header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-5); }
.project header .label { white-space: nowrap; }
.project h3, .win h3 { font-size: var(--font-size-h3); letter-spacing: var(--tracking-micro); }
.win { padding: var(--space-12); display: flex; flex-direction: column; gap: var(--space-3); }
/* Win photos mix portraits and group shots: one 4:3 frame keeps the grid even, anchored high so faces stay in. */
.win .cover { aspect-ratio: 4 / 3; width: calc(100% + 2 * var(--space-12)); flex-shrink: 0; }
.win .cover img { object-position: 50% 20%; }
/* A logo has a white background, so it sits padded on an ivory panel and multiplies its white away. */
.win .cover-logo { background: var(--color-ivory); }
.win .cover-logo img { box-sizing: border-box; padding: 14% 22%; object-fit: contain; mix-blend-mode: multiply; }
.project .outcome { margin-top: auto; font-family: var(--font-mono); font-size: var(--font-size-label); letter-spacing: var(--tracking-micro); text-transform: uppercase; color: var(--color-ivory); }
.projects-more { margin-top: var(--space-12); display: flex; justify-content: flex-end; }
/* Collapsed unless site/js/projects.js sets data-expanded="true", so without JS the button stays a plain link to /projects/. */
.projects-extra { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  transition: grid-template-rows var(--motion-expand) ease, opacity var(--motion-expand) ease, visibility 0s linear var(--motion-expand); }
.projects[data-expanded="true"] .projects-extra { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition-delay: 0s; }
/* The clip that drives the height reveal would also crop the cards' shadows, rims and focus ring, so the clip box
   bleeds out past the shadow's reach and a negative margin takes the bleed back; the bleed must not catch clicks. */
.projects-extra-inner { min-height: 0; overflow: hidden; padding: var(--space-15); margin: calc(var(--space-15) * -1); pointer-events: none; }
.projects-extra-inner > * { pointer-events: auto; }
.projects-extra .section-head.also { margin-top: var(--space-block); }
.projects-extra .section-head h3 { font-size: var(--font-size-h3); color: var(--color-ivory-dim); }
.projects .if-expanded, .projects[data-expanded="true"] .if-collapsed { display: none; }
.projects[data-expanded="true"] .if-expanded { display: inline; }

.page .section-head h2 { font-size: var(--font-size-cta); }
.section-head.also { margin-top: var(--space-section); }
.projects-grid.small { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.projects-grid.small .project { padding: var(--space-11); }
.projects-grid.small .cover { margin: calc(var(--space-11) * -1) calc(var(--space-11) * -1) var(--space-3); }
.projects-grid.small .project p { color: var(--color-ivory-dim); }

.project .cover-logo img { box-sizing: border-box; padding-block: var(--space-6); object-fit: contain; }
.card-link { text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; }
.card-link:focus-visible { outline: none; }
.project:has(.card-link:focus-visible) { outline: var(--size-hairline) solid var(--color-ivory); outline-offset: var(--space-1); }

.video-frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: var(--color-ground); overflow: hidden; color: inherit; font: inherit; }
.video-still img { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-logo img { box-sizing: border-box; padding-block: var(--space-11); object-fit: contain; }
.video-play { cursor: pointer; }
.video-play img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: opacity var(--motion-glow) ease; }
.video-play:hover img, .video-play:focus-visible img { opacity: 1; }
.video-play:focus-visible { outline: var(--size-hairline) solid var(--color-ivory); outline-offset: calc(var(--size-hairline) * -2); }
.play { position: absolute; inset: 0; margin: auto; width: var(--size-play); height: var(--size-play); border-radius: 50%; background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); border: var(--size-hairline) solid var(--color-line-strong); box-shadow: var(--glass-shadow); }
.play::after { content: ""; position: absolute; inset: 0; margin: auto; width: 32%; height: 36%; transform: translateX(10%); background: var(--color-ivory); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.video-frame.cover-default { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-5); }

.project-page h1 { font-size: var(--font-size-cta); letter-spacing: var(--tracking-display); }
.crumbs { margin-bottom: var(--space-9); }
.crumbs a { text-decoration: none; color: var(--color-ivory-dim); }
.project-page .meta { margin-top: var(--space-6); }
.project-page .outcome { margin-top: var(--space-3); font-family: var(--font-mono); font-size: var(--font-size-label); letter-spacing: var(--tracking-micro); text-transform: uppercase; }
.project-video { margin-top: var(--space-block); overflow: hidden; }
.story { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-11); margin-top: var(--space-block); }
.story h2, .stack h2, .gallery h2 { margin-bottom: var(--space-5); font-size: var(--font-size-cred-head); letter-spacing: var(--tracking-head); color: var(--color-ivory-dim); }
.project-body { margin-top: var(--space-block); max-width: 40em; font-size: var(--font-size-lede); }
.stack, .gallery, .links { margin-top: var(--space-block); }
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-9); }
.gallery figure { margin: 0; overflow: hidden; border-radius: var(--glass-radius); border: var(--size-hairline) solid var(--color-line); }
.gallery img { display: block; width: 100%; height: auto; }
.links { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.pager { display: flex; justify-content: space-between; gap: var(--space-11); margin-top: var(--space-section); padding-top: var(--space-11); border-top: var(--size-hairline) solid var(--color-line); }
.pager a { display: flex; flex-direction: column; gap: var(--space-2); text-decoration: none; }
.pager a.next { align-items: flex-end; text-align: right; }
.pager-name { font-family: var(--font-display); font-size: var(--font-size-h3); letter-spacing: var(--tracking-micro); text-transform: uppercase; }
.pager a:hover .pager-name { color: var(--color-ivory); }

/* Covers sit flush with the card's top edge; the card's own padding is undone so the image meets the rim. */
.cover { position: relative; margin: calc(var(--space-12) * -1) calc(var(--space-12) * -1) var(--space-3); aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--glass-radius) var(--glass-radius) 0 0; border-bottom: var(--size-hairline) solid var(--color-line); }
.cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cover-default { display: grid; place-items: center; padding: var(--space-9); text-align: center; background: var(--shade-cover), var(--color-ground); }
.cover-name { font-family: var(--font-display); font-size: var(--font-size-h2); letter-spacing: var(--tracking-display); text-transform: uppercase; line-height: 1.15; color: var(--color-ivory-dim); }
.projects-grid.small .cover-name { font-size: var(--font-size-h3); }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.chip { padding: var(--space-1) var(--space-5); border: var(--size-hairline) solid var(--color-line-strong); border-radius: var(--size-pill); font-size: var(--font-size-body-sm); }
.logo { display: grid; place-items: center; width: var(--size-logo-disc); height: var(--size-logo-disc); color: var(--brand); }
.logo svg { width: var(--size-logo); height: var(--size-logo); fill: currentColor; }
.logo img { width: var(--size-logo); height: var(--size-logo); object-fit: contain; }
.logo.on-disc { background: var(--color-ivory); border-radius: 50%; }
.logo.on-disc svg { width: calc(var(--size-logo) * 0.8); height: calc(var(--size-logo) * 0.8); }
.monogram { background: var(--brand); color: var(--color-ground); border-radius: var(--size-chip); font-family: var(--font-display); font-size: var(--font-size-cred-head); letter-spacing: var(--tracking-chip); line-height: 1; }
.ledger { border-top: var(--size-hairline) solid var(--color-line-strong); }
.lg-row { display: grid; grid-template-columns: 16em minmax(0, 1fr); gap: var(--space-11); padding-block: var(--space-12); border-bottom: var(--size-hairline) solid var(--color-line); }
.lg-label { font-size: var(--font-size-h3); letter-spacing: var(--tracking-head); color: var(--color-ivory-dim); padding-top: var(--space-1); }
.lg-body { min-width: 0; }
.lg-list, .lg-strip, .lg-certlist, .lg-books, .lg-langs { list-style: none; margin: 0; padding: 0; }
.lg-list li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-9); padding-block: var(--space-5); border-top: var(--size-hairline) solid var(--color-line-soft); }
.lg-list li:first-child { border-top: 0; padding-top: 0; }
.lg-list li:last-child { padding-bottom: 0; }
.lg-main { display: block; font-size: var(--font-size-lede); line-height: 1.3; }
.lg-sub { display: block; color: var(--color-ivory-dim); font-size: var(--font-size-body-sm); }
.lg-when { font-family: var(--font-mono); font-size: var(--font-size-label); letter-spacing: var(--tracking-meta); color: var(--color-ivory-faint); white-space: nowrap; }
.lg-strip { display: flex; flex-wrap: wrap; gap: var(--space-7) var(--space-11); }
.lg-strip li { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--font-size-label); letter-spacing: var(--tracking-micro); text-transform: uppercase; color: var(--color-ivory-dim); }
.lg-strip .logo, .lg-certlist .logo { flex: none; }
.lg-more { margin-top: var(--space-9); color: var(--color-ivory-dim); }
.lg-certs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-11); align-items: start; }
.lg-feature { display: flex; gap: var(--space-9); align-items: center; text-decoration: none; }
.lg-feature img { width: var(--size-cred-badge); height: var(--size-cred-badge); flex: none; }
.lg-meta { display: block; margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--font-size-label); letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--color-ivory-faint); }
.lg-verify { color: var(--color-ivory-dim); text-decoration: underline; text-underline-offset: 0.2em; }
.lg-feature:hover .lg-verify { color: var(--color-ivory); }
.lg-feature:focus-visible { outline: var(--size-hairline) solid var(--color-ivory); outline-offset: var(--space-3); }
.lg-certlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-9) var(--space-11); }
.lg-certlist li { display: flex; gap: var(--space-5); align-items: center; }
.lg-name { display: block; font-family: var(--font-mono); font-size: var(--font-size-label); letter-spacing: var(--tracking-micro); text-transform: uppercase; }
.lg-certlist .lg-sub { line-height: 1.35; }
.lg-books { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-9) var(--space-12); }
.lg-books li { display: flex; gap: var(--space-7); align-items: baseline; }
.lg-num { font-family: var(--font-mono); font-size: var(--font-size-label); color: var(--color-ivory-faint); }
.lg-books cite { display: block; font-size: var(--font-size-lede); line-height: 1.3; }
.lg-langs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-9); }
.lg-langs li { display: flex; flex-direction: column; gap: var(--space-1); }

.cta { text-align: center; }
.cta h2 { font-size: var(--font-size-cta); }
.cta p { margin: var(--space-8) auto 0; max-width: 32em; color: var(--color-ivory-dim); }
.cta .contact-label { margin-top: var(--space-13); }
.channels { margin-top: var(--space-6); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-5); }
.channel { display: inline-flex; align-items: center; gap: var(--space-3); }
.cta .btn { font-size: var(--font-size-btn-lg); padding: var(--space-7) var(--space-12); }

.site-foot { padding-block: var(--space-14) var(--space-15); border-top: var(--size-hairline) solid var(--color-line); }
.site-foot .wrap { display: flex; justify-content: space-between; gap: var(--space-7); flex-wrap: wrap; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: var(--color-ivory); }

@media (max-width: 56.25em) {
  .lg-row { grid-template-columns: 1fr; gap: var(--space-9); }
  .lg-certs { grid-template-columns: 1fr; }
  .projects-grid.small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .impact .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.9375em) {
  body { font-size: var(--font-size-body-sm); }
  .site-nav { gap: var(--space-2); font-size: var(--font-size-nav-sm); }
  .hero .metrics { grid-template-columns: 1fr; gap: var(--space-6); }
  /* On a phone the definition opens on tap and the middle paragraph is skipped, so the name and numbers stay close. */
  .hero .definition summary { pointer-events: auto; cursor: pointer; }
  .hero .definition summary::after { content: " +"; font-family: var(--font-mono); color: var(--color-ivory-faint); }
  .hero .definition[open] summary::after { content: " −"; }
  .not-phone { display: none; }
  .metric { padding: var(--space-8) var(--space-8) var(--space-6); }
  .quotes, .projects-grid, .projects-grid.small, .wins-grid { grid-template-columns: 1fr; }
  .lg-row { padding-block: var(--space-11); }
  .lg-label { font-size: var(--font-size-cred-head); }
  .lg-list li { flex-direction: column; gap: var(--space-1); }
  .lg-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-9); }
  .lg-certlist, .lg-books { grid-template-columns: 1fr; }
  .lg-langs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline li { grid-template-columns: 1fr; gap: var(--space-3); }
  .story, .gallery-grid { grid-template-columns: 1fr; }
}
@media (max-width: 23.75em) {
  .site-nav .dot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}