/* =====================================================   /home-2 (STOUR-171), in Alex Ebright's layout (STOUR-187, Look Pass;
   her Oct 15 design review pp. 4 to 10 and the Figma Components & Tokens
   page: Buttons, Map pins, Location card, Flow components).
   The pinned nav, the A2 band and its fold, the trip bar, the filter rail,
   the list, the map with the filter panel, the card and the day pill over
   it, the itinerary panel, the toast, and this page's look for the shared
   booking drawer (StouryBooking's panel and StouryBookRun's sheet, scoped
   to body.home-2 so no other page changes). Phone: every panel is a bottom
   sheet over the map.
   Colours and type read the shared design tokens (--st-*, STOUR-186's
   /static/stoury-system.css) with the same values as fallbacks, so the
   tokens flow in when that file lands; the page's own roles are below.
   Dark follows [data-theme] and prefers-color-scheme (STOUR-134).
   ============================================================ */

:root{
  --paper:var(--st-bg,#f4ead2); --surface:var(--st-surface,#fbf6ea); --raised:var(--st-raised,#efe4c8);
  --ink:var(--st-text,#1c1a13); --ink-2:var(--st-muted,#5c5940); --coral-ink:var(--st-link,#a8492a);
  --line:var(--st-line,rgba(28,26,19,.16)); --line-strong:var(--st-line-strong,#1c1a13);
  --on-fill:#1c1a13; --on-olive:#f4ead2;
  --board:#2e2b22; --board-2:#3b382d; --flap:#f3ead2;
  --display:var(--st-display,'Stoury Display',system-ui,sans-serif);
  --serif:var(--st-serif,alga,'Stoury Serif',Georgia,serif);
  --mono:var(--st-mono,'ibm-plex-mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace);
  --r-sm:var(--st-radius-sm,8px); --r-md:var(--st-radius,12px);
  --shadow:var(--st-shadow,0 18px 40px -18px rgba(28,26,19,.35));
  --navh:60px;
  /* STOUR-187: the days by colour (Alex: Day 1 coral, Day 2 sage, Day 3 gold, Day 4 lime, Day 5 olive).
     Defined here until STOUR-186's --st-day-* tokens land; they read those first. */
  --h2-day-1:var(--st-day-1,#f79e78); --h2-day-2:var(--st-day-2,#87b5a6); --h2-day-3:var(--st-day-3,#f7d18a);
  --h2-day-4:var(--st-day-4,#e3f09c); --h2-day-5:var(--st-day-5,#5c5940);
}
/* CJ, round 1: the filter bar's own fill, Alex's surface, so it stands out from the nav and the page. */
:root{--h2-bar:#fbf6ea;}
:root[data-theme="dark"]{--h2-bar:#2a281d;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--h2-bar:#2a281d;} }
:root[data-theme="dark"]{
  --paper:var(--st-bg,#1c1a13); --surface:var(--st-surface,#2a281d); --raised:var(--st-raised,#34311f);
  --ink:var(--st-text,#f4ead2); --ink-2:var(--st-muted,#c9bfa6); --coral-ink:var(--st-link,#f79e78);
  --line:var(--st-line,rgba(244,234,210,.16)); --line-strong:var(--st-line-strong,#f4ead2);
  --board:#121109; --board-2:#1d1c14; --flap:#f3ead2;
  --shadow:var(--st-shadow,0 18px 40px -18px rgba(0,0,0,.7));
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:var(--st-bg,#1c1a13); --surface:var(--st-surface,#2a281d); --raised:var(--st-raised,#34311f);
    --ink:var(--st-text,#f4ead2); --ink-2:var(--st-muted,#c9bfa6); --coral-ink:var(--st-link,#f79e78);
    --line:var(--st-line,rgba(244,234,210,.16)); --line-strong:var(--st-line-strong,#f4ead2);
    --board:#121109; --board-2:#1d1c14; --flap:#f3ead2;
    --shadow:var(--st-shadow,0 18px 40px -18px rgba(0,0,0,.7));
  }
}

/* STOUR-193 round 5: the body grows with the page (min-height, not height), so the pinned nav's containing block
   is the whole page and it stays pinned however far a phone scrolls past the band (with height:100% it let go
   once the scroll passed one screen). */
html{height:100%;}body{min-height:100%;}
body.home-2{background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.5;}
/* The reset stays at element specificity so each component's own font and colour win. */
button,input{font:inherit;}
.home-2 button{cursor:pointer;}
.home-2 :focus-visible{outline:2.5px solid var(--coral);outline-offset:2px;border-radius:4px;}
/* CJ's standing rule: every text block runs full width, left aligned, from the container's left padding to
   its right; no max-width, no centring, no balanced measure (tests/test_home_2.py greps for it). */
.home-2 h2,.home-2 h3{font-family:var(--display);font-weight:400;margin:0;letter-spacing:.01em;text-align:left;}
.home-2 .h2-foot,.home-2 .keep,.home-2 .empty,.home-2 .panel .hint,.home-2 .card .content,.home-2 .it-note{text-align:left;}
/* site.css smooths every scroll for the hero's cue; here the fold scrolls itself. */
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:auto;} }
.home-2 svg{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;}
/* Her small label above a heading (the design system's eyebrow). */
.eyebrow{margin:0 0 4px;font:400 12px/1.2 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--coral-ink);}

/* ---------- change 1: the one site nav, pinned ---------- */
.h2-nav{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--line);transition:background .25s,color .25s;}
.h2-nav .wrap{width:100%;min-height:var(--navh);padding:6px max(16px,env(safe-area-inset-right,0px)) 6px max(16px,env(safe-area-inset-left,0px));display:flex;align-items:center;gap:6px;}
.h2-nav .nav-wm{color:var(--ink);text-decoration:none;font-size:26px;margin-right:auto;}
.h2-nav .nav-links-wrap{display:flex;}
.h2-nav .nav-links{margin:0;}
.h2-nav .nav-links a{font:400 13px/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);padding:12px 10px;}
.h2-nav .theme-btn{color:var(--ink);}
.h2-nav .city-picker{color:var(--ink);}
.tripbtn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 16px;margin:0 4px;border:0;border-radius:999px;background:var(--butter);color:var(--on-fill);font:400 13px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;flex:none;}
.tripbtn svg{width:15px;height:15px;fill:currentColor;stroke:none;}
.tripbtn[aria-expanded="true"]{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--on-fill);}
/* Over the band the nav is the band's own (Alex's A2): cream links on the olive band, no small wordmark. CJ,
   STOUR-193 round 5: the band's big wordmark takes the nav row's left side, so while the band is in view the
   nav is see-through (the olive is the band's, pulled up under it by --navh) and scrolls with the band
   (position relative, not sticky); past the band, or folded, it is the tool's pinned cream nav as before. On
   a phone the wordmark and the links cannot share a row, so there the nav stays the olive bar it was. */
body[data-band="open"] .h2-nav{background:transparent;border-bottom-color:transparent;position:relative;}
body[data-band="open"] .h2-nav .nav-wm{visibility:hidden;}
body[data-band="open"] .h2-nav .nav-links a,body[data-band="open"] .h2-nav .theme-btn,body[data-band="open"] .h2-nav .city-picker{color:var(--on-olive);}
body[data-band="open"] .h2-nav .nav-links a:hover,body[data-band="open"] .h2-nav .theme-btn:hover{background:rgba(244,234,210,.1);}
body[data-band="open"] .h2-nav .scp{--scp-ink:#f4ead2;}
/* STOUR-204: the menu that drops from it is the page's surface, so its rows keep the page's ink (they read
   cream on cream over the band before). */
body[data-band="open"] .h2-nav .scp .scp-pop{--scp-ink:#1c1a13;--scp-ink-2:#5c5940;}
html.st-dark body[data-band="open"] .h2-nav .scp .scp-pop{--scp-ink:#f4ead2;--scp-ink-2:#c9bfa6;}

/* ---------- change 8: the band, Alex's A2 hero, and its fold ---------- */
/* STOUR-192: the band is its own stacking context under the pinned nav (z-index 30) and paints only inside its
   own box (contain:paint), so neither the wordmark's aperture layers nor the band's copy can show through the
   nav or beside the list once it has scrolled under. Round 5: the band starts under the nav row (margin-top
   -navh and the nav's 1px border, its full rendered height: a 60px pull left a 1px strip of the page's cream
   above the olive, round 6) so its wordmark sits beside the links; folded, it is back in flow so the tool never
   slides under. */
.splash{display:grid;grid-template-rows:1fr;transition:grid-template-rows .55s cubic-bezier(.6,0,.2,1);position:relative;z-index:0;contain:paint;margin-top:calc(-1 * var(--navh) - 1px);}
.splash.folded{grid-template-rows:0fr;margin-top:0;}
.splash>.inner{overflow:hidden;min-height:0;}
/* CJ, round 1: everything on the olive band is the same in light and dark, the light colours: the page's
   theme tokens are pinned here (cream text and outlines, the board, coral), so the trailer carousel's
   controls, dots, captions and thumbnails' labels (stoury-trailers.css reads --text / --ink) stay cream. */
.hero.a2{--ink:#f4ead2;--text:#f4ead2;--ink-2:rgba(244,234,210,.78);--coral-ink:#f79e78;--line:rgba(244,234,210,.22);
  --board:#2e2b22;--board-2:#3b382d;--flap:#f3ead2;color:#f4ead2;padding:10px 0;}  /* STOUR-204: 10px top and bottom (CJ) */
/* Round 5: the wordmark's top on the nav row; the trailer card starts under the links, not beside them. */
.hero.a2 .a2-media{margin-top:calc(var(--navh) - 6px);}
.hero.a2 .st-trailers{color:#f4ead2;}
/* CJ, round 2: the wordmark block and the trailer card are top-aligned with each other, tight under the nav. */
.hero.a2 .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start;gap:clamp(28px,4vw,64px);}
.a2-copy{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(12px,1.4vw,18px);}
.hero.a2 .wm{font-size:clamp(64px,8.5vw,150px);color:var(--butter);justify-content:flex-start;}
/* STOUR-204: two lines, as written (the <br> is the break); sized so each line fits its column at every width. */
.hero.a2 .tagline{margin:0;font:400 clamp(20px,2.3vw,33px)/1.08 var(--display);letter-spacing:.01em;text-transform:uppercase;color:var(--on-olive);}
@media (max-width:640px){ .hero.a2 .tagline{font-size:5.1vw;} }
.hero.a2 .lead{margin:0;font:400 clamp(19px,1.7vw,26px)/1.35 var(--serif);color:var(--on-olive);text-align:left;}
.count-line{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0;}
/* CJ, rounds 6 and 9: the counter stacked tight on the left, every width: "Now serving:" a small label, the flip
   digits alone on their line, "NYC Holiday & Romance locations" in the gold label style under them, "More cities
   and genres coming soon" quieter in the muted cream; Get Started on the right, centred on the block. On a phone
   the block, then the button under it. */
.count-line{flex-direction:column;align-items:flex-start;gap:4px;}
.count-kicker{font:400 12px/1.2 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--on-olive);}  /* STOUR-52: solid, 5.9:1 on olive */
/* STOUR-204: the label beside the digits, left-justified and stacked on two lines (its two halves), never under them. */
.count-main{display:flex;align-items:center;gap:14px;}
.count-label{display:grid;gap:1px;font:400 clamp(14px,1.2vw,17px)/1.15 var(--display);letter-spacing:.06em;color:var(--butter);text-align:left;}
.count-more{font:400 13px/1.4 var(--mono);color:var(--on-olive);}
.count .flaps{font-size:clamp(26px,2.6vw,38px);min-height:1.4em;}
.a2-go{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:4px;}
@media (min-width:901px){
  /* Two columns: the block stays beside the button; the label may wrap inside the block before the row does. */
  .a2-go{flex-wrap:nowrap;}
  .a2-go .count-line{flex:1 1 0;min-width:0;}
}
/* The shelf (round 4): the poster strip and the places line, one row across the whole content column. */
.hero.a2 .a2-shelf{display:block;margin-top:clamp(16px,2.2vw,28px);}
.hero.a2 .a2-shelf .st-tr-shelf[hidden]{display:none;}
/* Her primary: coral, dark brown, SP Blunt, 12px corners. */
.go{display:inline-flex;align-items:center;gap:10px;min-height:52px;background:var(--coral);color:var(--on-fill);border:0;border-radius:var(--r-md);padding:14px 30px;font:400 15px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;}
.go:hover{filter:brightness(1.05);}
.go:focus-visible{outline:2.5px solid var(--butter);outline-offset:3px;}
/* STOUR-204: the disclaimer at the foot of the band, mono 11px, a muted cream that still reads AA on the olive
   (#ddd4bd on #5c5940 is 4.8:1; the band is olive in both themes). */
.hero.a2 .a2-fine{display:block;margin-top:clamp(18px,2.4vw,32px);}
.a2-disclaimer{margin:0;font:400 11px/1.5 var(--mono);color:#ddd4bd;text-align:left;}
/* The right-hand slot: the trailer carousel (STOUR-81), the slideshow as its fallback. Not /home's yellow band. */
.hero.a2 .booking{background:none;padding:0;color:var(--on-olive);min-width:0;}
.hero.a2 .slides{background:rgba(244,234,210,.08);}

/* ---------- flap board ---------- */
/* STOUR-207 §8: the visible board cannot be selected (it is aria-hidden; the h2.vh holds the clean name), so a
   copy of the name never carries the cells' spacing. */
.flaps{display:inline-flex;flex-wrap:wrap;gap:6px 12px;user-select:none;-webkit-user-select:none;}
.flaps .word{display:flex;gap:2px;}
.flap{display:inline-grid;place-items:center;min-width:.82em;height:1.32em;padding:0 .08em;background:var(--board-2);color:var(--flap);font-family:var(--display);font-weight:400;border-radius:3px;position:relative;line-height:1;font-variant-numeric:tabular-nums;}
.flap::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.55);}
.flap.tick{animation:flip .09s ease-in;}
@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(80deg)}100%{transform:rotateX(0)}}

/* ---------- the tool ---------- */
.app{height:calc(100dvh - var(--navh));min-height:480px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;}
/* STOUR-79: each band names its row (grid-row in its own rule), so no band is ever auto-placed into a 0px row.
   STOUR-219: the strip (row 1), the tool (row 2), the footer (row 3). */
/* The dates and Staying chips, in the strip's control row (STOUR-219). */
.tchip-wrap,.tb-date{display:inline-flex;align-items:center;position:relative;}
.tchip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 14px;border:1.5px solid var(--line-strong);border-radius:999px;background:var(--h2-bar);color:var(--ink);font:400 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;}
.tchip svg{width:15px;height:15px;}
.tchip.is-empty{border-style:dashed;border-color:var(--ink-2);color:var(--ink-2);}
.tchip[aria-expanded="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper);border-style:solid;}
.tchip.stay:not(.is-empty){background:var(--raised);border-color:var(--raised);}
.tchip.stay[aria-expanded="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.tchip-wrap .tchip:not(.is-empty),.tb-date .tchip:not(.is-empty){padding-right:34px;}
.tchip-x{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:26px;height:26px;border:0;border-radius:50%;background:transparent;color:var(--ink);display:grid;place-items:center;padding:0;}
.tchip-x svg{width:14px;height:14px;stroke-width:2.2;}
.tchip-x:hover{background:var(--raised);}
.tchip-x[hidden],.tchip[hidden]{display:none;}
.tb-date .tchip-x{right:4px;}
/* The range field the dates chip opens: flatpickr reads it; the chip shows the dates. */
.h2-range{position:absolute;left:0;bottom:0;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;}
.h2-range[hidden],.h2-native[hidden]{display:none;}
.h2-native{display:inline-flex;gap:4px;}
.h2-native input{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 8px;font:13px var(--mono);color:var(--ink);}
.clear{background:none;border:0;font:400 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--coral-ink);white-space:nowrap;padding:8px 4px;}

.tool{display:grid;grid-template-columns:minmax(340px,420px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);min-height:0;position:relative;grid-row:2;}
.tool.with-itin{grid-template-columns:minmax(340px,420px) minmax(0,1fr) minmax(340px,410px);}
.listcol{grid-column:1;grid-row:1;}
.mapcol{grid-column:2;grid-row:1;}
.drawer{grid-column:3;grid-row:1;}
.sheet-grip{display:none;}

/* ---------- the list (change 4: Alex's Map list row) ---------- */
.listcol{min-height:0;display:flex;flex-direction:column;position:relative;background:var(--surface);border-right:1px solid var(--line);}
.listhead{flex:none;padding:16px 16px 6px;display:flex;flex-direction:column;gap:10px;}
.lh-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.listhead h2{font-size:24px;line-height:1;text-transform:uppercase;white-space:nowrap;}
.listhead .lit{font:400 12.5px/1.3 var(--mono);color:var(--ink-2);font-variant-numeric:tabular-nums;text-align:right;}   /* "Showing 12 of 180 places on the map · 3 saved" may wrap */
.q{display:flex;align-items:center;gap:8px;background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-md);padding:0 12px;min-height:42px;color:var(--ink-2);}
.q svg{width:17px;height:17px;flex:none;}
.q input{flex:1;min-width:0;border:0;background:transparent;font:15px/1.2 var(--serif);color:var(--ink);padding:8px 0;outline:none;}
/* STOUR-207 (CJ, 23 Oct): on focus the whole pill takes the one coral ring, following its own shape, like the
   Films/shows panel's search; nothing inside is outlined, and the clear × is ours, in ink, never browser blue. */
.q:focus-within{border-color:var(--ink);outline:2.5px solid var(--coral);outline-offset:2px;}
.q input:focus,.q input:focus-visible{outline:none;}
.q input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin:0 0 0 4px;cursor:pointer;background:currentColor;color:var(--ink);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><circle cx='9' cy='9' r='8.25' fill='none' stroke='black' stroke-width='1.5'/><path d='M6 6l6 6M12 6l-6 6' stroke='black' stroke-width='1.6' stroke-linecap='round'/></svg>") center/18px 18px no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><circle cx='9' cy='9' r='8.25' fill='none' stroke='black' stroke-width='1.5'/><path d='M6 6l6 6M12 6l-6 6' stroke='black' stroke-width='1.6' stroke-linecap='round'/></svg>") center/18px 18px no-repeat;}
.q input::placeholder{color:var(--ink-2);}
/* STOUR-219: nothing to search (no genre ticked): the title search is off and looks it. */
.q:has(input:disabled){opacity:.55;}
.q input:disabled{cursor:not-allowed;}
/* STOUR-235: the page's three hints (the column's "Tap ♡" line, the wall's, the dates') are one role: the system's
   small type, Alga, muted; body text under the thing, never a label above it. */
.lh-hint,.h2-hint{margin:0;font:400 var(--st-fs-small,18px)/1.4 var(--serif);color:var(--ink-2);}
.h2-hint[hidden]{display:none!important;}
/* CJ's round 4: the wall's hint is the column's summary line ("All films and shows · 25 places", .pk-all) in style:
   the display face in the label role, muted, no fill, under the poster row with the same rhythm. */
.wall-hint{margin:4px 6px 0;padding:0;font:400 var(--st-fs-label,14px)/1.2 var(--display);letter-spacing:.04em;color:var(--ink-2);text-transform:none;background:none;}
.strip[data-folded="true"] .wall-hint{display:none;}
/* CJ's rounds 2 to 4: the dates and Staying hints are tooltips under their chips, the Saved pill's gold fill with the
   chip label's type (.tchip: the display face, uppercase, 12px, .08em) in ink, the same in both themes, the 12px
   corner, shown on hover and keyboard focus (aria-describedby), never on a touch screen, never in the row's flow. */
.sx-hint{position:absolute;top:calc(100% + 8px);left:0;z-index:40;display:none;width:max-content;padding:8px 12px;
  background:var(--st-gold,#f7d18a);color:var(--st-on-fill,#1c1a13);border:1px solid var(--st-on-fill,#1c1a13);border-radius:var(--st-radius,12px);box-shadow:var(--st-shadow);white-space:normal;
  font:400 12px/1.4 var(--display);letter-spacing:.08em;text-transform:uppercase;}
.tb-date:has(#datesBtn:focus-visible) .sx-hint,.tchip-wrap:has(.tchip.stay:focus-visible) .sx-hint{display:block;}
@media (hover:hover){ .tb-date:has(#datesBtn:hover) .sx-hint,.tchip-wrap:has(.tchip.stay:hover) .sx-hint{display:block;} }
/* CJ's round 5: placeTip() in home-2.js slides a shown bubble left or right so it stays 16px inside the window. */
@media (max-width:640px){ .tb-date .sx-hint,.tchip-wrap .sx-hint{width:calc(100vw - 48px);} }
.rows{overflow:auto;min-height:0;flex:1;padding:4px 10px 24px;}
.row{display:grid;grid-template-columns:30px minmax(0,1fr) auto 36px;gap:10px;align-items:center;padding:10px 10px;border-radius:var(--r-md);cursor:pointer;border:1.5px solid transparent;margin-bottom:4px;}
.row:hover,.row.hot{background:var(--paper);}
.row.sel{border-color:var(--ink);background:var(--paper);}  /* STOUR-204: the hover background too, both themes */
.row .kglyph{width:30px;height:30px;}
.row .kglyph svg{width:16px;height:16px;}
.rtx{min-width:0;}
.row h3{font:400 17px/1.25 var(--serif);letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.row .from{font:400 12px/1.45 var(--mono);color:var(--ink-2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rtag{font:400 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;}
/* STOUR-300 (Greg, STOUR-288): the row's kind word reads at a glance: the system's label role (SP Blunt 14/13) in the
   text colour, like the drawer's kind line. */
.row .rtag{font:400 var(--st-fs-label,14px)/1.2 var(--display);letter-spacing:.04em;text-transform:none;color:var(--ink);}
.row .rtag.been{color:var(--ink);}
.rtag.on{color:var(--coral-ink);}
.rtag.been{color:var(--sage);}
/* A trip number: the pin's disc, in its day's colour. */
.rn{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--dc,var(--coral));color:var(--di,var(--on-fill));border:1.5px solid var(--on-fill);font:400 13px/1 var(--display);font-variant-numeric:tabular-nums;box-sizing:border-box;}
/* Rule 8: the heart (STOUR-171), filled once saved; on the card it carries its word (Save / Saved). */
.heart{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink);display:grid;place-items:center;padding:0;flex:none;}
.heart svg{width:18px;height:18px;stroke-width:1.9;transition:transform .2s;}
.heart:hover{background:var(--paper);}
.heart[aria-pressed="true"]{background:var(--coral);border-color:var(--coral);color:var(--on-fill);}
.heart[aria-pressed="true"] svg{fill:currentColor;}
.heart.wide{width:auto;height:auto;min-height:38px;display:inline-flex;gap:7px;padding:0 14px;border-radius:var(--r-md);font:400 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;}
.heart.wide svg{width:16px;height:16px;}
.pop svg{animation:pop .35s;}
@keyframes pop{40%{transform:scale(1.35)}}
/* The marker as the map draws it (stoury-map.js .stm-glyph): the same circle, colour and glyph. */
/* STOUR-186: Alex's pins, the kind's pastel with a dark brown icon (--ki, cream on the neutral olive) and a thin dark ring. */
.kglyph{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:50%;box-sizing:border-box;border:1px solid #1c1a13;color:var(--ki,#1c1a13);background:var(--kc,var(--ink));}
.kglyph svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;}

.empty{padding:16px 8px 20px;display:flex;flex-direction:column;gap:14px;}
.empty h2{font-size:26px;line-height:1.05;text-transform:uppercase;}
.empty p{color:var(--ink-2);margin:0;font-size:16px;}
.loading{padding:28px 8px;color:var(--ink-2);}

/* STOUR-141: the page's one footer (Terms of Service, Privacy Policy, Log out, the credit), slim, in Alex's
   meta type, at the foot of the list column (the phone list sheet's foot), clear of the map. */
.h2-legal{margin:0;font:400 var(--st-fs-meta,13px)/1.6 var(--mono);color:var(--ink-2);}
.h2-legal a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
/* STOUR-217: the page's footer strip is 11px Plex Mono (CJ's ruling, 23 Oct), on every width; the face is named here so the
   mono floor (10px, STOUR-204) reads it from this rule. */
footer.h2-legal{font-family:var(--mono);font-size:11px;}
.h2-legal a:hover{color:var(--ink);}
/* STOUR-193 round 2: the one footer is a short full-width strip across the very bottom of the page (the
   app grid's third row), in the info pages' order. Round 3 (CJ: "right side"): it stops short of the
   Feedback pill's corner by the reserve WIDTH, so it keeps one line; a row of links is not a text block,
   so the 15 Oct full-width rule (never the width reserve on a text container) does not apply to it. */
.page-legal{grid-row:3;display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;padding:5px max(16px, var(--feedback-reserve-w, 0px)) calc(5px + env(safe-area-inset-bottom,0px)) 16px;border-top:1px solid var(--line);background:var(--surface);}
/* The strip's links are plain at rest, underlined on hover and keyboard focus (CJ, round 3). */
.page-legal a{text-decoration:none;}
.page-legal a:hover,.page-legal a:focus-visible{text-decoration:underline;}

/* ---------- the map, and what floats over it ---------- */
.mapcol{position:relative;min-height:0;background:var(--paper);overflow:hidden;}
.map{width:100%;height:100%;display:block;}
/* change 3: the filter panel over the map, so picks light the pins beside it. */
.panel{position:absolute;top:16px;left:16px;width:min(400px,calc(100% - 32px));max-height:calc(100% - 32px);display:flex;flex-direction:column;min-height:0;background:var(--surface);border-radius:var(--r-md);box-shadow:var(--shadow),0 0 0 1px var(--line);z-index:4;}
.panel[hidden]{display:none;}
/* STOUR-219 round 3 (CJ's review): from 1024px the Staying panel (and More genres coming soon) is a floating panel
   anchored under its chip in the strip, free to reach down over the poster wall and the map: fixed, layered above the
   strip (6) and under the pinned nav (30), so the band never clips it. home-2.js (placePanel) sets where it sits and
   how tall it may grow (its natural height, about 60vh at most, never past the window); the body scrolls inside.
   Below 1024px it stays the bottom sheet. */
@media (min-width:1024px){
  .panel{position:fixed;top:var(--pan-top,120px);left:var(--pan-left,16px);width:min(420px,calc(100vw - 32px));max-height:var(--pan-max,60vh);z-index:25;}
  /* CJ (round 3 review): the Staying panel uses the room: up to 760px wide (never wider than the strip less 32px),
     growing left from its chip (placePanel), two columns: the question and its controls (about 40%), the hotels (about
     60%, the whole list, rows full width). The body scrolls only once the panel reaches its max height. Done stays
     top right of the whole panel (the header). */
  .panel[data-for="stay"]{width:min(760px,calc(100vw - 32px));}
  .panel[data-for="stay"] .body{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:8px 24px;align-items:start;}
  .panel[data-for="stay"] .stay-l,.panel[data-for="stay"] .stay-r{display:flex;flex-direction:column;gap:8px;min-width:0;}
  .panel[data-for="stay"] .stay-r .stay-opts{width:100%;}
}
.stay-l,.stay-r{display:contents;}
/* CJ (round 3 review): with the Staying panel or the dates calendar open, the page darkens behind it: the text colour
   at 40% (light), the dark ground at 55% (dark). The panel sits on the surface with a muted 1px edge and the system's
   elevated shadow, over the scrim; the scrim over everything else, the nav and the map included. */
.h2-scrim{position:fixed;inset:0;z-index:45;background:rgba(28,26,19,.4);animation:scrim-in .18s ease-out;}
.h2-scrim[hidden]{display:none;}
:root[data-theme="dark"] .h2-scrim{background:rgba(12,11,8,.55);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .h2-scrim{background:rgba(12,11,8,.55);}}
@keyframes scrim-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.h2-scrim{animation:none;}}
.panel[data-for="stay"]{z-index:46;background:var(--surface);border:1px solid var(--ink-2);box-shadow:var(--shadow);}
.home-2 .flatpickr-calendar.open{border:1px solid var(--ink-2);box-shadow:var(--shadow);}
.panel header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 20px 8px;}
.panel h2{font-size:26px;line-height:1;text-transform:uppercase;}
.panel .x{background:none;border:0;font:400 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--coral-ink);padding:8px 0;}
.panel .body{overflow:auto;padding:4px 20px 16px;display:flex;flex-direction:column;gap:8px;min-height:0;}
.panel .hint{color:var(--ink-2);font-size:15px;margin:0 0 6px;}
.panel .hint .linkbtn{margin-right:10px;}
.tog{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-md);padding:12px 14px;font:400 15px/1.2 var(--display);letter-spacing:.04em;color:var(--ink);}
.tog .n{margin-left:auto;font:400 12px/1.2 var(--mono);letter-spacing:0;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap;}
.tog .sw{width:14px;height:14px;border-radius:50%;border:2px solid var(--ink-2);flex:none;}
.tog[aria-pressed="true"]{border-color:var(--on-fill);background:var(--butter);color:var(--on-fill);}
.tog[aria-pressed="true"] .sw{background:var(--coral);border-color:var(--on-fill);}
.tog[aria-pressed="true"] .n{color:var(--on-fill);}
.tog svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;flex:none;}
.tog.is-soon{border-style:dashed;color:var(--ink-2);}
.tog.is-soon .badge{margin-left:auto;font:400 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:5px 9px;white-space:nowrap;}
.tog.is-soon[aria-expanded="true"]{border-style:solid;border-color:var(--ink);}
.soonhead{font:400 12px/1.2 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin:14px 0 2px;}
.h2-soon-card{margin:4px 0 8px;}
.search{width:100%;background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-md);padding:10px 12px;font-size:16px;color:var(--ink);}
.linkbtn{background:none;border:0;font:400 12px/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);text-decoration:underline;padding:6px 0;}
/* Her buttons (Figma Buttons): primary coral, secondary outlined dark brown, 12px corners, SP Blunt. */
.h2-btn{flex:1;display:flex;justify-content:center;align-items:center;gap:8px;min-height:44px;background:var(--coral);color:var(--on-fill);border:1.5px solid var(--coral);border-radius:var(--r-md);padding:10px 18px;font:400 13px/1.1 var(--display);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;text-align:center;}
.h2-btn:hover{filter:brightness(1.05);}
.h2-btn.quiet{background:var(--surface);color:var(--ink);border-color:var(--line-strong);}
.h2-btn.quiet:hover{filter:none;background:var(--paper);}
.h2-btn svg{width:16px;height:16px;stroke-width:2.2;}
.h2-btn:disabled{opacity:.45;cursor:default;filter:none;}
.h2-btn[aria-busy="true"]{opacity:.7;}

/* ---------- posters on the card (rule 4) ---------- */
.came .h2-watch,.allfilms b .h2-watch{margin-left:4px;}
.ptog{position:relative;display:block;width:56px;padding:0;border:0;background:none;border-radius:4px;cursor:pointer;color:inherit;font:inherit;text-align:left;}
/* STOUR-219 round 2: a poster in the place drawer opens the title's film drawer (no toggle, no +/- badge, no ring). */
.ptog>span[data-poster]{display:block;}
.ptog:hover img,.ptog:hover .tcs{box-shadow:0 0 0 2px var(--line-strong);}
.ptog:focus-visible{outline:2.5px solid var(--ink);outline-offset:2px;}
.ptog-s{width:44px;}
/* The column's picked posters open the film drawer too. */
button.pk-art{padding:0;border:0;cursor:pointer;color:inherit;font:inherit;}
.pk-art>span[data-poster]{display:block;width:100%;height:100%;}
.pk-art:focus-visible{outline:2.5px solid var(--ink);outline-offset:2px;}

/* ---------- the card (rules 5 to 7; Alex's Pin popup, ours, with the photo): the place drawer since STOUR-219
   round 2, whose shape is .pdrawer's below ---------- */
.card .close{position:absolute;top:10px;right:10px;z-index:2;background:var(--surface);color:var(--ink);border:0;border-radius:50%;width:34px;height:34px;font-size:20px;line-height:1;box-shadow:0 1px 4px rgba(0,0,0,.25);}
.card .scroll,.pdrawer .scroll{flex:1;overflow:auto;min-height:0;}
.card .photo{position:relative;aspect-ratio:16/9;max-width:100%;background:var(--st-o,linear-gradient(135deg,#2f4f44 0%,#5c5940 45%,#f7d18a 100%));}
.card .photo.none{background:linear-gradient(135deg,#2f4f44 0%,var(--kc,#5c5940) 55%,#f7d18a 100%);aspect-ratio:21/9;}
.card .photo img{width:100%;height:100%;object-fit:cover;display:block;}
/* STOUR-204 (CJ): credits, captions and attribution lines are IBM Plex Mono at 10 to 11px; Alga never goes under 12px. */
.card .credit{font:400 11px/1.3 var(--mono);color:var(--ink-2);padding:4px 16px 0;}
.card .content{padding:14px 16px 18px;display:flex;flex-direction:column;gap:12px;}
/* The departure board (rule 5) in her type: the name flips in, in SP Blunt on the card itself. */
/* STOUR-207 §8 (CJ, 23 Oct): the card's letters sit --board-tracking apart (5px, one place to ease later), as
   letter-spacing on the board and no gap inside a word, so the two never add up; the word gap stays 8px. */
.card .board{--board-tracking:5px;display:flex;flex-direction:column;gap:6px;padding-right:28px;}
.card .board .flaps{font-size:20px;gap:2px 8px;letter-spacing:var(--board-tracking);user-select:none;-webkit-user-select:none;}
.card .board .word{gap:0;}
/* STOUR-207 (CJ, 23 Oct): the domain line under the board is the one link to the website, in the link colour
   (both themes); the title links in the film rows. The name itself is not a link. */
.card .board .dom{margin-top:-2px;align-self:flex-start;color:var(--coral-ink);}
.card .came .sl-title,.allfilms b .sl-title{color:var(--coral-ink);}
.card .board .flap{background:none;color:var(--ink);min-width:.6em;height:1.1em;padding:0;}
.card .board .flap::after{display:none;}
/* STOUR-300 (Greg, STOUR-288; CJ, 30 Oct): the place line under the website: the row's 30px pin (the kind's pastel
   circle, its colour the kind) and the area in the label role (SP Blunt 14/13) in the text colour. No kind words. */
.card .sub{display:flex;align-items:center;gap:10px;margin-top:4px;color:var(--ink);}
.card .sub .kglyph{width:30px;height:30px;}
.card .sub .kglyph svg{width:16px;height:16px;}
.card .sub .sub-area{font:400 var(--st-fs-label,14px)/1.2 var(--display);letter-spacing:.04em;color:var(--ink);}
.card .came-row{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:start;}
.card .came-row img,.card .tcs{width:56px;aspect-ratio:2/3;border-radius:4px;object-fit:cover;flex:none;box-shadow:0 0 0 1px var(--line);display:block;}
.card .tcs{background:var(--board);color:var(--flap);font:400 12px/1.05 var(--display);padding:5px;display:flex;align-items:flex-end;}
.card .came{font:400 20px/1.05 var(--display);text-transform:uppercase;}
.card .came small{font:400 12px/1 var(--mono);color:var(--ink-2);margin-left:6px;text-transform:none;}
.card .say{margin:6px 0 0;font-size:16px;line-height:1.4;}
.card .tip{margin:6px 0 0;font-size:14.5px;color:var(--ink-2);}
.card .also h4{font:400 12px/1.2 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin:0 0 6px;}
/* STOUR-206: a plain small list, no pills or outlines. STOUR-258 (CJ, 28 Oct): always open, no toggle: the poster, the
   title and year, the play badge and the scene line. */
.card .also li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:center;}
.card .also li img,.card .also .tcs{width:44px;aspect-ratio:2/3;border-radius:4px;object-fit:cover;background:var(--board);display:block;box-shadow:0 0 0 1px var(--line);}
.card .also .tcs{padding:4px;}
.allfilms{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;}
.card .also .allfilms li{align-items:start;}
.allfilms b{font:400 15px/1.15 var(--display);display:block;text-transform:uppercase;}
.allfilms b small{font:400 12px/1 var(--mono);color:var(--ink-2);margin-left:5px;text-transform:none;}
/* STOUR-300 (CJ): the title and its year-and-play group wrap as a flex row: a long title (Home Alone 2: Lost in New
   York) puts the group on its own line, flush with the title's left edge and 6px under it, the badge centred on the
   year. On one line it reads as before (the year 5px after the title, the badge 4px after the year). */
.allfilms b{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 5px;}
.allfilms b .fyr small{margin-left:0;}
.allfilms b .fyr{display:inline-flex;align-items:center;white-space:nowrap;}
.allfilms b .fyr .h2-watch{margin-left:4px;}
/* The featured title (a film context) wraps the same way (its year 6px after it on one line, as before). */
.card .came{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;}
.card .came .fyr{display:inline-flex;align-items:center;white-space:nowrap;}
.card .came .fyr small{margin-left:0;}
.card .also .allfilms p{margin:3px 0 0;font-size:15px;line-height:1.4;}
.card .h2-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.card .h2-acts .h2-btn{flex:1 1 auto;min-height:38px;padding:8px 12px;font-size:12px;}
/* STOUR-300 (CJ): SP Blunt's capitals sit high in their line box; 1px more above than below centres the label by eye. */
.card .h2-acts .h2-btn{padding-top:9px;padding-bottom:7px;}
/* STOUR-304 (CJ, 30 Oct): the drawer's buttons (Book Now or Website, Directions, Book elsewhere, Menu, Save) share one row
   at every width, sharing it by their labels' widths, never wrapping onto a second; only a full-width line ("Walk-in only", a closed
   place's Book) takes a row of its own above them. Tighter side padding, never a shorter tap. */
.card .pd-foot .h2-acts > .h2-btn,.card .pd-foot .h2-acts > .heart.wide{flex:1 1 auto;min-width:0;padding-left:6px;padding-right:6px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;justify-content:center;}
.card .pd-foot .h2-acts > .heart.wide{gap:5px;}
.card .free{margin:0;font-size:14.5px;color:var(--ink-2);}
/* STOUR-276: walk-in only, where the Book button would sit */
.card .h2-acts .walk-in{flex:1 1 100%;margin:0;font:400 14.5px/1.35 var(--serif);color:var(--ink);}
/* STOUR-300 (Greg, STOUR-289/291): the place drawer's actions are its foot, a flex sibling under the scroll (never over
   it, so the last line of the list is never covered): Book Now stays in view however long the films list runs. A
   foot, not a head: the one coral primary sits at the thumb, as the saved panel's foot (.drawer .h2-foot) does. */
.card .pd-foot{flex:none;border-top:1px solid var(--line);background:var(--surface);padding:12px 16px 14px;}
/* A title's name in the place drawer opens its film drawer (the outbound title link lives there now). */
.ftl{display:inline;background:none;border:0;padding:0;font:inherit;color:var(--coral-ink);letter-spacing:inherit;text-transform:inherit;text-align:left;cursor:pointer;}
.ftl:hover{text-decoration:underline;text-underline-offset:.14em;}

/* ---------- STOUR-219 round 2: the drawers (sections 5, 6, 13 to 15) ----------
   One slot on the right-hand edge of the "On the map" column, between the column and the map (CJ's round 2 review,
   26 Oct): square, the line colour as its seam, no floating shadow, no inset gap, the tool's full height. From 1024px
   it is a grid track of its own (the drawers are siblings between #listcol and .mapcol): the column keeps its width
   and stays in view and usable, and the MAP gives up the width (380px from 1280, 320 to 380px from 1024 to 1279).
   Below 1024 a bottom sheet. It slides out from behind the column (220ms ease-out); none under reduced motion. The
   place drawer keeps the card's rules (class card); the film drawer is .fdrawer. */
.pdrawer{grid-column:2;grid-row:1;align-self:stretch;min-width:0;min-height:0;position:relative;z-index:6;display:flex;flex-direction:column;overflow:hidden;background:var(--surface);color:var(--ink);border:0;border-right:1px solid var(--line);border-radius:0;box-shadow:none;animation:pd-in .22s ease-out;}
.pdrawer[hidden]{display:none;}
@keyframes pd-in{from{transform:translateX(-100%);}to{transform:none;}}
@keyframes pd-up{from{transform:translateY(100%);}to{transform:none;}}
@media (min-width:1024px){
  .listcol{z-index:7;}   /* the drawer slides out from behind the column */
  .tool[data-pdrawer]{grid-template-columns:minmax(340px,420px) 380px minmax(0,1fr);}
  .tool[data-pdrawer] .mapcol{grid-column:3;}
}
@media (min-width:1280px){
  /* With the saved panel open too, it narrows to 320px so the map keeps some width. */
  .tool.with-itin[data-pdrawer]{grid-template-columns:minmax(340px,420px) clamp(320px,24vw,380px) minmax(0,1fr) 320px;}
  .tool.with-itin[data-pdrawer] .drawer{grid-column:4;}
}
/* Back and the ×: one slim bar at the drawer's top (the place drawer's × floats on its photo until there is a Back). */
.pd-bar{flex:none;display:flex;align-items:center;gap:12px;min-height:52px;padding:4px 6px 4px 16px;border-bottom:1px solid var(--line);background:var(--surface);}
.pd-back{min-width:0;background:none;border:0;padding:10px 0;min-height:44px;font:400 var(--st-fs-label,14px)/1.2 var(--display);letter-spacing:.04em;color:var(--coral-ink);text-decoration:underline;text-underline-offset:3px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pd-back:hover{color:var(--ink);}
.pd-x{flex:none;margin-left:auto;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);font-size:24px;line-height:1;}
.pd-x:hover{background:var(--raised);}
/* The H2 takes focus when a level opens (so a screen reader starts there); it is not a control, so no ring. */
.pdrawer h2:focus,.pdrawer h2:focus-visible{outline:none;}
/* The film drawer: the large poster, the title as the H2, the year and kind in mono, the domain line, the overview
   (three lines, then More) and its TMDB credit, Watch and Show on the map, and every place it was filmed. */
.fdrawer .content{padding:18px 16px 22px;display:flex;flex-direction:column;gap:14px;}
.fd-poster{position:relative;width:min(200px,100%);aspect-ratio:2/3;border-radius:var(--r-sm);overflow:hidden;background:var(--board);box-shadow:0 0 0 1px var(--line);}
.fd-poster img{width:100%;height:100%;object-fit:cover;display:block;}
.fd-poster .tcs{position:absolute;inset:0;display:flex;align-items:flex-end;padding:12px;color:var(--flap);font:400 24px/1.05 var(--display);text-transform:uppercase;overflow-wrap:anywhere;}
.fd-head{display:flex;flex-direction:column;gap:6px;}
/* STOUR-235: the trailer under the title: the trailer's own still (16:9, the drawer's width) with a play disc, the
   coral primary of the row; a tap swaps in the youtube-nocookie embed. */
.fd-trailer{display:flex;flex-direction:column;gap:6px;}
.fd-tr-still,.fd-tr-frame{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;border-radius:var(--r-sm);overflow:hidden;background:var(--board);box-shadow:0 0 0 1px var(--line);cursor:pointer;color:inherit;}
.fd-tr-frame{cursor:default;}
.fd-tr-still img,.fd-tr-frame iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border:0;}
.fd-tr-still .tcs{position:absolute;inset:0;display:flex;align-items:flex-end;padding:12px;color:var(--flap);font:400 20px/1.05 var(--display);text-transform:uppercase;overflow-wrap:anywhere;}
.fd-tr-disc{position:absolute;left:50%;top:50%;width:56px;height:56px;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;background:var(--coral);color:var(--on-fill);border:1.5px solid var(--on-fill);box-shadow:0 6px 18px -6px rgba(0,0,0,.5);transition:transform .18s;}
.fd-tr-disc svg{width:26px;height:26px;fill:currentColor;margin-left:3px;}
.fd-tr-still:hover .fd-tr-disc{transform:translate(-50%,-50%) scale(1.06);}
.fd-tr-still:focus-visible{outline:2.5px solid var(--ink);outline-offset:2px;}
.fd-tr-cap{margin:0;font:400 var(--st-fs-meta,13px)/1.4 var(--mono);color:var(--ink-2);}
.fdrawer h2{font-size:var(--st-fs-h2,32px);line-height:1.05;text-transform:uppercase;overflow-wrap:anywhere;}
.fd-meta{margin:0;font:400 var(--st-fs-meta,13px)/1.4 var(--mono);color:var(--ink-2);}
.fd-head .dom{align-self:flex-start;font:400 var(--st-fs-meta,13px)/1.4 var(--mono);color:var(--coral-ink);}
.fd-ovt{margin:0;font:400 16px/1.45 var(--serif);color:var(--ink);}
.fd-ov[data-open="false"] .fd-ovt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;}
.fd-more{background:none;border:0;padding:6px 0;min-height:32px;font:400 var(--st-fs-label,14px)/1.2 var(--display);letter-spacing:.04em;color:var(--coral-ink);text-decoration:underline;text-underline-offset:3px;}
.fd-more[hidden]{display:none;}
.fd-credit{margin:2px 0 0;font:400 11px/1.3 var(--mono);color:var(--ink-2);}
.fd-acts{display:flex;flex-wrap:wrap;gap:8px;}
.fd-acts .h2-btn,.fd-acts .h2-btn.sw-act{flex:1 1 auto;min-height:44px;padding:8px 14px;font:400 var(--st-fs-label,14px)/1.2 var(--display);letter-spacing:.04em;text-transform:none;border-radius:var(--r-md);border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink);gap:8px;}
.fd-acts .h2-btn.sw-act svg{width:13px;height:13px;}
.fd-acts .h2-btn:hover{background:var(--paper);color:var(--ink);border-color:var(--line-strong);}
.fd-map[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.fd-map[aria-pressed="true"]:hover{background:var(--ink);color:var(--paper);}
.fd-h{font-size:var(--st-fs-h3,20px);line-height:1.15;text-transform:uppercase;margin-top:4px;}
.fd-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.fd-list li{display:grid;grid-template-columns:minmax(0,1fr) 36px;gap:6px;align-items:center;}
.fd-row{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start;width:100%;padding:8px 6px;border:1.5px solid transparent;border-radius:var(--r-md);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;}
.fd-row:hover{background:var(--paper);}
.fd-row .kglyph{width:30px;height:30px;}
.fd-row .kglyph svg{width:16px;height:16px;}
.fdr-tx{display:flex;flex-direction:column;gap:2px;min-width:0;}
.fdr-n{font:400 17px/1.25 var(--serif);}
.fdr-sub{font:400 12px/1.4 var(--mono);color:var(--ink-2);}
.fdr-line{font:400 14.5px/1.4 var(--serif);color:var(--ink-2);}
.fdr-off{font:400 12px/1.4 var(--mono);color:var(--ink-2);font-style:italic;}

/* The day pill (change 5): All, Day 1, Day 2... over the map once there is a plan. */
.daypill{position:absolute;left:50%;bottom:calc(20px + var(--feedback-reserve-h, 0px));transform:translateX(-50%);z-index:3;display:flex;gap:4px;padding:4px;background:var(--surface);border-radius:999px;box-shadow:var(--shadow),0 0 0 1px var(--line);}
.daypill[hidden]{display:none;}
.daypill button{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--ink);font:400 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;}
.daypill button i{width:9px;height:9px;border-radius:50%;}
.daypill button[aria-pressed="true"]{background:var(--ink);color:var(--paper);}
/* STOUR-209: the line over the map, top left under the filter bar (the filter panel, when open, sits over it);
   the page's tokens in both themes, no transition (it appears in place). */
.mapnote{position:absolute;top:16px;left:16px;z-index:3;width:min(440px,calc(100% - 32px));display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 14px;background:var(--surface);color:var(--ink);border-radius:var(--r-md);box-shadow:var(--shadow),0 0 0 1px var(--line);}
.mapnote[hidden]{display:none;}
.mapnote p{margin:0;font:400 15px/1.4 var(--serif);color:var(--ink);}
.mapnote .linkbtn{font:inherit;text-transform:none;letter-spacing:0;color:var(--coral-ink);padding:0;}
.mapnote .h2-btn{flex:none;}
.mapnote:has(.note-x){flex-wrap:nowrap;}
.mapnote:has(.note-x) p{flex:1;min-width:0;}
.mapnote .note-x{flex:none;margin:-6px -8px -6px auto;background:transparent;color:var(--ink);border:0;border-radius:50%;width:34px;height:34px;font-size:20px;line-height:1;cursor:pointer;}
.mapnote .note-x:hover{background:var(--line);}
.mapnote .note-x:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
/* STOUR-217: an emptied map's two buttons (the missing chip's panel, then Show all), over the map and in the column.
   Where the column sits beside the map (1024px and up) it carries them, so the line over the map hides; on a phone
   the column is a sheet under the map and the line stays (CJ, 23 Oct: "seems extraneous" beside the empty list). */
.none-acts{display:flex;flex-wrap:wrap;gap:8px;}
.none-acts .st-btn{padding:10px 14px;}
@media (min-width:1024px){ .mapnote.is-empty{display:none;} }
.kglyph.num{font:400 14px/1 var(--display);}

.toast{visibility:hidden;width:max-content;position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px) + var(--feedback-reserve-h, 0px));transform:translate(-50%,140%);background:var(--board);color:var(--flap);border-radius:var(--r-md);padding:12px 12px 12px 18px;display:flex;align-items:center;gap:14px;font:400 14px/1.3 var(--display);letter-spacing:.03em;box-shadow:0 18px 40px -12px rgba(0,0,0,.5);transition:transform .35s cubic-bezier(.3,1.3,.5,1);z-index:40;max-width:calc(100% - 32px);}
.toast.show{transform:translate(-50%,0);visibility:visible;}
.toast button{background:var(--coral);color:var(--on-fill);border:0;border-radius:var(--r-sm);padding:9px 14px;font:400 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;}
.toast button.ghost{background:transparent;color:var(--flap);text-decoration:underline;padding:8px 4px;}

