@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/instrument-serif.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --white: #fff;
  --red: #f4060a;
  /* Darker red for small text: 4.5:1 or more on white and on the footer */
  --red-text: #d90509;
  --footer-bg: #dffe40;
  /* One unit = one pixel of the 3471px-wide reference frame (a 100svh hero = 1754 units at the reference aspect) */
  --f: min(calc(100vw / 3471), calc(100svh / 1754));
}

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

html,
body {
  margin: 0;
  /* Only real font files: never a faked italic or bold */
  font-synthesis: none;
  background: var(--white);
}

/* Home page only: one scroll gesture glides between the screens (snap points) */
html.home {
  scroll-snap-type: y mandatory;
}

img {
  display: block;
}

/* Hero */

.hero {
  position: relative;
  /*
    First screen plus the overhang of the bottom models, so the next section starts
    exactly at the lowest foot. The CSS fallback is m9's foot (100svh + 161f);
    /js/main.js measures the real value and sets --overhang.
    All vertical positions inside use svh, so this extra height moves nothing.
  */
  --hang: var(--overhang, calc(161 * var(--f)));
  height: calc(100svh + var(--hang));
  background: var(--white);
  /* Clips sideways, and keeps the blur of the bottom feet out of the second section */
  overflow: clip;
  scroll-snap-align: start;
  /* Snap area = the first screen only. A snap area taller than the screen would let
     the page rest anywhere inside the overhang instead of gliding to the next section. */
  scroll-margin-bottom: calc(-1 * var(--hang));
}

/* Logo: fixed at the top centre on every screen, outside the blurred hero content */
.site-logo {
  position: fixed;
  left: 50%;
  top: calc(41 * var(--f));
  z-index: 10;
  width: max(64px, calc(156 * var(--f)));
  aspect-ratio: 465 / 141;
  min-height: 0;
  overflow: clip;
  transform: translateX(-50%);
  pointer-events: none;
}

/* The wordmark PNG (465 x 141) fills its box */
.site-logo img,
.site-footer__logo img {
  width: 100%;
  height: auto;
}

/* Positions the headline */
.hero__headline {
  position: absolute;
  /* Centred on the page, and vertically halfway through the open space:
     from the lowest upper model near the centre (m3/m4) to the highest lower one (m9) */
  left: 50%;
  top: calc((max(19.26svh + 252 * var(--f), 18.07svh + 255.5 * var(--f)) + 100svh - 377 * var(--f)) / 2);
  z-index: 3;
  width: max-content;
  max-width: calc(100% - 32px);
  transform: translate(-50%, -50%);
}

.hero__title {
  margin: 0;
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-size: max(30px, calc(128.6 * var(--f)));
  line-height: 0.91;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--red);
}

/* "better" in the real italic face. Its glyphs run 0.062em wider in total than the upright
   word; slightly tighter tracking keeps the line exactly as wide as before. */
.hero__title em {
  letter-spacing: -0.0304em;
}

/*
  Each model is placed by its figure, not its padded image box.
  Slot:  --x figure centre, --y figure top, --h figure height (frame px).
  File:  --fh figure height / image height, --ft top padding / image height,
         --fc figure centre / image width, --ar image width / height.
*/
.model {
  --img-h: calc(var(--h) * var(--f) / var(--fh));
  position: absolute;
  z-index: 2;
  left: calc(var(--x) - var(--img-h) * var(--ar) * var(--fc));
  top: calc(var(--y) - var(--img-h) * var(--ft));
  width: calc(var(--img-h) * var(--ar));
  height: var(--img-h);
  max-width: none;
}

