/*
  WordPress-only additions to the borrowed marketing design system.

  Everything here builds on the custom properties declared in
  /assets/landing-v2.css (--ink, --coral, --wrap, --font-h …). Nothing
  redeclares one: that stylesheet is the single source of the palette, and a
  second :root block here would fork it the first time a colour changed.

  Written with LOGICAL properties throughout (inline-start, margin-inline,
  padding-block) rather than left/right. Hebrew renders RTL and English LTR from
  the same rules, so a physical `padding-left` would be correct in exactly one
  of the two languages and quietly wrong in the other.

  Design read: editorial blog for event professionals, redesign-preserve.
  VARIANCE 8 / MOTION 3 / DENSITY 3. The first pass sat at 6 and came out as a
  conventional card grid; this one lets type and hairlines carry the hierarchy
  instead of boxes. Motion stays low: the marketing pages already carry the
  animation budget and an article should be calm to read. Hover only, and it
  collapses under prefers-reduced-motion.
*/

/* ---- Skip link ---------------------------------------------------------- */

.irua-skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--white);
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-family: var(--font-b);
  font-weight: 600;
}

.irua-skip:focus { inset-inline-start: 12px; }

/* ---- Currency variants ---------------------------------------------------
   The imported pricing markup carries BOTH currencies in the same place:

     <span class="p-ils">₪0.85</span><span class="p-usd">$0</span>

   The app hid one with a <style> block in its <head>, and the import only took
   <main> — so both showed and the price read "₪0.85$0". These are the app's own
   rules, copied verbatim from landing_price_geo() in public/index.php.

   ⚠️ No accompanying script, deliberately. The app only emits one when an FX
   rate is configured; with none set it ships the CSS alone, so `data-cur` is
   never present and the page stays in shekels. */

:root:not([data-cur="USD"]) .p-usd { display: none; }
:root[data-cur="USD"] .p-ils { display: none; }

/* ==========================================================================
   SHARED SHELL
   ========================================================================== */

.irua-doc,
.irua-list {
  padding-block: 132px 96px; /* 68px fixed nav + breathing room */
  background: var(--white);
}

/*
  One measure, used by the article body, the legal documents and every section
  header that sits above prose. 68ch, not a pixel width: the cap has to hold for
  Hebrew and English, whose characters are not the same width.
*/
.irua-measure,
.irua-doc--legal .irua-prose,
.irua-doc--legal .irua-doc-head,
.irua-doc--article .irua-prose,
.irua-doc--article .irua-doc-head,
.irua-doc--article .irua-tags,
.irua-doc--article .irua-article-foot {
  max-width: 68ch;
  margin-inline: auto;
}

/* ---- Prose -------------------------------------------------------------- */

.irua-prose {
  font-family: var(--font-b);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
}

.irua-prose > * + * {
  margin-block-start: 1.15em;
}

.irua-prose h2,
.irua-prose h3,
.irua-prose h4 {
  font-family: var(--font-h);
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-block-start: 2em;
  margin-block-end: 0.6em;
}

.irua-prose h2 { font-size: 26px; font-weight: 700; }
.irua-prose h3 { font-size: 20px; font-weight: 700; }
.irua-prose h4 { font-size: 17px; font-weight: 600; }

.irua-prose a {
  color: var(--coral);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.irua-prose a:hover { text-decoration-thickness: 2px; }

.irua-prose ul,
.irua-prose ol {
  padding-inline-start: 1.4em;
}

.irua-prose li + li { margin-block-start: 0.4em; }

.irua-prose blockquote {
  margin-inline: 0;
  padding-inline-start: 18px;
  border-inline-start: 3px solid var(--coral);
  color: var(--body);
}

.irua-prose code {
  font-family: var(--font-m);
  font-size: 0.9em;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
}

.irua-prose pre {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  overflow-x: auto;
  direction: ltr;
  text-align: left;
}

.irua-prose pre code { background: none; border: 0; padding: 0; }

.irua-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
}

/* A table is the one thing allowed to exceed the measure, in its own scroller. */
.irua-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  display: block;
  overflow-x: auto;
}

