/* ============================================================
   Energy Digest: shared styles for the landing and podcast pages.
   The tracker page (/tracker/) keeps its own self-contained styles.
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --cream:#F7EFE7;          /* must match BLOB_CONFIG.cream in assets/blob.js */
  --ink:#100F0D;
  --soft:rgba(16,15,13,.62);
  --rule:rgba(16,15,13,.18);
  --rule-soft:rgba(16,15,13,.10);
  --card:#FCF8F3;
  --accent:#B0730F;
  --accent-on-dark:#E9CC6F;
  --shadow:0 1px 2px rgba(16,15,13,.05), 0 14px 34px -18px rgba(16,15,13,.28);
  --maxw:1180px;
}

html{scroll-behavior:smooth}
body{
  background:var(--cream); color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.serif{font-family:'Fraunces',Georgia,serif}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(247,239,231,.86);
     backdrop-filter:saturate(140%) blur(10px);
     border-bottom:1px solid var(--rule-soft)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;
           height:64px;gap:16px}
.brand{display:flex;align-items:center;gap:11px;
       font-family:'Fraunces',Georgia,serif;font-weight:600;
       font-size:1.26rem;letter-spacing:-.01em}
.brand .mark{width:12px;height:12px;background:var(--accent);
             border-radius:2px;transform:rotate(45deg);flex:none}
.navlinks{display:flex;gap:9px}
.pill{border:1px solid var(--rule);border-radius:999px;background:transparent;
      padding:9px 17px;font-family:'IBM Plex Mono',monospace;font-size:.68rem;
      letter-spacing:.13em;text-transform:uppercase;color:var(--ink);
      cursor:pointer;white-space:nowrap;transition:background .18s,border-color .18s}
.pill:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.pill[aria-current="page"]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
@media(max-width:640px){
  .nav .wrap{height:auto;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
  .pill{padding:8px 13px;font-size:.62rem;letter-spacing:.1em}
}

/* ---------- HERO with blob ---------- */
.stage{position:relative;overflow:hidden;isolation:isolate}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;
              display:block;z-index:0;pointer-events:none}
.stage .inner{position:relative;z-index:1}

.hero-home{min-height:min(84svh,820px);display:grid;place-items:center;
           padding:clamp(56px,9vw,110px) 0}
.hero-home h1{font-family:'Fraunces',Georgia,serif;font-weight:600;
              /* twice the previous size; max-width lifted so the forced
                 break is the only one, and the line cannot rewrap */
              font-size:clamp(3.4rem,13vw,10.8rem);line-height:.92;
              letter-spacing:-.035em;text-align:center;max-width:none;margin:0 auto;
              text-wrap:balance}
.hero-home h1 br{display:block}
.hero-home .lede{margin:30px auto 0;max-width:56ch;text-align:center;
                 font-size:clamp(1.02rem,1.5vw,1.22rem);color:var(--soft)}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:.72rem;
         letter-spacing:.18em;text-transform:uppercase;color:var(--soft);
         text-align:center;margin-bottom:18px}

/* ---------- TWO ENTRY CARDS ---------- */
.entries{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,28px);
         padding:clamp(28px,5vw,64px) 0 clamp(48px,7vw,88px)}
@media(max-width:760px){.entries{grid-template-columns:1fr}}

.entry{display:block;background:var(--card);border:1px solid var(--rule-soft);
       border-radius:16px;overflow:hidden;box-shadow:var(--shadow);
       transition:transform .24s cubic-bezier(.2,.7,.3,1), box-shadow .24s}
.entry:hover{transform:translateY(-4px);
             box-shadow:0 2px 4px rgba(16,15,13,.06),0 26px 48px -20px rgba(16,15,13,.34)}
.entry:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.entry .media{aspect-ratio:16/10;background:#EFE6DA;background-size:cover;
              background-position:center;display:block;width:100%;
              border-bottom:1px solid var(--rule-soft)}
