/* Layout concept: the reel fills the first screen, then a calm charcoal page of glossy pastel film posters
     grouped by category. Windows 7 Aero glass on the controls, name bar and posters; pastel takes on the logo colours. */
  :root {
    color-scheme: dark;
    --bg: #141b1d;
    --surface: #1b2427;
    --fg: #e9f0ed;
    --muted: #a7b6b1;
    --mint: #a8dcc6;
    --aqua: #a9d4de;
    --peach: #e6bfa6;
    --rose: #d9a9ad;
    --sage: #c3d9a8;
    --ink: #15312b;
    --paper: #e9e4da;
    --ui: "Segoe UI", "Open Sans", system-ui, sans-serif;
    --poster: "Barlow Condensed", "Arial Narrow", sans-serif-condensed, sans-serif;
    --block: "Archivo", "Arial Black", "Segoe UI", sans-serif;
    --gloss: linear-gradient(to bottom, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .18) 49%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .12) 100%);
    --gutter-l: max(clamp(16px, 4vw, 48px), env(safe-area-inset-left, 0px));
    --gutter-r: max(clamp(16px, 4vw, 48px), env(safe-area-inset-right, 0px));
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in: cubic-bezier(.4, 0, 1, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  }
  html { scroll-behavior: smooth; }
  [hidden] { display: none !important; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--ui);
    font-size: 17px;
    line-height: 1.6;
  }
  a { color: inherit; }
  :focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
  .wrap {
    max-width: 1276px;
    margin-inline: auto;
    padding-left: var(--gutter-l);
    padding-right: var(--gutter-r);
  }
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .muted { color: var(--muted); }
  /* Big titles match the name in the bar: Archivo at its widest and heaviest, in caps. */
  .intro h1, .work-group h2, .contact h2 {
    font-stretch: 125%;
    font-variant-ligatures: none;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  /* A logo standing in for the letter O: sized to the capital height and sat on the baseline. */
  .letter-logo {
    display: inline-block;
    width: auto;
    height: .8em;
    margin-inline: .02em;
    vertical-align: -.04em;
  }
  /* The ringed logo has transparent padding (its disc fills 77% of the image). Size it so the disc
     reads slightly larger than the capitals, as round letters overshoot, and centre it on the cap height. */
  .intro .letter-logo {
    height: 1.04em;
    margin: -.1em -.08em 0;
    vertical-align: -.172em;
  }

  /* Aero glass buttons: pastel mint base, a glossy top half split hard at 50%, a light rim and a hover glow. */
  .aero {
    position: relative;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 8px;
    background: var(--gloss), rgba(168, 220, 198, .82);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .75),
      inset 0 0 0 1px rgba(255, 255, 255, .15),
      0 2px 8px rgba(0, 0, 0, .35);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    color: var(--ink);
    font: 600 14px/1 var(--ui);
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
    cursor: pointer;
    opacity: .85;
    transition: box-shadow .2s var(--ease-out), transform .12s var(--ease-out), opacity .2s var(--ease-out);
  }
  /* Glass buttons sit slightly see-through and come up to full strength under the pointer or keyboard focus. */
  .aero:hover, .aero:focus-visible, .aero:focus-within { opacity: 1; }
  .aero:hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .9),
      inset 0 0 0 1px rgba(255, 255, 255, .25),
      0 0 18px rgba(168, 220, 198, .6),
      0 2px 8px rgba(0, 0, 0, .35);
  }
  button.aero:active, a.aero:active { transform: scale(.97); }
  .aero svg { width: 18px; height: 18px; fill: currentColor; }
  .aero-icon { width: 46px; padding: 0; }
  .led {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(21, 49, 43, .3);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45);
    transition: background .2s var(--ease-out), box-shadow .2s var(--ease-out);
  }
  [aria-pressed="true"] .led {
    background: radial-gradient(circle at 35% 30%, #f1fff9, #5fd3a4 55%, #2b8a6a);
    box-shadow: 0 0 9px rgba(95, 211, 164, .95);
  }

  /* Sound: the speaker button and volume slider share one glass pill. */
  .sound { gap: 8px; padding: 0 14px 0 4px; cursor: default; }
  .sound-btn {
    display: grid;
    place-items: center;
    width: 34px;
    height: 32px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 6px;
    color: inherit;
    cursor: pointer;
    transition: transform .12s var(--ease-out);
  }
  .sound-btn:active { transform: scale(.97); }
  .sound input {
    --v: 0%;
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    height: 6px;
    margin: 0;
    border-radius: 3px;
    background: linear-gradient(to right, #2f7d68 var(--v), rgba(21, 49, 43, .25) var(--v));
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
    cursor: pointer;
  }
  .sound input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(21, 49, 43, .45);
    background: radial-gradient(circle at 35% 30%, #fff, #e8f6f0 45%, #9fcab9);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  }
  .sound input::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(21, 49, 43, .45);
    background: radial-gradient(circle at 35% 30%, #fff, #e8f6f0 45%, #9fcab9);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  }

  /* Name bar: clear over the reel, then a light glass bar fades in and the text inverts to dark. */
  .site-head {
    position: fixed;
    inset: 0 0 auto;
    z-index: 20;
    padding-top: env(safe-area-inset-top, 0px);
    color: #f4f8f6;
    transition: color .3s var(--ease-out);
  }
  .site-head::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(246, 252, 249, .95) 0%, rgba(232, 245, 239, .92) 50%, rgba(218, 238, 229, .9) 51%, rgba(226, 242, 235, .92) 100%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .7), 0 2px 12px rgba(0, 0, 0, .3);
    opacity: var(--bar, 0);
  }
  .site-head.solid { color: var(--ink); }
  .site-head .head-row {
    max-width: none;
    padding-left: max(18px, env(safe-area-inset-left, 0px));
    padding-right: max(18px, env(safe-area-inset-right, 0px));
  }
  .head-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 18px;
  }
  /* The name is centred in the banner and sized to hold its own against the Contact button. */
  .brand {
    display: block;
    line-height: 1;
    font-family: var(--block);
    font-size: clamp(20px, 2.7vw, 32px);
    font-weight: 900;
    font-stretch: 125%;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
    transition: text-shadow .3s var(--ease-out);
  }
  .solid .brand { text-shadow: none; }

  /* Reel: full screen, with an even Win7 glass frame running round the edges of the browser window
     in the old dark green. The name and Contact button float over the video. */
  .reel {
    position: relative;
    z-index: 1;
    height: 100svh;
    min-height: 440px;
    background: var(--bg);
  }
  .reel-window {
    --glass-tint: rgba(15, 42, 38, .92);
    box-sizing: border-box;
    height: 100%;
    padding: 8px;
  }
  .reel-screen {
    position: relative;
    box-sizing: border-box;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .7);
    border-radius: 5px;
    background: var(--surface);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .3);
    container-type: size;
  }
  .reel-frame {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .8s var(--ease-out);
  }
  .reel-frame.ready { opacity: 1; }
  .reel-frame iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100cqw, 177.78cqh);
    height: max(100cqh, 56.25cqw);
    border: 0;
    translate: -50% -50%;
  }
  .reel-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 20px;
    padding-inline: 16px;
    color: var(--muted);
    font-size: 15px;
    text-align: center;
  }
  .reel-placeholder img { width: min(26cqw, 200px); opacity: .14; }
  .reel-placeholder p { margin: 0; }
  .reel-controls {
    position: absolute;
    right: 14px;
    bottom: 14px;
    left: 14px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
  }
  /* "Scroll for more": a glass button in the bottom-left corner of the reel, in the same row as the controls.
     Its auto right margin pushes the play, volume and autoplay buttons to the right. */
  .scroll-hint { margin-right: auto; }
  /* While the reel plays untouched for a few seconds, its buttons and the Contact button fade away;
     any movement, tap, key or scroll brings them straight back. Hidden buttons can't be clicked by accident. */
  .reel-controls { transition: opacity .25s var(--ease-out); }
  .site-head .aero { transition: opacity .25s var(--ease-out), box-shadow .2s var(--ease-out), transform .12s var(--ease-out); }
  body.idle .reel-controls, body.idle .site-head .aero {
    opacity: 0;
    pointer-events: none;
    transition: opacity .8s var(--ease-in);
  }

  /* Intro */
  .intro { scroll-margin-top: 90px; }
  /* Background: the image is shown untouched, upright, zoomed to cover the screen and faded into the page colour. */
  .page-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: url("images/DREWGENT2.png") center 20% / cover no-repeat;
    opacity: .38;
    pointer-events: none;
  }

  /* Windows 7 glass windows, for both section blocks and poster tiles: a dark 1px outline with a white inner rim,
     6–8px corners, a see-through tinted frame with a light-dark-light sheen, diagonal reflection streaks and
     glints in both top corners, a thicker glass top edge, and the content in its own inset pane. */
  .panel, .poster, .reel-window {
    --streaks: linear-gradient(54deg,
      rgba(0, 0, 0, .06) 0 4%, rgba(255, 255, 255, .02) 6%, rgba(0, 0, 0, .06) 8% 10%, rgba(0, 0, 0, .06) 15% 16%,
      rgba(255, 255, 255, .035) 17% 18%, rgba(0, 0, 0, .06) 23% 24%, rgba(255, 255, 255, .05) 25% 26%,
      rgba(0, 0, 0, .06) 31% 33%, rgba(255, 255, 255, .05) 36% 40%, rgba(0, 0, 0, .06) 41% 41.5%,
      rgba(255, 255, 255, .05) 44% 45%, rgba(0, 0, 0, .06) 48% 49%, rgba(0, 0, 0, .06) 56% 56.5%,
      rgba(255, 255, 255, .05) 57% 63%, rgba(0, 0, 0, .06) 67% 69%, rgba(255, 255, 255, .05) 74.5% 79%,
      rgba(0, 0, 0, .06) 80% 84%, rgba(255, 255, 255, .035) 85% 86%, rgba(0, 0, 0, .06) 87%, rgba(255, 255, 255, .025) 90%)
      left center / 100vw 100vh no-repeat fixed;
    position: relative;
    border: 1px solid rgba(0, 0, 0, .7);
    border-radius: 8px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, .18) 50px, rgba(255, 255, 255, 0) 90px),
      linear-gradient(225deg, rgba(255, 255, 255, .18) 50px, rgba(255, 255, 255, 0) 90px),
      var(--streaks),
      linear-gradient(to right, rgba(255, 255, 255, .18), rgba(0, 0, 0, .1), rgba(255, 255, 255, .12)),
      var(--glass-tint);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 4px 18px rgba(0, 0, 0, .45);
  }
  /* One gap everywhere: above the first block, between blocks, and from each block to the screen edges. */
  .sections {
    --gap: clamp(20px, 7vw, 120px);
    padding: var(--gap) max(var(--gap), env(safe-area-inset-right, 0px)) 0 max(var(--gap), env(safe-area-inset-left, 0px));
  }
  .panel {
    --glass-tint: rgba(64, 128, 116, .36);
    padding: 0 8px 8px;
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
  }
  .panel > * { position: relative; }

  /* Window title bar: a slim glass strip with a caption and Win7 caption buttons hanging from the top edge. */
  .title-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    height: 30px;
    padding-left: 6px;
  }
  .caption {
    align-self: center;
    overflow: hidden;
    color: #f4f8f6;
    font: 400 13px/1 var(--ui);
    white-space: nowrap;
    text-overflow: ellipsis;
    text-shadow: 0 0 8px rgba(0, 0, 0, .9), 0 1px 1px rgba(0, 0, 0, .8);
  }
  /* The small caption only shows once a block is minimized, so the big title isn't repeated. */
  .panel .caption { opacity: 0; transition: opacity .2s var(--ease-out); }
  .panel.minimized .caption { opacity: 1; }
  /* Big titles stay on one line. When one won't fit inside its block, it moves up into the top border as the
     small caption, the same as a minimized block, instead of spilling past the edges. */
  .panel-body > h1, .panel-body > h2, .contact-main h2 { white-space: nowrap; }
  .panel.compact .caption { opacity: 1; }
  .panel.compact .panel-body > h1, .panel.compact .panel-body > h2, .panel.compact .contact-main h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .caption-buttons { display: flex; margin-top: -1px; }
  .cap-btn {
    display: grid;
    place-items: center;
    width: 28px;
    height: 20px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .65);
    border-top: 0;
    background:
      linear-gradient(to bottom, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .2) 45%, rgba(0, 0, 0, .06) 50%, rgba(255, 255, 255, .14) 100%),
      rgba(80, 140, 128, .5);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
    color: #fff;
    cursor: pointer;
    transition: box-shadow .15s var(--ease-out), background-color .15s var(--ease-out), opacity .2s var(--ease-out);
  }
  .cap-btn + .cap-btn { margin-left: -1px; }
  .cap-btn:first-child { border-bottom-left-radius: 5px; }
  .cap-btn:last-child { border-bottom-right-radius: 5px; }
  .cap-btn svg { width: 12px; height: 10px; fill: currentColor; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .9)); }
  .cap-btn:hover:not(:disabled) {
    background-color: rgba(120, 200, 180, .75);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 0 10px rgba(168, 230, 210, .85);
  }
  .cap-btn:active:not(:disabled) { background-color: rgba(30, 80, 70, .8); }
  .cap-btn:disabled { opacity: .45; cursor: default; }

  /* Minimizing collapses the window down to its title bar. */
  .panel-collapse {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr;
    transition: grid-template-rows .32s var(--ease-in-out);
  }
  .panel.minimized .panel-collapse { grid-template-rows: 0fr; transition-duration: .26s; }
  .panel-collapse-inner { min-width: 0; min-height: 0; }
  .panel.clipping .panel-collapse-inner { overflow: hidden; }
  .panel-body > h1, .panel-body > h2 { margin: 0 0 clamp(20px, 2.6vw, 36px); }
  .panel-body {
    padding: clamp(20px, 3.6vw, 52px);
    border: 1px solid rgba(0, 0, 0, .65);
    border-radius: 4px;
    background: rgba(8, 13, 15, .66);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .3);
  }
  .panel + .panel, #work > .panel:first-child, #work + .panel { margin-top: var(--gap); }
  .intro h1 {
    font-family: var(--block);
    font-size: clamp(40px, 8vw, 116px);
    font-weight: 900;
    line-height: .9;
  }
  .intro-bio { max-width: 58ch; margin: 0; }
  .intro-school { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
  /* When "VIDEO EDITOR" (and the logo inside it) moves up into the top border, the colour logo appears beside the bio,
     sized to the space; on a narrow block it drops below the text. */
  .intro-logo { display: none; }
  .intro.compact .intro-details {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px 24px;
    container-type: inline-size;
  }
  .intro.compact .intro-logo {
    display: block;
    width: clamp(64px, 24cqi, 150px);
    height: auto;
    animation: rise .4s var(--ease-out);
  }
  @container (max-width: 360px) {
    .intro-details > .intro-logo { grid-column: 1 / -1; justify-self: start; width: clamp(72px, 45cqi, 120px); }
  }

  /* Work */
  .work-group { scroll-margin-top: 80px; }
  .work-group h2 {
    font-family: var(--block);
    font-size: clamp(34px, 6.2vw, 88px);
    font-weight: 900;
    line-height: .9;
  }
  .work-sub + .work-sub { margin-top: clamp(120px, 13vw, 176px); }
  .work-sub h3 { margin: 0 0 20px; font-size: 18px; font-weight: 600; color: var(--muted); }
  /* As many 220px-or-wider tiles per row as fit, from one on a phone up to a maximum of five. */
  .poster-grid {
    --col-gap: clamp(20px, 2.6vw, 36px);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(min(100%, 220px), (100% - 4 * var(--col-gap)) / 5), 1fr));
    grid-auto-flow: row dense;
    gap: 40px var(--col-gap);
    container: tiles / inline-size;
  }

  /* Minimalist film posters in the same tinted glass, without the window frame: the film where the key art goes,
     title, then the billing details. */
  .poster {
    --glass-tint: color-mix(in srgb, var(--tone) 86%, transparent);
    display: flex;
    flex-direction: column;
    aspect-ratio: 2 / 3;
    max-width: 100%;
    padding: 16px;
    border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
    color: var(--paper);
    container-type: inline-size;
    transition: transform .18s var(--ease-in), box-shadow .18s var(--ease-in);
    animation: rise .5s var(--ease-out) backwards;
    animation-delay: calc(var(--i) * 30ms);
  }
  .poster-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 14px;
  }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } }
  .poster:hover, .poster:focus-within {
    z-index: 1;
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 0 22px rgba(168, 220, 198, .3), 0 22px 44px rgba(0, 0, 0, .5);
    transition: transform .24s var(--ease-out), box-shadow .24s var(--ease-out);
  }
  .poster-title {
    margin: 0;
    font-family: var(--poster);
    /* Sized from the tile's own width (cqi = 1% of it): bigger tiles get bigger titles. */
    font-size: clamp(26px, 17cqi, 60px);
    font-weight: 600;
    line-height: .95;
    text-wrap: balance;
  }
  /* Wide tiles keep the title in the left column, so it scales to that narrower column. */
  .poster.wide .poster-title { font-size: clamp(26px, 8.5cqi, 52px); }
  /* The window takes the video's own shape: widescreen for YouTube, upright for TikTok. */
  .poster-media {
    position: relative;
    flex: none;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: rgba(0, 0, 0, .3);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35);
  }
  .poster-media.vertical { aspect-ratio: 9 / 16; width: 40%; align-self: center; }
  /* Vertical videos get a wide tile: details on the left, the upright video window on the right. */
  .poster.wide { grid-column: span 2; aspect-ratio: auto; }
  .poster.wide .poster-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38%;
    grid-template-rows: auto auto 1fr;
    gap: 14px clamp(20px, 2.6vw, 32px);
  }
  .poster.wide .poster-media { grid-column: 2; grid-row: 1 / -1; width: 100%; }
  .poster.wide .poster-facts { align-self: end; }
  .poster-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
  .media-empty {
    display: grid;
    place-items: center;
    height: 100%;
    color: rgba(233, 228, 218, .55);
    font: 400 15px var(--ui);
  }
  .poster-play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; padding: 0; border-radius: 50%; translate: -50% -50%; }
  /* Details read as a list: a small role label over a larger name, then year and runtime side by side at the foot. */
  .poster-credits, .poster-facts {
    display: grid;
    gap: 12px;
    margin: 0;
    font-family: var(--poster);
  }
  .poster-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: auto; }
  .poster-credits dt, .poster-facts dt { font-size: 15px; font-weight: 400; line-height: 1.1; opacity: .68; }
  .poster-credits dd, .poster-facts dd { margin: 2px 0 0; font-size: 22px; font-weight: 600; line-height: 1.15; }
  .poster-facts dd { font-variant-numeric: tabular-nums; }
  /* Runtime sits in the right-hand column, flush with the right edge of the video window above. */
  .poster-facts .fact-runtime { grid-column: 2; text-align: right; }
  .poster-credits a { text-decoration: underline; text-decoration-color: rgba(233, 228, 218, .45); text-underline-offset: 3px; }
  .poster-credits a:hover { text-decoration-color: currentColor; }
  .media-link {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 12px;
    color: rgba(233, 228, 218, .82);
    font: 400 15px var(--ui);
    text-decoration: none;
  }
  .media-link .poster-play { position: static; translate: none; }
  .media-still {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ease-out);
  }
  .poster:hover .media-still { transform: scale(1.04); }
  .media-link.on-still {
    background: linear-gradient(to bottom, rgba(0, 0, 0, .1), rgba(0, 0, 0, .5));
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
  }
  .media-link:hover .poster-play {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .9),
      inset 0 0 0 1px rgba(255, 255, 255, .25),
      0 0 18px rgba(168, 220, 198, .6),
      0 2px 8px rgba(0, 0, 0, .35);
  }
  .media-link:active .poster-play { transform: scale(.97); }
  .media-link:hover span:last-child { color: var(--paper); }

  /* Contact: the email leads. */
  .contact { scroll-margin-top: 80px; }
  .contact h2 {
    font-family: var(--block);
    font-size: clamp(34px, 6.2vw, 88px);
    font-weight: 900;
    line-height: .9;
  }
  .contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 32px 64px;
  }
  .contact-main { min-width: 0; }
  /* Under the title: the portrait, in an inset frame like the reel's screen, with the email beside it,
     sitting on the portrait's bottom edge. The links run from the title's top to that same bottom edge. */
  .contact-person { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px clamp(16px, 2.4vw, 28px); }
  .contact-person .email-row { flex: 1 1 180px; min-width: 0; }
  .portrait {
    display: block;
    flex: none;
    width: clamp(110px, 12vw, 170px);
    height: auto;
    border: 1px solid rgba(0, 0, 0, .7);
    border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 6px 18px rgba(0, 0, 0, .4);
  }
  .contact-main h2 { margin: 0 0 clamp(20px, 2.4vw, 32px); }
  .contact-grid > .links { gap: 6px; align-content: space-between; }
  /* The email and the profile links scale with the room they have (cqi = 1% of their column's width),
     so they stay on one line inside the block instead of wrapping or spilling out. */
  .email-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; container-type: inline-size; }
  .email {
    min-width: 0;
    color: var(--muted);
    font-size: min(28px, 8.6cqi);
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
    user-select: all;
  }
  .copy { display: inline-grid; }
  .copy > span { grid-area: 1 / 1; transition: opacity .2s var(--ease-out), filter .2s var(--ease-out); }
  .copy-b { opacity: 0; filter: blur(3px); }
  .copy.done .copy-a { opacity: 0; filter: blur(3px); }
  .copy.done .copy-b { opacity: 1; filter: none; }
  .copy.pulse { animation: pulse .4s var(--ease-out); }
  @keyframes pulse { 40% { transform: scale(1.05); } }
  .links { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; container-type: inline-size; }
  .links a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: min(16px, 4cqi);
    font-size: min(17px, 7.4cqi);
    white-space: nowrap;
    text-decoration: none;
  }
  .links a:hover { color: var(--mint); }
  .links .handle { color: var(--muted); font-size: min(15px, 6.5cqi); }
  .site-foot { padding-block: var(--gap) 32px; font-size: 14px; }

  /* With room for only one tile per row, a wide tile takes the single column and stacks its video above the details. */
  @container tiles (max-width: 479px) {
    .poster.wide { grid-column: auto; }
    .poster.wide .poster-body { display: flex; flex-direction: column; }
    .poster.wide .poster-media { width: 60%; align-self: center; }
    .poster.wide .poster-title { font-size: clamp(26px, 17cqi, 60px); }
  }
  @media (max-width: 520px) {
    .brand { font-size: 4.3vw; }
  }
  /* When the controls can't share one row: volume on top, play beside autoplay underneath. */
  @media (max-width: 420px) {
    .reel-controls { display: grid; grid-template-columns: 1fr auto auto 1fr; }
    .reel-controls .sound { order: -1; grid-column: 2 / 4; justify-self: center; }
    #play-btn { grid-column: 2; }
    #autoplay-btn { grid-column: 3; }
    .reel-controls .scroll-hint { order: 1; grid-column: 1 / -1; justify-self: center; margin-right: 0; }
  }
  @media (max-width: 760px) {
    .contact-grid { grid-template-columns: minmax(0, 1fr); }
    .reel-controls { justify-content: center; }
    .poster-grid { gap: 24px 14px; }
    .poster { padding: 12px; }
    .poster-body { gap: 10px; }
    .poster-credits, .poster-facts { gap: 8px; }
    .poster-credits dt, .poster-facts dt { font-size: 12.5px; }
    .poster-credits dd, .poster-facts dd { font-size: 16px; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .poster { animation: none; }
    .panel-collapse, .panel.minimized .panel-collapse { transition: none; }
    .poster:hover, .poster:focus-within { transform: none; }
    .copy.pulse { animation: none; }
  }