/* =========================================================================
   The Weight Loss Update — modern magazine blog
   Layout modelled on the WENS Next Gen Blog theme:
   announcement bar, black masthead, category band, feature + list hero,
   sectioned card rows with a "Most Recent" rail.
   Every component value flows through a token. No magic numbers below.
   ========================================================================= */

/* ---------- tokens ---------- */
:root {
  --paper:      #FDFDF6;   /* pale cream page */
  --white:      #FFFFFF;
  --band:       #F1F6FF;   /* announcement + category bands */
  --black:      #000000;   /* masthead */
  --ink:        #16203A;   /* headline navy */
  --ink-2:      #454F66;
  --ink-3:      #6B7488;
  --line:       #DDE3ED;
  --line-2:     #C3CBDA;
  --blue:       #2B5CE6;
  --blue-dk:    #1C40A8;
  --blue-sft:   #E7EDFD;
  --orange:     #E8501E;
  --orange-dk:  #B93A0F;
  --red:        #A81E2A;

  /* type — one geometric sans for headlines, one serif for reading */
  --sans: "Poppins", ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --fs-50:  0.6875rem;  /* 11 */
  --fs-100: 0.8125rem;  /* 13 */
  --fs-200: 0.9375rem;  /* 15 */
  --fs-300: 1.0625rem;  /* 17 — body */
  --fs-400: 1.25rem;    /* 20 */
  --fs-500: 1.625rem;   /* 26 */
  --fs-600: clamp(1.75rem, 3.2vw, 2.375rem);
  --fs-700: clamp(2rem, 4.4vw, 3rem);

  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  --wrap: 1200px;
  --measure: 36rem;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --t-fast: 150ms ease;
  --t-med: 250ms ease;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--serif); font-size: var(--fs-300); line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; font-family: var(--sans); font-weight: 700; line-height: 1.18; letter-spacing: -.015em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

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

/* ---------- focus + helpers ---------- */
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: var(--r-sm); }
.mast :focus-visible, .topbar :focus-visible { outline-color: var(--white); }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; white-space: nowrap; clip-path: inset(50%); }
.skip {
  position: absolute; left: var(--s-4); top: -6rem; z-index: 100;
  background: var(--blue); color: #fff; padding: var(--s-3) var(--s-4);
  font-family: var(--sans); font-size: var(--fs-100); font-weight: 600;
  text-decoration: none; border-radius: var(--r-md); transition: top var(--t-fast);
}
.skip:focus { top: var(--s-4); }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-5); }

/* ---------- announcement bar ---------- */
.topbar { background: var(--band); border-bottom: 1px solid var(--line); }
.topbar p {
  text-align: center; padding-block: var(--s-3);
  font-family: var(--sans); font-size: var(--fs-100); color: var(--ink-2);
}
.topbar b { color: var(--ink); font-weight: 700; }
.topbar a { color: var(--blue); font-weight: 600; text-decoration: none; }
.topbar a:hover { text-decoration: underline; }

/* ---------- masthead ---------- */
.mast { background: var(--black); }
.mast__inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--s-5); min-height: 76px;
}
.mast__social { display: flex; gap: var(--s-3); }
.mast__social a {
  width: 30px; height: 30px; border-radius: 999px; border: 1.5px solid #FFFFFF;
  display: grid; place-items: center; color: #FFFFFF;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.mast__social a:hover { background: var(--blue); border-color: var(--blue); }
.sitename {
  justify-self: center; text-align: center; text-decoration: none; color: #FFFFFF;
  font-family: var(--sans); font-weight: 600; font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  letter-spacing: -.01em; line-height: 1.15;
}
.sitename:hover { text-decoration: underline; text-underline-offset: 3px; }
.mast__search { justify-self: end; display: flex; gap: var(--s-2); }
.mast__search input {
  width: min(15rem, 40vw); border: 0; border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3); font-family: var(--serif); font-size: var(--fs-200);
  background: var(--white); color: var(--ink);
}
.mast__search input::placeholder { color: var(--ink-3); }
.mast__search button {
  border: 0; background: var(--blue); color: #fff; border-radius: var(--r-sm);
  padding-inline: var(--s-4); cursor: pointer; display: grid; place-items: center;
  transition: background var(--t-fast);
}
.mast__search button:hover { background: var(--blue-dk); }

