:root {
  --bg: #000;
  --fg: #fff;
  --dim: rgba(255, 255, 255, 0.42);
  --sans: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --side: 36px;
  --gutter: max(16vw, 250px);
  --fs: 19px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--fg); }
body {
  font-family: var(--sans);
  font-size: var(--fs);
  line-height: 1.2;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  animation: fade 0.6s ease both;
}
@keyframes fade { from { opacity: 0; } }

/* Page change curtain, made by pageTransitions() in common.js */
.curtain { position: fixed; inset: 0; z-index: 1000; background: var(--bg); pointer-events: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; }
.u { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Media with gradient placeholder */
.media { position: relative; overflow: hidden; background: #111; }
.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.7s ease; }
.media.loaded img { opacity: 1; }

/* Fixed logo + nav, vertically centred like Zauberberg */
.logo {
  position: fixed; left: var(--side); top: 50%; transform: translateY(-50%); z-index: 50;
  font-family: var(--serif); font-size: 44px; line-height: 0.86; text-transform: uppercase; letter-spacing: -0.03em;
}
.logo span { display: block; }
.logo .surname { width: max-content; }
.logo .role {
  width: max-content; margin-top: 0.5em;
  font-family: var(--sans); font-size: 11px; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.nav { position: fixed; right: var(--side); top: 50%; transform: translateY(-50%); z-index: 50; display: flex; gap: 0.9em; }
.nav a { color: var(--dim); transition: color 0.2s; }
.nav a:hover, .nav a.active { color: var(--fg); }

/* Letter roll on menu hover (see rollText in common.js) */
.roll { display: inline-block; vertical-align: top; line-height: 1; margin: 0.1em 0; } /* hover area = the letters only */
.ch { display: inline-block; position: relative; overflow: hidden; vertical-align: top; line-height: 1; } /* clipped tight to the letters, as in the reference */
.ch > span { display: block; }
.ch > span + span { position: absolute; left: 0; top: 100%; }
.ch.down > span + span { top: -100%; }

/* The name blurs only around the mouse: letters near the pointer go soft and pale (see blurAround in common.js) */
.bl, .logo .bl { display: inline-block; transition: filter 0.35s ease, opacity 0.35s ease; } /* .logo .bl: beats ".logo span { display: block }" */

/* Zoom-in label that follows the mouse over openable photos */
.zoom-cursor {
  position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; white-space: nowrap;
  color: #fff; opacity: 0; transition: opacity .2s ease;
  text-shadow: 0 0 10px rgba(0, 0, 0, .35);
}
.zoom-cursor::before { content: '•'; margin-right: .5em; }
.zoom-cursor.on { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .sheet-item, .strip .media, .sheet-item *, .strip .media * { cursor: none; } /* the Zoom in label is the cursor */
}

/* ---------- Home ---------- */
.home { height: 100vh; overflow: hidden; }
.home .bg { position: fixed; inset: 0; opacity: 0; transition: opacity 0.9s ease; }
.home .bg.on { opacity: 1; }
.home .bg .media { position: absolute; inset: 0; }
.home .shade { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.32); pointer-events: none; }
.reel { position: fixed; inset: 0; overflow: hidden; z-index: 10; }
.reel-list { position: absolute; left: 0; right: 0; top: 0; list-style: none; text-align: center; will-change: transform; }
.reel-list li { line-height: 23px; }
.reel-list a { color: rgba(255, 255, 255, 0.5); transition: color 0.25s; text-shadow: 0 0 24px rgba(0, 0, 0, 0.35); }
.reel-list a.active { color: #fff; }

/* ---------- Works ---------- */
.works { padding: 24vh var(--gutter) 24vh; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tile { position: relative; display: block; transition: opacity 0.35s ease; }
.tile .media { aspect-ratio: 16 / 10; }
.grid:hover .tile { opacity: 0.32; }
.grid .tile:hover { opacity: 1; }
.tile .cap {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  opacity: 0; transition: opacity 0.3s; line-height: 1.4;
}
.tile:hover .cap { opacity: 1; }
.tile .cap .d { color: var(--dim); }
/* With a mouse the caption follows the pointer with a soft lag (positioned by works.html), like the reference */
.cap-follow .tile .cap {
  left: 0; top: 0; transform: none; z-index: 2; pointer-events: none;
  white-space: nowrap; text-align: center; text-shadow: 0 0 14px rgba(0, 0, 0, 0.45); will-change: transform;
}
.cap-follow .tile:hover { z-index: 3; } /* its caption stays above the neighbours, even while the tile brightens */

/* ---------- Project ---------- */
.project { --ink: #0d0d0d; --ink-dim: rgba(0, 0, 0, 0.5); }
.project .backdrop { position: fixed; inset: 0; z-index: -1; opacity: 0.28; }
.project .backdrop .media { position: absolute; inset: 0; }
.panel {
  position: relative; min-height: 44vh; padding: 28px var(--side) 28px;
  display: grid; grid-template-columns: 1fr 1fr 260px; column-gap: 40px;
  background: var(--panel, #9c7d55); color: var(--ink);
}
.panel .head { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.panel .head h1 { font: inherit; }
.panel .head .type { font-family: var(--serif); font-style: italic; font-size: 22px; }
.panel .poster { height: 300px; width: auto; aspect-ratio: 0.7; } /* same height for every poster */
.panel .watch { margin-left: 10px; color: var(--ink-dim); white-space: nowrap; vertical-align: 2px; transition: color 0.2s; }
.panel .watch:hover { color: var(--ink); }
.panel .body { max-width: 480px; padding-top: 0; }
.panel .body p + p { text-indent: 80px; }
.festivals { list-style: none; margin-bottom: 22px; font-size: 16px; line-height: 1.4; }
.credits { display: grid; grid-template-columns: auto 1fr; gap: 3px 18px; margin-top: 28px; font-size: 14px; line-height: 1.35; }
.credits dt { color: var(--ink-dim); }
.panel .side { display: flex; flex-direction: column; gap: 22px; padding-right: 40px; }
.panel .side .label { color: var(--ink); margin-bottom: 4px; }
.close { position: absolute; right: var(--side); top: 30px; font-size: 26px; line-height: 1; }
.strip { overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.strip-track { display: flex; width: max-content; }
.strip img { -webkit-user-drag: none; pointer-events: none; }
.strip .media { flex: 0 0 22vw; min-width: 260px; aspect-ratio: 16 / 10; }
body.viewing .close { display: none; }
.pager { display: flex; justify-content: space-between; padding: 10vh var(--gutter); color: var(--dim); }
.pager a:hover { color: var(--fg); }

/* ---------- Photos ---------- */
/* Side insets leave room for the "03 / 16 ← Prev Next → ✕ Close" controls on the right */
.stage { position: absolute; inset: 6vh max(var(--gutter), 350px) calc(6vh + 92px); container-type: size; display: grid; place-items: center; }
/* Thumbnail strip under the big photo: uniform square crops */
.thumbs {
  position: absolute; left: max(var(--gutter), 350px); right: max(var(--gutter), 350px); bottom: 5vh; height: 60px;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
}
.thumbs::-webkit-scrollbar { display: none; }
.thumbs button { flex: none; height: 100%; aspect-ratio: 1; opacity: 0.35; transition: opacity 0.25s; }
.thumbs button:hover, .thumbs button.on { opacity: 1; }
.thumbs .media { width: 100%; height: 100%; }
.stage .media { position: absolute; inset: 0; background: none !important; }
.stage .media img { object-fit: contain; }
.stage .ph { width: min(100cqw, calc(100cqh * var(--r, 1.5))); aspect-ratio: var(--r, 1.5); }

/* Contact sheet: every photo in its own proportions, masonry columns */
.contact-sheet { padding: 22vh var(--gutter) 22vh; }
.sheet-grid { columns: 5; column-gap: 16px; }
/* Colour / BN switch, same look as the main menu */
.sheet-bar { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 22px; }
.sheet-filter { display: flex; gap: 0.9em; }
.sheet-shuffle { color: var(--dim); transition: color 0.2s; }
.sheet-shuffle:hover { color: var(--fg); }
.sheet-grid { transition: opacity 0.25s ease; }
.sheet-grid.reshuffling { opacity: 0; }
.sheet-filter button { color: var(--dim); transition: color 0.2s; }
.sheet-filter button:hover, .sheet-filter button.active { color: var(--fg); }
.sheet-item { display: block; width: 100%; margin-bottom: 16px; break-inside: avoid; transition: opacity 0.35s ease; }
.sheet-grid:hover .sheet-item { opacity: 0.32; }
.sheet-grid .sheet-item:hover { opacity: 1; }
.natural { position: relative; overflow: hidden; }
/* Location of the open photo, just under it on the left (positioned by viewer.js) */
.viewer .place { position: absolute; color: var(--dim); font-size: 10px; }
.natural img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.7s ease; }
.natural.loaded img { opacity: 1; }
/* Opening a photo: the black fades in and the picture settles from slightly smaller, controls follow */
.viewer { position: fixed; inset: 0; z-index: 40; background: var(--bg); animation: fade 0.45s ease both; }
.viewer .stage { animation: settle 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both; }
.viewer .thumbs, .viewer .viewer-ctrl, .viewer .place { animation: fade 0.6s ease 0.35s both; }
@keyframes settle { from { opacity: 0; transform: scale(0.92); } }
/* Closing: the same moves played backwards — controls go first, the picture shrinks away, then the black.
   Separate keyframe names: reusing "fade"/"settle" would not restart the animation, it would just jump to the end. */
@keyframes fade-out { to { opacity: 0; } }
@keyframes settle-out { to { opacity: 0; transform: scale(0.92); } }
.viewer.closing { animation: fade-out 0.3s ease 0.15s both; pointer-events: none; }
.viewer.closing .stage { animation: settle-out 0.4s cubic-bezier(0.4, 0, 0.7, 0.2) both; }
.viewer.closing .thumbs, .viewer.closing .viewer-ctrl, .viewer.closing .place { animation: fade-out 0.2s ease both; }
@media (prefers-reduced-motion: reduce) { .viewer .stage { animation: fade 0.3s ease both; } }
.viewer[hidden] { display: none; }
body.viewing { overflow: hidden; }
body.viewing .nav { display: none; }
.stage .hit { position: absolute; top: 0; bottom: 0; width: 50%; cursor: w-resize; }
.stage .hit.next { right: 0; cursor: e-resize; }
/* Zauberberg-style controls in place of the menu: "← Prev  Next →  ✕ Close" */
.viewer-ctrl {
  position: fixed; right: var(--side); top: 50%; transform: translateY(-50%); z-index: 50;
  display: flex; align-items: baseline; gap: 0.55em; white-space: nowrap;
}
.viewer-ctrl button { transition: opacity 0.2s; }
.viewer-ctrl button:hover { opacity: 0.6; }
.viewer-ctrl .count { color: var(--dim); font-variant-numeric: tabular-nums; margin-right: 0.4em; }

/* ---------- Bio ---------- */
.bio { display: grid; grid-template-columns: var(--gutter) 170px minmax(0, 1fr) var(--gutter); padding-top: 22vh; }
/* Bio cover: panoramic photo across the top, the logo and menu sit over it */
.bio-cover { width: 100%; height: min(36.2vw, calc(50vh + 80px)); overflow: hidden; } /* ends just under the name and menu (fixed at mid-height) */
.bio-cover img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; } /* any crop comes off the bottom */
.has-cover .bio { padding-top: 10vh; }
.bio .toc { grid-column: 2; font-size: 17px; position: sticky; top: calc(50vh - 0.6em); align-self: start; display: flex; flex-direction: column; align-items: flex-start; }
.bio main { grid-column: 3; font-size: 15px; } /* smaller than the site text (19px) */
/* Contact page: bio text on the left, contacts / socials / portrait in a narrow column on the right */
/* Text and contact column as one centred group, with a moderate gap between them */
.bio-layout { display: grid; grid-template-columns: minmax(0, 400px) minmax(40px, 90px) 180px; justify-content: center; align-items: start; }
.bio-layout .contact-col { grid-column: 3; }
.side-label { color: var(--dim); font-size: 14px; margin-bottom: 16px; }
.about { max-width: 400px; } /* narrow, compact text block */
.about p { font-size: 16px; line-height: 1.45; }
.contact-col .links { margin-bottom: 44px; font-size: 14px; line-height: 1.6; }
.bio .toc a { color: var(--dim); transition: color 0.2s; }
.bio .toc a:hover, .bio .toc a.on { color: var(--fg); }
.bio main section { margin-bottom: 15vh; scroll-margin-top: 22vh; }
.bio .block { margin-bottom: 14px; font-size: 14px; }
.bio .block .label { display: block; margin-bottom: 1px; font-size: 10px; }
.bio p + p { text-indent: 80px; }
.bio .portrait { position: relative; width: 100%; aspect-ratio: 1; align-self: start; }
.bio .portrait .media { position: absolute; inset: 0; filter: grayscale(1); }
.bio .reel-title { font: inherit; color: var(--dim); margin-bottom: 18px; } /* same type and grey as the inactive Contact / Reel item */
.bio .frame { position: relative; aspect-ratio: 16 / 9; background: #0a0a0a; }
.bio .frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bio .frame .soon { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dim); }
.bio .links a { display: block; width: max-content; }
.arr { font-size: 0.78em; } /* shorter arrows next to links */
.foot { margin-top: 17vh; padding: 0 0 36px; font-size: 13px; line-height: 1.6; color: var(--dim); grid-column: 2 / 4; }

/* ---------- Touch screens (phones, iPad in any orientation): no hover ---------- */
@media (hover: none) {
  .tile .cap { opacity: 1; left: 12px; top: auto; bottom: 10px; transform: none; text-shadow: 0 0 12px rgba(0, 0, 0, 0.6); }
  .grid:hover .tile, .sheet-grid:hover .sheet-item { opacity: 1; }
  a, button { -webkit-tap-highlight-color: transparent; }
}

/* ---------- Tablet portrait and below: logo + nav move to the top ---------- */
@media (max-width: 1000px) {
  :root { --side: 28px; --gutter: 28px; --fs: 18px; }
  .home { height: 100dvh; }
  .logo { top: 26px; transform: none; font-size: 32px; }
  .nav { top: 30px; transform: none; }
  /* Fade titles out under the logo and at the bottom edge */
  .reel {
    -webkit-mask-image: linear-gradient(transparent 0, transparent 80px, #000 170px, #000 calc(100% - 90px), transparent);
    mask-image: linear-gradient(transparent 0, transparent 80px, #000 170px, #000 calc(100% - 90px), transparent);
  }
  /* Black band behind the fixed logo + nav so scrolled content doesn't run under them */
  body:not(.home):not(.project)::before {
    content: ''; position: fixed; top: 0; left: 0; right: 0; height: 120px; z-index: 45; pointer-events: none;
    background: linear-gradient(#000 60%, rgba(0, 0, 0, 0));
  }
  body.viewing::before { display: none; }
  .works { padding: 150px var(--gutter) 80px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .tile .cap { font-size: 12px; }
  .panel { grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 40px; padding-top: 80px; }
  .panel .side { grid-column: 1; grid-row: 2; padding-right: 0; flex-direction: row; gap: 32px; }
  .panel .body { grid-row: 1 / 3; grid-column: 2; }
  .panel .poster { height: 220px; }
  .strip .media { flex-basis: 45vw; min-width: 0; }
  .stage { inset: 120px var(--side) 120px; }
  .thumbs { bottom: 32px; height: 60px; left: var(--side); right: var(--side); }
  .viewer-ctrl { top: 30px; transform: none; }
  .viewer { height: 100dvh; }
  .contact-sheet { padding: 150px var(--gutter) 80px; }
  .sheet-grid { columns: 3; column-gap: 12px; }
  .sheet-item { margin-bottom: 12px; }
  .bio { grid-template-columns: minmax(0, 600px); padding: 150px var(--side) 0; }
  .bio .toc { grid-column: 1; position: static; flex-direction: row; gap: 0.9em; margin-bottom: 36px; }
  /* cover starts at the very top: logo and menu sit over the photo; the black header band returns once it scrolls away */
  .bio-cover { margin-top: 0; height: auto; aspect-ratio: 2000 / 724; } /* full panoramic frame, no side crop */
  /* name and menu sit along the bottom edge of the cover and scroll away with it */
  .has-cover .logo, .has-cover .nav { position: absolute; top: calc(100vw * 724 / 2000 - 12px); transform: translateY(-100%); }
  body.has-cover::before { display: none; }
  body.has-cover:not(.past-cover)::before { opacity: 0; }
  body.has-cover::before { transition: opacity .3s; }
  .has-cover .bio { padding-top: 32px; }
  .bio main { grid-column: 1; }
  .bio-layout { grid-template-columns: minmax(0, 400px) minmax(40px, 1fr) 170px; padding-right: 0; }
  .foot { grid-column: 1; }
}

/* ---------- Phones ---------- */
@media (max-width: 560px) {
  :root { --side: 16px; --gutter: 16px; --fs: 17px; }
  .logo { top: 18px; font-size: 24px; }
  .logo .role { font-size: 8px; }
  .nav { top: 19px; }
  .reel-list li { line-height: 26px; }
  body:not(.home):not(.project)::before { height: 96px; }
  .works { padding-top: 112px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 4px; }
  .tile .cap { left: 8px; bottom: 7px; font-size: 9px; line-height: 1.35; }
  /* Project page: stills first, then title, text and credits */
  body.project { display: flex; flex-direction: column; }
  .project .strip { order: -1; }
  .panel { grid-template-columns: 1fr; padding-top: 32px; }
  .close {
    position: fixed; top: 14px; right: 14px; z-index: 50; width: 36px; height: 36px;
    display: grid; place-items: center; font-size: 18px; color: #fff;
    background: rgba(0, 0, 0, 0.45); border-radius: 50%;
  }
  .panel .head { flex-direction: row; align-items: flex-end; }
  .panel .body, .panel .side { grid-column: 1; grid-row: auto; }
  .panel .poster { height: 160px; }
  /* Smaller project info on phones */
  .panel { font-size: 14px; }
  .panel .head .type { font-size: 17px; }
  .festivals { font-size: 12.5px; margin-bottom: 16px; }
  .credits { font-size: 11.5px; gap: 2px 14px; margin-top: 20px; }
  .panel .side .label { font-size: 9px; }
  .panel .body p + p { text-indent: 40px; }
  .strip .media { flex-basis: 82vw; }
  /* Photo viewer: close at the top, prev / count / next at the bottom for the thumb */
  .stage { inset: 90px var(--side) 130px; }
  .thumbs { bottom: 72px; height: 38px; gap: 5px; }
  .viewer-ctrl { top: auto; bottom: 20px; left: var(--side); right: var(--side); justify-content: space-between; font-size: 16px; }
  .viewer-ctrl .count { order: 2; margin: 0; }
  .viewer-ctrl .prev { order: 1; }
  .viewer-ctrl .next { order: 3; }
  .viewer-ctrl .close-viewer { position: fixed; top: 21px; right: var(--side); }
  .viewer .place { font-size: 8px; letter-spacing: 0.08em; } /* smaller, finer location caption */
  .contact-sheet { padding-top: 112px; }
  .sheet-grid { columns: 2; column-gap: 8px; }
  .sheet-bar { margin-bottom: 14px; }
  .sheet-item { margin-bottom: 8px; }
  .bio { padding-top: 112px; }
  .bio-layout { grid-template-columns: 1fr; }
  .bio-layout .contact-col { grid-column: 1; }
  .about p { font-size: 12px; line-height: 1.45; }
  .about-col { margin-bottom: 48px; }
  /* Phone: labels and links on the left, small portrait on the right */
  .contact-col { display: grid; grid-template-columns: 1fr 110px; column-gap: 16px; }
  .contact-col > :not(.portrait) { grid-column: 1; }
  .contact-col .links { margin-bottom: 28px; }
  .bio .portrait { grid-column: 2; grid-row: 1 / span 2; width: 95px; }
  .bio, .bio main { font-size: 12.5px; }
  .side-label { font-size: 12px; margin-bottom: 12px; }
  .bio .toc { font-size: 14px; }
  .has-cover .bio { padding-top: 24px; }
  .contact-col .links { font-size: 13px; line-height: 1.45; }
  /* Copyright well apart from the content, near the bottom of the screen */
  .foot { margin-top: 30vh; padding-bottom: 28px; font-size: 11px; }
  .bio p + p { text-indent: 40px; }
  .bio main section { margin-bottom: 10vh; }
}
/* ---------- Tablets (any iPad, any orientation): one layout for all of them ----------
   Older iPads are ~1024–1080 px wide in landscape, which fell into the desktop rules (250 px gutters, 350 px
   viewer margins) and squeezed the bio and the photos. Touch screens from 700 px up now share this layout. */
@media (hover: none) and (pointer: coarse) and (min-width: 700px) {
  :root { --side: 32px; --gutter: 32px; --fs: 17px; }
  .logo { top: 26px; transform: none; font-size: 32px; }
  .nav { top: 30px; transform: none; }
  body:not(.home):not(.project)::before {
    content: ''; position: fixed; top: 0; left: 0; right: 0; height: 112px; z-index: 45; pointer-events: none;
    background: linear-gradient(#000 60%, rgba(0, 0, 0, 0));
  }
  body.viewing::before { display: none; }

  /* Works, Photos */
  .works { padding: 140px var(--gutter) 80px; }
  .contact-sheet { padding: 140px var(--gutter) 80px; }

  /* Photo / still viewer: the photo takes the screen, small controls at the top right */
  .stage { inset: 96px var(--side) 120px; }
  .thumbs { left: var(--side); right: var(--side); bottom: 34px; height: 56px; }
  .viewer-ctrl { top: 30px; bottom: auto; left: auto; right: var(--side); transform: none; font-size: 14px; justify-content: flex-start; }
  .viewer-ctrl .close-viewer { position: static; }
  .viewer-ctrl .count, .viewer-ctrl .prev, .viewer-ctrl .next { order: 0; margin: 0 .4em 0 0; }
  .viewer .place { font-size: 9px; letter-spacing: .06em; }

  /* Bio: like the computer version, text on the left and contacts + portrait on the right */
  .bio { display: grid; grid-template-columns: minmax(0, 900px); justify-content: center; padding: 140px var(--side) 0; } /* one centred column, same width on every iPad */
  .bio .toc { grid-column: 1; position: static; flex-direction: row; gap: .9em; margin-bottom: 36px; font-size: 15px; }
  .bio main, .foot { grid-column: 1; }
  .bio-layout { grid-template-columns: minmax(0, 1fr) 180px; column-gap: 56px; }
  .about { max-width: 440px; } /* narrower text, kept to the left */
  .bio-layout .contact-col { grid-column: 2; display: block; }
  .about-col { margin-bottom: 0; }
  .about p { font-size: 17px; line-height: 1.45; }
  .contact-col .links { font-size: 14px; }
  .bio .portrait { width: 100%; margin: 0; grid-column: auto; grid-row: auto; order: 0; }
  .foot { margin-top: 18vh; padding-bottom: 32px; font-size: 12px; }

  /* Bio cover: full panoramic frame, name and menu along its bottom edge */
  .bio-cover { margin-top: 0; height: auto; aspect-ratio: 2000 / 724; }
  .has-cover .logo, .has-cover .nav { position: absolute; top: calc(100vw * 724 / 2000 - 14px); transform: translateY(-100%); }
  body.has-cover::before { display: none; }
  .has-cover .bio { padding-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}