/* Parent University — The Syllabus */
:root{
  --bg:#fdfdf9;
  --ink:#14213d;
  --body:#4c5265;
  --dim:#8a8f9e;
  --hair:#e4e2d6;
  --gold:#e8a723;
  --gold-deep:#b07a0a;
  --navy:#14213d;
  --card:#ffffff;
  --card-hover:#fbf8ee;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Instrument Sans',system-ui,sans-serif;font-size:16px}
img{max-width:100%}
a{text-decoration:none;color:inherit}
button{font:inherit;cursor:pointer}
[hidden]{display:none!important}
.mono{font-family:'IBM Plex Mono',monospace}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---- entrance animations (matches 3Circle website redesign) ---- */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.au{opacity:0}
body.page-in .au{animation:fadeUp .6s cubic-bezier(.22,1,.36,1) forwards}
.d0{animation-delay:.05s}.d1{animation-delay:.15s}.d2{animation-delay:.25s}.d3{animation-delay:.38s}.d4{animation-delay:.5s}.d5{animation-delay:.62s}
@keyframes logoPop{0%{opacity:0;transform:translateY(-18px) rotate(-12deg) scale(.55)}60%{opacity:1;transform:translateY(2px) rotate(3deg) scale(1.08)}100%{opacity:1;transform:none}}
body.logo-pop .top .wd img{animation:logoPop .75s cubic-bezier(.34,1.56,.64,1) .15s backwards}
@keyframes crestFloat{from{transform:rotate(6deg) translateY(-8px)}to{transform:rotate(6deg) translateY(8px)}}
@media (prefers-reduced-motion:reduce){
  .au{animation:none!important;opacity:1}
  body.logo-pop .top .wd img,.hero .crest-badge{animation:none!important}
}

/* ---- intro overlay ("The Signature") ---- */
#intro{position:fixed;inset:0;z-index:999;background:var(--navy);display:flex;align-items:center;justify-content:center;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transition:clip-path .9s cubic-bezier(.76,0,.24,1)}
#intro.exit{clip-path:polygon(0 0,100% 0,100% 0,0 0)}
#intro .center{display:flex;flex-direction:column;align-items:center;gap:26px;padding:24px;text-align:center}
#intro-crest{width:clamp(110px,14vw,150px);opacity:0;animation:introFade .7s ease .15s forwards}
@keyframes introFade{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
#intro-sig{font-family:'Playfair Display',serif;font-style:italic;font-weight:600;font-size:clamp(52px,9vw,110px);color:var(--gold);line-height:1.15;clip-path:inset(-20% 100% -20% 0);animation:introWrite 1.4s cubic-bezier(.65,0,.35,1) .5s forwards}
@keyframes introWrite{to{clip-path:inset(-20% 0% -20% 0)}}
#intro-wm{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:rgba(253,253,249,.6);opacity:0;animation:introWm .8s ease 1.6s forwards}
@keyframes introWm{from{opacity:0;letter-spacing:.6em}to{opacity:1;letter-spacing:.34em}}
body.intro-active{overflow:hidden}
#page{opacity:0;transition:opacity .45s ease}
body.page-in #page,body:not(.intro-active) #page{opacity:1}
@media (prefers-reduced-motion:reduce){#intro{display:none}#page{opacity:1}}

/* ---- nav ---- */
.top{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 32px;border-bottom:1px solid var(--hair);flex-wrap:wrap}
.top .wd{font-weight:700;font-size:16px;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.top .wd img{width:26px;display:block}
.top nav{display:flex;gap:24px;font-size:13.5px;font-weight:600;color:#5a6072;flex-wrap:wrap}
.top nav a:hover{color:var(--ink)}
.top nav a.on{color:var(--ink);border-bottom:2px solid var(--gold);padding-bottom:2px}

/* ---- hero ---- */
.herowrap{position:relative;overflow:hidden;background:var(--navy)}
.herowrap .kick{color:#d9b25e}
.herowrap h1{color:#fdfdf9}
.herowrap .hero p{color:#b6bed2}
.hero{max-width:1100px;margin:0 auto;padding:76px 32px 64px;position:relative}
.kick{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;color:#8a8468;text-transform:uppercase;display:flex;align-items:center;gap:12px}
.kick::before{content:"";width:26px;height:2px;background:var(--gold);border-radius:2px;flex:none}
.hero h1{font-size:clamp(38px,5.8vw,66px);font-weight:700;letter-spacing:-.035em;line-height:1.03;margin:16px 0 18px;max-width:20ch;text-wrap:balance}
.hero h1 u,.pagehead h1 u{text-decoration:none;color:var(--gold);font-family:'Playfair Display',serif;font-style:italic;font-weight:600;font-size:1.06em;line-height:1;letter-spacing:0}
.hero p{margin:0;line-height:1.65;color:var(--body);max-width:52ch;font-size:17px}
.hero .crest-badge{position:absolute;right:44px;top:50%;margin-top:-130px;width:280px;pointer-events:none;filter:drop-shadow(0 18px 30px rgba(20,33,61,.18));animation:crestFloat 5s ease-in-out infinite alternate}
@media (max-width:900px){.hero .crest-badge{display:none}}

/* ---- page header (subpages) ---- */
.pagehead{max-width:1100px;margin:0 auto;padding:52px 32px 34px}
.pagehead h1{font-size:clamp(30px,4vw,44px);font-weight:700;letter-spacing:-.03em;line-height:1.06;margin:14px 0 12px;text-wrap:balance}
.pagehead p{margin:0;line-height:1.65;color:var(--body);max-width:60ch}

/* ---- stage tabs ---- */
.tabsrow{max-width:1100px;margin:0 auto;padding:0 32px;display:flex;border-bottom:1px solid var(--hair);overflow-x:auto}
.t{padding:13px 20px;font-size:13.5px;font-weight:600;color:#5a6072;border:0;background:none;border-bottom:2px solid transparent;white-space:nowrap}
.t .mono{font-size:11px;color:#b0ab8f;margin-right:7px}
.t.on{color:var(--ink);border-bottom-color:var(--gold)}
.t:hover{color:var(--ink)}

/* ---- directory grid ---- */
.dir{max-width:1100px;margin:0 auto;padding:36px 32px 20px}
.dgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border:1px solid var(--hair);border-radius:14px;overflow:hidden;background:var(--hair)}
@media (max-width:1020px){.dgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.dgrid{grid-template-columns:1fr}}
.cell{background:var(--card);padding:24px 22px;display:block;transition:.12s}
.cell:hover{background:var(--card-hover)}
.cell .mono{font-size:11px;letter-spacing:.1em;color:var(--gold-deep);text-transform:uppercase}
.cell h3{font-size:18px;font-weight:700;margin:10px 0 6px;letter-spacing:-.01em}
.cell p{margin:0 0 14px;font-size:13.5px;line-height:1.55;color:#5a6072}
.cell .ct{font-size:12.5px;font-weight:700;color:var(--ink)}
.cell .ct::after{content:" →";color:var(--gold-deep)}
.note{max-width:1100px;margin:0 auto;padding:14px 32px 44px;font-size:13px;color:var(--dim)}
.note .mono{color:var(--gold-deep)}
.note a{text-decoration:underline;color:var(--ink)}

/* ---- coming soon panel ---- */
.soon{background:var(--card);border:1px dashed #cfc9ae;border-radius:14px;padding:56px 24px;text-align:center}
.soon .mono{font-size:11px;letter-spacing:.14em;color:var(--gold-deep);text-transform:uppercase}
.soon h3{font-size:22px;margin:12px 0 8px;letter-spacing:-.01em}
.soon p{margin:0 auto 20px;color:var(--body);max-width:44ch;line-height:1.6;font-size:14.5px}
.soon a{display:inline-block;background:var(--navy);color:#fdfdf9;border-radius:10px;padding:11px 22px;font-weight:700;font-size:13.5px}
.soon a:hover{background:var(--gold);color:var(--navy)}

/* ---- resource list (resources page) ---- */
.rsec{max-width:1100px;margin:0 auto;padding:34px 32px 6px;scroll-margin-top:20px}
.rsec h2{font-size:22px;font-weight:700;letter-spacing:-.01em;margin:0 0 4px;display:flex;align-items:baseline;gap:12px}
.rsec h2 .mono{font-size:11.5px;letter-spacing:.1em;color:var(--gold-deep);text-transform:uppercase;font-weight:500}
.rsec .sub{margin:0 0 18px;font-size:13.5px;color:var(--dim)}
.rlist{border:1px solid var(--hair);border-radius:14px;overflow:hidden;background:var(--hair);display:grid;gap:1px}
.row{background:var(--card);padding:15px 20px;display:flex;align-items:center;gap:16px;transition:.12s}
.row:hover{background:var(--card-hover)}
.row .thumb{width:54px;height:54px;object-fit:cover;border-radius:9px;flex:none;border:1px solid var(--hair);background:#fff}
.row .thumb.logo{object-fit:contain;padding:6px}
.row .ttl{font-weight:600;font-size:15px}
.row .by{font-size:12.5px;color:var(--dim);margin-top:2px}
.row .tag{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);background:#faf3dd;border:1px solid #eee3bd;border-radius:5px;padding:3px 8px;flex:none}
.row .go{margin-left:auto;font-size:12.5px;font-weight:700;white-space:nowrap;flex:none}
.row .go::after{content:" ↗";color:var(--gold-deep)}

/* ---- podcast band ---- */
.pod{border-top:1px solid var(--hair);background:var(--navy);color:#fdfdf9;margin-top:24px}
.pod-in{max-width:1100px;margin:0 auto;padding:52px 32px;display:grid;grid-template-columns:auto 1fr auto;gap:34px;align-items:center}
.disc{width:92px;height:92px;border-radius:50%;background:conic-gradient(var(--gold) 0 62%,rgba(255,255,255,.16) 62% 100%);display:grid;place-items:center;flex:none}
.disc>div{width:66px;height:66px;border-radius:50%;background:var(--navy);display:grid;place-items:center;font-size:22px}
.disc>img{width:66px;height:66px;border-radius:50%;object-fit:cover}
.pod h2{font-size:26px;font-weight:700;margin:0 0 8px;letter-spacing:-.02em}
.pod p{margin:0;color:#aeb6cc;line-height:1.6;font-size:14.5px;max-width:56ch}
.pod .mono{font-size:11.5px;color:var(--gold);letter-spacing:.12em;text-transform:uppercase}
.pbtn{background:var(--gold);color:var(--navy);font-weight:700;border-radius:10px;padding:13px 24px;white-space:nowrap;display:inline-block}
.pbtn:hover{background:#fdfdf9}

/* ---- podcast page ---- */
.podhead{display:grid;grid-template-columns:auto 1fr;gap:38px;align-items:center}
.podhead .cover{width:152px;border-radius:18px;border:1px solid var(--hair);display:block}
.eps{max-width:1100px;margin:0 auto;padding:14px 32px 18px;display:grid;gap:12px}
.ep{border:1px solid var(--hair);background:var(--card);border-radius:14px;padding:18px 22px;display:flex;gap:18px;align-items:center;transition:.12s}
.ep:hover{border-color:var(--gold)}
.ep.playing{border-color:var(--gold);background:var(--card-hover)}
.ep .play{width:44px;height:44px;border-radius:50%;background:var(--navy);color:var(--gold);display:grid;place-items:center;font-size:13px;flex:none;border:0;cursor:pointer;transition:.12s}
.ep .play:hover{background:var(--gold);color:var(--navy)}
.ep .ttl{font-weight:700;font-size:16px}
.ep .desc{font-size:13px;color:var(--body);margin-top:3px;line-height:1.5}
.ep .mono{font-size:10.5px;letter-spacing:.12em;color:var(--gold-deep);text-transform:uppercase}
.listen{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.listen a{border:1px solid var(--hair);background:var(--card);border-radius:999px;padding:9px 18px;font-weight:600;font-size:13px;transition:.12s}
.listen a:hover{border-color:var(--gold);background:var(--card-hover)}
.moreholder{max-width:1100px;margin:0 auto;padding:4px 32px 44px}
.morebtn{border:1px solid var(--hair);background:var(--card);border-radius:999px;padding:11px 24px;font-weight:700;font-size:13.5px;transition:.12s}
.morebtn:hover{border-color:var(--gold);background:var(--card-hover)}

/* ---- sticky mini player ---- */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--navy);color:#fdfdf9;display:flex;align-items:center;gap:14px;padding:10px 20px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));box-shadow:0 -8px 24px rgba(20,33,61,.25)}
.bar img{width:42px;height:42px;border-radius:9px;flex:none}
.bar .play{width:38px;height:38px;border-radius:50%;background:var(--gold);color:var(--navy);border:0;cursor:pointer;font-size:12px;flex:none;display:grid;place-items:center}
.barmeta{flex:1;min-width:0}
.bar .ttl{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seek{height:5px;background:rgba(255,255,255,.22);border-radius:3px;margin-top:7px;cursor:pointer}
.fill{height:100%;width:0;background:var(--gold);border-radius:3px}
#bartime{font-size:11px;color:#aeb6cc;flex:none}
body:has(.bar:not([hidden])){padding-bottom:76px}

/* ---- footer ---- */
.foot{padding:20px 32px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:var(--dim);border-top:1px solid var(--hair)}
.foot .mono{letter-spacing:.1em}

@media (max-width:760px){
  .hero{padding-top:44px}
  .podhead{grid-template-columns:1fr;gap:22px}
  .pod-in{grid-template-columns:1fr;text-align:center;justify-items:center}
  .row{flex-wrap:wrap}
  .row .go{margin-left:0;width:100%}
}