:root{
  --bg: #eef1fb;
  --bg-soft: #f5f7fd;
  --panel: #ffffff;
  --ink: #2a2d3e;
  --muted: #6b7086;
  --accent: #7e8cd6;
  --accent-dark: #5b67b8;
  --earth: #c98a5e;
  --border: #e3e7f6;
  --shadow: 0 10px 30px rgba(60, 68, 120, 0.10);
  --shadow-sm: 0 4px 14px rgba(60, 68, 120, 0.08);
  --radius: 18px;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;

  /* Warm "life force" accent — sun/citrus tone, used sparingly against the
     cool blue/grey base: logo mark, link hover, small accent details. */
  --accent-warm: #e69a2e;
  --accent-warm-dark: #c67d1a;
  --accent-warm-soft: #fdf1de;
}

*{ box-sizing:border-box; }

html, body{
  margin:0;
  padding:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

body{
  background: radial-gradient(circle at top, #f3f5fc 0%, var(--bg) 60%);
  min-height:100vh;
}

a{ color: var(--accent-dark); text-decoration:none; }
a:hover{ color: var(--accent-warm-dark); text-decoration:underline; }

.wrap{
  max-width: 880px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
.site-header{
  padding: 22px 0 10px;
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}
.brand{
  display:flex;
  align-items:baseline;
  gap:10px;
  font-family: var(--font-display);
  font-size:1.5rem;
  font-weight:700;
  color:var(--ink);
}
.brand .mark{
  display:inline-block;
  width:13.2px; height:13.2px;
  border-radius:50%;
  background: var(--accent-warm);
  box-shadow: 0 0 0 4.4px rgba(230,154,46,0.20);
}
.brand-sub{
  font-family: var(--font-body);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-left:2px;
}
nav.site-nav ul{
  list-style:none;
  display:flex;
  gap:22px;
  margin:0;
  padding:0;
  font-size:.92rem;
}
nav.site-nav a{
  color: var(--muted);
  font-weight:600;
}
nav.site-nav a:hover,
nav.site-nav a.active{
  color: var(--accent-dark);
  text-decoration:none;
}

/* Hero */
.hero{
  padding: 46px 0 10px;
}
.hero h1{
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height:1.2;
  margin: 0 0 14px;
  max-width: 620px;
}
.hero h1 .hl{ color: var(--accent-dark); }
.hero p.lede{
  color: var(--muted);
  font-size: 1.05rem;
  line-height:1.65;
  max-width: 540px;
  margin: 0 0 26px;
}

/* Card - white block with shadow (not a rigid square grid) */
.card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 26px 28px;
}

/* Flowing card stack for home + about */
.card-stack{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin: 30px 0 50px;
}
.card-stack .card{
  display:flex;
  gap:20px;
  align-items:flex-start;
}
.card-stack .card .icon{
  flex:0 0 auto;
  width:44px; height:44px;
  border-radius:12px;
  background: var(--bg-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
}
.card-stack .card h3{
  margin:0 0 6px;
  font-size:1.08rem;
}
.card-stack .card p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
  font-size:.95rem;
}
.card-stack .card.wide{
  flex-direction:column;
}
.card-stack .card.accent{
  background: linear-gradient(135deg, #eef1fb, #ffffff);
  border-color: #dde2f7;
}

/* Insights list */
.insights-list{
  display:flex;
  flex-direction:column;
  gap:20px;
  margin: 30px 0 60px;
}
.insight{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 26px 28px;
  position:relative;
}
.insight-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom: 10px;
}
.insight-head h2{
  margin:0;
  font-size:1.2rem;
  font-family: var(--font-display);
  line-height:1.3;
}
.insight-date{
  flex:0 0 auto;
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: var(--muted);
  background: var(--bg-soft);
  border-radius:8px;
  padding:4px 9px;
  white-space:nowrap;
  margin-top:2px;
}
.insight-body{
  color: var(--ink);
  line-height:1.7;
  font-size:.98rem;
}
.insight-body p{ margin: 0 0 12px; }
.insight-body p:last-child{ margin-bottom:0; }

/* Simple centered page (about / ambassadors) */
.ds-section{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px 40px;
  margin: 30px 0 60px;
}
.ds-section h1{
  font-family: var(--font-display);
  margin-top:0;
}
.ds-section p{
  color: var(--muted);
  line-height:1.75;
  font-size:1.05rem;
  margin:0 0 20px;
}
.ds-section ul,
.ds-section ol{
  color: var(--muted);
  line-height:1.75;
  font-size:1.02rem;
  padding-left:1.3rem;
  margin:0 0 1em;
}
.ds-section li{
  margin:0 0 .4em;
}
.ds-section li:last-child{
  margin-bottom:0;
}

.stub-note{
  display:inline-block;
  margin-top:18px;
  font-size:.8rem;
  color: var(--accent-dark);
  background: var(--bg-soft);
  border-radius:8px;
  padding:6px 12px;
}

/* Footer */
footer.site-footer{
  padding: 30px 0 50px;
  color: var(--muted);
  font-size:.85rem;
}
footer.site-footer .wrap{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  border-top:1px solid var(--border);
  padding-top:20px;
}
footer.site-footer a{ color: var(--muted); }

@media (max-width:600px){
  .hero h1{ font-size:1.9rem; }
  .ds-section{ padding:28px 22px; }
  .card-stack .card{ flex-direction:column; }
  .insight{ padding:20px; }
  .insight-head{ flex-direction:column; }
  .insight-date{ margin-top:0; }
}

/* ============ Episode pages ============ */

.episode-meta{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.episode-number{
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: var(--accent-dark);
  background: var(--bg-soft);
  border-radius:8px;
  padding:5px 10px;
  font-weight:700;
}
.episode-date{
  font-size:.8rem;
  color: var(--muted);
}

.audio-embed{
  margin: 8px 0 30px;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 10px;
}
.audio-embed iframe{ display:block; width:100%; border:0; }

/* Transcript */
.transcript-panel{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 30px 32px;
  margin: 10px 0 40px;
}
.transcript-panel h2{
  font-family: var(--font-display);
  margin-top:0;
  font-size:1.3rem;
}
.transcript-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:18px;
}
.transcript-toolbar .hint{
  font-size:.8rem;
  color: var(--muted);
}
.transcript-body{
  color: var(--ink);
  line-height:1.8;
  font-size:.98rem;
}
.transcript-body p{
  margin: 0 0 14px;
}
.transcript-loading{
  color: var(--muted);
  font-size:.92rem;
}
.transcript-body mark.hl{
  background: #39ff14;
  color: #0a0a0a;
  border-radius:4px;
  padding:0 3px;
  scroll-margin-top: 90px;
}
.transcript-body mark.hl.is-active{
  background: #00ff41;
  box-shadow: 0 0 0 2px #00ff41;
}
.highlight-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  background: linear-gradient(135deg, #fff6df, #fffdf6);
  border: 1px solid #f3e2ab;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size:.88rem;
  color:#6b5a1f;
}
.highlight-banner strong{ color:#5b4a10; }
.highlight-nav{
  display:flex;
  gap:6px;
}
.highlight-nav button{
  border:1px solid #f0d685;
  background:#fff;
  color:#6b5a1f;
  font-size:.78rem;
  padding:4px 9px;
  border-radius:7px;
  cursor:pointer;
}
.highlight-nav button:hover{ background:#fff6df; }

/* Prev / next episode nav */
.episode-pager{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin: 0 0 30px;
}
.episode-pager a{
  flex:1;
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:16px 18px;
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font-size:.88rem;
}
.episode-pager a:hover{ border-color: var(--accent); text-decoration:none; }
.episode-pager .dir{
  display:block;
  color: var(--muted);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:4px;
}
.episode-pager .next{ text-align:right; }

/* More episodes / browse promo */
.more-episodes{
  margin: 10px 0 60px;
}
.more-episodes h2{
  font-family: var(--font-display);
  font-size:1.15rem;
  margin: 0 0 14px;
}
.more-episodes-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:14px;
}
.more-episodes-grid a{
  display:block;
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px 18px;
  box-shadow: var(--shadow-sm);
  color: var(--ink);
}
.more-episodes-grid a:hover{ border-color: var(--accent); text-decoration:none; }
.more-episodes-grid .me-num{
  font-size:.7rem;
  color: var(--accent-dark);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:700;
  margin-bottom:4px;
}
.more-episodes-grid .me-title{
  font-size:.94rem;
  font-weight:600;
}

/* Episodes index list */
.episodes-list{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin: 30px 0 60px;
}
.episode-card{
  display:flex;
  gap:18px;
  align-items:center;
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px 24px;
  color: var(--ink);
}
.episode-card:hover{ border-color: var(--accent); text-decoration:none; }
.episode-card .ec-num{
  flex:0 0 auto;
  width:46px; height:46px;
  border-radius:12px;
  background: var(--bg-soft);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display);
  font-weight:700;
  color: var(--accent-dark);
}
.episode-card .ec-title{
  font-size:1.05rem;
  font-weight:600;
  margin-bottom:2px;
}
.episode-card .ec-sub{
  color: var(--muted);
  font-size:.85rem;
}

@media (max-width:600px){
  .transcript-panel{ padding:22px 18px; }
  .episode-pager{ flex-direction:column; }
  .episode-pager .next{ text-align:left; }
  .episode-card{ padding:16px 18px; }
}

/* ============ Photo frame ============ */
/* Reusable "photo mount" frame — white mat, warm accent border, soft shadow,
   optional caption strip. Use for any content photo on the site. */
.photo-frame{
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 10px 0;
  margin: 24px 0;
  max-width: 480px;
}
.photo-frame .pf-img-wrap{
  border: 3px solid var(--accent-warm);
  border-radius: calc(var(--radius) - 8px);
  overflow: hidden;
  line-height: 0;
}
.photo-frame img{
  display: block;
  width: 100%;
  height: auto;
}
.photo-frame .pf-caption{
  padding: 12px 6px 14px;
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.5;
  text-align: center;
}
.photo-frame .pf-caption strong{ color: var(--ink); }

/* centre a single frame within a ds-section / text flow */
.photo-frame.centre{ margin-left:auto; margin-right:auto; }

@media (max-width:600px){
  .photo-frame{ max-width: 100%; }
}

/* ============ T333 content rendering ============ */

/* Images placed via T333 [path.jpg,WxH,alt] render "matted" — border,
   padding and shadow all live on the <img> itself, so plain T333 syntax
   (no wrapper markup) still gets the framed look. */
.t333-img{
  display:block;
  max-width:100%;
  height:auto;
  box-sizing:border-box;
  margin:20px auto 4px;
  padding:10px;
  background: var(--panel);
  border: 3px solid var(--accent-warm);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
/* vt/hl placement modifiers, e.g. [..,vt/c,hl/r] */
.t333-img.hl-left{ margin-left:0; }
.t333-img.hl-right{ margin-right:0; }
.t333-img.hl-centre,
.t333-img.hl-center{ margin-left:auto; margin-right:auto; }

/* A paragraph immediately following a T333 image is treated as its
   caption — small, muted, centred. No special tag needed in the .txt,
   just put the caption line straight after the image line. */
.t333-img + p{
  text-align:center;
  color:var(--muted);
  font-size:.85rem;
  margin-top:-4px;
  margin-bottom:20px;
}

.t333-code{
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  overflow-x:auto;
  font-size:.88rem;
  line-height:1.6;
  margin: 16px 0;
}

mark.hl-yellow{
  background: #fff2b8;
  color: var(--ink);
  border-radius:4px;
  padding:0 3px;
}

/* Optional h1 "badge" icon — purely content-driven, no template change
   needed. In any .txt file, put the mark image directly after the
   heading line, using the 'badge' modifier:
     [Mama Source h1]
     [/icons/icon-192.png,34x34,Mama Source mark,badge]
   It will sit inline beside that page's h1 only — other pages that
   don't include this line are completely untouched. */
.ds-section > h1 + img.h1-badge{
  display:inline-block;
  width:34px; height:34px;
  border-radius:50%;
  vertical-align:middle;
  margin-left:12px;
}
.ds-section:has(> h1 + img.h1-badge) > h1{
  display:inline-block;
  vertical-align:middle;
  margin:0;
}

/* ============ Name links / chips ============ */
/* [Name]                        -> plain text, skip the brackets entirely
   [Name cr]                     -> coloured, no link
   [Name https://example.com]    -> plain link, default styling (unchanged)
   [Name https://example.com cr] -> linked + coloured "name chip"
   Colour codes: cr red, co orange, cg green, cb blue, cp purple, cy yellow.
   This palette is a deliberate one-off for "wall of names" style lists —
   not the site's general accent system. */
.name-link{
  font-weight:700;
  font-size:1.08em;
}
a.name-link{ text-decoration:none; }
a.name-link:hover{ text-decoration:underline; }
.nc-r{ color:#d1362f; }
.nc-o{ color: var(--accent-warm-dark); }
.nc-g{ color:#1f8a4c; }
.nc-b{ color:#2158c9; }
.nc-p{ color:#7a3fc9; }
.nc-y{ color:#c9a400; }
/* unrecognised colour code — stays visible/obvious rather than silently
   falling back, so a typo in a .txt file doesn't quietly vanish */
.nc-unknown{ color: var(--ink); text-decoration: underline wavy #d1362f; }

/* ============ Divine page ============ */

.divine-page > p{ margin-bottom:26px; }

.divine-jump{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin: 0 0 34px;
  padding: 18px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.divine-loading{
  color: var(--muted);
  font-size:.9rem;
  margin:0;
}
.divine-chip{
  display:inline-block;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size:.85rem;
  font-weight:600;
  color: var(--ink);
}
.divine-chip:hover{
  border-color: var(--accent);
  color: var(--accent-dark);
  text-decoration:none;
}

.divine-list{
  display:flex;
  flex-direction:column;
  gap:22px;
}
.divine-entry{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 26px 28px;
  scroll-margin-top: 90px;
  transition: box-shadow .3s ease, border-color .3s ease;
}
.divine-entry-highlight{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(126,140,214,0.25), var(--shadow);
}
.divine-entry-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.divine-entry-head h2{
  font-family: var(--font-display);
  margin:0;
  font-size:1.25rem;
}
.divine-link-btn{
  flex:0 0 auto;
  font-size:.72rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-weight:700;
  color: var(--accent-dark);
  background: var(--bg-soft);
  border-radius:8px;
  padding:5px 10px;
  white-space:nowrap;
}
.divine-link-btn:hover{ text-decoration:none; background:var(--accent-warm-soft); }

.divine-entry p{
  color: var(--ink);
  line-height:1.75;
  margin:0;
}

.divine-media{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin: 4px 0 18px;
}
.divine-photo{
  display:block;
  width:100%;
  max-width:220px;
  height:auto;
  border-radius:12px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
.divine-embed{
  flex:1 1 280px;
  max-width:480px;
  border-radius:12px;
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  aspect-ratio: 16 / 9;
}
.divine-embed iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.divine-watch{
  align-self:flex-start;
  font-size:.85rem;
  font-weight:600;
  background: var(--bg-soft);
  border-radius:8px;
  padding:8px 14px;
}

@media (max-width:600px){
  .divine-entry{ padding:20px; }
  .divine-entry-head{ flex-direction:column; align-items:flex-start; gap:6px; }
}