/* ==========================================================================
   Notes articles — dark editorial design
   Default for every note: each article's <body> carries
   nk2 article-preview article-layout-editorial and links this file after
   /article.css and /nikkalma-2.css. Text-only articles need nothing else.
   ?article-layout=architectural   alternative exploration (preview only)
   ?article-layout=editorial-media unpacks <template data-article-media> blocks
                                   so media for a future article can be reviewed

   Media syntax (plain HTML inside .article-body; every part but img is optional):

     Inline — reading-column width, any aspect ratio:
       <figure class="article-figure">
         <img src="/assets/notes/<slug>/name.webp" alt="Что изображено"
              width="1280" height="720" loading="lazy" decoding="async">
         <figcaption><span class="figure-label">Рис. 1</span> Подпись.
           <span class="figure-credit">Источник</span></figcaption>
       </figure>

     Wide — wider than the text (up to 60rem), for screenshots and diagrams:
       <figure class="article-figure article-figure--wide"> …same inside… </figure>

     Pair — two related images, side by side / stacked on mobile:
       <figure class="article-figure article-figure--pair">
         <figure class="article-figure-item"><img …><figcaption>До</figcaption></figure>
         <figure class="article-figure-item"><img …><figcaption>После</figcaption></figure>
         <figcaption>Общая подпись</figcaption>
       </figure>

     Cover — optional, directly after .article-header:
       <figure class="article-cover"><img … loading="eager"></figure>

   alt is required (alt="" only for purely decorative images); width/height
   are the image's real pixel size and prevent layout shift. When several
   sizes exist, add srcset="a-960.webp 960w, a-1920.webp 1920w" and
   sizes="(min-width: 1000px) 960px, 100vw" (wide) or 680px (inline).
   ========================================================================== */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/CormorantGaramond-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* --- Shared tokens: cinematic black / warm off-white / silver --- */
body.article-preview {
  --nk2-graphite: #0e0f0f;
  --nk2-surface: rgba(25, 27, 29, .62);
  --nk2-footer: #0b0c0c;
  --nk2-sage: #b9c0c7;                        /* focus / accent → silver */
  --nk2-sage-fill: rgba(218, 224, 230, .1);
  --nk2-line: rgba(218, 224, 230, .2);
  --nk2-line-soft: rgba(218, 224, 230, .12);
  --ap-ink: #f1ebdd;                          /* titles, strong text   16.9:1 */
  --ap-text: rgba(241, 235, 221, .8);         /* body text             ≈11:1 */
  --ap-silver: #b9c0c7;                       /* metadata, captions    ≈11:1 */
  --ap-muted: rgba(218, 224, 230, .62);       /* small labels          ≈7:1  */
  --ap-rule: rgba(218, 224, 230, .16);
  --ap-rule-strong: rgba(218, 224, 230, .34);
  --ap-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ap-sans: "Onest", system-ui, sans-serif;
  --ap-measure: 42.5rem;                      /* 680px reading column ≈ 68 characters */
  --ap-wide: 60rem;                           /* wide images, title block */
  padding: 0;
  background: var(--nk2-graphite);
  color: var(--ap-text);
  font-synthesis: none;                       /* the serif has one weight: never fake bold */
}

body.article-preview .site-canvas {
  width: 100%;
  margin: 0;
  overflow: visible;
  overflow-x: clip;
  border: 0;
  border-radius: 0;
  background: var(--nk2-graphite);
}

/* Site footer: the approved compact footer — same markup and rules as the
   homepage and project pages (nikkalma-2.css, .nk2 footer); only the rule colour. */
body.article-preview .site-canvas > footer { border-top-color: rgba(218, 224, 230, .14); }

/* The article's own footer (return link) keeps its row layout. */
body.article-preview .article-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

/* --- Shared article base --- */
body.article-preview main#content.article-shell {
  display: block;
  max-width: none;
  margin: 0;
  padding: clamp(40px, 5.5vw, 80px) var(--nk2-pad) clamp(72px, 8vw, 128px);
}

