/* article.css — the blog article view
 *
 * From `handoff/design/Blog Article.dc.html`, PAGES.md §2 for the summary.
 * Ground is the steel #cdd1d5. Red TYPE is `--red-label` (#ff0a32) — Zsolt's
 * decision of 2026-08-12, taken knowing it fails WCAG AA at 2.56:1 on steel.
 * Brightness was chosen over contrast; DO NOT revert it to `--red-text`. The
 * numbers and the rejected alternatives are recorded in tokens.css. `--red`
 * stays the FILL: the progress bar, the rule marks, the newsletter panel's
 * ground, the pull-quote border, the table's head rule.
 *
 * THE BODY RULES STYLE EDITOR OUTPUT. Everything under `.ar__body` is whatever
 * the editor wrote — paragraphs, headings, a blockquote, a list, a table,
 * figures, a details/summary FAQ. There is no shortcode and no required block:
 * an article that uses three of them looks right, and so does one that uses all
 * of them. Nothing counts anything.
 */

.ar {
  background: var(--steel-base);
  color: var(--near-black);
  font-family: var(--body);
}

/* WordPress's own visually-hidden utility. The theme drops the core stylesheet
   (netface_drop_unused_core_styles), so the class has to be declared here or
   the newsletter's label would print above the field. */
.ar .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}


/* =========================================================================
   Reading progress
   ========================================================================= */

.ar__progress {
  position: sticky; top: 0; z-index: 5;
  height: 3px;
  background: rgba(18, 28, 40, .13);
}
.ar__progress-fill {
  display: block;
  height: 3px; width: 0;
  background: var(--red);            /* FILL */
}


/* =========================================================================
   The two columns
   ========================================================================= */

.ar__grid {
  display: grid;
  grid-template-columns: minmax(0, clamp(240px, 22vw, 300px)) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
  padding: 52px 5% 64px;
}

.ar__main { min-width: 0; }


/* =========================================================================
   Left rail
   -------------------------------------------------------------------------
   `align-self: start` as well as `position: sticky` — a stretched grid item is
   full height, and a sticky element the height of its container never moves.
   ========================================================================= */

.ar__rail {
  align-self: start;
  position: sticky; top: 34px;
  display: grid; grid-auto-rows: max-content; align-content: start;
  gap: 16px;
}

.ar__author { display: flex; align-items: center; gap: 14px; }
.ar__avatar {
  position: relative;
  width: 52px; height: 60px; flex: none;
  overflow: hidden;
  background: linear-gradient(148deg, #c8ccd1 0%, #8d949b 34%, #4d545b 70%, #262b31 100%);
}
/* GREYSCALE, on Zsolt's instruction (2026-08-06). A filter rather than a second
   image file: it is the same portrait, so a `portrait-grey.jpg` would be a
   second copy to keep in step with the first every time the photo is replaced —
   and the three formats behind <picture> would make that six files. */
.ar__avatar img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 22%;
  filter: grayscale(1);
}
/* The corner tick the design puts on every image well. */
.ar__avatar::before, .ar__avatar::after {
  content: ''; position: absolute; left: 0; top: 0; z-index: 1;
  background: var(--red);            /* FILL */
}
.ar__avatar::before { width: 12px; height: 2px; }
.ar__avatar::after  { width: 2px; height: 12px; }

.ar__author-t { display: flex; flex-direction: column; gap: 5px; }
.ar__author-n {
  font-family: var(--display); font-weight: 700;
  font-size: 15px; letter-spacing: -.01em;
}
.ar__author-m {
  font-family: var(--hud);
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--grey-body);
}

.ar__bio {
  margin: 0;
  font-size: 13px; line-height: 1.6;
  color: var(--grey-body);
  text-wrap: pretty;
}

.ar__work {
  text-align: center;
  font-family: var(--hud); font-weight: 700;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  background: var(--near-black); color: #fff;
  padding: 12px 0;
  text-decoration: none;
}
.ar__work:hover { background: var(--char-hi2); color: #fff; }

.ar__progress-read {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(18, 28, 40, .13);
  font-family: var(--hud);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--grey-body);
}
.ar__progress-pct { font-weight: 800; color: var(--red-label); }

/* --- contents ------------------------------------------------------------
   The marker column is a fixed 14px track so the labels align whether or not
   an entry is the active one — the marker appears inside the reserved cell
   rather than being inserted and shifting the text. */
