/* THE MONEY FIELD — V5.16 WIDE EDITORIAL LAYOUT
   Design-only responsive expansion. No changes to Sanity, assessments, reports,
   accessibility, navigation, or data handling. 1600px is the *outer* maximum
   including padding. Body text remains narrower for readable line lengths. */
@media screen {
  :root {
    --tmf-max-content: 1600px;
    --tmf-page-gutter: clamp(20px, 4vw, 72px);
  }
  .container {
    width: 100%;
    max-width: var(--tmf-max-content);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--tmf-page-gutter);
    padding-right: var(--tmf-page-gutter);
  }
  /* Give the article body a deliberate reading measure, even on ultra-wide screens. */
  .article-body,
  .article-note,
  .article-references.article-body {
    max-width: 760px;
  }
  .intro {max-width: 700px;}
}

/* Larger laptops and desktops: more breathing room, without distorting artwork. */
@media screen and (min-width: 1200px) {
  .site-head {padding-top: 23px; padding-bottom: 23px;}
  .desktop-nav {gap: clamp(8px, 1.25vw, 24px);}
  .nav button {font-size: 13px;}

  .v5-hero {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    gap: clamp(46px, 5.1vw, 98px);
    min-height: 640px;
    padding-top: clamp(66px, 5.2vw, 92px);
    padding-bottom: clamp(75px, 5.4vw, 100px);
  }
  .v5-hero .hero-copy {max-width: 740px;}
  .v5-hero h1 {font-size: clamp(73px, 5.2vw, 94px);max-width: 750px;}
  .v5-hero .bodycopy {font-size: 16px; max-width: 570px;line-height: 1.75;}
  .v5-hero-art {min-height: clamp(460px, 32vw, 565px);}
  .art-feature-card {padding: clamp(24px, 2vw, 32px);bottom: 33px;left: 33px;right: 33px;}
  .art-feature-card h2 {font-size: clamp(28px, 2.2vw, 36px);}

  .v5-section {padding-top: clamp(85px, 6vw, 112px);padding-bottom: clamp(85px, 6vw, 112px);}
  #home .v5-topics-section {padding-top: clamp(83px, 5.7vw, 100px); padding-bottom: clamp(88px, 6vw, 106px);}
  .v5-split-heading {gap: clamp(35px, 5vw, 90px);margin-bottom: 40px;}
  .v5-split-heading h2 {font-size: clamp(50px, 3.5vw, 65px);}
  .v5-split-heading p {font-size: 15px;max-width: 420px;line-height: 1.7;}
  #home .v5-topics-grid.tmf-field-carousel {grid-auto-columns: calc((100% - 48px)/3);gap: 24px;}
  #home .v5-topics-grid .tmf-field-card.topic-card {height: clamp(465px, 32vw, 520px);padding: 26px 28px 24px;}
  #home .tmf-field-cover {width: clamp(170px, 12vw, 198px);height: clamp(170px, 12vw, 198px);flex-basis: clamp(170px, 12vw, 198px);}
  #home .tmf-card-intro strong {font-size: clamp(26px, 2vw, 31px);}
  #home .tmf-card-intro>span {font-size: 13.5px;max-width: 370px;}

  .magazine-feed {grid-template-columns: 1.2fr 1fr;gap: 22px;grid-template-rows:repeat(2,minmax(225px,auto));}
  .magazine-story {min-height: 225px;}
  .magazine-story:first-child .magazine-visual {height: clamp(260px, 19vw, 350px);}
  .magazine-card-text {padding: 25px 28px;}
  .magazine-story:first-child .magazine-card-text {padding: 30px 34px;}
  .magazine-story .story-title {font-size: clamp(24px, 1.8vw, 30px);}
  .magazine-story:first-child .story-title {font-size: clamp(32px, 2.7vw, 43px);}

  .v5-report-layout {
    max-width: 1600px;
    grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    gap: clamp(50px, 5.6vw, 100px);
    padding-top: clamp(82px, 6vw, 115px);
    padding-bottom: clamp(82px, 6vw, 115px);
  }
  .v5-report-copy h2 {max-width: 720px;font-size:clamp(63px,4.6vw,77px);}
  .v5-report-copy .retirement-offer-intro {max-width: 630px;}
  .v5-report-illustration.report-topic-style {width:100%;}
  .v5-resource-grid {gap: 24px;}
  .resource-card {min-height: 370px;padding: clamp(24px, 2vw, 36px);}
  .resource-title {font-size: clamp(30px, 2.35vw, 42px);}

  .harvest-feature-layout {gap: clamp(50px, 6vw, 110px);padding-block: clamp(78px, 6vw, 112px);}
  .harvest-feature-copy h2 {font-size: clamp(55px, 4.1vw, 70px);}
  .harvest-feature-lede {max-width: 585px;font-size: 15px;}
  .harvest-visual-card {max-width: 680px;margin-inline:auto;}

  .advice-home-layout {gap: 35px;padding-top: 47px;padding-bottom: 50px;}
  .advice-home-text p {max-width: 800px;}
  .advice-hero-layout {gap: clamp(45px, 5vw, 95px);}
  .advice-panel-layout {gap: clamp(50px, 5vw, 95px);}
  .advice-section {padding-top: clamp(75px,6vw,108px);padding-bottom: clamp(75px,6vw,108px);}
  .advice-area-grid {gap: 22px;}
  .advice-area-card {padding: 32px;}

  .v6-weekly-inner {column-gap: clamp(40px, 5vw, 85px);}
  .footer-main {padding-top: 52px;padding-bottom: 33px;}
}

/* At 1600+, cap all components to a balanced layout and maintain side gutters. */
@media screen and (min-width: 1600px) {
  .v5-hero {min-height: 710px;}
  .v5-hero h1 {font-size: 92px;}
  .v5-report-illustration.report-topic-style {max-width: 650px;justify-self:end;}
  .v5-hero-art {max-width: 680px;width:100%;justify-self:end;}
}

/* Tablet and narrow laptop: use wider fluid gutters but preserve the existing
   single-column breakpoints of sections already designed for smaller viewports. */
@media screen and (min-width: 821px) and (max-width: 1199px) {
  :root {--tmf-page-gutter: clamp(30px,4.3vw,54px);}
  .v5-hero {gap: clamp(24px,3vw,45px);}
  .v5-section {padding-top: 72px;padding-bottom: 72px;}
  .v5-split-heading {margin-bottom: 28px;}
}

/* Mobile remains deliberately compact with comfortable touch targets. */
@media screen and (max-width: 820px) {
  :root {--tmf-page-gutter: clamp(18px,4.7vw,30px);}
  .v5-hero .hero-copy {max-width: 100%;}
}
@media screen and (max-width: 610px) {
  :root {--tmf-page-gutter: 20px;}
  .v5-hero h1 {font-size: clamp(42px,9vw,55px);letter-spacing:-1.9px;}
  .v5-split-heading {gap:18px;}
  .v5-split-heading p {max-width:100%;}
  .v5-report-copy h2 {max-width:100%;}
  .article-body {font-size: 16px;line-height: 1.75;}
}