/* The story on a phone reads like a film (valley-story.mjs sets data-layout=phone on upright phones and
   phone-landscape on phones held sideways): the valley fills the screen, each chapter's words stand at its foot as a
   caption over a soft shade while the camera rests (at its side when sideways), the camera flies between them with
   the screen clear, a thin rail of chapters runs along the top and the page header steps back to a line over the
   valley. The last chapter's card is a panel for choosing a plot and designing the house. */
.valley-story[data-layout^=phone]{--cap-ink:#fbf8ee;--cap-text:#f4f1e4e6;--cap-muted:#e6e2ccb3;--cap-sage:#d5dab0;--cap-safe:calc(22px + env(safe-area-inset-bottom))}
/* The stage takes the large viewport, so it still covers the screen when the browser's bars slide away; the caption
   keeps above the bars when they show (the difference of the two viewports). */
.valley-story[data-layout^=phone] .valley-story-stage{height:100vh;height:100lvh}
.valley-story[data-layout^=phone] .valley-story-steps{margin-top:-100vh;margin-top:-100lvh;padding:0}
.valley-story[data-layout^=phone] .valley-story-steps:after{display:none}
.valley-story[data-layout^=phone] .valley-story-step{display:block;min-height:118vh;min-height:118lvh;padding:0}
.valley-story[data-layout^=phone] .valley-story-step[data-story-step=plots]{min-height:175vh;min-height:175lvh;padding:0}
.valley-story[data-layout=phone] .valley-story-poster img{object-position:50% 50%}

/* Shade: a light one at the top for the header and the rail, a deep one under the caption (as strong as the caption
   is shown), and a faint vignette. */
.valley-story[data-layout^=phone] .valley-story-stage:after{z-index:4;background:linear-gradient(180deg,#0f1c15a8 0,#0f1c1552 11%,#0f1c1500 24%),radial-gradient(ellipse 150% 85% at 50% 36%,transparent 62%,#0c17111f 100%)}
.valley-story-scrim{display:none}
.valley-story[data-layout^=phone] .valley-story-scrim{display:block;position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.18;will-change:opacity;
  background:linear-gradient(0deg,#0d1912f7 0,#0d1912e0 16%,#0d19129c 33%,#0d191240 48%,#0d191200 62%)}

/* The rail: six thin segments under the header, each filling while its chapter is on. */
.valley-story[data-layout^=phone] .valley-story-rail{z-index:6;top:calc(66px + env(safe-area-inset-top));left:22px;right:22px;display:flex;gap:6px;transform:none}
.valley-story[data-layout^=phone] .valley-story-rail a{position:relative;flex:1;display:block;min-height:24px;padding:0}
.valley-story[data-layout^=phone] .valley-story-rail a:before,.valley-story[data-layout^=phone] .valley-story-rail a:after{content:"";position:absolute;left:0;right:0;top:11px;height:2px;border-radius:1px}
.valley-story[data-layout^=phone] .valley-story-rail a:before{background:#fbf8ee47}
/* The fill scales rather than widens: a scroll frame then needs no layout. */
.valley-story[data-layout^=phone] .valley-story-rail a:after{background:#fbf8ee;box-shadow:0 0 8px #fbf8ee66;transform:scaleX(var(--fill,0));transform-origin:0 50%}
.valley-story[data-layout^=phone] .valley-story-rail a>span,.valley-story[data-layout^=phone] .valley-story-rail b{display:none}
.valley-story[data-layout^=phone] .valley-story-rail a:focus-visible{outline:2px solid #fbf8ee;outline-offset:2px}
.valley-story[data-layout^=phone] .valley-story-skip,.valley-story[data-layout^=phone] .valley-story-credit{display:none}

/* Captions: the chapter cards, moved into the stage. */
.valley-story[data-layout^=phone] .valley-story-captions{position:absolute;inset:0;z-index:5;pointer-events:none}
.valley-story-captions:empty{display:none}
.valley-story[data-layout^=phone] .valley-story-card{position:absolute;left:0;right:0;bottom:0;box-sizing:border-box;width:auto;max-width:600px;margin:0;
  padding:0 24px var(--cap-safe);padding:0 24px calc(var(--cap-safe) + 100lvh - 100svh);
  background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--cap-ink);
  opacity:0;pointer-events:none;transition:none;will-change:opacity,transform}
.valley-story[data-layout^=phone] .valley-story-card.is-shown{pointer-events:auto}
.valley-story[data-layout^=phone] .valley-story-card .home-kicker{margin:0;font-size:10px;line-height:1.5;letter-spacing:.17em;color:var(--cap-muted)}
.valley-story[data-layout^=phone] .valley-story-card .home-kicker>span{margin-right:12px;color:var(--cap-sage)}
.valley-story[data-layout^=phone] .valley-story-card h2,.valley-story[data-layout^=phone] .valley-story-card h3{margin:12px 0 14px;font-size:clamp(35px,10.4vw,46px);line-height:1;letter-spacing:-.035em;color:var(--cap-ink);text-wrap:balance;text-shadow:0 2px 28px #07100b59}
.valley-story[data-layout^=phone] .valley-story-card h2 em,.valley-story[data-layout^=phone] .valley-story-card h3 em{color:var(--cap-sage)}
.valley-story[data-layout^=phone] .valley-story-text{max-width:32em;margin:0;font-size:15px;line-height:1.55;color:var(--cap-text);text-wrap:pretty}
.valley-story[data-layout^=phone] .valley-story-hint{margin:16px 0 0;font-size:12px;color:var(--cap-muted)}
.valley-story[data-layout^=phone] .valley-story-link,.valley-story[data-layout^=phone] button.valley-story-link{min-height:40px;margin-top:10px;gap:10px;font-size:13px;color:var(--cap-ink);border-bottom:1px solid #fbf8ee70}
.valley-story[data-layout^=phone] .valley-story-photo{display:grid;grid-template-columns:78px 1fr;gap:12px;align-items:center;margin:16px 0 0}
.valley-story[data-layout^=phone] .valley-story-photo img{width:78px;height:54px;object-fit:cover;box-shadow:0 0 0 1px #fbf8ee26}
.valley-story[data-layout^=phone] .valley-story-photo figcaption{margin:0;font-size:10.5px;line-height:1.45;color:var(--cap-muted)}
.valley-story[data-layout^=phone] .valley-story-photo figcaption>span{color:var(--cap-sage)}
.valley-story[data-layout^=phone] .valley-story-photo a{text-decoration-color:#fbf8ee55}
.valley-story[data-layout^=phone] .valley-story-facts{gap:10px;margin:16px 0 0;padding-top:12px;border-top:1px solid #fbf8ee2e}
.valley-story[data-layout^=phone] .valley-story-facts dd{font-size:25px;color:var(--cap-ink)}
.valley-story[data-layout^=phone] .valley-story-facts dt{font-size:10px;color:var(--cap-muted)}
.valley-story[data-layout^=phone] .valley-story-card>.valley-story-note{margin-top:6px;font-size:10px;color:#e6e2cc80}
/* The panoramas: the button carries the glowing ball the valley shows, instead of a paragraph explaining it. */
.valley-story[data-layout^=phone] .valley-story-orb-note{display:none}
.valley-story[data-layout^=phone] .valley-story-card:not(.valley-story-choice) [data-story-pano]:before{content:"";flex:none;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fffdf5 0 8%,#fbe9b4 20%,#eabd62 50%,#bb7d2a 80%);box-shadow:0 0 14px 3px #ffd98a88}
.valley-story[data-layout^=phone] .valley-story-card:not(.valley-story-choice) .valley-story-actions{margin-top:18px;gap:8px 22px}
.valley-story[data-layout^=phone] .valley-story-card:not(.valley-story-choice) .valley-story-primary{min-height:48px;padding:0 20px;background:#f3efdf;color:#1f3527}
.valley-story[data-layout^=phone] .valley-story-card:not(.valley-story-choice) .valley-story-primary:hover{background:#fffbef}
.valley-story[data-layout^=phone] .valley-story-card:not(.valley-story-choice) .valley-story-actions .valley-story-link{margin-top:0}

/* The last chapter: a panel over the plan, compact until a plot is chosen, a sheet for the house designer. */
.valley-story[data-layout^=phone] .valley-story-choice{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));bottom:calc(10px + env(safe-area-inset-bottom) + 100lvh - 100svh);width:auto;max-width:560px;padding:18px 18px 14px;
  background:#f6f3eaf5;color:var(--story-ink);border:1px solid #ffffffb3;box-shadow:0 18px 60px #0b150f47;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);overscroll-behavior:contain}
.valley-story[data-layout^=phone] .valley-story-choice .home-kicker{color:#788366}.valley-story[data-layout^=phone] .valley-story-choice .home-kicker>span{color:#9b9d7e}
.valley-story[data-layout^=phone] .valley-story-choice h3{margin:6px 0 8px;font-size:29px;line-height:1.02;color:#243629;text-shadow:none}
.valley-story[data-layout^=phone] .valley-story-choice h3 em{color:#768362}
.valley-story[data-layout^=phone] .valley-story-choice .valley-story-text{font-size:13px;line-height:1.5;color:#56654f}
.valley-story[data-layout^=phone] .valley-story-find{margin-top:12px}
.valley-story[data-layout^=phone] .valley-story-find label{display:none}
.valley-story[data-layout^=phone] .valley-story-find input,.valley-story[data-layout^=phone] .valley-story-find button{height:44px}
.valley-story[data-layout^=phone] .valley-story-choice-facts{margin-top:12px;padding-top:10px;border-top-color:#d3d5c4}
.valley-story[data-layout^=phone] .valley-story-choice-facts{grid-template-columns:.8fr 1.3fr 1fr}
.valley-story[data-layout^=phone] .valley-story-choice-facts dd{font-size:16px;line-height:1.15;color:#2b4133}
.valley-story[data-layout^=phone] .valley-story-choice-facts dt{color:#7b856f}
.valley-story[data-layout^=phone] .valley-story-choice .valley-story-actions{margin-top:12px;gap:6px 18px}
.valley-story[data-layout^=phone] .valley-story-choice .valley-story-link{min-height:40px;margin-top:0;color:#2c4433;border-bottom-color:#2c443355;font-size:12px}
.valley-story[data-layout^=phone] .valley-story-choice .valley-story-primary{min-height:44px;padding:0 18px}
.valley-story[data-layout^=phone] .valley-story-choice [data-choice-contact]:not([hidden]){display:inline-flex}
.valley-story[data-layout^=phone] .valley-story-choice>.valley-story-note{display:none}
/* Once a plot is chosen the card shows it; another is chosen on the plan itself. */
.valley-story[data-layout^=phone] .valley-story-choice:has([data-choice-facts]:not([hidden])) .valley-story-find{display:none}
/* Designing: the panel rises into a sheet over the lower half and scrolls inside; the house keeps the upper half. */
.valley-story[data-layout^=phone][data-designing=true] .valley-story-choice{left:0;right:0;bottom:0;max-width:none;padding:16px 18px calc(14px + env(safe-area-inset-bottom));overflow-y:auto;border-width:1px 0 0;box-shadow:0 -12px 40px #0b150f33}
.valley-story[data-layout^=phone][data-designing=true] .valley-story-choice h3{font-size:25px}

/* The valley's own marks: place names as small quiet tags, the panorama balls a little smaller. */
.valley-story[data-layout^=phone] .valley-story-labels .valley-landmark{padding:5px 9px;font-size:11px;letter-spacing:.01em;background:#f7f4eaeb;border:0;box-shadow:0 4px 18px #0c171133}
.valley-story[data-layout^=phone] .valley-story-labels .valley-landmark:after{height:12px;background:#f7f4eacc}
.valley-story[data-layout^=phone] .valley-story-labels .valley-community-label{min-height:0;padding:5px 9px;font-size:10.5px;line-height:1.3;background:#f4f0e2e6;box-shadow:0 4px 16px #0c17112e}
/* A small tag, a finger-sized target. */
.valley-story[data-layout^=phone] .valley-story-labels .valley-community-label:before{content:"";position:absolute;inset:-9px -4px}
.valley-story[data-layout^=phone] .valley-orb{--ball:28px;width:92px}.valley-story[data-layout^=phone] .valley-orb.is-air{--ball:36px}

/* Status, the button for the 3D valley in the light version, and the way back from a close-up: under the rail. */
.valley-story[data-layout^=phone] .valley-story-status{top:calc(98px + env(safe-area-inset-top));bottom:auto;left:22px;right:auto;max-width:calc(100% - 44px);padding:5px 9px;font-size:10px;background:#0f1c1566;color:#f4f1e4;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.valley-story[data-layout^=phone] .valley-story-load{top:calc(98px + env(safe-area-inset-top));bottom:auto;right:22px;left:auto;transform:none;grid-auto-flow:column;align-items:baseline;gap:8px;padding:9px 13px;font-size:11px;background:#f6f3eaeb;color:#243d2e;box-shadow:0 6px 22px #0b150f40}
.valley-story[data-layout^=phone] .valley-story-overview{top:calc(98px + env(safe-area-inset-top));left:22px;min-height:38px;padding:0 14px;font-size:12px;background:#f6f3eaeb;color:#243d2e;box-shadow:0 6px 22px #0b150f40}
.valley-story[data-layout^=phone] .valley-story-slow{top:calc(98px + env(safe-area-inset-top));left:12px;right:12px}

/* The page header over the valley: transparent, light, with the stage's own shade behind it. */
html.story-immersive .home-redesign .header,html.story-immersive .home-redesign .header.scrolled{background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:#fbf8ee}
@media(prefers-reduced-motion:no-preference){.home-redesign .header{transition:background .45s,color .45s,box-shadow .45s,border-color .45s,padding .45s}}

/* The light version's last chapter on a phone: the plan's still with its plots outlined (story-plan.mjs
   createPosterPlan); a chosen plot comes closer; the designed plot is drawn on a sheet of paper over the picture. */
.valley-story[data-layout^=phone] .valley-story-lite{padding:0;background:#dfe2d7;overflow:hidden}
.sp-poster{position:absolute;inset:0;overflow:hidden;touch-action:pan-y;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sp-poster-frame{position:absolute;transform-origin:0 0;transition:transform .65s cubic-bezier(.22,.7,.2,1),filter .4s}
.sp-poster-frame img,.sp-poster-frame svg{position:absolute;inset:0;display:block;width:100%;height:100%}
.sp-poster-frame svg{fill:none;stroke:none;stroke-width:0;overflow:visible}
.sp-poster-plots{fill:none;stroke:#fbf8ee;stroke-opacity:.3;stroke-width:1;vector-effect:non-scaling-stroke}
.sp-poster-selected{fill:#f5e7bc5c;stroke:#fff3cf;stroke-width:2;vector-effect:non-scaling-stroke}
.sp-poster-badge rect{fill:#243d2e;stroke:#f5e7bc;stroke-width:1;vector-effect:non-scaling-stroke}
.sp-poster-badge text{font:700 14px Manrope,Arial,sans-serif;fill:#fff5dc;text-anchor:middle}
.sp-poster.is-dim .sp-poster-frame{filter:brightness(.5) saturate(.7) blur(2px)}
.sp-paper{position:absolute;z-index:1;left:14px;right:14px;top:calc(100px + env(safe-area-inset-top));bottom:calc(var(--designer-sheet,50vh) + 12px);box-sizing:border-box;padding:10px;background:#f4f1e8f5;box-shadow:0 18px 50px #0b150f55}
.valley-story-lite .sp-paper{width:auto;height:auto}
.sp-paper[hidden]{display:none}
.valley-story[data-layout^=phone] .sp-whole{top:calc(98px + env(safe-area-inset-top));right:auto;bottom:auto;left:22px;min-height:38px;background:#f6f3eaeb;color:#243d2e;box-shadow:0 6px 22px #0b150f40}
@media(prefers-reduced-motion:reduce){.sp-poster-frame{transition:none}}

/* A phone held sideways: the words stand at the left over a shade from that side, the valley's subject to the right
   (the story's lens); the header leaves the short screen to the valley, the rail runs along the top. */
.valley-story[data-layout=phone-landscape] .valley-story-scrim{background:linear-gradient(90deg,#0d1912f2 0,#0d1912cc 24%,#0d191270 44%,#0d191200 62%)}
.valley-story[data-layout=phone-landscape] .valley-story-stage:after{background:linear-gradient(180deg,#0f1c1580 0,#0f1c1500 22%)}
.valley-story[data-layout=phone-landscape] .valley-story-rail{top:calc(10px + env(safe-area-inset-top));left:max(24px,env(safe-area-inset-left));right:max(24px,env(safe-area-inset-right))}
.valley-story[data-layout=phone-landscape] .valley-story-card{top:0;bottom:0;right:auto;display:flex;flex-direction:column;justify-content:center;width:min(46%,430px);max-width:none;padding:44px 0 18px max(28px,env(safe-area-inset-left))}
.valley-story[data-layout=phone-landscape] .valley-story-card h2,.valley-story[data-layout=phone-landscape] .valley-story-card h3{font-size:clamp(28px,4.4vw,38px);margin:8px 0 10px}
.valley-story[data-layout=phone-landscape] .valley-story-text{font-size:13px;line-height:1.5}
.valley-story[data-layout=phone-landscape] .valley-story-photo,.valley-story[data-layout=phone-landscape] .valley-story-card>.valley-story-note{display:none}
.valley-story[data-layout=phone-landscape] .valley-story-facts{margin-top:10px;padding-top:8px}.valley-story[data-layout=phone-landscape] .valley-story-facts dd{font-size:20px}
.valley-story[data-layout=phone-landscape] .valley-story-link,.valley-story[data-layout=phone-landscape] button.valley-story-link{margin-top:6px;min-height:34px}
.valley-story[data-layout=phone-landscape] .valley-story-hint{margin-top:10px}
.valley-story[data-layout=phone-landscape] .valley-story-choice,.valley-story[data-layout=phone-landscape][data-designing=true] .valley-story-choice{top:44px;bottom:10px;left:max(10px,env(safe-area-inset-left));right:auto;display:block;width:min(44%,400px);padding:14px 16px 12px;overflow-y:auto;border-width:1px;box-shadow:0 18px 60px #0b150f47}
.valley-story[data-layout=phone-landscape] .valley-story-choice h3{font-size:24px}
.valley-story[data-layout=phone-landscape] .valley-story-status,.valley-story[data-layout=phone-landscape] .valley-story-overview,.valley-story[data-layout=phone-landscape] .valley-story-slow,.valley-story[data-layout=phone-landscape] .valley-story-load{top:calc(40px + env(safe-area-inset-top))}
.valley-story[data-layout=phone-landscape] .valley-story-overview{left:auto;right:max(24px,env(safe-area-inset-right))}
.valley-story[data-layout=phone-landscape] .valley-story-view{right:max(16px,env(safe-area-inset-right));bottom:16px}
html.story-immersive .home-redesign:has(.valley-story[data-layout=phone-landscape]) .header{transform:translateY(-120%);opacity:0;pointer-events:none}
.valley-story[data-layout=phone-landscape] .valley-story-lite{padding:40px max(16px,env(safe-area-inset-right)) 12px calc(min(44%,400px) + 24px);background:#e8ebdd}
.valley-story[data-layout=phone-landscape] .sp-whole{top:auto;bottom:14px;left:auto;right:max(16px,env(safe-area-inset-right))}