/* =========================================================================
   Iara Jardini — Creative Portfolio
   Palette, type and crops sampled from the source Artistic Portfolio PDF.
   No JavaScript: motion is native CSS scroll-driven animation.
   ========================================================================= */

@layer reset, base, layout, components, motion;

/* ---------------------------------------------------------------- tokens */
:root {
  color-scheme: dark;
  /* required for the View all panel to transition to its natural height */
  interpolate-size: allow-keywords;

  /* tier 1 — literal */
  --ink-900: #070504;
  --ink-800: #0c0907;
  --ink-700: #14100c;
  --ink-600: #1e1812;
  --cream:   #f6efe6;
  --sand:    #c7b39c;
  --muted:   #a8937c;
  --gold:    #d8ad57;
  --ember:   #ff7a18;
  --rust:    #8f4a1e;

  /* tier 2 — semantic */
  --bg: var(--ink-900);
  --bg-raised: var(--ink-800);
  --fg: var(--cream);
  --fg-dim: var(--muted);
  --accent: var(--gold);
  --rule: color-mix(in oklab, var(--cream) 14%, transparent);

  --font-display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --font-body: "Alice", Georgia, "Times New Roman", serif;
  --font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* rhythm */
  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --section: clamp(6rem, 14vh + 5vw, 14rem);
  --measure: 62ch;

  /* gradient interpolation guard (older browsers) */
  --in-oklab: ;
}
@supports (background: linear-gradient(in oklab, white, black)) {
  :root { --in-oklab: in oklab; }
}

/* ---------------------------------------------------------------- reset */
@layer reset {
  html { box-sizing: border-box; }
  body, h1, h2, h3, p, figure, dl, dd, blockquote { margin: 0; }
  *, ::before, ::after { box-sizing: inherit; }

  img { display: block; max-inline-size: 100%; height: auto; }
  a { color: inherit; }
  button { font: inherit; color: inherit; background: none; border: 0; }
  dl, dd { padding: 0; }
}

/* ---------------------------------------------------------------- base */
@layer base {
  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }

  body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
    line-height: 1.75;
    overflow-x: hidden;
    scrollbar-color: #4a3524 var(--ink-800);
    text-rendering: optimizeLegibility;
  }

  /* filmic grain — decorative only */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  @media (forced-colors: active) {
    body::after { display: none; }
  }

  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-optical-sizing: auto;
    line-height: 0.95;
    letter-spacing: -0.015em;
    text-wrap: balance;
  }
  h2 { font-size: clamp(2.75rem, 1.5rem + 6vw, 7rem); }
  h3 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem); }

  p { text-wrap: pretty; overflow-wrap: break-word; }

  em { font-style: italic; color: var(--accent); }

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

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

  .skip {
    position: absolute;
    inset-block-start: -4rem;
    inset-inline-start: 1rem;
    z-index: 300;
    padding: 0.75rem 1.25rem;
    background: var(--gold);
    color: var(--ink-900);
    text-decoration: none;
  }
  .skip:focus { inset-block-start: 1rem; }
}

/* ---------------------------------------------------------------- shared */
@layer components {
  .eyebrow {
    font-family: var(--font-mono);
    font-size: clamp(0.65rem, 0.6rem + 0.2vw, 0.78rem);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    line-height: 1.6;
  }

  .lede {
    max-inline-size: 46ch;
    font-size: clamp(1.05rem, 1rem + 0.5vw, 1.35rem);
    color: var(--fg-dim);
  }

  .prose p + p { margin-block-start: 1.35em; }
  .prose { max-inline-size: var(--measure); color: color-mix(in oklab, var(--cream) 82%, transparent); }

  .facts {
    display: grid;
    gap: 1px;
    margin-block-start: clamp(2rem, 4vw, 3.5rem);
    background: var(--rule);
    border-block: 1px solid var(--rule);
  }
  .facts > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    justify-content: space-between;
    padding-block: 0.9rem;
    background: var(--bg);
  }
  .facts dt {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-dim);
  }
  .facts dd { font-size: 0.95rem; }
  .facts--wide { max-inline-size: 48rem; margin-inline: auto; }

  .btn {
    display: inline-block;
    margin-block-start: clamp(2rem, 4vw, 3rem);
    padding: 1rem clamp(1.5rem, 3vw, 2.75rem);
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: clamp(0.8rem, 0.7rem + 0.4vw, 1rem);
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: background 0.4s, color 0.4s, border-color 0.4s;
  }
  .btn:hover,
  .btn:focus-visible {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--ink-900);
  }

  figure {
    background: var(--ink-700);
    border-radius: clamp(0.5rem, 1vw, 1rem);
  }
  figure img {
    inline-size: 100%;
    object-fit: cover;
    border-radius: inherit;
  }
}

