/* ==========================================================================
   מסגרות לצעירים בחברה הערבית — מיפוי והמלצות
   קהילת הארמוני × ג'וינט אשלים · אוגוסט 2026

   Design direction: "riso field dossier".
   Flat inks on cream stock, taken from the printed report's own cover —
   sage olive, marker yellow, cyan foot-rule — with the report's line-art
   printed as a single ink plate. No gradients, no soft shadows.
   Everything is scoped to #hyr so it cannot leak into the WP theme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Escape the theme container (full-bleed) + hide the auto page title
   -------------------------------------------------------------------------- */
/* Free every wrapper between the theme container and #hyr — but never html or
   body, which must keep clipping the full-bleed overhang (see the rule below). */
:is(
  *:has(> #hyr), *:has(> * > #hyr), *:has(> * > * > #hyr),
  *:has(> * > * > * > #hyr), *:has(> * > * > * > * > #hyr),
  *:has(> * > * > * > * > * > #hyr)
):not(html):not(body) {
  overflow: visible !important;
  max-width: none !important;
  padding-top: 0 !important;
  padding-inline: 0 !important;
  margin-top: 0 !important;
}
body:has(#hyr) .entry-header,
body:has(#hyr) .page-header,
body:has(#hyr) .post-header,
body:has(#hyr) .ast-page-header,
body:has(#hyr) .elementor-page-title,
body:has(#hyr) .et_pb_page_title,
body:has(#hyr) .fl-page-header,
body:has(#hyr) .breadcrumbs,
body:has(#hyr) .breadcrumb,
body:has(#hyr) h1.entry-title,
body:has(#hyr) h1.page-title { display: none !important; }
/* 100vw is wider than the body once a scrollbar exists; clip the overhang.
   !important because the escape rule above also targets these two elements. */
html:has(#hyr), body:has(#hyr) { overflow-x: clip !important; }

/* --------------------------------------------------------------------------
   2 · Tokens
   -------------------------------------------------------------------------- */
#hyr {
  /* stock */
  --paper:      #E9EDD9;  /* the cover's cream                      */
  --paper-2:    #DFE5CB;  /* banded sections                        */
  --paper-3:    #F4F6EB;  /* raised card                            */
  --paper-4:    #FBFCF6;  /* highest surface, used sparingly        */

  /* inks */
  --ink:        #14180F;  /* body + the illustration plate          */
  --ink-soft:   #4C5341;
  --ink-faint:  #7C8469;

  --sage:       #98A964;  /* the cover band                         */
  --olive:      #7B8F2E;  /* data ink A — validated                 */
  --olive-deep: #46552A;  /* headings                               */
  --cyan:       #008FB5;  /* data ink B — validated                 */
  --cyan-deep:  #00647E;
  --acid:       #E5D900;  /* the marker highlight                   */

  --rule:       #C4CDA8;
  --rule-soft:  #D6DDC0;

  --status-gap: #B4472B;  /* "missing" — always paired with a label */

  /* type */
  --display: 'Suez One', 'Frank Ruhl Libre', Georgia, serif;
  --body:    'Assistant', 'Tajawal', system-ui, sans-serif;
  --data:    'Rubik', 'Assistant', system-ui, sans-serif;

  --shell: 1180px;
  --gutter: clamp(18px, 4vw, 56px);

  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.75;
  direction: rtl;
  text-align: right;
  position: relative;
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
}
#hyr *, #hyr *::before, #hyr *::after { box-sizing: border-box; }
#hyr img { max-width: 100%; height: auto; display: block; }

/* Arabic swaps the body face; Suez One has no Arabic glyphs. */
#hyr[data-lang="ar"] {
  --body: 'Tajawal', system-ui, sans-serif;
  --display: 'Tajawal', system-ui, sans-serif;
  --data: 'Tajawal', system-ui, sans-serif;
}
#hyr[data-lang="ar"] .hyr-display { font-weight: 800; letter-spacing: 0; }

/* --------------------------------------------------------------------------
   3 · Typography
   -------------------------------------------------------------------------- */
#hyr h1, #hyr h2, #hyr h3, #hyr h4 {
  margin: 0 0 .5em;
  line-height: 1.15;
  color: var(--ink);
  font-weight: 400;
  text-wrap: balance;
}
#hyr .hyr-display { font-family: var(--display); font-weight: 400; }

#hyr h2.hyr-display { font-size: clamp(30px, 4.4vw, 50px); line-height: 1.08; }
#hyr h3 { font-family: var(--body); font-weight: 800; font-size: clamp(19px, 2.1vw, 24px); color: var(--olive-deep); line-height: 1.3; }
#hyr h4 { font-family: var(--body); font-weight: 700; font-size: 17px; color: var(--olive-deep); }
#hyr p { margin: 0 0 1.05em; }
#hyr p:last-child { margin-bottom: 0; }
#hyr strong { font-weight: 700; color: var(--ink); }
#hyr a { color: var(--cyan-deep); text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* The marker. One accessory — used only on the report's own thesis words. */
#hyr mark, #hyr .hyr-mark {
  background: linear-gradient(to top, var(--acid) 0 .62em, transparent .62em);
  color: inherit;
  padding: 0 .1em;
  font-weight: 700;
}

/* Eyebrow: chapter number + kicker. The numbering is real — the report is
   a numbered sequence of six chapters, so the marker carries information. */
#hyr .hyr-eyebrow {
  font-family: var(--data);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--ink-faint);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
#hyr .hyr-eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
#hyr .hyr-eyebrow b {
  font-weight: 700;
  color: var(--olive-deep);
  background: var(--paper-4);
  border: 1px solid var(--rule);
  padding: 3px 9px;
  letter-spacing: .08em;
}
#hyr .hyr-lede {
  font-size: clamp(18px, 2.1vw, 21px);
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 62ch;
  font-weight: 300;
}
#hyr .hyr-note {
  font-family: var(--data);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-faint);
}

#hyr .hyr-shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
#hyr .hyr-section { padding-block: clamp(56px, 8vw, 104px); position: relative; }
#hyr .hyr-section--band { background: var(--paper-2); }
#hyr .hyr-section--ink { background: var(--ink); color: var(--paper); }
#hyr .hyr-section--ink h2, #hyr .hyr-section--ink h3 { color: var(--paper); }
#hyr .hyr-section--ink .hyr-lede { color: #C9D2AF; }
#hyr .hyr-section--ink .hyr-eyebrow { color: #8D9673; }
#hyr .hyr-section--ink .hyr-eyebrow::after { background: #38402C; }
#hyr .hyr-section--ink .hyr-eyebrow b { background: transparent; border-color: #38402C; color: var(--sage); }
#hyr .hyr-section + .hyr-section { border-top: 1px solid var(--rule-soft); }
#hyr .hyr-section--ink + .hyr-section,
#hyr .hyr-section + .hyr-section--ink { border-top: 0; }

#hyr .hyr-head { max-width: 78ch; margin-bottom: clamp(32px, 5vw, 56px); }

/* --------------------------------------------------------------------------
   4 · The continuity rail — the report's own argument, as navigation.
   The document says young people fall between disconnected frameworks
   because nothing holds the thread. So the thread is drawn, and it breaks
   exactly where chapter 5 says responsibility breaks.
   -------------------------------------------------------------------------- */
#hyr .hyr-rail {
  position: fixed;
  inset-block: 0;
  right: 0;
  width: 74px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
}
#hyr .hyr-rail.is-on { opacity: 1; }
#hyr .hyr-rail__line {
  position: absolute;
  inset-block: 18%;
  right: 36px;
  width: 1px;
  background: var(--rule);
}
#hyr .hyr-rail__list { list-style: none; margin: 0; padding: 0; pointer-events: auto; }
#hyr .hyr-rail__item { position: relative; display: block; }
#hyr .hyr-rail__dot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 7px 0;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: var(--ink-faint);
  width: 100%;
}
#hyr .hyr-rail__label {
  font-family: var(--data);
  font-size: 11px;
  letter-spacing: .06em;
  white-space: nowrap;
  background: var(--ink);
  color: var(--paper);
  padding: 4px 9px;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .18s ease, transform .18s ease;
}
#hyr .hyr-rail__tick {
  width: 13px;
  height: 2px;
  background: var(--rule);
  margin-inline-end: 30px;
  transition: width .2s ease, background .2s ease;
  flex: none;
}
#hyr .hyr-rail__dot:hover .hyr-rail__label,
#hyr .hyr-rail__dot:focus-visible .hyr-rail__label { opacity: 1; transform: none; }
#hyr .hyr-rail__dot:hover .hyr-rail__tick { width: 22px; background: var(--olive); }
#hyr .hyr-rail__item.is-current .hyr-rail__tick { width: 26px; height: 3px; background: var(--ink); }
/* the break: chapter 5 is where the report says the thread is cut */
#hyr .hyr-rail__item--break { margin-block: 16px; }
#hyr .hyr-rail__item--break::before {
  content: "";
  position: absolute;
  right: 34px;
  top: -12px;
  width: 5px;
  height: 26px;
  background: var(--paper);
}

