/* ==========================================================================
   sections.css — page-level composition.

   The organising idea, taken from the reference: the page is a grid drawn in
   1px hairlines. Cells butt directly against each other and are separated by
   rules rather than by gaps.
   ========================================================================== */

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 100svh;
  padding-top: var(--nav-height);
  isolation: isolate;
  overflow: hidden;
  text-align: center;
}

.hero__bg { position: absolute; inset: 0; z-index: -2; background: var(--ink); }

/* Until anim.js decides the connection can afford the video file, the <video>
   is a poster-only element. Give it the same treatment either way. */
.hero__bg video { background: var(--ink); }

/* The video is the only media layer in the hero. Nothing sits behind it but
   the black ground, so no transform can reveal a stale image. The img rule is
   kept for other heroes that still use a still. */
.hero__bg img,
.hero__bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__bg video { z-index: 1; }

.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--scrim);
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: var(--space-8);
}

.hero .display { margin-bottom: var(--space-4); }

/* Set on two lines. Each line is its own block so it cannot wrap internally,
   and "Frequency" — the widest line — is what the type scale is tuned to. */
.hero .display span { display: block; }
.hero .display span:last-child { color: var(--sun); }

.hero__lead {
  max-width: 34ch;
  margin-bottom: var(--space-6);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--text);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

/* Two --lg pills do not fit on one line under ~420px, and wrapping leaves one
   centred pill above another of a different width, which reads as a mistake.
   Stack them at full width instead — also the easiest thing to hit. */
@media (max-width: 419px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
}

/* 100svh minus a 60px header still leaves the lead and both buttons below the
   fold on a short phone in landscape. Let the hero size to its content there
   rather than forcing a full screen of it. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 0; }
  .hero__inner { padding-block: var(--space-7); }
  .hero .display { font-size: clamp(2.25rem, 7vw, 4rem); }
}



/* ==========================================================================
   Stat strip — three (or four) cells divided by vertical hairlines
   ========================================================================== */
/* One cell per stat on a phone wastes a whole screen of scrolling on four
   numbers, so the strip starts at two columns.

   The dividers are drawn as a 1px grid gap over a --line background rather
   than as per-cell borders. Border-based hairlines need a different set of
   :nth-child rules for every column count — and get them wrong at the last
   row, where the cell border doubles up with the strip's own. The gap
   technique is correct at 2, 3 and 4 columns with no arithmetic. */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

@media (min-width: 700px) {
  .stat-strip { grid-template-columns: repeat(3, 1fr); }
  /* Four items across three columns strands one on its own row. Hold the
     4-up strip at two columns until it can show all four. */
  .stat-strip--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) { .stat-strip--4 { grid-template-columns: repeat(4, 1fr); } }

.stat {
  padding: var(--space-5) var(--space-4);
  background: var(--ink);
}

/* An odd number of stats in a two-column grid leaves one empty cell, and an
   empty cell has no .stat background to cover the --line ground — it would
   paint as a grey block. Widening the last cell fills the row. */
.stat-strip > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }

@media (min-width: 700px) {
  .stat { padding: var(--space-6) var(--page-x); }
  /* Three columns take three stats exactly; no cell is left over. */
  .stat-strip > .stat:last-child:nth-child(odd) { grid-column: auto; }
  /* ...but the 4-up strip is still two columns wide at this tier. */
  .stat-strip--4 > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.stat__value {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

.stat__value em { font-style: normal; color: var(--sun); }
.stat__label { color: var(--text-muted); font-size: var(--step-sm); }

/* ==========================================================================
   Section head — eyebrow parked left, heading offset right
   ========================================================================== */
.section-head {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  align-items: start;
  margin-bottom: var(--space-7);
}

@media (min-width: 900px) {
  .section-head {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: var(--space-6);
  }
  /* Pushes the heading off the left edge, as in the reference. */
  .section-head--indent { grid-template-columns: 240px minmax(0, 1fr); }
}

.section-head__title { max-width: 20ch; }
.section-head__title--wide { max-width: 26ch; }

.section-head__aside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

/* Two-column body text under a heading. */
.two-col {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 760px) { .two-col { grid-template-columns: repeat(2, 1fr); gap: var(--space-7); } }

/* ==========================================================================
   About split — image left, copy right
   ========================================================================== */
.about-split {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 900px) {
  .about-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); }
}

.about-split__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.about-split__media img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Split cards — text cell beside an image cell, hairline-divided
   ========================================================================== */
.split-grid {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}

@media (min-width: 900px) { .split-grid { grid-template-columns: repeat(2, 1fr); } }

