/* Institution — website.
   Stone and ink, with ivy. Finish A (Limestone) throughout, light only.
   Type: Michelangelus where installed (EB Garamond stands in), Jost for interface,
   IBM Plex Mono for labels, EB Garamond Italic for the slogan.
   Motion: drawn first, then built. Nothing bounces, spins or overshoots. */

/* ---------- Tokens ---------- */

:root {
  --limestone: #E6E0D4;
  --marble: #F5F2EC;
  --paper: #F8F4EC;
  --sandstone: #CFC7B8;
  --weathered: #A39C90;
  --granite: #6E6A64;
  --slate: #43413D;
  --charcoal: #2B2A28;
  --stone-fill: #ECE6DA;

  /* Ivy: the one accent. Light for leaves, deep for text */
  --ivy-stem: #6E8A58;
  --ivy-line-0: #7E9C66;
  --ivy-line-1: #6A8A55;
  --ivy-line-2: #8FAE77;
  --ivy-fill-0: #B5CB9B;
  --ivy-fill-1: #A3BD88;
  --ivy-fill-2: #C6D8AF;
  --ivy-wash: #DDE6D0;
  --ivy-deep: #4C6A3C;

  --bg: var(--limestone);
  --ink: var(--charcoal);
  --muted: var(--granite);
  --rule: rgba(43, 42, 40, .16);

  --serif: "Michelangelus", "EB Garamond", Garamond, "Times New Roman", serif;
  --accent: "EB Garamond", Garamond, Georgia, serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --gutter: clamp(16px, 4vw, 56px);
  --wrap: 1400px;
  --nav-h: 88px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-slow: cubic-bezier(.65, 0, .35, 1); /* page fades and line drawings */
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  /* Fine stone grain */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .16 0 0 0 0 .15 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  color-scheme: light;
}

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .5s; animation-timing-function: var(--ease-slow); }
/* The nav links hold still between pages, so a vine handed over doesn't
   flicker. Named on the links, not the bar: a named element stops the
   blur of any glass inside it from seeing the page behind */
.nav__links { view-transition-name: nav; }
::view-transition-new(nav) { animation: none; }

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body {
  background: var(--bg) var(--grain);
  color: var(--ink);
  font: 400 1.125rem/1.6 var(--serif);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: var(--ivy-wash); color: var(--charcoal); }