/* progress bar (the rail's mobile stand-in) */
#hyr .hyr-progress {
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: transparent;
  z-index: 41;
}
#hyr .hyr-progress i { display: block; height: 100%; width: 0; background: var(--ink); }

/* --------------------------------------------------------------------------
   5 · Utility bar (language / print / top)
   -------------------------------------------------------------------------- */
#hyr .hyr-utils {
  position: fixed;
  top: 14px;
  inset-inline-end: 14px; /* opposite edge to the rail, which lives on the start side */
  z-index: 42;
  display: flex;
  gap: 6px;
}
#hyr .hyr-util {
  font-family: var(--data);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  background: var(--paper-4);
  color: var(--ink);
  border: 1px solid var(--rule);
  padding: 7px 12px;
  cursor: pointer;
  line-height: 1;
  transition: background .15s ease, color .15s ease;
}
#hyr .hyr-util:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
#hyr .hyr-util[aria-pressed="true"] { background: var(--acid); border-color: var(--ink); }

/* --------------------------------------------------------------------------
   6 · Cover
   -------------------------------------------------------------------------- */
#hyr .hyr-cover {
  position: relative;
  background: var(--paper);
  border-bottom: 6px solid var(--cyan);
  overflow: hidden;
}
#hyr .hyr-cover__band { height: clamp(56px, 9vw, 104px); background: var(--sage); }
#hyr .hyr-cover__inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding: clamp(36px, 6vw, 76px) var(--gutter) 0;
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: end;
}
#hyr .hyr-cover__kicker {
  font-family: var(--data);
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--olive-deep);
  margin-bottom: 20px;
}
#hyr .hyr-cover h1 {
  font-family: var(--display);
  font-size: clamp(44px, 7vw, 92px);
  line-height: .98;
  letter-spacing: -.01em;
  margin: 0 0 26px;
}
#hyr .hyr-cover h1 span { display: block; }
#hyr .hyr-cover h1 .hyr-cover__hl {
  display: inline-block;
  background: var(--acid);
  padding-inline: .12em;
  box-decoration-break: clone;
}
#hyr .hyr-cover__sub {
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 300;
  color: var(--ink-soft);
  max-width: 40ch;
  margin-bottom: 30px;
}
#hyr .hyr-cover__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-family: var(--data);
  font-size: 13px;
  color: var(--ink-soft);
  padding-block: 18px;
  border-top: 1px solid var(--rule);
  margin-bottom: 26px;
}
#hyr .hyr-cover__meta b { color: var(--ink); font-weight: 500; }

