/* styles/tokens.css */
/* Design tokens. The only file allowed to contain colour literals. */
:root {
  /* Palette */
  --ink: #111110;
  --paper: #F7F6F3;
  --ash: #9A978F;
  --line: rgba(247, 246, 243, .14);
  --signal: #FF5A1F;

  /* Surface roles: light by default; .is-alt and .is-dark (layout.css) swap them */
  --bg: #F7F6F3;
  --surface: #FFFFFF;
  --bg-alt: #EFEDE8;
  --bg-alt-veil: rgba(239, 237, 232, .82); /* --bg-alt over the 3D background */
  --fg: #111110;
  --muted: #66645F;
  --rule: rgba(17, 17, 16, .10);
  --shadow-frame: 0 1px 2px rgba(17, 17, 16, .06), 0 24px 60px -24px rgba(17, 17, 16, .18);

  /* Type */
  --font-display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, Menlo, Consolas, monospace;

  --fs-mega: clamp(4.5rem, 15vw, 17rem);
  --fs-display: clamp(3.25rem, 9vw, 10rem);
  --fs-h1: clamp(2.75rem, 6vw, 6.5rem);
  --fs-h2: clamp(2.125rem, 4.2vw, 4.25rem);
  --fs-h3: clamp(1.375rem, 2vw, 2rem);
  --fs-lead: clamp(1.25rem, 1.6vw, 1.625rem);
  --fs-body: clamp(1.0625rem, .25vw + 1rem, 1.125rem);
  --fs-small: .9375rem;
  --fs-label: .75rem;

  --lh-display: .9;
  --lh-heading: 1.05;
  --lh-body: 1.55;
  --tracking-display: -.035em;
  --tracking-wordmark: -.04em;
  --tracking-label: .08em;

  /* Grid and spacing */
  --gutter: 16px;
  --max: 1760px;
  --section-pad: clamp(112px, 15vw, 240px);
  --space-xs: .5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  --nav-h: 72px;

  /* Shape */
  --radius-s: 6px;
  --radius-frame: 12px;
  --radius-phone: 36px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.87, 0, .13, 1);
  --dur-fast: .25s;
  --dur: .6s;
  /* The two-beat step for CSS hovers: half the way, hold, the rest. */
  --ease-step: linear(0, .006 10%, .027 15%, .131 20%, .282 22.5%, .401 25%, .479 30%, .5 40%, .5 57.5%, .521 70%, .599 75%, .718 77.5%, .869 80%, .973 85%, 1 97.5%);
  --dur-step: .7s;

  /* Layers */
  --z-scene: -1;
  --z-nav: 50;
  --z-menu: 45;
  --z-curtain: 90;
  --z-preloader: 100;
  --z-cursor: 110;
}

@media (min-width: 768px) {
  :root { --gutter: 24px; }
}

@media (min-width: 1440px) {
  :root { --gutter: 32px; }
}

/* styles/base.css */
/* Reset, type defaults, focus, selection and the reveal start states. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: light;
  scroll-padding-top: var(--nav-h);
}

body {
  min-height: 100vh;
  overflow-x: clip;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 650;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  overflow-wrap: break-word; /* a word too long for a phone breaks instead of pushing the page sideways */
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p {
  text-wrap: pretty;
}

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

::selection {
  background: var(--signal);
  color: var(--ink);
}

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

.skip-link {
  position: fixed;
  top: var(--space-s);
  left: var(--space-s);
  z-index: calc(var(--z-preloader) + 1);
  padding: .75rem 1.25rem;
  background: var(--signal);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

/* Reveal start states: only with JS and when motion is welcome. reveal.js drops data-reveal when done. */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal="lines"] {
    visibility: hidden;
  }

  html.js [data-reveal="fade"] {
    opacity: 0;
    transform: translateY(24px);
  }

  html.js [data-reveal="image"] {
    clip-path: inset(100% 0% 0% 0%);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* styles/layout.css */
/* Container, 12-column grid, sections and the alternate and dark section modifiers. */
.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

/* Transparent, so the 3D background shows through. */
.section {
  position: relative;
  padding-block: var(--section-pad);
  color: var(--fg);
}

/* Alternate section background for rhythm, as a translucent veil. Components read the role tokens, so they follow along. */
.is-alt {
  --bg: var(--bg-alt);
  background: var(--bg-alt-veil);
}

/* Ink background, paper text: the footer only. */
.is-dark {
  --bg: var(--ink);
  --surface: var(--ink);
  --fg: var(--paper);
  --muted: var(--ash);
  --rule: var(--line);
  background: var(--bg);
  color: var(--fg);
  color-scheme: dark;
}

main {
  display: block;
}

/* styles/components.css */
/* Shared components: .btn, .label, .link, .pill, .rule, .media, .accordion, .tag. */

/* Button: a black pill. The hover fill moves in two beats (half, hold, rest), the brand's step motif. */
.btn {
  --btn-bg: var(--fg);
  --btn-fg: var(--bg);
  --btn-fill: var(--signal);
  --btn-fill-fg: var(--fg);
  --btn-border: var(--fg);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  min-height: 3.25rem;
  padding: .875rem 1.625rem;
  overflow: hidden;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out) .3s, border-color var(--dur-fast) var(--ease-out);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-fill);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease-out);
}

.btn:hover,
.btn:focus-visible {
  color: var(--btn-fill-fg);
  border-color: var(--btn-fill);
}

.btn:hover::before,
.btn:focus-visible::before {
  animation: btn-step .9s forwards;
}

/* Primary: fg pill that fills with signal. Secondary: fg outline that fills with fg. */
.btn--primary {
  --btn-bg: var(--fg);
  --btn-fg: var(--bg);
  --btn-fill: var(--signal);
  --btn-fill-fg: var(--fg);
  --btn-border: var(--fg);
}

.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-fill: var(--fg);
  --btn-fill-fg: var(--bg);
  --btn-border: var(--fg);
}

.btn--sm {
  min-height: 2.75rem;
  padding: .625rem 1.125rem;
  font-size: .875rem;
}

@keyframes btn-step {
  0% { transform: scaleX(0); animation-timing-function: var(--ease-in-out); }
  44% { transform: scaleX(.5); }
  56% { transform: scaleX(.5); animation-timing-function: var(--ease-in-out); }
  100% { transform: scaleX(1); }
}

/* Mono label */
.label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}

/* Text link: the underline grows from the left. */
.link {
  position: relative;
  display: inline-block;
}

.link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.1em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease-out);
}

.link:hover::after,
.link:focus-visible::after,
.link[aria-current]::after {
  transform: scaleX(1);
}

/* Pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .375rem .875rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1.4;
}

/* Horizontal rule */
.rule {
  height: 1px;
  border: 0;
  background: var(--rule);
}

/* Media frame for screenshots: thin rule border, one soft shadow, 12px radius; .media--phone for phone frames. */
.media {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius-frame);
  background: var(--surface);
  box-shadow: var(--shadow-frame);
}

.media img,
.media video {
  width: 100%;
  height: auto;
}

.media--phone {
  border-radius: var(--radius-phone);
}

/* Accordion base, built on <details>/<summary>. */
.accordion {
  border-top: 1px solid var(--rule);
}

