/* The opening is a sentence: the idea in Instrument, its continuation in Allura. */
body.edition-27 .opening h1 {
  max-width:100%; white-space:normal; overflow-wrap:normal; word-break:normal;
}
body.edition-27 .opening h1 > .hero-title-main {
  display:block; max-width:100%; color:var(--paper); font:inherit; letter-spacing:inherit;
}
.hero-title-group { display:inline-block; white-space:nowrap; }
body.edition-27 .opening h1 > .hero-title-handwritten {
  display:block; margin-top:.1em; padding-right:.08em; color:var(--yellow);
  font-family:'Deck8 Calligraphy','Bickham Script Pro','Segoe Script',cursive;
  font-size:1.18em; font-weight:400; font-style:normal; line-height:1.1; letter-spacing:0;
}
body.edition-27 .hero-audience-24 { font-size:27px; line-height:1.38; text-wrap:balance; }

/* The image itself remains a large, accessible target for the full film. */
.film-frame-trigger {
  position:absolute; inset:0; z-index:3; display:block; width:100%; height:100%;
  padding:0; margin:0; border:0; border-radius:inherit; background:transparent; cursor:pointer;
}
.film-frame-trigger:focus-visible { outline:2px solid var(--yellow); outline-offset:-5px; }
body.edition-27 .showreel-24 .ambient-control {
  width:auto; min-width:62px; min-height:36px; height:auto; padding:9px 12px;
  font:500 12px/1.2 Instrument,Arial,sans-serif; border-radius:6px;
}

@media (max-width:1000px) {
  body.edition-27 .hero-audience-24 { font-size:24px; max-width:34em; }
  body.edition-27 .project-intro-grid > p { max-width:38ch; }
}
@media (max-width:800px) {
  body.edition-27 .hero-four { padding-top:28px; }
  body.edition-27 .hero-heading-24 { min-width:0; padding-bottom:26px; }
  body.edition-27 .hero-audience-24 { font-size:23px; margin-bottom:28px; }
  body.edition-27 .opening h1 { font-size:clamp(38px,7.2vw,58px); line-height:1.08; letter-spacing:-.045em; }
  body.edition-27 .opening h1 > .hero-title-handwritten { margin-top:.13em; }
  body.edition-27 .hero-bottom-24 { padding-top:8px; padding-bottom:18px; }
  body.edition-27 .projects-intro { padding-top:44px; padding-bottom:36px; }
  body.edition-27 .project-intro-grid { min-width:0; gap:24px; }
  body.edition-27 .project-intro-grid > p { font-size:17px; line-height:1.6; }
  body.edition-27 .showreel-24 .ambient-control { right:12px; bottom:12px; }
}
@media (max-width:700px) {
  /* Read the question, then see its answer in the image. */
  body.edition-27 .mds-layout { grid-template-columns:minmax(0,1fr); gap:24px; }
  body.edition-27 .project-text { display:contents; text-align:left; }
  body.edition-27 .project-text h3 { grid-row:1; }
  body.edition-27 .project-text > p:first-of-type { grid-row:2; margin:0; }
  body.edition-27 .mds-visual { grid-row:3; min-width:0; }
  body.edition-27 .project-text .project-actions { grid-row:4; grid-column:1; align-items:flex-start; margin-top:0; }

  /* Keep the new preview wrapper in the full-width image row. */
  body.edition-27 .film-index > :is(button,a) {
    grid-template-columns:minmax(0,1fr) 24px;
    grid-template-areas:'image image' 'title arrow'; gap:16px 14px; padding:26px 0;
  }
  body.edition-27 .film-index .film-thumb { grid-area:image; width:100%; min-width:0; }
  body.edition-27 .film-index .film-thumb img { width:100%; aspect-ratio:16 / 9; object-fit:cover; }
  body.edition-27 .film-index .index-title { grid-area:title; min-width:0; }
  body.edition-27 .film-index .index-arrow { grid-area:arrow; }
  body.edition-27 .other-work { padding-top:50px; padding-bottom:58px; }
  body.edition-27 .other-heading { margin-bottom:28px; }
  body.edition-27 :is(.lasting-project,.trecobat-copy,.about-copy,.working-step) { min-width:0; }
}
@media (max-width:540px) {
  body.edition-27 .hero-audience-24 { font-size:clamp(20px,5.3vw,23px); margin-bottom:26px; letter-spacing:.01em; }
  body.edition-27 .opening h1 { font-size:clamp(36px,9.5vw,49px); line-height:1.08; letter-spacing:-.045em; }
  body.edition-27 .opening h1 > .hero-title-handwritten { font-size:clamp(40px,11.5vw,60px); }
  body.edition-27 .hero-bottom-24 a { font-size:13px; gap:22px; }
  body.edition-27 .project-intro-grid > p { font-size:16px; }
}
@media (max-width:360px) {
  body.edition-27 .opening h1 { font-size:34px; }
  body.edition-27 .hero-audience-24 { font-size:19px; }
  body.edition-27 .hero-bottom-24 a { gap:16px; }
}