:root {
  --text: #1a1a1a;
  --muted: #6b6b6b;
  --line: #e8e8e8;
  --surface: #ffffff;
  --header-bg: #ffffff;
  --body-bg: #ffffff;
  --footer-bg: #1a1a1a;
  --primary: #1a1a1a;
  --accent: #1a1a1a;
  --accent-strong: #0d0d0d;
  --focus-ring: #2563eb;
  --font-sans: Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body: Verdana, 'system-ui', -apple-system, 'Segoe UI', sans-serif;
  --wrap-max: 1280px;
  --gutter: clamp(16px, 4vw, 32px);
  --touch-target: 44px;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--body-bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

main {
  flex: 1 0 auto;
  min-width: 0;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover,
a:focus {
  color: var(--primary);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

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

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

.skip-link:focus {
  width: auto;
  height: auto;
  clip: auto;
  top: 10px;
  left: 10px;
  z-index: 1000;
  background: var(--surface);
  padding: 8px 12px;
}

.top-line {
  height: 4px;
  background: var(--accent-strong);
}

.site-header {
  background: var(--header-bg);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 76px;
  gap: 20px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.site-branding a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--text);
  min-width: 0;
}

.site-branding a:hover,
.site-branding a:focus {
  color: var(--primary);
}

.site-logo {
  max-width: 230px;
  max-height: 76px;
  flex-shrink: 0;
}

.site-title {
  font-size: clamp(20px, 1.4vw + 14px, 28px);
  font-weight: 700;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}

.site-logo + .site-title {
  display: none;
}

.site-slogan {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

/* Primary navigation, no-JS fallback */
.site-nav-bar {
  background: var(--accent-strong);
}

.nav-bar-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: var(--touch-target);
  padding: 10px 16px;
  background: transparent;
  border: 0;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.nav-toggle-icon {
  display: inline-block;
  width: 18px;
  height: 2px;
  background: currentColor;
  position: relative;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
}

.nav-toggle-icon::before {
  top: -6px;
}

.nav-toggle-icon::after {
  top: 6px;
}

.primary-navigation {
  min-width: 0;
}

.primary-navigation ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.primary-navigation a {
  display: block;
  min-height: var(--touch-target);
  display: flex;
  align-items: center;
  padding: 12px 16px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

.primary-navigation a:hover,
.primary-navigation a:focus {
  color: #ffffff;
  background: var(--primary);
}

/* Breadcrumbs */
.breadcrumbs {
  padding-top: 18px;
  padding-bottom: 6px;
  font-size: 12px;
  color: var(--muted);
  text-align: left;
  overflow-wrap: anywhere;
}

.breadcrumbs a {
  color: var(--muted);
}

.breadcrumbs a:hover {
  color: var(--primary);
}

.breadcrumb-sep {
  margin: 0 8px;
  color: #ccc;
}

.breadcrumb-current {
  color: var(--text);
}

/* Featured grid */
.featured-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 4px;
  margin: 28px 0 36px;
}

.featured-grid.has-secondary {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
}

.featured-grid .secondary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  min-width: 0;
}

.hero-card,
.small-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  background-color: #2a2a2a;
  min-height: clamp(220px, 34vw, 440px);
}

.small-card {
  min-height: clamp(120px, 12vw, 200px);
}

.card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 16 / 9;
}

.hero-card::after,
.small-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-card::after {
  background: linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.78));
}

.small-card::after {
  background: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.78));
}

.card-link {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: inherit;
  height: 100%;
  min-width: 0;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(16px, 2vw, 24px);
  color: #ffffff;
}

.card-link:hover,
.card-link:focus {
  color: #ffffff;
}

.card-link h1,
.card-link h2 {
  margin: 10px 0 4px;
  color: #ffffff;
  line-height: 1.15;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  overflow-wrap: anywhere;
}

/* Sized by the card's role (hero vs. small card), not by heading level, so
   a category hero using an <h2> still receives the same visual weight as
   the home hero's <h1>. */
.hero-card .card-link h1,
.hero-card .card-link h2 {
  font-size: clamp(24px, 4vw, 36px);
}