/* ---------- category nav ---------- */
.catnav { background: var(--band); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.catnav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.catnav__links { display: flex; gap: var(--s-6); }
.catnav__links a {
  font-family: var(--sans); font-size: var(--fs-200); font-weight: 500;
  text-decoration: none; color: var(--ink); padding-block: var(--s-4);
  border-bottom: 3px solid transparent; transition: color var(--t-fast), border-color var(--t-fast);
}
.catnav__links a:hover { color: var(--blue); }
.catnav__links a[aria-current="page"] { color: var(--blue); border-bottom-color: var(--orange); font-weight: 600; }
.catnav__note { font-family: var(--sans); font-size: var(--fs-50); color: var(--ink-2); letter-spacing: .04em; text-transform: uppercase; }

.burger { display: none; background: none; border: 1px solid var(--line-2); border-radius: var(--r-sm); width: 40px; height: 34px; padding: 0; place-items: center; gap: 4px; cursor: pointer; }
.burger span { display: block; width: 16px; height: 2px; background: var(--ink); transition: transform var(--t-fast), opacity var(--t-fast); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobilenav { display: none; background: var(--band); border-bottom: 1px solid var(--line); }
.mobilenav[data-open] { display: block; }
.mobilenav .wrap { display: grid; padding-block: var(--s-2); }
.mobilenav a { padding: var(--s-3) 0; text-decoration: none; border-bottom: 1px solid var(--line); font-family: var(--sans); font-size: var(--fs-200); font-weight: 500; }
.mobilenav a:last-child { border-bottom: 0; }

/* ---------- shared bits ---------- */
.cat {
  display: inline-block; font-family: var(--sans); font-size: var(--fs-50); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--orange-dk);
}
.meta { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; font-family: var(--sans); font-size: var(--fs-50); }
.meta__who { color: var(--ink-3); }
.meta__when { color: var(--red); font-weight: 600; }
.excerpt { font-size: var(--fs-200); color: var(--ink-2); }
.muted { color: var(--ink-3); }
.thumb { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--r-md); background: var(--blue-sft); }
/* every media wrapper crops its art to the box, not the other way round */
.feature__media img, .postrow__media img, .card__media img,
.newsitem__media img, .railrow__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ---------- hero ---------- */
.hero { padding-block: var(--s-7); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s-7); }

.feature { display: grid; gap: var(--s-4); text-decoration: none; }
.feature__media { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-lg); }
.feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-med); }
a.feature:hover .feature__media img { transform: scale(1.03); }
.feature h1, .feature h2 { font-size: var(--fs-700); }
a.feature:hover h1, a.feature:hover h2 { color: var(--blue); }

.postlist { display: grid; gap: var(--s-5); align-content: start; }
.postrow { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--s-4); text-decoration: none; align-items: start; }
.postrow__media { aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--r-md); }
.postrow__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-med); }
a.postrow:hover .postrow__media img { transform: scale(1.05); }
.postrow__body { display: grid; gap: var(--s-2); }
.postrow h2, .postrow h3 { font-size: var(--fs-400); }
a.postrow:hover h2, a.postrow:hover h3 { color: var(--blue); }

