/* Apéritif — Glasshouse, as used in the app itself.
   Shared by every page here so the legal texts read as part of the product
   rather than as something bolted on. No JavaScript, no external requests. */

:root {
  --canvas:   #F4F6F5;
  --surface:  #E7ECEA;
  --ink:      #101314;
  --ink-soft: #687276;
  --green:    #244B40;
  --blue:     #456372;
  --rule:     #D7DEDC;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --measure: 68ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas:   #090C0D;
    --surface:  #151A1B;
    --ink:      #F2F5F4;
    --ink-soft: #9CA6A8;
    --green:    #4F8A78;
    --blue:     #7597A5;
    --rule:     #293032;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 780px;
  margin: 0 auto;
  padding: 40px 22px 96px;
}

/* ---- Masthead ---- */

.masthead {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 26px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--green);
  text-decoration: none;
  display: inline-block;
}
.wordmark:hover { text-decoration: none; opacity: 0.85; }

.masthead .role {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}

/* ---- Type ---- */

h1 {
  font-size: clamp(28px, 6vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin: 0 0 8px;
  text-wrap: balance;
}

h2 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--green);
  margin: 40px 0 12px;
}

p, li { max-width: var(--measure); }
p { margin: 0 0 16px; }

ul { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 7px; }

a { color: var(--green); text-underline-offset: 2px; }
a:hover { text-decoration: none; }
a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 2px; }

.dateline {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin-bottom: 34px;
}

.lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
  border-left: 2px solid var(--green);
  padding-left: 18px;
  margin-bottom: 30px;
}

.note { color: var(--ink-soft); font-size: 15.5px; }

/* ---- Index cards ---- */

.docs {
  list-style: none;
  padding: 0;
  margin: 0 0 34px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.docs li { margin: 0; max-width: none; }
.docs a {
  display: block;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s ease;
}
.docs a:hover { border-color: var(--green); }
.docs strong {
  display: block;
  font-size: 17px;
  font-weight: 650;
  color: var(--green);
  margin-bottom: 3px;
}
.docs span { color: var(--ink-soft); font-size: 15.5px; }

/* ---- Footer ---- */

.footer {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 14.5px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}