/* The Drawing Board — direction 1a, serious journal quietly warm.
   Values from the Claude Design build handoff. Root 16px. No radius, no shadows. */

:root {
  /* colour */
  --paper: #FBF8F3;
  --paper-leaf: #EFE9DC;
  --ask-bg: #F5EFEA;
  --correction-bg: #F7F1EE;
  --field: #FFFFFF;
  --ink: #17170F;
  --text: #201F19;
  --text-muted: #4A4740;
  --text-faint: #6B665C;
  --accent: #5B2A45;
  --accent-on-ink: #C9AFBE;
  --corrected: #2E5B4E;
  --rule: #D8D2C6;
  --rule-light: #E2DCCF;
  --rule-strong-mid: #8A8478; /* rules only, never text */
  --field-border: #B9B2A4;

  /* type */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --font-ui: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;

  --t-hero: 3.375rem; --lh-hero: 1.04; --ls-hero: -0.02em;
  --t-h1: 2.75rem;    --lh-h1: 1.08;   --ls-h1: -0.018em;
  --t-h2: 1.625rem;   --lh-h2: 1.20;
  --t-h3: 1.375rem;   --lh-h3: 1.25;
  --t-standfirst: 1.25rem; --lh-standfirst: 1.55;
  --t-body: 1.1875rem; --lh-body: 1.68;
  --t-ask: 1.375rem;   --lh-ask: 1.35;
  --t-summary: 1rem;   --lh-summary: 1.55;
  --t-meta: 0.9375rem; --lh-meta: 1.55;
  --t-label: 0.6875rem;  --ls-label: 0.18em;
  --t-nav: 0.71875rem;   --ls-nav: 0.13em;
  --t-button: 0.71875rem; --ls-button: 0.14em;

  /* space */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem; --s-7: 2rem; --s-8: 2.5rem;
  --s-9: 3.5rem; --s-10: 4.5rem; --s-11: 6rem;

  --measure: 62ch;
  --measure-short: 68ch;
  --page-max: 73.75rem;
  --page-pad: 3.5rem;

  /* line */
  --hair: 1px;
  --accent-rule: 2.125rem;
  --radius: 0;
}

@media (max-width: 52rem) {
  :root {
    --t-hero: 2.125rem; --t-h1: 1.9375rem; --t-h2: 1.4375rem;
    --t-h3: 1.3125rem; --t-standfirst: 1.125rem;
    --t-body: 1.125rem; --t-ask: 1.1875rem;
    --t-label: 0.65625rem; --t-nav: 0.6875rem;
    --page-pad: 1.375rem;
  }
}

