/* ==========================================================================
   Carina Cunha — First Principles
   Hand-authored stylesheet. No framework, no build step.
   Breakpoints: sm 640px · md 768px · lg 1024px
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  /* Labels, eyebrows and buttons. Back to the mono: the wide treatment moved
     onto the display titles instead. */
  --font-label: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;

  --background: oklch(8% 0.002 265);
  --foreground: oklch(95.5% 0.003 90);
  --surface: oklch(12.8% 0.003 265);
  --surface-2: oklch(17.2% 0.004 265);
  --muted: oklch(22.2% 0.006 265);
  --muted-foreground: oklch(66.5% 0.008 265);
  --card: oklch(18.3% 0.005 265);
  --card-foreground: oklch(94.5% 0.005 90);

  /* deep cherry. --brand is the single source of truth: it is never overridden,
     so component themes can reach it even where they re-point --accent.
     --accent-soft and --ring are this same colour in oklch, with alpha. */
  --brand: #97052d;
  --brand-deep: #7d0425;

  --accent: var(--brand);
  --accent-foreground: oklch(97% 0.005 90);
  --accent-soft: oklch(43.1279% 0.169731 16.684 / 0.1);

  --border: oklch(100% 0 0 / 0.1);
  --border-strong: oklch(100% 0 0 / 0.2);
  --input: oklch(100% 0 0 / 0.18);
  --ring: oklch(43.1279% 0.169731 16.684 / 0.45);
  /* error text, kept in the cherry family. Two values because one cannot serve
     both surfaces: this clears 6.2:1 on the near-black page, while the white
     entry pop-up re-points it to --brand for 8.8:1 on white. */
  --destructive: oklch(66% 0.155 17);

  --radius: 0.5rem;
  --radius-sharp: 0;
  --radius-lg: 1.5rem;

  /* one easing curve for the whole site, so every element shares a physics */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* lighting: a single source above the page. --edge-light is the lit top rim
     of a surface, --shadow-lift the shade it casts, --glow-brand the cherry
     read as emitted light rather than as paint. */
  --edge-light: inset 0 1px 0 rgb(255 255 255 / 0.07);
  /* no spread value: text-shadow does not accept one, and an invalid
     text-shadow is dropped whole rather than clamped. */
  --glow-brand: 0 0 90px color-mix(in oklab, var(--brand) 55%, transparent);
  --gutter: clamp(1.25rem, 5vw, 6rem);
  --tracking-editorial: 0.26em;
  --shadow-lift: 0 40px 90px -40px rgb(0 0 0 / 0.75);
}

/* ----------------------------------------------------------------- base -- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

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

button, input, select, textarea {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background-color: transparent;
  border-radius: 0;
}
button { cursor: pointer; }

::selection { background-color: var(--accent); color: var(--accent-foreground); }

:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ------------------------------------------------------------ primitives -- */
.container {
  width: 100%;
  max-width: 78rem;
  padding-inline: var(--gutter);
  margin-inline: auto;
}

.eyebrow {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-editorial);
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.eyebrow--accent { color: var(--accent); }

.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 1.08;
}

.lede,
.prose p {
  font-size: 0.95rem;
  line-height: 1.625;
  color: var(--muted-foreground);
}
@media (min-width: 1024px) {
  .lede,
  .prose p { font-size: 1.05rem; }
}

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

.section { padding-block: 5rem; }
@media (min-width: 640px) { .section { padding-block: 7rem; } }

/* scroll-margin so anchor jumps clear the fixed header */
[id] { scroll-margin-top: 5rem; }

/* --------------------------------------------------------- reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------- buttons -- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 1.75rem;
  border: 1px solid transparent;
  border-radius: 9999px;
  font-family: var(--font-label);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn:disabled { pointer-events: none; opacity: 0.55; }
.btn--full { width: 100%; }

.btn--primary { background-color: var(--accent); color: var(--accent-foreground); }
.btn--primary:hover { filter: brightness(1.1); box-shadow: 0 18px 45px -22px var(--accent); }

.btn--outline { border-color: var(--border-strong); color: var(--foreground); }
.btn--outline:hover { border-color: var(--accent); color: var(--accent); }

.btn--contrast { background-color: var(--foreground); color: var(--background); }
.btn--contrast:hover { opacity: 0.9; }

.btn--ghost { color: var(--muted-foreground); }
.btn--ghost:hover { color: var(--foreground); }

.btn--sm { padding: 0.625rem 1rem; flex-shrink: 0; }
@media (min-width: 640px) { .btn--sm { padding-inline: 1.25rem; } }

/* ---------------------------------------------------------------- header -- */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 40;
  transition: all 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}
/* Visible from the top of the page. is-pinned no longer reveals the bar — it
   only gives it a backdrop once there is content passing underneath. */
.site-header.is-pinned {
  background-color: color-mix(in oklab, var(--background) 80%, transparent);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
}

.site-header__inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  height: 4rem;
}
@media (min-width: 640px) { .site-header__inner { gap: 2rem; } }

