/* V10 — A shorter reading path and larger images on phones.
   The complete copy remains available on wider screens and in project details. */
.copy-mobile { display: none; }

/* The DOM follows the mobile reading order: introduction, images, action.
   Grid keeps the existing two-column introduction on desktop. */
.hero-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 215px;
  grid-template-areas: "copy actions" "images images";
  column-gap: 10%;
  row-gap: 38px;
  align-items: center;
  margin-top: 32px;
}
.hero-flow > .hero-summary { grid-area: copy; display: block; margin: 0; }
.hero-flow > .hero-projects { grid-area: images; min-width: 0; margin-top: 0; }
.hero-flow > .hero-actions { grid-area: actions; margin-top: 0; }
.hero-projects:focus-visible { outline: 1px solid var(--yellow); outline-offset: -1px; }

@media (min-width: 1800px) {
  .hero-flow { row-gap: 42px; }
}
@media (max-width: 1100px) {
  .hero-flow { grid-template-columns: minmax(0, 1fr) 190px; column-gap: 7%; }
}
@media (max-width: 800px) {
  .hero-flow { grid-template-columns: minmax(0, 1fr) 180px; column-gap: 5%; row-gap: 32px; margin-top: 27px; }
}

@media screen and (max-width: 700px) {
  .copy-desktop { display: none; }
  .copy-mobile { display: inline; }

  /* One large frame with a visible edge of the next. Native touch/keyboard
     scrolling works without a new script, autoplay or custom gesture logic. */
  .edition-four .hero-four { padding-top: 20px; }
  .edition-four .opening-top { margin-bottom: 20px; }
  .opening-top > .micro { font-size: 8px; }
  .opening-coordinate { display: none; }
  .edition-four .opening h1 { font-size: clamp(36px, 10.8vw, 68px); line-height: 1; }
  .hero-flow {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "images" "actions";
    gap: 22px;
    margin-top: 22px;
    margin-bottom: 28px;
  }
  .hero-flow > .hero-summary > p { max-width: 440px; font-size: 20px; line-height: 1.4; }
  .hero-flow > .hero-projects {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc(100% - 22px);
    gap: 16px;
    width: calc(100% + 2 * var(--space));
    margin-inline: calc(-1 * var(--space));
    padding: 0 var(--space) 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--space);
    scrollbar-width: thin;
    scrollbar-color: #ffc300 #41413a;
  }
  .hero-project { scroll-snap-align: start; border-top: 0; }
  .edition-five .hero-project > img { aspect-ratio: 16 / 10; filter: none; transform: none; }
  .hero-project-name { padding: 13px 0 15px; }
  .hero-project-name > .micro { min-height: 0; margin-bottom: 6px; font-size: 9px; line-height: 1.5; }
  .hero-project-name > span:last-child { font-size: 18px; line-height: 1.3; gap: 16px; }
  .hero-project-name i { font-size: 18px; }
  .hero-flow > .hero-actions { display: block; }
  .hero-actions .primary-action { min-height: 50px; padding: 13px 16px; font-size: 14px; }
  .hero-actions .secondary-action, .hero-baseline { display: none; }
  .collaboration-shortcuts { gap: 2px 22px; padding: 18px 0 24px; }
  .collaboration-shortcuts > .micro { font-size: 9px; margin-bottom: 5px; }
  .collaboration-shortcuts a { font-size: 12px; min-height: 44px; gap: 12px; }

  /* The project pages and films still carry the full story; the first read
     has one short idea per project, with breathing room around the images. */
  .edition-four .projects-intro { padding-top: 60px; padding-bottom: 36px; }
  .project-intro-grid { display: block; }
  .edition-four .projects-intro h2 { font-size: clamp(38px, 9vw, 58px); line-height: 1.06; }
  .project-intro-grid > p,
  .project-text > .project-thought,
  .mds-visual > .media-origin,
  .architecture-text > .lead,
  .trecobat-copy > .trecobat-context { display: none; }
  .edition-four .project-mds { padding-bottom: 68px; }
  .edition-four .project-topline { gap: 12px; margin-bottom: 26px; }
  .project-topline .micro { font-size: 9px; }
  .mds-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .edition-four .project-text { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .edition-four .project-text h3 { grid-row: auto; font-size: clamp(36px, 8.6vw, 52px); margin: 0; }
  .edition-four .project-text > p,
  .architecture-text > div > p:first-child,
  .trecobat-copy > p { font-size: 17px; line-height: 1.55; }
  .project-text .project-actions { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 4px; }
  .detail-link { min-height: 44px; display: inline-flex; align-items: center; }
  .edition-four .project-setec { padding-bottom: 68px; }
  .architecture-text { grid-template-columns: minmax(0, 1fr); padding-top: 28px; }
  .architecture-text > div { margin-left: 0; }
  .architecture-text .credits { max-width: 440px; font-size: 11px; line-height: 1.65; }
  .edition-four .project-trecobat { padding-top: 42px; padding-bottom: 68px; }
  .trecobat-intro { gap: 22px; margin-bottom: 32px; }
  .trecobat-copy .project-actions { margin-top: 22px; gap: 14px 24px; }

  /* The three remaining projects become full-width image cards. */
  .edition-four .other-work { padding-top: 0; padding-bottom: 64px; }
  .other-heading { display: block; margin-bottom: 30px; }
  .edition-four .other-heading h2 { font-size: clamp(32px, 7.7vw, 47px); line-height: 1.12; }
  .other-heading > p { margin-top: 20px; }
  .film-index > :is(button, a) {
    grid-template-columns: 22px minmax(0, 1fr) 24px;
    grid-template-areas: "image image image" "number title arrow";
    gap: 17px 12px;
    padding: 28px 0 32px;
    align-items: start;
  }
  .film-index > :is(button, a):hover { padding-inline: 0; background: transparent; }
  .film-index img { grid-area: image; width: 100%; aspect-ratio: 16 / 9; filter: none; }
  .index-no { grid-area: number; padding-top: 7px; font-size: 10px; }
  .index-title { grid-area: title; font-size: 24px; line-height: 1.2; }
  .index-title small { font-size: 12px; line-height: 1.55; margin-top: 8px; }
  .index-type { display: none; }
  .index-arrow { grid-area: arrow; font-size: 24px; line-height: 1.2; }

  .edition-five .testimonials-five { padding-top: 64px; padding-bottom: 58px; }
  .working-together { padding-top: 64px; padding-bottom: 64px; }
  .together-heading { gap: 24px; }
  .together-heading h2 { font-size: clamp(34px, 8.8vw, 48px); }
  .together-heading > p { font-size: 17px; line-height: 1.6; }
  .working-steps { grid-template-columns: minmax(0, 1fr); gap: 30px; margin-top: 38px; }
  .working-steps article { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 15px; padding-top: 22px; }
  .step-index { align-self: start; justify-self: start; margin: 0; font-size: 11px; padding: 8px; }
  .working-steps h3 { min-height: 0; font-size: 28px; line-height: 1.15; margin-bottom: 14px; }
  .working-steps p { grid-column: 2; max-width: none; font-size: 16px; line-height: 1.6; }
  .maieutic-note { margin-top: 34px; }
  .edition-four .about-four { display: flex; flex-direction: column; gap: 32px; padding-top: 64px; padding-bottom: 64px; }
  .edition-four .about-four .about-copy { order: 0; }
  .edition-four .about-four .about-image { order: 1; align-self: start; width: 100%; max-width: 440px; }
  .edition-four .about-four h2 { font-size: clamp(36px, 9vw, 54px); }
  .edition-four .about-four .about-copy > p:not(.chapter):not(.lead) { font-size: 17px; line-height: 1.6; }
  .edition-four .contact { padding-top: 64px; padding-bottom: 64px; }
  .edition-four .contact h2 { font-size: clamp(32px, 9vw, 58px); }
  .contact-bottom { grid-template-columns: minmax(0, 1fr); }
  .contact-bottom p:not(.lead):not(.form-note) { font-size: 16px; line-height: 1.6; }

  /* Dedicated collaborations: readable headings, compact copy and edge-to-edge
     opening images; the films, format list and credits stay directly available. */
  .collaboration-heading { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 22px 0; }
  .collaboration-heading > div:first-child { grid-row: 2; }
  .collaboration-client { display: none; }
  .collaboration-heading h1 { font-size: clamp(40px, 10.5vw, 64px); line-height: 1.04; }
  .collaboration-years { grid-row: 1; display: flex; align-items: center; gap: 10px; border: 0; padding: 0; }
  .collaboration-years > strong { font-size: 32px; line-height: 1; letter-spacing: -.06em; }
  .collaboration-years > span { margin: 0; font-size: 9px; line-height: 1.4; letter-spacing: .04em; }
  .collaboration-intro { margin-bottom: 26px; gap: 0; }
  .collaboration-intro > p { font-size: 18px; line-height: 1.5; max-width: 480px; }
  .collaboration-intro > a { display: none; }
  .collaboration-cover { width: calc(100% + 2 * var(--space)); margin-inline: calc(-1 * var(--space)); }
  .collaboration-cover > img { aspect-ratio: 16 / 10; }
  .collaboration-cover figcaption { padding: 14px var(--space) 22px; flex-wrap: wrap; gap: 4px 18px; font-size: 8px; }
  .collaboration-nav { gap: 0 22px; padding-top: 12px; padding-bottom: 12px; }
  .collaboration-nav a { min-height: 44px; align-items: center; font-size: 9px; }
  .collaboration-page #formats { padding-top: 64px; padding-bottom: 64px; }
  #formats .collaboration-section-title > p { display: none; }
  .collaboration-section-title { gap: 22px; margin-bottom: 32px; }
  .collaboration-section-title h2, .collaboration-duration h2 { font-size: clamp(33px, 8vw, 48px); line-height: 1.1; }
  .format-row { padding: 30px 0; gap: 13px 16px; }
  .format-row h3 { font-size: 28px; }
  .format-row > p { font-size: 16px; line-height: 1.6; }
  .collaboration-film { padding-top: 64px; padding-bottom: 64px; }
  .collaboration-film .collaboration-section-title > div:last-child p { font-size: 17px; line-height: 1.6; }
  .collaboration-film .collaboration-section-title > div:last-child p + p { font-size: 10px; }
  .case-film-cover img { aspect-ratio: 16 / 9; object-fit: contain; }
  .case-film-caption { flex-wrap: wrap; gap: 4px 20px; font-size: 9px; line-height: 1.6; }
  .collaboration-stills { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 36px; }
  .collaboration-stills figcaption { font-size: 9px; }
  .collaboration-duration { padding-top: 64px; padding-bottom: 64px; gap: 28px; }
  .collaboration-duration > div:last-child p { font-size: 17px; line-height: 1.6; }
  .collaboration-duration .duration-note { display: none; }
  .collaboration-next { grid-template-columns: minmax(0, 1fr); padding-top: 56px; padding-bottom: 56px; gap: 38px; }
}