/* anonymous - a design guide that is itself designed.
 *
 * Swiss grid, one grotesk, one accent. The rebuild replaces a stock magazine
 * theme full of hero sliders and category badges, and the fastest way to say a
 * site is about design is for nothing on it to be decoration: type scale,
 * alignment and space do all the work, and the only colour is an international
 * orange used for the full stop in the wordmark, the current section and focus.
 */

:root[data-site="anonymous"] {
  --paper: #ffffff;
  --paper-alt: #f4f4f2;
  --ink: #111111;
  --ink-soft: #3a3a3a;
  --ink-faint: #6e6e6e;
  --accent: #c93400;  /* 5.3:1 on white; #e03a00 was 4.4 */
  --accent-soft: #fdece5;
  --line: #e2e2e2;
  --radius: 0;
  --grotesk: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root[data-site="anonymous"] {
    --paper: #0e0e0e;
    --paper-alt: #171717;
    --ink: #f2f2f2;
    --ink-soft: #cdcdcd;
    --ink-faint: #9a9a9a;
    --accent: #ff6a33;
    --accent-soft: #2a1409;
    --line: #262626;
  }
}

:root[data-site="anonymous"] body { background: var(--paper); color: var(--ink); font-family: var(--grotesk); -webkit-font-smoothing: antialiased; }
:root[data-site="anonymous"] h1, :root[data-site="anonymous"] h2, :root[data-site="anonymous"] h3 { font-family: var(--grotesk); letter-spacing: -0.03em; font-weight: 700; }

.an-header { border-bottom: 1px solid var(--ink); background: var(--paper); }
.an-bar { display: flex; align-items: center; gap: 2rem; padding-block: 1rem; }
.an-mark { font-weight: 800; font-size: 1.5rem; letter-spacing: -0.05em; color: var(--ink); text-decoration: none; }
.an-dot { color: var(--accent); }
.an-index { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; margin-left: auto; }
.an-index a { color: var(--ink-soft); text-decoration: none; font-size: .8rem; font-weight: 500; }
.an-index a:hover, .an-index a.is-current { color: var(--accent); }
.an-n { font-variant-numeric: tabular-nums; color: var(--ink-faint); margin-right: .3rem; font-size: .72rem; }
.an-toggle { display: none; }
@media (max-width: 900px) {
  .an-index { display: none; }
  .an-toggle { display: inline-flex; margin-left: auto; }
}

.an-statement { padding-block: 4rem 3rem; border-bottom: 1px solid var(--ink); }
.an-statement h1 { font-size: clamp(2.4rem, 7vw, 5.2rem); line-height: .98; margin: 0 0 1.2rem; max-width: 14ch; }
.an-statement p { font-size: 1.2rem; color: var(--ink-soft); max-width: 48ch; margin: 0; }

.an-toc { border-bottom: 1px solid var(--ink); }
.an-row { display: grid; grid-template-columns: 3rem 1fr 2fr 3rem; gap: 1rem; align-items: baseline; padding-block: 1.1rem; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.an-row:first-child { border-top: 0; }
.an-row:hover .an-row-name { color: var(--accent); }
.an-row-n { font-variant-numeric: tabular-nums; color: var(--ink-faint); font-size: .85rem; }
.an-row-name { font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: -0.03em; }
.an-row-items { color: var(--ink-faint); font-size: .85rem; }
.an-row-count { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-faint); }
@media (max-width: 700px) {
  .an-row { grid-template-columns: 2.2rem 1fr 2rem; }
  .an-row-items { display: none; }
}

.an-latest h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); margin-top: 3rem; }
.an-list { list-style: none; counter-reset: l; padding: 0; margin: 0; columns: 2 20rem; column-gap: 3rem; }
.an-list li { counter-increment: l; padding-block: .55rem; border-bottom: 1px solid var(--line); break-inside: avoid; }
.an-list li::before { content: counter(l, decimal-leading-zero); color: var(--ink-faint); font-size: .75rem; margin-right: .7rem; font-variant-numeric: tabular-nums; }
.an-list a { color: var(--ink); text-decoration: none; }
.an-list a:hover { color: var(--accent); }

.an-footer { margin-top: 5rem; border-top: 1px solid var(--ink); }
.an-footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.4rem; }
.an-footer-links { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.an-footer-links a { color: var(--ink-soft); text-decoration: none; font-size: .85rem; }
.an-footer-legal { font-size: .72rem; color: var(--ink-faint); padding-bottom: 1.6rem; }
.an-footer-legal p { margin: .2rem 0; }

:root[data-site="anonymous"] .prose { max-width: 66ch; font-size: 1.06rem; }
:root[data-site="anonymous"] .prose p { line-height: 1.7; }
:root[data-site="anonymous"] .prose h2 { font-size: 1.7rem; margin-top: 2.6rem; }
:root[data-site="anonymous"] { --accent-ink: var(--accent); }