.site-header__brand {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-label);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  transition: color 0.3s;
}
.site-header__brand:hover { color: var(--accent); }
@media (min-width: 640px) { .site-header__brand { font-size: 0.7rem; } }

/* ------------------------------------------------------------------ hero -- */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: 3.5rem;
  padding-bottom: 5rem;
}
@media (min-width: 640px) { .hero { padding-top: 5rem; padding-bottom: 7rem; } }

.hero__canvas {
  pointer-events: none;
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  opacity: 0.16;
}


.hero__inner { position: relative; }

.hero__grid { display: grid; gap: 3rem; }
@media (min-width: 640px) { .hero__grid { gap: 3.5rem; } }
@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 5rem;
  }
}

.hero__title {
  margin-top: 0.75rem;
  font-size: 2.7rem;
  line-height: 1.02;
}
@media (min-width: 640px) { .hero__title { margin-top: 0.9rem; font-size: 4.5rem; } }
@media (min-width: 1024px) { .hero__title { font-size: 5.4rem; } }
.hero__title span { display: block; color: var(--accent); }

.hero__lede { margin-top: 2rem; font-size: 1.5rem; line-height: 2rem; }
@media (min-width: 640px) { .hero__lede { font-size: 1.875rem; line-height: 2.25rem; } }

.hero__body { margin-top: 1.5rem; max-width: 36rem; display: flex; flex-direction: column; gap: 1.25rem; }

.hero__note {
  margin-top: 1.75rem;
  font-family: var(--font-label);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.hero__actions {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.hero__meta {
  margin-top: 2rem;
  max-width: 32rem;
  font-family: var(--font-label);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  line-height: 1.625;
  color: var(--muted-foreground);
}

.hero__figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background-color: var(--surface);
}
.hero__video {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  background-color: color-mix(in oklab, var(--surface-2) 40%, transparent);
}
.hero__video iframe { position: absolute; inset: 0; height: 100%; width: 100%; }
/* The first law, sitting above the video. It reads faint until you hover, when
   a band of cherry travels through the letterforms and off the other side —
   the energy passes through, it is not created there and not destroyed. Two
   backgrounds clipped to the text: a constant faint white, and the moving band
   over it. The glyph fill has to be transparent for either to show. */
.hero__law {
  margin-bottom: 0.9rem;
  font-family: var(--font-label);
  font-size: 0.66rem;
  line-height: 1.7;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image:
    linear-gradient(100deg,
      transparent 38%,
      color-mix(in oklab, var(--brand) 85%, #ffffff) 50%,
      transparent 62%),
    linear-gradient(rgb(255 255 255 / 0.3), rgb(255 255 255 / 0.3));
  background-size: 320% 100%, 100% 100%;
  background-position: 160% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  transition: background-position 1.5s var(--ease);
}
@media (min-width: 640px) { .hero__law { font-size: 0.72rem; } }

.hero__figure:hover .hero__law,
.hero__law:hover { background-position: -60% 0, 0 0; }

@media (prefers-reduced-motion: reduce) {
  .hero__law { transition: none; }
  .hero__figure:hover .hero__law,
  .hero__law:hover { background-position: 160% 0, 0 0; }
}

.hero__caption {
  padding: 1rem 1.25rem;
  font-family: var(--font-label);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted-foreground);
}

/* ----------------------------------------------------------------- press -- */
.press { padding-block: 3.5rem; }

.press__viewport {
  position: relative;
  margin-top: 2rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
}

.press__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 3.5rem;
  padding-inline: 1.5rem;
  animation: marquee 55s linear infinite;
}
@media (min-width: 640px) { .press__track { gap: 5rem; } }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.press__item { display: flex; flex-shrink: 0; align-items: center; gap: 1.5rem; }

.press__item img {
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
  opacity: 0.6;
  filter: grayscale(1);
  transition: opacity 0.5s, filter 0.5s;
}
.press__item:hover img { opacity: 1; filter: grayscale(0); }

@media (prefers-reduced-motion: reduce) {
  .press__track { animation: none; }
}

/* logo heights mirror the original per-brand sizing */
.logo-dragons-den   { height: 1.75rem; }
.logo-bbc-one       { height: 2.25rem; }
.logo-abc           { height: 2.5rem; }
.logo-showtime      { height: 1.5rem; }
.logo-stylist       { height: 1.25rem; }
.logo-vogue         { height: 1.25rem; }
.logo-la-times      { height: 2.5rem; }
.logo-eco-business  { height: 1.5rem; }
.logo-maddyness     { height: 1.25rem; }
.logo-tv-tokyo      { height: 2rem; }
.logo-quotidien     { height: 2.5rem; }
@media (min-width: 640px) {
  .logo-dragons-den  { height: 2.5rem; }
  .logo-bbc-one      { height: 3rem; }
  .logo-abc          { height: 3.5rem; }
  .logo-showtime     { height: 2.25rem; }
  .logo-stylist      { height: 2rem; }
  .logo-vogue        { height: 2rem; }
  .logo-la-times     { height: 3.5rem; }
  .logo-eco-business { height: 2.25rem; }
  .logo-maddyness    { height: 2rem; }
  .logo-tv-tokyo     { height: 2.75rem; }
  .logo-quotidien    { height: 3.5rem; }
}

