.monochrome{--cream:var(--paper);--ink:var(--on-light);--gold:#777;background:var(--paper);color:var(--on-light)}.monochrome header{background:var(--ink-0);color:#fff;margin:0;padding:0 4%;height:92px;border-color:#333}.personal-brand{font-family:var(--font-sans);font-weight:700;font-size:21px;letter-spacing:.02em}.personal-brand small,.monochrome .eyebrow,.monochrome em{color:#888}.editorial-hero{height:calc(100svh - 92px);min-height:650px;max-height:1000px;background:var(--ink-0);color:#fff;position:relative;overflow:hidden;isolation:isolate}.editorial-hero h1{position:absolute;z-index:1;top:19%;left:3%;width:94%;margin:0;font-family:Impact,'Arial Narrow',Arial,sans-serif;font-size:clamp(65px,12.7vw,210px);font-weight:900;letter-spacing:-.065em;line-height:1;white-space:nowrap;text-align:center}.hero-kicker{position:absolute;top:5%;left:4%;font-size:11px;letter-spacing:3px;line-height:1.8;z-index:3}.hero-person{position:absolute;bottom:-5%;left:50%;width:45%;max-width:650px;transform:translateX(-50%);z-index:2}.hero-person .portrait-frame{border:0;background:transparent;box-shadow:none}.hero-person .portrait-frame:after{display:none}.hero-person img{width:100%;display:block;filter:grayscale(1);mask-image:linear-gradient(to bottom,#000 80%,transparent 100%)}.hero-bottom{position:absolute;z-index:4;bottom:12%;left:4%;right:4%;display:flex;align-items:end;justify-content:space-between;gap:20px}.hero-bottom p{font-size:13px;line-height:1.8;max-width:220px}.hero-bottom>div{display:flex;flex-direction:column;gap:12px}.hero-bottom a,.hero-bottom button{color:#fff;border:1px solid rgba(255,255,255,.6);background:transparent;padding:15px 23px;font-size:10px;letter-spacing:1px;text-align:left}.hero-bottom button{background:#fff;color:#111}.hero-location{position:absolute;bottom:25px;left:4%;font-size:9px;letter-spacing:2px;color:#aaa}.identity-strip{background:var(--ink-1);color:#eee;display:grid;grid-template-columns:repeat(4,1fr);padding:30px 4%;gap:20px;border-top:1px solid #333;font-size:10px;letter-spacing:1px}.identity-strip span{border-right:1px solid #444;padding:10px 0}.personal-statement{max-width:1200px;margin:0 auto;padding:95px 30px;display:grid;grid-template-columns:1.2fr 1fr;gap:20px 70px}.personal-statement>p{grid-column:1/-1;font-size:10px;letter-spacing:2px}.personal-statement h2{font:500 var(--fs-h2)/1.05 var(--font-sans);margin:0;letter-spacing:-.02em}.personal-statement>div p{font-size:var(--fs-body);line-height:1.7;max-width:62ch}.personal-statement button:not(:where(.letter-paper)){border:0;border-bottom:1px solid #111;background:none;padding:15px 0;font-size:11px}.monochrome .library-introduction h2{font-family:var(--font-sans);font-weight:500;font-size:var(--fs-h2);line-height:1.05;letter-spacing:-.02em}.monochrome .closing{background:var(--ink-1);color:#eee}.monochrome footer{background:var(--ink-0);color:#eee}.monochrome footer{margin:0;padding:30px 4%}.monochrome .small-star{color:#fff}.monochrome .editorial-portrait{filter:grayscale(1)}@media(max-width:700px){.monochrome header{height:100px;min-height:0;padding:18px 6%;gap:15px}.personal-brand{font-size:17px}.editorial-hero{height:690px;min-height:0;max-height:none}.editorial-hero h1{top:16%;font-size:12.7vw;letter-spacing:-.065em;left:2%;width:96%}.hero-person{width:100%;max-width:470px;bottom:9%;}.hero-kicker{left:6%;top:2%;font-size:9px}.hero-bottom{bottom:7%;left:6%;right:6%;align-items:center}.hero-bottom p{max-width:150px;font-size:10px}.hero-bottom a,.hero-bottom button{font-size:8px;padding:12px}.hero-location{left:6%;font-size:8px;bottom:15px}.identity-strip{grid-template-columns:1fr 1fr;padding:22px 6%;font-size:9px}.personal-statement{grid-template-columns:1fr;padding:55px 25px;gap:15px}.personal-statement h2{font-size:43px}.personal-statement>p{grid-column:auto}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* An unframed silhouette, with soft suit edges blending into the hero. */
.hero-person{background:none;border:0;border-radius:0;box-shadow:none;pointer-events:none}.hero-person img{height:auto;border:0;border-radius:0;box-shadow:none;mask-image:linear-gradient(to right,transparent 0%,#000 10%,#000 90%,transparent 100%),linear-gradient(to bottom,#000 72%,transparent 100%);mask-composite:intersect;-webkit-mask-composite:source-in}.hero-person:before,.hero-person:after{display:none}

/* Cobalt accents (see tokens.css): deep cobalt on light surfaces, lighter cobalt on dark. No gold outside the library. */
/* --accent and --accent-hi come from tokens.css (deep cobalt on light, lighter cobalt on dark) */
.monochrome header nav a:hover,.monochrome header nav a:focus-visible,.monochrome header nav button:hover,.monochrome header nav button:focus-visible{color:var(--on-dark);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:8px}
.hero-kicker:after{content:"";display:block;width:34px;height:3px;margin-top:12px;background:#fff}
.hero-bottom button{background:var(--cobalt);border:1px solid var(--cobalt-on-dark);color:#fff}
.hero-bottom button:hover,.hero-bottom button:focus-visible{background:var(--cobalt-hover);border-color:var(--cobalt-on-dark-hi)}
.hero-bottom a:hover,.hero-bottom a:focus-visible{border-color:#fff;color:#fff;background:rgba(255,255,255,.1)}
.identity-strip span::first-letter{color:inherit}
.personal-statement h2 em{color:var(--cobalt);font-style:normal}
.personal-statement button:not(:where(.letter-paper)){border-bottom:2px solid var(--accent);color:#111}
.monochrome .library-introduction .eyebrow,.contact .eyebrow{color:#111}.monochrome .library-introduction .eyebrow:before,.contact .eyebrow:before{content:"";display:block;width:34px;height:3px;margin:0 auto 12px;background:var(--accent)}
.monochrome :focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* Hero name: two words flank the portrait so the whole name stays legible. */
.editorial-hero h1{display:flex;justify-content:space-between;align-items:flex-start;font-family:'Anton',Impact,'Arial Narrow',Arial,sans-serif;font-weight:400;font-size:clamp(70px,15.2vw,240px);letter-spacing:.005em;line-height:.95;top:15%;left:3.5%;width:93%;text-align:left;pointer-events:none}
.editorial-hero{height:clamp(650px,56vw,900px);min-height:0;max-height:none}
.editorial-hero h1 span{display:block}
.editorial-hero h1 span:first-child{margin-left:-.02em}
@media(max-width:700px){.editorial-hero{height:780px}.editorial-hero h1{flex-direction:column;align-items:center;font-size:27vw;line-height:1;top:10%;left:0;width:100%;letter-spacing:.01em}.editorial-hero h1 span:first-child{margin-left:0}.hero-person{bottom:0}}

/* Coaching: a dark editorial band between the statement and the library. */
.coaching{background:var(--ink-1);color:#f3f3f0;padding:clamp(70px,9vw,120px) 4%;scroll-margin-top:0}
.coaching>*{max-width:1180px;margin-left:auto;margin-right:auto}
.coaching-head{display:grid;grid-template-columns:1.2fr 1fr;gap:20px clamp(30px,6vw,90px);align-items:end;padding-bottom:clamp(40px,5vw,64px);border-bottom:1px solid #333}
.coaching-kicker{grid-column:1/-1;margin:0;font-size:10px;letter-spacing:2px;color:var(--accent)}
.coaching h2{margin:0;font:500 var(--fs-h2)/1.05 var(--font-sans);letter-spacing:-.02em}
.coaching h2 em{font-style:normal;color:var(--accent)}
.coaching-lede{margin:0;font-size:var(--fs-body);line-height:1.7;color:var(--muted-dark);max-width:62ch}
.coaching-areas{list-style:none;padding:0;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr)}
.coaching-areas li{padding:30px 22px 34px 0;margin-right:22px;border-right:1px solid var(--line-dark)}
.coaching-areas li:last-child{border-right:0;margin-right:0}
.coaching-areas li span{display:block;font-size:10px;letter-spacing:2px;color:var(--accent);margin-bottom:34px}
.coaching-areas h3{margin:0 0 12px;font:500 var(--fs-h3)/1.2 var(--font-sans);letter-spacing:-.01em}
.coaching-areas p{margin:0;font-size:.9375rem;line-height:1.7;color:var(--muted-dark)}
.coaching-note{margin-top:8px;padding-top:30px;border-top:1px solid #333;display:flex;align-items:center;gap:24px;flex-wrap:wrap;font-size:12px;letter-spacing:1.5px;color:#b9b9b4}
.coaching-cta{display:inline-block;padding:15px 23px;background:var(--cobalt);border:1px solid var(--cobalt-on-dark);color:#fff;font-size:10px;letter-spacing:1px}
.coaching-cta:hover,.coaching-cta:focus-visible{background:var(--cobalt-hover);border-color:var(--cobalt-on-dark-hi)}
@media(max-width:900px){.coaching-areas{grid-template-columns:1fr 1fr}.coaching-areas li{border-right:0;margin-right:0;padding:24px 16px 26px 0;border-bottom:1px solid #2c2c2c}.coaching-areas li span{margin-bottom:16px}}
@media(max-width:700px){.coaching{padding:60px 6%}.coaching-head{grid-template-columns:1fr}.coaching h2{font-size:38px}.coaching-areas{grid-template-columns:1fr}.coaching-areas li{padding-right:0}.coaching-note{gap:14px}.coaching-cta{width:100%;text-align:center}}

/* Speaking and contact. */
.speaking{border-top:1px solid #222}
.speaking-topics{list-style:none;padding:0;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(30px,6vw,90px)}
.speaking-topics li{padding:22px 0;border-bottom:1px solid var(--line-dark);font:500 clamp(1.25rem,1rem + 1.4vw,2rem)/1.2 var(--font-sans);letter-spacing:-.02em}
.speaking-topics li:before{content:"";display:inline-block;width:8px;height:8px;margin-right:16px;background:var(--accent);vertical-align:middle}
.contact{max-width:1180px;margin:0 auto;padding:clamp(70px,9vw,120px) 30px;text-align:center}

.contact h2{margin:14px 0;font:500 clamp(2.5rem,1.4rem + 4.8vw,5.25rem)/1.05 var(--font-sans);letter-spacing:-.02em}
.contact>p:not(.eyebrow){margin:0 0 26px;font-size:var(--fs-body);color:var(--muted-light)}
.contact-mail{display:inline-block;font-size:clamp(20px,3.4vw,40px);font-weight:600;letter-spacing:-.5px;color:#111;border-bottom:3px solid var(--accent);padding-bottom:4px;word-break:break-all}
.contact-mail:hover,.contact-mail:focus-visible{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.contact-place{display:block;margin-top:34px;font-size:10px;letter-spacing:2px;color:#777}
.monochrome footer a[href^=mailto]:hover{color:var(--accent)}
.monochrome header nav{flex-wrap:wrap}
@media(max-width:700px){.speaking-topics{grid-template-columns:1fr}.speaking-topics li{padding:18px 0;font-size:22px}.contact{padding:60px 25px}.monochrome header nav{gap:10px;font-size:10px;flex-wrap:nowrap}.monochrome header nav a,.monochrome header nav button{white-space:nowrap}footer{flex-wrap:wrap}}

/* Logo: Adinkrahene rings in gold, the inner ring acting as the O of JO. */
.monochrome{--gold:#fff}
.personal-brand{display:flex;align-items:center;gap:14px}
.brand-mark{width:50px;height:50px;flex:none;display:block}
.brand-text{display:block}
/* the header mark stays flat: no glow on hover */

.closing-mark{display:block;width:104px;height:104px;margin:0 auto 6px;--mark-halo:var(--ink-1);--mark-ring:#fff;--mark-letter:#fff}
@media(max-width:700px){.brand-mark{width:42px;height:42px}.personal-brand{gap:12px}.closing-mark{width:88px;height:88px}}

/* About card: the hero portrait travels down the page and lands here (hero-morph.js). Without the script both pictures just sit still. */
.personal-statement{grid-template-columns:minmax(240px,380px) 1fr;grid-template-areas:"k k" "c h" "c t";column-gap:clamp(36px,6vw,80px);align-items:start}
.personal-statement>p{grid-area:k}
.personal-statement>h2{grid-area:h;align-self:end}
.personal-statement>div{grid-area:t}
.about-card,.hero-flyer{box-sizing:border-box;margin:0;background:var(--ink-0);border:1px solid var(--line-light);border-radius:2px;overflow:hidden}
.about-card{grid-area:c;width:100%;aspect-ratio:4/5}
.about-card img,.hero-flyer img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;mask-image:linear-gradient(to right,transparent 0%,#000 10%,#000 90%,transparent 100%),linear-gradient(to bottom,#000 72%,transparent 100%);mask-composite:intersect;-webkit-mask-composite:source-in}
.hero-flyer{position:fixed;left:0;top:0;z-index:30;display:none;pointer-events:none;will-change:transform,width,height;border-radius:var(--r,0);border-color:rgba(217,215,208,var(--e,0));background:rgba(11,11,13,var(--e,0))}
.hero-flyer.on{display:block}
.editorial-hero h1,.hero-kicker,.hero-bottom,.hero-location{opacity:var(--hm,1)}
.editorial-hero.faded .hero-bottom{pointer-events:none}
@media(max-width:800px){.personal-statement{grid-template-columns:1fr;grid-template-areas:"k" "c" "h" "t";row-gap:22px}.about-card{max-width:340px}}
@media(prefers-reduced-motion:reduce){.hero-flyer{display:none!important}}

/* Phone hero fits the visible screen, so "Meet Jacob" and "Enter the library" are on screen when the page opens
   (the old 780px hero pushed them below the fold on an iPhone) and stay above the travelling portrait while they fade. */
.editorial-hero{isolation:auto}
@media(max-width:700px){
 body.monochrome .editorial-hero{height:620px;height:clamp(540px,calc(100svh - 100px),780px)}
 body.monochrome .editorial-hero h1{top:11%;font-size:23vw}
 body.monochrome .hero-person{bottom:0;width:min(88%,calc((100svh - 100px)*.5))}
 body.monochrome .hero-bottom{bottom:44px;z-index:31}
 body.monochrome .hero-location{bottom:16px}
}

/* Design pass: the portrait is placed from the hero height, so the top of the head always has headroom
   (the head starts at 6.5% of the picture; bottom-aligned, head top = hero height * 1.03 - 1.4025 * width). */
.editorial-hero{--hero-h:clamp(650px,56vw,900px);height:var(--hero-h)}
.hero-person{bottom:-3%;width:min(45%,650px,calc((var(--hero-h) * 1.03 - 64px) / 1.4025))}
html body.monochrome .hero-bottom a,html body.monochrome .hero-bottom button,html body.monochrome .coaching-cta{font-size:var(--fs-button);font-weight:600;letter-spacing:.01em;text-transform:none;min-height:48px;padding:13px 26px;display:inline-flex;align-items:center;justify-content:center;text-align:center}
html body.monochrome .hero-bottom p{font-size:.9375rem;line-height:1.7;max-width:280px}
html body.monochrome header nav{font-size:.875rem;gap:clamp(14px,2.2vw,32px)}
@media(min-width:1100px){html body.monochrome header nav{font-size:.9375rem}}
@media(max-width:700px){
 body.monochrome .editorial-hero{--hero-h:clamp(540px,calc(100svh - 100px),780px);height:var(--hero-h)}
 body.monochrome .hero-person{bottom:0;width:min(92%,calc((var(--hero-h) * .89 - 46vw) / 1.4025))}
 body.monochrome .editorial-hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;z-index:3;pointer-events:none;background:linear-gradient(to top,var(--ink-0) 30%,rgba(11,11,13,0))}
 body.monochrome .hero-bottom{flex-direction:column;align-items:stretch;gap:14px;bottom:max(20px,env(safe-area-inset-bottom))}
 body.monochrome .hero-bottom>div{flex-direction:column;gap:12px}
 html body.monochrome .hero-bottom p{max-width:none;font-size:.9375rem}
 html body.monochrome .hero-bottom a,html body.monochrome .hero-bottom button{width:100%}
 body.monochrome .hero-location{display:none}
}
@media(max-height:500px) and (orientation:landscape) and (max-width:900px){
 body.monochrome .hero-kicker{display:none}
 body.monochrome .editorial-hero{--hero-h:max(520px,calc(100svh - 64px))}
 body.monochrome .editorial-hero h1{flex-direction:row;font-size:min(15.2vw,26svh);top:6%;left:3.5%;width:93%}
 body.monochrome .hero-person{width:min(34%,calc((var(--hero-h) * .9) / 1.4025))}
 body.monochrome .hero-bottom{flex-direction:row;align-items:flex-end;justify-content:space-between;bottom:16px}
 body.monochrome .hero-bottom>div{flex-direction:row}
 html body.monochrome .hero-bottom p{max-width:240px}
 html body.monochrome .hero-bottom a,html body.monochrome .hero-bottom button{width:auto}
}
@media(min-width:701px) and (max-width:1099px){.hero-person{width:min(54%,calc((var(--hero-h) * 1.03 - 64px) / 1.4025))}}

/* Phone menu (nav.js): the six links collapse behind a Menu button at 420px and below. */
.nav-toggle{display:none}
@media(max-width:420px){
 .js-nav .nav-toggle{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;background:transparent;border:1px solid rgba(255,255,255,.55);color:#fff;font:600 var(--fs-button)/1 var(--font-sans);cursor:pointer;touch-action:manipulation}
 .js-nav .nav-toggle[aria-expanded=true]{background:#fff;color:var(--ink-0)}
 html body.monochrome header{height:72px;min-height:0;padding:0 5%;position:relative;z-index:60;flex-wrap:nowrap}
 .js-nav body.monochrome header nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:4px 5% 12px;background:var(--ink-1);border-bottom:1px solid var(--line-dark);flex-wrap:nowrap}
 .js-nav.nav-open body.monochrome header nav{display:flex}
 html.js-nav body.monochrome header nav a,html.js-nav body.monochrome header nav button{display:flex;align-items:center;min-height:52px;margin:0;padding:0;font-size:1rem;border-bottom:1px solid var(--line-dark);text-align:left}
 html.js-nav body.monochrome header nav a:last-child{border-bottom:0}
 body.monochrome .editorial-hero{--hero-h:clamp(540px,calc(100svh - 72px),780px)}
}
@media(max-width:420px){html:not(.js-nav) body.monochrome header nav{flex-wrap:wrap;row-gap:0}}
/* Short landscape phones: a larger portrait that still keeps 40px of headroom. */
@media(max-height:500px) and (orientation:landscape) and (max-width:900px){
 body.monochrome .hero-person{bottom:-3%;width:min(46%,calc((var(--hero-h) * 1.03 - 40px) / 1.4025))}
}
/* On the narrowest phones the tagline under the name is dropped so the name and the Menu button fit on one row. */
@media(max-width:380px){body.monochrome .personal-brand small{display:none}}

/* Enquiry buttons go to the form; the address stays as a plain text link. */
.coaching-note>span{color:var(--muted-dark)}
.coaching-mail{display:inline-flex;align-items:center;min-height:44px;color:var(--accent);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.coaching-mail:hover,.coaching-mail:focus-visible{color:var(--cobalt-on-dark-hi)}

/* Touch targets: the shortest nav word (Home) reaches 44px wide without changing the gaps. */
html body.monochrome header nav a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
html body.monochrome header .personal-brand{min-height:44px}

/* Section reveals (reveal.js): only present when the script ran and motion is allowed. */
.js-reveal .reveal{opacity:0;transform:translateY(12px);transition:opacity .4s ease-out,transform .4s ease-out}
.js-reveal .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js-reveal .reveal{opacity:1;transform:none;transition:none}}

/* On tablet-width heroes the short rule under the kicker would touch the top of the J, so it is dropped there. */
@media(min-width:701px) and (max-width:1279px){.hero-kicker:after{display:none}}
@media(max-width:380px){.hero-kicker:after{display:none}}