/* While I'm Here website. Built from the brand guide (Corey, Nov 3 2026): the neon sign leads, everything else is quiet.
   Fonts are the brand's: Barlow for text, Carl Marx for titles (Adobe Fonts, family "carlmarx"; until its web project
   is connected, Barlow Condensed stands in). Colors are the brand's: navy #002A48, purple #4B1C77, magenta #FF15FF,
   white, black. No grays: soft text is white at a lower strength, so it takes on the color under it.
   Three looks while Corey picks one: ?look=a (default, the guide's navy night) | b (black and neon) | c (purple room). */
@font-face{font-family:Barlow;font-weight:300;font-display:swap;src:url(/fonts/barlow-light.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:400;font-display:swap;src:url(/fonts/barlow-regular.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:500;font-display:swap;src:url(/fonts/barlow-medium.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:600;font-display:swap;src:url(/fonts/barlow-semibold.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:500;font-display:swap;src:url(/fonts/barlow-condensed-500.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url(/fonts/barlow-condensed-600.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(/fonts/barlow-condensed-700.woff2) format("woff2")}

/* look A: the guide's own navy night (the cover, the master logo page) */
:root{--navy:#002A48;--purple:#4B1C77;--mag:#FF15FF;
  --bg:#001424;--bg2:#001C33;--band:#002A48;--glow:rgba(0,72,120,.55);--ink:#fff;--soft:rgba(255,255,255,.7);--dim:rgba(255,255,255,.46);
  --line:rgba(255,255,255,.12);--em:var(--mag);--label:var(--mag);--btn:#fff;--btnInk:#001424;--rule:var(--mag);
  --disp:carlmarx,"Barlow Condensed",Barlow,Arial,sans-serif;--dw:600;--dt:.01em;--dl:.95;--dsz:1.08;--case:uppercase;--emw:600;--ems:normal;
  --lab:carlmarx,"Barlow Condensed",Barlow,Arial,sans-serif;--labcase:uppercase;--labsp:.16em;--labsz:15px}
/* look B: black and neon, the sign glowing in a dark room; titles in Barlow, sentence case */
html[data-look=b]{--bg:#000;--bg2:#06020B;--band:#4B1C77;--glow:rgba(75,28,119,.55);--em:var(--mag);--label:var(--mag);--btn:var(--mag);--btnInk:#000;--rule:var(--purple);
  --disp:Barlow,Arial,sans-serif;--dw:600;--dt:-.02em;--dl:1.02;--dsz:.92;--case:none;--emw:300;
  --lab:Barlow,Arial,sans-serif;--labcase:uppercase;--labsp:.2em;--labsz:12px}
/* look C: the purple room, purple base with navy bands; headlines in Barlow Condensed, Carl Marx on the small labels (Corey, Nov 3 2026) */
html[data-look=c]{--bg:#1A0830;--bg2:#220B3D;--band:#002A48;--glow:rgba(255,21,255,.18);--em:#fff;--label:var(--mag);--btn:var(--mag);--btnInk:#1A0830;--rule:var(--mag);
  --soft:rgba(255,255,255,.74);--disp:"Barlow Condensed",Barlow,Arial,sans-serif;--dw:700;--dt:.015em;--dl:.94;--dsz:1.12;--case:uppercase;--emw:500}

*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 Barlow,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}img,video{display:block;max-width:100%;height:auto}
.wrap{width:min(1240px,100% - 64px);margin:0 auto}

/* type */
h1,h2,h3,.disp{margin:0;font-family:var(--disp);font-weight:var(--dw);letter-spacing:var(--dt);line-height:var(--dl);color:var(--ink);text-transform:var(--case)}
h1{font-size:calc(clamp(46px,6vw,92px) * var(--dsz))}
h2{font-size:calc(clamp(40px,4.6vw,72px) * var(--dsz))}
h3{font-size:calc(30px * var(--dsz));line-height:1.1}
h1 em,h2 em,h3 em{font-style:normal;font-weight:var(--emw);color:var(--em)}
.label{display:flex;align-items:center;gap:14px;margin:0 0 22px;font-family:var(--lab);font-size:var(--labsz);font-weight:600;letter-spacing:var(--labsp);text-transform:var(--labcase);color:var(--label)}
.label::before{content:"";width:28px;height:2px;background:currentColor;box-shadow:0 0 8px currentColor}
.lede{margin:22px 0 0;font-size:18px;color:var(--soft);max-width:34em}

/* buttons: square, quiet */
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;border:1px solid var(--btn);background:var(--btn);color:var(--btnInk);
  font:600 14px/1 Barlow,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .35s,color .35s}
.btn:hover{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);border-color:rgba(255,255,255,.35)}.btn.ghost:hover{border-color:var(--ink)}
.btn svg{width:18px;height:18px}

/* header */
.top{position:absolute;top:0;left:0;right:0;z-index:20}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:92px}
.mark{display:flex;align-items:center;text-decoration:none}.mark img{width:62px;height:62px}
/* the horizontal sign in the header (Corey, Nov 3 2026): its glow spills past the letters, so the letters line up with the page edge */
.mark img.hz{width:auto;max-width:none;flex-shrink:0;height:92px;margin:-10px 0 -10px -19px}
.top nav{display:flex;align-items:center;gap:34px;font-size:15px}
.top nav a{text-decoration:none;color:var(--soft);transition:color .3s}.top nav a:hover{color:var(--ink)}
.top nav .yt-link{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid rgba(255,255,255,.3);color:var(--ink)}
.top nav .yt-link:hover{border-color:var(--ink)}.top nav .yt-link svg{width:17px;height:17px}

/* hero: the sign, big, on black */
.hero{position:relative;height:clamp(540px,78vh,780px);overflow:hidden;background:radial-gradient(ellipse 46% 70% at 70% 46%,var(--glow),transparent 70%),var(--bg)}
.hero video,.hero .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;mix-blend-mode:screen;transform:scale(1.32);transform-origin:70% 47%}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.35) 0,transparent 22%,transparent 62%,var(--bg) 100%)}
.hero .cap{position:absolute;left:0;right:0;bottom:44px;z-index:2}
.hero .cap .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.hero .cap h1{max-width:12em;font-size:calc(clamp(36px,3.7vw,58px) * var(--dsz))}
.hero .cap p{margin:0;font-size:15px;color:var(--soft)}
.hero .cap .label{margin:0}

