/* ------------------------------------------------------------------------
   A360 article replica — Us Weekly "Rich Mom Fashion Deals"
   Every value below was measured off the live page with getComputedStyle;
   nothing here is estimated. See README.md for the one substitution
   (Museo Sans -> Nunito Sans, a licensing constraint).
   ------------------------------------------------------------------------ */

:root {
  /* color */
  --ink:        #000000;   /* headlines, bold lead-ins, related titles */
  --meta:       #767676;   /* byline, date */
  --accent:     #e70074;   /* links, kicker, "Related:" badge */
  --accent-rule:#ec2b8c;   /* 2px rules around related blocks */
  --rule:       #d5d5d5;   /* disclaimer hairlines */
  --disc-bg:    #f9f9f9;   /* disclaimer background */
  --page:       #ffffff;

  /* type */
  --display: "Fira Sans Extra Condensed", "Arial Narrow", Arial, sans-serif;
  --text:    "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  font-family: var(--text);
  font-size: 16px;
  line-height: 28.48px;
  -webkit-font-smoothing: antialiased;
}

/* --- header ----------------------------------------------------------- */

.kicker {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 500;
  line-height: 20.02px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.kicker a { color: var(--accent); text-decoration: none; }
.kicker a:hover { text-decoration: underline; }

.content-title {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: 56px;
  font-weight: 800;
  line-height: 58.8px;
}

.content-subtitle {
  margin: 15px 0 30px;
  color: var(--ink);
  font-family: var(--text);
  font-size: 21px;
  font-weight: 400;
  line-height: 29.4px;
}

/* The byline row (.meta) is styled in "STICKY CHROME + BYLINE" at the foot of
   this file; the old flex rule here set a 14px gap that suppressed the "|"
   separator. The .share / .share__btn rules went with the share icons, which
   the live page does not carry in this row at all. */

/* --- hero ------------------------------------------------------------- */

.item-figure { margin: 0 0 30px; }
.ratio { position: relative; width: 100%; overflow: hidden; background: #efefef; }
.ratio > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.credit {
  margin-top: 8.06px;
  color: var(--ink);
  font-family: var(--text);
  font-size: 13px;
  font-weight: 300;
  line-height: 17.94px;
}

/* --- affiliate disclaimer --------------------------------------------- */

.disclaimer {
  margin: 30px 0;
  padding: 15px 25px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--disc-bg);
  /* 16px / 22.4px / 300 / #5c5c5c is restated in the ARTICLE TYPOGRAPHY
     carve-out, under the renamed --disclaimer-ink token. */
}

/* --- article body ----------------------------------------------------- */

/* Body copy, bold lead-ins, lists, h3/h4 and body links are all set in the
   ARTICLE TYPOGRAPHY section at the foot of this file. The rules that used to
   sit here were built from the DISCLAIMER's 16px/28.48px/#5c5c5c, which is the
   wrong element — see that section's header. */

.article-content h2 {
  margin: 32px 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: var(--h2-size);
  font-weight: 700;
  line-height: var(--h2-leading);
  letter-spacing: 0.3px;
}

.article-content i, .article-content em { font-style: italic; }

/* --- related-article blocks ------------------------------------------- */

.related {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin: 30.6px 0;
  padding: 20px 0;
  border-top: 2px solid var(--accent-rule);
  border-bottom: 2px solid var(--accent-rule);
}
.related__thumb { flex: 0 0 120px; line-height: 0; }
.related__thumb img {
  width: 120px;
  height: 68px;
  object-fit: cover;
  display: block;
}
.related__title {
  margin: 0;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 500;
  line-height: 24px;
}
.related__title a { color: var(--ink); text-decoration: none; }
.related__title a:hover { text-decoration: underline; }
.related__badge { color: var(--accent); }

/* --- focus visibility (added; the original has no visible focus ring) - */

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- mobile ----------------------------------------------------------- */

@media (max-width: 669px) {
  .content-title { font-size: 38px; line-height: 39.9px; }
  .content-subtitle { font-size: 19px; line-height: 26.6px; }
  .kicker { font-size: 15.4px; font-weight: 800; line-height: 17.556px; }
  .article-content h2 { font-size: var(--h2-size); line-height: var(--h2-leading); }
}

@media (max-width: 400px) {
  .related { gap: 14px; }
  .related__title { font-size: 20px; line-height: 22px; }
}

/* ========================================================================
   SITE CHROME — global header + right rail
   Merged in from the former partials/ directory (header.html, header.css,
   sidebar.html, sidebar.css), which was deleted once its content landed in
   index.html and in this file. Measurements come from _source/header.json
   and _source/sidebar.json, captured at viewport 1024.
   ======================================================================== */

/* The page shell — container steps, the full-width headline block and the
   two-column row — is in the PAGE LAYOUT section at the foot of this file.
   scroll-padding-top lives in STICKY CHROME, because the sub-menu is sticky
   too and anchor jumps have to clear both bars. */

/* ------------------------------------------------------------------------
   Global site header — scoped entirely under .site-header
   Markup: the <header class="site-header"> block at the top of index.html.

   Every value is taken from _source/header.json (header.header captured
   2026-11-03 @ viewport 1024) and reuses the tokens already declared in
   styles.css: --display, --ink, --page, --rule, --accent.
   Nothing here touches the article's own selectors.
   ------------------------------------------------------------------------ */

.site-header {
  /* rgb(225,225,225) hairline from the live box-shadow; no global token exists for it */
  --site-header-hairline: #e1e1e1;
  --site-header-height: 60px;

  position: sticky;
  top: 0;
  z-index: 1500000;
  height: var(--site-header-height);
  background: var(--page);
  box-shadow:
    var(--site-header-hairline) 0 1px 0 0,
    rgba(0, 0, 0, 0.05) 0 2px 4px 0;
  font-family: var(--display);
}

.site-header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--site-header-height);
  max-width: 2660px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- left group: hamburger, logo, section nav -------------------------- */

.site-header__main {
  display: flex;
  align-items: center;
  gap: 20px;          /* puts the logo at x=70 on the live page */
  height: var(--site-header-height);
  min-width: 0;
}

/* The live page draws the bars in CSS on a single <span> — no icon svg. */
.site-header__burger {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 38px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.site-header__burger-bars,
.site-header__burger-bars::before,
.site-header__burger-bars::after {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
}
.site-header__burger-bars {
  position: relative;
}
.site-header__burger-bars::before,
.site-header__burger-bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.site-header__burger-bars::before { top: -7px; }
.site-header__burger-bars::after  { top:  7px; }

.site-header__logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  line-height: 0;
  text-decoration: none;
}
.site-header__logo .us-logo {
  display: block;
  flex: 0 0 auto;      /* stays 60px wide even in the 50px mobile box, as on the live page */
  width: 60px;
  height: 47px;
}

