/* Blended Edge Media
   Committed dark, cinematic. One accent (pink), tinted neutrals, concentric
   radii, nested surfaces. Motion is transform and opacity, with a blur on
   entry only, and all of it stops under prefers-reduced-motion. */

:root {
  /* Surfaces, warm-tinted dark so it reads as charcoal rather than void */
  --ink-900: #0B0B0A;
  --ink-850: #110709;
  --ink-800: #141413;
  --ink-700: #1B1B19;
  --ink-600: #242421;

  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.17);
  --inner-light: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* Text, one warm grey family */
  --text: #EDEDEA;
  --text-dim: #A4A39D;
  --text-faint: #8B8A84;

  /* One accent */
  --pink: #F82374;
  --pink-hover: #FB4788;
  --magenta: #E603AE;
  --pink-deep: #CC3366;

  /* Supplied ramp. Roles follow the measurements: the three deep tones carry
     white text easily but are too dark to be text on the page background, so
     they are surfaces and graphics. Only the brand pink passes as text on
     dark, so it keeps the links. */
  --plum-900: #4C020F;  /* deepest tint, section and vignette washes */
  --plum-800: #700124;  /* hairlines and deep accents */
  --plum-600: #AA0144;  /* 7.51:1 with white, button hover */
  --pink-500: #DE0C78;  /* 4.74:1 with white, button fill */

  --pink-btn: var(--pink-500);
  --pink-btn-hover: var(--plum-600);

  /* Type scale, 1.25 ratio */
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1.0625rem;
  --t-lg: 1.1875rem;
  --t-xl: 1.5rem;
  --t-2xl: clamp(1.75rem, 3vw, 2.25rem);
  --t-3xl: clamp(2.1rem, 4.2vw, 3rem);
  --t-display: clamp(2.6rem, 6.4vw, 4.75rem);

  /* Rhythm */
  --max: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
  --section-y: clamp(84px, 11vw, 160px);

  /* Concentric radii */
  --r-shell: 26px;
  --r-core: 20px;
  --r-sm: 10px;
  --r-pill: 999px;

  /* Tinted depth, never pure black */
  --shadow-soft: 0 24px 50px -28px rgba(0, 0, 0, 0.9), 0 2px 6px -2px rgba(0, 0, 0, 0.5);
  --shadow-lift: 0 40px 80px -36px rgba(0, 0, 0, 0.95), 0 4px 12px -4px rgba(0, 0, 0, 0.6);

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --z-grain: 2;
  --z-header: 50;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 110px;
}

body {
  margin: 0;
  font-family: Poppins, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--t-base);
  line-height: 1.68;
  color: var(--text-dim);
  background: var(--ink-900);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--pink); text-decoration: none; }
a:hover, a:focus-visible { color: var(--pink-hover); }

h1, h2, h3, h4 {
  color: var(--text);
  line-height: 1.08;
  letter-spacing: -0.028em;
  margin: 0 0 0.55em;
  font-weight: 600;
  text-wrap: balance;
}

h1 { font-size: var(--t-display); font-weight: 700; letter-spacing: -0.038em; }
h2 { font-size: var(--t-3xl); font-weight: 600; }
h3 { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Film grain, fixed so it never repaints with scroll */
.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--pink);
  color: #fff;
  padding: 12px 20px;
  z-index: 100;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; color: #fff; }

/* Floating glass nav, detached from the top edge */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  padding-block: 16px 0;
  pointer-events: none;
}

.nav-shell {
  pointer-events: auto;
  margin-inline: auto;
  max-width: calc(100% - 2 * var(--gutter));
  width: max-content;
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 38px);
  padding: 9px 10px 9px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  /* The scrim over the picture is deliberately light, and the starfield has
     blown highlights, so the pill carries its own contrast rather than relying
     on the wash behind it. */
  background: rgba(13, 13, 12, 0.84);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: var(--shadow-soft), var(--inner-light);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.brand:hover, .brand:focus-visible { color: var(--text); }
.brand img { width: 30px; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2.2vw, 24px);
}

