/* ============================================================
   /home — the gated post-login page (STOUR-96, STOUR-100).
   Hand-maintained copy of the site repo's page-2 stylesheet
   (branch stour-96-landing-page-2 @ 73d1540). Token names match
   the landing page's so the two do not diverge. The font faces
   are declared once, in /static/fonts/stoury-fonts.css, not here.
   ============================================================ */

:root{
  --coral:#f79e78; --butter:#f7d18a; --lime:#e3f09c;
  --sage:#87b5a6;  --olive:#5c5940;  --cream:#f4ead2; --ink:#1c1a13;
  --olive-70:rgba(92,89,64,.7);
  --maxw:1320px;

  /* O-window rotation. step = 5.5s hold + 2s crossfade.
     cycle = image count x step. N=10, so 10 x 7.5s = 75s.

     Changing N or --step means recomputing --cycle AND the percentages in the
     owin-cycle / owin-pan-* keyframes, which are all derived from it:
       fade-in ends   2.0s / cycle =  2.6667%
       handover       7.5s / cycle = 10%        <- next layer starts fading in
       fade-out ends  9.5s / cycle = 12.6667%   <- also where the pan finishes
     A frame is visible for 9.5s but the next starts at 7.5s, so the 2s
     overlap is the crossfade itself.
     See docs/superpowers/plans/2026-08-27-stourytravel-landing-page.md
     (Task 4). */
  --step:7.5s;
  --cycle:75s;
}

*{margin:0;padding:0;box-sizing:border-box;}
body{
  background:var(--cream); color:var(--ink);
  font-family:var(--st-serif,alga,'Stoury Serif',Georgia,serif);
  font-size:var(--st-fs-body,20px); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
/* width + max-width:100%, rather than max-width alone (fixed 2026-09-03).
   .hero is display:flex, so its .wrap is a FLEX ITEM, and a flex item carries
   min-width:auto — an automatic floor at its own min-content width. Here that
   floor is the wordmark (292.6px) plus the padding, so .wrap would not shrink
   below ~337px and stuck out of any viewport narrower than that. Because body
   is cream, the overflow strip painted cream down the right of the olive hero,
   which is how CJ spotted it.

   The automatic minimum is clamped by a definite max main size, so declaring
   max-width:100% is what actually lets the item shrink; the width then carries
   the 1120px cap that max-width used to. For the non-flex .wrap elements (the
   beats band, the footer) the two forms are equivalent. */
.wrap{width:var(--maxw);max-width:100%;margin:0 auto;padding:0 32px;}

/* Visually hidden but present for assistive tech and crawlers. */
.vh{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

/* The ticket container (a rounded rect with side notches) is retired (STOUR-186, Alex's review p. 18):
   buttons and cards are plain 12px rectangles. */

/* ---- film grain + vignette, applied to photographic bands ---- */
.grain,.filmic{position:relative;}
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  opacity:.4;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
.filmic::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(120% 120% at 50% 30%,rgba(0,0,0,0) 52%,rgba(40,30,15,.42) 100%);
}

/* Smooth scrolling exists only for the hero's scroll cue. Guarded by
   no-preference rather than switched off under reduce, so a motion-sensitive
   visitor gets an instant jump instead of a long glide. */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth;}
}

/* ---- hero ---- */

/* ---- nav (STOUR-96, Greg's site map p.2) ----
   Logo at the left, three links at the right. The third reads "My trip"
   (STOUR-100): it opens the trip builder, which restores the visitor's own
   trip from their browser. About and FAQ are STOUR-83. */
.nav{background:var(--st-surface,#fbf6ea);border-bottom:1px solid var(--st-line,rgba(28,26,19,.16));}
.nav .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:64px;padding-top:8px;padding-bottom:8px;
}
.nav .wm{color:var(--st-text,#1c1a13);text-decoration:none;}
.nav-links{display:flex;gap:clamp(4px,1.5vw,12px);list-style:none;}
.nav-links a{
  display:inline-block;padding:10px 10px;
  font-family:'Stoury Display',system-ui,sans-serif;
  font-size:var(--st-fs-label,14px);letter-spacing:.04em;
  color:var(--ink);text-decoration:none;border-radius:6px;
}
.nav-links a:hover{background:rgba(28,26,19,.08);}
.nav-links a:focus-visible{outline:2px solid var(--olive);outline-offset:2px;}

/* ---- hero: wordmark and tagline on the left, the statement on the right ---- */
.hero{
  background:var(--olive);color:var(--cream);
  padding:clamp(40px,6vw,80px) 0 clamp(44px,6vw,84px);
}
.hero .wrap{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);align-items:center;
}
.hero-mark{text-align:center;}
.hero .wm{font-size:clamp(64px,9vw,150px);}
.hero .tagline{
  font-family:alga,'Stoury Serif',serif;
  font-size:clamp(24px,2.6vw,34px);
  color:#f4ead2;
  margin-top:clamp(8px,1.5vw,18px);
}
/* Cream on olive, 5.93:1 (AA for body text). Do not dim it. */
.hero .lead{
  font-size:clamp(18px,1.6vw,23px);line-height:1.55;
  color:var(--cream);text-align:center;
}

/* ---- the booking band: what is bookable now, beside the slideshow ---- */
.booking{background:var(--butter);color:var(--ink);padding:clamp(28px,4vw,48px) 0;}
.booking .wrap{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px,4vw,56px);align-items:center;
}
.booking h2{
  font-family:'Stoury Display',system-ui,sans-serif;font-weight:600;
  font-size:clamp(22px,2.2vw,30px);line-height:1.15;letter-spacing:.01em;
}
.booking .now{
  font-size:clamp(24px,2.6vw,36px);line-height:1.2;
  margin-top:clamp(8px,1.2vw,14px);
}
.booking .now b{
  font-family:'Stoury Display',system-ui,sans-serif;font-weight:600;
  font-size:.92em;letter-spacing:.01em;
}
.booking .soon{
  font-size:clamp(19px,1.8vw,24px);line-height:1.3;
  margin-top:clamp(8px,1.2vw,14px);color:var(--ink);
}

/* The slideshow slot. Greg's site map puts a slide show of film and TV
   posters here. Posters are film advertising and sit under the legal hold
   until counsel clears them, so the slot runs on the page's own cleared,
   credited location photographs instead (docs/build-imagery.sh lists the
   sources). Swapping to posters later is one change: the image list below.

   Four poster-shaped frames, each holding two layers; the upper layer fades
   in and out on a shared 16s cycle, and the four frames are staggered by a
   quarter of it, so one frame changes at a time. No script, like the
   O-window. */
.slides{
  display:grid;grid-template-columns:repeat(4,clamp(72px,8.5vw,128px));
  gap:clamp(8px,1vw,14px);
  padding:clamp(8px,1vw,12px);
  background:var(--cream);border-radius:10px;
  list-style:none;
  --sl-cycle:16s;
}
.slide{position:relative;aspect-ratio:2/3;overflow:hidden;border-radius:6px;background:var(--olive);}
.sl{position:absolute;inset:0;background:center/cover no-repeat;}
.sl-cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:26px 8px 7px;
  /* STOUR-204: a caption is IBM Plex Mono at 11px. */
  font-family:'ibm-plex-mono',ui-monospace,Menlo,monospace;
  font-size:11px;line-height:1.2;letter-spacing:0;
  color:#f4ead2;text-align:left;
  background:linear-gradient(to top,rgba(40,30,15,.82),rgba(40,30,15,0));
}
.sl:nth-child(2){opacity:0;animation:slide-swap var(--sl-cycle) ease-in-out infinite;}
.slide:nth-child(1) .sl:nth-child(2){animation-delay:0s;}
.slide:nth-child(2) .sl:nth-child(2){animation-delay:4s;}
.slide:nth-child(3) .sl:nth-child(2){animation-delay:8s;}
.slide:nth-child(4) .sl:nth-child(2){animation-delay:12s;}
@keyframes slide-swap{
  0%,46%  {opacity:0}
  50%,96% {opacity:1}
  100%    {opacity:0}
}
/* The image list. Replace these to change what the slideshow shows. */
.slide:nth-child(1) .sl:nth-child(1){background-image:url('img/o-05.jpg');}
.slide:nth-child(1) .sl:nth-child(2){background-image:url('img/band-films.jpg');background-position:36% 50%;}
.slide:nth-child(2) .sl:nth-child(1){background-image:url('img/o-03.jpg');}
.slide:nth-child(2) .sl:nth-child(2){background-image:url('img/o-06.jpg');}
.slide:nth-child(3) .sl:nth-child(1){background-image:url('img/o-01.jpg');background-position:62% 50%;}
.slide:nth-child(3) .sl:nth-child(2){background-image:url('img/o-08.jpg');}
.slide:nth-child(4) .sl:nth-child(1){background-image:url('img/o-07.jpg');background-position:30% 50%;}
.slide:nth-child(4) .sl:nth-child(2){background-image:url('img/band-food.jpg');}
@media (prefers-reduced-motion: reduce){
  .sl:nth-child(2){animation:none;opacity:0;}
}

/* ---- how it works, the art, the example itinerary ---- */
.plan{background:var(--cream);padding:clamp(36px,5vw,72px) 0 clamp(44px,6vw,88px);}
.plan .wrap{
  display:grid;grid-template-columns:300px minmax(0,1fr) 320px;
  gap:clamp(24px,3vw,40px);align-items:stretch;
}
.plan-steps,.itin{align-self:start;}
.steps-card{
  background:rgba(247,209,138,.55);border-radius:12px;
  padding:clamp(20px,2.4vw,32px) clamp(20px,2.4vw,30px);
}
.steps-card h2{
  font-family:'Stoury Display',system-ui,sans-serif;font-weight:600;
  font-size:clamp(26px,2.4vw,32px);line-height:1.1;letter-spacing:.01em;
  margin-bottom:clamp(10px,1.2vw,15px);
}
.steps{list-style:none;counter-reset:step;}
.steps li{
  counter-increment:step;
  display:flex;gap:12px;align-items:baseline;
  /* STOUR-169 round 2: seven steps in the six-step card's height (tighter lines and gaps). */
  font-size:clamp(19px,1.6vw,23px);line-height:1.16;
  padding:clamp(4px,.5vw,6px) 0;
}
.steps li::before{
  content:counter(step) ")";
  font-family:'Stoury Display',system-ui,sans-serif;
  color:var(--ink);min-width:1.6em;
}
.cta{text-align:center;margin-top:clamp(22px,3vw,36px);}
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:14px 32px;
  font-family:'Stoury Display',system-ui,sans-serif;
  font-size:var(--st-fs-label,14px);letter-spacing:.04em;line-height:1.2;
  color:var(--st-on-fill,#1c1a13);background:var(--coral);
  border-radius:var(--st-radius,12px);text-decoration:none;
  box-shadow:none;
}
.btn:hover{filter:brightness(1.04);}
.btn:focus-visible{outline:2px solid var(--olive);outline-offset:3px;}

/* The map slot (STOUR-129). Greg's site map puts Manhattan in the middle; it is
   now a live Google map of the example itinerary's ten stops, drawn by
   /static/stoury-map.js from /static/home/home-map.js. It is locked (no drag,
   zoom or map UI) until Get Started unlocks it (STOUR-130). The grid stretches
   it to the height of the two cards beside it; without a browser key the
   module draws its branded placeholder listing the stops in the same box. */
.home-map{
  position:relative;min-height:480px;height:100%;
  border-radius:12px;overflow:hidden;
  background:var(--butter);
  box-shadow:0 10px 28px rgba(28,26,19,.14);
}
/* No key: the placeholder lists every place and scrolls inside the map box, never growing it. */
.home-map .stm-ph{position:absolute;inset:0;max-height:100%;overflow:auto;}

.itin{
  background:#fbf6ea;color:var(--ink);
  border:3px solid var(--butter);border-radius:10px;
  padding:clamp(16px,1.6vw,22px) clamp(16px,1.5vw,20px);
  box-shadow:0 10px 28px rgba(28,26,19,.14);
  transform:rotate(-2deg);
}
.itin h2{
  font-family:'Stoury Display',system-ui,sans-serif;font-weight:600;
  font-size:clamp(28px,2.6vw,36px);line-height:1.05;letter-spacing:.01em;
}
.itin .when{
  margin-top:6px;
  font-family:'Stoury Display',system-ui,sans-serif;
  font-size:clamp(16px,1.3vw,18px);line-height:1.35;
}
.itin h3{
  font-family:'Stoury Display',system-ui,sans-serif;font-weight:600;
  font-size:clamp(18px,1.5vw,21px);margin-top:clamp(12px,1.2vw,16px);
}
.itin ul{list-style:none;margin-top:2px;}
.itin li{font-size:clamp(16px,1.3vw,18px);line-height:1.45;}
.itin li b{font-family:'Stoury Display',system-ui,sans-serif;font-weight:600;}
.itin .share{display:block;margin-top:clamp(12px,1.2vw,16px);}
.itin .share a{
  font-family:'Stoury Display',system-ui,sans-serif;
  font-size:clamp(16px,1.4vw,19px);
  color:var(--ink);text-decoration:underline;
  text-decoration-color:rgba(28,26,19,.4);text-decoration-thickness:1px;text-underline-offset:4px;
}
.itin .share a:hover,.itin .share a:focus-visible{text-decoration-color:currentColor;}
.itin .share a:focus-visible{outline:2px solid var(--olive);outline-offset:3px;border-radius:3px;}

