/*
Theme Name:  The Thinkerer
Theme URI:   https://thethinkerer.in
Author:      Granville D. Austin
Author URI:  https://thethinkerer.in/about/
Description: A living intellectual ecosystem. To inspire awe by bringing hidden meanings to light.
Version:     1.4.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thinkerer
Tags:        custom-menu, featured-images, responsive-layout, custom-logo
*/

/* ============================================================
   CUSTOM PROPERTIES
   ============================================================ */
:root {
  --parchment:       #FAF7F2;
  --parchment-warm:  #F2EBE0;
  --parchment-deep:  #E7DDD0;

  --sky-peak:        #9DC4D8;
  --sky-mid:         #B8D3E0;
  --sky-horizon:     #D8E8EF;
  --sky-cloud:       #EEF4F8;
  --sky-accent:      #4A7A94;

  --ink:             #1C1810;
  --ink-muted:       #5A5048;
  --ink-faint:       #9A8E82;

  --amber:           #7D5A1E;
  --amber-bg:        #FEF8EE;
  --amber-border:    #EACF90;

  --forest:          #2A5440;
  --forest-bg:       #EDF4EF;
  --forest-border:   #B8D8C8;

  --indigo:          #3A4868;
  --indigo-bg:       #EEF1F8;
  --indigo-border:   #C0CADF;

  --coral:           #7A3C3C;
  --coral-bg:        #F7EEEC;
  --coral-border:    #E4C4BE;

  --dark:            #1C1810;
  --border:          #DDD7CE;
  --border-light:    #EAE4DC;

  --display: 'Cormorant Garamond', Georgia, serif;
  --body:    'Lora', Georgia, serif;

  --max-w:     1100px;
  --content-w: 740px;
  --prose-w:   680px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.site-nav {
  background: var(--dark);
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
  position: sticky;
  top: 0;
  z-index: 200;
  border-bottom: 1px solid #2C2620;
}
.nav-logo {
  font-family: var(--display);
  font-size: 1.175rem;
  color: #F0E8DA;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.nav-logo img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-block;
}
.nav-menu-wrap { display: flex; align-items: center; }
.nav-menu-wrap ul {
  display: flex;
  gap: 2rem;
  list-style: none;
}
.nav-menu-wrap ul a {
  color: #8A7E74;
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--body);
  transition: color 0.2s;
}
.nav-menu-wrap ul a:hover { color: #F0E8DA; text-decoration: none; }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: #8A7E74;
  font-size: 1.5rem;
  padding: 0.25rem;
  line-height: 1;
}

/* ============================================================
   HERO — THE THRESHOLD (front-page only)
   ============================================================ */
.threshold {
  background: linear-gradient(
    180deg,
    var(--sky-peak)    0%,
    var(--sky-mid)    25%,
    var(--sky-horizon) 55%,
    var(--sky-cloud)   75%,
    var(--parchment)  100%
  );
  padding: 5rem 2rem 5.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.threshold::before {
  content: '';
  position: absolute;
  top: 18%; left: 8%;
  width: 220px; height: 70px;
  background: rgba(255,255,255,0.22);
  border-radius: 50%;
  filter: blur(22px);
  pointer-events: none;
}
.threshold::after {
  content: '';
  position: absolute;
  top: 28%; right: 6%;
  width: 280px; height: 80px;
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
  filter: blur(28px);
  pointer-events: none;
}
.threshold-inner {
  position: relative;
  z-index: 1;
  max-width: var(--content-w);
  margin: 0 auto;
}
.threshold-logo {
  width: clamp(140px, 22vw, 220px);
  height: auto;
  margin: 0 auto 2.25rem;
  filter: drop-shadow(0 6px 28px rgba(28,24,16,0.18));
  animation: logo-float 6s ease-in-out infinite;
}
@keyframes logo-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) { .threshold-logo { animation: none; } }

.threshold-eyebrow {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--sky-accent);
  font-family: var(--body);
  margin-bottom: 1.5rem;
}
.threshold-headline {
  font-family: var(--display);
  font-size: clamp(2.4rem, 6.5vw, 4.5rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
}
.threshold-headline em {
  font-style: italic;
  font-weight: 400;
  color: var(--amber);
}
.threshold-sub {
  font-family: var(--display);
  font-size: clamp(1.05rem, 2.5vw, 1.3rem);
  font-style: italic;
  color: var(--ink-muted);
  max-width: 44ch;
  margin: 0 auto 2.75rem;
  line-height: 1.7;
}
.threshold-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}
.threshold-pill {
  text-decoration: none;
  font-size: 0.8rem;
  padding: 0.4rem 1.1rem;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 2rem;
  color: var(--ink-muted);
  font-family: var(--body);
  background: rgba(255,255,255,0.45);
  backdrop-filter: blur(4px);
  transition: all 0.2s;
}
.threshold-pill:hover {
  background: rgba(255,255,255,0.75);
  border-color: var(--sky-accent);
  color: var(--sky-accent);
  text-decoration: none;
}
/* Archive pill: slightly more muted — it's a secondary destination */
.threshold-pill--archive {
  opacity: 0.7;
  font-size: 0.75rem;
}