html { background: var(--paper); }
body {
  margin: 0;
  font: var(--t-body)/var(--lh-body) var(--font-body);
  color: var(--text);
}
a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 2px; }
a:visited { color: #4C2439; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
*, *::before, *::after { box-sizing: border-box; }

/* ---------- layout shell ---------- */
main {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: var(--page-pad);
}

/* ---------- wordmark ---------- */
.wordmark {
  --x: 1.625rem;
  display: flex;
  flex-direction: column;
  gap: calc(var(--x) * 0.13);
  color: var(--ink);
  text-decoration: none;
}
.wordmark:visited { color: var(--ink); }
.wordmark:hover { text-decoration: none; }
.wordmark__name {
  font: 500 var(--x)/1 var(--font-display);
  letter-spacing: -0.015em;
}
.wordmark__strap {
  display: flex;
  align-items: center;
  gap: calc(var(--x) * 0.26);
  color: var(--accent);
  font: italic 400 calc(var(--x) * 0.37)/1.2 var(--font-body);
}
.wordmark__strap::before {
  content: "";
  width: calc(var(--x) * 0.74);
  height: 1px;
  background: currentColor;
  flex: none;
}

/* ---------- masthead ---------- */
.masthead {
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
}
.masthead__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 1.375rem var(--page-pad);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-6);
}
.masthead--compact .wordmark { --x: 1.25rem; }
.masthead--compact .wordmark__strap { display: none; }
.masthead nav { display: flex; gap: 1.625rem; align-items: center; }
.masthead nav a.nav-home svg { width: 0.85rem; height: 0.85rem; display: block; }
.masthead nav a.nav-home { line-height: 0; padding: 0.3rem 0; }
.masthead nav a.nav-home[aria-current="page"] { border-bottom: 2px solid var(--accent); }
.masthead nav a {
  font: 400 var(--t-nav)/1.2 var(--font-ui);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--text-faint);
  text-decoration: none;
}
.masthead nav a:visited { color: var(--text-faint); }
.masthead nav a:hover { color: var(--ink); text-decoration: none; }
.masthead nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}
.masthead details { position: relative; display: none; }
.masthead summary {
  font: 400 var(--t-nav)/1.2 var(--font-ui);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--text-faint);
  cursor: pointer;
  list-style: none;
  padding: 0.75rem 0; /* 44px hit area */
}
.masthead summary::-webkit-details-marker { display: none; }
@media (max-width: 52rem) {
  .masthead__inner { padding: 1rem var(--page-pad); align-items: center; }
  .wordmark__strap { display: none; }
  .masthead nav.nav-desktop { display: none; }
  .masthead details { display: block; }
  .masthead details nav {
    position: absolute;
    right: 0;
    top: 100%;
    background: var(--paper);
    border: 1px solid var(--rule);
    padding: var(--s-4) var(--s-6);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    z-index: 10;
  }
  .masthead details nav a { padding: 0.6rem 0; }
}

/* ---------- library home ---------- */
.manifesto {
  display: grid;
  grid-template-columns: 1fr 22.5rem;
  gap: var(--s-10);
  padding: var(--s-9) 0 var(--s-8);
  border-bottom: 1px solid var(--rule);
}
.manifesto h1 {
  font: 400 var(--t-hero)/var(--lh-hero) var(--font-display);
  letter-spacing: var(--ls-hero);
  color: var(--ink);
  margin: 0 0 var(--s-5);
  max-width: 15ch;
}
.manifesto p { max-width: var(--measure); margin: 0; }
.manifesto aside {
  border-left: 1px solid var(--rule);
  padding-left: calc(var(--s-7) - 4px);
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  color: var(--text-muted);
}
.manifesto aside .note { font-style: italic; color: var(--accent); }
.manifesto aside hr { border: 0; border-top: 1px solid var(--rule-light); margin: var(--s-4) 0; }
@media (max-width: 52rem) {
  .manifesto { grid-template-columns: 1fr; gap: var(--s-6); padding: var(--s-7) 0; }
  .manifesto aside { border-left: 0; padding-left: 0; }
}

.groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--s-10);
  row-gap: 0;
}
@media (max-width: 52rem) { .groups { grid-template-columns: 1fr; row-gap: var(--s-8); } }

.group { padding: 1.625rem 0 1.5rem; border-bottom: 1px solid var(--rule); }
.group__head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.group__head .label { color: var(--accent); }
.group__head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--accent);
  opacity: 0.35;
}
.group__count {
  font: 600 var(--t-label)/1.2 var(--font-ui);
  color: var(--text-faint);
}

.label {
  font: 600 var(--t-label)/1.2 var(--font-ui);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-faint);
}

.entry { margin-bottom: var(--s-5); }
.entry a {
  display: block;
  text-decoration: none;
  color: inherit;
  min-height: 44px;
}
.entry h3 {
  font: 400 var(--t-h3)/var(--lh-h3) var(--font-display);
  color: var(--ink);
  margin: 0 0 var(--s-3);
}
.entry a:visited h3 { color: var(--ink); }
.entry a:hover h3 {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.entry p {
  font-size: var(--t-summary);
  line-height: var(--lh-summary);
  color: var(--text-muted);
  margin: 0;
  max-width: var(--measure-short);
}

/* ---------- piece page ---------- */
.piece-grid {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 41.25rem) 1fr;
  gap: 0 2.75rem;
  padding: var(--s-8) 0 var(--s-9);
}
.piece-grid > article { grid-column: 2; }
.piece-notes { grid-column: 3; padding-top: 8.125rem; }
.piece-notes .note {
  border-left: 1px solid var(--rule);
  padding-left: 1.125rem;
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  color: var(--text-muted);
  margin-bottom: var(--s-6);
}
@media (max-width: 52rem) {
  .piece-grid { grid-template-columns: 1fr; }
  .piece-grid > article { grid-column: 1; }
  .piece-notes { display: none; }
  .piece-toc { display: none; }
}

