/* ==========================================================================
   PACT GLOBAL MEDIA — stylesheet
   Concept: a global press wire run by student & staff correspondents.
   Signature element: the "credential badge" — every byline is stamped
   like a UN press-pool ID card, distinguishing STAFF from STUDENT corps.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Playfair+Display:wght@700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---- color: named tokens ---- */
  --f-logo:    'Playfair Display', Georgia, serif; /* the wordmark's own classic serif — bolder, crisper contrast than the editorial display face */
  --pact-blue:     #0053cb;   /* brand blue, resampled again from the finalized PACT mark */
  --pact-blue-deep:#003e98;   /* raised panels / hover on brand blue */
  --cable-navy:    #0c0f14;   /* near-black "banner" ground — hero/ticker/footer; blue is now an accent, not a fill */
  --cable-navy-2:  #1f2636;   /* raised dark panel (world cards) — a step up from cable-navy, not blue */
  --bulletin-fog:  #e9e6db;   /* light ground, cool-bone not cream */
  --bulletin-white:#f7f5ee;   /* lightest surface */
  --wire-amber:    var(--pact-blue); /* amber retired — logo is black/white/blue only; aliased to brand blue */
  --wire-amber-dim:#2b6fb0a8;  /* translucent blue, replaces the old dim-amber stamp fill */
  --cadet-teal:    #2c7a68;   /* student-corps identifier */
  --signal-red:    #b23a2f;   /* breaking / urgent only */
  --ink:           #14213a;   /* body text on light */
  --ink-soft:      #4c5670;   /* secondary text on light */
  --paper-ink:     #eef0ea;   /* text on dark */
  --paper-ink-soft:#c4d3ef;   /* secondary text on banner ground */
  --hairline:      #d8d3c2;   /* rule on light */
  --hairline-dark: rgba(255,255,255,0.22);   /* rule on banner ground */

  /* ---- type ---- */
  --f-display: 'Fraunces', Georgia, serif;
  --f-body:    'Inter', -apple-system, sans-serif;
  --f-mono:    'Space Grotesk', 'Inter', -apple-system, sans-serif;

  --radius: 3px;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  font-family: var(--f-body);
  background: var(--bulletin-white);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 28px; }

:focus-visible {
  outline: 2px solid var(--wire-amber);
  outline-offset: 3px;
}

/* ---- eyebrow / mono labels ---- */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wire-amber);
  font-weight: 500;
}
.eyebrow.on-dark { color: var(--wire-amber); }

/* ==========================================================================
   TICKER — live wire strip
   ========================================================================== */
.ticker {
  background: #fff;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
  white-space: nowrap;
  height: 38px;
  display: flex;
  align-items: center;
}
.ticker__label {
  flex: none;
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  background: #c0202c;
  color: #fff;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  font-weight: 700;
}
.ticker__live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  flex: none;
  animation: ticker-pulse 1.6s ease-in-out infinite;
}
@keyframes ticker-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}
.ticker__track-wrap {
  overflow: hidden;
  flex: 1;
  position: relative;
  height: 100%;
}
.ticker__track {
  position: relative;
  height: 100%;
  font-family: var(--f-body);
  font-size: 13.5px;
  letter-spacing: 0.01em;
}
.ticker__track span, .ticker__track a {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  display: flex;
  align-items: center;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 14px;
  opacity: 0;
  transform: translateY(-14px);
  visibility: hidden;
  transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s;
}
.ticker__track span.is-active, .ticker__track a.is-active {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition: opacity .4s ease, transform .4s ease;
}
.ticker__track span strong, .ticker__track a strong { color: var(--pact-blue); font-weight: 700; letter-spacing: 0.03em; margin-right: 8px; }
.ticker__track a:hover { color: var(--pact-blue); }
.ticker__track a:hover strong { text-decoration: underline; }

/* ==========================================================================
   HEADER / MASTHEAD
   ========================================================================== */
.masthead {
  background: var(--bulletin-white);
  border-bottom: 2px solid var(--ink);
  position: sticky;
  top: 0;
  z-index: 40;
}
.masthead__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0 14px;
  gap: 24px;
  flex-wrap: wrap;
  row-gap: 10px;
}
.auth-back-link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  flex: none;
}
.wordmark {
  font-size: 31px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.wordmark--img { gap: 0; }
.wordmark__img {
  height: 50px;
  width: auto;
  display: block;
}
.wordmark__column {
  width: 0.46em;
  height: 0.86em;
  flex: none;
  color: var(--pact-blue);
}
.wordmark__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 4px;
}
.wordmark__serif {
  font-family: var(--f-logo);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--pact-blue);
}
.wordmark__sub {
  font-family: var(--f-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.32em;
  color: var(--ink);
}
/* legacy classes kept so any older markup still renders sanely */
.wordmark__accent {
  font-family: var(--f-display);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--pact-blue);
  margin-left: 1px;
}
.wordmark__un {
  font-family: var(--f-body);
  font-weight: 800;
  font-size: 0.56em;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--pact-blue);
  margin-left: -1px;
}
.wordmark__sans {
  font-family: var(--f-body);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.wordmark__dot {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 0.52em;
  color: var(--ink-soft);
  margin-left: 3px;
}
/* on brand-blue or black grounds, flip PACT + icon to white, subtitle to soft white */
.on-brand .wordmark__column { color: #fff; }
.on-brand .wordmark__serif { color: #fff; }
.on-brand .wordmark__sub { color: rgba(255,255,255,0.78); }
.on-brand .wordmark__accent { color: #9fc9f2; }
.on-brand .wordmark__un { color: #bcdcfb; }
.on-brand .wordmark__dot { color: rgba(255,255,255,0.7); }
.wordmark small {
  font-family: var(--f-display);
  font-size: 0.52em;
  letter-spacing: 0;
  color: var(--ink-soft);
  font-weight: 400;
  text-transform: none;
}

/* ==========================================================================
   BRAND LOCKUP — wordmark + tagline, used where there's room to let the
   mark breathe (footers, big moments). "Global Media" now lives in the
   wordmark's own subtitle line, so this just adds the tagline beneath it.
   ========================================================================== */
.brand-lockup {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.brand-lockup__tagline {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-ink-soft);
}
.brand-lockup__tagline .tagline__sep { margin: 0 7px; opacity: 0.5; }
.brand-lockup__tagline .tagline__accent { color: #9fc9f2; font-weight: 700; }
.nav {
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav__links {
  display: flex;
  gap: 26px;
  font-size: 14px;
  font-weight: 600;
}
.nav__links a {
  position: relative;
  padding-bottom: 4px;
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--wire-amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__cta {
  font-family: var(--f-body);
  font-size: 13.5px;
  border: 1.5px solid var(--ink);
  padding: 8px 14px;
  border-radius: var(--radius);
  font-weight: 700;
  white-space: nowrap;
}
.nav__cta:hover { background: var(--ink); color: var(--bulletin-white); }
.nav__cta--blue { border-color: var(--pact-blue); color: var(--pact-blue); }
.nav__cta--blue:hover { background: var(--pact-blue); border-color: var(--pact-blue); color: #fff; }

/* ---- auth cluster: Sign in / Sign up, top right ---- */
.nav__auth {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 20px;
  border-left: 1px solid var(--hairline);
}
.nav__signin {
  font-family: var(--f-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}
.nav__signin:hover { color: var(--ink); }
.nav__signup {
  font-family: var(--f-body);
  font-size: 13.5px;
  font-weight: 700;
  background: var(--pact-blue);
  color: #fff;
  padding: 9px 16px;
  border-radius: var(--radius);
  white-space: nowrap;
}
.nav__signup:hover { background: var(--pact-blue-deep); }

@media (max-width: 860px) {
  .nav__auth { display: none; }
}
.nav__toggle {
  display: none;
  background: none;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  width: 40px; height: 36px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: none;
  padding: 0;
  box-sizing: border-box;
}
.nav__toggle span {
  width: 18px; height: 2px; max-width: 18px;
  background: var(--ink); display: block; flex: none;
  transition: transform .25s ease, opacity .2s ease;
}
.nav__toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.masthead__strip {
  border-top: 1px solid var(--hairline);
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  padding: 7px 0;
  display: flex;
  justify-content: space-between;
}

@media (max-width: 860px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .masthead__strip .strip__right { display: none; }
  .search-box.is-open { position: absolute; left: 20px; right: 20px; top: 100%; margin-top: 6px; z-index: 20; }
  .search-box input { width: 100%; }
}

/* ---- category strip: the brand-blue banner, site-wide ---- */
.category-strip {
  background: linear-gradient(180deg, var(--pact-blue) 0%, var(--pact-blue-deep) 100%);
  border-bottom: 1px solid var(--pact-blue-deep);
  box-shadow: 0 2px 8px rgba(0,20,60,0.22);
  position: relative;
}
.category-strip__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 46px 12px 0;
  position: relative;
}
.category-strip__row:not(.is-expanded) a:nth-of-type(n+5) {
  display: none;
}
.category-strip__row.is-expanded {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 8px 10px;
  align-items: stretch;
}
.category-strip__row.is-expanded .category-strip__label { grid-column: 1 / -1; }
.category-strip__row.is-expanded a {
  justify-content: center;
  text-align: center;
}
.category-strip__more {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 8px;
  right: 0;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--pact-blue-deep);
  box-shadow: 0 1px 3px rgba(0,10,40,0.3);
  font-family: var(--f-mono);
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  z-index: 2;
  transition: transform .15s ease;
}
.category-strip__more:active { transform: scale(0.92); }
.category-strip__more[aria-expanded="true"] {
  background: var(--ink);
  color: #fff;
}
.category-strip__label {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.7);
  padding-right: 14px;
  margin-right: 4px;
  border-right: 1px solid rgba(255,255,255,0.25);
  flex: none;
}
.category-strip a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--pact-blue-deep);
  background: #fff;
  padding: 7px 13px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,10,40,0.18);
  transition: transform .15s ease, box-shadow .15s ease;
}
.category-strip a::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--pact-blue);
}
.category-strip a:active {
  transform: scale(0.95);
  box-shadow: 0 1px 1px rgba(0,10,40,0.15);
}
.category-strip a[aria-current="page"] {
  background: var(--ink);
  color: #fff;
}
.category-strip a[aria-current="page"]::before { background: #fff; }

.category-strip a[href*="cat=peace-security"]::before { background: #3a4a63; }
.category-strip a[href*="cat=economic-development"]::before { background: #a8791f; }
.category-strip a[href*="cat=humanitarian-aid"]::before { background: #d9622f; }
.category-strip a[href*="cat=climate-environment"]::before { background: #1f9d6b; }
.category-strip a[href*="cat=human-rights"]::before { background: #a8324a; }
.category-strip a[href*="cat=world"]::before { background: #3b6fe0; }
.category-strip a[href*="cat=women"]::before { background: #a83e8c; }
.category-strip a[href*="cat=law-crime"]::before { background: #5a6b85; }
.category-strip a[href*="cat=health"]::before { background: #2c7a68; }
.category-strip a[href*="cat=culture-education"]::before { background: #8a4fae; }
.category-strip a[href*="cat=sports"]::before { background: #1c7a3e; }
.category-strip a[href*="cat=travel-tourism"]::before { background: #c7742a; }
.category-strip a[href*="cat=sdgs"]::before { background: #1f7a5c; }
.category-strip a[href*="cat=migrants-refugees"]::before { background: #4a6fa5; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  background: var(--cable-navy);
  color: var(--paper-ink);
  padding: 64px 0 56px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline-dark);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 56px;
  align-items: start;
}
.hero__lead .eyebrow { margin-bottom: 14px; display: inline-block; }
.hero-slider { position: relative; min-height: 290px; }
.hero-slide {
  position: absolute;
  top: 0; left: 0; width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
}
.hero-slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .5s ease, transform .5s ease;
}
.hero-slider__dots { display: flex; gap: 8px; margin-top: 24px; }
.hero-slider__dot {
  width: 8px; height: 8px; border-radius: 50%;
  border: none; background: rgba(255,255,255,0.3);
  cursor: pointer; padding: 0;
  transition: background .2s ease, transform .2s ease;
}
.hero-slider__dot.is-active { background: #fff; transform: scale(1.2); }
.hero__headline {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
}
.hero__dek {
  font-size: 18px;
  color: var(--paper-ink-soft);
  max-width: 46ch;
  margin: 0 0 28px;
  line-height: 1.55;
}
.hero__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--paper-ink-soft);
}
.hero__side {
  display: flex;
  flex-direction: column;
  gap: 22px;
  border-left: 1px solid var(--hairline-dark);
  padding-left: 32px;
}
.hero .eyebrow { color: #fff; }
.hero__side h3 {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin: 0 0 4px;
}
.side-story { border-bottom: 1px solid var(--hairline-dark); padding-bottom: 18px; }
.side-story:last-child { border-bottom: none; padding-bottom: 0; }
.side-story__dateline {
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--paper-ink-soft);
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.side-story__title {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.28;
}
.side-story a:hover .side-story__title { color: #d8ecfc; }

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__side { border-left: none; padding-left: 0; border-top: 1px solid var(--hairline-dark); padding-top: 24px; }
}

/* ==========================================================================
   SECTION HEADERS
   ========================================================================== */
.section {
  padding: 64px 0;
  border-bottom: 1px solid var(--hairline);
}
.section--tint { background: var(--bulletin-fog); }
.section__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 36px;
  gap: 20px;
  flex-wrap: wrap;
}
.section__title {
  font-family: var(--f-display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 600;
  margin: 6px 0 0;
  letter-spacing: -0.01em;
}
.section__note {
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--ink-soft);
  max-width: 34ch;
  text-align: right;
}
.section__link {
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-weight: 600;
  border-bottom: 1.5px solid var(--wire-amber);
  padding-bottom: 2px;
}

/* ==========================================================================
   STORY CARDS — "The Desk" (staff wire)
   ========================================================================== */
.desk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.story-card {
  background: var(--bulletin-white);
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background .15s ease;
}
.story-card:hover { background: #fffdf7; }
.story-card__dateline {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}
.story-card__dateline .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--wire-amber); }
.category-chip {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--pact-blue-deep);
  background: rgba(0,83,203,0.1);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.story-card__title {
  font-family: var(--f-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.28;
}
.story-card:hover .story-card__title { color: var(--wire-amber); }
.story-card__dek { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }
.story-card__foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 980px) {
  .desk-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .desk-grid { grid-template-columns: 1fr; }
}

.desk-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  align-items: start;
}
.desk-layout .desk-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) {
  .desk-layout { grid-template-columns: 1fr; }
  .desk-layout .desk-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .desk-layout .desk-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CREDENTIAL BADGE — signature element
   Used for every byline: a stamped press-pool ID.
   ========================================================================== */
.credential {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-mono);
  font-size: 11px;
}
.credential__mark {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bulletin-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 12px;
  flex: none;
}
.credential__name { font-weight: 600; color: var(--ink); }
.credential__tag {
  padding: 2px 7px;
  border-radius: 2px;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  font-weight: 600;
  text-transform: uppercase;
}
.credential__tag--staff { background: rgba(20,33,58,0.08); color: var(--ink); }
.credential__tag--student { background: rgba(44,122,104,0.14); color: var(--cadet-teal); }
/* on the hero's dark ground, flip the byline to light so it doesn't vanish */
.hero .credential__name { color: #fff; }
.hero .credential__mark { background: rgba(255,255,255,0.16); color: #fff; border: 1px solid rgba(255,255,255,0.3); }
.hero .credential__tag--staff { background: rgba(255,255,255,0.16); color: #fff; }
.hero .credential__tag--student { background: rgba(255,255,255,0.16); color: #bfe6da; }

/* full badge card, used on Discover + article pages */
.badge-card {
  background: var(--bulletin-white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 22px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}
.badge-card::before {
  content: attr(data-stamp);
  position: absolute;
  top: 16px; right: -34px;
  transform: rotate(38deg);
  z-index: 3;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--cadet-teal);
  border: 1.5px solid var(--cadet-teal);
  padding: 2px 34px;
  opacity: 0.75;
}
.badge-card[data-corps="staff"]::before { color: var(--wire-amber-dim); border-color: var(--wire-amber); }
.badge-card__top { display: flex; align-items: center; gap: 12px; }
.badge-card__photo {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--pact-blue);
  color: var(--paper-ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-weight: 700; font-size: 18px;
  flex: none;
}
.badge-card__name { font-family: var(--f-display); font-weight: 600; font-size: 17px; }
.badge-card__school { font-size: 12.5px; color: var(--ink-soft); }
.badge-card__id {
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  border-top: 1px dashed var(--hairline);
  padding-top: 10px;
}
.badge-card__headline {
  font-family: var(--f-display);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.3;
}
.badge-card:hover .badge-card__headline { color: var(--cadet-teal); }
.badge-card[data-corps="staff"]:hover .badge-card__headline { color: var(--wire-amber); }

/* ==========================================================================
   DISCOVER — student correspondent grid
   ========================================================================== */
.discover-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 980px) { .discover-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .discover-grid { grid-template-columns: 1fr; } }

.filter-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.filter-btn {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 7px 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--bulletin-white);
  cursor: pointer;
  color: var(--ink-soft);
  font-weight: 500;
}
.filter-btn:hover { border-color: var(--cadet-teal); color: var(--cadet-teal); }
.filter-btn.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bulletin-white);
}
.results-heading {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--ink-soft);
  margin: -6px 0 22px;
}
.results-heading strong { color: var(--ink); font-weight: 700; }

/* ==========================================================================
   CALLOUT / MASTHEAD MISSION BAND
   ========================================================================== */
.mission {
  background: var(--ink);
  color: var(--paper-ink);
  padding: 70px 0;
}
.mission__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
}
.mission__text {
  font-family: var(--f-display);
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.35;
  font-weight: 500;
}
.mission__text em { color: var(--wire-amber); font-style: normal; }
.mission__note {
  font-family: var(--f-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--paper-ink-soft);
  margin-top: 16px;
}
.mission__note a { color: var(--wire-amber); text-decoration: underline; text-underline-offset: 2px; }
.mission__note a:hover { color: #fff; }
.mission__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-content: start;
}
.stat__num {
  font-family: var(--f-display);
  font-size: 34px;
  font-weight: 700;
  color: var(--wire-amber);
}
.stat__label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--paper-ink-soft);
  margin-top: 4px;
}
@media (max-width: 860px) { .mission__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--cable-navy);
  color: var(--paper-ink-soft);
  padding: 56px 0 26px;
  font-size: 13.5px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--hairline-dark);
}
.footer__brand .wordmark { color: var(--paper-ink); font-size: 24px; }
.footer__brand .wordmark__img { height: 38px; }
.footer__brand p { max-width: 34ch; line-height: 1.6; margin-top: 14px; }
.footer__contact { font-size: 13px; margin-top: 16px !important; }
.footer__contact a { color: var(--paper-ink); text-decoration: underline; text-underline-offset: 2px; }
.footer__contact a:hover { color: #fff; }
.footer h4 {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-ink);
  margin: 0 0 14px;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer ul a:hover { color: #fff; }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 22px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--paper-ink-soft);
  flex-wrap: wrap;
  gap: 12px;
}
.footer__bottom-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.footer__bottom-left a {
  color: var(--paper-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.22);
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}
.footer__bottom-left a:hover {
  color: #fff;
  border-color: #fff;
}
@media (max-width: 860px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   ARTICLE PAGE
   ========================================================================== */
.article-head {
  background: var(--bulletin-fog);
  padding: 48px 0 40px;
  border-bottom: 1px solid var(--hairline);
}
.article-head__cat { margin-bottom: 16px; }
.article-head__title {
  font-family: var(--f-display);
  font-size: clamp(30px, 4.4vw, 48px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  max-width: 22ch;
  margin: 0 0 18px;
}
.article-head__dek {
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 0 26px;
  line-height: 1.55;
}
.article-head__byline {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
}
.article-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 52px 28px 20px;
  font-size: 18px;
  line-height: 1.75;
}
.article-body p { margin: 0 0 22px; }
.article-body h2 {
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 600;
  margin: 40px 0 18px;
}
.article-body .drop::first-letter {
  font-family: var(--f-display);
  font-size: 64px;
  font-weight: 700;
  float: left;
  line-height: 0.8;
  margin: 6px 10px 0 0;
  color: var(--wire-amber);
}
.pull-quote {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  border-left: 3px solid var(--wire-amber);
  padding-left: 24px;
  margin: 40px 0;
  color: var(--ink);
}
.article-tags {
  max-width: 720px;
  margin: 30px auto 0;
  padding: 0 28px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tag-chip {
  font-family: var(--f-mono);
  font-size: 11px;
  padding: 5px 11px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink-soft);
}

/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */
.about-hero {
  padding: 64px 0 56px;
  border-bottom: 1px solid var(--hairline);
}
.about-hero--compact {
  padding: 32px 0 26px;
}
.about-hero--compact .about-hero__title {
  font-size: clamp(26px, 3.5vw, 36px);
  margin-top: 6px !important;
}
.about-hero--compact .about-hero__lede {
  font-size: 15px;
  margin-top: 10px;
  max-width: 68ch;
}
.about-hero__title {
  font-family: var(--f-display);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 600;
  max-width: 16ch;
  line-height: 1.06;
}
.about-hero__lede {
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 62ch;
  margin-top: 22px;
  line-height: 1.6;
}
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.pillar {
  background: var(--bulletin-white);
  padding: 30px 26px;
}
.pillar__num { font-family: var(--f-mono); color: var(--wire-amber); font-size: 12px; letter-spacing: .08em; }
.pillar h3 { font-family: var(--f-display); font-size: 20px; margin: 10px 0 10px; }
.pillar p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; margin: 0; }
@media (max-width: 860px) { .pillars { grid-template-columns: 1fr; } }

.masthead-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
@media (max-width: 980px) { .masthead-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .masthead-list { grid-template-columns: 1fr; } }

/* ==========================================================================
   MOBILE NAV DRAWER
   ========================================================================== */
.mobile-nav {
  display: flex;
  flex-direction: column;
  background: var(--bulletin-white);
  border-bottom: 1px solid transparent;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 0;
  transition: max-height .32s ease, opacity .22s ease, padding .32s ease;
}
.mobile-nav.is-open {
  display: flex;
  max-height: 600px;
  opacity: 1;
  padding: 8px 0 20px;
  border-bottom-color: var(--ink);
}
.mobile-nav a {
  font-family: var(--f-body);
  padding: 12px 28px;
  font-weight: 600;
  border-top: 1px solid var(--hairline);
}
.mobile-nav .nav__cta,
.mobile-nav .nav__signup { margin: 14px 28px 0; text-align: center; }
.mobile-nav .nav__signin { border-top: 1px solid var(--hairline); }

/* ==========================================================================
   AUTH PAGES — login / signup (kept plain & generic)
   ========================================================================== */
.auth-wrap {
  min-height: calc(100vh - 240px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 20px;
  background: var(--bulletin-fog);
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--bulletin-white);
  border: 1px solid var(--hairline);
  border-radius: calc(var(--radius) + 4px);
  padding: 36px 32px 32px;
  box-shadow: 0 1px 2px rgba(12,15,20,0.03), 0 16px 40px rgba(12,15,20,0.07);
}
.auth-card__head { text-align: center; margin-bottom: 26px; }
.auth-card__head .wordmark { justify-content: center; margin-bottom: 14px; display: inline-flex; }
.auth-card h1 {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 6px;
}
.auth-card__sub { font-size: 13.5px; color: var(--ink-soft); margin: 0; }
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ink);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--f-body);
  font-size: 14.5px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--pact-blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,83,203,0.15);
}
.field textarea { resize: vertical; min-height: 120px; font-family: var(--f-body); }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }
.field-radio-row { display: flex; gap: 10px; }
.field-radio {
  flex: 1;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  cursor: pointer;
}
.field-radio input { margin: 0; }
.field-radio:has(input:checked) { border-color: var(--pact-blue); background: rgba(0,83,203,0.06); }

