/* =====================================================================
   SI PATRIOT ARTIKEL — presentation layer
   ---------------------------------------------------------------------
   Loads on top of web-foundation.css. No :root palette, no navigation
   rules: both belong to the foundation, and redeclaring them here would
   beat it by load order.

   Artikel is the reading space. Dampak is cinematic and environmental;
   this is deliberately lighter, quieter and more typographic, so arriving
   from Dampak feels like entering a different room.

   Designed for the inventory that actually exists: three guides, one
   concept piece, one economics piece, eight documented activities and a
   set of planned outputs. Roughly a dozen real items. The layout makes
   that feel curated rather than thin, and it does not pretend to be a
   twelve-post blog.

   Icons are inline SVG. No icon webfont anywhere on this page.
   ===================================================================== */

.ar {
  --pos: #2E7D32;
  --pos-soft: rgba(46,125,50,.10);
  --warn: #8A5200;
  --warn-soft: rgba(178,106,0,.10);
  --paper: #FBFAF6;
  --sand: #F2EFE7;
  --sage: #EDF1EA;
  --panel: #FFFFFF;
  --ink-panel: #16281A;
  background: var(--paper);
}

.ar-wrap { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.ar-sec { padding-block: clamp(48px, 6vw, 84px); }
.ic { width: 1em; height: 1em; flex-shrink: 0; display: inline-block; vertical-align: -0.145em; }

/* Section heads carry a rule, but not all of them. Applied to every
   section it became the page's only separator, and the result read as a
   documentation portal: rule, whitespace, heading, rule, cards, rule.
   Two sections use the rule, two use scale and whitespace instead, and
   Dokumentasi additionally shifts ground colour. That is what supplies
   rhythm; the rule alone was doing too much work. */
.ar-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-bottom: 16px; border-bottom: 2px solid var(--ink); }
.ar-head--open { border-bottom: 0; padding-bottom: 0; align-items: flex-start; }
.ar-head--open .ar-h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.15rem); }
.ar-head--open + * { margin-top: clamp(28px, 3.4vw, 46px); }
.ar-head__l { min-width: 0; }
.ar-eyebrow { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.web .ar-h2 { margin-top: 8px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 1.1rem + .9vw, 1.85rem); line-height: 1.18; letter-spacing: -0.022em; color: var(--ink); }
.web .ar-head__note { font-size: 13px; line-height: 1.5; color: var(--ink-soft); max-width: 34ch; text-align: right; }

/* =====================================================================
   01 MASTHEAD
   A publication nameplate, not a hero. No photograph, no scrim, no
   oversized typography: the point is to signal a reading space.
   ===================================================================== */
.ar-mast { padding-block: clamp(40px, 5vw, 76px) clamp(28px, 3.4vw, 44px); border-bottom: 1px solid var(--line); }
.ar-mast__grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(22px, 3vw, 48px); align-items: end; }
.web .ar-mast__t {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); line-height: 1.04;
  letter-spacing: -0.035em; color: var(--ink); max-width: 16ch; text-wrap: balance;
}
.web .ar-mast__d { margin-top: 16px; max-width: 48ch; font-size: var(--text-lead); line-height: 1.68; color: var(--ink-soft); }
/* Counts lead with the numeral, so the block reads as an index of what
   the archive holds rather than a specification table. */
.ar-mast__meta { display: flex; flex-direction: column; gap: 10px; padding-bottom: 4px; }
.ar-mast__row { display: grid; grid-template-columns: 2.4ch 1fr; align-items: baseline; gap: 14px; padding-bottom: 9px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-soft); }
.ar-mast__row b { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* =====================================================================
   02 FEATURED, as a cover story
   ---------------------------------------------------------------------
   This carried a landscape photograph. It was removed rather than
   restyled: the page had just finished stripping five unsupported
   claims, and a generic landscape in the dominant slot reads as
   documentation of the programme's location. That is the same
   misleading claim made with an image instead of a sentence.

   What replaces it is the cycle the article actually describes, set as
   type. It is honest, it carries its own label saying the cycle is a
   design rather than a result, and it gives the slot the weight of a
   cover story instead of a large card. It is deliberately not the node
   diagram on program.html: this is a linear chain that names its own
   return, not a second copy of that page's signature component.
   ===================================================================== */
.ar-feat {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(26px, 3.4vw, 60px); align-items: center;
  /* The anchor wraps the whole block, so it must be told not to paint
     the browser's default blue underline through the headline. */
  text-decoration: none; color: inherit;
}
.ar-feat__meta { display: flex; align-items: center; gap: 12px; }
.ar-feat__idx { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .1em; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ar-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: 700; font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--primary-deep);
  background: var(--pos-soft); border-radius: var(--radius-pill); padding: 5px 11px;
}
.web .ar-feat__t {
  margin-top: 18px; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 1.3rem + 2.5vw, 3.15rem); line-height: 1.03;
  letter-spacing: -0.036em; color: var(--ink); max-width: 13ch; text-wrap: balance;
}
.web .ar-feat__t em { display: block; font-style: normal; font-weight: 700; color: var(--ink-soft); font-size: .58em; letter-spacing: -0.02em; margin-top: 10px; }
.web .ar-feat__d { margin-top: 18px; max-width: 44ch; font-size: 15px; line-height: 1.72; color: var(--ink-soft); }