/* ---------- change 5: the saved panel (the plan is its second view) ---------- */
.drawer{position:relative;min-height:0;background:var(--surface);border-left:1px solid var(--line);z-index:7;display:flex;flex-direction:column;}
.drawer[hidden]{display:none;}
.it-h{padding:18px 20px 10px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.drawer h2{font-size:26px;line-height:1;text-transform:uppercase;}
.it-sub{margin:6px 0 0;font:400 12.5px/1.4 var(--mono);color:var(--ink-2);}
.it-x{flex:none;width:36px;height:36px;border:0;border-radius:50%;background:none;color:var(--ink);font-size:24px;line-height:1;padding:0;}
.it-x:hover{background:var(--raised);}
.drawer .dsearch{padding:0 0 8px;}
.drawer .filters{display:flex;flex-wrap:wrap;gap:6px;padding:0 0 10px;}
.fchip{border:1.5px solid var(--line-strong);background:var(--surface);border-radius:999px;padding:5px 12px;font:400 12px/1.2 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:6px;}
.fchip .kglyph{width:18px;height:18px;border-width:1.5px;}
.fchip .kglyph svg{width:10px;height:10px;}
.fchip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.drawer .rows{padding:0 16px 12px;}
.it-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px;}
.it-row .kglyph{width:30px;height:30px;}
.it-row .kglyph svg{width:16px;height:16px;}
.it-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto 36px;gap:10px;align-items:center;background:var(--paper);border-radius:var(--r-md);padding:8px 8px 8px 10px;}
.it-open{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;background:none;border:0;padding:0;text-align:left;color:var(--ink);}
.it-name{font:400 16px/1.25 var(--serif);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.it-films{font:400 var(--st-fs-meta,13px)/1.4 var(--mono);color:var(--ink-2);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* STOUR-195: a place saved on another page (no card, no pin): the same row, its name muted, the heart to remove it. */
.it-row.is-plain .it-open{cursor:default;}
.it-row.is-plain .it-name{color:var(--ink-2);}
.it-shown{margin:0 0 8px;font:400 var(--st-fs-meta,13px)/1.4 var(--mono);color:var(--ink-2);}
.it-rm{width:30px;height:30px;border-radius:50%;border:0;background:none;color:var(--ink-2);display:grid;place-items:center;padding:0;}
.it-rm svg{width:15px;height:15px;stroke-width:2.2;}
.it-rm:hover{background:var(--raised);color:var(--ink);}
.bk-btn{min-height:30px;padding:0 12px;border:0;border-radius:var(--r-sm);background:var(--coral);color:var(--on-fill);font:400 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;}
.bk-btn:hover{filter:brightness(1.05);}
/* Alex's Booked state, visible: sage with a check and the time. */
.bk-done{display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:0 10px;border-radius:var(--r-sm);background:var(--sage);color:var(--on-fill);font:400 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;}
.bk-done svg{width:13px;height:13px;stroke-width:2.6;}
.bk-free{font:400 var(--st-fs-meta,13px)/1.2 var(--mono);color:var(--ink-2);white-space:nowrap;}
.it-note{background:var(--lime);color:var(--on-fill);border-radius:var(--r-md);padding:14px;display:flex;flex-direction:column;gap:12px;}
.it-note p{margin:0;font-size:15px;line-height:1.4;}
.it-note .h2-btn.quiet{background:transparent;border-color:var(--on-fill);color:var(--on-fill);}
.it-note .h2-btn:not(.quiet){background:var(--on-fill);border-color:var(--on-fill);color:var(--lime);}
.plan-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.plan-foot p{margin:0;font:400 13px/1.3 var(--mono);}
.plan-foot .h2-btn{flex:1 1 auto;}
/* The foot, pinned: x of y booked and its bar, Book my trip, Keep this trip. It ends ABOVE the Feedback
   pill's corner (STOUR-164's reserve height; 0 on production), never by padding its right side: the
   standing rule is full width (CJ, 15 Oct). */
.drawer .h2-foot{border-top:1px solid var(--line);padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px) + var(--feedback-reserve-h, 0px));display:flex;flex-direction:column;gap:10px;background:var(--surface);}
.it-prog{display:flex;align-items:center;gap:12px;font:400 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;}
.it-prog .bar{flex:1;height:6px;border-radius:3px;background:var(--raised);overflow:hidden;}
.it-prog .bar i{display:block;height:100%;background:var(--coral);border-radius:3px;}
.it-run{flex:none;width:100%;min-height:48px;font-size:14px;}
.keep{display:flex;flex-direction:column;gap:6px;}
.keep p{margin:0;font-size:14px;color:var(--ink-2);}
.it-keep{align-self:stretch;display:flex;justify-content:center;background:none;border:0;padding:6px 0;font:400 12px/1.2 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--coral-ink);}
.it-tools{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 6px;}
.it-tools .linkbtn{color:var(--coral-ink);}
/* STOUR-193: Remove on a saved row is the small X (.it-rm, the plan view's glyph) in the row's last column,
   where the heart was (CJ, round 2), and Clear all at the foot is the outlined secondary; its inline question
   keeps Cancel quiet and the confirm in ink, so the list's one coral (Plan my days) stays the one. All of it
   reads the page's tokens, so dark follows. */