.nav a {
  position: relative;
  color: var(--text-dim);
  font-size: var(--t-sm);
  font-weight: 500;
  padding: 10px 14px;
  border-radius: var(--r-pill);
  transition: color 220ms var(--ease), background-color 220ms var(--ease);
}
.nav a:hover, .nav a:focus-visible { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.nav a[aria-current="page"] { color: var(--text); background: rgba(248, 35, 116, 0.14); }

@media (max-width: 560px) {
  .brand span { display: none; }
  .nav-shell { padding-left: 12px; }
}

/* Folding phones and the like, around 280px wide. */
@media (max-width: 400px) {
  .nav-shell { gap: 6px; padding: 8px 8px 8px 11px; }
  .nav { gap: 2px; }
  .nav a { padding: 10px 9px; font-size: 0.8125rem; }
}

/* Buttons: pill, nested icon disc, physical press */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 9px 9px 9px 24px;
  border-radius: var(--r-pill);
  border: 1px solid var(--pink-btn);
  background: var(--pink-btn);
  color: #fff;
  cursor: pointer;
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease),
    color 300ms var(--ease), transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.btn:hover, .btn:focus-visible {
  background: var(--pink-btn-hover);
  border-color: var(--pink-btn-hover);
  color: #fff;
  box-shadow: var(--shadow-soft);
}
.btn:active { transform: scale(0.979); }

.btn .disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  transition: transform 320ms var(--ease), background-color 320ms var(--ease);
}
.btn .disc svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.1; }
.btn:hover .disc, .btn:focus-visible .disc {
  transform: translate3d(2px, -2px, 0) scale(1.06);
  background: rgba(255, 255, 255, 0.28);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line-strong);
  color: var(--text);
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--text-faint);
  color: var(--text);
}
.btn-ghost .disc { background: rgba(255, 255, 255, 0.09); }
.btn-ghost:hover .disc { background: rgba(255, 255, 255, 0.16); }

/* Hero */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--ink-900);
  min-height: clamp(540px, 88dvh, 900px);
  display: flex;
  align-items: center;
  margin-top: -78px;
  padding-top: 78px;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(62% 52% at 74% 4%, rgba(222, 12, 120, 0.2), transparent 64%),
    radial-gradient(96% 78% at 76% 12%, rgba(76, 2, 15, 0.72), transparent 70%),
    linear-gradient(to bottom, rgba(11, 11, 10, 0.62) 0%, rgba(11, 11, 10, 0.78) 55%, var(--ink-900) 100%);
}

.hero .wrap { position: relative; padding-block: clamp(96px, 14vw, 150px) clamp(76px, 11vw, 124px); }

.hero h1 { max-width: 17ch; margin-bottom: 0.42em; }

.hero p.lede {
  font-size: clamp(1.0625rem, 1.65vw, 1.3rem);
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 50ch;
}

.hero-actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; }

/* Eyebrow pill */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 7px 15px 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  /* Sits over the picture on every page, and some of those frames are very
     bright, so it carries its own backing rather than trusting the wash. */
  background: rgba(13, 13, 12, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  margin-bottom: 30px;
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink);
}

/* Header band: the photograph carries the top of the page on its own, with
   the headline below it on solid dark rather than over the image. */
.hero-banner {
  /* The band runs past the picture by --hero-overlap, and the copy is pulled
     back up over that stretch, so the first line of the headline sits on the
     image and the wash only goes solid around the second line. */
  --hero-overlap: clamp(84px, 13vw, 182px);
  position: relative;
  margin-top: -78px;
  height: calc(clamp(340px, 52vh, 600px) + var(--hero-overlap));
  overflow: hidden;
  background: var(--ink-800);
  isolation: isolate;
}
.hero-banner picture {
  position: absolute;
  inset: 0;
  display: block;
}
.hero-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 26%;
}
.hero-banner img {
  /* The stage edge rises 1.263deg to the right in the original frame, so the
     image is tilted clockwise by the same amount to level it. Scale never
     drops below 1.18, which keeps the corners covered on a banner as wide as
     7.6:1, i.e. a 3840px window only 500px tall. */
  transform-origin: 50% 50%;
  animation: hero-level 42s ease-in-out infinite alternate;
}