.split-card {
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 560px) { .split-card { grid-template-columns: minmax(0, 1fr) 190px; } }
@media (min-width: 900px) { .split-card:nth-child(odd) { border-right: 1px solid var(--line); } }

.split-card__body {
  display: flex;
  flex-direction: column;
  /* .container--bleed drops the page gutter so the hairlines can reach the
     viewport edges; the cells put it back, plus the notch inset. */
  padding:
    var(--space-6)
    calc(var(--space-5) + var(--safe-r))
    var(--space-6)
    calc(var(--space-5) + var(--safe-l));
}

/* Stacked, the picture belongs above the copy it illustrates — otherwise the
   card opens on three lines of metadata with no idea what it is about. */
@media (max-width: 559px) {
  .split-card__media { order: -1; aspect-ratio: 16 / 10; }
}

.split-card__title { margin-bottom: var(--space-2); }
.split-card__title a { transition: color var(--dur) var(--ease); }
.split-card:hover .split-card__title a { color: var(--sun); }

.split-card__price { margin-bottom: var(--space-5); color: var(--text-muted); font-size: var(--step-sm); }
.split-card__price strong { color: var(--text); font-size: var(--step-1); }

.split-card__meta { margin-top: auto; margin-bottom: var(--space-5); }

/* Metadata rows: label left, glyph pinned right, hairline between. */
.meta-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-soft);
  font-size: var(--step-sm);
}

.meta-row:last-child { border-bottom: 0; }
.meta-row > span:first-child { margin-right: auto; min-width: 0; }
.meta-row svg { width: 15px; height: 15px; flex: none; color: var(--text-muted); }
.meta-row em { font-style: normal; color: var(--text-muted); }

.split-card__media { position: relative; overflow: hidden; min-height: 190px; }
.split-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.split-card:hover .split-card__media img { transform: scale(1.04); }

.split-card__badge { position: absolute; top: var(--space-3); left: var(--space-3); }

/* A badge lying on top of a photograph cannot rely on a 16%-alpha wash for
   its ground — over a bright frame (a yellow carnival costume, a white sky)
   the label vanishes. Badges sitting over media get a near-opaque dark plate
   instead, and keep their accent text colour, which is what carries the
   audio/image distinction anyway. Two classes so this beats .badge--image.
   Matters most on a phone, where the media is full width. */
.split-card__media .badge,
.grid-tile__type .badge,
.post__media .badge {
  background-color: rgba(11, 11, 11, 0.78);
  border-color: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ==========================================================================
   Numbered steps
   ========================================================================== */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}

@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, 1fr); } }

.step {
  padding:
    var(--space-6)
    calc(var(--space-5) + var(--safe-r))
    var(--space-6)
    calc(var(--space-5) + var(--safe-l));
  border-bottom: 1px solid var(--line);
  transition: background-color var(--dur) var(--ease);
}

.step:hover { background: var(--ink-2); }

@media (min-width: 640px) {
  .step { border-right: 1px solid var(--line); }
  .step:nth-child(2n) { border-right: 0; }
}

@media (min-width: 1000px) {
  .step { border-right: 1px solid var(--line); }
  .step:nth-child(2n) { border-right: 1px solid var(--line); }
  .step:last-child { border-right: 0; }
}

.step__num {
  display: block;
  margin-bottom: var(--space-5);
  color: var(--sun);
  font-size: var(--step-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
}

.step h3 { margin-bottom: var(--space-3); }
.step p { color: var(--text-soft); font-size: var(--step-sm); }

/* ==========================================================================
   Creator cards — portrait tile, name overlaid at the foot
   ========================================================================== */
.creator-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

@media (min-width: 760px) { .creator-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }
@media (min-width: 1100px) { .creator-grid--4 { grid-template-columns: repeat(4, 1fr); } }

.creator-tile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--grad-flag);
  isolation: isolate;
}

.creator-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

.creator-tile:hover img { transform: scale(1.05); }

.creator-tile::after {
  content: '';
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(180deg, transparent, rgba(11, 11, 11, 0.92));
  pointer-events: none;
}

/* Initial-letter fallback when a creator has no avatar. */
.creator-tile__initial {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 700;
  color: rgba(11, 11, 11, 0.55);
  user-select: none;
}

.creator-tile__body {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  padding: var(--space-4);
}

/* block, not inline: these are spans (they sit inside an <a>, so they cannot
   be block-level elements) and would otherwise run together on one line. */
.creator-tile__name {
  display: block;
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: var(--tracking-snug);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.creator-tile__role {
  display: block;
  margin-top: 2px;
  color: var(--text-soft);
  font-size: var(--step-xs);
  line-height: 1.35;
}

.creator-tile__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: var(--space-2);
}