/* latest episode: player and words side by side */
.latest{padding:10px 0 110px}
.latest .wrap{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:64px;align-items:center}
.player{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--line);box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
.player video,.player .yt{position:absolute;inset:0;width:100%;height:100%}
.player .tag{position:absolute;top:16px;left:16px;padding:6px 10px;background:rgba(0,0,0,.72);color:var(--ink);font-size:12px;letter-spacing:.04em;pointer-events:none}
.epno{display:flex;align-items:baseline;gap:18px;margin-bottom:20px}
.epno .n{font-family:var(--disp);font-weight:var(--dw);font-size:calc(96px * var(--dsz));line-height:.8;color:var(--ink)}
.epno .st{font-size:14px;color:var(--soft)}
.latest h2{font-size:calc(clamp(34px,3.4vw,52px) * var(--dsz))}
.latest .lede{font-size:17px}

.yt{position:relative;display:block;border:0;padding:0;margin:0;background:#000;cursor:pointer;aspect-ratio:16/9;width:100%}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:opacity .4s}.yt:hover img{opacity:1}
.yt .play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;border:1px solid rgba(255,255,255,.8);background:rgba(0,0,0,.35);transition:background .3s}
.yt:hover .play{background:rgba(0,0,0,.6)}
.yt .play::after{content:"";position:absolute;left:34px;top:28px;border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent #fff}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* sections */
.sec{padding:120px 0;border-top:1px solid var(--line)}
.sec.alt{background:var(--bg2)}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:end;margin-bottom:56px}
.head .lede{margin:0}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.ep .yt{border:1px solid var(--line)}.ep .n{margin:18px 0 6px;font-size:13px;color:var(--soft)}.ep h3{font-size:calc(26px * var(--dsz))}.ep p{margin:8px 0 0;color:var(--soft);font-size:16px}

