/* CG181 · The bold redesign, /founder/ (approved Nov 2, 2026).
   Full-bleed portrait hero on navy, mono chapter labels, career years as display numerals, an Inc. 5000 band, On stage
   with big frames (on navy on the phone), 64px writing stats, the essay as a blue-to-navy cover, and a stage photo before
   the footer on the phone. Rules that must beat the site's three-id heading rules are scoped to main#main.
   Photos: the founder library only, Steven alone in every new frame. */

:root{--bd-ink:#0a1633;--bd-blue:#1559f5;--bd-sky:#5b8cfa;--bd-mute:#b9c4dd;--bd-pale:#bfd0ff;--bd-mist:#f5f7fc;
  --bd-mono:"IBM Plex Mono",ui-monospace,monospace}

/* Nav: the pill hugs its contents, so Say aloha sits inside it */
@media (min-width:1101px){
  html body header.px-head.px-head.px-head{width:max-content;max-width:calc(100% - 24px)}
  html body header.px-head.px-head.px-head .px-in{gap:24px;padding-right:8px!important}
}
.px-cta span[aria-hidden]{display:inline-block;line-height:1;transform:translateY(1px);font-size:15px}

.bd-k{margin:0;font:500 13px/1.3 var(--bd-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--bd-pale)}

/* Chapter labels: 01 · CAREER */
main#main .tg-num,main#main .cg-fhero .px-kick{font:500 13px/1.3 var(--bd-mono)!important;letter-spacing:.18em!important;text-transform:uppercase!important;color:var(--bd-blue)!important}
main#main .tg-num>span{color:var(--bd-ink)!important;font:inherit!important;margin:0!important;padding:0!important;background:none!important;border:0!important}
main#main .tg-num>span::after{content:"  \00B7  ";white-space:pre}
main#main .tg-num.w{color:var(--bd-pale)!important}
main#main .tg-num.w>span{color:#fff!important}

/* Hero: the portrait leaves the text grid and fills the right of a navy field */
main#main section.cg-fhero{position:relative;padding:0!important;background:var(--bd-ink)!important;overflow:hidden;color:#fff}
main#main section.cg-fhero .tg-bl{display:none}
main#main .cg-fhero .tg-shot.hero{width:100%;height:100%;margin:0;border-radius:0!important;box-shadow:none!important;transform:none!important;aspect-ratio:auto!important}
main#main .cg-fhero .tg-shot.hero img{width:100%;height:100%;object-fit:cover;border-radius:0!important}
main#main .cg-fhero .px-kick{color:var(--bd-pale)!important}
main#main .cg-fhero h1:not(#a):not(#b):not(#c),main#main .cg-fhero h1:not(#a):not(#b):not(#c) *{color:#fff!important}
@media (min-width:761px){
  main#main section.cg-fhero{height:clamp(640px,61vw,880px)}
  main#main .cg-fhero .tg-fone{position:absolute;z-index:0;top:0;right:0;bottom:0;width:62%;height:100%;margin:0;max-width:none}
  main#main .cg-fhero .tg-shot.hero img{object-position:30% 25%!important}
  main#main .cg-fhero .tg-shot.hero figcaption{left:auto;right:max(24px,calc(50% - 544px));bottom:40px;font:500 13px/1 var(--bd-mono);letter-spacing:.14em;text-transform:uppercase;background:rgba(10,22,51,.6);color:#fff;padding:12px 16px;border-radius:999px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  main#main .cg-fhero .bd-sc{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#0a1633 0%,#0a1633 40%,rgba(10,22,51,.75) 52%,rgba(10,22,51,0) 70%),linear-gradient(0deg,rgba(10,22,51,.7) 0%,rgba(10,22,51,0) 30%)}
  main#main .cg-fhero .cg-fhgrid{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding-bottom:112px}
  main#main .cg-fhero .cg-fhtx{width:900px;max-width:100%}
  main#main .cg-fhero h1:not(#a):not(#b):not(#c){font-size:clamp(88px,10.4vw,150px)!important;letter-spacing:-.047em!important;line-height:.88!important;max-width:none}
  main#main .cg-fhero .px-dek:not(#a):not(#b){font-size:20px!important;line-height:1.55!important;max-width:520px;color:#d5ddf0!important}
}

