/* ABOUT — editorial profile page
   Everything here is scoped to .about-page so the rest of the site stays untouched. */
:root{--about-yellow:#d8ff00;--about-bg:#707277;--about-white:#f4f4f1}
.about-page{background:#6f7175;color:var(--about-yellow);min-height:100vh;overflow-x:hidden;overflow-y:auto}
.about-page .site-header{top:5px;left:5px;right:5px;height:25px;padding:0;display:grid;grid-template-columns:30px repeat(3,minmax(0,1fr));align-items:stretch;gap:2px;background:transparent;pointer-events:none}
.about-page .site-header>*{pointer-events:auto}
.about-page .brand{display:grid;place-items:center;background:rgba(112,0,8,.52);border-radius:4px;color:#fff;font-size:10px;line-height:1;overflow:hidden;white-space:nowrap;text-indent:-999px;text-transform:none}
.about-page .brand:before{display:block;content:'✺';text-indent:0;font-size:12px}
.about-page .nav{display:contents}
.about-page .nav a{display:grid;place-items:center;background:rgba(112,0,8,.52);border-radius:4px;color:#fff;font-size:10px;line-height:1;text-transform:uppercase;letter-spacing:.02em;transition:background .25s ease}
.about-page .nav a:hover,.about-page .nav a[aria-current=true]{background:rgba(92,0,6,.85)}
.about-page .menu-toggle{display:none}

.about-shell{position:relative;min-height:100svh;height:100svh;isolation:isolate;background:#74767a}
.about-photo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center center;display:block;filter:saturate(.92) contrast(1.03)}
.about-photo::after{content:""}
.about-vignette{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(35,36,39,.02) 0%,rgba(35,36,39,0) 48%,rgba(35,36,39,.12) 100%),linear-gradient(0deg,rgba(0,0,0,.16),transparent 28%,transparent 72%,rgba(0,0,0,.08))}

.about-logo{position:absolute;left:4.4vw;top:22vh;width:min(31vw,560px);height:auto;z-index:3;display:block}
.about-copy p:last-child{margin-bottom:0}
.about-title{position:absolute;left:4.4vw;top:15.5vh;margin:0;width:36vw;z-index:3;color:var(--about-yellow);font-family:"Bodoni 72",Didot,"Times New Roman",serif;font-weight:700;letter-spacing:-.075em;line-height:.72;text-transform:uppercase}
.about-title small{display:block;font-family:Arial,Helvetica,sans-serif;font-size:clamp(25px,2.7vw,58px);font-weight:500;letter-spacing:-.055em;line-height:.9;margin:0 0 8px 2px}
.about-title strong{display:block;font-size:clamp(115px,13vw,260px);font-weight:700;white-space:nowrap;transform:scaleX(.64);transform-origin:left top;width:155%;margin-bottom:-.02em}
.about-title strong:nth-of-type(2){margin-left:1.7vw}

.about-copy{position:absolute;right:5.3vw;top:34%;width:min(31vw,560px);z-index:3;font-family:Arial,Helvetica,sans-serif;font-size:clamp(13px,1.05vw,20px);line-height:1.06;letter-spacing:-.035em;color:var(--about-yellow)}
.about-copy p{margin:0 0 18px}
.about-copy em{font-style:italic}
.about-copy b{font-weight:700}

.about-credit{position:absolute;right:24px;bottom:18px;font:11px/1 Arial,Helvetica,sans-serif;color:var(--about-yellow);opacity:.9;z-index:3;text-transform:uppercase;letter-spacing:.02em}
.about-back{position:absolute;left:24px;bottom:18px;z-index:3;font:11px/1 Arial,Helvetica,sans-serif;color:var(--about-yellow);text-transform:uppercase}
.about-back:hover,.about-credit:hover{opacity:.65}

.about-page .cursor{background:var(--about-yellow);mix-blend-mode:difference}
.about-page .cursor.active:after{color:#111}

@media(max-width:900px){
  .about-page .site-header{padding:0;top:5px;left:5px;right:5px;height:25px;grid-template-columns:28px repeat(3,minmax(0,1fr));gap:2px}
  .about-page .nav a{font-size:9px}
  .about-page .brand{font-size:9px}

  /* Mobile About: one continuous visual sequence. The photo is the opening frame;
     the biography is layered over that same image and revealed by scroll. */
  .about-shell{height:180svh;min-height:180svh;padding:0;display:block;overflow:visible;position:relative}
  .about-photo{position:sticky;top:0;left:0;width:100%;height:100svh;object-position:52% 17%;z-index:-2}
  .about-vignette{position:sticky;top:0;height:100svh;margin-top:-100svh;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,0) 42%,rgba(0,0,0,.18) 72%,rgba(0,0,0,.52) 100%)}
  .about-logo{position:absolute;left:18px;top:12vh;width:min(68vw,360px);z-index:3;will-change:opacity}
  .about-copy{position:sticky;top:0;box-sizing:border-box;width:100%;height:100svh;margin-top:-100svh;padding:0 18px 18svh;display:flex;flex-direction:column;justify-content:flex-end;z-index:4;font-size:clamp(14px,4.2vw,18px);line-height:1.08;color:var(--about-yellow);opacity:0;transform:translate3d(0,28px,0);will-change:transform,opacity;pointer-events:none}
  .about-copy p{margin:0 0 18px;max-width:100%}
  .about-copy p:last-child{margin-bottom:0}
  .about-back{left:14px;bottom:14px}
  .about-credit{right:14px;bottom:14px}
}
@media(max-width:560px){
  .about-page .nav a:nth-child(3){display:grid}
  .about-title{margin-top:12vh}
  .about-copy{max-width:94%;}
  .about-photo{object-position:52% 17%}
}
@media(prefers-reduced-motion:reduce){.about-page .nav a{transition:none}}


/* Profile details — follows the visual language of the About hero. */
.about-details{background:#6f7175;color:var(--about-yellow);position:relative;z-index:2;border-top:1px solid rgba(216,255,0,.25)}
.about-statement{min-height:44svh;padding:5vw 5.3vw 5vw;display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid rgba(216,255,0,.22)}
.details-label{display:block;font:700 10px/1 Arial,Helvetica,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--about-yellow);margin-bottom:28px}
.about-statement h2{font-family:Arial,Helvetica,sans-serif;font-size:clamp(44px,5.8vw,92px);line-height:.82;letter-spacing:-.075em;font-weight:800;max-width:1350px;margin:0;color:var(--about-yellow)}
.about-experience{padding:34px 5.3vw 8vw}
.experience-heading{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:14px;border-bottom:1px solid rgba(244,244,241,.35)}
.experience-heading .details-label{margin:0}
.experience-count{font:10px/1 Arial,Helvetica,sans-serif;color:var(--about-white);opacity:.75}
.experience-role{display:grid;grid-template-columns:minmax(180px,.65fr) minmax(320px,1.35fr);gap:6vw;padding:54px 0 62px;border-bottom:1px solid rgba(244,244,241,.35)}
.experience-company{font:700 11px/1.1 Arial,Helvetica,sans-serif;text-transform:uppercase;color:var(--about-white);letter-spacing:.01em}
.experience-info h3{font:700 clamp(34px,4.2vw,72px)/.88 Arial,Helvetica,sans-serif;letter-spacing:-.06em;margin:0;color:var(--about-white);max-width:800px}
.experience-date{font:11px/1 Arial,Helvetica,sans-serif;text-transform:uppercase;color:var(--about-yellow);margin:18px 0 0}
.experience-clients{display:grid;grid-template-columns:minmax(180px,.65fr) minmax(320px,1.35fr);gap:6vw;padding:32px 0 10px}
.experience-clients .details-label{margin:0}
.experience-clients p{font:700 clamp(22px,2.3vw,40px)/.95 Arial,Helvetica,sans-serif;letter-spacing:-.045em;color:var(--about-white);margin:0;max-width:900px}
.experience-clients p span{font-weight:400;opacity:.62}

@media(max-width:900px){
  .about-statement{min-height:0;padding:8vw 18px 9vw}
  .about-statement h2{font-size:clamp(38px,9vw,58px);line-height:.86}
  .details-label{font-size:9px;margin-bottom:22px}
  .about-experience{padding:24px 18px 18vw}
  .experience-role,.experience-clients{grid-template-columns:1fr;gap:22px}
  .experience-role{padding:40px 0 44px}
  .experience-info h3{font-size:clamp(32px,9vw,58px)}
  .experience-clients{padding-top:28px}
  .experience-clients p{font-size:clamp(24px,6vw,36px);line-height:.95}
}
@media(max-width:560px){
  .about-statement{min-height:0;padding:9vw 18px 10vw}
  .about-statement h2{font-size:clamp(36px,9vw,52px);line-height:.86}
  .experience-role{gap:18px}
}

/* Forbes article prompt + image overlay. Scoped to About only. */
.about-photo-trigger{position:absolute;inset:0;z-index:2;border:0;padding:0;margin:0;background:transparent;cursor:pointer;color:var(--about-yellow);font:inherit;text-align:left}

.about-article-note-mobile{display:none}

.about-article-note{position:absolute;left:4.4vw;bottom:8.5vh;display:block;max-width:340px;font-family:"Bradley Hand","Segoe Print","Comic Sans MS",cursive;font-size:clamp(18px,1.45vw,28px);font-weight:600;line-height:.95;letter-spacing:-.035em;transform:rotate(-2deg);text-shadow:0 1px 0 rgba(0,0,0,.16);transition:opacity .35s ease,transform .35s ease}
.about-photo-trigger:hover .about-article-note{transform:rotate(-2deg) translateY(-2px)}
.about-article-modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:4vh 4vw;background:rgba(0,0,0,.82);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,visibility .28s ease}
.about-article-modal.is-open{opacity:1;visibility:visible;pointer-events:auto}
.about-article-frame{position:relative;max-width:min(94vw,1100px);max-height:92vh;overflow:auto;background:#fff;box-shadow:0 18px 70px rgba(0,0,0,.45);-webkit-overflow-scrolling:touch}
.about-article-frame img{display:block;width:auto;max-width:100%;height:auto}
.about-article-close{position:fixed;top:18px;right:24px;width:42px;height:42px;border:0;background:transparent;color:#fff;font:400 42px/.9 Arial,sans-serif;cursor:pointer;z-index:1001;padding:0}
.about-article-close:hover{opacity:.65}
.about-photo-trigger:focus-visible,.about-article-close:focus-visible{outline:2px solid var(--about-yellow);outline-offset:4px}
@media(max-width:900px){
  .about-photo-trigger{z-index:2}
  .about-article-note{display:none}
  .about-article-note-mobile{display:block;align-self:flex-start;margin-top:8px;max-width:250px;font-family:"Bradley Hand","Segoe Print","Comic Sans MS",cursive;font-size:clamp(17px,5.2vw,23px);font-weight:600;line-height:.94;letter-spacing:-.035em;transform:rotate(-2deg);text-shadow:0 1px 0 rgba(0,0,0,.16);pointer-events:none;opacity:1}
  .about-article-modal{padding:3vh 10px}
  .about-article-frame{max-width:calc(100vw - 20px);max-height:92vh}
  .about-article-close{top:8px;right:10px;font-size:38px}
}
.about-modal-open{overflow:hidden}
@media(max-width:900px){
  /* The photo itself is the hit area on mobile; the visual layers never block the tap. */
  .about-photo-trigger{z-index:5}
  .about-logo{pointer-events:none}
  .about-article-modal{z-index:10000;padding:3vh 10px}
  .about-article-frame{width:min(calc(100vw - 20px),1100px);max-width:calc(100vw - 20px);max-height:92vh;overflow:auto}
  .about-article-frame img{width:100%;max-width:none;height:auto}
}