/*
 * blog.ashfame.com — layout and components. Colours come only from the semantic tokens in tokens.css
 * (shared with ashfame.com). Breakpoints follow the design canvases: mobile ≤ 640, tablet ≤ 960, desktop.
 * Post body typography lives in content.css (also loaded in the editor).
 *
 * Sizes are in rem (1rem = 16px at the base scale). Past 960px wide the root font-size goes to 150%
 * (set in inc/setup.php, front end only), so the design renders as it would at 150% browser zoom — the
 * same as ashfame.com. Zoom also narrows the viewport the layout sees, so tablet rules run up to 1440px
 * (960 × 1.5); mobile stays at 640 because it only ever runs at 1×. Media queries use em, which is always
 * the browser's default font size, never the root scale.
 */

:root {
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --reading: "Newsreader", Georgia, serif;

  --content: 65rem;
  --narrow: 45rem;
  --pad: 3.5rem;
  --py: 3rem;
  --nav-h: 4.5rem;
  --h2: 2.5rem;
  --page-h1: 4rem;
  --post-h1: 3.5rem;
  --thumb-w: 11.25rem;
  --thumb-h: 7.5rem;
  --pinned-w: 18.75rem;
  --pinned-h: 15.625rem;
  --indent: 2.5rem;
  --dots: radial-gradient(var(--line) .0625rem, transparent .075rem) 0 0 / 1.375rem 1.375rem;
}
@media (max-width: 90em) {
  :root { --pad: 2.5rem; --py: 2.5rem; --nav-h: 4rem; --h2: 2.25rem; --page-h1: 3.375rem; --post-h1: 2.875rem; --thumb-w: 10rem; --thumb-h: 6.875rem; --pinned-w: 15rem; --pinned-h: 12.5rem; --indent: 1.75rem; }
}
@media (max-width: 40em) {
  :root { --pad: 1.25rem; --py: 1.75rem; --nav-h: 3.75rem; --h2: 1.875rem; --page-h1: 2.75rem; --post-h1: 2.25rem; --thumb-h: 10.625rem; --pinned-h: 13.125rem; --indent: .875rem; }
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 .9375rem/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
:focus-visible { outline: .125rem solid var(--accent); outline-offset: .1875rem; border-radius: .25rem; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; }
.wp-site-blocks > main, .wp-site-blocks > .wp-block-group:is(main) { flex: 1; }
.wp-site-blocks > * + * { margin-block-start: 0; }

.wrap { max-width: var(--content); margin: 0 auto; padding-inline: var(--pad); }
.narrow { max-width: var(--narrow); margin: 0 auto; }
/* Archive lists use the same content column as the blog home (.wrap minus its padding). */
.list-width { max-width: calc(var(--content) - 2 * var(--pad)); margin: 0 auto; }
.dotted { background: var(--dots), var(--bg); }
.topbar { height: .1875rem; background: linear-gradient(90deg, var(--gold), var(--accent), var(--gold)); }
.bottombar { height: .5rem; background: var(--bar); }

.kicker { font: 500 .6875rem var(--sans); color: var(--accent); letter-spacing: .1em; text-transform: uppercase; display: flex; align-items: center; gap: .5rem; }
.label-mono { font: 600 .625rem var(--mono); letter-spacing: .12em; color: var(--muted); }
.page-title { margin: .5rem 0 0; font: 400 var(--page-h1)/1 var(--serif); letter-spacing: -.01em; color: var(--head); }
.page-title .bracket { color: var(--accent); }
.meta-line { display: flex; gap: .875rem; align-items: center; flex-wrap: wrap; font: 500 .75rem var(--sans); color: var(--muted); }
.meta-line a:hover { color: var(--accent); }
.meta-dot { width: .1875rem; height: .1875rem; border-radius: 99px; background: var(--gold); display: inline-block; }
.link-dotted { color: var(--accent); border-bottom: .125rem dotted var(--accent); padding-bottom: .125rem; }
.link-dotted:hover { color: var(--hover); border-bottom-color: var(--hover); }
.btn, .wp-element-button.btn {
  display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.25rem; border: 0; border-radius: 999px;
  background: var(--accent); color: var(--cta-text); font: 600 .8125rem var(--sans); cursor: pointer; transition: background-color .15s;
}
.btn:hover { background: var(--hover); color: var(--cta-text); }
.pill { font: 500 .6875rem var(--sans); color: var(--teal); padding: .1875rem .625rem; border: .0625rem solid var(--teal); border-radius: 999px; white-space: nowrap; }
.pill:hover { color: var(--accent); border-color: var(--accent); }
.pill.small { padding: .125rem .5625rem; font-size: .75rem; }
.tags { font: 500 .75rem var(--sans); color: var(--muted); display: inline-flex; flex-wrap: wrap; gap: 0 .625rem; }
.tags a:hover { color: var(--accent); }
.empty-note { font: 400 1rem/1.6 var(--reading); color: var(--muted); padding: 1.25rem 0; margin: 0; }
.ashfame-placeholder { padding: 1rem; border: .0625rem dashed var(--line); border-radius: .5rem; font: 500 .75rem var(--sans); color: var(--muted); text-align: center; }

/* ---------- header ---------- */

.header-part, .footer-part { margin: 0; }
.site-header { position: relative; z-index: 30; background: var(--bg); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--nav-h); }
.brand { display: flex; align-items: center; gap: .625rem; font: italic 1.625rem/1 var(--serif); color: var(--brand); white-space: nowrap; }
.brand:hover { color: var(--brand); }
.brand-dot { width: .625rem; height: .625rem; border-radius: 999px; background: var(--accent); display: inline-block; }
.brand-sub { font: 400 .875rem var(--sans); color: var(--muted); margin-left: .125rem; }
.nav { display: flex; gap: 1.75rem; align-items: center; font: 500 .8125rem/1 var(--sans); }
.nav a { position: relative; padding: .25rem 0; white-space: nowrap; }
.nav a.ext { color: var(--muted); }
.nav a.ext:hover { color: var(--accent); }
.nav-mark { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: 2.75rem; max-width: none; height: auto; margin-top: .0625rem; pointer-events: none; } /* fixed size; overhangs short labels */
.header-tools { display: flex; gap: .875rem; align-items: center; }
.loc, .loc-inline { display: flex; gap: .5rem; align-items: center; font: 500 .75rem/1 var(--sans); color: var(--muted); white-space: nowrap; }
.live-dot { width: .375rem; height: .375rem; border-radius: 99px; background: var(--teal2); display: inline-block; flex: none; }
.theme-toggle { width: 2.5rem; height: 1.375rem; border-radius: 999px; border: .0625rem solid var(--line); background: var(--surface); position: relative; flex: none; }
.theme-toggle .knob {
  position: absolute; top: .125rem; left: var(--knob-left); width: 1rem; height: 1rem; border-radius: 999px;
  background: var(--accent); color: var(--cta-text); display: flex; align-items: center; justify-content: center; font: .6875rem/1 var(--sans); transition: left .2s;
}
.theme-toggle .knob::before { content: var(--toggle-glyph); }
.burger { display: none; flex-direction: column; justify-content: center; gap: .3125rem; width: 1.375rem; height: 1.375rem; }
.burger span { display: block; height: .09375rem; background: var(--brand); transition: transform .2s, width .2s; }
.burger span:last-child { width: 70%; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(.203125rem) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { width: 100%; transform: translateY(-.203125rem) rotate(-45deg); }

.drawer { position: absolute; left: 0; right: 0; top: 100%; }
.drawer-panel { background: var(--surface); border-top: .0625rem solid var(--line); border-bottom: .0625rem solid var(--gold); padding: 1rem 1.25rem 1.375rem; }
.drawer .label-mono { letter-spacing: .14em; margin-bottom: .625rem; display: block; }
.drawer-nav { display: flex; flex-direction: column; }
.drawer-nav a { display: flex; justify-content: space-between; align-items: center; padding: .8125rem 0; border-top: .0625rem dotted var(--line); font: 500 1.0625rem var(--sans); }
.drawer-nav a:last-child { border-bottom: .0625rem dotted var(--line); }
.drawer-nav a[aria-current="page"] { color: var(--accent); }
.drawer-nav img { height: .5625rem; width: auto; }
.drawer-nav .ext { color: var(--muted); font-size: .875rem; }
.drawer-meta { display: flex; justify-content: space-between; gap: .75rem; margin-top: 1rem; font: 500 .75rem var(--sans); color: var(--muted); }
.drawer-scrim { position: fixed; inset: 0; z-index: 20; background: rgba(2, 16, 30, .5); }

@media (max-width: 90em) { .nav { gap: 1.25rem; } }
/* The blog nav is longer than ashfame.com's; below 860px the location no longer fits beside it (at the
   1.5× scale, below 1290px). Phones get it in the menu drawer instead. */
@media (max-width: 53.75em), (min-width: 60.0625em) and (max-width: 80.625em) { .loc { display: none; } }
@media (max-width: 40em) {
  .nav, .loc { display: none; }
  .burger { display: flex; }
}
@media (min-width: 40.0625em) {
  .drawer, .drawer-scrim { display: none; }
}

/* ---------- footer ---------- */

.site-footer { border-top: .0625rem solid var(--gold); }
.site-footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; padding-block: 1rem; font: 500 .75rem var(--sans); color: var(--muted); }
.brand-name { font: italic 1.125rem/1 var(--serif); color: var(--brand); }

