/*
Theme Name: TerraVerte Digest
Theme URI: https://digest.terravertesolutions.com/
Author: TerraVerte Solutions
Description: Carbon-aware editorial theme for TerraVerte Digest. Zero web fonts, zero third-party scripts, opt-in imagery. Independent writing on sustainability.
Version: 1.2.0
License: GNU General Public License v2 or later
Text Domain: terraverte-digest
*/

/* =========================================================================
   TerraVerte Digest, carbon-aware build
   Design budget: 0 web fonts, 0 third-party scripts, 0 raster images,
   0 trackers. Everything inline, one request. System serif stack only.
   Imagery is opt-in (click-to-load) so the front page costs almost nothing.
   ========================================================================= */
:root{
  --paper:#f4f1ea; --paper-2:#efeadd; --ink:#191814; --ink-2:#56524a;
  --rule:#d9d3c4; --leaf:#234b36; --leaf-2:#3a6b4c; --signal:#1f7a4d;
  --max:1180px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Charter,Georgia,"Times New Roman",serif;
  --grot:ui-sans-serif,"Avenir Next","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
html[data-theme="lp"]{ /* low-power night mode */
  --paper:#14140f; --paper-2:#1c1c15; --ink:#ece7d8; --ink-2:#a39e90;
  --rule:#33322a; --leaf:#9ec7ab; --leaf-2:#bcd9c5; --signal:#7fd6a3;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:18px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
.grot{font-family:var(--grot)}
.kick{font-family:var(--grot); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700}
.skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--paper); padding:10px 16px; z-index:99}
.skip:focus{left:8px; top:8px}
:focus-visible{outline:2px solid var(--leaf-2); outline-offset:3px}

/* ---------- utility bar ---------- */
.util{border-bottom:1px solid var(--rule); font-family:var(--grot); font-size:.72rem; letter-spacing:.04em}
.util .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:8px; padding-bottom:8px}
.util .ed{color:var(--ink-2); text-transform:uppercase; letter-spacing:.12em}
.util .tools{display:flex; align-items:center; gap:14px}
.btn-ghost{font-family:var(--grot); font-size:.72rem; letter-spacing:.06em; background:none; border:0; color:var(--ink); cursor:pointer; padding:4px 2px; display:inline-flex; align-items:center; gap:6px}
.btn-ghost:hover{color:var(--leaf-2)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--signal);display:inline-block}

/* ---------- masthead ---------- */
.mast{border-bottom:2px solid var(--ink); padding-top:26px}
.mast .word{display:block; text-align:center; font-weight:700; letter-spacing:-.02em;
  font-size:clamp(2.3rem,7vw,4.6rem); line-height:.92; margin:0 0 4px}
.mast .word b{font-weight:700}
.mast .tag{text-align:center; font-style:italic; color:var(--ink-2); font-size:clamp(.95rem,2vw,1.15rem); margin:0 0 22px}
.mast .tag .of{font-style:normal; font-variant:small-caps; letter-spacing:.04em}