@keyframes hero-level {
  from { transform: rotate(var(--tilt, 0deg)) scale(var(--zoom, 1.06)) translate3d(0, 0, 0); }
  to   { transform: rotate(var(--tilt, 0deg)) scale(calc(var(--zoom, 1.06) + 0.06)) translate3d(-0.6%, -0.5%, 0); }
}
.hero-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Kept deliberately light across the picture so the screen content and the
     figure on the right stay clear. The nav pill carries its own blurred
     backing, so it does not need a heavy wash behind it. The only real
     darkening is the last stretch, which blends the band into the copy. */
  /* The fade starts around a third of the way down and climbs through many
     small steps rather than a few big ones, so the picture dissolves into the
     page instead of meeting a visible edge. */
  background: linear-gradient(
    to bottom,
    rgba(11, 11, 10, 0.3) 0%,
    rgba(11, 11, 10, 0.06) 9%,
    rgba(11, 11, 10, 0.05) calc(28% + var(--fade-shift, 0px)),
    rgba(11, 11, 10, 0.1) calc(40% + var(--fade-shift, 0px) * 0.8),
    rgba(11, 11, 10, 0.18) calc(52% + var(--fade-shift, 0px) * 0.62),
    rgba(11, 11, 10, 0.28) calc(62% + var(--fade-shift, 0px) * 0.46),
    rgba(11, 11, 10, 0.4) calc(71% + var(--fade-shift, 0px) * 0.32),
    rgba(11, 11, 10, 0.55) calc(79% + var(--fade-shift, 0px) * 0.21),
    rgba(11, 11, 10, 0.7) calc(86% + var(--fade-shift, 0px) * 0.12),
    rgba(11, 11, 10, 0.84) calc(92% + var(--fade-shift, 0px) * 0.06),
    rgba(11, 11, 10, 0.95) calc(97% + var(--fade-shift, 0px) * 0.02),
    var(--ink-900) 100%
  );
}

.hero-banner.is-lowered { --fade-shift: 100px; }

.hero-copy {
  position: relative;
  z-index: 1;
  margin-top: calc(clamp(84px, 13vw, 182px) * -1);
  padding-block: clamp(18px, 2.4vw, 30px) clamp(56px, 8vw, 108px);
}
.hero-copy h1 { max-width: 19ch; margin-bottom: 0.42em; }
.hero-copy .lede {
  font-size: clamp(1.0625rem, 1.65vw, 1.3rem);
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 52ch;
}
.hero-copy .hero-actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; }

@keyframes hero-drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.2%, -1%, 0); }
}

/* Showcase strip */
.shots {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.shots figure { margin: 0; }
.shots .frame {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-core);
  background: var(--ink-800);
  aspect-ratio: 4 / 3;
}
.shots img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}
.shots figure:hover img { transform: scale(1.04); }
.shots figcaption {
  margin-top: 14px;
  font-size: var(--t-sm);
  color: var(--text-dim);
}
@media (max-width: 820px) {
  .shots { grid-template-columns: 1fr; }
}

/* Sections. Bottom padding runs slightly longer than top, optically even. */
section { padding-block: var(--section-y) calc(var(--section-y) * 1.1); }
section.tight { padding-block: clamp(56px, 7vw, 88px); }
section.raised { background: var(--ink-850); }

.section-head { max-width: 58ch; margin-bottom: clamp(38px, 5vw, 64px); }
.section-head h2 { margin-bottom: 0.3em; }
.section-head p { color: var(--text-dim); max-width: 52ch; }

.prose { max-width: 64ch; }
.prose p { color: var(--text-dim); }

/* Archetype: sticky heading left, stacked blocks right */
.split {
  display: grid;
  gap: clamp(34px, 5vw, 72px);
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: start;
}
.split-aside { position: sticky; top: 118px; }
.split-body { display: grid; gap: clamp(28px, 3.5vw, 46px); }

@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; }
  .split-aside { position: static; }
}

.block,
.edge {
  border-left: 2px solid var(--pink);
  padding-left: clamp(18px, 2.2vw, 28px);
}

.block h3 {
  font-size: var(--t-xl);
  letter-spacing: -0.025em;
  margin-bottom: 0.5em;
}
.block + .block { margin-top: clamp(30px, 3.6vw, 48px); }

/* Nested surface: outer shell, inner core, concentric */
.panel {
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-shell);
  background: rgba(255, 255, 255, 0.022);
  box-shadow: var(--shadow-soft);
  transition: border-color 420ms var(--ease), transform 420ms var(--ease), box-shadow 420ms var(--ease);
}
.panel:hover { border-color: var(--line-strong); transform: translate3d(0, -4px, 0); box-shadow: var(--shadow-lift); }

.panel-core {
  height: 100%;
  padding: clamp(26px, 3vw, 38px);
  border-radius: var(--r-core);
  background: var(--ink-800);
  box-shadow: var(--inner-light);
  display: flex;
  flex-direction: column;
}

/* Asymmetric bento, no orphan cells */
.bento {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.bento > :first-child { grid-column: span 2; grid-row: span 2; }
.bento > :first-child .panel-core { justify-content: space-between; min-height: 300px; }
.bento > :first-child h3 { font-size: var(--t-2xl); max-width: 16ch; }
.bento > :first-child p { font-size: var(--t-lg); line-height: 1.5; color: var(--text); max-width: 34ch; }

@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr; grid-template-rows: none; }
  .bento > :first-child { grid-column: span 1; grid-row: span 1; }
  .bento > :first-child .panel-core { min-height: 0; }
}

