/* ============================================================
   Sterling Cooper, Inc.  ·  newsletter-nav.css
   Loaded AFTER site.css. Additive only: it adds the newsletter
   styles and the header fit for the eighth navigation item.
   site.css and site.js are not modified in any way.
   ============================================================ */

/* ---- Header fit --------------------------------------------
   site.css collapses .navlinks to the burger below 1241px. The
   crest, eight primary links and the call to action measure
   wider than that, so the collapse point moves out to 1460px
   and the gaps tighten above it. Nothing shrinks: between those
   widths the menu opens in the drawer, where the links are set
   at 22px and read easily.
   ------------------------------------------------------------ */
@media (max-width:1460px){
  .navlinks,.nav-cta{display:none}
  .burger{display:flex}
}
@media (min-width:1461px){
  .navlinks{gap:clamp(18px,1.5vw,26px); padding-left:24px}
}

/* Newsletter reads as the live item wherever it appears */
.navlinks a.nl-link,
.drawer a.nl-link{color:var(--gold-bright)}

/* ---- Homepage feature band --------------------------------- */
.nlb{
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(205,162,78,.055),rgba(205,162,78,.014));
  padding:clamp(48px,5.5vw,78px) 0;
}
.nlb-in{display:flex; flex-wrap:wrap; gap:clamp(30px,4.5vw,60px); align-items:center; justify-content:center}
.nlb-cover{flex:0 1 250px; max-width:270px; margin:0}
.nlb-cover img{
  display:block; width:100%; height:auto;
  border:1px solid rgba(205,162,78,.46); border-radius:4px;
  box-shadow:0 22px 54px rgba(0,0,0,.62);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.nlb-cover a:hover img,.nlb-cover a:focus-visible img{
  transform:translateY(-4px); box-shadow:0 28px 64px rgba(0,0,0,.7)
}
.nlb-body{flex:1 1 380px; max-width:600px}
.nlb-body h2{margin:0}
.nlb-sub{
  font-family:var(--body); font-style:italic; font-size:19px; line-height:1.55;
  color:var(--gold-bright); margin:20px 0 0; text-wrap:balance;
}

/* ---- Newsletter page --------------------------------------- */
.nl-feature{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(400px,1fr));
  gap:clamp(30px,4vw,56px); align-items:stretch;
}
.nl-issue{
  border:1px solid var(--line-2); border-radius:6px; background:var(--panel);
  padding:clamp(24px,3vw,38px); display:flex; flex-direction:column; gap:26px;
}
/* both cards run to the same depth and their buttons sit on one line */
.nl-issue > .nl-body{display:flex; flex-direction:column; flex:1 1 auto}
.nl-issue > .nl-body > .btn-row{margin-top:auto}
.nl-cover{margin:0}
.nl-cover img{
  display:block; width:100%; height:auto;
  border:1px solid rgba(205,162,78,.44); border-radius:4px;
  box-shadow:0 22px 54px rgba(0,0,0,.62);
}
.nl-flag{
  font-family:var(--util); font-size:13px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
  margin:0 0 14px;
}
.nl-issue h3{
  font-family:var(--disp); font-weight:400; font-size:clamp(27px,2.6vw,34px);
  line-height:1.22; margin:0 0 12px; color:var(--text); text-wrap:balance;
}
.nl-sub{
  font-family:var(--body); font-style:italic; font-size:19px; line-height:1.5;
  color:var(--gold-bright); margin:0 0 22px; text-wrap:balance;
}
.nl-meta{
  font-family:var(--util); font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin:0 0 22px;
}
.nl-inside{list-style:none; margin:0 0 30px; padding:0; border-top:1px solid var(--line)}
.nl-inside li{
  display:flex; gap:16px; align-items:baseline; padding:13px 0;
  border-bottom:1px solid var(--line); font-size:17px; line-height:1.45;
  color:var(--text-2); text-wrap:pretty;
}
.nl-inside .ltr{
  font-family:var(--disp); font-size:19px; color:var(--gold-bright);
  flex:0 0 auto; min-width:18px;
}

/* Archive */
.nl-year{
  font-family:var(--util); font-size:14px; font-weight:600; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold); margin:56px 0 22px;
  padding-bottom:12px; border-bottom:1px solid var(--line-2);
}
.nl-year:first-of-type{margin-top:8px}
.nl-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:18px}
.nl-past{
  display:flex; align-items:center; gap:20px; text-decoration:none; color:inherit;
  border:1px solid var(--line-2); border-radius:5px; background:var(--panel);
  padding:20px 22px;
  transition:border-color .28s var(--ease), background .28s var(--ease), transform .28s var(--ease);
}
.nl-past:hover,.nl-past:focus-visible{
  border-color:var(--gold-bright); background:var(--panel-2); transform:translateY(-2px);
}
.nl-mark{
  flex:0 0 auto; width:56px; height:66px;
  border:1px solid rgba(205,162,78,.5); border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--disp); font-size:20px; color:var(--gold-bright);
  background:rgba(0,0,0,.34);
}
.nl-past b{
  display:block; font-family:var(--disp); font-weight:400; font-size:21px;
  color:var(--text); margin-bottom:5px; white-space:nowrap;
}
.nl-past .nl-kind{
  display:block; font-family:var(--util); font-size:12.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}

/* Subscription terms */
.nl-terms{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:26px;
  border:1px solid var(--line-2); border-radius:6px;
  padding:clamp(28px,3vw,42px); background:var(--panel); text-align:center;
}
.nl-terms div b{
  display:block; font-family:var(--disp); font-weight:400;
  font-size:clamp(30px,3.4vw,42px); color:var(--gold-bright);
  margin-bottom:12px; white-space:nowrap;
}
.nl-terms div span{
  font-family:var(--util); font-size:13px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-2); line-height:1.6;
}

@media (max-width:560px){
  .nl-feature{grid-template-columns:1fr}
  .nl-issue{padding:22px}
  .nl-past{padding:17px 18px; gap:16px}
  .nl-mark{width:48px; height:58px; font-size:18px}
}