/* ==========================================================================
   ZedHome — News & Insights (editorial)
   Three surfaces share one story component (.news-card, partials/card-news.php):
     • homepage      .news-feature   one lead story, then two secondary stories
     • listing       .news-masthead + .news-lead + .news-list
     • article page  .article-*      (partials/news-article.php)
   Hierarchy comes from photography, type, alignment and white space, not from
   boxes: a story has no border, background or shadow; thin rules separate
   groups, and the orange accent is used only for small details (category
   text, rules, list markers, link underlines, the arrow on hover).
   Type is the site's own pair: Bricolage Grotesque for headlines, Manrope for
   everything else. Everything is real data from news_posts; when a field is
   missing (no category, excerpt, image or body) that element is simply not
   drawn and the layout closes up.
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* Text link — "View all", "Back to…", "Newer / Older stories"             */
/* ---------------------------------------------------------------------- */
.news-textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-ink);
  white-space: nowrap;
}
.news-textlink span,
.news-card__cta span {
  padding-bottom: 2px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--dur-base) var(--ease-standard);
}
.news-textlink:hover span { background-size: 100% 1px; }
.news-textlink svg,
.news-card__cta svg { width: 15px; height: 15px; transition: transform var(--dur-base) var(--ease-standard); }
.news-textlink:hover svg { transform: translateX(4px); }
.news-textlink--back svg { transform: scaleX(-1); }
.news-textlink--back:hover svg { transform: translateX(-4px) scaleX(-1); }

/* ---------------------------------------------------------------------- */
/* Story                                                                    */
/* ---------------------------------------------------------------------- */
.news-card { position: relative; display: flex; flex-direction: column; min-width: 0; }

.news-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--color-border);
  border-radius: var(--radius-xs);
}
.news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-standard);
}
/* A hairline edge so pale photographs do not melt into the page. */
.news-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(30, 27, 26, 0.08);
  pointer-events: none;
}
.news-card__media--empty { display: grid; place-items: center; color: var(--color-text-soft); }
.news-card__media--empty svg { width: 34px; height: 34px; opacity: 0.45; }
.news-card:hover .news-card__media img { transform: scale(1.04); }

.news-card__body { display: flex; flex: 1; flex-direction: column; padding-top: 14px; }
.news-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 6px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}
.news-card__cat { color: var(--color-brand-dark); }
.news-card__cat + time::before { content: "·"; margin-inline: 0.6em; color: var(--color-text-soft); }

.news-card__title {
  margin: 0;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.3;
  letter-spacing: -0.012em;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.news-card__title a { color: var(--color-ink); transition: color var(--dur-fast) var(--ease-standard); }
.news-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* the whole story is the link */
.news-card__title a:focus-visible { outline: none; }
.news-card:hover .news-card__title a { color: var(--color-brand-dark); }
.news-card:has(a:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 8px; }

.news-card__excerpt {
  display: -webkit-box;
  margin: 8px 0 0;
  overflow: hidden;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--color-text);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.news-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 14px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-ink);
}
.news-card:hover .news-card__cta { color: var(--color-brand-dark); }
.news-card:hover .news-card__cta span { background-size: 100% 1px; }
.news-card:hover .news-card__cta svg { transform: translateX(4px); }

/* Lead: the featured story is the biggest thing in its group. */
.news-card--lead .news-card__media { aspect-ratio: 16 / 9; }
.news-card--lead .news-card__meta { margin-bottom: 10px; }
.news-card--lead .news-card__title { font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2rem); line-height: 1.14; letter-spacing: -0.022em; }
.news-card--lead .news-card__excerpt { max-width: 34rem; margin-top: 12px; font-size: var(--fs-base); -webkit-line-clamp: 3; }
.news-card--lead .news-card__cta { padding-top: 18px; font-size: var(--fs-md); }
.news-card--lead.news-card--long .news-card__title { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem); line-height: 1.18; }

@media (min-width: 981px) {
  .news-card--lead {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: clamp(28px, 3.5vw, 56px);
    align-items: center;
  }
  .news-card--lead .news-card__body { padding-top: 0; }
}

