/* ==========================================================================
   ogagaodjugo.com — shared stylesheet
   Edit colours and type here once; all three pages pick the change up.
   ========================================================================== */
:root{
  --paper:#FBFAF8;
  --ink:#17181B;
  --muted:#6C6C66;
  --faint:#8E8E86;
  --rule:rgba(23,24,27,.14);
  --hairline:rgba(23,24,27,.08);
  --oxblood:#8C2B2B;
  --measure:46rem;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  --serif:"Newsreader",Georgia,serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#111214;
    --ink:#E8E7E3;
    --muted:#9A998F;
    --faint:#7C7B73;
    --rule:rgba(232,231,227,.16);
    --hairline:rgba(232,231,227,.09);
    --oxblood:#C86A62;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
main{max-width:var(--measure);margin:0 auto;padding:0 1.75rem 5rem}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--oxblood);outline-offset:3px;border-radius:2px}
p{margin:0}

/* ---- masthead & navigation ---- */
.masthead{padding:4.5rem 0 2.5rem}
.masthead h1{
  font-size:clamp(1.9rem,5.4vw,2.4rem);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.15;
  margin:0;
}
.masthead h1 a{color:inherit}
.place{
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--oxblood);
  margin-top:.55rem;
}
.mark{width:44px;height:2px;background:var(--oxblood);margin:1.15rem 0 1rem}
.standfirst{max-width:36em;color:var(--muted);font-size:.9375rem}

.nav{
  display:flex;
  gap:1.6rem;
  margin:1.6rem 0 0;
  padding:0;
  list-style:none;
  font-size:.875rem;
}
.nav a{
  color:var(--muted);
  padding-bottom:.2rem;
  border-bottom:1px solid transparent;
}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--oxblood)}

/* ---- sections ---- */
.band{padding:2.1rem 0;border-top:1px solid var(--rule)}
.band > h2{
  font-family:var(--mono);
  font-size:.6875rem;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--faint);
  margin:0 0 1.25rem;
}

/* ---- biography (home page) ---- */
.bio{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:2.25rem;align-items:start}
.portrait{
  aspect-ratio:4/5;
  background:var(--hairline);
  border:1px solid var(--rule);
  overflow:hidden;
}
.portrait img{width:100%;height:100%;object-fit:cover;display:block}
.portrait figcaption{
  font-family:var(--mono);
  font-size:.6875rem;
  color:var(--faint);
  margin-top:.5rem;
  line-height:1.5;
}
.portrait.second{margin-top:1.5rem}
.bio p + p{margin-top:.95rem}
.bio h3{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:1.2rem;
  margin:2rem 0 .6rem;
}
.bio h3:first-child{margin-top:0}
.bio .closing{color:var(--muted);font-size:.9375rem}

/* ---- focus list ---- */
.focus{display:flex;flex-wrap:wrap;gap:.4rem .5rem;font-size:.8125rem;color:var(--muted)}
.focus span{border:1px solid var(--rule);padding:.28rem .6rem;white-space:nowrap}

/* ---- dated entries (CV page) ---- */
.entry{
  display:grid;
  grid-template-columns:7.5rem minmax(0,1fr);
  gap:1.5rem;
  padding:1.35rem 0;
  border-top:1px solid var(--hairline);
}
.band > .entry:first-of-type{border-top:0;padding-top:0}
.years{
  font-family:var(--mono);
  font-size:.75rem;
  color:var(--faint);
  padding-top:.2rem;
  white-space:nowrap;
}
.role{font-weight:500;display:block}
.org{display:block;color:var(--muted);font-size:.875rem;margin-top:.1rem}
.points{margin:.7rem 0 0;padding:0;list-style:none}
.points li{
  position:relative;
  padding-left:1.05rem;
  font-size:.875rem;
  line-height:1.65;
  color:var(--muted);
  margin-top:.45rem;
}
.points li::before{
  content:"";
  position:absolute;
  left:0;
  top:.7em;
  width:7px;
  height:1px;
  background:var(--oxblood);
  opacity:.75;
}

