/* 2026-10-08 v1.4
 * - Chapter I can show two links side by side.
 * 2026-10-08 v1.3
 * - Fixed chapter rail on the right, after the timeline year index; intro navigation only on phones.
 * 2026-10-08 v1.2
 * - Added the Op Koers style collage runner (dots with progress ring) in HHH colours.
 * - Spec list as even rows with one baseline and uniform redacted bars.
 * - Removed the empty space below chapter II caused by row gaps on spare grid rows.
 * 2026-10-08 v1.1
 * - Kept the chapter III reveal filters when the theme's scroll-focus image dimming applies.
 * 2026-10-08 v1.0
 * - Three stacked HHH chapters (ro_blocks template hhh-chapters.php).
 * - .hhh-subtitle-alt-font: the alternative Trirong italic subtitle font, reusable elsewhere.
 */
.hhh-subtitle-alt-font { font-family:'Trirong',serif; font-style:italic; font-weight:300; letter-spacing:0; text-transform:none; }

.hhh-chapters { --hhh-ink:#f6f3ec; --hhh-soft:#e9e2d8; --hhh-body:#cfc6bc; --hhh-muted:#b5aba1; --hhh-accent:#d0c2b6; --hhh-line:rgba(246,243,236,.14); --hhh-redact:#3a332d; background:#12100e; color:var(--hhh-ink); }
.hhh-chapters-wrap { box-sizing:border-box; max-width:1288px; margin:0 auto; padding:0 24px; }
.hhh-chapters a { color:var(--hhh-accent); }
.hhh-chapters a:hover { color:var(--hhh-ink); }

.hhh-chapters-intro { padding:112px 0 72px; }
.hhh-chapters-intro-inner { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:32px; }
.hhh-chapters-intro-text { display:flex; flex-direction:column; gap:12px; max-width:640px; }
.hhh-chapters-eyebrow,
.hhh-chapters-label { font-family:'Reem Kufi',sans-serif; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--hhh-accent); }
.hhh-chapters .hhh-chapters-title { margin:0; font-size:40px; line-height:1.2; color:var(--hhh-ink); }
.hhh-chapters-nav { display:flex; flex-wrap:wrap; gap:28px; }
.hhh-chapters-nav a { display:inline-flex; align-items:baseline; gap:10px; min-height:44px; text-decoration:none; }
.hhh-chapters-nav a span:first-child { font-size:20px; color:var(--hhh-accent); }
.hhh-chapters-nav a span:last-child { font-family:'Reem Kufi',sans-serif; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--hhh-ink); }

.hhh-chapter { scroll-margin-top:80px; }
.hhh-chapter-row { display:flex; flex-wrap:wrap; align-items:center; gap:64px; }
.hhh-chapter-row > * { min-width:0; }
.hhh-chapters-head { display:flex; align-items:baseline; gap:16px; }
.hhh-chapters-numeral { font-size:64px; line-height:1; color:var(--hhh-accent); }

.hhh-chapter-copy { display:flex; flex-direction:column; gap:22px; }
.hhh-chapter-copy > * { margin:0; }
.hhh-chapters .hhh-chapter-copy h2 { margin:0; font-family:'Reem Kufi',sans-serif; font-weight:400; font-size:34px; letter-spacing:5px; line-height:1.25; text-transform:uppercase; color:var(--hhh-ink); }
.hhh-chapters .hhh-chapter-copy h3 { margin:0; font-family:'Trirong',serif; font-style:italic; font-weight:300; font-size:21px; line-height:1.45; letter-spacing:0; text-transform:none; color:var(--hhh-soft); }
.hhh-chapters .hhh-chapter-copy blockquote { margin:0; padding:0; border:0; font-family:'Trirong',serif; font-style:italic; font-weight:300; font-size:21px; line-height:1.5; letter-spacing:0; color:var(--hhh-soft); }
.hhh-chapters .hhh-chapter-copy blockquote p { margin:0; font:inherit; color:inherit; }
.hhh-chapters .hhh-chapter-copy p { margin:0; font-size:15px; line-height:1.75; letter-spacing:.5px; color:var(--hhh-body); }
.hhh-chapters .hhh-chapter-copy p a { color:var(--hhh-ink); text-decoration:underline; text-underline-offset:3px; }

