/* ============================================================================
   KEEP CALM, magazine home (NYT-style, daily-rotating).  Preview layer only.
   Reuses the real site chrome (crisis ribbon + masthead + footer) and the REAL
   poster cards (.kc-pcard via KCGallery.posterCard).  This file styles ONLY the
   magazine grid that sits inside <main>.  Brand tokens mirror cdo-watchtower.css.
   Dense, ruled, serif-headline magazine, modeled religiously on nytimes.com.
   ========================================================================== */
.mag-main{
  --mg-ink:#26302b; --mg-muted:#5d6b62; --mg-soft:#5f6a60; /* 5.0:1 on paper, AA (was #828f84, 3.1:1) */
  --mg-rule:#dcd5c7; --mg-rule-d:#bcb3a0; --mg-bar:#26302b; --mg-kicker:#5f6a60; /* AA (was #7f8a81, 3.3:1) */
  --mg-accent:#2c5f4e; --mg-red:#b3261e; --mg-paper:#f5f1e8;
  --mg-sans:"Montserrat",system-ui,-apple-system,sans-serif;
  --mg-serif:var(--mg-sans); /* serif removed sitewide, magazine headlines now use Montserrat sans */
  max-width:1200px; margin:0 auto; padding:0 22px 26px; color:var(--mg-ink);
  font-family:var(--mg-sans);
}
.mag-main *{ box-sizing:border-box; }
.mag-main a{ color:inherit; text-decoration:none; }

/* ---- shared atoms ---------------------------------------------------------- */
.mag-serif{ font-family:var(--mg-serif); }
.mag-eyebrow{ /* kicker label that sits ON TOP (matches the poster eyebrow) */
  font-family:var(--mg-sans); font-weight:800; font-size:11px; line-height:1;
  letter-spacing:.16em; text-transform:uppercase; color:var(--mg-accent);
  margin:0 0 9px;
}
.mag-kicker{ font-family:var(--mg-sans); font-weight:700; font-size:10px; line-height:1.2;
  letter-spacing:.11em; text-transform:uppercase; color:var(--mg-kicker); margin:0 0 8px; }
.mag-kicker--live{ color:var(--mg-red); font-weight:800; }
.mag-dek{ font-family:var(--mg-serif); font-weight:400; font-size:15px; color:var(--mg-muted);
  line-height:1.46; margin:7px 0 0; }
.mag-meta{ font-family:var(--mg-sans); font-weight:600; font-size:11.5px;
  letter-spacing:.03em; color:var(--mg-soft); margin-top:8px; }
.mag-hr{ border:0; border-top:1px solid var(--mg-rule); margin:26px 0; }
.mag-hl{ font-family:var(--mg-serif); line-height:1.08; margin:0; transition:color .25s; }
a:hover .mag-hl{ color:var(--mg-muted); }

/* section header used by poster rows / more / clusters - NYT 2px top rule + sans label */
.mag-sechd{ display:flex; align-items:flex-end; justify-content:space-between;
  border-top:2px solid var(--mg-bar); padding-top:10px; margin:0 0 18px; gap:14px; }
.mag-sechd__l{ min-width:0; }
.mag-sechd__title{ font-family:var(--mg-serif); font-weight:700; font-size:clamp(22px,2.4vw,26px);
  line-height:1.05; margin:2px 0 0; }
.mag-sechd__all{ flex:0 0 auto; font-family:var(--mg-sans); font-weight:700; font-size:12px;
  letter-spacing:.02em; color:var(--mg-accent); white-space:nowrap; }
.mag-sechd__all:hover{ text-decoration:underline; }

/* ---- the A1 lead zone:  main column  |  rail  ------------------------------ */
.mag-lead{ display:grid; grid-template-columns:minmax(0,1fr) 312px; gap:0; padding:24px 0 30px;
  border-bottom:1px solid var(--mg-rule); }
.mag-lead__main{ min-width:0; padding-right:34px; }
.mag-lead__rail{ min-width:0; padding-left:30px; border-left:1px solid var(--mg-rule);
  border-right:1px solid var(--mg-rule); padding-right:18px; }

.mag-hero__img{ width:100%; aspect-ratio:2/1; object-fit:cover; display:block;
  background:var(--mg-rule); }
