/* ==========================================================================
   P4T Media — site styles
   One stylesheet, no build step. Sections follow the page order:
   tokens · fonts · base · type · layout · masthead · menu · buttons · hero ·
   home sections · page heads · about · services · work · press · music ·
   contact · footer · 404 · motion
   ========================================================================== */

/* Tokens ------------------------------------------------------------------ */
:root {
  /* Two inks and one orange. Every colour below is a light-dark() pair: the page
     follows the visitor's system, or the choice they made with the theme switch
     (data-theme on <html>, set before first paint by the script in the head). */
  color-scheme: light dark;

  /* Paper and ink: near white and near black */
  --paper: light-dark(#f6f5f2, #121211);
  --paper-2: light-dark(#eeedea, #1a1a19);
  --paper-3: light-dark(#e3e2de, #242423);
  --ink: light-dark(#121211, #f3f2ee);
  --ink-2: light-dark(#2f2f2d, #d8d7d2);
  --muted: light-dark(#666561, #a2a19c);
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 30%, transparent);

  /* Night: the near-black bands (hero, closing band, footer), the same in both
     themes, with a touch more depth when the page itself is dark */
  --night: light-dark(#121211, #0b0b0a);
  --night-2: light-dark(#1c1c1b, #151514);
  --rust: #2a2a28;
  --chalk: #f3f2ee;
  --chalk-2: rgb(243 242 238 / 0.74);
  --chalk-3: rgb(243 242 238 / 0.56);
  --chalk-line: rgb(243 242 238 / 0.16);

  /* P4T orange, from the brand book: a signal, used sparingly */
  --orange: #f05123;
  --orange-deep: light-dark(#b93c12, #ff6a3d); /* text-safe on paper */
  --orange-glow: #ff7a45;

  /* The old-site icon colours, kept for the icons only */
  --gold: #fcb733;
  --teal: #03949f;
  --cyan: #1cbdce;
  --pancake: #f58233;

  /* Type: Besley (Indestructible Type, OFL) for headlines, Work Sans (Wei Huang, OFL;
     the online font in Shai's brand book) for reading, controls and the small
     uppercase labels. Both self-hosted, see /assets/fonts/FONTS.txt. */
  --display: "Besley", "Iowan Old Style", Georgia, serif;
  --body: "Work Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sans: var(--body);
  --eyebrow: var(--body);

  /* Partner brands */
  --fnm-blue: #60afd7;
  --k180-black: #0d0d0d;

  --max: 1360px;
  --mast-h: clamp(76px, 9vw, 104px);
  --mast-pinned: clamp(64px, 6vw, 76px);
  --gutter: clamp(20px, 4.4vw, 64px);

  /* One spacing scale for the whole site. Every gap, margin and padding between
     blocks is one of these steps, so the rhythm reads the same on every page. */
  --space-s: clamp(16px, 1.8vw, 24px);
  --space-m: clamp(24px, 2.8vw, 40px);
  --space-l: clamp(32px, 4.4vw, 64px);
  --space-xl: clamp(48px, 6vw, 88px);
  --space-2xl: clamp(64px, 8.4vw, 120px);
  --section: clamp(88px, 11vw, 160px);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* Vinyl: fine grooves, gaps between songs, a glossy lead-in edge */
  --vinyl:
    radial-gradient(circle, transparent 0 60%, rgb(0 0 0 / 0.55) 60.4% 61.2%, transparent 61.6% 79%, rgb(0 0 0 / 0.55) 79.4% 80.2%, transparent 80.6% 96%, rgb(255 255 255 / 0.09) 96.4% 97.2%, transparent 97.6%),
    repeating-radial-gradient(circle, #121212 0 1.1px, #1c1c1c 1.1px 2.3px);
  --vinyl-sheen: conic-gradient(from 200deg, transparent 0deg, rgb(255 255 255 / 0.17) 24deg, transparent 52deg, transparent 180deg, rgb(255 255 255 / 0.12) 204deg, transparent 232deg);

}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Fonts ------------------------------------------------------------------- */
@font-face {
  font-family: "Besley";
  src: url("/assets/fonts/besley.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Besley";
  src: url("/assets/fonts/besley-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("/assets/fonts/work-sans.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("/assets/fonts/work-sans-italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

/* Base -------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--mast-pinned) + 20px);
  background: var(--paper);
}
/* In-page links glide, once the visitor is using the page. Arriving at a
   #section jumps straight there, so artwork travelling in lands in the right place. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.js),
  html.is-settled { scroll-behavior: smooth; }
}
/* With buttery scrolling on (site.js), the glide does the smoothing: the browser
   jumps, so the two never pull against each other. Videos ignore the pointer
   only while the page is gliding past them. */
html.lenis { scroll-behavior: auto; }
.lenis-smooth iframe { pointer-events: none; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1.0625rem, 1.025rem + 0.12vw, 1.1875rem); /* body.default */
  line-height: 1.52;
  letter-spacing: -0.008em;
  font-optical-sizing: auto;
  font-synthesis: none;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main { flex: 1 0 auto; }

img,
svg,
video,
picture { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

button { font: inherit; color: inherit; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
h1, h2, h3, h4 { font-weight: 500; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

::selection { background: var(--orange); color: #fff; }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: 12px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  font: 600 0.875rem/1 var(--sans);
  border-radius: 999px;
  transform: translateY(-160%);
  transition: transform 0.25s var(--ease-out);
}
.skip-link:focus { transform: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Hidden means hidden, whatever display a component sets */
[hidden] { display: none !important; }

/* Type -------------------------------------------------------------------- */
/* The small uppercase label over sections and cards */
.label {
  font-family: var(--eyebrow);
  font-size: clamp(0.75rem, 0.731rem + 0.055vw, 0.8125rem);
  font-weight: 500;
  letter-spacing: 0.085em;
  line-height: 1.28;
  text-transform: uppercase;
}

.display {
  font-family: var(--display);
  font-size: clamp(2.75rem, 1.15rem + 6.4vw, 7.25rem);
  font-weight: 500;
  line-height: 0.93;
  letter-spacing: -0.031em;
  text-wrap: balance;
}

.h1 {
  font-family: var(--display);
  font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5.75rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.031em;
  text-wrap: balance;
}

.h2 {
  font-family: var(--display);
  font-size: clamp(2.1rem, 1.35rem + 2.9vw, 3.9rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.031em;
  text-wrap: balance;
}

.h3 {
  font-family: var(--display);
  font-size: clamp(1.45rem, 1.2rem + 0.9vw, 2rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.lead {
  font-size: clamp(1.25rem, 1.11rem + 0.43vw, 1.625rem);
  line-height: 1.34;
  letter-spacing: -0.014em;
  text-wrap: pretty;
}

.prose { max-width: 36em; }
.prose p { text-wrap: pretty; }
.prose p + p { margin-top: 1.05em; }
.prose a { text-decoration-color: color-mix(in srgb, var(--orange) 70%, transparent); text-decoration-thickness: 1.5px; }
.prose a:hover { text-decoration-color: var(--orange); }

em, .italic { font-style: italic; }
.accent { color: var(--orange); }
.on-paper .accent,
.accent-deep { color: var(--orange-deep); }

.small {
  font-family: var(--sans);
  font-size: clamp(0.875rem, 0.856rem + 0.06vw, 0.9375rem);
  line-height: 1.42;
  letter-spacing: 0.003em;
}

/* Layout ------------------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }
.section:not(.dark) + .section:not(.dark),
.section.dark + .section.dark { padding-top: 0; }

.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* Night surfaces render their own colours as the dark theme does, so tokens used
   inside them (ink, paper, lines, form controls) turn light-on-dark by themselves */
:is(.dark, .hero, .cta-band, .footer, .sheet, .viewer, .now-bar, .fab, .consent, .lost, .masthead[data-theme="dark"]) { color-scheme: dark; }

.dark {
  --line: var(--chalk-line);
  --muted: var(--chalk-3);
  /* the hero's grain, so every night band is the same stock (and glows never band) */
  background: url("/assets/img/grain-quiet.png") 0 0 / 240px, var(--night);
  background-blend-mode: overlay, normal;
  color: var(--chalk);
}

/* Grid lines: the fine square grid Shai liked on the Framer site, behind the first
   screen of every page. It draws itself across as the page opens and drifts a
   little slower than the page as it scrolls (the motion section, under Motion). */
.gridlines {
  --cell: 56px;
  --grid-line: color-mix(in srgb, var(--ink) 7%, transparent);
  position: absolute;
  inset: calc(var(--mast-h) * -1) 0 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(130% 95% at 28% 30%, #000 25%, transparent 78%);
  mask-image: radial-gradient(130% 95% at 28% 30%, #000 25%, transparent 78%);
}
.gridlines::before,
.gridlines::after {
  content: "";
  position: absolute;
  inset: -30vh 0 0;
}
.gridlines::before { background: linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px) 0 0 / 100% var(--cell); }
.gridlines::after { background: linear-gradient(to right, var(--grid-line) 1px, transparent 1px) 0 0 / var(--cell) 100%; }
:is(.hero, .dark) .gridlines { --grid-line: rgb(243 242 238 / 0.06); }
.hero .gridlines { inset: 0; }
:is(.page-head, .about-hero) { position: relative; isolation: isolate; }

/* Section heading: a label on a hairline, then the headline */
.sect-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-bottom: var(--space-xl);
}
.sect-head__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-strong);
  color: var(--muted);
}
.dark .sect-head__bar { border-color: var(--chalk-line); }
.sect-head__bar a.label {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin-block: -9px;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.35em;
  transition: color 0.2s, text-decoration-color 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  .sect-head__bar a.label:hover { color: var(--orange-deep); text-decoration-color: currentColor; }
}
/* With no label on it, the hairline sits right over the headline; a lone link goes right */
.sect-head__bar:empty { padding-top: 0; }
.sect-head__bar > a.label:only-child { margin-left: auto; }
.sect-head__title { max-width: 18ch; }

/* The P4T tab: the logo's orange box, used as a small marker */
.tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tab::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--orange);
  flex: none;
}

/* Links with an arrow that nudges on hover */
.arrow {
  width: 0.9em;
  height: 0.9em;
  flex: none;
  transition: transform 0.2s var(--ease-out);
}
.arrow--ne { transform: rotate(-45deg); }

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(var(--line-strong), var(--line-strong)) 0 100% / 100% 1px no-repeat;
  padding-bottom: 3px;
  transition: color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .link:hover { background-image: linear-gradient(currentColor, currentColor); }
  .link:hover .arrow { transform: translateX(3px); }
  .link:hover .arrow--ne { transform: rotate(-45deg) translateX(3px); }
}

/* Buttons ----------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 600 0.9375rem/1 var(--sans);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.16s var(--ease-out), background-color 0.25s, color 0.25s, border-color 0.25s;
}
.btn:active { transform: scale(0.97); }
/* The main action: ink on paper, chalk on night (the class keeps its old name; the
   orange now only comes up under the pointer) */
.btn--orange { --btn-bg: var(--ink); --btn-fg: var(--paper); }
.btn--ghost { --btn-bg: transparent; --btn-fg: currentColor; border-color: currentColor; }
.dark .btn--ghost { border-color: var(--chalk-3); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .arrow { transform: translateX(3px); }
  .btn:hover .arrow--ne { transform: rotate(-45deg) translateX(3px); }
  .btn--orange:hover { --btn-bg: var(--orange); --btn-fg: #121211; }
  .btn--ghost:hover { border-color: currentColor; background: color-mix(in srgb, currentColor 7%, transparent); }
  .btn:not(.btn--orange, .btn--ghost):hover { --btn-bg: var(--ink-2); }
}

/* Masthead ---------------------------------------------------------------- */
.masthead {
  --mast-bg: var(--paper);
  position: relative;
  z-index: 30;
  color: var(--ink);
}
/* Named on the inside, not the bar: a view-transition name would stop the bar's
   backdrop blur from seeing the page behind it */
.masthead__inner { view-transition-name: masthead; }
.masthead[data-theme="dark"] {
  /* sits over the dark hero beneath it */
  --mast-bg: var(--night);
  position: absolute;
  inset: 0 0 auto;
  color: var(--chalk);
}

/* With JavaScript the masthead stays with the reader: it tucks away while they
   scroll down and slides back the moment they scroll up. site.js sets
   is-pinned (off the top), is-hidden (scrolling down) and is-dark (over a dark
   section). Without JavaScript it simply scrolls with the page. */
.js .masthead {
  position: fixed;
  inset: 0 0 auto;
  transition:
    transform 0.5s var(--ease-drawer),
    color 0.3s var(--ease-out);
}
.js body:has(> .masthead[data-theme="light"]) { padding-top: var(--mast-h); }
.js .masthead::before {
  /* the bar behind the masthead, shown once the page has moved */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--mast-bg) 76%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(18px);
  backdrop-filter: saturate(1.5) blur(18px);
  box-shadow: 0 1px 0 var(--line);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.js .masthead.is-pinned::before { opacity: 1; }
.js .masthead.is-dark { color-scheme: dark; --mast-bg: var(--night); --line: var(--chalk-line); color: var(--chalk); }
.js .masthead.is-light { color-scheme: inherit; --mast-bg: var(--paper); --line: color-mix(in srgb, var(--ink) 14%, transparent); color: var(--ink); }
.js .masthead.is-hidden { transform: translateY(-100%); }
/* steady.js hands the bar over from the last page: no transitions for that frame */
.js .masthead.is-arriving,
.js .masthead.is-arriving *,
.js .masthead.is-arriving::before { transition: none !important; }
.js .masthead.is-hidden::before { box-shadow: none; }

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--mast-h);
  transition: min-height 0.45s var(--ease-drawer);
}
.js .masthead.is-pinned .masthead__inner { min-height: var(--mast-pinned); }

.brand {
  display: block;
  width: clamp(56px, 4.8vw, 66px);
  flex: none;
  border-radius: 50%;
  transition: width 0.45s var(--ease-drawer);
}
.js .masthead.is-pinned .brand { width: clamp(46px, 3.8vw, 52px); }
.brand svg { width: 100%; height: auto; overflow: visible; }
/* The logo is the way Home: a ring in the masthead's own ink when tabbed to */
.brand:focus-visible { outline-color: currentColor; outline-offset: 4px; border-radius: 50%; }

/* The logo: the brand book's orange disc with P4T MEDIA in white */
.logo__disc { fill: var(--orange); }
.logo__p4t,
.logo__media { fill: #fff; }
.mark { display: block; width: 100%; height: auto; }

.nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav a {
  position: relative;
  display: inline-block;
  padding: 8px 0;
  font: 500 0.9375rem/1 var(--sans);
  letter-spacing: 0.01em;
  text-decoration: none;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.25s var(--ease-out);
}
.nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--orange); height: 2px; }
@media (hover: hover) and (pointer: fine) {
  .nav a:hover::after { transform: scaleX(1); transform-origin: left; }
}
.nav .nav__cta {
  padding: 11px 18px;
  border: 1px solid currentColor;
  border-radius: 999px;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.nav .nav__cta::after { display: none; }
/* dark ink on the orange in both themes (light ink on it is under 4.5:1) */
.nav .nav__cta[aria-current="page"] { background: var(--orange); border-color: var(--orange); color: #121211; }
@media (hover: hover) and (pointer: fine) {
  .nav .nav__cta:hover { background: currentColor; }
  .masthead .nav .nav__cta:hover span { color: var(--paper); }
  .masthead[data-theme="dark"] .nav .nav__cta:hover span,
  .js .masthead.is-dark .nav .nav__cta:hover span { color: var(--night); }
  .js .masthead.is-light .nav .nav__cta:hover span { color: var(--paper); }
}

.menu-btn {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 4px 0 14px;
  border: 0;
  background: none;
  font: 500 0.8125rem/1 var(--eyebrow);
  letter-spacing: 0.085em;
  text-transform: uppercase;
  cursor: pointer;
}
.menu-btn__icon {
  display: grid;
  gap: 5px;
  width: 22px;
}
.menu-btn__icon span { height: 1.5px; background: currentColor; border-radius: 2px; }
.menu-btn__icon span:last-child { width: 14px; justify-self: end; }

@media (max-width: 860px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .masthead .theme-btn { margin-left: auto; margin-right: -12px; }
}

/* Theme switch: light, dark, or the system's (site.js) ---------------------- */
/* Phosphor's sun, moon and half circle, one turning into the next */
.theme-btn {
  display: none;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin-inline: -4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: transform 0.16s var(--ease-out), background-color 0.2s ease;
}
.js .theme-btn { display: inline-grid; }
.theme-btn:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) {
  .theme-btn:hover { background: color-mix(in srgb, currentColor 9%, transparent); }
}
.theme-icon { width: 21px; height: 21px; overflow: visible; }
.theme-icon > *,
.theme-icon__rays {
  transform-box: view-box;
  transform-origin: 50% 50%;
  transition: transform 0.5s var(--ease-out), opacity 0.22s ease, filter 0.22s ease;
}
/* The icon reads the choice from <html data-theme>, which the head script sets
   before the first paint, so arriving on a page never animates it */
:root:not([data-theme="light"]) .theme-icon__sun { opacity: 0; transform: rotate(90deg) scale(0.55); filter: blur(2px); }
:root:not([data-theme="light"]) .theme-icon__rays { transform: scale(0.5); }
:root:not([data-theme="dark"]) .theme-icon__moon { opacity: 0; transform: rotate(-80deg) scale(0.55); filter: blur(2px); }
:root:is([data-theme="light"], [data-theme="dark"]) .theme-icon__auto { opacity: 0; transform: rotate(180deg) scale(0.55); filter: blur(2px); }
.masthead .nav { margin-left: auto; }

/* While the theme changes, the new look widens out from the button. Named parts
   (the masthead, the footer) join the page for that moment, so all of it turns. */
.is-theming .masthead__inner,
.is-theming :is(.footer, .now-bar) { view-transition-name: none !important; }
.is-theming::view-transition-old(root),
.is-theming::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.theme-ring {
  position: fixed;
  inset: 0;
  z-index: 200;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.theme-ring circle { fill: none; stroke: var(--orange); stroke-width: 1.5; }

/* Mobile menu (a native popover; works without JavaScript) ------------------ */
.sheet {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--night);
  color: var(--chalk);
  overflow: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.32s var(--ease-out), transform 0.42s var(--ease-drawer), overlay 0.42s allow-discrete, display 0.42s allow-discrete;
}
.sheet { display: none; }
.sheet.is-open { display: block; opacity: 1; transform: none; }
@supports selector(:popover-open) {
  .sheet:popover-open { display: block; opacity: 1; transform: none; }
  @starting-style {
    .sheet:popover-open { opacity: 0; transform: translateY(-12px); }
  }
}
.sheet::backdrop { background: transparent; }
.sheet .brand { color: var(--chalk); }

.sheet__inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-bottom: max(28px, env(safe-area-inset-bottom));
}
.sheet__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
}
.sheet__close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 4px 0 14px;
  border: 0;
  background: none;
  color: var(--chalk);
  font: 500 0.8125rem/1 var(--eyebrow);
  letter-spacing: 0.085em;
  text-transform: uppercase;
  cursor: pointer;
}
.sheet__close svg { width: 18px; height: 18px; }
.sheet__nav { margin-top: clamp(24px, 6vh, 64px); }
.sheet__nav ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--chalk-line);
}
.sheet__nav li { border-bottom: 1px solid var(--chalk-line); }
.sheet__nav a {
  font-family: var(--display);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0 12px;
  font-size: clamp(2.2rem, 9vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.031em;
  text-decoration: none;
}
.sheet__nav a small {
  font: 600 0.75rem/1 var(--sans);
  letter-spacing: 0.14em;
  color: var(--chalk-3);
}
.sheet__nav a[aria-current="page"] { color: var(--orange); }
.sheet__nav li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 40ms + 80ms);
}
.sheet.is-open li { opacity: 1; transform: none; }
@supports selector(:popover-open) {
  .sheet:popover-open li { opacity: 1; transform: none; }
  @starting-style {
    .sheet:popover-open li { opacity: 0; transform: translateY(10px); }
  }
}
.sheet__foot {
  margin-top: auto;
  padding-top: 40px;
  display: grid;
  gap: 10px;
  color: var(--chalk-2);
}
.sheet__foot a { font: 500 1rem/1.4 var(--sans); }

/* Hero (home) -------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: var(--mast-h);
  /* the studio backdrop of the portrait, carried out to every edge of the screen */
  background:
    radial-gradient(58% 80% at 74% 36%, #2b2826 0%, #1c1b1a 42%, transparent 78%),
    radial-gradient(120% 120% at 18% 0%, #171716 0%, var(--night) 62%);
  color: var(--chalk);
}
.hero::after {
  /* a whisper of grain so the gradients never band */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("/assets/img/grain.png");
  background-size: 240px;
  opacity: 0.09;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.hero__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  align-items: end;
  min-height: min(calc(100svh - var(--mast-h) - 140px), 860px);
  /* the headline is sized to the stage, so its longest line always fits beside Shai */
  container-type: inline-size;
}

.hero__copy {
  position: relative;
  z-index: 2;
  grid-area: 1 / 1;
  padding-block: var(--space-xl) var(--space-xl);
}

.hero__title {
  font-family: var(--display);
  font-size: clamp(2.4rem, 7cqi, 6.6rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.031em;
}
.hero__title .line { display: block; white-space: nowrap; }
.h1 .line { display: block; }
/* "P4T Media:" opens the headline, in the headline's own type, a size down */
.hero__title .line--brand,
.js .hero__title .line.line--brand {
  margin-bottom: 0.12em;
  font-size: 0.5em;
  letter-spacing: -0.02em;
}
.hero__title em { color: var(--orange); }

.hero__dek {
  max-width: 30em;
  margin-top: var(--space-m);
  font-size: clamp(1.15rem, 1.02rem + 0.45vw, 1.4rem);
  line-height: 1.45;
  color: var(--chalk-2);
  text-wrap: pretty;
}
.hero__dek strong { font-weight: 500; color: var(--chalk); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--space-m);
}

.hero__portrait {
  position: relative;
  z-index: 1;
  grid-area: 1 / 2;
  align-self: stretch;
  /* up under the masthead, out to the edge of the screen, and a little under the headline */
  margin: calc(var(--mast-h) * -1) calc(var(--gutter) * -1) 0 -12%;
}
.hero__portrait picture,
.hero__portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__portrait img {
  object-fit: cover;
  object-position: 50% 12%;
  /* feathered on every side it could show an edge, so on any screen Shai stands in
     the same light as the page, never in a box */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 30%, #000 84%, transparent 100%),
    linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 30%, #000 84%, transparent 100%),
    linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
  mask-composite: intersect;
}

.hero__caption {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(24px, 4vw, 48px);
  z-index: 3;
  display: grid;
  gap: 6px;
  padding-left: 14px;
  border-left: 1px solid var(--chalk-3);
  color: var(--chalk);
  font-family: var(--sans);
}
.hero__caption b { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.02em; }
.hero__caption span { font: 500 0.75rem/1.28 var(--eyebrow); letter-spacing: 0.085em; text-transform: uppercase; color: var(--chalk-2); }

/* Credentials strip under the hero */
.creds {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--chalk-line);
}
.creds li {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 22px 24px 30px 0;
}
.creds li + li { padding-left: 24px; border-left: 1px solid var(--chalk-line); }
.creds b {
  font-weight: 420;
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.creds span {
  font: 400 0.875rem/1.45 var(--sans);
  color: var(--chalk-2);
}

@media (max-width: 960px) {
  .hero {
    background:
      radial-gradient(110% 46% at 50% 24%, #2b2826 0%, #1c1b1a 46%, transparent 82%),
      var(--night);
  }
  .hero__stage {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hero__copy { grid-area: 2 / 1; padding-bottom: 0; padding-top: 0; margin-top: -18vw; }
  .hero__title { font-size: 11.6cqi; }
  .hero__portrait {
    grid-area: 1 / 1;
    height: min(128vw, 640px);
    margin-inline: calc(var(--gutter) * -1);
  }
  .hero__portrait img {
    object-position: 50% 8%;
    -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 96%);
    mask-image: linear-gradient(to bottom, #000 50%, transparent 96%);
  }
  .hero__caption { display: none; }
  .creds { grid-template-columns: 1fr; margin-top: 48px; }
  .creds li { padding: 18px 0 20px; }
  .creds li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--chalk-line); }
}

/* Home: introduction ------------------------------------------------------ */
.intro {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: var(--space-l);
}
/* The one line P4T stands on, set large; then how, in reading size, each service
   with its icon in the pen of the Services section below */
.intro__say {
  max-width: 19ch;
  font-family: var(--display);
  font-size: clamp(2rem, 1.2rem + 3.1vw, 4.1rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.031em;
  text-wrap: balance;
}
.intro__say em { font-style: italic; }
.intro__how {
  max-width: 34em;
  margin-top: var(--space-m);
  color: var(--ink-2);
  font-size: clamp(1.2rem, 1.06rem + 0.45vw, 1.5rem);
  line-height: 1.5;
  letter-spacing: -0.009em;
  text-wrap: pretty;
}
.intro__how a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .intro__how a:hover { text-decoration-color: var(--orange); }
}
.intro__how .glue { white-space: nowrap; }
.intro__how .chip {
  --size: 1.3em;
  --icon-weight: 60;
  display: inline-block;
  margin-right: 0.18em;
  vertical-align: -0.32em;
}
.intro__main { grid-column: 2; }
.intro__more { margin-top: var(--space-l); }
@media (max-width: 860px) {
  .intro { grid-template-columns: 1fr; }
  .intro__main { grid-column: auto; }
}

/* Service icons ----------------------------------------------------------- */
/* One family, drawn in the hand of Shai's pancake: orange line, round ends. */
.icon {
  --size: 64px;
  width: var(--size);
  height: var(--size);
  flex: none;
  overflow: visible;
}
.icon .stroke {
  fill: none;
  stroke: var(--icon-ink, var(--orange));
  stroke-width: var(--icon-weight, 30);
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Strokes draw in document order */
.icon .stroke > :nth-child(2) { --o: 1; }
.icon .stroke > :nth-child(3) { --o: 2; }
.icon .stroke > :nth-child(4) { --o: 3; }
.icon .stroke > :nth-child(5) { --o: 4; }
.icon .stroke > :nth-child(6) { --o: 5; }
.icon .stroke > :nth-child(7) { --o: 6; }
.icon .stroke > :nth-child(8) { --o: 7; }
.icon .stroke > :nth-child(9) { --o: 8; }
.icon .stroke > :nth-child(10) { --o: 9; }
.icon .stroke > :nth-child(11) { --o: 10; }
.icon .stroke > :nth-child(12) { --o: 11; }
.icon .stroke > :nth-child(13) { --o: 12; }
.icon .stroke > :nth-child(14) { --o: 13; }
.icon .stroke > :nth-child(15) { --o: 14; }
.icon--content { --step: 42ms; }

/* Home: four ways in */
.services-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
}
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px var(--space-m) 36px 0;
  text-decoration: none;
}
.svc-card + .svc-card { padding-left: var(--space-m); border-left: 1px solid var(--line); }
.svc-card .icon { --size: clamp(72px, 7vw, 104px); margin-bottom: 6px; }
.svc-card h3 { font-family: var(--display); font-size: clamp(1.35rem, 1.15rem + 0.6vw, 1.7rem); line-height: 1.1; letter-spacing: -0.018em; }
.svc-card p { font-size: 1rem; line-height: 1.55; color: var(--muted); }
.svc-card .link { margin-top: auto; padding-top: 6px; }
@media (max-width: 960px) {
  .services-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-card:nth-child(3) { padding-left: 0; border-left: 0; }
  .svc-card:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .services-strip { grid-template-columns: 1fr; }
  .svc-card { padding: 28px 0 30px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
  .svc-card + .svc-card { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .svc-card .icon { --size: 56px; margin: 0; }
  .svc-card h3 { flex: 1; }
  .svc-card p, .svc-card .link { flex-basis: 100%; }
}

/* Work tiles -------------------------------------------------------------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-s);
}
.work-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-column: span 4;
  text-decoration: none;
  color: inherit;
}
.work-tile__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  background: var(--paper-2);
}
.work-tile__media > * { transition: transform 0.9s var(--ease-out); }
.work-tile__media img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) {
  .work-tile:hover .work-tile__media > * { transform: scale(1.025); }
  .work-tile:hover .arrow { transform: rotate(-45deg) translateX(3px); }
}
.work-tile__body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 16px;
  padding-top: 18px;
}
.work-tile__body h3 { font-family: var(--display); font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.8rem); line-height: 1.1; letter-spacing: -0.018em; }
.work-tile__body p { grid-column: 1 / -1; font-size: 1rem; line-height: 1.5; color: var(--muted); max-width: 32em; }
.work-tile__body .label { grid-column: 1 / -1; color: var(--muted); }
.work-tile__body .arrow { width: 22px; height: 22px; margin-top: 4px; }

/* Tile art */
.art-p4t,
.art-k180,
.art-fnm {
  display: grid;
  place-items: center;
  height: 100%;
}
.art-p4t { background: var(--paper-2); }
.art-p4t .logo { width: auto; height: 58%; max-width: 62%; }
.art-k180 { background: var(--k180-black); color: #fff; box-shadow: inset 0 0 0 1px light-dark(transparent, rgb(255 255 255 / 0.1)); } /* its edge, on a dark page */
.art-k180 svg { width: 64%; height: auto; }
.art-fnm { position: relative; background: var(--fnm-blue); }
/* pinned to the box, so the cover fits whole at every width */
.art-fnm picture { position: absolute; inset: 0; }
.art-fnm picture, .art-fnm img { width: 100%; height: 100%; }
.art-fnm img { object-fit: contain; object-position: 50% 100%; }

@media (max-width: 960px) {
  .work-tile { grid-column: span 6; }
  .work-tile:first-child { grid-column: 1 / -1; }
  .work-tile:first-child .work-tile__media { aspect-ratio: 16 / 10; }
}
@media (max-width: 600px) {
  .work-tile, .work-tile:first-child { grid-column: 1 / -1; }
  .work-tile__media, .work-tile:first-child .work-tile__media { aspect-ratio: 5 / 4; }
}

/* Press list -------------------------------------------------------------- */
.press-list { border-top: 1px solid var(--line-strong); }
.press-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 6fr) minmax(0, 1.4fr) 28px;
  align-items: baseline;
  gap: 8px var(--space-m);
  padding: var(--space-m) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.press-item::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--gutter) * -0.5);
  background: var(--paper-2);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s var(--ease-out);
}
.press-item__outlet { font: 500 0.8125rem/1.3 var(--eyebrow); letter-spacing: 0.085em; text-transform: uppercase; }
.press-item__title {
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.press-item__meta { font: 400 0.875rem/1.3 var(--sans); color: var(--muted); text-align: right; }
.press-item .arrow { width: 22px; height: 22px; justify-self: end; align-self: center; }
@media (hover: hover) and (pointer: fine) {
  .press-item:hover::before { opacity: 1; }
  .press-item:hover .arrow { transform: rotate(-45deg) translate(3px, 0); }
  .press-item:hover .press-item__title { color: var(--orange-deep); }
}
@media (max-width: 760px) {
  .press-item { grid-template-columns: 1fr 24px; }
  .press-item__outlet { grid-column: 1; }
  .press-item__title { grid-column: 1 / -1; grid-row: 2; }
  .press-item__meta { grid-column: 1 / -1; grid-row: 3; text-align: left; }
  .press-item .arrow { grid-column: 2; grid-row: 1; }
}

/* Press highlights (home) --------------------------------------------------- */
.press-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 40px var(--space-xl);
  align-items: start;
}
.press-hero { display: grid; gap: 18px; text-decoration: none; color: inherit; }
.press-hero__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 2 / 1;
  border-radius: 4px;
  background: #0b0b0b;
}
.press-hero__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.press-hero__play {
  position: absolute;
  top: clamp(12px, 1.6vw, 20px);
  left: clamp(12px, 1.6vw, 20px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--ink);
  font: 600 0.8125rem/1 var(--sans);
  letter-spacing: 0.02em;
  transition: transform 0.3s var(--ease-out);
}
.press-hero__play svg { width: 14px; height: 14px; }
.press-hero__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 400 0.875rem/1.3 var(--sans); color: var(--muted); }
.press-hero__meta .label { color: var(--ink); }
.press-hero__title {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.018em;
  text-wrap: balance;
  max-width: 22ch;
}
.press-side { border-top: 1px solid var(--line-strong); }
.press-side a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  gap: 8px 16px;
  padding: 22px 0 24px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.press-side__outlet { font: 500 0.75rem/1.3 var(--eyebrow); letter-spacing: 0.085em; text-transform: uppercase; }
.press-side__title {
  grid-column: 1;
  font-size: clamp(1.15rem, 1rem + 0.45vw, 1.4rem);
  line-height: 1.22;
  letter-spacing: -0.005em;
  text-wrap: pretty;
  transition: color 0.2s;
}
.press-side__meta { grid-column: 1; font: 400 0.8125rem/1.3 var(--sans); color: var(--muted); }
.press-side .arrow { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 20px; height: 20px; transition: transform 0.3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .press-hero:hover .press-hero__media img { transform: scale(1.025); }
  .press-hero:hover .press-hero__play { transform: scale(1.06); }
  .press-side a:hover .press-side__title { color: var(--orange-deep); }
  .press-side a:hover .arrow { transform: translate(2px, -2px); }
}
@media (max-width: 860px) {
  .press-grid { grid-template-columns: 1fr; }
}
/* The feature: three videos with Shai in them, one at a time. Each one's line fills
   while it shows, then the next fades in (site.js). It holds still while someone
   points at it or tabs into it, when it is off screen, and after Pause. */
.feature { display: grid; gap: 20px; }
.feature__slides { display: grid; }
.feature__slide { grid-area: 1 / 1; }
.feature__slide:not(.is-current) { opacity: 0; visibility: hidden; }
.js .feature__slide { transition: opacity 1.2s var(--ease-out), visibility 0s 1.2s; }
.js .feature__slide.is-current { transition: opacity 1.2s var(--ease-out), visibility 0s; }
/* A story pointed at beside the slideshow swaps in quickly (site.js) */
.js .feature.is-quick .feature__slide { transition-duration: 0.3s, 0s; transition-delay: 0s, 0.3s; }
.js .feature.is-quick .feature__slide.is-current { transition-delay: 0s, 0s; }
.feature__peek { pointer-events: none; }
/* A story without a picture: a title card in the outlet's name */
.peek-card {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 10px;
  padding: clamp(24px, 5%, 56px);
  color-scheme: dark;
  background:
    linear-gradient(to bottom, rgb(243 242 238 / 0.05) 1px, transparent 1px) 0 0 / 100% 56px,
    linear-gradient(to right, rgb(243 242 238 / 0.05) 1px, transparent 1px) 0 0 / 56px 100%,
    #141413;
  color: var(--chalk);
}
.peek-card__kind { font: 500 0.75rem/1.28 var(--eyebrow); letter-spacing: 0.085em; text-transform: uppercase; color: var(--chalk-3); }
.peek-card__outlet { font: 500 clamp(2.2rem, 1.2rem + 3.6vw, 4.6rem)/0.95 var(--display); letter-spacing: -0.031em; text-wrap: balance; }
.peek-card__show { font: 400 1rem/1.4 var(--body); color: var(--chalk-2); }
.feature__ctrl { display: flex; align-items: center; gap: 8px; }
.feature__ctrl[hidden] { display: none; }
/* The dashes: a 44px-tall target around a 3px line. It thickens and darkens under
   the pointer, gives a little when pressed, and the orange hands over from one dash
   to the next: it leaves through the right and comes in from the left. */
.feature__dot {
  position: relative;
  width: 48px;
  height: 44px;
  margin-block: -6px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.feature__dot span {
  position: absolute;
  inset: 50% 0 auto;
  height: 3px;
  margin-top: -1.5px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--line-strong);
  transition: height 0.2s var(--ease-out), margin-top 0.2s var(--ease-out), background-color 0.2s ease, scale 0.16s var(--ease-out);
}
.feature__dot span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease-out);
}
.feature__dot[aria-current="true"] span::after { transform: scaleX(1); transform-origin: left; }
/* the dash in play keeps an orange track, so it reads as current even while the
   timer is held (under the pointer, or paused) */
.feature__dot[aria-current="true"] span { background: light-dark(color-mix(in srgb, var(--orange) 34%, transparent), color-mix(in srgb, var(--orange) 46%, transparent)); }
.feature__dot:active span { scale: 0.92 1; transition-duration: 0.2s, 0.2s, 0.2s, 0.08s; }
.feature__dot:focus-visible { outline: none; }
.feature__dot:focus-visible span { height: 5px; margin-top: -2.5px; overflow: visible; outline: 2px solid var(--orange-deep); outline-offset: 3px; }
.feature__dot:focus-visible span::after { border-radius: inherit; }
@media (hover: hover) and (pointer: fine) {
  .feature__dot:hover span { height: 5px; margin-top: -2.5px; background: color-mix(in srgb, var(--ink) 48%, transparent); }
  .feature__dot[aria-current="true"]:hover span { background: light-dark(color-mix(in srgb, var(--orange) 50%, transparent), color-mix(in srgb, var(--orange) 62%, transparent)); }
}
/* Pause and play: a soft fill under the pointer, a small press, and the icons
   trading places with a quick scale and fade rather than a jump */
.feature__pause {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.16s var(--ease-out);
}
.feature__pause::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
.feature__pause:active { transform: scale(0.9); transition-duration: 0.2s, 0.2s, 0.08s; }
.feature__pause:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: 3px; }
.feature__pause[aria-pressed="true"] { border-color: var(--ink); }
.feature__pause svg { width: 14px; height: 14px; overflow: visible; }
.feature__pause path {
  transform-box: view-box;
  transform-origin: 50% 50%;
  transition: opacity 0.18s ease, scale 0.28s var(--ease-out);
}
.feature__pause[aria-pressed="true"] .feature__icon-pause,
.feature__pause:not([aria-pressed="true"]) .feature__icon-play { opacity: 0; scale: 0.4; }
@media (hover: hover) and (pointer: fine) {
  .feature__pause:hover { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
}
@media (prefers-reduced-motion: no-preference) {
  /* longhands, so the pause rules below keep their say over animation-play-state */
  .feature.is-playing .feature__dot[aria-current="true"] span::after { animation-name: feature-time; animation-duration: 7s; animation-timing-function: linear; animation-fill-mode: both; }
  .feature.is-playing .feature__slide.is-current img { animation-name: feature-drift; animation-duration: 9s; animation-timing-function: var(--ease-out); animation-fill-mode: both; }
  .feature:is(:focus-within, .is-paused, .is-away, .is-peeking) .feature__dot span::after { animation-play-state: paused; }
  .feature:is(:focus-within, .is-paused, .is-away) img { animation-play-state: paused; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .feature:hover .feature__dot span::after,
  .feature:hover img { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .feature__pause { display: none; }
}
@keyframes feature-time { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes feature-drift { from { scale: 1.06; } to { scale: 1; } }

/* Press page -------------------------------------------------------------- */
.press-feature { padding-bottom: var(--space-2xl); }
.press-feature__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: 40px var(--space-xl);
}
.press-feature .press-hero__title { max-width: 26ch; }
.press-quote { display: grid; gap: 22px; margin: 0; }
.press-quote blockquote p {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.6rem);
  font-weight: 340;
  font-style: italic;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
  text-indent: -0.4em;
}
.press-quote blockquote p::before { content: "\201C"; color: var(--orange); }
.press-quote blockquote p::after { content: "\201D"; color: var(--orange); }
.press-quote figcaption { font: 400 0.875rem/1.4 var(--sans); color: var(--muted); }
.press-quote figcaption a { color: var(--ink); }

.press-feature + .press-groups { padding-top: 0; }
.press-group {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: 16px var(--space-l);
  padding-top: 18px;
  border-top: 1px solid var(--line-strong);
}
.press-group + .press-group { margin-top: var(--space-xl); }
.press-group__title { padding-top: 6px; color: var(--orange-deep); }
.press-group .press-list { border-top: 0; }
.press-group .press-list li:first-child .press-item { padding-top: 6px; }
.press-group .press-item { grid-template-columns: minmax(0, 2.3fr) minmax(0, 6fr) minmax(0, 1.5fr) 22px; }
.press-group .press-item:hover::before { inset: 0 -14px; }
@media (max-width: 960px) {
  .press-feature__grid { grid-template-columns: 1fr; }
  .press-group { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .press-group .press-item { grid-template-columns: 1fr 22px; }
}

/* Latest news: one line, with a live dot */
.newsline { padding-bottom: var(--space-xl); }
.newsline__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px var(--space-m);
  padding-block: 18px;
  border-block: 1px solid var(--line-strong);
  text-decoration: none;
  color: inherit;
}
.newsline__tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 500 0.75rem/1 var(--eyebrow);
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: var(--orange-deep);
}
.newsline__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.newsline__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  animation: ping 2.4s var(--ease-out) 3;
}
@keyframes ping { 0% { transform: scale(1); opacity: 0.6; } 70%, 100% { transform: scale(3.2); opacity: 0; } }
.newsline__text { font-size: clamp(1.1rem, 1rem + 0.45vw, 1.4rem); line-height: 1.3; letter-spacing: -0.005em; text-wrap: pretty; transition: color 0.2s; }
.newsline__src { display: inline-flex; align-items: center; gap: 8px; font: 500 0.875rem/1.3 var(--sans); color: var(--muted); white-space: nowrap; }
.newsline__src .arrow { width: 16px; height: 16px; transition: transform 0.3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .newsline__link:hover .newsline__text { color: var(--orange-deep); }
  .newsline__link:hover .arrow { transform: translate(2px, -2px); }
}
@media (max-width: 760px) {
  .newsline__link { grid-template-columns: 1fr; gap: 10px; }
}

/* Watch: the interviews, in the screening room */
.watch__intro {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  align-items: end;
  gap: 20px var(--space-xl);
}
.watch__intro p { color: var(--chalk-2); max-width: 26em; font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem); line-height: 1.5; text-wrap: pretty; }
.watch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-l) var(--space-m);
}
.watch-card {
  display: grid;
  align-content: start;
  gap: 18px;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.watch-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  background: #0b0b0b;
  transition: transform 0.25s var(--ease-out);
}
.watch-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(243 242 238 / 0.1);
  background: linear-gradient(to top, rgb(0 0 0 / 0.55), transparent 45%);
  pointer-events: none;
}
.watch-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) brightness(0.94);
  transition: transform 0.9s var(--ease-out), filter 0.5s var(--ease-out);
}
.watch-card__play {
  position: absolute;
  left: clamp(12px, 1.4vw, 18px);
  bottom: clamp(12px, 1.4vw, 18px);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--chalk);
  color: var(--night);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.3);
  transition: transform 0.35s var(--ease-out), background-color 0.25s, color 0.25s;
}
.watch-card__play svg { width: 18px; height: 18px; margin-left: 2px; }
.watch-card__tag {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgb(18 18 17 / 0.8);
  color: var(--chalk);
  font: 600 0.75rem/1 var(--sans);
  letter-spacing: 0.02em;
  backdrop-filter: blur(8px);
}
.watch-card__body { display: grid; gap: 8px; }
.watch-card__outlet { font: 500 0.75rem/1.35 var(--eyebrow); letter-spacing: 0.085em; text-transform: uppercase; color: var(--chalk-3); }
.watch-card__title {
  font-size: clamp(1.2rem, 1.05rem + 0.45vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
  transition: color 0.2s;
}
.watch-card__meta { font: 400 0.8125rem/1.3 var(--sans); color: var(--chalk-3); }
.watch-card:active .watch-card__media { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) {
  .watch-card:hover .watch-card__media img { transform: scale(1.045); filter: none; }
  .watch-card:hover .watch-card__play { transform: scale(1.1); background: var(--orange); color: var(--ink); }
  .watch-card:hover .watch-card__title { color: var(--orange-glow); }
}
.watch .press-group { margin-top: var(--space-2xl); }
@media (max-width: 1024px) {
  .watch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .watch__intro { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .watch-grid { grid-template-columns: 1fr; gap: 24px; }
  .watch-card { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); align-items: start; gap: 16px; }
  .watch-card__play { width: 34px; height: 34px; left: 8px; bottom: 8px; }
  .watch-card__play svg { width: 14px; height: 14px; }
  .watch-card__tag { top: auto; right: 6px; bottom: 8px; padding: 5px 7px; font-size: 0.6875rem; }
  .watch-card__body { gap: 6px; }
  .watch-card__title { font-size: 1.125rem; }
}

/* Press rows on a dark band */
.dark .press-group { border-color: var(--chalk-line); }
.dark .press-group__title { color: var(--orange); }
.dark .press-item::before { background: var(--night-2); }
@media (hover: hover) and (pointer: fine) {
  .dark .press-item:hover .press-item__title { color: var(--orange-glow); }
}

/* The video viewer: a lightbox for YouTube's privacy-enhanced player */
.viewer {
  width: min(1120px, 100vw - 2 * var(--gutter), (100dvh - 132px) * 16 / 9);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--chalk);
  overflow: visible;
}
.viewer::backdrop { background: rgb(0 0 0 / 0.9); backdrop-filter: blur(6px); }
.viewer[open] { animation: viewer-in 0.55s var(--ease-out); }
.viewer[open]::backdrop { animation: fade-in 0.35s var(--ease-out); }
@keyframes viewer-in { from { opacity: 0; transform: translateY(28px) scale(0.97); } }
@keyframes fade-in { from { opacity: 0; } }
.viewer__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 14px; }
.viewer__title { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.35rem); line-height: 1.25; letter-spacing: -0.005em; text-wrap: balance; }
.viewer__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.viewer__out {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-inline: 6px;
  font: 500 0.875rem/1 var(--sans);
  color: var(--chalk-2);
  text-decoration: none;
  transition: color 0.2s;
}
.viewer__out .arrow { width: 15px; height: 15px; }
.viewer__close,
.viewer__step button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--chalk-line);
  border-radius: 50%;
  background: transparent;
  color: var(--chalk);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, transform 0.16s var(--ease-out);
}
.viewer__close svg { width: 16px; height: 16px; }
.viewer__close:active,
.viewer__step button:not([aria-disabled="true"]):active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .viewer__out:hover { color: var(--chalk); }
  .viewer__close:hover,
  .viewer__step button:not([aria-disabled="true"]):hover { background: var(--chalk); color: var(--night); }
}
/* Previous / Next, under the picture, always in the same place */
.viewer--run { width: min(1120px, 100vw - 2 * var(--gutter), (100dvh - 196px) * 16 / 9); }
.viewer__step { display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: 16px; }
.viewer__step[hidden] { display: none; }
.viewer__step svg { width: 16px; height: 16px; }
.viewer__step button[aria-disabled="true"] { opacity: 0.3; cursor: default; }
.viewer__count {
  min-width: 5.5em;
  font: 500 0.875rem/1 var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--chalk-2);
}
.viewer__frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: #000;
  box-shadow: 0 40px 120px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(243 242 238 / 0.08);
}
.viewer__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 600px) {
  .viewer__out span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Hand-drawn marks: one per page, in the pen of the icons ----------------- */
.scribble { position: absolute; overflow: visible; pointer-events: none; }
.scribble .stroke { fill: none; stroke: var(--orange); stroke-linecap: round; stroke-linejoin: round; }
/* An underline: the words it sits under stay on one line */
.scribble-under { position: relative; display: inline-block; white-space: nowrap; }
.scribble--under { left: -3%; top: calc(100% - 0.12em); width: 106%; height: 0.62em; }
.creds b .scribble-under { font: inherit; color: inherit; }
/* A ring round a pill */
.has-ring { position: relative; }
.scribble--ring { left: -6px; top: -9px; width: calc(100% + 12px); height: calc(100% + 18px); }
/* A bracket in the margin beside a list */
.has-bracket { position: relative; }
.scribble--bracket { top: 0; right: calc(100% + clamp(8px, 1.5vw, 24px)); width: 20px; height: 100%; }
@media (max-width: 960px) {
  .scribble--bracket { display: none; }
}

/* Testimonials ------------------------------------------------------------ */
/* Three notes pinned up a little crooked, on white card, black card and paper:
   the line each one would underline is set in full ink while the rest stays a
   shade softer, and a note straightens up when someone reaches for it. The notes
   are things on a wall, so they keep their own colours in either theme. On small
   screens they become a row to swipe. */
.notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-m);
  padding-bottom: var(--space-m);
}
.note {
  --bg: var(--paper-2);
  --fg: var(--ink);
  --soft: color-mix(in srgb, var(--ink) 64%, var(--bg));
  --sub: var(--muted);
  --accent: var(--orange-deep);
  color-scheme: light;
  position: relative;
  display: grid;
  gap: var(--space-s);
  align-content: start;
  margin: 0;
  padding: clamp(26px, 2.6vw, 38px) clamp(24px, 2.4vw, 34px) clamp(24px, 2.4vw, 32px);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
  rotate: var(--tilt, 0deg);
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.06), 0 24px 44px -26px rgb(0 0 0 / 0.4);
  transition: rotate 0.35s var(--ease-out), translate 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.note::before {
  /* a strip of tape holding it up */
  content: '';
  position: absolute;
  top: -13px;
  left: calc(50% - 46px);
  width: 92px;
  height: 26px;
  background: linear-gradient(rgb(255 255 255 / 0.6), rgb(250 250 248 / 0.46));
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.1);
  clip-path: polygon(3% 8%, 12% 0, 26% 6%, 44% 1%, 61% 5%, 80% 0, 97% 6%, 100% 52%, 96% 94%, 79% 100%, 58% 95%, 40% 100%, 21% 94%, 5% 100%, 0 52%);
  rotate: var(--tape, -3deg);
}
.note:nth-child(2) { --tape: 4deg; }
.note:nth-child(3) { --tape: -1.5deg; }
.note:nth-child(2) { margin-top: var(--space-xl); }
.note:nth-child(3) { margin-top: var(--space-s); }
.note--white { --bg: #fff; }
.note--night { color-scheme: dark; --bg: #1c1c1b; --fg: var(--chalk); --soft: rgb(243 242 238 / 0.66); --sub: var(--chalk-3); --accent: var(--orange); }
.note__mark {
  display: block;
  height: 0.36em;
  margin-bottom: -4px;
  font: 400 clamp(6rem, 4.6rem + 3vw, 8.5rem)/0.8 var(--display);
  color: var(--accent);
}
.note blockquote p {
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  line-height: 1.55;
  color: var(--soft);
  text-wrap: pretty;
}
.note mark {
  color: var(--fg);
  font-weight: 560;
  background: none;
}
.note figcaption { display: flex; align-items: center; gap: 12px; margin-top: 4px; font-family: var(--sans); }
.note figcaption picture { flex: none; width: 46px; height: 46px; overflow: hidden; border-radius: 50%; background: var(--paper-3); }
.note figcaption img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.04); }
.note figcaption > span { display: grid; gap: 3px; }
.note figcaption b { font-size: 0.9375rem; font-weight: 600; }
.note figcaption > span > span { font-size: 0.8125rem; line-height: 1.35; color: var(--sub); }
@media (hover: hover) and (pointer: fine) {
  .note:hover { rotate: 0deg; translate: 0 -6px; box-shadow: 0 1px 1px rgb(0 0 0 / 0.06), 0 34px 56px -28px rgb(0 0 0 / 0.5); }
}
@media (max-width: 1100px) {
  .notes {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(82vw, 400px);
    align-items: start;
    margin-inline: calc(var(--gutter) * -1);
    padding: var(--space-m) var(--gutter) var(--space-m);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .notes::-webkit-scrollbar { display: none; }
  .note { scroll-snap-align: start; }
  .note:nth-child(n) { margin-top: 0; }
}

/* Music teaser (home) ----------------------------------------------------- */
.music-teaser {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: var(--space-xl);
}
.music-teaser__copy { display: grid; gap: 24px; justify-items: start; }
.music-teaser__copy p:not(.label) { color: var(--chalk-2); max-width: 30em; }
@media (max-width: 860px) {
  .music-teaser { grid-template-columns: 1fr; }
}
/* Three Bear Left songs that play right here (site.js, "Music on Home"). Without
   JavaScript the list stays out of the way and Listen leads to the Music page. */
html:not(.js) .spin-list { display: none; }
.js [data-spin-deck] { cursor: pointer; }
.spin-list { width: 100%; max-width: 34rem; margin: 4px 0 8px; padding: 0; border-top: 1px solid var(--chalk-line); list-style: none; }
.spin {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 11px 2px 11px 0;
  border: 0;
  border-bottom: 1px solid var(--chalk-line);
  background: none;
  color: var(--chalk);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.spin__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--chalk-3);
  border-radius: 50%;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.16s var(--ease-out);
}
.spin__icon svg { grid-area: 1 / 1; width: 13px; height: 13px; }
.spin__play { translate: 1px 0; }
.spin__pause,
.spin[aria-pressed="true"] .spin__play { display: none; }
.spin[aria-pressed="true"] .spin__pause { display: block; }
.spin[aria-current="true"] .spin__icon { border-color: var(--orange); background: var(--orange); color: var(--ink); }
.spin:active .spin__icon { transform: scale(0.92); }
.spin__t { font: 400 1.1875rem/1.2 var(--body); }
.spin__a { font: 400 0.8125rem/1.2 var(--sans); color: var(--chalk-3); }
.spin__d { min-width: 3.2em; font: 500 0.75rem/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--chalk-3); text-align: right; }
.spin__bar {
  position: absolute;
  left: 54px;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--orange);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  opacity: 0;
  transition: opacity 0.3s;
}
.spin[aria-current="true"] .spin__bar { opacity: 1; }
.spin:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .spin:hover .spin__icon { border-color: var(--chalk); }
  .spin[aria-current="true"]:hover .spin__icon { background: var(--orange-glow); border-color: var(--orange-glow); }
}
@media (max-width: 520px) {
  .spin { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .spin__a { display: none; }
}
/* While a song plays the record comes further out and turns */
.music-band.is-playing .deck--teaser { --disc-shift: 54%; }

/* Closing band ------------------------------------------------------------ */
/* The bookend to the hero: the night stage, and the orange disc of the P4T logo
   rising behind the one button as the band comes up. On Music the disc is a record. */
.cta-band {
  --sun: clamp(300px, 26vw, 420px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--night);
  color: var(--chalk);
  view-timeline: --cta block;
}
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/assets/img/grain.png") 0 0 / 240px;
  opacity: 0.08;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.cta-band__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px var(--space-xl);
  padding-block: var(--section) var(--space-2xl);
}
/* A rule across the content only, like every other rule on the site */
.dark + .cta-band .cta-band__inner::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: var(--gutter);
  border-top: 1px solid var(--chalk-line);
}
.cta-band__title {
  font-family: var(--display);
  max-width: 17ch;
  font-size: clamp(2.5rem, 1.3rem + 4.4vw, 5.6rem);
  line-height: 0.96;
  letter-spacing: -0.031em;
  text-wrap: balance;
}
.cta-band__text { margin-top: var(--space-m); max-width: 30em; color: var(--chalk-2); font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem); line-height: 1.5; text-wrap: pretty; }
.cta-band__actions {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  gap: 14px;
  min-width: var(--sun);
  padding-block: var(--space-m);
  text-align: center;
}
.cta-band__actions::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: var(--sun);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(120% 90% at 50% 0%, #f6602c 0%, var(--orange) 55%, #e4480f 100%);
}
/* On the disc the button and the line under it turn night */
.cta-band .btn--orange { --btn-bg: var(--night); --btn-fg: var(--chalk); }
.cta-band__mail {
  padding-block: 6px;
  font: 600 0.9375rem/1.3 var(--sans);
  color: var(--night);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .cta-band .btn--orange:hover { --btn-bg: #000; --btn-fg: var(--chalk); }
  .cta-band__mail:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
}
/* Music: a record, its orange label under the button */
.page-music .cta-band__actions::before {
  background:
    var(--vinyl-sheen),
    radial-gradient(circle closest-side, var(--orange) 0 52%, #b8380c 52.4% 53.2%, transparent 53.6%),
    var(--vinyl);
  box-shadow: 0 30px 70px -24px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.04);
}
/* the record is centred on the button; the line under it sits below the record */
.page-music .cta-band__actions { padding-block: calc(var(--sun) / 2 - 26px) 0; gap: 0; }
.page-music .cta-band__actions::before { top: calc(var(--sun) / 2); }
.page-music .cta-band__mail { margin-top: calc(var(--sun) / 2 - 26px + 14px); color: var(--chalk-2); }
.page-music .cta-band__mail:hover { color: var(--chalk); }
@media (max-width: 760px) {
  .cta-band { --sun: min(80vw, 320px); }
  .cta-band__inner { grid-template-columns: 1fr; padding-bottom: var(--space-xl); }
  .cta-band__actions { min-height: var(--sun); align-content: center; margin-top: var(--space-s); }
  .page-music .cta-band__actions { min-height: 0; }
}
/* The disc rises and settles as the band scrolls in (browsers with scroll-driven
   animation; elsewhere it simply sits there) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cta-band__actions::before {
      animation: sunrise linear both;
      animation-timeline: --cta;
      animation-range: entry 0% cover 40%;
    }
  }
}
@property --p { syntax: "<number>"; inherits: true; initial-value: 1; }
@keyframes read-along { from { --p: 0; } to { --p: 1; } }
@keyframes sunrise {
  from { translate: -50% -22%; scale: 0.9; filter: brightness(0.75); }
  to { translate: -50% -50%; scale: 1; filter: none; }
}

/* Up next: the way on to the next page ------------------------------------- */
.next { padding-bottom: var(--space-2xl); }
.next__link {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 8fr) auto;
  align-items: center;
  gap: 12px var(--space-l);
  padding-block: var(--space-m);
  border-block: 1px solid var(--line-strong);
  text-decoration: none;
  color: inherit;
}
.next__label { align-self: start; padding-top: 0.9em; color: var(--muted); }
.next__body { display: grid; gap: 8px; }
.next__title {
  font-family: var(--display);
  font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.031em;
  transition: color 0.2s ease, transform 0.3s var(--ease-out);
}
.next__dek { color: var(--muted); font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem); text-wrap: pretty; }
.next__link .next__arrow {
  width: clamp(36px, 4vw, 56px);
  height: clamp(36px, 4vw, 56px);
  color: var(--ink);
  transition: transform 0.3s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .next__link:hover .next__title { transform: translateX(6px); }
  .next__link:hover .next__arrow { transform: translateX(10px); }
}
.next__link:active .next__arrow { transform: translateX(14px) scale(0.94); }
@media (max-width: 760px) {
  .next__link { grid-template-columns: minmax(0, 1fr) auto; }
  .next__label { grid-column: 1 / -1; padding-top: 0; }
}

