/* ══════════════════════════════════════════════
   雙喜茶 · Double Joy Tea — Coming Soon
   Version: v1.3
   Last updated: 2026-04-14

   Visual design — four-reference synthesis:
     PRIMARY: Alishan 18-35 — classical Chinese serif,
       museum-label register, institutional two-column grid,
       generous breathing room.
     SUPPORTING: Chen Clinic — cool clinical wellness,
       clean sans for English, asymmetric spacing.
     SUPPORTING: Té Company — typographic restraint,
       understated rule/stamp ornaments.
     SUPPORTING: Yun Hai — bilingual intentionality,
       modular grid discipline.

   Palette — warm off-white compromise:
     - Background        #F7F4EC (warm off-white)
     - Body text         #1A1410 (deep warm ink)
     - Brand mark        #305B40 (tea-leaf green)
                         + partial gold outline via text-shadow
                           (letterpress light-from-top-left)
                         + soft warm ink atmospheric depth shadow
     - Cultural accent   #8B1A1A (burgundy — 喜氣 on ornamental rule)
     - Tertiary          #A68A3E (aged gold — on hero outline
                           highlight + footer separator dot)

   Typography — Chinese-first hybrid:
     - Chinese           Noto Serif TC (scholarly serif)
                         + hard-edge letterpress shadow on
                           ingredient line (1px 1px 0, 20% alpha)
     - English           Inter (clean clinical neutral sans)

   Layout:
     - Nav bar hidden (hero already carries the mark at scale)
     - Footer border removed (minimal register)
     - Two-column grid with 128px gap on desktop, collapses
       to single column at 768px
     - ~95px/128px section padding per Alishan's "unhurried"
       vertical rhythm
   ══════════════════════════════════════════════ */

:root {
  /* ──── Palette ──── */
  --color-bg:              #F7F4EC;  /* warm off-white */
  --color-surface:         #FBF8F1;  /* slightly warmer for inset surfaces */
  --color-ink:             #1A1410;  /* deep warm ink — primary text */
  --color-text-primary:    #1A1410;  /* alias */
  --color-text-secondary:  #6B5D52;  /* warm stone */
  --color-text-muted:      #8A7C6C;  /* warm gray, AA-adjacent */
  --color-border-light:    #E8E2D6;  /* warm neutral divider */
  --color-white:           #FFFFFF;

  /* Accents — three-color system:
     - Green  → hero mark (brand color)
     - Burgundy → ornamental rule + ring (喜氣 cultural anchor)
     - Gold   → hero outline highlight + footer dot (tertiary) */
  --color-primary:         #A68A3E;  /* aged gold — tertiary */
  --color-primary-hover:   #8A6F2F;
  --color-accent:          #8B1A1A;  /* burgundy — 喜氣 on ornamental rule */
  --color-accent-hover:    #6F1414;
  --color-jade:            #305B40;  /* tea-leaf green — BRAND MARK color for 雙喜茶 */

  /* ──── Typography ──── */
  --font-display: 'Noto Serif TC', 'Songti TC', serif;     /* Chinese scholarly */
  --font-body:    'Inter', system-ui, sans-serif;          /* English clinical */

  /* ──── Spacing (generous rhythm per Alishan) ──── */
  --space-4:   4px;
  --space-8:   8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-20:  20px;
  --space-24:  24px;
  --space-32:  32px;
  --space-40:  40px;
  --space-48:  48px;
  --space-64:  64px;
  --space-96:  96px;
  --space-128: 128px;

  /* ──── Radius ──── */
  --radius-sm:   4px;
  --radius-md:   8px;

  /* ──── Motion ──── */
  --motion-base: 200ms;
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-ink);
  font-size: 16px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a {
  color: var(--color-ink);
  text-decoration: none;
  transition: color var(--motion-base) var(--ease);
}

a:hover {
  color: var(--color-primary-hover);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-32);
}

/* ══════════════════════════════════════════════
   NAV — bilingual lockup, hidden on coming-soon
   (hero carries the mark at much larger weight).
   Remove `display: none` to restore for multi-page layouts.
   ══════════════════════════════════════════════ */
.nav {
  display: none;
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 244, 236, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border-light);
  padding: var(--space-20) 0;
}

.nav .container {
  display: flex;
  align-items: center;
}

.nav-logo {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-12);
  color: var(--color-ink);
}

.nav-logo-zh {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-ink);
}

.nav-logo-sep {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-primary);
  font-weight: 300;
}

.nav-logo-en {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* ══════════════════════════════════════════════
   COMING SOON SECTION
   ══════════════════════════════════════════════ */
.coming-soon-section {
  flex: 1;
  display: flex;
  align-items: center;
  padding: var(--space-128) 0;
}

.coming-soon-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-128);
  align-items: start;
  width: 100%;
}