.site-header__nav {
  min-width: 0;
  overflow-x: auto;            /* safety valve between the breakpoints */
  scrollbar-width: none;
}
.site-header__nav::-webkit-scrollbar { display: none; }

.site-header__nav-list {
  display: flex;
  align-items: center;
  margin: 0 15px 0 0;
  padding: 0;
  list-style: none;
}
.site-header__nav-list li + li { margin-left: 12px; }   /* no flex gap on the original */

.site-header__nav-list a {
  display: block;
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: 19px;
  font-weight: 300;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
}
.site-header__nav-list a:hover { text-decoration: underline; }

/* --- right group: Subscribe, search, sign in -------------------------- */

.site-header__toolbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 15px;
  height: var(--site-header-height);
}

.site-header__subscribe {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 25px;
  padding: 3px 22px;
  border: none;
  border-radius: 20px;
  background: var(--ink);
  color: var(--page);
  font-family: var(--display);
  font-size: 16px;
  font-weight: 300;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.site-header__subscribe:hover { background: var(--accent); }

.site-header__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.site-header__icon-btn svg { display: block; fill: var(--ink); }
.site-header__icon-btn .search-icon { width: 23px; height: 26px; }
.site-header__icon-btn .user-account__signin-icon { width: 24px; height: 26px; }

/* --- hamburger panel -------------------------------------------------- */

.site-header__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: block;
  max-height: calc(100vh - var(--site-header-height));
  overflow-y: auto;
  border-top: 1px solid var(--site-header-hairline);
  background: var(--page);
  box-shadow: rgba(0, 0, 0, 0.12) 0 6px 14px 0;
}
.site-header__panel[hidden] { display: none; }   /* keeps the `hidden` attribute authoritative */

.site-header__panel-inner {
  max-width: 2660px;
  margin: 0 auto;
  padding: 18px 20px 24px;
}

.site-header__panel-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-header__panel-list a {
  display: block;
  padding: 7px 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: 19px;
  font-weight: 300;
  line-height: normal;
  text-decoration: none;
}
.site-header__panel-list a:hover { color: var(--accent); }

.site-header__panel-list--secondary {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.site-header__panel-list--secondary a { font-size: 17px; }

.site-header__socials {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
}
.site-header__socials a { display: block; line-height: 0; }
.site-header__socials svg { display: block; }

/* --- focus visibility (the original header has no visible focus ring) -- */

.site-header a:focus-visible,
.site-header button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- narrow widths ---------------------------------------------------- */
/* The live page drops the six bar links and shrinks the bar to 50px by 375px
   wide; 669px matches the breakpoint already used in styles.css. */

@media (max-width: 669px) {
  .site-header { --site-header-height: 50px; }
  .site-header__container { padding: 0 12px; }
  .site-header__main { gap: 9px; }
  .site-header__burger { width: 25px; }
  .site-header__burger-bars,
  .site-header__burger-bars::before,
  .site-header__burger-bars::after { width: 21px; }
  .site-header__logo { width: 50px; overflow: visible; }   /* 60px svg overflows, as on the live page */
  .site-header__nav { display: none; }
  .site-header__toolbar { gap: 12px; }
  .site-header__subscribe { padding: 3px 16px; }
}

/* ------------------------------------------------------------------------
   A360 article replica - right-rail (sidebar) chrome only.
   Values come from _source/sidebar.json, measured off the live page with
   getComputedStyle at viewport 1024. Tokens are the ones already declared
   in ../styles.css (--accent, --display, --text, --ink, --page).

   Scope: every selector below is nested under .site-rail, so none of it
   touches the article.

   Two substitutions, both forced by "no new dependencies":
     - the widget's Figtree is replaced by var(--text) (Nunito Sans)
     - the "Powered by" Alte Haas Grotesk is replaced by var(--text)
   The rail's own box — its 300px width, its margin-left gutter and how it
   stacks below 1024px — belongs to the PAGE LAYOUT section at the foot of
   this file. Only the font carries over here.
   ------------------------------------------------------------------------ */

.site-rail {
  font-family: var(--text);
}

/* --- related-media icon bar (ul.related-media on the live page) -------- */

.site-rail__media {
  display: flex;
  justify-content: space-between;
  width: 300px;
  height: 53.5px;
  margin: 0 0 25px;
  padding: 0;
  list-style: none;
  background: var(--accent);
  border-radius: 7px;
}

.site-rail__media-item {
  width: 100px;
  padding: 0;
  background: transparent;
  text-align: start;
}

.site-rail__item-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px;
  color: var(--accent);
  text-decoration: none;
}

/* the captured markup hard-codes fill="#fff" on most paths, but the Google
   News crest and both Podcasts paths carry no fill - force white for all. */
.site-rail__item-link .item-icon,
.site-rail__item-link .item-icon path { fill: #ffffff; }

.site-rail__item-text {
  color: #ffffff;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: uppercase;
  text-decoration: none;
}

.site-rail__item-link:hover .site-rail__item-text { text-decoration: underline; }

.site-rail__item-link:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -2px;
  border-radius: 5px;
}

/* --- podcast module (static copy of the JamX player) ------------------- */

.site-rail__podcasts {
  width: 300px;
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--text);
}

.site-rail__episode {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 76px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
}

.site-rail__episode--featured { min-height: 100px; }

.site-rail__episode:hover { border-color: rgb(182, 237, 237); }

.site-rail__artwork {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  display: block;
  object-fit: cover;
  border-radius: 12px;
  background: #e8e8ee;   /* shows through if the local file is missing */
}

.site-rail__artwork--lg { flex-basis: 88px; width: 88px; height: 88px; }

.site-rail__episode-body { min-width: 0; }

