/* Theme Name: Cristoniq Briefing Theme URI: https://cristoniq.com/ Author: Cristoniq Author URI: https://cristoniq.com/ Description: Clean, ad-free news theme for Cristoniq — live indices & crypto ticker, Markets & Crypto and Trending in AI rails, fast. Version: 1.9.1 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 7.4 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: cristoniq-briefing */ :root { --bg: #ffffff; --bg-soft: #f7f7f8; --border: #e7e7ea; --text: #0b0b0f; --muted: #6b6b73; --accent: #0a5cff; --accent-hover: #0847c7; --tag-bg: #eef2ff; --tag-text: #1e3a8a; --maxw: 1240px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; line-height: 1.45; } a { color: inherit; text-decoration: none; } a:hover h2, a:hover h3, a:hover h4 { color: var(--accent); } img { max-width: 100%; display: block; } /* ============================================================ TICKER (topstrip) — sticky, unchanged ============================================================ */ /* Top strip (ticker) — sticky. !important beats any cached or third-party CSS that re-applies position:static. */ .topstrip { position: sticky !important; top: 0 !important; z-index: 100 !important; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--muted); background: var(--bg-soft); } /* Admin bar offset (WP adds .admin-bar to when logged in) */ .admin-bar .topstrip { top: 32px !important; } @media screen and (max-width: 782px) { .admin-bar .topstrip { top: 46px !important; } } .topstrip-inner { max-width: var(--maxw); margin: 0 auto; padding: 8px 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .ticker { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; white-space: nowrap; overflow: hidden; } .ticker-group { display: flex; align-items: center; gap: 18px; } .ticker .sep { width: 1px; height: 14px; background: rgba(0, 0, 0, 0.25); flex: 0 0 1px; } @media (max-width: 1280px) { #date-now { display: none; } } /* Narrow screens: tighten gap at 700px, drop crypto group at 420px */ @media (max-width: 700px) { .ticker { gap: 10px; } .ticker-group { gap: 10px; } } @media (max-width: 420px) { .ticker-crypto, .ticker .sep { display: none; } } .ticker span b { color: var(--text); font-weight: 600; } .ticker .up { color: #0a8f4d; } .ticker .down { color: #d13c3c; } .ticker .muted-val { color: var(--muted); } /* ============================================================ HEADER — two-row masthead. Scrolls normally with the page. Only .topstrip above is sticky. !important overrides any plugin rule that tries to re-sticky. ============================================================ */ header.site { position: relative !important; top: auto !important; z-index: auto !important; background: #fff; border-bottom: 1px solid var(--border); } /* ── Row 1: Masthead ──────────────────────────────────── */ .masthead-row { border-bottom: 0.5px solid var(--border); } .masthead-inner { max-width: var(--maxw); margin: 0 auto; padding: 14px 24px 10px; display: flex; align-items: center; justify-content: space-between; } /* Left cluster — Logo | vertical divider | tagline */ .masthead-left { display: flex; align-items: center; min-width: 0; } /* Logo */ .logo { display: inline-flex; align-items: center; line-height: 0; flex-shrink: 0; } /* * SVG viewBox crop fix: * cristoniq-logo.svg has 344px dead space top + 363px bottom in a 1116px-tall viewBox * (64 % padding). We render the full SVG tall (191px) so the 409px content band * maps to exactly 70px, then translateY(-59px) shifts it into view and * overflow:hidden clips the rest. * Formula: img_h = target_h / (content_h / viewbox_h) = 70 / (409/1116) = 191px * translateY = -(top_pad / viewbox_h) * img_h = -(344/1116) * 191 = -59px */ .logo .custom-logo-link { display: block; overflow: hidden; height: 70px; line-height: 0; text-decoration: none; flex-shrink: 0; } .logo img, .logo img.custom-logo { height: 191px; width: auto; max-width: none; display: block; transform: translateY(-59px); } .logo-text { font-family: 'Source Serif 4', Georgia, serif; font-weight: 800; font-size: 30px; letter-spacing: -0.02em; color: var(--text); } .logo-text .logo-dot { color: var(--accent); } /* Vertical dividers — shared style, two height variants */ .masthead-divider { width: 1px; height: 28px; background: var(--border); margin: 0 14px; flex-shrink: 0; } .masthead-divider--short { height: 20px; } /* Tagline — serif italic, two-line, muted */ .site-tagline { font-family: 'Source Serif 4', Georgia, serif; font-style: italic; font-size: 15px; color: var(--muted); line-height: 1.3; margin: 0; white-space: nowrap; } /* Right cluster — social icons | vertical divider | Search | Subscribe */ .masthead-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } /* Social icon circles */ .social-icons { display: flex; align-items: center; gap: 10px; } .social-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 0.5px solid var(--border); color: var(--muted); text-decoration: none; transition: border-color 0.18s, color 0.18s; flex-shrink: 0; } .social-icon:hover { border-color: var(--muted); color: var(--text); } /* Search button — outlined pill; icon hidden on desktop, shown on mobile */ .search-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 7px 14px; font-size: 13px; font-family: inherit; cursor: pointer; color: var(--muted); line-height: 1; white-space: nowrap; transition: border-color 0.18s, color 0.18s; } .search-btn:hover { border-color: var(--muted); color: var(--text); } .search-btn-icon { display: none; } /* Subscribe button — filled pill, logo blue */ .subscribe-btn { display: inline-flex; align-items: center; background: #1d74b2; color: #fff !important; border-radius: 999px; padding: 7px 16px; font-size: 13px; font-weight: 500; font-family: inherit; text-decoration: none !important; line-height: 1; white-space: nowrap; flex-shrink: 0; transition: background 0.18s; } .subscribe-btn:hover { background: #155f96; } /* ── Row 2: Navigation ─────────────────────────────────── */ .nav-row { border-top: 0 solid transparent; /* border comes from masthead-row's bottom */ } .nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; } /* Primary nav — space-between distributes 7 items across full width */ nav.primary { display: flex; justify-content: space-between; gap: 0; width: 100%; font-size: 14px; font-weight: 500; flex-wrap: nowrap; white-space: nowrap; align-items: center; } nav.primary a { color: var(--text); white-space: nowrap; text-decoration: none; } /* wp_nav_menu outputs

s even with items_wrap='%3$s' — strip bullets/padding */ nav.primary ul, nav.primary li { list-style: none !important; margin: 0 !important; padding: 0 !important; display: inline-flex; } nav.primary li::before, nav.primary li::marker { content: none !important; display: none !important; } nav.primary a:hover { color: var(--accent); } /* Hamburger button — hidden on desktop, revealed on mobile */ .nav-hamburger { display: none; flex-direction: column; justify-content: space-between; width: 22px; height: 16px; background: none; border: none; cursor: pointer; padding: 0; margin-right: 16px; flex-shrink: 0; } .nav-hamburger span { display: block; width: 100%; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; } /* Animated X when open */ .nav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-hamburger.is-open span:nth-child(2) { opacity: 0; } .nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================================ RESPONSIVE — HEADER ============================================================ */ /* Intermediate: tighten nav gaps so 7 items fit on narrower viewports */ @media (max-width: 1100px) { nav.primary { font-size: 13.5px; } .masthead-inner { padding: 12px 20px 8px; } .nav-inner { padding: 10px 20px; } } /* Hide tagline (and its divider) before it gets squashed */ @media (max-width: 900px) { .site-tagline { display: none; } .masthead-left .masthead-divider { display: none; } nav.primary { gap: 16px; font-size: 13px; } } /* ── Mobile (≤ 700px) ──────────────────────────────────── */ @media (max-width: 700px) { /* Logo scales down — maintain SVG crop (48px visible; img_h=131px, shift=-40px) */ .logo .custom-logo-link { height: 48px; } .logo img, .logo img.custom-logo { height: 131px; transform: translateY(-40px); } .logo-text { font-size: 24px; } /* Social icons hidden */ .social-icons { display: none; } /* Right divider (between social & search) hidden when social gone */ .masthead-right .masthead-divider { display: none; } /* Masthead padding tighter on mobile */ .masthead-inner { padding: 12px 16px 10px; } /* Search collapses to icon-only */ .search-btn-text { display: none; } .search-btn-icon { display: block; } .search-btn { padding: 7px 9px; } /* Subscribe stays visible — no change needed */ /* Nav row — hamburger revealed, nav hidden until toggled */ .nav-inner { padding: 0 16px; flex-direction: column; align-items: stretch; } .nav-hamburger { display: flex; margin: 12px 0; } nav.primary { display: none; flex-direction: column; gap: 0; white-space: normal; padding-bottom: 12px; } nav.primary.is-open { display: flex; } nav.primary a { display: block; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 15px; } /* Remove border on last item */ nav.primary li:last-child a, nav.primary > a:last-child { border-bottom: 0; } nav.primary ul, nav.primary li { display: block !important; width: 100%; } } /* ============================================================ LAYOUT ============================================================ */ main.site-main { max-width: var(--maxw); margin: 0 auto; padding: 14px 20px 48px; } .section-title { display: flex; align-items: center; justify-content: space-between; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid var(--text); } .section-title h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; } .section-title a.more { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; } .section-title a.more:hover { color: var(--accent); } /* Hero */ .hero { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; margin-bottom: 40px; align-items: start; } /* Flex column on hero-main lets .hero-followup grow to match rail height */ .hero-main { display: flex; flex-direction: column; } .hero-primary .img-wrap { aspect-ratio: 16 / 9; background: var(--bg-soft); border-radius: 6px; overflow: hidden; margin-bottom: 14px; } .hero-primary img { width: 100%; height: 100%; object-fit: cover; } .hero-primary h2 { font-family: 'Source Serif 4', Georgia, serif; font-size: 36px; line-height: 1.15; font-weight: 800; margin: 0 0 10px; letter-spacing: -0.02em; } .hero-primary .excerpt { color: var(--muted); font-size: 16px; margin: 0; } /* Secondary: compact thumbnail + text (≤40% of primary image height) */ .hero-secondary { display: grid; grid-template-columns: 200px 1fr; gap: 18px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); align-items: flex-start; } .hero-secondary .img-wrap { aspect-ratio: 16 / 9; background: var(--bg-soft); border-radius: 6px; overflow: hidden; margin: 0; } .hero-secondary img { width: 100%; height: 100%; object-fit: cover; } .hero-secondary-body { min-width: 0; } .hero-secondary h3 { font-family: 'Source Serif 4', Georgia, serif; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; margin: 2px 0 6px; } .hero-secondary .meta { font-size: 12px; } /* Tertiary: compact text-only list entries. flex:1 expands to fill remaining height so the left column matches the Crypto News rail on the right. */ .hero-followup { margin-top: 20px; flex: 1; display: flex; flex-direction: column; } /* Tertiary items — natural compact height. No flex:1, that was stretching each row to fill the column and creating big white gaps. */ .hero-tertiary { display: block; padding: 10px 0; border-top: 1px solid var(--border); } .hero-tertiary .tag { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; } .hero-tertiary h3 { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.25; font-weight: 600; letter-spacing: -0.005em; margin: 0 0 2px; } .hero-tertiary .meta { font-size: 10px; color: var(--muted); letter-spacing: 0.03em; } @media (max-width: 560px) { .hero-secondary { grid-template-columns: 1fr; } .hero-secondary h3 { font-size: 20px; } } /* Loading skeletons */ .skeleton { background: linear-gradient(90deg, #f2f2f4 0%, #eaeaec 50%, #f2f2f4 100%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 6px; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .sk-title { height: 18px; margin: 8px 0; border-radius: 4px; } .sk-title.lg { height: 32px; } .sk-line { height: 12px; margin: 6px 0; width: 80%; border-radius: 4px; } .card .img-wrap.skeleton, .hero-primary .img-wrap.skeleton { aspect-ratio: 16 / 9; } .hero-side { display: flex; flex-direction: column; gap: 0; border-left: 1px solid var(--border); padding-left: 22px; max-height: 800px; overflow-y: auto; scrollbar-width: thin; } .hero-side-title { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding-bottom: 10px; border-bottom: 2px solid var(--text); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; } .live-dot { width: 8px; height: 8px; border-radius: 50%; background: #d13c3c; box-shadow: 0 0 0 0 rgba(209, 60, 60, 0.6); animation: pulse 1.6s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(209,60,60,0.55); } 70% { box-shadow: 0 0 0 8px rgba(209,60,60,0); } 100% { box-shadow: 0 0 0 0 rgba(209,60,60,0); } } .hero-side article { padding: 5px 0; border-bottom: 1px solid var(--border); } .hero-side article:last-child { border-bottom: 0; } .hero-side h3 { font-family: 'Inter', sans-serif; font-size: 11.5px; line-height: 1.2; margin: 0 0 2px; font-weight: 600; letter-spacing: -0.005em; } .hero-side .meta { font-size: 9.5px; letter-spacing: 0.03em; } .tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } .meta { font-size: 12px; color: var(--muted); } /* Grids */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .card .img-wrap { aspect-ratio: 16 / 9; background: var(--bg-soft); border-radius: 6px; overflow: hidden; margin-bottom: 10px; } .card img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .card:hover img { transform: scale(1.03); } .card h3 { font-family: 'Source Serif 4', Georgia, serif; font-size: 18px; line-height: 1.25; margin: 4px 0 6px; font-weight: 700; } .card h4 { font-family: 'Source Serif 4', Georgia, serif; font-size: 16px; line-height: 1.3; margin: 4px 0 6px; font-weight: 700; } .card p { margin: 0; color: var(--muted); font-size: 13px; } /* Two-column layout */ .content-cols { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; margin-top: 48px; } .sidebar { border-left: 1px solid var(--border); padding-left: 22px; } .sidebar #latest-news-list { max-height: 800px; overflow-y: auto; scrollbar-width: thin; } /* Soft fade at scroll edges so partial items look intentional */ .hero-side, .sidebar #latest-news-list { -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 28px), transparent 100%); } .sidebar .section-title { margin: 0 0 4px; padding-bottom: 10px; min-height: 41px; box-sizing: border-box; align-items: flex-end; } .sidebar .section-title h2 { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .sidebar #latest-news-list article { padding: 5px 0; border-bottom: 0; } .sidebar #latest-news-list a:last-child article { border-bottom: 0; } .sidebar #latest-news-list h3 { font-family: 'Inter', sans-serif; font-size: 11.5px; line-height: 1.2; margin: 0 0 2px; font-weight: 600; letter-spacing: -0.005em; } .sidebar #latest-news-list .meta { font-size: 9.5px; letter-spacing: 0.03em; } /* Category bands */ .category-band { margin-top: 48px; } .band-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; } .band-hero .band-main .img-wrap { aspect-ratio: 16 / 9; } .band-hero .band-main h3 { font-family: 'Source Serif 4', Georgia, serif; font-size: 26px; line-height: 1.2; margin: 10px 0 8px; font-weight: 800; letter-spacing: -0.01em; } .band-hero .band-list { display: flex; flex-direction: column; gap: 16px; } .band-hero .band-list article { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .band-hero .band-list article:last-child { border-bottom: 0; padding-bottom: 0; } .band-hero .band-list .img-wrap { aspect-ratio: 1 / 1; margin: 0; } .band-hero .band-list h4 { margin: 0 0 4px; font-size: 15px; line-height: 1.3; font-family: 'Source Serif 4', Georgia, serif; font-weight: 700; } /* Single post — two column grid matching the homepage hero proportions (2fr content, 1fr sidebar). main.site-main already provides maxw + side padding, so we don't double that here — .single-layout just fills its parent. */ .single-layout { display: grid !important; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important; gap: 40px !important; max-width: none !important; margin: 0 !important; padding: 0 !important; align-items: start; width: 100% !important; box-sizing: border-box; } .single-content { min-width: 0 !important; max-width: none !important; width: 100% !important; } .single-post { max-width: none !important; } .single-sidebar { padding-top: 8px; position: sticky; top: 100px; } .single-sidebar h3 { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid var(--text); } .sidebar-post { display: grid; grid-template-columns: 60px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); color: inherit; } .sidebar-post:last-child { border-bottom: 0; } .sidebar-post img { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; background: var(--bg-soft); } .sidebar-post h4 { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; margin: 0 0 4px; line-height: 1.3; letter-spacing: -0.005em; } .sidebar-post .meta { font-size: 11px; color: var(--muted); } .sidebar-post:hover h4 { color: var(--accent); } @media (max-width: 768px) { .single-layout { grid-template-columns: 1fr; gap: 24px; } .single-sidebar { display: none; } } /* Article (post body) inside .single-content column */ .single-post { max-width: 740px; margin: 0; padding: 0; } .single-header { margin-bottom: 20px; } .single-header .tag a { color: var(--accent); } .single-header h1 { font-family: 'Source Serif 4', Georgia, serif; font-size: 36px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; margin: 8px 0 12px; } .single-header .lede { font-size: 17px; color: var(--muted); line-height: 1.45; margin: 0 0 16px; } .single-header .byline { font-size: 13px; color: var(--muted); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 10px 0; } .single-featured { margin: 24px 0 28px; border-radius: 8px; overflow: hidden; } .single-featured img { width: 100%; height: auto; border-radius: 8px; } .single-body { font-family: 'Source Serif 4', Georgia, serif; font-size: 17px; line-height: 1.6; font-weight: 400; } /* Defuse any oversized first-paragraph styling from the block editor */ .single-body > p:first-of-type, .single-body .wp-block-paragraph.has-large-font-size, .single-body .wp-block-paragraph.has-huge-font-size { font-size: 17px !important; font-weight: 400 !important; line-height: 1.6 !important; } .single-body p { margin: 0 0 1.4em; } .single-body h2, .single-body h3, .single-body h4 { font-family: 'Source Serif 4', Georgia, serif; line-height: 1.25; margin: 1.8em 0 0.6em; } .single-body h2 { font-size: 28px; font-weight: 800; } .single-body h3 { font-size: 22px; font-weight: 700; } .single-body h4 { font-size: 18px; font-weight: 700; } .single-body ul, .single-body ol { padding-left: 1.4em; margin: 0 0 1.4em; } .single-body li { margin: 0.3em 0; } .single-body img { border-radius: 6px; margin: 1em 0; width: 100%; height: auto; } .single-body a { color: var(--accent); text-decoration: underline; } .single-body blockquote { border-left: 3px solid var(--accent); margin: 1.5em 0; padding: 0.25em 1em; color: var(--muted); font-style: italic; } .single-body iframe { max-width: 100%; } .related { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--border); } .pagination { margin: 40px 0; text-align: center; } .pagination a, .pagination .current, .pagination .page-numbers { display: inline-block; padding: 8px 14px; border: 1px solid var(--border); margin: 0 3px; border-radius: 4px; font-size: 14px; color: var(--text); text-decoration: none; } .pagination .current, .pagination .page-numbers.current { background: var(--text); color: #fff; border-color: var(--text); } /* Archive / category page */ .archive-header { margin: 0 0 24px; padding-bottom: 18px; border-bottom: 2px solid var(--text); } .archive-header h1 { font-family: 'Source Serif 4', Georgia, serif; font-size: 36px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; text-transform: uppercase; } .archive-header .archive-desc { color: var(--muted); font-size: 15px; margin: 0; } /* Footer */ footer.site { border-top: 1px solid var(--border); background: #0b0b0f; color: #b9b9c0; margin-top: 64px; } .footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 40px 20px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; } footer.site h5 { color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 12px; } footer.site a { color: #b9b9c0; font-size: 14px; display: block; padding: 4px 0; } footer.site a:hover { color: #fff; } .footer-logo { font-family: 'Source Serif 4', Georgia, serif; font-weight: 800; font-size: 24px; color: #fff; margin-bottom: 8px; } .footer-bottom { border-top: 1px solid #22222a; padding: 16px 20px; max-width: var(--maxw); margin: 0 auto; font-size: 12px; color: #7a7a82; display: flex; justify-content: space-between; gap: 12px; } /* ============================================================ RESPONSIVE — CONTENT & LAYOUT ============================================================ */ @media (max-width: 960px) { .hero { grid-template-columns: 1fr; } .hero-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 20px; } .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } .content-cols { grid-template-columns: 1fr; } .band-hero { grid-template-columns: 1fr; } .footer-inner { grid-template-columns: 1fr 1fr; } .hero-primary h2 { font-size: 28px; } .single-header h1 { font-size: 32px; } .single-body { font-size: 17px; } } @media (max-width: 560px) { .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; } .footer-inner { grid-template-columns: 1fr; } .hero-primary h2 { font-size: 24px; } } /* Editorial review byline (added by editorial review system) */ .ciq-review-byline { font-size: 0.875rem; color: #6b7280; font-style: italic; margin: 0.25rem 0 1.5rem; padding-left: 0.75rem; border-left: 2px solid #e5e7eb; }