/* =========================================================================
   IRA BIOTECH — Shared inner-page patterns
   About / Manufacturing & Quality / Export / Contact / Product Detail.
   Reuses tokens.css primitives; no cards, no pill buttons, no glassmorphism.
   ========================================================================= */

/* ---- Generic page intro (mirrors products-intro) ---- */
.page-intro { padding-top: clamp(6rem, 12vw, 8rem); padding-bottom: var(--s-10); background: var(--bg); }
.page-intro h1 { margin-block: var(--s-5); max-width: 20ch; }
.page-intro .lede { max-width: 60ch; font-size: 1.1rem; }
.page-intro.on-dark { background: var(--charcoal); }
.page-intro.on-dark h1, .page-intro.on-dark .eyebrow { color: var(--on-dark); }
.page-intro.on-dark .lede { color: var(--on-dark-soft); }

/* ---- Page intro with background photo + dark overlay ----
   Background photo set per-page via inline style (background-image only);
   this stylesheet owns sizing, the overlay gradient, and text color, so every
   page gets the same treatment regardless of which photo it uses. The
   gradient is a separate ::before layer rather than stacked in the inline
   background, so a photo that fails to load still leaves a clean dark panel
   (background-color fallback) instead of an empty/broken one. */
.page-intro.has-image {
  position: relative;
  padding-top: clamp(9rem, 16vw, 12rem);
  padding-bottom: var(--s-20);
  background-color: var(--charcoal);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.page-intro.has-image::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,32,25,.6) 0%, rgba(16,32,25,.4) 45%, rgba(16,32,25,.88) 100%);
}
.page-intro.has-image > .wrap { position: relative; }
.page-intro.has-image h1, .page-intro.has-image .eyebrow { color: var(--on-dark); }
.page-intro.has-image .lede { color: var(--on-dark-soft); }
@media (max-width: 640px) { .page-intro.has-image { padding-bottom: var(--s-16); } }

/* ---- Photo/text split (About story, Vision, Lyophilization) ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-20); align-items: center; }
.split.reverse > *:first-child { order: 2; }
.split-photo { position: relative; aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; background: var(--sage); }
.split-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(20%) contrast(1.05); }
.split-photo::after { content: ""; position: absolute; inset: 0; background: var(--green); mix-blend-mode: multiply; opacity: .15; pointer-events: none; }
.split-photo.contain { background: var(--white); }
.split-photo.contain img { object-fit: contain; padding: var(--s-8); filter: none; }
.split-photo.contain::after { display: none; }
.split-photo.is-fallback, .team-photo.is-fallback { display: flex; align-items: center; justify-content: center; }
.split-photo.is-fallback::after, .team-photo.is-fallback::after {
  content: ""; width: 40px; height: 40px; background: var(--white);
  border: 2px solid var(--accent); border-radius: var(--radius-sm); opacity: .5;
}
.split h2 { margin-bottom: var(--s-5); }
.split p + p { margin-top: var(--s-4); }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--s-8); }
  .split.reverse > *:first-child { order: 0; }
}

/* ---- Team roster ----
   Source headshots vary a lot in style (studio shot, candid desk photo,
   posed portrait), so a consistent grayscale + brand-tint treatment and a
   shared portrait crop pull them into one register instead of reading as
   three unrelated photoshoots. A hairline top rule + serif index number
   match the numbered-row convention used elsewhere on the site. */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-10); margin-top: var(--s-10); }
.team-card { border-top: 1px solid var(--line); padding-top: var(--s-6); }
.team-card .tn { display: block; font-family: var(--font-serif); font-style: italic; font-size: 1.5rem; color: var(--ink-faint); margin-bottom: var(--s-4); }
.team-card .team-photo { position: relative; aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden; background: var(--sage); margin-bottom: var(--s-5); }
.team-card .team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: grayscale(70%) contrast(1.05); }
.team-card .team-photo:not(.is-fallback)::after { content: ""; position: absolute; inset: 0; background: var(--green); mix-blend-mode: multiply; opacity: .14; pointer-events: none; }
.team-card h3 { font-size: 1.3rem; }
.team-card .role { display: block; margin-top: var(--s-1); font-size: .85rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ink); }
.team-card p { margin-top: var(--s-3); font-size: .92rem; }
@media (max-width: 860px) { .team-grid { grid-template-columns: 1fr; gap: var(--s-10); } }

