/* Dr. Julius Debrah — one stylesheet. Plain headings, generous text, photographs shown as they are. */
@font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/archivo.woff2') format('woff2')}
@font-face{font-family:Newsreader;font-style:normal;font-weight:200 800;font-display:swap;src:url('/assets/fonts/newsreader.woff2') format('woff2')}
:root{
  --paper:#f5f3ee;--paper-2:#ebe8e0;--ink:#1a252b;--muted:#5f6b70;--line:#1a252b24;
  --blue:#123f78;--blue-deep:#0d2f5a;--gold:#c9a24b;--dark:#12181b;--dark-ink:#efece4;--dark-muted:#9aa5a9;
  --serif:Newsreader,Georgia,serif;--sans:Archivo,'Helvetica Neue',Arial,sans-serif;
  --gutter:clamp(20px,5vw,72px);--max:1240px;--head:72px;--ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head) + 24px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,figure,blockquote,ol,ul,dl,dd{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.08}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--gold);color:var(--ink);padding:10px 16px}.skip:focus{top:12px}
.wrap{width:min(var(--max),100% - var(--gutter) * 2);margin-inline:auto}
.narrow{width:min(760px,100% - var(--gutter) * 2)}
.page-title{font-size:clamp(44px,6vw,76px);margin:0 0 48px}