/* ---------- nav ---------- */
nav.main{border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
nav.main .wrap{display:flex; align-items:stretch; justify-content:center; gap:0; flex-wrap:wrap}
nav.main a{font-family:var(--grot); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  padding:14px 18px; position:relative; color:var(--ink)}
nav.main a .num{font-size:.6rem; color:var(--ink-2); vertical-align:super; margin-right:3px}
nav.main a::after{content:""; position:absolute; left:18px; right:18px; bottom:9px; height:2px; background:var(--leaf-2);
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease}
nav.main a:hover::after,nav.main a[aria-current]::after{transform:scaleX(1)}
nav.main a[aria-current]{color:var(--leaf)}
.navtoggle{display:none}

/* ---------- front page grid ---------- */
main{padding:34px 0 8px}
.front{display:grid; grid-template-columns:1.55fr 1px 1fr; gap:0 34px}
.rule-v{background:var(--rule)}
.lead .kick{color:var(--leaf)}
.lead h1{font-size:clamp(2rem,4.6vw,3.5rem); line-height:1.04; letter-spacing:-.018em; margin:.35em 0 .25em; font-weight:700}
.lead h1 a:hover{color:var(--leaf)}
.lead .stand{font-size:1.18rem; color:var(--ink-2); margin:0 0 18px; max-width:34ch}
.lead .stand a.read{color:var(--ink); border-bottom:1px solid var(--leaf-2)}

/* opt-in image plate (carbon-aware: nothing loads until asked) */
.plate{border:1px solid var(--rule); background:var(--paper-2); position:relative; aspect-ratio:16/9; overflow:hidden; margin:0 0 16px}
.plate figcaption{position:absolute; left:0; right:0; bottom:0; padding:8px 12px; font-family:var(--grot); font-size:.68rem;
  letter-spacing:.04em; color:var(--ink-2); display:flex; justify-content:space-between; gap:10px; background:linear-gradient(transparent,var(--paper-2))}
.loadimg{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px;
  font-family:var(--grot); cursor:pointer; background:repeating-linear-gradient(135deg,var(--paper-2),var(--paper-2) 11px,var(--paper) 11px,var(--paper) 22px)}
.loadimg .play{width:42px;height:42px;border:1.5px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem}
.loadimg small{font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.plate.on .loadimg{display:none}
.art{position:absolute; inset:0}

/* byline */
.byline{display:flex; align-items:center; gap:12px; font-family:var(--grot); font-size:.8rem; margin-top:14px; flex-wrap:wrap}
.byline .who{font-weight:600}
.byline .who a{border-bottom:1px solid var(--rule)}
.byline .who a:hover{border-color:var(--leaf-2); color:var(--leaf)}
.byline .role{color:var(--ink-2)}
.byline .sep{color:var(--rule)}
.chip{font-family:var(--grot); font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; border:1px solid var(--rule);
  padding:3px 8px; border-radius:999px; color:var(--ink-2); display:inline-flex; gap:5px; align-items:center}
.chip.ok{color:var(--signal); border-color:color-mix(in srgb,var(--signal) 45%,var(--rule))}
.chip .dot{width:6px;height:6px}

/* sidebar brief */
.brief h2{font-family:var(--grot); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
  border-bottom:1px solid var(--ink); padding-bottom:8px; margin:0 0 4px}
.brief ol{list-style:none; margin:0; padding:0; counter-reset:b}
.brief li{counter-increment:b; padding:15px 0; border-bottom:1px solid var(--rule); display:grid; grid-template-columns:30px 1fr; gap:12px}
.brief li::before{content:counter(b,decimal-leading-zero); font-family:var(--grot); font-size:.8rem; color:var(--leaf-2); font-weight:700}
.brief .ck{font-family:var(--grot); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
.brief h3{font-size:1.05rem; line-height:1.18; margin:3px 0 0; font-weight:700}
.brief h3 a:hover{color:var(--leaf)}
.brief .src{font-family:var(--grot); font-size:.66rem; color:var(--ink-2); margin-top:5px}

/* morning brief signup */
.signup{margin-top:26px; border:1px solid var(--ink); background:var(--paper-2); padding:18px}
.signup .kick{color:var(--leaf)}
.signup p{font-size:.95rem; color:var(--ink-2); margin:6px 0 12px}
.signup form{display:flex; gap:8px}
.signup input{flex:1; min-width:0; font-family:var(--grot); font-size:.85rem; padding:10px 12px; border:1px solid var(--rule); background:var(--paper); color:var(--ink)}
.signup button{font-family:var(--grot); font-size:.8rem; letter-spacing:.04em; padding:10px 16px; background:var(--ink); color:var(--paper); border:0; cursor:pointer; white-space:nowrap}
.signup button:hover{background:var(--leaf)}
.signup .fine{font-size:.7rem; margin:9px 0 0}

/* section divider */
.band{display:flex; align-items:center; gap:16px; margin:46px 0 22px}
.band h2{font-family:var(--grot); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; margin:0; white-space:nowrap}
.band .line{height:1px; background:var(--ink); flex:1}
.band a.more{font-family:var(--grot); font-size:.74rem; letter-spacing:.04em; color:var(--leaf); white-space:nowrap}
.band a.more:hover{color:var(--ink)}

/* article grid */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:34px 30px}
.card{border-top:1px solid var(--ink); padding-top:14px}
.card .kick{color:var(--leaf-2)}
.card h3{font-size:1.32rem; line-height:1.1; letter-spacing:-.01em; margin:.45em 0 .35em; font-weight:700}
.card h3 a:hover{color:var(--leaf)}
.card p{font-size:.95rem; color:var(--ink-2); margin:0 0 12px}
.card .meta{font-family:var(--grot); font-size:.72rem; color:var(--ink-2); display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.card .meta .src{color:var(--leaf-2)}

/* carbon ledger */
.ledger{margin:46px 0 0; background:var(--ink); color:var(--paper); border-radius:2px; overflow:hidden}
html[data-theme="lp"] .ledger{background:#000}
.ledger .inner{max-width:var(--max); margin:0 auto; padding:30px 24px; display:grid; grid-template-columns:1.3fr 2fr; gap:34px; align-items:center}
.ledger .lead-txt .kick{color:var(--signal)}
.ledger h2{font-size:1.7rem; line-height:1.1; margin:.4em 0 .3em; font-weight:700}
.ledger p{font-size:.9rem; color:#cfcabb; margin:0}
.ledger p a{color:var(--paper); border-bottom:1px solid #4a4a40}
.ledger .meter{display:flex; flex-direction:column; align-items:flex-start; gap:12px}
.ledger .meter .ph{border:1px dashed #44443a; background:#1f1e19; color:#cfcabb; font-family:var(--grot); font-size:.8rem; line-height:1.5; padding:18px 20px; border-radius:3px; max-width:340px}
html[data-theme="lp"] .ledger .meter .ph{background:#0a0a07}
.ledger .meter .ph b{color:var(--signal); font-weight:700}
.ledger .meter .cap{font-family:var(--grot); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:#9a968a}
#wcb.carbonbadge{font-family:var(--grot); margin:0}

/* footer */
footer{border-top:2px solid var(--ink); margin-top:52px; padding:40px 0 30px}
.fgrid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:30px}
.fbrand .word{font-size:1.5rem; font-weight:700; letter-spacing:-.02em}
.fbrand p{font-size:.86rem; color:var(--ink-2); max-width:34ch; margin:10px 0 0}
footer h4{font-family:var(--grot); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); margin:0 0 12px}
footer ul{list-style:none; margin:0; padding:0}
footer li{margin:0 0 9px}
footer li a{font-size:.9rem; color:var(--ink)}
footer li a:hover{color:var(--leaf)}
.colophon{border-top:1px solid var(--rule); margin-top:30px; padding-top:18px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--grot); font-size:.74rem; color:var(--ink-2)}
.colophon .grn{color:var(--signal)}

/* search overlay */
.search{position:fixed; inset:0; background:color-mix(in srgb,var(--paper) 96%,transparent); backdrop-filter:blur(3px); display:none; z-index:50; padding-top:14vh}
.search.on{display:block}
.search .box{max-width:680px; margin:0 auto; padding:0 24px}
.search label{font-family:var(--grot); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2)}
.search input{width:100%; font-family:var(--serif); font-size:clamp(1.6rem,5vw,2.6rem); background:none; border:0; border-bottom:2px solid var(--ink); color:var(--ink); padding:10px 0; margin-top:8px}
.search input:focus{outline:none; border-color:var(--leaf-2)}
.search .hint{font-family:var(--grot); font-size:.8rem; color:var(--ink-2); margin-top:16px; display:flex; gap:18px; flex-wrap:wrap}
.search .hint a{border-bottom:1px solid var(--rule)}
.search .x{position:absolute; top:22px; right:24px; font-family:var(--grot); font-size:.8rem; background:none; border:1px solid var(--rule); padding:8px 12px; cursor:pointer; color:var(--ink)}

/* load-anim */
.rise{opacity:0; transform:translateY(10px); animation:rise .7s ease forwards}
@keyframes rise{to{opacity:1; transform:none}}

@media (max-width:880px){
  .front{grid-template-columns:1fr; gap:0}
  .rule-v{display:none}
  .brief{margin-top:36px; border-top:1px solid var(--ink); padding-top:20px}
  .grid{grid-template-columns:1fr 1fr; gap:30px 24px}
  .ledger .inner{grid-template-columns:1fr; gap:22px}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  nav.main{display:flex; flex-direction:column; align-items:center}
  nav.main .wrap{display:none; width:100%}
  nav.main #nav-links.open{display:flex; flex-direction:column}
  nav.main a{width:100%; padding:12px 0; text-align:center}
  .navtoggle{display:inline-flex; margin:8px auto; padding:10px}
  .grid{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .signup form{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
}

/* ---------- single article + pages ---------- */
.article-wrap{max-width:760px}
.single{padding:34px 0 10px}
.single .kick{color:var(--leaf); font-family:var(--grot); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700}
.single-title{font-size:clamp(2rem,5vw,3.2rem); line-height:1.05; letter-spacing:-.018em; margin:.3em 0 .35em; font-weight:700}
.single .byline{margin:0 0 22px}
.single .prose{font-size:1.16rem; line-height:1.62}
.single .prose > p:first-of-type::first-letter{float:left; font-size:3.4em; line-height:.78; padding:.05em .08em 0 0; font-weight:700; color:var(--leaf)}
.single .prose p{margin:0 0 1.2em}
.single .prose h2{font-size:1.7rem; line-height:1.15; margin:1.6em 0 .4em; letter-spacing:-.01em}
.single .prose h3{font-size:1.3rem; margin:1.4em 0 .3em}
.single .prose a{color:var(--leaf); border-bottom:1px solid var(--rule)}
.single .prose a:hover{border-color:var(--leaf-2)}
.single .prose blockquote{margin:1.4em 0; padding:.2em 0 .2em 1.1em; border-left:3px solid var(--leaf-2); font-style:italic; color:var(--ink-2)}
.single .prose img{margin:1.4em 0; border:1px solid var(--rule)}
.single .prose ul,.single .prose ol{margin:0 0 1.2em 1.2em}
.single .prose li{margin:.3em 0}
.single .tags{display:flex; gap:8px; flex-wrap:wrap; margin:30px 0 0}
.single .tags .chip{font-family:var(--grot); font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; border:1px solid var(--rule); padding:5px 11px; border-radius:999px; color:var(--ink-2)}
.single .tags .chip:hover{border-color:var(--leaf-2); color:var(--leaf)}
.single .back{margin:34px 0 0; font-family:var(--grot); font-size:.85rem}
.single .back a{color:var(--leaf); border-bottom:1px solid var(--rule)}
.single .article-wrap .plate{margin:0 0 26px}
.nav-links{display:flex; gap:18px}
.nav-links a{color:var(--leaf)}
.page-numbers{padding:4px 8px; border:1px solid var(--rule); margin-right:4px}
.page-numbers.current{background:var(--ink); color:var(--paper)}

/* assigned nav menu (li wrappers) match bare-link layout */
nav.main ul{display:contents}
nav.main li{display:contents}
nav.main .current-menu-item > a,nav.main .current_page_item > a{color:var(--leaf)}

/* ---------- post share buttons ---------- */
.share{display:flex; align-items:center; gap:10px; margin:0 0 26px; font-family:var(--grot)}
.share .share-label{font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2)}
.share a{font-size:.78rem; letter-spacing:.02em; padding:5px 12px; border:1px solid var(--rule); border-radius:999px; color:var(--ink)}
.share a:hover{border-color:var(--leaf-2); color:var(--leaf)}