/* ---- Shared molecules (mirrored from home.css for standalone inner pages) ---- */
.credential-list { margin-top: var(--s-8); display: grid; gap: var(--s-4); }
.credential-list .row { display: flex; gap: var(--s-4); padding-block: var(--s-3); border-top: 1px solid var(--line); }
.credential-list .row:first-child { border-top: none; }

.facility-index { margin-top: var(--s-8); }
.facility-row {
  display: grid; grid-template-columns: 40px 1fr 1fr 1fr; gap: var(--s-8);
  padding-block: var(--s-6);
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.facility-index .facility-row:last-child { border-bottom: 1px solid var(--line); }
.facility-row .fi-num { font-weight: 700; color: var(--precision); }
.facility-row h4 { font-size: 1.05rem; font-weight: 700; }
.facility-row .loc { font-size: .88rem; color: var(--ink-soft); }
.facility-row .cap { font-size: .86rem; color: var(--ink-faint); }
@media (max-width: 780px) { .facility-row { grid-template-columns: 1fr; gap: var(--s-2); } .facility-row .fi-num { display: none; } }

.reasons-list { margin-top: var(--s-8); }
.reason-row { display: grid; grid-template-columns: 90px 1fr; gap: var(--s-8); padding-block: var(--s-8); border-top: 1px solid var(--line); }
.reasons-list .reason-row:last-child { border-bottom: 1px solid var(--line); }
.reason-row .rn { font-family: var(--font-serif); font-style: italic; font-size: 2.2rem; color: var(--ink-faint); }
.reason-row h4 { font-size: 1.3rem; margin-bottom: var(--s-2); }
.reason-row p { max-width: 60ch; }
@media (max-width: 700px) { .reason-row { grid-template-columns: 1fr; gap: var(--s-2); } }

.route { margin-top: var(--s-10); }
.route-origin { display: inline-flex; align-items: center; gap: var(--s-3); font-weight: 700; font-size: 1.1rem; padding-bottom: var(--s-3); border-bottom: 1px solid rgba(239,243,238,.25); margin-bottom: var(--s-8); }
.route-origin .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--precision); }
.route-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-8); }
.route-item { border-left: 1px solid rgba(239,243,238,.2); padding-left: var(--s-6); }
.route-item .status { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--precision); margin-bottom: var(--s-2); }
.route-item h4 { color: var(--on-dark); font-size: 1.3rem; margin-bottom: var(--s-2); }
.route-item p { color: var(--on-dark-soft); font-size: .9rem; }
@media (max-width: 780px) { .route-list { grid-template-columns: 1fr; gap: var(--s-6); } }

.on-dark-section { background: var(--charcoal); color: var(--on-dark); }
.on-dark-section h2, .on-dark-section p.lede-dark { color: var(--on-dark); }
.on-dark-section p.lede-dark { color: var(--on-dark-soft); }

.cert-row { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-10); align-items: baseline; }
.cert-row span { font-weight: 700; font-size: 1rem; color: var(--ink); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); }
.partner-note { margin-top: var(--s-6); font-size: .88rem; color: var(--ink-soft); }

.final-cta { background: var(--sage); text-align: center; }
.final-cta h2 { max-width: 18ch; margin-inline: auto; }
.final-cta .btn { margin-top: var(--s-8); }

.note-box { border: 1.5px solid var(--line-strong); border-radius: var(--radius); padding: var(--s-8); max-width: 74ch; }
.note-box h3 { font-size: 1.05rem; margin-bottom: var(--s-3); }
.note-box p { font-size: .92rem; }
.note-box .link-arrow { display: inline-flex; margin-left: var(--s-1); }

