/* ==========================================================================
   Responsive behaviour
   ========================================================================== */

@media (max-width: 1180px) {
  .hero-copy { left: 53.2%; width: min(320px, 31vw); }
  .hero-bottom { left: 53.2%; }
  .work-body { grid-template-columns: minmax(190px, 0.5fr) minmax(0, 1.5fr); }
  .menu-body { grid-template-columns: minmax(0, 1.45fr) minmax(200px, 0.5fr); }
}

@media (max-width: 1024px) {
  :root { --header-h: 72px; }
  .hero-copy { top: clamp(330px, 42vh, 420px); }
  .availability { display: none; }
  .about { grid-template-columns: minmax(190px, 0.62fr) minmax(0, 1.8fr); gap: 5vw; }
  .about-portrait { width: 92%; }
  .work-head { grid-template-columns: minmax(0, 1.3fr) minmax(210px, 0.5fr); }
  .services-top { grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.55fr); }
  .acc-content { grid-template-columns: 52px minmax(0, 1.25fr) minmax(130px, 0.5fr); }
  .acc-body { grid-template-columns: 1fr; gap: 22px; }
  .case-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 26px; }
  .case-stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive-card--cta::after { font-size: 27vw; }
  .press-head { grid-template-columns: 0.7fr 1.3fr; }
}