/* ---------- section blocks ---------- */
.block { padding-block: var(--s-7); border-top: 1px solid var(--line); }
.block--tint { background: var(--white); }
.block--band { background: var(--band); }
.block--dark { background: var(--ink); color: var(--paper); border-top-color: var(--ink); }
.block--dark .blockhead h1, .block--dark .blockhead h2, .block--dark h3 { color: var(--paper); }
.block--dark .excerpt, .block--dark .muted { color: #B9C1D2; }
.block--dark .cat { color: #FFA983; }

.blockhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-5); margin-bottom: var(--s-6); padding-bottom: var(--s-3); border-bottom: 2px solid var(--line); }
.blockhead h1, .blockhead h2 { font-family: var(--serif); font-weight: 600; font-size: var(--fs-600); letter-spacing: -.01em; }
.blockhead a { font-family: var(--sans); font-size: var(--fs-100); font-weight: 600; color: var(--blue); text-decoration: none; white-space: nowrap; }
.blockhead a:hover { text-decoration: underline; }
.block--dark .blockhead { border-bottom-color: #2C3552; }
.block--dark .blockhead a { color: #93AEFF; }

.lede { max-width: var(--measure); margin-bottom: var(--s-6); font-size: var(--fs-400); color: var(--ink-2); }
.block--dark .lede { color: #B9C1D2; }

/* main + rail */
.withrail { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--s-8); align-items: start; }
.rail { display: grid; gap: var(--s-5); }
.rail__hed { font-family: var(--sans); font-size: var(--fs-400); font-weight: 700; padding-bottom: var(--s-3); border-bottom: 2px solid var(--line); }
.railrow { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: var(--s-3); text-decoration: none; align-items: start; }
.railrow__media { aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--r-sm); }
.railrow h4 { font-size: var(--fs-200); line-height: 1.35; }
a.railrow:hover h4 { color: var(--blue); }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card {
  display: flex; flex-direction: column; gap: var(--s-3); text-decoration: none;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-4); transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.block--tint .card { background: var(--paper); }
a.card:hover { border-color: var(--blue); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.10); }
.card__media { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-md); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card h3 { font-size: var(--fs-400); }
a.card:hover h3 { color: var(--blue); }
.card__foot { margin-top: auto; padding-top: var(--s-2); font-family: var(--sans); font-size: var(--fs-50); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.block--dark .card { background: #1E2942; border-color: #2C3552; }
.block--dark a.card:hover { border-color: #6E93FF; }

/* ---------- callout boxes ---------- */
.note { border: 1px solid var(--line); border-left: 5px solid var(--blue); background: var(--white); border-radius: 0 var(--r-md) var(--r-md) 0; padding: var(--s-5); display: grid; gap: var(--s-3); }
.note__hed { font-family: var(--sans); font-size: var(--fs-50); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-dk); }
.note p { font-size: var(--fs-200); color: var(--ink-2); }
.note--warn { border-left-color: var(--red); }
.note--warn .note__hed { color: var(--red); }
.note--fact { border-left-color: var(--orange); }
.note--fact .note__hed { color: var(--orange-dk); }
.note strong { color: var(--ink); }

/* ---------- bar chart ---------- */
.chart { display: grid; gap: var(--s-4); }
.chart__row { display: grid; grid-template-columns: 10rem minmax(0, 1fr) 3.5rem; gap: var(--s-4); align-items: center; }
.chart__name { font-family: var(--sans); font-size: var(--fs-200); font-weight: 600; }
.chart__name small { display: block; font-weight: 400; font-size: var(--fs-50); color: var(--ink-3); }
.chart__track { background: var(--blue-sft); border-radius: 999px; height: 20px; overflow: hidden; }
.chart__fill { display: block; height: 100%; border-radius: 999px; background: var(--blue); }
.chart__fill--alt { background: var(--orange); }
.chart__fill--faint { background: var(--line-2); }
.chart__val { font-family: var(--sans); font-size: var(--fs-200); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- table ---------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); }
.dtable { font-size: var(--fs-200); min-width: 680px; }
.dtable th {
  text-align: left; font-family: var(--sans); font-size: var(--fs-50); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
  padding: var(--s-4); border-bottom: 2px solid var(--line); white-space: nowrap;
}
.dtable td { padding: var(--s-4); border-bottom: 1px solid var(--line); vertical-align: middle; }
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable tbody tr { transition: background var(--t-fast); }
.dtable tbody tr:hover { background: var(--blue-sft); }
.dtable .name { font-family: var(--sans); font-weight: 700; font-size: var(--fs-300); }
.dtable .name a { text-decoration: none; }
.dtable .name a:hover { color: var(--blue); text-decoration: underline; }
.dtable .name small { display: block; font-weight: 400; font-size: var(--fs-100); color: var(--ink-3); font-family: var(--serif); }
.dtable .num { font-family: var(--sans); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- pills ---------- */
.tag {
  display: inline-block; font-family: var(--sans); font-size: var(--fs-50); font-weight: 600;
  letter-spacing: .05em; padding: 3px var(--s-3); border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--ink-2); background: var(--white); white-space: nowrap;
}
.tag--yes { background: var(--blue); border-color: var(--blue); color: #fff; }
.tag--test { background: #FDEDE7; border-color: var(--orange); color: var(--orange-dk); }

/* ---------- filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); }
.filter {
  border: 1px solid var(--line-2); background: var(--white); border-radius: 999px; cursor: pointer;
  padding: var(--s-2) var(--s-4); font-family: var(--sans); font-size: var(--fs-100); font-weight: 500;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.filter:hover { border-color: var(--blue); color: var(--blue); }
.filter[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.empty { padding: var(--s-8) 0; text-align: center; color: var(--ink-3); }

/* ---------- news list ---------- */
.newslist { display: grid; }
.newsitem { display: grid; grid-template-columns: 112px 7rem minmax(0, 1fr); gap: var(--s-5); padding-block: var(--s-5); border-top: 1px solid var(--line); align-items: start; }
.newslist .newsitem:last-child { border-bottom: 1px solid var(--line); }
.newsitem__media { aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--r-md); }
.newsitem__date { font-family: var(--sans); font-size: var(--fs-50); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--red); padding-top: 3px; }
.newsitem__body { display: grid; gap: var(--s-2); }
.newsitem h2 { font-size: var(--fs-400); }
.newsitem__tags { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-1); }