.it-row .it-unsave{justify-self:center;}
.it-unsave:focus-visible{outline:2.5px solid var(--ink);outline-offset:2px;}
.it-clear{align-self:stretch;min-height:44px;padding:10px 18px;border:1.5px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font:400 12px/1.2 var(--display);letter-spacing:.1em;text-transform:uppercase;}
.it-clear:hover{background:var(--raised);}
.it-confirm{display:flex;flex-direction:column;gap:10px;}
.it-confirm p{margin:0;font:400 16px/1.35 var(--serif);color:var(--ink);}
.it-confirm-acts{display:flex;gap:10px;}
.it-confirm-acts .h2-btn{flex:1 1 0;}
.it-confirm .h2-btn.yes{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.it-confirm .h2-btn.yes:hover{filter:none;opacity:.92;}

/* ---------- plan from the list (rule 10) ---------- */
.pickhead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:2px 4px 8px;font:400 12.5px/1.2 var(--mono);}
.pickhead span{display:flex;gap:14px;}
.pick{width:26px;height:26px;border-radius:6px;border:2px solid var(--ink);background:var(--surface);display:grid;place-items:center;flex:none;}
.pick svg{width:14px;height:14px;stroke:var(--paper);stroke-width:3;fill:none;opacity:0;}
.pick[aria-pressed="true"]{background:var(--ink);}
.pick[aria-pressed="true"] svg{opacity:1;}
.drawer .row{grid-template-columns:30px minmax(0,1fr) 30px;background:var(--paper);}
.drawer .row .kglyph{width:30px;height:30px;}
.row.off{opacity:.5;}
.setup{display:flex;flex-direction:column;gap:12px;}
.setup h3{font-size:15px;text-transform:uppercase;letter-spacing:.06em;}
.setline{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.setline.col{align-items:flex-start;flex-direction:column;gap:6px;}
.setup .h2-fine{margin:0;font-size:14px;color:var(--ink-2);}
.h2-stepper{display:flex;align-items:center;border:1.5px solid var(--ink);border-radius:var(--r-md);overflow:hidden;}
.h2-stepper button{width:40px;height:38px;background:var(--surface);border:0;font:400 20px/1 var(--display);color:var(--ink);}
.h2-stepper button:disabled{opacity:.35;cursor:default;}
.h2-stepper output{min-width:76px;text-align:center;font:400 13px/1 var(--mono);font-variant-numeric:tabular-nums;}
.daychips{display:flex;flex-wrap:wrap;gap:6px;}
.daychip{border:1.5px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:5px 9px;font:400 12px/1.15 var(--display);letter-spacing:.06em;text-transform:uppercase;text-align:center;color:var(--ink);}
.daychip small{display:block;font:400 var(--st-fs-meta,13px)/1.2 var(--mono);color:var(--ink-2);text-transform:none;letter-spacing:0;}
.daychip[aria-pressed="true"]{background:var(--butter);border-color:var(--on-fill);color:var(--on-fill);}
.daychip[aria-pressed="true"] small{color:var(--on-fill);}
.daychip.start{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.daychip.start small{color:var(--paper);}
/* The days (Figma Itinerary stop and Walk connector). */
.days{display:flex;flex-direction:column;gap:18px;}
.day ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0;}
.it-day{display:flex;align-items:center;gap:8px;font-size:15px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px;}
.it-day i{width:10px;height:10px;border-radius:50%;background:var(--dc);box-shadow:0 0 0 1px var(--on-fill);flex:none;}
.day .note{margin:0 0 8px;font-size:14.5px;color:var(--ink-2);}
.it-stop{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start;background:var(--paper);border-radius:var(--r-md);padding:12px;}
.it-stop .rn{background:var(--dc);color:var(--di);}
.it-main{display:flex;flex-direction:column;gap:6px;min-width:0;}
.it-when{margin:0;font:400 12px/1.2 var(--mono);color:var(--coral-ink);}
.it-stop .it-name{font-size:17px;white-space:normal;}
.it-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.it-act{min-height:30px;padding:0 12px;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font:400 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;}
.it-act.on{background:var(--ink);color:var(--paper);}
.it-act.quiet{border-color:transparent;background:none;}
.it-act:hover{background:var(--raised);}
.walk{display:flex;align-items:center;gap:8px;padding:8px 0 8px 14px;margin-left:14px;border-left:2px dashed var(--line);font:400 12px/1.2 var(--mono);color:var(--ink-2);}
.walk svg{width:15px;height:15px;}
.stayrow{display:flex;gap:10px;align-items:baseline;padding:4px 2px 10px;font-size:15px;}
.stayrow .t{font:400 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--coral-ink);}
.it-empty{font-size:14.5px;color:var(--ink-2);padding:4px 2px;}
.it-new{font-size:14px;text-transform:uppercase;letter-spacing:.06em;margin:18px 0 2px;}
.it-new-note{margin:0 0 8px;font-size:14px;color:var(--ink-2);}
.leftout{margin:16px 0 0;font-size:14.5px;color:var(--ink-2);}
.leftout b{font-family:var(--display);font-weight:400;color:var(--ink);}
.planerr{margin:0;padding:0 0 10px;font-size:14.5px;color:var(--coral-ink);}

