/* Shared additions on top of site.css (loaded on every page). site.css owns the tokens. */
:root{--bad:#ff9aa2}
[hidden]{display:none!important}

/* logo: the wordmark inside the ring only reads from about 80px up */
.brand img{height:84px;width:auto;transition:height .4s var(--ease)}
.nav.stuck .brand img{height:64px}
.nav{padding:12px 0}
footer img{height:140px;margin-bottom:18px}
@media(max-width:900px){
  .brand img{height:64px}.nav.stuck .brand img{height:54px}
  .links{inset:80px 0 auto 0}
  footer img{height:110px}
}
.hero{padding-top:150px}
.phead{padding-top:200px}
.art{padding-top:180px}
@media(max-width:900px){.hero{padding-top:130px}.phead{padding-top:150px}.art{padding-top:140px}}

/* socials and small states */
.socials{display:flex;gap:10px;flex-wrap:wrap}
.socials a{padding:10px 18px;border:1px solid var(--line);border-radius:999px;font:600 13px/1 Sora,sans-serif;color:var(--text);transition:border-color .3s,color .3s,background .3s}
.socials a:hover{border-color:var(--gold);color:var(--gold)}
.soon{display:inline-block;font:600 13px/1.4 Sora,sans-serif;letter-spacing:.06em;color:var(--steel)}
.cta .soon{align-self:center}
.disc{margin-top:26px;font-size:14px;color:var(--steel);max-width:70ch}
.feat{display:flex;flex-direction:column}
.feat .more{margin-top:auto;padding-top:20px}
.two{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
@media(max-width:900px){.two{grid-template-columns:1fr;gap:28px}}
.band .socials{justify-content:center;margin-top:26px}
.lead+.cta,.lead+.row{margin-top:30px}
.cta{display:flex;gap:14px;flex-wrap:wrap}

/* blog surfaces */
.phead .lead{max-width:60ch;color:var(--steel);font-size:clamp(17px,1.5vw,20px)}
.phead .chips{margin-top:34px}
.more-wrap{display:flex;justify-content:center;margin-top:44px}
#feed{margin-top:34px}
.art .kicker{color:var(--gold)}
.art .kicker:hover{text-decoration:underline;text-underline-offset:4px}
.art .by time::before,.art .by span+span::before{content:"\00b7";margin-right:14px;color:var(--steel)}
.art .by img+span::before{content:none}
.art .by{gap:14px}
.prose img{border-radius:12px;margin-inline:auto}
.prose table{width:100%;border-collapse:collapse;font-size:16px}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.like[aria-pressed=true]{border-color:var(--gold);color:var(--gold)}
#related{padding-top:20px}
#related h2{font-size:clamp(26px,3vw,38px);margin:16px 0 0}
.cm .muted,.muted{color:var(--steel);font-size:15px}
.cm form{display:grid;gap:12px;margin-bottom:26px}
.cm form .acts{margin:0}
.cm textarea{resize:vertical}
.cm textarea:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.cm .ctext{margin:8px 0 0;white-space:pre-wrap;word-break:break-word}
.cm .c.rp{margin-left:22px;padding-left:18px;border-left:1px solid var(--line)}
.cm .rform{margin:14px 0 4px;display:grid;gap:10px}
.cm .pend{margin-top:6px;font-size:13px;color:var(--gold)}
.cm .cerr{color:var(--bad);font-size:14px}
.cmsg{color:var(--steel);font-size:14px}
.cm button.tx:disabled{opacity:.6}
.err{color:var(--bad);border-color:var(--bad)}
@media(max-width:600px){.cm .c.rp{margin-left:10px}}

/* partner: why-points and pledge */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;margin-top:40px}
.why div{border-top:1px solid var(--line);padding-top:16px}
.why b{display:block;font:600 16px/1.3 Sora,sans-serif;color:var(--white);margin-bottom:6px}
.why span{color:var(--steel);font-size:15px;line-height:1.6}
.pledge{margin-top:26px;color:var(--steel);font-size:15px;max-width:70ch}
#partner .grid{margin-top:40px}
/* long-form posts: larger reading size */
.prose{font-size:20px;line-height:1.8}
.prose h2{font-size:clamp(26px,3.2vw,34px)}
.prose h3{font-size:23px}
@media(max-width:600px){.prose{font-size:18.5px}}

/* footer social icons: white marks, no text */
footer .fsoc{display:flex;gap:20px;align-items:center;margin-top:16px}
footer .fsoc a{display:inline-flex;margin:0;color:#fff;font-size:21px;line-height:1;opacity:.9;transition:color .3s,opacity .3s,transform .3s}
footer .fsoc a:hover{color:var(--gold);opacity:1;transform:translateY(-2px)}

/* footer subscribe */
footer .fsub{flex:1 1 300px;max-width:360px}
footer .fsub p{margin:0 0 14px}
.sub-row{display:flex;gap:8px}
.sub-row input{flex:1;min-width:0;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px;padding:11px 16px;color:var(--white);font:15px/1.2 'DM Sans',sans-serif}
.sub-row input::placeholder{color:var(--steel)}
.sub-row input:focus{outline:none;border-color:var(--gold)}
.sub-row input[aria-invalid=true]{border-color:var(--bad)}
.sub-row .btn{flex:none}
footer .fsub .sub-msg{margin:8px 0 0;font-size:13px;color:var(--bad);min-height:1em}
footer .fsub .sub-done{color:var(--gold);font-weight:600;margin:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* scrollbar: hidden everywhere; the page still scrolls, and the gold progress line under the menu shows the position */
html{scrollbar-width:none;-ms-overflow-style:none}
::-webkit-scrollbar{width:0;height:0;display:none}
/* the hero network, reused behind the five lenses and the latest posts */
.sec.fx{overflow:hidden;isolation:isolate}
.sec.fx canvas.netfx{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.7}
/* text is not selectable or copyable; form fields stay usable */
body{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select,[contenteditable]{-webkit-user-select:text;-moz-user-select:text;user-select:text;-webkit-touch-callout:default}
img{-webkit-user-drag:none}
/* the format: ten hours vs five minutes, and the episode timeline */
.tvf{margin-top:46px;display:grid;gap:18px;max-width:920px}
.tvf-row{display:grid;grid-template-columns:200px 1fr 120px;align-items:center;gap:18px}
.tvf-lab{color:var(--steel);font-size:15px}
.tvf-bar{height:12px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--line);overflow:hidden}
.tvf-bar i{display:block;height:100%;width:0;border-radius:inherit;transition:width 2.4s cubic-bezier(.2,.7,.2,1)}
.tvf-bar.book i{background:linear-gradient(90deg,#1F3A62,#6B8CAE)}
.tvf-bar.ep i{background:#C9A84C;box-shadow:0 0 14px rgba(201,168,76,.8);transition-delay:1.4s}
.tvf.in .tvf-bar.book i{width:100%}
.tvf.in .tvf-bar.ep i{width:max(1%,10px)}
.tvf-val{font:700 20px/1 Sora,sans-serif;color:var(--white);text-align:right}
.tvf-val.gold{color:var(--gold)}
.tl{margin-top:64px}
.tl-head{display:flex;justify-content:space-between;color:var(--steel);font:600 12px/1 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.tl-track{height:4px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden}
.tl-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,#0891B2,#C9A84C);transition:width 3.2s linear .2s}
.tl.in .tl-fill{width:100%}
.tl-segs{display:flex;gap:6px;margin-top:14px}
.seg{flex:var(--w) 1 0;min-width:0;text-align:left;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:14px 12px;color:var(--text);cursor:pointer;opacity:.2;transform:translateY(10px);font:inherit;
  transition:opacity .5s ease calc(var(--i) * .42s + .2s),transform .5s ease calc(var(--i) * .42s + .2s),border-color .3s,background .3s}
.tl.in .seg{opacity:1;transform:none}
.seg small{display:block;font:600 11px/1 'DM Sans',sans-serif;letter-spacing:.06em;color:var(--steel)}
.seg b{display:block;margin-top:8px;font:600 14px/1.25 Sora,sans-serif;color:var(--white)}
.seg.hook small{color:var(--teal)}
.seg.close small{color:var(--gold)}
.seg.on,.seg:hover,.seg:focus-visible{border-color:var(--gold);background:rgba(201,168,76,.08);outline:none}
.tl-cap{margin-top:22px;min-height:3.4em;color:#b9c9dc;font-size:17px;line-height:1.6;max-width:70ch}
@media(max-width:760px){
  .tvf-row{grid-template-columns:1fr auto;gap:8px 12px}
  .tvf-row .tvf-bar{grid-column:1/-1;order:3}
  .tl-segs{flex-direction:column}
  .seg{flex:none;display:flex;justify-content:space-between;align-items:center}
  .seg b{margin-top:0}
}
/* the closed mobile menu sits fully off screen */
@media(max-width:900px){.links:not(.open){transform:translateY(calc(-100% - 140px))}}
/* mission */
.mission{background:radial-gradient(70% 90% at 50% 0%,rgba(8,145,178,.10),transparent 70%)}
.mission h2{max-width:22ch}
.mission .pillar small{display:block;font:600 12px/1 'DM Sans',sans-serif;letter-spacing:.14em;color:var(--gold);margin-bottom:18px}

/* footer logo link */
footer a.flogo{display:inline-block;padding:0;margin:0;line-height:0;border:0;background:none}
footer a.flogo img{transition:opacity .2s ease}
footer a.flogo:hover img,footer a.flogo:focus-visible img{opacity:.8}

/* vision band */
.vision{position:relative;overflow:hidden;isolation:isolate;margin-top:72px;padding:64px 28px 68px;text-align:center;border-radius:24px;border:1px solid rgba(201,168,76,.22);background:radial-gradient(ellipse at 50% 0%,rgba(8,145,178,.16),transparent 65%),rgba(10,22,40,.55)}
.vision canvas.netfx{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.55}
.vision .kicker{display:inline-flex;margin-bottom:18px}
.vision .vline{font-family:Sora,sans-serif;font-weight:700;font-size:clamp(24px,3.2vw,42px);line-height:1.25;letter-spacing:-.01em;color:#fff;max-width:900px;margin:0 auto}
.vision .vline .grad{background:linear-gradient(90deg,#C9A84C,#f3e3b0 50%,#C9A84C);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:640px){.vision{margin-top:48px;padding:44px 18px 48px;border-radius:18px}}

/* cta card */
.card.cta-card{background:linear-gradient(145deg,rgba(201,168,76,.16),rgba(201,168,76,.04) 60%,rgba(8,145,178,.08));border-color:rgba(201,168,76,.45)}
.card.cta-card .ic{stroke:#C9A84C}
.card.cta-card h3{color:#f3e3b0}
.card.cta-card:hover{border-color:rgba(201,168,76,.8)}

/* partner refresh */
#partner .why{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){#partner .why{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){#partner .why{grid-template-columns:1fr}}
.founding{position:relative;overflow:hidden;isolation:isolate;margin-top:34px;padding:44px 28px 48px;border-radius:24px;border:1px solid rgba(201,168,76,.32);background:radial-gradient(ellipse at 50% 0%,rgba(8,145,178,.16),transparent 65%),rgba(10,22,40,.55);text-align:center}
.founding canvas.netfx{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.55}
@media (max-width:640px){.founding{padding:34px 18px 38px;border-radius:18px}}
.founding .kicker{margin-bottom:10px}
.founding p{margin:0;font-size:18px;line-height:1.6;color:#dfe6ef}
.founding p b{color:#f3e3b0}
.fit{margin:22px auto 0;text-align:center;color:var(--muted,#9fb1c6);font-size:16px}

/* amazon book box */
.bookbox{margin-top:44px;padding:28px 30px;border:1px solid rgba(201,168,76,.35);border-radius:18px;background:linear-gradient(135deg,rgba(201,168,76,.10),rgba(8,145,178,.06))}
.bookbox .kicker{display:inline-flex;margin-bottom:12px}
.bookbox h3{font-family:Sora,sans-serif;font-size:22px;margin:0 0 4px}
.bookbox .muted{margin:0 0 18px}
.bookbox .disc{margin:14px 0 0;font-size:12.5px;opacity:.65}
footer .fine .aff{display:block;margin-top:6px;opacity:.75}

/* founding partner dialog */
dialog.pdlg{width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;padding:36px 34px 32px;border:1px solid rgba(201,168,76,.4);border-radius:22px;background:radial-gradient(ellipse at 50% 0%,rgba(8,145,178,.18),transparent 60%),#0A1628;color:#e8eef5;box-shadow:0 30px 80px rgba(0,0,0,.55)}
dialog.pdlg::backdrop{background:rgba(5,12,24,.72);backdrop-filter:blur(4px)}
.pdlg .kicker{display:inline-flex}
.pdlg h2{font-family:Sora,sans-serif;font-size:clamp(24px,3vw,32px);margin:10px 0 8px;color:#fff}
.pdlg-lead{margin:0 0 22px;color:#b9c7d8;line-height:1.6}
.pdlg-wait{color:#b9c7d8}
.pdlg-wait a{color:#C9A84C}
.pdlg-x{position:absolute;top:14px;right:16px;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.06);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.pdlg-x:hover{background:rgba(201,168,76,.22)}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.pf{grid-column:1/-1;display:flex;flex-direction:column;gap:6px}
.pf.half{grid-column:auto}
.pf label{font-size:13.5px;font-weight:600;color:#dfe6ef}
.pf label span{color:#C9A84C}
.pf input,.pf textarea{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:12px;border:1px solid rgba(107,140,174,.35);background:rgba(255,255,255,.04);color:#fff;font:inherit;font-size:15px;resize:vertical}
.pf input::placeholder{color:#6B8CAE}
.pf input:focus,.pf textarea:focus{outline:none;border-color:#C9A84C;box-shadow:0 0 0 3px rgba(201,168,76,.18)}
.pf [aria-invalid="true"]{border-color:#e07a6a}
.pf-err{color:#f0a394;font-size:12.5px}
.pf-err:empty{display:none}
.pform-msg{margin:14px 0 0;color:#f0a394}
.pform-msg:empty{display:none}
.pform .btn{margin-top:20px;width:100%;justify-content:center}
.pdone{text-align:center;padding:6px 0 2px}
.pdone p{margin:0 0 20px;line-height:1.65}
.pdone .pdone-note{margin:18px 0 0;opacity:.75;font-size:14px}
@media (max-width:560px){.pgrid{grid-template-columns:1fr}.pf.half{grid-column:1/-1}dialog.pdlg{padding:30px 20px 24px}}
/* band newsletter */
.band .bsub{max-width:520px;margin:32px auto 0;text-align:left}
.band .bsub .sub-msg{margin:10px 0 0;font-size:13px;color:var(--bad);min-height:1em;text-align:center}
.band .bsub .sub-done{color:var(--gold);font-weight:600;margin:0;font-size:18px;text-align:center}
.band .bsoc{display:flex;justify-content:center;gap:22px;margin-top:26px}
.band .bsoc a{display:inline-flex;color:#fff;font-size:22px;line-height:1;opacity:.85;transition:color .3s,opacity .3s,transform .3s}
.band .bsoc a:hover{color:var(--gold);opacity:1;transform:translateY(-2px)}
@media (max-width:560px){.band .bsub .sub-row{flex-direction:column}.band .bsub .sub-row .btn{width:100%;justify-content:center}}

/* bookshelf (home #books) */
.shelf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:54px}
.shelf-item{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.02);color:inherit;text-decoration:none;transition:border-color .3s,transform .3s}
.shelf-item:hover{border-color:rgba(201,168,76,.6);transform:translateY(-3px)}
.shelf-cov{aspect-ratio:16/9;background:var(--ink2);overflow:hidden}
.shelf-cov img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.shelf-item:hover .shelf-cov img{transform:scale(1.04)}
.shelf-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.shelf-body h3{font-family:Sora,sans-serif;font-size:16px;line-height:1.3;margin:0;color:#fff}
.shelf-body p{margin:0;font-size:13.5px;color:var(--steel)}
.shelf-more{margin-top:auto;padding-top:10px;font-size:13px;font-weight:600;color:var(--gold)}
@media (max-width:900px){.shelf{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:62%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}.shelf-item{scroll-snap-align:start}}
@media (max-width:560px){.shelf{grid-auto-columns:78%}}
/* bookshelf: buy on Amazon */
.shelf-item{position:relative}
.shelf-link{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none}
.shelf-buy{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 16px 16px;padding:9px 12px;border-radius:999px;border:1px solid rgba(201,168,76,.55);color:#f3e3b0;font-size:13px;font-weight:600;text-decoration:none;transition:background .3s,border-color .3s,color .3s}
.shelf-buy:hover{background:#C9A84C;border-color:#C9A84C;color:#0A1628}
.shelf-disc{margin:14px 0 0;font-size:12.5px;color:var(--steel);opacity:.8}
/* mobile: no accidental zoom */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation}
@media (max-width:900px){input,textarea,select{font-size:16px !important}}

/* bookshelf: touch fixes */
.shelf-item,.shelf-link,.shelf-buy{-webkit-tap-highlight-color:transparent}
@media (max-width:900px){.shelf{overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x pan-y;padding:6px 2px 12px;scroll-padding-left:2px}}
@media (hover:none){.shelf-item:hover{transform:none}.shelf-item:hover .shelf-cov img{transform:none}.shelf-buy:hover{background:transparent;color:#f3e3b0;border-color:rgba(201,168,76,.55)}.shelf-buy:active{background:#C9A84C;color:#0A1628}}
.shelf .shelf-item.rv,.shelf .shelf-item.rv.in{transform:none;transition:opacity .6s ease,border-color .3s}
@media (hover:hover) and (min-width:901px){.shelf .shelf-item.rv.in:hover{transform:translateY(-3px);transition:transform .3s,border-color .3s,opacity .6s}}

/* bookshelf: buy button states */
.shelf .shelf-buy{background:rgba(201,168,76,.08);cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .15s}
@media (hover:hover){.shelf .shelf-buy:hover{background:#C9A84C;border-color:#C9A84C;color:#0A1628}}
.shelf .shelf-buy:active,.shelf .shelf-buy.is-pressed{background:#C9A84C;border-color:#C9A84C;color:#0A1628;transform:scale(.97)}


/* row with heading + subtext */
.row.mid{align-items:center;flex-wrap:nowrap}
.row.mid > div{flex:1 1 auto;min-width:0;max-width:720px}
.row.mid > .btn{flex:none}
@media (max-width:700px){.row.mid{flex-wrap:wrap;align-items:flex-start}}
.row.mid .lead{margin-bottom:0}

/* bookshelf cards behave like every other card */
.shelf .shelf-item.card{padding:0;display:flex;flex-direction:column}
.shelf .shelf-item.card:hover,.shelf .shelf-item.card:active{border-color:rgba(201,168,76,.55)}
.shelf .shelf-item.card:active::before{opacity:1}
.shelf .shelf-item.card > *{position:relative}