/* ---------- Q&A ---------- */
.qa { display: grid; gap: var(--s-3); }
.qa details { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); transition: border-color var(--t-fast); }
.qa details[open] { border-color: var(--blue); }
.qa summary {
  list-style: none; cursor: pointer; padding: var(--s-4) var(--s-5);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-5);
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-300); line-height: 1.35;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--blue); }
.qa summary::after { content: "+"; flex: none; font-size: var(--fs-500); line-height: 1; color: var(--blue); font-weight: 400; }
.qa details[open] summary::after { content: "\2013"; }
.qa__a { padding: 0 var(--s-5) var(--s-5); max-width: var(--measure); color: var(--ink-2); display: grid; gap: var(--s-3); font-size: var(--fs-200); }

/* ---------- article ---------- */
.article { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: var(--s-8); align-items: start; }
.toc { position: sticky; top: 76px; display: grid; gap: var(--s-2); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4); }
.toc__hed { font-family: var(--sans); font-size: var(--fs-50); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-dk); }
.toc a { font-family: var(--sans); font-size: var(--fs-200); text-decoration: none; color: var(--ink-2); padding-block: var(--s-1); }
.toc a:hover { color: var(--blue); }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { font-size: var(--fs-500); margin-top: var(--s-7); scroll-margin-top: 84px; }
.prose h3 { font-size: var(--fs-400); margin-top: var(--s-6); }
.prose p { color: var(--ink-2); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { padding-left: var(--s-5); display: grid; gap: var(--s-3); color: var(--ink-2); }
.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--blue-dk); }
.pullquote { border-left: 5px solid var(--orange); padding: var(--s-2) 0 var(--s-2) var(--s-5); font-family: var(--sans); font-size: var(--fs-400); font-weight: 600; line-height: 1.4; color: var(--ink); }