.accordion__item {
  border-bottom: 1px solid var(--rule);
}

.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: var(--space-m);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-heading);
}

.accordion__summary::-webkit-details-marker {
  display: none;
}

.accordion__summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 400;
  transition: transform var(--dur) var(--ease-out);
}

.accordion__item[open] > .accordion__summary::after {
  transform: rotate(45deg);
}

.accordion__body {
  padding-bottom: var(--space-l);
  max-width: 62ch;
  color: var(--muted);
}

/* Tag: small mono label with a signal dot. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1.4;
}

.tag::before {
  content: "";
  width: .4375rem;
  height: .4375rem;
  border-radius: 50%;
  background: var(--signal);
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover::before,
  .btn:focus-visible::before {
    animation: none;
    transform: scaleX(1);
  }
}

/* styles/site.css */
/* Site chrome: nav, mobile menu, footer, page-transition curtain, preloader and cursor. */

/* Wordmark (inline SVG in nav and footer) */
.wordmark {
  width: auto;
  height: 1.5rem;
}

.wordmark text {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 100, "opsz" 32;
}

/* The mark lifts a half step in two beats on hover. `translate` composes with the path's own transform attribute. */
.nav__logo .wordmark path,
.footer__logo .wordmark path {
  translate: 0 0;
}

.nav__logo:hover .wordmark path,
.nav__logo:focus-visible .wordmark path,
.footer__logo:hover .wordmark path,
.footer__logo:focus-visible .wordmark path {
  animation: wordmark-step 1.02s forwards;
}

@keyframes wordmark-step {
  0% { translate: 0 0; animation-timing-function: var(--ease-in-out); }
  44%, 56% { translate: 0 -1.5px; animation-timing-function: var(--ease-in-out); }
  100% { translate: 0 -3px; }
}

/* Nav bar: solid page colour with a hairline, so page text never shows through it while scrolling. */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-nav);
  height: var(--nav-h);
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  color: var(--fg);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-l);
  height: 100%;
}

.nav__logo {
  flex: none;
  margin-right: auto;
}

.nav__list {
  display: flex;
  gap: var(--space-l);
}

.nav__link {
  font-size: var(--fs-small);
}

/* A 44px tap area around the small nav and footer links, without moving their underline. */
.nav__link::before,
.footer__top::before {
  content: "";
  position: absolute;
  inset: -.75rem -.5rem;
}

.nav__link[aria-current] {
  color: var(--fg);
}

.nav__toggle {
  display: none;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 0 0 0 .75rem;
}

/* Small screens: with JS the links move into the Menu overlay; without JS they stay visible and wrap. */
@media (max-width: 899px) {
  html.js .nav__links,
  html.js .nav__cta {
    display: none;
  }

  html.js .nav__toggle {
    display: inline-flex;
  }

  html:not(.js) .nav {
    position: static;
    height: auto;
  }

  html:not(.js) .nav__inner {
    flex-wrap: wrap;
    gap: var(--space-s) var(--space-m);
    padding-block: var(--space-s);
  }

  html:not(.js) .nav__list {
    flex-wrap: wrap;
    gap: var(--space-s) var(--space-m);
  }
}

/* Mobile menu: a full-screen page-coloured panel with big display links, opened by menu.js. */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: none;
  padding-top: var(--nav-h);
  background: var(--bg);
  color: var(--fg);
  visibility: hidden;
  clip-path: inset(0% 0% 100% 0%);
  transition: clip-path var(--dur) var(--ease-in-out), visibility 0s var(--dur);
}

html.js .menu {
  display: block;
}

.menu.is-open {
  visibility: visible;
  clip-path: inset(0% 0% 0% 0%);
  transition: clip-path var(--dur) var(--ease-in-out), visibility 0s;
}

.menu__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-xl);
  height: 100%;
  padding-block: var(--space-l);
  overflow-y: auto;
}

.menu__link {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(3rem, 14vw, 6rem);
  font-weight: 650;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  padding-block: .06em;
}

.menu__link:hover {
  color: var(--signal);
}

/* Current page: fg text (signal text is below AA here) and a signal dot. */
.menu__link[aria-current]::after {
  content: "";
  display: inline-block;
  width: .12em;
  height: .12em;
  margin-left: .15em;
  border-radius: 50%;
  background: var(--signal);
  vertical-align: .1em;
}

.menu__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}

@media (min-width: 900px) {
  html.js .menu {
    display: none;
  }
}

html.is-menu-open {
  overflow: hidden;
}

/* Footer: the one dark surface on the site (.is-dark in footer.html sets the roles). */
.footer {
  padding-block: var(--section-pad) var(--space-l);
  background: var(--bg);
  color: var(--fg);
}

.footer__cta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-m);
  padding-bottom: var(--space-xl);
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 650;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  transition: color var(--dur) var(--ease-out);
}

.footer__cta-arrow {
  flex: none;
  transition: transform var(--dur) var(--ease-out);
}

.footer__cta:hover {
  color: var(--signal);
}

.footer__cta:hover .footer__cta-arrow {
  transform: translateX(.12em);
}

.footer__grid {
  row-gap: var(--space-l);
  padding-block: var(--space-xl);
  border-top: 1px solid var(--rule);
}

/* Full-width columns on phones, so the email fits on one line. */
.footer__brand { grid-column: 1 / -1; }
.footer__col {
  grid-column: 1 / -1;
  min-width: 0;
  overflow-wrap: break-word; /* only if a phone is narrower than the address */
}

.footer__tagline {
  margin-top: var(--space-s);
  color: var(--muted);
}

.footer__heading {
  margin-bottom: var(--space-s);
}

/* Each link is a 44px row; the underline sits under the text, not under the padding. */
.footer__list .link {
  padding-block: .5625rem;
}

.footer__list .link::after {
  bottom: calc(.5625rem - .1em);
}

@media (min-width: 768px) {
  .footer__col { grid-column: span 3; }
  .footer__col--contact { grid-column: span 5; }
  .footer__col--studio { grid-column: span 4; }
  .footer__email { white-space: nowrap; }
}

@media (min-width: 1280px) {
  .footer__brand { grid-column: span 5; }
  .footer__col { grid-column: span 2; }
  .footer__col--contact { grid-column: span 3; }
  .footer__col--studio { grid-column: span 2; }
}

.footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-s);
  padding-top: var(--space-m);
  border-top: 1px solid var(--rule);
}

/* Page-transition curtain: two panels, signal then fg. transition.js drives them. */
.curtain {
  position: fixed;
  inset: 0;
  z-index: var(--z-curtain);
  pointer-events: none;
  visibility: hidden;
}

.curtain__panel {
  position: absolute;
  inset: 0;
  clip-path: inset(100% 0% 0% 0%);
}

.curtain__panel--signal { background: var(--signal); }
.curtain__panel--ink { background: var(--fg); }

/* The next page paints covered, so the curtain hands over without a flash. */
@media (prefers-reduced-motion: no-preference) {
  html.is-entering .curtain {
    visibility: visible;
  }

  html.is-entering .curtain__panel {
    clip-path: inset(0% 0% 0% 0%);
  }
}