.mag-hero__body{ padding-top:14px; }
.mag-hero h1.mag-hl{ font-weight:600; font-size:clamp(30px,4.6vw,46px); letter-spacing:-.01em; }
.mag-hero .mag-dek{ font-size:clamp(19px,3.5vw,24px); line-height:1.45; margin-top:14px; }

/* two stories side-by-side under the hero, each with a small square thumb */
.mag-duo{ display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:24px;
  border-top:1px solid var(--mg-rule); padding-top:20px; }
.mag-duo__col{ padding:0 24px; border-left:1px solid var(--mg-rule); }
.mag-duo__col:first-child{ padding-left:0; border-left:0; }
.mag-story{ display:grid; grid-template-columns:1fr 78px; gap:14px; align-items:start; }
.mag-story__tx{ min-width:0; }
.mag-story h3.mag-hl{ font-weight:600; font-size:20px; line-height:1.14; }
.mag-story__thumb{ width:78px; height:78px; object-fit:cover; background:var(--mg-rule); display:block; }

/* rail: a label, a ruled stack of headlines, then ONE real poster spotlight */
.mag-rail__label{ font-family:var(--mg-sans); font-weight:700; font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--mg-ink);
  border-top:2px solid var(--mg-bar); padding-top:10px; margin:0 0 16px; }
.mag-rail__hd{ border-top:2px solid var(--mg-bar); padding-top:10px; margin:0 0 14px; }
.mag-rail__hd .mag-eyebrow{ margin-bottom:6px; }
.mag-rail__title{ font-family:var(--mg-serif); font-weight:600; font-size:19px; line-height:1.08; margin:0; }
.mag-rail__spottitle{ font-family:var(--mg-serif); font-weight:600; font-size:15px; line-height:1.12; margin:0 0 12px; color:var(--mg-ink); }
.mag-rail__list{ list-style:none; margin:0 0 22px; padding:0; }
.mag-rail__list li{ padding:11px 0; border-bottom:1px solid var(--mg-rule); }
.mag-rail__list li:last-child{ border-bottom:0; }
.mag-rail__list h4{ font-family:var(--mg-serif); font-weight:500; font-size:16px;
  line-height:1.12; margin:0; }
.mag-rail__list .mag-kicker{ margin-bottom:4px; }
.mag-rail__spot{ border-top:2px solid var(--mg-bar); padding-top:14px;
  border-bottom:1px solid var(--mg-rule); padding-bottom:14px; }
.mag-rail__spot .mag-eyebrow{ margin-bottom:12px; }
.mag-rail__spot .kc-pcard{ max-width:236px; margin:0 auto; }

/* ---- themed poster row ----------------------------------------------------- */
.mag-prow{ margin:24px 0 14px; }
.mag-prow .mag-sechd__title{ font-weight:700; }
/* Ruled columns: hairline rule in the gutter between cards (NYT ruled grid, not
   gap-only). Rules reset at the first card of each row, per breakpoint. */
/* Equal columns + identical L/R padding on EVERY card → every poster is the same
   width. The grid pulls 15px into each gutter so the row still bleeds flush to the
   shell edges; only the hairline rule resets at the first card. */
.mag-prow .kc-gallery__grid{ grid-template-columns:repeat(5,1fr); column-gap:0; row-gap:32px; margin-inline:-15px; }
.mag-prow .kc-gallery__grid > .kc-pcard{ padding:0 15px; border-left:1px solid var(--mg-rule); }
.mag-prow .kc-gallery__grid > .kc-pcard:nth-child(5n+1){ border-left:0; }
@media(max-width:980px){
  .mag-prow .kc-gallery__grid{ grid-template-columns:repeat(3,1fr); margin-inline:-15px; }
  .mag-prow .kc-gallery__grid > .kc-pcard{ border-left:1px solid var(--mg-rule); padding-left:15px; padding-right:15px; }
  .mag-prow .kc-gallery__grid > .kc-pcard:nth-child(3n+1){ border-left:0; }
}
@media(max-width:560px){
  .mag-prow .kc-gallery__grid{ grid-template-columns:repeat(2,1fr); margin-inline:-14px; }
  .mag-prow .kc-gallery__grid > .kc-pcard{ border-left:1px solid var(--mg-rule); padding-left:14px; padding-right:14px; }
  .mag-prow .kc-gallery__grid > .kc-pcard:nth-child(2n+1){ border-left:0; }
}