/* the risograph misregistration — the hero, and the only place it appears.
   two plates of the same drawing, a hair out of alignment. */
#hyr .hyr-plate { position: relative; align-self: end; }
#hyr .hyr-plate__img { position: relative; z-index: 2; width: 100%; }
/* mask-image is set inline on the element: a url() inside a custom property
   resolves against the stylesheet that consumes it, not the document. */
#hyr .hyr-plate__ghost {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--cyan);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transform: translate(9px, -9px);
  opacity: .55;
}
#hyr .hyr-plate__ghost--2 {
  background: var(--acid);
  transform: translate(-8px, -4px);
  opacity: .6;
  z-index: 0;
}

#hyr .hyr-cover__logos {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 22px;
  padding-block: 22px 26px;
  border-top: 1px solid var(--rule);
  margin-top: 8px;
}
#hyr .hyr-cover__logos img { height: 44px; width: auto; }
#hyr .hyr-cover__logos .hyr-x { color: var(--ink-faint); font-size: 20px; }
#hyr .hyr-cover__logos .hyr-spacer { flex: 1; }

/* --------------------------------------------------------------------------
   7 · SIGNATURE — the coverage paradox
   30 frameworks. 9 in every 100 young people reached.
   -------------------------------------------------------------------------- */
#hyr .hyr-paradox {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
#hyr .hyr-paradox__say { max-width: 46ch; }
#hyr .hyr-paradox__say h2 { margin-bottom: .35em; }
/* 30 marks, grouped in fives so the count can actually be read. */
#hyr .hyr-paradox__tally {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  max-width: 300px;
  margin-block: 22px 12px;
}
#hyr .hyr-paradox__tally span { display: flex; gap: 4px; }
#hyr .hyr-paradox__tally i {
  width: 3px;
  height: 28px;
  background: var(--sage);
  display: block;
  transform-origin: bottom;
}
#hyr.hyr-js .hyr-paradox.is-in .hyr-paradox__tally i {
  animation: hyr-tally .4s ease both;
  animation-delay: calc(var(--i, 0) * 26ms);
}
@keyframes hyr-tally { from { transform: scaleY(0); } to { transform: scaleY(1); } }