.irua-prose th,
.irua-prose td {
  border: 1px solid var(--line);
  padding: 9px 12px;
  text-align: start;
}

.irua-prose th {
  background: var(--surface);
  font-family: var(--font-h);
  font-weight: 600;
}

.irua-prose hr {
  border: 0;
  border-block-start: 1px solid var(--line);
  margin-block: 2.4em;
}

/* ---- Imported legal furniture -------------------------------------------
   The documents are imported from the app-served pages, which carry these
   class names from /assets/legal.css. That stylesheet is NOT loaded here —
   it styles a whole standalone page (its own topbar, its own glow) and would
   fight the marketing nav. The names are re-implemented instead, so the
   imported HTML stays portable and an editor pasting a callout in the block
   editor gets the same result. */

.legal-toc {
  margin-block: 28px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.legal-toc ol,
.legal-toc ul {
  margin: 0;
  padding-inline-start: 1.2em;
  font-size: 15px;
}

.legal-toc a {
  color: var(--ink);
  text-decoration: none;
}

.legal-toc a:hover { color: var(--coral); text-decoration: underline; }

.legal-callout {
  margin-block: 24px;
  padding: 16px 20px;
  border-radius: var(--r-md);
  border-inline-start: 3px solid var(--line-strong);
  background: var(--surface);
  font-size: 15.5px;
}

.legal-callout.brand {
  border-inline-start-color: var(--coral);
  background: var(--coral-tint);
}

.legal-callout > :first-child { margin-block-start: 0; }
.legal-callout > :last-child { margin-block-end: 0; }

/* ---- Tags + the binding-language note ------------------------------------
   Both restored from the deployed stylesheet: they were written against the
   live file and never existed in this worktree copy. */

.irua-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 44px auto 0;
  padding: 0;
  max-width: 72ch;
}

.irua-tags a {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-m);
  font-size: 12px;
  color: var(--body);
  text-decoration: none;
}

.irua-tags a:hover { border-color: var(--coral); color: var(--coral); }

.irua-doc-binding {
  margin: 18px 0 0;
  padding: 12px 16px;
  background: var(--amber-tint);
  border-radius: var(--r-md);
  font-family: var(--font-b);
  font-size: 14px;
  color: var(--ink);
}

.irua-doc-binding a {
  color: var(--coral);
  font-weight: 600;
}

/* ==========================================================================
   ARCHIVE
   ==========================================================================
   ONE card, used everywhere, plus ONE hero used once.

   The first pass at this had four different article treatments on the same page
   — a frosted-panel card, a dark-scrim photo tile, a text-only card and a white
   photo card — all saying the same thing: here is an article. The reference it
   came from is a news portal publishing dozens of stories a day, where those
   tiers encode real differences in importance. This blog has nine articles, so
   the tiers encoded nothing and the page just looked like four designs fighting.

   What survives from the reference: the wash, the centred head, the frosted
   panel over a photo, the pill rail and the section bar. The panel now appears
   exactly once, on the newest article, where a hero belongs.
   ========================================================================== */

.irua-list {
  position: relative;
  padding-block: 132px 96px;
  background: var(--white);
}

.irua-list::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 620px;
  z-index: 0;
  background:
    radial-gradient(60% 80% at 18% 0%, rgba(225, 88, 111, .16), transparent 68%),
    radial-gradient(52% 70% at 82% 6%, rgba(237, 181, 123, .22), transparent 66%),
    linear-gradient(180deg, var(--surface), rgba(255, 255, 255, 0) 88%);
  pointer-events: none;
}

.irua-list > .wrap { position: relative; z-index: 1; }

/* ---- Head ---------------------------------------------------------------- */

.irua-list-head {
  max-width: 62ch;
  margin-inline: auto;
  margin-block-end: 44px;
  text-align: center;
}

.irua-list-head h1 {
  margin: 0 0 10px;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
}

.irua-list-head p {
  margin: 0;
  font-family: var(--font-b);
  font-size: 17px;
  line-height: 1.55;
  color: var(--body);
}

/* ---- Hero: the newest article, once -------------------------------------- */

.irua-hero {
  position: relative;
  margin-block-end: 44px;
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 16 / 7.2;
  isolation: isolate;
}

