/* ============================================================
   DANIEL NWIKPO — MAGAZINE SITE
   Signature header · sticky tabs · image-led articles
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Inter:wght@400;500;600;700&family=Caveat:wght@400;500&display=swap');

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:#fff;color:#141414;line-height:1.65}
img{display:block}

.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
@media(max-width:700px){.wrap{padding:0 20px}}

/* ===== MASTHEAD — signature left, meta right ===== */
.masthead{display:flex;justify-content:space-between;align-items:flex-end;padding:26px 0 16px;border-bottom:1px solid #E5E5E5;gap:20px;flex-wrap:wrap}
.sig{font-family:'Caveat',cursive;font-size:2.2rem;line-height:1;color:#6E6E6E;text-decoration:none}
.meta-right{text-align:right;font-size:.6rem;letter-spacing:2.5px;text-transform:uppercase;color:#8A8A8A;line-height:1.9}
.meta-right b{color:#5B6270;font-weight:600}

/* ===== STICKY NAV ===== */
.navsticky{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid #E5E5E5;border-bottom:4px solid #141414}
.navsticky nav{display:flex;justify-content:center;gap:0;flex-wrap:wrap}
.navsticky a{font-size:.7rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#141414;text-decoration:none;padding:13px 22px;border-right:1px solid #E5E5E5;transition:background .2s}
.navsticky a:first-child{border-left:1px solid #E5E5E5}
.navsticky a:hover{background:#141414;color:#fff}
@media(max-width:700px){.navsticky a{padding:11px 12px;font-size:.62rem}}

/* ===== FEATURED ===== */
.featured{display:grid;grid-template-columns:1.35fr 1fr;gap:0;padding:36px 0 0}
.f-main img{width:100%;height:430px;object-fit:cover}
.f-main h1{font-family:'Playfair Display',serif;font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.12;margin:16px 0 12px}
.f-main h1 a{color:inherit;text-decoration:none}
.f-main .standfirst{color:#5B6270;max-width:580px;font-size:1rem}
.side{border-left:1px solid #E5E5E5;padding-left:34px;display:flex;flex-direction:column}
.side h2{font-family:'Playfair Display',serif;font-size:1.15rem;border-bottom:2px solid #141414;padding-bottom:10px;margin-bottom:4px}
.mini{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid #EEE;text-decoration:none;color:inherit}
.mini:hover h3{text-decoration:underline}
.mini img{width:110px;height:78px;object-fit:cover;flex-shrink:0}
.mini h3{font-family:'Playfair Display',serif;font-size:1rem;line-height:1.3;margin-bottom:6px}
.mini span{font-size:.64rem;color:#9AA0AC;letter-spacing:.5px;text-transform:uppercase}
@media(max-width:900px){.featured{grid-template-columns:1fr}.side{border-left:none;padding-left:0;border-top:1px solid #E5E5E5;margin-top:30px;padding-top:10px}}

/* ===== CAT BADGES ===== */
.cat{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:5px 11px;margin:14px 0 0}
.cat.red{background:#D93025;color:#fff}
.cat.green{background:#0E7C5A;color:#fff}
.cat.blue{background:#1D4ED8;color:#fff}
.cat.grey{background:#4A4F58;color:#fff}
.cat.gold{background:#B08D57;color:#fff}

/* ===== TOPIC TABS ===== */
.tabs{display:flex;gap:10px;padding:30px 0 24px;flex-wrap:wrap}
.tab{font-size:.7rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:9px 19px;border:2px solid #141414;border-radius:100px;text-decoration:none;color:#141414;transition:all .2s}
.tab.on,.tab:hover{background:#141414;color:#fff}

/* ===== SECTION HEADS ===== */
.sec-head{display:flex;justify-content:space-between;align-items:baseline;margin:44px 0 26px;border-bottom:2px solid #141414;padding-bottom:10px}
.sec-head h2{font-family:'Playfair Display',serif;font-size:1.6rem}
.sec-head a{font-size:.76rem;color:#B3541E;font-weight:600;text-decoration:none}

/* ===== ARTICLE GRID ===== */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding-bottom:20px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .25s}
.card:hover{transform:translateY(-4px)}
.card img{width:100%;height:190px;object-fit:cover;margin-bottom:13px}
.cat-line{font-size:.62rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#1D4ED8}
.cat-line.greenbelt{color:#0E7C5A}.cat-line.business{color:#B3541E}.cat-line.investment{color:#1D4ED8}.cat-line.media{color:#D93025}.cat-line.record{color:#4A4F58}
.card h3{font-family:'Playfair Display',serif;font-size:1.3rem;line-height:1.25;margin:8px 0 8px}
.card p{font-size:.88rem;color:#5B6270;flex:1}
.card .meta{font-size:.7rem;color:#9AA0AC;margin-top:10px;text-transform:uppercase;letter-spacing:1px}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid{grid-template-columns:1fr}}

/* ===== PAGE BODY (articles, record pages) ===== */
.page-head{padding:46px 0 8px}
.page-head h1{font-family:'Playfair Display',serif;font-size:clamp(1.9rem,4vw,3rem);line-height:1.15;margin:10px 0 12px}
.page-head .standfirst{font-family:'Playfair Display',serif;font-style:italic;color:#5B6270;font-size:1.15rem;max-width:640px}
.article-hero{width:100%;height:420px;object-fit:cover;margin:26px 0 8px}
.byline{font-size:.74rem;color:#9AA0AC;text-transform:uppercase;letter-spacing:1.5px;margin:12px 0 6px}
.article-body{max-width:720px;margin:0 auto;padding:26px 0 60px}
.article-body h2{font-family:'Playfair Display',serif;font-size:1.5rem;margin:36px 0 14px}
.article-body p{font-size:1.02rem;color:#2E3238;margin-bottom:18px}
.article-body a{color:#1D4ED8}
.article-body blockquote{border-left:3px solid #141414;padding:8px 24px;margin:24px 0;font-family:'Playfair Display',serif;font-style:italic;font-size:1.15rem}
.tag-footer{display:flex;gap:10px;flex-wrap:wrap;margin-top:40px;padding-top:20px;border-top:1px solid #E5E5E5}

/* ===== ABOUT ===== */
.about-hero{display:grid;grid-template-columns:auto 1fr;gap:54px;align-items:center;padding:56px 0 40px}
.monogram{width:180px;height:180px;border-radius:50%;background:linear-gradient(135deg,#0E7C5A,#0A5C42);color:#F3F6F2;font-family:'Playfair Display',serif;font-size:4.2rem;display:flex;align-items:center;justify-content:center}
.about-hero h1{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(2rem,4vw,3rem);line-height:1.1;margin-bottom:12px}
.about-hero .role{font-size:.7rem;letter-spacing:3px;text-transform:uppercase;color:#0E7C5A;font-weight:700;margin-bottom:18px}
.about-hero p{color:#4A4F58;max-width:560px;margin-bottom:12px}
.about-body{max-width:720px;margin:0 auto;padding:20px 0 60px}
@media(max-width:800px){.about-hero{grid-template-columns:1fr;text-align:center;gap:28px}.monogram{margin:0 auto}}

/* ===== GREENBELT WATCH STRIP ===== */
.gb-strip{background:#F2F7F4;border-top:3px solid #0E7C5A;border-bottom:3px solid #0E7C5A;padding:36px 0 40px;margin:50px 0}
.gb-strip .sec-head{border-bottom-color:#0E7C5A;margin-top:0}
.gb-item{display:grid;grid-template-columns:110px 1fr auto;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid #D9E5DE;text-decoration:none;color:inherit}
.gb-item:hover h3{text-decoration:underline}
.gb-item img{width:110px;height:72px;object-fit:cover}
.gb-item .county{font-size:.62rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#0E7C5A}
.gb-item h3{font-family:'Playfair Display',serif;font-size:1.1rem;margin:2px 0}
.gb-item p{font-size:.8rem;color:#5B6270}
.gb-item .when{font-size:.66rem;color:#9AA0AC;text-align:right;white-space:nowrap}
@media(max-width:640px){.gb-item{grid-template-columns:1fr}.gb-item img{display:none}.gb-item .when{text-align:left}}

/* ===== FOOTER ===== */
footer{background:#141414;color:#C9C6BE;margin-top:60px;padding:44px 0 36px}
footer .cols{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
footer .sig-foot{font-family:'Caveat',cursive;font-size:2rem;color:#D9D6CE}
footer p{font-size:.8rem;margin-top:10px}
footer nav{display:flex;gap:22px;flex-wrap:wrap;margin-top:16px}
footer nav a{color:#9AA0AC;font-size:.72rem;text-decoration:none;text-transform:uppercase;letter-spacing:1.5px}
footer nav a:hover{color:#fff}
footer .copy{border-top:1px solid #2A2A2A;margin-top:30px;padding-top:18px;font-size:.68rem;color:#6E6B63;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}