/* ----------------------------------------------------------- section head -- */
.section__head { max-width: 42rem; }
.section__head--wide { max-width: 48rem; }
.section__title { margin-top: 1.5rem; font-size: 2.25rem; line-height: 2.5rem; }
@media (min-width: 640px) { .section__title { font-size: 3.75rem; line-height: 1; } }
.section__intro { margin-top: 1.5rem; }
.section__note { margin-top: 1rem; font-family: var(--font-label); font-size: 0.875rem; color: var(--accent); }

/* ----------------------------------------------------------------- paths -- */
.paths__grid { margin-top: 3.5rem; display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .paths__grid { grid-template-columns: 1fr 1fr; } }
.paths__wide { margin-top: 1.5rem; }

.card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  padding: 2rem;
  background-color: var(--surface);
  transition: background-color 0.3s;
}
@media (min-width: 640px) { .card { padding: 2.5rem; } }
.card--accent { background-color: var(--accent-soft); }

.card__kicker {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.06;
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--muted-foreground);
}
.card__title {
  margin-top: 0.25rem;
  font-size: 2.25rem;
  line-height: 2.5rem;
  min-height: 4.5rem;
}
@media (min-width: 640px) { .card__title { font-size: 3rem; line-height: 1; min-height: 7.5rem; } }
.card__title--auto { min-height: 0; }
@media (min-width: 640px) { .card__title--auto { min-height: 0; } }

