/* Your Blue Book — shared across its three pages (landing, support, privacy).
   The landing page keeps its own hero, steps and story rules inline; everything
   here is what all three need in common, so the tabs feel like one site.
   Fonts are served from here, not Google Fonts, so a visit makes no request to
   anyone else (privacy policy). Latin only; Open Font License, beside the files. */

/* Served from here, not Google Fonts, so a visit makes no request to anyone
   else (privacy policy). Latin only; Open Font License, beside the files. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(/bluebook/assets/fonts/fraunces.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/bluebook/assets/fonts/inter.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/bluebook/assets/fonts/ibm-plex-mono-400.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/bluebook/assets/fonts/ibm-plex-mono-500.woff2) format('woff2');
}
:root {
  --navy-cover: #1E3350;
  --navy-dark: #142338;
  --ink: #1F1D19;
  --ink-soft: #38342C; /* Enhanced contrast for high readability */
  --paper: #FAF6EE;
  --paper-card: #FFFFFF;
  --paper-line: #E6DCB8;
  --gold: #8C6A1B;     /* Slightly deeper contrast */
  --gold-light: #C9A64A;
  --rust: #8B3520;     /* Darker contrast for subhead */
  --cream-text: #F8F4EA;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(var(--max), 100% - 2.5rem); margin-inline: auto; }

/* Branding Bar */
/* Same shape as Dash's top bar — brand left, tabs right, rule beneath —
   in Blue Book's own colours. No theme switcher: this site is one theme. */
.brand-bar {
  padding-block: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--paper-line);
}
.tabs { display: flex; flex-wrap: wrap; gap: 0.2rem; font-size: 0.9rem; }
.tabs a {
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.45rem 0.8rem;
  border-radius: 8px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.tabs a:hover { color: var(--ink); background: var(--paper-card); }
.tabs a[aria-current="page"] { color: var(--ink); background: var(--paper-card); border-color: var(--paper-line); font-weight: 600; }
@media (max-width: 720px) {
  .brand-bar { flex-wrap: wrap; gap: 0.6rem; }
  .tabs { font-size: 0.82rem; }
  .tabs a { padding: 0.4rem 0.55rem; }
}
.brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
.brand-logo img {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.brand-logo span {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
}

/* ---------- Footer: identical wording on every page of the site ---------- */
footer {
  padding: 22px 0 9px;
  font-size: 14.5px;
  color: var(--ink-soft);
}
footer a { color: var(--ink); text-decoration: underline; }
/* Same shape as Dash's: who made it and where to go on the left, the
   copyright on the right, stacking rather than squashing when narrow.
   The rule sits under the "not a legal will" line rather than above it,
   so that line reads as the end of the page and not as part of the
   small print below. */
footer .foot-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  border-top: 1px solid var(--paper-line);
  padding-top: 8px;
}
footer .disclaimer { margin: 0 0 14px; }

/* ---------- Doc pages: support and privacy ----------
   Same paper, same fonts, same bar as the landing page, so moving between
   tabs doesn't feel like leaving the site. Only the reading column is
   narrower, because these are pages of prose rather than a shop window. */
main.docs { max-width: 760px; margin: 0 auto; padding: 40px 24px 0; }

h1 { font-family: 'Fraunces', serif; font-weight: 700; font-size: 38px; line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 10px; }
.intro { color: var(--ink-soft); margin: 0 0 40px; max-width: 58ch; }
.updated { font-size: 14px; color: var(--ink-soft); margin: 0 0 32px; font-family: 'IBM Plex Mono', monospace; }
.label { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin: 0 0 16px; }
a { color: var(--gold); text-underline-offset: 2px; }

.app-doc h3 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 22px; margin: 40px 0 10px; color: var(--ink); }
.app-doc p, .app-doc li { color: var(--ink-soft); font-size: 17px; }
.app-doc p { margin: 0 0 16px; }
.app-doc ul { margin: 0 0 16px; padding-left: 22px; }
.app-doc li { margin-bottom: 8px; }
.app-doc strong { color: var(--ink); font-weight: 600; }

.callout { background: var(--paper-card); border: 1px solid var(--paper-line); border-radius: 14px; padding: 22px 26px; margin: 0 0 8px; }
.callout p { margin: 0; }

.card { background: var(--paper-card); border: 1px solid var(--paper-line); border-radius: 14px; padding: 24px; margin-bottom: 40px; }
.card h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 21px; margin: 0 0 8px; }
.card p { margin: 0 0 14px; color: var(--ink-soft); font-size: 16.5px; }
.card p:last-child { margin-bottom: 0; }
.app-doc .card { margin: 8px 0 0; }
.app-doc .card p { margin-bottom: 4px; font-size: 16px; }

.button { display: inline-block; background: var(--navy-cover); color: var(--cream-text); padding: 11px 20px; border-radius: 9px; text-decoration: none; font-weight: 600; font-size: 15px; }
.button:hover { background: var(--navy-dark); }

details { background: var(--paper-card); border: 1px solid var(--paper-line); border-radius: 14px; padding: 0 22px; }
details + details { margin-top: 10px; }
details[open] { border-color: var(--gold-light); }
summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-weight: 400; font-size: 22px; line-height: 1; color: var(--gold); flex-shrink: 0; }
details[open] summary::after { content: "\2013"; }
.app-doc details p { font-size: 16px; }

@media (max-width: 520px) {
  main.docs { padding-top: 28px; }
  h1 { font-size: 30px; }
}