/* Noah adverts: the lime and teal layer (30 Sep 2026, simplified 1 Oct 2026).
   Lime is Noah Wire. Teal is Noah Predict. Every advert is a hero: a big
   headline, one line, one black button. Loaded by /static/promo/adverts.js on
   every page and by the two advert iframes in /ads/noah-wire/. The hero rules
   sit on .promo (the front page band class, styled in style.css) so a hero in
   an article or the rail looks exactly like one on the front page.
   Source: ~/noah-news/static/promo/adverts.css. Manual: ADVERTISING_UNITS.md section 9. */

@font-face{font-family:"NoahInter";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"NoahPlex";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ibm-plex-mono-500.woff2") format("woff2")}

/* 1. the slug: a lime line in the space above the article's eyebrow. Absolutely
      placed in padding that is already there, so nothing on the page moves. */
.nad.nad-slug{position:absolute;left:0;right:0;top:0;height:30px;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:0 22px;background:#88FF82;color:#141414 !important;text-decoration:none !important;box-sizing:border-box;
  font-family:"NoahPlex",ui-monospace,Menlo,monospace;font-weight:500;font-size:9.5px;line-height:1;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;overflow:hidden}
.nad.nad-slug .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#FF7EC4;margin-right:7px;vertical-align:0}
@media (min-width:641px){.nad.nad-slug{top:13px;padding:0 14px;border-radius:3px}}

/* 2. the hero: front page bands, article bands, the rail */
.promo.nad-hero{position:relative;overflow:hidden;background:#017288;color:#fff;border:0;margin:0;font-family:"NoahInter","Inter",system-ui,sans-serif;text-align:left}
.promo.nad-hero *{box-sizing:border-box}
.promo.nad-hero .promo-inner{display:flex;flex-direction:column;justify-content:flex-end;min-height:300px;position:relative;max-width:1440px;margin:0 auto;padding:44px var(--pad,24px) 38px}
.promo.nad-hero .nad-hero-h{font-family:"NoahInter","Inter",system-ui,sans-serif;font-weight:300;font-size:clamp(46px,7.6vw,116px);letter-spacing:-.05em;line-height:.92;color:#fff;margin:0 0 16px;max-width:13ch;text-wrap:balance}
.promo.nad-hero .nad-hero-h b{font-weight:300;color:#88FF82}
.promo.nad-hero .nad-hero-h i{font-style:normal;letter-spacing:-.04em}
.promo.nad-hero .nad-hero-wm{font-size:clamp(64px,11.5vw,172px);letter-spacing:-.055em;line-height:.9;max-width:none;white-space:nowrap}
.promo.nad-hero .nad-hero-p{font-family:"NoahInter","Inter",system-ui,sans-serif;font-weight:500;font-size:clamp(16px,1.5vw,21px);line-height:1.35;color:#fff;max-width:62ch;margin:0;letter-spacing:-.01em;font-style:normal}
.promo.nad-hero .nad-hero-btn{position:absolute;top:44px;right:var(--pad,24px);display:inline-flex;align-items:center;gap:14px;background:#141414;color:#fff !important;border-radius:999px;padding:22px 34px;
  font-family:"NoahPlex",ui-monospace,Menlo,monospace;font-weight:500;font-size:17px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none !important;white-space:nowrap;border:0;background-image:none;box-shadow:none}
.promo.nad-hero .nad-hero-btn:hover{background:#000}
/* the small print: for anyone who would rather talk to a person than connect or pay */
.promo.nad-hero .nad-hero-alt{position:absolute;top:122px;right:var(--pad,24px);font-family:"NoahInter","Inter",system-ui,sans-serif;font-weight:500;font-size:13px;letter-spacing:-.01em;color:#fff !important;opacity:.8;text-decoration:underline !important;text-underline-offset:3px;background:none;border:0;white-space:nowrap}
.promo.nad-hero .nad-hero-alt:hover{opacity:1}
.promo[data-promo="wire"].nad-hero .nad-hero-alt{color:#141414 !important}
.promo[data-promo="wire"].nad-hero{background:#88FF82;color:#141414}
.promo[data-promo="wire"].nad-hero .promo-media,.promo[data-promo="wire"].nad-hero .promo-scrim{display:none}
.promo[data-promo="wire"].nad-hero .nad-hero-h,.promo[data-promo="wire"].nad-hero .nad-hero-p{color:#141414}
@media (max-width:860px){
  .promo.nad-hero .promo-inner{min-height:0;padding:40px 20px 32px}
  .promo.nad-hero .nad-hero-btn{position:static;align-self:flex-start;margin-top:22px;padding:16px 24px;font-size:13px}
  .promo.nad-hero .nad-hero-alt{position:static;align-self:flex-start;margin-top:12px}
  .promo.nad-hero .nad-hero-h{font-size:46px;max-width:none}
  .promo.nad-hero .nad-hero-wm{font-size:62px}
}

/* 3. the same hero inside an article column (740px on a desk) */
.promo.nad-hero.nad-inart{margin:36px 0;border-radius:6px;clear:both;max-width:none}
.promo.nad-hero.nad-inart .promo-inner{min-height:0;padding:34px 28px 30px}
.promo.nad-hero.nad-inart .nad-hero-h{font-size:clamp(40px,6vw,60px);max-width:none;padding-right:210px}
.promo.nad-hero.nad-inart .nad-hero-wm{font-size:clamp(56px,8vw,84px)}
.promo.nad-hero.nad-inart .nad-hero-p{font-size:17px}
.promo.nad-hero.nad-inart .nad-hero-btn{top:30px;right:28px;padding:16px 24px;font-size:14px}
.promo.nad-hero.nad-inart .nad-hero-alt{top:92px;right:28px;font-size:12.5px}
@media (max-width:860px){.promo.nad-hero.nad-inart .nad-hero-h{padding-right:0}.promo.nad-hero.nad-inart .nad-hero-btn{position:static;margin-top:22px}.promo.nad-hero.nad-inart .nad-hero-alt{position:static;margin-top:12px}}
@media (max-width:640px){.promo.nad-hero.nad-inart{border-radius:0}.promo.nad-hero.nad-inart .promo-inner{padding:34px 20px 30px}}

/* 4. the same hero in the 300x600 rail iframe */
body.nad-frame{margin:0;background:transparent;overflow:hidden}
.promo.nad-hero.nad-inrail{width:300px;height:600px}
.promo.nad-hero.nad-inrail .promo-inner{min-height:600px;height:600px;padding:26px 22px 24px}
.promo.nad-hero.nad-inrail .nad-hero-h{font-size:44px;max-width:none}
.promo.nad-hero.nad-inrail .nad-hero-wm{font-size:60px}
.promo.nad-hero.nad-inrail .nad-hero-p{font-size:15.5px}
.promo.nad-hero.nad-inrail .nad-hero-btn{position:static;align-self:flex-start;margin-top:22px;padding:15px 22px;font-size:12.5px}
.promo.nad-hero.nad-inrail .nad-hero-alt{position:static;align-self:flex-start;margin-top:12px;font-size:12px}

/* 5. tiles, while a hero assembles */
.nad-asm > :not(.nad-shards){visibility:hidden}
.nad-shards{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.nad-shards > div{position:absolute;inset:0}
.nad-shards .nad-clone{position:absolute !important;left:0 !important;top:0 !important;right:auto !important;bottom:auto !important;width:100% !important;height:100% !important;margin:0 !important;transform:none !important;visibility:visible}
.nad-shards .nad-clone.promo{border:0}

/* 6. desk fronts on a phone. The billboard was hidden below 780px because the
      old unit was unreadable there; the lime one has its own phone layout. */
@media (max-width:780px){
  .desk-adband{display:block !important}
  .desk-adband .adframe{aspect-ratio:375 / 104 !important}
}