.card__body { margin-top: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.card__foot { margin-top: auto; padding-top: 2.25rem; }
.card__foot--narrow { margin-top: 2rem; max-width: 28rem; padding-top: 0; }
.card__support {
  margin-top: 1rem;
  font-size: 0.75rem;
  line-height: 1.625;
  color: var(--muted-foreground);
}

/* ------------------------------------------------------------- framework -- */
.equation {
  margin-top: 3rem;
  text-align: center;
  font-size: 2.9rem;
  line-height: 1;
  color: var(--accent);
  overflow-wrap: break-word;
}
@media (min-width: 640px) { .equation { font-size: 7rem; } }

.framework__grid { margin-top: 3rem; display: grid; gap: 3rem; }
@media (min-width: 1024px) { .framework__grid { grid-template-columns: 1fr 1fr; } }

.framework__col { display: flex; flex-direction: column; gap: 1.25rem; }
.framework__punch { padding-top: 0.5rem; font-size: 1.5rem; line-height: 2rem; }
.framework__punch--accent { font-size: 1.5rem; line-height: 2rem; color: var(--accent); }

.panel { border-radius: var(--radius); background-color: var(--surface); padding: 2rem; }
@media (min-width: 640px) { .panel { padding: 2.5rem; } }

.panel__formula { margin-top: 1.5rem; font-size: 1.5rem; line-height: 1.25; }
@media (min-width: 640px) { .panel__formula { font-size: 1.875rem; } }
.panel__formula span { color: var(--accent); }

.panel__notes { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.panel__notes p { font-size: 0.875rem; line-height: 1.625; color: var(--muted-foreground); }
@media (min-width: 1024px) { .panel__notes p { font-size: 0.95rem; } }

.panel__dl {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border-top: 1px solid var(--border);
  padding-top: 2rem;
}
.panel__dl dd { margin-top: 0.5rem; font-size: 1.25rem; line-height: 1.75rem; }
.panel__dl dd.is-accent { color: var(--accent); }

/* An actual inverted pyramid, not a stack of boxes: each level is a trapezoid
   slice cut with clip-path, and the slices share edges so they read as one
   solid triangle narrowing to physics at the point. column-reverse puts physics
   at the bottom while the source order still runs physics -> behavior, which is
   the direction the argument goes and what a screen reader should hear. */
.chain { margin-top: 4rem; }

.chain__title {
  margin-bottom: 2rem;
  text-align: center;
  font-family: var(--font-label);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: rgb(255 255 255 / 0.72);
}
@media (min-width: 640px) { .chain__title { font-size: 0.95rem; } }

.chain__stack {
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 3px;
  list-style: none;
}
.chain__level {
  display: flex;
  justify-content: center;
  transition: background-color 0.4s var(--ease);
}

.chain__level:nth-child(1) { clip-path: polygon(38.00% 0, 62.00% 0, 50% 100%); }
.chain__level:nth-child(2) {
  clip-path: polygon(30.40% 0, 69.60% 0, 62.00% 100%, 38.00% 100%);
  background-color: color-mix(in oklab, var(--brand) 30%, transparent);
}
.chain__level:nth-child(3) {
  clip-path: polygon(22.80% 0, 77.20% 0, 69.60% 100%, 30.40% 100%);
  background-color: color-mix(in oklab, var(--brand) 23%, transparent);
}
.chain__level:nth-child(4) {
  clip-path: polygon(15.20% 0, 84.80% 0, 77.20% 100%, 22.80% 100%);
  background-color: color-mix(in oklab, var(--brand) 18%, transparent);
}
.chain__level:nth-child(5) {
  clip-path: polygon(7.60% 0, 92.40% 0, 84.80% 100%, 15.20% 100%);
  background-color: color-mix(in oklab, var(--brand) 14%, transparent);
}
.chain__level:nth-child(6) {
  clip-path: polygon(0.00% 0, 100.00% 0, 92.40% 100%, 7.60% 100%);
  background-color: color-mix(in oklab, var(--brand) 10%, transparent);
}

/* The point of the pyramid: time, in white, under physics. */
.chain__tip {
  align-items: flex-start;
  min-height: 6rem;
  background-color: #f4f2ee;
}
/* beats `.chain span.chain__label`, which is (0,2,1) and would keep it white */
.chain .chain__tip span.chain__label { color: #141414; padding-top: 0.85rem; }

.chain span.chain__label {
  padding: 0.95rem 1rem;
  text-wrap: balance;
  font-family: var(--font-label);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  text-align: center;
  color: rgb(255 255 255 / 0.88);
}
@media (min-width: 640px) { .chain span.chain__label { font-size: 0.95rem; } }
@media (min-width: 1024px) { .chain span.chain__label { font-size: 1.05rem; } }

@media (max-width: 640px) {
  /* A shallower taper on narrow screens: at the desktop angle the bottom slice
     is too narrow to hold the word PHYSICS, and clip-path would cut it. */
  .chain__level:nth-child(1) { clip-path: polygon(18.00% 0, 82.00% 0, 50% 100%); }
  .chain__level:nth-child(2) { clip-path: polygon(14.40% 0, 85.60% 0, 82.00% 100%, 18.00% 100%); }
  .chain__level:nth-child(3) { clip-path: polygon(10.80% 0, 89.20% 0, 85.60% 100%, 14.40% 100%); }
  .chain__level:nth-child(4) { clip-path: polygon(7.20% 0, 92.80% 0, 89.20% 100%, 10.80% 100%); }
  .chain__level:nth-child(5) { clip-path: polygon(3.60% 0, 96.40% 0, 92.80% 100%, 7.20% 100%); }
  .chain__level:nth-child(6) { clip-path: polygon(0.00% 0, 100.00% 0, 96.40% 100%, 3.60% 100%); }
}
}
}
@media (min-width: 640px) { .chain__arrow { font-size: 1.5rem; } }

/* -------------------------------------------------------------- carousel -- */
.carousel__head {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .carousel__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}
.carousel__nav { display: flex; flex-shrink: 0; gap: 0.5rem; }
.carousel__btn {
  display: flex;
  height: 2.75rem;
  width: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  color: var(--muted-foreground);
  transition: background-color 0.3s, color 0.3s;
}
.carousel__btn:hover { background-color: var(--surface); color: var(--accent); }
.carousel__btn svg { width: 1rem; height: 1rem; }

.carousel__viewport { margin-top: 3rem; overflow: hidden; }
.carousel__track {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.quote {
  display: flex;
  min-width: 0;
  flex-shrink: 0;
  flex-basis: 100%;
  flex-direction: column;
  border-radius: var(--radius);
  background-color: var(--surface);
  padding: 2rem;
}
@media (min-width: 640px) { .quote { flex-basis: 52%; } }
@media (min-width: 1024px) { .quote { flex-basis: 36%; } }

.quote blockquote {
  margin-top: 1.5rem;
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.625;
  color: rgb(255 255 255 / 0.9);
}
@media (min-width: 1024px) { .quote blockquote { font-size: 1.05rem; } }

.quote figcaption {
  margin-top: 2rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  font-family: var(--font-label);
  font-size: 0.75rem;
  line-height: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted-foreground);
}

.carousel__dots { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.carousel__dots > div { display: flex; gap: 0.375rem; }
.carousel__dot {
  height: 1px;
  width: 1.75rem;
  background-color: var(--border);
  transition: background-color 0.3s;
}
.carousel__dot.is-active { background-color: var(--accent); }

/* ----------------------------------------------------------------- about -- */
.about__grid { margin-top: 3rem; display: grid; gap: 3.5rem; }
@media (min-width: 1024px) { .about__grid { grid-template-columns: 1.1fr 0.9fr; } }
.about__prose { max-width: 42rem; display: flex; flex-direction: column; gap: 1.25rem; }

.stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background-color: var(--border);
}
@media (min-width: 640px) { .stats { grid-template-columns: 1fr 1fr; } }
.stats__cell { background-color: var(--surface); padding: 1.25rem; }
@media (min-width: 640px) { .stats__cell { padding: 1.5rem; } }
.stats__value {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.06;
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--accent);
  overflow-wrap: break-word;
}
@media (min-width: 640px) { .stats__value { font-size: 1.5rem; line-height: 2rem; } }
.stats__label { margin-top: 0.5rem; }