/* ---------- change 6: the booking drawer, this page's look (scoped: no other page changes) ----------
   StouryBooking's panel (.sbk) and StouryBookRun's sheet (.sbr) are one drawer on the right: the partner
   chip under her small label, the stop, the details entered once (with Change), the partner's button,
   "Booked it?" on lime, Skip this one, and the partner disclaimer at the foot. Behaviour is theirs. */
.home-2 .sbk-ov,.home-2 .sbr-ov{background:rgba(28,26,19,.45);}
.home-2 .sbk,.home-2 .sbr{background:var(--surface);color:var(--ink);width:440px;font-family:var(--serif);}
.home-2 .sbk-h,.home-2 .sbr-h{background:none;color:var(--ink);border-bottom:1px solid var(--line);padding:14px 14px 14px 20px;}
.home-2 .sbk-h .t,.home-2 .sbr-h .t{font:400 12px/1.2 var(--display);letter-spacing:.12em;color:var(--ink-2);}
.home-2 .sbr-h .pg{font:400 12px/1 var(--mono);color:var(--coral-ink);}
.home-2 .sbk-x,.home-2 .sbr-x{color:var(--ink);}
.home-2 .sbk-ctx{border-bottom:0;padding:18px 20px 6px;}
.home-2 .sbk-ctx h3,.home-2 .sbr-b h3{font:400 26px/1.02 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--ink);}
.home-2 .sbk-ctx .film,.home-2 .sbr-say{font-style:normal;color:var(--ink-2);}
.home-2 .sbk-ctx .note{font:400 12px/1.4 var(--mono);text-transform:none;letter-spacing:0;color:var(--ink);}
/* Your details, entered once: a bordered box with Change. */
.home-2 .sbk-trip{margin:10px 20px 0;padding:12px 14px;border:1.5px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);font:400 14px/1.4 var(--serif);color:var(--ink);}
.home-2 .sbk-trip::before{content:"Your details";display:block;font:400 12px/1.2 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:6px;}
.home-2 .sbk-trip b{font-weight:400;}
.home-2 .sbk-trip .hint{font:400 var(--st-fs-meta,13px)/1.4 var(--mono);color:var(--ink-2);}
.home-2 .sbk-trip .lnk{color:var(--coral-ink);text-decoration:none;font:400 12px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;}
.home-2 .sbk-trip b + .lnk{float:right;font-size:0;min-height:0;padding:0;margin-top:-22px;}
.home-2 .sbk-trip b + .lnk::after{content:"Change" / "";font-size:12px;}
.home-2 .sbk-body,.home-2 .sbr-b{padding:16px 20px;}
.home-2 .sbk-p,.home-2 .sbr-p{color:var(--ink-2);font-size:15px;}
.home-2 .sbk-btn,.home-2 .sbr-btn{background:var(--coral);color:var(--on-fill);border:1.5px solid var(--coral);border-radius:var(--r-md);font:400 13px/1.1 var(--display);letter-spacing:.08em;text-transform:uppercase;min-height:48px;}
/* STOUR-300 (CJ): the label sits in the middle of the button: an inline-block with min-height left it at the top. */
.home-2 a.sbk-btn,.home-2 button.sbk-btn,.home-2 .sbr-btn{display:inline-flex;align-items:center;justify-content:center;line-height:1;padding-top:15px;padding-bottom:13px;}
.home-2 .sbk-btn.alt,.home-2 .sbr-btn.alt{background:var(--coral);color:var(--on-fill);}
.home-2 .sbk-btn.ghost,.home-2 .sbr-btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line-strong);}
.home-2 .sbk-alt,.home-2 .sbr-lnk{color:var(--coral-ink);font:400 12px/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;}
.home-2 .sbr-lnk[data-a="skip"]::after{content:"\2192" / "";margin-left:6px;}
.home-2 .sbr-eye{font:400 12px/1.2 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--raised);border-radius:var(--r-sm);padding:9px 12px;margin-bottom:12px;}
.home-2 .sbr-dots{padding:12px 20px 0;}
.home-2 .sbr-dots i{height:4px;background:var(--raised);}
.home-2 .sbr-dots i.b{background:var(--sage);}
.home-2 .sbr-dots i.c{background:var(--coral);}
/* "Booked it?" on lime, as her drawer. */
.home-2 .sbk-body:has([data-r="yes"]),.home-2 .sbr-b:has([data-r="yes"]){background:var(--paper);}
.home-2 .sbk-body:has([data-r="yes"]) .sbk-row,.home-2 .sbr-b:has([data-r="yes"]) .sbr-row{background:var(--lime);border-radius:var(--r-md);padding:12px;}
.home-2 .sbk-f,.home-2 .sbr-f{font:400 var(--st-fs-meta,13px)/1.4 var(--mono);letter-spacing:0;color:var(--ink-2);border-top-color:var(--line);}
.home-2 .sbk-f a{color:var(--coral-ink)!important;}
.home-2 .sbk-li,.home-2 .sbr-li{background:var(--paper);border-color:var(--line);}
.home-2 .sbr-bar{background:var(--ink);color:var(--paper);}

