:root {
    --navy: #0b1f3a;
    --navy-deep: #061229;
    --ivory: #f3eee0;
    --gold: #b8924a;
    --muted: rgba(243,238,224,0.55);
    --rule: rgba(243,238,224,0.18);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }
  body {
    font-family: "Noto Serif TC", "Source Han Serif TC", "PMingLiU", "MingLiU", Georgia, serif;
    background: var(--navy-deep);
    color: var(--ivory);
    min-height: 100vh;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
  }

  /* Hero */
  .hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 32px;
    position: relative;
  }

  /* Subtle radial halo */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(184,146,74,0.08), transparent 55%);
    pointer-events: none;
  }

  .label {
    font-family: Georgia, serif;
    font-size: 11px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 48px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-indent: 0.4em;
    position: relative;
  }
  .label::before, .label::after {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--gold);
    opacity: 0.7;
  }

  h1 {
    font-size: clamp(56px, 8vw, 112px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: 0.04em;
    color: var(--ivory);
    margin-bottom: 20px;
    text-indent: 0.04em;
    position: relative;
  }
  h1 .light {
    font-weight: 300;
    color: rgba(243,238,224,0.7);
  }

  .h1-en {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: clamp(15px, 1.4vw, 19px);
    color: var(--muted);
    letter-spacing: 0.18em;
    margin-bottom: 56px;
    text-indent: 0.18em;
    position: relative;
  }

  .ornament {
    margin-bottom: 48px;
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
  }
  .ornament .line {
    width: 80px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--gold) 50%, transparent);
  }
  .ornament .diamond {
    width: 6px;
    height: 6px;
    background: var(--gold);
    transform: rotate(45deg);
  }

  .body-copy {
    max-width: 540px;
    font-size: 16px;
    line-height: 2.1;
    color: rgba(243,238,224,0.78);
    letter-spacing: 0.06em;
    position: relative;
  }
  .body-copy p + p { margin-top: 12px; }

  /* Bottom strip */
  .footer {
    border-top: 1px solid var(--rule);
    padding: 28px 56px;
    display: flex;
    justify-content: center;
    gap: 96px;
    font-family: Georgia, serif;
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .footer dt {
    color: var(--gold);
    margin-bottom: 8px;
    opacity: 0.85;
    text-indent: 0.24em;
  }
  .footer dd {
    color: var(--ivory);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: none;
    text-indent: 0;
  }
  .footer dl { text-align: center; }

  /* Footer links — inherit the ivory tone, no underline by default,
     reveal a subtle gold underline on hover/focus */
  .footer a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(var(--gold), var(--gold));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    padding-bottom: 2px;
    transition: background-size 0.35s ease, color 0.35s ease;
  }
  .footer a:hover,
  .footer a:focus-visible {
    color: var(--gold);
    background-size: 100% 1px;
    outline: none;
  }

  /* Tiny noise */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
      radial-gradient(circle at 25% 30%, rgba(255,255,255,0.015) 0, transparent 40%),
      radial-gradient(circle at 75% 70%, rgba(184,146,74,0.04) 0, transparent 40%);
    mix-blend-mode: screen;
  }

  @media (max-width: 720px) {
    .footer { flex-direction: column; padding: 24px; gap: 18px; }
    .footer dl { text-align: left; }
    .hero { padding: 56px 24px; }
    .body-copy { font-size: 15px; line-height: 2; }
  }