/*
Theme Name: Signal Rich
Theme URI: https://signal-rich.com
Author: Signal Rich
Author URI: https://signal-rich.com
Description: The Signal Rich blog theme — same warm-paper/teal/amber design system as the Signal Rich app and marketing site (see marketing/index.html in the main repo), applied to a full editorial WordPress theme: post list, single post with related-posts and reading time, threaded comments, search, archives, and widgets.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: signalrich
*/

/* =============================================================
   Design tokens — copied 1:1 from marketing/index.html so the
   blog reads as the same product, not a bolted-on WordPress site.
   ============================================================= */
:root {
  --ink: #0b1a17;
  --paper: #f5f3ee;
  --paper-raised: #ffffff;
  --primary: #0f766e;
  --primary-deep: #0a4f49;
  --signal: #b3690f;
  --line: rgba(11, 26, 23, 0.13);
  --muted: #5c6b68;
  --shadow: 0 1px 2px rgba(11, 26, 23, 0.04), 0 8px 24px rgba(11, 26, 23, 0.06);
  --font-display: ui-serif, Georgia, "Times New Roman", serif;
  --font-body: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
:root[data-theme="dark"] {
  --ink: #eef4f2;
  --paper: #0a1412;
  --paper-raised: #101d1a;
  --primary: #35d1bd;
  --primary-deep: #7fe8d8;
  --signal: #e3a34d;
  --line: rgba(238, 244, 242, 0.14);
  --muted: #9fb0ac;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 28px rgba(0, 0, 0, 0.35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #eef4f2;
    --paper: #0a1412;
    --paper-raised: #101d1a;
    --primary: #35d1bd;
    --primary-deep: #7fe8d8;
    --signal: #e3a34d;
    --line: rgba(238, 244, 242, 0.14);
    --muted: #9fb0ac;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 28px rgba(0, 0, 0, 0.35);
  }
}

/* =============================================================
   Reset & base
   ============================================================= */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; border-radius: 10px; }
a { color: inherit; }
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 0.5em;
}
.tabular { font-variant-numeric: tabular-nums; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }
.narrow { max-width: 720px; margin: 0 auto; padding: 0 28px; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 600;
  color: var(--signal);
  text-decoration: none;
}
a.eyebrow:hover { text-decoration: underline; }

/* Skip link — keyboard accessibility */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--primary); color: var(--paper);
  padding: 12px 18px; border-radius: 0 0 8px 0; font-size: 14px; font-weight: 600;
}
.skip-link:focus { left: 0; }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* =============================================================
   Nav — identical component to marketing/index.html
   ============================================================= */
header.nav {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 19px; text-decoration: none; color: var(--ink); }
.brand .mark {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(155deg, var(--primary), var(--primary-deep));
  display: flex; align-items: center; justify-content: center;
  color: var(--paper); font-family: var(--font-display); font-weight: 700; font-size: 16px;
  box-shadow: var(--shadow);
}
.beta-pill {
  font-family: var(--font-body); font-weight: 600; font-size: 11px; letter-spacing: 0.04em;
  color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent);
  border-radius: 999px; padding: 3px 9px;
}
nav.links { display: flex; gap: 26px; font-size: 14.5px; flex-wrap: wrap; }
nav.links a { text-decoration: none; color: var(--muted); transition: color .15s; }
nav.links a:hover, nav.links a[aria-current="page"] { color: var(--ink); }
.cta-row { display: flex; align-items: center; gap: 14px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 8px;
  font-size: 14.5px; font-weight: 600; text-decoration: none; border: 1px solid transparent;
  cursor: pointer; transition: transform .15s, box-shadow .15s, opacity .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: var(--paper); box-shadow: var(--shadow); }
:root[data-theme="dark"] .btn-primary { color: #04201d; }
.btn-primary:hover { opacity: .92; }
.btn-ghost { color: var(--ink); border-color: var(--line); background: transparent; }
.btn-ghost:hover { border-color: var(--primary); }
.theme-toggle {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper-raised);
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); flex-shrink: 0;
}

/* =============================================================
   Hero — front page only, with the signature animated sparkline
   ============================================================= */