/* 3D background (scene.js): behind content, click-through, hidden until drawn; dims behind dense text. */
.scene {
  position: fixed;
  inset: 0;
  z-index: var(--z-scene);
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}

.scene.is-visible { opacity: 1; }
.scene.is-visible.is-dim { opacity: .35; }

/* Portrait screens set the closing staircase under the copy, in the bottom padding of the closing block or of the
   section around it (scene.js measures it). That padding grows only while the scene can play: never without JS, with
   reduced motion, or once scene.js gives up (html.no-scene). */
@media (prefers-reduced-motion: no-preference) and (orientation: portrait) {
  html.js:not(.no-scene) :is([data-scene="logo"]:not(section *), section:has([data-scene="logo"])) {
    padding-bottom: max(var(--section-pad), 32vh);
  }
}

/* Preloader: home only, first visit per session, never with reduced motion or without JS. */
.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  display: none;
  background: var(--bg);
  color: var(--fg);
}

@media (prefers-reduced-motion: no-preference) {
  html.js:not(.is-preloaded) .preloader {
    display: block;
  }
}

.preloader__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  align-items: end;
  gap: var(--space-s);
  height: 100%;
  padding-block: var(--space-l);
}

.preloader__mark {
  grid-row: 1;
  align-self: start;
  width: 1.75rem;
  color: var(--signal);
}

.preloader__label {
  grid-row: 1;
  align-self: start;
  justify-self: end;
}

.preloader__count {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: var(--fs-mega);
  font-weight: 400;
  line-height: .8;
  letter-spacing: -.06em;
  font-variant-numeric: tabular-nums;
}

/* Custom cursor (cursor.js): a dot that grows into a ring over links and reads "View" over [data-cursor="view"].
   The paper dot is difference-blended, so it shows dark on the light page and light on the dark footer. */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.cursor.is-visible {
  opacity: 1;
}

.cursor__shape {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 8px;
  height: 8px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: var(--paper);
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  transition: width var(--dur) var(--ease-out), height var(--dur) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.cursor__label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.cursor[data-state="link"] .cursor__shape {
  width: 40px;
  height: 40px;
  background: transparent;
  border-color: var(--paper);
}

.cursor[data-state="view"] .cursor__shape {
  width: 88px;
  height: 88px;
  background: var(--signal);
  mix-blend-mode: normal;
}

.cursor[data-state="view"] .cursor__label {
  opacity: 1;
}

.cursor[data-state="hidden"] .cursor__shape {
  width: 0;
  height: 0;
}

/* styles/pages/case.css */
/* Ostra case study: hero with the desktop frame, brief, design decisions, screens strip, phones, under the hood, next. */
.case-label {
  display: block;
  margin-bottom: var(--space-l);
}

.case-lead {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.case-text {
  max-width: 58ch;
  color: var(--muted);
}

.case-split {
  display: grid;
  gap: var(--space-m);
}

/* Hero */
.case-hero {
  padding-top: calc(var(--nav-h) + var(--space-xl));
  padding-bottom: var(--space-xl);
}

.case-kicker {
  margin-bottom: var(--space-m);
}

.case-title {
  font-size: var(--fs-mega);
  font-weight: 700;
}

.case-intro {
  display: grid;
  gap: var(--space-l);
  align-items: end;
  margin-top: var(--space-l);
}

.case-sub {
  max-width: 34ch;
  font-size: var(--fs-lead);
  line-height: 1.35;
}

.case-live {
  justify-self: start;
}

.case-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m) var(--gutter);
  margin-block: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--rule);
}

.case-meta-item dd {
  margin-top: .25rem;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
}

.case-frame {
  transform-origin: center top;
}

.case-frame img,
.case-shot img,
.case-strip-item img,
.case-phone img {
  width: 100%;
  height: auto;
}

/* The brief */
.case-brief-body {
  display: grid;
  gap: var(--space-m);
}

.case-brief-body .case-lead {
  margin-bottom: var(--space-s);
}

/* Design decisions */
.case-decision-list {
  display: grid;
  gap: clamp(4rem, 10vw, 9rem);
}

.case-decision {
  display: grid;
  gap: var(--space-l);
}

.case-decision-text {
  display: grid;
  gap: var(--space-m);
  align-content: start;
}

.case-decision-title {
  font-size: var(--fs-h2);
  max-width: 18ch;
}

/* Screens strip: native horizontal scroll, mouse drag added by case.js. */
.case-screens-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.case-strip {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--muted) transparent;
  cursor: grab;
}

.case-strip.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.case-strip-list {
  display: flex;
  gap: var(--gutter);
  width: max-content;
  padding-inline: var(--gutter);
  padding-bottom: var(--space-xl); /* room for the frames' shadow inside the scroller */
}

.case-strip-item {
  flex: none;
  width: min(82vw, 1080px);
}

.case-strip-item img {
  -webkit-user-drag: none;
  user-select: none;
}

/* Mobile screens: phone frames at staggered heights. */
.case-phones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
  margin-top: var(--space-xl);
}

.case-phone {
  will-change: transform;
}

.case-phone:nth-child(even) {
  margin-top: 18%;
}

/* Under the hood */
.case-hood-list {
  border-top: 1px solid var(--rule);
}

.case-hood-item {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding-block: var(--space-m);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.case-hood-item::before {
  content: "";
  flex: none;
  width: .4375rem;
  height: .4375rem;
  background: var(--fg);
}

/* Next project */
.case-next {
  display: block;
  padding-block: var(--section-pad);
  border-top: 1px solid var(--rule);
  color: var(--fg);
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

/* Hover: the alternate veil, never a dark fill (the footer is the one dark block). No fill at rest, so the closing
   staircase of the 3D background shows beside the title. */
.case-next:hover,
.case-next:focus-visible {
  background: var(--bg-alt-veil);
}

.case-next:hover .case-next-title,
.case-next:focus-visible .case-next-title {
  transform: translateX(.04em);
}

.case-next-inner {
  display: grid;
  gap: var(--space-m);
}

.case-next-title {
  font-family: var(--font-display);
  font-size: var(--fs-mega);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  transition: transform var(--dur) var(--ease-out);
}

@media (min-width: 768px) {
  .case-meta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .case-intro {
    grid-template-columns: 1fr auto;
  }

  .case-split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  .case-split > .case-label {
    grid-column: 1 / 4;
  }

  .case-split > :not(.case-label) {
    grid-column: 4 / -1;
  }

  .case-phones {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .case-phone:nth-child(even) {
    margin-top: 0;
  }

  .case-phone:nth-child(2) { margin-top: 22%; }
  .case-phone:nth-child(3) { margin-top: 8%; }
  .case-phone:nth-child(4) { margin-top: 30%; }
}

@media (min-width: 1024px) {
  .case-decision {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: start;
  }

  .case-decision-text {
    grid-column: 1 / 5;
    position: sticky;
    top: calc(var(--nav-h) + var(--space-l));
  }

  .case-shot {
    grid-column: 5 / -1;
  }

  .case-strip-item {
    width: min(64vw, 1080px);
  }
}

/* styles/pages/contact.css */
/* Contact page: headline, what happens next and the direct email on the left, the brief form on the right. */
.contact-page {
  padding-top: calc(var(--nav-h) + var(--section-pad) * .6);
}

.contact-page__label {
  margin-bottom: var(--space-l);
}

.contact-page__title {
  font-size: var(--fs-display);
  font-weight: 700;
}

/* Signal text is below AA on the light page, so the accent is an underline. */
.contact-page__accent {
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: .06em;
  text-underline-offset: .1em;
  text-decoration-skip-ink: none;
}

.contact-page__grid {
  row-gap: var(--space-xl);
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--rule);
}

/* Left column */
.contact-info {
  grid-column: 1 / -1;
  min-width: 0;
}

.contact-info__heading {
  margin-bottom: var(--space-m);
}

.contact-info__steps {
  display: grid;
  gap: var(--space-s);
  margin-bottom: var(--space-xl);
}

.contact-info__step {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--space-s);
  padding-bottom: var(--space-s);
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-lead);
  line-height: 1.35;
}