.irua-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}

.irua-hero:hover img { transform: scale(1.03); }

/*
  The frosted panel. backdrop-filter IS the effect, so the two fallbacks below
  matter: without them the panel is flat translucent white and the text loses
  its contrast against whatever the photo is doing underneath.
*/
.irua-hero-panel {
  position: absolute;
  inset-inline-start: 22px;
  bottom: 22px;
  width: min(52%, 520px);
  padding: 22px 24px 24px;
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(255, 255, 255, .5);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 18px 40px -26px rgba(20, 22, 27, .6);
}

@supports not (backdrop-filter: blur(4px)) {
  .irua-hero-panel { background: rgba(255, 255, 255, .94); }
}

@media (prefers-reduced-transparency: reduce) {
  .irua-hero-panel {
    background: var(--white);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.irua-hero-panel h2 {
  margin: 10px 0 8px;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: clamp(21px, 1.9vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.028em;
  color: var(--ink);
  text-wrap: balance;
}

.irua-hero-panel h2 a { color: inherit; text-decoration: none; }
.irua-hero-panel h2 a::after { content: ""; position: absolute; inset: 0; }
.irua-hero:hover .irua-hero-panel h2 a { color: var(--coral); }

.irua-hero-panel .irua-excerpt {
  margin: 0;
  font-family: var(--font-b);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--nav-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* On the frosted panel the coral tint has almost no contrast against the blur,
   so the chip goes solid white there instead. */
.irua-hero-panel .irua-cat {
  background: var(--white);
  box-shadow: 0 2px 8px -4px rgba(20, 22, 27, .4);
}

/* ---- The card ------------------------------------------------------------
   Two columns, so the count divides cleanly and each card has room for a
   Hebrew headline that runs long. Every article on the site uses this, index
   and related-reading alike — one shape, one order: photo, category, headline,
   excerpt. */

.irua-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.irua-row {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 18px;
  border-radius: var(--r-panel);
  background: var(--white);
  border: 1px solid var(--line);
  transition: box-shadow .25s ease, transform .25s ease;
}

.irua-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 26px 54px -38px rgba(20, 22, 27, .55);
}

.irua-row-media {
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--surface);
}

.irua-row-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}

.irua-row:hover .irua-row-media img { transform: scale(1.04); }

.irua-row h2 {
  margin: 0;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: clamp(19px, 1.5vw, 22px);
  line-height: 1.24;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}

.irua-row h2 a { color: inherit; text-decoration: none; }
.irua-row h2 a::after { content: ""; position: absolute; inset: 0; }
.irua-row:hover h2 a { color: var(--coral); }

.irua-row-excerpt {
  margin: 0;
  font-family: var(--font-b);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--body);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.irua-row-foot {
  display: flex;
  align-items: center;
  margin-block-start: auto;
  padding-block-start: 2px;
}

/* ---- Shared furniture ---------------------------------------------------- */

.irua-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-m);
  font-size: 11.5px;
  color: var(--body);
}

.irua-meta .sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--line-strong);
}

/* A LINK inside a card whose whole surface is a link: the z-index lifts it
   above the headline's ::after so it stays clickable in its own right. */
.irua-cat {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--coral-tint);
  font-family: var(--font-b);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--coral);
  text-decoration: none;
  white-space: nowrap;
}

.irua-cat:hover { background: var(--coral); color: var(--white); }

/* The round arrow. On the hero it sits in the corner opposite the panel; in a
   card it closes the footer row. */