/* (retired: tri-column cluster + flat more-grid - superseded by the varied NYT modules) */
/* narrow phones: a single ruled column of cards reads better than a cramped 2-up */
@media(max-width:480px){
  .mag-prow .kc-gallery__grid{ grid-template-columns:1fr; }
  .mag-prow .kc-gallery__grid > .kc-pcard{ border-left:0; padding:0; max-width:300px; margin:0 auto; }
}
/* ---- tip / crisis strip (mirrors NYT's centered tip strip) ----------------- */
.mag-tip{ text-align:center; border-top:1px solid var(--mg-rule);
  border-bottom:1px solid var(--mg-rule); padding:18px 0; margin:30px 0 10px; }
.mag-tip p{ font-family:var(--mg-serif); font-size:16px; margin:0; color:var(--mg-muted); }
.mag-tip a{ font-weight:600; color:var(--mg-accent); }
.mag-tip strong{ color:var(--mg-ink); }

.mag-skel{ text-align:center; color:var(--mg-muted); padding:70px 0;
  font-family:var(--mg-serif); font-style:italic; font-size:18px;
  animation:mag-breathe 2.4s ease-in-out infinite; }
@keyframes mag-breathe{ 0%,100%{opacity:.55} 50%{opacity:1} }
@media(prefers-reduced-motion:reduce){ .mag-skel{ animation:none; } }

/* ---- responsive collapse --------------------------------------------------- */
@media(max-width:860px){
  .mag-lead{ grid-template-columns:1fr; }
  .mag-lead__main{ padding-right:0; }
  .mag-lead__rail{ padding-left:0; padding-right:0; border-left:0; border-right:0;
    border-top:2px solid var(--mg-bar); margin-top:24px; padding-top:18px; }
  .mag-sechd__title{ font-size:clamp(19px,5vw,24px); }
  .mag-hero h1.mag-hl{ font-size:clamp(27px,8vw,40px); }
  .mag-duo{ grid-template-columns:1fr; }
  .mag-duo__col{ padding:16px 0; border-left:0; border-top:1px solid var(--mg-rule); }
  .mag-duo__col:first-child{ padding-top:0; border-top:0; }
}

/* ============================================================================
   NYT-style varied modules, each a DISTINCT shape so no two sections look alike
   ========================================================================== */

/* A) topic strip + asymmetric lead-with-media (the N.B.A.-Finals block) */
.mag-feat{ margin:30px 0; }
.mag-feat__strip{ display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  border-top:2px solid var(--mg-bar); border-bottom:1px solid var(--mg-rule);
  padding:9px 0; margin-bottom:18px; }
.mag-feat__lb{ font-family:var(--mg-sans); font-weight:700; font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--mg-ink); }
.mag-feat__strip a{ font-family:var(--mg-sans); font-weight:500; font-size:13px; color:var(--mg-muted); }
.mag-feat__strip a:hover{ color:var(--mg-ink); }
.mag-feat__body{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:0; }
.mag-feat__col{ min-width:0; padding-right:30px; border-right:1px solid var(--mg-rule); }
.mag-feat__lead{ display:block; padding-bottom:16px; margin-bottom:2px; border-bottom:1px solid var(--mg-rule); }
.mag-feat__lead h2.mag-hl{ font-weight:600; font-size:clamp(24px,2.6vw,30px); line-height:1.07; margin:3px 0 8px; }
.mag-feat__list{ list-style:none; margin:0; padding:0; }
.mag-feat__list li{ padding:14px 0; border-bottom:1px solid var(--mg-rule); }
.mag-feat__list li:last-child{ border-bottom:0; padding-bottom:0; }
.mag-feat__list h3.mag-hl{ font-weight:600; font-size:18px; line-height:1.13; margin:3px 0 4px; }
.mag-feat__media{ display:block; padding-left:30px; }
.mag-feat__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--mg-rule); display:block; }
.mag-feat__cap{ display:block; font-family:var(--mg-sans); font-size:11px; color:var(--mg-soft);
  letter-spacing:.02em; margin-top:8px; }

/* B) photo-mosaic collection (the "29 Shows to Watch" block) */
.mag-mosaic{ display:grid; grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr); gap:0; margin:30px 0;
  border-top:2px solid var(--mg-bar); padding-top:18px; }
