/* Dapo Ogunkola — site styles (v2) */

:root{
  --ink:#0b1a17;
  --ink-2:#10241f;
  --ink-3:#152e28;
  --line:#22403a;
  --line-soft:#1a332e;
  --brass:#c9a96e;
  --brass-2:#e6d0a1;
  --brass-dim:#8c7549;
  --paper:#eceeea;
  --mute:#93a79f;
  --measure:64ch;
  --nav-h:64px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px)}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:"Public Sans",system-ui,sans-serif;
  font-weight:300;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit}
::selection{background:var(--brass);color:var(--ink)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 32px}

h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:300;letter-spacing:-.012em;margin:0}

/* ---------- nav ---------- */

.nav{
  position:sticky;
  top:0;
  z-index:50;
  height:var(--nav-h);
  background:rgba(11,26,23,.84);
  -webkit-backdrop-filter:blur(10px);
          backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}

.nav-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.mark{
  font-family:"Fraunces",Georgia,serif;
  font-size:1.05rem;
  font-weight:400;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:11px;
}

.mark::before{
  content:"";
  width:12px;height:12px;
  border-radius:50%;
  border:1.5px solid var(--brass);
  box-shadow:inset 0 0 0 3px var(--ink),inset 0 0 0 4px var(--brass-dim);
}

.nav-links{display:flex;gap:28px;font-size:.93rem}

.nav-links a{
  text-decoration:none;
  color:var(--mute);
  position:relative;
  padding:4px 0;
  transition:color .18s ease;
}

.nav-links a::after{
  content:"";
  position:absolute;left:0;right:100%;bottom:0;
  height:1px;background:var(--brass);
  transition:right .22s ease;
}

.nav-links a:hover{color:var(--paper)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{right:0}
.nav-links a[aria-current="page"]{color:var(--paper)}

.progress{
  position:absolute;left:0;bottom:-1px;
  height:1px;width:0;
  background:var(--brass);
  transition:width .08s linear;
}

/* ---------- hero ---------- */

.hero{position:relative;overflow:hidden;background:var(--ink)}

.hero::after{
  content:"";
  position:absolute;inset:auto 0 0 0;height:1px;
  background:linear-gradient(90deg,var(--line) 0%,var(--brass-dim) 40%,transparent 100%);
}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 440px;
  gap:64px;
  align-items:end;
  padding-top:96px;
}

.hero-copy{position:relative;z-index:3;padding-bottom:88px;max-width:34em}

.name{
  font-size:clamp(3rem,7.4vw,5.2rem);
  line-height:.98;
  margin:0 0 .45em;
  font-variation-settings:"opsz" 144;
}

.standfirst{
  font-family:"Fraunces",Georgia,serif;
  font-style:italic;
  font-weight:300;
  font-size:clamp(1.25rem,2.5vw,1.55rem);
  line-height:1.38;
  letter-spacing:-.005em;
  color:var(--brass-2);
  margin:0 0 1.1em;
  max-width:22em;
}

.hero-note{color:var(--mute);max-width:31em;margin:0 0 2.2em}

.actions{display:flex;flex-wrap:wrap;gap:14px}

.btn{
  display:inline-block;
  padding:12px 24px;
  border:1px solid var(--brass-dim);
  border-radius:3px;
  text-decoration:none;
  font-size:.94rem;
  font-weight:400;
  color:var(--paper);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}

.btn:hover{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.btn.quiet{border-color:var(--line);color:var(--mute)}
.btn.quiet:hover{color:var(--paper);border-color:var(--brass-dim);background:transparent}

.portrait{position:relative;margin:0;align-self:end;z-index:2}

.portrait img{
  position:relative;z-index:2;
  display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);
}

#rosette{
  position:absolute;z-index:1;
  top:38%;left:58%;
  width:168%;height:auto;
  transform:translate(-50%,-50%);
  opacity:.6;
  pointer-events:none;
}

#rosette path{
  fill:none;
  stroke:var(--brass);
  stroke-width:.55;
  vector-effect:non-scaling-stroke;
}

/* ---------- page header (interior) ---------- */

.page-head{padding:88px 0 0;position:relative}

.page-head h1{
  font-size:clamp(2.4rem,5.4vw,3.6rem);
  line-height:1.02;
  margin:0 0 .35em;
}

.page-head p{
  font-family:"Fraunces",Georgia,serif;
  font-style:italic;
  font-size:clamp(1.15rem,2.2vw,1.4rem);
  line-height:1.4;
  color:var(--brass-2);
  max-width:30em;
  margin:0 0 72px;
}

/* ---------- sections ---------- */

section{padding:88px 0}
section + section{border-top:1px solid var(--line-soft)}

h2{font-size:clamp(1.7rem,3.4vw,2.25rem);line-height:1.12;margin:0 0 .25em}

