/* Lubna Qassim — site styles (draft v2, 17 Oct 2026)
   Palette from her brief: ivory #F5F0E6 · soft black #171612 · burgundy #85433D · taupe #898171 · divider #D5CBBE
   Type: Newsreader (name, headings, quotes, reading text) + Montserrat (navigation, labels, credentials) */
:root{
  --bg:#F5F0E6; --ink:#171612; --acc:#85433D; --taupe:#898171; --rule:#D5CBBE;
  --soft:#4A463D; --band:#ECE3D3; --dark:#171612; --on-dark:#EFE7D8;
  --serif:'Newsreader',Georgia,serif; --sans:'Montserrat',system-ui,sans-serif;
  --wrap:1200px; --gut:64px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--serif);font-weight:300;font-size:19px;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:760px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;background:var(--ink);color:var(--bg);padding:8px 12px;z-index:99}

/* draft ribbon */
.draft{margin:0;background:var(--ink);color:var(--on-dark);font:500 10.5px/1 var(--sans);letter-spacing:1.4px;text-transform:uppercase;text-align:center;padding:8px 12px}

/* header */
.bar{display:flex;align-items:center;gap:30px;padding:20px var(--gut);border-bottom:1px solid var(--rule);position:relative;background:var(--bg)}
.mono{width:42px;height:42px;border:1px solid rgba(23,22,18,.35);display:grid;place-items:center;font:600 16px/1 var(--serif);letter-spacing:.5px;text-decoration:none;color:var(--ink)}
.mono span{transform:translateY(1px)}
nav.main{display:flex;gap:30px;margin-left:auto;font:400 12.5px/1 var(--sans);letter-spacing:1.3px;text-transform:uppercase}
nav.main a{text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
nav.main a:hover{border-bottom-color:var(--rule)}
nav.main a.on{border-bottom-color:var(--acc)}
.menu{display:none;margin-left:auto;font:500 11px/1 var(--sans);letter-spacing:1.6px;text-transform:uppercase;background:none;border:1px solid rgba(23,22,18,.3);padding:11px 14px;color:var(--ink);cursor:pointer}

/* shared type */
.eyebrow{font:500 12px/1.4 var(--sans);letter-spacing:1.5px;text-transform:uppercase;color:var(--taupe);margin:0 0 14px}
.label{font:600 11.5px/1.4 var(--sans);letter-spacing:1.5px;text-transform:uppercase;color:var(--acc);margin:0 0 10px}
.pagehead{padding:72px 0 36px}
.pagehead h1{font-family:var(--serif);font-weight:600;font-size:64px;line-height:1;letter-spacing:-.015em;margin:0 0 16px}
.pagehead .sub{font-style:italic;font-size:23px;line-height:1.4;color:var(--soft);margin:0;max-width:34em}
.pagehead .lede{font-size:21px;line-height:1.6;color:var(--soft);margin:22px 0 0;max-width:36em}
.rule{height:1px;background:var(--rule);border:0;margin:0}
.short{display:block;width:48px;height:2px;background:var(--acc);margin:0 0 22px}
.prose p{margin:0 0 1.15em}
.prose p.big{font-size:23px;line-height:1.55;color:var(--ink)}
.textlink{font:500 12px/1 var(--sans);letter-spacing:1.5px;text-transform:uppercase;color:var(--acc);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px;display:inline-block}
.btn{display:inline-block;font:500 11.5px/1 var(--sans);letter-spacing:1.6px;text-transform:uppercase;padding:16px 26px;background:var(--acc);color:#fff;text-decoration:none;border:0;cursor:pointer}
.btn:hover{background:#6f3631}
section{scroll-margin-top:20px}

/* HOME */
.home .hero{display:grid;grid-template-columns:1.2fr .8fr;gap:64px;align-items:center;padding:40px var(--gut) 56px;max-width:1360px;margin:0 auto}
.home h1{font-family:var(--serif);font-weight:600;font-size:80px;line-height:.98;letter-spacing:-.02em;margin:0 0 18px}
.home .cred{font:600 12.5px/1.8 var(--sans);letter-spacing:1.2px;text-transform:uppercase;color:var(--acc);margin:0}
.home .sep{height:1px;background:var(--rule);margin:22px 0;max-width:560px}
.home .head{font-family:var(--serif);font-weight:400;font-size:38px;line-height:1.16;margin:0 0 16px;max-width:15em;text-wrap:balance}
.home .adv{font:400 18.5px/1.65 var(--sans);color:var(--soft);margin:0 0 26px;max-width:32em}
.home .quote{font-family:var(--serif);font-style:italic;font-weight:300;font-size:27px;line-height:1.35;margin:0 0 26px;max-width:19em;text-wrap:balance}
.nw{white-space:nowrap}
.home .ph{overflow:hidden;height:min(660px,calc(100vh - 150px));min-height:520px;position:relative;z-index:2}
.home .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 16%}
.intro .ph{transition:transform 1.5s cubic-bezier(.6,0,.2,1)}
.intro .ph img{transition:transform 3.6s cubic-bezier(.2,0,.2,1),opacity 1.4s ease}
.intro .seq{opacity:0;transform:translateY(10px)}
.intro.lift .seq{transition:opacity 1s ease,transform 1s ease;opacity:1;transform:none;transition-delay:var(--d,0s)}

/* PROFILE */
.profile .figure{margin:8px 0 48px}
.profile .figure img{width:100%;max-height:560px;object-fit:cover;object-position:70% 35%}
.profile .prose{max-width:740px}

/* ADVISORY */
.minister{max-width:900px;padding:8px 0 8px}
.minister p{font-family:var(--serif);font-style:italic;font-weight:300;font-size:30px;line-height:1.35;margin:0;text-wrap:balance}
.mapband{margin:0;padding:44px 0 40px;border-bottom:1px solid var(--rule)}
.mapband svg{display:block;width:100%;height:auto}
.area{display:grid;grid-template-columns:200px 1fr;gap:48px;padding:52px 0;border-bottom:1px solid var(--rule)}
.area .num{font:600 12px/1 var(--sans);letter-spacing:2px;color:var(--acc);padding-top:12px}
.area h2{font-family:var(--serif);font-weight:600;font-size:34px;line-height:1.15;margin:0 0 14px}
.area .intro-line{font-size:20px;line-height:1.6;color:var(--soft);margin:0 0 18px;max-width:38em}
.area ul{list-style:none;margin:0;padding:0;columns:2;column-gap:44px}
.area li{break-inside:avoid;padding:9px 0 9px 20px;position:relative;font-size:17.5px;line-height:1.5}
.area li::before{content:'';position:absolute;left:0;top:19px;width:8px;height:1px;background:var(--acc)}
.area .committees{font:500 11.5px/1.8 var(--sans);letter-spacing:1.2px;text-transform:uppercase;color:var(--taupe);margin:16px 0 0}
.closing{background:var(--band);padding:96px var(--gut);text-align:center;margin-top:72px}
.closing h2{font-family:var(--serif);font-weight:600;font-size:46px;line-height:1.1;margin:0 0 16px}
.closing p{font-size:20px;color:var(--soft);margin:0 0 32px}

/* SPEAKING */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.speaking .ph img{width:100%;max-height:620px;object-fit:cover;object-position:50% 20%}
.topics{display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px;margin-top:24px}
.topic{padding:30px 0;border-top:1px solid var(--rule)}
.topic .n{font:600 11.5px/1 var(--sans);letter-spacing:2px;color:var(--acc);margin:0 0 12px}
.topic h3{font-family:var(--serif);font-weight:600;font-size:24px;line-height:1.25;margin:0 0 10px}
.topic p{font-size:17.5px;line-height:1.6;color:var(--soft);margin:0}
.formats{font:500 12px/2 var(--sans);letter-spacing:1.4px;text-transform:uppercase;color:var(--soft);padding:26px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:48px 0 0}

/* WRITING */
.latest{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:center;padding:48px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.latest img{box-shadow:0 18px 40px -18px rgba(23,22,18,.35)}
.latest h3{font-family:var(--serif);font-weight:600;font-size:34px;line-height:1.15;margin:0 0 10px}
.meta{font:500 11.5px/1.6 var(--sans);letter-spacing:1.3px;text-transform:uppercase;color:var(--taupe);margin:0 0 16px}
.books{display:grid;grid-template-columns:repeat(2,1fr);gap:56px;padding:20px 0 8px}
.book{display:grid;grid-template-columns:150px 1fr;gap:26px;align-items:start}
.book img{box-shadow:0 14px 30px -16px rgba(23,22,18,.4)}
.book h3{font-family:var(--serif);font-weight:600;font-size:22px;line-height:1.3;margin:0 0 8px}
.list{list-style:none;margin:0;padding:0}
.list li{display:grid;grid-template-columns:80px 1fr;gap:24px;padding:20px 0;border-top:1px solid var(--rule)}
.list .yr{font:600 12px/1.9 var(--sans);letter-spacing:1.5px;color:var(--acc)}
.list a.t{font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.35;text-decoration:none}
.list a.t:hover{text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:4px}
.list .o{display:block;font:400 13px/1.6 var(--sans);color:var(--taupe);margin-top:4px}
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin:76px 0 18px}
.sechead h2{font-family:var(--serif);font-weight:600;font-size:36px;line-height:1.1;margin:0}
.sechead p{font-style:italic;color:var(--soft);margin:0;font-size:18px}
.persp{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px}
.persp article{padding:28px 0;border-top:1px solid var(--rule)}
.persp h3{font-family:var(--serif);font-weight:600;font-size:23px;line-height:1.3;margin:6px 0 10px}
.persp p{font-size:17px;color:var(--soft);margin:0}

/* MENTORSHIP */
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:0 44px;margin-top:20px}
.offer{padding:30px 0;border-top:1px solid var(--rule)}
.offer h3{font-family:var(--serif);font-weight:600;font-size:23px;line-height:1.3;margin:0 0 10px}
.offer p{font-size:17.5px;color:var(--soft);margin:0}
.videowrap{display:grid;grid-template-columns:340px 1fr;gap:56px;align-items:center;padding:56px 0;border-top:1px solid var(--rule)}
.videowrap video{width:100%;aspect-ratio:9/16;background:#000;object-fit:cover}
.cap{font:500 11.5px/1.7 var(--sans);letter-spacing:1.2px;text-transform:uppercase;color:var(--taupe);margin:14px 0 0}
.pledge{background:var(--band);padding:44px 48px;margin:48px 0 0}
.pledge p{margin:0;font-size:20px}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start;padding:24px 0 80px}
.contact-grid .ph img{width:100%;height:640px;object-fit:cover;object-position:62% 30%}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
form label{display:block;font:500 11px/1 var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--taupe);margin:22px 0 8px}
form input,form select,form textarea{width:100%;font:400 17px/1.4 var(--sans);color:var(--ink);background:transparent;border:0;border-bottom:1px solid rgba(23,22,18,.35);padding:8px 0;border-radius:0}
form textarea{min-height:120px;resize:vertical}
form input:focus,form select:focus,form textarea:focus{outline:none;border-bottom-color:var(--acc)}
form .btn{margin-top:30px}
.formnote{font:400 13px/1.6 var(--sans);color:var(--taupe);margin:16px 0 0}

