/* The Intelligent Economy — site.css
   Merged from the design export helmets (Homepage/Episodes/Episode/Articles/
   Article/Guests/Guest) + self-hosted fonts + mobile drawer + generated
   hover rules (appended by build-static.mjs / shared with the WP theme). */

/* ---------- fonts (self-hosted, latin subsets) ---------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/fraunces-normal-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/fraunces-italic-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-normal-latin.woff2') format('woff2');
}

/* ---------- base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body {
  background: var(--offwhite, #F8FAF8);
  color: var(--charcoal, #1C2421);
  -webkit-font-smoothing: antialiased;
  font-family: 'Inter', system-ui, sans-serif;
}
a { color: inherit; text-decoration: none }
a:hover { color: var(--emerald, #1F6B55) }
::selection { background: #8FAF9B; color: #0F3D32 }

@keyframes wave { 0%, 100% { transform: scaleY(0.35) } 50% { transform: scaleY(1) } }
@keyframes fadeup { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
.reveal { opacity: 1; animation: fadeup .8s cubic-bezier(.2, .7, .2, 1) both }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; animation: none !important } }

/* waveform pause state (Episode player + homepage featured) */
.wf.paused span { animation-play-state: paused !important }

/* Safari still wants the -webkit- prefix on backdrop-filter; the prerender
   dropped it from inline styles, so restore it for the sticky nav */
nav[style*="backdrop-filter"] { -webkit-backdrop-filter: blur(16px) }

