/* Joy Victor — portfolio styles
   Edit tokens in :root to restyle the whole site.
   Hero photo lives at assets/joy-headshot.webp (referenced via --photo). */
/* ==========================================================
   JOY VICTOR
   Cream and brown palette. The original layout, type and motion remain intact.
   Structure: portrait-led hero, scroll statement, staggered proof
   cards, build highlights, visual tool stacks and contact band.
   ========================================================== */
:root{
  --cream:#F7F0E4;
  --ink:#3B281F;
  --ghost:#D9C8B6;
  --black:#2A1811;
  --green:#B8794E;
  --green-dk:#6B432E;
  --warn:#955A36;
  --rule:#D8C5B2;
  --blush:#F1E2D2;
  --sage:#D8BEA4;
  --plum:#6B432E;
  --peri:#E7D6C4;
  --cta:#EACDB1;
  --live:#7A5139;
  --photo:url("assets/joy-headshot.webp");
}
html{font-size:10px}
*{box-sizing:border-box}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:1.6rem;
  line-height:1.5;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.menu-open{overflow:hidden}
a{color:inherit}
section,header,footer{scroll-margin-top:6rem}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  body.trailer-on, body.trailer-on a, body.trailer-on button, body.trailer-on summary{cursor:none}
}

/* ---------- type roles ---------- */
.display{
  font-family:"Barlow Condensed","Hanken Grotesk",sans-serif;
  font-weight:500;text-transform:uppercase;
  letter-spacing:-.055em;line-height:.8;margin:0;text-wrap:balance;
}
.label{font-size:1.2rem;letter-spacing:.1em;text-transform:uppercase;line-height:1}
.note{font-style:italic;font-size:1.5rem;line-height:1.35;max-width:24ch;margin:0}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
.wrap{width:min(148rem,100% - 5rem);margin-inline:auto}
@media (max-width:700px){ .wrap{width:min(148rem,100% - 3rem)} }

/* ---------- preloader + green curtain ---------- */
.preloader{position:fixed;inset:0;background:var(--black);z-index:99}
.preloader.gone{display:none}
.curtain{position:fixed;inset:0;z-index:100;pointer-events:none;overflow:hidden;visibility:hidden}
.curtain.on{visibility:visible}
.curtain__fill{
  position:absolute;left:-12%;width:124%;height:150%;top:0;
  background:var(--green);border-radius:50% 50% 0 0 / 20% 20% 0 0;
  transform:translateY(100vh);will-change:transform;
}