.site-rail__show {
  margin: 0;
  color: #007174;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.site-rail__dot { margin: 0 2px; }
.site-rail__duration { font-weight: 600; }

.site-rail__episode-title {
  margin: 2px 0 0;
  color: #262640;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* inert by design: disabled, no handler, no player script behind it */
.site-rail__play {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: 117px;
  height: 28px;
  margin-top: 6px;
  padding: 4px 8px 4px 4px;
  border: 0;
  border-radius: 7px;
  background: #262640;
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: default;
  opacity: 1;            /* keep the original look despite [disabled] */
}

.site-rail__play-icon { flex: 0 0 21px; }

.site-rail__powered {
  margin: 12px 0 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
}

/* ========================================================================
   SECTION SUB-NAV  —  the pink strip the live page renders under the header
   Live: div.cte-module.module-sub-menu-wrapper (52px, 1px white top border)
         > div.module-sub-menu (rgb(231,0,116), 51px, full-bleed)
           > div.container-medium.row (max-width 1100, padding 0 10px,
                                       display flex, justify-content center)
             > ul.sub-menu__list (flex, nowrap, margin 10px 0, padding 4px 0,
                                  overflow-x auto)
               > li.menu-list__item (margin-right 30px)
                 > a (Fira Sans Extra Condensed 18px/600, 18px line, uppercase,
                      #fff, no underline)
   ===================================================================== */

.site-subnav {
  border-top: 1px solid #fff;
}

.site-subnav__bar {
  background: var(--accent);
}

.site-subnav__row {
  display: flex;
  justify-content: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 10px;
}

.site-subnav__list {
  display: flex;
  flex-wrap: nowrap;
  min-width: 0;
  max-width: 100%;
  margin: 10px 0;
  padding: 4px 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}

.site-subnav__list::-webkit-scrollbar { display: none; }

.site-subnav__item {
  /* 23px line box keeps the ul at the live page's 31px and the strip at 52px */
  margin: 0 30px 0 0;
  line-height: 23px;
}

.site-subnav__item a {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  line-height: 18px;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.site-subnav__item a:hover,
.site-subnav__item a:focus-visible {
  text-decoration: underline;
}

/* Live page widens the strip's side padding on phones (ul clientWidth 335 at
   375px, i.e. 20px each side) and scrolls the list horizontally. */
@media (max-width: 669px) {
  .site-subnav__row { padding: 0 20px; }
}

/* ========================================================================
   RAIL NEWSLETTER BLOCK  —  static and inert
   Live: div.newsletter-form, 300x196, padding 10px, position relative, with
   an absolutely positioned background <img> (inset 0, object-fit cover).
   Title museo-sans 30px/700 centred; field row 280x42 (input 189 + button 91);
   disclaimer 11px/12.1px. museo-sans is substituted by Nunito Sans (--text),
   the same substitution the article body already uses.
   ===================================================================== */

.site-rail__newsletter {
  position: relative;
  box-sizing: border-box;
  width: 300px;
  min-height: 196px;
  margin: 25px 0 0;
  padding: 10px;
}

.site-rail__newsletter-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-rail__newsletter-body {
  position: relative;
}

.site-rail__newsletter-title {
  margin: 10px 0;
  font-family: var(--text);
  font-size: 30px;
  font-weight: 700;
  line-height: 30px;
  color: #fff;
  text-align: center;
}

.site-rail__newsletter-fields {
  display: flex;
  flex-wrap: nowrap;
  width: 280px;
  height: 42px;
  margin: 0 0 8px;
}

.site-rail__newsletter-input {
  box-sizing: border-box;
  width: 189px;
  height: 42px;
  padding: 12px 10px;
  border: 0;
  border-radius: 0;
  background: #fff;
  font-family: var(--text);
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
  cursor: default;
}

.site-rail__newsletter-submit {
  box-sizing: border-box;
  width: 91px;
  height: 42px;
  padding: 10px;
  border: 0;
  border-radius: 0;
  background: var(--accent);
  font-family: var(--text);
  font-size: 16px;
  font-weight: 300;
  color: #fff;
  text-align: center;
  opacity: 1;
  cursor: default;
  -webkit-text-fill-color: #fff;
}

.site-rail__newsletter-disclaimer {
  margin: 11px 0;
  font-family: var(--text);
  font-size: 11px;
  font-weight: 400;
  line-height: 12.1px;
  color: #fff;
  text-align: left;
}

/* ========================================================================
   ARTICLE TYPOGRAPHY  —  defects 1 and 2 (font, font colour, "zoom")

   ORDER-SENSITIVE: this section and the two below must stay at the foot of
   this file, after every rule and @media block above. Four rules here
   (.article-content, .article-content > p a, .disclaimer, body) tie on
   specificity with rules that remain above or with the UA sheet, and win
   only by coming later.

   Root cause of defects 1 and 2: the replica's body copy was built from the
   affiliate DISCLAIMER's typography (16px / 28.48px / #5c5c5c). The live
   article's body paragraphs are 18px / 1.78 (= 32.04px) / weight 300 / #000,
   margin-bottom 21px — confirmed identical at all ten measured viewport
   widths (_source/layout-spec.json -> body_copy_invariant). 16px against an
   18px baseline is what reads as a different zoom level.

   Museo Sans stays substituted by Nunito Sans via --text (licensing). Only
   size, weight, line-height and colour are matched here, never the face.
   ===================================================================== */

:root {
  /* body copy — the live article's real values */
  --body-size:    18px;
  --body-leading: 1.78;    /* 1.78 x 18px = 32.04px, as measured */
  --body-space:   21px;    /* authored 1.16667em; 21px at 18px */

  /* section headings inside the article body */
  --h2-size:      38px;
  --h2-leading:   1.05;    /* 39.9px */
  --h3-size:      35px;
  --h3-leading:   1.11;    /* 38.85px */

  /* The grey formerly called --body. It is NOT body copy: the affiliate
     disclaimer is the only place it is correct. Renamed so the token can no
     longer be mistaken for article text again. */
  --disclaimer-ink: #5c5c5c;
}

/* Nothing on the page should default to the disclaimer grey. Every element
   that shows text declares its own colour, so this only changes stray text
   nodes — but it stops #5c5c5c being the page-wide default for "text". */
body {
  color: var(--ink);
}

/* --- article body copy -------------------------------------------------
   Child selectors (`>`) throughout, not descendant selectors. The frozen
   markup puts div.disclaimer and both aside.related blocks INSIDE
   .article-content, so a descendant selector here leaks straight into them:
     - `.article-content h3` (0,1,1) outranks `.related__title` (0,1,0) and
       would blow the two related-article titles up from 22px to 35px;
     - `.article-content img` (0,1,1) ties `.related__thumb img` and, loading
       later, would override their fixed 120x68 box.
   Every real body element is a direct child of .article-content, so `>`
   gives exactly the body copy and nothing else.
   ---------------------------------------------------------------------- */

.article-content {
  font-size: var(--body-size);
  line-height: var(--body-leading);
}

.article-content > p {
  margin: 0 0 var(--body-space);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--body-size);
  font-weight: 300;
  line-height: var(--body-leading);
}

/* The bold lead-in of each numbered pick: same 18px and same line box,
   weight 700. Unitless --body-leading means <strong> recomputes to the
   identical 32.04px instead of inheriting a stale pixel value. */
.article-content > p strong,
.article-content > ul strong,
.article-content > ol strong {
  color: var(--ink);
  font-size: var(--body-size);
  font-weight: 700;
  line-height: var(--body-leading);
}

/* Lists: body-copy type, live margins 0 0 1.5em 3em (27px / 54px at 18px).
   This article's frozen content has no <ul>/<ol>, so these rules are inert
   here; they are included so list copy cannot regress to the 16px values. */
.article-content > ul,
.article-content > ol {
  margin: 0 0 1.5em 3em;
  padding: 0;
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--body-size);
  font-weight: 300;
  line-height: var(--body-leading);
}

.article-content > ul li,
.article-content > ol li {
  color: var(--ink);
  font-size: var(--body-size);
  font-weight: 300;
  line-height: var(--body-leading);
}

/* --- headings inside the article body ---------------------------------
   h2 (38px / 1.05 / 700 / .3px / #000) already matched the spec further up
   this file and is left alone there. h3 and h4 were missing entirely; they
   take the same display face, weight, colour and letter-spacing as h2 at
   35px / 1.11. Also inert in this article (its only h3 elements are the two
   .related__title headings, which `>` excludes).
   ---------------------------------------------------------------------- */

.article-content > h3,
.article-content > h4 {
  margin: 32px 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: var(--h3-size);
  font-weight: 700;
  line-height: var(--h3-leading);
  letter-spacing: 0.3px;
}

/* --- links in body copy ------------------------------------------------
   Replaces the deleted `.article-content a`, which was too broad in two
   ways: it forced font-weight 300 onto .related__title's links (the live
   page renders those at the heading's weight 500) and it painted the
   .related__thumb wrapper pink. Scoped to body copy plus the one
   disclaimer link.
   ---------------------------------------------------------------------- */

.article-content > p a,
.article-content > ul a,
.article-content > ol a,
.disclaimer a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

.article-content > p a {
  font-weight: 300;
}

.article-content > p a:hover,
.article-content > ul a:hover,
.article-content > ol a:hover,
.disclaimer a:hover {
  text-decoration-thickness: 2px;
}

/* --- CARVE-OUT: the affiliate disclaimer ------------------------------
   16px / 22.4px / weight 300 / #5c5c5c is correct for this block and this
   block only. Values are unchanged from the old .article-content p rule;
   they are restated here solely so the renamed token has a home and the old
   --body reference could be deleted. Do not fold these numbers back into
   any body-copy rule.
   ---------------------------------------------------------------------- */

.disclaimer {
  color: var(--disclaimer-ink);
  font-size: 16px;
  font-weight: 300;
  /* no line-height: inherits the unitless 1.78 from .article-content, which
     resolves to the live page's measured 28.48px at this 16px size. */
}

/* No viewport override for body copy: a >200-character body paragraph
   measured 18px / 32.04px / 300 / #000 at every one of the ten widths
   probed on the live page, so the size must not change on phones. */


/* ========================================================================
   PAGE LAYOUT  —  defects 3 (headline wider than content) and 5 (rail)

   Replaces the replica's fixed 610 + 20 + 300 shell with the live page's
   responsive model. Every number below is measured, from
   _source/layout-spec.json (10 emulated widths, getBoundingClientRect +
   getComputedStyle, plus the authored rules read out of document.styleSheets).

   The live page's own CSS is written in em against a 10px <body>, while its
   MEDIA QUERIES resolve em against the initial 16px. Those em breakpoints are
   therefore restated here as the px widths they actually match:
       64em = 1024   79.9375em = 1279   80em = 1280
       82.5em = 1320   87.5em = 1400    30.0625em = 481   63.9375em = 1023
       42.5em = 680
   Do NOT set html{font-size:10px} to "fix" the em arithmetic: :root is 16px
   on the live page too (layout-spec corrections_to_parent_spec #1).

   Measured layout table (viewport px -> container / left column / gap / rail):
       <=480      viewport        full bleed, single column
       481-1023   728             single column (left column = 100%)
       1024-1279  940    610  20  300   (row underfills by 10px — on purpose)
       1280-1319 1180    820  60  300   (flush)
       1320-1399 1300    970  30  300   (flush)
       1400+     1330    970  60  300   (flush)
   The left column is authored as calc(100% - 330px) / calc(100% - 360px);
   that, not the rail's gap, is what leaves the 10px slack in the 940 band.
   ===================================================================== */

:root {
  /* container steps */
  --container-base: 1260px;   /* <=480px: 126em, viewport-limited  */
  --container-sm:    728px;   /* 481-1023   : 72.8em               */
  --container-md:    940px;   /* 1024-1279  : 94em                 */
  --container-lg:   1180px;   /* 1280-1319  : 118em                */
  --container-xl:   1300px;   /* 1320-1399  : 130em                */
  --container-xxl:  1330px;   /* 1400+      : 133em                */

  /* two-column row */
  --rail-width:      300px;   /* aside.site-rail, every side-by-side width */
  --rail-stack-gap:   30px;   /* space above the rail once it stacks       */
  --rail-stack-max:  610px;   /* cap for the stacked newsletter block      */

  /* vertical rhythm of the headline block */
  --head-gap:         30px;   /* .content-head margin-bottom, >=681px (3em) */
  --head-gap-sm:      20px;   /* .content-head margin-bottom, <=680px       */
  --head-top-sm:      19px;   /* .content-head margin-top,    <=680px       */

  /* side insets below 42.5em, where the container itself is full-bleed */
  --page-gutter:      30px;   /* section.content-rail padding / head children */
  --kicker-gutter:    33px;   /* the kicker sits at x=33, not x=30            */

  --page-bottom:      80px;   /* tail of the article shell */
}

/* --- the centred container --------------------------------------------
   `margin: auto` alone centres it: the live .site-container has NO
   horizontal padding at any width. At 1320 that leaves a 2.5px side gutter
   and at 375 none at all — adding a minimum gutter here would make every
   width wrong (layout-spec site_container_authored.no_horizontal_padding).
   Ranges are written non-overlapping so the cascade order does not matter.
   ---------------------------------------------------------------------- */

.site-container {
  width: 100%;
  max-width: var(--container-base);
  margin: 0 auto;
}

@media (min-width: 481px)  and (max-width: 1023px) { .site-container { max-width: var(--container-sm); } }
@media (min-width: 1024px) and (max-width: 1279px) { .site-container { max-width: var(--container-md); } }
@media (min-width: 1280px) and (max-width: 1319px) { .site-container { max-width: var(--container-lg); } }
@media (min-width: 1320px) and (max-width: 1399px) { .site-container { max-width: var(--container-xl); } }
@media (min-width: 1400px)                         { .site-container { max-width: var(--container-xxl); } }

/* --- the article shell ------------------------------------------------
   <article class="post"> is kept as an unstyled semantic wrapper around the
   container; it must carry no width, padding or margin of its own.
   ---------------------------------------------------------------------- */

.post {
  /* live article.post-main carries margin: 50px 0 0 — this is the breathing
     room under the sticky sub-menu that the user reported missing. */
  margin: 50px 0 0;
  padding: 0;
}

/* --- headline block: full container width, above the two-column row ----
   Live: header.content-head.site-container, width 100%, padding 0 at every
   width, margin-bottom 3em (30px) at >=47.9375em. The right rail's top
   aligns with the hero figure precisely BECAUSE this block is not part of
   the row (layout-spec railStartsLevelWith).
   The desktop gap above it comes from the sub-menu's 30px margin-bottom,
   not from a margin here — the live .content-head declares none.
   ---------------------------------------------------------------------- */

.content-head {
  width: 100%;
  margin: 0 0 var(--head-gap);
  padding: 0;
}

/* --- two-column row ---------------------------------------------------
   Live: div.content-inner.site-container, display:flex, flex-direction
   column by default and row from 64em up. Default alignment (stretch) is
   the live page's too — the rail is `height: 100%` inside a stretch row.
   ---------------------------------------------------------------------- */

.content-grid {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  padding: 0;
  margin-bottom: var(--page-bottom);
}

.center-rail {
  width: 100%;
  min-width: 0;        /* lets the column shrink under wide content */
  margin: 0;
  padding: 0;
}

@media (min-width: 1024px) {
  .content-grid {
    flex-direction: row;

    /* redefined per band below; one pair of locals drives both columns */
    --center-rail-inset: 330px;   /* 940  - 330 = 610 */
    --rail-gap:           20px;
  }

  .center-rail { width: calc(100% - var(--center-rail-inset)); }

  .site-rail {
    flex: 0 0 var(--rail-width);
    width: var(--rail-width);
    margin: 0 0 0 var(--rail-gap);
  }
}

@media (min-width: 1280px) {
  .content-grid { --center-rail-inset: 360px; --rail-gap: 60px; }   /* 1180 - 360 = 820 */
}

@media (min-width: 1320px) {
  .content-grid { --center-rail-inset: 330px; --rail-gap: 30px; }   /* 1300 - 330 = 970 */
}

@media (min-width: 1400px) {
  .content-grid { --center-rail-inset: 360px; --rail-gap: 60px; }   /* 1330 - 360 = 970 */
}

/* --- single column, <=1023px ------------------------------------------
   The live page swaps in a second, full-bleed aside.right-rail near the
   page bottom and hides the desktop one. The replica has a single rail, so
   it stays in the flow and simply falls below the article column, aligned
   with it (layout-spec corrections_to_parent_spec #3). That correction also
   supersedes the old `@media (max-width: 669px) { .site-rail { display: none } }`
   — the 0px-wide rail recorded in _source/sidebar.json was the DESKTOP one
   of the live page's two, not the mobile one, which renders at 375px.
   ---------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .site-rail {
    width: auto;
    margin: var(--rail-stack-gap) 0 0;
  }

  .site-rail__media,
  .site-rail__podcasts { width: 100%; }

  .site-rail__newsletter {
    width: 100%;
    max-width: var(--rail-stack-max);
    margin-left: auto;
    margin-right: auto;
  }
}

/* --- side gutters below 42.5em (680px) --------------------------------
   Below this width the container goes full-bleed and the live page insets
   each piece individually: the article column from section.content-rail's
   own `padding: 0 30px`, and every child of the headline block from its own
   `padding: 0 3em`. The kicker's wrapper measures 33px rather than 30px.
   ---------------------------------------------------------------------- */

@media (max-width: 680px) {
  .content-head {
    margin-top: var(--head-top-sm);
    margin-bottom: var(--head-gap-sm);
  }

  .content-head > * {
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
  }

  .content-head > .kicker {
    padding-left: var(--kicker-gutter);
    padding-right: var(--kicker-gutter);
  }

  .center-rail,
  .site-rail {
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
  }
}


/* ========================================================================
   STICKY CHROME + BYLINE  —  defects 4 (sub-menu) and 6 (byline links)

   Nothing in this section touches .article-content or any data-copy element.
   Every number is the live page's own value, taken from
   _source/layout-spec.json ("submenu" and "byline" objects, measured
   2026-11-04 with getComputedStyle + getBoundingClientRect).

   Must stay last: it supersedes the header-only scroll-padding-top that used
   to sit in the SITE CHROME section, and it restates the byline row whose
   old flex rule has been deleted from the header section above.
   ===================================================================== */

/* --- tokens -----------------------------------------------------------
   Prefixed so they cannot collide with the tokens the sections above add to
   :root. --chrome-header-height mirrors .site-header's own
   --site-header-height, which is declared ON .site-header and therefore
   invisible to html and to .site-subnav; it is restated here so the sticky
   stack can be derived instead of hard-coded. Keep the two in sync.
   ---------------------------------------------------------------------- */

:root {
  --chrome-header-height: 60px;   /* live header.header: 60px, sticky at top 0 */
  --chrome-header-hairline: 1px;  /* the #e1e1e1 box-shadow hairline under it */

  /* Live wrapper sits at y=61 = 60px header + its 1px hairline. */
  --subnav-offset: calc(var(--chrome-header-height) + var(--chrome-header-hairline));

  /* Rendered height of the strip (1px white border-top + 51px pink bar).
     Not applied as a height — the strip already measures 52px from its own
     content, exactly as the live one does. Declared only so
     scroll-padding-top can be derived rather than guessed. */
  --subnav-height: 52px;

  --subnav-gap-below: 30px;       /* live .module-sub-menu margin-bottom */
  --subnav-z: 1000;               /* live wrapper z-index; header is 1500000 */

  /* Total height occluded by the sticky chrome once the sub-menu is sticky
     too: the strip's bottom edge, 61 + 52 = 113px. */
  --sticky-chrome-height: calc(var(--subnav-offset) + var(--subnav-height));

  /* Byline: the live page's own em values, which resolve against the 14px
     row, giving 6px either side of the "|" and 5px after the author link. */
  --meta-sep-space: 0.428571em;
  --meta-byline-link-gap: 0.357143em;
}

@media (max-width: 669px) {
  :root {
    /* .site-header already shrinks to 50px here, so the strip has to follow
       it up; the live page does the same (header 50px, wrapper sticky at
       top 51px at viewport 375). Without this the strip would stick 11px
       low and show a white band under the header on phones. */
    --chrome-header-height: 50px;
  }
}

/* --- defect 4: the pink sub-menu strip --------------------------------
   Live: div.module-sub-menu-wrapper is position:sticky, top:61px, z-index
   1000, height 52px, border-top 1px solid #fff; the pink bar inside it
   (div.module-sub-menu, rgb(231,0,116), 51px) carries margin:0 0 30px.
   The replica's strip was static and had no space beneath it.

   Measured on the live page (STICKY_PROOF_at_vw1920 in layout-spec.json):
   the wrapper holds y=61 at scrollY 0, 1443 and 2882, and the list's
   margin (10px 0) and padding (4px 0) are IDENTICAL at rest and scrolled —
   the live page applies no scroll-triggered class. So the only two things
   wrong here were the missing stickiness and the missing 30px.
   ---------------------------------------------------------------------- */

.site-subnav {
  position: sticky;
  top: var(--subnav-offset);
  z-index: var(--subnav-z);
  /* border-top: 1px solid #fff is set in the SECTION SUB-NAV block above —
     kept, it is the white hairline that separates the strip from the
     header's own shadow. */
}

/* The 30px gap the user was missing. Declared on the bar, not the wrapper,
   because that is where the live page declares it; the bottom margin
   collapses out through the wrapper (which has a top border but no bottom
   border, no bottom padding and no overflow), so the strip stays 52px and
   the 30px lands below it — the same mechanism as the original.
   If a later change gives .site-subnav padding-bottom, a bottom border or
   overflow, that collapse stops and this 30px must move to .site-subnav. */
.site-subnav__bar {
  margin: 0 0 var(--subnav-gap-below);
}

/* Anchor jumps have to clear BOTH sticky bars now, not just the header.
   Supersedes the `html { scroll-padding-top: 60px }` that used to sit in the
   SITE CHROME section, whose comment ("nothing starts underneath it")
   stopped being true the moment the strip became sticky.
   113px desktop / 103px at <=669px. */
html {
  scroll-padding-top: var(--sticky-chrome-height);
}

/* --- defect 6: the byline row "By Kaitlin Marks | October 30, 2026" ---
   The replica rendered three flex children (byline, time, and a .share
   group of two share-icon spans) with a 14px flex gap. The live
   .content-head-info has exactly two children, laid out as inline-blocks in
   normal flow, separated by a "|" generated from .content-byline::after.
   The <time> is a bare <time> with no <a> inside and no underline.

   The share icons are gone from index.html. On the live page they are not
   deleted but live in a separate vertical rail (aside#module-social-sharing)
   pinned at the far left of the viewport, outside the container; that rail is
   deliberately NOT reproduced here — see README.md, Known deltas.
   ---------------------------------------------------------------------- */

.meta {
  /* Live .content-head-info: display block, margin-top 2.2em (= 22px against
     its 10px font-size), padding 0, and children with margin-bottom 0.
     Deliberately NO margin-bottom: the 30px below the byline comes from
     .content-head's own margin-bottom, not from this row.

     Deliberately NO `padding` declaration either, even though the live row
     computes to 0 on desktop. .meta has no padding to begin with, and PAGE
     LAYOUT gives `.content-head > *` the 30px page gutter below 680px; a
     `padding: 0` here would tie that rule on specificity and — coming
     later — win, stripping the byline's mobile gutter. */
  display: block;
  margin: 22px 0 0;

  /* Live children rule, verbatim: rgb(118,118,118) = --meta, museo-sans
     (substituted by --text per the house rule), 1.4em = 14px, weight 400,
     line-height 1.4286. */
  color: var(--meta);
  font-family: var(--text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4286;
}

.meta .byline,
.meta .published {
  display: inline-block;
  margin-bottom: 0;
  color: inherit;
}

/* The separator the replica was missing. Live:
   .content-head-info .content-byline::after
     { content: "|"; font-weight: 300; margin: 0 0.428571em } */
.meta .byline::after {
  content: "|";
  font-weight: 300;
  margin: 0 var(--meta-sep-space);
}

/* Live: .content-head-info .content-byline a:last-child
         { margin-right: 0.357143em } */
.meta .byline a:last-child {
  margin-right: var(--meta-byline-link-gap);
}

/* Live author link: colour inherited from the row, underlined; the hover
   drops the underline and goes accent. The replica kept the underline on
   hover and hard-coded the colour instead of inheriting it. */
.meta .author {
  color: inherit;
  text-decoration: underline;
}

.meta .author:hover,
.meta .author:focus-visible {
  color: var(--accent);
  text-decoration: none;
}

/* The date is not a link on the live page and must not look like one, even
   if a UA stylesheet or a later rule decorates <time>. */
.meta .published {
  text-decoration: none;
}

/* ========================================================================
   GLOBAL FOOTER  —  measured off the live page at viewport 1440
   Live chain:
     footer.footer            padding 50px 0 0; margin-top 50px; bg #fff;
                              border-top 2px solid rgb(236,43,140)
     .footer__container       max-width 1320px; margin auto; padding 0 20px
     .footer__disclaimer      16px/19.2px, rgb(86,86,86), UPPERCASE, margin 0 0 60px
     .footer__main            margin-bottom 60px
       > .footer__container   display grid; grid-template-columns 3 x 426.66px;
                              gap 50px 0
         column 1             usweekly nav + socials, pushed apart (socials sits on the
                              column's bottom edge: measured y=593 in a 279..656 row)
         columns 1 and 2      padding-right 106.656px
     .footer__heading         Fira SEC 22px/26.4px, weight 700, UPPERCASE, margin 0 0 16px
     .footer-nav              display flex; gap 10px   (links 17px/20.4px, weight 400, #000)
     .footer__socials-list    display flex; gap 20px; wrap   (icons 20x20)
     .footer__magazine        display flex; gap 28px   (cover 205x275)
     .footer__form            padding 20px 0 15px
     .footer__bottom          padding 22px 0
       > .footer__container   flex; space-between; align center; gap 25px
         .footer__logo        rendered 230.4 x 32  (mcc-logo.png, natural 360x50)
         .footer__copyright   Fira SEC 17px/17px, weight 500
   museo-sans is substituted by Nunito Sans (--text) as everywhere else; the footer's own
   type is Fira Sans Extra Condensed (--display), which we do ship.
   ===================================================================== */

.site-footer {
  margin-top: 50px;
  padding: 50px 0 0;
  background: var(--page);
  border-top: 2px solid var(--accent-rule);
  font-family: var(--display);
}

.site-footer__container {
  box-sizing: border-box;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
}

.site-footer__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- disclaimer band ---------------------------------------------------- */

.site-footer__disclaimer {
  margin: 0 0 60px;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  color: #565656;
  text-transform: uppercase;
}

/* --- main three-column grid --------------------------------------------- */

.site-footer__main {
  margin-bottom: 60px;
}

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px 0;
}

.site-footer__col {
  min-width: 0;
}

/* the live grid gives columns 1 and 2 a 106.656px right gutter; column 3 has none */
.site-footer__col:nth-child(1),
.site-footer__col:nth-child(2) {
  padding-right: 106.66px;
}

/* column 1 holds two blocks with the socials pinned to the bottom of the row */
.site-footer__col--stack {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 50px;
}

.site-footer__heading {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
  line-height: 26.4px;
  color: var(--ink);
  text-transform: uppercase;
}

.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__nav a,
.site-footer__inert {
  display: inline-block;
  font-size: 17px;
  font-weight: 400;
  line-height: 20.4px;
  color: var(--ink);
  text-decoration: none;
}

.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
  color: var(--accent);
}