/* Brief: a secondary story, thumbnail beside the text (stacked on tablets). */
.news-card--brief .news-card__title { font-size: clamp(1.0625rem, 1.02rem + 0.25vw, 1.1875rem); }
.news-card--brief .news-card__excerpt { -webkit-line-clamp: 2; }
@media (min-width: 981px), (max-width: 640px) {
  .news-card--brief { display: grid; grid-template-columns: minmax(104px, 34%) minmax(0, 1fr); column-gap: 18px; align-items: start; }
  .news-card--brief .news-card__media { aspect-ratio: 4 / 3; }
  .news-card--brief .news-card__body { padding-top: 0; }
}

/* ---------------------------------------------------------------------- */
/* Homepage: lead story, then two secondary stories under a firm rule      */
/* ---------------------------------------------------------------------- */
.news-feature { display: grid; row-gap: clamp(32px, 4vw, 52px); }
.news-feature__more {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: clamp(28px, 3.5vw, 44px);
  border-top: 1px solid var(--color-ink);
}
.news-feature__more .news-card:first-child { padding-right: clamp(24px, 3vw, 48px); }
.news-feature__more .news-card + .news-card { padding-left: clamp(24px, 3vw, 48px); border-left: 1px solid var(--color-border-strong); }
.news-feature--2 .news-feature__more { grid-template-columns: minmax(0, 1fr); }
.news-feature--2 .news-feature__more .news-card { max-width: 46rem; padding-right: 0; }

@media (max-width: 640px) {
  .news-feature__more { grid-template-columns: minmax(0, 1fr); }
  .news-feature__more .news-card:first-child { padding-right: 0; }
  .news-feature__more .news-card + .news-card { padding-left: 0; padding-top: 20px; margin-top: 20px; border-left: 0; border-top: 1px solid var(--color-border-strong); }
  .news-card--brief .news-card__excerpt { display: none; }
  .news-card--brief .news-card__cta { padding-top: 10px; font-size: var(--fs-sm); }
}

/* ---------------------------------------------------------------------- */
/* Listing                                                                  */
/* ---------------------------------------------------------------------- */
.news-masthead { padding-top: clamp(16px, 2.5vw, 32px); background: var(--color-paper); border-bottom: 1px solid var(--color-border-strong); }
.news-masthead__inner { position: relative; padding-top: clamp(16px, 2.5vw, 28px); border-top: 2px solid var(--color-ink); }
.news-masthead__inner::before { content: ""; position: absolute; top: -2px; left: 0; width: 72px; height: 2px; background: var(--color-brand); }

.news-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}
.news-crumbs a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; margin-inline: -4px; color: var(--color-text-soft); }
.news-crumbs a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.news-crumbs [aria-current] { color: var(--color-ink); }

.news-masthead__row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: end;
  gap: 20px clamp(32px, 6vw, 96px);
  padding-block: clamp(0px, 1vw, 8px) clamp(24px, 3vw, 36px);
}
.news-masthead h1 {
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.news-masthead__lede { max-width: 30rem; margin: 0 0 0.3em; font-size: var(--fs-body); line-height: 1.55; color: var(--color-text); }

.news-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 32px;
  border-top: 1px solid var(--color-border-strong);
}
.news-cats {
  display: flex;
  align-self: stretch;
  flex: 1 1 320px;
  gap: clamp(20px, 3vw, 36px);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.news-cats::-webkit-scrollbar { display: none; }
.news-cats__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-height: 52px;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.news-cats__link:hover { color: var(--color-ink); border-bottom-color: var(--color-border-strong); }
.news-cats__link.is-active { color: var(--color-ink); font-weight: 700; border-bottom-color: var(--color-brand); }
.news-cats__count { font-size: var(--fs-2xs); font-weight: 700; color: var(--color-text-soft); }

.news-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 300px;
  min-height: 44px;
  margin: 10px 0 10px auto;
  padding-left: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xs);
}
.news-search:focus-within { border-color: var(--color-ink); outline: 2px solid var(--color-focus); outline-offset: 2px; }
.news-search > svg { flex-shrink: 0; width: 17px; height: 17px; color: var(--color-text-soft); }
.news-search input { flex: 1; min-width: 0; padding: 10px 0; font: inherit; font-size: var(--fs-base); color: var(--color-ink); background: none; border: 0; }
.news-search input:focus { outline: none; }
.news-search input::placeholder { color: var(--color-text-soft); }
.news-search button { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; color: var(--color-ink); background: none; border: 0; cursor: pointer; }
.news-search button svg { width: 17px; height: 17px; transition: transform var(--dur-base) var(--ease-standard); }
.news-search button:hover svg { transform: translateX(3px); }

