a{color:inherit}

.story-page{position:relative;background:#ece7d6}

.story-key{
  --key-r:-7deg;
  position:absolute;
  z-index:2;
  display:block;
  width:clamp(68px,7vw,116px);
  aspect-ratio:655/617;
  pointer-events:none;
  transform:rotate(var(--key-r)) scale(1);
  transform-origin:50% 76%;
  transition:transform 130ms cubic-bezier(.2,0,0,1),filter 130ms ease-out;
  filter:drop-shadow(5px 7px 4px rgba(35,38,31,.18));
}
.story-key img{display:block;width:100%;height:auto}
.story-key::before,.story-key::after{
  content:'';
  position:absolute;
  width:24%;
  height:3px;
  border-radius:999px;
  background:#4a6741;
  opacity:0;
  transition:opacity 80ms ease-out,transform 130ms ease-out;
}
.story-key::before{left:-24%;top:38%;transform:translateX(8px) rotate(12deg);box-shadow:4px 12px 0 #4a6741}
.story-key::after{right:-23%;top:30%;transform:translateX(-8px) rotate(-14deg);box-shadow:-4px 13px 0 #4a6741}
.story-key.is-pressed{transform:translateY(6px) rotate(var(--key-r)) scale(.88);filter:drop-shadow(2px 2px 2px rgba(35,38,31,.15))}
.story-key.is-pressed::before,.story-key.is-pressed::after{opacity:.72;transform:translateX(0) rotate(0)}
.story-key--hero{left:15%;top:54%}
.story-key--chapter-one{right:4%;top:30%}
.story-key--band{left:32%;bottom:14%}
.story-key--paper{position:relative;right:auto;bottom:auto;align-self:flex-end;width:clamp(64px,7vw,104px);margin:24px 9% 0 0}
.terminal-footer{position:relative}
.story-key--footer{left:13%;top:18%;width:clamp(56px,5vw,82px);--key-r:-8deg;filter:drop-shadow(4px 6px 3px rgba(0,0,0,.3))}
.story-key--footer::before,.story-key--footer::after{background:#8fb3a8;box-shadow:none}

@media (max-width:860px){
  .story-key{width:clamp(54px,17vw,82px);opacity:.88}
  .story-key--hero,.story-key--chapter-one,.story-key--band,.story-key--footer{display:none}
  .story-key--paper{left:auto;right:auto;top:auto;bottom:auto;margin:56px 9% 0 0}
}
@media (prefers-reduced-motion:reduce){
  .story-key{transition:none}
}

.story-hero{
  position:relative;
  padding:150px 24px 20px;
  text-align:center;
  overflow:hidden;
}
.story-hero-title{
  font-family:'Caveat',cursive;font-weight:700;
  font-size:min(17vw,132px);line-height:.82;margin:0;color:#23261f;
}
.story-hero-sub{
  font-family:'VT323',monospace;font-size:clamp(19px,3.6vw,26px);
  color:#75806b;margin:18px 0 0;letter-spacing:1px;
}
.story-hero-rule{
  width:min(280px,60%);height:0;margin:34px auto 0;
  border-top:2px dashed #c2bd9f;
}
.story-hero-doodle{
  position:absolute;pointer-events:none;opacity:.4;filter:url(#sketchy4);
}
.story-doodle-line{fill:none;stroke-linecap:round;stroke-linejoin:round}
.story-hero-doodle-l{left:-30px;top:96px;width:min(190px,26vw)}
.story-hero-doodle-r{right:-24px;top:150px;width:min(210px,28vw)}
@media (max-width:720px){.story-hero-doodle{display:none}}

.story-chapter{position:relative;padding:clamp(64px,9vw,110px) 24px}
.story-chapter-inner{max-width:1320px;margin:0 auto}

.story-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,5.5vw,74px);
  align-items:stretch;
}
.story-row > .story-figure{grid-column:1;grid-row:1}
.story-row > .story-copy{grid-column:2;grid-row:1}
.story-row--right{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.story-row--right > .story-figure{grid-column:2}
.story-row--right > .story-copy{grid-column:1}
@media (max-width:860px){
  .story-row{grid-template-columns:minmax(0,1fr);gap:38px}
  .story-row > .story-figure,
  .story-row--right > .story-figure{grid-column:1;grid-row:1}
  .story-row > .story-copy,
  .story-row--right > .story-copy{grid-column:1;grid-row:2}
}

.story-figure{margin:0;display:flex;flex-direction:column;align-items:center}

.story-figure-inner{
  display:flex;flex-direction:column;align-items:center;width:100%;
  position:sticky;top:112px;
}
@media (max-width:860px){.story-figure-inner{position:static;top:auto}}

.story-frame{
  /* box-sizing is required: width:100% plus 15px side padding on a content-box
     makes the frame 30px wider than its column, and the rotate() below turns
     that into real horizontal page overflow on phones. */
  position:relative;box-sizing:border-box;width:100%;max-width:620px;
  transform:rotate(var(--r,-3deg));
  background:#e2dcc6;padding:15px 15px 18px;
  box-shadow:0 16px 34px rgba(35,38,31,.28);
}
.story-frame::before{
  content:'';position:absolute;top:-13px;left:50%;
  width:118px;height:28px;transform:translateX(-50%) rotate(-2.2deg);
  background:rgba(212,205,178,.82);
  border-left:1px dashed rgba(255,255,255,.55);
  border-right:1px dashed rgba(255,255,255,.55);
  box-shadow:0 2px 6px rgba(35,38,31,.2);
}
.story-frame picture{display:block}
.story-frame img{width:100%;height:auto;display:block}

.story-caption{
  font-family:'VT323',monospace;font-size:17px;line-height:1.45;
  color:#5f6b54;margin:16px 4px 0;max-width:620px;text-align:center;
}

.story-mark{
  font-family:'Press Start 2P',monospace;font-size:10px;letter-spacing:2px;
  color:#4a6741;margin:0 0 14px;display:flex;align-items:center;gap:10px;
}
.story-mark::after{content:'';flex:1;height:2px;background:currentColor;opacity:.4}

.story-h{
  font-family:'Caveat',cursive;font-weight:700;
  font-size:clamp(42px,7vw,74px);line-height:.92;margin:0 0 22px;color:#23261f;
}
.story-sub{
  font-family:'Caveat',cursive;font-weight:700;
  font-size:clamp(28px,4.4vw,44px);line-height:1.05;
  color:#4a6741;margin:38px 0 12px;
}
.story-sub::before{
  content:'\25B8';font-family:'Press Start 2P',monospace;
  font-size:.4em;vertical-align:.24em;margin-right:.5em;color:#8fb3a8;
}

.story-copy p{
  font-family:'Work Sans',sans-serif;font-size:clamp(15.5px,1.35vw,17px);
  line-height:1.78;color:#3d3a2c;margin:0 0 18px;text-wrap:pretty;
}
.story-copy p:last-child{margin-bottom:0}
.story-lede::first-letter{
  font-family:'Caveat',cursive;font-weight:700;font-size:74px;line-height:.68;
  float:left;margin:8px 11px 0 0;color:#4a6741;
}
.story-rule{border:0;border-top:2px dashed #c2bd9f;margin:34px 0}

.story-callout{
  position:relative;margin:26px 0;padding:20px 22px;
  background:#f4f0dd;border:3px solid #23261f;border-radius:14px;
  box-shadow:6px 6px 0 #d0aa6b;
}
.story-callout-label{
  display:block;font-family:'Press Start 2P',monospace;font-size:9px;
  letter-spacing:1.5px;color:#9a742c;margin:0 0 11px;
}
.story-callout p{margin:0}

.story-chapter--band{
  background:#3f5a38;
  border-radius:0 70px 0 70px;
}
.story-band-clip{
  position:absolute;inset:0;overflow:hidden;
  border-radius:0 70px 0 70px;pointer-events:none;
}
.story-chapter--band .story-h{color:#f2eeda}
.story-chapter--band .story-sub{color:#d4dfc9}
.story-chapter--band .story-sub::before{color:#8fb3a8}
.story-chapter--band .story-copy p{color:#dfe4d3}
.story-chapter--band .story-lede::first-letter{color:#d0aa6b}
.story-chapter--band .story-mark{color:#8fb3a8}
.story-chapter--band .story-caption{color:#c2cfb6}
.story-chapter--band .story-frame{background:#e6e0ca;box-shadow:0 18px 40px rgba(0,0,0,.42)}
.story-chapter--band .story-frame::before{
  background:rgba(212,223,201,.5);
  border-left-color:rgba(255,255,255,.4);
  border-right-color:rgba(255,255,255,.4);
}
.story-chapter--band .story-rule{border-top-color:#5f7554}
.story-band-decor{position:absolute;pointer-events:none;opacity:.5}
.story-band-decor-tr{top:-40px;right:-40px;width:280px}
.story-band-decor-bl{bottom:-30px;left:-30px;width:230px}
@media (max-width:720px){.story-band-decor{display:none}}

.story-chapter--paper{
  background-color:#ece7d6;
  padding-bottom:clamp(28px,4vw,52px);
  background-image:
    repeating-linear-gradient(0deg,rgba(74,103,65,.075) 0 1px,transparent 1px 30px),
    repeating-linear-gradient(90deg,rgba(74,103,65,.075) 0 1px,transparent 1px 30px);
}
.story-chapter--paper .story-mark{color:#4a6741}

.story-outro{
  position:relative;text-align:center;
  padding:clamp(22px,3vw,38px) 24px clamp(46px,6vw,76px);
}
.story-outro-h{
  font-family:'Caveat',cursive;font-weight:700;
  font-size:min(16vw,108px);line-height:.9;margin:0 0 10px;color:#23261f;
}
.story-outro-art{
  display:block;width:min(100%,1100px);margin:64px auto 0;
  transition:transform .25s ease,filter .25s ease;
}
.story-outro-art img{display:block;width:100%;height:auto}
@media (hover:hover) and (pointer:fine){
  .story-outro-art:hover{transform:translateY(-4px);filter:drop-shadow(0 10px 10px rgba(35,38,31,.16))}
}
@media (prefers-reduced-motion:reduce){
  .story-outro-art{transition:none}
}

.reveal{
  opacity:0;transform:translateY(46px);
  transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1);
}
.reveal.in-view{opacity:1;transform:none}
.reveal-figure{
  opacity:0;transform:translateY(58px) scale(.94);
  transition:opacity .95s cubic-bezier(.22,1,.36,1),transform .95s cubic-bezier(.22,1,.36,1);
}
.reveal-figure.in-view{opacity:1;transform:none}
.reveal-d1{transition-delay:.1s}
.reveal-d2{transition-delay:.2s}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-figure{transition:none;opacity:1;transform:none}
}