/* ══════════════════════════════════════
   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 only */

  /* 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(28, 29, 34, 0.46);
  --glass-bg-elevated: rgba(35, 36, 42, 0.62); /* one step brighter for tier 2-3 surfaces */
  --glass-bg-solid: rgba(27, 28, 33, 0.78);    /* near-opaque: open menus over busy photos */
  --glass-blur: blur(24px) saturate(1.65);
  --glass-blur-light: blur(16px) saturate(1.2);
  --glass-border: 0;
  --glass-sheen: linear-gradient(transparent, transparent);

  /* 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: 0 8px 28px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.1);

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

  /* Motion — one curve for things entering or leaving, one for things moving
     on screen, one for the dock's drawer-like slides. Durations by what the
     motion is doing: feedback acknowledges a press, control is a hover or small
     state change, panel is a menu or overlay, reveal is content arriving on
     scroll. UI stays under 300ms; only reveals, which nobody is waiting on,
     run longer. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-feedback: 150ms;
  --dur-control: 200ms;
  --dur-panel: 300ms;
  --dur-reveal: 500ms;

  /* 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%);

  /* Type scale — editorial display faces paired with a deliberately quieter
     sans-serif reading layer. Keeping these roles here prevents each page from
     inventing subtly different body sizes and leading. */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --type-display: clamp(38px, 5vw, 58px);
  --type-title: clamp(26px, 3vw, 34px);
  --type-body: 16px;
  --type-small: 14px;
  --type-label: var(--type-small);
  --leading-display: 1.08;
  --leading-body: 1.85;
  --measure-reading: 68ch;

  /* Reserve room for 14px captions, 44px controls, and wrapping art tools.
     The viewer can scroll at very short heights; JS reads this same budget. */
  --lightbox-max-h: max(180px, calc(100dvh - 340px));

  /* 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);    /* decorative details only */
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-strong);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: var(--leading-body);
  letter-spacing: 0.015em;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 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; }
small { font-size: var(--type-small); }
button { font-family: inherit; font-size: var(--type-small); }
input, select, textarea { font-family: inherit; font-size: var(--type-body); }

/* Balanced headings keep the editorial hierarchy composed at every width;
   paragraph wrapping remains natural but avoids stranded final words where
   supported. These are progressive enhancements with safe browser fallbacks. */
h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

::selection {
  background: rgba(122, 155, 181, 0.38);
  color: #fff;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ══════════════════════════════════════
   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: var(--font-body);
  font-size: var(--type-label);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-mid);
  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: var(--font-display);
  font-size: var(--type-display);
  font-weight: 300;
  font-style: italic;
  line-height: var(--leading-display);
  letter-spacing: -0.015em;
  margin-bottom: 20px;
}

/* Page subtitle / intro copy — body copy is 16px site-wide */
.gallery-subtitle,
.blog-subtitle,
.neptune-subtitle {
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: var(--leading-body);
  color: var(--text-secondary);
  letter-spacing: 0.015em;
  max-width: var(--measure-reading);
}

/* Increase material density when transparency is unavailable or unwanted. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-bg: #28292e; --glass-bg-elevated: #303137; --glass-bg-solid: #24252a; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root { --glass-bg: #28292e; --glass-bg-elevated: #303137; --glass-bg-solid: #24252a; --glass-blur: none; --glass-blur-light: none; --glass-sheen: linear-gradient(transparent, transparent); --glass-border: 1px solid rgba(255,255,255,.35); }
}