/* Vivenly · vivenly.app · home page only (the night street).
   Shared fonts, tokens, header and footer are in site.css.

   Everything on this page is CSS: the street inks itself in on load, and a pure-CSS
   scroll-driven camera walks it stop by stop. The --cNx/--cNy/--cNs frames below are
   generated by tools/gen_two_houses.py; re-run it and copy the :root values if the
   frames change. Browsers without scroll-driven animations, reduced-motion readers,
   portrait desktop windows and landscape phones get the same street as framed still
   pictures beside the words (the @supports / @media blocks at the end). */

@property --glow{syntax:"<number>";inherits:true;initial-value:.92}

:root{
  --stage:100vh; --stage:100svh;
  --c0x:0.00px;--c0y:0.00px;--c0s:1.0000;--c1x:-798.00px;--c1y:-1890.00px;--c1s:3.6000;--c2x:152.22px;--c2y:442.36px;--c2s:0.3194;--c3x:8.70px;--c3y:170.00px;--c3s:1.0435;--c4x:-1141.67px;--c4y:-1091.67px;--c4s:2.3333;--c5x:-240.00px;--c5y:-15.00px;--c5s:1.0000;--c6x:722.14px;--c6y:405.71px;--c6s:0.4286;--c7x:-2551.67px;--c7y:-703.33px;--c7s:2.1667;--c8x:1277.69px;--c8y:446.92px;--c8s:0.3846;
}
@media (min-width:721px) and (max-aspect-ratio:5/4){:root{--c0x:160px;--c0y:40px;--c0s:.8}}
@media (max-width:720px){:root{--c0x:544.00px;--c0y:480.20px;--c0s:0.3200;--c1x:-1931.25px;--c1y:-5319.38px;--c1s:7.1875;--c2x:164.35px;--c2y:475.13px;--c2s:0.2696;--c3x:-77.42px;--c3y:145.16px;--c3s:1.0968;--c4x:-1435.29px;--c4y:-1424.41px;--c4s:2.7941;--c5x:-212.63px;--c5y:17.42px;--c5s:0.9737;--c6x:499.46px;--c6y:201.19px;--c6s:0.6757;--c7x:-902.40px;--c7y:-50.00px;--c7s:1.1200;--c8x:1314.29px;--c8y:592.14px;--c8s:0.2571;}}
svg{display:block}

/* ---------- line-art vocabulary ----------
   Every stroke can ink itself in. The dash pattern and the animation come from inherited
   custom properties (set on the stage svg), not from an ancestor selector, so the strokes
   inside <use> clones draw too. */