/* ---- Detailed numbered timeline (Manufacturing Process, 10 stages) ---- */
.timeline-detail { margin-top: var(--s-10); }
.timeline-row {
  display: grid; grid-template-columns: 64px 1fr; gap: var(--s-6);
  padding-block: var(--s-6);
  border-top: 1px solid var(--line);
}
.timeline-detail .timeline-row:last-child { border-bottom: 1px solid var(--line); }
.timeline-row .tn { font-family: var(--font-serif); font-style: italic; font-size: 2rem; color: var(--ink-faint); }
.timeline-row h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: var(--s-2); }
.timeline-row p { max-width: 62ch; font-size: .94rem; }
@media (max-width: 700px) { .timeline-row { grid-template-columns: 1fr; gap: var(--s-2); } .timeline-row .tn { font-size: 1.5rem; } }

/* ---- Process photo strip (real manufacturing photos, 4 of them) ---- */
.process-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-top: var(--s-10); }
.process-photo { aspect-ratio: 1/1; border-radius: var(--radius-sm); overflow: hidden; background: var(--sage); position: relative; }
.process-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(15%); }
.process-photo::after { content: ""; position: absolute; inset: 0; background: var(--green); mix-blend-mode: multiply; opacity: .12; pointer-events: none; }
.process-photo.is-fallback { display: flex; align-items: center; justify-content: center; }
.process-photo.is-fallback::before { content: ""; width: 28px; height: 28px; background: var(--white); border: 2px solid var(--accent); border-radius: var(--radius-sm); opacity: .5; }
.process-photo .cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: var(--s-3); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--on-dark); background: linear-gradient(0deg, rgba(16,32,25,.75), transparent);
}
@media (max-width: 780px) { .process-photos { grid-template-columns: 1fr 1fr; } }

/* ---- Location list (Contact, About footprint) ---- */
.location-list { margin-top: var(--s-10); }
.location-row {
  display: grid; grid-template-columns: 220px 1fr; gap: var(--s-8);
  padding-block: var(--s-6);
  border-top: 1px solid var(--line);
}
.location-list .location-row:last-child { border-bottom: 1px solid var(--line); }
.location-row h4 { font-size: 1.02rem; font-weight: 700; }
.location-row .tag-loc { display: block; margin-top: var(--s-1); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.location-row address { font-style: normal; font-size: .94rem; color: var(--ink-soft); max-width: 46ch; }
@media (max-width: 700px) { .location-row { grid-template-columns: 1fr; gap: var(--s-2); } }

/* ---- Legal page prose ---- */
.legal-meta { font-size: .85rem; color: var(--ink-faint); margin-bottom: var(--s-10); }
.legal-content { max-width: 74ch; }
.legal-content h2 { margin-top: var(--s-10); margin-bottom: var(--s-4); font-size: 1.3rem; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { margin-bottom: var(--s-4); font-size: .96rem; color: var(--ink-soft); }
.legal-content p:last-child { margin-bottom: 0; }

/* ---- Contact layout: form + info ---- */
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-20); }
.contact-form { display: grid; gap: var(--s-5); }
.field { display: grid; gap: var(--s-2); }
.field label { font-size: .82rem; font-weight: 700; color: var(--ink); }
.field input, .field select, .field textarea {
  font-family: var(--font); font-size: .95rem; color: var(--ink);
  padding: var(--s-3) var(--s-4);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--white);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.form-note { font-size: .82rem; color: var(--ink-faint); margin-top: var(--s-2); }
.contact-info h4 { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--s-3); }
.contact-info .block { padding-bottom: var(--s-8); margin-bottom: var(--s-8); border-bottom: 1px solid var(--line); }
.contact-info .block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.contact-info a.big-link { font-size: 1.3rem; font-weight: 600; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: var(--s-10); } }

/* =========================================================================
   Product Detail template
   ========================================================================= */