.blog-hero { padding: 72px 0 56px; border-bottom: 1px solid var(--line); }
.blog-hero .eyebrow { margin-bottom: 12px; display: block; }
.blog-hero h1 { font-size: clamp(30px, 4.6vw, 46px); line-height: 1.1; margin-bottom: 14px; }
.blog-hero p.lede { font-size: 17px; color: var(--muted); max-width: 56ch; margin: 0; }
.hero-spark { display: block; width: 100%; height: 64px; margin-top: 28px; }
.hero-spark path.line {
  fill: none; stroke: var(--primary); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 400; stroke-dashoffset: 400;
  animation: spark-draw 1.6s ease-out .2s forwards;
}
.hero-spark path.fill { fill: url(#sparkFill); opacity: 0; animation: spark-fade .8s ease-out 1s forwards; }
.hero-spark circle { fill: var(--signal); opacity: 0; animation: spark-fade .5s ease-out 1.5s forwards; }
@keyframes spark-draw { to { stroke-dashoffset: 0; } }
@keyframes spark-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hero-spark path.line { stroke-dashoffset: 0; animation: none; }
  .hero-spark path.fill, .hero-spark circle { opacity: 1; animation: none; }
}

/* =============================================================
   Layout — content + optional sidebar
   ============================================================= */
.content-layout { display: grid; grid-template-columns: 1fr; gap: 56px; padding: 56px 0 80px; }
.content-layout.has-sidebar { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }

/* =============================================================
   Post grid (index / archive / search) — photo-forward cards
   ============================================================= */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 28px;
  align-items: start;
}
.post-card {
  display: flex; flex-direction: column;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.post-card:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(11,26,23,0.06), 0 16px 32px rgba(11,26,23,0.1); }