.contact-info__num {
  padding-top: .45em;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  color: var(--muted);
}

.contact-info__email {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  overflow-wrap: anywhere;
  border-bottom: 1px solid var(--rule);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.contact-info__email:hover,
.contact-info__email:focus-visible {
  color: var(--signal);
  border-color: currentColor;
}

.contact-info__where {
  margin-top: var(--space-m);
  color: var(--muted);
}

/* Form */
.contact-form {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-m);
  min-width: 0;
}

.contact-form__title {
  margin-bottom: var(--space-xs);
}

.contact-form__row {
  display: grid;
  gap: var(--space-m);
}

@media (min-width: 640px) {
  .contact-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .contact-info { grid-column: 1 / span 5; }
  .contact-form { grid-column: 7 / span 6; }
}

/* Field with a floating label: the label sits in the box, then floats up on focus or once filled. */
.contact-field {
  position: relative;
}

.contact-field__control {
  display: block;
  width: 100%;
  min-height: 3.75rem;
  padding: 1.625rem 1rem .625rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--fg);
  font-size: var(--fs-body);
  line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.contact-field__control:hover {
  border-color: var(--muted);
}

.contact-field__control:focus-visible {
  outline: none;
  border-color: var(--fg);
}

.contact-field__control[aria-invalid="true"] {
  border-color: var(--signal);
}

.contact-field--area .contact-field__control {
  min-height: 10rem;
  resize: vertical;
}

.contact-field--select .contact-field__control {
  appearance: none;
  padding-right: 2.5rem;
  cursor: pointer;
}

.contact-field--select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.125rem;
  width: .5rem;
  height: .5rem;
  border-right: 1px solid var(--muted);
  border-bottom: 1px solid var(--muted);
  transform: translateY(-75%) rotate(45deg);
  pointer-events: none;
}

.contact-field__label {
  position: absolute;
  top: 1.125rem;
  left: 1rem;
  right: 1rem;
  overflow: hidden;
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  transform-origin: left top;
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.contact-field__control:focus + .contact-field__label,
.contact-field__control:not(:placeholder-shown) + .contact-field__label,
.contact-field--select .contact-field__label {
  transform: translateY(-.625rem) scale(.75);
}

.contact-field__control:focus + .contact-field__label {
  color: var(--fg);
}

.contact-field__error {
  margin-top: var(--space-xs);
  color: var(--fg);
  font-size: var(--fs-small);
}

.contact-field__error::before {
  content: "";
  display: inline-block;
  width: .4375rem;
  height: .4375rem;
  margin-right: .5rem;
  border-radius: 50%;
  background: var(--signal);
  vertical-align: .1em;
}

.contact-field__error[hidden] {
  display: none;
}

.contact-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-m);
  margin-top: var(--space-xs);
}

.contact-form__hint {
  color: var(--muted);
  font-size: var(--fs-small);
}

.contact-form__submit:disabled {
  cursor: progress;
}

/* Loading: two small risers, the first half the height of the second, rise in turn. */
.contact-form__beats {
  display: none;
  align-items: flex-end;
  gap: 2px;
  height: .875rem;
}

.contact-form__beats > span {
  width: .3125rem;
  height: 100%;
  background: currentColor;
  transform-origin: bottom;
  animation: contact-beat 1.02s infinite;
}

.contact-form__beats > span:first-child {
  height: 50%;
}

.contact-form__beats > span:last-child {
  animation-name: contact-beat-second;
}

.contact-form__submit[aria-busy="true"] .contact-form__beats {
  display: inline-flex;
}

@keyframes contact-beat {
  0% { transform: scaleY(.2); animation-timing-function: var(--ease-in-out); }
  44%, 100% { transform: scaleY(1); }
}

@keyframes contact-beat-second {
  0%, 56% { transform: scaleY(.2); animation-timing-function: var(--ease-in-out); }
  100% { transform: scaleY(1); }
}

.contact-form__status {
  font-size: var(--fs-small);
}

/* Stays in the layout while empty, so screen readers keep listening to the live region. */
.contact-form__status:not(:empty) {
  padding: var(--space-s) var(--space-m);
  border: 1px solid var(--rule);
  border-radius: var(--radius-s);
  background: var(--surface);
}

.contact-form__status[data-state="error"] {
  border-color: var(--signal);
}

/* styles/pages/home-hero.css */
/* Home hero: the headline is the picture. Three lines that never rewrap, the brand mark inline after "a half step",
   then the intro, the actions and the label row. Role tokens only, so the hero follows the site theme. */
.hero-home {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  margin-top: var(--nav-h);
  overflow: hidden;
  color: var(--fg);
}

.hero-home__content {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-m) var(--space-l);
}

/* The rest state is the widest setting (the pointer only condenses the type). The widest line ("a half step" plus the
   mark) is about 5.6em, so the size is capped at the container width / 5.6; the 18svh cap keeps the three lines, the
   intro, the actions and the label row inside one screen. */
.hero-home__title {
  font-size: min(var(--fs-mega), calc((100vw - 2 * var(--gutter)) / 5.6), 18vh);
  font-size: min(var(--fs-mega), calc((100vw - 2 * var(--gutter)) / 5.6), 18svh);
  font-weight: 650;
  font-variation-settings: 'wdth' 100, 'wght' 650;
  line-height: .88;
  letter-spacing: -.04em;
  color: var(--fg);
  transform-origin: 0% 50%;
}

.hero-home__line {
  display: block;
  overflow: hidden;
  padding-bottom: .1em;
  margin-bottom: -.1em;
  white-space: nowrap;
}

.hero-home__line-inner {
  display: block;
}

/* The mark at cap height: its 18-unit tall path fills .7em, with the path's foot on the baseline. */
.hero-home__mark {
  display: inline-block;
  width: .93em;
  height: .93em;
  margin-left: .12em;
  vertical-align: -.078em;
  fill: var(--signal);
}

.hero-home__aside {
  display: grid;
  gap: var(--space-m);
  margin-top: var(--space-l);
}

.hero-home__intro {
  max-width: 34ch;
  font-size: var(--fs-lead);
  line-height: 1.35;
  color: var(--muted);
}

.hero-home__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-l);
}

.hero-home__secondary {
  font-weight: 500;
}

.hero-home__labels {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-m);
  padding-block: var(--space-s) var(--space-m);
  border-top: 1px solid var(--rule);
  list-style: none;
  color: var(--muted);
}