/* ------------------------------------------------------------------- cta -- */
.cta { padding-block: 6rem; }
@media (min-width: 640px) { .cta { padding-block: 8rem; } }
.cta__title { max-width: 52rem; font-size: 3rem; line-height: 1; }
@media (min-width: 640px) { .cta__title { font-size: 4.5rem; line-height: 1; } }
.cta__grid { margin-top: 3.5rem; display: grid; align-items: stretch; gap: 1.5rem; }
@media (min-width: 768px) { .cta__grid { grid-template-columns: repeat(3, 1fr); } }
.cta__card { display: flex; flex-direction: column; border-radius: var(--radius); background-color: var(--surface); padding: 2rem; }
.cta__card p { min-height: 4rem; font-size: 1.5rem; line-height: 2rem; }
.cta__card > div { margin-top: auto; padding-top: 2rem; }

/* ------------------------------------------------------------ newsletter -- */
.newsletter { padding-block: 4rem; }
@media (min-width: 640px) { .newsletter { padding-block: 5rem; } }
.newsletter__grid { display: grid; align-items: start; gap: 2.5rem; }
@media (min-width: 640px) { .newsletter__grid { grid-template-columns: 1fr 1fr; } }
.newsletter__copy { max-width: 36rem; }
.newsletter__title { margin-top: 0.75rem; font-size: 1.875rem; line-height: 2.25rem; }
@media (min-width: 640px) { .newsletter__title { font-size: 2.25rem; line-height: 2.5rem; } }
.newsletter__body { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.875rem; line-height: 1.625; color: var(--muted-foreground); }
.newsletter__form { display: flex; flex-direction: column; gap: 1rem; position: relative; }

/* ---------------------------------------------------------------- fields -- */
.field { display: block; }
.field > .eyebrow { display: block; margin-bottom: 0.5rem; }

.input,
.select,
.textarea {
  width: 100%;
  border-radius: 0.375rem;
  border: 1px solid var(--input);
  background-color: color-mix(in oklab, var(--surface-2) 60%, transparent);
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--foreground);
  transition: border-color 0.3s;
}
.input::placeholder,
.textarea::placeholder { color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); }
.input:focus,
.select:focus,
.textarea:focus { border-color: var(--accent); outline: none; }
.input:disabled,
.select:disabled,
.textarea:disabled { cursor: not-allowed; opacity: 0.6; }

.textarea { min-height: 6rem; resize: vertical; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
}
.select option { background-color: var(--surface); color: var(--foreground); }

.field__hint { margin-top: 0.375rem; font-size: 0.75rem; color: var(--muted-foreground); }
.field__error { margin-top: 0.375rem; font-size: 0.75rem; color: var(--destructive); }

.checkbox { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.8125rem; line-height: 1.5; color: var(--muted-foreground); cursor: pointer; }
.checkbox input { margin-top: 0.15rem; width: 1rem; height: 1rem; accent-color: var(--accent); flex-shrink: 0; }

/* honeypot — visually removed, never announced */
.honeypot { pointer-events: none; position: absolute; left: -9999px; opacity: 0; }

/* ---------------------------------------------------------------- footer -- */
.site-footer { padding-block: 3.5rem; }
.site-footer__name { font-size: 1.5rem; line-height: 2rem; }
.site-footer__grid { margin-top: 2.5rem; display: grid; gap: 2.5rem; }
@media (min-width: 640px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }

.social { margin-top: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.social a { display: flex; align-items: flex-start; gap: 0.75rem; transition: color 0.3s; }
.social a:hover { color: var(--accent); }
.social svg { margin-top: 0.125rem; width: 1rem; height: 1rem; flex-shrink: 0; color: var(--muted-foreground); transition: color 0.3s; }
.social a:hover svg { color: var(--accent); }
.social__label { display: block; font-family: var(--font-label); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; }
.social__tag { margin-top: 0.125rem; display: block; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); transition: color 0.3s; }
.social a:hover .social__tag { color: var(--accent); }

.coords { margin-top: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.coords dt { font-family: var(--font-label); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; }
.coords dd { margin-top: 0.125rem; font-size: 0.875rem; line-height: 1.625; color: var(--muted-foreground); }

.legal {
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  font-family: var(--font-label);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted-foreground);
}
@media (min-width: 640px) { .legal { font-size: 0.72rem; } }
.legal a { transition: color 0.3s; }
.legal a:hover { color: var(--accent); }