/* Masthead */
.masthead{position:fixed;inset:0 0 auto;z-index:50;height:var(--head);display:flex;align-items:center;gap:32px;padding:0 var(--gutter);background:var(--blue);color:#fff;transition:background-color .5s var(--ease)}
.masthead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#ce3239 0 33.4%,#f2c744 33.4% 66.7%,#187347 66.7%);transition:opacity .5s}
.page-home .masthead:not(.is-solid){background:transparent}
.page-home .masthead:not(.is-solid)::after{opacity:0}
.mark{display:flex;flex-direction:column;gap:6px;text-decoration:none;margin-right:auto}
.mark-name{font:500 20px/1 var(--serif);letter-spacing:.14em;text-transform:uppercase}
.mark-office{font:500 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.nav{display:flex;gap:32px}
.nav a{font-size:15px;text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover{border-color:#ffffff80}
.nav a[aria-current=page]{border-color:var(--gold)}
.menu-button{display:none;background:none;border:1px solid #ffffff66;padding:8px 14px;font-size:14px}
.menu{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:20px var(--gutter);background:var(--blue);color:#fff}
.menu[open]{display:flex;flex-direction:column}
.menu-close{align-self:flex-end;background:none;border:1px solid #ffffff66;padding:8px 14px;font-size:14px}
.menu nav{display:flex;flex-direction:column;margin-top:40px}
.menu nav a{font:400 40px/1.1 var(--serif);padding:14px 0;border-bottom:1px solid #ffffff26;text-decoration:none}
.menu nav a[aria-current=page]{color:var(--gold)}

/* Fade in */
.js [data-fade]{opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js [data-fade].is-in{opacity:1;transform:none}

/* Home: one continuous surface whose colour fades between sections. */
.page-home{background:var(--dark);transition:background-color 1.2s var(--ease)}
.page-home[data-tone=light]{background:var(--paper)}
.home section{position:relative}
.home [data-tone=dark]{color:var(--dark-ink)}
.home [data-tone=light]{color:var(--ink)}
.row-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:36px}
.row-head h2{font-size:clamp(36px,4vw,54px)}
.row-head a{font-size:15px;text-underline-offset:5px}

.cover{height:100svh;min-height:620px;max-height:1100px;overflow:hidden}
.cover-slides,.cover-copy,.cover-controls{opacity:var(--cover-fade,1)}
.cover-slides{position:absolute;inset:0}
.cover-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.8s var(--ease)}
.cover-slide.is-active{opacity:1}
.cover-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 9s linear}
.cover-slide.is-active img{transform:scale(1.1)}
.cover-shade{position:absolute;inset:0;background:linear-gradient(0deg,var(--dark) 0%,#12181bb0 30%,#12181b26 65%,#12181b66 100%)}
.cover-copy{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(72px,12vh,140px)}
.cover-honorific{font:italic 400 clamp(22px,2vw,30px)/1 var(--serif);color:var(--gold);margin-bottom:10px}
.cover h1{font-size:clamp(64px,10vw,164px);line-height:.9;letter-spacing:-.04em;max-width:9ch}
.cover-controls{position:absolute;right:var(--gutter);bottom:clamp(72px,12vh,140px);display:flex;align-items:center;gap:6px}
.cover-controls button{width:40px;height:40px;display:grid;place-items:center;background:none;border:1px solid #ffffff59;color:#fff;transition:border-color .3s}
.cover-controls button:hover{border-color:#fff}
.cover-controls svg{width:14px;height:14px}
.cover-count{font-size:13px;color:var(--dark-muted);margin-right:12px;font-variant-numeric:tabular-nums}

.statement{height:220vh}
.statement-pin{position:sticky;top:0;height:100svh;display:grid;place-items:center;padding:var(--head) var(--gutter) 40px}
.statement-inner{max-width:1040px;text-align:center}
.statement-label{display:flex;align-items:center;justify-content:center;gap:18px;font:500 13px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;margin-bottom:40px}
.statement-label::before,.statement-label::after{content:"";width:56px;height:1px;background:currentColor;opacity:.6}
.statement-text{font:400 clamp(28px,3.6vw,54px)/1.24 var(--serif);letter-spacing:-.015em;text-wrap:balance}
.statement-text .w{color:#efece429;transition:color .7s var(--ease)}
.statement-text .w.on{color:#cdb98a}
.statement-text .w.k.on{color:#fff}
.statement-more{display:inline-block;margin-top:44px;font-size:15px;color:var(--dark-ink);text-underline-offset:6px}

.offices{padding:clamp(100px,14vh,170px) 0}
.offices-wrap{display:grid;grid-template-columns:1fr 2fr;gap:clamp(32px,6vw,96px);align-items:start}
.offices h2{font-size:clamp(36px,4vw,54px)}
.offices-list{border-top:1px solid var(--line)}
.offices-list li{display:grid;grid-template-columns:140px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--line)}
.offices-years{color:var(--muted);font-variant-numeric:tabular-nums}
.offices-name{font:400 clamp(20px,1.8vw,25px)/1.3 var(--serif)}
.offices-list .is-current .offices-years{color:var(--blue);font-weight:600}
.offices-list .is-current .offices-name{color:var(--blue)}

.latest{padding:0 0 clamp(100px,14vh,170px)}
.latest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.latest-item{display:flex;flex-direction:column;gap:12px;text-decoration:none}
.latest-image{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)}
.latest-image img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.latest-item:hover img{transform:scale(1.03)}
.latest-date{font-size:14px;color:var(--muted);margin-top:6px}
.latest-title{font:400 24px/1.25 var(--serif)}
.latest-item:hover .latest-title{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

.glimpse{padding:clamp(100px,14vh,170px) 0}
.glimpse .row-head a{color:var(--dark-ink)}
.glimpse-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.glimpse-grid a{aspect-ratio:1;overflow:hidden;background:#1c2427}
.glimpse-grid img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.glimpse-grid a:hover img{transform:scale(1.04)}

/* A photograph that opens in the viewer */
.view{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.view img{width:100%}

/* Biography */
.bio{padding-top:calc(var(--head) + 64px)}
.bio-head{display:grid;grid-template-columns:minmax(260px,5fr) 7fr;gap:clamp(32px,6vw,96px);align-items:end;padding-bottom:clamp(64px,9vw,120px);border-bottom:1px solid var(--line)}
.bio-portrait img{aspect-ratio:4/5;object-fit:cover;object-position:50% 18%}
.bio-honorific{font:italic 400 26px/1 var(--serif);color:var(--blue);margin-bottom:8px}
.bio-intro h1{font-size:clamp(56px,7vw,104px);line-height:.95;letter-spacing:-.035em}
.bio-office{font:400 clamp(20px,1.7vw,24px)/1.4 var(--serif);color:var(--muted);margin-top:20px;max-width:30ch}
.bio-facts{display:grid;margin-top:44px;border-top:1px solid var(--line)}
.bio-facts div{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:14px 0;border-bottom:1px solid var(--line)}
.bio-facts dt{color:var(--muted);font-size:15px}
.bio-facts dd{font-size:16px}
.bio-body{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(32px,6vw,96px);padding:clamp(64px,9vw,120px) 0 140px}
.bio-toc{position:sticky;top:calc(var(--head) + 40px);align-self:start}
.bio-toc a{display:block;padding:7px 0 7px 14px;border-left:1px solid var(--line);font-size:15px;color:var(--muted);text-decoration:none;transition:color .2s,border-color .2s}
.bio-toc a:hover{color:var(--ink)}
.bio-toc a.is-active{color:var(--ink);border-left:2px solid var(--blue);padding-left:13px}
.bio-text{max-width:760px}
.bio-section{scroll-margin-top:calc(var(--head) + 32px);padding-bottom:72px}
.bio-section+.bio-section{padding-top:72px;border-top:1px solid var(--line)}
.bio-years{font-size:15px;color:var(--blue);margin-bottom:10px}
.bio-section h2{font-size:clamp(34px,3.6vw,48px);margin-bottom:24px}
.bio-section>p{max-width:64ch;font-size:18px;line-height:1.75}
.bio-section>p+p{margin-top:18px}
.bio-quote{margin:40px 0 0;padding-left:28px;border-left:2px solid var(--gold)}
.bio-quote p{font:400 clamp(22px,2vw,28px)/1.4 var(--serif);letter-spacing:-.01em}
.bio-quote footer,.bio-closing footer{margin-top:14px;font-size:15px;color:var(--muted)}
.bio-photos{display:grid;gap:12px;margin-top:40px}
.bio-photos--1 .view{width:auto;max-width:100%}
.bio-photos--1 img{width:auto;max-height:min(680px,80svh)}
.bio-photos--2,.bio-photos--3{grid-template-columns:1fr 1fr}
.bio-photos--3 figure:first-child{grid-column:1/-1}
.bio-photos--2 img,.bio-photos--3 figure+figure img{aspect-ratio:4/3;object-fit:cover}
.bio-closing{padding:80px 0;border-top:1px solid var(--line)}
.bio-closing p{font:400 clamp(30px,3.4vw,46px)/1.25 var(--serif);letter-spacing:-.02em;max-width:22ch}
.bio-press{padding:40px;background:var(--paper-2)}
.bio-press h2{font-size:28px;margin-bottom:16px}
.bio-press>p{font-size:16px}
.bio-press-actions{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:24px}
.bio-press-actions a{font-size:15px;text-underline-offset:5px}
.copy{background:var(--blue);color:#fff;border:0;padding:10px 18px;font-size:15px}
.copy:hover{background:var(--blue-deep)}

/* News */
.news,.post,.sources{padding:calc(var(--head) + 64px) 0 140px}
.news-card{display:grid;gap:14px;text-decoration:none}
.news-image{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)}
.news-image img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.news-card:hover img{transform:scale(1.03)}
.news-copy{display:grid;gap:8px;align-content:start}
.news-date{font-size:14px;color:var(--muted);margin-top:4px}
.news-title{font:400 25px/1.25 var(--serif)}
.news-card:hover .news-title{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.news-summary{font-size:16px;line-height:1.65;color:var(--muted)}
.news-card--lead{grid-template-columns:3fr 2fr;gap:48px;align-items:center;padding-bottom:64px;margin-bottom:64px;border-bottom:1px solid var(--line)}
.news-card--lead .news-image{aspect-ratio:3/2}
.news-card--lead .news-title{font-size:clamp(32px,3.4vw,46px);line-height:1.1;letter-spacing:-.02em}
.news-card--lead .news-summary{font-size:18px}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 32px}

.post-wrap{max-width:980px}
.post-back a{font-size:15px;color:var(--muted);text-underline-offset:5px}
.post h1{font-size:clamp(40px,5vw,68px);margin:24px 0 16px;max-width:18ch;text-wrap:balance}
.post-date{color:var(--muted);font-size:15px}
.post-lead{margin-top:40px}
.post-lead img{max-height:78svh;width:100%;object-fit:cover}
.post-text{max-width:62ch;margin-top:40px}
.post-text p{font:400 clamp(20px,1.7vw,24px)/1.55 var(--serif)}
.post-text p+p{margin-top:18px}
.post .thumbs{margin-top:56px}
.post-pager{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:80px;padding-top:28px;border-top:1px solid var(--line)}
.post-pager a{display:flex;flex-direction:column;gap:6px;font:400 21px/1.3 var(--serif);text-decoration:none}
.post-pager a span{font:400 14px var(--sans);color:var(--muted)}
.post-pager a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.post-pager a[rel=next]{text-align:right}

/* Thumbnails: square, slightly rounded, as on an official photo service */
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.thumbs .view{aspect-ratio:1;overflow:hidden;border-radius:8px;box-shadow:0 2px 10px #12181b1f;transition:box-shadow .3s,transform .3s var(--ease)}
.thumbs .view:hover{box-shadow:0 8px 24px #12181b33;transform:translateY(-2px)}
.thumbs img{width:100%;height:100%;object-fit:cover}

/* Gallery */
.page-gallery{background:#e9ecef}
.gallery{padding:calc(var(--head) + 40px) 0 120px}
.gallery-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;align-items:start}
.panel{background:#fff;border-radius:14px;padding:24px;box-shadow:0 2px 12px #12181b12}
.gallery-feature{position:sticky;top:calc(var(--head) + 24px)}
.gallery-feature h2{font:500 17px/1.3 var(--sans);letter-spacing:0;color:var(--blue);margin-bottom:16px}
.gallery-feature .view img{border-radius:8px;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%}
.gallery-feature p{font-size:14px;line-height:1.5;margin-top:14px}
.gallery-feature a{display:inline-block;margin-top:10px;font-size:14px;color:var(--blue);text-underline-offset:4px}
.gallery-albums{padding:32px 36px}
.album+.album{margin-top:44px;padding-top:40px;border-top:1px solid var(--line)}
.album h2{font:500 21px/1.35 var(--sans);letter-spacing:0;color:var(--blue);margin-bottom:20px}
.album h2 a{text-decoration:none}.album h2 a:hover{text-decoration:underline;text-underline-offset:4px}
.album h2 span{color:var(--muted);font-weight:400}

/* Sources */
.sources h2{font-size:28px;margin:48px 0 12px}
.ledger li{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--line);font-size:16px}
.ledger a{text-underline-offset:4px}
.ledger span{font-size:14px;color:var(--muted)}

/* Footer */
.footer{background:var(--blue-deep);color:#e6ebf2;padding:64px 0 32px}
.footer-wrap{display:grid;grid-template-columns:1fr auto;gap:28px 40px;align-items:center}
.footer-name{font:500 26px/1 var(--serif);letter-spacing:.14em;text-transform:uppercase}
.footer-nav,.footer-social{display:flex;flex-wrap:wrap;gap:12px 28px;font-size:15px}
.footer-nav a,.footer-social a{text-decoration:none}
.footer-nav a:hover,.footer-social a:hover{text-decoration:underline;text-underline-offset:5px}
.footer-social{grid-column:1/-1;padding-top:28px;border-top:1px solid #ffffff26}
.footer-base{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px 28px;font-size:13px;color:#a9b8c9}
.footer-base a{text-underline-offset:4px}

/* Viewer */
.viewer{width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:56px 80px;background:#0b0f11f2;color:#fff}
.viewer[open]{display:grid;place-items:center}
.viewer::backdrop{background:#0b0f11e6}
.viewer figure{display:grid;gap:14px;justify-items:center;max-width:100%}
.viewer img{max-width:100%;max-height:calc(100svh - 150px);width:auto;object-fit:contain}
.viewer figcaption{display:flex;gap:24px;font-size:13px;color:#aab3b6}
.viewer-close{position:absolute;top:16px;right:20px;background:none;border:1px solid #ffffff59;padding:8px 14px;font-size:14px}
.viewer-step{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;display:grid;place-items:center;background:none;border:1px solid #ffffff40}
.viewer-step:hover{border-color:#fff}
.viewer-step svg{width:18px;height:18px}
.viewer-prev{left:20px}.viewer-next{right:20px}
.viewer-step[hidden]{display:none}
.viewer-open{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js [data-fade]{opacity:1;transform:none}
  .statement{height:auto}.statement-pin{position:relative;height:auto;padding-block:140px}
  .statement-text .w{color:#cdb98a}.statement-text .w.k{color:#fff}
}
@media (max-width:1000px){
  .nav{display:none}.menu-button{display:block}
  .offices-wrap{grid-template-columns:1fr}
  .bio-body{grid-template-columns:1fr}.bio-toc{display:none}
  .gallery-layout{grid-template-columns:1fr}.gallery-feature{position:static}
  .gallery-feature .panel{display:grid;grid-template-columns:140px 1fr;gap:4px 20px;align-items:start}
  .gallery-feature h2{grid-column:1/-1}.gallery-feature .view{grid-row:2/span 2}
  .gallery-feature p{margin-top:0}
  .news-card--lead{grid-template-columns:1fr;gap:20px}
  .news-grid,.latest-grid{grid-template-columns:repeat(2,1fr)}
  .glimpse-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  :root{--head:64px}
  body{font-size:16px}
  .mark-name{font-size:16px;letter-spacing:.12em}.mark-office{font-size:8.5px;letter-spacing:.15em}
  .cover-copy{bottom:120px}
  .cover-controls{left:var(--gutter);right:auto;bottom:40px}
  .statement{height:180vh}
  .offices-list li{grid-template-columns:1fr;gap:4px}
  .latest-grid,.news-grid{grid-template-columns:1fr;gap:44px}
  .row-head{flex-wrap:wrap}
  .bio{padding-top:calc(var(--head) + 32px)}
  .bio-head{grid-template-columns:1fr}
  .bio-facts div{grid-template-columns:100px 1fr}
  .bio-section>p{font-size:17px}
  .bio-photos--2,.bio-photos--3{grid-template-columns:1fr}
  .bio-press{padding:28px 22px}
  .thumbs{grid-template-columns:repeat(3,1fr);gap:8px}
  .gallery-albums{padding:22px 18px}
  .gallery-feature .panel{grid-template-columns:110px 1fr}
  .post-pager{grid-template-columns:1fr}.post-pager a[rel=next]{text-align:left}
  .footer-wrap{grid-template-columns:1fr}
  .viewer{padding:56px 12px 80px}
  .viewer-step{top:auto;bottom:16px;transform:none}
}