.ar__toc {
  display: flex; flex-direction: column; gap: 11px;
  padding-top: 20px;
  border-top: 1px solid rgba(18, 28, 40, .13);
  font-size: 13.5px; line-height: 1.4;
}
.ar__toc-label {
  margin-bottom: 2px;
  font-family: var(--hud);
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--grey-body);
}
.ar__toc-item {
  display: grid; grid-template-columns: 14px 1fr; gap: 10px;
  align-items: baseline;
  color: var(--grey-body);
  text-decoration: none;
}
.ar__toc-item i { width: 8px; height: 2px; transform: translateY(-4px); background: none; display: block; }
.ar__toc-item:hover { color: var(--near-black); }
.ar__toc-item.is-active { color: var(--near-black); font-weight: 600; }
.ar__toc-item.is-active i { background: var(--red); }   /* FILL */

/* --- newsletter ---------------------------------------------------------- */
.ar__nl {
  margin-top: 2px;
  padding: 18px;
  background: var(--red);            /* FILL — the panel's ground */
}
.ar__nl-kicker {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 12px;
  font-family: var(--hud);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: #fff;
}
.ar__nl-kicker i { width: 20px; height: 2px; background: #fff; flex: none; display: block; }
.ar__nl-h {
  margin: 0 0 6px;
  font-family: var(--display); font-weight: 800;
  font-size: 20px; line-height: 1.1; letter-spacing: -.02em;
  color: #fff;
}
.ar__nl-p { margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .9); }

/* THE SIGN-UP ITSELF IS AN EMBED — the design's field and button are the
   provider's now (Appearance → Customize → Embeds). Only the well is styled:
   the panel's red ground, heading and copy are still the design's.

   The white ground is deliberate. A provider's form is styled for a light
   background and drops unreadable onto #e6002a, and there is no way to reach
   inside a cross-origin iframe to fix it. `color-scheme: light` stops a
   visitor's dark-mode preference doing the same thing from the other side. */
.ar__nl-embed {
  background: #fff;
  color-scheme: light;
  overflow: hidden;
}
.ar__nl-embed iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
}

/* =========================================================================
   Article head
   ========================================================================= */

.ar__kicker { display: flex; align-items: center; gap: 10px; }
.ar__kicker i { width: 22px; height: 2px; background: var(--red); flex: none; display: block; }  /* FILL */
.ar__kicker span {
  font-family: var(--hud); font-weight: 500;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--red-label);
}

.ar__h1 {
  margin: 22px 0 0;
  max-width: 20ch;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(34px, 3.9vw, 56px); line-height: 1;
  letter-spacing: -.03em;
  color: var(--near-black);
}
.ar__h1-dot { color: var(--red); }

.ar__lede {
  margin: 22px 0 34px;
  max-width: 60ch;
  font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6;
  color: var(--grey-body);
  text-wrap: pretty;
}

.ar__hero { margin: 0; }
.ar__hero-img,
.ar__body img {
  display: block;
  width: 100%; height: auto;
}
.ar__hero-img { aspect-ratio: 16 / 9; object-fit: cover; }
.ar__hero figcaption,
.ar__body figcaption {
  margin: 12px 0 0;
  font-family: var(--hud);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--grey-body);
}


/* =========================================================================
   Article body — editor output
   ========================================================================= */

.ar__body { margin-top: 36px; }

/* The 68ch measure is on the text elements, not on a wrapper: figures, tables
   and the gallery are all wider than the prose in the design, and a wrapper
   with a max-width would clamp them too. */
.ar__body p {
  margin: 0 0 22px;
  max-width: 68ch;
  font-size: 17px; line-height: 1.75;
  color: #2b333b;
}

.ar__body h2 {
  margin: 36px 0 18px;
  max-width: 30ch;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(22px, 2.1vw, 27px); line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--near-black);
  /* The contents list links here and the progress bar is sticky, so an anchor
     jump would otherwise land the heading under the bar. */
  scroll-margin-top: 24px;
}
.ar__body h3 {
  margin: 30px 0 14px;
  max-width: 34ch;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(18px, 1.6vw, 21px); line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--near-black);
}

.ar__body a {
  color: var(--red-label);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.ar__body a:hover { text-decoration-thickness: 2px; }

/* --- pull quote ----------------------------------------------------------
   Two treatments in the design: a filled one on #f4f6f8 and a plain one that
   is border only. The filled one is the default; a blockquote with the `is-
   plain` class takes the second. Both share the red left border. */
.ar__body blockquote {
  margin: 34px 0;
  padding: 26px 30px;
  max-width: 64ch;
  background: #f4f6f8;
  border-left: 3px solid var(--red);   /* FILL */
}
.ar__body blockquote p {
  margin: 0;
  max-width: none;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(19px, 1.8vw, 23px); line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--near-black);
}
.ar__body blockquote p + p {
  margin-top: 12px;
  font-family: var(--hud); font-weight: 400;
  font-size: 10px; line-height: 1.5;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--grey-body);
}
.ar__body blockquote.is-plain {
  padding: 0 0 0 26px;
  max-width: 62ch;
  background: none;
}