/* ---- the builder in place (STOUR-130) ----
   Get Started sets data-stage="plan" on section.plan (home-plan.js). The left
   column holds the How it works card and the filter rail in one grid cell and
   cross-fades between them; the map stays put; the itinerary card straightens
   and shows "Your itinerary". Colours read role tokens with the light value as
   the fallback (dark values in the STOUR-134 blocks below). */
.plan-left{display:grid;align-self:start;min-width:0;}
.plan-left > *{grid-area:1 / 1;min-width:0;}
.plan-steps{opacity:1;visibility:visible;transition:opacity .36s ease .1s,visibility 0s linear 0s;}
.rail{opacity:0;visibility:hidden;transition:opacity .36s ease,visibility 0s linear .36s;}
[data-stage="plan"] .plan-steps{opacity:0;visibility:hidden;transition:opacity .36s ease,visibility 0s linear .36s;}
[data-stage="plan"] .rail{opacity:1;visibility:visible;transition:opacity .36s ease .1s,visibility 0s linear 0s;}
.itin{display:grid;transition:transform .36s ease;}
.itin > div{grid-area:1 / 1;min-width:0;}
.itin-ex{opacity:1;visibility:visible;transition:opacity .36s ease .1s,visibility 0s linear 0s;}
.itin-mine{opacity:0;visibility:hidden;transition:opacity .36s ease,visibility 0s linear .36s;}
[data-stage="plan"] .itin{transform:none;}
[data-stage="plan"] .itin-ex{opacity:0;visibility:hidden;transition:opacity .36s ease,visibility 0s linear .36s;}
[data-stage="plan"] .itin-mine{opacity:1;visibility:visible;transition:opacity .36s ease .1s,visibility 0s linear 0s;}
@media (prefers-reduced-motion: reduce){
  .plan-steps,.rail,.itin,.itin-ex,.itin-mine,
  [data-stage="plan"] .plan-steps,[data-stage="plan"] .rail,[data-stage="plan"] .itin,
  [data-stage="plan"] .itin-ex,[data-stage="plan"] .itin-mine{transition:none;}
}