#hyr .hyr-paradox__grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
  width: min(400px, 74vw);
  flex: none;
}
#hyr .hyr-paradox__cell {
  aspect-ratio: 1;
  border: 1px solid var(--rule);
  background: transparent;
  transition: background .3s ease, border-color .3s ease;
}
#hyr .hyr-paradox__cell.is-on { background: var(--ink); border-color: var(--ink); }
#hyr .hyr-paradox__legend {
  display: flex;
  gap: 20px;
  margin-top: 16px;
  font-family: var(--data);
  font-size: 12px;
  color: var(--ink-soft);
  flex-wrap: wrap;
}
#hyr .hyr-paradox__legend span { display: flex; align-items: center; gap: 7px; }
#hyr .hyr-paradox__legend i { width: 11px; height: 11px; flex: none; border: 1px solid var(--rule); }
#hyr .hyr-paradox__legend i.on { background: var(--ink); border-color: var(--ink); }

/* --------------------------------------------------------------------------
   8 · Stat row
   -------------------------------------------------------------------------- */
/* Rules come from the cells, not a background behind the gaps — otherwise a
   half-empty last row leaves a stray coloured block. */
#hyr .hyr-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
}
#hyr .hyr-stat {
  background: var(--paper);
  padding: 22px 20px;
  box-shadow: 0 0 0 1px var(--rule);
}
#hyr .hyr-section--band .hyr-stat { background: var(--paper-2); }
#hyr .hyr-figbox .hyr-stat { background: var(--paper-4); }
#hyr .hyr-stat__n {
  font-family: var(--data);
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -.02em;
  display: block;
}
#hyr .hyr-stat__n small { font-size: .5em; font-weight: 400; color: var(--ink-faint); }
#hyr .hyr-stat__l { font-size: 14px; color: var(--ink-soft); line-height: 1.45; margin-top: 8px; display: block; }

/* --------------------------------------------------------------------------
   9 · Cards
   -------------------------------------------------------------------------- */
#hyr .hyr-grid { display: grid; gap: 18px; }
#hyr .hyr-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
#hyr .hyr-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
#hyr .hyr-grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
/* exactly two columns — for sets of four that should read as a 2×2 block */
#hyr .hyr-grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { #hyr .hyr-grid--pair { grid-template-columns: 1fr; } }

#hyr .hyr-card {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  padding: 24px 22px;
  position: relative;
}
#hyr .hyr-section--band .hyr-card { background: var(--paper-4); }
#hyr .hyr-card__n {
  font-family: var(--data);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--olive);
  display: block;
  margin-bottom: 10px;
}
#hyr .hyr-card h3 { font-size: 19px; margin-bottom: .45em; }
#hyr .hyr-card p { font-size: 15.5px; line-height: 1.68; color: var(--ink-soft); }
#hyr .hyr-card--flag { border-inline-start: 4px solid var(--acid); }

/* insight card with a hairline top rule carrying the count */
#hyr .hyr-insight { border-top: 3px solid var(--ink); padding-top: 20px; }
#hyr .hyr-insight__k {
  font-family: var(--data);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   10 · Figures (the line-art plates)
   -------------------------------------------------------------------------- */
#hyr .hyr-fig { margin: 0; }
#hyr .hyr-fig img { mix-blend-mode: multiply; }
#hyr .hyr-fig__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: end; margin-top: 10px; }
#hyr .hyr-fig__pair img { mix-blend-mode: multiply; }
#hyr .hyr-fig figcaption {
  font-family: var(--data);
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
}
#hyr .hyr-split {
  display: grid;
  grid-template-columns: 1fr .85fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}
#hyr .hyr-split--rev { grid-template-columns: .85fr 1fr; }

/* --------------------------------------------------------------------------
   11 · Tables
   -------------------------------------------------------------------------- */
#hyr .hyr-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--rule);
  background: var(--paper-4);
  -webkit-overflow-scrolling: touch;
}
#hyr table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 620px; }
#hyr thead th {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--data);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .05em;
  text-align: right;
  padding: 12px 14px;
  vertical-align: bottom;
}
#hyr tbody td { padding: 13px 14px; border-top: 1px solid var(--rule-soft); vertical-align: top; line-height: 1.55; }
#hyr tbody tr:nth-child(even) td { background: rgba(196, 205, 168, .16); }
#hyr tbody th {
  padding: 13px 14px;
  border-top: 1px solid var(--rule-soft);
  text-align: right;
  font-weight: 700;
  color: var(--olive-deep);
  vertical-align: top;
  white-space: nowrap;
}
#hyr td .hyr-num, #hyr th .hyr-num { font-family: var(--data); font-variant-numeric: tabular-nums; }
#hyr caption {
  caption-side: bottom;
  text-align: right;
  font-family: var(--data);
  font-size: 12.5px;
  color: var(--ink-faint);
  padding: 12px 14px;
  line-height: 1.6;
  border-top: 1px solid var(--rule);
}

