/* Scroll-driven opening uses the coastline from the original origin-map study. */
body{background:#18191c;color:#f7f8f6}
:root{--about-layout-max:1360px}
body h1,body h2,body p,body a{letter-spacing:0}
.origin-journey{height:100svh;background:#18191c}
.origin-marker-connector{fill:none;stroke:#718578;stroke-width:1}
.timeline-follow .timeline-track,.timeline-follow .year:before{display:none}
.timeline-follow .year .year-dot{opacity:0;transition:none}
.timeline-follow .year.is-visible .year-dot{opacity:1;background:#91aa96;border-color:#344b3c;box-shadow:none}
.timeline-follow .year-copy,.timeline-follow .year-visual{opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease,visibility .55s}
.timeline-follow .year.is-visible .year-copy,.timeline-follow .year.is-visible .year-visual{opacity:1;visibility:visible;transform:none}
.origin-marker-overlay{position:fixed;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:4}
.origin-marker-overlay .origin-callout{display:none}
.origin-marker-label{position:fixed;z-index:5;max-width:180px;color:#f7f8f6;font:400 14px/1.45 Manrope,Arial,sans-serif;letter-spacing:0;pointer-events:none;text-shadow:0 1px 4px #18191c,0 0 6px #18191c;transition:opacity .15s linear}
.origin-marker-label:before,.origin-marker-label:after{content:'';position:absolute;background:#718578}
.origin-marker-label:before{left:var(--marker-line-left,-32px);top:var(--marker-line-horizontal-y,11px);width:var(--marker-line-width,32px);height:1px}
.origin-marker-label:after{left:var(--marker-line-x,-32px);top:var(--marker-line-top,-40px);width:1px;height:var(--marker-line-height,51px)}
.origin-marker-label strong,.origin-marker-label span{display:block}
.origin-marker-label strong{font-size:16px;font-weight:500}
.origin-marker-label span{font-size:12px;color:#c7cfc9}
.origin-stage{position:sticky;top:0;height:100svh;overflow:hidden;background:#18191c;color:#f7f8f6;isolation:isolate}
.origin-map{position:absolute;width:100%;height:100%;inset:0;display:block;overflow:visible}
.origin-land{fill:#f7f8f6;stroke:#a0aaa3;stroke-width:.25;stroke-linejoin:round}
.origin-land path{vector-effect:non-scaling-stroke}
.origin-marker-dot{fill:#91aa96;stroke:#344b3c;stroke-width:1}
.origin-marker-ring{fill:none;stroke:#91aa96;stroke-width:1;animation:origin-marker-pulse 4s ease-in-out infinite}
@keyframes origin-marker-pulse{0%,100%{stroke-opacity:.25}50%{stroke-opacity:.7}}
.origin-land{opacity:1}
.origin-copy h1{animation:origin-copy-reveal .9s ease-out both}
.origin-copy .lead{animation:origin-copy-reveal .9s ease-out .18s both}
.origin-callout-copy{animation:origin-copy-reveal .8s ease-out .4s both}
@keyframes origin-copy-reveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.origin-marker-ring,.origin-land,.origin-copy h1,.origin-copy .lead,.origin-callout-copy{animation:none}}
.origin-callout path{fill:none;stroke:#91aa96;stroke-width:1;animation:origin-marker-pulse 4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.origin-callout path{animation:none}}
.origin-callout-copy{color:#f7f8f6;font:400 14px/1.5 Manrope,Arial,sans-serif;letter-spacing:0;text-shadow:0 1px 4px #18191c,0 0 6px #18191c}
.origin-callout-copy strong,.origin-callout-copy span{display:block}
.origin-callout-copy strong{font-size:16px;font-weight:500}
.origin-callout-copy span{font-size:12px;color:#c7cfc9}
.origin-callout-copy p{font-size:13px;margin:10px 0 0}
.origin-copy{position:absolute;top:22%;left:7%;max-width:440px;pointer-events:none}
.origin-copy h1{font-size:48px;line-height:1.12;margin-bottom:24px;text-wrap:balance}
.origin-copy .lead{font-size:18px;line-height:1.65;color:#c7cfc9}
.origin-place{position:absolute;right:7%;bottom:18%;font-size:17px;margin:0}
.origin-place span{display:block;font-size:13px;color:#b8c5bc;margin-top:6px}
.origin-copy .origin-next{position:relative;bottom:auto;left:auto;width:44px;height:44px;margin-top:4px;text-decoration:none;display:flex;align-items:center;justify-content:flex-start;pointer-events:auto}
.origin-next span{font-size:28px;line-height:1;animation:origin-arrow-bounce 1.2s ease-in-out infinite}
@keyframes origin-arrow-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){.origin-next span{animation:none}}
.origin-ready .origin-journey{height:230svh}
.origin-ready .vertical-story{position:relative;margin-top:-45svh;z-index:2}
#year-1471 .year-dot,#year-1471.is-visible .year-dot{background:#91aa96;border-color:#344b3c;box-shadow:none}
.vertical-story{color:#f7f8f6;padding-top:48px}
.year-number,.year:target .year-number{color:#b7c9bc}
.year-intro{color:#c1cac4}
.timeline-track{background:#718578}.timeline-fill{background:#91aa96}
.year-dot{background:#18191c;border-color:#718578}
.year.is-visible .year-dot{background:#718578;border-color:#718578;box-shadow:0 0 0 5px #71857812}
.year:before{background:#718578}.year{border-bottom-color:#ffffff0c}
.year-visual .image-window{border-color:#ffffff12}
.pouch-visual .image-window,.year:nth-child(9) .pouch-visual .image-window,.year:nth-child(10) .pouch-visual .image-window{background:#18191c}
.year-visual figcaption{color:#aab8ae}
.documentary-photo .image-window{aspect-ratio:auto;background:transparent}
.documentary-photo img{height:auto;object-fit:contain}
.canada-gels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:center;padding:16px 0}
.launch-gels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:center;padding:12px 0}
.launch-gels img{width:100%;height:210px;object-fit:contain;display:block}
.year#year-2023>.launch-gel-pair{max-width:300px}
@media(max-width:540px){.launch-gels{gap:12px}.launch-gels img{height:170px}}
.canada-gels img{display:block;width:100%;height:180px;object-fit:contain}
.year#year-2026>.canada-lineup{max-width:340px}
.year#year-2026>.canada-activation{max-width:360px}
.canada-activation .image-window{aspect-ratio:16/9}
.canada-activation img{width:100%;height:100%;object-fit:cover}
@media(max-width:540px){.canada-gels{gap:6px}.canada-gels img{height:140px}}
.closing{background:#18191c;color:#f7f8f6}.closing .button{background:#f7f8f6;color:#222622;border-color:#f7f8f6}.closing .button:hover{background:transparent;color:#f7f8f6}
header.nav.is-light{background:#f7f8f6ed;color:#222622;border-color:#22262218}
header.nav.is-light .logo{filter:brightness(.2)}
#year-1471{scroll-margin-top:110px}
@media(min-width:801px){
 header.nav{width:min(var(--about-layout-max),calc(100% - 48px));margin-inline:auto;padding-inline:26px}
 .origin-stage{width:min(100%,var(--about-layout-max));margin-inline:auto}
 .origin-map{width:68%;left:32%}
 .origin-copy{left:10%;max-width:380px}
}
@media(max-width:800px){.origin-copy{top:18%;left:7%;max-width:86%}.origin-copy h1{font-size:44px}.origin-copy .lead{font-size:16px}.origin-map{height:64%;top:34%}.origin-place{bottom:12%;right:7%;font-size:14px}.origin-next{bottom:22px}.origin-ready .origin-journey{height:200svh}}
@media(prefers-reduced-motion:reduce){.origin-ready .origin-journey{height:100svh}.origin-stage{position:relative}}
@media(prefers-reduced-motion:reduce){.origin-ready .vertical-story{margin-top:0}}
@media(max-width:800px){.origin-copy h1{font-size:32px;max-width:460px;margin-bottom:16px}.origin-copy .lead{font-size:15px}}
/* A centred opening marker connects to the mobile reading rail below it. */
@media(max-width:800px){
 #year-1471{padding-top:48px}
 #year-1471 .year-dot{left:-26px;top:61px;transform:translate(-50%,-50%)}
 #year-1471:before{left:-26px;top:0;width:calc(50% + 12px);height:30px;background:none;border-right:1px solid #718578;border-bottom:1px solid #718578;border-bottom-right-radius:18px}
 .vertical-story .timeline-track{top:78px}
}