/* ============================================================
   HOTEL EARTH — brand layer v1, "Night Lobby"
   Sibling of DeepStack + BLUVV: ink ground, porcelain type, hairlines,
   accents only from blue → violet → rose (fear → love). Never gold.
   Loads AFTER style.css / audio.css / highlights.css and re-maps their tokens.
   This file: tokens, base type, eyebrow, buttons, header, footer, toast, QA mode.
   ============================================================ */

/* ---------- Tokens ---------- */
:root, [data-theme='dark'] {
  --he-ink: #07060B; --he-ink-2: #0D0B13; --he-panel: #12101A; --he-panel-2: #191524;
  --he-line: #2A2435; --he-line-soft: #1E1A27;
  --he-porcelain: #F3EFF2; --he-silver: #B9B2BE; --he-faint: #8A8394;
  --he-love: #E8578F; --he-love-soft: #F27AA6; --he-love-deep: #9C3255;
  --he-violet: #8A5BB8; --he-violet-deep: #6B3A8A;
  --he-fear: #5B6FD0; --he-fear-soft: #8C9BEA; --he-fear-deep: #3E4C88;
  --he-dawn: linear-gradient(90deg, #5B6FD0 0%, #8A5BB8 48%, #E8578F 100%);
  --he-dawn-text: linear-gradient(90deg, #8C9BEA 0%, #B48BDD 46%, #F27AA6 100%);
  --he-glow-love: rgba(232, 87, 143, .18); --he-glow-violet: rgba(138, 91, 184, .18); --he-glow-fear: rgba(91, 111, 208, .16);
  --he-hair: rgba(243, 239, 242, .14);          /* hairline on ink */
  --he-hair-strong: rgba(243, 239, 242, .28);

  /* legacy aliases — everything in style.css / audio.css / highlights.css reads these */
  --color-bg: var(--he-ink); --color-surface: var(--he-ink-2); --color-surface-2: var(--he-panel);
  --color-surface-offset: var(--he-panel-2); --color-border: var(--he-line); --color-divider: var(--he-line-soft);
  --color-text: var(--he-porcelain); --color-text-muted: var(--he-silver); --color-text-faint: var(--he-faint);
  --color-text-inverse: var(--he-ink); --color-text-soft: var(--he-silver);
  --color-primary: var(--he-love); --color-primary-hover: var(--he-love-soft); --color-primary-soft: #2A1422;
  --color-gold: var(--he-love); --color-gold-bright: var(--he-love-soft);
  --color-teal: var(--he-fear-soft); --color-teal-soft: #151A33;
  --color-accent: var(--he-love); --color-muted: var(--he-silver);
  --hl-color: rgba(232, 87, 143, .26); --hl-color-strong: rgba(232, 87, 143, .46);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4); --shadow-md: 0 8px 26px rgba(0, 0, 0, .5); --shadow-lg: 0 24px 60px rgba(0, 0, 0, .65);
  --hero-ground: #07060B; --hero-bg: none; --hero-glow: none; --hero-seam: transparent;
  --hero-title-color: #F3EFF2; --hero-accent: #F3EFF2; --hero-accent-fill: #F3EFF2; --hero-accent-border: rgba(243, 239, 242, .28);

  /* type */
  --font-display: 'Cormorant Garamond', 'Noto Serif TC', 'Noto Serif SC', Georgia, 'Times New Roman', serif;
  --track-label: .32em;
  --radius-card: 18px;
}

/* PAPER — not a site theme: a page colour the reader can switch on inside the book only (Night is the brand). */
#view-read.reader--paper {
  background: var(--he-ink); color: var(--he-porcelain);
  /* legacy aliases re-resolve here because custom properties are computed where they are declared */
  --color-bg: var(--he-ink); --color-surface: var(--he-ink-2); --color-surface-2: var(--he-panel); --color-surface-offset: var(--he-panel-2);
  --color-border: var(--he-line); --color-divider: var(--he-line-soft); --color-text: var(--he-porcelain); --color-text-muted: var(--he-silver);
  --color-text-faint: var(--he-faint); --color-text-inverse: var(--he-ink); --color-text-soft: var(--he-silver);
  --color-primary: var(--he-love); --color-primary-hover: var(--he-love-soft); --color-gold: var(--he-love); --color-gold-bright: var(--he-love-soft);
  --color-teal: var(--he-fear-soft); --color-accent: var(--he-love); --color-muted: var(--he-silver);
  --he-ink: #F5F2F4; --he-ink-2: #FBF9FA; --he-panel: #FFFFFF; --he-panel-2: #ECE7EB;
  --he-line: #DAD3D9; --he-line-soft: #E6E0E5;
  --he-porcelain: #16131C; --he-silver: #5F586A; --he-faint: #6E6778;
  --he-love: #B02A62; --he-love-soft: #8E1F4E; --he-love-deep: #9C3255;
  --he-violet: #6B3A8A; --he-fear: #3E4C88; --he-fear-soft: #3E4C88;
  --he-dawn: linear-gradient(90deg, #3E4C88 0%, #6B3A8A 48%, #B02A62 100%);
  --he-dawn-text: linear-gradient(90deg, #3E4C88 0%, #6B3A8A 46%, #B02A62 100%);
  --he-glow-love: rgba(176, 42, 98, .10); --he-glow-violet: rgba(107, 58, 138, .10); --he-glow-fear: rgba(62, 76, 136, .10);
  --he-hair: rgba(22, 19, 28, .14); --he-hair-strong: rgba(22, 19, 28, .3);
  --color-primary-soft: #F3DCE6; --color-teal-soft: #DFE3F3;
  --hl-color: rgba(176, 42, 98, .18); --hl-color-strong: rgba(176, 42, 98, .34);
  --shadow-sm: 0 1px 3px rgba(22, 19, 28, .07); --shadow-md: 0 8px 26px rgba(22, 19, 28, .10); --shadow-lg: 0 24px 60px rgba(22, 19, 28, .16);
}

/* CJK editions: serif display in Noto, no faux italics */
html[lang='zh-Hans'] { --font-display: 'Noto Serif SC', 'Cormorant Garamond', Georgia, serif; }
html[lang='zh-HK'], html[lang='zh-Hant'] { --font-display: 'Noto Serif TC', 'Cormorant Garamond', Georgia, serif; }

/* ---------- Base ---------- */
html { scroll-padding-top: 88px; }
body { background: var(--he-ink); color: var(--he-porcelain); }
h1, h2, h3, h4 { font-weight: 500; letter-spacing: -.005em; }
html[lang^='zh'] h1, html[lang^='zh'] h2, html[lang^='zh'] h3 { letter-spacing: .02em; line-height: 1.32; }
::selection { background: rgba(232, 87, 143, .32); color: inherit; }
section { padding-block: clamp(4rem, 8vw, 7.5rem); }

/* Eyebrow — tracked label with a short dawn line (the old spade pip is gone) */
.eyebrow {
  display: inline-flex; align-items: center; gap: .9em;
  font-size: .68rem; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--he-silver); margin-bottom: var(--space-5);
}
.eyebrow::before {
  content: ""; width: 28px; height: 1px; margin: 0; background: var(--he-dawn);
  opacity: 1; font-size: 0; vertical-align: middle; flex: none;
}
html[lang^='zh'] .eyebrow { font-size: .78rem; letter-spacing: .28em; }

.section-head { max-width: 46rem; margin-bottom: clamp(var(--space-10), 5vw, var(--space-16)); }
.section-head h2 { font-size: clamp(2.15rem, 1.35rem + 3vw, 3.7rem); line-height: 1.06; margin-bottom: var(--space-5); }
html[lang^='zh'] .section-head h2 { font-size: clamp(1.7rem, 1.15rem + 2.3vw, 2.8rem); line-height: 1.34; }
.section-head { max-width: 56rem; }
.section-head p:not(.eyebrow) { color: var(--he-silver); font-size: var(--text-base); max-width: 38rem; margin-inline: auto; }

/* ---------- Buttons — porcelain fill / hairline ghost, tracked caps ---------- */
.btn {
  font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  padding: 1.05em 1.9em; border-radius: 999px; gap: .7em; border: 1px solid transparent;
  min-height: 46px; justify-content: center;
}
.btn--lg { font-size: .78rem; padding: 1.2em 2.3em; min-height: 52px; }
html[lang^='zh'] .btn { font-size: .92rem; letter-spacing: .12em; text-transform: none; }
html[lang^='zh'] .btn--lg { font-size: 1rem; }
.btn--primary, [data-theme='dark'] .btn--primary {
  background: var(--he-porcelain); color: var(--he-ink); border-color: var(--he-porcelain); box-shadow: none;
}
.btn--primary:hover, [data-theme='dark'] .btn--primary:hover {
  background: var(--he-porcelain); color: var(--he-ink); transform: translateY(-2px);
  box-shadow: 0 10px 34px var(--he-glow-love), 0 2px 14px var(--he-glow-violet);
}
.btn--ghost { background: transparent; color: var(--he-porcelain); border: 1px solid var(--he-hair-strong); }
.btn--ghost:hover { border-color: var(--he-porcelain); color: var(--he-porcelain); transform: translateY(-2px); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }

/* ---------- Header ---------- */
.header { background: color-mix(in srgb, var(--he-ink) 84%, transparent); }
.header--scrolled { border-bottom-color: var(--he-line-soft); }
/* Over the (always dark) hero the header is always light-on-dark, whatever the theme */
.header--over-hero {
  --he-porcelain: #F3EFF2; --he-silver: #B9B2BE; --he-ink: #07060B; --he-faint: #8A8394;
  --he-hair: rgba(243, 239, 242, .14); --he-hair-strong: rgba(243, 239, 242, .28);
  --color-text: #F3EFF2; --color-text-muted: #B9B2BE; --color-surface-offset: rgba(243, 239, 242, .07);
  --color-border: rgba(243, 239, 242, .2); --color-surface: #0D0B13;
}
.header--over-hero .brand, .header--over-hero .brand svg { color: #F3EFF2; }
.brand { gap: .8rem; color: var(--he-porcelain); }
.brand .brand__mark { width: 34px; height: 34px; color: currentColor; margin-top: -4px; }
.brand .he-word__o { width: .98em; height: .98em; }
.brand__word {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1rem; font-weight: 600;
  --he-track: .34em; text-transform: uppercase; white-space: nowrap; padding-top: .1em;
}
/* The wordmark: HOTEL EARTH, where the O is the planet at dawn (symbol #he-o) */
.he-word { display: inline-flex; align-items: center; white-space: nowrap; letter-spacing: var(--he-track, .34em); }
.he-word__o { width: .98em; height: .98em; flex: none; margin: -.1em calc(var(--he-track, .34em) - .08em) 0 -.06em; color: inherit; }
.nav { gap: clamp(.4rem, 1.6vw, 1.6rem); }
.nav a {
  position: relative; font-size: .68rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--color-text-muted); padding: .7em .2em; border-radius: 0; background: none;
}
html[lang^='zh'] .nav a { font-size: .88rem; letter-spacing: .14em; }
.nav a::after {
  content: ""; position: absolute; left: .2em; right: .2em; bottom: .2em; height: 1px;
  background: var(--he-dawn); transform: scaleX(0); transform-origin: left; transition: transform 320ms cubic-bezier(.16, 1, .3, 1);
}
.nav a:hover, .nav a.is-active,
.header--over-hero .nav a:hover, .header--over-hero .nav a.is-active { color: var(--color-text); background: none; }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }

