/* ==========================================================================
   LIFESTYLEROOT — GLOBAL STYLESHEET (Launch build: Home & Living pillar)
   --------------------------------------------------------------------------
   Upload to site root as /style.css and link from every page:
     <link rel="stylesheet" href="/style.css">

   WordPress / Kadence — enqueue from the child theme's functions.php so it
   loads on every template and stays cacheable:
     wp_enqueue_style('lr-global', get_stylesheet_directory_uri().'/style.css');

   SCOPE
   Trimmed to match the launch content plan (one pillar, three subtopic
   clusters). Rules for the removed pillars are gone. Section 8 (article
   layout) is included because every post page needs it.

   GROWING THIS FILE
   When pillar #2 goes live, add its section rules under Section 6 following
   the same comment pattern — the tokens in Section 1 never change, so new
   sections inherit the look automatically.

   CONTENTS
     1. Design tokens
     2. Base / reset
     3. Utilities
     4. Card components
     5. Header
     6. Homepage sections
     7. Footer
     8. Article layout
     9. Print
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root{
  --paper:      #F6F5EE;
  --paper-alt:  #EEEBDD;
  --paper-deep: #E7E2CE;
  --ink:        #1E2A20;
  --ink-soft:   #4B5748;
  --ink-faint:  #7C8577;
  --moss:       #34492F;
  --moss-deep:  #22301D;
  --gold:       #B7873C;
  --gold-deep:  #96692A;
  --clay:       #A2503A;
  --line:       #DBD5C0;
  --white:      #FFFFFF;

  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-hero:  clamp(2.4rem, 4.6vw, 4.1rem);
  --fs-h2:    clamp(1.7rem, 2.6vw, 2.35rem);
  --fs-h3:    clamp(1.2rem, 1.6vw, 1.4rem);
  --fs-lead:  1.125rem;
  --fs-body:  1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.78rem;

  --radius: 3px;
  --container: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}


/* ==========================================================================
   2. BASE / RESET
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:600; color:var(--ink); }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* Screen-reader-only helper — replaces the repeated inline off-screen labels */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}


/* ==========================================================================
   3. UTILITIES
   ========================================================================== */
.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

.eyebrow-cat{
  display:inline-block;
  font-size:var(--fs-micro);
  font-weight:600;
  letter-spacing:.03em;
  color:var(--moss);
  padding:.2rem .55rem;
  border:1px solid var(--moss);
  border-radius:2px;
}
.eyebrow-cat--gold{ color:var(--gold-deep); border-color:var(--gold-deep); }
.eyebrow-cat--clay{ color:var(--clay); border-color:var(--clay); }

.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.75rem 1.5rem;
  background:var(--moss);
  color:var(--paper);
  font-weight:600;
  font-size:var(--fs-small);
  border-radius:2px;
  border:1px solid var(--moss);
  transition:background .15s ease, color .15s ease;
}
.btn:hover{ background:var(--moss-deep); border-color:var(--moss-deep); }
.btn--gold{ background:var(--gold); border-color:var(--gold); color:var(--white); }
.btn--gold:hover{ background:var(--gold-deep); border-color:var(--gold-deep); }

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.5rem;
  margin-bottom:1.75rem;
}
.section-head h2{ font-size:var(--fs-h2); line-height:1.15; }
.section-head .view-all{
  font-size:var(--fs-small);
  font-weight:600;
  color:var(--moss);
  white-space:nowrap;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:border-color .15s ease;
}
.section-head .view-all:hover{ border-color:var(--moss); }
.section-kicker{
  font-family:var(--font-display);
  font-style:italic;
  color:var(--ink-faint);
  font-size:var(--fs-lead);
  display:block;
  margin-bottom:.35rem;
}

section{ padding:4rem 0; }
@media (max-width:640px){ section{ padding:2.75rem 0; } }
.section-alt{ background:var(--paper-alt); }


/* ==========================================================================
   4. CARD COMPONENTS
   Reused by the homepage, the three cluster archives and the article
   sidebar / related module — one visual system across the whole site.
   ========================================================================== */
