/* ==========================================================================
   Maxime Viellard — "D light" (Fragments in daylight)
   Square corners, no shadows, no gradients. The art supplies the colour.
   ========================================================================== */

@layer reset, tokens, base, layout, components, utilities;

/* ---------- Reset ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: none; text-size-adjust: none; }
  img, picture, video, svg { display: block; max-width: 100%; }
  img, video { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; border-radius: 0; }
  p, h1, h2, h3 { overflow-wrap: break-word; text-wrap: pretty; }
  h1, h2, h3 { text-wrap: balance; font-weight: inherit; }
  ol, ul { padding: 0; }
}

/* ---------- Design tokens ---------- */
@layer tokens {
  :root {
    --wall: #f6f4f0;        /* page background */
    --wall-alt: #ebe8e2;    /* alternate section bg (Available, Contact), image placeholders */
    --ink: #1c1b19;         /* headings, titles, primary text links */
    --text: #3d3b37;        /* body copy */
    --muted: #6b675f;       /* captions, metadata, eyebrows, nav at rest */
    --hairline: #d9d5cd;    /* the only rule/border colour */
    --accent: #8a5a22;      /* ochre: hover, current nav item, focus ring, CTA links, Send button bg */
    --on-accent: #f6f4f0;   /* text on the ochre button */
    /* hero only (over video) */
    --hero-scrim: rgba(22, 21, 19, 0.55);
    --hero-ink: #f1ede6;
    --hero-text: #d6d1c8;
    --hero-accent: #d79256;

    --font-display: "Fraunces", Georgia, serif;   /* ALWAYS italic, weight 300 */
    --font-body: "Jost", system-ui, sans-serif;  /* body 300, captions/labels 400-500 */

    --header-h: 73px;       /* sticky inner-page header: 72px row + 1px hairline */
    --gutter: clamp(16px, 4vw, 48px);
    --container: 1344px;
    --section: clamp(72px, 10vw, 144px);
    --ease: cubic-bezier(.2, .7, .2, 1);
  }
}

