/* ═══ /handbook/{slug} — guest handbook (builds on styles.css, guide.css, home.css) ═══ */
.hb-hero { position: relative; overflow: hidden; padding: 120px 0 40px; background: var(--bg-light); }
.hb-hero .section-header { margin-bottom: 32px; }
.hb-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; position: relative; z-index: 1; }

.hb-hero-home { padding: 112px 0 36px; border-bottom: 3px double var(--gold); }
.hb-hero-home .home-title { margin-bottom: 4px; }
.hb-hero-home .home-tagline { margin-bottom: 24px; max-width: 640px; }
.hb-hero-img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.16; filter: sepia(0.5) saturate(0.6); pointer-events: none; }
.hb-hero-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(243,235,220,0.2), var(--bg-light) 90%); }
.hb-hero .container { position: relative; z-index: 1; }

.hb-keyfacts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.hb-keyfacts > div { background: var(--bg-card); border: 1px solid var(--gold); padding: 10px 16px; min-width: 150px; display: flex; flex-direction: column; gap: 2px; }
.hb-keyfacts > div.wide { flex: 1 1 320px; }
.hb-keyfacts small { font-size: 0.68rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.hb-keyfacts strong { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 600; line-height: 1.2; }
.hb-keyfacts strong a { font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; color: var(--lacquer); border-bottom: 1px solid var(--lacquer); margin-left: 6px; }
.hb-contacts { display: flex; flex-wrap: wrap; gap: 8px; }
.hb-contact { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: 1px solid var(--gold); background: var(--bg-dark); color: var(--text-light); font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: var(--transition); }
.hb-contact:hover { background: var(--lacquer); }
.hb-contact.ghost { background: transparent; color: var(--text-dark); }
.hb-contact.ghost:hover { background: var(--bg-cream); }

/* Stage nav */
.hb-stagenav { position: sticky; top: 58px; z-index: 900; background: rgba(243,235,220,0.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--gold); }
.hb-stagenav .container { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-top: 6px; padding-bottom: 6px; }
.hb-stagenav .container::-webkit-scrollbar { display: none; }
.hb-stagenav a { white-space: nowrap; padding: 8px 14px; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; transition: var(--transition); }
.hb-stagenav a:hover { color: var(--text-dark); }
.hb-stagenav a.active { color: var(--lacquer); border-bottom-color: var(--lacquer); }

/* Stages */
.hb-stage { padding: 56px 0 8px; scroll-margin-top: 110px; }
.hb-stage:nth-child(even of .hb-stage) { background: var(--bg-cream); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-bottom: 40px; }
.hb-stage-head { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.hb-stage-head .section-pre { margin-bottom: 2px; }
.hb-stage-head .home-h2 { margin-bottom: 0; }
.hb-stage-head .home-h2 small { font-family: var(--font-body); font-size: 0.8rem; color: var(--text-muted); font-weight: 400; margin-left: 10px; }
.hb-stage-num { width: 46px; height: 46px; flex-shrink: 0; border: 1px solid var(--gold); outline: 1px solid var(--gold); outline-offset: -4px; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 1.4rem; font-weight: 700; color: var(--lacquer); background: var(--bg-card); }
.hb-sections { display: flex; flex-direction: column; gap: 14px; }
.hb-section { background: var(--bg-card); border: 1px solid var(--line); border-left: 3px solid var(--gold); display: grid; grid-template-columns: 1fr; scroll-margin-top: 120px; }
.hb-section.has-media { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.hb-section-body { padding: 22px 26px; }
.hb-section h3 { font-family: var(--font-heading); font-size: 1.45rem; font-weight: 600; margin-bottom: 10px; line-height: 1.2; }
.hb-section .article-rich { font-size: 0.93rem; }
.hb-section .article-rich p:last-child { margin-bottom: 0; }
.hb-section-img { display: block; background: var(--bg-cream); border-left: 1px solid var(--line); min-height: 200px; }
.hb-section-img img { width: 100%; height: 100%; object-fit: cover; }
.hb-video { position: relative; background: var(--bg-dark); border-left: 1px solid var(--line); min-height: 220px; }
.hb-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hb-section.private { border-left-color: var(--text-muted); background: repeating-linear-gradient(135deg, var(--bg-card) 0 12px, var(--bg-light) 12px 24px); }
.hb-section.private h3 { color: var(--text-muted); }
.hb-private-kicker { font-size: 0.68rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--lacquer); font-weight: 600; margin-bottom: 6px; }
.hb-section.private p { font-size: 0.88rem; color: var(--text-muted); }

/* Booking-code gate */
.hb-unlock { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--gold); max-width: 460px; }
.hb-unlock label { display: block; font-size: 0.68rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dark); font-weight: 600; margin-bottom: 8px; }
.hb-unlock-row { display: flex; gap: 8px; }
.hb-unlock input { flex: 1 1 140px; min-width: 0; padding: 10px 12px; border: 1px solid var(--gold); background: var(--bg-card); font-family: var(--font-heading); font-size: 1.15rem; letter-spacing: 3px; text-transform: uppercase; color: var(--text-dark); outline: none; }
.hb-unlock input:focus { border-color: var(--lacquer); box-shadow: 0 0 0 2px rgba(140, 40, 30, 0.15); }
.hb-unlock input::placeholder { letter-spacing: 1px; font-size: 0.9rem; font-family: var(--font-body); color: var(--text-muted); text-transform: none; }
.hb-unlock .btn { padding: 10px 18px; font-size: 0.82rem; white-space: nowrap; }
.hb-unlock .btn[disabled] { opacity: 0.6; cursor: wait; }
.hb-unlock-hint { display: block; margin-top: 8px; font-size: 0.78rem; color: var(--text-muted); }
.hb-section.private p.hb-unlock-err { margin-top: 8px; font-size: 0.82rem; font-weight: 600; color: var(--lacquer); }
.hb-unlock.shake { animation: hb-shake 0.4s; }
@keyframes hb-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.hb-section.unlocked { border-left-color: var(--lacquer); }
.hb-unlocked-note { background: var(--bg-dark); color: var(--text-light); border-bottom: 1px solid var(--gold); font-size: 0.85rem; }
.hb-unlocked-note .container { padding-top: 10px; padding-bottom: 10px; }
.hb-unlocked-note a { color: var(--gold-light); border-bottom: 1px solid var(--gold-light); }
.hb-unlocked-note a:hover { color: var(--text-light); }
.hb-empty { padding: 48px 24px; text-align: center; color: var(--text-muted); font-family: var(--font-heading); font-style: italic; font-size: 1.2rem; }