/* ---------- lists: home, archives, search ---------- */

.af-home > .wrap { padding-block: var(--py); }
.list-section { background: var(--surface); border-top: .0625rem solid var(--sec-line); padding: 0 var(--pad) var(--py); }
.af-search .list-section .list-width { padding-top: .5rem; }

.list-ornament { display: flex; justify-content: center; align-items: center; gap: 2rem; margin: 2.5rem 0 1.5rem; }
.list-section .list-ornament { gap: 1.375rem; margin: 0; padding: 1.25rem 0 .375rem; }
.list-ornament .rule { height: 1rem; width: auto; max-width: 32%; object-fit: contain; }
.list-ornament .centre { height: 1.375rem; width: auto; flex: none; }
.list-ornament .flip { transform: scaleX(-1); }
@media (max-width: 40em) { .af-home .list-ornament .rule { display: none; } }

.rows-list { list-style: none; margin: 0; padding: 0; }
.rows-list > li { margin: 0; }
.year-head { font: italic 1.625rem/1 var(--serif); color: var(--head); margin: 1.75rem 0 .375rem; }
.rows-list > li:first-child .year-head { margin-top: 0; }
.post-row { display: grid; grid-template-columns: 1fr; gap: 1.5rem; padding: 1.25rem 0; border-top: .0625rem dotted var(--line); align-items: start; }
.post-row.has-thumb { grid-template-columns: 1fr var(--thumb-w); }
.row-date { font: 500 .75rem var(--sans); color: var(--muted); }
.row-title { margin: .375rem 0 0; font: 500 1.25rem/1.25 var(--sans); color: var(--head); }
.row-title a:hover { color: var(--accent); }
.row-excerpt { margin: .375rem 0 0; font: 400 .9375rem/1.5 var(--reading); color: var(--muted); }
.row-meta { display: flex; gap: .5rem .875rem; align-items: center; margin-top: .75rem; flex-wrap: wrap; }
.row-meta:empty { display: none; }
.row-thumb img, .pinned-thumb img { display: block; width: 100%; height: var(--thumb-h); object-fit: cover; border-radius: .5rem; }
mark { background: var(--mark); color: inherit; padding: 0 .125rem; border-radius: .1875rem; }
@media (max-width: 40em) {
  .post-row.has-thumb { grid-template-columns: minmax(0, 1fr); }
  .row-thumb { order: -1; }
}

