/* ===== ZeroSumDesign Global Styles (forced) ===== */

/* Base / Reset */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: "Helvetica Neue", Arial, sans-serif; color: #111; background: #fff; }
a { color: inherit; text-decoration: none; }

/* Utilities */
.container { max-width: 1200px; margin: 0 auto; }
.media-frame { position: relative; overflow: hidden; border: 1px solid #e5e5e5; }
.media-frame > * { width: 100%; height: 100%; object-fit: cover; display: block; }
.ratio-1-1 { aspect-ratio: 1 / 1; }
.ratio-4-5 { aspect-ratio: 4 / 5; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-9-16 { aspect-ratio: 9 / 16; }

/* ===========================
   Top Navigation Bar (FORCED GRID)
   Desktop:  logo | menu | ctas
   Mobile:   row1 = logo + ctas, row2 = menu
   =========================== */
.topbar{
  position: sticky; top: 0; z-index: 1000;
  display: grid !important;                                 /* ← force grid */
  grid-template-columns: auto 1fr auto !important;
  grid-template-areas: "logo menu cta" !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 12px 16px !important;
  background: #000 !important;
  color: #fff !important;
}

/* Make the inline SVG visible and sized in the top bar */
/* Logo in top bar */
.topbar .logo {
  color: #fff;                                /* white logo on black bar */
  margin-left: clamp(24px, 6vw, 96px);        /* inset from left */
}

.topbar .logo svg {
  height: 36px;                               /* desktop size */
  width: auto;
  display: block;
  overflow: visible;                          /* prevent clipping */
}

/* Phone */
@media (max-width: 680px){
  .topbar{ border-bottom:1px solid rgba(255,255,255,0.08); }  
  .topbar{ row-gap:16px !important; }
  .topbar .logo { margin-left: 18px; }        /* optional: tighter inset on phones */
  .topbar .logo svg { height: 24px; }  
      /* single, clear mobile size */
}

/* Safety: if any path has a hard fill, inherit header color */
.topbar .logo svg * { fill: currentColor !important; }


/* Debug (remove after it works)
.topbar .logo { outline:1px dashed #0ae; } 
*/


.logo{ grid-area: logo !important; display: flex !important; align-items: center !important; gap: 10px !important; font-weight: 700; letter-spacing: .04em; }
.logo img{ height: 24px; width: auto; display: block; }

.nav-menu{
  grid-area: menu !important;
  display: flex !important; justify-content: center !important; align-items: center !important; gap: 28px !important;
}
.nav-menu > a{
  color: #fff; text-decoration: none; font-size: .95rem; letter-spacing: .03em; position: relative; padding: 4px 0;
}
.nav-menu > a::after{
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0; background: #fff; transition: width .25s ease;
}
.nav-menu > a:hover::after, .nav-menu > a:focus-visible::after{ width: 100%; }

.nav-cta{
  grid-area: cta !important;
  display: flex !important; gap: 10px !important; justify-self: end !important;
}
.btn-mini{
  background: #fff !important;
  color: #000 !important;                         /* ← force black text on white pill */
  border: none; padding: 6px 10px; line-height: 1.1;
  font-weight: 700; border-radius: 999px; cursor: pointer; font-size: .8rem;
}
.btn-signin{ background: #222 !important; color: #fff !important; }  /* dark pill */

/* Divider (empty spacer) */
.divider{ background: #e9e9e9; padding: 12px 4%; font-size: 0; color: transparent; }
.divider::before{ content: ""; display: block; height: 1px; }

/* Issue hero */
.issue-hero{ display: flex; justify-content: center; padding: 36px 4%; }
.issue-hero .frame{ max-width: 900px; width: 100%; }
.issue-hero img{ display: block; width: 100%; height: auto; border: 1px solid #e5e5e5; }

/* Sections & Footer */
section{ padding: 3rem 10%; }
footer { background: #111; color: #fff; padding: 2rem; text-align: center; font-size: .9rem; }
footer h2{ font-family: Georgia, serif; margin-bottom: 1rem; }

/* Tablet */
@media (max-width: 1024px){
  .nav-menu{ gap: 18px !important; }
  .btn-mini{ font-size: .78rem; padding: 6px 10px; }
  .issue-hero{ padding: 28px 4%; }
}

/* Phone: row1 = logo + ctas; row2 = menu */
@media (max-width: 680px){
  .topbar{
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "logo cta"
      "menu menu" !important;
    row-gap: 8px !important;
    padding: 10px 12px !important;
  }
  .nav-menu{ gap: 16px !important; flex-wrap: wrap !important; }
  .btn-mini{ font-size: .72rem; padding: 5px 9px; }
  .issue-hero{ padding: 20px 4%; }
}
@media (max-width:680px){
  /* Force the 2-row grid and bigger spacing between rows */
  .topbar{
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "logo cta"
      "menu menu" !important;
    padding: 10px 12px !important;
    row-gap: 18px !important;                 /* <-- extra space between rows */
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    background:#000 !important;
  }

  /* Small extra breathing room right above the menu row */
  .nav-menu{ margin-top: 4px !important; }

  /* Phone logo sizing + optional tighter inset */
  .topbar .logo{ margin-left: 18px !important; }
  .topbar .logo svg{ height: 24px !important; }
}
/* Article cards: center title/subtitle */
.article-card h3,
.article-card .subtitle { text-align:center; }
/* ===================== Article Typography ===================== */

/* Scope everything inside .article page wrapper */
.article {
  --measure: 72ch;                 /* ideal reading width */
  --lh: 1.6;                       /* body line-height */
  --body: "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif; /* swap if you add a webfont */
  color: #111;
}

/* Centered, airy header */
.article-header {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 1rem;
  text-align: center;
}

.article-title {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  margin: 0 0 .5rem;
  font-size: clamp(2rem, 4.2vw, 3rem);
}

.article-subtitle {
  font-family: var(--serif);
  font-weight: 400;
  color: #444;
  margin: 0 auto;
  max-width: 58ch;
  line-height: 1.35;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
}

/* Optional: small meta line (date/author) */
.article-meta {
  margin-top: .6rem;
  font: 400 .9rem/1.2 var(--body);
  color: #777;
}

/* Body copy */
.article-body {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1.25rem 1.25rem 3.5rem;
  font: 400 1rem/var(--lh) var(--body);
}

.article-body p {
  margin: 0 0 1.15rem;
}

/* Subheads inside body */
.article-body h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  line-height: 1.25;
  margin: 2rem 0 .75rem;
}
.article-body h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  margin: 1.5rem 0 .5rem;
}

/* Figures / images */
.article-body figure {
  margin: 2rem auto;
  max-width: min(100%, var(--measure));
}
.article-body .media-frame {       /* if you wrap images with .media-frame already */
  border: 1px solid #eee;
}
.article-body img {
  display: block;
  width: 100%;
  height: auto;
}
.article-body figcaption {
  font: 400 .9rem/1.4 var(--body);
  color: #666;
  text-align: center;
  margin-top: .6rem;
}

/* Pull quotes (optional) */
.article-body blockquote {
  border-left: 3px solid #111;
  padding: .25rem 1rem;
  margin: 1.5rem 0;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  color: #222;
}

/* Links */
.article-body a {
  color: #111;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Mobile spacing tune-ups */
@media (max-width: 680px){
  .article-header { padding-top: 2rem; }
  .article-body { padding-bottom: 2.5rem; }
}