/* ---------- labelled mouse trailer ---------- */
#trailer{
  position:fixed;top:0;left:0;width:2.2rem;height:2.2rem;border-radius:50%;
  background:var(--green);z-index:12;pointer-events:none;opacity:0;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .5s,width .28s cubic-bezier(.2,.7,.3,1),height .28s cubic-bezier(.2,.7,.3,1);
  will-change:transform;
}
#trailer span{
  font-size:1rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cream);
  opacity:0;transition:opacity .18s;white-space:nowrap;font-family:"Hanken Grotesk",sans-serif;
}
#trailer.labelled{width:6.4rem;height:6.4rem}
#trailer.labelled span{opacity:1}
body.trailer-contrast #trailer{background:var(--black)}
@media (hover:none),(pointer:coarse){ #trailer{display:none} }

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:6;background:var(--cream);
  border-bottom:1px solid var(--rule);height:6.1rem;
  display:flex;align-items:center;padding-inline:2.5rem;
}
.nav__brand{font-size:1.2rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;margin-right:auto}
.nav__links{display:flex;align-items:center;gap:.9rem;position:absolute;left:50%;transform:translateX(-50%)}
.nav__links a{font-size:1.2rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.nav__links a:hover{color:var(--green-dk)}
.nav__sep{color:var(--ghost);font-size:1.2rem}
.nav__right{margin-left:auto;display:flex;align-items:center;gap:1.6rem}
.nav__status{
  display:flex;align-items:center;gap:.7rem;background:rgba(74,122,94,.12);
  border-radius:99px;padding:.5rem 1.1rem;font-family:"IBM Plex Mono",monospace;
  font-size:1rem;letter-spacing:.08em;text-transform:uppercase;color:var(--live);
}
.nav__status i{width:.7rem;height:.7rem;border-radius:50%;background:var(--live);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.nav__menu{background:none;border:0;padding:0;color:inherit;font-family:inherit;font-size:1.2rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
@media (max-width:1100px){ .nav__links{display:none} }
@media (max-width:560px){ .nav__status{display:none} }

/* ---------- menu ---------- */
.scrim{position:fixed;inset:0;background:rgba(10,10,10,.62);z-index:7;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.scrim.open{opacity:1;visibility:visible}
.menu{
  position:fixed;top:7.5rem;right:2.5rem;z-index:8;width:min(41rem,calc(100% - 5rem));
  background:var(--cream);padding:3.5rem 3rem 3rem;
  opacity:0;visibility:hidden;transform:translateY(-1rem);
  transition:opacity .35s,visibility .35s,transform .35s cubic-bezier(.2,.7,.3,1);
}
.menu.open{opacity:1;visibility:visible;transform:none}
.menu__primary{display:flex;flex-direction:column;gap:.4rem;margin-bottom:2.4rem}
.menu__link{position:relative;display:block;text-decoration:none;font-size:2.8rem;line-height:1.32;letter-spacing:-.02em}
.menu__link:hover{color:var(--green-dk)}
.menu__thumb{
  position:absolute;top:50%;left:calc(100% + 1.6rem);width:6rem;height:4.4rem;
  transform:translateY(-50%) scale(.86);opacity:0;
  transition:.3s cubic-bezier(.2,.7,.3,1);pointer-events:none;border-radius:2px;
}
.menu__link:hover .menu__thumb{opacity:1;transform:translateY(-50%) scale(1)}
.menu__secondary{display:flex;flex-direction:column;gap:.5rem;margin-bottom:2.4rem}
.menu__secondary a{font-size:1.5rem;text-decoration:none}
.menu__secondary a:hover{color:var(--green-dk)}
.menu__touch p{font-size:2.2rem;margin:0 0 .4rem;letter-spacing:-.02em}

/* ---------- splash ---------- */
.splash{height:100svh;background:var(--black);color:var(--cream);display:grid;place-items:center;position:relative}
.splash__name{font-size:clamp(3.6rem,5.4vw,6.4rem);letter-spacing:-.045em;line-height:.94}
.splash__cue{position:absolute;bottom:3rem;left:50%;transform:translateX(-50%);color:var(--ghost);font-size:1.2rem;letter-spacing:.1em;text-transform:uppercase}
.splash__cue i{display:inline-block;width:.8rem;height:.8rem;border-radius:50%;background:var(--green);margin-right:.7rem;animation:cue 1.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(.5rem)}}

/* ---------- portrait-led home hero ---------- */
.hero{display:block;padding:9.5rem 0 3rem;min-height:100svh;height:auto;overflow:hidden}
.hero__grid{min-height:calc(100svh - 12.5rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(34rem,.72fr);grid-template-rows:1fr auto;gap:3rem 6rem;align-items:center}
.hero__copy{padding-left:clamp(0rem,4vw,6rem);position:relative;z-index:1;animation:heroCopyIn 1s .48s both cubic-bezier(.2,.7,.3,1)}
.hero__hello{display:flex;align-items:center;gap:.8rem;margin:0 0 2.4rem;font-family:"IBM Plex Mono",monospace;font-size:1.1rem;letter-spacing:.15em;text-transform:uppercase;color:#A8A8A8}
.hero__hello i{display:block;width:.8rem;height:.8rem;border-radius:50%;background:var(--green)}
.hero__name{font-size:clamp(9rem,16vw,22rem);line-height:.7;letter-spacing:-.065em}
.hero__lead{font-size:clamp(1.7rem,2vw,2.2rem);line-height:1.35;max-width:42ch;margin:4rem 0 0;color:#B8B8B8;letter-spacing:-.02em}
.hero__actions{display:flex;align-items:center;flex-wrap:wrap;gap:1rem;margin-top:3rem}
.hero__action{display:inline-flex;align-items:center;justify-content:center;gap:1.2rem;min-height:4.6rem;padding:1.1rem 1.6rem;border:1px solid rgba(247,240,228,.48);border-radius:99px;font-family:"IBM Plex Mono",monospace;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease}
.hero__action span{font-size:1.3rem;transition:transform .25s ease}
.hero__action:hover{transform:translateY(-.2rem)}
.hero__action--primary{background:var(--cream);border-color:var(--cream);color:var(--black)}
.hero__action--primary:hover{background:var(--green);border-color:var(--green)}
.hero__action--primary:hover span{transform:translateY(.25rem)}
.hero__action--secondary{color:var(--cream)}
.hero__action--secondary:hover{background:var(--cream);border-color:var(--cream);color:var(--black)}
.hero__action--secondary:hover span{transform:translate(.2rem,-.2rem)}
.hero__portrait{height:min(72rem,72vh);align-self:center;background:var(--photo) 50% 26%/cover no-repeat;position:relative;animation:heroPortraitIn 1.15s .4s both cubic-bezier(.7,0,.3,1);will-change:clip-path,transform}
.hero__portrait::after{content:"";position:absolute;inset:0;border:1px solid rgba(245,244,240,.18);pointer-events:none}
.hero__roles{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:1.6rem;flex-wrap:wrap;padding:2.4rem 0 1.4rem;border-top:1px solid rgba(245,244,240,.18);font-family:"IBM Plex Mono",monospace;font-size:1.3rem;letter-spacing:.09em;text-transform:uppercase;color:#C8B7AA;animation:heroRolesIn .8s 1s both ease}
.hero__roles i{width:.5rem;height:.5rem;border-radius:50%;background:var(--green)}
.hero>.splash__cue{display:none}
@keyframes heroCopyIn{from{opacity:0;transform:translateY(3rem)}to{opacity:1;transform:none}}
@keyframes heroPortraitIn{from{clip-path:inset(100% 0 0 0);transform:scale(1.05)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes heroRolesIn{from{opacity:0;transform:translateY(1.2rem)}to{opacity:1;transform:none}}
@media (max-width:900px){
  .hero{padding-top:8rem}
  .hero__grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;gap:3rem;align-items:start}
  .hero__copy{padding:3rem 0 0}
  .hero__name{font-size:clamp(9rem,29vw,17rem)}
  .hero__lead{margin-top:3rem}
  .hero__portrait{height:auto;aspect-ratio:4/5;width:100%;background-position:50% 24%}
  .hero__roles{grid-column:1;justify-content:flex-start}
}

/* ---------- statement (per-character reveal) ---------- */
.statement{padding:8rem 0 2rem}
.statement__cue{display:flex;align-items:center;gap:.7rem;margin-bottom:4rem;font-size:1.2rem;letter-spacing:.1em;text-transform:uppercase}
.statement__cue i{width:.8rem;height:.8rem;border-radius:50%;background:var(--green);animation:cue 1.4s ease-in-out infinite}
.statement h1{font-size:clamp(5.4rem,11.4vw,17rem);color:var(--ink)}

/* ---------- intro ---------- */
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:5rem;padding:8rem 0 0;align-items:start}
.intro p{margin:0 0 2rem;max-width:46ch}
.arrow{display:inline-flex;align-items:center;gap:1rem;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:.2rem}
.arrow em{font-style:normal;color:var(--green-dk);font-size:1.5rem;display:inline-block;transition:transform .3s ease-in-out}
.arrow:hover em{transform:translate(.4rem,-.4rem)}
.frame{position:relative;aspect-ratio:3/2;display:grid;place-items:center;background:repeating-linear-gradient(135deg,#E9E7E1 0 12px,#EFEDE7 12px 24px)}
.frame::after{content:attr(data-caption);font-family:"IBM Plex Mono",monospace;font-size:1rem;letter-spacing:.12em;text-transform:uppercase;color:#9A9791;background:var(--cream);padding:.6rem .9rem}
.frame.tall{aspect-ratio:4/5}
.portrait{width:100%;aspect-ratio:4/5;background:var(--photo) 50% 28%/cover no-repeat}
@media (max-width:900px){ .intro{grid-template-columns:minmax(0,1fr)} .intro .frame{order:-1;aspect-ratio:3/2} }

/* ---------- about narrative ---------- */
.section.about{padding-top:7rem}
.about__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(38rem,1.1fr);gap:7rem;align-items:start}
.about__body{font-size:clamp(1.8rem,2vw,2.2rem);line-height:1.48;letter-spacing:-.025em;max-width:45ch}
.about__body p{margin:0 0 2.4rem}
.about__body .about__lead{font-size:clamp(2.2rem,2.6vw,3rem);line-height:1.32;letter-spacing:-.035em;margin-bottom:4.2rem}
.about__body strong{display:flex;align-items:center;gap:1.3rem;font-family:"Barlow Condensed",sans-serif;font-size:clamp(3.4rem,4.2vw,5.4rem);font-weight:500;line-height:.92;letter-spacing:-.035em;text-transform:uppercase;color:var(--green-dk);margin-bottom:1.6rem}
.about__body strong::before{content:"";width:4rem;height:1px;background:currentColor;flex:none}
.about__visual{position:relative;padding:0 0 9rem 8rem}
.about__portrait{margin:0;position:relative;aspect-ratio:4/5;overflow:hidden}
.about__portrait img{width:100%;height:108%;position:absolute;left:0;top:-4%;object-fit:cover;object-position:50% 42%}
.about__portrait figcaption{position:absolute;right:1.6rem;top:1.6rem;z-index:2;background:rgba(245,244,240,.92);padding:.7rem .9rem;font-family:"IBM Plex Mono",monospace;font-size:.9rem;letter-spacing:.1em;text-transform:uppercase}
.about__aside{background:var(--sage);padding:2.6rem;position:absolute;left:0;bottom:0;width:min(42rem,82%);z-index:2;box-shadow:0 2rem 5rem rgba(10,10,10,.12)}
.about__aside .label{font-family:"IBM Plex Mono",monospace;color:#52645A}
.about__aside p{font-size:clamp(2.2rem,2.6vw,3.2rem);line-height:1.08;letter-spacing:-.045em;margin:3.5rem 0 2.4rem}
@media (max-width:860px){
  .about__grid{grid-template-columns:minmax(0,1fr);gap:3rem}
  .about__visual{padding:0;display:grid}
  .about__aside{position:relative;left:auto;bottom:auto;width:calc(100% - 3rem);margin:-4rem auto 0;padding:1.8rem 2rem}
  .about__aside p{font-size:2rem;line-height:1.18;margin:1.4rem 0 0}
}

/* ---------- credential strip — thedatabloq ---------- */
.creds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-top:10rem}
.cred{padding:2.8rem 3rem;border-left:1px solid var(--rule);text-align:center}
.cred:first-child{border-left:0}
.cred span{display:block;font-family:"IBM Plex Mono",monospace;font-size:1rem;letter-spacing:.2em;text-transform:uppercase;color:#8C8C8C;margin-bottom:1.2rem}
.cred p{margin:0;font-size:1.7rem;letter-spacing:-.01em}
@media (max-width:820px){ .creds{grid-template-columns:minmax(0,1fr)} .cred{border-left:0;border-top:1px solid var(--rule)} .cred:first-child{border-top:0} }

/* ---------- counting metrics — gbolahan ---------- */
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--rule)}
.metric{padding:3rem 2rem 3.2rem;border-left:1px solid var(--rule)}
.metric:first-child{border-left:0;padding-left:0}
.metric b{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:500;font-size:clamp(3.6rem,5.6vw,5.8rem);line-height:.86;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--green-dk)}
.metric b i{font-style:normal;font-size:.44em;color:#8C8C8C}
.metric>span{display:block;margin-top:1.2rem;font-family:"IBM Plex Mono",monospace;font-size:1rem;letter-spacing:.14em;text-transform:uppercase;color:#6E6E6E}
@media (max-width:820px){
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric{border-left:1px solid var(--rule);padding-left:1.6rem}
  .metric:nth-child(odd){border-left:0;padding-left:0}
}

/* ---------- section heads ---------- */
.section{padding:12rem 0}
.head{display:flex;align-items:flex-end;gap:3rem;flex-wrap:wrap;margin-bottom:5rem}
.head h2{font-size:clamp(5rem,13vw,14rem)}
.head--right{justify-content:flex-end}
.head--right .note{order:-1}

/* ---------- numbered accordion — gbolahan ---------- */
.services{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:5rem;align-items:start}
.acc{border-top:1px solid var(--rule)}
.acc__item{border-bottom:1px solid var(--rule)}
.acc__btn{
  width:100%;background:none;border:0;padding:2.4rem 0;color:inherit;cursor:pointer;
  display:flex;align-items:center;gap:1.6rem;text-align:left;font-family:inherit;
}
.acc__n{font-family:"IBM Plex Mono",monospace;font-size:1.1rem;color:var(--green-dk);flex:none}
.acc__t{
  flex:1;font-family:"Barlow Condensed",sans-serif;font-weight:500;text-transform:uppercase;
  letter-spacing:-.03em;font-size:clamp(2.2rem,3.2vw,3.2rem);line-height:1;transition:color .25s;
}
.acc__btn:hover .acc__t{color:var(--green-dk)}
.acc__chev{flex:none;width:1.4rem;height:1.4rem;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg) translate(-.2rem,-.2rem);transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.acc__item.open .acc__chev{transform:rotate(-135deg) translate(-.3rem,-.3rem)}
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.7,.3,1)}
.acc__item.open .acc__panel{grid-template-rows:1fr}
.acc__inner{overflow:hidden}
.acc__inner ul{margin:0;padding:0 0 2.6rem 3.2rem;list-style:none;display:flex;flex-direction:column;gap:.9rem}
.acc__inner li{position:relative;font-size:1.6rem;color:#5A5A5A}
.acc__inner li::before{content:"";position:absolute;left:-1.8rem;top:.85em;width:.7rem;height:1px;background:var(--green-dk)}
@media (max-width:900px){ .services{grid-template-columns:minmax(0,1fr)} .services .frame{order:-1} }

/* ---------- project grid — gbolahan ---------- */
.projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4rem 3.5rem}
.project{text-decoration:none;display:block}
.project__thumb{aspect-ratio:16/10;background:repeating-linear-gradient(135deg,#E9E7E1 0 12px,#EFEDE7 12px 24px);display:grid;place-items:center;overflow:hidden;margin-bottom:1.8rem}
.project__thumb::after{content:attr(data-caption);font-family:"IBM Plex Mono",monospace;font-size:1rem;letter-spacing:.12em;text-transform:uppercase;color:#9A9791;background:var(--cream);padding:.6rem .9rem}
.project__cat{font-family:"IBM Plex Mono",monospace;font-size:1rem;letter-spacing:.14em;text-transform:uppercase;color:#8C8C8C}
.project__t{font-family:"Barlow Condensed",sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:-.03em;font-size:2.6rem;line-height:1;margin:1rem 0 .9rem;transition:color .25s}
.project:hover .project__t{color:var(--green-dk)}
.project p{margin:0;font-size:1.55rem;color:#5A5A5A;max-width:44ch}
@media (max-width:820px){ .projects{grid-template-columns:minmax(0,1fr)} }

/* ---------- systems ledger ---------- */
.ledger-wrap{overflow-x:auto}
table.ledger{width:100%;min-width:76rem;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ledger th{text-align:left;font-family:"IBM Plex Mono",monospace;font-size:1rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#6E6E6E;padding:0 1.6rem 1rem 0;border-bottom:1px solid var(--ink)}
.ledger td{padding:1.6rem 1.6rem 1.6rem 0;border-bottom:1px solid var(--rule);vertical-align:baseline}
.ledger tbody tr{transition:background .2s}
.ledger tbody tr:hover{background:#EDEBE5}
.ledger .sys{font-family:"Barlow Condensed",sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:-.03em;font-size:2.2rem}
.ledger .mono{font-size:1.3rem}
.ledger .dim{color:#6E6E6E}
.state{display:inline-flex;align-items:center;gap:.7rem;font-family:"IBM Plex Mono",monospace;font-size:1.1rem;letter-spacing:.08em;text-transform:uppercase}
.state i{width:.9rem;height:.9rem;border-radius:50%;flex:none}
.state.ok{color:var(--live)} .state.ok i{background:var(--live)}
.state.warn{color:var(--warn)} .state.warn i{background:var(--warn)}

/* ---------- testimonial cards ---------- */
.flag{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:1rem;letter-spacing:.12em;text-transform:uppercase;color:var(--warn);border:1px dashed var(--warn);padding:.5rem .8rem;margin-bottom:4rem}
.cards{display:flex;flex-direction:column;gap:4rem}
.card{border-radius:1.4rem;padding:2.4rem 2.8rem 3rem;width:min(100%,74%);will-change:transform}
.card:nth-child(even){align-self:flex-end}
.card--blush{background:var(--blush)}
.card--sage{background:var(--sage)}
.card--plum{background:var(--plum);color:var(--cream)}
.card--peri{background:var(--peri)}
.card--cta{background:var(--cta)}
.card--ink{background:var(--black);color:var(--cream)}
.card__head{display:flex;align-items:center;gap:1.4rem;padding-bottom:1.4rem;border-bottom:1px solid rgba(56,56,56,.22)}
.card--plum .card__head{border-bottom-color:rgba(245,244,240,.3)}
.card__avatar{width:4.4rem;height:4.4rem;border-radius:50%;flex:none;background:rgba(56,56,56,.13);display:grid;place-items:center;font-family:"IBM Plex Mono",monospace;font-size:1.3rem}
.card--plum .card__avatar{background:rgba(245,244,240,.2)}
.card__name{font-size:2.2rem;letter-spacing:-.03em;line-height:1.15;margin:0}
.card__role{font-size:1.2rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(56,56,56,.62);margin:.3rem 0 0}
.card--plum .card__role{color:rgba(245,244,240,.68)}
.card__q{margin-left:auto;font-family:"Barlow Condensed",sans-serif;font-size:4rem;line-height:1;opacity:.45;align-self:flex-start}
.card blockquote{margin:1.8rem 0 0;font-size:1.75rem;line-height:1.5;max-width:62ch}
@media (max-width:820px){ .card{width:100%} }

/* ---------- achievement cards ---------- */
.impact{overflow:hidden}
.proof-cards{padding:2rem 0 4rem}
.proof-card{min-height:31rem;padding:3rem 3.2rem 3.4rem;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;text-decoration:none}
.proof-card__top{display:flex;justify-content:space-between;gap:2rem;padding-bottom:1.6rem;border-bottom:1px solid rgba(56,56,56,.22);font-family:"IBM Plex Mono",monospace;font-size:1rem;letter-spacing:.12em;text-transform:uppercase}
.card--plum .proof-card__top,.card--ink .proof-card__top{border-bottom-color:rgba(245,244,240,.26)}
.proof-card__index{opacity:.65}
.proof-card__type{font-weight:500}
.proof-card__metric{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:500;font-size:clamp(6.8rem,10vw,12rem);line-height:.8;letter-spacing:-.055em;margin:3.2rem 0 1.6rem}
.proof-card__metric--word{font-size:clamp(5rem,8vw,9rem)}
.proof-card h3{font-family:"Barlow Condensed",sans-serif;font-weight:500;text-transform:uppercase;font-size:clamp(2.4rem,3vw,3.4rem);letter-spacing:-.035em;line-height:1;margin:0 0 1.4rem}
.proof-card p{margin:0;max-width:68ch;font-size:1.6rem;line-height:1.55;color:rgba(56,56,56,.78)}
.proof-card .arrow{margin-top:2rem}
.card--plum .arrow,.card--ink .arrow{border-bottom-color:var(--cream)}
.card--plum p,.card--ink p{color:rgba(245,244,240,.74)}
.proof-card--with-image{grid-template-columns:minmax(0,1.08fr) minmax(28rem,.92fr);padding:0;overflow:hidden;align-items:stretch}
.proof-card__content{padding:3rem 3.2rem 3.4rem;display:flex;flex-direction:column;align-items:flex-start}
.proof-card__content .proof-card__metric{margin-top:auto;padding-top:4rem}
.proof-card__media{margin:0;min-height:42rem;position:relative;overflow:hidden}
.proof-card__media img{position:absolute;left:0;top:-4%;width:100%;height:108%;object-fit:cover;object-position:50% 46%}
.proof-card__media--stage img{object-position:66% 50%}
@media (max-width:820px){
  .proof-card{min-height:0;padding:2.4rem}
  .proof-card--with-image{grid-template-columns:minmax(0,1fr);padding:0}
  .proof-card__content{padding:2.4rem}
  .proof-card__media{min-height:30rem;order:-1}
}

/* ---------- writing ---------- */
.writing{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:5rem;align-items:start}
.posts{border-top:1px solid var(--rule)}
.post{display:flex;align-items:center;gap:1.6rem;padding:1.5rem 0;border-bottom:1px dashed var(--rule);text-decoration:none;transition:padding-left .25s}
.post:hover{padding-left:.8rem}
.post:hover .post__t{color:var(--green-dk)}
.post__tag{font-size:1.1rem;letter-spacing:.1em;text-transform:uppercase;color:#6E6E6E;border:1px solid var(--rule);border-radius:99px;padding:.35rem .8rem;flex:none}
.post__t{flex:1;font-size:1.6rem;line-height:1.35;transition:color .2s}
.post__dot{width:.9rem;height:.9rem;border-radius:50%;background:var(--green);flex:none}
@media (max-width:900px){ .writing{grid-template-columns:minmax(0,1fr)} }

/* ---------- talks archive ---------- */
.year-block{display:grid;grid-template-columns:17rem minmax(0,1fr);gap:4rem;margin-bottom:6rem}
.year-tag{font-family:"Barlow Condensed",sans-serif;font-weight:500;font-size:5.6rem;letter-spacing:-.05em;line-height:1;border:1px solid var(--rule);padding:1.2rem 1.8rem;align-self:start;justify-self:start}
.talk{padding:1.6rem 0;border-bottom:1px dashed var(--rule)}
.talk:first-child{border-top:1px dashed var(--rule)}
.talk__tags{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:.8rem}
.chip{font-family:"IBM Plex Mono",monospace;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;color:#6E6E6E;border:1px solid var(--rule);border-radius:99px;padding:.35rem .8rem}
.talk__t{margin:0;font-size:1.7rem;line-height:1.35}
@media (max-width:820px){ .year-block{grid-template-columns:minmax(0,1fr);gap:1.8rem} }

/* ---------- FAQ — gbolahan ---------- */
.faq{max-width:96rem}
.faq .acc__t{font-size:clamp(1.8rem,2.4vw,2.4rem)}

/* ---------- CTA + footer ---------- */
.speaking{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,.75fr);gap:4rem;align-items:start}
.speaking p{margin:0 0 2rem;max-width:44ch}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.cta{background:var(--cta);border-radius:1rem;padding:2.6rem 2rem;text-align:center;align-self:center}
.cta a{font-size:1.7rem;text-decoration:none;border-bottom:1px solid currentColor}
.cta a:hover{color:var(--green-dk)}
.cta i{display:block;width:.9rem;height:.9rem;border-radius:50%;background:var(--green);margin:1.6rem auto 0}
@media (max-width:900px){ .speaking{grid-template-columns:minmax(0,1fr)} }

/* ---------- build highlights + visual stacks ---------- */
.builds{border-top:1px solid var(--ink)}
.build{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(36rem,.92fr);gap:7rem;padding:6rem 0;border-bottom:1px solid var(--rule);align-items:center}
.build--reverse .build__copy{order:2}
.build__meta{display:flex;align-items:center;gap:1.3rem;margin-bottom:2.4rem;font-family:"IBM Plex Mono",monospace;font-size:1rem;letter-spacing:.13em;text-transform:uppercase;color:#727272}
.build__meta span:first-child{color:var(--green-dk)}
.build__meta span:first-child::after{content:"";display:inline-block;width:4rem;height:1px;background:var(--rule);margin-left:1.3rem;vertical-align:middle}
.build h3{font-family:"Barlow Condensed",sans-serif;font-size:clamp(3.6rem,5.4vw,6.4rem);font-weight:500;text-transform:uppercase;letter-spacing:-.045em;line-height:.92;margin:0 0 2.2rem;max-width:14ch}
.build__copy>p{font-size:1.7rem;line-height:1.55;max-width:58ch;margin:0;color:#565656}
.build__outcomes{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.4rem}
.build__outcomes span{font-family:"IBM Plex Mono",monospace;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--green-dk);color:var(--green-dk);border-radius:99px;padding:.7rem 1rem}
.build__copy>.build__stack{margin-top:2.4rem;padding-top:1.8rem;border-top:1px solid var(--rule);font-family:"IBM Plex Mono",monospace;font-size:1rem;line-height:1.65;letter-spacing:.05em;text-transform:uppercase;color:var(--green-dk)}
.build__architecture{position:relative;isolation:isolate;margin:0;aspect-ratio:3/2;overflow:hidden;border-radius:1.2rem;border:1px solid var(--rule);box-shadow:0 1.8rem 4.5rem rgba(42,24,17,.1)}
.build__architecture img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1),filter .8s ease}
.build__architecture figcaption{position:absolute;z-index:3;display:flex;flex-direction:column;gap:.35rem;min-width:20rem;padding:1.2rem 1.4rem;font-family:"IBM Plex Mono",monospace;font-size:.9rem;line-height:1.35;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 1rem 3rem rgba(42,24,17,.14)}
.build__architecture figcaption span{opacity:.62}
.build__architecture figcaption b{font-weight:500}
.build__architecture--light{background:#F7F8FA}
.build__architecture--dark{background:var(--black);border-color:rgba(247,240,228,.18)}
.build__architecture--light figcaption{background:rgba(42,24,17,.94);color:var(--cream)}
.build__architecture--dark figcaption{background:rgba(247,240,228,.94);color:var(--black)}
.build__architecture--one{border-radius:1.2rem 7rem 1.2rem 1.2rem}
.build__architecture--one::before,.build__architecture--two::before,.build__architecture--three::before,.build__architecture--four::before{content:"";position:absolute;z-index:2;background:var(--green)}
.build__architecture--one::before{inset:0 auto 0 0;width:.7rem}
.build__architecture--one figcaption{left:2rem;bottom:2rem}
.build__architecture--two{border-radius:1.2rem 1.2rem 1.2rem 7rem;padding:1.4rem;background:#1E110C}
.build__architecture--two::before{inset:0 0 auto 0;height:.7rem}
.build__architecture--two figcaption{top:2.8rem;right:2.8rem;text-align:right}
.build__architecture--three{border-radius:7rem 1.2rem 1.2rem 1.2rem}
.build__architecture--three::before{inset:0 0 0 auto;width:.7rem}
.build__architecture--three img{filter:sepia(.12) saturate(.88)}
.build__architecture--three figcaption{top:2rem;left:2rem}
.build__architecture--four{border-radius:1.2rem 7rem 1.2rem 1.2rem;padding:1.4rem;background:#1E110C}
.build__architecture--four::before{inset:auto 0 0 0;height:.7rem}
.build__architecture--four figcaption{right:2.8rem;bottom:2.8rem;text-align:right}
@media (hover:hover){
  .build__architecture:hover img{transform:scale(1.025)}
  .build__architecture--three:hover img{filter:sepia(0) saturate(1)}
}
.stack-panel{min-height:36rem;padding:2.4rem;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;border-radius:1.2rem}
.stack-panel::before{content:"";position:absolute;width:24rem;height:24rem;border:1px solid rgba(56,56,56,.13);border-radius:50%;right:-8rem;top:-10rem;box-shadow:0 0 0 5rem rgba(56,56,56,.035),0 0 0 10rem rgba(56,56,56,.025)}
.stack-panel--sage{background:var(--sage)}
.stack-panel--peri{background:var(--peri)}
.stack-panel--blush{background:var(--blush)}
.stack-panel--plum{background:var(--plum);color:var(--cream)}
.stack-panel__label{position:relative;z-index:1;font-family:"IBM Plex Mono",monospace;font-size:1rem;letter-spacing:.14em;text-transform:uppercase;opacity:.68}
.tool-cloud{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:.8rem;align-content:flex-end}
.tool{--tool-color:#787878;display:inline-flex;align-items:center;gap:.75rem;background:rgba(245,244,240,.94);color:var(--ink);border:1px solid rgba(56,56,56,.12);border-radius:999px;padding:.75rem 1rem;font-family:"IBM Plex Mono",monospace;font-size:1.05rem;line-height:1;box-shadow:0 .5rem 1.6rem rgba(56,56,56,.07)}
.tool::before{content:"";width:.75rem;height:.75rem;border-radius:50%;background:var(--tool-color);box-shadow:0 0 0 .25rem color-mix(in srgb,var(--tool-color) 18%,transparent)}
.tool--aws{--tool-color:#FF9900}.tool--snowflake{--tool-color:#29B5E8}.tool--airflow{--tool-color:#017CEE}.tool--dbt{--tool-color:#FF694B}.tool--terraform{--tool-color:#844FBA}.tool--atlantis{--tool-color:#1F8585}.tool--security{--tool-color:#25834B}.tool--cicd{--tool-color:#E5532D}.tool--argo{--tool-color:#EF7B4D}.tool--network{--tool-color:#4066C5}.tool--python{--tool-color:#3776AB}.tool--docker{--tool-color:#2496ED}.tool--k8s{--tool-color:#326CE5}.tool--sheets{--tool-color:#0F9D58}.tool--postgres{--tool-color:#336791}
.build .tool{opacity:0;transform:translateY(1.2rem);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.build.in .tool{opacity:1;transform:none}
.build.in .tool:nth-child(2){transition-delay:.04s}.build.in .tool:nth-child(3){transition-delay:.08s}.build.in .tool:nth-child(4){transition-delay:.12s}.build.in .tool:nth-child(5){transition-delay:.16s}.build.in .tool:nth-child(6){transition-delay:.2s}.build.in .tool:nth-child(7){transition-delay:.24s}.build.in .tool:nth-child(8){transition-delay:.28s}.build.in .tool:nth-child(n+9){transition-delay:.32s}
@media (hover:hover){.stack-panel:hover .tool:nth-child(3n){transform:translateY(-.45rem)}}
@media (max-width:900px){
  .build{grid-template-columns:minmax(0,1fr);gap:3rem;padding:4.5rem 0}
  .build--reverse .build__copy{order:0}
  .stack-panel{min-height:29rem}
}

/* ---------- architecture showcase ---------- */
.architecture-feature{margin:6rem 0 0;background:var(--black);color:var(--cream);border-radius:1.4rem;overflow:hidden}
.architecture-feature__copy{display:grid;grid-template-columns:minmax(26rem,.65fr) minmax(32rem,1fr);gap:5rem;align-items:end;padding:4rem}
.architecture-feature .label{font-family:"IBM Plex Mono",monospace;color:var(--green)}
.architecture-feature h3{font-family:"Barlow Condensed",sans-serif;font-size:clamp(4rem,6vw,7.2rem);font-weight:500;text-transform:uppercase;letter-spacing:-.045em;line-height:.9;margin:1.8rem 0 0;max-width:10ch}
.architecture-feature__copy>p{font-size:1.7rem;line-height:1.55;color:#A8A8A8;max-width:55ch;margin:0}
.architecture-feature picture{display:block;aspect-ratio:3/2;background:#F7F8FA;overflow:hidden}
.architecture-feature img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:760px){
  .architecture-feature{margin-top:4.5rem}
  .architecture-feature__copy{grid-template-columns:minmax(0,1fr);gap:2.4rem;padding:3rem 2.4rem}
  .architecture-feature__copy>p{font-size:1.55rem}
  .architecture-feature img{width:100%;max-width:100%}
}

/* ---------- speaking and community photography ---------- */
.speaking-story{padding-top:6rem}
.speaking-story__grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(30rem,.55fr);gap:2.4rem;align-items:end}
.story-photo{margin:0}
.story-photo__image{position:relative;overflow:hidden;background:#E5E2DB}
.story-photo--wide .story-photo__image{aspect-ratio:16/10}
.story-photo--tall .story-photo__image{aspect-ratio:4/5}
.story-photo img{position:absolute;left:0;top:-4%;width:100%;height:108%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.story-photo--wide img{object-position:50% 45%}
.story-photo--tall img{object-position:50% 30%}
.story-photo figcaption{display:flex;justify-content:space-between;gap:2rem;padding:1.5rem 0;border-bottom:1px solid var(--rule);font-family:"IBM Plex Mono",monospace;font-size:1rem;letter-spacing:.08em;text-transform:uppercase}
.story-photo figcaption span{color:var(--green-dk)}
.story-photo figcaption b{font-weight:400;text-align:right;color:#6E6E6E}
@media (hover:hover){.story-photo:hover img{transform:scale(1.025)}}
@media (max-width:820px){
  .speaking-story__grid{grid-template-columns:minmax(0,1fr)}
  .story-photo figcaption{flex-direction:column;gap:.5rem}
  .story-photo figcaption b{text-align:left}
}

/* ---------- selected speaking engagements ---------- */
.speaking-intro{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4rem;align-items:end;margin:-1rem 0 5rem;padding-bottom:3rem;border-bottom:1px solid var(--ink)}
.speaking-intro p{font-size:clamp(1.8rem,2.2vw,2.2rem);line-height:1.5;letter-spacing:-.02em;max-width:72ch;margin:0}
.speaking-intro__cta{display:inline-flex;align-items:center;gap:1.2rem;text-decoration:none;border:1px solid var(--ink);border-radius:99px;padding:1.1rem 1.5rem;font-family:"IBM Plex Mono",monospace;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.speaking-intro__cta span{color:var(--green-dk);font-size:1.5rem;transition:transform .25s ease}
.speaking-intro__cta:hover span{transform:translate(.25rem,-.25rem)}
.engagements{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.4rem}
.engagement{display:flex;flex-direction:column;min-width:0;background:#ECEAE4;border:1px solid var(--rule);border-radius:1.3rem;overflow:hidden;text-decoration:none;transition:border-color .25s ease,box-shadow .35s ease}
.engagement:hover{border-color:#A9A69F;box-shadow:0 2rem 5rem rgba(10,10,10,.09)}
.engagement--feature{grid-column:1/-1;display:grid;grid-template-columns:minmax(29rem,.7fr) minmax(0,1.3fr)}
.engagement--feature{background:var(--black);color:var(--cream);border-color:var(--black)}
.engagement__media{position:relative;aspect-ratio:1/1;overflow:hidden;background:#DEDCD6}
.engagement--feature .engagement__media{aspect-ratio:auto;min-height:48rem}
.engagement__media img{position:absolute;inset:-3% 0 auto;width:100%;height:106%;object-fit:cover}
.engagement__media--portrait img{object-position:50% 35%}
.engagement__media--landscape{background:#0C1119}
.engagement__media--landscape img{inset:0;height:100%;object-fit:contain;object-position:50% 50%}
.engagement__copy{display:flex;flex:1;flex-direction:column;padding:2.6rem}
.engagement--feature .engagement__copy{justify-content:center;padding:clamp(3rem,5vw,7rem)}
.engagement__meta{display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;margin-bottom:3rem;font-family:"IBM Plex Mono",monospace;font-size:1rem;letter-spacing:.1em;text-transform:uppercase;color:#6E6E6E}
.engagement__meta span+span::before{content:"/";margin-right:1.6rem;color:var(--rule)}
.engagement--feature .engagement__meta{color:#A8A8A8}
.engagement h3{font-family:"Barlow Condensed",sans-serif;font-size:clamp(3.2rem,4.4vw,5.4rem);font-weight:500;text-transform:uppercase;letter-spacing:-.04em;line-height:.94;margin:0 0 2rem;text-wrap:balance}
.engagement--feature h3{font-size:clamp(4.8rem,7vw,8.8rem);max-width:10ch}
.engagement p{font-size:1.6rem;line-height:1.55;color:#5F5F5F;margin:0 0 3.5rem;max-width:55ch}
.engagement--feature p{color:#A8A8A8;font-size:1.75rem}
.engagement__link{display:inline-flex;align-items:center;gap:.7rem;margin-top:auto;font-family:"IBM Plex Mono",monospace;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;color:var(--green-dk)}
.engagement--feature .engagement__link{color:var(--green)}
.engagement__link i{font-style:normal;font-size:1.5rem;transition:transform .25s ease}
.engagement:hover .engagement__link i{transform:translate(.3rem,-.3rem)}
@media (max-width:820px){
  .speaking-intro{grid-template-columns:minmax(0,1fr);gap:2.5rem}
  .speaking-intro__cta{justify-self:start}
  .engagements{grid-template-columns:minmax(0,1fr)}
  .engagement--feature{grid-column:auto;display:flex}
  .engagement--feature .engagement__media{min-height:0;aspect-ratio:1/1}
  .engagement--feature .engagement__media--portrait{aspect-ratio:4/5}
  .engagement--feature .engagement__copy{padding:2.6rem}
}

/* ---------- image motion ---------- */
.media-reveal{overflow:hidden}
.media-reveal img{--parallax-y:0px;transform:translate3d(0,var(--parallax-y),0) scale(1.035);will-change:transform;transition:transform .2s linear}

/* ---------- contact band ---------- */
.contact{background:var(--green);color:var(--black);padding:10rem 0}
.contact__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(30rem,.9fr);gap:7rem;align-items:end}
.contact .label{font-family:"IBM Plex Mono",monospace}
.contact h2{font-size:clamp(4.2rem,7vw,8rem);font-weight:400;letter-spacing:-.055em;line-height:.95;max-width:11ch;margin:2.4rem 0 0}
.contact p{font-size:1.8rem;line-height:1.5;max-width:44ch;margin:0 0 3rem}
.contact__links{display:flex;flex-wrap:wrap;gap:.8rem}
.contact__links span,.contact__links a{border:1px solid rgba(10,10,10,.45);border-radius:99px;padding:1.1rem 1.5rem;font-family:"IBM Plex Mono",monospace;font-size:1.2rem;letter-spacing:.07em;text-transform:uppercase;text-decoration:none}
.contact__links a:hover{background:var(--black);color:var(--cream)}
@media (max-width:820px){.contact__grid{grid-template-columns:minmax(0,1fr);gap:4rem}}

.foot{background:var(--black);color:var(--cream);padding:8rem 0}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,.7fr) minmax(0,.9fr);gap:4rem;align-items:start}
.foot h2{font-family:"Hanken Grotesk",sans-serif;font-weight:400;font-size:clamp(3.2rem,5vw,4.6rem);letter-spacing:-.035em;margin:0 0 1.4rem;line-height:1}
.foot a{color:var(--cream);text-decoration:none}
.foot__mail{border-bottom:1px solid var(--cream);padding-bottom:.2rem;font-size:1.7rem}
.foot__mail:hover{color:var(--green);border-bottom-color:var(--green)}
.foot__col{display:flex;flex-direction:column;gap:.9rem;font-size:1.5rem}
.foot__grid>div:first-child>p{color:#8E8E8E;max-width:38ch;margin:0}
.foot__col>span:not(.label){color:#A0A0A0}
.foot__col a:hover{color:var(--green)}
.foot__col .label{color:#7E7E7E;margin-bottom:.4rem}
.foot__note{margin-top:6rem;padding-top:1.6rem;border-top:1px solid rgba(245,244,240,.18);color:#7E7E7E;font-family:"IBM Plex Mono",monospace;font-size:1rem;letter-spacing:.1em;text-transform:uppercase;display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
@media (max-width:820px){ .foot__grid{grid-template-columns:minmax(0,1fr)} }

/* ---------- reveal ---------- */
.rev{opacity:0;transform:translateY(2.4rem);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
.rev.in{opacity:1;transform:none}
.section:target .rev,.contact:target .rev{opacity:1;transform:none}
.section:target .build .tool{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none;transition:none}
  .splash__cue i,.statement__cue i,.nav__status i{animation:none}
  .card{transform:none!important}
  #trailer,.preloader,.curtain{display:none}
  .hero__copy,.hero__portrait,.hero__roles{animation:none}
  .media-reveal img{transform:none;transition:none}
  .build .tool{opacity:1;transform:none;transition:none}
}

/* ==========================================================
   STANDALONE PAGES
   New page layouts built from the same type, spacing, borders,
   colour tokens and motion language as the original homepage.
   ========================================================== */
.skip-link{position:fixed;z-index:120;top:1rem;left:1rem;background:var(--black);color:var(--cream);padding:1rem 1.4rem;transform:translateY(-160%)}
.skip-link:focus{transform:none}
.narrow{width:min(92rem,100% - 5rem);margin-inline:auto}
.mobile-nav{position:fixed;z-index:8;inset:6.1rem 0 0;background:var(--cream);padding:5rem 2.5rem;display:flex;flex-direction:column;justify-content:center;gap:.8rem;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.mobile-nav.open{opacity:1;visibility:visible}
.mobile-nav a{font-family:"Barlow Condensed",sans-serif;font-size:clamp(4.5rem,10vw,8rem);font-weight:500;line-height:.9;letter-spacing:-.04em;text-transform:uppercase;text-decoration:none}
.mobile-nav a:hover{color:var(--green-dk)}
.nav>.nav__menu{margin-left:auto}
.nav__links a[aria-current="page"]{color:var(--green-dk)}
.nav__course{color:var(--green-dk)!important}

.page-hero{background:var(--black);color:var(--cream);padding:16rem 0 8rem;min-height:68rem;display:flex;align-items:center}
.page-hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(28rem,.55fr);gap:7rem;align-items:end}
.page-hero .eyebrow,.creator-hero .eyebrow,.course-hero .eyebrow{font-family:"IBM Plex Mono",monospace;font-size:1rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin:0 0 2.8rem;display:flex;align-items:center;gap:1rem}
.page-hero .eyebrow::before,.creator-hero .eyebrow::before,.course-hero .eyebrow::before{content:"";width:3.5rem;height:1px;background:currentColor}
.page-hero h1{font-size:clamp(8rem,14vw,18rem)}
.page-hero__intro{font-size:clamp(1.8rem,2.2vw,2.4rem);line-height:1.45;color:#C9B8AC;margin:0 0 .5rem}
.page-hero--image{display:block;padding-bottom:0}
.page-hero__image{width:min(148rem,100% - 5rem);height:min(66rem,60vw);min-height:42rem;margin:7rem auto 0;overflow:hidden}
.page-hero__image img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}

.section--paper{background:#F0E3D4}
.section--brown{background:var(--black);color:var(--cream)}
.section-head{display:flex;align-items:flex-end;gap:3rem;flex-wrap:wrap;margin-bottom:5rem;padding-bottom:2.5rem;border-bottom:1px solid var(--rule)}
.section-head h2{font-size:clamp(5rem,13vw,14rem)}
.section-head p{font-style:italic;font-size:1.5rem;line-height:1.35;max-width:32ch;margin:0}
.section--brown .section-head{border-color:rgba(247,240,228,.2)}

.story{padding:10rem 0}
.story-chapter{display:grid;grid-template-columns:17rem minmax(0,1fr);gap:5rem;padding:6rem 0;border-top:1px solid var(--rule)}
.story-chapter__label{align-self:start;position:sticky;top:9rem}
.story-chapter__label span{font-family:"Barlow Condensed",sans-serif;font-size:5rem;line-height:1;color:var(--green-dk)}
.story-chapter__label h2{font-family:"IBM Plex Mono",monospace;font-size:1rem;letter-spacing:.13em;text-transform:uppercase;margin:1rem 0 0}
.story-chapter__body{max-width:76rem}
.story-chapter__body p{font-size:1.85rem;line-height:1.65;margin:0 0 2.2rem}
.story-chapter__body .lead{font-size:clamp(2.6rem,3.6vw,4.3rem);line-height:1.2;letter-spacing:-.035em}
.story-photo{position:relative;height:58rem;margin:4rem 0 8rem;overflow:hidden}
.story-photo img{position:static;inset:auto;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:none;transition:none}
.pullquote{font-family:"Barlow Condensed",sans-serif;font-size:clamp(3.4rem,5vw,5.8rem);line-height:1;text-transform:uppercase;letter-spacing:-.035em;border-left:.6rem solid var(--green);padding-left:2.5rem;margin:4rem 0}

.talks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.4rem}
.talk-card{display:flex;flex-direction:column;background:#EFE3D6;border:1px solid var(--rule);text-decoration:none;overflow:hidden;transition:box-shadow .35s,border-color .25s}
.talk-card:hover{border-color:#A88670;box-shadow:0 2rem 5rem rgba(42,24,17,.12)}
.talk-card:first-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(29rem,.7fr) minmax(0,1.3fr);background:var(--black);color:var(--cream)}
.talk-card__media{min-height:38rem;position:relative;overflow:hidden;background:#E0CCB8}
.talk-card:first-child .talk-card__media{min-height:50rem}
.talk-card__media img{position:absolute;inset:-3% 0 auto;width:100%;height:106%;object-fit:cover;object-position:50% 35%}
.talk-card__media--contain{background:var(--black)}
.talk-card__media--contain img{inset:0;height:100%;object-fit:contain}
.talk-card__body{display:flex;flex:1;flex-direction:column;padding:2.8rem}
.talk-card:first-child .talk-card__body{justify-content:center;padding:clamp(3rem,5vw,7rem)}
.talk-card__meta{font-family:"IBM Plex Mono",monospace;font-size:1rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green-dk);margin-bottom:2.5rem}
.talk-card:first-child .talk-card__meta{color:var(--green)}
.talk-card h2{font-family:"Barlow Condensed",sans-serif;font-size:clamp(3.4rem,4.5vw,5.6rem);font-weight:500;text-transform:uppercase;letter-spacing:-.04em;line-height:.94;margin:0 0 2rem}
.talk-card:first-child h2{font-size:clamp(5rem,7vw,9rem);max-width:10ch}
.talk-card p{color:#69554A;line-height:1.55;margin:0 0 3rem}
.talk-card:first-child p{color:#BDA99D}
.text-link{margin-top:auto;font-family:"IBM Plex Mono",monospace;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;color:var(--green-dk)}
.invite-band{background:var(--cta);padding:9rem 0;text-align:center}
.invite-band h2{font-family:"Barlow Condensed",sans-serif;font-size:clamp(4.5rem,8vw,9rem);font-weight:500;text-transform:uppercase;letter-spacing:-.045em;line-height:.9;max-width:15ch;margin:0 auto 3rem}
.button{display:inline-flex;align-items:center;gap:1rem;background:var(--black);color:var(--cream);border:1px solid var(--black);border-radius:99px;padding:1.2rem 1.7rem;font-family:"IBM Plex Mono",monospace;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.button:hover{background:transparent;color:var(--black)}
.button--light{background:var(--cream);color:var(--black);border-color:var(--cream)}

.library{padding:10rem 0 12rem}
.library-section+.library-section{margin-top:10rem}
.library-title{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;border-bottom:1px solid var(--ink);padding-bottom:2rem;margin-bottom:2rem}
.library-title h2{font-family:"Barlow Condensed",sans-serif;font-size:clamp(5rem,9vw,10rem);font-weight:500;text-transform:uppercase;letter-spacing:-.05em;line-height:.8;margin:0}
.library-title span{font-family:"IBM Plex Mono",monospace;font-size:1rem;letter-spacing:.1em;text-transform:uppercase}
.article-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 4rem}
.article-link{display:grid;grid-template-columns:3.8rem minmax(0,1fr) auto;gap:1.5rem;padding:2.4rem 0;border-bottom:1px dashed var(--rule);text-decoration:none}
.article-link__number{font-family:"IBM Plex Mono",monospace;font-size:1rem;color:var(--green-dk)}
.article-link h3{font-size:1.75rem;font-weight:400;line-height:1.4;margin:0}
.article-link:hover h3{color:var(--green-dk)}
.article-link i{font-style:normal;color:var(--green-dk)}

.creator-hero,.course-hero{background:var(--black);color:var(--cream);padding:15rem 0 9rem}
.creator-hero__grid,.course-hero__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(32rem,.65fr);gap:6rem;align-items:center}
.creator-hero h1,.course-hero h1{font-size:clamp(8rem,13vw,17rem)}
.creator-hero p,.course-hero__lead{font-size:clamp(1.8rem,2.2vw,2.4rem);line-height:1.45;color:#C9B8AC;max-width:62rem}
.creator-hero__image{height:62rem;overflow:hidden}
.creator-hero__image img{width:100%;height:108%;object-fit:cover;object-position:50% 35%}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--rule);margin-top:6rem}
.metric{padding:3rem;border-left:1px solid var(--rule)}
.metric:first-child{border-left:0}
.metric strong{display:block;font-family:"Barlow Condensed",sans-serif;font-size:clamp(4.5rem,6vw,7rem);font-weight:500;line-height:.9;color:var(--green-dk)}
.metric span,.metric-note{font-family:"IBM Plex Mono",monospace;font-size:1rem;letter-spacing:.1em;text-transform:uppercase}
.metric-note{text-align:center;color:#756154;margin-top:1.5rem}
.content-montage{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}
.content-frame,.content-tile{min-height:52rem;border:1px solid var(--rule);overflow:hidden}
.content-frame iframe{width:100%;height:100%;min-height:52rem;border:0}
.content-tile{display:flex;flex-direction:column;justify-content:flex-end;padding:2.5rem;color:var(--cream);background:linear-gradient(180deg,transparent,rgba(42,24,17,.9)),url("assets/joy-editorial.webp") center/cover;text-decoration:none}
.content-tile:nth-child(4){background-image:linear-gradient(180deg,transparent,rgba(42,24,17,.9)),url("assets/joy-speaking-wide.webp")}
.content-tile small{font-family:"IBM Plex Mono",monospace;font-size:1rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.content-tile h3{font-family:"Barlow Condensed",sans-serif;font-size:3.5rem;text-transform:uppercase;line-height:1;margin:1rem 0 0}
.pill-row,.learn-list{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;margin-top:3rem}
.pill{font-family:"IBM Plex Mono",monospace;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--rule);border-radius:99px;padding:.65rem 1rem;background:var(--cream)}
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.service-card{min-height:26rem;border:1px solid var(--rule);padding:2.8rem;background:#EFE3D6}
.service-card span{font-family:"IBM Plex Mono",monospace;font-size:1rem;color:var(--green-dk)}
.service-card h3{font-family:"Barlow Condensed",sans-serif;font-size:3.5rem;font-weight:500;text-transform:uppercase;line-height:1;margin:5rem 0 1rem}
.service-card p{color:#69554A;margin:0}
.brand-row{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid rgba(247,240,228,.2)}
.brand{display:grid;place-items:center;min-height:12rem;padding:2rem;border-left:1px solid rgba(247,240,228,.2);font-family:"Barlow Condensed",sans-serif;font-size:2.4rem;text-transform:uppercase;text-align:center}
.brand:first-child{border-left:0}

.course-card{border:1px solid rgba(247,240,228,.25);padding:4rem;background:rgba(247,240,228,.06)}
.course-card span{font-family:"IBM Plex Mono",monospace;font-size:1rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.course-card h2{font-family:"Barlow Condensed",sans-serif;font-size:5rem;font-weight:500;text-transform:uppercase;line-height:.95;margin:2rem 0}
.course-card p{color:#C9B8AC}
.curriculum{counter-reset:course;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.lesson{counter-increment:course;min-height:24rem;padding:3rem;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.lesson::before{content:counter(course,decimal-leading-zero);display:block;font-family:"IBM Plex Mono",monospace;font-size:1rem;color:var(--green-dk);margin-bottom:5rem}
.lesson h3{font-family:"Barlow Condensed",sans-serif;font-size:3.4rem;font-weight:500;text-transform:uppercase;line-height:1;margin:0 0 1rem}
.lesson p{color:#69554A;margin:0}
.testimonial-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.testimonial-links a{border:1px solid var(--rule);padding:2.4rem;text-decoration:none;background:var(--cream);color:var(--ink);transition:background .25s ease,transform .25s ease}
.testimonial-links a:hover{background:var(--cta);transform:translateY(-.5rem)}
.testimonial-links b{display:block;font-family:"Barlow Condensed",sans-serif;font-size:4rem;font-weight:500;color:var(--green-dk)}
.testimonial-card{display:flex;flex-direction:column;min-height:34rem}
.testimonial-card blockquote{font-family:"Barlow Condensed",sans-serif;font-size:2.8rem;line-height:1.08;letter-spacing:-.02em;margin:4.5rem 0 3rem}
.testimonial-card__credit{display:flex;flex-direction:column;gap:.45rem;margin-top:auto;padding-top:1.8rem;border-top:1px solid var(--rule)}
.testimonial-card__credit strong{font-size:1.4rem}
.testimonial-card__credit em{font-family:"IBM Plex Mono",monospace;font-size:.95rem;font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--green-dk)}

.footer{background:var(--black);color:var(--cream);padding:8rem 0}
.footer__grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,.7fr) minmax(0,.9fr);gap:4rem}
.footer__brand{font-size:4.6rem;letter-spacing:-.035em;line-height:1}
.footer p{color:#A89589;max-width:40ch}
.footer__col{display:flex;flex-direction:column;gap:.9rem}
.footer__col b{font-family:"IBM Plex Mono",monospace;font-size:1rem;letter-spacing:.1em;text-transform:uppercase;color:#8D776B;margin-bottom:.5rem}
.footer__col a{color:var(--cream);text-decoration:none}
.footer__col a:hover{color:var(--green)}
.footer__bottom{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-top:6rem;padding-top:1.6rem;border-top:1px solid rgba(247,240,228,.18);font-family:"IBM Plex Mono",monospace;font-size:1rem;letter-spacing:.1em;text-transform:uppercase;color:#8D776B}
.reveal{opacity:0;transform:translateY(2.4rem);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

@media (max-width:900px){
  .narrow{width:min(92rem,100% - 3rem)}
  .page-hero__grid,.creator-hero__grid,.course-hero__grid{grid-template-columns:minmax(0,1fr);gap:4rem}
  .page-hero{min-height:0;padding:12rem 0 7rem}
  .page-hero__image{width:calc(100% - 3rem);height:48rem;min-height:0}
  .story-chapter{grid-template-columns:minmax(0,1fr);gap:2.5rem}
  .story-chapter__label{position:static}
  .talks{grid-template-columns:minmax(0,1fr)}
  .talk-card:first-child{grid-column:auto;display:flex}
  .talk-card:first-child .talk-card__media{min-height:42rem}
  .article-list{grid-template-columns:minmax(0,1fr)}
  .content-montage{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .curriculum{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .page-hero h1,.creator-hero h1,.course-hero h1{font-size:8rem}
  .creator-hero,.course-hero{padding:12rem 0 7rem}
  .creator-hero__image{height:auto;aspect-ratio:4/5}
  .story-photo{height:42rem}
  .metrics,.content-montage,.service-grid,.curriculum,.testimonial-links{grid-template-columns:minmax(0,1fr)}
  .metric{border-left:0;border-top:1px solid var(--rule)}
  .metric:first-child{border-top:0}
  .brand-row{grid-template-columns:minmax(0,1fr)}
  .brand{border-left:0;border-top:1px solid rgba(247,240,228,.2)}
  .brand:first-child{border-top:0}
}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}