.entry .body{display:block;padding:clamp(20px,2.4vw,30px)}
.entry .kicker{font-family:'IBM Plex Mono',monospace;font-size:.64rem;
               letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.entry h2{font-family:'Fraunces',Georgia,serif;font-weight:600;
          font-size:clamp(1.4rem,2.3vw,1.92rem);line-height:1.1;
          letter-spacing:-.02em;margin:10px 0 8px}
.entry p{color:var(--soft);font-size:.95rem;max-width:44ch}
.entry .go{display:inline-flex;align-items:center;gap:8px;margin-top:16px;
           font-family:'IBM Plex Mono',monospace;font-size:.68rem;
           letter-spacing:.13em;text-transform:uppercase}
.entry .go span{transition:transform .2s}
.entry:hover .go span{transform:translateX(4px)}

/* ---------- SECTION HEADS ---------- */
.sechead{padding:clamp(40px,6vw,72px) 0 clamp(18px,2.4vw,28px)}
.sechead h1,.sechead h2{font-family:'Fraunces',Georgia,serif;font-weight:600;
        font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.02;letter-spacing:-.025em}
.sechead p{margin-top:14px;max-width:62ch;color:var(--soft)}

/* ---------- EPISODE GRID ---------- */
.eplist{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
        gap:clamp(16px,2.2vw,26px);padding-bottom:clamp(48px,7vw,88px)}
.ep{display:flex;flex-direction:column;background:var(--card);
    border:1px solid var(--rule-soft);border-radius:14px;overflow:hidden;
    box-shadow:var(--shadow);transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s}
.ep:hover{transform:translateY(-3px);
          box-shadow:0 2px 4px rgba(16,15,13,.06),0 22px 40px -20px rgba(16,15,13,.32)}
.ep .media{aspect-ratio:16/9;background:#EFE6DA;background-size:cover;background-position:center;
           border-bottom:1px solid var(--rule-soft)}
.ep .body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.ep .meta{font-family:'IBM Plex Mono',monospace;font-size:.63rem;letter-spacing:.14em;
          text-transform:uppercase;color:var(--soft);
          display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ep .meta .num{color:var(--accent)}
.ep h3{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.22rem;
       line-height:1.16;letter-spacing:-.015em}
.ep .guest{font-size:.9rem;font-weight:500}
.ep .blurb{font-size:.9rem;color:var(--soft);margin-top:2px}

/* ---------- EPISODE PAGE ---------- */
.ephero{padding-block:clamp(38px,6vw,74px) clamp(24px,3vw,38px)}
.ephero .backlink{font-family:'IBM Plex Mono',monospace;font-size:.66rem;
                  letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.ephero .backlink:hover{color:var(--ink)}
.ephero h1{font-family:'Fraunces',Georgia,serif;font-weight:600;
           font-size:clamp(2rem,5vw,3.5rem);line-height:1.02;
           letter-spacing:-.025em;margin:18px 0 0;max-width:22ch}
.ephero .sub{margin-top:16px;font-size:1.06rem;color:var(--soft);max-width:60ch}
.epmeta{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;
        font-family:'IBM Plex Mono',monospace;font-size:.66rem;
        letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}

.player{margin:clamp(20px,3vw,34px) 0;border:1px solid var(--rule);
        border-radius:14px;background:var(--card);padding:18px;box-shadow:var(--shadow)}
.player audio{width:100%;display:block}
.embed{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#EFE6DA}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.epgrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;
        gap:clamp(28px,4vw,56px);padding-bottom:clamp(48px,7vw,88px);align-items:start}
@media(max-width:900px){.epgrid{grid-template-columns:1fr}}

.prose h2{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.5rem;
          letter-spacing:-.015em;margin:34px 0 12px}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 14px;max-width:68ch}
.prose ul,.prose ol{margin:0 0 16px 20px;max-width:66ch}
.prose li{margin-bottom:7px}
.prose blockquote{margin:20px 0;padding:14px 20px;border-left:3px solid var(--accent);
                  background:var(--card);border-radius:0 8px 8px 0;
                  font-family:'Fraunces',Georgia,serif;font-size:1.1rem;line-height:1.5}

.aside{border:1px solid var(--rule-soft);border-radius:14px;background:var(--card);
       padding:22px;position:sticky;top:88px;box-shadow:var(--shadow)}
.aside h3{font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.16em;
          text-transform:uppercase;color:var(--soft);margin-bottom:12px}
.aside ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.aside a{font-size:.92rem}
.aside a:hover{text-decoration:underline;text-underline-offset:3px}
.aside a::after{content:"\2197";margin-left:4px;font-size:.74em;line-height:1;
  color:var(--accent);opacity:.6;transition:opacity .15s,transform .15s}
.aside a:hover::after{opacity:1;transform:translate(1px,-1px)}
.aside a[href^="../"]::after{content:"\2192"}

.timestamps{list-style:none;margin:0;display:flex;flex-direction:column;gap:8px}
.timestamps li{display:flex;gap:14px;font-size:.94rem;
               padding-bottom:8px;border-bottom:1px solid var(--rule-soft)}
.timestamps .t{font-family:'IBM Plex Mono',monospace;font-size:.8rem;
               color:var(--accent);flex:none;min-width:52px}

.epnav{display:grid;grid-template-columns:1fr 1fr;gap:14px;
       border-top:1px solid var(--rule-soft);
       padding-block:26px clamp(48px,7vw,80px)}
@media(max-width:640px){.epnav{grid-template-columns:1fr}}
.epnav a{border:1px solid var(--rule-soft);border-radius:12px;padding:18px 20px;
         background:var(--card);transition:border-color .18s}
.epnav a:hover{border-color:var(--ink)}
.epnav .dir{font-family:'IBM Plex Mono',monospace;font-size:.62rem;
            letter-spacing:.15em;text-transform:uppercase;color:var(--soft)}
.epnav .ttl{font-family:'Fraunces',Georgia,serif;font-weight:600;
            font-size:1.06rem;margin-top:6px;line-height:1.2}
.epnav .next{text-align:right}

/* ---------- FOOTER ---------- */
.foot{border-top:1px solid var(--rule-soft);padding:34px 0 46px;
      color:var(--soft);font-size:.86rem}
.foot .wrap{display:flex}
.foot a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- EMPTY STATE ---------- */
.empty{border:1px dashed var(--rule);border-radius:14px;padding:46px 28px;
       text-align:center;color:var(--soft);margin-bottom:60px}

/* ============================================================
   PODCAST INDEX
   Hero with a cycling deck of quote cards, then the full listing.
   ============================================================ */

.pod-hero{border-bottom:1px solid var(--hair);
  padding:clamp(34px,6vw,74px) 0 clamp(38px,6vw,78px)}
.pod-hero .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(28px,5vw,68px);align-items:center}
@media(max-width:920px){.pod-hero .grid{grid-template-columns:1fr;gap:36px}}

.pod-hero h1{font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:clamp(2.3rem,5.4vw,4rem);line-height:1.0;letter-spacing:-.03em;
  max-width:15ch;margin:14px 0 0}
.pod-hero .lede{margin-top:20px;max-width:46ch;font-size:clamp(1rem,1.35vw,1.12rem);
  color:var(--soft)}

/* ---- the deck: square tiles that cascade in one after another ----
   Not a carousel. They arrive in sequence and stay, trailing back and
   down-left from the front tile, the way the EpicWorld hero does. */
.deck{position:relative;width:min(100%,430px);aspect-ratio:1/1;margin-left:auto}
@media(max-width:920px){.deck{margin:0}}

.deck a{position:absolute;width:62%;aspect-ratio:1/1;border-radius:14px;
  overflow:hidden;border:1px solid var(--hair);background:var(--sunk,#F1E8DC);
  box-shadow:0 2px 4px rgba(16,15,13,.06),0 22px 44px -24px rgba(16,15,13,.40);
  opacity:0;transform:translate(-14px,18px) scale(.94);
  transition:opacity .62s cubic-bezier(.2,.7,.3,1),
             transform .62s cubic-bezier(.2,.7,.3,1),
             box-shadow .28s}
.deck a img{width:100%;height:100%;object-fit:cover;display:block}

/* resting positions, back of the trail to the front */
.deck a[data-i="0"]{left:0;    top:38%; z-index:1}
.deck a[data-i="1"]{left:12.6%;top:25.3%;z-index:2}
.deck a[data-i="2"]{left:25.2%;top:12.6%;z-index:3}
.deck a[data-i="3"]{left:38%;  top:0;   z-index:4}

/* each tile fades up into place; the trail sits back a little */
.deck a.in{transform:translate(0,0) scale(1)}
.deck a[data-i="0"].in{opacity:.62}
.deck a[data-i="1"].in{opacity:.76}
.deck a[data-i="2"].in{opacity:.88}
.deck a[data-i="3"].in{opacity:1}

.deck a:hover{opacity:1;z-index:5;
  box-shadow:0 3px 6px rgba(16,15,13,.08),0 30px 56px -22px rgba(16,15,13,.5)}
.deck a.in:hover{transform:translate(0,-5px) scale(1.02)}
.deck a:focus-visible{outline:2px solid var(--ink);outline-offset:4px;opacity:1;z-index:5}

.deck .cap{position:absolute;left:0;right:0;bottom:0;padding:30px 13px 11px;
  background:linear-gradient(to top,rgba(16,15,13,.78),rgba(16,15,13,0));
  color:var(--cream);font-family:'IBM Plex Mono',monospace;font-size:.57rem;
  letter-spacing:.12em;text-transform:uppercase;line-height:1.35}

@media(prefers-reduced-motion:reduce){
  .deck a{transition:none;opacity:1;transform:none}
}

/* ---- the listing: an alternating mosaic ----
   Each block is one tall card beside two wide ones. The tall card
   swaps sides block to block, so the page does not read as a table. */
.pod-list{padding-block:clamp(34px,5vw,60px) clamp(56px,8vw,96px)}
.pod-list .head{display:flex;align-items:baseline;gap:16px;margin-bottom:26px;
  color:rgba(16,15,13,.40)}
.pod-list .head:after{content:"";flex:1;height:1px;background:var(--rule)}

/* Two columns, no row spanning. The tall card is one column; the two wide
   cards live in a nested stack in the other. Spanning rows meant the grid
   padded the spanned tracks whenever the columns disagreed on height, which
   is what produced the gaps. Columns now just end where their content ends. */
.mosaic{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(14px,1.6vw,20px);margin-bottom:clamp(14px,1.6vw,20px);
  align-items:start}
.mostack{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px);min-width:0}
.mosaic[data-side="right"] .mo.tall{order:2}
.mosaic[data-side="right"] .mostack{order:1}
@media(max-width:880px){
  .mosaic{grid-template-columns:1fr}
  .mosaic[data-side="right"] .mo.tall,
  .mosaic[data-side="right"] .mostack{order:0}
}

.mo{display:block;overflow:hidden;background:var(--card);color:var(--ink);
  border:1px solid var(--rule-soft);border-radius:14px;box-shadow:var(--shadow);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),border-color .22s}
