/* ainotlari — "Sürüm notları"
   Geliştirici aracı sadeliği (Linear sürüm notları, Vercel). Tek aile: Switzer.
   Koyu öncelikli, uyumlu bir açık tema. Tek vurgu: kehribar. Yalnızca 85+ puanda,
   logodaki karede, odakta ve birincil düğmede görünür.
   Ana sayfa, /haber/:slug, 404 ve /admin bu dosyayı paylaşır. */

@font-face {
  font-family: 'Switzer';
  src: url('/fonts/switzer-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────────────────────────── */
/* Varsayılan koyu; açık yalnızca kayıtlı tercihle (data-theme='light'). */
:root {
  --bg: #0a0b0d;
  --bg-2: #111215;
  --bg-hover: #131418;
  --line: #1d1f23;
  --line-2: #2b2e34;
  --fg: #ededef;
  --fg-2: #b3b6bd;
  --muted: #80858e;
  --faint: #797e87; /* ≥4.5:1 on --bg and --bg-2 (WCAG AA) */
  --amber: #ffb224;
  --amber-text: #ffb224;
  --on-amber: #1a1203;
  --danger: #ff6b5b;
  color-scheme: dark;

  --font: 'Switzer', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --page: 70rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --label-col: 12.5rem;
  --score-col: 2.75rem;
  --meta-col: 9.5rem;
  --bar-h: 3.5rem;
  --r: 6px;
}
:root[data-theme='light'] {
  --bg: #fafafa;
  --bg-2: #f1f1f3;
  --bg-hover: #f1f1f3;
  --line: #e5e5e8;
  --line-2: #d3d4d9;
  --fg: #111214;
  --fg-2: #3a3d43;
  --muted: #656971;
  --faint: #6a6e76; /* ≥4.5:1 on --bg and --bg-2 */
  --amber-text: #995700;
  --danger: #c52a1a;
  color-scheme: light;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 0.9375rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--amber); color: var(--on-amber); }

a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 2px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 0.5rem; top: -4rem; z-index: 20;
  background: var(--amber); color: var(--on-amber); padding: 0.5rem 0.75rem; border-radius: var(--r);
}
.skip:focus { top: 0.5rem; }
[hidden] { display: none !important; }

.page { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }

/* Metin içi bağlantı */
.link { color: var(--fg-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 0.2em; }
.link:hover { color: var(--fg); text-decoration-color: var(--muted); }

/* ── Üst çubuk ──────────────────────────────────────────────────────────── */
/* Mobilde iki satır ve kaymaz; yer, yapışkan grup başlığına kalır.
   48rem ve üstünde tek satır, yapışkan. */
.bar {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  margin: 0 calc(-1 * var(--gutter));
  padding: 0 var(--gutter);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.logo { font-size: 0.9375rem; font-weight: 640; letter-spacing: -0.01em; line-height: 1; }
.logo a { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0; }
.logo a::before {
  content: '';
  width: 0.7rem;
  height: 0.7rem;
  background: var(--amber);
  border-radius: 2px;
}
.logo-sub { color: var(--muted); font-weight: 450; margin-left: 0.1rem; }

.filters { display: flex; gap: 1.25rem; font-size: 0.875rem; }
.filter {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 0;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
}
.filter:hover { color: var(--fg); }
.filter[aria-pressed='true'],
.filter[aria-current] { color: var(--fg); }
.filter[aria-pressed='true']::after,
.filter[aria-current]::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--fg);
}

/* Bölüm sekmesi (Kullanım Alanları): süzgeçlerden ayrı, sağda, tema düğmesinin solunda */
.bar-link {
  position: relative;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  margin-right: 1.25rem;
  color: var(--fg-2);
  font-size: 0.875rem;
  white-space: nowrap;
}
.bar-link:hover { color: var(--fg); }
.bar-link[aria-current] { color: var(--fg); }
.bar-link[aria-current]::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--fg);
}