.piece-toc {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  position: sticky;
  top: var(--s-6);
  margin-top: 8.125rem;
  max-height: calc(100vh - 2 * var(--s-6));
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.piece-toc .label { display: block; margin-bottom: var(--s-3); }
.piece-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--rule);
}
.piece-toc li { margin: 0; }
.piece-toc a {
  display: block;
  padding: 0.3rem 0 0.3rem 1rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font: 400 var(--t-meta)/var(--lh-meta) var(--font-ui);
  color: var(--text-muted);
  text-decoration: none;
}
.piece-toc a:hover { color: var(--accent); }
article .body h2 { scroll-margin-top: var(--s-6); }
.piece-toc a.is-active {
  color: var(--ink);
  border-left-color: var(--accent);
}

.piece-label {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.piece-label .label { color: var(--accent); white-space: nowrap; }
.piece-label::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

article h1 {
  font: 400 var(--t-h1)/var(--lh-h1) var(--font-display);
  letter-spacing: var(--ls-h1);
  color: var(--ink);
  margin: 0 0 var(--s-4);
}
.standfirst {
  font: italic 400 var(--t-standfirst)/var(--lh-standfirst) var(--font-body);
  color: var(--text-muted);
  margin: 0 0 var(--s-6);
}

.author-line {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 0.875rem 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
}
.author-line .who strong { font-weight: 600; color: var(--text); }
.author-line .who { color: var(--text-muted); }
.author-line .who em { font-style: italic; }
.author-line .when {
  font: 400 var(--t-label)/1.2 var(--font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
@media (max-width: 52rem) {
  .author-line { flex-direction: column; gap: var(--s-1); }
}

.ask {
  background: var(--ask-bg);
  border-left: 3px solid var(--accent);
  padding: 1.375rem 1.625rem;
  margin: var(--s-7) 0;
}
.ask .label { color: var(--accent); letter-spacing: 0.2em; display: block; margin-bottom: var(--s-2); }
.ask p.ask-text {
  font: 400 var(--t-ask)/var(--lh-ask) var(--font-display);
  color: var(--ink);
  margin: 0;
}
.ask p.ask-meta {
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  color: var(--text-muted);
  margin: var(--s-3) 0 0;
}
@media (max-width: 52rem) {
  .ask { padding: 1rem 1.125rem; }
  .ask p.ask-meta { display: none; }
}

/* body copy */
article .body { max-width: var(--measure); }
article .body p { margin: 0 0 var(--s-5); }
article .body h2 {
  font: 400 var(--t-h2)/var(--lh-h2) var(--font-display);
  color: var(--ink);
  border-top: 1px solid var(--rule);
  padding-top: var(--s-4);
  margin: var(--s-7) 0 var(--s-4);
}
article .body h3 {
  font: 400 var(--t-h3)/var(--lh-h3) var(--font-display);
  color: var(--ink);
  margin: var(--s-6) 0 var(--s-3);
}
article .body h4 {
  font: 600 var(--t-summary)/1.3 var(--font-body);
  color: var(--ink);
  margin: var(--s-5) 0 var(--s-2);
}
article .body ul { list-style: none; padding: 0; margin: 0 0 var(--s-5); }
article .body ul li {
  position: relative;
  padding-left: 0;
  margin-bottom: var(--s-2);
}
article .body ul li::before {
  content: "\2022";
  color: var(--accent);
  position: absolute;
  left: -1.4rem;
}
article .body sup { line-height: 0; }
article .body a.footnote-ref, article .body .footnote-ref a {
  font-size: 0.62em;
  vertical-align: super;
  letter-spacing: 0.02em;
  text-decoration: none;
}
article .body a.footnote-ref:hover, article .body .footnote-ref a:hover { text-decoration: underline; }

article .body blockquote {
  border-left: 3px solid var(--rule);
  margin: var(--s-5) 0;
  padding: 0 0 0 var(--s-6);
  color: var(--text-muted);
  font-style: italic;
}
article .body table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--s-5) 0;
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
}
article .body th {
  font: 600 var(--t-label)/1.2 var(--font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: left;
  border-bottom: 1px solid var(--ink);
  padding: var(--s-2) var(--s-3) var(--s-2) 0;
}
article .body td {
  border-bottom: 1px solid var(--rule-light);
  padding: var(--s-2) var(--s-3) var(--s-2) 0;
  vertical-align: top;
}
.change-history { margin-top: var(--s-6); max-width: var(--measure); }
.change-history ul { list-style: none; padding: 0; margin: var(--s-2) 0 0; }
.change-history li {
  font-size: var(--t-meta);
  color: var(--text-muted);
  border-top: 1px solid var(--rule-light);
  padding: var(--s-2) 0;
}

/* sources block (markdown-it-footnote output) */
.footnotes { margin-top: var(--s-8); max-width: var(--measure-short); }
.footnotes::before {
  content: "Sources";
  font: 600 var(--t-label)/1.2 var(--font-ui);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-faint);
  display: block;
  margin-bottom: var(--s-3);
}
.footnotes hr { display: none; }
.footnotes ol { padding-left: 1.375rem; margin: 0; }
.footnotes li { margin-bottom: calc(var(--s-2) - 1px); }
.footnotes li p {
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  color: var(--text-muted);
  margin: 0;
}
.footnotes li cite, .footnotes li em { font-style: italic; }
.footnotes .footnote-backref {
  font: 400 var(--t-label)/1.2 var(--font-ui);
  letter-spacing: 0.06em;
  text-decoration: none;
  margin-left: var(--s-2);
}
@media (max-width: 52rem) {
  .footnotes ol { padding-left: 1.25rem; }
  .footnotes li { margin-bottom: calc(var(--s-2) + 2px); }
  .footnotes .footnote-backref { display: inline-block; margin: 0.25rem 0 0; padding: 0.5rem 0; }
}

/* end of piece */
.piece-end {
  border-top: 1px solid var(--rule);
  margin-top: var(--s-6);
  padding-top: var(--s-3);
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  color: var(--text-faint);
  max-width: var(--measure);
}
.piece-end p { margin: 0 0 calc(var(--s-1) + 2px); }

/* ---------- standing pages ---------- */
.page-col {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 41.25rem) 1fr;
  gap: 0 2.75rem;
  padding: var(--s-8) 0 var(--s-9);
}
.page-col > article { grid-column: 2; max-width: 40rem; }
.page-col--about { padding-top: var(--s-11); }
.page-col .label-rule {
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--s-4);
  margin-bottom: 1.375rem;
}
.page-col article p { margin: 0 0 var(--s-4); }
.page-col article h1 {
  font: 400 var(--t-h2)/var(--lh-h2) var(--font-display);
  margin: 0 0 var(--s-4);
}
.page-col article h2 {
  font: 400 var(--t-h3)/var(--lh-h3) var(--font-display);
  margin: var(--s-7) 0 var(--s-3);
}
@media (max-width: 52rem) {
  .page-col { grid-template-columns: 1fr; }
  .page-col > article { grid-column: 1; }
}

