/* Jeffrey Vogeding. Sizes, colours and motion follow the design pages in pages/
   (1440 wide) and reference/phone-select-work.dc.html (390 wide). */

:root {
  --s: max(1px, calc(100vw / 1440));   /* the design is drawn at 1440 wide; above that everything scales up with the screen */
  --y: #FFE600;
  --gold: #d4b627;   /* the yellow, darkened so it reads on white */
  --ink: #141414;
  --page: #FCFBFA;
  --charcoal: #48484c;
  --gray: #6e6e73;
  --mid: #86868b;
  --cur: #eceae4;   /* the chip behind the page you're on */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Darker Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font-family: var(--sans); background: var(--page); color: var(--ink);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
img:not([src]) { visibility: hidden; }
button, input { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; font-size: inherit; font-weight: inherit; }
main { flex-shrink: 0; }
:focus-visible { outline: calc(2 * var(--s)) solid var(--ink); outline-offset: calc(3 * var(--s)); }
.vh { position: absolute; width: calc(1 * var(--s)); height: calc(1 * var(--s)); overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip {
  position: absolute; left: calc(16 * var(--s)); top: calc(-80 * var(--s)); z-index: 30; padding: calc(12 * var(--s)) calc(16 * var(--s));
  background: var(--y); color: var(--ink); font-weight: 700; font-size: calc(13 * var(--s)); letter-spacing: calc(2 * var(--s)); text-transform: uppercase;
}
.skip:focus { top: calc(12 * var(--s)); }

/* ---- Header: lockup, tagline, menu ---------------------------------------- */
.hd {
  position: relative; z-index: 2; flex-shrink: 0; display: flex; flex-direction: column; align-items: center;
  gap: calc(36 * var(--s)); padding: calc(26 * var(--s)) calc(40 * var(--s)) calc(6 * var(--s)); background: #fff;
}
.id { display: flex; flex-direction: column; align-items: center; }
.brand { display: inline-flex; flex-direction: column; align-items: stretch; gap: calc(6 * var(--s)); color: #000; }
.brand img { height: calc(26 * var(--s)); width: auto; aspect-ratio: 14641.17 / 772; }
.role { display: flex; justify-content: space-between; font-weight: 500; font-size: calc(15 * var(--s)); line-height: 1; color: var(--charcoal); }
.tagline { margin: calc(2 * var(--s)) calc(-3 * var(--s)) 0 0; font-weight: 400; font-size: calc(16 * var(--s)); line-height: 1; letter-spacing: calc(3 * var(--s)); color: #4f4f54; text-align: center; }
.nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: calc(12 * var(--s)) calc(34 * var(--s)); font-size: calc(15.5 * var(--s)); line-height: 1; letter-spacing: calc(2 * var(--s)); text-transform: uppercase; }
.nav a { position: relative; z-index: 0; color: var(--charcoal); font-weight: 500; }
.nav a:hover, .nav a:focus-visible { color: var(--ink); }
/* The page you're on: a pale chip with a yellow rule under it, the same shape as the hover bar. */
.nav a[aria-current] { color: var(--ink); font-weight: 600; }
.nav a[aria-current] > .hb { background: var(--cur); box-shadow: inset 0 calc(-2 * var(--s)) 0 var(--y); transform: scaleX(1); }
.nav a:focus-visible { outline: none; }
/* The yellow bar: grows from the centre on hover, and sits behind the current page. */
.hb {
  position: absolute; z-index: -1; top: .17em; bottom: -.03em; left: -.22em; right: calc(-.22em + calc(2 * var(--s)));
  background: var(--y); transform: scaleX(0); transition: transform .32s cubic-bezier(.3, .7, .2, 1);
}
.nav a:hover > .hb, .nav a:focus-visible > .hb { transform: scaleX(1); }
.nav a[aria-current]:hover, .nav a[aria-current]:focus-visible { color: var(--ink); }

/* ---- Grids: Select Work, Entertainment, Fashion, Automotive ---------------- */
/* Six tracks, two per tile, so a short last row can sit centred. */
/* The bottom padding keeps the room the design leaves above the footer. */
.grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: calc(20 * var(--s)); padding: calc(8 * var(--s)) calc(28 * var(--s)) calc(105 * var(--s)); }
.tile { grid-column: span 2; display: flex; flex-direction: column; color: var(--ink); }
.grid > :nth-last-child(2):nth-child(3n+1) { grid-column: 2 / span 2; }
.grid > :last-child:nth-child(3n+1) { grid-column: 3 / span 2; }
.fm { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg, #e8e7e4); }
.fm .fr { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
/* Loops take turns: each is on screen for about three seconds of every nine. */
.fm .lp {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  transition: opacity .35s, transform .9s var(--ease); animation: turn 9s linear infinite;
}
@keyframes turn { 0% { opacity: 0; } 4% { opacity: 1; } 30% { opacity: 1; } 34% { opacity: 0; } 100% { opacity: 0; } }
.tile:hover .fr, .tile:focus-visible .fr { transform: scale(1.03); }
.tile:hover .lp, .tile:focus-visible .lp { opacity: 1 !important; transform: scale(1.03); }
.tile:focus-visible { outline: none; }
.tile:focus-visible .fm { outline: calc(2 * var(--s)) solid var(--ink); outline-offset: calc(3 * var(--s)); }
.fm.is-empty { display: flex; align-items: center; justify-content: center; background: #1a1a1c; }
.empty { font-size: calc(14 * var(--s)); line-height: 1; letter-spacing: calc(2.5 * var(--s)); color: #a1a1a6; }
.cap { display: flex; flex-direction: column; align-items: center; gap: calc(5 * var(--s)); padding: calc(10 * var(--s)) calc(16 * var(--s)) calc(30 * var(--s)); text-align: center; }
.ti { font-family: var(--serif); font-weight: 500; font-size: calc(20 * var(--s)); line-height: 1.1; color: var(--ink); }
.br { font-weight: 500; font-size: calc(12.5 * var(--s)); line-height: 1; letter-spacing: calc(1.5 * var(--s)); text-transform: uppercase; color: var(--mid); }
/* The yellow play tag: shows with the loop on hover, always there on touch screens. */
.tag {
  position: absolute; left: calc(12 * var(--s)); bottom: calc(12 * var(--s)); z-index: 1; display: inline-flex; align-items: center; gap: calc(7 * var(--s));
  height: calc(30 * var(--s)); padding: 0 calc(12 * var(--s)); border-radius: calc(15 * var(--s)); background: var(--y); color: var(--ink); z-index: 2;
  font-weight: 700; font-size: calc(11 * var(--s)); line-height: 1; letter-spacing: calc(2 * var(--s)); box-shadow: 0 calc(6 * var(--s)) calc(18 * var(--s)) rgba(0, 0, 0, .3);
  opacity: 0; transform: translateY(calc(4 * var(--s))); transition: opacity .3s, transform .3s var(--ease);
}
.tag svg { width: calc(10 * var(--s)); height: calc(10 * var(--s)); }
/* On hover the film itself plays in the tile, silent and looping. */
.fm .pv { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .45s; pointer-events: none; }
.fm .pv.on { opacity: 1; }
.tile:hover .tag, .tile:focus-visible .tag { opacity: 1; transform: none; }

/* ---- Footer ------------------------------------------------------------------ */
.ft {
  position: relative; z-index: 1; flex-shrink: 0; margin-top: auto; display: flex; justify-content: center;
  align-items: baseline; gap: calc(40 * var(--s)); padding: calc(64 * var(--s)) calc(40 * var(--s)) calc(44 * var(--s)); font-size: calc(18 * var(--s)); line-height: 1; letter-spacing: calc(1 * var(--s)); color: var(--gray);
}
.ft a { color: var(--ink); transition: color .2s; }
.ft a:hover { color: #8e8e93; }

/* ---- Film grain over every page ------------------------------------------ */
.grain {
  position: fixed; inset: 0; z-index: 10; pointer-events: none; opacity: .5; transform: translateZ(0); will-change: transform;
  background: url(assets/texture-or-background-cfd35d.png) 0 0 / calc(256 * var(--s)) calc(256 * var(--s));
}

/* ---- Yellow play buttons (The Sea, About) --------------------------------- */
.cta {
  display: inline-flex; align-items: center; gap: calc(9 * var(--s)); min-height: calc(44 * var(--s)); padding: 0 calc(18 * var(--s)); border: 0; border-radius: calc(22 * var(--s));
  background: var(--y); color: var(--ink); cursor: pointer; font-weight: 700; font-size: calc(12 * var(--s)); line-height: 1; letter-spacing: calc(2 * var(--s));
  box-shadow: 0 calc(6 * var(--s)) calc(18 * var(--s)) rgba(0, 0, 0, .3); transition: filter .2s; white-space: nowrap;
}
.cta:hover { filter: brightness(1.08); }
.cta svg { flex: none; }
.cta.sm { padding: 0 calc(14 * var(--s)); font-size: calc(11 * var(--s)); }
.go { position: absolute; z-index: 1; left: calc(20 * var(--s)); bottom: calc(20 * var(--s)); }
.go.sm { left: calc(12 * var(--s)); bottom: calc(12 * var(--s)); }

/* ---- Mailing list ---------------------------------------------------------- */
.pop {
  position: fixed; right: calc(28 * var(--s)); bottom: calc(28 * var(--s)); z-index: 12; width: calc(348 * var(--s)); max-width: calc(100vw - calc(32 * var(--s)));
  display: flex; flex-direction: column; gap: calc(10 * var(--s)); padding: calc(24 * var(--s));
  background: #fff; border: calc(1 * var(--s)) solid #e4e2de; box-shadow: 0 calc(18 * var(--s)) calc(48 * var(--s)) rgba(20, 20, 20, .16);
}
.pop[hidden] { display: none; }
.pop.in { animation: slide-in .6s var(--ease) both; }
@keyframes slide-in { from { opacity: 0; transform: translateX(calc(40 * var(--s))); } }
.pop-x {
  position: absolute; right: calc(6 * var(--s)); top: calc(6 * var(--s)); width: calc(44 * var(--s)); height: calc(44 * var(--s)); display: flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--gray); cursor: pointer;
}
.kick { font-weight: 700; font-size: calc(11 * var(--s)); line-height: 1; letter-spacing: calc(2.2 * var(--s)); color: var(--mid); }
.pop-h { font-family: var(--serif); font-weight: 500; font-size: calc(30 * var(--s)); line-height: 1.05; color: var(--ink); }
.pop-t, .pop .list-msg { font-weight: 500; font-size: calc(17 * var(--s)); line-height: 1.3; color: var(--charcoal); }
.list-form .row { display: flex; gap: calc(8 * var(--s)); margin-top: calc(6 * var(--s)); }
.in-email {
  flex-grow: 1; min-width: 0; height: calc(44 * var(--s)); padding: 0 calc(14 * var(--s)); border: calc(1 * var(--s)) solid #c9c7c3; border-radius: 0;
  background: #fff; color: var(--ink); font-weight: 500; font-size: calc(17 * var(--s));
}
.btn-join {
  flex: none; height: calc(44 * var(--s)); padding: 0 calc(20 * var(--s)); border: 0; border-radius: 0; background: var(--y); color: var(--ink);
  cursor: pointer; font-weight: 700; font-size: calc(13 * var(--s)); letter-spacing: calc(2 * var(--s)); transition: filter .2s;
}
.btn-join:hover { filter: brightness(1.06); }
.btn-join:disabled { opacity: .6; cursor: default; }
.list-msg a { text-decoration: underline; text-underline-offset: calc(2 * var(--s)); }
[data-state="done"] .list-form, [data-state="done"] .list-intro { display: none; }

/* ---- Film player --------------------------------------------------------- */
.lb {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0;
  padding: 1.5vh 2vw; border: 0; background: transparent; color: #fff; overflow: hidden;
}
.lb[open] { display: flex; align-items: center; justify-content: center; }
.lb::backdrop { background: rgba(12, 12, 14, .9); }
/* As big as the screen allows, in the film's own shape (--ar is set from the film once it loads). */
.lb-box { --ar: 1.7778; flex: none; width: min(96vw, calc((97vh - calc(56 * var(--s))) * var(--ar))); display: flex; flex-direction: column; gap: calc(12 * var(--s)); }
.lb-head { display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--s)); }
.lb-names { display: flex; align-items: baseline; flex-wrap: wrap; gap: calc(8 * var(--s)) calc(16 * var(--s)); min-width: 0; }
.lb-title { font-family: var(--serif); font-weight: 500; font-size: calc(30 * var(--s)); line-height: 1; color: #fff; }
.lb-meta { font-weight: 700; font-size: calc(11 * var(--s)); line-height: 1; letter-spacing: calc(2 * var(--s)); text-transform: uppercase; color: #c9c7c3; }
.lb-actions { display: flex; align-items: center; gap: calc(10 * var(--s)); flex-shrink: 0; }
.lb-x {
  width: calc(44 * var(--s)); height: calc(44 * var(--s)); display: flex; align-items: center; justify-content: center;
  border: calc(1 * var(--s)) solid rgba(255, 255, 255, .4); border-radius: calc(22 * var(--s)); background: none; color: #fff; cursor: pointer;
}
.lb-x:focus-visible, .lb-snd:focus-visible { outline-color: #fff; }
.lb-snd {
  height: calc(44 * var(--s)); display: inline-flex; align-items: center; gap: calc(8 * var(--s)); padding: 0 calc(16 * var(--s)) 0 calc(14 * var(--s));
  border: calc(1 * var(--s)) solid rgba(255, 255, 255, .4); border-radius: calc(22 * var(--s)); background: rgba(3, 14, 24, .35); color: #fff;
  cursor: pointer; font-weight: 700; font-size: calc(11 * var(--s)); line-height: 1; letter-spacing: calc(2 * var(--s)); transition: background .2s;
}
.lb-snd:hover { background: rgba(3, 14, 24, .7); }
.lb-snd[hidden] { display: none; }
.lb-snd .i-on, .lb-snd[aria-pressed="true"] .i-off { display: none; }
.lb-snd[aria-pressed="true"] .i-on { display: block; }
.lb-snd[aria-pressed="true"] { background: var(--y); border-color: var(--y); color: var(--ink); }
.lb-frame {
  position: relative; aspect-ratio: var(--ar); overflow: hidden; background: #000 var(--poster, none) center / cover no-repeat;
  box-shadow: 0 calc(30 * var(--s)) calc(80 * var(--s)) rgba(0, 0, 0, .6);
}
.lb-frame::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
/* Once a film is in, the frame is plain black: no still peeking out at the edges. */
.lb-frame:not(.is-mock) { background: #000; }
/* Next and previous: at the screen edges, beside the film or still. */
.lb-step { position: fixed; top: 50%; z-index: 2; width: calc(48 * var(--s)); height: calc(48 * var(--s)); margin-top: calc(-24 * var(--s));
  display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%;
  background: rgba(12, 12, 14, .55); color: #fff; cursor: pointer; transition: background .2s; }
.lb-step svg { width: calc(18 * var(--s)); height: calc(18 * var(--s)); }
.lb-step:hover { background: rgba(12, 12, 14, .85); }
.lb-prev { left: calc(10 * var(--s)); } .lb-next { right: calc(10 * var(--s)); }
.lb-step[hidden] { display: none; }
/* While a film or still is open, nothing behind it keeps animating. */
html.modal .fm .lp { display: none; }
html.modal .slides img, html.modal .reel img { animation-play-state: paused; }
.lb-frame:not(.is-mock)::before { display: none; }
/* On The Sea, the whole film frame plays the film, not just the yellow tag. */
.sea .fx.film, .sea .reel-fx { cursor: pointer; }
.lb-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* A film that isn't linked yet shows the frame as designed. */
.mock-play {
  position: absolute; left: 50%; top: 50%; width: calc(96 * var(--s)); height: calc(96 * var(--s)); margin: calc(-48 * var(--s)) 0 0 calc(-48 * var(--s)); border-radius: calc(48 * var(--s));
  background: var(--y); color: var(--ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 calc(10 * var(--s)) calc(30 * var(--s)) rgba(0, 0, 0, .4);
}
.mock-play svg { width: calc(30 * var(--s)); height: calc(30 * var(--s)); margin-left: calc(5 * var(--s)); }
.mock-bar { position: absolute; left: calc(24 * var(--s)); right: calc(24 * var(--s)); bottom: calc(22 * var(--s)); height: calc(3 * var(--s)); border-radius: calc(2 * var(--s)); background: rgba(255, 255, 255, .25); }
.mock-bar::before { content: ''; display: block; width: 18%; height: calc(3 * var(--s)); border-radius: calc(2 * var(--s)); background: var(--y); }
.mock-note {
  position: absolute; left: 0; right: 0; top: calc(50% + calc(70 * var(--s))); text-align: center;
  font-weight: 700; font-size: calc(11 * var(--s)); line-height: 1; letter-spacing: calc(2 * var(--s)); color: rgba(255, 255, 255, .85);
}

/* ---- The Sea -------------------------------------------------------------- */
.pg-sea { background: #000; color: #f1f6f9; }
.pg-sea :focus-visible { outline-color: #fff; }
.pg-sea .grain { z-index: 5; opacity: .35; }
.pg-sea .lb::backdrop { background: rgba(0, 5, 10, .9); }
.pg-sea .lb-meta { font-size: calc(10.5 * var(--s)); color: #a9c1cf; }
.pg-sea .lb-x, .pg-sea .lb-snd { border-color: rgba(241, 246, 249, .4); }
.pg-sea .lb-frame { border-radius: calc(10 * var(--s)); }
.pg-sea .hd { z-index: 4; min-height: calc(150 * var(--s)); padding-bottom: calc(18 * var(--s)); background: none; }
.pg-sea .brand { color: #fff; }
.pg-sea .role { color: #d3e3ec; }
.pg-sea .tagline { color: #c3d7e2; }
.pg-sea .nav a { color: #dce9f0; }
.pg-sea .nav a:hover, .pg-sea .nav a:focus-visible { color: var(--ink); }
.pg-sea .nav a[aria-current] { color: var(--y); }
.pg-sea .nav a[aria-current]:hover, .pg-sea .nav a[aria-current]:focus-visible { color: var(--y); }
.pg-sea .nav a[aria-current] > .hb { background: none; box-shadow: none; transform: scaleX(0); }

.sea {
  --side: clamp(calc(16 * var(--s)), 7.639vw, calc(110 * var(--s)));
  /* Hero height follows the page width (container units, so a scrollbar doesn't count). */
  --hero-h: clamp(calc(360 * var(--s)), 44.444vw, calc(800 * var(--s)));
  container-type: inline-size; position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, #143d66 0%, #103050 20%, #0b2238 42%, #071422 64%, #03080d 84%, #000 100%);
}
.sea-topo {
  position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none;
  background: url(assets/texture-or-background-ddf227.svg) center top / max(calc(1440 * var(--s)), 100%) auto no-repeat;
}
.wrap { width: min(calc(1220 * var(--s)), 100% - 2 * var(--side)); margin-inline: auto; }

.hero { position: relative; z-index: 3; height: var(--hero-h); overflow: hidden; background: #0a1c2a; }
/* The opening clip, over the stills; the gradients and the words stay on top of it. */
.hv { position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 1.1s var(--ease); }
.hv.off { opacity: 0; }
.hero.wait .slides img { animation-play-state: paused; }
.slides img, .reel img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.slides img:first-child, .reel img:first-child { opacity: 1; }
.hero::before, .hero::after { content: ''; position: absolute; z-index: 1; left: 0; right: 0; pointer-events: none; }
.hero::before { top: 0; height: calc(90 * var(--s)); background: linear-gradient(180deg, rgba(4, 16, 28, .55), rgba(4, 16, 28, 0)); }
.hero::after { bottom: 0; height: 55%; background: linear-gradient(0deg, rgba(2, 10, 18, .82), rgba(2, 10, 18, 0)); }
.hero-in { position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(56 * var(--s)); }
.hero-in .wrap { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(24 * var(--s)) calc(40 * var(--s)); }
.hero-txt { display: flex; flex-direction: column; gap: calc(14 * var(--s)); min-width: 0; }
.hero-k { font-weight: 700; font-size: calc(11.5 * var(--s)); line-height: 1; letter-spacing: calc(2.6 * var(--s)); color: #e6f0f5; }
.hero h1 { font-family: var(--serif); font-weight: 500; font-size: calc(56 * var(--s)); line-height: 1; color: #fff; }

.sea-body { position: relative; }
.zone { position: relative; }
.z1 { margin-top: clamp(calc(40 * var(--s)), 4.861vw, calc(70 * var(--s))); }
.z2 { margin-top: clamp(calc(56 * var(--s)), 6.25vw, calc(90 * var(--s))); }
.z3 { margin-top: clamp(calc(28 * var(--s)), 2.222vw, calc(32 * var(--s))); }
.z4 { margin-top: clamp(calc(48 * var(--s)), 5.556vw, calc(80 * var(--s))); }
.sea .fx { position: relative; z-index: 2; overflow: hidden; background: #0a1c2a; border-radius: calc(10 * var(--s)); box-shadow: 0 calc(16 * var(--s)) calc(36 * var(--s)) rgba(0, 6, 12, .5); }
.fx img, .fx picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.fx .fr { transition: transform .9s var(--ease); }
.fx:hover .fr { transform: scale(1.035); }
.shade { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; pointer-events: none; background: linear-gradient(0deg, rgba(0, 8, 14, .55), rgba(0, 8, 14, 0)); }
.txt { position: relative; z-index: 3; display: flex; flex-direction: column; gap: calc(12 * var(--s)); }
.sk { font-weight: 700; font-size: calc(12 * var(--s)); line-height: 1.4; letter-spacing: calc(2.2 * var(--s)); color: #c3d9e6; }
.sh2 { font-family: var(--serif); font-weight: 500; font-size: calc(62 * var(--s)); line-height: 1; color: #fff; }
.sp { margin-top: calc(2 * var(--s)); font-size: calc(19 * var(--s)); line-height: 1.42; color: #eaf3f8; }
.snote { font-weight: 700; font-size: calc(12 * var(--s)); line-height: 1.3; letter-spacing: calc(2.2 * var(--s)); color: var(--y); }
.slabel { font-weight: 700; font-size: calc(11.5 * var(--s)); line-height: 1; letter-spacing: calc(2.2 * var(--s)); color: #c3d9e6; }
/* A soft pool of dark under the words, so they sit clear of the contour lines. */
.s-garmin .txt::before, .s-itn .txt::before {
  content: ''; position: absolute; z-index: -1; inset: calc(-34 * var(--s)) calc(-40 * var(--s)) calc(-30 * var(--s)) calc(-36 * var(--s));
  background: radial-gradient(112% 104% at 14% 34%, rgba(4, 16, 27, .8), rgba(4, 16, 27, 0) 74%);
}
/* The two Garmin campaigns, named. */
.scamps { margin: calc(4 * var(--s)) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: calc(11 * var(--s)); }
.scamps li { display: flex; flex-direction: column; gap: calc(3 * var(--s)); padding-left: calc(14 * var(--s)); border-left: calc(2 * var(--s)) solid var(--y); }
.scamps b { font-family: var(--serif); font-weight: 500; font-size: calc(22 * var(--s)); line-height: 1.1; color: #fff; }
.scamps i { font-style: normal; font-weight: 600; font-size: calc(12 * var(--s)); line-height: 1; letter-spacing: calc(1.6 * var(--s)); text-transform: uppercase; color: #c3d9e6; }
.scap { position: relative; z-index: 2; margin-top: calc(12 * var(--s)); display: flex; flex-direction: column; gap: calc(5 * var(--s)); }
.scap .t { font-family: var(--serif); font-weight: 500; font-size: calc(19 * var(--s)); line-height: 1.1; color: #f1f6f9; }
.scap .m { font-weight: 600; font-size: calc(10.5 * var(--s)); line-height: 1; letter-spacing: calc(1.6 * var(--s)); color: #a9c1cf; }
.squote { position: relative; z-index: 3; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: calc(28 * var(--s)); line-height: 1.2; color: #f1f6f9; }

.s-garmin { display: grid; grid-template-columns: 400fr 790fr; column-gap: calc(30 * var(--s)); align-items: start; }
.s-garmin .film { aspect-ratio: 790 / 444; }
.s-stills { margin-top: clamp(calc(32 * var(--s)), 3.306vw, calc(47.6 * var(--s))); }
/* Four across, wrapping, so the campaign can grow. A vertical frame takes both rows. */
.s-stills .row { margin-top: calc(13.5 * var(--s)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(20 * var(--s)); }
.s-stills .fx { aspect-ratio: 4 / 3; }
.s-stills .fx.tall { aspect-ratio: auto; grid-row: span 2; }
.s-stills .fx.wide { aspect-ratio: auto; grid-column: span 2; }
/* Spanning frames take their size from the grid, not from the picture. */
.s-stills .fx.tall > .zoom, .s-stills .fx.wide > .zoom { position: absolute; inset: 0; }

.s-itn { display: grid; grid-template-columns: 780fr 400fr; column-gap: calc(40 * var(--s)); }
.reel-fx { aspect-ratio: 780 / 439; }
.s-itn .side { display: flex; flex-direction: column; justify-content: space-between; gap: calc(32 * var(--s)); }
.s-itn .media { display: grid; grid-template-columns: 150fr 230fr; column-gap: calc(20 * var(--s)); align-items: start; }
.poster { aspect-ratio: 150 / 200; }
.whites .film { aspect-ratio: 230 / 130; }

.s-btc { display: grid; grid-template-columns: 716fr 460fr; column-gap: calc(44 * var(--s)); align-items: start; }
.s-btc .row { margin-top: calc(13.5 * var(--s)); display: grid; grid-template-columns: 270fr 270fr 136fr; column-gap: calc(20 * var(--s)); }
.s-btc .fx { aspect-ratio: var(--ar, 270 / 180); }
.s-btc .fx:nth-child(3) { --ar: 136 / 180; }
.s-btc .squote { margin-top: calc(18 * var(--s)); }

.s-cuba { display: grid; grid-template-columns: 640fr 550fr; column-gap: calc(30 * var(--s)); align-items: start; }
.canyon { grid-column: 1; grid-row: 1; }
.canyon .fx { aspect-ratio: 640 / 427; }
/* Right of the canyon: two frames side by side, then two staggered below them. */
.cuba-r { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-columns: 180fr 30fr 50fr 30fr 260fr; }
.c1 { grid-column: 1 / 4; grid-row: 1; display: flex; flex-direction: column; gap: calc(20 * var(--s)); }
.c2 { grid-column: 3 / 6; grid-row: 1; display: flex; flex-direction: column; align-items: flex-end; gap: calc(28 * var(--s)); pointer-events: none; }
.c2 > * { pointer-events: auto; }
.sharks { aspect-ratio: 260 / 146; }
.diver { width: 69.231%; }
.diver .fx { aspect-ratio: 180 / 270; }
.shark { width: 76.471%; }
.shark .fx { aspect-ratio: 260 / 168; }
.arch { width: 100%; }
.arch .fx { aspect-ratio: 340 / 226; }
.s-cuba .closing {
  position: relative; z-index: 3; grid-column: 1; grid-row: 2; max-width: calc(600 * var(--s)); margin-top: calc(24.6 * var(--s));
  font-family: var(--serif); font-style: italic; font-weight: 500; font-size: calc(30 * var(--s)); line-height: 1.2; color: #f1f6f9;
}

.s-join { position: relative; z-index: 3; margin-top: clamp(calc(32 * var(--s)), 3.056vw, calc(44 * var(--s))); }
.s-join .list-form { display: flex; align-items: center; flex-wrap: wrap; gap: calc(18 * var(--s)); }
.join-label { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: calc(24 * var(--s)); line-height: 1; color: #fff; }
.s-join .in-email {
  flex: none; width: calc(280 * var(--s)); padding: 0 calc(16 * var(--s)); border: calc(1 * var(--s)) solid rgba(241, 246, 249, .45); border-radius: calc(22 * var(--s));
  background: rgba(3, 14, 24, .35); color: #fff; font-weight: 400; font-size: calc(16 * var(--s));
}
.s-join .in-email::placeholder { color: rgba(241, 246, 249, .6); }
.s-join .btn-join { padding: 0 calc(22 * var(--s)); border-radius: calc(22 * var(--s)); font-size: calc(12 * var(--s)); }
.s-join .btn-join:hover { filter: brightness(1.08); }
.s-join .list-msg { margin-top: calc(14 * var(--s)); font-size: calc(17 * var(--s)); line-height: 1.38; color: #e2edf3; }
.sea-ft {
  position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: calc(16 * var(--s)) calc(36 * var(--s));
  margin-top: clamp(calc(28 * var(--s)), 2.5vw, calc(36 * var(--s))); padding-bottom: clamp(calc(56 * var(--s)), 6.319vw, calc(91 * var(--s))); font-size: calc(17 * var(--s)); line-height: 1; letter-spacing: calc(1 * var(--s));
}
.sea-ft a { color: #f1f6f9; }
.sea-ft .up { color: var(--y); transition: opacity .2s; }
.sea-ft .up:hover { opacity: .75; }

/* Chart soundings and the fathom gauge down the left edge. */
.sd { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sd span { position: absolute; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: calc(15 * var(--s)); line-height: 1; color: rgba(214, 232, 244, .34); white-space: nowrap; }
.sd sub { font-size: calc(10 * var(--s)); vertical-align: calc(-3 * var(--s)); }
.gauge { position: absolute; z-index: 1; left: 0; top: calc(calc(150 * var(--s)) + var(--hero-h) + calc(18 * var(--s))); bottom: calc(174 * var(--s)); width: calc(80 * var(--s)); pointer-events: none; }
.gauge-k { position: absolute; left: calc(16 * var(--s)); top: 0; font-weight: 700; font-size: calc(9.5 * var(--s)); line-height: 1; letter-spacing: calc(2.4 * var(--s)); color: rgba(236, 244, 248, .5); }
.gauge-l { position: absolute; left: calc(22 * var(--s)); top: calc(26 * var(--s)); bottom: 0; width: calc(58 * var(--s)); clip-path: inset(calc(-6 * var(--s)) calc(-6 * var(--s)) 0 calc(-6 * var(--s))); }
.gauge-l::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: calc(1.5 * var(--s)); background: var(--y); opacity: .42; }
.gauge i { position: absolute; left: 0; height: calc(1.5 * var(--s)); background: var(--y); }
.gauge .mn { width: calc(7 * var(--s)); opacity: .42; }
.gauge .mj { width: calc(13 * var(--s)); opacity: .62; }
.gauge b { position: absolute; left: calc(20 * var(--s)); font-weight: 600; font-size: calc(11 * var(--s)); line-height: 1; letter-spacing: calc(1 * var(--s)); color: rgba(236, 244, 248, .6); }

/* ---- About ------------------------------------------------------------------- */
.pg-about { --aside: clamp(calc(16 * var(--s)), 8.333vw, calc(120 * var(--s))); position: relative; }
.pg-about .cta:hover { filter: brightness(1.06); }
.pg-about .lb-frame { border-radius: calc(8 * var(--s)); }
.about-topo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .35;
  background: url(assets/texture-or-background-3729dc.svg) center top / max(calc(1440 * var(--s)), 100%) auto no-repeat;
}
.about { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: calc(120 * var(--s)); padding: calc(88 * var(--s)) 0 calc(205 * var(--s)); }
.about > * { width: min(calc(1200 * var(--s)), 100% - 2 * var(--aside)); }
.lab { font-weight: 700; font-size: calc(13 * var(--s)); line-height: 1; letter-spacing: calc(2.4 * var(--s)); color: var(--gray); text-transform: uppercase; }
h2.lab { font-size: calc(18 * var(--s)); letter-spacing: calc(3.2 * var(--s)); color: var(--ink); }
.pg-about .ph { position: relative; overflow: hidden; border-radius: calc(8 * var(--s)); background: #d9d6d0; }
.pg-about .ph picture { display: block; width: 100%; height: 100%; }
.pg-about .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.pg-about .ph:hover img { transform: scale(1.03); }

.intro { display: grid; grid-template-columns: 420fr 696fr; column-gap: calc(84 * var(--s)); align-items: center; }
.portrait img { width: 100%; height: auto; aspect-ratio: 420 / 527; object-fit: cover; transform: rotate(-2deg); box-shadow: 0 calc(18 * var(--s)) calc(40 * var(--s)) rgba(20, 20, 20, .18); }
.intro-t { display: flex; flex-direction: column; gap: calc(26 * var(--s)); }
.intro h1 { font-family: var(--serif); font-weight: 500; font-size: calc(64 * var(--s)); line-height: 1.04; letter-spacing: calc(-.5 * var(--s)); color: var(--ink); }
.lede { max-width: calc(600 * var(--s)); font-weight: 500; font-size: calc(22 * var(--s)); line-height: 1.42; color: var(--charcoal); }
.bio-i { max-width: calc(640 * var(--s)); font-weight: 500; font-size: calc(21 * var(--s)); line-height: 1.5; color: #3a3a3e; }

.clients { display: flex; flex-direction: column; align-items: center; gap: calc(40 * var(--s)); }
.clients { margin-top: calc(-56 * var(--s)); }   /* the client list sits closer under the statement */
.bts { margin-top: calc(-50 * var(--s)); }       /* ...and the photographs closer under that */
.clients > .lab { text-align: center; }
.cl-grid { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: calc(40 * var(--s)); }
.cl { display: flex; flex-direction: column; align-items: center; gap: calc(16 * var(--s)); text-align: center; }
.cl ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: calc(4 * var(--s)); }
.cl li { font-family: var(--serif); font-weight: 500; font-size: calc(23 * var(--s)); line-height: 1.3; color: var(--ink); }

.beats { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: calc(40 * var(--s)); }
.beat .ph { aspect-ratio: 4 / 5; }

.bts { display: flex; flex-direction: column; gap: calc(24 * var(--s)); }
.bts .beats { margin-top: calc(16 * var(--s)); }
.bts-grid { display: grid; grid-template-columns: 780fr 400fr; column-gap: calc(20 * var(--s)); }
.pg-about .bts-film { aspect-ratio: 780 / 439; background: #1a1a1c; }
.bts-film .shade { height: 45%; background: linear-gradient(0deg, rgba(10, 10, 12, .55), rgba(10, 10, 12, 0)); }
.bts-side { display: flex; flex-direction: column; gap: calc(20 * var(--s)); }
.bts-side > .ph { aspect-ratio: 400 / 234; }
.bts-pair { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(20 * var(--s)); }
.bts-pair .ph { aspect-ratio: 190 / 185; }
.bts-cap { font-weight: 500; font-size: calc(17 * var(--s)); line-height: 1.3; color: var(--gray); }

.bio-list { display: grid; grid-template-columns: 600fr 520fr; column-gap: calc(80 * var(--s)); align-items: start; }
.bio-list.one { grid-template-columns: minmax(0, calc(620 * var(--s))); }
.bio { display: flex; flex-direction: column; gap: calc(18 * var(--s)); }
.bio p { font-weight: 500; font-size: calc(20 * var(--s)); line-height: 1.5; color: #3a3a3e; }
/* Press: the printed pages themselves, then a line from the interview. */
.zoom, .sheet { display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; }
.fx .zoom:focus-visible { outline-offset: calc(-3 * var(--s)); }
.ph .zoom:focus-visible { outline-offset: calc(-3 * var(--s)); }
.portrait .zoom { height: auto; }
.viewer { padding: 2vh 2vw; }
.viewer::backdrop { background: rgba(12, 12, 14, .93); }
/* Stills fill the screen whatever size the file is; click anywhere to close. */
.v-box { position: relative; width: 96vw; height: 96vh; display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.viewer img { -webkit-user-select: none; user-select: none; display: block; object-fit: contain; max-width: none; max-height: none; width: 100% !important; height: 100% !important; }
.hp { display: none; }   /* spam trap: people never see it, bots fill it in */
.viewer .lb-x { position: fixed; right: calc(24 * var(--s)); top: calc(24 * var(--s)); }
.press { display: flex; flex-direction: column; align-items: center; gap: calc(36 * var(--s)); }
.press > .lab { text-align: center; }
.sheets { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: calc(24 * var(--s)); }
.sheet { display: block; overflow: hidden; background: #fff; box-shadow: 0 calc(14 * var(--s)) calc(34 * var(--s)) rgba(20, 20, 20, .16); }
.sheet img { width: 100%; height: auto; display: block; transition: transform .9s var(--ease); }
.sheet:hover img { transform: scale(1.03); }
.press-q {
  max-width: calc(900 * var(--s)); text-align: center; font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: calc(32 * var(--s)); line-height: 1.2; color: var(--ink);
}
.press-c { display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--s)); text-align: center; }
.press-c a { font-family: var(--serif); font-style: normal; font-weight: 500; font-size: calc(22 * var(--s)); line-height: 1.2; box-shadow: inset 0 -.06em 0 rgba(20, 20, 20, .25); transition: box-shadow .25s; }
.press-c a:hover { box-shadow: inset 0 -.45em 0 var(--y); }
.press-c span { font-weight: 500; font-size: calc(12 * var(--s)); line-height: 1; letter-spacing: calc(2.4 * var(--s)); text-transform: uppercase; color: var(--gray); }
.list { display: flex; flex-direction: column; gap: calc(14 * var(--s)); }
.list-h { margin-top: calc(4 * var(--s)); font-family: var(--serif); font-weight: 500; font-size: calc(34 * var(--s)); line-height: 1.05; color: var(--ink); }
.list-t, .list .list-msg { font-weight: 500; font-size: calc(18 * var(--s)); line-height: 1.4; color: #3a3a3e; }
.list .list-form .row { width: min(calc(440 * var(--s)), 100%); margin-top: calc(16 * var(--s)); }
.about .closing { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: calc(40 * var(--s)); line-height: 1.1; color: var(--ink); text-align: center; }

/* ---- 404 --------------------------------------------------------------------- */
.nf { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(24 * var(--s)); padding: calc(120 * var(--s)) calc(16 * var(--s)) calc(40 * var(--s)); text-align: center; }
.nf-h { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: calc(40 * var(--s)); line-height: 1.1; }
.nf-a { font-weight: 600; font-size: calc(13.5 * var(--s)); line-height: 1; letter-spacing: calc(2 * var(--s)); text-transform: uppercase; box-shadow: inset 0 -.45em 0 var(--y); }

/* ---- Narrower screens ------------------------------------------------------- */
@media (max-width: 1099px) {
  .sea { --side: clamp(calc(16 * var(--s)), 4.5vw, calc(44 * var(--s))); --hero-h: clamp(calc(440 * var(--s)), 66vw, calc(600 * var(--s))); }
  .gauge, .sd { display: none; }
  .hero-in { bottom: calc(36 * var(--s)); }
  .hero-in .wrap { flex-direction: column; align-items: flex-start; }
  .hero h1 { font-size: clamp(calc(38 * var(--s)), 6.4vw, calc(56 * var(--s))); }
  .s-garmin, .s-itn, .s-btc, .s-cuba { grid-template-columns: minmax(0, 1fr); row-gap: calc(28 * var(--s)); }
  .s-btc .squote { margin-top: 0; }
  .cuba-r { grid-column: 1; grid-row: 2; max-width: calc(620 * var(--s)); }
  .s-cuba .closing { grid-row: 3; margin-top: calc(12 * var(--s)); }
  /* The small loops are 320 wide; keep them near that size once the page stacks. */
  .s-itn .media { max-width: calc(520 * var(--s)); }
}

@media (max-width: 899px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: calc(16 * var(--s)); padding: calc(8 * var(--s)) calc(24 * var(--s)) calc(64 * var(--s)); }
  .grid > :nth-last-child(2):nth-child(3n+1), .grid > :last-child:nth-child(3n+1) { grid-column: span 2; }
  .grid > :last-child:nth-child(2n+1) { grid-column: 2 / span 2; }

  .about { gap: calc(80 * var(--s)); padding: calc(56 * var(--s)) 0 calc(96 * var(--s)); }
  .intro { grid-template-columns: minmax(0, 1fr); row-gap: calc(48 * var(--s)); }
  .portrait { width: min(calc(340 * var(--s)), 80%); justify-self: center; }
  .intro h1 { font-size: clamp(calc(40 * var(--s)), 7vw, calc(56 * var(--s))); }
  .lede { font-size: calc(20 * var(--s)); }
  .cl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: calc(40 * var(--s)); }
  .beats { grid-template-columns: minmax(0, 1fr); row-gap: calc(56 * var(--s)); max-width: calc(560 * var(--s)); }
  .bts-grid { grid-template-columns: minmax(0, 1fr); row-gap: calc(16 * var(--s)); }
  .bts-side, .bts-pair { gap: calc(16 * var(--s)); }
  .bio-list { grid-template-columns: minmax(0, 1fr); row-gap: calc(64 * var(--s)); }
  .sheets { grid-template-columns: 1fr 1fr; gap: calc(16 * var(--s)); }
  .press-q { font-size: calc(26 * var(--s)); }
  .about .closing { font-size: calc(32 * var(--s)); }
}

/* The phone pattern (reference/phone-select-work.dc.html). */
@media (max-width: 859px) {
  .hd { gap: calc(16 * var(--s)); padding: calc(24 * var(--s)) calc(16 * var(--s)) calc(18 * var(--s)); }
  .id { gap: calc(6 * var(--s)); }
  .brand { gap: calc(5 * var(--s)); }
  .brand img { width: min(calc(311 * var(--s)), 100vw - calc(32 * var(--s))); height: auto; }
  .role { font-size: calc(10 * var(--s)); }
  .tagline { margin: 0; font-size: calc(14 * var(--s)); line-height: 1.15; letter-spacing: calc(.3 * var(--s)); color: var(--gray); }
  .nav { flex-wrap: wrap; justify-content: center; gap: calc(10 * var(--s)) calc(18 * var(--s)); font-size: calc(12 * var(--s)); letter-spacing: calc(1.8 * var(--s)); }
  .nav a { color: var(--gray); }
  .hb { right: calc(-.22em + calc(1.8 * var(--s))); }
  .pg-sea .hd { min-height: 0; }
}

@media (max-width: 599px) {
  .grid { display: flex; flex-direction: column; padding: calc(16 * var(--s)) calc(16 * var(--s)) 0; }
  .cap { gap: calc(4 * var(--s)); padding: calc(8 * var(--s)) calc(12 * var(--s)) calc(22 * var(--s)); }
  .ti { font-size: calc(18 * var(--s)); }
  .br { font-size: calc(11 * var(--s)); letter-spacing: calc(1.3 * var(--s)); }
  .empty { font-size: calc(12 * var(--s)); letter-spacing: calc(2 * var(--s)); }
  .ft { flex-direction: column; align-items: center; gap: calc(12 * var(--s)); padding: calc(36 * var(--s)) calc(16 * var(--s)) calc(32 * var(--s)); font-size: calc(15 * var(--s)); letter-spacing: calc(.5 * var(--s)); text-align: center; }
  .pop { left: calc(16 * var(--s)); right: calc(16 * var(--s)); bottom: calc(16 * var(--s)); width: auto; max-width: none; padding: calc(20 * var(--s)); }
  .pop-h { font-size: calc(26 * var(--s)); }
  .lb { padding: calc(16 * var(--s)) calc(12 * var(--s)); }
  .lb-title { font-size: calc(24 * var(--s)); }

  .hero h1 { font-size: calc(38 * var(--s)); }
  .sh2 { font-size: calc(46 * var(--s)); }
  .squote { font-size: calc(24 * var(--s)); }
  .s-cuba .closing { font-size: calc(26 * var(--s)); }
  .s-stills .row { grid-template-columns: 1fr 1fr; gap: calc(12 * var(--s)); grid-auto-flow: dense; }
  .s-stills .fx { aspect-ratio: 4 / 3; }
  .s-stills .fx.wide { aspect-ratio: 16 / 9; }   /* alone in its row on a phone, so it needs its own shape */
  .s-btc .row { grid-template-columns: 1fr 1fr; gap: calc(12 * var(--s)); }
  .s-btc .fx { aspect-ratio: 1; }
  .s-btc .fx:first-child { grid-column: span 2; aspect-ratio: 3 / 2; }
  .s-itn .media, .bts-pair { column-gap: calc(12 * var(--s)); }
  .s-join .list-form { gap: calc(12 * var(--s)); }
  .join-label { width: 100%; }
  .s-join .in-email { flex: 1; width: auto; min-width: 0; }
  .sea-ft { flex-direction: column; gap: calc(14 * var(--s)); }

  .about { gap: calc(64 * var(--s)); padding: calc(40 * var(--s)) 0 calc(56 * var(--s)); }
  .intro h1 { font-size: calc(38 * var(--s)); }
  .lede { font-size: calc(19 * var(--s)); }
  .cl-grid { column-gap: calc(16 * var(--s)); }
  .cl li { font-size: calc(19 * var(--s)); }
  .beat-l { font-size: calc(25 * var(--s)); }
  .bio p { font-size: calc(18 * var(--s)); }
  .list-h { font-size: calc(30 * var(--s)); }
  .about .closing { font-size: calc(28 * var(--s)); }
  .nf-h { font-size: calc(32 * var(--s)); }
}

/* Touch screens have no hover: loops play and the play tag stays up. */
@media (hover: none) {
  .tag { opacity: 1; transform: none; }
  .fm .lp { animation: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .fm .lp { animation: none; opacity: 0; }
  .slides img, .reel img { animation: none !important; }
  .pop.in { animation: none; }
  .hb, .fm .fr, .fx .fr, .pg-about .ph img { transition: none; }
}