@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/Geist-Variable.woff2") format("woff2")}
/* ==========================================================================
   Timefolk design system — luminous, light-first glass.
   Tokens → primitives → components → layouts. No inline styling needed.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  /* colour — warm editorial. Ivory grounds, warm charcoal darks, champagne and bronze accents.
     Nothing here is blue-black and nothing is saturated; the photography carries the colour. */
  --bg:#F6F0E7; --bg-deep:#F1EADE;
  --glass:rgba(251,247,240,.66); --glass-strong:rgba(251,247,240,.88); --glass-tint:rgba(246,240,231,.58);
  --teal:#8A6A44; --teal-deep:#6B4F30; --teal-soft:#F0E7D7;
  --aqua:#E0CDB4; --sky:#2F2F2A; --lavender:#D8C7B4; --peach:#E8D2B4;
  /* --text-3 was #857F74, which measured 3.51:1 on the ivory ground and carries eyebrows, captions
     and every "tiny" note on the page. #726B5C is the same warm grey at 4.67:1. */
  --text:#1B1C1A; --text-2:#5F5A51; --text-3:#726B5C;
  --border:rgba(40,30,20,.14); --border-tint:rgba(138,106,68,.18); --hair:rgba(40,30,20,.08);
  --error:#9A3324; --error-soft:#F6E7E1; --warn:#8A6A1F; --warn-soft:#F5EEDD; --ok:#3F6B4F; --ok-soft:#E5EFE6;
  /* the warm editorial layer: grounds, charcoals, cream ink, accents, capsule fill */
  --ivory:#F6F0E7; --ivory-2:#F8F3EB; --ivory-3:#FBF7F0;
  --char:#111211; --char-2:#161716; --char-3:#1B1C1A; --char-4:#242421;
  --cream:#F4EDE1; --cream-2:rgba(244,237,225,.74); --cream-3:rgba(244,237,225,.54);
  --accent:#8A6A44; --accent-2:#C9A87A; --accent-soft:#EFE4D2;
  --edge:rgba(40,30,20,.08); --edge-2:rgba(40,30,20,.14); --edge-dark:rgba(255,255,255,.15);
  --btn-fill:#1B1C1A; --btn-fill-h:#111211; --btn-ink:#F4EDE1;
  /* depth: large blur, almost no offset, warm rather than neutral black */
  --shadow-1:0 1px 2px rgba(60,45,30,.04), 0 8px 24px -14px rgba(60,45,30,.14);
  --shadow-2:0 2px 8px rgba(60,45,30,.05), 0 24px 56px -26px rgba(60,45,30,.20);
  --shadow-3:0 4px 14px rgba(60,45,30,.06), 0 44px 96px -34px rgba(60,45,30,.26);
  --inner:inset 0 1px 0 rgba(255,255,255,.60);
  --blur:24px; --blur-nav:20px;
  /* shape + rhythm */
  --r-s:10px; --r-m:14px; --r-l:18px; --r-xl:26px; --r-pill:999px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:72px; --s-9:104px;
  /* The page was capped at 1180px, which on a wide screen left a third of the display empty either side
     and cut the card rails short of the room they had. Reading text keeps its own measure (.lead is
     capped in ch), so widening the container gives the images and rails the space without stretching a
     paragraph past the point it can be read. */
  --maxw:1560px; --pad:clamp(16px,4vw,40px); --nav-h:64px;
  /* type */
  --display:"Geist",ui-sans-serif,system-ui,sans-serif;
  --body:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  /* the editorial voice: serif for display, sans for every piece of interface */
  --serif:"Geist",ui-sans-serif,system-ui,sans-serif;
  /* motion */
  --t-fast:180ms; --t-base:240ms; --t-slow:320ms; --ease:cubic-bezier(.2,.7,.2,1);
}
@media (max-width:640px){:root{--blur:14px;--blur-nav:14px;--nav-h:56px}}

/* ---------- reset + base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
a{color:var(--teal);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:var(--r-s)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Fixed colours, not tokens: --teal inverts to a pale tan in dark mode while the text stayed white, which
   left the first element a keyboard user ever reaches at 1.79:1. This pair is 7.4:1 in either theme. */
.skip{position:absolute;left:12px;top:-60px;z-index:200;padding:10px 14px;background:#4A3722;color:#fff;border-radius:var(--r-s)}
.skip:focus{top:12px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------- atmosphere: orbs + grain ---------- */
.atmos{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:radial-gradient(120% 90% at 50% -10%,#fff 0%,var(--bg) 55%,var(--bg-deep) 100%)}
.atmos .orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform}
.atmos .o1{width:52vw;height:52vw;left:-14vw;top:-18vw;background:radial-gradient(circle,var(--aqua),transparent 65%)}
.atmos .o2{width:46vw;height:46vw;right:-12vw;top:6vw;background:radial-gradient(circle,var(--sky),transparent 65%)}
.atmos .o3{width:40vw;height:40vw;left:30vw;top:60vh;background:radial-gradient(circle,var(--lavender),transparent 65%);opacity:.38}
.atmos .o4{width:34vw;height:34vw;right:8vw;bottom:-10vw;background:radial-gradient(circle,var(--peach),transparent 65%);opacity:.42}
.atmos::after{content:"";position:absolute;inset:0;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (max-width:640px){.atmos .orb{filter:blur(46px)}.atmos .o3,.atmos .o4{display:none}}

/* ---------- glass primitives ---------- */
.glass{background:var(--glass);backdrop-filter:blur(var(--blur)) saturate(1.35);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.35);
  border:1px solid var(--border);box-shadow:var(--shadow-1),var(--inner);border-radius:var(--r-l)}
.glass-strong{background:var(--glass-strong);backdrop-filter:blur(var(--blur)) saturate(1.2);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.2);
  border:1px solid var(--border);box-shadow:var(--shadow-2),var(--inner);border-radius:var(--r-l)}
.glass-tint{background:var(--glass-tint);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--border-tint);border-radius:var(--r-l)}
.lift{transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.lift:hover{transform:translateY(-3px);box-shadow:var(--shadow-2),var(--inner)}
.glow-aqua{box-shadow:var(--shadow-1),0 0 0 1px var(--border),0 20px 60px -30px var(--aqua)}
.glow-sky{box-shadow:var(--shadow-1),0 0 0 1px var(--border),0 20px 60px -30px var(--sky)}
.glow-lav{box-shadow:var(--shadow-1),0 0 0 1px var(--border),0 20px 60px -30px var(--lavender)}
.glow-peach{box-shadow:var(--shadow-1),0 0 0 1px var(--border),0 20px 60px -30px var(--peach)}

/* ---------- typography ---------- */
h1,h2,h3,h4{font-family:var(--display);color:var(--text);letter-spacing:-.02em;text-wrap:balance;margin:0}
h1{font-weight:700;font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.08}
h2{font-weight:700;font-size:clamp(1.55rem,2.8vw,2.2rem);line-height:1.15}
h3{font-weight:700;font-size:1.15rem;line-height:1.3}
h4{font-weight:600;font-size:1rem}
p{margin:0;color:var(--text-2)}
.lead{font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.6;max-width:56ch}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--teal);margin-bottom:var(--s-3)}
.eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--aqua),var(--sky))}
.muted{color:var(--text-2)}.small{font-size:.875rem}.tiny{font-size:.8rem}
.stack{display:flex;flex-direction:column;gap:var(--s-4)}
.stack-s{display:flex;flex-direction:column;gap:var(--s-2)}
.row{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.between{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap}
.feedhead h3{font-size:.875rem;font-weight:600;margin:0;line-height:1.3}
.feedhead .small{color:var(--text-2);font-size:.6125rem}
.feedcount{font-size:.6125rem}
.center{text-align:center}
.hide-m{display:none}@media(min-width:768px){.hide-m{display:initial}}
.show-m{display:initial}@media(min-width:768px){.show-m{display:none}}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.page{padding:calc(var(--nav-h) + var(--s-6)) 0 var(--s-9)}
@media(max-width:1023px){.page.has-tabs{padding-bottom:calc(var(--s-9) + 72px)}}
section.band{padding:clamp(56px,8vw,104px) 0}
.grid{display:grid;gap:var(--s-5)}
.g2{grid-template-columns:1fr}.g3{grid-template-columns:1fr}.g4{grid-template-columns:1fr 1fr}
@media(min-width:768px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}
.split{display:grid;gap:var(--s-6);grid-template-columns:1fr;align-items:center}
@media(min-width:960px){.split{grid-template-columns:1.05fr .95fr;gap:var(--s-8)}}

/* ---------- navigation ---------- */
.nav{position:fixed;top:12px;left:0;right:0;z-index:80;padding:0 var(--pad);pointer-events:none}
.nav .bar{pointer-events:auto;max-width:var(--maxw);margin:0 auto;height:var(--nav-h);display:flex;align-items:center;gap:var(--s-4);
  padding:0 var(--s-3) 0 var(--s-4);background:rgba(255,255,255,.58);backdrop-filter:blur(var(--blur-nav)) saturate(1.4);
  -webkit-backdrop-filter:blur(var(--blur-nav)) saturate(1.4);border:1px solid var(--border);border-radius:var(--r-l);
  box-shadow:var(--shadow-1),var(--inner);transition:background var(--t-base),box-shadow var(--t-base)}
.nav.scrolled .bar{background:rgba(255,255,255,.82);box-shadow:var(--shadow-2),var(--inner)}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:1.2rem;letter-spacing:-.02em;color:var(--text)}
.brand:hover{text-decoration:none}
.brand .sym{width:30px;height:30px;flex:none}
.nav .links{display:none;gap:4px;margin-left:var(--s-3)}
@media(min-width:1024px){.nav .links{display:flex}}
.nav .links a,.nav .links button{padding:9px 13px;border-radius:var(--r-pill);font-size:.92rem;font-weight:500;color:var(--text-2);background:none;border:0;cursor:pointer;transition:background var(--t-fast),color var(--t-fast)}
.nav .links a:hover,.nav .links button:hover{background:rgba(138,106,68,.08);color:var(--text);text-decoration:none}
.nav .links a[aria-current="page"],.nav .links button[aria-current="page"]{background:var(--teal-soft);color:var(--teal-deep);font-weight:600}
.nav .spacer{flex:1}
.nav .icon-btn{width:44px;height:44px;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;color:var(--text-2)}
.nav .icon-btn:hover{background:rgba(138,106,68,.08);color:var(--text)}
.nav .icon-btn svg{width:22px;height:22px}
.nav .icon-btn.sos{color:var(--error)}
.nav .title-m{font-family:var(--display);font-weight:700;font-size:1.05rem}
@media(min-width:1024px){.nav .title-m{display:none}}

.tabs{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:80;display:flex;
  background:rgba(255,255,255,.78);backdrop-filter:blur(var(--blur-nav)) saturate(1.4);-webkit-backdrop-filter:blur(var(--blur-nav)) saturate(1.4);
  border:1px solid var(--border);border-radius:var(--r-l);box-shadow:var(--shadow-2),var(--inner);padding:6px}
@media(min-width:1024px){.tabs{display:none}}
/* One menu control, not two. Signed in below 1024px the tab bar carries its own Menu tab, so the
   hamburger in the header was a second door to the same room, sitting in the corner a thumb cannot reach.
   The header keeps it only where the tab bar is absent: signed out, or on a wide screen. The same applies
   in app mode, where the tab bar is shown at every width. */
@media(max-width:1023px){ body.in-app .nav-menu{ display:none } }
html.app-mode body.in-app .nav-menu{ display:none }
.tabs button{flex:1;min-height:52px;background:none;border:0;border-radius:var(--r-m);cursor:pointer;color:var(--text-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:.66rem;font-weight:600}
.tabs button svg{width:22px;height:22px}
.tabs button[aria-current="page"]{background:var(--teal-soft);color:var(--teal-deep)}
.tabs button.sos{color:var(--error)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:var(--r-pill);
  font-family:var(--display);font-weight:700;font-size:.95rem;border:1px solid transparent;cursor:pointer;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast),background var(--t-fast);white-space:nowrap;text-decoration:none}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn svg{width:18px;height:18px}
.btn-primary{background:linear-gradient(135deg,var(--teal),var(--teal-deep));color:#fff;box-shadow:0 10px 24px -12px var(--teal)}
.btn-primary:hover{box-shadow:0 14px 30px -12px var(--teal)}
.btn-secondary{background:rgba(255,255,255,.7);color:var(--teal-deep);border-color:var(--border-tint);backdrop-filter:blur(8px)}
.btn-secondary:hover{background:#fff}
.btn-ghost{background:transparent;color:var(--teal-deep)}
.btn-ghost:hover{background:rgba(138,106,68,.08)}
.btn-danger{background:var(--error-soft);color:var(--error);border-color:transparent}
.btn-danger:hover{background:#f7d9de}
/* One small size across the product. The dashboard header had already been trimmed to this by hand,
   which left every other small button noticeably larger than the ones beside it. */
.btn-sm{min-height:30px;padding:0 11px;font-size:.79rem;border-radius:8px}
.btn-lg{min-height:54px;padding:0 28px;font-size:1.02rem}
.btn-full{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
/* The spinner was absolutely positioned with no offsets, so it fell at its static position — the top
   left corner of the button — while the label went transparent. Every loading button on the site read as
   a broken grey bar with a mark in the corner rather than a control that was working. Centred here, and
   the ring takes the button's own ink colour so it is visible on the pale secondary buttons too. */
.btn.loading{position:relative;color:transparent!important}
.btn.loading::after{content:"";position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px;
  border:2px solid var(--text);border-top-color:transparent;border-radius:50%;opacity:.75;
  animation:spin .7s linear infinite}
/* Each variant names its own ring rather than inheriting one: the button paints its label with the
   token that contrasts against its own fill, and the spinner replaces that label, so it has to follow the
   same token or it disappears into whichever theme the viewer is in. */
.btn-primary.loading::after{border-color:var(--btn-ink);border-top-color:transparent;opacity:.9}
.btn-secondary.loading::after{border-color:rgba(138,106,68,.3);border-top-color:var(--teal)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- chips / pills ---------- */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px;margin:-2px}
.chips.scroll::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;border-radius:var(--r-pill);
  background:var(--glass);border:1px solid var(--border);color:var(--text);font-size:.9rem;font-weight:500;cursor:pointer;
  white-space:nowrap;transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast);backdrop-filter:blur(10px)}
.chip svg{width:16px;height:16px;color:var(--teal)}
.chip:hover{background:#fff;transform:translateY(-1px)}
.chip[aria-pressed="true"],.chip.on{background:var(--teal-deep);border-color:var(--teal-deep);color:#fff}
.chip[aria-pressed="true"] svg,.chip.on svg{color:var(--aqua)}
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);background:var(--teal-soft);color:var(--teal-deep);font-size:.78rem;font-weight:600}
.tag svg{width:13px;height:13px}
.tag.sky{background:#E6F3FF;color:#1D5D8F}.tag.lav{background:#EEEAFF;color:#4D3FA3}.tag.peach{background:#FFEDE4;color:#9A4A26}

/* ---------- status pills: text + icon, never colour alone ---------- */
.status{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--r-pill);font-size:.8rem;font-weight:600;border:1px solid transparent}
.status svg{width:14px;height:14px}
.status.requested{background:#FFF4E5;color:#8A5A0E;border-color:#F3DFB8}
.status.accepted,.status.upcoming{background:var(--teal-soft);color:var(--teal-deep);border-color:#BFE6E2}
.status.live{background:#E6F3FF;color:#1D5D8F;border-color:#BFDDF8}
.status.completed{background:var(--ok-soft);color:#155E4C;border-color:#BFE4D4}
.status.cancelled,.status.declined{background:#F1F3F2;color:#4B5754;border-color:#DDE3E1}
.status.held{background:var(--error-soft);color:#8E2F3D;border-color:#F0C6CC}

/* ---------- verification badge ---------- */
.vbadge{display:inline-flex;align-items:center;gap:5px;color:var(--teal);font-weight:600;font-size:.85rem}
.vbadge svg{width:17px;height:17px}
/* The creator badge. Deliberately not the same object as .vbadge above.
   That one is our identity check and wears the product's own teal; this one is a statement another
   platform made about a public figure, so it wears Instagram's gradient and its own mark. Somebody
   glancing at a profile has to be able to tell the two apart without reading either label, because
   "verified on Instagram" and "we checked their passport" are completely different claims. */
.cbadge{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.85rem;
  padding:3px 10px 3px 7px;border-radius:999px;text-decoration:none;vertical-align:middle;
  color:#fff;background:linear-gradient(115deg,#8a3ab9,#bc2a8d 42%,#e95950 72%,#fbad50);
  box-shadow:0 1px 3px rgba(188,42,141,.32)}
/* White on the gradient, in both themes. The anchor is also added to the exclusion list on the global
   link rule further down, which is how this stylesheet already marks an anchor that is a component
   rather than a link; without that it repaints the handle in the accent hue and the one word people
   came to read becomes the hardest one to read. */
a.cbadge, a.cbadge:visited, a.cbadge:hover, a.cbadge:focus{color:#fff;text-decoration:none}
.cbadge:hover{filter:brightness(1.07)}
.cbadge:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.cbadge .cbadge-m{display:inline-flex}
.cbadge svg{width:15px;height:15px;display:block}
/* On a photo card the pill sits over an image, so it keeps the mark and drops the gradient: a saturated
   pill on top of a portrait fights the face. The tooltip still carries the full meaning. */
.cbadge-tag{display:inline-flex;align-items:center;gap:5px}
.cbadge-tag svg{width:14px;height:14px}


/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:600;font-size:.9rem;color:var(--text)}
.field .hint{font-size:.82rem;color:var(--text-2)}
.field .err{font-size:.82rem;color:var(--error);font-weight:500;display:flex;gap:6px;align-items:flex-start}
.field .err svg{width:14px;height:14px;flex:none;margin-top:3px}
/* Every single-line field is a pill, the same shape as every button: one silhouette for the things you
   press and the things you type into. A textarea is the one exception, because a pill cannot hold three
   lines of text without looking like a mistake. */
.input,.select,.textarea{min-height:48px;padding:12px 18px;border-radius:999px;background:rgba(255,255,255,.86);
  border:1.5px solid rgba(23,40,37,.14);color:var(--text);width:100%;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.input::placeholder{color:var(--text-3)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(138,106,68,.14)}
.field.invalid .input,.field.invalid .select{border-color:var(--error);box-shadow:0 0 0 4px rgba(200,67,85,.12)}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2361716E' stroke-width='2'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center;padding-right:44px}
.check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:.95rem;color:var(--text)}
.check input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--teal);flex:none}
.textarea{min-height:100px;resize:vertical;border-radius:var(--r-m);padding:12px 14px}

/* ---------- notices ---------- */
.notice{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r-m);border:1px solid var(--border-tint);background:var(--glass-strong);color:var(--text-2);font-size:.92rem}
.notice svg{width:20px;height:20px;flex:none;color:var(--teal)}
.notice b{display:block;color:var(--text);font-weight:600;margin-bottom:2px}
.notice.warn{border-color:#EAD3A5;background:var(--warn-soft)}.notice.warn svg{color:var(--warn)}
.notice.stop{border-color:#EFC3CA;background:var(--error-soft)}.notice.stop svg{color:var(--error)}.notice.stop b{color:var(--error)}
.notice.ok{border-color:#BFE4D4;background:var(--ok-soft)}.notice.ok svg{color:var(--ok)}

/* ---------- cards ---------- */
.card{padding:var(--s-5)}
.card-activity{position:relative;padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3);min-height:172px;cursor:pointer;
  transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);overflow:hidden}
.card-activity:hover{transform:translateY(-4px)}
.card-activity:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.card-activity .ico{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,.5));border:1px solid var(--border);box-shadow:var(--inner)}
.card-activity .ico svg{width:22px;height:22px;color:var(--teal)}
.card-activity h3{font-size:1.05rem}
.card-activity .go{margin-top:auto;font-weight:600;color:var(--teal);font-size:.9rem;display:inline-flex;gap:6px;align-items:center}
.card-activity .go svg{width:16px;height:16px;transition:transform var(--t-fast)}
.card-activity:hover .go svg{transform:translateX(3px)}

/* host cards: portrait-led, editorial */
.hosts{display:grid;gap:var(--s-5);grid-template-columns:1fr}
@media(min-width:600px){.hosts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.hosts{grid-template-columns:repeat(3,1fr)}}
.hosts.editorial > :first-child{grid-column:span 1}
@media(min-width:1024px){.hosts.editorial > :first-child{grid-row:span 2}.hosts.editorial > :first-child .portrait{aspect-ratio:3/4}}
.host{display:flex;flex-direction:column;overflow:hidden;cursor:pointer;padding:0;transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.host:hover{transform:translateY(-4px);box-shadow:var(--shadow-3),var(--inner)}
.host:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.host .portrait{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg-deep)}
.host .portrait img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.host:hover .portrait img{transform:scale(1.04)}
.host .portrait .float{position:absolute;left:12px;top:12px;display:flex;gap:6px;flex-wrap:wrap}
.host .portrait .float .tag{background:rgba(255,255,255,.86);backdrop-filter:blur(10px);color:var(--teal-deep);box-shadow:var(--shadow-1)}
.host .portrait .price{position:absolute;right:12px;bottom:12px;padding:7px 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);font-family:var(--display);font-weight:800;font-size:.95rem;color:var(--text);box-shadow:var(--shadow-1)}
.host .portrait .price small{font-weight:500;color:var(--text-2);font-size:.75rem}
.host .body{padding:var(--s-4) var(--s-4) var(--s-5);display:flex;flex-direction:column;gap:8px}
.host .name{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:1.15rem}
.host .meta{font-size:.86rem;color:var(--text-2)}
.host .intro{font-size:.92rem;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.host .acts{display:flex;gap:6px;flex-wrap:wrap}
.host .foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
.host .rating{font-size:.86rem;font-weight:600;color:var(--text)}
.host .rating span{font-weight:400;color:var(--text-2)}

/* ---------- key/value ---------- */
.kv{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--hair);font-size:.95rem}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--text-2)}.kv .v{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.kv.total{border-top:2px solid var(--teal-soft);border-bottom:0;margin-top:4px;padding-top:14px}
.kv.total .v{font-family:var(--display);font-size:1.25rem;font-weight:800;color:var(--teal-deep)}

/* ---------- steps + timeline ---------- */
.progress{display:flex;gap:8px;align-items:center}
.progress .p{flex:1;height:6px;border-radius:6px;background:rgba(23,40,37,.1);overflow:hidden}
.progress .p i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--aqua),var(--teal));transition:width var(--t-slow) var(--ease)}
.progress .p.done i{width:100%}
.timeline{display:grid;gap:var(--s-5);grid-template-columns:1fr;position:relative}
@media(min-width:768px){.timeline{grid-template-columns:repeat(3,1fr)}
  .timeline::before{content:"";position:absolute;left:8%;right:8%;top:28px;height:2px;background:linear-gradient(90deg,var(--aqua),var(--sky),var(--lavender));opacity:.6}}
.tstep{position:relative;padding:var(--s-5);text-align:center}
.tstep .n{width:56px;height:56px;margin:0 auto var(--s-4);border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--border-tint);box-shadow:var(--shadow-1);font-family:var(--display);font-weight:800;color:var(--teal)}
.tstep .n svg{width:24px;height:24px;color:var(--teal)}

/* ---------- hero collage ---------- */
.collage{position:relative;aspect-ratio:1/1;width:100%;max-width:560px;margin:0 auto;justify-self:center}
.collage .ph{position:absolute;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow-3);border:1px solid var(--border)}
.collage .ph img{width:100%;height:100%;object-fit:cover}
.collage .a{left:0;top:8%;width:58%;height:64%}
.collage .b{right:0;top:0;width:40%;height:40%}
.collage .c{right:4%;bottom:6%;width:46%;height:40%}
.collage .fc{position:absolute;padding:10px 14px;border-radius:var(--r-m);background:rgba(255,255,255,.88);backdrop-filter:blur(14px);
  border:1px solid var(--border);box-shadow:var(--shadow-2);font-size:.85rem;font-weight:600;display:flex;gap:8px;align-items:center;animation:rise var(--t-slow) var(--ease) both}
.collage .fc svg{width:16px;height:16px;color:var(--teal)}
.collage .fc1{left:-4%;top:70%;animation-delay:.15s}.collage .fc2{left:44%;top:2%;animation-delay:.3s}.collage .fc3{right:-2%;bottom:48%;animation-delay:.45s}
.collage .halo{position:absolute;inset:-8%;border-radius:50%;background:conic-gradient(from 0deg,var(--aqua),var(--sky),var(--lavender),var(--peach),var(--aqua));filter:blur(48px);opacity:.28;z-index:-1;animation:orbit 24s linear infinite}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:640px){.collage .fc{font-size:.76rem;padding:8px 10px}}

/* ---------- search bar ---------- */
.search{display:grid;gap:8px;padding:10px;grid-template-columns:1fr}
@media(min-width:720px){.search{grid-template-columns:1.2fr 1.2fr 1fr auto}}
.search .sf{display:flex;flex-direction:column;gap:2px;padding:8px 14px;border-radius:var(--r-m);background:rgba(255,255,255,.7);border:1px solid var(--border)}
.search .sf label{font-size:.72rem;font-weight:600;color:var(--text-2);letter-spacing:.03em;text-transform:uppercase}
.search .sf select{border:0;background:none;padding:0;min-height:auto;font-weight:600;color:var(--text);width:100%}
.search .sf select:focus{outline:none}

/* ---------- profile / booking ---------- */
.gallery{display:grid;gap:8px;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:3/2;border-radius:var(--r-l);overflow:hidden}
.gallery img{width:100%;height:100%;object-fit:cover}
.gallery .main{grid-row:span 2}
@media(max-width:640px){.gallery{grid-template-columns:1fr;grid-template-rows:auto;aspect-ratio:4/5}.gallery img:not(.main){display:none}}
.detail{display:grid;grid-template-columns:1fr;gap:var(--s-6)}
/* The booking's main column is two elements, so the price can be rendered between them and land in the
   right place on a phone: booking details, price, then everything optional. On a wide screen the two
   halves stack back into the first column and the price takes the rail beside them, which is the layout
   this grid has always drawn - it is named explicitly here because a three-child grid would otherwise
   flow the second half into the sidebar track. */
@media(min-width:1024px){.detail{grid-template-columns:minmax(0,1fr) 380px;gap:var(--s-7);align-items:start}
  .detail > .bk-top{grid-column:1;grid-row:1}
  .detail > .bk-rest{grid-column:1;grid-row:2}
  .detail > .bookpanel{grid-column:2;grid-row:1 / span 2}
  /* Sticky, so it has to scroll inside itself: taller than the window, its lower half (Guardian, Request) was unreachable. */
  .bookpanel{position:sticky;top:calc(var(--nav-h) + 28px);max-height:calc(100vh - var(--nav-h) - 44px);overflow-y:auto;overscroll-behavior:contain}}
/* Below that the grid is one column and the three children simply follow one another, which is the
   order they are written in. The gap between the two halves is the price panel's own, so the seam does
   not read as a break in the page. */
@media(max-width:1023px){.detail{gap:18px}}
.sheet{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:75;padding:12px 14px;
  display:flex;align-items:center;gap:12px}
@media(min-width:1024px){.sheet{display:none}}
.sheet .p{font-family:var(--display);font-weight:800}
.sheet .p small{display:block;font-size:.75rem;font-weight:500;color:var(--text-2)}
.code{font-family:var(--mono);font-size:2.2rem;font-weight:700;letter-spacing:.32em;text-indent:.32em;text-align:center;padding:18px 0 10px;color:var(--teal-deep)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stats div{padding:14px;text-align:center}
.stats .n{font-family:var(--display);font-weight:800;font-size:1.35rem;color:var(--text)}
/* Sentence case on every stat label, done with ::first-letter rather than `text-transform:capitalize`,
   which would give "No Rating Yet". One rule covers the labels wherever they are written, so a new tile
   cannot arrive lowercase because somebody typed the string in lower case. */
.stats .l{font-size:.78rem;color:var(--text-2)}
.stats .l::first-letter,.pstat span::first-letter,.areastat span::first-letter{text-transform:uppercase}

/* ---------- loading / empty / success ---------- */
.skel{position:relative;overflow:hidden;background:rgba(23,40,37,.06);border-radius:var(--r-m)}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.skel-card{height:380px}.skel-line{height:14px;margin:8px 0}.skel-line.w60{width:60%}
.empty{padding:var(--s-7) var(--s-5);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--s-3)}
.empty .ico{width:64px;height:64px;border-radius:50%;background:var(--teal-soft);display:flex;align-items:center;justify-content:center}
.empty .ico svg{width:28px;height:28px;color:var(--teal)}
.success-check{width:72px;height:72px;margin:0 auto var(--s-4)}
.success-check circle{fill:none;stroke:var(--ok);stroke-width:2.5;stroke-dasharray:166;stroke-dashoffset:166;animation:draw .6s var(--ease) forwards}
.success-check path{fill:none;stroke:var(--ok);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48;animation:draw .4s .45s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:90;padding:12px 18px;
  border-radius:var(--r-pill);background:rgba(23,40,37,.92);color:#fff;font-weight:500;font-size:.92rem;box-shadow:var(--shadow-2);animation:rise var(--t-base) var(--ease)}
@media(min-width:1024px){.toast{bottom:28px}}
.scan-banner{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:95;display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:var(--r-pill);background:rgba(23,40,37,.94);color:#fff;font-weight:500;font-size:.9rem;box-shadow:var(--shadow-2);max-width:calc(100vw - 32px);animation:rise var(--t-base) var(--ease)}
@media(min-width:1024px){.scan-banner{bottom:28px}}
.scan-spin{width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;animation:scanspin .7s linear infinite;flex:0 0 auto}
@keyframes scanspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.scan-spin{animation-duration:2.4s}}
.offline{position:fixed;top:calc(var(--nav-h) + 20px);left:50%;transform:translateX(-50%);z-index:85;padding:8px 14px;border-radius:var(--r-pill);background:var(--warn-soft);color:var(--warn);font-weight:600;font-size:.85rem;border:1px solid #EAD3A5}

/* ---------- modal ---------- */
.modal[open]{position:fixed;inset:0;display:grid;place-items:center;z-index:100;background:rgba(23,40,37,.28);backdrop-filter:blur(6px);border:0;padding:var(--pad);width:100%;height:100%;max-width:none;max-height:none}
.modal .box{width:min(520px,100%);padding:var(--s-6)}

/* ---------- footer ---------- */
footer.foot{border-top:1px solid var(--hair);padding:var(--s-7) max(var(--pad),env(safe-area-inset-right)) calc(var(--s-7) + env(safe-area-inset-bottom)) max(var(--pad),env(safe-area-inset-left));color:var(--text-2);font-size:.9rem}
/* Full bleed, centred content.
   The footer carried .wrap, so its background stopped where its text did and it read as a dark slab
   floating on the page rather than the ground the page stands on. The band now runs edge to edge while
   the columns inside stay on the same measure as everything above them. */
footer.foot{max-width:none;width:100%}
footer.foot > *{max-width:var(--maxw);margin-inline:auto}
footer .cols{display:grid;gap:var(--s-5);grid-template-columns:1fr 1fr}
@media(min-width:768px){footer .cols{grid-template-columns:2fr 1fr 1fr 1fr}}
footer h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text);margin-bottom:10px}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
footer a{color:var(--text-2)}footer a:hover{color:var(--teal)}
.hidden{display:none!important}

/* Same rule, applied once to the floating lists, so the next dropdown added inside the hero cannot
   inherit its inverted ink and disappear in light mode. Deliberately limited to menus that paint their own
   panel background: the hero's own glass pills are light-on-dark on purpose and must keep inheriting. */
.cine .combo-list, .cine .picker-menu{color:var(--text)}

/* ---------- city combobox ---------- */
.combo{position:relative}
.combo .input{padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2361716E' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='5.5'/%3E%3Cpath d='m15 15-3-3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.search .combo .input{border:0;background-color:transparent;padding:2px 30px 0 0;min-height:auto;font-weight:600;box-shadow:none}
/* The colour is not optional here. This list opens inside the hero, and the hero sets `color:var(--ink-inv)`
   for its white-on-photograph text; a panel that paints itself `--panel` but inherits that ends up white
   on white in light mode, and only looks right in dark mode because the panel happens to be dark too. Any
   surface that brings its own background has to bring its own foreground with it. */
.combo-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:70;margin:0;padding:6px;list-style:none;max-height:340px;overflow:auto;border-radius:var(--r-m);text-align:left;min-width:min(340px,calc(100vw - 48px));color:var(--text)}
/* The list is wider than the field it hangs from, and the field sits at the right-hand end of its row, so
   anchoring the panel's left edge to the field's ran it off the side of the screen: the right-hand column
   of every row was cut in half. Anchored to the field's right edge instead, and never wider than the
   window it has to fit inside. */
.combo-list{ left:auto; right:0; max-width:calc(100vw - 32px) }
@media (max-width:640px){ .combo-list{ right:auto; left:0 } }
.combo-list li .small{color:var(--text-2)}
.combo-list li b{color:var(--text)}
.combo-list li{padding:10px 12px;border-radius:var(--r-s);cursor:pointer;display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.combo-list li:hover,.combo-list li[aria-selected="true"]{background:var(--teal-soft)}

/* ---------- Mobile pass (2026-09-04): flush nav, no content peeking above it, calmer hero ---------- */
@media (max-width:767px){
  .nav{top:0;padding:0}
  .nav .bar{border-radius:0 0 18px 18px;background:rgba(255,255,255,.94);box-shadow:var(--shadow-1);padding-top:env(safe-area-inset-top);height:calc(var(--nav-h) + env(safe-area-inset-top))}
  .nav .bar .brand{font-size:1.05rem}
  .nav .bar .btn{padding:0 14px;min-height:40px;font-size:.9rem}
  .hero h1{font-size:clamp(2rem,9vw,2.6rem);line-height:1.08}
  .collage{aspect-ratio:4/3;max-width:none;margin-top:8px}
  .collage .halo,.collage .fc{display:none}
  .collage .a{left:0;top:0;width:58%;height:100%}
  .collage .b{right:0;top:0;width:38%;height:48%}
  .collage .c{right:0;bottom:0;width:38%;height:47%}
  .vbadge{font-size:.86rem}
  .search{padding:8px}
  .combo-list{max-height:min(300px,42vh)}
}

/* Detected-city card at sign-up */
.loc-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-m);background:linear-gradient(135deg,rgba(230,244,242,.9),rgba(255,255,255,.7));border:1px solid rgba(138,106,68,.18);box-shadow:var(--inner)}
.loc-card .ico{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--teal);box-shadow:var(--shadow-1)}
.loc-card .ico svg{width:18px;height:18px}
/* The name column has to be allowed to shrink AND to wrap. With only `min-width:0` a long city name kept
   its intrinsic width and ran straight under the Change link, so "Dubai Investments Park" and "Change"
   printed on top of each other with no gap at all. */
.loc-card .txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}
.loc-card .lbl{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
/* `width` and `flex` are reset here because the landing page also has a `.city`, for the big city cards in
   its carousel, and that rule sets `flex:0 0 auto; width:min(76vw,560px)`. This one declared neither, so
   the carousel's width won inside a 164px column: the name kept its full 260px, refused to shrink, and
   printed straight through the Change link. Names that collide across two unrelated components are the
   trap; this states both properties so it cannot be reached by the other rule again. */
.loc-card .city{font-weight:700;color:var(--text);line-height:1.25;overflow-wrap:anywhere;width:auto;max-width:100%;flex:0 1 auto;min-width:0;display:block}
.loc-card .ctry{font-size:.86rem;color:var(--text-2);overflow-wrap:anywhere}
.loc-card .chg{margin-left:auto;flex:none;align-self:center;white-space:nowrap;font-size:.86rem;font-weight:600;color:var(--teal);text-decoration:none;padding:6px 10px;border-radius:var(--r-pill)}
.loc-card .chg:hover{background:rgba(138,106,68,.1)}
.loc-card.pending{color:var(--text-2);font-size:.92rem}
.loc-card.pending .ico{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.loc-btn{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;border-radius:var(--r-m);background:rgba(255,255,255,.7);border:1px dashed rgba(138,106,68,.35);cursor:pointer;color:var(--text);font:inherit}
.loc-btn .ico{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--teal-soft);color:var(--teal)}
.loc-btn .ico svg{width:18px;height:18px}
.loc-btn b{display:block}.loc-btn span.small{color:var(--text-2)}

/* Refer & earn tables */
.tbl{width:100%;border-collapse:collapse;font-size:.9rem}.tbl th{text-align:left;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);padding:8px 10px;border-bottom:1px solid var(--hair)}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--hair);vertical-align:middle}.tbl tr:last-child td{border-bottom:0}
details summary{cursor:pointer;padding:8px 0}details p{margin:4px 0 10px}

/* Mobile menu (signed-out nav) */
.mmenu{position:fixed;right:12px;left:auto;width:min(248px,calc(100vw - 24px));top:calc(var(--nav-h) + env(safe-area-inset-top) + 8px);z-index:81;padding:6px;border-radius:14px;pointer-events:auto;max-height:calc(100dvh - var(--nav-h) - 40px);overflow:auto}
.mmenu nav{display:flex;flex-direction:column}.mmenu a{padding:9px 12px;border-radius:9px;font-weight:600;font-size:.92rem;color:var(--text)}.mmenu a:hover,.mmenu a:focus-visible{background:var(--teal-soft)}
/* The desktop hide moved to the nav block below: the menu is now the same at every width. */
.foot .cols p a{color:var(--teal)}
@media(max-width:640px){.grid.g3:has(.card-activity){grid-template-columns:1fr 1fr;gap:10px}.card-activity{padding:16px 12px}.card-activity h3{font-size:.95rem}.card-activity .small{font-size:.8rem}}

/* Overflow guards: nothing may widen the page on small screens */
html,body{overflow-x:hidden;max-width:100%}*,*::before,*::after{box-sizing:border-box;min-width:0}
.card,.field,.input,.select,.textarea,.grid,.stack,.row,.chips{max-width:100%}
/* The guard above catches containers too: a page container carries .wrap and .stack together, so
   .stack's 100% cancelled the page width and every view ran edge to edge while the nav stayed at 1180.
   Restated here, after the guard, so the container keeps the width the bar is aligned to. */
.wrap{max-width:var(--maxw)}
.chips{flex-wrap:wrap}.chip{max-width:100%;white-space:normal;text-align:left}
/* A rating, as the shape people read before they read the number. Bronze rather than the usual yellow,
   because a row of primary-colour stars in a warm editorial palette reads as somebody else's widget. */
.stars{ color:var(--accent-2,#C9A87A); letter-spacing:.06em; font-size:.9em }
/* The dots under a photo carousel.
   They were in the markup all along and had no styling at all, which is why only the arrows were ever
   visible. Each one is a button rather than a span so it can be pressed and reached by keyboard: on the
   profile card they replace the arrows entirely, which is less furniture sitting over a photograph.
   Placed over the bottom of the image with a soft scrim behind them, because a pale dot on a pale photo
   is invisible and a dark one on a dark photo is too. */
/* The dots sit on the photograph, at its foot.
   They were in the markup all along with no styling, which is why only the arrows were ever visible.
   Each is a button rather than a span so it can be pressed and reached from a keyboard, and they replace
   the arrows entirely: two large discs floating over a face were the heaviest thing on the card, and a
   row of dots says the same thing quietly while leaving the swipe gesture as the primary control.

   On the photo rather than under it, because under it they landed on the name. A soft gradient carries
   them, since a white dot on a pale photo is invisible and a dark one on a dark photo is too. */
.shot-dots{ position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; justify-content:center; align-items:center; gap:7px;
  padding:22px 0 11px; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.42), rgba(0,0,0,0)) }
.shot-dots button{ appearance:none; -webkit-appearance:none; border:0; padding:0; margin:0; font:inherit;
  width:7px; height:7px; border-radius:50%; cursor:pointer; pointer-events:auto;
  background:rgba(255,255,255,.55);
  transition:width var(--t-fast,.14s) ease, background var(--t-fast,.14s) ease }
.shot-dots button.on{ width:18px; border-radius:999px; background:#fff }
.shot-dots button.pend{ background:rgba(255,255,255,.3); box-shadow:0 0 0 1px rgba(255,255,255,.45) }
.shot-dots button:focus-visible{ outline:2px solid #fff; outline-offset:2px }
@media (prefers-reduced-motion: reduce){ .shot-dots button{ transition:none } }
/* The feed card's media box is the positioning context there, same as `.portrait` on the grid card. */
.rcard-media{ position:relative }
@media (prefers-reduced-motion: reduce){ .shot-dots button{ transition:none } }
/* A place in the "near me" list. Not a <button>: the button rules in this sheet pin height and padding
   hard enough that three stacked lines inside one collapsed into a single row of overlapping text. A div
   with a button role keeps the keyboard behaviour and none of the sizing. */
.placerow{ display:block; width:100%; text-align:left; background:var(--ivory-3,#FBF7F0);
  border:1px solid var(--edge); border-radius:12px; padding:10px 12px; cursor:pointer;
  font:inherit; color:inherit; min-height:0; height:auto; line-height:1.35 }
.placerow + .placerow{ margin-top:6px }
.placelist{ display:block; margin-top:10px; max-height:300px; overflow-y:auto; -webkit-overflow-scrolling:touch }
/* Inside the search sheet the results are the screen, so they run down it. The 300px box belongs to the
   list that sits inside a form, where it must not push the rest of the form off the page. */
.sh-panel .placelist{ max-height:none; overflow:visible; margin-top:4px }
.placerow:hover{ border-color:var(--accent-2,#C9A87A) }
.placerow:focus-visible{ outline:2px solid var(--accent,#8A6A44); outline-offset:2px }
.placerow-n{ display:block; font-weight:600 }
.placerow-m,.placerow-a{ display:block; font-size:.8rem; color:var(--text-3) }
code,pre{overflow-wrap:anywhere;word-break:break-word}
/* A stored key shown on purpose: a feature-flag name, an audit action, an environment variable. Every
   other identifier in the UI is rewritten into a readable label, so the few that must stay literal are
   marked as literal — an operator has to type or grep these exactly, and a label would be a lie. */
code{font-family:var(--mono);font-size:.86em;color:var(--text-3);background:var(--edge);
     padding:1px 5px;border-radius:5px;letter-spacing:0}
label.chip{display:inline-flex;align-items:center;gap:6px;cursor:pointer}

/* Country-status strip under the hero: one line, quiet, full width */
.strip{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:12px 18px;border-radius:var(--r-m);background:rgba(255,255,255,.72);border:1px solid var(--border);box-shadow:var(--inner);font-size:.92rem;color:var(--text-2)}
.strip>span{display:flex;align-items:center;gap:10px;flex:1;min-width:240px}.strip svg{width:18px;height:18px;color:var(--teal);flex:none}.strip b{color:var(--text)}
.search .sf label{white-space:nowrap}

/* Alignment pass: one rule — everything inside a card starts at the same left edge */
.card-activity,.card-activity h3,.card-activity p{text-align:left;align-items:flex-start}
.card-activity .go{margin-top:auto;align-self:flex-start}
.tstep{text-align:left}.tstep .n{margin-left:0}
.foot{padding-left:var(--pad);padding-right:var(--pad)}.foot .cols>div:first-child{padding-left:0}
.glass-strong.card.center h2,.glass-strong.card.center p{text-align:center}

/* ---------- Spacing system (2026-09-04): one vertical rhythm for every section, every width ---------- */
:root{--band:clamp(44px,6vw,80px)}
/* A band sets its own vertical rhythm and must not touch the horizontal margins: .wrap centres itself
   with margin:0 auto, and zeroing that left every banded section pinned to the left edge with the whole
   right-hand margin sitting empty. Vertical margins are what this needed to reset; centring was collateral. */
.band{padding:var(--band) var(--pad)!important;margin:0 auto!important}
.band+.band{padding-top:0!important}
.page{padding-bottom:var(--s-7)}
.hero.wrap{padding-top:12px;padding-bottom:var(--band)}
@media(min-width:760px) and (max-width:959px){.split{grid-template-columns:1.1fr .9fr;gap:var(--s-6)}.collage{max-width:400px}.grid.g3{grid-template-columns:1fr 1fr}.hosts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1023px){.hosts.editorial > :first-child{grid-row:auto}.hosts.editorial > :first-child .portrait{aspect-ratio:4/5}}
.split>.glass[style*="aspect-ratio:4/3"]{max-height:420px}
.tstep{padding:var(--s-5);min-height:0}.tstep .n{width:48px;height:48px;margin-bottom:var(--s-3)}.tstep h3{font-size:1.05rem}
.timeline{gap:var(--s-4)}
.glass-strong.card.center{padding:clamp(28px,5vw,56px)!important}
.card-activity{min-height:0}
h2{margin-bottom:0}.band .lead{margin-top:8px}
/* Hero search: never squeeze the three fields — two rows until there is real room */
@media(min-width:720px) and (max-width:1199px){.search{grid-template-columns:1fr 1fr}.search .sf:first-child{grid-column:1/-1}.search .btn{grid-column:1/-1}}
@media(min-width:1200px){.search{grid-template-columns:1.3fr 1.1fr .9fr auto}}
.search .sf select,.search .sf .input{text-overflow:ellipsis}
/* Safety items: label row + status line, never side-by-side overlap */
.safe{padding:14px 16px;border-radius:var(--r-m);display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.safe-row{display:flex;gap:12px;align-items:center}.safe-ico{color:var(--teal);width:22px;height:22px;flex:none}.safe-ico svg{width:22px;height:22px}.safe-label{font-weight:600;font-size:.92rem}
.safe .status{font-size:.7rem;padding:3px 8px}
.safe .status.confirmed{background:#EEF3FF;color:#3B5BA5}.safe .status{display:inline-block}
.strip>span{display:block;flex:1;min-width:240px;line-height:1.55}.strip>span svg{display:inline-block;vertical-align:-3px;margin-right:8px}

/* Booking calendar */
.cal{display:flex;flex-direction:column;gap:10px}.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal .day{min-height:38px;border-radius:10px;border:1px solid var(--hair);background:rgba(255,255,255,.8);font-weight:600;cursor:pointer;font:inherit;color:var(--text)}
.cal .day.off{opacity:.35;cursor:not-allowed;text-decoration:line-through}.cal .day.sel{background:var(--teal);color:#fff;border-color:var(--teal)}.cal .day:not(.off):hover{border-color:var(--teal)}
.cal .day:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.slots{display:flex;flex-wrap:wrap;gap:6px;max-height:180px;overflow:auto}.slots .chip.on{background:var(--teal);color:#fff;border-color:var(--teal)}
/* Filter chip rows stay single-line and scroll sideways; wrapping chips are for forms only */
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px}.chips.scroll .chip{white-space:nowrap;flex:none}
.chips.scroll .tiny{flex:none}

/* Super admin shell */
.page.admin{padding-top:calc(var(--nav-h) + 16px)}.admin-wrap{display:grid;grid-template-columns:1fr;gap:18px;max-width:1400px}
@media(min-width:960px){.admin-wrap{grid-template-columns:230px minmax(0,1fr);align-items:start}.admin-side{position:sticky;top:calc(var(--nav-h) + 16px)}}
.admin-side{padding:10px;border-radius:var(--r-l)}.admin-side nav{display:flex;flex-direction:column;gap:2px}
.admin-side nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-m);font-weight:600;color:var(--text-2)}.admin-side nav a svg{width:18px;height:18px;flex:none}
.admin-side nav a[aria-current="page"]{background:var(--teal);color:#fff}.admin-side nav a:hover:not([aria-current="page"]){background:var(--teal-soft);color:var(--teal-deep)}
@media(max-width:959px){.admin-side nav{flex-direction:row;overflow-x:auto}.admin-side nav a span{white-space:nowrap}}
.admin-body .tbl td,.admin-body .tbl th{white-space:nowrap}
/* Explore / Discover filters: captioned single-line chip rows, aligned advanced filters */
.filters{display:flex;flex-direction:column;gap:6px}.frow{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:10px}
.frow-label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
@media(max-width:640px){.frow{grid-template-columns:1fr;gap:4px}}
.adv{padding:14px 16px;border-radius:var(--r-m)}.adv-grid{gap:12px}.adv .field{margin:0}.adv .select{min-height:44px}.adv-foot{margin-top:10px;flex-wrap:wrap;gap:8px}
/* Admin shell: clear of the floating nav, aligned columns, no horizontal overflow */
.page.admin{padding-top:calc(var(--nav-h) + 44px)}
@media(min-width:960px){.admin-side{top:calc(var(--nav-h) + 44px)}}
.admin-wrap{max-width:var(--maxw)}.admin-body{min-width:0}.admin-body h2{font-size:clamp(1.5rem,2.4vw,2rem)}
.admin-body .grid.g3 .card h3{font-size:1.05rem}.admin-body .card{min-width:0}

/* Earnings calculator (host page) and price split line (host editors) */
.earn{display:grid;gap:22px;padding:clamp(22px,4vw,36px)!important}@media(min-width:860px){.earn{grid-template-columns:1.1fr 1fr;align-items:center}}
.earn-big{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,5vw,3.4rem);letter-spacing:-.03em;line-height:1;margin:8px 0 10px;color:var(--text)}.earn-big span{font-size:1rem;font-weight:600;color:var(--text-2);letter-spacing:0;margin-left:6px}
.earn-sliders{display:flex;flex-direction:column;gap:6px}.earn-lab{display:flex;justify-content:space-between;align-items:baseline;font-size:.9rem;color:var(--text-2);margin-top:10px}.earn-lab b{color:var(--text);font-size:1.05rem}
.earn input[type=range]{width:100%;accent-color:var(--teal);height:28px}
.psplit{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 4px}/* `--panel`, not a literal white.
 *
 * This was `rgba(255,255,255,.7)`, which is a correct tile in the theme it was written in and a dead
 * grey slab in the other one: the page paints cream text on it in dark mode, so the three figures a host
 * most wants to read - what a guest pays, what they receive, what we take - became ghost text on
 * near-white. The token resolves to #FBF7F0 light and #1B1C1A dark, and the hairline goes with it. */
.psplit>div{padding:10px 12px;border-radius:var(--r-m);background:var(--panel);border:1px solid var(--hair);display:flex;flex-direction:column}.psplit b{font-size:1.05rem}
@media(max-width:520px){.psplit{grid-template-columns:1fr}}

/* =====================================================================
   THEME v3 — marketplace design language (flat, white, photo-first, generous whitespace).
   Overrides the glass theme below; structure and behaviour unchanged.
   ===================================================================== */
:root{--bg:#F6F0E7;--panel:#FBF7F0;--panel-2:#F1EADE;--ph-bg:#EDE4D6;--ink-inv:#F4EDE1;--text:#1B1C1A;--text-2:#5F5A51;--text-3:#857F74;--hair:rgba(40,30,20,.08);--border:rgba(40,30,20,.14);--r-m:14px;--r-l:18px;--r-s:10px;--shadow-1:0 1px 2px rgba(60,45,30,.04),0 8px 24px -14px rgba(60,45,30,.14);--shadow-2:0 2px 8px rgba(60,45,30,.05),0 24px 56px -26px rgba(60,45,30,.20);--shadow-3:0 4px 14px rgba(60,45,30,.06),0 44px 96px -34px rgba(60,45,30,.26)}
body{background:var(--panel)}.atmos{display:none!important}
.glass,.glass-strong,.glass-tint{background:var(--panel)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:1px solid var(--hair)!important;box-shadow:none!important}
.card{border-radius:var(--r-m)}
h1{font-size:clamp(1.7rem,2.6vw,2.2rem);font-weight:700;letter-spacing:-.01em}h2{font-size:clamp(1.25rem,1.8vw,1.5rem);font-weight:600;letter-spacing:-.01em}h3{font-weight:600;font-size:1.05rem}
.lead{font-size:1.02rem;color:var(--text-2);max-width:60ch}.eyebrow{color:var(--text-2);letter-spacing:.04em;font-size:.74rem}.eyebrow::before{display:none}
/* nav: full-width white bar with a hairline, no floating pill */
.nav{top:0;padding:0}.nav .bar{max-width:none;border-radius:0;background:var(--panel)!important;border:0;border-bottom:1px solid var(--hair);box-shadow:none!important;padding:0 clamp(16px,4vw,40px);height:72px;backdrop-filter:none!important}
.nav.scrolled .bar{background:var(--panel)!important;box-shadow:none!important}.nav .links a,.nav .links button{color:var(--text);font-weight:500}.nav .links a:hover{background:var(--panel-2)}
.nav .brand{font-weight:800;color:var(--teal)}.page{padding-top:calc(72px + 24px)}.hero.wrap{padding-top:16px}
@media(max-width:767px){.nav .bar{border-radius:0;height:calc(64px + env(safe-area-inset-top))}}
/* buttons */
.btn{border-radius:8px;font-weight:600;box-shadow:none!important;min-height:44px}.btn-primary{background:var(--teal)!important;color:var(--ink-inv)}.btn-primary:hover{background:var(--teal-deep)!important}
.btn-secondary{background:var(--panel)!important;color:var(--text)!important;border:1px solid var(--text)!important}.btn-secondary:hover{background:var(--panel-2)!important}.btn-ghost{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.btn-lg{min-height:48px;padding:0 24px;font-size:1rem}
/* chips, tags, statuses */
.chip{border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:999px;font-weight:500}.chip[aria-pressed="true"],.chip.on{background:var(--teal);color:#fff;border-color:var(--text)}
.tag{background:var(--panel);border:1px solid var(--hair);color:var(--text);font-weight:600}.tag.lav,.tag.sky{background:var(--panel-2);border-color:transparent}
.vbadge{color:var(--text)}.status{font-weight:600}
/* category row (activities as categories) */
.cats{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:6px 0 0;border-bottom:1px solid var(--hair);margin-bottom:24px}.cats::-webkit-scrollbar{display:none}
.cat{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 12px 12px;min-width:84px;color:var(--text-2);font-size:.76rem;font-weight:500;border-bottom:2px solid transparent;background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;font-family:inherit}
.cat svg{width:24px;height:24px;color:currentColor}.cat:hover{color:var(--text);border-bottom-color:var(--hair)}.cat[aria-pressed="true"]{color:var(--text);border-bottom-color:var(--text)}
/* listing cards: photo-first, square, quiet */
.hosts{gap:24px 20px}@media(min-width:600px){.hosts{grid-template-columns:repeat(2,1fr)}}@media(min-width:900px){.hosts{grid-template-columns:repeat(3,1fr)}}@media(min-width:1180px){.hosts{grid-template-columns:repeat(4,1fr)}}
.hosts.editorial > :first-child{grid-row:auto;grid-column:auto}.hosts.editorial > :first-child .portrait{aspect-ratio:1/1}
.host{border:0!important;border-radius:0;box-shadow:none!important;background:transparent!important;overflow:visible}.host:hover{transform:none}
.host .portrait{aspect-ratio:1/1;border-radius:12px;background:var(--ph-bg)}.host .portrait img{transition:none}.host:hover .portrait img{transform:none}
.host .body{padding:12px 2px 0}.host .name{font-weight:600;font-size:.98rem}.host .meta{color:var(--text-2);font-size:.9rem}.host .intro{display:none}
.host .price{position:static;display:inline-block;margin-top:6px;background:none;border:0;padding:0;font-weight:600;color:var(--text);box-shadow:none}.host .price small{color:var(--text-2);font-weight:400}
.host .float{top:10px;left:10px}.host .float .tag{background:var(--panel);border:0;box-shadow:var(--shadow-1);font-size:.74rem}
.host .acts{margin-top:4px}.host .acts .tag{background:transparent;border:0;padding:0 6px 0 0;color:var(--text-2);font-weight:400;font-size:.86rem}
.host .foot{margin-top:8px}.host .foot .btn{display:none}.host .rating{color:var(--text-2);font-size:.86rem}
/* sections & bands */
.band{padding:40px var(--pad)!important}.band+.band{padding-top:0!important}.section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.card-activity{border:1px solid var(--hair)!important;background:var(--panel)!important;box-shadow:none!important;border-radius:12px}.card-activity:hover{box-shadow:var(--shadow-2)!important;transform:none}.card-activity .ico{background:var(--panel-2);border:0}
.tstep{border:1px solid var(--hair)!important}.tstep .n{background:var(--panel-2);border:0;box-shadow:none}
.timeline::before{display:none}
.strip{background:var(--panel-2);border:0}.safe{background:var(--panel-2)!important;border:0!important}
/* search pill (hero) */
.search{grid-template-columns:1fr!important;padding:6px!important;border-radius:999px!important;border:1px solid var(--border)!important;box-shadow:var(--shadow-2)!important;background:var(--panel)!important;max-width:760px}
@media(min-width:720px){.search{display:grid;grid-template-columns:1.3fr 1fr .8fr auto!important;align-items:center}.search .sf{border:0!important;background:transparent!important;border-radius:999px;padding:8px 20px}.search .sf+.sf{border-left:1px solid var(--hair)!important;border-radius:0}.search .sf:first-child{grid-column:auto}.search .btn{grid-column:auto;border-radius:999px;min-height:46px;padding:0 18px;margin-right:2px}}
@media(max-width:719px){.search{border-radius:16px!important}.search .sf{background:var(--panel-2)!important;border:0!important}}
.search .sf label{font-size:.68rem;letter-spacing:.02em;color:var(--text)}.search .sf select,.search .combo .input{font-weight:500}.combo .input{background:transparent!important;border:0!important;box-shadow:none!important;padding-left:0}
.combo-list{background:var(--panel)!important;border:1px solid var(--hair)!important;box-shadow:var(--shadow-2)!important}
/* forms */
.input,.select{background:var(--panel);border:1px solid var(--border);border-radius:999px}.textarea{background:var(--panel);border:1px solid var(--border);border-radius:8px}.input:focus,.select:focus,.textarea:focus{border-color:var(--text);box-shadow:none}
/* footer */
footer.foot{background:var(--panel-2);border-top:1px solid var(--hair);margin-top:40px;padding-left:max(var(--pad),env(safe-area-inset-left));padding-right:max(var(--pad),env(safe-area-inset-right))}
footer.foot .cols{max-width:var(--maxw);margin:0 auto}
/* A grid item's default min-width:auto refuses to shrink below its longest unbreakable word, so the
   support address was widening its track and spilling past the footer. Let the columns shrink, and let
   the address itself wrap. */
/* Country list, read like a reference table rather than a wall of pills: alphabetical inside each region,
   flowing into as many columns as the viewport allows, so 121 names stay scannable. */
.mkt-region{margin:0 0 30px}
.mkt-region h2{display:flex;align-items:baseline;gap:10px;font-size:.82rem;text-transform:uppercase;
  letter-spacing:.1em;font-weight:700;color:var(--teal);margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--hair)}
.mkt-region h2 span{font-size:.78rem;letter-spacing:.04em;color:var(--text-2);font-weight:600}
.mkt-list{list-style:none;margin:0;padding:0;columns:4;column-gap:26px}
.mkt-list li{break-inside:avoid;display:flex;align-items:baseline;gap:7px;padding:4px 0;font-size:.92rem}
.mkt-flag{flex:none;width:1.35em;font-size:1.02em;line-height:1;letter-spacing:0;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.mkt-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mkt-list em{font-style:normal;font-size:.7rem;color:var(--text-2);white-space:nowrap}
.mkt-cur{font-size:.72rem;color:var(--text-2);font-weight:600;font-variant-numeric:tabular-nums}
@media(max-width:1100px){.mkt-list{columns:3}}
@media(max-width:760px){.mkt-list{columns:2}}
@media(max-width:460px){.mkt-list{columns:1}}

/* Live market count sitting above the hero search. Small, quiet, and legible on photography. */
.mkt-badge{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;margin:0 0 10px;
  padding:5px 11px;border-radius:999px;background:rgba(12,16,15,.55);color:var(--ink-inv);font-size:.78rem;font-weight:600;
  letter-spacing:.01em;text-decoration:none;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16)}
.mkt-badge:hover{background:rgba(12,16,15,.72)}
.mkt-dot{width:6px;height:6px;border-radius:50%;background:#5FD0A6;flex:none}
.mkt-arrow{opacity:.7;font-size:.9em}
.cine-search{display:flex;flex-direction:column;align-items:flex-start}
@media (prefers-reduced-motion:no-preference){.mkt-badge{transition:background .2s ease}}
footer.foot .cols>div{min-width:0}
footer.foot .cols a[href^="mailto:"]{overflow-wrap:anywhere}footer.foot h4,footer.foot .foot-h{font-size:.9rem;font-weight:600;color:var(--text);margin:0}footer.foot a{color:var(--text-2)}footer.foot a:hover{color:var(--text);text-decoration:underline}
/* misc */
.notice{border-radius:12px;border:1px solid var(--hair)}.tabs{background:var(--panel);border-top:1px solid var(--hair);border-radius:0;left:0;right:0;bottom:0;box-shadow:none}
.mmenu{background:var(--panel)!important;border:1px solid var(--hair)!important;box-shadow:var(--shadow-2)!important}
.loc-card,.loc-btn{background:var(--panel-2);border:1px solid var(--hair)}
.admin-side{background:var(--panel)!important}.admin-side nav a[aria-current="page"]{background:var(--panel-2);color:var(--text)}
.glass-strong.card.center{background:var(--panel-2)!important;border:0!important}
.collage,.collage *{display:none!important}
.host .rating{padding:0;margin:0}.host .foot{justify-content:flex-start}.host .rating::before{display:none}
.host .price{display:block;margin-top:8px}.host .portrait .price{position:absolute;right:10px;bottom:10px;display:inline-block;margin:0;background:var(--panel);padding:5px 10px;border-radius:999px;box-shadow:var(--shadow-1);font-size:.86rem}
.host .foot{padding:0;margin-top:6px}.host .rating{display:block;padding-left:0;text-indent:0}.host .rating svg{display:none}
.search .sf,.search .sf label,.search .sf select,.search .combo .input{text-align:left}
/* Category row with arrows + auto-rotation */
.cats-wrap{position:relative;display:flex;align-items:center;gap:6px;margin-bottom:24px}.cats-wrap .cats{margin-bottom:0;flex:1;scroll-behavior:smooth;scroll-snap-type:x proximity}.cat{scroll-snap-align:start}
.cats-arrow{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--panel);color:var(--text);font-size:1.2rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--shadow-1)}
.cats-arrow:hover{background:var(--panel-2)}.cats-arrow:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
@media(max-width:640px){.cats-arrow{display:none}}
@media(prefers-reduced-motion:reduce){.cats-wrap .cats{scroll-behavior:auto}}
/* Compact search pill */
.search{max-width:640px;padding:4px!important;box-shadow:0 2px 12px rgba(0,0,0,.1)!important}
@media(min-width:720px){.search .sf{padding:5px 16px}.search .sf label{font-size:.62rem}.search .sf select,.search .combo .input{font-size:.92rem;min-height:26px;padding-top:0;padding-bottom:0}.search .btn{min-height:40px;padding:0 14px;font-size:.9rem}}
.hero h1{font-size:clamp(1.6rem,2.4vw,2rem)}.hero .lead{font-size:.98rem}
/* Category ticker: continuous marquee (like a market ticker), pauses on hover/focus, off for reduced motion */
.ticker{overflow:hidden;border-bottom:1px solid var(--hair);margin-bottom:24px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker-track{display:flex;width:max-content;gap:6px;animation:ticker 60s linear infinite;will-change:transform}
.ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none;overflow-x:auto}.ticker{mask-image:none;-webkit-mask-image:none}}
.ticker .cat{min-width:112px}

/* Category rails */
.rail-sec{margin:26px 0 8px}.rail-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.rail-title{display:inline-flex;align-items:center;gap:8px;color:var(--text)}.rail-title h2{font-size:1.15rem;font-weight:600;margin:0}.rail-arrow-inline{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ph-bg);font-size:.9rem}
.rail-nav{display:flex;gap:6px}.rail-nav button{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:var(--panel);cursor:pointer;font-size:1.1rem;line-height:1;color:var(--text)}.rail-nav button:hover{background:var(--panel-2)}
/* The rail runs to the edges of the band while the first card still starts on the heading's line.
   Stopping the track at the section padding left a dead margin either side and made a row of cards look
   like it had been cropped rather than like it continues. */
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin-inline:calc(-1 * var(--pad));padding:2px var(--pad) 6px;scroll-padding-inline:var(--pad)}
.rail::-webkit-scrollbar{display:none}
.rcard{position:relative;flex:0 0 clamp(150px,15.4vw,232px);scroll-snap-align:start;color:var(--text)}
.rcard-media{display:block;position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:var(--ph-bg)}.rcard-media img{width:100%;height:100%;object-fit:cover;display:block}
.rcard-pill{position:absolute;left:10px;top:10px;background:var(--panel);border-radius:999px;padding:5px 10px;font-size:.74rem;font-weight:600;box-shadow:var(--shadow-1)}
.rcard-save{position:absolute;right:10px;top:10px;width:32px;height:32px;border-radius:50%;border:0;background:rgba(0,0,0,.45);color:var(--ink-inv);display:grid;place-items:center;cursor:pointer}.rcard-save svg{width:16px;height:16px}.rcard-save[aria-pressed="true"]{background:var(--teal)}
.rcard-body{padding:9px 2px 0}.rcard-title{font-weight:600;font-size:.94rem;line-height:1.3}.rcard-sub{color:var(--text-2);font-size:.86rem;margin-top:2px}
.rcard-more .rcard-media{border:1px solid var(--hair)}.rcard-more-stack{position:relative;width:110px;height:90px;display:block}.rcard-more-stack img{position:absolute;width:64px;height:64px;object-fit:cover;border-radius:10px;border:2px solid var(--panel);box-shadow:var(--shadow-1)}
.rcard-more-stack img:nth-child(1){left:0;top:14px;transform:rotate(-8deg)}.rcard-more-stack img:nth-child(2){left:24px;top:2px;z-index:1}.rcard-more-stack img:nth-child(3){left:48px;top:16px;transform:rotate(8deg)}
@media(max-width:640px){.rail-nav{display:none}.rcard{flex-basis:150px}}
/* Hero: bigger words, smaller search */
.hero h1{font-size:clamp(2rem,3.6vw,3.1rem);line-height:1.08;max-width:18ch}.hero .lead{font-size:clamp(1rem,1.25vw,1.15rem);max-width:64ch}
.search{max-width:560px;padding:3px!important}@media(min-width:720px){.search .sf{padding:3px 14px}.search .sf label{font-size:.58rem;line-height:1.1}.search .sf select,.search .combo .input{font-size:.88rem;min-height:22px}.search .btn{min-height:36px;padding:0 12px;font-size:.86rem}.search .btn svg{width:15px;height:15px}}
@media(min-width:720px){.search{grid-template-columns:1.15fr 1fr 1.05fr auto!important;max-width:600px}.search .sf select{text-overflow:clip}}
.hero h1{max-width:24ch}

/* Instagram-feel touches: stories row with ringed avatars, post-like headers */
.stories{display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;padding:4px 2px 8px}.stories::-webkit-scrollbar{display:none}
.story{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;cursor:pointer;font:inherit;color:var(--text);width:72px}
.story-ava{width:66px;height:66px;border-radius:50%;padding:3px;background:var(--hair);display:block}.story.ring .story-ava{background:linear-gradient(45deg,var(--teal),#F2A0A6,#8FB3E6)}.story.live .story-ava{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--teal)}
.story-ava img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid var(--panel);display:block}.story-name{font-size:.72rem;max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.host .body .name{display:flex;align-items:center;gap:8px}
/* The price, on the name line. `margin-left:auto` puts it at the right-hand end whatever is beside it,
   and `flex:none` keeps it whole when a long public name would otherwise squeeze it. */
.host .name .name-price{ margin-left:auto; flex:none; font-family:var(--display); font-weight:700;
  font-size:.95rem; color:var(--text); white-space:nowrap }
.host .name .name-price small{ color:var(--text-2); font-weight:500; font-size:.82em }

/* Header: back to the original floating glass pill on desktop (kept flush on phones) */
@media(min-width:768px){
  .nav{top:12px;padding:0 var(--pad)}
  .nav .bar{max-width:var(--maxw)!important;height:var(--nav-h);padding:0 var(--s-3) 0 var(--s-4);border-radius:999px!important;border:1px solid var(--border)!important;
    background:var(--glass)!important;backdrop-filter:blur(var(--blur-nav)) saturate(1.4)!important;-webkit-backdrop-filter:blur(var(--blur-nav)) saturate(1.4)!important;box-shadow:var(--shadow-1),var(--inner)!important}
  .nav.scrolled .bar{background:var(--glass-strong)!important;box-shadow:var(--shadow-2),var(--inner)!important}
  .page{padding-top:calc(var(--nav-h) + 36px)}.hero.wrap{padding-top:8px}.page.admin{padding-top:calc(var(--nav-h) + 44px)}
}
/* Safety block: streamlined rows — icon · label · status, hairline separators, two columns on wide screens */
.safe{flex-direction:row;align-items:center;gap:12px;padding:12px 4px;background:transparent!important;border:0!important;border-bottom:1px solid var(--hair)!important;border-radius:0}
.safe .safe-row{flex:1;min-width:0}.safe .status{flex:none;margin-left:auto}
.grid.g2:has(.safe){gap:0 32px}.grid.g2:has(.safe)>.safe:nth-last-child(-n+2){border-bottom:0!important}
@media(max-width:767px){.grid.g2:has(.safe)>.safe:nth-last-child(2){border-bottom:1px solid var(--hair)!important}}
/* Landing safety block: the list sits in a half-width pane, so stack it as one column */
.split .grid.g2:has(.safe){grid-template-columns:1fr;gap:0}
.split .grid.g2:has(.safe)>.safe{border-bottom:1px solid var(--hair)!important}
.split .grid.g2:has(.safe)>.safe:last-child{border-bottom:0!important}
@media(min-width:768px){.split .safe .safe-label{white-space:nowrap}}

/* =====================================================================================
   IMMERSIVE LAYER — "the city flows around you" (tokens: design-system/MASTER.md)
   Scoped to the landing (.imm) plus global nav, buttons, reveals, cursor, loader, transitions.
   ===================================================================================== */
:root{--plate:rgba(251,247,240,.94);--paper:#F6F0E7;--ink:#1B1C1A;--ink-2:#5F5A51;--gold:#C9A87A;--night:#111211;--night-2:#1B1C1A;--mist:rgba(251,247,240,.72);--mist-dark:rgba(17,18,17,.44);
  --m-micro:200ms;--m-std:420ms;--m-reveal:820ms;--m-cine:1100ms;--e-out:cubic-bezier(.22,1,.36,1);--e-inout:cubic-bezier(.65,0,.35,1);
  --serif:"Geist",ui-sans-serif,system-ui,sans-serif;--sv:0;--mx:.5;--my:.5;--gx:50%;--gy:50%}
body{background:var(--paper);transition:background-color var(--m-cine) var(--e-inout)}
html[data-tone=afternoon] body{background:#F8F3EB}html[data-tone=golden] body{background:#F3EADB}
.atmos{transition:opacity var(--m-cine) var(--e-inout)}html[data-tone=golden] .atmos{opacity:.7}
.atmos .orb{transition:transform 2.4s var(--e-out)}
.atmos .o1{transform:translate3d(calc((var(--mx) - .5)*48px),calc((var(--my) - .5)*36px),0)}.atmos .o2{transform:translate3d(calc((var(--mx) - .5)*-40px),calc((var(--my) - .5)*28px),0)}
.atmos .o3{transform:translate3d(calc((var(--mx) - .5)*24px),calc((var(--my) - .5)*-30px),0)}.atmos .o4{transform:translate3d(calc((var(--mx) - .5)*-30px),calc((var(--my) - .5)*-20px),0)}

/* glass as a material: specular follows the pointer per surface */
.glass,.glass-strong{position:relative}
/* A glass surface that already positions itself keeps its own positioning.
   The rule above exists only so the sheen overlay has a containing block, and absolute or fixed provide
   that just as well as relative does. But it sits later in the file than the rules for the floating
   surfaces and has the same specificity, so it was quietly winning: the city dropdown was demoted from
   absolute to relative, which put it back in normal flow and stretched the search bar to 392px to enclose
   it rather than letting it float over the hero. The mobile menu and the account-limited bar were losing
   their `fixed` the same way. Re-asserted here rather than by reordering, because the sheen still needs
   the rule above to apply to every glass surface. */
.combo-list.glass-strong{position:absolute}
.mmenu.glass-strong{position:fixed}
.restrict-bar.glass-strong{position:fixed}
.glass::before,.glass-strong::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(260px circle at var(--gx) var(--gy),rgba(255,255,255,.38),transparent 62%);opacity:0;transition:opacity var(--m-std) var(--e-out)}
@media(pointer:fine){.glass:hover::before,.glass-strong:hover::before{opacity:1}}

/* liquid buttons: highlight sweep, arrow drift, soft membrane */
.btn{position:relative;overflow:hidden;transition:transform var(--m-std) var(--e-out),box-shadow var(--m-std) var(--e-out),background var(--m-std) var(--e-out)}
.btn::after{content:"";position:absolute;inset:-2px;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.30) 50%,transparent 65%);transform:translateX(-130%);transition:transform .75s var(--e-out);pointer-events:none}
.btn:hover::after{transform:translateX(130%)}
.btn svg:last-child{transition:transform .32s var(--e-out)}.btn:hover svg:last-child{transform:translateX(4px)}
.btn-primary:hover{box-shadow:0 14px 34px -14px rgba(138,106,68,.65)}

/* smart navbar: transparent over the hero, frosted while scrolling, tucks on fast downward scroll */
.nav .bar{transition:background var(--m-std),box-shadow var(--m-std),transform .55s var(--e-out),height var(--m-std) var(--e-out),border-color var(--m-std)}
.nav.tuck .bar{transform:translateY(-150%)}
.nav.compact .bar{height:calc(var(--nav-h) - 8px)}
.nav.over-dark .bar{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.18)!important;box-shadow:none!important;backdrop-filter:blur(16px) saturate(1.2)!important;-webkit-backdrop-filter:blur(16px) saturate(1.2)!important}
.nav.over-dark .bar .brand,.nav.over-dark .bar .links a,.nav.over-dark .bar .links button,.nav.over-dark .bar .icon-btn,.nav.over-dark .bar .title-m,.nav.over-dark .bar a:not(.btn){color:var(--ink-inv)}
.nav.over-dark .bar .links a:hover,.nav.over-dark .bar .links button:hover{background:rgba(255,255,255,.12)}
.nav.over-dark .bar .links a[aria-current="page"]{background:rgba(255,255,255,.16);color:var(--ink-inv)}
.nav.over-dark .bar .btn-secondary{background:rgba(255,255,255,.14);color:var(--ink-inv);border-color:rgba(255,255,255,.25)}

/* reveals and page transition */
[data-reveal]{opacity:0;transform:translate3d(0,26px,0);transition:opacity var(--m-reveal) var(--e-out),transform var(--m-reveal) var(--e-out);transition-delay:calc(var(--d,0)*90ms)}
[data-reveal].in{opacity:1;transform:none}
#root.pt{animation:pt var(--m-std) var(--e-out) both}
@keyframes pt{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}

/* cursor: minimal dot trailing the pointer, labels on photography/profiles; the OS pointer stays */
.cur{position:fixed;left:0;top:0;z-index:999;pointer-events:none;mix-blend-mode:difference}
.cur-dot{position:absolute;left:0;top:0;width:8px;height:8px;border-radius:50%;background:var(--panel);transform:translate(-50%,-50%);transition:transform .28s var(--e-out),opacity .2s}
.cur.is-link .cur-dot{transform:translate(-50%,-50%) scale(2.6);opacity:.9}
.cur.is-label .cur-dot{transform:translate(-50%,-50%) scale(7);opacity:1}
.cur-label{position:absolute;left:0;top:0;transform:translate(-50%,-50%);font:600 .58rem/1 var(--display);letter-spacing:.14em;color:#000;opacity:0;transition:opacity .2s}
.cur.is-label .cur-label{opacity:1}
.cur.is-hidden{opacity:0}
@media(pointer:coarse),(prefers-reduced-motion:reduce){.cur{display:none}}

/* branded first-load moment */
.loader{position:fixed;inset:0;z-index:1000;display:grid;place-content:center;gap:2px;background:var(--paper);color:var(--ink);transition:opacity .5s var(--e-inout);pointer-events:none}
.loader-word{display:flex;justify-content:center;font-family:var(--serif);font-size:clamp(3rem,9vw,7rem);line-height:.9;letter-spacing:-.02em}
.loader-word span{display:inline-block;opacity:0;transform:translate3d(0,18px,0);transition:opacity .5s var(--e-out),transform .6s var(--e-out)}
.loader.go .loader-word span{opacity:1;transform:none}
.loader.go .loader-word:nth-child(1) span:nth-child(1){transition-delay:.02s}.loader.go .loader-word:nth-child(1) span:nth-child(2){transition-delay:.07s}.loader.go .loader-word:nth-child(1) span:nth-child(3){transition-delay:.12s}.loader.go .loader-word:nth-child(1) span:nth-child(4){transition-delay:.17s}
.loader.go .loader-word:nth-child(2) span:nth-child(1){transition-delay:.22s}.loader.go .loader-word:nth-child(2) span:nth-child(2){transition-delay:.27s}.loader.go .loader-word:nth-child(2) span:nth-child(3){transition-delay:.32s}.loader.go .loader-word:nth-child(2) span:nth-child(4){transition-delay:.37s}
.loader-coord{margin-top:18px;text-align:center;font:500 .7rem/1 var(--display);letter-spacing:.18em;color:var(--ink-2);opacity:0;transition:opacity .4s .4s}.loader.go .loader-coord{opacity:1}
.loader.out{opacity:0}

/* ---------- landing typography ---------- */
.imm h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.1rem,4.4vw,3.8rem);letter-spacing:-.015em;line-height:1.02;text-wrap:balance}
.imm h2 em{font-style:italic;color:var(--teal)}
.imm .lead{font-size:clamp(1.02rem,1.25vw,1.2rem);max-width:60ch;color:var(--ink-2)}
.imm .num{font-family:var(--serif);font-size:clamp(5rem,12vw,13rem);line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(20,23,26,.16);letter-spacing:-.04em;user-select:none}
.imm .coord{font:500 .7rem/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.imm section.band{padding:clamp(64px,9vw,150px) 0}
.imm .rails-band{padding-top:clamp(28px,4vw,56px)}

/* ---------- hero: cinematic opening ---------- */
.cine{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden;margin-top:calc(-1*(var(--nav-h) + 36px));padding:calc(var(--nav-h) + 80px) 0 clamp(48px,8vh,96px);color:var(--ink-inv);isolation:isolate;background:var(--night)}
.cine-layer{position:absolute;inset:-7% -5%;z-index:-2;will-change:transform}
.cine-layer img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.06)}
.cine-bg{transform:scale(calc(1.02 + var(--hp,0)*.10))}
.cine-fg{z-index:-1;opacity:.85;-webkit-mask-image:radial-gradient(90% 70% at 70% 60%,#000 30%,transparent 72%);mask-image:radial-gradient(90% 70% at 70% 60%,#000 30%,transparent 72%)}
.cine-wash{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,18,32,.28),rgba(11,18,32,.18) 35%,rgba(11,18,32,.82) 100%),radial-gradient(60% 50% at calc(var(--mx)*100%) calc(var(--my)*100%),rgba(228,179,122,.16),transparent 70%)}
.cine-grain{position:absolute;inset:-20%;z-index:0;pointer-events:none;opacity:.12;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:grain 1.1s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.cine .wrap{position:relative;z-index:1;display:grid;gap:clamp(18px,3vh,30px)}
.cine-eyebrow{font:600 .7rem/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.cine h1{font-family:var(--serif);font-weight:400;font-size:clamp(3.1rem,8.4vw,8.6rem);line-height:.95;letter-spacing:-.02em;max-width:13ch;color:var(--ink-inv);text-transform:none}
.cine h1 .w{display:inline-block;transform:translate3d(0,calc(var(--hp,0)*(var(--i) - 3)*-9px),0);opacity:calc(1 - var(--hp,0)*.85)}
.cine h1 .w:nth-child(n+7){font-style:italic;color:var(--gold)}
.cine .lead{color:rgba(255,255,255,.84);max-width:58ch;font-size:clamp(1rem,1.2vw,1.15rem)}
.cine-bottom{display:grid;gap:18px;align-items:end;grid-template-columns:1fr}
@media(min-width:960px){.cine-bottom{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}}
.cine .search,.cine .pill-search{background:var(--plate)!important}
.cine .vbadge{color:var(--ink-inv);background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px)}
.cine .badges{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-start}
.scroll-cue{position:absolute;right:clamp(16px,4vw,40px);bottom:clamp(16px,4vh,32px);z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,.72);font:600 .62rem/1 var(--display);letter-spacing:.18em;text-transform:uppercase;transform:translate3d(0,calc(var(--sv)*10px),0);transition:transform .4s var(--e-out)}
.scroll-cue i{display:block;width:1px;height:40px;background:linear-gradient(var(--panel),transparent);animation:cue 2.4s var(--e-inout) infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0);opacity:0}30%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1) translateY(30px);opacity:0}}
.periph{display:none}
@media(min-width:1600px){.periph{display:block;position:absolute;top:50%;z-index:1;writing-mode:vertical-rl;transform:translateY(-50%);font:500 .66rem/1 var(--display);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.42)}.periph.l{left:22px;transform:translateY(-50%) rotate(180deg)}.periph.r{right:22px}}

/* floating cultural notes */
.notes{position:absolute;inset:0;pointer-events:none;z-index:1}
.note{position:absolute;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--ink-inv);font:500 .74rem/1 var(--display);letter-spacing:.02em;white-space:nowrap;will-change:transform}
.note.ink{background:rgba(255,255,255,.7);border-color:var(--hair);color:var(--ink)}
@media(max-width:767px){.note{display:none}}

/* ---------- velocity marquee ---------- */
.ticker-track.js-marquee{animation:none}
.imm .ticker{border-bottom:0}

/* ---------- city discovery: vertical scroll moves cities horizontally ---------- */
.cities{position:relative;height:340vh}
.cities-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
/* The heading needs the same air above it as every other section on the page.
   It used to get that from a "Cities" eyebrow sitting on top of it; with the eyebrow gone the heading
   sat hard against the band above, on the seam between the dark section and this one. `--band` is the
   token the other sections pad with, so this matches their rhythm rather than inventing a number. In the
   sticky, full-height layout the head is part of a vertically centred group, where the extra space is
   simply part of that group. Padding rather than margin: a top margin here collapses out through the
   sticky wrapper and the section, taking the gap with it. */
.cities-head{padding:var(--band) var(--pad) 0;max-width:var(--maxw);margin:0 auto 22px;width:100%}
.hs-track{display:flex;gap:clamp(20px,4vw,56px);padding:0 max(var(--pad),calc((100vw - var(--maxw))/2));will-change:transform;align-items:flex-start}
.city{flex:0 0 auto;width:min(76vw,560px);position:relative;text-decoration:none;color:var(--ink)}
.city:nth-child(even){margin-top:clamp(24px,6vh,72px)}
.city-img{position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;box-shadow:0 44px 90px -46px rgba(20,23,26,.55);background:var(--night-2)}
.city-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.03);transition:transform 1.2s var(--e-out);filter:saturate(.9)}
.city:hover .city-img img{transform:scale(1.07)}
.city-name{position:absolute;left:18px;top:16px;color:var(--ink-inv);font-family:var(--serif);font-size:clamp(2.2rem,4.6vw,4rem);line-height:.9;letter-spacing:-.02em;text-shadow:0 10px 30px rgba(0,0,0,.35)}
.city-coords{position:absolute;left:20px;bottom:16px;color:rgba(255,255,255,.85);font:500 .66rem/1.7 var(--display);letter-spacing:.18em;text-transform:uppercase}
.city-panel{position:absolute;right:-6%;bottom:-10%;width:min(86%,340px);padding:16px 18px;border-radius:18px;background:var(--mist);border:1px solid var(--hair);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);box-shadow:0 24px 60px -30px rgba(20,23,26,.35),inset 0 1px 0 rgba(255,255,255,.7);transform:translate3d(calc((var(--mx) - .5)*-10px),calc((var(--my) - .5)*-8px),0);transition:transform .6s var(--e-out)}
.city-panel b{display:block;font:600 .92rem/1.3 var(--display)}
.city-panel q{display:block;margin:6px 0 8px;font-family:var(--serif);font-size:1.12rem;line-height:1.25;quotes:"“" "”"}
.city-panel .tiny{display:block;color:var(--ink-2)}
.city-panel .go{display:inline-flex;align-items:center;gap:6px;margin-top:10px;color:var(--teal);font-weight:600;font-size:.86rem}
@media(max-width:767px),(prefers-reduced-motion:reduce){.cities{height:auto}.cities-sticky{position:static;height:auto;overflow:visible}.hs-track{overflow-x:auto;transform:none!important;scroll-snap-type:x mandatory;padding-bottom:64px;-webkit-overflow-scrolling:touch}.city{scroll-snap-align:start;width:min(82vw,420px)}.city:nth-child(even){margin-top:0}.city-panel{position:static;width:auto;margin-top:12px;transform:none}}

/* ---------- meet the folk: cinematic portraits ---------- */
.folk{display:grid;gap:clamp(40px,7vw,110px)}
.folk-item{display:grid;gap:22px;align-items:center;grid-template-columns:1fr}
@media(min-width:900px){.folk-item{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.folk-item:nth-child(even) .folk-portrait{order:2}.folk-item:nth-child(even) .folk-text{order:1;text-align:right}.folk-item:nth-child(even) .folk-notes{align-items:flex-end}}
.folk-portrait{position:relative;aspect-ratio:3/4;border-radius:22px;overflow:hidden;background:var(--night-2);box-shadow:0 50px 100px -50px rgba(20,23,26,.6)}
.folk-portrait img{width:100%;height:100%;object-fit:cover;animation:breathe 14s var(--e-inout) infinite alternate;filter:saturate(.92)}
@keyframes breathe{from{transform:scale(1) translateY(0)}to{transform:scale(1.045) translateY(-1.5%)}}
.folk-portrait .rcard-pill{position:absolute;left:14px;top:14px}
.folk-panel{position:absolute;left:14px;right:14px;bottom:14px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.70);border:1px solid var(--hair);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.folk-panel b{font:700 1rem/1.2 var(--display)}.folk-panel .tiny{display:block;color:var(--ink-2)}
.folk-text .name{font-family:var(--serif);font-size:clamp(2.4rem,5vw,4.4rem);line-height:.95;letter-spacing:-.02em}
.folk-text .city{font:600 .74rem/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin:10px 0 18px;display:block}
.folk-text .bio{font-size:1.05rem;line-height:1.55;color:var(--ink);max-width:44ch}
.folk-text q{display:block;margin-top:16px;font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,2vw,1.7rem);line-height:1.25;color:var(--ink-2);quotes:"“" "”"}
.folk-notes{display:flex;flex-direction:column;gap:6px;margin-top:18px}
.folk-notes span{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid var(--hair);font-family:var(--serif);font-style:italic;font-size:.98rem;color:var(--ink);opacity:0;transform:translate3d(-8px,0,0);transition:opacity .6s var(--e-out),transform .6s var(--e-out)}
.folk-item.in .folk-notes span,.folk-item:hover .folk-notes span{opacity:1;transform:none}
.folk-notes span:nth-child(2){transition-delay:.12s}.folk-notes span:nth-child(3){transition-delay:.24s}

/* ---------- scroll-driven story ---------- */
.story{position:relative;height:420vh}
.story-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center;isolation:isolate}
.frame{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:0 var(--pad);opacity:0;transform:scale(1.05);filter:blur(14px);transition:opacity .95s var(--e-inout),transform 1.1s var(--e-out),filter .95s var(--e-inout);pointer-events:none}
.frame.is-active{opacity:1;transform:none;filter:none;pointer-events:auto}
.frame.is-past{opacity:0;transform:scale(.96);filter:blur(10px)}
.frame-img{position:absolute;inset:0;z-index:-1}.frame-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.8)}
.frame-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,18,32,.35),rgba(11,18,32,.55))}
.frame h3{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,6.5vw,6.4rem);line-height:.98;letter-spacing:-.02em;color:var(--ink-inv);max-width:16ch;text-shadow:0 12px 40px rgba(0,0,0,.35)}
.frame .frame-sub{margin-top:14px;color:rgba(255,255,255,.8);font-size:1.05rem}
.frame-mini{position:absolute;width:min(34vw,260px);aspect-ratio:1;border-radius:14px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);z-index:-1;opacity:.9}
.frame-mini img{width:100%;height:100%;object-fit:cover}
.frame-mini.a{left:6%;top:12%}.frame-mini.b{right:8%;top:18%}.frame-mini.c{left:14%;bottom:12%}
.story-bar{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:120px;height:2px;background:rgba(255,255,255,.25);border-radius:2px;overflow:hidden}
.story-bar i{display:block;height:100%;width:100%;background:var(--panel);transform:scaleX(var(--p,0));transform-origin:left}
@media(max-width:767px),(prefers-reduced-motion:reduce){.story{height:auto}.story-sticky{position:static;height:auto;display:grid;gap:12px}.frame{position:relative;min-height:70svh;opacity:1;transform:none;filter:none;pointer-events:auto;border-radius:18px;overflow:hidden}.frame-mini{display:none}.story-bar{display:none}}

/* ---------- activities as an editorial list ---------- */
.imm .card-activity{transition:transform var(--m-std) var(--e-out),box-shadow var(--m-std) var(--e-out)}
.imm .card-activity:hover{transform:translate3d(0,-3px,0)}
.imm .card-activity .ico{transition:transform var(--m-std) var(--e-out)}.imm .card-activity:hover .ico{transform:rotate(8deg)}

/* ---------- night moment before the footer ---------- */
.night-moment{position:relative;min-height:86svh;display:grid;align-items:center;color:var(--ink-inv);isolation:isolate;overflow:hidden;background:var(--night);padding:clamp(80px,12vw,160px) 0}
.night-moment .cine-layer{opacity:.55}.night-moment .cine-layer img{filter:saturate(.6) brightness(.7)}
.night-moment .wash{position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 60% at 50% 100%,rgba(228,179,122,.18),transparent 70%),linear-gradient(180deg,var(--night),transparent 30%,transparent 70%,var(--night))}
.night-moment h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,6vw,6rem);line-height:1;letter-spacing:-.02em;max-width:16ch;color:var(--ink-inv)}
.night-moment h2 em{color:var(--gold);font-style:italic}
.night-moment .lead{color:rgba(255,255,255,.72)}
.night-moment .periph{color:rgba(255,255,255,.3)}
.imm footer.foot{background:var(--night);color:rgba(255,255,255,.8);border-top:1px solid rgba(255,255,255,.08)}
.imm footer.foot a{color:rgba(255,255,255,.72)}.imm footer.foot a:hover{color:var(--ink-inv)}
.imm footer.foot h4,.imm footer.foot .foot-h,.imm footer.foot b,.imm footer.foot .brand{color:var(--ink-inv)}
.imm footer.foot .tiny,.imm footer.foot .small{color:rgba(255,255,255,.55)}

/* reduced motion: everything readable, nothing moves */
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}.cine-grain,.scroll-cue i,.folk-portrait img{animation:none}.cine h1 .w{transform:none;opacity:1}.cine-bg{transform:none}#root.pt{animation:none}.folk-notes span{opacity:1;transform:none}}

/* QA fixes after first look */
@media(max-width:900px){.scroll-cue{display:none}}
.cine .badges{padding-right:150px}@media(max-width:767px){.cine .badges{padding-right:0}}
.cine .wrap{padding-bottom:6px}
/* QA flat mode (?__flat=1): static layout for layout audits — no sticky choreography, everything visible */
html.qa-flat .cities{height:auto}html.qa-flat .cities-sticky{position:static;height:auto;overflow:visible}html.qa-flat .hs-track{overflow-x:auto;transform:none!important;padding-bottom:64px}html.qa-flat .city:nth-child(even){margin-top:0}
html.qa-flat .story{height:auto}html.qa-flat .story-sticky{position:static;height:auto;display:grid;gap:12px}html.qa-flat .frame{position:relative;min-height:70svh;opacity:1;transform:none;filter:none;border-radius:18px;overflow:hidden}html.qa-flat .story-bar{display:none}
html.qa-flat [data-reveal]{opacity:1;transform:none}html.qa-flat .folk-notes span{opacity:1;transform:none}html.qa-flat .cine{min-height:720px}
.city-panel .go{white-space:nowrap}
.imm .rail-title h2{font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:-.01em;line-height:1.2}
/* static story layout (phones, reduced motion, QA): frames stretch full width, never shrink to content */
@media(max-width:767px),(prefers-reduced-motion:reduce){.story-sticky{place-items:stretch}.frame{width:100%;min-height:min(70svh,640px)}}
html.qa-flat .story-sticky{place-items:stretch}html.qa-flat .frame{width:100%;min-height:640px}
html.qa-skip .rails-band,html.qa-skip .cine,html.qa-skip .cities{display:none}
.imm .story,.imm .cities,.imm .night-moment,.imm .cine{width:100%}
.imm .story,.imm .cities{display:block}.story-sticky,.cities-sticky{width:100%}
html.qa-night .imm>*:not(.night-moment):not(footer){display:none}html.qa-night .night-moment{min-height:720px}
.night-moment .wrap{width:100%}.imm.page{padding-bottom:0}.imm footer.foot{background:var(--night)!important;margin-top:0}


/* Sizing pass: the cinematic page at the earlier, tighter scale */
.cine{min-height:min(100svh,860px);padding-top:calc(var(--nav-h) + 56px)}
.cine h1{font-size:clamp(2.4rem,5.2vw,4.8rem);max-width:15ch;line-height:1}
.cine .lead{font-size:clamp(.95rem,1.05vw,1.05rem);max-width:54ch}
.cine .wrap{gap:14px}.cine-eyebrow{font-size:.64rem}
.note{font-size:.7rem;padding:6px 10px}
.imm h2{font-size:clamp(1.7rem,3.2vw,2.7rem)}
.imm .lead{font-size:clamp(.98rem,1.1vw,1.08rem)}
.city{width:min(70vw,440px)}.city-name{font-size:clamp(1.8rem,3.4vw,2.8rem)}.cities{height:280vh}
.folk-text .name{font-size:clamp(1.8rem,3.4vw,2.9rem)}.folk-text q{font-size:clamp(1.05rem,1.5vw,1.3rem)}.folk-text .bio{font-size:.98rem}
.folk-item{gap:18px}.folk{gap:clamp(32px,5vw,72px)}
.frame h3{font-size:clamp(1.9rem,4.4vw,4.2rem)}.story{height:360vh}
.night-moment h2{font-size:clamp(1.9rem,4vw,3.8rem)}.night-moment{min-height:70svh}
.imm section.band{padding:clamp(48px,7vw,104px) 0}

/* hero: search on the right, lead + badges on the left; cities tighter */
@media(min-width:960px){.cine-bottom{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:28px}.cine-search{justify-self:end;width:min(100%,640px)}}
.cine .badges{padding-right:0}
.cities{height:auto}.cities-sticky{height:100svh}.hs-track{align-items:center}.city{width:min(62vw,400px)}.city:nth-child(even){margin-top:0}
.cities-head{margin-bottom:14px}.cities-head .lead{display:none}
@media(max-width:767px),(prefers-reduced-motion:reduce){.cities-sticky{height:auto}}
.cine{padding-bottom:clamp(72px,10vh,110px)}.scroll-cue{left:50%;right:auto;transform:translateX(-50%) translate3d(0,calc(var(--sv)*10px),0)}
/* balance pass: compact hero, smaller city and portrait imagery */
.cine{min-height:min(88svh,760px)}.scroll-cue{bottom:12px}
.city{width:min(52vw,340px)}.hs-track{gap:clamp(16px,2.5vw,32px)}.city-name{font-size:clamp(1.6rem,2.8vw,2.3rem)}.city-panel{width:min(90%,300px);padding:12px 14px}.city-panel q{font-size:1rem}
@media(min-width:900px){.folk-item{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}}
.folk-portrait{max-width:460px}.folk-item:nth-child(even) .folk-portrait{margin-left:auto}
/* phone hero: no dead space under the search; compact badges */
@media(max-width:767px){.cine{min-height:auto;padding-top:calc(var(--nav-h) + 36px);padding-bottom:26px}.cine .wrap{gap:12px}.cine h1{font-size:clamp(2.1rem,9vw,2.8rem)}.cine .lead{font-size:.95rem}.cine .badges{gap:6px}.cine .vbadge{font-size:.72rem;padding:5px 8px}.cine-bottom{gap:12px}.cine-search{width:100%}.notes{display:none}}

/* Cities: a plain sideways strip (no pinned section, so no dead space in any browser). Story: fixed-height dark stage. */
.cities{height:auto!important}.cities-sticky{position:static;height:auto!important;overflow:visible;display:block}
.hs-track{overflow-x:auto;transform:none!important;scroll-snap-type:x mandatory;padding-bottom:56px;padding-top:8px;scrollbar-width:none;-webkit-overflow-scrolling:touch;align-items:flex-start}.hs-track::-webkit-scrollbar{display:none}
.city{scroll-snap-align:start}.cities-head .lead{display:block}
.story{height:300vh}.story-sticky{height:100vh;background:var(--night)}.frame{transition:opacity .6s var(--e-inout),transform .8s var(--e-out),filter .6s var(--e-inout)}
@media(max-width:767px),(prefers-reduced-motion:reduce){.story{height:auto}.story-sticky{height:auto;background:transparent}}

/* Meet the folk: compact profile cards (portrait, bio, meets-for, conditions) */
.folk{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:720px){.folk{grid-template-columns:repeat(2,1fr)}}@media(min-width:1100px){.folk{grid-template-columns:repeat(3,1fr)}}
.folk-card{padding:18px;display:flex;flex-direction:column;gap:12px;border-radius:18px}
.folk-top{display:flex;gap:12px;align-items:center}.folk-ava{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none}
.folk-id{display:flex;flex-direction:column;gap:2px;min-width:0}.folk-id b{font:700 1.02rem/1.2 var(--display)}
.folk-bio{font-size:.92rem;line-height:1.5;color:var(--ink);margin:0}
.folk-block{display:flex;flex-direction:column;gap:6px}.folk-k{font:600 .66rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.folk-cond{margin:0;padding-left:16px;font-size:.84rem;line-height:1.5;color:var(--ink-2)}
.folk-card .btn{align-self:flex-start;margin-top:auto}
.folk-id .rcard-pill{width:auto;padding:3px 8px;font-size:.66rem}
.folk-pill{display:inline-block;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.9);border:1px solid var(--hair);font-size:.66rem;color:var(--ink-2)}.folk-id .tiny{line-height:1.5}
.search .btn{border-radius:8px!important}   /* same CTA shape as every other button */
html,body{overflow-x:clip}   /* clip, not hidden: hidden makes body the scroll container in Safari and kills position:sticky */
/* Less scrolling: story as a compact grid, tighter bands, shorter hero and closing */
.story{height:auto!important}.story-sticky{position:static;height:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px;background:transparent;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);width:100%;place-items:stretch}
.frame{position:relative;min-height:300px;opacity:1;transform:none;filter:none;border-radius:16px;overflow:hidden;pointer-events:auto;padding:24px}
.frame h3{font-size:clamp(1.5rem,2.6vw,2.3rem)}.frame .frame-sub{font-size:.92rem}.frame-mini,.story-bar{display:none}
@media(max-width:767px){.story-sticky{grid-template-columns:1fr}.frame{min-height:220px}}
.imm section.band{padding:clamp(40px,5vw,72px) 0}.imm .rails-band{padding-top:20px}.hs-track{padding-bottom:20px}
.cine{min-height:min(80svh,680px)}.night-moment{min-height:auto;padding:clamp(56px,8vw,96px) 0}
.folk{gap:12px}.imm .timeline{margin-top:24px!important}
.rail[data-auto]{scroll-snap-type:none;scroll-behavior:auto}

/* pre-flight (design-taste): one serif family, 44px targets, display ceiling */
.imm2 .tf-note,.imm2 .btn-edit,.imm2 .rail-title,.imm2 .rail-nav button,.imm2 .search .btn{min-height:44px}
.imm2 .rail-nav button{width:44px;height:44px}.imm2 .tf-note{display:inline-flex;align-items:center}
.imm2 .rcard-save{width:44px;height:44px}

/* Cities strip: panel below the photo on every device; auto-gliding track */
.city{width:min(72vw,340px);display:flex;flex-direction:column}.city:nth-child(even){margin-top:0}
.city-img{aspect-ratio:4/5}.city-coords{bottom:14px}
.city-panel{position:static;width:auto;margin:10px 0 0;transform:none;background:rgba(255,255,255,.72)}
.hs-track{align-items:flex-start;padding-bottom:28px;scroll-snap-type:none}
/* hero: one sharp photo layer (the masked duplicate read as a blurred double exposure) */
.imm .cine-fg{display:none}.imm .cine-bg{transform:scale(calc(1.0 + var(--hp,0)*.08))}.imm .cine-layer img{filter:saturate(.95) contrast(1.04)}
.imm .strip{padding:14px 18px;border-radius:14px;box-shadow:0 12px 32px -22px rgba(20,23,26,.35)}.imm .cine{margin-bottom:0}
/* search bar shares the project's shape system: 16px container, 8px button (no capsule) */
.search{border-radius:16px!important}.search .btn{border-radius:8px!important;margin-right:4px}
@media(max-width:719px){.search{border-radius:14px!important}}
/* Cities: compact cards on phones and tablets, in step with the example-profile rail */
@media(max-width:900px){
  .city{width:clamp(190px,52vw,260px)}
  .city-img{aspect-ratio:1/1;border-radius:14px}
  .city-name{font-size:clamp(1.2rem,5.4vw,1.6rem);left:14px;top:12px}
  .city-coords{left:14px;bottom:10px;font-size:.58rem;letter-spacing:.14em}
  .city-panel{padding:10px 12px;border-radius:14px}
  .city-panel b{font-size:.84rem}.city-panel q{font-size:.94rem;margin:4px 0 6px}
  .city-panel .tiny{font-size:.72rem}.city-panel .go{font-size:.8rem;margin-top:8px}
  .hs-track{gap:12px}
  .cities-head .lead{font-size:.95rem}
}
/* Meet the folk: compact card, details disclosure, learn-more action */
.folk-card{padding:16px;gap:10px}
.folk-ava{width:52px;height:52px}
.folk-id b{font-size:.98rem}.folk-id .tiny{line-height:1.45}
.folk-bio{font-size:.9rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.folk-acts{gap:6px}
.folk-more{margin:0}
.folk-more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:36px;font:600 .82rem/1 var(--display);color:var(--teal-deep)}
.folk-more>summary::-webkit-details-marker{display:none}
.folk-more>summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform var(--t-fast) var(--ease)}
.folk-more[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.folk-more>summary:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}
.folk-more .folk-more-shut,.folk-more[open] .folk-more-open{display:none}
.folk-more[open] .folk-more-shut{display:inline}
.folk-more-in{display:flex;flex-direction:column;gap:10px;padding-top:10px;margin-top:6px;border-top:1px solid var(--hair)}
.folk-v{font-size:.86rem;color:var(--text-2)}
.folk-cta{align-self:flex-start;margin-top:2px}
/* iOS Safari runs out of memory with dozens of backdrop-filter layers: below 900px only the navigation
   keeps real glass, everything else gets an opaque surface that reads the same. */
@media(max-width:900px){
  .glass,.glass-strong,.strip,.city-panel,.note,.folk-card,.mmenu,.tabs,.vbadge,.btn-secondary,.btn-ghost{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .glass,.folk-card{background:rgba(255,255,255,.94)}
  .glass-strong{background:var(--panel)}
  .city-panel{background:rgba(255,255,255,.96)}
  .strip{background:var(--panel)}
  .cine .search,.cine .glass{background:var(--panel)!important}
}
/* Hero: the lead and badges need a readable ground over busy photography on small screens. */
@media(max-width:767px){
  .cine .wrap{position:relative}
  .cine .wrap::before{content:"";position:absolute;inset:-16px -12px -8px;z-index:-1;border-radius:16px;background:linear-gradient(180deg,rgba(11,14,20,.62),rgba(11,14,20,.78));backdrop-filter:none}
  .cine .lead{color:var(--ink-inv)}
  .cine .vbadge{background:rgba(0,0,0,.42);border-color:rgba(255,255,255,.28)}
}
.nav.over-dark .bar .btn-ghost{color:var(--ink-inv)}.nav.over-dark .bar .btn-ghost:hover{background:rgba(255,255,255,.14)}
/* The story is a static grid now: the scroll-state classes must not blur or hide a panel
   (.frame.is-past out-specifies .frame, which is why panels read as washed out). */
.story-sticky .frame.is-past,.story-sticky .frame.is-active,html.qa-flat .frame.is-past{opacity:1;transform:none;filter:none;pointer-events:auto}
/* Cities: compact on every width, so more of the world is visible at once */
@media(min-width:901px){
  .city{width:clamp(210px,19vw,270px)}
  .city-img{aspect-ratio:1/1;border-radius:14px}
  .city-name{font-size:clamp(1.3rem,1.9vw,1.8rem);left:14px;top:12px}
  .city-coords{left:14px;bottom:10px;font-size:.6rem}
  .city-panel{padding:12px 14px;border-radius:14px}
  .city-panel b{font-size:.86rem}.city-panel q{font-size:.98rem;margin:5px 0 6px}
  .city-panel .tiny{font-size:.74rem}.city-panel .go{font-size:.82rem;margin-top:8px}
  .hs-track{gap:14px}
}

/* Place-preference picker: fifteen categories, each naming the venues it covers, so a host
   recognises the group without guessing what "civic" means. */
.pl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px; }
.pl-opt { text-align:left; background:var(--panel); border:1px solid var(--hair); border-radius:10px;
  padding:9px 11px; cursor:pointer; font:inherit; color:var(--ink); transition:border-color .15s, background .15s; }
.pl-opt b { display:block; font-size:.86rem; font-weight:650; letter-spacing:-.005em; }
.pl-opt span { display:block; font-size:.74rem; color:var(--muted); margin-top:2px; line-height:1.35; }
.pl-opt:hover { border-color:var(--teal); }
.pl-opt[aria-pressed="true"] { background:var(--teal-soft); border-color:var(--teal); }
.pl-opt[aria-pressed="true"] b { color:var(--teal-deep); }

/* Where-to-meet ideas. Rows, not cards: these are prompts for a search, and boxing each one would
   give them more weight than a suggestion deserves. */
.idea { padding:10px 0; border-top:1px solid var(--hair); }
.idea:first-of-type { border-top:0; padding-top:2px; }
.idea-h { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin-bottom:7px; }
.idea-h b { font-size:.9rem; font-weight:650; }
.idea-h span { font-size:.79rem; color:var(--muted); }
.idea .chips { display:flex; flex-wrap:wrap; gap:6px; }
.idea .chips a.tag { text-decoration:none; transition:border-color .15s, color .15s; }
.idea .chips a.tag:hover { border-color:var(--teal); color:var(--teal-deep); }

/* Availability. On a wide screen a two-column form stretches each control to half the viewport and the
   seven day rows leave the right half empty. Cap the controls at a readable width and let both the
   settings and the days flow into as many columns as fit. */
#availPanel .av-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,224px));
  gap:12px 18px; justify-content:start; }
#availPanel .input, #availPanel .select { min-height:38px; padding:8px 10px; font-size:.9rem; }
#availPanel input[type="time"] { font-variant-numeric:tabular-nums; }

/* Two columns, never more: seven days across five columns reads as a fragment, not a week. */
/* Two columns only where two columns actually fit.
 *
 * This asked for a second column at 960px of *viewport*, while the track it was sizing lives inside the
 * studio's content column, which is a good deal narrower. A day row needs about 392px - the day name,
 * two time fields and the "to" between them - and it was being given 361px. Flex children that cannot
 * shrink overflow instead, so every row ran past its track by more than the 26px gutter and the end-time
 * field printed on top of the next column's checkbox. Auto-fit measures the space it has been given
 * rather than the window, so the week falls to one column when the second will not fit and comes back
 * when it will. */
.av-days { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,432px),1fr));
  gap:0 26px; justify-content:start; max-width:912px; }
.av-day { display:flex; align-items:center; gap:8px; padding:7px 0; border-top:1px solid var(--hair); }
.av-day .check { min-width:112px; flex:none; gap:8px; font-size:.9rem; white-space:nowrap; }
/* Wide enough for a 12-hour locale: 06:00 PM clips at anything narrower. */
/* Sized to the control, not to a number somebody measured once.
 *
 * This was `width:122px`, and the time control Chrome draws wants 138: two digits, a colon, two more,
 * "AM" and a clock button. Sixteen pixels short is not a scrollbar, it is a clip, so every field on the
 * page read "10:00 /" and "06:00 F" - the meridiem cut in half on a screen whose entire job is saying
 * which half of the day you work. 122 also made each row 392px wide inside a 361px column, and flex
 * children that cannot shrink overflow rather than compress: the rows ran past their track by more than
 * the 26px gutter, so the end-time field printed underneath the next column's checkbox.
 *
 * `max-content` asks the control how wide it needs to be, which is the only measurement that survives a
 * different browser, a different locale's 24-hour clock, or a user's larger default font. The narrow
 * screen rule further down still lets them share the line. */
.av-day input[type="time"] { flex:0 0 auto; width:auto; min-width:max-content; }
.av-day .to { flex:none; color:var(--muted); font-size:.8rem; }
.av-day.off .check span, .av-day.off .to { color:var(--muted); }
/* First row of every column sits flush with the top, so the rules read as a table not a stack. */
.av-days .av-day:first-child { border-top:0; }
@media (min-width:960px) { .av-days .av-day:nth-child(-n+2) { border-top:0; } }
/* The shrink above is a safety valve, not the layout: with the track sized to what a row needs, the
   fields keep their 122px and only give it back somewhere narrower still. */

.av-exc { display:flex; flex-wrap:wrap; gap:14px 12px; align-items:center; }
.av-exc #avExDate { max-width:168px; }
.av-exc #avExNote { max-width:210px; }

/* On a phone a 112px day name plus two 122px time fields cannot share one line. Give the name its own
   row and let the two times split what is left. */
@media (max-width:460px) {
  .av-day { flex-wrap:wrap; padding:9px 0; }
  .av-day .check { min-width:100%; margin-bottom:6px; }
  .av-day input[type="time"] { flex:1 1 0; width:auto; min-width:0; }
  .av-exc #avExDate, .av-exc #avExNote { max-width:none; flex:1 1 100%; }
}

/* Disclosure header. Bookable hours are set once and revisited rarely, so the panel opens on request
   and the closed state states what is currently saved. */
.disclose { display:flex; align-items:center; gap:16px; width:100%; padding:0; background:none;
  border:0; font:inherit; color:inherit; text-align:left; cursor:pointer; }
.disclose-t { flex:1; min-width:0; display:block; }
.disclose-t h3 { margin:2px 0 0; }
.disclose-t .small { display:block; margin-top:4px; color:var(--muted); }
.disclose-i { flex:none; color:var(--muted); transition:transform .18s cubic-bezier(.23,1,.32,1); }
.disclose[aria-expanded="true"] .disclose-i { transform:rotate(180deg); }
.disclose:hover .disclose-i { color:var(--teal); }
.disclose:focus-visible { outline:2px solid var(--teal); outline-offset:4px; border-radius:6px; }
.disclose-body { padding-top:4px; }
@media (prefers-reduced-motion:reduce) { .disclose-i { transition:none; } }
/* .stack sets display:flex, which outranks the [hidden] default and leaves the body visible. */
.disclose-body[hidden] { display:none; }

/* Host studio: sections behind a menu rather than one very tall page. */
.studio { display:grid; grid-template-columns:1fr; gap:18px; align-items:start; }
@media (min-width:900px) { .studio { grid-template-columns:186px minmax(0,1fr); gap:28px; } }
.studio-nav { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.studio-nav::-webkit-scrollbar { display:none; }
@media (min-width:900px) {
  /* A sticky menu taller than the window keeps its position while the card behind it scrolls away, which
     left the last items floating outside the panel. Bounding it to the visible height and letting it
     scroll inside keeps every item reachable and inside the card it belongs to. */
  /* The menu carries its own surface. A sticky sidebar taller than the panel beside it keeps its place
     while that panel's bottom edge scrolls past, which left the last items apparently floating outside
     the card. Giving the menu its own background makes it its own object, correct at any height, and
     bounding it to the window keeps every item reachable. */
  .studio-nav { position:sticky; top:84px; flex-direction:column; gap:2px;
    max-height:calc(100vh - 108px); overflow-y:auto; overflow-x:visible; scrollbar-width:thin;
    background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-m); padding:8px; }
  .studio-nav::-webkit-scrollbar { width:6px; }
  .studio-nav::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
}
.studio-link { flex:none; padding:9px 14px; border:0; border-radius:9px; background:none; cursor:pointer;
  font:inherit; font-size:.92rem; font-weight:600; color:var(--muted); text-align:left; white-space:nowrap;
  transition:background .15s, color .15s; }
.studio-link:hover { color:var(--ink); background:var(--teal-soft); }
.studio-link.on { color:var(--teal-deep); background:var(--teal-soft); }
.studio-link:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
.studio-body:focus { outline:none; }

/* Segmented control: public view against the host's own editing view. */
.seg { display:inline-flex; gap:2px; padding:3px; border:1px solid var(--hair); border-radius:11px; background:var(--panel); }
.seg button { border:0; background:none; font:inherit; font-size:.88rem; font-weight:600; color:var(--muted);
  padding:7px 16px; border-radius:8px; cursor:pointer; transition:background .15s, color .15s; }
.seg button.on { background:var(--teal-soft); color:var(--teal-deep); }
.seg button:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }

/* The preview is a real host card, so cap it at the width one occupies in Discover. */
.preview-card { max-width:340px; }
/* The card is a preview, so it does not navigate when clicked. The photo controls are the exception:
   `pointer-events:none` on the whole card was also switching off the carousel, so the caption told you
   to use controls that could not be pressed. On this card the dots are the control and the arrows are
   hidden, which is less furniture over a photograph and the same gesture as a swipe. */
.preview-card .host { pointer-events:none; }
.preview-card .shot-dots { pointer-events:auto; }
/* The card body gets real margins here.
   `.host` is borderless in the discover grid, where the photograph is the card and the text below it
   needs only 2px of side padding because there is no frame to sit inside. The preview renders that same
   component inside a bordered card, so those 2px left the name and the details touching the frame. */
.preview-card .host .body{ padding:14px 16px 16px }
.preview-card .shots { pointer-events:auto; }

/* =====================================================================
   Dark theme. Three states, not two: an explicit choice stamps data-theme
   on <html>, and the default "system" setting stamps nothing, so only
   prefers-color-scheme separates light from dark there. Tokens only; no
   component redefines a colour of its own.
   ===================================================================== */
:root { color-scheme:light; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) { color-scheme:dark;
  --bg:#141412; --bg-deep:#0F0F0E; --panel:#1B1C1A; --panel-2:#242421; --ph-bg:#2B2C28;
  --text:#F2ECE1; --text-2:#ADA69A; --text-3:#8C867B;
  --hair:rgba(255,255,255,.09); --border:rgba(255,255,255,.15);
  --teal:#D9BE93; --teal-deep:#EBD6B0; --teal-soft:#2B2419;
  --error:#E08A72; --error-soft:#2E1A14; --warn:#D9BE93; --warn-soft:#2B2419; --ok:#8FBF9B; --ok-soft:#17251A;
  --glass:rgba(27,28,26,.66); --glass-strong:rgba(27,28,26,.88); --glass-tint:rgba(20,20,18,.58);
  --shadow-1:0 1px 2px rgba(0,0,0,.45); --shadow-2:0 8px 28px -12px rgba(0,0,0,.6); --shadow-3:0 20px 60px -28px rgba(0,0,0,.7);
  --inner:inset 0 1px 0 rgba(255,255,255,.05);
  /* The landing "paper" ground is what body actually paints, so it has to move with the theme too. */
  --paper:#141412; --ink:#F2ECE1; --ink-2:#ADA69A; --mist:rgba(27,28,26,.72); --plate:rgba(27,28,26,.92);
  /* the warm editorial layer, inverted: grounds go warm-dark, the capsule flips to cream on charcoal */
  --ivory:#141412; --ivory-2:#171715; --ivory-3:#1B1C1A;
  --char:#0D0D0C; --char-2:#111211; --char-3:#161716; --char-4:#1F201D;
  --cream:#F2ECE1; --cream-2:rgba(242,236,225,.74); --cream-3:rgba(242,236,225,.54);
  --accent:#D9BE93; --accent-2:#C9A87A; --accent-soft:#2B2419;
  --edge:rgba(255,255,255,.09); --edge-2:rgba(255,255,255,.15); --edge-dark:rgba(255,255,255,.15);
  --btn-fill:#EFE5D4; --btn-fill-h:#FBF4E7; --btn-ink:#161716;
  --gold:#D9BE93; --night:#0D0D0C; --night-2:#1B1C1A; --sky:#E8DCC8;
  --aqua:#3A342B; --lavender:#332E27; --peach:#3A3229; --border-tint:rgba(217,190,147,.24);
} }
:root[data-theme="dark"] { color-scheme:dark;
  --bg:#141412; --bg-deep:#0F0F0E; --panel:#1B1C1A; --panel-2:#242421; --ph-bg:#2B2C28;
  --text:#F2ECE1; --text-2:#ADA69A; --text-3:#8C867B;
  --hair:rgba(255,255,255,.09); --border:rgba(255,255,255,.15);
  --teal:#D9BE93; --teal-deep:#EBD6B0; --teal-soft:#2B2419;
  --error:#E08A72; --error-soft:#2E1A14; --warn:#D9BE93; --warn-soft:#2B2419; --ok:#8FBF9B; --ok-soft:#17251A;
  --glass:rgba(27,28,26,.66); --glass-strong:rgba(27,28,26,.88); --glass-tint:rgba(20,20,18,.58);
  --shadow-1:0 1px 2px rgba(0,0,0,.45); --shadow-2:0 8px 28px -12px rgba(0,0,0,.6); --shadow-3:0 20px 60px -28px rgba(0,0,0,.7);
  --inner:inset 0 1px 0 rgba(255,255,255,.05);
  /* The landing "paper" ground is what body actually paints, so it has to move with the theme too. */
  --paper:#141412; --ink:#F2ECE1; --ink-2:#ADA69A; --mist:rgba(27,28,26,.72); --plate:rgba(27,28,26,.92);
  /* the warm editorial layer, inverted: grounds go warm-dark, the capsule flips to cream on charcoal */
  --ivory:#141412; --ivory-2:#171715; --ivory-3:#1B1C1A;
  --char:#0D0D0C; --char-2:#111211; --char-3:#161716; --char-4:#1F201D;
  --cream:#F2ECE1; --cream-2:rgba(242,236,225,.74); --cream-3:rgba(242,236,225,.54);
  --accent:#D9BE93; --accent-2:#C9A87A; --accent-soft:#2B2419;
  --edge:rgba(255,255,255,.09); --edge-2:rgba(255,255,255,.15); --edge-dark:rgba(255,255,255,.15);
  --btn-fill:#EFE5D4; --btn-fill-h:#FBF4E7; --btn-ink:#161716;
  --gold:#D9BE93; --night:#0D0D0C; --night-2:#1B1C1A; --sky:#E8DCC8;
  --aqua:#3A342B; --lavender:#332E27; --peach:#3A3229; --border-tint:rgba(217,190,147,.24);
}
/* Photographs are the one thing that should not be dimmed with the interface. */
:root[data-theme="dark"] img { opacity:.94; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) img { opacity:.94; } }

.themebtn { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border:0; border-radius:var(--r-pill); background:transparent; color:inherit;
  cursor:pointer; transition:background .15s, color .15s; }
.themebtn:hover { background:var(--teal-soft); color:var(--teal); }
.themebtn:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
.themebtn svg { width:20px; height:20px; }
/* Over a dark hero the bar's own buttons are drawn light; the theme control follows them. */
.nav.over-dark .bar .themebtn { color:#fff; }
.nav.over-dark .bar .themebtn:hover { background:rgba(255,255,255,.12); color:#fff; }

/* The time-of-day tones on the landing page paint their own light grounds; in dark they defer. */
html[data-theme="dark"][data-tone] body { background:var(--paper); }
@media (prefers-color-scheme:dark) { html:not([data-theme="light"])[data-tone] body { background:var(--paper); } }
/* Timezone is detected, not chosen: show what we resolved and keep the override quiet. */
.tz-set { display:flex; align-items:center; gap:10px; min-height:38px; padding:6px 0; flex-wrap:wrap; }
.tz-set b { font-weight:650; font-size:.94rem; }
.tz-set span { color:var(--text-2); font-size:.78rem; }
.tz-set .btn { margin-left:auto; }

/* Guest filters. A search field and a sort always visible; the rest opens on request so the list of
   hosts stays the thing on screen. */
/* The search row, sized like a toolbar rather than a form.
   Every control was a full-height form field with its own border, so a row that asks four small questions
   stood as tall as a card and the panel under it read as a second page. The controls are one height now,
   the labels sit inside the fields, and the panel is tighter: the list of people is the thing worth the
   vertical space, not the machinery for narrowing it. */
.filterbar { display:flex; flex-direction:column; gap:8px; }
.fb-top { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.fb-q { flex:1; min-width:180px; max-width:340px; }
.fb-top .field { display:flex; flex-direction:row; align-items:center; gap:6px; margin:0; }
.fb-top .field label { font-size:.72rem; color:var(--text-3); font-weight:600; white-space:nowrap; }
/* Shaped like the activity chips, because that is the shape this row is already made of: a pill, a
   hairline border, the panel colour behind it. A search field styled as a form input next to a row of
   pills reads as two different products stapled together. */
.fb-top .input, .fb-top .select, .fb-top .btn { min-height:36px; height:36px; padding-top:0; padding-bottom:0;
  font-size:.9rem; font-weight:500; border-radius:var(--r-pill); border:1px solid var(--border);
  background:var(--glass); color:var(--text); box-shadow:none; }
.fb-top .input { padding-left:16px; padding-right:16px; }
.fb-top .select { width:auto; min-width:140px; padding-left:16px; }
.fb-top .input::placeholder { color:var(--text-3); font-weight:400 }
.fb-top .input:focus, .fb-top .select:focus { border-color:var(--text); outline:none }
.fb-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px 14px;
  padding:12px 14px; border:1px solid var(--hair); border-radius:var(--r-m); background:var(--panel); }
.fb-grid .field { margin:0 }
.fb-grid label { font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--text-3); font-weight:600 }
.fb-grid .select, .fb-grid .input { min-height:34px; height:34px; padding-top:0; padding-bottom:0; font-size:.86rem }
.fb-grid .hint { font-size:.72rem; margin-top:3px }
.fb-checks { display:flex; flex-direction:column; gap:4px; }
.fb-checks .check { font-size:.8rem; }
.fb-active { display:flex; align-items:center; gap:8px; padding:2px 2px 0 }
.fb-grid .chip { min-height:30px; padding:0 12px; font-size:.82rem }
.fb-grid .fb-wide { grid-column:1/-1; }
.fb-grid .fb-wide .chips { display:flex; flex-wrap:wrap; gap:6px; }

/* =====================================================================
   Phone layout. The studio was built for a wide screen and read badly on
   a handset: three full-width money tiles taking a whole screen each, a
   nav title wrapping onto two lines, and the section menu running under
   the tab bar. These rules make it behave like an app rather than a
   desktop page squeezed narrow.
   ===================================================================== */
@media (max-width:767px) {
  /* Money tiles: a row of three compact figures, not three cards to scroll past. Scoped to the tiles
     themselves. Applying it to every .grid.g3 squeezed the activity cards and the story quotes into
     three columns on a phone, which wrapped their text to a word a line. */
  .money-tiles { grid-template-columns:repeat(3,1fr); gap:8px; }
  .money-tiles > .card { padding:10px 10px 12px; border-radius:12px; min-width:0; }
  .money-tiles > .card .small { font-size:.7rem; letter-spacing:.01em; }
  .money-tiles > .card > div:last-child { font-size:1.05rem!important; letter-spacing:-.02em; }

  /* The bar already names the section, so the page does not repeat it. */
  .page .eyebrow + h2 { margin-top:0; }
  .nav .title-m { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:38vw; font-size:.98rem; }
  .nav .bar .brand span { max-width:none; }

  /* Status and pause sit under the title instead of fighting it for the same line. */
  .page > .wrap > .between { flex-wrap:wrap; gap:10px; }

  /* Section menu scrolls edge to edge and stays clear of the tab bar. */
  .studio { gap:14px; }
  .studio-nav { margin:0 calc(var(--pad) * -1); padding:2px var(--pad) 6px; }
  .studio-link { padding:8px 13px; font-size:.88rem; }

  /* Filters stack rather than squeezing three controls onto one line. */
  .fb-top { gap:8px; }
  .fb-q { flex:1 1 100%; max-width:none; }
  .fb-top .field { flex:1 1 100%; }
  .fb-top .select { flex:1; min-width:0; }
  .fb-grid { padding:12px; grid-template-columns:1fr; }
}
/* Bottom tab bar: clear the home indicator on a notched phone. */
@media (max-width:1023px) {
  .page.has-tabs { padding-bottom:calc(var(--s-8) + 76px + env(safe-area-inset-bottom)); }
}
/* The brand and the section name were touching on a phone. */
@media (max-width:767px) { .nav .bar .title-m { margin-left:10px; } }

/* Find a member: one row, with the caveat below it rather than beside it. */
.findbar { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; max-width:520px; }
.findbar .input { min-height:40px; }
.findbar .tiny { grid-column:1/-1; color:var(--text-2); margin-top:-2px; }
@media (max-width:767px) {
  /* Discover was mostly gaps on a phone: tighten the run-in before the list. */
  .page .wrap.stack { gap:16px!important; }
  /* The page heading already names the section a line below, and squeezing a second copy between the
     brand and the icons only truncated it. Drop it and give the controls the room. */
  .nav .title-m { display:none; }
  .locate { padding:14px!important; }
  .frow { gap:6px; }
}

/* Profile stat row and photo grid, used wherever one member looks at another. */
.pstats { display:flex; gap:28px; flex-wrap:wrap; }
.pstat { display:flex; flex-direction:column; }
.pstat b { font-size:1.12rem; font-weight:700; letter-spacing:-.02em; }
.pstat span { font-size:.78rem; color:var(--text-2); margin-top:1px; }
.pgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:10px; }
.pgrid img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:12px; background:var(--ph-bg); }

/* Dashboard header: a profile, the way a member expects to see their own. */
.phead { display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"avatar name actions" "avatar stats stats" "avatar bio bio";
  /* Tighter rows, so the three lines read as one block about one person rather than three separate
     things stacked up. The photo grew into the space that gave back: it is the only picture here, and at
     the old size it sat smaller than the text it was meant to anchor. */
  /* The photo needs room to be a photo rather than a bullet against the text: a wide column gap lets the
     name start well clear of the picture, so the two read as a portrait and a caption rather than one
     crowded line. It narrows on smaller screens, where that much space would cost the text its width. */
  gap:7px clamp(24px,5vw,76px); align-items:start; padding:2px 0 10px; }
/* Line the header up with the pane beneath it.
   The dashboard below is a 186px menu and a 28px gutter before the content starts, so the header borrows
   exactly that: the photo sits over the menu column and the name begins on the same vertical line as the
   panel under it. Sharing the measurement rather than guessing one means the two cannot drift apart when
   either is next adjusted. */
@media (min-width:900px) {
  /* Every dashboard — host, Guardian, admin — sits above the same 186px menu, so every header borrows the
     same first column. One rule rather than three keeps the photo and the name in the same place whoever
     is looking at their own page. */
  .phead { grid-template-columns:186px minmax(0,1fr) auto; column-gap:28px; }
}
/* The avatar sits against the middle of the text block rather than its first line, and is given
   a little more presence: it is the only picture in the header. */
/* Centred in its column, not pinned to the left of it. The column is as wide as the menu below, so a
   photo sitting at its left edge read as detached from both the name beside it and the menu under it. */
.phead > .pavatar { grid-area:avatar; align-self:center; justify-self:center; }
/* The admin console has no portrait. A generated face on an operations screen is decoration standing in
   for identity — the person is already named beside it, and the console is about accounts other than
   theirs. With the picture gone the reserved column goes too, so the name starts at the left edge and the
   section menu moves up into the space instead of sitting below an empty gap. */
.phead.no-avatar { grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"name actions" "stats stats" "bio bio"; }
@media (min-width:900px) { .phead.no-avatar { grid-template-columns:minmax(0,1fr) auto; column-gap:28px; } }
.phead .phead-b { display:contents; }
.phead .phead-top { grid-area:name; align-self:center; }
.phead .pstats { grid-area:stats; }
.phead .pbio { grid-area:bio; }

.phead .phead-actions { grid-area:actions; justify-self:end; align-self:center; }
/* The photo is the only picture in this header and it sits in a column as wide as the 186px menu below,
   so at 88px it read as a small circle adrift in a wide gap rather than as the anchor for the name beside
   it. Sized to own its column, and squared off against the menu's left edge instead of floating in the
   middle of it — the guest header already aligned that way, so the two headers now agree.

   `object-position` is the other half: a circular crop of a portrait taken from the centre cuts the top
   of the head and leaves dead space under the chin, because faces sit above the middle of a photograph,
   not on it. Biasing the crop upward frames every portrait the way the good ones already looked. */
.pavatar { flex:none; border-radius:50%; object-fit:cover;
  object-position:50% 30%; background:var(--ph-bg); }
.phead-b { flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; }
.phead-top { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.phead-top h2 { margin:0; }
.pbio { margin:0; font-size:.98rem; color:var(--text-2); max-width:70ch; }
/* Profession under the name on the profile card: a job title, said plainly, apart from the interests.
   It sits inside the flex name row, so flex-basis:100% drops it onto its own line under the name. */
.psub { flex-basis:100%; margin:0; font-size:.95rem; font-weight:600; color:var(--text-2); }
.pbio.muted { font-style:italic; }
.phead-actions { display:flex; gap:6px; flex-wrap:wrap; }
@media (max-width:600px) {
  /* On a phone the actions get their own full-width row rather than the ~270px left over beside the
     avatar, which was forcing the third button onto a line of its own. The body becomes a set of grid
     items so the row can span both columns without moving anything in the markup. */
  .phead { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"avatar name" "avatar bio" "stats stats" "actions actions"; gap:8px 14px; align-items:start; }
  .pavatar { grid-area:avatar; align-self:start; }
  .phead-b { display:contents; }
  .phead-top { grid-area:name; }
  .pstats { grid-area:stats; gap:16px; }
  .pbio { grid-area:bio; }
  /* Wrap rather than squeeze. `nowrap` with `flex:1 1 0` divided the row evenly between however many
     buttons there were and let the labels overflow their boxes: with three of them at phone width,
     "Preview your listing" needed 140px in a 137px box and lost its last letters. `max-content` is the
     floor now, so a button is never narrower than its own words and the row breaks to a second line
     instead of clipping. */
  .phead-actions { grid-area:actions; margin-top:4px; flex-wrap:wrap; }
  .phead-actions .btn { flex:1 1 auto; min-width:max-content; justify-content:center; white-space:nowrap; padding:0 12px; }
  .pstat b { font-size:1rem; }
}
/* Header actions are secondary to the profile itself, so they stay small and sit on one line rather
   than stretching to full width, which made three ordinary links look like three primary calls to action. */
.phead-actions .btn { padding:0 10px; }
.phead-actions .btn svg { width:13px; height:13px; }

/* Suggested hosts: a horizontal rail of small cards, the way a phone expects to browse people. */
/* `align-items:stretch` is the default, but it is written out because it is load-bearing here: it gives
   every card in the row the height of the tallest, which is what lets each price sit on the same line. */
.sugrail { display:flex; align-items:stretch; gap:10px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; scroll-snap-type:x mandatory; }
.sugrail::-webkit-scrollbar { display:none; }
/* The unit sits with the figure but must not compete with it: same line, lighter, a shade smaller. */
.sugrail .btn small { font-size:.78em; font-weight:600; opacity:.7; margin-left:1px; }
.sug { flex:none; width:150px; scroll-snap-align:start; display:flex; flex-direction:column; align-items:center;
  gap:5px; padding:14px 10px; border:1px solid var(--hair); border-radius:14px; background:var(--panel);
  cursor:pointer; text-align:center; transition:border-color .15s; }
.sug:hover, .sug:focus-visible { border-color:var(--teal); outline:none; }
.sug img { width:74px; height:74px; border-radius:50%; object-fit:cover; background:var(--ph-bg); }
.sug b { font-size:.9rem; font-weight:650; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sug span:not(.btn) { font-size:.76rem; color:var(--text-2); }
/* The price is pinned to the foot of the card, not left to follow the text above it. A city name that
   wraps to two lines pushed that card's price a line lower than its neighbours', so a row of eight cards
   had prices at three different heights and read as broken rather than as a row. */
.sug .btn { margin-top:auto; width:100%; justify-content:center; }
.sug span:not(.btn) { margin-bottom:4px }
@media (max-width:767px) { .sugrail { margin:0 calc(var(--pad) * -1); padding:0 var(--pad) 4px; } }
.feedtail { display:flex; flex-direction:column; align-items:center; gap:6px; padding:18px 0 4px; }
.feedtail .tiny { color:var(--text-2); }

/* Section menu. On a wide screen it is a standing column on the left; on a phone that column becomes a
   row of chips that scrolls out of sight, so there it collapses behind one button that names the section
   you are in and opens the rest. */
.studio-menu { position:relative; }
.studio-here { display:none; }
/* The trigger lives in the top bar, so the sheet hangs from the bar rather than from the page.
   Scoped to .nav because .icon-btn sets its own display further down the sheet. */
.nav .studio-burger { display:none; }
@media (max-width:899px) {
  /* The second hamburger is gone: dashboard sections are listed inside the one menu now, so under 900px
     the sidebar simply is not on screen and nothing needs to open it. */
  .studio-nav { display:none; }
  .studio-sheet[data-open] { position:fixed; top:calc(var(--nav-h) + 14px + env(safe-area-inset-top));
    right:var(--pad); left:auto; width:min(330px, calc(100vw - var(--pad) * 2)); z-index:90; padding:10px;
    border:1px solid var(--hair); border-radius:14px; background:var(--panel); box-shadow:var(--shadow-3);
    display:flex; flex-direction:column; gap:10px; max-height:calc(100vh - var(--nav-h) - 90px); overflow:auto; }
  /* Three currency figures in a 330px sheet: keep them on one line each rather than wrapping mid-amount. */
  .sheet-money .grid.g3 { gap:6px; }
  .sheet-money .grid.g3 > .card { padding:8px 8px 9px; }
  .sheet-money .grid.g3 > .card .small { font-size:.66rem; }
  .sheet-money .grid.g3 > .card > div:last-child { font-size:.82rem!important; white-space:nowrap; letter-spacing:-.02em; }
  .studio-nav[data-open] .studio-link { width:100%; padding:10px 12px; }
}

/* Earnings leads with the three totals, so the section answers "how am I doing" before the detail. */
.studio-body .grid.g3 { margin-bottom:16px; }
/* Sign out sits in the menu but is not a section, so it is separated and reads as an exit. */
.studio-link.signout { margin-top:6px; border-top:1px solid var(--hair); border-radius:0 0 9px 9px;
  padding-top:12px; color:var(--error); font-weight:600; }
.studio-link.signout:hover { background:var(--error-soft); color:var(--error); }
/* A verified name is a fact, not a form field. */
.verified-name { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 0 2px; }
.verified-name b { font-size:1.05rem; font-weight:700; }

/* =====================================================================
   Nav bar at large text sizes. Everything in the bar is sized in rem, so
   a member using 150% text pushes the row past the viewport: the boxes
   still "fit" because flex shrinks them, but the text inside spills, and
   the brand ends up printed through the theme button. Nothing here caps
   the text size; it drops what is duplicated elsewhere so what remains
   has room.
   ===================================================================== */
@media (max-width: 560px) {
  .nav .bar .brand span { overflow: hidden; }
  .nav .bar > * { flex: 0 0 auto; min-width: 0; }
  .nav .bar .spacer { flex: 1 1 auto; }
  .nav .bar .brand { min-width: 0; overflow: hidden; }
  .nav .bar .brand span { white-space: nowrap; overflow: hidden; text-overflow: clip; }
  .nav .bar .btn { white-space: nowrap; }
}
/* What the bar drops when it runs out of room is measured, not guessed at a width. A fixed breakpoint
   is wrong the moment the text size, the language or the button labels change: 430pt phones overflowed
   while 400pt ones had 90px to spare. fitNav() in app.js sets these classes from the real geometry. */
.nav .bar.tight .brand span { display: none; }
.nav .bar.tighter .btn-ghost.hide-m { display: none; }


/* Landing menu, resized. The landing stylesheet renders it edge to edge at display type; these rules sit
   after it and put it back under its button, at the size the links actually need. */
html body #mmenu.mmenu {
  inset: auto !important;
  top: calc(var(--nav-h) + env(safe-area-inset-top) + 8px) !important;
  right: 12px !important; left: auto !important; bottom: auto !important;
  width: min(250px, calc(100vw - 24px)) !important;
  height: auto !important;
  max-height: calc(100dvh - var(--nav-h) - 44px);
  overflow: auto;
  padding: 6px !important;
  border-radius: 14px;
  z-index: 81;
}
html body #mmenu.mmenu a {
  /* The landing sheet fades these in with a keyframe that never runs once the panel has been hidden
     and shown again, leaving every link at zero opacity on a transparent plate. */
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  font-family: var(--body);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: 0;
  padding: 10px 12px;
  border-bottom: 0;
  border-radius: 9px;
  color: var(--text);
}
html body #mmenu.mmenu a:hover, html body #mmenu.mmenu a:focus-visible { background: var(--teal-soft); color: var(--teal-deep); }
html body #mmenu.mmenu { background: var(--panel) !important; border: 1px solid var(--hair) !important; box-shadow: var(--shadow-3) !important; backdrop-filter: none !important; }

/* Date and time inputs carry an intrinsic width from the platform's own picker, which ignores width:100%
   and pushes the field past its card on iOS. Reset the appearance and let the box model win. */
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* =====================================================================
   The dashboard sits on the page, not on a canvas.
   ---------------------------------------------------------------------
   This used to paint a second surface under every signed-in page: the
   whole working area on a rounded 22px panel with its own fill, its own
   shadow and up to 34px of padding either side. The intent was to make
   the dashboard read as one thing, and what it actually produced was a
   card containing cards - the pattern stated as forbidden forty lines
   below, applied at the scale of the entire page - with a band of empty
   panel running under the last row before the page ground resumed.

   It also cost the working area 68px of width it needed. The host's week
   is a two-column grid of day rows; between this padding and the measure
   below there was not room for the second column, so the week either
   dropped to one column or the columns collided.

   The page ground carries the page now, and the cards on it are the only
   surfaces. The measure below keeps the alignment the canvas was drawn
   to give.
   ===================================================================== */
.page.app > .wrap {
  padding-left: clamp(16px, 2.4vw, 34px);
  padding-right: clamp(16px, 2.4vw, 34px);
  padding-bottom: clamp(32px, 4vw, 56px);
}
@media (max-width: 767px) {
  .page.app > .wrap { padding-left: var(--pad); padding-right: var(--pad); }
}
/*
 * Cards read against the page ground now, which is the relationship they have everywhere else in the
 * product: --panel on --bg. The pair of rules that used to live here inverted that, because a card on
 * the canvas had to step *down* to be seen. With the canvas gone they would have painted every card the
 * same colour as the page it sits on. The dark theme still needs the firmer edge: #1B1C1A on #141412 is
 * a real step but a small one, and in the dark it is the border doing most of the work of saying card.
 */
:root[data-theme="dark"] .page.app .glass,
:root[data-theme="dark"] .page.app .glass-strong { border-color: var(--edge-2) !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .page.app .glass,
  :root:not([data-theme="light"]) .page.app .glass-strong { background: var(--bg-deep) !important; border-color: var(--edge-2) !important; }
}

/* =====================================================================
   Only the section scrolls. On a wide screen the profile header and the
   section menu stay put and the content pane takes the scroll, so you
   never lose your place in the menu while reading a long section. The
   canvas becomes a fixed-height column and the pane is the one part
   allowed to overflow. Phones keep ordinary page scrolling, where a
   nested scroller fights the browser's own gestures.
   ===================================================================== */
@media (min-width: 900px) {
  .page.app { padding-bottom: 0; }
  .page.app > .wrap {
    height: calc(100dvh - var(--nav-h) - 44px);
    max-height: calc(100dvh - var(--nav-h) - 44px);
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-bottom: clamp(16px, 2vw, 24px);
  }
  .page.app > .wrap > .studio { flex: 1 1 auto; min-height: 0;
    /* The grid aligns its items to the top elsewhere, which leaves the pane at its natural height and
       nothing to scroll. Here the row is the full column and the pane fills it. */
    align-items: stretch; grid-template-rows: minmax(0, 1fr); }
  /* The menu is bounded by the column it is in, not by the window.
     `align-self: start` keeps it at its natural height, which is right — a short menu should not stretch
     into a tall empty card — but it also meant nothing capped it except the `max-height: calc(100vh -
     108px)` written for the sticky layout. That figure is measured from the top of the *window*, while
     this column starts below the header and stops short of the bottom, so the menu's box ran past the
     end of its own column and the last item sat outside the card. `100%` here is the column, which is
     the thing it actually has to fit inside. */
  /* Stretched, so the menu column has a definite height for the nav inside it to be measured against.
     It was `align-self: start`, which leaves it at its natural height — and a percentage height on a
     child of an auto-height box is ignored, which is why every attempt to cap the nav with `100%` did
     nothing. The nav does not fill this: it keeps its own height and is only bounded by it. */
  .page.app > .wrap > .studio > .studio-menu { align-self: stretch; min-height: 0; }
  .page.app > .wrap > .studio > .studio-menu > .studio-sheet { height: 100%; min-height: 0; }
  .page.app .studio-body {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* No gutter. 6px of padding here bought the scrollbar some air and cost the panel its alignment: the
       card inside stopped at 1220 while the header card above it reached 1226, so two stacked blocks
       disagreed by six pixels down the whole right edge. `scrollbar-width: thin` already keeps the bar
       narrow, and on overlay-scrollbar platforms it takes no space at all. */
    scrollbar-width: thin;
  }
  .page.app .studio-nav {
    position: static;                 /* the column no longer scrolls, so nothing to stick to */
    /* Bounded by the column it sits in, stated in the column's own terms.
     *
     * The sticky layout capped this at `calc(100vh - 108px)`, measured from the top of the window. This
     * shell is not that: `.wrap` is a fixed-height flex column starting below the header and stopping
     * short of the bottom, so a box measured from the window ran past the end of it and the last item —
     * Sign out — sat outside the card, and on a shorter screen off it entirely.
     *
     * Capped at `100%` of that column rather than at a figure copied from `.wrap`. Arithmetic in the
     * child has to be kept in step with padding it cannot see — the first attempt was six pixels out —
     * whereas a percentage of a definite parent is right by construction and stays right when the
     * shell's padding changes. The menu above is stretched for exactly that reason. */
    max-height: 100%;
    overflow-y: auto;
  }
}

/* Photo slideshow on a host card. The track scrolls and snaps, so a swipe on a phone and the arrows on
   a desktop are the same gesture underneath. */
.host .portrait .shots {
  display: flex; width: 100%; height: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
}
.host .portrait .shots::-webkit-scrollbar { display: none; }
/* The feed card is a different component from the grid card and never got the rail.
   Its `.shots` had no layout of its own, so the photos stacked, `scrollWidth` matched `clientWidth`,
   and there was nothing to scroll: the arrows did nothing, the dots did nothing, and the auto-advance
   had no distance to travel. Same rail, same snap, on the feed card's media box. */
.rcard-media .shots{ display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  scrollbar-width:none; width:100%; height:100%; }
.rcard-media .shots::-webkit-scrollbar{ display:none }
.rcard-media .shots img{ flex:0 0 100%; width:100%; height:100%; object-fit:cover; scroll-snap-align:center }
.host .portrait .shots img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; }
/* Arrows stay on screen. Hiding them until hover meant nobody knew there was more than one photo, and
   on a touch screen there is no hover at all, so they were invisible on exactly the devices that browse
   most. They sit on a soft plate so they read against a light or dark photograph. */
.shot-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.82); color: #15181B;
  font-size: 1.35rem; line-height: 1; font-weight: 400;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2; padding: 0 0 2px;
  box-shadow: 0 1px 6px rgba(0,0,0,.28);
  transition: background .15s, transform .15s;
}
.shot-nav.prev { left: 10px; } .shot-nav.next { right: 10px; }
.shot-nav:hover { background: #fff; }
.shot-nav:active { transform: translateY(-50%) scale(.94); }
.shot-nav:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* Search-and-select. The chosen values sit above the search box so they read as the answer, and the
   options below as the list you are choosing from. */
.picker .picked { margin-bottom: 8px; }
/* ---------- Choosing from a long list ----------
   Every option laid out at once is not a choice, it is a wall: a hundred languages spilled down the page,
   pushed the rest of the form out of reach, and gave no sense of where the list ended. It behaves like a
   select now — a field you type into, a list that opens under it and scrolls, and a page that does not
   move while you decide. */
.picker-box{position:relative}
.picker-box .input{padding-right:38px}
.picker-caret{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:grid;place-items:center;
  width:30px;height:30px;border:0;background:none;color:var(--text-2);cursor:pointer;border-radius:var(--r-s)}
.picker-caret:hover{color:var(--text)}
.picker.open .picker-caret svg{transform:rotate(180deg)}
.picker-caret svg{transition:transform .16s cubic-bezier(.23,1,.32,1)}

.picker-menu{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 4px);
  max-height:264px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--r-m);
  box-shadow:var(--shadow-2);padding:4px}
.picker-opt{display:flex;gap:10px;align-items:baseline;width:100%;text-align:left;cursor:pointer;
  padding:9px 11px;border:0;border-radius:var(--r-s);background:none;color:var(--text);font:inherit}
.picker-opt:hover,.picker-opt:focus-visible{background:var(--panel-2)}
.picker-opt > span:first-child{font-weight:600}
.picker-note{color:var(--text-2);font-size:.86rem}
.picker-empty,.picker-more{padding:10px 11px;color:var(--text-2);font-size:.86rem}
.picker-more{border-top:1px solid var(--hair)}
.picker .picked{margin-bottom:8px}
.picker .chip.on{padding-right:10px}
.picker .chip .tiny{opacity:.7;margin-left:4px}
@media (prefers-reduced-motion:reduce){.picker-caret svg{transition:none}}

/* Who to look for. Two small identity blocks on a Guardian's assignment: public name and photographs,
   which is what recognising someone at a venue actually needs. */
.who { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 4px; }
.who-one { border: 1px solid var(--hair); border-radius: 12px; padding: 10px 12px; }
.who-one .k { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-2); }
.who-one b { display: block; font-size: 1rem; margin: 2px 0 8px; }
.who-pics { display: flex; gap: 6px; }
.who-pics img { width: 62px; height: 78px; object-fit: cover; border-radius: 8px; background: var(--ph-bg); }

/* ---------- Wallet ----------
   The balance is the only thing on the page a member came to act on, so it is set at display scale and
   everything under it stays at body size. Credits and debits are separated by colour and by a sign,
   never by colour alone. */
.wallet-lead{align-items:flex-start}
.wallet-figure{font-family:var(--display);font-weight:800;font-size:clamp(2rem,7vw,2.9rem);
  letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums;color:var(--text)}
.money-in{color:#155E4C;font-variant-numeric:tabular-nums}
.money-out{color:var(--error);font-variant-numeric:tabular-nums}
.tbl td.money-in,.tbl td.money-out{font-weight:700}

/* ---------- When a host is free ----------
   A row of real dates rather than a month grid: the question on a profile is "when is the next one",
   and a grid makes the reader do the scanning to answer it. */
.nextdays{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity}
.nextday{flex:0 0 auto;scroll-snap-align:start;display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  min-width:108px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-s);
  background:var(--panel);color:var(--text);cursor:pointer;text-align:left;
  transition:border-color .18s cubic-bezier(.23,1,.32,1),transform .18s cubic-bezier(.23,1,.32,1)}
.nextday:hover{border-color:var(--teal)}
.nextday:active{transform:scale(.98)}
.nextday b{font-family:var(--display);font-weight:700;font-size:.95rem}
.nextday span{color:var(--text-2);font-size:.82rem}
.av-pattern summary{cursor:pointer;font-weight:700;font-size:.9rem;padding:4px 0}
.av-pattern summary::marker{color:var(--text-2)}
@media (prefers-reduced-motion:reduce){.nextday{transition:none}.nextday:active{transform:none}}
.chosen{display:flex;flex-direction:column;gap:2px;padding:11px 13px;border-radius:var(--r-s);
  background:var(--panel-2);border-left:3px solid var(--teal)}
.chosen b{font-family:var(--display);font-weight:700;font-size:1rem}
.chosen span{color:var(--text-2)}

/* ---------- Choosing a Guardian ----------
   A guest is choosing a person to stand beside them, so the card leads with a face and the price for
   their session, not an hourly rate with arithmetic left to the reader. */
.procard{display:flex;gap:12px;align-items:center;cursor:pointer;padding:12px 14px;
  border:1px solid var(--border);border-radius:var(--r-m);background:var(--panel);
  transition:border-color .18s cubic-bezier(.23,1,.32,1)}
.procard:hover,.procard:focus-within{border-color:var(--teal)}
.procard:has(input:checked){border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}
.pro-pic{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;background:var(--ph-bg)}
.pro-pic-none{display:grid;place-items:center;color:var(--teal);background:var(--panel-2)}
.pro-pic-none svg{width:22px;height:22px}
.pro-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pro-b b{font-family:var(--display);font-weight:700}
.pro-p{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:1px;text-align:right}
.pro-p b{font-family:var(--display);font-weight:800;font-size:1.05rem;font-variant-numeric:tabular-nums}
.pro-p span{color:var(--text-2)}

/* The same people, shown small while the guest is still filling in the form. */
.prorail{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.promini{flex:0 0 auto;width:84px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.promini img,.promini-none{width:54px;height:54px;border-radius:50%;object-fit:cover;background:var(--ph-bg)}
.promini-none{display:grid;place-items:center;color:var(--teal);background:var(--panel-2)}
.promini-none svg{width:22px;height:22px}
.promini b{font-size:.82rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.promini span{color:var(--text-2);line-height:1.25}
@media (prefers-reduced-motion:reduce){.procard{transition:none}}

/* ---------- A profile you can look at, or not ----------
   Over the booking rather than away from it: opening a Guardian's profile is optional, so closing it must
   put the guest back exactly where they were rather than re-entering a flow. */
#proSheet{position:fixed;inset:0;z-index:120;display:grid;place-items:end center}
.sheet-scrim{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.sheet-card{position:relative;width:min(520px,100%);max-height:88vh;overflow-y:auto;
  background:var(--panel);border-radius:var(--r-l) var(--r-l) 0 0;padding:22px 20px 20px;
  display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-3);
  animation:sheetUp .24s cubic-bezier(.23,1,.32,1)}
@media (min-width:640px){#proSheet{place-items:center}.sheet-card{border-radius:var(--r-l)}}
@keyframes sheetUp{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
.sheet-x{position:absolute;top:10px;right:10px}
.linkish{background:none;border:0;padding:0;color:var(--teal);font-weight:700;cursor:pointer;
  text-align:left;text-decoration:underline;text-underline-offset:2px}
@media (prefers-reduced-motion:reduce){.sheet-card{animation:none}}
.whopro{display:flex;gap:12px;align-items:center;padding:12px;border-radius:var(--r-m);background:var(--panel-2)}
.whopro .pro-b b{font-family:var(--display);font-weight:700;font-size:1rem}

/* ---------- Hosts on a map ----------
   Circles the size of the area they stand for, never pins: a pin is a claim about a doorway, and we do
   not know one. */
.mapcanvas{height:min(64vh,540px);border-radius:var(--r-m);overflow:hidden;border:1px solid var(--border);background:var(--panel-2)}
.mapbtn{align-self:flex-start;display:inline-flex;gap:8px;align-items:center}
.leaflet-container{font:inherit;background:var(--panel-2)}
.leaflet-popup-content{font-size:.9rem;line-height:1.45}

/* ---------- Faces on the map ----------
   A person, not a price: the marker is who you might meet, and the number beside it is how many others
   share that area. The ring keeps a photo legible against any tile underneath it. */
.mappin-wrap{background:none;border:0}
.mappin{position:relative;display:grid;place-items:center;width:46px;height:46px;padding:0;
  border:2px solid var(--panel);border-radius:50%;background:var(--panel);cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.28);transition:transform .16s cubic-bezier(.23,1,.32,1)}
.mappin:hover,.mappin:focus-visible{transform:scale(1.08);z-index:400}
.mappin img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.mappin-none{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;
  background:var(--panel-2);color:var(--teal)}
.mappin-none svg{width:20px;height:20px}
.mappin-n{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 5px;
  display:grid;place-items:center;border-radius:999px;background:var(--teal);color:#fff;
  font-size:.7rem;font-weight:800;line-height:1;border:2px solid var(--panel)}

.maplayout{display:grid;gap:14px}
@media (min-width:860px){.maplayout{grid-template-columns:1fr 320px;align-items:start}}
#mapList{max-height:min(64vh,540px);overflow-y:auto}
.maprow{display:flex;gap:10px;align-items:center;width:100%;text-align:left;cursor:pointer;
  padding:9px 10px;border:1px solid var(--border);border-radius:var(--r-s);background:var(--panel);
  transition:border-color .16s cubic-bezier(.23,1,.32,1)}
.maprow:hover{border-color:var(--teal)}
.maprow img,.maprow-none{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none;background:var(--ph-bg)}
.maprow-none{display:grid;place-items:center;color:var(--teal);background:var(--panel-2)}
.maprow-b{flex:1;min-width:0;display:flex;flex-direction:column}
.maprow-b b{font-family:var(--display);font-weight:700;font-size:.94rem}
.maprow-b .tiny,.maprow-p .tiny{color:var(--text-2)}
.maprow-p{flex:none;font-family:var(--display);font-weight:800;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.mappin,.maprow{transition:none}.mappin:hover{transform:none}}

/* A bright basemap under a dark interface reads as a hole in the page. Filtering the tiles keeps the
   map legible without shipping a second tile set, and leaves labels readable rather than muddy. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .leaflet-tile{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.92) saturate(.7)}
  :root:not([data-theme="light"]) .leaflet-container{background:#1a1d1c}
}
:root[data-theme="dark"] .leaflet-tile{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.92) saturate(.7)}
:root[data-theme="dark"] .leaflet-container{background:#1a1d1c}
.gbadge{display:inline-flex;gap:6px;align-items:center;margin-top:6px;padding:3px 9px;border-radius:999px;
  background:var(--ok-soft);color:#155E4C;font-size:.76rem;font-weight:700}
.gbadge svg{width:13px;height:13px}
.gnotice{border-left:3px solid var(--teal)}
.gnotice-i{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--teal);color:#fff}
.gnotice-i svg{width:17px;height:17px}
.gnotice b{font-family:var(--display);font-weight:700}
.photo-note{display:flex;flex-direction:column;gap:10px;align-items:flex-start;margin-top:10px}

/* ---------- A host's photos on their profile ----------
   All of them, swipeable, at the size the page already gave the gallery. Scroll-snap does the gesture
   natively so a phone behaves the way a phone should and no script runs until an arrow is pressed. */
.gallery-rail{position:relative;border-radius:var(--r-l);overflow:hidden;background:var(--ph-bg)}
.gallery-rail .shots{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  aspect-ratio:3/2;-webkit-overflow-scrolling:touch}
.gallery-rail .shots::-webkit-scrollbar{display:none}
.gallery-rail .shots img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:center}
.gallery-rail .shot-nav{opacity:1}
.gallery.one .main{width:100%;border-radius:var(--r-l)}
.shot-count{position:absolute;right:12px;top:12px;z-index:3;padding:4px 10px;border-radius:999px;
  background:rgba(20,20,20,.62);color:#fff;font-size:.75rem;font-weight:700;backdrop-filter:blur(6px)}
@media (max-width:640px){.gallery-rail .shots{aspect-ratio:4/5}}
/* The card was clickable everywhere and looked clickable nowhere: the old "Request time" was a span
   dressed as a button. A real control makes the action obvious and gives keyboard users a target. */
.host .foot .card-cta{flex:none}




/* ---------- Sections whose cards slide on their own ----------
   No pinning: the section is its own height and the row glides continuously, pausing under a pointer.
   The earlier pinned version bought the sideways motion with thousands of pixels of page, which is a bad
   trade for a row of cards. */
/* A rail ends on a hard row of card edges, so the next section needs more air than a text block would to
   read as a new thought rather than a continuation. Declared !important because .band sets its padding
   that way, and without matching it these sections sat flush against each other. */
.hsec.band{padding-block:clamp(52px,7vw,104px)!important}
.hsec-head{max-width:var(--maxw);margin-bottom:clamp(16px,2vw,24px)}
.hsec-note{max-width:min(80ch,var(--maxw));margin-top:14px;font-size:.86rem;color:var(--text-2)}
.hsec-rail{align-items:stretch}
.hsec-rail > *{flex:0 0 clamp(220px,21vw,278px)}
.hsec-rail .card-activity{height:100%}
/* The example-profile cards on the rail: a fixed width so the track has a real distance to travel, and
   their own height rather than the grid's stretched one. */
.hsec .folk-card{flex:0 0 clamp(280px,28vw,360px);height:auto}



/* Example-profile cards, same language as the activity ones: a portrait, a name, and the one number that
   matters. The old card carried a bio, tag chips, a details disclosure and a button — six of those in a
   row was a wall of controls, and none of it is the decision a guest is making at this point. */
.pcard{display:flex;flex-direction:column;gap:7px;text-decoration:none;color:var(--text)}
.pcard-img{position:relative;display:block;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:var(--ph-bg)}
.pcard-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.23,1,.32,1)}
.pcard:hover .pcard-img img{transform:scale(1.04)}
.pcard-tag{position:absolute;left:10px;top:10px;padding:4px 9px;border-radius:999px;
  background:rgba(255,255,255,.92);color:var(--text-2);font-size:.68rem;font-weight:700}
.pcard-t{font-family:var(--display);font-weight:700;font-size:1rem;line-height:1.25}
.pcard-m{color:var(--text-2);font-size:.86rem;line-height:1.3}
.pcard-m b{color:var(--text);font-weight:700}
.hsec .pcard{flex:0 0 clamp(220px,22vw,280px)}
@media (prefers-reduced-motion:reduce){.pcard-img img{transition:none}.pcard:hover .pcard-img img{transform:none}}

/* ---------- Choosing a day and a time ----------
   Two months side by side on a wide screen, because one month hid the fact that a host who looks fully
   booked this week is open the next. A day you can book is set in full ink; one you cannot is struck
   through rather than merely faded, so it reads as unavailable and not as low contrast. */
/* The calendar sits in a narrow booking rail, so what decides whether two months fit is the width of the
   calendar, not the width of the window. Asking the viewport put two months into a ~260px column on any
   wide screen and the days were pressed together with the selected circle spilling over its neighbours. */
.cal{display:flex;flex-direction:column;gap:14px;position:relative;container-type:inline-size}
.cal-lead{display:flex;flex-direction:column;gap:2px}
.cal-lead b{font-family:var(--display);font-weight:700;font-size:1.05rem}
.cal-lead span{color:var(--text-2);font-size:.88rem}
.cal-bar{position:absolute;top:0;right:0;display:flex;gap:4px}
.cal-arrow{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;
  background:none;color:var(--text);font-size:1.25rem;line-height:1;cursor:pointer}
.cal-arrow:hover:not(:disabled){background:var(--panel-2)}
.cal-arrow:disabled{opacity:.3;cursor:not-allowed}
.cal-months{display:grid;gap:26px;grid-template-columns:1fr}
@container (min-width:680px){.cal-months{grid-template-columns:1fr 1fr;gap:30px}}
.cal-mh{text-align:center;font-weight:700;font-size:.95rem;margin-bottom:10px}
/* `align-items:center` matters: a grid row stretches its children by default, so the day button grew to
   the row's height and `aspect-ratio:1` could never make it square — the selected day rendered as a tall
   oval rather than a circle. */
/* The month is capped, not the day. Capping the day left it a fixed 38px circle marooned in a wide
   column, so a single month across the whole rail read as scattered dots; capping the grid keeps the
   seven columns in proportion to each other and centres the month in whatever space it is given. */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;align-items:center;
  max-width:336px;margin-inline:auto;width:100%}
.cal-dow{display:grid;place-items:center;height:26px;font-size:.74rem;color:var(--text-2)}
/* `min-height:38px` from the base rule above is inherited into this one and is the whole bug: with two
   months side by side a column is narrower than 38px, so the floor set the height, `aspect-ratio:1` could
   not shrink it back, and the selected day drew as a tall oval. The circle is sized by the column and
   capped, so it stays a circle at every width instead of being stretched by a floor it cannot meet. */
.cal .day{aspect-ratio:1;align-self:center;justify-self:center;width:100%;min-height:0;
  display:grid;place-items:center;border:0;border-radius:50%;background:none;
  font:inherit;font-weight:600;font-size:.9rem;color:var(--text);cursor:pointer;
  transition:background .14s ease,color .14s ease}
.cal .day:hover:not(.off):not(.sel){background:var(--panel-2);outline:1px solid var(--border)}
.cal .day.off{color:var(--text-3);text-decoration:line-through;cursor:not-allowed}
.cal .day.sel{background:var(--text);color:var(--bg)}
.cal .day:focus-visible{outline:3px solid var(--sky);outline-offset:1px}
.cal-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding-top:10px;border-top:1px solid var(--hair)}
.cal-times{display:flex;flex-wrap:wrap;gap:7px;max-height:172px;overflow-y:auto}
.timechip{padding:8px 13px;border:1px solid var(--border);border-radius:999px;background:var(--panel);
  font:inherit;font-size:.87rem;font-weight:600;color:var(--text);cursor:pointer}
.timechip:hover{border-color:var(--text)}
.timechip.on{background:var(--text);color:var(--bg);border-color:var(--text)}
@media (prefers-reduced-motion:reduce){.cal .day{transition:none}}

/* Small buttons, compact where there is a pointer.
   .btn sets a 44px minimum, which is the touch target a finger needs and must not be taken away on a
   phone. With a mouse that floor is not doing anything for accuracy and just makes every secondary
   control look heavier than the text beside it, so the compact size applies only there. */
@media (hover:hover) and (pointer:fine) {
  .btn.btn-sm{min-height:30px;padding:0 11px;font-size:.79rem;border-radius:8px}
  .btn.btn-sm svg{width:14px;height:14px}
}
/* A card half off the edge should read as "there is more", so the ends fade rather than cutting a face
   in half against a hard border. */
.rail{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 20px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 20px),transparent)}



/* The shared profile card on a pinned rail: a fixed width so the strip has a distance to travel, at the
   larger size the section had before — a person on a pinned stage can carry more room than the same card
   does in a dense rail further down the page. */
.hsec .rcard{flex:0 0 clamp(220px,21vw,278px)}

/* ---------- How money moves ----------
   Four plain rows rather than a wall of card logos. A guest is asking "will my card work" and a host is
   asking "can I be paid where I live"; both are answered better by a sentence than by a badge. */
.pay-grid{display:grid;gap:clamp(18px,2.4vw,30px);grid-template-columns:1fr}
@media (min-width:760px){.pay-grid{grid-template-columns:1fr 1fr}}
.pay-row{display:flex;gap:14px;align-items:flex-start}
.pay-i{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:var(--teal-soft);color:var(--teal)}
.pay-i svg{width:19px;height:19px}
.pay-row b{font-family:var(--display);font-weight:700;font-size:1rem;display:block;margin-bottom:4px}
.pay-row p{margin:0}
.pay-row .tiny{display:block;margin-top:6px;color:var(--text-3)}

/* Finance and connections, both dense operator screens: one row of controls, wrapping where it must. */
.fin-grid{gap:12px}
.fin-tile{display:flex;flex-direction:column;gap:2px}
.fin-tile b{font-family:var(--display);font-weight:800;font-size:1.5rem;font-variant-numeric:tabular-nums}
.fin-tile.good b{color:#155E4C}.fin-tile.cost b{color:var(--warn)}.fin-tile.bad b{color:var(--error)}
.fin-form,.conn-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fin-form .input,.fin-form .select,.conn-form .input,.conn-form .select{flex:1 1 150px;min-width:0}
.conn{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;
  padding:10px 0;border-bottom:1px solid var(--hair)}
.conn:last-child{border-bottom:0}
.conn-b{display:flex;flex-direction:column;gap:3px;min-width:min(100%,320px)}
.conn-b b{font-family:var(--display);font-weight:700}
.conn-a{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.conn-a .input{max-width:210px}

/* The account-limited bar. Above the mobile tab bar, below every modal, and never wider than the reading
   column so a long reason does not stretch into an unreadable line. */
.restrict-bar{position:fixed;z-index:70;left:12px;right:12px;bottom:calc(74px + env(safe-area-inset-bottom));
  max-width:640px;margin-inline:auto;display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  padding:14px 16px;border-radius:var(--r-m);border-left:3px solid var(--warn,#B26B00)}
@media(min-width:1024px){.restrict-bar{bottom:16px;left:auto;right:20px;margin-inline:0}}
@media(max-width:520px){.restrict-bar{flex-direction:column;align-items:stretch}}

/* Tap your picture to change it. The avatar is the control people look for, so it gets the affordance:
   a hover lift, a focus ring, and a small badge that says it does something. */
.pavatar-btn{grid-area:avatar;justify-self:center;align-self:center;position:relative;padding:0;border:0;
  background:none;cursor:pointer;border-radius:50%;line-height:0}
.pavatar-btn .pavatar{display:block;transition:filter var(--t-base,.18s) var(--ease,ease)}
.pavatar-btn:hover .pavatar{filter:brightness(.9)}
.pavatar-btn:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.pavatar-edit{position:absolute;right:4px;bottom:4px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:var(--teal);color:#fff;box-shadow:var(--shadow-1)}
.pavatar-edit svg{width:17px;height:17px}
.phead.no-avatar .pavatar-btn{display:none}

/* The overlay itself. It was only ever written inline on the policy gate, so a second dialog had nothing
   to inherit and rendered unpositioned at the foot of the page. Defined once now, and the policy gate's
   own inline styles still win where they are set. */
/* A dialog that is taller than the screen has to scroll, or it is a lock-out.
   The policy gate covers the whole page and its accept button sits at the bottom of a long dialog; on a
   laptop-height window that button fell below the fold with nothing to scroll, so the page was
   unclickable and there was no way forward. The overlay scrolls, the panel is capped to the viewport and
   scrolls inside itself, and both are pinned above the bottom tab bar rather than under it. */
.modal-bg{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:20px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:rgba(23,40,37,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.modal-bg > *{max-height:calc(100dvh - 40px);overflow-y:auto;-webkit-overflow-scrolling:touch}
@supports not (height: 100dvh){ .modal-bg > *{max-height:calc(100vh - 40px)} }
.av-sheet{max-width:460px;width:100%}
.av-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.av-opt{padding:0;border:2px solid transparent;border-radius:14px;background:none;cursor:pointer;
  overflow:hidden;display:flex;flex-direction:column;gap:0}
.av-opt img{width:100%;aspect-ratio:1;object-fit:cover;display:block;border-radius:12px}
.av-opt span{font-size:.72rem;font-weight:600;padding:5px 0;color:var(--text-2)}
.av-opt.on{border-color:var(--teal)}
.av-opt.on span{color:var(--teal-deep)}
.av-opt:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* The photo tiles in the grid below, so "Use this" has somewhere to sit. */
.ph-tile{position:relative}
.ph-tile img{width:88px;height:110px;object-fit:cover;border-radius:12px;display:block}
.ph-badge{position:absolute;left:6px;bottom:6px;font-size:.62rem;font-weight:700;padding:3px 7px;
  border-radius:999px;background:var(--teal);color:#fff}
.ph-pick{position:absolute;left:6px;bottom:6px;min-height:26px;padding:0 8px;font-size:.72rem}

/* ---------- Discover on a phone ----------
   Measured before this: the first host photo sat 999px down a 844px viewport, so the opening screen was
   a greeting, a search field, a location card and two rows of chips, and you had to scroll past all of it
   to see a single person. On a screen this size the page has one job. Nothing here is removed — the
   controls are all still there, just sized for a phone instead of a desktop — and the first face now
   lands above the fold. */
@media (max-width: 640px) {
  .page.browse .wrap.stack { gap: 14px !important; }
  .page.browse .eyebrow { display: none; }
  .page.browse h2 { font-size: 1.5rem; line-height: 1.15; }
  /* The subtitle repeats what the city switcher beside it already says. */
  .page.browse > .wrap > .between:first-child p.small { display: none; }
  /* Finding one person by their exact public name is a deliberate, rare act; it does not deserve the
     top of the screen. It keeps its full width and its label, and loses only the explanatory line. */
  .page.browse .findbar .tiny { display: none; }
  .page.browse .findbar { gap: 8px; }
  /* The location prompt becomes one line instead of a card with a paragraph in it. */
  .page.browse #locBanner { padding: 10px 12px; gap: 10px; }
  .page.browse #locBanner p.small { display: none; }
  .page.browse #locBanner b { font-size: .92rem; }

  /* The two control blocks were 302px between them because each stacked its rows vertically. Both are
     one horizontal strip that scrolls sideways instead, which is how a phone shows a set of filters and
     costs a third of the height. Nothing is dropped: everything still reachable, just by swiping. */
  /* One strip, not two labelled blocks. "Social" and "Professional" each cost a line of their own above
     their chips; on a phone the icons on the chips already say which is which, and the two sets read fine
     end to end. The labels stay in the accessible name of each group for anyone not seeing them. */
  .page.browse .filters { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch; padding-bottom: 2px; scrollbar-width: none; }
  .page.browse .filters::-webkit-scrollbar { display: none; }
  .page.browse .filters > .frow { flex: none; display: flex; gap: 8px; align-items: center; }
  .page.browse .filters .frow-label { display: none; }
  .page.browse .filters .chips.scroll { display: flex; gap: 8px; overflow: visible; }
  .page.browse .filters .chip { flex: none; scroll-snap-align: start; }
  /* The Filters button and the sort control wrapped onto three lines because the select is 170px wide
     with a label beside it. One nowrap row that scrolls instead, and the select sizes to its content. */
  .page.browse .filterbar { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px;
    overflow-x: auto; scrollbar-width: none; }
  .page.browse .filterbar::-webkit-scrollbar { display: none; }
  .page.browse .fb-top { flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .page.browse .fb-top::-webkit-scrollbar { display: none; }
  .page.browse .fb-top > * { flex: none; }
  .page.browse .fb-top .select { min-width: 0; width: auto; }
  .page.browse .fb-top .field label { white-space: nowrap; }

  /* Edge to edge. A photo inset 16px on each side reads as a document; the same photo touching both
     edges reads as the thing itself, which is the whole difference in feel on a phone. */
  .page.browse .hosts { gap: 22px; margin-inline: calc(-1 * var(--pad)); }
  .page.browse .hosts > article { border-radius: 0; }
  .page.browse .hosts > article > :first-child { border-radius: 0; }
}

/* The listing an operator is reviewing, over the queue rather than instead of it. */
.alm{max-width:620px;width:100%}

/* =====================================================================
   WARM EDITORIAL LAYER (2026-09-07)
   European hospitality x premium marketplace. Ivory grounds, warm charcoal
   darks, champagne accents, photography carrying the colour. This layer is
   presentation only: every route, view, handler, id and class above is
   untouched. It sits last so it settles the cascade against the older
   "theme v3" and "immersive" passes without reordering either of them.
   ===================================================================== */

/* ---------- 1. voice: serif for display, sans for every piece of interface ---------- */
h1, h2 { font-family:var(--serif); font-weight:400; letter-spacing:-.01em; text-wrap:balance; }
h1 { font-size:clamp(2rem,3.2vw,2.9rem); line-height:1.06; }
h2 { font-size:clamp(1.5rem,2.4vw,2.1rem); line-height:1.1; }
h3, h4 { font-family:var(--display); letter-spacing:-.005em; }
h1 em, h2 em, .frame h3 em, blockquote em { font-style:italic; color:var(--accent); }

/* The eyebrow is part of the identity: tiny, uppercase, generously tracked, never coloured loudly. */
.eyebrow { font-family:var(--display); font-size:.68rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text-3); margin-bottom:var(--s-3); }
.eyebrow::before { display:none; }

.lead { color:var(--text-2); line-height:1.62; }
/* The line under a host's name: age, city, distance, languages. Three quarters of the lead size it was
   sharing, because it is a row of facts rather than an opening sentence, and at lead size it competed
   with the name above it and ran to four lines on a phone. */
.hmeta { font-size:.765rem !important; line-height:1.5 }
@media (min-width:768px){ .hmeta { font-size:.9rem !important } }
p { line-height:1.62; }

/* The wordmark carries the serif so the brand reads the same as the headlines. */
.brand { font-family:var(--serif); font-weight:400; font-size:1.4rem; letter-spacing:0; color:var(--text); }
.nav .brand { color:var(--text); }
.nav .title-m { font-family:var(--serif); font-weight:400; font-size:1.15rem; }

/* ---------- 2. actions: charcoal capsule on ivory, cream capsule on photography ---------- */
.btn { border-radius:var(--r-pill) !important; font-family:var(--display); font-weight:600;
  font-size:.9rem; letter-spacing:.005em; }
.btn::after { background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.16) 50%,transparent 65%); }
.btn-primary { background:var(--btn-fill) !important; color:var(--btn-ink) !important;
  border-color:transparent; box-shadow:none !important; }
.btn-primary:hover { background:var(--btn-fill-h) !important; box-shadow:var(--shadow-1) !important; }
.btn-secondary { background:transparent !important; color:var(--text) !important;
  border:1px solid var(--edge-2) !important; }
.btn-secondary:hover { background:var(--panel-2) !important; }
.btn-ghost { color:var(--text-2); text-decoration:none; }
.btn-ghost:hover { color:var(--text); background:var(--accent-soft); }
.btn:hover { transform:translateY(-1px); }

/* Over photography the capsule inverts, which is the only place cream-on-dark is a button. */
.cine .btn-primary, .night-moment .btn-primary, .story .btn-primary,
.safety-band .btn-primary, .host-banner .btn-primary,
.cine .search .btn, .cine .search .btn-primary {
  background:var(--cream) !important; color:#161716 !important; }
.cine .btn-primary:hover, .night-moment .btn-primary:hover, .story .btn-primary:hover,
.safety-band .btn-primary:hover, .host-banner .btn-primary:hover, .cine .search .btn:hover {
  background:#FFFBF3 !important; }
.night-moment .btn-secondary, .story .btn-secondary, .safety-band .btn-secondary, .host-banner .btn-secondary {
  background:transparent !important; color:var(--cream) !important; border-color:var(--edge-dark) !important; }
.night-moment .btn-secondary:hover, .story .btn-secondary:hover,
.safety-band .btn-secondary:hover, .host-banner .btn-secondary:hover { background:rgba(255,255,255,.09) !important; }

/* Focus stays visible against both grounds. */
:focus-visible { outline:2px solid var(--sky); outline-offset:3px; }
.cine :focus-visible, .night-moment :focus-visible, .story-sticky :focus-visible,
.safety-band :focus-visible, .host-banner :focus-visible, footer.foot :focus-visible {
  outline-color:var(--cream); }

/* ---------- 3. surfaces: hairline OR shadow, never both on one element ---------- */
.glass, .glass-strong, .glass-tint { background:var(--panel) !important; border:1px solid var(--edge) !important;
  box-shadow:none !important; border-radius:var(--r-l); }
.card { border-radius:var(--r-l); }
.chip { border-color:var(--edge-2); }
.chip[aria-pressed="true"], .chip.on { background:var(--char-3); color:var(--cream); border-color:transparent; }
.tag { border-color:var(--edge); background:var(--panel); }
.input, .select, .textarea { border-radius:var(--r-s); border-color:var(--edge-2); background:var(--panel); }
.input:focus, .select:focus, .textarea:focus { border-color:var(--accent); }
.notice { border-radius:var(--r-m); border-color:var(--edge); }
.skel { background:rgba(60,45,30,.06); }
.progress .p { background:rgba(60,45,30,.10); }
.progress .p i { background:var(--char-3); }
.toast { background:rgba(22,23,22,.94); color:var(--cream); }
.modal[open] { background:rgba(22,23,22,.34); }
.modal-bg { background:rgba(22,23,22,.48); }
.story-ava { background:var(--edge-2); }
.story.ring .story-ava { background:linear-gradient(45deg,var(--accent),var(--accent-2)); }
.strip { background:var(--panel-2); border:1px solid var(--edge) !important; box-shadow:none !important; }
.empty .ico { background:var(--accent-soft); }
.empty .ico svg { color:var(--accent); }

/* ---------- 4. the shared section head: eyebrow, two-line serif heading, quiet CTA on the right ---------- */
.sec-head { display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px 32px; flex-wrap:wrap; margin-bottom:clamp(22px,3vw,40px); }
.sec-head > div:first-child { flex:1 1 min(100%,54ch); min-width:0; }
.sec-head h2 { max-width:20ch; }
.sec-head .lead { margin-top:10px; max-width:58ch; }
.sec-cta { display:inline-flex; align-items:center; gap:9px; min-height:44px; flex:none;
  font-family:var(--display); font-size:.85rem; font-weight:600; color:var(--text);
  background:none; border:0; border-bottom:1px solid var(--edge-2); padding:0 0 3px; cursor:pointer;
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.sec-cta:hover { color:var(--accent); border-bottom-color:var(--accent); text-decoration:none; }
.sec-cta svg { width:15px; height:15px; }
@media (max-width:640px) { .sec-head { margin-bottom:20px; } .sec-head h2 { max-width:none; } }

/* ---------- 5. rhythm: the bands breathe, and the grounds alternate rather than repeat ---------- */
.imm section.band { padding-block:clamp(54px,7vw,112px) !important; padding-inline:var(--pad) !important; }
.imm .rails-band { padding-top:clamp(28px,3.4vw,52px) !important; }
.imm .band + .band { padding-top:clamp(54px,7vw,112px) !important; }
.band-ivory { background:var(--ivory-3); }
.band-ivory + .band-ivory { padding-top:clamp(20px,3vw,52px) !important; }

/* ---------- 6. the hero: golden-hour photograph, weight on the left, cream serif over it ---------- */
.cine { background:var(--char); }
.cine-wash { background:
  linear-gradient(90deg, rgba(17,18,17,.88) 0%, rgba(17,18,17,.66) 30%, rgba(17,18,17,.22) 62%, rgba(17,18,17,.40) 100%),
  linear-gradient(180deg, rgba(17,18,17,.42) 0%, rgba(17,18,17,.06) 26%, rgba(17,18,17,.30) 62%, rgba(17,18,17,.74) 100%); }
.cine-grain { opacity:.09; }
.cine .wrap { gap:clamp(14px,2vh,22px); }
.cine-eyebrow { font-family:var(--display); font-size:.66rem; font-weight:600; letter-spacing:.26em;
  text-transform:uppercase; color:var(--cream-3); }
.cine h1 { font-size:clamp(2.5rem,5.6vw,5rem); line-height:.98; letter-spacing:-.015em; max-width:14ch; color:var(--cream); }
.cine h1 .w:nth-child(n+7) { color:var(--accent-2); }
.cine .lead { color:var(--cream-2); max-width:52ch; font-size:clamp(.95rem,1.05vw,1.06rem); }

/* Trust row: icon and label, a hairline above it, no pills and no colour. */
.cine .badges { gap:10px 26px; padding-top:14px; border-top:1px solid rgba(255,255,255,.14); }
.cine .vbadge { background:transparent !important; border:0 !important; padding:0; color:var(--cream-2);
  font-family:var(--display); font-size:.78rem; font-weight:500; letter-spacing:.01em; gap:8px; backdrop-filter:none !important; }
.cine .vbadge svg { width:16px; height:16px; color:var(--accent-2); opacity:.9; }

/* Live market count: an outline pill, not a filled badge. */
.cine .mkt-badge { background:transparent; border:1px solid rgba(255,255,255,.24); color:var(--cream-2);
  font-family:var(--display); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; padding:6px 13px; }
.cine .mkt-badge:hover { background:rgba(255,255,255,.10); color:var(--cream); }
.mkt-dot { background:var(--accent-2); }

/* The search capsule is dark translucent glass with one cream pill inside it. */
.cine .search { background:rgba(17,18,17,.44) !important; border:1px solid rgba(255,255,255,.18) !important;
  border-radius:var(--r-pill) !important; box-shadow:0 26px 64px -34px rgba(0,0,0,.75) !important;
  backdrop-filter:blur(18px) saturate(1.1); -webkit-backdrop-filter:blur(18px) saturate(1.1); padding:5px !important; }
.cine .search .sf { background:transparent !important; border:0 !important; }
.cine .search .sf + .sf { border-left:1px solid rgba(255,255,255,.16) !important; }
.cine .search .sf label { color:rgba(244,237,225,.58); letter-spacing:.14em; text-transform:uppercase; font-weight:600; }
.cine .search .sf select, .cine .search .combo .input { color:var(--cream); }
.cine .search .sf select option { color:var(--text); background:var(--panel); }
.cine .search .combo .input::placeholder { color:rgba(244,237,225,.42); }
.cine .search .combo .input { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23F4EDE1' stroke-width='2' stroke-linecap='round' opacity='.6'%3E%3Ccircle cx='8' cy='8' r='5.5'/%3E%3Cpath d='m15 15-3-3'/%3E%3C/svg%3E"); }
.cine .search .btn { border-radius:var(--r-pill) !important; margin-right:2px; }
/* iOS runs out of memory stacking backdrop filters, so below 900px the capsule is opaque charcoal
   instead of glass. Same object, same contrast, none of the cost. */
@media (max-width:900px) {
  .cine .search { background:rgba(17,18,17,.92) !important; backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important; border-radius:var(--r-l) !important; }
  .cine .search .sf { background:transparent !important; }
  .cine .search .sf + .sf { border-left:0 !important; border-top:1px solid rgba(255,255,255,.14) !important; }
}
/* The dropdown paints its own paper and must keep its own ink (see the combo-list note above). */
.cine .combo-list { background:var(--panel) !important; color:var(--text) !important; }
.cine .combo-list li b { color:var(--text); }
.cine .combo-list li .small { color:var(--text-2); }

/* Floating cultural notes, in the serif, understated. */
.note { background:rgba(17,18,17,.34) !important; border:1px solid rgba(255,255,255,.18) !important;
  color:var(--cream-2); font-family:var(--serif); font-style:italic; font-size:.86rem; font-weight:400;
  letter-spacing:0; padding:7px 14px; }
.scroll-cue { color:rgba(244,237,225,.6); letter-spacing:.22em; }
.scroll-cue i { background:linear-gradient(rgba(244,237,225,.8),transparent); }
.cine .periph, .night-moment .periph { color:rgba(244,237,225,.34); letter-spacing:.26em; }

/* The nav floats over the photograph with nothing behind it, then earns a surface on scroll. */
.nav.over-dark .bar { background:transparent !important; border-color:transparent !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:none !important; }
.nav.over-dark .bar .brand { color:var(--cream); }
.nav.over-dark.scrolled .bar { background:rgba(17,18,17,.62) !important;
  backdrop-filter:blur(16px) saturate(1.1) !important; -webkit-backdrop-filter:blur(16px) saturate(1.1) !important;
  border-color:rgba(255,255,255,.14) !important; }

/* The cut from photograph to ivory is deliberate: no fade, no gradient, one hard edge. */
.imm .cine { margin-bottom:0; border-bottom:0; }
.imm .strip { background:var(--panel); border:1px solid var(--edge) !important; box-shadow:none !important;
  border-radius:var(--r-m); }

/* ---------- 7. the category ticker and the example rails ---------- */
.imm .ticker { border-bottom:1px solid var(--edge) !important; margin-bottom:22px; }
.cat { font-family:var(--display); font-size:.74rem; font-weight:500; letter-spacing:.01em; color:var(--text-3); }
/* Centred in the strip. The track is a flex row, so every item is stretched to the height of the tallest
   one; without this the icon and its label sat at the top of that box and the slack all fell below, or
   above, depending on the neighbour. Centring the column puts the same air on both sides of it. */
.cat { justify-content:center }
.ticker .cat { align-self:stretch }
.cat svg { width:21px; height:21px; }
.cat:hover { color:var(--text); border-bottom-color:var(--edge-2); }
.cat[aria-pressed="true"] { color:var(--text); border-bottom-color:var(--char-3); }

.imm .rail-head { align-items:flex-end; border-top:1px solid var(--edge); padding-top:18px; margin-bottom:16px; }
.imm .rail-title { align-items:baseline; }
.imm .rail-title h2 { font-family:var(--serif) !important; font-weight:400 !important;
  font-size:clamp(1.3rem,1.9vw,1.8rem) !important; letter-spacing:-.01em !important; }
.rail-arrow-inline { background:transparent; border:1px solid var(--edge-2); width:28px; height:28px; color:var(--text-2); }
.rail-title:hover .rail-arrow-inline { border-color:var(--accent); color:var(--accent); }
.rail-nav button { border-color:var(--edge-2); background:var(--panel); color:var(--text-2); }
.rail-nav button:hover { border-color:var(--char-3); color:var(--text); background:var(--panel); }

/* Cards: the photograph does the talking, the type sits quietly under it. */
.rcard-media { border-radius:var(--r-m); box-shadow:0 18px 40px -30px rgba(60,45,30,.55); }
.rcard-pill { background:var(--cream); color:#242421; font-family:var(--display); font-size:.62rem;
  font-weight:600; letter-spacing:.14em; text-transform:uppercase; padding:5px 10px; box-shadow:none; }
.rcard-save { background:rgba(17,18,17,.42); color:var(--cream); }


}
.rcard-body { padding:11px 2px 0; }
.rcard-title { font-family:var(--display); font-weight:600; font-size:.95rem; }
.rcard-sub { color:var(--text-2); font-size:.85rem; }
.rcard-more .rcard-media { border:1px solid var(--edge); box-shadow:none; }

/* ---------- 8. cities ---------- */
.city-img { border-radius:var(--r-m); box-shadow:0 26px 56px -34px rgba(60,45,30,.6); }
.city-name { font-family:var(--serif); text-shadow:0 8px 26px rgba(0,0,0,.4); }
.city-coords { color:rgba(244,237,225,.78); letter-spacing:.2em; }
.city-panel { background:transparent !important; border:0 !important; box-shadow:none !important;
  padding:12px 2px 0 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
.city-panel b { font-family:var(--display); font-weight:600; font-size:.84rem; color:var(--text); }
.city-panel q { font-family:var(--serif); font-style:italic; color:var(--text-2); }
.city-panel .go { color:var(--accent); font-family:var(--display); font-weight:600; }

/* ---------- 9. the story band: asymmetric frames, warm wash, cream serif ---------- */
.story-sticky { gap:clamp(10px,1.4vw,18px); }
.frame { border-radius:var(--r-l); padding:clamp(20px,3vw,34px); }
.frame-img::after { background:linear-gradient(180deg,rgba(17,18,17,.26) 0%,rgba(17,18,17,.44) 45%,rgba(17,18,17,.78) 100%); }
.frame-img img { filter:saturate(.86) contrast(1.02); }
.frame h3 { font-family:var(--serif); font-weight:400; color:var(--cream);
  text-shadow:0 10px 34px rgba(0,0,0,.4); letter-spacing:-.015em; }
.frame h3 em { color:var(--accent-2) !important; font-style:italic; }
.frame .frame-sub { color:rgba(244,237,225,.74); }
@media (min-width:768px) {
  .story-sticky { grid-template-columns:repeat(12,1fr); }
  .story-sticky .frame:nth-of-type(1) { grid-column:span 7; }
  .story-sticky .frame:nth-of-type(2) { grid-column:span 5; }
  .story-sticky .frame:nth-of-type(3) { grid-column:span 5; }
  .story-sticky .frame:nth-of-type(4) { grid-column:span 7; }
  .frame { min-height:340px; }
}

/* ---------- 10. activity cards ---------- */
.imm .card-activity { border:1px solid var(--edge) !important; background:var(--panel) !important;
  border-radius:var(--r-m); box-shadow:none !important; text-align:left; }
.imm .card-activity:hover { box-shadow:var(--shadow-1) !important; }
.card-activity .ico { background:transparent; border:1px solid var(--edge-2) !important; border-radius:50%;
  width:44px; height:44px; display:grid; place-items:center; color:var(--accent); }
.card-activity h3 { font-family:var(--display); font-weight:600; font-size:1rem; margin-top:14px; }
.card-activity .go { color:var(--accent); font-family:var(--display); font-weight:600; font-size:.82rem; }

/* ---------- 11. how it works: numbered, horizontal, thin circular line icons ---------- */
.how-band .timeline { counter-reset:hstep; gap:0; margin-top:clamp(18px,2.4vw,34px) !important; }
@media (min-width:768px) { .how-band .timeline { grid-template-columns:repeat(3,1fr); gap:0 clamp(24px,3vw,56px); } }
.how-band .tstep { counter-increment:hstep; text-align:left; padding:22px 0 4px;
  background:transparent !important; border:0 !important; border-top:1px solid var(--edge-2) !important;
  border-radius:0; box-shadow:none !important; }
.how-band .tstep::before { content:counter(hstep,decimal-leading-zero); display:block;
  font:600 .68rem/1 var(--display); letter-spacing:.2em; color:var(--accent); margin-bottom:18px; }
.how-band .tstep .n { width:46px; height:46px; margin:0 0 16px; background:transparent;
  border:1px solid var(--edge-2); box-shadow:none; }
.how-band .tstep .n svg { width:20px; height:20px; color:var(--text-2); stroke-width:1.4; }
.how-band .tstep h3 { font-family:var(--display); font-weight:600; font-size:1.02rem; max-width:22ch; }
.how-band .tstep p { max-width:38ch; }

/* ---------- 12. safety: a full-bleed dark photographic band with charcoal glass cards ---------- */
.safety-band { position:relative; isolation:isolate; color:var(--cream); overflow:hidden;
  padding-inline:0 !important; }
.safety-band::before { content:""; position:absolute; inset:0; z-index:-2;
  background:url("/img/city1.jpg") center 40% / cover no-repeat; filter:saturate(.62) contrast(1.02) brightness(.9); }
.safety-band::after { content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,rgba(17,18,17,.94) 0%,rgba(17,18,17,.82) 42%,rgba(17,18,17,.62) 100%); }
.safety-band > .wrap { position:relative; z-index:1; }
.safety-band .split { align-items:start; gap:clamp(28px,4vw,64px); }
.safety-band .eyebrow { color:var(--accent-2); }
.safety-band h2 { color:var(--cream); max-width:15ch; }
.safety-band .lead { color:var(--cream-2); }
.safety-band .small, .safety-band p { color:var(--cream-3); }
.safety-band a:not(.btn) { color:var(--accent-2); text-decoration:underline; text-underline-offset:3px; }
.safety-band .grid.g2 { gap:10px; }
.safety-band .safe { background:rgba(255,255,255,.06) !important; border:1px solid var(--edge-dark) !important;
  border-radius:var(--r-m); padding:13px 15px; flex-direction:row; align-items:center; gap:12px; }
.safety-band .safe-ico { color:var(--cream); opacity:.85; }
.safety-band .safe-ico svg { stroke-width:1.4; }
.safety-band .safe-label { color:var(--cream); font-family:var(--display); font-weight:500; font-size:.88rem; }
.safety-band .safe .status { background:transparent; border:0; color:var(--cream-3);
  font-family:var(--display); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; }
.safety-band .safe .status.completed { color:var(--accent-2); }
@media (min-width:768px) { .safety-band .split .grid.g2:has(.safe) { grid-template-columns:1fr 1fr; gap:10px; } }

/* ---------- 13. the guardian split stays ivory and editorial ---------- */
.guardian-band .glass { border:0 !important; border-radius:var(--r-l); overflow:hidden;
  box-shadow:0 30px 70px -44px rgba(60,45,30,.6) !important; }
.guardian-band ul, .host-banner ul { list-style:none; padding-left:0 !important; }
.guardian-band li, .host-banner li { position:relative; padding-left:22px; }
.guardian-band li::before, .host-banner li::before { content:""; position:absolute; left:0; top:.62em;
  width:9px; height:1px; background:var(--accent); }

/* ---------- 14. become a host: one large rounded charcoal banner ---------- */
.host-banner { padding-inline:var(--pad) !important; }
.host-banner .split { background:var(--char-2); border-radius:var(--r-xl); overflow:hidden;
  padding:clamp(22px,3.4vw,52px); gap:clamp(24px,3.4vw,56px); align-items:center; color:var(--cream); }
.host-banner .glass { background:transparent !important; border:0 !important; box-shadow:none !important;
  border-radius:var(--r-l); overflow:hidden; }
.host-banner .eyebrow { color:var(--accent-2); }
.host-banner h2 { color:var(--cream); max-width:14ch; }
.host-banner .lead, .host-banner li { color:var(--cream-2); }
.host-banner .split > .stack { padding:clamp(0px,1vw,14px) 0; }

/* ---------- 15. stories: near-paper quote cards ---------- */
.stories-band figure.card { background:var(--panel) !important; border:1px solid var(--edge) !important;
  box-shadow:none !important; border-radius:var(--r-l); padding:clamp(22px,2.4vw,32px) !important;
  display:flex; flex-direction:column; }
.stories-band blockquote { font-family:var(--serif) !important; font-weight:400 !important;
  font-size:clamp(1.15rem,1.5vw,1.4rem) !important; line-height:1.34 !important; color:var(--text) !important;
  margin:0 0 auto !important; letter-spacing:-.005em; }
.stories-band figcaption { font-family:var(--display); font-size:.66rem !important; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); margin-top:22px;
  padding-top:16px; border-top:1px solid var(--edge); }

/* ---------- 16. payments ---------- */
.pay-i { background:transparent; border:1px solid var(--edge-2); border-radius:50%;
  width:44px; height:44px; color:var(--accent); }
.pay-i svg { width:18px; height:18px; stroke-width:1.5; }
.pay-row b { font-family:var(--display); font-weight:600; }
.pay-grid { gap:clamp(24px,3vw,40px) clamp(28px,4vw,64px); }

/* ---------- 17. the closing frame ---------- */
.night-moment { background:var(--char); }
.night-moment .wash { background:
  radial-gradient(76% 68% at 18% 100%, rgba(201,168,122,.15), transparent 68%),
  linear-gradient(90deg, rgba(17,18,17,.92) 0%, rgba(17,18,17,.70) 40%, rgba(17,18,17,.58) 72%, rgba(17,18,17,.80) 100%); }
.night-moment h2 { color:var(--cream); max-width:15ch; }
.night-moment h2 em { color:var(--accent-2); }
.night-moment .lead { color:var(--cream-2); }
.night-moment .small { color:var(--cream-3) !important; }

/* ---------- 18. footer: full-width near-black, cream type ---------- */
footer.foot { background:var(--char) !important; color:rgba(244,237,225,.62) !important;
  border-top:0 !important; padding-block:clamp(52px,6vw,84px); }
footer.foot .brand, footer.foot b { color:var(--cream) !important; }
footer.foot .foot-h, footer.foot h4 { font-family:var(--display) !important; font-size:.66rem !important;
  font-weight:600 !important; letter-spacing:.18em !important; text-transform:uppercase;
  color:rgba(244,237,225,.5) !important; margin-bottom:14px !important; }
footer.foot a { color:rgba(244,237,225,.66) !important; }
footer.foot a:hover { color:var(--cream) !important; }
footer.foot .tiny, footer.foot .small { color:rgba(244,237,225,.46) !important; }
footer.foot .cols { gap:clamp(24px,3vw,44px); }
footer.foot ul { gap:9px; }
footer.foot .brand .sym, footer.foot .brand svg { color:var(--cream); }

/* ---------- 19. tabs and nav chrome follow the palette ---------- */
.tabs { background:var(--panel); border-top:1px solid var(--edge); }
.tabs button[aria-current="page"] { background:var(--accent-soft); color:var(--text); }
.nav .links a[aria-current="page"], .nav .links button[aria-current="page"] { background:var(--accent-soft); color:var(--text); }
.nav .links a:hover, .nav .links button:hover { background:var(--panel-2); }
.nav .icon-btn:hover { background:var(--panel-2); }
.nav .bar { border-color:var(--edge) !important; }
.themebtn:hover { background:var(--panel-2); color:var(--text); }

/* ---------- 20. links read as links without shouting ---------- */
/* .skip belongs on this list: the rule is more specific than .skip itself, so without it the skip
   link was painted accent-on-accent and vanished the moment a keyboard user focused it. */
a:not(.btn):not(.brand):not(.tag):not(.chip):not(.cat):not(.city):not(.rcard):not(.rcard-media):not(.sec-cta):not(.skip):not(.live-pill):not(.cbadge) { color:var(--accent); }
.nav a, .tabs a, footer.foot a, .rail-title, .studio-link { color:inherit; }

/* ---------- 21. motion: fade, translate, a per-cent of scale, nothing else ---------- */
[data-reveal] { transform:translate3d(0,18px,0); }
.lift:hover { transform:translateY(-2px); }
@media (prefers-reduced-motion:reduce) {
  .btn:hover, .lift:hover { transform:none; }
  .btn::after { display:none; }
}

/* ---------- 22. dark theme: the ivory bands become warm charcoal, the dark bands go deeper ---------- */
:root[data-theme="dark"] .band-ivory,
:root[data-theme="dark"] .stories-band { background:var(--ivory-3); }
:root[data-theme="dark"] .host-banner .split { background:var(--char-4); }
:root[data-theme="dark"] .safety-band::after {
  background:linear-gradient(90deg,rgba(9,9,8,.95) 0%,rgba(9,9,8,.86) 42%,rgba(9,9,8,.7) 100%); }
:root[data-theme="dark"] .rcard-pill { background:var(--cream); color:#161716; }
:root[data-theme="dark"] .chip[aria-pressed="true"], :root[data-theme="dark"] .chip.on {
  background:var(--cream); color:#161716; }
:root[data-theme="dark"] .progress .p i { background:var(--cream); }
:root[data-theme="dark"] .progress .p { background:rgba(255,255,255,.10); }
:root[data-theme="dark"] .skel { background:rgba(255,255,255,.06); }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .band-ivory,
  :root:not([data-theme="light"]) .stories-band { background:var(--ivory-3); }
  :root:not([data-theme="light"]) .host-banner .split { background:var(--char-4); }
  :root:not([data-theme="light"]) .safety-band::after {
    background:linear-gradient(90deg,rgba(9,9,8,.95) 0%,rgba(9,9,8,.86) 42%,rgba(9,9,8,.7) 100%); }
  :root:not([data-theme="light"]) .rcard-pill { background:var(--cream); color:#161716; }
  :root:not([data-theme="light"]) .chip[aria-pressed="true"], :root:not([data-theme="light"]) .chip.on {
    background:var(--cream); color:#161716; }
  :root:not([data-theme="light"]) .progress .p i { background:var(--cream); }
  :root:not([data-theme="light"]) .progress .p { background:rgba(255,255,255,.10); }
  :root:not([data-theme="light"]) .skel { background:rgba(255,255,255,.06); }
}
/* Photographs keep their own light in dark mode; the interface around them dims instead. */
:root[data-theme="dark"] .cine-layer img, :root[data-theme="dark"] .frame-img img,
:root[data-theme="dark"] .safety-band::before { opacity:1; }

/* ---------- 23. phone: the hero keeps its scrim, the bands keep their air ---------- */
@media (max-width:767px) {
  .cine .wrap::before { background:linear-gradient(180deg,rgba(17,18,17,.30),rgba(17,18,17,.66)); }
  .cine h1 { font-size:clamp(2.1rem,8.6vw,2.9rem); max-width:16ch; }
  .cine .badges { gap:8px 18px; padding-top:12px; }
  .cine .vbadge { font-size:.74rem; }
  .imm section.band { padding-block:clamp(44px,9vw,64px) !important; }
  .sec-cta { min-height:44px; }
  .safety-band .split { gap:24px; }
  .host-banner .split { padding:22px; border-radius:var(--r-l); }
  footer.foot .cols { grid-template-columns:1fr 1fr; }
}

/* ---------- 24. full-bleed grounds without breaking the reading measure ----------
   The bands carry .wrap, so their own background stops at 1560px and reads as a slab
   floating on the page. The ground is painted by a pseudo that runs the full viewport
   while the content keeps its measure. html/body are overflow-x:clip, so the few pixels
   a scrollbar costs are clipped rather than scrollable. */
.band-ivory { background:transparent; position:relative; z-index:0; }
.band-ivory::before { content:""; position:absolute; top:0; bottom:0; left:50%;
  width:100vw; margin-left:-50vw; z-index:-1; background:var(--ivory-3); }
.stories-band::before { background:var(--ivory-3); }

/* The safety band is already edge to edge; its photograph and wash sit behind the measure. */
.safety-band { z-index:0; }

/* ---------- 25. odds and ends the palette change reaches ---------- */
.kv.total { border-top:1px solid var(--edge-2); }
.kv.total .v { color:var(--text); font-weight:700; }
.code { color:var(--text); }
.stats .n { font-family:var(--display); }
.mkt-region h2 { font-family:var(--display); font-size:.7rem; font-weight:600; letter-spacing:.18em;
  color:var(--text-3); border-bottom-color:var(--edge); }
.foot-h { font-family:var(--display); }
.pl-opt[aria-pressed="true"] { background:var(--accent-soft); border-color:var(--accent); }
.pl-opt[aria-pressed="true"] b { color:var(--text); }
.studio-link:hover, .studio-link.on { background:var(--accent-soft); color:var(--text); }
.seg button.on { background:var(--accent-soft); color:var(--text); }
.av-opt.on { border-color:var(--char-3); }
.av-opt.on span { color:var(--text); }
.ph-badge { background:var(--char-3); color:var(--cream); }
.pavatar-edit { background:var(--char-3); color:var(--cream); }
.host .float .tag { background:var(--cream); color:#242421; font-family:var(--display);
  font-size:.66rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; box-shadow:none; }
.host .portrait { border-radius:var(--r-m); }
.host .portrait .price { background:var(--cream); color:#242421; box-shadow:none; font-weight:600; }
.folk-more > summary { color:var(--accent); }
.folk-card { background:var(--panel) !important; border:1px solid var(--edge) !important; }
.folk-pill { background:var(--panel-2); border-color:var(--edge); color:var(--text-2); }
.tstep .n { color:var(--accent); }
.tstep .n svg { color:var(--accent); }
.safe .status.completed { color:var(--accent); }

/* ---------- 26. standing ladder (host and Guardian public pages) ---------- */
.ladder-card { padding:clamp(20px,2.4vw,30px); }
.ladder-card h3 { margin-top:2px; }
.ladder-scroll { overflow-x:auto; scrollbar-width:thin; }
table.ladder { width:100%; border-collapse:collapse; text-align:left; min-width:520px; }
table.ladder thead th { font:600 .64rem/1 var(--display); letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-3); padding:0 18px 10px 0; border-bottom:1px solid var(--edge-2); }
table.ladder tbody th, table.ladder tbody td { padding:14px 18px 14px 0;
  border-bottom:1px solid var(--edge); vertical-align:baseline; }
table.ladder tbody tr:last-child th, table.ladder tbody tr:last-child td { border-bottom:0; padding-bottom:2px; }
table.ladder tbody th { font-family:var(--serif); font-weight:400; font-size:1.15rem; color:var(--text);
  white-space:nowrap; width:1%; }
table.ladder tbody tr:last-child th { color:var(--accent); }
table.ladder td b { display:block; font-family:var(--display); font-weight:600; font-size:.9rem;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
table.ladder td .tiny { display:block; margin-top:2px; color:var(--text-3); font-variant-numeric:tabular-nums; }
table.ladder td.small { color:var(--text-2); max-width:46ch; }
@media (max-width:560px) { table.ladder { min-width:420px; } table.ladder tbody th { font-size:1.02rem; } }
/* Below this the three columns cannot hold their content: a 420px minimum inside a ~350px phone clipped
   the "earned by" column mid-word, so the criteria for every tier were unreadable behind a thin
   scrollbar on the page that explains what a host earns. Each tier becomes its own block instead, which
   needs no horizontal scroll at all. The header row is hidden rather than repeated, because each cell
   already reads as a sentence. */
@media (max-width:480px) {
  .ladder-scroll { overflow-x:visible; }
  table.ladder { min-width:0; display:block; }
  table.ladder thead { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  table.ladder tbody, table.ladder tr, table.ladder tbody th, table.ladder tbody td { display:block; width:auto; }
  table.ladder tbody tr { padding:14px 0; border-bottom:1px solid var(--edge); }
  table.ladder tbody tr:last-child { border-bottom:0; padding-bottom:2px; }
  table.ladder tbody th, table.ladder tbody td { padding:0 0 6px; border-bottom:0; white-space:normal; }
  table.ladder tbody th { font-size:1.15rem; }
  table.ladder td.small { max-width:none; }
  table.ladder td b { white-space:normal; }
}

/* ---------- 27. corrections after the first look ---------- */
/* The nav's own call to action is on photography while the hero is behind it. */
.nav.over-dark .bar .btn-primary { background:var(--cream) !important; color:#161716 !important; }
.nav.over-dark .bar .btn-primary:hover { background:#FFFBF3 !important; }
.cine-eyebrow { color:rgba(244,237,225,.66); }

/* Safety band: the wash was heavy enough to lose the photograph and most of the type with it. */
.safety-band::before { filter:saturate(.68) contrast(1.04) brightness(1.22); }
.safety-band::after { background:
  linear-gradient(90deg, rgba(17,18,17,.90) 0%, rgba(17,18,17,.74) 38%, rgba(17,18,17,.46) 72%, rgba(17,18,17,.52) 100%); }
@media (min-width:960px) { .safety-band .split { grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); } }
/* A label set nowrap inside a half-width column ran straight under its own status pill. */
.safety-band .safe { white-space:normal; }
.safety-band .safe-label { white-space:normal !important; }
.safety-band .safe .safe-row { display:flex; align-items:center; gap:11px; flex:1 1 auto; min-width:0; }
.safety-band .safe .status { flex:none; margin-left:12px; white-space:nowrap; }
.safety-band .split .grid.g2:has(.safe) { grid-template-columns:1fr; gap:9px; }
.safety-band .split .grid.g2:has(.safe) > .safe { border-bottom:1px solid var(--edge-dark) !important; }

/* Become a host: a dark forest photograph disappeared into a charcoal banner. */
.host-banner .glass img { filter:brightness(1.28) saturate(.92) contrast(1.02); }
@media (min-width:960px) { .host-banner .split { grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); } }

/* ---------- 28. second-look corrections ---------- */
/* .glass::before exists only to give the pointer sheen a box, and it sets position:absolute.
   The numbered step counter is also a ::before on a .glass element, so it inherited that and
   collapsed out of the flow. It states its own position rather than relying on the order. */
.how-band .tstep::before { position:static; inset:auto; background:none; opacity:1; border-radius:0; }

/* The host banner reads as a banner when the photograph fills its side of it. */
.host-banner .glass img { height:100% !important; object-fit:cover;
  filter:brightness(1.06) saturate(.74) contrast(1.03); }
.host-banner .split { align-items:stretch; }
.host-banner .split > .stack { align-self:center; }

/* Enough wash on the right for the safety cards to sit on something. */
.safety-band::after { background:
  linear-gradient(90deg, rgba(17,18,17,.92) 0%, rgba(17,18,17,.78) 38%, rgba(17,18,17,.56) 72%, rgba(17,18,17,.62) 100%); }

/* A city name over a bright sky needs a ground, not just a shadow. */
.city-img::after { content:""; position:absolute; inset:0 0 auto; height:44%; pointer-events:none;
  background:linear-gradient(180deg,rgba(17,18,17,.46),transparent); }
.city-name, .city-coords { z-index:1; }

/* The banner photograph fills its half of the banner. The image is taken out of flow so the box is
   sized by the grid row rather than by the picture's own proportions. */
/* A portrait rather than a landscape crop: it fills the banner's height and reads as one half of it,
   where a 4:3 landscape floated in the middle of its column. The ratio is put on the image, not on the
   box: an aspect-ratio on a grid item whose row is auto-sized is a cyclic dependency, and Chrome
   resolves it by shrinking the column. The image carries the ratio and the box follows it. */
.host-banner .glass { position:relative; overflow:hidden; aspect-ratio:auto !important; }
.host-banner .glass img { width:100% !important; height:auto !important; object-fit:cover; }
@media (min-width:960px) { .host-banner .glass img { aspect-ratio:5/6 !important; } }
@media (max-width:959px) { .host-banner .glass img { aspect-ratio:16/10 !important; } }
.how-band .tstep h3 { max-width:26ch; }

/* The hero clips its own overflow (the parallax layers depend on it) and the search sits near its
   bottom edge, so a list opening downward was cut off half way. In the hero, and only there, it opens
   upward instead. It keeps position:absolute and its own ink; only the anchor edge changes. */
.cine .combo-list { top:auto; bottom:calc(100% + 6px); max-height:min(340px,42vh); }

/* Native controls follow the palette rather than the operating system's accent blue. */
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color:var(--char-3); }
:root[data-theme="dark"] input[type="checkbox"], :root[data-theme="dark"] input[type="radio"],
:root[data-theme="dark"] input[type="range"], :root[data-theme="dark"] progress { accent-color:var(--accent-2); }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) input[type="checkbox"], :root:not([data-theme="light"]) input[type="radio"],
  :root:not([data-theme="light"]) input[type="range"], :root:not([data-theme="light"]) progress { accent-color:var(--accent-2); }
}


/* ===================================================================
   HERO — reconstructed from the approved reference.
   A 42/58 split. The left column holds everything that is read, over a gradient strong enough to carry
   cream text at any point in the photograph. The right holds the picture and its two decorations.
   =================================================================== */
.cine.hero-ref{ min-height:min(92svh,860px); display:block; padding:0; overflow:hidden; background:#141210 }
.cine.hero-ref .cine-layer{ position:absolute; inset:0; z-index:0 }
.cine.hero-ref .cine-bg img{ width:100%; height:100%; object-fit:cover; object-position:62% 42%;
  /* Graded to golden hour. The source is a midday shot with a blue sky; warming it and pulling the blues
     toward amber gets the European sunset the reference is built on. A photograph shot at that hour would
     be better and is the one asset this cannot manufacture. */
  filter:sepia(.55) saturate(1.65) hue-rotate(-18deg) contrast(1.04) brightness(.95); }
/* The left wall of dark the reference builds its text on, then released quickly so the photograph keeps
   its warmth across the right-hand two thirds. */
.hero-grade{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(96deg, rgba(12,9,7,.97) 0%, rgba(14,10,7,.93) 24%, rgba(22,15,9,.62) 42%, rgba(38,24,12,.2) 60%, rgba(70,42,18,.04) 82%, transparent 100%); }
.hero-veil{ position:absolute; inset:0; z-index:1;
  background:radial-gradient(90% 62% at 74% 30%, rgba(255,178,88,.34), transparent 66%),
             linear-gradient(180deg, rgba(58,34,14,.55) 0%, rgba(58,34,14,.12) 20%, transparent 52%, rgba(10,8,6,.66) 100%); }

.hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,42fr) minmax(0,58fr);
  align-items:center; min-height:min(92svh,860px); padding-top:calc(var(--nav-h,72px) + 26px); padding-bottom:52px; gap:32px }
.hero-copy{ max-width:34rem }
.cine.hero-ref .cine-eyebrow{ display:block; font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(233,214,182,.9); font-weight:600; margin:0 0 20px }
.cine.hero-ref .cine-h1{ font-family:var(--serif,Georgia,serif); font-weight:400; font-style:normal;
  font-size:clamp(2.9rem,5.6vw,4.9rem); line-height:1.03; letter-spacing:-.018em; margin:0 0 20px;
  color:#F7F1E6; }
.cine.hero-ref .cine-h1 span{ display:block }
.cine.hero-ref .cine-sub{ margin:0 0 12px; font-size:clamp(1rem,1.35vw,1.12rem); color:#F0E7D8; font-weight:500 }
.cine.hero-ref .cine-lead{ margin:0 0 26px; max-width:40ch; font-size:.96rem; line-height:1.6; color:rgba(240,231,216,.74) }

/* One capsule, not an enterprise filter row: a place, and the action. */
.hero-search .search{ display:flex; align-items:center; gap:0; max-width:520px; padding:6px 6px 6px 8px !important;
  background:rgba(252,248,241,.96) !important; border:1px solid rgba(255,255,255,.55) !important;
  border-radius:999px !important; box-shadow:0 24px 60px -30px rgba(20,12,4,.8) !important; grid-template-columns:none !important }
.hero-search .search .sf{ background:transparent !important; border:0 !important; padding:4px 10px !important; flex:1 1 auto; min-width:0 }
/* All three fields, with their labels, the way the reference has it. Hiding What and How long made the
   hero a single search box and pushed both decisions onto the results page. */
.hero-search .search .combo .input{ color:#1A1917 !important; font-size:.98rem; font-weight:500; min-height:38px }
.hero-search .search .combo .input::placeholder{ color:#9A8E7C !important }
.hero-search .search .btn-primary{ flex:0 0 auto; background:#17140F !important; color:#F7F1E6 !important;
  border:0 !important; box-shadow:none !important; border-radius:999px !important; padding:0 20px; min-height:44px; font-weight:600 }
.hero-search .search .btn-primary:hover{ background:#282219 !important }

.hero-trust{ display:flex; gap:26px; flex-wrap:wrap; list-style:none; margin:26px 0 0; padding:0 }
.hero-trust li{ display:flex; align-items:center; gap:8px; font-size:.86rem; color:rgba(240,231,216,.8) }
.hero-trust svg{ width:16px; height:16px; opacity:.85 }
@media (max-width:480px){ .hero-trust{ gap:10px 18px; margin-top:20px } .hero-trust li{ font-size:.82rem } }

/* The handwritten accent, small and used once here. */
.hero-side{ position:relative; height:100%; min-height:200px }
.cine.hero-ref .cine-script{ position:absolute; top:8%; right:6%;
  font-family:var(--script,cursive); font-size:clamp(1.1rem,1.9vw,1.6rem); line-height:1.28;
  color:rgba(247,232,206,.94); text-align:right; transform:rotate(-7deg);
  text-shadow:0 2px 16px rgba(0,0,0,.5); pointer-events:none }

/* The floating glass card, bottom right of the photograph. */
.hero-card{ position:absolute; right:clamp(16px,4vw,54px); bottom:clamp(64px,9vh,96px); z-index:3;
  display:flex; align-items:center; gap:14px; width:min(330px,44vw); padding:14px;
  border-radius:16px; text-decoration:none;
  background:rgba(26,20,14,.62); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.16); box-shadow:0 30px 70px -34px rgba(0,0,0,.85);
  transition:transform .28s cubic-bezier(.23,1,.32,1) }
.hero-card:hover{ transform:translateY(-3px) }
.hero-card-body{ min-width:0 }
.hero-card-body b{ display:block; font-family:var(--serif,Georgia,serif); font-weight:400; font-size:1.18rem;
  line-height:1.12; color:#F7F1E6; margin-bottom:5px }
.hero-card-body span{ display:block; font-size:.76rem; line-height:1.42; color:rgba(240,231,216,.72) }
.hero-card-thumb{ position:relative; flex:0 0 auto; width:76px; height:62px; border-radius:11px; overflow:hidden }
.hero-card-thumb img{ width:100%; height:100%; object-fit:cover }
.hero-card-thumb i{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.28) }
.hero-card-thumb svg{ width:18px; height:18px; color:#fff }

.cine.hero-ref .scroll-cue{ z-index:3 }

@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; align-items:end; min-height:min(88svh,720px) }
  .hero-side{ display:none }
  .hero-card{ display:none }
  .cine.hero-ref .cine-bg img{ object-position:64% 40% }
  .hero-grade{ background:linear-gradient(180deg, rgba(14,11,9,.72) 0%, rgba(14,11,9,.4) 40%, rgba(14,11,9,.94) 100%) }
}

/* Nav sits quietly over the photograph: cream, evenly weighted, no accent colour competing with the
   headline. The sign-up pill is the only bright thing in the bar, as in the reference. */
/* Cream belongs to the bar only while it is floating over the hero photograph. Applied unconditionally
   it followed the links onto the light plate the bar takes once you scroll past the hero, and onto the
   cream plate it has all the time in light mode, leaving the whole navigation unreadable. */
.nav.over-dark .bar .links a{ color:rgba(247,241,230,.92) !important; font-weight:500 }
.nav.over-dark .bar .links a[aria-current="page"]{ color:#fff !important }
/* The broad a:not(.btn):not(.brand)... rule stacks a class's worth of specificity per :not(), so it
   outranks anything reasonable here. Marked important rather than piling on more selectors. */
.nav:not(.over-dark) .bar .links a{ color:var(--text) !important; font-weight:500 }
.nav:not(.over-dark) .bar .links a[aria-current="page"]{ color:var(--teal-deep) !important }
.nav:not(.over-dark) .bar .brand{ color:var(--text) }
.nav:not(.over-dark) .bar .btn-ghost{ color:var(--text) }
.nav.over-dark .bar .links a:hover{ color:#fff }
.nav.over-dark .bar .brand{ color:#F7F1E6 }
.nav.over-dark .bar .btn-ghost{ color:rgba(247,241,230,.92) }
.hero-search .search .btn-primary svg{ width:15px; height:15px; margin-left:6px }

/* The sign-up pill is the one bright element in the bar. */
.nav .btn-primary.nav-signup{ background:#FBF7F0 !important; color:#17140F !important;
  border:0 !important; box-shadow:none !important; font-weight:600 }
.nav .btn-primary.nav-signup:hover{ background:#fff !important }

/* ---------- Experience cards, at the reference's scale ----------
   Four across at desktop, photograph-led, one line of text. The old rail fitted six or seven because the
   data existed; the reference fits four because that is what reads. Overflow scrolls rather than shrinks. */
.rails .rail, .rail{ scroll-snap-type:x proximity }
.xcard{ flex:0 0 clamp(260px,23vw,330px); scroll-snap-align:start; background:transparent; border:0;
  display:flex; flex-direction:column; gap:12px; text-decoration:none }
.xcard-media{ position:relative; aspect-ratio:4/4.6; border-radius:16px; overflow:hidden;
  background:var(--ph-bg); box-shadow:0 20px 44px -30px rgba(60,44,24,.5) }
.xcard-media img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.23,1,.32,1) }
.xcard:hover .xcard-media img{ transform:scale(1.02) }
.xcard-pill{ position:absolute; left:12px; top:12px; font-size:9.5px; letter-spacing:.13em; font-weight:700;
  padding:6px 10px; border-radius:999px; background:rgba(252,248,241,.94); color:#2A2419; text-transform:uppercase }
.xcard-foot h3{ font-family:var(--serif,Georgia,serif); font-weight:400; font-size:1.06rem; margin:0 0 6px;
  color:var(--text); letter-spacing:-.005em }
.xcard-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px }
.xcard-rating{ font-size:.82rem; color:var(--text-2) }
.xcard-price{ font-size:.82rem; color:var(--text-2); font-variant-numeric:tabular-nums }
@media (max-width:760px){ .xcard{ flex-basis:clamp(230px,72vw,280px) } }

/* ---------- How it works: three open steps ----------
   The reference gives these no container at all. A circular thin-line icon, a numbered heading and one
   sentence, carried by whitespace. Boxing them was making a light section read as a dashboard. */
.hsteps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,4vw,64px) }
.hstep{ display:block }
.hstep-ico{ display:grid; place-items:center; width:52px; height:52px; margin-bottom:18px;
  border-radius:50%; border:1px solid var(--border); background:transparent }
.hstep-ico svg{ width:20px; height:20px; stroke-width:1.4; color:var(--text-2) }
.hstep h3{ font-family:var(--serif,Georgia,serif); font-weight:400; font-size:1.15rem; margin:0 0 7px; color:var(--text) }
.hstep h3 em{ font-style:normal; color:var(--text-2) }
.hstep p{ margin:0; font-size:.92rem; line-height:1.6; color:var(--text-2); max-width:34ch }
@media (max-width:820px){ .hsteps{ grid-template-columns:1fr; gap:26px } }

/* ---------- Safety: the page's strongest break ----------
   Full-width photograph, warm charcoal over it, serif title and CTA on the left, translucent panels on
   the right. Previously this was a light documentation section, which made the middle of the page flat. */
.safety-band.safety-ref{ position:relative; isolation:isolate; overflow:hidden;
  background:#14110D; color:#F4ECDE; padding-block:clamp(56px,8vw,104px) }
.safety-photo{ position:absolute; inset:0; z-index:-2;
  background:url('/img/cities/istanbul.jpg') center 42%/cover no-repeat;
  filter:sepia(.5) saturate(1.35) hue-rotate(-16deg) brightness(.5) contrast(1.05) }
.safety-band.safety-ref::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(96deg, rgba(14,11,9,.94) 0%, rgba(16,12,9,.86) 34%, rgba(22,16,10,.62) 58%, rgba(30,20,12,.5) 100%) }
.safety-band.safety-ref .eyebrow{ color:rgba(233,214,182,.86) }
.safety-band.safety-ref h2{ color:#F7F1E6; font-size:clamp(1.9rem,3.4vw,2.9rem); margin:0 0 14px }
.safety-band.safety-ref .lead,.safety-band.safety-ref .small{ color:rgba(240,231,216,.76) }
.safety-band.safety-ref .split{ align-items:center; gap:clamp(28px,5vw,72px) }
.safety-band.safety-ref a{ color:#E9D6B6 }
/* The panels: warm translucent charcoal, hairline edge, one thin icon each. */
.safety-band.safety-ref .grid.g2{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
.safety-band.safety-ref .grid.g2 > *{
  background:rgba(38,29,20,.5) !important; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.14) !important; border-radius:14px !important;
  box-shadow:none !important; padding:18px 16px !important; color:#F4ECDE !important }
.safety-band.safety-ref .grid.g2 svg{ color:#F0E2C8; width:19px; height:19px; stroke-width:1.4 }
.safety-band.safety-ref .grid.g2 b,.safety-band.safety-ref .grid.g2 strong{ color:#F7F1E6 }
.safety-band.safety-ref .grid.g2 .small,.safety-band.safety-ref .grid.g2 .tiny{ color:rgba(240,231,216,.66) !important }
.safety-band.safety-ref .btn-secondary{ background:transparent !important; color:#F7F1E6 !important;
  border:1px solid rgba(255,255,255,.34) !important }
@media (max-width:820px){ .safety-band.safety-ref .grid.g2{ grid-template-columns:1fr } }

/* Four across, icon above label, as in the reference. All eight capabilities stay — the reference shows
   four because four is what it had, not because the fifth is unimportant — but they read as cards rather
   than as eight full-width rows, which is what made this look like a status table. */
.safety-band.safety-ref .wrap .split .grid.g2{ display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important }
.safety-band.safety-ref .safe{ padding:20px 16px 18px !important; text-align:left }
.safety-band.safety-ref .safe-row{ display:flex !important; flex-direction:column; align-items:flex-start; gap:12px }
.safety-band.safety-ref .safe-ico{ display:grid; place-items:center; width:40px; height:40px; border-radius:11px;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16) }
.safety-band.safety-ref .safe-row > *:not(.safe-ico){ font-size:.9rem; line-height:1.35 }
.safety-band.safety-ref .safe .status,.safety-band.safety-ref .safe .tag{
  font-size:8.5px !important; letter-spacing:.1em; opacity:.62; background:transparent !important;
  border:0 !important; padding:0 !important; color:rgba(240,231,216,.6) !important }
/* The photograph should be visible: it was graded so far down it read as a flat brown wall. */
.safety-photo{ filter:sepia(.36) saturate(1.3) hue-rotate(-14deg) brightness(.72) contrast(1.02) }
.safety-band.safety-ref::after{
  background:linear-gradient(96deg, rgba(14,11,9,.92) 0%, rgba(16,12,9,.8) 30%, rgba(22,16,10,.5) 56%, rgba(26,18,11,.42) 100%) }
@media (max-width:1100px){ .safety-band.safety-ref .grid.g2{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:640px){ .safety-band.safety-ref .grid.g2{ grid-template-columns:1fr } }

/* How it works: the heading holds the left, the three steps run beside it, all on one band.
   Stacking the heading above full-width steps made this the widest, flattest section on the page. */
.how-split{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,2.1fr); gap:clamp(28px,5vw,72px); align-items:start }
.how-intro h2{ font-family:var(--serif,Georgia,serif); font-weight:400; font-size:clamp(1.7rem,3vw,2.5rem);
  line-height:1.1; margin:10px 0 22px; letter-spacing:-.01em }
.how-cta{ border-radius:999px !important; padding:0 20px; min-height:44px }
.how-split .hsteps{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,3vw,40px) }
/* Centred under the icon, as in the reference, rather than left-aligned in a column. */
.how-split .hstep{ text-align:center }
.how-split .hstep-ico{ margin:0 auto 16px; width:56px; height:56px; background:rgba(40,30,20,.045) }
.how-split .hstep h3{ font-size:1.05rem; margin-bottom:8px }
.how-split .hstep p{ margin-inline:auto; max-width:26ch; font-size:.86rem }
@media (max-width:900px){ .how-split{ grid-template-columns:1fr; gap:28px } .how-split .hsteps{ grid-template-columns:1fr } }

/* Safety: four panels in one row, square-ish, icon above a short label — as in the reference. */
/* Three across, not four. There are nine safeguards now, and nine in a four-column grid leaves the last
   one alone on a row of its own, which reads as an afterthought rather than the newest one. Three columns
   make it a square. */
.safety-band.safety-ref .wrap .split .grid.g2{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:10px !important }
.safety-band.safety-ref .safe{ padding:22px 14px !important; text-align:center; aspect-ratio:1/.92;
  display:flex !important; flex-direction:column; align-items:center; justify-content:center }
.safety-band.safety-ref .safe-row{ align-items:center !important; gap:14px !important }
.safety-band.safety-ref .safe-ico{ margin:0 auto }
.safety-band.safety-ref .safe-row > *:not(.safe-ico){ font-size:.8rem !important; line-height:1.35; text-align:center }
.safety-band.safety-ref .safe .status,.safety-band.safety-ref .safe .tag{ display:none !important }
@media (max-width:1100px){ .safety-band.safety-ref .wrap .split .grid.g2{ grid-template-columns:repeat(2,minmax(0,1fr)) !important } }

/* ---------- Become a host: one wide dark banner ---------- */
.host-banner.host-ref{ padding-block:clamp(20px,3vw,40px) }
.hostb{ position:relative; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:stretch; gap:0; background:#17140F; border-radius:22px; overflow:hidden;
  box-shadow:0 30px 70px -46px rgba(30,20,10,.6) }
.hostb-photo{ position:relative; min-height:270px }
.hostb-photo img{ width:100%; height:100%; object-fit:cover; display:block }
.hostb-photo::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 55%, rgba(23,20,15,.9) 100%) }
.hostb-copy{ padding:clamp(28px,3.4vw,48px) clamp(20px,2.4vw,34px); align-self:center; color:#F4ECDE }
.hostb-copy .eyebrow{ color:rgba(233,214,182,.8) }
.hostb-copy h2{ font-family:var(--serif,Georgia,serif); font-weight:400; color:#F7F1E6;
  font-size:clamp(1.7rem,2.8vw,2.4rem); margin:10px 0 12px; letter-spacing:-.01em }
.hostb-copy p{ margin:0 0 22px; max-width:44ch; font-size:.94rem; line-height:1.6; color:rgba(240,231,216,.76) }
.hostb-cta{ background:#F7F1E6 !important; color:#17140F !important; border:0 !important;
  box-shadow:none !important; border-radius:999px !important; min-height:44px; padding:0 20px; font-weight:600 }
.hostb-cta:hover{ background:#fff !important }
/* The handwritten line, on its own darker field, as in the reference. */
.hostb-script{ display:grid; place-items:center; padding:20px; text-align:center;
  font-family:var(--script,cursive); font-size:clamp(1.1rem,1.7vw,1.5rem); line-height:1.35;
  color:rgba(240,225,198,.9); background:radial-gradient(80% 70% at 50% 50%, rgba(46,36,24,.9), rgba(23,20,15,0)) }
@media (max-width:900px){
  .hostb{ grid-template-columns:1fr }
  .hostb-photo{ min-height:210px }
  .hostb-photo::after{ background:linear-gradient(180deg, transparent 50%, rgba(23,20,15,.92) 100%) }
  .hostb-script{ padding-bottom:28px }
}

/* ---------- Social proof: three near-paper cards ----------
   The reference's composition, carrying the scenarios Timefolk actually publishes. No stars, faces,
   names or cities, because there are no real ones to show and a card is not worth inventing a customer. */
.tcards{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.tcard{ background:var(--panel); border:1px solid var(--hair,rgba(40,30,20,.08));
  border-radius:14px; padding:22px 20px; display:flex; flex-direction:column; gap:16px }
.tcard blockquote{ margin:0; font-size:.95rem; line-height:1.6; color:var(--text) }
.tcard figcaption{ display:flex; flex-direction:column; gap:2px; margin-top:auto;
  padding-top:14px; border-top:1px solid var(--hair-2,rgba(40,30,20,.05)) }
.tcard-kind{ font-size:.86rem; font-weight:600; color:var(--text) }
.tcard-note{ font-size:.74rem; color:var(--text-3) }
@media (max-width:860px){ .tcards{ grid-template-columns:1fr } }

/* ---------- Footer: near-black, compact, four columns ----------
   The reference gives the footer a dark ground and keeps it tight: a wordmark and tagline on the left,
   link columns beside it, legal and social on one line underneath. Every existing link is kept — the
   reference is the shape, not a reason to drop destinations. */
/* Scoped to the page footer. Written as a bare .foot it also hit the .foot strip inside a
   host card, painting "New host . 0 sessions" dark grey on near-black. */
footer.foot{ background:#14120E; color:rgba(244,236,222,.72); margin-top:0;
  padding-block:clamp(44px,5vw,68px) clamp(22px,2.4vw,30px);
  max-width:none; padding-inline:clamp(18px,5vw,64px) }
footer.foot .cols{ display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:clamp(22px,3.4vw,56px);
  max-width:var(--maxw); margin-inline:auto; padding-bottom:30px; border-bottom:1px solid rgba(255,255,255,.1) }
footer.foot .brand{ color:#F7F1E6; font-family:var(--serif,Georgia,serif); font-weight:400; font-size:1.34rem }
footer.foot .brand svg,footer.foot .brand img{ filter:grayscale(1) brightness(2.6) }
footer.foot .small,footer.foot .tiny{ color:rgba(240,231,216,.6) }
footer.foot .small b{ color:rgba(247,241,230,.9); font-weight:500 }
footer.foot .foot-h{ font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:rgba(233,214,182,.82);
  font-weight:600; margin:0 0 14px }
footer.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px }
footer.foot a{ color:rgba(240,231,216,.7); text-decoration:none; font-size:.87rem }
footer.foot a:hover{ color:#F7F1E6 }
@media (max-width:900px){ footer.foot .cols{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ footer.foot .cols{ grid-template-columns:1fr } }

/* ---------- Experience cards at the reference's scale ----------
   Four across, photograph-led, one line of text beneath: title, then rating left and price right. The
   old card carried the category, name, city, price, duration and languages in a stack, which is what made
   seven of them fit where four should be. */
.rcard.xcard{ flex:0 0 clamp(250px,22.5vw,318px) !important; width:auto !important; background:transparent !important;
  border:0 !important; box-shadow:none !important; padding:0 !important; display:flex; flex-direction:column; gap:12px }
.rcard.xcard .xcard-media{ position:relative; display:block; aspect-ratio:4/4.5; border-radius:16px;
  overflow:hidden; background:var(--ph-bg); box-shadow:0 20px 46px -32px rgba(60,44,24,.55) }
.rcard.xcard .xcard-media img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.23,1,.32,1) }
.rcard.xcard:hover .xcard-media img{ transform:scale(1.025) }
.rcard.xcard .xcard-pill{ position:absolute; left:12px; top:12px; z-index:2;
  font-size:9px; letter-spacing:.12em; font-weight:700; padding:6px 10px; border-radius:999px;
  background:rgba(252,248,241,.94); color:#2A2419; text-transform:uppercase; max-width:calc(100% - 60px);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.rcard.xcard .xcard-save{ position:absolute; right:10px; top:10px; z-index:2; width:32px; height:32px;
  display:grid; place-items:center; border-radius:50%; border:0; cursor:pointer;
  background:rgba(20,16,11,.42); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff }
.rcard.xcard .xcard-save svg{ width:15px; height:15px }
.rcard.xcard .xcard-foot h3{ font-family:var(--serif,Georgia,serif); font-weight:400; font-size:1.02rem;
  margin:0 0 7px; color:var(--text); letter-spacing:-.004em; line-height:1.25 }
.rcard.xcard .xcard-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px }
.rcard.xcard .xcard-rating,.rcard.xcard .xcard-price{ font-size:.8rem; color:var(--text-2) }
.rcard.xcard .xcard-price{ font-variant-numeric:tabular-nums }
@media (max-width:760px){ .rcard.xcard{ flex-basis:clamp(220px,70vw,270px) !important } }

/* Four across at desktop, so each card is roughly twice the old one. */
.rcard.xcard{ flex:0 0 clamp(280px,25vw,352px) !important }
.rcard.xcard .rcard-media{ position:relative; display:block; aspect-ratio:4/4.4; border-radius:16px;
  overflow:hidden; background:var(--ph-bg); box-shadow:0 20px 46px -32px rgba(60,44,24,.55) }
.rcard.xcard .rcard-media img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.23,1,.32,1) }
.rcard.xcard:hover .rcard-media img{ transform:scale(1.025) }
.rcard.xcard .rcard-pill{ position:absolute; left:12px; top:12px; z-index:2; font-size:9px;
  letter-spacing:.12em; font-weight:700; padding:6px 10px; border-radius:999px;
  background:rgba(252,248,241,.94); color:#2A2419; text-transform:uppercase;
  max-width:calc(100% - 62px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.rcard.xcard .rcard-save{ position:absolute; right:10px; top:10px; z-index:3; width:32px; height:32px;
  display:grid; place-items:center; border-radius:50%; border:0; cursor:pointer;
  background:rgba(20,16,11,.42); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff }
.rcard.xcard .rcard-save svg{ width:15px; height:15px }
.rcard.xcard .rcard-body{ padding:12px 2px 0 !important }
.rcard.xcard .rcard-title{ font-family:var(--serif,Georgia,serif); font-weight:400 !important;
  font-size:1.02rem !important; margin:0 0 7px; color:var(--text); line-height:1.25 }
.rcard.xcard .rcard-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px }
.rcard.xcard .rcard-kind,.rcard.xcard .rcard-price{ font-size:.8rem; color:var(--text-2) }
.rcard.xcard .rcard-price{ font-variant-numeric:tabular-nums }
@media (max-width:760px){ .rcard.xcard{ flex-basis:clamp(230px,72vw,280px) !important } }

/* ==========================================================================
   Story split + FAQ
   Two sections the reference has and the build did not: an argument set beside
   the photograph it belongs to with its numbers underneath, and the questions
   people ask before they book.
   ========================================================================== */
.story-split{ padding-block:clamp(56px,8vw,110px) }
.ss-grid{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:clamp(28px,5vw,72px); align-items:center }
.ss-copy{ max-width:56ch }
.ss-quote{ margin:14px 0 10px; font-family:var(--serif); font-weight:400;
  font-size:clamp(2rem,4.2vw,3.35rem); line-height:1.08; letter-spacing:-.015em;
  color:var(--text); text-wrap:balance }
.ss-quote em{ font-style:italic; color:var(--teal-deep) }
.ss-attrib{ margin:0 0 20px; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-3); font-weight:600 }
.ss-lead{ margin:0 0 22px; text-wrap:pretty }
.ss-cta{ margin:0 }
/* The photograph is the taller of the two columns, so it sets the section's height and the copy centres
   against it rather than the other way round. */
.ss-figure{ margin:0; border-radius:var(--r-xl); overflow:hidden; background:var(--bg-deep);
  box-shadow:var(--shadow-2); aspect-ratio:5/6 }
.ss-figure img{ width:100%; height:100%; object-fit:cover }
/* Four figures on one hairline rule. A grid, not four cards: the numbers are one statement read across,
   and boxing each of them would break it into four unrelated claims. */
.ss-stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,3vw,40px);
  margin:clamp(36px,6vw,68px) 0 0; padding-top:26px; border-top:1px solid var(--border) }
.ss-stats > div{ min-width:0 }
.ss-stats dt{ font-family:var(--serif); font-weight:400; font-size:clamp(1.7rem,3vw,2.5rem);
  line-height:1; letter-spacing:-.02em; color:var(--text); font-variant-numeric:tabular-nums }
.ss-stats dd{ margin:9px 0 0; font-size:.85rem; line-height:1.4; color:var(--text-2); max-width:22ch }
@media (max-width:900px){
  .ss-grid{ grid-template-columns:1fr; gap:28px }
  .ss-figure{ aspect-ratio:4/3; order:-1 }
  .ss-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:24px }
}

.faq-band{ padding-block:clamp(52px,7vw,96px) }
/* Two columns of disclosures, balanced by the browser rather than split by hand, so a long answer does
   not leave one side short. Each row keeps its own rule, which is what carries the alignment. */
.faq-cols{ columns:2; column-gap:clamp(32px,5vw,72px); margin-top:clamp(24px,4vw,40px) }
.faq-q{ break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
  border-top:1px solid var(--border); padding:0 0 2px }
.faq-q summary{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  padding:18px 0; cursor:pointer; list-style:none; font-size:1.02rem; font-weight:600;
  color:var(--text); line-height:1.35 }
.faq-q summary::-webkit-details-marker{ display:none }
.faq-q summary:hover{ color:var(--teal-deep) }
.faq-q summary:focus-visible{ outline:3px solid var(--sky); outline-offset:3px; border-radius:var(--r-s) }
/* A plus that becomes a minus. Two rules, one rotated, so the state change is a 200ms turn rather than
   a glyph swap. */
.faq-q summary i{ position:relative; flex:0 0 18px; width:18px; height:18px; margin-top:3px }
.faq-q summary i::before,.faq-q summary i::after{ content:''; position:absolute; inset:50% 0 auto 0;
  height:1.5px; background:var(--text-2); border-radius:2px; transition:transform var(--t-base) var(--ease) }
.faq-q summary i::after{ transform:rotate(90deg) }
.faq-q[open] summary i::after{ transform:rotate(0deg) }
.faq-q[open] summary{ color:var(--teal-deep) }
.faq-q > p{ margin:0 0 20px; color:var(--text-2); font-size:.95rem; line-height:1.62;
  max-width:60ch; text-wrap:pretty }
@media (max-width:820px){ .faq-cols{ columns:1 } }
@media (prefers-reduced-motion:reduce){ .faq-q summary i::before,.faq-q summary i::after{ transition:none } }

/* ==========================================================================
   Header menu
   The bar carried three links and the full menu was hidden above 1024px, so a
   wide screen had no route to Guardians, Countries, Policies or Help at all.
   One menu now, at every width, grouped the way the footer groups it.
   ========================================================================== */
.nav-menu{ display:grid !important }
/* Five links need a little less air between them than three did. */
nav.links{ gap:clamp(14px,1.6vw,26px) }
.bar.tight nav.links{ gap:12px }
.bar.tighter nav.links a:nth-child(n+4){ display:none }   /* Guardians and Safety fall to the menu first */

/* An earlier block pins this panel with !important at the width three links needed. Two grouped columns
   need more, so the override is matched at the same specificity rather than fought with a wider selector. */
html body #mmenu.mmenu{ width:min(580px,calc(100vw - 24px)) !important; padding:18px 20px 12px !important }
#mmenu .mm-group{ break-inside:avoid; margin:0 0 14px }
#mmenu .mm-group h3{ margin:0 0 6px; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-3); font-weight:700 }
#mmenu nav{ display:grid; grid-template-columns:1fr 1fr; gap:0 26px; align-content:start }
html body #mmenu.mmenu .mm-group a{ display:block; padding:7px 8px; margin-left:-8px; border-radius:8px;
  font-weight:500; font-size:.93rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
@media (max-width:560px){
  html body #mmenu.mmenu{ width:min(320px,calc(100vw - 24px)) !important; padding:14px 16px 10px !important }
  #mmenu nav{ grid-template-columns:1fr }
}

/* ==========================================================================
   Theme switch + live coverage pill
   ========================================================================== */
/* A switch, not a cycling icon: the state you see is the state you are in. */
.tswitch{ display:grid; place-items:center; padding:0; border:0; background:none; cursor:pointer;
  width:auto; height:auto; -webkit-tap-highlight-color:transparent }
.tswitch-track{ position:relative; display:block; width:52px; height:30px; border-radius:999px;
  background:var(--teal-soft); border:1px solid var(--border);
  transition:background var(--t-base) var(--ease), border-color var(--t-base) var(--ease) }
.tswitch-knob{ position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:var(--panel, #fff); box-shadow:0 1px 3px rgba(30,22,12,.32);
  transition:transform var(--t-base) cubic-bezier(.2,.9,.25,1.15) }
.tswitch[aria-checked="true"] .tswitch-track{ background:var(--teal-deep); border-color:transparent }
.tswitch[aria-checked="true"] .tswitch-knob{ transform:translateX(22px) }
/* Both glyphs live in the track; the one the knob is not covering is the one you read. */
.tswitch-ico{ position:absolute; top:50%; translate:0 -50%; display:grid; place-items:center;
  width:16px; height:16px; transition:opacity var(--t-base) var(--ease) }
.tswitch-ico svg{ width:13px; height:13px; stroke-width:2 }
.tswitch-ico.sun{ left:7px; color:var(--teal-deep) }
.tswitch-ico.moon{ right:7px; color:var(--cream) }
.tswitch[aria-checked="true"] .tswitch-ico.sun{ opacity:0 }
.tswitch[aria-checked="false"] .tswitch-ico.moon{ opacity:0 }
.tswitch:focus-visible{ outline:3px solid var(--sky); outline-offset:3px; border-radius:999px }
@media (prefers-reduced-motion:reduce){ .tswitch-track,.tswitch-knob,.tswitch-ico{ transition:none } }

/* Coverage, stated above the search rather than buried on another page. */
.live-pill{ display:inline-flex; align-items:center; gap:9px; margin:0 0 16px;
  padding:8px 16px 8px 14px; border-radius:999px; font-size:.86rem; font-weight:600;
  color:var(--cream); background:rgba(18,16,13,.44); border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); text-decoration:none;
  transition:background var(--t-base) var(--ease), border-color var(--t-base) var(--ease) }
.live-pill:hover{ background:rgba(18,16,13,.6); border-color:rgba(255,255,255,.28); text-decoration:none }
.live-pill svg{ width:14px; height:14px; opacity:.85 }
.live-dot{ width:8px; height:8px; border-radius:50%; background:#5FD3A0; flex:none;
  box-shadow:0 0 0 3px rgba(95,211,160,.22) }
@media (prefers-reduced-motion:no-preference){
  .live-dot{ animation:live-breathe 2.8s ease-in-out infinite }
  @keyframes live-breathe{ 0%,100%{ box-shadow:0 0 0 3px rgba(95,211,160,.22) }
                           50%{ box-shadow:0 0 0 5px rgba(95,211,160,.10) } }
}

/* ==========================================================================
   Hero search, to the reference: three labelled fields on one cream pill,
   thin rules between them, and a red action on the end.
   ========================================================================== */
.hero-search .search{ max-width:min(1020px,100%) !important; width:100%; gap:0 !important;
  padding:8px 8px 8px 8px !important; border-radius:999px !important }
.hero-search .search .sf{ position:relative; padding:6px 20px !important; gap:1px !important;
  justify-content:center; min-height:52px }
/* Hairlines between fields, drawn on the field rather than as borders, so the ends stay clean. */
.hero-search .search .sf + .sf::before{ content:''; position:absolute; left:0; top:50%; translate:0 -50%;
  width:1px; height:30px; background:rgba(40,30,20,.16) }
.hero-search .search .sf label{ display:block !important; font-size:.64rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:#6B6455 }
.hero-search .search .sf select,
.hero-search .search .combo .input{ font-size:1rem !important; font-weight:600 !important;
  min-height:26px !important; color:#1A1917 !important; padding:0 !important }
.hero-search .search .combo .input::placeholder{ font-weight:500 }
/* The three fields carry different amounts of text, so they get different shares rather than thirds.
   Equal thirds truncated "City or country" and "Any activity" to "City or cou" and "Any act". */
.hero-search .search .sf:first-child{ flex:1.5 1 0; min-width:170px }
.hero-search .search .sf:nth-child(2){ flex:1.15 1 0; min-width:140px }
.hero-search .search .sf:nth-child(3){ flex:1 1 0; min-width:130px }
/* The one saturated element on the page, and the only thing here that is meant to be pressed. */
.hero-search .search .btn-primary{ flex:0 0 auto; gap:9px; padding:0 24px; min-height:52px;
  border-radius:999px !important; font-size:.98rem; font-weight:700;
  /* Gold, not the old brand red. Red has retired to danger - SOS, "I feel unsafe", errors - so that when
     something on this product is red it means stop rather than press. That left this button needing a
     colour, and the mark it now matches is the obvious one: on a dark hero, gold against near-black ink
     is the highest-contrast pairing the palette has, and it is the only saturated thing on the page. */
  background:#C9A063 !important; color:#17130C !important; border:0 !important; box-shadow:none !important }
.hero-search .search .btn-primary:hover{ background:#D9B97F !important }
.hero-search .search .btn-primary svg{ width:17px; height:17px; margin-left:0 }
@media (max-width:860px){
  .hero-search .search{ flex-wrap:wrap; border-radius:24px !important; padding:10px !important }
  .hero-search .search .sf{ flex:1 1 100% !important; padding:8px 12px !important }
  .hero-search .search .sf + .sf::before{ left:12px; right:12px; top:0; translate:0 0;
    width:auto; height:1px }
  .hero-search .search .btn-primary{ flex:1 1 100%; margin-top:6px }
}

/* The search bar sits inside .hero-copy, which is capped at 34rem so the paragraphs keep a readable
   measure. At that width the three fields and the button cannot fit, so the button was overflowing the
   cream pill and the two selects were being clipped mid-word. The bar takes its own width instead: wider
   than the text column, and short of the floating card on the right. */
.hero-search{ width:min(860px, calc(100vw - var(--pad) * 2 - 400px)); max-width:none }
.hero-search .search{ max-width:none !important; flex-wrap:nowrap !important }
/* Let each field size to the text it holds, so "Any activity" and "1.5 hours" are never cut in half. */
.hero-search .search .sf{ flex:0 1 auto !important; min-width:0 }
.hero-search .search .sf:first-child{ flex:1 1 auto !important; min-width:150px }
.hero-search .search .sf select{ width:auto !important; max-width:100%; padding-right:2px !important }
.hero-search .search .btn-primary{ margin-left:auto }
@media (max-width:1180px){ .hero-search{ width:min(740px, calc(100vw - var(--pad) * 2)) } }
@media (max-width:860px){ .hero-search{ width:100% } .hero-search .search{ flex-wrap:wrap !important } }

/* Search bar, matched to the live design you sent: no rules between the fields, generous even spacing,
   the chevron set apart from its value, a softly rounded plate rather than a capsule, and a rounded
   rectangle for the action. */
.hero-search .search{ padding:10px 10px 10px 6px !important;
  gap:0 !important; box-shadow:0 18px 46px -26px rgba(40,28,14,.45) }
/* The hairlines go: the reference separates the fields with space, not lines. */
.hero-search .search .sf + .sf::before{ display:none }
.hero-search .search .sf{ padding:8px 26px !important; min-height:56px }
.hero-search .search .sf label{ font-size:.68rem; letter-spacing:.11em; color:#6E6758; margin-bottom:3px }  /* 4.49:1 was a hair under the 4.5 small text needs */
.hero-search .search .sf select,
.hero-search .search .combo .input{ font-size:1.06rem !important; font-weight:600 !important;
  letter-spacing:-.005em; min-height:28px !important }
.hero-search .search .combo .input::placeholder{ color:#A79C8B !important; font-weight:500 }
/* Room between the value and the chevron, so the two read as label and control rather than one blur. */
.hero-search .search .sf select{ padding-right:22px !important; text-overflow:clip }
/* The button is a pill inside a pill. At 12px it was a rounded rectangle sitting in a round bar, which
   is the one place a square corner is impossible to miss. */
.hero-search .search .btn-primary{ border-radius:999px !important; min-height:52px; padding:0 24px;
  margin-left:8px; box-shadow:none !important }

@media (max-width:860px){
  .hero-search .search{ border-radius:22px !important; padding:10px !important }
  .hero-search .search .sf{ padding:8px 14px !important }
  .hero-search .search .btn-primary{ margin-left:0 }
}

/* WHAT and HOW LONG size to their own content and never shrink below it; WHERE takes whatever is left.
   With all three sharing the slack, "1.5 hours" was being squeezed to "1.5 ho" while "Any activity" sat
   with a wide gap before its chevron. */
.hero-search .search .sf:nth-child(2),
.hero-search .search .sf:nth-child(3){ flex:0 0 auto !important; min-width:max-content !important }
.hero-search .search .sf:first-child{ flex:1 1 auto !important; min-width:140px !important }
.hero-search .search .sf select{ width:max-content !important; max-width:none }

/* max-content on a <select> sizes it to the LONGEST option, not the selected one, which is why WHAT
   stretched to the width of "Career-experience conversation" and left a gulf before its chevron. Fixed
   widths sized for the values people actually see, and WHERE takes the remaining space. */
.hero-search{ width:min(900px, calc(100vw - var(--pad) * 2 - 380px)) }
.hero-search .search .sf:first-child{ flex:1 1 auto !important; min-width:170px !important }
.hero-search .search .sf:nth-child(2){ flex:0 0 172px !important; min-width:0 !important }
.hero-search .search .sf:nth-child(3){ flex:0 0 132px !important; min-width:0 !important }
.hero-search .search .sf select{ width:100% !important; max-width:100%; padding-right:20px !important }
.hero-search .search .sf{ padding:8px 22px !important }
.hero-search .search .btn-primary{ flex:0 0 auto !important; margin-left:6px }
@media (max-width:1180px){ .hero-search{ width:min(760px, calc(100vw - var(--pad) * 2)) } }
@media (max-width:860px){ .hero-search{ width:100% } }

/* Measured, not guessed: at 1.06rem "Any activity" needs about 118px and "1.5 hours" about 88px, plus
   room for the chevron and the field's own padding. These widths give each of them that. */
.hero-search .search .sf{ padding:8px 18px !important }
.hero-search .search .sf:nth-child(2){ flex:0 0 200px !important }
.hero-search .search .sf:nth-child(3){ flex:0 0 152px !important }
.hero-search .search .sf:first-child{ flex:1 1 auto !important; min-width:160px !important }

/* ==========================================================================
   Search bar on a phone, to the live design: the row becomes a white card
   holding three stacked fields on their own grey plates, and the action runs
   the full width underneath.
   ========================================================================== */
@media (max-width:860px){
  .hero-search{ width:100% !important }
  .hero-search .search{ display:flex !important; flex-direction:column; flex-wrap:nowrap !important;
    gap:8px !important; padding:8px !important; border-radius:20px !important;
    background:var(--ivory-3, #FBF7F0) !important;
    box-shadow:0 20px 50px -28px rgba(30,20,10,.55) }
  /* Each field is its own plate, which is what makes the stack readable at arm's length. */
  .hero-search .search .sf{ flex:0 0 auto !important; width:100%; min-width:0 !important;
    background:rgba(40,30,20,.045) !important; border-radius:14px !important;
    padding:12px 18px !important; min-height:70px; justify-content:center }
  .hero-search .search .sf label{ font-size:.72rem; letter-spacing:.08em; color:#6B6455; margin-bottom:2px }
  .hero-search .search .sf select,
  .hero-search .search .combo .input{ font-size:1.2rem !important; font-weight:500 !important;
    width:100% !important; padding-right:0 !important; min-height:30px !important }
  /* The chevron belongs at the right edge of the field on a phone, not beside the word. */
  .hero-search .search .sf select{ appearance:none; -webkit-appearance:none;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1C1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 9l4-4 4 4M8 15l4 4 4-4'/></svg>") no-repeat right center / 18px 18px;
    padding-right:26px !important }
  .hero-search .search .btn-primary{ width:100%; margin:0 !important; min-height:62px;
    border-radius:14px !important; font-size:1.05rem }
}

/* In a column flex container flex-basis is the HEIGHT, so the desktop rules that give WHAT and HOW LONG
   their widths (flex:0 0 200px) were making them 200px TALL once the bar stacked on a phone. The widths
   belong to the row layout only. */
@media (max-width:860px){
  .hero-search .search .sf,
  .hero-search .search .sf:first-child,
  .hero-search .search .sf:nth-child(2),
  .hero-search .search .sf:nth-child(3){ flex:0 0 auto !important; width:100% !important;
    min-width:0 !important; height:auto !important; min-height:68px !important }
}

/* Two hero frames stacked; the one carrying .is-on is the one you see. */
#heroBg,#closeBg{ position:absolute; inset:0 }
#heroBg .hb,#closeBg .hb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1400ms cubic-bezier(.4,0,.2,1) }
#heroBg .hb.is-on,#closeBg .hb.is-on{ opacity:1 }
@media (prefers-reduced-motion:reduce){ #heroBg .hb,#closeBg .hb{ transition:none } }

/* The story band had no vertical padding at all while every other band carries ~100px, so its four
   panels butted straight against the sections above and below. Same rhythm as its neighbours. */
.story{ padding-block:clamp(56px,7vw,100px) }
@media (max-width:860px){ .story{ padding-block:clamp(40px,8vw,64px) } }

/* Scaled down: the bar was reading as a panel rather than a control. Roughly three quarters of the
   previous size, which is where the live design sits. */
.hero-search{ width:min(760px, calc(100vw - var(--pad) * 2 - 380px)) }
/* A pill, not a rounded panel. At 20px the bar read as a card dropped on the photograph; taken to the
   full radius it reads as one control, which is what it is.
   The guard under it is not optional. Below 860px the bar wraps its three fields into a stacked column,
   and a 999px radius on a block that tall is not a pill at all - the corners meet in the middle and the
   whole thing renders as an ellipse with the fields sticking out of it. Same radius, same rule, entirely
   different shape, purely because of the box it is on. It goes back to a rounded panel the moment the bar
   stops being one line. */
.hero-search .search{ border-radius:999px !important; padding:6px 6px 6px 4px !important }
@media (max-width:860px){ .hero-search .search{ border-radius:24px !important } }
.hero-search .search .sf{ padding:6px 16px !important; min-height:46px }
.hero-search .search .sf label{ font-size:.6rem !important; letter-spacing:.1em; margin-bottom:1px }
.hero-search .search .sf select,
.hero-search .search .combo .input{ font-size:.94rem !important; min-height:22px !important }
.hero-search .search .sf:nth-child(2){ flex:0 0 168px !important }
.hero-search .search .sf:nth-child(3){ flex:0 0 128px !important }
.hero-search .search .sf:first-child{ min-width:140px !important }
.hero-search .search .btn-primary{ min-height:46px; padding:0 20px; font-size:.92rem;
  border-radius:999px !important; margin-left:4px }
.hero-search .search .btn-primary svg{ width:15px; height:15px }
@media (max-width:1180px){ .hero-search{ width:min(660px, calc(100vw - var(--pad) * 2)) } }
@media (max-width:860px){
  .hero-search{ width:100% }
  .hero-search .search .sf{ min-height:60px !important; padding:9px 16px !important }
  .hero-search .search .sf label{ font-size:.66rem !important }
  .hero-search .search .sf select,
  .hero-search .search .combo .input{ font-size:1.05rem !important }
  .hero-search .search .btn-primary{ min-height:54px; font-size:1rem }
}

/* The hero's right column: the handwritten line stays at the top, the pill and the search sit at the
   bottom, both aligned to the right edge of the grid the way the live design has them. */
.hero-side{ display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end;
  height:100%; min-height:0; gap:24px }
.hero-actions{ display:flex; flex-direction:column; align-items:flex-end; gap:12px; width:100%;
  max-width:760px; margin-left:auto }
.hero-actions .live-pill{ margin:0 }
.hero-actions .hero-search{ width:100% }
/* In the right column the bar has the whole column, so it no longer needs to reserve room for the card. */
.hero-side .hero-search{ width:100% !important }
@media (max-width:1180px){ .hero-actions{ max-width:640px } }
@media (max-width:900px){
  .hero-side{ align-items:stretch; justify-content:flex-start; height:auto; gap:18px }
  .hero-actions{ align-items:stretch; max-width:none; margin-left:0 }
  .hero-side .cine-script{ display:none }
}

/* The bar takes the theme rather than being pinned cream: on the live design it is a dark translucent
   plate with cream type in dark mode and a cream plate with dark type in light. Every colour here was a
   literal, which is why it stayed cream-on-cream whichever theme you were in. */
.hero-search .search{ background:var(--glass-strong) !important;
  border:1px solid var(--border) !important; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px) }
.hero-search .search .sf label{ color:var(--text-3) !important }
.hero-search .search .sf select,
.hero-search .search .combo .input{ color:var(--text) !important }
.hero-search .search .combo .input::placeholder{ color:var(--text-3) !important }
.hero-search .search .sf select{ background-image:none }
@media (max-width:860px){
  .hero-search .search{ background:var(--panel) !important }
  .hero-search .search .sf{ background:var(--glass-tint) !important }
}

/* ==========================================================================
   Floating glass header
   The bar was pinned edge to edge with a hairline under it. It floats now:
   inset from the edges, rounded, blurred, sitting on the page rather than
   ruling a line across it, with the actions as pills on the glass.
   ========================================================================== */
.nav{ top:0; padding:10px clamp(10px,2vw,20px) 0 }
.nav .bar{ max-width:var(--maxw); margin:0 auto; border-radius:18px;
  border:1px solid var(--edge-2); background:var(--glass-strong);
  -webkit-backdrop-filter:blur(var(--blur-nav)) saturate(1.15);
  backdrop-filter:blur(var(--blur-nav)) saturate(1.15);
  box-shadow:0 1px 2px rgba(60,45,30,.05), 0 18px 44px -30px rgba(60,45,30,.5);
  padding:0 10px 0 16px; border-bottom:0 }
/* Over the hero photograph the glass is darker so the cream type holds; the shape does not change. */
.nav.over-dark .bar{ background:rgba(20,17,13,.34) !important; border-color:rgba(255,255,255,.16) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.1) !important; backdrop-filter:blur(18px) saturate(1.1) !important;
  box-shadow:0 20px 50px -34px rgba(0,0,0,.7) !important }
.nav.scrolled .bar{ background:var(--glass-strong) !important;
  box-shadow:0 1px 2px rgba(60,45,30,.06), 0 22px 54px -32px rgba(60,45,30,.55) !important }
.nav.over-dark.scrolled .bar{ background:rgba(20,17,13,.5) !important }
/* The actions read as pills on the glass rather than as text in a strip. */
.nav .bar .btn-ghost{ border-radius:999px; padding:0 14px; min-height:36px }
.nav .bar .nav-signup{ border-radius:999px; padding:0 18px; min-height:36px; font-weight:650 }
.nav .bar .icon-btn{ border-radius:999px }
.nav .bar .links a{ border-radius:999px; padding:8px 12px }
/* A pill, not a rounded box. The bar floats over the page with air on all four sides, and at a 16px
   radius that reads as a panel that has come loose; taken to the full radius it reads as one object,
   which is what it is. The safe-area inset stays inside it, so on a notched phone the pill grows
   downward rather than sliding under the status bar. */
.nav .bar{ border-radius:999px }
@media (max-width:767px){
  .nav{ padding:8px 10px 0 }
  .nav .bar{ border-radius:999px; padding:0 10px 0 14px;
    height:calc(var(--nav-h) + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top) }
}

/* The right column has to fill the hero's height before space-between means anything; without that the
   search sat directly under the handwritten line at the top of the column instead of at the bottom. */
.hero-grid{ align-items:stretch }
.hero-side{ align-self:stretch; justify-content:flex-end; height:auto }
.hero-side .cine-script{ margin-bottom:auto }
.hero-actions{ margin-top:auto }
@media (max-width:900px){ .hero-side{ align-self:auto } .hero-actions{ margin-top:0 } }

/* Clear the hero's bottom edge and the scroll cue: the bar was sitting on the seam and colliding with
   "Scroll to meet the city". */
.hero-actions{ padding-bottom:clamp(56px,7vw,96px) }
/* The "More than a trip" card occupied the same bottom-right corner the search now uses. It duplicated
   the country count that the pill above the search already states, so it goes rather than being moved. */
.hero-card{ display:none !important }
@media (max-width:900px){ .hero-actions{ padding-bottom:24px } }

/* In the narrower right-hand column the duration field was a few pixels short and clipped "1.5 hours"
   back to "1.5 hour". Measured: the value needs 66px, the field now gives it 88. */
.hero-search .search .sf:nth-child(2){ flex:0 0 176px !important }
.hero-search .search .sf:nth-child(3){ flex:0 0 144px !important }
.hero-search .search .sf:first-child{ min-width:120px !important }

/* The bar floats now, so it needs its 10px inset counted as well as its height, and it needs air under it
   rather than the headline starting the moment the glass ends. Switching the grid to align-items:stretch
   for the right-hand column also stopped the copy centring itself, so it takes that back explicitly. */
.hero-grid{ padding-top:calc(var(--nav-h,72px) + 62px) }
.hero-copy{ align-self:center }
@media (max-width:900px){ .hero-grid{ padding-top:calc(var(--nav-h,72px) + 44px) } }

/* The safety panels are given a fixed aspect ratio so the eight of them read as one grid, but their
   content was top-aligned inside it, which left a third of each card empty below the label. Centre the
   content in the box, and bring the box closer to the content's own height. */
.safety-band.safety-ref .safe{ display:flex !important; flex-direction:column; justify-content:center;
  align-items:center; aspect-ratio:1/.72 }
.safety-band.safety-ref .safe-row{ justify-content:center; width:100%; margin:0 }
@media (max-width:1100px){ .safety-band.safety-ref .safe{ aspect-ratio:1/.6 } }
@media (max-width:640px){ .safety-band.safety-ref .safe{ aspect-ratio:auto; min-height:120px } }

/* ---------- App mode (installed app: Play build or home screen) ----------
   The app opens into Explore with the tab bar. The marketing header links, the Log in button and the
   footer belong to the website, not the app; the tab bar carries Log in instead. */
.app-mode .nav .links, .app-mode .nav .nav-login{ display:none !important }
.app-mode footer.foot{ display:none }
.app-mode .atmos{ display:none }

/* ---------- Phone browser = app ----------
   The site is the app on a phone, so it has to behave like one rather than like a page: no rubber-band
   past the ends, no blue flash on every tap, no long-press menu on the furniture, and nothing selectable
   that is not text somebody would want to copy. Content stays selectable; only the chrome is locked. */
html.app-mode, html.app-mode body{ overscroll-behavior-y:none; -webkit-text-size-adjust:100% }
.app-mode button, .app-mode a, .app-mode input, .app-mode select, .app-mode textarea{ -webkit-tap-highlight-color:transparent }
.app-mode .app-top, .app-mode .app-cats, .app-mode .tabs, .app-mode .app-sec-head, .app-mode .app-card-body,
.app-mode .app-city-name, .app-mode .app-city-hood{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none }
/* Anything typed into is 16px or iOS zooms the whole page on focus and never zooms back. */
@media (max-width:820px){ .app-mode input, .app-mode select, .app-mode textarea{ font-size:16px } }

/* The tab bar covers the foot of every page it is up on, not only the ones written with `has-tabs`. */
body.tabs-on .page{ padding-bottom:calc(var(--s-8) + 76px + env(safe-area-inset-bottom)) }
/* Pages that kept the site header in app mode were still leaving desktop-sized air under it. On a phone
   that is a third of the first screen spent on nothing. */
@media (max-width:820px){ .app-mode:not(.has-apptop) .page{ padding-top:calc(var(--nav-h,56px) + 22px) } }
@media (max-width:1023px){
  .app-mode .page.has-tabs{ padding-bottom:calc(var(--s-8) + 76px + env(safe-area-inset-bottom)) }
  .app-mode .tabs:not(.hidden){ display:flex }
}
/* Wide screens get the tab bar too when there is no other navigation. */
@media (min-width:1024px){ .app-mode .tabs:not(.hidden){ display:flex; left:50%; right:auto; transform:translateX(-50%); min-width:420px } }

/* ---------- App Explore (installed app) ----------
   Timefolk's own shape for a phone app: an editorial top (serif greeting + city line), text tabs with a
   hairline underline, portrait rails with the host's name set in the serif, city tiles until a city is
   known. No website header, no footer, no white pill. */
.app-mode.has-apptop .nav{ display:none !important }
/* Everywhere else in app mode the header stays, stripped to the mark, the bell and the menu. A
   policy page or a host profile with neither header nor tab bar was a dead end. */
.app-mode .app-page{ padding-top:0 }
.app-top{ position:sticky; top:0; z-index:60; padding:calc(14px + env(safe-area-inset-top)) var(--pad) 0; background:var(--bg) }
.app-top-row{ display:flex; align-items:center; gap:2px; margin:0 -8px 2px 0 }
.app-top-row .spacer{ flex:1 }
.app-kicker{ margin:0 0 2px; font-size:.82rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3) }
/* The mark sits with the greeting rather than on a line of its own. An app opened from a home screen has
   no address bar and no tab title, so without it there is nothing on screen saying whose app this is. */
.app-brand{ display:inline-flex; align-items:center; flex:none; margin-right:9px; color:var(--brand, currentColor) }
.app-brand svg{ width:24px; height:24px; display:block }
.app-ib{ position:relative; width:40px; height:40px; border:0; border-radius:50%; background:none; color:var(--text); display:grid; place-items:center; cursor:pointer }
.app-ib svg{ width:22px; height:22px }
.app-ib.sos{ color:var(--error, #D12E3C) }
.app-ib .bell-dot{ position:absolute; top:4px; right:4px }
.app-mode body > #mmenu.mmenu{ max-height:calc(100dvh - 120px) }
.app-search{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; width:100%; padding:2px 0 12px; border:0; border-bottom:1px solid var(--border); background:none; color:var(--text); text-align:left; cursor:pointer }
.app-search-q{ font-family:var(--serif); font-size:clamp(2.1rem, 9.4vw, 2.7rem); line-height:1; letter-spacing:-.015em }
.app-search-q em{ font-style:italic; color:var(--teal-deep) }
.app-search-ico{ flex:none; width:44px; height:44px; border-radius:50%; background:var(--text); color:var(--bg); display:grid; place-items:center; margin-bottom:2px }
.app-search-ico svg{ width:20px; height:20px }
.app-search-panel{ margin-top:12px; padding:12px; border:1px solid var(--border); border-radius:var(--r-l); background:var(--panel); display:grid; gap:10px }
.app-locate{ display:inline-flex; align-items:center; gap:8px; border:0; background:none; color:var(--teal-deep); font-weight:600; font-size:.9rem; padding:6px 2px; cursor:pointer }
.app-locate svg{ width:16px; height:16px }
.app-cats{ display:flex; gap:22px; margin:0 calc(-1 * var(--pad)); padding:12px var(--pad) 0; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; border-bottom:1px solid var(--hair) }
.app-cats::-webkit-scrollbar{ display:none }
.app-cat{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; padding:6px 0 12px; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; background:none; color:var(--text-3); font-weight:600; font-size:.9rem; cursor:pointer; white-space:nowrap }
.app-cat svg{ width:16px; height:16px; opacity:.8 }
.app-cat[aria-pressed="true"]{ color:var(--text); border-bottom-color:var(--text) }
.app-body{ padding:22px var(--pad) 0; display:grid; gap:34px }
.app-hint{ display:flex; gap:10px; align-items:flex-start; color:var(--text-2); font-size:.9rem; margin:0 }
.app-hint svg{ width:18px; height:18px; flex:none; margin-top:2px }
.app-sec{ display:grid; gap:14px }
.app-sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px }
.app-sec-head h2{ margin:0; font-family:var(--serif); font-weight:400; font-size:1.85rem; letter-spacing:-.015em; line-height:1.05 }
.app-sec-head p{ margin:4px 0 0; color:var(--text-2); font-size:.86rem }
.app-more{ flex:none; display:inline-flex; align-items:center; gap:6px; border:0; background:none; color:var(--text); font-weight:600; font-size:.86rem; padding:6px 0; cursor:pointer; border-bottom:1px solid var(--text) }
.app-more svg{ width:14px; height:14px }
.app-rail{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 calc(-1 * var(--pad)); padding:0 var(--pad) 6px; scrollbar-width:none }
.app-rail::-webkit-scrollbar{ display:none }
.app-card{ flex:0 0 min(58vw, 224px); scroll-snap-align:start; position:relative }
.app-card-media{ display:block; width:100%; aspect-ratio:4/5; border:0; padding:0; border-radius:var(--r-l); overflow:hidden; background:var(--ph-bg); cursor:pointer; position:relative }
.app-card-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 52%, rgba(0,0,0,.58)); pointer-events:none }
.app-card-media img{ width:100%; height:100%; object-fit:cover; display:block }
.app-shots{ position:absolute; inset:0; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch }
.app-shots::-webkit-scrollbar{ display:none }
.app-shots img{ flex:0 0 100%; scroll-snap-align:start }
.app-shot-dots{ position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:center; gap:5px; z-index:1; pointer-events:none }
.app-shot-dots i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.45) }
.app-shot-dots i.on{ background:#fff }
.app-badge{ position:absolute; left:10px; top:10px; display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border-radius:var(--r-pill); background:rgba(251,247,240,.94); color:#1B1C1A; font-size:.72rem; font-weight:700; z-index:1 }
.app-badge svg{ width:12px; height:12px }
.app-card-save{ position:absolute; right:10px; top:10px; width:34px; height:34px; border:0; border-radius:50%; background:rgba(0,0,0,.26); color:#fff; display:grid; place-items:center; cursor:pointer; z-index:1 }
.app-card-save svg{ width:18px; height:18px }
.app-card-save[aria-pressed="true"]{ color:#B98D4F }
.app-card-name{ position:absolute; left:14px; right:14px; bottom:14px; z-index:1; text-align:left; color:#F7F6F3; font-family:var(--serif); font-size:1.45rem; line-height:1; letter-spacing:-.01em; pointer-events:none; text-shadow:0 1px 2px rgba(0,0,0,.25) }
.app-card-body{ padding:9px 2px 0; display:grid; gap:2px }
.app-card-act{ color:var(--text); font-size:.9rem; font-weight:600 } .app-card-act span{ color:var(--text-2); font-weight:500 }
.app-card-meta{ font-size:.88rem; color:var(--text-2); display:flex; align-items:center; gap:4px } .app-card-meta b{ color:var(--text) } .app-card-meta svg{ width:13px; height:13px }
.app-city-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.app-city-grid > :nth-child(3n+1){ grid-column:span 2; aspect-ratio:16/10 }
.app-city{ position:relative; aspect-ratio:4/5; border:0; padding:0; border-radius:var(--r-l); overflow:hidden; background:var(--ph-bg); cursor:pointer; text-align:left; color:#F7F6F3 }
.app-city img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.app-city::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.62)) }
.app-city-name, .app-city-hood{ position:absolute; left:0; z-index:1; display:block; padding:0 14px }
.app-city-name{ bottom:32px; font-family:var(--serif); font-size:1.7rem; line-height:1; letter-spacing:-.01em }
.app-city-hood{ bottom:13px; font-size:.78rem; opacity:.85 }
@media (min-width:640px){ .app-city-grid{ grid-template-columns:repeat(4, 1fr) } .app-city-grid > :nth-child(3n+1){ grid-column:auto; aspect-ratio:4/5 } .app-card{ flex-basis:224px } }
@media (prefers-reduced-motion:no-preference){ .app-card-media, .app-city{ transition:transform 200ms var(--e-out, ease-out) } .app-card-media:active, .app-city:active{ transform:scale(.97) } }

/* ==========================================================================
   Mobile search bar — LAST WORD.
   This block must stay at the end of the file. The desktop rules above give the
   fields their widths with flex-basis, and in the stacked (column) layout on a
   phone flex-basis is the HEIGHT, so every one of those rules comes back as a
   400px tall field. I have fixed this twice already and a later append undid it
   both times. Anything new for the desktop bar goes ABOVE this block.
   ========================================================================== */
@media (max-width:860px){
  .hero-search .search .sf,
  .hero-search .search .sf:first-child,
  .hero-search .search .sf:nth-child(2),
  .hero-search .search .sf:nth-child(3){
    flex:0 0 auto !important; width:100% !important; min-width:0 !important;
    height:auto !important; min-height:64px !important; padding:10px 16px !important }
  .hero-search .search .sf label{ font-size:.66rem !important }
  .hero-search .search .sf select,
  .hero-search .search .combo .input{ font-size:1.05rem !important; width:100% !important }
  .hero-search .search .btn-primary{ width:100%; min-height:56px; margin:0 !important; font-size:1rem }
}

/* The host banner's third column held one decorative line of script over a large empty panel, which on a
   phone became a whole dark screen of nothing. It is gone, and the banner reads as one card: photograph
   on the left, the ask on the right, nothing else. */
.hostb-script{ display:none !important }
.hostb{ align-items:stretch; overflow:hidden; border-radius:var(--r-xl) }
.hostb-photo{ height:100%; min-height:280px }
.hostb-photo img{ width:100%; height:100%; object-fit:cover }
.hostb-copy{ display:flex; flex-direction:column; justify-content:center;
  padding:clamp(28px,4vw,56px) clamp(24px,3.5vw,52px) }
@media (max-width:860px){
  .hostb{ grid-template-columns:1fr !important }
  .hostb-photo{ min-height:200px; aspect-ratio:16/10 }
  .hostb-copy{ padding:26px 22px 30px }
}

/* Making .hostb-copy a flex column left its default align-items:stretch in place, so the button grew to
   the full width of the column. It sizes to its own label now. */
.hostb-copy{ align-items:flex-start }
.hostb-cta{ width:auto; align-self:flex-start; padding:0 22px }
@media (max-width:860px){ .hostb-copy{ align-items:flex-start } }

/* Two join cards where one tall banner used to be. The single card ran the height of a 520px portrait
   with the copy floating in the middle of it; these are half that, photograph on top, copy beneath. */
.joinb{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,2vw,24px) }
.joinc{ display:flex; flex-direction:column; overflow:hidden; border-radius:var(--r-xl);
  background:var(--char-2, #161716); border:1px solid rgba(255,255,255,.08) }
.joinc-photo{ aspect-ratio:16/7; overflow:hidden; background:var(--ph-bg) }
.joinc-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 32% }
.joinc-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  padding:clamp(20px,2.4vw,30px) clamp(20px,2.4vw,30px) clamp(22px,2.6vw,30px) }
.joinc-copy .eyebrow{ color:rgba(233,214,182,.86) }
.joinc-copy h2{ margin:0; font-size:clamp(1.35rem,2.1vw,1.8rem); color:#F7F1E6 }
.joinc-copy p{ margin:0 0 6px; font-size:.92rem; line-height:1.55; color:rgba(240,231,216,.74); max-width:40ch }
.joinc .hostb-cta{ width:auto; align-self:flex-start; padding:0 20px; min-height:44px }
@media (max-width:860px){
  .joinb{ grid-template-columns:1fr }
  .joinc-photo{ aspect-ratio:16/6 }
}

/* Half the height the single banner had: a shallower photograph and tighter copy, so the pair together
   is no taller than the one card was. */
.joinc-photo{ aspect-ratio:16/5 }
.joinc-copy{ gap:6px; padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,26px) clamp(18px,2vw,24px) }
.joinc-copy h2{ font-size:clamp(1.2rem,1.7vw,1.5rem) }
.joinc-copy p{ font-size:.88rem; line-height:1.5; max-width:44ch }
.joinc .hostb-cta{ min-height:40px; padding:0 18px; font-size:.9rem }
@media (max-width:860px){ .joinc-photo{ aspect-ratio:16/5.5 } }

/* Photograph beside the copy rather than above it. Stacked, each card was still 441px tall because the
   picture and the text each needed their own band of height; side by side they share one. */
.joinc{ flex-direction:row; align-items:stretch }
.joinc-photo{ flex:0 0 38%; aspect-ratio:auto; min-height:100% }
.joinc-photo img{ height:100%; object-position:50% 28% }
.joinc-copy{ flex:1 1 auto; justify-content:center;
  padding:clamp(18px,2vw,26px) clamp(18px,2vw,26px) }
@media (max-width:860px){
  .joinc{ flex-direction:row }
  .joinc-photo{ flex:0 0 34% }
}
@media (max-width:520px){
  .joinc{ flex-direction:column }
  .joinc-photo{ flex:none; aspect-ratio:16/6; min-height:0 }
}

/* Log in is the bar's only action now, so it reads as one rather than as the quiet half of a pair. */
.nav .bar .nav-login{ border-radius:999px; padding:0 16px; min-height:36px; font-weight:600 }
.nav:not(.over-dark) .bar .nav-login{ border:1px solid var(--border) }
.nav.over-dark .bar .nav-login{ border:1px solid rgba(255,255,255,.22); color:#F7F1E6 }

/* The handwritten line is gone from the hero: it sat in the same corner as the floating notes and the
   two of them read as clutter over one photograph. The notes carry that voice now. */
.cine.hero-ref .cine-script{ display:none !important }

/* ==========================================================================
   Profile header, organised the way a profile header is normally organised:
   picture on the left, and to the right of it the name, then the numbers.
   The description and the buttons run full width underneath.

   What it was doing instead: the picture sat centred in a 186px column with
   the name centred against it, the status pill wrapped onto its own line, the
   description wrapped narrow beside the photo, and the numbers started under
   the picture rather than under the name. Four things, four different left
   edges. Now there are two.
   ========================================================================== */
.phead{
  grid-template-columns:auto minmax(0,1fr) !important;
  grid-template-areas:
    "avatar name"
    "avatar stats"
    "bio    bio"
    "actions actions" !important;
  gap:4px clamp(14px,2vw,20px) !important;
  align-items:center;
  padding-bottom:14px !important;
}
@media (min-width:900px){
  .phead{
    grid-template-columns:auto minmax(0,1fr) auto !important;
    grid-template-areas:
      "avatar name  actions"
      "avatar stats stats"
      "bio    bio   bio" !important;
    column-gap:22px !important;
  }
}

/* The admin console has no portrait, and so must have no column reserved for one.
   The block above sets its grid with `!important`, which quietly beat the `.no-avatar` rule further up
   the file: the picture was hidden but its column stayed, so the name sat one column in while the
   paragraph beneath it began at the true left edge. The two never lined up. Same weight here, so the
   column goes when the picture does. */
.phead.no-avatar{
  grid-template-columns:minmax(0,1fr) auto !important;
  grid-template-areas:
    "name  actions"
    "stats stats"
    "bio   bio" !important;
}
@media (min-width:900px){
  .phead.no-avatar{
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:
      "name  actions"
      "stats stats"
      "bio   bio" !important;
  }
}
/* Centred in its column, not pinned to its left edge. The column is as wide as the 186px menu below,
   and a 132px photo sitting hard against the left of it left a visibly bigger gap on the right than the
   left, which reads as a mistake rather than as alignment. Four rules used to set this and all four said
   `start`; they all say `center` now, so none of them can drift. */
.phead > .pavatar,
.phead > .pavatar-btn{ align-self:center !important; justify-self:center !important }
/* One place decides the size. It used to be set three times — once in the base rule, once for phones, and
   once again here, where the last one silently won and the other two read as the truth. At 92px the photo
   sat adrift in a column as wide as the 186px menu below it; this fills that column properly. */
.pavatar{ width:132px; height:132px }
@media (max-width:640px){ .pavatar{ width:84px; height:84px } }

/* Name and its badges on one line, at the size a name should be. */
.phead .phead-top{ align-self:end; gap:10px; row-gap:6px; margin-bottom:2px }
.phead .phead-top h2{ font-size:clamp(1.35rem,2.4vw,1.75rem); line-height:1.15 }
.phead .phead-top .status{ flex:none }

/* The numbers read as one row of three, evenly spaced, on the name's left edge. */
.phead .pstats{ align-self:start; gap:clamp(18px,4vw,34px) !important; row-gap:8px; margin-top:2px }
.pstat b{ font-size:1.05rem }
.pstat span{ white-space:nowrap }
/* On a phone five stats (host adds "Sessions hosted") will not fit as one nowrap row, and the labels
   overran into each other. A grid gives each stat its own cell that cannot overlap a neighbour, and the
   label is allowed to wrap inside it. Higher specificity than the nowrap rule above, so it wins. */
@media (max-width:600px){
  .phead .pstats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 10px !important; }
  .phead .pstat span{ white-space:normal; line-height:1.15 }
  .phead .pstat b{ font-size:1rem }
}

/* Description and buttons below, at full width, so neither is squeezed into a column. */
.phead .pbio{ grid-area:bio; margin-top:10px; max-width:62ch }
.phead .phead-actions{ grid-area:actions; justify-self:start !important; align-self:start;
  margin-top:12px; gap:8px }
@media (min-width:900px){
  .phead .phead-actions{ grid-area:actions; justify-self:end !important; margin-top:0 }
}
@media (max-width:640px){
  /* Wrap rather than squeeze. `nowrap` with `flex:1 1 0` split the row evenly between however many
     buttons there happened to be and let each label overflow its box: with three of them on a phone,
     "Preview your listing" needed 140px in a 137px box and lost its last letters. A `max-content` floor
     means a button is never narrower than its own words, so the row breaks to a second line instead. */
  .phead .phead-actions{ width:100%; flex-wrap:wrap }
  .phead .phead-actions .btn{ flex:1 1 auto; min-width:max-content; justify-content:center }
}

/* The photo rail drifts under script (driftShots), not CSS: it moves the scroll position so a swipe, the
   arrows and the dots keep working while it moves. Only the easing of that movement is set here. */
.host .portrait .shots{ scroll-behavior:auto }


/* ==========================================================================
   Profile header, second pass
   The four figures were sharing the narrow column beside the photograph, so on
   a phone they wrapped two-and-two. They get their own full-width row instead,
   at a smaller size, and stay on one line. The badges were sized like buttons
   next to a name; they are labels, so they read like labels now.
   ========================================================================== */
/* One row of four, full width, never wrapping. Scrolls rather than stacks if a
   label is ever long enough to need it. */
.phead .pstats{
  display:flex !important; flex-wrap:nowrap !important;
  gap:clamp(14px,4vw,30px) !important;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  padding-bottom:2px;
}
.phead .pstats::-webkit-scrollbar{ display:none }
.phead .pstat{ flex:0 0 auto; min-width:0 }
.phead .pstat b{ font-size:.98rem; line-height:1.2 }
.phead .pstat span{ font-size:.72rem; white-space:nowrap }

/* Badges are labels beside a name, not controls: smaller type, tighter box. */
.phead .phead-top .status{
  font-size:.7rem !important; padding:3px 9px !important; min-height:0 !important;
  border-radius:999px; gap:5px; font-weight:600;
}
.phead .phead-top .status svg{ width:12px !important; height:12px !important }

@media (max-width:860px){
  /* The figures move out of the column beside the photograph and take the full
     width, which is the only way four of them fit on one line on a phone. */
  .phead{
    grid-template-areas:
      "avatar name"
      "stats  stats"
      "bio    bio"
      "actions actions" !important;
    row-gap:10px !important;
  }
  .phead .pstats{ gap:0 !important; justify-content:space-between }
  .phead .pstat{ flex:1 1 0; text-align:left }
  .phead .pstat b{ font-size:.92rem }
  .phead .pstat span{ font-size:.68rem }
  .phead .phead-top{ align-self:center }
}

/* Each figure centred over its own label, and the three or four of them centred
   as a group. Left-aligned in equal-width cells they read as a row that had been
   pushed to one side rather than a row that was placed. */
.phead .pstats{ justify-content:center }
.phead .pstat{ flex:1 1 0; align-items:center; text-align:center }
.phead .pstat b,.phead .pstat span{ text-align:center }
@media (max-width:860px){
  .phead .pstats{ justify-content:space-between }
  .phead .pstat{ flex:1 1 0; align-items:center; text-align:center }
}

/* The listing status, as a dot. Green when the listing is live, amber when the host has paused it, grey
   when it is not published. It sits with the name rather than competing with it. */
.phead .pdot{ flex:none; width:9px; height:9px; border-radius:50%; display:inline-block;
  background:var(--text-3); box-shadow:0 0 0 3px rgba(0,0,0,.04) }
.phead .pdot.is-live{ background:#3FB27F; box-shadow:0 0 0 3px rgba(63,178,127,.18) }
.phead .pdot.is-paused{ background:#C99A3A; box-shadow:0 0 0 3px rgba(201,154,58,.18) }
@media (prefers-reduced-motion:no-preference){
  .phead .pdot.is-live{ animation:pdot-breathe 2.8s ease-in-out infinite }
  @keyframes pdot-breathe{ 0%,100%{ box-shadow:0 0 0 3px rgba(63,178,127,.18) }
                           50%{ box-shadow:0 0 0 6px rgba(63,178,127,.07) } }
}
/* Verified, smaller again: it is a mark of fact beside a name, not a control. */
.phead .phead-top .status{ font-size:.66rem !important; padding:2px 8px !important; gap:4px }
.phead .phead-top .status svg{ width:11px !important; height:11px !important }

/* ---------- The price ladder panel ---------- */
.ladder-now{ font-family:var(--serif,Georgia,serif); font-weight:400; font-size:clamp(1.7rem,3vw,2.3rem);
  line-height:1.1; letter-spacing:-.02em }
.ladder-now small{ font-size:.9rem; color:var(--text-2); font-family:var(--body); letter-spacing:0 }
.ladder-cap{ text-align:right; display:flex; flex-direction:column; gap:1px }
.ladder-cap b{ font-size:1.05rem; font-variant-numeric:tabular-nums }
.ladder-cap .tiny{ color:var(--text-3) }
/* How far along the earned range this price sits. Not a progress bar toward a goal; a position in a
   range the host already owns. */
.ladder-bar{ height:7px; border-radius:999px; background:var(--teal-soft); overflow:hidden; margin-top:6px }
.ladder-bar i{ display:block; height:100%; background:var(--teal-deep); border-radius:999px;
  transition:width var(--t-slow) var(--ease) }
.ladder-next{ margin:6px 0 0 }
.ladder-next b{ color:var(--text) }
.ladder-ready b{ color:var(--ok) }
.ladder-tip{ margin-top:10px; padding:12px 14px; border-radius:var(--r-m);
  background:var(--accent-soft); border:1px solid var(--border-tint) }
.ladder-tip b{ display:block; margin-bottom:2px }
.ladder-tip p{ margin:0; color:var(--text-2) }
@media (prefers-reduced-motion:reduce){ .ladder-bar i{ transition:none } }
/* A price that predates the ladder sits past the end of the bar. Marked rather than clipped, so it does
   not read as an error. */
.ladder-bar.is-over i{ background:repeating-linear-gradient(135deg,var(--teal-deep) 0 7px,var(--accent-2) 7px 14px) }

/* The page's bottom padding sat *below* the footer, where nothing can see it, while the content above ran
   straight into the footer's top edge with no gap at all. The space belongs between the two. */
/* Descendant, not child: some views wrap their footer one level deeper, and a child selector missed
   those entirely — /how-it-works still ran straight into it. */
main.page footer.foot{ margin-top:clamp(44px,6vw,80px) }
main.page:has(footer.foot){ padding-bottom:0 }
/* Safari before :has() keeps the old padding; the margin above still opens the gap that was missing. */

/* Appearance sits at the head of the menu, above a rule rather than below one. It is still a setting and
   not a destination, so the rule keeps it out of the list of places to go; putting it first just means
   the one control people open this menu to reach is the first thing under their thumb. */
html body #mmenu.mmenu .mm-theme{ display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin:0 0 4px; padding:4px 8px 14px; border-bottom:1px solid var(--hair); border-top:0 }
html body #mmenu.mmenu .mm-theme > span{ font-size:.93rem; font-weight:500; color:var(--text) }
html body #mmenu.mmenu .mm-theme .tswitch{ flex:none }
/* Dashboard sections read as a group like any other, so the menu has one rhythm rather than two. */
html body #mmenu.mmenu .mm-sections{ display:block }

/* ---------- Public Guardian directory ---------- */
.gdir .sec-head{ margin-bottom:clamp(20px,3vw,32px) }
/* A rail rather than a grid: it drifts by itself and can be swiped, like the city cards. */
.gcards{ display:flex; gap:clamp(12px,1.6vw,18px); overflow-x:auto; scroll-snap-type:x proximity;
  scrollbar-width:none; -ms-overflow-style:none; padding-bottom:4px }
.gcards::-webkit-scrollbar{ display:none }
.gcards > *{ flex:0 0 clamp(258px,23vw,296px); scroll-snap-align:start }
.gcards .gcard{ height:100% }
.gcard{ display:flex; flex-direction:column; gap:12px; padding:18px 18px 16px;
  border-radius:var(--r-l); background:var(--panel); border:1px solid var(--hair) }
.gcard-top{ display:flex; align-items:center; gap:12px }
.gcard-face{ width:64px; height:64px; border-radius:50%; object-fit:cover; flex:none; background:var(--ph-bg) }
.gcard-face-none{ display:grid; place-items:center; color:var(--text-3) }
.gcard-face-none svg{ width:22px; height:22px }
.gcard-id h3{ margin:0; font-size:1.02rem; line-height:1.2 }
.gcard-id .tiny{ color:var(--text-3); margin:2px 0 0 }
.gcard-checks{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px }
.gcard-checks li{ display:flex; align-items:center; gap:7px; font-size:.82rem; color:var(--text-3) }
.gcard-checks li.is-on{ color:var(--text-2) }
.gcard-checks svg{ width:13px; height:13px; flex:none }
.gcard-checks li.is-on svg{ color:var(--ok) }
/* No counts and no rate: this is not a list to choose from, and a figure to compare would say it was. */
.gcard-spec{ margin:3px 0 0; font-size:.82rem; color:var(--teal-deep); font-weight:600 }
.gcard-spec-none{ color:var(--text-3); font-weight:500 }
.gcard-about{ margin:0; font-size:.88rem; line-height:1.5; color:var(--text-2) }
.gcard-checks{ padding-top:11px; border-top:1px solid var(--hair) }
.gcard-langs,.gcard-rate{ margin:0; color:var(--text-3) }
@media (max-width:520px){ .gcards > *{ flex-basis:min(78vw,300px) } }

/* The gap above the footer exists so text does not run into it. A full-bleed dark band needs the
   opposite: the closing scene and the footer are both dark and meant to meet, and 80px of cream between
   them reads as a mistake rather than as breathing room. */
/* Matched at the same depth as the rule that adds the gap, or it loses to it on specificity. */
main.page .night-moment + footer.foot,
main.page .safety-band + footer.foot,
main.page .host-banner + footer.foot{ margin-top:0 }

/* Standing, on the card. The same ladder the Guardian sees on their own dashboard, so the badge a guest
   reads and the thing the Guardian is working toward are one and not two. */
.gtier{ display:inline-block; margin-left:8px; vertical-align:middle; font-size:.62rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border-radius:999px;
  background:var(--teal-soft); color:var(--teal-deep); white-space:nowrap }
.gtier-top{ background:var(--ok-soft); color:var(--ok) }
.gtier-new{ background:var(--glass-tint); color:var(--text-3) }
.gcard-id h3{ display:flex; align-items:center; flex-wrap:wrap; gap:2px }

/* The directory is a band in its own right and needs a band's rhythm. It was butting straight against the
   buttons above it with only 40px of its own padding, so the change of ground read as a seam rather than
   as a new section. */
/* .band sets margin with !important, so the space above has to be claimed the same way. */
main.page .gdir{ margin-top:clamp(32px,5vw,64px) !important; padding-block:clamp(48px,7vw,92px) !important }

/* ---------- Host search, and how far away a host is ---------- */
.hsearch{ position:relative; display:flex; align-items:center; margin-top:14px }
.hsearch input{ width:100%; padding:12px 40px 12px 40px; border-radius:999px;
  border:1px solid var(--border); background:var(--panel); color:var(--text); font-size:.98rem }
.hsearch input::placeholder{ color:var(--text-3) }
.hsearch input:focus-visible{ outline:3px solid var(--sky); outline-offset:2px }
.hsearch input::-webkit-search-cancel-button{ display:none }
.hsearch-ico{ position:absolute; left:14px; display:grid; place-items:center; color:var(--text-3); pointer-events:none }
.hsearch-ico svg{ width:16px; height:16px }
.hsearch-x{ position:absolute; right:10px; width:28px; height:28px; border:0; border-radius:50%;
  background:var(--glass-tint); color:var(--text-2); display:grid; place-items:center; cursor:pointer }
.hsearch-x svg{ width:14px; height:14px }
.hsearch-out{ margin-top:18px }

/* Distance is a coarse band, never a figure: both people are snapped to a ~2km cell and the answer is
   cached per day, so moving around and asking again cannot triangulate where a host lives. */
.hdist{ display:inline-flex; align-items:center; gap:6px; margin-top:6px; padding:4px 10px;
  border-radius:999px; background:var(--glass-tint); border:1px solid var(--hair);
  font-size:.78rem; font-weight:500; color:var(--text-2) }
.hdist svg{ width:13px; height:13px; color:var(--text-3); flex:none }

/* ---------- The check-in code, four boxes ----------
   One box per digit, because the code is heard rather than read: the boxes say how many digits are
   coming before you start, and show how far you got without you having to re-read what you typed. */
.field .label{ font-weight:600; font-size:.9rem; color:var(--text) }
/* Centred under the code it is answering. Each box caps at 76px, so without this the row of four sat
   hard against the left while the code being read out sat in the middle of the card. */
.otp{ display:flex; gap:10px; margin-bottom:6px; justify-content:center }
.otp-b{ flex:1 1 0; min-width:0; max-width:76px; aspect-ratio:1/1.15; padding:0; text-align:center;
  font-family:var(--mono); font-size:1.75rem; font-weight:700; color:var(--teal-deep);
  border:1px solid var(--border); border-radius:var(--r-m); background:var(--glass-tint);
  caret-color:var(--teal); transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease) }
.otp-b:focus{ outline:none; border-color:var(--teal); background:var(--glass-strong) }
.otp-b:focus-visible{ outline:3px solid var(--sky); outline-offset:2px }
.field.invalid .otp-b{ border-color:var(--error) }
/* Chrome draws stepper arrows on numeric inputs and they land right on the digit. */
.otp-b::-webkit-outer-spin-button,.otp-b::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }

/* ---------- Reviews: a face and a few chips ----------
   Nothing is typed, so nothing has to be moderated. The whole vocabulary is on screen. */
.rfaces{ display:flex; gap:6px; margin:2px 0 4px }
.rface{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:10px 4px 8px; cursor:pointer; border:1px solid transparent; border-radius:var(--r-m);
  background:transparent; color:var(--text-2);
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease) }
.rface-e{ font-size:1.6rem; line-height:1; filter:grayscale(1); opacity:.55;
  transition:filter var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease), transform var(--t-base) var(--ease) }
.rface-l{ font-size:.72rem; font-weight:500; text-align:center }
.rface:hover .rface-e{ filter:grayscale(.3); opacity:.85 }
.rface:active{ transform:scale(.97) }
.rface.on{ background:var(--teal-soft); border-color:var(--border-tint); color:var(--teal-deep) }
.rface.on .rface-e{ filter:none; opacity:1; transform:scale(1.12) }
.rface.on .rface-l{ font-weight:600 }

.rtags{ display:flex; flex-wrap:wrap; gap:8px }
.rtags-bad{ margin-top:2px; padding-top:12px; border-top:1px solid var(--hair) }
.rchip{ display:inline-flex; align-items:center; gap:6px; padding:7px 12px; cursor:pointer;
  border:1px solid var(--border); border-radius:var(--r-pill); background:transparent;
  font-size:.84rem; font-weight:500; line-height:1.25; color:var(--text-2);
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease) }
.rchip:hover{ border-color:var(--border-tint); color:var(--text) }
.rchip:active{ transform:scale(.97) }
.rchip.on{ background:var(--teal-soft); border-color:var(--teal); color:var(--teal-deep); font-weight:600 }
/* A critical tag is not a worse-looking version of a good one: it is a different kind of statement. */
.rchip.flag{ color:var(--error) }
.rchip.flag.on{ background:var(--error-soft); border-color:var(--error); color:var(--error) }

@media (prefers-reduced-motion:reduce){
  .rface,.rface-e,.rchip,.otp-b{ transition:none }
  .rface:active,.rchip:active{ transform:none }
  .rface.on .rface-e{ transform:none }
}

/* ---------- Guardian: sessions worked ----------
   The count sits under the checks rather than beside the name: it answers "has this person done this
   before", which is a different question from "who is this", and it should not read as a score. */
.gcard-done{ margin-top:10px; padding-top:10px; border-top:1px solid var(--hair);
  font-size:.82rem; color:var(--text-2) }
.gcard-done b{ font-family:var(--display); font-weight:700; font-size:1.02rem; color:var(--text) }


/* ---------- Profile header: the badges sit at the right edge ----------
   Verified and the status dot used to sit tight against the name, which read as part of it: a title
   with two ornaments. They are a state, not a name, so they belong at the far side of the row where
   the eye finds them after reading the name rather than through it. Pushing the name instead of
   pulling the badges keeps this working when the dot appears without the badge. */
.phead .phead-top{ flex-wrap:nowrap }
.phead .phead-top h2{ margin-right:auto; min-width:0 }
.phead .phead-top .status,
.phead .phead-top .pdot{ flex:none }
/* No wrapping at any width: wrapped, the badges drop to their own line and go back to the left, which
   is the arrangement being fixed. A long name wraps inside the heading instead, and the badges hold
   the right edge. */

/* ---------- Notifications ----------
   The toast was a stadium pill, which only works for two or three words. Anything longer wrapped inside
   a shape whose ends curve away from the text, so the second line sat in the rounded corner and the
   whole thing read as a squashed balloon rather than a message. A card with a modest radius holds any
   length, and a max width stops one long sentence spanning the screen. */
.toast{
  border-radius:14px !important;
  padding:13px 16px !important;
  max-width:min(420px, calc(100vw - 32px));
  width:max-content;
  text-align:left;
  line-height:1.45;
  letter-spacing:-.005em;
  box-shadow:0 2px 8px rgba(0,0,0,.14), 0 18px 44px -18px rgba(0,0,0,.42) !important;
}

/* ---------- Dashboard header on desktop: the Instagram arrangement ----------
   The mobile header is already right: avatar, name, one lane of numbers, bio. The desktop one took the
   same parts and let a 1fr column stretch them across the whole screen, so three numbers sat 600px apart
   and the buttons ended up stranded at the far edge, a thousand pixels from the name they belong to.
   Width is not information: a wider screen should mean more room around the block, not a wider block.

   So the header becomes a fixed measure of content pinned left, exactly the shape a profile has had
   since Instagram settled it: photo on the left spanning the whole block, then the name with its badges
   and its controls on one line, the numbers on the next, the bio under that. Host studio, Guardian and
   guest profile all render the same .phead, so all three get it. */
@media (min-width:900px){
  .phead:not(.no-avatar){
    grid-template-columns:186px auto minmax(0,1fr) !important;
    grid-template-areas:
      "avatar name  name"
      "avatar stats stats"
      "avatar bio   bio" !important;
    column-gap:clamp(30px,3.5vw,60px) !important;
    row-gap:14px !important;
    align-items:start !important;
    /* No cap. This was a measure from when the page itself had none and the header would otherwise have
       run to the edge of a wide screen. The page now sits in its own band, so the cap only made the
       header stop 72px short of the panels beneath it and leave a gap along its right edge. The band is
       the measure now; the header fills it, like everything else on the page. */
  }
  .phead:not(.no-avatar) > .pavatar{ align-self:start !important; justify-self:center !important }

  /* Name, badges and controls on one line, clustered left. The controls belong to the name, so they sit
     beside it rather than at whatever edge the window happens to have. */
  .phead:not(.no-avatar) .phead-top{
    grid-area:name; align-self:center !important;
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  }
  .phead:not(.no-avatar) .phead-top h2{ margin-right:0 !important }   /* badges follow the name here */
  .phead:not(.no-avatar) .phead-actions{
    grid-area:name; justify-self:end !important; align-self:center !important;
    margin:0 !important; flex-wrap:nowrap;
  }

  /* Three numbers, read as a sentence rather than a spread. Instagram's own spacing is about 40px. */
  .phead:not(.no-avatar) .pstats{
    grid-area:stats; justify-content:flex-start !important;
    gap:clamp(28px,3vw,44px) !important; margin:0 !important;
  }
  .phead:not(.no-avatar) .pstat{ flex:0 0 auto !important; text-align:left !important; align-items:flex-start }
  .phead:not(.no-avatar) .pstat b,
  .phead:not(.no-avatar) .pstat span{ text-align:left !important }

  .phead:not(.no-avatar) .pbio{ grid-area:bio; margin:0 !important; max-width:58ch }
}

/* ---------- The guest feed: one experience card per row ----------
   Same card as the rails, unpinned from the horizontal track: full width of the column, one per row, and
   you scroll. The rail sizes cards to fit several across, so the flex-basis and snap have to come off
   before it can hold a column. */
.igfeed{ display:flex; flex-direction:column; gap:clamp(26px,4vw,40px); width:100%;
  max-width:520px; margin-inline:auto }
.igfeed .fcard{ flex:0 0 auto !important; width:100%; scroll-snap-align:none !important }
/* The rail crops to a square; a feed has the room to let a portrait be a portrait. */
.igfeed .fcard .rcard-media{ aspect-ratio:4/5 }
.igfeed .fcard .rcard-media img{ width:100%; height:100%; object-fit:cover }
.igfeed .fcard .rcard-title{ font-family:var(--serif,Georgia,serif); font-weight:400;
  font-size:clamp(1.12rem,2.4vw,1.3rem); letter-spacing:0; line-height:1.25;
  display:flex; align-items:center; gap:7px; flex-wrap:wrap }
.igfeed .fcard .rcard-row{ margin-top:5px }
.igfeed .fcard .rcard-price{ font-weight:600; color:var(--text) }
.igfeed .fcard .vbadge.sm{ padding:2px 6px; font-size:.62rem }
.igfeed .fcard .vbadge.sm svg{ width:11px; height:11px }

/* Book is the last thing on the card, at the bottom right: after the picture and after the price. */
/* The card's last row: what you can do with it. Like at the left, Book at the right. */
.fcard-act{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px }
.fcard-act .btn{ min-width:104px }

/* Sits under the pill rather than beside it, so a long activity name never collides with it. */
.fcard-guard{ position:absolute; left:10px; top:46px; display:inline-flex; align-items:center; gap:5px;
  padding:4px 9px; border-radius:999px; background:var(--panel,rgba(251,247,240,.92)); color:var(--text-2);
  font-size:.7rem; font-weight:500; box-shadow:var(--shadow-1) }
.fcard-guard svg{ width:12px; height:12px }

@media (min-width:900px){
  /* Wider screens get a wider card, not a wider page: the column stays a column. */
  .igfeed{ max-width:560px }
}

/* ---------- Dashboard header: one left edge, at every width ----------
   The parts of this card were each aligned to something different: the numbers were spread edge to edge
   with space-between, so "sessions" sat at the far left and "photos" at the far right with nothing under
   them; the bio started at the card's padding; the buttons filled the width. Four elements, four
   alignments, and the eye has nothing to follow down the card.

   So everything below the name shares one left edge and the numbers sit in a tight row rather than a
   spread. This is the same arrangement the desktop block above sets, applied at the widths where the
   grid stacks, which is where the drift was visible. Host studio, Guardian and guest profile all render
   this same header, so all three are corrected together. */
.phead .pstats{
  justify-content:flex-start !important;
  gap:clamp(20px,5vw,34px) !important;
  row-gap:10px;
}
.phead .pstat{
  flex:0 0 auto !important;
  align-items:flex-start !important;
  text-align:left !important;
}
.phead .pstat b,
.phead .pstat span{ text-align:left !important }
/* Bio and controls line up under the numbers rather than each finding their own edge. */
.phead .pbio{ margin-left:0; margin-right:0 }
.phead .phead-actions{ justify-content:flex-start }

@media (max-width:640px){
  /* Narrow: the numbers were also scrolling sideways in their own strip, which hid the last one behind
     the card edge. Four fit across a phone at this size, so let them wrap instead of scroll. */
  .phead .pstats{ overflow:visible !important; flex-wrap:wrap !important; gap:18px !important }
  /* Same reason as above: these buttons wrap, they do not shrink past their own labels. */
  .phead .phead-actions{ width:100%; flex-wrap:wrap }
}

/* ---------- The profile header when it is a card ----------
   .phead was written as a bare header sitting on the page, deliberately flush left so the photo lines up
   with the 186px menu column and the name starts on the same vertical as the panel below it. That is
   right for the host and Guardian dashboards, where it has no background of its own.

   The guest profile renders the same header as a card, with a fill and a border, and there the zero side
   padding put the avatar, the numbers, the bio and the buttons hard against the edges: the photo clipped
   at the left, "0 sessions" running off the corner, "Edit details" touching the right. A card needs its
   content held off its own walls, so when this header is one, it gets the padding a card gets. */
.phead.card{
  padding:clamp(18px,4vw,24px) !important;
  gap:10px clamp(16px,4vw,22px) !important;
}
/* The photo sat 1px from the top edge; inside a card it wants the same air as everything else. */
.phead.card > .pavatar-btn,
.phead.card > .pavatar{ margin-top:0 }
/* Buttons stretched edge to edge because they were filling a box with no padding to sit inside. */
@media (max-width:640px){
  .phead.card .phead-actions{ gap:10px }
}

/* ---------- The profile card, to the reference ----------
   Three changes from what was there, all of them about where the eye goes first.

   The role chip moves out of the top-right corner and under the name. Stranded at the far edge it read as
   a status light attached to the card; under the name it reads as what it is, a description of the person
   the name belongs to. That also closes the gap that opened whenever the name was short.

   The numbers go back to four even columns rather than a tight left-aligned row. Four labels of very
   different lengths ("sessions", "no reviews yet", "age", "photos") packed left leave a ragged edge and a
   pool of empty space on the right; spread and centred, each number sits over its own word and the row
   reads as a set of four rather than a sentence that ran out.

   Everything else keeps the card padding, so nothing touches the walls. */
.phead.card .phead-top{
  /* A row that wraps, not a column: the heading claims a full line of its own, and every chip after it
     flows onto the next line side by side. Stacked one per line they read as a list of separate facts;
     on one line they read as what they are, two labels for the same person. */
  flex-direction:row; align-items:center; flex-wrap:wrap; gap:8px;
  align-self:center !important;
}
.phead.card .phead-top h2{ flex:1 0 100%; }
.phead.card .phead-top h2{
  margin-right:0 !important;
  font-size:clamp(1.45rem,5vw,1.9rem); line-height:1.15;
}
.phead.card .phead-top .status{ flex:none; align-self:flex-start }

/* The card header stands down and uses the same arrangement as the studio one.
   It used to spread its figures edge to edge with `flex:1 1 0` and centre each one over its label, so
   the same header read as a tight row on the host dashboard and as four widely separated columns on the
   profile. One header, one arrangement: the figures cluster on the left, under the name, sharing the
   left edge with everything else in the block. Only the margin survives, which is spacing, not layout. */
.phead.card .pstats{ margin-top:6px !important }

.phead.card .pbio{ margin-top:8px !important }
.phead.card .phead-actions{ margin-top:10px !important; gap:12px }

/* ---------- Phone: country picker, then the number ----------
   The country is a button, not a select: a native select cannot show a flag, cannot be searched, and on
   a phone it opens a wheel of 245 entries with no way to type. */
.telrow{ display:flex; gap:8px; align-items:stretch }
.tel-cc{ display:inline-flex; align-items:center; gap:7px; flex:none; cursor:pointer;
  padding:0 12px; min-height:48px; border:1px solid var(--border); border-radius:var(--r-m);
  background:var(--glass-tint); color:var(--text); font:inherit; font-weight:600;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease) }
.tel-cc:hover{ border-color:var(--border-tint) }
.tel-cc:focus-visible{ outline:3px solid var(--sky); outline-offset:2px }
.tel-flag{ font-size:1.2rem; line-height:1 }
.tel-dial{ font-variant-numeric:tabular-nums; letter-spacing:-.01em }
.tel-num{ flex:1 1 auto; min-width:0 }

/* The list itself: a sheet on a phone, a panel on a desktop. */
.ccsheet{ position:fixed; inset:0; z-index:120; background:rgba(30,22,14,.45);
  display:flex; align-items:flex-end; justify-content:center }
.ccsheet[hidden]{ display:none !important }
body.ccsheet-open{ overflow:hidden }
.ccsheet-in{ width:min(560px,100%); max-height:86vh; display:flex; flex-direction:column;
  background:var(--bg); border:1px solid var(--border); border-radius:20px 20px 0 0;
  box-shadow:var(--shadow-3); overflow:hidden }
@media (min-width:720px){
  .ccsheet{ align-items:center }
  .ccsheet-in{ border-radius:18px; max-height:76vh }
}
.cchead{ display:flex; gap:10px; align-items:center; padding:14px; border-bottom:1px solid var(--hair) }
.cchead .input{ flex:1 1 auto; min-width:0 }
.cclocate{ padding:10px 14px 4px }
.cclist{ list-style:none; margin:0; padding:6px 8px 14px; overflow-y:auto; flex:1 1 auto }
.ccrow{ display:flex; align-items:center; gap:12px; width:100%; padding:11px 10px; cursor:pointer;
  border:0; border-radius:10px; background:none; color:var(--text); font:inherit; text-align:left }
.ccrow:hover{ background:var(--glass-tint) }
.ccrow:focus-visible{ outline:2px solid var(--sky); outline-offset:-2px }
.ccrow.on{ background:var(--teal-soft); font-weight:600 }
.ccflag{ font-size:1.35rem; line-height:1; flex:none; width:26px }
.ccname{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ccdial{ flex:none; color:var(--text-2); font-variant-numeric:tabular-nums; font-size:.9rem }
.ccnone{ padding:22px 12px; color:var(--text-2); font-size:.9rem; text-align:center }

/* ---------- Admin directory filters ---------- */
.admfilt{ padding:2px 0 4px }
.admfilt-l{ letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); font-weight:600 }
.select-sm{ min-height:36px; padding:0 30px 0 10px; font-size:.88rem; max-width:min(240px,46vw) }
.admfilt .chip.on{ background:var(--teal-soft); border-color:var(--teal); color:var(--teal-deep); font-weight:600 }

/* ---------- Admin: security assignments ---------- */
.secass-grid{ display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)) }
.secass-stat{ padding:12px 13px; border:1px solid var(--edge-2); border-radius:var(--r-m); background:var(--glass-tint) }
.secass-stat b{ display:block; font-family:var(--display); font-weight:700; font-size:1.5rem; line-height:1;
  letter-spacing:-.02em; color:var(--text); font-variant-numeric:tabular-nums }
.secass-stat span{ display:block; margin-top:5px; font-size:.74rem; color:var(--text-2) }
/* Only the two states that need a person get colour; the rest stay quiet so those two carry. */
.secass-stat.is-warn{ background:var(--warn-soft); border-color:rgba(138,106,31,.28) }
.secass-stat.is-warn b{ color:var(--warn) }
.secass-stat.is-bad{ background:var(--error-soft); border-color:rgba(154,51,36,.28) }
.secass-stat.is-bad b{ color:var(--error) }
.secass-stat.is-ok b{ color:var(--ok) }

.secass-cov{ border:1px solid var(--hair); border-radius:var(--r-m); padding:10px 12px; background:var(--glass-tint) }
.secass-cov summary{ cursor:pointer; font-size:.88rem; display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.secass-cov summary::-webkit-details-marker{ display:none }
.secass-cov summary .tiny{ color:var(--text-3); margin-left:auto }
.secass-cov[open] summary .tiny{ visibility:hidden }
.secass-n{ font-family:var(--display); font-weight:700; font-size:1.05rem; color:var(--text) }
.secass-codes{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; max-height:220px; overflow-y:auto }
.ccode{ display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:999px;
  border:1px solid var(--hair); background:var(--bg); font-size:.74rem; color:var(--text-2);
  font-variant-numeric:tabular-nums }

/* ---------- Discover: activity as one control ---------- */
.actpick{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.actpick .frow-label{ letter-spacing:.08em; text-transform:uppercase; font-size:.72rem; font-weight:600; color:var(--text-3) }
.actpick .select{ flex:1 1 220px; max-width:420px; min-width:0 }

/* The activity control sits in the search row: it shrinks before the search field does, because the
   words someone is typing matter more than the label of a filter they can still read when collapsed. */
/* The search row is one line that fits its container: the words someone types get the room, the activity
   picker takes a fixed share, and Sort keeps only what its longest label needs. */
.fb-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.fb-top .fb-q{ flex:1 1 240px; min-width:0 }
.fb-top .fb-act{ flex:0 1 200px; min-width:0; margin:0 }
/* The search sheet: one field, the way a phone does it.
   A search that answers "where" and "who" from the same box has no business asking which you meant first,
   so the panel is a single input with a Cancel beside it, and the answers arrive underneath already
   labelled. It sits at the top of the screen rather than centred, because that is where a keyboard leaves
   room and where the eye already is after pressing a control in the header. */
.sh-bg { position:fixed; inset:0; z-index:140; display:flex; align-items:flex-start; justify-content:center;
  background:rgba(23,40,37,.38); backdrop-filter:blur(10px); padding:0 }
.sh-panel { width:100%; max-width:680px; background:var(--panel); border-bottom-left-radius:var(--r-l);
  border-bottom-right-radius:var(--r-l); box-shadow:var(--shadow-2); padding:14px 16px 18px;
  max-height:88vh; overflow-y:auto }
.sh-bar { display:flex; align-items:center; gap:10px }
.sh-input { position:relative; flex:1; display:flex; align-items:center }
.sh-ico { position:absolute; left:14px; display:grid; place-items:center; color:var(--text-3); pointer-events:none }
.sh-ico svg { width:18px; height:18px }
.sh-input input { width:100%; min-height:44px; border:0; border-radius:999px; background:var(--glass-2, rgba(0,0,0,.05));
  padding:0 14px 0 42px; font-size:1rem; color:var(--text) }
.sh-input input:focus { outline:2px solid var(--border); outline-offset:0 }
.sh-input input::-webkit-search-cancel-button { -webkit-appearance:none }
.sh-cancel { border:0; background:none; color:var(--accent, var(--teal)); font-size:1rem; font-weight:500;
  padding:6px 4px; cursor:pointer; white-space:nowrap }
/* One row, one shape, one size. Everything in it is a 40px pill: the two scopes, the activity, the
   filters and the sort. The sort used to arrive with a "Sort" label beside it and a shorter box, which
   made a row of five controls look like three controls and a stray form field.
   One line, always. Wrapping put five controls on three rows and pushed the faces below the fold on a
   phone; the row scrolls sideways instead, which keeps the answer on screen. The gutters are negative so
   the first pill starts flush with the field above it and the last one runs off the edge rather than
   stopping short, which is what tells a thumb there is more to the right. */
.sh-quick { display:flex; gap:8px; align-items:center; margin-top:12px;
  flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  margin-left:calc(-1 * var(--pad, 16px)); margin-right:calc(-1 * var(--pad, 16px));
  padding:2px var(--pad, 16px); scroll-padding-left:var(--pad, 16px) }
.sh-quick::-webkit-scrollbar { display:none }
.sh-quick > * { flex:0 0 auto }
/* One shape for all of them: an outlined pill on the page's own ground, and a soft filled one with no
   border when it is the choice in force. The old pair was a dark filled button against a bordered one,
   which read as a call to action sitting in a row of filters rather than as one of them selected. */
.sh-quick > .btn, .sh-quick > .select {
  min-height:36px; height:36px; padding:0 15px; border-radius:999px; font-size:.88rem; font-weight:600;
  line-height:1; border:1px solid var(--border); background:var(--panel); color:var(--text);
  box-shadow:none }
/* `!important` because the primary button's fill is set that way three rules up the file, and inside this
   row it is not a call to action - it is the filter that happens to be on. */
.sh-quick > .btn-primary, .sh-quick > .btn[aria-pressed="true"] {
  border-color:transparent !important; background:var(--accent-soft) !important; color:var(--text) !important }
.sh-quick > .btn:hover, .sh-quick > .select:hover { border-color:var(--text-3) }
.sh-quick > .btn svg { width:16px; height:16px; flex:none }
/* An activity name can be "Professional networking conversation", which as a pill is wider than the
   screen and pushes everything after it out of reach. Clipped, with the full name a tap away in the list
   the pill opens. */
.sh-quick > .btn { max-width:190px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis }
.sh-quick > .select { width:auto; min-width:0; padding-right:34px }
/* The sort box carries the longest label in the row ("Price, low to high"), and a select is sized by its
   widest option rather than its current one, so it was half again the width of everything beside it and
   pushed itself onto a line of its own. Capped, with the value clipped rather than the row broken. */
.sh-quick > .select { max-width:160px; text-overflow:ellipsis }
@media (max-width:400px){ .sh-quick > .btn, .sh-quick > .select { padding:0 13px; font-size:.85rem } }
/* The four documents on the update gate, in the same shape as the pills under the search bar: one line
   that scrolls sideways rather than wrapping. Four full titles wrapped to two rows and took as much of
   the dialog as the sentence being accepted, which is the part that should carry the weight. */
.pg-docs { display:flex; gap:8px; align-items:center; flex-wrap:nowrap;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  /* Bleeds to the card's edge so the row runs off the side rather than stopping mid-word inside the
     padding, and fades out there, which is what tells a thumb there is more to the right. */
  margin:2px -24px; padding:2px 24px;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent) }
.pg-docs::-webkit-scrollbar { display:none }
.pg-docs > .chip { flex:0 0 auto; min-height:32px; height:32px; padding:0 13px;
  border-radius:999px; font-size:.82rem; white-space:nowrap }

.sh-acts { display:flex; flex-wrap:wrap; gap:8px; padding:10px 2px 4px }
.sh-acts .chip { flex:0 0 auto }
/* The activity currently filtering the page, named with its own way out. */
.fb-act-on { display:inline-flex; align-items:center; gap:7px }
.fb-act-on svg { width:15px; height:15px }
.fb-act-on .fb-x { display:inline-flex; opacity:.75 }
.sh-results { margin-top:14px }
.sh-group + .sh-group { margin-top:14px }
.sh-group h3 { font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3);
  font-weight:600; margin:0 0 4px }
.sh-row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; width:100%;
  padding:11px 12px; border:0; background:none; border-radius:10px; cursor:pointer; text-align:left }
.sh-row:hover, .sh-row:focus-visible { background:var(--glass) }
.sh-row-main { font-weight:600; color:var(--text) }
.sh-row-sub { font-size:.84rem; color:var(--text-2) }
.sh-note { color:var(--text-2); padding:6px 2px }
.sh-clear { border:0; background:none; color:var(--text-2); font-size:.78rem; cursor:pointer; padding:2px 4px }
/* The suggestion wall. Square tiles in a tight grid, because the point is to compare faces quickly, and a
   caption on every picture would turn the wall back into a list. */
.sh-suggest { margin-top:16px }
.sh-suggest h3 { font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); font-weight:600; margin:0 0 8px }
.sh-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:3px }
.sh-tile { position:relative; padding:0; border:0; background:var(--glass); cursor:pointer; aspect-ratio:1; overflow:hidden }
.sh-tile img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s var(--e-out) }
.sh-tile:hover img, .sh-tile:focus-visible img { transform:scale(1.04) }
.sh-tile-cap { position:absolute; left:0; right:0; bottom:0; display:flex; flex-direction:column; gap:1px;
  padding:16px 8px 7px; text-align:left; color:#fff; font-size:.72rem; line-height:1.25;
  background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0)) }
.sh-tile-cap b { font-size:.78rem; font-weight:600 }
.sh-tile-cap span { opacity:.85 }
@media (min-width:620px){ .sh-tiles { grid-template-columns:repeat(4,1fr) } }
.sh-clear:hover { color:var(--text) }
.sh-group .between { align-items:baseline }
/* On a phone this is a screen, not a dropdown: full width, full height, square corners, and its own
   scroll. A sheet that stops halfway down leaves the page behind it showing through and reads as a menu
   that failed to open rather than a place you have gone. */
@media (max-width:520px){
  .sh-bg { align-items:stretch }
  .sh-panel { max-width:none; border-radius:0; min-height:100dvh; padding:12px 12px 24px }
  .sh-bar { position:sticky; top:0; z-index:2; background:var(--panel); padding-bottom:10px; margin:-12px -12px 0; padding:12px }
  .sh-tiles { gap:2px; margin:0 -12px }
  .sh-input input { font-size:16px }   /* anything smaller makes iOS zoom the page on focus */
}

/* The city control, sized like its neighbours and given room for a long name. */
.fb-top .fb-city{ flex:0 1 190px; min-width:150px; margin:0 }
.fb-top .fb-city .input{ min-height:36px; height:36px; border-radius:var(--r-pill); padding-left:16px; font-weight:500 }
.fb-top .fb-city .combo-list{ max-height:280px }
.fb-top .fb-act .picker-box{ margin:0 }
/* One height for the whole row. This said 46px, which is the button height from the base sheet and a
   third taller than the pills beside it, so the row stepped up and down across its own controls. */
.fb-top .fb-act .input{ min-height:36px; height:36px; border-radius:var(--r-pill); padding-left:16px }
html body .fb-top .input, html body .fb-top .select, html body .fb-top .btn{ min-height:36px; height:36px }
/* The Sort label and its select sit side by side on this row, so they need the gap the base rule gives
   them. Zeroing it here put the select's rounded fill directly over the word "Sort", which read as a
   broken overlap on every screen that shows the filter bar. */
.fb-top .field{ gap:8px }
@media (max-width:640px){
  .fb-top .fb-q{ flex:1 1 100% }
  .fb-top .fb-act{ flex:1 1 100% }
}
/* A heading inside the list, so social and professional stay separated once it is searchable. */
.picker-grp{ padding:9px 12px 4px; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-3); font-weight:600 }
.picker-opt span svg{ width:14px; height:14px; margin-right:7px; vertical-align:-2px }

/* ---------- Admin: the member profile ---------- */
.admrow{ cursor:pointer }
.admrow:hover{ background:var(--glass-tint) }
.admrow:focus-visible{ outline:2px solid var(--sky); outline-offset:-2px }
.admrow.on{ background:var(--teal-soft) }
.admprof-h{ align-items:flex-start; gap:12px; flex-wrap:wrap }
.admprof-grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
.admbox{ padding:14px 15px; border:1px solid var(--hair); border-radius:var(--r-m); background:var(--glass-tint) }
.admbox h4{ margin:0 0 8px; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); font-weight:600 }
.admbox .kv{ display:flex; gap:12px; justify-content:space-between; padding:5px 0; border-bottom:1px solid var(--hair);
  font-size:.86rem; align-items:baseline }
.admbox .kv:last-of-type{ border-bottom:0 }
.admbox .kv .k{ color:var(--text-2); flex:none }
.admbox .kv .v{ text-align:right; min-width:0; overflow-wrap:anywhere }
.admlist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px;
  max-height:210px; overflow-y:auto; font-size:.82rem; color:var(--text-2) }
.admlist li{ padding-bottom:5px; border-bottom:1px solid var(--hair) }
.admlist li:last-child{ border-bottom:0 }

/* ---------- Admin rollout: dropdowns, and a city on a map ---------- */
.rolo-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:2px }
.rolo-l{ letter-spacing:.08em; text-transform:uppercase; font-size:.7rem; font-weight:600; color:var(--text-3); min-width:52px }
.globregions{ max-height:none }
.globreg{ border:1px solid var(--hair); border-radius:var(--r-m); padding:10px 12px; background:var(--glass-tint) }
.globreg summary{ cursor:pointer; display:flex; align-items:center; gap:10px; font-size:.9rem }
.globreg summary::-webkit-details-marker{ display:none }
.globreg summary .tiny{ margin-left:auto; color:var(--text-3) }
.globpill{ font-variant-numeric:tabular-nums }

.areamap{ margin-top:10px }
.areastats{ display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)) }
.areastat{ padding:10px 12px; border:1px solid var(--edge-2); border-radius:var(--r-m); background:var(--bg) }
.areastat b{ display:block; font-family:var(--display); font-weight:700; font-size:1.35rem; line-height:1;
  color:var(--text); font-variant-numeric:tabular-nums }
.areastat span{ display:block; margin-top:4px; font-size:.7rem; color:var(--text-2) }
.areacanvas{ height:280px; border-radius:var(--r-m); overflow:hidden; border:1px solid var(--hair); background:var(--glass-tint) }
.areafallback{ padding:14px }
.areaup summary{ cursor:pointer; font-size:.88rem }

/* ---------- The two search rows, aligned ----------
   The exact-name finder and the host search were two different widths, two heights and two radii, stacked
   one above the other, which read as two unrelated boxes rather than two ways of finding somebody. Same
   width, same height, same shape; the only difference left is what each one searches. */
.page.browse .findbar,
.page.browse .filterbar{ max-width:none; width:100% }
.findbar{ max-width:none }
.findbar .input,
.fb-top .fb-q,
.fb-top .fb-act .input{ min-height:36px; height:36px; border-radius:var(--r-pill); padding-left:16px }   /* one height across the row */
.findbar .btn{ min-height:46px }
.fb-reset{ flex:none }

/* ---------- The bare dashboard header: numbers spread, like the profile card ----------
   The host and Guardian headers packed their three numbers hard left, leaving half the row empty, while
   the guest profile card spread its four evenly. Same header, same person, two different rhythms. Below
   the desktop layout they now read the same: even columns, each number over its own word.
   Above 900px the Instagram arrangement stands, where the block is capped at a measure and a tight row
   is correct because there is no empty width to spread into. */
@media (max-width:899px){
  .phead .pstats{
    justify-content:space-between !important;
    gap:clamp(10px,2vw,20px) !important;
  }
  .phead .pstat{
    flex:1 1 0 !important; min-width:0;
    align-items:center !important; text-align:center !important;
  }
  .phead .pstat b,
  .phead .pstat span{ text-align:center !important }
}

/* ---------- The profile-picture sheet on a phone ----------
   Centred, the card could sit taller than the screen and the backdrop could be left scrolled past it,
   which is what produced a blurred page with nothing on it. On a phone it is a bottom sheet now: pinned
   to the bottom edge, never taller than the screen, scrolling inside itself rather than moving. */
@media (max-width:720px){
  .modal-bg.av-bg{ align-items:flex-end; padding:0 }
  .modal-bg.av-bg > .av-sheet{
    width:100%; max-height:88dvh; margin:0;
    border-radius:20px 20px 0 0; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:calc(18px + env(safe-area-inset-bottom));
  }
}
@supports not (height: 100dvh){ @media (max-width:720px){ .modal-bg.av-bg > .av-sheet{ max-height:88vh } } }
/* The close button on the rules popup and the avatar sheet.
   `.icon-btn` is only ever styled inside `.nav`, and both of these sheets are appended to the body, so
   this button was falling through to the browser's own button look: a grey fill with a 2px outset
   border. At 36px around an 18px stroke that reads as an empty box rather than a close control, which is
   exactly what it looked like. Given the same treatment as every other bare icon button here. */
.av-x{ flex:none; width:36px; height:36px; margin:-4px -6px 0 0; padding:0;
  display:grid; place-items:center; border:0; border-radius:50%;
  background:none; color:var(--text-2); cursor:pointer; line-height:1;
  -webkit-appearance:none; appearance:none }
.av-x:hover,.av-x:focus-visible{ color:var(--text); background:var(--hair) }
.av-x svg{ width:18px; height:18px }

/* The two ways to answer "where will you meet": one row, half each, whatever the phone's width.
   `min-width:0` is the part that matters - a flex item will not shrink below the width of its own text
   without it, which is what pushed the second button onto a line of its own. */
.placebtns{ display:flex; gap:8px }
.placebtns > .btn{ flex:1 1 0; min-width:0; justify-content:center; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis }
.placebtns > .btn svg{ flex:none }

/* Share destinations: a square button holding one glyph, sized to match the two text buttons beside it
   rather than shrinking to the width of an icon. */
.shareico{ width:44px; padding:0 !important; display:inline-grid; place-items:center }
.shareico svg{ width:19px; height:19px }

/* ---------- Choosing a Guardian ----------
   One column of information beside one picture, rather than three columns fighting for a phone's width.
   The price gets its own line so it can never be crushed, and the verification ticks are a quiet row:
   four stacked green labels shout, and all they are saying is that nothing is wrong. */
.procard{ align-items:flex-start !important; gap:14px !important; padding:14px !important }
/* The column is sized by the caption, not just the photo. At a fixed 64px the word UNLICENSED was wider
   than its own column, so it spilled out under the radio button and pulled the whole card's left edge
   out of line with the avatar above it. */
.pro-face{ flex:none; align-self:center; display:flex; flex-direction:column; align-items:center; gap:6px;
  width:max-content; min-width:64px; max-width:84px }
.procard .pro-pic{ width:64px; height:64px; border-radius:50%; object-fit:cover; flex:none;
  border:1px solid var(--hair) }
.procard .pro-pic-none{ display:grid; place-items:center; background:var(--teal-soft); color:var(--teal-deep);
  font-family:var(--display); font-weight:700; font-size:1.5rem; letter-spacing:-.02em }
.pro-tier{ font-size:.58rem; letter-spacing:.04em; text-transform:uppercase; color:var(--text-3);
  text-align:center; line-height:1.25; max-width:100% }
/* The radio sits with the name it selects, not pinned to the card's top edge. */
.procard > input[type=radio]{ align-self:center; margin:0; flex:none }

.pro-b{ gap:3px !important }
.pro-name{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap }
.pro-name b{ font-family:var(--display); font-weight:700; font-size:1.02rem }
.pro-far{ display:inline-flex; align-items:center; gap:4px; font-size:.74rem; color:var(--text-3) }
.pro-far svg{ width:11px; height:11px }
.pro-spec{ font-size:.86rem; color:var(--text); font-weight:500 }
.pro-meta{ font-size:.78rem; color:var(--text-2) }
.pro-price{ display:flex; align-items:baseline; gap:8px; margin-top:6px; flex-wrap:wrap }
.pro-price b{ font-family:var(--display); font-weight:700; font-size:1.1rem; font-variant-numeric:tabular-nums }
.pro-price span{ font-size:.76rem; color:var(--text-2) }
.pro-checks{ display:flex; flex-wrap:wrap; gap:5px; margin-top:7px }
.pro-tick{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px;
  background:var(--ok-soft); color:var(--ok); font-size:.68rem; font-weight:600 }
.pro-tick svg{ width:10px; height:10px }
.pro-more{ align-self:flex-start; margin-top:8px }

/* ---------- Who you are meeting, on the booking ----------
   The photograph leads. This is the block someone reads before deciding whether to meet a stranger, and
   it used to open with a name and four numbers pressed against the left edge, with the only picture
   below the fold. Same shape as every other profile now: face, name, then the numbers beside it. */
.cphead{ display:flex; gap:14px; align-items:flex-start }
.cpface{ width:76px; height:76px; border-radius:50%; object-fit:cover; flex:none; border:1px solid var(--hair) }
.cpface-none{ display:grid; place-items:center; background:var(--teal-soft); color:var(--teal-deep);
  font-family:var(--display); font-weight:700; font-size:1.7rem; letter-spacing:-.02em }
.cpwho{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:8px }
.cpwho h3{ font-family:var(--serif,Georgia,serif); font-weight:400; font-size:1.3rem;
  display:flex; align-items:center; gap:7px; flex-wrap:wrap }
#cpPanel .pstats{ display:flex; justify-content:space-between; gap:clamp(8px,2vw,18px); flex-wrap:wrap }
#cpPanel .pstat{ flex:1 1 0; min-width:56px; display:flex; flex-direction:column; align-items:flex-start }
#cpPanel .pstat b{ font-family:var(--display); font-weight:700; font-size:.98rem; line-height:1.2 }
#cpPanel .pstat span{ font-size:.72rem; color:var(--text-2); white-space:nowrap }
/* Four facts of very different lengths — "sessions", "no reviews yet", "age", "based in" — do not sit in
   one row on a phone: the long one wraps, the last one drops, and the block goes ragged. Two by two, each
   cell gets room and the pairs line up. */
@media (max-width:640px){
  .cpface{ width:64px; height:64px }
  #cpPanel .pstats{ display:grid !important; grid-template-columns:1fr 1fr; gap:10px 14px }
  #cpPanel .pstat{ flex:none; min-width:0 }
  #cpPanel .pstat span{ white-space:normal; line-height:1.25 }
}

/* ---------- The filter bar, one shape everywhere ----------
   This picked up rules from three eras: a column, then a nowrap scroller, then the current row. They
   still all match, so which one wins depends on the breakpoint, and the panel underneath sized itself to
   its content instead of the page. Stated once, last, for every state the page can be in. */
.filterbar{ display:flex !important; flex-direction:column !important; gap:12px !important;
  width:100% !important; max-width:none !important; overflow:visible !important }
.filterbar .fb-top{ display:flex !important; flex-wrap:wrap !important; align-items:center !important;
  gap:10px !important; width:100% !important; overflow:visible !important }
.filterbar .fb-top > *{ flex:0 1 auto }
.filterbar .fb-top .fb-q{ flex:1 1 240px !important; min-width:0 }
.filterbar .fb-top .fb-act{ flex:0 1 230px !important; min-width:0 }
.filterbar .fb-grid{ width:100%; box-sizing:border-box }
@media (max-width:640px){
  .filterbar .fb-top .fb-q,
  .filterbar .fb-top .fb-act{ flex:1 1 100% !important }
}

/* ---------- Guardian directory: the face, and the badge on it ---------- */
.gcard-facewrap{ position:relative; flex:none; display:inline-block }
.gcard-face-none{ display:grid; place-items:center; background:var(--teal-soft); color:var(--teal-deep);
  font-family:var(--display); font-weight:700; font-size:2rem; letter-spacing:-.02em }
/* The badge sits on the picture, where a reader looks first, rather than in a list further down. */
.gcard-vb{ position:absolute; right:2px; bottom:2px; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; background:var(--ok); color:#fff; border:2px solid var(--bg) }
.gcard-vb svg{ width:13px; height:13px }
.gcard-nophoto{ color:var(--text-3); margin-top:8px }
/* Too few to loop: keep them at the left rather than stretched across the rail. */
.gcards-few{ justify-content:flex-start }

/* ---------- The rules, shown before you can break them ---------- */
.rules-card{ width:min(520px,100%); max-height:88dvh; overflow-y:auto }
.rules-quote{ margin:0; padding:11px 13px; border-left:3px solid var(--error); background:var(--error-soft);
  border-radius:0 var(--r-s) var(--r-s) 0; font-size:.9rem; color:var(--text) }
.rules-list h3{ margin:0 0 6px; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600 }
.rules-list ul{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:5px;
  font-size:.88rem; color:var(--text-2); line-height:1.45 }
.rules-no h3{ color:var(--error) }
.rules-yes h3{ color:var(--ok) }
.rules-no li::marker{ color:var(--error) }
.rules-yes li::marker{ color:var(--ok) }
@media (max-width:720px){
  .modal-bg.rules-bg{ align-items:flex-end; padding:0 }
  .modal-bg.rules-bg > .rules-card{ width:100%; border-radius:20px 20px 0 0;
    padding-bottom:calc(18px + env(safe-area-inset-bottom)) }
}
@supports not (height: 100dvh){ .rules-card{ max-height:88vh } }

/* ---------- Hide my photo ---------- */
.hidepic{ display:flex; gap:10px; align-items:flex-start; margin-top:14px; padding:12px 13px;
  border:1px solid var(--hair); border-radius:var(--r-m); background:var(--glass-tint); cursor:pointer }
.hidepic input{ margin-top:3px; flex:none; width:18px; height:18px }
.hidepic span{ display:flex; flex-direction:column; gap:3px }
.hidepic .small{ color:var(--text-2) }
.ph-hide{ position:absolute; left:6px; top:6px; min-height:26px; padding:0 9px; font-size:.7rem;
  background:rgba(20,16,12,.55); color:#F4EDE1; border:0; border-radius:999px }
.ph-badge-hidden{ background:rgba(20,16,12,.72); color:#F4EDE1 }

/* ---------- Host profile: the photographs as a grid ----------
   A rail showed one picture and hid the rest behind a gesture nobody is told about. Three across, square,
   the whole set visible at once, which is what somebody deciding whether to meet a stranger wants. */
.pgrid-wrap{ display:flex; flex-direction:column; gap:8px }
.pgrid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:3px }
.pgrid-cell{ padding:0; border:0; background:var(--glass-tint); cursor:zoom-in; aspect-ratio:1/1;
  overflow:hidden; line-height:0 }
.pgrid-cell:first-child{ border-radius:var(--r-m) 0 0 0 }
.pgrid-cell:nth-child(3){ border-radius:0 var(--r-m) 0 0 }
.pgrid-cell img{ width:100%; height:100%; object-fit:cover; transition:transform var(--t-base) var(--ease) }
.pgrid-cell:hover img{ transform:scale(1.03) }
.pgrid-cell:focus-visible{ outline:3px solid var(--sky); outline-offset:-3px }
@media (min-width:900px){ .pgrid3{ gap:5px } }

/* One photograph, full screen. */
.shotview{ background:rgba(12,10,8,.94); -webkit-backdrop-filter:none; backdrop-filter:none;
  display:flex; align-items:center; justify-content:center; padding:0 }
/* The frame is the photograph. Everything else is positioned against it, so nothing floats in the black
   margin above or below a portrait on a tall screen. */
.shot-frame{ position:relative; display:inline-flex; max-width:96vw; max-height:88dvh; line-height:0 }
.shot-full{ max-width:96vw; max-height:88dvh; object-fit:contain; border-radius:10px; display:block }
@supports not (height:100dvh){ .shot-frame, .shot-full{ max-height:88vh } }
.shot-x{ position:absolute; top:14px; right:14px; width:42px; height:42px; border-radius:50%; border:0;
  background:rgba(255,255,255,.14); color:#F4EDE1; display:grid; place-items:center; cursor:pointer; z-index:2 }
.shot-x svg{ width:18px; height:18px }
.shot-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border:0;
  border-radius:50%; background:rgba(255,255,255,.14); color:#F4EDE1; font-size:1.6rem; line-height:1;
  cursor:pointer; display:grid; place-items:center; z-index:2 }
.shot-arrow.left{ left:12px } .shot-arrow.right{ right:12px }
/* The counter and the one action, on the same line at the foot of the picture. */
.shot-foot{ position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:26px 14px 14px; border-radius:0 0 10px 10px;
  background:linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0)) }
.shot-of{ color:#F4EDE1; font-size:.82rem; background:rgba(0,0,0,.4); padding:5px 12px; border-radius:999px }
.shot-book{ flex:none; min-height:44px; padding:0 20px }

/* ---------- Host profile: the person, then their photographs ---------- */
.hprofile{ display:flex; gap:16px; align-items:center }
.hface{ width:96px; height:96px; border-radius:50%; object-fit:cover; flex:none; cursor:zoom-in;
  border:1px solid var(--hair) }
.hwho{ flex:1 1 auto; min-width:0 }
.pgrid-wrap .between{ margin-bottom:10px }
.pgrid3{ border-radius:var(--r-m); overflow:hidden }
.pgrid-cell:first-child, .pgrid-cell:nth-child(3){ border-radius:0 }
@media (max-width:520px){ .hface{ width:78px; height:78px } }

/* The space where the card field goes, when it cannot be shown. */
.paynote{ padding:16px; border:1px dashed var(--hair2); border-radius:var(--r-m);
  background:var(--glass-tint); color:var(--text-2); font-size:.9rem; line-height:1.55 }

/* The rule a host has to understand about their calendar, said where they are editing it. */
/* A note, not a warning. This was amber-bordered on a warn-soft ground with a warning triangle, which
   made "here is how your calendar works" look like "here is what you are doing wrong" - a caution
   levelled at a host who had done nothing. Same panel treatment as everything else on the screen. */
.availnote{ display:flex; gap:11px; align-items:flex-start; margin:12px 0 4px; padding:13px 15px;
  border:1px solid var(--hair); border-radius:var(--r-m); background:var(--panel) }
.availnote svg{ width:17px; height:17px; flex:none; margin-top:2px; color:var(--text-2) }
.availnote b{ display:block; margin-bottom:3px }
.availnote .small{ color:var(--text-2) }

/* =====================================================================
   Signed-in page measure. Every host, guest and Guardian page sits in one
   band rather than running to whatever edge each view happened to reach:
   15% of the viewport is left blank on the left and 10% on the right, so
   the working area starts and ends in the same place whichever page you
   are on, and a dashboard, a table and a single form card all line up.
   The margins are a share of the viewport, which is only readable once
   there is a viewport to share: below 900px they would leave a column too
   narrow to read, so a phone keeps the edge-to-edge measure it has.
   ===================================================================== */
@media (min-width: 900px) {
  /* Equal on both sides, because "centred" and "15 left, 10 right" cannot both be true and centred is
     the one you can see. The band keeps the width those numbers asked for, 75% of the viewport, and
     splits the remaining quarter evenly so the content sits on the middle of the screen. */
  /* The band stops taking width once the working area is down to 1240px.
     A share of the viewport is the right idea and the wrong arithmetic on
     its own: at 1440 it was spending 360px on margins and leaving the
     host's week too narrow for the second column it is laid out in. The
     margin is whichever is smaller - the share, or what is actually spare
     above 1240 - so a wide screen still gets its margins and a 1440 one
     stops paying for them out of the content. */
  .page.has-tabs { padding-left: min(12.5vw, max(0px, (100vw - 1240px) / 2));
                   padding-right: min(12.5vw, max(0px, (100vw - 1240px) / 2)); }
  /* The header takes the same measure, so the bar starts and ends where the content does instead of
     running past it on both sides. Its own cap is dropped for the same reason `.wrap`'s is: a max-width
     would re-centre the bar inside the band and undo the alignment on a wide screen. */
  .nav.in-app { padding-left: min(12.5vw, max(0px, (100vw - 1240px) / 2));
                padding-right: min(12.5vw, max(0px, (100vw - 1240px) / 2)); }
  .nav.in-app .bar { max-width: none; }
  /* The menu hangs off the same edge as the button that opens it. It is `position:fixed` and sits outside
     the nav in the DOM, so it cannot inherit the band and was still measuring from the window: with the
     bar pulled in to 87.5% the panel opened a long way to the right of its own hamburger. */
  html body.in-app #mmenu.mmenu { right: calc(min(12.5vw, max(0px, (100vw - 1240px) / 2)) + 12px) !important; }  /* fixed means the viewport */
  /* The 1560px cap would re-centre the band inside those margins on a wide
     screen and cancel the offset, so here the share of the viewport is the
     only thing setting the width. Views that ask for a narrower measure do
     it inline and keep it, centred in the band by their own auto margins. */
  .page.has-tabs > .wrap { max-width: none; }
  /* The footer is a ground, not part of the measure: it carries .wrap, so
     the band would inset its background and leave it floating. Pulled back
     out to the edges; its columns are centred by their own cap. The width
     goes back to auto because footer.foot is pinned to width:100%, and a
     fixed width answers a negative margin by sliding rather than growing. */
  .page.has-tabs > footer.foot { width: auto;
    margin-left: calc(-1 * min(12.5vw, max(0px, (100vw - 1240px) / 2)));
    margin-right: calc(-1 * min(12.5vw, max(0px, (100vw - 1240px) / 2))); }
}

/* The badge on a place row saying which list it came from. Deliberately not `.chip`: that is a 40px tap
   target for filters, and this is a word sitting inside a line of text. */
.pbadge{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:var(--r-pill);
  font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;vertical-align:1px;
  background:var(--accent-soft);color:var(--accent);border:1px solid var(--edge)}

/* The venue question in a review. Ruled off rather than boxed: it is a different kind of question from
   the chips above it, and another card inside a card is the thing we do not do. */
.rvenue{margin-top:4px;padding-top:14px;border-top:1px solid var(--edge-2)}

/* The little map on a booking. A picture of where you are going, sized like a photograph rather than a
   component: fixed height, its own rounded frame, and the whole thing is the tap target. */
/* Centred in its card. It is capped at 320px, so left-aligned it sat against one edge with a band of
   empty panel beside it - a picture of where you are going, pushed into a corner. */
.minimap{position:relative;display:block;width:100%;max-width:320px;height:132px;margin:12px auto 4px;
  border-radius:var(--r-m);overflow:hidden;border:1px solid var(--edge-2);background:var(--bg-deep);
  text-decoration:none;isolation:isolate}
.minimap img{position:absolute;width:256px;height:256px;max-width:none;image-rendering:auto;
  /* OSM tiles are bright next to an ivory page; taking a little saturation out settles them into it. */
  filter:saturate(.72) contrast(.96)}
.minimap-pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);width:28px;height:28px;
  color:var(--accent);filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.minimap-pin svg{width:28px;height:28px;fill:var(--ivory-3);stroke-width:1.6}
.minimap-cta{position:absolute;right:8px;bottom:8px;padding:4px 10px;border-radius:var(--r-pill);
  font-size:11px;font-weight:600;background:var(--btn-fill);color:var(--btn-ink)}
.minimap:hover .minimap-cta{background:var(--accent)}
.minimap:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){.minimap{transition:border-color .2s ease}}
.minimap:hover{border-color:var(--accent-2)}

/* Choosing a rail before requesting the time. Two wide targets rather than a select, because this is a
   decision with consequences a dropdown hides: one of them ends on a card form, the other on an address. */
.payways{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.payways:has(.payway:only-child){grid-template-columns:1fr}
.payway{display:flex;align-items:center;gap:10px;padding:12px 14px;text-align:left;cursor:pointer;
  border:1px solid var(--edge-2);border-radius:var(--r-m);background:var(--ivory-3);color:var(--text)}
.payway:hover{border-color:var(--accent-2)}
.payway.on{border-color:var(--accent);background:var(--accent-soft)}
.payway-i{display:flex;flex:none;color:var(--accent)}
.payway-i svg{width:20px;height:20px}
.payway-t{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.payway-t b{white-space:nowrap}
.payway-t .tiny{color:var(--text-3)}
.payway:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:400px){.payways{grid-template-columns:1fr}}

/* The deposit address. Monospace, wrapping, and a copy button, because it is going to be copied. */
.addrbox{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--edge-2);
  border-radius:var(--r-m);background:var(--ivory-3)}
.addrbox code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;
  word-break:break-all;min-width:0;flex:1}

/* The bell, and the panel it opens.
   Anchored under the header on a wide screen and a sheet from the bottom on a phone, because a dropdown
   pinned to a 40px button is unreachable with a thumb. */
.bellbtn{position:relative}
.bell-dot{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;line-height:1;
  background:var(--accent);color:var(--btn-ink);border:1.5px solid var(--ivory-3)}
.bellwrap{position:fixed;inset:0;z-index:120}
.bellscrim{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;cursor:default}
.bellsheet{position:absolute;z-index:1;right:12px;top:70px;width:min(380px,calc(100vw - 24px));
  max-height:min(70vh,560px);display:flex;flex-direction:column;border-radius:var(--r-l);overflow:hidden}
.belllist{overflow-y:auto;padding:0 8px 10px}
.bellrow{display:flex;gap:12px;align-items:flex-start;padding:11px 10px;border-radius:var(--r-m);cursor:pointer}
.bellrow:hover{background:var(--ivory-2)}
.bellrow.unread{background:var(--accent-soft)}
.bellrow-i{flex:none;display:flex;color:var(--accent);margin-top:1px}
.bellrow-i svg{width:18px;height:18px}
.bellrow-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.bellrow-t b{font-size:14px;line-height:1.35}
.bellrow-t .small{color:var(--text-2);line-height:1.45}
.bellrow-t .tiny{color:var(--text-3)}
@media (max-width:700px){
  .bellsheet{right:0;left:0;top:auto;bottom:0;width:100%;max-height:78vh;
    border-radius:var(--r-xl) var(--r-xl) 0 0;padding-bottom:env(safe-area-inset-bottom)}
}

/* The verification prompt. Same shape as the restriction bar, but this is guidance rather than a
   penalty, so it takes the accent rather than the warning colour. */
.restrict-bar.verify-bar{border-color:var(--accent-2)}
.restrict-bar.verify-bar b{color:var(--text)}

/* A booking is a card, not a Discover tile.
   `.host` is written for the feed, where a photo sits on the page and its caption runs underneath with
   almost no padding. A booking card has a real edge, so it needs its own chrome and room inside it. */
.host.bcard{background:var(--ivory-3)!important;border:1px solid var(--edge-2)!important;
  border-radius:var(--r-l);overflow:hidden!important}
.host.bcard .portrait{border-radius:0}
.host.bcard .body{padding:14px 16px 16px;gap:6px}
.host.bcard .meta{overflow-wrap:anywhere}

/* A rail that cannot take this amount. Shown, not hidden: hiding it reads as "we don't accept crypto",
   which is a different and wrong message. */
.payway.off{opacity:.55;cursor:not-allowed}
.payway.off:hover{border-color:var(--edge-2)}

/* An icon dropped straight into a line of text.
   The icon set is sized by whatever holds it — a button, a chip — so an icon placed loose in a paragraph
   has no width at all and fills its container: a 14px shield rendered as a 300px illustration above the
   sentence it belonged to. This gives those the size the surrounding text implies. */
.inline-ico > svg{width:1em;height:1em;vertical-align:-0.12em;flex:none}

/* The Guardian add-on box.
   Two long passages sit here — what a Guardian is, and the list of things one must never be asked to do —
   and at body size they dominated a screen whose actual job is choosing a time. They are read once,
   carefully, and then not again, so they are set smaller than the booking controls around them. The
   checkbox labels stay at a readable size rather than a literal halving, which would put a legal
   acknowledgement below the size anyone should be asked to agree to. */
.secbox .check{ font-size:.8rem; line-height:1.5; gap:9px }
.secbox .check input{ width:18px; height:18px }
.secbox .check b{ font-size:.86rem }
.secbox .check .small,.secbox .check .tiny{ font-size:.76rem; line-height:1.5 }
.secbox .small{ font-size:.78rem }
.secbox .tiny{ font-size:.72rem }

/* The city switcher in the Discover header. Its box is right-aligned by the row; this aligns the value
   inside the box to the same edge, so "Dubai" lines up with the count below it instead of floating. */
.citysw{ margin-left:auto; position:relative }
.citysw .input{ text-align:right }
.citysw .combo-list{ text-align:left }
/* The flag itself is the control. Sized like a face rather than a glyph, because at text size a flag is
   an unreadable smudge, and on Windows, which draws no flag emoji at all, this is the two letter country
   code instead and still needs room to be legible. */
/* The search glyph and the flag sit on the page, not in anything: no ring, no panel, no border. Two
   controls in boxes beside a serif greeting read as leftover furniture; the icons alone read as icons.
   The 44px target stays, it is simply invisible, so the tap area is unchanged. */
.flagbtn{ display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%;
  background:none; cursor:pointer; line-height:1 }
.searchbtn{ display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%;
  background:none; color:var(--text); cursor:pointer; line-height:1 }
.searchbtn svg{ width:22px; height:22px; stroke-width:2.2 }
.searchbtn:hover,.flagbtn:hover{ opacity:.7 }
.searchbtn:focus-visible,.flagbtn:focus-visible{ outline:2px solid var(--text-3); outline-offset:2px }
.flagbtn-f{ font-size:1.35rem; letter-spacing:0; font-weight:600 }
/* The picker only exists once asked for, and floats rather than pushing the header around. */
.citysw-pop{ position:absolute; right:0; top:52px; z-index:60; width:min(280px,78vw);
  background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-m); padding:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.10) }
.citysw-pop .input{ text-align:left }
@media (max-width:640px){ .citysw{ margin-left:auto } .citysw-pop{ width:min(280px,86vw) } }

/* The Guardian suggestion, above the add-on box. The mark is set in a disc like a Guardian's portrait on
   the cards below, so the suggestion and the people it is about read as one thing. */
/* Centred against its paragraph. Top-aligned, the disc floated beside the first line of a seven line
   block and read as a bullet rather than a mark. */
.sugsec{ display:flex; gap:11px; align-items:center; margin:0 0 10px }
.sugsec-i{ flex:none; width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:var(--teal-soft); color:var(--teal-deep) }
.sugsec-i > svg{ width:22px; height:22px }
.sugsec p{ margin:0; font-size:.76rem; line-height:1.45; color:var(--text-2) }
.sugsec b{ color:var(--text); font-weight:600 }

/* The crypto deposit QR. White plate under it regardless of theme: a scanner needs the dark modules on a
   light ground, and a transparent SVG on the dark page inverts into something no wallet will read. */
.cryqr{ display:flex; flex-direction:column; align-items:center; gap:8px; margin:0 0 12px }
.cryqr img{ width:200px; height:200px; padding:10px; border-radius:14px; background:#fff;
  border:1px solid var(--hair); display:block }
.cryqr .tiny{ color:var(--text-3); text-align:center }

/* The two payment screens sit in a narrow centred card, the same shape as the confirmation screen that
   follows them, so their titles are centred the way that one's is. Only the header: the amount rows, the
   address and the warnings below stay left aligned, because those are read line by line. */
.payhead{ text-align:center }
.payhead .eyebrow{ display:block; margin-bottom:6px }
.payhead h2{ margin:0 }

/* The sticky booking bar steps aside when the real button is in view. Faded and lifted rather than
   display:none so it does not jump the page as it goes. */
.sheet.is-off{ opacity:0; transform:translateY(120%); pointer-events:none }
.sheet{ transition:opacity .18s ease, transform .22s cubic-bezier(.23,1,.32,1) }
@media (prefers-reduced-motion:reduce){ .sheet{ transition:none } }

/* Guardian cards on a phone.
   The column is narrow, so every line wrapped and each card grew to most of a screen: choosing between
   two of them meant scrolling past both. Same information, tighter setting - the portrait is smaller,
   the prose is a step down and no longer holds a paragraph's line height, and the padding stops being
   desktop padding. The picture, the price and the ticks all keep their weight. */
@media (max-width:640px){
  .procard{ padding:11px !important; gap:11px !important }
  .procard .pro-pic{ width:52px; height:52px }
  .pro-face{ min-width:52px; max-width:74px; gap:4px }
  .pro-tier{ font-size:.54rem }
  .pro-name b{ font-size:.96rem }
  .pro-spec{ font-size:.8rem; line-height:1.35 }
  .pro-b .small{ font-size:.78rem; line-height:1.4 }
  .pro-meta{ font-size:.72rem }
  .pro-price{ margin-top:4px }
  .pro-price b{ font-size:1rem }
  .pro-checks{ margin-top:5px }
  .pro-more{ margin-top:2px }
}

/* The activity ticker under the hero.
   The selector carries `section.band.rails-band` on purpose: the band padding is set by
   `.imm section.band` with `padding-block !important`, and a two-class selector cannot out-rank a
   two-class-plus-element one however many !importants it carries.
   It carried a full band's padding top and bottom plus its own bottom margin, so a single row of small
   labels occupied more vertical space than the row itself needs, and floated away from the hero it is
   meant to read as part of. Tightened, and pulled up close to the hero. */
/* The top padding is what made the row look badly set. Inside the strip the icon and the label are
   centred in their box, which leaves about 18px of air above the icon's ink and the same below the
   label; the band then added another 18px on top of that and nothing underneath, because the space below
   the hairline belongs to the note that follows rather than to the row. So the row read as sitting low
   in a box that was too tall above it. The band's own top padding now nearly matches what is already
   inside the row, and the two gaps come out level. */
.imm section.band.rails-band{ padding-block:clamp(2px,0.4vw,5px) clamp(6px,1vw,14px) !important }
/* Not zero: the note that follows sat directly against the ticker's hairline. Enough to separate them,
   far less than the 24px that was pushing the whole band down. */
.imm .rails-band .ticker{ margin-bottom:12px }
.imm .rails-band .cat{ padding:6px 12px 7px; gap:5px; font-size:.74rem }
.imm .rails-band .cat svg{ width:17px; height:17px }
@media (max-width:640px){
  .imm section.band.rails-band{ padding-block:8px 6px !important }
  .imm .rails-band .cat{ padding:5px 10px 6px; gap:4px; font-size:.7rem; min-width:96px }
}

/* The shared conduct line. Set apart with a rule rather than a colour: it is not a warning, and it
   applies to whoever is reading it. */
.respect{ margin-top:10px !important; padding-top:9px; border-top:1px solid var(--hair); color:var(--text-3) }

/* The Guardian add-on box, set tighter. Two long paragraphs stacked at body spacing made a checkbox and
   a note taller than the calendar above them; the reading is the same, the setting is closer. */
.secbox{ padding:14px !important }
.secbox .check{ line-height:1.45 }
.secbox .check .small{ line-height:1.45; display:block; margin-top:2px }

/* The Guardian conduct checkbox, at one size wherever it appears.
 *
 * It was marked `class="check tiny"` and rendered at neither size. `.tiny` and `.check` are both single
 * class selectors, so they carry the same specificity and source order decides: `.check` is declared some
 * nine hundred lines later and its .95rem simply won. The only reason the optional Guardian box looked
 * right was the `.secbox .check` rule above, which the required-Guardian box does not match because it
 * carries no `secbox` class - so the same sentence set itself at two different sizes on two screens.
 *
 * Sized on its own class rather than inherited from a parent, so it cannot drift again. Two classes beat
 * one, and it sits after `.secbox .check` so it also wins the tie there. */
.check.sec-rules{ font-size:.78rem; line-height:1.5; gap:9px; color:var(--text-2) }

/* ---------------------------------------------------------------------------
   Save and like are two different acts, so they are two different controls.

   Save is the bookmark over the photograph, and it fills solid when it is on: a bookmark you can come
   back to. Like is the heart under the photograph at the left, where a feed puts it: a signal, counted,
   and the thing operations reads to learn which kinds of listing people respond to.

   Both live at the end of the file because `.rcard.xcard .rcard-save` sets a colour further up with three
   classes, and a rule written where the others live simply loses to it. */
.rcard-save.rcard-save[aria-pressed="true"],
.xcard-save.xcard-save[aria-pressed="true"] { background:var(--cream); color:#242421 }
.rcard-save.rcard-save[aria-pressed="true"] svg,
.xcard-save.xcard-save[aria-pressed="true"] svg { fill:currentColor; stroke:currentColor }

/* The action row under the photograph. */
.rcard-acts{ display:inline-flex; align-items:center; gap:7px }
.rcard-like{ width:34px; height:34px; padding:0; margin:0; border:0; background:none; cursor:pointer;
  display:grid; place-items:center; border-radius:50%; color:var(--text); line-height:1 }
.rcard-like svg{ width:25px; height:25px; stroke-width:1.7; fill:none }
.rcard-like:hover{ opacity:.7 }
.rcard-like:focus-visible{ outline:2px solid var(--text-3); outline-offset:2px }
.rcard-like[aria-pressed="true"]{ color:#E8384F }
.rcard-like[aria-pressed="true"] svg{ fill:currentColor; stroke:currentColor }
.rcard-likes{ font-size:.86rem; color:var(--text-2); font-weight:600 }
@media (prefers-reduced-motion:no-preference){
  .rcard-like svg{ transition:fill .18s ease, transform .18s ease }
  .rcard-like[aria-pressed="true"] svg{ transform:scale(1.12) }
}

/* Nationality chips. The count is secondary to the country: a guest is reading "United Kingdom", and the
   3 beside it is how many, not part of the name. */
.natchips .chip { gap:6px }
.natchips .chip small { font-size:.72em; font-weight:700; opacity:.55; font-variant-numeric:tabular-nums }

/* ---- Feed card foot ----
   Two decisions and two gestures. The decisions read as buttons; the gestures are icons, because Save and
   Share are things you do to a card rather than choices you are being asked to make, and giving them word
   buttons put four equal rectangles under every face. `margin-top:auto` pins the row to the bottom of the
   card so a row of cards ends on one line whatever length of name or bio sits above it. */
.fcta{ display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:14px }
.fcta .btn{ flex:0 1 auto }
.fcta-icons{ display:flex; gap:2px; margin-left:auto }
.btn-icon{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border:0; border-radius:999px; background:transparent; color:var(--text-2); cursor:pointer;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease) }
.btn-icon svg{ width:18px; height:18px }
.btn-icon:hover{ background:var(--hair-soft, rgba(20,23,26,.06)); color:var(--text) }
.btn-icon:focus-visible{ outline:2px solid var(--sky); outline-offset:2px }
.btn-icon[aria-pressed="true"]{ color:var(--teal) }
.btn-icon[aria-pressed="true"] svg{ fill:currentColor }

/* The area line is a caveat, not a fact about the host, so it reads as one: no border, no fill, no full
   width band repeating itself down a grid of cards. */
.fdist{ display:flex; align-items:center; gap:6px; font-size:.8rem; color:var(--text-3, var(--text-2)); opacity:.85 }
.fdist svg{ width:12px; height:12px; flex:none }

/* The card is a column, so the foot can be pushed to the bottom of it. */
.host .body{ flex:1 }

/* ---- Price on the button ----
   The figure that decides whether the button is pressed, on the button. Separated by a hairline rather
   than a gap so it reads as one control with two parts, and tabular figures so a column of cards lines
   its prices up instead of shuffling by digit width. */
.btn-price{ display:inline-flex; align-items:center; gap:9px }
.btn-price .btn-price-v{ padding-left:9px; border-left:1px solid rgba(255,255,255,.28);
  font-variant-numeric:tabular-nums; font-weight:700 }
.btn-price .btn-price-v small{ font-weight:500; opacity:.72; font-size:.82em; margin-left:1px }

/* Book sits on the name line, pushed to the right of it. `flex:none` so a long public name shortens
   itself rather than squeezing the price, and the name gets the ellipsis instead. */
.host .name .name-book{ margin-left:auto; flex:none }
.host .name{ min-width:0 }
.host .name .name-txt{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* ---- Host card: padding that matches the frame it is actually in ----
   The body carried `padding:12px 2px 0`, written for a borderless card where the photograph IS the card
   and text below it needs no inset because there is no frame to sit inside. That treatment never applies:
   `.glass{border:1px solid var(--edge)!important}` is declared after `.host{border:0!important}` at the
   same specificity, so the later rule wins and every one of these renders as a bordered panel. The result
   was a framed card whose name, price and details sat 2px from the border with nothing at all beneath the
   last row - which is what "the content is overlaying" and "the spacing isn't good" were describing.
   The photograph stays flush to the frame, because it is the top of the card; only the text is inset. */
.host .body{ padding:14px 16px 16px }
.fcta{ padding-top:16px }

/* Card buttons, 20% shorter.
   `.btn{min-height:44px}` is declared after `.btn-sm{min-height:30px}` at the same specificity, so every
   small button on a card was rendering at the full 44px touch target meant for a page's primary action.
   On a card the button is not the page's main act, it is one row of it. 44 - 20% = 35px, which is still
   a comfortable target next to 16px text. */
.host .name-book, .host .fcta .btn{ min-height:35px }

/* A label never shrinks its box out from under its own text. `.tag` has padding and a background but no
   clipping, so a shrunk tag spills its word across whatever sits next to it. Anywhere a tag shares a row
   with something that cannot shrink, it holds its size and the flexible thing beside it gives way. */
.host .name .tag{ flex:none }

/* ---- Admin menu: the last item stays inside the panel ----
   The open sheet is a flex column with a max height and `overflow:auto`, and the nav inside it is a flex
   child. A flex child will not shrink below its own content without `min-height:0`, so the nav kept its
   full height, the sheet could not scroll it, and the last row — Sign out — was pushed through the
   rounded bottom edge and clipped by it. The scroller moves to the nav, which is the thing with the rows
   in it, and the sheet goes back to simply clipping its own corners. */
@media (max-width: 959px) {
  .studio-sheet[data-open] { overflow: hidden; }
  .studio-nav[data-open] { min-height: 0; overflow-y: auto; padding-bottom: 2px; }
}

/* ---------- hero: portrait wall (wall.js) ----------
   Replaces the rotating city photograph inside #heroBg. The wall draws its own ground and print
   frames from these four tokens so a theme switch repaints it; the gradient, veil and notes above
   it must not take the pointer, or the prints never lift toward the cursor. */
:root{--wall-ground:#141412;--wall-raised:#1B1C1A;--wall-shadow:rgba(0,0,0,.6);--wall-raise:rgba(0,0,0,.85)}
.cine.hero-ref #heroBg{z-index:0}
.wall{position:absolute;inset:0;touch-action:pan-y}
.wall canvas{display:block}
.cine.hero-ref .hero-grade,.cine.hero-ref .hero-veil,.cine.hero-ref .notes{pointer-events:none}

/* Stepping out of the role is a button in the header's actions row, beside the other things a host or a
   Guardian does from there. It was a boxed panel of its own beside the introduction - a heading, a
   sentence and a filled full-width button - which made the loudest thing on the page a control used
   occasionally, and left dead space under a one-line bio. The state it narrated is on the dot beside the
   name; what the switch costs is in the confirmation. */

/* Signed money in admin tables: losses in the stop colour, gains in the accent. */
.neg{color:var(--stop, #B3261E)}.pos{color:var(--accent, #8A6A44)}
/* The identity sheet fills the screen on a phone; on a laptop it floats. */
@media (max-width:640px){#identityModal{padding:0!important;align-items:stretch!important}#identityModal>div{width:100%!important;height:100dvh!important;max-height:none!important;border-radius:0!important}}

/* The photograph, full size, with the controls drawn over it.
   Clicking a card's picture used to open the host page — the card's own job, not the picture's. This is
   the same arrangement the apps use: the shot fills the frame, the counter sits bottom-left and Book
   bottom-right, both on the image, because the moment somebody decides is while looking at a face. */
.shot-view{ background:rgba(14,26,24,.8); backdrop-filter:blur(6px); padding:10px }
/* The frame hugs the photograph, so the controls sit on the picture rather than beside it.
 *
 * This said `width:100%`, which made the frame 980px wide whatever the picture was. The arrows, the
 * counter and Book are all absolutely positioned against the frame, so against a portrait shot on a wide
 * screen they lined up against the frame's edges and floated out in the black margin, yards from the
 * image. Both viewers share this class, so both were wrong.
 *
 * `fit-content` restores what the rule nine hundred lines above already intended - "The frame is the
 * photograph. Everything else is positioned against it" - which that rule could not enforce on its own,
 * because it and this one are both single-class selectors and this one is declared later. */
.shot-frame{ position:relative; margin-inline:auto; max-width:min(980px,100%); width:fit-content;
  display:flex; align-items:center; justify-content:center }
.shot-frame img{ display:block; max-width:100%; max-height:min(78dvh,620px); width:auto; height:auto;
  border-radius:18px; box-shadow:0 18px 60px rgba(0,0,0,.45) }
.shot-arrow{ position:absolute; top:50%; transform:translateY(-50%); appearance:none; border:0;
  width:40px; height:40px; border-radius:999px; background:rgba(14,26,24,.4); color:#fff;
  font-size:22px; line-height:1; cursor:pointer; display:grid; place-items:center }
.shot-arrow:hover{ background:rgba(14,26,24,.62) }
.shot-arrow.left{ left:10px } .shot-arrow.right{ right:10px }
.shot-bar{ position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center;
  justify-content:space-between; gap:10px; padding:14px }
.shot-count{ font-size:12px; font-weight:600; color:#fff; background:rgba(14,26,24,.4);
  border-radius:999px; padding:5px 10px }
.shot-close{ position:absolute; top:14px; right:14px; appearance:none; border:0; width:38px; height:38px;
  border-radius:999px; background:rgba(14,26,24,.4); color:#fff; font-size:20px; line-height:1;
  cursor:pointer; display:grid; place-items:center }
.shot-close:hover{ background:rgba(14,26,24,.62) }
.shot-arrow:focus-visible,.shot-close:focus-visible{ outline:2px solid #fff; outline-offset:2px }
@media (max-width:520px){ .shot-arrow{ width:34px; height:34px } .shot-frame img{ max-height:70dvh } }

/* The Guardian's score, beside the count of sessions they have worked. Shown rather than sorted on:
   the platform assigns a Guardian, so this answers "who are these people" without offering a choice. */
.gcard-rating{ display:flex; align-items:baseline; gap:8px; margin:0 0 2px }
.gcard-rating b{ font-size:1.05rem; font-variant-numeric:tabular-nums }
.gcard-stars{ letter-spacing:1px; color:#B8860B; font-size:.82rem }
.gcard-rating .tiny{ color:var(--muted, #6b7280) }

/* The Guardian choice. Each one charges their own rate, so these are priced options rather than a list:
   the selected row is marked the way a chosen slot is, and the whole row is the target, not the dot. */
.secpick{ border:1px solid var(--hair); border-radius:12px; padding:10px 12px; cursor:pointer }
.secpick:hover{ border-color:var(--accent-2) }
.secpick.on{ border-color:var(--accent); background:rgba(138,106,68,.06) }
.secpick input{ margin-top:3px; accent-color:var(--accent); flex:none }
.secpick .between{ display:flex; justify-content:space-between; gap:10px; align-items:baseline }

/* =====================================================================
   APP SKIN — mobile web, drawn the way the native apps draw it
   =====================================================================
   The phone and the browser were showing the same product in two visual
   languages. The apps are flat: paper ground, hairline rules, a panel
   that is a fill and an edge and nothing else. The web was glass: every
   surface translucent, blurred, lifted on two shadows and an inset
   highlight, with four blurred orbs drifting behind it. Same palette,
   opposite material - which is why the app felt like the product and the
   mobile site felt like a website about it.

   This is the last layer in the file and it is presentation only: no
   markup moves, no copy changes, no behaviour is touched. Every value
   below is the value the Android app computes, converted at 1dp = 1px,
   and every colour is a token that both themes already redefine, so the
   dark app and the dark site land on the same greys without a second
   palette here.

   Scoped to 767px and under. The desktop site keeps the glass.
   ===================================================================== */
@media (max-width:767px){

  /* ---- ground: flat paper, no orbs, no grain -------------------------
     Compose paints `p.paper` and stops. The radial wash and the four
     blurred orbs have no counterpart on the phone, and under a flattened
     panel they read as smudges rather than atmosphere. */
  .atmos{background:var(--bg)}
  .atmos .orb,.atmos::after{display:none}

  /* ---- surfaces: Modifier.card() ------------------------------------
     clip(18dp) → background(paperAlt) → border(1dp, hair). No blur, no
     shadow, no inset highlight, and no hover lift: a phone has no hover,
     so `:hover` on a card only means "stays lifted after the tap". */
  .glass,.glass-strong,.glass-tint{
    background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none;
    border:1px solid var(--hair);border-radius:var(--r-l);box-shadow:none}
  .glow-aqua,.glow-sky,.glow-lav,.glow-peach{box-shadow:none}
  .lift:hover,.host:hover,.card-activity:hover{transform:none;box-shadow:none}
  .notice{background:var(--panel);border-color:var(--hair)}

  /* ---- the top bar: Bar() -------------------------------------------
     Paper, flush, full width, no radius and no shadow, with the title in
     the serif at 21. The web bar carries a brand and its controls where
     the app carries a back arrow, so the furniture stays; only the
     material changes. */
  .nav .bar{
    background:var(--bg)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    border:0;border-bottom:1px solid var(--hair);border-radius:0!important;box-shadow:none!important}
  .nav.scrolled .bar{background:var(--bg)!important;box-shadow:none!important}
  .nav .title-m{font-family:var(--serif);font-weight:400;font-size:1.3rem;letter-spacing:0}
  .nav .icon-btn:hover{background:none}

  /* ---- the tab strip: NavigationBar ---------------------------------
     containerColor = paperAlt, tonalElevation 0, indicatorColor
     transparent. The web strip floated as a rounded card on two shadows
     and marked the current tab with a filled tan chip; Compose marks it
     by colour alone, ink against muted. */
  .tabs{
    left:0;right:0;bottom:0;padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none;
    border:0;border-top:1px solid var(--hair);border-radius:0;box-shadow:none}
  .tabs button{gap:4px;font-size:.69rem;font-weight:600;color:var(--text-3);border-radius:0}
  .tabs button svg{width:24px;height:24px}
  .tabs button[aria-current="page"]{background:none;color:var(--text)}
  .page.has-tabs{padding-bottom:calc(var(--s-8) + 84px)}

  /* ---- headings -----------------------------------------------------
     Instrument Serif at its single weight, never bolded: the face has no
     bold and a synthesised one coarsens it, which is why Theme.display
     pins FontWeight.Normal. */
  h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:0}
  h2{font-size:1.7rem;line-height:1.08}
  h3{font-size:1.25rem;line-height:1.15}
  /* Eyebrow(): 11sp SemiBold, 1.2sp tracked, in the accent. The rule and
     the gradient dash in front of it are web-only ornament. */
  .eyebrow{font-size:.69rem;font-weight:600;letter-spacing:.11em;color:var(--accent)}
  .eyebrow::before{display:none}

  /* ---- the bookings list: BookingsScreen ----------------------------
     LazyColumn, 20dp of side padding, and for each booking a hairline,
     then a 16dp row: a 66×82 thumbnail, the activity in the serif with
     two muted lines under it, and the state at the far right in small
     tracked capitals - accent while the booking is live, muted once it
     is history. No card, no gap, no photograph running the width.

     The state marker lives inside the thumbnail in the markup, so it is
     lifted out by dropping the thumbnail's positioning: `.float` is
     absolute, and with `.portrait` static the nearest positioned
     ancestor becomes the row itself. The thumbnail's `overflow:hidden`
     would otherwise clip it, so the rounding moves onto the image. */
  .hosts:has(.bcard){gap:0}
  /* `!important` because the desktop card layer above declares the fill
     and the edge that way, and a card edge is exactly what a list row
     must not have. */
  .host.bcard{
    position:relative;display:grid;grid-template-columns:66px 1fr;gap:14px;align-items:center;
    padding:16px 0;background:none!important;
    border:0!important;border-top:1px solid var(--hair)!important;border-radius:0;box-shadow:none}
  .host.bcard .portrait{
    position:static;overflow:visible;width:66px;height:82px;aspect-ratio:auto!important;background:none}
  .host.bcard .portrait img{width:66px;height:82px;border-radius:var(--r-s);object-fit:cover}
  .host.bcard .portrait .float{
    left:auto;right:0;top:50%;transform:translateY(-50%);max-width:38%;justify-content:flex-end}
  .host.bcard .body{padding:0;gap:3px;padding-right:86px}
  .host.bcard .name{font-family:var(--serif);font-weight:400;font-size:1.2rem;letter-spacing:0;line-height:1.15}
  .host.bcard .meta{font-size:.75rem;color:var(--text-3)}
  /* The state, as Compose sets it: ui(9, SemiBold, 1.1sp) in capitals,
     with no chip behind it and no icon beside it. */
  .host.bcard .status{
    background:none!important;border:0!important;padding:0;gap:0;
    font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-align:right;
    color:var(--text-3)!important}
  .host.bcard .status svg{display:none}
  .host.bcard .status.upcoming,.host.bcard .status.accepted,
  .host.bcard .status.live,.host.bcard .status.requested,
  .host.bcard .status.held{color:var(--accent)!important}

  /* Discover tiles are already what the app draws - a borderless 4:5
     photograph with its caption on the page beneath - once the glass is
     off. Only the name needs the serif it has in HostCard. */
  .host:not(.bcard) .name{font-family:var(--serif);font-weight:400;font-size:1.32rem;letter-spacing:0}

  /* ---- key and value: KV() ------------------------------------------
     The label yields in the UI face, the amount is monospaced and never
     wraps, and a hairline closes every row but the total. The total is
     the one the app rules off in ink above and sets at 17. */
  /* The label yields, the value takes the rest of the line and wraps inside
     its own box. Without a basis on either child the value simply overflowed
     its side of the row: "Non-refundable once accepted..." printed across
     the word "Cancellation" and the two were unreadable on top of each
     other. This is the same rule the app's KV states in Compose - the label
     weighted, the amount measured after it. */
  .kv{padding:11px 0;align-items:baseline}
  /* `min-content`, not `0`. The overflow guard near the top of this file sets
     `min-width:0` on every element, which for a flex item removes the floor
     that normally stops it shrinking past its own text: the label collapsed
     to 48px and "Cancellation" printed straight out of its box and under the
     value beside it. This restores the floor for this one column, so a long
     label wraps instead of overflowing. */
  .kv .k{flex:0 1 auto;min-width:min-content;font-size:.88rem;color:var(--text-3)}
  /* Monospaced and right-aligned, but allowed to wrap: not every value in
     this column is money. Two of the host's payout rows carry a sentence
     rather than an amount, and pinned to one line they ran straight out
     past the edge of the card. The total below is always an amount, so
     that one is held on its line. */
  .kv .v{flex:1 1 auto;min-width:0;font-family:var(--mono);font-weight:400;font-size:.81rem;
    color:var(--text);white-space:normal;overflow-wrap:anywhere}
  /* Monospace is for data. A few rows in this column carry a sentence rather
     than a figure, and the web already marks those with `.small`; set in the
     mono face they read as a machine had written them, which is not what the
     app does either - Compose puts prose through `Theme.ui`. */
  .kv .v.small{font-family:var(--body);font-size:.82rem;color:var(--text-2);overflow-wrap:normal}
  .kv.total{border-top:1px solid var(--text);padding-top:12px;margin-top:6px}
  .kv.total .v{font-family:var(--mono);font-weight:400;font-size:1.06rem;color:var(--text);white-space:nowrap}

  /* ---- buttons: PrimaryButton / QuietButton -------------------------
     A 44px pill in ink with the label inverted, or the same pill with a
     hairline and no fill. The web gradient and its coloured drop shadow
     exist nowhere in either app. The `!important` matches the earlier
     button layers in this file, which use it too. */
  .btn{min-height:44px;font-family:var(--display);font-weight:600;font-size:.94rem;border-radius:var(--r-pill)}
  .btn:hover{transform:none}
  .btn-primary{background:var(--btn-fill)!important;color:var(--btn-ink)!important;border-color:transparent!important;box-shadow:none!important}
  .btn-secondary{background:transparent!important;color:var(--text)!important;border:1px solid var(--hair)!important;backdrop-filter:none!important;box-shadow:none!important}
  .btn-ghost{background:transparent!important;color:var(--text)!important}

  /* ---- chips: FlowChips() -------------------------------------------
     Off: panel fill, hairline, ink at 13 SemiBold. On: ink fill, paper
     text, no border. */
  .chip{min-height:38px;padding:0 13px;font-size:.81rem;font-weight:600;
    background:var(--panel)!important;border:1px solid var(--hair)!important;color:var(--text)!important;box-shadow:none}
  .chip:hover{transform:none}
  .chip[aria-pressed="true"],.chip.on{background:var(--text)!important;color:var(--bg)!important;border-color:transparent!important}
  .chip[aria-pressed="true"] svg,.chip.on svg{color:var(--bg)}

  /* ---- badges: Pill() -----------------------------------------------
     A tinted hairline round 11sp SemiBold, with nothing filled in. */
  .tag,.gbadge{background:transparent!important;border:1px solid var(--border-tint)!important;
    color:var(--accent)!important;font-size:.69rem;font-weight:600;padding:5px 11px;box-shadow:none}
  /* A Pill is the width of its label. Inside a stretching column an
     inline-flex badge still takes the full line, which turned a two-word
     badge into a rule across the card. */
  .gbadge{align-self:flex-start;width:fit-content}
  .tag.sky,.tag.lav,.tag.peach{background:transparent!important;color:var(--accent)!important}

  /* ---- fields: BoxField() -------------------------------------------
     paperAlt inside a hairline at 14dp, the edge going to ink on focus,
     and a focus ring rather than a coloured glow. */
  .input,.select,.textarea{min-height:46px;background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-m)}
  .input:focus,.select:focus,.textarea:focus{border-color:var(--text);box-shadow:none}
  .check input{accent-color:var(--accent)}

  /* ---- the booking bar: the sheet the detail screen docks -----------
     Flush and flat, like the tab strip it sits above. */
  .sheet{left:0;right:0;bottom:0;border-radius:0;border:0;border-top:1px solid var(--hair);
    background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .sheet .p{font-family:var(--mono);font-weight:400}

  /* ---- the docked strips: the SMS offer and the policy gate ---------
     Compose draws these as a flat band flush against the edge of the
     screen. On the web they were floating rounded cards on a shadow,
     which is the one thing on the page that still read as a website. */
  .restrict-bar{border-radius:0!important;border:0!important;border-top:1px solid var(--hair)!important;
    background:var(--panel)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    box-shadow:none!important;left:0!important;right:0!important}
}

/* =====================================================================
   The auth card: sign in, create account, host join, reset.
   ---------------------------------------------------------------------
   It was 560px wide, padded to 36px, and inherited the page's own vertical
   rhythm. On a form that is two fields and a button that produced a panel
   the height of most of a screen, the majority of it empty - a small task
   presented as a large one, which is its own kind of friction at the exact
   moment somebody is deciding whether to bother.

   Desktop only. On a phone the card is already the width of the screen and
   the rhythm reads correctly, so there is nothing to take out and taking it
   out anyway would just make a form harder to fill on the device where that
   matters most.

   About forty per cent comes out, and it comes out of the spacing rather
   than the type: fields keep a 44px target and the labels keep their size,
   because a form you cannot comfortably hit or read is not smaller, it is
   worse. What shrinks is the measure, the padding, the gaps between rows
   and the display heading, which was set for a page title and is sitting
   on a card.
   ===================================================================== */
/* The base measure, which used to be an inline style on the shell. Without it
   the wrap falls back to the page's own 1560px cap and the card runs the width
   of a laptop. */
.authwrap{ max-width:560px }
/* The fields match the buttons beside them: one shape for everything you can press or type into here. */
@media (min-width:768px){
  /* 392px read as a phone screen dropped onto a desktop. Wide enough now for the two-button switcher,
     a notice and the fields to sit with room, without becoming a form that stretches across the page. */
  .authwrap{ max-width:560px }   /* the wrap pads 40px a side; the card itself is 480 */
  .authcard{ padding:clamp(24px,3.5vw,34px); gap:var(--s-4) }
  .authcard h2{ font-size:1.75rem; line-height:1.1; margin:0 }
  .authcard .eyebrow{ margin-bottom:2px }
  .authcard .field{ gap:6px }
  .authcard .input,.authcard .select{ min-height:48px; font-size:1rem }
  .authcard .btn{ min-height:50px; font-size:1rem }
  .authcard .chips{ gap:6px }
  .authcard .small,.authcard .tiny{ line-height:1.45 }
}
/* Below that the card keeps the shell's own 560px cap and the page padding,
   which on any phone resolves to the full width with a gutter. */

/* =====================================================================
   The cookie notice.
   ---------------------------------------------------------------------
   Flat, flush to the bottom edge, and out of the way of the tab strip on
   a phone. It is a notice rather than a gate: nothing behind it is
   blocked, nothing waits for an answer, and the only control dismisses
   it. So it gets the weight of a status message, not of a dialog - no
   scrim, no trapped focus, no second "manage preferences" door leading
   to a choice that does not exist.
   ===================================================================== */
/* Centred and contained rather than a full-width bar.
 *
 * Edge to edge, it read as chrome - part of the furniture, the thing every site has and nobody looks at.
 * A card with a measure, centred, reads as something written on purpose, which is the point: this notice
 * exists to be read once and then never shown again. It stays out of the middle of the screen, because
 * it is a notice and not a gate, and nothing behind it is blocked while it is up. */
.cookie-bar{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(18px + env(safe-area-inset-bottom)); z-index:82;
  width:min(660px, calc(100vw - 32px));
  display:flex; align-items:center; gap:16px; text-align:left;
  padding:14px 18px; border-radius:var(--r-l);
  background:var(--panel); border:1px solid var(--hair); box-shadow:var(--shadow-2);
  font-size:.84rem; line-height:1.45; color:var(--text-2);
}
.cookie-bar b{ display:block; color:var(--text); font-weight:600; margin-bottom:2px }
.cookie-bar a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px }
.cookie-bar .btn{ flex:none }
/* Above the tab strip, which is itself fixed to the bottom on a phone. */
body.tabs-on .cookie-bar{ bottom:calc(78px + env(safe-area-inset-bottom)) }
@media (max-width:640px){
  .cookie-bar{ flex-direction:column; align-items:center; text-align:center; gap:10px; font-size:.8rem;
               bottom:calc(12px + env(safe-area-inset-bottom)); width:calc(100vw - 24px); padding:14px 16px }
  .cookie-bar .btn{ width:100% }
}
/* A chosen chip in dark mode: cream fill, dark ink. The phone-width rule above set the text to --bg, which
   in dark mode is a light tone, so a chosen chip read as cream on cream. */
:root[data-theme="dark"] .chip[aria-pressed="true"], :root[data-theme="dark"] .chip.on { background:var(--cream)!important; color:#161716!important; }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .chip[aria-pressed="true"], :root:not([data-theme="light"]) .chip.on { background:var(--cream)!important; color:#161716!important; }
}


/* Discover card footer as one row: like | name+location | price+Request (was three stacked rows). */
.fcard-row3 { display:flex; align-items:center; gap:14px; }
.fcard-row3 > .rcard-acts { flex:none; display:inline-flex; align-items:center; gap:6px; }
.fcard-row3 .fcard-mid { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.fcard-row3 .fcard-end { flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:8px; white-space:nowrap; }
/* Reduced CTA in the discover card footer — a smaller Request than the page's default button. */
.fcard-row3 .fcard-end .btn { min-height:32px; padding:0 15px; font-size:.8rem; }

/* Footer: get the app, the same card as the posters: the QR with the gold mark in its centre, "Scan to
   download", then both store badges side by side. White with a hairline in light mode, the poster cream in
   dark mode. The QR itself stays dark on light in both: inverted codes fail on some phone cameras. On a
   phone the QR is hidden, since nobody can scan their own screen, and the badges do the job. */
@media (min-width:901px){ footer.foot .cols{ grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)) } }
footer.foot .foot-get{display:inline-flex;flex-direction:column;align-items:center;margin-top:16px;padding:8px 8px 8px;border-radius:11px;background:#FFFFFF;border:1px solid rgba(20,23,26,.12);color:#14171A;max-width:100%;box-sizing:border-box;text-align:center}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) footer.foot .foot-get{background:#F6F4EF;border-color:transparent} }
:root[data-theme="dark"] footer.foot .foot-get{background:#F6F4EF;border-color:transparent}
/* In the right-hand column, the card sits flush with the footer's right edge, over the icons in the bottom bar. */
/* The QR card is the last cell of the footer row: top-aligned with the column headings, flush right, next to Account. */
@media (min-width:901px){ footer.foot .cols{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)) auto} }
@media (min-width:701px){ footer.foot .foot-get-cell{justify-self:end;align-self:start} footer.foot .foot-get-cell .foot-get{margin-top:0} }
@media (min-width:701px) and (max-width:900px){ footer.foot .foot-get-cell{grid-column:2} }

footer.foot .foot-qr{position:relative;display:block;line-height:0}
footer.foot .foot-qr>img{width:110px;height:110px;display:block}
footer.foot .foot-qr-logo{position:absolute;left:50%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%);background:inherit;border-radius:6px;display:grid;place-items:center}
footer.foot .foot-get .foot-qr-logo{background:#FFFFFF}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) footer.foot .foot-get .foot-qr-logo{background:#F6F4EF} }
:root[data-theme="dark"] footer.foot .foot-get .foot-qr-logo{background:#F6F4EF}
footer.foot .foot-qr-logo img{width:19px;height:19px;display:block}
footer.foot .foot-get-h{margin:6px 0 0;font-size:.44rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#14171A;white-space:nowrap}
footer.foot .foot-get-sub{margin:1px 0 6px;font-size:.5rem;color:#5B6168}
footer.foot .foot-badges{display:flex;flex-wrap:nowrap;justify-content:center;gap:2px;align-items:center}
footer.foot .foot-badges a{line-height:0;flex:none}footer.foot .foot-badges a:hover{text-decoration:none;opacity:.88}
footer.foot .foot-badges img{height:17px;width:auto;display:block}
@media (max-width:700px){footer.foot .foot-get{display:block;padding:0;background:none!important;border:0;text-align:center}footer.foot .foot-qr,footer.foot .foot-get-h,footer.foot .foot-get-sub{display:none}footer.foot .foot-badges{justify-content:center;gap:10px}footer.foot .foot-badges img{height:40px}}
/* Footer bottom bar: the legal line on the left, the mail icon and social handles on the right, one line at every
   page width. Icons are the official brand shapes used as masks, so they take the footer's text colour in light
   and dark mode and warm to the accent on hover. */
footer.foot .foot-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 28px;padding:22px 0 6px}
footer.foot .foot-bar .tiny{margin:0}
footer.foot ul.foot-social{list-style:none;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:2px;margin:0 -8px 0 0;padding:0}
footer.foot ul.foot-social li{margin:0;padding:0}
footer.foot .foot-social a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;color:var(--text-3,#726B5C);transition:color .2s ease,background-color .2s ease}
footer.foot .foot-social a:hover,footer.foot .foot-social a:focus-visible{color:var(--accent,#8A6A44);background:var(--accent-soft,rgba(138,106,68,.1))}
footer.foot .foot-social span{width:18px;height:18px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
@media (max-width:520px){ footer.foot .foot-bar{flex-direction:column;align-items:center;text-align:center} footer.foot ul.foot-social{margin:0;gap:0} footer.foot .foot-social a{width:44px;height:44px} }
@media (prefers-reduced-motion:reduce){ footer.foot .foot-social a{transition:none} }
/* Larger QR on desktop and tablet (150px, easier to scan from a laptop screen); text and badges scale with it. */
@media (min-width:701px){
  footer.foot .foot-get{padding:11px;border-radius:14px}
  footer.foot .foot-qr>img{width:150px;height:150px}
  footer.foot .foot-qr-logo{width:34px;height:34px;border-radius:8px}
  footer.foot .foot-qr-logo img{width:25px;height:25px}
  footer.foot .foot-get-h{margin-top:9px;font-size:.56rem}
  footer.foot .foot-get-sub{font-size:.64rem;margin:2px 0 8px}
  footer.foot .foot-badges{gap:4px}
  footer.foot .foot-badges img{height:22px}
}