.small-card .card-link h1,
.small-card .card-link h2 {
  font-size: clamp(16px, 2vw, 19px);
}

.feed-meta {
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Category pill */
.category-pill,
.feed-meta a {
  display: inline-block;
  max-width: 100%;
  background: var(--accent-strong);
  color: #ffffff;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  width: max-content;
  overflow-wrap: anywhere;
}

.article-category a {
  display: inline-block;
  min-height: var(--touch-target);
  align-items: center;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

.article-category a:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* Content layout */
.content-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
  margin: 32px auto 48px;
}

.content-layout.has-sidebar {
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
}

.home-layout {
  margin-top: 0;
}

.article-main {
  min-width: 0;
}

.article-category {
  margin-bottom: 14px;
}

.single-post {
  --font-sans: Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.article-header h1 {
  margin: 0 0 7px;
  font-family: var(--font-sans);
  font-size: clamp(24px, 2vw + 16px, 32px);
  font-weight: 400;
  line-height: 1.2;
  color: #111111;
  overflow-wrap: anywhere;
}

.article-featured-image {
  margin: 28px 0;
}

.article-featured-image figcaption {
  color: var(--muted);
  font-size: 13px;
  margin-top: 8px;
  line-height: 1.5;
}

/* Article body */
.article-body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: #222;
  overflow-wrap: anywhere;
  min-width: 0;
}

.article-body img {
  max-width: 100%;
  height: auto;
  display: block;
}

.article-body figure {
  margin: 0 0 1.5em;
  text-align: center;
  max-width: 100%;
}

.article-body figure img {
  margin: 0 auto;
}

.article-body iframe {
  max-width: 100%;
  width: 100%;
  height: auto;
  min-height: 200px;
  border: 0;
  display: block;
}

.article-body iframe[src*='youtube.com'],
.article-body iframe[src*='youtube-nocookie.com'],
.article-body iframe[src*='vimeo.com'],
.article-body iframe[src*='player.vimeo'],
.article-body .wp-block-embed__wrapper iframe,
.article-body .video-embed iframe {
  aspect-ratio: 16 / 9;
  min-height: 0;
}

.article-body video,
.article-body embed,
.article-body object,
.article-body svg,
.article-body canvas {
  max-width: 100%;
  height: auto;
}

.article-body table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.article-body pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre;
}

.article-body code {
  overflow-wrap: anywhere;
}

.article-body form {
  max-width: 100%;
}

.article-body input,
.article-body select,
.article-body textarea,
.article-body button {
  font: inherit;
  font-size: 16px;
  max-width: 100%;
  min-height: var(--touch-target);
  box-sizing: border-box;
}

.article-body p {
  margin: 0 0 26px;
}

.article-body h2,
.article-body h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  line-height: 1.25;
  color: var(--text);
  margin: 1.6em 0 0.6em;
  overflow-wrap: anywhere;
}

.article-body h2 {
  font-size: clamp(21px, 1.6vw + 14px, 26px);
}

.article-body h3 {
  font-size: clamp(18px, 1.2vw + 12px, 21px);
}

.article-body ul,
.article-body ol {
  margin-bottom: 1.4em;
  padding-left: 24px;
}

.article-body li {
  margin-bottom: 0.4em;
}

.article-body a {
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

/* Article footer */
.article-footer {
  margin-top: 40px;
  padding-top: 24px;
  background: #fff;
}

.article-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 28px;
  min-width: 0;
}

.article-terms a {
  color: var(--text);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.article-terms a:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* Post navigation */
.post-navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.post-navigation a {
  border: 1px solid var(--line);
  padding: 18px;
  border-radius: 4px;
  background: var(--surface);
  min-width: 0;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.post-navigation a:hover {
  border-color: #bbb;
  background: #fafafa;
}

.post-navigation small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}

.post-navigation strong {
  display: block;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.post-navigation .previous-post:only-child,
.post-navigation .next-post:only-child {
  grid-column: 1 / -1;
}

/* Related posts */
/* This section is a direct flex-item child of <body> (display:flex;
   flex-direction:column). Horizontal auto margins on a flex item disable
   cross-axis stretch and shrink the item to its content width, which
   silently re-centers "You May Also Like" instead of letting it span full
   width. Centering/max-width is handled by the nested .wrap div instead,
   exactly like the header/footer already do. */
.related-posts {
  margin: 0 0 48px;
}

.related-posts-heading {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--accent-strong);
  color: var(--accent-strong);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  justify-content: start;
  justify-items: stretch;
  gap: 24px;
}

.related-card a {
  display: block;
  color: var(--text);
  min-width: 0;
}

.related-card a:hover,
.related-card a:focus {
  color: var(--primary);
}

.related-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 12px;
}