/* ---------- 1024 to 1279px: the saved panel over the map's right edge ---------- */
/* STOUR-185: the Staying panel (Where are you staying?): the box, Use my location, the one inline prompt,
   our film hotels (and Google's places when typing). Alex's tokens: SP Blunt labels, Alga body, a 12px coral
   primary and an outlined secondary. */
.stay-q{flex:none;}
.stay-loc{flex:none;align-self:flex-start;min-height:38px;padding:8px 14px;font-size:12px;}
.stay-from b{color:var(--ink);font-weight:400;}
.stay-prompt{display:flex;flex-direction:column;gap:8px;background:var(--paper);border:1.5px solid var(--coral);border-radius:var(--r-md);padding:14px;}
.stay-prompt.done{border-color:var(--line);}
.stay-prompt p{margin:0;font:400 18px/1.2 var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--ink);}
.stay-prompt p.hint{font:15px/1.35 var(--serif);text-transform:none;letter-spacing:0;color:var(--ink-2);}
.stay-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;}
.stay-acts .h2-btn{flex:1 1 auto;}
/* STOUR-219 round 3 (CJ's review): why the panel asks, under its heading, in the body role. */
.panel .stay-why{margin:0 0 12px;font:400 var(--st-fs-body,18px)/1.4 var(--serif);color:var(--ink);text-align:left;}
.stay-acts .linkbtn{color:var(--coral-ink);}
.stay-head{margin:8px 0 0;font:400 12px/1 var(--mono,var(--display));letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);}
.stay-opts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;}
.stay-opt{width:100%;display:flex;align-items:center;gap:10px;text-align:left;background:var(--paper);border:1.5px solid transparent;border-radius:var(--r-md);padding:8px 10px;color:var(--ink);}
.stay-opt:hover{border-color:var(--line-strong);}
.stay-opt.on{border-color:var(--ink);}
.stay-opt .kglyph{width:30px;height:30px;}
.stay-opt .kglyph svg{width:16px;height:16px;}
.stay-opt .so-pin{width:30px;height:30px;flex:none;padding:6px;box-sizing:border-box;stroke:currentColor;fill:none;stroke-width:1.75;color:var(--ink-2);}
.so-tx{display:flex;flex-direction:column;gap:2px;min-width:0;}
.so-name{font:16px/1.25 var(--serif);}
.so-name i{color:var(--ink-2);}
.so-sub{font:400 12px/1.2 var(--mono,var(--display));letter-spacing:.04em;color:var(--ink-2);}
.panel .hint.stay-google{font-size:12px;}
/* The Stay in the saved list: first, with its H (as the plan's numbered discs). */
.h2-h{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--acc-stay,var(--coral));color:#1c1a13;border:1px solid #1c1a13;font:400 13px/1 var(--display);box-sizing:border-box;}
@media (max-width:1279px) and (min-width:1024px){
  .tool,.tool.with-itin{grid-template-columns:minmax(320px,380px) minmax(0,1fr);}
  /* STOUR-219 round 2: the drawer still sits beside the column (never over it), 320 to 380px; the map takes the rest. */
  .tool[data-pdrawer],.tool.with-itin[data-pdrawer]{grid-template-columns:minmax(320px,380px) clamp(320px,30vw,380px) minmax(0,1fr);}
  .drawer{grid-column:1 / -1;position:absolute;top:0;right:0;bottom:0;width:min(400px,100%);box-shadow:-18px 0 40px -24px rgba(0,0,0,.4);}
}
@media (max-width:900px){
  .hero.a2 .wrap{grid-template-columns:1fr;}
  /* One column: the wordmark and the links cannot share the nav row; the band sits under the olive nav as before. */
  .splash,.splash.folded{margin-top:0;}
  body[data-band="open"] .h2-nav{background:var(--olive);position:sticky;}
  .hero.a2 .a2-media{margin-top:0;}
  .hero.a2{padding-top:clamp(10px,1.4vw,20px);}
}

