/* GAN host home pages (show pages with an entry in source/src/host_pages.json). Uses the tokens in site.css. */
.hostpage .sh-hero .eyebrow{pointer-events:none}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hostpage .k{display:block;font:700 .7rem/1.2 var(--label);font-stretch:115%;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}

/* Hero: secondary buttons get a solid backing so they read over the photo */
.hostpage .sh-hero .acts .btn-ghost{background:rgba(19,14,11,.78);border-color:rgba(245,237,229,.38);color:var(--fg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hostpage .sh-hero .acts .btn-ghost:hover{border-color:var(--gold);background:rgba(42,32,25,.92)}
.hp-give svg,.hp-alert svg{width:17px;height:17px}
.hp-give,.hp-alert{gap:.45rem}
.hp-next{display:inline-flex;align-items:center;gap:.5rem;margin-top:.55rem;font-size:.92rem;font-weight:600;color:var(--fg);text-decoration:none}
.hp-next i{width:8px;height:8px;border-radius:50%;background:var(--live);flex:none}
.hp-next:hover{color:var(--gold)}

/* Hero: only Give and Get alerts; the big thumbnail plays the newest episode */
.hostpage .hp-off{display:none!important}

/* Episodes: one list, the first 8 until "Show all" */
.hostpage #sh-grid:not(.hp-open) > .ep:nth-child(n+9){display:none}
.hostpage #sh-grid:not(.hp-open) ~ #sh-more{display:none!important}

/* More from the host */
.hp-world{padding-top:3rem}
.hp-world-in{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:1.25rem;align-items:start}
@media (max-width:900px){.hp-world-in{grid-template-columns:minmax(0,1fr)}}
.hp-about{border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
.hp-about .ph{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:center 30%;display:block}
.hp-about .tx{padding:1.2rem 1.4rem 1.4rem}
.hp-about.portrait{display:grid;grid-template-columns:minmax(170px,36%) minmax(0,1fr);align-items:start}
.hp-about.portrait .ph{aspect-ratio:4/5;height:auto;object-position:center 20%;border-radius:16px 0 0 0}
@media (max-width:620px){.hp-about.portrait{grid-template-columns:minmax(0,1fr)}.hp-about.portrait .ph{aspect-ratio:1/1;object-position:center 18%;border-radius:0}}
.hp-about h3{font-size:clamp(1.4rem,2.6vw,1.8rem);margin:.35rem 0 .3rem}
.hp-about p{color:var(--text);margin:.55rem 0 0;max-width:62ch}
.hp-church{margin-top:.9rem;font-size:.93rem}
.hp-church p{margin:0}
.hp-church .ln{display:flex;flex-wrap:wrap;gap:.25rem 1.2rem;margin-top:.3rem}
.hp-church a{color:var(--gold);font-weight:600;text-decoration:none;white-space:nowrap}
.hp-church a:hover{text-decoration:underline;text-underline-offset:3px}
.hp-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1.2rem;margin-top:1.1rem;padding-top:1rem;border-top:1px solid rgba(59,45,35,.7)}
.hp-links .st{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.hp-links .st a{display:inline-flex;align-items:center;gap:.4rem;font-size:.92rem;font-weight:600;color:var(--fg);text-decoration:none}
.hp-links .st a:hover{color:var(--gold)}
.hp-links .st svg{width:16px;height:16px;color:var(--gold)}
.hp-links .so{display:flex;gap:.4rem}
.hp-links .so a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--text)}
.hp-links .so a:hover{border-color:var(--gold);color:var(--gold)}
.hp-links .so svg{width:16px;height:16px}
.hp-acts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.hp-acts .btn{padding:.6rem 1rem;font-size:.88rem}
.hp-short{font-size:.88rem;color:var(--muted)}
.hp-copy{font:600 .88rem/1 var(--body);color:var(--gold);background:none;border:1px dashed var(--line);border-radius:999px;padding:.4rem .75rem;margin-left:.3rem;cursor:pointer}
.hp-copy:hover{border-color:var(--gold)}

/* Side column: compact cards */
.hp-side{display:grid;gap:.85rem}
.hp-card{display:block;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:1rem 1.1rem;color:inherit;text-decoration:none}
.hp-card b{display:block;font-weight:700;line-height:1.3}
.hp-ch{display:flex;align-items:center;gap:.8rem}
.hp-ch img{width:56px;height:56px;border-radius:9px;object-fit:cover;border:1px solid var(--line);flex:none}
.hp-ch b{font-family:var(--display);font-weight:800;font-stretch:112%;font-size:1.05rem;margin-top:.15rem}
.hp-pl{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.1rem}
.hp-pl li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:.65rem;align-items:center;padding:.4rem 0;border-top:1px solid rgba(59,45,35,.6)}
.hp-pl .pp{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--gold);display:grid;place-items:center;cursor:pointer}
.hp-pl .pp:hover{border-color:var(--gold);background:rgba(216,169,76,.1)}
.hp-pl .pp svg{width:14px;height:14px;margin-left:2px}
.hp-pl b{font-size:.88rem;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hp-pl small{display:block;color:var(--muted);font-size:.78rem}
.hp-mini{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin-top:.7rem}
.hp-mini a{font-size:.86rem;font-weight:600;color:var(--gold);text-decoration:none}
.hp-mini a:hover{text-decoration:underline;text-underline-offset:3px}
.hp-bks ul{list-style:none;margin:.5rem 0 0;padding:0}
.hp-bks li a{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:.75rem;align-items:center;padding:.5rem 0;border-top:1px solid rgba(59,45,35,.6);text-decoration:none;color:inherit}
.hp-bks li:first-child a{border-top:0}
.hp-bks .cv{width:38px;aspect-ratio:2/3;border-radius:3px 5px 5px 3px;background:linear-gradient(160deg,#4a3524,#1a120c);border:1px solid var(--line);box-shadow:inset 3px 0 0 rgba(0,0,0,.35);display:grid;place-items:center;color:var(--gold);object-fit:cover}
.hp-bks .cv svg{width:16px;height:16px}
.hp-bks b{font-size:.93rem}
.hp-bks small{display:block;color:var(--muted);font-size:.8rem}
.hp-bks .arr{font-size:.84rem;font-weight:600;color:var(--gold);white-space:nowrap}
.hp-bks li a:hover b{color:var(--gold)}
.hp-allb{margin-top:.4rem;font:600 .84rem/1 var(--body);color:var(--gold);background:none;border:0;padding:.3rem 0;cursor:pointer}
.hp-wk ul{list-style:none;margin:.5rem 0 0;padding:0}
.hp-wk li a{display:block;padding:.5rem 0;border-top:1px solid rgba(59,45,35,.6);text-decoration:none;color:inherit}
.hp-wk li:first-child a{border-top:0}
.hp-wk .d{display:block;font-size:.8rem;color:var(--muted)}
.hp-wk b{font-size:.93rem}
.hp-wk li a:hover b{color:var(--gold)}
.hp-wk li small{display:block;color:var(--muted);font-size:.8rem}
.hp-wk .tz{display:block;margin-top:.4rem;color:var(--muted);font-size:.76rem}

/* One slim alert signup */
.hp-follow{padding-top:2.5rem;scroll-margin-top:90px}
.hp-follow-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.5rem;border:1px solid rgba(216,169,76,.45);border-radius:16px;background:linear-gradient(135deg,rgba(216,169,76,.12),var(--surface) 60%);padding:1.1rem 1.3rem}
.hp-follow-t b,.hp-follow .ok b{display:block;font-family:var(--display);font-weight:800;font-stretch:112%;font-size:1.12rem;line-height:1.2}
.hp-follow-t small,.hp-follow .ok small{display:block;color:var(--muted);font-size:.88rem;margin-top:.2rem}
.hp-follow form{display:flex;gap:.6rem;flex:1 1 340px;max-width:460px}
.hp-follow input{flex:1;min-width:0;font:inherit;font-size:1rem;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:.75rem 1rem}
.hp-follow input:focus{outline:none;border-color:var(--gold)}
.hp-follow .btn{padding:.75rem 1.2rem;white-space:nowrap}
.hp-follow .err{flex-basis:100%;margin:0}
.hp-follow .hp-em{display:flex;flex:1;min-width:0}
.hp-follow form{flex-wrap:wrap}
.hp-opts{flex-basis:100%;display:flex;flex-wrap:wrap;gap:.25rem 1.3rem;padding:.1rem .4rem 0;font-size:.84rem;color:var(--muted)}
.hp-opts label{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer}
.hp-follow .hp-opts input{flex:none;width:1rem;height:1rem;margin:0;padding:0;border-radius:3px;accent-color:var(--gold)}

/* Contact as a pop-up, opened by the Contact button */
.hostpage .contact.hp-pop{display:none}
.hostpage .contact.hp-pop.open{display:grid;place-items:center;position:fixed;inset:0;z-index:60;max-width:none;margin:0;padding:16px;background:rgba(10,7,5,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hostpage .contact.hp-pop .ct-in{position:relative;width:min(760px,100%);max-height:calc(100vh - 32px);overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.hp-x{position:absolute;top:10px;right:12px;font-size:1.7rem;line-height:1;color:var(--muted);background:none;border:0;cursor:pointer;padding:.2rem .45rem}
.hp-x:hover{color:var(--fg)}
body.hp-lock{overflow:hidden}

/* Newest episode: a centered round play mark instead of the gold pill.
   The arrow's own drawing sits right of its box, so no extra nudge: its center of mass lands on the circle's center. */
.hostpage .feat .th .play{inset:50% auto auto 50%;transform:translate(-50%,-50%);width:72px;height:72px;padding:0;display:grid;place-items:center;border-radius:50%;font-size:0;gap:0;background:rgba(19,14,11,.55);color:#fff;border:2px solid rgba(255,255,255,.85);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);box-shadow:0 8px 24px rgba(0,0,0,.35);transition:background .15s ease,border-color .15s ease,transform .15s ease}
.hostpage .feat .th .play svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:28px;height:28px;margin:0}
.hostpage .feat .th:hover .play,.hostpage .feat .th:focus-visible .play{background:var(--gold);border-color:var(--gold);color:var(--gold-ink);transform:translate(-50%,-50%) scale(1.06)}
@media (max-width:620px){.hostpage .feat .th .play{width:60px;height:60px}.hostpage .feat .th .play svg{width:24px;height:24px}}

/* A host with more than one show: switch between their show pages */
.hp-shows{display:flex;flex-wrap:wrap;gap:.4rem}
.hp-shows a{font:600 .86rem/1 var(--body);color:var(--text);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:.55rem .9rem;background:var(--surface)}
.hp-shows a span{color:var(--muted);margin-left:.25rem;font-variant-numeric:tabular-nums}
.hp-shows a:hover{border-color:var(--gold)}
.hp-shows a[aria-current]{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.hp-shows a[aria-current] span{color:var(--gold-ink);opacity:.7}
@media (max-width:560px){.sh-eps .w-row-head{flex-wrap:wrap}}
.hp-bkf{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.4rem}
.hp-bkf a{font-size:.84rem;font-weight:600;color:var(--gold);text-decoration:none}
.hp-bkf a:hover{text-decoration:underline;text-underline-offset:3px}
.hp-bkf .hp-allb{margin-top:0}