/* The cycle panel. Four named stages and an explicit return line. */
.ar-feat__cycle { background: var(--sage); border-radius: var(--radius-lg); padding: clamp(24px, 2.8vw, 36px); }
.ar-feat__cycle-lb { display: block; font-family: var(--font-display); font-weight: 700; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--primary-deep); }
.ar-feat__steps { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: none; }
.ar-feat__steps li { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: baseline; padding: 13px 0; border-top: 1px solid rgba(20,21,15,.10); }
.ar-feat__steps li:first-child { border-top: 0; padding-top: 0; }
.ar-feat__steps b { font-family: var(--font-display); font-weight: 700; font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.web .ar-feat__steps span { font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--ink); }
.web .ar-feat__steps small { display: block; margin-top: 3px; font-family: var(--font-body); font-weight: 400; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.ar-feat__return { margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(20,21,15,.22); display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--ink-soft); }
.ar-feat__return .ic { width: 15px; height: 15px; color: var(--primary-deep); }
.ar-link { margin-top: 20px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--ink); padding-bottom: 3px; transition: gap var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.ar-link:hover { gap: 12px; color: var(--primary-deep); border-bottom-color: var(--primary-deep); }
.ar-link .ic { width: 15px; height: 15px; }

/* =====================================================================
   03 FILTER
   Real filtering. Every pill maps to a section that exists and has
   content; there is no pill for a category we cannot fill.
   ===================================================================== */
/* The nav is sticky at top:0. On desktop it is ~57px tall; on mobile
   the 2-row layout raises it to ~108px. The filter sits below it and
   must clear both. --nav-h is set by site-chrome.js and updated on
   resize, so this value tracks viewport changes automatically. */
.ar {
  --chrome-h: var(--nav-h, 110px); /* fallback covers first paint before rAF fires */
  --filter-h: 64px;
}
/* Desktop: single-row nav is shorter; override to keep scroll offsets tight. */
@media (min-width: 768px) {
  .ar { --chrome-h: var(--nav-h, 62px); }
}
.ar-filter { position: sticky; top: var(--chrome-h); z-index: 20; background: rgba(251,250,246,.94); backdrop-filter: blur(10px); border-block: 1px solid var(--line); }
/* No extra padding in the offset: the section already carries its own
   top padding, and adding both left a 90px hole under the filter. */