/* ---------------------------------------------------------------- nav */
@layer components {
  .nav {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(1rem, 2vw, 1.75rem) var(--gutter);
    isolation: isolate;
  }
  /* backdrop lives on its own layer so the mask never eats the link text */
  .nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom var(--in-oklab),
      color-mix(in oklab, var(--ink-900) 90%, transparent),
      transparent);
    backdrop-filter: blur(7px);
    mask-image: linear-gradient(to bottom, #000 55%, transparent);
  }

  .nav__brand {
    font-family: var(--font-display);
    font-size: clamp(1rem, 0.9rem + 0.4vw, 1.3rem);
    letter-spacing: 0.04em;
    text-decoration: none;
  }

  .nav__links {
    display: flex;
    gap: clamp(1rem, 2.5vw, 2.75rem);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .nav__links a {
    position: relative;
    padding-block: 0.35rem;
    text-decoration: none;
    color: color-mix(in oklab, var(--cream) 78%, transparent);
    transition: color 0.3s;
  }
  .nav__links a::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    inline-size: 0;
    block-size: 1px;
    background: var(--gold);
    transition: inline-size 0.4s;
  }
  .nav__links a:hover,
  .nav__links a:focus-visible { color: var(--gold); }
  .nav__links a:hover::after { inline-size: 100%; }

  .nav__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 0.6rem;
    cursor: pointer;
  }
  .nav__toggle span {
    inline-size: 22px;
    block-size: 1px;
    background: var(--cream);
  }

  .menu {
    position: fixed;
    inset: 0;
    inline-size: 100%;
    max-inline-size: none;
    block-size: 100dvh;
    max-block-size: none;
    margin: 0;
    padding: 0;
    border: 0;
    /* NB: no `display` here on purpose. A closed popover relies on the UA
       `display: none`; setting it unconditionally would leave this
       full-screen panel hit-testable at opacity 0 and swallow every click
       on the page. `display` is set only in :popover-open below. */
    align-content: center;
    justify-items: center;
    gap: clamp(1.25rem, 4vh, 2.5rem);
    background: var(--ink-900);
    color: var(--fg);
    font-family: var(--font-display);
    font-size: clamp(2rem, 9vw, 3.5rem);
    opacity: 0;
    transition: opacity 0.35s, overlay 0.35s allow-discrete, display 0.35s allow-discrete;
  }
  .menu:popover-open {
    display: grid;
    opacity: 1;
  }
  @starting-style { .menu:popover-open { opacity: 0; } }
  /* during the 350ms close transition the panel is still laid out: keep it
     out of hit-testing so it cannot swallow a click on its way out */
  .menu:not(:popover-open) { pointer-events: none; }
  .menu__close {
    position: absolute;
    inset-block-start: clamp(0.5rem, 2vw, 1.25rem);
    inset-inline-end: clamp(0.75rem, 4vw, 1.5rem);
    inline-size: 3rem;
    aspect-ratio: 1;
    font-family: var(--font-body);
    font-size: 2.25rem;
    line-height: 1;
    color: var(--fg-dim);
    cursor: pointer;
    transition: color 0.3s;
  }
  .menu__close:hover,
  .menu__close:focus-visible { color: var(--gold); }

  .menu a { text-decoration: none; }
  .menu a:hover { color: var(--gold); }
  .menu::backdrop { background: var(--ink-900); }

  /* language switch — small enough to stay in the bar at every width, since
     it is the one control a reader may need before anything else loads */
  .lang {
    display: flex;
    gap: 0.2rem;
    align-items: center;
    margin-inline-start: auto;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
  }
  .lang a {
    padding: 0.3rem 0.5rem;
    border-radius: 999px;
    text-decoration: none;
    color: color-mix(in oklab, var(--cream) 55%, transparent);
    transition: color 0.3s, background 0.3s;
  }
  .lang a:hover,
  .lang a:focus-visible { color: var(--fg); }
  .lang a[aria-current="true"] {
    color: var(--gold);
    background: color-mix(in oklab, var(--gold) 14%, transparent);
  }

  @media (width < 60rem) {
    .nav__links { display: none; }
    .nav__toggle { display: flex; }
  }
}

/* ---------------------------------------------------------------- hero */
@layer layout {
  .hero {
    position: relative;
    display: grid;
    align-content: end;
    min-block-size: 100svh;
    padding: var(--gutter);
    padding-block-end: clamp(4rem, 10vh, 8rem);
    overflow: clip;
    isolation: isolate;
  }
  .hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
  }
  /* every slide stacks in the same box; later siblings paint on top, which is
     what makes the crossfade read as one image dissolving into the next */
  .hero__slide {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 64% 72%;
    border-radius: 0;
    opacity: 0;
  }
  /* no motion (or no support): the first frame simply stands still */
  .hero__slide:first-child { opacity: 1; }

  .hero__slide:nth-child(2) { object-position: 56% 48%; }
  .hero__slide:nth-child(3) { object-position: 50% 42%; }
  .hero__slide:nth-child(4) { object-position: 50% 45%; }
  .hero__slide:nth-child(5) { object-position: 60% 45%; }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* The scrim has to hold for ANY slide, not just the dark first one, so the
       title keeps its contrast as the carousel cycles. */
    background:
      radial-gradient(85% 65% at 8% 88% var(--in-oklab),
        color-mix(in oklab, var(--ink-900) 88%, transparent),
        transparent 72%),
      radial-gradient(120% 80% at 75% 65% var(--in-oklab),
        transparent, color-mix(in oklab, var(--ink-900) 72%, transparent) 70%),
      linear-gradient(to top var(--in-oklab),
        var(--ink-900) 2%,
        color-mix(in oklab, var(--ink-900) 62%, transparent) 42%,
        transparent 72%);
  }

  .hero__eyebrow { margin-block-end: clamp(1.5rem, 4vh, 3rem); }

  .hero__title {
    display: grid;
    font-size: clamp(3.5rem, 15vw, 13rem);
    line-height: 0.82;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    text-wrap: nowrap;
  }
  .hero__title span:last-child {
    font-style: italic;
    color: color-mix(in oklab, var(--cream) 92%, var(--gold));
  }

  .hero__roles {
    margin-block-start: clamp(1.25rem, 3vh, 2.25rem);
    font-family: var(--font-mono);
    font-size: clamp(0.7rem, 0.6rem + 0.45vw, 0.95rem);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--sand);
  }
  .hero__roles i { color: var(--ember); font-style: normal; }

  .hero__cue {
    position: absolute;
    inset-block-end: 1.75rem;
    inset-inline-end: var(--gutter);
    inline-size: 1px;
    block-size: clamp(2.5rem, 7vh, 5rem);
    background: var(--rule);
    overflow: hidden;
  }
  .hero__cue span {
    position: absolute;
    inset-inline: 0;
    block-size: 40%;
    background: var(--gold);
    animation: cue 2.4s ease-in-out infinite;
  }
  @keyframes cue {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(250%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero__cue span { animation: none; inset-block-start: 0; }
  }
}