.btn-primary {
  width: 100%;
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 700;
  background: var(--pact-blue);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 12px 16px;
  cursor: pointer;
}
.btn-primary:hover { background: var(--pact-blue-deep); }
.signup-section {
  display: none;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--bulletin-fog);
  padding: 16px 16px 4px;
  margin-bottom: 18px;
}
.signup-section.is-active { display: block; }
.signup-section__label {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pact-blue);
  font-weight: 700;
  margin-bottom: 12px;
}
.auth-card__foot {
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 18px;
}
.auth-card__foot a { color: var(--pact-blue); font-weight: 600; }
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-soft);
  font-size: 11px;
  font-family: var(--f-mono);
  letter-spacing: 0.06em;
  margin: 20px 0;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

/* ==========================================================================
   PUBLISH STUDIO — writer submission, split editor + live preview
   ========================================================================== */
.publish-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 28px 80px;
}
.publish-shell .field-row { flex-wrap: wrap; }
.publish-note {
  background: rgba(0,83,203,0.07);
  border: 1px solid rgba(0,83,203,0.25);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-bottom: 28px;
}
.publish-shell .about-hero,
.publish-shell .eyebrow { margin-bottom: 4px; }
.publish-note strong { color: var(--ink); }
.publish-note br + strong { display: inline-block; margin-top: 8px; }
.studio__submit-note {
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--ink-soft);
  margin: 10px 0 0;
}

.studio {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  align-items: start;
}
@media (max-width: 980px) {
  .studio { grid-template-columns: 1fr; }
}

.studio__form {
  background: var(--bulletin-white);
  border: 1px solid var(--hairline);
  border-radius: calc(var(--radius) + 4px);
  padding: 30px;
  box-shadow: 0 1px 2px rgba(12,15,20,0.03), 0 12px 32px rgba(12,15,20,0.05);
}

.toolbar {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  border: 1px solid var(--hairline);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--bulletin-fog);
  padding: 6px;
}
.toolbar button {
  width: 30px; height: 30px;
  border: none;
  background: transparent;
  border-radius: 3px;
  font-family: var(--f-display);
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toolbar button:hover { background: rgba(0,83,203,0.12); color: var(--pact-blue-deep); }
.toolbar button[data-cmd="bold"] { font-weight: 800; }
.toolbar button[data-cmd="italic"] { font-style: italic; }
.toolbar .toolbar__sep { width: 1px; background: var(--hairline); margin: 4px 4px; }
.studio__form .field textarea#pub-body {
  border-radius: 0 0 var(--radius) var(--radius);
  min-height: 260px;
  font-size: 15.5px;
  line-height: 1.6;
}
.studio__meta-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 6px;
}
.autosave-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.autosave-pill .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--cadet-teal); }

/* live preview pane — sticky, mirrors a real Discover badge-card */
.studio__preview {
  position: sticky;
  top: 90px;
}
.studio__preview-label {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.preview-card {
  background: var(--bulletin-white);
  border: 1px solid var(--hairline);
  border-radius: calc(var(--radius) + 4px);
  padding: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(12,15,20,0.03), 0 12px 32px rgba(12,15,20,0.05);
}
.preview-card__top { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.preview-card__photo {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--pact-blue); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--f-display); font-weight:700; font-size:15px; flex:none;
}
.preview-card__name { font-family: var(--f-display); font-weight:600; font-size:15px; }
.preview-card__school { font-size: 12px; color: var(--ink-soft); }
.preview-card__cat {
  font-family: var(--f-mono); font-size: 10px; letter-spacing:.06em; text-transform:uppercase;
  font-weight:600; color: var(--pact-blue-deep); background: rgba(0,83,203,0.1);
  padding: 3px 9px; border-radius: 999px; display:inline-block; margin-bottom:10px;
}
.preview-card__headline { font-family: var(--f-display); font-weight:600; font-size:18px; line-height:1.32; margin-bottom:8px; min-height: 24px; }
.preview-card__dek { font-size: 13px; color: var(--ink-soft); line-height:1.55; min-height:18px; }
.preview-card__placeholder { color: var(--hairline); }
.preview-card__status {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--bulletin-fog);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 12px;
}
.studio__editor-link {
  display: block;
  text-align: center;
  margin-top: 16px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--pact-blue);
}

.studio__checklist { margin-top: 18px; display:flex; flex-direction:column; gap:8px; }
.checklist-item {
  display:flex; align-items:center; gap:9px;
  font-size: 13px; color: var(--ink-soft);
}
.checklist-item .box {
  width:16px; height:16px; border-radius:4px; border: 1.5px solid var(--hairline);
  flex:none; display:flex; align-items:center; justify-content:center;
  font-size: 11px; color: transparent;
}
.checklist-item.is-done .box { background: var(--cadet-teal); border-color: var(--cadet-teal); color:#fff; }
.checklist-item.is-done { color: var(--ink); }

/* ==========================================================================
   WORLD BRIEFING — horizontal carousel of global updates (homepage)
   ========================================================================== */
.world {
  padding: 56px 0;
  background: var(--ink);
  color: var(--paper-ink);
  border-bottom: 1px solid var(--hairline-dark);
}
.world__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 28px;
  gap: 16px;
}
.world__title { font-family: var(--f-display); font-size: clamp(24px,3vw,32px); font-weight:600; margin: 6px 0 0; }
.world__controls { display:flex; gap:8px; }
.world__arrow {
  width: 36px; height:36px; border-radius:50%;
  border: 1px solid var(--hairline-dark);
  background: transparent; color: var(--paper-ink);
  cursor: pointer; font-size: 15px; display:flex; align-items:center; justify-content:center;
}
.world__arrow:hover { background: rgba(255,255,255,0.1); }
.world__track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.world__track::-webkit-scrollbar { display: none; }
.world-card {
  flex: none;
  width: 280px;
  scroll-snap-align: start;
  background: var(--cable-navy-2);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.world-card__flag {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: #cfe6fb;
}
.world-card__title {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.32;
}
.world-card:hover .world-card__title { color: #fff; text-decoration: underline; text-decoration-color: #cfe6fb; text-underline-offset: 3px; }
.world-card__meta {
  margin-top: auto;
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--paper-ink-soft);
}

/* ==========================================================================
   TRENDING WIDGET — sidebar module (homepage + article)
   ========================================================================== */
.trending {
  background: var(--bulletin-white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 22px;
}
.trending__title {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wire-amber);
  margin: 0 0 16px;
}
.trending__item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
}
.trending__item:first-child { border-top: none; padding-top: 0; }
.trending__num {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--hairline);
  flex: none;
  width: 22px;
}
.trending__title-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.trending a:hover .trending__title-text { color: var(--pact-blue-deep); }