body.article-preview .article-kicker,
body.article-preview .article-meta,
body.article-preview .article-date {
  margin: 0;
  color: var(--ap-silver);
  font-family: var(--ap-sans);
  font-size: .75rem;                          /* 12px */
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
}

body.article-preview .article-header h1 {
  margin: 0;
  color: var(--ap-ink);
  font-family: var(--ap-serif);
  font-weight: 400;
  letter-spacing: -.02em;
  overflow-wrap: break-word;
  hyphens: manual;
}

body.article-preview .article-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  color: var(--ap-ink);
  font-family: var(--ap-sans);
  font-size: .875rem;
  text-decoration: underline;
  text-decoration-color: var(--ap-rule-strong);
  text-underline-offset: .32em;
  transition: text-decoration-color .2s ease;
}
body.article-preview .article-back:hover { text-decoration-color: var(--ap-ink); }

/* Reading column */
body.article-preview .article-body {
  max-width: none;
  padding: 0;
  color: var(--ap-text);
  font-family: var(--ap-sans);
  font-size: 1.125rem;                        /* 18px */
  font-weight: 400;
  line-height: 1.72;                          /* ≈31px */
}
body.article-preview .article-body > * { max-width: var(--ap-measure); }
body.article-preview .article-body p { margin: 0 0 1.1em; }

body.article-preview .article-body strong {
  color: var(--ap-ink);
  font-weight: 600;
}

body.article-preview .article-body a {
  color: var(--ap-ink);
  text-decoration: underline;
  text-decoration-color: rgba(218, 224, 230, .45);
  text-underline-offset: .22em;
}
body.article-preview .article-body a:hover { text-decoration-color: var(--ap-ink); }

body.article-preview .article-body h2 {
  color: var(--ap-ink);
  font-weight: 400;
  overflow-wrap: break-word;
}

body.article-preview .article-body h3 {
  margin: 2.2em 0 .7em;
  color: var(--ap-ink);
  font-family: var(--ap-sans);
  font-size: 1.25rem;                         /* 20px */
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.3;
}

/* Quotations and the closing statement */
body.article-preview .article-body blockquote {
  margin: 2em 0;
  padding: .1em 0 .1em 1.25em;
  border-left: 1px solid var(--ap-rule-strong);
  color: var(--ap-ink);
  font-family: var(--ap-serif);
  font-size: 1.75rem;
  line-height: 1.25;
}
body.article-preview .article-body blockquote strong { font-weight: 400; }

body.article-preview .article-body .article-final {
  margin: 3em 0 0 !important;
  padding: 1.1em 0 0;
  border-top: 1px solid var(--ap-rule-strong);
  border-left: 0;
  color: var(--ap-ink);
  font-family: var(--ap-serif);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.01em;
}

/* Existing statement blocks used by other notes */
body.article-preview .article-body :is(.article-emphasis, .article-network, .article-contrast) {
  margin: 2.6em 0;
  padding: 24px 0;
  border-top: 1px solid var(--ap-rule-strong);
  border-bottom: 1px solid var(--ap-rule);
  border-left: 0;
  border-right: 0;
  color: var(--ap-ink);
  font-family: var(--ap-sans);
}
body.article-preview .article-body .article-emphasis p:first-child {
  font-family: var(--ap-serif);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.03em;
}
body.article-preview .article-body .article-emphasis p:last-child { color: var(--ap-silver); }
body.article-preview .article-body .article-network strong {
  font-family: var(--ap-serif);
  font-weight: 400;
}
body.article-preview .article-body .article-network span { color: var(--ap-muted); }
body.article-preview .article-body .article-contrast p { color: var(--ap-text); }
body.article-preview .article-body .article-pivot {
  color: var(--ap-ink);
  font-family: var(--ap-serif);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.3;
}

/* Footer of the article: return link */
body.article-preview .article-footer {
  max-width: var(--ap-measure);
  margin: clamp(48px, 6vw, 72px) 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--ap-rule);
  background: none;
  color: inherit;
}

