/*
 * Page-specific styles that lived in inline <style> blocks of the original
 * static pages (404, privacy, terms, cookies). Extracted here so the Next.js
 * route components stay clean and these classes resolve. Verbatim from source.
 */

/* ---- Homepage nav ----
 * The homepage nav starts transparent with cream links, designed to sit over
 * the full-bleed dark hero. The shared nav is position:sticky (in-flow), which
 * would leave the cream links over the beige page background. On the homepage
 * only (it's the page that has .design-hero), pin the nav so the 100vh hero
 * sits behind it. On scroll the nav gains .scrolled (beige blur) as usual.
 */
body:has(.design-hero) .nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* ---- Legal pages (privacy / terms / cookies) ---- */
.legal-page { max-width: 820px; margin: 0 auto; padding: 6rem var(--gutter) 4rem; }
.legal-page .eyebrow { color: var(--gold-dark); margin-bottom: 1rem; }
.legal-page h1 { font-size: clamp(2.4rem, 4vw, 3.4rem); letter-spacing: 0.04em; margin-bottom: 0.5rem; }
.legal-page .updated { color: var(--muted); font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 3rem; }
.legal-page h2 { font-size: 1.5rem; letter-spacing: 0.04em; margin: 2.4rem 0 0.8rem; }
.legal-page p, .legal-page li { color: #2a2a2a; line-height: 1.85; font-size: 1rem; margin-bottom: 0.8rem; }
.legal-page ul { padding-left: 1.4rem; margin-bottom: 1rem; }
.legal-page a { color: var(--evergreen); text-decoration: underline; }
.legal-page table { border-collapse: collapse; width: 100%; margin: 1rem 0 1.5rem; }
.legal-page th, .legal-page td { border: 1px solid var(--beige-line); padding: 0.7rem 0.9rem; text-align: left; font-size: 0.92rem; }
.legal-page th { background: var(--beige-alt); font-weight: 600; }
.legal-page .draft-banner {
  background: rgba(168,135,80,0.12);
  border-left: 3px solid var(--gold-dark);
  padding: 1rem 1.2rem;
  margin-bottom: 2.5rem;
  font-size: 0.9rem;
  color: var(--evergreen);
}

/* ---- 404 ---- */
.err-wrap {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem var(--gutter) 4rem;
  text-align: center;
}
.err-inner { max-width: 640px; }
.err-code {
  font-family: var(--f-display, 'Cormorant Garamond', serif);
  font-size: clamp(7rem, 16vw, 12rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--evergreen);
  margin: 0;
}
.err-rule {
  width: 56px;
  height: 1px;
  background: var(--gold-dark, #A88750);
  margin: 1.6rem auto 1.8rem;
}
.err-title {
  font-family: var(--f-display, 'Cormorant Garamond', serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: 0.04em;
  margin: 0 0 0.8rem;
}
.err-lede {
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 2rem;
  font-size: 1rem;
}
.err-cta-row {
  display: inline-flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  justify-content: center;
}
.err-cta-row .btn-ghost {
  background: transparent;
  color: var(--evergreen);
  border: 1px solid var(--evergreen);
}
.err-cta-row .btn-ghost:hover { background: var(--evergreen); color: var(--cream); }
html[lang="zh"] .err-title { font-weight: 600; }