.news-directory { padding-block: clamp(32px, 4.5vw, 64px) var(--section-pad-y); }
.news-count { margin: 0 0 clamp(24px, 3vw, 36px); font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-soft); }
.news-count a { display: inline-flex; align-items: center; min-height: 44px; margin-left: 12px; color: var(--color-brand-dark); text-decoration: underline; text-underline-offset: 3px; }

.news-lead { margin-bottom: clamp(36px, 5vw, 64px); }

.news-grid-head { margin-bottom: 20px; }
.news-grid-head__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

.news-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  column-gap: clamp(24px, 2.4vw, 36px);
  row-gap: clamp(32px, 4vw, 48px);
}
.news-list .news-card { padding-top: 16px; border-top: 1px solid var(--color-border-strong); }
.news-list .news-card:has(a:focus-visible) { outline-offset: 6px; }

@media (max-width: 980px) {
  .news-masthead__row { grid-template-columns: minmax(0, 1fr); }
  .news-masthead__lede { margin-bottom: 0; }
}
/* Phones: one column, the rest of the stories become compact rows (thumbnail, category / date, headline). */
@media (max-width: 640px) {
  .news-search { flex-basis: 100%; margin: 10px 0 14px; }
  .news-cats { flex-basis: 100%; align-self: auto; border-bottom: 1px solid var(--color-border); }
  .news-list { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .news-list .news-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; align-items: start; padding-block: 20px; }
  .news-list .news-card .news-card__media { aspect-ratio: 4 / 3; }
  .news-list .news-card .news-card__body { padding-top: 0; }
  .news-list .news-card .news-card__title { font-size: var(--fs-body); line-height: 1.3; }
  .news-list .news-card .news-card__excerpt { display: none; }
  .news-list .news-card .news-card__cta { padding-top: 8px; font-size: var(--fs-sm); }
  .news-list--related .news-card:last-child { padding-bottom: 0; }
}

.news-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(44px, 5vw, 72px);
  padding-top: 8px;
  border-top: 1px solid var(--color-ink);
}
.news-pager__status { margin: 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-soft); }

.news-empty { max-width: 36rem; padding-block: clamp(28px, 4vw, 48px); border-top: 1px solid var(--color-ink); }
.news-empty h2 { margin: 0 0 10px; font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); letter-spacing: -0.02em; }
.news-empty p { margin: 0 0 10px; font-size: var(--fs-body); line-height: 1.55; color: var(--color-text); }

/* ---------------------------------------------------------------------- */
/* Article page (partials/news-article.php) — Swiss / editorial grid       */
/* Grotesque display type for the headline and interface, a text serif     */
/* (Newsreader) for the reading column, hairline rules instead of boxes,   */
/* one accent colour. Rails fold away below 1180px.                        */
/* ---------------------------------------------------------------------- */
.ar { --ar-serif: 'Newsreader', Georgia, 'Times New Roman', serif; --ar-rule: var(--color-border); --ar-ease: cubic-bezier(0.22, 1, 0.36, 1); background: var(--color-surface); }

.article-preview-bar { background: var(--color-ink); color: #fff; font-size: var(--fs-sm); }
.article-preview-bar .container { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-4); padding-block: 10px; }
.article-preview-bar strong { color: var(--color-brand); }
.article-preview-bar span { color: rgba(255, 255, 255, 0.85); }
.article-preview-bar a { margin-left: auto; font-weight: 700; color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Reading progress: a 2px line pinned under the sticky site header. */
.ar-progress { position: sticky; top: 80px; z-index: calc(var(--z-nav) - 1); height: 2px; margin-bottom: -2px; pointer-events: none; }
.ar-progress span { display: block; height: 100%; background: var(--color-brand); transform: scaleX(0); transform-origin: left; }

/* Header */
.ar-hero { padding-block: clamp(20px, 3vw, 36px) clamp(32px, 4vw, 52px); }
.ar-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-bottom: clamp(28px, 4vw, 56px); font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-soft); }
.ar-crumbs a { display: inline-flex; align-items: center; min-height: 36px; color: var(--color-text-soft); transition: color 180ms; }
.ar-crumbs a:hover { color: var(--color-ink); }
.ar-crumbs svg { width: 12px; height: 12px; color: var(--color-border-strong); }
.ar-crumbs a:last-of-type { color: var(--color-ink); }