.related-card-body h3 {
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.related-card-body h3:hover {
  color: var(--primary);
}

.related-card-body time {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

/* Feed */
/* The image column is always reserved (the anchor renders even when the
   item has no image) so every feed item's text starts at the same horizontal
   position instead of jumping to the left edge for image-less posts. */
.feed-item {
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
  gap: clamp(14px, 2.5vw, 24px);
  padding: 0 0 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

.feed-image {
  min-width: 0;
}

.feed-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 3px;
}

.feed-copy {
  min-width: 0;
}

.feed-copy h2 {
  margin: 8px 0;
  font-size: clamp(19px, 1.6vw + 14px, 22px);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.feed-copy h2 a:hover {
  color: var(--primary);
}

.feed-copy p {
  color: #555;
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.55;
}

.read-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target);
  border: 1px solid var(--primary);
  padding: 0 18px;
  background: var(--primary);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.read-more:hover,
.read-more:focus {
  border-color: var(--text);
  background: var(--text);
  color: #ffffff;
}

.paging-navigation {
  margin: 30px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Pagination links */
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target);
  min-width: var(--touch-target);
  padding: 0 14px;
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  border-radius: 3px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.page-numbers:hover,
.page-numbers:focus {
  border-color: var(--primary);
  background: #f5f5f5;
  color: var(--primary);
}

.page-numbers.current {
  background: var(--accent-strong);
  color: #ffffff;
  border-color: var(--accent-strong);
}

.page-numbers.dots {
  border: none;
  padding: 0 4px;
  color: var(--muted);
  background: none;
  min-width: auto;
}

.page-numbers.disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* Category page */
.category-layout {
  margin-top: 0;
}

.category-header {
  margin: 28px 0 0;
}

.category-title {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-size: clamp(26px, 3vw + 12px, 40px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

/* Static page (about / contact / privacy) */
.page-layout {
  max-width: 760px;
  margin: 48px auto 48px;
  padding-top: 8px;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.page-layout .article-main {
  max-width: none;
}

.page-layout .article-header {
  padding-bottom: 20px;
  margin-bottom: 28px;
}

.page-layout .article-header h1 {
  font-family: var(--font-sans);
  font-size: clamp(26px, 3vw + 14px, 40px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  overflow-wrap: anywhere;
}

.page-layout .article-body {
  font-family: var(--font-body);
  font-size: clamp(16px, 0.4vw + 15px, 18px);
  line-height: 1.8;
  color: #222;
}

.page-layout .article-body > p:first-child {
  font-size: clamp(17px, 0.5vw + 16px, 20px);
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 1.4em;
}

.page-layout .article-body h1,
.page-layout .article-body h2,
.page-layout .article-body h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--text);
  margin: 1.6em 0 0.6em;
}

.page-layout .article-body h1 {
  font-size: clamp(23px, 1.6vw + 14px, 28px);
}
.page-layout .article-body h2 {
  font-size: clamp(21px, 1.6vw + 14px, 26px);
  letter-spacing: -0.01em;
}
.page-layout .article-body h3 {
  font-size: clamp(18px, 1.2vw + 12px, 21px);
}

.page-layout .article-body ul,
.page-layout .article-body ol {
  margin-bottom: 1.4em;
  padding-left: 24px;
}

.page-layout .article-body li {
  margin-bottom: 0.4em;
}

.page-layout .article-body li::marker {
  color: var(--muted);
}

.page-layout .article-body a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.page-layout .article-body a:hover {
  color: var(--accent-strong);
}

.page-layout .article-body blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--text);
  font-style: italic;
  color: var(--muted);
}

.empty-state {
  text-align: center;
  padding: 48px 20px;
  border: 1px solid var(--line);
  border-radius: 4px;
  margin-bottom: 28px;
}

.empty-state p {
  color: var(--muted);
  font-size: 15px;
  margin: 0 0 18px;
}

/* Sidebar */
.sidebar {
  min-width: 0;
}

.sidebar-card {
  border-top: 3px solid var(--accent-strong);
  padding-top: 14px;
}

.most-read-card {
  border-top-color: var(--primary);
}

.sidebar-card.most-read-card h2 {
  color: var(--primary);
}

.sidebar-card h2 {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--accent-strong);
}

.sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-list li {
  padding: 14px 0;
}

.sidebar-list li:first-child {
  padding-top: 0;
}

.sidebar-list a {
  color: var(--text);
  font-weight: 700;
  line-height: 1.3;
  font-size: 14px;
}

.sidebar-list a:hover {
  color: var(--primary);
}

.sidebar-item-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}

