/* Pundora landing — Stage A placeholder in the house design system.
   Tokens follow the design directive (Project info/design/design-directive.md):
   file paper, iron-gall ink, oxblood as THE accent, EB Garamond for display,
   Instrument Sans for everything else. No glassmorphism, no gradients, no
   mono except for data (none on this page). Light by default; dark follows
   the reader's system setting. */

:root {
  --paper: #F3F1E9;
  --leaf: #FBFAF4;
  --ink: #1C1814;
  --oxblood: #7A2733;
  --rule: #D9D4C5;
  --stone: #6E675C;
  --serif: 'EB Garamond', Charter, Georgia, serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, "Segoe UI", sans-serif;
  --mark: 'Libre Caslon Display', var(--serif);      /* interim face for the wordmark (R32) */
  --hundred: 'Instrument Serif', var(--serif);       /* the "100" in a different face, italic (R30) */
  --measure: 62rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #100E0C; --leaf: #171411; --ink: #EBE7DF;
    --oxblood: #CD8B90; --rule: rgba(235,231,223,.14); --stone: #9A9186;
  }
}

* { box-sizing: border-box; }
html { color-scheme: light dark; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }

/* ---- masthead + the double-rule wordmark ---- */
.masthead {
  max-width: var(--measure); margin: 0 auto; padding: 28px 24px 0;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
}
.wordmark { display: inline-flex; flex-direction: column; gap: 6px; width: 148px; }
.wordmark .rule { display: block; background: var(--ink); }
.wordmark .hairline { height: 1px; }
.wordmark .heavy { height: 3px; }
.wordmark .word {
  font-family: var(--mark); font-size: 22px; letter-spacing: .16em; line-height: 1;
  padding: 2px 0 1px; text-align: center;
}
.nav { display: flex; gap: 22px; font-size: 15px; color: var(--stone); padding-bottom: 4px; }
.nav a:hover { color: var(--ink); }
.nav .signin { color: var(--ink); border-bottom: 1px solid var(--ink); }

/* ---- hero ---- */
.hero { max-width: var(--measure); margin: 0 auto; padding: 96px 24px 72px; }
.kicker { font-size: 15px; color: var(--stone); letter-spacing: .02em; margin-bottom: 18px; }
.hero h1 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(52px, 9vw, 102px);
  line-height: .98; letter-spacing: -.01em; margin: 0 0 28px;
}
.hero h1 em { font-family: var(--hundred); font-style: italic; font-weight: 400; }
.sub { font-family: var(--serif); font-size: clamp(20px, 2.4vw, 26px); line-height: 1.35; max-width: 30em; margin-bottom: 36px; }
.ctarow { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 44px; }
.cta {
  display: inline-block; background: var(--oxblood); color: #FBFAF4;
  font-weight: 500; font-size: 16px; padding: 14px 22px; border-radius: 3px;
}
.cta:hover { filter: brightness(1.08); }
.note { font-size: 14px; color: var(--stone); line-height: 1.35; }
.trust { font-size: 14px; color: var(--stone); border-top: 1px solid var(--rule); padding-top: 16px; max-width: 48em; }

/* ---- the paper ---- */
.paper { background: var(--leaf); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.phead {
  max-width: var(--measure); margin: 0 auto; padding: 64px 24px 40px;
  font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3.4vw, 37px); line-height: 1.2;
}
.cols {
  max-width: var(--measure); margin: 0 auto; padding: 0 24px 48px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
}
.col h3 { font-family: var(--serif); font-weight: 500; font-size: 23px; line-height: 1.2; margin: 0 0 14px; }
.col p { font-size: 16px; color: var(--ink); }
.band {
  max-width: var(--measure); margin: 0 auto; padding: 36px 24px 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  border-top: 1px solid var(--rule);
}
.lead { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 28px); line-height: 1.25; margin: 0 0 8px; max-width: 24em; }
.bandsub { font-size: 14px; color: var(--stone); margin: 0; }

/* ---- footer ---- */
.foot { max-width: var(--measure); margin: 0 auto; padding: 32px 24px 48px; font-size: 14px; color: var(--stone); }
.links { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 14px; }
.links a:hover { color: var(--ink); }
.pending { opacity: .8; }
.co a { border-bottom: 1px solid var(--rule); }

@media (max-width: 760px) {
  .cols { grid-template-columns: 1fr; gap: 28px; }
  .band { flex-direction: column; align-items: flex-start; }
  .hero { padding-top: 64px; }
}