/* Colours, type and the logo follow the Renaissance Brand Kit 2026 (and apps/mobile/src/theme/tokens.ts). The art is always
   the full-colour crop with room around it. Fonts are served from this site: these pages load nothing from anyone else. */
:root {
  --surface: #f1f2ee;
  --raised: #fafbf8;
  --line: #d3dbd8;
  --ink: #172a33;
  --muted: #56636a;
  --adriatic: #1e4b5a;
  --soft: #dce8ea;
  --saffron: #e3a92b;
  --on-saffron: #172a33;
  --parchment: #e9e1d1;
  --rose: #a63d52;
  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --voice: "Spectral", Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface: #0e1a20;
    --raised: #15252d;
    --line: #29404a;
    --ink: #e8ece9;
    --muted: #9daab0;
    --adriatic: #7db8c8;
    --soft: #16323b;
    --saffron: #edb440;
    --parchment: #15252d;
    --rose: #e58a9b;
  }
}
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-style: normal; font-display: swap; src: url("assets/fonts/cormorant-600.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: italic; font-display: swap; src: url("assets/fonts/cormorant-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Spectral"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/spectral-400.woff2") format("woff2"); }
@font-face { font-family: "Spectral"; font-weight: 400; font-style: italic; font-display: swap; src: url("assets/fonts/spectral-400-italic.woff2") format("woff2"); }
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  border-top: 5px solid var(--saffron);
}
main { max-width: 680px; margin: 0 auto; padding: 32px 16px 72px; }
.brand { margin: 0 0 40px; }
.brand a { color: var(--ink); display: inline-block; }
.brand svg, .wordmark svg { display: block; height: auto; }
h1 { margin: 0 0 8px; font: 600 38px/1.12 var(--display); letter-spacing: -0.005em; }
h2 { margin: 40px 0 8px; font-size: 20px; line-height: 1.3; }
h3 { margin: 24px 0 4px; font-size: 17px; }
p, ul { margin: 0 0 14px; }
ul { padding-left: 22px; }
li { margin-bottom: 6px; }
a { color: var(--adriatic); }
.meta { color: var(--muted); font-size: 15px; }
.short { margin-top: 28px; padding: 16px 18px 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--raised); }
.short h2 { margin-top: 0; }
mark { background: var(--soft); color: inherit; padding: 1px 4px; border-radius: 4px; }
table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; }

/* ---- the letter (home page) ---- */
.letter-page main.letter { max-width: 660px; padding: 8px 20px 56px; }
.masthead { max-width: 1040px; margin: 0 auto; padding: 22px 20px 26px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.masthead .mark { color: var(--ink); display: block; }
.masthead svg, .signature svg { display: block; height: auto; }
.masthead-ask { font-size: 14px; font-weight: 600; color: var(--adriatic); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.letter .art { display: block; width: 100%; height: auto; border-radius: 22px; margin: 0 0 44px; }
.dateline { margin: 0 0 14px; color: var(--adriatic); font-size: 12.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
.letter h1 { font-size: clamp(40px, 9.4vw, 66px); line-height: 1.02; margin: 0 0 40px; text-wrap: balance; }
.prose { font: 400 20px/1.62 var(--voice); }
.prose p { margin: 0 0 22px; text-wrap: pretty; }
.prose strong { font-weight: 400; font-style: italic; color: var(--rose); }
.salutation { font: italic 500 27px/1.3 var(--display); color: var(--adriatic); margin-bottom: 18px !important; }
.opening::first-letter { float: left; font: 600 78px/0.82 var(--display); padding: 6px 10px 0 0; color: var(--adriatic); }
.vows { list-style: none; margin: 34px 0 44px; padding: 0; border-top: 1px solid var(--line); }
.vows li { display: grid; grid-template-columns: 54px 1fr; gap: 6px; padding: 22px 0; margin: 0; border-bottom: 1px solid var(--line); }
.vows .numeral { font: 600 30px/1.1 var(--display); color: var(--saffron); }
.vows h2 { margin: 0 0 6px; font: 600 27px/1.15 var(--display); }
.vows p { margin: 0; color: var(--muted); font: 400 17.5px/1.55 var(--voice); }
.signoff { margin-top: 8px; }
.signature { color: var(--ink); margin: 0 !important; }
.ask { background: var(--parchment); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); scroll-margin-top: 12px; }
.ask-inner { max-width: 660px; margin: 0 auto; padding: 56px 20px 60px; }
.ask h2 { margin: 0 0 10px; font: 600 clamp(34px, 7vw, 46px)/1.05 var(--display); }
.ask-lede { margin: 0 0 28px; font: 400 18.5px/1.6 var(--voice); max-width: 34em; }
.ask label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.ask input, .ask select { display: block; width: 100%; max-width: 420px; height: 52px; margin: 0 0 18px; padding: 0 14px; border: 1px solid var(--muted); border-radius: 10px; background: var(--raised); color: var(--ink); font: inherit; font-size: 17px; }
.ask input:focus-visible, .ask select:focus-visible, .ask button:focus-visible, .masthead-ask:focus-visible { outline: 3px solid var(--adriatic); outline-offset: 2px; }
.ask button { height: 52px; padding: 0 30px; margin-top: 4px; border: 0; border-radius: 999px; background: var(--saffron); color: var(--on-saffron); font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.ask button:disabled { opacity: 0.6; cursor: default; }
.ask .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { margin: -6px 0 14px; color: var(--rose); font-size: 15px; font-weight: 600; }
.fineprint { margin: 18px 0 0; color: var(--muted); font-size: 14px; }
.thanks h3 { margin: 0 0 8px; font: italic 500 30px/1.2 var(--display); color: var(--adriatic); }
.thanks p { margin: 0; font: 400 18.5px/1.6 var(--voice); max-width: 32em; }
.foot { max-width: 660px; margin: 0 auto; padding: 28px 20px 44px; color: var(--muted); font-size: 14px; }
.foot p { margin: 0; }
@media (max-width: 520px) {
  .prose { font-size: 18.5px; }
  .vows li { grid-template-columns: 40px 1fr; }
  .vows h2 { font-size: 24px; }
  .opening::first-letter { font-size: 66px; }
}
@media (max-width: 520px) {
  thead { display: none; }
  tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  td { display: block; padding: 0; border: 0; }
  td:first-child { font-weight: 600; }
}