/* ---------------------------------------------------------------- manifesto */
@layer layout {
  .manifesto {
    padding: clamp(6rem, 18vh, 12rem) var(--gutter);
    text-align: center;
  }
  .manifesto p {
    max-inline-size: 24ch;
    margin-inline: auto;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1rem + 4.2vw, 4.75rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
    text-wrap: balance;
  }

  .marquee {
    overflow: clip;
    padding-block: clamp(1rem, 2vw, 1.75rem);
    border-block: 1px solid var(--rule);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  }
  .marquee__track {
    display: flex;
    inline-size: max-content;
    font-family: var(--font-mono);
    font-size: clamp(0.7rem, 0.6rem + 0.4vw, 0.9rem);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--fg-dim);
    animation: slide 38s linear infinite;
  }
  .marquee__track span { padding-inline-end: 1.5rem; }
  @keyframes slide { to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; }
  }
}

/* ---------------------------------------------------------------- journey */
@layer layout {
  .journey {
    display: grid;
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
    padding: var(--section) var(--gutter);
  }
  @media (width >= 60rem) {
    .journey { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
    .journey__media {
      position: sticky;
      inset-block-start: clamp(5rem, 12vh, 9rem);
    }
  }
  .journey__media { overflow: clip; border-radius: clamp(0.5rem, 1vw, 1rem); }
  .journey__media img { aspect-ratio: 2 / 3; }
  .journey h2 { margin-block: 1rem clamp(2rem, 4vw, 3.25rem); }
}

/* ---------------------------------------------------------------- fire */
@layer layout {
  .fire {
    position: relative;
    display: grid;
    align-content: center;
    min-block-size: 100svh;
    padding: clamp(5rem, 12vh, 9rem) var(--gutter);
    overflow: clip;
    isolation: isolate;
  }
  .fire__media { position: absolute; inset: 0; z-index: -2; }
  .fire__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 50% 42%;
    border-radius: 0;
  }
  .fire::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to right var(--in-oklab),
      var(--ink-900) 8%,
      color-mix(in oklab, var(--ink-900) 76%, transparent) 55%,
      color-mix(in oklab, var(--ink-900) 40%, transparent));
  }
  .fire__body { max-inline-size: 58rem; }
  .fire__title {
    margin-block: 1rem clamp(2.5rem, 5vw, 4rem);
    font-size: clamp(3rem, 1.5rem + 7vw, 8rem);
  }
  .fire__cols {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    max-inline-size: 52rem;
    color: color-mix(in oklab, var(--cream) 85%, transparent);
  }
  @media (width >= 48rem) {
    .fire__cols { grid-template-columns: 1fr 1fr; }
  }
}

