/* azafea.eu: the whole stylesheet.
 *
 * Colours are hex, not oklch, deliberately: the palette is final, so oklch buys
 * nothing here and would need a hex fallback beside every token anyway. The oklch
 * value each one came from is in the comment, so the provenance survives.
 *
 * No JavaScript is involved in anything below, including the appearance switch.
 * The CSP is `style-src 'self'`, so this file is the only place styles may live.
 */

/* ---------------------------------------------------------------- fonts ---
 * Source Serif 4 (SIL OFL 1.1, see fonts/OFL.txt), subset to the glyphs this
 * site actually uses. Self-hosted because `font-src 'self'` forbids a CDN, and
 * because a font CDN is a third party watching the reader.
 */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/source-serif-4-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/source-serif-4-semibold.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/source-serif-4-italic.woff2") format("woff2");
}

/* --------------------------------------------------------------- tokens ---
 * Four blocks, in this order, and the order matters:
 *   1. light          the default
 *   2. dark           when the reader's OS asks for it
 *   3. inverted       when the reader flips the switch
 *   4. dark+inverted  flipping the switch under a dark OS gives light back
 * Block 4 must come last: under a dark OS both 2 and 3 match, and 4 is what
 * makes the switch work in that direction.
 */
:root {
  --bg:        #f8f7f4;  /* oklch(97.5% 0.004 85) */
  --ink:       #221f19;  /* oklch(24% 0.012 80)   */
  --body:      #403d36;  /* oklch(36% 0.012 80)   */
  --muted:     #59554e;  /* oklch(45% 0.012 80)   */
  --label:     #6d6861;  /* oklch(52% 0.012 80)   */
  --hairline:  #dad7d2;  /* oklch(88% 0.008 85)   */
  --accent:    #255b7d;  /* oklch(45% 0.08 240)   */
  --accent-hv: #003f64;  /* oklch(35% 0.09 240)   */
  --engraving: #4b4741;  /* oklch(40% 0.012 80)   */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #1d1a17;  /* oklch(22% 0.008 75)  */
    --ink:       #eae8e3;  /* oklch(93% 0.006 85)  */
    --body:      #b4b1aa;  /* oklch(76% 0.01 82)   */
    --muted:     #a29e96;  /* oklch(70% 0.012 82)  */
    --label:     #898680;  /* oklch(62% 0.01 80)   */
    --hairline:  #3a3733;  /* oklch(34% 0.008 75)  */
    --accent:    #95bdda;  /* oklch(78% 0.06 240)  */
    --accent-hv: #b4d6ef;  /* oklch(86% 0.05 240)  */
    --engraving: #a8a49c;  /* oklch(72% 0.012 82)  */
    color-scheme: dark;
  }
}
:root:has(#appearance:checked) {
  --bg: #1d1a17; --ink: #eae8e3; --body: #b4b1aa; --muted: #a29e96;
  --label: #898680; --hairline: #3a3733; --accent: #95bdda;
  --accent-hv: #b4d6ef; --engraving: #a8a49c;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:has(#appearance:checked) {
    --bg: #f8f7f4; --ink: #221f19; --body: #403d36; --muted: #59554e;
    --label: #6d6861; --hairline: #dad7d2; --accent: #255b7d;
    --accent-hv: #003f64; --engraving: #4b4741;
    color-scheme: light;
  }
}

/* ---------------------------------------------------------------- reset ---*/
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
h1, h2, p, figure { margin: 0; }
img, svg { max-width: 100%; }
hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 48px 0 36px;
}

/* ---------------------------------------------------------------- links ---*/
a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--accent-hv); }
a:focus-visible,
:root:has(#appearance:focus-visible) .appearance {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* -------------------------------------------------------------- shell -----*/
.page {
  max-width: 620px;
  margin: 0 auto;
  padding: 48px 24px;
}

/* ------------------------------------------------------------- masthead ---*/
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 72px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.005em;
}
.wordmark .mark { width: 22px; height: 22px; flex: none; }

/* ------------------------------------------- language + appearance switch --
 * Both are deliberately quiet: this is a page about not shouting.
 * The appearance switch is a checkbox and a label, and nothing else. It inverts
 * whatever the OS asked for; it CANNOT remember the choice across a page load,
 * because remembering needs JavaScript or a cookie and this site has neither.
 * That is a known, accepted limit. See docs/superpowers/specs/.
 */