@media (min-width: 1024px) {
  .hero-home__aside {
    grid-template-columns: minmax(0, 34rem) auto;
    justify-content: space-between;
    align-items: end;
  }
}

/* Intro start states: only with JS and motion; home-hero.js settles the hero when it can't or won't animate. */
@media (prefers-reduced-motion: no-preference) {
  html.js .hero-home:not(.hero-home--settled) .hero-home__line-inner {
    transform: translateY(110%);
  }

  html.js .hero-home:not(.hero-home--settled) [data-hero-fade] {
    opacity: 0;
  }
}

/* styles/pages/home-inside.css */
/* 03 — What's inside: the five layers of a website.
   Without JS, on phones, with reduced motion or without WebGL: an isometric illustration and the cards as a list.
   home-inside.js adds .is-3d (the section pins to one screen and the cards track the 3D stack) and .is-ready once the
   stack has drawn, which cross-fades the illustration to the canvas. */

/* Scoped to the section: home.css (and its .home-label margin) comes later in styles.css. */
.home-inside .home-inside__label {
  margin-bottom: var(--space-m);
}

.home-inside__title {
  max-width: 18ch;
}

.home-inside__stage {
  display: grid;
  gap: var(--space-l);
  margin-top: var(--space-xl);
}

.home-inside__figure {
  width: 100%;
  max-width: 24rem;
  height: auto;
  margin-inline: auto;
}

.home-inside__canvas,
.home-inside__leaders {
  display: none;
}

.home-inside__cards {
  display: grid;
  gap: var(--space-s);
}

.home-inside__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .25rem var(--space-s);
  padding: var(--space-m);
  border: 1px solid var(--rule);
  border-radius: var(--radius-frame);
  background: var(--surface);
}

.home-inside__num {
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  line-height: 2.1;
  color: var(--muted);
}

.home-inside__name {
  font-size: 1.375rem;
  line-height: 1.2;
}

.home-inside__text {
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--muted);
}

.home-inside__close {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
}

.home-inside__close .link {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
}

@media (min-width: 900px) {
  .home-inside__stage {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: center;
  }

  .home-inside__figure {
    grid-column: 1 / span 5;
    max-width: 26rem;
  }

  .home-inside__cards { grid-column: 7 / -1; }
  .home-inside__close { grid-column: 1 / -1; }
}

/* The illustration's colours, all tokens. */
.home-inside__ink { fill: var(--fg); }
.home-inside__surface { fill: var(--surface); }
.home-inside__bg { fill: var(--bg); }
.home-inside__alt { fill: var(--bg-alt); }
.home-inside__muted { fill: var(--muted); }
.home-inside__rule { fill: var(--rule); }
.home-inside__signal { fill: var(--signal); }
.home-inside__paper { fill: var(--paper); }
.home-inside__soft { opacity: .5; }
.home-inside__glass { opacity: .55; }
.home-inside__edge { fill: var(--rule); }
.home-inside__edge-dark { fill: var(--fg); }
.home-inside__columns { fill: var(--rule); }

.home-inside__face,
.home-inside__outline {
  stroke: var(--rule);
  stroke-width: .6;
}

.home-inside__grid {
  fill: none;
  stroke: var(--paper);
  stroke-opacity: .12;
  stroke-width: .5;
}

.home-inside__curve {
  fill: none;
  stroke: var(--signal);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.home-inside__faint { stroke-opacity: .45; }

.home-inside__mono {
  font-family: var(--font-mono);
  font-size: 6.5px;
}

.home-inside__specimen {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 700;
}

/* The pinned 3D view: one screen, the heading on top and the stage below it. */
.home-inside.is-3d {
  height: 100vh;
  height: 100svh;
  padding-block: calc(var(--nav-h) + var(--space-m)) var(--space-m);
}

.home-inside.is-3d .home-inside__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.home-inside.is-3d .home-inside__title { max-width: none; }

.home-inside.is-3d .home-inside__stage {
  position: relative;
  display: block;
  flex: 1;
  min-height: 0;
  margin-top: var(--space-m);
}

.home-inside.is-3d .home-inside__figure,
.home-inside.is-3d .home-inside__canvas,
.home-inside.is-3d .home-inside__leaders {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

.home-inside.is-3d .home-inside__figure,
.home-inside.is-3d .home-inside__canvas {
  transition: opacity var(--dur) var(--ease-out);
}

.home-inside.is-3d .home-inside__canvas { opacity: 0; }
.home-inside.is-ready .home-inside__figure { opacity: 0; }
.home-inside.is-ready .home-inside__canvas { opacity: 1; }

.home-inside.is-3d .home-inside__leaders {
  overflow: visible;
  pointer-events: none;
}

.home-inside__leaders line {
  stroke: var(--fg);
  stroke-width: 1;
  opacity: 0;
}

.home-inside.is-3d .home-inside__cards { display: block; }

.home-inside.is-3d .home-inside__card {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--home-inside-card, 18rem);
  padding: var(--space-s);
  opacity: 0;
  will-change: transform, opacity;
}

.home-inside.is-3d .home-inside__close {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  opacity: var(--home-inside-close, 0);
}

.home-inside.is-3d .home-inside__close:focus-within { opacity: 1; }

/* styles/pages/home.css */
/* Home sections below the hero: statement, featured work, plans teaser, process, closing CTA.
   Every state here is readable without JS; home.js only adds motion on top (.is-pinned for the process). */

.home-label {
  display: block;
  margin-bottom: var(--space-xl);
}

/* 01 — Statement: a shorter top gap, the hero's hairline already separates the two. */
.home-statement {
  padding-top: calc(var(--section-pad) * .6);
}

.home-statement__grid {
  row-gap: var(--space-l);
}

.home-statement__grid > * {
  grid-column: 1 / -1;
}

.home-statement__text {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-display);
}

.home-statement__facts {
  align-self: end;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}

.home-statement__fact {
  padding-block: var(--space-s);
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 1024px) {
  .home-statement__text { grid-column: 1 / span 9; }
  .home-statement__facts { grid-column: 10 / -1; }
}

/* 02 — Featured work: a desktop frame with a phone overlapping its lower-right corner. */
.home-featured__frames {
  position: relative;
  display: block;
  padding-bottom: 12%;
}

/* Each frame keeps its screenshot's exact ratio and the image is never scaled, so the whole screen shows. */
.home-featured__desktop {
  width: 86%;
  aspect-ratio: 2880 / 1800;
}

.home-featured__phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 22%;
  aspect-ratio: 780 / 1688;
  box-shadow: 0 0 0 .375rem var(--bg), var(--shadow-frame);
}

.home-featured__desktop img,
.home-featured__phone img {
  height: 100%;
  object-fit: contain;
}

.home-featured__info {
  display: grid;
  gap: var(--space-m);
  margin-top: var(--space-xl);
}

.home-featured__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-s) var(--space-m);
}

.home-featured__title {
  font-size: var(--fs-h2);
}

.home-featured__line {
  max-width: 34ch;
  font-size: var(--fs-lead);
  color: var(--muted);
}

.home-featured__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
}

.home-featured__all {
  margin-top: var(--space-xl);
}

