/* Type stays on the material: native tiles and floor expand with their copy. */
.clean-treatment{--droplet-blue:#44b8df;-webkit-font-smoothing:auto}
.clean-treatment .copy,.clean-treatment #shot-description,.clean-treatment .full-shot-list li button{font-family:Arial,Helvetica,sans-serif;font-weight:700;line-height:1.58;letter-spacing:0}
.clean-treatment .copy{color:inherit;text-shadow:0 1px 1px #ffffff65}
.clean-treatment .wall .copy,.clean-treatment .fabric-world .copy{color:#101612}
.clean-treatment .fabric-world .copy{text-shadow:0 1px 1px #ffc47b80}
.clean-treatment .blue-world .copy{color:#fffdf5;text-shadow:0 1px 2px #052144,0 0 3px #05214488}
.clean-treatment .copy p{orphans:3;widows:3}
.clean-treatment .copy p+p{margin-top:1em}

/* The supplied cover lockup already includes the orange bubbly tagline. */
.rush-title{bottom:11%;left:8%;right:8%}
.hot-statement{padding:16px 6%;border-top-width:4px;border-bottom-width:4px}
.hot-statement span{font:700 11px/1.4 var(--ui);letter-spacing:.055em;max-width:none}
.hot-statement span:first-child{text-align:left}

.light-tile-page,.clean-boards{
 background-color:#f0eddf;
 background-image:url('assets/surfaces/subway-light-tiles.webp');
 background-position:left top;background-repeat:repeat;background-size:958px auto;
 background-blend-mode:soft-light;color:#111713;
}
.treatment-page.flow-page{padding:0;min-height:0;overflow:visible;border-top:0}
.flow-page>.page-copy{position:relative;padding:clamp(45px,4.8vw,78px) 7% clamp(44px,4.5vw,72px);max-width:none}
.flow-page .native-heading{width:58%;max-width:780px;margin-bottom:30px}
.clean-treatment .reading-columns{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,62px);columns:auto;max-width:none;align-items:start}
.reading-columns>.copy-column{min-width:0}
.clean-treatment .reading-columns p{margin-bottom:0;break-inside:avoid}
.clean-treatment .reading-columns .copy-column>p+p{margin-top:1.1em}
.clean-treatment .intro-columns{grid-template-columns:1fr 1fr 1fr;gap:38px}
.intro-columns .copy-column:first-child{font-size:1.2em;line-height:1.45;color:#17291d}
.clean-treatment .story-preface-columns{grid-template-columns:.8fr 1.45fr;gap:8%}
.story-preface-columns .copy-column:first-child{font-size:clamp(24px,2.15vw,33px);line-height:1.3;letter-spacing:-.025em;color:#0c2630}
.story-preface .native-heading{width:49%;max-width:630px}
.story-preface-columns [data-copy="1-2"]{font-size:1.15em;color:var(--droplet-blue)}
.story-art-strip{position:relative;display:block;margin:0;aspect-ratio:var(--strip-ratio);width:100%;line-height:0;overflow:hidden;isolation:isolate}
.story-art-strip>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* One continuous studded subway floor. No body-text panel and no photo overlap. */
.story-world{background:#202323;color:#fffdf4}
.floor-spread{
 position:relative;isolation:isolate;overflow:hidden;
 background:#b8bfc2 url('assets/surfaces/subway-studded-floor-repeat.svg') repeat left top/800px auto;
 background-blend-mode:multiply;color:#fffdf4;
}
.floor-reading{position:relative;padding:clamp(58px,5vw,84px) 7% clamp(58px,5vw,84px)}
.floor-reading>.page-copy{position:relative;z-index:1;max-width:none}
.clean-treatment .floor-spread .copy{color:#fffdf4;text-shadow:0 1px 1px #080b0b,0 0 4px #080b0bbb;font-size:clamp(18px,1.23vw,20px)}
.floor-spread .beat-title{color:#fffdf4;text-shadow:0 2px 2px #050808;font-size:clamp(25px,2.55vw,39px);margin-bottom:27px}
.floor-spread .beat-title>span{color:var(--droplet-blue)}
.dutch-reading{transform:rotate(-.8deg);transform-origin:center center}
.pressure-panel .dutch-reading{transform:rotate(1deg)}
.catastrophe-panel .dutch-reading{transform:rotate(-1deg)}
.boarding-layout{display:grid;grid-template-columns:1.65fr .85fr;gap:4.5%;align-items:start}
.boarding-layout .reading-columns{column-gap:35px;gap:35px}
.boarding-layout .page-art{padding-top:4px}
.floor-spread .motion-screen{box-shadow:3px 5px 8px #0008}
.floor-spread .motion figcaption{color:#fffdf4;font-weight:600;text-shadow:0 1px 2px #000}
.floor-spread .motion figcaption b{color:var(--droplet-blue)}
.floor-spread .story-art-strip{margin:0}
.catastrophe-panel [data-copy="1-14"]{font:700 clamp(24px,2.5vw,38px)/1.18 Arial,Helvetica,sans-serif;color:var(--droplet-blue);letter-spacing:-.025em;margin-top:28px!important}
.floor-spread.product-cut{min-height:0}
.product-cut .floor-reading{padding-top:58px;padding-bottom:58px}
.product-cut .smash-title{color:var(--droplet-blue);font-size:clamp(58px,7.2vw,116px);text-shadow:0 3px 2px #07151e;margin-bottom:28px}
.product-cut .cut-grid{grid-template-columns:1.1fr 1fr;gap:8%;align-items:start}
.clean-treatment .product-cut .claim-lines{font-size:clamp(25px,2.45vw,38px);line-height:1.24;color:var(--droplet-blue);letter-spacing:-.02em}
.clean-treatment .product-cut .claim-lines p+p{margin-top:21px}
.floor-spread.bumper-page{border:0;padding:clamp(58px,5vw,84px) 7% clamp(70px,6vw,100px)}
.floor-spread.bumper-page .page-grid{grid-template-columns:1.1fr 1fr;gap:8%;align-items:center}
.floor-spread.bumper-page .big-ding{color:var(--droplet-blue);text-shadow:0 3px 2px #061621;font-weight:400}
.floor-spread.bumper-page .last-line{color:#ffa361;text-shadow:0 2px 2px #050b0d}

/* The whole production section stays on subway tile, including the expanded list. */
.clean-boards{padding:5.2% 6% 6%;border-top:7px solid #19221b}
.boards-introduction .copy{max-width:90ch}
.clean-boards .shot-workspace{background:none;border:0;gap:45px;padding:38px 0 28px}
.clean-boards .shot-selector{border-width:4px;box-shadow:1px 3px 5px #0003}
.clean-boards #shot-description{color:#111713;text-shadow:0 1px 1px #fff8}
.clean-boards .shot-position,.clean-boards .shot-note,.clean-boards .boards-foot{color:#122018;text-shadow:0 1px 1px #fff8}
.clean-boards .shot-note{font-weight:600}
.clean-boards .boards-foot>p{opacity:1;font-weight:600}
.clean-boards .full-shot-list{background:none;border-color:#243729}
.clean-boards .full-shot-list summary{padding-left:0;padding-right:0}
.clean-boards .full-shot-list ol{padding-left:0;padding-right:0;column-gap:50px}
.clean-boards .full-shot-list li button{color:#111713;border-top-color:#8b978b;text-shadow:0 1px 1px #fff8}
.clean-boards .full-shot-list li button>span{opacity:1;font-weight:700;color:var(--droplet-blue)}
.clean-boards .board-frame{border:5px solid #2a322b;box-shadow:3px 5px 7px #0003}

/* Product stills use two aligned native poster columns. No orphaned fourth frame. */
.product-page .page-grid{grid-template-columns:1.15fr 1fr;gap:5.4%}
.product-page .page-copy>.native-heading{margin-left:-1.45%;width:102.9%;max-width:none}
.product-page .copy{max-width:none}
.product-photo-grid{display:grid;grid-template-columns:660fr 609fr;gap:20px;align-items:start}
.product-photo-column{display:grid;gap:20px;align-content:start;min-width:0}
.product-photo-grid .photo{grid-column:auto!important;grid-row:auto!important;max-width:none!important;justify-self:stretch}
.product-photo-grid .photo img{width:100%;height:auto}
.product-page .copy p:nth-child(4),.product-page .copy p:nth-child(5){color:var(--droplet-blue);font-weight:700}

/* Metal poster surrounds match the station frames already baked into the art. */
.station-frame{position:relative;padding:5px;border:6px solid #242b2a;background:linear-gradient(135deg,#9aa6a4,#e1e2d8 24%,#657270 47%,#b4beb9 76%,#505d5a);box-shadow:0 0 0 1px #9ba6a0,4px 6px 9px #0005,inset 0 0 0 1px #151c1b}
.station-frame::after{content:"";pointer-events:none;position:absolute;inset:-4px;background:radial-gradient(circle at 2px 2px,#b3bcb6 0 1px,#151d1b 1.5px,transparent 2.5px),radial-gradient(circle at calc(100% - 2px) 2px,#b3bcb6 0 1px,#151d1b 1.5px,transparent 2.5px),radial-gradient(circle at 2px calc(100% - 2px),#b3bcb6 0 1px,#151d1b 1.5px,transparent 2.5px),radial-gradient(circle at calc(100% - 2px) calc(100% - 2px),#b3bcb6 0 1px,#151d1b 1.5px,transparent 2.5px)}
.camera-page .page-art>.photo:first-child,.camera-page .page-art>.photo:last-child,.design-page .page-art>.photo{width:100%;margin:0}
.camera-page .page-art,.design-page .page-art{gap:30px}
.camera-page .motion-screen,.design-page .motion-screen{border-color:#242b2a;outline-color:#9ba6a0;background:linear-gradient(135deg,#9aa6a4,#e1e2d8 24%,#657270 47%,#b4beb9 76%,#505d5a);box-shadow:4px 6px 9px #0005}
.edit-pullquote{color:var(--droplet-blue);text-shadow:1px 1px 0 #073847,3px 4px 0 #073847;-webkit-text-stroke:.5px #073847}
.scale-note{color:var(--droplet-blue);text-shadow:1px 1px 0 #073847,3px 4px 0 #073847;-webkit-text-stroke:.5px #073847;paint-order:stroke fill}
.story-preface-columns [data-copy="1-2"],
.product-page .copy p:nth-child(4),.product-page .copy p:nth-child(5),
.clean-boards .full-shot-list li button>span,.storyboard-supers,
.chapter-index nav .nav-number,.wall .motion figcaption b{
 text-shadow:0 1px 0 #103946;-webkit-text-stroke:.25px #103946;paint-order:stroke fill;
}
.thanks-page .copy{font-weight:700!important;color:#101713;text-shadow:0 1px 1px #f7f4dfbb,0 0 3px #f7f4df55}
.thanks-page .handwritten-signoff{break-inside:avoid;break-before:avoid;margin-top:24px!important;line-height:0}
.handwritten-signoff img{width:clamp(150px,17vw,220px);height:auto;transform:rotate(-3deg);transform-origin:left center;filter:drop-shadow(0 1px 1px #ffffff66)}

@media(max-width:1100px){
 .clean-treatment .intro-columns{gap:27px}
 .flow-page .native-heading{width:68%}
 .boarding-layout{grid-template-columns:1fr;gap:30px}
 .boarding-layout .page-art{width:46%;margin-left:auto;padding:0}
 .floor-reading{padding:52px 7% 62px}
 .product-photo-grid,.product-photo-column{gap:15px}
 .clean-boards .shot-workspace{gap:30px}
}
@media(max-width:760px){
 .clean-treatment .copy{font-size:18px;line-height:1.58}
 .rush-title{left:2%;right:2%;bottom:18%}
 .hot-statement{display:flex;padding:13px 6%;gap:16px}
 .hot-statement span{font-size:8px;line-height:1.4;margin:0!important}
 .hot-statement span:last-child{text-align:right}
 .flow-page>.page-copy{padding:36px 7% 39px}
 .flow-page .native-heading,.story-preface .native-heading{width:100%;margin-bottom:24px}
 .clean-treatment .reading-columns,.clean-treatment .intro-columns,.clean-treatment .story-preface-columns{grid-template-columns:1fr;gap:22px}
 .intro-columns .copy-column:first-child{font-size:20px;line-height:1.48}
 .story-preface-columns .copy-column:first-child{font-size:25px;line-height:1.3}
 .floor-spread{background-size:640px auto}
 .floor-reading{padding:44px 8% 50px}
 .dutch-reading,.pressure-panel .dutch-reading,.catastrophe-panel .dutch-reading{transform:rotate(-.35deg)}
 .floor-spread .beat-title{font-size:27px;line-height:1.2;margin-bottom:24px}
 .floor-spread .beat-title>span{font-size:10px;margin-right:8px}
 .floor-spread .reading-columns{gap:22px}
 .boarding-layout{display:block}
 .boarding-layout .page-art{width:100%;margin-top:30px}
 .catastrophe-panel [data-copy="1-14"]{font-size:29px;margin-top:25px!important}
 .product-cut .floor-reading{padding:45px 8% 49px}
 .product-cut .smash-title{font-size:60px;line-height:1.07;margin-bottom:24px}
 .product-cut .cut-grid{display:block}
 .clean-treatment .product-cut .claim-lines{font-size:26px;margin-top:28px}
 .floor-spread.bumper-page{padding:43px 8% 48px}
 .floor-spread.bumper-page .page-grid{display:flex;gap:31px;align-items:stretch}
 .clean-boards{padding:38px 7% 43px;background-size:800px auto}
 .clean-boards .shot-workspace{padding:26px 0 23px;gap:24px}
 .clean-boards .boards-foot{gap:15px}
 .clean-boards .full-shot-list ol{columns:1}
 .clean-boards .full-shot-list li button{font-size:17px;line-height:1.52;gap:10px}
 .product-page .page-grid{display:flex;gap:30px}
 .product-photo-grid{gap:13px}
 .product-photo-column{gap:13px}
 .station-frame{border-width:5px;padding:4px}
 .camera-page .page-art,.design-page .page-art{gap:25px}
 .thanks-page .handwritten-signoff{margin-top:22px!important}
 .handwritten-signoff img{width:170px}
}