.ar-hero__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: 32px clamp(40px, 6vw, 96px); align-items: end; }
.ar-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-soft); }
.ar-kicker__cat { padding: 5px 10px; border-radius: 6px; background: var(--color-brand-50); color: var(--color-brand-dark); }
.ar-kicker__sep { width: 18px; height: 1px; background: var(--color-border-strong); }
.ar-title { margin: 0; max-width: 22ch; font-size: clamp(1.75rem, 1.25rem + 2.1vw, 3rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.03em; color: var(--color-ink); text-wrap: balance; }
.ar-title--long { max-width: 28ch; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.15; }
.ar-standfirst { max-width: 62ch; margin: clamp(14px, 2vw, 22px) 0 0; font-family: var(--ar-serif); font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.2rem); font-weight: 400; line-height: 1.6; color: var(--color-text); text-wrap: pretty; }

.ar-facts { padding-top: 18px; border-top: 2px solid var(--color-ink); }
.ar-author { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; }
.ar-author strong { display: block; font-size: var(--fs-md); font-weight: 600; color: var(--color-ink); line-height: 1.3; }
.ar-facts__label { display: block; margin: 0 0 2px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-soft); }
.ar-avatar { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--color-surface); border: 1px solid var(--ar-rule); overflow: hidden; }
.ar-avatar img { width: 36px; height: 36px; object-fit: contain; }
.ar-avatar--lg { width: 64px; height: 64px; }
.ar-avatar--lg img { width: 52px; height: 52px; }
.ar-facts dl { margin: 0; }
.ar-facts dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--ar-rule); font-size: var(--fs-sm); }
.ar-facts dt { color: var(--color-text-soft); }
.ar-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-ink); text-align: right; }

/* Cover */
.ar-cover { position: relative; width: 100%; margin: 0; aspect-ratio: 21 / 9; border-radius: 18px; overflow: hidden; background: var(--color-border); }
.ar-cover img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; animation: ar-cover 1.4s var(--ar-ease) both; }
.ar-cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(30, 27, 26, 0.08); pointer-events: none; }
@keyframes ar-cover { from { transform: scale(1.06); opacity: 0; } to { transform: none; opacity: 1; } }

/* Body grid: rail / text / rail */
.ar-layout { display: grid; grid-template-columns: 224px minmax(0, 42rem) 260px; justify-content: space-between; gap: 48px; padding-block: clamp(40px, 5vw, 72px) clamp(56px, 7vw, 104px); }
.ar-rail { position: sticky; top: 112px; align-self: start; }
.ar-rail--left { display: flex; flex-direction: column; }
.ar-rail--left > * + * { margin-top: 32px; }
.ar-rail__label { margin: 0 0 12px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-soft); }

.ar-toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--ar-rule); }
.ar-toc a { position: relative; display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 2px solid transparent; font-size: var(--fs-sm); line-height: 1.4; color: var(--color-text-soft); transition: color 180ms, border-color 180ms; }
.ar-toc a:hover { color: var(--color-ink); }
.ar-toc a.is-active { border-left-color: var(--color-brand); color: var(--color-ink); font-weight: 700; }
.ar-toc li.is-sub a { padding-left: 26px; }