/* Page heads (inner pages) -------------------------------------------------- */
.page-head {
  padding-block: var(--space-2xl) var(--space-xl);
}
.page-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: 24px var(--space-xl);
}
.page-head__intro { color: var(--muted); font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.5; max-width: 30em; }
.dark .page-head__intro { color: var(--chalk-2); }
@media (max-width: 860px) {
  .page-head__grid { grid-template-columns: 1fr; }
}

/* Privacy ----------------------------------------------------------------- */
.legal { padding-top: 0; }
.legal__body { max-width: 40em; font-size: 1.0625rem; line-height: 1.6; }
.legal__body p, .legal__body ul { text-wrap: pretty; }
.legal__body p + p, .legal__body ul + p, .legal__body p + ul { margin-top: 0.9em; }
.legal__body ul { margin: 0; padding-left: 1.15em; }
.legal__body li + li { margin-top: 0.45em; }
.legal__body li::marker { color: var(--orange-deep); }
.legal__body b { font-weight: 600; }
.legal__body code { font: 0.85em/1 ui-monospace, "SF Mono", Menlo, monospace; }
.legal__body a { text-decoration-color: color-mix(in srgb, var(--orange) 70%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.legal__body a:hover { text-decoration-color: var(--orange); }
.legal__h {
  font-family: var(--display);
  margin: 2.2em 0 0.6em;
  font-size: clamp(1.45rem, 1.25rem + 0.7vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -0.018em;
}
.legal__h:first-child { margin-top: 0; }
.legal__sub { margin: 1.4em 0 0.5em; font: 500 0.75rem/1.2 var(--eyebrow); letter-spacing: 0.085em; text-transform: uppercase; color: var(--muted); }
.legal__short { padding: 22px 26px 22px 2.2em; border-radius: 16px; background: color-mix(in srgb, var(--ink) 4%, transparent); }

/* About ------------------------------------------------------------------- */
.about-hero {
  position: relative;
  overflow: clip;
  padding-block: var(--space-xl) var(--space-2xl);
}
.about-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--space-2xl);
}
.about-hero__title {
  font-family: var(--display);
  font-size: clamp(2.3rem, 1.2rem + 3.7vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.031em;
}
.about-hero__title .line { display: block; }
.about-hero__lead {
  max-width: 31em;
  margin-top: var(--space-m);
  font-size: clamp(1.15rem, 1.02rem + 0.45vw, 1.4rem);
  line-height: 1.45;
  color: var(--ink-2);
  text-wrap: pretty;
}
.about-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 24px var(--space-xl);
  margin: var(--space-l) 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.about-meta dt { margin-bottom: 10px; color: var(--muted); }
.about-meta dd { margin: 0; font: 500 0.9375rem/1.6 var(--sans); }

/* The badge Shai liked on the Framer site: a staff pass on a lanyard, in the
   proportions of a real ID card, with a hologram seal. It swings in on its clip, leans
   a little toward a pointer or a finger and sways when brushed, then settles (site.js
   runs the springs and sets --swing, --rx, --ry, and --fx and --fy for the light, -1
   to 1). The foil and the sleeve catch the light as it turns. Sizes inside follow the
   card's own width. */
.about-hero__badge { display: grid; justify-items: center; align-self: stretch; align-content: center; }
.badge {
  position: relative;
  width: clamp(240px, 22vw, 318px);
  container-type: inline-size;
}
.badge__strap {
  position: absolute;
  bottom: calc(100% - 6cqw);
  left: 50%;
  width: 11cqw;
  height: 100vh;
  translate: -50% 0;
  background: url("/assets/img/badge-strap.svg") 50% 100% / 100% auto repeat-y, #1a1a19;
  box-shadow: inset 2px 0 0 rgb(255 255 255 / 0.05), inset -2px 0 0 rgb(0 0 0 / 0.25);
}
.badge__card {
  position: relative;
  display: grid;
  aspect-ratio: 54 / 85.6;
  align-content: start;
  padding: 9cqw 8cqw 8cqw;
  border-radius: 5cqw;
  overflow: hidden;
  color-scheme: dark;
  background:
    radial-gradient(120% 60% at 0% 0%, rgb(255 255 255 / 0.07), transparent 60%),
    #161615;
  color: var(--chalk);
  font-family: var(--sans);
  /* it hangs from the clip: swings about it, and tips toward or away from it */
  rotate: calc(-2deg + var(--swing, 0deg));
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-origin: 50% 3cqw;
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.07) inset,
    0 0 0 1px rgb(255 255 255 / 0.06) inset,
    0 2px 4px rgb(0 0 0 / 0.16),
    0 34px 70px -24px rgb(0 0 0 / 0.5);
}
.badge__card::after {
  /* the plastic sleeve catching the light, which slides as the card turns */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: linear-gradient(118deg, rgb(255 255 255 / 0.1) 0%, rgb(255 255 255 / 0.025) 30%, transparent 46%, transparent 62%, rgb(255 255 255 / 0.05) 74%, transparent 86%) no-repeat;
  background-size: 200% 200%;
  background-position: calc(50% - var(--fx, 0.35) * 40%) calc(50% - var(--fy, -0.25) * 30%);
  pointer-events: none;
}
.badge__slot {
  position: absolute;
  top: 3.6cqw;
  left: 50%;
  width: 17cqw;
  height: 3.2cqw;
  translate: -50% 0;
  border-radius: 99px;
  background: var(--paper);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.35);
}
.badge__clip {
  position: absolute;
  top: -2.5cqw;
  left: 50%;
  z-index: 2;
  width: 9cqw;
  height: 8cqw;
  translate: -50% 0;
  border-radius: 1.6cqw 1.6cqw 1cqw 1cqw;
  background: linear-gradient(90deg, #8a8a87, #e8e7e3 40%, #b3b2ae 62%, #7b7a77);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
}
.badge__mark { display: block; width: 14cqw; margin-bottom: 6cqw; }
.badge__photo {
  overflow: hidden;
  aspect-ratio: 5 / 4;
  border-radius: 2.4cqw;
  background: #222;
}
.badge__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.badge__name {
  margin-top: 7cqw;
  font-family: var(--display);
  font-weight: 500;
  font-size: 12.5cqw;
  line-height: 0.92;
  letter-spacing: -0.031em;
}
.badge__role,
.badge__url { font-family: var(--eyebrow); font-weight: 500; letter-spacing: 0.085em; text-transform: uppercase; }
.badge__role { margin-top: 4cqw; font-size: 4.1cqw; line-height: 1.2; color: var(--chalk-2); }
.badge__url { position: absolute; left: 8cqw; bottom: 8cqw; font-size: 3.7cqw; color: var(--chalk-3); }
/* The hologram seal: silver foil pressed with fine rings and rays. The rainbow in it
   slides and turns as the card does, and a glint follows the light. Still, it rests
   on a pretty angle. */
.badge__holo {
  position: absolute;
  right: 7cqw;
  bottom: 6cqw;
  z-index: 2;
  width: 15cqw;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background:
    /* the glint */
    radial-gradient(circle at calc(50% + var(--fx, 0.35) * 40%) calc(50% + var(--fy, -0.25) * 40%), rgb(255 255 255 / 0.9) 0, rgb(255 255 255 / 0.25) 14%, transparent 40%),
    /* a bright band that sweeps across as it turns */
    linear-gradient(calc(112deg + var(--fy, -0.25) * 30deg), transparent 30%, rgb(255 255 255 / 0.55) 46%, rgb(255 255 255 / 0.1) 56%, transparent 66%),
    /* fine pressed rings */
    repeating-radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.16) 0 0.5px, transparent 0.8px 1.8px),
    /* the rainbow, turning round the centre the way a disc's does */
    conic-gradient(from calc(var(--fx, 0.35) * 140deg + var(--fy, -0.25) * 60deg) at 50% 50%, #f7a8d0, #ffe29a, #a8f5c8, #9edcff, #c9b2ff, #f7a8d0, #ffe29a, #a8f5c8, #9edcff, #c9b2ff, #f7a8d0),
    /* the silver underneath */
    linear-gradient(140deg, #7c838a, #eef0f2 40%, #9aa1a8 64%, #f4f5f6);
  background-size: auto, 260% 260%, auto, auto, auto;
  background-position: 0 0, calc(50% - var(--fx, 0.35) * 50%) 50%, 0 0, 0 0, 0 0;
  background-blend-mode: normal, overlay, overlay, multiply, normal;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.5),
    inset 0 -1px 2px rgb(0 0 0 / 0.35),
    0 1px 2px rgb(0 0 0 / 0.5);
}