.controls {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--label);
}
.controls a, .appearance {
  color: var(--label);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.controls a:hover, .appearance:hover {
  color: var(--ink);
  border-bottom-color: var(--hairline);
}
.controls .sep { color: var(--hairline); }
.appearance { cursor: pointer; }
.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Label text tracks the appearance actually on screen, so the control always
 * names where it will take you rather than where you are. */
.appearance .to-light { display: none; }
.appearance .to-dark  { display: inline; }
@media (prefers-color-scheme: dark) {
  .appearance .to-light { display: inline; }
  .appearance .to-dark  { display: none; }
}
:root:has(#appearance:checked) .appearance .to-light { display: inline; }
:root:has(#appearance:checked) .appearance .to-dark  { display: none; }
@media (prefers-color-scheme: dark) {
  :root:has(#appearance:checked) .appearance .to-light { display: none; }
  :root:has(#appearance:checked) .appearance .to-dark  { display: inline; }
}

/* ------------------------------------------------------------ statement ---*/
.statement {
  color: var(--ink);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.008em;
}
.statement-sub {
  margin-top: 16px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}

/* --------------------------------------------------------------- label ----*/
.label {
  margin-bottom: 16px;
  color: var(--label);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.lede { font-size: 17px; color: var(--body); }
.lede a { font-weight: 600; }

/* ---------------------------------------------------------- principles ----*/
.principles { display: flex; flex-direction: column; gap: 32px; }
.principle h2 {
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}
.principle p { font-size: 15px; line-height: 1.65; }

/* ---------------------------------------------------------------- name ----*/
.name { text-align: center; }
.name .engraving {
  width: 68px; height: 68px;
  margin: 0 auto 28px;
  color: var(--engraving);
}
.name p {
  text-align: left;
  color: var(--body);
  font-size: 17px;
  line-height: 1.65;
}
.name .closing {
  margin-top: 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------- contact ----*/
.contact { text-align: center; font-size: 17px; }

/* -------------------------------------------------------------- footer ----*/
.footer {
  margin-top: 64px;
  color: var(--label);
  font-size: 13px;
  text-align: center;
}
.footer a { color: var(--label); }
.footer a:hover { color: var(--ink); }

/* ------------------------------------------------------------- privacy ----*/
.doc h1 {
  margin-bottom: 28px;
  color: var(--ink);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.doc section { margin-top: 28px; }
.doc h2 {
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
}
.doc p { font-size: 16px; line-height: 1.65; }
.doc .updated { margin-top: 36px; color: var(--label); font-size: 13px; }

/* ----------------------------------------------------------------- 404 ----*/
.notfound { text-align: center; padding-top: 24px; }
.notfound h1 {
  color: var(--ink); font-size: 26px; font-weight: 600; margin-bottom: 12px;
}
.notfound p { color: var(--muted); font-size: 17px; }
/* The Spanish line is a second voice, not a second paragraph of the same one. */
.notfound p + p { margin-top: 12px; }
.notfound p[lang="es"] { color: var(--label); }
.notfound .back { margin-top: 28px; font-size: 16px; }

/* ------------------------------------------------------------ desktop -----*/
@media (min-width: 700px) {
  body { font-size: 16.5px; }
  .page { max-width: 620px; padding: 88px 32px 72px; }
  .masthead { margin-bottom: 112px; }
  .wordmark { font-size: 20px; gap: 14px; }
  .wordmark .mark { width: 26px; height: 26px; }
  .controls { font-size: 12px; gap: 12px; }
  hr { margin: 72px 0 56px; }
  .statement { font-size: 38px; }
  .statement-sub { margin-top: 20px; font-size: 20px; }
  .label { margin-bottom: 20px; font-size: 12px; }
  .lede { font-size: 19px; }
  .principles { gap: 40px; }
  .principle h2 { font-size: 19px; margin-bottom: 8px; }
  .principle p { font-size: 16.5px; }
  .name .engraving { width: 88px; height: 88px; margin-bottom: 36px; }
  .name p { font-size: 21px; }
  .name .closing { font-size: 16px; margin-top: 24px; }
  .contact { font-size: 20px; }
  .footer { margin-top: 96px; font-size: 14px; }
  .doc h1 { font-size: 32px; margin-bottom: 40px; }
  .doc section { margin-top: 32px; }
  .doc h2 { font-size: 18px; }
  .doc p { font-size: 17px; }
  .notfound h1 { font-size: 32px; }
}

/* ------------------------------------------------------------- motion -----*/
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------- hairline rhythm --------
 * The gaps between sections are not uniform; they open up around the name,
 * which is the centre of gravity of the page. Position-based, so removing the
 * contact section (see the launch gate) removes its rule along with its <hr>.
 */
@media (min-width: 700px) {
  .page hr:nth-of-type(1) { margin: 80px 0 56px; }
  .page hr:nth-of-type(2) { margin: 64px 0 56px; }
  .page hr:nth-of-type(3) { margin: 72px 0 60px; }
  .page hr:nth-of-type(4) { margin: 72px 0 56px; }
}
@media (max-width: 699px) {
  .page hr:nth-of-type(1) { margin: 52px 0 36px; }
  .page hr:nth-of-type(2),
  .page hr:nth-of-type(3),
  .page hr:nth-of-type(4) { margin: 48px 0 36px; }
}