/* ---------------------------------------------------------------- modals -- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: color-mix(in oklab, var(--background) 80%, transparent);
  backdrop-filter: blur(4px);
  animation: modal-fade 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal[hidden] { display: none; }

.modal__panel {
  position: relative;
  width: 100%;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background-color: var(--surface);
  color: var(--foreground);
  padding: 1.75rem;
  box-shadow: var(--shadow-lift);
  animation: modal-zoom 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@supports (height: 1dvh) { .modal__panel { max-height: calc(100dvh - 2rem); } }
@media (min-width: 640px) { .modal__panel { padding: 2.5rem; } }

.modal__panel--lg { max-width: 42rem; }
.modal__panel--md { max-width: 36rem; }
.modal__panel--sm { max-width: 32rem; }

@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-zoom { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .modal, .modal__panel { animation: none; }
}

.modal__close {
  position: absolute;
  left: 1rem;
  top: 1rem;
  color: var(--muted-foreground);
  transition: color 0.3s;
  line-height: 0;
}
.modal__close:hover { color: var(--foreground); }
.modal__close svg { width: 1rem; height: 1rem; }

.modal__form { display: flex; flex-direction: column; gap: 1.75rem; }
.modal__header { display: flex; flex-direction: column; gap: 0.75rem; }
.modal__title { font-size: 1.875rem; line-height: 2.25rem; }
@media (min-width: 640px) { .modal__title { font-size: 2.25rem; line-height: 2.5rem; } }
.modal__desc { font-size: 0.875rem; line-height: 1.625; color: var(--muted-foreground); }

.modal__steps { display: flex; gap: 0.375rem; padding-top: 0.25rem; }
.modal__steps span { height: 1px; width: 4rem; background-color: var(--border); }
.modal__steps span.is-active { background-color: var(--accent); }

.modal__grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .modal__grid { grid-template-columns: 1fr 1fr; } }
.modal__grid .span-2 { grid-column: 1 / -1; }

.modal__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.modal__done { display: flex; flex-direction: column; gap: 1.25rem; padding-block: 1.5rem; }

.modal__disclaimer {
  border-left: 1px solid var(--border);
  padding-left: 1rem;
  font-size: 0.75rem;
  line-height: 1.625;
  color: var(--muted-foreground);
}

/* entry pop-up runs a light palette, flipping to crimson on success */
.modal__panel--entry {
  --background: #ffffff;
  --foreground: #141414;
  --surface: #ffffff;
  --surface-2: #f4f4f2;
  --muted-foreground: #5a5a5a;
  --border: rgba(20, 20, 20, 0.12);
  --border-strong: rgba(20, 20, 20, 0.24);
  --input: rgba(20, 20, 20, 0.18);
  --destructive: var(--brand);
}
.modal__panel--entry.is-done {
  --background: var(--brand);
  --foreground: #ffffff;
  --surface: var(--brand);
  --surface-2: var(--brand-deep);
  --muted-foreground: rgba(255, 255, 255, 0.78);
  --border: rgba(255, 255, 255, 0.22);
  --border-strong: rgba(255, 255, 255, 0.4);
  --input: rgba(255, 255, 255, 0.3);
  --accent: #141414;
  --accent-foreground: #ffffff;
  --destructive: #ffffff;
}
.modal__panel--entry .modal__title { text-transform: uppercase; letter-spacing: -0.025em; }
.modal__panel--entry .input { background-color: #fff; color: #000; }
.modal__panel--entry .input::placeholder { color: rgba(0, 0, 0, 0.4); }
.modal__panel--entry .modal__fine { font-size: 0.75rem; line-height: 1.625; color: rgba(0, 0, 0, 0.5); }
.modal__panel--entry.is-done .modal__fine { color: rgba(255, 255, 255, 0.7); }

.spinner { width: 1rem; height: 1rem; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

body.is-locked { overflow: hidden; }

/* ------------------------------------------------------------ essay pages -- */
.doc { margin-inline: auto; width: 100%; max-width: 46rem; padding: 6rem 1.5rem 4rem; }
.doc__back {
  font-family: var(--font-label);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted-foreground);
  transition: color 0.3s;
}
.doc__back:hover { color: var(--accent); }
.doc__eyebrow { margin-top: 2.5rem; }
.doc__title { margin-top: 1.5rem; font-size: 3rem; line-height: 1; }
@media (min-width: 640px) { .doc__title { font-size: 4.5rem; line-height: 1; } }
.doc__sub { margin-top: 1.25rem; font-size: 1.5rem; line-height: 2rem; color: var(--muted-foreground); }
.doc__byline { margin-top: 1.5rem; font-family: var(--font-label); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--accent); }