.pinned { display: grid; grid-template-columns: 1fr; gap: 1.75rem; align-items: start; }
.pinned.has-thumb { grid-template-columns: 1fr var(--pinned-w); }
.pinned-text { min-width: 0; }
.pinned .kicker img { height: .875rem; width: auto; }
.pinned-title { margin: .5rem 0 0; font: 400 var(--post-h1)/1.05 var(--serif); color: var(--head); letter-spacing: -.01em; }
.pinned-title a:hover { color: var(--accent); }
.pinned .meta-line { margin-top: .875rem; }
.pinned-excerpt { margin: 1rem 0 0; font: 400 1rem/1.6 var(--reading); }
.pinned-thumb img { height: var(--pinned-h); }
@media (max-width: 40em) {
  .pinned.has-thumb { grid-template-columns: minmax(0, 1fr); }
  .pinned-thumb { order: -1; }
}

.pager { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; border-top: .0625rem dotted var(--line); font: 500 .8125rem var(--sans); color: var(--muted); }
.pager .off { color: var(--muted); }
.pager-count { color: var(--muted); }

/* ---------- archive / search heads ---------- */

.page-head { padding: var(--py) var(--pad) 2rem; }
.page-desc { margin-top: .875rem; max-width: 35rem; font: 400 1rem/1.6 var(--reading); }
.page-desc p { margin: 0; }
.page-head .meta-line { margin-top: .875rem; }
.af-page .page-head { padding-bottom: var(--py); }