.pd-hero { padding-top: clamp(6rem, 12vw, 8rem); padding-bottom: var(--s-16); background: var(--bg); }
.pd-crumb { font-size: .82rem; color: var(--ink-faint); margin-bottom: var(--s-6); }
.pd-crumb a { font-weight: 700; color: var(--ink-soft); }
.pd-crumb a:hover { color: var(--accent-ink); }
.pd-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--s-20); align-items: start; }
.pd-photo { aspect-ratio: 1/1; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pd-photo img { width: 100%; height: 100%; object-fit: contain; padding: var(--s-10); }
.pd-photo.is-fallback::after { content: ""; width: 64px; height: 64px; background: var(--sage); border: 2px solid var(--accent); border-radius: var(--radius-sm); }
.pd-category { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: var(--s-3); }
.pd-layout h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); margin-bottom: var(--s-4); }
.pd-tagline { font-size: 1.1rem; max-width: 52ch; margin-bottom: var(--s-6); }
.pd-spec-strip { display: flex; flex-wrap: wrap; gap: var(--s-6); padding-block: var(--s-5); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); margin-bottom: var(--s-6); }
.pd-spec-strip .spec { display: grid; gap: var(--s-1); }
.pd-spec-strip .spec .k { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.pd-spec-strip .spec .v { font-size: .98rem; font-weight: 700; color: var(--ink); }
.pd-actions { display: flex; gap: var(--s-4); flex-wrap: wrap; }

.pd-body { margin-top: var(--s-4); }
.pd-section { padding-block: var(--s-10); border-top: 1px solid var(--line); }
.pd-section h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: var(--s-5); }
.pd-benefits { display: grid; gap: var(--s-3); max-width: 68ch; }
.pd-benefits li { display: grid; grid-template-columns: 18px 1fr; gap: var(--s-3); font-size: .96rem; color: var(--ink-soft); }
.pd-benefits li::before { content: ""; width: 6px; height: 6px; background: var(--precision); margin-top: 9px; }
.pd-dosage-box { border: 1.5px solid var(--line-strong); border-radius: var(--radius); padding: var(--s-8); max-width: 70ch; }
.pd-dosage-box h3 { font-size: 1.05rem; margin-bottom: var(--s-3); }
.pd-dosage-box p { font-size: .94rem; }
.pd-dosage-box p + p { margin-top: var(--s-3); }
.pd-note { margin-top: var(--s-6); font-size: .84rem; color: var(--ink-faint); max-width: 68ch; }

@media (max-width: 900px) {
  .pd-layout { grid-template-columns: 1fr; gap: var(--s-8); }
  .pd-photo { max-width: 340px; }
}
@media (max-width: 480px) {
  .pd-photo { max-width: 100%; }
  .pd-photo img { padding: var(--s-6); }
}

/* ---- Export range (IRA International) ----
   Editorial rows with hairline dividers, matching the product-row convention;
   thumbnails are the real pack shots from the IRA International category. */
.export-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-8); flex-wrap: wrap; }
.btn-download { display: inline-flex; align-items: center; gap: var(--s-3); flex-shrink: 0; }
.export-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); margin-top: var(--s-10); padding-block: var(--s-5); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.export-facts .k, .export-row .k { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--s-1); }
.export-facts .v { font-size: .95rem; font-weight: 700; }
.export-list { margin-top: var(--s-2); }
.export-row {
  display: grid; grid-template-columns: 2.5rem 96px 1.1fr 1.4fr auto; gap: var(--s-6);
  align-items: center; padding-block: var(--s-5); border-bottom: 1px solid var(--line);
}
.export-row:hover { background: var(--bg); }
.er-num { font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; color: var(--ink-faint); }
.er-thumb { width: 96px; height: 96px; border-radius: var(--radius-sm); background: var(--white); border: 1px solid var(--line); overflow: hidden; display: flex; align-items: center; justify-content: center; transition: border-color var(--dur-fast) var(--ease); }
.er-thumb:hover { border-color: var(--accent); }
.er-thumb img { width: 100%; height: 100%; object-fit: contain; padding: var(--s-2); }
.er-thumb.is-fallback::after { content: ""; width: 22px; height: 22px; background: var(--sage); border: 1.5px solid var(--accent); border-radius: 2px; }
.er-main h3 { font-size: 1.15rem; }
.er-tag { display: block; margin-top: var(--s-1); font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ink); }
.export-row .v { font-size: .9rem; color: var(--ink); }
.er-links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.er-sub { font-size: .8rem; font-weight: 700; color: var(--ink-soft); border-bottom: 1px solid var(--line-strong); padding-bottom: 1px; }
.er-sub:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.export-note { margin-top: var(--s-8); font-size: .85rem; color: var(--ink-soft); max-width: 70ch; }
.export-note a { color: var(--accent-ink); border-bottom: 1px solid var(--accent-ink); }
@media (max-width: 980px) {
  .export-facts { grid-template-columns: 1fr 1fr; }
  .export-row { grid-template-columns: 2rem 72px 1fr; grid-template-areas: "num thumb main" ". spec spec" ". links links"; gap: var(--s-3) var(--s-4); align-items: start; }
  .er-num { grid-area: num; } .er-thumb { grid-area: thumb; width: 72px; height: 72px; } .er-main { grid-area: main; align-self: center; }
  .er-spec { grid-area: spec; } .er-links { grid-area: links; flex-direction: row; gap: var(--s-5); }
}
@media (max-width: 560px) { .btn-download { width: 100%; justify-content: center; } }

