/* Ours, loaded after Moe's site.css: adjustments the user asked for on top of the
   drop. Each one says who asked and when, so the next drop can be judged against it. */

/* 2026-09-04, hero card. Moe's .stage is a fixed-height box and the cut-out hangs
   from its bottom edge, so on a wide screen the heads poke out above the card. The
   card now grows from the picture instead: a little air above the heads, the same
   58px (70px on phones) under it that the drop had, and the band overlaps the
   bottom exactly as before. z-index:1 stays so the card's highlight and grid
   overlays keep painting under the people. The air is padding on the card, not
   margin on the picture: a margin would collapse through the card's edge. */
.stage{height:auto;padding:16px 0 58px}
.trio{padding-top:31px}
.trio-pic{position:relative;display:block;left:auto;bottom:auto;width:95%;margin:0 auto}
@media (max-width:600px){.stage{padding-bottom:70px}}

/* 2026-09-04, hero card. The bottom 10% of the cut-out dissolves to transparent so
   the picture melts into the names band instead of ending on a hard line. */
.trio-pic{-webkit-mask-image:linear-gradient(#000 90%,transparent 100%);mask-image:linear-gradient(#000 90%,transparent 100%)}

/* 2026-09-04, podcast page. The two show marks carry the show artwork the user
   supplied — the Agent Zero poster cropped square around its wordmark, the
   AI CXO Mastery square thumbnail tightened on the TV — instead of a letter on
   a gradient, and grow from 56 to 88px so the art reads. c1 and c2 are the
   classes site.js gives AICXO and Agent Zero, in that order. Files live in
   overrides/assets/shows/, so a re-scaffold keeps them. */
.show .sw{width:88px;height:88px;border-radius:16px;font-size:0;background-size:cover;background-position:center}
.sw.c1{background-image:url(/assets/shows/aicxo.jpg?v=bea57035)}
.sw.c2{background-image:url(/assets/shows/agent-zero.jpg?v=d68544d2)}

/* 2026-09-04, podcast page, second pass: the mark sits on the left with the "for"
   line and the title beside it; description and cadence stay below, full width.
   Moe's markup is untouched (mark, for-line, title, description, cadence, in that
   order) — the grid places them. Title above the for-line, as asked (the drop had
   the for-line first); swap the two grid-row numbers to flip them back. */
.show{display:grid;grid-template-columns:88px minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;column-gap:18px;row-gap:0;align-items:center}
.show .sw{grid-column:1;grid-row:1 / span 2;align-self:center}
.show h3{grid-column:2;grid-row:1;align-self:end;font-size:31px} /* 1.3x the drop's 24px, asked 2026-09-04 */
.show .aud{grid-column:2;grid-row:2;align-self:start;margin-top:6px}
.show p{grid-column:1 / -1;grid-row:3;align-self:start;margin-top:18px}
.show .cad{grid-column:1 / -1;grid-row:4;align-self:end;margin-top:16px}

/* 2026-09-04, page heroes without a right-hand panel (Podcast, Blog). Moe's bright
   hero caps the headline at 14ch to leave room for the panel Hiring and AI
   Implementation have; here there is none, so the headline gets more room and
   runs two lines instead of three. The lead keeps its cap, as asked.
   Moe's h1 has text-wrap:balance, which evens the two lines out and pushes
   "people" down; on desktop the podcast headline wraps greedily instead, and
   the 23ch cap is what makes the break land after "people" (the line fits, the
   line plus "building" does not). Blog's headline fits 23ch on one line. */
.phero.pod h1,.phero.journal h1{max-width:23ch}
@media (min-width:901px){.phero.pod h1{text-wrap:wrap}}

/* 2026-09-04, podcast hero on phones: the two buttons run full width, one per
   line, so they read as buttons; the two show chips stay compact and share one
   line, so the two rows look different from each other. */
@media (max-width:600px){
  .phero.pod .ctas{flex-direction:column;align-items:stretch}
  .phero.pod .ctas .btn{width:100%;justify-content:center}
  .phero.pod .shows-mini{flex-wrap:nowrap}
}

/* 2026-09-04, podcast episodes come from the database (src/live.js): the art is
   the episode's YouTube frame, the description gets episode links. */
.ep2 .art.photo{background-size:cover;background-position:center}
.ep2 .art.photo .init{display:none}
.ep2 .ep-btn{align-self:flex-start;margin-top:2px}
.ep2 .fnote.err,.form .fnote.err{color:#ffb4b4;margin-top:10px;font-size:13.5px}

/* 2026-09-04, slug pages (src/live.js): one template each for an episode, a post
   and a capstone project. Video box, the person block, and clickable cards. */
.video{aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#0E1A6B;margin:0 0 26px}
.video iframe{width:100%;height:100%;border:0;display:block}
.guest-block{display:flex;gap:12px;align-items:center;margin:0 0 26px}
.guest-block .av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(160deg,#224AFA,#0E1A6B);color:#fff;font-weight:600;font-size:15px;flex:none}
.guest-block b{display:block;color:var(--ink)}
.guest-block small{display:block;color:var(--muted);font-size:13.5px;margin-top:2px}
.summary p{margin:0 0 16px}
.cap.cap-link{cursor:pointer;transition:transform .18s,box-shadow .18s}
.cap.cap-link:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
/* A photo in the card's art slot fills it. Moe's .art.small (16/7) was drawn for the
   placeholder window; a 16:9 screenshot gets its own ratio so nothing is cropped. */
.cap .art.photo img{width:100%;height:100%;object-fit:cover;display:block}
.cap .art.small.photo{aspect-ratio:16/9}

/* 2026-09-04, slug pages run full width — headline, lead and body use the whole
   shell instead of Moe's reading-column caps. Asked for explicitly. */
body.detail .phero h1{max-width:none}
body.detail .phero .lead,body.detail .phero .fine{max-width:none}
body.detail .content{max-width:none;width:100%}
body.detail .content img,body.detail .content video{max-width:100%;height:auto}

/* 2026-09-04, blog: the featured card spans two columns, but its headline was
   capped at 20ch and wrapped into four short lines beside empty space. */
.post.featured h3{max-width:none}

/* 2026-09-04, home: the light sections and the logo strip were white; a faint blue
   tint instead, cards stay white on top of it. */
body.home .sec.light,body.home .logos{background:#EEF2FF}

/* 2026-09-04, course tiles: the badge row ("Most popular", "New") sat above the date
   and left an empty row on tiles without a badge. One header row now: date on the
   left, badges on the right, nothing reserved when there is no badge. Moe's markup
   order (chips, date, h3, p, faculty) is untouched — the grid places it. */
.tile{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto 1fr;grid-template-areas:"date chips" "h3 h3" "p p" "facs facs";column-gap:10px;row-gap:12px;align-content:start}
.tile .date{grid-area:date;align-self:center;display:flex;align-items:center;min-height:23px} /* 2026-09-04: chip-height even with no badge, so every tile's title starts on the same line */
.tile .chips{grid-area:chips;min-height:0;justify-content:flex-end;flex-wrap:nowrap;margin:0}
.tile .chips:empty{display:none}
.tile h3{grid-area:h3;padding-right:34px} /* room for the hover arrow */
.tile p{grid-area:p}
.tile .facs,.tile>.fac{grid-area:facs;margin-top:0;align-self:end}
.tile .facs .fac{align-self:stretch}
.tile .facs{min-height:132px} /* 2026-09-04: the tallest faculty block (two people, one wrapped role); equal blocks put every divider in a row on the same line */ /* 2026-09-04: the rule above had reached the people inside .facs and right-aligned each one, staggering the avatars */

/* 2026-09-04, page heroes without a right-hand panel: the headline runs the full
   shell and sits on one line where it fits (Moe's 22ch cap made two lines of
   "Rated 4.7 from 1,395 reviews."). Heroes with a panel (Hiring, AI
   Implementation, For teams) keep the cap; the bright Podcast/Blog heroes keep
   their own rule above. */
.phero:not(.bright) .shell:not(.has-aside) h1{max-width:none}

/* 2026-09-04, reviews: cards take the height of their own quote. Moe's grid
   stretched every card in a row to the longest review, leaving white space under
   the short ones. Column flow instead — three columns, then one on phones. */
.quotes{display:block;columns:3;column-gap:16px}
.quotes .q{break-inside:avoid;margin:0 0 16px}
@media (max-width:900px){.quotes{columns:1}}

/* 2026-09-04, /partners/: Moe's page carries the real partner dashboard
   (src/partners.js). Tiles reuse .card; these are the pieces he has no class for. */
.pf-dash{width:100%}
.pf-dash .pf-sec{margin:34px 0 14px}
.pf-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:6px}
.pf-stats.six{grid-template-columns:repeat(3,minmax(0,1fr))}
.pf-stat .n{font-size:34px;font-weight:600;letter-spacing:-.02em;line-height:1.05;margin:6px 0 4px;color:var(--ink)}
.pf-stat.hi{border-color:var(--blue);box-shadow:0 0 0 3px rgba(34,74,250,.12)}
.pf-stat p{font-size:13px;color:var(--muted)}
.pf-linkbox{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:18px}
.pf-linkbox .k{display:block;margin-bottom:8px}
.pf-linkrow{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:8px 0;border-top:1px solid var(--line)}
.pf-linkrow code{font-family:var(--mono);font-size:13px;color:var(--ink);word-break:break-all}
.pf-tblwrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:14px}
.pf-table{width:100%;border-collapse:collapse;font-size:14px}
.pf-table th{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.pf-table td{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--text);vertical-align:middle}
.pf-table tr:last-child td{border-bottom:0}
.pf-table td.code{font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.pf-table tr.paused td{opacity:.55}
.pf-table small{color:var(--muted);font-size:11.5px}
.pf-chart{display:flex;align-items:flex-end;gap:2px;height:72px;margin-top:14px;padding:0 2px}
.pf-chart span{flex:1;background:var(--blue-soft,#c5cfff);border-radius:2px 2px 0 0;min-width:2px}
.pf-chart span.hasP{background:var(--mint,#32E8B7)}
.pf-chartcap{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:6px}
.pf-maker{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) auto;gap:12px;align-items:end;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:14px}
.pf-maker .btn{white-space:nowrap}
.pf-note{margin-top:22px}
.pf-signout{margin-top:22px}
@media (max-width:900px){.pf-stats,.pf-stats.six{grid-template-columns:repeat(2,minmax(0,1fr))}.pf-maker{grid-template-columns:1fr}}

/* 2026-09-04, nav: runtime.js marks the current page's link .on, and Moe's
   .nav a.on paints it white — fine in the bar, invisible on the white Resources
   menu. In the menu the current item reads as the highlighted row instead. */
.nav .menu a.on{color:var(--ink);background:var(--paper-soft)}
.top.open .nav .menu a.on{color:#fff;background:rgba(255,255,255,.08)}

/* 2026-09-04, hiring "How it works": the step circle is a .num span, and .num is
   also Moe's numbered-card class (22px padding, card background), so the digit
   sat off-centre. The circle wins: no padding, digit dead centre. */
.hstep .num{padding:0;display:grid;place-items:center;line-height:1;text-align:center;box-sizing:border-box}

/* 2026-09-04 · cohort calendar: the old site's structure (date-placed cards on a
   12-month rail, Today rule from the real date, capstone caption, a list on
   phones) in this site's colours. Markup from build.mjs calendarHtml(). */
.cal{padding:0;overflow:hidden}
.cal-bars{display:block}
.cal-months{display:grid;grid-template-columns:repeat(12,1fr);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.cal-months span{text-align:center;padding:12px 4px 10px;border-left:1px solid var(--line)}
.cal-months span:first-child{border-left:0}
.cal-rail{position:relative}
.cal-rail>i{position:absolute;top:0;bottom:0;width:1px;background:var(--line);opacity:.7}
.cal-today{position:absolute;top:0;bottom:0;width:2px;background:var(--gold)!important;opacity:1!important;z-index:2}
.cal-today-flag{position:absolute;top:8px;margin-left:8px;font-family:var(--mono);font-style:normal;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);z-index:2}
.cal-card{position:absolute;margin-top:24px;height:46px;min-width:max-content;box-sizing:border-box;padding:6px 12px;border-radius:10px;background:var(--navy);color:#fff;text-decoration:none;line-height:1.35;white-space:nowrap;z-index:1;transition:transform .15s}
.cal-card:hover{transform:translateY(-1px);z-index:3}
.cal-card b{display:block;font-size:11.5px;font-weight:700}
.cal-card span{display:block;font-size:11px;font-weight:600;opacity:.8}
.cal-card.b{background:var(--blue)}
.cal-card.m{background:#0B8F6C}
.cal-card.g{background:var(--gold);color:var(--gold-ink)}
.cal-caption{position:absolute;left:1.5%;right:1.5%;bottom:16px;border-top:2px dotted var(--line);text-align:center}
.cal-caption span{position:relative;top:-9px;background:#fff;padding:0 12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cal-list{display:none;padding:18px 18px 16px}
.cal-chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#0B8F6C;border:1px solid rgba(11,143,108,.35);background:rgba(11,143,108,.07);border-radius:999px;padding:5px 12px;margin-bottom:14px}
.cal-chip i{width:6px;height:6px;border-radius:50%;background:#0B8F6C;animation:calPulse 1.8s ease-in-out infinite}
@keyframes calPulse{0%,100%{opacity:1}50%{opacity:.35}}
.cal-item{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;line-height:1.4}
.cal-item>i{width:12px;height:12px;border-radius:50%;background:var(--navy);margin-top:5px;flex-shrink:0}
.cal-item.b>i{background:var(--blue)}.cal-item.m>i{background:#0B8F6C}.cal-item.g>i{background:var(--gold)}
.cal-item b{display:block;font-size:15px;font-weight:700}
.cal-item span{display:block;font-size:13px;font-weight:700;color:var(--blue)}
.cal-item small{display:block;font-size:12.5px;color:var(--muted)}
.cal-list-caption{margin-top:18px;border:1px dashed var(--line);border-radius:10px;padding:12px 14px;text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@media(max-width:900px){.cal-bars{display:none}.cal-list{display:flex;flex-direction:column}}

/* 2026-09-04 · the site's cursor (src/cursor.js): Moe's hero "You" follower,
   everywhere, in black, reading "AI-PM (You)". His hero copy is retired. */
#you{display:none!important}
.pf-you{position:fixed;left:0;top:0;z-index:2000;pointer-events:none;opacity:0;transition:opacity .15s;will-change:transform}
.pf-you svg{width:15px;height:17px;display:block;transform:rotate(140deg) scaleY(-1);fill:#111;stroke:#fff;stroke-width:.7;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.pf-you span{position:absolute;left:13px;top:17px;display:flex;align-items:center;height:31px;padding:0 12.4px;border-radius:18.6px;border:1px solid #fff;background:#111;color:#fff;font-family:Outfit,Inter,Arial,sans-serif;font-size:12.4px;font-weight:500;line-height:18.6px;white-space:nowrap}
html.pf-cursor,html.pf-cursor *{cursor:none!important} /* ours is the only cursor; it changes shape instead */
/* One shape everywhere (user, 2026-09-04): no I-beam, no link state — the black arrow and its pill, full stop. */