@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;1,6..96,400;1,6..96,500&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&family=Jost:wght@400;500;600;700&display=swap');
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:hidden;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:'Jost',sans-serif;color: var(--gc-text);background: var(--gc-paper);-webkit-font-smoothing:antialiased;overflow-x:hidden;width:100%;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
a{text-decoration:none;color:inherit;transition:color .2s}
img,video,iframe{display:block;max-width:100%;height:auto}
.container{max-width:1200px;margin:0 auto;padding:0 32px}

.ad-top{background: var(--gc-band);border-bottom:1px solid var(--gc-rule)}
.ad-top-label{text-align:center;padding:5px 0 0;font-size:9px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:#bbb}
.ad-top-inner{max-width:1200px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:1fr 1.2fr;min-height:100px;align-items:center}
.ad-top-text{padding:20px 0}
.ad-top-text h4{font-family:'Newsreader',serif;font-size:26px;font-weight:700;color: var(--gc-ink);line-height:1.2}
.ad-top-text p{font-size:14px;color: var(--gc-text);margin-top:6px;line-height:1.4}
.ad-top-text .ad-cta{display:inline-block;border:1.5px solid #1A1A1A;color: var(--gc-ink);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:10px 22px;margin-top:14px;transition:all .3s}
.ad-top-text .ad-cta:hover{background:#1A1A1A;color:#fff}
.ad-top-img{height:100%;display:flex;align-items:center;justify-content:flex-end}
.ad-top-img img{width:100%;max-height:120px;object-fit:cover}

.header{background: var(--gc-paper);position:sticky;top:0;z-index:100;transition:box-shadow .3s}
.header.scrolled{box-shadow:0 1px 8px rgba(0,0,0,.06)}
.header.scrolled .header-row2{max-height:0;overflow:hidden;border:none}
.header-row1{max-width:1200px;margin:0 auto;padding:0 32px;height:62px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;position:relative}
.header-row1 > .header-left{justify-self:start}
.header-row1 > .header-logo{justify-self:center}
.header-row1 > .header-right{justify-self:end}
.header-left{display:flex;align-items:center;gap:14px}
.header-left button{background:none;border:none;cursor:pointer;color: var(--gc-text);font-size:18px;line-height:1}
.header-logo{justify-self:center}
.header-logo-text{font-family:'Newsreader',serif;font-size:34px;font-weight:700;color: var(--gc-ink);letter-spacing:.5px}
.header-right{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase}
.header-right a:first-child{color:#8a2e3b}
.header-right a:last-child{color: var(--gc-text)}
.header-right span{color:#ddd;margin:0 4px}
.header-row2{border-bottom:1px solid var(--gc-rule);max-height:40px;transition:max-height .3s,border .3s;overflow:hidden}
.header-nav{max-width:1200px;margin:0 auto;padding:0 32px;height:38px;display:flex;align-items:center;justify-content:center;gap:8px}
.header-nav a{font-size:11px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color: var(--gc-text);padding:0 14px}
.header-nav a:hover{color:#8a2e3b}
.header-nav .dot{color:#ddd;font-size:10px}

.hero{padding:40px 0 0}
.hero-grid{display:grid;grid-template-columns:1fr .65fr;gap:40px;align-items:start}
.hero-img{width:100%;aspect-ratio:3/2;object-fit:cover}
.hero-cat{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#8a2e3b;margin-top:18px;display:inline-block}
.hero-title{font-family:'Newsreader',serif;font-size:40px;font-weight:700;color: var(--gc-ink);line-height:1.12;margin-top:8px}
.hero-title a:hover{color:#8a2e3b}
.hero-meta{font-size:13px;color: var(--gc-muted);margin-top:14px}
.hero-excerpt{font-size:15px;color: var(--gc-muted);line-height:1.65;margin-top:12px}
.hero-sidebar-img{width:100%;aspect-ratio:1/1;object-fit:cover}
.hero-sidebar .badge{display:inline-flex;align-items:center;gap:5px;margin-top:16px;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#8a2e3b}
.hero-sidebar .badge svg{width:12px;height:12px}
.hero-sidebar h3{font-family:'Newsreader',serif;font-size:24px;font-weight:600;color: var(--gc-ink);line-height:1.25;margin-top:8px}
.hero-sidebar h3 a:hover{color:#8a2e3b}
.hero-sidebar p{font-size:14px;color: var(--gc-muted);line-height:1.5;margin-top:8px}

.nl-inline{border-top:1px solid var(--gc-rule);border-bottom:1px solid var(--gc-rule);margin-top:40px;padding:28px 0;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nl-inline h4{font-family:'Newsreader',serif;font-size:26px;font-weight:700;color: var(--gc-ink)}
.nl-inline p{font-size:15px;color: var(--gc-muted);margin-top:4px}
.nl-inline-btn{background:#1A1A1A;color:#fff;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:16px 40px;white-space:nowrap;transition:background .3s}
.nl-inline-btn:hover{background:#333}

.section-header{display:flex;align-items:center;gap:12px;margin-bottom:28px;padding-top:44px}
.section-header::before{content:'';width:10px;height:3px;background:#1A1A1A;flex-shrink:0}
.section-header h2{font-family:'Newsreader',serif;font-size:2rem;font-weight:600;color: var(--gc-ink);white-space:nowrap}
.section-header::after{content:'';flex:1;height:1px;background: var(--gc-rule)}
.section-header-link{margin-left:auto;font-size:13px;font-weight:500;color:#8a2e3b;white-space:nowrap;flex-shrink:0}
.section-header-link:hover{text-decoration:underline}

.stories-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 24px}
.story-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.story-card .cat,.story-card .story-cat{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;margin-top:14px;display:inline-block}
.story-card .cat.distribution,.story-card .story-cat.distribution{color:#8a2e3b}.story-card .cat.brand,.story-card .story-cat.brand{color:#2D5F8A}.story-card .cat.trends,.story-card .story-cat.trends{color:#D4A843}.story-card .cat.tech,.story-card .story-cat.tech{color:#3AAB7C}.story-card .cat.marketing,.story-card .story-cat.marketing{color:#3AAB7C}.story-card .cat.investment,.story-card .story-cat.investment{color:#2D5F8A}.story-card .cat.podcast,.story-card .story-cat.podcast{color:#D4A843}
.story-card h3{font-family:'Newsreader',serif;font-size:21px;font-weight:600;color: var(--gc-ink);line-height:1.3;margin-top:6px}
.story-card h3 a:hover{color:#8a2e3b}
.story-card .date,.story-card .story-date{font-size:12px;color:#aaa;margin-top:8px;text-transform:uppercase;letter-spacing:.5px}

.bof-feed-item{display:grid;grid-template-columns:1fr 280px;gap:32px;padding:28px 0;border-bottom:1px dashed var(--gc-rule-strong);align-items:start}
.bof-feed-item:first-child{padding-top:0}
.bof-feed-cat{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.bof-feed-cat.distribution{color:#8a2e3b}.bof-feed-cat.brand{color:#2D5F8A}.bof-feed-cat.trends{color:#D4A843}.bof-feed-cat.tech{color:#3AAB7C}.bof-feed-cat.marketing{color:#3AAB7C}.bof-feed-cat.investment{color:#2D5F8A}
.bof-feed-item h3{font-family:'Newsreader',serif;font-size:28px;font-weight:700;color: var(--gc-ink);line-height:1.18;margin-top:5px}
.bof-feed-item h3 a:hover{color:#8a2e3b}
.bof-feed-item .excerpt{font-size:15px;color: var(--gc-muted);line-height:1.6;margin-top:10px}
.bof-feed-item .fmeta{font-size:13px;color:#8a2e3b;font-weight:600;margin-top:12px}
.bof-feed-item img{width:280px;height:188px;object-fit:cover;max-width:100%}

.ad-mid{margin:20px 0;text-align:center}
.ad-mid-label{font-size:9px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:#ccc;margin-bottom:4px}
.ad-mid-banner{background:linear-gradient(135deg,#8a2e3b,#6e2330);padding:18px 32px;display:flex;align-items:center;justify-content:space-between}
.ad-mid-banner h4{font-family:'Newsreader',serif;font-size:16px;font-weight:600;color:#fff}
.ad-mid-banner p{font-size:11px;color:rgba(255,255,255,.7);margin-top:2px}
.ad-mid-banner a{border:1px solid rgba(255,255,255,.4);color:#fff;font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;padding:8px 20px;transition:all .3s}
.ad-mid-banner a:hover{background:rgba(255,255,255,.12)}

.most-read-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px}
.most-read-item{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-bottom:1px solid var(--gc-rule)}
.most-read-num{font-family:'Newsreader',serif;font-size:40px;font-weight:700;color:#E8E8E8;line-height:1;flex-shrink:0;min-width:36px}
.most-read-item h4{font-family:'Newsreader',serif;font-size:16px;font-weight:500;color: var(--gc-text);line-height:1.35;padding-top:4px}
.most-read-item h4 a:hover{color:#8a2e3b}

.excl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.excl-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.excl-card .badge{display:inline-flex;align-items:center;gap:4px;margin-top:12px;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#8a2e3b}
.excl-card .badge svg{width:11px;height:11px}
.excl-card h4{font-family:'Newsreader',serif;font-size:17px;font-weight:600;color: var(--gc-ink);line-height:1.3;margin-top:6px}
.excl-card h4 a:hover{color:#8a2e3b}
.excl-card .ecat{font-size:11px;color:#aaa;text-transform:uppercase;letter-spacing:1px;margin-top:6px}

/* INVESTMENT SECTION */
.investment-section{margin-top:44px;padding-top:0}
.investment-header{margin-bottom:32px}
.investment-header-line{width:48px;height:3px;background:#1A1A1A;margin-bottom:16px}
.investment-header h2{font-family:'Newsreader',serif;font-size:2rem;font-weight:700;color: var(--gc-ink);line-height:1.2}
.investment-highlight{font-style:italic;color:#D4A843}
.investment-subtitle{font-family:'Jost',sans-serif;font-size:15px;color: var(--gc-muted);line-height:1.5;margin-top:8px;max-width:520px}
.investment-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.investment-small-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.investment-card-small img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .4s}
.investment-card-small:hover img{transform:scale(1.03)}
.investment-card-small a{display:block;overflow:hidden}
.investment-card-content{padding-top:10px}
.investment-cat{font-family:'Jost',sans-serif;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#D4A843;display:inline-block}
.investment-card-small h3{font-family:'Newsreader',serif;font-size:15px;font-weight:600;color: var(--gc-ink);line-height:1.3;margin-top:4px}
.investment-card-small h3 a:hover{color:#8a2e3b}
.investment-card-main{display:flex;flex-direction:column}
.investment-card-main>a{display:block;overflow:hidden}
.investment-card-main img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .4s}
.investment-card-main:hover img{transform:scale(1.02)}
.investment-card-main-content{padding-top:16px}
.investment-card-main-content h3{font-family:'Newsreader',serif;font-size:24px;font-weight:700;color: var(--gc-ink);line-height:1.2;margin-top:6px}
.investment-card-main-content h3 a:hover{color:#8a2e3b}
.investment-card-main-content p{font-family:'Jost',sans-serif;font-size:14px;color: var(--gc-muted);line-height:1.6;margin-top:10px}
.investment-read-more{font-family:'Jost',sans-serif;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#D4A843;display:inline-block;margin-top:14px;transition:color .2s}
.investment-read-more:hover{color:#8a2e3b}
/* NOTES DE BAS DE PAJE AD */
.ad-nbdp-label{font-size:9px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:#ccc;margin-bottom:6px;margin-top:36px;text-align:center}
.ad-nbdp{display:block;text-decoration:none;color:inherit;margin:0 auto;max-width:1200px;overflow:hidden;transition:transform .3s;padding:0 32px}
.ad-nbdp:hover{transform:translateY(-2px)}
.ad-nbdp-inner{display:grid;grid-template-columns:1fr 1fr;background:#0A0A0A;min-height:260px}
.ad-nbdp-text{padding:44px 52px;display:flex;flex-direction:column;justify-content:center}
.ad-nbdp-badge{font-family:'Jost',sans-serif;font-size:9px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:#E8DDD0;margin-bottom:16px;display:inline-block}
.ad-nbdp-brand{font-family:'Newsreader',serif;font-size:36px;font-weight:700;color:#fff;letter-spacing:.5px;line-height:1.15;margin-bottom:6px}
.ad-nbdp-tagline{font-family:'Newsreader',serif;font-size:15px;font-weight:400;font-style:italic;color:rgba(255,255,255,.45);margin-bottom:20px;letter-spacing:.5px}
.ad-nbdp-desc{font-family:'Jost',sans-serif;font-size:13.5px;color:rgba(255,255,255,.58);line-height:1.65;margin-bottom:24px;max-width:380px}
.ad-nbdp-cta{font-family:'Jost',sans-serif;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#E8DDD0;display:inline-flex;align-items:center;gap:8px;padding:11px 26px;border:1.5px solid rgba(232,221,208,.4);transition:all .3s;align-self:flex-start}
.ad-nbdp:hover .ad-nbdp-cta{background:#E8DDD0;color:#0A0A0A;border-color:#E8DDD0}
.ad-nbdp-img{position:relative;overflow:hidden}
.ad-nbdp-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.ad-nbdp:hover .ad-nbdp-img img{transform:scale(1.03)}

/* NEW FOOTER — BoF Style */
.new-footer{background:#1a1a1a;color:#fff;padding:48px 32px 24px;margin-top:44px;max-width:100%}
.footer-top{max-width:1200px;margin:0 auto 28px;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:start;border-bottom:1px solid #333;padding-bottom:28px}
.footer-top .footer-header,.footer-top .footer-promo{max-width:none;margin:0;border:none;padding:0;background:transparent;text-align:left}
.footer-top .footer-promo{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"cover text" "cover btn";column-gap:16px;row-gap:6px;background:#2a2a2a;padding:12px 16px;border-radius:4px;align-items:center}
.footer-top .footer-promo > .footer-promo-cover{grid-area:cover;align-self:center}
.footer-top .footer-promo > p{grid-area:text;align-self:end;margin:0;font-size:13px;color:#ccc;line-height:1.3}
.footer-top .footer-promo > .btn{grid-area:btn;align-self:start;justify-self:start;padding:6px 14px;font-size:10px;letter-spacing:1.5px}
.footer-top .footer-promo img{width:100px;height:68px;object-fit:cover;border-radius:3px;flex-shrink:0;margin:0}
.footer-header{max-width:1200px;margin:0 auto 32px;border-bottom:1px solid #333;padding-bottom:24px}
.footer-header h2{font-family:'Newsreader',serif;font-size:28px;font-weight:700;color:#fff;margin-bottom:8px}
.footer-header p{color: var(--gc-muted);font-size:14px;line-height:1.5;max-width:500px}
.footer-content{max-width:1200px;margin:0 auto 32px;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.footer-column h4{font-size:12px;font-weight:600;letter-spacing:1.5px;margin-bottom:16px;color:#fff;border-bottom:1px solid #444;padding-bottom:8px}
.footer-column ul{list-style:none;padding:0;margin:0}
.footer-column li{margin-bottom:8px}
.footer-column a{color:#ccc;text-decoration:none;font-size:14px;transition:color .2s}
.footer-column a:hover{color:#fff}
.social-icons{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px}
.social-icons a{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:600;font-style:normal;border:1px solid #444;border-radius:50%;transition:border-color .2s}
.social-icons a:hover{border-color: var(--gc-rule)}
.footer-promo{background:#2a2a2a;padding:16px;border-radius:4px;text-align:center}
.footer-promo img{width:100%;max-width:280px;border-radius:4px;margin:0 auto 12px}
.footer-promo p{font-size:14px;margin-bottom:12px;color:#ccc}
.footer-promo .btn{background: var(--gc-paper);color: var(--gc-ink);padding:8px 16px;font-size:12px;font-weight:600;letter-spacing:1.5px;text-decoration:none;display:inline-block;transition:background .3s}
.footer-promo .btn:hover{background:#ddd}
.footer-bottom{max-width:1200px;margin:0 auto;border-top:1px solid #333;padding-top:16px;text-align:center}
.footer-bottom p{font-size:12px;color: var(--gc-muted)}
.footer-bottom a{color: var(--gc-muted);transition:color .2s}
.footer-bottom a:hover{color:#fff}

/* SEARCH OVERLAY */
.search-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:var(--gc-overlay);z-index:200;align-items:flex-start;justify-content:center;padding-top:120px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.search-overlay.active{display:flex}
.search-box{width:100%;max-width:640px;padding:0 32px}
.search-box input{width:100%;border:none;border-bottom:2px solid #1A1A1A;font-family:'Newsreader',serif;font-size:32px;font-weight:600;color: var(--gc-ink);padding:16px 0;outline:none;background:transparent}
.search-box input::placeholder{color:#ccc}
.search-close{position:absolute;top:28px;right:36px;background:none;border:none;font-size:28px;cursor:pointer;color: var(--gc-text)}
.search-results{margin-top:24px}
.search-results a{display:block;padding:14px 0;border-bottom:1px solid var(--gc-rule);font-family:'Newsreader',serif;font-size:18px;color: var(--gc-ink);transition:color .2s}
.search-results a:hover{color:#8a2e3b}
.search-results .sr-cat{font-family:'Jost',sans-serif;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#8a2e3b;margin-bottom:4px;display:block}

/* =============================================
   ARTICLE PAGE — 2-Column Layout (Beauty Independent Style)
   ============================================= */
.article-layout{max-width:1200px;margin:0 auto;padding:48px 32px 0;display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:start}
/* article-shell — flat single-column container for layouts that have no
   sidebar (B, D). Avoids the legacy .article-layout grid which used to
   reserve a 340px right column and relied on :has() to collapse, which
   was fragile and left the share-footer drifting to the right rail. */
.article-shell{max-width:780px;margin:0 auto;padding:48px 32px 0}
.article-shell .article-content{min-width:0;width:100%}
.article-content{min-width:0}
.article-cat-tag{font-family:'Jost',sans-serif;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;display:inline-block;margin-bottom:12px}
.article-cat-tag.distribution{color:#8a2e3b}.article-cat-tag.brand{color:#2D5F8A}.article-cat-tag.trends{color:#D4A843}.article-cat-tag.tech{color:#3AAB7C}.article-cat-tag.marketing{color:#3AAB7C}.article-cat-tag.investment{color:#2D5F8A}.article-cat-tag.podcast{color:#D4A843}
.article-headline{font-family:'Newsreader',serif;font-size:42px;font-weight:700;color: var(--gc-ink);line-height:1.12;margin-bottom:20px}
.article-author-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:0}
.article-author-info{display:flex;align-items:center;gap:12px}
.article-avatar{width:40px;height:40px;border-radius:50%;background: var(--gc-rule);display:flex;align-items:center;justify-content:center;font-family:'Jost',sans-serif;font-size:13px;font-weight:700;color: var(--gc-muted);flex-shrink:0;overflow:hidden}
.article-avatar.has-photo,.bio-avatar.has-photo{background:transparent}
.article-avatar img,.bio-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.hero-author-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.4);flex-shrink:0}
.article-author-name{font-family:'Jost',sans-serif;font-size:13px;font-weight:700;color: var(--gc-ink);text-transform:uppercase;letter-spacing:.5px}
.article-author-date{font-family:'Jost',sans-serif;font-size:13px;color: var(--gc-muted);margin-top:2px}
.article-social{display:flex;gap:8px}
.article-social a{width:32px;height:32px;border-radius:50%;border:1px solid var(--gc-rule-strong);display:flex;align-items:center;justify-content:center;font-size:13px;color: var(--gc-muted);transition:border-color .2s}
.article-social a:hover{border-color:#8a2e3b;color:#8a2e3b}
.article-rose-line{height:3px;background:#8a2e3b;margin:20px 0 28px}
.article-lead{font-family:'Newsreader',serif;font-size:24px;font-weight:500;color: var(--gc-ink);line-height:1.5;letter-spacing:-0.2px;margin-bottom:30px}
.article-featured-img{display:block;width:100%;max-width:100%;max-height:560px;height:auto;object-fit:contain;margin:0 0 28px;background: var(--gc-band)}
.article-body p{font-family:'Jost',sans-serif;font-size:17px;color: var(--gc-text);line-height:1.85;margin-bottom:24px}
.article-body h2{font-family:'Newsreader',serif;font-size:22px;font-weight:700;color: var(--gc-ink);margin-top:36px;margin-bottom:16px}
.article-pullquote{border-top:1px solid var(--gc-rule);border-bottom:1px solid var(--gc-rule);padding:32px 20px;margin:40px 0;text-align:center}
.article-pullquote p{font-family:'Newsreader',serif;font-size:28px;font-weight:400;color: var(--gc-ink);line-height:1.35;margin-bottom:16px}
.article-pullquote .tweet-this{font-family:'Jost',sans-serif;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#8a2e3b;cursor:pointer}
.article-pullquote .tweet-this:hover{text-decoration:underline}
.article-share-footer{border-top:2px solid #1A1A1A;border-bottom:2px solid #1A1A1A;display:flex;align-items:center;justify-content:space-between;padding:16px 0;margin-top:40px}
.article-share-footer span{font-family:'Jost',sans-serif;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color: var(--gc-ink)}

/* Source attribution — editor note crediting the original reporting, rendered
   above the share footer */
.article-sources{margin-top:40px;padding-top:24px;border-top:1px solid var(--gc-rule)}
.article-sources-note{font-family:'Jost',sans-serif;font-size:13px;line-height:1.65;color: var(--gc-muted);font-style:italic;margin:0}
.article-sources-note a{color:#8a2e3b;font-style:normal;text-decoration:none;word-break:break-word;border-bottom:1px solid rgba(138,46,59,.3)}
.article-sources-note a:hover{border-bottom-color:#8a2e3b}

/* Sidebar */
.article-sidebar{position:sticky;top:120px}
.sidebar-nl{background:#FDF0F0;padding:28px;margin-bottom:24px}
.sidebar-nl h3{font-family:'Newsreader',serif;font-size:24px;font-weight:700;color: var(--gc-ink);line-height:1.25}
.sidebar-nl p{font-family:'Jost',sans-serif;font-size:14px;color: var(--gc-muted);margin-top:8px;line-height:1.5}
.sidebar-nl input{width:100%;border:1px solid #1A1A1A;padding:12px 14px;font-family:'Jost',sans-serif;font-size:14px;margin-top:14px;outline:none}
.sidebar-nl input::placeholder{font-family:'Jost',sans-serif;font-size:11px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color: var(--gc-muted)}
.sidebar-premium{background: var(--gc-band);padding:24px}
.sidebar-premium h4{font-family:'Jost',sans-serif;font-size:13px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color: var(--gc-ink);margin-bottom:20px;display:flex;align-items:center;gap:6px}
.sidebar-premium h4::before{content:'✦';color:#8a2e3b}
.sidebar-card{display:flex;gap:14px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--gc-rule)}
.sidebar-card:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0}
.sidebar-card img{width:80px;height:80px;object-fit:cover;flex-shrink:0}
.sidebar-card-text .scat{font-family:'Jost',sans-serif;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.sidebar-card-text .scat.distribution{color:#8a2e3b}.sidebar-card-text .scat.brand{color:#2D5F8A}.sidebar-card-text .scat.trends{color:#D4A843}.sidebar-card-text .scat.tech{color:#3AAB7C}.sidebar-card-text .scat.investment{color:#2D5F8A}
.sidebar-card-text h5{font-family:'Jost',sans-serif;font-size:14px;font-weight:700;color: var(--gc-ink);line-height:1.3;margin-top:4px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sidebar-card-text h5 a:hover{color:#8a2e3b}

/* Related Articles (full-width below 2-col) */
.article-related{max-width:1200px;margin:48px auto 0;padding:0 32px}

/* =============================================
   CATEGORY PAGES
   ============================================= */
.cat-page-header{padding:48px 0 0}
.cat-page-border{border-bottom:2px solid #1A1A1A;margin-bottom:40px;padding-bottom:20px}
.cat-page-title{font-family:'Newsreader',serif;font-size:42px;font-weight:700;color: var(--gc-ink)}
.cat-page-subtitle{font-family:'Jost',sans-serif;font-size:16px;color: var(--gc-muted);margin-top:8px;line-height:1.5}
/* Featured item: image and headline share the top row, then the standfirst and
   byline run the FULL width beneath both. Keeping them in the narrow headline
   column left the excerpt wrapping every few words once the ad rail took its
   share of the row. */
.cat-featured{display:grid;grid-template-columns:1.2fr .8fr;gap:18px 36px;align-items:start;margin-bottom:48px}
.cat-featured img{width:100%;aspect-ratio:3/2;object-fit:cover}
.cat-featured-img-link{grid-column:1;grid-row:1}
.cat-featured-text{grid-column:2;grid-row:1}
.cat-featured .excerpt{grid-column:1 / -1}
.cat-featured .meta{grid-column:1 / -1}
.cat-featured-text .cat-tag{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px;display:inline-block}
.cat-featured-text .cat-tag.distribution{color:#8a2e3b}.cat-featured-text .cat-tag.brand{color:#2D5F8A}.cat-featured-text .cat-tag.trends{color:#D4A843}.cat-featured-text .cat-tag.tech{color:#3AAB7C}.cat-featured-text .cat-tag.marketing{color:#3AAB7C}.cat-featured-text .cat-tag.investment{color:#2D5F8A}
.cat-featured-text h2{font-family:'Newsreader',serif;font-size:32px;font-weight:700;color: var(--gc-ink);line-height:1.2;margin-bottom:12px}
.cat-featured-text h2 a:hover{color:#8a2e3b}
.cat-featured .excerpt{font-family:'Jost',sans-serif;font-size:15px;color: var(--gc-muted);line-height:1.6}
.cat-featured .meta{font-family:'Jost',sans-serif;font-size:13px;color: var(--gc-muted);margin-top:12px}

/* Podcast episodes */
.podcast-episode{display:flex;align-items:center;gap:24px;padding:28px 0;border-bottom:1px dashed var(--gc-rule-strong)}
.podcast-episode:first-child{padding-top:0}
.podcast-ep-num{font-family:'Newsreader',serif;font-size:48px;font-weight:700;color:#E8E8E8;flex-shrink:0;min-width:80px;text-align:center}
.podcast-ep-info{flex:1}
.podcast-ep-info h3{font-family:'Newsreader',serif;font-size:22px;font-weight:700;color: var(--gc-ink);line-height:1.3}
.podcast-ep-info .guest{font-family:'Jost',sans-serif;font-size:14px;color:#D4A843;font-weight:600;margin-top:4px}
.podcast-ep-info .ep-meta{font-family:'Jost',sans-serif;font-size:13px;color: var(--gc-muted);margin-top:6px}
.podcast-listen-btn{background:#1A1A1A;color:#fff;font-family:'Jost',sans-serif;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:12px 28px;border:none;cursor:pointer;transition:background .3s;flex-shrink:0}
.podcast-listen-btn:hover{background:#333}

/* About & Newsletter pages */
.page-centered{max-width:720px;margin:0 auto;padding:60px 32px}
.page-centered h1{font-family:'Newsreader',serif;font-size:42px;font-weight:700;color: var(--gc-ink);text-align:center;margin-bottom:32px}
.page-centered p{font-family:'Jost',sans-serif;font-size:17px;color: var(--gc-text);line-height:1.85;margin-bottom:20px}
.page-centered h2{font-family:'Newsreader',serif;font-size:24px;font-weight:700;color: var(--gc-ink);margin-top:40px;margin-bottom:16px}
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:24px}
.team-member h3{font-family:'Newsreader',serif;font-size:20px;font-weight:600;color: var(--gc-ink)}
.team-member p{font-family:'Jost',sans-serif;font-size:14px;color: var(--gc-muted);margin-top:4px}
.nl-page-form{max-width:480px;margin:32px auto;text-align:center}
.nl-page-form input{display:block;width:100%;border:1px solid var(--gc-rule);padding:14px 16px;font-family:'Jost',sans-serif;font-size:15px;color: var(--gc-text);margin-top:12px;outline:none}
.nl-page-form input:focus{border-color:#8a2e3b}
.nl-page-form input::placeholder{color:#aaa}
.nl-page-form button{display:inline-block;background:#1A1A1A;color:#fff;font-family:'Jost',sans-serif;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:16px 40px;border:none;cursor:pointer;margin-top:16px;transition:background .3s}
.nl-page-form button:hover{background:#333}
.nl-page-form .note{font-family:'Jost',sans-serif;font-size:14px;color:#aaa;margin-top:12px}

/* Admin page */
.admin-header{background:#1A1A1A;padding:20px 32px;display:flex;align-items:center;justify-content:space-between}
.admin-header h1{font-family:'Newsreader',serif;font-size:24px;font-weight:600;color:#fff}
.admin-header a{color:#8a2e3b;font-family:'Jost',sans-serif;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase}
.admin-body{max-width:1200px;margin:0 auto;padding:32px}
.admin-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:32px}
.admin-stat{background: var(--gc-band);padding:20px;text-align:center}
.admin-stat h3{font-family:'Newsreader',serif;font-size:32px;font-weight:700;color: var(--gc-ink)}
.admin-stat p{font-family:'Jost',sans-serif;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color: var(--gc-muted);margin-top:4px}
.admin-table{width:100%;border-collapse:collapse;font-family:'Jost',sans-serif;font-size:14px}
.admin-table th{background:#1A1A1A;color:#fff;padding:12px 16px;text-align:left;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.admin-table td{padding:12px 16px;border-bottom:1px solid var(--gc-rule)}
.admin-table tr:hover td{background: var(--gc-band)}
.admin-cat-badge{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:3px 8px;border-radius:2px}
.admin-refresh-btn{background:#8a2e3b;color:#fff;font-family:'Jost',sans-serif;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:12px 28px;border:none;cursor:pointer;transition:background .3s}
.admin-refresh-btn:hover{background:#763941}

/* =============================================
   MOBILE MENU OVERLAY
   ============================================= */
.mobile-menu{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:var(--gc-overlay);z-index:200;padding:80px 40px 40px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mobile-menu.active{display:block}
.mobile-menu-close{position:absolute;top:24px;right:32px;background:none;border:none;font-size:28px;cursor:pointer;color: var(--gc-text)}
.mobile-menu-nav{display:flex;flex-direction:column;gap:0}
.mobile-menu-nav a{font-family:'Newsreader',serif;font-size:28px;font-weight:600;color: var(--gc-ink);padding:14px 0;border-bottom:1px solid var(--gc-rule);transition:color .2s}
.mobile-menu-nav a:hover{color:var(--gc-accent)}

/* =============================================
   READING PROGRESS BAR
   ============================================= */
.reading-progress{position:fixed;top:0;left:0;width:0;height:3px;background:linear-gradient(90deg,#8a2e3b,#D4A843);z-index:999;transition:width .1s linear}

/* =============================================
   ARTICLE ENHANCEMENTS (all layouts)
   ============================================= */

/* Reading time badge */
.article-reading-time{font-family:'Jost',sans-serif;font-size:12px;color: var(--gc-muted);letter-spacing:.5px;display:inline-flex;align-items:center;gap:5px}
.article-reading-time svg{width:14px;height:14px;stroke:#bbb;fill:none}

/* Drop cap */
.article-lead.has-dropcap::first-letter{font-family:'Newsreader',serif;float:left;font-size:72px;font-weight:700;line-height:.8;padding-right:10px;padding-top:6px;color: var(--gc-ink)}

/* Image caption */
.article-img-wrap{margin:0 0 28px;background: var(--gc-band);display:flex;justify-content:center;align-items:center}
/* No crop: contain + center on a neutral bg lets the editor's source image
   render at its natural ratio. Cap the rendered height so 9:16 portraits
   don't take over the page, but never crop the subject. */
.article-img-wrap img{display:block;width:100%;max-width:100%;max-height:560px;height:auto;object-fit:contain}
.article-img-caption{font-family:'Jost',sans-serif;font-size:12px;color:#aaa;margin-top:8px;font-style:italic;padding-bottom:16px;border-bottom:1px solid var(--gc-rule)}

/* Enhanced pullquote with decorative quotes */
.article-pullquote{border:none;padding:40px 24px;margin:44px 0;text-align:center;position:relative;background: var(--gc-band)}
.article-pullquote::before{content:'\201C';font-family:'Newsreader',serif;font-size:80px;font-weight:700;color:#E5E5E5;position:absolute;top:-10px;left:20px;line-height:1}
.article-pullquote p{font-family:'Newsreader',serif;font-size:24px;font-weight:400;color: var(--gc-ink);line-height:1.4;margin-bottom:12px;font-style:italic}
.article-pullquote .pq-source{font-family:'Jost',sans-serif;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#8a2e3b;display:block;margin-top:4px}

/* Sticky floating share bar */
.article-share-float{position:fixed;left:calc(50% - 620px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:50}
.article-share-float a{width:38px;height:38px;border-radius:50%;border:1px solid var(--gc-rule);background: var(--gc-paper);display:flex;align-items:center;justify-content:center;font-size:14px;color: var(--gc-muted);transition:all .2s;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.article-share-float a:hover{border-color:#8a2e3b;color:#8a2e3b;box-shadow:0 2px 8px rgba(138,46,59,.15)}

/* Table of Contents */
.article-toc{background: var(--gc-band);border-left:3px solid #8a2e3b;padding:20px 24px;margin-bottom:32px}
.article-toc-title{font-family:'Jost',sans-serif;font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color: var(--gc-ink);margin-bottom:12px;display:flex;align-items:center;gap:6px}
.article-toc-title::before{content:'☰';font-size:14px}
.article-toc ol{list-style:none;counter-reset:toc}
.article-toc ol li{counter-increment:toc;padding:6px 0;border-bottom:1px solid var(--gc-rule)}
.article-toc ol li:last-child{border-bottom:none}
.article-toc ol li::before{content:counter(toc,decimal-leading-zero);font-family:'Jost',sans-serif;font-size:11px;font-weight:700;color:#8a2e3b;margin-right:10px}
.article-toc ol li a{font-family:'Jost',sans-serif;font-size:14px;font-weight:500;color: var(--gc-text);transition:color .2s}
.article-toc ol li a:hover{color:#8a2e3b}

/* Article Tags */
.article-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;padding-top:20px;border-top:1px solid var(--gc-rule)}
.article-tags a{font-family:'Jost',sans-serif;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color: var(--gc-muted);background: var(--gc-band);padding:6px 14px;transition:all .2s}
.article-tags a:hover{background:#8a2e3b;color:#fff}

/* Author Bio Box */
.author-bio-box,.article-author-bio{display:flex;gap:20px;padding:28px;background: var(--gc-band);margin-top:32px;align-items:flex-start}
.author-bio-avatar,.bio-avatar{width:64px;height:64px;border-radius:50%;background: var(--gc-rule);display:flex;align-items:center;justify-content:center;font-family:'Jost',sans-serif;font-size:20px;font-weight:700;color: var(--gc-muted);flex-shrink:0;overflow:hidden}
.author-bio-info h4,.bio-info h4{font-family:'Newsreader',serif;font-size:18px;font-weight:700;color: var(--gc-ink)}
.author-bio-info .author-bio-role,.bio-info .author-bio-role{font-family:'Jost',sans-serif;font-size:12px;font-weight:600;color:#8a2e3b;letter-spacing:1px;text-transform:uppercase;margin-top:2px}
.author-bio-info p,.bio-info p{font-family:'Jost',sans-serif;font-size:14px;color: var(--gc-muted);line-height:1.6;margin-top:8px}

/* Enhanced Related Articles */
.article-related-title{font-family:'Newsreader',serif;font-size:24px;font-weight:700;color: var(--gc-ink);padding-bottom:16px;border-bottom:2px solid #1A1A1A;margin-bottom:28px;display:flex;align-items:center;gap:10px}
.article-related-title::before{content:'';width:8px;height:8px;background:#8a2e3b;border-radius:50%;flex-shrink:0}

/* =============================================
   LAYOUT B — LONG-FORM / DEEP DIVE
   Full-width, no sidebar, hero full-bleed
   ============================================= */
.article-layout-b{max-width:100%;margin:0;padding:0}
.article-hero-fullbleed{width:100%;background: var(--gc-band);display:flex;justify-content:center;align-items:center;position:relative}
/* No crop on the full-bleed hero — contain to natural ratio. Subject stays
   centered; max-height keeps tall portraits from dominating the viewport. */
.article-hero-fullbleed img{display:block;width:100%;max-width:100%;max-height:560px;height:auto;object-fit:contain}

/* ========================================================================
   LAYOUTS B (thumbnail-only) + D (thumb + mid image)
   Yann's approved spec: small thumbnail beside the body opening, no full hero
   ======================================================================== */
.article-thumb-row{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;margin-bottom:24px;align-items:start}
/* Lock thumb to its grid track; explicit width + min-width:0 prevents an
   oversized hero image from forcing the column wider than 220px on
   browsers that let flex children expand past their container. */
.article-thumb{background: var(--gc-band);border-radius:4px;overflow:hidden;display:block;width:220px;max-width:220px;min-width:0}
.article-thumb img{display:block;width:100%;max-width:100%;height:auto;max-height:260px;object-fit:contain}
.article-thumb-body{margin:0;min-width:0}
.article-thumb-body p{margin-top:0}
@media (max-width:768px){
  .article-thumb-row{grid-template-columns:1fr;gap:14px}
  .article-thumb{width:100%;max-width:100%}
  .article-thumb img{max-height:200px}
}

/* ========================================================================
   LAYOUT A inline pullquotes (auto-injected from body)
   Distinct from the standalone .article-pullquote so the in-body treatment
   stays visually lighter and doesn't compete with section headers.
   ======================================================================== */
.article-pullquote-inline{border:none;border-left:4px solid #8a2e3b;background:rgba(138,46,59,0.05);padding:22px 26px;margin:28px 0;border-radius:0 4px 4px 0}
.article-pullquote-inline p{font-family:'Newsreader',serif;font-size:22px;font-weight:500;color: var(--gc-ink);line-height:1.5;font-style:italic;margin:0}
.article-pullquote-cite{display:block;margin-top:12px;font-family:'Inter',-apple-system,sans-serif;font-style:normal;font-size:14px;font-weight:600;color:#8a2e3b;letter-spacing:.02em}
.article-pullquote-cite::before{content:"— "}
@media (max-width:768px){
  .article-pullquote-inline{padding:18px 18px;margin:22px 0}
  .article-pullquote-inline p{font-size:18px}
  .article-pullquote-cite{font-size:13px}
}

/* ========================================================================
   LAYOUT C — Key Takeaways box
   ======================================================================== */
.article-takeaways{background: var(--gc-band);border:1px solid #e7e7e7;border-left:4px solid #8a2e3b;padding:20px 24px;margin:0 0 32px;border-radius:0 6px 6px 0}
.article-takeaways-label{font-family:'Jost',sans-serif;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#8a2e3b;margin-bottom:12px}
.article-takeaways ul{margin:0;padding:0;list-style:none}
.article-takeaways li{font-family:'Jost',sans-serif;font-size:15px;color: var(--gc-text);line-height:1.55;padding:6px 0 6px 20px;position:relative}
.article-takeaways li::before{content:'';position:absolute;left:0;top:14px;width:8px;height:8px;background:#8a2e3b;border-radius:50%}
@media (max-width:768px){
  .article-takeaways{padding:16px 18px;margin-bottom:24px}
  .article-takeaways li{font-size:14px}
}
.article-hero-fullbleed-hidden{display:none}

/* ========================================================================
   Mid-article ad — editor-uploaded banner injected between body halves.
   Centered, max-width inside the body column, ADVERTISEMENT kicker on top.
   ======================================================================== */
.article-mid-ad{display:flex;flex-direction:column;align-items:center;gap:10px;margin:36px auto;max-width:100%}
.article-mid-ad-label{font-family:'Jost',sans-serif;font-size:10px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color: var(--gc-muted)}
.article-mid-ad a,.article-mid-ad img{display:block;max-width:100%;width:auto;height:auto}
.article-mid-ad img{max-height:300px;border-radius:6px;background: var(--gc-band)}
@media (max-width:768px){
  .article-mid-ad{margin:28px auto}
  .article-mid-ad img{max-height:220px}
}

/* ========================================================================
   ARTICLE SIDEBAR — right-rail rendered on Layouts A + C
   Sticky stack: report promo + newsletter signup + sponsor ad + related.
   Collapses to a single column under 1024px so phones / tablets keep the
   body width.
   ======================================================================== */
/* Two-class selector (specificity 0,2,0). !important on the grid template
   so no legacy single-class .article-layout rule inside a media query
   can ever steal back the layout — keeping production renders stable
   even when the cascade is fragile. */
.article-layout.article-layout-with-sidebar{display:grid !important;grid-template-columns:minmax(0,1fr) 320px !important;gap:48px;max-width:1200px;margin:0 auto;padding:32px 32px 0;align-items:start}
.article-layout.article-layout-with-sidebar > .article-content{max-width:none;min-width:0;grid-column:1}
.article-layout.article-layout-with-sidebar > .article-sidebar{grid-column:2;width:320px;min-width:0}
.article-sidebar{width:300px;min-width:0}
.article-sidebar-inner{position:sticky;top:88px;display:flex;flex-direction:column;gap:20px}
@media (max-width:1024px){
  .article-layout.article-layout-with-sidebar{grid-template-columns:1fr !important;gap:32px}
  .article-layout.article-layout-with-sidebar > .article-sidebar{grid-column:1;width:100%}
  .article-sidebar{width:100%}
  .article-sidebar-inner{position:static;flex-direction:column}
}

/* Annual report promo — image-led card linking to the report PDF gate.
   Uses /img/promo/70.png as the hero visual. Falls back to a flat background
   if the image fails so the CTA text stays readable. */
.article-side-promo{display:block;background:#0F0F0F;color:#fff;border-radius:8px;overflow:hidden;font-family:'Jost',sans-serif;text-decoration:none;transition:transform .15s}
.article-side-promo:hover{transform:translateY(-2px)}
/* No max-height — image renders at natural ratio, full height in the card. */
.article-side-promo-image img{display:block;width:100%;height:auto;object-fit:contain}
.article-side-promo-body{padding:18px 20px 20px}
/* Image-only variant — strips the dark card so the visual stands alone. */
.article-side-promo-image-only{background:transparent;border-radius:8px;overflow:hidden}
.article-side-promo-image-only img{border-radius:8px}
.article-side-promo-kicker{font-size:9.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.7);margin-bottom:8px}
.article-side-promo-title{font-family:'Newsreader',serif;font-size:18px;font-weight:700;line-height:1.2;margin-bottom:8px;color:#fff}
.article-side-promo p{font-size:12.5px;line-height:1.55;color:rgba(255,255,255,0.78);margin:0 0 14px}
.article-side-btn{display:inline-block;background: var(--gc-paper);color: var(--gc-ink);text-decoration:none;font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;padding:10px 18px;border-radius:4px;transition:background .15s,color .15s}
.article-side-promo:hover .article-side-btn{background:#8A2E3B;color:#fff}

/* Newsletter signup */
.article-side-newsletter{background: var(--gc-band);border:1px solid #EDEDED;border-radius:8px;padding:22px 20px;font-family:'Jost',sans-serif}
.article-side-newsletter-kicker{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#8a2e3b;margin-bottom:10px}
.article-side-newsletter h4{font-family:'Newsreader',serif;font-size:18px;font-weight:700;color: var(--gc-ink);line-height:1.2;margin:0 0 8px}
.article-side-newsletter p{font-size:12.5px;color: var(--gc-muted);line-height:1.55;margin:0 0 14px}
.article-side-newsletter-form{display:flex;flex-direction:column;gap:8px}
.article-side-newsletter-form input{padding:10px 12px;border:1.5px solid #E0E0E0;border-radius:4px;font:inherit;font-size:13px;background: var(--gc-paper);outline:none;transition:border-color .15s;width:100%;box-sizing:border-box}
.article-side-newsletter-form input:focus{border-color:#8a2e3b}
.article-side-newsletter-form button{background:#1A1A1A;color:#fff;border:none;padding:11px 16px;border-radius:4px;font:inherit;font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;cursor:pointer;transition:background .15s}
.article-side-newsletter-form button:hover{background:#8a2e3b}
.article-side-newsletter-status{font-size:12px;color: var(--gc-muted);min-height:14px}
.article-side-newsletter-status.ok{color:#3d6b3d}
.article-side-newsletter-status.err{color:#8a2e3b}

/* Sponsor ad */
.article-side-ad{display:block;text-decoration:none;color:inherit;background:#0a0a0a;border-radius:8px;overflow:hidden}
.article-side-ad-melyon{background:#272727}
.article-side-ad-label{font-family:'Jost',sans-serif;font-size:9px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.55);padding:10px 16px 0}
.article-side-ad-inner{padding:14px 16px 18px}
.article-side-ad-inner img{display:block;width:100%;height:160px;object-fit:cover;border-radius:4px;margin-bottom:12px}
.article-side-ad-brand{font-family:'Newsreader',serif;font-size:18px;font-weight:700;color:#fff;margin-bottom:4px}
.article-side-ad-text p{font-family:'Jost',sans-serif;font-size:12px;color:rgba(255,255,255,.6);line-height:1.5;margin:0 0 10px}
.article-side-ad-cta{font-family:'Jost',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:#E8DDD0}
.article-side-ad-melyon .article-side-ad-cta{color:#D4A843}

/* Related */
.article-side-related{background: var(--gc-paper);border:1px solid #EDEDED;border-radius:8px;padding:18px 20px;font-family:'Jost',sans-serif;display:flex;flex-direction:column;gap:14px}
.article-side-related-kicker{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color: var(--gc-muted);margin-bottom:0}
.article-side-related-card{display:grid;grid-template-columns:72px 1fr;gap:10px;text-decoration:none;color:inherit;align-items:start;padding-bottom:12px;border-bottom:1px solid var(--gc-rule)}
.article-side-related-card:last-of-type{border-bottom:none;padding-bottom:0}
.article-side-related-card img{display:block;width:72px;height:54px;object-fit:cover;border-radius:4px;background: var(--gc-band)}
.article-side-related-meta{display:flex;flex-direction:column;gap:4px;min-width:0}
.article-side-related-cat{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#8a2e3b}
.article-side-related-meta h5{font-family:'Newsreader',serif;font-size:13.5px;font-weight:600;color: var(--gc-ink);line-height:1.3;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.article-side-related-card:hover h5{color:#8a2e3b}
.article-side-related-link{font-family:'Newsreader',serif;font-size:13px;font-weight:600;color: var(--gc-ink);text-decoration:none;line-height:1.3;padding-top:4px;border-top:1px solid var(--gc-rule);margin-top:4px}
.article-side-related-link:hover{color:#8a2e3b}

/* ========================================================================
   HUB SIDEBAR AD — a 2-column grid puts the ad in a sticky right rail beside
   the content. The ad lives in an explicit grid column (grid-column:2) so it
   can never escape the container — robust across feed lists AND card grids
   (e.g. the homepage). Inert (display:block, aside hidden) until site-pages.js
   adds `.has-ad`; a page with no active ad is unchanged. The creative is
   chrome-less (centered label + rounded image) so it reads as a light ad.
   ======================================================================== */
.bs-rail-wrap{display:block}
.bs-rail-wrap.has-ad{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;max-width:1200px;margin:0 auto;padding:0 32px;align-items:start}
.bs-rail-wrap.has-ad > :not(.bs-rail){grid-column:1;min-width:0}
.bs-rail-wrap.has-ad > .container{max-width:none;padding-left:0;padding-right:0;margin-left:0;margin-right:0}
.bs-rail-wrap.has-ad > .bs-rail{grid-column:2;grid-row:1}
.bs-rail-inner{position:sticky;top:88px;margin-top:36px}
/* Chrome-less creative — no card/border/shadow, a small centered label, and a
   softly-rounded image like an article thumbnail. */
.bs-rail-ad{background:transparent;border:none;box-shadow:none}
.bs-rail-ad-label{text-align:center;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#a1a1aa;padding:0 0 12px}
.bs-rail-ad-x{display:none}
.bs-rail-ad-link{display:block}
.bs-rail-ad img{display:block;width:100%;height:auto;border-radius:10px}
/* Hub-driven article-rail ad — clean/light presentation to match the reference
   (centered label + rounded full image); the hardcoded NBDP/Melyon sponsor keeps
   its own dark card since it doesn't carry .article-side-ad-hub. */
.article-side-ad-hub{background:transparent;border-radius:0;overflow:visible}
.article-side-ad-hub .article-side-ad-label{text-align:center;color:#a1a1aa;letter-spacing:2px;padding:0 0 10px}
.article-side-ad-hub img{border-radius:10px}
@media (max-width:1024px){
  .bs-rail-wrap.has-ad{grid-template-columns:1fr;gap:28px;padding:0}
  .bs-rail-wrap.has-ad > .container{padding-left:32px;padding-right:32px}
  .bs-rail-wrap.has-ad > .bs-rail{grid-column:1;grid-row:auto;max-width:400px;margin:0 auto}
  .bs-rail-inner{position:static}
}

/* ========================================================================
   Gram Culture+ badge — applied to any card whose article is `exclusive=yes`.
   Renders inline alongside the category pill on hero, sidebar, story, and
   in-depth cards (and inline with the cat tag on the article page itself).
   ======================================================================== */
.bs-plus-badge{display:inline-flex;align-items:center;gap:4px;font-family:'Jost',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#7a5a16;background:linear-gradient(135deg,#f5d97a 0%,#d4a843 60%,#b8892e 100%);border:1px solid #b8892e;padding:3px 8px 3px 7px;border-radius:20px;line-height:1;vertical-align:middle;margin-left:8px;box-shadow:0 1px 2px rgba(180,136,46,0.25)}
.bs-plus-badge svg{display:block;width:10px;height:10px}
.hero-meta-row,.hero-sidebar-meta,.story-card-meta{display:flex;align-items:center;gap:0;flex-wrap:wrap;margin-bottom:8px}
.hero-meta-row .bs-plus-badge,.hero-sidebar-meta .bs-plus-badge,.story-card-meta .bs-plus-badge{margin-left:8px}
.bof-feed-cat + .bs-plus-badge{margin-left:8px}

/* ========================================================================
   GRAM CULTURE+ PAYWALL — exclusive article gate
   Server always emits the wall. Inline script in renderArticle removes it
   by adding .is-unlocked to the wrap when bsAuth reports a paid plan.
   ======================================================================== */
.article-paywall{position:relative}
.article-paywall-content{position:relative;max-height:780px;overflow:hidden;filter:blur(6px);-webkit-filter:blur(6px);pointer-events:none;transition:filter .2s ease,max-height .2s ease}
/* Fade-out gradient sits on top of the blurred body so the lower edge
   feels intentional rather than chopped. */
.article-paywall-content::after{content:'';position:absolute;left:0;right:0;bottom:0;height:240px;background:linear-gradient(to bottom,transparent 0%,var(--gc-paper) 72%,var(--gc-paper) 100%);pointer-events:none}
.article-paywall-overlay{position:absolute;inset:auto 0 0 0;display:flex;align-items:flex-end;justify-content:center;padding:40px 24px 60px;z-index:5}
.article-paywall-card{max-width:560px;width:100%;background: var(--gc-paper);border:1px solid #ECECEC;border-radius:10px;box-shadow:0 20px 50px rgba(0,0,0,.12);padding:36px 32px 32px;text-align:center;font-family:'Jost',sans-serif}
.article-paywall-kicker{display:inline-block;font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:#8a2e3b;border:1.5px solid #8a2e3b;padding:5px 14px;border-radius:20px;margin-bottom:14px}
.article-paywall-card h2{font-family:'Newsreader',serif;font-size:30px;font-weight:700;color: var(--gc-ink);margin:0 0 10px;line-height:1.15;letter-spacing:-.3px}
.article-paywall-card p{font-size:14.5px;color: var(--gc-muted);line-height:1.6;margin:0 0 22px}
.article-paywall-cta{display:flex;flex-direction:column;align-items:center;gap:10px}
.article-paywall-btn{display:inline-block;background:#1A1A1A;color:#fff;text-decoration:none;font-size:12px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;padding:13px 34px;border-radius:4px;transition:background .15s}
.article-paywall-btn:hover{background:#8a2e3b}
.article-paywall-login{font-size:12px;color: var(--gc-muted);text-decoration:underline}
.article-paywall-login:hover{color:#8a2e3b}

/* Unlocked state — strip blur, max-height cap, gradient + overlay so the
   paying member reads the article exactly like a free piece. */
.article-paywall.is-unlocked .article-paywall-content{max-height:none;filter:none;-webkit-filter:none;pointer-events:auto}
.article-paywall.is-unlocked .article-paywall-content::after{display:none}
.article-paywall.is-unlocked .article-paywall-overlay{display:none}

@media (max-width:640px){
  .article-paywall-content{max-height:600px}
  .article-paywall-card{padding:28px 22px 24px}
  .article-paywall-card h2{font-size:24px}
}
.article-hero-fullbleed .hero-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.65));padding:60px 0 40px}
.article-hero-fullbleed .hero-overlay-inner{max-width:780px;margin:0 auto;padding:0 32px}
.article-hero-fullbleed .hero-overlay .article-cat-tag{color:#D4A843}
.article-hero-fullbleed .hero-overlay h1{font-family:'Newsreader',serif;font-size:46px;font-weight:700;color:#fff;line-height:1.12;margin-top:8px}
.article-hero-fullbleed .hero-overlay .hero-meta-line{font-family:'Jost',sans-serif;font-size:13px;color:rgba(255,255,255,.75);margin-top:16px;display:flex;align-items:center;gap:16px}
.article-b-body{max-width:780px;margin:0 auto;padding:48px 32px 0}
.article-b-body .article-lead{font-size:24px;line-height:1.55;border-left:3px solid #8a2e3b;padding-left:24px;margin-bottom:36px}
.article-b-body .article-body p{font-size:18px;line-height:1.9}
.article-b-body .article-body h2{font-size:26px;margin-top:44px}
.article-b-body .article-pullquote{margin-left:-40px;margin-right:-40px}
.article-b-mid-img{width:100vw;margin-left:calc(-50vw + 50%);margin-top:40px;margin-bottom:40px;background: var(--gc-band);display:flex;justify-content:center;align-items:center}
/* Contain so the mid-article figure renders the source's natural ratio. */
.article-b-mid-img img{display:block;width:100%;max-width:100%;max-height:560px;height:auto;object-fit:contain}
/* In Layout D (and any layout with a right sidebar) the 100vw full-bleed
   trick blows the figure outside its grid column and overlays the body +
   sidebar. Constrain to the content column — clean inline figure that
   stays within the editorial column and centers itself. */
.article-layout.article-layout-with-sidebar .article-b-mid-img,
.article-layout-d .article-b-mid-img{
  width:100%;
  max-width:100%;
  margin-left:0;
  margin-right:0;
  margin-top:32px;
  margin-bottom:32px;
  background: var(--gc-band);
  border-radius:6px;
  overflow:hidden;
}
.article-layout.article-layout-with-sidebar .article-b-mid-img img,
.article-layout-d .article-b-mid-img img{
  width:100%;
  max-width:100%;
  height:auto;
  max-height:520px;
  object-fit:contain;
  display:block;
  margin:0 auto;
}
.article-layout.article-layout-with-sidebar .article-b-mid-img figcaption,
.article-layout-d .article-b-mid-img figcaption{
  max-width:100%;
  margin:8px 0 0;
  padding:0 16px 14px;
  text-align:center;
}
.article-b-mid-img .article-img-caption,
.article-b-mid-img figcaption{max-width:780px;margin:8px auto 0;padding:0 32px;font-family:'Jost',sans-serif;font-size:13px;color: var(--gc-muted);font-style:italic}

/* =============================================
   LAYOUT C — QUICK TAKE / NEWS BRIEF
   Narrow centered, minimal, no hero image
   ============================================= */
.article-layout-c{max-width:640px;margin:0 auto;padding:48px 32px 0}
.article-quick-badge{font-family:'Jost',sans-serif;font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#fff;background:#1A1A1A;padding:5px 14px;display:inline-block;margin-bottom:16px}
.article-layout-c .article-headline{font-size:34px;margin-bottom:16px}
.article-layout-c .article-body p{font-size:16px;line-height:1.8}
.article-layout-c .article-lead{font-size:19px;font-weight:500;color: var(--gc-text);font-family:'Jost',sans-serif;line-height:1.7;border-bottom:1px solid var(--gc-rule);padding-bottom:20px;margin-bottom:24px}
.article-layout-c .article-body h2{font-size:20px}
.article-layout-c .key-takeaways{background:#F8F5E6;border-left:3px solid #D4A843;padding:20px 24px;margin:24px 0}
.article-layout-c .key-takeaways h3{font-family:'Jost',sans-serif;font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#D4A843;margin-bottom:10px}
.article-layout-c .key-takeaways ul{list-style:none;padding:0}
.article-layout-c .key-takeaways ul li{font-family:'Jost',sans-serif;font-size:14px;color: var(--gc-text);line-height:1.6;padding:6px 0;border-bottom:1px solid rgba(212,168,67,.15);position:relative;padding-left:18px}
.article-layout-c .key-takeaways ul li::before{content:'→';position:absolute;left:0;color:#D4A843;font-weight:700}
.article-layout-c .key-takeaways ul li:last-child{border-bottom:none}

/* =============================================
   RESPONSIVE — Article Enhancements
   ============================================= */
@media(max-width:1280px){
.article-share-float{display:none}
}
@media(max-width:1024px){
.article-layout-b .article-b-body .article-pullquote{margin-left:0;margin-right:0}
}

/* =============================================
   COMPREHENSIVE RESPONSIVE — ADDITIVE ONLY
   No desktop styles modified. Pure media queries.
   Strategy: 5 breakpoints + clamp() fluid scaling
   ============================================= */

/* --- FLUID TYPOGRAPHY (all screens, no breakpoint needed) --- */
/* These use clamp() to scale smoothly from 320px to 1200px viewport.
   On desktop (≥1200px) they resolve to the SAME values as the originals. */

/* --- TABLET LANDSCAPE / SMALL LAPTOP (≤1180px) --- */
@media(max-width:1180px){
  .container{padding:0 28px}
  .header-row1{padding:0 28px}
  .header-nav{padding:0 28px}
  .hero-grid{gap:32px}
  .hero-title{font-size:36px}
  .hero-sidebar h3{font-size:22px}
  .excl-grid{gap:20px}
  .excl-card h4{font-size:16px}
  .new-footer{padding:48px 28px 24px}
  .article-layout{padding:48px 28px 0;gap:36px}
  .article-layout{grid-template-columns:1fr 300px}
  .article-related{padding:0 28px}
  .article-hero-fullbleed .hero-overlay-inner{padding:0 28px}
  .cat-featured{gap:28px}
  .cat-page-title{font-size:38px}
}

/* --- TABLET PORTRAIT (≤1024px) — enriching existing --- */
@media(max-width:1024px){
  .hero-grid{grid-template-columns:1fr .5fr;gap:28px}
  .hero-title{font-size:34px}
  .hero-excerpt{font-size:14px}
  .stories-grid{grid-template-columns:repeat(2,1fr);gap:24px}
  .most-read-grid{grid-template-columns:repeat(2,1fr);gap:0 32px}
  .excl-grid{grid-template-columns:repeat(2,1fr);gap:20px}
  .investment-grid{grid-template-columns:1fr;gap:28px}
  .investment-card-main{order:-1}
  .investment-small-grid{grid-template-columns:repeat(4,1fr);gap:16px}
  .investment-card-small h3{font-size:14px}
  .bof-feed-item{grid-template-columns:1fr 220px;gap:24px}
  .bof-feed-item img{width:220px;height:148px}
  .bof-feed-item h3{font-size:24px}
  .footer-content{grid-template-columns:1fr 1fr;gap:24px}
  .footer-promo{grid-column:span 2}
  .ad-top-text h4{font-size:22px}
  .cat-featured-text h2{font-size:28px}
  .cat-page-title{font-size:36px}
  .page-centered{padding:48px 28px}
  .page-centered h1{font-size:36px}
  .admin-body{padding:24px}
  .admin-table{font-size:13px;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .admin-table th,.admin-table td{padding:10px 12px}
  /* Article layout: single column on tablet */
  .article-layout{grid-template-columns:1fr;gap:32px}
  .article-sidebar{position:static}

  /* Mobile menu polish for tablet */
  .mobile-menu{padding:70px 48px 40px}
  .mobile-menu-nav a{font-size:26px;padding:12px 0}
}

/* --- PHONE LANDSCAPE / LARGE PHONE (≤768px) — enriching existing --- */
@media(max-width:768px){
  /* Touch targets: minimum 44x44px */
  .header-left button{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
  .header-right a{min-height:44px;display:inline-flex;align-items:center}
  .article-social a{width:44px;height:44px}
  .article-tags a{padding:10px 16px;min-height:44px;display:inline-flex;align-items:center}
  .nl-inline-btn{padding:16px 32px;min-height:44px}
  .podcast-listen-btn{padding:14px 28px;min-height:44px}
  .footer-column a{min-height:44px;display:flex;align-items:center}
  .social-icons a{min-width:44px;min-height:44px}
  .article-toc ol li a{min-height:44px;display:flex;align-items:center}
  .admin-refresh-btn{min-height:44px}
  .admin-header a{min-height:44px;display:inline-flex;align-items:center}
  .search-results a{min-height:44px;display:flex;align-items:center}
  .sidebar-nl input{min-height:44px}
  .nl-page-form input{min-height:44px}
  .nl-page-form button{min-height:44px}

  /* Header refinements */
  .header-row2{display:none}
  .header-row1{height:56px}
  .header-logo-text{font-size:24px}

  /* Hero */
  .hero{padding:24px 0 0}
  .hero-grid{grid-template-columns:1fr}
  .hero-title{font-size:28px}
  .hero-sidebar h3{font-size:20px}
  .hero-sidebar p{font-size:15px}

  /* Stories grid */
  .stories-grid{grid-template-columns:1fr}
  .story-card h3{font-size:19px}

  /* In Depth feed */
  .bof-feed-item{grid-template-columns:1fr}
  .bof-feed-item img{width:100%;height:auto;aspect-ratio:16/9}
  .bof-feed-item h3{font-size:22px}
  .bof-feed-item .excerpt{font-size:14px}

  /* Most Read */
  .most-read-grid{grid-template-columns:1fr}
  .most-read-num{font-size:32px;min-width:28px}
  .most-read-item h4{font-size:15px}

  /* Exclusives */
  .excl-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .excl-card h4{font-size:15px}

  /* Investment */
  .investment-grid{grid-template-columns:1fr;gap:24px}
  .investment-card-main{order:-1}
  .investment-small-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .investment-card-main-content h3{font-size:20px}
  .investment-header h2{font-size:1.5rem}

  /* Newsletter inline */
  .nl-inline{flex-direction:column;text-align:center;padding:24px 0;gap:16px}
  .nl-inline h4{font-size:22px}

  /* Footer */
  .new-footer{padding:32px 20px 16px;margin-top:32px}
  .footer-top{grid-template-columns:1fr;gap:20px}
  .footer-header h2{font-size:24px}
  .footer-content{grid-template-columns:1fr 1fr;gap:20px}
  .footer-promo{grid-column:span 2}
  .footer-column a{min-height:40px}
  .footer-bottom{padding-top:12px}

  /* Ad areas */
  .ad-top-inner{grid-template-columns:1fr;text-align:center}
  .ad-top-img{display:none}
  .ad-top-text h4{font-size:20px}
  .ad-mid-banner{flex-direction:column;gap:12px;text-align:center;padding:16px 20px}
  .ad-mid-banner h4{font-size:14px}

  /* Search overlay */
  .search-overlay{padding-top:80px}
  .search-box{padding:0 20px}
  .search-box input{font-size:22px;padding:12px 0}
  .search-close{top:20px;right:20px;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
  .search-results a{font-size:16px;padding:12px 0}

  /* Mobile menu refinements */
  .mobile-menu{padding:70px 28px 32px}
  .mobile-menu-close{top:18px;right:20px;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
  .mobile-menu-nav a{font-size:24px;padding:14px 0;min-height:44px;display:flex;align-items:center}

  /* Article pages — force single column */
  .article-layout{padding:32px 20px 0;gap:24px;grid-template-columns:1fr;display:block}
  .article-content{width:100%}
  .article-sidebar{width:100%;position:static;margin-top:32px}
  .article-headline{font-size:28px;width:100%;word-wrap:break-word}
  .article-lead{font-size:18px}
  .article-body p{font-size:16px;line-height:1.8}
  .article-body h2{font-size:20px}
  .article-pullquote{padding:28px 16px;margin:32px 0}
  .article-pullquote p{font-size:20px}
  .article-pullquote::before{font-size:60px;top:-8px;left:12px}
  .article-author-row{flex-direction:column;gap:12px;align-items:flex-start}
  .article-share-footer{flex-direction:column;gap:12px;text-align:center;padding:14px 0}
  .article-related{padding:0 20px;margin-top:36px}
  .article-related-title{font-size:20px}
  .article-img-caption{font-size:11px}
  .article-lead.has-dropcap::first-letter{font-size:56px;padding-right:8px}
  .author-bio-box,.article-author-bio{flex-direction:column;align-items:center;text-align:center}
  .article-toc{margin-left:0;margin-right:0}

  /* Layout B article */
  .article-b-body .article-lead{border-left:none}
  .article-hero-fullbleed img{max-height:300px}
  .article-hero-fullbleed .hero-overlay h1{font-size:26px}
  .article-hero-fullbleed .hero-overlay .hero-meta-line{font-size:12px;gap:10px;flex-wrap:wrap}
  .article-hero-fullbleed .hero-overlay-inner{padding:0 20px}
  .article-b-body{padding:32px 20px 0}
  .article-b-body .article-lead{font-size:20px;padding-left:0}
  .article-b-body .article-body p{font-size:16px;line-height:1.8}
  .article-b-body .article-body h2{font-size:22px;margin-top:32px}
  .article-b-mid-img .article-img-caption,
  .article-b-mid-img figcaption{padding:0 20px}

  /* Layout C article */
  .article-layout-c{padding:32px 20px 0}
  .article-layout-c .article-headline{font-size:26px}
  .article-layout-c .article-body p{font-size:15px}
  .article-layout-c .article-lead{font-size:17px}
  .article-layout-c .key-takeaways{padding:16px 20px}

  /* Category pages */
  .cat-page-header{padding:32px 0 0}
  .cat-page-border{padding-bottom:16px;margin-bottom:28px}
  .cat-page-title{font-size:30px}
  .cat-page-subtitle{font-size:14px}
  .cat-featured{grid-template-columns:1fr;gap:20px}
  /* Single column here — clear the explicit placement or `grid-column:2` would
     conjure an implicit second column and unstack the card. */
  .cat-featured-img-link,.cat-featured-text{grid-column:1;grid-row:auto}
  .cat-featured-text h2{font-size:24px}
  .cat-featured .excerpt{font-size:14px}

  /* Podcast */
  .podcast-episode{flex-direction:column;text-align:center;gap:16px;padding:24px 0}
  .podcast-ep-num{font-size:36px;min-width:auto}
  .podcast-ep-info h3{font-size:20px}

  /* About / Newsletter pages */
  .page-centered{padding:36px 20px}
  .page-centered h1{font-size:30px;margin-bottom:24px}
  .page-centered p{font-size:16px}
  .page-centered h2{font-size:22px;margin-top:32px}
  .team-grid{grid-template-columns:1fr;gap:24px}

  /* Sidebar (below content at 1024) */
  .sidebar-nl{padding:24px}
  .sidebar-nl h3{font-size:22px}
  .sidebar-premium{padding:20px}

  /* Admin */
  .admin-header{padding:16px 20px;flex-direction:column;gap:8px;text-align:center}
  .admin-body{padding:20px}
  .admin-stats{grid-template-columns:1fr 1fr;gap:12px}
  .admin-stat h3{font-size:26px}
  .admin-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Section header */
  .section-header{margin-bottom:20px;padding-top:32px}
  .section-header h2{font-size:1.5rem}
}

/* --- SMALL PHONE (≤480px) --- */
@media(max-width:480px){
  .container{padding:0 16px}

  /* Header */
  .header-row1{padding:0 16px;height:52px}
  .header-logo-text{font-size:22px}
  .header-right{gap:4px;font-size:9px;letter-spacing:1.5px}
  .header-right span{margin:0 2px}

  /* Hero */
  .hero{padding:16px 0 0}
  .hero-title{font-size:24px}
  .hero-cat{font-size:10px;margin-top:14px}
  .hero-meta{font-size:12px;margin-top:10px}
  .hero-excerpt{font-size:15px;margin-top:10px}
  .hero-sidebar h3{font-size:18px}
  .hero-sidebar .badge{font-size:9px}

  /* Newsletter inline */
  .nl-inline{padding:20px 0}
  .nl-inline h4{font-size:20px}
  .nl-inline p{font-size:15px}
  .nl-inline-btn{padding:14px 28px;font-size:11px}

  /* Story cards */
  .story-card h3{font-size:18px}
  .story-card .cat,.story-card .story-cat{font-size:10px;margin-top:10px}

  /* In Depth */
  .bof-feed-item{padding:20px 0}
  .bof-feed-item h3{font-size:20px}
  .bof-feed-item .excerpt{font-size:15px}

  /* Most Read */
  .most-read-item{padding:12px 0;gap:10px}
  .most-read-num{font-size:28px;min-width:24px}
  .most-read-item h4{font-size:15px}

  /* Exclusives — single column on small phone */
  .excl-grid{grid-template-columns:1fr;gap:20px}
  .excl-card h4{font-size:16px}

  /* Investment */
  .investment-section{margin-top:28px}
  .investment-small-grid{grid-template-columns:1fr 1fr;gap:14px}
  .investment-card-small h3{font-size:14px}
  .investment-card-main-content h3{font-size:18px}
  .investment-card-main-content p{font-size:13px}
  .ad-nbdp{padding:0 16px}
  .ad-nbdp-text{padding:24px 20px}
  .ad-nbdp-brand{font-size:24px}
  .ad-nbdp-desc{font-size:12px}
  .ad-nbdp-cta{font-size:10px;padding:10px 20px}
  .ad-nbdp-img{max-height:180px}
  .ad-nbdp-label{margin-top:24px}

  /* Footer */
  .new-footer{padding:24px 16px 12px;margin-top:28px}
  .footer-top{padding-bottom:20px;margin-bottom:20px;gap:14px}
  .footer-header h2{font-size:22px}
  .footer-header p{font-size:13px}
  /* Footer-top promo card — stack image above text/btn so the 100px
     cover image does not squeeze the rest off-screen on tiny phones. */
  .footer-top .footer-promo{grid-template-columns:1fr;grid-template-areas:"cover" "text" "btn";padding:14px;row-gap:10px}
  .footer-top .footer-promo > .footer-promo-cover{align-self:start;justify-self:start}
  .footer-top .footer-promo img{width:100%;height:auto;max-height:120px}
  .footer-content{grid-template-columns:1fr;gap:20px}
  .footer-promo{grid-column:span 1}
  .footer-column ul{display:grid;grid-template-columns:1fr 1fr;gap:4px}
  .footer-column a{font-size:13px}
  .footer-bottom p{font-size:11px}
  /* Article share-footer + author bio stack center on small screens. */
  .article-share-footer{flex-direction:column;align-items:flex-start;gap:14px;padding:18px 0}
  .article-author-bio{padding:18px;gap:14px;flex-direction:column;text-align:center;align-items:center}

  /* Ad top */
  .ad-top-text{padding:16px 0}
  .ad-top-text h4{font-size:18px}
  .ad-top-text p{font-size:14px}
  .ad-top-text .ad-cta{font-size:10px;padding:8px 18px;margin-top:10px}

  /* Ad mid */
  .ad-mid-banner{padding:14px 16px}
  .ad-mid-banner h4{font-size:13px}
  .ad-mid-banner p{font-size:10px}
  .ad-mid-banner a{font-size:9px;padding:10px 18px}

  /* Search */
  .search-overlay{padding-top:60px}
  .search-box{padding:0 16px}
  .search-box input{font-size:20px}
  .search-close{top:16px;right:16px}
  .search-results a{font-size:15px;padding:10px 0}

  /* Mobile menu */
  .mobile-menu{padding:60px 24px 28px}
  .mobile-menu-close{top:14px;right:16px}
  .mobile-menu-nav a{font-size:22px;padding:12px 0}

  /* Section header */
  .section-header{padding-top:24px;margin-bottom:16px;gap:8px}
  .section-header h2{font-size:18px}
  .section-header-link{font-size:12px}

  /* Article page A */
  .article-layout{padding:24px 16px 0;display:block}
  .article-headline{font-size:24px;margin-bottom:14px;word-wrap:break-word}
  .article-cat-tag{font-size:11px;margin-bottom:8px}
  .article-lead{font-size:17px;margin-bottom:20px}
  .article-body p{font-size:15px;margin-bottom:20px}
  .article-body h2{font-size:19px;margin-top:28px;margin-bottom:12px}
  .article-rose-line{margin:16px 0 20px}
  .article-pullquote{padding:24px 14px;margin:28px 0}
  .article-pullquote p{font-size:18px}
  .article-pullquote::before{font-size:48px;top:-6px;left:8px}
  .article-pullquote .pq-source{font-size:11px}
  .article-toc{padding:16px 18px}
  .article-toc ol li a{font-size:13px}
  .article-tags{gap:6px;margin-top:20px;padding-top:16px}
  .article-tags a{font-size:10px;padding:8px 12px}
  .author-bio-box,.article-author-bio{padding:20px;gap:14px}
  .author-bio-avatar,.bio-avatar{width:52px;height:52px;font-size:16px}
  .author-bio-info h4,.bio-info h4{font-size:16px}
  .author-bio-info p,.bio-info p{font-size:14px}
  .article-share-footer{padding:12px 0;margin-top:28px}
  .article-related{padding:0 16px;margin-top:28px}
  .article-related-title{font-size:18px;padding-bottom:12px;margin-bottom:20px}

  /* Sidebar */
  .sidebar-nl{padding:20px}
  .sidebar-nl h3{font-size:20px}
  .sidebar-nl p{font-size:15px}
  .sidebar-premium{padding:16px}
  .sidebar-card img{width:64px;height:64px}
  .sidebar-card-text h5{font-size:13px}

  /* Layout B */
  .article-hero-fullbleed img{max-height:240px}
  .article-hero-fullbleed .hero-overlay h1{font-size:22px}
  .article-hero-fullbleed .hero-overlay .hero-meta-line{font-size:11px;gap:8px}
  .article-hero-fullbleed .hero-overlay{padding:40px 0 24px}
  .article-b-body{padding:24px 16px 0}
  .article-b-body .article-lead{font-size:18px;padding-left:0;margin-bottom:24px}
  .article-b-body .article-body p{font-size:15px}
  .article-b-body .article-body h2{font-size:20px;margin-top:28px}
  .article-b-mid-img .article-img-caption,
  .article-b-mid-img figcaption{padding:0 16px}

  /* Layout C */
  .article-layout-c{padding:24px 16px 0}
  .article-layout-c .article-headline{font-size:24px}
  .article-layout-c .article-lead{font-size:16px;padding-bottom:16px}
  .article-layout-c .article-body p{font-size:15px}
  .article-layout-c .article-body h2{font-size:18px}
  .article-layout-c .key-takeaways{padding:14px 16px;margin:20px 0}
  .article-layout-c .key-takeaways ul li{font-size:14px}
  .article-quick-badge{font-size:9px;padding:4px 12px;margin-bottom:12px}

  /* Category pages */
  .cat-page-header{padding:24px 0 0}
  .cat-page-title{font-size:26px}
  .cat-page-subtitle{font-size:14px}
  .cat-featured-text h2{font-size:22px}
  .cat-featured .excerpt{font-size:15px}

  /* Podcast */
  .podcast-episode{padding:20px 0}
  .podcast-ep-num{font-size:32px}
  .podcast-ep-info h3{font-size:18px}
  .podcast-ep-info .guest{font-size:14px}
  .podcast-ep-info .ep-meta{font-size:13px}
  .podcast-listen-btn{font-size:10px;padding:12px 24px}

  /* About / Newsletter */
  .page-centered{padding:28px 16px}
  .page-centered h1{font-size:26px;margin-bottom:20px}
  .page-centered p{font-size:15px;margin-bottom:16px}
  .page-centered h2{font-size:20px;margin-top:28px}
  .nl-page-form{margin:24px auto}
  .nl-page-form input{padding:12px 14px;font-size:14px}
  .nl-page-form button{padding:14px 32px;font-size:11px}

  /* Admin */
  .admin-header h1{font-size:20px}
  .admin-stats{grid-template-columns:1fr;gap:10px}
  .admin-stat{padding:16px}
  .admin-stat h3{font-size:24px}
}

/* --- EXTRA SMALL PHONE (≤360px) — iPhone SE, small Android --- */
@media(max-width:360px){
  .container{padding:0 14px}
  .header-row1{padding:0 14px}
  .header-logo-text{font-size:20px}
  .header-right{font-size:8px;gap:2px;letter-spacing:1px}

  .hero-title{font-size:22px}
  .hero-excerpt{font-size:14px}
  .hero-sidebar h3{font-size:17px}

  .nl-inline h4{font-size:18px}
  .nl-inline p{font-size:14px}

  .story-card h3{font-size:17px}
  .bof-feed-item h3{font-size:18px}

  .most-read-num{font-size:24px}
  .most-read-item h4{font-size:14px}

  .section-header h2{font-size:17px}

  .article-headline{font-size:22px}
  .article-lead{font-size:16px}
  .article-body p{font-size:15px}
  .article-pullquote p{font-size:17px}

  .article-hero-fullbleed img{max-height:200px}
  .article-hero-fullbleed .hero-overlay h1{font-size:20px}
  .article-hero-fullbleed .hero-overlay{padding:30px 0 20px}

  .article-layout-c .article-headline{font-size:22px}

  .cat-page-title{font-size:24px}
  .cat-featured-text h2{font-size:20px}

  .page-centered h1{font-size:24px}

  .new-footer{padding:20px 14px 10px}
  .footer-header h2{font-size:20px}
  .footer-column a{font-size:12px}
  .footer-bottom p{font-size:10px}

  .mobile-menu{padding:56px 20px 24px}
  .mobile-menu-nav a{font-size:20px;padding:11px 0}

  .search-box input{font-size:18px}
  .search-results a{font-size:15px}
}

/* =============================================
   POPUPS — subscribe to podcast / YouTube / case study
   ============================================= */
.bs-popup{position:fixed;inset:0;z-index:9999;opacity:0;pointer-events:none;transition:opacity .25s}
.bs-popup.open{opacity:1;pointer-events:auto}
.bs-popup-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px)}
.bs-popup-card{position:relative;max-width:440px;width:calc(100% - 32px);margin:18vh auto 0;background: var(--gc-paper);border-radius:8px;padding:36px 32px 24px;box-shadow:0 20px 80px rgba(0,0,0,.3);transform:translateY(20px);transition:transform .25s;text-align:left}
.bs-popup.open .bs-popup-card{transform:translateY(0)}
.bs-popup-close{position:absolute;top:8px;right:12px;background:none;border:none;font-size:28px;color: var(--gc-muted);cursor:pointer;line-height:1;padding:6px 10px}
.bs-popup-close:hover{color: var(--gc-ink)}
.bs-popup-kicker{font-family:'Jost',sans-serif;font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:#8a2e3b;margin-bottom:10px}
.bs-popup-title{font-family:'Newsreader',serif;font-size:28px;font-weight:700;color: var(--gc-ink);line-height:1.2;margin:0 0 12px 0}
.bs-popup-body{font-family:'Jost',sans-serif;font-size:15px;color: var(--gc-text);line-height:1.55;margin:0 0 22px 0}
.bs-popup-ctas{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.bs-popup-cta{display:block;text-align:center;background:#1A1A1A;color:#fff;padding:14px 22px;font-family:'Jost',sans-serif;font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;border-radius:4px;transition:background .2s}
.bs-popup-cta:first-child{background:#8a2e3b}
.bs-popup-cta:hover{background:#0a0a0a}
.bs-popup-cta:first-child:hover{background:#6e2330}
.bs-popup-dismiss{background:none;border:none;color: var(--gc-muted);font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.5px;cursor:pointer;padding:8px;display:block;margin:0 auto;text-align:center}
.bs-popup-dismiss:hover{color: var(--gc-ink);text-decoration:underline}
@media(max-width:540px){
  .bs-popup-card{margin:0;border-radius:0;padding:40px 24px 28px;width:100%;height:100%;max-width:100%;display:flex;flex-direction:column;justify-content:center}
  .bs-popup-title{font-size:24px}
}

/* =============================================
   MOBILE AUDIT — additive overrides
   Targets inline-styled & shared "instance" page patterns
   (about, gramculture-plus, advertise, events, masthead,
   contact, podcast, privacy, terms, category pages, reports)
   All scoped behind @media; desktop unchanged.
   ============================================= */

/* iOS form zoom fix: inputs/selects/textareas must read ≥16px on mobile,
   else iOS Safari auto-zooms on focus. Use !important so per-page inline
   <style> blocks (newsletter.html, about.html, etc.) don't override us. */
@media(max-width:768px){
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  select,textarea,
  .nl-input,.contact-form input,.contact-form textarea,.contact-form select,
  .bs-auth-field input,.sidebar-nl input,.nl-page-form input{font-size:16px!important}
  /* Search box keeps its display-style 22px font — already > 16px. */
}

/* Carousel — bump buttons to comfortable 36px touch target on mobile */
@media(max-width:768px){
  .carousel-btn{width:36px!important;height:36px!important;font-size:17px!important}
  .carousel-btn.prev{left:8px!important}
  .carousel-btn.next{right:8px!important}
  .ad-carousel .carousel-btn.prev{left:28px!important}
  .ad-carousel .carousel-btn.next{right:28px!important}
}

/* Category-page hero (Trends / Distribution / Tech / etc.) — inline H1 cap */
@media(max-width:768px){
  section.container[style*="padding:40px 32px"]{padding:24px 20px!important}
  h1[data-bs-slot="heroTitle"][style*="48px"]{font-size:34px!important;line-height:1.15!important}
}
@media(max-width:480px){
  section.container[style*="padding:40px 32px"]{padding:20px 16px!important}
  h1[data-bs-slot="heroTitle"][style*="48px"]{font-size:28px!important}
}

/* Shared "instance" page (.inst-wrap pattern: about, plus, advertise,
   events, masthead, contact, podcast, privacy, terms, reports) */
@media(max-width:768px){
  .inst-wrap{padding:48px 20px 40px!important}
  .inst-hero{padding-bottom:32px!important;margin-bottom:32px!important}
  .inst-hero h1{font-size:36px!important;letter-spacing:-.5px!important}
  .inst-hero p.lead{font-size:16px!important}
  .inst-body{font-size:16px!important}
  .inst-body h2{font-size:24px!important;margin:36px 0 12px 0!important}
  .inst-body h3{font-size:15px!important;margin:24px 0 8px 0!important}
  .inst-body blockquote{font-size:16px!important;padding:6px 0 6px 18px!important}
  .contact-form{padding:20px!important}
  .contact-form button{width:100%;min-height:44px}
  .event-card{flex-direction:column;align-items:flex-start;gap:14px;padding:18px!important}
  .event-date{width:auto;display:inline-flex;align-items:center;gap:8px;padding:8px 14px!important}
  .event-date .day,.event-date .month{display:inline}
  .event-info h4{font-size:18px!important}
  .price-card{padding:22px!important}
  .price-card h3{font-size:22px!important}
  .price-card .price{font-size:34px!important}
  .price-card .cta{display:block;min-height:44px;padding:14px 22px!important}
  .pdf-side h1{font-size:32px!important}
  .pdf-side .lead{font-size:15px!important}
  .pdf-cover{padding:24px!important}
  .pdf-cover h2{font-size:28px!important}
  .pdf-cover .year{font-size:56px!important}
}
@media(max-width:480px){
  .inst-wrap{padding:32px 16px 32px!important}
  .inst-hero h1{font-size:28px!important}
  .inst-hero p.lead{font-size:15px!important}
  .inst-body{font-size:15px!important}
  .inst-body h2{font-size:22px!important}
  .price-card .price{font-size:30px!important}
  .pdf-cover .year{font-size:46px!important}
  .pdf-side h1{font-size:26px!important}
}

/* Newsletter page nl-form-row — bigger input font on mobile (iOS zoom) +
   guarantee CTA button is full-width with 44px+ tap area */
@media(max-width:640px){
  .nl-form-row .nl-input{font-size:16px;min-height:48px}
  .nl-form-row .nl-btn{min-height:48px;font-size:14px}
}

/* Newsletter hero — extra phone tightening (existing rule caps at 640px) */
@media(max-width:480px){
  .nl-hero{padding:60px 16px 36px!important}
  .nl-hero h1{font-size:30px!important;letter-spacing:-.5px!important}
  .nl-tagline{font-size:15px!important}
}

/* Admin page — tables already overflow-x:auto; tap targets via shared rules */

/* Footer: clean single-column stack on phones (≤600px), 2-col tablet (≤768px),
   3-col desktop. Phones ≥421px used to get a cramped 2-col layout (large phones
   like 430/480px) — collapse the whole footer to one readable stack instead. */
@media(max-width:600px){
  .footer-content{grid-template-columns:1fr!important;gap:8px}
  .footer-column ul{display:block!important}
  .footer-column{margin-bottom:4px}
}

/* Defensive: prevent any wide inline-styled grid from busting at 375px */
@media(max-width:640px){
  div[style*="grid-template-columns:1fr 280px"]{grid-template-columns:1fr!important}
  div[style*="width:280px"]{width:100%!important;height:auto!important;aspect-ratio:16/9}
}

/* Header chip / Login / Subscribe text tap targets (re-affirm 44px) */
@media(max-width:768px){
  .header-right a,.header-right .bs-auth-chip{min-height:44px;display:inline-flex;align-items:center;padding:0 4px}
}

/* Header-right is "Subscribe | Gram Culture+ | Login" on desktop. Three links
   + two separators don't fit beside the logo on narrow viewports. Hide the
   secondary items (Subscribe + Gram Culture+ + their `|` separators) under
   640px and keep Login as the lone CTA — the Subscribe and Gram Culture+
   destinations live in the burger drawer too, so nothing is lost. Account
   chip (logged-in) stays visible because it's the user's identity. */
@media(max-width:640px){
  .header-right a[href="/newsletter"],
  .header-right a[href="/gramculture-plus"]:not(#bsLoginFallback),
  .header-right a.bs-auth-plus-link,
  .header-right > span,
  .header-right [data-bs-plus-link],
  .header-right [data-bs-plus-sep]{display:none!important}
  .header-right{gap:0}
  .header-right #bsLoginLink,
  .header-right #bsLoginFallback{font-size:11px;padding:0 8px;border:1px solid #1A1A1A;border-radius:4px;height:32px;min-height:32px;line-height:30px;color:#1A1A1A!important}
  .header-right #bsLoginLink:hover,
  .header-right #bsLoginFallback:hover{background:#1A1A1A;color:#fff!important}
}
@media(max-width:380px){
  .header-right #bsLoginLink,
  .header-right #bsLoginFallback{font-size:10px;padding:0 6px}
}

/* Mobile menu drawer items — guarantee 48px tall (existing rules are 44px) */
@media(max-width:768px){
  .mobile-menu-nav a{min-height:48px}
}

/* Reports pages — cap big serif headings + cover scale on phones */
@media(max-width:768px){
  .report-side h1{font-size:32px!important;letter-spacing:-.5px!important}
  .report-side .lead{font-size:16px!important}
  .report-cover{padding:28px!important}
  .report-cover h2{font-size:28px!important;margin:18px 0 0 0!important}
  .report-cover .year{font-size:64px!important}
  .reports-hero h1{font-size:38px!important;letter-spacing:-.5px!important}
}
@media(max-width:480px){
  .report-side h1{font-size:26px!important}
  .report-cover{padding:22px!important}
  .report-cover h2{font-size:22px!important}
  .report-cover .year{font-size:52px!important}
  .reports-hero h1{font-size:28px!important}
}

/* =============================================
   MOBILE AUDIT — Round 2 (idempotent additions)
   Targets: new index carousels, sidebar-less articles,
   revised advertise split, plus promo, account collapse,
   newsletter+contact forms, tiny-screen overflow guards.
   ============================================= */

/* --- ARTICLE LAYOUT A (sidebar removed) -----------------------------
   Article pages using `.article-layout > .article-content` no longer
   render a `<aside class="article-sidebar">`. Without it the grid leaves
   a 340px dead column on desktop. When no sibling sidebar is present,
   collapse to a single centered column capped at ~720px for legible
   line length. Uses :only-child so layouts that still ship a sidebar
   (legacy articles, future templates) are untouched. */
.article-layout > .article-content:only-child{
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
  grid-column:1 / -1;
}
.article-layout:has(> .article-content:only-child){
  grid-template-columns:minmax(0,1fr);
}

/* --- HOMEPAGE CAROUSELS -------------------------------------------- */
/* The new top-promo + mid ad carousels each ship their own .carousel-btn
   rule inline in index.html (34px default, 36px @ ≤768). Re-affirm the
   shared 36px floor and ensure prev/next never land inside text padding. */
@media(max-width:768px){
  #topPromoCarousel .carousel-btn,
  #midAdCarousel .carousel-btn{
    width:36px!important;height:36px!important;
    min-width:36px;min-height:36px;font-size:17px!important;
  }
  #topPromoCarousel .carousel-btn.prev{left:6px!important}
  #topPromoCarousel .carousel-btn.next{right:6px!important}
  #midAdCarousel .carousel-btn.prev{left:24px!important}
  #midAdCarousel .carousel-btn.next{right:24px!important}
}
/* Carousel dots: enlarge tap area so they're hittable on narrow phones. */
@media(max-width:768px){
  .carousel-dot{
    width:10px!important;height:10px!important;
    padding:6px!important;background-clip:content-box!important;
  }
  .carousel-dots{gap:2px!important;bottom:4px!important}
}

/* --- INDEX HERO SIDEBAR --------------------------------------------- */
/* At ≤768 index.html flips .hero-sidebar to a 2-column row layout.
   At 375px the two cards crush — force back to a vertical stack with
   thumbs full-width and proper rhythm between cards. */
@media(max-width:540px){
  .hero-sidebar{flex-direction:column!important;gap:0!important;padding-top:24px!important}
  .hero-sidebar-article{flex:1 1 100%!important;border-bottom:1px solid #EBEBEB!important;padding-bottom:20px!important;margin-bottom:20px!important}
  .hero-sidebar-article:last-child{border-bottom:none!important;padding-bottom:0!important;margin-bottom:0!important}
  .hero-sidebar-img{aspect-ratio:16/9!important}
}

/* --- HEADER RIGHT WRAP GUARD (Subscribe | Login) -------------------- */
/* The header right-column is `Subscribe | sep | Login`. On 320px-wide
   devices the letterspacing pushes it under the logo column. Allow it
   to wrap into a tight 2-line stack rather than overflow. */
@media(max-width:380px){
  .header-right{flex-wrap:wrap;justify-content:flex-end;row-gap:2px;max-width:50%}
  .header-right span{display:none}
}

/* --- PLUS PROMO BANNER (gramculture-plus.html) ---------------------- */
/* Banner already self-tightens at ≤540. Add a 320px guard so the long
   "Save 30% on all annual memberships" string never blows the card. */
@media(max-width:360px){
  .plus-promo{padding:16px 14px!important}
  .plus-promo-title{font-size:17px!important;line-height:1.25!important}
  .plus-promo-sub{font-size:11px!important;letter-spacing:1px!important}
}

/* --- PRICE-CARD bills row (gramculture-plus.html) ------------------- */
/* `.price-meta` was added with the new 3-card pricing; without rule
   the "Billed annually, renews at $328" line can crowd the price. */
@media(max-width:540px){
  .price-card{padding:24px 20px!important}
  .price-card h3{font-size:21px!important;min-height:0!important}
  .price-card .price{font-size:32px!important;min-height:0!important;margin:8px 0!important}
  .price-card .price-meta{font-size:12px!important;line-height:1.4!important;margin:0 0 14px 0!important}
  .price-card ul{margin:14px 0!important}
  .price-card li{font-size:13px!important;padding:7px 0!important}
}

/* --- ACCOUNT HUB (account.html) ------------------------------------- */
/* The pill-scroller nav already exists inline @ ≤768. Add a 320px
   guard so the icon + label combo stays readable and the nav buttons
   keep a 44px tap target (currently 36px min-height). */
@media(max-width:768px){
  .acct-nav-btn{min-height:44px!important;padding:10px 14px!important}
  .acct-row input{font-size:16px!important}
  .acct-btn{min-height:44px!important;font-size:13px!important}
  .acct-plan-card{padding:22px 18px!important}
  .acct-plan-card .acct-plan-price{font-size:28px!important}
  .acct-dr-card{padding:20px!important}
}
@media(max-width:380px){
  .acct-wrap{padding:32px 14px 48px!important}
  .acct-hero h1{font-size:26px!important}
  .acct-nav-btn{font-size:13px!important;padding:10px 12px!important}
  .acct-card{padding:18px!important}
  .acct-section-head h2{font-size:20px!important}
}

/* --- ADVERTISE 2-COL SPLIT (advertise.html) ------------------------- */
/* Confirms .adv-form un-stickies + form is full-width below 900px.
   Add a phone-specific tightening: form padding + textarea height. */
@media(max-width:540px){
  .adv-split{gap:24px!important}
  .adv-form{padding:22px 18px!important}
  .adv-form textarea{min-height:120px!important}
  .adv-form button{width:100%;min-height:48px}
}

/* --- NEWSLETTER (newsletter.html) ----------------------------------- */
/* The page already collapses .nl-form-row at 640. Re-affirm 16px input
   font + full-width button + safe lateral padding at 320. */
@media(max-width:360px){
  .nl-hero{padding:48px 14px 28px!important}
  .nl-hero h1{font-size:26px!important}
  .nl-tagline{font-size:14px!important}
  .nl-form-row .nl-input,.nl-form-row .nl-btn{min-height:48px!important;font-size:16px!important}
}

/* --- PODCAST EPISODE GRID (podcast.html) ---------------------------- */
/* Page already has its own @media rules for ≤768 + ≤480. Add a 320px
   floor so the EP "120px thumb + 1fr" layout doesn't bust at 320. */
@media(max-width:360px){
  .podcast-episode{grid-template-columns:72px 1fr!important;gap:10px!important;padding:16px 0!important}
  .podcast-ep-thumb{width:72px!important;height:72px!important}
  .podcast-ep-info h3{font-size:16px!important;line-height:1.3!important}
  .podcast-description{font-size:13px!important}
  .podcast-listen-btn{font-size:11px!important;padding:9px 18px!important;width:100%;text-align:center}
}

/* --- INST-HERO H1 — long words on small screens --------------------- */
/* Compound headlines like "Gram Culture+" / "10,000+ decision-makers"
   can extend past the viewport on 320 unless word-wrap is allowed. */
@media(max-width:480px){
  .inst-hero h1{word-wrap:break-word;overflow-wrap:break-word;hyphens:auto}
}

/* --- ARTICLE BODY READABILITY (sidebar-less templates) -------------- */
/* On phone, ensure article body has lateral padding + comfortable
   reading rhythm even when wrapped only in `.article-layout`. */
@media(max-width:640px){
  .article-layout{padding-left:16px;padding-right:16px}
  .article-layout > .article-content:only-child{padding:0}
}

/* --- HORIZONTAL OVERFLOW GUARDS (320 / 375 floor) ------------------- */
/* Defensive: anything inline-styled with a fixed pixel width >= 280 in
   a card grid collapses to fluid width on phone. Also wraps any naked
   <table> in scrollable container. */
@media(max-width:540px){
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  pre,code{white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}
  /* Long unbreakable strings (URLs, hashes) inside article body */
  .article-body a,.inst-body a{word-break:break-word;overflow-wrap:anywhere}
}

/* --- FOOTER-PROMO COVER LARGE 2026 (phone scale) -------------------- */
/* The new footer "Annual Report" card with 32px year + 28px padding
   can crowd on 320. Tighten inner spacing without breaking the design. */
@media(max-width:480px){
  .footer-promo .footer-promo-cover{padding:20px 18px!important}
  .footer-promo .footer-promo-cover > div:last-child{font-size:26px!important}
}

/* --- SECTION HEADER on narrow phones -------------------------------- */
/* The "Latest Stories" / "See More →" pair can break onto two lines and
   the link wraps tight against the heading. Force a 6px gap. */
@media(max-width:480px){
  .section-header{flex-wrap:wrap;column-gap:8px;row-gap:6px}
  .section-header-link{margin-left:auto}
}

/* --- Mobile footer: same links, far less scrolling (≤768px) ---
   The footer ran ~900px on a phone, and most of that was air rather than
   content: the marketing tagline (identical on all 20 pages), the 2026 report
   cover art, and 8px of margin under every one of the 11 links.

   Those three go. Every link, the DOWNLOAD NOW CTA and the 44px touch targets
   from the block above stay — this trims padding, never reach. Appended last so
   it lands after the ≤600px single-column stack it builds on. */
@media(max-width:768px){
  .footer-top{gap:14px;margin-bottom:16px;padding-bottom:16px}
  .footer-header h2{margin-bottom:0}
  /* Boilerplate prose, repeated site-wide, 3-4 lines tall on a phone. */
  .footer-header p{display:none}

  /* Keep the report CTA, drop its cover art: the gradient block alone was
     ~150px and says nothing the two lines beside it don't already say. */
  .footer-top .footer-promo{grid-template-columns:1fr;grid-template-areas:"text" "btn";row-gap:8px;padding:12px 14px}
  .footer-top .footer-promo > .footer-promo-cover{display:none}

  /* ABOUT US and OUR PRODUCTS sit side by side; CONTACT US spans the full
     width beneath them, since its social row needs the room. !important is
     required only to beat the ≤600px `1fr!important` stack above — that rule
     was added when the tagline and cover art still crowded this area, which
     they no longer do. */
  .footer-content{grid-template-columns:1fr 1fr!important;gap:14px 18px;margin-bottom:16px}
  .footer-column:nth-child(3){grid-column:1/-1}
  .footer-column h4{font-size:11px;margin-bottom:6px;padding-bottom:5px}
  /* The 44px tap targets already space these rows; the margin was pure air. */
  .footer-column li{margin-bottom:0}

  .footer-bottom{padding-top:12px}
  .footer-bottom p{line-height:1.6}
}