:root[data-theme="dark"] .post-card:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.35), 0 16px 36px rgba(0,0,0,0.4); }
.post-card-thumb { position: relative; display: block; aspect-ratio: 16/11; background: var(--paper); }
.post-card-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block; }
.post-card-thumb-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, var(--primary), var(--primary-deep));
}
.post-card-thumb-fallback .mark {
  width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: rgba(245,243,238,0.16); color: #f5f3ee; font-family: var(--font-display); font-weight: 700; font-size: 22px;
}
.post-card .badge {
  position: absolute; top: 14px; left: 14px;
  background: var(--signal); color: #2b1706;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 6px 12px; border-radius: 999px; box-shadow: var(--shadow);
}
.post-card-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 24px; flex: 1; }
.post-card .meta-date { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
.post-card h2 { font-size: 19px; line-height: 1.28; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-card h2 a { text-decoration: none; color: var(--ink); }
.post-card h2 a:hover { color: var(--primary-deep); }
:root[data-theme="dark"] .post-card h2 a:hover { color: var(--primary); }
.post-card .excerpt {
  color: var(--muted); font-size: 14.5px; line-height: 1.55; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post-card .excerpt p { margin: 0; }

.no-results p { color: var(--muted); margin: 10px 0 22px; }
.no-results .search-form { max-width: 420px; }

.archive-header { padding: 56px 0 0; }
.archive-header .eyebrow { margin-bottom: 10px; }
.archive-header h1 { font-size: clamp(26px, 3.4vw, 36px); }
.archive-header .archive-description { color: var(--muted); margin-top: 10px; max-width: 60ch; }

/* Pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; padding-top: 20px; flex-wrap: wrap; }
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px;
  border-radius: 8px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 14px;
}
.pagination a:hover { border-color: var(--primary); color: var(--primary-deep); }
.pagination .current { background: var(--primary); border-color: var(--primary); color: var(--paper); font-weight: 600; }
:root[data-theme="dark"] .pagination .current { color: #04201d; }

/* =============================================================
   Single post
   ============================================================= */
.single-post { padding: 56px 0 0; }
.page-header { padding-top: 56px; margin-bottom: 32px; }
.post-header { max-width: 720px; margin: 0 auto 40px; text-align: left; }
.post-header .eyebrow { margin-bottom: 14px; display: inline-block; }
.post-header h1 { font-size: clamp(30px, 4.4vw, 44px); line-height: 1.12; margin-bottom: 18px; }
.post-header .meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.post-header .meta-row .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); }
.post-header .author { display: flex; align-items: center; gap: 8px; }
.post-header .author img { width: 22px; height: 22px; border-radius: 50%; }
.post-thumb { max-width: 900px; margin: 0 auto 44px; padding: 0 28px; }
.post-thumb img { width: 100%; aspect-ratio: 16/8; object-fit: cover; box-shadow: var(--shadow); }

.entry-content { max-width: 720px; margin: 0 auto; font-size: 18px; line-height: 1.75; padding: 0 28px 8px; }
.entry-content > * + * { margin-top: 1.3em; }
.entry-content h2 { font-size: 27px; margin-top: 1.8em; }
.entry-content h3 { font-size: 21px; margin-top: 1.6em; }
.entry-content p { margin: 0; }
.entry-content a { color: var(--primary-deep); text-decoration-color: var(--line); text-underline-offset: 3px; }
:root[data-theme="dark"] .entry-content a { color: var(--primary); }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content li + li { margin-top: 0.5em; }
.entry-content blockquote {
  margin: 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--signal);
  font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--ink);
}
.entry-content figure { margin: 0; }
.entry-content figcaption { font-size: 13.5px; color: var(--muted); margin-top: 8px; text-align: center; }
.entry-content code { background: color-mix(in srgb, var(--ink) 6%, transparent); padding: 2px 6px; border-radius: 5px; font-size: 0.9em; }
.entry-content pre { background: color-mix(in srgb, var(--ink) 6%, transparent); padding: 18px; border-radius: 10px; overflow-x: auto; }
.entry-content pre code { background: none; padding: 0; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: 15px; }
.entry-content table :is(td, th) { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.entry-content hr { border: none; border-top: 1px solid var(--line); }
.entry-content .wp-caption-text { font-size: 13.5px; color: var(--muted); text-align: center; margin-top: 6px; }

.disclaimer-note {
  max-width: 720px; margin: 40px auto 0; padding: 16px 18px; border-radius: 10px;
  background: color-mix(in srgb, var(--signal) 10%, transparent); border: 1px solid color-mix(in srgb, var(--signal) 30%, transparent);
  font-size: 13.5px; color: var(--muted); line-height: 1.6;
}
@media (max-width: 776px) { .disclaimer-note { margin-left: 28px; margin-right: 28px; } }

.tag-list { max-width: 720px; margin: 40px auto 0; display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 776px) { .tag-list { margin-left: 28px; margin-right: 28px; } }
.tag-list a {
  font-size: 13px; text-decoration: none; color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 13px; transition: border-color .15s, color .15s;
}
.tag-list a:hover { border-color: var(--primary); color: var(--primary-deep); }
:root[data-theme="dark"] .tag-list a:hover { color: var(--primary); }

/* Author box */
.author-box {
  max-width: 720px; margin: 44px auto 0; padding: 22px; border-radius: 14px;
  background: var(--paper-raised); border: 1px solid var(--line); display: flex; gap: 16px; align-items: flex-start;
}
@media (max-width: 776px) { .author-box { margin-left: 28px; margin-right: 28px; } }
.author-box img { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; }
.author-box .name { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.author-box .bio { font-size: 14px; color: var(--muted); margin: 0; }

/* Post nav (prev/next) */
.post-nav { max-width: 720px; margin: 44px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 776px) { .post-nav { margin-left: 28px; margin-right: 28px; } }
.post-nav a {
  display: block; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none;
  background: var(--paper-raised); transition: border-color .15s;
}
.post-nav a:hover { border-color: var(--primary); }
.post-nav .dir { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 6px; display: block; }
.post-nav .title { font-family: var(--font-display); font-size: 15.5px; color: var(--ink); }
.post-nav .next { text-align: right; }

/* Related posts */
.related-posts { border-top: 1px solid var(--line); margin-top: 64px; padding: 56px 0 0; }
.related-posts .section-head { max-width: 720px; margin: 0 auto 28px; padding: 0 28px; }
.related-posts .section-head h2 { font-size: 22px; }
.related-grid { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 0 28px; }
.related-card { text-decoration: none; color: inherit; }
.related-card img { aspect-ratio: 4/3; object-fit: cover; margin-bottom: 12px; box-shadow: var(--shadow); }
.related-card h3 { font-size: 16px; line-height: 1.3; color: var(--ink); }
.related-card:hover h3 { color: var(--primary-deep); }
:root[data-theme="dark"] .related-card:hover h3 { color: var(--primary); }
@media (max-width: 760px) { .related-grid { grid-template-columns: 1fr; } }

/* CTA band — same component as marketing/index.html */
.cta-band {
  margin-top: 64px; padding: 48px 0; text-align: center;
  background: linear-gradient(155deg, var(--primary), var(--primary-deep)); color: #f5f3ee;
}
:root[data-theme="dark"] .cta-band { color: #04201d; }
.cta-band h2 { font-size: clamp(22px, 3vw, 30px); margin-bottom: 10px; color: inherit; }
.cta-band p { margin: 0 0 22px; opacity: 0.92; }
.cta-band .btn-primary { background: #04201d; color: #f5f3ee; }
:root[data-theme="dark"] .cta-band .btn-primary { color: var(--ink); background: var(--paper); }

/* =============================================================
   Sidebar & widgets
   ============================================================= */
.widget-area { display: flex; flex-direction: column; gap: 32px; }
.widget { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.widget h2, .widget .widget-title { font-family: var(--font-body); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 600; margin-bottom: 14px; }
.widget ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.widget li a { text-decoration: none; color: var(--ink); font-size: 14.5px; }
.widget li a:hover { color: var(--primary-deep); }
:root[data-theme="dark"] .widget li a:hover { color: var(--primary); }
.widget_search .search-form { display: flex; }

/* =============================================================
   Search form
   ============================================================= */
.search-form { display: flex; gap: 8px; }
.search-form input[type="search"] {
  flex: 1; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); font-size: 14.5px; font-family: var(--font-body);
}
.search-form input[type="search"]:focus { outline: none; border-color: var(--primary); }
.search-form button {
  padding: 10px 16px; border-radius: 8px; border: none; background: var(--primary); color: var(--paper);
  font-weight: 600; cursor: pointer; font-size: 14.5px;
}

/* =============================================================
   Comments
   ============================================================= */
.comments-area { max-width: 720px; margin: 64px auto 0; padding: 0 28px; }
.comments-title { font-size: 22px; margin-bottom: 28px; }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list .children { list-style: none; margin: 0; padding-left: 36px; }
.comment-body { padding: 22px 0; border-top: 1px solid var(--line); }
.comment-author-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.comment-author-row img { width: 34px; height: 34px; border-radius: 50%; }
.comment-author-row .fn { font-weight: 700; font-size: 14.5px; font-style: normal; }
.comment-metadata { font-size: 12.5px; color: var(--muted); }
.comment-content p { margin: 0 0 0.8em; font-size: 15px; }
.comment-reply-link {
  font-size: 12.5px; font-weight: 600; color: var(--primary-deep); text-decoration: none;
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px;
}
:root[data-theme="dark"] .comment-reply-link { color: var(--primary); }
.trackback, .pingback { padding: 14px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }

.comment-respond {
  margin-top: 40px; padding: 26px; border-radius: 14px; background: var(--paper-raised); border: 1px solid var(--line);
}
.comment-reply-title { font-size: 18px; margin-bottom: 16px; }
.comment-form p { margin: 0 0 14px; }
.comment-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--muted); }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
  width: 100%; padding: 11px 13px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 14.5px;
}
.comment-form textarea { resize: vertical; }
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--primary); }
.comment-form .form-submit { margin-bottom: 0; }
.comment-form-cookies-consent { display: flex; align-items: center; gap: 8px; }
.comment-form-cookies-consent label { margin: 0; font-weight: 400; }
.comment-notes, .logged-in-as { font-size: 13.5px; color: var(--muted); }

