/* Writing section for jointlc.org.
   Tokens mirror palette A "Dawn" in site/v18-feedback/index.html; keep them in step if that page changes. */

/* Atkinson Hyperlegible Next draws a slashed zero, which reads as a typo in dates and counts.
   Digits come from Instrument Sans via unicode-range, same trick as the main page. */
@font-face {
  font-family: "LC Digits"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(https://fonts.gstatic.com/s/instrumentsans/v4/pxiTypc9vsFDm051Uf6KVwgkfoSxQ0GsQv8ToedPibnr0SZe1Q.woff2) format("woff2");
  unicode-range: U+0030-0039;
}

:root {
  --bg1: #F4F7FB;
  --bg2: #FDF3EA;
  --surface: #FFFFFF;
  --band: #F6F8FC;
  --ink: #14213D;
  --muted: #4A5670;
  --accent: #2A4FB0;
  --accent-hi: #213F8F;
  --tint: #E7EDFA;
  --warm: #F2B33D;
  --warm-text: #8C5A00;
  --line: rgba(20, 33, 61, 0.10);
  --radius: 10px;
  --display: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --text: "LC Digits", "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg1: #0E1525; --bg2: #1A1712; --surface: #172033; --band: #121A2B;
    --ink: #E8EDF7; --muted: #A1ACC2;
    --accent: #8FA9F0; --accent-hi: #B6C7F7; --tint: #1E2B4A;
    --warm: #F2B33D; --warm-text: #F2C46B;
    --line: rgba(232, 237, 247, 0.12);
  }
}
:root[data-theme="dark"] {
  --bg1: #0E1525; --bg2: #1A1712; --surface: #172033; --band: #121A2B;
  --ink: #E8EDF7; --muted: #A1ACC2;
  --accent: #8FA9F0; --accent-hi: #B6C7F7; --tint: #1E2B4A;
  --warm: #F2B33D; --warm-text: #F2C46B;
  --line: rgba(232, 237, 247, 0.12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--text);
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hi); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ===== Masthead, matching the main page ===== */
.masthead {
  background: linear-gradient(128deg, var(--bg1) 0%, var(--bg1) 38%, var(--bg2) 100%);
  border-bottom: 1px solid var(--line);
}
.wrap { max-width: 1296px; margin: 0 auto; padding-left: 48px; padding-right: 48px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 28px; padding-bottom: 28px; }
.name { margin: 0; display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.name .mark { flex: none; display: block; overflow: visible; }
.name .mark .tbl { fill: var(--surface); stroke: var(--accent); stroke-width: 1.6; }
.name .mark .seat { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.name .mark .seat.open { stroke: var(--warm); stroke-width: 2; }
.name b { color: var(--accent); font-weight: 700; }
.topnav { display: flex; gap: 28px; font-size: 16px; }
.topnav a { color: var(--muted); text-decoration: none; }
.topnav a:hover { color: var(--ink); text-decoration: underline; }

/* ===== Reading column ===== */
.col { max-width: 760px; margin: 0 auto; padding: 0 24px; }
article { padding: 56px 0 24px; }

.eyebrow { font-family: var(--display); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
h1 { margin: 0 0 18px; font-family: var(--display); font-weight: 600; font-variation-settings: "wdth" 96; font-size: clamp(34px, 5.5vw, 46px); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.standfirst { margin: 0 0 10px; font-size: 21px; line-height: 1.5; color: var(--muted); }
.byline { margin: 0 0 40px; font-size: 16px; color: var(--muted); }
article p { margin: 0 0 24px; }
article ul { margin: 0 0 24px; padding-left: 24px; }
article li { margin: 0 0 10px; }
h2 { margin: 48px 0 18px; font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1.2; letter-spacing: -0.015em; }

/* ===== Figures ===== */
figure { margin: 36px 0; }
figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #FFFFFF; }
figcaption { margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--muted); }
figcaption b { color: var(--ink); font-weight: 600; }

/* ===== Sources ===== */
sup a { text-decoration: none; padding: 0 1px; }
.sources { margin: 0 0 24px; padding-left: 24px; font-size: 16px; line-height: 1.55; color: var(--muted); }
.sources li { margin: 0 0 10px; }
.notes { background: var(--band); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 28px; margin: 40px 0; font-size: 16px; line-height: 1.6; color: var(--muted); }
.notes h2 { margin: 0 0 12px; font-size: 20px; color: var(--ink); }
.notes p { margin: 0 0 14px; }
.notes p:last-child { margin: 0; }

/* ===== Index listing ===== */
.posts { list-style: none; margin: 0; padding: 0; }
.posts li { border-top: 1px solid var(--line); padding: 28px 0; }
.posts li:last-child { border-bottom: 1px solid var(--line); }
.posts h2 { margin: 0 0 8px; font-size: 27px; }
.posts h2 a { text-decoration: none; color: var(--ink); }
.posts h2 a:hover { color: var(--accent); text-decoration: underline; }
.posts .meta { margin: 0 0 8px; font-size: 15px; color: var(--muted); }
.posts .dek { margin: 0; color: var(--muted); }
.empty { color: var(--muted); }

/* ===== Footer ===== */
footer { background: var(--band); border-top: 1px solid var(--line); margin-top: 64px; padding: 40px 0 64px; color: var(--muted); font-size: 16px; }
footer p { margin: 0 0 10px; max-width: 760px; }

@media (max-width: 720px) {
  .wrap { padding-left: 24px; padding-right: 24px; }
  .topbar { flex-direction: column; align-items: flex-start; gap: 14px; }
  body { font-size: 18px; }
}