/*
 * The inner pages — the ones people arrive at from a search rather than from a
 * forwarded link.
 *
 * index.html and leaflet.html each carry their own <style> block, because each
 * is one file somebody can open, read and understand on its own. Three more
 * pages sharing a palette is the point at which that stops paying, so these
 * three share this file instead. index.html is deliberately NOT changed to use
 * it: it works, and a shared stylesheet is not worth reopening it for.
 *
 * Same palette and the same two faces as the board itself. A gabbai who lands
 * here from Google and then taps through to the demo should not feel he has
 * changed websites.
 */
:root {
  --ink:    #0A101C;
  --navy:   #131C33;
  --paper:  #F4EFE5;
  --muted:  #7D889C;
  --brass:  #C9922E;
  --brick:  #6E2229;
  --brick-l:#A8434B;
  --rule:   rgba(244,239,229,0.14);
  --display: 'Frank Ruhl Libre', Georgia, serif;
  --text:    'IBM Plex Sans Hebrew', system-ui, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--ink); color: var(--paper);
  font-family: var(--text); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brass); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }

/* ---------------------------------------------------------------- masthead */
.top { border-bottom: 1px solid var(--rule); }
.top .wrap {
  display: flex; align-items: baseline; gap: 18px;
  padding-top: 18px; padding-bottom: 18px; flex-wrap: wrap;
}
.brandline { display: flex; align-items: baseline; gap: 12px; text-decoration: none; color: inherit; }
.brandline b { font-family: var(--display); font-weight: 900; font-size: 24px; letter-spacing: -.01em; }
.brandline span { font-size: 12px; letter-spacing: .22em; color: var(--muted); text-transform: uppercase; }
.top nav { margin-inline-start: auto; display: flex; gap: 20px; flex-wrap: wrap; font-size: 15px; }
.top nav a { color: var(--muted); text-decoration: none; }
.top nav a:hover, .top nav a[aria-current] { color: var(--brass); }

/* ------------------------------------------------------------------- hero */
/*
 * Asymmetric on purpose: the sentence is the thing, and it is allowed to be
 * much wider than the note beside it rather than both sitting in equal halves.
 */
.head { padding: 62px 0 54px; border-bottom: 1px solid var(--rule); }
.kicker {
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass); margin: 0 0 20px;
}
h1 {
  font-family: var(--display); font-weight: 900; font-size: 52px; line-height: 1.08;
  letter-spacing: -.015em; margin: 0 0 22px; max-width: 16em;
}
h1 em { font-style: normal; color: var(--brass); }
.lede { font-size: 21px; color: #C9CFDB; margin: 0; max-width: 34em; }

/* -------------------------------------------------------------- body text */
section { padding: 54px 0; border-bottom: 1px solid var(--rule); }
h2 {
  font-family: var(--display); font-weight: 900; font-size: 33px;
  margin: 0 0 16px; letter-spacing: -.01em; max-width: 20em;
}
h3 { font-family: var(--display); font-weight: 700; font-size: 21px; margin: 32px 0 8px; }
section p { max-width: 38em; color: #C2CAD8; }
section p strong { color: var(--paper); }

/* A run of short definitions. Two columns that do not pretend to be cards. */
.defs { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 0 44px; }
.defs > div { padding: 20px 0; border-top: 1px solid var(--rule); }
.defs .k {
  display: block; font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brass); margin-bottom: 8px;
}
.defs h3 { font-size: 19px; margin: 0 0 6px; }
.defs p { margin: 0; font-size: 16px; color: #B6BFCE; }

/* The plain-fact table: what it costs, what it needs. */
.spec { width: 100%; border-collapse: collapse; margin: 26px 0 0; font-size: 16px; }
.spec th, .spec td { text-align: start; padding: 13px 0; border-top: 1px solid var(--rule); vertical-align: top; }
.spec th { width: 34%; font-weight: 600; color: var(--muted); font-size: 14px;
           letter-spacing: .04em; padding-inline-end: 24px; }
.spec td { color: #C2CAD8; }

/* A pulled-out sentence, not a decorative quote card. */
.note {
  margin: 34px 0 0; padding: 0 0 0 22px; border-inline-start: 2px solid var(--brick-l);
  font-family: var(--display); font-size: 21px; line-height: 1.5; color: var(--paper);
  max-width: 30em;
}
.note cite { display: block; margin-top: 10px; font-family: var(--text);
             font-size: 14px; font-style: normal; color: var(--muted); letter-spacing: .04em; }

/* --------------------------------------------------------------------- cta */
.cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 30px; }
.btn {
  display: inline-block; padding: 13px 22px; text-decoration: none;
  font-weight: 600; font-size: 16px; letter-spacing: .02em;
}
.btn.primary { background: var(--brick); color: var(--paper); border: 1px solid var(--brick-l); }
.btn.ghost { border: 1px solid var(--rule); color: var(--paper); }
.btn:hover { border-color: var(--brass); }
.cta small { color: var(--muted); font-size: 14px; }

/* ------------------------------------------------------------------ footer */
footer { padding: 40px 0 64px; color: var(--muted); font-size: 15px; }
footer strong { color: var(--paper); }
footer a { color: var(--brass); }

@media (max-width: 720px) {
  h1 { font-size: 36px; }
  h2 { font-size: 27px; }
  .head { padding: 40px 0 34px; }
  section { padding: 40px 0; }
  .lede { font-size: 19px; }
  .spec th { width: auto; display: block; border-top: 1px solid var(--rule); padding-bottom: 2px; }
  .spec td { display: block; border-top: 0; padding-top: 0; }
}