/* ============================================================
   PAGE BANNER — non-homepage pages
   ============================================================ */
.page-banner {
  background: var(--dark);
  padding: 3.5rem 2rem 3rem;
  text-align: center;
  border-bottom: 1px solid #2C2620;
}
.page-banner h1 {
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 300;
  color: #F0E8DA;
  line-height: 1.15;
  margin-bottom: 0.5rem;
}
.page-banner .banner-meta {
  font-size: 0.8rem;
  color: #5A504A;
  letter-spacing: 0.06em;
}

/* ============================================================
   SHARED SECTION UTILITIES
   ============================================================ */
.section-header { margin-bottom: 2.5rem; }
.section-eyebrow {
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-family: var(--body);
  margin-bottom: 0.6rem;
  display: block;
}
.section-header h2 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 0.3rem;
}
.section-sub {
  font-size: 0.875rem;
  color: var(--ink-faint);
  font-style: italic;
}
.section-rule {
  width: 2.5rem;
  height: 1px;
  margin-top: 1.25rem;
  background: var(--border);
}
.btn-outline {
  display: inline-block;
  padding: 0.55rem 1.4rem;
  border: 1px solid var(--border);
  border-radius: 2rem;
  font-size: 0.875rem;
  color: var(--ink-muted);
  text-decoration: none;
  font-family: var(--body);
  transition: all 0.2s;
}
.btn-outline:hover {
  background: var(--ink);
  color: var(--parchment);
  border-color: var(--ink);
  text-decoration: none;
}

/* ============================================================
   DAILY LIGHT (front-page zone 1)
   ============================================================ */
.daily-light {
  background: var(--amber-bg);
  border-top: 1px solid var(--amber-border);
  border-bottom: 1px solid var(--amber-border);
  padding: 5.5rem 2rem;
  text-align: center;
}
.dl-inner { max-width: var(--content-w); margin: 0 auto; }
.dl-eyebrow {
  font-size: 0.67rem; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--amber);
  font-family: var(--body); margin-bottom: 2.25rem;
}
.dl-type {
  display: inline-block; margin-bottom: 1.5rem;
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--amber); color: white;
  padding: 0.25rem 0.875rem; border-radius: 2rem; font-family: var(--body);
}
.dl-offering {
  font-family: var(--display);
  font-size: clamp(1.7rem, 5vw, 3rem);
  font-weight: 300; font-style: italic;
  line-height: 1.3; color: var(--ink);
  max-width: 32ch; margin: 0 auto 1.5rem;
}
.dl-offering::before { content: '\201C'; }
.dl-offering::after  { content: '\201D'; }
.dl-attribution { font-size: 0.875rem; color: var(--ink-muted); }
.dl-archive {
  display: inline-block; margin-top: 2.5rem;
  font-size: 0.8rem; color: var(--amber); text-decoration: none;
  letter-spacing: 0.05em; border-bottom: 1px solid var(--amber-border);
  padding-bottom: 0.1rem;
}
.dl-archive:hover { border-color: var(--amber); text-decoration: none; }

/* ============================================================
   FISHING NET (front-page zone 2)
   ============================================================ */
.fishing-net { padding: 5.5rem 2rem; max-width: var(--max-w); margin: 0 auto; }
.fishing-net .section-eyebrow { color: var(--forest); }
.fishing-net .section-header h2 { color: var(--forest); }
.fishing-net .section-rule { background: var(--forest-border); }
.captures-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  gap: 1.25rem;
}
.capture-card {
  background: var(--parchment-warm);
  border: 1px solid var(--border);
  border-left: 3px solid var(--forest);
  padding: 1.5rem 1.5rem 1.25rem;
  border-radius: 0 4px 4px 0;
  transition: border-left-color 0.2s, transform 0.15s;
}
.capture-card:hover { border-left-color: #1D5C55; transform: translateY(-2px); }
.capture-type {
  font-size: 0.67rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--forest); font-family: var(--body); margin-bottom: 0.75rem;
}
.capture-body { font-style: italic; line-height: 1.8; color: var(--ink); font-size: 0.9375rem; }
.capture-date { margin-top: 1.125rem; font-size: 0.725rem; color: var(--ink-faint); }
.fn-cta { margin-top: 2.5rem; text-align: center; }

/* ============================================================
   WONDER GARDEN (front-page zone 3)
   ============================================================ */