.ar-share__row { display: flex; flex-wrap: wrap; gap: 6px; }
.ar-share__btn { position: relative; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--ar-rule); border-radius: 50%; background: var(--color-surface); color: var(--color-ink); cursor: pointer; transition: background-color 180ms, border-color 180ms, color 180ms; }
.ar-share__btn svg { width: 16px; height: 16px; }
.ar-share__btn:hover { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }
.ar-share__btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ar-share__copy::after { content: "Link copied"; position: absolute; left: 50%; bottom: calc(100% + 8px); padding: 5px 9px; border-radius: 6px; background: var(--color-ink); color: #fff; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; opacity: 0; transform: translate(-50%, 4px); pointer-events: none; transition: opacity 180ms, transform 180ms; }
.ar-share__copy.is-copied::after { opacity: 1; transform: translate(-50%, 0); }
.ar-share__copy.is-copied { background: var(--color-verified); border-color: var(--color-verified); color: #fff; }

/* Right rail card */
.ar-promo { padding: 22px; border-radius: 16px; background: var(--color-ink); color: #fff; }
.ar-promo .ar-rail__label { color: var(--color-brand); }
.ar-promo__title { margin: 0; color: #fff; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.ar-promo__text { margin: 10px 0 18px; font-size: var(--fs-sm); line-height: 1.6; color: rgba(255, 255, 255, 0.7); }
.ar-promo__btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 0 16px; border-radius: 10px; background: var(--color-brand); font-size: var(--fs-md); font-weight: 700; color: var(--color-ink); transition: background-color 180ms; }
.ar-promo__btn svg { width: 16px; height: 16px; transition: transform 250ms var(--ar-ease); }
.ar-promo__btn:hover { background: #F08A2C; }
.ar-promo__btn:hover svg { transform: translateX(3px); }

/* Text column. The editor (admin/news-edit.php) uses .article-body too. */
.article-body { max-width: 42rem; font-family: var(--ar-serif, 'Newsreader', Georgia, serif); font-size: 1.0625rem; line-height: 1.75; color: #2B2725; overflow-wrap: break-word; }
.article-body > * + * { margin-top: 1.25rem; }
.article-body > :first-child { margin-top: 0; }
.article-body p { max-width: none; font-size: inherit; line-height: inherit; color: inherit; }
.ar .article-body > p:first-of-type::first-letter { float: left; margin: 0.08em 0.1em 0 0; font-family: var(--font-display); font-size: 3.1em; font-weight: 600; line-height: 0.82; color: var(--color-ink); }
.article-body h2, .article-body h3, .article-body h4 { font-family: var(--font-display); font-weight: 600; color: var(--color-ink); line-height: 1.2; letter-spacing: -0.02em; scroll-margin-top: 110px; }
.article-body h2 { margin-top: 2.5rem; font-size: clamp(1.3rem, 1.2rem + 0.45vw, 1.6rem); }
.article-body h3 { margin-top: 2rem; font-size: clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem); }
.article-body h4 { margin-top: 1.6rem; font-size: 1.05rem; }
.article-body h2 + *, .article-body h3 + *, .article-body h4 + * { margin-top: 0.75rem; }
.article-body strong { font-weight: 600; color: var(--color-ink); }
.article-body a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-brand); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color 180ms; }
.article-body a:hover { color: var(--color-brand-dark); }
.article-body ul, .article-body ol { padding-left: 1.4em; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li + li { margin-top: 0.5em; }
.article-body li > p { margin: 0; }
.article-body li::marker { color: var(--color-brand-dark); font-family: var(--font-display); font-weight: 700; }
.article-body blockquote { margin: 2.5rem 0; padding: 0 0 0 1.5rem; border-left: 3px solid var(--color-brand); font-family: var(--font-display); font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.35rem); font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; color: var(--color-ink); }
.article-body blockquote p { font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; }
.article-body blockquote p + p { margin-top: 0.7em; }
.article-body img { max-width: 100%; height: auto; border-radius: 12px; }

.article-empty { padding-block: 24px 28px; border-top: 2px solid var(--color-ink); border-bottom: 1px solid var(--ar-rule); font-family: var(--font-body); }
.article-empty__label { margin: 0 0 8px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-brand-dark); }
.article-empty p:last-child { margin: 0; font-size: var(--fs-body); line-height: 1.6; color: var(--color-text); }

/* End of article */
.ar-endmark { display: block; width: 10px; height: 10px; margin: 36px 0 0; background: var(--color-brand); }
.ar-about { display: flex; gap: 18px; align-items: flex-start; margin-top: 40px; padding: 24px 0; border-block: 1px solid var(--ar-rule); }
.ar-about__name { margin: 0; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--color-ink); }
.ar-about__text { margin: 6px 0 0; font-size: var(--fs-base); line-height: 1.6; color: var(--color-text); }
.ar-back { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 20px; font-size: var(--fs-md); font-weight: 700; color: var(--color-ink); }
.ar-back svg { width: 16px; height: 16px; transform: scaleX(-1); color: var(--color-brand-dark); transition: transform 250ms var(--ar-ease); }
.ar-back:hover svg { transform: scaleX(-1) translateX(4px); }

