/* =========================================================
   SOLOPOST — design tokens
   Paper background, pine-green accent, mustard for category
   marks. Serif for anything you'd read; sans for anything
   you'd click.
   ========================================================= */

:root {
  --paper: #efebe2;
  --paper-raised: #fbf9f4;
  --ink: #211f1c;
  --ink-soft: #6b6558;
  --ink-faint: #948d7c;
  --pine: #2b5d4b;
  --pine-deep: #1e4436;
  --mustard: #b9832a;
  --rule: #ddd5c1;
  --rule-strong: #c9bfa5;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --max-width: 1100px;
  --content-width: 680px;
  --radius: 3px;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  z-index: 100;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 12px;
}

a {
  color: var(--pine-deep);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-decoration-color: var(--mustard);
  text-decoration-thickness: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--pine);
  outline-offset: 2px;
}

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

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(18px, 5vw, 24px);
}

/* ---------- masthead ---------- */

.masthead {
  padding: 40px 0 20px;
  border-bottom: 2px solid var(--ink);
}

.masthead-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.site-brand {
  min-width: 0;
}

.site-logo-link {
  display: flex;
  align-items: center;
  gap: 14px;
  color: inherit;
  text-decoration: none;
}

.site-logo-link:hover {
  text-decoration: none;
}

.site-logo-icon {
  flex: none;
  border-radius: 10px;
  display: block;
}

.site-name {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 2.9rem);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.site-tagline {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  margin: 6px 0 0;
  font-size: 1.05rem;
}

.site-nav {
  display: flex;
  gap: 24px;
  font-size: 0.95rem;
}

.site-nav a {
  color: var(--ink);
  border-bottom: 1px solid transparent;
  padding: 10px 2px;
  display: inline-block;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  border-bottom-color: var(--mustard);
  text-decoration: none;
}

/* ---------- search ---------- */

.search-panel {
  margin: 26px 0 0;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 13px 16px;
  max-width: 520px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-box:focus-within {
  border-color: var(--pine);
  box-shadow: 0 0 0 3px rgba(43, 93, 75, 0.12);
}

.search-box svg {
  flex: 0 0 auto;
  color: var(--ink-faint);
}

.search-box input {
  border: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  width: 100%;
  min-height: 24px;
}

.search-box input:focus {
  outline: none;
}

.search-box input::-webkit-search-cancel-button {
  cursor: pointer;
}

.search-meta {
  margin: 10px 2px 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
  min-height: 1.2em;
}

.search-meta mark {
  background: none;
  color: var(--pine-deep);
  font-weight: 600;
}

/* ---------- layout: sidebar + main content ---------- */

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 44px;
  align-items: start;
  margin-top: 30px;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 30px;
  position: sticky;
  top: 24px;
}

.widget {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px 18px 20px;
}

.widget-title {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}

.cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cat-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink);
  padding: 9px 10px;
  cursor: pointer;
  text-align: left;
}

.cat-btn:hover {
  background: #e7e2d3;
}

.cat-btn.is-active {
  background: var(--pine);
  color: var(--paper-raised);
}

.cat-btn.is-active .cat-count {
  color: var(--paper-raised);
  opacity: 0.85;
}

.cat-count {
  font-size: 0.8rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-pill-btn {
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  cursor: pointer;
  font-family: var(--sans);
}

.tag-pill-btn:hover {
  background: var(--mustard);
  border-color: var(--mustard);
  color: #2a1f08;
}

.about-widget p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* ---------- section headers ---------- */

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 46px 0 18px;
}

.section-head h2 {
  font-family: var(--serif);
  font-size: 1.4rem;
  margin: 0;
  font-weight: 600;
}

/* ---------- featured post ---------- */

.featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  align-items: center;
  margin-top: 34px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--rule);
}

.featured-image {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  position: relative;
}

.featured-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--pine);
  color: var(--paper-raised);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  z-index: 1;
}

.featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eyebrow {
  font-family: var(--serif);
  font-style: italic;
  color: var(--mustard);
  font-size: 1rem;
  margin: 0 0 6px;
}

.featured h1,
.featured h2.card-title-lg {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  line-height: 1.15;
  margin: 0 0 12px;
  font-weight: 600;
}

.dek {
  color: var(--ink-soft);
  font-size: 1.05rem;
  margin: 0 0 14px;
  max-width: 46ch;
}