/* ──── Hero — bilingual lockup, Chinese-first ──── */
.coming-soon-text {
  max-width: 560px;
}

.hero-mark {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 11vw, 6.5rem);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: 0.08em;
  color: var(--color-jade);  /* tea-leaf green — brand mark */
  /* Layered text-shadow — two effects in one declaration:
     1. Solid gold offset (0 blur) creates a partial outline on
        the lower-right of each stroke, as if light from top-left
        is casting a gold-layered shadow. Letterpress-inspired.
     2. Soft warm ink shadow adds atmospheric depth without
        muddying the delicate serif strokes. */
  text-shadow:
    2px 3px 0 rgba(166, 138, 62, 0.75),      /* partial gold outline — light from top-left */
    3px 5px 12px rgba(26, 20, 16, 0.15);     /* soft warm atmospheric depth */
  margin: 0 0 var(--space-16) 0;
}

.hero-wordmark {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-48) 0;
}

.hero-lede {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--color-ink);
  max-width: 460px;
  margin: 0 0 var(--space-48) 0;
}

.hero-ingredients-zh {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: var(--color-ink);
  /* Hard-edge letterpress shadow — 0 blur, 1px offset, 20%
     alpha. At ~22px character size, any blur softens the
     thin serif strokes and reads as "out of focus" instead
     of "pressed into paper." Zero-blur crisp shadow feels
     mechanical/typeset. Darker alpha compensates for the
     lack of diffusion. No gold outline — letterpress peek
     is reserved for the hero mark as a single flourish. */
  text-shadow: 1px 1px 0 rgba(26, 20, 16, 0.2);
  margin: 0 0 var(--space-8) 0;
}

.hero-ingredients-en {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}

/* ──── Ornamental rule — burgundy with centered ring ──── */
.hero-rule {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  max-width: 240px;
  margin: var(--space-40) 0;
}

.hero-rule-line {
  flex: 1;
  height: 1px;
  background: var(--color-accent);  /* burgundy — cultural 喜氣 ornament */
}

.hero-rule-mark {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--color-accent);  /* burgundy */
  background: transparent;
  flex-shrink: 0;
}

/* ──── Sourcing and close lines ──── */
.hero-sourcing {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--color-text-secondary);
  max-width: 460px;
  margin: 0 0 var(--space-12) 0;
}

.hero-close {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--color-text-secondary);
  max-width: 460px;
  margin: 0;
}

/* ──── Form column — demoted card, vertical gold rule divider ──── */
.coming-soon-form {
  background: transparent;
  border: none;
  border-left: 1px solid var(--color-border-light);
  border-radius: 0;
  padding: var(--space-8) 0 0 var(--space-64);
  min-height: auto;
}

.coming-soon-form iframe {
  border-radius: 0;
}

.form-lede {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-32) 0;
}

/* ══════════════════════════════════════════════
   FOOTER — bilingual, gold separator.
   Border-top removed for minimal register — the footer
   flows into the page without a hard visual break.
   ══════════════════════════════════════════════ */
.footer {
  padding: var(--space-48) 0;
}

.footer .container {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-32);
}

.footer-left {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-12);
}

.footer-year,
.footer-en {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.footer-zh {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
}

.footer-sep {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-primary);
  font-weight: 300;
}

.footer-right {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════
   RESPONSIVE — scale generous padding down on mobile
   ══════════════════════════════════════════════ */
@media (max-width: 960px) {
  .coming-soon-section {
    padding: var(--space-96) 0;
  }

  .coming-soon-layout {
    gap: var(--space-96);
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 var(--space-24);
  }

  .coming-soon-section {
    padding: var(--space-64) 0;
  }

  .coming-soon-layout {
    grid-template-columns: 1fr;
    gap: var(--space-64);
  }

  .coming-soon-text {
    max-width: 100%;
  }

  .hero-mark {
    font-size: clamp(3.5rem, 14vw, 5rem);
  }

  .hero-wordmark {
    margin-bottom: var(--space-32);
  }

  .hero-lede {
    margin-bottom: var(--space-32);
  }

  .hero-ingredients-zh {
    font-size: 1.2rem;
    letter-spacing: 0.06em;
  }

  .hero-ingredients-en {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
  }

  .hero-rule {
    margin: var(--space-32) 0;
  }

  .coming-soon-form {
    border-left: none;
    border-top: 1px solid var(--color-border-light);
    padding: var(--space-48) 0 0 0;
  }

  .footer {
    padding: var(--space-32) 0;
  }

  .footer .container {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
  }
}