/* =============================================================
   RN NEWS DESK — DESIGN SYSTEM
   Nursing Intelligence Newsroom
   ============================================================= */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Brand */
  --navy-900: #062044;   /* primary */
  --navy-800: #0a2b57;
  --navy-700: #123a6e;
  --navy-600: #1d4f8f;   /* links / info */
  --red:      #f74d44;   /* RN red — accents, not small text */
  --red-700:  #d8362c;   /* accessible red for text/badges */
  --red-800:  #b92d24;

  /* Neutrals / backgrounds */
  --paper:    #ffffff;
  --mist:     #f5f7fa;   /* soft section bg */
  --mist-2:   #eef2f7;
  --line:     #e1e7ef;   /* borders */
  --line-2:   #d4dce6;

  /* Text */
  --ink:      #0c1b2e;   /* headings */
  --body:     #2c3a4b;   /* body */
  --slate:    #51617a;   /* secondary */
  --muted:    #647184;   /* captions / meta (AA on white) */

  /* Signals */
  --green:    #157a4e;
  --green-bg: #e7f4ee;
  --amber:    #b7791f;

  /* Type */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale (8px base) */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* Radius */
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-pill: 999px;

  /* Elevation (subtle only) */
  --sh-1: 0 1px 2px rgba(6,32,68,.06), 0 1px 3px rgba(6,32,68,.05);
  --sh-2: 0 4px 14px rgba(6,32,68,.08);
  --sh-3: 0 12px 34px rgba(6,32,68,.12);

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast: .15s; --t: .25s;

  /* Layout */
  --maxw: 1180px;
  --readw: 68ch;

  /* EKG card media: navy gradient + faint heartbeat line */
  --ekg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='120' viewBox='0 0 400 120'%3E%3Cpath d='M0 70h60l14-44 22 80 18-58 12 26 10-10h232' fill='none' stroke='%23ffffff' stroke-opacity='.16' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--body);
  background: var(--paper);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font: inherit; }
table { border-collapse: collapse; width: 100%; }

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

/* ---------- 3. UTILITIES ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s5); }
.visually-hidden, .visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s4); top: -60px; z-index: 200;
  background: var(--navy-900); color: #fff; padding: var(--s3) var(--s4);
  border-radius: var(--r-md); transition: top var(--t) var(--ease);
}
.skip-link:focus { top: var(--s4); }

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

/* ---------- 4. TYPOGRAPHY ---------- */
h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); line-height: 1.18; font-weight: 600; letter-spacing: -.01em; }
.kicker {
  display: inline-block; font-family: var(--sans); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--red-700);
}
.kicker--research { color: var(--navy-600); }
.kicker--insights { color: #6b3fa0; }
.kicker--policy   { color: var(--amber); }
.kicker--market   { color: var(--green); }
.kicker--opinion  { color: var(--slate); }

.byline {
  font-family: var(--sans); font-size: .82rem; color: var(--muted);
  margin-top: var(--s3);
}
.byline a { color: var(--slate); font-weight: 600; }
.byline a:hover { color: var(--navy-700); }
.byline--light { color: rgba(255,255,255,.7); }
.byline--light a { color: #fff; }

/* ---------- 5. BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: var(--sans); font-weight: 700; font-size: .92rem; letter-spacing: .01em;
  padding: var(--s3) var(--s5); border-radius: var(--r-md);
  transition: transform var(--t-fast) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease), color var(--t) var(--ease);
}
.btn--sm { padding: var(--s2) var(--s4); font-size: .85rem; }
.btn--primary { background: var(--red-700); color: #fff; }
.btn--primary:hover { background: var(--red-800); transform: translateY(-1px); box-shadow: var(--sh-2); }
.btn--secondary { background: var(--navy-900); color: #fff; }
.btn--secondary:hover { background: var(--navy-700); transform: translateY(-1px); }
.btn--ghost-light { border: 1.5px solid rgba(255,255,255,.45); color: #fff; }
.btn--ghost-light:hover { background: #fff; color: var(--navy-900); border-color: #fff; }

/* ---------- 6. BADGES ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 5px 10px; border-radius: var(--r-sm);
}
.badge--breaking { background: var(--red-700); color: #fff; }
.badge--breaking::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.6s infinite; }
.badge--feature { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3); }
.badge--alt { background: var(--navy-900); color: #fff; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ---------- 7. UTILITY BAR ---------- */
.utilitybar { background: var(--navy-900); color: rgba(255,255,255,.82); font-size: .78rem; }
.utilitybar__row { display: flex; justify-content: space-between; align-items: center; min-height: 36px; }
.utilitybar__date { font-family: var(--mono); letter-spacing: .02em; font-size: .72rem; color: rgba(255,255,255,.6); }
.utilitybar__links { display: flex; gap: var(--s5); }
.utilitybar__links a { font-weight: 500; }
.utilitybar__links a:hover { color: #fff; }
.utilitybar__signin { color: var(--red) !important; font-weight: 700 !important; }

/* ---------- 8. MASTHEAD ---------- */
.masthead {
  position: sticky; top: 0; z-index: 100; background: #fff;
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--t) var(--ease), padding var(--t) var(--ease);
}
.masthead.is-stuck { box-shadow: var(--sh-2); }
.masthead__row { display: flex; align-items: center; gap: var(--s5); min-height: 76px; transition: min-height var(--t) var(--ease); }
.masthead.is-stuck .masthead__row { min-height: 62px; }

.brand { display: inline-flex; align-items: center; gap: var(--s3); }
.brand__mark svg { border-radius: var(--r-md); }
.brand__type { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: var(--serif); font-weight: 700; font-size: 1.32rem; color: var(--navy-900); letter-spacing: -.02em; }
.brand__tag { font-family: var(--sans); font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--red-700); margin-top: 3px; }

.primary-nav { margin-left: auto; }
.primary-nav ul { display: flex; gap: var(--s5); }
.primary-nav a {
  font-family: var(--sans); font-weight: 600; font-size: .92rem; color: var(--ink);
  padding: var(--s2) 0; position: relative;
}
.primary-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2.5px; width: 0;
  background: var(--red); transition: width var(--t) var(--ease);
}
.primary-nav a:hover::after, .primary-nav a[aria-current="page"]::after { width: 100%; }
.primary-nav a[aria-current="page"] { color: var(--navy-900); }

