/* ============================================================
   DKH R3 Visual Polish — r3-polish.css
   Inject via <link> AFTER _slug_.BnK-FFNE.css on all 9 pages.
   CSS/layout only. All copy, links, logo bytes LOCKED.
   VIZION visual direction / Astra implementation 2026-09-22
   ============================================================ */

/* ----------------------------------------------------------
   1. HEADER — logo 34px / nav balance
   ----------------------------------------------------------
   The identifier logo img is already height:34px inline.
   We tighten the header height at mid-widths and ensure
   the header-note + menu-toggle right cluster feels balanced.
   ---------------------------------------------------------- */

/* Reduce gap between the two spans inside header-note for
   cleaner visual weight at 1024 */
@media (min-width: 601px) and (max-width: 1100px) {
  .header-note {
    gap: 28px;
    margin-right: 48px;
    font-size: 8.5px;
  }
}

/* At 768 the header tends to crowd — give the logo img
   a touch more breathing room via the identifier gap */
@media (min-width: 601px) and (max-width: 800px) {
  .site-header {
    height: 96px;
    padding-top: 26px;
    padding-bottom: 26px;
  }
  .identifier {
    gap: 14px;
  }
  .header-note {
    gap: 20px;
    margin-right: 36px;
  }
}

/* ----------------------------------------------------------
   2. JOURNEY — space-name English headline wrapping
   ----------------------------------------------------------
   "Brand Communication" and "Venture Building" are the
   longest; at 5-col grid they sit at ~200px each.
   We keep font-size 10px but add word-break and tighter
   letter-spacing to prevent awkward 1-word orphan lines.
   At 1024 (max-width:1000px break) the grid stacks down
   to 270px arts — the names need even more care.
   ---------------------------------------------------------- */

.space-name {
  /* prevent orphan words on narrow columns */
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: none;
  /* tighten tracking very slightly for longer names */
  letter-spacing: 0.04em;
}

/* At the 1000px break, arts shrink to 270px height and
   figcaption font drops to 10px. Give names a touch more
   line-height so two-line headings breathe. */
@media (max-width: 1000px) {
  .space-name {
    font-size: 9.5px;
    line-height: 1.55;
    margin-bottom: 8px;
  }
  .space figcaption {
    font-size: 10px;
    line-height: 1.75;
    min-height: 80px;
  }
  .journey-spaces {
    gap: 6px;
  }
}

/* At 768 the 5-col grid is getting quite tight (~145px
   per column at ~830px viewport). Improve readability. */
@media (min-width: 601px) and (max-width: 860px) {
  .space-name {
    font-size: 9px;
    line-height: 1.6;
  }
  .space figcaption {
    font-size: 9.5px;
    line-height: 1.7;
    min-height: 90px;
    padding-right: 6px;
  }
}

/* ----------------------------------------------------------
   3. FOOTER — WhatsApp link styling (.footer-wa)
   ----------------------------------------------------------
   .footer-wa appears in the slide-out menu (.menu-meta)
   on all pages and has no CSS definition in the base sheet.
   Style it to look like a quiet text link consistent with
   the menu-meta context (dark overlay panel).
   Home page source has a duplicate .footer-wa — both are
   locked HTML; we display them correctly and separate them.
   ---------------------------------------------------------- */