/* Sidebar with thumbnails (post page) */
.sidebar-item-with-thumb a {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.sidebar-thumb {
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: 4px;
}

.sidebar-list .post-date {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  margin-top: 4px;
}

/* Footer */
.site-footer {
  background: var(--footer-bg);
  color: #cccccc;
  margin-top: 48px;
  padding: 40px 0;
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
}

.footer-inner {
  display: grid;
  gap: 12px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  color: #ffffff;
  margin-right: 12px;
  padding: 4px 6px;
  font-size: 13px;
}

.footer-links a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.footer-copy,
.footer-site {
  color: #999;
  font-size: 12px;
}

/* Scroll to top: fixed with safe-area insets on larger screens, moves into
   normal document flow on narrow phones so it can never overlap content. */
.scroll-top-wrap {
  position: fixed;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  z-index: 20;
}

.scroll-top {
  display: grid;
  place-items: center;
  width: var(--touch-target);
  height: var(--touch-target);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  font-weight: 700;
  font-size: 18px;
  transition: background 0.15s ease;
}

.scroll-top:hover {
  color: #ffffff;
  background: #000000;
}

/* Responsive breakpoints */

/* Sidebar stacks and navigation collapses at the tablet boundary so feed
   copy never compresses next to a fixed-width sidebar. */
@media (max-width: 1024px) {
  .featured-grid.has-secondary,
  .content-layout.has-sidebar {
    grid-template-columns: 1fr;
  }

  .featured-grid .secondary-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .nav-bar-inner {
    position: relative;
  }

  html.js-ready .nav-toggle[hidden] {
    display: none;
  }

  html.js-ready .nav-toggle:not([hidden]) {
    display: inline-flex;
  }

  html.js-ready .primary-navigation {
    flex-basis: 100%;
    display: none;
  }

  html.js-ready .primary-navigation.is-open {
    display: block;
  }

  html.js-ready .primary-navigation ul {
    flex-direction: column;
  }

  html.js-ready .primary-navigation a {
    padding: 12px 4px;
  }
}

@media (max-width: 768px) {
  .header-inner {
    align-items: flex-start;
  }

  .related-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 16px;
  }

  .post-navigation {
    grid-template-columns: 1fr;
  }

  .feed-item {
    grid-template-columns: 1fr;
  }

  .related-grid {
    grid-template-columns: 1fr;
  }

  .scroll-top-wrap {
    position: static;
    display: flex;
    justify-content: center;
    padding: 16px var(--gutter) 0;
  }

  .scroll-top {
    width: auto;
    min-width: var(--touch-target);
    padding: 0 20px;
  }
}

@media (max-width: 480px) {
  .featured-grid .secondary-grid {
    grid-template-columns: 1fr;
  }

  .card-link {
    padding: 16px;
  }

  .sidebar-item-with-thumb a {
    grid-template-columns: 80px minmax(0, 1fr);
  }

  .sidebar-thumb {
    width: 80px;
    height: 60px;
  }

  .footer-links a {
    margin-right: 0;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

:root { --body-bg: FFFFFF; --header-bg: FFFFFF; --footer-bg: 000000; --primary: 000000; }