*{box-sizing:border-box} a{color:inherit;text-decoration:none} button{border:0;background:none;color:inherit;cursor:pointer}.progress{height:3px;background:#c51c24;position:fixed;z-index:50;top:0;left:0}.utility{height:34px;background:#10100f;color:#bdbdb8;padding:0 max(24px,calc((100vw - 1280px)/2));display:flex;align-items:center;justify-content:space-between;font:10px 'DM Mono';letter-spacing:.06em}.utility b{color:#e5e2dc;margin:0 8px}.utility-right{display:flex;align-items:center;gap:12px}.live-dot{display:inline-block;width:7px;height:7px;background:#d8242b;border-radius:50%;box-shadow:0 0 0 4px #d8242b30}.social{color:#fff;font-size:12px}.nav-wrap{height:84px;display:flex;align-items:center;gap:26px;max-width:1280px;padding:0 24px;margin:auto;border-bottom:1px solid #d6d4cf}.brand{font:bold 26px/1 'DM Sans';letter-spacing:-.08em;white-space:nowrap}.brand i{font:9px 'DM Mono';letter-spacing:.06em;margin-right:2px}.brand em{font:8px 'DM Mono';letter-spacing:.12em;color:#c61c22;font-style:normal;margin-left:4px}.menu-btn{display:none}nav{display:flex;gap:20px;margin-left:auto}nav a{font-size:12px;font-weight:600;transition:.2s}nav a:hover,nav .active{color:#c51c24}.search{border-left:1px solid #d6d4cf;padding-left:22px}.mega{position:absolute;z-index:20;right:7%;top:105px;background:#151514;color:#f4f1eb;padding:26px 34px;width:430px;box-shadow:0 16px 40px #0003}.mega strong{font:11px 'DM Mono';color:#d8242b}.mega div{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:20px}.mega a{font:600 16px 'Playfair Display'}.ticker{height:45px;background:#c51c24;color:#fff;display:flex;align-items:center;gap:25px;overflow:hidden;padding-right:24px}.ticker-label{background:#151514;height:100%;padding:0 max(24px,calc((100vw - 1280px)/2));padding-right:28px;display:flex;align-items:center;gap:9px;font:500 11px 'DM Mono';letter-spacing:.08em;white-space:nowrap}.ticker-track{font:12px 'DM Sans';white-space:nowrap;animation:ticker 32s linear infinite}.ticker-track b{margin:0 28px;color:#ffb0a9}@keyframes ticker{to{transform:translateX(-40%)}}.page-shell{max-width:1280px;margin:auto;padding:0 24px}.hero{display:grid;grid-template-columns:1.65fr .85fr;gap:20px;padding:28px 0 74px}.image-story{position:relative;overflow:hidden}.image-story img{width:100%;height:615px;object-fit:cover;display:block;transition:transform .8s}.image-story:hover img,.side-story:hover img,.wide-card:hover img,.featured-video:hover img{transform:scale(1.045)}.image-shade{position:absolute;inset:0;background:linear-gradient(0deg,#070706dd,transparent 65%)}.lead-copy{position:absolute;left:45px;right:45px;bottom:38px;color:white}.eyebrow{font:500 10px 'DM Mono';letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:8px;color:#666560}.eyebrow span{width:13px;height:2px;background:#c51c24}.lead-copy .eyebrow{color:#f5f3ed}.lead-copy h1,h1,h2,h3,p{margin:0}.lead-copy h1{font:700 clamp(36px,4vw,57px)/1.04 'Playfair Display';letter-spacing:-.045em;max-width:700px;margin:15px 0}.lead-copy p{max-width:560px;font-size:15px;line-height:1.55;color:#eeece8}.read-link,.text-story a,.world-section a,.feature-copy a{display:inline-flex;align-items:center;gap:10px;font:500 11px 'DM Mono';letter-spacing:.07em;margin-top:25px}.read-link:after{content:'';height:1px;background:#fff;width:35px}.hero-side{display:flex;flex-direction:column;gap:20px}.side-story img{height:220px;width:100%;object-fit:cover;display:block;transition:.6s}.side-story h2{font:700 25px/1.1 'Playfair Display';letter-spacing:-.03em;margin:10px 0}.side-story span,.feed-item time{font:10px 'DM Mono';letter-spacing:.07em;color:#77746f}.text-story{background:#e9e6df;padding:28px 28px 24px;flex:1}.text-story h2{font:700 31px/1.07 'Playfair Display';letter-spacing:-.04em;margin:11px 0}.text-story p{font-size:13px;line-height:1.5;color:#55514d}.mini-story{display:flex;gap:15px;padding-top:2px}.mini-story img{width:120px;height:88px;object-fit:cover}.mini-story h3{font:700 19px/1.13 'Playfair Display';margin-top:8px}.section-rule{border-top:1px solid #c9c7c1;padding:67px 0}.section-head,.category-title{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:28px}.section-head h2,.category-title h2{font:700 42px/1 'Playfair Display';letter-spacing:-.05em}.section-head h2 i,.category-title h2 i,.world-section h2 i,.watch h2 i,.feature-copy h2 i,.most-read h2 i,.newsletter h2 i{font-style:italic;font-weight:600}.section-head>a,.category-title>a{font:500 10px 'DM Mono';letter-spacing:.08em;display:flex;gap:8px;align-items:center}.section-head>span{font:10px 'DM Mono';letter-spacing:.09em;color:#706e68}.latest-grid{display:grid;grid-template-columns:1fr 300px;gap:70px}.feed-item{display:grid;grid-template-columns:100px 1fr 120px;gap:18px;padding:16px 0;border-top:1px solid #d4d1ca;align-items:center}.feed-item h3{font:700 21px/1.12 'Playfair Display';letter-spacing:-.025em;margin-top:8px}.feed-item img{width:120px;height:74px;object-fit:cover}.briefing{background:#151514;color:#f5f3ed;padding:27px}.briefing .eyebrow{color:#d8d5cd}.briefing h3{font:700 28px/1.08 'Playfair Display';margin:14px 0}.briefing p{color:#bbb8b1;font-size:13px;line-height:1.5}.briefing button{background:#c51c24;padding:12px 13px;font:10px 'DM Mono';letter-spacing:.06em;margin-top:24px;display:flex;gap:9px}.trend-list{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid #d4d1ca}.trend-list article{padding:18px;border-right:1px solid #d4d1ca;min-height:190px;display:flex;flex-direction:column}.trend-list article:first-child{padding-left:0}.trend-list article:last-child{border:0}.trend-list b{font:700 42px 'Playfair Display';color:#c51c24}.trend-list h3{font:700 20px/1.12 'Playfair Display';margin:28px 0 auto;letter-spacing:-.03em}.trend-list svg{align-self:flex-end}.category-title .eyebrow{margin-bottom:9px}.pak-grid{display:grid;grid-template-columns:1.35fr .85fr .72fr;gap:20px}.wide-card img{height:275px;width:100%;object-fit:cover;margin-bottom:16px;transition:.6s}.wide-card h3{font:700 30px/1.08 'Playfair Display';margin-top:10px}.quote-card{background:#c51c24;color:white;padding:28px;display:flex;flex-direction:column;justify-content:center}.quote-card span{font:70px/0.6 'Playfair Display'}.quote-card p{font:600 25px/1.1 'Playfair Display';margin:20px 0}.quote-card b{font:10px 'DM Mono';letter-spacing:.05em}.stack-stories{display:flex;flex-direction:column;justify-content:space-between}.stack-stories article{border-top:1px solid #c9c7c1;padding-top:14px}.stack-stories h3{font:700 23px/1.1 'Playfair Display';margin-bottom:18px}.world-section{background:#151514;color:#f6f4ed;padding:74px max(24px,calc((100vw - 1232px)/2));display:grid;grid-template-columns:.7fr 1.3fr;gap:70px}.world-section .eyebrow,.watch .eyebrow{color:#c5c2bb}.world-section h2,.watch h2{font:700 55px/.98 'Playfair Display';letter-spacing:-.06em;margin:17px 0 23px}.world-section p{color:#bcb9b1;font-size:14px;line-height:1.5;max-width:290px}.world-section a{color:#fff}.world-image{position:relative;height:365px;overflow:hidden}.world-image img{width:100%;height:100%;object-fit:cover;filter:brightness(.75)}.world-image div{position:absolute;bottom:24px;left:27px;max-width:440px}.world-image .eyebrow{color:#f4f1eb}.world-image h3{font:700 31px/1.05 'Playfair Display';margin-top:10px}.tech-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px}.tech-feature img{height:250px;width:100%;object-fit:cover}.tech-feature h3{font:700 34px/1.05 'Playfair Display';margin:18px 0 10px;max-width:620px}.tech-feature p{color:#5d5a54;font-size:14px}.tech-list article{border-top:1px solid #cbc8c1;padding:19px 0;display:grid;grid-template-columns:55px 1fr;gap:15px}.tech-list span{font:700 28px 'Playfair Display';color:#c51c24}.tech-list h3{font:700 25px/1.1 'Playfair Display'}.watch{background:#10100f;color:#f4f1eb;padding:72px 0}.watch-head{display:flex;justify-content:space-between;align-items:end}.live-button{border:1px solid #67655f;color:white;padding:13px 15px;display:flex;gap:9px;align-items:center;font:10px 'DM Mono';letter-spacing:.08em}.watch-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:35px;margin-top:29px}.featured-video{position:relative;height:390px;overflow:hidden}.featured-video img{width:100%;height:100%;object-fit:cover;filter:brightness(.58);transition:.6s}.featured-video>div{position:absolute;bottom:27px;left:29px;max-width:530px}.featured-video .eyebrow{color:#eee}.featured-video h3{font:700 33px/1.04 'Playfair Display';margin-top:10px}.play{position:absolute;top:28px;right:28px;width:48px;height:48px;border-radius:50%;background:#c51c24;display:grid;place-items:center}.play svg{width:18px}.video-list article{border-top:1px solid #575650;padding:24px 0}.video-list span{font:10px 'DM Mono';color:#c51c24}.video-list h3{font:700 24px/1.1 'Playfair Display';margin-top:9px}.feature-section{height:590px;position:relative;color:white;overflow:hidden}.feature-section>img{width:100%;height:100%;object-fit:cover;filter:brightness(.55)}.feature-section:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#000b,transparent 70%)}.feature-copy{position:absolute;z-index:1;left:max(24px,calc((100vw - 1232px)/2));top:120px;max-width:650px}.feature-copy .eyebrow{color:#fff}.feature-copy h2{font:700 clamp(42px,5vw,70px)/.98 'Playfair Display';letter-spacing:-.06em;margin:16px 0}.feature-copy p{max-width:460px;color:#eee;line-height:1.5;font-size:15px}.feature-copy a{color:#fff}.opinion-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.opinion-grid article{display:grid;grid-template-columns:80px 1fr;gap:15px}.opinion-grid img,.avatar{height:80px;width:80px;object-fit:cover;border-radius:50%}.initials{display:grid;place-items:center;background:#d4dad4;font:700 20px 'Playfair Display'}.warm{background:#d2a48e}.opinion-grid h3{font:700 23px/1.1 'Playfair Display';margin:8px 0 12px}.opinion-grid p{font:10px 'DM Mono';color:#77736d}.most-read{display:grid;grid-template-columns:.72fr 1.28fr;gap:70px}.most-read h2,.newsletter h2{font:700 48px/1 'Playfair Display';letter-spacing:-.05em;margin-top:11px}.most-read ol{margin:0;padding:0;list-style:none}.most-read li{border-top:1px solid #cac7c0;display:grid;grid-template-columns:60px 1fr 20px;gap:15px;align-items:center;padding:15px 0}.most-read li b{font:700 28px 'Playfair Display';color:#c51c24}.most-read li span{font:700 21px/1.14 'Playfair Display'}.newsletter{background:#dedbd3;margin:0 -24px;padding:55px;display:grid;grid-template-columns:1fr 1fr;gap:30px}.newsletter>div:nth-child(2)>p{color:#514f4a;margin:9px 0 23px;max-width:380px}.newsletter form{display:flex;border-bottom:1px solid #161615}.newsletter input{background:transparent;border:0;outline:0;padding:13px 0;flex:1;font-size:14px}.newsletter button{background:#151514;color:white;padding:0 16px;font:10px 'DM Mono';letter-spacing:.07em;display:flex;gap:8px;align-items:center}.newsletter small{display:block;color:#77736d;font-size:10px;margin-top:12px}.success{color:#c51c24;font:600 17px 'Playfair Display'}footer{background:#151514;color:#eee;padding:53px max(24px,calc((100vw - 1232px)/2)) 21px}.footer-top{display:flex;justify-content:space-between;padding-bottom:45px;border-bottom:1px solid #46443f}.footer-top .brand{font-size:32px}.footer-top p{color:#aaa69f;font:16px 'Playfair Display'}.footer-links{display:grid;grid-template-columns:repeat(4,1fr);padding:35px 0 52px;gap:20px}.footer-links div{display:flex;flex-direction:column;gap:11px}.footer-links b{color:#c51c24;font:10px 'DM Mono';letter-spacing:.1em;margin-bottom:5px}.footer-links a,.footer-links p{color:#d4d0c8;font-size:13px}.copyright{border-top:1px solid #46443f;padding-top:20px;font:10px 'DM Mono';letter-spacing:.06em;color:#87847d;display:flex;justify-content:space-between}
@media(max-width:800px){.utility{padding:0 16px}.utility-right b,.social{display:none}.nav-wrap{height:68px;padding:0 16px}.menu-btn{display:block;padding:0}nav{display:none}.brand{font-size:24px;margin:auto}.search{border:0;padding:0}.ticker{height:42px}.ticker-label{padding:0 16px}.page-shell{padding:0 16px}.hero{display:block;padding:16px 0 45px}.lead-story img{height:455px}.lead-copy{left:22px;right:22px;bottom:24px}.lead-copy h1{font-size:38px}.hero-side{margin-top:17px}.side-story{display:grid;grid-template-columns:1fr 1.1fr;gap:13px}.side-story img{height:150px}.side-story h2{font-size:21px}.text-story{padding:24px}.mini-story{display:none}.section-rule{padding:43px 0}.section-head h2,.category-title h2{font-size:35px}.section-head>span{display:none}.latest-grid,.pak-grid,.tech-grid,.most-read,.newsletter{grid-template-columns:1fr;gap:25px}.feed-item{grid-template-columns:62px 1fr 76px;gap:10px}.feed-item h3{font-size:18px}.feed-item img{width:76px;height:62px}.briefing{padding:24px}.trend-list{display:block}.trend-list article{min-height:0;padding:16px 0;border-right:0;border-bottom:1px solid #d4d1ca;display:grid;grid-template-columns:55px 1fr 18px;gap:12px;align-items:center}.trend-list h3{margin:0;font-size:19px}.trend-list b{font-size:29px}.category-title{align-items:end}.wide-card h3{font-size:27px}.wide-card img{height:225px}.quote-card{min-height:220px}.stack-stories{gap:25px}.world-section{padding:48px 16px;display:block}.world-section h2,.watch h2{font-size:44px}.world-image{margin-top:28px;height:300px}.world-image h3{font-size:27px}.tech-feature h3{font-size:29px}.watch{padding:45px 0}.watch-grid{display:block;margin-top:24px}.featured-video{height:320px}.featured-video h3{font-size:27px}.video-list{margin-top:20px}.feature-section{height:520px}.feature-copy{left:22px;top:110px;right:22px}.feature-copy h2{font-size:45px}.opinion-grid{display:block}.opinion-grid article{margin-bottom:23px}.most-read h2,.newsletter h2{font-size:42px}.newsletter{margin:0 -16px;padding:34px 24px}.footer-top{display:block}.footer-top p{margin-top:14px}.footer-links{grid-template-columns:1fr 1fr}.copyright{font-size:8px}.copyright span{display:none}.mega{top:102px;right:16px;left:16px;width:auto}.feature-section>img{object-position:64% center}}

/* ---- PHP conversion additions ---- */
.menu-btn{background:none;border:0;font-size:22px;cursor:pointer;color:#151514}
.search{background:none;border-left:1px solid #d6d4cf;font-size:17px;cursor:pointer}
.play{border:0;cursor:pointer}
.newsletter form{align-items:center}
#newsletterResult{margin:6px 0}
#newsletterResult .success{display:block}
#newsletterResult .error{color:#c51c24;font-size:13px}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-visible{opacity:1;transform:translateY(0)}

/* ---- Phase 1 additions: article links inherit existing text styling ---- */
.feed-item a{color:inherit;text-decoration:none;display:block}

/* ---- Phase 1: category dropdown link + search toggle (no visual change to existing nav) ---- */
#categoriesToggle{cursor:pointer}
.search-form{position:absolute;right:20px;top:100%;background:#fff;border:1px solid #d6d4cf;border-top:none;padding:10px 14px;box-shadow:0 8px 20px rgba(0,0,0,.06);z-index:40;display:none}
.search-form input{border:1px solid #d6d4cf;padding:8px 12px;font:14px 'DM Sans';width:240px;border-radius:6px}
.nav-wrap{position:relative}

/* ============================================================
   PHASE 1 — New interior pages (Blog, Category, Article, Search,
   About, Contact, Privacy, Terms, 404). Reuses existing tokens:
   ink #151514, red #c51c24, Playfair Display / DM Sans / DM Mono,
   .page-shell / .eyebrow / .section-head patterns from the
   approved homepage design. No existing selectors were modified.
   ============================================================ */

.page-hero{background:#151514;color:#eee;padding:64px max(24px,calc((100vw - 1232px)/2)) 44px}
.page-hero .eyebrow{color:#d8d5cd;margin-bottom:14px}
.page-hero h1{font:700 48px/1.05 'Playfair Display';letter-spacing:-.03em;max-width:820px;color:#fff}
.page-hero p{font:16px/1.6 'DM Sans';color:#bbb8b1;max-width:640px;margin-top:16px}
.page-hero .crumbs{font:500 10px 'DM Mono';letter-spacing:.08em;color:#9a978f;margin-bottom:18px}
.page-hero .crumbs a{color:#d8d5cd}

.content-grid{display:grid;grid-template-columns:2.1fr 1fr;gap:56px;padding:56px 0 70px;align-items:start}
@media(max-width:900px){.content-grid{grid-template-columns:1fr}}

.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media(max-width:900px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.card-grid{grid-template-columns:1fr}}

.news-card{display:flex;flex-direction:column}
.news-card a{color:inherit;text-decoration:none;display:block}
.news-card img{width:100%;height:180px;object-fit:cover;margin-bottom:14px}
.news-card .eyebrow{margin-bottom:8px}
.news-card h3{font:700 20px/1.2 'Playfair Display';letter-spacing:-.02em;margin:0 0 8px}
.news-card p{font:14px/1.55 'DM Sans';color:#6d6a64;margin:0 0 8px}
.news-card .meta{font:10px 'DM Mono';letter-spacing:.06em;color:#9a978f}
.news-card .premium-flag{display:inline-block;background:#151514;color:#fff;font:9px 'DM Mono';letter-spacing:.08em;padding:3px 8px;border-radius:20px;margin-left:8px}

.pagination{display:flex;justify-content:center;gap:8px;margin-top:48px}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;border:1px solid #d6d4cf;border-radius:6px;font:12px 'DM Mono';color:#151514;text-decoration:none}
.pagination a:hover{background:#151514;color:#fff;border-color:#151514}
.pagination .active{background:#151514;color:#fff;border-color:#151514}
.pagination .disabled{opacity:.35;pointer-events:none}

.sidebar-block{margin-bottom:40px}
.sidebar-block h3{font:700 20px 'Playfair Display';letter-spacing:-.02em;margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid #e2e0d8}
.sidebar-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid #ece9e2}
.sidebar-item:last-child{border-bottom:none}
.sidebar-item img{width:64px;height:64px;object-fit:cover;flex-shrink:0}
.sidebar-item h4{font:600 14px/1.3 'DM Sans';margin:0 0 4px}
.sidebar-item span{font:10px 'DM Mono';letter-spacing:.06em;color:#9a978f}
.sidebar-item a{color:inherit;text-decoration:none}

/* Single article page */
.article-header{padding:44px 0 0}
.article-header .eyebrow{margin-bottom:16px}
.article-header h1{font:700 46px/1.08 'Playfair Display';letter-spacing:-.03em;max-width:900px}
.article-meta{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin:22px 0 0;font:12px 'DM Mono';letter-spacing:.04em;color:#77736d}
.article-meta b{color:#151514}
.article-featured-img{width:100%;height:460px;object-fit:cover;margin:32px 0}
@media(max-width:700px){.article-featured-img{height:260px}.article-header h1{font-size:32px}}
.article-body{font:17px/1.85 'DM Sans';color:#2b2a27;max-width:760px}
.article-body p{margin:0 0 22px}
.article-body h2{font:700 28px 'Playfair Display';margin:38px 0 16px;letter-spacing:-.02em}
.article-body blockquote{border-left:3px solid #c51c24;padding-left:20px;margin:28px 0;font:italic 20px/1.5 'Playfair Display';color:#151514}
.article-body img{max-width:100%;margin:20px 0}
.share-buttons{display:flex;gap:10px;margin:32px 0}
.share-buttons a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid #d6d4cf;border-radius:50%;color:#151514;text-decoration:none;font-size:14px}
.share-buttons a:hover{background:#151514;color:#fff;border-color:#151514}
.article-tags{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0}
.article-tags a{font:10px 'DM Mono';letter-spacing:.05em;text-transform:uppercase;border:1px solid #d6d4cf;padding:6px 12px;border-radius:20px;color:#77736d;text-decoration:none}
.prev-next{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:48px 0;border-top:1px solid #e2e0d8;border-bottom:1px solid #e2e0d8;padding:24px 0}
.prev-next a{color:inherit;text-decoration:none;display:block}
.prev-next .label{font:10px 'DM Mono';letter-spacing:.08em;color:#9a978f;margin-bottom:8px}
.prev-next .title{font:600 16px/1.3 'Playfair Display'}
.prev-next .next-story{text-align:right}
@media(max-width:600px){.prev-next{grid-template-columns:1fr}.prev-next .next-story{text-align:left;border-top:1px solid #e2e0d8;padding-top:16px}}

.premium-gate{position:relative;margin-top:-40px}
.premium-gate .fade-mask{position:absolute;bottom:0;left:0;right:0;height:220px;background:linear-gradient(to bottom, rgba(247,246,242,0), #f7f6f2 85%)}
.premium-blurred{filter:blur(5px);user-select:none;pointer-events:none}
.premium-box{background:#151514;color:#fff;padding:40px;text-align:center;margin:24px 0 40px;border-radius:12px}
.premium-box .eyebrow{justify-content:center;color:#ffb0a9;margin-bottom:10px}
.premium-box h3{font:700 28px 'Playfair Display';margin:0 0 12px}
.premium-box p{color:#d8d5cd;font:15px/1.6 'DM Sans';max-width:440px;margin:0 auto 22px}
.premium-box button,.premium-box a.btn-cta{display:inline-block;background:#c51c24;color:#fff;font:600 13px 'DM Mono';letter-spacing:.05em;padding:14px 30px;border-radius:6px;text-decoration:none;border:0;cursor:pointer}

/* Simple content pages: About / Privacy / Terms */
.simple-page{max-width:760px;margin:0 auto;padding:56px 0 70px;font:17px/1.8 'DM Sans';color:#2b2a27}
.simple-page h2{font:700 30px 'Playfair Display';margin:40px 0 16px;letter-spacing:-.02em}
.simple-page p{margin:0 0 20px}
.simple-page ul{margin:0 0 20px;padding-left:22px}
.simple-page li{margin-bottom:8px}
.about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:40px 0}
.about-stats div{text-align:center;padding:26px 14px;background:#fff;border:1px solid #e2e0d8;border-radius:10px}
.about-stats b{display:block;font:700 34px 'Playfair Display';color:#c51c24}
.about-stats span{font:11px 'DM Mono';letter-spacing:.06em;color:#77736d;text-transform:uppercase}
@media(max-width:600px){.about-stats{grid-template-columns:1fr}}

/* Contact page */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:56px 0 70px}
@media(max-width:800px){.contact-grid{grid-template-columns:1fr}}
.contact-info h2{font:700 34px 'Playfair Display';letter-spacing:-.02em;margin:0 0 16px}
.contact-info p{font:16px/1.7 'DM Sans';color:#6d6a64;margin-bottom:28px}
.contact-detail{display:flex;gap:14px;margin-bottom:22px}
.contact-detail b{display:block;font:600 14px 'DM Sans'}
.contact-detail span{font:14px 'DM Sans';color:#6d6a64}
.form-page label{display:block;font:600 12px 'DM Mono';letter-spacing:.04em;text-transform:uppercase;margin:0 0 8px;color:#151514}
.form-page input,.form-page textarea,.form-page select{width:100%;padding:13px 16px;border:1px solid #d6d4cf;border-radius:6px;font:15px 'DM Sans';margin-bottom:20px;background:#fff}
.form-page textarea{min-height:140px;resize:vertical}
.form-page button{background:#151514;color:#fff;border:0;padding:15px 32px;border-radius:6px;font:600 12px 'DM Mono';letter-spacing:.06em;cursor:pointer}
.form-page button:hover{background:#000}
.form-flash{padding:14px 18px;border-radius:8px;margin-bottom:22px;font:14px 'DM Sans'}
.form-flash.success{background:#e9f7ee;color:#1e7a3e;border:1px solid #bfe6cb}
.form-flash.error{background:#fdeceb;color:#c51c24;border:1px solid #f3c3c1}

/* Search results */
.search-summary{font:14px 'DM Sans';color:#77736d;margin-bottom:28px}
.search-summary b{color:#151514}
.no-results{padding:60px 0;text-align:center}
.no-results h2{font:700 28px 'Playfair Display';margin-bottom:12px}
.no-results p{color:#77736d}

/* 404 page */
.not-found-page{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 24px}
.not-found-page .code{font:700 140px/1 'Playfair Display';color:#151514;letter-spacing:-.04em}
.not-found-page .code i{color:#c51c24;font-style:italic}
.not-found-page h1{font:700 28px 'Playfair Display';margin:10px 0 14px}
.not-found-page p{color:#77736d;margin-bottom:28px;max-width:420px}
.not-found-page a.btn-cta{background:#151514;color:#fff;padding:14px 30px;border-radius:6px;text-decoration:none;font:600 12px 'DM Mono';letter-spacing:.05em}

/* Category hero band (reuses page-hero) */
.category-count{font:12px 'DM Mono';color:#9a978f;letter-spacing:.05em}

/* ============================================================
   PHASE 1.5 — Global chrome polish (navbar/footer, shared across
   every page including Home). Home page's own unique sections
   (hero/latest/trending/pakistan/world/tech/watch/sports/opinion/
   newsletter) are untouched — nothing below overrides them.
   ============================================================ */
#siteHeader{position:sticky;top:0;z-index:200;background:#fdfcf9}
.utility-right .social{display:inline-flex;gap:10px;margin-left:14px}
.utility-right .social a{color:inherit;opacity:.75;transition:opacity .2s,transform .2s;display:inline-flex}
.utility-right .social a:hover{opacity:1;transform:translateY(-1px)}
nav a{position:relative;display:inline-flex;align-items:center;gap:5px}
nav a::after{content:'';position:absolute;left:0;bottom:-26px;width:0;height:2px;background:#c51c24;transition:width .25s ease}
nav a:hover::after,nav .active::after{width:100%}
.nav-caret{font-size:9px;transition:transform .2s}
#categoriesToggle[class*=active] .nav-caret,#categoriesToggle:hover .nav-caret{transform:rotate(180deg)}
.nav-actions{display:flex;align-items:center;gap:16px;margin-left:8px}
.nav-auth-link{font:600 12px 'DM Sans';color:#151514;text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.nav-auth-link:hover{color:#c51c24}
.nav-auth-btn{background:#151514;color:#fff!important;font:600 12px 'DM Sans';padding:9px 18px;border-radius:24px;text-decoration:none;white-space:nowrap;transition:background .2s,transform .2s}
.nav-auth-btn:hover{background:#c51c24;transform:translateY(-1px)}
.mega-auth{display:none}
@media(max-width:900px){
  .nav-actions .nav-auth-link,.nav-actions .nav-auth-btn{display:none}
  .mega-auth{display:flex;gap:12px;margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12)}
  .mega-auth a{color:#eee;text-decoration:none;font:600 13px 'DM Sans';display:inline-flex;align-items:center;gap:6px}
  .mega-auth a.highlight{background:#c51c24;color:#fff;padding:9px 16px;border-radius:20px}
}
.share-buttons a i{font-size:14px}
.footer-links a i{margin-right:6px;opacity:.7}
.copyright span a{color:inherit;text-decoration:none}
.copyright span a:hover{color:#fff}

/* Icon-based utility classes reused across redesigned inner pages */
.icon-badge{width:52px;height:52px;border-radius:14px;background:#151514;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:16px}
.icon-badge.light{background:#fff;color:#151514;border:1px solid #e2e0d8}
.icon-badge.red{background:#c51c24}

/* Page transition fade-in (used by pages that load gsap-polish.js) */
.page-fade-target{opacity:0}

/* ---- Auth pages (Login / Register / Profile) ---- */
.auth-shell{min-height:calc(100vh - 84px);display:grid;grid-template-columns:1fr 1fr}
@media(max-width:900px){.auth-shell{grid-template-columns:1fr}}
.auth-visual{background:#151514;color:#fff;padding:60px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth-visual::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 20%, rgba(197,28,36,.25), transparent 55%),radial-gradient(circle at 80% 80%, rgba(255,255,255,.06), transparent 50%)}
.auth-visual>*{position:relative;z-index:1}
.auth-visual .brand{font:700 26px 'Playfair Display';letter-spacing:-.03em}
.auth-visual .brand em{color:#c51c24;font-style:normal}
.auth-visual h2{font:700 40px/1.15 'Playfair Display';letter-spacing:-.02em;margin:40px 0 16px;max-width:420px}
.auth-visual p{color:#c9c6bf;font:15px/1.7 'DM Sans';max-width:380px}
.auth-visual .auth-stats{display:flex;gap:32px;margin-top:40px}
.auth-visual .auth-stats b{display:block;font:700 30px 'Playfair Display';color:#c51c24}
.auth-visual .auth-stats span{font:10px 'DM Mono';letter-spacing:.06em;color:#9a978f}
.auth-form-side{display:flex;align-items:center;justify-content:center;padding:60px 24px}
.auth-form-wrap{width:100%;max-width:400px}
.auth-form-wrap .eyebrow{margin-bottom:14px}
.auth-form-wrap h1{font:700 32px 'Playfair Display';letter-spacing:-.02em;margin:0 0 8px}
.auth-form-wrap>p{color:#77736d;font:14px/1.6 'DM Sans';margin-bottom:30px}
.auth-form-wrap label{display:block;font:600 11px 'DM Mono';letter-spacing:.05em;text-transform:uppercase;margin:0 0 8px;color:#151514}
.auth-form-wrap input{width:100%;padding:13px 16px;border:1px solid #d6d4cf;border-radius:8px;font:15px 'DM Sans';margin-bottom:18px;background:#fff}
.auth-form-wrap input:focus{outline:2px solid #151514;outline-offset:1px}
.auth-form-wrap button{width:100%;background:#151514;color:#fff;border:0;padding:15px;border-radius:8px;font:600 13px 'DM Mono';letter-spacing:.05em;cursor:pointer;transition:background .2s}
.auth-form-wrap button:hover{background:#c51c24}
.auth-switch{text-align:center;margin-top:24px;font:14px 'DM Sans';color:#77736d}
.auth-switch a{color:#c51c24;font-weight:600;text-decoration:none}
.input-icon-wrap{position:relative}
.input-icon-wrap i{position:absolute;left:16px;top:44px;color:#9a978f}
.input-icon-wrap input{padding-left:42px}

/* Profile page */
.profile-header{display:flex;align-items:center;gap:20px;margin-bottom:12px}
.profile-avatar{width:76px;height:76px;border-radius:50%;background:#151514;color:#fff;display:flex;align-items:center;justify-content:center;font:700 26px 'Playfair Display'}
.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:36px 0}
@media(max-width:700px){.profile-grid{grid-template-columns:1fr}}
.profile-card{background:#fff;border:1px solid #e2e0d8;border-radius:12px;padding:24px}
.profile-card i{font-size:22px;color:#c51c24;margin-bottom:10px;display:block}
.profile-card h4{font:700 16px 'Playfair Display';margin:0 0 6px}
.profile-card p{font:13px/1.5 'DM Sans';color:#77736d;margin:0}

/* ---- About page: mission/vision cards, timeline, team ---- */
.about-hero{position:relative;background:#151514;color:#fff;padding:90px max(24px,calc((100vw - 1232px)/2)) 70px;overflow:hidden}
.about-hero::before{content:'';position:absolute;inset:0;background:url('../images/city.jpg') center/cover;opacity:.22}
.about-hero>*{position:relative;z-index:1}
.about-hero h1{font:700 56px/1.05 'Playfair Display';letter-spacing:-.03em;max-width:760px}
.about-hero p{font:17px/1.7 'DM Sans';color:#d8d5cd;max-width:600px;margin-top:18px}
@media(max-width:700px){.about-hero h1{font-size:36px}}

.mission-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:48px 0}
@media(max-width:800px){.mission-grid{grid-template-columns:1fr}}
.mission-card{background:#fff;border:1px solid #e2e0d8;border-radius:14px;padding:30px}
.mission-card h3{font:700 20px 'Playfair Display';margin:0 0 10px;letter-spacing:-.02em}
.mission-card p{font:14px/1.65 'DM Sans';color:#6d6a64;margin:0}

.timeline{position:relative;margin:50px 0;padding-left:32px;border-left:2px solid #e2e0d8}
.timeline-item{position:relative;padding-bottom:36px}
.timeline-item::before{content:'';position:absolute;left:-39px;top:2px;width:14px;height:14px;border-radius:50%;background:#c51c24;border:3px solid #fff;box-shadow:0 0 0 2px #e2e0d8}
.timeline-item b{display:block;font:700 12px 'DM Mono';color:#c51c24;letter-spacing:.05em;margin-bottom:6px}
.timeline-item h4{font:700 20px 'Playfair Display';margin:0 0 8px;letter-spacing:-.02em}
.timeline-item p{font:14px/1.6 'DM Sans';color:#6d6a64;margin:0}

.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:40px 0}
@media(max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.team-grid{grid-template-columns:1fr}}
.team-card{text-align:center}
.team-card .avatar-circle{width:100px;height:100px;border-radius:50%;margin:0 auto 16px;object-fit:cover;background:#151514}
.team-card .avatar-circle.initials{display:flex;align-items:center;justify-content:center;color:#fff;font:700 30px 'Playfair Display'}
.team-card h4{font:700 17px 'Playfair Display';margin:0 0 4px;letter-spacing:-.02em}
.team-card span{font:11px 'DM Mono';letter-spacing:.05em;color:#c51c24;text-transform:uppercase}
.team-card p{font:13px/1.5 'DM Sans';color:#77736d;margin:8px 0 0}

/* ---- Contact page: office cards, map, FAQ, CTA ---- */
.office-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:44px 0}
@media(max-width:800px){.office-grid{grid-template-columns:1fr}}
.office-card{background:#fff;border:1px solid #e2e0d8;border-radius:14px;padding:26px}
.office-card i{color:#c51c24;font-size:20px;margin-bottom:12px;display:block}
.office-card h4{font:700 17px 'Playfair Display';margin:0 0 6px}
.office-card p{font:14px/1.6 'DM Sans';color:#6d6a64;margin:0}
.map-wrap{margin:44px 0;border-radius:14px;overflow:hidden;border:1px solid #e2e0d8}
.map-wrap iframe{width:100%;height:360px;border:0;display:block;filter:grayscale(.3)}
.faq-list{margin:44px 0}
.faq-item{border-bottom:1px solid #e2e0d8}
.faq-question{display:flex;justify-content:space-between;align-items:center;padding:20px 4px;cursor:pointer;font:600 16px 'DM Sans'}
.faq-question i{transition:transform .25s;color:#c51c24}
.faq-item.open .faq-question i{transform:rotate(45deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-item.open .faq-answer{max-height:220px}
.faq-answer p{padding:0 4px 20px;font:14px/1.6 'DM Sans';color:#6d6a64;margin:0}
.contact-cta{background:#151514;color:#fff;border-radius:16px;padding:48px;text-align:center;margin:56px 0}
.contact-cta h2{font:700 32px 'Playfair Display';margin:0 0 12px}
.contact-cta p{color:#c9c6bf;font:15px 'DM Sans';margin:0 0 22px}
.contact-cta a{background:#c51c24;color:#fff;padding:15px 32px;border-radius:8px;text-decoration:none;font:600 12px 'DM Mono';letter-spacing:.05em}

/* ---- Blog / Category: featured article, filter pills, trending strip ---- */
.featured-article{display:grid;grid-template-columns:1.3fr 1fr;gap:0;background:#151514;color:#fff;border-radius:16px;overflow:hidden;margin:0 0 48px}
@media(max-width:800px){.featured-article{grid-template-columns:1fr}}
.featured-article img{width:100%;height:100%;min-height:280px;object-fit:cover}
.featured-article .fa-copy{padding:40px}
.featured-article .eyebrow{color:#ffb0a9}
.featured-article h2{font:700 32px/1.15 'Playfair Display';letter-spacing:-.02em;margin:14px 0}
.featured-article p{color:#c9c6bf;font:14px/1.6 'DM Sans';margin-bottom:20px}
.featured-article a.read-more{color:#fff;font:600 12px 'DM Mono';text-decoration:none;letter-spacing:.05em}
.featured-article a.read-more:hover{color:#c51c24}
.featured-article .meta{color:#9a978f}

.filter-pills{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 32px}
.filter-pills a{font:600 11px 'DM Mono';letter-spacing:.04em;text-transform:uppercase;padding:9px 16px;border-radius:20px;border:1px solid #d6d4cf;color:#151514;text-decoration:none;transition:.2s}
.filter-pills a:hover,.filter-pills a.active{background:#151514;color:#fff;border-color:#151514}

.trending-strip{display:flex;gap:20px;overflow-x:auto;margin:0 0 48px;padding-bottom:6px}
.trending-strip::-webkit-scrollbar{height:4px}
.trending-strip::-webkit-scrollbar-thumb{background:#d6d4cf}
.trending-pill{flex:0 0 auto;min-width:230px;background:#fff;border:1px solid #e2e0d8;border-radius:12px;padding:16px}
.trending-pill b{display:block;font:700 22px 'Playfair Display';color:#c51c24}
.trending-pill span{font:13px/1.4 'DM Sans';display:block;margin-top:6px}

.category-banner{background:#151514;color:#fff;border-radius:16px;padding:56px 48px;margin:0 0 0;position:relative;overflow:hidden}
.category-banner i.bg-icon{position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:180px;color:rgba(255,255,255,.05)}
.category-banner .eyebrow{color:#ffb0a9}
.category-banner h1{font:700 44px 'Playfair Display';letter-spacing:-.02em;margin:14px 0}
.category-banner p{color:#c9c6bf;max-width:520px}

.load-more-wrap{text-align:center;margin-top:48px}
.load-more-btn{background:#151514;color:#fff;border:0;padding:15px 36px;border-radius:8px;font:600 12px 'DM Mono';letter-spacing:.05em;cursor:pointer;transition:background .2s}
.load-more-btn:hover{background:#c51c24}

/* ============================================================
   PRODUCTION POLISH — utility classes (replacing inline styles),
   responsive breakpoints, mobile drawer nav, button/form states,
   card consistency, image handling. Layout/colors/branding of the
   Home page are untouched; these are additive utilities + fixes.
   ============================================================ */

/* ---- Spacing / text utilities (replace inline style="") ---- */
.u-mt-0{margin-top:0!important}
.u-mt-8{margin-top:8px}
.u-mt-14{margin-top:14px}
.u-mt-16{margin-top:16px}
.u-mt-18{margin-top:18px}
.u-mt-20{margin-top:20px}
.u-mt-22{margin-top:22px}
.u-mt-32{margin-top:32px}
.u-mb-14{margin-bottom:14px}
.u-mb-16{margin-bottom:16px}
.u-mb-18{margin-bottom:18px}
.u-ml-8{margin-left:8px}
.u-pt-0{padding-top:0!important}
.u-text-red{color:#c51c24}
.u-text-muted-sm{color:#77736d;font-size:13px}
.u-text-faint-sm{color:#9a978f;font-size:13px}
.u-opacity-60{opacity:.6}
.u-max-w-900{max-width:900px}
.u-w-100{width:100%}
.u-flex-gap-12{display:flex;gap:12px;flex-wrap:wrap}
.u-flex-gap-12-top{display:flex;gap:12px;margin-top:8px;flex-wrap:wrap}
.js-hidden{display:none}
.icon-badge-sm{width:44px;height:44px;font-size:16px;margin:0}
.db-error-box{font-family:'DM Sans',sans-serif;max-width:640px;margin:80px auto;padding:24px;border:1px solid #e2b3b3;background:#fff5f5;border-radius:8px}
.db-error-box h2{color:#c51c24;margin-top:0}
.db-error-box .tech-detail{color:#888;font-size:13px}
.content-json-editor{min-height:340px;font-family:monospace;font-size:13px}
.plain-link-red{color:#c51c24;font-style:normal}
.small-muted-note{margin-top:18px;font-size:11px;color:#999}
.u-pt-56{padding-top:56px}
.u-pt-44{padding-top:44px}
.u-pt-content{padding:56px 0 70px}
.pill-tab-spacing{margin:0 6px 6px 0}
.json-editor-hint{color:#999;font-size:12px}
.contact-faq-heading{font:700 30px 'Playfair Display';margin:14px 0 0}
.profile-name{margin:0;font-size:26px}
.profile-email{margin:4px 0 0;color:#77736d}
.btn-logout{background:#151514;color:#fff;padding:14px 30px;border-radius:6px;text-decoration:none;font:600 12px 'DM Mono';letter-spacing:.05em;display:inline-block;border:0;cursor:pointer;transition:background .2s,transform .2s}
.btn-logout:hover{background:#c51c24;transform:translateY(-1px)}

/* ============================================================
   Mobile drawer navigation (replaces the old "hamburger reuses
   the categories dropdown" behavior with a real slide-in panel).
   ============================================================ */
body.drawer-lock{overflow:hidden}
.drawer-overlay{position:fixed;inset:0;background:rgba(10,10,9,.55);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;z-index:300}
.drawer-overlay.is-open{opacity:1;visibility:visible}
.mobile-drawer{position:fixed;top:0;right:0;bottom:0;width:320px;max-width:86vw;background:#151514;color:#eee;z-index:310;transform:translateX(100%);transition:transform .35s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;box-shadow:-10px 0 40px rgba(0,0,0,.25)}
.mobile-drawer.is-open{transform:translateX(0)}
.mobile-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:22px 22px 18px;border-bottom:1px solid rgba(255,255,255,.1)}
.mobile-drawer-header .brand{font-size:18px;color:#fff}
.drawer-close{background:rgba(255,255,255,.08);border:0;color:#fff;width:38px;height:38px;border-radius:50%;font-size:15px;cursor:pointer;transition:background .2s,transform .2s}
.drawer-close:hover{background:#c51c24;transform:rotate(90deg)}
.mobile-drawer-nav{display:flex;flex-direction:column;padding:14px 10px;overflow-y:auto;flex:1}
.mobile-drawer-nav>a{color:#eee;text-decoration:none;font:600 16px 'DM Sans';padding:15px 12px;border-radius:8px;transition:background .2s,color .2s;position:relative}
.mobile-drawer-nav>a:hover,.mobile-drawer-nav>a.active{background:rgba(197,28,36,.14);color:#ff7a72}
.mobile-drawer-nav>a.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:60%;background:#c51c24;border-radius:2px}
.drawer-accordion-toggle{width:100%;background:none;border:0;color:#eee;font:600 16px 'DM Sans';padding:15px 12px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;border-radius:8px}
.drawer-accordion-toggle:hover{background:rgba(255,255,255,.06)}
.drawer-accordion-toggle i{transition:transform .25s}
.drawer-accordion-toggle.is-open i{transform:rotate(180deg)}
.drawer-accordion-panel{max-height:0;overflow:hidden;transition:max-height .3s ease;display:flex;flex-direction:column;padding-left:14px}
.drawer-accordion-panel.is-open{max-height:400px}
.drawer-accordion-panel a{color:#b8b5ae;text-decoration:none;font:500 14px 'DM Sans';padding:11px 12px}
.drawer-accordion-panel a:hover{color:#ff7a72}
.mobile-drawer-auth{padding:18px 22px 26px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:10px}
.drawer-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:#c51c24;color:#fff;text-decoration:none;font:600 13px 'DM Sans';padding:13px;border-radius:8px;transition:background .2s,transform .2s}
.drawer-btn:hover{background:#a91720;transform:translateY(-1px)}
.drawer-btn.ghost{background:rgba(255,255,255,.08);color:#eee}
.drawer-btn.ghost:hover{background:rgba(255,255,255,.14)}
@media(min-width:993px){.mobile-drawer,.drawer-overlay{display:none}}

/* Desktop categories dropdown now uses a class toggle instead of inline style */
.mega{display:none;opacity:0;transform:translateY(-8px);transition:opacity .25s ease,transform .25s ease}
.mega.is-open{display:block;opacity:1;transform:translateY(0)}
.search-form.is-open{display:block}
@media(max-width:992px){.mega{display:none!important}}

/* ============================================================
   Scroll-reveal (class-based, replacing inline style writes)
   ============================================================ */
.reveal-section{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal-section.is-revealed{opacity:1;transform:translateY(0)}

/* ============================================================
   Button states: hover / active / disabled / loading
   ============================================================ */
button,.btn,.btn-cta,.nav-auth-btn,.drawer-btn,.load-more-btn,.btn-logout,.newsletter button,.form-page button,.auth-form-wrap button{cursor:pointer;transition:background .2s ease,transform .15s ease,box-shadow .2s ease,opacity .2s ease}
button:active,.btn:active,.btn-cta:active,.nav-auth-btn:active,.load-more-btn:active{transform:translateY(1px) scale(.99)}
button:disabled,.btn:disabled,button.is-loading{opacity:.6;cursor:not-allowed;pointer-events:none}
button.is-loading{position:relative;color:transparent!important}
button.is-loading::after{content:'';position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:btn-spin .6s linear infinite}
@keyframes btn-spin{to{transform:rotate(360deg)}}
a.btn-cta:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #c51c24;outline-offset:2px}

/* ============================================================
   Form states: focus / error / success / mobile friendliness
   ============================================================ */
input,textarea,select{transition:border-color .2s ease,box-shadow .2s ease}
input:focus,textarea:focus,select:focus{border-color:#151514;box-shadow:0 0 0 3px rgba(21,21,20,.08)}
input.field-error,textarea.field-error{border-color:#c51c24!important;box-shadow:0 0 0 3px rgba(197,28,36,.1)}
input.field-success,textarea.field-success{border-color:#1e7a3e!important;box-shadow:0 0 0 3px rgba(30,122,62,.1)}
.field-error-msg{color:#c51c24;font:12px 'DM Sans';margin:-14px 0 16px;display:block}
@media(max-width:600px){
  .form-page input,.form-page textarea,.auth-form-wrap input{font-size:16px} /* prevents iOS zoom-on-focus */
}

/* ============================================================
   Card consistency: radius / shadow / hover across all card types
   ============================================================ */
.news-card,.mission-card,.office-card,.profile-card,.stat-card,.team-card .avatar-circle,.trending-pill{border-radius:14px}
.news-card{box-shadow:0 1px 2px rgba(15,15,14,.04);transition:transform .25s ease,box-shadow .25s ease}
.news-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(15,15,14,.1)}
.mission-card,.office-card,.profile-card{transition:transform .25s ease,box-shadow .25s ease}
.mission-card:hover,.office-card:hover,.profile-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(15,15,14,.08)}
.team-card .avatar-circle{overflow:hidden}
.news-card img{aspect-ratio:16/10;object-fit:cover}

/* ============================================================
   Images: prevent stretch, consistent ratios
   ============================================================ */
img{max-width:100%;height:auto}
.article-featured-img,.featured-article img,.about-hero::before{object-fit:cover}
.sidebar-item img{aspect-ratio:1/1;object-fit:cover}

/* ============================================================
   Global overflow safety net (belt-and-braces on top of the
   per-component fixes below — a production site should never
   scroll horizontally on any breakpoint)
   ============================================================ */
html,body{max-width:100%;overflow-x:hidden}
.page-shell,.content-grid,.card-grid,.about-stats,.mission-grid,.office-grid,.profile-grid,.team-grid,.contact-grid{min-width:0}
table{width:100%;border-collapse:collapse;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ============================================================
   Responsive breakpoint sweep for Phase 1/1.5 templates
   (About, Contact, Blog, Category, Login, Register, Profile,
   Article). The Home page's own single 800px breakpoint already
   collapses its grids correctly down to 320px and is untouched.
   Breakpoints below specifically checked: 320, 375, 425, 576,
   768, 992, 1200, 1400.
   ============================================================ */

/* ---- 1400px / 1200px: cap content width comfortably (no change
   needed below 1232px page-shell max-width, this just documents
   that upper breakpoints are intentionally a no-op) ---- */
@media(min-width:1200px){
  .page-hero h1{max-width:860px}
}

/* ---- 992px ---- */
@media(max-width:992px){
  .content-grid{grid-template-columns:1fr}
  .content-grid aside{order:2}
}

/* ---- 768px ---- */
@media(max-width:768px){
  .about-hero{padding:64px 20px 50px}
  .about-hero h1{font-size:34px}
  .category-banner{padding:40px 24px}
  .category-banner h1{font-size:32px}
  .category-banner i.bg-icon{font-size:110px}
  .featured-article .fa-copy{padding:28px}
  .featured-article h2{font-size:24px}
  .contact-cta{padding:32px 22px}
  .contact-cta h2{font-size:26px}
  .auth-visual{padding:36px}
  .auth-visual h2{font-size:28px}
  .office-grid,.mission-grid{grid-template-columns:1fr 1fr}
  .profile-grid{grid-template-columns:1fr}
}

/* ---- 576px ---- */
@media(max-width:576px){
  .page-hero{padding:48px 18px 32px}
  .page-hero h1{font-size:30px}
  .office-grid,.mission-grid,.team-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .card-grid{grid-template-columns:1fr}
  .filter-pills{gap:8px}
  .filter-pills a{padding:8px 12px;font-size:10px}
  .trending-pill{min-width:200px}
  .article-header h1{font-size:26px}
  .article-meta{gap:10px;font-size:11px}
  .timeline{padding-left:24px}
  .timeline-item::before{left:-31px}
  .faq-question{font-size:14px}
  .mobile-drawer{width:100%;max-width:100%}
}

/* ---- 425px ---- */
@media(max-width:425px){
  .about-hero h1{font-size:28px}
  .about-stats{gap:12px}
  .about-stats div{padding:18px 10px}
  .about-stats b{font-size:26px}
  .prev-next{gap:14px}
  .news-card h3{font-size:18px}
  .auth-form-wrap h1{font-size:26px}
  .auth-visual h2{font-size:24px}
  .auth-visual .auth-stats{gap:20px}
  .profile-header{flex-wrap:wrap}
  .nav-actions{gap:10px}
}

/* ---- 375px ---- */
@media(max-width:375px){
  .page-shell,.simple-page{padding-left:14px;padding-right:14px}
  .page-hero,.about-hero{padding-left:14px;padding-right:14px}
  .category-banner{padding:28px 16px}
  .featured-article .fa-copy{padding:20px}
  .featured-article h2{font-size:20px}
  .contact-cta{padding:24px 16px}
  .office-card,.mission-card{padding:18px}
  .form-page input,.form-page textarea,.auth-form-wrap input{padding:11px 14px}
}

/* ---- 320px ---- */
@media(max-width:320px){
  .brand{font-size:19px}
  .nav-actions .nav-auth-link{display:none}
  .about-hero h1{font-size:24px}
  .category-banner h1{font-size:24px}
  .trending-pill{min-width:170px}
  .team-grid{grid-template-columns:1fr}
}

/* ---- Settings-driven logo (only applies if admin uploads a logo) ---- */
.brand-logo-img{height:34px;width:auto;display:block}
@media(max-width:900px){.brand-logo-img{height:28px}}
.mobile-drawer-header .brand-logo-img{height:30px;filter:brightness(0) invert(1)}

/* ---- Premium Membership page ---- */
.membership-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:32px;padding:56px 0 70px;align-items:start}
@media(max-width:900px){.membership-grid{grid-template-columns:1fr}}
.plan-card{background:#151514;color:#fff;border-radius:16px;padding:36px;position:sticky;top:100px}
.plan-card .eyebrow{color:#ffb0a9}
.plan-price{font:700 42px 'Playfair Display';margin:14px 0 20px}
.plan-price span{font:14px 'DM Sans';color:#9a978f}
.plan-benefits{list-style:none;padding:0;margin:0}
.plan-benefits li{display:flex;gap:10px;padding:10px 0;border-top:1px solid rgba(255,255,255,.1);font:14px 'DM Sans';color:#d8d5cd}
.plan-benefits li i{color:#4caf7d;margin-top:2px}
.membership-status-card{background:#fff;border:1px solid #e2e0d8;border-radius:16px;padding:32px}
.payment-details{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0}
.payment-details div{background:#f7f6f2;border-radius:8px;padding:12px 14px}
.payment-details b{display:block;font:11px 'DM Mono';letter-spacing:.05em;text-transform:uppercase;color:#9a978f;margin-bottom:4px}
.payment-details span{font:14px 'DM Sans';color:#151514;word-break:break-word}
@media(max-width:500px){.payment-details{grid-template-columns:1fr}}
.alert-warning{background:#fff4e5;color:#9a6700;border:1px solid #ffe1a8}