/* ---------- Fonts (self-hosted Google Fonts: Fraunces italic + Jost, Latin subset, variable) ---------- */
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url("/fonts/fraunces-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("/fonts/jost-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Base ---------- */
@layer base {
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }

  body {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.75;
    color: var(--text);
    background: var(--wall);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }

  a { color: inherit; text-decoration: none; }
  strong { font-weight: 500; color: var(--ink); }
  em { font-family: var(--font-display); font-style: italic; font-weight: 400; }

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

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

/* ---------- Layout ---------- */
@layer layout {
  .container {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
  }
  .section { padding-block: var(--section); }
  .section--first { padding-top: clamp(48px, 7vw, 96px); }
  .section--rule { border-top: 1px solid var(--hairline); }

  /* Two columns (text | image), stacking under ~760px with text first */
  .split__grid {
    display: grid;
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
    @media (min-width: 47.5rem) { grid-template-columns: 1fr 1fr; }
  }
  .split__grid--media-first > figure { order: 2; }
  @media (min-width: 47.5rem) {
    .split__grid--media-first > figure { order: 0; }
  }
  .split__text {
    max-width: 34rem;
    > * + * { margin-top: 1.25rem; }
    > .cta { margin-top: 2rem; }
  }
}

/* ---------- Components ---------- */
@layer components {

  .skip-link {
    position: absolute;
    left: 1rem; top: -4rem;
    z-index: 100;
    padding: .75rem 1rem;
    background: var(--ink); color: var(--wall);
    &:focus { top: 1rem; }
  }

  /* ---- Type ---- */
  .eyebrow, .site-nav a, .field > span, .hero__scroll, .nav-toggle, .nav-close, .hero__btn, .btn-send {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
  }
  .eyebrow { color: var(--muted); }

  .section-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(48px, 6vw, 88px);
    line-height: .95;
    letter-spacing: -.01em;
    color: var(--ink);
  }
  .pull {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.05;
    color: var(--ink);
  }

  /* CTA text link: ochre, uppercase, 1px underline */
  .cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: underline 1px;
    text-underline-offset: 6px;
    &:hover { color: var(--ink); }
  }
  .cta--plain { color: var(--muted); &:hover { color: var(--accent); } }

  /* ---- Header ---- */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--wall);
    border-bottom: 1px solid var(--hairline);
    color: var(--ink);
  }
  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
  }
  .brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1;
    letter-spacing: -.01em;
    white-space: nowrap;
    &:hover { color: var(--accent); }
  }

  .site-nav {
    ul { display: flex; gap: clamp(20px, 3vw, 40px); list-style: none; }
    a {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      color: var(--muted);
      &:hover, &[aria-current="page"] { color: var(--accent); }
    }
  }
  .nav-toggle, .nav-close {
    display: none;
    min-height: 44px;
    padding: 0 0 0 1rem;
    border: 0;
    background: none;
    cursor: pointer;
  }

  /* Hero header sits on top of the video. With JS it stays fixed while scrolling and fades into the light
     header used on every other page (see --p below). */
  .site-header--hero {
    position: absolute;
    inset: 0 0 auto;
    background: transparent;
    border-bottom: 1px solid transparent;
    color: var(--hero-ink);
    transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
    .site-nav a { color: var(--hero-text); transition: color .3s var(--ease); }
    .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--hero-accent); }
    .brand:hover { color: var(--hero-accent); }
    :focus-visible { outline-color: var(--hero-accent); }
  }
  /* --p (0 → 1) is set by main.js from the scroll position: 0 at the top, 1 when the hero's "Fine artist" line
     reaches the header. Background, rule and text blend from the hero look into the light header. */
  .js .site-header--hero {
    --p: 0;
    --t: 0;   /* text colour: switches over a short stretch of the fade (main.js) so it is never washed out */
    position: fixed;
    background: color-mix(in srgb, var(--wall) calc(var(--p) * 100%), transparent);
    border-bottom-color: color-mix(in srgb, var(--hairline) calc(var(--p) * 100%), transparent);
    color: color-mix(in srgb, var(--ink) calc(var(--t) * 100%), var(--hero-ink));
    transition: none;
    .brand:hover { color: color-mix(in srgb, var(--accent) calc(var(--t) * 100%), var(--hero-accent)); }
    :focus-visible { outline-color: color-mix(in srgb, var(--accent) calc(var(--t) * 100%), var(--hero-accent)); }
    /* desktop nav only: on phones the menu is a full-screen panel with its own colours */
    @media (min-width: 48.0625rem) {
      .site-nav a { color: color-mix(in srgb, var(--muted) calc(var(--t) * 100%), var(--hero-text)); transition: none; }
      .site-nav a:hover, .site-nav a[aria-current="page"] { color: color-mix(in srgb, var(--accent) calc(var(--t) * 100%), var(--hero-accent)); }
    }
  }
  /* In-page jumps (Scroll to enter, Contact…) land below the fixed header */
  .home main section[id] { scroll-margin-top: var(--header-h); }
  @media (prefers-reduced-motion: reduce) {
    .site-header--hero, .site-header--hero .site-nav a { transition: none; }
  }

  /* Mobile contact bar: WhatsApp + email, fixed to the bottom on phones only */
  .contact-bar { display: none; }
  @media (max-width: 48rem) {
    .contact-bar {
      position: fixed;
      inset: auto 0 0;
      z-index: 40;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
      background: var(--wall);
      border-top: 1px solid var(--hairline);
      transition: translate .35s var(--ease);
      a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: .16em;
        text-transform: uppercase;
      }
    }
    .contact-bar__wa { background: var(--accent); color: var(--on-accent); &:hover { background: var(--ink); } }
    .contact-bar__mail { border: 1px solid var(--ink); color: var(--ink); &:hover { border-color: var(--accent); color: var(--accent); } }
    /* Keep the footer clear of the bar */
    body:has(.contact-bar) { padding-bottom: calc(69px + env(safe-area-inset-bottom)); }
    /* Homepage: the bar slides in once the video is scrolled past, so it never covers the hero controls */
    .js .home:not(.past-hero) .contact-bar { translate: 0 100%; visibility: hidden; transition: translate .35s var(--ease), visibility 0s .35s; }
  }
  @media (max-width: 48rem) and (prefers-reduced-motion: reduce) {
    .contact-bar, .js .home:not(.past-hero) .contact-bar { transition: none; }
  }

  @media (min-width: 48.0625rem) {
    /* Neutralise popover UA styles on desktop so the nav is always visible */
    .site-nav[popover] {
      display: block;
      position: static;
      inset: auto;
      width: auto; height: auto;
      padding: 0; border: 0;
      background: none; color: inherit;
      overflow: visible;
    }
  }

  @media (max-width: 48rem) {
    .nav-toggle { display: block; }

    .site-header .site-nav {
      inset: 0;
      width: 100%; height: 100dvh;
      max-width: none; max-height: none;
      margin: 0; padding: var(--gutter);
      border: 0;
      background: var(--wall);
      color: var(--ink);

      &:popover-open { display: grid; place-items: center; }

      ul { flex-direction: column; align-items: center; gap: 1rem; }
      a {
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 300;
        font-size: 48px;
        letter-spacing: 0;
        text-transform: none;
        color: var(--ink);
        &:hover, &[aria-current="page"] { color: var(--accent); }
      }
      :focus-visible { outline-color: var(--accent); }
      .nav-close {
        display: block;
        position: absolute;
        top: 14px; right: var(--gutter);
        color: var(--ink);
      }
    }
    body:has(.site-nav:popover-open) { overflow: hidden; }
  }

  /* ---- Hero ---- */
  .hero {
    position: relative;
    height: min(860px, 100svh);
    min-height: 560px;
    overflow: hidden;
    color: var(--hero-ink);
    background: var(--ink) url("/images/hero-poster-desktop.webp") center / cover;
    @media (orientation: portrait) { background-image: url("/images/hero-poster-mobile.webp"); }
    isolation: isolate;

    &::after {
      content: "";
      position: absolute; inset: 0;
      z-index: -1;
      background: var(--hero-scrim);
    }
    .eyebrow { color: var(--hero-text); }
  }
  .hero__media {
    position: absolute; inset: 0;
    z-index: -2;
    width: 100%; height: 100%;
    object-fit: cover;
  }
  .hero__inner {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
    padding-bottom: clamp(32px, 6vw, 72px);
  }
  .hero__title {
    margin-top: 1.25rem;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(64px, 10vw, 152px);
    line-height: .9;
    letter-spacing: -.02em;
    color: var(--hero-ink);
  }
  .hero__aside {
    display: grid;
    justify-items: end;
    gap: 16px;
    @media (max-width: 47.5rem) { justify-items: start; }
  }
  .hero__controls { display: flex; gap: 8px; &[hidden] { display: none; } }
  .hero__btn {
    min-width: 48px;
    height: 48px;
    padding: 0 16px;
    border: 1px solid var(--hero-ink);
    background: transparent;
    color: var(--hero-ink);
    cursor: pointer;
    &:hover { color: var(--hero-accent); border-color: var(--hero-accent); }
    &:focus-visible { outline-color: var(--hero-accent); }
    svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
  }
  .hero__btn--square {
    display: grid; place-items: center;
    width: 48px; padding: 0;
    .icon-play { display: none; }
    &[data-paused] .icon-play { display: block; }
    &[data-paused] .icon-pause { display: none; }
  }
  .hero__scroll {
    display: inline-flex; align-items: center; min-height: 44px;
    color: var(--hero-text);
    &:hover { color: var(--hero-accent); }
    &:focus-visible { outline-color: var(--hero-accent); }
  }

  /* ---- Featured series ---- */
  .featured__figure {
    img { width: 100%; }
    figcaption {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: baseline;
      gap: .25rem 1.5rem;
      padding-top: 14px;
      font-size: 14px;
      font-weight: 400;
      color: var(--muted);
      em { font-size: 18px; color: var(--ink); }
    }
  }

  /* ---- Index of series ---- */
  .series-index__list {
    list-style: none;
    margin-top: 2rem;
    border-bottom: 1px solid var(--hairline);
  }
  .series-row {
    display: grid;
    grid-template-columns: 3rem 1fr 96px;
    gap: clamp(16px, 3vw, 40px);
    align-items: center;
    padding-block: 28px;
    border-top: 1px solid var(--hairline);

    &:hover .series-row__title { color: var(--accent); }
    @media (max-width: 30rem) { grid-template-columns: 2rem 1fr 72px; }
  }
  .series-row__num { font-size: 13px; font-weight: 400; color: var(--muted); }
  .series-row__text { display: grid; gap: .5rem; }
  .series-row__title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(32px, 4.5vw, 64px);
    line-height: 1;
    color: var(--ink);
  }
  .series-row__meta { font-size: 14px; font-weight: 400; color: var(--muted); }
  .series-row__desc { max-width: 34rem; font-size: 15px; line-height: 1.6; }
  .series-row__thumb img {
    width: 96px; height: 120px;
    object-fit: cover;
    background: var(--wall-alt);
    clip-path: polygon(8% 0, 100% 6%, 92% 100%, 0 92%);
    @media (max-width: 30rem) { width: 72px; height: 90px; }
  }

  /* ---- Commissions ---- */
  .commissions__grid {
    display: grid;
    gap: clamp(40px, 6vw, 104px);
    @media (min-width: 47.5rem) { grid-template-columns: 7fr 5fr; align-items: start; }
  }
  .commissions__title { margin: 18px 0 32px; font-size: clamp(44px, 5.4vw, 80px); line-height: .98; }
  .commissions__lede { max-width: 34rem; }
  .commissions__list {
    list-style: none;
    margin-top: 48px;
    border-bottom: 1px solid var(--hairline);
    li {
      display: grid;
      grid-template-columns: 56px 1fr;
      gap: 16px;
      padding-block: 24px;
      border-top: 1px solid var(--hairline);
      @media (max-width: 47.49rem) { grid-template-columns: 40px 1fr; }
    }
    h3 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(22px, 2vw, 24px); line-height: 1.25; color: var(--ink); margin-bottom: 4px; }
    p { font-size: 16px; line-height: 1.65; max-width: 32rem; }
  }
  .commissions__num { font-size: 13px; font-weight: 400; line-height: 2.4; color: var(--muted); }
  .commissions__steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 0;
    margin-top: 40px;
    list-style: none;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    li + li::before { content: "→"; margin-inline: 14px; }
  }
  .commissions__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 32px;
    margin-top: 44px;
  }
  /* Primary solid button: ochre, square */
  .btn {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 28px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    &:hover { background: var(--ink); }
  }
  .commissions__figure {
    @media (min-width: 47.5rem) { position: sticky; top: 48px; }
    @media (max-width: 47.49rem) { max-width: 420px; }
    img { width: 100%; height: auto; clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%); }
    figcaption {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      margin-top: 14px;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.4;
      color: var(--muted);
      em { font-size: 18px; color: var(--ink); }
    }
  }
  .commissions__places {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 28px;
    margin-top: clamp(56px, 7vw, 96px);
    padding-top: 24px;
    border-top: 1px solid var(--hairline);
    ul { display: flex; flex-wrap: wrap; gap: 6px 0; list-style: none; font-size: 15px; }
    li + li::before { content: "·"; margin-inline: 12px; color: var(--muted); }
  }

  /* ---- Available ---- */
  .available { background: var(--wall-alt); }
  .available .card__media { background: var(--wall); }
  .available__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-bottom: clamp(40px, 5vw, 72px);
  }

  /* ---- Artwork cards ---- */
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 64px 40px;
    list-style: none;
  }
  .card { display: flex; flex-direction: column; }
  .card__index { font-size: 13px; font-weight: 400; color: var(--muted); margin-bottom: 12px; }
  /* Fixed 4:5 frame; the whole artwork is fitted inside it, never cropped */
  .card__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    background: var(--wall-alt);
    &[data-lightbox] { cursor: zoom-in; }
    img {
      position: absolute;
      inset: 12px;
      width: calc(100% - 24px);
      height: calc(100% - 24px);
      object-fit: contain;
    }
  }
  .card__title {
    margin-top: 18px;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 23px;
    line-height: 1.2;
    color: var(--ink);
    a:hover { color: var(--accent); }
  }
  .card__meta {
    margin-top: 6px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--muted);
  }
  .card__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-top: 16px;
    padding-top: 4px;
    border-top: 1px solid var(--hairline);
    .cta { min-height: 44px; }
  }
  .card .card__row { margin-top: auto; }
  .card .card__meta { margin-bottom: 16px; }
  .price { font-size: 15px; font-weight: 400; color: var(--ink); }
  .sold {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    font-size: 15px;
    font-weight: 400;
    color: var(--ink);
  }
  .sold__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }

  /* ---- Quiet Stones ---- */
  .stones__still {
    position: relative;
    width: min(100%, 420px);
    justify-self: center;
    video {
      width: 100%;
      aspect-ratio: 9 / 16;
      object-fit: cover;
      background: var(--wall-alt);
      clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);
    }
  }
  .play-btn {
    position: absolute;
    top: 50%; left: 50%;
    translate: -50% -50%;
    display: grid;
    place-items: center;
    width: 72px; height: 72px;
    border: 1px solid var(--hero-ink);
    background: var(--hero-scrim);
    color: var(--hero-ink);
    cursor: pointer;
    svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
    &:hover { color: var(--hero-accent); border-color: var(--hero-accent); }
    &[hidden] { display: none; }
  }

  /* ---- About ---- */
  .about { border-top: 1px solid var(--hairline); }
  .about__portrait img { width: 100%; }
  .about__portrait img { aspect-ratio: 3 / 4; object-fit: cover; }

  .cv-list {
    list-style: none;
    border-bottom: 1px solid var(--hairline);
    li {
      display: grid;
      grid-template-columns: 7.5rem 1fr;
      gap: 1rem;
      padding-block: 14px;
      border-top: 1px solid var(--hairline);
      font-size: 15px;
      line-height: 1.6;
      @media (max-width: 30rem) { grid-template-columns: 1fr; gap: .15rem; }
    }
    time { font-size: 14px; font-weight: 400; color: var(--muted); }
  }
  .cv-list__name { color: var(--ink); font-weight: 400; }
  .cv { max-width: 52rem; .cv-list { margin-top: 1.5rem; } }

  .prose p + p { margin-top: 1.1em; }

  /* ---- About page: "Studio notebook" ---- */
  /* Sticky portrait is pure CSS: the left grid item stretches the full row, so the figure can travel.
     No ancestor may be a scroll container (body's overflow-x: clip is not one). */
  .about-notebook {
    --pin-top: calc(var(--header-h) + clamp(24px, 4vw, 48px));
    --pin-h: calc(100svh - var(--pin-top) - 72px);   /* portrait + caption always fit on screen */
    padding-bottom: var(--section);
  }
  .about-notebook__grid {
    display: grid;
    @media (min-width: 53.75rem) { grid-template-columns: 5fr 7fr; }
  }
  .about-notebook__left {
    padding-top: clamp(48px, 7vw, 104px);
    @media (min-width: 53.75rem) {
      padding-top: clamp(24px, 4vw, 48px);   /* = pin gap, so the portrait starts where it pins */
      padding-right: clamp(24px, 4vw, 56px);
      padding-bottom: clamp(48px, 7vw, 96px);
      border-right: 1px solid var(--hairline);
    }
  }
  .about-portrait {
    max-width: 440px;
    @media (min-width: 53.75rem) {
      position: sticky;
      top: var(--pin-top);
      max-width: none;
      width: min(100%, var(--pin-h) * 3 / 4);
      margin-inline: auto;
    }
    img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
    figcaption {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      margin-top: 12px;
      font-size: 14px;
      font-weight: 400;
      color: var(--muted);
    }
  }
  .about-notebook__right {
    padding-top: clamp(40px, 7vw, 104px);
    @media (min-width: 53.75rem) {
      padding-left: clamp(32px, 5vw, 80px);
      padding-bottom: clamp(48px, 7vw, 96px);
    }
    > .section-title { margin: 18px 0 40px; }
    > p:not(.eyebrow) { max-width: 34rem; }
    > p + p { margin-top: 1.1em; }
  }
  .about-quote {
    max-width: 30rem;
    margin-block: 48px;
    padding-block: 40px;
    border-block: 1px solid var(--hairline);
    blockquote {
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 300;
      font-size: clamp(26px, 2.8vw, 36px);
      line-height: 1.3;
      color: var(--ink);
    }
    figcaption { margin-top: 18px; }
  }
  .about-works {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 48px 0 0;
    list-style: none;
    @media (min-width: 53.75rem) { grid-template-columns: repeat(3, 1fr); }
    a { display: block; &:hover em { color: var(--accent); } }
    img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--wall-alt); }
  }
  .about-works__cap {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--muted);
    em { display: block; font-size: 16px; color: var(--ink); }
  }
  .about-cv {
    display: grid;
    gap: 0 40px;
    margin-top: 64px;
    h2 { grid-column: 1 / -1; margin-bottom: 14px; }
    .cv-list li { grid-template-columns: 70px 1fr; }
    .cv-list__rest { color: var(--muted); }
    .cv-list:first-of-type { border-bottom: 0; }
    @media (min-width: 53.75rem) {
      grid-template-columns: 1fr 1fr;
      .cv-list:first-of-type { border-bottom: 1px solid var(--hairline); }
    }
  }

  /* ---- Contact ---- */
  .contact { background: var(--wall-alt); }
  .contact__grid {
    display: grid;
    gap: clamp(40px, 6vw, 96px);
    @media (min-width: 47.5rem) { grid-template-columns: 1fr 1fr; }
  }
  .contact__intro > * + * { margin-top: 1.25rem; }
  .contact__details {
    list-style: none;
    padding-top: .75rem;
    color: var(--ink);
    li { min-height: 44px; display: flex; align-items: center; gap: .5rem; }
    a { border-bottom: 1px solid var(--hairline); &:hover { color: var(--accent); border-color: var(--accent); } }
  }

  .form { display: grid; gap: 28px; align-content: start; }
  .form__row {
    display: grid;
    gap: 28px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  }
  .field {
    display: grid;
    gap: 6px;
    > span { color: var(--muted); }

    input, textarea {
      width: 100%;
      min-height: 44px;
      padding: 8px 0;
      border: 0;
      border-bottom: 1px solid var(--muted);
      background: transparent;
      font-size: 17px;
      color: var(--ink);
      field-sizing: content;

      &:focus { outline: none; border-bottom: 2px solid var(--accent); padding-bottom: 7px; }
      &:user-invalid { border-bottom-color: var(--accent); }
    }
    textarea { resize: vertical; min-height: 7rem; }
  }
  .btn-send {
    justify-self: start;
    min-height: 48px;
    padding: 0 40px;
    border: 0;
    background: var(--accent);
    color: var(--on-accent);
    cursor: pointer;
    &:hover { background: var(--ink); }
    &:disabled { opacity: .6; cursor: progress; }
  }
  .form__status:empty { display: none; }
  .form__status { color: var(--ink); font-weight: 400; }

  /* ---- Footer ---- */
  .site-footer {
    border-top: 1px solid var(--hairline);
    font-size: 14px;
    color: var(--muted);
    .home & { background: var(--wall-alt); }
  }
  .site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 2rem;
    min-height: 88px;
    padding-block: 16px;
    a { display: inline-flex; align-items: center; min-height: 44px; &:hover { color: var(--accent); } }
  }
  .site-footer__links { display: flex; flex-wrap: wrap; gap: 0 2rem; }

  /* ---- Inner pages ---- */
  .page-head {
    margin-bottom: clamp(56px, 8vw, 112px);
    > * + * { margin-top: 1.25rem; }
  }
  .lede { max-width: 34rem; }

  /* Series: works stacked one per row */
  .works { list-style: none; }
  .work-row {
    display: grid;
    justify-items: center;
    text-align: center;
    & + & { margin-top: clamp(80px, 11vw, 160px); }
  }
  .work-row__media {
    cursor: zoom-in;
    img { width: auto; max-width: 100%; max-height: 78vh; }
  }
  .work-row__caption {
    width: min(100%, 34rem);
    .card__title { margin-top: 20px; }
    .card__row { justify-content: center; gap: .5rem 2rem; }
  }
  /* Rows land below the sticky header (and, on phones, below the miniature strip) */
  .work-row { scroll-margin-top: calc(var(--header-h) + 96px); }

  /* Series slider: miniatures of every work. Desktop: sticky column on the right. Below 1100px: strip under the header. */
  .series-layout { display: grid; }
  .series-rail {
    position: sticky;
    top: var(--header-h);
    z-index: 10;
    margin: 0 calc(-1 * var(--gutter)) 40px;
    padding: 10px var(--gutter);
    background: var(--wall);
    border-bottom: 1px solid var(--hairline);
    overflow-x: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    ol { display: flex; gap: 10px; list-style: none; }
    a {
      position: relative;
      display: block;
      opacity: .6;
      transition: opacity .2s;
      &:hover, &[aria-current="true"] { opacity: 1; }
      &[aria-current="true"] img { outline: 2px solid var(--accent); outline-offset: 2px; }
    }
    img { display: block; width: auto; height: 56px; max-width: none; background: var(--wall-alt); }
    span { display: none; }
  }
  @media (min-width: 68.75rem) {
    .series-layout { grid-template-columns: minmax(0, 1fr) 104px; column-gap: clamp(32px, 4vw, 64px); align-items: start; }
    .work-row { scroll-margin-top: calc(var(--header-h) + 32px); }
    .series-rail {
      grid-column: 2;
      grid-row: 1;
      top: calc(var(--header-h) + 24px);
      max-height: calc(100svh - var(--header-h) - 48px);
      margin: 0;
      padding: 4px 4px 4px 0;
      border: 0;
      overflow: hidden auto;
      ol { flex-direction: column; gap: 18px; }
      img { width: 100%; height: auto; }
      span { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--muted); }
      a[aria-current="true"] span { color: var(--accent); }
    }
    .works { grid-column: 1; grid-row: 1; }
  }

  .pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    margin-top: clamp(80px, 11vw, 160px);
    padding-top: 1rem;
    border-top: 1px solid var(--hairline);
    a {
      display: inline-flex; align-items: center; min-height: 44px;
      font-size: 13px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
      color: var(--muted);
      &:hover { color: var(--accent); }
    }
  }

  /* Single available work */
  .work {
    display: grid;
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
    @media (min-width: 47.5rem) { grid-template-columns: 7fr 5fr; }
  }
  .work__media {
    display: grid;
    place-items: center;
    padding: clamp(16px, 3vw, 40px);
    background: var(--wall-alt);
    cursor: zoom-in;
    img { width: auto; max-width: 100%; max-height: 78vh; }
  }
  .work__body {
    > * + * { margin-top: 1.25rem; }
    .card__index { margin-bottom: 0; }
    @media (min-width: 47.5rem) { position: sticky; top: 104px; }
  }
  .specs {
    > div {
      display: grid;
      grid-template-columns: 6rem 1fr;
      gap: 1rem;
      padding-block: 12px;
      border-top: 1px solid var(--hairline);
    }
    dt { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding-top: .3em; }
    dd { margin: 0; color: var(--ink); font-weight: 400; }
  }

  .not-found { min-height: 60svh; display: grid; align-items: center; .container > * + * { margin-top: 1.25rem; } }

  /* ---- Lightbox ---- */
  .lightbox {
    width: 100%; height: 100%;
    max-width: none; max-height: none;
    margin: 0; padding: var(--gutter);
    border: 0;
    background: var(--wall);
    color: var(--ink);

    &[open] { display: grid; place-items: center; }
    &::backdrop { background: var(--wall); }
  }
  @media (prefers-reduced-motion: no-preference) {
    .lightbox[open] { animation: fade-in .3s var(--ease); }
  }
  @keyframes fade-in { from { opacity: 0; } }
  .lightbox__figure {
    display: grid;
    justify-items: center;
    gap: 1rem;
    max-height: 100%;
    img {
      max-width: min(100%, 90rem);
      max-height: calc(100dvh - 9rem);
      width: auto; height: auto;
      object-fit: contain;
      view-transition-name: lightbox-image;
    }
    figcaption { font-size: 14px; font-weight: 400; color: var(--muted); text-align: center; max-width: 40rem; }
  }
  /* Magnifying lens: replaces the pointer over the painting (main.js positions it and sets the background) */
  .lightbox__frame { max-width: 100%; cursor: none; touch-action: none; }
  .lightbox__lens {
    position: fixed;
    top: 0; left: 0;
    width: 384px; height: 384px;   /* 4 inches across */
    border-radius: 50%;
    /* Frosted glass rim: the painting behind it shows through blurred, brightened and lightly tinted;
       a light glint on the outer edge. The magnified view sits inset inside it. */
    background: color-mix(in srgb, var(--wall) 22%, transparent);
    -webkit-backdrop-filter: blur(8px) saturate(1.6) brightness(1.08);
    backdrop-filter: blur(8px) saturate(1.6) brightness(1.08);
    border: 1px solid color-mix(in srgb, var(--wall) 75%, transparent);
    pointer-events: none;
    opacity: 0;
    z-index: 1;
    &.is-on { opacity: 1; }
  }
  .lightbox__glass {
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background-color: var(--wall);
    background-repeat: no-repeat;
    border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);   /* where the glass meets the rim */
  }
  @media (prefers-reduced-motion: no-preference) {
    .lightbox__lens { transition: opacity .15s var(--ease); }
  }
  .lightbox__btn {
    position: absolute;
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    border: 1px solid var(--hairline);
    background: var(--wall);
    color: var(--ink);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    &:hover { color: var(--accent); border-color: var(--accent); }
  }
  .lightbox__close { top: 1rem; right: 1rem; }
  .lightbox__prev { left: 1rem; top: 50%; translate: 0 -50%; }
  .lightbox__next { right: 1rem; top: 50%; translate: 0 -50%; }
  body:has(.lightbox[open]) { overflow: hidden; }

  /* ---- Inquiry sheet: side drawer on desktop, bottom sheet on phones ---- */
  .inquiry {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(32rem, 100%);
    height: 100dvh;
    max-width: none; max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--hairline);
    background: var(--wall);
    color: var(--text);
    overflow-y: auto;
    overscroll-behavior: contain;

    &::backdrop { background: var(--hero-scrim); }

    @media (max-width: 47.49rem) {
      inset: auto 0 0 0;
      width: 100%;
      height: auto;
      max-height: 92dvh;
      border-left: 0;
      border-top: 1px solid var(--hairline);
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    .inquiry, .inquiry::backdrop {
      transition: translate .45s var(--ease), opacity .45s var(--ease), overlay .45s allow-discrete, display .45s allow-discrete;
    }
    .inquiry { translate: 100% 0; }
    .inquiry[open] { translate: 0 0; }
    .inquiry::backdrop { opacity: 0; }
    .inquiry[open]::backdrop { opacity: 1; }
    @starting-style {
      .inquiry[open] { translate: 100% 0; }
      .inquiry[open]::backdrop { opacity: 0; }
    }
    @media (max-width: 47.49rem) {
      .inquiry { translate: 0 100%; }
      .inquiry[open] { translate: 0 0; }
      @starting-style { .inquiry[open] { translate: 0 100%; } }
    }
  }
  body:has(.inquiry[open]) { overflow: hidden; }
  .inquiry [hidden] { display: none !important; }

  .inquiry__sheet { padding: 0 clamp(20px, 4vw, 40px) 40px; }
  .inquiry__bar {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    background: var(--wall);
    border-bottom: 1px solid var(--hairline);
  }
  .inquiry__close {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border: 1px solid var(--hairline);
    background: transparent;
    color: var(--ink);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    &:hover { color: var(--accent); border-color: var(--accent); }
  }
  .inquiry__work {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 20px;
    align-items: center;
    padding: 28px 0;
    border-bottom: 1px solid var(--hairline);
  }
  .inquiry__thumb {
    position: relative;
    width: 96px; height: 120px;
    background: var(--wall-alt);
    img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; }
  }
  .inquiry__title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 23px;
    line-height: 1.2;
    color: var(--ink);
  }
  .inquiry__meta { margin-top: 4px; font-size: 14px; font-weight: 400; line-height: 1.6; color: var(--muted); }
  .inquiry__meta:empty, .inquiry .price:empty { display: none; }
  .inquiry .price { display: block; margin-top: 6px; }

  .inquiry__form { margin-top: 28px; gap: 24px; }
  .inquiry .btn-send { justify-self: stretch; }

  /* "I'd like to" choice chips: real radios, square hairline boxes */
  .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border: 0;
    padding: 0;
    margin: 0;
    legend { margin-bottom: 10px; padding: 0; }
    label { position: relative; }
    input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
    span {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      padding: 0 16px;
      border: 1px solid var(--hairline);
      font-size: 14px;
      font-weight: 400;
      color: var(--text);
    }
    input:hover + span { border-color: var(--accent); color: var(--accent); }
    input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--wall); }
    input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
  }

  .inquiry__done {
    display: grid;
    gap: 1.25rem;
    padding: 40px 0;
    &:focus { outline: none; }
    em { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--ink); }
  }
  button.cta { justify-self: start; padding: 0; border: 0; background: none; cursor: pointer; }
}