/* --- Editorial media: inline · wide · pair · caption ---
   Content stays plain HTML; only these classes carry presentation.
   Images keep their own aspect ratio (width/height attributes reserve the
   space), are never cropped and never upscaled past their pixel width. */
body.article-preview :is(.article-figure, .article-cover) {
  margin: 2.6em 0;                            /* ≈47px around media at 18px text */
  padding: 0;
}
body.article-preview :is(.article-figure, .article-cover, .article-figure-item) img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  background: rgba(218, 224, 230, .04);      /* only visible while a real image loads */
  box-shadow: 0 0 0 1px rgba(218, 224, 230, .1);   /* keeps dark screenshots off the black page */
}

/* Inline: reading-column width; portrait and square images are capped in
   height so they never take over the screen, and stay on the text axis. */
body.article-preview .article-figure:not(.article-figure--wide, .article-figure--pair) > img {
  width: auto;
  max-height: min(80vh, 760px);
}
/* Wide and cover: always fill their box (wider than the text column). */
body.article-preview :is(.article-figure--wide, .article-cover) > img { width: 100%; }
body.article-preview .article-body > :is(.article-figure--wide, .article-figure--pair) { max-width: var(--ap-wide); }
body.article-preview .article-body > .article-figure--wide { margin: 3em 0; }
body.article-preview .article-cover { max-width: var(--ap-wide); margin: clamp(32px, 4vw, 56px) 0 0; }

/* Pair: two related images side by side, each with its own optional
   caption; an optional shared caption spans both. Stacks on narrow screens. */
body.article-preview .article-figure--pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(16px, 2.2vw, 28px);
  align-items: start;
}
body.article-preview .article-figure-item { margin: 0; min-width: 0; }
body.article-preview .article-figure-item img { width: 100%; }
body.article-preview .article-figure--pair > figcaption { grid-column: 1 / -1; }

/* Caption: small, muted, separated from the image; optional label and credit. */
body.article-preview :is(.article-figure, .article-cover, .article-figure-item) figcaption {
  max-width: var(--ap-measure);
  margin: 14px 0 0;
  color: var(--ap-silver);
  font-family: var(--ap-sans);
  font-size: .875rem;                         /* 14px */
  line-height: 1.5;
}
body.article-preview .article-figure-item figcaption { margin-top: 10px; font-size: .8125rem; }   /* 13px */
body.article-preview .article-figure--pair > figcaption { margin-top: 18px; }
body.article-preview figcaption .figure-label {
  margin-right: .45em;
  color: var(--ap-ink);
  font-weight: 500;
}
body.article-preview figcaption .figure-credit { color: var(--ap-muted); white-space: nowrap; }
body.article-preview figcaption .figure-credit::before { content: "· "; }

/* Editorial: wide and paired media are centred on the same axis as the text. */
body.article-preview.article-layout-editorial .article-body > .article-figure--wide,
body.article-preview.article-layout-editorial .article-body > .article-figure--pair { margin-right: auto; margin-left: auto; }

@media (max-width: 680px) {
  body.article-preview .article-figure--pair { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  body.article-preview .article-figure--pair > figcaption { margin-top: -6px; }
  body.article-preview .article-figure-item img { max-height: 70vh; width: auto; }
}

/* ==========================================================================
   A — Editorial Longform
   One publication column: serif title, small meta line, divider, text.
   ========================================================================== */
body.article-layout-editorial main.article-shell > article {
  max-width: var(--ap-wide);
  margin: 0 auto;
}

body.article-layout-editorial .article-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 18px;
  max-width: none;
  padding: 0 0 clamp(28px, 3.4vw, 44px);
  border-bottom: 1px solid var(--ap-rule-strong);
}