/* Keep reading */
.ar-related { padding-block: clamp(48px, 6vw, 88px); background: var(--color-paper); border-top: 1px solid var(--ar-rule); }
.ar-related__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; padding-bottom: 16px; border-bottom: 2px solid var(--color-ink); }
.ar-related__head h2 { margin: 0; font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.75rem); font-weight: 600; letter-spacing: -0.025em; }
.ar-related__all { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: var(--fs-md); font-weight: 700; color: var(--color-ink); }
.ar-related__all svg { width: 16px; height: 16px; color: var(--color-brand-dark); transition: transform 250ms var(--ar-ease); }
.ar-related__all:hover svg { transform: translateX(3px); }
.ar-cards { display: flex; flex-wrap: wrap; gap: 22px; }
.ar-card { position: relative; display: flex; flex-direction: column; flex: 1 1 calc((100% - 44px) / 3); min-width: 0; max-width: calc((100% - 44px) / 3); padding: 8px; border: 1px solid var(--ar-rule); border-radius: 14px; background: var(--color-surface); transition: border-color 250ms, box-shadow 250ms; }
.ar-card:hover { border-color: var(--color-border-strong); box-shadow: 0 18px 40px -26px rgba(30, 27, 26, 0.35); }
.ar-card__media { aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--color-border); }
.ar-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms ease; }
.ar-card:hover .ar-card__media img { transform: scale(1.04); }
.ar-card__media--empty { display: grid; place-items: center; background: var(--color-brand-50); }
.ar-card__media--empty .ar-card__ph { width: 72px; height: 72px; opacity: 0.6; transform: none !important; }
.ar-card__body { padding: 14px 10px 10px; }
.ar-card__kicker { display: flex; gap: 10px; margin: 0 0 8px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-brand-dark); }
.ar-card__kicker span { color: var(--color-text-soft); }
.ar-card__title { margin: 0; font-size: 1.025rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.015em; }
.ar-card__title a { color: var(--color-ink); }
.ar-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ar-card:has(a:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.ar-card__title a:focus-visible { outline: none; }
.ar-card__excerpt { margin: 8px 0 0; font-size: var(--fs-md); line-height: 1.6; color: var(--color-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 1180px) {
  .ar-layout { grid-template-columns: minmax(0, 42rem); justify-content: center; }
  .ar-rail--right { display: none; }
  .ar-rail--left { order: 2; }
  .ar-rail { position: static; }
  .ar-toc { display: none; }
  .ar-share { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--ar-rule); }
  .ar-share .ar-rail__label { margin: 0; }
}
@media (max-width: 900px) {
  .ar-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .ar-cover { aspect-ratio: 16 / 10; border-radius: 14px; }
  .ar-card { flex-basis: calc((100% - 22px) / 2); max-width: calc((100% - 22px) / 2); }
}
@media (max-width: 640px) {
  .ar-progress { top: 72px; }
  .article-body { font-size: 1rem; line-height: 1.72; }
  .ar-hero { padding-top: 12px; }
  .ar-crumbs { margin-bottom: 20px; }
  .ar-cover { aspect-ratio: 4 / 3; border-radius: 12px; }
  .ar-card { flex-basis: 100%; max-width: 100%; }
  .ar-about { flex-direction: column; gap: 12px; }
  .ar-related__head { align-items: flex-start; flex-direction: column; }
}

/* ---------------------------------------------------------------------- */
/* Motion                                                                   */
/* ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .news-card__media img,
  .news-textlink svg,
  .news-card__cta svg,
  .news-search button svg { transition: none; }
  .news-card:hover .news-card__media img,
  .news-card:hover .news-card__cta svg,
  .news-textlink:hover svg,
  .news-search button:hover svg { transform: none; }
  .news-textlink--back:hover svg { transform: scaleX(-1); }
  .ar-cover img { animation: none; }
  .ar-card__media img, .ar-promo__btn svg, .ar-back svg, .ar-related__all svg { transition: none; }
  .ar-card:hover .ar-card__media img { transform: none; }
}