:root{--navy:#183057;--deep:#0f2140;--ink:#16263e;--slate:#3e6895;--sky:#b6daf6;--signal:#f4792b; --gold:#c9a962;--wash:#eaf1f9;--line:#d7e3f0; --face:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif} *{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0;font-family:var(--face);font-size:17px;color:var(--ink);background:#fff;line-height:1.65} ::selection{background:var(--navy);color:#fff} a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:2px} a{color:var(--slate);text-decoration-thickness:2px;text-decoration-color:var(--gold);text-underline-offset:3px} img{max-width:100%;display:block} /* ---- nav: permanent bar, on every page (Phil 2026-08-20) ---- */ nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between; gap:16px;flex-wrap:wrap;background:linear-gradient(180deg,rgba(10,22,44,.97),rgba(10,22,44,.9)); padding:14px max(32px,calc((100% - 1200px)/2 + 32px));backdrop-filter:blur(8px)} .logo{font-weight:900;font-size:19px;letter-spacing:.02em;color:#fff;text-decoration:none} .logo span{font-weight:400;color:var(--sky)} .navlinks{display:flex;gap:30px;align-items:center;flex-wrap:wrap} .navlinks a{color:#fff;text-decoration:none;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase} .navlinks a:hover{color:var(--sky)} .navlinks a.lang{border:1px solid rgba(255,255,255,.55);border-radius:2px;padding:5px 12px} .navlinks a.lang:hover{border-color:#fff;color:#fff} .navlinks a.nav-cta{background:var(--signal);color:var(--deep);padding:10px 18px;border-radius:2px} .navlinks a.nav-cta:hover{background:#ff8d45;color:var(--deep)} .navlinks a.here{color:#fff;border-bottom:2px solid var(--gold);padding-bottom:3px} @media(max-width:480px){nav{padding:22px 24px;gap:10px} .logo{font-size:16px} .navlinks{gap:16px} .navlinks a{font-size:11px;letter-spacing:.1em} .navlinks a.lang{padding:4px 9px}} /* ---- photographic hero ---- */ header.photo{position:relative;background:var(--deep);overflow:hidden;display:flex;flex-direction:column; min-height:780px} header.photo nav{flex:0 0 auto} @media(max-width:800px){header.photo{min-height:0}} header.photo::before{content:"";position:absolute;top:0;bottom:0;right:0;width:60%;background-image:var(--hero); background-size:cover;background-position:var(--hero-pos,center 20%);background-repeat:no-repeat; -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 46%);mask-image:linear-gradient(90deg,transparent 0%,#000 46%)} header.photo::after{content:"";position:absolute;top:0;bottom:0;right:0;width:60%; background:linear-gradient(0deg,rgba(10,22,44,.5) 0%,rgba(10,22,44,.2) 50%)} .hero{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:140px 32px 72px;width:100%;flex:1; display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start} .credstrip{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.24)} .credstrip .wrap{padding:22px 32px 26px} .credstrip .logos{margin-top:0;padding:0;border-top:0;justify-content:center;text-align:center} @media(max-width:800px){.hero{padding:130px 24px 60px;min-height:0} header.photo::before{width:100%;-webkit-mask-image:none;mask-image:none;opacity:.32} header.photo::after{width:100%;background:linear-gradient(0deg,rgba(10,22,44,.5),rgba(10,22,44,.3))}} h1{color:#fff;font-weight:900;text-transform:uppercase;letter-spacing:-.005em;line-height:1.04; font-size:clamp(30px,4vw,52px);margin:0 0 22px;max-width:24ch;text-wrap:balance} .hero p{color:#e6eefb;max-width:56ch;font-size:18px;margin:0 0 18px} .hero p.strong{color:#fff;font-weight:600;max-width:58ch} .hero .badges{display:flex;gap:10px 26px;flex-wrap:wrap;list-style:none;padding:0;margin:4px 0 26px} .hero .badges li{color:var(--sky);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase; display:inline-flex;align-items:center;gap:10px} .hero .badges li::before{content:"";width:6px;height:6px;background:var(--gold)} .cta{display:inline-block;background:var(--signal);color:var(--deep);text-decoration:none;font-weight:900; font-size:14px;letter-spacing:.12em;text-transform:uppercase;padding:19px 38px;border-radius:2px; transition:background .15s ease,transform .15s ease} .cta:hover{background:#ff8d45;transform:translateY(-2px)} .cta-note{display:block;margin-top:14px;font-size:14px;color:var(--slate);max-width:52ch} header.photo .cta-note,.cta-band .cta-note,.below .cta-note{color:var(--sky)} .hero>p:last-of-type a{color:#fff!important;font-weight:800;text-decoration:none;border-bottom:2px solid var(--gold)} .hero>p:last-of-type a:hover{color:var(--sky)!important} .logos{display:flex;gap:14px 34px;align-items:baseline;flex-wrap:wrap;align-self:stretch; font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sky)} .logos b{color:#fff;font-size:17px;letter-spacing:.1em;font-weight:800} /* one authored moment: the hero settles into place on load */ @media (prefers-reduced-motion:no-preference){ .hero>*{opacity:0;transform:translateY(26px);animation:rise .9s cubic-bezier(.16,1,.3,1) forwards} .hero>*:nth-child(2){animation-delay:.08s}.hero>*:nth-child(3){animation-delay:.16s} .hero>*:nth-child(4){animation-delay:.22s}.hero>*:nth-child(5){animation-delay:.28s} .hero>*:nth-child(6){animation-delay:.34s}.hero>*:nth-child(7){animation-delay:.4s} .hero>*:nth-child(8){animation-delay:.46s} @keyframes rise{to{opacity:1;transform:none}}} /* ---- sections ---- */ section{padding:clamp(76px,9vw,116px) 32px} @media(max-width:800px){section{padding:64px 24px}} .wrap{max-width:1200px;margin:0 auto} .narrow{max-width:780px} h2{color:var(--navy);font-weight:900;text-transform:uppercase;letter-spacing:0;line-height:1.06; font-size:clamp(24px,3vw,38px);margin:0 0 24px;text-wrap:balance} h3{color:var(--navy);font-weight:800;letter-spacing:.01em} p{margin:0 0 16px} .hit{font-weight:800;color:var(--navy)} .split{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center} @media(max-width:860px){.split{grid-template-columns:1fr;gap:40px}} .prose{max-width:62ch} .figure{background:#fff} .figure img,.figure svg{width:100%;height:auto} /* standardized side-photo band: full-bleed image on the right, masked into the section ground — the same language as the newsletter and founder bands */ .photo-split{position:relative;overflow:hidden;background:#fff} .photo-split::after{content:"";position:absolute;top:0;bottom:0;right:0;width:46%; background-image:linear-gradient(rgba(15,33,64,.18),rgba(15,33,64,.18)),var(--img); background-size:cover;background-position:center 25%; -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 42%);mask-image:linear-gradient(90deg,transparent 0%,#000 42%)} .photo-split .split{display:block;position:relative;z-index:2} .photo-split .figure{display:none} .photo-split .prose{max-width:46%} @media(max-width:900px){.photo-split::after{display:none} .photo-split .figure{display:block;margin-top:26px} .photo-split .prose{max-width:62ch}} /* ---- offer doors: photographic cards ---- */ .doors{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px} @media(max-width:900px){.doors{grid-template-columns:1fr}} .door{background:var(--deep);display:flex;flex-direction:column;border-radius:2px;overflow:hidden; transition:transform .2s ease,box-shadow .2s ease} .door:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(0,0,0,.24)} .dimg{aspect-ratio:16/10;overflow:hidden} .dimg img{width:100%;height:100%;object-fit:cover;object-position:center 18%} .door h3{color:#fff;font-size:23px;text-transform:uppercase;margin:0;padding:26px 28px 0} .door .k{color:var(--gold);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:800; padding:10px 28px 0} .door p{color:#ccdcf1;font-size:15.5px;flex:1;padding:12px 28px 0;margin:0} .door p:last-child{padding-bottom:28px} .door .btn{margin:22px 28px 28px} /* every action is the one orange action (Bo 2026-08-18) */ .btn{align-self:flex-start;text-decoration:none;font-weight:800;font-size:12px;letter-spacing:.1em; text-transform:uppercase;padding:13px 22px;border-radius:2px;display:inline-block;transition:all .15s ease; background:var(--signal);color:var(--deep);white-space:nowrap} .btn:hover{background:#ff8d45} /* pivot: the six steps read as a numbered process, sequence is the content */ .doors:has(.door:nth-child(6)){grid-template-columns:repeat(3,1fr)} @media(max-width:900px){.doors:has(.door:nth-child(6)){grid-template-columns:1fr}} /* ---- photographic interlude ---- */ .interlude{position:relative;padding:160px 32px;background:var(--deep)} @media(max-width:800px){.interlude{padding:100px 24px}} .interlude::before{content:"";position:absolute;inset:0;background-image:var(--img);background-size:cover; background-position:center 15%} .interlude::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,22,44,.9) 0%,rgba(10,22,44,.45) 60%,rgba(10,22,44,.3) 100%)} .interlude .wrap{position:relative;z-index:2} .interlude p{color:#fff;font-weight:900;text-transform:uppercase;font-size:clamp(24px,3vw,38px); line-height:1.06;max-width:20ch;margin:0;text-wrap:balance} .interlude .hit{color:var(--sky)} .interlude .attr{display:inline-flex;align-items:center;gap:12px;margin-top:20px;color:var(--gold); font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:800} .interlude .attr::before{content:"";width:30px;height:2px;background:var(--gold)} /* ---- navy bands ---- */ .below,.descent,.cta-band,.news{background:linear-gradient(180deg,var(--navy),var(--deep));color:#dbe9f8} .below h2,.descent h2,.cta-band h2,.news h2{color:#fff} .below h3,.descent h3{color:#fff} .below .hit{color:#fff} /* testimonials */ .quotes{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:44px} @media(max-width:860px){.quotes{grid-template-columns:1fr}} .quote{border-left:none;padding:34px;background:rgba(255,255,255,.055);border-top:2px solid var(--gold)} .quote p{font-size:21px;font-weight:600;color:#fff;line-height:1.4;margin:0 0 20px} .quote .who{display:flex;align-items:center;gap:14px;color:var(--sky);font-size:14px} .quote .who img{width:52px;height:52px;object-fit:cover;border-radius:2px} .quote>span{color:var(--sky);font-size:14px} /* bio */ .bio{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center} @media(max-width:860px){.bio{grid-template-columns:1fr;gap:36px}} .bio .photo img{width:100%;border-radius:2px} /* home founder band: photo runs full-bleed on the left, like the newsletter band */ .bio-band{position:relative;overflow:hidden} .bio-band::after{content:"";position:absolute;top:0;bottom:0;left:0;width:46%; background-image:linear-gradient(rgba(15,33,64,.3),rgba(15,33,64,.3)),url(/assets/phil-tedx.jpg); background-size:cover;background-position:center 12%; -webkit-mask-image:linear-gradient(270deg,transparent 0%,#000 42%);mask-image:linear-gradient(270deg,transparent 0%,#000 42%)} .bio-band .bio{display:block;position:relative;z-index:2} .bio-band .bio>.photo{display:none} .bio-band .prose{margin-left:50%;max-width:none} @media(max-width:900px){.bio-band::after{display:none} .bio-band .bio>.photo{display:block;margin-bottom:26px} .bio-band .prose{margin-left:0}} .cred{margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.28);color:var(--sky); font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700} section[style*="#fff"] .cred{border-top-color:var(--line);color:var(--slate)} /* newsletter */ .news{position:relative;overflow:hidden} .news::after{content:"";position:absolute;top:0;bottom:0;right:0;width:38%; background-image:linear-gradient(rgba(15,33,64,.6),rgba(15,33,64,.6)),url(/assets/ph-lounge.jpg); background-size:cover;background-position:center 30%; -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%);mask-image:linear-gradient(90deg,transparent 0%,#000 38%); opacity:.9} .news-tag{font-size:13px;letter-spacing:.24em;text-transform:uppercase;font-weight:800;color:var(--gold);margin:0 0 16px} @media(max-width:900px){.news::after{display:none}} .news .wrap{position:relative;z-index:2} .news p{max-width:52ch} .newsrow{display:flex;gap:12px;max-width:520px;margin-top:26px;flex-wrap:wrap} .newsrow input{flex:1;min-width:230px;padding:16px 18px;font-size:16px;font-family:var(--face); border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.08);color:#fff;border-radius:2px;caret-color:var(--gold)} .newsrow input::placeholder{color:#9fb8d8} .newsrow button{background:var(--signal);color:var(--deep);font-family:var(--face);font-weight:900;font-size:13px; letter-spacing:.12em;text-transform:uppercase;border:0;padding:16px 30px;border-radius:2px;cursor:pointer; transition:background .15s ease} .newsrow button:hover{background:#ff8d45} .newsrow button:disabled{opacity:.6;cursor:wait} /* ---- unbreakable specifics ---- */ .descent-intro{max-width:64ch} .stations{list-style:none;margin:44px 0 0;padding:0;position:relative} .stations::before{content:"";position:absolute;left:25px;top:8px;bottom:8px;width:2px; background:linear-gradient(180deg,var(--gold),rgba(201,169,98,.15))} .station{position:relative;display:flex;gap:26px;margin-bottom:18px;align-items:flex-start} .depth{flex:0 0 52px;height:52px;display:flex;align-items:center;justify-content:center;background:var(--deep); border:2px solid var(--gold);color:var(--gold);font-weight:900;font-size:19px;position:relative;z-index:2;border-radius:2px} .scard{background:rgba(255,255,255,.055);padding:22px 26px;flex:1;border-radius:2px} .scard h3{margin:0 0 6px;font-size:19px;text-transform:uppercase} .scard p{margin:0;color:#ccdcf1;font-size:15.5px} .station.final .depth{background:var(--gold);color:var(--deep)} .descent-foot{margin-top:30px;color:var(--sky)} section:has(.outcomes){text-align:center} section:has(.outcomes) h2{margin-left:auto;margin-right:auto} .outcomes{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:44px} @media(max-width:860px){.outcomes{grid-template-columns:1fr}} .outcome{border-top:2px solid var(--gold);padding-top:22px} .outcome h3{margin:0 0 8px;font-size:20px;text-transform:uppercase} .outcome p{margin:0;font-size:15.5px} .cta-band{text-align:center} .cta-band h2{margin-left:auto;margin-right:auto} .cta-band .sub{max-width:62ch;margin-left:auto;margin-right:auto} .cta-band .cta{margin-top:10px} .scar{display:block;margin-top:14px;color:var(--sky);font-size:14px} .close-band{background:linear-gradient(180deg,var(--navy),var(--deep));text-align:center} .close-band h2{color:#fff;margin-left:auto;margin-right:auto} .close-band p{color:#dbe9f8;max-width:56ch;margin:0 auto 22px} /* centered bands: constrained notes center as blocks too */ .close-band .cta-note,.cta-band .cta-note,.cta-band .sub{margin-left:auto;margin-right:auto} /* scroll reveal (fc-reveal adds .rv; visible by default without JS) */ .rv{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)} .rv-in{opacity:1;transform:none} .figframe{margin:26px 0 32px;border-radius:2px;overflow:hidden} .figframe img{width:100%;aspect-ratio:3/2;object-fit:cover} /* stable anchor target: lazy media above must not shift the landing position */ #join{scroll-margin-top:24px} .runs{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:36px 0} @media(max-width:860px){.runs{grid-template-columns:1fr}} .run{border-top:2px solid var(--gold);padding-top:18px} .run-k{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--slate)} .run p{margin:10px 0 0;font-size:15.5px} .gets-h{font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:var(--navy);margin:34px 0 12px} .gets{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-wrap:wrap;gap:10px} .gets li{border:1px solid var(--line);background:var(--wash);color:var(--navy);font-weight:700;font-size:14px; padding:9px 16px;border-radius:2px} .statement{font-size:22px;font-weight:700;color:var(--navy);line-height:1.5} section[style]:has(.headshot){background:var(--wash)!important} section:has(.headshot) .bio{grid-template-columns:.75fr 1.25fr} .headshot img{width:100%;border-radius:2px;aspect-ratio:1/1;object-fit:cover} .stats{display:flex;gap:44px;flex-wrap:wrap;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)} .stat b{display:block;font-size:clamp(30px,3.4vw,44px);font-weight:900;color:var(--navy);line-height:1; text-transform:uppercase;letter-spacing:0} .stat small{color:var(--slate);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700} .proof .pull{border:0;margin:34px 0 8px;padding:22px 0 0;border-top:2px solid var(--gold); font-size:26px;font-weight:800;color:#fff;line-height:36px;font-style:normal;text-transform:uppercase} .pull-attr{color:var(--sky);font-size:14px;margin-bottom:22px} .clips{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:22px} @media(max-width:860px){.clips{grid-template-columns:1fr}} .clip{margin:0} .clip video{width:100%;aspect-ratio:9/16;object-fit:cover;background:#000;border-radius:2px} .clip figcaption{margin-top:10px;color:#fff} .clip figcaption b{display:block;font-size:15px;text-transform:uppercase;letter-spacing:.06em} .clip figcaption small{color:var(--sky);font-size:13px} .calwrap{background:#fff;border:1px solid var(--line);border-radius:2px;margin:26px 0 14px} .calnote{font-size:15px} .calnote a{color:var(--navy);font-weight:800} .faq{margin-top:44px} .faq details{border-bottom:1px solid var(--line)} .faq details:first-child{border-top:1px solid var(--line)} .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px; padding:18px 4px;font-weight:800;color:var(--navy);text-transform:uppercase;font-size:14px;letter-spacing:.04em} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--signal);font-size:22px;font-weight:700;line-height:1;flex:0 0 auto} .faq details[open] summary::after{content:"–"} .faq .faq-a{padding:0 4px 20px;color:var(--ink)} .centered{text-align:center} .centered h2,.centered p{margin-left:auto;margin-right:auto} .panel{border:1px solid var(--line);border-top:2px solid var(--gold);background:#fff;padding:26px 30px; margin:30px 0} .panel h3{margin:0 0 8px;text-transform:uppercase;font-size:17px} .panel p{margin:0} /* ---- footer ---- */ footer{background:var(--deep);color:var(--sky);padding:44px 32px} footer .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center} footer a{color:#fff;text-decoration:none;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase} footer a:hover{color:var(--sky)} footer span{font-size:14px} /* ---- READABLE MODE (Bo 2026-08-20: "what I liked from the screenshot was that it was easier to read") ------------------------------------------------- Opt in per page with . The display grammar stays the same shape; what changes is everything that costs the reader effort: all-caps headings become sentence case (caps defeat word-shape recognition and are the single biggest legibility tax on these pages), display lines get a little more leading, and long-form body copy gets a wider measure floor. Small uppercase labels (nav, kickers, eyebrows) are deliberately KEPT — they are short, they carry the brand, and caps do not hurt at 12-13px. To take this site-wide, drop the `body.readable` guard from these selectors. */ body.readable h1, body.readable h2, body.readable h3, body.readable .claim, body.readable .quote-band p, body.readable blockquote{text-transform:none;letter-spacing:-.012em} body.readable h1{line-height:1.08} body.readable h2{line-height:1.14;max-width:22ch} body.readable .wrap.narrow h2{max-width:26ch} /* .claim and .quote-band sit at ~25px — mid-size, not true display. In caps they were short and 1.2 was fine; in sentence case they wrap longer, so they need real body-ish leading. h1/h2 stay tight on purpose: at 36px/27px that is correct display typography, not an oversight. */ body.readable .claim{line-height:1.34;font-weight:800} body.readable .quote-band p{line-height:1.32} body.readable .lede,body.readable .beat{line-height:1.62} body.readable .disc p,body.readable .room p,body.readable .build p, body.readable .steps p,body.readable .mistakes p,body.readable .runs span{line-height:1.62} /* card headings read as labels, not shouted headlines */ body.readable .disc h3,body.readable .steps h3,body.readable .mistakes h3, body.readable .build h3,body.readable .door h3,body.readable .runs b{letter-spacing:-.005em} /* NOTE: no border-radius on these cards. Rounding them was tried and reverted (2026-08-20): every one carries a 2px accent border-top, and an accent rule that meets a rounded corner reads as a rendering fault. Square edges + the accent is the honest pairing; the reference rounds cards that have no such rule. */ /* the action is the thing people must read fastest: sentence case, a size up, normal tracking. Colour and weight still carry the emphasis. */ body.readable .cta,body.readable .btn{text-transform:none;letter-spacing:0;font-size:15.5px} body.readable .btn{font-size:14px} /* ---- TILES: the reference's photo card (Bo 2026-08-20: "more images everywhere", "way too much stuff being explained"). A picture carries the idea, a 2-4 word label names it, and there is no paragraph underneath. Use these wherever a text card was only restating its own heading. ---- */ .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px} .tiles.four{grid-template-columns:repeat(4,1fr)} .tile{position:relative;overflow:hidden;border-radius:14px;aspect-ratio:3/4;display:block; background:var(--deep);text-decoration:none} .tiles.wide .tile{aspect-ratio:4/3} /* A row that mixes portrait and landscape sources cannot suit both, and no frame choice recovers the loss — measured on the rooms row, 4/3 keeps 75/56/56/73% and 1/1 keeps 56/75/75/55%. Identical in total; the square only changes WHICH images crop. It is used because a 4-up of squares reads tidier, not because it saves pixels. The actual fix, if the crops ever matter, is to shoot or pick four sources of the same orientation. Each tile sets --pos so the subject survives whichever way it is cut. */ .tiles.square .tile{aspect-ratio:1/1} .tile img{width:100%;height:100%;object-fit:cover;display:block;object-position:var(--pos,center); transition:transform .5s cubic-bezier(.16,1,.3,1)} .tile:hover img{transform:scale(1.04)} .tile::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(10,22,44,0) 38%,rgba(10,22,44,.82) 100%)} .tile b{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;color:#fff; font-size:19px;font-weight:800;line-height:1.22;letter-spacing:-.01em} .tile .pill{position:absolute;top:14px;left:14px;z-index:2;background:#fff;color:var(--navy); font-size:12.5px;font-weight:700;padding:6px 13px;border-radius:999px;letter-spacing:0} @media(max-width:900px){.tiles,.tiles.four{grid-template-columns:1fr 1fr}} @media(max-width:560px){.tiles,.tiles.four{grid-template-columns:1fr}.tile{aspect-ratio:16/10}} /* ---- placement (Bo: "it feels very far from everything", "everything is not placed properly"). The 1200px field left short copy stranded in white space. Readable mode pulls the measure in and tightens the vertical rhythm so a heading and its supporting line read as one object. Body copy also steps down: the reference gets its authority from the SIZE GAP between a big heading and small supporting text, not from large body copy. ---- */ body.readable section{padding:52px 24px} body.readable .wrap{max-width:1080px} body.readable .wrap.narrow{max-width:660px} body.readable .lede{font-size:17px;max-width:52ch;margin-bottom:10px} body.readable .beat{font-size:16px;max-width:50ch;margin-bottom:10px} body.readable .disc p,body.readable .build p,body.readable .steps p, body.readable .mistakes p,body.readable .runs span,body.readable .room p{font-size:14.5px} body.readable h2{margin-bottom:14px} body.readable .hero p.strong{font-size:17px;max-width:46ch} /* the interlude quote is 27px display set to a 20ch measure, so it runs to six lines. At the global 1.06 leading that is a wall. Give it room and a wider measure so it reads as a pull-quote, not a paragraph. */ body.readable .interlude p{line-height:1.3;max-width:24ch} body.readable .tile b{line-height:1.3} /* ---- BANDIMG: a photograph BEHIND a section, not beside it (Bo 2026-08-20: "I don't get the placement of the image", "maybe we could add a background image here"). Standalone photo cards read as decoration sitting next to the words; a ground photo puts the words inside the scene. Set the picture with --img and, where the subject sits high or low in the frame, --pos. The scrim is a flat wash plus a bottom-weighted gradient: the flat layer guarantees the contrast floor no matter what the photo does, the gradient keeps the image from looking merely dimmed. ---- */ .bandimg{position:relative;background:var(--deep);color:#dbe9f8;isolation:isolate} .bandimg::before{content:"";position:absolute;inset:0;z-index:-2; background-image:var(--img);background-size:cover;background-position:var(--pos,center)} .bandimg::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(10,22,44,.80) 0%,rgba(10,22,44,.70) 45%,rgba(10,22,44,.88) 100%)} .bandimg h2,.bandimg h3,.bandimg .claim{color:#fff} .bandimg .lede,.bandimg .beat,.bandimg p{color:#e3edf9} .bandimg .cred{border-top-color:rgba(255,255,255,.28);color:var(--sky)} /* centred sections: the heading, its line and any grid all share the axis */ .mid{text-align:center} .mid h2,.mid .lede,.mid .beat,.mid .claim,.mid p{margin-left:auto;margin-right:auto} .mid .disc{border-top:0;padding-top:0} .mid .fitlist{text-align:left;display:inline-block} /* ---- BANDSPLIT: the light counterpart to .bandimg (Bo 2026-08-20: "one dark, one white, one dark, one white", "we can add a photo on a white background as well"). A contained, rounded photo beside the words on a light ground, so the page can breathe between the full-bleed dark bands instead of running four of them together. .flip puts the picture first. ---- */ .bandsplit{background:#fff} .bandsplit.wash{background:var(--wash)} .duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.5vw,62px);align-items:center} .duo .shot{margin:0} /* Nearly every Higgsfield frame is portrait 1200x1600. A 4/3 window threw away more than half the picture, which is what read as "doesn't fit right". The default frame is therefore portrait-leaning; .wide is for the genuinely landscape sources (phil-tedx, phil-room, phil-speaking are 16/9-ish). */ .duo .shot img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:var(--pos,center); border-radius:16px;display:block} .duo .shot.wide img{aspect-ratio:16/10} .bandsplit.flip .duo .shot{order:-1} .bandsplit .duo .words{text-align:left} .bandsplit .duo .words h2,.bandsplit .duo .words p{margin-left:0;margin-right:0} @media(max-width:860px){.duo{grid-template-columns:1fr;gap:26px} .bandsplit.flip .duo .shot{order:0}} /* A full-bleed photograph needs vertical room. Measured 2026-08-20: with only a heading and one line inside, these bands collapsed to ~240px tall against a 905px-wide viewport — a 3.8:1 letterbox. background-size:cover then showed about 20% of a portrait source, which is why they rendered as a giant chin or a forehead. Landscape sources plus a real height bring that to ~71%. ONE height token drives every band so they cannot drift apart: Bo 2026-08-20, "make sure all of the heights of the blocks are the same". `height` rather than `min-height` is what actually equalises them — with min-height a band carrying a grid (the pivot steps) grew 24px taller than its neighbours. The media query releases the fixed height on narrow screens, where stacked content must be allowed to grow. */ :root{--band-h:clamp(360px,34vw,520px)} body.readable .bandimg{padding-top:clamp(64px,7vw,92px);padding-bottom:clamp(64px,7vw,92px); height:var(--band-h);display:flex;align-items:center} body.readable .bandimg > .wrap{width:100%} @media(max-width:900px){body.readable .bandimg{height:auto;min-height:var(--band-h)}} /* ---- PAGE COMPONENTS, moved out of the per-page