:focus-visible { outline: 2px solid var(--ivy-deep); outline-offset: 3px; border-radius: 2px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--charcoal); color: var(--marble); padding: 10px 16px; font: 500 .9rem var(--sans); border-radius: 999px; }
.skip:focus { top: 16px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { width: 100%; max-width: 1600px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(80px, 13vw, 180px); }

/* ---------- Type ---------- */

.label {
  font: 500 .7rem/1.5 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.label a:hover { color: var(--ivy-deep); }
.display { font: 400 clamp(2.3rem, 4.6vw, 4.2rem)/1.04 var(--serif); letter-spacing: -.012em; text-wrap: balance; }
.display--md { font-size: clamp(1.55rem, 2.5vw, 2.3rem); line-height: 1.24; letter-spacing: -.005em; text-wrap: pretty; }
.display--lg { font-size: clamp(2.8rem, 6.4vw, 5.6rem); line-height: 1; }
.lead { font: 400 clamp(1.2rem, 1.5vw, 1.4rem)/1.55 var(--serif); color: var(--slate); text-wrap: pretty; }
.label + .display, .label + h1, .label + h2 { margin-top: .5em; }

.link {
  display: inline-flex; align-items: center; gap: .7em;
  font: 500 .95rem/1 var(--sans); letter-spacing: .02em;
  padding-bottom: 10px; border-bottom: 1px solid var(--rule);
  transition: color .25s, border-color .25s;
}
.link:hover { color: var(--ivy-deep); border-color: var(--ivy-deep); }
.arrow { width: 1.5em; height: .75em; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; overflow: visible; transition: transform .35s var(--ease-out); }
a:hover .arrow, button:hover .arrow { transform: translateX(4px); }
.arrow--back { transform: scaleX(-1); }
a:hover .arrow--back { transform: translateX(-4px) scaleX(-1); }

.button {
  position: relative;
  display: inline-flex; align-items: center; gap: .8em;
  font: 500 .95rem/1 var(--sans); letter-spacing: .02em;
  padding: 1.1em 1.7em; border-radius: 999px;
  background: var(--charcoal); color: var(--marble);
  transition: background-color .3s var(--ease), color .3s, border-color .3s;
}
.button:hover { background: var(--ivy-deep); }
.button--ghost { background: transparent; color: var(--ink); border: 1px solid rgba(43, 42, 40, .35); }
.button--ghost:hover { background: transparent; color: var(--ivy-deep); border-color: var(--ivy-deep); }

/* The see-through label over a button that gives it a haptic tick on iPhone (see site.js) */
.haptic { position: absolute; inset: 0; z-index: 1; border-radius: inherit; -webkit-tap-highlight-color: transparent; }
.haptic input { position: absolute; visibility: hidden; pointer-events: none; }

.glass {
  background: rgba(245, 242, 236, .14);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
  border: 1px solid rgba(245, 242, 236, .32);
  color: var(--marble);
}
.chip {
  display: inline-flex; align-items: center; gap: .7em;
  font: 500 .85rem/1 var(--sans); letter-spacing: .03em;
  padding: .95em 1.3em; border-radius: 999px;
  transition: background-color .3s var(--ease), border-color .3s;
}
a:hover .chip.glass { background: rgba(245, 242, 236, .26); border-color: rgba(245, 242, 236, .5); }

.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Ivy ---------- */

.ivy-layer { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 3; }
.ivy-stem { fill: none; stroke: var(--ivy-stem); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1 1; }
.ivy-stem--1 { stroke-width: 1.1; }
.ivy-stem--2 { stroke-width: .9; }
.ivy-leaf path { vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.ivy-petiole { fill: none; stroke: var(--ivy-stem); stroke-width: 1; }
.ivy-blade { stroke-width: 1.05; }
.ivy-vein { fill: none; stroke-width: .6; opacity: .75; }
.ivy-leaf--0 .ivy-blade { fill: var(--ivy-fill-0); fill-opacity: .42; stroke: var(--ivy-line-0); }
.ivy-leaf--1 .ivy-blade { fill: var(--ivy-fill-1); fill-opacity: .36; stroke: var(--ivy-line-1); }
.ivy-leaf--2 .ivy-blade { fill: var(--ivy-fill-2); fill-opacity: .48; stroke: var(--ivy-line-2); }
.ivy-leaf--0 .ivy-vein { stroke: var(--ivy-line-0); }
.ivy-leaf--1 .ivy-vein { stroke: var(--ivy-line-1); }
.ivy-leaf--2 .ivy-vein { stroke: var(--ivy-line-2); }
/* On photographs the leaves catch more light */
.on-dark .ivy-stem, .on-dark .ivy-petiole { stroke: #A9C38F; }
.on-dark .ivy-blade { fill-opacity: .22 !important; stroke: #C2D6A9 !important; }
.on-dark .ivy-vein { stroke: #C2D6A9 !important; }

/* ---------- Line art ---------- */

.lineart { overflow: visible; }
.la-guides path { fill: none; stroke: var(--weathered); stroke-width: .6; vector-effect: non-scaling-stroke; }
.la-labels text { font: 400 9px var(--mono); letter-spacing: .1em; fill: var(--granite); }
.la-ink path { fill: none; stroke: var(--charcoal); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.la-hatch path { fill: none; stroke: var(--granite); stroke-width: .6; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.la-fill path { fill: var(--stone-fill); }

.js [data-draw] .la-guides path,
.js [data-draw] .la-ink path,
.js [data-draw] .la-hatch path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.js [data-draw] .la-fill, .js [data-draw] .la-labels { opacity: 0; }
.js [data-draw].is-drawn .la-guides path,
.js [data-draw].is-drawn .la-ink path,
.js [data-draw].is-drawn .la-hatch path {
  animation: la-draw calc(var(--t) * var(--speed, .72)) var(--ease-slow) calc(var(--d) * var(--speed, .72)) forwards;
}
.js [data-draw].is-drawn .la-labels { animation: la-fade-in .8s var(--ease-slow) 1s forwards; }
.js [data-draw].is-drawn .la-fill { animation: la-fade-in 1.2s var(--ease-slow) var(--fill-at, 1.6s) forwards; }
.js [data-draw].is-drawn .la-guides { animation: la-settle 1.6s var(--ease-slow) var(--guides-out, 3.4s) forwards; }
@keyframes la-draw { to { stroke-dashoffset: 0; } }
@keyframes la-fade-in { to { opacity: 1; } }
@keyframes la-settle { to { opacity: .32; } }

/* ---------- Navigation ---------- */

.nav {
  position: fixed; inset: 0 0 auto; z-index: 60;
  padding: 16px var(--gutter);
  pointer-events: none;
  --nav-ink: var(--charcoal);
}
body[data-nav-theme="light"] .nav:not(.is-pill), .nav.is-pill.on-photo { --nav-ink: var(--marble); }
.nav__bar {
  pointer-events: auto;
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  width: 100%; max-width: 100%; height: 56px;
  margin-inline: auto;
  padding: 0 2px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--nav-ink);
  transition:
    max-width .45s var(--ease), padding .45s var(--ease), color .3s var(--ease),
    background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.nav.is-pill .nav__bar {
  max-width: var(--pill-w, 560px);
  padding: 0 8px 0 22px;
  background: rgba(245, 242, 236, .5);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  border-color: rgba(255, 255, 255, .42);
  box-shadow: 0 14px 34px -20px rgba(43, 42, 40, .32), inset 0 1px 0 rgba(255, 255, 255, .55);
}
/* Over a photograph: clear glass, light ink */
.nav.is-pill.on-photo .nav__bar {
  background: rgba(245, 242, 236, .16);
  border-color: rgba(245, 242, 236, .26);
  box-shadow: 0 14px 34px -20px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.nav__brand { display: flex; align-items: center; gap: 13px; flex: none; }
.nav__brand svg { fill: currentColor; transition: height .45s var(--ease), width .45s var(--ease); }
.nav__mark { height: 34px; width: auto; }
.nav__word { height: 11px; width: auto; }
.nav.is-pill .nav__mark { height: 26px; }
.nav.is-pill .nav__word { height: 9px; }
.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__link {
  position: relative;
  font: 400 .97rem/1 var(--sans); letter-spacing: .02em;
  padding: 12px 14px 14px;
  border-radius: 999px;
  transition: opacity .25s;
}
.nav__link span { position: relative; z-index: 1; }
.nav__links:hover .nav__link:not(:hover):not(.nav__link--button) { opacity: .62; }
/* Contact: a deep ivy pill at the end of the bar */
.nav__link--button { margin-left: 10px; padding: 12px 20px 13px; background: var(--ivy-deep); color: var(--marble); transition: background-color .25s var(--ease), box-shadow .25s var(--ease); }
.nav__link--button:hover { background: #3E5832; box-shadow: 0 6px 18px -8px rgba(76, 106, 60, .7); }
.nav__toggle { display: none; position: relative; width: 44px; height: 44px; border-radius: 999px; }
.nav__toggle i { position: absolute; left: 12px; right: 12px; height: 1.3px; background: currentColor; transition: transform .3s var(--ease); }
.nav__toggle i:first-of-type { top: 18px; }
.nav__toggle i:last-of-type { top: 25px; }
.nav__toggle[aria-expanded="true"] i:first-of-type { transform: translateY(3.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] i:last-of-type { transform: translateY(-3.5px) rotate(-45deg); }

/* Menu (small screens) */
.menu {
  position: fixed; inset: 0; z-index: 55;
  background: var(--bg) var(--grain);
  display: flex; flex-direction: column; align-items: flex-end;
  padding: calc(var(--nav-h) + 4vh) var(--gutter) 40px;
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility 0s .3s;
}
.menu[hidden] { display: flex; }
.menu.is-open { opacity: 1; visibility: visible; transition: opacity .3s var(--ease); }
.menu nav ol { display: grid; justify-items: end; text-align: right; }
.menu nav li a { display: inline-block; padding: 5px 0; font: 400 2.1rem/1.1 var(--serif); letter-spacing: -.01em; }
.menu nav li a[aria-current="page"] { color: var(--ivy-deep); }
.menu nav li a.menu__button { display: inline-flex; align-items: center; margin-top: 18px; padding: 15px 26px; border-radius: 999px; font: 500 1.05rem/1 var(--sans); letter-spacing: .03em; background: var(--ivy-deep); color: var(--marble); }
.menu nav li a.menu__button[aria-current="page"] { color: var(--marble); }
/* Email and socials tucked under the links, set off by a short rule */
.menu__foot { display: grid; justify-items: end; gap: 10px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--rule); min-width: 190px; text-align: right; font: 400 1.05rem var(--sans); }
.menu__place { font-weight: 600; letter-spacing: .01em; }
.menu .socials--row { flex-wrap: nowrap; justify-content: flex-end; gap: 2px; margin-right: -9px; }
.menu .socials--row a { padding: 9px; border: 0; }
.menu .socials--row a:hover { background: none; }
.menu .socials--row span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.menu .socials--row .icon { width: 28px; height: 28px; stroke-width: 1.3; }
body.menu-open { overflow: hidden; }
body.menu-open .nav[data-nav] .nav__mark { height: 34px; }
body.menu-open .nav[data-nav] .nav__word { height: 11px; }
/* Stone menu behind the bar: dark ink, whatever the page or pill theme */
body.menu-open .nav[data-nav] { --nav-ink: var(--charcoal); }
body.menu-open .nav[data-nav] .nav__bar { max-width: 100%; padding: 0 2px; background: transparent; box-shadow: none; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- Hero (sticky) ---------- */

.hero {
  position: sticky; top: 0; z-index: 0;
  height: 100vh; height: 100svh; min-height: 560px;
  overflow: hidden;
  color: var(--marble);
  background: #2a2723;
}
/* Home, About and the blog: the hero scrolls away with the page instead of waiting under it */
.hero--home, .hero--about, .hero--blog, .hero--post { position: relative; }
.hero__media { position: absolute; inset: 0; transform: scale(calc(1.1 - var(--hp, 0) * .1)); transform-origin: 50% 30%; will-change: transform; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* The video fades in over the photo once it's actually playing */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s var(--ease-slow); }
.hero__video.is-playing { opacity: 1; }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(24, 21, 17, .42) 0%, rgba(24, 21, 17, .06) 28%, rgba(24, 21, 17, .1) 48%, rgba(24, 21, 17, .62) 100%),
    rgba(24, 21, 17, calc(var(--hp, 0) * .55));
}
/* Headings sit in the lower third, over the deepest part of the shade */
.hero__copy { position: absolute; z-index: 1; left: 0; right: 0; bottom: clamp(56px, 13vh, 150px); margin-inline: auto; }
.hero__eyebrow { color: rgba(245, 242, 236, .78); margin-bottom: 18px; }
.hero__title {
  font: 400 clamp(2.7rem, 6.6vw, 6.4rem)/1.02 var(--serif);
  letter-spacing: -.015em;
  max-width: 15ch;
  text-wrap: balance;
  text-shadow: 0 1px 30px rgba(0, 0, 0, .18);
}
.hero__sub { margin-top: 22px; max-width: 34rem; font-size: 1.2rem; color: rgba(245, 242, 236, .86); }
.hero__meta { margin-top: 26px; color: rgba(245, 242, 236, .78); }
.hero__eyebrow a:hover { color: var(--marble); }
.hero--post .hero__title { max-width: 18ch; font-size: clamp(2.5rem, 5.6vw, 5.2rem); }
.js .hero__copy > *, .js .panels__heading { animation: settle 1.4s var(--ease-out) .15s both; }
.js .hero__copy > * + * { animation-delay: .3s; }
@keyframes settle { from { opacity: 0; transform: translateY(14px); } }
.br-wide { display: none; }
/* Home: the logo just above the slogan, the wordmark sized off the mark so they stay in proportion */
.hero__brand { --mark: clamp(34px, 3.1vw, 48px); display: flex; align-items: center; gap: calc(var(--mark) * .36); margin-bottom: clamp(10px, 1.2vw, 18px); filter: drop-shadow(0 1px 18px rgba(0, 0, 0, .22)); }
.hero__brand svg { fill: currentColor; flex: none; }
.hero__mark { height: var(--mark); width: auto; }
.hero__word { height: calc(var(--mark) * .32); width: auto; } /* the same proportion as the nav lockup */
@media (min-width: 900px) { .br-wide { display: inline; } .hero--home .hero__title { max-width: none; } }

/* The page that slides up over the hero */
.sheet {
  position: relative; z-index: 1;
  background: var(--bg) var(--grain);
  box-shadow: 0 -40px 80px -40px rgba(24, 21, 17, .5);
}

/* ---------- Home: pillar ---------- */

.pillar {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 7vw, 140px);
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter);
}
.pillar__art {
  position: sticky; top: calc(var(--nav-h) + 2vh);
  height: calc(100svh - var(--nav-h) - 6vh);
  display: flex; align-items: center; justify-content: center;
  --speed: .62; --fill-at: 2.2s; --guides-out: 3.8s;
}
.pillar__art svg { height: 100%; width: auto; max-width: 100%; }
.pillar__copy { display: grid; gap: 38vh; padding-block: 28vh 22vh; }
.pillar__block { max-width: 34rem; }
.pillar__block .display { margin-bottom: .55em; }
.pillar__block .link { margin-top: 2.2em; }

/* ---------- Home: selected work ---------- */

.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 5vw, 64px); }
.section__head--plain { padding: 0; }
.section__note { max-width: 28rem; color: var(--muted); font-size: 1.02rem; }
.work__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 24px); }
.tile { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3.3; color: var(--marble); background: #2a2723; border-radius: 2px; isolation: isolate; }
.tile--wide { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.tile__media { position: absolute; inset: 0; z-index: -1; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.tile:hover .tile__media img { transform: scale(1.045); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(24, 21, 17, 0) 45%, rgba(24, 21, 17, .62) 100%); }
.tile__info { position: absolute; left: clamp(18px, 2.4vw, 32px); bottom: clamp(18px, 2.2vw, 30px); right: 40%; }
.tile__info .label { color: rgba(245, 242, 236, .78); }
.tile__title { font: 400 clamp(1.6rem, 2.8vw, 2.6rem)/1.06 var(--serif); margin-top: .3em; text-wrap: balance; }
.tile .chip { position: absolute; right: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px); }

/* ---------- Home: featured film ---------- */

.featured { padding-bottom: clamp(56px, 8vw, 120px); }
.featured .player { --room: calc(100svh - var(--nav-h) - 24px); }

/* ---------- Home: services ---------- */

/* The open service's example fills the section; the list sits on smoked
   glass over it, like the contact form */
.services { position: relative; isolation: isolate; color: var(--marble); background: #2a2723; }
.services__bg, .services__media { position: absolute; inset: 0; }
.services__bg { z-index: -2; overflow: hidden; }
.services__media { opacity: 0; transition: opacity .5s var(--ease); }
.services__media.is-active { opacity: 1; }
.services__media img, .service__video { width: 100%; height: 100%; object-fit: cover; }
.service__video { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease); }
.service__video.is-playing { opacity: 1; }
.services::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(24, 21, 17, .7) 0%, rgba(24, 21, 17, .4) 55%, rgba(24, 21, 17, .3) 100%);
}
.services__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: clamp(32px, 6vw, 110px); align-items: center;
  min-height: 100vh; min-height: 100svh;
  padding-block: calc(var(--nav-h) + 32px) clamp(40px, 6vw, 80px);
}
.services__intro { display: grid; gap: 22px; align-content: center; height: 100%; }
.services__intro .label { color: rgba(245, 242, 236, .72); }
.services__intro .label + .display { margin-top: -10px; }
.services__intro .lead { color: rgba(245, 242, 236, .86); max-width: 32rem; }
.services__examples { display: grid; margin-top: clamp(16px, 4vh, 48px); }
.services__example { grid-area: 1 / 1; display: grid; justify-items: start; gap: 8px; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s .35s; }
.services__example.is-active { opacity: 1; visibility: visible; transition: opacity .3s var(--ease) .08s; }
.services__project { font: 400 clamp(1.4rem, 2.2vw, 2rem)/1.1 var(--serif); }
.services__example .chip { margin-top: 10px; }

.services__list { padding: clamp(6px, 1vw, 12px) clamp(22px, 3vw, 36px); }
.service + .service { border-top: 1px solid rgba(245, 242, 236, .18); }
.service__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; padding: clamp(18px, 2.2vw, 26px) 0;
  text-align: left;
  transition: color .25s;
}
.service__toggle:hover { color: var(--ivy-fill-2); }
.services :focus-visible { outline-color: var(--ivy-fill-0); }
.service__name { font: 400 clamp(1.6rem, 2.6vw, 2.4rem)/1.05 var(--serif); letter-spacing: -.01em; }
.service__icon { position: relative; width: 18px; height: 18px; flex: none; }
.service__icon::before, .service__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.3px; background: currentColor; transition: transform .35s var(--ease); }
.service__icon::after { transform: rotate(90deg); }
.service.is-open .service__icon::after { transform: rotate(0deg); }
/* Space under an open service, as a block rather than padding so a closed one folds to nothing */
.service__body::after { content: ""; display: block; height: clamp(22px, 2.4vw, 30px); }
.service__tagline { font: italic 400 clamp(1.2rem, 1.5vw, 1.35rem)/1.35 var(--accent); color: rgba(245, 242, 236, .86); }
.service__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; margin-top: 18px; font: 400 1rem/1.4 var(--sans); color: rgba(245, 242, 236, .8); }
.service__items li { position: relative; padding-left: 18px; }
.service__items li::before { content: ""; position: absolute; left: 1px; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: rgba(245, 242, 236, .6); }
/* With JavaScript one service is open at a time; without it they all are */
.js .service__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.js .service.is-open .service__panel { grid-template-rows: 1fr; }
.js .service__panel > .service__body { overflow: hidden; min-height: 0; }
.js .service:not(.is-open) .service__body { visibility: hidden; transition: visibility 0s .4s; }