.mag-mosaic__tx{ padding-right:34px; display:flex; flex-direction:column; }
.mag-mosaic__tx h2.mag-hl{ font-weight:600; font-size:clamp(22px,2.4vw,28px); line-height:1.08; margin:6px 0 10px; }
.mag-mosaic__list{ list-style:none; margin:14px 0 0; padding:14px 0 0; border-top:1px solid var(--mg-rule); }
.mag-mosaic__list li{ padding:9px 0; border-bottom:1px solid var(--mg-rule); }
.mag-mosaic__list li:last-child{ border-bottom:0; }
.mag-mosaic__list a{ font-family:var(--mg-serif); font-weight:600; font-size:15px; line-height:1.2; }
.mag-mosaic__tx .mag-sechd__all{ margin-top:auto; padding-top:16px; }
.mag-mosaic__grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.mag-mosaic__tile{ display:block; }
.mag-mosaic__tile img{ width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--mg-rule); display:block; }
.mag-mosaic__cap{ display:block; font-family:var(--mg-serif); font-weight:600; font-size:14px;
  line-height:1.15; margin-top:7px; color:var(--mg-ink); }

/* C) 5-across card strip (the "Well" / "Audio" rows) */
.mag-strip{ margin:30px 0; }
.mag-strip__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; }
.mag-strip__card{ display:block; padding:0 16px; border-left:1px solid var(--mg-rule); }
.mag-strip__card:first-child{ padding-left:0; border-left:0; }
.mag-strip__card:last-child{ padding-right:0; }
.mag-strip__card img, .mag-strip__ph{ width:100%; aspect-ratio:4/3; object-fit:cover;
  background:var(--mg-rule); display:block; margin-bottom:10px; }
.mag-strip__card h3.mag-hl{ font-weight:600; font-size:clamp(17px,1.7vw,19px); line-height:1.14; margin:3px 0 6px; }

/* lead headlines carry more weight than secondary ones (NYT lead/secondary hierarchy) */
.mag-hero h1.mag-hl, .mag-feat__lead h2.mag-hl, .mag-mosaic__tx h2.mag-hl,
.mag-news__lead h2.mag-hl, .mag-twofeat__col h2.mag-hl{ font-weight:700; }
/* deks scale a step below their paired headline so the hierarchy reads cleanly */
.mag-feat__lead .mag-dek, .mag-news__lead .mag-dek, .mag-twofeat__col .mag-dek,
.mag-mosaic__tx .mag-dek{ font-size:clamp(15px,1.5vw,17px); }

/* D) mixed 3-column news block (the "More News" / "Culture & Lifestyle" blocks) */
.mag-news{ margin:30px 0; }
.mag-news__body{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr); gap:0; }
.mag-news__lead{ display:block; padding-right:28px; }
.mag-news__lead h2.mag-hl{ font-weight:600; font-size:clamp(20px,2.2vw,26px); line-height:1.08; margin:3px 0 8px; }
.mag-news__media{ display:block; padding:0 28px; border-left:1px solid var(--mg-rule); border-right:1px solid var(--mg-rule); }
.mag-news__media img{ width:100%; aspect-ratio:3/2; object-fit:cover; background:var(--mg-rule); display:block; }
.mag-news__side{ list-style:none; margin:0; padding:0 0 0 28px; }
.mag-news__side li{ padding:0 0 14px; margin-bottom:14px; border-bottom:1px solid var(--mg-rule); }
.mag-news__side li:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0; }
.mag-news__side a{ display:grid; grid-template-columns:1fr 64px; gap:12px; align-items:start; }
.mag-news__side h4{ font-family:var(--mg-serif); font-weight:600; font-size:15px; line-height:1.15; margin:2px 0 0; }
.mag-news__sidethumb{ width:64px; height:64px; object-fit:cover; background:var(--mg-rule); display:block; }

/* E) dense section-index grid (the big "NEWS" block at the foot) */
.mag-idx{ margin:30px 0 10px; }
.mag-idx__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:0 26px; row-gap:26px; }
.mag-idx__col{ min-width:0; }
.mag-idx__lb{ font-family:var(--mg-sans); font-weight:700; font-size:12px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--mg-ink); margin:0 0 10px; padding-bottom:8px;
  border-bottom:1px solid var(--mg-rule); }