.rail{
  /* Its own height (STOUR-155): the hidden How it works card shares the cell and is taller. */
  align-self:start;
  background:var(--steps-bg,rgba(247,209,138,.55));border-radius:12px;
  padding:clamp(18px,2vw,26px) clamp(16px,1.8vw,22px);
}
.rail h2{
  font-family:'Stoury Display',system-ui,sans-serif;font-weight:600;
  font-size:clamp(26px,2.4vw,32px);line-height:1.1;letter-spacing:.01em;
}
.rail h2:focus{outline:none;}
.rail-step{border:0;margin-top:clamp(16px,1.6vw,20px);min-width:0;}
.rail-step legend{
  padding:0;margin-bottom:8px;
  font-family:'Stoury Display',system-ui,sans-serif;font-weight:600;font-size:18px;line-height:1.2;
}
.rail-help{margin-top:8px;font-size:15px;line-height:1.4;color:var(--muted,#5c5940);}
.rail-help.rail-lede{margin:0 0 10px;}
.rail-dates + .stepper{margin-top:12px;}
.rail-dates{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;}
.rail-dates label{display:grid;grid-template-columns:4.2em minmax(0,1fr);align-items:center;gap:8px;font-family:'Stoury Display',system-ui,sans-serif;font-size:14px;min-width:0;}
.rail input[type="date"],.rail input[type="text"],.flow-trip input[type="date"],.flow-trip input[type="text"]{
  width:100%;min-width:0;min-height:44px;padding:9px 11px;
  font:16px/1.2 alga,'Stoury Serif',Georgia,serif;color:var(--text,var(--ink));
  background:var(--field-bg,#fbf6ea);border:1.5px solid var(--field-border,#d9ccb0);border-radius:8px;
}
.rail input:focus-visible,.flow-trip input:focus-visible{outline:2px solid var(--focus,var(--olive));outline-offset:1px;}
.stepper{display:flex;align-items:center;gap:8px;font-size:18px;}
.stepper button{
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  font:600 22px/1 'Stoury Display',system-ui,sans-serif;color:var(--text,var(--ink));
  background:var(--field-bg,#fbf6ea);border:1.5px solid var(--field-border,#d9ccb0);
}
.stepper button:disabled{opacity:.4;cursor:not-allowed;}
.stepper button:focus-visible{outline:2px solid var(--focus,var(--olive));outline-offset:2px;}
.stepper output{min-width:1.6em;text-align:center;font:600 24px/1 'Stoury Display',system-ui,sans-serif;}
/* STOUR-169: with dates the stepper stays live (1 up to the span), so .is-fixed no longer mutes it. */
.rail-dates-clear{display:block;margin-top:6px;font-size:15px;}
/* The range field (STOUR-169 round 2): one input, the whole field opens the calendar. */
.rail-range[hidden],.rail-dates[hidden],.stepper[hidden],.day-chips[hidden]{display:none;}
.flow-trip .rail-range,.rail .rail-range{max-width:520px;}
.flow-trip input.rail-range-in,.rail input.rail-range-in{cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%235c5940' stroke-width='1.6'%3E%3Crect x='2.5' y='3.5' width='13' height='12' rx='2'/%3E%3Cpath d='M2.5 7.5h13M6 2v3M12 2v3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:40px !important;}
/* The day chips (STOUR-169 round 2): one per date, on = filled; the last one on stays. */
.day-chips{display:flex;flex-wrap:wrap;gap:8px;}
.day-chip{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:64px;min-height:52px;
  padding:6px 10px;border-radius:10px;cursor:pointer;
  font:600 17px/1.1 'Stoury Display',system-ui,sans-serif;letter-spacing:.02em;
  background:var(--field-bg,#fbf6ea);color:var(--text,var(--ink));border:1.5px solid var(--field-border,#d9ccb0);
}
.day-chip .day-wd{font-size:12px;font-weight:400;letter-spacing:.02em;opacity:.75;}
.day-chip[aria-pressed="true"]{background:var(--olive);border-color:var(--olive);color:var(--cream);}
.day-chip:focus-visible{outline:2px solid var(--focus,var(--olive));outline-offset:2px;}
:root[data-theme="dark"] .day-chip[aria-pressed="true"]{background:#f7d18a;border-color:#f7d18a;color:#1c1a13;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .day-chip[aria-pressed="true"]{background:#f7d18a;border-color:#f7d18a;color:#1c1a13;}
  :root:not([data-theme="light"]) .flow-trip input.rail-range-in{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%23efe6d2' stroke-width='1.6'%3E%3Crect x='2.5' y='3.5' width='13' height='12' rx='2'/%3E%3Cpath d='M2.5 7.5h13M6 2v3M12 2v3'/%3E%3C/svg%3E");}
}
:root[data-theme="dark"] .flow-trip input.rail-range-in{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%23efe6d2' stroke-width='1.6'%3E%3Crect x='2.5' y='3.5' width='13' height='12' rx='2'/%3E%3Cpath d='M2.5 7.5h13M6 2v3M12 2v3'/%3E%3C/svg%3E");}
/* flatpickr (vendor 4.6.13) in the page's tokens, light and dark. */
:root{--fp-bg:#fbf6ea;--fp-text:#1c1a13;--fp-muted:rgba(28,26,19,.38);--fp-hover:rgba(247,209,138,.55);--fp-range:rgba(247,209,138,.6);--fp-on:#5c5940;--fp-on-text:#f4ead2;--fp-border:rgba(28,26,19,.16);}
:root[data-theme="dark"]{--fp-bg:#2a281d;--fp-text:#f4ead2;--fp-muted:rgba(244,234,210,.35);--fp-hover:rgba(247,209,138,.16);--fp-range:rgba(247,209,138,.22);--fp-on:#f7d18a;--fp-on-text:#1c1a13;--fp-border:rgba(244,234,210,.18);}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--fp-bg:#2a281d;--fp-text:#f4ead2;--fp-muted:rgba(244,234,210,.35);--fp-hover:rgba(247,209,138,.16);--fp-range:rgba(247,209,138,.22);--fp-on:#f7d18a;--fp-on-text:#1c1a13;--fp-border:rgba(244,234,210,.18);}
}
.flatpickr-calendar{background:var(--fp-bg);color:var(--fp-text);border:1px solid var(--fp-border);border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.22);font-family:alga,'Stoury Serif',Georgia,serif;}
.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{border-bottom-color:var(--fp-bg);}
.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{border-top-color:var(--fp-bg);}
.flatpickr-months .flatpickr-month,.flatpickr-current-month,.flatpickr-current-month input.cur-year,
.flatpickr-weekday,span.flatpickr-weekday{color:var(--fp-text);fill:var(--fp-text);background:transparent;}
.flatpickr-current-month{font:600 16px/1 'Stoury Display',system-ui,sans-serif;letter-spacing:.03em;}
.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{color:var(--fp-text);fill:var(--fp-text);}
.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:var(--coral);}
.flatpickr-day{color:var(--fp-text);border-radius:8px;}
.flatpickr-day:hover,.flatpickr-day:focus{background:var(--fp-hover);border-color:transparent;}
.flatpickr-day.today{border-color:var(--coral);}
.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay{color:var(--fp-muted);background:transparent;}
.flatpickr-day.inRange,.flatpickr-day.inRange:hover{background:var(--fp-range);border-color:transparent;box-shadow:-5px 0 0 var(--fp-range),5px 0 0 var(--fp-range);}
.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,
.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover{background:var(--fp-on);border-color:var(--fp-on);color:var(--fp-on-text);}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)){box-shadow:-10px 0 0 var(--fp-on);}
.flatpickr-day.week.selected{box-shadow:none;}
.dayContainer + .dayContainer{box-shadow:-1px 0 0 var(--fp-border);}
@media (max-width:640px){ .flatpickr-day{height:42px;line-height:42px;max-width:42px;} }
.rail-dates-clear[hidden]{display:none;}
.tiles{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;}
.tile{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;
  min-height:68px;padding:10px 12px;text-align:left;cursor:pointer;
  font:600 19px/1.15 'Stoury Display',system-ui,sans-serif;color:var(--text,var(--ink));
  background:var(--tile-bg,#fbf6ea);border:2px solid var(--field-border,#d9ccb0);border-radius:var(--st-radius,12px);
}
.tile:hover{border-color:var(--tile-hover,var(--olive));}
.tile[aria-pressed="true"]{background:var(--coral);color:var(--ink);border-color:var(--ink);}
.tile:focus-visible{outline:2px solid var(--focus,var(--olive));outline-offset:2px;}
.tile-n{font:400 13px/1.3 var(--st-mono,'ibm-plex-mono',ui-monospace,monospace);opacity:.85;}
.tile-n:empty{display:none;}
.tile-soon{border-style:dashed;color:var(--muted,#5c5940);font-size:16px;}
.tiles .tile-soon{grid-column:1 / -1;}
.tile-soon[aria-expanded="true"]{border-style:solid;border-color:var(--tile-hover,var(--olive));}
.rail-count{margin-top:10px;font-size:15px;color:var(--muted,#5c5940);}
.rail-count:empty{display:none;}
.rail-soon{margin-top:10px;}
.rail-soon-h{font-size:15px;line-height:1.4;margin-bottom:8px;}
.soon-chips{display:flex;flex-wrap:wrap;gap:6px;}
.soon-chip{
  min-height:36px;padding:6px 12px;border-radius:100px;cursor:pointer;
  font:600 14px/1.2 'Stoury Display',system-ui,sans-serif;color:var(--text,var(--ink));
  background:var(--tile-bg,#fbf6ea);border:1.5px dashed var(--field-border,#d9ccb0);
}
.soon-chip[aria-pressed="true"]{border-style:solid;border-color:var(--ink);background:var(--butter);color:var(--ink);}
.soon-chip:focus-visible{outline:2px solid var(--focus,var(--olive));outline-offset:2px;}
.soon-card:not(:empty){margin-top:10px;}
.rail-link{
  min-height:44px;padding:0 2px;border:0;background:none;cursor:pointer;
  font:16px 'Stoury Display',system-ui,sans-serif;color:var(--text,var(--ink));
  text-decoration:underline;text-decoration-color:var(--link-line,rgba(28,26,19,.4));text-underline-offset:4px;
}
.rail-link:hover{text-decoration-color:currentColor;}
.rail-link:focus-visible{outline:2px solid var(--focus,var(--olive));outline-offset:2px;border-radius:3px;}
.rail-step .rail-link{margin-top:4px;}
.rail-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:clamp(12px,1.4vw,16px);}
/* The stop list (STOUR-155 round 2): the left column of the build area. A search, the filters, every
   place on the map, then the actions at the foot (held at the bottom of the window while the list
   is longer than it). The list grows with the page; it never scrolls inside a box. */
.rail .rail-count{margin-top:4px;}
.rail input.rail-q{
  width:100%;min-width:0;min-height:44px;margin-top:12px;padding:9px 12px;
  font:16px/1.2 alga,'Stoury Serif',Georgia,serif;color:var(--text,var(--ink));
  background:var(--field-bg,#fbf6ea);border:1.5px solid var(--field-border,#d9ccb0);border-radius:8px;
}
.rail-filters{margin-top:12px;display:flex;flex-wrap:wrap;align-items:center;gap:5px;}
.rail-flabel{flex:1 0 100%;font:600 14px/1.2 'Stoury Display',system-ui,sans-serif;}
.rail-chip{
  min-height:34px;padding:5px 10px;border-radius:100px;cursor:pointer;
  font:600 13px/1.2 'Stoury Display',system-ui,sans-serif;color:var(--text,var(--ink));
  background:var(--tile-bg,#fbf6ea);border:1.5px solid var(--field-border,#d9ccb0);
}
.rail-chip:hover{border-color:var(--tile-hover,var(--olive));}
.rail-chip[aria-pressed="true"]{background:var(--coral);color:var(--ink);border-color:var(--ink);}
.rail-chip:focus-visible{outline:2px solid var(--focus,var(--olive));outline-offset:2px;}
.stops{list-style:none;margin:14px -6px 0;padding:0;display:grid;gap:2px;}
.stop-row{
  display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;
  min-height:48px;padding:7px 8px;border:1.5px solid transparent;border-radius:8px;background:none;
  cursor:pointer;text-align:left;color:var(--text,var(--ink));font:inherit;
}
.stop-row:hover,.stop-row.is-hi{background:var(--tile-bg,#fbf6ea);border-color:var(--field-border,#d9ccb0);}
.stop-row[aria-current="true"]{background:var(--tile-bg,#fbf6ea);border-color:var(--ink);box-shadow:inset 3px 0 0 var(--coral);}
.stop-row:focus-visible{outline:2px solid var(--focus,var(--olive));outline-offset:1px;}
.stop-n{
  display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:6px;border-radius:50%;
  vertical-align:1px;background:var(--coral);color:var(--ink);font:600 11px/1 'Stoury Display',system-ui,sans-serif;
}
/* The access classes (STOUR-155 round 2, CJ 12:12; four since STOUR-179): one colour each, on the pins,
   the list's dots, the filter chips and the map key. home-plan.js reads the same tokens for the pins.
   STOUR-186: the saturated green, red, blue and purple are retired for Alex's pastel fills with a dark
   brown icon (stoury-system.css draws the icons): exterior sage, dining coral, stay gold, ticketed lime,
   not checked the raised surface. */
/* STOUR-157: a fifth, --acc-unchecked, a cool grey for an atlas place nobody has classed yet. */
:root{--acc-exterior:#87b5a6;--acc-dining:#f79e78;--acc-stay:#f7d18a;--acc-ticketed:#e3f09c;--acc-unchecked:#efe4c8;}
:root[data-theme="dark"]{--acc-exterior:#87b5a6;--acc-dining:#f79e78;--acc-stay:#f7d18a;--acc-ticketed:#e3f09c;--acc-unchecked:#34311f;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--acc-exterior:#87b5a6;--acc-dining:#f79e78;--acc-stay:#f7d18a;--acc-ticketed:#e3f09c;--acc-unchecked:#34311f;}
}
.acc-dot{
  display:inline-block;flex:none;width:20px;height:20px;border-radius:50%;margin-left:4px;box-sizing:border-box;
  border:1px solid #1c1a13;background-position:center;background-size:64%;background-repeat:no-repeat;
}
.rail-chip .acc-dot{margin:0 6px 0 0;vertical-align:-1px;}
.acc-exterior{background-color:var(--acc-exterior);background-image:var(--st-i-exterior);}
.acc-dining{background-color:var(--acc-dining);background-image:var(--st-i-dining);}
.acc-stay{background-color:var(--acc-stay);background-image:var(--st-i-stay);}
.acc-ticketed{background-color:var(--acc-ticketed);background-image:var(--st-i-ticketed);}
.acc-unchecked{background-color:var(--acc-unchecked);background-image:var(--st-i-unchecked);border-color:var(--st-muted,#5c5940);}
/* The chips are the map key (round 3): Greg's meanings sit in a small disclosure under them. */
.acc-what{margin-top:8px;font-size:14px;line-height:1.35;}
.acc-what summary{display:inline-flex;align-items:center;min-height:32px;cursor:pointer;color:var(--text,var(--ink));
  text-decoration:underline;text-decoration-color:var(--link-line,rgba(28,26,19,.4));text-underline-offset:3px;}
.acc-what summary:focus-visible{outline:2px solid var(--focus,var(--olive));outline-offset:2px;border-radius:3px;}
.acc-what ul{list-style:none;margin:6px 0 2px;padding:0;display:grid;gap:6px;}
.acc-what li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;align-items:start;color:var(--muted,#5c5940);}
.acc-what li .acc-dot{margin:2px 0 0;}
.acc-what b{font-weight:700;color:var(--text,var(--ink));}
/* Show places I've been: a filter too, under the chips, smaller than them. */
.rail .rail-been{margin-top:6px;}
.rail .rail-been .rail-check{font-size:13px;min-height:32px;gap:8px;}
.rail .rail-been .rail-check input{width:16px;height:16px;}
@media (max-width:640px){ .acc-what summary,.rail .rail-been .rail-check{min-height:44px;} }


.stop-t{display:flex;flex-direction:column;min-width:0;}
.stop-name{font:600 16px/1.25 'Stoury Display',system-ui,sans-serif;overflow-wrap:anywhere;}
.stop-film{font-size:14px;line-height:1.3;color:var(--muted,#5c5940);overflow-wrap:anywhere;}
.stop-kind{font-size:13px;color:var(--muted,#5c5940);white-space:nowrap;}
.stops-none{padding:8px 6px;font-size:15px;color:var(--muted,#5c5940);}
.rail-foot{margin-top:clamp(14px,1.6vw,20px);}
.rail-plan-help{flex:1 0 100%;order:1;margin-top:0;}
.rail-acts .rail-back,.rail-acts #rail-over{order:2;}
@media (min-width:981px){
  .rail-foot .rail-been{margin-top:0;}
  .rail-foot .rail-acts{margin-top:8px;gap:2px 16px;}
  .rail-foot .rail-plan{width:100%;padding:10px 16px;font-size:var(--st-fs-label,14px);}
  .rail-foot .rail-plan-help{font-size:13.5px;line-height:1.35;margin-top:4px;}
  .rail-foot .rail-link{min-height:36px;}
  .rail-foot{
    position:sticky;bottom:0;z-index:2;margin:clamp(14px,1.6vw,20px) calc(-1 * clamp(16px,1.8vw,22px)) calc(-1 * clamp(18px,2vw,26px));
    padding:12px clamp(16px,1.8vw,22px) 14px;border-radius:0 0 12px 12px;background:var(--sheet-acts-bg,#f7dfb1);
  }
  /* The map stays in view while the list and the itinerary scroll with the page. STOUR-169: Google's
     Map() writes position:relative inline on #home-map (stoury-map.js makes the map on that element),
     which beat this rule wherever a browser key is set, so the map scrolled away; !important wins over
     the inline style, and sticky still holds Google's absolutely placed panes. */
  .plan[data-step="build"] .home-map{position:sticky !important;top:16px;align-self:start;height:min(82vh,780px);}
}
.rail-plan{padding:12px 24px;font-size:var(--st-fs-label,14px);border:0;cursor:pointer;}
.rail-plan:disabled{opacity:.55;cursor:not-allowed;filter:none;}
/* Add all (STOUR-163): the quiet partner of Build my itinerary, right above it. Same shape and
   face, outlined in olive (the Been here line, which flips for dark) so the coral stays the one
   main action. Full width of the foot; 44px tall on a phone. */
.rail-addall{
  flex:1 0 100%;box-sizing:border-box;min-height:40px;padding:8px 16px;border-radius:var(--st-radius,12px);cursor:pointer;
  font:17px/1.2 'Stoury Display',system-ui,sans-serif;letter-spacing:.02em;
  background:transparent;color:var(--been-line,var(--olive));border:1.5px solid var(--been-line,var(--olive));
  transition:background-color .15s;
}
.rail-addall:hover{background:var(--been-hover,rgba(92,89,64,.1));}
.rail-addall:focus-visible{outline:2px solid var(--focus,var(--olive));outline-offset:2px;}
.rail-addall-note{flex:1 0 100%;margin:0;font-size:13.5px;line-height:1.35;}
.rail-addall[hidden],.rail-addall-note[hidden]{display:none;}
@media (max-width:700px),(pointer:coarse){ .rail-addall{min-height:44px;} }

/* The poster wall (STOUR-78): four across in the rail, 2:3 posters, scrolling
   inside ~320px with a soft fade at the foot; under 640px a sideways strip.
   The selected poster gets the coral ring; no poster = a cream title card. */
.films-line{font-size:16px;line-height:1.4;}
.films-line .films-all{min-height:32px;margin-top:0;font-size:16px;}
.films-line .films-all[aria-disabled="true"]{cursor:default;text-decoration-color:transparent;}
.films-wall{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 8px;align-content:start;
  margin-top:10px;max-height:320px;overflow-y:auto;overscroll-behavior:contain;
  padding:4px 4px 28px;margin-left:-4px;margin-right:-4px;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 36px),transparent);
          mask-image:linear-gradient(to bottom,#000 calc(100% - 36px),transparent);
}
.film{
  display:flex;flex-direction:column;align-items:stretch;gap:3px;min-width:0;
  padding:0;border:0;background:none;cursor:pointer;text-align:left;color:var(--text,var(--ink));
}
.film-art{
  position:relative;display:block;aspect-ratio:2 / 3;border-radius:6px;overflow:hidden;
  background:var(--film-card,var(--cream));border:1px solid var(--field-border,#d9ccb0);
  transition:box-shadow .15s ease;
}
.film-art img{display:block;width:100%;height:100%;object-fit:cover;filter:sepia(.30) saturate(.82) contrast(1.02) brightness(.98);}
.film-card{
  display:flex;flex-direction:column;justify-content:center;gap:3px;height:100%;padding:5px 3px 5px 4px;
  font:400 10.5px/1.15 alga,'Stoury Serif',Georgia,serif;color:var(--film-card-text,var(--ink));
  overflow-wrap:break-word;hyphens:auto;letter-spacing:-.01em;
}
.film-card i{font:400 10px/1.1 alga,'Stoury Serif',Georgia,serif;font-style:normal;opacity:.75;}
.film-t{font:400 11.5px/1.2 alga,'Stoury Serif',Georgia,serif;overflow-wrap:break-word;hyphens:auto;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.film-y{font:400 10.5px/1.1 alga,'Stoury Serif',Georgia,serif;color:var(--muted,#5c5940);}
.film:hover .film-art{border-color:var(--tile-hover,var(--olive));}
.film[aria-pressed="true"] .film-art{border-color:var(--ink);box-shadow:0 0 0 3px var(--coral);}
.film:focus-visible{outline:none;}
.film:focus-visible .film-art{outline:2px solid var(--focus,var(--olive));outline-offset:4px;}
.films-none{grid-column:1 / -1;font-size:15px;color:var(--muted,#5c5940);}
@media (prefers-reduced-motion: reduce){ .film-art{transition:none;} }
@media (max-width:640px){
  .films-wall{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84px;
    max-height:none;overflow-x:auto;overflow-y:hidden;padding:4px 4px 8px;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
            mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
  }
}

.itin-mine h2{
  font-family:'Stoury Display',system-ui,sans-serif;font-weight:600;
  font-size:clamp(28px,2.6vw,36px);line-height:1.05;letter-spacing:.01em;
}
.itin-mine h2:focus{outline:none;}
.itin-mine .when{margin-top:6px;font-family:'Stoury Display',system-ui,sans-serif;font-size:clamp(16px,1.3vw,18px);line-height:1.35;}
.itin-mine h3{
  font-family:'Stoury Display',system-ui,sans-serif;font-weight:600;
  font-size:clamp(18px,1.5vw,21px);margin-top:clamp(12px,1.2vw,16px);
}
.itin-date{font-weight:400;font-size:.8em;color:var(--muted,#5c5940);margin-left:4px;}
.itin-mine ul{list-style:none;margin-top:2px;}
.itin-mine li{font-size:clamp(16px,1.3vw,18px);line-height:1.4;padding:4px 0;border-bottom:1px solid var(--rule,rgba(28,26,19,.12));}
.itin-mine li:last-child{border-bottom:0;}
.itin-mine li b{font-family:'Stoury Display',system-ui,sans-serif;font-weight:600;}
.itin-mine .ln{display:block;overflow-wrap:anywhere;}
.itin-mine .acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0 4px;}
.itin-booked{display:inline-flex;align-items:center;min-height:34px;padding:0 10px;border-radius:var(--st-radius-sm,8px);background:var(--st-lime,#e3f09c);font:600 13px 'Stoury Display',system-ui,sans-serif;color:var(--st-on-fill,#1c1a13);}
.itin-empty,.itin-free{margin-top:10px;font-size:16px;line-height:1.45;color:var(--muted,#5c5940);}
.itin-free{margin-top:2px;font-size:15px;}
.itin-undo{margin-top:10px;font-size:16px;line-height:1.45;color:var(--text,var(--ink));}
.itin-undo .rail-link{min-height:44px;vertical-align:baseline;}
.itin-foot{margin-top:clamp(12px,1.2vw,16px);padding-top:10px;border-top:1px solid var(--rule,rgba(28,26,19,.12));}
.itin-count{font-family:'Stoury Display',system-ui,sans-serif;font-size:16px;}
.itin-run{
  margin-top:8px;min-height:44px;padding:8px 18px;border:0;border-radius:var(--st-radius,12px);cursor:pointer;
  font:600 17px 'Stoury Display',system-ui,sans-serif;color:var(--ink);background:var(--coral);
  box-shadow:var(--btn-shadow,0 2px 0 rgba(28,26,19,.18));
}
.itin-run:disabled{opacity:.55;cursor:not-allowed;}
.itin-run:focus-visible{outline:2px solid var(--focus,var(--olive));outline-offset:3px;}
.itin-mine .share{display:block;margin-top:clamp(12px,1.2vw,16px);}
.itin-keep{
  padding:0;border:0;background:none;cursor:pointer;min-height:32px;
  font-family:'Stoury Display',system-ui,sans-serif;font-size:clamp(16px,1.4vw,19px);color:var(--text,var(--ink));
  text-decoration:underline;text-decoration-color:var(--link-line,rgba(28,26,19,.4));text-decoration-thickness:1px;text-underline-offset:4px;
}
.itin-keep:hover,.itin-keep:focus-visible{text-decoration-color:currentColor;}
.itin-keep:focus-visible{outline:2px solid var(--focus,var(--olive));outline-offset:3px;border-radius:3px;}

.wm{
  font-family:'Stoury Display',system-ui,sans-serif;
  font-weight:800;                 /* maps onto the single Regular face */
  display:inline-flex;align-items:baseline;justify-content:center;
  line-height:1;letter-spacing:.01em;
  color:var(--butter);
  font-size:clamp(72px,18vw,280px);
}
.wm-sm{font-size:26px;}

/* The O of STOURY, as a photographic aperture. */
/* Size and position are taken from SP Blunt's OWN O, measured out of the font
   rather than eyeballed (2026-09-02, after CJ spotted the aperture reading
   small against the other caps):

     cap height of S/T/U/R/Y   0.710em
     the real O, ink height    0.720em  — 0.710 above the baseline, 0.010 BELOW
     the real O, ink width     0.678em
     the real O, advance       0.752em

   The O is TALLER than cap height because round letters are drawn with
   overshoot: a circle that stops exactly at the cap line reads as undersized
   next to flat-topped letters. The aperture was .7em, which was 1.4% under cap
   height and therefore about 4% under where a round letter needs to sit — small
   enough to look like a mistake and not enough to look deliberate. It is now
   .72em, dropped .01em below the baseline, which is exactly the vertical extent
   the type designer drew.

   It stays a TRUE CIRCLE rather than matching the real O's narrower .678em
   width: the circle is the brand device — it is the favicon and the profile
   mark — so it should be round, not an oval that happens to match one glyph.

   The margin absorbs the extra .02em so the ADVANCE is unchanged at .63em.
   That is not cosmetic: spec 5.1 records the wordmark measuring 292.6px against
   293px of available width at 390px, so a wider word overflows the phone. */
.owin{
  position:relative;display:inline-block;overflow:hidden;
  width:.72em;height:.72em;margin:0 -.045em;top:.01em;
  border-radius:50%;
  /* Coral ground only. There is deliberately NO base photograph here any more.
     It used to carry o-01 so the aperture was never blank at t=0, and that was
     the source of a real artifact: during every crossfade the outgoing layer at
     50% over the incoming at 50% composites to 75% opaque, not 100%, so a
     quarter of whatever sat beneath showed through — the first image ghosting
     faintly through every single transition. The keyframe below now holds the
     outgoing layer opaque until the incoming has fully arrived, so the stack is
     never partly transparent and the aperture is filled from t=0 without a base
     to bleed. Do not reintroduce one. */
  background:var(--coral) center/cover no-repeat;
}
/* The footer's O is a SOLID coral disc, not a photograph, and it needs more air
   than the hero's for a reason that is optical rather than geometric: the two
   are identical in em terms — 0.7em circle, -0.035em overlap, 0.01em tracking,
   measured — but a solid saturated disc reads heavier and larger than a
   textured one at the same diameter (irradiation), so the same geometry looks
   crowded. Swinging the margin from -0.035em to +0.015em gives it back.
   Judged against 0 and 0.03em: 0 is still snug, 0.03em floats the O loose. */
.owin-static{
  background-image:none;background-color:var(--coral);
  margin:0 .015em;
}
/* The opening beat: the O arrives CORAL and dissolves into the photograph.
   This began as a bug — .owin has a coral ground, the first layer snaps to
   opaque at t=0, and until o-01.jpg decodes you see coral through an opaque
   but empty layer. The duration of that flash was whatever the network
   decided, which is exactly why it read as a glitch. Making it deliberate
   turns a nondeterministic artifact into a fixed beat, and it happens to be
   the brand's own move: the coral disc IS the favicon and the O-window mark,
   so the page opens on the mark and the mark then opens its eye.

   The fade is on the STACK, not on a layer, so it composites as a group over
   the coral ground and does not disturb the per-layer crossfade underneath.
   One iteration with `both`, so it holds opaque forever after and the coral
   can never reappear — the layers' own composite is already always 1.0.
   Timing: 1.5s HOLD, then a 1.2s dissolve. It was briefly .1s/1s, which read
   as a flicker rather than a beat — too close to the loading artifact it was
   meant to replace. The hold is the point: the coral O has to be seen as a
   STATE, the brand's own mark, before it becomes a window. ease-in-out rather
   than ease-out because this is now a transition between two held states, not
   something getting out of the way.

   The rotation underneath runs from t=0 regardless, so the first frame is
   already ~28% into its pan when it is revealed. That is deliberate — it
   arrives moving rather than sitting still and then starting. */
.owin-stack{
  position:absolute;inset:0;
  animation:owin-intro 1.2s ease-in-out 1.5s 1 both;
}
@keyframes owin-intro{
  from{opacity:0}
  to  {opacity:1}
}

/* Each frame is cropped for its OWN motion rather than to one shared ratio,
   and the layer is sized to match that crop so the pan travels through real
   picture instead of zooming into a small one:

     .ol.h  wide image  -> layer is --span WIDE, aperture tall,  pans on X
     .ol.v  tall image  -> layer is aperture wide, --span TALL,  pans on Y
     .ol.z  square      -> layer fills the aperture, slow zoom, no travel

   --span is the image's long edge as a percentage of its short edge, taken
   from the file's actual dimensions. --from and --to are the pan endpoints as
   a percentage of the LAYER's own size, so the safe limit is
   -((span - 100) / span) x 100%; going past it walks an edge into the circle.
   docs/build-imagery.sh prints the dimensions these are derived from. */
.ol{
  position:absolute;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  opacity:0;
  /* --o0 / --oEnd parameterise the ONE shared keyframe so the first and last
     layers can behave differently without needing their own keyframe names —
     which matters because .ol.h/.v/.z already override animation-name, and a
     per-position keyframe would need every combination of the two. See the
     keyframe for what they do. */
  --o0:0;
  --oEnd:1;
  animation:owin-cycle var(--cycle) linear infinite both,
            owin-pan-x var(--cycle) linear infinite both;
}
/* The stack paints in DOM order, so each layer arrives ON TOP of the one it
   replaces — except the wrap from last back to first, where the incoming layer
   is at the BOTTOM. Those two ends are therefore the exceptions:
     first: snaps straight to opacity 1 instead of fading in. It is underneath
            the outgoing last layer at that moment, so the snap cannot be seen,
            and it means the last layer has something fully opaque to dissolve
            away over.
     last:  fades out over the handover instead of snapping off, because it is
            the one layer that reveals rather than being covered.
   Between them, every instant has at least one layer at opacity 1. */
.ol:first-child{--o0:1;}
.ol:last-child {--oEnd:0;}
.ol.h{top:0;bottom:0;left:0;height:100%;width:var(--span);}
.ol.v{left:0;right:0;top:0;width:100%;height:var(--span);
      animation-name:owin-cycle,owin-pan-y;}
.ol.z{inset:0;animation-name:owin-cycle,owin-zoom;}

/* A single animation-delay value applies to both animations in the list, so
   the pan stays locked to the frame's own visible window.

   Each endpoint is chosen by what is in the picture. CJ fixed the relative
   order of six frames — Hotel Empire, Chicago, Raoul's, Katz's, sandwich,
   Rocky — and that order is preserved exactly; the other three are interleaved
   between them to break up runs of similar frames. The rotation ENDS on Rocky:
   the traverse is its payoff, so it is held back rather than opening the set.
     o-01  Lower Manhattan, crosses and lands with One World Trade centred
     o-02  pans DOWN the blade sign, so the picture rides upward
     o-03  descends from the brickwork through the awning to the neon and car
     o-04  crosses to the CROWN & ANCHOR lettering and hanging sign
     o-05  runs right-to-left to finish on SEND A SALAMI
     o-06  a close-up with nowhere to travel, so it zooms instead
     o-07  Times Square, crosses left->right over the marquees and traffic
     o-08  descends to settle with the neon band centred
     o-09  crosses the storefront to the Union Jack window
     o-10  traverses the full width and lands with the statue centred */
.ol:nth-child(1) {background-image:url('img/o-01.jpg');animation-delay:calc(var(--step) * 0);--span:150%;   --from:0%;  --to:-22%;}
.ol:nth-child(2) {background-image:url('img/o-02.jpg');animation-delay:calc(var(--step) * 1);--span:125%;   --from:0%;  --to:-19%;}
.ol:nth-child(3) {background-image:url('img/o-03.jpg');animation-delay:calc(var(--step) * 2);--span:150.75%;--from:0%;  --to:-31%;}
.ol:nth-child(4) {background-image:url('img/o-04.jpg');animation-delay:calc(var(--step) * 3);--span:133.375%;--from:0%; --to:-20%;}
.ol:nth-child(5) {background-image:url('img/o-05.jpg');animation-delay:calc(var(--step) * 4);--span:150%;   --from:-28%;--to:-4%;}
.ol:nth-child(6) {background-image:url('img/o-06.jpg');animation-delay:calc(var(--step) * 5);--z0:1;--z1:1.12;}
.ol:nth-child(7) {background-image:url('img/o-07.jpg');animation-delay:calc(var(--step) * 6);--span:150%;   --from:0%;  --to:-31%;}
.ol:nth-child(8) {background-image:url('img/o-08.jpg');animation-delay:calc(var(--step) * 7);--span:150%;   --from:0%;  --to:-18%;}
.ol:nth-child(9) {background-image:url('img/o-09.jpg');animation-delay:calc(var(--step) * 8);--span:150%;   --from:0%;  --to:-19%;}
.ol:nth-child(10){background-image:url('img/o-10.jpg');animation-delay:calc(var(--step) * 9);--span:177.75%;--from:0%;  --to:-36.9%;}

/* Authored for N=10 / step 7.5s / cycle 75s. Recompute these percentages from
   --cycle if either changes; see the note beside --cycle above.

   THIS IS NOT A SYMMETRIC CROSSFADE, and that is the point. The obvious version
   fades the outgoing layer out while the incoming fades in — but two layers at
   50% composite to 75% opaque, not 100%, so for two seconds a quarter of
   whatever sits beneath the stack shows through. With a base image on .owin
   that meant the first frame ghosted through every transition; with no base it
   would mean the coral ground does.

   So the outgoing layer HOLDS at opacity 1 through the whole handover and only
   drops once the incoming layer has fully arrived on top of it — at which point
   it is completely covered and the drop cannot be seen. At every instant of the
   cycle at least one layer is fully opaque.

     0        -> 2.6667%   incoming fades in (over the outgoing, still at 1)
     2.6667%  -> 10%       sole visible layer
     10%      -> 12.6667%  handover: successor fades in on top; this one holds 1
     12.6667%              drops to 0, invisibly, beneath the opaque successor
     12.68%   -> 100%      off

   --o0 and --oEnd bend this for the two ends of the stack (see .ol above):
   the first layer starts AT 1 rather than fading up, and the last layer
   animates down to 0 across the handover rather than holding and snapping. */
@keyframes owin-cycle{
  0%       {opacity:var(--o0)}
  2.6667%  {opacity:1}
  10%      {opacity:1}
  12.6667% {opacity:var(--oEnd)}
  12.68%   {opacity:0}
  100%     {opacity:0}
}

/* The pan is LINEAR across the frame's WHOLE VISIBLE LIFE, 0 -> 12.6667% —
   the same window over which the layer is on screen at all. Constant velocity
   from the instant it appears to the instant it is covered.

   That is the third answer to this, and the first two are worth recording
   because each fixed one end and broke the other (all 2026-09-02):

     ease-in-out to 12.6667%  Stationary WHILE FADING IN. The fade-in is the
                              first fifth of the pan and that is the slow ramp,
                              so about a tenth of the travel happened while the
                              frame was appearing.
     linear to 10%            Fixed the entrance, broke the exit: the pan
                              reached its endpoint at 7.5s and then sat DEAD
                              STILL for the 2s handover. Worse than the original
                              — a full stop is more noticeable than a slow start.
     ease-out to 12.6667%     Better on paper (32% of travel by fade-in, 94% by
                              handover) but the deceleration is asymptotic, so
                              the last two seconds covered 6% of the travel —
                              about 1.5px/sec on o-02. Still reads as stopped.

   The lesson is that this is a VELOCITY problem, not a distance one. Motion is
   perceived as speed, so any curve that is slow at an end looks stopped at that
   end no matter how much ground it covers overall. Only a constant velocity
   looks continuous at both ends, which is what linear across the full window
   gives: the pan moves at exactly the same rate while fading in, while held,
   and while being covered.

   The cost, accepted deliberately: endpoints here are chosen by what is in the
   picture (the statue centred, One World Trade centred), and under constant
   velocity the frame is only ~79% of the way there when the handover starts and
   ~89% when the incoming frame is half opaque. The intended composition is
   therefore approached rather than parked on. That is the trade for never
   appearing to stop, and it reads better in motion than the alternative.

   Do NOT try to buy the landing back by extending the endpoints: several frames
   are already near the safe limit of -((span - 100) / span) x 100%, and o-02
   sits at -19% against a -20% limit, so there is no headroom to travel further.

   The reset to the start value happens at the 100%/0% boundary. For every
   layer but the first that is while opacity is 0; for the first layer, whose
   opacity snaps to 1 at 0%, it happens underneath the outgoing last layer,
   which is still fully opaque. Either way it is never seen. The endpoints come
   from the element's own custom properties, so one keyframe pair per axis
   serves every frame while each frame still moves its own way. */
@keyframes owin-pan-x{
  0%       {transform:translateX(var(--from))}
  12.6667% {transform:translateX(var(--to))}
  100%     {transform:translateX(var(--to))}
}
@keyframes owin-pan-y{
  0%       {transform:translateY(var(--from))}
  12.6667% {transform:translateY(var(--to))}
  100%     {transform:translateY(var(--to))}
}
@keyframes owin-zoom{
  0%       {transform:scale(var(--z0))}
  12.6667% {transform:scale(var(--z1))}
  100%     {transform:scale(var(--z1))}
}

/* `animation:none` cancels the pan as well as the crossfade, which matters
   more now than it did: an opacity fade is generally safe for vestibular
   sensitivity, but a sustained pan is real motion and is exactly what this
   query exists to suppress.
   Without an animation a layer would rest at its untransformed origin, which
   for o-01 is the far LEFT of the Lower Manhattan frame. So
   pin each variant to the endpoint its pan was travelling towards: the still
   becomes the frame the motion was going to land on. */
@media (prefers-reduced-motion: reduce){
  /* The cancel has to repeat the .h/.v/.z selectors, and that is not
     redundancy. `.ol.v` and `.ol.z` set animation-name above at specificity
     (0,2,0), which OUTRANKS a bare `.ol{animation:none}` at (0,1,0) — so five
     of the nine layers keep their animation-name here. They currently sit
     still only because the `animation` shorthand also resets
     animation-duration to its initial 0s, and a 0s animation with fill-mode
     none has no effect. That is a side-effect, not a guarantee: rewrite this
     as `animation-name:none` (which reads like a tidier equivalent) and the
     duration survives, and the pan restarts for exactly the visitors this
     query protects. Matching the specificity makes the cancel mean what it
     says. */
  .ol,.ol.h,.ol.v,.ol.z{animation:none;}
  /* No opening dissolve either — the still should simply be present. */
  .owin-stack{animation:none;opacity:1;}
  .ol{opacity:0;}
  .ol:nth-child(1){opacity:1;}
  .ol.h{transform:translateX(var(--to));}
  .ol.v{transform:translateY(var(--to));}
  .ol.z{transform:scale(var(--z1));}
}


.foot{
  background:var(--olive);
  /* The bottom is pulled in from clamp(48px,6vw,72px) to pay for .fine's
     margin-top below: the credit line drops away from the ticket without the
     footer growing. The two numbers move together — change one, change both. */
  padding:clamp(24px,3vw,36px) 0 clamp(38px,4.3vw,62px);
  /* STOUR-164: the last line ends above the Feedback pill's corner (0px with the widget off). */
  padding-bottom:max(clamp(38px,4.3vw,62px), var(--feedback-reserve-h, 0px));
  text-align:center;
}
.foot .wm{color:var(--butter);margin-bottom:clamp(14px,1.8vw,20px);}
.foot .fine{
  /* 15px, up from 13px. Size and colour are the ONLY levers here: 'Stoury
     Serif' is a single Alga Light file declared font-weight:300 700, so every
     weight in that range maps onto the one Light face and asking for a heavier
     one changes nothing — while asking for 800 would fall outside the range and
     let the browser synthesize a faux bold, which is exactly what the SP Blunt
     rule exists to prevent. */
  font-size:15px;letter-spacing:.02em;
  /* Full-strength cream, up from rgba(...,.9). The old alpha composited to
     #E5DCC3 = 5.17:1; this is 5.93:1, and it is the same cream the hero tagline
     uses. The earlier comment argued .9 over .72 because .72 was 3.95:1 and
     failed AA at 13px — that reasoning stands, this just goes further in the
     same direction. It stays fine print by being small and set apart, not by
     being faint. */
  color:#f4ead2;
  /* Drops the credit line clear of the ticket. Paid for out of the footer's
     bottom padding above, so the footer's overall height is unchanged. */
  margin-top:clamp(20px,2.6vw,32px);
}
/* Inherits the colour above rather than setting its own, so the 5.19:1 the
   comment argues for still holds. The underline is what marks it as a link —
   a faint one at rest so it stays fine print, full strength on interaction. */
.foot .fine-link{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:rgba(244,234,210,.32);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
/* The credit line is two halves, and each one is nowrap, so the only place it
   can break is the space between them. Left to itself the line wrapped after
   "Inc." and left "venture." alone on the second row (CJ, 2026-09-03). Measured
   at 15px: the whole line is 327.4px and holds one row down to a 372px
   viewport; below that it becomes exactly two rows, 92.3px and 231.7px, and
   the wider half still fits down to 276px — narrower than the wordmark's own
   floor, so this never becomes the thing that overflows. */
.foot .fine-link span{white-space:nowrap;}
/* STOUR-125: Terms, Privacy and Log out follow the credit on the same line and
   hold together as one unbreakable group. The whole line measures 634px; at
   700px and below the group takes its own line under the credit and the dot
   that joined them is dropped, so no line ends on a stray dot. */
.foot .fine .legal-links{white-space:nowrap;}
@media (max-width:700px){
  .foot .fine .lead-sep{display:none;}
  .foot .fine .legal-links{display:block;margin-top:4px;}
}
.foot .fine-link:hover,
.foot .fine-link:focus-visible{text-decoration-color:currentColor;}
.foot .fine-link:focus-visible{
  outline:2px solid var(--butter);outline-offset:3px;border-radius:3px;
}

/* ---- footer contact link (added 2026-09-03) ---- */
/* The page's one contact link. It follows the "Coming soon" ticket directly
   because the two are one beat — the ticket says the product is not live yet,
   and this is how to ask about it. It collects nothing: no form, no field, no
   backend, just an address.

   Set in Stoury Serif, not the display face. This is body copy rather than a
   headline, and the display face is caps-only, so the address would render
   INQUIRIES@STOURYTRAVEL.COM — shouting, and harder to read as an email.

   Cream on olive is 5.93:1, the same measure as the credit line. What separates
   the two is SIZE, not colour, and that is forced rather than chosen: sage is
   unavailable at 2.00:1, and butter would hand a contact link more voice than
   the wordmark above it. Raised to 18-22px on 2026-09-03 (from 16-19), CJ's
   call — it widens the gap to the 15px credit line, which is the whole reason
   size is carrying this. */
.foot .contact{
  /* Collapses against .soon's larger bottom margin, so this value only bites
     if that one is ever reduced below it. */
  margin-top:clamp(10px,1.4vw,14px);
  font-size:clamp(18px,1.9vw,22px);
  letter-spacing:.02em;
  color:#f4ead2;
}
/* The vertical padding is a touch target, not spacing. The line is ~31px tall
   at its 22px ceiling and WCAG 2.5.8 asks for 44px, so 10px a side clears it
   comfortably. The margins around it were reduced to pay for it, so the padding does
   not read as a gap on top of the gap. */
.foot .contact-link{
  display:inline-block;
  padding:10px 6px;
  color:inherit;
  text-decoration:underline;
  /* Heavier than the credit line's .32 alpha. That link is an attribution most
     visitors never need; this is the one thing on the page to act on, so it
     reads as a link at rest rather than only on hover. */
  text-decoration-color:rgba(244,234,210,.55);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.foot .contact-link:hover,
.foot .contact-link:focus-visible{text-decoration-color:currentColor;}
.foot .contact-link:focus-visible{
  outline:2px solid var(--butter);outline-offset:3px;border-radius:3px;
}

/* ---- responsive ---- */
@media (max-width:979px){
  .plan .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .home-map{grid-column:1 / -1;grid-row:1;min-height:420px;}
}
@media (max-width:860px){
  .wrap{padding:0 22px;}
  .hero .wrap{grid-template-columns:1fr;gap:28px;}
  .hero .wm{font-size:clamp(72px,18vw,150px);}
  .hero .lead{max-width:640px;margin:0 auto;}
  .booking .wrap{grid-template-columns:1fr;}
  .booking .slides{justify-self:start;}
}
@media (max-width:640px){
  .wrap{padding:0 16px;}
  .nav .wrap{min-height:56px;}
  .nav-links a{padding:10px 6px;font-size:15px;}
  .plan .wrap{grid-template-columns:1fr;}
  .itin{transform:none;}
  .home-map{min-height:360px;}
  .slides{grid-template-columns:repeat(4,minmax(0,1fr));width:100%;}
  .sl-cap{font-size:9.5px;letter-spacing:0;padding:20px 4px 5px;}
}
@media (max-width:400px){
  .hero .wm{font-size:18vw;}
}

/* ---- the questions first (STOUR-137) ----
   Get Started asks before it shows: section.plan gets data-step (home-plan.js)
   '1' (genre) or '2' (films and shows), one full-width question where the three
   columns were and no map, then 'build', the summary bar on top and the three
   columns again, the dates or days at the top of the rail (round 2). The
   flow and the grid are siblings inside the section; the grid is display:none
   until 'build', so the map only appears once the questions are answered. A
   step fades in (opacity and a short rise); the build area fades in on opacity
   only, so the phone sheet (position:fixed) never gets a moving containing
   block. Colours read role tokens, dark values in the token blocks below. */
:root{--flow-bg:var(--st-surface,#fbf6ea);--sum-bg:#fbf6ea;--sum-border:rgba(28,26,19,.14);}
:root[data-theme="dark"]{--flow-bg:var(--st-surface,#2a281d);--sum-bg:#2a281d;--sum-border:rgba(244,234,210,.16);}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--flow-bg:var(--st-surface,#2a281d);--sum-bg:#2a281d;--sum-border:rgba(244,234,210,.16);}
}
.plan .plan-flow{display:block;}
.plan .plan-flow[hidden]{display:none;}
.plan[data-stage="plan"]:not([data-step="build"]) .plan-grid{display:none;}
.flow-step{
  background:var(--flow-bg);border-radius:12px;
  padding:clamp(24px,3vw,44px) clamp(20px,3vw,48px);
  animation:flowIn .3s ease both;
}
.flow-step h2{
  font-family:'Stoury Display',system-ui,sans-serif;font-weight:600;
  font-size:clamp(32px,3.4vw,46px);line-height:1.05;letter-spacing:.01em;
}
.flow-step h2:focus{outline:none;}
.flow-n{margin-top:8px;font-size:18px;line-height:1.35;color:var(--muted,#5c5940);}
.flow-n:empty{display:none;}
.flow-undo{margin-top:10px;font-size:17px;line-height:1.45;}
.flow-undo .rail-link{vertical-align:baseline;}
.flow-body{margin-top:clamp(18px,2.2vw,30px);max-width:none;}
.flow-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:12px 20px;margin-top:clamp(24px,2.8vw,36px);}
.flow-next{border:0;cursor:pointer;padding:14px 38px;font-size:var(--st-fs-label,14px);margin-left:auto;}
.flow-back,.flow-over{font-size:18px;}
/* STOUR-162: "Just browsing? See the map", quiet and under Next, the step-1 way straight to the map. */
.flow-browse{margin-top:8px;text-align:right;font-size:17px;line-height:1.45;color:var(--muted,#5c5940);}
.flow-browse .rail-link{font-size:17px;vertical-align:baseline;}
/* Step 3 (STOUR-155): the dates or days on the left, the start and the free-text line on the right. */
/* Round 6 (CJ 12:38): one 2 by 2 grid, so the days question and "Anything we should know?" start on
   the same row: the dates beside the start, the days beside the note. The two column wrappers are
   display:contents and each block is placed; on the phone it is one column in reading order. */
.flow-trip{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,2.4vw,32px) clamp(20px,3vw,48px);align-items:start;}
.flow-trip-main,.flow-trip-side{display:contents;}
.flow-trip .rail-step,.flow-trip .rail-step + .rail-step{margin-top:0;}
.flow-trip-main > .rail-step{grid-column:1;}
.flow-trip-side > .rail-step{grid-column:2;}
.flow-trip-main > .rail-step:first-child,.flow-trip-side > .rail-step:first-child{grid-row:1;}
.flow-trip-main > .rail-step:nth-child(2),.flow-trip-side > .rail-step:nth-child(2){grid-row:2;}
.flow-trip .rail-step legend{font-size:clamp(17px,1.6vw,20px);}
.flow-trip .rail-help{font-size:16px;}
.flow-trip .rail-dates{grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:520px;}
.flow-trip .rail-dates label{grid-template-columns:minmax(0,1fr);gap:4px;font-size:15px;}
/* Round 8 (CJ 12:45): the picker on top, its small label beneath, as the start block reads (heading, field, note). */
.flow-trip .rail-dates .date-l{font:13px/1.2 'Stoury Display',system-ui,sans-serif;color:var(--muted,#5c5940);}

.flow-trip-side input[type="text"]{max-width:520px;}

.flow-step .tiles{grid-template-columns:repeat(3,minmax(0,260px));gap:12px;}
.flow-step .tiles .tile-soon{grid-column:auto;}
.flow-step .tile{min-height:96px;padding:14px 18px;font-size:23px;}
.flow-step .tile-n{font-size:13px;}
.flow-step .tile-soon{font-size:19px;}
.flow-step .films-line{font-size:17px;}
.flow-step .films-wall{grid-template-columns:repeat(8,minmax(0,1fr));gap:14px 12px;}
/* Round 2 (CJ 2026-10-13: "it's confusing"): the whole wall shows and grows with the page, never a
   box that scrolls inside it, so Next is always under the last poster. */
.flow-step .films-wall{
  max-height:none;overflow:visible;padding-bottom:4px;
  -webkit-mask-image:none;mask-image:none;
}
.flow-step .film-t{font-size:13px;}
.flow-step .film-y{font-size:12px;}
.flow-sum:not([hidden]){
  display:flex;align-items:center;margin-bottom:clamp(16px,2vw,24px);
  padding:8px clamp(14px,1.6vw,20px);
  background:var(--sum-bg);border:1px solid var(--sum-border);border-radius:12px;
}
.sum-list{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;list-style:none;}
.sum-list li{display:flex;align-items:center;}
.sum-list li[hidden]{display:none;}
.sum-list li + li::before{content:"\00b7";margin-right:6px;color:var(--muted,#5c5940);}
.sum-link{
  min-height:44px;padding:0 4px;border:0;background:none;cursor:pointer;
  font:600 18px 'Stoury Display',system-ui,sans-serif;color:var(--text,var(--ink));
  text-decoration:underline;text-decoration-color:var(--link-line,rgba(28,26,19,.4));text-underline-offset:4px;
}
.sum-link:hover{text-decoration-color:currentColor;}
.sum-link:focus-visible{outline:2px solid var(--focus,var(--olive));outline-offset:2px;border-radius:3px;}
/* backwards, never both: a finished opacity animation that still fills keeps .plan-grid a stacking
   context, which traps the phone sheet (z-index 900) under the footer's wordmark (STOUR-138 round 2). */
.plan[data-step="build"] .plan-grid{animation:flowFade .32s ease backwards;}
@keyframes flowIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes flowFade{from{opacity:0;}to{opacity:1;}}
@media (max-width:1100px){
  .flow-step .films-wall{grid-template-columns:repeat(6,minmax(0,1fr));}
}
@media (max-width:640px){
  .flow-step{padding:20px 16px;}
  .flow-step .tiles{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .flow-step .tiles .tile-soon{grid-column:1 / -1;}
  .flow-step .tile{min-height:72px;font-size:19px;}
  /* A wrapping grid on the phone too, three across: no sideways strip (round 2). */
  .flow-step .films-wall{
    grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:auto;
    max-height:none;overflow:visible;padding:4px 4px 4px;
    -webkit-mask-image:none;mask-image:none;
  }
  .flow-next{padding:12px 28px;}
  .flow-trip{grid-template-columns:minmax(0,1fr);}
  .flow-trip-main > .rail-step:nth-child(n),.flow-trip-side > .rail-step:nth-child(n){grid-column:1;grid-row:auto;}
  .sum-link{font-size:16px;}
}
@media (prefers-reduced-motion: reduce){
  .flow-step,.plan[data-step="build"] .plan-grid{animation:none;}
}

/* ---- light and dark (STOUR-134) ----
   The page follows the system until the person flips the switch in the nav;
   the choice is kept in the browser (/static/stoury-theme.js sets
   data-theme on <html>). The palette tokens above keep their names and values
   because they are used as colours, not roles (cream is both the page and the
   hero's text). The dark set is ROLE tokens instead: each rule below reads its
   role with the light value as the fallback, so in light mode nothing is
   defined and the page is exactly as before. Alex's designs replace the values,
   not the mechanism. Contrast in dark: body text #f4ead2 on #1c1a13 is 14.6:1,
   butter on the nav's #26241a is 11:1, ink on the coral button is unchanged. The olive
   hero and footer are the same in both (STOUR-136). */
:root{color-scheme:light dark;}
:root[data-theme="light"]{color-scheme:light;}
:root[data-theme="dark"]{
  color-scheme:dark;
  --page:#1c1a13; --text:#f4ead2; --accent-text:#f4ead2; --focus:#f7d18a;
  --nav-bg:#26241a; --nav-hover:rgba(244,234,210,.10);
  --band-bg:#26241a; --frame:#1c1a13;
  --steps-bg:rgba(247,209,138,.10); --card:#2a281d; --card-border:rgba(247,209,138,.6);
  --card-shadow:0 10px 28px rgba(0,0,0,.45); --link-line:rgba(244,234,210,.45);
  --btn-shadow:0 2px 0 rgba(0,0,0,.4);
  --field-bg:#211f16; --field-border:rgba(244,234,210,.28); --tile-bg:#2a281d; --tile-hover:#f7d18a;
  --muted:#c9bfa6; --rule:rgba(244,234,210,.14); --ok:#87b5a6;
  --film-card:#f4ead2; --film-card-text:#26241a;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --page:#1c1a13; --text:#f4ead2; --accent-text:#f4ead2; --focus:#f7d18a;
    --nav-bg:#26241a; --nav-hover:rgba(244,234,210,.10);
    --band-bg:#26241a; --frame:#1c1a13;
    --steps-bg:rgba(247,209,138,.10); --card:#2a281d; --card-border:rgba(247,209,138,.6);
    --card-shadow:0 10px 28px rgba(0,0,0,.45); --link-line:rgba(244,234,210,.45);
    --btn-shadow:0 2px 0 rgba(0,0,0,.4);
    --field-bg:#211f16; --field-border:rgba(244,234,210,.28); --tile-bg:#2a281d; --tile-hover:#f7d18a;
    --muted:#c9bfa6; --rule:rgba(244,234,210,.14); --ok:#87b5a6;
    --film-card:#f4ead2; --film-card-text:#26241a;
  }
}
body{background:var(--page,var(--cream));color:var(--text,var(--ink));}
.nav{background:var(--st-surface,#fbf6ea);}
.nav .wm{color:var(--st-text,#1c1a13);}
.nav-links{margin-left:auto;}
.nav-links a{color:var(--text,var(--ink));}
.nav-links a:hover{background:var(--nav-hover,rgba(28,26,19,.08));}
.nav-links a:focus-visible{outline-color:var(--focus,var(--olive));}
.booking{background:var(--band-bg,var(--butter));color:var(--text,var(--ink));}
.booking .soon{color:var(--text,var(--ink));}
.slides{background:var(--frame,var(--cream));}
.plan{background:var(--page,var(--cream));}
.steps-card{background:var(--steps-bg,rgba(247,209,138,.55));}
.steps li::before{color:var(--text,var(--ink));}
.btn{box-shadow:none;}
.btn:focus-visible{outline-color:var(--focus,var(--olive));}
.art figcaption{color:var(--text,var(--ink));}
.itin{
  background:var(--card,#fbf6ea);color:var(--text,var(--ink));
  border-color:var(--card-border,var(--butter));box-shadow:var(--card-shadow,0 10px 28px rgba(28,26,19,.14));
}
.itin .share a{color:var(--text,var(--ink));text-decoration-color:var(--link-line,rgba(28,26,19,.4));}
.itin .share a:focus-visible{outline-color:var(--focus,var(--olive));}
/* STOUR-136: the hero and the footer are olive with cream text in light, so they are
   already dark and keep their light look in dark: same olive, same cream text, same butter
   wordmark and links. They read the palette, never a dark role token. */
.hero,.foot{background:var(--olive);}

/* The switch: a moon in light (go dark), a sun in dark (go light). */
.theme-btn{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:44px;height:44px;margin-left:4px;padding:0;
  border:0;border-radius:8px;background:transparent;cursor:pointer;
  color:var(--text,var(--ink));
}
.theme-btn:hover{background:var(--nav-hover,rgba(28,26,19,.08));}
.theme-btn:focus-visible{outline:2px solid var(--focus,var(--olive));outline-offset:2px;}
.theme-btn .i-sun{display:none;}
.st-dark .theme-btn .i-sun{display:block;}
.st-dark .theme-btn .i-moon{display:none;}

@media print{
  .nav,.hero,.booking,.foot{background:none;}
  .hero,.hero .lead,.hero .tagline,.foot,.foot .fine,.foot .contact,.nav .wm,.foot .wm{color:var(--ink);}
  .ol{display:none;}
  .theme-btn{display:none;}
  .owin{background:none;box-shadow:inset 0 0 0 2px var(--ink);}
  .slides{display:none;}
  .itin{transform:none;box-shadow:none;}
  .foot .fine-out{display:none!important;}
}

/* ---- Been here (STOUR-133) ----
   "Show places I've been" sits at the foot of the rail, above Plan my days;
   "Been here" joins Book and Remove on each itinerary line (.itin-act, below). The
   map popup's control is stoury-dock.js's (its dark set is stoury-dark.css,
   which /home does not load, so the popup stays light here like the rest of
   it), and the dimmed pin and its tick are stoury-map.js tokens. Role tokens
   with the light value as the fallback; dark values in the two blocks below. */
.rail-been{margin-top:clamp(14px,1.4vw,18px);}
.rail-check{
  display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;
  font:16px/1.3 'Stoury Display',system-ui,sans-serif;color:var(--text,var(--ink));
}
.rail-check input{
  flex:none;width:20px;height:20px;margin:0;cursor:pointer;
  accent-color:var(--check-accent,var(--olive));
}
.rail-check input:focus-visible{outline:2px solid var(--focus,var(--olive));outline-offset:2px;}

/* ---- Itinerary line buttons (STOUR-133 round 2) ----
   CJ (2026-10-12): Remove and Been here have to look like buttons. One row per
   line: Book (the coral of .btn), Been here (outlined olive with a check; filled
   olive reading "Been here ✓" when marked), Remove (outlined soft red with an
   X, last). Reusable: any itinerary line uses .itin-act plus .book, .been,
   .remove and .is-on (STOUR-131's planned lines adopt them). 34px tall, 44px on
   a phone. Light contrast on the #fbf6ea card: link #a8492a 5.3:1, olive 6.5:1;
   dark: #f0937a 6.4:1 and #cfc9a0 8.8:1 on #2a281d. */
.itin-act{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  min-height:34px;padding:0 10px;border-radius:var(--st-radius-sm,8px);cursor:pointer;
  font:12px/1 'Stoury Display',system-ui,sans-serif;letter-spacing:0;white-space:nowrap;
  border:1.5px solid transparent;background:none;color:var(--text,var(--ink));
  transition:background-color .15s,color .15s,border-color .15s;
}
.itin-act:focus-visible{outline:2px solid var(--focus,var(--olive));outline-offset:2px;}
.itin-act .ic{flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.itin-act .ic-ring{fill:none;stroke:none;}
.itin-act.book{background:var(--coral);border-color:var(--coral);color:var(--ink);box-shadow:var(--btn-shadow,0 2px 0 rgba(28,26,19,.18));}
.itin-act.book:hover{filter:brightness(1.04);}
.itin-act.book:disabled{
  cursor:not-allowed;filter:none;box-shadow:none;
  background:var(--act-off-bg,rgba(28,26,19,.06));border-color:var(--act-off-border,rgba(28,26,19,.14));color:var(--act-off-text,rgba(28,26,19,.45));
}
.itin-act.been{border-color:var(--been-line,var(--olive));color:var(--been-line,var(--olive));}
.itin-act.been:hover{background:var(--been-hover,rgba(92,89,64,.1));}
.itin-act.been.is-on{background:var(--been-line,var(--olive));color:var(--been-on-text,var(--cream));}
.itin-act.been.is-on:hover{filter:brightness(1.1);}
.itin-act.been.is-on .ic-ring{fill:currentColor;}
.itin-act.been.is-on .ic-tick{stroke:var(--been-line,var(--olive));stroke-width:2.2;}
.itin-act.remove{border-color:var(--remove-line,#a8492a);color:var(--remove-line,#a8492a);}
.itin-act.remove:hover{background:var(--remove-line,#a8492a);color:var(--remove-on-text,#fbf6ea);}
@media (max-width:700px),(pointer:coarse){
  .itin-act,.itin-booked{min-height:44px;}
}
:root[data-theme="dark"]{
  --check-accent:#f7d18a;
  --been-line:#cfc9a0; --been-hover:rgba(207,201,160,.14); --been-on-text:#1c1a13;
  --remove-line:#f79e78; --remove-on-text:#1c1a13;
  --act-off-bg:rgba(244,234,210,.06); --act-off-border:rgba(244,234,210,.16); --act-off-text:rgba(244,234,210,.45);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --check-accent:#f7d18a;
    --been-line:#cfc9a0; --been-hover:rgba(207,201,160,.14); --been-on-text:#1c1a13;
    --remove-line:#f79e78; --remove-on-text:#1c1a13;
    --act-off-bg:rgba(244,234,210,.06); --act-off-border:rgba(244,234,210,.16); --act-off-text:rgba(244,234,210,.45);
  }
}

/* ---- the phone and tablet builder (STOUR-135, spec 2026-10-12 STOUR-78 §3.6) ----
   Under 980px the landing state reads How it works, the example card
   (unrotated), the map, then Get Started, one column (CJ's ruling, 2026-10-12,
   round 3: the layout is width-only; 980px and up is the desktop three columns): the
   left column and the steps wrapper become display:contents so the steps card
   and the Get Started line are grid items of their own, and order places them.
   Desktop markup and layout are unchanged. In the builder
   the rail comes first and scrolls with the page: dates side by side, days on
   one row, genre tiles 2 by 2, the poster strip, then Where you start and the
   free-text line full width, with Plan my days and Start over held in a sticky
   row just above the sheet. Then the map at 56vh, then "Your itinerary" as a
   bottom sheet (/static/home/home-sheet.js adds the grab handle and sets
   data-snap: peek, half, full; --sheet-peek is measured there). The sheet sits
   under every dialog and the Book my trip bar (z-index 900). Between 641 and
   980px the builder puts the rail and the map side by side and the itinerary
   below, full width. */
.sheet-grab{display:none;}
:root{--sheet-bg:#fbf6ea;--sheet-bar:rgba(28,26,19,.32);--sheet-acts-bg:#f7dfb1;--sheet-shadow:0 -8px 24px rgba(28,26,19,.18);}
:root[data-theme="dark"]{--sheet-bg:#2a281d;--sheet-bar:rgba(244,234,210,.42);--sheet-acts-bg:#322c1f;--sheet-shadow:0 -8px 24px rgba(0,0,0,.5);}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--sheet-bg:#2a281d;--sheet-bar:rgba(244,234,210,.42);--sheet-acts-bg:#322c1f;--sheet-shadow:0 -8px 24px rgba(0,0,0,.5);}
}

@media (min-width:641px) and (max-width:980px){
  .plan[data-stage="plan"] .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);}
  .plan[data-stage="plan"] .home-map{
    grid-column:2;grid-row:1;align-self:start;height:min(78vh,760px);min-height:420px;
  }
  /* STOUR-169: beside the rail on a tablet too, the map stays in view while the rail scrolls. */
  .plan[data-step="build"] .home-map{position:sticky !important;top:16px;}
  .plan[data-stage="plan"] .itin{grid-column:1 / -1;}
}

@media (max-width:979px){
  /* Landing, phones and upright tablets: one column, How it works, the example card, the map, Get Started. */
  .plan:not([data-stage="plan"]) .wrap{grid-template-columns:minmax(0,1fr);}
  .plan:not([data-stage="plan"]) .plan-left,
  .plan:not([data-stage="plan"]) .plan-steps{display:contents;}
  .plan:not([data-stage="plan"]) .rail{display:none;}
  .plan:not([data-stage="plan"]) .steps-card{order:1;}
  .plan:not([data-stage="plan"]) .itin{order:2;transform:none;}
  .plan:not([data-stage="plan"]) .home-map{order:3;grid-row:auto;}
  .plan:not([data-stage="plan"]) .cta{order:4;margin-top:0;}
}

@media (max-width:640px){
  /* Tap targets: 44px everywhere on the page. */
  .nav-links a{display:inline-flex;align-items:center;min-height:44px;}
  .films-line .films-all,.itin-act,.itin-keep,.soon-chip{min-height:44px;}
  .films-line .films-all{margin:-10px 0;}
  .itin .share a{display:inline-flex;align-items:center;min-height:44px;}
  .nav .wm{padding:calc((44px - 1em) / 2) 0;}
  .itin-booked{min-height:44px;}

  /* The rail. */
  .plan[data-stage="plan"] .home-map{grid-row:auto;height:56vh;min-height:300px;}
  .rail-dates{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .rail-dates label{grid-template-columns:minmax(0,1fr);gap:4px;}
  .rail input[type="date"],.flow-trip input[type="date"]{padding:9px 6px;}
  .stepper{flex-wrap:nowrap;}
  .tile{min-height:60px;font-size:17px;}
  .plan[data-step="build"] .home-map{order:1;}
  .plan[data-step="build"] .plan-left{order:2;}
  .plan[data-step="build"] .itin{order:3;}
  /* The foot (Show places I've been, Build my itinerary, Back, Start over) is held just above the sheet. */
  .rail-foot{
    position:sticky;z-index:5;
    bottom:calc(var(--sheet-peek,120px) + var(--sheet-floor));
    margin:clamp(14px,2vw,20px) -16px -16px;padding:8px 16px 12px;border-radius:0;
    background:var(--sheet-acts-bg);box-shadow:0 -6px 12px -6px rgba(0,0,0,.25);
  }
  .rail-foot .rail-been{margin-top:0;}
  .rail-acts{margin-top:6px;row-gap:2px;}
  .rail-plan{padding:10px 20px;font-size:var(--st-fs-label,13px);}
  .rail-acts .rail-plan{flex:1 0 100%;}

  /* The sheet. Its floor is the safe area, or the Feedback pill's reserved corner when that is taller
     (STOUR-164): the pill sits in a strip under the sheet's lines and Book my trip at every snap. */
  :root{--sheet-floor:max(env(safe-area-inset-bottom,0px), var(--feedback-reserve-h, 0px));}
  .plan[data-stage="plan"] .itin{
    position:fixed;left:0;right:0;bottom:0;z-index:900;
    /* Exactly the viewport's width (STOUR-138 round 2): border-box, no sideways scroll inside. */
    width:auto;max-width:100vw;box-sizing:border-box;margin:0;overflow-x:hidden;
    display:flex;flex-direction:column;
    height:calc(var(--sheet-peek,120px) + var(--sheet-floor));
    padding:0 16px var(--sheet-floor);
    background:var(--sheet-bg);border-width:2px 0 0;border-radius:16px 16px 0 0;
    box-shadow:var(--sheet-shadow);
    transition:height .28s ease;
  }
  .plan[data-stage="plan"] .itin[data-snap="half"]{height:50vh;height:50dvh;}
  .plan[data-stage="plan"] .itin[data-snap="full"]{height:calc(100vh - 72px);height:calc(100dvh - 72px);}
  .plan[data-stage="plan"] .itin.is-dragging{transition:none;}
  .plan[data-stage="plan"] .sheet-grab{
    display:flex;align-items:center;justify-content:center;flex:none;
    width:calc(100% + 32px);min-height:44px;margin:0 -16px;padding:0;
    border:0;background:none;cursor:grab;touch-action:none;
  }
  .sheet-bar{display:block;width:44px;height:5px;border-radius:3px;background:var(--sheet-bar);}
  .plan[data-stage="plan"] .sheet-grab:focus-visible{outline:2px solid var(--focus,var(--olive));outline-offset:-4px;border-radius:12px;}
  .plan[data-stage="plan"] .itin-ex{display:none;}
  .plan[data-stage="plan"] .itin-mine:not([hidden]){
    display:flex;flex-direction:column;flex:1;min-height:0;
    overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding-bottom:16px;
  }
  .plan[data-stage="plan"] .itin[data-snap="peek"] .itin-mine{overflow:hidden;}
  .plan[data-stage="plan"] .itin-foot{
    order:-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;
    margin:0 0 10px;padding:0 0 10px;border-top:0;border-bottom:1px solid var(--rule,rgba(28,26,19,.12));
  }
  .plan[data-stage="plan"] .itin-run{margin-top:0;}
  /* "Your itinerary" heads the sheet, above the count and Book my trip, so the collapsed sheet says
     what it is (STOUR-138 round 2); home-sheet.js measures the peek down to the foot. */
  .plan[data-stage="plan"] .itin-mine h2{order:-2;font-size:22px;margin:0 0 6px;}
  /* The footer clears the sheet at the foot of the page. */
  body:has(.plan[data-step="build"]) .foot{padding-bottom:calc(var(--sheet-peek,120px) + var(--sheet-floor) + 24px);}
}
@media (max-width:640px) and (prefers-reduced-motion: reduce){
  .plan[data-stage="plan"] .itin{transition:none;}
}
/* The nav at 320 to 400px: the wordmark, three links and the theme switch fit on one line. */
@media (max-width:400px){
  .nav .wrap{gap:4px;padding-left:12px;padding-right:12px;}
  .nav .wm.wm-sm{font-size:21px;}
  .nav-links{gap:0;}
  .nav-links a{padding:10px 5px;font-size:14px;letter-spacing:0;white-space:nowrap;}
  .theme-btn{margin-left:0;}
}

/* "Your itinerary", tightened (STOUR-155 round 3). Last in the file so it wins over the builder's
   earlier sizes: smaller type, smaller line buttons, and on a wide screen it
   stays in view beside the map while the stop list scrolls. Round 7 (CJ 12:42): no height cap and no
   inner scroll; a trip taller than the window scrolls with the page. */
.itin-mine h2{font-size:clamp(20px,1.7vw,24px);white-space:nowrap;}
.itin-mine .when{margin-top:4px;font-size:14px;}
.itin-mine h3{font-size:15px;margin-top:10px;}
.itin-mine li{font-size:14px;line-height:1.35;padding:3px 0;}
.itin-mine .acts{gap:4px;margin:3px 0 2px;}
.itin-mine .itin-act{min-height:26px;padding:0 8px;font-size:11px;}
.itin-mine .itin-act .ic{width:11px;height:11px;}
.itin-booked{min-height:26px;font-size:12px;}
.itin-empty{font-size:14px;margin-top:8px;}
.itin-foot{margin-top:10px;padding-top:8px;}
.itin-count{font-size:14px;}
.itin-run{min-height:36px;padding:6px 14px;font-size:var(--st-fs-label,14px);margin-top:6px;}
.itin-mine .share{margin-top:10px;}
.itin-mine .pl-h{margin-top:10px;}
.itin-mine .pl-note{font-size:13px;}
.itin-mine li.pl-line,.itin-mine li.pl-stayline{padding:4px;}
/* STOUR-169 round 2 (CJ 2026-10-14): Your itinerary is a classic sticky sidebar. home-plan.js
   (stickItin) sets top to min(16px, window height less the column's height less 16px) and adds
   .is-sticky: a short column holds under the top, a tall one scrolls with the page until its foot
   reaches the bottom of the window, then holds. No inner scrollbox. */
@media (min-width:981px){
  .plan[data-step="build"] .itin{
    align-self:start;
    padding:14px 16px;
  }
  .plan[data-step="build"] .itin.is-sticky{position:sticky;}
  /* Round 5: the On the map rail's column too. The How it works card shares its grid cell (for the
     cross-fade) and is taller, so it leaves the layout in the build step and the column is the rail. */
  .plan[data-step="build"] .plan-steps{display:none;}
  .plan[data-step="build"] .plan-left.is-sticky{position:sticky;}
}
/* Remove all (STOUR-169), right of Book my trip in the foot. Round 3 (CJ: "it should stay in the same
   spot"): a text link, smaller, no button chrome; "Remove all" and "Confirm" share one grid cell, so the
   wider label always holds the width and arming changes colour only, never place. The row never wraps. */
.itin-foot-acts{display:flex;flex-wrap:nowrap;align-items:center;gap:12px;margin-top:6px;}
.itin-foot-acts .itin-run{margin-top:0;flex:none;}
.itin-clear{
  display:inline-grid;align-items:center;justify-items:center;flex:none;min-height:30px;padding:2px 6px;border:0;border-radius:6px;
  cursor:pointer;background:transparent;color:var(--remove-line,#a8492a);
  font:13px/1.2 'Stoury Display',system-ui,sans-serif;letter-spacing:.03em;white-space:nowrap;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
}
.itin-clear > span{grid-area:1 / 1;}
.itin-clear .lbl-armed,.itin-clear.is-armed .lbl-idle{visibility:hidden;}
.itin-clear.is-armed .lbl-armed{visibility:visible;}
.itin-clear:hover{background:var(--remove-hover,rgba(176,74,50,.1));}
.itin-clear.is-armed,.itin-clear.is-armed:hover{background:var(--remove-line,#a8492a);color:var(--remove-on-text,#fbf6ea);text-decoration:none;}
.itin-clear:focus-visible{outline:2px solid var(--focus,var(--olive));outline-offset:2px;}
@media (max-width:700px),(pointer:coarse){ .itin-clear{min-height:44px;padding:2px 8px;font-size:14px;} }
@media (max-width:700px),(pointer:coarse){
  .itin-mine .itin-act,.itin-mine .itin-booked{min-height:44px;}   /* the tighter lines keep 44px taps on touch */
}
/* Round 4 (CJ 12:25): each itinerary line carries its pin's numbered circle (the hotel its H), so the
   list and the map read together. The colour is the pin's (coral, the planned day's, or the stay blue). */
.itin-n{
  display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px;margin-right:6px;
  border-radius:50%;vertical-align:1px;background:var(--coral);color:var(--ink);border:1.5px solid var(--ink);
  font:600 11px/1 'Stoury Display',system-ui,sans-serif;box-sizing:border-box;
}

/* Round 5 (CJ 12:35): the place name leads and reads, in the map stand-in's own treatment (stoury-map.js
   .stm-ph: Stoury Display, the name at full colour, the film in a smaller line at 70%). The kind word
   ("Stay", "Dinner", "Visit") and the film are the quiet second line. Stoury Display ships one weight,
   so the emphasis is size and opacity, never a light serif. */
.itin-mine .ln{font:14px/1.3 'Stoury Display',system-ui,sans-serif;}
.itin-mine .it-name{font-size:14px;color:var(--text,var(--ink));}
.itin-mine .it-sub{display:block;margin-top:2px;font-size:11.5px;line-height:1.3;opacity:.7;}
.itin-mine .it-sub .pl-time{font:inherit;}
.stop-name{font:14px/1.3 'Stoury Display',system-ui,sans-serif;}
.stop-film,.stop-kind{font:11.5px/1.3 'Stoury Display',system-ui,sans-serif;color:inherit;opacity:.7;}
.stop-film{margin-top:2px;}
/* STOUR-157: an atlas place's scene line, neighbourhood and credited photo in the list. */
.stop-scene{font:12.5px/1.35 alga,'Stoury Serif',Georgia,serif;margin-top:3px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.stop-hood{font:11.5px/1.3 'Stoury Display',system-ui,sans-serif;opacity:.7;margin-top:2px;}
.stop-ph{display:flex;align-items:center;gap:8px;margin-top:5px;}
.stop-ph img{width:56px;height:40px;object-fit:cover;border-radius:5px;flex:none;background:var(--tile-bg,#efe7d5);}
.stop-cr{font-size:10.5px;line-height:1.3;opacity:.7;overflow-wrap:anywhere;}
/* Round 7: "Clear" is the quiet one beside "see all": smaller, muted, the serif. */
.films-line .films-clear{margin-left:6px;font:14px alga,'Stoury Serif',Georgia,serif;color:var(--muted,#5c5940);min-height:32px;}
.films-line .films-clear[hidden]{display:none;}
/* Round 9 (CJ 13:02): a thin rule under "Show places I've been", then how the list works. */
.rail-rule{border:0;border-top:1px solid var(--rule,rgba(28,26,19,.18));margin:10px 0 8px;}
.rail .rail-how{margin:0;font-size:13.5px;line-height:1.4;}
.rail-plan[hidden],.rail-plan-help[hidden]{display:none;}

/* Round 10 (CJ 13:05): before Build my itinerary the stops are one plain numbered list; stops added after
   a plan wait under "Not in your days yet" until Rebuild. */
.itin-mine ul.itin-plain{margin-top:10px;}
.itin-mine .itin-new-h{margin-top:14px;}
.itin-new-note{margin-top:2px;font-size:13px;line-height:1.35;color:var(--muted,#5c5940);}
/* Round 11 (CJ 13:10): the poster wall's search, the left column's search box. */
.films input.films-q{
  width:100%;max-width:520px;min-width:0;min-height:44px;margin-top:12px;padding:9px 12px;
  font:16px/1.2 alga,'Stoury Serif',Georgia,serif;color:var(--text,var(--ink));
  background:var(--field-bg,#fbf6ea);border:1.5px solid var(--field-border,#d9ccb0);border-radius:8px;
}
.films input.films-q:focus-visible{outline:2px solid var(--focus,var(--olive));outline-offset:1px;}
.films-wall .film[hidden]{display:none;}
.films-nomatch{margin-top:10px;font-size:15px;color:var(--muted,#5c5940);}
.films-nomatch[hidden]{display:none;}
/* Round 12 (CJ 13:25): "Show locations I've been to" in the quiet line style (the list's film lines);
   the how-to line in the "Filter locations" heading style. */
.rail .rail-been .rail-check{font:11.5px/1.3 'Stoury Display',system-ui,sans-serif;color:var(--text,var(--ink));opacity:.7;}
.rail .rail-how{font:600 14px/1.25 'Stoury Display',system-ui,sans-serif;color:var(--text,var(--ink));}


/* ---- STOUR-169 round 4 (CJ 2026-10-14: "They just clutter it up") ----
   Each stop in Your itinerary: Book is the one clear link (bookable stops only); Been here and Pin time
   are one quiet row of icon-and-word controls with a one-sentence tooltip (native title on hover, the
   data-tip bubble on keyboard focus); Remove is a small × in the block's top-right corner, shown on
   hover and focus with a mouse and always on touch, with a 44px hit area. */
.itin-mine li[data-k],.itin-mine li.pl-line,.itin-mine li.pl-stayline{position:relative;padding-right:30px;}
.itin-mine .acts{gap:2px 14px;}
.itin-mine .itin-act,.itin-mine .itin-act.pl-pin,.itin-mine .itin-act.been,.itin-mine .itin-act.been.is-on{
  min-height:26px;padding:0 2px;border:0;border-radius:4px;background:transparent;box-shadow:none;filter:none;
  font:12px/1 'Stoury Display',system-ui,sans-serif;letter-spacing:.02em;color:var(--muted,#5c5940);
}
.itin-mine .itin-act:hover,.itin-mine .itin-act.pl-pin:hover,.itin-mine .itin-act.been:hover{background:transparent;color:var(--text,var(--ink));}
.itin-mine .itin-act.been.is-on,.itin-mine .itin-act.pl-pin[aria-pressed="true"]{color:var(--been-line,var(--olive));font-weight:600;}
.itin-mine .itin-act.been.is-on .ic-ring{fill:currentColor;}
.itin-mine .itin-act.been.is-on .ic-tick{stroke:var(--sheet-bg,#fbf6ea);}
.itin-mine .itin-act.book,.itin-mine .itin-act.book:hover{
  color:var(--remove-line,#a8492a);font-weight:600;font-size:13px;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;
}
.itin-mine .itin-act.book:hover{text-decoration-thickness:2px;}
.itin-mine .itin-act:focus-visible{outline:2px solid var(--focus,var(--olive));outline-offset:2px;}
/* The tooltip bubble (STOUR-169 round 5): the span.itin-tip right after Been here or Pin time, shown on
   :hover and :focus-visible after 120ms. It is positioned on the stop's block (the control is not), full
   width above it, so it never runs off the column; nothing above it clips (no overflow on the column).
   On touch the first tap opens it under the row instead (li.tip-open, in the flow, so the phone sheet's
   scroll box cannot clip it) and the second tap acts. */
.itin-mine .itin-act[aria-describedby]{position:static;}
.itin-tip{
  position:absolute;z-index:30;left:0;right:0;bottom:calc(100% - 2px);
  padding:7px 10px;border-radius:8px;text-align:left;text-transform:none;letter-spacing:0;white-space:normal;
  /* Round 6 (CJ: the light serif is "so unreadable"): alga,'Stoury Serif' is Alga Light, the light face he
     means, so the bubble uses the system sans at a readable size and weight, full contrast in both themes. */
  font:500 14px/1.45 system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;color:var(--fp-bg,#fbf6ea);background:var(--fp-text,#1c1a13);
  box-shadow:0 6px 18px rgba(0,0,0,.25);pointer-events:none;
  visibility:hidden;opacity:0;transition:opacity .1s ease 0s,visibility 0s linear .1s;
}
.itin-act:hover + .itin-tip,.itin-act:focus-visible + .itin-tip{visibility:visible;opacity:1;transition:opacity .1s ease .12s,visibility 0s linear .12s;}
.itin-mine li.tip-open .itin-tip.is-open{position:static;flex:1 0 100%;order:9;margin-top:4px;visibility:visible;opacity:1;transition:none;}
@media (hover:none){ .itin-act:hover + .itin-tip{visibility:hidden;opacity:0;} }
.itin-x{
  position:absolute;top:-6px;right:-10px;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--muted,#5c5940);border-radius:50%;
  opacity:0;transition:opacity .12s,color .12s;
}
.itin-x .ic{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;}
.itin-mine li:hover > .acts .itin-x,.itin-mine li:focus-within .itin-x,.itin-x:focus-visible{opacity:1;}
.itin-x:hover{color:var(--remove-line,#a8492a);}
.itin-x:focus-visible{outline:2px solid var(--focus,var(--olive));outline-offset:-8px;}
@media (hover:none),(pointer:coarse){ .itin-x{opacity:1;} }
.itin-tally{margin-top:2px;font:13px/1.3 'Stoury Display',system-ui,sans-serif;letter-spacing:.02em;color:var(--muted,#5c5940);}
@media (max-width:700px),(pointer:coarse){
  .itin-mine .itin-act,.itin-mine .itin-act.pl-pin,.itin-mine .itin-act.been,.itin-mine .itin-act.been.is-on{min-height:44px;padding:0 4px;font-size:13px;}
}