/* responsive.css — Studio Chaukhat
   Mobile-first. Designed at 360px first, then scaled up.
   Only the four project breakpoints: 480 / 768 / 1024 / 1440. No others.
   Max content width 1280px, centred, with a gutter that grows.
*/

/* ─────────────────────────────────────────────────────────────────────
   480px+ · large mobile
   ───────────────────────────────────────────────────────────────────── */

@media (min-width: 480px) {
  :root {
    --gutter:     1.75rem;
    --word-one:   clamp(3rem, 12vw, 4.2rem);
    --word-two:   clamp(4rem, 17vw, 6rem);
    --word-three: clamp(2.6rem, 11vw, 4rem);
  }

  .field-pair { grid-template-columns: 1fr 1fr; }

  .statement__facts { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .statement__facts li { flex-direction: column; gap: 0.2rem; }

  .actionbar__item { font-size: var(--text-base); }
}

/* ─────────────────────────────────────────────────────────────────────
   768px+ · tablet
   The nav leaves the door-panel and becomes a horizontal index.
   The sticky action bar is a phone pattern — it goes away here.
   ───────────────────────────────────────────────────────────────────── */

@media (min-width: 768px) {
  :root {
    --gutter:     2.5rem;
    --word-one:   clamp(4rem, 8.6vw, 6rem);
    --word-two:   clamp(5.4rem, 12.2vw, 8.6rem);
    --word-three: clamp(3.4rem, 8vw, 5.6rem);
  }

  /* Nav — reset every fixed-panel property from effects.css §4 */
  html.js .menu-btn,
  .menu-btn { display: none; }
  html.js .nav,
  .nav {
    position: static;
    inset: auto;
    width: auto;
    padding: 0;
    border-top: 0;
    background: none;
    visibility: visible;
    opacity: 1;
    transform: none;
    overflow: visible;
  }
  html.js .nav .nav__list,
  .nav .nav__list { flex-direction: row; gap: var(--space-md); }
  html.js .nav .nav__link,
  .nav .nav__link {
    display: inline-block;
    font-size: var(--text-sm);
    letter-spacing: 0.13em;
    padding-block: 0.4rem;
    border-bottom: 0;
  }
  html.js .nav .nav__link::before,
  .nav .nav__link::before { height: 2px; }
  html.js .nav .nav__foot,
  .nav .nav__foot { display: none; }
  body.nav-locked { overflow: auto; }

  /* No sticky bar on tablet and up */
  .actionbar { display: none; }
  body { padding-bottom: 0; }

  .plates { grid-template-columns: repeat(2, 1fr); gap: var(--gap-block) var(--space-md); }
  .plate--1 { grid-column: 1 / -1; max-width: 62%; }

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

  .statement__cols { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
  .opening__cols   { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
  .opening__cols p:first-child { grid-column: 1 / -1; font-size: var(--text-lg); color: var(--color-text); }

  .idxhead__grid {
    grid-template-columns: 1fr auto;
    align-items: end;
    column-gap: var(--space-md);
  }
  .idxhead__note { grid-column: 1 / -1; }

  .roster__row {
    grid-template-columns: 15rem 11rem 1fr;
    gap: var(--space-md);
    align-items: start;
  }

  .fees__tables { grid-template-columns: 1fr 1fr; gap: var(--space-md); align-items: start; }

  .proj__stage { grid-template-columns: repeat(3, 1fr); }

  .next__grid,
  .current__grid,
  .named__grid,
  .enquire__grid,
  .projection__grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: start; }

  .next__plate,
  .current__plate,
  .enquire__plate { max-width: 26rem; }

  .colophon__record { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg) var(--space-md); }

  .errorpage__title { max-width: 14ch; }
}

/* ─────────────────────────────────────────────────────────────────────
   1024px+ · desktop
   The hero splits: the wordmark stack takes eight columns, the photograph
   sits beside it in the remaining four — subordinate, never behind the type.
   ───────────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
  :root {
    --gutter:     3.5rem;
    --word-one:   clamp(5rem, 7.4vw, 7.5rem);
    --word-two:   clamp(7rem, 15.2vw, 13rem);
    --word-three: clamp(4rem, 7vw, 7rem);
  }

  .hero__grid {
    grid-template-columns: 8fr 4fr;
    gap: var(--space-lg);
    align-items: end;
  }
  .hero__plate { align-self: end; padding-bottom: 0.4rem; }
  .hero__line--three { margin-left: 0.1em; }

  .statement__lead { font-size: clamp(2.2rem, 3.1vw, 3rem); max-width: 26ch; }
  .statement__cols { max-width: none; grid-template-columns: repeat(2, minmax(0, 34ch)); gap: var(--space-lg); }

  /* Work index — the aperture and the tombstone alternate sides */
  .worklist .entry {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-lg);
    align-items: start;
  }
  .worklist .entry--flip .entry__plate { order: 2; }
  .worklist .entry--flip .entry__body  { order: 1; }
  .entry__plate { max-width: 30rem; }

  .plates { grid-template-columns: repeat(12, 1fr); }
  .plate--1 { grid-column: 1 / span 6; max-width: none; }
  .plate--2 { grid-column: 8 / span 5; margin-top: var(--gap-section); }
  .plate--3 { grid-column: 2 / span 5; }

  .steps--full .step,
  .steps .step { grid-template-columns: 5rem 1fr; gap: var(--space-md); }
  .step__n { font-size: var(--text-xl); }

  .fees__grid { grid-template-columns: 5fr 7fr; gap: var(--space-xl); }

  .projection__grid { grid-template-columns: 6fr 6fr; gap: var(--space-xl); }
  .projection__hint-desk { display: inline; }
  html.js.motion .projection__stage-wrap { position: sticky; top: 14vh; }

  .enquiry__grid { grid-template-columns: 5fr 7fr; gap: var(--space-xl); align-items: start; }
  .enquiry__aside { position: sticky; top: 8rem; }

  .next__grid,
  .current__grid,
  .named__grid { grid-template-columns: 7fr 5fr; gap: var(--space-xl); }
  .named__grid .named__plate { order: 1; }
  .named__grid .named__text  { order: 2; }

  .enquire__grid { grid-template-columns: 7fr 4fr; gap: var(--space-xl); }

  .colophon__record { grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }

  .tomb--wide { grid-template-columns: 1fr 1fr; column-gap: var(--space-md); }
}

/* ─────────────────────────────────────────────────────────────────────
   1440px+ · large desktop
   ───────────────────────────────────────────────────────────────────── */

@media (min-width: 1440px) {
  :root {
    --gutter:   4.5rem;
    --jamb:     14px;
    --word-two: 13.5rem;
  }

  .hero__grid { gap: var(--space-xl); }
  .entry__plate { max-width: 34rem; }
  .head__note   { font-size: var(--text-xl); }
}