.big-search { display: flex; gap: .625rem; margin-top: .75rem; max-width: 40rem; }
.big-search label { flex: 1; min-width: 0; display: flex; align-items: center; gap: .625rem; padding: 0 1rem; border: .0625rem solid var(--gold); border-radius: .75rem; background: var(--field); }
.big-search .glyph { font: 400 var(--h2)/1 var(--sans); color: var(--muted); }
.big-search input { flex: 1; min-width: 0; padding: .875rem 0; border: 0; background: transparent; outline: none; font: 400 var(--h2)/1 var(--serif); color: var(--head); caret-color: var(--accent); }
.big-search input::placeholder { color: var(--muted); opacity: .6; }
.big-search input::-webkit-search-cancel-button { display: none; }
.big-search button, .lost-search button { padding: 0 1.25rem; border-radius: .75rem; background: var(--accent); color: var(--cta-text); font: 600 .8125rem var(--sans); }
.big-search button:hover, .lost-search button:hover { background: var(--hover); }
.filter-chips { display: flex; gap: .5rem; align-items: center; margin-top: 1rem; font: 500 .75rem var(--sans); color: var(--muted); flex-wrap: wrap; }
.chip { padding: .25rem .625rem; border-radius: 999px; border: .0625rem solid var(--line); }
.chip.on { background: var(--head); border-color: var(--head); color: var(--bg); }
.chip.on:hover { color: var(--bg); }

/* ---------- single post ---------- */

.post-hero .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 1.5rem; padding-bottom: 2.5rem; }
.hero-image { margin: 0; width: 100%; max-width: 35rem; }
.hero-image img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: .375rem; }
.post-hero .meta-line { margin-top: 1.375rem; justify-content: center; }
.post-hero .hero-image + .meta-line { margin-top: 1.375rem; }
.post-title { margin: .875rem 0 0; max-width: 42.5rem; font: 400 var(--post-h1)/1.05 var(--serif); color: var(--head); letter-spacing: -.01em; }
.dek { margin: 1rem 0 0; max-width: 35rem; font: italic 1.1875rem/1.45 var(--serif); color: var(--muted); }
.byline { display: flex; gap: .75rem; align-items: center; margin-top: 1.625rem; font: 500 .8125rem var(--sans); }
.byline-avatar { width: 2.125rem; height: 2.125rem; border-radius: 999px; object-fit: cover; object-position: top; border: .0625rem solid var(--line); }

