/* The Cleaner Energy design layer — D (minimal data-forward) structure, recolored with A's
   (Sky & Horizon) blue/gold palette instead of D's original black/red.
   Self-hosted fonts, both latin + latin-ext per unicode-range. */

@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 700 900; font-display: swap;
  src: url('../uploads/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 700 900; font-display: swap;
  src: url('../uploads/fonts/archivo-latinext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url('../uploads/fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Newsreader'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url('../uploads/fonts/newsreader-latinext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../uploads/fonts/plexmono500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../uploads/fonts/plexmono500-latinext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../uploads/fonts/plexmono700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../uploads/fonts/plexmono700-latinext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+A720-A7FF;
}

:root{
  /* D's structure, A's coloring. Round 3 (owner: "liked the black tone and some red fonts in
     it" from the original D mockup): the hero PANEL specifically goes back to a warm near-black
     (not pure navy, not pure D-black either) and red returns as a genuine second accent
     alongside gold, used only in the hero — the rest of the site (nav, footer, cards) stays on
     the blue/gold system so it doesn't fragment into three competing accent colors. */
  --ink:#0B2740; --paper:#EAF4FB; --panel:#0B3D5C; --horizon:#1C6FA8; --gold:#E8A93B;
  --gold-deep:#B5822E; --textp:#1B2B38; --textm:#5B6B78; --hair:#C9DCE8; --white:#FFFFFF;
  --hero-black:#160F0C; --signal-red:#E8503A;
}

body{ margin:0; background:var(--paper); color:var(--textp); font-family:'Newsreader',serif; line-height:1.6; }
h1,h2,.main-title{ font-family:'Archivo',sans-serif; font-weight:900; letter-spacing:-.01em; }
.main-title a{ color:var(--ink) !important; text-decoration:none; font-size:20px; text-transform:uppercase; }

/* Owner feedback 2026-07-25: "color scheme is very cold" — warmed up with gold in every band
   that previously carried only navy/blue: header rule, nav hover, hero panel edge, ticker
   frame, card accent mix, footer divider and heading. */
.site-header, #masthead{ background:var(--paper) !important; border-bottom:2px solid var(--gold); }
.main-navigation{ background:var(--paper) !important; }
.main-navigation .main-nav ul li a{
  color:var(--ink) !important; font-size:13px; text-transform:uppercase;
  font-family:'IBM Plex Mono',monospace; font-weight:500;
}
.main-navigation .main-nav ul li a:hover{ color:var(--gold-deep) !important; }
.main-navigation .main-nav ul ul{ background:var(--white); border:1px solid var(--hair); }

/* ---------- hero (front page only) ---------- */
.tce-hero{ position:relative; height:min(80svh,780px); min-height:560px; display:flex; align-items:flex-end; overflow:hidden; background:var(--hero-black); }
@supports not (height:1svh){ .tce-hero{ height:min(80vh,780px); } }
.tce-hero__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1;
  /* pushed warmer again per round-4 feedback: less desaturation, more sepia lift */
  filter:grayscale(.4) sepia(.28) contrast(1.08) brightness(.97) saturate(1.15);
}
/* D's own device: an OPAQUE caption panel over one region of the frame, not a full scrim — most
   of the image stays completely unobscured. Tint pushed warmer (amber/rust wash instead of the
   round-3 navy-to-gold wash) to match the warmer image grade. */
.tce-hero__tint{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(22,15,12,.34) 0%, rgba(200,110,50,.14) 100%); }
.tce-hero__wrap{ position:relative; z-index:2; max-width:1160px; margin:0 auto; padding:0 24px; width:100%; display:flex; justify-content:center; }
/* Round 4 (owner: liked D's centered, smaller, near-black panel with red accents): narrower,
   less padding, smaller title, slightly transparent so more of the photo reads through. */