/* items that open a JS dialog on the live site and have no real href */
.site-footer__inert {
  cursor: default;
}

.site-footer__privacy-icon {
  width: 29px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
}

/* --- socials ------------------------------------------------------------ */

.site-footer__socials-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__socials-list a {
  display: block;
  line-height: 0;
}

.site-footer__socials-list img {
  display: block;
  width: 20px;
  height: 20px;
}

/* --- magazine column ---------------------------------------------------- */

.site-footer__magazine {
  display: flex;
  gap: 28px;
}

.site-footer__cover {
  flex: 0 0 auto;
  width: 205px;
  height: 275px;
  object-fit: cover;
}

/* --- newsletter band (static + inert) ----------------------------------- */

.site-footer__form {
  padding: 20px 0 15px;
}

.site-footer__newsletter {
  position: relative;
  box-sizing: border-box;
  min-height: 73px;
  padding: 12px 20px;
  overflow: hidden;
}

.site-footer__newsletter-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-footer__newsletter-body {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.site-footer__newsletter-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  color: #fff;
}

.site-footer__newsletter-fields {
  display: flex;
  flex-wrap: nowrap;
  height: 42px;
}

.site-footer__newsletter-input {
  box-sizing: border-box;
  width: 189px;
  height: 42px;
  padding: 12px 10px;
  border: 0;
  border-radius: 0;
  background: #fff;
  font-family: var(--text);
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
  cursor: default;
}