/* ---------- Home: who we are ---------- */

.about-intro { text-align: center; }
.about-intro + .work { padding-top: 0; }
.about-intro__inner { display: grid; justify-items: center; gap: 28px; }
.about-intro .display--md { max-width: 30ch; text-wrap: balance; }

/* ---------- Home: closing ---------- */

.closing { text-align: center; padding-top: clamp(24px, 4vw, 56px); }
.closing__inner { display: grid; justify-items: center; gap: 26px; }
.closing__mark { height: 150px; margin-bottom: 8px; --speed: .7; --fill-at: 1s; --guides-out: 1.4s; }
.closing__mark svg { height: 100%; width: auto; }
.closing__line { max-width: 16ch; }
.closing__note { max-width: 32rem; }
.closing__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 32px; margin-top: 10px; }

/* ---------- About ---------- */

.split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(20px, 4vw, 64px); }
.split__label { padding-top: .9em; }
.split__body > * + * { margin-top: clamp(28px, 4vw, 48px); }
.cols { columns: 2; column-gap: clamp(24px, 4vw, 56px); color: var(--slate); }
.cols p { break-inside: avoid; margin-bottom: 1em; }

.mission { text-align: center; border-block: 1px solid var(--rule); background: rgba(245, 242, 236, .4); }
.mission__inner { display: grid; justify-items: center; gap: 24px; }
/* The mark under a section label: About's mission and home's Who we are */
.mission__mark { width: 30px; height: auto; fill: var(--ink); opacity: .85; }
.mission__line { font: 400 clamp(2rem, 4.4vw, 4rem)/1.08 var(--serif); letter-spacing: -.012em; max-width: 22ch; text-wrap: balance; }
.mission__note { max-width: 36rem; color: var(--muted); }