.ar-sec[data-cat], .ar-sec[id] { scroll-margin-top: calc(var(--chrome-h) + var(--filter-h)); }
.ar-filter__in { display: flex; align-items: center; gap: 14px; padding-block: 12px; flex-wrap: wrap; }
.ar-filter__lb { font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); }
.ar-pills { display: flex; gap: 7px; flex-wrap: wrap; }
.ar-pill {
  font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: var(--ink-soft);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 8px 15px; cursor: pointer; min-height: 38px;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.ar-pill:hover { border-color: var(--ink-faint); color: var(--ink); }
.ar-pill[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.ar-pill:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.ar-sec[hidden] { display: none; }

/* =====================================================================
   04 PANDUAN — the three SOPs
   Numbered editorial rows, not file-download cards. The number and the
   rule carry the hierarchy so these read as chapters of one manual.
   ===================================================================== */
.ar-guides { margin-top: clamp(24px, 3vw, 38px); display: grid; gap: 0; }
.ar-guide {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) minmax(0, .85fr) auto;
  gap: clamp(16px, 2.4vw, 34px); align-items: center;
  padding: clamp(22px, 2.6vw, 32px) 0; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: background var(--dur-fast) var(--ease-out);
}
.ar-guide:first-child { border-top: 1px solid var(--line); }
.ar-guide:hover { background: var(--sand); }
.ar-guide__n { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.web .ar-guide__t { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, .95rem + .45vw, 1.3rem); line-height: 1.26; color: var(--ink); }
.web .ar-guide__d { font-size: 13.5px; line-height: 1.58; color: var(--ink-soft); }
.ar-guide__go { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink); transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.ar-guide__go .ic { width: 17px; height: 17px; }
.ar-guide:hover .ar-guide__go { background: var(--ink); border-color: var(--ink); color: #fff; }

/* =====================================================================
   05 KNOWLEDGE
   ===================================================================== */
.ar-know { margin-top: clamp(24px, 3vw, 38px); display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(20px, 2.6vw, 40px); align-items: stretch; }
.ar-card {
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(22px, 2.6vw, 32px); text-decoration: none; color: inherit;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.ar-card:hover { border-color: rgba(20,21,15,.18); transform: translateY(-2px); }
.web .ar-card__t { margin-top: 14px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); line-height: 1.22; letter-spacing: -0.018em; color: var(--ink); }
.web .ar-card__d { margin-top: 12px; font-size: 14px; line-height: 1.68; color: var(--ink-soft); }
.ar-card .ar-link { margin-top: auto; padding-top: 20px; }
/* The economics figures, shown as a small table because they are a
   comparison and a comparison is what a table is for. */
.ar-fig { margin-top: 20px; border-top: 1px solid var(--line); }
.ar-fig__row { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--ink-soft); }
.ar-fig__row b { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ar-fig__row.is-neg b { color: var(--warn); }

/* =====================================================================
   06 DOKUMENTASI
   The only content on this page describing things that have actually
   happened, so it is stated plainly as an index rather than dressed up
   with photographs we do not have.
   ===================================================================== */
/* Read as an archive, not a checklist. The numerals carry the section
   rather than a row of bullets: these eight are the only entries on the
   page describing things that actually happened, and the flat two-column
   list made the most real content look the most administrative.
   No descriptions are added, because the source gives only the titles. */
.ar-doc { background: var(--sand); }
.ar-doclist { margin-top: clamp(26px, 3.2vw, 42px); display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(30px, 4vw, 72px); }
.ar-docitem {
  display: grid; grid-template-columns: clamp(44px, 4.4vw, 62px) 1fr; gap: clamp(14px, 1.6vw, 22px);
  align-items: center; padding: clamp(16px, 1.8vw, 22px) 0; border-top: 1px solid rgba(20,21,15,.12);
}
.ar-docitem__n {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); line-height: 1;
  letter-spacing: -0.04em; color: transparent;
  -webkit-text-stroke: 1px rgba(20,21,15,.34); font-variant-numeric: tabular-nums;
  transition: color var(--dur-fast) var(--ease-out);
}
.ar-docitem:hover .ar-docitem__n { color: rgba(20,21,15,.12); }
.web .ar-docitem__t { font-family: var(--font-display); font-weight: 700; font-size: clamp(.95rem, .88rem + .3vw, 1.08rem); line-height: 1.32; color: var(--ink); }
.ar-docmeta { margin-top: clamp(24px, 3vw, 36px); padding-top: 18px; border-top: 2px solid var(--ink); display: grid; grid-template-columns: auto 1fr; gap: 10px 26px; align-items: start; }
.ar-docmeta__lb { font-family: var(--font-display); font-weight: 700; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); padding-top: 2px; }
.web .ar-docmeta p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--ink-soft); max-width: 68ch; }

/* =====================================================================
   07 PUBLIKASI
   Document rows with an explicit status, because every one of these is a
   planned output rather than something already published.
   ===================================================================== */
.ar-pubs { margin-top: clamp(24px, 3vw, 38px); display: grid; gap: 0; }
.ar-pub {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto;
  gap: clamp(14px, 2.4vw, 32px); align-items: center;
  padding: 17px 0; border-bottom: 1px solid var(--line);
}
.ar-pub:first-child { border-top: 1px solid var(--line); }
.web .ar-pub__t { font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.35; color: var(--ink); }
.web .ar-pub__k { font-size: 12.5px; color: var(--ink-soft); }
.ar-status {
  justify-self: end; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: 9px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--warn); background: var(--warn-soft);
  border-radius: var(--radius-pill); padding: 4px 10px;
}

