/* Stripes · styles of the sub pages (Support, Privacy, the not-found page)
   The app's palette (src/theme/palettes.ts, dark) and type roles (src/constants/fonts.ts):
   Fira Sans Condensed for data and body, Cormorant Garamond 600 for names, its italic for the voice.
   The home page carries its own styles in index.html, the questions page in faq.css. */

:root {
  --bg: #131210;
  --border: #2e2a24;
  --text: #f5f0e8;
  --text-sub: #a89d90;
  --text-muted: #9a9187;
  --gold: #d6b270;
  --serif: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --sans: "Fira Sans Condensed", "Fira Sans", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(20px, 5vw, 72px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 18px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---------- type ---------- */
.eyebrow { margin: 0 0 20px; font-size: 13px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); }
.headline { margin: 0; font-family: var(--serif); font-weight: 600; font-style: italic; line-height: 0.98; letter-spacing: -0.01em; color: var(--text); text-wrap: balance; }
.headline-md { font-size: clamp(40px, 5vw, 70px); }

/* the sky's foot melts into the page, as the app's plates do */
.melt { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; pointer-events: none;
  background: linear-gradient(180deg, rgba(19,18,16,0) 0%, rgba(19,18,16,.04) 14%, rgba(19,18,16,.16) 29%, rgba(19,18,16,.35) 43%, rgba(19,18,16,.57) 57%, rgba(19,18,16,.78) 71%, rgba(19,18,16,.93) 86%, var(--bg) 100%); }

/* ---------- footer ---------- */
.foot {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 26px var(--gutter) 34px; border-top: 1px solid var(--border);
  font-size: 14px; color: var(--text-muted); letter-spacing: .02em; background: var(--bg);
}
.foot-links { display: flex; flex-wrap: wrap; gap: 22px; }
.foot-links a:hover { color: var(--text); }

/* ---------- sub pages: a sky band up top, the ledger below ---------- */
.subpage { background: var(--bg); }
.band { position: absolute; top: 0; left: 0; right: 0; height: 62svh; z-index: 0; overflow: hidden; }
.band canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.band .melt { height: 55%; }
.nav { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; padding: 26px var(--gutter) 0; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark { width: 34px; height: auto; }
.brand-word { width: 118px; height: auto; opacity: .92; margin-top: 2px; }
.sheet { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 30svh var(--gutter) 130px; }
.sub { margin: 24px 0 0; max-width: 32em; font-size: 19px; line-height: 1.5; color: var(--text-sub); }
.dated { margin: 18px 0 0; font-size: 14px; color: var(--text-muted); letter-spacing: .04em; }
.eyebrow-sp { margin-top: 56px; }
.mail-line { display: inline-block; margin-top: 30px; font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 3.6vw, 42px); color: var(--gold); border-bottom: 1px solid rgba(214,178,112,.35); padding-bottom: 4px; }
.ruled { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.ruled li { padding: 16px 0; border-bottom: 1px solid var(--border); color: var(--text-sub); }
.ruled-blocks { margin-top: 48px; border-top: 1px solid var(--border); }
.ruled + .ruled-blocks { margin-top: 0; border-top: 0; }
.ruled-blocks section { padding: 28px 0; border-bottom: 1px solid var(--border); }
.ruled-blocks h2 { margin: 0 0 10px; font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 1.2; }
.ruled-blocks p { margin: 0; max-width: 34em; color: var(--text-sub); line-height: 1.55; }
.ruled-blocks p a { color: var(--gold); }
.sheet-foot { margin-top: 44px; color: var(--text-muted); font-size: 16px; }
.sheet-foot a { color: var(--gold); border-bottom: 1px solid rgba(214,178,112,.35); }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .eyebrow { font-size: 12px; letter-spacing: .2em; }
  .foot { flex-direction: column; align-items: flex-start; gap: 12px; }
  .sheet { padding-top: 26svh; }
  .ruled-blocks h2 { font-size: 26px; }
}