:root{
  --ink:#0e1726;
  --ink-soft:#28344a;
  --paper:#f6f3ec;
  --paper-2:#efe9dc;
  --red:#c1121f;
  --red-dark:#8d0d17;
  --line:#d8cfbe;
  --muted:#5a6577;
  --gold:#b0894b;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* top bar */
.topbar{background:var(--ink);color:#e9e3d6;font-size:12.5px;letter-spacing:.03em;border-bottom:3px solid var(--red)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:40px;flex-wrap:wrap;gap:8px;padding-top:6px;padding-bottom:6px}
.topbar .rni{opacity:.75}
.topbar .socials{display:flex;gap:16px}
.topbar .socials a{opacity:.8;transition:opacity .2s}
.topbar .socials a:hover{opacity:1;color:#fff}

/* nav */
nav{position:sticky;top:0;z-index:50;background:rgba(246,243,236,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;justify-content:space-between;align-items:center;height:66px}
.brand{font-family:'Fraunces',serif;font-weight:900;font-size:21px;letter-spacing:-.01em}
.brand span{color:var(--red)}
.navlinks{display:flex;gap:30px;font-size:14.5px;font-weight:500}
.navlinks a{position:relative;padding:4px 0;color:var(--ink-soft)}
.navlinks a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--red);transition:width .25s}
.navlinks a:hover,.navlinks a.active{color:var(--ink)}
.navlinks a:hover::after,.navlinks a.active::after{width:100%}
.menu-btn{display:none;background:none;border:none;font-size:26px;cursor:pointer;color:var(--ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;font-weight:600;font-size:14.5px;border-radius:2px;transition:transform .15s, box-shadow .2s, background .2s;cursor:pointer;border:none}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 6px 20px -8px rgba(193,18,31,.6)}
.btn-primary:hover{transform:translateY(-2px);background:var(--red-dark)}
.btn-ghost{border:1.5px solid var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}

/* page header (interior pages) */
.pagehead{background:var(--ink);color:var(--paper);padding:64px 0;position:relative;overflow:hidden;border-bottom:4px solid var(--red)}
.pagehead::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,rgba(193,18,31,.15),transparent 45%)}
.pagehead .wrap{position:relative}
.pagehead .crumb{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#e79aa0;margin-bottom:16px;font-weight:600}
.pagehead h1{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(34px,5.4vw,58px);line-height:1.02;letter-spacing:-.02em;color:#fff}
.pagehead p{margin-top:18px;font-size:17px;color:#b9c1cf;max-width:60ch}

/* sections */
section.block{padding:88px 0}
.sec-head{margin-bottom:48px;max-width:760px}
.sec-kicker{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red-dark);margin-bottom:14px}
.sec-head h2{font-family:'Fraunces',serif;font-weight:800;font-size:clamp(30px,4vw,44px);line-height:1.08;letter-spacing:-.015em}
.sec-head p{margin-top:16px;font-size:17px;color:var(--muted)}

/* footer */
footer{background:#0a111d;color:#8791a3;font-size:13px}
footer .ftop{padding:56px 0 40px;border-bottom:1px solid rgba(255,255,255,.08)}
footer .ftop .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
footer h4{font-family:'Fraunces',serif;color:#fff;font-size:20px;margin-bottom:14px}
footer h4 span{color:var(--red)}
footer .fcol p{margin-bottom:8px;color:#9aa4b4}
footer .fcol a{color:#cdd5e2;display:block;margin-bottom:8px}
footer .fcol a:hover{color:#fff}
footer .flabel{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#6b7688;margin-bottom:16px}
footer .fbot{padding:22px 0}
footer .fbot .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:none}

@media(max-width:900px){
  .navlinks{display:none;position:absolute;top:66px;left:0;right:0;background:var(--paper);flex-direction:column;padding:18px 28px;gap:16px;border-bottom:1px solid var(--line)}
  .navlinks.show{display:flex}
  .menu-btn{display:block}
  footer .ftop .wrap{grid-template-columns:1fr;gap:28px}
}
@media(max-width:520px){section.block{padding:58px 0}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}.reveal{opacity:1;transform:none}}

/* lightbox (shared) */
.lb{position:fixed;inset:0;background:rgba(6,10,18,.94);z-index:200;display:none;align-items:center;justify-content:center;padding:30px}
.lb.open{display:flex}
.lb img{max-width:90vw;max-height:86vh;box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}
.lb .close{position:absolute;top:22px;right:28px;font-size:38px;color:#fff;cursor:pointer;line-height:1}
.lb .nav{position:absolute;top:50%;transform:translateY(-50%);font-size:44px;color:#fff;cursor:pointer;user-select:none;padding:10px;opacity:.7;transition:opacity .2s}
.lb .nav:hover{opacity:1}
.lb .prev{left:16px}.lb .next{right:16px}

/* ============================================================
   ADDITIONS — accessibility, chrome, polish
   ============================================================ */

/* skip link — first tab stop on every page */
.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--red);color:#fff;
  padding:12px 22px;font-weight:600;font-size:14.5px;border-radius:0 0 3px 0}
.skip-link:focus{left:0}

/* visible keyboard focus everywhere */
:where(a,button,[tabindex],summary,input,textarea):focus-visible{
  outline:3px solid var(--red);outline-offset:3px;border-radius:2px}
.lb :focus-visible{outline-color:#fff}

/* reading-progress bar under the sticky nav */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--red);
  z-index:120;transition:width .1s linear;pointer-events:none}

/* nav gains depth once the page is scrolled */
nav{transition:box-shadow .25s,background .25s}
nav.scrolled{box-shadow:0 8px 24px -18px rgba(14,23,38,.55);background:rgba(246,243,236,.97)}

/* animated hamburger */
.menu-btn{width:44px;height:44px;display:none;align-items:center;justify-content:center;
  padding:0;position:relative}
.menu-bars,.menu-bars::before,.menu-bars::after{position:absolute;left:50%;width:22px;height:2px;
  background:var(--ink);transform:translateX(-50%);transition:transform .28s,opacity .2s}
.menu-bars{top:50%;margin-top:-1px}
.menu-bars::before,.menu-bars::after{content:"";left:0;transform:none}
.menu-bars::before{top:-7px}
.menu-bars::after{top:7px}
.menu-btn.is-open .menu-bars{background:transparent}
.menu-btn.is-open .menu-bars::before{transform:translateY(7px) rotate(45deg)}
.menu-btn.is-open .menu-bars::after{transform:translateY(-7px) rotate(-45deg)}

/* back-to-top */
.to-top{position:fixed;right:22px;bottom:22px;z-index:110;width:48px;height:48px;
  display:grid;place-items:center;background:var(--ink);color:#fff;border:none;cursor:pointer;
  border-radius:50%;opacity:0;visibility:hidden;transform:translateY(12px);
  box-shadow:0 12px 28px -12px rgba(14,23,38,.7);transition:opacity .25s,transform .25s,visibility .25s,background .2s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--red)}
.to-top svg{width:20px;height:20px}

/* lightbox chrome: counter + caption */
.lb{flex-direction:column;gap:16px}
.lb .lb-figure{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:min(94vw,1100px)}
.lb .lb-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  color:#cdd5e2;font-size:13.5px;text-align:center}
.lb .lb-count{flex:0 0 auto;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  padding:5px 12px;border-radius:99px;font-weight:600;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.lb .lb-caption{max-width:60ch;line-height:1.45;color:#a7b0c0}
.lb .close,.lb .nav{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  border-radius:50%;width:48px;height:48px;display:grid;place-items:center;padding:0;
  transition:background .2s,transform .2s}
.lb .close:hover,.lb .nav:hover{background:var(--red);border-color:var(--red);transform:scale(1.06)}
.lb .nav{font-size:34px}
.lb .close{font-size:30px}
@media(max-width:520px){
  .lb{padding:16px}
  .lb .nav{width:42px;height:42px;font-size:28px}
  .lb .prev{left:8px}.lb .next{right:8px}
  .lb .lb-caption{display:none}
}

/* thumbnails are real controls now — make that obvious */
[data-lb]{cursor:zoom-in}
[data-lb]:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* "load more" button */
.more-wrap{text-align:center;margin-top:34px}
.more-wrap .count{display:block;font-size:13px;color:var(--muted);margin-top:14px;
  letter-spacing:.05em}

/* generic section utility used by the new contact + 404 blocks */
.lede{font-size:17px;color:var(--muted);max-width:62ch}

/* print — a clean CV-style printout */
@media print{
  .topbar,nav,.to-top,.scroll-progress,.skip-link,.lb,.ctaband,.menu-btn,
  .center-cta,.hon-cta,.more-wrap{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .reveal{opacity:1!important;transform:none!important}
  section.block{padding:18px 0;break-inside:avoid}
  .pagehead,.stats,.honours,.pub-card,.social-block{background:#fff!important;color:#000!important;
    border:1px solid #ccc}
  .pagehead h1,.honours .sec-head h2,.pub-card h3,.stat .num{color:#000!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  img{max-height:8cm}
  footer{background:#fff!important;color:#000!important;border-top:2px solid #000}
}

/* re-assert the mobile breakpoint after the .menu-btn rules above */
@media(max-width:900px){.menu-btn{display:flex}}
@media(min-width:901px){.menu-btn{display:none}}

/* long URLs / unbreakable strings must never widen the page */
body{overflow-wrap:break-word}
.wrap>*{min-width:0}

/* items beyond the first page of the gallery (JS-only; all render without JS) */
.is-hidden{display:none!important}