/* =====================================================================
   08 CLOSING
   ===================================================================== */
/* Top padding clears the sticky nav. At 52px the closing headline sat
   19px behind it whenever the section came to rest at the top of the
   viewport, which is exactly where a reader stops to read it. */
.ar-close { background: var(--ink-panel); padding-block: clamp(96px, 8vw, 124px) clamp(24px, 3vw, 40px); }
.ar-close__msg { text-align: center; }
.web .ar-close__t { margin-inline: auto; max-width: 24ch; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2.1rem); line-height: 1.18; letter-spacing: -0.022em; color: #fff; text-wrap: balance; }
.web .ar-close__d { margin: 14px auto 0; max-width: 54ch; font-size: 14px; line-height: 1.68; color: rgba(255,255,255,.76); }
.ar-close__actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.ar-close .ph-panel { margin-top: clamp(40px, 5vw, 64px); }

/* =====================================================================
   ARTICLE DETAIL
   One template, reused by every article page. A contributor supplies a
   title, a summary and a body, and the page composes itself. Metadata
   fields simply do not appear when the data does not exist: there is no
   placeholder byline and no estimated reading time.
   ===================================================================== */
.ar-art { padding-block: clamp(30px, 4vw, 52px) 0; }
/* 720px at 16px measured ~84 characters per line, above the comfortable
   reading measure. 660px lands near 75, which is where long-form prose
   is easiest to track from line to line. */
.ar-art__narrow { max-width: 660px; margin-inline: auto; }
.ar-art__fig.ar-art__narrow { max-width: 780px; }
.ar-crumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-soft); margin-bottom: clamp(22px, 3vw, 36px); }
.ar-crumb a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid transparent; }
.ar-crumb a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.ar-crumb .ic { width: 13px; height: 13px; color: var(--ink-faint); }
.web .ar-art__t {
  margin-top: 16px; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.8rem, 1.3rem + 2.1vw, 2.9rem); line-height: 1.09;
  letter-spacing: -0.032em; color: var(--ink); text-wrap: balance;
}
.web .ar-art__sum { margin-top: 18px; font-size: var(--text-lead); line-height: 1.66; color: var(--ink-soft); }
/* Citation block, standing in for the byline. We have documents, not
   authors, so the page credits the document and does so in the shape of
   a citation rather than a line of small print. */
.ar-art__src { margin-top: 26px; padding-top: 16px; border-top: 2px solid var(--ink); display: grid; grid-template-columns: 18px 1fr; gap: 4px 11px; }
.ar-art__src .ic { width: 15px; height: 15px; color: var(--ink-faint); grid-row: 1 / span 2; margin-top: 3px; }
.ar-art__src-lb { font-family: var(--font-display); font-weight: 700; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.web .ar-art__src-doc { font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 1.4; color: var(--ink); }
.web .ar-art__src-doc small { display: block; margin-top: 3px; font-family: var(--font-body); font-weight: 400; font-size: 12.5px; color: var(--ink-soft); }
.ar-art__fig { margin-block: clamp(30px, 4vw, 50px); }
.ar-art__fig img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); }
.ar-art__cap { margin-top: 11px; font-size: 12.5px; line-height: 1.55; color: var(--ink-faint); }

.ar-body { padding-bottom: clamp(40px, 5vw, 70px); }
.web .ar-body p { margin-top: 18px; font-size: 16px; line-height: 1.78; color: var(--ink-soft); }
.web .ar-body h2 {
  margin-top: clamp(34px, 4vw, 52px); font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); line-height: 1.22;
  letter-spacing: -0.02em; color: var(--ink);
}
.web .ar-body h3 { margin-top: 28px; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.3; color: var(--ink); }
.web .ar-body ul { margin-top: 16px; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.web .ar-body li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); }
.web .ar-body li::before { content: ""; position: absolute; left: 4px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.ar-body strong { font-weight: 700; color: var(--ink); }
/* Callout, used for the status of anything not yet built. Every article
   that describes a planned capability carries one. */
.ar-note { margin-top: clamp(28px, 3.4vw, 40px); display: flex; gap: 13px; padding: 18px 20px; background: var(--sage); border-left: 3px solid var(--primary); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.ar-note .ic { width: 17px; height: 17px; color: var(--primary-deep); margin-top: 3px; }
.web .ar-note p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink); }
/* Data table for the economics piece. */
.ar-table { margin-top: 26px; width: 100%; overflow-x: auto; }
.ar-table table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 460px; }
.ar-table th, .ar-table td { padding: 11px 12px; text-align: right; border-bottom: 1px solid var(--line); }
.ar-table th:first-child, .ar-table td:first-child { text-align: left; }
.ar-table thead th { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); border-bottom: 2px solid var(--ink); }
.ar-table td { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ar-table tbody tr:last-child td { font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--ink); }
.ar-table .neg { color: var(--warn); font-weight: 700; }

