.story-page{background:var(--paper)}
.story-nav{position:absolute}
.story-hero{min-height:830px;padding:145px var(--pad) 70px;background:var(--mauve);display:grid;grid-template-columns:1fr .82fr;gap:7vw;align-items:center}
.story-hero-copy{max-width:760px}
.story-hero h1,.story-intro h2,.story-method h2{margin:20px 0 36px;font-family:Anton,sans-serif;font-weight:400;letter-spacing:.018em;line-height:.92}
.story-hero h1{font-size:clamp(5rem,10vw,10rem)}
.story-hero h1 span,.story-intro h2 span,.story-method h2 span{display:block;font-family:Fraunces,serif;font-weight:300;letter-spacing:0;text-transform:lowercase}
.story-hero h1 span{margin-top:-.13em;color:#fff}
.story-hero-copy>p:last-child{max-width:610px;font-size:clamp(1.05rem,1.6vw,1.4rem)}
.story-hero-image{margin:0;transform:rotate(1.5deg)}
.story-hero-image img{height:min(610px,65vw);object-position:center 34%}
.story-hero-image figcaption{font-size:.62rem;letter-spacing:.13em;margin-top:13px}
.story-intro{padding:110px var(--pad);display:grid;grid-template-columns:.45fr 1.1fr;gap:7vw}
.story-intro>div{max-width:920px}
.story-intro h2{font-size:clamp(3.4rem,6.4vw,7rem)}
.story-intro h2 span{font-size:.55em;margin-top:.04em;color:#8f6f9a}
.story-intro p:not(.section-label){max-width:730px;font-size:1.08rem}
.story-change{padding:0 var(--pad) 110px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.story-change figure{margin:0}
.story-photo{height:680px;overflow:hidden;background:#ddd}
.story-photo img{object-position:center 30%}
.story-change figcaption{display:grid;grid-template-columns:42px 1fr;gap:16px;border-top:1px solid var(--ink);padding-top:18px;margin-top:18px}
.story-change figcaption>span{font-family:Fraunces;color:#8f6f9a}
.story-change b{font-family:Anton;font-size:1.25rem;letter-spacing:.04em}
.story-change p{margin:7px 0 0;max-width:510px}
.story-method{background:var(--ink);color:#fff;display:grid;grid-template-columns:1fr 1fr;min-height:820px}
.story-method-image img{object-position:center 35%}
.story-method-copy{padding:95px var(--pad);align-self:center}
.story-method h2{font-size:clamp(4.5rem,8vw,8rem)}
.story-method h2 span{color:var(--lime);margin-top:-.08em}
.story-method-copy>p:not(.section-label){max-width:620px;color:#d6d6d6}
.story-belief{padding:115px var(--pad);background:var(--purple);text-align:center}
.story-belief blockquote{max-width:1100px;margin:25px auto 30px;font-family:Fraunces,serif;font-size:clamp(2.3rem,5vw,5.4rem);font-weight:300;line-height:1.08}
.story-belief>p:not(.section-label){max-width:690px;margin:0 auto 38px}
@media(max-width:820px){
  .story-hero{grid-template-columns:1fr;padding-top:115px}
  .story-hero-image img{height:560px}
  .story-intro{grid-template-columns:1fr;padding-block:78px}
  .story-change{grid-template-columns:1fr;padding-bottom:78px}
  .story-photo{height:590px}
  .story-method{grid-template-columns:1fr}
  .story-method-image{height:620px}
  .story-method-copy{padding-block:78px}
  .story-belief{padding-block:82px}
}
@media(max-width:480px){
  .story-hero h1{font-size:20vw}
  .story-hero-image img{height:470px}
  .story-intro h2{font-size:3.4rem}
  .story-photo{height:500px}
  .story-method-image{height:500px}
  .story-method h2{font-size:4rem}
}

/* Compact editorial headings */
.story-hero h1{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.08em;
  font-size:clamp(5rem,8vw,9rem);
  white-space:normal;
}
.story-hero h1 .story-title-sub{
  display:block;
  margin:0;
  font-size:.62em;
  line-height:1;
  color:#fff;
}
.story-hero-image{position:relative}
.story-hero-image>img:first-child{object-position:center top}
.story-hero-image .story-sticker{
  position:absolute;
  z-index:2;
  left:-68px;
  bottom:46px;
  width:265px;
  height:auto;
  object-fit:contain;
  transform:rotate(-5deg);
}
.story-method h2{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.08em;
  font-size:clamp(5rem,7.5vw,8.5rem);
  white-space:normal;
}
.story-method h2 .story-title-sub{
  display:block;
  margin:0;
  font-size:.62em;
  line-height:1;
}
.story-title-main{
  display:block;
  font-family:Anton,sans-serif!important;
  font-size:1em!important;
  line-height:.9!important;
  letter-spacing:.018em!important;
  text-transform:uppercase!important;
}
.story-hero .story-title-main{color:#000!important}
.story-method .story-title-main{color:#fff!important}
@media(max-width:820px){
  .story-hero-image .story-sticker{left:-10px;bottom:40px;width:230px}
}
@media(max-width:480px){
  .story-hero h1{font-size:19vw;gap:.08em}
  .story-method h2{font-size:17vw;gap:.08em}
  .story-hero-image .story-sticker{left:-5px;bottom:38px;width:195px}
}