/* One booking in five chapters, then the beta (docs/website/plan/story.md): the guide down the left, one sentence right, two phones on
   a light that takes the chapter's colour, and what lifts off a phone as liquid glass (look.md "The story's stage").
   chapters.js places every fixed piece each frame. */
body.five { min-width:0; }
.runway { height:calc(var(--n) * 100vh); }

.halo { position:fixed; left:0; top:0; width:105vh; height:105vh; z-index:1; pointer-events:none; filter:blur(24px); }

/* The six headlines, the one you are in large and dark (story.md rule 7). */
.guide { position:fixed; left:64px; top:50%; transform:translateY(-50%); z-index:6; width:340px; list-style:none;
         pointer-events:none; opacity:0; }
.guide li { --k:0; margin:calc(4px + var(--k) * 14px) 0; }
/* A headline keeps the lines it ends on while it grows, so no word jumps a line (Phillip, 8 Oct); small, it is one line. */
.guide h1 br, .guide h2 br { display:none; }
.guide li.big br { display:inline; }
.guide b { display:block; font:600 11px Inter; letter-spacing:.16em; text-transform:uppercase;
           color:rgb(var(--ink-rgb) / calc(.28 + var(--k) * .52)); }
.guide h1, .guide h2 { font:400 calc(17px + var(--k) * 35px)/1.06 Fraunces; letter-spacing:-.02em; font-variation-settings:"opsz" 144;
                       color:rgb(var(--ink-rgb) / calc(.28 + var(--k) * .72)); margin-top:2px; text-wrap:balance; }