/* ==========================================================================
   HEADER SEARCH
   ========================================================================== */
.nav__search {
  display: flex;
  align-items: center;
}
.search-toggle {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  font-size: 15px;
  color: var(--ink-soft);
  display: flex; align-items:center; justify-content:center;
}
.search-toggle:hover { background: var(--bulletin-fog); color: var(--ink); }
.search-box {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--bulletin-fog);
  border-radius: 999px;
  padding: 6px 6px 6px 14px;
}
.search-box.is-open { display: flex; }
.search-box input {
  border: none;
  background: transparent;
  font-family: var(--f-body);
  font-size: 13.5px;
  width: 170px;
  outline: none;
}
.search-box button {
  width: 26px; height: 26px;
  border: none;
  border-radius: 50%;
  background: var(--pact-blue);
  color: #fff;
  cursor: pointer;
  font-size: 11px;
}

/* live search results dropdown */
.search-results {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(20,33,58,0.14);
  z-index: 90;
  overflow: hidden;
  max-height: 360px;
  overflow-y: auto;
}
.search-results.is-open { display: block; }
.search-results__item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--hairline);
}
.search-results__item:last-child { border-bottom: none; }
.search-results__item:hover { background: var(--bulletin-fog); }
.search-results__cat {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pact-blue);
  font-weight: 600;
}
.search-results__title {
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
.search-results__empty {
  padding: 14px;
  font-size: 13px;
  color: var(--ink-soft);
}

/* ==========================================================================
   ARTICLE STICKY BAR — appears once you scroll past the byline
   ========================================================================== */
.article-stickybar {
  position: fixed;
  top: 0; left: 0; right: 0;
  transform: translateY(-100%);
  transition: transform .22s ease;
  background: var(--bulletin-white);
  border-bottom: 1px solid var(--hairline);
  z-index: 50;
  padding: 12px 0;
}
.article-stickybar.is-visible { transform: translateY(0); }
.article-stickybar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.article-stickybar__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.article-stickybar__share {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--ink);
  padding: 6px 12px;
  border-radius: var(--radius);
  white-space: nowrap;
}

/* ==========================================================================
   RESPONSIVE POLISH — final mobile pass. Phones get tighter rhythm,
   bigger tap targets, and no sticky/hover-only effects that don't
   translate to touch.
   ========================================================================== */
@media (max-width: 640px) {
  .wordmark { font-size: 24px; gap: 9px; }
  .wordmark__column { width: 0.42em; }
  .wordmark__img { height: 40px; }

  /* -- simplify: the desktop layout packs in a sidebar widget and a
     dense multi-row category strip. On a phone, that reads as clutter
     rather than structure, so trim it back to the core feed. -- */
  .trending { display: none; }
  .category-strip__label { display: none; }

  /* -- breathing room: less vertical padding, tighter side margins -- */
  .container { padding: 0 20px; }
  .section { padding: 44px 0; }
  .hero { padding: 44px 0 40px; }
  .world { padding: 40px 0; }
  .mission { padding: 48px 0; }
  .about-hero { padding: 40px 0 32px; }
  .article-head { padding: 36px 0 30px; }
  .article-body { padding: 36px 20px 10px; font-size: 16.5px; }
  .publish-shell { padding-left: 20px; padding-right: 20px; }

  /* -- ticker / category strip: smaller, but easier to tap -- */
  .ticker { height: 34px; }
  .ticker__label { padding: 0 10px; font-size: 10px; letter-spacing: 0.1em; }
  .ticker__track { font-size: 11.5px; }
  .ticker__track span, .ticker__track a { padding-left: 10px; }
  .category-strip__row { padding: 10px 0; gap: 8px; }
  .category-strip__label { margin-right: 4px; padding-right: 10px; }
  .category-strip a { font-size: 12px; padding: 9px 14px; }
  .category-strip__row.is-expanded {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .category-strip__row.is-expanded a {
    flex: none;
    padding: 8px 12px;
    font-size: 12px;
    justify-content: flex-start;
  }

  /* -- header: bigger, thumb-friendly menu button -- */
  .nav__toggle { width: 44px; height: 40px; }

  /* -- hero: tighter type scale so the fold isn't all headline -- */
  .hero__headline { font-size: clamp(28px, 8vw, 38px); }
  .hero__dek { font-size: 16px; }
  .hero__side { margin-top: 4px; }

  /* -- world briefing carousel -- */
  .world-card { width: 230px; padding: 16px; }
  .world__head { flex-wrap: wrap; row-gap: 12px; }

  /* -- cards: slightly shorter media plates so text isn't pushed down -- */
  .story-card .card-media { height: 108px; }
  .badge-card .card-media { height: 92px; }
  .card-media__mark { font-size: 36px; }

  /* -- filters: comfier tap targets, wrap cleanly -- */
  .filter-btn { padding: 9px 15px; font-size: 12.5px; }

  /* -- article: scale the drop cap and pull-quote down to fit -- */
  .article-body .drop::first-letter { font-size: 46px; margin: 4px 8px 0 0; }
  .pull-quote { font-size: 20px; padding-left: 18px; margin: 30px 0; }

  /* -- forms: stack side-by-side fields, roomier tap targets -- */
  .field-row { flex-direction: column; gap: 0; }
  .field-radio-row { flex-direction: column; }
  .auth-card { padding: 28px 22px 26px; }

  /* -- publish studio: single column, no sticky preview on touch -- */
  .studio__preview { position: static; }
  .toolbar button { width: 36px; height: 36px; font-size: 15px; }

  /* -- editor review queue: actions become a full-width row -- */
  .review-card { flex-direction: column; }
  .review-card__actions { flex-direction: row; width: 100%; }
  .review-btn { flex: 1; padding: 10px 12px; }

  /* -- footer: single column reads better than a cramped 2-up -- */
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer__bottom { flex-direction: column; gap: 10px; text-align: center; }
  .footer__bottom-left { justify-content: center; }

  /* -- misc: no hover-only affordances on touch -- */
  .article-stickybar__share span { display: none; }
  .world-card:hover, .story-card:hover, .badge-card:hover {
    transform: none; /* avoid a "stuck hover" look after tapping */
  }
}

@media (max-width: 640px) {
  .auth-back-link__full { display: none; }
  .auth-masthead__row { flex-wrap: nowrap; gap: 10px; }
  .auth-masthead__row .wordmark__img { height: 34px; }
  .auth-back-link { font-size: 13px; white-space: nowrap; }
}

@media (max-width: 420px) {
  .wordmark { font-size: 20px; }
  .wordmark__img { height: 32px; }
  .hero__headline { font-size: clamp(26px, 8vw, 32px); }
  .mission__stats { grid-template-columns: 1fr 1fr; gap: 16px; }
  .stat__num { font-size: 28px; }
}

/* ==========================================================================
   CARD MEDIA — category-coded gradient plates with a monogram + shine sweep
   The signature "editorial tile" that gives every card visual weight.
   ========================================================================== */
.card-media {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(135deg, #48566f, #2b3648); /* fallback */
}
.story-card .card-media { height: 132px; margin: -26px -24px 18px; }
.badge-card .card-media  { height: 104px; margin: -22px -22px 14px; border-radius: var(--radius) var(--radius) 0 0; }
.card-media__mark {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 46px;
  line-height: 1;
  color: rgba(255,255,255,0.24);
  letter-spacing: -0.01em;
  padding: 8px 12px;
  user-select: none;
}
.card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.32) 50%, transparent 58%);
  transform: translateX(-130%);
  transition: transform .75s ease;
}
.story-card:hover .card-media::after,
.badge-card:hover .card-media::after,
.preview-card:hover .card-media::after { transform: translateX(130%); }

[data-category="world"] .card-media, [data-filter-target="world"] .card-media {
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 7px), linear-gradient(135deg, #3b95e5, #6a3fd6);
}
[data-category="sports"] .card-media, [data-filter-target="sports"] .card-media {
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 7px), linear-gradient(135deg, #1c7a3e, #6fcf7a);
}
[data-category="travel-tourism"] .card-media, [data-filter-target="travel-tourism"] .card-media {
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 7px), linear-gradient(135deg, #c7742a, #f2c14e);
}
[data-category="peace-security"] .card-media, [data-filter-target="peace-security"] .card-media {
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 7px), linear-gradient(135deg, #3a4a63, #6b8cae);
}
[data-category="economic-development"] .card-media, [data-filter-target="economic-development"] .card-media {
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 7px), linear-gradient(135deg, #a8791f, #e8b84f);
}
[data-category="humanitarian-aid"] .card-media, [data-filter-target="humanitarian-aid"] .card-media {
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 7px), linear-gradient(135deg, #d9622f, #f2a03d);
}
[data-category="climate-environment"] .card-media, [data-filter-target="climate-environment"] .card-media {
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 7px), linear-gradient(135deg, #1f9d6b, #34c98f);
}
[data-category="human-rights"] .card-media, [data-filter-target="human-rights"] .card-media {
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 7px), linear-gradient(135deg, #a8324a, #e0798f);
}
[data-category="women"] .card-media, [data-filter-target="women"] .card-media {
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 7px), linear-gradient(135deg, #a83e8c, #d97ab8);
}
[data-category="law-crime"] .card-media, [data-filter-target="law-crime"] .card-media {
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 7px), linear-gradient(135deg, #3a4a63, #6b7c99);
}
[data-category="health"] .card-media, [data-filter-target="health"] .card-media {
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 7px), linear-gradient(135deg, #2c7a68, #57b39a);
}
[data-category="culture-education"] .card-media, [data-filter-target="culture-education"] .card-media {
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 7px), linear-gradient(135deg, #8a4fae, #c874c9);
}
[data-category="sdgs"] .card-media, [data-filter-target="sdgs"] .card-media {
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 7px), linear-gradient(135deg, #1f7a5c, #4fae8a);
}
[data-category="migrants-refugees"] .card-media, [data-filter-target="migrants-refugees"] .card-media {
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 7px), linear-gradient(135deg, #4a6fa5, #7fa8d9);
}

/* ==========================================================================
   CARD MEDIA VARIETY — same category, different shade. Archive dispatches
   have no photos and never will, so the gradient plate IS the visual —
   without this, dozens of same-category cards read as one repeated tile.
   ========================================================================== */
.discover-grid .badge-card:nth-of-type(5n+1) .card-media { filter: hue-rotate(0deg) saturate(1); }
.discover-grid .badge-card:nth-of-type(5n+2) .card-media { filter: hue-rotate(24deg) saturate(1.15) brightness(1.03); }
.discover-grid .badge-card:nth-of-type(5n+3) .card-media { filter: hue-rotate(-18deg) saturate(0.9) brightness(0.97); }
.discover-grid .badge-card:nth-of-type(5n+4) .card-media { filter: hue-rotate(40deg) saturate(1.05); }
.discover-grid .badge-card:nth-of-type(5n)   .card-media { filter: hue-rotate(-32deg) saturate(1.1) brightness(1.05); }

/* ==========================================================================
   ELEVATION — hover lift for cards, tactile and premium
   ========================================================================== */
.story-card, .badge-card, .world-card {
  transition: transform .25s ease, box-shadow .25s ease;
}
/* higher specificity (type+class) so this wins over .reveal's transition
   shorthand for elements that carry both classes at once */
article.story-card, a.badge-card, div.badge-card, a.world-card {
  transition: transform .25s ease, box-shadow .25s ease, opacity .6s ease;
}
.story-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(20,33,58,0.10); position: relative; z-index: 2; }
.badge-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(20,33,58,0.10); }
.world-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(0,0,0,0.35); }

/* ==========================================================================
   SCROLL REVEAL — cascading fade/rise as sections enter the viewport
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   HERO DEPTH — ambient gradient wash behind the lead headline
   ========================================================================== */
.hero { position: relative; }
.hero::before {
  content: '';
  position: absolute;
  inset: -25%;
  background-image:
    radial-gradient(circle at 18% 28%, rgba(255,255,255,0.07), transparent 40%),
    radial-gradient(circle at 82% 75%, rgba(255,255,255,0.14), transparent 45%);
  animation: hero-drift 20s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hero-drift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-2%, 2%); }
}
.hero__grid { position: relative; z-index: 1; }

/* ==========================================================================
   READING PROGRESS + STICKY MASTHEAD ELEVATION
   ========================================================================== */
.reading-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--pact-blue), #8fc4f2);
  z-index: 80;
  transition: width .12s linear;
}
.masthead { transition: box-shadow .25s ease; }
.masthead.is-scrolled { box-shadow: 0 6px 22px rgba(20,33,58,0.09); }

/* ==========================================================================
   CUSTOM SCROLLBAR — brand-tinted, subtle
   ========================================================================== */
html { scrollbar-color: var(--pact-blue) var(--bulletin-fog); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bulletin-fog); }
::-webkit-scrollbar-thumb { background: var(--pact-blue); border-radius: 8px; border: 2px solid var(--bulletin-fog); }
::-webkit-scrollbar-thumb:hover { background: var(--pact-blue-deep); }

/* ==========================================================================
   NAV LINK UNDERLINE for category-strip active/hover (smoother sweep)
   ========================================================================== */
.category-strip a { transition: background .2s ease, color .2s ease; }

@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
}

/* ==========================================================================
   EDITOR REVIEW QUEUE — pending/approved dispatch cards
   ========================================================================== */
