/* Native scrolling: painting, app capture, then the centered journal entry. */
.story-site{--gutter:clamp(24px,5.5vw,100px)}
.story-site .site-header{padding-top:28px;padding-bottom:28px}
.story-site .availability{border:0;border-radius:30px;background:var(--ink);color:var(--paper);padding:13px 23px}
.opening{position:relative;z-index:2;text-align:center;padding:68px 24px 48px}
.opening h1{font-size:clamp(65px,8.3vw,138px);line-height:1.015;letter-spacing:-.075em}
.opening>p{font-size:19px;margin-top:28px}
.day-story{position:relative;padding-bottom:90px;isolation:isolate;overflow-x:clip}
.phone-track{position:absolute;inset:110px 0 130px;z-index:5;pointer-events:none}
.phone-sticky{position:sticky;top:max(44px,calc((100svh - 580px)/2));width:270px;height:580px;margin-left:26%}
.scene{min-height:max(920px,115svh);position:relative;display:flex;align-items:center}
.scene-art{position:absolute;left:-9%;top:2%;width:78%;height:85%;mix-blend-mode:multiply;transform:translate3d(0,var(--drift,0px),0);will-change:transform;pointer-events:none}
.scene-art img{width:100%;height:100%;object-fit:contain;mask-image:radial-gradient(ellipse 65% 62% at 50% 47%,black 47%,transparent 88%)}
.scene-copy{position:relative;z-index:6;width:31%;max-width:410px;margin-left:63%;padding:70px 0}
.chapter{font-size:14px;line-height:1.5;color:#56645b;margin-bottom:28px}
.scene h2{font-size:clamp(44px,4.6vw,78px);line-height:1.04;letter-spacing:-.06em;margin-bottom:25px}
.scene-copy>p:not(.chapter):not(.journal-note){font-size:17px;line-height:1.8;max-width:340px}
.journal-note{font-family:'Bradley Hand','Segoe Print','Chalkboard SE',cursive;font-size:clamp(24px,2.2vw,34px);line-height:1.25;letter-spacing:-.035em;transform:rotate(-6deg);color:#52684f;margin:54px 0 0 28px}
.journal-note:after{content:'';display:block;height:9px;width:92px;border-bottom:2px solid currentColor;border-radius:50%;transform:rotate(-4deg);margin:9px 0 0 40px;opacity:.7}
.scene-eat .journal-note{color:#886144;transform:rotate(4deg)}
.scene-do .journal-note{color:#677a80}
.device{width:270px;height:580px;position:relative;filter:drop-shadow(0 24px 25px #1b292020)}
.device-inner{width:270px;height:580px;border:4px solid #353b37;box-shadow:0 0 0 1px #9ca19c;border-radius:41px;padding:3px;background:#202620;overflow:hidden;transform-origin:top left}
.app-ui{overflow:hidden;border-radius:34px;color:#222d29;background:#1d2a23;height:566px;font-size:11px}
.app-weather{padding:0 17px 13px;background:radial-gradient(ellipse at 95% 20%,#d9ebf0,transparent 80%),#f6f5ef;border-radius:0 0 22px 22px;transition:background-color 1.2s,color 1.2s}
.app-ui[data-tone=warm] .app-weather{background:radial-gradient(ellipse at 95% 20%,#f6dbae,transparent 80%),#f6f5ef}
.app-status{height:34px;display:flex;align-items:center;justify-content:space-between;font-size:10px;padding:0 5px;position:relative}
.app-status i{position:absolute;width:77px;height:21px;left:50%;top:6px;transform:translateX(-50%);background:#151a16;border-radius:20px}
.app-city{display:flex;justify-content:space-between;font-size:18px;letter-spacing:-.6px;margin:8px 0}
.app-meta{display:flex;justify-content:space-between;color:#55615a;font-size:9px;padding-bottom:14px;border-bottom:1px solid #9aa89b55}
.app-date{display:flex;justify-content:space-between;font-size:9px;margin:9px 0}
.app-now{font-size:10px;color:#56615b;margin-top:10px}
.app-degrees{display:flex;align-items:center;justify-content:space-between}
.current-temp{font-size:60px;line-height:1.15;letter-spacing:-4px}
.app-degrees>div{font-size:10px;line-height:2}
.app-degrees b{font-size:21px;font-weight:400;margin-left:8px}
.app-condition{display:flex;justify-content:space-between;margin:8px 0 14px;font-size:12px}.app-condition>span:last-child{font-size:9px}
.app-chart{height:60px;position:relative}
.app-grid{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;font-size:9px;color:#677269}
.app-grid span{display:flex;gap:6px;align-items:center}.app-grid span:after{content:'';height:1px;background:#81918244;flex:1}
.app-bars{position:absolute;left:27px;right:0;top:5px;bottom:5px;display:flex;align-items:flex-end;gap:2px}
.app-bars i{flex:1;background:#aab7b199;border-radius:3px 3px 0 0}.app-bars i:nth-child(5){background:#add5e8}.app-bars i:nth-child(11){background:#28362d}.app-bars i:nth-child(16){background:#ecdb9b}
.app-hours{display:flex;justify-content:space-between;font-size:8px;color:#68736b;margin:6px 0 14px 26px}
.app-forecast{display:flex;justify-content:space-around;text-align:center;border-top:1px solid #83938544;font-size:10px;line-height:1.9;padding-top:9px}.app-forecast b{font-weight:400}
.app-attribution{font-size:8px;margin-top:6px;display:flex;justify-content:space-between}
.app-discovery{color:#f3f4eb;padding:17px 16px 0}
.app-tabs{display:flex;gap:28px;font-size:13px;position:relative;padding-bottom:10px;border-bottom:1px solid #536359}
.app-tabs i{position:absolute;bottom:-1px;height:2px;width:24px;background:#f5e6bd;left:calc(var(--tab)*52px);transition:left 1s cubic-bezier(.22,1,.36,1)}
.app-viewport{overflow:hidden;margin-top:13px}
.app-panels{display:flex;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.app-panel{min-width:100%;padding-right:4px}.app-panel>span{font-size:9px;color:#b6c1b3}.app-panel>strong{display:block;font-size:14px;letter-spacing:-.4px;color:#f5e6bd;margin:7px 0}.app-panel>p{font-size:10px;color:#d7dfd4}
.home-indicator{width:75px;height:3px;background:#e3e7df;border-radius:3px;margin:12px auto 0}
.device[data-mode=dark] .app-weather{background:radial-gradient(ellipse at 95% 20%,#35404e,transparent 90%),#222326;color:#f4f4f5}
.device[data-mode=dark] .app-meta,.device[data-mode=dark] .app-now,.device[data-mode=dark] .app-grid,.device[data-mode=dark] .app-hours{color:#b6bec3}
.device[data-mode=dark] .app-bars i{background:#77858f99}.device[data-mode=dark] .app-bars i:nth-child(11){background:#ededdf}
.about-story{background:#1d2a23;color:#f3f4eb;padding:130px max(var(--gutter),calc((100vw - 1120px)/2)) 110px}
.about-story .chapter{color:#b8c4b5}.about-story h2{color:#f5e6bd;font-size:clamp(49px,6.2vw,95px);max-width:1000px;line-height:1.06}
.about-columns{display:grid;grid-template-columns:1fr 1fr;gap:80px;max-width:930px;margin-top:56px}
.about-columns p{font-size:18px;line-height:1.8;color:#dae0d5}
.hours-reminder{font-size:15px;color:#b8c4b5;margin-top:45px}
.cities-section{padding:115px 0 90px;overflow:hidden;background:#e9ece6}
.cities-heading{padding:0 var(--gutter);display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:70px}
.cities-heading h2{font-size:clamp(48px,5.5vw,82px);line-height:1.05}
.motion-toggle{background:transparent;border:1px solid #738072;color:var(--ink);font-size:14px;padding:12px 18px;border-radius:30px;cursor:pointer;white-space:nowrap}
.screen-gallery{overflow-x:auto;scrollbar-width:none;padding:20px var(--gutter) 35px;outline-offset:-4px;overscroll-behavior-x:contain}
.screen-gallery::-webkit-scrollbar{display:none}.screen-gallery:focus-visible{outline:2px solid #2968a8}
.gallery-track{display:flex;gap:75px;width:max-content;padding-right:var(--gutter)}
.gallery-card{width:243px}.gallery-card .device{width:243px;height:522px}.gallery-card .device-inner{transform:scale(.9)}
.gallery-card:nth-child(even){padding-top:50px}.gallery-card figcaption{font-size:16px;text-align:center;margin-top:28px;color:#56645b}
.closing{position:relative;isolation:isolate;overflow:hidden;text-align:center;padding:145px 24px;background:#222326;color:#f4f4f5}
.closing>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.09;filter:grayscale(1);mix-blend-mode:screen;z-index:-1}
.closing h2{font-size:clamp(66px,8.6vw,132px);line-height:1;letter-spacing:-.07em}.closing p{font-size:17px;margin-top:38px}.closing .store-status{display:inline-flex;width:240px;max-width:100%;height:auto;padding:0;border:0;border-radius:0;margin-top:22px;line-height:0}.closing .app-store-badge img{display:block;width:100%;height:auto}
.story-site .site-footer{padding-top:40px;padding-bottom:40px}.story-site .site-footer p,.story-site .site-footer nav{font-size:14px}
@media(min-width:1650px){.phone-sticky{margin-left:29%}.scene-art{left:-3%;width:70%}.scene-copy{margin-left:62%}}
@media(max-width:1000px){.opening{padding-top:55px}.phone-sticky{margin-left:17%}.scene-art{width:88%;left:-22%}.scene-copy{margin-left:59%;width:36%;padding-right:20px}.scene-copy>p:not(.chapter):not(.journal-note){font-size:16px}.scene h2{font-size:47px}.journal-note{margin-left:8px;font-size:28px}.about-columns{gap:40px}}
@media(max-width:650px){
.story-site .site-header{padding-top:22px;padding-bottom:22px}.story-site .site-header nav a:first-child{display:none}.story-site .site-header nav{font-size:12px}.story-site .availability{padding:11px 16px}
.opening{padding:42px 20px 20px}.opening h1{font-size:clamp(47px,11.8vw,74px);letter-spacing:-.065em}.opening>p{font-size:15px;max-width:260px;margin:23px auto 0}
.day-story{padding-bottom:60px}.scene{min-height:970px;align-items:flex-start}.scene-art{top:0;left:-22%;width:140%;height:590px}.scene-art img{mask-image:radial-gradient(ellipse 64% 62% at 50% 47%,black 50%,transparent 89%)}
.phone-track{inset:155px 0 170px}.phone-sticky{width:162px;height:348px;margin-left:7%;top:calc(50svh - 174px)}.phone-sticky .device{width:162px;height:348px}.phone-sticky .device-inner{transform:scale(.6)}
.scene-copy{margin-left:53%;width:43%;padding:335px 13px 70px 0}.chapter{font-size:12px;margin-bottom:20px}.scene h2{font-size:clamp(29px,6.5vw,40px);line-height:1.09;margin-bottom:20px}.scene-copy>p:not(.chapter):not(.journal-note){font-size:14px;line-height:1.75}.journal-note{font-size:22px;margin:35px 0 0;line-height:1.3}.journal-note:after{width:65px;margin-left:15px}
.about-story{padding:85px 26px}.about-story h2{font-size:46px}.about-columns{grid-template-columns:1fr;gap:24px;margin-top:36px}.about-columns p{font-size:16px}.hours-reminder{font-size:14px;margin-top:30px}
.cities-section{padding:80px 0 55px}.cities-heading{align-items:start;flex-direction:column;margin-bottom:30px}.cities-heading h2{font-size:48px}.motion-toggle{font-size:12px;padding:10px 14px}.gallery-track{gap:35px}.gallery-card{width:216px}.gallery-card .device{width:216px;height:464px}.gallery-card .device-inner{transform:scale(.8)}.gallery-card figcaption{font-size:14px}
.closing{padding:95px 20px}.closing h2{font-size:67px}.story-site .site-footer{gap:24px}.story-site .site-footer nav{font-size:14px}
}
@media(max-width:360px){.phone-sticky{margin-left:5%;width:145px;height:313px}.phone-sticky .device-inner{transform:scale(.537)}.scene-copy{margin-left:54%;width:43%;padding-right:5px}.scene h2{font-size:28px}.scene-copy>p:not(.chapter):not(.journal-note){font-size:13px}.about-story h2{font-size:40px}.opening h1{font-size:43px}}
@media(prefers-reduced-motion:reduce){.scene-art{transform:none!important;will-change:auto}.app-panels,.app-tabs i,.app-weather{transition:none!important}}

@font-face{font-family:Fairward Journal;src:url('assets/Caveat.ttf') format('truetype');font-weight:400 700;font-display:swap}
.opening{padding:74px 24px 70px}
.opening h1{font-size:clamp(72px,10.8vw,180px);line-height:1.04;letter-spacing:-.032em}
.opening>p{font-size:20px;margin-top:32px}
.day-story{padding-bottom:0}
.scene{display:block;min-height:0;padding:0 0 150px}
.scene-art{position:relative;left:-20%;top:auto;width:140%;height:auto;margin:0 0 -38vw;mix-blend-mode:multiply}
.scene-art img{display:block;width:100%;height:auto;object-fit:contain;mask-image:linear-gradient(to bottom,transparent 0%,#0008 12%,black 27%,black 63%,#0008 80%,transparent 100%)}
.chapter-phone,.capture-device{position:relative;z-index:3;overflow:hidden;background:#252b27;border:2px solid #8c948e;padding:6px;border-radius:46px;box-shadow:0 30px 60px -15px #1b29203d,0 65px 110px -25px #1b29202b,0 5px 12px #1b29201a}
.chapter-phone{width:clamp(270px,27vw,350px);margin:0 auto}
.chapter-phone img,.capture-device img{display:block;width:100%;height:auto;border-radius:37px}
.scene-copy{width:calc(100% - 48px);max-width:780px;margin:90px auto 0;padding:0;text-align:center}
.scene .chapter{font-size:15px;margin-bottom:24px}
.scene h2{font-size:clamp(48px,6vw,86px);line-height:1.05;letter-spacing:-.035em;margin-bottom:30px}
.scene-copy>p:not(.chapter):not(.journal-note){font-size:21px;line-height:1.8;max-width:700px;margin-left:auto;margin-right:auto}
.journal-note{font-family:Fairward Journal,cursive;font-weight:400;font-size:clamp(37px,4.1vw,58px);letter-spacing:0;line-height:1.1;margin:48px auto 0;transform:rotate(-5deg);width:fit-content}
.scene-eat .journal-note{transform:rotate(3deg)}
.scene-do .journal-note{transform:rotate(-3deg)}
.journal-note:after{margin:15px auto 0;width:130px;border-width:1.5px}
.capture-device{width:100%;border-radius:37px;padding:5px;box-shadow:0 30px 60px -18px #1b292039}
.capture-device img{border-radius:29px}
.gallery-card{width:260px}.gallery-track{gap:90px}
@media(max-width:650px){
 .opening{padding:55px 18px 45px}.opening h1{font-size:clamp(44px,12.2vw,78px);letter-spacing:-.025em;line-height:1.1}.opening>p{font-size:16px;max-width:290px;margin-top:26px}
 .scene{padding-bottom:100px}.scene-art{left:-50%;width:200%;height:auto;margin-bottom:-54vw}.scene-art img{height:auto}
 .chapter-phone{width:clamp(244px,66vw,290px);border-radius:38px;padding:5px}.chapter-phone img{border-radius:30px}
 .scene-copy{width:calc(100% - 44px);max-width:560px;margin:65px auto 0;padding:0}.scene .chapter{font-size:13px}.scene h2{font-size:45px;margin-bottom:24px}.scene-copy>p:not(.chapter):not(.journal-note){font-size:17px;line-height:1.75}
 .journal-note{font-size:38px;margin:38px auto 0;line-height:1.15}.journal-note:after{width:105px;margin:12px auto 0}
 .gallery-card{width:230px}.gallery-track{gap:45px}
}
/* All three compositions retain their full aspect ratio and broad edge fades. */
.story-site .site-footer p,.story-site .site-footer nav{font-size:10.5px}
.story-site .site-footer .brand{font-size:17.25px}
.story-site .site-footer nav a{display:inline-flex;align-items:center;min-height:32px}

/* Six responsive type roles, shared by every live text element on this page. */
.story-site{
 --type-hero:clamp(64.8px,9.72vw,162px);
 --type-heading:clamp(48px,5.5vw,82px);
 --type-closing:clamp(46.2px,6.02vw,92.4px);
 --type-note:clamp(37px,4.1vw,58px);
 --type-body:20px;
 --type-small:15px;
 --display-tracking:-.032em;
 font-size:var(--type-body);
}
.story-site .opening{padding-top:calc(74px + 15svh)}
.story-site .opening h1{font-size:var(--type-hero)}
.story-site .opening h1,.story-site .closing h2{letter-spacing:var(--display-tracking);font-kerning:normal;font-optical-sizing:auto}
.story-site .scene h2,.story-site .about-story h2,.story-site .cities-heading h2{font-size:var(--type-heading)}
.story-site .closing h2{font-size:var(--type-closing);position:relative;z-index:1}
.story-site .journal-note{font-size:var(--type-note)}
.story-site .opening>p,.story-site .scene-copy>p:not(.chapter):not(.journal-note),.story-site .about-columns p,.story-site .closing p,.story-site .brand{font-size:var(--type-body)}
.story-site .chapter,.story-site .scene .chapter,.story-site .hours-reminder,.story-site .gallery-card figcaption,.story-site .motion-toggle,.story-site .store-status,.story-site .site-header nav,.story-site .site-footer p,.story-site .site-footer nav,.story-site .site-footer .brand,.story-site .skip{font-size:var(--type-small)}
.story-site .site-header nav a:first-child{display:inline-flex}
.story-site .site-header nav a{display:inline-flex;align-items:center;min-height:44px}
.scroll-cue{position:fixed;z-index:10;left:calc(50% - 26px);bottom:28px;width:52px;height:52px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:0 6px 28px #17271e20}
.scroll-cue{opacity:1;visibility:visible;transition:opacity .55s ease,visibility 0s}
.scroll-cue.is-dismissed{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .55s ease,visibility 0s .55s}
.scroll-cue:focus-visible{outline:2px solid #2968a8;outline-offset:5px}
.closing-watermark{position:absolute;left:50%;bottom:25px;transform:translateX(-50%) scale(1.7);transform-origin:center bottom;font-size:var(--type-hero);font-weight:600;letter-spacing:-.055em;line-height:1;white-space:nowrap;pointer-events:none;opacity:.24;color:transparent;background:url('assets/sky.png') center/cover;background-clip:text;-webkit-background-clip:text;mask-image:linear-gradient(transparent,black 25%,black 70%,transparent)}
.closing>p,.closing>.store-status{position:relative;z-index:1}
@media(max-width:650px){
 .story-site{--type-hero:clamp(39.6px,10.98vw,70.2px);--type-heading:42px;--type-closing:46.9px;--type-note:38px;--type-body:17px;--type-small:14px;--display-tracking:-.025em}
 .story-site .opening{padding-top:calc(55px + 15svh)}
 .story-site .site-header{flex-wrap:wrap;gap:16px}
 .story-site .site-header nav{gap:16px;flex-wrap:wrap}
 .story-site .availability{padding:8px 14px}
 .closing-watermark{transform:translateX(-50%) scale(1.7);bottom:30px}
}
/* Shared heading tracking, aligned editorial block, and restrained depth. */
.story-site .about-story h2,.story-site .cities-heading h2{letter-spacing:var(--display-tracking);font-kerning:normal;font-optical-sizing:auto;text-align:left}
.day-story{margin-top:-200px}
.scene-see .scene-art img{mask-image:linear-gradient(to bottom,transparent 0%,#0003 16%,#000b 32%,black 46%,black 63%,#0008 80%,transparent 100%)}
.chapter-phone{transform:translate3d(0,var(--phone-drift,0px),0);will-change:transform}
html:has(.story-site){overflow-x:clip}
.story-site{overflow-x:clip}
.story-site .about-story{position:relative;min-height:760px;padding-left:var(--gutter);padding-right:var(--gutter);display:grid;grid-template-columns:minmax(0,2fr) minmax(250px,1fr);gap:40px;align-items:center}
.about-content{min-width:0;text-align:left}
.about-columns{gap:32px;margin-top:40px}
.about-phone{position:absolute;width:clamp(270px,27vw,350px);right:-24px;top:-80px;transform:translate3d(0,var(--aboutPhone-drift,0px),0);will-change:transform;z-index:1}
.about-phone .capture-device{padding:6px;border-radius:46px;box-shadow:0 30px 65px -20px #0006}

.closing>img{opacity:.34;filter:grayscale(.4) contrast(1.35)}
.scene-copy{margin-top:-12px}
@media(max-width:800px){.story-site .about-story{grid-template-columns:1fr;min-height:0}.about-phone{position:relative;width:clamp(270px,27vw,350px);right:calc(-1 * var(--gutter) - 22px);top:auto;margin:24px 0 0 auto;transform:translate3d(0,var(--aboutPhone-drift,0px),0)}.about-columns{grid-template-columns:1fr;gap:24px}}
@media(max-width:650px){.day-story{margin-top:-100px}.about-phone{width:clamp(244px,66vw,290px)}.about-phone .capture-device{padding:5px;border-radius:38px}.about-phone .capture-device img{border-radius:30px}}
@media(min-width:651px){.about-phone .capture-device img{border-radius:37px}}
@media(max-width:650px){
 .story-site .site-header{flex-wrap:nowrap;gap:12px}
 .story-site .site-header nav{flex-wrap:nowrap;margin-left:auto}
 .story-site .site-header nav a:not(.availability){display:none}
 .story-site .site-header .brand,.story-site .availability{white-space:nowrap}
}
.hero-break-mobile{display:none}
/* The canvas revealed by rubber-band scrolling follows the nearest page edge. */
html:has(.story-site){background:var(--page-edge-color,var(--paper))}
body.story-site{background:var(--paper)}
@media(max-width:650px){
 .story-site{min-height:100svh;--type-hero:clamp(48px,15.3vw,88px)}
 .story-site>.site-header,.story-site>main{background:var(--paper)}
 .story-site .opening h1{line-height:1.02}
 .hero-break-mobile{display:initial}
 .hero-break-desktop{display:none}
 .story-site .about-phone{display:none}
 .story-site .site-footer{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
}
@media(prefers-reduced-motion:reduce){.chapter-phone{transform:none!important;will-change:auto}.scene-copy{margin-top:28px}.scroll-cue,.scroll-cue.is-dismissed{transition:none}.about-phone{--aboutPhone-drift:0px!important;will-change:auto}}