/* Solution Sandbox — styles written from scratch */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#111214;--ink:#ededed;--muted:#9a9a9a;--line:rgba(255,255,255,.16);
  --navy:#12204e;--rust:#c2401f;--mauve:#b79aa5;--sage:#4c5f57;
  /* foundersfund.com sets everything in proxima-nova (licensed, Adobe Fonts); Nunito Sans is the free stand-in */
  --ff:"Nunito Sans","proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:var(--ff);--sans:var(--ff);
  --ease-io:cubic-bezier(.77,0,.18,1);--ease-out:cubic-bezier(.16,1.06,.38,.98);--ease-card:cubic-bezier(.84,0,.16,1);
  --r:1.1rem;
}
html{font-size:min(calc(100vw / 144),70px);-webkit-text-size-adjust:100%}
@media (max-width:600px){html{font-size:calc(100vw / 37.5)}}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:clamp(15px,1.9rem,19px);line-height:1.41;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
html.locked,html.locked body{overflow:hidden}
::selection{background:rgba(130,130,130,.7);color:#fff}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg,canvas{display:block}
.serif{font-family:var(--ff);font-weight:700;letter-spacing:.01em;line-height:1.15}
.label{font-family:var(--ff);font-size:clamp(14px,1.58rem,16px);letter-spacing:normal;text-transform:none;font-weight:400;line-height:1.25}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (min-width:601px){.m-only{display:none!important}}
@media (max-width:600px){.d-only{display:none!important}}

/* underline hover */
.ul{position:relative;display:inline-block;overflow:hidden;padding-bottom:2px;vertical-align:bottom}
.ul::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;
  transform:translateX(calc(-100% - 1px));transition:transform .6s var(--ease-io)}
.ul.on::after{transform:none}
@media (hover:hover){.ul:hover::after{transform:none;transition-timing-function:var(--ease-out)}}

/* ---------- hero card stage (plain black until the video/poster paints) ---------- */
#stage{position:fixed;inset:0;z-index:0;background:#000;overflow:hidden;will-change:clip-path}
.vbox{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none}
html.anim .vbox{transition:left 1.25s var(--ease-io),top 1.25s var(--ease-io),width 1.25s var(--ease-io),height 1.25s var(--ease-io)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;background:#000;pointer-events:none}
.vshade{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 100% 0,rgba(0,0,0,.42),rgba(0,0,0,.18) 90px,rgba(0,0,0,0) 200px),radial-gradient(ellipse 60% 45% at center,rgba(0,0,0,.36),rgba(0,0,0,.08) 100%)}