/* ---------- Portfolio: The Long Wall ---------- */
@layer components {
  .long-wall {
    --cm: 2.4px;                       /* 1 cm of canvas on screen */
    @media (max-width: 47.5rem) { --cm: 1.6px; }
    [hidden] { display: none !important; }
  }
  .long-wall__head { margin-bottom: clamp(40px, 5vw, 64px); }
  .long-wall__title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(56px, 8vw, 120px);
    line-height: .95;
    letter-spacing: -.02em;
    color: var(--ink);
  }

  /* Controls: segmented view toggle + room filter */
  .wall-controls { margin-bottom: clamp(48px, 7vw, 96px); }
  html:not(.js) .wall-controls { display: none; }
  .segmented {
    display: inline-flex;
    border: 1px solid var(--ink);
    button {
      min-height: 44px;
      padding: 0 20px;
      border: 0;
      background: transparent;
      font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
      color: var(--ink);
      cursor: pointer;
      & + button { border-left: 1px solid var(--ink); }
      &[aria-pressed="true"] { background: var(--ink); color: var(--wall); }
      &:hover:not([aria-pressed="true"]) { color: var(--accent); }
    }
  }
  .filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0 28px;
    margin-top: 24px;
    padding-top: 8px;
    border-top: 1px solid var(--hairline);
    list-style: none;
  }
  .filter__btn {
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
    color: var(--muted);
    cursor: pointer;
    &:hover { color: var(--accent); }
    &[aria-pressed="true"] { color: var(--accent); text-decoration: underline 1px; text-underline-offset: 6px; }
  }

  /* Rooms */
  .room + .room { margin-top: clamp(80px, 10vw, 144px); }
  .room__head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 6px 24px;
    > :not(.room__hint) { grid-column: 1; }
  }
  .room__num { font-size: 13px; font-weight: 400; color: var(--muted); }
  .room__title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(36px, 4.5vw, 60px);
    line-height: 1;
    color: var(--ink);
  }
  .room__meta { font-size: 14px; font-weight: 400; color: var(--muted); }
  .room__hint {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: end;
    font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
    color: var(--muted);
  }

  /* The wall: a horizontally scrolling row, works hung on a line at mid-height */
  .wall__row {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--hairline) transparent;
    &:focus { outline: none; }
  }
  .wall__track {
    position: relative;
    display: flex;
    align-items: center;
    gap: 48px;
    width: max-content;
    list-style: none;
    padding: 56px max(var(--gutter), calc((100vw - var(--container)) / 2));

    &::before {                        /* the hanging line */
      content: "";
      position: absolute;
      inset: 50% 0 auto;
      height: 1px;
      background: var(--hairline);
    }
  }
  .wall__item {
    position: relative;
    flex: none;
    width: calc(var(--w) * var(--cm));
    height: calc(var(--h) * var(--cm));
    scroll-snap-align: center;
  }
  .wall__work {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: var(--wall-alt);
    cursor: pointer;
    img { width: 100%; height: 100%; object-fit: cover; }
    &[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 6px; }
    &:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
  }
  .wall__num {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    color: var(--muted);
  }
  .wall__item:has([aria-pressed="true"]) .wall__num { color: var(--accent); }

  /* 100 cm scale bracket at the end of each row */
  .wall__scale {
    position: relative;
    flex: none;
    width: calc(100 * var(--cm));
    height: calc(100 * var(--cm));
    border-left: 1px solid var(--muted);
    border-bottom: 1px solid var(--muted);
    background: var(--wall);
    span {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      font-size: 13px; font-weight: 400; line-height: 1;
      color: var(--muted);
    }
  }

  /* Label rail for the selected work */
  .rail {
    display: grid;
    grid-template-columns: 3rem auto 1fr auto;
    align-items: baseline;
    gap: 6px 24px;
    padding-top: 14px;
    border-top: 1px solid var(--hairline);
    @media (max-width: 47.5rem) {
      grid-template-columns: 2.5rem 1fr;
      .rail__meta, .rail__end { grid-column: 2; }
    }
  }
  .rail__num { font-size: 13px; font-weight: 400; color: var(--muted); }
  .rail__title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 23px;
    line-height: 1.2;
    color: var(--ink);
  }
  .rail__meta { font-size: 14px; font-weight: 400; color: var(--muted); }
  .rail__end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 20px;
    .price:empty { display: none; }
  }

  /* Index view: numbered list of all works */
  .wall-index__list { list-style: none; border-bottom: 1px solid var(--hairline); }
  .wall-index__row {
    display: grid;
    grid-template-columns: 3rem 72px 1fr auto;
    align-items: center;
    gap: clamp(12px, 2.5vw, 32px);
    padding-block: 16px;
    border-top: 1px solid var(--hairline);
    &:hover .wall-index__title { color: var(--accent); }
    @media (max-width: 30rem) { grid-template-columns: 2rem 56px 1fr; .wall-index__price { grid-column: 3; } }
  }
  .wall-index__num { font-size: 13px; font-weight: 400; color: var(--muted); }
  .wall-index__thumb img {
    width: 72px; height: 90px;
    object-fit: cover;
    background: var(--wall-alt);
    clip-path: polygon(8% 0, 100% 6%, 92% 100%, 0 92%);
    @media (max-width: 30rem) { width: 56px; height: 70px; }
  }
  .wall-index__text { display: grid; gap: 2px; }
  .wall-index__title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.2;
    color: var(--ink);
  }
  .wall-index__meta { font-size: 14px; font-weight: 400; color: var(--muted); }
  .wall-index__price { font-size: 15px; font-weight: 400; color: var(--ink); text-align: right; }
}