.ar-related { background: var(--sand); padding-block: clamp(88px, 7vw, 104px) clamp(40px, 5vw, 64px); }
.ar-rel-grid { margin-top: clamp(20px, 2.6vw, 30px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ar-rel { display: flex; flex-direction: column; gap: 8px; padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); text-decoration: none; color: inherit; transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.ar-rel:hover { border-color: rgba(20,21,15,.18); transform: translateY(-2px); }
.web .ar-rel__t { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; line-height: 1.32; color: var(--ink); }
.web .ar-rel__k { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; }

/* =====================================================================
   MOTION
   Transform only. Opacity is never animated: a stalled transition leaves
   real content invisible while it still occupies layout and takes clicks.
   ===================================================================== */
.ar-reveal { transform: translateY(9px); }
.ar-reveal.is-in { transform: none; transition: transform 460ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .ar-reveal, .ar-reveal.is-in { transform: none; transition: none; }
  .ar-feat:hover .ar-feat__media img { transform: none; }
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1024px) {
  .ar-mast__grid, .ar-feat, .ar-know { grid-template-columns: 1fr; }
  .ar-doclist { grid-template-columns: 1fr; }
  .web .ar-head__note { text-align: left; }
  /* The cycle panel stays below the headline when stacked. It supports
     the story rather than introducing it, so it should not be the first
     thing read on a narrow screen. */
  .ar-feat__cycle { order: 2; }
}
@media (max-width: 820px) {
  .ar-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  /* Guide rows drop the summary column before they drop the arrow, so the
     row still reads as something you can open.
     Both trailing elements are placed explicitly. Left to auto-placement
     they land after the full-width summary and end up alone on a row of
     their own: the arrow detaches from its title and the status badge
     floats under the publication it belongs to. */
  .ar-guide { grid-template-columns: 40px 1fr auto; }
  .ar-guide__go { grid-column: 3; grid-row: 1; }
  .ar-guide__d { grid-column: 2 / -1; grid-row: 2; padding-top: 6px; }
  .ar-pub { grid-template-columns: 1fr auto; }
  .ar-status { grid-column: 2; grid-row: 1; }
  .ar-pub__k { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 820px) {
  .ar-rel-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* Wrapped, the five pills stack three rows deep. Sticky plus the nav
     that made the filter occupy about a quarter of a 812px screen for
     the whole scroll. One scrollable row keeps it to a single band and
     still reaches every category. */
  .ar-filter__in { flex-wrap: nowrap; gap: 10px; }
  .ar-filter__lb { flex-shrink: 0; }
  .ar-pills {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .ar-pills::-webkit-scrollbar { display: none; }
  .ar-pill { flex-shrink: 0; scroll-snap-align: start; }
}
@media (max-width: 640px) {
  .ar-filter__in { gap: 9px; }
  .web .ar-body p { font-size: 15.5px; }
  .ar-docmeta { grid-template-columns: 1fr; gap: 8px; }
  .ar-feat__steps li { grid-template-columns: 26px 1fr; gap: 11px; }
  .ar-pill { font-size: 12px; padding: 9px 13px; min-height: 40px; }
  .ar-close__actions { flex-direction: column; align-items: stretch; }
  .ar-close__actions > a { justify-content: center; }
  .ar-fig__row { font-size: 12.5px; }
}

/* Filter pills measured 40px at 320px. Raised on touch widths only; the
   rule lives here rather than in web-foundation.css because this sheet
   loads later and would otherwise override it. */
@media (max-width: 1024px) {
  .ar-pill { min-height: 44px; }
}