.langseg { border-color: var(--he-hair-strong); background: transparent; padding: 2px; }
.langseg .lang__opt { font-size: .72rem; letter-spacing: .08em; color: var(--color-text-muted); min-height: 34px; min-width: 34px; padding: .3em .7em; }
.langseg .lang__opt[aria-checked='true'] { color: var(--he-ink); background: var(--he-porcelain); box-shadow: none; }
.icon-btn:hover { background: var(--color-surface-offset); }

@media (max-width: 900px) {
  .nav { background: var(--he-ink-2); border-bottom: 1px solid var(--he-line); padding: var(--space-5) clamp(var(--space-5), 5vw, var(--space-20)) var(--space-8); gap: 0; }
  .nav a { padding: 1.15em 0; border-bottom: 1px solid var(--he-line-soft); font-size: .78rem; }
  html[lang^='zh'] .nav a { font-size: 1rem; }
  .nav a::after { display: none; }
  .header--over-hero .nav.open a { color: var(--he-porcelain); }
  .brand__word { font-size: .86rem; --he-track: .28em; }
}
@media (max-width: 420px) {
  .header__inner { gap: var(--space-2); padding-inline: 16px; }
  .header__actions { gap: 2px; }
  .brand { gap: .55rem; }
  .brand__word { font-size: .76rem; --he-track: .18em; }
  .brand .brand__mark { width: 28px; height: 28px; }
  .icon-btn { width: 38px; height: 38px; }
  .langseg .lang__opt { min-width: 30px; padding: .3em .3em; }
}