@media (max-width: 860px) {
  .about-hero__grid { grid-template-columns: 1fr; }
  .about-hero__badge { order: -1; padding-top: 30px; }
  .badge { width: min(272px, 72vw); }
}
@media (max-width: 420px) {
  .about-meta { grid-template-columns: 1fr; }
}

/* The long version */
.about-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: var(--space-l);
}
.about-story__body { grid-column: 2; max-width: 40em; }
.about-story__body .lead { margin-bottom: 1.1em; }
.about-story__body > p:not(.lead) { color: var(--ink-2); font-size: clamp(1.125rem, 1.04rem + 0.3vw, 1.3rem); line-height: 1.62; }
@media (max-width: 860px) {
  .about-story__grid { grid-template-columns: 1fr; }
  .about-story__body { grid-column: auto; }
}

.dropcap::first-letter {

  font-family: var(--display);
  float: left;
  margin: 0.08em 0.09em 0 -0.02em;
  font-size: 3.55em;
  line-height: 0.8;
  color: var(--orange-deep);
}
.pull {
  margin: var(--space-l) 0;
  padding: var(--space-m) 0 var(--space-m);
  border-block: 1px solid var(--line-strong);
}
.pull blockquote p {
  font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.9rem);
  font-weight: 360;
  line-height: 1.1;
  letter-spacing: -0.018em;
  text-wrap: balance;
  text-indent: -0.42em;
}
.pull figcaption {
  margin-top: 18px;
  font: 400 0.875rem/1.4 var(--sans);
  color: var(--muted);
}
.pull figcaption a { color: var(--ink); }