.site-footer__newsletter-submit {
  box-sizing: border-box;
  width: 91px;
  height: 42px;
  padding: 10px;
  border: 0;
  border-radius: 0;
  background: var(--accent);
  font-family: var(--text);
  font-size: 16px;
  font-weight: 300;
  color: #fff;
  text-align: center;
  opacity: 1;
  cursor: default;
  -webkit-text-fill-color: #fff;
}

/* --- bottom bar --------------------------------------------------------- */

.site-footer__bottom {
  padding: 22px 0;
}

.site-footer__bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}

.site-footer__logo {
  display: block;
  width: 230.4px;
  height: 32px;
}

.site-footer__copyright {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 17px;
  color: var(--ink);
}

.site-footer__copyright a {
  color: inherit;
  text-decoration: underline;
}

.site-footer__copyright a:hover {
  color: var(--accent);
  text-decoration: none;
}

/* --- responsive --------------------------------------------------------- */

@media (max-width: 979px) {
  .site-footer__cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 30px;
  }

  .site-footer__col:nth-child(1),
  .site-footer__col:nth-child(2) {
    padding-right: 0;
  }

  .site-footer__col--stack {
    gap: 40px;
  }
}

@media (max-width: 669px) {
  .site-footer {
    margin-top: 40px;
    padding-top: 30px;
  }

  .site-footer__cols {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .site-footer__disclaimer {
    margin-bottom: 40px;
  }

  .site-footer__main {
    margin-bottom: 40px;
  }

  .site-footer__magazine {
    gap: 20px;
  }

  .site-footer__cover {
    width: 150px;
    height: 201px;
  }

  .site-footer__bottom-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .site-footer__newsletter-body {
    justify-content: flex-start;
  }
}

/* ========================================================================
   TODAY'S TOP DEALS  —  measured off the live page at viewport 1440
   (_source/top-deals.json, getComputedStyle + getBoundingClientRect)
   Live chain:
     section#content-card-footer   bg rgb(240,240,240); padding 10px 0; margin-top 40px;
                                   full-bleed
       > div.grid.content          max-width 1330px; margin-top 20px
         > div.mula-widget         x 48, w 1330 at vw1440; margin 0 0 40px
           > div.grid.content > div.mula-widget__inner
             h3.mula-widget__title Fira SEC 42px, weight 700, UPPERCASE, margin 0 0 30px
             .mula-widget__products  display grid; 427.328 427.328 427.344; gap 24px
               div.amazon-affiliate  427.3 x 602; #fff; border-radius 8px; flex column
                 figure.wp-caption   427.3 x 427; flex; justify-content center
                   img.product-image rendered 427x427 (markup width/height 500x500)
                   figcaption.wp-caption-text  bg rgba(255,255,255,.95); padding 2px 6px
                     p.credits       12px, weight 500, rgb(192,192,192), margin 12px 0
                 .affiliate-item__content  padding 16px 24px 24px; flex column;
                                   justify-content space-between; h 164
                   h4.affiliate-item__header  Fira SEC 26px/28.6px, weight 700, #000,
                                   margin 0 0 10px
                   .shopping-button__cta  379.3 x 47; 16px/19.2px, weight 600, #fff on
                                   rgb(170,44,86); border-radius 6px;
                                   padding 14px 15px 8px 18px; UPPERCASE; centred
   The widget column is the replica's own .site-container (1330px at 1400+, the measured
   width), so the band tracks the article's container at every breakpoint instead of
   restating the live page's two nested .grid.content wrappers. The 20px above the title
   and the 40px below the grid are those wrappers' margins, folded onto one element.

   The card's measured 602px is the GRID ROW height, not a card box: the row stretches
   every card to the tallest title in it, which is why h 164 (a two-line title) plus the
   427px figure does not add up to it. Reproduced by letting .top-deals__content grow and
   push its CTA down, exactly as the live space-between does.

   museo-sans is substituted by Nunito Sans (--text) as everywhere else; the title and the
   card headers are Fira Sans Extra Condensed (--display), which we do ship. NOTE: the
   credits (500) and the CTA (600) are weights index.html's Google Fonts URL does not
   request for Nunito Sans, so the browser synthesises them. Left that way on purpose:
   the right rail and the footer copyright already lean on the same two weights, so
   widening that URL would move three signed-off sections, not just this one.
   ===================================================================== */

/* --- tokens -----------------------------------------------------------
   Prefixed --deal-* so they cannot collide with the tokens the sections
   above add to :root. The CTA's rgb(170,44,86) is NOT --accent (#e70074);
   it is the Mula widget's own button colour and gets its own token.
   ---------------------------------------------------------------------- */

:root {
  --deal-band-bg:      #f0f0f0;            /* section.content-card-footer */
  --deal-card-radius:  8px;
  --deal-gap:          24px;               /* grid gap, both axes */
  --deal-caption-bg:   rgba(255, 255, 255, 0.95);
  --deal-credit-ink:   #c0c0c0;            /* p.credits */
  --deal-cta-bg:       #aa2c56;            /* span.shopping-button__cta */
  --deal-cta-radius:   6px;
  --deal-cta-height:   47px;               /* measured box; see the CTA rule */
}

/* --- the grey band ----------------------------------------------------
   Full-bleed by being a top-level child of <body>, which carries no
   padding - the same way the live section spans the viewport.
   ---------------------------------------------------------------------- */

.top-deals {
  margin-top: 40px;
  padding: 10px 0;
  background: var(--deal-band-bg);
}

/* .site-container supplies width/max-width/centring; only the vertical
   rhythm is restated here (20px from div.grid.content, 40px from
   div.mula-widget). Two class names deep so it outranks `.site-container
   { margin: 0 auto }` wherever this block lands in the cascade. */
.top-deals .top-deals__widget {
  margin: 20px auto 40px;
}

/* The title's leading was not captured at 1440. It cannot be left to
   inherit - body's 28.48px would set a 42px headline on a 28px line - so it
   takes the ratio the two measured Fira SEC display headings share
   (.content-title 56/58.8 and --h2-leading, both 1.05). 44.1px. */
.top-deals .top-deals__title {
  margin: 0 0 30px;
  color: var(--ink);
  font-family: var(--display);
  font-size: 42px;
  font-weight: 700;
  /* live computes `normal` here: a 50px box, not 1.05's 44.1px */
  line-height: normal;
  text-transform: uppercase;
}

/* --- the product grid -------------------------------------------------
   Three equal columns: the measured 427.328 427.328 427.344 is 1fr 1fr 1fr
   of 1330px minus two 24px gaps, with the browser's own rounding.
   ---------------------------------------------------------------------- */

.top-deals .top-deals__products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--deal-gap);
}