/* corrections log */
.corrections-log { max-width: var(--measure); }
.corrections-log .row {
  display: grid;
  grid-template-columns: 6.875rem 1fr;
  gap: var(--s-6);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--rule-light);
}
.corrections-log .row:first-of-type { border-top: 1px solid var(--ink); }
.corrections-log .row:last-of-type { border-bottom: 1px solid var(--rule); }
.corrections-log .date {
  font: 600 var(--t-label)/1.2 var(--font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-top: 0.3rem;
}
.corrections-log h3 {
  font: 400 var(--t-h3)/var(--lh-h3) var(--font-display);
  margin: 0 0 var(--s-2);
}
.corrections-log p { font-size: var(--t-meta); color: var(--text-muted); margin: 0; }
.corrections-log .row--claim {
  background: var(--correction-bg);
  margin-inline: -0.875rem;
  padding-inline: 0.875rem;
}
.chip {
  display: inline-block;
  border: 1px solid var(--corrected);
  color: var(--corrected);
  font: 600 var(--t-label)/1.2 var(--font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 7px;
  margin-top: var(--s-2);
}
@media (max-width: 52rem) {
  .corrections-log .row { grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-3) 0; }
  .corrections-log .row--claim { margin-inline: calc(-1 * var(--page-pad)); padding-inline: var(--page-pad); }
}

/* ---------- signup ---------- */
.signup { max-width: 26rem; }
.signup .label { display: block; margin-bottom: var(--s-2); }
.signup .blurb {
  font-size: var(--t-summary);
  color: var(--text-muted);
  margin: 0 0 var(--s-3);
}
.signup form { display: flex; }
.signup input[type="email"] {
  font: var(--t-summary)/1.2 var(--font-body);
  width: 15rem;
  height: 2.625rem;
  padding: 0 0.75rem;
  background: var(--field);
  border: 1px solid var(--field-border);
  border-right: 0;
  color: var(--text);
}
.signup input[type="email"]:focus-visible {
  border-color: var(--ink);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.signup button {
  font: 500 var(--t-button)/1.2 var(--font-ui);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  height: 2.625rem;
  padding: 0 1.125rem;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  cursor: pointer;
  transition: background 120ms ease;
}
.signup button:hover { background: #2C2B20; }
.signup .signup-done {
  background: var(--paper-leaf);
  border-left: 3px solid var(--corrected);
  padding: 0.75rem 1rem;
  font-size: var(--t-summary);
  color: var(--ink);
}
@media (max-width: 52rem) {
  .signup form { flex-direction: column; gap: var(--s-2); }
  .signup input[type="email"] {
    width: 100%;
    height: 3rem;
    border-right: 1px solid var(--field-border);
    font-size: 1rem; /* >=16px so iOS does not zoom */
  }
  .signup button { width: 100%; height: 3rem; }
}

/* ---------- search ---------- */
.search-page { padding: var(--s-8) 0 var(--s-9); }
.search-page h1 {
  font: 400 var(--t-h1)/var(--lh-h1) var(--font-display);
  letter-spacing: var(--ls-h1);
  margin: 0 0 var(--s-6);
}
.search-form { display: flex; max-width: var(--measure); margin-bottom: var(--s-6); }
.search-form input[type="search"] {
  font: var(--t-body)/1.2 var(--font-body);
  flex: 1;
  height: 3.125rem;
  padding: 0 1rem;
  background: var(--field);
  border: 1px solid var(--field-border);
  border-right: 0;
  color: var(--text);
}
.search-form input[type="search"]:focus-visible {
  border-color: var(--ink);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.search-form button {
  font: 500 var(--t-button)/1.2 var(--font-ui);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  height: 3.125rem;
  padding: 0 1.375rem;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  cursor: pointer;
}
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  border-top: 1px solid var(--rule);
  padding: var(--s-4) 0;
}
.filters a {
  font: 400 var(--t-nav)/1.2 var(--font-ui);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-muted);
  border: 1px solid var(--rule);
  padding: 5px 10px;
}
.filters a:visited { color: var(--text-muted); }
.filters a[aria-current="true"] {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}
.search-count { margin: var(--s-4) 0 var(--s-2); display: block; }
.search-results { max-width: var(--measure-short); list-style: none; padding: 0; margin: 0; }
.search-results li { border-bottom: 1px solid var(--rule-light); padding: var(--s-4) 0; }
.search-results h3 { font: 400 var(--t-h3)/var(--lh-h3) var(--font-display); margin: var(--s-1) 0 var(--s-2); }
.search-results .excerpt { font-size: var(--t-summary); color: var(--text-muted); margin: 0; }
.search-results mark { background: var(--paper-leaf); color: inherit; padding-inline: 2px; }
.search-empty h2 { font: 400 var(--t-h2)/var(--lh-h2) var(--font-display); margin: var(--s-7) 0 var(--s-2); }
.search-empty p { color: var(--text-muted); max-width: var(--measure); }
@media (max-width: 52rem) {
  .search-form { flex-direction: column; gap: var(--s-2); }
  .search-form input[type="search"] { height: 3.5rem; border-right: 1px solid var(--field-border); font-size: 1rem; }
  .search-form button { height: 3rem; width: 100%; }
  .filters a { padding: 1rem 0.625rem; }
}

/* ---------- footer ---------- */
footer {
  border-top: 1px solid var(--ink);
  margin-top: var(--s-8);
}
.footer__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--s-6) var(--page-pad) var(--s-7);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-7);
}
.footer__inner nav { display: flex; gap: 1.625rem; }
.footer__inner nav a {
  font: 400 var(--t-nav)/1.2 var(--font-ui);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--text-faint);
  text-decoration: none;
}
.footer__inner nav a:visited { color: var(--text-faint); }
.footer__inner nav a:hover { color: var(--ink); }
@media (max-width: 52rem) {
  .footer__inner { flex-direction: column; align-items: stretch; }
  .footer__inner nav {
    flex-direction: column;
    gap: var(--s-3);
    margin-top: var(--s-6);
  }
  .footer__inner nav a { padding: 0.6rem 0; }
}