/* Emergency */
.hb-emergency { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.hb-emergency-item { background: var(--bg-dark); color: var(--text-light); border: 1px solid var(--gold); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; transition: var(--transition); }
.hb-emergency-item:hover { background: var(--lacquer); }
.hb-emergency-item span { font-size: 1.2rem; }
.hb-emergency-item strong { font-family: var(--font-heading); font-size: 1.6rem; line-height: 1.1; }
.hb-emergency-item small { font-size: 0.78rem; color: var(--gold-light); }

/* Nearby compact list */
.hb-near { display: flex; flex-wrap: wrap; gap: 8px; }
.hb-near a { padding: 7px 12px; border: 1px solid var(--line); background: var(--bg-card); font-size: 0.85rem; transition: var(--transition); }
.hb-near a:hover { border-color: var(--gold); color: var(--lacquer); }

/* Ask box */
.hb-askwrap { padding: 48px 24px 64px; }
.hb-ask-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.hb-ask-btns .btn { padding: 10px 18px; font-size: 0.85rem; }

@media (max-width: 768px) {
  .hb-hero-home { padding-top: 96px; }
  .hb-section.has-media { grid-template-columns: 1fr; }
  .hb-section-img, .hb-video { border-left: 0; border-top: 1px solid var(--line); }
  .hb-video { min-height: 200px; }
  .hb-stagenav { top: 54px; }
  .hb-keyfacts > div { min-width: 0; flex: 1 1 45%; }
  .hb-section-body { padding: 18px 16px; }
  .hb-unlock { max-width: none; }
  .hb-unlock-row { flex-wrap: wrap; }
  .hb-unlock input { flex: 1 1 100%; font-size: 1.25rem; }
  .hb-unlock .btn { flex: 1 1 100%; }
}

@media print {
  .lang-switcher, .navbar, .mobile-menu, .hb-stagenav, .hb-contacts, .footer, .hb-askwrap, .motif, .hb-hero-img, .hb-unlock, .hb-unlocked-note { display: none !important; }
  .hb-hero-home { padding-top: 0; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hb-section, .rule-item, .amenity-item { break-inside: avoid; }
  details > *:not(summary) { display: block; }
  body { background: #fff; }
}

/* ═══ Access gate (Site Setting → handbook_access = code) ═══ */
.hb-gate { padding: 24px 24px 8px; }
.hb-gate-box { background: var(--bg-card); border: 1px solid var(--gold); outline: 1px solid var(--gold); outline-offset: -5px; padding: 32px; display: grid; grid-template-columns: auto 1fr; gap: 20px 24px; align-items: start; }
.hb-gate-icon .ui-icon { width: 3rem; height: 3rem; color: var(--lacquer); }
.hb-gate-box h2 { margin-bottom: 8px; }
.hb-gate-box p { color: var(--text-muted); font-size: 0.95rem; }
.hb-gate-n { margin-top: 6px; font-size: 0.85rem !important; }
.hb-gate-box form.hb-unlock { grid-column: 2; max-width: 460px; }
.hb-locked-toc { padding: 8px 24px 32px; }
.hb-locked-toc .handbook-toc { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--text-muted); font-size: 0.9rem; }
.hb-locked-toc .handbook-toc li { display: inline-flex; align-items: center; gap: 4px; }
.hb-locked-toc small { opacity: 0.7; }
.hb-section.locked { opacity: 0.55; }
.hb-section.locked h3 { margin: 0; }
@media (max-width: 640px) { .hb-gate-box { grid-template-columns: 1fr; } .hb-gate-box form.hb-unlock { grid-column: 1; } }