.section-note{color:var(--mute);max-width:var(--measure);margin:0 0 52px}

/* ---------- practice areas ---------- */

.areas{display:grid;grid-template-columns:1fr 1fr;gap:44px 56px}

.area h3{font-weight:400;font-size:1.28rem;line-height:1.25;margin:0 0 10px;position:relative;padding-left:22px}

.area h3::before{
  content:"";
  position:absolute;left:0;top:.66em;
  width:11px;height:1px;background:var(--brass);
}

.area p{margin:0 0 0 22px;color:var(--mute);max-width:42ch}
.area p strong{color:var(--paper);font-weight:400}

/* ---------- credentials rail ---------- */

.rail{
  position:relative;
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:18px;
  padding-top:34px;
}

.rail::before{
  content:"";
  position:absolute;left:0;right:0;top:12px;
  height:1px;
  background:linear-gradient(90deg,var(--brass-dim),var(--brass) 50%,var(--brass-dim));
}

.node{position:relative}

.node::before{
  content:"";
  position:absolute;left:0;top:-27px;
  width:9px;height:9px;border-radius:50%;
  background:var(--ink);
  border:1.5px solid var(--brass);
}

.node .yr{
  display:block;
  font-family:"Fraunces",Georgia,serif;
  font-style:italic;
  font-size:.92rem;
  color:var(--brass);
  margin-bottom:10px;
  font-variant-numeric:tabular-nums;
}

.node b{
  display:block;
  font-family:"Fraunces",Georgia,serif;
  font-weight:400;
  font-size:1.55rem;
  letter-spacing:.005em;
  line-height:1;
  margin-bottom:8px;
}

.node span{display:block;font-size:.84rem;line-height:1.4;color:var(--mute)}
.node em{display:block;font-style:normal;font-size:.8rem;color:var(--brass-dim);margin-top:5px}

/* ---------- career chronology ---------- */

.chrono{margin:0;padding:0;list-style:none}

.chrono > li{
  display:grid;
  grid-template-columns:160px 1fr;
  gap:8px 40px;
  padding:34px 0;
}

.chrono > li + li{border-top:1px solid var(--line-soft)}

.chrono .years{
  font-family:"Fraunces",Georgia,serif;
  font-style:italic;
  font-size:1rem;
  color:var(--brass);
  padding-top:.2em;
  font-variant-numeric:tabular-nums;
}

.chrono .role{display:block;font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:1.28rem;line-height:1.28}
.chrono .firm{display:block;font-size:.95rem;color:var(--paper);margin:4px 0 12px}
.chrono .firm em{font-style:normal;color:var(--mute)}
.chrono .detail{margin:0;color:var(--mute);font-size:.95rem;max-width:64ch}

.chrono .sub{margin:16px 0 0;padding:0;list-style:none}

.chrono .sub li{
  position:relative;
  padding:12px 0 0 20px;
  color:var(--mute);
  font-size:.93rem;
  line-height:1.55;
  max-width:62ch;
}

.chrono .sub li::before{
  content:"";
  position:absolute;left:0;top:1.6em;
  width:9px;height:1px;background:var(--brass);
}

.chrono .sub b{display:block;color:var(--paper);font-weight:400}

.edu{
  display:grid;
  grid-template-columns:160px 1fr;
  gap:40px;
  margin-top:8px;
  padding-top:34px;
  border-top:1px solid var(--line-soft);
}

.edu .years{font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:1rem;color:var(--brass);font-variant-numeric:tabular-nums}
.edu b{display:block;font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:1.18rem}
.edu span{color:var(--mute);font-size:.95rem}

/* ---------- firm plates ---------- */

.plates{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:14px;
  margin-top:56px;
}

.plate{
  min-height:96px;
  display:flex;align-items:center;justify-content:center;
  padding:22px 16px;
  text-align:center;
  border:1px solid var(--line);
  border-radius:4px;
  background:linear-gradient(170deg,var(--ink-2),var(--ink));
}

.plate span{
  font-family:"Fraunces",Georgia,serif;
  font-weight:400;
  font-size:1.02rem;
  letter-spacing:.015em;
  line-height:1.3;
}

.plate img{max-width:128px;max-height:44px;width:auto;height:auto;opacity:.92}

/* ---------- entries (speaking page) ---------- */

.entries{margin:0;padding:0;list-style:none}

.entry{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:8px 40px;
  padding:32px 0;
}

.entry + .entry{border-top:1px solid var(--line-soft)}

.entry .when{
  font-family:"Fraunces",Georgia,serif;
  font-style:italic;
  font-size:1rem;
  color:var(--brass);
  padding-top:.2em;
  font-variant-numeric:tabular-nums;
}