.theme-toggle {
  justify-self: end;
  height: 1.75rem;
  padding: 0 0.65rem;
  background: none;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  color: var(--fg-2);
  font-size: 0.8125rem;
  cursor: pointer;
}
.theme-toggle:hover { color: var(--fg); border-color: var(--muted); }

@media (max-width: 47.99rem) {
  .bar { grid-template-columns: 1fr auto auto; height: auto; }
  .bar-link { margin-right: 0.9rem; }
  .logo { height: 3.25rem; display: flex; align-items: center; }
  .filters {
    grid-column: 1 / -1;
    grid-row: 2;
    height: 2.75rem;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter);
    border-top: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filter[aria-current]::after { bottom: 0; } /* overflow-x would clip -1px */
}
@media (min-width: 48rem) {
  .bar {
    position: sticky;
    top: 0;
    z-index: 10;
    height: var(--bar-h);
    column-gap: 2rem;
  }
  .filters { align-self: stretch; }
}

/* ── Giriş ──────────────────────────────────────────────────────────────── */
.lede {
  padding: 2.5rem 0 2.25rem;
  max-width: 36rem;
  font-size: clamp(1.25rem, 1.05rem + 1.1vw, 1.75rem);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.022em;
  color: var(--fg-2);
  text-wrap: pretty;
}
.lede time, .lede .issue { color: var(--fg); }
@media (min-width: 64rem) {
  .lede { padding: 3.5rem 0 3rem; }
}

.feed:focus { outline: none; }
/* Until /api/items fills the feed, keep the footer below the fold (avoids a big layout shift, CLS). */
#groups:empty { min-height: 100vh; }

/* ── Kullanım Alanları: sektör süzgeci, "Haberden" ─────────────────────── */
.lede-k { color: var(--fg); }
.lede-h { display: inline; font: inherit; letter-spacing: inherit; }
.sector-filters {
  display: flex;
  gap: 1.25rem;
  height: 2.75rem;
  margin: 0 calc(-1 * var(--gutter));
  padding: 0 var(--gutter);
  border-top: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  font-size: 0.875rem;
}
.sector-filters::-webkit-scrollbar { display: none; }
.sector-filters .filter[aria-current]::after { bottom: 0; }
.sector-filters .filter.is-empty { color: var(--faint); }
.sector-filters .filter.is-empty:hover { color: var(--fg-2); }
.is-promoted .item-source { color: var(--muted); }
@media (min-width: 64rem) {
  .sector-filters { margin: 0; padding: 0 0 0 calc(var(--label-col) + 0.75rem); }
}

/* ── Gruplar ────────────────────────────────────────────────────────────── */
/* <64rem: yapışkan, tek satırlık grup başlığı. ≥64rem: solda yapışkan sütun. */
.group { border-top: 1px solid var(--line); }