.wonder-garden {
  background: var(--forest-bg);
  border-top: 1px solid var(--forest-border);
  border-bottom: 1px solid var(--forest-border);
  padding: 5.5rem 2rem;
}
.wg-inner { max-width: var(--max-w); margin: 0 auto; }
.wonder-garden .section-eyebrow { color: var(--forest); }
.wonder-garden .section-header h2 { color: var(--forest); }
.wonder-garden .section-rule { background: var(--forest-border); }
.growth-track {
  display: flex; align-items: center; flex-wrap: nowrap;
  gap: 0; margin-bottom: 2.75rem; overflow-x: auto; padding-bottom: 0.5rem;
}
.stage-item { display: flex; align-items: center; flex-shrink: 0; }
.stage-label {
  padding: 0.3rem 0.9rem; border-radius: 2rem; font-size: 0.75rem;
  font-family: var(--body); letter-spacing: 0.04em;
  border: 1px solid var(--border); color: var(--ink-muted); background: white;
  white-space: nowrap; transition: all 0.2s;
}
.stage-label.current { background: var(--forest); color: white; border-color: var(--forest); }
.stage-sep { width: 1.75rem; text-align: center; color: var(--forest-border); font-size: 0.75rem; flex-shrink: 0; }
.idea-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.idea-card {
  background: white; border: 1px solid var(--border); border-radius: 8px;
  padding: 1.875rem; transition: box-shadow 0.25s;
}
.idea-card:hover { box-shadow: 0 4px 24px rgba(28,24,16,0.07); }
.idea-stage-badge {
  display: inline-block; font-size: 0.67rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--forest); font-family: var(--body);
  margin-bottom: 0.9rem; border-bottom: 1px solid var(--forest-border); padding-bottom: 0.125rem;
}
.idea-card h3 {
  font-family: var(--display); font-size: 1.4rem; font-weight: 500;
  margin-bottom: 0.75rem; line-height: 1.25;
}
.idea-card p { font-size: 0.9375rem; color: var(--ink-muted); line-height: 1.8; }
.idea-link {
  display: inline-block; margin-top: 1.25rem; font-size: 0.8125rem;
  color: var(--forest); text-decoration: none;
  border-bottom: 1px solid var(--forest-border); padding-bottom: 0.125rem;
}
.idea-link:hover { border-color: var(--forest); text-decoration: none; }
.wg-cta { margin-top: 2.75rem; text-align: center; }

/* ============================================================
   NARRATIVE PROJECT (front-page zone 4)
   ============================================================ */
.narrative-project { padding: 5.5rem 2rem; max-width: var(--max-w); margin: 0 auto; }
.narrative-project .section-eyebrow { color: var(--indigo); }
.narrative-project .section-header h2 { color: var(--indigo); }
.narrative-project .section-rule { background: var(--indigo-border); }
.pipeline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-bottom: 2.75rem; }
.pipe-node {
  padding: 0.4rem 0.875rem; border-radius: 6px; font-size: 0.78rem;
  font-family: var(--body); background: var(--indigo-bg);
  border: 1px solid var(--indigo-border); color: var(--indigo); white-space: nowrap;
}
.pipe-node.lit { background: var(--indigo); color: white; border-color: var(--indigo); }
.pipe-sep { color: var(--indigo-border); font-size: 0.75rem; }
.active-thread {
  background: var(--indigo-bg); border: 1px solid var(--indigo-border);
  border-radius: 8px; padding: 2rem 2.25rem;
}
.at-badge {
  font-size: 0.67rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--indigo); font-family: var(--body); margin-bottom: 0.875rem;
}
.at-question {
  font-family: var(--display); font-size: clamp(1.35rem, 3vw, 1.8rem);
  font-weight: 400; font-style: italic; line-height: 1.3; color: var(--ink);
}
.at-status { margin-top: 0.875rem; font-size: 0.875rem; color: var(--ink-muted); }
.np-cta { margin-top: 2.75rem; text-align: center; }

/* ============================================================
   FABLES (front-page zone 5)
   ============================================================ */
.fables {
  background: var(--coral-bg);
  border-top: 1px solid var(--coral-border);
  border-bottom: 1px solid var(--coral-border);
  padding: 5.5rem 2rem;
}
.fables-inner { max-width: var(--max-w); margin: 0 auto; }
.fables .section-eyebrow { color: var(--coral); }
.fables .section-header h2 { color: var(--coral); }
.fables .section-rule { background: var(--coral-border); }
.fables-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); gap: 1.5rem; }
.fable-card {
  background: white; border: 1px solid var(--coral-border);
  border-radius: 8px; padding: 1.875rem; transition: box-shadow 0.25s;
}
.fable-card:hover { box-shadow: 0 4px 24px rgba(122,60,60,0.08); }
.fable-card h3 {
  font-family: var(--display); font-size: 1.375rem; font-weight: 500;
  color: var(--coral); margin-bottom: 0.75rem; line-height: 1.25;
}
.fable-excerpt { font-size: 0.9375rem; color: var(--ink-muted); font-style: italic; line-height: 1.8; }
.fable-link {
  display: inline-block; margin-top: 1.25rem; font-size: 0.8125rem;
  color: var(--coral); text-decoration: none;
  border-bottom: 1px solid var(--coral-border); padding-bottom: 0.125rem;
}
.fable-link:hover { border-color: var(--coral); text-decoration: none; }
.fables-cta { margin-top: 2.75rem; text-align: center; }

/* ============================================================
   SINGLE POST — the garden reading experience
   ============================================================ */
.post-hero {
  background: var(--dark);
  padding: 4rem 2rem 3.5rem;
  text-align: center;
}
.post-hero-category {
  font-size: 0.67rem; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--sky-accent); font-family: var(--body); margin-bottom: 1.25rem;
}
.post-hero h1 {
  font-family: var(--display);
  font-size: clamp(2rem, 5.5vw, 3.75rem);
  font-weight: 300; line-height: 1.12;
  color: #F0E8DA; max-width: 20ch; margin: 0 auto 1.25rem;
}
.post-hero-meta {
  font-size: 0.8rem; color: #5A504A; letter-spacing: 0.04em;
}