/* ---------------------------------------------------------------- work */
@layer layout {
  .work {
    padding-block: var(--section);
    content-visibility: auto;
    contain-intrinsic-block-size: auto 320rem;
  }
  .work__head {
    padding-inline: var(--gutter);
    margin-block-end: clamp(4rem, 9vw, 8rem);
  }
  .work__head h2 { margin-block: 1rem 1.75rem; }

  .feature {
    display: grid;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    padding: clamp(3rem, 8vw, 7rem) var(--gutter);
  }
  @media (width >= 62rem) {
    .feature { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
    .feature--flip .feature__text { order: 2; }
  }
  .feature__text h3 { margin-block: 0.9rem 1.5rem; }
  .feature__text p:not(.eyebrow) {
    max-inline-size: 48ch;
    color: color-mix(in oklab, var(--cream) 80%, transparent);
  }
  .feature__text p + p { margin-block-start: 1.2em; }

  .feature__media {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
  }
  .feature__media img { aspect-ratio: 3 / 4; }

  /* Horizontal video carousel: a scroll-snap track, so one clip reads as a
     single player and several become swipeable with no script. */
  .vcarousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in oklab, var(--gold) 55%, transparent) transparent;
  }
  .vcarousel__item {
    scroll-snap-align: center;
    margin: 0;
    background: var(--ink-700);
    border-radius: clamp(0.5rem, 1vw, 1rem);
  }
  .vcarousel video {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: inherit;
  }

  /* three portraits side by side — never let the third orphan onto a new row */
  .feature__media--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feature__media--three img { aspect-ratio: 9 / 14; }

  /* mixed orientations: keep each photo's own proportions, landscape spans */
  .feature__media--stack img { aspect-ratio: auto; }
  .feature__media--stack figure:first-child { grid-column: 1 / -1; }

  @media (width < 36rem) {
    .feature__media--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .feature__media--three figure:last-child { grid-column: span 2; }
    .feature__media--three figure:last-child img { aspect-ratio: 16 / 10; }
  }

  /* full-bleed feature */
  .bleed {
    padding-block: clamp(3rem, 8vw, 7rem);
    background:
      radial-gradient(80% 50% at 50% 0% var(--in-oklab),
        color-mix(in oklab, var(--rust) 26%, transparent), transparent 70%),
      var(--bg);
  }
  .bleed__head {
    max-inline-size: 48rem;
    padding-inline: var(--gutter);
    margin-block-end: clamp(2.5rem, 5vw, 4rem);
  }
  .bleed__head h3 { margin-block: 0.9rem 1.25rem; }
  .bleed__head p:not(.eyebrow) { color: var(--fg-dim); }
  .bleed__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.5rem, 1vw, 0.9rem);
    padding-inline: clamp(0.5rem, 1vw, 0.9rem);
  }
  @media (width >= 56rem) {
    .bleed__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  .bleed__grid img { aspect-ratio: 4 / 5; }

  /* "View all performances" disclosure */
  .viewall {
    padding-block-start: clamp(1rem, 3vw, 2rem);
  }
  .viewall__btn {
    display: block;
    inline-size: fit-content;
    margin-inline: auto;
    padding: 1rem clamp(1.75rem, 4vw, 3rem);
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: clamp(0.72rem, 0.65rem + 0.3vw, 0.85rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-dim);
    cursor: pointer;
    list-style: none;
    transition: background 0.4s, color 0.4s, border-color 0.4s;
  }
  /* kill the default triangle in both engines */
  .viewall__btn::-webkit-details-marker { display: none; }
  .viewall__btn::marker { content: ""; }

  .viewall__btn:hover,
  .viewall__btn:focus-visible {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--ink-900);
  }
  .viewall__less { display: none; }
  .viewall[open] .viewall__more { display: none; }
  .viewall[open] .viewall__less { display: inline; }

  /* Progressive enhancement: where ::details-content is unsupported the panel
     simply snaps open, which is the native behaviour anyway. */
  .viewall::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 0.5s ease, content-visibility 0.5s allow-discrete;
  }
  .viewall[open]::details-content { block-size: auto; }

  @media (prefers-reduced-motion: reduce) {
    .viewall::details-content { transition: none; }
  }

  /* card grid */
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 2.5vw, 2.5rem);
    padding: clamp(3rem, 8vw, 7rem) var(--gutter);
  }
  .card figure { margin-block-end: 1.5rem; overflow: clip; border-radius: clamp(0.5rem, 1vw, 1rem); }
  .card img {
    aspect-ratio: 3 / 4;
    transition: scale 0.9s cubic-bezier(0.2, 0.7, 0.3, 1), filter 0.9s;
    filter: saturate(0.92);
  }
  .card:hover img { scale: 1.05; filter: saturate(1.1); }
  .card h3 {
    margin-block: 0.6rem 0.75rem;
    font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.8rem);
  }
  .card p:not(.eyebrow) {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--fg-dim);
  }
}