.queue-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--pact-blue);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 700;
  margin-left: 6px;
  vertical-align: middle;
}
.review-list { display: flex; flex-direction: column; gap: 14px; }
.review-empty { font-size: 14px; color: var(--ink-soft); padding: 10px 0; }
.review-card {
  background: var(--bulletin-white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 20px 22px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  flex-wrap: wrap;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.review-card:hover { box-shadow: 0 8px 24px rgba(12,15,20,0.06); border-color: rgba(0,83,203,0.3); }
.review-card__thumb {
  width: 92px;
  height: 92px;
  flex: none;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bulletin-fog);
}
.review-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.review-card__body { flex: 1; min-width: 220px; }
.review-card__meta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-soft);
}
.review-card__title { font-family: var(--f-display); font-weight: 600; font-size: 17px; margin-bottom: 6px; }
.review-card__dek { font-size: 14px; color: var(--ink-soft); margin-bottom: 8px; line-height: 1.5; }
.review-card__submitted { font-family: var(--f-mono); font-size: 10.5px; color: var(--hairline); }
.review-card__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: none;
}
.review-btn {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
  background: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.review-btn--approve { background: var(--pact-blue); color: #fff; border-color: var(--pact-blue); }
.review-btn--approve:hover { background: var(--pact-blue-deep); }
.review-btn--return:hover { border-color: var(--ink); color: var(--ink); }
.review-card__status-tag {
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
}
.review-card__status-tag--approved { background: rgba(44,122,104,0.14); color: var(--cadet-teal); }
.review-card__status-tag--returned { background: var(--bulletin-fog); color: var(--ink-soft); }
.review-card__status-tag--pending { background: rgba(0,83,203,0.12); color: var(--pact-blue); }
.nav__signout { cursor: pointer; }


/* ==========================================================================\n   RESPONSIVE NEWSROOM PATCH — Oct 2026\n   Keeps the masthead fully inside narrow phone viewports and adds a\n   desktop-only market snapshot to the white live-wire strip.\n   ========================================================================== */
html, body { max-width: 100%; overflow-x: hidden; }
.masthead__row { min-width: 0; }
.masthead__row > * { min-width: 0; }

.crypto-strip {
  flex: none;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 16px;
  border-left: 1px solid var(--hairline);
  background: #fff;
  font-family: var(--f-mono);
  font-size: 10.5px;
  white-space: nowrap;
  color: var(--ink-soft);
}
.crypto-strip__label {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.crypto-strip__coin { display: inline-flex; gap: 5px; align-items: baseline; }
.crypto-strip__coin strong { color: var(--ink); font-weight: 700; }
.crypto-strip__change.is-up { color: #18794e; }
.crypto-strip__change.is-down { color: var(--signal-red); }
.footer__descriptor { text-align: right; max-width: 36ch; line-height: 1.4; }

@media (max-width: 860px) {
  .crypto-strip { display: none !important; }
  .masthead__row { flex-wrap: nowrap; padding-top: 12px; padding-bottom: 12px; gap: 12px; }
  .masthead__row .wordmark { flex: 1 1 auto; overflow: hidden; }
  .masthead__row .wordmark__img { max-width: min(100%, 245px); height: auto; max-height: 44px; object-fit: contain; object-position: left center; }
  .nav { margin-left: auto; flex: none; gap: 8px; }
  .nav__search { flex: none; }
  .category-strip__row { padding-right: 44px; }
}

@media (max-width: 640px) {
  .container { width: 100%; max-width: 100%; padding-left: 16px; padding-right: 16px; }
  .masthead__row { padding-top: 10px; padding-bottom: 10px; }
  .masthead__row .wordmark__img { max-width: min(100%, 210px); max-height: 38px; }
  .hero { padding-top: 34px; }
  .hero-slider { min-height: 0; }
  .hero-slide { overflow-wrap: anywhere; }
  .hero__headline, .hero__dek, .side-story__title { overflow-wrap: anywhere; }
  .footer__descriptor { text-align: center; max-width: 100%; }
}

@media (max-width: 420px) {
  .masthead__row .wordmark__img { max-width: min(100%, 178px); max-height: 34px; }
  .nav__toggle { width: 40px; height: 38px; }
  .category-strip__row { padding-right: 40px; }
  .ticker__label { padding-left: 8px; padding-right: 8px; }
}

/* ========================================================================
   Persistent LIVE wire + masthead stack
   Keep the opening-state LIVE strip identical across Safari/Chrome/Edge
   and across desktop/mobile instead of allowing the ticker to scroll away.
   ======================================================================== */
.ticker {
  position: sticky;
  top: 0;
  z-index: 60;
  width: 100%;
  min-width: 0;
}
.masthead {
  top: 38px;
  z-index: 50;
}
.ticker__track-wrap,
.ticker__track {
  min-width: 0;
}

@media (max-width: 640px) {
  .ticker {
    position: sticky;
    top: 0;
    z-index: 60;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
  }
  .masthead { top: 34px; }
  .ticker__track-wrap { min-width: 0; overflow: hidden; }
  .ticker__track span,
  .ticker__track a {
    max-width: 100%;
    padding-right: 10px;
    text-overflow: ellipsis;
  }
}

/* ========================================================================
   HEADER / LIVE WIRE REFINEMENT — Oct 2026
   ======================================================================== */
@media (min-width: 861px) {
  .ticker { height: 42px; }
  .ticker__label { padding: 0 18px; font-size: 12px; }
  .ticker__track { font-size: 13px; }
  .crypto-strip {
    align-self: stretch;
    gap: 10px;
    padding: 0 18px;
    border-left: 1px solid #d8dde6;
    background: #f7f9fc;
    font-family: var(--f-body);
    font-size: 12px;
    font-weight: 650;
  }
  .crypto-strip__label {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-size: 9px;
    letter-spacing: .12em;
  }
  .crypto-strip__coin { gap: 4px; padding-left: 2px; }
  .crypto-strip__coin strong { color: var(--pact-blue); font-size: 11px; letter-spacing: .03em; }
  .crypto-strip__change { font-size: 10px; font-weight: 800; }
  .masthead { top: 42px; }
  .masthead__row { padding-top: 13px; padding-bottom: 11px; }
  .wordmark__img { height: 50px; }
}

@media (max-width: 640px) {
  .ticker { height: 38px; }
  .masthead { top: 38px; }
  .ticker__label {
    width: 82px;
    justify-content: center;
    padding: 0 8px;
    font-size: 11px;
    letter-spacing: .12em;
  }
  .ticker__track { font-size: 12px; }
  .ticker__track span,
  .ticker__track a { padding-left: 12px; padding-right: 12px; }

  /* True three-part mobile masthead: menu | centered logo | search */
  .masthead__row {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 8px;
    min-height: 76px;
    padding-top: 9px;
    padding-bottom: 9px;
  }
  .nav__toggle {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 0;
    justify-self: start;
  }
  .nav__toggle span { width: 23px; max-width: 23px; height: 2px; }
  .masthead__row .wordmark {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    overflow: visible;
    width: auto;
    flex: none;
  }
  .masthead__row .wordmark__img {
    display: block;
    width: auto;
    height: 48px;
    max-width: 150px;
    max-height: 48px;
    object-fit: contain;
    object-position: center;
  }
  .masthead__row .nav {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    margin: 0;
    width: 44px;
    display: flex;
    justify-content: flex-end;
  }
  .masthead__row .nav__search { width: 44px; display: flex; justify-content: center; }
  .masthead__row .search-toggle { width: 44px; height: 44px; display: grid; place-items: center; }
  .masthead__row .search-toggle svg { width: 22px; height: 22px; }
  .search-box.is-open { left: 16px; right: 16px; top: calc(100% - 2px); }

  .category-strip__row { padding-right: 16px; }
}

@media (max-width: 380px) {
  .masthead__row { grid-template-columns: 44px minmax(0,1fr) 44px; gap: 4px; }
  .masthead__row .wordmark__img { max-width: 132px; height: 44px; }
  .ticker__label { width: 74px; font-size: 10px; }
}

/* ========================================================================
   LIVE WIRE POLISH — mobile crawl + stronger desktop market board
   ======================================================================== */
@media (max-width: 640px) {
  .ticker__track { overflow: hidden; }
  .ticker__track span.is-active,
  .ticker__track a.is-active {
    width: max-content;
    min-width: 100%;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    padding-right: 28px;
    animation: pact-mobile-wire-crawl 9.5s linear both;
  }
  @keyframes pact-mobile-wire-crawl {
    0%, 18% { transform: translateX(0); }
    100% { transform: translateX(min(0px, calc(-100% + 100vw - 82px))); }
  }
}

@media (min-width: 861px) {
  .ticker { height: 46px; }
  .masthead { top: 46px; }
  .ticker__label { min-width: 86px; justify-content: center; font-size: 12px; }
  .ticker__track-wrap { flex: 1 1 auto; }
  .ticker__track { font-size: 13.5px; }
  .crypto-strip {
    flex: 0 0 auto;
    min-width: 445px;
    justify-content: center;
    gap: 16px;
    padding: 0 20px;
    background: #fff;
    border-left: 2px solid var(--pact-blue);
    box-shadow: -12px 0 22px rgba(16, 37, 68, .04);
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
  }
  .crypto-strip__label {
    height: 25px;
    padding: 0 10px;
    background: var(--pact-blue);
    font-size: 10px;
    font-weight: 800;
  }
  .crypto-strip__coin { gap: 6px; }
  .crypto-strip__coin strong { font-size: 12px; font-weight: 850; }
  .crypto-strip__price { color: var(--ink); font-weight: 750; }
  .crypto-strip__change { font-size: 11px; font-weight: 850; }
}

/* ========================================================================
   DESKTOP CATEGORY + WIRE SPACING / MOBILE LIVE FIT — Oct 2026
   ======================================================================== */
@media (min-width: 861px) {
  /* Show two more useful desks before the overflow menu on desktop only. */
  .category-strip__row:not(.is-expanded) a:nth-of-type(5),
  .category-strip__row:not(.is-expanded) a:nth-of-type(6) {
    display: inline-flex;
  }

  /* Give Also on the Wire a clean safe edge without shrinking its type. */
  .hero__side {
    padding-right: 42px;
  }
  .side-story__title {
    max-width: 100%;
    overflow-wrap: normal;
  }
}

@media (max-width: 640px) {
  /* Compact LIVE wire for phones; leave the rest of the mobile layout alone. */
  .ticker { height: 34px; }
  .masthead { top: 34px; }
  .ticker__label {
    width: 72px;
    min-width: 72px;
    padding: 0 7px;
    font-size: 10px;
    letter-spacing: .1em;
  }
  .ticker__live-dot { width: 6px; height: 6px; }
  .ticker__track { font-size: 10.75px; line-height: 1; }
  .ticker__track span.is-active,
  .ticker__track a.is-active {
    padding-left: 10px;
    padding-right: 22px;
    animation-duration: 11s;
  }
  .ticker__track span strong,
  .ticker__track a strong { margin-right: 6px; }
}

/* ========================================================================
   FINAL RESPONSIVE POLISH — Oct 1 2026
   Desktop: use the available category-strip width before the overflow menu.
   Mobile: keep the LIVE wire on one stable baseline with no vertical slide.
   ======================================================================== */
@media (min-width: 861px) {
  .category-strip__row:not(.is-expanded) a:nth-of-type(n+5) { display: inline-flex; }
  .category-strip__row:not(.is-expanded) a:nth-of-type(n+7) { display: none; }
  .category-strip__row { flex-wrap: nowrap; gap: 8px; }
}

@media (max-width: 860px) {
  /* Mobile intentionally keeps the original four primary categories. */
  .category-strip__row:not(.is-expanded) a:nth-of-type(n+5) { display: none; }
}

@media (max-width: 640px) {
  .ticker,
  .ticker__track-wrap,
  .ticker__track { height: 38px; }

  .ticker__track span,
  .ticker__track a,
  .ticker__track span.is-active,
  .ticker__track a.is-active {
    top: 0;
    bottom: auto;
    height: 38px;
    min-height: 38px;
    line-height: 1;
    font-size: 12px;
    transform: none !important;
    translate: none !important;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: opacity .28s ease, visibility 0s linear .28s;
    will-change: opacity;
  }
  .ticker__track span.is-active,
  .ticker__track a.is-active {
    transition: opacity .28s ease;
  }
  .ticker__track span strong,
  .ticker__track a strong {
    font-size: inherit;
    line-height: 1;
  }
}

/* Desktop wire breathing room — keep headlines clear of the right edge */
@media (min-width: 861px) {
  .hero__side {
    padding-right: 76px;
    min-width: 0;
  }
  #hero-side-list,
  .side-story,
  .side-story a {
    min-width: 0;
    max-width: 100%;
  }
  .side-story__title {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
  }
}

/* Desktop: keep Trending Now visible while The Desk feed scrolls. */
@media (min-width: 981px) {
  #desk .trending {
    position: sticky;
    top: 126px;
    align-self: start;
    max-height: calc(100vh - 150px);
    overflow: auto;
    scrollbar-width: none;
  }
  #desk .trending::-webkit-scrollbar { display: none; }
}

/* ========================================================================
   REQUESTED FINAL FIXES — mobile wire/categories/search + desktop trending
   ======================================================================== */
@media (max-width: 860px) {
  /* Keep the category overflow control fully inside the phone viewport. */
  .category-strip__row {
    padding-right: 64px !important;
    overflow: visible;
  }
  .category-strip__more {
    right: 16px !important;
    top: 10px;
  }
  .category-strip__row.is-expanded {
    padding-right: 64px !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 640px) {
  /* LIVE stays fixed; only the active headline crawls horizontally.
     No vertical transition and no font-size jump between stories. */
  .ticker,
  .ticker__track-wrap,
  .ticker__track { height: 38px !important; }
  .ticker__label {
    width: 76px !important;
    min-width: 76px !important;
    height: 38px;
    font-size: 10.5px !important;
  }
  .ticker__track-wrap { overflow: hidden !important; min-width: 0; }
  .ticker__track { position: relative; overflow: hidden !important; font-size: 12px !important; }
  .ticker__track span,
  .ticker__track a,
  .ticker__track span.is-active,
  .ticker__track a.is-active {
    position: absolute;
    inset: 0 auto auto 0;
    height: 38px !important;
    min-height: 38px !important;
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    display: flex;
    align-items: center;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 12px !important;
    line-height: 38px !important;
    padding: 0 28px 0 14px !important;
    transform: translateX(0);
    transition: opacity .22s ease !important;
  }
  .ticker__track span.is-active,
  .ticker__track a.is-active {
    animation: pact-phone-headline-crawl 12s linear both !important;
  }
  @keyframes pact-phone-headline-crawl {
    0%, 12% { transform: translateX(0); }
    100% { transform: translateX(calc(-100% + 100vw - 92px)); }
  }

  /* Phone search is a true full-screen newsroom search, not a desktop
     pill stretched beyond the viewport. */
  body.mobile-search-open { overflow: hidden !important; }
  .nav__search .search-box.is-open {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000 !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: max(18px, env(safe-area-inset-top)) 18px 24px !important;
    border-radius: 0 !important;
    background: var(--bulletin-white) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 46px !important;
    grid-template-rows: 52px minmax(0, 1fr) !important;
    gap: 14px 10px !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
  }
  .nav__search .search-box.is-open input {
    grid-column: 1;
    grid-row: 1;
    width: 100% !important;
    min-width: 0;
    height: 52px;
    padding: 0 18px;
    border: 1px solid var(--hairline) !important;
    border-radius: 999px;
    background: #fff !important;
    font-size: 16px !important;
    box-sizing: border-box;
  }
  .nav__search .search-box.is-open > button:not(.mobile-search-close) { display: none !important; }
  .mobile-search-close {
    grid-column: 2;
    grid-row: 1;
    width: 46px !important;
    height: 46px !important;
    align-self: center;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--ink) !important;
    color: #fff !important;
    font-size: 24px !important;
    line-height: 1 !important;
    cursor: pointer;
  }
  .nav__search .search-box.is-open .search-results {
    display: block;
    position: static !important;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-height: none !important;
    overflow-y: auto !important;
    border: 0;
    border-top: 1px solid var(--hairline);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    -webkit-overflow-scrolling: touch;
  }
  .nav__search .search-box.is-open .search-results:not(.is-open) { display: block; }
  .search-results__item { padding: 15px 4px; }
  .search-results__title { font-size: 16px; line-height: 1.35; }
}

@media (min-width: 981px) {
  /* Sticky is intentionally desktop-only. Keep it visible while the left
     Desk feed scrolls, and stop naturally at the end of the Desk section. */
  #desk,
  #desk > .container,
  #desk .desk-layout { overflow: visible !important; }
  #desk .desk-layout { align-items: start !important; }
  #desk .trending {
    position: sticky !important;
    top: 190px !important;
    align-self: start !important;
    height: fit-content;
    max-height: calc(100vh - 214px);
    overflow-y: auto;
    z-index: 3;
  }
}

/* ========================================================================
   PUBLISH-SAFE FINAL OVERRIDES — 2026-10-01
   Mobile only: preserve compact 2x2 categories, contained overflow control,
   stable horizontal LIVE crawl and full-screen search. Desktop: preserve
   market board and make Trending Now reliably sticky.
   ======================================================================== */
@media (max-width: 640px) {
  /* Collapsed category rail: two compact rows plus a dedicated overflow cell. */
  .category-strip__row:not(.is-expanded) {
    display: grid !important;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) 48px !important;
    grid-template-rows: auto auto !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 10px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .category-strip__row:not(.is-expanded) .category-strip__label { display: none !important; }
  .category-strip__row:not(.is-expanded) a { width: 100% !important; min-width: 0 !important; justify-content: center !important; white-space: nowrap !important; padding: 10px 10px !important; font-size: 12px !important; }
  .category-strip__row:not(.is-expanded) a:nth-of-type(1) { display:flex !important; grid-column:1; grid-row:1; }
  .category-strip__row:not(.is-expanded) a:nth-of-type(2) { display:flex !important; grid-column:2; grid-row:1; }
  .category-strip__row:not(.is-expanded) a:nth-of-type(3) { display:flex !important; grid-column:1; grid-row:2; }
  .category-strip__row:not(.is-expanded) a:nth-of-type(4) { display:flex !important; grid-column:2; grid-row:2; }
  .category-strip__row:not(.is-expanded) a:nth-of-type(n+5) { display:none !important; }
  .category-strip__row:not(.is-expanded) .category-strip__more {
    position: static !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
  }

  /* Expanded rail wraps safely inside the viewport; close control stays whole. */
  .category-strip__row.is-expanded {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 64px 10px 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  .category-strip__row.is-expanded a { display:flex !important; width:auto !important; max-width:100% !important; }
  .category-strip__row.is-expanded .category-strip__more {
    position: absolute !important;
    top: 10px !important;
    right: 16px !important;
    width: 42px !important;
    height: 42px !important;
  }

  /* One baseline, one font size. Only the headline moves horizontally. */
  .ticker, .ticker__track-wrap, .ticker__track { height: 38px !important; }
  .ticker__label { width: 76px !important; min-width:76px !important; height:38px !important; }
  .ticker__track-wrap { flex:1 1 auto !important; min-width:0 !important; overflow:hidden !important; }
  .ticker__track { position:relative !important; overflow:hidden !important; font-size:12px !important; }
  .ticker__track span, .ticker__track a,
  .ticker__track span.is-active, .ticker__track a.is-active {
    position:absolute !important; left:0 !important; top:0 !important;
    width:max-content !important; min-width:100% !important; max-width:none !important;
    height:38px !important; padding:0 24px 0 14px !important;
    display:flex !important; align-items:center !important;
    white-space:nowrap !important; line-height:38px !important;
    font-size:12px !important; overflow:visible !important;
    transform:translateX(0); transition:opacity .2s ease !important;
  }
  .ticker__track span.is-active, .ticker__track a.is-active {
    animation:pact-final-mobile-crawl 13s linear both !important;
  }
  @keyframes pact-final-mobile-crawl {
    0%, 10% { transform:translateX(0); }
    100% { transform:translateX(calc(-100% + 100vw - 90px)); }
  }
}

@media (min-width: 981px) {
  #desk, #desk > .container, #desk .desk-layout { overflow:visible !important; }
  #desk .desk-layout { align-items:start !important; }
  #desk .trending {
    position:sticky !important;
    top:150px !important;
    align-self:start !important;
    transform:none !important;
    opacity:1 !important;
    height:max-content !important;
    max-height:calc(100vh - 170px) !important;
    overflow:auto !important;
    z-index:4 !important;
  }
}


/* ========================================================================
   USER-REQUESTED FOUR FIXES ONLY — 2026-10-01
   ======================================================================== */
@media (max-width: 640px) {
  /* 1) Mobile LIVE: fixed LIVE label, one-line horizontal crawl only. */
  .ticker { display:flex !important; width:100% !important; overflow:hidden !important; }
  .ticker__label { flex:0 0 76px !important; position:relative !important; z-index:2 !important; }
  .ticker__track-wrap { flex:1 1 0 !important; width:auto !important; min-width:0 !important; overflow:hidden !important; }
  .ticker__track { width:100% !important; min-width:0 !important; overflow:hidden !important; }
  .ticker__track > span, .ticker__track > a,
  .ticker__track > span.is-active, .ticker__track > a.is-active {
    white-space:nowrap !important;
    width:max-content !important;
    min-width:max-content !important;
    max-width:none !important;
    font-size:12px !important;
    line-height:38px !important;
  }
  .ticker__track > span.is-active, .ticker__track > a.is-active {
    animation:pact-mobile-live-crawl-final 11.5s linear both !important;
  }
  @keyframes pact-mobile-live-crawl-final {
    0%, 8% { transform:translateX(0); }
    100% { transform:translateX(calc(-100% + 100vw - 92px)); }
  }

  /* 2) Mobile categories: compact 2x2 + fully-contained more/close control. */
  .category-strip { overflow:hidden !important; }
  .category-strip__row:not(.is-expanded) {
    grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) 46px !important;
    padding:10px 12px 10px 16px !important;
    column-gap:8px !important;
    row-gap:8px !important;
    overflow:hidden !important;
  }
  .category-strip__row:not(.is-expanded) .category-strip__more {
    width:42px !important; height:42px !important;
    justify-self:end !important; right:auto !important;
  }
  .category-strip__row.is-expanded {
    position:relative !important;
    padding:10px 66px 10px 16px !important;
    overflow:hidden !important;
  }
  .category-strip__row.is-expanded .category-strip__more {
    position:absolute !important; right:14px !important; top:10px !important;
    width:42px !important; height:42px !important;
  }

  /* 3) Mobile search: viewport-bound overlay with live per-keystroke results. */
  .nav__search .search-box.is-open {
    left:0 !important; right:0 !important; top:0 !important; bottom:0 !important;
    max-width:none !important; min-width:0 !important;
    overflow:hidden !important;
  }
  .nav__search .search-box.is-open .search-results {
    min-width:0 !important; max-width:100% !important; box-sizing:border-box !important;
  }
}

@media (min-width: 981px) {
  /* 4) Desktop Trending Now: sticky within The Desk; avoid overflow ancestors
     creating a competing scroll container. */
  html, body { overflow-x:clip !important; }
  #desk, #desk > .container, #desk .desk-layout, #desk .desk-grid {
    overflow:visible !important;
  }
  #desk .trending {
    position:-webkit-sticky !important;
    position:sticky !important;
    top:132px !important;
    align-self:start !important;
    transform:none !important;
    opacity:1 !important;
    max-height:calc(100vh - 156px) !important;
    overflow-y:auto !important;
  }
}
\n\n/* === FOUR FIXES — functional final override, mobile only === */
@media (max-width: 640px) {
  /* LIVE: one fixed-height line; only the active headline crawls horizontally. */
  .ticker { height:38px !important; overflow:hidden !important; display:flex !important; }
  .ticker__label { flex:0 0 76px !important; width:76px !important; height:38px !important; }
  .ticker__track-wrap { flex:1 1 0 !important; min-width:0 !important; height:38px !important; overflow:hidden !important; }
  .ticker__track { position:relative !important; width:100% !important; height:38px !important; overflow:hidden !important; font-size:12px !important; }
  .ticker__track > span, .ticker__track > a { display:none !important; }
  .ticker__track > span.is-active, .ticker__track > a.is-active {
    display:flex !important; position:absolute !important; inset:0 auto auto 0 !important;
    width:max-content !important; min-width:max-content !important; max-width:none !important;
    height:38px !important; align-items:center !important; padding:0 24px 0 14px !important;
    white-space:nowrap !important; overflow:visible !important; text-overflow:clip !important;
    font-size:12px !important; line-height:38px !important;
    animation:pact-fourfix-crawl 16.5s linear both !important;
  }
  @keyframes pact-fourfix-crawl {
    0%, 8% { transform:translate3d(0,0,0); }
    100% { transform:translate3d(calc(-100% + 100vw - 96px),0,0); }
  }

  /* Categories: exactly four visible items in a 2x2 block; overflow button owns a safe column. */
  .category-strip { width:100% !important; overflow:hidden !important; }
  .category-strip__row:not(.is-expanded) {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) 46px !important;
    grid-template-rows:42px 42px !important;
    gap:8px !important; width:100% !important; max-width:100% !important;
    padding:10px 12px 10px 14px !important; box-sizing:border-box !important; overflow:hidden !important;
  }
  .category-strip__row:not(.is-expanded) .category-strip__label { display:none !important; }
  .category-strip__row:not(.is-expanded) > a { display:none !important; min-width:0 !important; }
  .category-strip__row:not(.is-expanded) > a:nth-of-type(1),
  .category-strip__row:not(.is-expanded) > a:nth-of-type(2),
  .category-strip__row:not(.is-expanded) > a:nth-of-type(3),
  .category-strip__row:not(.is-expanded) > a:nth-of-type(4) {
    display:flex !important; width:100% !important; height:42px !important; box-sizing:border-box !important;
    align-items:center !important; justify-content:center !important; padding:0 8px !important;
    white-space:nowrap !important; font-size:11.5px !important;
  }
  .category-strip__row:not(.is-expanded) > a:nth-of-type(1){grid-column:1;grid-row:1}
  .category-strip__row:not(.is-expanded) > a:nth-of-type(2){grid-column:2;grid-row:1}
  .category-strip__row:not(.is-expanded) > a:nth-of-type(3){grid-column:1;grid-row:2}
  .category-strip__row:not(.is-expanded) > a:nth-of-type(4){grid-column:2;grid-row:2}
  .category-strip__row:not(.is-expanded) .category-strip__more {
    position:static !important; grid-column:3 !important; grid-row:1 !important;
    width:42px !important; min-width:42px !important; height:42px !important; margin:0 !important;
    justify-self:end !important; align-self:center !important; transform:none !important;
  }
  .category-strip__row.is-expanded {
    position:relative !important; display:flex !important; flex-wrap:wrap !important;
    width:100% !important; max-width:100% !important; box-sizing:border-box !important;
    padding:10px 66px 10px 14px !important; gap:8px !important; overflow:hidden !important;
  }
  .category-strip__row.is-expanded .category-strip__more {
    position:absolute !important; top:10px !important; right:12px !important;
    width:42px !important; min-width:42px !important; height:42px !important; transform:none !important;
  }

  /* Search: actual viewport overlay; no inherited desktop width/offset can clip it. */
  body.mobile-search-open { overflow:hidden !important; }
  .nav__search .search-box.is-open {
    position:fixed !important; inset:0 !important; width:100vw !important; max-width:100vw !important;
    height:100dvh !important; max-height:100dvh !important; box-sizing:border-box !important;
    margin:0 !important; padding:max(18px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom)) !important;
    border-radius:0 !important; background:#fff !important; z-index:10000 !important;
    display:grid !important; grid-template-columns:minmax(0,1fr) 46px !important;
    grid-template-rows:52px minmax(0,1fr) !important; gap:12px 10px !important;
    transform:none !important;
  }
  .nav__search .search-box.is-open input { grid-column:1 !important; grid-row:1 !important; width:100% !important; min-width:0 !important; height:52px !important; font-size:16px !important; }
  .nav__search .search-box.is-open .mobile-search-close { display:grid !important; place-items:center !important; grid-column:2 !important; grid-row:1 !important; width:46px !important; height:46px !important; margin:auto 0 !important; }
  .nav__search .search-box.is-open .search-results { grid-column:1/-1 !important; grid-row:2 !important; width:100% !important; min-width:0 !important; max-width:100% !important; overflow-y:auto !important; box-sizing:border-box !important; }
}

