/* roundpixel.me — shared stylesheet.
   One file for every page. No framework, no build step, no webfonts, no images.
   Every visual is CSS or inline SVG, which is what lets the privacy policy claim
   "makes no external requests" and be literally true. Keep it that way. */

:root {
  --bg:      #fbfaf8;
  --fg:      #1a1917;
  --muted:   #6e6a62;
  --rule:    #e6e2d9;
  --accent:  #c0532b;
  --measure: 34rem;

  /* logomark — two colours alternating around the ring */
  --po: #e8833c;  /* orange */
  --pp: #8a5fd0;  /* purple */
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:     #141310;
    --fg:     #f0ede6;
    --muted:  #938e84;
    --rule:   #2b2924;
    --accent: #e08a5f;

    --po: #f59d55;
    --pp: #a67ee0;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}
@media (min-width: 40em) {
  .page { padding: 3.5rem 3rem 6rem; }
}

/* ---- masthead + navigation ---- */
.mast {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1.4rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 3.5rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
  margin-right: auto;
}
.brand:hover { color: inherit; }
.mark { display: block; flex: none; }
.wordmark {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  font-size: 0.9375rem;
}
nav a {
  color: var(--muted);
  text-decoration: none;
  padding: 0.15rem 0;
}
nav a:hover { color: var(--fg); }
nav a[aria-current="page"] {
  color: var(--fg);
  box-shadow: inset 0 -1.5px 0 var(--accent);
}

/* ---- lede ---- */
.lede {
  font-size: 1.65rem;
  line-height: 1.32;
  font-weight: 500;
  letter-spacing: -0.021em;
  margin: 0 0 1.4rem;
  max-width: var(--measure);
  text-wrap: balance;
}
@media (min-width: 40em) {
  .lede { font-size: 2.1rem; }
}
.standfirst {
  font-size: 1.0625rem;
  color: var(--muted);
  margin: 0;
  max-width: var(--measure);
  text-wrap: pretty;
}

/* ---- label / body rows ---- */
.row {
  border-top: 1px solid var(--rule);
  padding-top: 1.4rem;
  margin-top: 3.5rem;
}
@media (min-width: 46em) {
  .row {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: 2.5rem;
    align-items: start;
  }
}
.label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.5rem;
}
@media (min-width: 46em) {
  .label { margin: 0.32rem 0 0; }
}
.row > div > :first-child { margin-top: 0; }
.row p, .row ul { margin: 0; max-width: var(--measure); text-wrap: pretty; }
.row p + p, .row p + ul, .row ul + p { margin-top: 0.9rem; }

/* ---- long-form prose (about, legal) ---- */
.prose { max-width: var(--measure); }
.prose h2 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 2.75rem 0 0.6rem;
}
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul { margin: 0 0 0.9rem; text-wrap: pretty; }
.prose ul { padding-left: 1.1rem; }
.prose li { margin-bottom: 0.35rem; }
.prose li::marker { color: var(--muted); }
.prose > :last-child { margin-bottom: 0; }

dl.facts { margin: 0; }
dl.facts div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.6rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule);
}
dl.facts div:first-child { border-top: 1px solid var(--rule); }
dl.facts dt {
  flex: none;
  width: 9.5rem;
  color: var(--muted);
  font-size: 0.9375rem;
}
dl.facts dd { margin: 0; }

a {
  color: inherit;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
}
a:hover { color: var(--accent); }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.email {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0;
}
.updated {
  font-size: 0.875rem;
  color: var(--muted);
  margin-top: 2.5rem;
}

/* ---- footer ---- */
footer {
  border-top: 1px solid var(--rule);
  margin-top: 5rem;
  padding-top: 1.4rem;
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.7;
}
footer p { margin: 0; }
footer a { color: inherit; }
.sep { opacity: 0.55; padding: 0 0.15em; }