/* Approved responsive sheet spacing and matching Sound & Music collage. */
@media (min-width:701px) and (max-width:1366px){
 .paper-curated .chapter,
 .paper-curated .chapter:not(#digital):not(#websites){
  --placement-travel:120px;
  height:auto;min-height:0;padding:44px 0;
 }
 .paper-curated .chapter::after{content:"";display:block;height:var(--placement-travel);pointer-events:none}
 .paper-curated .chapter:is(#websites,#sound,#digital){--placement-travel:180px}
 .paper-curated .chapter .chapter-inner{
  height:auto;min-height:var(--tablet-sheet-height,0px);top:44px;
  padding-block:72px;align-items:center;
 }
 .paper-curated .chapter .art-zone:not(.app-art-zone):not(.website-art-zone):not(.sound-art-zone){
  height:auto;min-height:0;max-height:none;padding-block:0;
 }
 .paper-curated .chapter .art-zone:has(.section-art-caption){margin-bottom:var(--caption-gap,120px)}
 .paper-curated #photography .photography-art{height:auto;aspect-ratio:1371/1147}
 .paper-curated #gear .art-zone>.gear-art{max-height:none}
 .clients-section{padding-block:44px}
 .clients-section .logo-sheet{padding-block:90px 74px}
 .services-section{padding-block:44px}
 .services-section .service-intro{padding-block:90px}
 .paper-curated #contact{padding-block:44px 90px}
 .contact-sheet{padding-bottom:90px}
}

/* Sound's approved caption uses the same handwriting scale and reserved space. */
.section-art-caption .passion-lettering{display:block;width:calc(235px * var(--handwriting-scale));max-width:100%;height:auto;margin:0}
@media(max-width:700px){.paper-curated #sound.chapter:has(.section-art-caption) .chapter-inner{row-gap:var(--caption-gap,120px)}}

/* One composition for the opening collage and the Sound & Music index. */
.sound-navigation-art>.sound-nav-jrnxlst{left:auto;right:6%;top:0;bottom:auto;width:73%;height:100%;transform:rotate(3deg);z-index:1}
.sound-navigation-art>.sound-nav-setup{left:auto;right:0;top:auto;bottom:0;width:70%;height:auto;aspect-ratio:1.5;transform:rotate(4deg);z-index:2}
.sound-navigation-art>.sound-nav-kit{left:0;right:auto;top:auto;bottom:0;width:53%;height:69%;transform:rotate(-7deg);z-index:3}
@media(max-width:700px){.mobile-nav-piece.sound-piece .sound-navigation-art{aspect-ratio:.92;height:auto}}

/* The desktop collage unfolds into its index; phones skip the collage and go straight into the sections. */
@media(min-width:701px){
 .has-featured-opening .assemble-copy{top:calc(var(--site-header-height) + 26px)}
 .has-featured-opening .assemble-copy h2{font-size:clamp(34px,4vw,46px);line-height:1.08}
 .has-featured-opening .assemble-copy .eyebrow{margin-bottom:16px}
 .has-featured-opening .hero-copy{max-width:620px}
}
@media(max-width:700px),(max-width:950px) and (max-height:500px) and (any-pointer:coarse){
 .has-featured-opening .opening{height:auto;min-height:0}
 .has-featured-opening .opening-sticky{position:relative;top:auto;height:auto;min-height:0!important;overflow:visible;padding:calc(var(--site-header-height) + 46px) 6% 38px}
 .has-featured-opening .collage,.has-featured-opening .assemble-copy,.mobile-work-navigation,.has-featured-opening .opening-footer,.has-featured-opening .margin-note{display:none!important}
 body.has-featured-opening .hero-copy{position:relative;inset:auto;width:100%;max-width:740px;opacity:1!important;transform:none!important}
 .has-featured-opening .hero-copy h1{font-size:clamp(48px,7.8vw,82px);line-height:1.02;margin-top:0}
 .has-featured-opening .hero-copy h1 br:nth-of-type(2){display:none}
 .has-featured-opening .hero-copy .eyebrow{font-size:10px;letter-spacing:.13em;margin-bottom:22px}
 .has-featured-opening .hero-summary{font-size:17px;line-height:1.6;max-width:580px;margin-top:24px}
 .has-featured-opening .hero-copy .hero-play-hint{width:280px;max-width:90%;margin-top:28px;margin-bottom:14px}
 .has-featured-opening .hero-rates-link,.has-featured-opening .hero-copy>.eyebrow{display:none}
 .has-featured-opening .hero-copy{padding-top:0}
 .has-featured-opening .hero-copy .hero-play-hint{margin-bottom:8px}
}
@media(max-width:700px){
 .has-featured-opening .opening-sticky{padding-top:calc(var(--site-header-height) + 42px);padding-bottom:24px}
 .has-featured-opening .hero-copy h1{font-size:clamp(43px,12vw,70px)}
 .has-featured-opening .hero-summary{font-size:16px}
}

/* The boys stand behind the foreground cutouts, with their gesture left visible. */
.has-featured-opening .boys-piece{z-index:2}
.has-featured-opening .piece.client-piece{z-index:4}

@media(min-width:701px) and (max-height:800px){
 .has-featured-opening .assemble-copy h2{font-size:34px}
 .has-featured-opening .assemble-copy .eyebrow{font-size:9px;margin-bottom:10px}
}

/* Two views of the approved handwriting artwork, reordered without redrawing it. */
.hero-play-hint .hero-handwritten-line{display:block;width:100%;height:auto;overflow:visible}
.hero-play-hint .hero-handwritten-line+.hero-handwritten-line{margin-top:3px}
@media(min-width:701px) and (max-width:1100px){
 .has-featured-opening .hero-copy{width:43%;left:6%;padding-top:0}
 .has-featured-opening .hero-copy h1{font-size:clamp(46px,6.4vw,70px)}
 .has-featured-opening .hero-summary{font-size:16px;line-height:1.6}
 .has-featured-opening .hero-copy .hero-play-hint{width:250px;max-width:100%}
}

@media(max-width:950px) and (max-height:500px) and (any-pointer:coarse){
 body.has-featured-opening .hero-copy{width:100%;left:auto}
 .has-featured-opening .hero-copy h1{font-size:clamp(43px,8vw,70px)}
}

/* A small, drawn-on-paper scroll cue beside the phone-only introduction. */
.hero-scroll-cue{display:contents}
.hero-scroll-arrows{display:none}
@media(max-width:700px),(max-width:950px) and (max-height:500px) and (any-pointer:coarse){
 .hero-scroll-cue{display:flex;align-items:center;gap:12px;width:340px;max-width:100%;margin-top:28px;margin-bottom:8px}
 .has-featured-opening .hero-copy .hero-scroll-cue .hero-play-hint{flex:1;min-width:0;width:auto;max-width:280px;margin:0}
 .hero-scroll-cue .hero-scroll-arrows{display:block;flex:0 0 48px;width:48px;height:72px;object-fit:contain;transform:rotate(2deg);pointer-events:none}
}

/* The title underline uses the same crayon medium as the scroll arrows. */
.has-featured-opening .hero-copy h1 em::after{
 left:-.06em;right:-.12em;bottom:-.08em;height:.55em;
 border:0;transform:none;
 background:url('/assets/handwriting/crayon-swoosh-red-v1.png') center/100% 100% no-repeat;
 pointer-events:none;
}