.irua-go {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.irua-hero > .irua-go {
  position: absolute;
  inset-inline-end: 22px;
  bottom: 22px;
  width: 40px;
  height: 40px;
  background: var(--white);
  border-color: transparent;
  box-shadow: 0 10px 24px -14px rgba(20, 22, 27, .6);
}

.irua-hero:hover > .irua-go,
.irua-row:hover .irua-go {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.irua-go svg { width: 16px; height: 16px; display: block; }
/* RTL: the arrow points the way reading runs. */
[dir="rtl"] .irua-go svg { transform: scaleX(-1); }

/* ---- Category rail ------------------------------------------------------- */

.irua-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
  font-family: var(--font-b);
  font-size: 12px;
  font-weight: 600;
  color: var(--nav-ink);
  text-decoration: none;
  white-space: nowrap;
}

.irua-pill:hover { border-color: var(--coral); color: var(--coral); }

.irua-pill .n {
  font-family: var(--font-m);
  font-size: 10.5px;
  color: var(--body);
}

.irua-chips {
  display: flex;
  gap: 10px;
  margin-block-end: 44px;
  padding: 14px 4px;
  /* Scrolls sideways rather than wrapping to three ragged lines. */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.irua-chips::-webkit-scrollbar { display: none; }

/* ---- Section bar --------------------------------------------------------- */

.irua-secbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-block-end: 26px;
  padding: 16px 20px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 16px 40px -34px rgba(20, 22, 27, .5);
}

.irua-secbar h2 {
  margin: 0;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.irua-secbar .sub {
  font-family: var(--font-b);
  font-size: 13.5px;
  color: var(--body);
}

.irua-secbar-l { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }

.irua-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease;
}

[dir="rtl"] .irua-more { padding: 7px 18px 7px 8px; }

.irua-more:hover { background: var(--coral); }

.irua-more i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
}

.irua-more i svg { width: 14px; height: 14px; display: block; }
[dir="rtl"] .irua-more i svg { transform: scaleX(-1); }

/* ---- Pagination ---------------------------------------------------------- */

.irua-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-block-start: 56px;
}

.irua-pagination .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding-inline: 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--nav-ink);
  text-decoration: none;
}

.irua-pagination a.page-numbers:hover { border-color: var(--coral); color: var(--coral); }

.irua-pagination .page-numbers.current {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.irua-pagination .page-numbers.dots { border-color: transparent; background: none; }

/* ---- Empty --------------------------------------------------------------- */

.irua-empty {
  margin: 0;
  padding: 56px 24px;
  border-radius: var(--r-panel);
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: center;
  font-family: var(--font-b);
  font-size: 17px;
  color: var(--body);
}

/* ==========================================================================
   ARTICLE
   ========================================================================== */

.irua-doc { position: relative; }

/* The article opens under the same wash, so a piece and the index read as one
   publication rather than two designs. */
.irua-doc--article::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 460px;
  z-index: 0;
  background:
    radial-gradient(56% 78% at 22% 0%, rgba(225, 88, 111, .13), transparent 68%),
    radial-gradient(48% 66% at 80% 4%, rgba(237, 181, 123, .18), transparent 66%),
    linear-gradient(180deg, var(--surface), rgba(255, 255, 255, 0) 90%);
  pointer-events: none;
}

.irua-doc > .wrap { position: relative; z-index: 1; }

.irua-doc-head { text-align: center; }

.irua-doc-head .irua-meta { justify-content: center; }

.irua-doc-head h1 {
  margin: 14px 0 18px;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
}

.irua-lede {
  margin: 0 auto;
  max-width: 60ch;
  font-family: var(--font-b);
  font-size: 19.5px;
  line-height: 1.55;
  color: var(--body);
}

/*
  The lead image is sized against the TEXT COLUMN, not the page wrap.

  ⚠️ It used to take the full 1185px wrap at the image's own aspect ratio. That
  was survivable while article art was landscape; once the art became square it
  rendered 1185×1185 — taller than the viewport, and more than twice the width
  of the 569px column it introduces. Measured on the live page, not guessed.

  760px is a deliberate breakout: ~95px past the measure on each side, enough to
  read as the article's lead rather than an inline illustration, nowhere near
  the page edge. The ratio is pinned so a SQUARE source centre-crops instead of
  producing a 760px-tall block — see [[project_blog_article_images_are_square]];
  3:2 rather than 16:9 because it keeps a third more of a square original.
*/
.irua-doc-hero {
  width: min(100%, 760px);
  margin: 40px auto 44px;
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--surface);
}