.goals__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.goal { position: relative; padding-top: 8px; }
.goal__art { position: relative; height: 230px; margin-bottom: 28px; display: flex; justify-content: flex-start; --speed: .8; --fill-at: 1s; --guides-out: 1.6s; }
.goal__art svg { height: 100%; width: auto; }
.goal__num { font: italic 400 1.5rem/1 var(--accent); color: var(--muted); }
.goal__title { font: 400 clamp(1.5rem, 2vw, 1.9rem)/1.15 var(--serif); margin: .45em 0 .55em; }
.goal p:last-child { color: var(--slate); }

.founders__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 7vw, 120px); }
.founder { display: grid; gap: 36px; align-content: start; }
.portrait { position: relative; width: min(100%, 460px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: #DDD5C7; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait__empty {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 18px;
  background: repeating-linear-gradient(-45deg, transparent 0 11px, rgba(43, 42, 40, .07) 11px 12px);
}
.portrait__mark { width: 46px; height: auto; fill: var(--weathered); }
.founder__name { font: 400 clamp(2rem, 3.4vw, 3rem)/1.05 var(--serif); margin: .3em 0 .7em; }
.founder__body > p:not(.label) { color: var(--slate); margin-bottom: 1em; max-width: 34rem; }
.founder__body .socials { margin-top: 28px; }

.socials--row { display: flex; flex-wrap: wrap; gap: 8px; }
.socials--row a {
  display: inline-flex; align-items: center; gap: 8px;
  font: 400 .88rem/1 var(--sans);
  padding: 10px 14px 10px 12px; border: 1px solid var(--rule); border-radius: 999px;
  transition: color .25s, border-color .25s, background-color .25s;
}
.socials--row a:hover { color: var(--ivy-deep); border-color: var(--ivy-deep); background: rgba(221, 230, 208, .4); }
/* Icons alone, in rings, on one line */
.socials--round { display: flex; flex-wrap: nowrap; gap: 10px; }
.socials--round a { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border: 1px solid var(--rule); border-radius: 50%; transition: color .25s, border-color .25s, background-color .25s; }
.socials--round a:hover { color: var(--ivy-deep); border-color: var(--ivy-deep); background: rgba(221, 230, 208, .4); }
.socials--round span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.socials--list { display: grid; gap: 10px; }
.socials--list a { display: inline-flex; align-items: center; gap: 10px; }

/* ---------- Portfolio ---------- */

.panels { position: relative; }
/* Panels fill the screen with the browser's bars hidden (lvh), so no sliver of the next one
   shows when iOS Safari shrinks its bars; --bars keeps the content above the bars when shown */
.panel { --bars: 0px; --bars: calc(100lvh - 100svh); position: sticky; top: 0; height: 100vh; height: 100lvh; min-height: 520px; overflow: hidden; background: #1f1d1a; }
/* One project per scroll: the page snaps from panel to panel, then to the footer */
html:has(.page-portfolio) { scroll-snap-type: y mandatory; }
/* The panels are sticky, so they can't be snap points themselves: a stop sits where each one arrives */
.panels__stop { position: absolute; left: 0; width: 1px; height: 1px; top: calc(var(--i) * max(100vh, 520px)); top: calc(var(--i) * max(100lvh, 520px)); scroll-snap-align: start; scroll-snap-stop: always; pointer-events: none; }
/* The last stop shows all of Work with us below the floating nav; the footer is one more scroll */
.page-portfolio .sheet { scroll-snap-align: start; scroll-margin-top: var(--nav-h); }
.page-portfolio .closing { padding-block: clamp(16px, 2vw, 32px) clamp(40px, 6vw, 72px); }
.page-portfolio .footer { scroll-snap-align: end; }
.panel__link { position: relative; display: block; height: 100%; color: var(--marble); isolation: isolate; }
.panel__media { position: absolute; inset: 0; z-index: -1; }
.panel__ambient { display: none; }
.panel__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.02 + var(--pp, 0) * .05)); transition: transform .8s var(--ease-out); }
.panel__link:hover .panel__media img { transform: scale(calc(1.05 + var(--pp, 0) * .05)); }
.panel__link::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(20, 18, 15, .46) 0%, rgba(20, 18, 15, 0) 30%, rgba(20, 18, 15, 0) 52%, rgba(20, 18, 15, .7) 100%),
    rgba(20, 18, 15, calc(var(--pp, 0) * .6));
}
.panel__info .panels__heading { color: var(--marble); margin-bottom: 14px; }
.panel__info { position: absolute; left: 0; right: 0; bottom: calc(clamp(28px, 6vh, 64px) + var(--bars)); margin-inline: auto; padding-right: calc(var(--gutter) + 220px); }
.panel__info .label { color: rgba(245, 242, 236, .75); }
.panel__title { font: 400 clamp(2.2rem, 5.2vw, 4.8rem)/1.02 var(--serif); letter-spacing: -.012em; margin: .25em 0 .35em; max-width: 18ch; text-wrap: balance; }
.panel__title em { font-family: var(--accent); font-style: italic; color: rgba(245, 242, 236, .8); }
.panel__roles { font: 400 1rem var(--sans); color: rgba(245, 242, 236, .82); }
.panel__cta { position: absolute; right: var(--gutter); bottom: calc(clamp(28px, 6vh, 64px) + var(--bars)); }