.hhh-chapters-link { display:inline-flex; align-self:flex-start; align-items:center; justify-content:center; gap:10px; min-height:44px; font-family:'Reem Kufi',sans-serif; font-size:13px; letter-spacing:2px; text-transform:uppercase; text-decoration:none; }
.hhh-chapters-link:not(.is-cta)::after { content:'→'; }
.hhh-chapters-links { display:flex; flex-wrap:wrap; align-items:center; gap:4px 36px; }
.hhh-chapters-link.is-cta { min-height:48px; padding:0 28px; border:1px solid var(--hhh-accent); color:var(--hhh-ink); }
.hhh-chapters-link.is-cta::after { content:'↓'; }
.hhh-chapters-link.is-cta:hover { background:var(--hhh-accent); color:#12100e; }

/* Chapter I */
.hhh-chapter-1 { padding:24px 0 120px; }
.hhh-chapter-1 .hhh-chapters-collage { flex:1 1 600px; }
.hhh-chapter-1 .hhh-chapter-copy { flex:1 1 400px; }
.hhh-chapters-collage { position:relative; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); grid-template-rows:repeat(2,minmax(0,1fr)); gap:12px; height:640px; }
.hhh-chapters-collage figure { margin:0; min-width:0; min-height:0; overflow:hidden; }
.hhh-chapters-collage figure:first-child { grid-row:1/span 2; }
.hhh-chapters-collage img { display:block; width:100%; height:100%; object-fit:cover; transition:opacity .7s ease; transition-delay:var(--hhh-collage-delay,0ms); }
.hhh-chapters-collage figure:first-child img { object-position:50% 28%; }
.hhh-chapters-collage figure:nth-child(2) img { --hhh-collage-delay:160ms; }
.hhh-chapters-collage figure:nth-child(3) img { --hhh-collage-delay:320ms; }
.hhh-chapters-collage.is-faded img { opacity:0; }

/* Chapter II */
.hhh-chapter-2 { background:#1a1613; padding:0 0 120px; }
.hhh-chapter-wide { position:relative; margin:0; height:600px; overflow:hidden; }
.hhh-chapter-wide img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 45%; }
.hhh-chapter-wide figcaption { position:absolute; left:0; right:0; bottom:0; padding:120px 0 36px; background:linear-gradient(180deg,rgba(26,22,19,0) 0%,rgba(26,22,19,.95) 100%); }
/* row-gap stays 0: the stats column spans spare implicit rows, which must not add height. */
.hhh-chapter-2 .hhh-chapters-wrap > .hhh-chapter-copy { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,340px); column-gap:64px; row-gap:0; align-content:start; padding-top:48px; }
.hhh-chapter-2 .hhh-chapter-copy > *:not(.hhh-stats):not(:last-child) { margin-bottom:22px; }
.hhh-chapter-2 .hhh-chapter-copy > * { grid-column:1; }
.hhh-chapter-2 .hhh-chapter-copy > .hhh-stats { grid-column:2; grid-row:1/span 20; align-self:start; }
.hhh-chapters .hhh-stats { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.hhh-chapters .hhh-stats li { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin:0; padding:22px 24px; border:1px solid var(--hhh-line); }
.hhh-chapters .hhh-stats li::before { content:none; }
.hhh-chapters .hhh-stats li > span { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--hhh-muted); }
.hhh-chapters .hhh-stats li > strong,
.hhh-chapters .hhh-stats li > s { font-family:'Reem Kufi',sans-serif; font-weight:400; font-size:24px; letter-spacing:1px; color:var(--hhh-ink); }
.hhh-chapters .hhh-stats li > s { color:var(--hhh-muted); }
.hhh-chapters .hhh-stats li.is-highlight { border-color:var(--hhh-accent); background:rgba(208,194,182,.08); }
.hhh-chapters .hhh-stats li.is-highlight > span { color:var(--hhh-accent); }

