/* Research — ten layouts. Each sits in a paper "page" frame that scrolls on
   its own. Scaffolding only. */
@font-face { font-family: "TeX Gyre Heros"; src: url("../fonts/texgyreheros-regular.woff2") format("woff2"); }
.rv-jump { position: sticky; top: 52px; z-index: 50; display: flex; gap: 6px; padding: 12px 0; overflow-x: auto; scrollbar-width: none; background: var(--bg, #130F0C); }
.rv-jump a { flex: none; padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); color: inherit; font-size: 13px; text-decoration: none; }
.rv-jump a:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.rv-sec { scroll-margin-top: 110px; }
.rv-frame { border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 30px 60px -30px rgba(0,0,0,.7); }
.rv-page { --ink: #130F0C; --paper: #F4F1EC; --muted: rgba(19,15,12,.58); --line: rgba(19,15,12,.14);
  height: 760px; overflow: auto; background: var(--paper); color: var(--ink); font-family: "TeX Gyre Heros", Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.45; letter-spacing: -0.01em; }
.rv-page a { color: inherit; text-decoration: none; }
.rv-page h3, .rv-page h4, .rv-page h5, .rv-page h6 { font-weight: 400; margin: 0; }
.rv-page p { margin: 0; }
.rv-page button { font: inherit; color: inherit; cursor: pointer; }

/* 1 · Broadsheet */
.v1 { padding: 28px 36px 48px; }
.v1__mast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 16px; padding-bottom: 12px; border-bottom: 3px double var(--ink); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.v1__mast span:last-child { text-align: right; }
.v1__mast h3 { font-size: clamp(34px, 5vw, 60px); line-height: 1; letter-spacing: -0.045em; text-transform: none; color: var(--ink); text-align: center; }
.v1__top { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--ink); }
.v1__lead h4 { margin: 8px 0 12px; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.02; letter-spacing: -0.04em; }
.v1__lead h4 a:hover, .v1 h5 a:hover, .v1 h6 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.v1__seconds { display: grid; gap: 18px; padding-left: 28px; border-left: 1px solid var(--line); }
.v1__seconds h5 { margin: 6px 0; font-size: 21px; line-height: 1.1; letter-spacing: -0.03em; }
.v1__kick { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.v1__cols { columns: 4 200px; column-gap: 28px; column-rule: 1px solid var(--line); padding-top: 18px; }
.v1__cols article { break-inside: avoid; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.v1__cols h6 { margin: 5px 0 6px; font-size: 16px; line-height: 1.18; letter-spacing: -0.02em; }
.v1__cols p { font-size: 13.5px; }
.v1__cols em { font-style: normal; color: var(--muted); }

/* 2 · The numbers */
.v2 { padding: 10px 36px 40px; }
.v2__it { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; gap: 6px 28px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.v2__it b { grid-row: span 2; font-weight: 400; font-size: clamp(56px, 9vw, 120px); line-height: .9; letter-spacing: -0.06em; transition: color .2s; }
.v2__it b.is-word { color: var(--muted); }
.v2__it span { font-size: 20px; line-height: 1.25; letter-spacing: -0.02em; }
.v2__it small { font-size: 13px; color: var(--muted); }
.v2__it:hover b { color: #FF4D00; }
@media (max-width: 700px) { .v2__it { grid-template-columns: 1fr; } .v2__it b { grid-row: auto; } }

/* 3 · Timeline */
.v3 { position: relative; padding: 30px 24px 60px; }
.v3::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--ink); }
.v3__yr { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 64px; padding: 26px 0; }
.v3__yr h4 { grid-column: 1 / -1; justify-self: center; position: relative; z-index: 1; padding: 6px 14px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 15px; }
.v3__it { position: relative; padding: 14px 16px; border-radius: 14px; background: #fff; box-shadow: 0 1px 0 var(--line); }
.v3__it.is-l { grid-column: 1; text-align: right; }
.v3__it.is-r { grid-column: 2; }
.v3__it::after { content: ""; position: absolute; top: 22px; width: 32px; height: 1px; background: var(--ink); }
.v3__it.is-l::after { right: -32px; } .v3__it.is-r::after { left: -32px; }
.v3__k { font-size: 11.5px; color: var(--muted); }
.v3__it h5 { margin: 4px 0 6px; font-size: 18px; line-height: 1.15; letter-spacing: -0.025em; }
.v3__it h5 a:hover { text-decoration: underline; }
.v3__it p:last-child { font-size: 13.5px; }

/* 4 · Colour cards */
.v4 { padding: 24px; }
.v4__pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.v4__pills button { padding: 6px 14px; border: 0; border-radius: 999px; background: rgba(19,15,12,.07); font-size: 13px; }
.v4__pills button.on { background: var(--ink); color: var(--paper); }
.v4__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.v4__c { display: grid; grid-template-rows: auto 1fr auto; gap: 14px; min-height: 260px; padding: 18px; border-radius: 22px; background: var(--c); color: #fff; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.v4__c:hover { transform: translateY(-4px) rotate(-.6deg); }
.v4__c[hidden] { display: none; }
.v4__t { font-size: 12px; opacity: .75; }
.v4__c b { font-weight: 400; font-size: 22px; line-height: 1.12; letter-spacing: -0.03em; }
.v4__s { font-size: 13px; line-height: 1.3; opacity: .85; }
.v4__s em { font-style: normal; opacity: .7; }

/* 5 · Card catalogue */
.v5 { min-height: 100%; background: #6B4A2E linear-gradient(#7a5636, #5b3d24); padding: 0 0 30px; }
.v5__tabs { position: sticky; top: 0; z-index: 2; display: flex; gap: 4px; padding: 14px 18px 0; background: #4a311c; overflow-x: auto; }
.v5__tabs button { flex: none; padding: 8px 14px 10px; border: 0; border-radius: 10px 10px 0 0; background: #d9cdb5; color: #3a2a1a; font-family: "Courier New", monospace; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.v5__tabs button.on { background: #FBF8F0; }
.v5__drawer { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; padding: 22px 18px; }
.v5__card { position: relative; padding: 16px 18px 18px; min-height: 190px; background: #FBF8F0 repeating-linear-gradient(#FBF8F0 0 23px, #d5e2ef 23px 24px); background-position: 0 34px; border-radius: 3px; box-shadow: 0 8px 16px -8px rgba(0,0,0,.6); font-family: "Courier New", monospace; font-size: 12.5px; line-height: 24px; color: #2a2118; }
.v5__card[hidden] { display: none; }
.v5__card::before { content: ""; position: absolute; left: 50%; bottom: 10px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #6B4A2E; box-shadow: inset 0 2px 3px rgba(0,0,0,.5); }
.v5__call { position: absolute; top: 12px; right: 16px; color: #b23a2a; }
.v5__src { display: block; text-transform: uppercase; font-size: 11px; letter-spacing: .05em; }
.v5__card h5 { margin: 0; font-family: "TeX Gyre Heros", Helvetica, sans-serif; font-size: 16px; line-height: 24px; letter-spacing: -0.02em; }
.v5__card h5 a:hover { text-decoration: underline; }
.v5__au, .v5__see { color: #7a6a58; }

/* 6 · Table */
.v6 { padding: 20px 24px 40px; }
.v6__q { width: 100%; height: 42px; margin-bottom: 12px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; }
.v6 table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.v6 th { position: sticky; top: -20px; background: var(--paper); text-align: left; border-bottom: 1.5px solid var(--ink); }
.v6 th button { padding: 10px 8px; border: 0; background: none; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.v6 th button::after { content: attr(data-on); margin-left: 4px; }
.v6 td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.v6__r { cursor: pointer; }
.v6__r:hover td, .v6__r.is-open td { background: rgba(19,15,12,.04); }
.v6__r td:first-child { font-variant-numeric: tabular-nums; color: var(--muted); }
.v6__r td:nth-child(2) { font-size: 14.5px; }
.v6__x td { padding-top: 0; color: var(--muted); }
.v6__x b { font-weight: 400; color: var(--ink); }
.v6__go { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); }
.v6__go:hover { background: var(--ink); color: var(--paper); }

/* 7 · Shelves */
.v7 { padding: 20px 0 30px; }
.v7 section { margin-bottom: 26px; }
.v7 h4 { padding: 0 28px 10px; font-size: 22px; letter-spacing: -0.03em; }
.v7 h4 span { font-size: 14px; color: var(--muted); }
.v7__row { display: flex; align-items: flex-end; gap: 6px; padding: 0 28px 14px; overflow-x: auto; border-bottom: 10px solid #d8cfc2; box-shadow: 0 6px 10px -6px rgba(0,0,0,.3); }
.v7__book { flex: none; position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 58px; height: 260px; padding: 10px 6px; border-radius: 3px 3px 1px 1px; background: var(--c); color: #fff; overflow: hidden; transition: width .4s cubic-bezier(.2,.8,.2,1), transform .3s; }
.v7__book:nth-child(3n) { height: 232px; } .v7__book:nth-child(4n+1) { height: 248px; }
.v7__book b { font-weight: 400; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 14px; line-height: 1.1; letter-spacing: -0.01em; max-height: 190px; overflow: hidden; }
.v7__y { font-size: 11px; opacity: .8; }
.v7__s, .v7__f { display: none; font-size: 12.5px; line-height: 1.3; }
.v7__book:hover, .v7__book:focus-visible { width: 240px; transform: translateY(-8px); }
.v7__book:hover b, .v7__book:focus-visible b { writing-mode: horizontal-tb; transform: none; font-size: 17px; max-height: none; }
.v7__book:hover .v7__s, .v7__book:hover .v7__f, .v7__book:focus-visible .v7__s, .v7__book:focus-visible .v7__f { display: block; }
.v7__book:hover .v7__s { opacity: .75; }

/* 8 · Reader */
.v8 { display: grid; grid-template-columns: 320px 1fr; height: 100%; outline: none; }
.v8__list { overflow: auto; border-right: 1px solid var(--line); background: #ECE8E1; }
.v8__li { display: grid; gap: 3px; width: 100%; padding: 14px 18px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; }
.v8__li span { font-size: 11.5px; color: var(--muted); }
.v8__li b { font-weight: 400; font-size: 14.5px; line-height: 1.25; }
.v8__li.on { background: var(--ink); color: var(--paper); }
.v8__li.on span { color: rgba(244,241,236,.6); }
.v8__pane { overflow: auto; padding: 48px 56px; }
.v8__k { font-size: 13px; color: var(--muted); }
.v8__pane h4 { margin: 12px 0 22px; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.02; letter-spacing: -0.04em; max-width: 18ch; }
.v8__find { margin-bottom: 16px !important; padding: 18px 20px; border-radius: 16px; background: #FF4D00; color: #fff; font-size: 22px; line-height: 1.2; letter-spacing: -0.025em; max-width: 30ch; }
.v8__pane > p { max-width: 58ch; }
.v8__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 26px !important; }
.v8__tags span { padding: 4px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 12.5px; }
.v8__go { display: inline-flex; padding: 12px 20px; border-radius: 999px; background: var(--ink); color: var(--paper) !important; }
@media (max-width: 760px) { .v8 { grid-template-columns: 1fr; grid-template-rows: 220px 1fr; } .v8__pane { padding: 24px; } }

/* 9 · Contents */
.v9 { padding: 40px 48px 60px; }
.v9 h3 { font-size: clamp(64px, 11vw, 140px); line-height: .85; letter-spacing: -0.06em; border-bottom: 2px solid var(--ink); padding-bottom: 14px; }
.v9__cols { columns: 2 380px; column-gap: 56px; padding-top: 24px; }
.v9 section { break-inside: avoid; margin-bottom: 30px; }
.v9 h4 { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; font-size: 24px; letter-spacing: -0.03em; }
.v9 h4 span { font-size: 46px; line-height: 1; color: #FF4D00; letter-spacing: -0.05em; }
.v9 ol { margin: 0; padding: 0; list-style: none; }
.v9 li a { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; }
.v9__t { max-width: 75%; font-size: 15px; line-height: 1.25; }
.v9__t small { display: block; font-size: 12px; color: var(--muted); }
.v9 li i { flex: 1; border-bottom: 1.5px dotted rgba(19,15,12,.35); transform: translateY(-4px); }
.v9__y { font-variant-numeric: tabular-nums; }
.v9 li a:hover .v9__t { text-decoration: underline; }

/* 10 · Search first */
.v10 { display: grid; align-content: start; justify-items: center; min-height: 100%; padding: 110px 28px 60px; text-align: center; background: radial-gradient(60% 40% at 50% 0%, #fff, var(--paper)); }
.v10 h3 { max-width: 16ch; font-size: clamp(32px, 4.6vw, 58px); line-height: 1; letter-spacing: -0.045em; }
.v10__q { width: min(640px, 100%); height: 64px; margin-top: 28px; padding: 0 26px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 20px 40px -24px rgba(0,0,0,.35); font: inherit; font-size: 20px; outline: none; }
.v10__q:focus { box-shadow: 0 0 0 2px var(--ink), 0 20px 40px -24px rgba(0,0,0,.35); }
.v10__try { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px !important; }
.v10__try button { padding: 6px 14px; border: 0; border-radius: 999px; background: rgba(19,15,12,.06); font-size: 14px; }
.v10__try button:hover { background: rgba(19,15,12,.12); }
.v10__res { width: min(680px, 100%); margin: 30px 0 0; padding: 0; list-style: none; text-align: left; }
.v10__res li a { display: grid; gap: 4px; padding: 16px 4px; border-bottom: 1px solid var(--line); }
.v10__res b { font-weight: 400; font-size: 19px; line-height: 1.25; letter-spacing: -0.02em; }
.v10__res span { font-size: 13px; color: var(--muted); }
.v10__res li a:hover b { text-decoration: underline; }
.v10__n { margin-top: 14px !important; font-size: 13px; color: var(--muted); }
/* the cards and spines carry white type on their colour; beat `.rv-page a` */
.rv-page a.v4__c, .rv-page a.v7__book { color: #fff; }
.rv-iframe { display: block; width: 100%; height: 760px; border: 0; background: #F4F1EC; }