.index__list { border-top: 1px solid var(--rule); }
.index__list a {
  display: grid; grid-template-columns: 4rem minmax(0, 1fr) minmax(0, .8fr) 4rem; gap: 20px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--rule);
  transition: color .25s, padding .35s var(--ease);
}
.index__title { font: 400 clamp(1.3rem, 2.2vw, 1.9rem)/1.15 var(--serif); }
.index__roles { font: 400 .95rem var(--sans); color: var(--muted); }
.index__list a > .label:last-child { text-align: right; }
.index__list a:hover { color: var(--ivy-deep); padding-left: 10px; }
.preview { position: fixed; z-index: 40; left: 0; top: 0; width: 300px; aspect-ratio: 16 / 10; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.96); transition: opacity .22s var(--ease), transform .22s var(--ease); border-radius: 2px; overflow: hidden; box-shadow: 0 20px 50px -20px rgba(24, 21, 17, .5); }
.preview img { width: 100%; height: 100%; object-fit: cover; }
.preview.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ---------- Project ---------- */

.project { padding-top: calc(var(--nav-h) + 12px); }
/* Shaped like its film (--ar), and never taller than the screen */
.player { --ar: 16 / 9; --room: calc(100svh - var(--nav-h) - 40px); position: relative; aspect-ratio: var(--ar); width: min(100%, calc(var(--room) * var(--ar))); transition: aspect-ratio .3s var(--ease-out), width .3s var(--ease-out); margin-inline: auto; overflow: hidden; background: #1f1d1a; border-radius: 3px; color: var(--marble); isolation: isolate; }
.player__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform .9s var(--ease-out), opacity .35s; }
.player__poster[aria-hidden] { opacity: 0; }
.player::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgba(20, 18, 15, .05), rgba(20, 18, 15, .45)); transition: opacity .35s; }
.player:hover .player__poster { transform: scale(1.02); }
.player__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 28px 18px 22px; border-radius: 999px;
  font: 500 1rem/1 var(--sans); letter-spacing: .03em;
  transition: background-color .3s var(--ease), transform .35s var(--ease-out);
}
.player__play:hover { background: rgba(245, 242, 236, .26); transform: translate(-50%, -50%) scale(1.03); }
.play { width: 22px; height: 22px; fill: currentColor; }
.player__caption { position: absolute; left: 22px; right: 22px; bottom: 18px; display: flex; justify-content: space-between; color: rgba(245, 242, 236, .8); }
.player iframe, .player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; background: #000; }
.player.is-playing .player__play, .player.is-playing .player__caption { opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .player:not(.is-playing) { cursor: pointer; }
}
/* Quality picker over a streamed film: shows while the pointer is on the player */
.quality { position: absolute; top: 14px; right: 14px; z-index: 3; opacity: 0; transition: opacity .25s; }
.player:hover .quality, .quality:focus-within { opacity: 1; }
.quality__toggle { padding: 9px 14px; border-radius: 999px; color: var(--marble); transition: background-color .25s; }
.quality__toggle:hover { background: rgba(245, 242, 236, .26); }
.quality__menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 120px; margin: 0; padding: 6px; list-style: none; border-radius: 10px; }
.quality__menu button { display: flex; width: 100%; padding: 8px 12px; border-radius: 6px; font: 400 .9rem/1 var(--sans); color: rgba(245, 242, 236, .8); text-align: left; }
.quality__menu button:hover { background: rgba(245, 242, 236, .12); color: var(--marble); }
.quality__menu button[aria-checked="true"] { color: var(--marble); }
.quality__menu button[aria-checked="true"]::after { content: "✓"; margin-left: auto; }
.back:not(.link) { display: inline-flex; align-items: center; gap: .7em; margin-bottom: 16px; font: 500 .9rem/1 var(--sans); letter-spacing: .02em; color: var(--muted); transition: color .25s; }
.back:not(.link):hover { color: var(--ivy-deep); }
.project__back { padding-top: clamp(48px, 6vw, 80px); }
.project .section.closing { padding-bottom: clamp(80px, 13vw, 180px); }

