/* oluwasegun.me
   Layout: a registry record. Mono field labels in a left rail, content on the right,
   one adire band as the only ornament. Indigo from adire cloth, yellow from canola fields. */
:root{
  --paper:#eef0f3;
  --sheet:#f8f9fb;
  --ink:#16204f;
  --ink-2:#4a5379;
  --rule:#c9cedb;
  --canola:#f2c230;
  --canola-ink:#16204f;
  --band-bg:#1b2766;
  --band-fg:#dfe4f4;

  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;

  --s-xs:.75rem; --s-sm:.9rem; --s-md:1.0625rem; --s-lg:1.35rem; --s-xl:2rem;
  --rail:9.5rem;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0e1330; --sheet:#141a3d; --ink:#e3e7f5; --ink-2:#a3abcf; --rule:#2c3563;
  --canola:#f2c230; --canola-ink:#10153a; --band-bg:#1d2a70; --band-fg:#c9d1f0; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0e1330; --sheet:#141a3d; --ink:#e3e7f5; --ink-2:#a3abcf; --rule:#2c3563;
  --canola:#f2c230; --canola-ink:#10153a; --band-bg:#1d2a70; --band-fg:#c9d1f0; color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:var(--s-md);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-color:var(--canola);text-decoration-thickness:2px}
a:focus-visible,button:focus-visible{outline:2px solid var(--canola);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:16px;top:16px;background:var(--canola);color:var(--canola-ink);padding:.5rem .75rem;z-index:20}

.wrap{max-width:70rem;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.mono{font-family:var(--f-mono);font-size:var(--s-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
mark{background:linear-gradient(transparent 58%,var(--canola) 58%,var(--canola) 92%,transparent 92%);color:inherit;padding:0 .1em}

/* top strip */
.strip{display:flex;justify-content:space-between;align-items:center;gap:.75rem 1.5rem;flex-wrap:wrap;padding-block:1rem;border-bottom:1px solid var(--rule)}
.strip nav{display:flex;gap:1.25rem;flex-wrap:wrap}
.strip nav a{text-decoration:none}
.strip nav a:hover{color:var(--ink)}

/* hero */
.hero{padding-block:3rem 3rem;display:grid;grid-template-columns:var(--rail) minmax(0,1fr) minmax(14rem,20rem);gap:1.5rem 2rem;align-items:start}
.hero h1{grid-column:1/-1;margin:0;font-family:var(--f-display);font-stretch:118%;font-weight:760;
  font-size:clamp(2.5rem,8.2vw,6.4rem);line-height:.92;letter-spacing:-.02em}
.hero h1 span{display:block;font-stretch:72%;font-weight:500;color:var(--ink-2)}
.hero .code{grid-column:1;padding-top:.55rem}
.hero .lede{grid-column:2;min-width:0}
.thesis{margin:0 0 1.5rem;max-width:30ch;font-size:clamp(1.3rem,2.5vw,1.65rem);line-height:1.32;text-wrap:balance}
.record{display:grid;grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr));border-top:1px solid var(--ink);margin:0}
.record div{padding:.7rem 1rem .85rem 0;border-bottom:1px solid var(--rule);min-width:0}
.record dt{font-family:var(--f-mono);font-size:var(--s-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.record dd{margin:.15rem 0 0;font-size:var(--s-sm);line-height:1.45}
.status{display:inline-flex;align-items:baseline;gap:.5rem}
.status::before{content:"";flex:none;width:.55rem;height:.55rem;border-radius:50%;background:var(--canola);box-shadow:0 0 0 2px var(--ink) inset;transform:translateY(-.05rem)}
.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.5rem}

.photo{grid-column:3;margin:0}
.photo img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--rule);filter:saturate(.92)}
.photo figcaption{display:flex;justify-content:space-between;gap:.5rem;margin-top:.5rem}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-mono);font-size:var(--s-xs);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  border:1px solid var(--ink);padding:.6rem .9rem;color:var(--ink);background:transparent;cursor:pointer}
.btn:hover{background:var(--ink);color:var(--paper);text-decoration:none}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.primary:hover{background:var(--canola);color:var(--canola-ink);border-color:var(--canola)}

/* adire band */
.band{background:var(--band-bg)}
.band canvas{display:block;width:100%;height:132px}
.band-cap{display:flex;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap;padding-block:.6rem 0}

/* sections */
main section{padding-block:3.25rem;border-top:1px solid var(--rule)}
main section:first-of-type{border-top:0}
.sec{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:1rem 2rem}
.sec>.code{padding-top:.45rem}
h2{margin:0 0 .75rem;font-family:var(--f-display);font-stretch:100%;font-weight:700;font-size:var(--s-xl);line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
.intro{color:var(--ink-2);margin-bottom:2rem}
h3{margin:0;font-family:var(--f-display);font-stretch:108%;font-weight:680;font-size:var(--s-lg);line-height:1.2;text-wrap:balance}
p{margin:0 0 1rem;max-width:62ch}

/* capabilities */
.caps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 3rem;margin:0;padding:0;list-style:none}
.cap{padding:1.4rem 0 1.5rem;border-top:1px solid var(--ink);display:flex;flex-direction:column;gap:.55rem}
.cap h3{font-size:1.2rem}
.cap p{margin:0;font-size:var(--s-sm)}
.cap .proof{margin-top:auto;padding-top:.35rem;font-size:var(--s-xs)}
.tags{display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0;list-style:none}
.tags li{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.02em;border:1px solid var(--rule);padding:.15rem .45rem;color:var(--ink-2)}

/* selected work */
.work{list-style:none;margin:0;padding:0}
.work li{display:grid;grid-template-columns:7.5rem minmax(0,1fr) minmax(0,12rem);gap:.5rem 1.5rem;padding:1.1rem 0;border-bottom:1px solid var(--rule)}
.work li:first-child{border-top:1px solid var(--ink)}
.work .yr{font-family:var(--f-mono);font-size:var(--s-xs);color:var(--ink-2);padding-top:.3rem;font-variant-numeric:tabular-nums}
.work h3{font-size:1.12rem;margin-bottom:.3rem}
.work p{margin:0;font-size:var(--s-sm)}
.work .org{font-family:var(--f-mono);font-size:var(--s-xs);color:var(--ink-2);padding-top:.3rem;text-align:right}

/* community */
.community{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1.5rem 3rem;align-items:start}
.facts{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.facts li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--rule);font-size:var(--s-sm)}
.facts li span:first-child{font-family:var(--f-mono);font-size:var(--s-xs);color:var(--ink-2);padding-top:.15rem;white-space:nowrap}
.facts li span:last-child{text-align:right}

/* history */
.trail-wrap{overflow-x:auto}
.trail{width:100%;border-collapse:collapse;font-size:var(--s-sm);font-variant-numeric:tabular-nums}
.trail th{text-align:left;font-family:var(--f-mono);font-weight:400;font-size:var(--s-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);padding:0 1rem .6rem 0;border-bottom:1px solid var(--ink)}
.trail td{padding:.65rem 1rem .65rem 0;border-bottom:1px solid var(--rule);vertical-align:top}
.trail td:first-child,.trail td:nth-child(2){font-family:var(--f-mono);font-size:var(--s-xs);white-space:nowrap;padding-top:.8rem}
.trail td:nth-child(2){color:var(--ink-2)}
.trail tr.mark td{background:color-mix(in srgb,var(--canola) 18%,transparent)}
.aside{margin:2rem 0 0;padding-left:1.25rem;border-left:3px solid var(--canola);max-width:56ch;font-style:italic}

/* credentials */
.creds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 3rem;margin:0;padding:0;list-style:none}
.creds li{display:flex;justify-content:space-between;gap:1rem;padding:.65rem 0;border-bottom:1px solid var(--rule);font-size:var(--s-sm);min-width:0}
.creds li span:last-child{font-family:var(--f-mono);font-size:var(--s-xs);color:var(--ink-2);white-space:nowrap;padding-top:.15rem}
.creds-h{margin:2rem 0 .5rem}
.creds-h:first-of-type{margin-top:0}

/* notes */
.notes{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.notes li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--rule)}
.notes li p{margin:.25rem 0 0;font-size:var(--s-sm);color:var(--ink-2)}
.notes h3{font-size:1.12rem}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(12rem,16rem);gap:2rem 3rem;align-items:start}
.addr{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.addr a{font-family:var(--f-display);font-stretch:110%;font-weight:650;font-size:clamp(1.35rem,3.4vw,2rem);text-decoration:none;overflow-wrap:anywhere}
.addr a:hover{text-decoration:underline}
.links{list-style:none;margin:1.5rem 0 0;padding:0;border-top:1px solid var(--ink);max-width:34rem}
.links li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--rule);font-size:var(--s-sm)}
.links li span{font-family:var(--f-mono);font-size:var(--s-xs);color:var(--ink-2);padding-top:.15rem}
.contact .photo{grid-column:auto}

footer{border-top:1px solid var(--ink);padding-block:1.5rem 3rem;margin-top:1rem}
footer .wrap{display:flex;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap}

@media (max-width:900px){
  .hero{grid-template-columns:var(--rail) minmax(0,1fr)}
  .photo{grid-column:2;max-width:20rem}
  .work li{grid-template-columns:6.5rem minmax(0,1fr)}
  .work .org{grid-column:2;text-align:left;padding-top:0}
}
@media (max-width:720px){
  .hero,.sec{grid-template-columns:minmax(0,1fr)}
  .hero .code,.hero .lede,.photo{grid-column:1}
  .photo{max-width:none}
  .caps,.creds,.community,.contact{grid-template-columns:minmax(0,1fr)}
  .work li{grid-template-columns:minmax(0,1fr)}
  .work .org{grid-column:1}
  .contact .photo{max-width:16rem}
}
@media (prefers-reduced-motion:no-preference){
  .hero h1{animation:set .8s cubic-bezier(.2,.7,.2,1) both}
  @keyframes set{from{font-stretch:70%;letter-spacing:.01em}to{}}
}
@media print{
  .band,.band-cap,.strip nav,.hero-actions,.photo{display:none}
  body{background:#fff;color:#000}
}