/* Timeline */
.timeline { border-top: 1px solid var(--line-strong); }
.timeline li {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 4fr) minmax(0, 6fr);
  align-items: baseline;
  gap: 8px var(--space-l);
  padding: 24px 0 26px;
  border-bottom: 1px solid var(--line);
}
.timeline .when { font: 500 0.8125rem/1.6 var(--eyebrow); letter-spacing: 0.085em; text-transform: uppercase; color: var(--orange-deep); }
.timeline h3 { font-family: var(--display); font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.6rem); line-height: 1.15; letter-spacing: -0.018em; }
.timeline p { color: var(--muted); font-size: 1.0625rem; max-width: 34em; }
@media (max-width: 760px) {
  .timeline li { grid-template-columns: 1fr; }
}
/* A pointer over a milestone lights it: a soft wash, an orange rule drawing
   along its foot, the year rolling over like a counter, the title stepping in. */
.timeline li { position: relative; isolation: isolate; }
.timeline li::before,
.timeline li::after { content: ""; position: absolute; pointer-events: none; }
.timeline li::before {
  inset: 0 calc(var(--gutter) * -0.4);
  z-index: -1;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.timeline li::after {
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.25s var(--ease-out);
}
.timeline .when { display: inline-block; overflow: hidden; vertical-align: top; }
.timeline .when > span { display: inline-block; text-shadow: 0 1lh currentColor; }
.timeline :is(h3, p) { transition: translate 0.3s var(--ease-out), color 0.3s ease; }
@media (hover: hover) and (pointer: fine) {
  .timeline li:hover::before { opacity: 1; }
  .timeline li:hover p { color: var(--ink-2, var(--ink)); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .timeline li:hover::after { transform: scaleX(1); transition-duration: 0.6s; }
  .timeline .when > span { transition: translate 0.45s var(--ease-out); }
  .timeline li:hover .when > span { translate: 0 -1lh; }
  .timeline li:hover h3 { translate: 0.3em 0; }
}

/* Off the clock: a small set of facts */
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
}
.facts li { display: grid; align-content: start; gap: 14px; padding: 24px 24px 30px 0; }
.facts li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.facts .label { color: var(--muted); }
.facts b { font-weight: 420; font-size: clamp(1.2rem, 1.05rem + 0.45vw, 1.45rem); line-height: 1.25; letter-spacing: -0.008em; text-wrap: pretty; }
@media (max-width: 960px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts li:nth-child(3) { padding-left: 0; border-left: 0; }
  .facts li:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .facts { grid-template-columns: 1fr; }
  .facts li, .facts li + li { padding: 20px 0 24px; border-left: 0; }
  .facts li + li { border-top: 1px solid var(--line); }
}

/* Services page ----------------------------------------------------------- */
.svc-title {
  font-family: var(--display);
  font-size: clamp(2.6rem, 1.3rem + 5vw, 6.2rem);
  line-height: 0.95;
  letter-spacing: -0.031em;
}
.svc-title .line { display: block; }
.svc-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: 28px var(--space-xl);
}
.svc-index {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--space-xl);
  border-block: 1px solid var(--line-strong);
}
.svc-index a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding-block: 16px;
  font: 500 0.9375rem/1.25 var(--sans);
  text-decoration: none;
  transition: color 0.2s;
}
.svc-index a { padding-inline: 18px; }
.svc-index a:first-child { padding-left: 0; }
.svc-index a:last-child { padding-right: 0; }
.svc-index a + a { border-left: 1px solid var(--line); }
.svc-index .icon { --size: 40px; --icon-weight: 44; }
.svc-index small { font: 600 0.75rem/1 var(--sans); letter-spacing: 0.12em; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .svc-index a:hover { color: var(--orange-deep); }
}
@media (max-width: 1100px) {
  .svc-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-index a:nth-child(n) { padding-inline: 0 18px; border-left: 0; }
  .svc-index a:nth-child(even) { padding-inline: 18px 0; border-left: 1px solid var(--line); }
  .svc-index a:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .svc-head { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .svc-index { grid-template-columns: 1fr; }
  .svc-index a:nth-child(n) { padding-inline: 0; border-left: 0; }
  .svc-index a + a { border-top: 1px solid var(--line); }
}

.page-services .page-head { padding-bottom: 0; }
.svc-list { padding-bottom: var(--section); }
.svc-list > .svc:first-child { border-top: 0; }
.svc {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 5fr) minmax(0, 5fr);
  gap: 28px var(--space-l);
  padding-block: var(--space-xl);
  border-top: 1px solid var(--line-strong);
  scroll-margin-top: 16px;
}
.svc .icon { --size: clamp(84px, 9vw, 148px); }
.svc__num {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
  font: 500 0.75rem/1 var(--eyebrow);
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: var(--orange-deep);
}
.svc__num span { color: var(--muted); }
.svc__head h2 {
  font-family: var(--display);
  font-size: clamp(2rem, 1.35rem + 2.4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.031em;
  text-wrap: balance;
}
.svc__head > p:last-child { margin-top: 20px; max-width: 28em; color: var(--ink-2); text-wrap: pretty; }
.svc__detail { display: grid; gap: var(--space-m); align-content: start; }
.svc__list { border-top: 1px solid var(--line); }
.svc__list li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.125rem;
  line-height: 1.35;
}
.svc__list li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  transform: translateY(-2px);
  background: var(--line-strong);
}
.svc__proof {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 18px;
  border-left: 2px solid var(--orange);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.svc__proof a { text-decoration-color: color-mix(in srgb, var(--orange) 70%, transparent); text-decoration-thickness: 1.5px; }
.svc__proof blockquote p { font-style: italic; text-wrap: pretty; }
.svc__proof figcaption { font: 400 0.8125rem/1.4 var(--sans); color: var(--muted); }
.svc__ask { justify-self: start; color: var(--ink); }
/* On wide, tall screens each icon stays beside its service while the words go by */
@media (min-width: 961px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
  .svc__icon { position: sticky; top: calc(var(--mast-pinned) + 24px); align-self: start; }
}
@media (max-width: 960px) {
  .svc { grid-template-columns: auto minmax(0, 1fr); }
  .svc__detail { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .svc { grid-template-columns: 1fr; }
  .svc .icon { --size: 84px; }
}

/* Work page --------------------------------------------------------------- */
.projects { padding-bottom: var(--space-l); }
.project {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 32px var(--space-xl);
  align-items: center;
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--line-strong);
  scroll-margin-top: 16px;
}
.project:nth-of-type(even) .project__media { order: 2; }
.project__media {
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 5 / 4;
}
.project__media > * { height: 100%; }
.project__body { display: grid; gap: 20px; justify-items: start; }
.project__body .label { color: var(--orange-deep); }
.project__body h2 {
  font-family: var(--display);
  font-size: clamp(2.3rem, 1.4rem + 2.8vw, 4rem);
  line-height: 1;
  letter-spacing: -0.031em;
}
.project__body > p:not(.label) { color: var(--ink-2); max-width: 30em; text-wrap: pretty; }
.project__quote {
  margin: 6px 0;
  padding-left: 18px;
  border-left: 2px solid var(--orange);
}
.project__quote blockquote p {
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem);
  font-style: italic;
  line-height: 1.32;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.project__quote figcaption { margin-top: 10px; font: 400 0.8125rem/1.4 var(--sans); color: var(--muted); }
.project__quote figcaption a { color: var(--ink); }
.project__facts { display: flex; flex-wrap: wrap; gap: 8px; }
.project__facts li {
  padding: 8px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font: 500 0.8125rem/1 var(--sans);
}
.project__links { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.project .art-p4t .logo { height: 52%; }
.art-fill { background: var(--fnm-blue); }
.art-fill img { width: 100%; height: 100%; object-fit: cover; }
.project .art-k180 svg { width: 58%; }
@media (max-width: 860px) {
  .project { grid-template-columns: 1fr; }
  .project:nth-of-type(even) .project__media { order: 0; }
}

/* A short note at the end of the work page */
.work-coda { padding-top: 0; }
.work-coda__inner {
  display: grid;
  gap: 14px;
  padding-top: var(--space-m);
  border-top: 1px solid var(--line-strong);
}
.work-coda h2 { max-width: 30ch; line-height: 1.12; } /* room between a "p" and an "f" below it */
.work-coda h2 a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
  transition: text-decoration-color 0.2s ease;
}
.work-coda h2 a .arrow { align-self: center; width: 0.7em; height: 0.7em; }
@media (hover: hover) and (pointer: fine) {
  .work-coda h2 a:hover { text-decoration-color: var(--orange); }
  .work-coda h2 a:hover .arrow { transform: translateX(3px); }
}

/* Music page ---------------------------------------------------------------- */

/* A band: its name set large on a hairline */
.band { padding-bottom: var(--section); }
.band__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 24px;
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-s);
  border-bottom: 1px solid var(--line);
}
.band__name {
  font-family: var(--display);
  font-size: clamp(2.5rem, 1.3rem + 3.6vw, 4.75rem);
  line-height: 0.94;
  letter-spacing: -0.031em;
}
.band__meta { color: var(--muted); }