/* The comparison matrix: keep the seven domain columns tight so the
   "main gap" prose column stays readable instead of wrapping to eight lines. */
/* Auto layout hands the prose column whatever is left, which squeezes it to
   eight wrapped lines. Fixed layout + explicit widths keeps every column sane. */
#hyr .hyr-t-compare { table-layout: fixed; width: 100%; min-width: 1060px; }
#hyr .hyr-t-compare :is(th, td) { padding-inline: 10px; }
#hyr .hyr-t-compare :is(th, td):nth-child(1) { width: 150px; }
#hyr .hyr-t-compare :is(th, td):nth-child(2) { width: 70px; }
#hyr .hyr-t-compare :is(th, td):nth-child(3) { width: 100px; }
#hyr .hyr-t-compare :is(th, td):nth-child(4) { width: 102px; }
/* columns 5–11 are the seven domain marks */
#hyr .hyr-t-compare :is(th, td):nth-child(n+5):nth-child(-n+11) {
  width: 54px;
  text-align: center;
  padding-inline: 4px;
}
#hyr .hyr-t-compare thead th:nth-child(n+5):nth-child(-n+11) { font-size: 11px; }
#hyr .hyr-t-compare :is(th, td):nth-child(12) { width: 260px; }
#hyr .hyr-t-compare tbody td:nth-child(2),
#hyr .hyr-t-compare tbody td:nth-child(3) { white-space: nowrap; }
#hyr .hyr-t-compare tbody th:first-child { white-space: normal; }

/* coverage marks — never colour alone, each carries a glyph + a title */
#hyr .hyr-m { font-family: var(--data); font-size: 15px; font-weight: 500; }
#hyr .hyr-m--yes { color: var(--olive); }
#hyr .hyr-m--part { color: var(--cyan-deep); }
#hyr .hyr-m--no { color: var(--status-gap); }

#hyr .hyr-tag {
  display: inline-block;
  font-family: var(--data);
  font-size: 11px;
  letter-spacing: .05em;
  padding: 3px 8px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-soft);
  white-space: nowrap;
}
#hyr .hyr-tag--arab { border-color: var(--olive); color: var(--olive-deep); background: rgba(123, 143, 46, .1); }
#hyr .hyr-tag--jew { border-color: var(--cyan); color: var(--cyan-deep); background: rgba(0, 143, 181, .1); }
#hyr .hyr-tag--mix { border-color: var(--sage); color: var(--olive-deep); background: rgba(152, 169, 100, .18); }
#hyr .hyr-tag--now { background: var(--acid); border-color: var(--ink); color: var(--ink); font-weight: 500; }

/* --------------------------------------------------------------------------
   12 · Charts — built from divs, one axis each, no dual scales.
   -------------------------------------------------------------------------- */
#hyr .hyr-chart { --c-a: var(--olive); --c-b: var(--cyan); }
#hyr .hyr-chart__title { font-weight: 800; font-size: 17px; color: var(--olive-deep); margin-bottom: 4px; }
#hyr .hyr-chart__sub { font-family: var(--data); font-size: 12.5px; color: var(--ink-faint); margin-bottom: 18px; }

#hyr .hyr-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 16px; }
#hyr .hyr-legend span { display: flex; align-items: center; gap: 8px; font-family: var(--data); font-size: 12.5px; color: var(--ink-soft); }
#hyr .hyr-legend i { width: 12px; height: 12px; flex: none; }

#hyr .hyr-bars { display: grid; gap: 10px; }
#hyr .hyr-bar { display: grid; grid-template-columns: minmax(96px, 148px) 1fr; gap: 12px; align-items: center; }
#hyr .hyr-bar__l { font-size: 14px; line-height: 1.3; color: var(--ink-soft); }
#hyr .hyr-bar__t { position: relative; height: 26px; background: rgba(196, 205, 168, .3); overflow: visible; }
#hyr .hyr-bar__f {
  position: relative;
  height: 100%;
  background: var(--c-a);
  border-radius: 0 4px 4px 0; /* rounded data-end, flat at the baseline */
  transition: width .9s cubic-bezier(.22, .8, .3, 1);
}
#hyr .hyr-bar--b .hyr-bar__f { background: var(--c-b); }
/* The value sits just past the data-end, on the surface — so it keeps full
   ink contrast instead of riding on top of the fill colour. */