/* 03 — Plans teaser. Cards lift a half step in two beats (--ease-step). */
.home-services__plans {
  display: grid;
  gap: var(--gutter);
}

@media (min-width: 900px) {
  .home-services__plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.home-plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding: var(--space-l);
  border: 1px solid var(--rule);
  border-radius: var(--radius-frame);
  background: var(--surface);
  transition: transform var(--dur-step) var(--ease-step);
}

.home-plan:hover,
.home-plan:focus-within {
  transform: translateY(-6px);
}

/* The Studio plan: an fg border and a small signal dot after its name. */
.home-plan--featured {
  border-color: var(--fg);
}

.home-plan--featured .home-plan__name::after {
  content: "";
  display: inline-block;
  width: .4375rem;
  height: .4375rem;
  margin-left: .625rem;
  border-radius: 50%;
  background: var(--signal);
  vertical-align: .1em;
}

.home-plan__name {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}

.home-plan__price {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 650;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}

.home-plan__from {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}

.home-plan__line {
  max-width: 32ch;
}

.home-plan__points {
  margin-top: auto;
  font-size: var(--fs-small);
  color: var(--muted);
}

.home-plan__points li {
  padding-block: .625rem;
  border-top: 1px solid var(--rule);
}

.home-care {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-s);
  margin-top: var(--gutter);
  padding: var(--space-m) var(--space-l);
  border: 1px solid var(--rule);
  border-radius: var(--radius-frame);
  background: var(--surface);
}

.home-care__name {
  font-weight: 500;
}

.home-care__text {
  color: var(--muted);
}

.home-services__more {
  margin-top: var(--space-l);
}

/* 04 — Process: a vertical list by default; home.js pins it into a horizontal sequence on wide screens. */
.home-process__steps {
  border-top: 1px solid var(--rule);
}

.home-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-l);
  row-gap: var(--space-xs);
  padding-block: var(--space-l);
  border-bottom: 1px solid var(--rule);
}

.home-step__num {
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: .8;
  letter-spacing: var(--tracking-display);
  color: var(--muted);
}

/* Outlined in muted, so the titles lead. */
@supports (-webkit-text-stroke: 1px) {
  .home-step__num {
    color: transparent;
    -webkit-text-stroke: 1px var(--muted);
  }
}

.home-step__title {
  align-self: end;
  font-size: var(--fs-h3);
}

.home-step__text {
  max-width: 36ch;
  color: var(--muted);
}

.home-process__progress {
  display: none;
}

.home-process__bar {
  display: block;
  height: 100%;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left center;
}

.home-process.is-pinned {
  height: 100vh;
  height: 100svh;
  padding-block: calc(var(--nav-h) + var(--space-l)) var(--space-xl);
  overflow: hidden;
}

.home-process.is-pinned .home-process__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.home-process.is-pinned .home-process__steps {
  display: flex;
  flex: 1;
  border-top: 0;
}

.home-process.is-pinned .home-step {
  flex: 0 0 min(40vw, 640px);
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  padding: 0 var(--space-l);
  border-bottom: 0;
  border-left: 1px solid var(--rule);
}

.home-process.is-pinned .home-step__num {
  grid-row: auto;
  font-size: clamp(8rem, 16vw, 18rem);
}

/* Number, title and text read as one unit: the title sits about 32px below the number. */
.home-process.is-pinned .home-step__title {
  margin-top: var(--space-m);
}

.home-process.is-pinned .home-process__progress {
  display: block;
  height: 1px;
  margin-top: var(--space-l);
  background: var(--rule);
}

/* Closing CTA. home.js animates --home-wdth from 75 to 100 as the line scrolls in. */
.home-cta__title {
  font-size: var(--fs-mega);
  font-weight: 700;
  line-height: var(--lh-display);
  font-variation-settings: "wdth" var(--home-wdth, 100);
}

.home-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m) var(--space-l);
  margin-top: var(--space-xl);
}

.home-cta__email {
  font-size: var(--fs-lead);
}

/* styles/pages/notfound.css */
/* 404 page: a huge 404 whose 0 is the brand mark, a short line and the ways back. */
.nf-page {
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding-top: calc(var(--nav-h) + var(--space-xl));
}

.nf-code {
  display: flex;
  align-items: baseline;
  gap: .04em;
  font-family: var(--font-display);
  font-size: clamp(7rem, 30vw, 26rem);
  font-weight: 700;
  font-variation-settings: "wdth" 85, "opsz" 96;
  line-height: .8;
  letter-spacing: -.05em;
}

/* The mark stands in for the 0: its steps fill the cap height (path y 4–22 of 24), so pull it down by 2 units.
   The first riser runs a quarter unit under the second, so no hairline seam shows between them. */
.nf-code__mark {
  flex: none;
  width: .8em;
  height: .8em;
  margin-bottom: -.0667em;
  color: var(--signal);
}

.nf-title {
  max-width: 16ch;
  margin-top: var(--space-xl);
}

.nf-text {
  margin-top: var(--space-m);
  max-width: 40ch;
  color: var(--muted);
  font-size: var(--fs-lead);
  line-height: 1.35;
}

.nf-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-l);
}

/* styles/pages/services.css */
/* Services and pricing page. Every selector starts with .svc-. */

/* Intro */
.svc-intro {
  padding-top: calc(var(--nav-h) + var(--section-pad) * .6);
  padding-bottom: calc(var(--section-pad) * .5);
}

.svc-intro__title {
  margin-top: var(--space-m);
  font-size: var(--fs-display);
  max-width: 12ch;
}

.svc-intro__lead {
  margin-top: var(--space-l);
  max-width: 32ch;
  font-size: var(--fs-lead);
  color: var(--muted);
}

/* Section heads */
.svc-head {
  display: grid;
  gap: var(--space-s);
  margin-bottom: var(--space-xl);
}

.svc-head__title {
  max-width: 18ch;
}

/* Plan cards */
.svc-plans {
  padding-top: calc(var(--section-pad) * .5);
}

.svc-plans__list {
  display: grid;
  gap: var(--gutter);
}

.svc-plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding: var(--space-l) var(--space-m);
  border: 1px solid var(--rule);
  border-radius: var(--radius-frame);
  background: var(--surface);
  transition: translate var(--dur-step) var(--ease-step), border-color var(--dur) var(--ease-out);
}

.svc-plan:hover,
.svc-plan:focus-within {
  translate: 0 -6px;
  border-color: var(--fg);
}

/* Studio: an fg border; its Recommended tag carries the small signal dot. */
.svc-plan--recommended {
  border-color: var(--fg);
}

.svc-plan__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
}

.svc-plan__name,
.svc-care__name {
  font-size: var(--fs-h3);
}

.svc-plan__price {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-family: var(--font-display);
  line-height: var(--lh-display);
}

.svc-plan__amount {
  font-size: clamp(3rem, 5.5vw, 5.5rem);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-display);
}

.svc-plan__from,
.svc-care__per {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}

.svc-plan__summary {
  color: var(--muted);
  max-width: 34ch;
}

.svc-plan__items {
  display: grid;
  gap: .625rem;
  padding-top: var(--space-m);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-small);
}