.top-deals .top-deals__card {
  display: flex;
  flex-direction: column;
  /* live .amazon-affiliate carries row-gap 10px between figure and content */
  row-gap: 10px;
  min-width: 0;
  background: var(--page);
  border-radius: var(--deal-card-radius);
  /* clips the square image's top corners to the card's radius; the live
     card declares the radius but its corner clipping was not measured */
  overflow: hidden;
}

/* --- figure + credit overlay ------------------------------------------
   The figure measures exactly as tall as its image (427), so the caption
   cannot be in flow - it is positioned over the image. The live page's
   corner for it was not captured at 1440; bottom-left is the choice here
   and the one value in this block that is not measured.
   ---------------------------------------------------------------------- */

.top-deals .top-deals__thumb {
  display: block;
  line-height: 0;
}

.top-deals .top-deals__figure {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0;
}

.top-deals .top-deals__figure img {
  display: block;
  width: 100%;
  height: auto;
}

.top-deals .top-deals__caption {
  position: absolute;
  /* live overlay is inset, not flush to the corner */
  bottom: 10px;
  left: 6px;
  padding: 2px 6px;
  background: var(--deal-caption-bg);
}

.top-deals .top-deals__credit {
  margin: 12px 0;
  color: var(--deal-credit-ink);
  font-family: var(--text);
  font-size: 12px;
  font-weight: 500;
  /* declared, not inherited: body's 28.48px would blow the overlay open */
  line-height: normal;
}