/* ---------------------------------------------------------------- kiva */
@layer layout {
  .kiva {
    padding-block: var(--section);
    background:
      radial-gradient(70% 45% at 15% 10% var(--in-oklab),
        color-mix(in oklab, var(--rust) 24%, transparent), transparent 70%),
      var(--ink-800);
    content-visibility: auto;
    contain-intrinsic-block-size: auto 340rem;
  }
  .kiva__head {
    padding-inline: var(--gutter);
    margin-block-end: clamp(3rem, 7vw, 6rem);
  }
  .kiva__head h2 { margin-block: 1rem 1.75rem; }

  .kiva__story {
    display: grid;
    gap: clamp(2rem, 5vw, 5rem);
    padding-inline: var(--gutter);
  }
  .kiva__aside { margin-block-start: clamp(2rem, 4vw, 3rem); }
  .kiva__aside img { aspect-ratio: 3 / 2; }

  @media (width >= 62rem) {
    .kiva__story { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    /* The text column (copy + a photo of known ratio) decides the row height.
       The tall portrait then fills that height as an absolutely positioned
       layer, so it contributes nothing back to sizing — if it did, its own
       height would drive the row and the gap would just move columns. */
    .kiva__hero {
      position: relative;
      min-block-size: 22rem;
      overflow: clip;
    }
    .kiva__hero img {
      position: absolute;
      inset: 0;
      block-size: 100%;
      aspect-ratio: auto;
    }
  }
  .kiva__hero img { aspect-ratio: 2 / 3; }
  .kiva__text h3 { margin-block: 0.9rem 1.5rem; }
  .kiva__text p:not(.eyebrow) {
    max-inline-size: 46ch;
    color: color-mix(in oklab, var(--cream) 82%, transparent);
  }
  .kiva__text p + p { margin-block-start: 1.2em; }
  .kiva__text .facts > div { background: var(--ink-800); }

  /* The catalogue: one piece per row, its photos beside the description and
     alternating sides down the page. The photo row scrolls sideways on a
     phone, where three columns of a portrait crop would be unreadable. */
  .kiva__pieces {
    padding: clamp(3.5rem, 8vw, 7rem) var(--gutter) 0;
  }
  .kiva__pieces-title {
    margin-block-end: clamp(2rem, 4vw, 3rem);
    font-size: clamp(1.35rem, 1.1rem + 0.9vw, 2rem);
  }
  .kpiece {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    padding-block: clamp(2.5rem, 5vw, 4rem);
    border-block-start: 1px solid var(--rule);
  }
  .kpiece__text h4 {
    margin-block: 0.8rem 1.25rem;
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem);
  }
  .kpiece__text p:not(.eyebrow) {
    max-inline-size: 44ch;
    color: color-mix(in oklab, var(--cream) 82%, transparent);
    line-height: 1.7;
  }
  .kpiece__text p + p { margin-block-start: 1.2em; }
  .kpiece__text .facts { margin-block-start: clamp(1.5rem, 3vw, 2.25rem); }
  .kpiece__text .facts > div { background: var(--ink-800); }

  .kpiece__media {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 58%;
    gap: clamp(0.5rem, 1vw, 0.9rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
  }
  .kpiece__media figure { scroll-snap-align: start; }
  .kpiece__media img { aspect-ratio: 2 / 3; }

  @media (width >= 62rem) {
    .kpiece { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
    .kpiece--flip .kpiece__text { order: 2; }
    /* Three to a row, but flex rather than grid so that a last row with one
       or two photos left in it centres instead of hanging off the left edge —
       a piece has as many photos as it has, not a multiple of three. */
    .kpiece__media {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      overflow: visible;
    }
    .kpiece__media figure {
      flex: 0 1 calc((100% - 2 * clamp(0.5rem, 1vw, 0.9rem)) / 3);
    }
  }

  .kiva__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.5rem, 1vw, 0.9rem);
    margin-block-start: clamp(3rem, 7vw, 6rem);
    padding-inline: clamp(0.5rem, 1vw, 0.9rem);
  }
  .kiva__grid img { aspect-ratio: 2 / 3; }
  @media (width >= 56rem) {
    .kiva__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
}

/* ---------------------------------------------------------------- gallery */
@layer layout {
  .gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.5rem, 1vw, 0.9rem);
    padding: var(--section) clamp(0.5rem, 1vw, 0.9rem);
    content-visibility: auto;
    contain-intrinsic-block-size: auto 100rem;
  }
  .gallery img { aspect-ratio: 4 / 5; }
  @media (width >= 56rem) {
    .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
}

/* ---------------------------------------------------------------- contact */
@layer layout {
  .contact {
    padding: var(--section) var(--gutter);
    text-align: center;
    background:
      radial-gradient(60% 50% at 50% 100% var(--in-oklab),
        color-mix(in oklab, var(--ember) 20%, transparent), transparent 70%),
      var(--bg);
  }
  .contact h2 { margin-block: 1.25rem 2rem; }
  .contact .lede { margin-inline: auto; }

  .foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    justify-content: space-between;
    padding: 2.5rem var(--gutter);
    border-block-start: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-dim);
  }
}

/* ---------------------------------------------------------------- motion
   Progressive enhancement: without scroll-driven animation support, or with
   reduced motion, everything is simply already in place. */
@layer motion {
  @keyframes reveal {
    from { opacity: 0; translate: 0 2.5rem; }
  }
  /* 5 slides over 30s: 0.6s dissolve, then it holds for its 6s slot */
  @keyframes heroCycle {
    0%   { opacity: 0; }
    2%   { opacity: 1; }
    20%  { opacity: 1; }
    22%  { opacity: 0; }
    100% { opacity: 0; }
  }
  @keyframes heroSink {
    to { translate: 0 14vh; scale: 1.14; opacity: 0.35; }
  }
  @keyframes heroLift {
    to { translate: 0 -6vh; opacity: 0; }
  }
  /* scale, not translate: a cover-fitted photo translated off-centre
     exposes a bare edge, whereas scaling always fills its frame */
  @keyframes slowZoom {
    from { scale: 1; }
    to   { scale: 1.08; }
  }

  /* Plain time-based crossfade — no scroll timeline involved, so it must sit
     outside the @supports gate below or browsers without scroll-driven
     animations would be left with a static hero. */
  @media (prefers-reduced-motion: no-preference) {
    .hero__slide {
      animation: heroCycle 30s linear infinite;
    }
    .hero__slide:nth-child(2) { animation-delay: 6s; }
    .hero__slide:nth-child(3) { animation-delay: 12s; }
    .hero__slide:nth-child(4) { animation-delay: 18s; }
    .hero__slide:nth-child(5) { animation-delay: 24s; }
  }

  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @media (prefers-reduced-motion: no-preference) {

      .reveal {
        animation: reveal 1s cubic-bezier(0.2, 0.7, 0.3, 1) both;
        animation-timeline: view();
        animation-range: entry 8% cover 32%;
      }

      /* on the wrapper, not the slides: the slides already own `opacity`
         for the crossfade and two animations cannot share one property */
      .hero__media {
        animation: heroSink linear both;
        animation-timeline: scroll(root block);
        animation-range: 0 100svh;
      }

      .hero__body {
        animation: heroLift linear both;
        animation-timeline: scroll(root block);
        animation-range: 10svh 85svh;
      }

      /* slow push-in on the two large standing images */
      .fire__media img,
      .journey__media img {
        animation: slowZoom linear both;
        animation-timeline: view();
        animation-range: cover;
      }
    }
  }
}

