/* ==========================================================================
   Apollo Parks — main stylesheet
   Brand palette: #2e2f43 navy · #7b5c9f purple · #cad5eb blue · #f1ecf4 lilac
   ========================================================================== */

/* Country Club (editorial tall serif) — headings */
@font-face { font-family: "Country Club"; src: url(../fonts/CountryClub.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Country Club"; src: url(../fonts/CountryClub-Italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Country Club Script"; src: url(../fonts/CountryClub-Script.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* General Sans (Fontshare) for body and UI; JetBrains Mono (Google Fonts) for labels — both loaded in the page head.
   PP Pangaia (Pangram Pangram, local files) for the headings that used to be serif. */
@font-face { font-family: "PP Pangaia"; src: url(../fonts/PPPangaia-Ultralight.woff2) format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Pangaia"; src: url(../fonts/PPPangaia-UltralightItalic.woff2) format("woff2"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "PP Pangaia"; src: url(../fonts/PPPangaia-Medium.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Pangaia"; src: url(../fonts/PPPangaia-MediumItalic.woff2) format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "PP Pangaia"; src: url(../fonts/PPPangaia-Bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Pangaia"; src: url(../fonts/PPPangaia-BoldItalic.woff2) format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  --navy: #2e2f43;
  --radius-card: clamp(20px, 2.1vw, 30px);   /* the big cards and pictures: 30px on a wide screen, easing to 20px on a phone */
  --purple: #7b5c9f;
  --purple-rgb: 123, 92, 159;
  --soft: #b6a4c9;
  --blue: #cad5eb;
  --lilac: #f1ecf4;
  --lilac-rgb: 241, 236, 244;
  --night: #161616;
  --night-rgb: 22, 22, 22;
  --abyss: #11121b;

  --background: #f1ecf4;
  --background-rgb: 241, 236, 244;
  --foreground: var(--navy);
  --muted: rgba(46, 47, 67, .64);
  --line: rgba(46, 47, 67, .14);
  --btn-color: #581c87;
  --glass: 255, 255, 255;

  --pill: 999px;
  --btn-stroke-angle: 90deg;
  --stroke: linear-gradient(var(--btn-stroke-angle), #2d257d 0%, #8e2de2 4%, #f5efff 31%, #f5efff 60%, #cbd5e1 85%, #8e2de2 100%);
  --ease: cubic-bezier(.19, 1, .22, 1);
  --gutter: 3rem;
  --inset: 9vw;

  --font-serif: "PP Pangaia", Georgia, "Times New Roman", serif;
  --font-script: "Country Club Script", "Country Club", serif;
  --font-sans: "General Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --background: var(--night);
  --background-rgb: var(--night-rgb);
  --foreground: var(--lilac);
  --muted: rgba(241, 236, 244, .68);
  --line: rgba(241, 236, 244, .16);
  --btn-color: #e5e5e5;
  --glass: 22, 22, 22;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: clamp(13px, 1.1111vw, 20px); -webkit-text-size-adjust: 100%; background: #020303; }   /* past the page's ends (a phone's bounce), the footer's black, not the light page */
html.lenis, html.lenis body { height: auto; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  transition: background-color .6s, color .6s;
}
body.is-loading, body.drawer-open { overflow: hidden; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
img, svg, canvas { display: block; }
::selection { background: var(--purple); color: var(--lilac); }
:focus, :focus-visible { outline: none; }

.container { width: 100%; padding-inline: var(--gutter); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; }
main, .site-end { position: relative; z-index: 2; }

.world { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; }
.smoke { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 8; pointer-events: none; }   /* no CSS blur: on some graphics cards a filtered full-screen canvas left stale traces; the softness is drawn in smoke.js */   /* a clearer violet on the light pages, a faint glow on the dark ones (see smoke.js) */

/* ---------- type ---------- */
.title { font-family: var(--font-serif); font-weight: 400;
  
  
  font-size: clamp(2.2rem, 4.4vw, 4.4rem);
  line-height: .92;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.mono, .cap { font-family: var(--font-mono); font-size: max(.75rem, 12px); font-weight: 400; line-height: 1.6; letter-spacing: .04em; }
.cap { color: var(--muted); }
.serif { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.9rem, 3.2vw, 3.3rem); line-height: 1.04; letter-spacing: -.01em; text-wrap: balance; }

/* split titles: words never break, letters rise in */
.w { display: inline-block; white-space: nowrap; }
[data-split] .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(60%) rotate(4deg);
  filter: blur(8px);
  transition: opacity .7s var(--ease), transform 1s var(--ease), filter .9s var(--ease);
  transition-delay: calc(var(--i) * 16ms);
}
[data-split].is-in .ch { opacity: 1; transform: none; filter: none; }

/* ---------- glass ---------- */
.button::before, .mobile-nav__surface::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--stroke);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* ---------- buttons ---------- */
.button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-width: 7.5rem;
  width: fit-content;
  border-radius: var(--pill);
  font-family: var(--font-sans);
  font-size: max(.875rem, 13px);
  font-weight: 500;
  line-height: 1;
  color: var(--btn-color);
  text-transform: none;
  letter-spacing: 0;
  background-color: rgba(var(--background-rgb), .1);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: color .4s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.button:hover { box-shadow: inset 0 1px 1px rgba(255, 255, 255, .55), inset 0 -2px 6px rgba(46, 47, 67, .22); }
.button:active { transform: scale(.97); }
.button__canvas-container { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; }
.button__gradient { width: 100%; height: 100%; filter: blur(7px); transform: scale(1.25); }
.button__content { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .12em; height: 1.05em; }
.button__content-sub { display: block; white-space: nowrap; transition: transform .6s var(--ease); }
.button:hover .button__content-sub { transform: translateY(calc(-100% - .12em)); }
.button__shadow {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: -2; height: 50%;
  border-radius: var(--pill); background: #8e2de2; filter: blur(20px);
  opacity: 0; visibility: hidden; transform: scale(.6); transition: opacity .4s, visibility .4s, transform .4s;
}
.button:hover .button__shadow { opacity: 1; visibility: visible; transform: scale(1); }

/* ---------- entry ---------- */
.loader {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-content: center; justify-items: center; gap: 1.4rem;
  background: radial-gradient(70% 55% at 50% 55%, rgba(var(--purple-rgb), .14), transparent 70%), var(--background);
  transition: opacity 1.2s var(--ease), visibility 1.2s;
}
@keyframes ray { from { opacity: .4; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.mark { position: absolute; left: 0; top: 0; width: 0; height: 0; font-style: normal; }
.mark::before, .mark::after { content: ""; position: absolute; background: var(--foreground); }
.mark::before { left: -.55rem; top: 0; width: 1.1rem; height: 1px; }
.mark::after { left: 0; top: -.55rem; width: 1px; height: 1.1rem; }
.mark > span {
  position: absolute; left: 1rem; top: .5rem; white-space: nowrap;
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .06em;
  color: var(--foreground); text-shadow: 0 0 14px rgba(var(--background-rgb), .9);
}

/* ---------- header (emotion-agency.com, 1:1 values) ---------- */
.header {
  --easing: cubic-bezier(.33, 1, .68, 1);
  position: fixed; top: 0; left: 0; width: 100%; z-index: 20; isolation: isolate;
  padding-block: 1.0625rem; color: var(--foreground);
  font-family: var(--font-mono); font-size: max(.75rem, 12px); font-weight: 500; line-height: 1.15;
  transition: transform .5s var(--easing), opacity .5s var(--easing), background-color .3s var(--easing), color .3s var(--easing);
}
.header--hidden { opacity: 0; pointer-events: none; transform: translateY(-100%); }
.header.on-media { color: #fff; }
.header.on-media .header__logo svg polygon { fill: #fff; }
.header__container { align-items: center; column-gap: 1rem; padding-inline: 3rem; }
.header__logo { grid-column: 1 / 3; grid-row: 1; width: 9rem; position: relative; z-index: 1; }
.header__logo svg { display: block; max-width: 100%; height: auto; }
.header__logo svg polygon { fill: var(--purple); }
:root[data-theme="dark"] .header__logo svg polygon { fill: var(--soft); }
.header__nav { grid-column: 1 / -1; grid-row: 1; justify-self: end; margin-right: calc(var(--audio-w, 7rem) + 2rem); }   /* beside the audio pill */
.header__nav-list { display: flex; align-items: center; gap: 2rem; }
.header__nav-link { position: relative; display: block; width: fit-content; padding: .375rem 0; font: inherit; letter-spacing: 0; transition: color .3s var(--ease); }
.header__nav-link:hover, .header__nav-link.is-current { color: #a98bf0; }
/* sound: equaliser bars and an "Audio" label (edolus.com) — the bars rest low when muted and dance when on */
/* always on screen: fixed at the header's right edge, stays when the header slides away */
.sound-toggle { position: fixed; top: 1.0625rem; right: 3rem; z-index: 21; display: flex; align-items: center; gap: .75rem; min-height: 1.75rem; color: var(--foreground); transition: color .3s;
  font-family: var(--font-mono); font-size: max(.75rem, 12px); font-weight: 500; line-height: 1.15; letter-spacing: .08em; }
/* Figma sound-wave icon: off = four short equal bars (16/84), on = 40 / 84 / 60 / 40, 8px bars with 15px gaps */
.sound-toggle.on-media { color: #fff; }
/* audio as a frosted pill, like the menu button on laboiteaslides.fr */
.sound-toggle { top: .75rem; height: 2.5rem; padding: 0 1.2rem; gap: .6rem; border-radius: 1.1rem; background: rgba(46, 47, 67, .07);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-family: var(--font-mono); font-size: max(.75rem, 12px); font-weight: 500; letter-spacing: .04em; transition: color .3s, background-color .3s; }
.sound-toggle:hover { background: rgba(46, 47, 67, .13); }
.sound-toggle.on-media { background: rgba(255, 255, 255, .14); }
.sound-toggle.on-media:hover { background: rgba(255, 255, 255, .24); }
/* playing: the same frosted pill, just a little deeper */
.sound-toggle.is-on { background: rgba(46, 47, 67, .18); }
.sound-toggle.is-on:hover { background: rgba(46, 47, 67, .24); }
.sound-toggle.on-media.is-on { background: rgba(14, 10, 30, .42); }
.sound-toggle.on-media.is-on:hover { background: rgba(14, 10, 30, .5); }
.sound-toggle__bars { display: flex; align-items: center; gap: 2.6px; height: .9rem; }
.sound-toggle__bars i { display: block; width: 1.4px; height: 100%; border-radius: 999px; background: currentColor; transform: scaleY(.19); transform-origin: center; transition: transform .45s var(--ease); }
/* on: each bar keeps its Figma height and breathes down and back; the same tempo with an even offset
   makes a smooth wave that travels across the four bars */
.sound-toggle.is-on .sound-toggle__bars i { --h: .48; transform: scaleY(var(--h)); animation: eq 1.2s cubic-bezier(.45, 0, .55, 1) .45s infinite; }
.sound-toggle.is-on .sound-toggle__bars i:nth-child(2) { --h: 1; animation-delay: .15s; }
.sound-toggle.is-on .sound-toggle__bars i:nth-child(3) { --h: .71; animation-delay: -.15s; }
.sound-toggle.is-on .sound-toggle__bars i:nth-child(4) { --h: .48; animation-delay: -.45s; }
@keyframes eq { 0%, 100% { transform: scaleY(var(--h)); } 50% { transform: scaleY(calc(var(--h) * .32)); } }
@media (prefers-reduced-motion: reduce) { .sound-toggle.is-on .sound-toggle__bars i { animation: none; } }

.mobile-nav { position: fixed; inset: 0; z-index: 19; pointer-events: none; visibility: hidden; transition: visibility 0s .5s; }   /* wholly hidden when closed, so a phone browser never takes its dark for its bars */
.nav-open .mobile-nav { visibility: visible; transition-delay: 0s; }
.mobile-nav__overlay { display: none; }
/* the open menu (forgeautomotive.co.uk): the whole screen in the site's night, the three pages in large serif capitals
   in the middle, coming into focus one after another */
.mobile-nav__panel { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 5rem var(--gutter) 4rem; color: #f4f1ec; text-align: center;
  background: linear-gradient(135deg, #080a1c 0%, #1a1238 48%, #080a1c 100%); opacity: 0; transition: opacity .5s var(--ease); }
.mobile-nav__surface { display: none; }
.mobile-nav ul { display: grid; gap: clamp(1.2rem, 4.8vw, 2rem); }   /* room between the pages */
.mobile-nav ul a { display: block; font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.7rem, 14.5vw, 5.4rem); line-height: 1.04; letter-spacing: -.01em;
  opacity: 0; filter: blur(12px); transform: translateY(.18em); transition: opacity .6s ease, filter .8s ease, transform .8s var(--ease), color .3s; }
.mobile-nav ul a:hover { color: #a98bf0; }
.nav-open { overflow: hidden; }   /* the page holds still under the open menu */
.nav-open .mobile-nav { pointer-events: auto; }
.nav-open .mobile-nav__panel { opacity: 1; }
.nav-open .mobile-nav ul a { opacity: 1; filter: none; transform: none; transition-delay: calc(.15s + var(--i, 0) * .09s); }
.nav-open .mobile-nav li:nth-child(1) a { --i: 0; } .nav-open .mobile-nav li:nth-child(2) a { --i: 1; } .nav-open .mobile-nav li:nth-child(3) a { --i: 2; }
.nav-open .header__logo svg polygon { fill: #fff; }
.nav-open .sound-toggle { color: #fff; }

/* ---------- journey stops (text on the 3D scene stays light) ---------- */
.stop { position: relative; height: 220vh; }
.hero__copy { margin-top: auto; margin-bottom: 3rem; }
.hero__copy .cap { margin-top: 1.25rem; color: var(--foreground); }

/* ---------- statement: words fill while scrolling ---------- */
.statement { padding: 6rem var(--inset) 10rem; background: var(--background); }
.statement .container { padding: 0; }
/* grail: a large uppercase line whose rows step in and out, a short paragraph tucked beneath */
.statement__title { display: flex; flex-direction: column; align-items: center; font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.6rem, 9.72vw, 140px); line-height: .95; letter-spacing: -.01em; }
/* grail's stepped lines, balanced on the middle of the page: each line leans a little to one side of centre */
.statement__title > span { white-space: nowrap; }
.statement__accent { font-style: normal; color: var(--purple); }   /* the words that matter, in the brand purple */
/* the hero's sun mark in gold light, turning behind the words; it scatters under the pointer */
.statement__title { position: relative; isolation: isolate; }
/* it floats just past the end of its line, behind the type, so the words keep the place they had without it */
.statement__line--mark { position: relative; }
.statement__logo { position: absolute; left: 100%; top: 50%; z-index: -1; width: 1.45em; height: 1.45em; transform: translate(.08em, -50%); pointer-events: none; }
.statement__logo canvas { display: block; width: 100%; height: 100%; }
.statement__title > span:nth-child(1) { transform: translateX(1.2em); }
.statement__title > span:nth-child(2) { transform: translateX(-.43em); }
.statement__title > span:nth-child(3) { transform: translateX(-.43em); }
.statement__title > span:nth-child(4) { transform: translateX(.17em); }
/* the description, large, fills line by line as it scrolls in; a purple edge leads each line (forgeautomotive) */
.sweep-line { display: block; width: fit-content; --fill-pos: -16; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(97deg, var(--foreground) 0%, var(--foreground) calc((var(--fill-pos) - 8) * 1%), var(--purple) calc(var(--fill-pos) * 1%), rgba(46, 47, 67, .18) calc((var(--fill-pos) + 8) * 1%), rgba(46, 47, 67, .18) 100%); }
.statement__text { max-width: 60rem; margin: 6rem auto 0; font-family: var(--font-sans); font-weight: 400; font-size: clamp(1.75rem, 3.33vw, 48px); line-height: 1.18; letter-spacing: -.01em; }
/* how we work: the references' kind of ground, a dark film of flowing violet light held on screen behind the words */
.ab-how.statement { position: relative; height: 200vh; height: 200svh; padding: 0; overflow: clip; background: #07040f; color: #f4f1ec; }   /* held on screen for one screen's scroll, as the references are */
.ab-how__bg { position: sticky; top: 0; z-index: 0; height: 100vh; height: 100lvh; margin-bottom: -100vh; margin-bottom: -100lvh; overflow: hidden; }
.ab-how__bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-how > .container { position: sticky; top: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: 100vh; min-height: 100svh; padding: clamp(2.5rem, 8vh, 5rem) var(--inset); }   /* one screen, the words in its middle */
.ab-how .statement__text:first-of-type { margin-top: clamp(2rem, 5vh, 4rem); }
.ab-how .statement__accent { color: inherit; }
.ab-how .statement__title { font-size: clamp(2.6rem, 6.67vw, 96px); }   /* the references' title size */   /* the title all in white */
/* the title: letter by letter, lighting up violet then white as the references' title does (set by script) */
/* the title rises from the middle of the screen with the scroll and the words come up after it (set by script) */
.ab-how .statement__text { opacity: 0; }
/* everything in the middle: the title's lines set straight, the words centred under it */
.ab-how .statement__title > span { transform: none; }
.ab-how .statement__text { text-align: center; margin-inline: auto; }
.ab-how .statement__text { max-width: min(820px, 100%); font-size: clamp(1.15rem, 1.74vw, 25px); }   /* the about page's three paragraphs: plain, smaller, a wider column than the privacy page's */
.ab-how .statement__text + .statement__text { margin-top: 2rem; }
.word { color: var(--line); transition: color .5s var(--ease); }
.word.is-on { color: var(--foreground); }
:root[data-theme="dark"] .word { color: rgba(241, 236, 244, .16); }

/* ---------- business lines: giant word + stacking cards (pilato "gamma") ---------- */

/* ---------- projects (laboiteaslides): the dark rises over the page, the two projects
   slide through it, and the page's light rises over it again ---------- */
.projects { position: relative; height: 930vh; background: var(--background); color: #f4f1ec; }
.projects + .projects { height: 600vh; background: #07040f; }   /* the references follow on in the same dark */
/* the dark is its own pinned layer under the shared picture layer (assets/js/media-gl.js); the words and the
   closing fade sit in the pinned layer above it */
.pj-bg { position: sticky; top: 0; z-index: 0; height: 100vh; height: 100lvh; margin-bottom: -100vh; margin-bottom: -100lvh; overflow: hidden; background: #07040f; }
.pj-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }   /* the references' ground: purple fluid and glitter, playing while the section is on screen */
.projects__sticky { position: sticky; top: 0; z-index: 9; height: 100vh; height: 100svh; overflow: hidden; }
.pj-track { --cw: min(62vw, 980px); --ch: calc(var(--cw) * 9 / 16); position: absolute; z-index: 2; top: 50%; left: calc(50% - var(--cw) * 1.05 / 2); display: flex; align-items: center; gap: 24px; transform: translateY(-50%); will-change: transform; }
/* the section's title leads the row, set like the hero's stage headings */
/* letter by letter, as the hero's headings are set: each letter its own box, lighting up violet then white */
.pj-title .statement__accent { font-style: normal; color: #a98bf0; }
.pj-title .ls-c, .ab-how .statement__title .ls-c { display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(.25em) scale(1.12); color: #c8a0ff; text-shadow: 0 0 26px rgba(155, 110, 235, .85);
  transition: opacity .7s ease var(--d), filter .9s ease var(--d), transform .9s var(--ease) var(--d), color 1.2s ease calc(var(--d) + .35s), text-shadow 1.2s ease calc(var(--d) + .35s); }
.pj-title.is-in .ls-c, .ab-how .statement__title.is-in .ls-c { opacity: 1; filter: none; transform: none; color: #f4f1ec; text-shadow: none; }
.pj-title.is-in .statement__accent .ls-c { color: #a98bf0; }
.pj-flow { display: inline-block; }   /* the pointer's stir, separate from the reveal */
.pj-title { flex: none; width: max-content; margin: 0; text-align: center;   /* the gap after it is set by script */ font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.4rem, 6.67vw, 96px); line-height: 1.05; letter-spacing: -.01em; color: #f4f1ec; }
.pj-card { position: relative; flex: none; display: grid; width: calc(var(--cw) * 1.05); height: min(calc(var(--ch) * 1.32), 78vh); overflow: hidden; border-radius: var(--radius-card); }   /* the picture or film fills the whole card; the words sit on it */
.pj-card > * { grid-area: 1 / 1; }
.pj-card__media { margin: 0; min-height: 0; }
.pj-card__media img, .pj-card__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pj-card__body { position: relative; z-index: 1; display: grid; align-content: end; gap: .7rem; padding: 2rem; text-shadow: 0 2px 18px rgba(8, 6, 20, .85), 0 0 3px rgba(8, 6, 20, .6); }   /* no dark panel: it would stay square while the picture ripples */
.pj-card__place { justify-self: start; margin: 0; padding: .45rem .9rem; border-radius: 999px; background: var(--purple); font-family: var(--font-mono); font-size: 14px; color: #fff; text-shadow: none; }   /* the place, as on the project sheet */
.pj-card__title { font-family: var(--font-serif); font-weight: 500; font-size: 48px; line-height: 1; letter-spacing: -.01em; }
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) { .pj-track { --cw: 86vw; } .pj-card { width: 86vw; height: min(112vw, 68svh); } .pj-card__body { padding: 1.2rem; } .pj-card__title { font-size: 34px; } }   /* a phone: upright cards, the name on one line */
/* a phone: the title and the cards one under another, centred, carried up the screen by the script */
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .projects { height: 440vh; }   /* the cards come up at about the pace of the hand */
  #projects { background: #07040f; }   /* its own ground dark too: no light page can show through at its edges */
  .pj-track { top: 0; left: 7vw; flex-direction: column; transform: none; }
  .pj-title { align-self: center; }
}
/* ---------- what we build (emotion "some of our projects"): the section holds still under its title while the
   scroll brings three upright pictures of one size up from below, one after the other (placed by script) ---------- */
.build { height: 260vh; padding-bottom: 12vh; background: var(--background); color: var(--foreground); }   /* room under the pictures before the dark comes up */
.build__pin { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: .5rem var(--gutter) 1.5rem; overflow: hidden; }   /* on a short screen the script lifts it so the whole of it holds in view */
.build__title { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.4rem, 6.67vw, 96px); line-height: 1.05; letter-spacing: -.01em; }
/* set as the about page's opening line is: on the left, the second line stepped in */
.build__line { display: block; }
.build__line--shift { padding-left: 3.4em; }
.build__list { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 4vw; align-items: start; margin: 3rem 0 0; padding: 0; list-style: none; }   /* room under the title */
.build__item { will-change: transform; }
.build__link { display: block; color: inherit; text-decoration: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }   /* each its own link, opening on the project sheet; not to be dragged away */
.build__item:nth-child(2) { margin-top: 6rem; }   /* the middle one sits a little lower, as emotion sets it */
/* sized by the screen's width alone, as emotion sizes its projects */
.build__media { aspect-ratio: 6 / 7; margin: 0 0 1rem; overflow: hidden; border-radius: var(--radius-card); }
.build__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.build__name { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: 42px; line-height: 1.15; }
/* a screen too short to hold it all: the section runs on with the page, the pictures still rising with the scroll */
.build.is-free { height: auto; padding: 8rem 0 6rem; }
.build.is-free .build__pin { position: static; min-height: 0; }
/* as emotion steps down: level in a row on a tablet, two across on a phone */
@media (max-width: 1024px) {
  .build__title { font-size: 60px; }
  .build__item:nth-child(2) { margin-top: 0; }
}
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .build { height: auto; padding: 6rem 0; }
  .build__pin { position: static; min-height: 0; padding: 0 var(--gutter); }
  .build__title { font-size: min(46px, 11vw); }   /* the shifted line stays on a 320px screen */
  .build__line--shift { padding-left: 1.6em; }   /* set in less, so the second line keeps to one line on a phone */
  .build__list { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; margin-top: 2rem; }   /* one card to a row, the names whole */
  .build__media { aspect-ratio: 4 / 5; }   /* upright pictures, the team's portraits as the lines of work */
  .build__name { font-size: 30px; }
}
/* ---------- projects page: the references' cards on their plain dark, one screen, running round without end
   (placed by script), no footer ---------- */
body:has(.projects-page) { background: #080a1c; }
.projects-page .projects { height: 100vh; height: 100svh; }
.projects-page .projects, .projects-page .pj-bg { background: #080a1c; }   /* the projects page's ground */
.pp-home { position: fixed; z-index: 40; top: 124px; right: var(--gutter); display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-mono); font-size: max(.75rem, 12px); font-weight: 500; line-height: 1.15; letter-spacing: 0; color: #a98bf0; transition: color .3s var(--ease); }   /* under the navbar, on the right, set as its links are */
.pp-home:hover { color: #f4f1ec; }
.pp-home__arrow { width: 1.15em; height: 1.15em; flex: none; shape-rendering: crispEdges; }   /* the pixel arrow, in the word's colour */
.projects-page .pj-track { left: 0; touch-action: pan-y; cursor: grab; user-select: none; }
/* the cards take their size from the screen's height as well as its width, so at every resolution they sit clear
   of BACK HOME above and of the foot of the screen */
.projects-page .pj-card { --h: min(calc(100svh - 300px), 34vw); width: calc(var(--h) * 1.42); height: var(--h); }   /* as large as the screen allows, one shape at every size */
.projects-page .pj-track { top: calc(50% + 60px); }   /* centred in the room under BACK TO HOME */
/* a phone: the cards one under another, running round up and down (placed by script); the ground darkens in a
   narrow band at the top and the foot (jesperlandberg.com), so the cards pass softly under the navbar and BACK TO HOME,
   which both stay put */
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .projects-page .pj-track.pj-track { top: 0; left: 8vw; flex-direction: column; gap: 20px; touch-action: none; }
  .projects-page .pj-card { --h: 92vw; width: 84vw; }
  .projects-page .projects__sticky::after { content: ""; position: absolute; inset: 0 0 auto; z-index: 3; height: 128px; background: linear-gradient(#080a1c, rgba(8, 10, 28, .85) 45%, rgba(8, 10, 28, 0)); pointer-events: none; }
  .projects-page .projects__sticky::before { content: ""; position: absolute; inset: auto 0 0; z-index: 3; height: 128px; background: linear-gradient(to top, #080a1c, rgba(8, 10, 28, .85) 45%, rgba(8, 10, 28, 0)); pointer-events: none; }   /* and up from the foot, the same */
  .pp-home { top: calc(84px + env(safe-area-inset-top)); }   /* under the navbar, in the dark band there */
}
.projects-page .pj-track.is-dragging { cursor: grabbing; }
.projects-page .pj-card video, .projects-page .pj-card img { -webkit-user-drag: none; pointer-events: none; }

/* ---------- team: three equal cards ---------- */
.crew__meta { color: var(--foreground); display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: .6rem; }
.crew__meta .build__name { grid-column: 1; }
.crew__role { grid-column: 1 / -1; margin-top: .2rem; font-size: 1rem; color: var(--muted); }
.crew__in { grid-column: 2; grid-row: 1; align-self: center; display: grid; place-items: center; width: 32px; height: 32px; color: var(--foreground); transition: color .3s; }
.crew__in svg { width: 24px; height: 24px; }
.crew__in:hover { color: #0a66c2; }

/* ---------- about page ---------- */
.ab-display { font-family: var(--font-serif); font-weight: 400; line-height: .98; letter-spacing: -.012em; }
.ab-display em { font-style: italic; color: var(--purple); }
.ab-hero { min-height: 100vh; min-height: 100svh; position: relative; display: flex; align-items: flex-end; padding: 8rem 0 6vh; }
.ab-hero__lead { max-width: 24rem; margin-bottom: 2.4rem; }
.ab-hero__title { font-size: clamp(2.6rem, 5.6vw, 6.2rem); }
.ab-line { display: block; }
.ab-line--indent { padding-left: 1.4em; }
.ab-line--far { padding-left: 3.6em; }   /* each line set further in, a scattered heading as on the home page */
@media (max-width: 760px) { .ab-line--indent { padding-left: .8em; } .ab-line--far { padding-left: 1.6em; } }
.ls-w { display: inline-block; white-space: nowrap; }   /* a heading set letter by letter breaks only between words */
/* the opening line comes in letter by letter as the hero's headings do: each letter rises out of a violet blur into ink */
.ab-hero__title .ls-c { display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(.25em) scale(1.12); color: #9b6eeb; text-shadow: 0 0 26px rgba(155, 110, 235, .6);
  transition: opacity .7s ease var(--d), filter .9s ease var(--d), transform .9s var(--ease) var(--d), color 1.2s ease calc(var(--d) + .35s), text-shadow 1.2s ease calc(var(--d) + .35s); }
.ab-hero__title.is-in .ls-c { opacity: 1; filter: none; transform: none; color: var(--foreground); text-shadow: none; }



/* ---------- flow sections ---------- */
.flow { position: relative; padding: 12rem var(--inset) 9rem; min-height: 100vh; background: var(--background); transition: background-color .6s; }
:root[data-theme="dark"] .flow { background: var(--background); }
.flow .container { padding: 0; }
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.person { display: grid; gap: 1.1rem; }
/* ---------- contact: a white half-screen panel from the right ---------- */
.drawer { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
body.drawer-open .smoke { z-index: 45; }
@media (hover: none) { .smoke { display: none; } }   /* a touch screen has no pointer for it to follow (app.js leaves it off) */   /* the pointer's smoke over the contact panel too (it never takes a click) */
.drawer__overlay { position: absolute; inset: 0; background: rgba(17, 18, 27, .28); opacity: 0; transition: opacity .7s var(--ease); }
.drawer__panel {
  --foreground: var(--navy); --muted: rgba(46, 47, 67, .62); --line: rgba(46, 47, 67, .16);
  position: absolute; top: 0; right: 0; bottom: 0; width: 50vw; min-width: 34rem;
  background: var(--lilac); color: var(--navy);
  transform: translateX(100%); transition: transform 1s var(--ease);
}
.drawer__body { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 7rem 4rem 1.4rem; display: flex; flex-direction: column; gap: 2.4rem; }
.drawer__statement { margin-bottom: calc(1.6rem + 4px); font-size: clamp(3rem, 6.67vw, 96px); line-height: 1.05; font-weight: 500; }   /* a little more room before the details under it */
.drawer__accent { color: var(--purple); }
.drawer__close { position: absolute; top: 1.6rem; right: 1.6rem; width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); transition: transform .5s var(--ease), background-color .3s; }
.drawer__close span { position: absolute; width: 1rem; height: 1.5px; background: currentColor; }
.drawer__close span:first-child { transform: rotate(45deg); }
.drawer__close span:last-child { transform: rotate(-45deg); }
.drawer__close:hover { transform: rotate(90deg); background: var(--lilac); }
.drawer.is-open { pointer-events: auto; }
.drawer.is-open .drawer__overlay { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer .drawer__body > * { opacity: 0; transform: translateY(1.5rem); transition: opacity .8s var(--ease), transform 1s var(--ease); }
.drawer.is-open .drawer__body > * { opacity: 1; transform: none; transition-delay: .25s; }
.drawer.is-open .drawer__body > :nth-child(2) { transition-delay: .33s; }
.drawer.is-open .drawer__body > :nth-child(3) { transition-delay: .41s; }
.drawer.is-open .drawer__body > :nth-child(4) { transition-delay: .49s; }
.drawer__legal { display: flex; align-items: center; justify-content: space-between; gap: 12px 28px; flex-wrap: wrap; margin-top: auto; padding-top: calc(60px - 2.4rem);   /* 60px under the form with the panel's gap */   /* at the foot of the panel, set as the footer's legal line (its own colours) */ font-family: var(--font-sans); font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--muted); }
.drawer__legal p { margin: 0; }
.drawer__legal nav { display: flex; gap: 28px; }
.drawer__legal a { transition: color .3s; }
.drawer__legal a:hover { color: var(--purple); }
.contact__form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1.25rem; }
.field { display: grid; gap: .5rem; }
.field--full { grid-column: 1 / -1; }
.field input, .field select, .field textarea {
  width: 100%; padding: .5rem 0 .65rem; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent; font-size: 1.05rem; outline: none; resize: vertical; transition: border-color .3s;
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 9px) 55%, calc(100% - 4px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.field select option { color: var(--navy); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--purple); }
/* the topic's list, opened: the closed field stays as it is; the list drops as a white rounded panel (shadcn's select)
   with a tick by the chosen line */
.pick { position: relative; }
.pick > select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pick__button { display: flex; align-items: center; width: 100%; padding: .55rem 1.6rem .55rem 0; border: 0; border-bottom: 1px solid var(--line); background-color: transparent; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-repeat: no-repeat; background-size: 5px 5px; background-position: calc(100% - 9px) 52%, calc(100% - 4px) 52%; font-size: 1.05rem; text-align: left; cursor: pointer; transition: border-color .3s; }
.pick.is-open .pick__button, .pick__button:focus { border-color: var(--purple); }
.pick__list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 4px; list-style: none; border: 1px solid rgba(46, 47, 67, .12); border-radius: 10px; background: #fff; color: var(--navy); box-shadow: 0 10px 30px rgba(17, 20, 55, .12), 0 2px 6px rgba(17, 20, 55, .06);
  opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: top; pointer-events: none; transition: opacity .18s ease, transform .22s var(--ease); }
.pick.is-open .pick__list { opacity: 1; transform: none; pointer-events: auto; }
.pick__option { position: relative; padding: .5rem .75rem .5rem 2rem; border-radius: 7px; font-size: .95rem; cursor: pointer; }
.pick__option:hover, .pick__option.is-active { background: rgba(123, 92, 159, .09); }
.pick__option[aria-selected="true"]::before { content: ""; position: absolute; left: .8rem; top: 50%; width: .3rem; height: .6rem; border: solid var(--purple); border-width: 0 2px 2px 0; transform: translateY(-65%) rotate(45deg); }
.field.is-invalid input, .field.is-invalid textarea { border-color: #c2557c; }
.contact__actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.contact__info { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.social-block { margin-top: -1rem; }
.social-block__title { margin: 0 0 .6rem; }   /* labelled as the e-mail and address above it */
.social { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.social a { display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--foreground); transition: color .3s; }
.social svg { width: 1.3rem; height: 1.3rem; }
.social a:hover { color: var(--purple); }
.contact__info dt { margin-bottom: .35rem; }
.contact__info dd { font-size: 1rem; line-height: 1.45; }
.contact__info a { text-decoration: none; }   /* the mail stands plain, no line under it */

/* ---------- footer: apricode.agency .site-end, 1:1 (accent = brand lilac) ---------- */
.site-end {
  --gutter: 3rem;
  --footer-curve-height: clamp(72px, 12svh, 120px);
  --footer-surface: #020303;
  --brand-paper: #f3f1ec;
  --brand-light-muted: rgba(243, 241, 236, .58);
  --brand-sage: #b6a4c9;
  --brand-ease: cubic-bezier(.22, .75, .2, 1);
  position: relative; isolation: isolate;
  margin-top: var(--footer-curve-height);
  padding: 52px var(--gutter) 22px;
  color: var(--brand-paper); background: var(--footer-surface);
  font-family: var(--font-sans);
  /* a whole screen at every size: the top row, then the logo and its credit in the middle, the legal line at the foot */
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh;
}
.site-end::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(var(--footer-curve-height) + 1px); background: var(--background); z-index: -2; pointer-events: none; }
.site-end p { margin: 0; }
.site-end em { font-style: normal; }
.footer-horizon { position: absolute; inset: auto 0 100%; height: var(--footer-curve-height); pointer-events: none; z-index: -1; }
.footer-horizon svg { width: 100%; height: calc(100% + 1px); display: block; overflow: visible; }
.footer-horizon__surface { fill: var(--footer-surface); }
.footer-field { position: absolute; left: 0; width: 100%; z-index: -1; pointer-events: none; }
.has-field { background: transparent; }
.has-field .footer-horizon { visibility: hidden; }
/* the screen shutting into the footer (edolus): two bands of black close from top and bottom over the last project,
   two lines appear in the narrowing band, and the footer, risen behind it meanwhile, is in place once it has shut */
.screen-close { position: fixed; left: 0; right: 0; z-index: 30; height: 0; background: #07040f; pointer-events: none; }
.screen-close--top { top: 0; }
.screen-close--bottom { bottom: 0; }
.screen-close__line { position: fixed; left: 0; right: 0; top: 50%; z-index: 29; margin: 0; padding: 0 var(--gutter); transform: translateY(-50%); text-align: center; font-family: var(--font-serif); font-size: 64px; font-weight: 500; line-height: 1.05; letter-spacing: -.01em; color: #fff; opacity: 0; pointer-events: none; }   /* set as the section headings are; under the bands, so it stays inside the closing screen */
.screen-close__line b { font-weight: inherit; color: #a98bf0; }
.site-end.is-closing { min-height: 100vh; min-height: 100lvh; margin-top: -100vh; margin-top: -100lvh; z-index: 1; overflow: clip; }   /* as tall as the screen with the browser's bars slid away, so nothing shows above it then */   /* its parts waiting a little lower never push the page past its end (a strip showed under it) */
/* once the screen has shut its parts fade in one after another, each rising a little: logo, heading, mail, credit,
   legal line (named one by one, as .footer-top only lays them out and cannot fade itself) */
.site-end.is-closing :is(.footer-brand, .footer-intro, .footer-contact, .footer-credit, .footer-bottom) { opacity: 0; transform: translateY(28px); transition: opacity 1.2s cubic-bezier(.2, .6, .3, 1), transform 1.4s cubic-bezier(.2, .6, .3, 1); }
.site-end.is-closing .footer-horizon { opacity: 0; transition: opacity 1.2s cubic-bezier(.2, .6, .3, 1); }
.site-end.is-closing.is-shown { z-index: 3; }
.site-end.is-closing::before, .site-end.is-closing .footer-horizon { display: none; }   /* no curved edge on the home page: the footer is a flat screen there */   /* once the screen has shut it comes in front, so it can be used */
.site-end.is-closing.is-shown :is(.footer-horizon, .footer-brand, .footer-intro, .footer-contact, .footer-credit, .footer-bottom) { opacity: 1; transform: none; }
.site-end.is-closing.is-shown .footer-intro { transition-delay: .15s; }
.site-end.is-closing.is-shown .footer-contact { transition-delay: .3s; }
.site-end.is-closing.is-shown .footer-credit { transition-delay: .45s; }
.site-end.is-closing.is-shown .footer-bottom { transition-delay: .55s; }
.projects.is-shut { visibility: hidden; }
.footer-top, .footer-bottom { position: relative; }
.footer-top { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(22px, 4svh, 48px); padding: 6svh 0 2svh; text-align: center; }
.footer-intro h2 { font-family: var(--font-serif); font-weight: 500; margin: 0; font-size: 64px;  line-height: 1.1; letter-spacing: -.01em; }
.footer-intro h2 em { color: inherit; }   /* one white throughout */
.ft-c { display: inline-block; }   /* the heading's letters, each moving under the pointer as in the hero */
.footer-intro > p:last-child { margin-top: 20px; font-size: 20px; line-height: 1.6; color: var(--brand-light-muted); }
.footer-nav > a:is(:hover, :focus-visible) { color: var(--brand-sage); }
.footer-nav > a:is(:hover, :focus-visible)::after { transform: scaleX(1); }
.footer-contact > a { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: fit-content; min-height: 56px; margin-inline: auto; padding-right: .5em;   /* the line ends where the flown paper plane points */ font-size: clamp(22px, 2.5vw, 38px); letter-spacing: -.025em; border-bottom: 1px solid rgba(182, 164, 201, .3); transition: color .3s, border-color .3s; }
.footer-contact > a > span { color: #a98bf0; font-size: inherit; }   /* the purple of the projects page's back link */
.footer-contact > a:is(:hover, :focus-visible) { color: var(--brand-sage); border-color: var(--brand-sage); }
.footer-contact > p:last-child { margin-top: 16px; font-size: 16px; line-height: 1.6; color: #fff; }
.footer-address > span, .address > span { white-space: nowrap; }   /* the footer: two lines, broken after the street; the drawer: as the width allows, but only at a comma */
.site-end .link-send { flex: none; display: inline-flex; width: .85em; height: .85em; }   /* the paper plane, large enough to read as the send button */
.site-end .link-send__fly { display: flex; }
.site-end .link-send svg { width: 100%; height: 100%; display: block; transform-origin: center; transition: transform .3s ease; }
/* on hover the paper plane tilts and takes off, bobbing as it flies */
.site-end a:is(:hover, :focus-visible) .link-send__fly { animation: send-fly .6s ease-in-out infinite alternate; }
.site-end a:is(:hover, :focus-visible) .link-send svg { transform: translateX(.38em) rotate(45deg) scale(1.1); }   /* its tip reaches the end of the line */
@keyframes send-fly { from { transform: translateY(.1em); } to { transform: translateY(-.1em); } }
@media (prefers-reduced-motion: reduce) { .site-end a:is(:hover, :focus-visible) .link-send__fly { animation: none; } }
.site-end .footer-brand { display: block; width: min(82vw, 1240px, 112svh); margin: 0 auto; padding: 0; pointer-events: none; color: #0b0e0d; }   /* over the links; narrower on a short screen so the footer stays one screen */
.site-end .footer-brand svg { width: 100%; height: auto; display: block; overflow: visible; }
.site-end .footer-brand { position: relative; }
.site-end .footer-brand svg path, .site-end .footer-brand svg polygon { fill: url(#brand-glass); stroke: url(#brand-glass-edge); stroke-width: .7; }
.footer-brand--glass > div:first-child { filter: drop-shadow(0 1px 0 rgba(245, 239, 255, .25)); }   /* no wide glow: some screens drew it as a banded, blotchy halo */
.footer-brand__shine { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }
.site-end .footer-brand__shine svg path, .site-end .footer-brand__shine svg polygon { fill: url(#brand-glass-shine); stroke: url(#brand-glass-shine); stroke-width: .7; }
.footer-credit { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .3rem; margin: 24px 0 0;   /* just over the legal line */ font-size: 16px; color: #fff; }
.footer-credit__line, .footer-credit a { display: inline-flex; align-items: center; gap: .3rem; }
.footer-credit { font-family: var(--font-mono); letter-spacing: .04em; }   /* set like the navbar: mono, the capitals written in the text */
.footer-credit__heart { width: 22px; height: 22px; overflow: visible; color: #fff; }
/* Figma "Animated Heart Icon": state → hover → press down → expand → final */
.heart__shape { fill: transparent; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; transform-box: fill-box; transform-origin: 50% 55%; }
.footer-credit:has(a:hover) .heart__shape { animation: heart-like .9s cubic-bezier(.3, .7, .3, 1) forwards; }
@keyframes heart-like {
  0%   { transform: scale(1);    fill: transparent; stroke: #fff;  opacity: 1; }
  18%  { transform: scale(1);    fill: transparent; stroke: #b3b3b3; }                       /* hover */
  36%  { transform: scale(.83);  fill: transparent; stroke: #d9d9d9; opacity: .7; }          /* press down */
  62%  { transform: scale(1.57); fill: #8e2de2; stroke: #8e2de2; opacity: 1; filter: none; } /* expand */
  100% { transform: scale(1);    fill: #8e2de2; stroke: #8e2de2; filter: drop-shadow(0 3px 6px rgba(142, 45, 226, .6)); } /* final */
}
@media (prefers-reduced-motion: reduce) { .footer-credit:has(a:hover) .heart__shape { animation: none; fill: #8e2de2; stroke: #8e2de2; } }
.footer-credit__logo { height: 20px; width: auto; display: block; filter: brightness(0) invert(1); }
.footer-credit a:hover .footer-credit__logo { filter: none; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; margin-top: 72px; padding-top: 0; padding-bottom: max(28px, env(safe-area-inset-bottom)); font-size: 14px; line-height: 1.5; color: var(--brand-light-muted); }
.footer-legal { display: flex; gap: 28px; }
.footer-bottom, .footer-bottom a { font-size: 14px; }
.footer-bottom .copyright { color: #fff; }
.footer-legal a { color: var(--brand-paper); transition: color .3s; }
.footer-legal a:hover { color: var(--brand-sage); }
@media (max-width: 1100px) {
  .footer-contact > a { font-size: 30px; }
}
/* on a computer the footer is one design scaled to the screen: everything is sized as it is at 1440 × 900 and
   grows or shrinks with the window (by whichever of its width or height is tighter), so it looks the same at
   every resolution; the smallest words keep a readable floor */
@media (min-width: 761px) {
  /* the same proportions at every resolution: the logo starts at the same share of the screen's height, the legal
     line sits at the foot, and the four gaps between logo, heading, mail, credit and legal line are equal and share
     what is left */
  .site-end { --u: min(calc(100vw / 1440), calc(100svh / 900)); justify-content: space-between; gap: 24px; padding: 17.8svh var(--gutter) calc(18 * var(--u)); }
  .footer-top { display: contents; }   /* its parts share the footer's even spacing */
  /* the words keep fixed sizes at every resolution; only the logo and the spacing follow the screen */
  .footer-intro h2 { font-size: 64px; }
  .footer-contact > p:last-child { margin-top: 16px; font-size: 16px; }
  .site-end .footer-brand { width: calc(1008 * var(--u)); }
  .footer-contact > a { min-height: 56px; font-size: 36px; }
  .footer-credit { margin-top: 0; font-size: 16px; }
  .footer-bottom { gap: calc(12 * var(--u)) calc(28 * var(--u)); margin-top: 0; padding-bottom: max(calc(14 * var(--u)), env(safe-area-inset-bottom)); }
  .footer-bottom, .footer-bottom a { font-size: 14px; }
}
@media (max-width: 760px) {
  .site-end { --gutter: 1.25rem; padding-top: 44px; padding-bottom: 18px; }
  .footer-top { gap: 26px; }
  .footer-intro h2 { font-size: clamp(30px, 9vw, 46px); }
  .screen-close__line { font-size: clamp(28px, 8vw, 40px); }   /* a phone: the closing lines fit the width */
  .footer-contact > p:last-child { margin-top: 14px; font-size: 15px; }
  .footer-contact > a { font-size: clamp(20px, 6vw, 26px); }
  .site-end .footer-brand { width: min(78vw, 56svh); }   /* clear of the screen's edges */
  /* the footer runs a navbar's height past the screen, so at the foot of the page its curved, lit edge has gone up
     out of view and the navbar sits on the plain dark, not across the line (the home page's closing footer is flat) */
  .site-end:not(.is-closing) { min-height: calc(100lvh + 76px); padding-top: calc(44px + 76px); }
  .footer-bottom { gap: 8px 20px; font-size: 14px; }
}

/* ---------- hero: full-bleed video, copy left-aligned on the "About" column of the header grid ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 36rem; overflow: hidden; display: flex; align-items: center; color: #f4f1ec; background: #111; }
/* header grid: 3rem padding, 12 columns, 1rem gaps; the nav starts at column 4 */
.hero__copy { position: relative; z-index: 1; width: 100%; padding-left: calc(3rem + 3 * ((100% - 6rem - 11rem) / 12 + 1rem)); padding-right: 3rem; text-align: left; }
.hero__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(3.4rem, 8.4vw, 120px); line-height: .95; letter-spacing: -.01em; }
@media (max-width: 1024px) { .hero__copy { padding-left: var(--gutter); padding-right: var(--gutter); } }

/* ---------- reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(1.75rem); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-split] { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
}
@media (max-width: 1024px) {
  html { font-size: 15px; }
  :root { --gutter: 1.25rem; --inset: 1.25rem; }
  .header { padding-block: calc(.75rem + env(safe-area-inset-top)) .75rem; }   /* the page runs under the phone's status bar, the navbar just below it */
  .header__nav { display: none; }
  .header__container { padding-inline: var(--gutter); }   /* on the page's own margin, so the burger clears the sound pill */
  .pp-home { right: calc(var(--gutter) + .625rem); }   /* its right edge on the burger's lines */
  .header__logo { grid-column: 1 / 6; width: 8rem; }
  .sound-toggle { top: calc(.75rem + env(safe-area-inset-top)); right: calc(var(--gutter) + 3rem); }
  .header--hidden ~ .sound-toggle { opacity: 0; pointer-events: none; transform: translateY(-150%); }   /* it leaves with the header, off the words beneath */
  .sound-toggle { transition: color .3s, background-color .3s, opacity .5s cubic-bezier(.33, 1, .68, 1), transform .5s cubic-bezier(.33, 1, .68, 1); }
  .header__burger { grid-column: 12 / -1; justify-self: end; display: grid; gap: 5px; width: 2.25rem; height: 2.25rem; place-content: center; position: relative; z-index: 2; }
  .header__burger span { width: 1rem; height: 1.5px; background: currentColor; transition: transform .4s var(--ease); }
  .nav-open .header__burger span:first-child { transform: translateY(3.25px) rotate(45deg); }
  .nav-open .header__burger span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  .nav-open .header { color: var(--lilac); }
  .title { font-size: clamp(2rem, 9vw, 3.2rem); }
  .serif { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .flow { padding: 8rem var(--inset) 5rem; }
  .statement { padding: 8rem var(--inset) 6rem; }
  .statement__title > span:nth-child(n) { transform: none; white-space: normal; }
  .project { flex-basis: 84vw; }
  .team, .team__head, .contact__form, .contact__info { grid-template-columns: 1fr; }
  .team { gap: 2rem; }
  .drawer__body { padding: 5rem 1.5rem 2rem; }
  .drawer__panel { width: 100%; min-width: 0; }
  .mark > span { font-size: .625rem; }
}
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .site-end { padding-top: 2.75rem; padding-bottom: 1.1rem; }
  .scene + .statement { padding-top: 3.5rem; }
  .drawer__statement { font-size: clamp(1.95rem, 8.6vw, 2.4rem); line-height: 1.05; }   /* the contact panel's line, as large as the page headings */
  .statement__text { margin-top: 3rem; font-size: 21px; line-height: 1.3; }   /* a lead, not a second heading, on a phone */   /* the words follow the 3D scene's white straight away */
  /* a phone's navbar: a larger logo and menu, the sound as its bare icon, no pill round it */
  .header__logo { width: 10rem; }
  .header__burger { width: 2.75rem; height: 2.75rem; gap: 7px; }
  .header__burger span { width: 1.5rem; height: 2px; }
  .nav-open .header__burger span:first-child { transform: translateY(4.5px) rotate(45deg); }
  .nav-open .header__burger span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
  .sound-toggle, .sound-toggle:hover, .sound-toggle.is-on, .sound-toggle.is-on:hover, .sound-toggle.on-media, .sound-toggle.on-media:hover, .sound-toggle.on-media.is-on, .sound-toggle.on-media.is-on:hover { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .sound-toggle { top: calc(.75rem + env(safe-area-inset-top)); right: calc(var(--gutter) + 3.25rem); height: 2.75rem; width: 2.75rem; padding: 0; justify-content: center; }
  .sound-toggle__label { display: none; }
  .sound-toggle__bars { gap: 4px; height: 1.35rem; }
  .sound-toggle__bars i { width: 2px; }
  /* the sound on the left, the logo in the middle, the menu on the right */
  .header__logo { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .header__burger { grid-row: 1; }
  .sound-toggle { left: calc(var(--gutter) - .55rem); right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  [data-reveal], [data-split] .ch { opacity: 1; transform: none; filter: none; }
}


/* contact form: the paper-plane send button (on hover the plane takes off and the word slides away), built on the
   shiny CTA component in the brand purple: a light runs round the rim, a shimmer turns inside, and on hover the rim
   light widens and a purple glow breathes up from below (the component's dot pattern is left out) */
@property --gradient-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --gradient-angle-offset { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --gradient-percent { syntax: "<percentage>"; initial-value: 5%; inherits: false; }
@property --gradient-shine { syntax: "<color>"; initial-value: white; inherits: false; }
.send-button {
  --shiny-cta-bg: #2a2042;
  --shiny-cta-bg-subtle: #3e3160;
  --shiny-cta-fg: #ffffff;
  --shiny-cta-highlight: #8f63d6;
  --shiny-cta-highlight-subtle: #c9b2f2;
  --animation: gradient-angle linear infinite;
  --duration: 3s;
  --transition: 800ms cubic-bezier(.25, 1, .5, 1);
  isolation: isolate; position: relative; overflow: hidden; cursor: pointer; outline-offset: 4px;
  display: inline-flex; align-items: center; gap: .3rem; height: 2.5rem; padding: 0 1.2rem 0 1rem;   /* the audio pill's box */
  font-family: var(--font-sans); font-size: 1.05rem; font-weight: 500;
  border: 1px solid transparent; border-radius: 1.1rem; color: var(--shiny-cta-fg);
  background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box,
    conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)), transparent, var(--shiny-cta-highlight) var(--gradient-percent), var(--gradient-shine) calc(var(--gradient-percent) * 2), var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3), transparent calc(var(--gradient-percent) * 4)) border-box;
  box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle);
  transition: var(--transition); transition-property: --gradient-angle-offset, --gradient-percent, --gradient-shine;
}
.send-button::after, .send-button__fly::before { content: ""; pointer-events: none; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; translate: -50% -50%; z-index: -1; }
.send-button:active { translate: 0 1px; }
/* inner shimmer */
.send-button::after { --animation: shimmer linear infinite; width: 100%; aspect-ratio: 1; opacity: .6;
  background: linear-gradient(-50deg, transparent, var(--shiny-cta-highlight), transparent);
  -webkit-mask-image: radial-gradient(circle at bottom, transparent 40%, black); mask-image: radial-gradient(circle at bottom, transparent 40%, black); }
.send-button > span { z-index: 1; }
.send-button__fly::before { --size: calc(100% + 1rem); width: var(--size); height: var(--size); box-shadow: inset 0 -1ex 2rem 4px var(--shiny-cta-highlight); opacity: 0; transition: opacity var(--transition); animation: calc(var(--duration) * 1.5) breathe linear infinite; }
.send-button, .send-button::after { animation: var(--animation) var(--duration), var(--animation) calc(var(--duration) / .4) reverse paused; animation-composition: add; }
.send-button:is(:hover, :focus-visible) { --gradient-percent: 20%; --gradient-angle-offset: 95deg; --gradient-shine: var(--shiny-cta-highlight-subtle); }
.send-button:is(:hover, :focus-visible), .send-button:is(:hover, :focus-visible)::after { animation-play-state: running; }
.send-button:is(:hover, :focus-visible) .send-button__fly::before { opacity: 1; }
@keyframes gradient-angle { to { --gradient-angle: 360deg; } }
@keyframes shimmer { to { rotate: 360deg; } }
@keyframes breathe { from, to { scale: 1; } 50% { scale: 1.2; } }
.send-button__fly, .send-button__icon { display: flex; align-items: center; }
.send-button__icon svg { width: 1.4rem; height: 1.4rem; display: block; transform-origin: center; transition: transform .3s ease-in-out; }
.send-button__label { display: block; margin-left: .25rem; transition: transform .3s ease-in-out; }
.send-button:hover .send-button__icon { animation: send-fly .6s ease-in-out infinite alternate; }
.send-button:hover .send-button__icon svg { transform: translateX(1.2em) rotate(45deg) scale(1.1); }
.send-button:hover .send-button__label { transform: translateX(5em); }
@media (prefers-reduced-motion: reduce) { .send-button:hover .send-button__icon, .send-button, .send-button::after, .send-button__fly::before { animation: none; } }

/* ---------------------------------------------------------------------------
   Intro: the logo on white, then the white fades onto the scene (as at the end of the slides)
--------------------------------------------------------------------------- */
.intro-on { overflow: hidden; }
.intro { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: #fff; transition: opacity 1s ease; }
.intro.is-out { opacity: 0; pointer-events: none; background: transparent; }
.intro__logo { width: min(40rem, 76vw); height: auto; }
.intro__bar { position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); width: min(14rem, 44vw); height: 5px; overflow: hidden; border-radius: 999px; background: rgba(123, 92, 159, .16); }   /* the loading line, low on the screen, clear of its foot */
.intro__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--purple); transform: translateX(-100%); transition: transform .35s ease; }
.intro__logo path { fill: var(--navy); }
.intro__logo polygon { fill: var(--purple); }
.intro__white { position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity .5s ease; }
.intro.is-white .intro__white { opacity: 1; }

/* how we work (novaform): white cards rise one over the other as you scroll, then the stack opens out into a straight row */
/* the about page's gallery (mprez.fr): wide 16:9 photographs, each held a little lower than the last; as the next comes
   up over one, it eases back from its top, so the pile steps back and narrows behind the newest (scale set by script) */
.lines { display: flex; flex-direction: column; gap: 12px; padding: 6rem var(--gutter) 0; }
.ab-lines { padding-bottom: 18vh; }   /* light ground under the pile as it leaves, before how we work's dark comes up */
.lines::after { content: ""; height: 20vh; }   /* a short hold once the last is in; spacing is gap, not margin, as a held card counts its own margin */
.line-card { --top: 7.5rem; --step: 18px; position: sticky; top: calc(var(--top) + var(--i) * var(--step)); display: block; width: 100%;
  max-width: min(80vw, calc((100vh - var(--top) - 2 * var(--step) - 4vh) * 16 / 9)); aspect-ratio: 16 / 9; margin: 0 auto; overflow: hidden; border-radius: var(--radius-card); transform-origin: 50% 0; }
.line-card__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* a phone: the photographs side by side, swiped through, nothing stacking */
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .ab-lines { padding-bottom: 4rem; }
  .lines { flex-direction: row; gap: 14px; padding: 5rem var(--gutter) 0; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; scrollbar-width: none; }
  .lines::-webkit-scrollbar, .lines::after { display: none; }
  .line-card { position: relative; top: auto; flex: 0 0 84vw; max-width: none; aspect-ratio: 4 / 5; margin: 0; scroll-snap-align: start; }
}
.ways { padding: 0; background: var(--background); }
.ways__track { position: relative; height: 420vh; }
.ways__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.about-cards { position: relative; width: 100%; height: 100%; }   /* the cards are placed by script: a stack, then a row */
.about-card { position: absolute; left: 0; top: 0; display: grid; grid-template-rows: auto auto 1fr; align-content: start; overflow: hidden; padding: 0 0 2.6rem; border-radius: var(--radius-card); background: #fff; color: var(--foreground); will-change: transform; }
/* the illustration across the top of the card, the words on white beneath */
.about-card__art { display: block; aspect-ratio: 4 / 3; margin-bottom: 1.3rem; background: center / cover no-repeat; }   /* the same, shorter picture on every card */
.about-card h3 { margin: 0 1.5rem .6rem; font-family: var(--font-sans); font-weight: 500; font-size: 28px; line-height: 1.2; }
.about-card p { margin: 0 1.5rem; font-size: 18px; line-height: 1.5; color: var(--muted); }
/* a phone: no stack, the cards lie open side by side and are swiped through, each settling in the middle */
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .ways__track { height: auto; }
  .ways__pin { position: static; height: auto; display: block; overflow: visible; padding: 3rem 0 5rem; }
  .about-cards { display: flex; gap: 14px; height: auto; padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; scrollbar-width: none; }
  .about-cards::-webkit-scrollbar { display: none; }
  /* the next card shows only a sliver at the edge, narrower than the margin of its words, so no line is ever cut */
  .about-card { position: relative; flex: 0 0 calc(100vw - var(--gutter) - 30px); padding-bottom: 3.6rem; scroll-snap-align: start; will-change: auto; }
  .about-card__art { margin-bottom: 1.25rem; }
  .about-card h3 { margin: 0 1.4rem .55rem; font-size: 24px; }
  .about-card p { margin: 0 1.4rem; font-size: 16px; }
}

/* the shared picture layer: every photo and film redrawn here, bent by one liquid (assets/js/media-gl.js) */
.media-gl { position: fixed; inset: 0; z-index: 1; width: 100vw; height: 100vh; pointer-events: none; }

/* small running text in General Sans reads too thin at 400: one step heavier everywhere it is used */
.about-card p, .pj-card__text, .wwd__desc, .stage-copy p, .footer-intro > p:last-child, .footer-contact > p:last-child, .footer-bottom, .footer-credit, .drawer p, .drawer dd { font-weight: 500; }

/* ---------- project sheet (jesperlandberg.com): white sheet over the page, words left, film and pictures right ---------- */
.sheet { position: fixed; inset: 0; z-index: 40; visibility: hidden; pointer-events: none; }
.sheet.is-open { visibility: visible; pointer-events: auto; }
.sheet__overlay { position: absolute; inset: 0; background: rgba(7, 4, 15, .72); opacity: 0; transition: opacity .6s ease; }
.sheet.is-shown .sheet__overlay { opacity: 1; }
.sheet.is-leaving .sheet__overlay { opacity: 0; transition-duration: .45s; }
.sheet__panel { position: absolute; inset: 20px 48px; z-index: 1; transform-origin: 50% 50%; display: grid; grid-template-columns: minmax(0, 37fr) minmax(0, 63fr); overflow: hidden; border-radius: 20px; background: #fff; color: #0b0b0f;
  transition: transform .8s cubic-bezier(.65, 0, .2, 1); }
/* opens from the card: grows and flattens into place (transform set from the script), its picture fading to white */
.sheet.is-shown .sheet__panel { transform: none; }
.sheet.is-leaving .sheet__panel { opacity: 0; transition: opacity .45s ease; }
.sheet__gl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }   /* the bending sheet and pictures (sheet-gl.js), under its words */
.sheet.has-gl .sheet__panel { background: transparent; }
.sheet__ghost { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 1; transition: opacity .7s ease .1s; }
.sheet.is-shown .sheet__ghost { opacity: 0; }
.sheet__info, .sheet__media, .sheet__close, .sheet__ring { transition: opacity .45s ease, transform .45s cubic-bezier(.7, 0, .2, 1); }
.sheet.is-switching :is(.sheet__info, .sheet__media) { opacity: 0; transform: translateX(calc(var(--dir, 1) * -40px)); }
/* the other projects, waiting at either side */
.sheet__peek { position: absolute; top: 12%; bottom: 12%; width: 64px; padding: 0; border: 0; border-radius: 16px; background: #3a3a40; cursor: pointer; opacity: 0; transition: opacity .5s ease .35s, transform .4s ease; }
.sheet__peek--prev { left: -40px; }
.sheet__peek--next { right: -40px; }
.sheet.is-shown .sheet__peek { opacity: 1; }
.sheet.is-leaving .sheet__peek { opacity: 0; transition-delay: 0s; }
.sheet__peek--prev:hover { transform: translateX(8px); }
.sheet__peek--next:hover { transform: translateX(-8px); }
/* the ring in the corner counts the way round the pictures */
.sheet__ring { position: absolute; left: 40px; bottom: 40px; width: 24px; height: 24px; transform: rotate(-90deg); fill: none; stroke-width: 1.6; }
.sheet__ring circle { stroke: #d9d9d9; }
.sheet__ring .sheet__ring-fill { stroke: #0b0b0f; stroke-dasharray: 1; stroke-dashoffset: 1; }
.sheet__info { padding: 40px 40px; }
.sheet__title { margin: 0; font-family: var(--font-sans); font-weight: 500; font-size: 48px; line-height: 1.05; letter-spacing: -.03em; }
.sheet__text { max-width: 30rem; margin: 1.6rem 0 0; font-size: 18px; font-weight: 400; line-height: 1.45; }   /* plain running text, as the site's paragraphs */
.sheet__text p { margin: 0; }
.sheet__text p + p { margin-top: .9em; }
.sheet__visit { margin-top: 1.6rem; }   /* the same room between tags, title, words and button */
.sheet__visit.send-button { width: 3rem; height: 3rem; padding: 0; justify-content: center; border-radius: 50%; }   /* the send button's light, as a round arrow */
.sheet__visit-arrow { position: relative; z-index: 1; display: flex; }
.sheet__visit-arrow svg { width: 1.15rem; height: 1.15rem; transition: transform .3s var(--ease); }
.sheet__visit:hover .sheet__visit-arrow svg { transform: translate(2px, -2px); }
.sheet__visit[hidden] { display: none; }
.sheet__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 1.6rem; padding: 0; list-style: none; }
.sheet__tags:empty { display: none; }   /* a line of work has no place */
.sheet__tags li { padding: .45rem .9rem; border-radius: 999px; background: var(--purple); color: #fff; font-family: var(--font-mono); font-size: 14px; font-weight: 400; }   /* set exactly as written, no forced capitals */
.sheet__media { display: flex; flex-direction: column; gap: 56px; padding: 38px 115px 38px 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.sheet__media::-webkit-scrollbar { display: none; }
.sheet__media > :is(img, video), .sheet__pair img { flex: none; display: block; width: 100%; aspect-ratio: 5 / 3; object-fit: cover; border-radius: 14px; background: #0b0b0f; }
.sheet__pair { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sheet__pair img { aspect-ratio: 2 / 3; }
.sheet__close { position: absolute; top: 28px; right: 28px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #0b0b0f; color: #fff; cursor: pointer; transition: transform .3s ease; }
.sheet__close:hover { transform: rotate(90deg); }
.sheet__close svg { width: 18px; height: 18px; }
.pj-card[data-project] { cursor: pointer; }
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .sheet__title { font-size: 34px; }   /* a phone's heading size */
  .sheet__text { margin-top: 1.3rem; font-size: 16px; }
  .sheet__tags { margin-bottom: 1.3rem; }
  .sheet__visit { margin-top: 1.3rem; }
  /* one page: the words, then the pictures under them, scrolled together and once through */
  .sheet__panel { inset: 12px; display: block; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .sheet__info { padding: 28px 24px 0; }
  .sheet__media { display: flex; padding: 24px; gap: 16px; overflow: visible; }
  .sheet__pair { gap: 16px; }   /* the same room between the pictures across as down */
  .sheet__close { position: fixed; top: 28px; right: 28px; z-index: 2; }   /* stays to hand while the sheet scrolls */
  .sheet__ring { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sheet__panel, .sheet__overlay { transition: none; } }


/* Legal pages (terms, privacy): light, one reading column, as on emotion's */
.legal { padding: 120px 0 160px; }
.legal__body { max-width: 664px; margin-inline: auto; }   /* the reading column, centred */
.legal__title { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: 64px; line-height: .95; letter-spacing: -.01em; }
.legal__date { margin: 32px 0 0; font-family: var(--font-sans); font-size: 16px; }
.legal__date b { font-size: 20px; font-weight: 500; margin-right: .3em; }
.legal__text { font-family: var(--font-sans); font-size: 16px; line-height: 1.4; }
.legal__text h2 { margin: 32px 0 20px; font-family: var(--font-sans); font-weight: 500; font-size: 32px; line-height: 1.1; letter-spacing: -.01em; }
.legal__text p { margin: 0 0 20px; }
.legal__text ul { margin: 0 0 20px; padding-left: 24px; list-style: disc; }
.legal__text li { margin-bottom: 8px; }
.legal__text b { font-weight: 600; }
.legal__text a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .legal { padding: 100px 0 100px; }
  .legal__title { font-size: 46px; }
  .legal__text h2 { font-size: 24px; }
}

/* a tablet held upright: the phone's tall layouts, set larger to fill the wider screen */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  .header__logo { width: 11rem; }
  .statement__text { font-size: 26px; }
  .ab-hero__title { font-size: 7.2vw; }   /* the about page's opening line fills the tall screen's width */
  .ab-hero__lead { font-size: 13px; }
  /* the references: one under another, as on a phone, each card a good size in the middle */
  .pj-track { --cw: 70vw; left: 15vw; gap: 32px; }
  .pj-card { width: 70vw; height: min(84vw, 64svh); }
  .pj-card__body { padding: 2rem; }
  .pj-card__title { font-size: 44px; }
  .projects-page .pj-track.pj-track { left: 15vw; gap: 32px; }
  .projects-page .pj-card { --h: min(80vw, calc(100svh - 360px)); width: 70vw; }
  /* what we build and the team: the three side by side, still, under the title */
  .build__title { font-size: 64px; }
  .build__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 20px; margin-top: 3rem; }
  .build__name { font-size: 26px; }
  .crew__role { font-size: 15px; }
  /* the four cards and the photographs: two to a screen, swiped */
  .about-card { flex-basis: calc((100vw - 2 * var(--gutter) - 14px) / 2 - 24px); }
  .about-card h3 { font-size: 26px; }
  .about-card p { font-size: 17px; }
  .line-card { flex-basis: 64vw; }
  /* the project sheet: one page, its words wider and larger */
  .sheet__panel { inset: 24px; }
  .sheet__info { padding: 48px 48px 0; }
  .sheet__media { padding: 32px 48px 48px; gap: 20px; }
  .sheet__pair { gap: 20px; }
  .sheet__title { font-size: 48px; }
  .sheet__text { max-width: 36rem; font-size: 18px; }
  .sheet__close { top: 40px; right: 40px; }
}

/* ---------- 404: the site's night, a large pale 404 behind the words, the way home in the send button's light ---------- */
body:has(.nf) { background: #080a1c; }
.nf { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 7rem var(--gutter) clamp(3.5rem, 8vw, 6rem); overflow: hidden; color: #f4f1ec; text-align: center;
  background: radial-gradient(120% 70% at 50% 110%, #2b1a52 0%, rgba(43, 26, 82, 0) 60%), linear-gradient(180deg, #080a1c 0%, #141033 100%); }
.nf__num { font-family: var(--font-serif); font-size: clamp(170px, 30vw, 440px); font-weight: 500; line-height: .8; letter-spacing: -.02em; user-select: none;
  background: linear-gradient(180deg, rgba(220, 196, 255, .24) 0%, rgba(169, 139, 240, .1) 70%, rgba(169, 139, 240, 0) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; translate: 0 calc(clamp(30px, 3vw, 45px) + 15px); }   /* only the number sits a little lower, under the words */
.nf__text { position: relative; z-index: 1; max-width: 46rem; }
.nf__title { margin: 0; font-family: var(--font-serif); font-size: clamp(2.4rem, 5vw, 72px); font-weight: 500; line-height: 1.05; letter-spacing: -.01em; text-wrap: balance; }
.nf__title em { font-style: normal; color: inherit; }   /* one white throughout, as the footer's heading */
.nf__lead { max-width: 30rem; margin: 1.4rem auto 0; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.55; color: rgba(244, 241, 236, .78); text-wrap: balance; }
.nf__btn { margin-top: 2.2rem; }
.nf__arrow { display: flex; }
.nf__arrow svg { width: 1.15rem; height: 1.15rem; shape-rendering: crispEdges; transition: transform .3s var(--ease); }
.nf__btn:hover .nf__arrow svg { transform: translateX(-3px); }
.nf__btn .send-button__label { font-family: var(--font-mono); font-size: max(.8rem, 13px); letter-spacing: .02em; }
.nf__btn:hover .send-button__label { transform: none; }   /* the label stays put: only the arrow leans home */
@media (max-width: 760px) {
  .nf { justify-content: flex-start; padding-top: 9rem; }
  .nf__num { font-size: 44vw; }
  .nf__title { font-size: clamp(2.1rem, 9.4vw, 2.8rem); }
}