/* The listening station: a record player, and the back of the sleeve */
.station {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2xl);
}
@media (max-width: 900px) {
  .station { grid-template-columns: 1fr; }
  .station .tt { width: min(100%, 520px); margin-inline: auto; }
}

/* The jewel case: a sleeve, and a disc that slides out of it */
.deck {
  --disc-shift: 0%;
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 1.36 / 1;
  margin-inline: auto;
}
.deck__disc {
  position: absolute;
  top: 3.5%;
  left: 4%;
  width: 66%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateX(var(--disc-shift));
  transition: transform 0.9s var(--ease-drawer);
  filter: drop-shadow(0 18px 30px rgb(0 0 0 / 0.45));
}
.deck__spin {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--vinyl);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
}
.deck__disc::after {
  /* the light on the grooves stays put while the record turns */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--vinyl-sheen);
  -webkit-mask: radial-gradient(circle, transparent 0 33%, #000 34%);
  mask: radial-gradient(circle, transparent 0 33%, #000 34%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.deck__label {
  position: absolute;
  inset: 33.5%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--label-bg, var(--orange));
  color: var(--label-fg, var(--ink));
  font: 500 clamp(0.55rem, 0.9vw, 0.75rem)/1.1 var(--eyebrow);
  letter-spacing: 0.085em;
  text-align: center;
  text-transform: uppercase;
  transition: background-color 0.3s;
  -webkit-mask: radial-gradient(circle, transparent 0 18%, #000 18.5%);
  mask: radial-gradient(circle, transparent 0 18%, #000 18.5%);
}
.deck__label > * { grid-area: 1 / 1; }
.deck__label span { transform: translateY(-160%); }
.deck__label small { font-size: 0.8em; font-weight: 600; letter-spacing: 0.06em; text-transform: none; transform: translateY(190%); }
.deck__sleeve {
  position: absolute;
  top: 0;
  left: 0;
  width: 73.5%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 3px;
  background: var(--night-2);
  box-shadow: 0 28px 60px -18px rgb(0 0 0 / 0.65), 0 0 0 1px rgb(255 255 255 / 0.06);
  transition: transform 0.9s var(--ease-drawer);
}
.deck__sleeve img,
.deck__sleeve svg { width: 100%; height: 100%; object-fit: cover; }
.deck__cover { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s var(--ease-out); }
.deck__cover.is-shown { opacity: 1; }
.deck__sleeve::after {
  /* a little plastic sheen */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgb(255 255 255 / 0.16) 0%, transparent 32%, transparent 70%, rgb(255 255 255 / 0.05) 100%);
  pointer-events: none;
}
.deck--teaser { --disc-shift: 42%; }
.deck--teaser .deck__disc::after { background: conic-gradient(from 200deg, transparent 0deg, rgb(255 255 255 / 0.26) 24deg, transparent 52deg, transparent 180deg, rgb(255 255 255 / 0.18) 204deg, transparent 232deg); }
.deck--teaser .deck__spin { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); }
@media (hover: hover) and (pointer: fine) {
  .deck--teaser:hover { --disc-shift: 50%; }
}

/* The record player: a white plinth with black ash cheeks, the sleeve propped
   behind it. The platter spins up, the tonearm swings in and follows the song.
   Plinth geometry (in a 120 × 100 box): platter centre 53,50; tonearm pivot 106,15. */
.tt {
  position: relative;
  color-scheme: light;
  width: min(100%, 600px);
  aspect-ratio: 1.07 / 1;
  -webkit-tap-highlight-color: transparent;
}
.js .tt { cursor: pointer; }
.tt__sleeve {
  position: absolute;
  top: 0;
  right: 0;
  width: 46%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 3px;
  background: var(--night-2);
  box-shadow: 0 24px 50px -20px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.06);
  rotate: 5deg;
  transition: rotate 0.9s var(--ease-drawer), translate 0.9s var(--ease-drawer);
}
.tt__sleeve img { width: 100%; height: 100%; object-fit: cover; }
.tt__sleeve::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgb(255 255 255 / 0.16) 0%, transparent 32%, transparent 70%, rgb(255 255 255 / 0.05) 100%);
  pointer-events: none;
}
.tt__plinth {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 88%;
  aspect-ratio: 1.2;
  border-radius: 12px;
  background:
    url("/assets/img/grain.png") 0 0 / 200px,
    linear-gradient(165deg, #f7f6f3 0%, #ebeae6 55%, #dfdeda 100%);
  background-blend-mode: soft-light, normal;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.75),
    inset 0 -1px 0 rgb(0 0 0 / 0.1),
    0 3px 0 #bdbcb7,
    0 7px 0 #1c1c1b,
    0 44px 70px -26px rgb(0 0 0 / 0.9);
  transition: scale 0.2s var(--ease-out);
}
.tt__plinth::before,
.tt__plinth::after {
  /* black ash cheeks */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3.5%;
  background:
    repeating-linear-gradient(176deg, rgb(255 255 255 / 0.06) 0 1px, transparent 1px 6px),
    linear-gradient(90deg, #161615, #343432 55%, #1d1d1c);
}
.tt__plinth::before { left: 0; border-radius: 12px 0 0 12px; }
.tt__plinth::after { right: 0; border-radius: 0 12px 12px 0; }
.tt__mark {
  position: absolute;
  left: 7%;
  top: 3.4%;
  font: 500 clamp(0.5rem, 0.4rem + 0.3vw, 0.625rem)/1 var(--eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 42%, transparent);
}
.tt__led {
  position: absolute;
  left: 7%;
  bottom: 5%;
  width: 1.5%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #a3a29d;
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.3);
  transition: background-color 0.3s, box-shadow 0.4s;
}
.tt.is-on .tt__led { background: var(--orange-glow); box-shadow: 0 0 0 2px rgb(240 81 35 / 0.18), 0 0 10px 2px rgb(255 122 69 / 0.75); }
.tt__platter {
  position: absolute;
  left: 7.5%;
  top: 6%;
  width: 73.3333%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    repeating-conic-gradient(rgb(28 28 27 / 0.3) 0 1.6deg, transparent 1.6deg 5deg),
    conic-gradient(from 30deg, #cfcac2, #f7f3ec 15%, #a9a49c 30%, #ece7df 45%, #b7b2aa 62%, #f6f2ea 78%, #bdb8b0 90%, #cfcac2);
  box-shadow: 0 12px 24px -8px rgb(0 0 0 / 0.5), inset 0 0 0 1px rgb(0 0 0 / 0.14);
}
.tt__record {
  position: absolute;
  inset: 2.3%;
  border-radius: 50%;
  background: var(--vinyl);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06), 0 1px 3px rgb(0 0 0 / 0.4);
}
.tt__record .deck__label { inset: 34.5%; }
.tt.is-changing .tt__record { animation: record-swap 0.8s var(--ease-out); }
@keyframes record-swap { 35% { scale: 1.035; filter: brightness(1.25); } }
.tt__sheen {
  position: absolute;
  left: 9.1667%;
  top: 8%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--vinyl-sheen);
  -webkit-mask: radial-gradient(circle, transparent 0 32%, #000 33%);
  mask: radial-gradient(circle, transparent 0 32%, #000 33%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.tt__spindle {
  position: absolute;
  left: 44.1667%;
  top: 50%;
  width: 1.9%;
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
  background: radial-gradient(circle at 35% 35%, #fff, #b5b0a8 55%, #6d6862);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.55);
}
.tt__arm { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tt__arm-base { fill: #e6e5e1; stroke: color-mix(in srgb, var(--ink) 14%, transparent); stroke-width: 0.4; }
.tt__arm-swing {
  transform-box: view-box;
  transform-origin: 106px 15px;
  transform: rotate(var(--arm, 0deg));
  transition: transform 1.1s var(--ease-drawer);
}
.tt.is-tracking .tt__arm-swing { transition: transform 0.6s linear; }
.tt__arm-shadow { opacity: 0.32; transform: translate(1.4px, 2.4px); transition: transform 0.7s var(--ease-out), opacity 0.7s; }
.tt:not(.is-on) .tt__arm-shadow,
.tt.is-lifted .tt__arm-shadow { opacity: 0.18; transform: translate(3.2px, 5.2px); }
.tt:active .tt__plinth { scale: 0.996; }
/* The record turns by hand (vinyl.js). A finger turns it with sideways drags, so
   swiping up and down over it still scrolls the page. */
.is-vinyl :is(.tt__platter, .deck__disc) { touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.is-vinyl.is-scratching,
.is-vinyl.is-scratching * { cursor: grabbing; }
.tt.is-scratching .tt__plinth { scale: none; }
@media (hover: hover) and (pointer: fine) {
  .tt:not(.is-on):hover { --arm: 5deg; }
  .tt:hover .tt__sleeve { rotate: 7deg; translate: 1.5% -2%; }
}

/* The inlay: the back of the case, printed with the player */
.inlay {
  color-scheme: light;
  --muted: #62615d;
  --line: color-mix(in srgb, var(--ink) 13%, transparent);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: clamp(22px, 2.1vw, 30px) minmax(0, 1fr) clamp(22px, 2.1vw, 30px);
  border-radius: 2px;
  background: #f3f2ee;
  color: var(--ink);
  box-shadow: 0 36px 70px -34px rgb(0 0 0 / 0.85), 0 12px 28px -16px rgb(0 0 0 / 0.55);
}
.inlay::after {
  /* paper */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: url("/assets/img/grain.png") 0 0 / 200px;
  opacity: 0.4;
  mix-blend-mode: overlay;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .inlay::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      border-radius: inherit;
      background: linear-gradient(105deg, transparent 36%, rgb(255 255 255 / 0.42) 47%, rgb(255 255 255 / 0.58) 50%, rgb(255 255 255 / 0.42) 53%, transparent 64%) no-repeat;
      background-size: 260% 100%;
      mix-blend-mode: overlay;
      pointer-events: none;
      animation: inlay-light linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 60%;
    }
    @keyframes inlay-light { from { background-position: 100% 0; } to { background-position: 0 0; } }
  }
}
.inlay__spine {
  display: grid;
  place-items: center;
  overflow: hidden;
  writing-mode: vertical-rl;
  white-space: nowrap;
  font: 500 0.625rem/1 var(--eyebrow);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
}
.inlay__spine:first-child { rotate: 180deg; }
.inlay__small { font: 400 0.75rem/1.5 var(--sans); color: var(--muted); }

/* Player */
.player {
  display: grid;
  gap: 18px;
  padding: var(--space-m) var(--space-m);
  /* the folds where the spines bend back */
  background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 7%, transparent), transparent 12px, transparent calc(100% - 12px), color-mix(in srgb, var(--ink) 7%, transparent));
  box-shadow: inset 1px 0 rgb(0 0 0 / 0.13), inset -1px 0 rgb(0 0 0 / 0.13);
}
.player__now { display: flex; align-items: center; gap: 16px; }
.player__play {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--orange);
  color: var(--ink);
  box-shadow: 0 8px 18px -8px rgb(185 60 18 / 0.8);
  cursor: pointer;
  transition: transform 0.16s var(--ease-out), background-color 0.2s;
}
.player__play:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .player__play:hover { background: var(--orange-glow); }
}
.player__play svg { width: 20px; height: 20px; }
.player__play .i-play { translate: 1px 0; }
.player__play .i-pause { display: none; }
.is-playing .player__play .i-play { display: none; }
.is-playing .player__play .i-pause { display: block; }
.player__title { display: grid; gap: 6px; min-width: 0; }
.player__song { display: grid; gap: 4px; min-width: 0; }
.player__title b {
  overflow: hidden;
  font-weight: 460;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player__song span { font: 400 0.8125rem/1.3 var(--sans); color: var(--muted); }
.player__status {
  font: 500 0.6875rem/1.2 var(--eyebrow);
  letter-spacing: 0.085em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
}
.is-playing .player__status { color: var(--orange-deep); }
/* The credits, and record crackle on or off: the dot flickers like dust under the
   needle while it plays */
.player__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
}
.player__foot .inlay__small { flex: 1 1 15em; }
.player__crackle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: 500 0.6875rem/1 var(--eyebrow);
  letter-spacing: 0.085em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, transform 0.16s var(--ease-out);
}
.player__crackle[hidden] { display: none; }
.player__crackle:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) {
  .player__crackle:hover { border-color: var(--line-strong); color: var(--ink); }
}
.player__crackle-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  transition: background-color 0.2s, opacity 0.2s;
}
.player__crackle[aria-pressed="true"] { color: var(--ink); }
.player__crackle[aria-pressed="true"] .player__crackle-dot { background: var(--orange); opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .is-playing .player__crackle[aria-pressed="true"] .player__crackle-dot { animation: crackle 2.3s steps(1) infinite; }
}
@keyframes crackle {
  0%, 100% { opacity: 1; }
  11% { opacity: 0.45; }
  13% { opacity: 1; }
  47% { opacity: 0.6; }
  48% { opacity: 1; }
  71% { opacity: 0.3; }
  73% { opacity: 1; }
  74% { opacity: 0.7; }
  75% { opacity: 1; }
}