.grain{position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#logo{position:absolute;left:0;top:0;transform-origin:0 0;color:#fbfbfb;will-change:transform}
#logo .mask{overflow:hidden;padding-bottom:1px}
#logo .rise{transform:translateY(105%);transition:transform 1.1s var(--ease-out)}
html.rise #logo .rise{transform:none}
#logo svg{width:100%;height:auto;filter:drop-shadow(0 0 .25em rgba(0,0,0,.28)) drop-shadow(0 1px 2px rgba(0,0,0,.22))}
html.anim #stage,html.anim #logo{transition:clip-path 1.25s var(--ease-io),transform 1.25s var(--ease-io)}

/* ---------- hero ---------- */
.hero{position:fixed;inset:0;z-index:1;display:flex;pointer-events:none}
.hero .space{width:50%;height:100%}
.hero .content{width:50%;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  padding:3.2rem 6.5rem 1.8rem 3.3rem;will-change:transform}
.hero .top{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;pointer-events:auto}
.hero .loc{color:var(--muted)}
.hero nav{display:flex;gap:2.4rem}
.hero h1{font-size:5.7rem;max-width:62rem}
.hero .fade{opacity:0;transform:translateY(1.6rem);transition:opacity 1s var(--ease-out),transform 1.2s var(--ease-out)}
html.shown .hero .fade{opacity:1;transform:none}
html.shown .hero .fade.d2{transition-delay:.12s}
.menu-btn{display:inline-flex;align-items:center;gap:.8rem}
.menu-btn i{display:block;width:1.8rem;height:1px;background:currentColor;box-shadow:0 .5rem 0 currentColor;transform:translateY(-.25rem)}

@media (max-width:600px){
  #stage{position:absolute;height:100vh;height:100svh}
  html.intro #stage{position:fixed}
  .hero{position:relative;inset:auto;flex-direction:column;min-height:100vh;min-height:100svh;pointer-events:auto}
  .hero .space{width:100%;height:34.9rem;flex:none}
  .hero .content{width:100%;flex:1;padding:1rem 1.3rem 1.6rem}
  .hero .top{align-items:center}
  .hero h1{font-size:3.46rem}
}
/* menu toggle: bare 3-bar hamburger modeled on foundersfund.com (26x21 icon, 4.5px bars, 8.25px pitch), invisible 44px tap target */
.pill{position:fixed;z-index:90;top:2.4rem;right:2.4rem;width:44px;height:44px;padding:0;border:0;background:none;display:block;cursor:pointer;color:#ededed;
  opacity:0;transform:translateY(-.8rem);pointer-events:none;transition:opacity .6s var(--ease-out),transform .7s var(--ease-out),color .25s ease;-webkit-tap-highlight-color:transparent}
.pill i{position:absolute;left:9px;width:26px;height:4.5px;border-radius:.5px;background:currentColor;transform-origin:50% 50%;
  transition:transform .35s var(--ease-io),opacity .2s ease,background-color .25s ease,box-shadow .25s ease}
.pill i:nth-child(1){top:11.5px}.pill i:nth-child(2){top:19.75px}.pill i:nth-child(3){top:28px}
.pill.on{opacity:1;transform:none;pointer-events:auto}
.pill.on-dark{color:#ededed}
.pill.on-dark i{box-shadow:0 0 5px rgba(0,0,0,.34),0 1px 2px rgba(0,0,0,.26)}
.pill:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:4px}
.pill.x{color:#ededed}
.pill.x i{box-shadow:none}
.pill.x i:nth-child(1){transform:translateY(8.25px) rotate(45deg)}
.pill.x i:nth-child(2){opacity:0;transform:scaleX(.2)}
.pill.x i:nth-child(3){transform:translateY(-8.25px) rotate(-45deg)}
@media (max-width:600px){.pill{top:13.5px;right:15px}}
@media (prefers-reduced-motion:reduce){.pill i{transition:none}}
.overlay{position:fixed;inset:0;z-index:80;background:var(--bg);color:var(--ink);visibility:hidden;pointer-events:none;transform:translateY(-100%);transition:transform .6s var(--ease-io),visibility 0s .6s}
.overlay.open{visibility:visible;pointer-events:auto;transform:none;transition:transform .6s var(--ease-io)}
.overlay .in{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;text-align:center}
.overlay ul{list-style:none;margin:0;padding:0}
.overlay li a{display:inline-block;font-family:var(--ff);font-weight:800;letter-spacing:-.03em;font-size:6.65rem;line-height:1.4;color:#d9d9d9;opacity:0;transform:translateY(1.6rem);transition:opacity .25s ease,transform .25s ease,color .15s ease}
.overlay.open li a{opacity:1;transform:none;transition:opacity .5s ease,transform .6s var(--ease-out),color .15s ease}
.overlay.open li:nth-child(1) a{transition-delay:.18s,.18s,0s}.overlay.open li:nth-child(2) a{transition-delay:.25s,.25s,0s}.overlay.open li:nth-child(3) a{transition-delay:.32s,.32s,0s}.overlay.open li:nth-child(4) a{transition-delay:.39s,.39s,0s}
/* links sit slightly off-white; the hovered/focused link (and the current page) is pure white */
.overlay li a[aria-current=page],.overlay li a:focus-visible{color:#fff}
@media (hover:hover){.overlay li a:hover{color:#fff}}
.overlay li a:focus-visible{outline:2px solid #ededed;outline-offset:4px;border-radius:4px}
.overlay .foot{position:absolute;left:0;right:0;bottom:3rem;display:flex;justify-content:center;gap:2.4rem;font-size:clamp(14px,1.58rem,16px);font-weight:400;color:#9a9a9a;opacity:0;transition:opacity .3s ease}
.overlay.open .foot{opacity:1;transition:opacity .6s ease .45s}
@media (max-width:600px){.overlay li a{font-size:4.04rem;line-height:1.4}.overlay .foot{flex-direction:column;gap:.6rem;bottom:2.4rem}}
@media (prefers-reduced-motion:reduce){.overlay,.overlay.open,.overlay li a,.overlay.open li a{transition:none!important}}

/* ---------- events grid ---------- */
.room{height:270vh;pointer-events:none}
.events{position:relative;z-index:2;padding:0 .9rem}
.events .grid{display:flex}
.events .col{flex:1;border-left:1px solid var(--line)}
.events .col:first-child{border-left:0}
.events .col:nth-child(even){padding-top:17.5rem}
.tile{position:relative;height:35rem;border-top:1px solid var(--line);overflow:hidden;color:#fbfbfb}
.tile .face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center;padding:2rem}
.tile .face .nm{font-size:3.6rem;font-weight:600;letter-spacing:normal;line-height:1}
.tile .face .k{opacity:.6}
.tile .card{position:absolute;inset:0;background:var(--bg);color:var(--ink);padding:3rem 3.3rem;transform:translateY(calc(100% + 1px));
  transition:transform .5s var(--ease-card);display:flex;flex-direction:column}
.tile .card .nm{font-size:3.6rem;font-weight:600;letter-spacing:normal;line-height:1;margin-bottom:1.5rem}
.tile .card p{opacity:.55;font-size:clamp(14px,1.6rem,17px);line-height:1.3;max-width:28rem}
.tile .card .go{margin-top:auto;align-self:flex-start;opacity:.6;transition:opacity .3s}
.tile .card .go:hover{opacity:1}
.tile .x{position:absolute;right:0;bottom:0;width:3.4rem;height:3.4rem;display:flex;align-items:center;justify-content:center;
  background:rgba(130,130,130,.18);opacity:0;transition:opacity .3s var(--ease-card)}
.tile .x svg{width:.9rem}
@media (hover:hover) and (min-width:601px){.tile:hover .card{transform:none}.tile:hover .x{opacity:1}}
.tile.opened .card{transform:none}.tile.opened .x{opacity:1}
.tile.cta .face .nm{font-style:italic}
.events .note{position:relative;padding:3rem 2.4rem 3.4rem;color:#fbfbfb;display:flex;justify-content:space-between;gap:2rem;border-top:1px solid var(--line)}
.events .note .serif{font-size:3.4rem;font-weight:600;line-height:1.15;max-width:70rem}
.events .bgwrap{display:none}
@media (max-width:600px){
  .room{display:none}
  .events{margin:22rem 1.2rem 0;padding:0;border-radius:var(--r);overflow:clip;clip-path:inset(0 round var(--r));background:var(--navy)}
  .events .bgwrap{display:block;position:sticky;top:0;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh}
  .events .bgwrap .grad{position:absolute}
  .events .grid{position:relative}
  .events .col:nth-child(even){padding-top:10.5rem}
  .events .grid .col:nth-child(3),.events .grid .col:nth-child(4){display:none}
  .tile{height:26rem}
  .tile .face .nm{font-size:2.5rem}
  .tile .card{padding:2rem 1.8rem}
  .tile .card .nm{font-size:2.6rem;margin-bottom:1rem}
  .tile .card p{font-size:13px;line-height:1.3}
  .tile .card .go{font-size:13px;margin-top:1rem}
  .tile .x{opacity:1;background:rgba(255,255,255,.14);top:0;bottom:auto;width:3.6rem;height:3.6rem}
  .tile .x svg{transition:transform .4s var(--ease-card)}
  .tile.opened .x{background:rgba(130,130,130,.2);color:var(--ink);z-index:2}
  .tile.opened .x svg{transform:rotate(45deg)}
  .events .note{flex-direction:column;padding:2.4rem 2rem 2.8rem}
  .events .note .serif{font-size:2.6rem}
}
/* mobile: tiles from cols 3-4 get re-flowed by JS into cols 1-2 */

/* ---------- beliefs ---------- */
.beliefs{position:relative;z-index:5;background:var(--bg);margin-top:12rem;min-height:100vh}
.beliefs .head{position:absolute;top:0;left:0;padding:3rem 3.3rem 4.5rem;z-index:2;pointer-events:none}
.beliefs .head h2{font-size:4.75rem;width:111rem;white-space:pre-line}
.beliefs .stick{position:absolute;inset:0;padding-top:9rem;pointer-events:none}
.beliefs .stick .w{position:sticky;top:0;height:100vh;width:62rem;padding:4.5rem 3.3rem;display:flex;flex-direction:column;justify-content:space-between}
.beliefs .subs{position:relative;height:20rem}
.beliefs .sub{position:absolute;left:0;top:0;width:55.6rem;font-size:3.4rem;font-weight:600;line-height:1.15;opacity:0;transform:translateY(1.2rem);
  transition:opacity .7s var(--ease-out),transform .9s var(--ease-out)}
.beliefs .sub.on{opacity:1;transform:none}
.beliefs .cards{position:relative;align-self:flex-end;width:26.2rem;height:24rem}
.beliefs .cards .card{position:absolute;right:0;bottom:0;text-align:right;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.beliefs .cards .card.on{opacity:1;visibility:visible;transition:opacity .45s}
.beliefs .cards .card .nm{font-size:2.2rem;font-weight:600;white-space:nowrap}
.beliefs .cards .card .job{color:var(--muted);margin-top:.4rem;font-size:clamp(14px,1.58rem,16px)}
.beliefs .cards .card p{margin-top:2rem;opacity:.55;width:26.2rem;font-size:clamp(14px,1.58rem,16px);line-height:1.41}
.beliefs .list{position:relative;z-index:1;display:flex;justify-content:space-between;width:72rem;margin-left:65.5rem;padding:90vh 0 15rem}
.beliefs .list .col{width:32.7rem}
.beliefs .list .col:first-child{margin-top:15rem}
.art{position:relative;width:100%;aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:#ececea;margin-bottom:6.6rem;cursor:pointer;
  clip-path:inset(0 round var(--r))}
.art svg{position:absolute;inset:0;width:100%;height:100%}
.art .mono{filter:grayscale(1) contrast(1.05);transition:opacity .5s cubic-bezier(.4,.8,.74,1)}
.art .clr{opacity:0;transition:opacity .5s cubic-bezier(.4,.8,.74,1)}
.art.on .clr{opacity:1}
.art .tag{position:absolute;left:1.4rem;bottom:1.2rem;font-size:clamp(11px,1.1rem,13px);font-weight:300;letter-spacing:.25em;text-transform:uppercase;opacity:.8}
.art.dark{background:#111}.art.dark .tag{color:#eee}
.slider-wrap,.m-cards{display:none}
@media (max-width:600px){
  .beliefs{margin-top:0;padding-top:3rem}
  .beliefs .head{position:relative;padding:0 1.2rem}
  .beliefs .head h2{font-size:3.2rem;width:99%}
  .beliefs .stick{position:relative;padding:0}
  .beliefs .stick .w{position:relative;height:auto;width:auto;padding:0 0 3.6rem;display:block}
  .beliefs .list{display:none}
  .slider-wrap{display:block;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:1.2rem;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-top:8rem;padding:0 1.2rem}
  .slider-wrap::-webkit-scrollbar{display:none}
  .slider{display:flex;width:max-content;padding-right:1.2rem}
  .slider .art{width:62.4vw;margin:0 7.8vw 0 0;scroll-snap-align:start;flex:none;border-radius:.7rem;clip-path:inset(0 round .7rem)}
  .beliefs .cards{display:none}
  .m-cards{display:block;position:relative;padding:2.4rem 1.2rem 0;min-height:24rem}
  .m-cards .card{text-align:left;position:absolute;left:1.2rem;top:2.4rem;width:72vw;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
  .m-cards .card.on{opacity:1;visibility:visible;transition:opacity .45s}
  .m-cards .nm{font-size:2.2rem;font-weight:600}.m-cards .job{color:var(--muted);margin-top:.4rem;font-size:14px}
  .m-cards p{margin-top:1.4rem;opacity:.55;font-size:14px;line-height:1.41}
  .beliefs .subs{height:auto;padding:0 1.2rem}
  .beliefs .sub{position:relative;width:auto;font-size:3.2rem;margin-top:12rem;opacity:1;transform:none}
}

/* ---------- join ---------- */
.join{position:relative;z-index:5;background:var(--bg);display:flex;gap:6rem;padding:14rem 3.3rem 12rem}
.join .l{width:62rem}
.join .l h2{font-size:5.7rem;margin:2.4rem 0 3rem}
.join .l p{max-width:46rem;color:var(--muted);line-height:1.41}
.join form{flex:1;max-width:60rem;display:flex;flex-direction:column;gap:3.2rem;padding-top:4.6rem}
.field{position:relative;display:block}
.field span{display:block;color:var(--muted);margin-bottom:.6rem}
.field input,.field textarea{width:100%;font-family:var(--ff);font-weight:400;font-size:clamp(18px,2.2rem,26px);color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid rgba(237,237,237,.22);padding:.6rem 0 1rem;border-radius:0;outline:none;resize:none;transition:border-color .3s}
.field input:focus,.field textarea:focus{border-color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:1rem}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips label span{display:inline-block;padding:1rem 1.6rem;border:1px solid rgba(237,237,237,.22);border-radius:99px;font-size:clamp(14px,1.58rem,16px);transition:background .3s,color .3s,border-color .3s}
.chips input:checked+span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chips input:focus-visible+span{outline:2px solid var(--rust);outline-offset:2px}
.send{align-self:flex-start;display:inline-flex;align-items:center;gap:1.2rem;padding:1.4rem 2.4rem;border-radius:99px;background:var(--ink);color:var(--bg);font-size:clamp(15px,1.9rem,19px);font-weight:600;letter-spacing:.03em;
  transition:transform .4s var(--ease-out),background .3s}
.send:hover{background:#d6d6d6}.send:active{transform:scale(.97)}
.send svg{width:1.2rem;transition:transform .4s var(--ease-out)}.send:hover svg{transform:translateX(.4rem)}
.form-msg{color:var(--muted);min-height:1.4em}
.ph{font-size:.8em;opacity:.6}
@media (max-width:600px){
  .join{flex-direction:column;gap:2rem;padding:8rem 1.2rem 7rem}
  .join .l{width:auto}.join .l h2{font-size:3.46rem}
  .join form{padding-top:1rem}
  .field input,.field textarea{font-size:20px}
}

/* ---------- footer ---------- */
.site-foot{position:relative;z-index:5;background:var(--bg);color:var(--ink);padding:0 3.3rem 2.8rem;font-size:clamp(13px,1.58rem,16px);font-weight:400;letter-spacing:normal;line-height:1.41;text-align:left}
@media (max-width:600px){.site-foot{padding:0 1.2rem 2.4rem}}

/* desktop: white page after the expanded card */
@media (min-width:601px){
  .events{--line:rgba(237,237,237,.12);color:var(--ink);background:transparent}
  .tile{color:var(--ink)}
  .tile .face .k{opacity:.5}
  .tile .card{background:#1d1e21;color:#fbfbfb}
  .tile .card p{opacity:.68}
  .tile .x{background:rgba(237,237,237,.06)}
  .tile:hover .x,.tile.opened .x{background:rgba(255,255,255,.14);color:#fbfbfb}
  .events .note{color:var(--ink)}
  html.static .events{background:transparent}
}

/* no-JS / reduced motion fallbacks */
html.static #stage{position:absolute;height:100vh}
html.static .hero{position:relative}
html.static .room{height:0}
html.static .events{background:var(--navy);margin:0 .9rem;border-radius:var(--r);overflow:hidden}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* foundersfund.com mobile type scale (body 16px) */
@media (max-width:600px){
  body{font-size:16px;line-height:1.41}
  .join .l p{font-size:16px}
  .send{font-size:16px}
  .beliefs .sub{font-size:2.6rem}
}

/* top-left brand mark: hidden during the intro, then always visible (incl. over the open menu) */
.brand{position:fixed;z-index:90;top:24px;left:28px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-.8rem);transition:opacity .6s var(--ease-out),transform .7s var(--ease-out),visibility 0s .7s;-webkit-tap-highlight-color:transparent}
.brand img{width:34px;height:34px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.22))}
html.brand-on .brand,html.static .brand{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .6s var(--ease-out),transform .7s var(--ease-out)}
.brand:focus-visible{outline:2px solid #ededed;outline-offset:2px}
@media (max-width:600px){.brand{top:13.5px;left:16.5px}.brand img{width:29px;height:29px}}
/* article pages (e.g. /to-our-future/): white page, foundersfund.com-style essay column */
body.article{background:var(--bg)}
body.article .site-foot{background:var(--bg)}
.post{padding:clamp(120px,14.5rem,180px) 24px clamp(80px,10rem,140px)}
/* full-width content (Ryan, 2026-10-25): text spans the viewport, inset by the site gutter (= footer / hero text edge; 33px at 1440, lines up with the header logo) */
:root{--gut:3.3rem}
@media (max-width:600px){:root{--gut:24px}}
.post article{max-width:none;margin:0}
.post h1,.excerpt .ex-title{font-family:var(--ff);font-weight:700;font-size:clamp(40px,5.4rem,64px);line-height:1.08;letter-spacing:-.01em;color:var(--ink)}
.post .dek,.excerpt .dek{margin-top:18px;font-size:clamp(20px,2.5rem,26px);line-height:1.35;color:var(--ink);opacity:.82}
.post .byline{margin-top:20px;font-size:16px;line-height:1.4;color:var(--muted)}
.post-body{margin-top:clamp(40px,5.2rem,64px)}
.post-body p{font-size:20px;line-height:1.6;color:var(--ink)}
.post-body p+p{margin-top:1.15em}
.post-body p.last{font-weight:700}
.post-body strong{font-weight:700}.post-body em{font-style:italic}
.post-body p.hd{font-size:30px}  /* section headers (whole-bold paragraphs): 1.5x body text */
@media (max-width:600px){
  .post{padding:104px 24px 72px}
  .post h1,.excerpt .ex-title{font-size:36px;line-height:1.1}
  .post .dek,.excerpt .dek{margin-top:12px;font-size:19px}
  .post .byline{margin-top:14px;font-size:15px}
  .post-body{margin-top:36px}
  .post-body p{font-size:18px;line-height:1.6}
  .post-body p.hd{font-size:26px}
}
/* article pages: bars stay black with no bar behind them; a faint white halo keeps them legible over the video embed */
body.article .brand img{filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}
/* homepage: manifesto excerpt below the hero */
.excerpt{position:relative;z-index:2;background:var(--bg);padding:clamp(96px,12rem,160px) var(--gut) clamp(96px,12rem,160px)}
.excerpt .wrap{max-width:none;margin:0}
.excerpt .ex-head{margin-bottom:clamp(40px,5.2rem,64px)}
.excerpt p{font-size:20px;line-height:1.6;color:var(--ink)}
.excerpt p+p{margin-top:1.15em}
.readmore{display:inline-flex;align-items:center;gap:10px;margin-top:40px;padding:14px 26px;border:1.5px solid #ededed;border-radius:999px;background:#ededed;color:#111214;
  font-family:var(--ff);font-weight:600;font-size:16px;line-height:1;transition:background .25s ease,color .25s ease}
.readmore svg{width:13px;height:11px;transition:transform .3s var(--ease-out)}
@media (hover:hover){.readmore:hover{background:transparent;color:#ededed}.readmore:hover svg{transform:translateX(4px)}}
.readmore:focus-visible{outline:2px solid #ededed;outline-offset:3px}
@media (max-width:600px){
  .excerpt{padding:64px var(--gut) 72px}
  .excerpt .ex-head{margin-bottom:36px}
  .excerpt p{font-size:18px}
  .readmore{margin-top:32px}
}
/* article header image: full-bleed banner at natural ~2:1 ratio, text column below */
body.article .post{padding-top:0}
.post-hero{margin:0 0 clamp(56px,7.2rem,96px);width:100%;background:#e9dcc0}
.post-hero img{display:block;width:100%;height:auto;aspect-ratio:1916/821}
@media (max-width:600px){.post-hero{margin-bottom:36px}}
body.article .post{padding-left:0;padding-right:0}
body.article .post article{max-width:none;padding:0 var(--gut)}
/* homepage mobile: scroll-linked cross-fade (main.js sets --hero-fade / --ex-fade; opacity only, no layout shift; without JS or with reduced motion both stay fully visible) */
@media (max-width:600px){.hero .content{opacity:var(--hero-fade,1)}.excerpt .ex-head{opacity:var(--ex-fade,1)}}
/* article banner, desktop: shorter full-bleed crop with parallax (image drifts at ~0.45x scroll, content scrolls over it) */
@media (min-width:601px){
  .post-hero{position:relative;height:min(58vh,620px);min-height:340px;overflow:hidden}
  .post-hero picture{position:absolute;inset:0;display:block}
  .post-hero img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 12%;will-change:transform;transform:translate3d(0,var(--py,0px),0)}
  body.article .post article{position:relative;z-index:1;background:var(--bg)}
}
@media (prefers-reduced-motion:reduce){.post-hero img{transform:none!important;will-change:auto}}
/* article banner, mobile: natural 2:1 ratio, same 0.45x parallax (transform only, clipped so no gap shows) */
@media (max-width:600px){
  .post-hero{position:relative;overflow:hidden}
  .post-hero img{will-change:transform;transform:translate3d(0,var(--py,0px),0)}
  body.article .post article{position:relative;z-index:1;background:var(--bg)}
}
@media (prefers-reduced-motion:reduce){.post-hero img{transform:none!important;will-change:auto}}

/* ---------- footer + email signup (shared on every page) ---------- */
.site-foot{padding:0 3.3rem}
.site-foot .foot-in{border-top:1px solid rgba(237,237,237,.12);padding:clamp(28px,3.4rem,44px) 0 clamp(36px,4.6rem,64px)}
.site-foot .foot-row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.site-foot .foot-copy{display:flex;align-items:center;gap:10px;margin:0;font-size:16px;font-weight:600;color:var(--ink)}
/* pt155: footer logo removed (Ryan: "remove the logo from the footer") */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sub{position:relative;margin:0}
.sub .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.sub-field{display:flex;align-items:center;gap:12px;color:var(--ink)}
.sub-env{width:32px;height:22px;flex:none;color:#6c6e71;transition:color .2s}
.sub input[type=email]{width:260px;font-family:var(--ff);font-size:17px;font-weight:400;color:var(--ink);background:transparent;border:0;border-bottom:1px solid transparent;border-radius:0;padding:10px 2px 8px;outline:none;transition:border-color .2s;-webkit-appearance:none;appearance:none}
.sub input::placeholder{color:#8f9194;opacity:1}
.sub input:focus,.sub.filled input{border-bottom-color:var(--ink)}
.sub:focus-within .sub-env,.sub.filled .sub-env{color:var(--ink)}
.sub button{flex:none;width:30px;height:30px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;border-radius:50%;opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s,color .2s}
.sub button svg{display:block;width:30px;height:30px}
.sub:focus-within button,.sub.filled button,.sub[data-state] button{opacity:1;transform:none}
.sub button:hover{color:#fff}.sub button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sub[data-state=loading] button{opacity:.45;cursor:progress}
.sub[data-state=loading] button svg{animation:subpulse 1s ease-in-out infinite}
@keyframes subpulse{50%{transform:scale(.86)}}
.sub-msg{position:absolute;right:0;top:100%;margin:8px 0 0;min-height:1em;font-size:14px;line-height:1.4;color:var(--muted);text-align:right;white-space:nowrap}
.sub[data-state=ok] .sub-msg{color:#7cc47f}.sub[data-state=error] .sub-msg{color:#ff7a7f}
.sub-msg a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media (max-width:600px){
  .site-foot{padding:0 1.6rem}
  .site-foot .foot-in{padding:28px 0 32px}
  .site-foot .foot-row{flex-direction:column-reverse;align-items:stretch;gap:26px}
  .sub-field{gap:10px}
  .sub input[type=email]{flex:1;width:auto;min-width:0;border-bottom-color:rgba(237,237,237,.25)}
  .sub button{opacity:1;transform:none}
  .sub-msg{position:static;text-align:left;white-space:normal;margin-top:10px}
}
@media (prefers-reduced-motion:reduce){.sub button,.sub input,.sub-env{transition:none}.sub[data-state=loading] button svg{animation:none}}

/* off-black theme: the white strokes inside the envelope and arrow icons take the page colour */
.sub-env path,.sub button svg path{stroke:var(--bg)}

/* ---------- events page ---------- */
/* short page: footer sits at the bottom of the screen */
body.events-page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body.events-page>main{flex:1 0 auto}
body.events-page>.site-foot{flex:none}
/* the grid starts a little below the fixed header row (--evgap) (logo 24px+44px, hamburger 2.4rem+44px) */
.evpage{--evtop:max(68px,calc(2.4rem + 44px));--evgap:32px;padding:calc(var(--evtop) + var(--evgap)) 0 clamp(64px,8rem,120px);overflow-x:clip}
.ev-wrap{max-width:1000px;margin:0 auto;padding:0 24px;box-sizing:content-box}
.ev-empty{margin-top:24px;font-size:18px;line-height:1.6;color:var(--muted)}
.ev-empty a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* always two tiles, each 50vw wide; everything inside scales with the viewport (tight at 320-390, roomy at 1440, full at 2560) */
.ev-list{list-style:none;width:100%;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;align-items:stretch;box-sizing:border-box}
.ev-card{display:flex;flex-direction:column;min-width:0;min-height:clamp(200px,17vw,520px);box-sizing:border-box;padding:clamp(18px,3.2vw,72px) clamp(14px,3.6vw,88px);border-right:1px solid rgba(237,237,237,.12);border-bottom:1px solid rgba(237,237,237,.12);background:var(--bg);transition:background-color .15s ease}
.ev-card:nth-child(2n){border-right:0}
/* no outer top/bottom edge: only the dividers between cards remain (last row = first odd card within the last two, plus anything after it) */
.ev-card:nth-child(2n+1):nth-last-child(-n+2),.ev-card:nth-child(2n+1):nth-last-child(-n+2)~.ev-card{border-bottom:0}
.ev-card:focus-within{background-color:#17181b}
@media (hover:hover){.ev-card:hover{background-color:#17181b}}
@media (prefers-reduced-motion:reduce){.ev-card{transition:none}}
.ev-meta{display:flex;flex-wrap:wrap;column-gap:.5em;font-size:clamp(11.5px,calc(.4vw + 10px),20px);line-height:1.4;color:var(--muted);letter-spacing:.02em}
.ev-title{margin-top:clamp(10px,1.1vw,24px);max-width:18em;font-family:var(--ff);font-weight:700;font-size:clamp(17px,calc(1.9vw + 10px),64px);line-height:1.15;letter-spacing:-.005em;color:var(--ink)}
.ev-desc{margin-top:clamp(8px,.9vw,20px);max-width:34em;font-size:clamp(13.5px,calc(.6vw + 11px),28px);line-height:1.5;color:var(--ink);opacity:.86;flex:1}
.ev-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:.6em;margin-top:clamp(16px,2vw,40px);padding:.72em 1.3em;border:1.5px solid rgba(237,237,237,.85);border-radius:999px;background:none;color:var(--ink);font:600 clamp(13px,calc(.45vw + 11px),22px)/1 var(--ff);cursor:pointer;transition:background .25s ease,color .25s ease}
.ev-cta svg{width:.85em;height:.72em;transition:transform .3s var(--ease-out)}
@media (hover:hover){.ev-cta:hover{background:#ededed;color:#111214}.ev-cta:hover svg{transform:translateX(4px)}}
.ev-cta:focus-visible{outline:2px solid #ededed;outline-offset:3px}
@media (max-width:600px){.evpage{--evtop:57.5px;--evgap:20px}} /* mobile header: logo and hamburger at 13.5px + 44px */

/* ---------- event signup popup ---------- */
html.evm-lock,html.evm-lock body{overflow:hidden}
.evm{position:fixed;inset:0;margin:auto;width:min(560px,calc(100vw - 48px));max-width:none;max-height:min(88vh,860px);padding:0;border:1px solid rgba(237,237,237,.16);border-radius:16px;background:#17181b;color:var(--ink);font-family:var(--ff);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.evm::backdrop{background:rgba(5,6,8,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.evm[open]{display:flex;flex-direction:column;animation:evm-in .32s var(--ease-out)}
.evm[open]::backdrop{animation:evm-fade .25s ease}
@keyframes evm-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes evm-fade{from{opacity:0}to{opacity:1}}
.evm-scroll{overflow-y:auto;overscroll-behavior:contain;padding:36px 36px 32px}
.evm-x{position:absolute;top:14px;right:14px;z-index:2;width:40px;height:40px;border:0;border-radius:50%;background:#17181b;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease}
.evm-x svg{width:16px;height:16px}
.evm-x:hover{background:rgba(237,237,237,.08)}
.evm-x:focus-visible{outline:2px solid #ededed;outline-offset:2px}
.evm-meta{display:flex;flex-wrap:wrap;column-gap:8px;font-size:14px;color:var(--muted);letter-spacing:.02em;padding-right:44px}
.evm h2{margin-top:10px;font-weight:700;font-size:30px;line-height:1.12;letter-spacing:-.01em;padding-right:36px}
.evm-desc{margin-top:14px;font-size:16.5px;line-height:1.55;opacity:.88}
.evm-form{margin-top:26px;padding-top:24px;border-top:1px solid rgba(237,237,237,.12)}
.evm-role{display:grid;grid-template-columns:1fr 1fr;padding:4px;margin:0 0 20px;border:1px solid rgba(237,237,237,.18);border-radius:999px;min-width:0}
.evm-role legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.evm-role label{position:relative;display:block;cursor:pointer}
.evm-role input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.evm-role span{display:block;padding:10px 12px;border-radius:999px;text-align:center;font-weight:600;font-size:15px;color:var(--muted);transition:background .2s ease,color .2s ease}
.evm-role input:checked+span{background:#ededed;color:#111214}
.evm-role input:focus-visible+span{outline:2px solid #ededed;outline-offset:2px}
.evm-f{display:block;margin-top:14px}
.evm-f>span{display:block;font-size:13.5px;font-weight:600;color:var(--muted);margin-bottom:6px}
.evm-f>span i{font-style:normal;font-weight:400}
.evm-f input,.evm-f textarea{width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid rgba(237,237,237,.18);border-radius:10px;background:#111214;color:var(--ink);font:400 16px/1.4 var(--ff);transition:border-color .2s ease}
.evm-f textarea{min-height:84px;resize:vertical}
.evm-f input::placeholder,.evm-f textarea::placeholder{color:#6f6f6f}
.evm-f input:focus,.evm-f textarea:focus{outline:none;border-color:rgba(237,237,237,.7)}
.evm-f [aria-invalid=true]{border-color:#ff7a7f}
.evm-present[hidden]{display:none}
.evm-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.evm-go{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:22px;padding:14px 20px;border:0;border-radius:999px;background:#ededed;color:#111214;font:700 16px/1 var(--ff);cursor:pointer;transition:opacity .2s ease}
.evm-go svg{width:13px;height:11px}
.evm-go:disabled{opacity:.6;cursor:default}
.evm-go:focus-visible{outline:2px solid #ededed;outline-offset:3px}
.evm-msg{margin-top:12px;min-height:1.4em;font-size:14.5px;line-height:1.45;color:var(--muted)}
.evm-msg[data-state=error]{color:#ff7a7f}
.evm-done{margin-top:26px;padding-top:24px;border-top:1px solid rgba(237,237,237,.12)}
.evm-done[hidden]{display:none}
.evm-done p:first-child{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px;color:#7cc47f}
.evm-done p:first-child svg{width:22px;height:22px;flex:none}
.evm-done p+p{margin-top:8px;font-size:16px;line-height:1.5;opacity:.88}
.evm-done .evm-go{background:transparent;color:var(--ink);border:1.5px solid rgba(237,237,237,.85)}
@media (max-width:767px){
  .evm{inset:auto 0 0 0;margin:0;width:100%;max-height:92dvh;border-radius:18px 18px 0 0;border-width:1px 0 0}
  .evm[open]{animation:evm-up .34s var(--ease-out)}
  @keyframes evm-up{from{transform:translateY(100%)}to{transform:none}}
  .evm-scroll{padding:30px 20px calc(24px + env(safe-area-inset-bottom))}
  .evm-x{top:10px;right:10px}
  .evm h2{font-size:25px}
  .evm-desc{font-size:15.5px}
}
@media (prefers-reduced-motion:reduce){.evm[open],.evm[open]::backdrop{animation:none}}
/* article banner ~30% taller (pt66): desktop 58vh/620 cap -> 75vh/800 cap; mobile 2:1 (50vw) -> 65vw cover crop */
/* pt114: desktop only (>=601px): article banner 10% shorter (75vh/800/440 -> 67.5vh/720/396). Shared vars: /start/ desktop uses the same frame. Mobile unchanged (65vw) */
:root{--ah-h:min(67.5vh,720px);--ah-min:396px;--ah-m:65vw}   /* pt116: --ah-m = mobile banner height, shared by the article and /start/ */
@media (min-width:601px){.post-hero{height:var(--ah-h);min-height:var(--ah-min)}}
@media (max-width:600px){
  .post-hero{height:var(--ah-m)}
  .post-hero picture{position:absolute;inset:0;display:block}
  .post-hero img{height:100%;aspect-ratio:auto;object-fit:cover;object-position:70% 12%}  /* banner v2 (2.33:1): keeps the rocket and the middle builders in the 65vw crop */
}
/* homepage, desktop only (pt68): the page ends at the full-width video card (expansion completes at scrollY = 1.17 x viewport,
   so the document is 2.17 viewports tall); no teaser or footer below. A "To The Future" pill fades in under the centred wordmark. */
.ttf-btn{display:none}
@media (min-width:0){
  html.home .excerpt,html.home .site-foot{display:none}
  html.home .room{height:calc(217vh + 2px)}
  .ttf-btn{position:fixed;left:50%;top:50%;z-index:3;display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border:1.5px solid #ededed;border-radius:999px;background:#ededed;color:#111214;font:600 clamp(14px,1.6rem,20px)/1 var(--ff);letter-spacing:normal;white-space:nowrap;pointer-events:none;
    opacity:0;visibility:hidden;transform:translate(-50%,calc(-50% + 14px));transition:background .25s ease,color .25s ease,border-color .25s ease}
  .ttf-btn.on{pointer-events:auto}
  .ttf-btn svg{width:13px;height:11px;transition:transform .3s var(--ease-out)}
  .ttf-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
}
@media (hover:hover){.ttf-btn.on:hover{background:rgba(17,18,20,.45);color:#fff;border-color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.ttf-btn.on:hover svg{transform:translateX(4px)}}
/* pt70: opacity/position of the button and wordmark are scroll-linked in main.js (swap); centred on the wordmark's spot */
/* homepage, mobile (pt71): same as desktop — no teaser/footer; the video card grows to fill the whole screen edge to edge
   (main.js cardState), then the wordmark->button swap. Stage + hero are fixed; the stage is 100lvh tall (the screen with
   browser toolbars collapsed) so its geometry never changes when iOS/Android toolbars show or hide. Scroll room = 1.17 x stage
   height of expansion + one screen (lvh), so full screen is always reachable and the page ends there. */
@media (max-width:600px){
  html.home #stage{position:fixed;top:0;left:0;right:0;bottom:auto;height:100vh;height:100lvh}
  html.home .hero{position:fixed;inset:0;min-height:0;pointer-events:none}
  html.home .room{display:block;height:calc(217vh + 2px);height:calc(117lvh + 100lvh + 2px)}
}
/* article text cap (pt74): on very wide screens keep lines from running edge to edge; left-aligned at the gutter, not centered. 1400px >= the 1374px text width at 1440, so laptops are unchanged */
.post .post-head,.post .post-body{max-width:1400px;margin-left:0;margin-right:auto}
/* pt79 trial wordmark: one line on desktop, SOLUTION / SANDBOX stacked on phones */
#logo .wm-2{display:none}
@media (max-width:600px){#logo .wm-1{display:none}#logo .wm-2{display:block}}
/* non-home pages (pt93): the menu bar IS the fade -- no bar with a bottom edge. Solid page colour only above the icons,
   then one long cosine-eased blend (zero slope at both ends, so no perceptible boundary) to fully transparent. The article
   banner runs up behind it. Under the menu overlay (80) and logo/menu (90); never catches clicks. Mobile ends at 100px
   so the events first line (y=96) is clear at load; desktop ends at 160px (events first line y=146 sits at ~2%). */
body.article::before{content:"";position:fixed;z-index:78;left:0;right:0;top:0;height:160px;pointer-events:none;
  background:linear-gradient(to bottom,#111214 0,#111214 24px,rgba(17,18,20,0.994) 30.8px,rgba(17,18,20,0.976) 37.6px,rgba(17,18,20,0.946) 44.4px,rgba(17,18,20,0.905) 51.2px,rgba(17,18,20,0.854) 58.0px,rgba(17,18,20,0.794) 64.8px,rgba(17,18,20,0.727) 71.6px,rgba(17,18,20,0.655) 78.4px,rgba(17,18,20,0.578) 85.2px,rgba(17,18,20,0.500) 92.0px,rgba(17,18,20,0.422) 98.8px,rgba(17,18,20,0.345) 105.6px,rgba(17,18,20,0.273) 112.4px,rgba(17,18,20,0.206) 119.2px,rgba(17,18,20,0.146) 126.0px,rgba(17,18,20,0.095) 132.8px,rgba(17,18,20,0.054) 139.6px,rgba(17,18,20,0.024) 146.4px,rgba(17,18,20,0.006) 153.2px,rgba(17,18,20,0.000) 160.0px)}
@media (max-width:600px){
  body.article::before{height:100px;background:linear-gradient(to bottom,#111214 0,#111214 12px,rgba(17,18,20,0.994) 16.4px,rgba(17,18,20,0.976) 20.8px,rgba(17,18,20,0.946) 25.2px,rgba(17,18,20,0.905) 29.6px,rgba(17,18,20,0.854) 34.0px,rgba(17,18,20,0.794) 38.4px,rgba(17,18,20,0.727) 42.8px,rgba(17,18,20,0.655) 47.2px,rgba(17,18,20,0.578) 51.6px,rgba(17,18,20,0.500) 56.0px,rgba(17,18,20,0.422) 60.4px,rgba(17,18,20,0.345) 64.8px,rgba(17,18,20,0.273) 69.2px,rgba(17,18,20,0.206) 73.6px,rgba(17,18,20,0.146) 78.0px,rgba(17,18,20,0.095) 82.4px,rgba(17,18,20,0.054) 86.8px,rgba(17,18,20,0.024) 91.2px,rgba(17,18,20,0.006) 95.6px,rgba(17,18,20,0.000) 100.0px)}
}
/* pt94: with JS the fade is invisible at the top and fades in over the first 240px of scroll (page.js sets --bar-o,
   smootherstep-eased; a 250ms ease-out transition smooths wheel/trackpad jumps, reverses on the way back up). No JS -> always on, as before. */
/* pt97 (flicker fix): no CSS transition here any more. Rewriting --bar-o every scroll frame restarted a 250ms opacity
   animation each frame, and every animation start/stop made Chrome promote/demote the logo + menu button layers above it
   (re-rasterising the drop-shadowed logo = a visible flicker). page.js now eases the value itself (same ~250ms ease-out
   feel, writes only on change) and the fade, logo and menu button keep one permanent compositor layer each. */
html.js body.article::before{opacity:var(--bar-o,0);will-change:opacity}
body.article .brand,body.article .pill{will-change:opacity,transform}
/* pt101: Start and Build pages (/start/, /build/; body.launch-page, main.post.launch): exactly the /to-the-future/ header
   (logo, menu button, scroll-in top fade). Only their banner differs (below). Launch + Invest pages and the header links are gone. */
/* pt99: Start/Build banners are 2/3 the article banner's height (desktop min(75vh,800px)/440 floor -> min(50vh,533px)/293 floor;
   mobile 65vw -> 43.333vw). Crop re-centred a little lower so the builders and skyline stay in the shorter frame. */
/* pt106: Start/Build have their own banners (2056x378 strips, 5.44:1). The banner takes the image's own ratio at full width,
   so the whole image shows uncropped (about 265px tall at 1440), floored at 150px on narrow screens (object-fit cover then
   crops the sides) and capped at 533px on very wide screens. Crops keep the people in frame: Start = the builder with the
   prototype and his two listeners (right of centre); Build = the centre table. The parallax drift is unchanged. A soft top
   scrim (gradient to transparent, no edge) keeps the logo, Apply and menu buttons legible over bright parts of the images. */
.launch .post-hero{position:relative;overflow:hidden;height:auto!important;min-height:150px!important;max-height:533px;aspect-ratio:2056/378;background:#111214}
.launch .post-hero picture{position:absolute;inset:0;display:block}
.launch .post-hero img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.launch .hero-start img{object-position:95% 50%}
.launch .hero-build img{object-position:55% 50%}
.launch .post-hero::after{content:"";position:absolute;z-index:1;left:0;right:0;top:0;height:120px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(10,11,13,.42) 0,rgba(10,11,13,.3) 30%,rgba(10,11,13,.14) 62%,rgba(10,11,13,.04) 85%,rgba(10,11,13,0) 100%)}
@media (max-width:600px){.launch .post-hero::after{height:90px}}
/* pt98: Start/Build section headers are real <h2>s styled exactly like the article's bold section headers (p.hd: 30px/26px,
   700, body line-height, same paragraph spacing). (h2 link styles kept harmlessly from the old /launch/ page.) */
.post-body h2.hd{font-size:30px;font-weight:700;line-height:1.6;letter-spacing:normal;color:var(--ink)}
.post-body *+h2.hd{margin-top:1.15em}.post-body h2.hd+p{margin-top:1.15em}
.post-body h2.hd a{color:inherit;text-decoration:none;transition:color .15s ease;-webkit-tap-highlight-color:transparent}
@media (hover:hover){.post-body h2.hd a:hover{color:#fff}}
.post-body h2.hd a:focus-visible{outline:2px solid #ededed;outline-offset:4px;border-radius:4px}
@media (max-width:600px){.post-body h2.hd{font-size:26px}}
/* pt105: Start is a six-week program: small label under the h1, above the lede (same column; muted near-white, letter-spaced caps). */
.post .eyebrow{margin-top:16px;font-size:14px;font-weight:700;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:rgba(237,237,237,.62)}
.post .eyebrow+.dek{margin-top:10px}
@media (max-width:600px){.post .eyebrow{margin-top:12px;font-size:12.5px;letter-spacing:.14em}.post .eyebrow+.dek{margin-top:8px}}
/* pt105: "Apply" button in the menu bar, left of the menu button (Start + Build only). Solid near-white pill (no outline, so
   no hard edge against the banner), vertically centred on the menu button. Own permanent compositor layer like the logo and
   menu button (pt97 anti-flicker). Hidden without JS and while the menu overlay is open. */
/* pt107: centred horizontally in the menu bar (left/right 0 + auto margins, no transform), same vertical centre as the logo and menu button */
.apply-btn{width:max-content;height:36px;flex:none;padding:0 19px;border:0;border-radius:999px;
  background:#ededed;color:#111214;font:700 15px/1 var(--ff);letter-spacing:.01em;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.22);
  -webkit-tap-highlight-color:transparent;will-change:opacity,transform;transition:opacity .3s ease,background-color .2s ease,visibility 0s}
html:not(.js) .apply-btn{display:none}
html.menu-open .apply-btn{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility 0s .25s}
@media (hover:hover){.apply-btn:hover{background:#fff}}
.apply-btn:focus-visible{outline:2px solid #ededed;outline-offset:3px}
@media (max-width:600px){.apply-btn{height:34px;padding:0 16px;font-size:14.5px}}
/* pt105: application popup = the Events popup (.evm) with a title and form only */
.apm h2{margin-top:2px}
.apm .evm-form{margin-top:22px;padding-top:0;border-top:0}
.apm .evm-f:first-child{margin-top:0}
.apm-err{min-height:0;font-size:13.5px;line-height:1.4;color:#ff7a7f}
.apm-err:not(:empty){margin-top:6px}
.apm-prog{margin:14px 0 0;padding:0;border:0;min-width:0}
.apm-prog legend{display:block;padding:0;font-size:13.5px;font-weight:600;color:var(--muted);margin-bottom:6px}
.apm-prog .evm-role{margin:0}
.apm-done{margin-top:22px;padding-top:0;border-top:0}
/* pt108/pt109: /build/ expertise grid, directly under the lede. Same column as the copy (max 1400px, left-aligned, inside the
   article gutter). Compact soft tiles (pt109, Ryan: "a lot smaller"): faint lighter fill, small radius, separation by fill +
   gap only (no lines, per Ryan). 5 columns desktop (15 = 3 rows), 4 tablet, 2 mobile. Tiny mono index; hover brightens/lifts. */
.post .xp{max-width:1400px;margin:clamp(36px,4.4rem,52px) auto 0 0}
.post .xp .xp-eb{margin:0 0 12px}
.xp-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.xp-item{display:flex;min-width:0}
.xp-tile{position:relative;overflow:hidden;display:flex;align-items:baseline;gap:10px;box-sizing:border-box;width:100%;margin:0;
  padding:11px 14px 12px;border:0;border-radius:8px;background:rgba(255,255,255,.04);color:inherit;font:inherit;text-align:left;
  cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;
  transition:background-color .25s ease,transform .25s ease,box-shadow .2s ease}
.xp-tile::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(120% 120% at 0% 0%,rgba(255,255,255,.07) 0,rgba(255,255,255,0) 60%)}
.xp-n{position:relative;flex:none;font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:10.5px;line-height:1;letter-spacing:.06em;color:rgba(237,237,237,.42)}
.xp-t{position:relative;font-family:var(--ff);font-size:15px;font-weight:700;line-height:1.3;letter-spacing:-.003em;color:var(--ink)}
@media (hover:hover){
  .xp-tile:hover{background:rgba(255,255,255,.075);transform:translateY(-1px)}
  .xp-tile:hover::before{opacity:1}
  .xp-tile:hover .xp-n{color:rgba(237,237,237,.7)}
}
/* pt110: tiles are buttons; soft focus glow (no hard outline) and an "open" state while its popup shows */
.xp-tile:focus{outline:none}
.xp-tile:focus-visible{background:rgba(255,255,255,.075);box-shadow:0 0 0 3px rgba(237,237,237,.16)}
.xp-tile[aria-expanded="true"]{background:rgba(255,255,255,.085)}
.xp-tile[aria-expanded="true"] .xp-n{color:rgba(237,237,237,.7)}
/* the popup: compact off-black card anchored under (or above) the tile; bottom sheet on phones. No borders, soft shadow. */
.xpp{position:absolute;z-index:60;width:340px;max-width:calc(100vw - 32px);box-sizing:border-box;padding:18px 20px 20px;border-radius:14px;
  background:#1a1b1f;color:var(--ink);font-family:var(--ff);
  box-shadow:0 18px 50px rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.025);
  opacity:0;transform:translateY(-4px) scale(.97);transform-origin:20% 0;transition:opacity .18s ease,transform .18s ease}
.xpp[data-side="above"]{transform-origin:20% 100%;transform:translateY(4px) scale(.97)}
.xpp.in{opacity:1;transform:none}
.xpp:focus{outline:none}
.xpp-x{position:absolute;top:8px;right:8px;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:transparent;color:rgba(237,237,237,.7);
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease,color .2s ease;-webkit-tap-highlight-color:transparent}
.xpp-x svg{width:13px;height:13px}
.xpp-x:hover{background:rgba(255,255,255,.07);color:var(--ink)}
.xpp-x:focus{outline:none}.xpp-x:focus-visible{background:rgba(255,255,255,.09);box-shadow:0 0 0 3px rgba(237,237,237,.16)}
.xpp-n{display:block;font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:11px;line-height:1;letter-spacing:.06em;color:rgba(237,237,237,.45)}
.xpp-t{margin-top:8px;padding-right:28px;font-size:18px;font-weight:700;line-height:1.25;letter-spacing:-.005em}
.xpp-d{margin-top:8px;font-size:15px;line-height:1.5;color:rgba(237,237,237,.8)}
@media (prefers-reduced-motion:reduce){.xpp,.xpp[data-side="above"]{transform:none;transition:opacity .15s ease}}
@media (max-width:600px){
  .xpp{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));top:auto;width:auto;max-width:none;padding:16px 18px 20px;border-radius:14px;
    transform:translateY(10px);transform-origin:50% 100%}
  .xpp[data-side]{transform:translateY(10px)}
  .xpp.in,.xpp[data-side].in{transform:none}
  .xpp-t{font-size:17px}.xpp-d{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.xp-tile{transition:background-color .25s ease}.xp-tile:hover{transform:none}}
@media (max-width:1200px){.xp-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:600px){
  .post .xp{margin-top:28px}
  .post .xp .xp-eb{margin:0 0 10px}
  .xp-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:5px}   /* pt110 (Ryan): every mobile tile the same height (= the tallest, two-line tiles); labels top-aligned */
  .xp-tile{display:block;padding:10px 22px 11px 11px;border-radius:7px}
  .xp-n{position:absolute;top:7px;right:7px;font-size:8.5px}
  .xp-t{display:block;font-size:12.5px;line-height:1.3}
  .xp-item:last-child:nth-child(odd){grid-column:span 2}   /* 15 tiles: the last one fills the row instead of sitting alone */
}
/* pt111: essay audio player restored (same design as before; button has no border and hover just brightens, no ring)
   essay audio player (article only): round play/pause + seek slider + muted times */
.audio{margin-top:28px;display:flex;align-items:center;gap:14px;max-width:100%;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.audio audio{display:none}
.au-btn{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:0;background:#ededed;color:#111;display:grid;place-items:center;cursor:pointer;padding:0;transition:background .2s,color .2s;-webkit-tap-highlight-color:transparent}
.au-btn svg{width:18px;height:18px;fill:currentColor;grid-area:1/1}
.au-btn .i-pause,.audio.playing .au-btn .i-play{display:none}
.audio.playing .au-btn .i-pause{display:block}
@media (hover:hover){.au-btn:hover{background:#fff}}
.au-btn:focus-visible{outline:2px solid #ededed;outline-offset:3px}
.au-time{flex:0 0 auto;font-size:14px;line-height:1;color:#9a9a9a;font-variant-numeric:tabular-nums;min-width:2.6em}
.au-dur{text-align:right}
.au-seek{--p:0%;flex:1 1 auto;min-width:0;width:100%;height:24px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;touch-action:none}
.au-seek::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(to right,#ededed var(--p),#3a3a3a var(--p))}
.au-seek::-moz-range-track{height:3px;border-radius:2px;background:#3a3a3a}
.au-seek::-moz-range-progress{height:3px;border-radius:2px;background:#ededed}
.au-seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;margin-top:-5px;border-radius:50%;background:#fff;border:0}
.au-seek::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#fff;border:0}
.au-seek:focus{outline:none}
.au-seek:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #111,0 0 0 5px #ededed}
.au-seek:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px #111,0 0 0 5px #ededed}
@media (max-width:600px){.audio{margin-top:22px;gap:10px}.au-time{font-size:13px;min-width:2.4em}}
/* pt112: Start banner v2 (Ryan, 2026-10-28: new pencil-sketch image, "a bit taller"). Start only; Build is unchanged.
   The full 2:1 sketch is cropped by object-fit:cover. ~28% taller than before: 1440/340 ratio (340px at 1440, was 265),
   cap 684px (was 533), mobile floor 190px (was 150). Crop centres on the table and keeps the four people in frame.
   The sketch is light (cream paper), so Start gets a stronger, taller top scrim behind the logo / Apply / menu button
   (smooth multi-stop gradient to transparent, no edge). */
/* pt114: Start desktop (>=601px) frame = article banner frame (shared --ah-* vars), sketch cover-cropped */
@media (min-width:601px){
  .launch .post-hero.hero-start{aspect-ratio:auto;height:var(--ah-h)!important;min-height:var(--ah-min)!important;max-height:none}
  .launch .hero-start img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:62% 40%}
}
/* pt116 (Ryan, 2026-10-28): Start mobile (<=600px) frame = article mobile banner (shared --ah-m), sketch cover-cropped (replaces the pt113 5px-bleed full image) */
@media (max-width:600px){
  .launch .post-hero.hero-start{aspect-ratio:auto;height:var(--ah-m)!important;min-height:0!important;max-height:none}
  .launch .hero-start img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:62% 50%}
}
.launch .hero-start::after{height:150px;background:linear-gradient(to bottom,rgba(10,11,13,.62) 0,rgba(10,11,13,.5) 22%,rgba(10,11,13,.34) 45%,rgba(10,11,13,.17) 68%,rgba(10,11,13,.06) 86%,rgba(10,11,13,0) 100%)}
@media (max-width:600px){.launch .hero-start::after{height:110px}}
/* pt115 (Ryan, 2026-10-28): Apply starts inside the bottom of the header image (24px desktop / 16px mobile above its bottom edge)
   and scrolls up with it until it reaches its menu-bar spot, where it sticks. A zero-height sticky dock sits at y=0 (top of the
   flow, where the banner starts); the pill hangs at banner height - pad - pill height inside it. Sticky top = menu-bar top - that
   offset, so the hand-off is exact with no jump. --hh = banner height (apply.js measures it on load/resize; CSS fallback = the
   banner formula). Scrolling is pure CSS sticky (compositor), so no scroll-linked JS. */
/* pt118 (Ryan, 2026-10-28: "increase the side padding for desktop for menu and copy"). Desktop only (>=601px); phones untouched.
   One gutter for the menu bar and the copy: --gut 3.3rem (33px @1440, 17.6px @768) -> clamp(33px,4vw,72px) (57.6px @1440,
   51.2px @1280, 33px @768/601). Logo image edge (brand box + 5px inset) and the hamburger's visible right edge (pill box + 9px
   inset) sit exactly on the gutter, like the copy, footer, home tagline and event-card text. Banners stay full-bleed. */
@media (min-width:601px){
  :root{--gut:clamp(33px,4vw,72px)}
  .brand{left:calc(var(--gut) - 5px)}
  .pill{right:calc(var(--gut) - 9px)}
  .site-foot{padding-left:var(--gut);padding-right:var(--gut)}
  .hero .content{padding-left:var(--gut)}
  .ev-card{padding-left:var(--gut);padding-right:var(--gut)}
}
/* pt120: body-copy bullet list (Start v5), styled as the paragraphs */
.post-body ul.list{margin:1.15em 0 0;padding-left:1.3em;list-style:disc;font-size:20px;line-height:1.6;color:var(--ink)}
.post-body ul.list li+li{margin-top:.5em}
.post-body ul.list li::marker{color:var(--ink)}
.post-body ul.list+p{margin-top:1.15em}
@media (max-width:600px){.post-body ul.list{font-size:18px}}
/* pt121: Start timeline (Apply > The Journey > Pitch Day). Soft tones, no hard borders. */
.timeline{list-style:none;margin:clamp(32px,4rem,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;max-width:1400px}
.tl-step{position:relative;padding:26px 26px 28px;border-radius:14px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.tl-n{display:block;font-family:var(--ff);font-size:14px;font-weight:700;letter-spacing:.12em;color:var(--muted)}
.tl-t{margin:14px 0 0;font-family:var(--ff);font-size:24px;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.tl-d{margin:10px 0 0;font-size:16px;line-height:1.5;color:var(--ink);opacity:.72}
.tl-step+.tl-step::before{content:"";position:absolute;left:-34px;top:50%;width:28px;height:1px;background:rgba(237,237,237,.22)}
.tl-step+.tl-step::after{content:"";position:absolute;left:-11px;top:50%;width:6px;height:6px;border-top:1px solid rgba(237,237,237,.32);border-right:1px solid rgba(237,237,237,.32);transform:translateY(-3.5px) rotate(45deg)}
@media (max-width:600px){
  .timeline{grid-template-columns:1fr;gap:34px;margin-top:28px}
  .tl-step{padding:20px 20px 22px}
  .tl-t{font-size:21px;margin-top:10px}
  .tl-step+.tl-step::before{left:50%;top:-28px;width:1px;height:22px}
  .tl-step+.tl-step::after{left:50%;top:-11px;transform:translateX(-3.5px) rotate(135deg)}
}
/* pt124: timeline connectors are inline SVGs (replaces the pt121 CSS line + chevron) */
.tl-step+.tl-step::before,.tl-step+.tl-step::after{content:none}
.tl-ar{position:absolute;left:-32px;top:50%;width:24px;height:12px;margin-top:-6px;color:rgba(237,237,237,.34);overflow:visible;pointer-events:none}
@media (max-width:600px){.tl-ar{left:50%;top:-17px;margin:-6px 0 0 -12px;transform:rotate(90deg)}}
/* pt126: timeline tiles are buttons (popup via /assets/tl.js). The tile look moves from li to the button, unchanged. */
.tl-step{padding:0;background:none;box-shadow:none;border-radius:0;display:flex}
.tl-tile{appearance:none;-webkit-appearance:none;display:block;width:100%;margin:0;text-align:left;font:inherit;color:inherit;border:0;padding:26px 26px 28px;border-radius:14px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);cursor:default;-webkit-tap-highlight-color:transparent;transition:background-color .25s ease}
.tl-tile .tl-t{display:block}
.tl-tile .tl-d{display:block}
html.js .tl-tile{cursor:pointer}
html.js .tl-tile:hover,html.js .tl-tile[aria-expanded="true"]{background:rgba(255,255,255,.06)}
.tl-tile:focus{outline:none}
.tl-tile:focus-visible{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 0 0 3px rgba(237,237,237,.16)}
html.js .tl-tile:hover .tl-n,html.js .tl-tile[aria-expanded="true"] .tl-n{color:rgba(237,237,237,.8)}
@media (max-width:600px){.tl-tile{padding:20px 20px 22px}}
.tl-tile{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}
/* pt127: timeline/xp popup above the fixed brand, hamburger and sticky Apply pill (z 90); opening those closes the popup */
#tl-pop.xpp{z-index:95}
/* pt131: Start header v3 crop focus (desktop: whole group; mobile: notebook student + soldering builder) */
@media (min-width:601px){.launch .hero-start img{object-position:50% 55%}}
@media (max-width:600px){.launch .hero-start img{object-position:50% 50%}}
/* pt135: /articles/ index, modelled on foundersfund.com/anatomy-of-next (hero tile; no subheader) */
.arts{--evtop:max(68px,calc(2.4rem + 44px));padding:calc(var(--evtop) + 32px) 0 clamp(64px,8rem,120px);overflow-x:clip}
.arts-h1{margin:0 0 clamp(28px,3.6rem,48px);padding:0 var(--gut);font-family:var(--ff);font-weight:900;letter-spacing:-.03em;font-size:5.7rem;line-height:1.05;color:#ededed}
.art-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
.art-tile{position:relative;overflow:hidden;aspect-ratio:1/1;background:#1b1c1f}
.art-tile.art-hero{grid-column:1/-1;aspect-ratio:2/1;max-height:720px}
.art-tile a{position:absolute;inset:0;display:block;color:#fff;text-decoration:none}
.art-tile picture{position:absolute;inset:0;display:block}
.art-tile img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:transform .8s var(--ease-out,ease)}
.art-tile a::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(17,18,20,.72) 0%,rgba(17,18,20,.28) 32%,rgba(17,18,20,0) 58%);pointer-events:none}
.art-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 var(--gut) clamp(28px,3.8rem,56px)}
.art-title{display:block;max-width:46rem;font-family:var(--ff);font-weight:600;font-size:4.75rem;line-height:1;letter-spacing:-.01em;color:#fff}
.art-tile a:hover img{transform:scale(1.03)}
.art-tile a:focus-visible{outline:2px solid #fff;outline-offset:-4px}
@media (max-width:600px){
  .arts{--evtop:57.5px;padding-top:calc(var(--evtop) + 20px)}
  .arts-h1{font-size:3.46rem;margin-bottom:24px}
  .art-grid{grid-template-columns:1fr}
  .art-tile,.art-tile.art-hero{aspect-ratio:auto;height:min(120vw,620px)}
  .art-tile.art-hero img{object-position:22% 50%}
  .art-cap{padding-bottom:28px}
  .art-title{font-size:3.2rem;max-width:none}
}
/* pt136: featured article bleeds to the top and sides; header sits over it */
.arts{padding-top:0}
.art-tile.art-hero{max-height:none;aspect-ratio:auto;height:max(50vw,min(100vh,560px));max-height:max(720px,min(88vh,900px))}
.art-hero a::before{content:"";position:absolute;left:0;right:0;top:0;height:clamp(120px,16vh,180px);z-index:1;background:linear-gradient(to bottom,rgba(17,18,20,.42) 0%,rgba(17,18,20,.16) 55%,rgba(17,18,20,0) 100%);pointer-events:none}
.art-hero + .art-tile{margin-top:0}
@media (max-width:600px){.arts{padding-top:0}.art-tile.art-hero{height:min(150vw,680px);max-height:none}}
/* pt137: template article tiles (placeholders; no link, no artwork) */
.art-soon .art-ph{position:absolute;inset:0;display:block;background:#1b1c1f;color:#ededed;cursor:default}
.art-soon:nth-child(odd) .art-ph{background:#202125}
.art-soon .art-title{color:#ededed;opacity:.82}
@media (max-width:600px){.art-soon,.art-tile.art-soon{height:auto;aspect-ratio:1/1}}
/* pt138: /articles/ bottom filter pill (All / Articles / Podcast) */
.art-filter{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:70;display:flex;gap:2px;padding:4px;border-radius:999px;background:rgba(17,18,20,.66);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 0 0 1px rgba(237,237,237,.1),0 8px 28px rgba(0,0,0,.35)}
.art-filter button{appearance:none;border:0;margin:0;cursor:pointer;border-radius:999px;padding:9px 18px;background:transparent;color:rgba(237,237,237,.72);font-family:var(--ff);font-weight:600;font-size:15px;line-height:1.2;letter-spacing:.005em;transition:background .2s ease,color .2s ease}
.art-filter button:hover{color:#fff}
.art-filter button[aria-checked="true"]{background:#ededed;color:#111214}
.art-filter button:focus-visible{outline:2px solid #ededed;outline-offset:2px}
.articles-page .site-foot{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
.art-tile[hidden]{display:none}
.arts[data-f="podcast"]{padding-top:calc(max(68px,calc(2.4rem + 44px)) + 32px)}
@media (max-width:600px){.arts[data-f="podcast"]{padding-top:calc(57.5px + 20px)}.art-filter button{padding:9px 16px;font-size:14px}}
/* pt140: featured article ~25% shorter (Ryan: "make the vertical height on the top article shorter") */
.art-tile.art-hero{height:max(37.5vw,min(75vh,420px));max-height:none}
.art-tile.art-hero img{object-position:50% 62%}
@media (max-width:600px){.art-tile.art-hero{height:min(113vw,500px)}.art-tile.art-hero img{object-position:22% 55%}}

/* pt144 (Ryan: 'on the against the given page, put "Against The Given" in the top center of the menu bar'): decorative,
   fixed with the logo/menu toggle, centered on their row; z 79 (pt145): above the scroll fade body.article::before (z 78), under the open menu overlay (z 80). */
.atg-label{position:fixed;z-index:79;top:24px;left:50%;transform:translateX(-50%);height:44px;line-height:44px;white-space:nowrap;pointer-events:none;
  font-family:var(--ff);font-weight:800;letter-spacing:-.01em;font-size:20px;color:#ededed;text-shadow:0 1px 3px rgba(0,0,0,.35)}
@media (max-width:600px){.atg-label{top:13.5px;font-size:17px}}

/* pt146 (Ryan: "make the hamburger menu 2 bars instead of 3"): same 4.5px bars, width, colour and 44px button. The two bars
   sit centred on the old 3-bar icon's middle (y=22): tops 12.75px / 22.75px (10px pitch, 5.5px gap). Open: both rotate
   through the centre into an X (translate ±5px, ±45deg). */
.pill i:nth-child(1){top:12.75px}
.pill i:nth-child(2){top:22.75px}
.pill.x i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.pill.x i:nth-child(2){opacity:1;transform:translateY(-5px) rotate(-45deg)}

/* pt151b (Ryan: "Make the mobile dropdown work so the longest link fits on one line"): phone menu links 9.4vw (was 4.04rem
   = 10.77vw), so "Against the Given" stays on one line down to 320px; all three links share the size. */
@media (max-width:600px){.overlay li a{font-size:9.4vw;white-space:nowrap}}

/* pt153 (Ryan: "change the menu back to the pill shaped switcher, only include start and declaration in it. remove the top
   left logo and write SOLUTION SANDBOX in it" / "for both mobile and desktop"). Header at every width: text wordmark top
   left, pill nav top right styled exactly as the /against-the-given/ filter pill (as at 9cfc16a). No hamburger/menu. */
.brand.wordmark{width:auto;height:44px;border-radius:0;justify-content:flex-start;left:var(--gut);top:24px;padding:0;
  font-family:var(--ff);font-weight:800;font-size:18px;letter-spacing:.08em;line-height:1;color:#ededed;text-decoration:none;
  white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.brand.wordmark:focus-visible{outline:2px solid #ededed;outline-offset:4px;border-radius:2px}
.pnav{position:fixed;z-index:90;top:24px;right:var(--gut);display:flex;gap:2px;padding:4px;border-radius:999px;
  background:rgba(17,18,20,.66);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 0 0 1px rgba(237,237,237,.1),0 8px 28px rgba(0,0,0,.35);
  opacity:0;visibility:hidden;transition:opacity .6s var(--ease-out),visibility 0s linear .6s}
.pnav.on{opacity:1;visibility:visible;transition:opacity .6s var(--ease-out)}
.pnav a{display:block;border-radius:999px;padding:9px 18px;color:rgba(237,237,237,.72);font-family:var(--ff);font-weight:600;
  font-size:15px;line-height:1.2;letter-spacing:.005em;text-decoration:none;white-space:nowrap;transition:background .2s ease,color .2s ease}
.pnav a[aria-current="page"]{background:#ededed;color:#111214}
.pnav a:focus-visible{outline:2px solid #ededed;outline-offset:2px}
@media (hover:hover){.pnav a:hover{color:#fff}.pnav a[aria-current="page"]:hover{color:#111214}}
@media (max-width:600px){
  .brand.wordmark{left:16px;top:13.5px;font-size:14px;letter-spacing:.06em}
  .pnav{top:15.5px;right:16px}
  .pnav a{padding:10px 14px;font-size:14px}
}
@media (max-width:374px){
  .brand.wordmark{font-size:12px;letter-spacing:.04em}
  .pnav a{padding:10px 11px;font-size:13px}
}
/* the ATG page's centered label can't share the phone/tablet header row with the wordmark and pill: it sits just below it */
@media (max-width:899px){.atg-label{top:62px}}
@media (max-width:340px){.brand.wordmark{font-size:11.5px;letter-spacing:.03em}.pnav a{padding:10px 9px}}

/* pt154 (Ryan: "on the start page, put the apply button next to start and dont have it float at the top."): Apply is an
   ordinary in-flow button beside the Start h1; no fixed/sticky dock. */
.title-row{display:flex;flex-wrap:wrap;align-items:center;column-gap:20px;row-gap:12px}
.title-row h1{margin-bottom:0}

/* pt156 (Ryan: "stack solution sandbox in the menu bar"): SOLUTION over SANDBOX, left-aligned, at every width */
.brand.wordmark{flex-direction:column;align-items:flex-start;justify-content:center;font-size:20px;line-height:1}
.brand.wordmark span{display:block}
@media (max-width:600px){.brand.wordmark{font-size:16px}}
@media (max-width:374px){.brand.wordmark{font-size:15px}}
@media (max-width:340px){.brand.wordmark{font-size:14px}}

/* pt157: pill slider — one light thumb behind the segments (pillslide.js); no-JS keeps the plain aria-current highlight */
.pnav{touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.pnav a{-webkit-user-drag:none;position:relative;z-index:1}
.pnav .pthumb{position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:0;border-radius:999px;background:#ededed;opacity:0;pointer-events:none}
.pnav:not(.live) .pthumb{visibility:hidden}
.pnav.live a[aria-current="page"]{background:transparent;color:rgba(237,237,237,.72)}
.pnav.live a.over,.pnav.live a.over:hover{color:#111214}
.pnav.slide a{transition:color .15s ease}
.pnav.dragging,.pnav.dragging a{cursor:grabbing}
@media (prefers-reduced-motion:reduce){.pnav.slide a{transition:none}}
/* pt158: click-slide cross-fades the segment text with the 250ms thumb slide */
.pnav.sliding a{transition:color .14s ease}