.where{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wcell{display:flex;flex-direction:column;gap:14px;padding:34px 30px 36px;text-decoration:none;border-left:1px solid var(--line);transition:background .4s}
.wcell:first-child{border-left:0;padding-left:0}
a.wcell:hover{background:rgba(255,255,255,.025)}
.wcell svg{width:26px;height:26px;color:var(--ink)}
.wcell b{font-family:var(--disp);font-weight:var(--dw);text-transform:var(--case);font-size:calc(34px * var(--dsz));line-height:1;color:var(--ink)}
.wcell span{color:var(--soft);font-size:16px}
.wcell i{margin-top:auto;font-style:normal;font-size:14px;color:var(--ink)}.wcell.soon i{color:var(--dim)}

.about{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:80px;align-items:center}
.corey{width:100%;filter:grayscale(1) contrast(1.06);border:1px solid var(--line)}
.about p{margin:20px 0 0;color:var(--soft);font-size:18px;max-width:32em}

.emails{padding:70px 0;background:var(--band);border-top:2px solid var(--rule);box-shadow:inset 0 2px 0 0 var(--rule)}
.emails .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:64px;align-items:center}
.emails h3{font-size:calc(36px * var(--dsz))}.emails p{margin:10px 0 0;color:var(--soft);font-size:16px}
.join{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr) auto;gap:0;align-items:stretch}
.join label span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.join input{width:100%;height:54px;padding:0 18px;border:1px solid rgba(255,255,255,.3);border-right:0;border-radius:0;background:transparent;color:var(--ink);font:300 16px Barlow,Arial,sans-serif;outline:none;transition:border-color .3s}
.join input::placeholder{color:var(--dim)}.join input:focus{border-color:var(--ink)}
.join .btn{height:54px;min-height:0}.join .trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.join .msg{grid-column:1/-1;margin:10px 0 0;min-height:1.4em;font-size:15px;color:var(--ink)}.join .msg.bad{color:#e8a7a0}
.join.done label,.join.done .btn{display:none}.join.done .msg{font-size:20px;margin:0}

.foot{padding:70px 0 0;border-top:1px solid var(--line)}
.frow{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}.frow p{margin:0;color:var(--soft);font-size:14px}
.foot .mark img{width:72px;height:72px}
.legal{margin:30px 0 0;padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--dim)}.legal a{color:var(--soft)}
.chip{position:fixed;left:14px;bottom:14px;z-index:30;padding:6px 12px;background:rgba(0,0,0,.7);color:rgba(255,255,255,.6);font-size:12px;text-decoration:none}

.rv{opacity:0;transform:translateY(18px);transition:opacity 1s ease,transform 1s ease}.rv.in{opacity:1;transform:none}