/* --- card body --------------------------------------------------------
   flex: 1 lets the shortest card in a row stretch to the row's height and
   space-between drops its CTA onto the bottom edge, which is how the live
   row equalises at 602px.
   ---------------------------------------------------------------------- */

.top-deals .top-deals__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 24px 24px;
}

.top-deals .top-deals__card-title {
  /* live nets 20px below the title at every width: the header's own margin
     plus a zero-height .affiliate-item__tab-details carrying margin-bottom 20px.
     Folded into one margin rather than reproducing the empty element. */
  margin: 0 0 20px;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  line-height: 28.6px;
}

.top-deals .top-deals__card-title a {
  color: var(--ink);
  text-decoration: none;
}

.top-deals .top-deals__card-title a:hover,
.top-deals .top-deals__card-title a:focus-visible {
  text-decoration: underline;
}

/* --- "VIEW DEAL" ------------------------------------------------------
   The CTA spans the content box (measured 379.3 = 427.3 - 24 - 24).
   Its measured 47px box is 5.8px taller than padding 14 + 8 plus a 19.2px
   line, so the height is declared as the measured min-height rather than
   left to the leading; with the default stretch the extra space lands
   below the text, keeping the high optical position the 14/8 padding
   gives it on the live page.
   ---------------------------------------------------------------------- */