/* ---------------------------------------------------------------- journal
   The blog reuses the page's vocabulary: mono eyebrows, Bodoni headings,
   cream-on-ember. Inner pages carry no hero, so `.page` opens with enough
   room for the fixed navigation to sit over nothing but background. */
@layer layout {
  .page { padding-block-start: clamp(7rem, 7rem + 6vw, 11rem); }

  .jhead {
    padding: 0 var(--gutter) clamp(2.5rem, 6vw, 4.5rem);
    background:
      radial-gradient(60% 70% at 18% 0% var(--in-oklab),
        color-mix(in oklab, var(--rust) 24%, transparent), transparent 70%),
      transparent;
  }
  .jhead h1 {
    margin-block: 1rem 1.5rem;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.75rem, 1.5rem + 6vw, 7rem);
    line-height: 0.95;
    letter-spacing: -0.015em;
    text-wrap: balance;
  }

  /* tag filter */
  .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-block-start: clamp(1.75rem, 4vw, 2.75rem);
  }
  .chips a {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--fg-dim);
    transition: background 0.35s, color 0.35s, border-color 0.35s;
  }
  .chips a span { font-size: 0.65rem; opacity: 0.6; }
  .chips a:hover,
  .chips a:focus-visible { color: var(--fg); border-color: color-mix(in oklab, var(--gold) 55%, transparent); }
  .chips a[aria-current="true"] {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--ink-900);
  }

  .journal { padding: 0 var(--gutter) var(--section); }
  .journal__empty {
    max-inline-size: var(--measure);
    padding-block: clamp(3rem, 8vw, 6rem);
    color: var(--fg-dim);
  }

  /* the newest post, given the room it deserves */
  .jlead {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    padding-block: clamp(1rem, 3vw, 2rem) clamp(3rem, 7vw, 5.5rem);
    border-block-end: 1px solid var(--rule);
  }
  @media (width >= 56rem) {
    .jlead { grid-template-columns: 1.15fr 1fr; align-items: center; }
  }
  .jlead__media {
    display: block;
    overflow: clip;
    border-radius: clamp(0.5rem, 1vw, 1rem);
    background: var(--ink-700);
  }
  .jlead__media img {
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: scale 0.9s cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  .jlead:hover .jlead__media img { scale: 1.04; }
  .jlead h2 {
    margin-block: 0.75rem 1.1rem;
    font-size: clamp(2rem, 1.3rem + 3vw, 3.75rem);
  }
  .jlead h2 a { text-decoration: none; }
  .jlead h2 a:hover { color: var(--accent); }
  .jlead .btn { margin-block-start: clamp(1.5rem, 3vw, 2.25rem); }

  /* card grid, shared by the index, the home teaser and the foot of a post */
  .jgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 2.5vw, 2.5rem);
    padding-block: clamp(3rem, 7vw, 5rem);
  }
  .jcard__link {
    display: block;
    text-decoration: none;
    color: inherit;
  }
  .jcard__media {
    margin-block-end: 1.25rem;
    overflow: clip;
    border-radius: clamp(0.5rem, 1vw, 1rem);
  }
  .jcard__media img {
    aspect-ratio: 3 / 2;
    filter: saturate(0.92);
    transition: scale 0.9s cubic-bezier(0.2, 0.7, 0.3, 1), filter 0.9s;
  }
  .jcard__link:hover .jcard__media img,
  .jcard__link:focus-visible .jcard__media img { scale: 1.05; filter: saturate(1.1); }

  .jcard__meta,
  .article .jcard__meta {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-dim);
  }
  .jcard__meta i { font-style: normal; color: var(--accent); margin-inline: 0.25rem; }

  .jcard__title {
    margin-block: 0.55rem 0.7rem;
    font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.85rem);
  }
  .jcard__link:hover .jcard__title { color: var(--accent); }
  .jcard__excerpt {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--fg-dim);
  }
  .jcard__more {
    display: inline-block;
    margin-block-start: 1rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    border-block-end: 1px solid color-mix(in oklab, var(--gold) 45%, transparent);
    padding-block-end: 0.15rem;
  }

  /* pagination */
  .pager {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: center;
    justify-content: space-between;
    padding-block-start: clamp(1rem, 3vw, 2rem);
    border-block-start: 1px solid var(--rule);
  }
  .pager__step {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--fg-dim);
  }
  .pager__step:hover { color: var(--accent); }
  .pager__count {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    color: var(--fg-dim);
    margin-inline: auto;
  }

  /* "latest writing" block on the home page and under an article */
  .teaser {
    padding: var(--section) var(--gutter);
    background:
      radial-gradient(60% 50% at 80% 10% var(--in-oklab),
        color-mix(in oklab, var(--rust) 18%, transparent), transparent 70%),
      var(--ink-800);
  }
  .teaser__head h2 { margin-block: 1rem 1.5rem; }
  .teaser__head .lede { max-inline-size: 46ch; }
  .teaser__foot { text-align: center; }
  .teaser__foot .btn { margin-block-start: 0; }
  .teaser .jgrid { padding-block-end: 0; }
}