/* ---------- change 7: below 1024px (phones and tablets), the map is the hero and every panel a bottom
   sheet over it; the filter chips scroll across the top ---------- */
@media (max-width:1023px){
  .tool,.tool.with-itin{display:block;position:relative;height:100%;}
  .mapcol{position:absolute;inset:0;}
  /* The sheets: the list (half to start; its grip pulls it up), the saved panel, the filter panel, the card. */
  .sheet-grip{display:grid;place-items:center;width:100%;height:22px;border:0;background:none;padding:0;flex:none;}
  .sheet-grip i{display:block;width:44px;height:5px;border-radius:3px;background:var(--line-strong);opacity:.35;}
  .listcol,.drawer,.panel,.pdrawer{position:absolute;left:0;right:0;bottom:0;top:auto;width:100%;border:0;border-radius:16px 16px 0 0;box-shadow:0 -14px 40px -18px rgba(0,0,0,.45);}
  .listcol{z-index:5;height:44%;}
  /* STOUR-252 rounds 2 and 3 (CJ, 28 Oct): the list sheet and the drawers drag on their grip and fixed head
     (home-2.js, one helper) between peek (the grip and the head), half (the start), the list's wall height (its top at
     the poster wall's bottom, measured, inline) and full, the whole app's height, so the top meets the nav and the
     sheet covers the strip (the tool rises over the strip while a sheet is full, at the wall or moving). */
  .listcol[data-sheet="peek"]{height:56px;}   /* round 5: the default, the grip and the whole "On the map" line */
  .pdrawer[data-sheet="peek"]{height:64px;max-height:none;}
  .tool[data-pdrawer] .listcol{visibility:hidden;}   /* round 4: one sheet at a time; the list keeps its height */
  .listcol[data-sheet="full"]{height:var(--h2-apph);}
  .sheet.is-dragging{transition:none;animation:none;}
  .tool[data-raised]{z-index:21;}
  #listcol>.sheet-grip,#listcol .listhead,.pdrawer>.sheet-grip,.pdrawer>.pd-bar{touch-action:none;}
  .drawer{z-index:8;height:calc(100% - 52px);}
  .drawer[data-sheet="half"]{height:62%;}
  .panel{z-index:9;max-height:82%;}
  /* STOUR-219 round 2: the drawers are bottom sheets, half to start, full height on their grip; the stack and Back
     as on a wide screen; a modal dialog here (home-2.js). Their last line clears the feedback reserve. */
  .pdrawer{z-index:10;max-height:78%;animation-name:pd-up;}
  .pdrawer[data-sheet="full"]{max-height:none;height:var(--h2-apph);}
  .pdrawer .pd-bar{padding-left:12px;}
  /* The half sheet shows the title and Watch, not a screen of poster: a smaller poster on the sheet. */
  .fd-poster{width:132px;}
  .listhead{padding:4px 16px 4px;}
  .lh-search{padding:4px 16px;}
  .lh-hint{display:none;}
  .pdrawer .content{padding-bottom:calc(22px + var(--feedback-reserve-h, 0px));}
  /* STOUR-300: the place drawer's foot clears the Feedback pill and the home bar, so its scroll needs no reserve. */
  .card.pdrawer .content{padding-bottom:18px;}
  .card .pd-foot{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px) + var(--feedback-reserve-h, 0px));}
  .pdrawer[data-sheet="peek"] .pd-foot{display:none;}
  /* STOUR-252: the app is exactly the screen under the nav (the nav's rendered height is --navh plus its 1px border).
     STOUR-261: the page ends at the app's foot; the footer's links and credit are in the menu on a phone. */
  :root{--h2-apph:max(480px, calc(100dvh - var(--navh) - 1px));}
  .app{position:relative;height:var(--h2-apph);min-height:0;}
  /* The map's stand-in list (no Maps key) does not scroll inside itself on a phone. */
  .mapcol .stm-ph{overflow:hidden;}
  .daypill{top:12px;bottom:auto;left:12px;transform:none;}
  /* The note sits above the list sheet's grip, never under the sheet or the Feedback pill's corner. */
  .mapnote{top:auto;bottom:calc(44% + 12px);left:12px;right:12px;width:auto;}
  .tool.with-itin .mapnote{bottom:auto;top:68px;}   /* the saved panel's sheet is taller: the note moves under the day pill */
  .home-2 .sbk,.home-2 .sbr{width:100%;}
}
@media (max-width:640px){
  :root{--navh:56px;}   /* STOUR-252: the 44px taps plus the row's 6px paddings; 54 left the app 3px past the window */
  .h2-nav .wrap{gap:2px;padding-left:12px;padding-right:12px;}
  .h2-nav .nav-wm{font-size:22px;}   /* STOUR-261: 22px at every phone width */
  .hero.a2 .wm{font-size:clamp(64px,19vw,110px);}
}
/* STOUR-52: every control is a 44px tap under 640px. Blocks grow; the inline ones (the hearts, the grips, the
   link buttons, the footer links) take the hit area from a ::after box or padding, like the site's other
   hit areas, so their lines do not move. */
@media (max-width:1023px){
  .tchip,.tchip-x,.panel .x,.it-keep,.it-open,.bk-btn,.it-act,.fchip,.daychip,.toast button,.card .h2-acts .h2-btn,.heart.wide{min-height:44px;}
  .tripbtn,.clear,.daypill button,.mapnote .h2-btn,.home-2 .sbk-trip .lnk{min-height:44px;}
  .h2-nav .nav-links a,.h2-nav .nav-wm,.home-2 .sbk-trip .lnk{display:inline-flex;align-items:center;min-height:44px;}
  /* The lists keep their last row clear of the Feedback pill (set only where the widget is on). */
  .rows,.panel .body{padding-bottom:calc(12px + var(--feedback-reserve-h, 0px));}
  .tchip-x{top:0;transform:none;}
  .panel .x,.it-keep{display:inline-flex;align-items:center;justify-content:center;}
  .q input{min-height:44px;padding:10px 0;}
  .card .close,.it-x,.it-rm{width:44px;height:44px;}
  .mapnote .note-x{width:44px;height:44px;}
  .h2-stepper button{height:44px;}
  .heart,.linkbtn,.sheet-grip{position:relative;}
  .heart::after,.linkbtn::after,.sheet-grip::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%);}
  .heart::after{left:50%;width:44px;transform:translate(-50%,-50%);}
  .sx-box::after,.kt::after,.sx-soon::after,.sx-pill::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:44px;transform:translate(-50%,-50%);}
  .sx-soon,.sx-pill{position:relative;}
}
/* ---------- STOUR-219 (round 1): the strip ----------
   One band under the nav, across the full width of the tool: the control row (the title search, Select these N
   and Clear selection, the Genre and Location types checkboxes, More genres coming soon, the dates and Staying)
   over the poster wall. The checkboxes are real inputs in the system's chip shape with an ink border; ticked, the
   chip is olive with a cream check. Below 1024px everything after the search sits in the Filters sheet. */