.player__bar {
  display: grid;
  grid-template-columns: 2.8em minmax(0, 1fr) 2.8em;
  align-items: center;
  gap: 10px;
  font: 500 0.75rem/1 var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.player__bar > :last-child { text-align: right; }
/* The scrubber is the song's waveform; a range input on top keeps it a slider */
.wave { --progress: 0%; --hover: 0%; position: relative; height: 40px; }
.wave__bars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}
.wave__bars i {
  flex: 1;
  height: calc(var(--h, 8) * 1%);
  min-height: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  transition: height 0.6s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 7ms);
}
.wave__bars--fill { clip-path: inset(0 calc(100% - var(--progress)) 0 0); }
.wave__bars--fill i { background: var(--orange); }
.wave__bars--hover { clip-path: inset(0 calc(100% - var(--hover)) 0 0); opacity: 0; transition: opacity 0.2s; }
.wave__bars--hover i { background: color-mix(in srgb, var(--ink) 34%, transparent); }
.wave .player__seek { position: absolute; inset: 0; }
.player__seek {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.player__seek::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.player__seek::-moz-range-track { height: 100%; background: transparent; }
.player__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 3px;
  height: 40px;
  border: 0;
  border-radius: 2px;
  background: var(--ink);
  box-shadow: 0 0 0 2px #f3f2ee;
  transition: transform 0.15s var(--ease-out);
}
.player__seek::-moz-range-thumb { width: 3px; height: 40px; border: 0; border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 2px #f3f2ee; }
.player__seek:active::-webkit-slider-thumb { transform: scaleX(1.6); }
.player__seek:disabled { cursor: default; }
.player__seek:disabled::-webkit-slider-thumb { background: transparent; box-shadow: none; }
.player__seek:disabled::-moz-range-thumb { background: transparent; box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .wave:hover .wave__bars--hover { opacity: 1; }
}

.tracks { border-top: 1px solid var(--line); }
.track {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 6px 12px 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
}
.track__n { display: grid; align-items: center; }
.track__num { font: 500 0.75rem/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--muted); }
.track__t { font-size: 1.125rem; line-height: 1.2; }
.track__t small { display: block; margin-top: 3px; font: 400 0.75rem/1.2 var(--sans); color: var(--muted); }
.track__d { font: 500 0.75rem/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--muted); }
.track[aria-current="true"] { color: var(--ink); }
.track[aria-current="true"] .track__num { color: var(--orange-deep); }
@media (hover: hover) and (pointer: fine) {
  .track:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); }
}

/* The equaliser shown on the playing track */
.eq { display: none; gap: 2px; align-items: end; height: 12px; }
.eq i { width: 2px; height: 100%; background: var(--orange-deep); transform-origin: bottom; animation: eq 0.9s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -0.3s; }
.eq i:nth-child(3) { animation-delay: -0.6s; }
@keyframes eq { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
.is-playing .track[aria-current="true"] .eq { display: inline-flex; }
.is-playing .track[aria-current="true"] .track__num { display: none; }

/* Floating at the foot of the screen (site.js): the music, bottom left, once a song
   has started and its own player is out of sight; "Write to Shai", bottom right, past
   the first screen. Both are dark glass, 56 px tall, and step aside for the sign-up
   card, the cookie bar, the menu and, on phones, for each other and the keyboard. */
.now-bar,
.fab {
  --float: rgb(18 18 17 / 0.94);
  --float-hover: rgb(34 34 32 / 0.96);
  position: fixed;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  align-items: center;
  height: 56px;
  border-radius: 999px;
  background: var(--float);
  color: var(--chalk);
  box-shadow: 0 18px 40px -14px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(243 242 238 / 0.1);
  translate: 0 calc(100% + 40px);
  opacity: 0;
  visibility: hidden;
  transition: translate 0.5s var(--ease-drawer), opacity 0.25s, visibility 0s 0.5s,
    transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background-color 0.25s;
}
@supports (backdrop-filter: blur(1px)) {
  .now-bar, .fab { --float: rgb(18 18 17 / 0.9); --float-hover: rgb(34 34 32 / 0.92); backdrop-filter: blur(16px) saturate(1.2); }
}
/* On a dark page the glass is a step lighter, so it still reads as something on top */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.now-bar, .fab) { --float: rgb(40 40 38 / 0.9); --float-hover: rgb(52 52 49 / 0.92); }
}
:root[data-theme="dark"] :is(.now-bar, .fab) { --float: rgb(40 40 38 / 0.9); --float-hover: rgb(52 52 49 / 0.92); }
.now-bar.is-shown,
.fab.is-shown {
  translate: 0 0;
  opacity: 1;
  visibility: visible;
  transition: translate 0.6s var(--ease-drawer), opacity 0.3s,
    transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background-color 0.25s;
}
/* Carried over from the page before: already in place, and held still through the page change */
.now-bar.is-instant { transition: none; }
.now-bar.is-shown { view-transition-name: now-bar; }
::view-transition-group(now-bar),
::view-transition-old(now-bar),
::view-transition-new(now-bar) { animation: none; }
/* Reaching the music on Home or Music, the waiting bar flutters once: a lift and settle
   here, a ring from its button, and a turn of its disc (site.js). With less motion, a glow. */
@keyframes now-lift {
  0% { transform: none; }
  30% { transform: translateY(-8px); }
  58% { transform: translateY(1.5px); }
  78% { transform: translateY(-1px); }
  100% { transform: none; }
}
@keyframes now-ring {
  from { box-shadow: 0 0 0 0 rgb(240 81 35 / 0.6); }
  to { box-shadow: 0 0 0 14px rgb(240 81 35 / 0); }
}
@keyframes now-glow {
  0%, 100% { box-shadow: 0 18px 40px -14px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(243 242 238 / 0.1); }
  30%, 70% { box-shadow: 0 18px 40px -14px rgb(0 0 0 / 0.55), 0 0 0 2px var(--orange), 0 0 22px 2px rgb(240 81 35 / 0.35); }
}
.now-bar.is-calling { animation: now-lift 0.95s var(--ease-out); }
.now-bar.is-calling .now-bar__play { animation: now-ring 1s var(--ease-out) 0.2s 2; }

/* The music */
.now-bar {
  left: max(24px, env(safe-area-inset-left));
  gap: 10px;
  width: max-content;
  max-width: min(420px, calc(100vw - 48px));
  padding: 7px 8px 7px 7px;
}
.now-bar__disc {
  position: relative;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: var(--vinyl);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
}
.now-bar__disc::after {
  content: "";
  position: absolute;
  inset: 33%;
  border-radius: 50%;
  background: var(--label-bg, var(--orange));
  box-shadow: inset 0 0 0 4px var(--label-bg, var(--orange)), inset 0 0 0 5.5px rgb(0 0 0 / 0.35);
  transition: background-color 0.4s, box-shadow 0.4s;
}
.now-bar__text {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 4px 6px 4px 2px;
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
}
.now-bar__text b { overflow: hidden; font: 500 0.9375rem/1.2 var(--body); text-overflow: ellipsis; white-space: nowrap; }
.now-bar__text span { font: 400 0.75rem/1.2 var(--body); color: var(--chalk-3); white-space: nowrap; }
.now-bar__play,
.now-bar__close {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.16s var(--ease-out), background-color 0.2s, color 0.2s;
}
.now-bar__play { width: 42px; height: 42px; margin-left: 4px; background: var(--chalk); color: var(--night); }
/* How far into the song: a thin orange ring around the button */
.now-bar__play::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(var(--orange) calc(var(--p, 0) * 1turn), rgb(243 242 238 / 0.14) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  pointer-events: none;
}
.now-bar__play svg { width: 15px; height: 15px; }
.now-bar__play .i-play { translate: 1px 0; }
.now-bar__play .i-pause,
.now-bar.is-playing .now-bar__play .i-play { display: none; }
.now-bar.is-playing .now-bar__play .i-pause { display: block; }
.now-bar__close { width: 36px; height: 36px; background: transparent; color: var(--chalk-3); }
.now-bar__close svg { width: 16px; height: 16px; }
.now-bar__play:active { transform: scale(0.92); }
.now-bar__close:active { transform: scale(0.88); }
.now-bar :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .now-bar__play:hover { background: var(--orange); color: var(--night); }
  .now-bar__close:hover { background: rgb(243 242 238 / 0.1); color: var(--chalk); }
  .now-bar__text:hover b { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
}

/* Write to Shai */
.fab {
  right: max(24px, env(safe-area-inset-right));
  gap: 12px;
  padding: 7px 22px 7px 7px;
  font: 500 0.9375rem/1 var(--body);
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
}
.fab__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: var(--orange);
  color: var(--night);
}
.fab__icon svg { width: 26px; height: 26px; overflow: visible; }
.fab__fill { fill: var(--orange); }
/* An envelope: on hover its flap opens and a letter rises out */
.fab__flap,
.fab__letter { transform-box: view-box; }
.fab__flap { transform-origin: 12px 10.5px; transform: scaleY(-1); transition: transform 0.3s var(--ease-out) 0.08s; }
.fab__letter { opacity: 0; transform: translateY(4px); transition: transform 0.3s var(--ease-out), opacity 0.15s; }
.fab:active { transform: scale(0.97); transition-duration: 0.1s; }
.fab:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.fab:focus-visible .fab__flap { transform: none; transition-delay: 0s; }
.fab:focus-visible .fab__letter { opacity: 1; transform: translateY(-1px); transition-delay: 0.14s; }
@media (hover: hover) and (pointer: fine) {
  .fab:hover { background: var(--float-hover); box-shadow: 0 24px 44px -14px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(243 242 238 / 0.18); transform: translateY(-2px); }
  .fab:hover:active { transform: translateY(-1px) scale(0.97); }
  .fab:hover .fab__flap { transform: none; transition-delay: 0s; }
  .fab:hover .fab__letter { opacity: 1; transform: translateY(-1px); transition-delay: 0.14s; }
}

/* Making way */
.menu-open :is(.fab, .now-bar).is-shown,
body:has(.nudge.is-shown:not(.is-aside)) .fab.is-shown {
  translate: 0 calc(100% + 40px);
  opacity: 0;
  visibility: hidden;
  transition: translate 0.5s var(--ease-drawer), opacity 0.25s, visibility 0s 0.5s;
}
/* The cookie bar steps up above the music; the page's last line stays clear of both */
body:has(.now-bar.is-shown) .consent { bottom: calc(max(24px, env(safe-area-inset-bottom)) + 68px); }
body:has(.now-bar.is-shown) .footer__base { padding-bottom: calc(max(26px, env(safe-area-inset-bottom)) + 80px + var(--consent-space, 0px)); }
html:has(.now-bar.is-shown) { scroll-padding-bottom: 96px; }

@media (max-width: 640px) {
  .now-bar, .fab { bottom: max(14px, env(safe-area-inset-bottom)); }
  .now-bar { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); width: auto; max-width: none; }
  .now-bar__text { flex: 1; }
  .fab { right: max(14px, env(safe-area-inset-right)); width: 56px; padding: 7px; }
  .fab__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* One thing at a time on a phone: while the music is up, it takes the button's place */
  body:has(.now-bar.is-shown) .fab.is-shown,
  .consent-open .fab.is-shown {
    translate: 0 calc(100% + 40px);
    opacity: 0;
    visibility: hidden;
    transition: translate 0.5s var(--ease-drawer), opacity 0.25s, visibility 0s 0.5s;
  }
  body:has(.now-bar.is-shown) .consent { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 66px); }
}
/* Typing on a touch screen: the keyboard is up, so nothing floats over the form */
@media (pointer: coarse) {
  body:has(:is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"]), textarea, select):focus) :is(.fab, .now-bar).is-shown {
    translate: 0 calc(100% + 40px);
    opacity: 0;
    visibility: hidden;
    transition: translate 0.5s var(--ease-drawer), opacity 0.25s, visibility 0s 0.5s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .now-bar, .fab, .menu-open :is(.fab, .now-bar).is-shown, body:has(.nudge.is-shown:not(.is-aside)) .fab.is-shown { translate: none; }
  .now-bar.is-calling { animation: now-glow 1.8s ease-in-out !important; } /* a glow, not motion */
  .now-bar.is-calling .now-bar__play { animation: none; }
}

/* Without JavaScript, the browser's own players */
.tracks-plain { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.tracks-plain li { display: grid; gap: 8px; font-size: 1.125rem; }
.tracks-plain small { font: 400 0.75rem/1 var(--sans); color: var(--muted); }
.tracks-plain audio { width: 100%; }

/* Liner notes */
.liner {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: 20px var(--space-xl);
  margin-top: var(--section);
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.liner__body { grid-column: 2; columns: 2 19em; column-gap: var(--space-l); }
.liner__body p { break-inside: avoid; color: var(--ink-2); text-wrap: pretty; }
.liner__body p:not(.lead) { margin-bottom: 1em; }
.liner__body .lead { column-span: all; max-width: 26em; margin-bottom: 1.1em; color: var(--ink); }
.liner__body a { color: var(--ink); text-decoration-color: var(--orange); text-decoration-thickness: 1.5px; }
@media (max-width: 860px) {
  .liner { grid-template-columns: 1fr; }
  .liner__body { grid-column: auto; }
}

/* What Does It Eat */
.wdie {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2xl);
}
.wdie__art { width: min(100%, 382px); margin: 0; }
.wdie__art img {
  width: 100%;
  border-radius: 2px;
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.8);
}
.wdie__copy { display: grid; gap: 22px; max-width: 34em; }
.wdie__copy .lead { color: var(--ink); }
.wdie__copy > p:not(.lead) { color: var(--ink-2); text-wrap: pretty; }

.credits { border-top: 1px solid var(--line); }
.credits div {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: baseline;
  gap: 4px 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.credits dt { font-weight: 450; font-size: 1.125rem; }
.credits dd { margin: 0; font: 400 0.9375rem/1.4 var(--sans); color: var(--ink-2); }
.streams { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
/* The drum kit, at the foot of Music: the kit itself as the way in, and how to play */
.kit-feature__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--space-l);
  align-items: center;
}
.kit-stage {
  color-scheme: dark;
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: radial-gradient(58% 62% at 50% 0%, rgb(255 252 246 / 0.1), transparent 72%), #0b0b0a;
  box-shadow: 0 0 0 1px var(--chalk-line), 0 40px 80px -40px rgb(0 0 0 / 0.7);
  color: var(--chalk);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kit-stage picture,
.kit-stage img { display: block; width: 100%; height: auto; }
.kit-stage img { transition: scale 0.6s var(--ease-out); }
.kit-stage__cue {
  position: absolute;
  left: 50%;
  top: 6%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  translate: -50% 0;
  background: rgb(18 18 17 / 0.74);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgb(243 242 238 / 0.16);
  font: 500 0.9375rem/1 var(--body);
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.kit-stage__cue svg { width: 18px; height: 18px; }
.kit-stage:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.kit-stage:active img { scale: 0.99; }
.kit-stage[aria-busy="true"] { cursor: progress; }
.kit-feature__copy .lead { margin: 0 0 0.6em; color: var(--ink); }
.kit-feature__copy p:not(.lead) { margin: 0; max-width: 34em; color: var(--ink-2); }
.kit-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: var(--space-s) 0 0;
  padding: 0;
  list-style: none;
  font: 400 0.875rem/1.6 var(--body);
  color: var(--muted);
}
.kit-keys kbd {
  display: inline-block;
  min-width: 1.9em;
  margin-right: 6px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  font: 500 0.75rem/1.4 var(--body);
  color: var(--ink-2);
  text-align: center;
}
.kit-keys kbd + kbd { margin-left: -2px; }
.kit-feature .drumkit-button { margin-top: var(--space-m); }
/* Fingers or a mouse: each sees only its own way to play */
.kit-stage__touch, .kit-touch { display: none; }
@media (pointer: coarse) {
  .kit-stage__touch { display: inline; }
  .kit-touch { display: block; }
  .kit-stage__fine, .kit-fine, .kit-keys { display: none; }
}
@media (hover: hover) and (pointer: fine) {
  .kit-stage:hover .kit-stage__cue { background: var(--orange); color: #121211; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .kit-stage:hover img { scale: 1.025; }
}
@media (max-width: 860px) {
  .kit-feature__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .kit-stage__cue { top: 10px; padding: 8px 13px; font-size: 0.8125rem; }
}
.drumkit-button svg { width: 18px; height: 18px; }

/* The drum kit's triggers (drumkit.js opens the kit) */
.drumkit-word {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  font-variation-settings: inherit;
  text-decoration: underline dotted;
  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
  text-decoration-thickness: max(1.5px, 0.05em);
  text-underline-offset: 0.18em;
  cursor: pointer;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.drumkit-word:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 3px; }
.drumkit-word[aria-busy="true"] { cursor: progress; }
@media (hover: hover) and (pointer: fine) {
  .drumkit-word:hover { color: var(--orange); text-decoration-color: currentColor; }
}

.disco {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: 16px var(--space-xl);
  margin-top: var(--section);
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.disco__title { padding-top: 6px; color: var(--orange); }
.disco__item {
  position: relative;
  display: grid;
  grid-template-columns: 4em minmax(0, 1fr) auto 22px;
  align-items: baseline;
  gap: 6px var(--space-m);
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.disco__list li:first-child .disco__item { padding-top: 6px; }
.disco__item::before {
  content: "";
  position: absolute;
  inset: 0 -14px;
  z-index: -1;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.disco__year { font: 500 0.8125rem/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--muted); }
.disco__name { font-family: var(--display); font-size: clamp(1.2rem, 1.05rem + 0.55vw, 1.6rem); line-height: 1.2; letter-spacing: -0.018em; text-wrap: balance; }
.disco__type { font: 500 0.6875rem/1 var(--eyebrow); letter-spacing: 0.085em; text-transform: uppercase; color: var(--muted); }
.disco__item .arrow { width: 20px; height: 20px; justify-self: end; align-self: center; }
@media (hover: hover) and (pointer: fine) {
  .disco__item:hover::before { opacity: 1; }
  .disco__item:hover .arrow { transform: rotate(-45deg) translateX(3px); }
}
@media (max-width: 860px) {
  .wdie, .disco { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .disco__item { grid-template-columns: 3.2em minmax(0, 1fr) 20px; }
  .disco__type { grid-column: 2; grid-row: 2; }
  .disco__item .arrow { grid-column: 3; grid-row: 1; }
  .credits div { grid-template-columns: 1fr; }
}

/* Contact ----------------------------------------------------------------- */
.contact { padding-bottom: var(--section); }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-2xl);
  align-items: start;
}
.mail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}
.mail a {
  font-family: var(--display);
  padding-bottom: 6px;
  font-size: clamp(2rem, 1rem + 3.8vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.031em;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.16em;
  overflow-wrap: anywhere;
  transition: text-decoration-color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .mail a:hover { text-decoration-color: var(--orange); }
}
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: none;
  font: 600 0.8125rem/1 var(--sans);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, transform 0.16s var(--ease-out);
}
.copy-btn:active { transform: scale(0.97); }
.copy-btn[data-copied] { border-color: var(--orange); background: rgb(240 81 35 / 0.08); }
.copy-btn svg { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) {
  .copy-btn:hover { border-color: var(--ink); }
}

/* The form: sends through Web3Forms once a key is set, or drafts an email in
   the visitor's own mail app until then */
.form-wrap { margin-top: var(--space-xl); }
.form {
  display: grid;
  gap: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line-strong);
}
.form__trap { display: none !important; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.field { display: grid; gap: 6px; align-content: start; }
.field label,
.field__label { padding: 0; font: 500 0.75rem/1.2 var(--eyebrow); letter-spacing: 0.085em; text-transform: uppercase; color: var(--muted); }
.field__opt { margin-left: 8px; font-weight: 400; letter-spacing: 0.08em; }
.field input,
.field textarea {
  width: 100%;
  margin: 0;
  padding: 10px 0 12px;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 400 1.3rem/1.4 var(--body);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { min-height: 8.5em; resize: vertical; }
.field textarea::placeholder { color: var(--muted); font-style: italic; opacity: 1; }
.field :is(input, textarea):focus { outline: none; border-bottom-color: var(--orange); box-shadow: 0 1px 0 var(--orange); }
.field :is(input, textarea)[aria-invalid="true"] { border-bottom-color: var(--orange-deep); box-shadow: 0 1px 0 var(--orange-deep); }
.field :is(input, textarea):-webkit-autofill { -webkit-box-shadow: 0 0 0 100px var(--paper) inset; -webkit-text-fill-color: var(--ink); }
.field__error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font: 500 0.875rem/1.4 var(--sans);
  color: var(--orange-deep);
}
.field__error::before {
  content: "!";
  display: grid;
  place-items: center;
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--orange-deep);
  color: var(--paper);
  font: 700 0.6875rem/1 var(--sans);
}
.field__error:empty { display: none; }

/* What it is about: one choice, as pills */
.topics { min-width: 0; margin: 0; padding: 0; border: 0; }
.topics > legend { margin-bottom: 14px; }
.topics__list { display: flex; flex-wrap: wrap; gap: 8px; }
.topic { position: relative; display: inline-flex; }
.topic input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.topic span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font: 500 0.9375rem/1.2 var(--sans);
  pointer-events: none;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s, transform 0.16s var(--ease-out);
}
.topic span::before {
  content: "";
  width: 0;
  height: 8px;
  margin-right: 0;
  border-radius: 50%;
  background: var(--orange);
  transition: width 0.3s var(--ease-out), margin 0.3s var(--ease-out);
}
.topic input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.topic input:checked + span::before { width: 8px; margin-right: 10px; }
.topic input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 3px; }
.topic input:active + span { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .topic:hover input:not(:checked) + span { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); }
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-self: start;
  min-height: 44px;
  font: 400 1rem/1.4 var(--sans);
  cursor: pointer;
}
.check input {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.check input::after {
  content: "";
  width: 12px;
  height: 6px;
  border: solid var(--ink);
  border-width: 0 0 2px 2px;
  opacity: 0;
  transform: translateY(-1px) rotate(-45deg) scale(0.6);
  transition: transform 0.16s var(--ease-out), opacity 0.16s var(--ease-out);
}
.check input:checked { border-color: var(--ink); background: var(--ink); }
.check input:checked::after { opacity: 1; transform: translateY(-1px) rotate(-45deg) scale(1); border-color: var(--paper); }
@media (hover: hover) and (pointer: fine) {
  .check:hover input:not(:checked) { border-color: var(--ink); }
}
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 4px; }
.form__hint { font: 400 0.875rem/1.4 var(--sans); color: var(--muted); }
.form__spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.form.is-sending .form__send { cursor: progress; }
.form.is-sending .form__send .arrow { display: none; }
.form.is-sending .form__spinner { display: inline-block; }
.form__status {
  padding: 14px 18px;
  border-left: 2px solid var(--orange);
  background: var(--paper-2);
  font: 400 0.9375rem/1.5 var(--sans);
}
.form__status.is-error { border-left-color: var(--orange-deep); }
.form__status a { text-decoration-color: var(--orange); text-underline-offset: 3px; }
.form__status:focus { outline: none; }
.form__status:empty { display: none; }