.mo:hover{transform:translateY(-3px);border-color:var(--rule)}
.mo:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.mo .shot{position:relative;display:block;background:#EFE6DA;overflow:hidden}
.mo .shot img{width:100%;height:100%;object-fit:cover;display:block}
/* the badge sits on the artwork, so it stays dark for contrast */
.mo .dur{position:absolute;left:11px;bottom:11px;display:inline-flex;align-items:center;
  gap:6px;background:rgba(16,15,13,.86);color:var(--cream);padding:5px 9px;border-radius:3px;
  font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.08em}
.mo .dur svg{width:11px;height:11px;fill:currentColor}

.mo .body{padding:clamp(15px,1.6vw,21px);display:flex;flex-direction:column;gap:7px}
.mo .blurb{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.mo.tall .blurb{-webkit-line-clamp:3}
.mo.w1 .blurb,.mo.w2 .blurb{-webkit-line-clamp:2}
.mo .kick{font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
.mo h3{font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:-.015em;
  line-height:1.16;color:var(--ink)}
.mo .when{font-size:.83rem;color:var(--soft)}
.mo .when b{font-weight:600;color:var(--ink)}
/* the divider between name and role, kept light so the name leads */
.mo .when em{font-style:normal;color:var(--rule);padding:0 3px}
.mo .blurb{font-size:.85rem;line-height:1.45;color:var(--soft)}
.mo .go{display:inline-flex;align-items:center;gap:9px;margin-top:2px;
  font-size:.85rem;color:var(--ink)}
.mo .go i{width:23px;height:23px;border-radius:50%;border:1px solid var(--accent);
  background:transparent;color:var(--accent);
  display:grid;place-items:center;font-style:normal;font-size:.8rem;line-height:1;
  transition:transform .2s,background .2s,color .2s}
.mo:hover .go i{transform:translateX(3px);background:var(--accent);color:var(--card)}

/* tall card: artwork on top, copy beneath */
/* The tall card spans both rows. Do NOT let the grid stretch it: align it to
   the top so it ends at its natural height. Stretching either opened a gap
   under the copy or blew the artwork up to fill the column. The artwork keeps
   a 2:1 ratio with a hard ceiling, and crops (object-fit:cover) at any width. */
.mo.tall{display:flex;flex-direction:column;align-self:start}
.mo.tall .shot{aspect-ratio:2/1;flex:0 0 auto;
  max-height:clamp(170px,22vw,300px)}
.mo.tall h3{font-size:clamp(1.2rem,1.75vw,1.5rem)}
.mo.tall .body{flex:0 0 auto}

/* wide card: artwork beside the copy */
.mo.w1,.mo.w2{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr)}
.mo.w1 .shot,.mo.w2 .shot{height:100%;min-height:150px}
.mo.w1 h3,.mo.w2 h3{font-size:clamp(1.08rem,1.4vw,1.3rem)}
@media(max-width:520px){
  .mo.w1,.mo.w2{grid-template-columns:1fr}
  .mo.w1 .shot,.mo.w2 .shot{aspect-ratio:2/1;min-height:0}
}

.empty{border:1px dashed var(--rule);border-radius:14px;padding:46px 28px;
  text-align:center;color:var(--soft);margin-bottom:60px}

/* ============================================================
   404
   ============================================================ */
/* one centred column: no artwork, the destinations carry the page */
.nf{display:flex;flex-direction:column;align-items:center;text-align:center;
  min-height:60svh;justify-content:center;
  padding-block:clamp(52px,10vw,120px) clamp(56px,10vw,124px)}

.nf .code{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent)}
.nf h1{font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:clamp(2.2rem,5.2vw,3.7rem);line-height:1.02;letter-spacing:-.03em;
  margin:14px 0 0;max-width:16ch}
.nf p.lede{margin-top:18px;max-width:48ch;color:var(--soft);
  font-size:clamp(1rem,1.3vw,1.1rem)}

.nf .ways{display:grid;gap:10px;margin-top:32px;width:100%;max-width:460px;text-align:left}
.nf .ways a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:14px;
  background:var(--card);border:1px solid var(--rule-soft);border-radius:12px;
  padding:14px 16px;box-shadow:var(--shadow);
  transition:transform .2s cubic-bezier(.2,.7,.3,1),border-color .2s}
.nf .ways a:hover{transform:translateY(-2px);border-color:var(--rule)}
.nf .ways .ic{width:34px;height:34px;border-radius:9px;background:var(--cream);
  border:1px solid var(--rule-soft);display:grid;place-items:center}
.nf .ways .ic svg{width:16px;height:16px;stroke:var(--accent);stroke-width:1.8;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
.nf .ways .t{display:block;font-weight:600;font-size:.95rem;line-height:1.25}
.nf .ways .d{display:block;font-size:.82rem;color:var(--soft);line-height:1.35;margin-top:2px}
.nf .ways .ar{font-family:'IBM Plex Mono',monospace;color:var(--accent);font-size:.9rem}