.card{ display:flex; flex-direction:column; }
.card .card-media{
  position:relative;
  overflow:hidden;
  background:var(--paper-deep);
  aspect-ratio: 4/3;
  border-radius:var(--radius);
}
.card .card-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.card:hover .card-media img{ transform:scale(1.04); }
.card .card-body{ padding-top:.9rem; }
.card .card-cat{ font-size:var(--fs-micro); font-weight:700; letter-spacing:.02em; color:var(--moss); }
.card .card-cat--gold{ color:var(--gold-deep); }
.card .card-cat--clay{ color:var(--clay); }
.card h3{ font-size:var(--fs-h3); line-height:1.28; margin-top:.4rem; }
.card h3 a:hover{ text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px; }
.card .card-excerpt{ font-size:var(--fs-small); color:var(--ink-soft); margin-top:.5rem; line-height:1.6; }
.card .card-meta{ font-size:var(--fs-micro); color:var(--ink-faint); margin-top:.75rem; display:flex; gap:.4rem; align-items:center; }

.card--feature h3{ font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.14; }
.card--feature .card-media{ aspect-ratio:16/10; }
.card--feature .card-excerpt{ font-size:var(--fs-body); }

/* Horizontal variant — unused on the homepage now, but the article sidebar
   and related-posts lists depend on it. */
.card--h{ flex-direction:row; gap:1.1rem; align-items:flex-start; }
.card--h .card-media{ flex:0 0 128px; aspect-ratio:1/1; }
.card--h .card-body{ padding-top:0; flex:1; }
.card--h h3{ font-size:1.05rem; }


/* ==========================================================================
   5. HEADER
   ========================================================================== */
.lr-header{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.lr-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:1rem var(--gutter);
  max-width:var(--container);
  margin:0 auto;
}
.lr-logo{
  font-family:var(--font-display);
  font-size:1.55rem;
  font-weight:600;
  letter-spacing:-.01em;
  display:flex;
  align-items:baseline;
  gap:.1rem;
}
.lr-logo em{ font-style:italic; color:var(--gold-deep); font-weight:500; }

