/* Clew website — one stylesheet. Ported from Clew 1.0's public pages (src/components/public/public-pages.css,
   home-preview/home-preview.css and the few app classes they used from globals.css: .cue-card, .cue-advisory-sign,
   the family notice, .cab-card / .cab-btn / .cab-input). Colours from web/brand/clew-brand.json.
   The front page is Quiet's night look whatever the theme; the sign-up and demo pages follow light / dark. */

@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("/assets/fonts/Barlow-Regular.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("/assets/fonts/Barlow-Medium.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("/assets/fonts/Barlow-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-weight: 700 800; font-display: swap; src: url("/assets/fonts/Barlow-Bold.ttf") format("truetype"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-display: swap; src: url("/assets/fonts/BarlowCondensed-Medium.ttf") format("truetype"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("/assets/fonts/BarlowCondensed-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("/assets/fonts/BarlowCondensed-Bold.ttf") format("truetype"); }

:root {
  --font: Barlow, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-num: "Barlow Condensed", Barlow, -apple-system, "Segoe UI", Roboto, sans-serif;
  --brand: #2f9a70; --brand-ink: #0f1412; --sign-green: #4cc28f; --warn-yellow: #f5b800; --warn-yellow-ink: #16181b;
  --focus-on-dark: #5cc893;
  /* the sign-up / demo pages (1.0's .cab light tokens) */
  --c-ground: #eef0ee; --c-card: #ffffff; --c-soft: #f0f1ee; --c-ink: #16181b; --c-muted: #5b636b; --c-line: #d5d9d5;
  --c-bar: #16181b; --c-bar-2: #2a2f34; --c-amber-bg: #fbefd0; --c-ok-bg: #e3f3ea; --c-fail: #b42318; --c-fail-bg: #fde8e7;
  --c-yellow: #f5b800;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #3fae84;
    --c-ground: #101316; --c-card: #1b1f23; --c-soft: #252a30; --c-ink: #eceef0; --c-muted: #9aa2aa; --c-line: #2b3137;
    --c-bar: #0a0c0e; --c-bar-2: #23282d; --c-amber-bg: #352b12; --c-ok-bg: #16301f; --c-fail: #f87171; --c-fail-bg: #3b1a1a;
  }
}
:root[data-theme="dark"] {
  --brand: #3fae84;
  --c-ground: #101316; --c-card: #1b1f23; --c-soft: #252a30; --c-ink: #eceef0; --c-muted: #9aa2aa; --c-line: #2b3137;
  --c-bar: #0a0c0e; --c-bar-2: #23282d; --c-amber-bg: #352b12; --c-ok-bg: #16301f; --c-fail: #f87171; --c-fail-bg: #3b1a1a;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); background: var(--c-ground); color: var(--c-ink); line-height: 1.4; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------------------------------------------
   Front page — the teaser (Quiet's night look whatever the theme) */
body.teaser { position: fixed; inset: 0; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; background: #12161b; color: #e8ecef; color-scheme: dark; }
.teaser-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.teaser-map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.teaser-layer { position: absolute; inset: 0; }
.teaser-wash { background: linear-gradient(90deg, rgb(18 22 27 / 0.9) 0%, rgb(18 22 27 / 0.7) 42%, rgb(18 22 27 / 0.12) 100%); }
.teaser-top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: max(16px, env(safe-area-inset-top, 0px)) 18px 0; }
.teaser-name { font-family: var(--font-num); font-weight: 600; font-size: 1.5rem; letter-spacing: 0.04em; color: #e8ecef; }
.teaser-signin { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid rgb(255 255 255 / 0.22); border-radius: 22px; background: rgb(255 255 255 / 0.08); color: #c4cbd2; font-size: 0.98rem; font-weight: 600; cursor: pointer; }
.teaser-signin:hover { background: rgb(255 255 255 / 0.14); color: #fff; }
.teaser-main { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 24px 8vw 72px; max-width: min(760px, 100%); }
.teaser-line { margin: 0; font-family: var(--font-num); font-weight: 500; font-size: clamp(2.7rem, 6.6vw, 5.6rem); line-height: 0.95; letter-spacing: -0.005em; color: #e8ecef; text-wrap: balance; }
.teaser-soon { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 1.15rem; font-weight: 600; color: #c4cbd2; letter-spacing: 0.02em; }
.teaser-dot { width: 9px; height: 9px; border-radius: 50%; background: #60a5fa; box-shadow: 0 0 0 4px rgb(96 165 250 / 0.18); }
.teaser-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: #8c96a0; font-size: 1rem; font-weight: 600; text-decoration: underline; text-decoration-color: rgb(140 150 160 / 0.45); text-underline-offset: 4px; }
.teaser-link:hover { color: #e8ecef; }
.teaser-place { position: absolute; z-index: 1; right: 18px; bottom: max(14px, env(safe-area-inset-bottom, 0px)); margin: 0; font-size: 0.88rem; font-weight: 600; color: rgb(196 203 210 / 0.7); letter-spacing: 0.02em; }
.teaser-noscript { position: relative; z-index: 2; padding: 16px; }
.teaser a:focus-visible, .teaser button:focus-visible, .teaser input:focus-visible, .teaser h2:focus-visible { outline: 3px solid var(--focus-on-dark); outline-offset: 2px; }

/* a state fading in / out (Quiet's pace); every state keeps its room, so nothing jumps */
.hp-fade { opacity: 0; visibility: hidden; transition: opacity 0.9s ease, visibility 0s linear 0.9s; }
.hp-fade.on { opacity: 1; visibility: visible; transition: opacity 0.9s ease 0.15s, visibility 0s; }
.hp-rest { display: flex; flex-direction: column; align-items: flex-start; }
.hp-stage { display: grid; align-items: end; }
.hp-stage > .hp-fade { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.hp-caption { margin: 0; font-family: var(--font-num); font-weight: 500; font-size: clamp(2.3rem, 5.2vw, 4.4rem); line-height: 0.98; color: #e8ecef; text-wrap: balance; }
.hp-sub { margin: 0; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.4; color: #aeb7c0; max-width: 34ch; }
.hp-navigate { display: inline-flex; align-items: center; gap: 8px; min-height: 50px; margin-top: 8px; padding: 0 20px 0 22px; border-radius: 25px; border: 1px solid rgb(76 194 143 / 0.55); background: rgb(76 194 143 / 0.1); color: var(--sign-green); font-size: 1.08rem; font-weight: 700; letter-spacing: 0.01em; cursor: pointer; }
.hp-navigate:hover { background: rgb(76 194 143 / 0.18); color: #6fd6a8; }
.hp-navigate:disabled { opacity: 0.55; cursor: default; }
.hp-top-left { display: flex; align-items: center; }
.hp-top-right { display: flex; align-items: center; gap: 8px; }

/* the moments — Go's cue cards, top right over the map */
.hp-cues { position: absolute; z-index: 1; top: calc(max(16px, env(safe-area-inset-top, 0px)) + 64px); right: 24px; display: grid; justify-items: end; pointer-events: none; }
.hp-cues > .hp-fade { grid-area: 1 / 1; }
.cue-card { display: flex; align-items: center; gap: 12px; background: rgb(22 24 27 / 0.92); color: #fff; border-radius: 18px; padding: 10px 16px 10px 10px; box-shadow: 0 8px 24px rgb(22 24 27 / 0.25); }
.cue-card > div:last-child { display: flex; flex-direction: column; gap: 2px; }
.cue-card strong { font-family: var(--font-num); font-size: 1.9rem; font-weight: 600; line-height: 1; }
.cue-card span { font-size: 0.95rem; color: #c9ced3; font-weight: 600; }
.cue-card.grade.warn { box-shadow: 0 8px 24px rgb(22 24 27 / 0.25), inset 0 0 0 3px var(--warn-yellow); }
.cue-advisory-sign { width: 60px; flex: none; border: 2px solid #16181b; outline: 2px solid var(--warn-yellow); border-radius: 6px; background: var(--warn-yellow); color: var(--warn-yellow-ink); display: flex; flex-direction: column; align-items: center; padding: 3px 0; }
.cue-advisory-sign span { font-size: 0.5rem; font-weight: 800; color: #16181b; letter-spacing: 0.02em; line-height: 1.05; }
.cue-advisory-sign b { font-family: var(--font-num); font-size: 1.6rem; line-height: 1; }
.hp-demo { font-style: normal; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8c96a0; }
.hp-cue-stack { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.cue-card.hp-cue-clear { box-shadow: 0 8px 24px rgb(22 24 27 / 0.25), inset 0 0 0 3px var(--warn-yellow); }
.cue-card.hp-cue-ok { box-shadow: 0 8px 24px rgb(22 24 27 / 0.25), inset 0 0 0 3px var(--sign-green); }
.cue-card.hp-cue-ok strong, .cue-card.hp-cue-clear strong { font-size: 1.6rem; }
.hp-clear-sign { width: 64px; padding: 4px 0; }
.hp-clear-sign span { font-size: 0.48rem; }
.hp-clear-sign b { font-size: 1.3rem; margin-top: 1px; }
.hp-ok-badge { flex: none; width: 52px; height: 52px; margin: 6px; border-radius: 50%; display: grid; place-items: center; background: var(--sign-green); color: #10231b; }
.hp-cues > .hp-cue-family { margin-top: 22vh; }
.family-notice { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 260px; padding: 16px 18px; border-radius: 18px; background: rgb(30 36 42 / 0.97); box-shadow: 0 12px 36px rgb(0 0 0 / 0.5), inset 0 0 0 2px var(--sign-green); color: #e8edf2; }
.family-count { font-size: 1.2rem; font-weight: 700; }
.family-play { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 24px; background: #3fae84; color: var(--brand-ink); font-size: 1.05rem; font-weight: 700; box-shadow: 0 4px 14px rgb(0 0 0 / 0.35); }

/* Navigate Clew — the explorer: Clew's place panel (a dark card, a heading, a body that scrolls inside) */
.hp-explorer { position: absolute; z-index: 5; top: calc(max(16px, env(safe-area-inset-top, 0px)) + 76px); left: 18px; bottom: max(16px, env(safe-area-inset-bottom, 0px)); width: clamp(360px, 44vw, 720px); display: flex; flex-direction: column; border-radius: 22px; background: rgb(22 26 31 / 0.985); border: 1px solid rgb(255 255 255 / 0.1); box-shadow: 0 20px 60px rgb(0 0 0 / 0.5); color: #e8ecef; overflow: hidden; animation: hp-rise 0.35s ease backwards; }
@keyframes hp-rise { from { opacity: 0; transform: translateY(12px); } }
.hp[data-exploring] .teaser-place { visibility: hidden; }
.hp-ex-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 14px 10px 20px; border-bottom: 1px solid rgb(255 255 255 / 0.07); }
.hp-ex-head h2, .hp-ex-detail h2 { margin: 0; font-size: 1.45rem; font-weight: 700; outline: none; }
.hp-ex-sub { margin: 2px 0 0; color: #8c96a0; font-size: 0.92rem; }
.hp-ex-close { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 22px; border: 1px solid rgb(255 255 255 / 0.2); background: rgb(255 255 255 / 0.06); color: #c4cbd2; cursor: pointer; }
.hp-ex-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 10px; border: 1px solid rgb(255 255 255 / 0.22); border-radius: 22px; background: rgb(255 255 255 / 0.08); color: #c4cbd2; font-size: 0.98rem; font-weight: 600; cursor: pointer; }
.hp-ex-back.wide { align-self: flex-start; padding: 0 18px; margin-top: 4px; }
.hp-ex-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 14px 18px; display: flex; flex-direction: column; gap: 6px; }
.hp-ex-group { display: flex; flex-direction: column; gap: 6px; }
.hp-ex-group ul, .hp-ex-highlights { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hp-ex-group-h { margin: 12px 6px 2px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #8c96a0; }
.hp-ex-row { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; min-height: 64px; padding: 12px 12px 12px 14px; border-radius: 16px; border: 0; background: rgb(255 255 255 / 0.05); color: #e8ecef; cursor: pointer; }
.hp-ex-row:hover { background: rgb(255 255 255 / 0.09); }
.hp-ex-row > svg { flex: none; color: #8c96a0; }
.hp-ex-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.hp-ex-row-text strong { font-size: 1.08rem; }
.hp-ex-row-text > span:not(.hp-status) { color: #aeb7c0; font-size: 0.93rem; line-height: 1.35; }
.hp-ex-sub-row { margin-top: 16px; background: rgb(76 194 143 / 0.1); box-shadow: inset 0 0 0 1px rgb(76 194 143 / 0.4); }
.hp-ex-sub-row strong { color: var(--sign-green); }
.hp-status { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; padding: 3px 10px; border-radius: 10px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; }
.hp-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hp-status.available { background: rgb(76 194 143 / 0.14); color: var(--sign-green); }
.hp-status.building { background: rgb(242 183 5 / 0.14); color: #f2c94c; }
.hp-status.planned { background: rgb(140 150 160 / 0.16); color: #aeb7c0; }
.hp-ex-detail { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 8px 6px 0; }
.hp-ex-note { margin: 0; color: #8c96a0; font-size: 0.92rem; line-height: 1.4; }
.hp-ex-about { margin: 0; color: #d3d9de; font-size: 1.02rem; line-height: 1.5; }
.hp-ex-highlights { width: 100%; }
.hp-ex-highlights li { position: relative; padding: 9px 12px 9px 30px; border-radius: 12px; background: rgb(255 255 255 / 0.05); font-size: 0.97rem; }
.hp-ex-highlights li::before { content: ""; position: absolute; left: 12px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--sign-green); }
.hp-ex-fine { margin: 2px 0 0; color: #7d8791; font-size: 0.84rem; line-height: 1.4; }

/* pictures with Back / Next (front page explorer and the demo tour) */
.hp-shot { margin: 4px 0 0; width: 100%; display: flex; flex-direction: column; gap: 8px; }
.hp-shot-frame { position: relative; border-radius: 14px; overflow: hidden; background: #0d1014; line-height: 0; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08); }
.hp-shot-frame img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.hp-shot-nav { position: absolute; top: 50%; margin-top: -22px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 22px; border: 0; background: rgb(16 19 22 / 0.78); color: #e8ecef; cursor: pointer; }
.hp-shot-nav.prev { left: 8px; }
.hp-shot-nav.next { right: 8px; }
.hp-shot figcaption { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: #aeb7c0; font-size: 0.9rem; line-height: 1.35; }
.hp-dots { flex: none; display: inline-flex; gap: 2px; }
.hp-dots button { width: 22px; height: 22px; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.hp-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgb(255 255 255 / 0.28); }
.hp-dots button.on::before { background: var(--sign-green); }

/* Subscribe for Updates (front page explorer and the sign-up page) */
.sub-card { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.sub-card form { display: flex; flex-direction: column; gap: 10px; }
.sub-label { font-size: 0.9rem; font-weight: 700; color: var(--c-muted); }
.teaser .sub-label { color: #aeb7c0; }
.sub-btn { align-self: flex-start; }
.hp-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sub-msg { margin: 0; padding: 12px 14px; border-radius: 14px; font-weight: 600; line-height: 1.4; }
.sub-msg.ok { background: var(--c-ok-bg); color: var(--c-ink); }
.sub-msg.info { background: var(--c-soft); color: var(--c-ink); }
.sub-msg.bad { background: var(--c-fail-bg); color: var(--c-fail); }
.teaser .sub-msg.ok { background: rgb(76 194 143 / 0.14); color: #a7e6c8; }
.teaser .sub-msg.info { background: rgb(255 255 255 / 0.07); color: #e8ecef; }
.teaser .sub-msg.bad { background: #3b1a1a; color: #fca5a5; }
.sub-placeholder { font-weight: 600; }
.cab-input { width: 100%; min-height: 56px; border-radius: 14px; border: 2px solid var(--c-line); padding: 0 16px; font: inherit; font-size: 1.2rem; background: var(--c-card); color: var(--c-ink); }
.cab-input:focus { outline: 3px solid var(--brand); outline-offset: 1px; border-color: transparent; }
.teaser .cab-input { background: rgb(255 255 255 / 0.06); border-color: rgb(255 255 255 / 0.18); color: #e8ecef; min-height: 52px; }

/* phones and upright tablets: Quiet's upright layout — words up top, the truck low; the explorer is a bottom sheet */
@media (orientation: portrait), (max-width: 700px) {
  .teaser-wash { background: linear-gradient(180deg, rgb(18 22 27 / 0.92) 0%, rgb(18 22 27 / 0.78) 38%, rgb(18 22 27 / 0.2) 70%, rgb(18 22 27 / 0.35) 100%); }
  .teaser-main { justify-content: flex-start; padding: 9vh 16px 72px; gap: 14px; }
  .teaser-line { font-size: clamp(2.5rem, 11vw, 4.4rem); }
  .teaser-top { padding-left: 16px; padding-right: 16px; }
  .teaser-place { left: 16px; right: auto; }
  .hp-cues { top: auto; bottom: calc(28% + 40px); left: 16px; right: 16px; justify-items: center; align-items: end; }
  .hp-cue-stack { align-items: center; gap: 8px; }
  .cue-card { max-width: calc(100vw - 32px); gap: 8px; padding: 6px 12px 6px 6px; border-radius: 14px; }
  .cue-card svg { width: 44px; height: 44px; }
  .cue-card strong, .cue-card.hp-cue-ok strong, .cue-card.hp-cue-clear strong { font-size: 1.3rem; }
  .cue-card span { font-size: 0.82rem; white-space: normal; }
  .hp-clear-sign { width: 56px; }
  .hp-clear-sign span { font-size: 0.4rem; }
  .hp-clear-sign b { font-size: 1rem; }
  .hp-ok-badge { width: 40px; height: 40px; margin: 2px; }
  .family-notice { min-width: 0; }
  .hp-cues > .hp-cue-family { margin-top: 0; }
  .hp-explorer { top: auto; left: 8px; right: 8px; bottom: 0; width: auto; height: min(82dvh, 760px); border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
}
@media (max-width: 380px) { .hp-top-right .teaser-signin { padding: 0 12px; } }
@media (prefers-reduced-motion: reduce) {
  .hp-fade, .hp-fade.on { transition: none; }
  .hp-explorer { animation: none; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Sign-up and demo pages — 1.0's public frame (the app's dark bar, Barlow, the in-cab cards), light / dark */
.pub { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
.pub-bar { background: var(--c-bar); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top, 0px)); min-height: 72px; flex-wrap: wrap; }
.pub-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.02em; }
.pub-brand img { width: 36px; height: 36px; border-radius: 8px; }
.pub-nav { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pub-nav a { min-height: 44px; padding: 0 16px; border-radius: 22px; background: var(--c-bar-2); color: #fff; font-size: 1rem; font-weight: 600; display: inline-flex; align-items: center; }
.pub-nav a.on { background: #fff; color: #16181b; font-weight: 700; }
.pub-nav a.primary { background: #3fae84; color: var(--brand-ink); font-weight: 700; }
.pub-main { width: 100%; max-width: 1200px; margin: 0 auto; padding: 28px 16px 40px; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.pub-foot { background: var(--c-bar); color: #b9c0c7; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); font-size: 0.95rem; }
.pub-foot a { color: #eceef0; text-decoration: underline; text-underline-offset: 3px; }
.pub h2 { margin: 0; font-size: 1.5rem; font-weight: 700; }
.pub h3 { margin: 0; font-size: 1.2rem; font-weight: 700; }
.pub p { margin: 0; }
.pub-title { font-family: var(--font-num); font-weight: 700; font-size: clamp(2.6rem, 6.4vw, 4.6rem); line-height: 0.95; letter-spacing: -0.01em; margin: 0; }
.pub-kicker { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; border-radius: 12px; padding: 7px 12px; font-size: 0.95rem; font-weight: 700; background: var(--c-amber-bg); color: var(--c-ink); }
.pub-lede { font-size: 1.25rem; line-height: 1.45; color: var(--c-muted); max-width: 44ch; }
.pub-muted { color: var(--c-muted); line-height: 1.45; }
.pub-muted a { text-decoration: underline; text-underline-offset: 3px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); flex: none; display: inline-block; }
.pub-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.pub-hero-text { display: flex; flex-direction: column; gap: 18px; padding-top: 8px; }
.cab-card { background: var(--c-card); border-radius: 22px; padding: 22px 24px; box-shadow: 0 2px 14px rgb(22 24 27 / 0.08); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cab-btn { min-height: 56px; padding: 0 22px; border-radius: 16px; background: var(--c-soft); border: 0; color: var(--c-ink); display: inline-flex; align-items: center; justify-content: center; text-align: center; font-size: 1.15rem; font-weight: 700; cursor: pointer; }
.cab-btn.primary { background: var(--brand); color: var(--brand-ink); }
.cab-btn:disabled { opacity: 0.5; cursor: default; }
.pub a:focus-visible, .pub button:focus-visible, .pub input:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.pub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pub-grid .cab-card { gap: 8px; }
.pub-ahead { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pub-ahead li { display: flex; gap: 10px; align-items: center; background: var(--c-soft); border-radius: 14px; padding: 12px 14px; font-weight: 600; }
.pub-ahead li .dot { background: var(--c-yellow); }
.pub-sign { background: var(--c-ok-bg); }
.pub-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.pub-jump a { min-height: 44px; padding: 0 16px; border-radius: 22px; background: var(--c-card); box-shadow: 0 2px 10px rgb(22 24 27 / 0.08); display: inline-flex; align-items: center; font-weight: 600; }
.pub-tour { display: grid; gap: 18px; }
.pub-tour .hp-status.available { background: var(--c-ok-bg); color: var(--c-ink); }
.pub-tour .hp-status.building { background: var(--c-amber-bg); color: var(--c-ink); }
.pub-tour .hp-status.planned { background: var(--c-soft); color: var(--c-muted); }
.pub-tour .hp-shot figcaption { color: var(--c-muted); }
.pub-tour ul.highlights { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.pub-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 14px; }
.pub-shots figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.pub-shots img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; display: block; border-radius: 14px; background: var(--c-bar); }
.pub-shots figcaption { color: var(--c-muted); font-size: 0.98rem; line-height: 1.35; }
.pub .sub-card { max-width: 560px; }
.pub .sub-btn { min-width: 180px; }

@media (orientation: portrait), (max-width: 900px) { .pub-hero { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .pub-grid, .pub-ahead { grid-template-columns: 1fr; }
  .pub-nav a { padding: 0 12px; font-size: 0.95rem; }
  .cab-card { padding: 18px 16px; }
}
.section-h { margin-bottom: 14px !important; }