/* ---------- Landing: /fine-artist-costa-rica/ ---------- */
@layer components {
  /* Map hero: text column aligned with the header container, map bleeding to the right edge */
  .mhero {
    background: var(--wall-alt);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 0 var(--gutter) clamp(32px, 4vw, 56px);
    @media (min-width: 68.75rem) {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      column-gap: clamp(24px, 3vw, 56px);
      padding-right: 0;
      padding-left: max(var(--gutter), calc((100% - var(--container)) / 2));
      min-height: min(960px, calc(100svh - var(--header-h)));
    }
  }
  .mhero__text {
    align-self: start;
    padding-bottom: 24px;
    > .eyebrow { margin-top: clamp(20px, 3vw, 44px); }
    h1 {
      margin: 18px 0 24px;
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 300;
      font-size: clamp(56px, 5.8vw, 104px);
      line-height: .92;
      letter-spacing: -.02em;
      color: var(--ink);
    }
  }
  .crumbs {
    padding-top: 28px;
    font-size: 14px;
    font-weight: 400;
    color: var(--muted);
    a { display: inline-flex; align-items: center; min-height: 44px; &:hover { color: var(--accent); } }
  }
  .mhero__lede {
    max-width: 30rem;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(20px, 1.7vw, 24px);
    line-height: 1.4;
    color: var(--ink);
  }
  .mhero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; margin-top: 28px; }

  /* Compact place list (desktop only): number | italic name | region */
  .mhero__list {
    display: none;
    margin-top: clamp(32px, 4vw, 56px);
    max-width: 30rem;
    > .eyebrow { margin-bottom: 10px; }
    @media (min-width: 68.75rem) { display: block; }
  }
  .places {
    list-style: none;
    border-bottom: 1px solid var(--hairline);
    li { border-top: 1px solid var(--hairline); }
    button {
      display: grid;
      grid-template-columns: 36px 1fr auto;
      align-items: baseline;
      gap: 12px;
      width: 100%;
      min-height: 44px;
      padding: 10px 0;
      border: 0;
      background: none;
      text-align: left;
      cursor: pointer;
    }
  }
  .places__n { font-size: 13px; font-weight: 400; color: var(--muted); }
  .places__name { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 21px; line-height: 1.2; color: var(--ink); transition: color .2s; }
  .places__region { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
  .places li.is-on .places__name, .places button:hover .places__name { color: var(--accent); }

  /* Map */
  .mhero__map {
    position: relative;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;   /* map at the top, so its card stays on screen however long the place list grows */
    margin: 0;
    padding-top: clamp(16px, 2vw, 32px);
  }
  .cr-map {
    width: 100%;
    height: auto;
    @media (min-width: 68.75rem) { max-height: calc(100svh - 130px); }
    .prov { fill: var(--wall); stroke: var(--hairline); stroke-width: 1.2; }
    .prov--g { fill: var(--hairline); stroke: var(--muted); }
    .sea { font: italic 300 30px var(--font-display); fill: var(--muted); }
    .ctry { font: 500 15px var(--font-body); letter-spacing: .16em; text-transform: uppercase; fill: var(--muted); }
    .gl { font: italic 400 36px var(--font-display); fill: var(--ink); }
    .pin { cursor: pointer; }
    .pin .dot { fill: var(--accent); }
    .pin--studio .dot { fill: var(--ink); }
    .pin .halo { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0; transition: opacity .3s; }
    .pin .num { font: 500 17px var(--font-body); fill: var(--ink); }
    .pin .lab { font: 400 21px var(--font-body); fill: var(--ink); transition: fill .2s; }
    .pin.is-on .halo { opacity: 1; }
    .pin.is-on .lab { fill: var(--accent); }
    .reach circle { fill: var(--wall); stroke: var(--ink); stroke-width: 1.5; }
    .reach text { font: 400 19px var(--font-body); fill: var(--muted); }
    /* Under 480px the map's text gets too small to read; drop the hollow "reach" labels only */
    @media (max-width: 30rem) { .reach text { display: none; } }
  }
  .map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin-top: 20px;
    font-size: 14px;
    font-weight: 400;
    color: var(--muted);
    span { display: inline-flex; align-items: center; gap: 10px; }
    i { display: inline-block; width: 10px; height: 10px; }
    @media (min-width: 68.75rem) { justify-content: flex-end; padding-right: var(--gutter); }
  }
  .map-legend__studio { background: var(--ink); }
  .map-legend__exhibition { background: var(--accent); border-radius: 50%; }
  .map-legend__reach { border: 1.5px solid var(--ink); border-radius: 50%; }

  /* Place cards: on desktop one at a time over the Pacific; stacked below 1100px. Hidden only when JS runs. */
  .mhero__cards { margin-top: 24px; }
  .place-card {
    padding: 16px 0;
    border-top: 1px solid var(--hairline);
    h3 { margin: 6px 0 8px; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--ink); }
    ul { list-style: none; font-size: 15px; line-height: 1.5; }
    li { padding: 3px 0; }
    li span { color: var(--muted); }
    li a { border-bottom: 1px solid var(--hairline); &:hover { color: var(--accent); border-color: var(--accent); } }
  }
  /* The card is anchored to the map (over the Pacific), not to the hero, so a longer place list can't push it down */
  .mhero__canvas { position: relative; }
  @media (min-width: 68.75rem) {
    .mhero__cards { position: absolute; left: 2%; bottom: 2%; width: min(340px, 40%); margin: 0; }
    .place-card { padding: 14px 0 0; border-top-color: var(--ink); }
    .js .place-card:not(.is-on) { display: none; }
  }
  @media (min-width: 68.75rem) and (prefers-reduced-motion: no-preference) {
    .place-card.is-on { animation: place-in .5s var(--ease); }
  }
  @keyframes place-in { from { opacity: 0; translate: 0 8px; } }

  /* Facts row */
  .lp-facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 0;
    padding-top: 20px;
    border-top: 1px solid var(--hairline);
    @media (min-width: 53.75rem) { grid-template-columns: repeat(4, 1fr); }
    div { padding-right: 16px; }
    dd { margin: 6px 0 0; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(20px, 2vw, 24px); line-height: 1.2; color: var(--ink); }
  }

  /* Practice intro */
  .lp-intro__grid {
    display: grid;
    gap: clamp(40px, 6vw, 104px);
    @media (min-width: 53.75rem) { grid-template-columns: 5fr 7fr; }
    .section-title { margin-top: 18px; }
  }
  .lp-intro__text p { max-width: 34rem; & + p { margin-top: 1.1em; } }
  .lp-intro__fig, .lp-works figure {
    img { width: 100%; height: auto; }
    figcaption {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      margin-top: 14px;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.4;
      color: var(--muted);
      em { font-size: 18px; color: var(--ink); }
    }
  }
  .lp-intro__fig { margin-top: 48px; max-width: 420px; img { clip-path: polygon(6% 0, 100% 3%, 95% 100%, 0 97%); } }

  /* Services + process */
  .lp-services .section-title { margin-top: 18px; }
  .lp-services__grid {
    display: grid;
    gap: 48px 40px;
    margin-top: 64px;
    @media (min-width: 53.75rem) { grid-template-columns: repeat(3, 1fr); }
    article { padding-top: 24px; border-top: 1px solid var(--hairline); }
    h3 { margin: 12px 0; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2; color: var(--ink); }
    p { font-size: 16px; }
  }
  .lp-services__n { font-size: 13px; font-weight: 400; color: var(--muted); }
  .lp-process {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px 0;
    margin-top: clamp(64px, 8vw, 104px);
    list-style: none;
    @media (min-width: 30rem) { grid-template-columns: 1fr 1fr; }
    @media (min-width: 53.75rem) { grid-template-columns: repeat(4, 1fr); gap: 0; }
    li { padding: 24px 24px 0 0; border-top: 1px solid var(--ink); }
    .eyebrow { color: var(--accent); }
    h3 { margin: 10px 0 8px; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 22px; line-height: 1.25; color: var(--ink); }
    p:not(.eyebrow) { font-size: 15px; line-height: 1.6; }
  }

  /* The work */
  .lp-works__head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    .section-title { margin-top: 18px; }
  }
  .lp-works {
    display: grid;
    gap: 40px;
    align-items: end;
    margin-top: 56px;
    list-style: none;
    @media (min-width: 53.75rem) { grid-template-columns: repeat(3, 1fr); }
    a:hover em { color: var(--accent); }
  }

  /* FAQ */
  .lp-faq {
    display: grid;
    gap: clamp(40px, 6vw, 104px);
    @media (min-width: 53.75rem) { grid-template-columns: 5fr 7fr; }
    .section-title { margin-top: 18px; }
  }
  .lp-faq__list {
    border-bottom: 1px solid var(--hairline);
    details { border-top: 1px solid var(--hairline); }
    summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      min-height: 44px;
      padding: 22px 0;
      list-style: none;
      cursor: pointer;
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 400;
      font-size: clamp(20px, 1.8vw, 24px);
      line-height: 1.3;
      color: var(--ink);
      &::-webkit-details-marker { display: none; }
      &::after { content: "+"; font: 300 24px var(--font-body); color: var(--muted); transition: rotate .3s; }
      &:hover { color: var(--accent); }
    }
    details[open] summary::after { rotate: 45deg; }
    p { max-width: 34rem; padding-bottom: 24px; font-size: 16px; }
  }

  /* Closing band */
  .lp-closing { background: var(--wall-alt); }
  .lp-closing__grid {
    display: grid;
    gap: clamp(40px, 6vw, 104px);
    align-items: end;
    @media (min-width: 53.75rem) { grid-template-columns: 7fr 5fr; }
    p { margin-top: 24px; max-width: 34rem; }
    ul { margin-top: 28px; list-style: none; font-size: 16px; color: var(--ink); }
    li a { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--hairline); &:hover { color: var(--accent); border-color: var(--accent); } }
  }

  .about-cv__more { grid-column: 1 / -1; justify-self: start; margin-top: 24px; }
}

/* ---------- Utilities: reveal on scroll ---------- */
@layer utilities {
  /* Read by screen readers, not shown */
  .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  @media (prefers-reduced-motion: no-preference) {
    .js .reveal {
      opacity: 0;
      translate: 0 12px;
      transition: opacity 600ms var(--ease), translate 600ms var(--ease);
    }
    .js .reveal.is-visible { opacity: 1; translate: 0 0; }
  }
}