.lr-nav{ display:none; }
.lr-nav ul{ display:flex; gap:1.6rem; }
.lr-nav a{
  font-size:.92rem; font-weight:500; color:var(--ink-soft);
  padding:.35rem 0; border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.lr-nav a:hover{ color:var(--ink); border-color:var(--gold); }
.lr-nav a[aria-current="page"]{ color:var(--ink); border-color:var(--gold); }

.lr-header-actions{ display:flex; align-items:center; gap:.9rem; }
.lr-icon-btn{
  background:none; border:none; padding:.4rem; color:var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.lr-icon-btn svg{ width:19px; height:19px; }
/* --- Header search ----------------------------------------------------- */
.lr-search{
  display:none;
  align-items:center;
  gap:.5rem;
  border:1px solid var(--line);
  border-radius:2px;
  padding:.4rem .7rem;
  background:var(--white);
}
.lr-search.is-open{ display:flex; }
.lr-search svg{ width:16px; height:16px; color:var(--ink-faint); flex:0 0 auto; }
.lr-search input{
  border:none; background:none; outline:none;
  font-family:var(--font-body); font-size:.9rem;
  width:150px; color:var(--ink);
}
.lr-search input::placeholder{ color:var(--ink-faint); }
.lr-search:focus-within{ border-color:var(--gold); }

/* Below 600px the open field would crowd the logo — let it wrap full-width */
@media (max-width:600px){
  .lr-header-inner{ flex-wrap:wrap; }
  .lr-search.is-open{ order:3; width:100%; margin-top:.75rem; }
  .lr-search input{ width:100%; }
}

.lr-burger{ display:flex; }
@media (min-width:960px){
  .lr-nav{ display:block; }
  .lr-burger{ display:none; }
}

.lr-mobile-nav{
  display:none;
  border-top:1px solid var(--line);
  background:var(--paper);
}
.lr-mobile-nav.is-open{ display:block; }
.lr-mobile-nav ul{ padding:.5rem var(--gutter) 1.25rem; }
.lr-mobile-nav a{
  display:block; padding:.65rem 0; font-size:1.02rem; font-weight:500;
  border-bottom:1px solid var(--line); color:var(--ink-soft);
}
.lr-mobile-nav li:last-child a{ border-bottom:none; }
@media (min-width:960px){ .lr-mobile-nav{ display:none !important; } }


/* ==========================================================================
   6. HOMEPAGE SECTIONS
   ========================================================================== */

/* --- 6.1 Hero — organic image, tagline, subtopic-cluster leaf badges --- */
.hero{ padding-top:3rem; padding-bottom:1rem; }
.hero-inner{
  display:grid;
  grid-template-columns:1fr;
  gap:2.75rem;
  align-items:center;
}
@media (min-width:900px){
  .hero-inner{ grid-template-columns: 1fr 1.05fr; gap:3.5rem; }
}

.hero-media{
  position:relative;
  aspect-ratio:1/1.05;
  border-radius: 58% 42% 63% 37% / 41% 47% 53% 59%;
  overflow:hidden;
  background:var(--paper-deep);
}
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  box-shadow: inset 0 0 0 1px rgba(30,42,32,.06);
}

.hero-content{ max-width:48ch; }
.hero-content .eyebrow-cat{ margin-bottom:1rem; }
.hero-content h1{
  font-size:var(--fs-hero);
  line-height:1.08;
  letter-spacing:-.01em;
}
.hero-content .hero-tagline{
  font-family:var(--font-display);
  font-style:italic;
  color:var(--gold-deep);
  font-size:1.25rem;
  display:block;
  margin-top:.65rem;
}
.hero-content p{ font-size:var(--fs-lead); margin-top:1.1rem; color:var(--ink-soft); }
.hero-content .hero-cta-row{ margin-top:1.5rem; display:flex; align-items:center; gap:1.2rem; }

.hero-leaves{
  margin-top:3.5rem;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.75rem;
  max-width:640px;
}
@media (max-width:640px){
  .hero-leaves{ grid-template-columns:1fr 1fr; max-width:none; }
}
@media (max-width:420px){
  .hero-leaves{ grid-template-columns:1fr; }
}
.leaf{
  aspect-ratio:1;
  border-radius: 0% 100% 0% 100% / 0% 100% 0% 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
  box-shadow:0 16px 26px -14px rgba(30,42,32,.35);
  transition:transform .18s ease, box-shadow .18s ease;
}
.leaf:hover{ transform:translateY(-4px); box-shadow:0 20px 30px -14px rgba(30,42,32,.42); }
.leaf--moss{ background:var(--moss); transform:rotate(-6deg); }
.leaf--gold{ background:var(--gold-deep); transform:rotate(5deg); margin-top:1.5rem; }
.leaf--clay{ background:var(--clay); transform:rotate(-3deg); }
.leaf:hover.leaf--moss{ transform:rotate(-6deg) translateY(-4px); }
.leaf:hover.leaf--gold{ transform:rotate(5deg) translateY(-4px); }
.leaf:hover.leaf--clay{ transform:rotate(-3deg) translateY(-4px); }
.leaf a{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.leaf-inner{
  color:var(--white);
  font-weight:600;
  font-size:.95rem;
  line-height:1.3;
  text-align:center;
}
.leaf--moss .leaf-inner{ transform:rotate(6deg); }
.leaf--gold .leaf-inner{ transform:rotate(-5deg); }
.leaf--clay .leaf-inner{ transform:rotate(3deg); }

/* --- 6.2 Latest articles — asymmetric grid ---------------------------- */
.latest-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2rem 1.75rem;
}
.latest-grid > .card:first-child{ grid-column:span 2; grid-row:span 2; }
.latest-grid > .card:first-child .card-media{ aspect-ratio:16/12; }
.latest-grid > .card:first-child h3{ font-size:1.5rem; }
@media (max-width:900px){
  .latest-grid{ grid-template-columns:repeat(2,1fr); }
  .latest-grid > .card:first-child{ grid-column:span 2; grid-row:auto; }
}
@media (max-width:560px){
  .latest-grid{ grid-template-columns:1fr; }
  .latest-grid > .card:first-child{ grid-column:span 1; }
}

/* --- 6.3 More from the pillar — image-forward triptych ---------------- */
.decor-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.75rem;
}
.decor-grid .card-media{ aspect-ratio:3/4; }
@media (max-width:760px){ .decor-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .decor-grid{ grid-template-columns:1fr; } }