.byline {
  font-size: 0.85rem;
  color: var(--ink-faint);
}

/* ---------- card grid ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 28px;
  margin-top: 4px;
}

.card {
  display: block;
  color: var(--ink);
  border-radius: var(--radius);
  padding: 10px;
  margin: -10px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(33, 31, 28, 0.08);
}

.featured-link:hover {
  box-shadow: none;
  transform: none;
}

.card-image {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--rule);
  margin-bottom: 14px;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.card:hover .card-image img {
  transform: scale(1.03);
}

.card .eyebrow {
  font-size: 0.92rem;
  margin-bottom: 4px;
}

.card h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.25;
  margin: 0 0 8px;
  font-weight: 600;
}

.card:hover h3 {
  text-decoration: underline;
  text-decoration-color: var(--mustard);
  text-decoration-thickness: 2px;
}

.card p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0 0 10px;
  max-width: 42ch;
}

.card .byline {
  margin: 0;
}

.empty-state {
  grid-column: 1 / -1;
  padding: 60px 20px;
  text-align: center;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 1.15rem;
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
}

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

.site-footer {
  margin-top: 70px;
  padding: 26px 0 50px;
  border-top: 1px solid var(--rule);
  color: var(--ink-faint);
  font-size: 0.85rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 14px 0;
}

.footer-links a {
  color: var(--ink-soft);
}

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

/* ---------- cookie / tracking notice ---------- */