.post-body { background: var(--surface); border-top: .0625rem solid var(--sec-line); padding: var(--py) var(--pad); }
.post-grid { display: grid; grid-template-columns: 1fr minmax(0, 38.75rem) 1fr; column-gap: 2rem; max-width: var(--content); margin: 0 auto; }
.post-main { grid-column: 2; min-width: 0; }
.post-aside { grid-column: 3; position: relative; }
.toc { position: sticky; top: 1.25rem; display: flex; flex-direction: column; gap: .375rem; align-items: flex-end; text-align: right; font: 500 .6875rem var(--sans); color: var(--muted); }
.toc .label-mono { margin-bottom: .125rem; }
.toc a.current { color: var(--text); }
@media (max-width: 90em) {
  .post-grid { grid-template-columns: minmax(0, 1fr); }
  .post-main { grid-column: 1; max-width: 38.75rem; width: 100%; margin: 0 auto; }
  .post-aside { display: none; }
}

.post-footer .post-terms { margin-top: 2rem; gap: .5rem 1rem; }
.post-footer .tags { font-size: .8125rem; gap: 0 1rem; }
.adjacent-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2.25rem; padding-top: 1.5rem; border-top: .0625rem solid var(--gold); }
.adjacent { display: flex; flex-direction: column; }
.adjacent.next { text-align: right; }
.adjacent-label { font: 500 .6875rem var(--sans); color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.adjacent-title { font: 500 .9375rem/1.35 var(--sans); margin-top: .375rem; }
.adjacent.none .adjacent-title { color: var(--muted); }

/* ---------- comments ---------- */

.comments { margin-top: 3rem; font: 400 .9375rem/1.55 var(--sans); scroll-margin-top: 1rem; }
.comments-head { display: flex; align-items: center; gap: .75rem; }
.comments-head img { height: 1.125rem; width: auto; }
.comments-head h2 { margin: 0; font: 400 1.875rem/1.1 var(--serif); color: var(--head); }
.c-list, .c-list .children { list-style: none; margin: 0; padding: 0; }
.c-list { display: flex; flex-direction: column; gap: 1.375rem; margin-top: 1.375rem; }
.c-list > .c-item + .c-item { padding-top: 1.375rem; border-top: .0625rem dotted var(--line); }
.c-list .children { margin: 1.375rem 0 0 var(--indent); padding-left: var(--indent); border-left: .125rem solid var(--line); display: flex; flex-direction: column; gap: 1.375rem; }
.c-body { display: flex; gap: .75rem; align-items: flex-start; scroll-margin-top: 1rem; }
.c-avatar { flex: none; border-radius: 999px; border: .0625rem solid var(--line); }
img.c-avatar { width: 2.25rem; height: 2.25rem; object-fit: cover; object-position: top; }
.reply > .c-body img.c-avatar { width: 2rem; height: 2rem; }
.c-avatar.motif { display: flex; align-items: center; justify-content: center; overflow: hidden; background: color-mix(in srgb, var(--gold) 20%, transparent); }
.c-avatar.motif img { width: 72%; height: auto; object-fit: contain; display: block; }
.c-main { min-width: 0; flex: 1; }
.c-head { display: flex; gap: .625rem; align-items: baseline; flex-wrap: wrap; }
.c-name { font-weight: 600; color: var(--head); }
.c-badge { font: 500 .625rem var(--sans); color: var(--cta-text); background: var(--accent); padding: .125rem .4375rem; border-radius: 999px; letter-spacing: .06em; }
.c-meta { font: 500 .75rem var(--sans); color: var(--muted); }
.c-replying { font: 500 .75rem var(--sans); color: var(--muted); margin-top: .25rem; display: flex; gap: .375rem; align-items: center; }
.c-replying span { color: var(--accent); }
.c-replying a { color: var(--text); border-bottom: .0625rem dotted var(--line); }
.c-text p { margin: .375rem 0 0; }
.c-text code { font: 500 .8125rem var(--mono); background: var(--bg); padding: .0625rem .3125rem; border-radius: .25rem; border: .0625rem solid var(--line); }
.c-pending { margin: .375rem 0 0; font: 500 .75rem var(--sans); color: var(--accent); }
.c-actions { display: flex; gap: 1rem; margin-top: .5rem; font: 500 .75rem var(--sans); }
.c-actions .comment-reply-link { color: var(--accent); }
.c-actions .c-link { color: var(--muted); }
.c-ping { display: flex; gap: .75rem; align-items: flex-start; }
.c-ping-icon { width: 2.25rem; height: 2.25rem; border-radius: 999px; border: .0625rem dashed var(--line); flex: none; display: flex; align-items: center; justify-content: center; font: 500 .6875rem var(--mono); color: var(--muted); }
.c-ping-title { margin-top: .25rem; font: 500 .9375rem var(--sans); }
.c-host { color: var(--muted); font-weight: 400; }
.comments-closed { font: 500 .8125rem var(--sans); color: var(--muted); margin-top: 1.5rem; }

.cf-box { margin-top: 2.25rem; padding: var(--py); border-radius: .875rem; background: var(--bg); border: .0625rem solid var(--line); }
.c-list .cf-box { margin: 1.375rem 0 0; }
.cf-title { margin: 0; font: 400 1.625rem var(--serif); color: var(--head); }
.cf-cancel { font: 500 .75rem var(--sans); margin-left: .5rem; }
.cf-cancel a { color: var(--accent); }
.cf-note { margin: .25rem 0 0; font: 400 .8125rem var(--sans); color: var(--muted); }
.req { color: var(--accent); }
.cf-form { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1.125rem; }
.cf-form > * { grid-column: 1 / -1; margin: 0; }
.cf-form > .cf-field.half { grid-column: auto; }
.cf-field { display: flex; flex-direction: column; gap: .375rem; font: 500 .75rem var(--sans); color: var(--muted); }
.cf-field input, .cf-field textarea {
  padding: .6875rem .75rem; border: .0625rem solid var(--line); border-radius: .5rem; background: var(--field);
  font: 400 .875rem var(--sans); color: var(--text); width: 100%;
}
.cf-field textarea { min-height: 6.875rem; resize: vertical; padding: .75rem; }
.cf-field input:focus, .cf-field textarea:focus { outline: none; border-color: var(--accent); }
.cf-field ::placeholder { color: var(--muted); opacity: .8; }
.cf-check { display: flex; gap: .5rem; align-items: center; font: 400 .8125rem var(--sans); color: var(--muted); margin-top: .25rem !important; }
.cf-check input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--accent); }
.cf-form > .cf-check { grid-column: 1 / 2; }
.cf-submit { display: flex; justify-content: flex-end; margin-top: .25rem !important; }
.cf-form > .cf-check + .cf-submit { grid-column: 2 / 3; }
@media (max-width: 40em) { .cf-form > .cf-field.half { grid-column: 1 / -1; } }

