/*
Theme Name: Daily Post
Theme URI: https://example.com/daily-post
Author: Daily Post
Author URI: https://example.com
Description: A light, modern, elegant WordPress news and magazine theme with a featured story hero, category sections, popular/latest sidebar, and a fully customizable Customizer-driven design system. Built with vanilla PHP, HTML5 and CSS — no build step, no framework required.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: daily-post
Tags: news, magazine, blog, one-column, two-columns, right-sidebar, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, theme-options, accessibility-ready
*/

/* -----------------------------------------------------------
   0. Design tokens
----------------------------------------------------------- */
:root{
  /* "The Post" brand palette (Brand Guidelines 2026). Primary red is
     reserved for the masthead, key actions and emphasis — never a full
     background for long text; black/white carry editorial content and
     the neutral greys structure metadata, captions and dividers. */
  --bg:#F3F4F6;
  --surface:#FFFFFF;
  --text:#111111;
  --muted:#6B7280;
  --faint:#9CA3AF;
  --border:#D1D5DB;
  --border-strong:#111111;
  --accent:#C81025;
  --accent-dark:#A50E1E;
  --accent-light:#E2626F;
  --accent-tint:#FBE7E9;
  --header-bg:#FFFFFF;
  --footer-bg:#111111;
  --footer-text:#D1D5DB;
  /* Headline/body families are Customizer-editable (Daily Post Options →
     Typography) and overridden at runtime in inc/customizer.php's
     dailypost_customizer_css(); the values below are just the defaults. */
  --serif:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  /* Numbers/stats tier — fixed by the brand's type system, not user-editable. */
  --numeric:'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --headline-scale:1;
  --body-scale:1;
  --logo-height-header:44px;
  --logo-height-footer:30px;
  --logo-radius-header:0px;
  --logo-radius-footer:0px;
  --wrap: 1280px;
}

/* -----------------------------------------------------------
   1. Reset & base
----------------------------------------------------------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
figure{ margin:0; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--accent-dark); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
ul, ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,h6{ font-family:var(--serif); font-weight:800; margin:0; }
p{ margin:0 0 1em; }
button{ font-family:inherit; cursor:pointer; }
input, textarea, select{ font-family:inherit; font-size:1em; }
table{ border-collapse:collapse; width:100%; }

.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
  height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute;
  width:1px; word-wrap:normal !important;
}
.screen-reader-text:focus{
  background:#fff; border-radius:3px; box-shadow:0 0 4px rgba(0,0,0,.3);
  clip:auto !important; clip-path:none; color:var(--text); display:block;
  font-size:14px; font-weight:700; height:auto; left:8px; line-height:normal;
  padding:14px 20px; text-decoration:none; top:8px; width:auto; z-index:100000;
}
.skip-link{ z-index:100000; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 40px; }

/* -----------------------------------------------------------
   2. WordPress core / editor alignment classes
----------------------------------------------------------- */
.alignleft{ float:left; margin:6px 24px 16px 0; }
.alignright{ float:right; margin:6px 0 16px 24px; }
.aligncenter{ display:block; margin:16px auto; }
.wp-caption{ max-width:100%; }
.wp-caption-text{ font-size:12px; color:var(--faint); margin-top:8px; }
.wp-block-quote, blockquote{
  margin:40px 0; padding:2px 0 2px 28px; border-left:3px solid var(--accent);
  font-family:var(--serif); font-style:italic; font-size:22px; line-height:1.5; color:var(--text);
}
blockquote cite{ display:block; margin-top:12px; font-family:var(--sans); font-style:normal; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); }
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.gallery img{ width:100%; }