/* Chapter III */
.hhh-chapter-3 { background:#080706; padding:120px 0 128px; }
.hhh-chapter-3 .hhh-chapter-copy { flex:1 1 400px; }
.hhh-chapters-reveal { flex:1 1 600px; position:relative; height:620px; overflow:hidden; background:#000; }
.hhh-chapters-reveal img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.hhh-chapters-reveal-base { filter:grayscale(1) blur(10px) brightness(.28) !important; transform:scale(1.04); }
/* !important: the theme dims every ro-block img outside scroll focus with a high-specificity filter. */
.hhh-chapters-reveal-slit { filter:grayscale(.6) brightness(.7) contrast(1.3) !important; clip-path:inset(0 40% 0 40%); }
.hhh-chapters .hhh-chapter-copy dl { display:grid; grid-template-columns:120px 1fr; margin:0; padding:0; border-top:1px solid var(--hhh-line); }
.hhh-chapters .hhh-chapter-copy dt,
.hhh-chapters .hhh-chapter-copy dd { display:flex; align-items:center; min-height:48px; margin:0; padding:0; border-bottom:1px solid var(--hhh-line); line-height:1; }
.hhh-chapters .hhh-chapter-copy dt { font-family:'Reem Kufi',sans-serif; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--hhh-muted); }
.hhh-chapters .hhh-chapter-copy dd { font-size:14px; letter-spacing:1px; color:var(--hhh-ink); }
.hhh-redacted { display:inline-block; width:.9em; height:.9em; margin-left:1px; overflow:hidden; border-radius:2px; background:var(--hhh-redact); color:transparent; font-size:inherit; user-select:none; }
.hhh-redacted.is-wide { width:180px; max-width:100%; margin-left:0; }

/* Collage runner (after the Op Koers portfolio pagination) */
.hhh-collage-pagination { position:absolute; z-index:2; left:20px; bottom:20px; display:flex; align-items:center; gap:5px; height:27px; }
.hhh-collage-pagination button { position:relative; display:flex; align-items:center; justify-content:center; flex:0 0 17px; width:17px; height:17px; margin:0; padding:0; border:1px solid rgba(246,243,236,.7); border-radius:50%; background:transparent; -webkit-backdrop-filter:blur(12px) brightness(80%); backdrop-filter:blur(12px) brightness(80%); cursor:pointer; transition:border-color .2s, box-shadow .2s, transform .2s; }
.hhh-collage-pagination button:not(.is-active):hover,
.hhh-collage-pagination button:not(.is-active):focus-visible { border-color:var(--hhh-accent); outline:0; box-shadow:0 0 0 3px rgba(208,194,182,.3); transform:scale(1.12); }
.hhh-collage-pagination button.is-active { flex-basis:19px; width:19px; height:19px; border-color:var(--hhh-accent); }
.hhh-collage-pagination button.is-active::before { content:""; position:absolute; inset:-4px; padding:3px; border-radius:50%; background:conic-gradient(from -90deg, var(--hhh-accent) var(--hhh-progress), transparent 0); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; animation:hhh-collage-progress var(--hhh-progress-duration, 8000ms) linear forwards; }
.hhh-collage-pagination.is-paused button.is-active::before { animation-play-state:paused; }
@property --hhh-progress { syntax:"<percentage>"; inherits:false; initial-value:0%; }
@keyframes hhh-collage-progress { to { --hhh-progress:100%; } }

/* Chapter rail (after the timeline year index) */
.hhh-chapters-intro .hhh-chapters-nav { display:none; }
.hhh-chapters-rail { position:fixed; z-index:10; top:50%; right:0; width:64px; padding:8px 0; overflow:hidden; border-radius:12px 0 0 12px; background:rgba(13,10,8,.72); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); opacity:0; visibility:hidden; transform:translate(12px,-50%); transition:width .2s ease, opacity .3s ease, transform .3s ease, visibility .3s; }
.hhh-chapters-rail.is-visible { opacity:1; visibility:visible; transform:translate(0,-50%); }
.hhh-chapters-rail:is(:hover,:focus-within) { width:max-content; max-width:calc(100vw - 32px); }
.hhh-chapters .hhh-chapters-rail a { display:grid; grid-template-columns:40px minmax(0,1fr); align-items:baseline; gap:6px; width:max-content; min-width:100%; box-sizing:border-box; padding:9px 18px 9px 12px; border-left:2px solid transparent; color:rgba(246,243,236,.58); text-decoration:none; white-space:nowrap; transition:color .2s ease, background-color .2s ease, border-color .2s ease; }
.hhh-chapters .hhh-chapters-rail a:hover,
.hhh-chapters .hhh-chapters-rail a.is-active { color:var(--hhh-ink); background:rgba(208,194,182,.08); }
.hhh-chapters .hhh-chapters-rail a.is-active { border-left-color:var(--hhh-accent); }
.hhh-chapters-rail-numeral { font-size:20px; line-height:1; color:var(--hhh-accent); text-align:center; }
.hhh-chapters-rail-title { font-family:'Reem Kufi',sans-serif; font-size:11px; letter-spacing:2px; text-transform:uppercase; opacity:0; transition:opacity .15s ease; }
.hhh-chapters-rail:is(:hover,:focus-within) .hhh-chapters-rail-title { opacity:1; transition-delay:.08s; }