/* --- 6.4 Newsletter --------------------------------------------------- */
.newsletter{
  background:var(--moss);
  color:var(--paper);
  text-align:center;
}
.newsletter .wrap{ max-width:640px; }
.newsletter h2{ color:var(--paper); font-size:var(--fs-h2); }
.newsletter p{ color:#C9D2C3; margin-top:.75rem; }
.newsletter-form{
  display:flex; gap:.75rem; margin-top:1.75rem;
  max-width:440px; margin-left:auto; margin-right:auto;
}
.newsletter-form input{
  flex:1; padding:.8rem 1rem; border:1px solid rgba(246,245,238,.3);
  background:rgba(246,245,238,.06); color:var(--paper); border-radius:2px;
  font-family:var(--font-body); font-size:.95rem;
}
.newsletter-form input::placeholder{ color:#A9B5A3; }
.newsletter-form .btn--gold{ flex:0 0 auto; }
.newsletter-fine{ font-size:var(--fs-micro); color:#9FAD98; margin-top:1rem; }
@media (max-width:520px){ .newsletter-form{ flex-direction:column; } }

/* --- 6.5 Explore clusters --------------------------------------------- */
.explore{ text-align:center; }
.explore h2{ font-size:var(--fs-h2); }
.explore > .wrap > p{ color:var(--ink-soft); max-width:52ch; margin:.75rem auto 0; }
.explore-grid{
  margin-top:2.5rem;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
@media (max-width:760px){ .explore-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .explore-grid{ grid-template-columns:1fr; } }
.explore-grid a{
  background:var(--paper);
  padding:1.75rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between;
  font-weight:600; font-size:1.02rem;
  transition:background .15s ease, color .15s ease;
}
.explore-grid a:hover{ background:var(--moss); color:var(--paper); }
.explore-grid a span.arrow{ font-family:var(--font-display); font-style:italic; color:var(--gold-deep); }
.explore-grid a:hover span.arrow{ color:var(--gold); }


/* ==========================================================================
   7. FOOTER
   ========================================================================== */
.lr-footer{
  background:var(--ink);
  color:#D7DBD2;
  padding-top:4rem;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.1fr;
  gap:2.5rem;
  padding-bottom:3rem;
  border-bottom:1px solid rgba(255,255,255,.1);
}
@media (max-width:860px){
  .footer-grid{ grid-template-columns:1fr 1fr; row-gap:2.5rem; }
}
@media (max-width:520px){
  .footer-grid{ grid-template-columns:1fr; }
}
.footer-brand .lr-logo{ color:var(--paper); }
.footer-brand p{ margin-top:1rem; color:#A6AE9F; font-size:var(--fs-small); max-width:32ch; line-height:1.65; }
.footer-social{ display:flex; gap:.75rem; margin-top:1.5rem; }
.footer-social a{
  width:34px; height:34px; border:1px solid rgba(255,255,255,.18);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  transition:border-color .15s ease, background .15s ease;
}
.footer-social a:hover{ border-color:var(--gold); background:rgba(183,135,60,.12); }
.footer-social svg{ width:15px; height:15px; }

.footer-col h4{
  color:#EDEFE7; font-family:var(--font-body); font-weight:600; font-size:.92rem;
  letter-spacing:.02em; margin-bottom:1.1rem;
}
.footer-col ul{ display:flex; flex-direction:column; gap:.75rem; }
.footer-col a{ color:#A6AE9F; font-size:.92rem; transition:color .15s ease; }
.footer-col a:hover{ color:var(--paper); }

.footer-newsletter p{ color:#A6AE9F; font-size:var(--fs-small); line-height:1.6; }
.footer-newsletter input{
  width:100%; padding:.7rem .9rem; margin-top:.9rem;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  color:var(--paper); border-radius:2px; font-family:var(--font-body); font-size:.88rem;
}
.footer-newsletter .btn{ margin-top:.8rem; width:100%; justify-content:center; }

.footer-bottom{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem;
  padding:1.75rem 0;
  font-size:var(--fs-micro);
  color:#7E8878;
}
.footer-bottom .legal-links{ display:flex; gap:1.5rem; }
.footer-bottom .legal-links a:hover{ color:var(--paper); }


/* ==========================================================================
   8. ARTICLE LAYOUT
   Every single post inherits these rules, so posts can't drift away from
   the homepage look. Markup for this comes in article.html (task 2).
   ========================================================================== */

/* --- 8.1 Breadcrumb — carries the pillar > cluster > post hierarchy ---- */
.article-breadcrumb{
  font-size:var(--fs-micro);
  color:var(--ink-faint);
  padding:1.25rem 0 0;
}
.article-breadcrumb ol{ display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; margin:0; padding:0; }
.article-breadcrumb li::after{ content:"/"; margin-left:.4rem; color:var(--line); }
.article-breadcrumb li:last-child::after{ content:none; }
.article-breadcrumb a:hover{ color:var(--moss); }
.article-breadcrumb [aria-current="page"]{ color:var(--ink-soft); }

/* --- 8.2 Article header ----------------------------------------------- */
.article-head{ padding:2rem 0 0; }
.article-head .wrap{ max-width:780px; }
.article-head h1{
  font-size:clamp(2rem, 3.6vw, 3.1rem);
  line-height:1.1;
  letter-spacing:-.01em;
  margin-top:1rem;
}
.article-standfirst{
  font-size:var(--fs-lead);
  color:var(--ink-soft);
  margin-top:1.1rem;
  line-height:1.6;
  max-width:62ch;
}
.article-byline{
  display:flex; flex-wrap:wrap; align-items:center; gap:.55rem;
  margin-top:1.5rem; padding-top:1.25rem;
  border-top:1px solid var(--line);
  font-size:var(--fs-small); color:var(--ink-faint);
}
.article-byline .byline-author{ color:var(--ink); font-weight:600; }
.article-byline .byline-sep{ color:var(--line); }

.article-hero{ margin-top:2rem; }
.article-hero .wrap{ max-width:1080px; }
.article-hero figure{ margin:0; }
.article-hero img{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  border-radius:4px; background:var(--paper-deep);
}
.article-hero figcaption{
  font-size:var(--fs-micro); color:var(--ink-faint);
  margin-top:.6rem; font-style:italic;
}

/* --- 8.3 Body + sidebar grid ------------------------------------------ */
.article-layout{ padding:3rem 0 4rem; }
.article-layout .wrap{
  display:grid;
  grid-template-columns:1fr;
  gap:3rem;
  align-items:start;
}
@media (min-width:1000px){
  .article-layout .wrap{ grid-template-columns:minmax(0,1fr) 300px; gap:4rem; }
}

/* --- 8.4 Prose — the typography every article inherits ---------------- */
.article-body{ max-width:68ch; font-size:1.075rem; line-height:1.75; color:var(--ink-soft); }
.article-body > * + *{ margin-top:1.4rem; }

.article-body h2{
  font-size:clamp(1.5rem,2.2vw,1.9rem);
  line-height:1.2;
  color:var(--ink);
  margin-top:2.75rem;
  scroll-margin-top:6rem;
}
.article-body h3{
  font-size:1.25rem;
  line-height:1.3;
  color:var(--ink);
  margin-top:2rem;
  scroll-margin-top:6rem;
}
.article-body h4{
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:700;
  color:var(--ink);
  margin-top:1.75rem;
}
.article-body p strong{ color:var(--ink); font-weight:600; }
.article-body a{
  color:var(--moss);
  text-decoration:underline;
  text-decoration-color:var(--gold);
  text-underline-offset:3px;
}
.article-body a:hover{ color:var(--gold-deep); }

.article-body ul,
.article-body ol{ padding-left:1.3rem; }
.article-body ul{ list-style:disc; }
.article-body ol{ list-style:decimal; }
.article-body li{ margin-top:.6rem; padding-left:.3rem; }
.article-body li::marker{ color:var(--gold-deep); }

.article-body blockquote{
  margin:2.25rem 0;
  padding:.25rem 0 .25rem 1.5rem;
  border-left:2px solid var(--gold);
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.3rem;
  line-height:1.45;
  color:var(--ink);
}
.article-body blockquote cite{
  display:block; margin-top:.75rem;
  font-family:var(--font-body); font-style:normal;
  font-size:var(--fs-small); color:var(--ink-faint);
}

.article-body figure{ margin:2.25rem 0; }
.article-body figure img{ width:100%; border-radius:4px; background:var(--paper-deep); }
.article-body figcaption{
  font-size:var(--fs-micro); color:var(--ink-faint);
  margin-top:.6rem; font-style:italic;
}

.article-body hr{ border:none; border-top:1px solid var(--line); margin:2.75rem 0; }

.article-body table{
  width:100%; border-collapse:collapse;
  font-size:var(--fs-small); margin:2rem 0;
}
.article-body th,
.article-body td{
  text-align:left; padding:.75rem .9rem;
  border-bottom:1px solid var(--line);
}
.article-body th{ color:var(--ink); font-weight:600; background:var(--paper-alt); }

/* Pull-out box for tips and warnings */
.article-callout{
  background:var(--paper-alt);
  border-left:3px solid var(--moss);
  border-radius:0 3px 3px 0;
  padding:1.4rem 1.5rem;
  margin:2.25rem 0;
  font-size:var(--fs-small);
  line-height:1.7;
}
.article-callout h4{ margin:0 0 .5rem; font-family:var(--font-body); font-size:.95rem; font-weight:700; }
.article-callout--gold{ border-left-color:var(--gold); }
.article-callout--clay{ border-left-color:var(--clay); }

/* Key takeaways block — answers the query up front, which is the point of
   a Koray-style article template */
.article-takeaways{
  border:1px solid var(--line);
  border-radius:3px;
  padding:1.5rem;
  margin:2.25rem 0;
  background:var(--white);
}
.article-takeaways h2{ font-size:1.15rem; margin:0 0 .85rem; }
.article-takeaways ul{ list-style:disc; padding-left:1.2rem; }
.article-takeaways li{ font-size:var(--fs-small); }

/* --- 8.5 Table of contents -------------------------------------------- */
.article-toc{
  border:1px solid var(--line);
  border-radius:3px;
  padding:1.35rem 1.5rem;
  margin:0 0 2.25rem;
  background:var(--paper-alt);
}
.article-toc h2{ font-family:var(--font-body); font-size:.92rem; font-weight:700; margin:0 0 .8rem; }
.article-toc ol{ list-style:none; counter-reset:toc; padding:0; margin:0; }
.article-toc li{ counter-increment:toc; margin-top:.55rem; font-size:var(--fs-small); }
.article-toc li::before{
  content:counter(toc) ".";
  color:var(--gold-deep); font-family:var(--font-display); font-style:italic;
  margin-right:.5rem;
}
.article-toc a{ color:var(--ink-soft); }
.article-toc a:hover{ color:var(--moss); text-decoration:underline; text-underline-offset:3px; }

/* --- 8.6 Tags + share -------------------------------------------------- */
.article-tags{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-top:2.5rem; padding-top:1.75rem;
  border-top:1px solid var(--line);
}
.article-tags a{
  font-size:var(--fs-micro); color:var(--ink-soft);
  border:1px solid var(--line); border-radius:2px;
  padding:.3rem .65rem;
  transition:border-color .15s ease, color .15s ease;
}
.article-tags a:hover{ border-color:var(--moss); color:var(--moss); }

.article-share{ display:flex; align-items:center; gap:.75rem; margin-top:1.5rem; }
.article-share span{ font-size:var(--fs-micro); color:var(--ink-faint); }
.article-share a{
  width:34px; height:34px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--ink-soft);
  transition:border-color .15s ease, color .15s ease;
}
.article-share a:hover{ border-color:var(--gold); color:var(--gold-deep); }
.article-share svg{ width:15px; height:15px; }

/* --- 8.7 Author box ---------------------------------------------------- */
.article-author{
  display:flex; gap:1.25rem; align-items:flex-start;
  margin-top:2.5rem; padding:1.6rem;
  background:var(--paper-alt); border-radius:3px;
}
.article-author img{
  flex:0 0 68px; width:68px; height:68px;
  border-radius:50%; object-fit:cover; background:var(--paper-deep);
}
.article-author h3{ font-size:1.05rem; }
.article-author p{ font-size:var(--fs-small); color:var(--ink-soft); margin-top:.4rem; line-height:1.65; }

/* --- 8.8 Sidebar ------------------------------------------------------- */
.article-sidebar{ display:flex; flex-direction:column; gap:2.25rem; }
@media (min-width:1000px){
  .article-sidebar{ position:sticky; top:5.5rem; }
}
.sidebar-block h2{
  font-family:var(--font-body); font-size:.92rem; font-weight:700;
  padding-bottom:.75rem; margin-bottom:1.1rem;
  border-bottom:1px solid var(--line);
}
.sidebar-list{ display:flex; flex-direction:column; gap:1.1rem; }
.sidebar-list .card--h .card-media{ flex:0 0 78px; }
.sidebar-list .card--h h3{ font-size:.95rem; line-height:1.35; }

.sidebar-cta{
  background:var(--moss); color:var(--paper);
  padding:1.5rem; border-radius:3px;
}
.sidebar-cta h2{ color:var(--paper); font-family:var(--font-display); font-size:1.2rem; border:none; padding:0; margin-bottom:.5rem; }
.sidebar-cta p{ font-size:var(--fs-small); color:#C9D2C3; }
.sidebar-cta input{
  width:100%; margin-top:.9rem; padding:.65rem .8rem;
  background:rgba(246,245,238,.08); border:1px solid rgba(246,245,238,.28);
  color:var(--paper); border-radius:2px; font-family:var(--font-body); font-size:.88rem;
}
.sidebar-cta input::placeholder{ color:#A9B5A3; }
.sidebar-cta .btn{ margin-top:.7rem; width:100%; justify-content:center; }

/* --- 8.9 Related articles --------------------------------------------- */
.article-related{ background:var(--paper-alt); }
.related-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.75rem;
}
@media (max-width:760px){ .related-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .related-grid{ grid-template-columns:1fr; } }

/* --- 8.10 Prev / next navigation --------------------------------------- */
.article-pagination{
  display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
@media (min-width:640px){ .article-pagination{ grid-template-columns:1fr 1fr; } }
.article-pagination a{
  background:var(--paper); padding:1.5rem;
  transition:background .15s ease;
}
.article-pagination a:hover{ background:var(--paper-alt); }
.article-pagination .pg-label{ font-size:var(--fs-micro); color:var(--ink-faint); display:block; }
.article-pagination .pg-title{ font-family:var(--font-display); font-size:1.05rem; font-weight:600; margin-top:.35rem; display:block; }
.article-pagination .pg-next{ text-align:right; }


/* ==========================================================================
   9. PRINT
   ========================================================================== */
@media print{
  .lr-header, .lr-footer, .article-sidebar, .article-related,
  .article-share, .article-pagination, .newsletter{ display:none !important; }
  body{ background:#fff; }
  .article-body{ max-width:none; font-size:11pt; }
}