@media (max-width:1000px){
  .latest .wrap,.head,.emails .wrap{grid-template-columns:minmax(0,1fr);gap:34px}
  .about{grid-template-columns:minmax(0,1fr);gap:40px}.corey{max-width:440px}
  .grid{grid-template-columns:minmax(0,1fr)}
  .where{grid-template-columns:minmax(0,1fr)}.wcell{border-left:0;border-top:1px solid var(--line);padding:28px 0}.wcell:first-child{border-top:0}
  .top nav a:not(.yt-link){display:none}
}
@media (max-width:640px){
  .wrap{width:min(1240px,100% - 40px)}
  .top .wrap{height:76px}.mark img{width:50px;height:50px}.mark img.hz{width:auto;height:66px;margin:-6px 0 -6px -14px}
  .hero{height:68svh;min-height:500px}.hero video,.hero .still{object-position:80% 50%;transform:scale(.7);transform-origin:50% 6%}
  .hero .cap h1{font-size:calc(35px * var(--dsz))}
  .hero .cap{bottom:30px}.hero .cap .wrap{gap:16px}
  .latest{padding:0 0 80px}.sec{padding:84px 0}
  .epno .n{font-size:calc(72px * var(--dsz))}
  .join{grid-template-columns:minmax(0,1fr)}.join input{border-right:1px solid rgba(255,255,255,.22);border-bottom:0}.join .btn{width:100%}
  .lede{font-size:17px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rv{opacity:1;transform:none;transition:none}}

/* setup page */
.page{padding:150px 0 40px}
.steps{list-style:none;counter-reset:s;margin:34px 0 0;padding:0;border-top:1px solid var(--line)}
.steps li{counter-increment:s;position:relative;padding:22px 0 22px 64px;border-bottom:1px solid var(--line);color:var(--soft);font-size:17px}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:18px;font-family:var(--disp);font-weight:600;font-size:28px;color:var(--mag)}
.steps li b{display:block;margin-bottom:4px;color:var(--ink);font-weight:500;font-size:18px}.steps li b span{margin-left:10px;font-size:13px;font-weight:400;color:var(--soft)}
.steps a,.note a{color:var(--ink);overflow-wrap:anywhere}.steps i,.note i{font-style:normal;color:var(--ink)}
.kit a{display:block;padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}.kit a::after{content:" ›";color:var(--soft)}
.lines{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;margin-top:34px}.lines h3{margin-bottom:6px}
.lines ul{list-style:none;margin:0;padding:0}.lines li{padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink);font-size:18px}
.lines li.pick{padding:16px 18px;margin:8px 0;border:1px solid rgba(255,255,255,.55)}
.lines li span{display:block;margin-top:6px;font-size:14px;color:var(--soft)}
.note{margin-top:30px;padding:22px 24px;border:1px solid var(--line);background:var(--bg2);color:var(--soft);font-size:16px}.note b{color:var(--ink);font-weight:500}
.page .sec{padding:90px 0}.page .wrap.narrow{width:min(900px,100% - 48px)}
@media (max-width:760px){.lines{grid-template-columns:minmax(0,1fr)}.steps li{padding-left:50px}}
.bc-row{display:block;font-size:12.5px;line-height:1;text-align:left}
.bc-in{margin-top:24px;padding:20px 0 30px;border-top:1px solid rgba(239,243,244,.14);border-top-color:color-mix(in srgb,currentColor 16%,transparent)}
@media (max-width:760px){.bc-in{margin-top:20px;padding:18px 0 calc(104px + env(safe-area-inset-bottom,0px))}}
.bahlr-credit{display:inline-flex!important;align-items:baseline;flex-wrap:wrap;gap:10px 16px;margin:0;line-height:1;font-size:inherit;letter-spacing:.01em;color:inherit}
.bahlr-credit a{display:inline-flex;align-items:baseline;gap:.34em;padding:0;margin:0;background:none;border:0;color:inherit!important;text-decoration:none!important;font-size:inherit;letter-spacing:inherit;text-transform:none;line-height:1}
.bahlr-credit a>span,.bahlr-credit .bc-staff{opacity:.72;transition:opacity .35s ease}
.bahlr-credit a:hover>span,.bahlr-credit a:hover.bc-staff,.bahlr-credit a:focus-visible>span,.bahlr-credit a.bc-staff:focus-visible{opacity:1}
.bahlr-credit span{display:inline-block!important;margin:0!important}
.bahlr-credit .bc-sep{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.4;align-self:center}
.bahlr-credit svg{display:inline-block;height:1.1em;width:auto;flex:none;overflow:visible}
.bahlr-credit .bc-rec{animation:bcRec 2.4s ease-in-out infinite}
@keyframes bcRec{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.bahlr-credit .bc-rec{animation:none}}
/* 404: lights out */
.nf{min-height:100vh;min-height:100svh;display:grid;align-items:center;position:relative;overflow:hidden;padding:140px 0 80px}
.nf::before{content:"";position:absolute;inset:0;background:url(/media/wih-hero.jpg?v=4) center/cover;opacity:.16;filter:saturate(.6)}
.nf .wrap{position:relative}
.nf .big{font-family:var(--disp);font-weight:700;font-size:clamp(120px,22vw,260px);line-height:.8;color:transparent;-webkit-text-stroke:2px var(--mag);text-shadow:0 0 30px rgba(255,21,255,.25);margin:0 0 24px}
.nf h1{font-size:clamp(40px,6vw,72px);margin-bottom:18px}
.nf p.lede{max-width:560px}
.nf ul{list-style:none;margin:46px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:900px}
.nf li a{display:block;padding:18px;border:1px solid var(--line);text-decoration:none;color:var(--ink);height:100%}
.nf li a b{display:block;font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:20px;margin-bottom:6px}
.nf li a span{color:var(--soft);font-size:14.5px}
.nf li a:hover{border-color:var(--mag)}
@media (max-width:760px){.nf ul{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}