.entry h3{font-weight:400;font-size:1.28rem;line-height:1.28;margin:0 0 6px}
.entry h3 em{font-style:italic;font-weight:300}
.entry .host{display:block;color:var(--paper);font-size:.95rem;margin-bottom:12px}
.entry p{margin:0;color:var(--mute);max-width:58ch}
.entry p strong{color:var(--paper);font-weight:400}

/* ---------- topics / teasers ---------- */

.topics{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:34px 48px;
  margin:0;padding:0;list-style:none;
}

.topics li{position:relative;padding-left:22px}

.topics li::before{
  content:"";
  position:absolute;left:0;top:.7em;
  width:11px;height:1px;background:var(--brass);
}

.topics b{
  display:block;
  font-family:"Fraunces",Georgia,serif;
  font-weight:400;
  font-size:1.12rem;
  line-height:1.3;
  margin-bottom:6px;
}

.topics span{color:var(--mute);font-size:.93rem;line-height:1.55}

/* ---------- writing ---------- */

.pieces{margin:0;padding:0;list-style:none}

.piece + .piece{border-top:1px solid var(--line-soft)}

.piece a{display:block;padding:26px 0;text-decoration:none;max-width:var(--measure)}
.piece a:hover .piece-title{color:var(--brass-2)}

.piece-title{
  font-family:"Fraunces",Georgia,serif;
  font-weight:400;
  font-size:1.28rem;
  line-height:1.32;
  margin:0 0 6px;
  transition:color .18s ease;
}

.piece-meta{color:var(--mute);font-size:.9rem;margin:0}

/* ---------- links ---------- */

.lnk{
  color:var(--brass);
  text-decoration:none;
  border-bottom:1px solid rgba(201,169,110,.35);
  padding-bottom:2px;
  transition:border-color .18s ease,color .18s ease;
}

.lnk:hover{border-color:var(--brass-2);color:var(--brass-2)}
.more{display:inline-block;margin-top:44px;font-size:.95rem}

/* ---------- contact ---------- */

.contact{
  background:var(--ink-2);
  border-top:1px solid var(--line-soft);
  position:relative;
  overflow:hidden;
}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;position:relative;z-index:2}
.contact p{color:var(--mute);max-width:34ch;margin:0}

.contact-mail{
  display:inline-block;
  font-family:"Fraunces",Georgia,serif;
  font-size:clamp(1.3rem,2.9vw,1.85rem);
  font-weight:300;
  text-decoration:none;
  border-bottom:1px solid var(--brass-dim);
  padding-bottom:4px;
  transition:color .18s ease,border-color .18s ease;
  word-break:break-word;
}

.contact-mail:hover{color:var(--brass-2);border-color:var(--brass-2)}

.contact-alt{display:block;margin-top:22px;font-size:.93rem;color:var(--mute)}

footer{padding:34px 0 52px;color:var(--mute);font-size:.86rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 32px}
footer p{margin:0;max-width:52ch}

/* ---------- load sequence ---------- */

.reveal{opacity:0;transform:translateY(10px)}

.loaded .reveal{
  opacity:1;transform:none;
  transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.3,1);
}

.loaded .reveal:nth-child(2){transition-delay:.1s}
.loaded .reveal:nth-child(3){transition-delay:.2s}
.loaded .reveal:nth-child(4){transition-delay:.3s}

.portrait{opacity:0;transition:opacity 1.2s ease .4s}
.loaded .portrait{opacity:1}

/* ---------- responsive ---------- */

@media (max-width:1000px){
  .rail{grid-template-columns:repeat(4,1fr);gap:40px 18px;padding-top:0}
  .rail::before{display:none}
  .node{padding-top:22px;border-top:1px solid var(--line-soft)}
  .node::before{top:-5px;left:0}
  .plates{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:36px;padding-top:64px}
  .hero-copy{padding-bottom:0}
  .portrait{max-width:330px;margin-top:8px}
  #rosette{width:190%;top:44%;left:50%}
  .areas{grid-template-columns:1fr;gap:34px}
  .chrono > li,.edu,.entry{grid-template-columns:1fr;gap:6px}
  .contact-grid{grid-template-columns:1fr;gap:32px}
  section{padding:64px 0}
  .page-head{padding-top:60px}
  .page-head p{margin-bottom:52px}
  .nav-links{gap:18px;font-size:.9rem}
}

@media (max-width:560px){
  .wrap{padding:0 22px}
  .rail{grid-template-columns:1fr 1fr}
  .plates{grid-template-columns:1fr 1fr}
  .nav-links a:last-child{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.portrait{opacity:1;transform:none;transition:none}
  #rosette path{stroke-dasharray:none !important;stroke-dashoffset:0 !important}
  *{transition-duration:.01ms !important}
}