.post-featured-image {
  max-height: 480px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.post-featured-image img {
  width: 100%;
  object-fit: cover;
  max-height: 480px;
}

.post-body-wrap {
  padding: 4rem 2rem 5rem;
  max-width: var(--prose-w);
  margin: 0 auto;
}

/* Post content typography */
.post-content { color: var(--ink); }
.post-content p {
  font-size: 1.0625rem;
  line-height: 1.9;
  margin-bottom: 1.6rem;
}
.post-content h2 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  font-weight: 400; line-height: 1.2;
  color: var(--ink); margin: 2.5rem 0 1rem;
}
.post-content h3 {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.5vw, 1.6rem);
  font-weight: 500; line-height: 1.25;
  color: var(--ink); margin: 2rem 0 0.875rem;
}
.post-content h4 {
  font-family: var(--body);
  font-size: 0.875rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ink-muted);
  margin: 1.75rem 0 0.75rem;
}
.post-content blockquote {
  font-family: var(--display);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 300; font-style: italic;
  line-height: 1.4; color: var(--amber);
  border-left: 3px solid var(--amber-border);
  padding: 0.5rem 0 0.5rem 1.5rem;
  margin: 2rem 0;
}
/* Attribution/cite must always sit at the bottom of the hierarchy:
   Quote text → Body text → Attribution.
   Gutenberg outputs <cite> inside <blockquote class="wp-block-quote">.
   Without this rule it inherits the large amber display size.
   The explicit paragraph rule handles Classic Editor attribution
   written as a <p> immediately following a blockquote. */
.post-content blockquote cite,
.post-content .wp-block-quote cite,
.post-content .wp-block-pullquote cite {
  display: block;
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 400;
  font-style: normal;
  color: var(--ink-faint);
  opacity: 0.72;
  margin-top: 0.875rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
/* Classic-editor pattern: attribution as a paragraph after the quote */
.post-content blockquote + p,
.post-content .wp-block-quote + p {
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin-top: -0.75rem;
  font-style: normal;
  opacity: 0.8;
}
.post-content a {
  color: var(--forest);
  border-bottom: 1px solid var(--forest-border);
  text-decoration: none;
}
.post-content a:hover { border-color: var(--forest); text-decoration: none; }
.post-content ul, .post-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1.6rem;
}
.post-content li { margin-bottom: 0.4rem; line-height: 1.8; }
.post-content img {
  border-radius: 4px;
  margin: 2rem 0;
}
.post-content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 3rem auto;
  width: 4rem;
}
.post-content .wp-caption-text,
.post-content figcaption {
  font-size: 0.8rem;
  color: var(--ink-faint);
  font-style: italic;
  text-align: center;
  margin-top: 0.5rem;
}

/* Post footer — tags & navigation */
.post-footer {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.post-tags { margin-bottom: 2rem; }
.post-tags a {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 2rem;
  color: var(--ink-muted);
  margin: 0 0.25rem 0.5rem 0;
  text-decoration: none;
  transition: all 0.2s;
}
.post-tags a:hover {
  border-color: var(--amber);
  color: var(--amber);
  text-decoration: none;
}
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.post-nav a {
  display: block;
  background: var(--parchment-warm);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.125rem 1.375rem;
  text-decoration: none;
  transition: border-color 0.2s;
}
.post-nav a:hover { border-color: var(--ink-muted); text-decoration: none; }
.post-nav .nav-direction {
  font-size: 0.67rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-faint); font-family: var(--body); margin-bottom: 0.375rem;
}
.post-nav .nav-title {
  font-family: var(--display); font-size: 1rem;
  color: var(--ink); line-height: 1.3;
}
.post-nav .next-post { text-align: right; }

/* ============================================================
   STATIC PAGES
   ============================================================ */
.page-body-wrap {
  padding: 4rem 2rem 5rem;
  max-width: var(--prose-w);
  margin: 0 auto;
}
.page-content { color: var(--ink); }
.page-content p { font-size: 1.0625rem; line-height: 1.9; margin-bottom: 1.6rem; }
.page-content h2 {
  font-family: var(--display); font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  font-weight: 400; line-height: 1.2; margin: 2.5rem 0 1rem;
}
.page-content h3 {
  font-family: var(--display); font-size: clamp(1.25rem, 2.5vw, 1.6rem);
  font-weight: 500; line-height: 1.25; margin: 2rem 0 0.875rem;
}
.page-content blockquote {
  font-family: var(--display); font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 300; font-style: italic; line-height: 1.4; color: var(--amber);
  border-left: 3px solid var(--amber-border); padding: 0.5rem 0 0.5rem 1.5rem; margin: 2rem 0;
}
.page-content a { color: var(--forest); border-bottom: 1px solid var(--forest-border); text-decoration: none; }
.page-content a:hover { border-color: var(--forest); text-decoration: none; }
.page-content ul, .page-content ol { padding-left: 1.5rem; margin-bottom: 1.6rem; }
.page-content li { margin-bottom: 0.4rem; line-height: 1.8; }
.page-content img { border-radius: 4px; margin: 2rem 0; }