.speclist { border-top: 1px solid var(--line); }
.speclist > div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--line); }
.speclist dt { font-family: var(--sans); font-size: var(--fs-50); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
.speclist dd { margin: 0; color: var(--ink-2); font-size: var(--fs-200); }

.sources { display: grid; gap: var(--s-3); font-size: var(--fs-200); color: var(--ink-3); counter-reset: src; }
.sources li { list-style: none; counter-increment: src; display: grid; grid-template-columns: 2rem minmax(0,1fr); }
.sources li::before { content: counter(src) "."; font-family: var(--sans); font-weight: 700; color: var(--orange-dk); }

/* ---------- signup ---------- */
.signup { display: grid; gap: var(--s-2); grid-template-columns: minmax(0, 1fr) auto; margin-top: var(--s-5); }
.signup input {
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--white);
  padding: var(--s-3) var(--s-4); font-family: var(--serif); font-size: var(--fs-200); color: var(--ink); min-width: 0;
}
.signup input::placeholder { color: var(--ink-3); }
.btn {
  display: inline-block; border: 0; border-radius: var(--r-md); background: var(--blue); color: #fff;
  padding: var(--s-3) var(--s-5); cursor: pointer; text-decoration: none;
  font-family: var(--sans); font-size: var(--fs-200); font-weight: 600;
  transition: background var(--t-fast), transform var(--t-fast);
}
.btn:hover { background: var(--blue-dk); }
.btn:active { transform: translateY(1px); }
.btn--orange { background: var(--orange-dk); }
.btn--orange:hover { background: #8E2C0B; }
.btn--ghost { background: transparent; color: var(--blue); border: 1px solid var(--line-2); }
.btn--ghost:hover { background: var(--blue-sft); color: var(--blue-dk); }
.block--dark .signup input { background: #1E2942; border-color: #2C3552; color: var(--paper); }
.block--dark .signup input::placeholder { color: #7A85A0; }
.signup__ok { margin-top: var(--s-3); font-family: var(--sans); font-size: var(--fs-200); font-weight: 600; color: var(--orange-dk); }
.signup__note { margin-top: var(--s-3); font-size: var(--fs-100); color: var(--ink-3); }
.block--dark .signup__note { color: #8C96AE; }
.block--dark .signup__ok { color: #FFA983; }

/* ---------- footer ---------- */
.footer { background: var(--ink); color: #B9C1D2; padding-block: var(--s-8) var(--s-6); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--s-7); }
.footer .sitename { color: #FFFFFF; justify-self: start; text-align: left; font-size: var(--fs-400); }
.footer__blurb { margin-top: var(--s-3); font-size: var(--fs-200); max-width: 26rem; }
.footer h3 { font-family: var(--sans); font-size: var(--fs-50); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #FFA983; margin-bottom: var(--s-3); }
.footer ul { display: grid; gap: var(--s-2); }
.footer li { list-style: none; }
.footer a { font-size: var(--fs-200); color: #B9C1D2; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.warning { margin-top: var(--s-7); background: #1E2942; border: 1px solid #2C3552; border-radius: var(--r-lg); padding: var(--s-5); font-size: var(--fs-200); }
.warning strong { display: block; font-family: var(--sans); font-size: var(--fs-50); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #FF9B72; margin-bottom: var(--s-2); }
.colophon { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid #2C3552; display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; font-family: var(--sans); font-size: var(--fs-50); color: #8C96AE; }

/* ---------- responsive ---------- */
@media (max-width: 1040px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .withrail { grid-template-columns: 1fr; }
  .article { grid-template-columns: 1fr; }
  .toc { position: static; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .catnav__links, .catnav__note { display: none; }
  .burger { display: grid; }
  .mast__inner { grid-template-columns: auto minmax(0, 1fr); min-height: 64px; }
  .mast__social { display: none; }
  .sitename { justify-self: start; text-align: left; }
  .mast__search { min-width: 0; }
  .mast__search input { width: 100%; min-width: 0; }
}
/* below this the logo and the search stop fitting on one line together */
@media (max-width: 640px) {
  .mast__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); padding-block: var(--s-4); }
  .sitename { justify-self: center; }
  .mast__search { justify-self: stretch; }
}
@media (max-width: 640px) {
  .cards { grid-template-columns: 1fr; }
  .block, .hero { padding-block: var(--s-6); }
  .newsitem { grid-template-columns: 84px minmax(0, 1fr); }
  .newsitem__date { grid-column: 2; padding-top: 0; }
  .newsitem__body { grid-column: 2; }
  .chart__row { grid-template-columns: 1fr; gap: var(--s-2); }
  .chart__val { text-align: left; }
  .speclist > div { grid-template-columns: 1fr; gap: var(--s-1); }
  .footer__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .signup { grid-template-columns: 1fr; }
  .postrow { grid-template-columns: 96px minmax(0, 1fr); }
}