/*
  Sizes are +15% around the previous centres. Previous hero percentages are scaled by 0.92
  (old 92svh hero -> 100svh) so every model keeps the same position on screen.
*/
.m1  { --fh: .8605; --ft: .0732; --fc: .4715; --ar: .75;   --x: 75.37%; --y: calc(-248.5 * var(--f)); --h: 573; }
.m2  { --fh: .8757; --ft: .0703; --fc: .5024; --ar: .6656; --x: 11.41%; --y: calc(-176.5 * var(--f)); --h: 483; }
.m3  { --fh: .8798; --ft: .0677; --fc: .5184; --ar: .75;   --x: 29.90%; --y: calc(18.07svh - 255 * var(--f)); --h: 511; }
.m4  { --fh: .8791; --ft: .0663; --fc: .4857; --ar: .7512; --x: 59.20%; --y: calc(19.26svh - 252 * var(--f)); --h: 504; }
.m5  { --fh: .9005; --ft: .0442; --fc: .4966; --ar: .6656; --x: 90.67%; --y: calc(27.47svh - 245 * var(--f)); --h: 490; }
.m6  { --fh: .8640; --ft: .0677; --fc: .4897; --ar: .6656; --x: 9.08%;  --y: calc(44.06svh - 242 * var(--f)); --h: 483; }
.m7  { --fh: .8718; --ft: .0664; --fc: .5083; --ar: .6656; --x: 84.96%; --y: calc(92svh - 604 * var(--f)); --h: 504; }
.m8  { --fh: .8666; --ft: .0638; --fc: .4985; --ar: .6656; --x: 17.20%; --y: calc(92svh - 550 * var(--f)); --h: 497; }
/* m9 and m10 hang off the bottom of the first screen: 30% of each figure sits below the fold */
.m9  { --fh: .8862; --ft: .0651; --fc: .4917; --ar: .6656; --x: 64.39%; --y: calc(100svh - 377 * var(--f)); --h: 538; }
.m10 { --fh: .7883; --ft: .0801; --fc: .5080; --ar: .5628; --x: 42.18%; --y: calc(100svh - 348 * var(--f)); --h: 497; }

/* Second screen: centred text with the video behind it */

.manifesto {
  scroll-snap-align: start;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 64px 16px;
}

/* Text and video share this box; its height is the text block's height */
.manifesto__stage {
  position: relative;
  display: grid;
  place-items: center;
  max-width: 100%;
}

/* 1.352 x the text block's height (section2.png has 0.978, enlarged on request), width from the 9:16 video */
.manifesto__media {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 135.2%;
  width: auto;
  max-width: 100%;
  aspect-ratio: 9 / 16;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.manifesto__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* "AI-generated" label: first screen only, top right, in line with the footer's right padding.
   Outside the blurred hero content, so the scroll blur and the lens never touch it. */
.ai-label {
  position: absolute;
  top: calc(41 * var(--f));
  right: calc(103 * 100vw / 3471);
  z-index: 4;
  margin: 0;
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: #000;
  /* Thin white halo, so the label stays readable on top of a model */
  text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff;
  pointer-events: none;
}

.manifesto__text {
  position: relative;
  z-index: 1;
  max-width: min(19.9em, 100%);
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-size: clamp(24px, 3.385vw, 64px);
  line-height: 0.94;
  text-align: center;
  color: var(--red);
}

.manifesto__text h2,
.manifesto__text p {
  margin: 0;
  font: inherit;
}

/* Footer: the last element of the page, measured from footer.png */

.site-footer {
  /* One unit = one pixel of the 3471px-wide footer.png frame */
  --u: calc(100vw / 3471);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: calc(253 * var(--u));
  padding: 0 calc(103 * var(--u)) 0 calc(155 * var(--u));
  background: var(--footer-bg);
  /* Third snap point: the very bottom of the page, footer fully visible */
  scroll-snap-align: end;
}

.site-footer__logo {
  flex: none;
  width: calc(265 * var(--u));
  aspect-ratio: 465 / 141;
  min-height: 0;
  overflow: clip;
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: calc(33 * var(--u));
}

.site-footer__nav a {
  position: relative;
  font-family: "Instrument Serif", serif;
  font-size: calc(97 * var(--u));
  line-height: 1;
  color: var(--red-text);
  text-decoration: none;
}

/* Hover: an underline draws in from left to right */
@media (hover: hover) {
  .site-footer__nav a {
    background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0 max(1px, 0.05em);
    transition: background-size 0.3s ease-out;
  }

  .site-footer__nav a:hover {
    background-size: 100% max(1px, 0.05em);
  }
}

@media (hover: hover) and (prefers-reduced-motion: reduce) {
  .site-footer__nav a {
    transition: none;
  }
}

.site-footer__nav a:focus-visible {
  outline: 0.125rem solid currentColor;
  outline-offset: 0.25rem;
}

/* Touch screens: a 44px tap target around each link, without changing the layout */
@media (any-pointer: coarse) {
  .site-footer__nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: max(100%, 2.75rem);
    transform: translateY(-50%);
  }
}