.say { position:fixed; right:64px; top:50%; z-index:6; width:300px; pointer-events:none; opacity:0; }
.say .s { position:absolute; left:0; right:0; top:0; transform:translateY(-50%); opacity:0; }
.say p { font:400 17px/1.5 Inter; }
.say .l p { font:400 30px/1.15 Fraunces; letter-spacing:-.015em; }
.say .btn { margin-top:22px; pointer-events:auto; }
.say .mail { display:block; width:max-content; margin-top:12px; font:500 15px Inter; color:var(--muted); pointer-events:auto; }
/* The names over the phones while both are on stage. */
.who { position:fixed; left:0; top:0; z-index:5; opacity:0; pointer-events:none; white-space:nowrap;
       font:600 12px Inter; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

/* Liquid glass: what is behind it shows through, blurred, and in Chromium bent by the #liquid filter (immersive-web.md
   §5 item 1). Every piece is a child of body, since an ancestor's opacity, filter or mask would switch it off. */
.gp { position:fixed; left:0; top:0; z-index:4; visibility:hidden; opacity:0; pointer-events:none; white-space:nowrap;
      color:var(--ink); font:500 14px/1.35 Inter; will-change:transform, opacity; }
.lq { background:rgba(255,255,255,.42); -webkit-backdrop-filter:blur(14px) saturate(1.6); backdrop-filter:blur(14px) saturate(1.6);
      box-shadow:inset 1px 1px 0 rgba(255,255,255,.95), inset -1px -1px 0 rgba(255,255,255,.45),
                 inset 0 0 22px rgba(255,255,255,.5), 0 18px 40px rgba(31,31,29,.16); }
html.bend .lq { backdrop-filter:url(#liquid) blur(1.5px) saturate(1.6) brightness(1.05); }
@media (prefers-reduced-transparency: reduce) {
  .lq, html.bend .lq { background:rgba(255,255,255,.94); -webkit-backdrop-filter:none; backdrop-filter:none; }
}
/* Graphite: the glass goes dark and its lit edge dims; the sky behind it goes to night (brand-brief.md §5 item 3). */
html[data-look="graphite"] .lq { background:rgba(36,36,36,.5);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.22), inset -1px -1px 0 rgba(255,255,255,.08), inset 0 0 22px rgba(255,255,255,.05), 0 18px 40px rgba(0,0,0,.45); }
@media (prefers-reduced-transparency: reduce) { html[data-look="graphite"] .lq { background:rgba(36,36,36,.94); } }
html[data-look="graphite"] .gstrip { box-shadow:inset 1px 1px 0 rgba(255,255,255,.22), inset -1px -1px 0 rgba(255,255,255,.08),
  0 18px 40px rgba(0,0,0,.45), 0 0 calc(var(--lit) * 50px) calc(var(--lit) * 6px) rgba(255,255,255,.4); }
html[data-look="graphite"] .req .slot { background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
html[data-look="graphite"] .gstrip .wheel i { color:#a8a8aa; }
html[data-look="graphite"] .sky { background:radial-gradient(110% 90% at 50% 40%, #2a2a2b 0%, #1b1b1c 55%, #111 100%); }
html[data-look="graphite"] .grain { mix-blend-mode:screen; opacity:.05; }
html[data-look="graphite"] .halo { opacity:.55; }
.gp .muted, .gp small { color:var(--muted); }

.place { display:flex; gap:4px; padding:5px; border-radius:999px; font-weight:600; }
.place span { padding:10px 18px; border-radius:999px; }
.place .home { --on:0; position:relative; isolation:isolate; color:color-mix(in srgb, var(--on-ink) calc(var(--on) * 100%), var(--ink)); }
.place .home::before { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:var(--ink); opacity:var(--on); }

.pill { display:flex; gap:16px; align-items:center; padding:11px 18px; border-radius:999px; font-weight:600; }
.pill span + span { font-weight:500; color:var(--muted); }

.req { width:250px; padding:16px 18px 18px; border-radius:24px; }
.req small { display:block; font:600 10.5px Inter; letter-spacing:.12em; text-transform:uppercase; }
.req .t { font:600 21px/1.2 Inter; letter-spacing:-.01em; margin:6px 0 2px; }
/* A row opens (--g) as she adds its service, and its words show (--f) as the pill lands in it. */
.req .slot { --g:0; --f:0; display:flex; justify-content:space-between; align-items:center; height:calc(var(--g) * 35px);
             margin-top:calc(var(--g) * 7px); padding:0 11px; border-radius:12px; overflow:hidden; opacity:var(--g);
             background:rgba(255,255,255,.55); box-shadow:inset 0 0 0 1px rgba(255,255,255,.9); }
.req .muted + .slot { margin-top:calc(var(--g) * 14px); }
.req .slot span { opacity:var(--f); }
.req .tot { display:flex; justify-content:space-between; align-items:baseline; margin-top:12px; padding-top:11px;
            border-top:1px solid rgb(var(--ink-rgb) / .1); font-weight:600; }
.req .tot b { font:600 19px Inter; }
.req .send { display:grid; margin-top:14px; padding:12px 0; border-radius:999px; background:var(--ink); color:var(--on-ink);
             text-align:center; font-weight:600; }
.req .send em { grid-area:1/1; font-style:normal; }
.req .send em + em { opacity:0; color:#9be3ad; }

.hold { display:flex; gap:10px; align-items:center; padding:12px 20px 12px 13px; border-radius:999px; font-weight:600; color:#c8372f; }
.hold svg { width:24px; height:24px; transform:rotate(-90deg); }
.hold circle { fill:none; stroke:#c8372f; stroke-width:3.2; stroke-linecap:round; }
.hold .bg { stroke:rgba(200,55,47,.22); }
.hold .fg { --r:0; stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--r)); }

/* As big as the app's strip on a 390 pt phone, so it covers hers exactly. */
.gstrip { --lit:0; --ring:0; display:flex; gap:10px; align-items:center; width:355px; padding:5px 12px 5px 6px; border-radius:999px;
          box-shadow:inset 1px 1px 0 rgba(255,255,255,.95), inset -1px -1px 0 rgba(255,255,255,.45), inset 0 0 22px rgba(255,255,255,.5),
                     0 18px 40px rgba(31,31,29,.16), 0 0 calc(var(--lit) * 50px) calc(var(--lit) * 6px) rgba(255,255,255,.85); }
/* The pulse as a state turns in: a ring that grows off the strip and fades. */
.gstrip::after { content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
                 box-shadow:0 0 0 2px rgba(255,255,255,.95), 0 0 26px 4px rgba(120,205,225,.85);
                 transform:scale(calc(1 + var(--ring) * .22)); opacity:calc((1 - var(--ring)) * min(1, var(--ring) * 6)); }
.gstrip .ic { position:relative; flex:none; width:34px; height:34px; }
.gstrip .ic i { position:absolute; inset:0; display:grid; place-items:center; border-radius:50%; opacity:0; }
.gstrip .ic svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.gstrip .ic .fill { fill:currentColor; stroke:none; }
.gstrip .blue { background:#e6edff; color:#0a49e0; } .gstrip .green { background:#e3f5e8; color:#2fb350; }
.gstrip .ink { background:#1f1f1d; color:#fff; }
.gstrip .tx { flex:1; min-width:0; }
.gstrip .tx b { display:block; font:600 14.5px/18px Inter; }
.gstrip .wheel { display:block; height:17px; overflow:hidden; }
.gstrip .wheel span { display:block; }
.gstrip .wheel i { display:block; height:17px; font:400 12.5px/17px Inter; font-style:normal; color:#58585a; }
.gstrip .chev { width:16px; height:16px; fill:none; stroke:#b9b6ae; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

.cal { width:210px; padding:16px 20px 18px; border-radius:26px; }
.cal small { display:block; font:700 11px Inter; letter-spacing:.12em; color:#d0463b; }
.cal b { display:block; font:600 44px/1.1 Inter; letter-spacing:-.02em; margin:4px 0 6px; }
.cal span { display:block; padding-left:9px; border-left:3px solid #d0463b; font:500 13px Inter; color:var(--muted); }

.route { width:260px; padding:8px; border-radius:26px; }
.route .mp { position:relative; height:150px; border-radius:18px; overflow:hidden;
             background:url(/img/story/map-bare.jpg) 42% 46%/230% auto; }
.route .mp svg { position:absolute; inset:0; width:100%; height:100%; }
.route path { --p:0; fill:none; stroke:#2f7bf6; stroke-width:4.5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--p)); }
.route .me { position:absolute; left:calc(23.2% - 7px); top:calc(74.7% - 7px); width:14px; height:14px; border-radius:50%;
             background:#2f7bf6; box-shadow:0 0 0 4px #fff, 0 2px 6px rgba(0,0,0,.25); }
.route .her { position:absolute; left:calc(76.8% - 17px); top:calc(25.3% - 17px); width:34px; height:34px; border-radius:50%;
              background:#fff; font:700 12px/34px Inter; font-style:normal; text-align:center; box-shadow:0 3px 8px rgba(0,0,0,.25); }
.route > span { display:flex; gap:7px; align-items:center; padding:11px 8px 5px; font-weight:600; }
.route > span svg { width:16px; height:16px; fill:none; stroke:#2f7bf6; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

.paid { width:270px; padding:16px 18px; border-radius:26px; }
.paid .top { display:flex; gap:10px; align-items:center; font-weight:600; }
.paid .top b { margin-left:auto; font:600 22px Inter; }
.paid .ok { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--green); color:#fff;
            font:700 14px Inter; font-style:normal; }
.paid .more { --o:0; max-height:calc(var(--o) * 140px); opacity:var(--o); overflow:hidden; }
.paid .q { margin-top:14px; padding-top:12px; border-top:1px solid rgb(var(--ink-rgb) / .1); font-weight:500; }
.paid .stars { display:flex; gap:6px; margin:8px 0 2px; font:400 26px/1 Inter; color:#f2b01e; }
.paid .stars i { font-style:normal; opacity:0; }
.paid .again { margin-top:12px; padding:11px 0; border-radius:999px; background:var(--ink); color:var(--on-ink); text-align:center; font-weight:600; }

.fav { width:210px; padding:18px; border-radius:28px; }
.fav .mk { display:block; width:52px; height:52px; border-radius:50%; background:var(--ink); color:var(--on-ink); font:600 17px/52px Inter;
           font-style:normal; text-align:center; }
.fav b { display:block; margin-top:12px; font:400 28px/1.1 Fraunces; }
.fav small { display:block; margin-top:4px; font:600 13px Inter; color:#e5484d; }
.fav .hrt { --h:0; position:absolute; right:18px; top:18px; width:36px; height:36px; fill:#e5484d; transform:scale(var(--h));
            filter:drop-shadow(0 0 10px rgba(229,72,77,.45)); }

/* A finger on the glass. */
.finger { position:fixed; left:0; top:0; z-index:5; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%;
          background:rgba(40,40,40,.3); box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.9); opacity:0; pointer-events:none; }

/* A phone: the guide shrinks to the chapter you are in, at the top; the sentence sits at the bottom. */
@media (max-width:760px), (max-aspect-ratio:4/5) {
  nav { inset:16px 16px auto; }
  nav .links > a { display:none; }
  nav .look { margin:0; padding:0; border:0; }
  .guide { left:20px; right:20px; top:84px; width:auto; transform:none; }
  .guide li { position:absolute; left:0; right:0; top:0; margin:0; opacity:var(--k); }
  .guide h1, .guide h2 { font-size:30px; color:var(--ink); }
  .guide b { color:var(--muted); }
  .say { left:20px; right:20px; top:auto; bottom:84px; width:auto; }
  .say .s { top:auto; bottom:0; transform:none; }
  .say .l p { font-size:24px; }
  .lablink { bottom:16px; left:16px; }
}