/*
Theme Name: Meridian
Theme URI: https://example.com/meridian
Author: Custom Build
Description: A clean, editorial WordPress theme for foreign-policy and international-affairs style analytical magazines. Navy and oxblood-red accent, serif headlines, grid-based article layout. No page builder required.
Version: 1.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: meridian
*/

:root{
  --navy: #14233E;
  --navy-deep: #0D1830;
  --paper: #F4F2EC;
  --ink: #1B1B1B;
  --ink-soft: #5C5C56;
  --rule: #C7281C;
  --line: #DAD6CB;
  --max: 1280px;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{ background: var(--paper); color: var(--ink); font-family:'Inter',sans-serif; line-height:1.55; }
.serif{ font-family:'Source Serif 4', serif; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.wrap{ max-width: var(--max); margin:0 auto; padding:0 32px; }

/* ===== Top utility bar ===== */
.util-bar{ background: var(--navy-deep); }
.util-bar .wrap{ display:flex; justify-content:space-between; align-items:center; height:36px; font-size:11.5px; color:#A9B3C4; letter-spacing:0.02em; }
.util-bar a:hover{ color:#fff; }
.util-bar .links{ display:flex; gap:20px; }

/* ===== Masthead ===== */
.masthead{ background: var(--navy); padding: 30px 0 0; }
.masthead .wrap{ display:flex; justify-content:space-between; align-items:flex-end; padding-bottom:24px; }
.brand{ color:#fff; font-size:42px; font-weight:700; letter-spacing:-0.01em; margin:0; }
.brand a{ color:#fff; }
.brand-sub{ color:#A9B3C4; font-size:12.5px; margin-top:4px; letter-spacing:0.05em; text-transform:uppercase; }
.masthead-right{ color:#A9B3C4; font-size:12px; text-align:right; }

nav.primary{ background: var(--navy-deep); border-top:1px solid rgba(255,255,255,0.08); }
nav.primary .wrap{ display:flex; gap:30px; padding:14px 32px; overflow-x:auto; }
nav.primary ul{ list-style:none; margin:0; padding:0; display:flex; gap:30px; }
nav.primary a{ color:#D7DCE5; font-size:13.5px; font-weight:500; white-space:nowrap; }
nav.primary a:hover{ color:#fff; }
nav.primary li.current-menu-item > a{ color:#fff; border-bottom:2px solid var(--rule); padding-bottom:12px; }

/* ===== Hero ===== */
.hero{ border-bottom:1px solid var(--line); }
.hero .wrap{ display:grid; grid-template-columns: 1.6fr 1fr; gap:0; padding:0; }
.hero-feature{ position:relative; background:#23344f; min-height:480px; display:flex; align-items:flex-end; background-size:cover; background-position:center; }
.hero-feature::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,35,62,0.05) 0%, rgba(13,24,48,0.92) 85%),
              repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 14px);
}
.hero-feature-content{ position:relative; padding:36px 40px 40px; color:#fff; }
.hero-tag{ display:inline-block; background: var(--rule); color:#fff; font-size:11px; font-weight:700; letter-spacing:0.06em; padding:4px 10px; margin-bottom:16px; text-transform:uppercase; }
.hero-title{ font-size:34px; line-height:1.25; font-weight:700; margin:0 0 14px; max-width:560px; }
.hero-title a{ color:#fff; }
.hero-dek{ font-size:15px; color:#C6CCD8; max-width:520px; margin:0 0 14px; }
.hero-byline{ font-size:12px; color:#9AA3B4; }

.hero-side{ border-left:1px solid var(--line); display:flex; flex-direction:column; }
.hero-side-item{ padding:22px 28px; border-bottom:1px solid var(--line); }
.hero-side-item:last-child{ border-bottom:none; }
.hero-side-eyebrow{ font-size:11px; font-weight:700; color: var(--rule); letter-spacing:0.05em; text-transform:uppercase; margin-bottom:8px; }
.hero-side-title{ font-size:17px; font-weight:700; line-height:1.4; margin:0 0 6px; }
.hero-side-title a:hover{ color: var(--navy); }
.hero-side-byline{ font-size:11.5px; color: var(--ink-soft); }

/* ===== Section head ===== */
.section-head{ display:flex; align-items:baseline; gap:14px; padding:36px 32px 0; max-width:var(--max); margin:0 auto; }
.section-head h2{ font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--navy); font-weight:700; margin:0; white-space:nowrap; }
.section-head .rule{ flex-grow:1; height:1px; background:var(--line); }

/* ===== Article grid ===== */
.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:24px auto 0; max-width:var(--max); padding:0 32px 60px; border-top:1px solid var(--line); }
.card{ border-right:1px solid var(--line); padding:22px 20px 26px; }
.grid .card:last-child{ border-right:none; }
.card-eyebrow{ font-size:10.5px; font-weight:700; color:var(--rule); letter-spacing:0.05em; text-transform:uppercase; margin-bottom:10px; }
.card-title{ font-size:17px; font-weight:700; line-height:1.4; margin:0 0 10px; }
.card-title a:hover{ color:var(--navy); }
.card-dek{ font-size:13px; color:var(--ink-soft); margin:0 0 12px; }
.card-byline{ font-size:11.5px; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:8px; }

/* ===== Secondary / Most Read ===== */
.secondary{ background:#EBE8DF; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.secondary .wrap{ display:grid; grid-template-columns:2fr 1fr; gap:50px; padding:44px 32px; }
.most-read-item{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); }
.most-read-item:last-child{ border-bottom:none; }
.most-read-num{ font-family:'Source Serif 4',serif; font-size:26px; font-weight:700; color:var(--line); width:38px; flex-shrink:0; }
.most-read-title{ font-size:14.5px; font-weight:600; line-height:1.4; }
.most-read-title a:hover{ color:var(--navy); }
.newsletter-text{ font-size:13.5px; color:var(--ink-soft); margin:0 0 14px; }
.newsletter-form input[type="email"]{ width:100%; padding:10px 12px; border:1px solid var(--line); font-size:13px; margin-bottom:10px; }
.newsletter-form button{ background:var(--navy); color:#fff; border:none; padding:10px 18px; font-size:13px; font-weight:600; cursor:pointer; }
.newsletter-form button:hover{ background:var(--navy-deep); }

/* ===== Generic content pages (single / archive / page) ===== */
.page-header-bar{ border-bottom:1px solid var(--line); padding:30px 32px; max-width:var(--max); margin:0 auto; }
.page-header-bar h1{ font-size:30px; margin:0; }
.archive-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; max-width:var(--max); margin:0 auto; padding:0 32px 60px; border-top:1px solid var(--line); }
.archive-grid .card{ border-right:1px solid var(--line); }
.archive-grid .card:nth-child(3n){ border-right:none; }

.single-wrap{ max-width:760px; margin:0 auto; padding:40px 32px 80px; }
.single-eyebrow{ font-size:11px; font-weight:700; color:var(--rule); letter-spacing:0.06em; text-transform:uppercase; margin-bottom:14px; }
.single-title{ font-size:38px; line-height:1.25; margin:0 0 16px; }
.single-meta{ font-size:13px; color:var(--ink-soft); border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:30px; }
.single-thumb{ margin-bottom:30px; }
.single-content{ font-size:17px; line-height:1.8; }
.single-content p{ margin:0 0 20px; }
.single-content h2{ font-family:'Source Serif 4',serif; font-size:24px; margin:36px 0 16px; }
.single-content blockquote{ border-right:3px solid var(--rule); margin:24px 0; padding:4px 0 4px 20px; font-style:italic; color:var(--ink-soft); }

.pagination{ display:flex; justify-content:space-between; max-width:var(--max); margin:0 auto; padding:0 32px 60px; font-size:13px; }
.pagination a{ color:var(--navy); font-weight:600; }
.pagination a:hover{ color:var(--rule); }

/* ===== Footer ===== */
footer.site-footer{ background: var(--navy-deep); color:#A9B3C4; }
footer.site-footer .wrap{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding:44px 32px 26px; }
footer.site-footer h5{ color:#fff; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; margin:0 0 14px; }
footer.site-footer p{ font-size:13px; max-width:300px; margin:0; }
footer.site-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
footer.site-footer ul a{ font-size:13px; }
footer.site-footer ul a:hover{ color:#fff; }
.footer-base{ border-top:1px solid rgba(255,255,255,0.1); text-align:center; font-size:11.5px; padding:14px 0; }

@media (max-width:980px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-side{ border-left:none; border-top:1px solid var(--line); }
  .grid{ grid-template-columns:1fr 1fr; }
  .card:nth-child(2n){ border-right:none; }
  .archive-grid{ grid-template-columns:1fr 1fr; }
  .archive-grid .card:nth-child(2n){ border-right:none; }
  .secondary .wrap{ grid-template-columns:1fr; }
  footer.site-footer .wrap{ grid-template-columns:1fr 1fr; }
  .brand{ font-size:30px; }
  .hero-title{ font-size:26px; }
}

:focus-visible{ outline: 2px solid var(--rule); outline-offset: 2px; }