/* Lens hover effect: letter boxes made by /js/main.js on fine pointers only */
.lens-word {
  white-space: nowrap;
}

.lens-letter {
  display: inline-block;
  transform-origin: center;
}

/* Text for screen readers only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: clip;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Small screens: five models, larger scale, headline stays readable */
@media (max-width: 719px) {
  :root {
    --f: min(calc(100vw / 1037), calc(100svh / 2083));
  }

  /* Open space on small screens: from the bottom of m1 to the top of m7 */
  .hero__headline {
    top: calc((405.5 * var(--f) + 92svh - 604 * var(--f)) / 2);
  }

  .hero__title {
    font-size: min(12vw, 72px);
  }

  .m3,
  .m4,
  .m5,
  .m6,
  .m9 {
    display: none;
  }

  .m1  { --x: 84%; --y: calc(-167.5 * var(--f)); }
  .m2  { --x: 16%; --y: calc(-121.5 * var(--f)); }
  .m7  { --x: 86%; }
  .m8  { --x: 14%; }
  .m10 { --x: 50%; }

  /* Only m10 hangs below the fold here: its foot is at 100svh + 149f */
  .hero {
    --hang: var(--overhang, calc(149 * var(--f)));
  }

  .manifesto__text {
    font-size: clamp(22px, 6.4vw, 34px);
  }

  .ai-label {
    right: max(16px, 4.92vw);
    font-size: 10px;
  }

  /*
    Footer: one row as on desktop, logo left and links right, sized in em of the link size.
    Logo 2.73em + gap 1em + links 16.74em = 20.47em, which fits the content box up to 4.40vw.
  */
  .site-footer {
    font-size: clamp(10px, 4.2vw, 2rem);
    flex-wrap: nowrap;
    column-gap: 1em;
    min-height: max(4rem, calc(1em * 253 / 97));
    padding: 0 max(16px, 4.92vw);
  }

  /* Logo scales with the links, as in footer.png: 265px wide for a 97px link size */
  .site-footer__logo {
    width: calc(1em * 265 / 97);
  }

  .site-footer__nav {
    flex-wrap: nowrap;
    column-gap: 0.34em;
  }

  .site-footer__nav a {
    font-size: 1em;
    white-space: nowrap;
  }
}

/* Legal pages: a plain reading column with the same fixed logo and footer */

/* On the legal pages the logo sits at the top and scrolls away with the page */
a.site-logo {
  position: absolute;
  pointer-events: auto;
}

a.site-logo:focus-visible,
.legal a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Legal pages and 404: the footer sits at the bottom of the screen when the content is short,
   and follows the content when it is longer. It stays a normal footer, never fixed. */
.legal-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.legal-page .site-footer {
  flex-shrink: 0;
}

.legal {
  box-sizing: content-box;
  max-width: 680px;
  margin: 0 auto;
  padding: calc(41 * var(--f) + 96px) 24px 120px;
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.6;
  color: #000;
}

/* In the flex column the centred content keeps the width it had as a block */
.legal-page .legal {
  flex: 1 0 auto;
  width: calc(100% - 48px);
}

.legal h1 {
  margin: 0;
  font-weight: 400;
  font-size: clamp(2.75rem, 7vw, 4.5rem);
  line-height: 1;
}

.legal h2 {
  margin: 2em 0 0.5em;
  font-weight: 400;
  font-size: 1.6em;
  line-height: 1.15;
}

.legal__subtitle,
.legal__updated {
  margin: 0.6em 0 0;
  color: #444;
}

/* 404 page: the text right below the title */
.legal .legal__lead {
  margin-top: 0.6em;
}

.legal__subtitle + .legal__updated {
  margin-top: 0.2em;
}

.legal p,
.legal ul {
  margin: 0 0 0.9em;
}

.legal ul {
  padding-left: 1.2em;
}

.legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

@media (max-width: 719px) {
  .legal {
    padding: calc(41 * var(--f) + 72px) 16px 96px;
    font-size: 18px;
  }

  .legal-page .legal {
    width: calc(100% - 32px);
  }
}