/* Sent: a check that draws itself, and the visitor's name */
.sent { display: grid; justify-items: start; gap: 18px; padding-top: 32px; border-top: 1px solid var(--line-strong); }
.sent:focus { outline: none; }
.sent__check { width: 56px; height: 56px; fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sent__check path { stroke: var(--ink); stroke-width: 2.5; }
.sent__title { font-family: var(--display); max-width: 16ch; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.3rem); line-height: 1.02; letter-spacing: -0.031em; text-wrap: balance; }
.sent__text { max-width: 30em; color: var(--ink-2); text-wrap: pretty; }
.sent__again { margin-top: 6px; }

/* Elsewhere */
.contact-aside { display: grid; gap: 16px; padding-top: 4px; }
.contact-aside > .label { color: var(--muted); }
.elsewhere { border-top: 1px solid var(--line-strong); }
.elsewhere a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.elsewhere__t { display: grid; gap: 3px; }
.elsewhere b { font-weight: 450; font-size: 1.3rem; line-height: 1.2; transition: color 0.2s; }
.elsewhere small { font: 400 0.875rem/1.3 var(--sans); color: var(--muted); }
.elsewhere .arrow { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .elsewhere a:hover b { color: var(--orange-deep); }
  .elsewhere a:hover .arrow { transform: translateX(3px); }
  .elsewhere a:hover .arrow--ne { transform: rotate(-45deg) translateX(3px); }
}
.contact-facts { margin-top: 28px; }
.contact-facts div {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.contact-facts dt { font: 500 0.75rem/1.6 var(--eyebrow); letter-spacing: 0.085em; text-transform: uppercase; color: var(--muted); }
.contact-facts dd { margin: 0; font: 400 0.9375rem/1.5 var(--sans); }
.page-contact .page-head .h1 { font-size: clamp(2.3rem, 1.2rem + 3.7vw, 4.6rem); }
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .form__row { grid-template-columns: 1fr; }
  .topic span { padding: 0 15px; font-size: 0.875rem; }
}

/* Footer ------------------------------------------------------------------ */
.footer {
  position: relative;
  background: url("/assets/img/grain-quiet.png") 0 0 / 240px, var(--night);
  background-blend-mode: overlay, normal;
  color: var(--chalk);
  view-transition-name: footer;
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr);
  gap: 40px var(--space-l);
  padding-block: var(--space-2xl) var(--space-xl);
}
.news + .footer__top { border-top: 1px solid var(--chalk-line); }
.footer__say {
  font-family: var(--display);
  max-width: 17ch;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  line-height: 1.06;
  letter-spacing: -0.031em;
}
.footer__where { margin-top: 14px; font: 400 0.9375rem/1.4 var(--sans); color: var(--chalk-3); }
.footer__mail { margin-top: 26px; font-size: 1.0625rem; color: var(--chalk); }
.footer h2 { margin-bottom: 18px; color: var(--chalk-3); }
.footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.footer li a {
  display: inline-block;
  padding-block: 3px;
  font: 500 1rem/1.3 var(--sans);
  text-decoration: none;
  color: var(--chalk-2);
  transition: color 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  .footer li a:hover { color: var(--chalk); }
}
/* The sign-off: the logo, and a pancake */
.footer__sign {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-block: var(--space-l);
  border-top: 1px solid var(--chalk-line);
}
.lockup { display: block; margin: 0; line-height: 0; border-radius: 50%; }
.lockup .logo { width: clamp(88px, 10vw, 128px); transition: rotate 0.45s var(--ease-out), scale 0.45s var(--ease-out); }
.lockup:focus-visible { outline: 2px solid var(--orange); outline-offset: 6px; }
.lockup:active .logo { scale: 0.97; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .lockup:hover .logo { rotate: -10deg; scale: 1.04; }
}

.footer__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 22px max(26px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--chalk-line);
  font: 400 0.8125rem/1.4 var(--sans);
  color: var(--chalk-3);
}
.footer__base p { display: flex; flex-wrap: wrap; gap: 6px 18px; }
@media (max-width: 640px) { .footer__base { align-items: flex-end; } } /* Back to top sits on the last line */
.footer__base a:not(.footer__top-link), .privacy-choices {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgb(243 242 238 / 0.25);
  text-underline-offset: 3px;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.privacy-choices { all: unset; cursor: pointer; text-decoration: underline; text-decoration-color: rgb(243 242 238 / 0.25); text-underline-offset: 3px; }
/* A comfortable tap target without growing the row */
[data-privacy-links] > :is(a, .privacy-choices) { padding-block: 4px; margin-block: -4px; }
@media (hover: hover) {
  .footer__base a:not(.footer__top-link):hover, .privacy-choices:hover { color: var(--chalk); text-decoration-color: currentColor; }
}
.privacy-choices:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 2px; }
.footer__top-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-height: 32px;
  white-space: nowrap;
  color: var(--chalk-2);
  text-decoration: none;
  transition: color 0.2s;
}
.footer__top-link .arrow { width: 14px; height: 14px; }
/* Both need JavaScript, so they stay out of the way without it */
html:not(.js) :is(.copy-btn, .flip) { display: none; }
@media (hover: hover) and (pointer: fine) {
  .footer__top-link:hover { color: var(--chalk); }
  .footer__top-link:hover .arrow { transform: translateY(-3px); }
}
@media (max-width: 860px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__lead { grid-column: 1 / -1; }
}

/* The newsletter: Shai's Substack, at the top of every footer */
.news {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: end;
  gap: 32px var(--space-2xl);
  padding-block: var(--space-xl);
}
body:has(.cta-band) .news { border-top: 1px solid var(--chalk-line); }
.footer .news__title {
  font-family: var(--display);
  margin: 0;
  color: var(--chalk);
  font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.031em;
  text-wrap: balance;
}
.news__text { margin-top: 16px; max-width: 32em; color: var(--chalk-2); font-size: 1.0625rem; line-height: 1.55; text-wrap: pretty; }
@media (max-width: 860px) {
  .news { grid-template-columns: 1fr; align-items: start; }
}