@media (max-width:719px) {
    .hhh-chapters-wrap { padding:0 16px; }
    .hhh-chapters-intro { padding:64px 0 32px; }
    .hhh-chapters-intro-inner { gap:20px; }
    .hhh-chapters .hhh-chapters-title { font-size:28px; line-height:1.25; }
    .hhh-chapters-rail { display:none; }
    .hhh-chapters-intro .hhh-chapters-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:100%; }
    .hhh-chapters-nav a { flex-direction:column; gap:2px; padding-top:10px; border-top:1px solid rgba(246,243,236,.18); }
    .hhh-chapters-nav a span:first-child { font-size:18px; }
    .hhh-chapters-nav a span:last-child { font-size:10px; letter-spacing:1.5px; }
    .hhh-chapter-row { gap:20px; }
    .hhh-chapter-copy { gap:20px; }
    .hhh-chapters-numeral { font-size:48px; }
    .hhh-chapters-label { font-size:11px; }
    .hhh-chapters .hhh-chapter-copy h2 { font-size:24px; letter-spacing:3px; line-height:1.3; }
    .hhh-chapters .hhh-chapter-copy h3,
    .hhh-chapters .hhh-chapter-copy blockquote { font-size:19px; }
    .hhh-chapters .hhh-chapter-copy p { font-size:14px; line-height:1.7; }
    .hhh-chapter-1 { padding:16px 0 72px; }
    .hhh-chapters-collage { width:100%; height:auto; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:420px 160px; gap:8px; }
    .hhh-chapters-collage figure:first-child { grid-row:auto; grid-column:1/span 2; }
    .hhh-chapter-2 { padding:0 0 72px; }
    .hhh-chapter-wide { height:440px; }
    .hhh-chapter-wide img { object-position:30% 45%; }
    .hhh-chapter-wide figcaption { padding:100px 0 20px; }
    .hhh-chapter-2 .hhh-chapters-wrap > .hhh-chapter-copy { display:flex; padding-top:24px; }
    .hhh-chapter-2 .hhh-chapter-copy > *:not(.hhh-stats):not(:last-child) { margin-bottom:0; }
    .hhh-chapters .hhh-stats { gap:8px; }
    .hhh-chapters .hhh-stats li { padding:16px; }
    .hhh-chapters .hhh-stats li > strong,
    .hhh-chapters .hhh-stats li > s { font-size:19px; }
    .hhh-chapter-3 { padding:72px 0 80px; }
    .hhh-chapter-3 .hhh-chapter-row { flex-direction:column-reverse; align-items:stretch; }
    .hhh-chapters-reveal { flex:none; width:100%; height:460px; }
    .hhh-chapters-reveal-slit { clip-path:inset(0 38% 0 38%); }
    .hhh-chapters .hhh-chapter-copy dl { grid-template-columns:96px 1fr; }
    .hhh-collage-pagination { left:12px; bottom:12px; }
    .hhh-chapters-link.is-cta { align-self:stretch; }
}

@media (prefers-reduced-motion:reduce) {
    .hhh-chapters-collage img { transition:none; }
    .hhh-collage-pagination button.is-active::before { animation:none; --hhh-progress:0%; }
}

/* Heritage numerals share the chapter colour and scale with their label. */
.hhh-numeral-svg { display:block; height:1em; width:auto; overflow:visible; }
.hhh-chapters-head { align-items:center; }
.hhh-chapters-rail a { align-items:center!important; }
.hhh-chapters-rail-numeral { display:flex; align-items:center; justify-content:center; }
.hhh-chapters-nav a { align-items:center; }

/* The auction result is a quiet part of the story, without statistic cards. */
.hhh-chapter-2 .hhh-chapters-wrap > .hhh-chapter-copy:has(.hhh-auction-result) { display:block; max-width:900px; }
.hhh-chapters .hhh-chapter-copy .hhh-auction-result { margin-top:24px; color:var(--hhh-muted); font-size:16px; line-height:1.6; }
.hhh-chapters .hhh-auction-result small { display:block; font-size:14px; }

/* Compact auction badges, activated by the test CMS content. */
.hhh-chapters .hhh-auction-result:has(.hhh-auction-badge) { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.hhh-chapters .hhh-auction-result .hhh-auction-badge { display:inline-block; padding:7px 13px; border:1px solid rgba(208,194,182,.24); border-radius:4px; background:rgba(208,194,182,.055); color:var(--hhh-text); font-size:14px; line-height:1.5; letter-spacing:.025em; }
.hhh-chapters .hhh-auction-result small.hhh-auction-badge { color:var(--hhh-muted); background:transparent; border-color:rgba(208,194,182,.13); font-size:12px; }

.hhh-chapters-reveal img.hhh-chapters-supplied-teaser { object-fit:contain; filter:none!important; width:auto; max-width:100%; left:50%; right:auto; transform:translateX(-50%); clip-path:inset(0 3px 0 0); }