@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url('./fonts/barlow-condensed-800.woff2') format('woff2')}
:root{--team-purple:#38234b;--paper:#f1ead7;--mustard:#d99a2c;--paper-ink:#2e211b}
.story-section{background:var(--team-purple);padding-top:85px;padding-bottom:0;color:var(--paper)}
.story-opening{display:grid;grid-template-columns:1fr 1.12fr;gap:6%;align-items:center}
.story-intro{padding-bottom:25px}
.story-place{font-size:12px;color:#d6c5df;margin-bottom:22px}
.story-intro h2{font-family:'Barlow Condensed','BSR Display',sans-serif;font-size:clamp(48px,5.8vw,88px);font-weight:800;line-height:.96;letter-spacing:-.025em}
.story-intro>p:not(.story-place){font-size:15px;line-height:1.9;max-width:440px;margin-top:28px;color:#e4d9e9}
.story-intro .text-link{font-size:12px;margin-top:22px;border-color:#a18aac;color:var(--paper)}
.story-album{height:570px;position:relative;isolation:isolate}
.story-wordmark{position:absolute;left:1%;top:0;width:205px;height:auto;transform:rotate(-4deg)}
.album-photo{position:absolute;background:var(--paper);padding:10px 10px 6px;margin:0;box-shadow:0 10px 22px #170c2740;transition:transform .3s;max-width:85%}
.album-photo::before{content:'';position:absolute;top:-12px;left:35%;width:32%;height:27px;background:#d99a2cde;transform:rotate(-3deg);z-index:1}
.album-photo>img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.album-photo figcaption{color:#44372e;font-size:11px;padding:6px 3px 3px}
.album-frc{width:72%;right:0;top:80px;transform:rotate(6deg);z-index:1}
.album-fll{width:66%;left:2%;bottom:10px;transform:rotate(-7deg);z-index:2}
.album-number{position:absolute;right:-6px;bottom:36px;writing-mode:vertical-rl;font:800 49px/1 'Barlow Condensed',sans-serif;color:var(--paper);letter-spacing:1px}
.story-years{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;padding:0;margin:66px 0 70px;border-top:1px solid #b69dc450;gap:28px}
.story-years li{padding-top:24px;position:relative}
.story-years li::before{content:'';position:absolute;top:-3px;left:0;width:20px;height:5px;background:var(--mustard)}
.story-year{font:800 clamp(30px,3.8vw,48px)/1 'Barlow Condensed',sans-serif;color:#efbb62}
.story-years h3{font-size:15px;line-height:1.5;font-weight:600;margin:16px 0 11px}
.story-years p{font-size:13px;line-height:1.8;color:#d9cce0}
.story-mission{display:grid;grid-template-columns:.85fr 1.3fr;gap:8%;background:var(--paper);color:var(--paper-ink);padding:58px 6%;position:relative;box-shadow:0 8px 0 var(--mustard);margin-bottom:85px}
.mission-heading>span{font-size:11px;color:#6f5140}
.mission-heading h2{font-family:'Barlow Condensed','BSR Display',sans-serif;font-weight:800;font-size:clamp(40px,4.8vw,66px);line-height:1.05;margin-top:15px;letter-spacing:-.02em}
.mission-copy p{font-size:14px;line-height:1.85;color:#55453a}
.mission-copy .mission-lead{font-size:20px;font-weight:600;line-height:1.5;color:var(--paper-ink)}
.mission-copy p+p{margin-top:17px}
.mission-copy .text-link{color:var(--paper-ink);border-color:#87644c;margin-top:17px;background-image:linear-gradient(#38234b,#38234b)}
.story-section a:focus-visible{outline-color:var(--mustard)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.album-frc:hover{transform:rotate(3deg) translateY(-5px)}.album-fll:hover{transform:rotate(-4deg) translateY(-5px)}}
@media(max-width:1100px){.story-album{height:470px}.story-wordmark{width:170px}.album-number{font-size:37px}.story-years{gap:20px}.story-mission{grid-template-columns:.8fr 1.3fr;gap:5%;padding:45px 5%}}
@media(max-width:760px){
  .story-section{padding:50px 23px 1px}
  .story-opening{grid-template-columns:1fr;gap:25px}
  .story-intro{padding-bottom:0}
  .story-place{margin-bottom:18px}
  .story-intro h2{font-size:clamp(49px,12.8vw,80px)}
  .story-intro>p:not(.story-place){font-size:14px;margin-top:24px}
  .story-intro .text-link{margin-top:15px;font-size:11px}
  .story-album{height:460px;width:100%;max-width:470px;margin:0 auto}
  .story-wordmark{width:155px}
  .album-frc{top:70px;right:3%;width:76%}
  .album-fll{width:74%;left:2%;bottom:16px}
  .album-photo{padding:7px 7px 5px}
  .album-photo figcaption{font-size:10px}
  .album-number{right:-3px;bottom:28px;font-size:32px}
  .story-years{grid-template-columns:1fr 1fr;gap:32px 22px;margin:35px 0 44px}
  .story-years li:nth-child(n+3){border-top:1px solid #b69dc450}
  .story-year{font-size:38px}
  .story-years h3{font-size:14px;margin:13px 0 10px}
  .story-years p{font-size:12px;line-height:1.8}
  .story-mission{grid-template-columns:1fr;gap:24px;padding:30px 23px;margin-bottom:58px}
  .mission-heading h2{font-size:47px;margin-top:10px}
  .mission-copy .mission-lead{font-size:18px}
  .mission-copy p{font-size:13px}
}
@media(max-width:380px){.story-album{height:410px}.story-intro h2{font-size:46px}.story-years{column-gap:16px}.story-mission{padding-inline:19px}}