/* Small stat pair shown on directory cards. */
.creator-tile__stats {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-size: var(--step-xs);
  color: var(--text-muted);
}

.creator-tile__stats strong { color: var(--text); font-weight: 700; }

/* The caption is absolutely positioned against the bottom of a 3:4 frame, so
   it grows UPWARDS and .creator-tile's overflow:hidden silently crops it from
   the top. In a two-column grid on a 360px screen the frame is ~205px tall
   and a directory tile (name + role + tags + stats) needs almost exactly
   that — a two-line name was enough to cut the creator's own name in half.

   Three cheap fixes rather than a different layout: a taller frame, tighter
   padding, and one genre badge instead of two. The name is also clamped, so
   an unusually long one can no longer push everything else out of view. */
@media (max-width: 559px) {
  .creator-tile { aspect-ratio: 3 / 4.4; }
  .creator-tile__body { padding: var(--space-3); }
  .creator-tile__tags { margin-top: var(--space-1); }
  .creator-tile__tags .badge:nth-child(n + 2) { display: none; }
  .creator-tile__stats { margin-top: var(--space-2); padding-top: var(--space-2); gap: var(--space-3); }

  .creator-tile__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
}

.cta-band__bg { position: absolute; inset: 0; z-index: -1; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.cta-band__bg::after { content: ''; position: absolute; inset: 0; background: var(--scrim); }

.cta-band__inner { max-width: 26ch; margin-inline: auto; }
.cta-band h2 { margin-bottom: var(--space-4); }
.cta-band .lead { margin-inline: auto; }
.cta-band .hero__actions { margin-top: var(--space-6); }

/* ==========================================================================
   Page head (interior pages)
   ========================================================================== */
.page-head {
  padding-top: calc(var(--nav-height) + var(--space-7));
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--line);
}

.page-head__inner { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-5); }
.page-head__inner > div { margin-right: auto; max-width: 46ch; }
.page-head h1 { margin-block: var(--space-3) var(--space-3); }
.page-head p { color: var(--text-soft); }

/* ==========================================================================
   Stream
   ========================================================================== */
.stream-layout { padding-block: var(--space-6) var(--space-8); }

.filter-bar {
  position: sticky;
  /* -1px closes the sub-pixel seam that opens between the fixed header and
     the sticky bar on fractional-DPR screens, where the page behind shows
     through as a flickering hairline while scrolling. */
  top: calc(var(--nav-height) - 1px);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-4);
  background: rgba(11, 11, 11, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .filter-bar { background: var(--ink); }
}

.filter-bar .chip-row { margin-right: auto; }

/* Wrapped, the "Browse creators" link lands on its own line under the chips
   and doubles the height of a bar that is stuck to the top of the screen.
   Chips only on a phone; the link is already in the nav and the footer. */
@media (max-width: 559px) {
  .filter-bar { flex-wrap: nowrap; }
  .filter-bar .chip-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .filter-bar .chip-row::-webkit-scrollbar { display: none; }
  .filter-bar .chip { flex: none; }
  .filter-bar > .text-meta { display: none; }
}

/* ==========================================================================
   Creator profile
   ========================================================================== */
.profile-hero {
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--nav-height) + var(--space-7));
  padding-bottom: var(--space-7);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.profile-hero__bg { position: absolute; inset: 0; z-index: -1; }
.profile-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.45; }
.profile-hero__bg::after { content: ''; position: absolute; inset: 0; background: var(--scrim); }

.profile-hero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }

@media (min-width: 700px) { .profile-hero__inner { flex-direction: row; align-items: flex-end; } }

.profile-hero__id { min-width: 0; flex: 1; }
.profile-hero h1 { margin-bottom: var(--space-2); overflow-wrap: anywhere; }
.profile-hero__handle { color: var(--sun); font-weight: 600; }
.profile-hero__bio { max-width: 56ch; margin-top: var(--space-4); color: var(--text-soft); }

.profile-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-5);
  color: var(--text-muted);
  font-size: var(--step-sm);
}

.profile-hero__meta strong { color: var(--text); }

.post-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }

@media (min-width: 640px) { .post-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } }

.grid-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--grad-cover);
  display: block;
}

.grid-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  background: transparent;
  transition: transform var(--dur-slow) var(--ease);
}

.grid-tile:hover img { transform: scale(1.05); }

.grid-tile__glyph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,0.9); }
.grid-tile__glyph svg { width: 32%; height: 32%; }
.grid-tile__type { position: absolute; top: var(--space-2); left: var(--space-2); }