/* ============================================================
   ARCHIVE / BLOG INDEX
   ============================================================ */
.archive-wrap { padding: 4rem 2rem 5rem; max-width: var(--max-w); margin: 0 auto; }
.archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
}
.post-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s, transform 0.15s;
}
.post-card:hover {
  box-shadow: 0 6px 30px rgba(28,24,16,0.08);
  transform: translateY(-2px);
}
/* Cards without featured images: skip the image area entirely.
   Slightly more top padding so the title has room to breathe. */
.post-card--no-image .post-card-body {
  padding-top: 2rem;
}
.post-card--no-image:hover {
  transform: translateY(-2px);
}
.post-card-thumb { height: 200px; overflow: hidden; background: var(--parchment-deep); }
.post-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.post-card:hover .post-card-thumb img { transform: scale(1.03); }
.post-card-body { padding: 1.5rem 1.625rem 1.75rem; flex: 1; display: flex; flex-direction: column; }
.post-card-category {
  font-size: 0.67rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--forest); font-family: var(--body); margin-bottom: 0.625rem;
}
.post-card-title {
  font-family: var(--display); font-size: 1.4rem; font-weight: 500;
  line-height: 1.25; color: var(--ink); margin-bottom: 0.75rem;
  text-decoration: none; display: block;
}
.post-card-title:hover { color: var(--amber); text-decoration: none; }
/* The Thinkerer is a quote-first intellectual garden.
   Every archive card excerpt is treated as an opening passage —
   display font, italic, with a left rule and a curling open-quote.
   This applies globally; section-specific accent rules below
   give each garden zone its own colour signature.             */
.post-card-excerpt {
  font-family: var(--display);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--ink);
  line-height: 1.82;
  margin-bottom: 1.25rem;
  flex: 1;
  border-left: 2px solid var(--border);
  padding-left: 1rem;
  position: relative;
}
.post-card-excerpt::before {
  content: '\201C';
  font-size: 1.4rem;
  color: var(--ink-faint);
  line-height: 0;
  vertical-align: -0.35em;
  margin-right: 0.15em;
}

