/* Three existing images; normal document scrolling drives the desktop story. */
.daystory { margin: 0 0 65px; --story-top: 126px; --story-height: min(72svh, 720px, calc(100svh - var(--story-top) - 22px)); }
.daystory-stage { position: relative; display: grid; gap: 18px; }
.daystory-scene { position: relative; margin: 0; height: 480px; overflow: hidden; isolation: isolate; background: #081e34; border: 1px solid #b99b6655; }
.daystory-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.daystory-scene::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(0deg, #041525cf, transparent 77%), linear-gradient(90deg, #0415257d, transparent 88%), linear-gradient(180deg, #0415254d, transparent 25%); }
.daystory-copy { position: absolute; z-index: 1; left: 6%; right: 6%; bottom: 68px; color: var(--ivory); }
.daystory-copy > p { color: #f1d5a4; font-size: 8px; letter-spacing: 2.1px; margin-bottom: 22px; }
.daystory-copy h3 { color: var(--ivory); font: 300 clamp(35px, 4.4vw, 66px)/1.12 var(--sans); letter-spacing: -1.8px; }
.daystory-copy h3 em { color: #f1d5a4; font-style: normal; }
.daystory-material { position: absolute; z-index: 1; right: 28px; top: 25px; width: max-content; max-width: calc(100% - 56px); text-align: right; color: #f7f3e8; font-size: 6px; letter-spacing: 1.1px; line-height: 1.7; padding: 6px 8px; background: #04152585; border: 1px solid #d9b57433; }
.daystory-hud, .daystory-thread, .daystory-steps { display: none; }
.daystory-foot { display: flex; justify-content: flex-end; align-items: center; }
.daystory-next { color: var(--teal); font-size: 8px; letter-spacing: 1.1px; display: inline-flex; gap: 20px; align-items: center; padding: 13px 0; border-bottom: 1px solid #a6b6b8; }
.daystory-next > span { font-size: 19px; line-height: 1; }
#around-places { scroll-margin-top: 132px; padding-top: 38px; border-top: 1px solid var(--line); }
@media (min-width: 901px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) {
  .daystory--cinematic { height: calc(var(--story-height) + 126svh); }
  .daystory--cinematic .daystory-stage { position: sticky; top: var(--story-top); display: block; height: var(--story-height); min-height: 0; overflow: hidden; isolation: isolate; border: 1px solid #b99b6677; background: #081e34; box-shadow: 0 18px 40px #0e2a4712; }
  .daystory--cinematic .daystory-scene { position: absolute; inset: 0; height: 100%; border: 0; opacity: 0; pointer-events: none; }
  .daystory--cinematic .daystory-scene:first-of-type { opacity: 1; }
  .daystory--cinematic .daystory-copy { bottom: 120px; max-width: 760px; opacity: 0; transform: translateY(12px); transition: opacity .4s ease, transform .65s ease; }
  .daystory--cinematic .daystory-scene.is-current .daystory-copy { opacity: 1; transform: none; }
  .daystory--cinematic .daystory-material { top: 72px; right: 6%; max-width: 88%; font-size: 6px; opacity: 0; transition: opacity .4s ease; }
  .daystory--cinematic .daystory-scene.is-current .daystory-material { opacity: 1; }
  .daystory--cinematic .daystory-hud { position: absolute; top: 29px; left: 6%; right: 6%; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 30px; color: #f7f3e8; font-size: 7px; letter-spacing: 2px; padding-bottom: 19px; border-bottom: 1px solid #f7f3e838; pointer-events: none; }
  .daystory--cinematic .daystory-counter { color: #f1d5a4; letter-spacing: 1.4px; }
  .daystory--cinematic .daystory-thread { display: block; position: absolute; z-index: 4; pointer-events: none; overflow: visible; width: 100%; height: 170px; bottom: 25px; left: 0; }
  .daystory-thread-base { fill: none; stroke: #d9b57440; stroke-width: .6; vector-effect: non-scaling-stroke; }
  .daystory-thread-line { fill: none; stroke: url(#daystory-thread-gold); stroke-width: 1.1; stroke-dasharray: 1; stroke-dashoffset: .94; vector-effect: non-scaling-stroke; }
  .daystory-thread-tip { filter: drop-shadow(0 0 4px #d9b57488); }
  .daystory--cinematic .daystory-foot { position: absolute; z-index: 5; bottom: 26px; left: 6%; right: 6%; justify-content: space-between; gap: 30px; }
  .daystory--cinematic .daystory-steps { display: flex; gap: 26px; color: #f7f3e891; font-size: 6px; letter-spacing: 1.2px; }
  .daystory-steps > span { transition: color .4s; }
  .daystory-steps b { font-weight: 400; margin-right: 7px; }
  .daystory-steps > .is-current { color: #f1d5a4; }
  .daystory--cinematic .daystory-next { color: var(--ivory); border: 0; font-size: 6px; letter-spacing: 1.2px; }
}
@media (max-width: 1050px) { .daystory-copy h3 { font-size: 46px; } .daystory--cinematic .daystory-steps { gap: 17px; font-size: 5px; } }
@media (max-width: 900px) { .daystory { margin-bottom: 45px; } .daystory-scene { height: 440px; } .daystory-copy h3 { font-size: clamp(34px, 5.5vw, 48px); } }
@media (max-width: 600px) {
  .daystory { margin-top: 32px; margin-bottom: 38px; }
  .daystory-stage { gap: 14px; }
  .daystory-scene { height: 390px; }
  .daystory-copy { left: 24px; right: 20px; bottom: 34px; }
  .daystory-copy > p { font-size: 6px; letter-spacing: 1.7px; margin-bottom: 18px; }
  .daystory-copy h3 { font-size: clamp(29px, 8.3vw, 42px); letter-spacing: -1px; line-height: 1.14; }
  .daystory-material { top: 20px; right: 20px; max-width: calc(100% - 40px); font-size: 5px; letter-spacing: .8px; }
  .daystory-next { font-size: 7px; padding-top: 8px; }
  #around-places { padding-top: 30px; scroll-margin-top: 105px; }
}