/* Busy photographic heroes (bioreactor, lab bench): stronger left-weighted scrim for text legibility */
.page-intro.has-image.is-busy::before {
  background: linear-gradient(90deg, rgba(16,32,25,.9) 0%, rgba(16,32,25,.68) 50%, rgba(16,32,25,.38) 100%),
              linear-gradient(180deg, rgba(16,32,25,.25) 0%, rgba(16,32,25,.55) 100%);
}

/* ---- Supplied photography: square, true colour, no tint ---- */
.split-figure { margin: 0; }
.split-photo.is-natural { aspect-ratio: 1 / 1; background: var(--white); }
.split-photo.is-natural img { object-fit: cover; filter: none; }
.split-photo.is-natural::after { display: none; }
.split-figure figcaption { margin-top: var(--s-4); max-width: 46ch; font-size: .9rem; line-height: 1.55; color: var(--ink-soft); }
.split-photo.is-natural { box-shadow: 0 0 0 1px var(--line); }

/* =========================================================================
   Export product pages (export-*.html)
   ========================================================================= */
.pd-summary { max-width: 52ch; margin-bottom: var(--s-6); color: var(--ink-soft); }
.pd-tagline { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.25; color: var(--accent-ink); margin-bottom: var(--s-4); }
.pd-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-16); align-items: start; }
.pd-two h2 { margin-bottom: var(--s-3); }
.pd-sub { font-size: .94rem; color: var(--ink-soft); max-width: 28ch; }

.comp-list { border-top: 1px solid var(--line-strong); max-width: 640px; }
.comp-row { display: grid; grid-template-columns: 6.5rem 1fr; column-gap: var(--s-6); row-gap: var(--s-3); align-items: baseline; padding-block: var(--s-5); border-bottom: 1px solid var(--line); }
.comp-pct { font-family: var(--font-serif); font-size: 2.6rem; line-height: 1; color: var(--accent-ink); font-variant-numeric: lining-nums; }
.comp-name { font-weight: 700; font-size: 1.05rem; }
.comp-name i { font-style: italic; }
.comp-bar { grid-column: 2; height: 3px; background: var(--line); position: relative; }
.comp-bar i { position: absolute; inset: 0 auto 0 0; width: var(--w); min-width: 3px; background: var(--accent); }

.apply { max-width: 640px; }
.apply-dose { display: flex; align-items: baseline; gap: var(--s-4); }
.apply-dose .n { font-family: var(--font-serif); font-size: clamp(3rem, 5vw, 4.4rem); line-height: 1; color: var(--charcoal); }
.apply-dose .u { font-size: 1.05rem; font-weight: 700; color: var(--ink-soft); }
.apply-methods { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-3); }
.apply-methods li { padding: var(--s-2) var(--s-4); border: 1px solid var(--line-strong); border-radius: 999px; font-size: .92rem; font-weight: 700; }
.apply-note { margin-top: var(--s-5); font-size: .95rem; color: var(--ink-soft); max-width: 56ch; }