/* Section-specific border + quote-mark accent colours */
.category-fables .post-card-excerpt            { border-left-color: var(--coral-border); }
.category-fables .post-card-excerpt::before    { color: var(--coral); }
.category-fishing-net .post-card-excerpt       { border-left-color: var(--forest-border); }
.category-fishing-net .post-card-excerpt::before { color: var(--forest); }
.category-wonder-garden .post-card-excerpt     { border-left-color: var(--forest-border); }
.category-wonder-garden .post-card-excerpt::before { color: var(--forest); }
.category-narrative-project .post-card-excerpt { border-left-color: var(--indigo-border); }
.category-narrative-project .post-card-excerpt::before { color: var(--indigo); }
.category-daily-light .post-card-excerpt       { border-left-color: var(--amber-border); }
.category-daily-light .post-card-excerpt::before { color: var(--amber); }
.category-thought-archive .post-card-excerpt   { border-left-color: #3A3028; }
.category-thought-archive .post-card-excerpt::before { color: #7A6E62; }
.post-card-meta {
  font-size: 0.75rem; color: var(--ink-faint);
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 1rem; border-top: 1px solid var(--border-light);
}
.post-card-read {
  font-size: 0.8rem; color: var(--forest); text-decoration: none;
  border-bottom: 1px solid var(--forest-border); padding-bottom: 0.1rem;
}
.post-card-read:hover { border-color: var(--forest); text-decoration: none; }

/* ── Card quote + attribution: clear two-level hierarchy ──────
   Quote:       display font, italic, larger — the centrepiece
   Attribution: body font, roman, small, muted — a quiet footnote
   Both are left-aligned under a thin amber rule.               */
.post-card-quote {
  font-family: var(--display);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.7;
  color: var(--ink);
  border-left: 2px solid var(--amber-border);
  padding-left: 1rem;
  margin-bottom: 0.5rem;
}
.post-card-quote::before {
  content: '\201C';
  color: var(--amber);
  margin-right: 0.05em;
  font-size: 1.1em;
  line-height: 0;
  vertical-align: -0.1em;
}
.post-card-attribution {
  font-family: var(--body);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  color: var(--ink-faint);
  padding-left: 1rem;
  margin-bottom: 1rem;
  letter-spacing: 0.01em;
}

/* ── Text-first cards: when no featured image exists ─────────
   The Thinkerer is a text-first intellectual garden. When a post
   has no featured image the card opens on words, not a void.
   A sectional accent border replaces the image as the visual
   anchor; the body expands into the full card with generous
   breathing room. No empty boxes. No broken layouts.           */
.post-card--no-image {
  border-top: 3px solid var(--border);
}
.post-card--no-image .post-card-body {
  padding-top: 2rem;
}
.post-card--no-image .post-card-title {
  font-size: 1.525rem;
  margin-bottom: 0.875rem;
}
.post-card--no-image .post-card-excerpt {
  font-size: 0.9375rem;
  line-height: 1.88;
}

/* Section-specific accent colour for the text-first top border */
.category-fables .post-card--no-image            { border-top-color: var(--coral-border); }
.category-fishing-net .post-card--no-image       { border-top-color: var(--forest-border); }
.category-wonder-garden .post-card--no-image     { border-top-color: var(--forest-border); }
.category-narrative-project .post-card--no-image { border-top-color: var(--indigo-border); }
.category-daily-light .post-card--no-image       { border-top-color: var(--amber-border); }

/* ── Fables card: excerpt size refinements ───────────────────
   Font-family, italic, border, and quote mark are handled by the
   universal .post-card-excerpt rules above + the .category-fables
   accent colour rules. Here we just nudge size and focal weight. */
.post-card--fables .post-card-excerpt {
  font-size: 1.1rem;
  line-height: 1.78;
}
.post-card--fables.post-card--no-image .post-card-title {
  color: var(--coral);
}
.post-card--fables.post-card--no-image .post-card-excerpt {
  font-size: 1.15rem;
  line-height: 1.82;
}
.post-card--fables.post-card--no-image .post-card-meta {
  font-size: 0.72rem;
  color: var(--ink-faint);
  border-top-color: var(--coral-border);
}
.post-card--fables .post-card-read {
  color: var(--coral);
  border-bottom-color: var(--coral-border);
}
.post-card--fables .post-card-read:hover {
  border-bottom-color: var(--coral);
  text-decoration: none;
}

/* ── Thought Archive teaser — homepage doorway to older writings */
.thought-archive-teaser {
  background: var(--dark);
  border-top: 1px solid #2C2620;
  padding: 4rem 2rem;
  text-align: center;
}
.tat-inner {
  max-width: var(--content-w);
  margin: 0 auto;
}
.tat-eyebrow {
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #4A4038;
  font-family: var(--body);
  margin-bottom: 1.25rem;
}
.tat-heading {
  font-family: var(--display);
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  font-weight: 300;
  color: #D4C8B8;
  margin-bottom: 1rem;
  line-height: 1.2;
}
.tat-text {
  font-size: 0.9375rem;
  color: #7A6E62;
  max-width: 44ch;
  margin: 0 auto 2rem;
  line-height: 1.8;
  font-style: italic;
}
.tat-link {
  display: inline-block;
  padding: 0.55rem 1.4rem;
  border: 1px solid #3A3028;
  border-radius: 2rem;
  font-size: 0.875rem;
  color: #8A7E74;
  text-decoration: none;
  font-family: var(--body);
  transition: all 0.2s;
}
.tat-link:hover {
  border-color: #D4C8B8;
  color: #D4C8B8;
  text-decoration: none;
}

/* Pagination */
.archive-pagination {
  margin-top: 3.5rem;
  display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap;
}
.archive-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--border); border-radius: 50%;
  font-size: 0.875rem; color: var(--ink-muted);
  text-decoration: none; transition: all 0.2s;
}
.archive-pagination .page-numbers:hover,
.archive-pagination .page-numbers.current {
  background: var(--ink); color: var(--parchment);
  border-color: var(--ink); text-decoration: none;
}
.archive-pagination .prev, .archive-pagination .next { font-size: 1rem; }

/* ============================================================
   CATEGORY ARCHIVES — section-specific colour coding
   Each section has its own accent so archives feel like
   natural extensions of the homepage zones.
   ============================================================ */
.category-banner {
  padding: 3.5rem 2rem 3rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.category-banner h1 {
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 300;
  line-height: 1.15;
  margin-bottom: 0.5rem;
}
.category-banner .cat-description {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--ink-muted);
  margin-top: 0.5rem;
}

/* Fables — coral */
.category-fables .category-banner { background: var(--coral-bg); border-color: var(--coral-border); }
.category-fables .category-banner h1 { color: var(--coral); }

/* Fishing Net — forest */
.category-fishing-net .category-banner { background: var(--forest-bg); border-color: var(--forest-border); }
.category-fishing-net .category-banner h1 { color: var(--forest); }

/* Wonder Garden — forest */
.category-wonder-garden .category-banner { background: var(--forest-bg); border-color: var(--forest-border); }
.category-wonder-garden .category-banner h1 { color: var(--forest); }

/* Daily Light — amber */
.category-daily-light .category-banner { background: var(--amber-bg); border-color: var(--amber-border); }
.category-daily-light .category-banner h1 { color: var(--amber); }

/* Narrative Project — indigo */
.category-narrative-project .category-banner { background: var(--indigo-bg); border-color: var(--indigo-border); }
.category-narrative-project .category-banner h1 { color: var(--indigo); }