/* ---------- print ---------- */
.pdf-cover { display: none; }

@page { size: A4 portrait; margin: 18mm 20mm 22mm; }

@media print {
  :root {
    --t-body: 10.5pt; --lh-body: 1.476; /* 15.5pt */
    --t-h1: 24pt; --lh-h1: 1.083;
    --t-h2: 14pt; --lh-h2: 1.214;
    --t-standfirst: 11.5pt; --lh-standfirst: 1.478;
    --t-label: 7pt;
    --t-meta: 8.5pt; --lh-meta: 1.41;
  }
  html, body { background: #fff; }
  body { color: #000; }
  a, a:visited { color: #000; text-decoration: none; }
  .masthead, footer, .signup, .piece-notes, .piece-toc, .piece-end, .search-form, .filters { display: none !important; }
  article .body h2, .ask { break-after: avoid; }
  .footnotes { break-inside: avoid-page; }
  p { orphans: 3; widows: 3; }
  .piece-grid { display: block; padding: 0; }
  article .body, .footnotes, .piece-end { max-width: none; }
  main { max-width: none; padding-inline: 0; }
  .ask { background: none; border-left-width: 2pt; }
  article .body h2 { border-top-color: #000; }
  .author-line, .piece-label::after { border-color: #000; }

  .pdf-cover {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 94vh;
    overflow: hidden;
    break-after: page;
  }
  .pdf-cover .cover-title {
    font: 400 28pt/1.07 var(--font-display);
    color: #000;
    margin-top: 30mm;
  }
  .title-block {
    width: 100%;
    border: 0.75pt solid #000;
    margin-bottom: 6mm;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .title-block .tb-brand {
    grid-column: 1 / -1;
    border-bottom: 0.5pt solid #000;
    padding: 3mm 4mm;
  }
  .title-block .tb-brand .tb-name { font: 500 16pt/1.1 var(--font-display); }
  .title-block .tb-brand .tb-strap { font: italic 400 9.5pt/1.3 var(--font-body); }
  .title-block .tb-cell {
    border-right: 0.5pt solid #000;
    padding: 2mm 4mm;
    height: 8mm;
    font: 400 7.5pt/1.2 var(--font-ui);
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
  }
  .title-block .tb-cell:last-child { border-right: 0; }
}

.entry--forthcoming h3 { color: var(--text-muted); margin-bottom: var(--s-2); }
.entry--forthcoming .label { color: var(--text-muted); }