/* ---------- 404 ---------- */

.lost .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 3.5rem; padding-bottom: 4rem; }
.lost img { height: 6.875rem; width: auto; display: block; }
.lost .kicker { margin-top: 1.75rem; letter-spacing: .14em; }
.lost .page-title { margin-top: .625rem; max-width: 35rem; line-height: 1.05; }
.lost p { margin: .875rem 0 0; max-width: 27.5rem; font: 400 1rem/1.6 var(--reading); }
.lost-search { display: flex; gap: .625rem; margin-top: 1.625rem; width: 100%; max-width: 30rem; }
.lost-search label { flex: 1; min-width: 0; display: flex; align-items: center; gap: .625rem; padding: 0 .875rem; border: .0625rem solid var(--line); border-radius: .625rem; background: var(--field); color: var(--muted); }
.lost-search label:focus-within { border-color: var(--accent); }
.lost-search .glyph { font: 400 1.3125rem/1 var(--sans); }
.lost-search input { flex: 1; min-width: 0; padding: .75rem 0; border: 0; background: transparent; color: var(--text); font: 400 .875rem var(--sans); outline: none; }
.lost-search button { border-radius: .625rem; padding: 0 1.125rem; }
.pill-links { display: flex; gap: .625rem; margin-top: 1.125rem; flex-wrap: wrap; justify-content: center; font: 500 .8125rem var(--sans); }
.pill-links a { padding: .5625rem .875rem; border: .0625rem solid var(--line); border-radius: 999px; }
.pill-links a:hover { border-color: var(--accent); }
.pill-links .ext { color: var(--muted); }

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