/* Thought Archive — dark/neutral, like a vault or library basement */
.category-thought-archive .category-banner {
  background: var(--dark);
  border-color: #2C2620;
}
.category-thought-archive .category-banner h1 { color: #D4C8B8; }
.category-thought-archive .category-banner .cat-description { color: #7A6E62; }

/* Daily Light archive — vertical list instead of cards,
   since Daily Light entries are short reflections, not articles */
.dl-archive-list {
  max-width: var(--prose-w);
  margin: 0 auto;
  padding: 3.5rem 2rem 5rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.dl-archive-entry {
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 2.5rem;
}
.dl-archive-entry:last-child { border-bottom: none; }
.dl-archive-date {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--amber);
  font-family: var(--body);
  margin-bottom: 0.75rem;
}
.dl-archive-type {
  display: inline-block;
  font-size: 0.67rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--amber);
  color: white;
  padding: 0.15rem 0.625rem;
  border-radius: 2rem;
  font-family: var(--body);
  margin-bottom: 1rem;
}
.dl-archive-offering {
  font-family: var(--display);
  font-size: clamp(1.3rem, 3.5vw, 2rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.4;
  color: var(--ink);
}
.dl-archive-offering::before { content: '\201C'; }
.dl-archive-offering::after  { content: '\201D'; }
.dl-archive-attribution {
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin-top: 0.75rem;
}

/* ============================================================
   404 PAGE
   ============================================================ */
.notfound-wrap {
  padding: 7rem 2rem;
  text-align: center;
  max-width: var(--content-w);
  margin: 0 auto;
}
.notfound-wrap h1 {
  font-family: var(--display); font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 300; color: var(--border); margin-bottom: 0.5rem;
}
.notfound-wrap h2 {
  font-family: var(--display); font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 400; margin-bottom: 1rem;
}
.notfound-wrap p { color: var(--ink-muted); margin-bottom: 2rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--dark); padding: 4.5rem 2rem 3rem; }
.footer-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem;
}
.footer-brand-name {
  font-family: var(--display); font-size: 1.5rem;
  color: #F0E8DA; font-weight: 500; margin-bottom: 0.75rem;
}
.footer-brand-desc { font-size: 0.875rem; color: #7A6E62; line-height: 1.75; max-width: 28ch; }
.footer-col-title {
  font-size: 0.67rem; text-transform: uppercase; letter-spacing: 0.15em;
  color: #4A4038; font-family: var(--body); margin-bottom: 1rem;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.625rem; }
.footer-links a { font-size: 0.875rem; color: #7A6E62; text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: #F0E8DA; text-decoration: none; }
.footer-bottom {
  max-width: var(--max-w); margin: 3rem auto 0;
  padding-top: 1.5rem; border-top: 1px solid #2C2620;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.75rem; color: #3A3028;
}

/* ============================================================
   WORDPRESS CORE OVERRIDES
   (fixes WP's default admin bar + alignment blocks)
   ============================================================ */
.admin-bar .site-nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-nav { top: 46px; } }

.alignwide  { max-width: calc(var(--prose-w) + 10rem); margin-left: auto; margin-right: auto; }
.alignfull  { max-width: 100%; margin-left: calc(-50vw + 50%); width: 100vw; }
.aligncenter { text-align: center; margin-left: auto; margin-right: auto; }
.wp-block-image.aligncenter { margin-left: auto; margin-right: auto; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .nav-menu-wrap ul { display: none; }
  .nav-toggle { display: block; }
  .nav-menu-wrap ul.open {
    display: flex; flex-direction: column;
    position: absolute; top: 58px; left: 0; right: 0;
    background: var(--dark); padding: 1.25rem 2rem 1.5rem;
    gap: 1.125rem; border-bottom: 1px solid #2C2620; z-index: 199;
  }
  .threshold { padding: 3.5rem 1.5rem 4rem; }
  .pipeline { gap: 0.25rem; }
  .pipe-sep { display: none; }
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
  .post-nav { grid-template-columns: 1fr; }
  .archive-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .daily-light, .fishing-net, .wonder-garden,
  .narrative-project, .fables { padding: 4rem 1.25rem; }
  .threshold-headline { font-size: 2.2rem; }
  .post-hero h1 { font-size: 2rem; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Daily Light v1.4  —  Homepage + Single page
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Homepage: link INSIDE the blockquote ────────────────────────────────── */
/*
 * The <a> now lives inside .dl-offering rather than wrapping it.
 * This is the only reliable way to suppress underlines — targeting text
 * nodes directly rather than block-level children.
 */
.dl-offering .dl-offering-link {
    color:           inherit;
    text-decoration: none;
    display:         block;          /* fill the whole blockquote tap area   */
    transition:      opacity 0.18s ease;
}

.dl-offering .dl-offering-link:hover {
    opacity:         0.75;
    text-decoration: none;
}

.dl-offering .dl-offering-link:focus-visible {
    outline:        2px solid var(--color-amber, #8B6914);
    outline-offset: 6px;
    border-radius:  2px;
}


/* ── Single page: outer wrapper ──────────────────────────────────────────── */
.dl-single {
    width:      100%;
    background: var(--color-bg, #FAF7F2);
}

/* Centred column — all children inherit text-align: center */
.dl-single__inner {
    max-width:      620px;
    margin:         0 auto;
    padding:        clamp(4rem, 9vw, 6.5rem) var(--space-side, 1.5rem) clamp(2rem, 5vw, 3rem);
    text-align:     center;
    display:        flex;
    flex-direction: column;
    align-items:    center;
}

/* ── Eyebrow ─────────────────────────────────────────────────────────────── */
.dl-single__inner .dl-single__eyebrow {
    display:        block;
    font-family:    var(--font-body, 'Lora', Georgia, serif);
    font-size:      0.7rem;
    font-weight:    400;
    font-style:     normal;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color:          var(--color-amber, #8B6914);
    margin:         0 0 1.25rem;
    text-align:     center;
    width:          100%;
}

.dl-single__back {
    color:           var(--color-amber, #8B6914);
    text-decoration: none;
    transition:      opacity 0.15s;
}
.dl-single__back:hover { opacity: 0.65; text-decoration: none; }

/* Separator dot between "Daily Light" and the date */
.dl-single__sep { opacity: 0.5; }

/* ── Type tag — amber pill, centred ─────────────────────────────────────── */
.dl-single__inner .dl-single__type {
    display:        inline-block;
    font-family:    var(--font-body, 'Lora', Georgia, serif);
    font-size:      0.62rem;
    font-weight:    600;
    font-style:     normal;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          #FAF7F2;
    background:     var(--color-amber, #8B6914);
    border:         none;
    border-radius:  2rem;
    padding:        0.3rem 1.1rem;
    margin:         0 0 2.25rem;
    text-align:     center;
    /* override any existing .dl-type theme rules */
    position:       static;
    top:            auto;
    left:           auto;
}

/* ── The thought ─────────────────────────────────────────────────────────── */
.dl-single__inner .dl-offering {
    font-family:  var(--font-display, 'Cormorant Garamond', Georgia, serif);
    font-size:    clamp(1.8rem, 5.5vw, 2.9rem);
    font-style:   italic;
    font-weight:  400;
    line-height:  1.38;
    color:        var(--color-ink, #2C2416);
    margin:       0 0 1.5rem;
    padding:      0;
    border:       none;
    text-align:   center;
    quotes:       none;
    width:        100%;
}

/* ── Attribution ─────────────────────────────────────────────────────────── */
.dl-single__inner .dl-attribution {
    font-family:  var(--font-body, 'Lora', Georgia, serif);
    font-size:    0.85rem;
    font-style:   italic;
    font-weight:  400;
    color:        var(--color-muted, #7A7060);
    margin:       0 0 2.75rem;
    text-align:   center;
    width:        100%;
}

/* ── Thin amber dividing rule ────────────────────────────────────────────── */
.dl-single__rule {
    width:      2.5rem;
    height:     1px;
    background: var(--color-amber, #8B6914);
    opacity:    0.4;
    border:     none;
    margin:     0 auto 2rem;
    flex-shrink: 0;
}

/* ── Prev / next — dates only ────────────────────────────────────────────── */
.dl-single__nav {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    width:           100%;
    gap:             1rem;
}

.dl-single__nav-link {
    display:         flex;
    flex-direction:  column;
    align-items:     flex-start;
    gap:             0.25rem;
    text-decoration: none;
    color:           inherit;
    max-width:       44%;
}

.dl-single__nav-link--next {
    align-items: flex-end;
    text-align:  right;
}

.dl-single__nav-link:hover .dl-single__nav-dir,
.dl-single__nav-link:hover .dl-single__nav-date {
    color: var(--color-amber, #8B6914);
}

.dl-single__nav-link:focus-visible {
    outline:        2px solid var(--color-amber, #8B6914);
    outline-offset: 4px;
    border-radius:  2px;
}

.dl-single__nav-dir {
    font-family:    var(--font-body, 'Lora', Georgia, serif);
    font-size:      0.65rem;
    font-style:     normal;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--color-muted, #7A7060);
    transition:     color 0.15s;
}

.dl-single__nav-date {
    font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
    font-size:   1rem;
    font-style:  italic;
    color:       var(--color-ink, #2C2416);
    transition:  color 0.15s;
}

/* ── Wonder modules below the thought ───────────────────────────────────── */
.dl-single__wonder-modules {
    max-width: 620px;
    margin:    0 auto;
    padding:   0 var(--space-side, 1.5rem) clamp(3rem, 8vw, 5rem);
}

.dl-single__wonder-modules .tws-module,
.dl-single__wonder-modules .tws-homepage-reflections {
    background: transparent;
    border-top: 1px solid var(--color-border, rgba(44,36,22,.1));
}

.dl-single__wonder-modules .tws-daily-reflect__prompt,
.dl-single__wonder-modules .tws-reflections-display__label {
    text-align: center;
}

.dl-single__wonder-modules .tws-daily-reflect__prompt {
    font-size: clamp(1.05rem, 2.5vw, 1.3rem);
}

.dl-single__wonder-modules .tws-reflections-display__list {
    text-align: left;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .dl-single__inner .dl-offering {
        font-size: 1.6rem;
    }

    .dl-single__nav {
        flex-direction: column;
        align-items:    center;
        gap:            1.25rem;
    }

    .dl-single__nav-link,
    .dl-single__nav-link--next {
        align-items: center;
        text-align:  center;
        max-width:   100%;
    }
}