.group-head {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  min-width: 0;
  padding: 0.7rem 0 0.6rem;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.group-title { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.005em; }
.group-range { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 0.8125rem; }
.group-count { margin-left: auto; color: var(--faint); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }

@media (min-width: 48rem) {
  .group-head { top: var(--bar-h); }
}
@media (min-width: 64rem) {
  .group {
    display: grid;
    grid-template-columns: var(--label-col) minmax(0, 1fr);
  }
  .group-head {
    top: calc(var(--bar-h) + 1.25rem);
    align-self: start;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1.15rem 1.5rem 1.5rem 0;
    border-bottom: 0;
    background: none;
    white-space: normal;
  }
  .group-count { margin-left: 0; }
}

.group.is-entering { animation: appear 0.25s ease-out both; }
@keyframes appear { from { opacity: 0; } }

/* ── Notlar: puan | başlık, açıklama, etiket | kaynak, zaman ───────────── */
.items { list-style: none; padding: 0; }

.item {
  display: grid;
  grid-template-columns: var(--score-col) auto auto minmax(0, 1fr);
  grid-template-areas:
    'score title   title   title'
    '.     tagline tagline tagline'
    '.     source  time    tags';
  column-gap: 0;
  padding: 0.9rem 0.75rem 0.95rem 0;
  border-bottom: 1px solid var(--line);
}
.item:last-child { border-bottom: 0; }
.item.is-current { background: var(--bg-hover); box-shadow: inset 2px 0 var(--amber); }

.item-score {
  grid-area: score;
  padding-left: 0.75rem;
  color: var(--faint);
  font-size: 0.8125rem;
  line-height: 1.5rem;
  font-variant-numeric: tabular-nums;
}
.item.is-key .item-score { color: var(--amber-text); font-weight: 600; }

.item-title {
  grid-area: title;
  font-size: 1rem;
  font-weight: 550;
  line-height: 1.5rem;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}
.item-title a:hover { text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: 0.2em; }
.item-title a:visited { color: var(--fg-2); }

.item-tagline {
  grid-area: tagline;
  margin-top: 0.15rem;
  max-width: 40rem;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.item-source,
.item-time,
.item-tags {
  margin-top: 0.45rem;
  font-size: 0.75rem;
  line-height: 1.25rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.item-source { grid-area: source; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; color: var(--fg-2); margin-right: 0.75rem; }
.item-source:hover { color: var(--fg); }
.item-time { grid-area: time; }
.item-tags { grid-area: tags; justify-self: end; padding-left: 0.75rem; overflow: hidden; text-overflow: ellipsis; }

.tag {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
}
.tag + .tag { margin-left: 0.6rem; }
.tag:hover { color: var(--fg); }

@media (min-width: 64rem) {
  .item {
    grid-template-columns: var(--score-col) minmax(0, 1fr) var(--meta-col);
    grid-template-areas:
      'score title   source'
      '.     tagline time'
      '.     tags    .';
    column-gap: 0.5rem;
  }
  .item-score, .item-title { line-height: 1.6rem; }
  .item-source { justify-self: end; max-width: 100%; margin: 0; font-size: 0.8125rem; line-height: 1.6rem; }
  .item-time { justify-self: end; margin-top: 0.15rem; font-size: 0.8125rem; }
  .item-tags { justify-self: start; padding-left: 0; color: var(--faint); }
}

.empty { padding: 2rem 0; color: var(--muted); }

/* ── Sponsor: kesik çizgili yer tutucu ──────────────────────────────────── */
.sponsor {
  margin: 0.5rem 0 2.5rem;
  padding: 0.85rem 1rem;
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.55;
}
.sponsor strong { color: var(--fg-2); font-weight: 600; }
.sponsor a { color: var(--fg-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 0.2em; }
.sponsor a:hover { color: var(--fg); }
@media (min-width: 64rem) {
  .sponsor { margin-left: calc(var(--label-col) + var(--score-col)); max-width: 40rem; }
}

/* ── Bülten kutusu: sayfadaki tek dolu yüzey ────────────────────────────── */
.signup {
  margin: 1rem 0 3rem;
  padding: 1.25rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.signup-title { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.signup-text { margin-top: 0.3rem; color: var(--muted); font-size: 0.875rem; max-width: 30rem; text-wrap: pretty; }
.signup-form { display: grid; gap: 0.65rem; margin-top: 1rem; }
.signup-row { display: flex; gap: 0.5rem; }
.signup-row input {
  flex: 1;
  min-width: 0;
  height: 2.5rem;
  padding: 0 0.75rem;
  font-size: 1rem; /* iOS'ta odakta yakınlaştırmayı önler */
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
}
.signup-row input::placeholder { color: var(--faint); }
.signup-form.is-invalid .signup-row input { border-color: var(--danger); }
.signup-form .btn:disabled { opacity: 0.6; cursor: progress; }
.signup-consent { display: flex; align-items: flex-start; gap: 0.5rem; color: var(--muted); font-size: 0.75rem; line-height: 1.5; text-wrap: pretty; }
.signup-consent input { flex: none; width: 0.875rem; height: 0.875rem; margin: 0.15rem 0 0; accent-color: var(--amber); }
.signup-consent a { color: var(--fg-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 0.2em; }
.signup-consent a:hover { color: var(--fg); }
.signup-form.needs-consent .signup-consent { color: var(--danger); }
/* Bal küpü: insanlar görmez, botlar doldurur. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.signup-note { margin-top: 0.6rem; font-size: 0.75rem; color: var(--faint); }
.signup-note.is-error { color: var(--danger); }
.signup-note.is-ok { color: var(--fg-2); }

@media (min-width: 48rem) {
  .signup-row input { height: 2.25rem; font-size: 0.875rem; }
  .signup-form .btn { height: 2.25rem; }
}
@media (min-width: 64rem) {
  .signup {
    display: grid;
    grid-template-columns: var(--label-col) minmax(0, 1fr) minmax(0, 24rem);
    align-items: start;
    padding: 1.5rem 1.5rem 1.5rem 0;
  }
  .signup-title { grid-column: 1; grid-row: 1 / span 2; padding-left: 1.5rem; }
  .signup-text { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding-left: var(--score-col); padding-right: 2rem; }
  .signup-form { grid-column: 3; grid-row: 1; margin: 0; }
  .signup-note { grid-column: 3; grid-row: 2; }
}

/* ── Form ögeleri (bülten + yönetim) ────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  padding: 0 0.95rem;
  background: var(--amber);
  color: var(--on-amber);
  border: 1px solid transparent;
  border-radius: var(--r);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: none; color: var(--fg-2); border-color: var(--line-2); font-weight: 500; }
.btn.ghost:hover { filter: none; color: var(--fg); border-color: var(--muted); }
.btn.small { height: 1.75rem; padding: 0 0.6rem; font-size: 0.8125rem; }

.input:focus-visible,
.signup-row input:focus-visible { outline: none; border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }

/* ── Sentinel ───────────────────────────────────────────────────────────── */
.sentinel { padding: 2rem 0 1rem; color: var(--faint); font-size: 0.8125rem; border-top: 1px solid var(--line); }
.sentinel a { color: var(--fg-2); text-decoration: underline; text-underline-offset: 0.2em; }
@media (min-width: 64rem) { .sentinel { padding-left: calc(var(--label-col) + 0.75rem); } }

/* ── Detay sayfası: solda yapışkan künye, sağda metin ──────────────────── */
.article {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 0 3rem;
}
.article-side { display: contents; }
.article-back { order: -1; margin-bottom: 1.75rem; font-size: 0.8125rem; }
.article-back a { color: var(--muted); }
.article-back span { color: var(--faint); margin: 0 0.2rem; }
.article-back a:hover { color: var(--fg); }

.article-title {
  max-width: 21em;
  font-size: clamp(1.625rem, 1.2rem + 2vw, 2.5rem);
  font-weight: 620;
  line-height: 1.12;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.article-tagline {
  margin-top: 0.75rem;
  max-width: 34rem;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--fg-2);
  text-wrap: pretty;
}

/* Künye: mobilde başlığın altında yatay, masaüstünde sol sütunda dikey */
.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem 1.25rem;
  margin: 1.5rem 0 2rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 0.8125rem;
}
.facts dt { color: var(--faint); }
.facts dd { color: var(--fg-2); font-variant-numeric: tabular-nums; }
.facts dd a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 0.2em; }
.facts .is-key dd { color: var(--amber-text); font-weight: 600; }

.article-body {
  max-width: 38rem;
  color: var(--fg-2);
  font-size: 1.0625rem;
  line-height: 1.7;
}
.article-body > * + * { margin-top: 1.1em; }
.article-summary { color: var(--fg); font-size: 1.1875rem; line-height: 1.6; letter-spacing: -0.01em; }
.article-body h2 { margin-top: 2em; color: var(--fg); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.article-body h3 { margin-top: 1.6em; color: var(--fg); font-size: 1rem; font-weight: 600; line-height: 1.4; }
.article-body ul, .article-body ol { padding-left: 1.25rem; }
.article-body li + li { margin-top: 0.35em; }
.article-body li::marker { color: var(--faint); }
.article-body strong { color: var(--fg); font-weight: 600; }
.article-body a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 0.2em; }
.article-body a:hover { text-decoration-color: var(--amber); }
.article-body code {
  padding: 0.1em 0.35em;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.85em;
}

.article-lead { color: var(--fg); font-size: 1.0625rem; line-height: 1.6; padding-left: 0.85rem; border-left: 2px solid var(--amber); }
.article-lead-k { color: var(--amber-text); font-weight: 600; margin-right: 0.2em; }
.article-faq dl { margin-top: 0.6em; }
.article-faq dt { color: var(--fg); font-weight: 600; }
.article-faq dt + dd { margin-top: 0.2em; }
.article-faq dd + dt { margin-top: 0.9em; }
.article-related ul { list-style: none; padding-left: 0; font-size: 0.9375rem; }
.article-related li { padding: 0.45em 0; border-top: 1px solid var(--line); }
.article-related li + li { margin-top: 0; }
.article-sources { margin-top: 0.4rem; padding-left: 0; list-style: none; }
.article-sources li { padding: 0.2rem 0; }
.article-sources span { color: var(--faint); font-size: 0.8125rem; margin-left: 0.35rem; }

.article-source {
  max-width: 38rem;
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--muted);
}
.article-source a { color: var(--fg); font-weight: 550; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 0.2em; }
.article-source a:hover { text-decoration-color: var(--amber); }
.article-note { margin-top: 0.4rem; color: var(--faint); font-size: 0.8125rem; text-wrap: pretty; }

.article-after .sponsor { margin-top: 0; }

@media (min-width: 64rem) {
  .article {
    display: grid;
    grid-template-columns: var(--label-col) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    padding: 3.5rem 0 4rem;
  }
  .article-side {
    display: block;
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: start;
    position: sticky;
    top: calc(var(--bar-h) + 1.25rem);
    padding-right: 1.5rem;
  }
  .article-back { margin-bottom: 1.5rem; line-height: 1.6rem; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; margin: 0; padding: 0; border: 0; }
  .facts dd { margin-top: 0.1rem; }
  .article-head, .article-body, .article-source { grid-column: 2; }
  .article-body { margin-top: 2.25rem; }
  .article-after .sponsor { margin-left: var(--label-col); max-width: 38rem; }
}

/* ── 404 ────────────────────────────────────────────────────────────────── */
.not-found .facts dd { font-size: 1rem; }
.not-found-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.875rem; }
@media (min-width: 64rem) { .not-found-links { margin-top: 2rem; } }
.not-found-links a { color: var(--fg-2); }
.not-found-links a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 0.2em; }
.not-found .article-body { margin-top: 0; }

/* ── Alt bilgi ──────────────────────────────────────────────────────────── */
.site-footer {
  margin-top: 3rem;
  padding: 1.5rem 0 3rem;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--muted);
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.footer-nav a { color: var(--fg-2); }
.footer-nav a:hover { color: var(--fg); }
.footer-about { margin-top: 0.75rem; max-width: 34rem; color: var(--faint); text-wrap: pretty; }
.footer-about .is-key { color: var(--amber-text); font-weight: 600; }
kbd {
  display: inline-block;
  min-width: 1.35em;
  padding: 0 0.3em;
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: var(--font);
  font-size: 0.75rem;
  line-height: 1.35;
  text-align: center;
  color: var(--fg-2);
}
@media (hover: none) { .footer-keys { display: none; } }
@media (min-width: 64rem) {
  .site-footer { display: grid; grid-template-columns: var(--label-col) 1fr; }
  .site-footer > * { grid-column: 2; padding-left: calc(var(--score-col) + 0.75rem); }
  .is-article .site-footer > * { padding-left: 0; }
}

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