/*
 * Kharcha's site, on the app's own design system.
 *
 * Same tokens as src/theme.ts, and the same three rules the app follows:
 * figures right-aligned on one axis, rules rather than cards (a radius means
 * something is pressable), and ochre reserved for work waiting on you.
 *
 * Every asset is served from this origin. No Google Fonts, no CDN, no analytics —
 * a privacy policy that phones a third party to render itself is a privacy
 * policy arguing against its own text.
 */

@font-face {
  font-family: 'Newsreader';
  src: url('fonts/Newsreader-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo Narrow';
  src: url('fonts/ArchivoNarrow-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

:root {
  --paper: #eef1f4;
  --sheet: #fbfcfd;
  --ink: #16243a;
  --ink-soft: #5a6b80;
  --ink-faint: #64748a;
  --rule: #c3ccd6;
  --rule-soft: #dde3e9;
  --ledger: #2f5d4a;
  --stamp: #9a6415;
  --stamp-wash: #faf5ea;
  --madder: #8c2f28;

  --display: 'Newsreader', Georgia, serif;
  --text: 'Archivo', system-ui, -apple-system, sans-serif;
  --figure: 'Archivo Narrow', 'Archivo', system-ui, sans-serif;

  --measure: 34rem;
  --gutter: 1.25rem;
}

/*
 * Dark mode is chosen, not an inversion: the ink becomes the ground and the
 * greens and ochres are re-picked against it, because the light steps go muddy
 * on a dark surface.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #101a2a;
    --sheet: #16233a;
    --ink: #e8edf3;
    --ink-soft: #9aabbf;
    --ink-faint: #8394aa;
    --rule: #2c3d56;
    --rule-soft: #223146;
    --ledger: #7fc0a4;
    --stamp: #d9a54e;
    --stamp-wash: #1d2536;
    --madder: #e08a82;
  }
}
:root[data-theme='dark'] {
  --paper: #101a2a;
  --sheet: #16233a;
  --ink: #e8edf3;
  --ink-soft: #9aabbf;
  --ink-faint: #8394aa;
  --rule: #2c3d56;
  --rule-soft: #223146;
  --ledger: #7fc0a4;
  --stamp: #d9a54e;
  --stamp-wash: #1d2536;
  --madder: #e08a82;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* --- masthead: the wordmark and the two documents, on one rule --- */

.masthead {
  border-bottom: 1px solid var(--rule);
  padding: 1.5rem 0 0.875rem;
  margin-bottom: 3rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.wordmark {
  font-family: var(--text);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

.masthead nav {
  display: flex;
  gap: 1.25rem;
  font-size: 0.9375rem;
}

.masthead nav a { color: var(--ink-soft); text-decoration: none; }
.masthead nav a:hover,
.masthead nav a[aria-current='page'] { color: var(--ink); }

/* --- the opening statement --- */

.lede {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.125rem, 8vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 1.25rem;
}

.standfirst {
  font-size: 1.125rem;
  color: var(--ink-soft);
  margin: 0 0 3.25rem;
  max-width: 30rem;
}

/*
 * The audit. Two columns on one axis, the way every figure in the app aligns:
 * what could leave on the left, what actually does on the right. This is the
 * page's one memorable element, so nothing around it competes.
 */

.audit { margin: 0 0 3.25rem; }

.audit h2 {
  font-family: var(--text);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin: 0 0 0.25rem;
}

.audit dl {
  margin: 0;
  border-top: 1px solid var(--rule);
}

.audit div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.8125rem 0;
  border-bottom: 1px solid var(--rule-soft);
}

.audit dt { color: var(--ink); }

.audit dd {
  margin: 0;
  font-family: var(--figure);
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--ledger);
  text-align: right;
  white-space: nowrap;
}

/* The one row that is a condition rather than a refusal. */
.audit dd.conditional { color: var(--ink-soft); white-space: normal; }

/* --- prose sections --- */

/*
 * The audit's last row already draws a closing rule, so the first section
 * heading after it does not draw another one four pixels below.
 */
.audit + h2.section {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

h2.section {
  font-family: var(--text);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  margin: 3rem 0 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

p { margin: 0 0 1.125rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--ink); text-decoration-color: var(--rule); text-underline-offset: 0.15em; }
a:hover { text-decoration-color: var(--ink); }

strong { font-weight: 600; }

/* --- policy documents --- */

.doc-title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2rem, 7vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 0.5rem;
}

/* Ochre: the app reserves it for something you should notice. */
.updated {
  font-family: var(--figure);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--stamp);
  background: var(--stamp-wash);
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 4px;
  margin: 0 0 2.5rem;
}

.doc h2 {
  font-family: var(--text);
  font-weight: 600;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
  margin: 2.75rem 0 0.75rem;
  padding-top: 1.125rem;
  border-top: 1px solid var(--rule);
}

.doc h2:first-of-type { margin-top: 2rem; }

.doc ul { margin: 0 0 1.125rem; padding-left: 1.125rem; }
.doc li { margin-bottom: 0.5rem; }
.doc li::marker { color: var(--ink-faint); }

.doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
  font-size: 1rem;
  text-align: left;
}

.doc th {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  padding: 0 0.75rem 0.5rem 0;
}

.doc td {
  border-bottom: 1px solid var(--rule-soft);
  padding: 0.6875rem 0.75rem 0.6875rem 0;
  vertical-align: top;
}

.doc th:last-child, .doc td:last-child { padding-right: 0; }

/* --- footer --- */

footer {
  margin-top: 4rem;
  padding: 1.25rem 0 3rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 0.9375rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

footer a { color: var(--ink-soft); }

/* Visible keyboard focus everywhere, on the ink rather than the browser blue. */
a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (max-width: 26rem) {
  .audit div { flex-direction: column; gap: 0.125rem; }
  .audit dd { text-align: left; }
}