/* =============================================================
   404
   ============================================================= */
.error-404 { padding: 100px 0; text-align: center; }
.error-404 .eyebrow { justify-content: center; display: block; margin-bottom: 16px; }
.error-404 h1 { font-size: clamp(32px, 5vw, 52px); margin-bottom: 14px; }
.error-404 p { color: var(--muted); font-size: 16px; max-width: 50ch; margin: 0 auto 30px; }
.error-404 .search-form { max-width: 420px; margin: 0 auto 24px; }
.error-404 .noise-line { width: 100%; max-width: 420px; height: 40px; margin: 0 auto 8px; display: block; }
.error-404 .noise-line path { fill: none; stroke: var(--line); stroke-width: 2; }
.error-404 .noise-line path.break { stroke: var(--signal); }

/* =============================================================
   Footer — identical component to marketing/index.html
   ============================================================= */
footer.site-footer { border-top: 1px solid var(--line); padding: 44px 0 60px; margin-top: 40px; }
.footer-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.footer-grid .brand { font-size: 16px; }
.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 12px; font-weight: 600; }
.footer-col a { display: block; text-decoration: none; color: var(--ink); font-size: 14px; margin-bottom: 9px; opacity: 0.85; }
.footer-col a:hover { opacity: 1; color: var(--primary); }
.legal-note { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); line-height: 1.7; }

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 900px) {
  /* minmax(0, 1fr), not bare 1fr — a plain 1fr track is really
     minmax(auto, 1fr), whose auto minimum lets wide content (the card's
     featured image) force the track past the container's actual width
     instead of shrinking to fit. That's what was pushing .post-card 28px
     past the right edge on mobile while the left inset stayed correct. */
  .content-layout.has-sidebar { grid-template-columns: minmax(0, 1fr); }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  nav.links { display: none; }
  .post-nav { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .author-box { flex-direction: column; }
}