#hyr .hyr-bar__v {
  position: absolute;
  top: 50%;
  inset-inline-start: 100%;
  transform: translateY(-50%);
  margin-inline-start: 8px;
  font-family: var(--data);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

/* column pair (small multiples share this) */
#hyr .hyr-cols { display: flex; align-items: flex-end; gap: clamp(8px, 2vw, 20px); height: 190px; padding-top: 22px; }
#hyr .hyr-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
#hyr .hyr-col__b {
  width: 100%;
  background: var(--c-a);
  border-radius: 4px 4px 0 0;
  transition: height .9s cubic-bezier(.22, .8, .3, 1);
  position: relative;
}
#hyr .hyr-col--hi .hyr-col__b { background: var(--ink); }
#hyr .hyr-col__v {
  position: absolute;
  top: -21px;
  inset-inline: 0;
  text-align: center;
  font-family: var(--data);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
#hyr .hyr-col__l { font-family: var(--data); font-size: 12px; color: var(--ink-soft); margin-top: 9px; white-space: nowrap; }
#hyr .hyr-axis { border-top: 1px solid var(--rule); }

#hyr .hyr-figbox { background: var(--paper-4); border: 1px solid var(--rule); padding: clamp(20px, 3vw, 30px); }
#hyr .hyr-section--band .hyr-figbox { background: var(--paper-4); }

#hyr details.hyr-data { margin-top: 16px; border-top: 1px solid var(--rule); padding-top: 12px; }
#hyr details.hyr-data summary {
  font-family: var(--data);
  font-size: 12.5px;
  color: var(--cyan-deep);
  cursor: pointer;
  list-style: none;
}
#hyr details.hyr-data summary::-webkit-details-marker { display: none; }
#hyr details.hyr-data summary::before { content: "▸ "; }
#hyr details.hyr-data[open] summary::before { content: "▾ "; }
#hyr details.hyr-data table { min-width: 0; margin-top: 12px; font-size: 14px; }
#hyr details.hyr-data thead th { position: static; }

/* --------------------------------------------------------------------------
   13 · Models (chapter 2)
   -------------------------------------------------------------------------- */
#hyr .hyr-model {
  background: var(--paper-4);
  border: 1px solid var(--rule);
  display: grid;
  grid-template-rows: auto 1fr auto;
}
#hyr .hyr-model__top { padding: 20px 22px 16px; border-bottom: 1px solid var(--rule-soft); }
#hyr .hyr-model__flag {
  font-family: var(--data);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 8px;
}
#hyr .hyr-model__name { font-family: var(--display); font-size: 24px; line-height: 1.1; color: var(--ink); margin: 0 0 6px; }
#hyr[data-lang="ar"] .hyr-model__name { font-weight: 800; }
#hyr .hyr-model__he { font-size: 14px; color: var(--ink-soft); }
#hyr .hyr-model__body { padding: 18px 22px; font-size: 15px; line-height: 1.65; color: var(--ink-soft); }
#hyr .hyr-model__take { padding: 16px 22px; background: rgba(229, 217, 0, .16); border-top: 1px solid var(--rule-soft); }
#hyr .hyr-model__take b {
  font-family: var(--data);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--olive-deep);
  display: block;
  margin-bottom: 7px;
  font-weight: 700;
}
#hyr .hyr-model__take ul { margin: 0; padding-inline-start: 18px; font-size: 14.5px; line-height: 1.6; }
#hyr .hyr-model__take li + li { margin-top: 6px; }

/* --------------------------------------------------------------------------
   14 · Towns (chapter 3)
   -------------------------------------------------------------------------- */
#hyr .hyr-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
#hyr .hyr-filter {
  font-family: var(--data);
  font-size: 12.5px;
  padding: 7px 14px;
  border: 1px solid var(--rule);
  background: var(--paper-4);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#hyr .hyr-filter:hover { border-color: var(--ink); }
#hyr .hyr-filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* only true once the matrix stops fitting the shell */
#hyr .hyr-scrollhint { display: none; margin-bottom: 10px; }
@media (max-width: 1120px) { #hyr .hyr-scrollhint { display: block; } }

#hyr .hyr-town { background: var(--paper-4); border: 1px solid var(--rule); padding: 20px; }
#hyr .hyr-town[hidden] { display: none; }
#hyr .hyr-town__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
#hyr .hyr-town__name { font-family: var(--display); font-size: 23px; color: var(--ink); margin: 0; }
#hyr[data-lang="ar"] .hyr-town__name { font-weight: 800; }
#hyr .hyr-town__nums { display: flex; gap: 18px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--rule-soft); }
#hyr .hyr-town__num b {
  font-family: var(--data);
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
  display: block;
  line-height: 1;
}
#hyr .hyr-town__num span { font-family: var(--data); font-size: 11.5px; color: var(--ink-faint); }
#hyr .hyr-town__gap { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
#hyr .hyr-town__cov { display: flex; gap: 3px; margin-bottom: 12px; }
#hyr .hyr-town__cov i { height: 6px; flex: 1; background: var(--rule); }
#hyr .hyr-town__cov i.on { background: var(--olive); }