/* 01 Career: the years as display numerals */
main#main #steven .tg-rk{display:block;font:800 36px/1 Rubik,sans-serif!important;letter-spacing:-.04em!important;color:var(--bd-blue)!important;text-transform:none!important;margin:0 0 8px}
main#main #steven .tg-rail p{font-size:17px;line-height:1.55}
@media (min-width:761px){
  main#main #steven{padding-top:152px;padding-bottom:140px}
  main#main #steven .cg-cgrid{grid-template-columns:1fr 1fr;gap:80px}
  main#main #steven .tg-rail li{padding:24px 0;border-top:1px solid #e3e8f2}
  main#main #steven h2:not(#a):not(#b):not(#c){font-size:clamp(56px,6vw,86px)!important;letter-spacing:-.042em!important;line-height:.95!important;max-width:none}
}

/* Inc. 5000 band: the award photo and the strip's own caption */
.bd-inc{display:grid;grid-template-columns:1fr 1fr;height:760px;background:var(--bd-ink);color:#fff;overflow:hidden}
.bd-inc img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.bd-inc-tx{display:flex;flex-direction:column;justify-content:center;padding:0 max(24px,calc(50vw - 544px)) 0 96px}
.bd-inc .bd-inc-n{margin:28px 0 32px;font:800 clamp(160px,18vw,260px)/.85 Rubik,sans-serif;letter-spacing:-.054em;color:#fff}
.bd-inc .bd-inc-n i{font-style:normal;color:var(--bd-sky)}
.bd-inc .bd-inc-c{font:500 24px/1.35 Rubik,sans-serif;color:#d5ddf0;margin:0;max-width:440px}

/* 02 On stage: big frames. overflow:clip, not hidden, so the section is not the sticky label's scroll box
   (with hidden, the 02 label sat over "On stage and off." on phones) */
main#main section#moments{overflow:clip}
main#main #moments .cg-strip .cg-shot{flex:none}
main#main #moments .cg-strip .cg-shot img{object-fit:cover}
@media (min-width:761px){
  main#main section#moments{background:var(--bd-mist);padding-top:140px;padding-bottom:120px}
  main#main #moments .px-sechead{align-items:end}
  main#main #moments h2:not(#a):not(#b):not(#c){font-size:clamp(72px,7.8vw,112px)!important;letter-spacing:-.045em!important;line-height:.92!important;max-width:none}
  main#main #moments .cg-strip .cg-shot{width:440px}
  main#main #moments .cg-strip .cg-shot img{width:440px;height:560px;border-radius:24px}
  main#main #moments .cg-strip .cg-shot figcaption{font-size:15px;margin-top:16px}
  main#main #moments .cg-strip-ctl button{width:56px;height:56px}
}

/* 03 Writing */
main#main #writing .tg-wstats dt{font:800 64px/1 Rubik,sans-serif!important;letter-spacing:-.047em!important;color:var(--bd-blue)!important}
main#main #writing .tg-ep{border-radius:24px}
@media (min-width:761px){
  main#main #writing{padding-top:152px;padding-bottom:140px}
  main#main #writing .tg-wgrid{grid-template-columns:1fr 1.25fr;gap:80px}
  main#main #writing h2:not(#a):not(#b):not(#c){font-size:clamp(56px,5vw,72px)!important;letter-spacing:-.042em!important;line-height:.96!important}
  main#main #writing .tg-wstats{grid-template-columns:repeat(2,1fr);gap:0;margin-top:40px}
  main#main #writing .tg-wlist .tg-wt{font-size:20px}
}

/* 04 The essay and 05 On the record */
main#main #press{background:var(--bd-mist)}
main#main #press .cg-essay{border-radius:24px;background:radial-gradient(90% 70% at 30% 0%,#3f7bff 0%,rgba(21,89,245,0) 60%),linear-gradient(180deg,#1559f5 0%,#0a1633 100%)!important;display:flex;align-items:flex-end}
main#main #press .cg-essay .tg-bl{display:none}
@media (min-width:761px){
  main#main #press{padding-top:152px;padding-bottom:152px}
  main#main #press .cg-prgrid{grid-template-columns:1fr 1.15fr;gap:80px}
  main#main #press .cg-essay{min-height:520px}
  main#main #press .cg-essay-in{padding:44px}
  main#main #press .cg-essay h3:not(#a):not(#b):not(#c){font-size:40px!important;line-height:1.02!important;letter-spacing:-.04em!important}
  main#main #press h2:not(#a):not(#b):not(#c){font-size:clamp(56px,5vw,72px)!important;letter-spacing:-.042em!important;line-height:.96!important}
  main#main #press .tg-sv{border-radius:16px}
  main#main #press .tg-plist li{padding:20px 0}
  main#main #press .tg-plist .tg-wt{font-size:20px;letter-spacing:-.015em}
}

.bd-fclose{display:none}

/* Middle widths */
@media (min-width:761px) and (max-width:1100px){
  .bd-inc{height:600px}
  .bd-inc-tx{padding:0 32px 0 48px}
  main#main .cg-fhero .tg-fone{width:70%}
  main#main #writing .tg-wgrid,main#main #steven .cg-cgrid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:40px}
  main#main #press .cg-prgrid{grid-template-columns:minmax(0,1fr);gap:56px}
}

/* Phone (390): October shell kept (fixed header, sticky labels, tab bar) */
@media (max-width:760px){
  main#main section.cg-fhero{display:flex;flex-direction:column;padding:0 0 44px!important}
  main#main .cg-fhero .tg-fone{order:-1;position:relative;width:100%;max-width:none;margin:0;height:520px}
  main#main .cg-fhero .tg-fone::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,22,51,.25) 0%,rgba(10,22,51,0) 22%,rgba(10,22,51,0) 55%,#0a1633 100%)}
  main#main .cg-fhero .tg-shot.hero img{object-position:42% 18%!important}
  html body main#main>section.cg-fhero figure.tg-shot.hero figcaption{left:20px;right:auto;top:76px;bottom:auto;z-index:2;width:auto;font:500 13px/1 var(--bd-mono)!important;letter-spacing:.12em!important;text-transform:uppercase!important;background:rgba(10,22,51,.55);color:#fff;padding:12px 16px;border-radius:999px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  main#main .cg-fhero .bd-sc{display:none}
  main#main .cg-fhero .cg-fhgrid{position:relative;z-index:2;margin-top:-152px;padding-top:0;height:auto}
  main#main .cg-fhero .cg-fhtx{display:flex!important;flex-direction:column!important}
  main#main .cg-fhero .px-kick{order:-3!important;margin:0 0 16px!important}
  html body main#main .cg-fhero h1:not(#a):not(#b):not(#c){font-size:clamp(52px,17vw,66px)!important;letter-spacing:-.045em!important;line-height:.9!important}
  main#main .cg-fhero .px-dek:not(#a):not(#b){color:#c9d5f2!important;opacity:1!important;font-size:17px!important;line-height:1.55!important;margin-top:16px}
  /* the sticky labels keep their numerals on the phone */
  html.sh-on body main#main .tg-num>span{display:inline!important}
  html.sh-on body main#main .tg-num.ap-sh{border-bottom:1px solid #e3e8f2}
  main#main :is(#steven,#moments,#writing,#press) h2:not(#a):not(#b):not(#c){font-size:44px!important;letter-spacing:-.041em!important;line-height:.96!important}
  main#main #steven{padding-top:64px;padding-bottom:72px}
  main#main #steven .px-sub{font-size:17px;line-height:1.55}
  main#main #steven .px-btn{min-height:56px;width:100%;justify-content:center;font-size:17px}
  main#main #steven .tg-rail{background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
  main#main #steven .tg-rail li{display:block!important;padding:24px 0!important;border-top:1px solid #e3e8f2!important;background:none!important}
  main#main #steven .tg-rk{font-size:32px!important;width:auto}
  main#main #steven .tg-rail p{color:#3a4660}
  .bd-inc{position:relative;display:block;height:600px}
  .bd-inc img{position:absolute;inset:0;object-position:50% 25%}
  .bd-inc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,22,51,0) 35%,rgba(10,22,51,.92) 100%)}
  .bd-inc-tx{position:absolute;z-index:1;left:20px;right:20px;bottom:40px;padding:0}
  .bd-inc .bd-inc-n{font-size:150px;letter-spacing:-.053em;margin:16px 0}
  .bd-inc .bd-inc-c{font-size:20px}
  main#main section#moments{background:var(--bd-ink)!important;color:#fff;padding-bottom:64px}
  html.sh-on body main#main #moments .tg-num.ap-sh{background:var(--bd-ink)!important;color:var(--bd-sky)!important;border-color:rgba(255,255,255,.12)}
  html.sh-on body main#main #moments .tg-num.ap-sh>span{color:#fff!important}
  main#main #moments h2:not(#a):not(#b):not(#c){color:#fff!important}
  main#main #moments .px-sub{color:var(--bd-mute)!important;font-size:17px;line-height:1.55}
  main#main #moments .cg-strip .cg-shot{width:300px}
  main#main #moments .cg-strip .cg-shot img{width:300px;height:400px;border-radius:20px}
  html.sh-on body main#main #moments .cg-strip .cg-shot figcaption{font-size:13px!important;color:var(--bd-mute)!important;margin-top:12px}
  main#main #moments .cg-strip-ctl button{width:48px;height:48px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff}
  main#main #writing{padding-top:64px}
  main#main #writing .tg-wstats{gap:8px}
  main#main #writing .tg-wstats>div{background:var(--bd-mist);border:0;border-radius:16px}
  main#main #writing .tg-wstats dt{font-size:48px!important;height:auto}
  main#main #writing .tg-ep{display:block!important;padding:24px!important;overflow:hidden;border-radius:24px!important;background:linear-gradient(180deg,#1559f5 0%,#0a1633 100%)!important;border:0!important;box-shadow:none!important}
  main#main #writing .tg-ep img{width:168px;height:168px;display:block;object-fit:cover;border-radius:16px;margin:0;box-shadow:0 20px 40px -16px rgba(0,0,0,.5)}
  main#main #writing .tg-ep-tx{width:auto;padding:20px 0 4px}
  main#main #writing .tg-ep-k{color:var(--bd-pale)!important;font-size:13px}
  main#main #writing .tg-ep-t{color:#fff!important;font:800 32px/1.02 Rubik,sans-serif;letter-spacing:-.03em;margin:8px 0 16px}
  main#main #writing .tg-ep-go{color:#fff!important;font-size:15px}
  main#main #writing .tg-wlist li a{min-height:64px}
  main#main #writing .cg-wmore summary{min-height:56px}
  main#main #press{padding-top:64px}
  main#main #press .cg-essay{min-height:460px}
  main#main #press .cg-essay-in{padding:28px 24px 32px}
  main#main #press .cg-essay h3:not(#a):not(#b):not(#c){font-size:32px!important;line-height:1.02!important;letter-spacing:-.035em!important}
  main#main #press .cg-essay .tg-btn{min-height:52px}
  main#main #press .cg-pressline a{min-height:44px;display:inline-flex;align-items:center}
  .bd-fclose{display:block;position:relative;height:440px;overflow:hidden;background:var(--bd-ink)}
  .bd-fclose img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
  .bd-fclose::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,22,51,0) 55%,rgba(10,22,51,.55) 100%)}
  .cai-pill{min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center}
}