/* Order: back link · kicker · meta · date, then the title on its own line */
body.article-layout-editorial .article-header .article-back { order: 0; margin-right: auto; }
body.article-layout-editorial .article-kicker { order: 1; }
body.article-layout-editorial .article-meta { order: 2; }
body.article-layout-editorial .article-date { order: 3; }
body.article-layout-editorial .article-meta::before,
body.article-layout-editorial .article-date::before {
  content: "·";
  margin-right: 18px;
  color: var(--ap-muted);
}
body.article-layout-editorial .article-header h1 {
  order: 4;
  flex: 1 0 100%;
  max-width: 20ch;
  margin-top: clamp(28px, 4vw, 52px);
  font-size: clamp(2.75rem, 5.6vw, 5.25rem);
  line-height: .98;
}

/* Opening gap below the divider (was clamp(36px, 4.4vw, 56px), −20–22%) */
body.article-layout-editorial .article-body { padding-top: clamp(28px, 3.4vw, 44px); }

/* One centred reading axis: paragraphs, headings, quotations and inline
   images share the same column; text itself stays left-aligned. */
body.article-preview.article-layout-editorial .article-body > * {
  margin-right: auto;
  margin-left: auto;
}
body.article-preview.article-layout-editorial .article-body > .article-final {
  margin-right: auto !important;
  margin-left: auto !important;
}
body.article-preview.article-layout-editorial .article-footer {
  margin-right: auto;
  margin-left: auto;
}

body.article-layout-editorial .article-body > p:first-child {
  margin-bottom: 1em;
  color: var(--ap-ink);
  font-family: var(--ap-serif);
  font-size: clamp(1.6rem, 2.4vw, 1.9rem);
  font-weight: 400;
  line-height: 1.25;
}

body.article-layout-editorial .article-body h2 {
  position: relative;
  margin-top: 2.4em;
  margin-bottom: .7em;
  font-family: var(--ap-serif);
  font-size: clamp(1.7rem, 2.6vw, 2.125rem);   /* was clamp(2rem, 3.2vw, 2.6rem): −15–18% */
  line-height: 1.08;
  letter-spacing: -.012em;
}

/* Silver accent: a short hairline hanging in the margin, centred on the
   heading's first line. Same silver as the homepage Process line, with a
   faint glow. Decoration only — it never touches the text or its wrapping. */
body.article-layout-editorial .article-body h2::before {
  content: "";
  position: absolute;
  top: .57em;                                   /* optical middle of the first line (x-height) */
  right: calc(100% + 18px);
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, rgba(198, 205, 212, 0), rgba(198, 205, 212, .8));
  box-shadow: 0 0 6px rgba(198, 205, 212, .26);
  pointer-events: none;
}

/* Narrow screens have no margin to hang it in: the stroke sits before the
   heading and the whole heading shifts by its width (every line equally). */
@media (max-width: 899px) {
  body.article-layout-editorial .article-body h2 { padding-left: 38px; }
  body.article-layout-editorial .article-body h2::before { right: auto; left: 0; width: 24px; }
}

/* ==========================================================================
   B — Architectural Longform
   Grid: rail (meta + contents) · reading column · open field.
   Header metadata sits on a ruled strip; the title spans column + field.
   ========================================================================== */
body.article-layout-architectural main.article-shell > article {
  --ar-rail: minmax(170px, 230px);
  --ar-gap: clamp(32px, 4.4vw, 80px);
  display: grid;
  grid-template-columns: var(--ar-rail) minmax(0, var(--ap-measure)) minmax(0, 1fr);
  column-gap: var(--ar-gap);
  align-items: start;
}

body.article-layout-architectural .article-header {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: start;
  max-width: none;
  padding: 0 0 clamp(36px, 4.4vw, 60px);
  border-bottom: 1px solid var(--ap-rule-strong);
}

