.photo-story {
  --story-paper:#f6f3eb;
  --story-ink:#252822;
  --story-gutter:clamp(14px,2vw,28px);
  --story-progress:0;
  position:relative;
  background:var(--story-paper);
  color:var(--story-ink);
}
#home #summer-story {scroll-margin-top:0}
.story-stage {
  container-type:inline-size;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto;
  height:clamp(32rem,100svh,56rem);
}
.story-viewport {
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  outline-offset:-4px;
}
.story-track,.story-chapter {display:flex}
.story-track {position:relative;width:max-content;height:100%}
.story-spread {
  position:relative;
  flex:none;
  width:100vw;
  width:100cqw;
  min-width:0;
  scroll-snap-align:start;
}
.story-opening {
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  padding:var(--story-gutter);
}
.story-plate {position:relative;margin:0;min-width:0}
.story-image {position:absolute;inset:0;overflow:hidden;background:#292b28}
.story-image img {display:block;width:100%;height:100%;object-fit:cover}
[data-story-zoom] .story-image img {scale:var(--story-scale,1)}
.story-cover {color:white}
.story-cover img {transform:scale(var(--story-scale,1))}
.story-cover::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,#0007,transparent 25%,transparent 65%,#0007);
}
.story-plate figcaption {
  position:absolute;
  z-index:1;
  font-size:var(--type-small);
  line-height:var(--leading-support);
}
.story-cover figcaption {
  top:var(--space-5);
  inset-inline:var(--space-3);
  text-align:center;
}
.story-editorial {
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:var(--space-4);
  align-items:center;
  justify-items:center;
  padding:var(--space-4) clamp(20px,4vw,64px);
  text-align:center;
}
.story-heading h2,.story-detail-heading {
  margin:var(--space-2) 0 0;
  font:400 clamp(2.25rem,4.4vw,5rem)/.94 var(--font-literary);
  letter-spacing:-.035em;
  text-transform:uppercase;
  text-wrap:balance;
}
.story-heading .eyebrow,.story-date,.story-copy {margin:0}
.story-date,.story-copy {font-size:var(--type-support);line-height:var(--leading-support)}
.story-copy {max-width:38ch}
.story-ending {display:grid;justify-items:center;gap:var(--space-2)}
.story-ending .ui-button {
  --ui-ink:var(--story-ink);
  --ui-hover-ink:var(--story-ink);
  --ui-hover:#25282210;
}
.story-wide {color:white}
.story-wide img {width:124%;max-width:none;margin-left:-12%;transform:translateX(var(--story-pan,0%))}
.story-wide .story-goldfish-image {object-position:50% 43%}
.story-wide figcaption {
  inset:auto auto var(--story-gutter) var(--story-gutter);
  padding:var(--space-2) var(--space-3);
  background:#000a;
}
.story-detail .story-image {inset:var(--story-gutter) 8% var(--story-gutter) 39%}
.story-detail figcaption {inset:auto 64% var(--story-gutter) var(--story-gutter)}
.story-detail-editorial {
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(var(--space-5),5vw,6rem);
  padding:clamp(var(--space-5),4svh,4rem) var(--story-gutter) clamp(var(--space-5),6svh,5rem) clamp(var(--story-gutter),8vw,9rem);
}
.story-detail-heading {align-self:end;margin:0;text-wrap:pretty}
.story-detail-content,.story-detail-figure {
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  min-height:0;
  gap:var(--space-4);
}
.story-detail-figure {margin:0;gap:var(--space-2)}
.story-detail-figure .story-image {position:relative;inset:auto}
.story-detail-figure img {position:absolute;inset:0}
.story-detail-figure figcaption {font-size:var(--type-small);line-height:var(--leading-support)}
.story-detail-content .story-copy {justify-self:end;max-width:42ch}
.story-navigation {
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-1) var(--story-gutter);
  border-top:1px solid var(--border-light);
  font-size:var(--type-small);
}
.story-scroll-hint {letter-spacing:.08em}
.story-position {min-width:7ch;text-align:center;font-variant-numeric:tabular-nums}
.story-progress {height:1px;background:var(--border-light);flex:1}
.story-progress span {display:block;height:100%;background:currentColor;transform-origin:left;transform:scaleX(var(--story-progress))}
.story-navigation .ui-button {
  --ui-ink:var(--story-ink);
  --ui-hover-ink:var(--story-ink);
  --ui-hover:#25282210;
  --ui-min-width:44px;
  min-height:44px;
}
.photo-story :is(a,button,.story-viewport):focus-visible {outline-color:var(--focus-light)}
.photo-story.story-enhanced {height:calc(100svh + var(--story-travel,0px))}
.story-enhanced .story-stage {position:sticky;top:0;height:100svh}
.story-enhanced .story-viewport {overflow:clip;scroll-snap-type:none}
.story-enhanced .story-track {will-change:transform;transform:translate3d(calc(-1px * var(--story-offset,0)),0,0)}

@media (max-width:700px), (pointer:coarse) {
  .story-stage {display:block;height:auto}
  .story-viewport {overflow:visible;scroll-snap-type:none}
  .story-track,.story-chapter {display:block}
  .story-track,.story-spread {width:auto;height:auto}
  .story-opening {grid-template-columns:minmax(0,1fr)}
  .story-cover {min-height:clamp(13rem,37svh,23rem)}
  .story-editorial {padding:var(--space-4) var(--space-2)}
  .story-spread .story-image img {scale:none;transform:none}
  .story-wide {height:clamp(16rem,60svh,34rem)}
  .story-wide img {width:100%;margin:0}
  .story-heading h2,.story-detail-heading {font-size:clamp(2rem,9vw,3.75rem)}
  .story-detail-editorial {grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);padding:var(--space-7) var(--story-gutter) var(--space-5)}
  .story-detail-figure .story-image {min-height:clamp(12rem,33svh,20rem)}
  .story-detail-content .story-copy {justify-self:start}
  .story-detail {padding:var(--story-gutter)}
  .story-detail .story-image {position:relative;inset:auto;height:clamp(16rem,55svh,30rem)}
  .story-detail figcaption {position:static;margin-top:var(--space-2)}
  .story-navigation {display:none}
}