; the map keeps its hero-sized crop and the opaque page covers the rest. */ .stage .map,.stage .wash{bottom:auto;height:1100px;min-height:0} .nav a{transition:background-color 160ms ease,border-color 160ms ease,color 160ms ease} .nav a:focus-visible{background:#fff;border-color:var(--line);color:var(--ink)} /* Hero: original headline left, wide rounded scene card right. */ .hero{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center} .hero .intro{align-self:start} .scene-card{position:relative;justify-self:end;width:100%;max-width:760px;background:rgba(249,251,247,.92);border:1px solid #fff;border-radius:30px;box-shadow:0 22px 70px #244e4826,0 3px 10px #244e4810;padding:12px 12px 14px} .scene-slides{display:grid} .scene{grid-area:1/1;margin:0;display:flex;flex-direction:column;background:#f9fbf7;border-radius:22px} .scene-art{overflow:hidden;border-radius:22px;aspect-ratio:3/2;background:var(--sage)} .scene-art img{display:block;width:100%;height:100%;object-fit:cover} .scene figcaption{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:6px;align-items:baseline;padding:18px 12px 4px} .scene-mode{grid-row:1/span 3;align-self:start;font-size:10px;font-weight:650;letter-spacing:1.6px;text-transform:uppercase;color:var(--deep);padding:5px 10px;border:1px solid var(--line);border-radius:30px;margin-top:2px} .scene figcaption strong{font-family:Georgia,serif;font-weight:400;font-size:22px;letter-spacing:-.4px;line-height:1.2} .scene-line{font-size:14px;line-height:1.55;color:var(--muted);max-width:52ch} .scene figcaption .x-link{justify-self:start;font-size:13px;margin-top:2px} /* Without JS: first scene shows; a scene picked by fragment replaces it. */ .scene-card:not(.is-ready) .scene:not(:first-child){visibility:hidden} .scene-card:not(.is-ready) .scene-slides:has(.scene:not(:first-child):target) .scene:first-child{visibility:hidden} .scene-card:not(.is-ready) .scene:target{visibility:visible} /* With JS: the incoming scene fades in above the outgoing one, which holds until the fade completes. */ .scene-card.is-ready .scene{opacity:1;visibility:hidden;z-index:0;transition:visibility 0s linear 600ms} .scene-card.is-ready .scene.is-active{visibility:visible;z-index:1;animation:scene-in 600ms var(--ease-out) both} .scene-card.is-ready .scene.is-active .scene-art img{animation:scene-drift 1400ms var(--ease-scene) both} .scene-card.is-ready .scene.is-active figcaption>*{animation:scene-note 600ms var(--ease-out) both} .scene-card.is-quiet .scene.is-active,.scene-card.is-quiet .scene.is-active .scene-art img,.scene-card.is-quiet .scene.is-active figcaption>*{animation:none} @keyframes scene-in{from{opacity:0}} @keyframes scene-drift{from{transform:translate3d(calc(var(--dir,1) * 16px),0,0) scale(1.045)}to{transform:scale(1.015)}} @keyframes scene-note{from{transform:translate3d(calc(var(--dir,1) * 8px),0,0)}} /* Individual journey buttons, with no enclosing tray. */ .scene-modes{display:flex;gap:8px;align-items:center} .mode{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:1px solid #fff;border-radius:30px;font-size:13px;font-weight:550;color:var(--muted);background:#f9faf5eb;box-shadow:0 2px 8px #244e4814;transition:background-color 200ms var(--ease-out),color 200ms ease,box-shadow 200ms var(--ease-out),transform 140ms var(--ease-out)} .mode[aria-current=true]{background:#fff;color:var(--ink);box-shadow:0 1px 2px #244e4826,0 4px 12px #244e4812} .mode:active{transform:scale(.97) translateY(1px);box-shadow:none} .scene-note{font-size:10px;color:var(--muted);text-align:center;margin:14px 10px 2px} @media(hover:hover) and (pointer:fine){.mode:hover{color:var(--ink)}.mode[aria-current=false]:hover{background:#f4f6f0}} /* Mode tags carry the carousel's pill onto every page image. */ .x-fig{position:relative} .mode-tag{position:absolute;top:16px;left:16px;z-index:1;font-size:10px;font-weight:650;letter-spacing:1.6px;text-transform:uppercase;color:var(--deep);background:#f9faf5e6;border:1px solid #fff;border-radius:30px;padding:6px 11px;box-shadow:0 2px 8px #244e4814} /* The Willow Bend sample sheet, moved intact to the band right after the intro. */ .sample-band{--sample-map:url("assets/willow-bend-map.webp");padding:72px 5%;background-color:var(--sage);background-image:linear-gradient(90deg,#f9faf5d6 0%,#f9faf5bd 38%,#f9faf533 68%,#f9faf51a 100%),var(--sample-map);background-size:cover;background-position:center;border-top:1px solid #d5dfd4} /* Keep the painted fallback without JS (or without scripting-query support). With scripting, only the near-viewport observer makes the map URL eligible. */ @media(scripting:enabled){.sample-band:not(.map-ready){--sample-map:none}} .sample-band .sample-copy p:not(.eyebrow){color:var(--ink)} .sample-split{display:grid;grid-template-columns:minmax(0,1fr) 450px;gap:48px;align-items:center} .sample-copy h2{font-size:clamp(32px,3.4vw,46px);line-height:1.08;letter-spacing:-2px;font-weight:500;margin:18px 0 16px;max-width:14ch} .sample-copy h2 em{font-family:Georgia,serif;font-weight:400;color:var(--deep)} .sample-copy p:not(.eyebrow){color:var(--muted);line-height:1.65;font-size:16px;margin:0 0 14px;max-width:52ch} .sample-copy .x-lead{font-size:18px} .sample-copy .eyebrow{margin:0} .sample-band .sheet{scroll-margin:24px} .stories button{transition:background-color 200ms var(--ease-out),color 200ms ease,transform 140ms var(--ease-out)} /* Daybook pages: alternate the editorial bands between paper and sage. */ .page>.x:nth-of-type(even),.page>.sample-band~.x:nth-of-type(odd){background:var(--sage)} .page>.sample-band~.x:nth-of-type(even){background:var(--paper)} .page>.x:nth-of-type(even) :is(.x-story,.x-tile),.page>.sample-band~.x:nth-of-type(odd) :is(.x-story,.x-tile){background:#f9fbf7} /* Scene-to-page continuity: the active home scene and each sub-page image share a name. */ @media(prefers-reduced-motion:no-preference){@view-transition{navigation:auto}} .scene-card.is-ready .scene.is-active[data-scene=walk] img,.scene-card:not(.is-ready) .scene:first-child img,.x-head~.page .x-fig[data-scene=walk] img{view-transition-name:walk-scene} .scene-card.is-ready .scene.is-active[data-scene=train] img,.x-head~.page .x-fig[data-scene=train] img{view-transition-name:train-scene} .scene-card.is-ready .scene.is-active[data-scene=bus] img,.x-head~.page .x-fig[data-scene=bus] img{view-transition-name:bus-scene} .scene-card.is-ready .scene.is-active[data-scene=drive] img,.x-head~.page .x-fig[data-scene=drive] img{view-transition-name:drive-scene} ::view-transition-group(*){animation-duration:420ms;animation-timing-function:var(--ease-scene)} ::view-transition-old(root),::view-transition-new(root){animation-duration:180ms} @media(max-width:1100px){.hero{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}.scene figcaption strong{font-size:20px}} @media(max-width:1000px){.sample-split{grid-template-columns:minmax(0,1fr) minmax(0,420px)}} @media(max-width:850px){.stage .map,.stage .wash{height:1500px;min-height:0}.hero{grid-template-columns:1fr}.scene-card{justify-self:center;max-width:640px}.sample-band{padding:54px 6%}.sample-split{grid-template-columns:1fr;gap:32px}.sample-band .sheet{max-width:470px;width:100%;justify-self:center}} @media(max-width:850px){.sample-band{background-image:linear-gradient(180deg,#f9faf5e6 0%,#f9faf5c7 360px,#f9faf536 680px),var(--sample-map);background-position:58% center}} @media(max-width:520px){.scene-card{padding:8px 8px 12px;border-radius:25px}.scene,.scene-art{border-radius:18px}.scene figcaption{grid-template-columns:1fr;padding:14px 8px 2px}.scene-mode{grid-row:auto;justify-self:start}.scene figcaption strong{font-size:19px}.scene-modes{width:100%}.mode{flex:1;justify-content:center;padding:0 6px}.mode-tag{top:12px;left:12px}.sample-copy h2{letter-spacing:-1.5px}} @media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}} /* Keep the illustrated opening ahead of supporting copy in reading and focus order. */ @media(min-width:851px){.hero{grid-template-areas:"heading scenes" "details scenes";grid-template-rows:auto 1fr;row-gap:0}.hero>.intro{grid-area:heading}.hero>.scene-card{grid-area:scenes}.hero>.intro-details{grid-area:details;align-self:start}.intro-details .lede{margin-top:0}} @media(max-width:850px){.hero{row-gap:24px}.hero>.intro{padding-top:0}.hero>.intro h1{margin-bottom:0}.hero>.intro-details .lede{margin-top:0}.hero>.map-caption{justify-self:start;margin:0}.scene-card{grid-row:2}} /* ---- Fullscreen layer (home only): the scene carousel is the first screen. Daybook rules above stay; these scope to .fs-header and .fs-hero. ---- */ /* Brand and navigation share one continuous paper surface over the art. */ .fs-header{position:absolute;top:22px;left:5%;right:5%;z-index:4;padding:6px;background:#f9faf5e8;border:1px solid #fff;border-radius:34px;box-shadow:0 8px 28px #244e481f,0 1px 3px #244e4814} .fs-header .brand,.fs-header .nav{background:transparent;border:0;border-radius:30px;box-shadow:none} .fs-header .brand{padding:5px 18px 5px 5px} .fs-header .nav{padding:4px;gap:2px;color:var(--ink)} .fs-header .nav a{padding:8px 13px} /* The hero is exactly one screen tall (and may grow, never clip). The art layer sits behind everything. */ .fs-hero{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;gap:22px;padding:120px 5% 36px;background:var(--sage)} .fs-hero .fs-copy{width:min(540px,46%)} .fs-hero .intro{position:relative;z-index:2;padding:0;align-self:auto} .fs-hero h1{font-size:clamp(36px,4.8vw,78px);font-size:clamp(36px,min(4.8vw,7.4svh),78px);line-height:1.02;letter-spacing:-.05em;margin:16px 0 22px} .fs-hero h1 em{letter-spacing:-.05em} .fs-hero .explore{margin:0;box-shadow:0 10px 30px #244e482e} /* The carousel keeps Daybook's markup; only the picture leaves the flow and fills the hero. */ .fs-hero .scene-card{position:static;max-width:none;background:none;border:0;border-radius:0;box-shadow:none;padding:0} .fs-hero .scene{background:none;border-radius:0} .fs-hero .scene-art{position:absolute;inset:0;border-radius:0;aspect-ratio:auto} .fs-hero .scene-art img{object-position:var(--focus)} .fs-hero .scene figcaption{position:relative;grid-template-columns:auto 1fr;column-gap:12px;padding:0} .fs-hero .scene-mode{grid-row:auto;align-self:center;margin:0;background:#f9faf5} .fs-hero .scene-line,.fs-hero .scene figcaption .x-link{grid-column:1/-1} .fs-hero .scene-line{color:var(--ink)} .fs-hero .scene-note{text-align:left;margin:14px 0 0} /* The semantic button group provides positioning only; each pill has its own surface. */ .fs-hero .scene-modes{position:absolute;right:5%;bottom:30px;z-index:3;padding:0;background:none;border:0;border-radius:0;box-shadow:none} /* Per-scene framing: landscape crops vertically (heads kept clear of the header); portrait crops sideways. */ /* Per-scene framing of the full-bleed art. Landscape screens show the wide master; upright screens show the portrait master (see assets/hero/HERO-ASSETS.md). Cover crops are sideways on phones, so each scene keeps its listener and its transport cues: the Drive scene keeps the mounted phone and both hands. */ .fs-hero .scene{--focus:100% 55%;--focus-tall:50% 60%} .fs-hero .scene[data-scene=walk]{--focus-tall:76% 60%} .fs-hero .scene[data-scene=train]{--focus-tall:100% 60%;--focus:60% 55%} .fs-hero .scene[data-scene=bus]{--focus-tall:72% 60%} .fs-hero .scene[data-scene=drive]{--focus-tall:44% 60%} .fs-hero .scene[data-scene=kids]{--focus-tall:100% 60%} @media(max-aspect-ratio:6/5){.fs-hero .scene-art img{object-position:var(--focus-tall)}} /* A full-screen picture needs less travel: one small settle per change, ending at rest. */ @keyframes scene-drift{from{transform:translate3d(calc(var(--dir,1) * 10px),0,0) scale(1.03)}} /* Short landscape screens (900 × 500, phones on their side): tighter top, same overlay layout. */ @media(max-height:620px){.fs-header{top:14px;padding:6px}.fs-hero{padding-top:84px;padding-bottom:24px;gap:14px}.fs-hero h1{margin:10px 0 14px}.fs-hero .scene-modes{bottom:20px}.fs-hero .scene-note{margin-top:8px}} @media(max-width:850px) and (max-height:500px){.fs-header{flex-wrap:nowrap;padding:6px}.fs-header .nav{width:auto;flex-wrap:nowrap}.fs-header .nav a{white-space:nowrap}.fs-hero .scene-art img{object-position:var(--focus)}} /* Phones and portrait tablets: the shared header wraps its logo and scrollable nav strip. */ @media(max-width:850px) and (min-height:501px){ .fs-header{top:12px;left:6%;right:6%;padding:6px;gap:4px;border-radius:28px} .fs-header .nav{width:auto;max-width:100%} .fs-header .nav a{padding:7px 11px} .fs-hero{padding:124px 6% calc(18px + env(safe-area-inset-bottom));gap:16px} .fs-hero .fs-copy{width:100%;max-width:560px} .fs-hero h1{font-size:clamp(36px,10.5vw,58px);margin:12px 0 16px} .fs-hero .scene-modes{position:relative;right:auto;bottom:auto;width:100%;margin-top:14px;justify-content:center} .fs-hero .mode{flex:1;min-width:0;padding:0 6px} } @media(max-width:520px) and (min-height:501px){.fs-header .nav{width:100%;padding-right:44px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}.fs-header .nav::-webkit-scrollbar{display:none}.fs-header .nav a{flex:none;white-space:nowrap}.fs-header .brand{font-size:15px}.fs-hero .scene figcaption strong{font-size:19px}.fs-hero .scene-line{font-size:14px}} /* Compact captions preserve the art; a short app explanation follows the hero. */ .fs-hero .scene-note{position:relative;z-index:2} .fs-hero h1,.fs-hero h1 em{letter-spacing:-.035em} .app-explanation{padding:clamp(44px,6vw,80px) 6%;background:var(--paper)} .app-explanation p{max-width:1040px;margin:0 auto;color:var(--deep);font-size:clamp(28px,calc(20px + 2vw),44px);font-weight:500;line-height:1.3;letter-spacing:-.02em;text-wrap:pretty} .fs-hero .scene figcaption .scene-line,.fs-hero .scene figcaption .x-link,.fs-hero .scene-note{display:none} @media(max-width:520px) and (min-height:501px),(max-height:500px){.fs-hero .intro>.eyebrow{display:none}} @media(max-width:520px) and (min-height:501px){ .fs-hero{gap:14px}.fs-hero h1{font-size:32px;margin:0 0 14px} } @media(max-height:500px){ .fs-hero{padding-top:80px;padding-bottom:20px;gap:10px} .fs-hero h1{font-size:clamp(26px,6svh,32px);margin:0 0 10px} .fs-hero .explore{padding:11px 18px;font-size:12px} .fs-hero .scene figcaption strong{font-size:18px} } @media(max-width:850px) and (max-height:500px){.fs-header .nav{min-width:0;overflow-x:auto;scrollbar-width:none}.fs-header .brand{flex-shrink:0}.fs-header .nav a{flex-shrink:0}} /* A bounded wash to white, not a continuous pan. JS owns interruption and removes layer hints. */ .fs-hero{background:#fff} .fs-hero .scene-card.is-ready .scene{transition:none;animation:none} .fs-hero .scene-card.is-ready .scene.is-leaving{visibility:visible;z-index:0} .fs-hero .scene-card.is-ready .scene.is-leaving figcaption{visibility:hidden} .fs-hero .scene-card.is-ready .scene.is-active .scene-art img, .fs-hero .scene-card.is-ready .scene.is-active figcaption>*{animation:none} .scene-transition-wash{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;background:linear-gradient(110deg,#fff0 8%,#fff 40%,#fff 60%,#fff0 92%)} @media(prefers-reduced-motion:reduce){.scene-transition-wash{display:none}} /* Street names: real streets, one list of choices and one feature panel. Without the script every panel stays visible and the choices are fragment links. */ .street-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start} .street-intro .x-lead{max-width:36ch} .street-picks{list-style:none;margin:24px 0 22px;padding:0;display:grid;gap:4px} .street-pick{width:100%;display:flex;align-items:center;gap:14px;text-align:left;background:transparent;border-radius:14px;padding:8px 12px 8px 8px;min-height:64px;transition:background-color 200ms var(--ease-out),color 200ms ease,transform 140ms var(--ease-out)} .street-pick>span{min-width:0} .street-pick img{width:72px;height:48px;flex:none;border-radius:9px;border:1px solid #fff;object-fit:cover;background:var(--sage)} .street-pick strong{display:block;font-size:15px;font-weight:600;line-height:1.25;overflow-wrap:break-word} .street-pick small{display:block;font-size:12px;color:var(--muted);margin-top:3px} .street-pick[aria-pressed=true]{background:#e1efeb;color:#205c62} @media(hover:hover) and (pointer:fine){.street-pick:not([aria-pressed=true]):hover{background:#e5eee6}} .street-stage{display:grid;gap:56px} .street-feature{min-width:0;scroll-margin:24px} .street-feature figure{margin:0} .street-feature .street-place{font-size:11px;font-weight:650;letter-spacing:1.4px;text-transform:uppercase;margin:22px 0 0} .street-feature h3{font-size:28px;letter-spacing:-1px;line-height:1.15;font-weight:550;margin:6px 0 0;overflow-wrap:break-word} .street-feature .street-question{font-family:Georgia,serif;font-style:italic;font-size:19px;line-height:1.4;color:var(--deep);margin:10px 0 0} .street-feature .street-fact{color:var(--ink);margin:10px 0 0;max-width:58ch} .street-feature .street-source{font-size:13px;margin:14px 0 0} /* With the script, the panels share one grid cell: the stage keeps the tallest panel's height, so a new choice never moves the page. */ .street-names.is-ready .street-stage{gap:0} .street-names.is-ready .street-feature{grid-area:1/1} .street-names.is-ready .street-feature:not(.is-active){visibility:hidden} @media(max-width:850px){.street-split{grid-template-columns:1fr;gap:28px}.street-picks{margin:20px 0 16px}.street-feature h3{font-size:25px}} @media(max-width:520px){.street-pick{min-height:58px;gap:12px;padding:6px 10px 6px 6px}.street-pick img{width:60px;height:40px;border-radius:8px}.street-feature .street-place{margin-top:18px}.street-feature .street-question{font-size:17px}} /* Small disclosure copy uses primary ink against the varied paint pigment. */ .fs-hero .scene-note{color:var(--ink)} /* Portrait tablets, including iPad widths above the phone breakpoint: stacked copy and full-width pills. */ @media(min-width:521px) and (max-width:1200px) and (max-aspect-ratio:1/1){ .fs-hero{padding:120px 6% calc(24px + env(safe-area-inset-bottom));gap:16px} .fs-hero .fs-copy{width:100%;max-width:560px} .fs-hero h1{font-size:clamp(40px,5.5vw,52px);margin:12px 0 16px} .fs-hero .scene-modes{position:relative;right:auto;bottom:auto;width:100%;margin-top:14px;justify-content:center} .fs-hero .mode{flex:1;min-width:0;padding:0 6px} } /* Journey icons share the pill's ink; labels remain visible and accessible. */ .mode-icon{width:18px;height:18px;flex:none;pointer-events:none} .fs-hero .mode{gap:7px} .kids-questions{padding-left:20px;font-size:16px;line-height:1.65} .kids-questions li{padding:6px 0} .kids-questions strong{display:block;font-weight:600} @media(max-width:600px){.fs-hero .scene-modes{gap:6px}.fs-hero .mode{flex-direction:column;gap:3px;min-height:56px;padding:6px 4px;font-size:11px;line-height:1.2}.fs-hero .mode-icon{width:17px;height:17px}} @media(min-width:601px) and (max-width:1200px) and (max-height:500px){.fs-hero .scene-modes{width:44%;gap:6px}.fs-hero .mode{flex:1;min-width:0;flex-direction:column;gap:3px;min-height:56px;padding:6px 3px;font-size:11px;line-height:1.2}} /* Bare stacked masthead: the artwork remains exposed behind both rows. */ .route-header{--route-hover:#e9f1ec;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;min-height:0;margin:16px 5% 24px;padding:0;background:none;border:0;border-radius:0;box-shadow:none;color:var(--ink);z-index:4} .route-header.fs-header{position:absolute;top:15px;left:5%;right:5%;margin:0;padding:0;background:none;border-radius:0;box-shadow:none} .route-header .brand{position:static;display:flex;align-items:center;flex:none;gap:12px;width:max-content;max-width:100%;padding:0;border:0;border-radius:0;background:none;box-shadow:none;font-size:23px;line-height:1.1;letter-spacing:-.03em;white-space:nowrap} .route-header .brand img{width:40px;height:40px;border-radius:10px} .route-header .route-nav{position:relative;display:flex;flex:none;align-items:center;justify-content:center;flex-wrap:nowrap;gap:48px;width:auto;max-width:100%;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:inherit;font-size:15px;font-weight:500} .route-header .route-nav a{position:relative;display:flex;align-items:center;justify-content:center;flex:none;min-height:44px;padding:0 2px;border:0;border-radius:0;background:none;white-space:nowrap;line-height:1.35} .route-header .route-nav a+a::before{content:"";position:absolute;left:-26px;top:calc(50% - 3px);width:6px;height:6px;background:#d79809;border-radius:50%;pointer-events:none} .route-header .route-nav a[aria-current=page]{background:none;color:inherit;font-weight:650;text-decoration:underline;text-underline-offset:5px} .route-header a:focus-visible,.route-menu summary:focus-visible{outline:3px solid currentColor;outline-offset:3px} .route-menu{display:none;position:static;align-self:center;margin:0} .route-menu summary{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:8px 12px;border-radius:0;background:none;list-style:none;cursor:pointer;font-size:14px;font-weight:550;line-height:1.3} .route-menu summary::-webkit-details-marker{display:none} .route-menu summary::after{content:"";width:7px;height:7px;border-right:1.5px solid;border-bottom:1.5px solid;transform:translateY(-2px) rotate(45deg)} .route-menu[open] summary::after{transform:translateY(2px) rotate(225deg)} /* Only the expanded disclosure needs a reading surface; the masthead stays bare. */ .route-links{position:absolute;left:50%;top:calc(100% + 8px);translate:-50% 0;width:min(360px,100%);max-height:calc(100svh - 116px);overflow-y:auto;overscroll-behavior:contain;padding:10px;background:var(--paper);color:var(--ink);border:0;border-radius:12px;box-shadow:0 12px 32px #233d3d26;scrollbar-width:thin;z-index:5} .route-header .route-links{-webkit-mask-image:none;mask-image:none} .route-links a{display:flex;align-items:center;min-height:48px;padding:10px 14px;border-radius:6px;font-size:16px;line-height:1.45} .route-links a[aria-current=page]{background:var(--route-hover);font-weight:650;color:var(--deep)} .route-links a:focus-visible{background:var(--route-hover);outline-offset:-3px} @media(hover:hover) and (pointer:fine){.route-header .route-nav a:hover,.route-menu summary:hover{text-decoration:underline;text-underline-offset:5px}.route-links a:hover{background:var(--route-hover);color:var(--deep)}} /* The Bus window rim reaches farther into the central sky. Keep its last link in clear sky. */ body:has(.fs-hero .scene[data-scene=bus].is-active) .route-header .route-nav{gap:24px;font-size:14px} body:has(.fs-hero .scene[data-scene=bus].is-active) .route-header .route-nav a+a::before{left:-14px;width:5px;height:5px;top:calc(50% - 2.5px)} @media(max-width:1279px){.route-header{margin:12px 6% 18px}.route-header.fs-header{top:12px;left:6%;right:6%}.route-header .route-nav{display:none}.route-menu{display:block}.route-header .brand{font-size:20px;gap:9px}.route-header .brand img{width:32px;height:32px}} @media(aspect-ratio < 8/5){.route-header .route-nav{display:none}.route-header .route-menu{display:block}} @media(max-height:500px){.route-header.fs-header{top:8px}.route-header .brand{font-size:20px}.route-header .brand img{width:28px;height:28px}.route-header .route-links{max-height:calc(100svh - 88px)}} /* Platform availability: restrained badges on the same paper-and-ink palette. */ .install-actions{min-width:0} .install-platforms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:12px;width:min(324px,100%)} .platform-badge{display:flex;align-items:center;justify-content:flex-start;gap:12px;min-height:56px;min-width:0;width:100%;padding:10px 14px;border-radius:10px;text-align:left;line-height:1.15;flex:none;transition:none} .platform-badge svg{width:27px;height:30px;flex:none} .platform-badge small{font-size:11px;font-weight:450;letter-spacing:0;white-space:nowrap;margin:0 0 3px} .platform-badge strong{display:block;font-size:19px;font-weight:600;letter-spacing:-.02em} .platform-apple{background:var(--ink);color:var(--paper)} .platform-android{background:#e6eee7;color:var(--ink)} .platform-badge:disabled{cursor:default;opacity:1} .platform-badge:disabled:active{transform:none} .install-note{font-size:11px;line-height:1.5;color:var(--muted);margin:8px 0 0} .fs-hero .intro .install-actions{margin:0 0 10px} .fs-hero .intro .explore{background:transparent;color:var(--ink);box-shadow:none;border-radius:0;padding:4px 0;min-height:36px;font-size:13px;text-decoration:underline;text-underline-offset:5px} .fs-hero .intro .explore span{margin-left:12px} footer .install-actions{flex:none} @media(max-width:600px){.install-platforms{gap:10px;width:min(282px,100%)}.platform-badge{width:100%;min-height:52px;gap:7px;padding:9px 10px}.platform-badge svg{width:21px;height:28px}.platform-badge strong{font-size:17px}.platform-badge small{font-size:11px}footer .install-actions{width:100%}} @media(max-height:500px){.fs-hero .intro .platform-badge{min-height:44px;padding-top:6px;padding-bottom:6px}.fs-hero .intro .platform-badge svg{height:25px}.fs-hero .intro .platform-badge strong{font-size:16px}.fs-hero .intro .install-note{margin-top:4px}.fs-hero .intro .install-actions{margin-bottom:4px}.fs-hero .intro .explore{min-height:30px}} /* Secondary editorial destination keeps the selected five-stop header unchanged. */ .footer-end{display:flex;flex-direction:column;gap:10px;flex:none;color:var(--muted)}.footer-end a{color:var(--deep);font-size:12px;text-decoration:underline;text-underline-offset:4px} /* Stacking inside the hero: figures stay unstacked so the full-screen art sits below the copy. */ .fs-hero{--ink:#183232} /* Figures stay unstacked so their full-screen art sits below the copy's paint. */ .fs-hero .scene-card.is-ready .scene,.fs-hero .scene-card.is-ready .scene.is-leaving{z-index:auto} .fs-hero .scene-art{z-index:-1} .fs-hero .scene figcaption{z-index:2} .fs-hero .install-note{color:var(--ink)} .fs-hero .install-note,.fs-hero .scene-note{font-size:12px;line-height:1.5} .fs-hero .scene-mode{font-size:11px} .fs-hero h1 em{color:#19545c} .fs-hero figcaption .x-link{color:var(--ink)} /* Warm accent: the golden orange of the listener's jacket, used on a few marks and actions. Teal stays the identity. */ .eyebrow>span{background:var(--accent)} .route-nav a[aria-current=page]::after,.route-links a[aria-current=page]::after{background:var(--accent)} .mode[aria-current=true]{border-color:var(--accent)} .mode[aria-current=true] .mode-icon{color:var(--accent-deep)} .x-btn:not(.soft){background:var(--accent);color:var(--ink)} .play{background:var(--accent)} .stories button[aria-pressed=true] .number{color:var(--accent-text);font-weight:650} @media(hover:hover) and (pointer:fine){.x-btn:not(.soft):hover{background:var(--accent-press)} .play:hover{background:var(--accent-press)} } .x-btn:not(.soft):focus-visible,.play:focus-visible{outline-color:var(--deep)} /* Base art coordinates and caption surfaces. The final height-fit layer below overrides the former intrinsic skyline sizing, while retaining these focal anchors and proportional caption positions. ---- */ .fs-hero{--ink:#183232;justify-content:flex-start;gap:0;min-height:max(100vh,var(--art-h,0px));min-height:max(100svh,var(--art-h,0px))} .fs-hero .fs-copy{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:0;width:100%;max-width:none} .fs-hero .intro .install-actions{display:contents} /* The art frame. */ .fs-hero .scene{position:absolute;top:0;left:var(--fx);height:100%;width:auto;aspect-ratio:var(--ar);translate:calc(var(--fx) * -1) 0;container-type:size;--cap-ink:var(--ink)} .fs-hero .scene-art picture{display:block;width:100%;height:100%} .fs-hero .scene-art img{width:100%;height:100%;object-fit:cover;object-position:50% 50%} /* The caption: an opaque scene pill above a short title, on one quiet surface of the picture. */ .fs-hero .scene figcaption{position:absolute;left:var(--cap-x);bottom:var(--cap-y);width:var(--cap-w);max-width:none;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:0} .fs-hero .scene figcaption .scene-mode{display:inline-block;align-self:flex-start;margin:0} .fs-hero .scene figcaption strong{display:block;max-width:100%;font-size:max(16px,var(--cap-f) * 1cqw);line-height:1.2;text-wrap:balance;color:var(--cap-ink)} /* Scene pills are opaque paper, so the art behind them does not change their contrast. */ .fs-hero .mode{background:#f9faf5;border-color:#fff} .fs-hero .mode[aria-current=true]{background:#fff} /* Upright screens: portrait masters. Below 1024 px one intro layout; sizes change continuously. The binding scene is Bus: its tree reaches u .25 at the height of the note and the Explore link, and its window frame starts at u .68. So the intro starts at x = .62W - .37F (plus a margin) and ends at x = .62W + .06F (minus a margin). Use the minimum frame for the right edge; intrinsic copy sizing below keeps the explicit headline lines and action row intact when a tablet needs a taller painted frame. */ @media(aspect-ratio < 6/5){ .fs-hero{--ar:1122/1402;--art-h:124.96vw;--sky:.37;--frame:calc(.8003 * max(100svh,124.96vw));--intro-x:max(6vw,64vw - .37 * var(--frame));--intro-r:calc(60vw + .06 * var(--frame));padding:84px 6vw calc(18px + env(safe-area-inset-bottom))} .fs-hero .intro{display:block;margin-left:calc(var(--intro-x) - 6vw);width:calc(var(--intro-r) - var(--intro-x));max-width:none} .fs-hero h1{font-size:clamp(36px,7.92px + 7.212vw,91.2px);margin:6px 0 4px} .fs-hero .intro>.eyebrow+h1{margin-top:0} .fs-hero .intro .install-note,.fs-hero .intro .explore{display:block;width:max-content;margin:6px 0 0;white-space:nowrap} .fs-hero .intro .explore{min-height:30px} .fs-hero .scene{--cap-f:2.7} .fs-hero .scene-modes{position:relative;right:auto;bottom:auto;width:100%;margin-top:14px;justify-content:center} .fs-hero .mode{flex:1;min-width:0;padding:0 6px} /* Caption surfaces. A second surface applies once the visible share r = W / F reaches the stated value; the container query compares the frame width with the viewport width (F <= 100vw / r). */ /* Walk: paper ink on the listener's dark trousers; from r >= .875 dark ink on the pale path at the left (the reference composition). */ .fs-hero .scene[data-scene=walk]{--fx:74%;--cap-x:58%;--cap-y:13%;--cap-w:16%;--cap-ink:#f9faf5} @container (width <= 114vw){.fs-hero .scene[data-scene=walk] figcaption{--cap-x:13%;--cap-y:9%}.fs-hero .scene[data-scene=walk] figcaption strong{color:var(--ink)}} /* Train and Bus: paper ink on the listener's dark trousers. */ .fs-hero .scene[data-scene=train]{--fx:62%;--cap-x:51%;--cap-y:11%;--cap-w:20%;--cap-ink:#f9faf5} .fs-hero .scene[data-scene=bus]{--fx:62%;--cap-x:60%;--cap-y:13%;--cap-w:20%;--cap-ink:#f9faf5} /* Drive: paper ink on the rear-facing charcoal driver seat, clear of the hand and mounted phone. */ .fs-hero .scene[data-scene=drive]{--fx:54%;--cap-x:60%;--cap-y:12%;--cap-w:14%;--cap-ink:#f9faf5} /* Kids: paper ink on the adult's dark trousers; from r >= .65 dark ink on the pale path left of the pair. */ .fs-hero .scene[data-scene=kids]{--fx:60%;--cap-x:51%;--cap-y:15%;--cap-w:12%;--cap-ink:#f9faf5} @container (width <= 153vw){.fs-hero .scene[data-scene=kids] figcaption{--cap-x:24%;--cap-y:9%;--cap-w:20%}.fs-hero .scene[data-scene=kids] figcaption strong{color:var(--ink)}} } /* From 600 px the note and the Explore link share one line, and the eyebrow appears; the two changes almost cancel, so the hero height stays continuous. The eyebrow starts below the hanging leaves of the Walk and Kids canopies. The full header (from 1000 px) is taller. */ @media(aspect-ratio < 6/5) and (max-width:599px){.fs-hero .intro>.eyebrow{display:none}} @media(aspect-ratio < 6/5) and (max-width:430px){ /* Keep both labels inside their surfaces without making the intro's height depend on its width. */ .fs-hero .intro .install-platforms{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;max-width:258px} .fs-hero .intro .platform-badge{gap:6px;padding:8px;min-height:52px} .fs-hero .intro .platform-badge svg{width:18px} } @media(aspect-ratio < 6/5) and (max-width:360px){.fs-hero .intro .platform-badge svg{display:none}} @media(aspect-ratio < 6/5) and (min-width:600px){.fs-hero .intro .install-note,.fs-hero .intro .explore{display:inline-block;vertical-align:baseline;margin-right:20px}} @media(aspect-ratio < 6/5) and (min-width:600px){.fs-hero{padding-top:max(98px,.1 * max(100svh,124.96vw))}} @media(aspect-ratio < 6/5) and (min-width:1000px){.fs-hero{padding-top:max(118px,.1 * max(100svh,124.96vw))}} /* From 1024 px the note and the Explore link stand right of the badges, clear of the Bus tree, so the intro can start at 16 % as in the reference. The window frame only moves right when the picture is cropped (r < 1), so the column end (16 % + 512 px <= 66 %) holds for every height. */ @media(aspect-ratio < 6/5) and (min-width:1024px){ .fs-hero .intro{display:grid;grid-template-columns:max-content max-content;column-gap:20px;align-items:start;margin-left:10vw;width:auto} .fs-hero .intro>.eyebrow,.fs-hero h1{grid-column:1/-1} .fs-hero .intro .install-platforms{grid-column:1;grid-row:3/5} .fs-hero .intro .install-note{grid-column:2;grid-row:3;display:block;margin:4px 0 0} .fs-hero .intro .explore{grid-column:2;grid-row:4;justify-self:start;margin:4px 0 0} } /* Landscape screens: wide masters. The sky is a band across the top, so the intro is two columns: the headline left; the badges (one above the other), the note and the Explore link right. Left limit: the Kids canopy reaches u .2 at the height of the eyebrow and the headline (x = .52W - .32F, plus a margin). Right limit: the listeners' heads (Kids at r near 1, Walk and Bus on 4:3) start at about x = .55W, and the narrow action column keeps the intro left of that. */ @media(aspect-ratio >= 6/5){ .fs-hero{--ar:1672/941;--art-h:56.28vw;--sky:.44;--frame0:calc(1.7768 * max(100svh,56.28vw));padding:max(110px,17svh,9.6vw) 5vw 30px} .fs-hero .intro{display:grid;grid-template-columns:max-content 172px;column-gap:clamp(20px,2vw,40px);align-items:start;max-width:none;margin-left:max(4vw,48vw - .32 * var(--frame0))} /* Reclaim vertical space around the larger heading so the scene controls still fit one screen. */ .fs-hero .intro>.eyebrow{grid-column:1/-1;margin:0} .fs-hero h1{grid-column:1;grid-row:2/5;font-size:clamp(40px,min(5.5vw,max(7.75svh,4.3625vw)),97.5px);margin:6px 0 0} .fs-hero .intro .install-platforms{grid-column:2;grid-row:2;grid-template-columns:1fr;gap:6px;width:100%;margin-top:10px} .fs-hero .intro .platform-badge{min-height:44px;padding-top:5px;padding-bottom:5px} .fs-hero .intro .platform-badge strong{font-size:17px} .fs-hero .intro .install-note{grid-column:2;grid-row:3;margin:8px 0 0} .fs-hero .intro .explore{grid-column:2;grid-row:4;justify-self:start;margin:4px 0 0;min-height:26px;white-space:nowrap} .fs-hero .scene{--cap-f:1.6} .fs-hero .scene-modes{position:absolute;right:5%;bottom:20px;width:auto;margin:0;gap:6px} .fs-hero .mode{flex:none;min-height:44px;padding:0 12px;gap:6px;font-size:13px;flex-direction:row} /* Caption surfaces: Walk paper ink on the trousers; Train dark ink on the pale table; Bus dark ink on the pale bus wall; Drive paper ink on dark passenger-seat/lower-dash surfaces; Kids paper ink on the adult's dark trousers. */ .fs-hero .scene[data-scene=walk]{--fx:70%;--cap-x:70%;--cap-y:12%;--cap-w:12%;--cap-ink:#f9faf5} .fs-hero .scene[data-scene=train]{--fx:50%;--cap-x:21%;--cap-y:4%;--cap-w:16%} .fs-hero .scene[data-scene=bus]{--fx:65%;--cap-x:37%;--cap-y:4%;--cap-w:14%} .fs-hero .scene[data-scene=drive]{--fx:50%;--cap-x:20%;--cap-y:11%;--cap-w:13%;--cap-ink:#f9faf5} .fs-hero .scene[data-scene=kids]{--fx:52%;--cap-x:62%;--cap-y:25%;--cap-w:16%;--cap-ink:#f9faf5} } @media(aspect-ratio >= 6/5) and (min-width:1000px){.fs-hero{padding-top:max(126px,17svh,9.6vw)}} /* Short heroes (phones on their side, low windows; the full-width picture is under 733 px tall): compact copy with the badges side by side, so the hero does not grow and narrow the crop. The two layouts give the same hero height (733 px) at the switch. The hero is at least 474 px tall (frame 842 px), the size at which the 16 px caption titles fit their surfaces. */ @media(aspect-ratio >= 6/5) and (max-height:732px) and (max-width:1302px){ .fs-hero{--art-h:max(56.28vw,474px);--frame0:calc(1.7768 * max(100svh,56.28vw,474px));padding:max(76px,.17 * max(100svh,56.28vw,474px)) 4vw 12px 5vw} .fs-hero .fs-copy{gap:10px} .fs-hero .intro{grid-template-columns:max-content minmax(0,282px);column-gap:24px} .fs-hero .intro>.eyebrow{display:none} .fs-hero h1{font-size:clamp(30px,min(4.5vw,7.5svh),55px);margin:0} .fs-hero .intro .install-platforms{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:3px} .fs-hero .intro .platform-badge{min-height:44px;gap:8px;padding:6px 10px} .fs-hero .intro .platform-badge strong{font-size:16px} .fs-hero .intro .install-note{margin-top:4px} .fs-hero .intro .explore{margin-top:2px} /* The pills take two rows at the bottom right, so the Walk caption moves to the calm river band at the left (dark ink). */ .fs-hero .scene-modes{display:grid;grid-template-columns:repeat(3,auto);justify-content:end;bottom:12px;right:4%;gap:6px} .fs-hero .mode{min-height:40px;padding:0 10px;font-size:12px;flex-direction:row;gap:6px} .fs-hero .scene[data-scene=walk]{--cap-x:28%;--cap-y:44%;--cap-ink:var(--ink)} } @media(aspect-ratio >= 6/5) and (max-height:732px) and (min-width:1000px) and (max-width:1302px){.fs-hero{padding-top:max(100px,.17 * max(100svh,56.28vw,474px))}} @media(prefers-reduced-motion:reduce){.fs-hero .scene-art img{animation:none}} /* On narrow portrait crops the Train and Bus roof frames cross a wide wordmark. Stack the existing mark above its name, placing the text in the clear central sky. This clearance also keeps the intro below the taller, still bare masthead. */ @media(aspect-ratio < 6/5){ .route-header .brand{flex-direction:column;gap:8px;font-size:18px} .route-header .brand img{width:32px;height:32px} .route-header .route-nav{display:none} .route-header .route-menu{display:block} .route-header.fs-header{top:12px} .fs-hero{padding-top:max(154px,.1 * max(100svh,124.96vw))} } /* Use the same compact brand stack across every portrait scene. */ @media(aspect-ratio < 6/5) and (max-width:360px){ .route-header .brand{font-size:16px;gap:8px} .fs-hero{padding-top:166px} } /* Home scene choices belong directly below the brand. Site links stay in Menu beside the brand so phones keep every scene in plain sight. */ .route-header.fs-header .scene-modes{position:static;display:flex;flex:none;justify-content:center;gap:6px;width:max-content;max-width:100%;margin:24px 0 0;padding:0;background:none;border:0;border-radius:0;box-shadow:none} .route-header.fs-header .mode{flex:none;gap:6px;min-height:44px;padding:0 12px;font-size:13px;line-height:1.2;background:var(--paper)} .route-header.fs-header .mode[aria-current=true]{background:#fff} .route-header.fs-header .route-nav{display:none} .route-header.fs-header .route-menu{display:block;position:absolute;top:0;right:0} /* An individual Menu control stays readable where a window rim crosses the header. */ .route-header.fs-header .route-menu summary{background:var(--paper);border-radius:30px} .route-header.fs-header .route-links{left:auto;right:0;top:calc(100% + 8px);translate:none;width:min(360px,88vw);max-height:calc(100svh - 100px)} /* The measured masthead keeps the enlarged intro below all visible header rows. The existing fit calculation then keeps the copy above the painted skyline. */ .fs-hero{--masthead-clearance:calc(var(--masthead-bottom,107px) + 18px)} @media(aspect-ratio < 6/5){.fs-hero{padding-top:max(154px,.1 * max(100svh,124.96vw),var(--masthead-clearance))}} @media(aspect-ratio < 6/5) and (max-width:360px){.fs-hero{padding-top:max(166px,var(--masthead-clearance))}} @media(max-width:600px){ .route-header.fs-header .scene-modes{width:100%;margin-top:20px} .route-header.fs-header .mode{flex:1;min-width:0;flex-direction:column;gap:3px;min-height:44px;padding:4px;font-size:11px} .route-header.fs-header .mode-icon{width:17px;height:17px} .fs-hero{--masthead-clearance:calc(var(--masthead-bottom,144px) + 10px)} } @media(aspect-ratio >= 6/5){.fs-hero{padding-top:max(110px,17svh,9.6vw,var(--masthead-clearance))}} @media(aspect-ratio >= 6/5) and (min-width:1000px){.fs-hero{padding-top:max(126px,17svh,9.6vw,var(--masthead-clearance))}} @media(aspect-ratio >= 6/5) and (max-height:732px) and (max-width:1302px){.fs-hero{padding-top:max(76px,.17 * max(100svh,56.28vw,474px),var(--masthead-clearance))}} @media(aspect-ratio >= 6/5) and (max-height:732px) and (min-width:1000px) and (max-width:1302px){.fs-hero{padding-top:max(100px,.17 * max(100svh,56.28vw,474px),var(--masthead-clearance))}} /* With the choices above the intro, leave the short Walk caption its own patch of sky. */ @media(aspect-ratio >= 6/5) and (max-height:732px) and (max-width:1302px){.fs-hero .scene[data-scene=walk]{--cap-x:9%}} /* Keep Menu in the same clear central sky as the brand on wide crops. */ @media(aspect-ratio >= 6/5) and (min-width:601px){.route-header.fs-header .route-menu{left:calc(50% + 115px);right:auto;top:-6px}} /* A clipped art frame must not scroll sideways when a caption receives focus. */ @supports(overflow:clip){.fs-hero{overflow:clip}} /* Bus starts at .62W - .02F. Limit its width to the visible frame, with 12px of breathing room; keep the caption on the same dark painted trousers. */ @media(aspect-ratio < 6/5){.fs-hero .scene[data-scene=bus] figcaption{width:min(20%,calc(38vw + 2cqw - 12px))}} /* Drive's lower windshield horizon also needs clearance in a short landscape. Grow the painted frame so the Explore link stays above the village roofs. */ @media(aspect-ratio >= 6/5) and (max-height:500px){.fs-hero{--sky:.38}} /* A wide picture can extend past either edge of a small landscape window. Keep Walk's caption inside that crop, on its clear patch of sky. */ @media(aspect-ratio >= 6/5) and (max-height:732px) and (max-width:1302px){.fs-hero .scene[data-scene=walk] figcaption{left:max(9%,calc(70% - 70vw + 16px))}} /* The shared skyline fit can widen a tablet frame too. Keep Train on its pale table, retaining the original anchor whenever it is visible. */ @media(aspect-ratio >= 6/5){ .fs-hero .scene[data-scene=train] figcaption{left:max(21%,calc(50% - 50vw + 16px))} } /* The taller wide Drive frame can crop its caption on desktop too. Keep the original painted position whenever it fits, otherwise inset it by 16px. */ @media(aspect-ratio >= 6/5){.fs-hero .scene[data-scene=drive] figcaption{left:max(20%,calc(50% - 50vw + 16px))}} /* Leave breathing room below the brand and the taller compact Menu control before the shared chapter row. */ @media(aspect-ratio >= 6/5){.route-header.fs-header .scene-modes{margin-top:36px}} /* The smallest landscape crop otherwise puts the action note across the listener's hair. Grow the existing art frame to keep all copy in painted sky. */ @media(aspect-ratio >= 6/5) and (max-height:500px) and (max-width:650px){ .fs-hero{--sky:.3} .fs-hero .scene[data-scene=walk] figcaption{bottom:55%} } /* The taller intro can make a compact landscape frame much wider than the viewport. Bound every caption on both sides, retaining its picture anchor when it fits. The frame starts at fx * (viewport - frame), so --cap-offset converts viewport edges back into picture coordinates. */ @media(aspect-ratio >= 6/5) and (max-height:732px) and (max-width:1302px){ .fs-hero .scene{--cap-offset:calc(50% - 50vw)} .fs-hero .scene[data-scene=walk]{--cap-offset:calc(70% - 70vw)} .fs-hero .scene[data-scene=bus]{--cap-offset:calc(65% - 65vw)} /* Match Kids' two-line title instead of reserving unused space to its right. */ .fs-hero .scene[data-scene=kids]{--cap-offset:calc(52% - 52vw);--cap-w:10%} .fs-hero .scene figcaption{--cap-size:min(var(--cap-w),calc(100vw - 32px));width:var(--cap-size);left:clamp(calc(var(--cap-offset) + 16px),var(--cap-x),calc(var(--cap-offset) + 100vw - 16px - var(--cap-size)))} /* Kids' right edge is now .2F + .52W. When it no longer fits, use dark ink on the open lower path; sliding white type left would put it on the pale bag and scenery instead of the adult's dark trousers. */ @container (width > calc((48vw - 16px) / .2)){ .fs-hero .scene[data-scene=kids] figcaption{--cap-x:calc(52% - 22vw);bottom:4%;--cap-ink:var(--ink)} } } /* Four small backdrop surfaces soften the existing art, strongest at the top. Overlapping masks feather each blur out before the natural hero sky. There is no tint or copied artwork; unsupported browsers keep the crisp original. */ .route-header.fs-header{isolation:isolate} .header-blur{display:none;pointer-events:none} @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) and ((mask-image:linear-gradient(#000,transparent)) or (-webkit-mask-image:linear-gradient(#000,transparent))){ .fs-header .header-blur{display:block;position:absolute;z-index:-1;top:-40px;bottom:-10px;left:50%;width:calc(100% / .9);translate:-50% 0} /* Half-size planes cover the same bounds at 2x, avoiding wide-surface sampling seams in Chromium. Their radii scale too: 2, 4, 8 and 16 CSS pixels. */ .header-blur span{position:absolute;top:0;left:0;width:50%;height:50%;transform:scale(2);transform-origin:top left;-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));-webkit-mask-image:var(--feather);mask-image:var(--feather)} .header-blur span:nth-child(1){--blur:1px;--feather:linear-gradient(#000 65%,rgba(0,0,0,.85) 75%,rgba(0,0,0,.5) 85%,rgba(0,0,0,.15) 95%,transparent)} .header-blur span:nth-child(2){--blur:2px;--feather:linear-gradient(#000 45%,rgba(0,0,0,.85) 56%,rgba(0,0,0,.5) 67%,rgba(0,0,0,.15) 78%,transparent 90%)} .header-blur span:nth-child(3){--blur:4px;--feather:linear-gradient(#000 20%,rgba(0,0,0,.85) 32%,rgba(0,0,0,.5) 45%,rgba(0,0,0,.15) 58%,transparent 70%)} .header-blur span:nth-child(4){--blur:8px;--feather:linear-gradient(#000,rgba(0,0,0,.85) 11%,rgba(0,0,0,.5) 22%,rgba(0,0,0,.15) 34%,transparent 45%)} } /* Keep generous hit areas; the chapters read as an index, with one ink underline. */ .route-header.fs-header .mode{position:relative;background:none;border:0;border-radius:0;box-shadow:none;color:var(--ink);transition:color 160ms ease} .route-header.fs-header .mode[aria-current=true]{background:none;box-shadow:none;color:var(--ink);font-weight:650} .route-header.fs-header .mode[aria-current=true] span{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px} .route-header.fs-header .mode:active{transform:none;box-shadow:none} .route-header.fs-header .mode:focus-visible{outline:2px solid var(--deep);outline-offset:2px} .route-header.fs-header .route-menu summary{width:44px;height:44px;padding:10px;background:none;border-radius:0} .route-header.fs-header .route-menu summary::after{content:none} .menu-icon{width:24px;height:24px;overflow:visible} .menu-icon path{transform-origin:12px 12px} .route-header.fs-header .route-menu[open] .menu-icon path:first-child{transform:translateY(6px) rotate(45deg);transform-origin:12px 6px} .route-header.fs-header .route-menu[open] .menu-icon path:nth-child(2){opacity:0} .route-header.fs-header .route-menu[open] .menu-icon path:last-child{transform:translateY(-6px) rotate(-45deg);transform-origin:12px 18px} @media(hover:hover) and (pointer:fine){.route-header.fs-header .mode:hover{color:var(--deep)}.route-header.fs-header .mode:hover span{text-decoration:underline;text-underline-offset:6px}} /* Give the platform row breathing room below the enlarged headline. The existing measured fit keeps this extra space above each painted skyline. */ .fs-hero .intro .install-platforms{margin-top:24px} @media(aspect-ratio >= 6/5){ .fs-hero .intro{grid-template-columns:max-content max-content;column-gap:20px;justify-content:start} .fs-hero h1{grid-column:1/-1;grid-row:2} .fs-hero .intro .install-platforms{grid-column:1/-1;grid-row:3;grid-template-columns:repeat(2,minmax(0,1fr));width:min(324px,100%);margin-top:24px;gap:12px} .fs-hero .intro .install-note{grid-column:1;grid-row:4;margin-top:8px} .fs-hero .intro .explore{grid-column:2;grid-row:4;margin-top:4px} } /* Use the lowest painted skyline for every scene at this viewport. The intro, masthead and fitted hero height must never depend on the selected artwork. */ @media(aspect-ratio >= 6/5) and (min-height:733px){.fs-hero{--sky:.38}} @media(aspect-ratio < 6/5) and (min-width:1024px){.fs-hero .intro .install-note{margin-top:28px}} /* The first grid track contains the whole intro, including its masthead space. Intrinsic fr sizing expands the second track in the skyline ratio, so the painted frame has its final height on the first layout, with or without JS. */ .fs-hero{ --masthead-bottom:135px; --intro-top:max(110px,17svh,9.6vw,var(--masthead-clearance)); --intro-side:5vw; display:grid;grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(max-content,37fr) 63fr; min-height:max(100svh,var(--art-h,0px));padding:0;gap:0; } .fs-hero .fs-copy{display:block;grid-row:1;padding:var(--intro-top) var(--intro-side) 0} @media(max-width:1279px){.fs-hero{--masthead-bottom:124px}} @media(aspect-ratio >= 6/5) and (min-width:1000px){.fs-hero{--intro-top:max(126px,17svh,9.6vw,var(--masthead-clearance))}} @media(aspect-ratio >= 6/5) and (max-height:732px) and (max-width:1302px){ .fs-hero{--intro-top:max(76px,.17 * max(100svh,56.28vw,474px),var(--masthead-clearance))} .fs-hero .fs-copy{padding-right:4vw} } @media(aspect-ratio >= 6/5) and (max-height:732px) and (min-width:1000px) and (max-width:1302px){.fs-hero{--intro-top:max(100px,.17 * max(100svh,56.28vw,474px),var(--masthead-clearance))}} @media(aspect-ratio < 6/5){ .fs-hero{--masthead-bottom:140px;--intro-side:6vw;--intro-top:max(154px,.1 * max(100svh,124.96vw),var(--masthead-clearance))} } @media(max-width:600px){.fs-hero{--masthead-bottom:136px}} @media(aspect-ratio < 6/5) and (max-width:430px){.fs-hero .intro{min-width:min(258px,88vw)}} @media(aspect-ratio < 6/5) and (max-width:360px){.fs-hero{--intro-top:max(166px,var(--masthead-clearance))}} @media(aspect-ratio >= 6/5){.fs-hero{grid-template-rows:minmax(max-content,44fr) 56fr}} @media(aspect-ratio >= 6/5) and (min-height:733px){.fs-hero{grid-template-rows:minmax(max-content,38fr) 62fr}} @media(aspect-ratio >= 6/5) and (max-height:500px){.fs-hero{grid-template-rows:minmax(max-content,38fr) 62fr}} @media(aspect-ratio >= 6/5) and (max-height:500px) and (max-width:650px){.fs-hero{grid-template-rows:minmax(max-content,30fr) 70fr}} @media(aspect-ratio >= 6/5) and (max-height:500px){.fs-hero{--masthead-bottom:116px}} /* Mid-size portrait copy needs its intrinsic three-line headline and unbroken action row before any script runs. Align their right edge inside the minimum painted frame: a taller actual frame only adds safe space to that side. Phones retain their stacked actions; >=1024px retains its separate grid. */ @media(aspect-ratio < 6/5) and (min-width:431px) and (max-width:1023px){ .fs-hero .fs-copy{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding-right:calc(100vw - var(--intro-r))} .fs-hero .intro{justify-self:end;margin-left:0;width:max-content;min-width:calc(var(--intro-r) - var(--intro-x));white-space:nowrap} } /* Full-bleed framing. One continuous illustration remains behind the intro and masthead. The shared skyline reserve is smaller than the former 38/62 wide split; compact action rows avoid enlarging the art just for two notes. Every scene keeps the same hero geometry and its painted caption anchors. */ @media(max-width:1279px){.fs-header .header-blur{width:calc(100% / .88)}} .fs-hero{grid-template-rows:minmax(max-content,40fr) 60fr} @media(aspect-ratio >= 6/5){ .fs-hero{--intro-top:var(--masthead-clearance)} .fs-hero .intro{grid-template-columns:max-content max-content max-content;column-gap:20px} .fs-hero .intro .install-platforms{grid-column:1/3;grid-row:3} .fs-hero .intro .install-note{grid-column:3;grid-row:3;margin-top:24px} .fs-hero .intro .explore{grid-column:3;grid-row:3;margin-top:44px} } @media(aspect-ratio < 6/5){ .fs-hero{grid-template-rows:minmax(max-content,39fr) 61fr} } /* Choices now live above the intro, freeing the dark trousers for Walk's compact caption. Bound its right edge even on very narrow landscape crops. */ @media(aspect-ratio >= 6/5) and (max-height:500px) and (max-width:650px){.fs-hero .scene[data-scene=walk] figcaption{left:70%;bottom:8%;width:min(12%,calc(30vw - 16px));--cap-ink:#f9faf5}} /* The animated sweep intentionally travels beyond its decorative surface. */ .scene-transition-frame{position:absolute;inset:0;z-index:1;overflow:hidden;overflow:clip;pointer-events:none} /* Height-fit framing: source top and bottom stay in the visible intro viewport. Art remains an absolute background. Intrinsic copy can extend the hero on a short screen without enlarging or vertically cropping that background. dvh follows browser chrome; CSS alone establishes the first layout. */ .fs-hero{--view-h:100vh;--view-h:100svh;min-height:var(--view-h);grid-template-rows:auto;--frame:calc(.8002853 * var(--view-h));--frame0:calc(1.7768332 * var(--view-h))} @supports(height:100dvh){.fs-hero{--view-h:100dvh}} .fs-hero .fs-copy{align-self:start;padding-bottom:32px} .fs-hero .scene{height:var(--view-h)} .fs-hero .scene-art{overflow:visible;background:none} .fs-hero .scene-art>picture{position:relative;z-index:1} .fs-hero .scene-card .scene[data-scene] .scene-continuation img{view-transition-name:none} .fs-hero .scene-art>picture img{height:100%;width:auto;max-width:none;position:absolute;left:50%;translate:-50% 0;object-fit:contain} .scene-continuation{display:none} /* The wide source begins as soon as the portrait would leave side space. It is independent of the intro's portrait/landscape layout breakpoint. The decorative copy spreads horizontally only; vertical source coordinates stay aligned with the sharp primary image. No new asset URL is introduced. */ @media(min-aspect-ratio:4/5){.fs-hero{--ar:1672/941}} @media(min-aspect-ratio:1672/941){ .fs-hero .scene-continuation{display:block;position:absolute;inset:0 auto 0 var(--fx);width:100vw;translate:calc(var(--fx) * -1) 0;filter:blur(clamp(24px,2.5vw,64px));transform:scaleX(1.08);pointer-events:none} .fs-hero .scene-continuation picture,.fs-hero .scene-continuation img{width:100%;height:100%;display:block} .fs-hero .scene-continuation img{object-fit:fill;object-position:center} .fs-hero .scene-art>picture{--edge:clamp(1px,calc((100vw - 100%) / 4),100px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--edge),#000 calc(100% - var(--edge)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--edge),#000 calc(100% - var(--edge)),transparent)} } /* Soft glyph shadows keep small copy legible over painted details without introducing a copy surface or blurring the primary illustration. */ .fs-hero h1,.fs-hero .intro .install-note,.fs-hero .intro .explore{text-shadow:0 1px 2px #f9faf5,0 0 8px #f9faf5} @media(aspect-ratio >= 6/5){ .fs-hero .intro{margin-left:max(4vw,calc(45vw - .42 * var(--frame0)));width:max-content;max-width:100%} .fs-hero h1{font-size:clamp(40px,min(5.5vw,7.75svh),97.5px)} } /* Keep the existing large portrait headline in a bounded shared column. */ @media(aspect-ratio < 6/5){ .fs-hero .fs-copy{display:block;padding-right:6vw} .fs-hero .intro{justify-self:start;margin-left:0;width:max-content;max-width:100%;min-width:0;white-space:normal} .fs-hero h1{font-size:clamp(36px,min(7.92px + 7.212vw,6.5svh),91.2px)} .fs-hero .intro .install-note,.fs-hero .intro .explore{white-space:normal} } /* Readable content wins when a very short viewport cannot hold the masthead, headline, actions and captions. The background still fits its viewport; captions follow the copy in normal flow, with ordinary vertical scrolling. */ @media(max-height:600px){ .fs-hero .fs-copy{padding-bottom:24px} .fs-hero .intro{margin-left:0;display:block;width:max-content;max-width:100%} .fs-hero h1{font-size:clamp(30px,4.5vw,44px)} .fs-hero .intro .install-platforms{width:min(324px,100%);margin-top:24px} .fs-hero .intro .install-note,.fs-hero .intro .explore{display:block;margin-top:8px} .fs-hero .scene-card{margin-top:28px;min-height:90px} /* No figure box here: fragment selection must not scroll the page to its lower caption. Children keep the figure's visibility and semantics. */ .fs-hero .scene{display:contents;position:static;width:auto;height:auto;aspect-ratio:auto;translate:none;container-type:normal} .fs-hero .scene-art{position:absolute;height:var(--view-h);width:calc(1.7768332 * var(--view-h));left:50%;right:auto;translate:-50% 0} .fs-hero .scene{--fx:50%} .fs-hero .scene[data-scene] figcaption{grid-area:1/1;position:static;width:auto;max-width:100%;display:flex;gap:8px} .fs-hero .scene figcaption strong{font-size:18px;color:var(--ink)} .fs-hero h1,.fs-hero .intro .install-note,.fs-hero .intro .explore{text-shadow:-1px -1px 0 #f9faf5,1px -1px 0 #f9faf5,-1px 1px 0 #f9faf5,1px 1px 0 #f9faf5,0 0 5px #f9faf5} } /* Side continuation is already soft; bound the header blur to the fitted art. Rasterize the vertical and side fades into ONE alpha mask. Intersecting two CSS gradient masks on this backdrop surface leaks a hard bottom-edge row in Chromium (including without the 2x transform). A single mask retains the same vertical fade and soft sides without that intermediate composite. */ @media(min-aspect-ratio:1672/941){ .fs-header .header-blur{width:calc(1.7768332 * 100svh);width:calc(1.7768332 * 100dvh);max-width:calc(100% / .9)} /* One real 16px visual blur, transparent behind sharp foreground controls. The SVG is only an alpha field, not artwork; side feathers occupy 2.4%. */ .fs-header .header-blur span:first-child{--blur:8px;--feather:url("assets/header-blur-mask.svg");-webkit-mask-image:var(--feather);mask-image:var(--feather);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} .fs-header .header-blur span:not(:first-child){display:none} } /* Phone controls keep the existing scene buttons and their transparent touch targets. Only the small indicator is painted; names remain in aria-label. */ @media(max-width:600px){ .route-header.fs-header .scene-modes{width:max-content;gap:0} .route-header.fs-header .mode{flex:none;width:44px;min-width:44px;height:44px;padding:0;border-radius:50%;background:none;box-shadow:none} .route-header.fs-header .mode .mode-icon,.route-header.fs-header .mode>span{display:none} .route-header.fs-header .mode::before{content:"";box-sizing:border-box;width:8px;height:8px;border:1.5px solid currentColor;border-radius:50%;background:transparent} .route-header.fs-header .mode[aria-current=true]::before{width:10px;height:10px;background:currentColor} .fs-hero .intro .install-platforms{grid-template-columns:minmax(0,1fr);width:min(172px,100%);gap:12px} } /* Selected option 01: The painted horizon. Keep all composition and tokens local. */ .story-footer{--footer-ink:#233d3d;--footer-muted:#526761;--footer-deep:#216c75;--footer-paper:#f9faf5;--footer-line:#c1cec5;--footer-ochre:#eaa63c;display:block;position:relative;isolation:isolate;min-width:0;margin:0;padding:48px 6% 24px;border:0;background:#fcf7e8;color:var(--footer-ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:15px;line-height:1.6} /* Beat secondary page footer typography without changing other components. */ body footer.story-footer{font-size:15px} .story-footer *{min-width:0} .story-footer__inner{max-width:1180px;margin:auto} .story-footer a{color:var(--footer-deep);text-decoration:none;overflow-wrap:anywhere;-webkit-tap-highlight-color:transparent} .story-footer a:focus-visible{outline:3px solid var(--footer-deep);outline-offset:3px} .story-footer p,.story-footer h2{margin:0} .story-footer__top{display:grid;grid-template-columns:.85fr 1.7fr;gap:40px;align-items:start} .story-footer .story-footer__brand{display:inline-flex;align-items:center;gap:11px;min-height:44px;max-width:100%;font-size:20px;font-weight:650;letter-spacing:-.6px;color:var(--footer-ink)} .story-footer__brand img{display:block;width:38px;height:38px;border-radius:11px;flex:none} .story-footer .story-footer__signoff{max-width:27ch;font-size:clamp(34px,4.8vw,54px);font-weight:500;letter-spacing:-1.5px;line-height:1.12;text-wrap:pretty;overflow-wrap:anywhere} .story-footer__signoff em{display:inline;font-family:Georgia,serif;font-weight:400;color:var(--footer-deep)} /* The perimeter fades into cream paper on every side; art is its own fixed-height shelf. */ .story-footer__horizon{position:relative;overflow:hidden;pointer-events:none;height:230px;margin:8px -6.82% 28px;mask-image:linear-gradient(0deg,transparent,black 8%,black 86%,transparent),linear-gradient(90deg,transparent,black 4%,black 96%,transparent);mask-composite:intersect} .story-footer__horizon img{display:block;max-width:100%;width:100%;height:100%;object-fit:cover;object-position:center bottom} .story-footer__grid{display:grid;grid-template-columns:.9fr 1.15fr 1.4fr;gap:40px} .story-footer .story-footer__label{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:650;letter-spacing:1.5px;text-transform:uppercase;line-height:1.5;color:var(--footer-muted);margin:0 0 12px} .story-footer__label>span{width:6px;height:6px;border-radius:50%;background:var(--footer-ochre);flex:none} .story-footer__links{list-style:none;margin:0;padding:0} .story-footer__links a,.story-footer .story-footer__email{display:flex;align-items:center;min-height:44px;min-width:44px;width:fit-content;max-width:100%;font-size:14px;line-height:1.5;padding:8px 0} .story-footer__links a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--footer-deep)} .story-footer__contact{margin-top:24px} .story-footer__contact .story-footer__label{margin-bottom:2px} .story-footer .story-footer__email{font-size:13px;text-decoration:underline;text-decoration-color:var(--footer-line);text-underline-offset:5px} .story-footer__availability{max-width:340px} .story-footer .install-actions{min-width:0;width:100%} .story-footer .install-platforms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:min(324px,100%)} .story-footer .platform-badge{display:flex;align-items:center;justify-content:flex-start;gap:9px;min-height:56px;padding:10px 12px;border:0;border-radius:10px;text-align:left;line-height:1.15;cursor:default;font:inherit;opacity:1} .story-footer .platform-badge svg{width:23px;height:28px;flex:none} .story-footer .platform-badge small{display:block;font-size:10px;font-weight:450;white-space:normal;margin:0 0 3px} .story-footer .platform-badge strong{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em} .story-footer .platform-apple{background:var(--footer-ink);color:var(--footer-paper)} .story-footer .platform-android{background:#e7ece3;color:var(--footer-ink);box-shadow:inset 0 0 0 1px #bcccbf} .story-footer .install-note{font-size:11px;line-height:1.6;color:var(--footer-muted);margin-top:9px} .story-footer__end{padding-top:21px;margin-top:32px;border-top:1px solid var(--footer-line);position:relative} .story-footer__end::before{content:"";position:absolute;left:0;top:-1px;width:38px;height:2px;background:var(--footer-ochre)} .story-footer .story-footer__end p{font-size:12px;line-height:1.8;color:var(--footer-muted);max-width:100ch} @media(hover:hover) and (pointer:fine){.story-footer a:hover{text-decoration:underline;text-underline-offset:5px}} @media(max-width:850px){.story-footer__grid{gap:24px;grid-template-columns:1fr 1fr}.story-footer__grid>.story-footer__availability{grid-column:1/-1;margin-top:4px}.story-footer__horizon{height:190px}.story-footer__top{grid-template-columns:1fr}.story-footer__top .story-footer__signoff{max-width:30ch}} @media(max-width:600px){.story-footer{padding:36px 6% 22px}.story-footer__top{gap:22px}.story-footer .story-footer__signoff{font-size:36px;letter-spacing:-1.3px}.story-footer__horizon{height:155px;margin-top:16px;margin-bottom:22px}.story-footer__horizon img{object-position:68% bottom}.story-footer__grid{gap:26px 18px}.story-footer__end{padding-top:20px}.story-footer .platform-badge{gap:8px;padding:10px}}