/* Article pages. Hand-written, like scale.css and responsive.css — nothing in
 * tools/convert_handoff.py produces or overwrites this file.
 *
 * HARD RULE, same as the other hand layers: no generated class name
 * (.sXXXXXXX / .cXXXXXXX / .mXXXXXXX) may appear here. Those are SHA-1 of
 * their declaration text and move whenever a designer changes a pixel.
 * tools/preview.py asserts it.
 *
 * One fluid layout, not the home page's two DOMs. The two-DOM split exists
 * because the desktop home page is an absolutely-positioned Figma canvas that
 * cannot reflow — 18 absolutely positioned elements and 68 pinned heights. An
 * article is one column of prose with no canvas to be faithful to, and there
 * is no article design in the handoff at all, so it is ours to draw.
 *
 * Values are the design's own: colours from content.py TOKENS, type scale from
 * README §8, motion from the custom properties responsive.css already declares.
 */

.layout-article {
  --art-measure: 46rem;
  --art-gutter: clamp(1.25rem, 5vw, 3rem);
  background: #fbfbfb;
  color: #072b28;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── chrome ───────────────────────────────────────────────────────────────
 * Deliberately slighter than the home page's header. A full marketing header
 * above a news article is wrong regardless of what it costs to build.
 */
.art-bar {
  background: #054239;
  padding: 1rem var(--art-gutter);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 2.5rem);
  flex-wrap: wrap;
}
.art-home { display: flex; align-items: center; gap: .625rem; color: #fff; text-decoration: none; }
.art-home span { font-weight: 700; font-size: 1.0625rem; }
.art-bar .lang-switch {
  margin-inline-start: 0;
  margin-top: 0;
}
.art-nav { display: flex; gap: clamp(.75rem, 2vw, 1.5rem); flex-wrap: wrap; margin-inline-start: auto; }
.art-nav a {
  color: #fff; text-decoration: none; font-weight: 500; font-size: 1rem;
  min-height: 2.75rem; display: flex; align-items: center;
  transition: color var(--hover-dur, .18s) var(--ease, ease);
}
@media (hover: hover) and (pointer: fine) {
  .art-home:hover span, .art-nav a:hover { color: #b9a779; }
}
.art-nav a:active, .art-home:active { transform: translateY(1px); }

/* ── the reading column ───────────────────────────────────────────────── */
.art-wrap {
  width: 100%;
  max-width: var(--art-measure);
  margin-inline: auto;
  padding: clamp(2rem, 6vw, 4rem) var(--art-gutter) clamp(3rem, 8vw, 5rem);
  flex: 1;
}

.art-eyebrow {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin: 0 0 .75rem;
  font-weight: 700; font-size: 1rem;
  /* Gold on light is 2.29:1 and fails AA — the README flags it for the news
   * eyebrow already. Kept for the badge, which is a coloured chip rather than
   * running text, and never used for body copy. */
  color: #6b6252;
}
.art-badge {
  background: #b9a779; color: #072b28;
  padding: .25rem .625rem; border-radius: 1.6875rem;
  font-size: .875rem;
}

.art-title {
  margin: 0 0 1rem;
  font-weight: 700;
  font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3rem);
  line-height: 1.25;
  color: #054239;
}
.art-lede {
  margin: 0 0 1.75rem;
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.375rem);
  line-height: 1.7;
  color: #072b28;
}
.art-hero {
  display: block; width: 100%; height: auto;
  border-radius: .8125rem;      /* the design's large-card radius */
  margin: 0 0 2rem;
}

/* ── body ─────────────────────────────────────────────────────────────────
 * Only the tags the block model can produce are styled. Anything else cannot
 * reach this page: sanitise.clean_blocks drops unknown block types on write.
 */
.art-body { font-size: clamp(1rem, .95rem + .35vw, 1.25rem); line-height: 1.9; }
.art-body > * { margin: 0 0 1.25rem; }
.art-body h2 { font-weight: 700; font-size: 1.75em; line-height: 1.35; color: #054239; margin-top: 2.5rem; }
.art-body h3 { font-weight: 700; font-size: 1.3em;  line-height: 1.4;  color: #054239; margin-top: 2rem; }
.art-body a  { color: #054239; text-decoration: underline; text-underline-offset: .2em;
               transition: color var(--hover-dur, .18s) var(--ease, ease); }
@media (hover: hover) and (pointer: fine) { .art-body a:hover { color: #b9a779; } }

.art-body ul, .art-body ol { padding-inline-start: 1.5rem; }
.art-body li { margin-bottom: .5rem; }
.art-body ul { list-style: none; padding-inline-start: 0; }
.art-body ul li { position: relative; padding-inline-start: 1.5rem; }
.art-body ul li::before {          /* the gold diamond used by the about section */
  content: "";
  position: absolute; inset-inline-start: 0; top: .62em;
  width: .5rem; height: .5rem; background: #b9a779; transform: rotate(45deg);
}

.art-body blockquote {
  margin-inline: 0;
  padding: 1rem 1.25rem;
  border-inline-start: 2px solid #b9a779;
  background: #f3f3f3;
  font-size: 1.05em;
}
.art-body figure { margin: 2rem 0; }
.art-body figure img { display: block; width: 100%; height: auto; border-radius: .375rem; }
.art-body figcaption { margin-top: .5rem; font-size: .875em; color: #6b6252; }
.art-body hr { border: 0; border-top: 1px solid #c1c1c1; margin: 2.5rem 0; }

/* 16:9 without an aspect-ratio fallback problem — the iframe is built by
 * render.py, never by an admin, so its shape is known. */
.art-embed { position: relative; padding-top: 56.25%; }
.art-embed iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; border-radius: .375rem;
}

.art-back { margin-top: 3rem; }
.art-back a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  color: #054239; font-weight: 700; text-decoration: none;
  transition: color var(--hover-dur, .18s) var(--ease, ease);
}
@media (hover: hover) and (pointer: fine) { .art-back a:hover { color: #b9a779; } }
.art-back a:active { transform: translateY(1px); }

/* ── /news/ listing ───────────────────────────────────────────────────────
 * Shares the article page's chrome and stylesheet on purpose: a reader moving
 * between the list and an article should not cross a visual seam.
 */
.art-list { max-width: 64rem; }
.art-cards { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.5rem; }
@media (min-width: 40rem) { .art-cards { grid-template-columns: 1fr 1fr; } }

.art-card { background: #fff; border-radius: .8125rem; overflow: hidden;
            box-shadow: 0 2px 8px rgba(5, 66, 57, .07); }
.art-card-link { display: flex; flex-direction: column; height: 100%;
                 color: inherit; text-decoration: none;
                 transition: transform .16s var(--ease, ease), box-shadow .2s var(--ease, ease); }
@media (hover: hover) and (pointer: fine) {
  .art-card-link:hover { transform: translateY(-.3125rem);
                         box-shadow: 0 24px 48px -28px rgba(5, 66, 57, .45); }
}
.art-card-link:active { transform: translateY(1px); }
.art-card img { display: block; width: 100%; height: 11rem; object-fit: cover; }
.art-card-text { padding: 1.25rem; }
.art-card-meta { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap;
                 margin: 0 0 .5rem; font-size: .9375rem; color: #6b6252; font-weight: 700; }
.art-card-text h2 { margin: 0 0 .5rem; font-size: 1.25rem; line-height: 1.4; color: #054239; }
.art-card-excerpt { margin: 0; font-size: 1rem; line-height: 1.7; color: #072b28; }

/* Site footer is the shared home footer (see site_footer.html.j2). */

@media (prefers-reduced-motion: reduce) {
  .layout-article * { transition: none !important; }
}