/* A Substack sign-up, on the dark stage */
.signup { --signup-bg: var(--night); container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.signup__label { font: 500 0.75rem/1.2 var(--eyebrow); letter-spacing: 0.085em; text-transform: uppercase; color: var(--chalk-3); }
.signup__row { display: flex; align-items: flex-end; gap: 14px 20px; }
.signup__field { flex: 1 1 0; min-width: 0; display: grid; gap: 8px; }
.signup__field--email { flex-grow: 1.5; }
.signup__input {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 10px 0 12px;
  border: 0;
  border-bottom: 1px solid var(--chalk-3);
  border-radius: 0;
  background: transparent;
  color: var(--chalk);
  font: 400 1.3rem/1.4 var(--body);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.signup__input:focus { outline: none; border-bottom-color: var(--orange); box-shadow: 0 1px 0 var(--orange); }
.signup__input[aria-invalid="true"] { border-bottom-color: var(--orange-glow); box-shadow: 0 1px 0 var(--orange-glow); }
.signup__input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px var(--signup-bg) inset; -webkit-text-fill-color: var(--chalk); caret-color: var(--chalk); }
.signup__btn { flex: none; }
/* Cloudflare's spam check (site.js): out of the layout unless it needs the visitor */
.turnstile:not(.is-asking) { position: absolute; }
.turnstile.is-asking { max-width: 100%; }

.signup__note { margin-top: 6px; font: 400 0.8125rem/1.45 var(--sans); color: var(--chalk-3); transition: color 0.2s; }
.signup__note.is-error { color: #ffb38f; }
.signup__note.is-done { color: var(--chalk); }
.signup__note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* Preview only: which setup step a failed send ran into */
.form__why { display: block; margin-top: 4px; font-size: 0.85em; opacity: 0.8; }
.signup.is-sending .signup__btn { cursor: progress; opacity: 0.72; }
/* Side by side where there is room, stacked where there is not */
@container (max-width: 640px) {
  .signup__row { flex-wrap: wrap; }
  .signup__field { flex-basis: 180px; }
  .signup__btn { margin-left: auto; }
}
@container (max-width: 440px) {
  .signup__row { flex-direction: column; align-items: stretch; }
  .signup__field { flex-basis: auto; }
  .signup__btn { margin-left: 0; }
}

/* The newsletter nudge: a small card, once, after a visitor has read a while */
.nudge {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 45;
  width: min(384px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 18px 24px 22px;
  border-radius: 22px;
  background:
    radial-gradient(90% 70% at 0% 100%, rgb(255 255 255 / 0.04) 0%, transparent 70%),
    var(--night);
  color: var(--chalk);
  box-shadow: 0 32px 64px -24px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(243 242 238 / 0.12);
  translate: 0 calc(100% + 48px);
  opacity: 0;
  visibility: hidden;
  transition: translate 0.7s var(--ease-drawer), opacity 0.3s, visibility 0s 0.7s;
}
.nudge.is-shown { translate: 0 0; opacity: 1; visibility: visible; transition: translate 0.75s var(--ease-drawer), opacity 0.3s; }
/* Out of the footer's way while it is on screen */
.nudge.is-shown.is-aside { translate: 0 calc(100% + 48px); opacity: 0; visibility: hidden; transition: translate 0.6s var(--ease-drawer), opacity 0.25s, visibility 0s 0.6s; }
.nudge__head { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.nudge__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -6px -14px -6px 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--chalk-2);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, transform 0.16s var(--ease-out);
}
.nudge__close svg { width: 18px; height: 18px; }
.nudge__close:active { transform: scale(0.9); }
@media (hover: hover) and (pointer: fine) {
  .nudge__close:hover { background: rgb(243 242 238 / 0.08); color: var(--chalk); }
}
/* An envelope: the letter rises out as the card arrives, and goes in when sent */
.nudge__mail { float: right; width: 60px; margin: 10px 0 4px 14px; color: var(--orange); overflow: visible; }
.nudge__fill { fill: var(--night); }
.nudge__letter,
.nudge__flap { transform-box: view-box; }
.nudge__flap { transform-origin: 32px 20px; transition: transform 0.45s var(--ease-out) 0.3s; }
.nudge__letter { transform: translateY(17px); transition: transform 0.6s var(--ease-out); }
.nudge.is-shown .nudge__letter { transform: none; transition-delay: 0.5s; }
.nudge.is-sent .nudge__letter { transform: translateY(17px); transition-delay: 0s; }
.nudge.is-sent .nudge__flap { transform: scaleY(-1); }
.nudge__title {
  font-family: var(--display);
  margin-top: 12px;
  font-size: 1.9rem;
  line-height: 1.02;
  letter-spacing: -0.031em;
  text-wrap: balance;
}
.nudge__text { clear: both; margin-top: 12px; font: 400 0.9375rem/1.5 var(--sans); color: var(--chalk-2); text-wrap: pretty; }
.nudge .signup { margin-top: 18px; }
.nudge .signup__row { gap: 16px; }
.nudge .signup__btn { justify-content: space-between; }
.nudge .signup__note { text-align: center; }
.nudge.is-sent :is(.nudge__text, .signup__label, .signup__row) { display: none; }
@media (max-width: 900px) {
  body:has(.now-bar.is-shown) .nudge { bottom: calc(max(24px, env(safe-area-inset-bottom)) + 68px); }
}
@media (max-width: 560px) {
  .nudge { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: auto; padding: 16px 20px 20px; border-radius: 20px; }
  body:has(.now-bar.is-shown) .nudge { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 66px); }
  .nudge__title { font-size: 1.65rem; }
  /* On a phone the card stays small: the title and the form say enough */
  .nudge__text { display: none; }
  .nudge__mail { width: 50px; margin-top: 6px; }
}
@media (max-height: 640px) {
  .nudge__text { display: none; }
}

/* The pancake: flips when you ask it to */
.flip {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: clamp(64px, 7vw, 88px);
  height: clamp(64px, 7vw, 88px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.16s var(--ease-out);
}
.flip:active { transform: scale(0.94); }
.flip .icon { --size: 100%; }
.flip .stroke > :not(.plate) { transform-box: view-box; transform-origin: 540px 600px; }
.flip.is-flipping .stroke > :not(.plate) { animation: flip 0.82s var(--ease-out); }
@keyframes flip {
  0% { transform: none; }
  16% { transform: translateY(14px) scaleY(0.9); }
  46% { transform: translateY(-230px) scaleY(-1); }
  74% { transform: translateY(-18px) scaleY(1); }
  86% { transform: translateY(10px) scaleY(0.94); }
  100% { transform: none; }
}
/* 404 --------------------------------------------------------------------- */
/* A long time ago, in a browser far, far away. Read flat and still when
   motion is reduced; the full crawl plays otherwise. */
:root:has(.page-404) { background: #000; color-scheme: dark; }
.page-404 { background: #000; }
/* The crawl needs deep space, so this one page stays dark and has no theme switch */
.js .page-404 .theme-btn { display: none; }
@media (max-width: 860px) {
  .page-404 .menu-btn { margin-left: auto; }
}
.lost {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 32px;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--mast-h) + 24px) var(--gutter) 56px;
  background: #000;
  color: var(--orange);
  text-align: center;
}
.lost__stars {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/assets/img/stars.svg") 50% 50% / cover;
}
.lost__intro {
  max-width: 22em;
  color: #4bd5ee;
  font-size: clamp(1.2rem, 0.9rem + 1.3vw, 2rem);
  line-height: 1.35;
}
.lost__logo { display: none; }
.lost__field { display: grid; justify-items: center; width: 100%; }
.lost__crawl {
  width: min(100%, 680px);
  font: 700 clamp(1.05rem, 0.85rem + 1vw, 1.6rem)/1.5 var(--sans);
}
.lost__episode { margin-bottom: 0.7em; font-size: 0.78em; letter-spacing: 0.32em; text-transform: uppercase; }
.lost__crawl h1 {
  margin-bottom: 1em;
  font: 800 1.55em/1.08 var(--sans);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.lost__crawl p + p { margin-top: 1.1em; }
.lost__crawl p { text-wrap: pretty; }
.lost__crawl h1:focus { outline: none; }
.lost__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.lost__actions .btn--ghost { color: var(--chalk); border-color: rgb(243 242 238 / 0.4); background: rgb(0 0 0 / 0.55); }
.lost__skip { padding-inline: 16px; font-size: 0.8125rem; }
@media (hover: hover) and (pointer: fine) {
  .lost__actions .btn--ghost:hover { border-color: var(--chalk); }
}

@media (prefers-reduced-motion: no-preference) {
  .lost:not(.is-still) { display: block; padding: 0; }
  .lost:not(.is-still) .lost__intro {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    max-width: none;
    padding: var(--gutter);
    animation: lost-intro 4.8s ease-in-out 0.3s both;
  }
  .lost:not(.is-still) .lost__logo {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    animation: lost-logo 9s cubic-bezier(0.15, 0.55, 0.35, 1) 5.2s both;
  }
  .lost:not(.is-still) .lost__logo .logo { width: min(48vw, 420px); }
  .lost:not(.is-still) .lost__field {
    position: absolute;
    inset: 0;
    overflow: hidden;
    perspective: 320px;
    perspective-origin: 50% 30%;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 18%, #000 52%, #000 80%, transparent 95%);
    mask-image: linear-gradient(to bottom, transparent 18%, #000 52%, #000 80%, transparent 95%);
  }
  .lost:not(.is-still) .lost__crawl {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(86vw, 760px);
    font-size: clamp(1.2rem, 0.85rem + 1.9vw, 2.3rem);
    line-height: 1.42;
    text-align: justify;
    hyphens: auto;
    transform-origin: 50% 100%;
    animation: lost-crawl 64s linear 6.4s both;
  }
  .lost:not(.is-still) .lost__crawl :is(.lost__episode, h1) { text-align: center; }
  @media (max-width: 600px) {
    .lost:not(.is-still) .lost__field {
      -webkit-mask-image: linear-gradient(to bottom, transparent 16%, #000 44%, #000 66%, transparent 80%);
      mask-image: linear-gradient(to bottom, transparent 16%, #000 44%, #000 66%, transparent 80%);
    }
  }
  .lost:not(.is-still) .lost__actions {
    position: absolute;
    left: 50%;
    bottom: max(28px, env(safe-area-inset-bottom));
    z-index: 3;
    width: max-content;
    max-width: calc(100% - 32px);
    transform: translateX(-50%);
    animation: lost-actions 0.9s var(--ease-out) 1.6s both;
  }
  @keyframes lost-intro { 0% { opacity: 0; } 20% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes lost-logo {
    0% { opacity: 0; transform: scale(2.2); }
    0.5% { opacity: 1; }
    88% { opacity: 1; }
    100% { opacity: 0; transform: scale(0.02); }
  }
  @keyframes lost-crawl {
    from { transform: translateX(-50%) rotateX(26deg) translateY(105%); }
    to { transform: translateX(-50%) rotateX(26deg) translateY(-330%); }
  }
  @keyframes lost-actions { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
}

/* Pressed: everything that can be tapped gives a little under the finger */
:is(.press-item, .press-side a, .newsline__link, .footer li a, .nav a):active { opacity: 0.66; }
:is(.press-hero, .work-tile):active :is(.press-hero__media, .work-tile__media) { transform: scale(0.99); }
.press-hero__media,
.work-tile__media { transition: transform 0.25s var(--ease-out); }
.track:active { background: color-mix(in srgb, var(--ink) 7%, transparent); }
:is(.menu-btn, .sheet__close):active { transform: scale(0.95); }
:is(.menu-btn, .sheet__close) { transition: transform 0.16s var(--ease-out); }

/* Emphasis in a headline: Besley's own italic (never a slanted roman), in the
   ink of its line. Only the hero's name is in orange. */
:is(.display, .h1, .h2, .h3, .hero__title, .intro__say, .press-hero__title, .footer__say, .news__title, .nudge__title, .cta-band__title, .next__title, .about-hero__title, .svc-title, .sent__title, .band__name, .mail) em {
  font-style: italic;
  color: inherit;
}
.hero__title em { color: var(--orange); }
/* A title of a work inside a headline is set the same way */
:is(.display, .h1, .h2, .h3, .hero__title, .intro__say, .svc-card h3, .work-tile__body h3, .press-hero__title, .svc__head h2, .project__body h2, .band__name, .footer__say, .news__title, .nudge__title, .cta-band__title, .next__title, .about-hero__title, .svc-title, .legal__h, .timeline h3, .disco__name, .sent__title) i {
  font-style: italic;
}

/* Motion ------------------------------------------------------------------ */

/* Page-to-page: a soft cross-fade, the masthead holds still */
@view-transition { navigation: auto; }
/* The masthead is not redrawn: the new page's bar takes over in place, in the
   state the old one was in (steady.js), and only then eases into its own (its
   colour, size and bar transition as they do on scroll) */
::view-transition-group(masthead),
::view-transition-old(masthead),
::view-transition-new(masthead) { animation: none; }
::view-transition-old(masthead) { opacity: 0; }
::view-transition-old(root) { animation: 0.22s var(--ease-out) both vt-out; }
::view-transition-new(root) { animation: 0.42s var(--ease-out) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* ...and the artwork on a card travels with it: a service icon flies to its
   service, the P4T and K180 logos to their places on Work. site.js names the
   one that was clicked; arrive.js names the one in the section linked to. */
::view-transition-group(travel) {
  animation-duration: 0.7s;
  animation-timing-function: cubic-bezier(0.25, 0.8, 0.2, 1);
}

@media (prefers-reduced-motion: no-preference) {
  /* Reveal on scroll, applied only when JavaScript is running */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.8s var(--ease-out), transform 0.9s var(--ease-out);
    transition-delay: calc(var(--d, 0) * 1ms);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  /* A note keeps its own easing for the hover, and its marked line is drawn on after it lands */
  .js .note[data-reveal] {
    transition: opacity 0.8s var(--ease-out), transform 0.9s var(--ease-out), rotate 0.35s var(--ease-out), translate 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
    transition-delay: calc(var(--d, 0) * 1ms), calc(var(--d, 0) * 1ms), 0s, 0s, 0s;
  }

  /* Headlines rise line by line from behind a mask */
  .js [data-lines] .line { width: fit-content; overflow: clip; overflow-clip-margin: 0.2em; padding-bottom: 0.06em; margin-bottom: -0.06em; }
  .js [data-lines] .line > span {
    display: inline-block;
    transform: translateY(105%);
    transition: transform 0.9s var(--ease-out);
    transition-delay: calc(var(--l, 0) * 70ms + var(--d, 0) * 1ms);
  }
  .js [data-lines].is-in .line > span { transform: none; }

  /* Icons draw themselves in, once. Keyframes rather than transitions:
     Chromium can skip transitions on SVG children here. site.js marks the icon
     .is-drawn when it is done, which frees the strokes for the hover lives. */
  .js [data-draw]:not(.is-drawn) .stroke > * { stroke-dasharray: 1 1.02; stroke-dashoffset: 1; }
  .js [data-draw].is-in:not(.is-drawn) .stroke > * {
    animation: draw 0.9s var(--ease-out) both;
    animation-delay: calc(var(--d, 0) * 1ms + 120ms + var(--o, 0) * var(--step, 70ms));
  }
  @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

  /* Artwork that has just travelled here arrives in place, already drawn */
  .js [data-landing] .project__media[data-reveal] { opacity: 1; transform: none; transition: none; }
  .js [data-landing] .svc__icon [data-draw] .stroke > * { stroke-dashoffset: 0; animation: none; }

  /* The hand-drawn marks go on like a pen: slower, easing in and out */
  .js .scribble[data-draw].is-in:not(.is-drawn) .stroke > * {
    animation-duration: 1.1s;
    animation-timing-function: cubic-bezier(0.55, 0, 0.3, 1);
  }

  /* Hero: the studio lights come up. Shai steps forward out of the dark backdrop (a
     fade and a short push, no filters, so no halo at the feathered edges) while the
     headline rises, and his name card slides in last. All settled in about 1.3s. */
  .js .hero__portrait img { animation: lights-up 1.2s var(--ease-out) both; }
  @keyframes lights-up { from { opacity: 0; transform: scale(1.04); } }
  .js .hero__caption { animation: card-in 0.6s var(--ease-out) 0.7s both; }
  @keyframes card-in { from { opacity: 0; transform: translateX(12px); } }

  /* The grid draws across, as on the Framer site: the rows grow in from the left,
     then the columns grow down from the top (transforms only) */
  .js .gridlines::before { transform-origin: 0 50%; animation: grid-rows 1.4s var(--ease-in-out) both; }
  .js .gridlines::after { transform-origin: 50% 0; animation: grid-cols 1.4s var(--ease-in-out) 0.12s both; }
  @keyframes grid-rows { from { transform: scaleX(0); } }
  @keyframes grid-cols { from { transform: scaleY(0); } }
  @supports (animation-timeline: scroll()) {
    .gridlines {
      animation: grid-drift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
    @keyframes grid-drift { to { translate: 0 22vh; } }
  }

  /* ...and drifts a little slower than the page as it scrolls away */
  @supports (animation-timeline: scroll()) {
    .hero__portrait { overflow: clip; overflow-clip-margin: 0; }
    .hero__portrait picture {
      animation: drift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
    @keyframes drift { to { translate: 0 12%; } }
  }

  /* Section hairlines draw across as their headings arrive */
  .js .sect-head__bar[data-reveal] { position: relative; border-top-color: transparent; }
  .js .sect-head__bar[data-reveal]::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--line-strong);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.3s var(--ease-out) calc(var(--d, 0) * 1ms);
  }
  .js .dark .sect-head__bar[data-reveal]::before { background: var(--chalk-line); }
  .js .sect-head__bar[data-reveal].is-in::before { transform: none; }

  /* Pictures open like a curtain going up */
  .js [data-reveal] :is(.press-hero__media, .watch-card__media, .work-tile__media) {
    clip-path: inset(14% 0 0 0 round 4px);
    transition: clip-path 1.2s var(--ease-out) calc(var(--d, 0) * 1ms + 80ms), transform 0.25s var(--ease-out);
  }
  .js [data-reveal] :is(.press-hero__media, .watch-card__media, .work-tile__media) img { scale: 1.08; transition: scale 1.6s var(--ease-out) calc(var(--d, 0) * 1ms + 80ms), transform 0.9s var(--ease-out), filter 0.5s var(--ease-out); }
  .js [data-reveal].is-in :is(.press-hero__media, .watch-card__media, .work-tile__media) { clip-path: inset(0 0 0 0 round 4px); }
  .js [data-reveal].is-in :is(.press-hero__media, .watch-card__media, .work-tile__media) img { scale: 1; }

  /* Small lives for the icons, on hover or keyboard focus, and now and then on their
     own: site.js gives one icon on screen .is-pulse every few seconds */
  .icon .stroke > * { transform-box: view-box; }
  @keyframes chase {
    0% { stroke-dasharray: 1 1.02; stroke-dashoffset: 0; }
    40% { stroke-dasharray: 1 1.02; stroke-dashoffset: -1; }
    41% { stroke-dasharray: 1 1.02; stroke-dashoffset: 1; }
    100% { stroke-dasharray: 1 1.02; stroke-dashoffset: 0; }
  }
  @keyframes push { 38% { transform: rotate(6deg); } }
  @keyframes dash { 38% { transform: translateX(-46px); opacity: 0.55; } }
  @keyframes ring { 40% { opacity: 0.2; transform: scale(1.07); } }
  @keyframes hop {
    30% { transform: translateY(-70px) scale(1.04, 0.96); }
    62% { transform: translateY(0) scale(1.08, 0.9); }
    80% { transform: translateY(-8px) scale(0.98, 1.02); }
  }
  .icon--training .shoe { transform-origin: 999px 768px; }
  .icon--events .wave { transform-origin: 540px 340px; }
  .icon--content .butter { transform-origin: 530px 240px; }
  .icon.is-pulse.icon--strategy .arrow { animation: chase 0.95s var(--ease-out) both; }
  .icon.is-pulse.icon--strategy .arrow + .arrow { animation-delay: 0.14s; }
  .icon.is-pulse.icon--training .shoe { animation: push 0.9s var(--ease-out); }
  .icon.is-pulse.icon--training .speed { animation: dash 0.9s var(--ease-out); }
  .icon.is-pulse.icon--events .wave { animation: ring 0.9s var(--ease-out); }
  .icon.is-pulse.icon--events .wave--2 { animation-delay: 0.09s; }
  .icon.is-pulse.icon--content .butter { animation: hop 0.7s var(--ease-out); }
  @media (hover: hover) and (pointer: fine) {
    /* The play runs again */
    :is(a:is(:hover, :focus-visible), .svc:hover) .icon--strategy .arrow { animation: chase 0.95s var(--ease-out) both; }
    :is(a:is(:hover, :focus-visible), .svc:hover) .icon--strategy .arrow + .arrow { animation-delay: 0.14s; }

    /* The shoe pushes off */
    .icon--training .shoe { transition: transform 0.5s var(--ease-out); }
    .icon--training .speed { transition: transform 0.5s var(--ease-out), opacity 0.5s var(--ease-out); }
    :is(a:is(:hover, :focus-visible), .svc:hover) .icon--training .shoe { transform: rotate(6deg); }
    :is(a:is(:hover, :focus-visible), .svc:hover) .icon--training .speed { transform: translateX(-46px); opacity: 0.55; }

    /* The room hears it */
    :is(a:is(:hover, :focus-visible), .svc:hover) .icon--events .wave { animation: ring 0.9s var(--ease-out); }
    :is(a:is(:hover, :focus-visible), .svc:hover) .icon--events .wave--2 { animation-delay: 0.09s; }

    /* The butter hops */
    .icon--content .play { transition: transform 0.5s var(--ease-out); }
    :is(a:is(:hover, :focus-visible), button:is(:hover, :focus-visible), .svc:hover) .icon--content .butter { animation: hop 0.7s var(--ease-out); }
    :is(a:is(:hover, :focus-visible), button:is(:hover, :focus-visible), .svc:hover) .icon--content .play { transform: translateX(14px); }
  }


  /* The teaser record slides out of its sleeve as it scrolls into view */
  @supports (animation-timeline: view()) {
    .deck--teaser .deck__disc {
      animation: disc-out linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 55%;
    }
    @keyframes disc-out { from { translate: -42% 0; } to { translate: 0 0; } }
  }

  /* The teaser record turns at 33⅓ while someone hovers over it */
  .deck--teaser :is(.deck__spin, .deck__label) { animation: spin 1.8s linear infinite paused; }
  .music-band.is-playing .deck--teaser :is(.deck__spin, .deck__label) { animation-play-state: running; }
  @media (hover: hover) and (pointer: fine) {
    .deck--teaser:hover :is(.deck__spin, .deck__label) { animation-play-state: running; }
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  /* with vinyl.js on the page, it turns the record instead */
  .music-band .deck--teaser.is-vinyl :is(.deck__spin, .deck__label) { animation: none; }

  /* Message sent: the ring draws round, then the tick */
  .sent:not([hidden]) .sent__check :is(circle, path) { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sent-draw 0.7s var(--ease-out) 0.1s forwards; }
  .sent:not([hidden]) .sent__check path { animation-duration: 0.45s; animation-delay: 0.6s; }
  .sent:not([hidden]) > :not(.sent__check) { animation: sent-in 0.7s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms + 0.3s); }
  .sent__title { --i: 1; }
  .sent__text { --i: 2; }
  .sent__again { --i: 3; }
  @keyframes sent-draw { to { stroke-dashoffset: 0; } }
  @keyframes sent-in { from { opacity: 0; transform: translateY(12px); } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

@media print {
  .masthead nav, .menu-btn, .footer, .cta-band, .next, .player, .now-bar, .fab, .nudge { display: none !important; }
  .masthead { position: static !important; }
  body { padding-top: 0 !important; background: #fff; color: #000; }
  [data-reveal], [data-lines] .line > span, .hero__portrait img { opacity: 1 !important; transform: none !important; }
  .js [data-draw] .stroke > * { stroke-dashoffset: 0 !important; }
  .js [data-reveal] :is(.press-hero__media, .watch-card__media, .work-tile__media) { clip-path: none !important; }
  .js .sect-head__bar[data-reveal]::before { transform: none !important; }
}

/* The cookie bar (consent.js): only where the law asks, never over the first view, never modal.
   Allow and No thanks carry the same weight. */
.consent {
  position: fixed;
  left: max(24px, env(safe-area-inset-left));
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 46;
  box-sizing: border-box;
  width: min(372px, calc(100vw - 32px));
  padding: 18px 20px 16px;
  border-radius: 18px;
  background: rgb(18 18 17 / 0.94);
  border: 1px solid rgb(243 242 238 / 0.12);
  box-shadow: 0 24px 60px -28px rgb(0 0 0 / 0.6);
  color: var(--chalk);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), bottom 0.6s var(--ease-drawer);
}
@supports (backdrop-filter: blur(1px)) {
  .consent { background: rgb(18 18 17 / 0.86); backdrop-filter: blur(14px) saturate(1.15); }
}
.consent.is-in { opacity: 1; transform: none; }
.consent[hidden] { display: none; }
.consent__ask { margin: 0 0 14px; font: 400 1rem/1.45 var(--body); text-wrap: pretty; }
.consent__actions { display: flex; align-items: center; gap: 8px; }
.consent__btn {
  all: unset;
  box-sizing: border-box;
  min-width: 100px;
  min-height: 44px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(243 242 238 / 0.34);
  border-radius: 999px;
  font: 500 0.875rem/1 var(--sans);
  color: var(--chalk);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
@media (hover: hover) {
  .consent__btn:hover { border-color: rgb(243 242 238 / 0.7); background: rgb(243 242 238 / 0.06); }
  .consent__more:hover { color: var(--chalk); }
}
.consent__btn:active { background: rgb(243 242 238 / 0.1); }
.consent__btn:focus-visible, .consent__more:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.consent__more {
  position: relative;
  margin-left: auto;
  padding: 6px 2px;
  font: 400 0.8125rem/1.4 var(--sans);
  color: var(--chalk-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.consent__more::before { content: ""; position: absolute; inset: -6px -8px; }
/* While the bar is up the page gains room at its foot, so it never hides the footer's last line */
.consent-open .footer__base { padding-bottom: calc(max(26px, env(safe-area-inset-bottom)) + var(--consent-space, 0px)); }
@media (max-width: 560px) {
  .consent { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: auto; padding: 16px 16px 14px; }
  .consent__btn { flex: 1 1 0; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .consent { transition: opacity 0.2s; transform: none; }
}