.active-nav{border-bottom:2px solid var(--orange);padding-bottom:4px}

/* Personal history */
.story-hero{max-width:1320px;margin:0 auto;padding-top:88px;padding-bottom:64px}
.story-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.75fr);gap:clamp(40px,7vw,100px);align-items:center}
.story-hero-copy h1{margin:0 0 26px;font:500 clamp(3rem,5.6vw,5.2rem)/1.05 'Pink Average',serif;letter-spacing:-2px}
.story-hero-copy h1 em{color:var(--orange);font-style:italic}
.story-hero-copy p{max-width:480px;color:#5f605b;font-size:18px;line-height:1.7;margin:0 0 16px}
.story-hero-copy p:last-child{margin-bottom:0}
.story-portrait-stack{position:relative;height:400px}
.story-photo{margin:0;overflow:hidden;border:2px solid var(--cream);background:#ddd}
.story-photo img{width:100%;height:100%;display:block;object-fit:cover}
.story-photo.main{position:absolute;width:300px;height:380px;right:10%;top:8px;transform:rotate(-3deg);box-shadow:9px 10px 0 var(--blue)}
.story-photo.main img{object-position:50% 30%}
.story-stamp{position:absolute;left:2%;bottom:24px;top:auto;right:auto;z-index:1}

/* Problem-solving philosophy */
.story-problem{background:var(--paper);border-top:12px solid var(--pink)}
.story-problem-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(220px,.5fr);gap:clamp(40px,6vw,90px);align-items:start}
.story-problem-copy h2{margin:12px 0 22px;font:500 clamp(2.6rem,4.2vw,3.6rem)/1.08 'Pink Average',serif;letter-spacing:-1.5px}
.story-problem-copy h2 em{color:var(--orange);font-style:italic}
.story-problem-copy p{max-width:620px;color:#64635e;line-height:1.7;margin:0 0 16px;font-size:17px}
.story-problem-copy p.pull-line{font:500 clamp(1.7rem,2.8vw,2.4rem)/1.2 'Pink Average',serif;letter-spacing:-1px;color:var(--green);margin:26px 0;max-width:none}
.doodle-card{align-self:center;background:var(--cream);padding:20px;font:12px 'DM Mono',monospace;letter-spacing:.4px;box-shadow:7px 8px 0 var(--blue);transform:rotate(-2deg);border:1px solid var(--line)}
.doodle-card span{display:block;border-bottom:1px solid var(--line);padding:9px 2px}
.doodle-card b{display:block;margin-top:12px;color:var(--orange);font-weight:500}

/* Craft / design */
.story-craft-intro{max-width:820px;padding-bottom:8px}
.story-craft-intro h2{margin:12px 0 0;font:500 clamp(2.6rem,4.2vw,3.6rem)/1.08 'Pink Average',serif;letter-spacing:-1.5px}
.story-craft-intro h2 em{color:var(--orange);font-style:italic}
.story-craft-after{padding-top:56px;max-width:820px}
.story-craft-copy p{color:#64635e;line-height:1.7;margin:0 0 16px;font-size:17px;max-width:640px}
.story-craft-copy p:last-child{margin-bottom:0}

/* Life outside the laptop */
.story-life{background:var(--cream)}
.story-life > .eyebrow{margin-bottom:8px}
.story-life > h2{margin:0 0 48px;font:500 clamp(2.8rem,4.6vw,4.4rem)/1 'Pink Average',serif;letter-spacing:-2px}
.story-life-grid{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr);gap:clamp(48px,8vw,110px);align-items:center}
.story-life-copy p{font-size:18px;line-height:1.65;color:#4f5049;margin:0 0 18px;max-width:480px}
.life-tags{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.life-tags span{background:var(--paper);color:var(--green);border:1px solid var(--green);border-radius:100px;padding:9px 16px;font:12px 'DM Mono',monospace;letter-spacing:.5px;box-shadow:3px 3px 0 var(--line);transform:rotate(-2deg)}
.life-tags span:nth-child(even){transform:rotate(2deg)}
.life-collage{height:380px}

/* Closing line */
.story-closing{text-align:center;padding:120px clamp(24px,8vw,130px) 150px}
.closing-line{margin:0;font:500 clamp(2rem,4vw,3.2rem)/1.3 'Pink Average',serif;letter-spacing:-1px;color:var(--ink);max-width:720px;margin-left:auto;margin-right:auto}
.closing-line em{color:var(--green);font-style:italic}

@media(max-width:760px){
  .story-hero{padding-top:56px;padding-bottom:46px}
  .story-hero-grid{grid-template-columns:1fr;gap:34px}
  .story-portrait-stack{height:300px;order:-1}
  .story-photo.main{width:230px;height:280px;right:4%}
  .story-problem-grid{grid-template-columns:1fr;gap:30px}
  .doodle-card{max-width:280px}
  .story-craft-after{padding-top:40px}
  .story-life-grid{grid-template-columns:1fr;gap:30px}
  .life-collage{height:320px;order:-1}
  .story-closing{padding:70px 20px 90px}
}


/* Give the craft quote its own breathing room instead of letting it crowd the heading above. */
.story-craft-intro { padding-bottom: 28px; }

.story {
  width: min(1280px, calc(100% - 48px));
  margin: 24px auto 0;
  padding: clamp(58px, 6vw, 92px) clamp(28px, 6vw, 96px) clamp(64px, 7vw, 104px);
}

.story blockquote {
  max-width: 1040px;
  font-size: clamp(2.7rem, 4vw, 4.5rem);
}

@media(max-width:760px){
  .story {
    width: calc(100% - 32px);
    margin-top: 16px;
    padding: 50px 24px 56px;
  }
}