/* ---------- Footer ---------- */
.he-footer { background: var(--he-ink); border-top: 1px solid var(--he-line-soft); padding-block: clamp(4rem, 7vw, 6rem) var(--space-10); position: relative; overflow: hidden; }
.he-footer::before {
  content: ""; position: absolute; left: 50%; bottom: -60%; width: min(1100px, 140vw); aspect-ratio: 1; transform: translateX(-50%);
  background: radial-gradient(circle, var(--he-glow-violet) 0%, transparent 60%); pointer-events: none;
}
.he-footer .footer__inner { position: relative; gap: var(--space-8); }
.he-footer__crest { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.he-footer__mark { width: 56px; height: 56px; color: var(--he-porcelain); }
.he-footer__word { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 1.05rem; --he-track: .5em; padding-left: .5em; text-transform: uppercase; }
.he-footer__refrain {
  font-family: var(--font-display); font-style: italic; font-size: clamp(1.35rem, 1rem + 1.4vw, 2rem); line-height: 1.3;
  background: var(--he-dawn-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[lang^='zh'] .he-footer__refrain { font-style: normal; font-size: clamp(1.15rem, .95rem + 1vw, 1.6rem); }
.footer__links { gap: var(--space-3) clamp(var(--space-5), 3vw, var(--space-10)); }
.footer__links a { font-size: .66rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--he-silver); }
html[lang^='zh'] .footer__links a { font-size: .85rem; letter-spacing: .12em; }
.footer__links a:hover { color: var(--he-porcelain); }
.footer__bottom { border-top-color: var(--he-line-soft); color: var(--he-faint); max-width: 64ch; }
.footer__bottom a:hover { color: var(--he-porcelain); }

/* ---------- Toast ---------- */
.toast { letter-spacing: .02em; }

/* ---------- Reveal + QA mode ---------- */
.reveal { transform: translateY(18px); transition: opacity .9s ease, transform .9s cubic-bezier(.16, 1, .3, 1); }
.he-shot .reveal { opacity: 1 !important; transform: none !important; }
.he-shot .he-hero { min-height: 860px !important; }
.he-shot .hero__inner > *, .he-shot .he-hero__art * { animation: none !important; opacity: 1; transform: none; }

[hidden] { display: none !important; }

/* ---------- Scrollbars — nearly invisible until you reach for them, then in the brand's colours ---------- */
html { scrollbar-gutter: stable; }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: rgba(185, 178, 190, .22) transparent; } }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(185, 178, 190, .16); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #5B6FD0, #8A5BB8 50%, #E8578F); border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
.reader__toc::-webkit-scrollbar, .quote-pick::-webkit-scrollbar, .nav::-webkit-scrollbar { width: 8px; }
.reader__toc::-webkit-scrollbar-thumb, .quote-pick::-webkit-scrollbar-thumb { background: rgba(185, 178, 190, 0); border: 2px solid transparent; background-clip: padding-box; transition: background .3s; }
.reader__toc:hover::-webkit-scrollbar-thumb, .quote-pick:hover::-webkit-scrollbar-thumb { background: rgba(185, 178, 190, .22); background-clip: padding-box; }
.reader__toc::-webkit-scrollbar-thumb:hover, .quote-pick::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #5B6FD0, #8A5BB8 50%, #E8578F); background-clip: padding-box; }
#view-read.reader--paper ::-webkit-scrollbar-thumb { background-color: rgba(22, 19, 28, .18); }

/* below ~360px the bell alone carries the brand (the wordmark is still in the hero and footer) */
@media (max-width: 360px) { .brand__word { display: none; } }
.he-pagemode svg { width: 1.05em; height: 1.05em; }

/* ---------- footer fine print: one word, "Privacy" — the note opens only if someone asks for it ---------- */
.he-privacy { margin-top: .5rem; text-align: center; }
.he-privacy > summary { list-style: none; cursor: pointer; display: inline-block; padding: .35em .2em; font-size: inherit; color: var(--he-faint); text-decoration: underline; text-underline-offset: 2px; }
.he-privacy > summary::-webkit-details-marker { display: none; }
.he-privacy > summary:hover, .he-privacy > summary:focus-visible { color: var(--he-porcelain); outline: none; }
.he-privacy p { margin: var(--space-3) 0; color: var(--he-silver); text-align: left; line-height: 1.7; }
.he-privacy__opt { display: inline-flex; align-items: center; gap: .6em; min-height: 44px; cursor: pointer; color: var(--he-silver); }
.he-privacy__opt input { width: 1.1rem; height: 1.1rem; accent-color: var(--he-love); }