@media (max-width: 900px) {
  :root { --hero-split: 52vw; }
  .menu-body { grid-template-columns: 1fr; align-items: flex-start; padding-top: 5vh; }
  .menu-side { display: none; }
  .menu-link .word { font-size: clamp(44px, 10vw, 84px); }
  .hero-media { width: 52%; }
  .hero-title--light { clip-path: inset(0 calc(100% - 52vw) 0 0); }
  .hero-title .line-1 { font-size: clamp(58px, 13.2vw, 160px); }
  .hero-title .line-2 { font-size: clamp(31px, 6.5vw, 78px); }
  .hero-copy { left: 55.5%; width: min(320px, 38vw); top: clamp(310px, 43vh, 400px); }
  .hero-bottom { left: 55.5%; }
  .roundel { right: calc(100% - 52vw - var(--size) / 2); }
  .about { grid-template-columns: 1fr; gap: 50px; }
  .about-aside { position: static; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; }
  .about-label { flex: 1; }
  .about-portrait { width: 34%; max-width: 240px; }
  .about-aside-note { display: none; }
  .work-body { grid-template-columns: minmax(170px, 0.46fr) minmax(0, 1.54fr); gap: 4vw; }
  .cover-name { font-size: clamp(30px, 4.7vw, 52px); }
  .cover--maison .cover-name { font-size: clamp(32px, 5vw, 56px); }
  .cover--sable .cover-name { font-size: clamp(34px, 5.5vw, 64px); }
  .work-index-link { grid-template-columns: 24px minmax(0, 1fr); }
  .work-index-link .index-year { display: none; }
  .press-band span { font-size: clamp(40px, 8vw, 80px); }
  .press-row { grid-template-columns: 58px minmax(0, 1fr) minmax(0, 0.7fr) 24px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  :root { --header-h: 64px; }
  .site-header { padding: 0 var(--gutter); }
  .brand { font-size: 16px; }
  .brand .brand-meta { font-size: 7px; }
  .menu-btn { height: 34px; padding: 0 13px; font-size: 8px; }
  .burger { width: 13px; }
  .header-right { color: var(--paper); }

  .hero {
    height: auto;
    min-height: 100svh;
    overflow: hidden;
  }
  .hero-media {
    position: relative;
    width: 100%;
    height: 76svh;
    min-height: 520px;
    clip-path: inset(0 0 0 0);
  }
  .js .hero-media { clip-path: inset(0 0 100% 0); }
  body.is-ready .hero-media { clip-path: inset(0 0 0 0); }
  .hero-media img { object-position: 50% 30%; filter: contrast(1.06) brightness(0.78) saturate(1.05); }
  .hero-scrim {
    background: linear-gradient(180deg, rgba(12, 11, 10, 0.66) 0%, rgba(12, 11, 10, 0.18) 30%, rgba(12, 11, 10, 0) 55%, rgba(12, 11, 10, 0.55) 100%);
  }
  .hero-title {
    top: 96px;
    left: var(--gutter);
    width: calc(100% - var(--gutter) * 2);
    color: var(--paper);
    z-index: 5;
  }
  .hero-title--light { display: none; }
  .hero-title .line-1 {
    font-size: 15.4vw;
    line-height: 0.85;
    letter-spacing: -0.065em;
    white-space: normal;
  }
  .hero-title .line-2 {
    font-size: 9.3vw;
    margin-top: 0.4em;
    margin-left: 0;
    letter-spacing: -0.05em;
  }
  .hero-copy {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    padding: 34px var(--gutter) 26px;
    max-width: 520px;
    border-bottom: 1px solid var(--line);
  }
  .hero-copy .eyebrow { margin-bottom: 12px; }
  .hero-copy p { font-size: 14px; max-width: 40ch; }
  .hero-copy .hero-contact-link { margin-top: 20px; }
  .hero-caption {
    left: var(--gutter);
    right: var(--gutter);
    bottom: 22px;
    color: var(--paper);
  }
  .hero-caption .caption-main { font-size: 18px; }
  .hero-caption .caption-sub { display: none; }
  .roundel {
    --size: 92px;
    top: calc(76svh - 46px);
    bottom: auto;
    right: var(--gutter);
    z-index: 8;
  }
  .roundel-svg { display: none; }
  .roundel::before {
    content: "PAYTON\A CHI";
    position: absolute;
    top: 18px;
    left: 0;
    right: 0;
    font-family: var(--mono);
    font-size: 8px;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-align: center;
    white-space: pre;
  }
  .roundel-arrow { font-size: 24px; transform: translateY(14px); }
  .hero-bottom {
    position: relative;
    left: auto;
    bottom: auto;
    padding: 15px var(--gutter) 18px;
    color: var(--muted);
  }
  .hero-bottom .coords { display: none; }
  .hero-bottom .scroll-cue { gap: 8px; }
  .scroll-cue .cue-line { width: 28px; }

  .ticker { padding: 10px 0; }
  .ticker-item { font-size: 9px; letter-spacing: 0.06em; }

  .showcase { padding: 60px 0 80px; }
  .showcase-head { display: block; padding: 0 var(--gutter); margin-bottom: 30px; }
  .showcase-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-top: 18px; }
  .showcase-lede { font-size: 27px; max-width: 13ch; }
  .showcase-cue { font-size: 8px; padding-bottom: 2px; }
  .showcase-cue svg { width: 20px; }
  .reel { gap: 12px; }
  .reel-card { width: 60vw; max-width: 270px; }
  .reel-card:nth-child(2n) { --offset: 24px; }
  .reel-card:nth-child(3n) { --offset: 10px; }
  .reel-meta { font-size: 8px; padding-top: 8px; }
  .reel-progress { margin: 24px var(--gutter) 0; }

  .about { padding: 64px var(--gutter) 74px; gap: 40px; }
  .about-aside { flex-direction: row; align-items: flex-start; }
  .about-label { font-size: 8px; flex: 1; }
  .about-portrait { width: 36%; padding: 6px 6px 27px; transform: rotate(-2deg); }
  .about-portrait figcaption { font-size: 12px; padding-top: 8px; }
  .about-body { max-width: 100%; }
  .about-lede { font-size: clamp(27px, 7.4vw, 40px); line-height: 1.1; letter-spacing: -0.035em; }
  .about-cols { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; }
  .about-cols p { font-size: 14px; }
  .about-cols .mini-label { margin-bottom: 10px; }
  .about-stats { margin-top: 44px; gap: 12px; }
  .stat b { font-size: clamp(34px, 10vw, 48px); }
  .stat > span { font-size: 7.5px; line-height: 1.5; }

  .work, .services { padding: 64px var(--gutter) 78px; }
  .section-rule { padding-top: 11px; gap: 14px; }
  .section-rule .rule-right { text-align: right; }
  .section-heading { font-size: clamp(44px, 13vw, 70px); line-height: 0.9; }
  .work-head { display: block; margin-top: 28px; }
  .work-head-copy { max-width: 100%; padding: 24px 0 0; }
  .work-head-copy p { max-width: 38ch; }
  .work-head-copy .text-link { margin-top: 16px; }

  .work-body { display: block; margin-top: 28px; }
  .work-index {
    position: sticky;
    top: 64px;
    z-index: 25;
    margin: 0 calc(var(--gutter) * -1) 26px;
    padding: 9px var(--gutter);
    background: rgba(242, 239, 231, 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .work-index-head, .work-index-note, .work-index-count { display: none; }
  .work-index-list { display: flex; gap: 6px; overflow-x: auto; border: 0; scrollbar-width: none; }
  .work-index-list::-webkit-scrollbar { display: none; }
  .work-index-link {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 99px;
    opacity: 1;
    transition: background 0.3s, border-color 0.3s, color 0.3s;
  }
  .work-index-link .index-num { font-size: 7px; padding: 0; color: var(--muted); }
  .work-index-link .index-name { font-family: var(--mono); font-size: 8px; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; }
  .work-index-link .index-cat, .work-index-link .index-year { display: none; }
  .work-index-link.is-active { background: var(--ink); border-color: var(--ink); }
  .work-index-link.is-active .index-name { color: var(--paper); }
  .work-index-link.is-active .index-num { color: var(--accent); }
  .work-stage { gap: 54px; }
  .work-item { scroll-margin-top: 120px; }
  .work-cover { aspect-ratio: 4 / 5; }
  .cover-ui { padding: 16px; }
  .cover-brand { font-size: 18px; }
  .cover-navlinks { font-size: 6px; gap: 8px; }
  .cover-name { font-size: clamp(34px, 10vw, 52px); }
  .cover--maison .cover-name { font-size: clamp(36px, 10.4vw, 54px); }
  .cover--sable .cover-name { font-size: clamp(38px, 11vw, 58px); }
  .cover--seconde .cover-name { font-size: clamp(30px, 9vw, 46px); }
  .cover--nocturne .cover-name { font-size: clamp(34px, 10vw, 50px); }
  .cover-foot { font-size: 6px; }
  .cover-cta { padding: 6px 9px; }
  .work-meta { padding: 13px 0 18px; grid-template-columns: 1fr auto; }
  .work-meta-title { gap: 4px 10px; }
  .work-meta-title h3 { font-size: 19px; }
  .work-meta-title .work-tagline { display: block; width: 100%; font-size: 16px; }
  .work-meta-tags { font-size: 7px; max-width: 15ch; line-height: 1.7; }

  .services-top { display: block; margin-top: 26px; }
  .services-top p { max-width: 38ch; margin-top: 22px; padding: 0; }
  .accordion { margin-top: 30px; }
  .acc-trigger { grid-template-columns: 28px minmax(0, 1fr) 34px; gap: 10px; padding: 17px 0; }
  .acc-num { font-size: 8px; }
  .acc-title { font-size: clamp(26px, 8.2vw, 40px); }
  .acc-icon { width: 32px; height: 32px; }
  .acc-content { display: block; padding-bottom: 28px; }
  .acc-content > .acc-spacer { display: none; }
  .acc-body { display: block; }
  .acc-desc { font-size: 14px; max-width: 42ch; }
  .acc-list { margin-top: 20px; }
  .acc-list li { font-size: 11px; padding: 6px 0; }
  .acc-media { display: none; }
  .services-foot { margin-top: 20px; }
  .services-foot p { font-size: 19px; }

  .press-band { padding: 12px 0; }
  .press-band span { font-size: 12vw; gap: 24px; padding-right: 24px; }
  .press { padding: 54px var(--gutter) 70px; }
  .press-head { display: block; }
  .press-head .section-rule { margin-bottom: 28px; }
  .press-quote { font-size: clamp(28px, 8vw, 38px); }
  .press-list { margin-top: 40px; }
  .press-row { grid-template-columns: 42px minmax(0, 1fr) 18px; gap: 12px; padding: 14px 0; }
  .press-project { display: none; }
  .press-name { font-size: 16px; line-height: 1.2; }
  .press-year { font-size: 8px; }
  .press-arrow { width: 14px; height: 14px; }

  .contact { padding: 60px var(--gutter) 0; }
  .contact-title { font-size: clamp(48px, 14.2vw, 78px); line-height: 0.9; margin-top: 28px; }
  .contact-title .indent { margin-left: 0; }
  .contact-grid { display: block; margin-top: 40px; padding-bottom: 50px; }
  .contact-intro { max-width: 100%; }
  .contact-intro .big { font-size: 24px; margin-bottom: 16px; }
  .contact-email-wrap { margin-top: 28px; }
  .email-link { font-size: clamp(20px, 6.6vw, 31px); gap: 10px; }
  .contact-side { margin-top: 38px; grid-template-columns: 1fr 1fr; gap: 24px; }
  .contact-bar { padding: 18px 0; font-size: 7.5px; gap: 14px; }
  .to-top { padding: 6px 11px; }
  .footer-marquee { padding: 18px 0 10px; }
  .footer-name { font-size: clamp(74px, 23vw, 130px); gap: 22px; padding-right: 22px; }

  .menu-body { padding: 6vh 0 4vh; }
  .menu-link { gap: 12px; padding: 0.28em 0; }
  .menu-link .num { width: 18px; font-size: 8px; }
  .menu-link .word { font-size: clamp(38px, 12vw, 64px); }
  .menu-link .hint { display: none; }
  .menu-bottom { font-size: 7.5px; flex-wrap: wrap; gap: 8px 20px; }

  .preloader-top span:last-child { display: none; }
  .preloader-mark { font-size: clamp(64px, 18vw, 110px); }
  .preloader-count { font-size: 22px; }
  .preloader-foot { font-size: 8px; }
  .preloader-foot span:first-child { max-width: 24ch; }

  /* Archive */
  .archive-hero { padding: 38px var(--gutter) 30px; }
  .archive-hero .section-rule .rule-right { display: none; }
  .archive-title { font-size: clamp(56px, 16.5vw, 96px); display: block; margin-top: 24px; }
  .archive-title .archive-count { display: block; margin-top: 18px; padding: 0; font-size: 9px; }
  .archive-intro { display: block; margin-top: 22px; }
  .archive-intro p { font-size: 14px; max-width: 100%; }
  .archive-intro .archive-aside { display: none; }
  .archive-toolbar { top: 66px; margin-top: 30px; }
  .archive-toolbar-inner { display: block; padding: 10px 0; }
  .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 var(--gutter); }
  .filters::-webkit-scrollbar { display: none; }
  .filter-btn { flex: 0 0 auto; padding: 7px 10px; font-size: 7.5px; }
  .archive-tools { display: none; }
  .archive-grid { grid-template-columns: 1fr; gap: 40px; padding: 32px var(--gutter) 70px; }
  .archive-card:nth-child(2n) { margin-top: 0; }
  .archive-card-meta h2 { font-size: 24px; }
  .archive-card-meta .archive-tagline { font-size: 17px; }
  .archive-card--cta { aspect-ratio: 4 / 5; margin-top: 12px; }
  .archive-card--cta::after { font-size: 54vw; }
  .archive-card--cta h2 { font-size: clamp(40px, 12vw, 60px); }
  .archive-grid.is-list { display: block; }
  .archive-grid.is-list .archive-card { display: block; padding: 16px 0; }
  .archive-grid.is-list .archive-card-meta { display: grid; grid-template-columns: 1fr auto; }
  .archive-grid.is-list .archive-list-num, .archive-grid.is-list .archive-list-arrow { display: none; }
  .archive-grid.is-list .archive-card-meta h2 { font-size: 24px; }
  .archive-grid.is-list .archive-card-meta .archive-tagline { display: block; margin: 5px 0 0; font-size: 17px; }
  .archive-grid.is-list .archive-card--cta { display: flex; flex-direction: column; align-items: flex-start; padding: 26px 0; gap: 20px; }
  .archive-grid.is-list .archive-card--cta h2 { font-size: 28px; }
  .archive-footer { padding: 50px var(--gutter) 22px; }
  .archive-footer-cta { display: block; }
  .archive-footer-cta p { font-size: 30px; }
  .archive-footer-cta .text-link { margin-top: 22px; }
  .archive-footer-bottom { margin-top: 50px; }

  /* Case study */
  .case-hero { height: 80svh; min-height: 560px; }
  .case-hero-media img { object-position: var(--focal-m, var(--focal, 50% 50%)); }
  .case-hero-inner { padding-top: calc(var(--header-h) + 10px); padding-bottom: 20px; }
  .case-hero-top { font-size: 8px; }
  .case-hero-top > span:last-child { display: none; }
  .case-hero-client { font-size: 8px; margin-bottom: 12px; }
  .case-hero h1 { font-size: clamp(46px, 13.5vw, 76px); line-height: 0.92; }
  .case--sans .case-hero h1 { font-size: clamp(42px, 12.5vw, 70px); }
  .case-hero-bottom { padding-top: 16px; }
  .case-hero-services { gap: 4px 5px; max-width: 68%; }
  .case-hero-services span { font-size: 6.5px; padding: 4px 8px; }
  .case-hero-scroll { font-size: 7px; }
  .case-intro { padding: 32px var(--gutter) 60px; }
  .case-facts { grid-template-columns: 1fr 1fr; gap: 22px 18px; padding: 16px 0 20px; }
  .fact h2, .fact h3 { font-size: 7px; margin-bottom: 6px; }
  .fact p { font-size: 12px; }
  .case-lede-wrap { display: block; margin-top: 32px; }
  .case-lede-label { margin-bottom: 16px; }
  .case-lede { font-size: clamp(24px, 7.2vw, 34px); line-height: 1.16; }
  .case-visit { margin-top: 24px; }
  .case-content { display: block; padding: 32px var(--gutter) 70px; }
  .case-toc { display: none; }
  .case-chapter { padding-bottom: 52px; }
  .chapter-label { margin-bottom: 18px; font-size: 8px; }
  .chapter-title { font-size: clamp(30px, 9vw, 44px); margin-bottom: 22px; }
  .chapter-copy { grid-template-columns: 1fr; gap: 16px; }
  .chapter-copy p { font-size: 14px; line-height: 1.65; }
  .case-figure { margin: 30px 0; }
  .case-figure img { max-height: none; aspect-ratio: 4 / 5; }
  .case-figure figcaption { font-size: 7px; }
  .case-gallery { gap: 10px; margin: 30px 0; }
  .case-gallery figure:nth-child(2) { margin-top: 34px; }
  .case-gallery img { aspect-ratio: 3 / 4; }
  .case-gallery figcaption { font-size: 7px; }
  .case-quote { margin: 40px 0; padding: 28px 0; }
  .case-quote blockquote { font-size: clamp(26px, 8vw, 38px); }
  .case-quote cite { font-size: 7px; margin-top: 18px; }
  .case-stats { grid-template-columns: 1fr; gap: 26px; }
  .case-stat strong { font-size: 42px; }
  .case-endnote { font-size: 7px; }
  .next-case { padding: 40px var(--gutter); }
  .next-case-link { display: block; margin-top: 26px; }
  .next-case-name { font-size: clamp(50px, 15vw, 80px); }
  .next-case-media { width: 44%; margin-top: 26px; margin-left: auto; }
  .case-footer { padding: 15px var(--gutter); font-size: 7px; gap: 10px 18px; }
  .case-footer span:nth-child(2) { display: none; }
}

@media (min-width: 768px) and (max-height: 760px) {
  .roundel {
    right: calc(100% - var(--hero-split) - var(--size) / 2 + 26px);
    bottom: 100px;
  }
}

@media (max-width: 420px) {
  .brand .brand-meta { display: none; }
  .hero-title { top: 84px; }
  .hero-media { height: 72svh; min-height: 480px; }
  .roundel { top: calc(72svh - 46px); }
  .hero-copy { padding-top: 28px; }
  .contact-side { grid-template-columns: 1fr 1fr; }
  .about-portrait { width: 40%; }
  .work-index-link .index-name { font-size: 7.5px; }
  .archive-title { font-size: 16.5vw; }
}

@media (max-width: 767px) {
  .beyond .acc-media {
    display: block;
    margin-top: 24px;
    max-width: 78%;
  }
  .beyond-frame { padding-bottom: 26px; }
  .beyond-frame figcaption { font-size: 14px; }
}

@media (max-width: 767px) {
  .academic-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .ap-radar-wrap { grid-template-columns: 1fr; gap: 20px; }
  .ap-radar { max-width: 340px; }
  .ap-exams { font-size: 12px; }
}