/* ---------- homepage topic cards ---------- */
.topic-card .tc-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .4s cubic-bezier(.2, .7, .2, 1); pointer-events: none }
.topic-card .tc-grad { background: linear-gradient(155deg, var(--forest), #0b2c24 62%, var(--emerald)) }
.topic-card .tc-dots { background-image: radial-gradient(rgba(220, 232, 225, .16) 1.2px, transparent 1.2px); background-size: 18px 18px }
.topic-card .tc-shape { background: radial-gradient(circle at 78% 18%, rgba(143, 175, 155, .5), transparent 42%), radial-gradient(circle at 12% 92%, rgba(31, 107, 85, .55), transparent 45%) }
.topic-card:hover .tc-layer { opacity: 1 }
.topic-card:hover { border-color: transparent !important }
.topic-card:hover .tc-icon { background: rgba(220, 232, 225, .14) !important; border-color: rgba(220, 232, 225, .22) !important; color: #EAF2ED !important }
.topic-card:hover .tc-name { color: #fff !important }
.topic-card:hover .tc-count { color: var(--sage) !important }
.topic-card:hover .tc-frame { color: #c5d6cd !important }

/* ---------- article prose ---------- */
.prose p { font-size: 18px; line-height: 1.8; color: #2d3a34; margin-bottom: 22px }
.prose h2 { font-family: 'Fraunces'; font-weight: 400; font-size: 28px; letter-spacing: -.02em; margin: 40px 0 14px; scroll-margin-top: 96px }
.prose .drop::first-letter { font-family: 'Fraunces'; float: left; font-size: 76px; line-height: .72; padding: 8px 12px 0 0; color: var(--forest, #0F3D32) }

/* ---------- responsive (from the export helmets) ---------- */
@media (max-width: 1080px) {
  .streamgrid { grid-template-columns: 1fr !important }
  .streamrule { display: none !important }
}
@media (max-width: 960px) {
  .artHero, .artBody { grid-template-columns: 1fr !important }
  .artBody aside { position: static !important }
}
@media (max-width: 860px) {
  .navlinks { display: none !important }
  .herogrid, .featgrid, .aboutgrid { grid-template-columns: 1fr !important }
  .entrygrid { grid-template-columns: 1fr !important }
  .footgrid { grid-template-columns: 1fr 1fr !important }
  .bodygrid { grid-template-columns: 1fr !important }
  .bodygrid aside { position: static !important }
  .profgrid { grid-template-columns: 1fr !important }
  .feat { grid-template-columns: 1fr !important }
}

@media (max-width: 640px) {
  /* the wordmark + divider crowd out the Listen pill and menu button on
     phones — keep the TIE badge only */
  nav [style*="font-size: 19px"], nav [style*="font-size:19px"] { display: none !important }
  nav [style*="width: 1px"], nav [style*="width:1px"] { display: none !important }
  nav { gap: 12px !important }
}

/* grid/flex children refuse to shrink below min-content by default; one long
   token would widen the page (README playbook, Phase 4) */
[style*="display: grid"] > *, [style*="display: flex"] > *,
[style*="display:grid"] > *, [style*="display:flex"] > * { min-width: 0 }

/* ---------- mobile menu (added: export hid nav links under 860px with no
   replacement, so subpages were unreachable on phones) ---------- */
.menu-btn {
  display: none;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line); border-radius: 50%;
  background: transparent; cursor: pointer; color: var(--charcoal);
}
@media (max-width: 860px) { .menu-btn { display: grid } }
.nav-drawer { position: fixed; inset: 0; z-index: 90; overflow: hidden; display: none }
.nav-drawer.is-open { display: block }
.nav-drawer__scrim { position: absolute; inset: 0; background: rgba(15, 61, 50, .35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px) }
.nav-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(320px, 86vw);
  background: var(--offwhite, #F8FAF8);
  box-shadow: -30px 0 60px -30px rgba(0, 0, 0, .35);
  padding: 22px;
  display: flex; flex-direction: column; gap: 6px;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.nav-drawer.is-open .nav-drawer__panel { transform: none }
.nav-drawer__close {
  align-self: flex-end;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line); border-radius: 50%;
  background: transparent; cursor: pointer; font-size: 18px; color: var(--charcoal);
}
.nav-drawer__panel a {
  padding: 14px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 16px; font-weight: 500;
  font-family: 'Fraunces';
}

/* ---------- search overlay + floating player (injected blocks) ---------- */
[data-js="search-overlay"][hidden], [data-js="player"][hidden], [data-js="empty"][hidden] { display: none !important }
.hv-sugg:hover { background: var(--sage) !important }

/* WP article content: drop cap on the opening paragraph (static export used
   an explicit .drop class; WP content gets it from the wrapper) */
.prose--dropcap > p:first-of-type::first-letter {
  font-family: 'Fraunces'; float: left; font-size: 76px; line-height: .72;
  padding: 8px 12px 0 0; color: var(--forest, #0F3D32);
}

/* generated hover rules appended below by the build */

/* generated: template style-hover -> hover classes (inline styles need !important to lose) */
.hv0:hover { border-color:var(--emerald) !important; color:var(--emerald) !important }
.hv1:hover { background:var(--emerald) !important; color:#fff !important }
.hv2:hover { transform:translateY(-3px) !important; box-shadow:0 26px 50px -22px rgba(15,61,50,.65) !important }
.hv3:hover { transform:translateY(-3px) !important; border-color:var(--sage) !important; box-shadow:0 26px 50px -22px rgba(15,61,50,.5) !important }
.hv4:hover { transform:scale(1.04) !important }
.hv5:hover { background:var(--emerald) !important }
.hv6:hover { background:#fff !important; transform:translateX(3px) !important }
.hv7:hover { transform:translateY(-2px) !important }
.hv8:hover { transform:translateY(-3px) !important; box-shadow:0 22px 40px -24px rgba(15,61,50,.6) !important }
.hv9:hover { transform:translateY(-4px) !important; box-shadow:0 24px 44px -28px rgba(15,61,50,.4) !important }
.hv10:hover { transform:translateY(-4px) !important; box-shadow:0 24px 44px -26px rgba(15,61,50,.6) !important }
.hv11:hover { transform:scale(1.03) !important }
.hv12:hover { transform:scale(1.05) !important }
.hv13:hover { color:var(--emerald) !important }
.hv14:hover { transform:translateY(-4px) !important; box-shadow:0 22px 40px -28px rgba(15,61,50,.4) !important }
.hv15:hover { box-shadow:0 30px 60px -40px rgba(15,61,50,.4) !important }
.hv16:hover { border-color:var(--emerald) !important }
.hv-lift:hover { transform: translateY(-4px) !important; box-shadow: 0 22px 40px -28px rgba(15,61,50,.4) !important }