/* ══════════════════════════════════════
   ZOE YANG — Base / Reset / Variables
   ══════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Semantic tokens — source of truth */
  --bg: #18181b;            /* page background */
  --text-strong: #d4d4d4;   /* headings / primary ink */
  --text-mid: #999999;      /* mid-grey labels and secondary copy */
  --line-faint: #525252;    /* decorative rules and dim labels */

  /* Accent role: interactive emphasis only (text links, CTAs, selected
     calendar slots, step numbers). Navigation chrome (dock, footer,
     contact rows) brightens toward white instead — never the accent. */
  --accent: #7a9bb5;
  --danger: #e05c4f;   /* errors, destructive actions */
  --success: #4a8e6c;  /* confirmations, success notes */

  /* Legacy aliases — keep until no var(--cream/--ink/--mid/--light) remain */
  --cream: var(--bg);
  --ink: var(--text-strong);
  --mid: var(--text-mid);
  --light: var(--line-faint);

  /* Centralized glass system */
  --glass-bg: rgba(45, 45, 52, 0.40);
  --glass-bg-elevated: rgba(52, 52, 60, 0.55); /* one step brighter for tier 2-3 surfaces */
  --glass-bg-solid: rgba(32, 32, 38, 0.88);    /* near-opaque: open menus over busy photos */
  --glass-blur: blur(20px) saturate(1.3);
  --glass-blur-light: blur(16px) saturate(1.2);
  --glass-border: 1px solid rgba(255, 255, 255, 0.08);

  /* Elevation scale — dark surfaces get lighter + deeper shadow as they rise.
     1: resting (glass panels, cards)  2: floating chrome (dock, dropdowns)
     3: overlays (modal, lightbox, editors). Photos/cards stay shadowless. */
  --elev-1: 0 1px 0 rgba(255,255,255,0.03), 0 4px 20px rgba(0,0,0,0.18);
  --elev-2: 0 1px 0 rgba(255,255,255,0.05), 0 8px 32px rgba(0,0,0,0.35);
  --elev-3: 0 1px 0 rgba(255,255,255,0.06), 0 24px 64px rgba(0,0,0,0.55);
  --glass-shadow: var(--elev-1); /* legacy alias — resting tier */

  /* Radius scale — sharp is the signature. sm: content surfaces,
     md: floating chrome (dock, pills). Circles stay 50%. */
  --radius-sm: 2px;
  --radius-md: 6px;

  /* Z-index scale */
  --z-header: 900;     /* fixed nav bar */
  --z-dropdown: 910;   /* nav dropdown menus */
  --z-drawer: 940;     /* mobile slide-out + its overlay (930) */
  --z-dock: 970;       /* top/bottom dock (submenu shell sits at 969) */
  --z-modal: 2000;     /* password modal, blog editor */
  --z-lightbox: 3000;  /* full-screen photo viewer */
  --z-skip: 10000;     /* skip link above everything */

  /* Layout — past --content-max the side padding absorbs the extra room,
     so every page (and the header dock, whose width derives from the same
     variable) caps at one unified, readable content width */
  --content-max: 1200px;
  --section-padding: max(160px, calc((100vw - var(--content-max)) / 2));
  --bg-gradient: linear-gradient(135deg, #18181b 0%, #21212a 50%, #28283a 100%);

  /* Tallest a lightbox photo may be. The controls stacked beneath it (palette,
     art bar, art tools, counter) measure ~155px at every viewport size — a
     fixed cost, not a proportional one — so budgeting a flat 200px leaves them
     room plus slack. A percentage cap sized for phones threw away ~600px of
     height on a 4K panel. Phones keep a vh cap in responsive.css, where 100vh
     is unreliable while the URL bar shows and the space at stake is small.
     js/lightbox.js mirrors this when it pre-sizes the thumbnail placeholder. */
  --lightbox-max-h: calc(100vh - 200px);

  /* Semantic text colors */
  --text-primary: rgba(255,255,255,0.75);
  --text-secondary: rgba(255,255,255,0.6); /* ≥AA on --bg at small sizes */
  --text-muted: rgba(255,255,255,0.45);    /* decorative / large text only */
  --text-faint: rgba(255,255,255,0.35);    /* placeholders, hints — never body copy */
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Montserrat', sans-serif;
  background: var(--bg);
  color: var(--text-strong);
  font-weight: 300;
  letter-spacing: 0.02em;
  overflow-x: hidden;
}

/* Chinese-language pages (e.g. booking, lang="zh-Hans"): pair Montserrat with
   a coordinated system CJK sans stack so mixed EN/中文 lines share one look.
   Selectors with an explicit font-family (imported after base.css) still win. */
:lang(zh-Hans) {
  font-family: 'Montserrat', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
}

a { color: inherit; text-decoration: none; }

/* ══════════════════════════════════════
   SHARED TYPE PATTERNS — single source of truth.
   The per-page class names are kept as aliases so existing markup
   (and JS-generated markup) keeps working; page files may override
   only margins/alignment, never the core style.
   ══════════════════════════════════════ */

/* Ruled eyebrow label (— LABEL ——) */
.section-label,
.catalog-label,
.blog-label,
.gallery-series,
.neptune-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--line-faint);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.section-label::after,
.catalog-label::after,
.blog-label::after,
.gallery-series::after,
.neptune-label::after {
  content: '';
  flex: 0 0 40px;
  height: 1px;
  background: var(--line-faint);
}

/* Italic display title */
.section-title,
.gallery-page-title,
.blog-page-title,
.video-title,
.neptune-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.15;
  margin-bottom: 20px;
}

/* Page subtitle / intro copy — body copy is 14px site-wide */
.gallery-subtitle,
.blog-subtitle,
.neptune-subtitle {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--text-mid);
  letter-spacing: 0.04em;
  max-width: 700px;
}