/* --------------------------------------------------------------------------
   15 · Diagnoses (chapter 5) — finding → diagnosis → principle
   -------------------------------------------------------------------------- */
#hyr .hyr-dx { border-top: 1px solid var(--rule); padding-block: clamp(26px, 4vw, 40px); }
#hyr .hyr-dx:first-of-type { border-top: 0; padding-top: 0; }
#hyr .hyr-dx__head { display: flex; gap: 16px; align-items: baseline; margin-bottom: 18px; }
#hyr .hyr-dx__n {
  font-family: var(--data);
  font-size: 13px;
  font-weight: 700;
  color: var(--paper);
  background: var(--ink);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: none;
  align-self: center;
}
#hyr .hyr-dx__flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; }
#hyr .hyr-dx__step { background: var(--paper); padding: 18px 18px 20px; box-shadow: 0 0 0 1px var(--rule); }
#hyr .hyr-section--band .hyr-dx__step { background: var(--paper-2); }
#hyr .hyr-dx__step b {
  font-family: var(--data);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 10px;
  font-weight: 500;
}
#hyr .hyr-dx__step p { font-size: 15px; line-height: 1.62; color: var(--ink-soft); }
#hyr .hyr-dx__step--principle { background: var(--acid) !important; }
#hyr .hyr-dx__step--principle b { color: var(--olive-deep); }
#hyr .hyr-dx__step--principle p { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   16 · Recommendations (chapter 6)
   -------------------------------------------------------------------------- */
#hyr .hyr-rec {
  background: var(--paper-4);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--olive);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#hyr .hyr-rec--now { border-top-color: var(--acid); }
#hyr .hyr-rec__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#hyr .hyr-rec__n { font-family: var(--data); font-size: 12px; font-weight: 700; color: var(--ink-faint); letter-spacing: .1em; }
#hyr .hyr-rec h3 { font-size: 19px; margin: 0; }
#hyr .hyr-rec__why { font-size: 15px; line-height: 1.62; color: var(--ink-soft); }
#hyr .hyr-rec__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--rule-soft); display: flex; flex-wrap: wrap; gap: 8px 14px; font-family: var(--data); font-size: 12px; color: var(--ink-faint); }
#hyr .hyr-rec__foot b { color: var(--ink-soft); font-weight: 500; }

#hyr .hyr-steps { counter-reset: s; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
#hyr .hyr-step { background: var(--paper); padding: 20px 22px; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
#hyr .hyr-section--band .hyr-step { background: var(--paper-2); }
#hyr .hyr-step::before {
  counter-increment: s;
  content: counter(s);
  font-family: var(--data);
  font-size: 12px;
  font-weight: 700;
  color: var(--olive-deep);
  border: 1px solid var(--rule);
  background: var(--paper-4);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
}
#hyr .hyr-step h4 { margin-bottom: .3em; }
#hyr .hyr-step p { font-size: 15px; color: var(--ink-soft); }

#hyr .hyr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
#hyr .hyr-list li { position: relative; padding-inline-start: 22px; font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); }
#hyr .hyr-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: .62em; width: 9px; height: 2px; background: var(--olive); }
#hyr .hyr-section--ink .hyr-list li { color: #C9D2AF; }
#hyr .hyr-section--ink .hyr-list li::before { background: var(--acid); }

/* --------------------------------------------------------------------------
   17 · Pull quote
   -------------------------------------------------------------------------- */
#hyr .hyr-pull {
  font-family: var(--display);
  font-size: clamp(23px, 3.2vw, 36px);
  line-height: 1.25;
  color: var(--ink);
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-block: 26px;
  margin: 0;
  max-width: 22ch;
}
#hyr[data-lang="ar"] .hyr-pull { font-weight: 800; }
#hyr .hyr-pull cite {
  display: block;
  font-family: var(--data);
  font-size: 12px;
  font-style: normal;
  letter-spacing: .1em;
  color: var(--ink-faint);
  margin-top: 16px;
}
#hyr .hyr-section--ink .hyr-pull { color: var(--paper); border-top-color: var(--sage); border-bottom-color: #38402C; }

/* --------------------------------------------------------------------------
   18 · People
   -------------------------------------------------------------------------- */