.footer-wa {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

.footer-wa:hover,
.footer-wa:focus-visible {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* menu-meta flex layout: email | wa | (wa dupe on home) | 香港
   Use gap instead of spacing so it adapts cleanly.
   The base sheet has justify-content:space-between.
   We keep that but ensure the WA links don't wrap. */
.menu-meta {
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
}

.menu-meta em {
  white-space: nowrap;
}

.menu-meta > span {
  white-space: nowrap;
  margin-left: auto;
}

/* On mobile the menu-meta can overflow; allow it to wrap
   gracefully while keeping the 香港 label right-aligned. */
@media (max-width: 600px) {
  .menu-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .menu-meta > span {
    margin-left: 0;
  }
}

/* ----------------------------------------------------------
   4. FOOTER LAYOUT — footer-first row at mobile/mid widths
   ----------------------------------------------------------
   footer-first: DKH logo | 香港 | email
   At 768 this can crowd. Allow graceful wrap.
   ---------------------------------------------------------- */

@media (max-width: 860px) {
  .footer-first {
    flex-wrap: wrap;
    gap: 12px 20px;
    padding-bottom: 22px;
  }
  .footer-first > em {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .footer-first {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-bottom: 20px;
  }
  .footer-first > em {
    width: auto;
  }
  .footer-last {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .footer-last nav {
    flex-wrap: wrap;
    gap: 10px 18px;
  }
}

/* ----------------------------------------------------------
   5. S3 SIGNAL — warm-white dot (#F5F2E9) confirmed present.
   Ensure dkh-pulse animation survives reduced-motion by
   keeping the element visible (no display:none) while the
   base reduced-motion rule already sets animation:none.
   We only add the static glow state so it reads well
   without animation.
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .signal-point {
    /* Static warm-white glow, no pulse animation */
    box-shadow: 0 0 22px 8px rgba(245, 242, 233, 0.55),
                0 0 70px 24px rgba(245, 242, 233, 0.18);
    opacity: 1;
  }
}

/* ----------------------------------------------------------
   6. S4 AGENTS — twinkle + hover already in base CSS.
   Supplement: ensure the star-tooltip is clearly readable
   on all viewports and doesn't overflow horizontally.
   ---------------------------------------------------------- */

.star-tooltip {
  max-width: min(360px, 90vw);
  text-align: center;
  white-space: normal;
  word-break: break-word;
}

/* Constellation area responsive: prevent horizontal scroll
   at 390px where the 640px-tall constellation can cause
   overflow. */
@media (max-width: 600px) {
  .constellation {
    height: 420px;
    overflow: hidden;
  }
  .team-chapter {
    min-height: 700px;
  }
  .star-count {
    font-size: 72px;
  }
}

/* ----------------------------------------------------------
   7. CHAPTER INDEX (fixed dot nav) — keep above content on
   all viewports; adjust z-index to clear agent stars.
   ---------------------------------------------------------- */

.chapter-index {
  z-index: 19;
}

/* ----------------------------------------------------------
   8. JOURNEY RAIL at 768 mid-range — the rail is only
   styled for <600px (block layout) and default (grid).
   At 768 in grid mode ensure the rail top aligns well
   with the journey-spaces margin-top.
   ---------------------------------------------------------- */

@media (min-width: 601px) and (max-width: 1000px) {
  .journey-rail {
    top: 443px;
  }
}

/* ----------------------------------------------------------
   9. PAIN CHAPTER — hero text at 1024 narrow
   The h1 is clamp(72px,10vw,150px). At 1024px = 102px.
   Pain-line max-width:750px — at 1024 with gutters this
   approaches the full column; cap it to 85% for readability.
   ---------------------------------------------------------- */

@media (min-width: 601px) and (max-width: 1100px) {
  .pain-line {
    max-width: min(750px, 85%);
  }
}

/* ----------------------------------------------------------
   10. GENERAL overflow guard — prevent any section from
   causing horizontal document overflow. The existing CSS
   has overflow:hidden on .chapter, but the outer body
   may still overflow from absolutely-positioned children.
   ---------------------------------------------------------- */

/* No added document-level overflow masking. */

/* Preserve existing smooth scroll and reduced-motion
   behavior — no overrides here. */

/* GCM mobile spacing fix 2026-09-22: cap chapter heights on phones, kill dead scroll */
@media (max-width: 480px){
  .chapter{min-height:100svh;padding-top:96px;padding-bottom:48px}
  .pain-chapter{min-height:100svh;height:auto;padding-top:110px}
  .journey-chapter{min-height:0;padding-top:48px;padding-bottom:64px}
  .signal-chapter{min-height:100svh;height:auto}
  .signal-copy{padding-top:140px}
  .team-chapter{min-height:100svh;padding-top:40px;padding-bottom:56px}
  .invitation-chapter{min-height:100svh;padding-top:96px;padding-bottom:40px}
}