.masthead__actions { display: flex; align-items: center; gap: var(--s3); }
.iconbtn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-md); color: var(--navy-800); transition: background var(--t); }
.iconbtn:hover { background: var(--mist); }

.hamburger { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; gap: 5px; align-items: center; }
.hamburger span { width: 22px; height: 2.5px; background: var(--navy-900); border-radius: 2px; transition: transform var(--t) var(--ease), opacity var(--t) var(--ease); }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- 9. TICKER (signature) ---------- */
.ticker {
  background: var(--navy-800); color: #fff; display: flex; align-items: stretch;
  border-bottom: 2px solid var(--red); overflow: hidden;
}
.ticker__label {
  background: var(--red-700); color: #fff; font-family: var(--sans); font-weight: 800;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  display: flex; align-items: center; padding: 0 var(--s4); white-space: nowrap; flex-shrink: 0;
}
.ticker__viewport { overflow: hidden; flex: 1; display: flex; align-items: center; }
.ticker__track {
  display: flex; gap: var(--s7); white-space: nowrap; padding: 9px 0;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .01em;
  animation: ticker 38s linear infinite; will-change: transform;
}
.ticker__track li { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.78); }
.ticker__track b { color: #fff; font-weight: 600; }
.ticker .up { color: #5fd39a; } .ticker .down { color: var(--red); }
.ticker__viewport:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 10. CARD-LINK helper (whole card hoverable) ---------- */
.card-link { position: relative; }
.card-link a { position: relative; z-index: 1; }

/* media blocks (image placeholders) */
.lead__media, .story__media, .card__media, .feed__media, .longread__media {
  background-color: var(--navy-800);
  background-image: var(--ekg), linear-gradient(135deg, var(--navy-700), var(--navy-900));
  background-size: cover, cover; background-position: bottom; background-repeat: no-repeat;
  border-radius: var(--r-lg); display: block; position: relative; overflow: hidden;
}
.lead__media::after, .story__media::after, .card__media::after, .feed__media::after, .longread__media::after {
  content: attr(data-cat); position: absolute; left: var(--s4); top: var(--s4);
  font-family: var(--mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .12em;
  color: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.22); padding: 3px 8px; border-radius: var(--r-sm);
}
[data-cat="research"] { background-image: var(--ekg), linear-gradient(135deg, #1a3d6b, #0a2240); }
[data-cat="insights"] { background-image: var(--ekg), linear-gradient(135deg, #3a2a5e, #1a1438); }
[data-cat="policy"]   { background-image: var(--ekg), linear-gradient(135deg, #5a4012, #2e2008); }
[data-cat="market"]   { background-image: var(--ekg), linear-gradient(135deg, #12503a, #06281d); }
[data-cat="opinion"]  { background-image: var(--ekg), linear-gradient(135deg, #2c3a4b, #141c26); }
[data-cat="feature"]  { background-image: var(--ekg), linear-gradient(135deg, var(--red-800), #5e120d); }

/* ---------- 11. HERO ---------- */
.hero {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s7);
  padding-top: var(--s7); padding-bottom: var(--s7);
}
.meta-row { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); flex-wrap: wrap; }
.lead__media { aspect-ratio: 16/9; margin-bottom: var(--s4); transition: transform var(--t) var(--ease); }
.lead:hover .lead__media { transform: translateY(-2px); }
.lead__title { font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.1; letter-spacing: -.02em; }
.lead__title a:hover { color: var(--navy-700); }
.lead__dek { font-family: var(--serif); font-size: 1.15rem; color: var(--slate); margin-top: var(--s4); line-height: 1.5; }

.hero__rail { display: flex; flex-direction: column; gap: var(--s5); }
.story--rail { display: grid; grid-template-columns: 96px 1fr; gap: var(--s4); padding-bottom: var(--s5); border-bottom: 1px solid var(--line); }
.story--rail:last-child { border-bottom: none; }
.story__media { aspect-ratio: 1/1; border-radius: var(--r-md); }
.story__media::after { display: none; }
.story__title { font-size: 1.05rem; line-height: 1.25; margin-top: 6px; }
.story__title a:hover { color: var(--red-700); }

/* ---------- 12. TRENDING ---------- */
.trending { background: var(--mist); border-radius: var(--r-lg); padding: var(--s6); margin-bottom: var(--s7); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); }
.section-head__title { font-size: 1.35rem; display: inline-flex; align-items: center; gap: var(--s3); }
.section-head__more { font-family: var(--sans); font-size: .85rem; font-weight: 700; color: var(--red-700); white-space: nowrap; }
.section-head__more:hover { color: var(--red-800); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); display: inline-block; animation: pulse 1.8s infinite; }
.dot--green { background: var(--green); }

.trending__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s4); counter-reset: t; }
.trending__list li { display: flex; gap: var(--s3); align-items: flex-start; padding-right: var(--s3); border-right: 1px solid var(--line-2); }
.trending__list li:last-child { border-right: none; }
.rank { font-family: var(--serif); font-size: 1.7rem; font-weight: 700; color: var(--red); line-height: 1; flex-shrink: 0; }
.trending__list a { font-family: var(--sans); font-weight: 600; font-size: .92rem; line-height: 1.3; color: var(--ink); }
.trending__list a:hover { color: var(--red-700); }

/* ---------- 13. CATEGORY BLOCKS / CARD GRID ---------- */
.catblock { padding-bottom: var(--s7); }
.grid-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t); display: flex; flex-direction: column; }
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--line-2); }
.card__media { aspect-ratio: 16/10; border-radius: 0; }
.card__media::after { left: var(--s3); top: var(--s3); }
.card__body { padding: var(--s4) var(--s5) var(--s5); display: flex; flex-direction: column; gap: var(--s2); }
.card__title { font-size: 1.18rem; line-height: 1.22; margin-top: 2px; }
.card__title a:hover { color: var(--navy-700); }
.card__dek { font-size: .92rem; color: var(--slate); }

/* ---------- 14. LONG READ BAND ---------- */
.longread { background: var(--navy-900); color: #fff; margin-bottom: var(--s7); position: relative; overflow: hidden; }
.longread::before { content: ""; position: absolute; inset: 0; background-image: var(--ekg); background-size: 600px; opacity: .5; }
.longread__inner { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s7); align-items: center; padding-top: var(--s8); padding-bottom: var(--s8); }
.longread__title { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.12; margin: var(--s4) 0; color: #fff; }
.longread__title a:hover { color: #ffd9d6; }
.longread__dek { font-family: var(--serif); font-size: 1.1rem; color: rgba(255,255,255,.82); line-height: 1.55; margin-bottom: var(--s5); max-width: 52ch; }
.longread .btn { margin-top: var(--s4); }
.longread__media { aspect-ratio: 4/3; box-shadow: var(--sh-3); }

/* ---------- 15. LATEST + ASIDE ---------- */
.layout-2col { display: grid; grid-template-columns: 1fr 340px; gap: var(--s7); padding-bottom: var(--s8); }

.filters { display: flex; gap: var(--s2); flex-wrap: wrap; }
.chip {
  font-family: var(--sans); font-size: .82rem; font-weight: 600; color: var(--slate);
  padding: 6px 14px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: #fff;
  transition: all var(--t) var(--ease);
}
.chip:hover { border-color: var(--navy-600); color: var(--navy-700); }
.chip.is-active { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }

.feed { display: flex; flex-direction: column; }
.feed__item { display: grid; grid-template-columns: 150px 1fr; gap: var(--s5); padding: var(--s5) 0; border-bottom: 1px solid var(--line); transition: opacity var(--t); }
.feed__item:first-child { padding-top: 0; }
.feed__media { aspect-ratio: 4/3; border-radius: var(--r-md); }
.feed__media::after { display: none; }
.feed__title { font-size: 1.2rem; line-height: 1.22; margin: 4px 0 6px; }
.feed__title a:hover { color: var(--navy-700); }
.feed__dek { font-size: .92rem; color: var(--slate); }
.feed__item[hidden] { display: none; }
.feed__more { margin-top: var(--s5); width: 100%; }

/* Sidebar widgets */
.sidebar { display: flex; flex-direction: column; gap: var(--s5); position: sticky; top: 96px; align-self: start; }
.widget { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); background: #fff; }
.widget__title { font-size: 1.15rem; display: inline-flex; align-items: center; gap: var(--s2); }
.widget__sub { font-size: .82rem; color: var(--muted); margin-top: var(--s1); }

.widget--market { background: var(--mist); }
.market { font-family: var(--mono); font-size: .82rem; margin-top: var(--s4); }
.market th, .market td { text-align: left; padding: 9px 4px; border-bottom: 1px solid var(--line); }
.market thead th { font-family: var(--sans); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; border-bottom: 1.5px solid var(--line-2); }
.market tbody th { font-family: var(--sans); font-weight: 600; color: var(--ink); font-size: .85rem; }
.market td { text-align: right; color: var(--body); }
.market .up { color: var(--green); font-weight: 600; } .market .down { color: var(--red-700); font-weight: 600; }
.widget__link { display: inline-block; margin-top: var(--s4); font-family: var(--sans); font-size: .85rem; font-weight: 700; color: var(--red-700); }
.widget__link:hover { color: var(--red-800); }

.ranklist { counter-reset: r; display: flex; flex-direction: column; }
.ranklist li { counter-increment: r; display: grid; grid-template-columns: 28px 1fr; gap: var(--s2); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.ranklist li:last-child { border-bottom: none; }
.ranklist li::before { content: counter(r); font-family: var(--serif); font-weight: 700; font-size: 1.1rem; color: var(--red); }
.ranklist a { font-family: var(--sans); font-weight: 600; font-size: .92rem; line-height: 1.3; color: var(--ink); }
.ranklist a:hover { color: var(--navy-700); }

.widget--news { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.widget__title--light { color: #fff; }
.widget__sub--light { color: rgba(255,255,255,.7); }
.miniform { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.miniform input { flex: 1; min-width: 0; padding: 11px 14px; border-radius: var(--r-md); border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; }
.miniform input::placeholder { color: rgba(255,255,255,.5); }
.miniform input:focus-visible { outline-color: var(--red); }

/* ---------- 16. NEWSLETTER BAND ---------- */
.newsletter { background: linear-gradient(120deg, var(--navy-900), var(--navy-700)); color: #fff; position: relative; overflow: hidden; }
.newsletter::after { content: ""; position: absolute; right: -80px; top: -80px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(247,77,68,.32), transparent 70%); }
.newsletter__inner { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s7); align-items: center; padding-top: var(--s8); padding-bottom: var(--s8); }
.newsletter__title { font-size: clamp(1.7rem, 2.8vw, 2.3rem); color: #fff; margin: var(--s4) 0 var(--s3); line-height: 1.12; }
.newsletter__dek { color: rgba(255,255,255,.82); max-width: 46ch; font-size: 1.02rem; }
.newsletter__fields { display: flex; gap: var(--s3); flex-wrap: wrap; }
.newsletter__form input { flex: 1; min-width: 220px; padding: 15px 18px; border-radius: var(--r-md); border: 1.5px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: #fff; font-size: 1rem; }
.newsletter__form input::placeholder { color: rgba(255,255,255,.55); }
.newsletter__fine { font-size: .78rem; color: rgba(255,255,255,.6); margin-top: var(--s3); }

.formmsg { font-size: .85rem; font-weight: 600; margin-top: var(--s2); min-height: 1.2em; color: var(--green); }
.formmsg--light { color: #7ef0b4; }
.formmsg.is-error { color: var(--red); }

/* ---------- 17. FOOTER ---------- */
.footer { background: var(--navy-900); color: rgba(255,255,255,.72); margin-top: 0; }
.footer__top { display: grid; grid-template-columns: 1.3fr 2fr; gap: var(--s7); padding-top: var(--s8); padding-bottom: var(--s6); }
.brand--footer .brand__name { color: #fff; }
.footer__blurb { font-size: .9rem; margin-top: var(--s4); max-width: 32ch; line-height: 1.6; }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.footer__col h3 { font-family: var(--sans); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: #fff; margin-bottom: var(--s4); }
.footer__col li { margin-bottom: var(--s3); }
.footer__col a { font-size: .9rem; transition: color var(--t); }
.footer__col a:hover { color: var(--red); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: var(--s5) 0 var(--s6); border-top: 1px solid rgba(255,255,255,.12); font-size: .82rem; }
.footer__legal { display: flex; gap: var(--s5); }
.footer__legal a:hover { color: #fff; }

/* ---------- 18. RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; gap: var(--s6); }
  .longread__inner, .newsletter__inner, .footer__top { grid-template-columns: 1fr; gap: var(--s6); }
  .longread__media { order: -1; aspect-ratio: 16/9; }
  .layout-2col { grid-template-columns: 1fr; }
  .sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .widget { flex: 1; min-width: 260px; }
}
@media (max-width: 860px) {
  .primary-nav {
    position: fixed; inset: 0 0 0 auto; width: min(82vw, 340px); background: #fff;
    transform: translateX(100%); transition: transform var(--t) var(--ease);
    box-shadow: var(--sh-3); padding: calc(76px + var(--s5)) var(--s5) var(--s5); z-index: 90; margin-left: 0;
  }
  .primary-nav.is-open { transform: translateX(0); }
  .primary-nav ul { flex-direction: column; gap: 0; }
  .primary-nav li { border-bottom: 1px solid var(--line); }
  .primary-nav a { display: block; padding: var(--s4) 0; font-size: 1.05rem; }
  .primary-nav a::after { display: none; }
  .hamburger { display: flex; }
  .masthead__cta { display: none; }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(6,32,68,.45); z-index: 80; opacity: 0; visibility: hidden; transition: opacity var(--t); }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }
  .trending__list { grid-template-columns: repeat(2, 1fr); }
  .grid-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .wrap { padding-inline: var(--s4); }
  .utilitybar__links a:not(.utilitybar__signin) { display: none; }
  .hero { padding-top: var(--s5); }
  .story--rail { grid-template-columns: 84px 1fr; }
  .trending { padding: var(--s5); }
  .trending__list { grid-template-columns: 1fr; }
  .trending__list li { border-right: none; border-bottom: 1px solid var(--line-2); padding: var(--s3) 0; }
  .trending__list li:last-child { border-bottom: none; }
  .grid-cards { grid-template-columns: 1fr; }
  .feed__item { grid-template-columns: 110px 1fr; gap: var(--s4); }
  .sidebar { flex-direction: column; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .lead__title { font-size: 1.75rem; }
}
@media (max-width: 420px) {
  .feed__item { grid-template-columns: 1fr; }
  .feed__media { aspect-ratio: 16/9; }
}

/* =============================================================
   19. ARTICLE / POST PAGE
   ============================================================= */
.post__head { padding-top: var(--s6); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; font-family: var(--sans); font-size: .8rem; color: var(--muted); margin-bottom: var(--s5); }
.breadcrumb a { font-weight: 600; color: var(--slate); }
.breadcrumb a:hover { color: var(--red-700); }
.breadcrumb span[aria-hidden] { color: var(--line-2); }

.post__title { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -.025em; max-width: 20ch; }
.post__dek { font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.4rem); color: var(--slate); line-height: 1.45; margin-top: var(--s4); max-width: 60ch; font-weight: 400; }

.post__byline { display: flex; align-items: center; gap: var(--s3); margin: var(--s5) 0; padding-bottom: var(--s5); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--navy-900); color: #fff; display: grid; place-items: center; font-family: var(--sans); font-weight: 800; font-size: .85rem; letter-spacing: .03em; flex-shrink: 0; }
.avatar--lg { width: 64px; height: 64px; font-size: 1.1rem; }
.post__author { font-family: var(--sans); font-weight: 600; font-size: .95rem; color: var(--ink); }
.post__author a:hover { color: var(--red-700); }
.post__time { font-family: var(--sans); font-size: .82rem; color: var(--muted); }
.share { display: flex; gap: var(--s2); margin-left: auto; }
.share__btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font-family: var(--sans); font-weight: 700; font-size: .9rem; color: var(--navy-800); transition: all var(--t) var(--ease); }
.share__btn:hover { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }

.post__hero { margin: var(--s5) auto var(--s6); max-width: var(--maxw); padding-inline: var(--s5); }
.post__hero img { width: 100%; height: auto; border-radius: var(--r-lg); aspect-ratio: 2/1; object-fit: cover; }
.post__hero figcaption { font-family: var(--sans); font-size: .82rem; color: var(--muted); margin-top: var(--s3); }
.post__hero figcaption span { color: var(--line-2); }

.post__layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: var(--s7); padding-bottom: var(--s8); }
.post__body { max-width: var(--readw); }
.post__body p { font-family: var(--serif); font-size: 1.18rem; line-height: 1.72; color: var(--body); margin-bottom: var(--s5); }
.post__body .lede { font-size: 1.3rem; line-height: 1.6; color: var(--ink); }
.post__body .lede::first-letter { initial-letter: 2; font-weight: 600; color: var(--navy-900); margin-right: 6px; }
.post__body h2 { font-size: 1.7rem; margin: var(--s7) 0 var(--s3); letter-spacing: -.02em; }
.post__body h3 { font-size: 1.3rem; margin: var(--s5) 0 var(--s2); color: var(--navy-800); }
.post__body a:not(.btn) { color: var(--navy-600); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1.5px; }
.post__body a:not(.btn):hover { color: var(--red-700); }

.keypoints { background: var(--mist); border-left: 4px solid var(--red); border-radius: 0 var(--r-md) var(--r-md) 0; padding: var(--s5) var(--s5) var(--s4); margin: var(--s6) 0; }
.keypoints h2 { font-family: var(--sans); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--red-700); margin: 0 0 var(--s3); }
.keypoints ul { list-style: none; display: flex; flex-direction: column; gap: var(--s3); }
.keypoints li { font-family: var(--sans); font-size: .98rem; line-height: 1.5; color: var(--body); padding-left: var(--s5); position: relative; }
.keypoints li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }

.pullquote { margin: var(--s7) 0; padding: 0 0 0 var(--s6); border-left: 3px solid var(--navy-900); }
.pullquote p { font-family: var(--serif); font-size: 1.6rem; line-height: 1.35; font-weight: 500; color: var(--navy-900); font-style: italic; margin-bottom: var(--s3); }
.pullquote cite { font-family: var(--sans); font-size: .85rem; font-style: normal; color: var(--muted); font-weight: 600; }

.tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s6) 0; }
.tags a { font-family: var(--sans); font-size: .82rem; font-weight: 600; color: var(--slate); background: var(--mist); border: 1px solid var(--line); padding: 6px 14px; border-radius: var(--r-pill); transition: all var(--t); }
.tags a:hover { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }

.authorbio { display: flex; gap: var(--s4); align-items: flex-start; background: var(--mist); border-radius: var(--r-lg); padding: var(--s5); margin-top: var(--s6); }
.authorbio__name { font-family: var(--sans); font-weight: 700; color: var(--ink); margin-bottom: var(--s2); }
.authorbio__text { font-size: .92rem; color: var(--slate); line-height: 1.6; }

.post__aside { display: flex; flex-direction: column; gap: var(--s5); position: sticky; top: 96px; align-self: start; }

@media (max-width: 1024px) {
  .post__layout { grid-template-columns: 1fr; gap: var(--s6); }
  .post__aside { position: static; flex-direction: row; flex-wrap: wrap; }
  .post__aside .widget { flex: 1; min-width: 260px; }
}
@media (max-width: 600px) {
  .post__body p { font-size: 1.1rem; }
  .post__body .lede { font-size: 1.18rem; }
  .pullquote { padding-left: var(--s4); }
  .pullquote p { font-size: 1.3rem; }
  .post__aside { flex-direction: column; }
}

/* =============================================================
   20. PAGE HERO (section landings)
   ============================================================= */
.pagehero { background: var(--mist); border-bottom: 1px solid var(--line); padding: var(--s7) 0; margin-bottom: var(--s7); }
.pagehero__title { font-size: clamp(2rem, 4vw, 2.9rem); letter-spacing: -.025em; }
.pagehero__sub { font-family: var(--serif); font-size: 1.15rem; color: var(--slate); max-width: 60ch; margin-top: var(--s3); line-height: 1.5; }
.pagehero--jobs { background: linear-gradient(120deg, var(--navy-900), var(--navy-700)); border-bottom: none; position: relative; overflow: hidden; }
.pagehero--jobs::before { content: ""; position: absolute; inset: 0; background-image: var(--ekg); background-size: 560px; opacity: .45; }
.pagehero--jobs .wrap { position: relative; }
.pagehero__title--light { color: #fff; }
.pagehero__sub--light { color: rgba(255,255,255,.82); }
.breadcrumb--light a { color: rgba(255,255,255,.85); }
.breadcrumb--light, .breadcrumb--light span[aria-current] { color: rgba(255,255,255,.6); }
.breadcrumb--light span[aria-hidden] { color: rgba(255,255,255,.35); }

/* ---------- 21. ARCHIVE ---------- */
.archive { padding-bottom: var(--s8); }
.filters--archive { margin-bottom: var(--s6); }
.archive-lead { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s6); margin-bottom: var(--s7); padding-bottom: var(--s7); border-bottom: 2px solid var(--line); align-items: center; }
.archive-lead__media { aspect-ratio: 16/10; }
.archive-lead__title { font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.12; margin: var(--s3) 0; }
.archive-lead__title a:hover { color: var(--navy-700); }
.archive-lead__dek { font-family: var(--serif); font-size: 1.12rem; color: var(--slate); line-height: 1.5; }
.archive__grid { margin-bottom: var(--s7); }

.pagination { display: flex; gap: var(--s2); align-items: center; justify-content: center; }
.pagination a, .pagination span { min-width: 40px; height: 40px; display: grid; place-items: center; padding: 0 var(--s3); border-radius: var(--r-md); font-family: var(--sans); font-weight: 600; font-size: .9rem; color: var(--slate); border: 1px solid var(--line); }
.pagination span { border: none; }
.pagination a:hover { border-color: var(--navy-600); color: var(--navy-700); }
.pagination a.is-active { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.pagination__next { font-weight: 700; color: var(--red-700) !important; }

/* ---------- 22. JOBS BOARD ---------- */
.jobsearch { display: grid; grid-template-columns: 2fr 1fr auto; gap: var(--s3); margin-top: var(--s6); background: #fff; padding: var(--s3); border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.jobsearch__field { display: flex; }
.jobsearch input, .jobsearch select { width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); color: var(--ink); font-size: .95rem; }
.jobsearch input:focus-visible, .jobsearch select:focus-visible { border-color: var(--navy-600); }

.jobslayout { display: grid; grid-template-columns: 280px 1fr; gap: var(--s6); padding-bottom: var(--s8); align-items: start; }
.jobfilters { display: flex; flex-direction: column; gap: var(--s5); position: sticky; top: 96px; }
.jobfilters__head { display: flex; align-items: center; justify-content: space-between; }
.jobfilters__head h2 { font-size: 1.2rem; }
.jobfilters__clear { font-family: var(--sans); font-size: .8rem; font-weight: 700; color: var(--red-700); }
.jobfilters__clear:hover { color: var(--red-800); }
.facet { border: none; padding: 0; border-top: 1px solid var(--line); padding-top: var(--s4); }
.facet legend { font-family: var(--sans); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); margin-bottom: var(--s3); padding: 0; }
.facet__opt { display: flex; align-items: center; gap: var(--s2); padding: 6px 0; font-size: .9rem; color: var(--body); cursor: pointer; }
.facet__opt input { width: 17px; height: 17px; accent-color: var(--red-700); flex-shrink: 0; }
.facet__opt:hover { color: var(--navy-700); }

.jobresults__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding-bottom: var(--s4); margin-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.jobresults__count { font-family: var(--sans); font-weight: 700; color: var(--ink); }
.jobresults__count span { color: var(--red-700); }
.jobresults__sort { font-family: var(--sans); font-size: .85rem; color: var(--muted); display: flex; align-items: center; gap: var(--s2); }
.jobresults__sort select { padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-md); font-size: .85rem; color: var(--ink); }

.joblist { display: flex; flex-direction: column; gap: var(--s4); }
.jobcard { display: grid; grid-template-columns: 1fr auto; gap: var(--s5); align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t); }
.jobcard:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--line-2); }
.jobcard[hidden] { display: none; }
.jobcard__body { display: grid; grid-template-columns: 52px 1fr; gap: var(--s4); }
.jobcard__logo { width: 52px; height: 52px; border-radius: var(--r-md); background: var(--navy-900); color: #fff; display: grid; place-items: center; font-family: var(--sans); font-weight: 800; font-size: 1rem; }
.jobcard__title { font-size: 1.22rem; line-height: 1.2; }
.jobcard__title a:hover { color: var(--red-700); }
.jobcard__org { font-family: var(--sans); font-size: .9rem; font-weight: 600; color: var(--slate); margin-top: 2px; }
.jobcard__loc { font-family: var(--sans); font-size: .85rem; color: var(--muted); margin-top: 2px; }
.jobcard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s3); }
.jtag { font-family: var(--sans); font-size: .72rem; font-weight: 700; color: var(--slate); background: var(--mist); border: 1px solid var(--line); padding: 3px 9px; border-radius: var(--r-pill); }
.jtag--travel { background: #fdeceb; color: var(--red-800); border-color: #f6cdca; }
.jtag--ft { background: var(--green-bg); color: #0f5c39; border-color: #c2e6d4; }
.jobcard__aside { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 140px; }
.jobcard__pay { font-family: var(--mono); font-weight: 600; font-size: 1rem; color: var(--ink); }
.jobcard__date { font-family: var(--sans); font-size: .8rem; color: var(--muted); margin-bottom: var(--s2); }

.jobempty { text-align: center; padding: var(--s8) var(--s5); color: var(--slate); font-family: var(--sans); }
.linkbtn { color: var(--red-700); font-weight: 700; text-decoration: underline; }
.joblist--related { display: grid; grid-template-columns: 1fr; gap: var(--s4); }

/* ---------- 23. SINGLE JOB ---------- */
.jobpost__head { padding-top: var(--s6); }
.jobpost__topline { display: grid; grid-template-columns: 72px 1fr; gap: var(--s5); align-items: center; margin-top: var(--s4); }
.jobpost__logo { width: 72px; height: 72px; border-radius: var(--r-lg); background: var(--navy-900); color: #fff; display: grid; place-items: center; font-family: var(--sans); font-weight: 800; font-size: 1.4rem; }
.jobpost__logo--sm { width: 38px; height: 38px; font-size: .85rem; display: inline-grid; vertical-align: middle; border-radius: var(--r-md); }
.jobpost__title { font-size: clamp(1.7rem, 3.5vw, 2.5rem); letter-spacing: -.02em; }
.jobpost__org { font-family: var(--sans); font-weight: 600; color: var(--slate); margin: var(--s2) 0; }

.jobpost__layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--s7); padding: var(--s7) var(--s5) var(--s8); }
.jobsection { margin-bottom: var(--s6); }
.jobsection h2 { font-size: 1.45rem; margin-bottom: var(--s3); }
.jobsection p { font-family: var(--serif); font-size: 1.1rem; line-height: 1.7; color: var(--body); }
.jobsection__list { display: flex; flex-direction: column; gap: var(--s3); }
.jobsection__list li { font-family: var(--sans); font-size: 1rem; line-height: 1.55; color: var(--body); padding-left: var(--s5); position: relative; }
.jobsection__list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 2px; background: var(--red); }
.jobshare { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); }
.jobshare span { font-family: var(--sans); font-size: .85rem; font-weight: 600; color: var(--muted); }

.jobpost__aside { display: flex; flex-direction: column; gap: var(--s5); position: sticky; top: 96px; align-self: start; }
.applybox { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--sh-1); }
.applybox__pay { font-family: var(--mono); font-size: 1.5rem; font-weight: 600; color: var(--ink); }
.applybox__pay span { font-size: .9rem; color: var(--muted); }
.applybox__meta { font-family: var(--sans); font-size: .82rem; color: var(--muted); margin: var(--s2) 0 var(--s4); }
.applybox__btn, .applybox__save { width: 100%; margin-bottom: var(--s2); }
.applybox__save.is-saved { background: var(--green); }
.applybox__facts { margin-top: var(--s4); border-top: 1px solid var(--line); padding-top: var(--s4); display: grid; gap: var(--s3); }
.applybox__facts div { display: flex; justify-content: space-between; gap: var(--s3); }
.applybox__facts dt { font-family: var(--sans); font-size: .85rem; color: var(--muted); }
.applybox__facts dd { font-family: var(--sans); font-size: .85rem; font-weight: 600; color: var(--ink); text-align: right; }
.employer { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); background: var(--mist); }
.employer__name { font-size: 1.1rem; display: flex; align-items: center; gap: var(--s3); }
.employer__text { font-size: .9rem; color: var(--slate); line-height: 1.6; margin: var(--s3) 0 var(--s4); }