/* Other projects at the foot of a project: up to three across, then a sideways scroll */
.more__strip {
  --gap: clamp(12px, 1.6vw, 24px);
  display: grid; grid-auto-flow: column; gap: var(--gap);
  grid-auto-columns: calc((100% - (var(--n) - 1) * var(--gap)) / var(--n));
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.more__strip::-webkit-scrollbar { display: none; }
.more .tile { aspect-ratio: 4 / 3.3; scroll-snap-align: start; }
.more__strip[style="--n: 3"] .tile { aspect-ratio: 4 / 4.6; }
.more .tile__info { right: 22px; bottom: 84px; }
.more .tile .chip { left: clamp(18px, 2.4vw, 32px); right: auto; }
.player__list { display: flex; flex-wrap: wrap; gap: 6px 28px; margin-top: 18px; }
.player__list button { display: inline-flex; align-items: baseline; gap: 10px; padding: 8px 0; font: 400 .98rem var(--sans); color: var(--muted); border-bottom: 1px solid transparent; transition: color .25s, border-color .25s; }
.player__list button[aria-selected="true"] { color: var(--ink); border-color: var(--ivy-deep); }
.player__list button:hover { color: var(--ivy-deep); }

.project__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: end; padding-block: clamp(56px, 8vw, 110px) clamp(40px, 6vw, 80px); border-bottom: 1px solid var(--rule); }
.project__title { font: 400 clamp(2.6rem, 6vw, 5.6rem)/1 var(--serif); letter-spacing: -.016em; margin-top: .3em; text-wrap: balance; }
.project__title em { display: block; font: italic 400 .5em/1.2 var(--accent); color: var(--muted); margin-top: .25em; letter-spacing: 0; }
.meta { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
.meta dd { font: 400 1.05rem/1.35 var(--sans); margin-top: 6px; }
.project__text { padding-block: clamp(56px, 8vw, 110px) 0; }
.project .section { padding-block: clamp(64px, 9vw, 130px) 0; }
.project .credits { padding-block: clamp(64px, 9vw, 130px) 0; }

.grabs__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); }
.grab { position: relative; }
.grab button { display: block; width: 100%; overflow: hidden; border-radius: 2px; background: #1f1d1a; cursor: zoom-in; }
.grab img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.grab button:hover img { transform: scale(1.035); }
.grab figcaption { margin-top: 10px; }
.grab--scope { grid-column: span 6; }
.grab--scope button { aspect-ratio: 2.39 / 1; }
.grab--half { grid-column: span 3; }
.grab--half button { aspect-ratio: 16 / 9; }
.grab--third { grid-column: span 2; }
.grab--third button { aspect-ratio: 4 / 5; }

.bts__strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(74vw, 560px); gap: clamp(12px, 1.6vw, 22px);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 4px max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))) 18px;
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  scrollbar-width: thin; scrollbar-color: var(--weathered) transparent;
}
.bts__item { scroll-snap-align: start; }
.bts__item button { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; cursor: zoom-in; }
.bts__item img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); transition: transform .7s var(--ease-out); }
.bts__item button:hover img { transform: scale(1.03); }
.bts__item figcaption { display: flex; gap: 12px; align-items: baseline; margin-top: 12px; font-size: 1rem; color: var(--slate); }

.bits__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); align-items: stretch; }
.bit__media { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 2px; background: #1f1d1a; }
.bit__media img { width: 100%; height: 100%; object-fit: cover; }
.bit__play { position: absolute; left: 14px; bottom: 14px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 999px; }
.bit__play .play { width: 16px; height: 16px; }
.bit figcaption { margin-top: 10px; }
.bit--quote, .bit--notes { border: 1px solid var(--rule); border-radius: 2px; padding: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; background: rgba(245, 242, 236, .45); }
.bit--quote p { font: italic 400 clamp(1.3rem, 1.9vw, 1.7rem)/1.3 var(--accent); color: var(--slate); }
.bit--quote p::before { content: "“"; display: block; font-size: 3rem; line-height: .6; color: var(--ivy-line-0); margin-bottom: .2em; }
.bit--notes ul { display: grid; gap: 14px; }
.bit--notes li { display: grid; gap: 4px; font: 400 1rem var(--sans); border-top: 1px solid var(--rule); padding-top: 12px; }

.credits { padding-top: 0; }
.credits__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); border-top: 1px solid var(--rule); }
.credits__list div { padding: 18px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 6px; }
.credits__list dd { font: 400 1.15rem var(--serif); }


.lightbox { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; border: 0; padding: 4vh 4vw; background: rgba(24, 21, 17, .94); display: none; place-items: center; }
.lightbox[open] { display: grid; animation: la-fade-in .4s var(--ease) both; opacity: 0; }
.lightbox::backdrop { background: transparent; }
.lightbox img { max-width: 100%; max-height: 92vh; object-fit: contain; }
.lightbox__close { position: fixed; top: 20px; right: 20px; padding: 12px 18px; border-radius: 999px; font: 500 .85rem var(--sans); }

/* ---------- Blog ---------- */

.posts { max-width: 1100px; margin-inline: auto; border-top: 1px solid var(--rule); }
.posts li { border-bottom: 1px solid var(--rule); }
.post-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); padding: clamp(32px, 4.5vw, 56px) 0; align-items: center; }
.post-row__media { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 2px; background: var(--sandstone); }
.post-row__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); transition: transform .7s var(--ease-out), filter .35s; }
.post-row:hover .post-row__media img { transform: scale(1.04); filter: saturate(1); }
.post-row__title { font: 400 clamp(1.8rem, 3.2vw, 2.8rem)/1.08 var(--serif); margin: .3em 0 .35em; transition: color .25s; text-wrap: balance; }
.post-row:hover .post-row__title { color: var(--ivy-deep); }
.post-row__deck { color: var(--slate); max-width: 34rem; }
.post-row__meta { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; }

.post { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 40rem) minmax(0, 1fr); }
.post > * { grid-column: 2; }
.post__margin { grid-column: 1; grid-row: 1 / span 2; justify-self: end; width: clamp(40px, 9vw, 120px); margin-right: clamp(12px, 3vw, 48px); pointer-events: none; }