.essay { margin-top: 3rem; }
.essay h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.015em; margin-top: 4rem; font-size: 1.875rem; line-height: 2.25rem; }
@media (min-width: 640px) { .essay h2 { font-size: 2.25rem; line-height: 2.5rem; } }
.essay h3 { font-family: var(--font-display); font-weight: 500; margin-top: 2.5rem; font-size: 1.5rem; line-height: 2rem; }
.essay p { margin-top: 1.25rem; font-size: 0.98rem; line-height: 1.75; color: var(--muted-foreground); }
.essay .lead { margin-top: 2rem; font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 2rem; color: var(--foreground); }
@media (min-width: 640px) { .essay .lead { font-size: 1.875rem; line-height: 2.25rem; } }
.essay .callout { margin-top: 1.5rem; font-family: var(--font-label); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); }
.essay .equation-block { margin-block: 2.5rem; text-align: center; font-family: var(--font-display); font-weight: 500; font-size: 3.75rem; line-height: 1; color: var(--accent); }
@media (min-width: 640px) { .essay .equation-block { font-size: 6rem; line-height: 1; } }
.essay ul, .essay ol { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; list-style: none; }
.essay li { font-size: 0.95rem; line-height: 1.625; color: rgb(255 255 255 / 0.85); }
.essay hr { margin-block: 3.5rem; border-top: 1px solid var(--border); }
.essay dl { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.5rem; border-left: 1px solid var(--border); padding-left: 1.5rem; }
.essay dt { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; line-height: 1.75rem; }
.essay dd { margin-top: 0.5rem; font-size: 0.95rem; line-height: 1.625; color: var(--muted-foreground); }
.essay blockquote { margin-top: 2rem; border-left: 1px solid var(--accent); padding-left: 1.5rem; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.3; }

/* ---------------------------------------------------------- press quotes -- */
.press-quotes { margin-top: 3.5rem; display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .press-quotes { grid-template-columns: repeat(3, 1fr); } }
.press-quotes blockquote {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  font-size: 1.125rem;
  line-height: 1.375;
}
@media (min-width: 640px) { .press-quotes blockquote { font-size: 1.25rem; } }
.press-quotes cite { margin-top: 1rem; display: block; font-style: normal; }

/* ----------------------------------------------------------- reviews page -- */
.reviews { padding-top: 6rem; padding-bottom: 2.5rem; }
.reviews__heading { margin-top: 2rem; max-width: 48rem; font-size: 3rem; line-height: 1; }
@media (min-width: 640px) { .reviews__heading { font-size: 4.5rem; line-height: 1; } }
.reviews__intro { margin-top: 1.5rem; max-width: 36rem; }
.reviews__section { padding-block: 4rem; margin-top: 4rem; }
.reviews__title { margin-top: 1.25rem; font-size: 1.875rem; line-height: 2.25rem; }
@media (min-width: 640px) { .reviews__title { font-size: 2.25rem; line-height: 2.5rem; } }
.reviews__grid { margin-top: 2.5rem; display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .reviews__grid { grid-template-columns: 1fr 1fr; } }
.review-card { border-radius: var(--radius); background-color: var(--surface); padding: 1.75rem; }
.review-card blockquote { font-size: 0.93rem; line-height: 1.625; color: rgb(255 255 255 / 0.9); }
.review-card cite { margin-top: 1.5rem; display: block; font-style: normal; }

/* ------------------------------------------------------------------- 404 -- */
.notfound {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding-inline: 1rem;
  background-color: var(--background);
}
.notfound__inner { max-width: 28rem; text-align: center; }
.notfound__code { font-size: 4.5rem; line-height: 1; font-weight: 700; }
.notfound__title { margin-top: 1rem; font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; }
.notfound__body { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }
.notfound__action { margin-top: 1.5rem; }

/* ------------------------------------------------------------------- faq -- */
/* Entity-resolution content: the questions search engines and generative
   systems ask about Carina, answered in crawlable text rather than left to be
   inferred from the rest of the page. */
.faq__grid { margin-top: 3.5rem; display: grid; }
@media (min-width: 1024px) { .faq__grid { grid-template-columns: 1fr 1fr; column-gap: 4rem; } }
.faq__item { padding-block: 1.75rem; border-top: 1px solid var(--border); }
.faq__q { font-size: 1.5rem; line-height: 1.9rem; }
.faq__a {
  margin-top: 0.75rem;
  margin-inline-start: 0;
  font-size: 0.95rem;
  line-height: 1.625;
  color: var(--muted-foreground);
}
@media (min-width: 1024px) { .faq__a { font-size: 1.05rem; } }
.review-card__role { margin-top: 0.5rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }


/* ==========================================================================
   Material system
   Shape hierarchy, a single light source, cherry-as-light, and one easing
   curve. Appended deliberately: every selector below is a single class that
   already exists above, so these win on source order without specificity
   tricks, and the component rules stay readable where they were written.
   ========================================================================== */

/* -------------------------------------------------------------- grain -- */
/* Flat black is what reads as cheap. A ~3% noise field gives the dark ground
   a material. Fixed, so it does not scroll with content; z-index 1 keeps it
   above static content but under the header and modals (z-index 50). */
body::after {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 1;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------- shape scale -- */
/* Every box was the same 0.5rem box, which is the template signature. Three
   shapes now carry meaning: asymmetric for the things you can act on, sharp
   for editorial matter, pill for tags. */
.card,
.cta__card {
  border-radius: var(--radius-lg) var(--radius-sharp) var(--radius-lg) var(--radius-sharp);
}
.panel,
.quote,
.stats__cell { border-radius: var(--radius-sharp); }

/* ------------------------------------------------------------ lighting -- */
/* A lit top rim plus cast shade is what separates a surface from a fill. */
.card,
.cta__card,
.panel,
.stats__cell {
  box-shadow: var(--edge-light);
  transition: box-shadow 0.5s var(--ease), transform 0.5s var(--ease), background-color 0.3s var(--ease);
}
.card:hover,
.cta__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--edge-light), var(--shadow-lift);
}