.range-index { list-style: none; padding: 0; margin-top: var(--s-6); display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-16); border-top: 1px solid var(--line-strong); }
.range-index li { border-bottom: 1px solid var(--line); }
.range-index a, .range-index li.is-current { display: grid; grid-template-columns: 2.2rem 1fr; column-gap: var(--s-3); padding-block: var(--s-4); align-items: baseline; }
.range-index .ri-n { font-family: var(--font-serif); font-style: italic; color: var(--ink-faint); font-size: 1.05rem; }
.range-index .ri-name { font-weight: 800; }
.range-index .ri-tag { grid-column: 2; font-size: .86rem; color: var(--ink-soft); }
.range-index a:hover .ri-name { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.range-index li.is-current { background: var(--sage); padding-inline: var(--s-3); margin-inline: calc(var(--s-3) * -1); grid-template-columns: 2.2rem 1fr; }
.range-index li.is-current .ri-name::after { content: " (viewing)"; font-weight: 600; color: var(--ink-soft); font-size: .84rem; }
.pn-row { margin-top: var(--s-8); display: flex; justify-content: space-between; gap: var(--s-6); }
.pn-link { display: grid; gap: var(--s-1); padding: var(--s-3) 0; }
.pn-link span { font-size: .8rem; color: var(--ink-faint); font-weight: 700; }
.pn-link strong { font-size: 1.05rem; }
.pn-next { text-align: right; margin-left: auto; }
.pn-link:hover strong { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .pd-two { grid-template-columns: 1fr; gap: var(--s-6); }
  .range-index { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .comp-row { grid-template-columns: 5rem 1fr; column-gap: var(--s-4); }
  .comp-pct { font-size: 2.1rem; }
}
.er-main h3 a { color: inherit; }
.er-main h3 a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 560px) {
  .pd-actions .btn { width: 100%; justify-content: center; }
}

/* ---- Content pages and blog (Phase 5) ---- */
.is-shaded { background: var(--bg-alt); }
.prose-wrap { max-width: 800px; }
.rich > h2 { margin: var(--s-4) 0 var(--s-5); font-size: clamp(1.8rem, 3vw, 2.6rem); }
.rich h3 { margin: var(--s-8) 0 var(--s-3); font-size: 1.15rem; }
.rich h2 + p, .rich h3 + p { margin-top: 0; }
.rich p { margin: 0 0 var(--s-4); line-height: 1.7; }
.rich ul { margin: 0 0 var(--s-5); padding-left: 1.25rem; }
.rich li { margin-bottom: var(--s-2); line-height: 1.6; }
.rich blockquote { margin: var(--s-6) 0; padding-left: var(--s-5); border-left: 3px solid var(--green); font-size: 1.1rem; }
.rich blockquote p { margin: 0; }
.post-head h1 { max-width: 22ch; }
.post-meta { margin-top: var(--s-4); }
.post-head .eyebrow a { color: inherit; text-decoration: none; }
.post-hero { margin: 0 0 var(--s-8); border-radius: var(--radius); overflow: hidden; }
.post-hero img { display: block; width: 100%; height: auto; }
.post-back { margin-top: var(--s-10); }
.related-title { margin-bottom: var(--s-8); font-size: clamp(1.5rem, 2.4vw, 2rem); }
.post-grid { list-style: none; margin: 0; padding: 0; display: grid; align-items: start; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); }
.post-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.post-link { display: block; color: inherit; text-decoration: none; height: 100%; }
.post-link:hover h2, .post-link:focus-visible h2 { text-decoration: underline; }
.post-cover { aspect-ratio: 16 / 10; background: var(--sage); overflow: hidden; }
.post-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-body { padding: var(--s-6); }
.post-body time { font-size: .85rem; color: var(--ink-soft); }
.post-body h2 { margin: var(--s-2) 0 var(--s-3); font-size: 1.3rem; line-height: 1.25; }
.post-body p { margin: 0; color: var(--ink-soft); line-height: 1.55; }
.pager-site { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); margin-top: var(--s-10); }
.blog-empty { max-width: 60ch; }
.blog-empty .btn + .btn { margin-left: var(--s-3); }
@media (max-width: 900px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; } .pager-site { flex-wrap: wrap; } }