/* Ruled metadata strip */
body.article-layout-architectural .article-header::before {
  content: "";
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: stretch;
  border-top: 1px solid var(--ap-rule-strong);
  border-bottom: 1px solid var(--ap-rule);
  pointer-events: none;
}
body.article-layout-architectural .article-kicker,
body.article-layout-architectural .article-header .article-meta,
body.article-layout-architectural .article-header .article-back {
  grid-row: 1;
  align-self: center;
}
body.article-layout-architectural .article-kicker { grid-column: 1; padding: 14px 0; }
body.article-layout-architectural .article-header .article-meta { grid-column: 2; padding: 14px 0; }
body.article-layout-architectural .article-header .article-back { grid-column: 3; justify-self: end; }

body.article-layout-architectural .article-date {
  grid-column: 1;
  grid-row: 2;
  margin-top: clamp(36px, 4.6vw, 64px);
  padding-top: .9em;
  color: var(--ap-muted);
}
body.article-layout-architectural .article-header h1 {
  grid-column: 2 / -1;
  grid-row: 2;
  max-width: 20ch;
  margin-top: clamp(28px, 3.8vw, 52px);
  font-size: clamp(2.9rem, 6.8vw, 6.5rem);
  line-height: .95;
  letter-spacing: -.025em;
}

/* Rail: table of contents built from the article's own H2 headings */
body.article-layout-architectural .article-toc {
  display: block;                             /* the site sets nav { display: flex } */
  grid-column: 1;
  grid-row: 3;
  position: sticky;
  top: 28px;
  max-height: calc(100vh - 56px);
  overflow: auto;
  padding-top: clamp(36px, 4.4vw, 56px);
}
body.article-layout-architectural .article-toc summary {
  display: none;
}
body.article-layout-architectural .article-toc-label {
  margin: 0 0 14px;
  color: var(--ap-muted);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
body.article-layout-architectural .article-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}
body.article-layout-architectural .article-toc li {
  counter-increment: toc;
  border-top: 1px solid var(--ap-rule);
}
body.article-layout-architectural .article-toc li:last-child { border-bottom: 1px solid var(--ap-rule); }
body.article-layout-architectural .article-toc a {
  display: grid;
  grid-template-columns: 2.1em minmax(0, 1fr);
  padding: 9px 0 10px;
  color: var(--ap-silver);
  font-size: .8125rem;                        /* 13px */
  line-height: 1.4;
  text-decoration: none;
  transition: color .2s ease;
}
body.article-layout-architectural .article-toc a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--ap-muted);
  font-variant-numeric: tabular-nums;
}
body.article-layout-architectural .article-toc a:hover,
body.article-layout-architectural .article-toc a:focus-visible { color: var(--ap-ink); }
body.article-layout-architectural .article-toc a:focus-visible { outline-offset: 2px; }

body.article-layout-architectural .article-body {
  grid-column: 2 / -1;
  grid-row: 3;
  padding-top: clamp(36px, 4.4vw, 56px);
  counter-reset: section;
}
body.article-layout-architectural .article-footer { grid-column: 2; grid-row: 4; }
body.article-layout-architectural .article-cover { grid-column: 2 / -1; grid-row: 2; }   /* optional, between header and text */

body.article-layout-architectural .article-body > p:first-child {
  margin-bottom: 1em;
  color: var(--ap-ink);
  font-size: 1.375rem;                        /* 22px */
  line-height: 1.45;
}

/* Section heading: ruled, numbered to match the contents */
body.article-layout-architectural .article-body h2 {
  counter-increment: section;
  margin: 2.6em 0 .8em;
  padding-top: 16px;
  border-top: 1px solid var(--ap-rule-strong);
  font-family: var(--ap-serif);
  font-size: clamp(2rem, 3.1vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -.012em;
  scroll-margin-top: 24px;
}
body.article-layout-architectural .article-body h2::before {
  content: counter(section, decimal-leading-zero);
  display: block;
  margin-bottom: 14px;
  color: var(--ap-muted);
  font-family: var(--ap-sans);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1;
}

/* --- Tablet: rail collapses, contents move above the text --- */
@media (max-width: 1099px) {
  body.article-layout-architectural main.article-shell > article {
    grid-template-columns: minmax(0, 1fr);
  }
  body.article-layout-architectural .article-header {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 24px;
  }
  body.article-layout-architectural .article-kicker { grid-column: 1; grid-row: 1; padding: 12px 0 0; }
  body.article-layout-architectural .article-header .article-meta { grid-column: 1; grid-row: 2; padding: 4px 0 12px; }
  body.article-layout-architectural .article-header .article-back { grid-column: 2; grid-row: 1 / 3; }
  body.article-layout-architectural .article-header::before { grid-row: 1 / 3; }
  body.article-layout-architectural .article-date { grid-column: 1 / -1; grid-row: 3; margin-top: 28px; padding-top: 0; }
  body.article-layout-architectural .article-header h1 { grid-column: 1 / -1; grid-row: 4; margin-top: 14px; }

  body.article-layout-architectural .article-toc {
    grid-column: 1;
    grid-row: 3;
    position: static;
    max-width: var(--ap-measure);
    max-height: none;
    overflow: visible;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--ap-rule);   /* the header rule sits above it */
  }
  body.article-layout-architectural .article-toc summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    color: var(--ap-ink);
    font-size: .875rem;
    font-weight: 500;
    list-style: none;
    cursor: pointer;
  }
  body.article-layout-architectural .article-toc summary::-webkit-details-marker { display: none; }
  body.article-layout-architectural .article-toc summary::after {
    content: "";
    width: 7px;
    height: 7px;
    margin: -4px 6px 0 0;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
  }
  body.article-layout-architectural .article-toc details[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
  body.article-layout-architectural .article-toc summary:focus-visible { outline-offset: 2px; }
  body.article-layout-architectural .article-toc-label { display: none; }
  body.article-layout-architectural .article-toc ol { padding-bottom: 12px; }
  body.article-layout-architectural .article-toc li:last-child { border-bottom: 0; }
  body.article-layout-architectural .article-toc a { min-height: 44px; align-items: center; }

  body.article-layout-architectural .article-body { grid-column: 1; grid-row: 4; }
  body.article-layout-architectural .article-footer { grid-column: 1; grid-row: 5; }
  body.article-layout-architectural .article-cover { grid-column: 1; grid-row: 2; margin-bottom: 24px; }
  body.article-layout-architectural .article-cover + .article-toc { border-top: 1px solid var(--ap-rule); }
}

/* --- Mobile --- */
@media (max-width: 680px) {
  body.article-preview .article-footer { flex-direction: column; align-items: flex-start; }
  body.article-preview main#content.article-shell { padding-top: 28px; padding-bottom: 64px; }
  body.article-preview .article-body { font-size: 1.0625rem; line-height: 1.7; }   /* 17px */
  body.article-preview .article-body blockquote { font-size: 1.5rem; }

  body.article-layout-editorial .article-header { gap: 2px 14px; }
  body.article-layout-editorial .article-header .article-back { flex: 1 0 100%; margin: 0 0 10px; }
  body.article-layout-editorial .article-meta::before { margin-right: 14px; }
  body.article-layout-editorial .article-date { flex: 1 0 100%; }
  body.article-layout-editorial .article-date::before { content: none; }
  body.article-layout-editorial .article-header h1 {
    max-width: none;
    margin-top: 22px;
    font-size: clamp(2.35rem, 10.6vw, 2.9rem);
    line-height: 1;
  }
  body.article-layout-editorial .article-body > p:first-child { font-size: 1.5rem; }
  body.article-layout-editorial .article-body h2 { font-size: 1.5rem; }   /* was 1.85rem: −19% */

  body.article-layout-architectural .article-header h1 {
    max-width: none;
    font-size: clamp(2.35rem, 10.6vw, 2.9rem);
    line-height: 1;
  }
  body.article-layout-architectural .article-body > p:first-child { font-size: 1.25rem; }
  body.article-layout-architectural .article-body h2 { font-size: 1.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  body.article-preview .article-back,
  body.article-layout-architectural .article-toc a { transition: none; }
}