:root{--olive-fill:var(--st-olive,#5c5940);}
.strip{grid-row:1;position:relative;z-index:6;min-width:0;display:flex;flex-direction:column;gap:6px;padding:8px max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px));background:var(--h2-bar);border-bottom:1px solid var(--line);}
.strip-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;min-width:0;}
.sx-q{flex:0 0 300px;min-width:0;min-height:44px;background:var(--surface);}   /* wide enough for "Search 180 films and shows" (CJ, 26 Oct) */
.sx-q input{min-height:40px;}
.sx-filters{display:none;}
.strip-more{display:contents;}
.sx-sheet-head,.sx-trip-h{display:none;}
.sx-acts{display:flex;align-items:center;gap:16px;}
.sx-acts[hidden]{display:none;}
.sx-link{background:none;border:0;padding:10px 2px;min-height:44px;font:400 var(--st-fs-label,14px)/1.2 var(--display);letter-spacing:.04em;color:var(--coral-ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;}
.sx-link:hover{color:var(--ink);}
.sx-group{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:0;padding:0;border:0;min-width:0;}
/* CJ, 26 Oct: the genre boxes are secondary controls: a compact checkbox and its name in the small label role,
   about 24px tall (the hit area grows to 44px on touch), ticked in olive with a cream check. */
.sx-box{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:2px 0;color:var(--ink);font:400 13px/1.1 var(--display);letter-spacing:.04em;white-space:nowrap;cursor:pointer;}
.sx-box input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none;}
.sx-tick{display:inline-grid;place-items:center;flex:none;width:16px;height:16px;border:1.5px solid var(--ink);border-radius:4px;color:transparent;}
.sx-tick svg{width:12px;height:12px;stroke:currentColor;stroke-width:3;fill:none;}
.sx-box input:checked+.sx-tick{background:var(--olive-fill);border-color:var(--olive-fill);color:var(--on-olive);}
.sx-box:has(input:focus-visible) .sx-tick{outline:2.5px solid var(--coral);outline-offset:2px;}
.sx-soon{min-height:24px;padding:2px 0;font-size:13px;color:var(--ink-2);}
.sx-div{align-self:stretch;width:1px;min-height:28px;background:var(--line-strong);opacity:.3;}
.sx-trip{display:flex;align-items:center;gap:8px;margin-left:auto;}
.strip .tchip{min-height:44px;}
.strip .tchip-wrap .tchip:not(.is-empty),.strip .tb-date .tchip:not(.is-empty){padding-right:38px;}
.strip .tchip-x{width:34px;height:34px;}
/* The fold (CJ, 26 Oct): a quiet text button with a chevron at the row's end; folded, the band is one slim line
   (the trip chips and the fold), the search, the genre boxes and the wall go. */
.sx-fold{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:44px;padding:0 2px;background:none;border:0;color:var(--ink-2);font:400 13px/1.1 var(--display);letter-spacing:.04em;white-space:nowrap;margin-left:auto;}
.sx-fold:hover{color:var(--ink);}
.sx-fold svg{width:16px;height:16px;stroke-width:2.2;transition:transform .2s;}
.strip[data-folded="true"] .sx-fold svg{transform:rotate(180deg);}
.strip[data-folded="true"] .wall-row,.strip[data-folded="true"] .sx-q,.strip[data-folded="true"] .sx-acts,.strip[data-folded="true"] #stripGenres,.strip[data-folded="true"] .sx-div{display:none;}
.strip[data-folded="true"]{padding-top:0;padding-bottom:0;}
/* Folded, the row is about 44px: the fold button sets it; the trip chips sit smaller inside it (CJ, 26 Oct). */
.strip[data-folded="true"] .tchip{min-height:32px;padding-top:0;padding-bottom:0;}
.strip[data-folded="true"] .tchip-x{width:28px;height:28px;}
/* Folded, the pill at the row's left reopens the wall: the picked count, in the chip style. */
.sx-pill{display:inline-flex;align-items:center;flex:none;min-height:32px;padding:0 14px;border:1.5px solid var(--line-strong);border-radius:var(--st-pill,999px);background:var(--surface);color:var(--ink);font:400 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;}
.sx-pill:hover{background:var(--raised);}
.sx-pill[hidden]{display:none;}
@media (max-width:1279px){ .sx-fold-t{display:none;} .sx-fold{width:44px;justify-content:center;} }
/* STOUR-258 (CJ, 28 Oct): the fold stays at the row's right edge whatever the row holds. When the row wraps (a short
   wall adds "Select these N"), the fold drops to a line of its own and its auto margin keeps it right; on one line the
   trip chips take the free space instead (they grow and sit right inside it), so they stay beside the fold. */
@media (min-width:1024px){ .sx-trip{flex:1 0 auto;justify-content:flex-end;} }
/* The column's head (CJ, 26 Oct): "On the map" with the location types beside it, the pins as toggles; the
   picked titles under it, then the place search. */
.lh-top{align-items:center;flex-wrap:wrap;row-gap:6px;}
.kt-row{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:8px 16px;border:0;border-bottom:1px solid var(--line);min-width:0;}
.kt-label{margin-right:4px;font:400 12px/1.2 var(--mono);color:var(--ink-2);white-space:nowrap;}
.kt{position:relative;display:inline-flex;border-radius:50%;cursor:pointer;}
.kt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none;}
.kt .kglyph{width:28px;height:28px;}
.kt .kglyph svg{width:16px;height:16px;}
.kt input:not(:checked)+.kglyph{background:transparent;border:1.5px dashed var(--ink-2);color:var(--ink-2);}
.kt:has(input:focus-visible) .kglyph{outline:2.5px solid var(--coral);outline-offset:2px;}
.lh-search{flex:none;display:flex;flex-direction:column;gap:10px;padding:10px 16px 6px;}

/* The poster wall: one row scrolling sideways, snapping on poster edges; 88 by 132 from 1024px, 80 by 120 at
   768, 72 by 108 on a phone. A picked poster leaves the wall for the column's picked block (CJ, 26 Oct); the coral
   ring and check stay for a poster pressed mid-repaint. Nothing is dimmed and no poster carries a play badge. */
.wall-row{display:flex;align-items:center;gap:6px;min-width:0;}
.wall-row[hidden]{display:none;}   /* STOUR-258 round 2: no genre ticked, the hint under it says what to do */
.wall{--wp-w:88px;flex:1 1 0;min-width:0;display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-padding:0 6px;padding:6px;overscroll-behavior-x:contain;scrollbar-width:thin;}
.wall-btn{flex:none;display:grid;place-items:center;width:34px;height:34px;padding:0;border:1.5px solid var(--line-strong);border-radius:50%;background:var(--surface);color:var(--ink);}
.wall-btn:hover{background:var(--raised);}
.wall-btn svg{width:16px;height:16px;stroke-width:2.2;}
@media (hover:none) and (pointer:coarse){ .wall-btn{display:none;} }
.wall-row.no-scroll .wall-btn{visibility:hidden;}
.wp{flex:none;width:var(--wp-w);display:flex;flex-direction:column;gap:4px;padding:0;border:0;background:none;text-align:left;color:var(--ink);scroll-snap-align:start;}
.wp-art{position:relative;display:block;width:100%;aspect-ratio:2/3;border-radius:var(--r-sm);overflow:hidden;background:var(--board);box-shadow:0 0 0 1px var(--line);transition:transform .18s;}
.wp:hover .wp-art{transform:translateY(-2px);}
.wp-art img{width:100%;height:100%;object-fit:cover;display:block;}
.wp-art .tc{position:absolute;inset:0;display:flex;align-items:flex-end;padding:6px;color:var(--flap);font:400 12px/1.05 var(--display);letter-spacing:.02em;text-transform:uppercase;overflow-wrap:anywhere;background:repeating-linear-gradient(0deg,var(--board) 0 13px,var(--board-2) 13px 14px);}
.wp-art .tc small{display:none;}
.wp[aria-pressed="true"] .wp-art{box-shadow:0 0 0 2.5px var(--coral),0 0 0 4px var(--on-fill);}
.wp-check{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;background:var(--coral);border:1.5px solid var(--on-fill);display:none;place-items:center;}
.wp-check svg{width:12px;height:12px;stroke:var(--on-fill);stroke-width:3;fill:none;}
.wp[aria-pressed="true"] .wp-check{display:grid;}
.wp:focus-visible{outline:none;}
.wp:focus-visible .wp-art{outline:2.5px solid var(--ink);outline-offset:2px;}
.wp-t{display:block;font:400 13px/1.2 var(--display);letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wp-n{display:block;font:400 12px/1.2 var(--mono);color:var(--ink-2);font-variant-numeric:tabular-nums;}
.wall-msg{margin:0;padding:12px 2px;font:400 16px/1.4 var(--serif);color:var(--ink-2);white-space:normal;}
.wall-msg .sx-link{min-height:0;padding:0;}
.wall .sug-way{margin:0;padding:8px 2px;}
.wall-sug{flex:none;align-self:center;width:160px;white-space:normal;}

/* The picked titles at the top of the map column (section 3): "All films and shows"; one title by name; two or
   three as small posters with their own remove buttons; four or more as three posters and "+N more". */
.picked{flex:none;display:flex;flex-direction:column;gap:8px;padding:4px 16px 4px;}
.pk-all{margin:0;font:400 var(--st-fs-label,14px)/1.2 var(--display);letter-spacing:.04em;color:var(--ink-2);}
.pk-one{display:flex;align-items:center;gap:12px;}
.pk-tx{flex:1;min-width:0;}
.pk-tx h3{font-size:var(--st-fs-h3,20px);line-height:1.15;overflow-wrap:anywhere;}
.pk-n{margin:2px 0 0;font:400 var(--st-fs-meta,13px)/1.4 var(--mono);color:var(--ink-2);}
/* STOUR-235 (Greg's review): the picked posters are the wall's size (88 by 132), each with its × disc, wrapping onto a
   second row; the one-title view and the open list keep a small poster beside the name. */
.pk-art{position:relative;display:block;flex:none;width:88px;height:132px;border-radius:var(--r-sm);overflow:hidden;background:var(--board);box-shadow:0 0 0 1px var(--line);}
.pk-one .pk-art,.pk-list .pk-art{width:40px;height:60px;border-radius:4px;}
.pk-art img{width:100%;height:100%;object-fit:cover;display:block;}
.pk-art .tcs{position:absolute;inset:0;display:flex;align-items:flex-end;padding:6px;color:var(--flap);font:400 12px/1.05 var(--display);text-transform:uppercase;overflow:hidden;overflow-wrap:anywhere;}
.pk-one .pk-art .tcs,.pk-list .pk-art .tcs{padding:3px;line-height:1;}
.pk-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 12px;padding:10px 8px 0 0;}
.pk-cell{position:relative;flex:none;}
.pk-rm{position:absolute;top:-9px;right:-9px;display:grid;place-items:center;width:26px;height:26px;padding:0;border:1.5px solid var(--line-strong);border-radius:50%;background:var(--surface);color:var(--ink);}
.pk-rm:hover{background:var(--raised);}
.pk-rm svg{width:12px;height:12px;stroke-width:2.4;}
.pk-more{flex:none;width:88px;height:132px;padding:2px;border:1.5px dashed var(--line-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font:400 13px/1.1 var(--display);letter-spacing:.02em;}
.pk-foot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;}
.pk-foot .pk-n{flex:1 1 auto;margin:0;}
.picked .sx-link{min-height:32px;padding:4px 2px;}
.pk-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:232px;overflow:auto;}
.pk-list li{display:flex;align-items:center;gap:10px;}
.pk-lt{flex:1;min-width:0;font:400 15px/1.25 var(--serif);overflow-wrap:anywhere;}
.pk-list .pk-rm{position:static;flex:none;}