.mag-idx__lead{ display:block; margin-bottom:10px; }
.mag-idx__lead img{ width:100%; aspect-ratio:3/2; object-fit:cover; background:var(--mg-rule); display:block; margin-bottom:7px; }
.mag-idx__lead h3{ font-family:var(--mg-serif); font-weight:600; font-size:16px; line-height:1.16; margin:0; }
.mag-idx__list{ list-style:none; margin:0; padding:0; }
.mag-idx__list li{ padding:8px 0; border-bottom:1px solid var(--mg-rule); }
.mag-idx__list li:last-child{ border-bottom:0; }
.mag-idx__list a{ font-family:var(--mg-serif); font-weight:500; font-size:14px; line-height:1.16; }

/* F) two-up large feature (two big side-by-side stories) */
.mag-twofeat{ margin:30px 0; }
.mag-twofeat__body{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
.mag-twofeat__col{ display:block; padding:0 30px; border-left:1px solid var(--mg-rule); }
.mag-twofeat__col:first-child{ padding-left:0; border-left:0; }
.mag-twofeat__col:last-child{ padding-right:0; }
.mag-twofeat__img{ width:100%; aspect-ratio:3/2; object-fit:cover; background:var(--mg-rule); display:block; margin-bottom:12px; }
.mag-twofeat__col h2.mag-hl{ font-weight:700; font-size:clamp(22px,2.4vw,28px); line-height:1.08; margin:3px 0 8px; }

/* responsive collapse for the new modules */
@media(max-width:980px){
  .mag-strip__grid{ grid-template-columns:repeat(3,1fr); row-gap:24px; }
  .mag-strip__card{ border-left:1px solid var(--mg-rule); padding-left:16px; padding-right:16px; }
  .mag-strip__card:nth-child(3n+1){ border-left:0; padding-left:0; }
  .mag-idx__grid{ grid-template-columns:repeat(3,1fr); }
}
@media(max-width:860px){
  .mag-feat__body{ grid-template-columns:1fr; }
  .mag-feat__col{ padding-right:0; border-right:0; }
  .mag-feat__media{ padding-left:0; margin-top:18px; }
  .mag-mosaic{ grid-template-columns:1fr; }
  .mag-mosaic__tx{ padding-right:0; margin-bottom:16px; }
  .mag-news__body{ grid-template-columns:1fr; }
  .mag-news__lead{ padding-right:0; }
  .mag-news__media{ padding:18px 0; margin:0 0 4px; border-left:0; border-right:0;
    border-top:1px solid var(--mg-rule); border-bottom:1px solid var(--mg-rule); }
  .mag-news__side{ padding-left:0; margin-top:16px; }
  .mag-idx__grid{ grid-template-columns:repeat(2,1fr); }
  .mag-twofeat__body{ grid-template-columns:1fr; }
  .mag-twofeat__col{ padding:18px 0; border-left:0; border-top:1px solid var(--mg-rule); }
  .mag-twofeat__col:first-child{ padding-top:0; border-top:0; }
}
@media(max-width:560px){
  .mag-strip__grid{ grid-template-columns:repeat(2,1fr); }
  .mag-strip__card:nth-child(3n+1){ border-left:1px solid var(--mg-rule); padding-left:16px; }
  .mag-strip__card:nth-child(2n+1){ border-left:0; padding-left:0; }
  .mag-mosaic__grid{ gap:10px; }
  .mag-idx__grid{ grid-template-columns:1fr 1fr; }
}

/* ---- dim / night mode ------------------------------------------------------
   Token overrides only; values mirror the batman tokens in cdo-watchtower.css
   so the magazine reads on the shell's dark page background. Without this
   block the light-mode inks (#26302b on near-black) are illegible at night. */
html[data-mode="batman"] .mag-main{
  --mg-ink:#ece7dc;    /* mirrors --wt-ink, 13.6:1 on #161a18 */
  --mg-muted:#c2cabb;  /* mirrors --wt-ink-soft, 9.3:1 */
  --mg-soft:#93a093;   /* mirrors --wt-ink-quiet, 5.2:1 */
  --mg-rule:#2c342f; --mg-rule-d:#3d473f;
  --mg-bar:#b9c7b7;    /* mirrors --wt-rule-strong */
  --mg-kicker:#93a093;
  --mg-accent:#8fd0b4; /* mirrors --wt-accent, soft mint */
  --mg-red:#ff9d9d;
  --mg-paper:#1e2522;  /* mirrors --wt-surface */
}
/* Same gentle image dim the shell applies, so photos don't glare at night. */
html[data-mode="batman"] .mag-main img{ filter:brightness(.9) contrast(1.02); }