/* ---------- 24. RESOURCES ---------- */
.resblock { padding-bottom: var(--s7); }
.resgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.rescard { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); background: #fff; display: flex; flex-direction: column; gap: var(--s3); transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.rescard:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.rescard .badge { align-self: flex-start; }
.rescard__title { font-size: 1.2rem; line-height: 1.25; }
.rescard__dek { font-size: .92rem; color: var(--slate); line-height: 1.55; flex: 1; }

/* ---------- 25. NEWSLETTER PAGE ---------- */
.nlhero { background: linear-gradient(120deg, var(--navy-900), var(--navy-700)); color: #fff; position: relative; overflow: hidden; }
.nlhero::after { content: ""; position: absolute; left: -100px; bottom: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(247,77,68,.3), transparent 70%); }
.nlhero__inner { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s7); align-items: center; padding: var(--s9) 0; }
.nlhero__title { font-size: clamp(2rem, 4vw, 3rem); color: #fff; line-height: 1.1; margin: var(--s4) 0; letter-spacing: -.02em; }
.nlhero__dek { color: rgba(255,255,255,.85); font-size: 1.1rem; max-width: 46ch; line-height: 1.5; }
.nlhero__form { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s5); }
.nlhero__form input { flex: 1; min-width: 220px; padding: 15px 18px; border-radius: var(--r-md); border: 1.5px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: #fff; font-size: 1rem; }
.nlhero__form input::placeholder { color: rgba(255,255,255,.55); }
.nlhero__fine { font-size: .8rem; color: rgba(255,255,255,.6); margin-top: var(--s3); }
.nlpreview { background: #fff; border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--sh-3); transform: rotate(1.5deg); }
.nlpreview__from { font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.nlpreview__subject { font-size: 1.15rem; line-height: 1.25; margin: var(--s2) 0 var(--s4); color: var(--ink); }
.nlpreview__list { display: flex; flex-direction: column; gap: var(--s3); }
.nlpreview__list li { display: grid; grid-template-columns: 24px 1fr; gap: var(--s2); font-family: var(--sans); font-size: .9rem; color: var(--body); align-items: start; }
.nlpreview__list span { font-family: var(--serif); font-weight: 700; color: var(--red); }

.nlwhat { padding: var(--s8) var(--s5); }
.nlwhat__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); margin-top: var(--s5); }
.nlwhat__item { border-top: 3px solid var(--red); padding-top: var(--s4); }
.nlwhat__item h3 { font-size: 1.15rem; margin-bottom: var(--s2); }
.nlwhat__item p { font-size: .92rem; color: var(--slate); line-height: 1.55; }

.nlfaq { padding: 0 var(--s5) var(--s9); max-width: 760px; }
.nlfaq .section-head__title { margin-bottom: var(--s5); }
.faq { border-bottom: 1px solid var(--line); padding: var(--s4) 0; }
.faq summary { font-family: var(--sans); font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; font-size: 1.05rem; }
.faq summary::after { content: "+"; font-family: var(--serif); font-size: 1.5rem; color: var(--red); transition: transform var(--t); }
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { font-family: var(--serif); font-size: 1.05rem; color: var(--slate); line-height: 1.6; margin-top: var(--s3); }

/* ---------- 26. RESPONSIVE (new modules) ---------- */
@media (max-width: 1024px) {
  .jobslayout { grid-template-columns: 1fr; }
  .jobfilters { position: static; }
  .facet__opt { display: inline-flex; margin-right: var(--s4); }
  .jobpost__layout { grid-template-columns: 1fr; }
  .jobpost__aside { position: static; flex-direction: row; flex-wrap: wrap; }
  .jobpost__aside > * { flex: 1; min-width: 260px; }
  .archive-lead { grid-template-columns: 1fr; }
  .archive-lead__media { aspect-ratio: 16/9; }
  .nlhero__inner, .nlwhat__grid { grid-template-columns: 1fr 1fr; }
  .resgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .jobsearch { grid-template-columns: 1fr; }
  .nlhero__inner { grid-template-columns: 1fr; }
  .nlpreview { transform: none; order: -1; }
  .nlwhat__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .resgrid { grid-template-columns: 1fr; }
  .jobcard { grid-template-columns: 1fr; gap: var(--s4); }
  .jobcard__aside { text-align: left; align-items: flex-start; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s3); min-width: 0; }
  .jobcard__date { margin-bottom: 0; }
  .nlwhat__grid { grid-template-columns: 1fr; }
  .jobpost__topline { grid-template-columns: 56px 1fr; gap: var(--s4); }
}