.irua-doc-hero img {
  display: block;
  width: 100%;
  /* ⚠️ `height: auto` is LOAD-BEARING, not tidiness. the_post_thumbnail() emits
     width/height ATTRIBUTES, which map to definite CSS width and height — and
     aspect-ratio only resolves when one of the two is auto. Without this line
     the ratio below is silently ignored and the image renders at its natural
     height (measured on prod: 760×928 instead of 760×507). */
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* A legal document keeps a plain, start-aligned head: no wash, no centring, no
   image, on a page nobody reads for pleasure. */
.irua-doc--legal .irua-doc-head {
  text-align: start;
  margin-block-end: 44px;
  padding-block-end: 28px;
  border-block-end: 1px solid var(--line);
}

.irua-doc--legal .irua-doc-head .irua-meta { justify-content: flex-start; }

.irua-doc-updated {
  margin: 0;
  font-family: var(--font-m);
  font-size: 13px;
  color: var(--body);
}

.irua-doc-updated .sep { margin-inline: 8px; color: var(--line-strong); }

/* ==========================================================================
   NARROW
   ========================================================================== */

@media (max-width: 1000px) {
  /* The hero's panel stops being a panel once it is narrower than its own
     headline, so it gives up the side inset and runs the full width. */
  .irua-hero { aspect-ratio: 16 / 9.5; }
  .irua-hero-panel { width: auto; inset-inline: 18px; bottom: 18px; }
  /* Nowhere left for the arrow that is not on top of the glass. */
  .irua-hero > .irua-go { display: none; }
}

@media (max-width: 760px) {
  .irua-list { padding-block: 104px 64px; }
  .irua-list::before { height: 480px; }
  .irua-doc { padding-block: 104px 64px; }
  .irua-doc--article::before { height: 320px; }

  .irua-list-head { margin-block-end: 32px; }
  .irua-list-head h1 { font-size: clamp(32px, 10vw, 44px); }
  .irua-list-head p { font-size: 16px; }

  /* Tall, not wide: the panel is nearly as tall here as at 1280px but the card
     is 350px across, so a letterbox hero left only a strip of photo above it. */
  .irua-hero { aspect-ratio: 3 / 4; margin-block-end: 32px; }
  .irua-hero-panel { inset-inline: 12px; bottom: 12px; padding: 16px 18px 18px; }
  .irua-hero-panel h2 { font-size: 20px; }

  .irua-chips { margin-block-end: 32px; padding-inline: 0; }

  .irua-secbar { border-radius: var(--r-panel); padding: 16px; gap: 12px; }
  .irua-secbar .sub { display: none; }

  .irua-rows { grid-template-columns: 1fr; gap: 18px; }
  .irua-row h2 { font-size: 20px; }
  /* Two lines on a phone: a full excerpt buries the next headline. */
  .irua-row-excerpt { -webkit-line-clamp: 2; }

  /* Square — article artwork is supplied square, and on a phone this is the
     largest the picture ever appears, so a 16:10 crop would throw away its top
     and bottom. Pinned as a ratio rather than removed so a legacy landscape
     image still centre-crops instead of making one card taller than the rest. */
  .irua-row-media img { aspect-ratio: 1 / 1; }

  .irua-doc-head h1 { font-size: clamp(28px, 8.5vw, 38px); }
  .irua-lede { font-size: 17.5px; }
  /* Full width on a phone, and a little taller than the desktop crop: 3:2 at
     350px is only 233px, which reads as a banner rather than a picture. */
  .irua-doc-hero { width: 100%; margin: 28px 0 32px; }
  .irua-doc-hero img { aspect-ratio: 4 / 3; }

  .irua-prose { font-size: 17px; line-height: 1.75; }
  .irua-prose h2 { font-size: 23px; }
  .irua-prose h3 { font-size: 19px; }

  .irua-cta { padding: 24px 22px; }
  .irua-related { margin-block-start: 56px; }

  /* A table scrolls sideways inside its own frame rather than squeezing four
     columns into 360px and breaking every word onto its own line. */
  .irua-prose .irua-table-scroll { margin-inline: -4px; }
}

/* ==========================================================================
   MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .irua-hero img,
  .irua-row-media img,
  .irua-row { transition: none; }

  .irua-hero:hover img,
  .irua-row:hover .irua-row-media img { transform: none; }

  .irua-row:hover { transform: none; }
}