.tce-hero__panel{
  background:rgba(22,15,12,.88); padding:28px 30px; max-width:460px; margin-bottom:48px;
  border-left:4px solid var(--signal-red); backdrop-filter:blur(1px);
}
.tce-hero__kicker{ font-family:'IBM Plex Mono',monospace; color:var(--signal-red); font-size:12px; letter-spacing:.08em; margin:0 0 12px; }
.tce-hero__title{ color:#fff; font-size:clamp(24px,3.6vw,36px); line-height:1.12; margin:0; }
.tce-hero__sub{ color:#e8d9d0; margin:14px 0 0; font-size:15px; font-family:'Newsreader',serif; }
.tce-hero__cta{
  display:inline-block; margin-top:18px; color:var(--signal-red); font-family:'IBM Plex Mono',monospace;
  font-size:13px; text-decoration:underline; text-underline-offset:3px;
}

.tce-ticker{
  background:var(--ink); color:#fff; padding:14px 24px; font-family:'IBM Plex Mono',monospace;
  border-top:2px solid var(--gold); border-bottom:2px solid var(--gold);
  font-size:13px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; text-align:center;
}
.tce-ticker span{ color:var(--gold); font-weight:700; }

@media (max-width:768px){
  .tce-hero{ height:min(72svh,640px); min-height:480px; }
  @supports not (height:1svh){ .tce-hero{ height:min(72vh,640px); } }
  .tce-hero__panel{ max-width:100%; padding:26px 20px; }
}

/* ---------- intro block with faint background photo ----------
   Owner feedback round 2: the standalone sunflower band "isn't good... linking to nowhere."
   Replaced with a very-low-opacity background behind the intro text only — never a showcase
   image, never competing with the text sitting on top of it. The ::before pseudo-element carries
   the opacity (not the block itself) so the paper-colored base still fully backs the text and
   nothing washes out at low contrast. */
.tce-intro-block{ position:relative; background-size:cover; background-position:center 30%; margin:0 0 32px; border-radius:6px; overflow:hidden; }
.tce-intro-block::before{
  content:''; position:absolute; inset:0; background:inherit; background-size:cover;
  background-position:inherit; opacity:.14;
}
.tce-intro-block__inner{ position:relative; z-index:1; background:rgba(234,244,251,.78); padding:28px 26px; }
.tce-intro-block .tce-intro{ margin-top:0; }

/* ---------- topic rail + hub cards ---------- */
section.tce-section, .entry-content{ }
.tce-cards{ list-style:none; margin:0 0 40px; padding:0; display:grid; grid-template-columns:repeat(4, minmax(min(200px,100%),1fr)); border:1px solid var(--hair); background:var(--hair); gap:1px; }
.tce-cards--hubs{ grid-template-columns:repeat(2, minmax(min(280px,100%),1fr)); background:transparent; border:none; gap:16px; }
.tce-card{
  display:block; background:var(--white); border-top:3px solid var(--c,var(--horizon));
  padding:22px 18px; text-align:center; text-decoration:none;
}
.tce-card__title{
  font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase;
  letter-spacing:.03em; color:var(--textp); font-weight:500;
}
.tce-card--hub{ text-align:left; border:1px solid var(--hair); border-top:3px solid var(--gold); overflow:hidden; }
.tce-card--hub .tce-card__media img{ width:100%; height:180px; object-fit:cover; display:block; filter:grayscale(.35) sepia(.12); }
.tce-card--hub .tce-card__body{ padding:20px; }
.tce-card--hub .tce-card__title2{ font-family:'Archivo',sans-serif; font-weight:900; font-size:19px; margin:0 0 8px; color:var(--ink); }
.tce-card--hub .tce-card__desc{ font-size:14px; color:var(--textm); margin:0; font-family:'Newsreader',serif; }

/* ---------- WP post/archive loop cards ---------- */
main article.type-post .post-image img{ filter:grayscale(.35) sepia(.1); }
.blog .inside-article, .archive .inside-article, .category .inside-article{
  border:1px solid var(--hair); background:var(--white);
}

/* ---------- footer ---------- */
.tce-trust{
  background:var(--ink); color:var(--gold); text-align:center; padding:28px 24px;
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.02em;
  border-bottom:1px solid rgba(232,169,59,.3);
}
.tce-footer-wrap{ background:var(--panel); }
.tce-footer{ max-width:1160px; margin:0 auto; padding:44px 24px; display:grid; grid-template-columns:2fr 1fr; gap:32px; color:#cfe0ec; font-size:14px; border-top:3px solid var(--gold); }
.tce-footer__brand{ font-family:'Archivo',sans-serif; color:var(--gold); font-size:18px; text-transform:uppercase; margin:0 0 10px; }
.tce-footer__blurb{ line-height:1.6; margin:0; max-width:520px; }
.tce-footer__heading{ font-family:'IBM Plex Mono',monospace; font-weight:700; color:var(--gold); margin:0 0 10px; text-transform:uppercase; font-size:12px; letter-spacing:.05em; }
.tce-footer__links{ list-style:none; padding:0; margin:0; }
.tce-footer__links li{ margin-bottom:8px; }
.tce-footer__links a{ color:#cfe0ec; text-decoration:none; }
.tce-footer__links a:hover{ color:var(--gold); }

/* ---------- mobile ---------- */
@media (max-width:800px){
  .tce-cards{ grid-template-columns:1fr; }
  .tce-cards--hubs{ grid-template-columns:1fr; }
  .tce-footer{ grid-template-columns:1fr; }
}