/* Sterling — sterlingdine.com
   Colours are the app's own tokens, read from
   designsystem/tokens/SterlingColors.kt so the site cannot drift from the
   product. Light first, dark redefined under prefers-color-scheme. */

:root {
  --canvas:    #F7F2E8;
  --surface:   #FCF8EE;
  --elevated:  #FFFFFF;
  --ink:       #15171A;
  --ink-2:     #4A4D52;
  --ink-3:     #8B8A82;
  --accent:    #C56A45;
  --divider:   #E2DDD2;
  --border:    #CEC8B9;
  --success:   #4A6741;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas:   #15171A;
    --surface:  #1F2125;
    --elevated: #252830;
    --ink:      #F1ECDF;
    --ink-2:    #B0AFA9;
    --ink-3:    #7A7972;
    --accent:   #D9805A;
    --divider:  #2E3036;
    --border:   #383B42;
    --success:  #7C9A6E;
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--sans);
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 24px 48px;
  color: var(--ink);
  background: var(--canvas);
  line-height: 1.65;
  font-size: 16px;
  /* Every numeral in the app is tabular; keep prices and dates aligned here too. */
  font-variant-numeric: tabular-nums;
}

header.masthead {
  border-bottom: 2px solid var(--accent);
  padding-bottom: 16px;
  margin-bottom: 24px;
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
  font-weight: 600;
}

h1 {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.4px;
  margin: 0 0 6px;
  color: var(--ink);
}

h2 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  margin: 32px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--divider);
  color: var(--ink);
}

h3 { font-family: var(--serif); font-size: 17px; font-weight: 700; margin: 22px 0 8px; color: var(--ink); }

.lead { color: var(--ink-2); font-size: 16px; margin: 0; }
.effective { color: var(--ink-3); font-size: 13px; margin: 4px 0 0; }

p  { margin: 0 0 12px; color: var(--ink-2); }
ul { padding-left: 20px; margin: 8px 0 16px; }
li { margin: 6px 0; color: var(--ink-2); }
strong { color: var(--ink); font-weight: 600; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Platform tag — marks a clause that applies to only one of the two apps. */
.plat {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 1px 7px;
  margin-right: 7px;
  border-radius: 3px;
  border: 1px solid var(--border);
  color: var(--ink-3);
  background: var(--surface);
  vertical-align: 1px;
}

/* Elevation in the app is surface fill plus a hairline, never a shadow. */
.card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 10px;
  padding: 18px 20px;
  margin: 20px 0;
}
.card p:last-child, .card ul:last-child { margin-bottom: 0; }

.links { list-style: none; padding: 0; margin: 20px 0 0; }
.links li { margin: 0; border-top: 1px solid var(--divider); }
.links li:last-child { border-bottom: 1px solid var(--divider); }
.links a { display: block; padding: 14px 2px; color: var(--ink); }
.links a:hover { color: var(--accent); text-decoration: none; }
.links .sub { display: block; font-size: 13px; color: var(--ink-3); }

footer {
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid var(--divider);
  color: var(--ink-3);
  font-size: 13px;
}
footer p { color: var(--ink-3); }

@media (max-width: 420px) {
  body { padding: 24px 16px 40px; }
  h1 { font-size: 26px; }
  h2 { font-size: 20px; }
}