/* ---------------------------------------------------------------- article */
@layer layout {
  .article { padding-inline: var(--gutter); }

  .article__head {
    max-inline-size: var(--measure);
    margin-inline: auto;
    padding-block-end: clamp(2rem, 5vw, 3rem);
    text-align: center;
  }
  .article__back {
    margin-block-end: clamp(1.5rem, 4vw, 2.5rem);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .article__back a { text-decoration: none; color: var(--fg-dim); }
  .article__back a:hover { color: var(--accent); }
  .article__head h1 {
    margin-block: 1rem 1.25rem;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.25rem, 1.4rem + 4vw, 4.75rem);
    line-height: 0.98;
    letter-spacing: -0.015em;
    text-wrap: balance;
  }
  .article__head .lede { margin-inline: auto; }

  .article__cover {
    max-inline-size: 72rem;
    margin-inline: auto;
    overflow: clip;
  }
  .article__cover img { aspect-ratio: 16 / 9; }

  .article__body {
    max-inline-size: var(--measure);
    margin-inline: auto;
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
    font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
  }
  .article__body > * + * { margin-block-start: 1.45em; }
  .article__body h2 {
    margin-block-start: 2em;
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem);
    line-height: 1.05;
  }
  .article__body ul {
    margin-inline: 0;
    padding-inline-start: 1.2em;
    list-style: none;
  }
  .article__body li { position: relative; }
  .article__body li + li { margin-block-start: 0.6em; }
  .article__body li::before {
    content: "—";
    position: absolute;
    inset-inline-start: -1.2em;
    color: var(--accent);
  }
  .article__body blockquote {
    padding-inline-start: clamp(1rem, 3vw, 2rem);
    border-inline-start: 1px solid color-mix(in oklab, var(--gold) 55%, transparent);
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 1.1rem + 1vw, 2rem);
    line-height: 1.25;
    color: var(--fg);
  }
  .article__body a { color: var(--accent); }

  .article__gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.5rem, 1vw, 0.9rem);
    max-inline-size: 72rem;
    margin-inline: auto;
    padding-block-end: clamp(2.5rem, 6vw, 4rem);
  }
  .article__gallery img,
  .article__gallery video {
    inline-size: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: inherit;
    display: block;
  }
  @media (width < 36rem) {
    .article__gallery { grid-template-columns: minmax(0, 1fr); }
  }

  .article__nav {
    display: grid;
    gap: 1.5rem;
    max-inline-size: 72rem;
    margin-inline: auto;
    padding-block: clamp(2rem, 5vw, 3rem);
    border-block-start: 1px solid var(--rule);
  }
  @media (width >= 48rem) {
    .article__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .article__nav--next { text-align: end; grid-column: 2; }
  }
  .article__nav a { text-decoration: none; display: block; }
  .article__nav span {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fg-dim);
  }
  .article__nav strong {
    display: block;
    margin-block-start: 0.5rem;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.15rem, 1rem + 0.6vw, 1.6rem);
    line-height: 1.15;
  }
  .article__nav a:hover strong { color: var(--accent); }
}

/* ---------------------------------------------------------------- variété
   The collective project: a portrait and its story, then the three answers
   that explain how an edition is made, then the editions themselves. */
@layer layout {
  .variete {
    padding-block: var(--section);
    background:
      radial-gradient(65% 45% at 85% 5% var(--in-oklab),
        color-mix(in oklab, var(--ember) 16%, transparent), transparent 70%),
      var(--bg);
    content-visibility: auto;
    contain-intrinsic-block-size: auto 140rem;
  }
  .variete__head {
    padding-inline: var(--gutter);
    margin-block-end: clamp(3rem, 7vw, 5rem);
  }
  .variete__head h2 { margin-block: 1rem 1.75rem; }

  .variete__intro {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    padding-inline: var(--gutter);
  }
  @media (width >= 56rem) {
    .variete__intro { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; }
  }
  .variete__portrait img { aspect-ratio: 4 / 5; }
  .variete__copy .facts > div { background: var(--bg); }

  /* how it works · the performances · our purpose */
  .variete__cols {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    padding: clamp(3rem, 7vw, 5rem) var(--gutter) 0;
  }
  @media (width >= 62rem) {
    .variete__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  .variete__cols h3 {
    margin-block-end: 1rem;
    font-size: clamp(1.35rem, 1.1rem + 0.9vw, 2rem);
  }
  .variete__cols p {
    color: color-mix(in oklab, var(--cream) 80%, transparent);
    font-size: 0.98rem;
    line-height: 1.7;
  }
  .variete__cols p + p { margin-block-start: 1.2em; }

  .variete__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.5rem, 1vw, 0.9rem);
    margin-block-start: clamp(3rem, 7vw, 5rem);
    padding-inline: clamp(0.5rem, 1vw, 0.9rem);
  }
  .variete__grid img { aspect-ratio: 3 / 4; }
  @media (width >= 56rem) {
    .variete__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  }
}