.ln{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--da,none);stroke-dashoffset:var(--do,0);animation:var(--anim,none);animation-delay:var(--d,0s)}
.ln.thin{stroke-width:1.8}
.fillbg{fill:var(--bg2);fill-opacity:var(--fo,1)}
.ln.fillbg{animation:var(--animl,none);animation-delay:var(--d,0s),calc(var(--d,0s) + 1.2s)}
.win{fill:var(--hi);opacity:var(--glow);animation:var(--animf,none);animation-delay:calc(var(--d,0s) + 1.3s)}
.win.porch{opacity:1}
.mull{fill:none;stroke:#2B2447;stroke-width:2;opacity:var(--glow);animation:var(--animf,none);animation-delay:calc(var(--d,0s) + 1.3s)}
.halo{fill:url(#halo);opacity:var(--glow);animation:var(--animf,none);animation-delay:calc(var(--d,0s) + 1.3s)}
.door{fill:var(--door,var(--a));fill-opacity:calc(.55 * var(--fo,1));stroke:var(--ink);stroke-width:2.6;stroke-linejoin:round;stroke-dasharray:var(--da,none);stroke-dashoffset:var(--do,0);animation:var(--animd,none);animation-delay:var(--d,0s),calc(var(--d,0s) + 1.2s)}
.leaf{fill:var(--bg2);fill-opacity:var(--fo,1);stroke:var(--ink);stroke-width:2.6;stroke-dasharray:var(--da,none);stroke-dashoffset:var(--do,0);animation:var(--animl,none);animation-delay:var(--d,0s),calc(var(--d,0s) + 1.2s)}
.knob{fill:var(--hi);animation:var(--animf,none);animation-delay:calc(var(--d,0s) + 1.3s)}
.knobfill{fill:var(--ink);animation:var(--animf,none);animation-delay:calc(var(--d,0s) + 1.3s)}
.pack{fill:var(--ink);fill-opacity:calc(.22 * var(--fo,1))}
.ln.pack{animation:var(--animp,none);animation-delay:var(--d,0s),calc(var(--d,0s) + 1.2s)}
.sp{fill:var(--hi)}
.tuft{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;opacity:.55;stroke-dasharray:var(--da,none);stroke-dashoffset:var(--do,0);animation:var(--anim,none);animation-delay:var(--d,0s)}
.ff{fill:var(--hi);opacity:.9}
.dots{fill:none;stroke:var(--hi);stroke-width:4;stroke-linecap:round;stroke-dasharray:0 15;opacity:.8;animation:var(--animf,none);animation-delay:calc(var(--d,0s) + 1.3s)}
.smoke{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;opacity:.45;stroke-dasharray:4 7;animation:var(--animf,none);animation-delay:calc(var(--d,0s) + 1.4s)}
.cells .exch{stroke:var(--amber);stroke-width:.9}
.cells .today{stroke:#F0EFF8;stroke-width:.7}
.t{font-family:var(--sans);fill:var(--text)}
.t.gold{fill:var(--ink)}
.t.hi{fill:var(--hi)}
.t.dim{fill:var(--dim)}
.t.cap{font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.t.serif{font-family:var(--serif);font-weight:600}

/* ---------- on load: the street draws itself ---------- */
@media (prefers-reduced-motion:no-preference){
  .scene{--da:1 1.1;--do:1.05;--fo:0;
    --anim:draw 1.5s cubic-bezier(.45,0,.2,1) forwards;
    --animd:draw 1.5s cubic-bezier(.45,0,.2,1) forwards,fillin .8s ease forwards;
    --animl:draw 1.5s cubic-bezier(.45,0,.2,1) forwards,fillin2 .8s ease forwards;
    --animp:draw 1.5s cubic-bezier(.45,0,.2,1) forwards,fillin3 .8s ease forwards;
    --animf:fade 1s ease backwards}
  .scene .prop{--fo:1}
  .scene .star{animation:fade 1.6s ease backwards}
  .tw{animation:var(--twk,twinkle 3.2s ease-in-out infinite alternate);animation-delay:var(--t,0s)}
  .scene .ff{animation:fade 1s ease backwards,drift 7s ease-in-out infinite alternate;animation-delay:2.4s,var(--t,0s)}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{from{opacity:0}}
@keyframes fillin{from{fill-opacity:0}to{fill-opacity:.55}}
@keyframes fillin2{from{fill-opacity:0}to{fill-opacity:1}}
@keyframes fillin3{from{fill-opacity:0}to{fill-opacity:.22}}
@keyframes twinkle{from{opacity:.25}to{opacity:1}}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(14px,-18px)}}

/* ---------- on scroll: the camera walks the street ----------
   Eight nested groups. Group k moves from identity to the step that takes frame k-1 to
   frame k, driven by stop k's own view timeline, so the camera arrives exactly as that
   stop's text arrives, whatever height the text turns out to have. No script. */
.story{position:relative;timeline-scope:--s1,--s2,--s3,--s4,--s5,--s6,--s7,--s8}
#monday{view-timeline-name:--s1}#wednesday{view-timeline-name:--s2}#thursday{view-timeline-name:--s3}#friday{view-timeline-name:--s4}
#saturday{view-timeline-name:--s5}#sunday{view-timeline-name:--s6}#keys{view-timeline-name:--s7}#night{view-timeline-name:--s8}
.c0{transform-box:view-box;transform-origin:0 0;transform:translate(var(--c0x),var(--c0y)) scale(var(--c0s))}
.cam{transform-box:view-box;transform-origin:0 0;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.25,1);animation-range:entry 35% entry 100%}
.c1{animation-name:cam1;animation-timeline:--s1}.c2{animation-name:cam2;animation-timeline:--s2}.c3{animation-name:cam3;animation-timeline:--s3}.c4{animation-name:cam4;animation-timeline:--s4}
.c5{animation-name:cam5;animation-timeline:--s5}.c6{animation-name:cam6;animation-timeline:--s6}.c7{animation-name:cam7;animation-timeline:--s7}.c8{animation-name:cam8;animation-timeline:--s8;animation-range:entry 20% entry 100%}
@keyframes cam1{from{transform:translate(0px,0px) scale(1)}to{transform:translate(var(--c1x),var(--c1y)) scale(var(--c1s))}}
@keyframes cam2{from{transform:translate(0px,0px) scale(1)}to{transform:translate(var(--c2x),var(--c2y)) scale(var(--c2s))}}
@keyframes cam3{from{transform:translate(0px,0px) scale(1)}to{transform:translate(var(--c3x),var(--c3y)) scale(var(--c3s))}}
@keyframes cam4{from{transform:translate(0px,0px) scale(1)}to{transform:translate(var(--c4x),var(--c4y)) scale(var(--c4s))}}
@keyframes cam5{from{transform:translate(0px,0px) scale(1)}to{transform:translate(var(--c5x),var(--c5y)) scale(var(--c5s))}}
@keyframes cam6{from{transform:translate(0px,0px) scale(1)}to{transform:translate(var(--c6x),var(--c6y)) scale(var(--c6s))}}
@keyframes cam7{from{transform:translate(0px,0px) scale(1)}to{transform:translate(var(--c7x),var(--c7y)) scale(var(--c7s))}}
@keyframes cam8{from{transform:translate(0px,0px) scale(1)}to{transform:translate(var(--c8x),var(--c8y)) scale(var(--c8s))}}

/* each stop's prop fades up, then its strokes ink in, as the camera arrives */
.prop{opacity:0;animation:reveal ease-out both;animation-range:entry 55% entry 80%}
.prop .ln{animation:draw linear both;animation-range:entry 60% entry 100%}
.p1,.p1 .ln{animation-timeline:--s1}.p2,.p2 .ln{animation-timeline:--s2}.p3,.p3 .ln{animation-timeline:--s3}.p4,.p4 .ln{animation-timeline:--s4}
.p5,.p5 .ln{animation-timeline:--s5}.p6,.p6 .ln{animation-timeline:--s6}.p7,.p7 .ln{animation-timeline:--s7}
/* per-element timing and colour (classes, not style attributes, so a stricter CSP can follow) */
#houseA{--door:var(--a);--base:.1s}#houseB{--door:var(--b);--base:.4s}.b00{--d:var(--base,0s)}.b140{--d:calc(var(--base,0s) + 1.4s)}.b20{--d:calc(var(--base,0s) + 0.2s)}.b25{--d:calc(var(--base,0s) + 0.25s)}.b30{--d:calc(var(--base,0s) + 0.3s)}.b40{--d:calc(var(--base,0s) + 0.4s)}.b50{--d:calc(var(--base,0s) + 0.5s)}.b60{--d:calc(var(--base,0s) + 0.6s)}.b70{--d:calc(var(--base,0s) + 0.7s)}.b75{--d:calc(var(--base,0s) + 0.75s)}.b80{--d:calc(var(--base,0s) + 0.8s)}.b90{--d:calc(var(--base,0s) + 0.9s)}.base03{--base:0.3s}.base05{--base:0.5s}.base06{--base:0.6s}.base07{--base:0.7s}.base09{--base:0.9s}.base10{--base:1s}.base11{--base:1.1s}.d02{--d:0.2s}.d04{--d:0.4s}.d08{--d:0.8s}.d12{--d:1.2s}.dash{--d:.6s;--da:30 24;--do:0}.lit{--glow:1}.t00{--t:0s}.t01{--t:0.1s}.t02{--t:0.2s}.t03{--t:0.3s}.t04{--t:0.4s}.t06{--t:0.6s}.t08{--t:0.8s}.t09{--t:0.9s}.t10{--t:1s}.t11{--t:1.1s}.t12{--t:1.2s}.t14{--t:1.4s}.t15{--t:1.5s}.t16{--t:1.6s}.t17{--t:1.7s}.t18{--t:1.8s}.t19{--t:1.9s}.t21{--t:2.1s}.t22{--t:2.2s}.t23{--t:2.3s}.t24{--t:2.4s}.t26{--t:2.6s}.t27{--t:2.7s}.t28{--t:2.8s}.t30{--t:3s}.t31{--t:3.1s}.t32{--t:3.2s}.t33{--t:3.3s}.t34{--t:3.4s}.t35{--t:3.5s}.t36{--t:3.6s}.t38{--t:3.8s}
#monday .fbv{--v1:1}#wednesday .fbv{--v2:1}#thursday .fbv{--v3:1}#friday .fbv{--v4:1}#saturday .fbv{--v5:1}#sunday .fbv{--v6:1}#keys .fbv{--v7:1}#night .fbv{--v6:1;--wx:1148px;--glow:.3}
@keyframes reveal{from{opacity:0}to{opacity:1}}
@keyframes unreveal{from{opacity:1}to{opacity:0}}
.p2.tag{animation-name:reveal,unreveal;animation-fill-mode:both,forwards;animation-timing-function:ease-out,ease-in;animation-timeline:--s2,--s3;animation-range:entry 55% entry 80%,entry 15% entry 55%}
/* Friday's receipt leaves the lamp post before Sunday's notes arrive */
.p4{animation-name:reveal,unreveal;animation-fill-mode:both,forwards;animation-timing-function:ease-out,ease-in;animation-timeline:--s4,--s6;animation-range:entry 55% entry 80%,entry 15% entry 55%}
/* Wednesday: the backpack crosses, house to house */
.walker{transform-box:view-box;transform-origin:0 0;transform:translate(var(--wx,452px),756px);animation:walk linear both;animation-timeline:--s2;animation-range:entry 100% exit 42%}
@keyframes walk{0%{transform:translate(452px,756px)}25%{transform:translate(626px,753px)}50%{transform:translate(800px,756px)}75%{transform:translate(974px,753px)}100%{transform:translate(1148px,756px)}}
/* Thursday: the handoff flies attic to attic, and is accepted on landing */
.flyer{transform-box:view-box;transform-origin:0 0;transform:translate(400px,520px) rotate(-24deg);animation:fly linear both;animation-timeline:--s3;animation-range:entry 100% exit 30%}
@keyframes fly{0%{transform:translate(400px,520px) rotate(-24deg)}50%{transform:translate(800px,335px) rotate(0deg)}100%{transform:translate(1200px,520px) rotate(24deg)}}
.p3b{opacity:0;animation:reveal ease-out both;animation-timeline:--s3;animation-range:exit 24% exit 32%}
.p3u{animation:unreveal ease-in forwards;animation-timeline:--s4;animation-range:entry 15% entry 55%}
/* Good night: the windows go dark, the lamp stays on */
.scene{animation:dim linear both;animation-timeline:--s8;animation-range:entry 25% entry 100%}
@keyframes dim{from{--glow:.92}to{--glow:.28}}

/* ---------- header over the street ---------- */
header.site--over{position:absolute;inset:0 0 auto 0;z-index:5;border-bottom:0;background:none}

/* ---------- the stage and the words ---------- */
.world{position:sticky;top:0;height:var(--stage);z-index:1;overflow:hidden;background:var(--bg)}
.world .scene{width:100%;height:100%}
.layer{position:relative;z-index:2;margin-top:calc(-1 * var(--stage))}
.hero-copy{height:var(--stage);display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(84px,11vh,150px) 16px 0;text-shadow:0 2px 18px rgba(18,16,31,.9)}
.eyebrow{margin:0 0 20px;font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
h1{margin:0;font-family:var(--serif);font-weight:600;font-size:clamp(34px,4.9vw,64px);line-height:1.04;letter-spacing:-.01em;max-width:900px}
h1 em,.night-h em{font-style:italic;font-weight:400;color:var(--hi)}
.lede{margin:24px auto 0;max-width:640px;font-size:clamp(16px,1.35vw,19px);color:var(--muted)}
.hero__links{margin-top:24px;display:flex;justify-content:center;gap:26px;font-size:15px;font-weight:600}
.hero__links a{text-decoration:underline;text-decoration-color:rgba(212,152,74,.6);text-decoration-thickness:1px;text-underline-offset:5px;color:var(--text);padding:10px 0}
.hero__links a.quiet{color:var(--muted);text-decoration-color:transparent}
.hero-copy .fine{margin:auto 0 0;padding-bottom:28px;font-size:13px;color:var(--dim);max-width:700px}

.stop{height:var(--stage);display:grid;align-items:center;justify-content:end;padding:0 clamp(24px,7vw,110px) 0 0;overflow-x:clip}
.txt{position:relative;width:min(440px,38vw);text-shadow:0 2px 14px rgba(18,16,31,.95)}
.txt::before{content:"";position:absolute;inset:-110px -150px;background:radial-gradient(ellipse at center,rgba(18,16,31,.8) 0%,rgba(18,16,31,.5) 38%,rgba(18,16,31,0) 70%);z-index:-1;pointer-events:none}
.stop .day{margin:0 0 10px;font-family:var(--serif);font-style:italic;font-weight:400;font-size:24px;color:var(--hi)}
.stop h2{margin:0;font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.1vw,40px);line-height:1.14;letter-spacing:-.005em}
.stop p{margin:16px 0 0;color:var(--muted);font-size:16.5px}
.stop p.note{font-size:14px;color:var(--dim)}
.fbv{display:none}
.fbv{--twk:none}

.night{justify-content:center;align-content:start;padding:clamp(56px,10vh,120px) 16px 0;text-align:center}
.night .txt{width:auto;max-width:680px}
.night .txt::before{inset:-60px -60px}
.night h2{font-size:clamp(32px,4vw,54px);line-height:1.1}
.night ul{list-style:none;padding:0;margin:18px auto 0;max-width:640px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;color:var(--muted);font-size:16px}
.night ul li::before{content:"\2726";content:"\2726" / "";color:var(--ink);margin-right:8px;font-size:12px}
.night .ios{margin:20px 0 0;color:var(--text);font-weight:600;font-size:16.5px}
.night .ios small{display:block;font-weight:400;color:var(--muted);margin-top:4px;font-size:14px}

/* ---------- plans ---------- */
.plans{position:relative;z-index:3;background:var(--bg);text-align:center;max-width:none;padding:clamp(56px,8vw,96px) 16px;border-top:1px solid var(--line)}
.plans > *{max-width:720px;margin-left:auto;margin-right:auto}
.plans h2{margin:0 auto;font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.1vw,40px);line-height:1.14}
.plans p{color:var(--muted);margin:16px auto 0;max-width:58ch}
.signs{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:28px}
.signs span{font-family:var(--serif);font-weight:600;font-size:22px;padding:10px 22px;border:1px solid rgba(212,152,74,.4);border-radius:12px;color:var(--text)}


/* ---------- phone: the street fills the screen; the words sit over a dark band at the bottom ---------- */
@media (max-width:720px){
  .site--over nav a{display:none}
  /* a dark band rises from the bottom once the walk starts, so the words read over the drawing */
  .world::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to top,rgba(18,16,31,.97) 0%,rgba(18,16,31,.9) 34%,rgba(18,16,31,.55) 50%,rgba(18,16,31,0) 64%);
    opacity:0}
  @supports (animation-timeline:view()){
    .world::after{animation:band linear both;animation-timeline:--s1;animation-range:entry 0% entry 60%}
  }
  .hero-copy{justify-content:flex-start;padding:clamp(88px,13svh,120px) 20px 0}
  .hero-copy .fine{margin-top:18px;padding-bottom:0;font-size:12.5px;max-width:30ch}
  .stop{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;padding:0 20px max(30px,env(safe-area-inset-bottom))}
  .txt{width:auto}
  .txt::before{display:none}
  /* the words fade as they rise off the dark band, so they never sit on the drawing */
  @supports (animation-timeline:view()){
    .stop:not(.night) .txt{animation:txtout linear both;animation-timeline:view();animation-range:contain 8% contain 45%}
  }
  h1{font-size:30px;line-height:1.1}
  @media (max-width:371px){h1{font-size:26px}}
  .lede{font-size:16px}
  .stop .day{font-size:20px;margin:0 0 6px}
  .stop h2{font-size:27px;line-height:1.15}
  .stop p{font-size:15.5px;line-height:1.55;margin-top:10px}
  .stop p.note{font-size:13.5px}
  .p2.tag{display:none}
  .moon{transform:translate(-40px,-230px) scale(1.6)}
  #keys .txt p{margin-top:8px}
  #keys .txt p.note{font-size:13px;line-height:1.5}
  .night{justify-content:flex-end;text-align:center;padding:0 20px max(30px,env(safe-area-inset-bottom))}
  .night h2{font-size:32px}
}
@keyframes band{from{opacity:0}to{opacity:1}}
@keyframes txtout{from{opacity:1}to{opacity:0}}
/* narrow phones: the wordmark alone; the eyebrow and the Good-night section already say iPhone and coming soon */
@media (max-width:359px){ .site--over .pill{display:none} }