/* The editorial panels take a cherry hairline instead of a border box. */
.panel { border-top: 1px solid color-mix(in oklab, var(--brand) 60%, transparent); }

/* --------------------------------------------------- cherry as light -- */
/* Solid cherry stays rare. These are the places it behaves like emitted
   energy, which is also the argument the page is making. */
.hero::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 75% at 50% -12%, color-mix(in oklab, var(--brand) 26%, transparent), transparent 62%);
}
.equation { text-shadow: var(--glow-brand); }
.hero__title span { text-shadow: 0 0 70px color-mix(in oklab, var(--brand) 40%, transparent); }

/* ---------------------------------------------------------- type scale -- */
/* Luxury reads as contrast in scale, not as ornament: the serif statements go
   larger and tighter, the mono eyebrows stay small. */
/* Width lives on the titles now: open tracking on the serif rather than the
   tight negative it carried before. */
.section__title,
.cta__title,
.hero__title { letter-spacing: 0.025em; }

/* Break the display headings evenly instead of dropping a stray word onto its
   own line — "What are you / working on?" and "The view from the / other side"
   were both cutting mid-phrase. */
.section__title,
.cta__title,
.card__title { text-wrap: balance; }
.card__title { letter-spacing: 0.02em; }
@media (min-width: 1024px) {
  .section__title { font-size: 4.25rem; }
  .cta__title { font-size: 5rem; }
}

/* ------------------------------------------------------- shared motion -- */
.btn,
.social a,
.social svg,
.social__tag,
.legal a,
.carousel__btn,
.site-header__brand,
.press__item img { transition-timing-function: var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .card:hover,
  .cta__card:hover { transform: none; }
}


/* --------------------------------------------------------------- dragon -- */
/* The canvas only covers the viewport; its mesh follows document coordinates. */
body { position: relative; }
main,
.site-footer { position: relative; z-index: 1; }

.dragon {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0.42;
}
.dragon canvas { display: none; width: 100%; height: 100%; }
.dragon__geometry { position: absolute; width: 0; height: 0; overflow: hidden; }
.dragon__fallback {
  position: absolute;
  top: 90px;
  right: -12%;
  width: min(1100px, 110vw);
  height: auto;
}
.dragon--flowing canvas { display: block; }
.dragon--flowing .dragon__fallback { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .dragon { position: absolute; height: 600px; opacity: 0.3; }
}

/* ------------------------------------------------------- pop-up wipe -- */
/* The white-to-cherry flip is the most distinctive moment on the site, so it
   sweeps rather than swaps. The panel's own background is held at white in the
   success state and the cherry is supplied by an overlay that scales up from
   the bottom edge; the text colour follows once the wipe has passed under it.
   No overflow:hidden here — .modal__panel needs overflow-y:auto to stay
   scrollable on short screens — so the overlay inherits the corner radius
   instead of being clipped by the panel. */
.modal__panel--entry::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background-color: var(--brand);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 0.55s var(--ease);
}
.modal__panel--entry.is-done { background-color: #ffffff; }
.modal__panel--entry.is-done::before { transform: scaleY(1); }

/* Content rides above the wipe, and catches up to it. The close button is
   excluded: it is positioned absolute in the panel's corner, and giving it
   position: relative drops it into the content flow beside the title. */
.modal__panel--entry > *:not(.modal__close) { position: relative; z-index: 1; }
.modal__panel--entry > .modal__close { z-index: 2; }
.modal__panel--entry.is-done > * { transition: color 0.35s var(--ease) 0.3s; }

@media (prefers-reduced-motion: reduce) {
  .modal__panel--entry::before { transition: none; }
}


/* ----------------------------------------------------------- path cards -- */
/* One transparency family: each card is a tint of the same strength over the
   page, rather than one flat fill and one 10% wash. */
/* Black behind all three, at one alpha. A white tint let the dragon through and
   left the panels reading grey and washed out. */
.card { background-color: rgb(0 0 0 / 0.72); }
.card--accent { background-color: rgb(58 2 17 / 0.78); }

/* Path C runs a light panel, the same token-flip the entry pop-up uses. */
/* Same 16% alpha as the other two, so all three are one material. The text
   stays the site's own light palette: black on this ground measures 1.28:1,
   white measures 14.35:1. */
/* The partnership box keeps its own treatment: 16% white, the state chosen
   after measuring contrast. The black backing applies to the other two only. */
.card--light {
  background-color: color-mix(in oklab, #ffffff 16%, transparent);
  backdrop-filter: blur(14px);
}
/* the dark cards get the same treatment so the three read as one material */
.card:not(.card--light) { backdrop-filter: blur(14px); }

.btn--ink { background-color: #141414; color: #ffffff; }
.btn--ink:hover { background-color: #000000; }