.svc-icon {
  display: block;
  width: 30px;
  height: 30px;
  color: var(--pink);
  margin-bottom: 18px;
}
.svc-icon svg { width: 100%; height: 100%; display: block; }

.panel-core p { color: var(--text-dim); font-size: var(--t-sm); margin: 0; }
.panel-core h3 { color: var(--text); }

/* Pull quote archetype */
.quote { max-width: 24ch; }
.quote-text {
  font-size: clamp(1.45rem, 3.1vw, 2.15rem);
  line-height: 1.3;
  letter-spacing: -0.028em;
  color: var(--text);
  font-weight: 500;
  max-width: 20ch;
  text-wrap: balance;
}
.quote-grid {
  display: grid;
  gap: clamp(34px, 5vw, 76px);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: start;
}
@media (max-width: 880px) { .quote-grid { grid-template-columns: 1fr; } }

/* Credits: names carried at size, ruled rather than boxed */
.names { list-style: none; margin: 0; padding: 0; }
.names li {
  font-size: var(--t-xl);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.3;
  color: var(--text);
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.names li:first-child { border-top: 1px solid var(--line); }

.credit-label {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 18px;
}

/* Services list as a ruled grid */
.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.ticks li {
  position: relative;
  padding: 22px 28px 22px 44px;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--text-dim);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 2.05em;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--pink);
}
.ticks li:nth-child(odd) { border-right: 1px solid var(--line); }
.ticks li:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
@media (max-width: 760px) {
  .ticks { grid-template-columns: 1fr; }
  .ticks li:nth-child(odd) { border-right: 0; }
  .ticks li { padding-right: 0; }
}

/* Closing call to action */
.band { padding-block: 0 calc(var(--section-y) * 1.05); }
.band .panel-core {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 30px;
  align-items: center;
  justify-content: space-between;
  padding: clamp(34px, 4.5vw, 62px);
  background:
    radial-gradient(58% 150% at 90% 50%, rgba(222, 12, 120, 0.22), transparent 66%),
    radial-gradient(85% 190% at 86% 50%, rgba(112, 1, 36, 0.55), transparent 72%),
    var(--ink-800);
}
.band h2 { margin-bottom: 0.25em; max-width: 18ch; }
.band p { color: var(--text-dim); max-width: 44ch; margin: 0; }

/* Contact */
.contact-grid {
  display: grid;
  gap: clamp(34px, 5vw, 72px);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  align-items: start;
}

/* Form */
.form { max-width: 34rem; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.field label {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.field label span { color: var(--pink); }
.field input, .field textarea {
  font: inherit;
  font-size: var(--t-sm);
  color: var(--text);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 13px 15px;
  width: 100%;
  transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease), background-color 220ms var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--pink);
  background: var(--ink-700);
  box-shadow: 0 0 0 3px rgba(248, 35, 116, 0.17);
}
.field textarea { resize: vertical; min-height: 140px; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form button[type="submit"] { margin-top: 6px; }
.form button[disabled] { opacity: 0.55; cursor: default; }
.or-email {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--text-dim);
  max-width: 34rem;
}

.form-status { display: block; margin-top: 16px; font-size: var(--t-sm); min-height: 1.4em; }
.form-status[data-state="ok"] { color: #4ED598; }
.form-status[data-state="error"] { color: #FF7A94; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--ink-850);
  padding-block: clamp(50px, 6vw, 76px) 34px;
  font-size: var(--t-sm);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  justify-content: space-between;
  align-items: flex-start;
}
.site-footer .brand img { width: 36px; }
.site-footer a { color: var(--text-dim); }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--text); }
.footer-label { color: var(--text-faint); margin: 0 0 8px; font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 20px; }
.footer-social { display: flex; gap: 16px; margin-top: 14px; }
.footer-social a { display: inline-flex; }
.footer-social svg { width: 19px; height: 19px; fill: currentColor; }
.footer-legal {
  margin-top: 46px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: var(--t-xs);
  color: var(--text-faint);
}

/* 404 */
.notfound { min-height: 72dvh; display: flex; align-items: center; }
.notfound .code {
  font-size: clamp(4rem, 14vw, 9rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  color: var(--pink);
  line-height: 0.9;
  margin: 0 0 0.2em;
  font-variant-numeric: tabular-nums;
}

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

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

/* Scroll entry. Blur is part of the chosen entry curve, hence the exception
   to transform-and-opacity only. */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  filter: blur(7px);
}
[data-reveal].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
  transition: opacity 820ms var(--ease-out), transform 820ms var(--ease-out), filter 820ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }