/*
 * The article page (single posts), approved on 2026-10-15.
 *
 * Yellow head in the Economist order: section | date, the headline in Anton,
 * the standfirst light and faded. The featured art floats over a torn,
 * white-rimmed edge, shown in black and white with its colour inside the
 * bubble under the pointer. Below it three columns that share one set of
 * edges with the art: contents rail, the text, and the follow and share boxes.
 *
 * Type: Anton for the headline only, Geist for everything else. Loaded after
 * style.css and scoped to .hu-art, so it wins over the older article rules
 * without touching any other page.
 */

.hu-art {
  --ha-axis: 1240px;
  --ha-gutter: 24px;
  --ha-text: #0f1115;
  --ha-body: var(--hu-ink);
  --ha-meta: var(--hu-grey);
  --ha-box: #f2f2f2;
  --ha-box-line: #dcdcdc;
  --ha-tile: var(--hu-white);
  --ha-tile-line: #d6d6d6;
  font-family: "Geist", Arial, sans-serif;
}
html.night .hu-art {
  --ha-text: #f5f3ee;
  --ha-body: #d9d7d1;
  --ha-meta: #9ca3af;
  --ha-box: #141414;
  --ha-box-line: #2b2b2b;
  --ha-tile: #0b0b0b;
  --ha-tile-line: #333;
}

/* --- The head ------------------------------------------------------------- */

.hu-art .ha-head { background: var(--hu-gold); color: #0f1115; text-align: center; }
html.night .hu-art .ha-head { background: #0b0b0b; color: #f5f3ee; }
.hu-art .ha-head__inner {
  max-width: var(--ha-axis);
  margin: 0 auto;
  padding: clamp(104px, 12vw, 132px) var(--ha-gutter) 0;
  display: grid;
  justify-items: center;
}
.hu-art .ha-section {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font: 400 17px/1 "Geist", Arial, sans-serif;
}
.hu-art .ha-section a { font-weight: 700; color: inherit; text-decoration: none; }
.hu-art .ha-section a:hover, .hu-art .ha-section a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.hu-art .ha-section__bar { width: 1.5px; height: 17px; background: currentColor; }
.hu-art .ha-title {
  margin: 0;
  max-width: 100%;
  font-family: "Anton", Impact, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: .98;
  text-wrap: balance;
  overflow-wrap: anywhere;
  color: inherit;
}
html.night .hu-art .ha-title { color: var(--hu-gold); }
/* Short titles run huge on one line; longer ones step down (see uzomba_title_size_class). */
.hu-art .ha-title--short  { font-size: clamp(56px, 7.6vw, 118px); }
.hu-art .ha-title--medium { font-size: clamp(44px, 5.6vw, 88px); }
.hu-art .ha-title--long   { font-size: clamp(34px, 4.2vw, 64px); line-height: 1.02; }
.hu-art .ha-standfirst {
  margin: 18px 0 0;
  font: 300 20.7px/1.45 "Geist", Arial, sans-serif;
  color: rgba(15, 17, 21, .68);
  text-wrap: pretty;
}
html.night .hu-art .ha-standfirst { color: rgba(245, 243, 238, .7); }

/* --- The featured art, floating over the torn edge ----------------------- */

.hu-art .ha-lead { position: relative; padding: 56px var(--ha-gutter) 0; }
.hu-art .ha-lead__ground {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(50% + 10px);
  background: var(--hu-gold);
  pointer-events: none;
}
html.night .hu-art .ha-lead__ground { background: #0b0b0b; }
.hu-art .ha-tear { position: absolute; left: 0; bottom: -1px; width: 100%; height: 56px; display: block; }
.hu-art .ha-tear__rim { fill: #fff; }
.hu-art .ha-tear__page { fill: var(--bg-page); }
html.night .hu-art .ha-tear__page { fill: #0b0b0b; }
.hu-art .ha-lead__fig { position: relative; max-width: calc(var(--ha-axis) - 2 * var(--ha-gutter)); margin: 0 auto; }
.hu-art .ha-lead__frame {
  position: relative;
  line-height: 0;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s cubic-bezier(.2, .7, .2, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 8px 16px -6px rgba(0, 0, 0, .14), -14px 26px 44px -16px rgba(0, 0, 0, .20);
}
.hu-art .ha-lead__img { display: block; width: 100%; height: auto; margin: 0; }
/* Black and white until the bubble passes over; the colour copy is added by article.js. */
.hu-art .ha-lead__frame.is-bubble .ha-lead__img { filter: grayscale(1) contrast(1.05); }
.hu-art .ha-lead__frame .ha-lead__col { position: absolute; inset: 0; width: 100%; height: 100%; filter: none; clip-path: circle(0 at 50% 50%); }
.hu-art .ha-lead__rim { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.hu-art .ha-lead__rim path { fill: none; stroke: #fff; stroke-width: 4; }
@media (hover: hover) {
  .hu-art .ha-lead__frame.is-bubble { cursor: none; }
  .hu-art .ha-lead__frame:hover {
    transform: translateY(-4px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .07), 0 12px 20px -6px rgba(0, 0, 0, .13), -18px 34px 54px -16px rgba(0, 0, 0, .19);
  }
}
.hu-art .ha-credit { margin: 12px 0 0; font: 400 12px/1.4 "Geist", Arial, sans-serif; color: var(--ha-meta); opacity: .85; line-height: 1.4; }

/* --- Three columns on the art's edges ------------------------------------ */

.hu-art .ha-body {
  max-width: var(--ha-axis);
  margin: 0 auto;
  padding: 128px var(--ha-gutter) 90px;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 270px;
  gap: 44px;
  align-items: start;
}
.hu-art .ha-head:has(+ .ha-body) + .ha-body { padding-top: 72px; }
.hu-art .ha-rail-l { position: sticky; top: 96px; }
.hu-art .ha-rail-r { position: sticky; top: 96px; display: grid; gap: 18px; }
.hu-art .ha-kick { margin: 0 0 14px; font: 700 15px/1.2 "Geist", Arial, sans-serif; color: var(--ha-text); }

.hu-art .hu-toc a { font: 400 16px/1.4 "Geist", Arial, sans-serif; color: var(--ha-meta); opacity: 1; }
.hu-art .hu-toc a:hover { color: var(--ha-text); }
.hu-art .hu-toc a[aria-current="true"] { color: var(--ha-text); font-weight: 700; }

.hu-art .ha-box { background: var(--ha-box); border: 1px solid var(--ha-box-line); border-radius: 10px; padding: 22px 20px; }
.hu-art .ha-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.hu-art .ha-tile {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: var(--ha-tile);
  border: 1px solid var(--ha-tile-line);
  border-radius: 8px;
  color: var(--ha-text);
  transition: background-color var(--hover, .25s) ease, color var(--hover, .25s) ease;
}
.hu-art .ha-tile svg { width: 22px; height: 22px; }
.hu-art .ha-tile:hover, .hu-art .ha-tile:focus-visible { background: var(--hu-gold); color: #0f1115; }
.hu-art .ha-small { margin: 16px 0 0; font: 400 16px/1.45 "Geist", Arial, sans-serif; color: var(--ha-meta); }
.hu-art .ha-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 14px 16px;
  background: var(--ha-tile);
  border: 1px solid var(--ha-tile-line);
  border-radius: 8px;
  font: 600 17px/1 "Geist", Arial, sans-serif;
  color: var(--ha-text);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  list-style: none;
}
.hu-art .ha-kick + .ha-row { margin-top: 0; }
.hu-art .ha-row::-webkit-details-marker { display: none; }
.hu-art .ha-row svg { width: 20px; height: 20px; flex: none; }
.hu-art .ha-row:hover, .hu-art .ha-row:focus-visible { border-color: var(--ha-text); }
.hu-art .ha-more[open] summary svg { transform: rotate(180deg); }
.hu-art .ha-more__list { display: grid; gap: 2px; margin-top: 8px; }
.hu-art .ha-more__list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 8px;
  font: 500 16px/1.2 "Geist", Arial, sans-serif;
  color: var(--ha-text);
  text-decoration: none;
}
.hu-art .ha-more__list a:hover, .hu-art .ha-more__list a:focus-visible { background: var(--ha-tile); }
.hu-art .ha-more__list svg { width: 18px; height: 18px; }

/* --- The text ------------------------------------------------------------- */

.hu-art .ha-body .hu-prose {
  max-width: none;
  font: 400 22px/1.66 "Geist", Arial, sans-serif;
  color: var(--ha-body);
}
.hu-art .ha-body .hu-prose > p { margin: 0 0 1.1em; }
.hu-art .ha-body .hu-prose > p:first-of-type::first-letter { float: none; font: inherit; padding: 0; color: inherit; }
.hu-art .ha-body .hu-prose h2 {
  margin: 80px 0 20px;
  font: 700 44px/1.06 "Geist", Arial, sans-serif;
  letter-spacing: -.02em;
  color: var(--ha-text);
  text-wrap: balance;
}
.hu-art .ha-body .hu-prose > h2:first-child { margin-top: 0; }
.hu-art .ha-body .hu-prose h3 {
  margin: 56px 0 16px;
  font: 700 30px/1.15 "Geist", Arial, sans-serif;
  letter-spacing: -.01em;
  color: var(--ha-text);
}
.hu-art .ha-body .hu-prose strong { font-weight: 700; color: var(--ha-text); }
/* The brush: a yellow dry-brush stroke behind something that matters, used rarely. */
.hu-art .ha-body .hu-prose mark {
  padding: .08em .3em;
  margin: 0 -.1em;
  background: url(media/brush.svg) center / 100% 100% no-repeat;
  color: #0f1115;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* --- The end: three cards, then room before the footer -------------------- */

.hu-art .ha-more-reading { max-width: var(--ha-axis); margin: 0 auto; padding-left: var(--ha-gutter); padding-right: var(--ha-gutter); }
.hu-art > .ha-body:last-child { padding-bottom: clamp(140px, 18vw, 260px); }
html.night .hu-art .hu-toc__mark { filter: invert(1); }

/* --- Narrow screens ------------------------------------------------------- */

@media (max-width: 1060px) {
  .hu-art .ha-body { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .hu-art .ha-rail-l, .hu-art .ha-rail-r { position: static; }
  .hu-art .ha-rail-r { order: 3; }
}
@media (max-width: 700px) {
  .hu-art .ha-section { font-size: 15px; }
  .hu-art .ha-standfirst { font-size: 18px; }
  .hu-art .ha-lead { padding-top: 36px; }
  .hu-art .ha-tear { height: 28px; }
  .hu-art .ha-body { padding-top: 72px; }
  .hu-art .ha-body .hu-prose { font-size: 20px; }
  .hu-art .ha-body .hu-prose h2 { font-size: 32px; margin-top: 56px; }
  .hu-art .ha-body .hu-prose h3 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .hu-art .ha-lead__frame { transition: none; }
  .hu-art .ha-lead__frame:hover { transform: none; }
}