/* -----------------------------------------------------------
   3. Buttons & forms
----------------------------------------------------------- */
.btn, button.btn, input[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--accent); color:#fff; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; padding:12px 22px;
  border:1px solid var(--accent); border-radius:2px; transition:background .15s ease;
}
.btn:hover, button.btn:hover, input[type="submit"]:hover{ background:var(--accent-dark); border-color:var(--accent-dark); color:#fff; }
.btn.outline{ background:transparent; color:var(--text); border-color:var(--border-strong); }
.btn.outline:hover{ background:var(--text); color:#fff; }
.btn-white{ background:#fff; color:var(--accent-dark); border-color:#fff; }
.btn-white:hover{ background:var(--footer-bg); color:#fff; border-color:var(--footer-bg); }

.search-form{ display:flex; }
.search-form label{ flex:1; }
.search-field{
  width:100%; padding:12px 16px; border:1px solid var(--border-strong); border-right:none;
  background:var(--surface); color:var(--text); font-size:14px;
}
.search-submit{
  border-radius:0; padding:0 20px;
}

/* -----------------------------------------------------------
   4. Utility bar
----------------------------------------------------------- */
.utility-bar{ background:#F3F1EB; border-bottom:1px solid var(--border); font-size:12px; color:var(--muted); }
.utility-bar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:38px; }
.utility-left{ flex:1 1 auto; min-width:0; overflow:hidden; }
.utility-right{ flex:none; display:flex; align-items:center; gap:16px; }
.utility-date{ font-weight:600; letter-spacing:.02em; white-space:nowrap; }
.utility-right a{ color:var(--muted); font-weight:600; letter-spacing:.02em; }
.utility-right a:hover{ color:var(--accent); }
.utility-social{ display:flex; align-items:center; gap:12px; padding-left:16px; border-left:1px solid var(--border); }
.utility-social a{ display:flex; }
.utility-social svg{ width:14px; height:14px; fill:var(--muted); }
.utility-social a:hover svg{ fill:var(--accent); }

/* -----------------------------------------------------------
   5. Masthead / primary navigation
----------------------------------------------------------- */
.masthead{ background:var(--header-bg); position:relative; }
.masthead-inner{ display:flex; align-items:center; justify-content:space-between; padding:22px 0; gap:24px; }
.site-logo{ font-family:var(--serif); font-size:30px; font-weight:800; letter-spacing:-.01em; color:var(--text); line-height:1; }
.site-logo:hover{ color:var(--text); }

/* Logo system: brand "P." mark + wordmark, shown automatically until a real
   logo file is uploaded at Site Identity → Logo. Heights are Customizer-
   editable (Daily Post Options → Logo & Branding) via CSS custom properties,
   so an uploaded logo can never push the header/footer taller than intended. */
.site-logo-wrap,
.site-logo-block{ display:flex; flex-direction:column; gap:6px; }
.site-logo-wrap img{ max-height:var(--logo-height-header); width:auto; height:auto; display:block; border-radius:var(--logo-radius-header); }
.site-logo-mark{ display:inline-flex; align-items:baseline; gap:9px; }
.site-logo-p{ font-family:var(--serif); font-weight:800; font-size:calc(var(--logo-height-header) * 0.73); line-height:1; color:var(--accent); }
.site-logo-dot{ color:var(--accent); }
.site-logo-word{ font-family:var(--serif); font-weight:800; font-size:calc(var(--logo-height-header) * 0.43); letter-spacing:.03em; text-transform:uppercase; color:var(--text); }
.tagline{ display:block; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }

nav.primary-nav{ display:flex; flex:none; }
.primary-menu{ display:flex; align-items:center; gap:20px; flex-wrap:nowrap; white-space:nowrap; }
.primary-menu li{ position:relative; }
.primary-menu a{
  display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--text); padding:4px 0; border-bottom:2px solid transparent;
}
.primary-menu a:hover,
.primary-menu .current-menu-item > a,
.primary-menu .current-menu-parent > a,
.primary-menu .current_page_item > a{ color:var(--accent); border-color:var(--accent); }

.primary-menu .sub-menu{
  display:none; position:absolute; top:100%; left:0; background:var(--surface); border:1px solid var(--border);
  min-width:200px; padding:8px 0; box-shadow:0 8px 20px rgba(28,27,25,.08); z-index:50;
}
.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu{ display:block; }
.primary-menu .sub-menu a{ padding:10px 18px; border-bottom:none; text-transform:none; letter-spacing:0; font-weight:600; }
.primary-menu .sub-menu a:hover{ background:var(--accent-tint); }

.head-actions{ display:flex; align-items:center; gap:22px; }
.icon-btn{
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; padding:0; color:var(--text);
}
.icon-btn svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; }
.icon-btn:hover{ color:var(--accent); }

.masthead-rule{ height:3px; background:var(--border-strong); }
.masthead-rule-thin{ height:1px; background:var(--accent); }

/* mobile menu toggle (hidden on desktop) */
.menu-toggle{
  display:none; width:36px; height:36px; align-items:center; justify-content:center;
  background:none; border:none; padding:0; color:var(--text);
}
.menu-toggle svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; }

/* header search flyout */
.header-search{
  position:absolute; top:100%; left:0; right:0; background:var(--surface); border-bottom:1px solid var(--border);
  padding:20px 0; display:none; z-index:60;
}
.header-search.is-open{ display:block; }
.header-search .search-form{ max-width:560px; margin:0 auto; }
.header-search-close{ position:absolute; right:40px; top:18px; }

/* Secondary nav row: primary menu (left) + scrollable category strip (right) */
.secondary-nav-row{ background:var(--surface); border-top:1px solid var(--border); }
.secondary-nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:32px; padding:13px 0; }

.category-scroll-nav{
  display:flex; align-items:center; gap:8px; flex:0 1 auto; min-width:0; max-width:560px;
  border-left:1px solid var(--border); padding-left:22px;
}
.category-scroll-track{
  flex:1 1 auto; overflow-x:auto; scroll-behavior:smooth; min-width:0;
  scrollbar-width:none; -ms-overflow-style:none;
}
.category-scroll-track::-webkit-scrollbar{ display:none; }
.category-scroll-list{ list-style:none; display:flex; align-items:center; margin:0; padding:0 2px; white-space:nowrap; }
.category-scroll-list li{ flex:none; }
.category-scroll-list li:not(:first-child){ margin-left:18px; padding-left:18px; border-left:1px solid var(--border); }
.category-scroll-list a{
  display:block; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
}
.category-scroll-list a:hover{ color:var(--accent); }
.category-scroll-btn{
  flex:none; width:26px; height:26px; border-radius:50%; border:1px solid var(--border); background:var(--surface);
  color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.category-scroll-btn svg{ width:13px; height:13px; }
.category-scroll-btn:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* -----------------------------------------------------------
   5a. News ticker (breaking-news marquee)
----------------------------------------------------------- */
.news-ticker{ background:var(--accent); overflow:hidden; }
.news-ticker-inner{ display:flex; align-items:center; gap:18px; padding:10px 0; }
.news-ticker-label{
  flex:none; background:#fff; color:var(--accent); font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.08em; padding:5px 12px; border-radius:2px;
}
.news-ticker-track{ flex:1; overflow:hidden; }
.news-ticker-viewport{
  display:flex; width:max-content;
  animation: dailypost-ticker-scroll var(--ticker-speed, 30s) linear infinite;
  will-change:transform; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transform:translate3d(0,0,0);
}
.news-ticker:hover .news-ticker-viewport,
.news-ticker:focus-within .news-ticker-viewport{ animation-play-state:paused; }
.news-ticker-list{ display:flex; align-items:center; flex:none; gap:48px; padding-right:48px; }
.news-ticker-item{
  color:#fff; font-size:13px; font-weight:700; letter-spacing:.01em; white-space:nowrap;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.news-ticker-item:hover{ color:#fff; text-decoration:underline; }
@keyframes dailypost-ticker-scroll{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-50%,0,0); }
}
@media (prefers-reduced-motion: reduce){
  .news-ticker-viewport{ animation:none; }
  .news-ticker-track{ overflow-x:auto; }
}

/* Compact variant: sits inline in the utility bar (small "LIVE" pulse dot +
   one clipped scrolling headline) instead of a full-width colored band. */
