@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,600;9..144,700&family=Inter:wght@400;500&display=swap');
 
  :root{
    --navy: #1c2d52;
    --navy-deep: #14213d;
    --cream: #f6f3ec;
    --coral: #e8543f;
    --gold: #e0a73a;
  }
 
  * { box-sizing: border-box; }
 
  html, body {
    margin: 0;
    height: 100%;
    background: var(--navy-deep);
    font-family: 'Inter', sans-serif;
  }
 
  .stage {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6vh 6vw;
    background:
      radial-gradient(circle at 50% 18%, rgba(224,167,58,0.10), transparent 55%),
      linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
  }
 
  .eyebrow {
    color: var(--gold);
    font-size: 0.78rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 1.4rem;
  }
 
  h1 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--cream);
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    line-height: 1.05;
    margin: 0 0 0.6rem 0;
    letter-spacing: -0.01em;
  }
 
  h1 em {
    font-style: italic;
    font-weight: 300;
    color: var(--coral);
  }
 
  .sub {
    color: rgba(246,243,236,0.65);
    font-size: clamp(0.95rem, 1.6vw, 1.1rem);
    max-width: 36rem;
    margin: 0 auto 3.2rem auto;
    line-height: 1.6;
  }
 
  .frame {
    position: relative;
    width: min(560px, 84vw);
    
  }
 
  .frame img {
    display: block;
    width: 100%;
    border-radius: 12px;
  }
 
  .route-line {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 18px;
    border: 1px solid rgba(246,243,236,0.08);
  }
 
  footer {
    margin-top: 3rem;
    color: rgba(246,243,236,0.35);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
  }
 
  @media (max-width: 480px) {
    .stage { padding: 8vh 6vw; }
}