.prose { max-width: 36rem; width: 100%; margin-inline: auto; font: 400 1.24rem/1.72 var(--serif); color: #33312D; hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; }
.prose > * + * { margin-top: 1.1em; }
.prose > p:first-child::first-letter {
  float: left;
  font: 400 4.25em/.8 var(--serif);
  padding: .07em .07em 0 0;
  color: var(--charcoal);
}
.prose h2 { font: 400 1.85rem/1.15 var(--serif); margin-top: 2em; color: var(--charcoal); letter-spacing: -.005em; }
.prose h2 + p { margin-top: .7em; }
.prose blockquote { margin: 1.8em 0; padding-left: 1.2em; border-left: 1px solid var(--ivy-line-0); }
.prose blockquote p { font: italic 400 1.55rem/1.4 var(--accent); color: var(--slate); }
.prose figure { margin: 2.2em -8%; }
.prose figure img { width: 100%; border-radius: 1px; }
.prose figcaption { font: 500 .7rem/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 12px; text-align: center; }
.prose ol, .prose ul { padding-left: 1.3em; }
.prose ol { list-style: decimal; }
.prose ul { list-style: none; }
.prose ul li { position: relative; }
.prose ul li::before { content: ""; position: absolute; left: -1.1em; top: .72em; width: .42em; height: 1px; background: var(--ivy-stem); }
.prose li + li { margin-top: .35em; }
.prose li::marker { font: 500 .8em var(--mono); color: var(--muted); }
.prose a { color: var(--ivy-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }

.post__end { max-width: 36rem; margin: clamp(48px, 6vw, 72px) auto 0; display: grid; justify-items: center; gap: 44px; }
.post__fleuron svg { width: 18px; height: auto; fill: var(--charcoal); }
.post__pager { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; border-top: 1px solid var(--rule); padding-top: 26px; }
.post__pager a { display: grid; gap: 6px; font: 400 1.2rem/1.25 var(--serif); transition: color .25s; }
.post__pager a:hover { color: var(--ivy-deep); }
.post__pager .post__next { text-align: right; justify-items: end; }

/* ---------- Contact ---------- */

.contact { position: relative; min-height: 100vh; min-height: 100svh; color: var(--marble); background: #2a2723; isolation: isolate; overflow: hidden; }
.contact__media { position: absolute; inset: 0; z-index: -2; }
.contact__media img { width: 100%; height: 100%; object-fit: cover; }
.contact::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(24, 21, 17, .72) 0%, rgba(24, 21, 17, .42) 55%, rgba(24, 21, 17, .3) 100%);
}
.contact__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: clamp(32px, 6vw, 110px); align-items: center;
  min-height: 100vh; min-height: 100svh;
  padding-block: calc(var(--nav-h) + 24px) 40px;
}
.contact__intro .display { margin: .25em 0 .4em; }
.contact__intro .label { color: rgba(245, 242, 236, .72); }
.contact__intro .lead { color: rgba(245, 242, 236, .86); max-width: 32rem; }