.cookie-notice {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 100;
  max-width: 560px;
  margin: 0 auto;
  background: var(--ink, #23291f);
  color: #f3f1ea;
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  font-size: 0.85rem;
}

/* Without this, the `display: flex` above always wins over the browser's
   default `[hidden] { display: none }` rule (author CSS beats user-agent
   CSS regardless of specificity), so setting el.hidden = true in
   cookie-notice.js visually did nothing -- the banner just kept showing
   no matter how many times "Got it" was clicked. */
.cookie-notice[hidden] {
  display: none;
}

.cookie-notice p {
  margin: 0;
  flex: 1 1 260px;
  line-height: 1.5;
}

.cookie-notice a {
  color: #f3f1ea;
  text-decoration: underline;
}

.cookie-accept-btn {
  flex: 0 0 auto;
  background: #efebe2;
  color: #23291f;
  border: none;
  border-radius: 999px;
  padding: 8px 18px;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.cookie-accept-btn:hover {
  opacity: 0.9;
}

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

.post-hero {
  margin-top: 30px;
  border-radius: var(--radius);
  overflow: hidden;
  max-height: 440px;
}

.post-hero img {
  width: 100%;
  height: 440px;
  object-fit: cover;
}

.post-head {
  max-width: var(--content-width);
  margin: 30px auto 0;
}

.post-head h1 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.15;
  margin: 8px 0 12px;
  font-weight: 600;
}

.back-link {
  display: inline-block;
  margin: 26px 0 0;
  padding: 6px 2px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.post-body {
  max-width: var(--content-width);
  margin: 26px auto 0;
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.75;
  color: #2c2a25;
}

.post-body p {
  margin: 0 0 22px;
}

.post-body h2 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  margin: 40px 0 16px;
  color: var(--ink);
}

.post-inline-image {
  margin: 8px 0 30px;
}

.post-inline-image img {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

.post-inline-image figcaption {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink-faint);
  text-align: center;
  margin-top: 8px;
}

.post-tags {
  max-width: var(--content-width);
  margin: 10px auto 40px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tag-pill {
  font-size: 0.82rem;
  color: var(--pine-deep);
  background: #e2ddc9;
  padding: 4px 11px;
  border-radius: 20px;
}

.related {
  max-width: var(--max-width);
  margin: 10px auto 0;
  padding-top: 30px;
  border-top: 1px solid var(--rule);
}

.related h2 {
  font-family: var(--serif);
  font-size: 1.3rem;
  margin: 0 0 20px;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.not-found {
  max-width: var(--content-width);
  margin: 60px auto;
  text-align: center;
  font-family: var(--serif);
}

.not-found h1 {
  font-size: 1.8rem;
}

/* ---------- responsive ---------- */

/* Tablet / small laptop */
@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .sidebar {
    display: contents;
  }

  .category-widget {
    order: 1;
  }

  .main-content {
    order: 2;
  }

  .tag-widget {
    order: 3;
  }

  .about-widget {
    order: 4;
  }

  .cat-list {
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }

  .cat-list li {
    flex: 0 0 auto;
  }

  .cat-btn {
    width: auto;
    white-space: nowrap;
  }

  .featured {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .featured-image {
    aspect-ratio: 16 / 9;
  }

  .grid,
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 22px;
  }

  .section-head {
    margin: 38px 0 16px;
  }
}

/* Phones */
@media (max-width: 640px) {
  .grid,
  .related-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .masthead {
    padding-top: 24px;
    padding-bottom: 16px;
  }

  .masthead-row {
    gap: 14px;
  }

  .site-nav {
    gap: 20px;
  }

  .search-panel {
    margin-top: 20px;
  }

  .search-box {
    max-width: 100%;
  }

  .post-hero,
  .post-hero img {
    height: 200px;
    max-height: 200px;
  }

  .post-body {
    font-size: 1.08rem;
    line-height: 1.7;
  }

  .site-footer {
    margin-top: 50px;
    padding-bottom: max(30px, env(safe-area-inset-bottom));
  }
}

/* Very small phones */
@media (max-width: 380px) {
  .site-name {
    font-size: 1.7rem;
  }

  .site-logo-icon {
    width: 34px;
    height: 34px;
  }

  .card h3 {
    font-size: 1.1rem;
  }
}

/* Large desktop: give the grid a little more air */
@media (min-width: 1300px) {
  .wrap {
    max-width: 1180px;
  }
}

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

/* =========================================================
   AD SLOT
   Empty by default (no border, no padding, no "ad goes here"
   placeholder) -- ads.js removes this element outright when
   no AdSense code or image ad is configured, so a reader never
   sees a gap. These rules only ever apply once .has-ad is set.
   ========================================================= */

.ad-slot {
  min-height: 0;
}

.ad-slot.has-ad {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(33, 31, 28, 0.07);
}

.ad-slot.has-ad::before {
  content: "Advertisement";
  display: block;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
}

.ad-image-link {
  display: block;
}

.ad-image-link img {
  max-width: 100%;
  max-height: 250px;
  width: auto;
  height: auto;
  border-radius: calc(var(--radius) - 2px);
  display: block;
  margin: 0 auto;
}

.ad-slot-inline.has-ad {
  margin: 8px 0 32px;
}

/* Banner placements (homepage top, footer) -- capped to a sane ad-unit
   width and centered, rather than stretching the ad card across the
   full page width regardless of how small the actual creative is. */
.ad-slot-banner {
  margin-bottom: 0;
}

.ad-slot-banner.has-ad {
  max-width: 760px;
  margin: 0 auto 28px;
}

.site-footer .ad-slot-banner.has-ad {
  margin: 0 auto 20px;
}

/* In-feed placement -- lives inside the .grid, so it needs to span every
   column regardless of how many the grid currently has, and look like a
   banner rather than stretching to card height. */
.ad-slot-infeed {
  grid-column: 1 / -1;
}

.ad-slot-infeed.has-ad {
  max-width: 760px;
  margin: 6px auto;
}

/* Sticky bottom bar -- pinned to the viewport, not the document, so it
   stays put while scrolling. Sits above everything else on the page. The
   close button lives in the same fixed wrapper so it's always reachable
   even if the ad creative itself is tall. */
.sticky-ad-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 40px 8px 12px;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -2px 10px rgba(33, 31, 28, 0.08);
}

.ad-slot-sticky {
  width: 100%;
  max-width: 760px;
  text-align: center;
}

.ad-slot-sticky.has-ad {
  padding: 8px;
  border: none;
  box-shadow: none;
  background: none;
}

.ad-slot-sticky.has-ad::before {
  display: none;
}

.ad-slot-sticky .ad-image-link img {
  max-height: 90px;
}

.sticky-ad-close-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  color: var(--ink-soft);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

/* Leaves room at the bottom of the page so the fixed bar never covers the
   footer's own content/links. Only applied while the bar can still be
   showing -- JS removes #sticky-ad-wrap entirely once dismissed or once
   we know there's no ad configured, at which point this class should be
   removed too so the extra padding doesn't linger. */
body:has(#sticky-ad-wrap) {
  padding-bottom: 70px;
}