/* Step-mark bullets: the brand mark at 10px. */
.svc-plan__items li {
  display: flex;
  align-items: baseline;
  gap: .75rem;
}

.svc-plan__items li::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 22V16H11V4H22V22Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 22V16H11V4H22V22Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.svc-plan__time {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin-top: auto;
  padding-top: var(--space-m);
  font-size: var(--fs-small);
}

.svc-plan__cta {
  align-self: flex-start;
}

.svc-terms {
  margin-top: var(--space-l);
  max-width: 70ch;
}

/* Care */
.svc-care {
  padding-top: calc(var(--section-pad) * .5);
}

.svc-care__list {
  display: grid;
  gap: var(--gutter);
}

.svc-care__plan {
  display: grid;
  gap: var(--space-m);
  align-content: start;
  padding: var(--space-l) var(--space-m);
  border: 1px solid var(--rule);
  border-radius: var(--radius-frame);
  background: var(--surface);
}

.svc-care__price {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-family: var(--font-display);
  line-height: var(--lh-display);
}

.svc-care__price .svc-plan__amount {
  font-size: clamp(2.25rem, 3.5vw, 3.5rem);
}

.svc-care__note {
  margin-top: var(--space-l);
  max-width: 48ch;
  font-size: var(--fs-lead);
}

/* Comparison: a table on wide screens, stacked per-plan lists on phones. */
.svc-compare__wrap {
  display: none;
}

.svc-compare__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.svc-compare__table th,
.svc-compare__table td {
  padding: var(--space-s) var(--space-s) var(--space-s) 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.svc-compare__table thead th {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 650;
  letter-spacing: var(--tracking-display);
}

.svc-compare__table tbody th {
  font-weight: 500;
  width: 28%;
}

.svc-compare__table td {
  font-variant-numeric: tabular-nums;
}

.svc-yes {
  font-size: 1.125rem;
}

.svc-no {
  color: var(--muted);
}

.svc-compare__stack {
  display: grid;
  gap: var(--space-xl);
}

.svc-compare__name {
  padding-bottom: var(--space-s);
  border-bottom: 1px solid var(--fg);
}

.svc-compare__list > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: .75rem;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-small);
}

.svc-compare__list dt {
  color: var(--muted);
}

.svc-compare__list dd {
  text-align: right;
}

/* Process */
.svc-process__steps {
  display: grid;
  border-top: 1px solid var(--rule);
}

.svc-step {
  display: grid;
  gap: var(--space-m);
  padding-block: var(--space-l);
  border-bottom: 1px solid var(--rule);
}

.svc-step__title {
  font-size: var(--fs-h2);
}

.svc-step__cols {
  display: grid;
  gap: var(--space-m);
}

.svc-step__cols p + p {
  margin-top: var(--space-xs);
  max-width: 42ch;
}

/* FAQ */
.svc-faq__list {
  border-top: 1px solid var(--rule);
}

.svc-faq__item {
  border-bottom: 1px solid var(--rule);
}

.svc-faq__heading {
  font-size: var(--fs-h3);
}

.svc-faq__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  width: 100%;
  padding-block: var(--space-m);
  text-align: left;
  font: inherit;
  letter-spacing: inherit;
  transition: color var(--dur-fast) var(--ease-out);
}