.grid-tile__overlay {
  position: absolute;
  inset: auto 0 0;
  padding: var(--space-5) var(--space-3) var(--space-3);
  background: linear-gradient(180deg, transparent, rgba(11, 11, 11, 0.92));
  font-size: var(--step-xs);
  line-height: var(--leading-snug);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.grid-tile:hover .grid-tile__overlay,
.grid-tile:focus-visible .grid-tile__overlay { opacity: 1; }

/* There is no hover on a touch screen, so this caption was simply never
   readable on a phone. Show it permanently where hover does not exist. */
@media (hover: none) {
  .grid-tile__overlay { opacity: 1; }
}

.view-toggle { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: var(--ink-2); border: 1px solid var(--line); }

.view-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.45em 0.95em;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: var(--step-xs);
  font-weight: 600;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.view-toggle button[aria-pressed='true'] { background: var(--surface-2); color: var(--text); }
.view-toggle svg { width: 0.95em; height: 0.95em; }

@media (pointer: coarse) { .view-toggle button { min-height: 38px; padding-inline: 1.1em; } }

.tab-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding-block: var(--space-6) var(--space-5); }
.tab-row h2 { font-size: var(--step-2); margin-right: auto; }

/* ==========================================================================
   Creators directory
   ========================================================================== */
.directory-controls {
  display: grid;
  /* minmax(0, 1fr), not the implicit `auto`. An auto track is max-content
     sized, and the max-content width of a nowrap flex row is the sum of every
     item in it — so the moment the chip rows below became single-line
     scrollers, this column sized itself to all 33 chips laid end to end
     (~1900px) and dragged the whole page out to that width. The zero minimum
     is what allows the track to be narrower than its contents, which is the
     precondition for the child scrolling instead of pushing. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--line);
}

/* Same trap one level down: grid and flex children default to min-width:auto,
   which refuses to shrink past their content. */
.directory-controls > * { min-width: 0; }

@media (min-width: 900px) {
  .directory-controls { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); align-items: center; gap: var(--space-6); }
}

/* Twenty-odd genres and a dozen islands wrap to roughly ten rows of chips on
   a phone — around 400px of filters sitting on top of the roster they filter.
   Below the two-column tier each facet becomes a single-line scroller: the
   full set is still reachable, but it costs one row instead of six.

   The gutter is cancelled and re-applied as padding so the row can bleed past
   the edge of the container, which is what signals it scrolls. The mask fades
   the trailing chip out for the same reason. */
@media (max-width: 899px) {
  .directory-controls .chip-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    margin-inline: calc(var(--page-x) * -1);
    padding-inline: var(--page-x);
    scroll-padding-inline: var(--page-x);
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.5rem), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.5rem), transparent 100%);
  }

  .directory-controls .chip-row::-webkit-scrollbar { display: none; }
  .directory-controls .chip { flex: none; scroll-snap-align: start; }
}

.directory-count { color: var(--text-muted); font-size: var(--step-sm); padding-block: var(--space-5); }
.directory-count strong { color: var(--text); }

.directory-grid { padding-bottom: var(--space-8); }

/* ==========================================================================
   Form pages
   ========================================================================== */
.form-page { padding-top: calc(var(--nav-height) + var(--space-6)); padding-bottom: var(--space-8); }

@media (min-width: 768px) {
  .form-page { padding-top: calc(var(--nav-height) + var(--space-7)); padding-bottom: var(--space-9); }
}

/* The panel border and radius do nothing on a phone except inset the form by
   another 2rem it cannot spare. Let it run to the gutter. */
@media (max-width: 559px) {
  .form-page .panel {
    padding-inline: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }
}

@media (min-width: 950px) {
  .form-page--split .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: var(--space-8);
    align-items: start;
  }
}

.form-aside {
  display: none;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  min-height: 460px;
  padding: var(--space-6);
  align-content: end;
}

@media (min-width: 950px) { .form-aside { display: grid; } }

.form-aside__bg { position: absolute; inset: 0; z-index: -1; }
.form-aside__bg img { width: 100%; height: 100%; object-fit: cover; }
.form-aside__bg::after { content: ''; position: absolute; inset: 0; background: var(--scrim); }

.form-aside blockquote {
  margin: 0;
  font-size: var(--step-2);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}

.form-aside figcaption { margin-top: var(--space-3); color: var(--text-soft); font-size: var(--step-sm); }

/* ==========================================================================
   404
   ========================================================================== */
.error-page {
  display: grid;
  place-items: center;
  min-height: 78svh;
  padding-top: var(--nav-height);
  text-align: center;
}

.error-page__code {
  font-size: clamp(6rem, 24vw, 16rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line-strong);
}