/* ==========================================================================
   Responsive — mobile gets its own composition, not a shrunken desktop.

   Loaded last so these rules win. Breakpoints are in rem so they respond to
   the user's font size, not just device width.
   ========================================================================== */

/* ==========================================================================
   Large desktop — 90rem+ : let the type breathe further
   ========================================================================== */
@media (min-width: 100rem) {
  :root {
    --maxw: 100rem;
  }
}

/* ==========================================================================
   Tablet landscape and below — 75rem
   ========================================================================== */
@media (max-width: 75rem) {
  .process__list,
  .philosophy__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-7) var(--s-6);
  }

  .service {
    grid-template-columns: auto 1fr;
  }

  .service__body {
    grid-column: 2;
    max-width: 60ch;
  }
}

/* ==========================================================================
   Tablet / mobile nav switch — 60rem
   Below this the inline links are replaced by the fullscreen menu.
   ========================================================================== */
@media (max-width: 60rem) {
  .nav__links,
  .nav__cta {
    display: none;
  }

  .nav__toggle {
    display: inline-flex;
  }

  .nav__actions {
    gap: var(--s-2);
  }

  /* Projects stack; the visual always leads. */
  .project {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }

  .project__visual {
    aspect-ratio: 16 / 10;
    padding: var(--s-6);
  }

  .hero__title {
    max-width: 100%;
  }
}

/* ==========================================================================
   Mobile — 40rem
   ========================================================================== */
@media (max-width: 40rem) {
  :root {
    /* Tighter rhythm so a phone screen isn't mostly empty space. */
    --section-y: clamp(3.5rem, 14vw, 5rem);
  }

  /* --- Hero: stacked, left-aligned, CTAs full width ---------------------- */
  .hero {
    min-height: 100svh;
    padding-top: calc(var(--nav-h) + var(--s-5));
  }

  .hero::before {
    background-size: 3.5rem 3.5rem;
    opacity: 0.35;
  }

  .hero__meta {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-5);
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-3);
  }

  .hero__actions .btn {
    width: 100%;
  }

  /* Ghost button would look odd full-width — keep it inline. */
  .hero__actions .btn--ghost {
    width: fit-content;
    margin-top: var(--s-2);
  }

  .hero__scroll {
    display: none;
  }

  /* --- Services: index above title, body below -------------------------- */
  .service {
    grid-template-columns: 1fr;
    gap: var(--s-2);
    padding-block: var(--s-5);
  }

  .service__index {
    padding-top: 0;
    color: var(--accent);
  }

  .service__body,
  .service__title {
    grid-column: 1;
  }

  /* Hover is unavailable — never let it carry meaning here. */
  .service:hover .service__title {
    transform: none;
  }

  /* --- Nav utility cluster ---------------------------------------------
     At 375px the bar has to fit brand + SR/EN + theme + menu button. These
     tighten the utility controls just enough that nothing is pushed off the
     edge, while every hit area stays at least 40px.
     --------------------------------------------------------------------- */
  .nav__inner {
    gap: var(--s-3);
  }

  .nav__actions {
    gap: var(--s-2);
  }

  .lang__btn {
    min-width: 2.25rem;
    padding-inline: var(--s-1);
  }

  /* The gap alone separates the two controls at this size. */
  .utility__sep {
    display: none;
  }

  .utility {
    gap: var(--s-2);
  }

  .theme-toggle {
    width: 2.5rem;
    height: 2.5rem;
  }

  .nav__brand-sub {
    /* The wordmark alone carries the brand at this size; the tracked-out
       "STUDIO" line is what tips the bar over its width budget. */
    display: none;
  }

  /* --- Work ------------------------------------------------------------- */
  .project__visual {
    aspect-ratio: 3 / 2;
    padding: var(--s-5);
  }

  .project__number {
    font-size: var(--t-lg);
  }

  .work__more {
    justify-content: flex-start;
  }

  /* --- Carousel controls ------------------------------------------------ */
  .carousel__controls {
    flex-direction: row-reverse;
    justify-content: space-between;
  }

  .carousel__dot {
    width: 2.5rem;
  }

  .carousel__dot::before {
    width: 1.5rem;
  }

  /* --- Process / Philosophy: single column ------------------------------ */
  .process__list,
  .philosophy__grid {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }

  .philosophy__statement {
    margin-bottom: var(--s-7);
  }

  /* --- Section heads ---------------------------------------------------- */
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
    margin-bottom: var(--s-6);
  }

  .section-head__rule {
    display: none;
  }

  /* --- Footer: stacked ---------------------------------------------------*/
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }

  .footer__bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
  }

  /* --- CTA -------------------------------------------------------------- */
  .cta__action {
    width: 100%;
  }

  .cta__action .btn {
    width: 100%;
  }

  /* --- Intro ------------------------------------------------------------ */
  .intro__skip {
    bottom: var(--s-5);
    right: var(--s-4);
  }
}

/* ==========================================================================
   Short viewports — landscape phones
   ========================================================================== */
@media (max-height: 34rem) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding-block: calc(var(--nav-h) + var(--s-6)) var(--s-7);
  }

  .intro__stage {
    gap: var(--s-4);
  }

  .intro__mark {
    width: clamp(8rem, 22vh, 14rem);
  }

  .menu {
    justify-content: flex-start;
    overflow-y: auto;
  }

  .menu__link {
    font-size: clamp(1.5rem, 7vh, 2.25rem);
  }
}

/* ==========================================================================
   Pointer-coarse — remove hover-only affordances
   ========================================================================== */
@media (hover: none) {
  .service:hover::before,
  .service:hover .service__title,
  .project:hover .project__logo,
  .project:hover .project__number {
    transform: none;
  }

  /* Rules stay filled on touch so the composition doesn't look unfinished. */
  .project__rule {
    transform: scaleX(1);
  }
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print {
  .nav,
  .menu,
  .intro,
  .cursor,
  .skip-link,
  .hero__scroll {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}