.svc-faq__button::after {
  content: "+";
  flex: none;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 400;
  transition: transform var(--dur) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.svc-faq__button:hover::after {
  color: var(--signal);
}

.svc-faq__button[aria-expanded="true"]::after {
  transform: rotate(45deg);
}

.svc-faq__panel {
  overflow: hidden;
}

.svc-faq__answer {
  padding-bottom: var(--space-l);
  max-width: 62ch;
  color: var(--muted);
}

/* Closing CTA */
.svc-cta {
  border-top: 1px solid var(--rule);
}

.svc-cta__title {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  max-width: 12ch;
}

.svc-cta__lead {
  margin-top: var(--space-l);
  max-width: 32ch;
  font-size: var(--fs-lead);
}

.svc-cta__button {
  margin-top: var(--space-l);
}

@media (min-width: 768px) {
  .svc-plan,
  .svc-care__plan {
    padding: var(--space-l);
  }

  .svc-care__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .svc-compare__wrap {
    display: block;
  }

  .svc-compare__stack {
    display: none;
  }

  .svc-step {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    column-gap: var(--gutter);
  }

  .svc-step__num {
    grid-column: 1;
  }

  .svc-step__title {
    grid-column: 1;
    grid-row: 2;
  }

  .svc-step__cols {
    grid-column: 2;
    grid-row: 1 / span 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
}

@media (min-width: 1024px) {
  .svc-plans__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .svc-head {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    column-gap: var(--gutter);
    align-items: baseline;
  }

  .svc-faq__inner {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: var(--gutter);
  }

  .svc-faq__inner .svc-head {
    grid-template-columns: 1fr;
    align-content: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-plan:hover,
  .svc-plan:focus-within {
    translate: none;
  }
}

/* styles/pages/studio.css */
/* Studio page: intro, the name, principles, how we work, tools, closing CTA. */

/* Intro */
.studio-hero {
  padding-top: calc(var(--nav-h) + var(--section-pad) * .6);
}

.studio-hero__label {
  margin-bottom: var(--space-l);
}

.studio-hero__title {
  max-width: 14ch;
  font-size: var(--fs-display);
  font-weight: 700;
}

.studio-hero__intro {
  row-gap: var(--space-m);
  margin-top: var(--space-xl);
}

.studio-hero__lead {
  grid-column: 1 / -1;
  max-width: 34ch;
  font-size: var(--fs-lead);
  line-height: 1.35;
}

.studio-hero__aside {
  grid-column: 1 / -1;
  max-width: 42ch;
  color: var(--muted);
}

@media (min-width: 900px) {
  .studio-hero__lead { grid-column: 1 / span 7; }
  .studio-hero__aside { grid-column: 9 / span 4; align-self: end; }
}

/* The name: the mark drawn large, its risers rise in two beats (studio.js). The first riser runs a quarter unit
   under the second, so no hairline seam shows between them. */
.studio-name {
  border-top: 1px solid var(--rule);
}

.studio-name__grid {
  row-gap: var(--space-xl);
  align-items: end;
}

.studio-name__figure {
  grid-column: 1 / -1;
}

.studio-name__mark {
  width: min(100%, 26rem);
  height: auto;
  color: var(--signal);
}

.studio-name__body {
  grid-column: 1 / -1;
}

.studio-name__title {
  margin-block: var(--space-s) var(--space-l);
}

.studio-name__text {
  max-width: 48ch;
  color: var(--muted);
}

.studio-name__text + .studio-name__text {
  margin-top: var(--space-s);
}

@media (min-width: 900px) {
  .studio-name__figure { grid-column: 1 / span 5; }
  .studio-name__body { grid-column: 7 / span 6; }
}

/* Principles: a sticky label beside a numbered list. */
.studio-principles__grid {
  row-gap: var(--space-xl);
}

.studio-principles__aside {
  grid-column: 1 / -1;
}

.studio-principles__sticky {
  position: sticky;
  top: calc(var(--nav-h) + var(--space-l));
}

.studio-principles__title {
  max-width: 12ch;
  margin-top: var(--space-s);
}

.studio-principles__count {
  margin-top: var(--space-l);
  font-variant-numeric: tabular-nums;
}

.studio-principles__count[hidden] {
  display: none;
}

.studio-principles__list {
  grid-column: 1 / -1;
  border-top: 1px solid var(--rule);
}

.studio-principles__item {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  column-gap: var(--space-m);
  row-gap: var(--space-xs);
  padding-block: var(--space-l);
  border-bottom: 1px solid var(--rule);
}

.studio-principles__num {
  grid-row: span 2;
  padding-top: .5em;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  color: var(--muted);
  transition: color var(--dur) var(--ease-out);
}

/* Fg, not signal: signal text on the light page is below AA contrast. */
.studio-principles__item[data-active] .studio-principles__num {
  color: var(--fg);
}

.studio-principles__name {
  font-size: var(--fs-h2);
}

.studio-principles__text {
  max-width: 46ch;
  color: var(--muted);
}

@media (min-width: 900px) {
  .studio-principles__aside { grid-column: 1 / span 4; }
  .studio-principles__list { grid-column: 6 / span 7; }
  .studio-principles__item { padding-block: var(--space-xl); }
}

/* How we work */
.studio-process__head {
  row-gap: var(--space-m);
  margin-bottom: var(--space-xl);
}

.studio-process__label,
.studio-process__title,
.studio-process__note {
  grid-column: 1 / -1;
}

.studio-process__title {
  max-width: 18ch;
}

.studio-process__note {
  max-width: 44ch;
  color: var(--muted);
}

.studio-process__list {
  display: grid;
  gap: var(--gutter);
}

.studio-process__step {
  display: grid;
  align-content: start;
  gap: var(--space-s);
  padding-top: var(--space-m);
  border-top: 1px solid var(--rule);
}

.studio-process__when {
  color: var(--fg);
}

.studio-process__text {
  color: var(--muted);
}

@media (min-width: 768px) {
  .studio-process__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
}

@media (min-width: 1200px) {
  .studio-process__title { grid-column: 1 / span 8; }
  .studio-process__note { grid-column: 9 / span 4; align-self: end; }
  .studio-process__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Tools: a mono list, one line on why each, on the alternate background. */
.studio-tools__grid {
  row-gap: var(--space-xl);
}

.studio-tools__head {
  grid-column: 1 / -1;
}

.studio-tools__title {
  max-width: 12ch;
  margin-top: var(--space-s);
}

.studio-tools__list {
  grid-column: 1 / -1;
  border-top: 1px solid var(--rule);
}

.studio-tools__row {
  display: grid;
  gap: var(--space-xs);
  padding-block: var(--space-m);
  border-bottom: 1px solid var(--rule);
}

.studio-tools__name {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.studio-tools__why {
  margin: 0;
  color: var(--muted);
}

@media (min-width: 768px) {
  .studio-tools__row { grid-template-columns: 12rem 1fr; column-gap: var(--space-l); }
}

@media (min-width: 900px) {
  .studio-tools__head { grid-column: 1 / span 4; }
  .studio-tools__list { grid-column: 6 / span 7; }
}

/* Closing CTA */
.studio-cta {
  padding-bottom: 0;
}

.studio-cta__inner {
  display: grid;
  gap: var(--space-l);
}

.studio-cta__title {
  max-width: 14ch;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
}

.studio-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

/* styles/pages/work.css */
/* Work index: mega title, three project rows split by hairlines, inline previews and the cursor-following preview. */
.work-index {
  padding-top: calc(var(--nav-h) + var(--space-xl));
}

.work-head {
  display: grid;
  gap: var(--space-l);
  align-items: end;
  margin-bottom: var(--space-xl);
}

.work-title {
  font-size: var(--fs-mega);
  font-weight: 700;
  line-height: var(--lh-display);
}

.work-count {
  margin-left: .15em;
  font-family: var(--font-mono);
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 0;
  vertical-align: top;
  color: var(--muted);
}

.work-intro {
  max-width: 34ch;
  color: var(--muted);
}

.work-list {
  border-top: 1px solid var(--rule);
}

.work-row {
  border-bottom: 1px solid var(--rule);
}

.work-link {
  display: grid;
  gap: var(--space-s);
  padding-block: clamp(1.5rem, 3vw, 2.75rem);
  transition: color var(--dur) var(--ease-out);
}

.work-name {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 650;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  transition: transform var(--dur) var(--ease-out);
}

.work-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-m);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}

.work-tag {
  color: var(--fg);
}

/* Inline preview: shown above each row's text on touch, small screens, reduced motion and without JS. */
.work-thumb {
  display: block;
  aspect-ratio: 480 / 300;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius-frame);
  background: var(--surface);
}

.work-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Halfstep: the moving-type hero in miniature, the mark above the headline. Sized to the frame, so it also fits the
   larger cursor preview. */
.work-thumb--type {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 7%;
  container-type: size;
  background: var(--bg);
  color: var(--fg);
}

.work-mini-mark {
  width: 9cqh;
  height: 9cqh;
  color: var(--signal);
}

.work-mini-line {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-size: 10cqw;
  font-weight: 700;
  font-variation-settings: "wdth" 85, "opsz" 96;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}

/* Your project: a quiet panel asking the question. */
.work-thumb--next {
  display: grid;
  place-items: center;
  background: var(--bg-alt);
  color: var(--fg);
}

.work-next {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}

/* The open slot reads as an outlined invitation. */
.work-row--open {
  border-bottom: 0;
  padding-block: var(--space-m);
}

.work-row--open .work-link {
  padding-inline: clamp(1rem, 2.5vw, 2.5rem);
  border: 1px solid var(--rule);
  border-radius: var(--radius-frame);
  transition: border-color var(--dur) var(--ease-out);
}

.work-row--open .work-link:hover,
.work-row--open .work-link:focus-visible {
  border-color: var(--signal);
}

@supports (-webkit-text-stroke: 1px currentColor) {
  .work-row--open .work-name {
    color: transparent;
    -webkit-text-stroke: 1px var(--fg);
  }
}

@media (min-width: 1024px) {
  .work-head {
    grid-template-columns: 1fr auto;
  }

  .work-link {
    grid-template-columns: clamp(10rem, 16vw, 17rem) minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-l);
  }

  .work-meta {
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
  }
}

/* Desktop with a mouse: work.js moves the previews into one floating frame that follows the cursor. */
.work-preview {
  display: none;
}

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .work-list.is-previewing .work-link {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .work-list.is-previewing .work-link > .work-thumb {
    display: none;
  }

  .work-list:hover .work-link:not(:hover) {
    color: var(--muted);
  }

  .work-link:hover .work-name {
    transform: translateX(.08em);
  }

  .work-preview {
    position: fixed;
    top: 0;
    left: 0;
    z-index: calc(var(--z-nav) - 1);
    display: block;
    width: 480px;
    height: 300px;
    overflow: hidden;
    border-radius: var(--radius-frame);
    box-shadow: var(--shadow-frame);
    pointer-events: none;
    visibility: hidden;
  }

  .work-preview-slide {
    position: absolute;
    inset: 0;
  }

  .work-preview-slide > .work-thumb {
    height: 100%;
    aspect-ratio: auto;
  }
}