/* --- lists ---------------------------------------------------------------
   Mono `+` glyphs, per the handoff. The gap is on the list so items stay
   evenly spaced at any length. */
.ar__body ul,
.ar__body ol {
  margin: 26px 0;
  padding: 0;
  max-width: 66ch;
  list-style: none;
  display: flex; flex-direction: column; gap: 16px;
}
.ar__body li {
  position: relative;
  padding-left: 26px;
  font-size: 16.5px; line-height: 1.65;
  color: #2b333b;
}
.ar__body ul li::before {
  content: '+';
  position: absolute; left: 0; top: .05em;
  font-family: var(--hud); font-weight: 800;
  font-size: 13px;
  color: var(--red-label);
}
/* An ordered list numbers itself; a counter rather than list-style, so the
   numeral takes the mono face and the red without a marker pseudo-class. */
.ar__body ol { counter-reset: ar-n; }
.ar__body ol li { counter-increment: ar-n; padding-left: 34px; }
.ar__body ol li::before {
  content: counter(ar-n, decimal-leading-zero);
  position: absolute; left: 0; top: .25em;
  font-family: var(--hud); font-weight: 800;
  font-size: 11px; letter-spacing: .12em;
  color: var(--red-label);
}

/* --- table ---------------------------------------------------------------
   Hairline rows under a 2px red head rule. `table-layout: auto` so a long
   first column is not forced to wrap; the wrapper scrolls rather than the page
   when a wide table meets a narrow column. */
.ar__body figure.wp-block-table,
.ar__body .ar-table-wrap { overflow-x: auto; margin: 34px 0; max-width: 70ch; }
.ar__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
  color: #2b333b;
}
.ar__body thead th,
.ar__body tr:first-child th {
  padding: 0 16px 12px 0;
  text-align: left;
  font-family: var(--hud); font-weight: 700;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--grey-body);
  border-bottom: 2px solid var(--red);   /* FILL */
}
.ar__body td {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid rgba(18, 28, 40, .13);
  vertical-align: top;
}
/* Figures inside a table cell are data, so they take the mono face. */
.ar__body td:not(:first-child) { font-family: var(--hud); font-size: 14px; }

/* --- figures and the gallery ---------------------------------------------
   IN-BODY FIGURES KEEP THEIR OWN ASPECT RATIO. Only the hero is cropped to
   16:9. The design's inline figure is 16:9 too, but that is a photograph; the
   articles this template actually carries illustrate with UI screenshots, and
   `object-fit: cover` at 16:9 crops a 1024x798 screenshot by a third —
   removing exactly the part the caption is pointing at. A figure that wants
   the wide crop can carry `is-wide`. */
.ar__body figure { margin: 34px 0; }
.ar__body figure img { height: auto; }
/* An image linked to its full file — WordPress's "Link to: Media file", and what
   the lightbox binds to. The anchor has to be a block or it sits on a text
   baseline and leaves a few pixels of descender space under every picture. */
.ar__body figure a { display: block; line-height: 0; }
.ar__body figure.is-wide img { aspect-ratio: 16 / 9; object-fit: cover; }

/* --- the gallery ---------------------------------------------------------
   A THREE-UP 1:1 GRID. The prototype measures 304 / 304 / 304 with gap
   `12px 14px` in the 940px column, and 304×3 + 14×2 = 940 exactly.

   `auto-fit, minmax(180px, 1fr)` was here first and was wrong twice over. At
   940px it resolves to FOUR tracks, not three; and the gallery block's own
   caption is a direct child of the gallery, so it took the fourth cell and sat
   BESIDE the last image instead of under the row. Measured before the fix:
   tracks `224.5px ×4`, caption at x=1144 level with the images at y=373.

   The count is authored, not guessed — `columns-N` is the editor's own setting
   on the block. Three is the default because that is what the design shows, and
   it is what the block emits when the setting is untouched. */
.ar__body .wp-block-gallery,
.ar__body .gallery {
  --gal-cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--gal-cols), minmax(0, 1fr));
  gap: 12px 14px;
  margin: 34px 0;
}
.ar__body .wp-block-gallery.columns-1, .ar__body .gallery.gallery-columns-1 { --gal-cols: 1; }
.ar__body .wp-block-gallery.columns-2, .ar__body .gallery.gallery-columns-2 { --gal-cols: 2; }
.ar__body .wp-block-gallery.columns-4, .ar__body .gallery.gallery-columns-4 { --gal-cols: 4; }
.ar__body .wp-block-gallery.columns-5, .ar__body .gallery.gallery-columns-5 { --gal-cols: 5; }
.ar__body .wp-block-gallery.columns-6, .ar__body .gallery.gallery-columns-6 { --gal-cols: 6; }
.ar__body .wp-block-gallery.columns-7, .ar__body .gallery.gallery-columns-7 { --gal-cols: 7; }
.ar__body .wp-block-gallery.columns-8, .ar__body .gallery.gallery-columns-8 { --gal-cols: 8; }