#hyr .hyr-person { border-top: 1px solid var(--rule); padding-top: 14px; }
#hyr .hyr-person b { display: block; font-size: 16px; color: var(--ink); }
#hyr .hyr-person span { font-size: 14px; color: var(--ink-soft); line-height: 1.55; display: block; margin-top: 3px; }

/* --------------------------------------------------------------------------
   19 · Footer
   -------------------------------------------------------------------------- */
#hyr .hyr-foot { background: var(--ink); color: #B9C29E; padding-block: clamp(44px, 6vw, 72px); border-top: 6px solid var(--cyan); }
#hyr .hyr-foot a { color: var(--sage); }
#hyr .hyr-foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; }
#hyr .hyr-foot h4 { color: var(--paper); font-family: var(--data); font-size: 12px; letter-spacing: .12em; font-weight: 500; }
#hyr .hyr-foot__logos { display: flex; align-items: center; gap: 18px; margin-top: 18px; }
#hyr .hyr-foot__logos img { height: 40px; width: auto; }
#hyr .hyr-foot__logos img.hyr-invert { filter: brightness(0) invert(1); opacity: .9; }
#hyr .hyr-foot__rule { border-top: 1px solid #38402C; margin-top: 34px; padding-top: 20px; font-family: var(--data); font-size: 12px; color: #7C8469; }

/* --------------------------------------------------------------------------
   20 · Accessibility, motion, responsive, print
   -------------------------------------------------------------------------- */
#hyr :focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
#hyr .hyr-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
#hyr .hyr-skip {
  position: absolute; inset-inline-start: 8px; top: -60px; z-index: 60;
  background: var(--ink); color: var(--paper); padding: 10px 16px;
  font-family: var(--data); font-size: 13px; transition: top .15s ease;
}
#hyr .hyr-skip:focus { top: 8px; }

/* Entrance animation is opt-in: the .hyr-js class is added by the script, so
   with JS off or broken every block stays visible instead of stuck at opacity 0. */
#hyr.hyr-js .hyr-reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
#hyr.hyr-js .hyr-reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 1180px) {
  #hyr .hyr-rail { display: none; }
}
@media (max-width: 900px) {
  #hyr .hyr-cover__inner { grid-template-columns: 1fr; }
  #hyr .hyr-plate { max-width: 400px; margin-inline: auto 0; }
  #hyr .hyr-paradox { grid-template-columns: 1fr; }
  #hyr .hyr-paradox__grid { width: min(360px, 88vw); }
  #hyr .hyr-split, #hyr .hyr-split--rev { grid-template-columns: 1fr; }
  #hyr .hyr-split .hyr-fig { max-width: 380px; }
}
@media (max-width: 620px) {
  #hyr { font-size: 16px; }
  #hyr .hyr-utils {
    top: auto;
    bottom: 10px;
    inset-inline-end: 10px;
    background: var(--paper);
    padding: 5px;
    box-shadow: 0 0 0 1px var(--rule), 0 4px 14px rgba(20, 24, 15, .12);
  }
  #hyr .hyr-util { padding: 6px 10px; font-size: 11px; }
  #hyr .hyr-bar { grid-template-columns: 1fr; gap: 4px; }
  #hyr .hyr-bar__l { font-size: 13px; }
  #hyr .hyr-town__nums { flex-wrap: wrap; gap: 12px 18px; }
  #hyr .hyr-cols { height: 150px; }
  #hyr .hyr-col__l { font-size: 10.5px; }
  #hyr .hyr-step { grid-template-columns: 1fr; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  #hyr *, #hyr *::before, #hyr *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  #hyr .hyr-reveal { opacity: 1; transform: none; }
}

@media (forced-colors: active) {
  #hyr .hyr-paradox__cell.is-on,
  #hyr .hyr-bar__f, #hyr .hyr-col__b { forced-color-adjust: none; border: 1px solid CanvasText; }
}

@media print {
  #hyr { --paper: #fff; --paper-2: #fff; --paper-3: #fff; --paper-4: #fff; width: auto; margin: 0; font-size: 11pt; }
  #hyr .hyr-rail, #hyr .hyr-utils, #hyr .hyr-progress, #hyr .hyr-filters, #hyr .hyr-skip { display: none !important; }
  #hyr .hyr-section { padding-block: 18pt; break-inside: avoid; }
  #hyr .hyr-reveal { opacity: 1; transform: none; }
  #hyr .hyr-card, #hyr .hyr-model, #hyr .hyr-rec, #hyr .hyr-town, #hyr .hyr-dx { break-inside: avoid; }
  #hyr .hyr-bar__f, #hyr .hyr-col__b { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  #hyr details.hyr-data { display: none; }
}