/* Below 1024px: the title search and a Filters button on one line; the rest is a bottom sheet. */
@media (max-width:1023px){
  .strip{z-index:20;gap:6px;padding:8px 12px;}
  .strip-ctl{flex-wrap:nowrap;gap:8px;}
  .sx-q{flex:1 1 auto;min-width:0;}
  .sx-filters{display:inline-flex;align-items:center;flex:none;min-height:44px;padding:0 12px;border:1.5px solid var(--line-strong);border-radius:var(--st-pill,999px);background:var(--surface);color:var(--ink);font:400 var(--st-fs-label,14px)/1 var(--display);letter-spacing:.04em;white-space:nowrap;}
  .sx-filters[aria-expanded="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper);}
  /* STOUR-252 round 4: with the wall folded, Filters is the same chip as the picked pill beside it (stoury-system.css
     .st-chip's 32px, the pill's type), its 44px tap kept by a hit box like the pill's. Round 5: the same compact strip
     while a place or film drawer is open (data-compact), the search field 32px too, so the drawer starts higher. */
  .strip[data-folded="true"] .sx-filters,.strip[data-compact] .sx-filters{position:relative;min-height:32px;padding:0 14px;font:400 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;}
  .strip[data-folded="true"] .sx-filters::after,.strip[data-compact] .sx-filters::after,.strip[data-compact] .sx-q::after,.strip[data-compact] .sx-fold::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:44px;transform:translate(-50%,-50%);}
  .strip[data-compact] .sx-q{position:relative;min-height:32px;}
  .strip[data-compact] .sx-q::after{z-index:-1;}   /* the field's own taps stay the input's; the box only adds the 44px */
  .strip[data-compact] .sx-q input{min-height:0;padding:4px 0;font-size:14px;}
  .strip[data-compact] .sx-fold{position:relative;min-height:32px;}
  .strip-more{display:none;position:fixed;left:0;right:0;bottom:0;z-index:30;max-height:84dvh;overflow:auto;flex-direction:column;align-items:flex-start;gap:16px;padding:14px 16px calc(18px + env(safe-area-inset-bottom,0px) + var(--feedback-reserve-h, 0px));background:var(--surface);border-radius:16px 16px 0 0;box-shadow:0 -14px 40px -18px rgba(0,0,0,.45);}
  .strip-more[data-open="true"]{display:flex;}
  .sx-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;}
  .sx-sheet-head h2{font-size:var(--st-fs-h3,20px);line-height:1.15;text-transform:uppercase;}
  .sx-sheet-head h2:focus{outline:none;}
  .sx-trip-h{display:block;font-size:var(--st-fs-h3,20px);line-height:1.15;}
  .sx-div{display:none;}
  .sx-trip{margin-left:0;flex-wrap:wrap;}
  .wall{--wp-w:80px;gap:10px;padding:5px 2px;}
  .wall-btn{display:none;}   /* swipe is the control on a sheet layout, as the carousel's shelf */
  /* STOUR-252 round 2 (CJ: "I can't scroll to the locations at all"): the list sheet scrolls as one body, the picked
     block, the location types and the rows; its grip and "On the map" head stay put at the top. */
  .listcol{display:block;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
  .listcol[data-sheet="peek"]{overflow-y:hidden;overscroll-behavior:auto;}   /* round 6: at peek a scroll over it is the page's, never its hidden list's */
  .listcol>.sheet-grip{position:sticky;top:0;z-index:2;background:var(--surface);}
  .listcol .listhead{position:sticky;top:22px;z-index:2;background:var(--surface);}
  .listcol .rows{overflow:visible;flex:none;min-height:0;}
  .picked{padding:2px 16px 2px;gap:6px;}
  .kt-row{padding:6px 16px;}
  .pk-art,.pk-more{width:64px;height:96px;}
  .pk-one .pk-art,.pk-list .pk-art{width:36px;height:54px;}
  .pk-rm{width:22px;height:22px;top:-8px;right:-8px;}
  .pk-rm svg{width:10px;height:10px;}
  .pk-tx h3{font-size:17px;}
  .pk-row{gap:12px;}
}
@media (max-width:640px){
  .wall{--wp-w:72px;}
  .wp-n{display:none;}
  .wp-t{font-size:12px;}
}
@media (prefers-reduced-motion:reduce){
  .splash,.panel,.toast,.wp-art,.heart svg,.h2-nav{transition:none!important;}
  .pdrawer{animation:none!important;}
  .wall{scroll-behavior:auto;}
  .flap.tick,.pop svg{animation:none!important;}
}
@media print{
  .h2-out{display:none!important;}
}

/* ---------- STOUR-246 (Look Pass 5, a second reviewer's 27 Oct notes) ---------- */
/* 1. One coral primary per screen: on the band it is the trailer frame's "See <title> on the map"
   (stoury-trailers.css), so Get Started is Alex's outlined secondary here, cream on the olive band (the band is
   the same in both themes; cream on olive is 5.9:1). It keeps its size, words and job (it folds the band). */
.hero.a2 .go{background:transparent;color:var(--on-olive);box-shadow:inset 0 0 0 1.5px var(--on-olive);}
.hero.a2 .go:hover{filter:none;background:rgba(244,234,210,.12);}
/* 2. The way back to the trailers (CJ, round 2): "Trailers" and a drawn up chevron in the pinned nav band, beside
   the wordmark, in the band's own link style; it exists on screen only while the page is folded on the map (the
   locked state, body[data-band="folded"]) and is gone while the hero shows. It unfolds the band as the wordmark
   does (home-2.js toTrailers). STOUR-261: below 1024px it is the chevron alone in a 44 by 44px tap beside the
   wordmark, the word kept for screen readers. */
.h2-nav .nav-trailers{display:none;}
body[data-band="folded"] .h2-nav .nav-trailers{position:relative;display:inline-flex;align-items:center;gap:6px;flex:none;min-height:44px;margin-left:4px;margin-right:auto;padding:0 10px;border:0;border-radius:var(--r-sm);background:none;color:var(--ink);font:400 13px/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;}
body[data-band="folded"] .h2-nav .nav-wm{margin-right:0;}
.h2-nav .nav-trailers svg{width:16px;height:16px;stroke-width:2.2;}
.h2-nav .nav-trailers:hover{background:var(--raised);}
/* STOUR-261: the mobile menu. Below 1024px the bar is the wordmark, the up arrow (folded only) and the menu button
   (stoury-menu.css); About, FAQ, the city, Saved and the theme switch are rows in the menu, and so are the footer's
   links and credit, so the footer is not drawn. The badge's ring is the bar's colour. */
.h2-nav .smm-btn{color:var(--ink);--smm-ring:var(--paper);}
body[data-band="open"] .h2-nav .smm-btn{color:var(--on-olive);--smm-ring:var(--olive);}
/* Round 2 (CJ: the menu button "should live next to the word mark, not above it"): while the band is open on a phone
   the nav row is see-through and the band is pulled up under it, as on a wide screen, so the band's big wordmark and
   the menu button share one row. */
@media (max-width:900px){
  body[data-band="open"] .h2-nav{background:transparent;border-bottom-color:transparent;position:relative;}
  body[data-band="open"] .splash{margin-top:calc(-1 * var(--navh) - 1px);}
}
/* Round 3 (CJ: the bar and the menu's header the same band): below 1024px the bar is the hero band's look whatever
   the band's state, its olive with the wordmark in butter and the controls in cream, so opening the menu changes
   only the menu button into the x. */
@media (max-width:1023px){
  .h2-nav{background:var(--olive,#5c5940);border-bottom-color:rgba(0,0,0,.14);}
  .h2-nav .nav-wm{color:var(--butter,#f7d18a);}
  .h2-nav .smm-btn,body[data-band="folded"] .h2-nav .nav-trailers{color:var(--on-olive);}
  .h2-nav .smm-btn{--smm-ring:var(--olive,#5c5940);}
  .h2-nav .nav-trailers:hover{background:rgba(244,234,210,.1);}
}
@media (max-width:1023px){
  /* The button's middle on the capitals' middle (about .48em under the wordmark's top, 10px down the band). */
  :root{--h2-wmfs:clamp(64px,8.5vw,150px);}
  body[data-band="open"] .h2-nav .smm-btn{transform:translateY(calc(var(--h2-wmfs) * .48 + 10px - var(--navh) / 2));}
}
/* The big wordmark leaves the button its 44px and a gap at every phone width (it ran 12px under it at 320). */
@media (max-width:640px){
  :root{--h2-wmfs:min(clamp(64px,19vw,110px), calc((100vw - 84px) / 4.1));}
  .hero.a2 .wm{font-size:var(--h2-wmfs);}
}
@media (max-width:1023px){
  .h2-nav .nav-links-wrap,.h2-nav .city-picker,.h2-nav #savedBtn,.h2-nav .theme-btn,footer.page-legal{display:none;}
  body[data-band="folded"] .h2-nav .nav-trailers{width:44px;height:44px;padding:0;margin-left:0;justify-content:center;}
  .h2-nav .nav-trailers .nt-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;}
}
/* 3. The nav wordmark's O cycles the hero's photographs (site.css .owin / .owin-stack / .ol, the same layers at
   26px; prefers-reduced-motion holds the first still there). The window is a fixed .72em circle, so the
   wordmark's width never moves while the photographs change. */
.h2-nav .nav-wm .owin{flex:none;}
/* STOUR-236: a closed business. The Closed chip is an olive fill with cream text (the brand's one pairing on
   olive, 5.9:1, the same in both themes); the access line is the note's sentence; the open branch is a small
   line with its site, or the address under a Book button that names it. The near drawer (Book elsewhere) takes the
   drawer slot with a heading, a lead line and the column's own rows: nothing in it reads as a film. */
.h2-closed{display:inline-flex;align-items:center;flex:none;min-height:20px;padding:2px 9px;border-radius:999px;background:var(--st-olive,#5c5940);color:var(--st-on-olive,#f4ead2);font:400 12px/1.1 var(--display);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;}
.card .board .h2-closed{align-self:flex-start;}
.card .gh-say{margin:0;font-size:15px;line-height:1.4;}
.card .gh-next{margin:0;font:400 13px/1.45 var(--mono);color:var(--ink-2);}
.card .gh-next a{color:var(--coral-ink);text-decoration:underline;text-underline-offset:.14em;}
.card .h2-acts .gh-bk{flex:1 1 100%;display:flex;flex-direction:column;gap:5px;}
.card .h2-acts .gh-bk .h2-btn{width:100%;}
.gh-bk-at{font:400 12.5px/1.3 var(--mono);color:var(--ink-2);}
.ndrawer .content{padding:18px 16px 22px;display:flex;flex-direction:column;gap:12px;}
.ndrawer h2{font-size:var(--st-fs-h2,32px);line-height:1.05;text-transform:uppercase;overflow-wrap:anywhere;}
.nd-lead{margin:0;font:400 13px/1.45 var(--mono);color:var(--ink-2);}
.nd-rows{display:flex;flex-direction:column;}
.nd-empty{margin:0;font-size:15px;line-height:1.45;}
.nd-clear{background:none;border:0;padding:0;font:inherit;color:var(--coral-ink);text-decoration:underline;text-underline-offset:.14em;cursor:pointer;}

/* ---------- STOUR-249 (Greg, 27 Oct): the poster flies to "On the map" and back ---------- */
/* The flying copy (home-2.js flyPoster): fixed at the poster's box, moved by transform and opacity only, never a
   target for the pointer. A pick pops to 1.08 in its first 90ms, then flies on a straight line; the × flies straight
   back. stoury-system.css has no easing token, so the flight is ease-in-out, with no overshoot. The real slot (the
   poster with its × and whatever else is drawn for that pick) waits hidden, its box unmoved and nothing in it
   clickable, and shows whole as the copy lands. Reduced motion: nothing flies and everything shows at once. */
.h2-fly{position:fixed;z-index:47;margin:0;padding:0;pointer-events:none;border-radius:var(--r-sm);overflow:hidden;transform-origin:50% 50%;will-change:transform,opacity;animation:h2-fly .45s ease-in-out both;box-shadow:0 14px 30px -12px rgba(0,0,0,.45);}
.h2-fly.is-back{animation-name:h2-fly-back;}
.h2-fly>*{width:100%!important;height:100%!important;margin:0!important;transform:none!important;transition:none!important;}
@keyframes h2-fly{
  0%{transform:none;opacity:1;animation-timing-function:ease-out;}
  20%{transform:scale(1.08);opacity:1;animation-timing-function:ease-in-out;}
  100%{transform:translate(var(--fx,0),var(--fy,0)) scale(var(--fs,1));opacity:var(--fo,1);}
}
@keyframes h2-fly-back{
  0%{transform:none;opacity:1;}
  100%{transform:translate(var(--fx,0),var(--fy,0)) scale(var(--fs,1));opacity:var(--fo,1);}
}
.h2-fly-hold{visibility:hidden!important;}
@media (prefers-reduced-motion:reduce){
  .h2-fly{display:none!important;}
  .h2-fly-hold{visibility:visible!important;}
}

/* STOUR-213: the day's Google Maps link, a quiet text link (no button, no arrow). */
.route-link{font:400 15px/1.4 var(--serif);color:var(--coral-ink);text-decoration:underline;}
.route-links{display:flex;flex-wrap:wrap;gap:4px 14px;width:100%;}
.day-route{margin:2px 0 6px;display:flex;flex-wrap:wrap;gap:4px 14px;}
@media (max-width:1023px){ .route-link{display:inline-flex;align-items:center;min-height:44px;} }