/* Editorial treatment scoped to the Day One story. */
.dots-story{--dot-mint:#a4f3d5;--dot-line:rgba(164,243,213,.25)}
.dots-story .new-story-header{padding-top:64px;padding-bottom:54px;position:relative}
.dots-story .new-story-header h1{font-size:clamp(68px,9.5vw,140px);line-height:.96;letter-spacing:-.065em;max-width:1000px;margin:36px 0 30px}
.dots-story .new-story-header h1 span{color:var(--dot-mint)}
.dots-story .new-story-header>p{max-width:640px;font-size:clamp(20px,2vw,27px);line-height:1.5}
.dots-story .dots-cover{margin-bottom:0}
.dots-story .dots-cover>img{aspect-ratio:1.95;max-height:650px;border-radius:20px;object-position:center 52%}
.dots-story .dots-cover:after{content:"";position:absolute;left:6%;right:6%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--dot-mint),transparent)}
.dots-story .dots-chapters{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-block:34px 44px;border-bottom:1px solid var(--dot-line);margin-bottom:32px}
.dots-story .dots-chapters a{display:flex;gap:12px;align-items:center;font-size:14px;color:#dfebe7;text-decoration:none;line-height:1.5}
.dots-story .dots-chapters a:hover,.dots-story .dots-chapters a:focus-visible{color:var(--dot-mint)}
.dots-story .dots-chapters span{font-size:12px;color:var(--dot-mint);font-variant-numeric:tabular-nums}
.dots-story h2[id]{scroll-margin-top:115px}
.dots-story .article-body h2{margin-top:72px}
.dots-story .dots-loop{width:min(1120px,calc(100vw - 80px));margin:64px 50%;transform:translateX(-50%);padding:40px;border:1px solid var(--dot-line);border-radius:20px;background:linear-gradient(125deg,#17201e,#101313 65%);box-sizing:border-box}
.dots-story .dots-loop figcaption{display:flex;flex-direction:column;gap:12px;text-align:left;color:#b9c8c2;font-size:16px;line-height:1.6}
.dots-story .dots-loop figcaption strong{font-size:clamp(26px,3vw,42px);font-weight:500;line-height:1.2;color:#f5f8f6;letter-spacing:-.035em}
.dots-story .dots-loop .eyebrow{font-size:12px;color:var(--dot-mint)}
.dots-story .dots-loop ol{padding:0;margin:42px 0 30px;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;position:relative}
.dots-story .dots-loop ol:before{content:"";position:absolute;top:19px;left:20px;right:20px;height:1px;background:linear-gradient(90deg,#48675b,#b5ffe0,#48675b);background-size:200% 100%;animation:dots-flow 7s linear infinite}
.dots-story .dots-loop li{position:relative;margin:0;padding:0;min-width:0}
.dots-story .dots-step-number{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#17231e;border:1px solid #668b7c;color:var(--dot-mint);font-size:13px;position:relative;box-shadow:0 0 0 8px #121917}
.dots-story .dots-loop h3{font-size:21px;font-weight:500;color:#eff7f3;margin:26px 0 10px;line-height:1.3}
.dots-story .dots-loop li p{font-size:16px;line-height:1.65;color:#bfcec7;margin:0}
.dots-story .dots-loop-note{display:block;padding-top:24px;border-top:1px solid var(--dot-line);font-size:14px;color:#9eafa6}
.dots-story .dots-takeaway{margin:64px 0;padding:32px 0 32px 28px;border-left:2px solid var(--dot-mint)}
.dots-story .dots-takeaway .eyebrow{font-size:12px;color:#a8bab1}
.dots-story .dots-takeaway p{font-size:clamp(30px,3.5vw,48px);line-height:1.25;letter-spacing:-.025em;margin:18px 0 0;color:#f0f6f3}
.dots-story .dots-takeaway em{font-style:normal;color:var(--dot-mint)}
@keyframes dots-flow{0%{background-position:200% 0}100%{background-position:0 0}}
.motion-off .dots-story *{animation:none!important;transition:none!important}
@media(max-width:700px){.dots-story .new-story-header{padding-top:36px;padding-bottom:36px}.dots-story .new-story-header h1{font-size:76px}.dots-story .dots-cover>img{aspect-ratio:1.25;border-radius:14px}.dots-story .dots-chapters{grid-template-columns:repeat(2,1fr);gap:20px 12px;padding-block:26px}.dots-story .dots-chapters a{font-size:14px;gap:8px}.dots-story .dots-loop{width:100%;margin:44px 0;transform:none;padding:26px 22px}.dots-story .dots-loop ol{grid-template-columns:1fr;gap:28px;margin-top:28px}.dots-story .dots-loop ol:before{left:19px;top:18px;bottom:10px;width:1px;height:auto;right:auto}.dots-story .dots-loop li{padding-left:60px;min-height:90px}.dots-story .dots-step-number{position:absolute;left:0;top:0}.dots-story .dots-loop h3{margin:4px 0 8px;font-size:20px}.dots-story .dots-loop li p{font-size:16px}.dots-story .dots-takeaway{padding-left:20px}.dots-story .article-body h2{margin-top:52px}}
@media(prefers-reduced-motion:reduce){.dots-story *{animation:none!important;transition:none!important}}
/* Prominent automatic motion. Static first; script respects preferences. */
.dots-story .dots-motion{border:1px solid var(--dot-line);border-radius:18px;background:linear-gradient(115deg,#17251f,#111715 65%);padding:26px 32px 18px;margin-bottom:28px;box-sizing:border-box}
.dots-story .dots-motion-toolbar{display:flex;align-items:center;justify-content:space-between;gap:22px}
.dots-story .dots-motion-toolbar .eyebrow{font-size:12px;color:var(--dot-mint)}
.dots-story .dots-motion-toolbar p{font-size:20px;margin:8px 0 0;line-height:1.35;color:#f1f7f3}
.dots-story .dots-motion-track{position:relative;margin:30px 0 0}
.dots-story .dots-motion-track ol{display:grid;grid-template-columns:repeat(3,1fr);list-style:none;padding:0;margin:0;text-align:center;position:relative}
.dots-story .dots-motion-track li{display:flex;align-items:center;flex-direction:column;gap:20px;margin:0;padding:0}
.dots-story .dots-motion-track li>span{display:grid;place-items:center;width:40px;height:40px;border:1px solid #739684;border-radius:50%;background:#15271e;color:#c7f9df;font-size:12px}
.dots-story .dots-motion-track strong{font-size:16px;font-weight:400;color:#e4eee8}
.dots-story .dots-motion-rail{position:absolute;left:16.667%;right:16.667%;top:18px;height:4px;border-radius:5px;background:#426c56}
.dots-story .dots-traveler{position:absolute;z-index:2;left:0;top:50%;width:16px;height:16px;border-radius:50%;background:#d6ffe8;border:2px solid #91ffc0;box-shadow:0 0 14px #83ffb7,0 0 30px #83ffb780;transform:translate(-50%,-50%)}
@keyframes dots-travel-horizontal{0%,10%{left:0}42%,53%{left:50%}85%,100%{left:100%}}
@keyframes dots-travel-vertical{0%,10%{top:0}42%,53%{top:50%}85%,100%{top:100%}}
/* Motion follows the site and system preferences. */
html body .dots-story .dots-motion[data-playing="true"] .dots-traveler{animation:dots-travel-horizontal 6s ease-in-out infinite!important;animation-play-state:running!important}
html body .dots-story .dots-motion[data-playing="false"] .dots-traveler{animation:none!important}
@media(max-width:700px){
 .dots-story .dots-motion{padding:24px 22px 18px;margin-bottom:24px}
 .dots-story .dots-motion-toolbar{align-items:flex-start;flex-direction:column;gap:16px}
 .dots-story .dots-motion-toolbar p{font-size:20px}
 .dots-story .dots-motion-track{margin:26px 0 0}
 .dots-story .dots-motion-track ol{grid-template-columns:1fr;gap:36px;text-align:left}
 .dots-story .dots-motion-track li{flex-direction:row;gap:20px;min-height:40px}
 .dots-story .dots-motion-track strong{font-size:17px}
 .dots-story .dots-motion-rail{left:18px;right:auto;top:20px;bottom:20px;width:4px;height:auto}
 .dots-story .dots-traveler{left:50%;top:0}
 html body .dots-story .dots-motion[data-playing="true"] .dots-traveler{animation-name:dots-travel-vertical!important}
 .dots-story .dots-loop ol:before{background:linear-gradient(180deg,#48675b,#b5ffe0,#48675b);background-size:100% 200%;animation:dots-flow-vertical 7s linear infinite}
}
@keyframes dots-flow-vertical{0%{background-position:0 200%}100%{background-position:0 0}}
html.motion-off body .dots-story .dots-motion .dots-traveler{animation:none!important}
@media(prefers-reduced-motion:reduce){html body .dots-story .dots-motion[data-playing="true"] .dots-traveler{animation:none!important}}

/* Compact illustrated masthead: the art and title share one frame. */
.dots-story .new-story-header{width:100%;max-width:none;box-sizing:border-box;padding:30px max(5.2vw,20px) 36px;background:linear-gradient(90deg,#080e0df0 0%,#0a1110b8 42%,#0a11101a 80%),linear-gradient(0deg,#0b0b0c,transparent 38%),url('/assets/journal/dots-day-one.webp') center 48%/cover;min-height:400px}
.dots-story .new-story-header .back-link{margin-bottom:26px;color:#d2e6df}
.dots-story .new-story-header .eyebrow{color:#c0cec8;font-size:11px}
.dots-story .new-story-header h1{font-size:clamp(64px,7.2vw,98px);margin:22px 0 18px;line-height:.95;text-shadow:0 2px 24px #0008}
.dots-story .new-story-header>p{font-size:clamp(18px,1.7vw,22px);max-width:580px;line-height:1.45;margin:0;color:#e0ebe5}
.dots-story .dots-chapters{padding-block:22px;margin-bottom:0;gap:18px}
.dots-story>.article-wrap{padding-top:32px}
.dots-story .article-body>.dots-motion{margin:48px 0 0}
.dots-story .dots-horizon{margin:44px 0 32px;border:1px solid var(--dot-line);border-radius:20px;overflow:hidden;background:radial-gradient(ellipse at 75% 40%,#253e32,#101a16 70%);padding:28px 26px 24px}
.dots-story .dots-horizon figcaption{text-align:left;display:flex;flex-direction:column;gap:10px;margin:0}
.dots-story .dots-horizon .eyebrow{font-size:11px;color:var(--dot-mint)}
.dots-story .dots-horizon strong{font-size:clamp(23px,3vw,34px);font-weight:400;line-height:1.15;letter-spacing:-.025em;color:#e6f7ee}
.dots-story .dots-horizon svg{display:block;width:100%;height:auto;margin:12px 0 0;overflow:visible}
.dots-story .horizon-labels{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#b5d3c3;line-height:1.35}
.dots-story .horizon-signal{offset-path:path('M64 199C170 204 190 139 299 153S451 206 554 144 690 78 776 109');offset-distance:45%;filter:drop-shadow(0 0 7px #85ffc0);animation:horizon-walk 12s ease-in-out infinite}
@keyframes horizon-walk{0%,8%{offset-distance:0%}90%,100%{offset-distance:100%}}
@media(max-width:700px){.dots-story .new-story-header{min-height:360px;padding-top:26px;padding-bottom:30px;background-position:center,center,58% center}.dots-story .new-story-header .back-link{margin-bottom:22px}.dots-story .new-story-header h1{font-size:64px;margin:20px 0 16px}.dots-story .new-story-header>p{font-size:18px;max-width:400px}.dots-story .dots-chapters{padding-block:18px;gap:12px 16px}.dots-story>.article-wrap{padding-top:24px}.dots-story .dots-horizon{padding:24px 18px 20px}.dots-story .horizon-labels{font-size:11px}}
html.motion-off .dots-story .horizon-signal{animation:none!important}
@media(prefers-reduced-motion:reduce){.dots-story .horizon-signal{animation:none!important}}