.ar__body .wp-block-gallery figure,
.ar__body .gallery .gallery-item { margin: 0; }
.ar__body .wp-block-gallery img,
.ar__body .gallery img { aspect-ratio: 1 / 1; object-fit: cover; }

/* Per-image caption. Smaller than a standalone figure's — 9.5px/.1em against
   10.5px/.12em — because three of them sit side by side in a third of the
   column. 12px below the image, which is the prototype's row gap: there the
   captions are a second grid ROW, here each one rides inside its own figure. */
.ar__body .wp-block-gallery > figure > figcaption,
.ar__body .gallery .gallery-caption {
  margin: 12px 0 0;
  font-size: 9.5px; line-height: 1.5; letter-spacing: .1em;
}

/* THE GALLERY'S OWN CAPTION — a direct child of the grid, so it needs a full
   row of its own or it lands in the next cell. 2px + the 12px row gap is the
   prototype's 14px. */
.ar__body .wp-block-gallery > figcaption {
  grid-column: 1 / -1;
  margin: 2px 0 0;
}

/* --- FAQ -----------------------------------------------------------------
   details/summary is what an editor reaches for, and it is keyboard-operable
   and searchable without a line of script. The `+` turns to `−` when open. */
.ar__body details {
  padding: 20px 0;
  border-bottom: 1px solid rgba(18, 28, 40, .13);
  max-width: 68ch;
}
.ar__body details:first-of-type { border-top: 1px solid rgba(18, 28, 40, .13); }
.ar__body summary {
  display: grid; grid-template-columns: 1fr auto; gap: 20px;
  align-items: baseline;
  cursor: pointer;
  list-style: none;
  font-family: var(--display); font-weight: 700;
  font-size: 18px; line-height: 1.25; letter-spacing: -.015em;
  color: var(--near-black);
}
.ar__body summary::-webkit-details-marker { display: none; }
.ar__body summary::after {
  content: '+';
  font-family: var(--hud); font-weight: 700; font-size: 15px;
  color: var(--red-label);
}
.ar__body details[open] summary::after { content: '−'; }
.ar__body details p { margin: 10px 0 0; max-width: 60ch; font-size: 15.5px; line-height: 1.7; color: var(--grey-body); }


/* =========================================================================
   Tail — tags, the quiz aside, the next-note link
   ========================================================================= */

.ar__tags {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(18, 28, 40, .13);
}
.ar__tag {
  font-family: var(--hud);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--grey-body);
  border: 1px solid rgba(18, 28, 40, .13);
  padding: 8px 12px;
}

.ar__quiz {
  display: grid; grid-template-columns: 1fr auto;
  gap: 40px; align-items: center;
  margin-top: 22px;
  padding: 32px 34px;
  background: var(--red);            /* FILL */
  color: var(--banner-black);
}
.ar__quiz-kicker {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 13px;
  font-family: var(--hud); font-weight: 700;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: #fff;
}
.ar__quiz-kicker i { width: 20px; height: 2px; background: #fff; flex: none; display: block; }
.ar__quiz-h {
  margin: 0 0 11px;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(23px, 2.3vw, 29px); line-height: 1.02;
  letter-spacing: -.03em; text-transform: uppercase;
  color: var(--banner-black);
}
.ar__quiz-p {
  margin: 0; max-width: 58ch;
  font-family: var(--hud);
  font-size: 12.5px; line-height: 1.8; letter-spacing: .03em;
  color: rgba(255, 255, 255, .9);
}
.ar__quiz-cta {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--banner-black); color: #fff;
  font-family: var(--hud); font-weight: 800;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  padding: 17px 28px;
  white-space: nowrap; text-decoration: none;
}
.ar__quiz-cta:hover { background: var(--near-black); color: #fff; }

.ar__next {
  display: grid; grid-template-columns: 1fr auto;
  gap: 24px; align-items: center;
  margin-top: 16px;
  padding: 26px 28px;
  background: var(--near-black);
  color: #f2f4f5;
  text-decoration: none;
}
.ar__next-idx {
  display: block;
  margin-bottom: 8px;
  font-family: var(--hud); font-weight: 700;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--red-dark);            /* dark ground — the on-dark red */
}
.ar__next-title {
  display: block;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(17px, 1.5vw, 20px); line-height: 1.14; letter-spacing: -.02em;
}
.ar__next-arrow {
  width: 44px; height: 44px; flex: none;
  background: var(--red); color: #fff;   /* FILL */
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
}
.ar__next:hover { color: #fff; }
.ar__next:hover .ar__next-arrow { background: var(--red-dark); }