/* Sansonnet — v1 */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --paper: #f0ebe1; --paper-2: #ebe5d8;
  --ink: #1a1a1a; --ink-2: #5a4a3a; --rule: #c8bfae;
  --serif: 'EB Garamond', 'Caslon', 'Lora', Georgia, serif;
}
html, body { background: var(--paper); color: var(--ink); }
body { font-family: var(--serif); font-size: 18px; line-height: 1.65; -webkit-font-smoothing: antialiased; padding: 96px 24px 64px; }
.sheet { max-width: 600px; margin: 0 auto; }
.wordmark { font-family: var(--serif); font-size: 30px; font-weight: 500; letter-spacing: .005em; margin-bottom: 6px; }
.wordmark a { color: inherit; text-decoration: none; border: 0; }
.wordmark-sub { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 64px; }
h1 { font-family: var(--serif); font-weight: 500; font-size: 24px; letter-spacing: .005em; margin-bottom: 28px; }
p { margin-bottom: 18px; }
p:last-of-type { margin-bottom: 0; }
a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); transition: border-color .15s, color .15s; }
a:hover { color: var(--ink-2); border-bottom-color: var(--ink-2); }
.rule { border: 0; border-top: 1px solid var(--rule); margin: 40px 0; }
.ornament { text-align: center; font-size: 18px; color: var(--ink-2); margin: 32px 0; letter-spacing: .4em; }
.signoff { margin-top: 36px; font-style: italic; color: var(--ink-2); }
.address-block { font-variant-numeric: oldstyle-nums; letter-spacing: .04em; }
.address-block .lh { display: block; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.list-em { padding-left: 0; list-style: none; }
.list-em li { position: relative; padding-left: 22px; margin-bottom: 10px; }
.list-em li::before { content: "—"; position: absolute; left: 0; color: var(--ink-2); }
.lede { font-variant: small-caps; letter-spacing: .12em; font-weight: 500; color: var(--ink); margin-right: .2em; }
.nav-text { margin-top: 64px; font-size: 14px; color: var(--ink-2); }
.nav-text a { font-size: 14px; }
.page-footer { margin-top: 96px; padding-top: 24px; border-top: 1px solid var(--rule); text-align: center; }
.colophon { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); line-height: 1.6; }
.colophon .sep { margin: 0 10px; opacity: .5; }
.lang-switch { margin-top: 16px; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); }
.lang-switch a { color: var(--ink-2); border-bottom: 0; }
.lang-switch a:hover { color: var(--ink); }
.lang-switch .active { color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 1px; }

@media (max-width: 640px) {
  body { padding: 56px 20px 40px; font-size: 17px; line-height: 1.6; }
  .wordmark { font-size: 26px; }
  .wordmark-sub { margin-bottom: 44px; font-size: 10px; }
  h1 { font-size: 22px; margin-bottom: 22px; }
  .ornament { margin: 24px 0; }
  .signoff { margin-top: 28px; }
  .nav-text { margin-top: 48px; font-size: 13px; }
  .nav-text a { font-size: 13px; }
  .page-footer { margin-top: 64px; padding-top: 20px; }
  .colophon { line-height: 1.9; }
  .colophon .sep { margin: 0 6px; }
  .rule { margin: 28px 0; }
}

@media (max-width: 380px) {
  body { padding: 44px 16px 32px; font-size: 16px; }
  .wordmark { font-size: 24px; }
  h1 { font-size: 20px; }
  .colophon { font-size: 9px; letter-spacing: .18em; }
  .colophon .sep { margin: 0 4px; }
  .lang-switch { font-size: 9px; letter-spacing: .18em; }
}