/* The public blog. Colours come from theme/v1/tokens.css
   (assets.authortools.net), loaded first; type is Archivo for the interface
   and Newsreader for titles and, on this site, the reading text too (the one
   place in Author Tools where the serif carries the body). The post body's rules are in post.css (shared with the writing app's preview). */

:root {
  --font-ui: Archivo, "Helvetica Neue", Helvetica, sans-serif;
  --font-display: Newsreader, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--text); font: 13px/1.55 var(--font-ui); }
a { color: var(--accent-text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[data-theme="fall"] :focus-visible { outline-color: var(--accent-text); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.shell > main { flex: 1; }

/* Top bar and footer (the design system's TopBar and Footer) */
.at-topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 40px; flex-wrap: wrap; padding: 4px 16px; background: var(--panel); border-bottom: 1px solid var(--border); font: 12.5px var(--font-ui); color: var(--text-faint); }
.at-wordmark { font: 15px/1.2 var(--font-display); color: var(--text); text-decoration: none; white-space: nowrap; }
.at-wordmark em { color: var(--text-dim); }
.at-crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; }
.at-crumbs a:not(.at-wordmark), .crumb-t { color: var(--text-faint); text-decoration: none; white-space: nowrap; }
.at-crumbs a:not(.at-wordmark):hover { color: var(--text); }
.at-right { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; font-size: 12px; }
.at-right a { color: var(--text-faint); text-decoration: none; }
.at-right a:hover { color: var(--text); }
.at-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; min-height: 34px; padding: 8px 16px; background: var(--ground-sunk); font-size: 11px; color: var(--text-faint); }
.at-foot > div { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; }
.at-foot b { font: 400 14px var(--font-display); color: var(--text); white-space: nowrap; }
.at-foot b em { color: var(--text-dim); }
.at-foot a { color: var(--accent-text); text-decoration: none; white-space: nowrap; }
.at-foot a:hover { text-decoration: underline; }

/* Controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; white-space: nowrap; border: 1px solid transparent; border-radius: 8px; padding: 0 14px; font: 12.5px/1 var(--font-ui); color: var(--text); background: transparent; cursor: pointer; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent-solid); color: var(--on-accent); font-weight: 600; padding: 0 16px; }
.btn-secondary { border-color: var(--border-strong); color: var(--text); }
.btn-secondary:hover { background: var(--panel-2); }
.btn[disabled] { opacity: .6; cursor: progress; }
.at-input { width: 100%; height: 32px; background: var(--card-sunk); color: var(--text); border: 1px solid var(--border-strong); border-radius: 7px; padding: 0 9px; font: 13px var(--font-ui); }
.at-input:focus { border-color: var(--accent); outline: none; }
.at-input::placeholder { color: var(--text-fainter); }
.tag { display: inline-block; border-radius: 3px; background: var(--card-sunk); border: 1px solid var(--border-soft); padding: 1px 6px; font: 10px/1.5 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); text-decoration: none; white-space: nowrap; }
a.tag:hover { color: var(--text); border-color: var(--border-strong); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { height: 26px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--border-strong); padding: 0 10px; font: 11.5px var(--font-ui); color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.chip:hover { background: var(--panel-2); color: var(--text); }
.chip.on { border-color: var(--accent); background: var(--accent-solid); color: var(--on-accent); }

/* The home page and lists */
.col { width: 100%; max-width: 1040px; margin: 0 auto; padding: 40px 24px 56px; display: flex; flex-direction: column; gap: 32px; }
.home-h { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.home-h > div { flex: 1 1 360px; }
.title { margin: 0; font: 400 34px/1.15 var(--font-display); color: var(--text); }
.count { margin: 6px 0 0; font-size: 12.5px; color: var(--text-faint); }
.search { flex: 0 1 280px; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12px; color: var(--text-faint); }
.meta time { white-space: nowrap; }
.ex { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-2); }
.more { font-size: 12.5px; font-weight: 600; color: var(--accent-text); text-decoration: none; }
.more:hover { text-decoration: underline; }
.art { position: relative; display: block; background: #1b1714; border-radius: 8px; overflow: hidden; }
.art img, .art video { display: block; width: 100%; height: 100%; object-fit: cover; }
.feature { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; align-items: center; padding-bottom: 32px; border-bottom: 1px solid var(--border); }
.feature .art { aspect-ratio: 16 / 9; }
.feature .art-empty { background: var(--panel-2); border: 1px solid var(--border); }
.feature-b { display: flex; flex-direction: column; gap: 10px; }
.feature-b h2 { margin: 0; font: 400 32px/1.15 var(--font-display); }
.feature-b h2 a, .row h2 a { color: var(--text); text-decoration: none; }
.feature-b h2 a:hover, .row h2 a:hover { color: var(--accent-text); }
.feature-b .ex { font-size: 15.5px; }
.feature-b p { margin: 0; }
.filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.lbl { display: flex; align-items: center; gap: 6px; font: 700 9.5px/1.2 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
.lbl::before { content: ""; width: 7px; height: 7px; background: var(--accent); }
.list { display: flex; flex-direction: column; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--border-soft); }
.row-b { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.row h2 { margin: 0; font: 400 21px/1.3 var(--font-display); }
.row .art { width: 200px; aspect-ratio: 16 / 10; }
.row mark { background: var(--accent-sunk); color: inherit; border-radius: 2px; padding: 0 1px; }
.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.pager > :last-child { justify-self: end; }
.pager .count { margin: 0; }
.empty { border: 1px dashed var(--border-strong); border-radius: 10px; padding: 32px 24px; text-align: center; color: var(--text-muted); }
.empty h2, .empty h1 { margin: 0 0 6px; font: 400 20px/1.3 var(--font-display); color: var(--text); }
.empty p { margin: 0 auto 12px; max-width: 460px; font-size: 13px; }

/* The newsletter */
.news { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 24px 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; }
.news-t { flex: 1 1 300px; }
.news h2 { margin: 0; font: 400 24px/1.25 var(--font-display); color: var(--text); }
.news-t p { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }
.news form { display: flex; gap: 8px; flex: 1 1 340px; }
.news .at-input, .news .btn { height: 38px; font-size: 13.5px; }
.news-msg { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--ok); }
.news-msg:empty { display: none; }
.news-msg.err { color: var(--danger); }
.fine { flex-basis: 100%; margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--text-faint); }
.news-read { margin-top: 48px; padding: 22px 24px; }
.news-read .news-t { flex-basis: 100%; }

/* A post */
.post { padding: 48px 24px 64px; }
.read { width: 100%; max-width: 680px; margin-left: auto; margin-right: auto; }
.wide { width: 100%; max-width: 960px; margin-left: auto; margin-right: auto; }
.post-h { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
.post-h h1 { margin: 0; font: 400 46px/1.1 var(--font-display); letter-spacing: -.005em; color: var(--text); text-wrap: balance; }
.dek { margin: 0; font: italic 400 20px/1.5 var(--font-display); color: var(--text-muted); }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: 12.5px; color: var(--text-faint); }
.byline .who { color: var(--text); font-weight: 500; }
.cover { margin-top: 0; margin-bottom: 40px; }
.cover img, .cover video { display: block; width: 100%; height: auto; border-radius: 8px; background: #1b1714; }
.preview-bar { max-width: 960px; margin: -24px auto 28px; padding: 10px 14px; background: var(--attention-bg); border: 1px solid var(--attention-line); border-radius: 8px; font-size: 13px; color: var(--text); }

.adj { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.adj a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.adj a span { font-size: 12px; color: var(--text-faint); }
.adj a b { font: 400 17px/1.3 var(--font-display); color: var(--text); }
.adj a:hover b { color: var(--accent-text); }
.adj .older { text-align: right; }

@media (max-width: 720px) {
  .col { padding: 28px 16px 40px; gap: 24px; }
  .post { padding: 28px 16px 40px; }
  .post-h h1 { font-size: 34px; }
  .dek { font-size: 18px; }
  .cover { margin: 0 -16px 28px; width: auto; }
  .cover img, .cover video { border-radius: 0; }
  .row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .row .art { width: 100%; order: -1; }
  .news { padding: 20px; }
  .news form { flex-direction: column; flex-basis: 100%; }
  .news .at-input, .news .btn { height: 44px; }
  .adj { grid-template-columns: 1fr; }
  .adj .older { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }