/*
Theme Name: Temitayo Olatunde
Theme URI: https://www.temitayoolatunde.co.uk
Author: Temitayo Olatunde
Description: Personal website theme for Temitayo Olatunde. Every page, section, text, button, image and list is edited in Appearance, Customize. Sections can be reordered or hidden on every page, and every list can be added to and reordered.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: temitayo
*/

:root{
	--bg:#ffffff; --soft:#f4f4f4; --ink:#1a1a1a; --muted:#666666; --line:#e3e3e3;
	--red:#c8102e; --black:#111111; --white:#ffffff;
	--head:"Montserrat","Helvetica Neue",Arial,sans-serif;
	--body:"Lato","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.65}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:100;background:var(--white);padding:8px 12px}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap.narrow{max-width:820px}
h1,h2,h3,h4{font-family:var(--head);margin:0;line-height:1.2;text-wrap:balance;color:var(--black)}
p{margin:0 0 16px}
.muted{color:var(--muted)}
.center{text-align:center}
.sec{padding-block:64px}
.sec.soft{background:var(--soft)}
.sec-title{font-family:var(--head);font-weight:800;font-size:clamp(1.5rem,3vw,2rem);letter-spacing:.08em;text-transform:uppercase;text-align:center;margin-bottom:12px}
.sec-title::after{content:"";display:block;width:56px;height:3px;background:var(--red);margin:14px auto 0}
.sec-sub{text-align:center;color:var(--muted);max-width:64ch;margin:0 auto 40px}
.sec-title + :not(.sec-sub){margin-top:32px}
.sec-btn{margin-top:40px}
.btn{display:inline-block;font:700 .85rem var(--head);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:14px 28px;background:var(--red);color:var(--white);border:2px solid var(--red);cursor:pointer}
.btn:hover{filter:brightness(.88)}
.btn.line-light{background:transparent;color:var(--white);border-color:var(--white)}
.btn.line-light:hover{background:var(--white);color:var(--black);filter:none}
.readmore{color:var(--red);font-weight:700;text-decoration:none;font-size:.92rem}
.hp{position:absolute;left:-9999px}
.notice-ok,.ok{color:#1f7a3a;font-weight:700}
.notice-err{color:var(--red);font-weight:700}

/* Header and menu */
.site-header{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid var(--line)}
.admin-bar .site-header{top:32px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.logo{text-decoration:none;display:flex;flex-direction:column;line-height:1.15;flex:0 1 auto;min-width:0}
.site-footer .logo{flex:none}
.logo b{font-family:var(--head);font-weight:800;font-size:1.35rem;color:var(--black)}
.logo small{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red);font-weight:700}
@media (min-width:1181px){.site-header .logo small{white-space:nowrap;letter-spacing:.12em}}
.logo-img{max-height:56px;width:auto}
.site-nav ul{list-style:none;margin:0;padding:0}
.site-nav>ul,.site-nav>div>ul{display:flex;gap:22px;align-items:center}
.site-nav li{position:relative}
.site-nav a{text-decoration:none;font:600 .8rem var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--black);padding-block:8px;display:inline-block;white-space:nowrap}
.site-nav a:hover,.site-nav .current-menu-item>a,.site-nav .current_page_item>a,.site-nav .current-menu-ancestor>a{color:var(--red)}
.site-nav .sub-menu,.site-nav .children{display:none;position:absolute;top:100%;left:-18px;padding:10px 0;background:var(--white);min-width:230px;box-shadow:0 10px 30px rgba(0,0,0,.1);border-top:3px solid var(--red);z-index:5}
.site-nav .sub-menu a,.site-nav .children a{display:block;padding:8px 18px}
.site-nav li:hover>.sub-menu,.site-nav li:focus-within>.sub-menu,.site-nav li:hover>.children,.site-nav li:focus-within>.children{display:block}
.menu-btn{display:none;background:var(--black);color:var(--white);border:0;font:700 .78rem var(--head);letter-spacing:.1em;text-transform:uppercase;padding:10px 16px;cursor:pointer}
@media (max-width:1180px){
	.menu-btn{display:block}
	.bar{flex-wrap:wrap}
	.site-nav{display:none;width:100%}
	.site-nav.open{display:block}
	.site-nav>ul,.site-nav>div>ul{flex-direction:column;align-items:flex-start;gap:0;padding-bottom:12px}
	.site-nav .sub-menu,.site-nav .children{display:block;position:static;box-shadow:none;border:0;padding:0 0 0 16px;min-width:0}
}
@media (max-width:782px){.admin-bar .site-header{top:0}}

/* Hero: one wide photo, line of text at the bottom */
.hero{position:relative;background:var(--black);color:var(--white);min-height:clamp(420px,72vh,760px);display:flex;align-items:flex-end;overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.65) 100%);pointer-events:none}
.hero--empty::after{display:none}
.hero-note{position:absolute;top:24px;left:50%;transform:translateX(-50%);font-size:.85rem;opacity:.6;text-align:center;width:90%}
.hero-inner{position:relative;z-index:1;padding-block:56px;width:100%}
.hero h1{color:var(--white);font-weight:500;font-size:clamp(1.15rem,2.3vw,1.75rem);letter-spacing:.03em;line-height:1.35;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.hero-tag{font:700 .78rem var(--head);letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px;opacity:.9}
.hero-text{max-width:56ch;font-size:1.08rem;opacity:.92;margin:16px 0 0}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
@media (max-width:700px){.hero{min-height:clamp(380px,75vh,620px)}.hero-inner{padding-block:36px}}

/* Page banner */
.banner{background-color:var(--black);background-size:cover;background-position:center;color:var(--white)}
.banner .wrap{padding-block:64px}
.banner h1{color:var(--white);font-weight:800;font-size:clamp(2rem,4.5vw,3.2rem);text-transform:uppercase;letter-spacing:.04em}
.banner-text{max-width:64ch;margin:14px 0 0;font-size:1.08rem;opacity:.9}
.crumbs{font-size:.85rem;opacity:.75;margin-top:12px}
.crumbs a{text-decoration:none}

/* Names strip: a quiet, refined band */
.logos-sec{padding-block:30px;background:var(--soft);border-bottom:1px solid var(--line)}
.logos-sec .sec-title{display:flex;align-items:center;justify-content:center;gap:14px;font:700 .68rem var(--head);letter-spacing:.24em;color:var(--red);margin-bottom:16px}
.logos-sec .sec-title::before,.logos-sec .sec-title::after{content:"";display:block;width:36px;height:1px;background:currentColor;margin:0;opacity:.6}
.logos-sec .sec-sub{font-size:.85rem;margin-bottom:12px}
.logos{list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:980px}
.logos li{display:flex}
.logos li>span,.logos li>a{display:inline-flex;align-items:center;font:500 .78rem var(--body);color:#3d3d3d;line-height:1.2;padding:7px 14px;background:var(--white);border:1px solid #e1e1e1;border-radius:999px;text-decoration:none;transition:border-color .2s,color .2s}
.logos li>a:hover{border-color:var(--red);color:var(--red)}
.logos img{max-height:22px;width:auto;filter:grayscale(1);opacity:.8}
@media (max-width:600px){.logos{gap:6px}.logos li>span,.logos li>a{font-size:.74rem;padding:6px 11px}}

/* Brief CV: compact three column band */
.cv-sec{background:var(--black);color:#e9e9e9;padding-block:44px}
.cv-sec .sec-title{color:var(--white)}
.cv-sec .sec-sub{color:#aaa}
.cv{display:grid;grid-template-columns:repeat(3,1fr);gap:0 36px;margin:0 auto;max-width:1080px}
.cv-item{min-width:0;padding:14px 0;border-top:1px solid #2b2b2b}
.cv dt{font:600 .62rem var(--head);letter-spacing:.16em;text-transform:uppercase;color:#8c8c8c;margin-bottom:4px}
.cv dd{margin:0;font-size:.9rem;color:#f2f2f2;line-height:1.4}
.cv .flag{font-size:.85rem;white-space:nowrap;margin-left:2px}
@media (max-width:900px){.cv{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cv{grid-template-columns:1fr}.cv-sec{padding-block:32px}}

/* Countries */
.countries{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;max-width:1080px}
@media (max-width:900px){.countries{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.countries{grid-template-columns:1fr 1fr}}
.countries li{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);background:var(--white);min-width:0}
.countries .flag{font-size:1.6rem;line-height:1;flex:0 0 auto}
.c-text{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.c-text b{font:700 .85rem var(--head);color:var(--black)}
.c-text small{font-size:.78rem;color:var(--muted)}

/* Articles */
.posts{display:grid;gap:28px;max-width:980px;margin:0 auto}
.post{display:grid;grid-template-columns:320px 1fr;gap:28px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:28px}
.post>*{min-width:0}
.post:last-child{border-bottom:0}
.thumb{aspect-ratio:16/10;background:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.85rem;text-align:center;overflow:hidden;text-decoration:none}
.thumb img{width:100%;height:100%;object-fit:cover}
.post h3,.card h3{font-size:1.25rem;font-weight:700;margin-bottom:8px}
.post h3 a,.card h3 a,.book h3 a{text-decoration:none}
.post h3 a:hover,.card h3 a:hover{color:var(--red)}
.date{font-size:.85rem;color:var(--muted);display:block;margin-top:6px}
@media (max-width:760px){.post{grid-template-columns:1fr}}
.source{display:block;font:700 .7rem var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:6px}
.thumb--source{background:var(--black);color:var(--white);font:700 1.05rem var(--head);letter-spacing:.04em;padding:20px}
.thumb--source span{border-top:2px solid var(--red);border-bottom:2px solid var(--red);padding:8px 4px}
.ext-icon{display:inline-block;font-size:.85em;transform:translateY(-1px)}

/* Grids */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.grid3>*{min-width:0}
.card{display:flex;flex-direction:column;gap:12px}
.card p{color:var(--muted);font-size:.97rem;margin:0}
@media (max-width:900px){.grid3{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.grid3{grid-template-columns:1fr}}

/* Photo Stories: every photo is resized to the same frame and fills it completely, no grey space */
.photos{display:grid;grid-template-columns:repeat(var(--cols,5),minmax(0,1fr));gap:22px 18px;align-items:start}
.photo{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.photo-img{display:block;aspect-ratio:4/5;overflow:hidden;cursor:zoom-in;background:var(--soft)}
.photo-img img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block;transition:transform .4s ease}
.photo-img:hover img{transform:scale(1.03)}
.photo-empty{display:flex;align-items:center;justify-content:center;line-height:1.3;text-align:center;padding:8px;color:#999;font-size:.8rem;cursor:default;border:1px dashed var(--line)}
.photo figcaption{display:flex;flex-direction:column;gap:2px}
.photo .cap{font-weight:700;font-size:13px;line-height:1.35}
.photo .place{font:700 11px var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
@media (max-width:1000px){.photos{grid-template-columns:repeat(var(--cols-t,4),minmax(0,1fr))}}
@media (max-width:760px){.photos{grid-template-columns:repeat(var(--cols-m,3),minmax(0,1fr));gap:14px 8px}.photo{gap:5px}.photo .cap{line-height:1.3}.photo .place{letter-spacing:.06em}.photo-empty{font-size:.6rem}}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;padding:48px 64px}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
.lightbox img{max-width:100%;max-height:80vh;width:auto;object-fit:contain}
.lightbox figcaption{color:#fff;text-align:center;max-width:70ch}
.lightbox button{position:absolute;background:none;border:0;color:#fff;font-size:2.6rem;line-height:1;cursor:pointer;padding:8px 14px}
.lb-close{top:12px;right:12px}
.lb-prev{left:8px;top:50%;transform:translateY(-50%)}
.lb-next{right:8px;top:50%;transform:translateY(-50%)}
@media (max-width:600px){.lightbox{padding:56px 12px}}

/* Video */
.vid{aspect-ratio:16/9;background:#1c1c1c center/cover no-repeat;position:relative;display:flex;align-items:center;justify-content:center;text-decoration:none}
.vid::before{content:"";width:64px;height:44px;border-radius:10px;background:var(--red)}
.vid::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-30%,-50%);border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.vid-note{position:absolute;left:12px;bottom:10px;color:#bbb;font-size:.8rem}

/* Quote band */
.speaks{background-color:var(--red);background-size:cover;background-position:center;color:var(--white)}
.speaks .wrap{padding-block:80px;text-align:center}
.speaks h2{color:var(--white);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:1.1rem;margin-bottom:24px}
.speaks blockquote{margin:0 auto;max-width:30ch;font-family:var(--head);font-weight:600;font-size:clamp(1.6rem,3.6vw,2.5rem);line-height:1.3}
.speaks cite{display:block;margin-top:24px;font-style:normal;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.85rem;opacity:.9}

/* Library */
.books{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;max-width:1000px;margin:0 auto}
.book{display:flex;flex-direction:column;gap:8px;text-align:center;min-width:0}
.book>a{text-decoration:none}
.cover,.cover-img{aspect-ratio:3/4;max-width:220px;width:100%;margin:0 auto 10px;box-shadow:6px 6px 0 var(--red)}
.cover{background:var(--black);color:var(--white);display:flex;flex-direction:column;justify-content:space-between;padding:22px 18px;text-align:left}
.cover-img{object-fit:cover}
.cover b{font-family:var(--head);font-size:1.05rem;line-height:1.25}
.cover small{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.book h3{font-size:1.05rem}
.book p{color:var(--muted);font-size:.92rem;margin:0}
@media (max-width:760px){.books{grid-template-columns:1fr}}

/* Dated list */
.list .item{display:grid;grid-template-columns:150px 1fr 170px;gap:24px;padding-block:22px;border-bottom:1px solid var(--line);align-items:baseline}
.list .item>*{min-width:0}
.list .item:first-child{border-top:1px solid var(--line)}
.list time,.timeline time{font:700 .82rem var(--head);letter-spacing:.1em;color:var(--red);text-transform:uppercase}
.list h3{font-size:1.15rem;margin-bottom:4px}
.list h3 a{text-decoration:none}
.list p{margin:0;color:var(--muted);font-size:.95rem}
.list .where{color:var(--muted);font-size:.9rem;text-align:right}
@media (max-width:760px){.list .item{grid-template-columns:1fr;gap:4px}.list .where{text-align:left}}

/* Cards and numbers */
.box{border:1px solid var(--line);padding:26px;display:flex;flex-direction:column;gap:8px}
.box-img{margin:-26px -26px 10px;aspect-ratio:16/10;overflow:hidden}
.box-img img{width:100%;height:100%;object-fit:cover}
.box h3{font-size:1.15rem}
.box p{margin:0;color:var(--muted);font-size:.96rem}
.box .k{font:700 .75rem var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.figs div{background:var(--white);padding:24px;text-align:center}
.figs strong{display:block;font:800 2.2rem var(--head);color:var(--red);font-variant-numeric:tabular-nums}
.figs span{font-size:.9rem;color:var(--muted)}

/* Text with side box */
.two{display:grid;grid-template-columns:1.5fr 1fr;gap:48px}
.two>*{min-width:0}
.prose{max-width:68ch}
.prose h2{font-size:1.6rem;margin-bottom:16px}
.prose-img{margin-bottom:24px;width:100%;object-fit:cover}
.side{background:var(--soft);padding:28px;align-self:start;border-top:3px solid var(--red)}
.side h3{font-size:.95rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
.side h3:not(:first-child){margin-top:20px}
.side ul{margin:0;padding-left:18px;display:grid;gap:8px;font-size:.95rem}
.side-btn{margin:22px 0 0}
@media (max-width:860px){.two{grid-template-columns:1fr}}

/* Timeline */
.timeline{list-style:none;margin:0;padding:0;border-left:3px solid var(--red)}
.timeline li{padding:0 0 26px 24px;position:relative}
.timeline li::before{content:"";position:absolute;left:-9px;top:6px;width:15px;height:15px;border-radius:50%;background:var(--white);border:3px solid var(--red)}
.timeline h3{font-size:1.1rem;margin:4px 0}
.timeline p{margin:0;color:var(--muted);font-size:.96rem}

/* Forms */
input,select,textarea{font:inherit;padding:13px 14px;border:1px solid #ccc;background:var(--white);color:var(--ink);width:100%}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.contact-form label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:.88rem}
.contact-form .full{grid-column:1/-1}
.left-title{font-size:1.6rem;margin-bottom:10px}
@media (max-width:640px){.contact-form{grid-template-columns:1fr}}

/* Social bar and sign up */
.social{background:var(--soft)}
.social .wrap{padding-block:28px;display:flex;justify-content:center;gap:28px;flex-wrap:wrap}
.social a{font:700 .8rem var(--head);letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.social a:hover{color:var(--red)}
.signup{background:var(--black);color:var(--white)}
.signup .wrap{padding-block:64px}
.signup h2{color:var(--white);text-align:center;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(1.4rem,3vw,1.9rem);margin-bottom:8px}
.signup .lead{text-align:center;opacity:.8;margin-bottom:28px}
.signup .ok{text-align:center;color:#8fe0a8}
.row3{display:grid;grid-template-columns:1fr 1fr 1.4fr auto;gap:12px;max-width:980px;margin:0 auto}
.signup .fine{text-align:center;font-size:.82rem;opacity:.65;margin-top:16px}
.signup-code{max-width:720px;margin:0 auto}
@media (max-width:860px){.row3{grid-template-columns:1fr}}

/* Footer */
.site-footer{background:#0b0b0b;color:#cfcfcf}
.foot{padding-block:56px 32px;display:flex;flex-wrap:wrap;gap:28px}
.foot>div{flex:1 1 160px;min-width:0}
.foot>div:first-child{flex:1.6 1 240px}
.foot h4{color:var(--white);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.95rem}
.foot a{text-decoration:none}
.foot a:hover{color:var(--white)}
.foot .logo b{color:var(--white)}
.foot-about{margin-top:14px;font-size:.95rem}
.copy{border-top:1px solid #222;padding-block:18px;font-size:.85rem;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Articles */
.article{max-width:780px}
.article-title{font-size:clamp(1.7rem,3.4vw,2.3rem);margin-bottom:8px}
.article .meta{color:var(--muted);font-size:.9rem;margin-bottom:24px}
.article-img{margin-bottom:28px}
.entry blockquote{margin:28px 0;padding:6px 0 6px 22px;border-left:4px solid var(--red);font-family:var(--head);font-weight:600;font-size:1.2rem;line-height:1.4}
.entry img{margin-block:16px}
.pager{margin-top:40px;text-align:center}
.pager .page-numbers{display:inline-block;padding:8px 14px;border:1px solid var(--line);text-decoration:none;margin:2px}
.pager .current{background:var(--black);color:var(--white)}
.screen-reader-text{position:absolute;left:-9999px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.photo-img img{transition:none}}