/* ---------- the same street, framed still: no scroll timelines, reduced motion, a portrait window or a landscape phone ---------- */
@supports not (animation-timeline:view()){
  .world{position:relative;height:auto;z-index:auto}
  .world .scene{height:auto;aspect-ratio:16/9}
  .layer{margin-top:0}
  .hero-copy{height:auto;min-height:0;padding:40px 16px 8px;text-shadow:none}
  .hero-copy .fine{margin-top:22px;padding-bottom:0}
  .stop{height:auto;min-height:0;display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center;justify-content:stretch;padding:clamp(40px,6vw,80px) clamp(16px,5vw,64px);max-width:1180px;margin:0 auto}
  .txt{width:auto;text-shadow:none}
  .txt::before{display:none}
  .fbv{display:block;width:100%;height:auto;-webkit-mask-image:radial-gradient(ellipse at center,#000 52%,transparent 78%);mask-image:radial-gradient(ellipse at center,#000 52%,transparent 78%)}
  .night{display:block;text-align:center;padding-top:clamp(40px,6vw,80px)}
  .night .fbv{max-width:900px;margin:0 auto 32px}
  .c0,.cam,.walker,.flyer,.prop,.prop .ln,.p3b,.p3u,.p2.tag,.scene{animation:none!important}
  .c0{transform:none}
  .p3b{opacity:1}
  .prop{opacity:var(--pv,0)}
  .p1{opacity:var(--v1,var(--pv,0))}.p2{opacity:var(--v2,var(--pv,0))}.p3{opacity:var(--v3,var(--pv,0))}.p4{opacity:var(--v4,var(--pv,0))}
  .p5{opacity:var(--v5,var(--pv,0))}.p6{opacity:var(--v6,var(--pv,0))}.p7{opacity:var(--v7,var(--pv,0))}
  .prop .ln{stroke-dasharray:none;stroke-dashoffset:0}
  .p2.tag{display:none}
  @media (max-width:860px){.stop{grid-template-columns:1fr}}
  @media (max-width:720px){.world .scene{aspect-ratio:4/3}.hero-copy,.stop,.night{padding-top:28px}.world{box-shadow:none}.moon{transform:translate(-130px,130px)}.hero-copy{justify-content:flex-start}}
  .world::after{display:none}
  .txt{animation:none!important}
}
@media (prefers-reduced-motion:reduce), (min-width:721px) and (max-aspect-ratio:1/1), (max-height:520px), (max-width:720px) and (max-height:700px){
  .world{position:relative;height:auto;z-index:auto}
  .world .scene{height:auto;aspect-ratio:16/9}
  .layer{margin-top:0}
  .hero-copy{height:auto;min-height:0;padding:40px 16px 8px;text-shadow:none}
  .hero-copy .fine{margin-top:22px;padding-bottom:0}
  .stop{height:auto;min-height:0;display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center;justify-content:stretch;padding:clamp(40px,6vw,80px) clamp(16px,5vw,64px);max-width:1180px;margin:0 auto}
  .txt{width:auto;text-shadow:none}
  .txt::before{display:none}
  .fbv{display:block;width:100%;height:auto;-webkit-mask-image:radial-gradient(ellipse at center,#000 52%,transparent 78%);mask-image:radial-gradient(ellipse at center,#000 52%,transparent 78%)}
  .night{display:block;text-align:center;padding-top:clamp(40px,6vw,80px)}
  .night .fbv{max-width:900px;margin:0 auto 32px}
  .c0,.cam,.walker,.flyer,.prop,.prop .ln,.p3b,.p3u,.p2.tag,.scene{animation:none!important}
  .c0{transform:none}
  .p3b{opacity:1}
  .prop{opacity:var(--pv,0)}
  .p1{opacity:var(--v1,var(--pv,0))}.p2{opacity:var(--v2,var(--pv,0))}.p3{opacity:var(--v3,var(--pv,0))}.p4{opacity:var(--v4,var(--pv,0))}
  .p5{opacity:var(--v5,var(--pv,0))}.p6{opacity:var(--v6,var(--pv,0))}.p7{opacity:var(--v7,var(--pv,0))}
  .prop .ln{stroke-dasharray:none;stroke-dashoffset:0}
  .p2.tag{display:none}
  @media (max-width:860px){.stop{grid-template-columns:1fr}}
  @media (max-width:720px){.world .scene{aspect-ratio:4/3}.hero-copy,.stop,.night{padding-top:28px}.world{box-shadow:none}.moon{transform:translate(-130px,130px)}.hero-copy{justify-content:flex-start}}
  .world::after{display:none}
  .txt{animation:none!important}
}
@media (prefers-reduced-motion:reduce){.tw,.ff{animation:none!important}}
/* ---------- Plan comparison (the signboard at the end of the street) ---------- */
.planbook-wrap{max-width:860px;margin:36px auto 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.planbook{width:100%;min-width:560px;border-collapse:collapse;table-layout:fixed;text-align:left;font-size:15px;color:var(--text)}
.planbook col.pb-f{width:40%}
.planbook thead th{vertical-align:bottom;padding:0 10px 14px;border-bottom:1px solid var(--ink);text-align:center}
.planbook thead th:first-child{text-align:left}
.planbook thead b{display:block;font-family:var(--serif);font-weight:600;font-size:24px;line-height:1.1;color:var(--text)}
.planbook thead small{display:block;margin-top:6px;font-size:12px;line-height:1.3;color:var(--muted)}
.planbook tbody th,.planbook tbody td{padding:12px 10px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.planbook tbody th{font-weight:500;color:var(--text)}
.planbook tbody th small{display:block;font-size:12px;line-height:1.35;color:var(--muted);margin-top:2px}
.planbook tbody td{text-align:center;color:var(--muted);font-size:14px}
.planbook .pb-group th{padding:22px 10px 8px;border-bottom:0;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.planbook td.y::before,.planbook td.n::before{content:"";display:inline-block;width:22px;height:22px;border-radius:50%;vertical-align:middle;background:center/12px no-repeat}
.planbook td.y::before{border:1px solid var(--ink);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 6.3l2.4 2.4L9.6 3.6' fill='none' stroke='%23D4984A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.planbook td.n::before{border:1px solid var(--line);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 6h6' fill='none' stroke='%236B6890' stroke-width='1.6' stroke-linecap='round'/></svg>")}
.plans-foot{font-size:13.5px;color:var(--muted);max-width:60ch;margin:22px auto 0}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:600px){
  .planbook{min-width:0;font-size:14px}
  .planbook col.pb-f{width:40%}
  .planbook thead th{padding:0 4px 12px}
  .planbook thead b{font-size:17px;white-space:normal}
  .planbook thead small{display:none}
  .planbook tbody th,.planbook tbody td{padding:10px 6px}
  .planbook tbody td{font-size:12.5px}
  .planbook tbody th small{display:none}
}