/* ---- publications ---- */
.cite{
  padding:1.05rem 0;
  border-top:1px solid var(--hairline);
  max-width:40em;
  font-size:.9375rem;
}
.band > .cite:first-of-type{border-top:0;padding-top:0}
.cite em{font-family:var(--serif);font-style:italic;font-size:1.05em}
.cite .note{display:block;color:var(--faint);font-size:.8125rem;margin-top:.15rem}
.cite .abstract{display:block;color:var(--muted);font-size:.875rem;margin-top:.5rem;max-width:38em}
.read{
  display:inline-block;
  margin-top:.4rem;
  font-size:.8125rem;
  color:var(--oxblood);
  border-bottom:1px solid transparent;
}
.read:hover{border-bottom-color:var(--oxblood)}
.status{
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--oxblood);
  margin-right:.5rem;
}

/* ---- credential columns ---- */
.columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.9rem}
.columns h3{
  font-family:var(--mono);
  font-size:.6875rem;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--faint);
  margin:0 0 .7rem;
}
.columns ul{margin:0;padding:0;list-style:none;color:var(--muted);font-size:.875rem}
.columns li + li{margin-top:.3rem}

/* ---- contact ---- */
.contact{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.5rem}
.availability{color:var(--muted);font-size:.875rem;max-width:30em;margin-bottom:1.1rem}
.email{font-family:var(--mono);font-size:.875rem;border-bottom:1px solid var(--rule)}
.email:hover{border-bottom-color:var(--oxblood)}
.links{display:flex;gap:1.1rem}
.links a{color:var(--faint);display:inline-flex}
.links a:hover{color:var(--oxblood)}
.links svg{width:19px;height:19px;display:block}

.print-only{display:none}

/* ---- footer ---- */
.foot{
  border-top:1px solid var(--rule);
  padding-top:1.4rem;
  font-family:var(--mono);
  font-size:.6875rem;
  color:var(--faint);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.6rem 1.5rem;
}
.foot a:hover{color:var(--oxblood)}

/* ---- motion: one page-load rise, nothing else ---- */
.reveal{opacity:0;transform:translateY(6px);animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards}
.d1{animation-delay:.02s}.d2{animation-delay:.1s}.d3{animation-delay:.16s}
.d4{animation-delay:.22s}.d5{animation-delay:.28s}.d6{animation-delay:.34s}
.d7{animation-delay:.4s}.d8{animation-delay:.46s}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;animation:none}}

/* ---- narrow ---- */
@media (max-width:36rem){
  main{padding:0 1.25rem 3.5rem}
  .masthead{padding-top:3rem}
  .bio{grid-template-columns:1fr;gap:1.5rem}
  .portrait{width:8.5rem}
  .portrait.second{display:none}
  .entry{grid-template-columns:1fr;gap:.35rem}
  .years{padding-top:0}
  .nav{gap:1.2rem}
}
@media print{
  body{background:#fff;color:#000;font-size:9.25pt;line-height:1.4}
  main{max-width:none;padding:0}
  .reveal{opacity:1;transform:none;animation:none}
  .links,.portrait,.nav,.foot,.masthead .read{display:none}
  .print-only{display:block;margin-top:.5rem}
  .no-print{display:none}
  .bio{grid-template-columns:1fr}
  .masthead{padding:0 0 .9rem}
  .masthead h1{font-size:20pt}
  .standfirst{font-size:9.5pt}
  .mark{margin:.6rem 0 .6rem}
  .band{padding:.85rem 0}
  .band > h2{margin-bottom:.6rem}
  .entry{padding:.5rem 0;gap:1rem;grid-template-columns:8.2rem minmax(0,1fr);break-inside:avoid}
  .points{margin-top:.3rem}
  .points li{margin-top:.2rem;font-size:9pt;line-height:1.4}
  .org{font-size:9pt}
  .cite{padding:.5rem 0;font-size:9.5pt;max-width:none;break-inside:avoid}
  .columns{grid-template-columns:repeat(3,1fr);gap:1rem}
  .band:has(#credentials),.band:has(#education),.band:has(#leadership){break-inside:avoid}
  .columns ul{font-size:9pt}
  .email{border-bottom:0;font-size:9pt}
  .availability{margin-bottom:.4rem}
}