@media (min-width: 981px) {
  /* Trending Now remains in the viewport while its left-hand Desk feed scrolls. */
  #desk, #desk > .container, #desk .desk-layout, #desk .desk-grid { overflow:visible !important; }
  #desk .desk-layout { align-items:start !important; }
  #desk .trending { position:-webkit-sticky !important; position:sticky !important; top:132px !important; align-self:start !important; transform:none !important; opacity:1 !important; height:max-content !important; max-height:calc(100vh - 150px) !important; overflow-y:auto !important; z-index:5 !important; }
}


/* === OCT 1 SCREENSHOT FIXES: mobile search/live + desktop latest rail === */
@media (max-width: 640px) {
  /* Keep the LIVE wire visible above the full-screen search workspace. */
  .nav__search .search-box.is-open {
    top: 38px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: calc(100dvh - 38px) !important;
    max-height: calc(100dvh - 38px) !important;
    padding-top: max(18px, env(safe-area-inset-top)) !important;
  }

  /* Mobile only: every active latest headline enters from the right and crawls left. */
  .ticker__track > span.is-active,
  .ticker__track > a.is-active {
    left: 0 !important;
    right: auto !important;
    animation: pact-latest-mobile-crawl 17s linear both !important;
    will-change: transform !important;
  }
  @keyframes pact-latest-mobile-crawl {
    0%   { transform: translate3d(calc(100vw - 76px),0,0); }
    100% { transform: translate3d(-100%,0,0); }
  }
}

@media (min-width: 981px) {
  /* The complete rail sticks as one unit: no internal scroll that can hide its heading. */
  #desk .trending {
    top: 118px !important;
    max-height: none !important;
    overflow: visible !important;
  }
  #desk .trending__title {
    position: static !important;
    margin-bottom: 14px !important;
  }
}