/* RECOGNITION BAND (profile) */
.recband{background:var(--acc);color:#F6EEE6;padding:72px 0 64px;margin-top:80px;overflow:hidden}
.recband .eyebrow{color:rgba(246,238,230,.75)}
.recband h2{font-family:var(--serif);font-weight:500;font-size:40px;margin:0 0 30px}
.slider{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;--pl:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));padding:4px var(--pl) 18px;scroll-padding-left:var(--pl);scrollbar-width:thin;scrollbar-color:rgba(246,238,230,.4) transparent}
.slider .card{flex:0 0 300px;scroll-snap-align:start;border-top:1px solid rgba(246,238,230,.45);padding:22px 0 0}
.slider .yr{font:600 11.5px/1 var(--sans);letter-spacing:2px;color:rgba(246,238,230,.75);margin:0 0 12px}
.slider h3{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.3;margin:0 0 8px;color:#fff}
.slider p{font:400 14px/1.6 var(--sans);color:rgba(246,238,230,.82);margin:0}
.sliderctl{display:flex;gap:10px;justify-content:flex-end;padding:0 var(--gut);margin-top:-6px}
.sliderctl button{width:42px;height:42px;border:1px solid rgba(246,238,230,.5);background:none;color:#fff;font-size:18px;cursor:pointer}

/* FOOTER */
.follow{background:var(--band);padding:56px var(--gut);text-align:center}
.follow p{font-style:italic;font-size:22px;margin:0 0 20px;color:var(--soft)}
.social{display:flex;gap:14px;justify-content:center}
.social a{width:46px;height:46px;border:1px solid rgba(23,22,18,.3);display:grid;place-items:center;text-decoration:none;color:var(--ink)}
.social a:hover{background:var(--acc);border-color:var(--acc);color:#fff}
.social svg{width:18px;height:18px;fill:currentColor}
footer.foot{background:var(--dark);color:var(--on-dark);padding:36px var(--gut)}
.foot .in{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.foot .name{font:400 18px/1 var(--serif);margin-right:auto}
.foot nav{display:flex;gap:24px;flex-wrap:wrap;font:400 11.5px/1 var(--sans);letter-spacing:1.3px;text-transform:uppercase}
.foot nav a{text-decoration:none;color:var(--on-dark)}
.foot small{display:block;width:100%;font:400 12px/1.6 var(--sans);color:rgba(239,231,216,.55);margin-top:18px}

/* responsive */
@media (max-width:1100px){
  :root{--gut:40px}
  nav.main{gap:20px;font-size:11.5px}
  .home .hero{gap:40px}.home h1{font-size:68px}.home .head{font-size:33px}
}
@media (max-width:860px){
  :root{--gut:20px}
  body{font-size:18px}
  .menu{display:block}
  nav.main{display:none;position:absolute;left:0;right:0;top:100%;z-index:30;background:var(--bg);flex-direction:column;gap:0;padding:6px var(--gut) 16px;border-bottom:1px solid var(--rule);font-size:13px}
  nav.main.open{display:flex}
  nav.main a{padding:15px 0;border-bottom:1px solid rgba(23,22,18,.08)}
  nav.main a.on{border-bottom-color:rgba(23,22,18,.08);color:var(--acc)}
  .home .hero{grid-template-columns:1fr;gap:26px;padding:18px var(--gut) 44px}
  .home .ph{order:-1;height:58vh;min-height:0}
  .home h1{font-size:50px}.home .cred{font-size:10.5px;letter-spacing:.7px}
  .home .head{font-size:30px}.home .adv{font-size:17px}.home .quote{font-size:23px}
  .pagehead{padding:44px 0 26px}.pagehead h1{font-size:42px}.pagehead .sub{font-size:19px}.pagehead .lede{font-size:18.5px}
  .minister p{font-size:23px}
  .area{grid-template-columns:1fr;gap:6px;padding:38px 0}.area .num{padding-top:0}.area h2{font-size:27px}.area ul{columns:1}
  .closing{padding:64px var(--gut)}.closing h2{font-size:32px}
  .split,.contact-grid,.latest,.videowrap{grid-template-columns:1fr;gap:30px}
  .topics,.offers,.persp,.books{grid-template-columns:1fr}
  .book{grid-template-columns:110px 1fr}
  .latest{padding:34px 0}.latest img{max-width:240px}
  .videowrap video{max-width:320px}
  .contact-grid .ph img{height:360px}
  form .row{grid-template-columns:1fr;gap:0}
  .sechead{flex-direction:column;gap:6px;margin-top:56px}.sechead h2{font-size:30px}
  .list li{grid-template-columns:1fr;gap:4px}
  .recband h2{font-size:30px}.slider .card{flex-basis:260px}
  .pledge{padding:30px 24px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.intro .seq{opacity:1;transform:none}}
/* map labels on phones */
@media (max-width:860px){.mapband .ink .lbl{font-size:62px;letter-spacing:4px;stroke-width:14px}.mapband .dot{r:13px}.mapband .ring{r:26px;stroke-width:4}.mapband .ripple{r:26px;stroke-width:4}.mapband .glow{r:60px}.mapband .route{stroke-width:6}}

/* map sits on the page colour, not its own panel */
.mapband .ink .bg{fill:var(--bg)}.mapband .ink .land{fill:#E6DCC9}

/* ===== 17-oct (2) refinements from her review ===== */
/* oxblood text is always bold */
.label,.home .cred,.textlink,.area .num,.topic .n,.list .yr{font-weight:600}
/* HOME: one credentials line, bolder + bigger headline and quote, Start a Conversation back */
.home .cred{font-size:13px;letter-spacing:1.3px;line-height:1.75}
.home .head{font-weight:600;font-size:44px;line-height:1.12;max-width:14.5em}
.home .adv{font-size:19px}
.home .quote{font-weight:500;font-size:33px;line-height:1.3;max-width:17em}
.home .ctas{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.home .h1gap{margin-bottom:14px}
/* PROFILE: oxblood bold eyebrow with more air before the title; opening paragraphs carry weight */
.profile .pagehead .eyebrow{color:var(--acc);font-weight:600;font-size:12.5px;margin-bottom:24px}
.profile .prose p.big{font-weight:500}
.profile .prose p.big + p{color:var(--acc);font-size:21px;line-height:1.6;font-weight:400}
/* ADVISORY: the minister line in bold oxblood; closing panel on burgundy */
.minister p{color:var(--acc);font-weight:500;font-size:32px}
.advisory .closing{background:var(--acc);color:#F6EEE6}
.advisory .closing h2{color:#fff}.advisory .closing p{color:rgba(246,238,230,.85)}
.btn-light,.advisory .closing .btn{background:#F6EEE6;color:var(--acc)}
.btn-light:hover,.advisory .closing .btn:hover{background:#fff}
/* MENTORSHIP: the personal approach on a dark band */
.band-dark{background:var(--dark);color:var(--on-dark);margin-top:64px}
.band-dark .videowrap{border-top:0;padding:80px 0}
.band-dark .label{color:#D9A79F}
.band-dark .prose p,.band-dark .prose p.big{color:var(--on-dark)}
.band-dark .cap{color:rgba(239,231,216,.6)}
@media (max-width:1100px){.home .head{font-size:38px}.home .quote{font-size:29px}}
@media (max-width:860px){
  .home .cred{font-size:11px;letter-spacing:.8px}
  .home .head{font-size:33px}.home .quote{font-size:26px}.home .adv{font-size:17.5px}
  .minister p{font-size:25px}
  .band-dark .videowrap{padding:56px 0}
}
/* first screen must hold everything down to the buttons (1280×800) */
@media (min-width:861px){
  .home .hero{padding-top:26px;padding-bottom:40px}
  .home h1{font-size:74px;margin-bottom:14px}
  .home .sep{margin:16px 0}
  .home .head{font-size:42px;margin-bottom:12px}
  .home .adv{margin-bottom:18px}
  .home .quote{font-size:31px;margin-bottom:22px}
}
@media (min-width:861px) and (max-height:820px){
  .home h1{font-size:66px}.home .head{font-size:38px}.home .quote{font-size:28px}.home .adv{font-size:18px}
}

/* ===== Advisory brief of 17 Oct (2) ===== */
.advisory .sub-strong{font-style:normal;font-weight:600;color:var(--acc);font-size:24px;line-height:1.35}
.advisory .lede-strong{color:var(--ink);font-size:23px;line-height:1.55;font-weight:400;max-width:34em}
/* the map carries the routes; the names sit beneath it as a quiet sequence that lights in step */
.mapband .lbl{display:none}
.cityseq{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.cityseq li{font:500 11.5px/1 var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--taupe);border:1px solid var(--rule);padding:10px 14px;transition:color .6s ease,border-color .6s ease,background .6s ease}
.cityseq li.on{color:var(--acc);border-color:var(--acc);font-weight:600}
.quoteblock{margin:64px auto 56px;max-width:860px;padding:0 0 0 28px;border-left:2px solid var(--acc)}
.quoteblock blockquote{margin:0;font-family:var(--serif);font-style:italic;font-weight:500;font-size:31px;line-height:1.38;color:var(--acc);text-wrap:balance}
.quoteblock figcaption{margin-top:20px;text-align:right;font-family:var(--serif);font-size:19px;font-weight:400;color:#6E675B;letter-spacing:.3px}
.quoteblock figcaption::before{content:'— '}
/* expandable areas */
.areas{border-top:1px solid var(--rule)}
details.area{display:block;padding:0;border-bottom:1px solid var(--rule)}
details.area summary{list-style:none;display:grid;grid-template-columns:64px 1fr 40px;align-items:center;gap:20px;padding:28px 0;cursor:pointer}
details.area summary::-webkit-details-marker{display:none}
details.area .num{display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--acc);color:var(--acc);font:600 14px/1 var(--sans);letter-spacing:1px;padding:0}
details.area[open] .num{background:var(--acc);color:#fff}
details.area summary h2{margin:0;font-size:30px}
details.area summary:hover h2{color:var(--acc)}
details.area .ind{position:relative;width:22px;height:22px;justify-self:end}
details.area .ind::before,details.area .ind::after{content:'';position:absolute;left:0;right:0;top:50%;height:2px;background:var(--acc);transition:transform .25s ease}
details.area .ind::after{transform:rotate(90deg)}
details.area[open] .ind::after{transform:rotate(0)}
details.area .body{padding:0 0 36px 84px;max-width:960px}
/* one consistent reading face for intro, bullets and committee line */
details.area .intro-line,details.area li{font-family:var(--serif);font-size:19px;line-height:1.6;color:var(--soft)}
details.area .intro-line{color:var(--ink)}
details.area li{padding:7px 0 7px 22px}
details.area li::before{top:20px}
details.area .committees{font-family:var(--serif);font-style:italic;font-size:18px;letter-spacing:0;text-transform:none;color:var(--soft);margin-top:14px}
summary:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
@media (max-width:860px){
  .advisory .sub-strong{font-size:20px}.advisory .lede-strong{font-size:19px}
  .cityseq{gap:7px}.cityseq li{font-size:10px;letter-spacing:1px;padding:8px 10px}
  .quoteblock{margin:44px 0 40px;padding-left:18px}.quoteblock blockquote{font-size:23px}
  details.area summary{grid-template-columns:44px 1fr 24px;gap:14px;padding:22px 0}
  details.area .num{width:40px;height:40px;font-size:12px}
  details.area summary h2{font-size:22px;line-height:1.25}
  details.area .body{padding:0 0 28px 0}
  details.area .intro-line,details.area li{font-size:17.5px}
}
details.area[open] summary h2{color:var(--acc)}

/* ===== 17-oct (3) ===== */
.quoteblock figcaption::before{content:none}
.contact-grid.solo{grid-template-columns:1fr;max-width:760px}
.mentor-intro .prose{max-width:760px}
/* Writing: editorial lists */
.writing2 .feature{display:grid;grid-template-columns:260px 1fr;gap:48px;align-items:center;padding:34px 0 38px;border-top:1px solid var(--rule)}
.writing2 .feature img{box-shadow:0 18px 40px -18px rgba(23,22,18,.35)}
.writing2 .feature h3{font-family:var(--serif);font-weight:600;font-size:36px;line-height:1.15;margin:0 0 12px}
.elist{list-style:none;margin:0;padding:0}
.elist li{padding:22px 0;border-top:1px solid var(--rule)}
.elist a.t{display:block;font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.35;text-decoration:none;color:var(--ink)}
.elist a.t:hover{color:var(--acc)}
.elist .d{display:block;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--soft);margin-top:4px}
.elist .o{display:block;font:500 12px/1.6 var(--sans);letter-spacing:1px;text-transform:uppercase;color:var(--taupe);margin-top:8px}
.elist .more{display:inline-block;margin-top:10px;font:600 11.5px/1 var(--sans);letter-spacing:1.4px;text-transform:uppercase;color:var(--acc);text-decoration:none}
.secintro{font-size:19px;line-height:1.6;color:var(--soft);max-width:40em;margin:-4px 0 14px}
.bks{display:grid;grid-template-columns:repeat(2,1fr);gap:56px;padding-top:24px;border-top:1px solid var(--rule)}
.bk{margin:0}
.bk img{width:220px;aspect-ratio:3/4;object-fit:cover;box-shadow:0 16px 34px -16px rgba(23,22,18,.4);margin-bottom:22px}
.bk h3{font-family:var(--serif);font-weight:600;font-size:22px;line-height:1.3;margin:0 0 8px;max-width:20em}
.bk .aff{font-size:16.5px;color:var(--soft);margin:0}
.moreblock{border-top:1px solid var(--rule)}
.moreblock summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:22px 0;font:600 12px/1 var(--sans);letter-spacing:1.5px;text-transform:uppercase;color:var(--acc)}
.moreblock summary::-webkit-details-marker{display:none}
.moreblock .ind{position:relative;width:18px;height:18px}
.moreblock .ind::before,.moreblock .ind::after{content:'';position:absolute;left:0;right:0;top:50%;height:2px;background:var(--acc);transition:transform .25s}
.moreblock .ind::after{transform:rotate(90deg)}.moreblock[open] .ind::after{transform:rotate(0)}
.cites{margin-top:64px;padding:26px 30px;background:var(--band)}
.cites p{margin:0;font-size:17px;color:var(--soft)}.cites .label{margin-bottom:8px}
.cites a{color:var(--ink)}
@media (max-width:860px){
  .writing2 .feature{grid-template-columns:1fr;gap:22px}.writing2 .feature img{max-width:220px}
  .writing2 .feature h3{font-size:28px}
  .bks{grid-template-columns:1fr;gap:40px}
  .elist a.t{font-size:19.5px}
}

/* ===== 17-oct (4): one rule on every page — the subtitle and the opening words carry the burgundy ===== */
img{height:auto}
.pagehead .sub{font-style:normal;font-weight:600;color:var(--acc);font-size:26px;line-height:1.35}
.pagehead .lede{color:var(--acc);font-weight:500;font-size:22px}
.prose p.big{color:var(--acc);font-weight:500}
.profile .prose p.big + p{color:var(--soft);font-size:inherit;line-height:inherit;font-weight:300}
.speaking .prose.big{color:var(--acc)!important;font-weight:500}
.statement{max-width:40em;font-size:21px;line-height:1.6;color:var(--acc);font-weight:500;margin:28px 0 0}
.band-dark .prose p.big{color:#E9C9C3}
/* photographs keep their own shape on phones (no tall crops) */
.profile .figure img{max-height:560px;object-fit:cover}
@media (max-width:860px){.profile .figure img{max-height:none}.speaking .ph img{max-height:none!important}}
/* recognition: a slow, continuous slide, as on Sheikha Shamma's site; pauses on hover or touch */
.recband .slider{overflow:hidden;scroll-snap-type:none;padding-left:0;padding-right:0}
.recband .track{display:flex;gap:22px;width:max-content;animation:recslide 45s linear infinite;padding-left:var(--pl)}
.recband .slider:hover .track,.recband .slider:active .track{animation-play-state:paused}
@keyframes recslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.recband .track{animation:none}.recband .slider{overflow-x:auto}}
@media (max-width:860px){.pagehead .sub{font-size:21px}.pagehead .lede{font-size:19px}.recband .track{animation-duration:35s}}

/* =====================================================================
   ONE TYPOGRAPHIC SYSTEM FOR EVERY PAGE (17 Oct, her note: "the pages need to feel seamless")
   Reading text  Newsreader 400 · 20px  · charcoal
   Opening line  Newsreader 500 · 23px  · burgundy   (the Profile opening she likes)
   Subtitle      Newsreader 600 · 26px  · burgundy
   Section title Newsreader 600 · 34px  · ink        Card title Newsreader 600 · 24px · ink
   Labels/meta   Montserrat 600 · 12px  · caps
   ===================================================================== */
:root{--read:#3A352D}
body{font-weight:400}
.prose p,.topic p,.offer p,details.area li,details.area .intro-line,.elist .d,.secintro,.bk .aff,.recphotos p,
.closing p,.home .adv,.cites p,.book p,.latest p,.persp p,.band-dark .prose p{
  font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.65;color:var(--read)}
.home .adv{font-family:var(--serif);font-size:21px}
details.area .intro-line{color:var(--ink)}
.prose p.big,.pagehead .lede,.speaking .prose.big,.statement,.profile .prose p.big{
  font-family:var(--serif);font-weight:500;font-size:23px;line-height:1.55;color:var(--acc)!important}
.profile .prose p.big + p{font-weight:500!important;color:var(--ink)!important;font-size:20px!important}
.pagehead .sub,.advisory .sub-strong{font-family:var(--serif);font-style:normal;font-weight:600;font-size:26px;line-height:1.35;color:var(--acc)}
.sechead h2,details.area summary h2,.closing h2,.recband h2{font-family:var(--serif);font-weight:600;font-size:34px;line-height:1.15}
.topic h3,.offer h3,.bk h3,.recphotos h3,.vcard h3,.persp h3,.book h3,.writing2 .feature h3{font-family:var(--serif);font-weight:600;font-size:24px;line-height:1.3}
.writing2 .feature h3{font-size:30px}
.elist a.t{font-size:22px;font-weight:500}
.closing p{color:inherit}
.band-dark .prose p{color:var(--on-dark)}
.band-dark .prose p.big{color:#E9C9C3!important}
.advisory .closing p{color:rgba(246,238,230,.88)}
@media (max-width:860px){
  .prose p,.topic p,.offer p,details.area li,details.area .intro-line,.elist .d,.secintro,.bk .aff,.recphotos p,.closing p,.home .adv,.cites p,.book p,.band-dark .prose p{font-size:18.5px}
  .prose p.big,.pagehead .lede,.speaking .prose.big,.statement,.profile .prose p.big{font-size:21px}
  .profile .prose p.big + p{font-size:18.5px!important}
  .pagehead .sub,.advisory .sub-strong{font-size:21px}
  .sechead h2,details.area summary h2,.closing h2,.recband h2{font-size:27px}
  .topic h3,.offer h3,.bk h3,.recphotos h3,.vcard h3{font-size:21px}
  .elist a.t{font-size:19.5px}
}
/* Recognition page */
.recphotos{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:64px}
.recphotos figure{margin:0}
.recphotos img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 30%}
.recphotos figcaption{padding-top:20px}
.recphotos h3{margin:0 0 10px}
@media (max-width:860px){.recphotos{grid-template-columns:1fr;gap:44px;margin-top:44px}}
/* Speaking: videos on a strip */
.videos{margin-top:72px}
.vstrip{overflow-x:auto;padding:0 var(--pl,var(--gut)) 10px;--pl:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)))}
.vtrack{display:flex;gap:28px;width:max-content}
.vstrip.moving{overflow:hidden}.vstrip.moving .vtrack{animation:recslide 60s linear infinite}
.vstrip.moving:hover .vtrack{animation-play-state:paused}
.vcard{margin:0;width:min(520px,82vw)}
.vplay{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;background:#000;cursor:pointer;overflow:hidden}
.vplay img{width:100%;height:100%;object-fit:cover;opacity:.92;transition:opacity .3s}
.vplay:hover img{opacity:1}
.vplay .pi{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:rgba(133,67,61,.92)}
.vplay .pi::after{content:'';position:absolute;left:27px;top:21px;border-left:20px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent}
.vcard iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.vcard figcaption{padding-top:16px}.vcard h3{margin:0 0 6px}
details.area .committees{font-family:var(--serif);font-style:italic;font-weight:400;font-size:20px;line-height:1.6;color:var(--read)}
.slider p{font-family:var(--serif);font-size:17px;line-height:1.55;color:rgba(246,238,230,.88)}
@media (max-width:860px){details.area .committees{font-size:18.5px}}
.recphotos p.meta{font:500 11.5px/1.6 var(--sans)!important;letter-spacing:1.3px;text-transform:uppercase;color:var(--taupe)!important;margin-top:12px}
.slider h3 a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}.slider h3 a:hover{border-bottom-color:#fff}
.writing2 .feature .cover img{width:100%;max-width:260px}
.videos{margin-top:56px;padding-top:40px;border-top:1px solid var(--rule)}
.vcard h3{font-size:30px!important;line-height:1.2}@media (max-width:860px){.vcard h3{font-size:24px!important}}
.vcard video{display:block;width:100%;aspect-ratio:16/9;background:#000;object-fit:cover}
.vcard h3{font-size:24px!important;line-height:1.3}
.recvideo{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:48px;align-items:center;margin-top:64px;padding-top:56px;border-top:1px solid var(--rule)}
.recvideo figure{margin:0}.recvideo video{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#000}
.recvideo h3{font-family:var(--serif);font-weight:600;font-size:24px;margin:0 0 12px}
.recvideo p{font-family:var(--serif);font-size:20px;line-height:1.65;color:var(--read);margin:0 0 12px}
.recvideo p.meta{font:500 11.5px/1.6 var(--sans);letter-spacing:1.3px;text-transform:uppercase;color:var(--taupe)}
.recvideo .links{display:flex;gap:24px;flex-wrap:wrap;margin-top:18px}
@media (max-width:860px){.recvideo{grid-template-columns:1fr;gap:24px}.recvideo p{font-size:18.5px}.vcard h3{font-size:21px!important}}
/* video strip: glides from one video to the next; stops for good once the visitor touches it or plays a video */
.vstrip.moving{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--pl);scrollbar-width:thin}
.vstrip.moving .vtrack{animation:none}
.vstrip .vcard{scroll-snap-align:start}
.selnote{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.6;color:var(--read);max-width:40em;margin:56px 0 8px}
@media (max-width:860px){.selnote{font-size:18.5px;margin-top:40px}}

/* ── 19 Oct: homepage hierarchy (identity, positioning, invitation; perspective after) ── */
.home .cred{color:var(--acc);font-weight:600}
.home .cred2{font:500 11.5px/1.7 var(--sans);letter-spacing:1.2px;text-transform:uppercase;color:var(--taupe,#898171);margin:6px 0 0}
.home .adv{margin-bottom:28px}
.home .perspective{max-width:1000px;margin:0 auto;padding:64px var(--gut) 84px;text-align:center;border-top:1px solid var(--rule)}
.home .perspective .label{margin:0 0 18px;color:var(--taupe,#898171)}
.home .perspective blockquote{margin:0 auto;max-width:24em;font-family:var(--serif);font-style:italic;font-weight:500;font-size:33px;line-height:1.32;color:var(--acc);text-wrap:balance}
@media (max-width:860px){
  .home .ph{height:42vh}
  .home .cred2{font-size:10px;letter-spacing:.7px}
  .home .perspective{padding:44px var(--gut) 56px}
  .home .perspective blockquote{font-size:24px}
}
/* quieter footer: name + three text links */
footer.foot{padding:30px var(--gut)}
.foot small{margin-top:14px}

/* Profile side photo in black and white (distinct from the colour homepage portrait) */
.figure.bw img{filter:grayscale(1) contrast(1.04)}

/* Speaking: Helsinki photo */
.helsinki{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:44px;align-items:center;margin:64px 0 8px}
.helsinki img{width:100%;max-height:500px;object-fit:cover;object-position:50% 30%}
.helsinki .label{margin:0 0 14px}
.helsinki blockquote{margin:0 0 18px;font-family:var(--serif);font-style:italic;font-weight:500;font-size:27px;line-height:1.35;color:var(--acc);text-wrap:balance}
.helsinki .hcap{text-transform:none;letter-spacing:0;margin:0;font-family:var(--serif);font-size:19px;line-height:1.6;color:var(--read,#3A352D)}
@media (max-width:860px){.helsinki{grid-template-columns:1fr;gap:22px;margin-top:44px}.helsinki img{max-height:420px}.helsinki blockquote{font-size:22px}.helsinki .hcap{text-transform:none;letter-spacing:0;font-size:17.5px}}

/* Speaking: what audiences say (no names, sliding like a news line, pauses on hover) */
.remarks{padding:72px 0 64px;overflow:hidden}
.remarks .label{margin:0 0 24px}
.rslider{overflow:hidden}
.rtrack{display:flex;gap:22px;width:max-content;animation:recslide 80s linear infinite;padding-left:var(--gut)}
.rslider:hover .rtrack,.rslider:active .rtrack{animation-play-state:paused}
.remark{flex:0 0 380px;margin:0;background:#FBF8F2;border:1px solid var(--rule);border-top:2px solid var(--acc);padding:28px 28px 24px;display:flex;flex-direction:column;justify-content:space-between}
.remark blockquote{margin:0 0 20px;font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.5;color:var(--ink)}
.remark figcaption{font:600 11px/1.5 var(--sans);letter-spacing:1.2px;text-transform:uppercase;color:var(--acc)}
@media (prefers-reduced-motion:reduce){.rtrack{animation:none}.rslider{overflow-x:auto}}
@media (max-width:860px){.remark{flex-basis:290px;padding:22px}.remark blockquote{font-size:18px}.rtrack{animation-duration:65s}.remarks{padding:52px 0 44px}}

/* 19 Oct (2): both credential lines in the same burgundy; the second stays a touch lighter and smaller */
.home .cred2{color:var(--acc);font-weight:500}
/* buttons now close the Perspective section */
.home .perspective .ctas{justify-content:center;margin-top:40px}
.home .perspective{padding-bottom:76px}
@media (max-width:860px){.home .perspective .ctas{flex-direction:column;gap:22px;margin-top:32px}}
/* initials under each remark */
.remark figcaption{letter-spacing:2px}

/* 19 Oct (3): Perspective quote, one sentence per block, small signature, even spacing */
.home .perspective{padding:64px var(--gut) 72px}
.home .perspective .label{margin:0 0 26px}
.home .perspective .pq{margin:0}
.home .perspective blockquote{max-width:30em}
.home .perspective blockquote span{display:block;text-wrap:balance}
.home .perspective blockquote span+span{margin-top:.15em}
.home .perspective figcaption{margin-top:22px;font-family:var(--serif);font-size:18px;letter-spacing:.4px;color:#6E675B}
.home .perspective .ctas{margin-top:40px}
@media (max-width:860px){.home .perspective{padding:48px var(--gut) 56px}.home .perspective .label{margin-bottom:20px}.home .perspective figcaption{font-size:16px;margin-top:18px}.home .perspective .ctas{margin-top:32px}}
@media (min-width:1100px){.home .perspective{max-width:1240px}.home .perspective blockquote{max-width:none;font-size:30px}.home .perspective blockquote span{white-space:nowrap}}

/* 19 Oct (4): (cursive signature tried and reverted at her request) credentials one weight, a little larger; slower audience remarks */
.home .cred,.home .cred2{font:600 14px/1.7 var(--sans);letter-spacing:1.3px;color:var(--acc)}
.home .cred2{margin-top:4px}
.rtrack{animation-duration:150s}
@media (max-width:860px){
  .home .cred,.home .cred2{font-size:12px;letter-spacing:.8px}
  .rtrack{animation-duration:120s}
}
@media (max-width:860px){.home .cred,.home .cred2{font-size:11.5px;letter-spacing:.5px}}

/* 21 Oct: Moments, her photographs as a quiet film roll (black and white, colour on hover, pauses on touch) */
.filmroll{margin:76px 0 0}
.filmroll .label{margin:0 0 18px}
.fslider{position:relative;overflow:hidden;background:#1d1b17;padding:30px 0}
.fslider::before,.fslider::after{content:'';position:absolute;left:0;right:0;height:9px;z-index:1;
  background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(239,231,216,.78) 9px 21px,transparent 21px 30px)}
.fslider::before{top:10px}.fslider::after{bottom:10px}
.ftrack{display:flex;gap:12px;width:max-content;animation:recslide 140s linear infinite}
.fslider:hover .ftrack,.fslider:active .ftrack{animation-play-state:paused}
.frame{margin:0;flex:0 0 auto;height:250px;background:#000}
.frame img{display:block;height:100%;width:auto;max-width:none;filter:grayscale(1) contrast(1.06) brightness(.97);transition:filter .7s ease}
.frame:hover img{filter:none}
@media (max-width:860px){.filmroll{margin-top:56px}.frame{height:170px}.fslider{padding:24px 0}.fslider::before{top:7px}.fslider::after{bottom:7px}.ftrack{animation-duration:110s}}
@media (prefers-reduced-motion:reduce){.ftrack{animation:none}.fslider{overflow-x:auto}}

/* 22 Oct: slimmer film roll */
.fslider{padding:15px 0}
.fslider::before,.fslider::after{height:6px;background:repeating-linear-gradient(90deg,transparent 0 8px,rgba(239,231,216,.6) 8px 16px,transparent 16px 24px)}
.fslider::before{top:5px}.fslider::after{bottom:5px}
.ftrack{gap:8px}
.frame{height:230px}
@media (max-width:860px){.fslider{padding:12px 0}.fslider::before{top:4px}.fslider::after{bottom:4px}.frame{height:160px}}

/* Advisory: make it obvious each area opens */
details.area summary{grid-template-columns:64px 1fr auto 22px}
details.area .more{font:600 11.5px/1 var(--sans);letter-spacing:1.4px;text-transform:uppercase;color:var(--acc);white-space:nowrap}
details.area .more::before{content:'Read more'}
details.area[open] .more::before{content:'Close'}
@media (max-width:860px){details.area summary{grid-template-columns:44px 1fr auto 18px;gap:12px}details.area .more{font-size:10px;letter-spacing:1px}}

/* Mentorship: how it works */
.band-dark .how{list-style:none;margin:0 0 30px;padding:0}
.band-dark .how li{position:relative;padding:0 0 10px 22px;font-family:var(--serif);font-size:19px;line-height:1.55}
.band-dark .how li::before{content:'';position:absolute;left:0;top:.7em;width:8px;height:1px;background:currentColor;opacity:.7}

/* Contact: Victoria's warmer version */
.contact .pagehead .lede{max-width:34em}
.ways{list-style:none;margin:6px 0 18px;padding:0;max-width:44em}
.ways li{font-family:var(--serif);font-size:20px;line-height:1.55;margin:0 0 10px;color:var(--read,#3A352D)}
.ways strong{color:var(--acc);font-weight:600}
.replynote{font-family:var(--serif);font-style:italic;font-size:20px;margin:0 0 26px}
.recently{font:500 12px/1.6 var(--sans);letter-spacing:1.2px;text-transform:uppercase;color:var(--taupe);margin:44px 0 0}
@media (max-width:860px){.ways li{font-size:18px}.replynote{font-size:18px}}

/* Speaking: highlights reel near the top */
.reel{margin:60px 0 10px}
.reel video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#171612}
.reel figcaption{margin-top:12px;font:500 12px/1.6 var(--sans);letter-spacing:1.1px;text-transform:uppercase;color:var(--taupe)}
@media (max-width:860px){.reel{margin-top:40px}.reel figcaption{font-size:10.5px;letter-spacing:.6px}}

/* 22 Oct (2) */
/* film roll captions, shown when a frame is touched or hovered */
.frame{position:relative;overflow:hidden}
.frame figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;background:linear-gradient(transparent,rgba(12,11,9,.82));
  color:#F3ECE2;font:500 11px/1.45 var(--sans);letter-spacing:.3px;opacity:0;transition:opacity .5s ease;white-space:normal}
.frame:hover figcaption,.frame:focus-within figcaption{opacity:1}
/* Speaking: platforms and record */
.platforms{margin:44px 0 0;padding:20px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);text-align:center}
.platforms .label{margin:0 0 10px}
.platforms ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px}
.platforms li{font-family:var(--serif);font-size:19px;color:var(--ink)}
.record{padding-top:72px}
.record ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.record li{display:grid;grid-template-columns:70px 1fr auto;gap:22px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--rule)}
.record .y{font:600 13px/1.4 var(--sans);letter-spacing:1px;color:var(--acc)}
.record .w{font-family:var(--serif);font-size:20px;line-height:1.45;color:var(--ink)}
.record .o{display:block;font:500 12px/1.6 var(--sans);letter-spacing:.8px;text-transform:uppercase;color:var(--taupe);margin-top:4px}
.record .more{font:600 11.5px/1 var(--sans);letter-spacing:1.3px;text-transform:uppercase;color:var(--acc);white-space:nowrap}
/* Mentorship: LSE group photo */
.mentor-photo{margin:56px 0 0}
.mentor-photo img{width:100%;height:auto;display:block}
.mentor-photo figcaption{margin-top:12px;font:500 12px/1.6 var(--sans);letter-spacing:1.1px;text-transform:uppercase;color:var(--taupe)}
@media (max-width:860px){
 .platforms li{font-size:17px}
 .record li{grid-template-columns:52px 1fr;gap:6px 14px}
 .record .more{grid-column:2}
 .record .w{font-size:18px}
 .mentor-photo{margin-top:40px}
}

/* Profile: roles with years */
.roles{padding-top:64px}
.roles ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.roles li{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--rule)}
.roles .r{font-family:var(--serif);font-size:20px;line-height:1.4;color:var(--ink)}
.roles .org{display:block;font:500 12px/1.6 var(--sans);letter-spacing:.8px;text-transform:uppercase;color:var(--taupe);margin-top:3px}
.roles .yrs{font:600 12.5px/1.4 var(--sans);letter-spacing:1px;text-transform:uppercase;color:var(--acc);white-space:nowrap}
@media (max-width:860px){.roles li{grid-template-columns:1fr;gap:6px}.roles .r{font-size:18px}}

/* Profile: selected moments with their captions */
.featured-moments{padding-top:72px}
.fmgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 36px}
.fm{margin:0}
.fm .im{aspect-ratio:4/3;overflow:hidden;background:#e9e2d4}
.fm img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .7s ease}
.fm:hover img{filter:none}
.fm figcaption{margin-top:14px;font-family:var(--serif);font-size:18px;line-height:1.55;color:var(--read,#3A352D)}
/* Mentorship: BBC 100 Women note beside the women's section */
.offer-note{margin:22px 0 0}
.offer-note img{width:100%;max-width:340px;height:auto;display:block}
.offer-note figcaption{margin-top:10px;font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.5;color:var(--acc)}
@media (max-width:860px){.fmgrid{grid-template-columns:1fr;gap:30px}.fm figcaption{font-size:17px}}
.fm img[src*="gordon-brown"]{object-position:50% 30%}
.fm figcaption em{color:var(--acc)}

/* 23 Oct: Selected Moments pairs; LSE photo with Shazene Hussain's words */
.fm .ims{display:block}
.fm.wide{grid-column:1/-1}
.fm.wide .ims{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fm.wide figcaption{max-width:52em}
.mentor-lse{display:grid;grid-template-columns:1.25fr 1fr;gap:44px;align-items:center;margin-top:56px}
.mentor-lse .mentor-photo{margin:0}
.mentor-quote{margin:0;padding-left:26px;border-left:2px solid var(--acc)}
.mentor-quote blockquote{margin:0 0 18px;font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.55;color:var(--ink)}
.mentor-quote figcaption{font:600 12px/1.5 var(--sans);letter-spacing:1.2px;text-transform:uppercase;color:var(--acc)}
.mentor-quote figcaption span{display:block;font-weight:500;color:var(--taupe);margin-top:4px}
@media (max-width:860px){.fm.wide .ims{grid-template-columns:1fr}.mentor-lse{grid-template-columns:1fr;gap:28px;margin-top:40px}.mentor-quote blockquote{font-size:19px}}
/* Selected Moments: show each photo whole (no cropping of heads) */
.fm .im{aspect-ratio:auto;background:none}
.fm img{height:auto;object-fit:initial}
.fmgrid{align-items:start}
/* Books: the author's words */
.bkq{margin:16px 0 0;padding-left:16px;border-left:2px solid var(--acc);font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.5;color:var(--ink)}
.bkq cite{display:block;margin-top:8px;font:600 11px/1.4 var(--sans);font-style:normal;letter-spacing:1.2px;text-transform:uppercase;color:var(--acc)}

/* 23 Oct: Gallery page, Victoria's full post, upcoming mentoring */
.gallery .featured-moments{padding-top:0}
.bkq.wide{max-width:820px;margin:34px 0 0;padding-left:22px;font-size:19px}
.bkq.wide p{margin:0 0 12px}
.upcoming{margin:56px 0 0;padding:30px 0 0;border-top:1px solid var(--line, rgba(23,22,18,.15));max-width:820px}
.upcoming h3{font-family:var(--serif);font-weight:600;font-size:24px;line-height:1.3;margin:6px 0 10px}
.upcoming p:not(.label){font-size:17.5px;color:var(--soft);margin:0 0 12px}
.speaking .split .ph img{max-height:none;object-position:50% 30%}

/* 23 Oct (later): quote on its own, GPODS image, booking box and note */
.mentor-lse.solo{grid-template-columns:1fr;max-width:820px}
.upcoming .up-img{width:100%;height:auto;display:block;margin:8px 0 20px}
.bookbox{border:1px solid rgba(239,231,216,.3);padding:22px 24px 24px;margin:4px 0 0;max-width:520px}
.bookbox .label{margin:0 0 8px}
.band-dark .bookbox p:not(.label){font-size:18px;margin:0 0 18px}
.booknote{border-left:2px solid var(--acc);padding:2px 0 2px 18px;margin:0 0 28px;max-width:760px}
.booknote .label{margin:0 0 6px}
.booknote p:not(.label){margin:0 0 10px}

/* 23 Oct (evening): calmer pages */
.bkq cite span{display:block;margin-top:4px;font-weight:500;color:var(--taupe)}
.elist .pdf{display:inline-block;margin-top:10px;font:600 11.5px/1 var(--sans);letter-spacing:1.3px;text-transform:uppercase;color:var(--acc);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
.record{padding-top:56px}
.rec-more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:18px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);color:var(--ink)}
.rec-more>summary::-webkit-details-marker{display:none}
.rec-more .mic{width:22px;height:22px;color:var(--acc);flex:none}
.rec-more .t{font-family:var(--serif);font-size:22px;font-weight:500}
.rec-more .s{font:500 11.5px/1.4 var(--sans);letter-spacing:1.2px;text-transform:uppercase;color:var(--taupe)}
.rec-more .ind{position:relative;width:14px;height:14px;margin-left:auto;flex:none}
.rec-more .ind::before,.rec-more .ind::after{content:'';position:absolute;left:0;top:6.5px;width:14px;height:1px;background:var(--acc);transition:transform .3s}
.rec-more .ind::after{transform:rotate(90deg)}
.rec-more[open] .ind::after{transform:rotate(0)}
.rec-more ul{border-top:0}
@media (max-width:640px){.rec-more .s{display:none}}
/* Advisory opens on the Helsinki photo, which then fades away (her idea, 23 Oct) */
.adv-intro{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:24px;
  animation:advout 1.3s ease 9s forwards;cursor:pointer}
.adv-intro.js{animation:none;transition:opacity 1.2s ease}
.adv-intro.out{opacity:0;pointer-events:none}
.adv-intro figure{margin:0;display:flex;align-items:center;gap:44px;max-width:1080px}
.adv-intro img{height:min(74vh,720px);width:auto;max-width:56vw;object-fit:cover;filter:grayscale(1) contrast(1.04);animation:advin 1.1s ease both}
.adv-intro figcaption{max-width:380px;animation:advin 1.1s ease .35s both}
.adv-intro .label{display:block;font:600 11.5px/1.5 var(--sans);letter-spacing:1.5px;text-transform:uppercase;color:var(--acc);margin-bottom:14px}
.adv-intro .q{display:block;font-family:var(--serif);font-style:italic;font-size:26px;line-height:1.4;color:var(--ink)}
.adv-intro.skip{display:none}
@keyframes advout{to{opacity:0;visibility:hidden;pointer-events:none}}
@keyframes advin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:760px){.adv-intro figure{flex-direction:column;gap:20px;text-align:center}.adv-intro img{height:52vh;max-width:86vw}.adv-intro .q{font-size:20px}}
@media (prefers-reduced-motion:reduce){.adv-intro img,.adv-intro figcaption{animation:none}}

/* 23 Oct (night): printed articles side by side, each opening its PDF */
.prints{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;padding:30px 0 40px}
.print{display:block;text-decoration:none;color:inherit}
.print .cv{display:block;aspect-ratio:3/4;overflow:hidden;background:#fff;box-shadow:0 18px 40px -20px rgba(23,22,18,.4);margin-bottom:20px}
.print .cv img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:transform .8s ease}
.print:hover .cv img{transform:scale(1.03)}
.print h3{font-family:var(--serif);font-weight:600;font-size:23px;line-height:1.25;margin:0 0 8px}
.print .meta{font:500 12px/1.6 var(--sans);letter-spacing:1px;text-transform:uppercase;color:var(--taupe);margin:0 0 12px}
@media (max-width:860px){.prints{grid-template-columns:1fr;gap:40px}.print .cv{max-width:340px}}
.upcoming{display:grid;grid-template-columns:220px 1fr;column-gap:40px;align-items:start}
.upcoming>.label,.upcoming>h3{grid-column:1/-1}
.upcoming .up-img{grid-column:1;grid-row:3/span 3;margin:6px 0 0}
.upcoming>p:not(.label),.upcoming>a{grid-column:2}
@media (max-width:640px){.upcoming{grid-template-columns:1fr}.upcoming .up-img{grid-row:auto;max-width:240px;margin:4px 0 18px}.upcoming>p:not(.label),.upcoming>a{grid-column:1}}
.upcoming>a{justify-self:start}

/* 23 Oct (late): the questions on Advisory, a testimony box, Oath feature */
.qsec{padding:72px 0 0}
.qsec .label{margin:0 0 18px}
.qgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 34px}
.qc{display:block;text-decoration:none;color:inherit;background:#FBF8F2;border:1px solid var(--rule);border-top:3px solid var(--acc);padding:24px 26px 22px;transition:background .3s,opacity .9s ease,transform .9s ease}
.qc:hover{background:#fff}
.qc .k{font:600 11.5px/1.4 var(--sans);letter-spacing:1.4px;text-transform:uppercase;color:var(--acc);margin:0 0 10px}
.qc h3{font-family:var(--serif);font-weight:600;font-size:26px;line-height:1.2;margin:0 0 10px}
.qc .d{font-family:var(--serif);font-size:19px;line-height:1.5;color:var(--read,#3A352D);margin:0 0 14px}
.qc .dt{font:500 12px/1.4 var(--sans);color:var(--taupe);margin:0}
.qgrid.pre .qc{opacity:0;transform:translateY(22px)}
.qgrid.pre.in .qc{opacity:1;transform:none}
.qgrid.pre.in .qc:nth-child(2){transition-delay:.25s}.qgrid.pre.in .qc:nth-child(3){transition-delay:.5s}.qgrid.pre.in .qc:nth-child(4){transition-delay:.75s}
@media (max-width:860px){.qgrid{grid-template-columns:1fr}.qc h3{font-size:22px}}
@media (prefers-reduced-motion:reduce){.qgrid.pre .qc{opacity:1;transform:none}}
.bkq.testimony{background:#FBEEE4;border:0;border-top:10px solid #A05B4C;padding:30px 34px 26px;color:#6E3A2F;max-width:860px}
.bkq.testimony p{color:#6E3A2F}
.bkq.testimony cite{color:#A05B4C}
.bkq.testimony cite span{color:#8C6A5E}
@media (max-width:640px){.bkq.testimony{padding:22px 20px 20px}}
.writing2 .feature span.cover img{width:100%;max-width:260px;box-shadow:0 18px 40px -18px rgba(23,22,18,.35)}

/* Testimonies, one at a time (23 Oct) */
.flashes{max-width:900px;margin:0 auto;padding:72px var(--gut) 56px;text-align:center;cursor:pointer}
.flashes .label{margin:0 0 26px}
.fl-stage{display:grid}
.fl{grid-area:1/1;margin:0;opacity:0;transition:opacity 1.4s ease;pointer-events:none;align-self:center}
.fl.on{opacity:1;pointer-events:auto}
.fl blockquote{margin:0 auto 22px;font-family:var(--serif);font-style:italic;font-weight:500;font-size:27px;line-height:1.42;color:var(--ink);max-width:30em;text-wrap:balance}
.fl figcaption{font:600 11.5px/1.5 var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--acc)}
.fl figcaption span{display:block;margin-top:4px;font-weight:500;color:var(--taupe);letter-spacing:1.2px}
.fl-dots{display:flex;justify-content:center;gap:8px;margin-top:26px}
.fl-dots i{width:6px;height:6px;border-radius:50%;background:var(--rule);transition:background .6s}
.fl-dots i.on{background:var(--acc)}
.flashes.wide{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);max-width:1040px;margin-top:40px}
@media (max-width:640px){.fl blockquote{font-size:21px}.flashes{padding:52px var(--gut) 44px}}

/* 23 Oct (night): five writing cards; recognition band at rest */
.prints{grid-template-columns:repeat(3,1fr)}
.print .cv img[src*="m43"]{object-position:72% 50%;filter:grayscale(1)}
.recband.still{padding:64px 0 56px}
.recgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 30px;max-width:1240px;margin:0 auto;padding:0 var(--gut)}
.recgrid .card{margin:0}
@media (max-width:1000px){.recgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.recgrid{grid-template-columns:1fr;gap:26px}}
.recgrid .card{border-top:1px solid rgba(246,238,230,.45);padding:22px 0 0}
.recgrid .yr{font:600 11.5px/1 var(--sans);letter-spacing:2px;color:rgba(246,238,230,.75);margin:0 0 12px}
.recgrid h3{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.3;margin:0 0 8px;color:#fff}
.recgrid p{font-family:var(--serif);font-size:17px;line-height:1.55;color:rgba(246,238,230,.88);margin:0}
.recgrid h3 a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}.recgrid h3 a:hover{border-bottom-color:#fff}
.print .cv img[src*="itt-nexus"]{object-fit:contain;background:#0c0c0e}

/* 23 Oct (night, 2): photographs in colour as they arrive; bigger film roll on the gallery; new portraits */
.fm img{transition:filter 1.4s ease}
.fm.lit img{filter:none}
.gallery .frame{height:360px}
@media (max-width:860px){.gallery .frame{height:230px}}
.mentor-intro.with-ph{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:start}
.mentor-intro .mph{margin:8px 0 0}
.mentor-intro .mph img{width:100%;height:auto;display:block;filter:grayscale(1) contrast(1.04)}
@media (max-width:860px){.mentor-intro.with-ph{grid-template-columns:1fr;gap:28px}}
.contact-grid .ph img[src*="contact-portrait"]{height:520px;object-position:40% 40%;filter:grayscale(1) contrast(1.04)}
@media (max-width:860px){.contact-grid .ph img[src*="contact-portrait"]{height:300px}}
.recaward{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:48px;align-items:center;margin-top:64px;padding-top:56px;border-top:1px solid var(--rule)}
.recaward figure{margin:0}
.recaward img{width:100%;height:auto;display:block}
.recaward h3{font-family:var(--serif);font-weight:600;font-size:24px;line-height:1.3;margin:0 0 10px}
.recaward p{font-family:var(--serif);font-size:19px;line-height:1.6;color:var(--read,#3A352D);margin:0 0 10px}
.recaward p.meta{font:500 11.5px/1.6 var(--sans);letter-spacing:1.3px;text-transform:uppercase;color:var(--taupe);margin-top:12px}
@media (max-width:860px){.recaward{grid-template-columns:1fr;gap:22px}.recaward figure{max-width:300px}}

/* 23 Oct (night, 3): Selected Moments in colour, tap for black and white; writing cards on phones; Balance for Better */
.fm img,.fm.lit img{filter:none;transition:filter 1s ease}
.fm{cursor:pointer}
.fm.mono img{filter:grayscale(1) contrast(1.05)}
@media (max-width:860px){.prints{grid-template-columns:1fr 1fr;gap:30px 18px}.print h3{font-size:19px}.print .meta{font-size:10.5px;letter-spacing:.6px}}
@media (max-width:480px){.prints{grid-template-columns:1fr}.print .cv{max-width:none}}
@media (max-width:480px){.print .cv{aspect-ratio:4/3}}

.recaward.bfb{margin-top:40px;padding-top:0;border-top:0}
.recaward.bfb .label{margin:0 0 14px}
.recaward.bfb blockquote{margin:0 0 16px;font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.5;color:var(--ink)}
@media (max-width:860px){.recaward.bfb blockquote{font-size:19px}}
.recaward.bfb p.label{font:600 11.5px/1.5 var(--sans);letter-spacing:1.5px;text-transform:uppercase;color:var(--acc)}
/* 23 Oct (late): captions under the films, larger; the LSE caption in red and bold (her request) */
.band-dark .videowrap .cap{color:#E07F72;font-weight:700;font-size:13px;letter-spacing:1.1px}
.reel figcaption{font-size:13px}
@media (max-width:860px){.reel figcaption{font-size:12px;letter-spacing:.8px}.band-dark .videowrap .cap{font-size:12px}}

/* 23 Oct (10:12): testimonies in a quiet coloured box, in the Al Waha colours, so they carry their weight */
.mentor-quote.boxed{background:#FBEEE4;border-left:0;border-top:8px solid #A05B4C;padding:30px 34px 26px}
.mentor-quote.boxed blockquote{color:#6E3A2F}
.mentor-quote.boxed figcaption{color:#A05B4C}
.mentor-quote.boxed figcaption span{color:#8C6A5E}
.recaward.bfb.boxed{margin-top:56px;padding:0;border-top:0;background:#FBEEE4;border-top:8px solid #A05B4C;grid-template-columns:minmax(0,300px) 1fr;gap:0}
.recaward.bfb.boxed figure img{height:100%;object-fit:cover}
.recaward.bfb.boxed>div{padding:30px 34px}
.recaward.bfb.boxed blockquote{color:#6E3A2F;font-size:20px}
.recaward.bfb.boxed p.label{color:#A05B4C}
.recaward.bfb.boxed .meta{color:#8C6A5E}
@media (max-width:860px){.recaward.bfb.boxed{grid-template-columns:1fr}.recaward.bfb.boxed figure{max-width:none}.recaward.bfb.boxed figure img{max-height:420px;object-position:50% 30%}.recaward.bfb.boxed>div{padding:24px 20px}.mentor-quote.boxed{padding:24px 20px 20px}}

/* 23 Oct (after launch): back to colour arriving on its own as each photograph reaches the middle (her preference) */
.fm img{filter:grayscale(1) contrast(1.05);transition:filter 1.4s ease}
.fm.lit img,.fm.keep img{filter:none}
.mentor-lse.solo{display:grid;gap:28px}

/* homepage cards warm into colour as they reach the middle of the screen, like the gallery (23 Oct) */
.hb-card img{transition:filter 1.4s ease}
.hb-card.lit img{filter:none}

/* 23 Oct (evening): their words first on Recognition, in the Al Waha colours; organisers' corner on Profile */
.flashes.boxed{background:#FBEEE4;border:0;border-top:8px solid #A05B4C;margin-top:8px;margin-bottom:24px}
.flashes.boxed .fl blockquote{color:#6E3A2F}
.flashes.boxed .label,.flashes.boxed .fl figcaption{color:#A05B4C}
.flashes.boxed .fl figcaption span{color:#8C6A5E}
.flashes.boxed .fl-dots i{background:#E6C9BB}.flashes.boxed .fl-dots i.on{background:#A05B4C}
.recband.still{margin-top:40px}
.press{padding-top:72px}
.press .label{margin:0 0 10px}
.press .sbio{font-family:var(--serif);font-size:20px;line-height:1.6;max-width:820px;margin:0 0 14px}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pgrid figure{margin:0}
.pgrid img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;display:block}
.pgrid figcaption{margin-top:10px;font:500 11.5px/1.5 var(--sans);letter-spacing:1px;text-transform:uppercase;color:var(--taupe)}
.pgrid figcaption a{color:var(--acc)}
@media (max-width:860px){.pgrid{grid-template-columns:1fr 1fr;gap:18px}.press .sbio{font-size:18px}}
.contact-grid .ph img[src*="contact.jpg"]{height:520px;object-position:62% 30%;filter:grayscale(1) contrast(1.04)}
@media (max-width:860px){.contact-grid .ph img[src*="contact.jpg"]{height:320px}}

/* Safari runs the fade at page load and the quotes overlap for a moment: fade only once the page is ready */
.fl{transition:none}
.flashes.ready .fl{transition:opacity 1.4s ease}
.media .press{padding-top:8px}
/* nine items in the menu: keep each on one line on mid-size screens */
nav.main a{white-space:nowrap}
@media (min-width:1041px) and (max-width:1360px){nav.main{gap:16px!important}nav.main a{font-size:10.5px;letter-spacing:.9px}}
/* between phone and laptop width the nine items do not fit in one line: use the Menu button there too */
@media (min-width:861px) and (max-width:1040px){
  .menu{display:block}
  nav.main{display:none;position:absolute;left:0;right:0;top:100%;z-index:30;background:var(--bg);flex-direction:column;gap:0!important;padding:6px var(--gut) 16px;border-bottom:1px solid var(--rule);font-size:13px}
  nav.main.open{display:flex}
  nav.main a{padding:15px 0;border-bottom:1px solid rgba(23,22,18,.08)}
  nav.main a.on{border-bottom-color:rgba(23,22,18,.08);color:var(--acc)}
}
.speaking .split.solo{grid-template-columns:1fr;max-width:900px}