/* ---------------------------------------------------------------- booking */
@layer components {
  /* a filled variant of the outline button, for the one action per screen
     that should read as the way forward */
  .btn--solid {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--ink-900);
  }
  .btn--solid:hover,
  .btn--solid:focus-visible {
    background: transparent;
    border-color: var(--rule);
    color: var(--fg);
  }

  .contact__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    justify-content: center;
    margin-block-start: clamp(2rem, 4vw, 3rem);
  }
  .contact__actions .btn { margin-block-start: 0; }
}

@layer layout {
  .booking { padding: 0 var(--gutter) clamp(3rem, 7vw, 5rem); }

  .booking__row {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }
  @media (width >= 56rem) {
    .booking__row { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  }
  .booking__row h2,
  .booking__cols h2 {
    font-size: clamp(1.75rem, 1.3rem + 2vw, 3rem);
    margin-block-end: 1.5rem;
  }
  .booking__media img { aspect-ratio: 3 / 4; }
  .booking__text .facts { margin-block-start: 0; }
  .booking__text p:not(.booking__note) {
    max-inline-size: 46ch;
    margin-block-start: 1.5rem;
    color: var(--fg-dim);
  }
  .booking__note {
    margin-block-start: 1.25rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: var(--fg-dim);
  }

  .booking__cols {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
    padding-block-start: clamp(3rem, 7vw, 5rem);
  }
  @media (width >= 56rem) {
    .booking__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .booking__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .booking__list li {
    position: relative;
    padding-block: 0.75rem;
    padding-inline-start: 1.6rem;
    border-block-end: 1px solid var(--rule);
    color: color-mix(in oklab, var(--cream) 82%, transparent);
  }
  .booking__list li::before {
    content: "—";
    position: absolute;
    inset-inline-start: 0;
    color: var(--accent);
  }
}

/* ---------------------------------------------------------------- quote form */
@layer layout {
  .quote {
    padding: var(--section) var(--gutter);
    background:
      radial-gradient(60% 50% at 50% 0% var(--in-oklab),
        color-mix(in oklab, var(--rust) 24%, transparent), transparent 70%),
      var(--ink-800);
  }
  .quote__head {
    max-inline-size: 48rem;
    margin-inline: auto;
    text-align: center;
  }
  .quote__head h2 { margin-block-end: 1.25rem; }
  .quote__head .lede { margin-inline: auto; }
  .quote__alt {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    justify-content: center;
    margin-block-start: 1.5rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .quote__alt a { color: var(--accent); text-decoration: none; }
  .quote__alt a:hover { text-decoration: underline; }

  .quote__form {
    display: grid;
    gap: 1.25rem clamp(1rem, 2vw, 2rem);
    max-inline-size: 48rem;
    margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  }
  @media (width >= 40rem) {
    .quote__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .quote__field { display: block; }
  .quote__field--wide,
  .quote__send,
  .quote__error { grid-column: 1 / -1; }
  .quote__field span {
    display: block;
    margin-block-end: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-dim);
  }
  .quote__field i { font-style: normal; opacity: 0.65; }
  .quote__field input,
  .quote__field select,
  .quote__field textarea {
    inline-size: 100%;
    padding: 0.85rem 1rem;
    background: color-mix(in oklab, var(--ink-900) 70%, transparent);
    border: 1px solid var(--rule);
    border-radius: 0.6rem;
    color: var(--fg);
    font: inherit;
    font-size: 1rem;
  }
  .quote__field textarea { resize: vertical; line-height: 1.6; }
  .quote__field input:focus-visible,
  .quote__field select:focus-visible,
  .quote__field textarea:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-color: transparent;
  }
  .quote__send { text-align: center; }
  .quote__send .btn { margin-block-start: 0.5rem; cursor: pointer; }

  .quote__error {
    padding: 0.9rem 1.1rem;
    border: 1px solid color-mix(in oklab, var(--ember) 55%, transparent);
    border-radius: 0.6rem;
    background: color-mix(in oklab, var(--ember) 12%, transparent);
    font-size: 0.95rem;
  }
  .quote__done {
    max-inline-size: 36rem;
    margin: clamp(2.5rem, 5vw, 4rem) auto 0;
    padding: 1.5rem;
    border: 1px solid color-mix(in oklab, var(--gold) 45%, transparent);
    border-radius: 0.8rem;
    text-align: center;
    color: var(--fg);
  }

  /* the honeypot: present for a bot, gone for everyone else */
  .quote__trap {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}