/* Trending Now uses the same category identity/colors as the site's category strip. */
.trending__category {
  --trend-cat: var(--pact-blue);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 118px;
  min-width: 118px;
  font-family: var(--f-mono);
  font-size: 9px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.trending__category::before {
  content: '';
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--trend-cat);
}
.trending__category[data-cat="peace-security"] { --trend-cat:#3a4a63; }
.trending__category[data-cat="economic-development"] { --trend-cat:#a8791f; }
.trending__category[data-cat="humanitarian-aid"] { --trend-cat:#d9622f; }
.trending__category[data-cat="climate-environment"] { --trend-cat:#1f9d6b; }
.trending__category[data-cat="human-rights"] { --trend-cat:#a8324a; }
.trending__category[data-cat="world"] { --trend-cat:#3b6fe0; }
.trending__category[data-cat="women"] { --trend-cat:#a83e8c; }
.trending__category[data-cat="law-crime"] { --trend-cat:#5a6b85; }
.trending__category[data-cat="health"] { --trend-cat:#2c7a68; }
.trending__category[data-cat="culture-education"] { --trend-cat:#8a4fae; }
.trending__category[data-cat="sports"] { --trend-cat:#1c7a3e; }
.trending__category[data-cat="travel-tourism"] { --trend-cat:#c7742a; }
.trending__category[data-cat="sdgs"] { --trend-cat:#1f7a5c; }
.trending__category[data-cat="migrants-refugees"] { --trend-cat:#4a6fa5; }

/* === OCT 1 DESKTOP PHOTO POLISH: complete Desk row + Wire breathing room === */
@media (min-width: 861px) {
  /* Keep each wire headline comfortably separated from its rule and outer edge. */
  .hero__side { padding-right: 88px !important; gap: 18px !important; }
  #hero-side-list { display:flex; flex-direction:column; }
  #hero-side-list .side-story {
    padding-top: 13px !important;
    padding-bottom: 23px !important;
    margin: 0 !important;
  }
  #hero-side-list .side-story:first-child { padding-top: 5px !important; }
  #hero-side-list .side-story:last-child { padding-bottom: 10px !important; }
  #hero-side-list .side-story__dateline { margin-bottom: 9px !important; }
  #hero-side-list .side-story__title { line-height: 1.31 !important; }
}

/* ACTUAL FINAL — two publication layout, no ghost third cell */
@media (min-width: 641px) {
  .pillars {
    grid-template-columns: repeat(2, minmax(0, 430px)) !important;
    justify-content: center !important;
    width: 100% !important;
  }
}

/* ACTUAL FINAL — mobile LIVE/search separation */
@media (max-width: 640px) {
  .ticker { height: 54px !important; min-height: 54px !important; }
  .nav__search .search-box.is-open {
    position: fixed !important;
    top: 54px !important;
    height: calc(100dvh - 54px) !important;
    max-height: calc(100dvh - 54px) !important;
    z-index: 10020 !important;
  }
  .ticker__track {
    overflow: hidden !important;
    white-space: nowrap !important;
  }
}

/* ACTUAL FINAL — desktop Trending Now is one sticky unit */
@media (min-width: 981px) {
  #desk .desk-layout { align-items: start !important; overflow: visible !important; }
  #desk .trending {
    position: sticky !important;
    top: 150px !important;
    align-self: start !important;
    overflow: visible !important;
    max-height: none !important;
    transform: none !important;
    z-index: 20 !important;
  }
  #desk .trending__title {
    position: relative !important;
    top: auto !important;
    display: block !important;
    margin: 0 0 16px !important;
  }
  #desk .trending__item {
    align-items: flex-start !important;
  }
}

/* FINAL LIVE FIX — publications: exactly two centered cards, no beige side cells */
@media (min-width: 641px) {
  .pillars {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 430px)) !important;
    justify-content: center !important;
    width: min(100%, 900px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: transparent !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
  .pillars::before, .pillars::after { display:none !important; content:none !important; }
  .pillar { background: transparent !important; }
}

/* FINAL LIVE FIX — Trending Now: exactly four fully visible current stories */
@media (min-width: 981px) {
  #desk .trending {
    position: sticky !important;
    top: 118px !important;
    max-height: calc(100vh - 138px) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  #desk .trending__title { margin-bottom: 12px !important; }
  #desk .trending__item { padding-top: 14px !important; padding-bottom: 14px !important; }
  #desk .trending__item:nth-of-type(n+5) { display:none !important; }
  #desk .trending__category { line-height: 1.05 !important; }
}

/* FINAL LIVE FIX — mobile-only LIVE rail continuously scrolls horizontally */
@media (max-width: 640px) {
  .ticker { overflow:hidden !important; }
  .ticker__track {
    position: relative !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }
  .ticker__track > * {
    display: inline-block !important;
    width: max-content !important;
    min-width: max-content !important;
    white-space: nowrap !important;
    will-change: transform !important;
    animation: pactMobileLiveMarquee 18s linear infinite !important;
  }
  @keyframes pactMobileLiveMarquee {
    from { transform: translateX(100vw); }
    to   { transform: translateX(-100%); }
  }
}
@media (min-width: 641px) {
  .ticker__track > * { animation: none !important; transform: none !important; }
}

/* MOBILE TICKER FINAL — mobile only. Desktop ticker is intentionally unchanged. */
@media (max-width: 640px) {
  .ticker__track {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }
  .ticker__track [data-live-headline],
  .ticker__track .ticker__headline,
  .ticker__track .ticker__item {
    display: inline-block !important;
    width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    animation: pactMobileHeadlineScroll 16s linear infinite !important;
    will-change: transform !important;
  }
  @keyframes pactMobileHeadlineScroll {
    0%   { transform: translateX(100vw); }
    100% { transform: translateX(-100%); }
  }
}
@media (min-width: 641px) {
  .ticker__track [data-live-headline],
  .ticker__track .ticker__headline,
  .ticker__track .ticker__item {
    animation: none !important;
  }
}

/* MOBILE TICKER REAL FIX
   Actual markup is .ticker__track > a, so animate those real anchors via JS.
   Desktop remains untouched. */
@media (max-width: 640px) {
  .ticker { height:38px !important; overflow:hidden !important; display:flex !important; }
  .ticker__label { flex:0 0 76px !important; width:76px !important; height:38px !important; }
  .ticker__track-wrap {
    flex:1 1 0 !important; min-width:0 !important; height:38px !important;
    overflow:hidden !important; position:relative !important;
  }
  .ticker__track {
    position:relative !important; width:100% !important; height:38px !important;
    overflow:hidden !important;
  }
  .ticker__track > a,
  .ticker__track > span,
  .ticker__track > a.is-active,
  .ticker__track > span.is-active {
    animation:none !important;
    transform:none;
  }
}


/* MOBILE TICKER VISIBLE FIX — only mobile; desktop remains unchanged */
@media (max-width: 640px) {
  .ticker {
    display: grid !important;
    grid-template-columns: 76px minmax(0,1fr) !important;
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .ticker__label {
    display: flex !important;
    position: relative !important;
    z-index: 5 !important;
    width: 76px !important;
    height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .ticker__track-wrap {
    display: block !important;
    position: relative !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 38px !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .ticker__track {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
  .ticker__track > a,
  .ticker__track > span {
    height: 38px !important;
    line-height: 38px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    animation: none !important;
    visibility: visible !important;
  }
}

/* MOBILE TICKER WORKING — authoritative last rule; desktop is not changed. */
@media (max-width: 640px) {
  .ticker .ticker__track-wrap {
    overflow: hidden !important;
    position: relative !important;
  }
  .ticker .ticker__track {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 38px !important;
    overflow: hidden !important;
    transform: none !important;
    animation: none !important;
  }
  .ticker .ticker__track > a,
  .ticker .ticker__track > span {
    display: none !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    height: 38px !important;
    padding: 0 18px !important;
    align-items: center !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate3d(100vw,0,0) !important;
    animation: none !important;
  }
  .ticker .ticker__track > a.mobile-crawl-active,
  .ticker .ticker__track > span.mobile-crawl-active {
    display: inline-flex !important;
    animation: pactMobileCrawlWorking 15s linear forwards !important;
  }
  @keyframes pactMobileCrawlWorking {
    0%   { transform: translate3d(100vw,0,0); }
    100% { transform: translate3d(-100%,0,0); }
  }
}

/* MOBILE NEWS CRAWL — continuous scrolling headlines, mobile only. Desktop is not changed. */
@media (max-width: 640px) {
  .ticker .pgm-crawl {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .ticker .pgm-crawl__belt {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    width: max-content !important;
    white-space: nowrap !important;
    will-change: transform;
  }
  .ticker .pgm-crawl__item {
    display: inline-flex !important;
    align-items: center !important;
    height: 38px !important;
    padding: 0 0 0 16px !important;
    font-family: var(--f-body) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--ink) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    transform: none !important;
    animation: none !important;
  }
  .ticker .pgm-crawl__item strong {
    color: var(--pact-blue) !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    margin-right: 8px !important;
  }
  .ticker .pgm-crawl__sep {
    display: inline-block !important;
    padding: 0 0 0 16px !important;
    color: #c0202c !important;
    font-size: 12px !important;
  }
}

/* Live crypto prices: fixed-width digits so the strip does not shift as cents change (desktop). */
.crypto-strip__price, .crypto-strip__change { font-variant-numeric: tabular-nums; }

/* MASTHEAD — white bar with the blue PACT logo */
.masthead { background: #fff !important; }
/* Pages without the live wire (sign in / sign up): masthead sits at the very top. */
body:not(:has(.ticker)) .masthead { top: 0 !important; }

/* PG profile bubbles: round Pact Global Media badge */
.pg-badge { background: none !important; border: 0 !important; padding: 0 !important; overflow: hidden; }
.pg-badge img { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; }

/* ========================================================================
   SIGN IN / SIGN UP — site typography + colors, desktop and mobile
   Fraunces headlines, Space Grotesk kickers/labels, Inter text, brand blue.
   ======================================================================== */
body:has(.auth-wrap) { background: var(--bulletin-fog); }
.masthead:has(.auth-masthead__row) { border-bottom: 1px solid var(--hairline); box-shadow: 0 1px 0 rgba(20,33,58,.03); }

/* back link */
.auth-back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-body); font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
  color: var(--ink-soft); text-decoration: none;
  transition: color .15s ease;
}
.auth-back-link:hover { color: var(--pact-blue); }
.auth-back-link__arrow { display: none; }
.auth-back-link__icon { display: block; width: 16px; height: 16px; flex: none; transition: transform .15s ease; }
.auth-back-link:hover .auth-back-link__icon { transform: translateX(-2px); }
.auth-back-link:focus-visible { outline: 2px solid var(--pact-blue); outline-offset: 3px; border-radius: 4px; }

/* page + card */
.auth-wrap {
  min-height: calc(100vh - 80px);
  min-height: calc(100svh - 80px);
  padding: 64px 20px 72px;
  background: var(--bulletin-fog);
}
.auth-card {
  max-width: 440px !important;
  background: #fff;
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--pact-blue);
  border-radius: 4px;
  padding: 40px 40px 32px;
  box-shadow: 0 1px 2px rgba(20,33,58,.04), 0 18px 44px rgba(20,33,58,.08);
}
.auth-card__head { text-align: left; margin-bottom: 28px; }
.auth-card__kicker {
  font-family: var(--f-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--pact-blue); margin-bottom: 12px;
}
.auth-card h1 {
  font-family: var(--f-display); font-size: 31px; font-weight: 600;
  line-height: 1.12; letter-spacing: -0.015em; color: var(--ink);
  margin: 0 0 10px;
}
.auth-card__sub { font-family: var(--f-body); font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin: 0; }

/* fields */
.auth-card .field { margin-bottom: 18px; }
.auth-card .field-row { gap: 14px; }
.auth-card .field > label {
  display: block;
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 8px;
}
.auth-card .field__optional {
  font-family: var(--f-body); font-size: 12px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--ink-soft); margin-left: 4px;
}
.auth-card .field input:not([type="radio"]):not([type="checkbox"]),
.auth-card .field select {
  height: 48px; padding: 0 14px;
  font-family: var(--f-body); font-size: 15px; font-weight: 500; color: var(--ink);
  background: #fff; border: 1px solid #cfc9b6; border-radius: 4px;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none; appearance: none;
}
.auth-card .field input::placeholder { color: #9097a8; font-weight: 400; opacity: 1; }
.auth-card .field input:hover:not(:focus) { border-color: #b9b29b; }
.auth-card .field input:focus {
  border-color: var(--pact-blue); outline: none;
  box-shadow: 0 0 0 3px rgba(0,83,203,.14);
}
.auth-card .field input:-webkit-autofill,
.auth-card .field input:-webkit-autofill:hover,
.auth-card .field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  caret-color: var(--ink);
  transition: background-color 9999s ease-out 0s;
}

/* password show / hide */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 72px !important; }
.pw-toggle {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  height: 32px; padding: 0 10px; border: 0; border-radius: 4px; background: transparent;
  font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pact-blue); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pw-toggle:hover { background: rgba(0,83,203,.07); }
.pw-toggle:focus-visible { outline: 2px solid var(--pact-blue); outline-offset: 1px; }

/* reader / writer choice */
.auth-card .field-radio-row { flex-direction: row !important; gap: 10px; }
.auth-card .field-radio {
  flex: 1; display: flex; align-items: center; gap: 10px;
  min-height: 48px; margin: 0; padding: 0 14px;
  background: #fff; border: 1px solid #cfc9b6; border-radius: 4px;
  font-family: var(--f-body); font-size: 15px; font-weight: 600; color: var(--ink);
  letter-spacing: 0; text-transform: none;
  cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.auth-card .field-radio:hover { border-color: #b9b29b; }
.auth-card .field-radio input { width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--pact-blue); }
.auth-card .field-radio input:focus { outline: none; box-shadow: none; }
.auth-card .field-radio:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(0,83,203,.14); }
.auth-card .field-radio:has(input:checked) { border-color: var(--pact-blue); background: rgba(0,83,203,.05); color: var(--pact-blue); }

/* writer application panel */
.auth-card .signup-section {
  background: var(--bulletin-white); border: 1px solid var(--hairline);
  border-left: 3px solid var(--pact-blue); border-radius: 4px;
  padding: 18px 18px 4px; margin-bottom: 20px;
}
.auth-card .signup-section__label { font-size: 11px; letter-spacing: .14em; margin-bottom: 8px; }
.auth-card .signup-section__note { font-family: var(--f-body); font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 16px; }

/* primary button */
.auth-card .btn-primary {
  height: 50px; padding: 0 18px; margin-top: 6px;
  font-family: var(--f-body); font-size: 15px; font-weight: 700; letter-spacing: .005em;
  background: var(--pact-blue); color: #fff; border: 0; border-radius: 4px;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 6px 16px rgba(0,83,203,.18);
  transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
  -webkit-tap-highlight-color: transparent;
}
.auth-card .btn-primary:hover { background: var(--pact-blue-deep); }
.auth-card .btn-primary:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.auth-card .btn-primary:focus-visible { outline: 2px solid var(--pact-blue); outline-offset: 3px; }
.auth-card .btn-primary:disabled { background: #6f93d6; box-shadow: none; cursor: progress; }

/* messages */
.auth-card .form-error,
.auth-card .form-success {
  margin: 16px 0 0; padding: 11px 14px; border-radius: 4px;
  font-family: var(--f-body); font-size: 14px; font-weight: 600; line-height: 1.45;
}
.auth-card .form-error { background: #fbeeec; color: #9b2c22; border-left: 3px solid var(--signal-red); }
.auth-card .form-success { background: #e9f4f0; color: #1f5d4f; border-left: 3px solid var(--cadet-teal); }

/* footer line */
.auth-card__foot {
  margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--hairline);
  text-align: center; font-family: var(--f-body); font-size: 14px; color: var(--ink-soft);
}
.auth-card__foot a { color: var(--pact-blue); font-weight: 700; margin-left: 2px; text-decoration: none; }
.auth-card__foot a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- mobile ---- */
@media (max-width: 640px) {
  .masthead .auth-masthead__row {
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) 92px !important;
    align-items: center; gap: 6px !important;
    min-height: 64px; padding: 10px 14px !important;
  }
  .auth-masthead__row .wordmark { grid-column: 2; grid-row: 1; justify-self: center; }
  .auth-masthead__row .wordmark__img { height: 40px !important; max-height: 40px !important; max-width: 150px !important; width: auto; }
  .auth-masthead__row .auth-back-link {
    grid-column: 1; grid-row: 1; justify-self: start;
    gap: 3px; height: 38px; padding: 0 14px 0 9px;
    border: 1px solid var(--hairline); border-radius: 999px; background: #fff;
    color: var(--ink); font-size: 14px;
    box-shadow: 0 1px 2px rgba(20,33,58,.06);
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease, transform .15s ease;
  }
  .auth-masthead__row .auth-back-link:active { background: var(--bulletin-fog); transform: scale(.96); }
  .auth-back-link__full { display: none; }
  .auth-back-link__icon { width: 18px; height: 18px; }

  .auth-wrap { min-height: calc(100svh - 65px); align-items: flex-start; padding: 22px 14px 40px; }
  .auth-card { border-radius: 14px; border-top-width: 3px; padding: 28px 20px 24px; }
  .auth-card__head { margin-bottom: 24px; }
  .auth-card__kicker { margin-bottom: 10px; }
  .auth-card h1 { font-size: 27px; }
  .auth-card__sub { font-size: 15px; }
  .auth-card .field { margin-bottom: 16px; }
  .auth-card .field-row { flex-direction: row !important; gap: 10px; }
  .auth-card .field-row .field { min-width: 0; }
  .auth-card .field input:not([type="radio"]):not([type="checkbox"]),
  .auth-card .field select { height: 50px; font-size: 16px; border-radius: 10px; }
  .auth-card .field-radio { min-height: 50px; border-radius: 10px; }
  .auth-card .signup-section { border-radius: 10px; padding: 16px 14px 2px; }
  .auth-card .btn-primary { height: 52px; font-size: 16px; border-radius: 10px; }
  .auth-card .form-error, .auth-card .form-success { border-radius: 8px; }
  .auth-card__foot { font-size: 14.5px; margin-top: 22px; }
  .auth-card__foot a { display: inline-block; padding: 6px 2px; }
}
.auth-card h1 { text-wrap: balance; }
.auth-card__sub { text-wrap: pretty; }

/* Auth pages: white background + blue "Back" button (matches the Sign up button) */
body:has(.auth-wrap), .auth-wrap { background: #fff !important; }
.auth-masthead__row .auth-back-link {
  height: 40px; padding: 0 16px 0 12px; gap: 6px;
  background: var(--pact-blue); color: #fff !important;
  border: 0; border-radius: 4px;
  font-family: var(--f-body); font-size: 14px; font-weight: 700;
  box-shadow: none;
  transition: background .15s ease, transform .1s ease;
}
.auth-masthead__row .auth-back-link:hover { background: var(--pact-blue-deep); color: #fff; }
.auth-masthead__row .auth-back-link:hover .auth-back-link__icon { transform: translateX(-2px); }
.auth-masthead__row .auth-back-link:active { transform: translateY(1px); }
@media (max-width: 640px) {
  .auth-masthead__row .auth-back-link {
    height: 38px; padding: 0 14px 0 9px; gap: 3px;
    background: var(--pact-blue); border: 0; border-radius: 999px; box-shadow: none;
  }
  .auth-masthead__row .auth-back-link:active { background: var(--pact-blue-deep); transform: scale(.96); }
}
/* neutral greys now that the auth background is white */
.auth-card { border-color: #e2e5eb; border-top-color: var(--pact-blue); }
.auth-card .field input:not([type="radio"]):not([type="checkbox"]),
.auth-card .field select,
.auth-card .field-radio { border-color: #d3d8e0; }
.auth-card .field input:hover:not(:focus), .auth-card .field-radio:hover { border-color: #b4bccb; }
.auth-card .field-radio:has(input:checked) { border-color: var(--pact-blue); }
.auth-card .signup-section { background: #f6f8fb; border-color: #e2e5eb; border-left-color: var(--pact-blue); }
.auth-card__foot { border-top-color: #e6e9ee; }
.masthead:has(.auth-masthead__row) { border-bottom-color: #e6e9ee; }
@media (max-width: 640px) { .auth-masthead__row .auth-back-link { border-radius: 10px; } }
/* writer panel now holds only the note */
.auth-card .signup-section { padding-bottom: 16px; }
.auth-card .signup-section__note { margin-bottom: 0; }

/* ========================================================================
   MOBILE MENU — white panel, site typography, proper buttons (mobile only)
   ======================================================================== */
@media (max-width: 860px) {
  .mobile-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fff;
    border-top: 1px solid transparent;
  }
  .mobile-nav.is-open {
    display: grid;
    padding: 4px 0 22px;
    border-top-color: #e6e9ee;
    border-bottom: 1px solid #e6e9ee;
    box-shadow: 0 10px 24px rgba(20,33,58,.06);
  }
  .mobile-nav a {
    grid-column: 1 / -1;
    position: relative;
    display: flex; align-items: center;
    min-height: 56px;
    padding: 0 24px;
    font-family: var(--f-body); font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
    color: var(--ink);
    border-top: 0;
    border-bottom: 1px solid #eef0f3;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease, color .15s ease;
  }
  .mobile-nav a::after {
    content: '';
    position: absolute; right: 26px; top: 50%;
    width: 8px; height: 8px;
    border-top: 2px solid #b4bccb; border-right: 2px solid #b4bccb;
    transform: translateY(-50%) rotate(45deg);
  }
  .mobile-nav a:active { background: #f6f8fb; color: var(--pact-blue); }

  /* Sign in / Sign up as two buttons side by side */
  .mobile-nav .nav__signin,
  .mobile-nav .nav__signup {
    grid-column: auto;
    justify-content: center;
    min-height: 50px; height: 50px;
    margin: 20px 0 0;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 15.5px; font-weight: 700; letter-spacing: 0;
    text-align: center;
  }
  .mobile-nav .nav__signin::after,
  .mobile-nav .nav__signup::after { display: none; }
  .mobile-nav .nav__signin {
    margin-left: 24px; margin-right: 5px;
    background: #fff; color: var(--ink);
    border: 1px solid #d3d8e0;
  }
  .mobile-nav .nav__signin:active { background: #f6f8fb; color: var(--ink); }
  .mobile-nav .nav__signup {
    margin-left: 5px; margin-right: 24px;
    background: var(--pact-blue); color: #fff;
    border: 1px solid var(--pact-blue);
    box-shadow: 0 6px 16px rgba(0,83,203,.18);
  }
  .mobile-nav .nav__signup:active { background: var(--pact-blue-deep); color: #fff; }
  .mobile-nav .nav__signup.nav__signout {
    background: #fff; color: var(--signal-red);
    border-color: #d3d8e0; box-shadow: none;
  }
}

/* No scroll fade-in: everything is shown fully loaded */
.reveal { opacity: 1 !important; transform: none !important; }

/* ========================================================================
   NO BEIGE — light surfaces are white, rules are neutral grey (site-wide)
   ======================================================================== */
:root {
  --bulletin-white: #ffffff;
  --bulletin-fog:   #f4f6f9;
  --hairline:       #e3e6eb;
}
html, body { background: #fff; }

/* Mobile: no hairline gap between the blue category strip and the dark hero */
@media (max-width: 860px) {
  .masthead:has(.category-strip) { border-bottom: 0 !important; }
  .masthead .category-strip { position: relative; z-index: 1; margin-bottom: -1px; }
}

/* Mobile: keep the World Briefing track on its own layer so iOS always repaints it */
@media (max-width: 860px) {
  .world__track { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-overflow-scrolling: touch; }
  .world-card { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
}

/* Turn off typographic ligatures so "ff", "fi", "fl" render as normal separate letters */
*, *::before, *::after {
  font-variant-ligatures: none !important;
  font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "calt" 0 !important;
}

/* DESKTOP WEATHER BOX — in the empty space right of Sign up (does not move the menu) */
.masthead__row:has(.pgm-weather) { position: relative; }
.pgm-weather {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 12px 0 10px;
  background: #f4f6f9; border: 1px solid #e6e9ee; border-radius: 12px;
  color: var(--ink); white-space: nowrap;
  cursor: default; user-select: none;
}
.pgm-weather.is-hidden { visibility: hidden; }
.pgm-weather__icon { width: 24px; height: 24px; flex: none; }
.pgm-weather__text { display: flex; flex-direction: column; line-height: 1; gap: 3px; }
.pgm-weather__temp { font-family: var(--f-body); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.pgm-weather__city { font-family: var(--f-mono); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 1099px) { .pgm-weather { display: none !important; } }
.pgm-weather.is-compact { padding: 0 10px 0 8px; gap: 6px; }
.pgm-weather.is-compact .pgm-weather__city { display: none; }
/* every lowercase f in headlines uses the straight-stem optical cut of the font
   (the large-size cut draws a swan-neck f that looks crooked in "ff") */
.pgm-f { font-variation-settings: "opsz" 24; }

/* ========================================================================
   ONE TYPE SYSTEM — no typewriter / code-style face anywhere on the site.
   Labels, kickers, datelines and form labels now use the body sans (Inter).
   ======================================================================== */
:root { --f-mono: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
code, kbd, samp, pre, tt { font-family: var(--f-body); }

/* ========================================================================
   ACCOUNT PAGE — member view and correspondent desk
   ======================================================================== */
body:has(.account-shell) { background: #fff; }
.account-shell { max-width: 760px; margin: 0 auto; padding: 56px 24px 80px; }
.account-head { margin-bottom: 28px; }
.account-head__title { font-family: var(--f-display); font-size: clamp(28px, 4vw, 38px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.1; color: var(--ink); margin: 0 0 12px; }
.account-head__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-family: var(--f-body); font-size: 15px; color: var(--ink-soft); }
.account-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; background: #f1f3f6; color: var(--ink); font-family: var(--f-body); font-size: 12.5px; font-weight: 700; }
.account-chip--blue, body.is-correspondent .account-head .account-chip { background: rgba(0,83,203,.09); color: var(--pact-blue); }
.account-panel { background: #fff; border: 1px solid #e2e5eb; border-top: 3px solid var(--pact-blue); border-radius: 4px; padding: 30px 32px; margin-bottom: 24px; box-shadow: 0 1px 2px rgba(20,33,58,.04), 0 14px 34px rgba(20,33,58,.06); }
.account-panel__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.account-panel__title { font-family: var(--f-display); font-size: 23px; font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.account-panel__row .account-panel__title { margin: 0; }
.account-panel__text { font-family: var(--f-body); font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 22px; }
.account-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.account-link { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid #e2e5eb; border-radius: 6px; text-decoration: none; transition: border-color .15s ease, background .15s ease; }
.account-link strong { font-family: var(--f-body); font-size: 15.5px; font-weight: 700; color: var(--ink); }
.account-link span { font-family: var(--f-body); font-size: 13.5px; color: var(--ink-soft); }
.account-link:hover { border-color: var(--pact-blue); background: rgba(0,83,203,.03); }
.account-link:hover strong { color: var(--pact-blue); }
.account-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.account-stat { padding: 16px 18px; border: 1px solid #e2e5eb; border-radius: 6px; background: #f6f8fb; }
.account-stat__num { font-family: var(--f-display); font-size: 30px; font-weight: 600; color: var(--ink); line-height: 1; }
.account-stat__label { font-family: var(--f-body); font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-top: 6px; }
.account-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.account-btn { display: inline-flex !important; align-items: center; justify-content: center; width: auto !important; height: 48px; padding: 0 22px !important; text-decoration: none; border-radius: 4px; }
.account-signout { height: 48px; padding: 0 20px; border: 1px solid #d3d8e0; border-radius: 4px; background: #fff; color: var(--ink); font-family: var(--f-body); font-size: 15px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.account-signout:hover { border-color: var(--signal-red); color: var(--signal-red); }
@media (max-width: 640px) {
  .account-shell { padding: 26px 14px 48px; }
  .account-panel { padding: 24px 20px; border-radius: 14px; }
  .account-links { grid-template-columns: 1fr; }
  .account-stats { gap: 8px; }
  .account-stat { padding: 14px 12px; border-radius: 10px; }
  .account-stat__num { font-size: 26px; }
  .account-btn, .account-signout { width: 100% !important; height: 52px; border-radius: 10px; }
  .account-link { border-radius: 10px; }
}

/* Auth form labels: plain sentence case in the body face, matching the rest of the page */
.auth-card .field > label { font-family: var(--f-body); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.pw-toggle { font-family: var(--f-body); font-size: 12.5px; letter-spacing: 0; text-transform: none; }

/* ========================================================================
   ACCOUNT MENU (signed in) — replaces Sign in / Sign up
   ======================================================================== */
.nav__auth.is-signed-in { padding-left: 18px; }
.acct { position: relative; }
.acct__btn {
  display: inline-flex; align-items: center; gap: 9px;
  height: 42px; padding: 0 10px 0 4px;
  background: #fff; border: 1px solid #e2e5eb; border-radius: 999px;
  font-family: var(--f-body); font-size: 14px; font-weight: 600; color: var(--ink);
  cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
}
.acct__btn:hover, .acct.is-open .acct__btn { border-color: #c5ccd8; box-shadow: 0 2px 10px rgba(20,33,58,.08); }
.acct__avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pact-blue); color: #fff;
  font-family: var(--f-display); font-size: 15px; font-weight: 600; line-height: 1;
}
.acct__avatar--lg { width: 42px; height: 42px; font-size: 19px; }
.acct__name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct__caret { width: 12px; height: 12px; color: var(--ink-soft); transition: transform .15s ease; }
.acct.is-open .acct__caret { transform: rotate(180deg); }
.acct__menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 80;
  width: 260px; padding: 8px; background: #fff;
  border: 1px solid #e2e5eb; border-radius: 12px;
  box-shadow: 0 18px 44px rgba(20,33,58,.16);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.acct.is-open .acct__menu { opacity: 1; visibility: visible; transform: none; transition: opacity .15s ease, transform .15s ease; }
.acct__head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 14px; margin-bottom: 6px; border-bottom: 1px solid #eef0f3; }
.acct__who { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acct__who strong { font-family: var(--f-body); font-size: 15px; color: var(--ink); }
.acct__who span { font-family: var(--f-body); font-size: 12.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct__link {
  display: flex; align-items: center; width: 100%; height: 40px; padding: 0 10px;
  border: 0; border-radius: 8px; background: none; text-align: left;
  font-family: var(--f-body); font-size: 14.5px; font-weight: 500; color: var(--ink); text-decoration: none; cursor: pointer;
}
.acct__link:hover { background: #f4f6f9; color: var(--pact-blue); }
.acct__link--out { margin-top: 6px; border-top: 1px solid #eef0f3; border-radius: 0 0 8px 8px; color: var(--signal-red); }
.acct__link--out:hover { color: var(--signal-red); background: #fbeeec; }

/* mobile menu: account card instead of the two buttons */
@media (max-width: 860px) {
  .mobile-nav.is-signed-in .nav__signin,
  .mobile-nav.is-signed-in .nav__signup { display: none !important; }
  .mobile-acct { grid-column: 1 / -1; margin: 18px 24px 0; padding: 16px; border: 1px solid #e2e5eb; border-radius: 14px; background: #f6f8fb; }
  .mobile-acct__who { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
  .mobile-acct__who div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .mobile-acct__who strong { font-family: var(--f-body); font-size: 16px; color: var(--ink); }
  .mobile-acct__who span { font-family: var(--f-body); font-size: 13px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-acct__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .mobile-nav .mobile-acct__btn {
    display: flex; align-items: center; justify-content: center; min-height: 48px; height: 48px; padding: 0 10px; margin: 0;
    border: 1px solid #d3d8e0; border-radius: 10px; background: #fff;
    font-family: var(--f-body); font-size: 15px; font-weight: 700; color: var(--signal-red); cursor: pointer;
  }
  .mobile-nav .mobile-acct__btn::after { display: none; }
  .mobile-nav .mobile-acct__btn--primary { background: var(--pact-blue); border-color: var(--pact-blue); color: #fff; }
}

/* ========================================================================
   MEDIA ARCHIVE
   ======================================================================== */
.media-lib { position: relative; border-radius: 10px; transition: box-shadow .15s ease; }
.media-lib.is-drop { box-shadow: 0 0 0 3px rgba(0,83,203,.35); }
.media-lib__bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.media-lib__upload {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px;
  background: var(--pact-blue); color: #fff; border-radius: 6px; cursor: pointer;
  font-family: var(--f-body); font-size: 14.5px; font-weight: 700;
}
.media-lib__upload:hover { background: var(--pact-blue-deep); }
.media-lib__upload svg { width: 18px; height: 18px; }
.media-lib__hint { font-family: var(--f-body); font-size: 13.5px; color: var(--ink-soft); }
.media-lib__msg { margin-bottom: 12px; padding: 10px 12px; border-radius: 6px; background: #eef4ff; color: var(--ink); font-family: var(--f-body); font-size: 14px; }
.media-lib__msg.is-bad { background: #fbeeec; color: #9b2c22; }
.media-lib__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.media-lib__empty { padding: 34px 16px; border: 2px dashed #d3d8e0; border-radius: 10px; text-align: center; font-family: var(--f-body); font-size: 14.5px; color: var(--ink-soft); }
.media-tile { position: relative; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: #eef1f5; }
.media-tile img, .media-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-tile.is-pickable { cursor: pointer; outline: 0; }
.media-tile.is-pickable:hover, .media-tile.is-pickable:focus-visible { box-shadow: inset 0 0 0 3px var(--pact-blue); }
.media-tile.is-pickable:hover img, .media-tile.is-pickable:hover video { opacity: .9; }
.media-tile__play { position: absolute; left: 8px; bottom: 8px; width: 28px; height: 28px; border-radius: 50%; background: rgba(12,15,20,.7); color: #fff; display: flex; align-items: center; justify-content: center; }
.media-tile__play svg { width: 14px; height: 14px; margin-left: 2px; }
.media-tile__trash {
  position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.94); color: var(--signal-red); cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.18);
  transition: transform .12s ease, background .12s ease;
}
.media-tile__trash:hover { background: #fff; transform: scale(1.08); }
.media-tile__trash svg { width: 17px; height: 17px; }
.media-tile.is-deleting { opacity: .4; pointer-events: none; }
.media-tile.is-uploading { display: flex; align-items: center; justify-content: center; }
.media-tile__progress { width: 78%; text-align: center; font-family: var(--f-body); font-size: 13px; font-weight: 700; color: var(--ink); }
.media-tile__progress i { display: block; height: 5px; margin-top: 8px; border-radius: 3px; background: var(--pact-blue); transition: width .2s ease; }

.media-modal { position: fixed; inset: 0; z-index: 200; background: rgba(12,15,20,.55); display: flex; align-items: center; justify-content: center; padding: 24px; }
html.media-modal-open { overflow: hidden; }
.media-modal__box { width: min(880px, 100%); max-height: min(86vh, 860px); display: flex; flex-direction: column; background: #fff; border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.3); overflow: hidden; }
.media-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid #eef0f3; }
.media-modal__head h2 { margin: 0; font-family: var(--f-display); font-size: 22px; font-weight: 600; color: var(--ink); }
.media-modal__close { width: 40px; height: 40px; border: 0; border-radius: 50%; background: #f1f3f6; font-size: 24px; line-height: 1; color: var(--ink); cursor: pointer; }
.media-modal__close:hover { background: #e4e8ee; }
.media-modal__body { padding: 20px 22px 24px; overflow-y: auto; }
@media (max-width: 640px) {
  .media-modal { padding: 0; align-items: flex-end; }
  .media-modal__box { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; }
  .media-modal__body { padding: 16px 14px 28px; }
  .media-lib__grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .media-lib__upload { width: 100%; justify-content: center; height: 50px; border-radius: 10px; }
  .media-tile { border-radius: 6px; }
  .media-tile__trash { top: 5px; right: 5px; width: 30px; height: 30px; }
}

/* ========================================================================
   EDITOR STUDIO (publish / edit)
   ======================================================================== */
body:has(.studio-v2) { background: #fff; }
.studio-v2 .publish-note { display: none; }
.studio-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.studio-top__title { font-family: var(--f-display); font-size: clamp(28px, 4vw, 38px); font-weight: 600; letter-spacing: -0.015em; color: var(--ink); margin: 0; }
.studio-top__back { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 10px; border: 1px solid #d3d8e0; border-radius: 6px; font-family: var(--f-body); font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; }
.studio-top__back:hover { border-color: var(--pact-blue); color: var(--pact-blue); }
.studio-top__back svg { width: 16px; height: 16px; }
.studio-v2 .studio__form { border: 1px solid #e2e5eb; border-top: 3px solid var(--pact-blue); border-radius: 4px; background: #fff; box-shadow: 0 14px 34px rgba(20,33,58,.06); }
.studio-v2 .field > label { font-family: var(--f-body); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
.studio-v2 .field input:not([type=checkbox]), .studio-v2 .field select, .studio-v2 .field textarea {
  font-family: var(--f-body); font-size: 15.5px; border: 1px solid #d3d8e0; border-radius: 6px; background: #fff;
}
.studio-v2 .field input:not([type=checkbox]), .studio-v2 .field select { height: 48px; padding: 0 14px; }
.studio-v2 .field textarea { min-height: 320px; padding: 14px; line-height: 1.6; }
.studio-v2 .field input:focus, .studio-v2 .field select:focus, .studio-v2 .field textarea:focus { border-color: var(--pact-blue); box-shadow: 0 0 0 3px rgba(0,83,203,.14); outline: none; }
.toolbar .toolbar__wide { width: auto !important; padding: 0 12px; font-family: var(--f-body); font-size: 13px; font-weight: 700; color: var(--pact-blue); }
.lead-pick__empty {
  width: 100%; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border: 2px dashed #c9d0db; border-radius: 10px; background: #f8f9fb; cursor: pointer;
  font-family: var(--f-body); font-size: 15px; font-weight: 700; color: var(--pact-blue);
  transition: border-color .15s ease, background .15s ease;
}
.lead-pick__empty:hover { border-color: var(--pact-blue); background: #f1f6ff; }
.lead-pick__empty svg { width: 30px; height: 30px; }
.lead-pick__media { border-radius: 10px; overflow: hidden; background: #0c0f14; }
.lead-pick__media img, .lead-pick__media video { display: block; width: 100%; max-height: 340px; object-fit: contain; }
.lead-pick__actions { display: flex; gap: 10px; margin-top: 10px; }
.studio-btn { height: 44px; padding: 0 18px; border: 1px solid #d3d8e0; border-radius: 6px; background: #fff; font-family: var(--f-body); font-size: 14.5px; font-weight: 700; color: var(--ink); cursor: pointer; }
.studio-btn:hover { border-color: var(--pact-blue); color: var(--pact-blue); }
.studio-btn--danger { color: var(--signal-red); }
.studio-btn--danger:hover { border-color: var(--signal-red); color: var(--signal-red); }
.studio-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; padding-top: 20px; border-top: 1px solid #eef0f3; }
.studio-actions .btn-primary { width: auto !important; height: 48px; padding: 0 28px; border-radius: 6px; }
.studio-actions .studio-btn { height: 48px; }
.studio-actions__view { margin-left: auto; font-family: var(--f-body); font-size: 14.5px; font-weight: 700; color: var(--pact-blue); text-decoration: none; }
.studio-status { min-height: 22px; margin: 12px 0 0; font-family: var(--f-body); font-size: 14.5px; font-weight: 600; color: var(--ink-soft); }
.studio-status.is-ok { color: #1f5d4f; }
.studio-status.is-bad { color: #9b2c22; }
.preview-card__media { margin: -2px -2px 14px; border-radius: 6px; overflow: hidden; background: #0c0f14; }
.preview-card__media img, .preview-card__media video { display: block; width: 100%; max-height: 200px; object-fit: cover; }
@media (max-width: 640px) {
  .studio-v2 .studio__form { border-radius: 14px; padding: 20px 16px; }
  .studio-v2 .field-row { flex-direction: column !important; gap: 0; }
  .studio-actions { flex-direction: column; align-items: stretch; }
  .studio-actions .btn-primary, .studio-actions .studio-btn { width: 100% !important; height: 52px; border-radius: 10px; }
  .studio-actions__view { margin: 4px auto 0; }
  .lead-pick__actions .studio-btn { flex: 1; }
  .studio-top__back { height: 40px; border-radius: 10px; }
}

/* Dispatch page: pictures and videos inside the story; editor edit button */
.dispatch-figure { margin: 30px 0; }
.dispatch-figure img, .dispatch-figure video { display: block; width: 100%; height: auto; border-radius: 4px; background: #0c0f14; }
.dispatch-figure figcaption { margin-top: 8px; font-family: var(--f-body); font-size: 13.5px; color: var(--ink-soft); }
.dispatch-subhead { font-family: var(--f-display); font-size: 24px; font-weight: 600; margin: 34px 0 12px; color: var(--ink); }
.dispatch-edit-btn { position: fixed; right: 20px; bottom: 20px; z-index: 70; display: inline-flex; align-items: center; height: 46px; padding: 0 20px; border-radius: 999px; background: var(--pact-blue); color: #fff; font-family: var(--f-body); font-size: 14.5px; font-weight: 700; text-decoration: none; box-shadow: 0 10px 26px rgba(0,83,203,.35); }
.dispatch-edit-btn:hover { background: var(--pact-blue-deep); }

/* ========================================================================
   ACCOUNT PAGE additions: editor desk list, briefing toggle
   ======================================================================== */
.account-ghost { display: inline-flex; align-items: center; height: 48px; padding: 0 18px; border: 1px solid #d3d8e0; border-radius: 4px; background: #fff; font-family: var(--f-body); font-size: 14.5px; font-weight: 600; color: var(--ink); text-decoration: none; cursor: pointer; }
.account-ghost:hover { border-color: var(--pact-blue); color: var(--pact-blue); }
.account-note { margin: 14px 0 0; font-family: var(--f-body); font-size: 14px; color: var(--ink-soft); }
.desk-filter { display: inline-flex; padding: 3px; background: #f1f3f6; border-radius: 8px; }
.desk-filter button { height: 32px; padding: 0 14px; border: 0; border-radius: 6px; background: none; font-family: var(--f-body); font-size: 13.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.desk-filter button.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(20,33,58,.12); }
.desk-list { margin-top: 16px; }
.desk-row { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid #eef0f3; }
.desk-row:first-child { border-top: 0; }
.desk-row__thumb { width: 72px; height: 72px; flex: none; border-radius: 6px; overflow: hidden; background: #eef1f5; display: flex; align-items: center; justify-content: center; font-family: var(--f-body); font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.desk-row__thumb img, .desk-row__thumb video { width: 100%; height: 100%; object-fit: cover; }
.desk-row__body { flex: 1; min-width: 0; }
.desk-row__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-family: var(--f-body); font-size: 12.5px; color: var(--ink-soft); margin-bottom: 4px; }
.desk-row__title { font-family: var(--f-display); font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.desk-row__by { font-family: var(--f-body); font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }
.desk-status { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-weight: 700; font-size: 11.5px; }
.desk-status--approved { background: #e3f4ec; color: #1f6d4b; }
.desk-status--draft { background: #f1f3f6; color: var(--ink-soft); }
.desk-status--pending { background: #fff4e0; color: #8a5a00; }
.desk-status--returned { background: #fbeeec; color: #9b2c22; }
.desk-row__actions { display: flex; gap: 8px; flex: none; }
.desk-btn { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border: 1px solid #d3d8e0; border-radius: 6px; font-family: var(--f-body); font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: none; }
.desk-btn:hover { border-color: var(--pact-blue); color: var(--pact-blue); }
.desk-btn--primary { background: var(--pact-blue); border-color: var(--pact-blue); color: #fff; }
.desk-btn--primary:hover { background: var(--pact-blue-deep); color: #fff; }
#staff-signout { margin-top: 8px; }

.brief-toggle { display: flex; align-items: center; gap: 16px; padding: 16px 18px; margin: 0 0 22px; border: 1px solid #e2e5eb; border-radius: 6px; cursor: pointer; }
.brief-toggle__text { flex: 1; display: flex; flex-direction: column; gap: 3px; font-family: var(--f-body); }
.brief-toggle__text strong { font-size: 15.5px; color: var(--ink); }
.brief-toggle__text span { font-size: 13.5px; color: var(--ink-soft); }
.brief-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.brief-toggle__switch { position: relative; width: 48px; height: 28px; flex: none; border-radius: 999px; background: #c9d0db; transition: background .15s ease; }
.brief-toggle__switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s ease; }
.brief-toggle input:checked + .brief-toggle__switch { background: var(--pact-blue); }
.brief-toggle input:checked + .brief-toggle__switch::after { transform: translateX(20px); }
.brief-toggle input:focus-visible + .brief-toggle__switch { box-shadow: 0 0 0 3px rgba(0,83,203,.25); }

.brief-optin { display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 18px; padding: 14px; border: 1px solid #e2e5eb; border-radius: 6px; background: #f8f9fb; cursor: pointer; font-family: var(--f-body); font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.brief-optin input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--pact-blue); }
.brief-optin strong { display: block; font-size: 14.5px; color: var(--ink); margin-bottom: 2px; }

@media (max-width: 640px) {
  .account-actions .account-ghost { width: 100%; justify-content: center; height: 50px; border-radius: 10px; }
  .account-panel__row { align-items: flex-start; flex-direction: column; }
  .desk-row { flex-wrap: wrap; gap: 12px; }
  .desk-row__thumb { width: 60px; height: 60px; }
  .desk-row__body { flex: 1 1 calc(100% - 76px); }
  .desk-row__actions { width: 100%; }
  .desk-btn { flex: 1; justify-content: center; height: 44px; border-radius: 10px; }
  .brief-toggle { border-radius: 10px; }
  .brief-optin { border-radius: 10px; }
}
/* fixes */
.lead-pick [hidden], .media-lib [hidden], .studio-actions [hidden] { display: none !important; }
.studio-v2 { padding-top: 44px; }
.mobile-acct .acct__avatar { color: #fff !important; }
@media (max-width: 860px) {
  .mobile-nav .mobile-acct__actions > a, .mobile-nav .mobile-acct__actions > button { grid-column: auto !important; }
}

/* Footer logo: a little larger so "GLOBAL MEDIA" reads on the dark band */
.footer__brand .wordmark__img { height: 54px !important; width: auto !important; max-width: none !important; }
@media (max-width: 640px) { .footer__brand .wordmark__img { height: 48px !important; } }
/* Editor page stays hidden until the editor session is confirmed (no flash for members) */
html:not(.studio-ok) .studio-v2 { visibility: hidden; }

/* Footer: follow us */
.footer__social { margin-top: 22px; }
.footer__social-label { display: block; margin-bottom: 10px; font-family: var(--f-body); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.footer__social-links { display: flex; flex-wrap: wrap; gap: 10px; }
.footer__social-link {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 12px;
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
  font-family: var(--f-body); font-size: 14px; font-weight: 600; color: #fff !important; text-decoration: none !important;
  transition: background .15s ease, border-color .15s ease;
}
.footer__social-link svg { width: 18px; height: 18px; flex: none; }
.footer__social-link:hover { background: var(--pact-blue); border-color: var(--pact-blue); }
.footer__social-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 640px) { .footer__social-link { height: 44px; padding: 0 16px 0 14px; } }
.footer__social-handle { margin-left: 6px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--paper-ink-soft); }
.footer__social-link { width: 44px; height: 44px !important; padding: 0 !important; justify-content: center; border-radius: 50%; }
.footer__social-link svg { width: 19px; height: 19px; }