.top-deals .top-deals__cta {
  display: flex;
  justify-content: center;
  min-height: var(--deal-cta-height);
  padding: 14px 15px 8px 18px;
  background: var(--deal-cta-bg);
  border-radius: var(--deal-cta-radius);
  text-decoration: none;
}

.top-deals .top-deals__cta-label {
  color: var(--page);
  font-family: var(--text);
  font-size: 16px;
  font-weight: 600;
  line-height: 19.2px;
  text-transform: uppercase;
}

/* --- responsive --------------------------------------------------------
   The column counts follow the widths styles.css already uses: 979px (the
   footer's three-to-two step) and 669px (its two-to-one step). The 680px
   block is the container's own full-bleed threshold - below it .site-container
   stops limiting width and the live page insets each piece by --page-gutter
   instead, which is what keeps this band flush with the article column.
   ---------------------------------------------------------------------- */

@media (max-width: 979px) {
  .top-deals .top-deals__products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  .top-deals .top-deals__widget {
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
  }
}

@media (max-width: 669px) {
  .top-deals .top-deals__products {
    grid-template-columns: 1fr;
  }

  /* measured on the live page at 375 */
  .top-deals .top-deals__title {
    margin: 0 0 28px;
    font-size: 34px;
  }

  .top-deals .top-deals__card-title {
    font-size: 24px;
    line-height: 26.4px;
  }

  /* below 669 the live caption stops being an overlay: position static,
     no background, sitting under the square image (figure 315 -> 363).
     The figure is a flex ROW at desktop, so it must become a column here or
     the caption lands beside the image instead of beneath it. */
  .top-deals .top-deals__figure {
    flex-direction: column;
  }

  .top-deals .top-deals__caption {
    position: static;
    margin: 10px 0 0;
    padding: 0 20px;
    background: none;
  }
}