.news-ticker-compact{ background:none; overflow:visible; }
.news-ticker-compact .news-ticker-inner{ padding:0; gap:10px; }
.news-ticker-compact .news-ticker-label{
  background:none; color:var(--accent); padding:0; display:flex; align-items:center; gap:6px;
  font-size:11px; letter-spacing:.06em;
}
.news-ticker-dot{
  width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none;
  animation:dailypost-ticker-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes dailypost-ticker-dot-pulse{
  0%, 100%{ opacity:1; }
  50%{ opacity:.35; }
}
.news-ticker-compact .news-ticker-track{ max-width:340px; }
.news-ticker-compact .news-ticker-item{
  color:var(--text); font-size:12px; font-weight:600; letter-spacing:0;
}
.news-ticker-compact .news-ticker-item:hover{ color:var(--accent); text-decoration:underline; }
@media (prefers-reduced-motion: reduce){
  .news-ticker-dot{ animation:none; }
}

/* -----------------------------------------------------------
   5b. Mobile menu drawer (structural; visibility toggled by
       responsive.css + main.js — hidden entirely above the
       mobile breakpoint)
----------------------------------------------------------- */
.mobile-drawer{ position:fixed; inset:0; z-index:200; visibility:hidden; }
.mobile-drawer.is-open{ visibility:visible; }
.mobile-drawer-scrim{
  position:absolute; inset:0; background:rgba(28,27,25,.5); opacity:0; transition:opacity .2s ease;
}
.mobile-drawer.is-open .mobile-drawer-scrim{ opacity:1; }
.mobile-drawer-panel{
  position:absolute; top:0; left:0; bottom:0; width:82%; max-width:340px; background:var(--surface);
  box-shadow:8px 0 24px rgba(0,0,0,.15); padding:22px 24px; display:flex; flex-direction:column;
  transform:translateX(-100%); transition:transform .25s ease;
}
.mobile-drawer.is-open .mobile-drawer-panel{ transform:translateX(0); }
.mobile-drawer-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; }
.mobile-drawer nav{ overflow-y:auto; }
.mobile-menu li{ border-bottom:1px solid var(--border); }
.mobile-menu a{ display:block; font-size:14.5px; font-weight:600; color:var(--text); padding:15px 0; }
.mobile-menu a:hover{ color:var(--accent); }
.mobile-menu .sub-menu{ padding-left:16px; }
.mobile-menu .sub-menu a{ font-weight:500; font-size:13.5px; padding:10px 0; }
.mobile-drawer-foot{ margin-top:auto; padding-top:20px; border-top:1px solid var(--border); }
body.mobile-menu-open{ overflow:hidden; }

/* -----------------------------------------------------------
   6. Section heads, tags, byline, placeholders
----------------------------------------------------------- */
.section-head{ display:flex; align-items:baseline; gap:18px; margin-bottom:30px; }
.section-head h2{ font-size:calc(25px * var(--headline-scale)); white-space:nowrap; }
.section-head .rule{ flex:1; height:1px; background:var(--border); }
.section-head .view-all{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }

.tag, .cat-badge{
  display:inline-flex; align-items:center; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--accent); margin-bottom:10px;
}
.tag::before, .cat-badge::before{ content:""; width:6px; height:6px; background:var(--accent); margin-right:7px; flex:none; }
.tag.on-photo{ color:#fff; background:var(--accent); padding:4px 9px; }
.tag.on-photo::before{ display:none; }

.byline{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:12px; color:var(--faint); margin-top:12px; }
.byline .avatar{ width:20px; height:20px; border-radius:50%; flex:none; background:linear-gradient(135deg,#D9D3C6,#B9B2A2); object-fit:cover; }
.byline b{ color:var(--muted); font-weight:600; }
.byline a{ color:var(--muted); font-weight:600; }
.byline a:hover{ color:var(--accent); }
.byline .dot{ width:3px; height:3px; border-radius:50%; background:var(--faint); flex:none; }

.excerpt{ font-size:calc(14px * var(--body-scale)); line-height:1.65; color:var(--muted); margin:10px 0 0; }
.excerpt.clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.post-thumb{ position:relative; overflow:hidden; background:#ECE7DC; }
.post-thumb img,
.post-thumb video,
.post-thumb .ph{ position:relative; width:100%; height:100%; object-fit:cover; display:block; }
.post-thumb .ph{ background:linear-gradient(135deg,#ECE7DC,#D6CFC0); }
.post-thumb .ph::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 22% 18%, rgba(255,255,255,.55), transparent 55%); pointer-events:none;
}
.post-thumb.dk .ph{ background:linear-gradient(135deg,#DCD5C6,#B7AE9B); }
.post-thumb.md .ph{ background:linear-gradient(135deg,#E6E0D2,#CBC3B0); }
.ph-mark{
  position:absolute; right:10px; bottom:10px; width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.6); display:flex; align-items:center; justify-content:center;
  font:700 10px/1 var(--sans); color:var(--muted); z-index:1;
}

/* Subtle zoom-on-hover for every clickable thumbnail (cards, hero, sidebar,
   picks, related, archive) — the wrapping <a> is the trigger, so static,
   unlinked hero images on single.php/page.php are naturally unaffected. */
.post-thumb img,
.post-thumb video,
.post-thumb .ph{
  transition:transform .5s cubic-bezier(.25,.46,.45,.94);
}
a:hover .post-thumb img,
a:hover .post-thumb video,
a:hover .post-thumb .ph,
a:focus-visible .post-thumb img,
a:focus-visible .post-thumb video,
a:focus-visible .post-thumb .ph{
  transform:scale(1.06);
  will-change:transform;
  backface-visibility:hidden;
}
@media (prefers-reduced-motion: reduce){
  .post-thumb img, .post-thumb video, .post-thumb .ph{ transition:none; }
  a:hover .post-thumb img, a:hover .post-thumb video, a:hover .post-thumb .ph,
  a:focus-visible .post-thumb img, a:focus-visible .post-thumb video, a:focus-visible .post-thumb .ph{ transform:none; }
}

/* -----------------------------------------------------------
   7. Hero / featured section
----------------------------------------------------------- */
main{ padding-top:48px; padding-bottom:0; }
.hero{
  display:grid;
  grid-template-columns:272px minmax(0,1fr) 272px;
  grid-template-areas:"left feature right";
  gap:40px;
  padding-bottom:56px; border-bottom:1px solid var(--border); margin-bottom:56px;
}
.hero-side-left{ grid-area:left; }
.hero-feature{ grid-area:feature; }
.hero-side-right{ grid-area:right; }

.hero-feature{
  position:relative; aspect-ratio:1/1; border-radius:10px; overflow:hidden;
  box-shadow:0 24px 48px -24px rgba(17,17,17,.4);
  background:#111;
}
.hero-feature-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden; z-index:0;
  transition:opacity .55s ease;
}
.hero-feature-slide.is-active{ opacity:1; visibility:visible; z-index:1; }
.hero-feature-slide > a{ display:block; width:100%; height:100%; }
.hero-feature-slide .post-thumb{ width:100%; height:100%; border-radius:0; }
@media (prefers-reduced-motion: no-preference) {
  .hero-feature-slide.is-active .post-thumb img{ animation:heroKenBurns 7s ease-out both; }
}
@keyframes heroKenBurns{
  from{ transform:scale(1.08); }
  to{ transform:scale(1); }
}
.hero-feature-overlay{
  position:absolute; left:0; right:0; bottom:0; padding:30px 30px 26px; z-index:1;
  background:linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,0) 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-feature-slide.is-active .hero-feature-overlay{ animation:heroFadeUp .6s ease both .05s; }
}
@keyframes heroFadeUp{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
.hero-feature-overlay .tag.on-photo{ margin-bottom:14px; }
.hero-feature-overlay h1,
.hero-feature-overlay h2{ font-size:calc(30px * var(--headline-scale)); line-height:1.18; margin:0 0 12px; color:#fff; }
.hero-feature-overlay h1 a, .hero-feature-overlay h2 a{ color:#fff; }
.hero-feature-overlay h1 a:hover, .hero-feature-overlay h2 a:hover{ color:var(--accent-light); }
.hero-feature-overlay .byline{ color:rgba(255,255,255,.85); }
.hero-feature-overlay .byline a{ color:#fff; }
.hero-feature-overlay .byline time{ color:rgba(255,255,255,.7); }

.hero-feature-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(17,17,17,.38); color:#fff; backdrop-filter:blur(3px);
  transition:background .15s ease, transform .15s ease; opacity:0;
}
.hero-feature:hover .hero-feature-nav{ opacity:1; }
.hero-feature-nav:hover{ background:var(--accent); transform:translateY(-50%) scale(1.08); }
.hero-feature-prev{ left:16px; }
.hero-feature-next{ right:16px; }
.hero-feature-dots{ position:absolute; top:18px; right:18px; z-index:2; display:flex; gap:6px; }
.hero-feature-dot{
  width:7px; height:7px; padding:0; border-radius:50%; border:1px solid rgba(255,255,255,.8);
  background:rgba(255,255,255,.35); cursor:pointer; transition:width .25s ease, background .25s ease;
}
.hero-feature-dot.is-active{ width:18px; border-radius:4px; background:#fff; }

.hero-side{ display:flex; flex-direction:column; justify-content:flex-start; gap:14px; }
.hero-side-item{ display:flex; align-items:flex-start; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--border); transition:transform .15s ease; }
.hero-side-item:last-child{ border-bottom:none; padding-bottom:0; }
.hero-side-item:hover{ transform:translateX(2px); }
.hero-side-item .post-thumb{ width:80px; height:80px; flex:none; border-radius:6px; }

/* Video items: full-width video card with the tag/title/date overlaid on
   the video itself instead of a small thumb beside a separate text block. */
.hero-side-item.has-video{ display:block; }
.hero-side-item.has-video .video-card-link{ position:relative; display:block; border-radius:8px; overflow:hidden; }
.hero-side-item.has-video .post-thumb{ width:100%; height:auto; aspect-ratio:16/10; border-radius:0; }
.hero-side-item.has-video .post-thumb::before{
  content:""; position:absolute; top:10px; left:10px; z-index:2;
  width:24px; height:24px; border-radius:50%; background:rgba(17,17,17,.55);
}
.hero-side-item.has-video .post-thumb::after{
  content:""; position:absolute; top:16px; left:18px; z-index:2;
  width:0; height:0; border-style:solid; border-width:5px 0 5px 8px;
  border-color:transparent transparent transparent #fff;
}
.video-card-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:1; padding:14px 12px 12px;
  background:linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.5) 60%, rgba(0,0,0,0) 100%);
}
.video-card-caption .tag.on-photo{ margin-bottom:6px; font-size:10px; padding:3px 7px; }
.video-card-caption h3{
  font-size:14px; line-height:1.3; font-weight:700; margin:0; color:#fff;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;
}
.video-card-caption .byline{ margin-top:6px; font-size:10.5px; color:rgba(255,255,255,.75); }
.hero-side-item .tag{ margin-bottom:5px; }
.hero-side-item h3{ font-size:14.5px; line-height:1.3; font-weight:700; margin:0; }
.hero-side-item h3 a{ color:inherit; }
.hero-side-item h3 a:hover{ color:var(--accent); }
.hero-side-item .byline{ margin-top:8px; font-size:11px; }

/* Left list: text-only rows, no thumbnail — the post's featured image still
   shows normally once you open the article, this only affects this list. */
.hero-side-left .hero-side-item:not(.has-video) > a{ display:none; }

/* -----------------------------------------------------------
   8. Content grid: main + sidebar
----------------------------------------------------------- */
.content-grid{ display:grid; grid-template-columns:1fr 320px; gap:64px; align-items:start; padding-bottom:64px; }
.content-grid.no-sidebar{ grid-template-columns:1fr; }
.main-col > section{ margin-bottom:64px; }
.main-col > section:last-child{ margin-bottom:0; }

/* -----------------------------------------------------------
   9. Card grid (archives / search / 404 / related)
----------------------------------------------------------- */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px; }
.card-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.card .post-thumb{ aspect-ratio:4/3; border-radius:2px; margin-bottom:16px; }
.card h3{ font-size:19px; line-height:1.3; font-weight:700; margin:0; }
.card h3 a{ color:inherit; }
.card h3 a:hover{ color:var(--accent); }

/* -----------------------------------------------------------
   10. Category split block (feature + list)
----------------------------------------------------------- */
.split{ display:grid; grid-template-columns:1.15fr 1fr; gap:40px; }
.split-feature .post-thumb{ aspect-ratio:16/11; border-radius:2px; margin-bottom:16px; }
.split-feature h3{ font-size:calc(22px * var(--headline-scale)); line-height:1.28; margin:0; }
.split-feature h3 a{ color:inherit; }
.split-feature h3 a:hover{ color:var(--accent); }
.split-list{ display:flex; flex-direction:column; justify-content:center; }
.split-list-item{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--border); }
.split-list-item:first-child{ padding-top:0; }
.split-list-item:last-child{ border-bottom:none; padding-bottom:0; }
.split-list-item .post-thumb{ width:80px; height:80px; flex:none; border-radius:2px; }
.split-list-item h4{ font-size:15px; line-height:1.32; font-weight:700; margin:0 0 8px; }
.split-list-item h4 a{ color:inherit; }
.split-list-item h4 a:hover{ color:var(--accent); }
.split-list-item .byline{ margin-top:0; font-size:11px; }

/* -----------------------------------------------------------
   11. Editor's Picks — overlap-caption cards, 2 wide per row so each
   photo reads large. The caption is pinned with position:absolute
   against the photo's own height rather than pulled up with a negative
   margin, so it can never grow taller than the photo, and every card ends
   up exactly the same height regardless of title length.
----------------------------------------------------------- */
.picks-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:44px 36px; }
.pick-card{ position:relative; }
.pick-card-media{ display:block; }
.pick-card-media .post-thumb{ aspect-ratio:3/2; border-radius:2px; }
.pick-card-caption{
  position:absolute; left:0; right:36px; bottom:0; z-index:2;
  background:rgba(255,255,255,.55); padding:24px 26px 26px;
  box-shadow:0 12px 28px rgba(28,27,25,.12);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.pick-card-caption .tag{ margin-bottom:8px; }
.pick-card-caption h3{
  font-size:calc(20px * var(--headline-scale)); line-height:1.3; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pick-card-caption h3 a{ color:inherit; }
.pick-card-caption h3 a:hover{ color:var(--accent); }
.pick-card-caption .byline{ margin-top:12px; }

/* -----------------------------------------------------------
   12. Sidebar
----------------------------------------------------------- */
.sidebar .widget, aside .sb-block{ margin-bottom:44px; }
.sidebar .widget:last-child, aside .sb-block:last-child{ margin-bottom:0; }
.sb-title, .widget-title{
  font-family:var(--sans); font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  margin:0 0 22px; padding-bottom:14px; border-bottom:2px solid var(--border-strong);
}
.pop-item{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--border); align-items:flex-start; }
.pop-item:first-child{ padding-top:0; }
.pop-item:last-child{ border-bottom:none; padding-bottom:0; }
.pop-num{ font-family:var(--numeric); font-size:26px; font-weight:700; -webkit-text-stroke:1px var(--accent); color:transparent; width:28px; flex:none; line-height:1; }
.pop-item .post-thumb{ width:56px; height:56px; flex:none; border-radius:2px; }
.pop-item h5{ font-size:14px; line-height:1.3; font-weight:700; margin:0 0 6px; }
.pop-item h5 a{ color:inherit; }
.pop-item h5 a:hover{ color:var(--accent); }
.pop-item .byline{ margin-top:0; font-size:10.5px; }

.ad-block{
  border:1px dashed var(--border-strong); background:#F3F1EB; min-height:250px; display:flex;
  align-items:center; justify-content:center; flex-direction:column; gap:6px; text-align:center; padding:16px; overflow:hidden;
}
.ad-block span.ad-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); }
.ad-block small{ font-size:10px; color:var(--faint); }
.ad-block img{ max-width:100%; }

.latest-item{ padding:14px 0; border-bottom:1px solid var(--border); }
.latest-item:first-child{ padding-top:0; }
.latest-item:last-child{ border-bottom:none; padding-bottom:0; }
.latest-item h5{ font-size:14.5px; line-height:1.35; font-weight:700; margin:0 0 6px; }
.latest-item h5 a{ color:inherit; }
.latest-item h5 a:hover{ color:var(--accent); }
.latest-item .byline{ margin-top:0; font-size:10.5px; }

/* Native WordPress widgets (Recent Posts, Recent Comments, Archives,
   Categories, and anything else dropped into "Sidebar Extra Widgets") —
   the sitewide list reset strips all default spacing, so without this
   their items render back-to-back with no breathing room between entries.
   Gives them the same list-item rhythm as the sidebar's own Popular/Latest
   blocks above. */
.widget ul li{
  padding:12px 0; border-bottom:1px solid var(--border);
  font-size:14px; line-height:1.5; color:var(--muted);
}
.widget ul li:first-child{ padding-top:0; }
.widget ul li:last-child{ border-bottom:none; padding-bottom:0; }
.widget ul ul{ margin-top:10px; padding-left:18px; }
.widget ul ul li:last-child{ padding-bottom:12px; }
.widget ul li a{ color:var(--text); font-weight:600; }
.widget ul li a:hover{ color:var(--accent); }
.widget p{ font-size:14px; line-height:1.6; color:var(--muted); margin:0 0 14px; }
.widget p:last-child{ margin-bottom:0; }
.widget select{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:2px;
  font:14px var(--sans); color:var(--text); background:var(--surface);
}

/* -----------------------------------------------------------
   13. Single article
----------------------------------------------------------- */
.breadcrumb{ font-size:12px; color:var(--faint); margin-bottom:24px; }
.breadcrumb a{ color:var(--faint); font-weight:600; }
.breadcrumb a:hover{ color:var(--accent); }

.article-col{ max-width:760px; }
.art-title{ font-size:calc(44px * var(--headline-scale)); line-height:1.14; margin:0 0 22px; }

.art-meta{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:18px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin-bottom:32px; }
.art-author{ display:flex; align-items:center; gap:12px; }
.art-author .avatar{ width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#D9D3C6,#B9B2A2); flex:none; object-fit:cover; }
.art-author b{ display:block; font-size:14px; color:var(--text); }
.art-author span{ display:block; font-size:12px; color:var(--faint); margin-top:2px; }
.share{ display:flex; gap:10px; }
.share a{ width:34px; height:34px; border:1px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.share svg{ width:14px; height:14px; fill:var(--muted); }
.share a:hover{ background:var(--accent); border-color:var(--accent); }
.share a:hover svg{ fill:#fff; }

.art-hero{ aspect-ratio:16/9; border-radius:2px; margin-bottom:12px; }
.art-caption{ font-size:12px; color:var(--faint); margin:0 0 36px; }

.art-body{ font-family:var(--sans); font-size:calc(18px * var(--body-scale)); line-height:1.75; color:#2A2825; }
.art-body p{ margin:0 0 24px; }
.art-body > p:first-of-type::first-letter{ font-size:56px; float:left; line-height:.85; padding:6px 8px 0 0; font-weight:600; color:var(--accent); }
.art-body h2{ font-size:26px; margin:44px 0 18px; }
.art-body h3{ font-size:21px; margin:36px 0 16px; }
.art-body ul, .art-body ol{ margin:0 0 24px; padding-left:22px; list-style:disc; }
.art-body ol{ list-style:decimal; }
.art-body a{ text-decoration:underline; }

.tags-row{ display:flex; flex-wrap:wrap; gap:10px; margin:44px 0 40px; }
.tags-row a{ font-size:12px; font-weight:600; color:var(--muted); border:1px solid var(--border); padding:7px 14px; border-radius:20px; }
.tags-row a:hover{ color:var(--accent); border-color:var(--accent); }

.author-bio{ display:flex; gap:18px; padding:28px; background:var(--surface); border:1px solid var(--border); margin-bottom:56px; }
.author-bio .avatar{ width:64px; height:64px; border-radius:50%; flex:none; background:linear-gradient(135deg,#D9D3C6,#B9B2A2); object-fit:cover; }
.author-bio b{ font-size:16px; font-family:var(--serif); }
.author-bio p{ font-size:13.5px; color:var(--muted); line-height:1.6; margin:8px 0 0; }

.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-bottom:56px; }
.related-grid .post-thumb{ aspect-ratio:4/3; border-radius:2px; margin-bottom:14px; }
.related-grid h3{ font-size:16px; line-height:1.3; font-weight:700; margin:0 0 8px; }
.related-grid h3 a{ color:inherit; }
.related-grid h3 a:hover{ color:var(--accent); }

.prevnext{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--border); margin-bottom:56px; }
.prevnext > div{ padding:26px 0; }
.prevnext .next-post{ text-align:right; border-left:1px solid var(--border); padding-left:32px; }
.prevnext .prev-post{ padding-right:32px; }
.prevnext .nav-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); margin-bottom:10px; }
.prevnext h4{ font-size:17px; font-weight:700; margin:0; line-height:1.3; }
.prevnext h4 a{ color:inherit; }
.prevnext h4 a:hover{ color:var(--accent); }

/* -----------------------------------------------------------
   14. Category / archive header
----------------------------------------------------------- */
.cat-head{ padding-bottom:32px; border-bottom:1px solid var(--border); margin-bottom:44px; }
.cat-head h1{ font-size:calc(46px * var(--headline-scale)); margin:0 0 14px; }
.cat-head .archive-description{ font-family:var(--serif); font-style:italic; font-size:17px; color:var(--muted); margin:0; max-width:640px; line-height:1.6; }
.archive-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px; margin-bottom:56px; }
.archive-grid .post-thumb{ aspect-ratio:4/3; border-radius:2px; margin-bottom:16px; }
.archive-grid h3{ font-size:19px; line-height:1.3; font-weight:700; margin:0; }
.archive-grid h3 a{ color:inherit; }
.archive-grid h3 a:hover{ color:var(--accent); }

/* -----------------------------------------------------------
   15. Pagination
----------------------------------------------------------- */
.pagination, .navigation.pagination .nav-links{
  display:flex; align-items:center; justify-content:center; gap:10px; padding-top:16px; flex-wrap:wrap;
}
.pagination a, .pagination span,
.nav-links a, .nav-links span.current{
  min-width:38px; height:38px; padding:0 10px; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:600; color:var(--muted); border:1px solid var(--border); border-radius:2px;
}
.pagination .current, .pagination a.active, .nav-links span.current{ background:var(--accent); color:#fff; border-color:var(--accent); }
.pagination a:hover, .nav-links a:hover{ border-color:var(--accent); color:var(--accent); }
.pagination .dots, .nav-links .dots{ color:var(--faint); font-size:13px; padding:0 4px; border:none; }

/* -----------------------------------------------------------
   16. Comments
----------------------------------------------------------- */
.comments-area{ margin-top:56px; padding-top:48px; border-top:1px solid var(--border); }
.comments-title{ font-size:24px; margin-bottom:32px; }
.comment-list{ list-style:none; margin:0 0 40px; padding:0; }
.comment-list .children{ list-style:none; margin:0; padding-left:48px; }
.comment-body{ display:flex; gap:16px; padding:24px 0; border-bottom:1px solid var(--border); }
.comment-body .avatar{ border-radius:50%; flex:none; }
.comment-meta b{ font-size:14px; }
.comment-metadata{ font-size:12px; color:var(--faint); margin-bottom:8px; }
.comment-content p{ font-size:14.5px; color:var(--muted); line-height:1.65; }
.comment-reply-link{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.comment-respond{ margin-top:32px; }
.comment-form p{ margin:0 0 18px; }
.comment-form label{ display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; color:var(--muted); }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea{
  width:100%; padding:12px 14px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text);
}
.comment-form textarea{ min-height:140px; }

/* -----------------------------------------------------------
   17. Footer
----------------------------------------------------------- */
.site-footer{ margin-top:88px; background:var(--footer-bg); color:var(--footer-text); }
/* When the page ends with the homepage Subscribe banner, let its color flow
   straight into the footer instead of leaving a gap of bare page background
   between the two colored blocks. */
.site-main:has(.subscribe-banner) + .site-footer{ margin-top:0; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1.1fr; gap:48px; padding:64px 0 48px; }
.footer-about .site-logo{ color:#fff; }
.footer-about .site-logo-p,
.footer-about .site-logo-dot{ color:var(--accent-light); font-size:calc(var(--logo-height-footer) * 0.73); }
.footer-about .site-logo-word{ color:#fff; font-size:calc(var(--logo-height-footer) * 0.43); }
.footer-logo-img{ max-height:var(--logo-height-footer); width:auto; display:block; border-radius:var(--logo-radius-footer); }
.footer-about p{ font-size:13.5px; line-height:1.7; color:#A7A29A; margin:16px 0 0; max-width:260px; }
.site-footer h5{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:#fff; margin:0 0 20px; }
.site-footer .footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.site-footer .footer-col a{ color:#A7A29A; font-size:13.5px; }
.site-footer .footer-col a:hover{ color:#fff; }
.footer-contact p{ font-size:13.5px; color:#A7A29A; line-height:1.7; margin:0 0 18px; }
.footer-social{ display:flex; gap:10px; flex-wrap:wrap; }
.footer-social a{ width:34px; height:34px; border:1px solid #45423C; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.footer-social svg{ width:14px; height:14px; fill:#D9D5CB; }
.footer-social a:hover{ background:var(--accent); border-color:var(--accent); }
.footer-bottom{ border-top:1px solid #35322C; padding:22px 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12px; color:#8A857C; }
.footer-bottom-links{ display:flex; gap:22px; }
.footer-bottom-links a{ color:#8A857C; }
.footer-bottom-links a:hover{ color:#fff; }

/* -----------------------------------------------------------
   18. 404 / no results
----------------------------------------------------------- */
.error-404{ text-align:center; padding:80px 0; }
.error-404 h1{ font-size:calc(96px * var(--headline-scale)); color:var(--accent); margin-bottom:8px; }
.error-404 h2{ font-size:26px; margin-bottom:16px; }
.error-404 p{ color:var(--muted); margin-bottom:32px; }
.no-results{ padding:60px 0; text-align:center; }
.no-results h2{ font-size:22px; margin-bottom:12px; }
.no-results p{ color:var(--muted); }

/* -----------------------------------------------------------
   19. Static page
----------------------------------------------------------- */
.page-content-wrap{ max-width:800px; margin:0 auto 64px; }
.page-title{ font-size:calc(40px * var(--headline-scale)); margin-bottom:28px; }
.page-content{ font-family:var(--sans); font-size:calc(17px * var(--body-scale)); line-height:1.75; color:#2A2825; }
.page-content p{ margin:0 0 22px; }

.sitemap-page{ max-width:900px; }
.sitemap-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:12px; }
.sitemap-block h2{ font-size:19px; margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid var(--border); }
.sitemap-list{ display:flex; flex-direction:column; gap:12px; }
.sitemap-list li{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.sitemap-list a{ font:15px/1.4 var(--sans); color:var(--text); font-weight:500; }
.sitemap-list a:hover{ color:var(--accent); }
.sitemap-count{ font-size:12px; color:var(--faint); flex:none; }
.sitemap-empty{ color:var(--muted); font-size:14px; }
@media (max-width:600px){
  .sitemap-grid{ grid-template-columns:1fr; gap:36px; }
}

/* -----------------------------------------------------------
   20. Subscribe / newsletter signup page
----------------------------------------------------------- */
.subscribe-hero{
  max-width:640px; margin:0 auto 72px; text-align:center;
  padding:64px 48px; background:var(--surface); border:1px solid var(--border); border-radius:4px;
}
.subscribe-kicker{
  display:inline-block; font:700 11px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-tint); padding:7px 14px; border-radius:20px; margin-bottom:20px;
}
.subscribe-hero .page-title{ font-size:calc(36px * var(--headline-scale)); margin-bottom:16px; }
.subscribe-lede{ font-size:17px; color:var(--muted); margin-bottom:32px; }
.subscribe-lede p{ margin:0 0 14px; }
.subscribe-lede p:last-child{ margin-bottom:0; }

.subscribe-form-wrap{ text-align:left; }
.subscribe-hp{ position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden; }

.subscribe-notice{
  font:600 13.5px/1.5 var(--sans); padding:12px 16px; border-radius:3px; margin-bottom:18px;
}
.subscribe-notice-success{ background:#EAF4EC; color:#1E6B33; border:1px solid #C9E5CE; }
.subscribe-notice-error{ background:#FBEAEA; color:var(--accent-dark); border:1px solid #F1CFCF; }

.subscribe-form-row{ display:flex; gap:10px; }
.subscribe-input{
  flex:1; min-width:0; padding:14px 16px; border:1px solid var(--border-strong); border-radius:2px;
  background:var(--surface); color:var(--text); font:15px/1.3 var(--sans);
}
.subscribe-input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.subscribe-form-row .subscribe-submit{ flex:none; padding:0 26px; }

.subscribe-privacy{ font-size:12.5px; color:var(--faint); margin:18px 0 0; text-align:center; }

@media (max-width:600px){
  .subscribe-hero{ padding:44px 24px; }
  .subscribe-hero .page-title{ font-size:28px; }
  .subscribe-form-row{ flex-direction:column; }
  .subscribe-form-row .subscribe-submit{ width:100%; }
}

/* -----------------------------------------------------------
   21. Homepage: Trending Now / Latest From Every Category / Subscribe banner
----------------------------------------------------------- */
/* Spacing model: .content-grid's own padding-bottom (below) already supplies
   the standard 64px gap before whatever comes next, so these sections space
   themselves with margin-bottom only — never margin-top — to avoid stacking
   two gaps into one oversized one. */
.home-section-full{ margin-top:0; margin-bottom:64px; }

/* Trending Now — reuses the sidebar's numbered .pop-item, laid out as a
   row of cards instead of a stacked list. */
.trending-grid{ display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--border); }
.trending-grid .pop-item{
  flex-direction:column; align-items:flex-start; gap:14px;
  padding:24px 22px; margin:0; border-bottom:none; border-right:1px solid var(--border);
}
.trending-grid .pop-item:nth-child(5n){ border-right:none; }
.trending-grid .pop-num{ font-size:32px; width:auto; -webkit-text-stroke-width:1.5px; }
.trending-grid .pop-item .post-thumb{ width:100%; height:110px; }
.trending-grid .pop-item h5{ font-size:15px; line-height:1.35; }
.trending-grid .pop-item .byline{ font-size:11px; }

/* Latest From Every Category — reuses the small thumb+tag+title template
   already used by each category split section's list half. */
.latest-categories-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px 26px; }
.latest-cat-item{ display:flex; gap:12px; }
.latest-cat-item .post-thumb{ width:64px; height:64px; flex:none; border-radius:2px; }
.latest-cat-item h4{ font-size:14px; line-height:1.32; font-weight:700; margin:0 0 6px; }
.latest-cat-item h4 a{ color:inherit; }
.latest-cat-item h4 a:hover{ color:var(--accent); }
.latest-cat-item .byline{ margin-top:0; font-size:10.5px; }

/* Subscribe banner — full-bleed band, breaks free of the sidebar column.
   No margin-top: whatever precedes it (content-grid or a .home-section-full)
   already supplies the standard 64px gap, and the banner flows straight into
   the footer with no gap of its own — see the .site-footer override below. */
.subscribe-banner{ background:var(--accent); padding:56px 0; }
.subscribe-banner-inner{ display:flex; align-items:center; justify-content:space-between; gap:48px; }
.subscribe-banner-text{ max-width:440px; }
.subscribe-banner-text h2{ font-size:28px; color:#fff; margin:0 0 10px; }
.subscribe-banner-text p{ font-size:15px; line-height:1.6; color:#F1DEDE; margin:0; }
.subscribe-banner .subscribe-form-wrap{ flex:1; max-width:440px; }
.subscribe-banner .subscribe-input{ border-color:#fff; }
.subscribe-banner .subscribe-form-row .btn{ background:#fff; color:var(--accent-dark); border-color:#fff; }
.subscribe-banner .subscribe-form-row .btn:hover{ background:var(--footer-bg); color:#fff; border-color:var(--footer-bg); }
.subscribe-banner .subscribe-notice-success{ background:rgba(255,255,255,.92); }
.subscribe-banner .subscribe-notice-error{ background:rgba(255,255,255,.92); }

/* Tablet/mobile overrides for this section live in assets/css/responsive.css,
   alongside every other homepage grid's breakpoints. */

/* -----------------------------------------------------------
   22. About / Contact / Advertise pages
----------------------------------------------------------- */
.page-kicker{
  display:inline-block; font:700 11px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-tint); padding:7px 14px; border-radius:20px; margin-bottom:18px;
}

/* About page */
.about-hero .page-title{ margin-bottom:20px; }

.about-stats{
  display:grid; grid-template-columns:repeat(3,1fr); max-width:800px; margin:0 auto 64px;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:36px 0;
}
.about-stat{ text-align:center; border-right:1px solid var(--border); }
.about-stat:last-child{ border-right:none; }
.about-stat-number{ display:block; font:700 40px/1 var(--numeric); color:var(--accent); margin-bottom:8px; }
.about-stat-label{ display:block; font:600 11px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }

/* Mission, Vision & Values — Daily Post Options → About Page */
.about-mv{
  display:grid; grid-template-columns:1fr 1fr; gap:40px; max-width:900px; margin:0 auto 48px;
}
.about-mv-item .mv-kicker{
  display:block; font:700 12px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); margin-bottom:12px;
}
.about-mv-item p{ font-family:var(--serif); font-size:19px; line-height:1.55; color:var(--text); margin:0; }
.about-values{ max-width:900px; margin:0 auto 64px; text-align:center; }
.about-values .mv-kicker{
  display:block; font:700 12px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin-bottom:18px; text-align:center;
}
.value-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.value-chip{
  display:inline-flex; align-items:center; gap:8px; font:700 13px/1 var(--sans); color:var(--text);
  border:1px solid var(--border-strong); border-radius:20px; padding:9px 18px 9px 14px;
}
.value-chip::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; }

.about-coverage{ max-width:800px; margin:0 auto 64px; text-align:center; }
.about-coverage h2{ font-size:24px; margin-bottom:24px; }
.coverage-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.coverage-chip{
  font:600 13px/1 var(--sans); color:var(--text); background:var(--surface); border:1px solid var(--border);
  padding:10px 20px; border-radius:20px; transition:all .15s ease;
}
.coverage-chip:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* Contact page */
.contact-lede{ font-size:16px; }
.contact-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:56px; max-width:1000px; margin:0 auto 72px; align-items:start; }

.contact-form-row{ margin-bottom:18px; }
.contact-form-row label{ display:block; font:600 12px/1 var(--sans); text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:8px; }
.contact-form-row .subscribe-input{ width:100%; }
.contact-textarea{ resize:vertical; font-family:var(--sans); padding:14px 16px; }
.contact-submit{ margin-top:6px; }

.contact-info-card{ background:var(--footer-bg); color:var(--footer-text); border-radius:4px; padding:40px 34px; }
.contact-info-card h3{ color:#fff; font-size:18px; margin-bottom:22px; }
.contact-info-list{ display:flex; flex-direction:column; gap:18px; margin-bottom:26px; }
.contact-info-item{ display:flex; align-items:flex-start; gap:14px; font-size:14px; line-height:1.5; }
.contact-info-item a{ color:var(--footer-text); }
.contact-info-item a:hover{ color:#fff; }
.contact-info-icon{ flex:none; width:20px; height:20px; color:var(--accent); margin-top:1px; }
.contact-info-icon svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.contact-info-card .contact-social{ display:flex; gap:10px; }
.contact-info-card .contact-social a{
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); border-radius:50%; color:var(--footer-text);
}
.contact-info-card .contact-social a:hover{ background:var(--accent); color:#fff; }
.contact-info-card .contact-social svg{ width:15px; height:15px; fill:currentColor; }

/* Advertise page */
.advertise-placements{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; max-width:1000px; margin:0 auto 64px; }
.advertise-card{ padding:32px 26px; background:var(--surface); border:1px solid var(--border); border-radius:4px; }
.advertise-card-icon{
  display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin-bottom:18px;
  background:var(--accent-tint); border-radius:50%; color:var(--accent);
}
.advertise-card-icon svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.advertise-card h3{ font-size:17px; margin-bottom:10px; }
.advertise-card p{ font-size:14px; line-height:1.6; color:var(--muted); margin:0; }

/* Tablet/mobile overrides for this section live in assets/css/responsive.css. */

/* -----------------------------------------------------------
   23. Top Stories — overlap-caption cards, contained within the image.
   Unlike Editor's Picks (section 11), the caption here is pinned with
   position:absolute against the photo's own height instead of pulled up
   with a negative margin — so it can never grow taller than the photo,
   and every card in the row ends up exactly the same height no matter how
   long a given title is.
----------------------------------------------------------- */
.top-stories-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.top-card{ position:relative; }
.top-card-media{ display:block; }
.top-card-media .post-thumb{ aspect-ratio:4/5; border-radius:2px; }
.top-card-caption{
  position:absolute; left:0; right:24px; bottom:0; z-index:2;
  background:rgba(255,255,255,.55); padding:16px 18px 18px;
  box-shadow:0 10px 24px rgba(28,27,25,.14);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.top-card-caption .tag{ margin-bottom:8px; }
.top-card-caption h3{
  font-size:calc(16px * var(--headline-scale)); line-height:1.3; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.top-card-caption h3 a{ color:inherit; }
.top-card-caption h3 a:hover{ color:var(--accent); }
.top-card-caption .byline{ margin-top:8px; }

/* Tablet/mobile overrides for this section live in assets/css/responsive.css. */