/* The form sits on a pane of smoked glass over the photograph */
.glass-panel {
  background: rgba(24, 21, 17, .38);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(245, 242, 236, .16);
  border-radius: 22px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
  color: var(--marble);
}
.form { display: grid; gap: 18px; padding: clamp(22px, 3vw, 36px); }
.field { position: relative; border: 0; }
.field input, .field textarea, .field select {
  width: 100%; display: block;
  font: 400 1.2rem/1.4 var(--serif); color: var(--ink);
  padding: 24px 0 8px;
  background: transparent; border: 0; border-bottom: 1px solid rgba(43, 42, 40, .3); border-radius: 0;
  outline: none;
  transition: border-color .25s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.field textarea { resize: vertical; min-height: 96px; }
.field select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232B2A28' stroke-width='1.2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; background-size: 12px; padding-right: 28px; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ivy-deep); }
.field > label, .field > legend {
  position: absolute; left: 0; top: 28px;
  font: 400 1rem/1 var(--sans); color: var(--muted);
  transform-origin: left top;
  transition: transform .28s var(--ease), color .25s;
  pointer-events: none;
}
.field > label span { opacity: .7; }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field label.is-static { transform: translateY(-24px) scale(.82); }
.field input:focus + label, .field textarea:focus + label { color: var(--ivy-deep); }
.field.is-invalid input, .field.is-invalid textarea { border-color: #9A5B45; }
.field--chips legend { position: static; margin-bottom: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-check { position: relative; cursor: pointer; }
.chip-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-check span {
  display: inline-block;
  font: 400 .88rem/1 var(--sans);
  padding: 9px 14px; border-radius: 999px;
  border: 1px solid rgba(43, 42, 40, .28);
  transition: background-color .25s var(--ease), border-color .25s, color .25s;
}
.chip-check:hover span { border-color: var(--ivy-deep); }
.chip-check input:checked + span { background: var(--ivy-wash); border-color: var(--ivy-deep); color: var(--ivy-deep); }
.chip-check input:focus-visible + span { outline: 2px solid var(--ivy-deep); outline-offset: 2px; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 6px; }
.form__status { min-height: 1.5em; }
/* Spam trap: hidden from people, filled in by bots */
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* On the smoked glass the form's lines and type go light */
.glass-panel .field input, .glass-panel .field textarea, .glass-panel .field select { color: var(--marble); border-color: rgba(245, 242, 236, .3); }
.glass-panel .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23F5F2EC' stroke-width='1.2'/%3E%3C/svg%3E"); }
.glass-panel .field select option { color: var(--ink); }
.glass-panel .field input:focus, .glass-panel .field textarea:focus, .glass-panel .field select:focus { border-color: var(--ivy-fill-0); }
.glass-panel .field > label, .glass-panel .field > legend { color: rgba(245, 242, 236, .66); }
.glass-panel .field input:focus + label, .glass-panel .field textarea:focus + label { color: var(--ivy-fill-0); }
.glass-panel .field.is-invalid input, .glass-panel .field.is-invalid textarea { border-color: #D9967C; }
.glass-panel .chip-check span { border-color: rgba(245, 242, 236, .3); }
.glass-panel .chip-check:hover span { border-color: var(--marble); }
.glass-panel .chip-check input:checked + span { background: rgba(181, 203, 155, .22); border-color: var(--ivy-fill-0); color: var(--marble); }
.glass-panel .chip-check input:focus-visible + span { outline-color: var(--ivy-fill-0); }
.glass-panel .button { background: var(--marble); color: var(--charcoal); }
.glass-panel .button:hover { background: var(--ivy-wash); }
.glass-panel .form__status { color: rgba(245, 242, 236, .72); }
.glass-panel :focus-visible { outline-color: var(--ivy-fill-0); }
.contact__details { margin-top: clamp(32px, 4vw, 48px); padding-top: 24px; border-top: 1px solid rgba(245, 242, 236, .24); display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.contact__details > div:last-child { grid-column: 1 / -1; }
.contact__details .label { margin-bottom: 8px; }
.contact__details a:not(.socials a) { font: 400 1.15rem var(--serif); border-bottom: 1px solid rgba(245, 242, 236, .3); transition: border-color .25s; }
.contact__details a:not(.socials a):hover { border-color: var(--marble); }
.contact .socials--row a { border-color: rgba(245, 242, 236, .3); }
.contact .socials--row a:hover { color: var(--marble); border-color: var(--marble); background: rgba(245, 242, 236, .12); }

/* ---------- 404 ---------- */

.lost { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; padding-top: calc(var(--nav-h) + 40px); padding-bottom: 80px; }
.lost__art { position: relative; --speed: .6; --fill-at: 1.4s; --guides-out: 2.2s; }
.lost__art svg { width: 100%; height: auto; }
.lost__copy .display { margin: .3em 0 .5em; }
.lost__copy .button { margin-top: 32px; }

/* ---------- Footer ---------- */

.footer { position: relative; z-index: 2; background: var(--bg) var(--grain); border-top: 1px solid var(--rule); }
.footer__inner { padding-block: clamp(36px, 4vw, 52px) 28px; }
.footer__top { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; padding-bottom: clamp(28px, 3vw, 40px); }
.footer__brand { display: flex; align-items: center; gap: 12px; color: var(--charcoal); }
.footer__brand svg { fill: currentColor; width: auto; }
.footer__mark { height: 28px; }
.footer__word { height: 9px; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 6px 28px; font: 400 .95rem/1 var(--sans); }
.footer__nav a { color: var(--slate); transition: color .25s; }
.footer__nav a:hover { color: var(--ivy-deep); }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--rule); }
.socials--icons { display: flex; gap: 2px; margin-right: -8px; }
.socials--icons a { display: grid; place-items: center; padding: 8px; color: var(--granite); transition: color .25s; }
.socials--icons a:hover { color: var(--ivy-deep); }
.socials--icons span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Reveal ---------- */

.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: var(--rd, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Small screens ---------- */

@media (max-width: 1000px) {
  .pillar { grid-template-columns: 1fr; }
  .pillar__art { position: relative; top: 0; height: 78svh; margin-top: 10vh; }
  .pillar__copy { gap: 72px; padding-block: 48px 120px; }
  /* Small screens: the example scrolls with the section, behind the heading and the glass list */
  .services::after { background: rgba(24, 21, 17, .5); }
  .services__inner { grid-template-columns: 1fr; min-height: 0; padding-block: clamp(80px, 14vw, 120px); }
  .services__intro { display: contents; }
  .services__list { order: 1; }
  .services__examples { order: 2; margin-top: 0; }
  .goals__list { grid-template-columns: 1fr; }
  .goal { display: grid; grid-template-columns: 110px minmax(0, 1fr); column-gap: 24px; }
  .goal__art { grid-row: span 3; height: 210px; margin: 0; }
  .founders__grid { grid-template-columns: 1fr; }
  /* Small screens: one page over the photo, like desktop. The photo is pinned
     to the screen (clipped to the section) so it stays sharp and sensibly
     cropped while the heading, form and details scroll over it */
  .contact { clip-path: inset(0); }
  .contact__media { position: fixed; }
  .contact::after { background: rgba(24, 21, 17, .5); }
  .contact__inner { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding-block: calc(var(--nav-h) + 48px) 56px; }
  .contact__intro { display: contents; }
  .contact .form { order: 1; margin-top: 36px; padding: 24px 20px 28px; }
  .contact__details { order: 2; margin-top: 40px; }
  .post { grid-template-columns: minmax(0, 1fr); }
  .post__margin { display: none; }
  .project__head { grid-template-columns: 1fr; }
  .bits__grid { grid-template-columns: 1fr 1fr; }
  .lost { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  :root { --nav-h: 76px; }
  .nav { padding-top: 12px; }
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .nav.is-pill .nav__bar { padding: 0 4px 0 18px; }
  .split { grid-template-columns: 1fr; }
  .split__label { padding-top: 0; }
  .cols { columns: 1; }
  .work__grid { grid-template-columns: 1fr; }
  .more__strip { grid-auto-columns: 80%; }
  /* The title is right below and the films are listed under the player, so keep the still clear */
  .player__caption { display: none; }
  .page-portfolio .closing__mark { height: 100px; }
  .tile, .tile--wide { aspect-ratio: 4 / 4.4; }
  .tile__info { right: 22px; bottom: 84px; }
  .tile .chip { left: 18px; right: auto; }
  .section__head { flex-direction: column; align-items: flex-start; }
  .service__items { grid-template-columns: 1fr; }
  /* Phones: the still is shown whole, like a frame of film, with the title
     beneath it and a blurred wash of the same image filling the screen */
  .panel__link { display: flex; flex-direction: column; justify-content: center; padding: var(--nav-h) 0 calc(clamp(24px, 4vh, 40px) + var(--bars)); }
  .panel__ambient { display: block; position: absolute; inset: -60px; width: calc(100% + 120px); height: calc(100% + 120px); max-width: none; object-fit: cover; z-index: -2; filter: blur(36px) saturate(1.15) brightness(.5); }
  .panel__link::after { background: linear-gradient(180deg, rgba(20, 18, 15, .35) 0%, rgba(20, 18, 15, .1) 40%, rgba(20, 18, 15, .45) 100%), rgba(20, 18, 15, calc(var(--pp, 0) * .6)); }
  .panel__media { position: relative; inset: auto; z-index: 0; flex: none; overflow: hidden; margin-bottom: 26px; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .7); }
  .panel__media img { height: auto; }
  .panel__info { position: static; padding-right: var(--gutter); }
  .panel__title { font-size: clamp(1.9rem, 8.4vw, 2.4rem); }
  .panel__cta { position: static; align-self: flex-start; margin: 22px var(--gutter) 0; }
  .index__list a { grid-template-columns: 2.6rem minmax(0, 1fr) 3rem; }
  .index__roles { display: none; }
  .grab--half, .grab--third { grid-column: span 6; }
  .grab--third button { aspect-ratio: 4 / 4.4; }
  .grab--scope button { aspect-ratio: 16 / 9; }
  .meta { grid-template-columns: 1fr 1fr; }
  .credits__list { grid-template-columns: 1fr; }
  .post-row { grid-template-columns: 1fr; }
  .prose { font-size: 1.16rem; }
  .prose figure { margin-inline: 0; }
  .contact__details { grid-template-columns: 1fr; }
  .footer__slogan { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .js [data-draw] .la-guides path, .js [data-draw] .la-ink path, .js [data-draw] .la-hatch path { stroke-dashoffset: 0; }
  .js [data-draw] .la-fill, .js [data-draw] .la-labels { opacity: 1; }
  .js .reveal { opacity: 1; transform: none; }
  .hero__media, .panel__media img { transform: none !important; }
}