/* reference.css -- faq.html, glossary.html and insights.html (pages_reference.py). Round 2, 25 Oct 2026.
   Loaded after tokens.css + inner.css; touches only these three pages (every rule is scoped to .ip-faq, .ip-glossary
   or a class only they use). */

/* ---------- shared: the up-links and the "last updated" line under a hero answer ---------- */
.ip-up { margin: 18px 0 0; max-width: 46rem; font-size: 15.5px; line-height: 1.6; color: var(--body); }
.ip-up a { color: var(--text); border-bottom: 1px solid var(--ember); transition: color .3s; }
.ip-up a:hover { color: var(--ember-2); }
.ip-upd { display: block; margin-top: 12px; font-family: var(--f-m); font-size: var(--fs-lab); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }

/* ---------- faq: hero index, two fixed columns (A = buyers, B = suppliers + both) ---------- */
.ip-faq .fh-idx { display: block; margin-top: clamp(28px, 3vw, 44px); }
.ip-faq .fh-idx ol { columns: auto; margin: 0 0 6px; }
.fh-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); margin-top: 18px; }
.fh-grp { display: flex; align-items: baseline; gap: 12px; margin: 0; padding: 4px 0 10px; border-bottom: 1px solid var(--rule); font-family: var(--f-m); font-size: var(--fs-lab); letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.fh-grp b { font-weight: 500; color: var(--text); }
.fh-grp span { margin-left: auto; color: var(--mute); }
.fh-col ol + .fh-grp { margin-top: 26px; }
.fh-ask { margin: 22px 0 0; }
.fh-ask .more { margin: 0; }
@media (max-width: 760px) { .fh-cols { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- faq: the phone audience bar, .f-aud (.f-bar is the homepage film's progress line; the desktop rails are hidden below 1081px) ---------- */
.f-aud { display: none; }
@media (max-width: 1080px) {
  .f-aud { position: sticky; top: var(--nav-h); z-index: 30; display: flex; margin-top: 28px; background: rgba(7, 8, 10, .95); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); transition: top .3s; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  body:has(.nav.hide) .f-aud { top: 0; }
  .f-aud a { flex: 1 1 0; display: flex; align-items: baseline; justify-content: center; gap: 7px; min-width: 0; padding: 13px 4px 11px; border-bottom: 2px solid transparent; font-size: 14px; color: var(--mute); white-space: nowrap; transition: color .3s, border-color .3s; }
  .f-aud a i { font-style: normal; font-family: var(--f-m); font-size: var(--fs-lab); letter-spacing: .06em; }
  .f-aud a.on { color: var(--text); border-bottom-color: var(--ember); }
  .ip-faq .f-band { scroll-margin-top: 104px; }
  .ip-faq .qa2, .ip-faq .fh-idx, .ip-faq .f-close { scroll-margin-top: 124px; }
}
@media (max-width: 420px) { .f-aud a i { display: none; } }

/* ---------- faq: audience bands (a frame of their own footage behind the band's question) ---------- */
.ip-faq .f-band > .f-fig { position: absolute; inset: 0; margin: 0; }
.ip-faq .f-fig img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: brightness(.62) saturate(.92); }
.ip-faq .f-band::before { background: linear-gradient(90deg, rgba(7, 8, 10, .9) 0%, rgba(7, 8, 10, .6) 42%, rgba(7, 8, 10, .1) 100%); }
.ip-faq .f-fig .f-cap { z-index: 1; }
.f-band-p { margin: 14px 0 0; max-width: 34rem; font-size: 16px; line-height: 1.55; color: var(--body); }
#suppliers .f-fig img { object-position: 80% 40%; }

/* ---------- faq: answers ---------- */
.ip-faq .qa2-go .ic { width: 24px; height: 24px; }
.ip-faq .qa2-b p + p, .ip-faq .qa2-b .checks + p, .ip-faq .qa2-b .tbl + p { margin-top: 14px; }
.ip-faq .qa2-b .checks { margin-top: 18px; }
.ip-faq .qa2-b .tbl { margin-top: 20px; }
.ip-faq .qa2-b .qa-src { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--mute); }
.qa-src a { color: var(--body); border-bottom: 1px solid var(--line-2); transition: color .3s; }
.qa-src a:hover { color: var(--text); }
.qa-tbl tbody th { font-size: clamp(20px, 1.6vw, 26px); }
/* the grouped boxes: pulled out to the left by their own padding, so 07-09 and 17-19 hang on the page's numeral line, and the
   box's top edge IS the rule under the answer before it (no double rule) */
.ip-faq .qa-band { margin: -1px 0 0 calc(-1 * clamp(18px, 2.4vw, 32px)); padding-bottom: 4px; }
.ip-faq .qa-band + .qa2 { border-top: 0; }
@media (max-width: 760px) {
  .ip-faq .qa-band { margin-left: calc(-1 * var(--gut)); margin-right: calc(-1 * var(--gut)); padding-left: var(--gut); padding-right: var(--gut); border-left: 0; border-right: 0; }
}
/* the closing question, for both audiences */
.f-close { padding-top: clamp(48px, 6vw, 88px); }
.f-close .qa2 { margin-top: 18px; border-top: 1px solid var(--rule); border-bottom: 0; }
.ip .f-close h2 { margin-bottom: 14px; font-size: clamp(30px, 3vw, 46px); line-height: 1.05; }
@media (min-width: 1081px) { .f-close { padding-left: calc(var(--gut) + var(--rail-w) + clamp(32px, 4vw, 72px)); } }

/* ---------- glossary: hero ---------- */
.ip-glossary .gh { grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding-bottom: clamp(40px, 5vw, 64px); }
.ip-glossary .gh-count { margin: 0 0 6px; }
@media (max-width: 900px) { .ip-glossary .gh { grid-template-columns: 1fr; } }

/* ---------- glossary: our route, full-bleed band under the hero ---------- */
.gpath { padding: clamp(40px, 4.5vw, 64px) 0 clamp(44px, 5vw, 72px); background: var(--bg-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.gpath-h { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: 20px clamp(32px, 5vw, 90px); align-items: end; }
.gp-lede { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--body); }
.gp-lede a { color: var(--text); border-bottom: 1px solid var(--ember); }
.gp-row { container-type: inline-size; list-style: none; margin: clamp(28px, 3vw, 40px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1.25fr)) repeat(2, minmax(0, .75fr)); column-gap: 30px; }
.gp-row li { min-width: 0; }
.gp-row li::before, .gp-row li::after { content: none; }
.gp-row a { display: block; color: inherit; }
.gp-fig { position: relative; display: block; margin: 0; border: 1px solid var(--rule); background: var(--panel); transition: border-color .4s; }
.gp-fig img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.gp-fig figcaption { position: absolute; left: 0; bottom: 0; padding: 3px 7px; background: rgba(7, 8, 10, .8); font-family: var(--f-m); font-size: var(--fs-lab); letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.gp-ic { display: grid; place-items: center; height: calc((100cqw - 120px) * 1.25 / 5.25 * .625 + 1px); }
.gp-ic .gp-glyph { width: 56px; height: 56px; stroke-width: 1.1; }
.gp-arr { position: absolute; left: -24px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 18px; line-height: 1; color: var(--warm); }
.gp-t { display: block; padding-top: 14px; }
.gp-t i { display: block; font-style: normal; font-family: var(--f-m); font-size: var(--fs-lab); letter-spacing: .12em; color: var(--mute); }
.gp-t b { display: block; margin-top: 6px; font-size: clamp(19px, 1.5vw, 24px); font-weight: 400; letter-spacing: -.015em; color: var(--text); transition: color .3s; }
.gp-t span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.45; color: var(--body); }
.gp-row a:hover b { color: var(--ember-2); }
.gp-row a:hover .gp-fig { border-color: rgba(236, 231, 222, .6); }
@media (max-width: 900px) {
  .gpath-h { grid-template-columns: 1fr; }
  .gp-row { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin-left: calc(-1 * var(--gut)); margin-right: calc(-1 * var(--gut)); padding: 0 var(--gut) 10px; scroll-padding-left: var(--gut); }
  .gp-row li { flex: 0 0 72vw; scroll-snap-align: start; }
  .gp-row li:nth-child(n+4) { flex-basis: 46vw; }
  .gp-ic { height: calc(72vw * .625 + 2px); }
  .gp-arr { display: none; }
}

/* ---------- glossary: the A-Z rail (a letter list on the rule spine; ember on the current letter) ---------- */
.ip-glossary .g-grid { grid-template-columns: 112px minmax(0, 1fr); }
.ip-glossary .az ol { display: block; border-left: 1px solid var(--rule); }
.ip-glossary .az a { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-left: -1px; padding: 4px 0 4px 14px; border: 0; border-left: 2px solid transparent; text-align: left; font-family: var(--f-m); font-size: 14px; color: var(--mute); transition: color .3s, border-color .3s; }
.ip-glossary .az a b { font-weight: 500; }
.ip-glossary .az a i { font-style: normal; font-size: var(--fs-lab); color: var(--mute); }
.ip-glossary .az a:hover { color: var(--text); }
.ip-glossary .az a.on { color: var(--text); border-left-color: var(--ember); }
@media (max-width: 900px) {
  .ip-glossary .g-grid { grid-template-columns: minmax(0, 1fr); }
  .ip-glossary .az { min-width: 0; position: sticky; top: var(--nav-h); z-index: 30; margin: 0 calc(-1 * var(--gut)) 6px; background: rgba(7, 8, 10, .95); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); transition: top .3s; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  body:has(.nav.hide) .ip-glossary .az { top: 0; }
  .ip-glossary .az > p { display: none; }
  .ip-glossary .az ol { position: relative; display: flex; flex-wrap: nowrap; gap: 0; overflow-x: auto; scrollbar-width: none; border-left: 0; padding: 0 var(--gut); }
  .ip-glossary .az ol::-webkit-scrollbar { display: none; }
  .ip-glossary .az li { flex: none; }
  .ip-glossary .az a { display: block; min-width: 0; margin: 0; padding: 12px 12px 10px; border-left: 0; border-bottom: 2px solid transparent; text-align: center; }
  .ip-glossary .az a i { display: none; }
  .ip-glossary .az a.on { border-bottom-color: var(--ember); }
  .ip-glossary .lb, .ip-glossary .term { scroll-margin-top: 120px; }
}

/* ---------- glossary: letter blocks and terms ---------- */
.ip-glossary .lb { grid-template-columns: clamp(96px, 11vw, 180px) minmax(0, 1fr); padding: 30px 0 8px; }
.lb-k { position: sticky; top: calc(var(--nav-h) + 24px); align-self: start; }
.lb-l { display: block; font-size: clamp(88px, 9.5vw, 170px); font-weight: 800; line-height: .8; letter-spacing: -.05em; font-variation-settings: 'wdth' 125; color: transparent; -webkit-text-stroke: 1.5px rgba(236, 231, 222, .55); }
.lb-n { display: block; margin-top: 14px; font-family: var(--f-m); font-size: var(--fs-lab); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.ip-glossary .term { display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(160px, 1fr); column-gap: clamp(28px, 3vw, 48px); padding: 26px 0 28px; border-bottom: 1px solid var(--line-2); scroll-margin-top: 90px; }
.ip-glossary .term:first-child { padding-top: 0; }
.ip-glossary .term:last-child { border-bottom: 0; }
.t-h { grid-column: 1 / -1; }
.ip .t-h h2 { font-size: clamp(24px, 2.1vw, 34px); line-height: 1.12; letter-spacing: -.025em; }
.ip-glossary .t-h dfn { font-style: normal; font-size: inherit; font-weight: 500; line-height: inherit; letter-spacing: inherit; color: var(--text); }
.t-d { grid-column: 1; margin-top: 14px; min-width: 0; }
.t-d p { margin: 0; font-size: var(--fs-body); line-height: 1.7; color: var(--body); }
.t-aside { grid-column: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; margin-top: 18px; }
.ip-glossary .t-cat { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
.ip-glossary .t-cat .ic { width: 22px; height: 22px; }
.ip-glossary .t-alt { margin: 0; font-size: 17px; }
.ip-glossary .t-link { margin-top: 0; line-height: 1.35; }
.t-src { margin: 2px 0 0; font-family: var(--f-m); font-size: var(--fs-lab); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.t-src a { color: var(--body); border-bottom: 1px solid var(--line-2); }
.ip-glossary .t-tbl { margin-top: 22px; }
.t-tbl tbody th { font-size: 16.5px; font-weight: 500; line-height: 1.35; letter-spacing: 0; font-variation-settings: normal; white-space: normal; }
@media (max-width: 1280px) {
  .ip-glossary .term { grid-template-columns: minmax(0, 1fr); }
  .t-aside { grid-column: 1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
}
@media (max-width: 900px) {
  .ip-glossary .lb { grid-template-columns: 1fr; padding-top: 26px; }
  .lb-k { position: static; display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
  .lb-l { font-size: 64px; }
  .lb-n { margin-top: 0; }
}

/* ---------- glossary: sources ---------- */
.g-src { padding-top: clamp(56px, 6vw, 96px); padding-bottom: clamp(24px, 3vw, 40px); }
.g-src-p { margin: 18px 0 0; max-width: var(--measure); font-size: 16px; line-height: 1.6; color: var(--body); }
.g-srcl { margin: 24px 0 0; padding-left: 2.2em; columns: 2; column-gap: clamp(28px, 4vw, 64px); }
.g-srcl li { break-inside: avoid; margin: 0 0 9px; font-size: 14.5px; line-height: 1.45; color: var(--mute); scroll-margin-top: 110px; }
.g-srcl li::marker { font-family: var(--f-m); font-size: 12px; color: var(--mute); }
.g-srcl a { color: var(--body); border-bottom: 1px solid var(--line-2); transition: color .3s; }
.g-srcl a:hover, .g-srcl li:target a { color: var(--text); border-bottom-color: var(--ember); }
@media (max-width: 760px) { .g-srcl { columns: 1; } }

/* ---------- insights.html: the programme (round 2, 25 Oct 2026; every rule scoped to .ip-hub) ---------- */
/* hero: the count and one frame of their own footage in the right column, level with the h1 */
.ip-hub .hx { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(36px, 5vw, 96px); align-items: start; padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(40px, 4vw, 64px); }
.ip-hub .hx-top { grid-column: 1 / -1; }
.ip-hub .hx-l, .ip-hub .hx-r { margin-top: 18px; }
.ip-hub .hx .ip-h1 { font-size: clamp(44px, 5.4vw, 96px); }
.ip-hub .hx .ip-answer { max-width: var(--measure); }
.ip-hub .hx-sub { margin: 22px 0 0; max-width: var(--measure); font-size: 16.5px; line-height: 1.65; color: var(--body); }
.ip-hub .hx-sub a { color: var(--text); border-bottom: 1px solid var(--ember); transition: color .3s; }
.ip-hub .hx-sub a:hover { color: var(--ember-2); }
.ip-hub .hx-r { display: flex; flex-direction: column; gap: 30px; }
.ip-hub .hx-count { width: 100%; margin: 0; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.ip-hub .hx-count div { padding: 14px 14px 0 0; }
.ip-hub .hx-count div + div { padding-left: 18px; }
.ip-hub .hx-count dd { font-size: clamp(52px, 5.2vw, 92px); }
.ip-hub .hx-still { margin: 0; }
@media (max-width: 900px) {
  .ip-hub .hx { grid-template-columns: minmax(0, 1fr); }
  .ip-hub .hx-r { margin-top: 36px; }
}

/* the four topics: typographic cards (outlined numeral, like the doors' A / B, floated so the heading wraps round it),
   one system, no picture slot */
.ip-hub .tp { padding-top: clamp(24px, 3vw, 40px); }
.ip-hub .tp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.ip-hub .tp-c { position: relative; display: block; padding: clamp(24px, 2.6vw, 40px); overflow: hidden; background: var(--panel); border: 1px solid var(--rule); }
.ip-hub .tp-code { float: right; margin: -6px -4px 12px 20px; font-size: clamp(84px, 8vw, 140px); font-weight: 800; line-height: .8; letter-spacing: -.06em; font-variation-settings: 'wdth' 125; color: transparent; -webkit-text-stroke: 1.5px rgba(236, 231, 222, .3); }
.ip-hub .tp-k { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-family: var(--f-m); font-size: var(--fs-lab); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.ip-hub .tp-k b { font-weight: 500; color: var(--ember); padding-right: 12px; border-right: 1px solid var(--line-2); }
.ip .tp-c h2 { font-size: clamp(26px, 2.3vw, 38px); line-height: 1.08; }   /* wraps round the floated numeral */
.ip-hub .tp-a { margin: 18px 0 0; max-width: 40rem; font-size: 16.5px; line-height: 1.62; color: var(--body); }
.ip-hub .tp-n { margin: 24px 0 8px; font-family: var(--f-m); font-size: var(--fs-lab); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.ip-hub .tp-g { list-style: none; width: 100%; margin: 0 0 22px; padding: 0; border-top: 1px solid var(--rule); }
.ip-hub .tp-g li { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-2); font-size: 15.5px; line-height: 1.4; }
.ip-hub .tp-g .ic { flex: none; width: 20px; height: 20px; transform: translateY(4px); }
.ip-hub .tp-g a { color: var(--text); border-bottom: 1px solid var(--ember); transition: color .3s; }
.ip-hub .tp-g a:hover { color: var(--ember-2); }
.ip-hub .tp-g .is-next span { color: var(--body); }
.ip-hub .tp-g .is-next i { flex: none; margin-left: auto; padding: 2px 8px; border: 1px dashed rgba(236, 231, 222, .45); font-family: var(--f-m); font-size: 12px; font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.ip-hub .tp-c .more { margin-top: 0; }
.ip-hub .tp-src { margin: 18px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--mute); }
.ip-hub .tp-src a { color: var(--body); border-bottom: 1px solid var(--line-2); transition: color .3s; }
.ip-hub .tp-src a:hover { color: var(--text); border-bottom-color: var(--ember); }
.ip-hub .tp-chk { display: inline-block; margin: 0 10px 8px 0; padding: 2px 8px; border: 1px solid var(--rule); font-family: var(--f-m); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
@media (max-width: 900px) { .ip-hub .tp-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .ip-hub .tp-code { font-size: 56px; }
  .ip .tp-c h2 { font-size: 24px; }
  .ip-hub .tp-g .is-next { flex-wrap: wrap; }
  .ip-hub .tp-g .is-next i { margin-left: 32px; }
}

/* the guide list: rows on structural rules with a sprocket band between them, crop-marked own footage with its
   caption, the topic tag over each title, the reading time over each date (all three are text in each card,
   written by card() and rebuild_site.stamp_hub(); .hc-when holds the reading time and the <time> in the date column,
   placed where inner.css places .hc time) */
.ip-hub .hub-list h2 { margin: 16px 0 14px; }
.ip-hub .hl-p { max-width: var(--measure); margin: 0 0 36px; font-size: var(--fs-body); line-height: 1.65; color: var(--body); }
.ip-hub .hc { border-bottom: 1px solid var(--rule); }
.ip-hub .hc + .hc::before { content: ""; display: block; height: 5px; margin-top: 8px; background: repeating-linear-gradient(90deg, rgba(236, 231, 222, .22) 0 10px, transparent 10px 22px); }
.ip-hub .hc a::before { color: var(--ember); font-weight: 500; }
.ip-hub .hc-fig { position: relative; border-color: var(--rule); }
.ip-hub .hc-fig:not(:has(img)) { display: none; }
.ip-hub .hc-in { position: relative; display: block; overflow: hidden; }
.ip-hub .hc-in .cm { border-color: rgba(236, 231, 222, .7); }
.ip-hub .hc-cap { display: none; padding: 8px 10px; background: var(--bg-2); border-top: 1px solid var(--line-2); font-family: var(--f-m); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.45; color: var(--mute); }
.ip-hub .hc-fig:has(img[src*="/img/film/"]) .hc-cap { display: block; }
.ip-hub .hc-tag { display: block; margin-bottom: 10px; font-family: var(--f-m); font-size: var(--fs-lab); letter-spacing: .12em; text-transform: uppercase; color: var(--warm); }
.ip-hub .hc-when { align-self: start; padding-top: 6px; white-space: nowrap; font-family: var(--f-m); font-size: var(--fs-lab); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.ip-hub .hc-when time { display: block; padding-top: 0; justify-self: auto; }
.ip-hub .hc time { color: rgba(236, 231, 222, .58); }
.ip-hub .hc-read { display: block; margin-bottom: 6px; color: var(--mute); }
.ip-hub .hc:first-child .hc-when { grid-column: 3; grid-row: 1; justify-self: end; }
@media (max-width: 900px) { .ip-hub .hc-when, .ip-hub .hc:first-child .hc-when { grid-column: 2; grid-row: auto; padding-top: 0; justify-self: start; } }
.ip-hub .hc-fig img[src*="/b35-flakes-from-hopper-bag"] { object-position: 60% 85%; transform: scale(1.3); transform-origin: 60% 75%; }
.ip-hub .hc a:hover .hc-fig img[src*="/b35-flakes-from-hopper-bag"] { transform: scale(1.34); }

/* coming next: real upcoming titles, never linked or dated; the strip wraps (nothing hidden off screen) */
.ip-hub .hn-h { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 88px); align-items: end; margin-bottom: 32px; }
.ip-hub .hn-h .edit-p { margin-bottom: 0; }
.ip-hub .hn-still { margin: 0; }
.ip-hub .hx-next .edit-strip { overflow: visible; }
.ip-hub .hx-next .edit-strip ol { width: auto; flex-wrap: wrap; row-gap: 14px; }
.ip-hub .hx-next .edit-strip li { flex: 1 1 calc(20% - 14px); min-width: 210px; }
@media (max-width: 900px) { .ip-hub .hn-h { grid-template-columns: minmax(0, 1fr); row-gap: 28px; } }
/* the card number is in the flow at the top of each card (inner.css has it absolute), so a long title can never
   grow up into it (critical pass 25 Oct 2026: at 390 px three-line titles ran under 01, 02 and 05) */
.ip-hub .hx-next .fe-n { position: relative; inset: auto; margin: -2px 0 auto; padding-bottom: 12px; }
@media (max-width: 600px) { .ip-hub .hx-next .edit-strip li { flex-basis: 100%; min-height: 136px; } }

/* the closing doors on this page: both panels' content top-aligned, buttons on one baseline; B's serif kept inside
   its column; the doors' header stacks A and B on a phone */
.ip-hub .cd { align-items: stretch; }
.ip-hub .cd-c .btn { margin-top: auto; }
.ip-hub .cd-sell .cd-t { font-size: clamp(38px, 4.2vw, 74px); }
@media (max-width: 600px) { .ip-hub .cd-head span { display: block; max-width: 17em; } }