/* The book's fonts, self-hosted (SIL Open Font Licence 1.1): Archivo (Omnibus-Type), Hanken Grotesk (Hanken Design Co.),
   Instrument Serif (Rodrigo Fuenzalida, Jordan Egstad). Latin subsets from Google Fonts, fetched by tools/fonts.py. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 300 900; font-stretch: 62% 125%; src: url(/landing-pages/iqids/proposal/fonts/archivo-normal-300-900-62-125.woff2) format('woff2'); font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; src: url(/landing-pages/iqids/proposal/fonts/hanken-grotesk-normal-400.woff2) format('woff2'); font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; src: url(/landing-pages/iqids/proposal/fonts/hanken-grotesk-normal-400.woff2) format('woff2'); font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; src: url(/landing-pages/iqids/proposal/fonts/hanken-grotesk-normal-400.woff2) format('woff2'); font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 700; src: url(/landing-pages/iqids/proposal/fonts/hanken-grotesk-normal-400.woff2) format('woff2'); font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; src: url(/landing-pages/iqids/proposal/fonts/instrument-serif-italic-400.woff2) format('woff2'); font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* IQIDS 5 · The Diamond Year: the proposal book (iqids.iraqiz.com/proposal, 2026-10-23).
   References: Heyzine and Publuu readers (single page on phones, the cover opens alone, edge chevrons, a slim bar with
   contents, share and download), StPageFlip (a rigid hard cover over soft pages), red/black editorial proposal brochures
   (the founder's inspiration folder + Pinterest: one red, black, warm paper, black-and-white photos, giant type).
   Every page is designed in container units (cqw: 1% of the page's width), so it is the same page on a phone, in a spread
   on a computer and in the A4 PDF. Only transform and opacity move. */
:root {
  --red: #cc1f27;
  --red-deep: #9e141b;
  --ink: #151413;
  --ink-2: #2a2826;
  --paper: #f7f3ec;
  --paper-2: #efe9df;
  --muted: #6f6a63;
  --rule: rgba(21, 20, 19, 0.16);
  --desk: #1b1a19;
  --display: "Archivo", "Arial Black", system-ui, sans-serif;
  --text: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --top: calc(52px + env(safe-area-inset-top, 0px));
  --bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  --W: 360px;
  --H: 509px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; height: 100%; }
body { overscroll-behavior: none; height: 100%; overflow: hidden; }
body { margin: 0; background: var(--desk); color: var(--paper); font-family: var(--text); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============ the logo symbol's colours, per place ============ */
#iqids .bx { fill: var(--bx, var(--red)); }
#iqids .lt { fill: var(--lt, #fff); }
#iqids .tx { fill: var(--tx, var(--ink)); }
#iqids .gm { fill: var(--gm, rgba(255, 255, 255, 0.55)); }
#iqids .gl { stroke: var(--gl, currentColor); }
.ruya { display: inline-block; width: 26cqw; aspect-ratio: 560 / 177; background: url(/landing-pages/iqids/proposal/img/ruya-white.webp) left center / contain no-repeat; vertical-align: middle; }

/* ============ the desk and the book ============ */
.stage { position: fixed; inset: 0; overflow: hidden; overflow: clip; touch-action: pinch-zoom; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  background: radial-gradient(120% 80% at 50% 45%, #2b2927 0%, var(--desk) 55%, #111010 100%); perspective: calc(var(--W) * 3.4); }
.js .pages { display: none; }
/* reading zoom (double-tap): the whole book scales around the tapped point and can be dragged around */
.zoom { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 0 0; transition: transform 0.42s var(--ease); }
.zoom.panning { transition: none; }
.book { position: absolute; left: 50%; top: var(--by, 60px); width: calc(var(--W) * 2); height: var(--H); margin-left: calc(var(--W) * -1);
  transform-style: preserve-3d; }
.deskshadow { /* the book's shadow on the desk, under the pages that are lying open */
  position: absolute; top: 3%; bottom: -2%; left: 0; width: 100%; border-radius: 6px; transform-origin: 100% 50%; transform: scaleX(0.5);
  box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.75), 0 8px 18px rgba(0, 0, 0, 0.45); transition: transform 0.5s var(--ease); pointer-events: none; }
.sheet, .curl { position: absolute; top: 0; left: var(--W); width: var(--W); height: var(--H); transform-origin: 0 50%; transform-style: preserve-3d; }
.sheet { transform: rotateY(0deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; background: var(--paper); }
.face.back { transform: rotateY(180deg); }
.face > .pg, .sf .pg { width: var(--W); height: var(--H); }
/* the gutter: every page darkens toward the spine */
.face::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: linear-gradient(90deg, rgba(40, 30, 20, 0.22) 0%, rgba(40, 30, 20, 0.07) 3.5%, rgba(255, 255, 255, 0.05) 6%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 0) 97%, rgba(0, 0, 0, 0.05) 100%); }
.face.back::after { transform: scaleX(-1); }
.sheet.board .face::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0, rgba(0, 0, 0, 0) 4%, rgba(255, 255, 255, 0.06) 5%, rgba(0, 0, 0, 0) 9%); }
/* the paper's back in single-page mode: blank paper with the page showing through faintly */
.paperback { position: absolute; inset: 0; background: url(/landing-pages/iqids/proposal/img/paper.webp) 0 0 / 256px 256px, var(--paper-2); }
.paperback .ghost { position: absolute; inset: 0; background-size: 100% 100%; transform: scaleX(-1); opacity: 0.07; filter: grayscale(1); }
/* the shade a rigid sheet (a board cover) gets while it turns */
.fsh { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: rgb(25, 18, 12); opacity: 0; }

/* the bending sheet: strips nested inside each other, each turning a little more */
.curl { z-index: 900; opacity: 0; pointer-events: none; }
/* the WebGL page curl sits over the book, a little in front of the pages */
.curlgl { position: absolute; z-index: 950; pointer-events: none; transform: translateZ(4px); }
.strip { position: absolute; top: 0; height: 100%; transform-origin: 0 50%; transform-style: preserve-3d; will-change: transform; }
.sf { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background-color: var(--paper); background-repeat: no-repeat; }
.sf.paper { background-color: var(--paper-2); }
.sf .ghost { position: absolute; inset: 0; background-repeat: no-repeat; opacity: 0.07; filter: grayscale(1); }
.sf.sb { transform: rotateY(180deg); }
.sh { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: rgb(25, 18, 12); opacity: 0; will-change: opacity; }

/* the shadow the turning page casts on the page under it */
.castbox { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 899; transform: translateZ(1px); }
.single .castbox { left: 50%; width: 50%; }
.cast { position: absolute; top: 0; left: var(--W); width: calc(var(--W) * 0.6); height: 100%; opacity: 0; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0) 100%); will-change: transform, opacity; }
.single .cast { left: 0; }

/* page edges: the stack gets thinner on the side you read away from */
.edge { position: absolute; top: 0.6%; bottom: 0.6%; width: 1px; transform-origin: 0 50%; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(90deg, #ece6db 0 0.5px, #c9c0b2 0.5px 1px); }
.edge-r { left: calc(var(--W) * 2); border-radius: 0 2px 2px 0; }
.edge-l { right: calc(var(--W) * 2); transform-origin: 100% 50%; border-radius: 2px 0 0 2px; }
.single .edge-l { display: none; }

/* the hard cover: board under red cloth, slightly larger than the pages */
.sheet.board .face, .curl.board .sf { border-radius: 1px 5px 5px 1px; }
.sheet.board .face.back, .curl.board .sf.sb { border-radius: 5px 1px 1px 5px; }

/* the one-time "swipe to open" hint, shown in the bar's label */
.prog-t.hinting { color: var(--paper); }
.prog-t.hinting span { display: inline-block; animation: nudge 1.6s var(--ease) infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

/* ============ reader chrome ============ */
.bar, .ib, .cta, .btn, .menu-btn, .menu-list a { touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.bar { position: fixed; left: 0; right: 0; z-index: 20; display: flex; align-items: center; gap: 6px; padding-inline: max(10px, env(safe-area-inset-left, 0px)) max(10px, env(safe-area-inset-right, 0px)); color: var(--paper); }
.no-js .bar, .print .bar { display: none; }
.bar.top { top: 0; height: var(--top); padding-top: env(safe-area-inset-top, 0px); justify-content: space-between; }
.bar.bottom { bottom: 0; height: var(--bottom); padding-bottom: env(safe-area-inset-bottom, 0px); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.brand .mk { width: 54px; height: auto; --bx: var(--red); --lt: #fff; --tx: var(--paper); --gm: rgba(255, 255, 255, 0.7); --gl: var(--desk); }
.brand-t { display: flex; flex-direction: column; font: 600 13px/1.15 var(--text); letter-spacing: 0.01em; white-space: nowrap; }
.brand-t em { font: italic 400 14px/1.1 var(--serif); color: rgba(247, 243, 236, 0.66); }
.top-end { display: flex; align-items: center; gap: 4px; }
.ib { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--paper); flex: none; transition: background-color 0.2s ease, opacity 0.2s ease; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) and (pointer: fine) { .ib:hover { background: rgba(255, 255, 255, 0.07); } }
.ib:active { background: rgba(255, 255, 255, 0.12); }
.ib[disabled] { opacity: 0.28; pointer-events: none; }
.ib svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#music .off { display: none; } #music[aria-pressed="false"] .on { display: none; } #music[aria-pressed="false"] .off { display: inline; }
.cta { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; background: var(--red); color: #fff; font: 600 14px/1 var(--text); text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: transform 0.15s ease, background-color 0.2s ease; }
@media (hover: hover) and (pointer: fine) { .cta:hover { background: #dc2a32; } }
.cta:active { transform: scale(0.96); background: #b81a22; transition-duration: 0.1s; }
.prog { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; padding-inline: 4px; }
.prog-t { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13px/1 var(--text); color: rgba(247, 243, 236, 0.86); }
.prog-t small { color: rgba(247, 243, 236, 0.45); font-size: 12px; margin-left: 6px; font-variant-numeric: tabular-nums; }
.prog-l { position: relative; width: 100%; max-width: 220px; height: 2px; border-radius: 2px; background: rgba(247, 243, 236, 0.16); overflow: hidden; }
.prog-l i { position: absolute; inset: 0; background: var(--red); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform 0.5s var(--ease); }
@media (max-width: 359px) { #share { display: none; } .brand-t em { display: none; } }

/* contents sheet */
.sheetui { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0); transition: background-color 0.3s ease; }
.sheetui[hidden] { display: none; }
.sheetui.open { background: rgba(0, 0, 0, 0.45); }
.sheetui-in { width: min(520px, 100%); max-height: 86svh; overflow: auto; overscroll-behavior: contain; background: #f7f3ec; color: var(--ink); border-radius: 22px 22px 0 0; padding: 10px 22px calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transition: transform 0.42s var(--ease); }
.sheetui.open .sheetui-in { transform: none; }
.sheetui-grip { width: 38px; height: 5px; border-radius: 3px; background: rgba(21, 20, 19, 0.18); margin: 0 auto 14px; }
.sheetui h2 { margin: 0 0 6px; font: 800 13px/1 var(--display); font-stretch: 112%; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); }
.menu-list { list-style: none; margin: 0 0 16px; padding: 0; }
.menu-list a { display: flex; align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--rule); text-decoration: none; font: 500 17px/1.25 var(--text); }
.menu-list a b { margin-left: auto; font: 500 13px/1 var(--text); color: var(--muted); font-variant-numeric: tabular-nums; }
.menu-list a[aria-current="page"] { color: var(--red); }
.menu-actions { display: grid; gap: 10px; }
.credit { margin: 16px 0 0; font: 400 12px/1.5 var(--text); color: var(--muted); }
.credit a { color: inherit; }
.menu-btn:active, .menu-list a:active { opacity: 0.6; transition: opacity 0.1s; }
.menu-btn { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 18px; border-radius: 14px; border: 1px solid rgba(21, 20, 19, 0.2); text-decoration: none; font: 600 16px/1 var(--text); }
.menu-btn small { font: 500 13px/1 var(--text); color: var(--muted); }
.menu-btn.red { background: var(--red); border-color: var(--red); color: #fff; justify-content: center; }

.toast { position: fixed; left: 50%; bottom: calc(var(--bottom) + 12px); z-index: 30; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; max-width: calc(100% - 32px);
  background: rgba(247, 243, 236, 0.96); color: var(--ink); border-radius: 999px; padding: 10px 16px; font: 500 14px/1.2 var(--text); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); transition: opacity 0.3s ease, transform 0.4s var(--ease); display: flex; gap: 12px; align-items: center; white-space: nowrap; }
.toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast button { font-weight: 600; color: var(--red); }

/* ============ the pages ============ */
/* One system for every page (2026-10-23, from the founder's premium proposal references: Larana, Matryoshka, BeautyLab,
   SlideLab and the Swiss "+" proposal). Units are cqw (1% of the page's width), so a page is the same design on a phone,
   in a spread and in the A4 PDF.
   - Frame: the running head (chapter number, hairline, chapter; the edition on the inner side), mirrored to the outer side
     on left (pg--l) and right (pg--r) pages, a red hairline at the same height on every page, the folio in the outer corner.
   - The diamond: one large faint line drawing centred on the spine, so half of it sits on each page of a spread.
   - Type scale (cqw): label 2.15 · body 3.3 · lead 4.4 serif · heading 8 · display 13+. Headings in sentence case with one
     italic serif accent word in red. Light numerals for figures. */
.pg {
  --m: 8.5cqw;           /* the outer margin */
  --top: 22cqw;          /* where the content starts, under the running head */
  --fg: var(--ink); --fg-2: #4a4540; --fg-3: #8a8279; --line: rgba(20, 18, 17, 0.14); --accent: var(--red);
  --gem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 96'%3E%3Cg fill='none' stroke='%23141211' stroke-opacity='.075' stroke-width='.18' stroke-linejoin='round'%3E%3Cpath d='M26 6h68l22 26-56 58L4 32z'/%3E%3Cpath d='M4 32h112M26 6l14 26 20 58 20-58 14-26M40 32L60 6l20 26'/%3E%3C/g%3E%3C/svg%3E");
  position: relative; overflow: hidden; container-type: inline-size; color: var(--fg);
  background: url(/landing-pages/iqids/proposal/img/paper.webp) 0 0 / 256px 256px, var(--paper);
  font-family: var(--text); line-height: 1.55; text-rendering: optimizeLegibility; font-kerning: normal;
}
/* the text size lives on the page's children: a container cannot size its own text in its own units */
.pg > * { font-size: 3.6cqw; }
.pg--ink { --fg: #f3eee6; --fg-2: rgba(243, 238, 230, 0.78); --fg-3: rgba(243, 238, 230, 0.5); --line: rgba(243, 238, 230, 0.16);
  --gem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 96'%3E%3Cg fill='none' stroke='%23f3eee6' stroke-opacity='.07' stroke-width='.18' stroke-linejoin='round'%3E%3Cpath d='M26 6h68l22 26-56 58L4 32z'/%3E%3Cpath d='M4 32h112M26 6l14 26 20 58 20-58 14-26M40 32L60 6l20 26'/%3E%3C/g%3E%3C/svg%3E");
  background: url(/landing-pages/iqids/proposal/img/paper.webp) 0 0 / 256px 256px, radial-gradient(130% 80% at 50% 0%, #22201d 0%, var(--ink) 60%); }
.pg--red { --fg: #fff; --fg-2: rgba(255, 255, 255, 0.86); --fg-3: rgba(255, 255, 255, 0.62); --line: rgba(255, 255, 255, 0.26); --accent: #fff;
  --gem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 96'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.12' stroke-width='.18' stroke-linejoin='round'%3E%3Cpath d='M26 6h68l22 26-56 58L4 32z'/%3E%3Cpath d='M4 32h112M26 6l14 26 20 58 20-58 14-26M40 32L60 6l20 26'/%3E%3C/g%3E%3C/svg%3E");
  background: url(/landing-pages/iqids/proposal/img/paper.webp) 0 0 / 256px 256px, radial-gradient(120% 90% at 30% 0%, #d42a31 0%, var(--red) 45%, var(--red-deep) 100%); }
/* the diamond across the spine: 150% of a page wide, centred on the gutter */
.pg::before { content: ""; position: absolute; z-index: 0; top: 52cqw; width: 150cqw; height: 120cqw; background: var(--gem) center / contain no-repeat; pointer-events: none; }
.pg--l::before { right: -75cqw; }
.pg--r::before { left: -75cqw; }
.pg > * { position: relative; z-index: 1; }
.pg p, .pg h1, .pg h2, .pg h3, .pg ul, .pg ol, .pg dl, .pg dd, .pg figure { margin: 0; padding: 0; }
.pg ul, .pg ol { list-style: none; }
.pg a { text-decoration: none; color: inherit; }

/* running head + the hairline + the folio */
.rh { position: absolute; z-index: 3; top: 7.4cqw; left: var(--m); right: var(--m); display: flex; align-items: center; gap: 2.2cqw; white-space: nowrap;
  font: 600 2.2cqw/1 var(--display); font-stretch: 112%; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg); }
.rh::after { content: ""; position: absolute; left: calc(var(--m) * -1); right: calc(var(--m) * -1); top: 5.4cqw; height: 0.22cqw; background: var(--accent); opacity: 0.9; }
.rh-n { font-weight: 500; letter-spacing: 0.06em; color: var(--accent); }
.rh-t::before { content: ""; display: inline-block; width: 5cqw; height: 0.18cqw; background: currentColor; opacity: 0.45; vertical-align: middle; margin-right: 2.2cqw; }
.rh-b { margin-left: auto; color: var(--fg-3); font-weight: 500; }
.pg--l .rh { flex-direction: row; }
.pg--r .rh { flex-direction: row-reverse; }
.pg--r .rh-b { margin-left: 0; margin-right: auto; }
.pg--r .rh-t::before { display: none; }
.pg--r .rh-t::after { content: ""; display: inline-block; width: 5cqw; height: 0.18cqw; background: currentColor; opacity: 0.45; vertical-align: middle; margin-left: 2.2cqw; }
.folio { position: absolute; z-index: 3; bottom: 6.4cqw; font: 500 2.2cqw/1 var(--display); font-stretch: 100%; letter-spacing: 0.08em; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.pg--l .folio { left: var(--m); }
.pg--r .folio { right: var(--m); }

/* the content zone */
.body-zone { position: absolute; z-index: 2; left: var(--m); right: var(--m); top: var(--top); bottom: 13cqw; display: flex; flex-direction: column; }
.body-zone--low { top: calc(var(--ph, 60cqw) + 6.5cqw); }
.body-zone--end { justify-content: flex-end; }
.kick { font: 600 2.35cqw/1 var(--display); font-stretch: 112%; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 3.6cqw !important; }
.pg--red .kick, .pg--ink .kick { color: var(--fg-3); }
.kick--gap { margin-top: 6.5cqw !important; }
.h { font: 600 8cqw/1.02 var(--display); font-stretch: 100%; letter-spacing: -0.035em; text-wrap: balance; color: var(--fg); }
.h em, .quote em, .bc-h em { font: italic 400 1.1em/0.9 var(--serif); letter-spacing: -0.01em; color: var(--accent); }
.pg--red .h em { color: #fff; }
.h--xl { font-size: 10cqw; line-height: 0.98; }
.lead { font: italic 400 4.6cqw/1.25 var(--serif); color: var(--fg-2); margin-top: 3.2cqw !important; }
.txt { margin-top: 4.4cqw !important; color: var(--fg-2); }
.note { margin-top: auto !important; padding-top: 3cqw; font-size: 2.85cqw; letter-spacing: 0.02em; color: var(--fg-3); }
.src { margin-top: auto !important; padding-top: 3cqw; font-size: 2.3cqw; line-height: 1.45; color: var(--fg-3); }
.sign { margin-top: 5cqw !important; font: 600 3.1cqw/1.3 var(--text); color: var(--fg); }
.sign small { display: block; font: italic 400 3.6cqw/1.3 var(--serif); color: var(--fg-3); }

/* photographs: black and white with the event's own reds (tools/assets.py) */
.ph { position: absolute; z-index: 1; left: 0; right: 0; overflow: hidden; background: #1d1b19; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph figcaption { position: absolute; bottom: 3.6cqw; font: 600 2cqw/1 var(--display); font-stretch: 112%; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); }
.pg--l .ph figcaption { left: var(--m); } .pg--r .ph figcaption { right: var(--m); }
.ph--hero { top: 0; height: var(--ph, 60cqw); }
.ph--hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 32%); }
.ph--hero ~ .rh { color: #fff; }
.ph--hero ~ .rh .rh-b { color: rgba(255, 255, 255, 0.7); }
.ph--hero ~ .rh::after { top: auto; bottom: calc((var(--ph, 60cqw) - 7.4cqw - 2cqw) * -1); }
.ph--foot { bottom: 0; height: var(--pf, 30cqw); }
.ph--foot ~ .folio { color: rgba(255, 255, 255, 0.85); z-index: 4; }

/* 1 · the cover and 18 · the back cover: deep red cloth over board, a blind-embossed diamond, silver foil */
.pg--cover { background: radial-gradient(140% 100% at 20% 0%, #d6262e 0%, #b8151d 45%, #8a0d14 100%); color: #fff; }
.cloth { position: absolute; inset: 0; z-index: 0;
  background:
    url(/landing-pages/iqids/proposal/img/paper.webp) 0 0 / 256px 256px,
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0 1px, rgba(255, 255, 255, 0.025) 1px 2.4px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.045) 0 1px, rgba(255, 255, 255, 0.02) 1px 2.8px); opacity: 0.8; }
.pg--cover::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset -1cqw 0 1.6cqw rgba(0, 0, 0, 0.18), inset 0 -0.8cqw 1.4cqw rgba(0, 0, 0, 0.22); }
.pg--back::after { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 1cqw 0 1.6cqw rgba(0, 0, 0, 0.18), inset 0 -0.8cqw 1.4cqw rgba(0, 0, 0, 0.22); }
.emboss { position: absolute; z-index: 1; width: 128cqw; left: -14cqw; top: 40cqw; fill: none; stroke-width: 0.32; stroke-linejoin: round; stroke: rgba(70, 0, 6, 0.32); filter: drop-shadow(0.12cqw 0.16cqw 0 rgba(255, 255, 255, 0.13)); }
.pg--back .emboss { left: -14cqw; top: 22cqw; }
/* the 40-page edition's covers: real buckram (ambientCG Fabric036, CC0) lit through its normal map, the edition's
   "5" blind-debossed into it (iqids-book/cover-v2/compose.py); the old outline emboss read as a bevel and goes */
.pg--cover .cloth { background: url(/landing-pages/iqids/proposal/img/cover-en.webp) center / cover no-repeat; opacity: 1; }
.pg--back .cloth { background-image: url(/landing-pages/iqids/proposal/img/cover-back.webp); }
[dir="rtl"] .pg--cover:not(.pg--back) .cloth { background-image: url(/landing-pages/iqids/proposal/img/cover-ar.webp); }
.pg--cover .emboss { display: none; }
/* the PDF: JPEG copies (Chrome stores WebP uncompressed) */
.print .pg--cover .cloth { background-image: url(/landing-pages/iqids/proposal/img/print/cover-en.jpg); }
.print .pg--back .cloth { background-image: url(/landing-pages/iqids/proposal/img/print/cover-back.jpg); }
.print[dir="rtl"] .pg--cover:not(.pg--back) .cloth { background-image: url(/landing-pages/iqids/proposal/img/print/cover-ar.jpg); }
.cv-logo { position: absolute; z-index: 2; top: 10cqw; left: var(--m); width: 40cqw; --bx: #fff; --lt: #b8151d; --tx: #fff; --gm: rgba(255, 255, 255, 0.9); --gl: #b8151d; }
.cv-kicker { position: absolute; z-index: 2; top: 37cqw; left: var(--m); right: var(--m); font: 600 2.15cqw/1.3 var(--display); font-stretch: 112%; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); }
.cv-title { position: absolute; z-index: 2; left: var(--m); right: 4cqw; top: 60cqw; margin: 0; display: flex; flex-direction: column; font-weight: 400; }
.cv-the { font: italic 400 8cqw/1 var(--serif); color: rgba(255, 255, 255, 0.85); margin-left: 0.6cqw; }
.cv-dia { font: italic 400 25.5cqw/0.8 var(--serif); letter-spacing: -0.03em; margin-left: -1.2cqw; }
.cv-year { font: 300 19cqw/0.9 var(--display); font-stretch: 100%; letter-spacing: -0.05em; margin-top: 1cqw; }
.cv-sub { position: absolute; z-index: 2; left: var(--m); right: 26cqw; top: 108cqw; font: 400 3.1cqw/1.4 var(--text); color: rgba(255, 255, 255, 0.82); }
.cv-foot { position: absolute; z-index: 2; left: var(--m); right: var(--m); bottom: 8cqw; display: flex; align-items: flex-end; justify-content: space-between; gap: 4cqw; }
.cv-foot p { margin: 0; display: flex; flex-direction: column; gap: 0.8cqw; font-size: 2.7cqw; line-height: 1.2; color: rgba(255, 255, 255, 0.8); }
.cv-foot b { font: 600 2.15cqw/1.2 var(--display); font-stretch: 112%; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; }
.cv-foot .ruya { width: 23cqw; }
/* silver foil: a cool metallic gradient clipped to the letters, with a slow light passing over it once */
.foil { background: linear-gradient(100deg, #cfcdc9 0%, #ffffff 22%, #b7b3ad 38%, #f4f2ee 55%, #a9a59f 72%, #ffffff 90%); background-size: 200% 100%; background-position: 0% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.js .pg--cover .foil.run { animation: foil 3.2s var(--ease) 0.5s 1 both; }
@keyframes foil { from { background-position: 100% 0; } to { background-position: 0% 0; } }
.cv-shine { display: none; }

/* 3 · contents */
.toc { margin-top: 7cqw !important; border-top: 0.2cqw solid var(--line); }
.toc a { display: grid; grid-template-columns: 9cqw 1fr auto; align-items: baseline; gap: 2cqw; padding: 2.5cqw 0; border-bottom: 0.2cqw solid var(--line); }
.toc b { font: 500 3cqw/1 var(--display); color: var(--red); font-variant-numeric: tabular-nums; }
.toc span { font: 500 4.6cqw/1.15 var(--display); letter-spacing: -0.02em; color: var(--fg); }
.toc small { display: block; margin-top: 0.8cqw; font: 400 2.6cqw/1.35 var(--text); letter-spacing: 0; color: var(--fg-3); }
.toc i { font: 500 2.4cqw/1 var(--display); font-style: normal; color: var(--fg-3); font-variant-numeric: tabular-nums; }

/* 4 · numbers: light figures over thin rules */
.stats { margin-top: 6cqw !important; display: grid; grid-template-columns: 1fr 1fr; gap: 7cqw 6cqw; }
.stats div { display: flex; flex-direction: column; border-top: 0.22cqw solid var(--line); padding-top: 3cqw; }
.stats dd { font: 300 16cqw/0.9 var(--display); font-stretch: 100%; letter-spacing: -0.055em; font-variant-numeric: lining-nums; }
.stats sup { font: italic 400 0.5em/1 var(--serif); vertical-align: 0.8em; margin-left: 0.6cqw; letter-spacing: 0; }
.stats dt { margin-top: 2.4cqw; font-size: 3.15cqw; line-height: 1.35; color: var(--fg-2); }

/* 5 · the market */
.facts { margin-top: 5.4cqw !important; display: grid; grid-template-columns: 1fr 1fr; gap: 4.6cqw 6cqw; }
.facts div { display: flex; flex-direction: column; border-top: 0.22cqw solid var(--line); padding-top: 2.4cqw; }
.facts dd { font: 300 10.5cqw/0.95 var(--display); letter-spacing: -0.05em; color: var(--red); font-variant-numeric: lining-nums; }
.facts dt { margin-top: 1.6cqw; font-size: 3.05cqw; line-height: 1.35; color: var(--fg-2); }

/* 6, 8 · rows: a bold lead and a quiet line, over hairlines */
.rows { margin-top: 6cqw !important; border-top: 0.2cqw solid var(--line); }
.rows li { display: grid; gap: 0.9cqw; padding: 3.2cqw 0; border-bottom: 0.2cqw solid var(--line); }
.rows b { font: 600 4.1cqw/1.15 var(--display); letter-spacing: -0.02em; }
.rows span { color: var(--fg-2); font-size: 3.4cqw; line-height: 1.45; }
.rows--tight { margin-top: 4.4cqw !important; }
.rows--tight li { padding: 2.2cqw 0; }

/* 7 · the institutions: their logos stay exactly as they are */
.logos { margin-top: 6cqw !important; display: grid; grid-template-columns: 1fr 1fr; gap: 5cqw 5cqw; }
.logos li { display: flex; align-items: center; gap: 3.2cqw; }
.logos img { width: 14.5cqw; height: 14.5cqw; flex: none; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0.22cqw var(--line), 0 1cqw 2.4cqw rgba(20, 18, 17, 0.08); }
.logos span { font-size: 3cqw; line-height: 1.32; font-weight: 500; color: var(--fg-2); }

/* 9 · tracks */
.tracks { margin-top: 6cqw !important; display: grid; gap: 4.4cqw; }
.tracks section { display: grid; grid-template-columns: 30cqw 1fr; gap: 4.4cqw; align-items: start; padding-bottom: 4.4cqw; border-bottom: 0.2cqw solid var(--line); }
.tracks section:last-child { border-bottom: 0; padding-bottom: 0; }
.tracks img { width: 30cqw; height: 22cqw; object-fit: cover; }
.tracks h3 { margin: 0 0 1.2cqw; font: 600 4.2cqw/1.1 var(--display); letter-spacing: -0.02em; }
.tracks p { font-size: 3.25cqw; line-height: 1.45; color: var(--fg-2); }

/* 10 · gains: numbered in light figures */
.gains { margin-top: 6cqw !important; border-top: 0.2cqw solid var(--line); counter-reset: g; }
.gains li { position: relative; padding: 2.5cqw 0 2.5cqw 9cqw; border-bottom: 0.2cqw solid var(--line); font-size: 3.6cqw; line-height: 1.4; color: var(--fg-2); counter-increment: g; }
.gains li::before { content: "0" counter(g); position: absolute; left: 0; top: 3.5cqw; font: 500 2.6cqw/1 var(--display); color: var(--red); font-variant-numeric: tabular-nums; }
.gains b { font-weight: 600; color: var(--fg); }

/* 11 · the full-bleed photograph and its line */
.pg--photo { background: #141211; --fg: #fff; --fg-2: rgba(255, 255, 255, 0.85); --fg-3: rgba(255, 255, 255, 0.7); --line: rgba(255, 255, 255, 0.25); --gem: none; }
.pg--photo .full { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.pg--photo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0.1) 45%, rgba(0, 0, 0, 0.86) 85%); }
.pg--photo .rh, .pg--photo .body-zone, .pg--photo .folio { z-index: 2; }
.quote { font: 500 8.4cqw/1.04 var(--display); letter-spacing: -0.035em; text-wrap: balance; color: #fff; }
.pg--photo .quote em { color: #fff; }
.pg--photo .note { margin-top: 4cqw !important; }

/* 12 · ways */
.ways { margin-top: 6cqw !important; border-top: 0.2cqw solid var(--line); }
.ways li { display: grid; grid-template-columns: 1fr auto; column-gap: 3cqw; padding: 2.8cqw 0; border-bottom: 0.2cqw solid var(--line); }
.ways b { font: 600 4.2cqw/1.15 var(--display); letter-spacing: -0.02em; }
.ways span { grid-column: 1; font-size: 3.3cqw; color: var(--fg-2); line-height: 1.4; margin-top: 0.6cqw; }
.ways a { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 600 2.2cqw/1 var(--display); font-stretch: 112%; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); padding: 2cqw 0 2cqw 2cqw; }
.ways a::after { content: " →"; letter-spacing: 0; }

/* 13 · Diamond: the dark page with the silver word */
.pg--diamond { background: url(/landing-pages/iqids/proposal/img/paper.webp) 0 0 / 256px 256px, radial-gradient(110% 70% at 85% 10%, #3b1517 0%, #181514 55%, #0f0e0d 100%); }
.dia-h { margin-top: 5cqw !important; font: italic 400 25cqw/0.82 var(--serif); letter-spacing: -0.035em; }
.pg--diamond .lead { margin-top: 4cqw !important; color: var(--fg); font-size: 5.4cqw; }
.ticks { margin-top: 4.6cqw !important; border-top: 0.2cqw solid var(--line); }
.ticks li { position: relative; padding: 1.6cqw 0 1.6cqw 6cqw; border-bottom: 0.2cqw solid var(--line); font-size: 3.3cqw; line-height: 1.4; color: var(--fg-2); }
.ticks li::before { content: ""; position: absolute; left: 0.3cqw; top: 3.1cqw; width: 1.8cqw; height: 1.8cqw; border: 0.22cqw solid #d9d6d1; transform: rotate(45deg); }
.limit { margin-top: auto !important; padding-top: 3cqw; font: 600 3cqw/1.4 var(--text); color: var(--fg); }

/* 14 · the tier table */
.tiers { margin-top: 5cqw; width: 100%; border-collapse: collapse; font-size: 2.95cqw; line-height: 1.3; }
.tiers th, .tiers td { padding: 1.9cqw 1.2cqw; border-bottom: 0.2cqw solid var(--line); text-align: left; vertical-align: top; color: var(--fg-2); }
.tiers thead th { font: 600 2.15cqw/1 var(--display); font-stretch: 112%; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg); border-bottom: 0.4cqw solid var(--fg); padding-top: 0; }
.tiers thead th:nth-child(2) { color: var(--red); }
.tiers tbody th { font-weight: 600; color: var(--fg); width: 27%; padding-left: 0; }
.tiers td:nth-child(2) { color: var(--fg); font-weight: 600; background: rgba(204, 31, 39, 0.045); }
.proof { margin-top: 4cqw !important; font: italic 400 4.4cqw/1.25 var(--serif); color: var(--fg); }

/* 15 · stands and add-ons */
.stands { margin-top: 5.4cqw !important; border-top: 0.2cqw solid var(--line); }
.stands li { display: grid; grid-template-columns: 1fr auto; gap: 1cqw 3cqw; padding: 3cqw 0; border-bottom: 0.2cqw solid var(--line); }
.stands b { font: 600 4.4cqw/1.1 var(--display); letter-spacing: -0.02em; }
.stands em { font: italic 400 4.2cqw/1 var(--serif); color: var(--red); align-self: end; }
.stands span { grid-column: 1 / -1; font-size: 3.3cqw; line-height: 1.45; color: var(--fg-2); }
.addons { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw 5cqw; }
.addons li { position: relative; padding-left: 4.4cqw; font-size: 3.2cqw; line-height: 1.35; color: var(--fg-2); }
.addons li::before { content: ""; position: absolute; left: 0.3cqw; top: 1.3cqw; width: 1.5cqw; height: 1.5cqw; border: 0.22cqw solid var(--red); transform: rotate(45deg); }

/* 16 · the venue */
.help { margin-top: 4.4cqw !important; display: flex; flex-wrap: wrap; gap: 1.6cqw; }
.help li { font-size: 2.85cqw; padding: 1.3cqw 2.8cqw; border: 0.2cqw solid var(--line); border-radius: 99px; color: var(--fg-2); }
.bif { width: 26cqw; margin-top: auto; mix-blend-mode: multiply; }

/* 17 · three steps */
.steps { margin-top: 6cqw !important; border-top: 0.2cqw solid var(--line); counter-reset: s; }
.steps li { display: grid; grid-template-columns: 13cqw 1fr; column-gap: 3cqw; padding: 3.2cqw 0; border-bottom: 0.2cqw solid var(--line); counter-increment: s; }
.steps li::before { content: "0" counter(s); grid-row: 1 / span 2; font: 300 10cqw/0.8 var(--display); letter-spacing: -0.05em; color: var(--red); }
.steps b { font: 600 4cqw/1.15 var(--display); letter-spacing: -0.02em; }
.steps span { margin-top: 0.8cqw; font-size: 3.3cqw; line-height: 1.4; color: var(--fg-2); }
.dates { margin-top: 5cqw !important; display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; }
.dates dt { font: 600 2.05cqw/1.2 var(--display); font-stretch: 112%; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); }
.dates dd { margin-top: 1.2cqw; font: 500 3.4cqw/1.2 var(--text); }
.pg .btn { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 2.4cqw; padding: 3.3cqw 6cqw; border-radius: 99px; background: var(--red); color: #fff; font: 600 3.2cqw/1 var(--text); letter-spacing: 0.01em; }
.btn::after { content: "→"; }
.pg .btn--light { background: #fff; color: #9e1218; margin-top: 7cqw; }

/* 18 · the back cover */
.bc-zone { position: absolute; z-index: 2; left: var(--m); right: var(--m); top: 12cqw; }
.bc-zone .cv-kicker { position: static; }
.bc-h { margin-top: 10cqw !important; font: 500 12.5cqw/0.98 var(--display); letter-spacing: -0.045em; text-wrap: balance; }
.bc-h em { color: #fff; }
.bc-deck { margin-top: 3.4cqw !important; font: italic 400 5.2cqw/1.2 var(--serif); color: rgba(255, 255, 255, 0.85); }
.bc-links { margin-top: 8cqw !important; display: grid; gap: 2cqw; border-top: 0.2cqw solid rgba(255, 255, 255, 0.35); padding-top: 3.6cqw !important; }
.bc-links li { display: flex; gap: 3cqw; font-size: 3.1cqw; }
.bc-links span { width: 20cqw; color: rgba(255, 255, 255, 0.68); }
.bc-links a { font-weight: 600; }
.qr { position: absolute; right: 0; top: 66cqw; width: 24cqw; display: none; }
.qr svg { width: 100%; background: #fff; padding: 1.6cqw; }
.qr figcaption { margin-top: 1.4cqw; font-size: 2.1cqw; text-align: center; color: rgba(255, 255, 255, 0.85); }
.bc-logo { width: 26cqw; --bx: #fff; --lt: #b8151d; --tx: #fff; --gm: rgba(255, 255, 255, 0.9); --gl: #b8151d; }

/* ============ draft marks: ?draft shows every fact still to confirm ============ */
.draft .tc { background: rgba(255, 221, 64, 0.55); outline: 0.3cqw dashed #e0a800; color: var(--ink) !important; }

/* ============ without JavaScript: the pages one under the other ============ */
.no-js .stage { display: none; }
html:not(.js) .stage, html:not(.js) .bar { display: none; }
html:not(.js) .pages { display: grid; gap: 24px; justify-content: center; padding: 24px 12px; }
html:not(.js) .pg { width: min(560px, calc(100vw - 24px)); aspect-ratio: 1 / 1.4142; }

/* ============ print and the PDF: one A4 page per page ============ */
@page { size: 210mm 297mm; margin: 0; }
@media print {
  html, body { background: #fff; }
  .stage, .bar, .sheetui, .toast, .hint { display: none !important; }
  .js .pages, .pages { display: block !important; }
  .pg { width: 210mm; height: 297mm; break-after: page; page-break-after: always; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pg:last-child { break-after: auto; }
  .qr { display: block; }
}
.print .stage, .print .bar { display: none; }
.print .pages { display: block; }
.print .pg { width: 210mm; height: 297mm; }
.print .qr { display: block; }

@media (prefers-reduced-motion: reduce) {
  .prog-t.hinting span, .js .pg--cover .foil.run { animation: none; }
  .prog-l i, .sheetui-in, .toast { transition-duration: 0.01s; }
}

/* ============ the 40-page edition (2026-10-31): chapter opener, edition bars, timeline, giant figure, photo pair ============ */
/* opener (after The Encore's partnership deck): the full-bleed photograph, a light figure, the chapter's pages */
.open-n { font: 300 34cqw/0.78 var(--display); letter-spacing: -0.07em; color: #fff; }
.open-h { margin-top: 3cqw !important; font: 500 8.4cqw/1.02 var(--display); letter-spacing: -0.04em; text-wrap: balance; color: #fff; }
.open-h em { font: italic 400 1.1em/0.9 var(--serif); letter-spacing: -0.01em; }
.open-list { margin-top: 6cqw !important; display: grid; gap: 1.8cqw; }
.open-list a { display: flex; justify-content: space-between; gap: 3cqw; font: 500 3.2cqw/1.2 var(--text); color: rgba(255, 255, 255, 0.9); }
.open-list i { font: 500 2.4cqw/1.2 var(--display); font-style: normal; color: rgba(255, 255, 255, 0.62); font-variant-numeric: tabular-nums; }
/* attendance by edition: one series, values in ink, the newest edition in red, rounded only at the data end */
.bars { margin-top: 6.4cqw !important; display: grid; gap: 4.8cqw; }
.bars li { display: grid; grid-template-columns: 1fr auto; align-items: end; row-gap: 1.8cqw; }
.bars b { font: 600 2.15cqw/1 var(--display); font-stretch: 112%; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); }
.bars em { font: 300 8.6cqw/0.9 var(--display); font-style: normal; letter-spacing: -0.05em; color: var(--fg); font-variant-numeric: lining-nums; }
.bars sup { font: italic 400 0.5em/1 var(--serif); vertical-align: 0.8em; margin-left: 0.4cqw; letter-spacing: 0; }
.bars span { grid-column: 1 / -1; width: var(--v); height: 3cqw; border-radius: 0 1.1cqw 1.1cqw 0; background: #b9b1a6; }
.bars li:last-child span { background: var(--red); }
/* the timeline: the steps list with a year in place of the step number */
.years li { grid-template-columns: 17cqw 1fr; padding: 2.5cqw 0; }
.years li::before { content: attr(data-y); font-size: 6.2cqw; line-height: 0.95; }
/* one giant figure (after the SGCH "Snapshot" spread) */
.giant { margin-top: 1cqw !important; font: 300 58cqw/0.8 var(--display); letter-spacing: -0.07em; color: var(--red); }
.giant small { margin-left: 2.4cqw; font: italic 400 0.17em/1 var(--serif); letter-spacing: 0; color: var(--fg); }
/* two photographs side by side, and a country list in words */
.duo { margin-top: 4.4cqw !important; display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; }
.duo img { display: block; width: 100%; height: 31cqw; object-fit: cover; }
.facts--words dd { font-size: 6.6cqw; line-height: 1; letter-spacing: -0.035em; }
.topics { margin-top: 4.4cqw !important; display: grid; gap: 2cqw; }
.topics li { position: relative; padding-left: 4.4cqw; font-size: 3.2cqw; line-height: 1.35; color: var(--fg-2); }
.topics li::before { content: ""; position: absolute; left: 0.3cqw; top: 1.3cqw; width: 1.5cqw; height: 1.5cqw; border: 0.22cqw solid var(--red); transform: rotate(45deg); }
.topics i { font-style: normal; color: var(--fg-3); }
.body-zone > .ruya { margin-top: auto; }
/* voices: what exhibitors and speakers said, in their own words */
.voices { margin-top: 5.4cqw !important; display: grid; gap: 5.4cqw; }
.voices figure { margin: 0; }
.voices blockquote { margin: 0; font: italic 400 5.6cqw/1.18 var(--serif); letter-spacing: -0.005em; color: var(--fg); text-wrap: pretty; }
.voices figcaption { margin-top: 1.8cqw; font: 600 2.1cqw/1.35 var(--display); font-stretch: 112%; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }

/* per-page tuning */
#p2 { --ph: 50cqw; } #p14 { --ph: 36cqw; } #p32 { --ph: 36cqw; }
#p2 .ph img { object-position: 50% 50%; }
#p14 .ph img { object-position: 50% 30%; } #p14 .rows--tight li { padding: 1.9cqw 0; }
#p32 .ph img { object-position: 50% 50%; }
#p20 { --pf: 24cqw; }
#p8 .facts { gap: 3.6cqw 6cqw; margin-top: 4.4cqw !important; } #p8 .facts dd { font-size: 9.5cqw; } #p8 .lead { margin-top: 2.4cqw !important; }
#p11 .logos { gap: 3.8cqw 4.4cqw; } #p11 .logos img { width: 13cqw; height: 13cqw; }
#p27 .h { font-size: 6.6cqw; } #p27 .tiers { font-size: 2.8cqw; } #p27 .proof { font-size: 4cqw; }
#p25 .limit { padding-top: 2.4cqw; }
#p32 .help { margin-top: 3.4cqw !important; } #p32 .txt { margin-top: 3.4cqw !important; }
/* the 40-page edition's new pages */
#p3 .h--xl { font-size: 8.6cqw; } #p3 .toc { margin-top: 4.6cqw !important; } #p3 .toc a { padding: 1.75cqw 0; } #p3 .toc span { font-size: 4.1cqw; }
#p5 .h, #p12 .h, #p18 .h { font-size: 7.2cqw; } #p5 .years { margin-top: 4.4cqw !important; } #p5 .years li { padding: 1.9cqw 0; } #p5 .years span, #p18 .years span { font-size: 3cqw; line-height: 1.38; }
#p6 .bars { gap: 3.4cqw; margin-top: 5cqw !important; } #p6 .bars em { font-size: 7.4cqw; } #p6 .lead { font-size: 4.2cqw; }
#p12 .rows--tight { margin-top: 4cqw !important; } #p12 .rows--tight li { padding: 1.5cqw 0; gap: 0.4cqw; } #p12 .rows b { font-size: 3.6cqw; } #p12 .rows span { font-size: 2.95cqw; line-height: 1.35; }
#p13 { --ph: 44cqw; } #p13 .h { font-size: 7cqw; } #p13 .rows--tight { margin-top: 3.4cqw !important; } #p13 .rows--tight li { padding: 1.6cqw 0; gap: 0.4cqw; } #p13 .rows b { font-size: 3.6cqw; } #p13 .rows span { font-size: 2.95cqw; line-height: 1.35; }
#p16 .facts, #p19 .facts { gap: 3cqw 6cqw; margin-top: 4cqw !important; } #p16 .facts dd, #p19 .facts dd { font-size: 9cqw; } #p16 .topics, #p19 .topics { gap: 1.3cqw; margin-top: 3.8cqw !important; } #p16 .topics li, #p19 .topics li { font-size: 2.95cqw; }
#p18 .years { margin-top: 4.4cqw !important; } #p18 .years li { padding: 2cqw 0; }
#p21 .giant { font-size: 50cqw; }
#p29 { --pf: 26cqw; } #p29 .body-zone { bottom: calc(var(--pf) + 5cqw); } #p29 .rows--tight li { padding: 1.7cqw 0; } #p29 .rows span { font-size: 3cqw; line-height: 1.35; }
#p30 .rows--tight li { padding: 1.7cqw 0; } #p30 .facts { margin-top: 4cqw !important; } #p30 .facts dd { font-size: 9cqw; }
#p34 .years li { padding: 1.7cqw 0; } #p34 .years li::before { font-size: 4.4cqw; white-space: nowrap; } #p34 .years span { font-size: 3cqw; }
#p37 .dates { gap: 3.4cqw 4cqw; }
#p5 .h { font-size: 6.8cqw; } #p5 .years li { padding: 1.4cqw 0; } #p5 .years span { font-size: 2.9cqw; }
#p12 .rows--tight li { padding: 1.7cqw 0; }
#p26 .h { font-size: 7.2cqw; } #p26 .rows--tight li { padding: 1.7cqw 0; gap: 0.4cqw; } #p26 .rows b { font-size: 3.6cqw; } #p26 .rows span { font-size: 2.95cqw; line-height: 1.38; }
[dir="rtl"] #p26 .rows b { font-size: 3.5cqw; line-height: 1.35; } [dir="rtl"] #p26 .rows span { line-height: 1.45; }
#p29 { --pf: 22cqw; } #p29 .rows--tight li { padding: 1.4cqw 0; }
#p29 .ph img { object-position: 50% 74%; } #p4 .full { object-position: 50% 40%; }
#p30 .rows--tight li { padding: 1.4cqw 0; } #p30 .rows span { font-size: 3cqw; } #p30 .facts dd { font-size: 8cqw; } #p30 .facts dt { font-size: 2.8cqw; }
#p34 .years li { padding: 1.35cqw 0; }
/* old pages that sat on their folio in print */
#p2 .txt { font-size: 3.3cqw; margin-top: 3.4cqw !important; } #p2 .lead { margin-top: 2.4cqw !important; }
#p10 .rows li { padding: 2.4cqw 0; } #p10 .rows span { font-size: 3.1cqw; line-height: 1.4; }
#p15 .tracks { gap: 3.4cqw; } #p15 .tracks section { padding-bottom: 3.4cqw; } #p15 .tracks p { font-size: 3cqw; }
#p25 .ticks li { padding: 1.3cqw 0 1.3cqw 6cqw; font-size: 3.1cqw; }
#p28 .stands li { padding: 2.4cqw 0; } #p28 .kick--gap { margin-top: 4.6cqw !important; }
#p15 .tracks img { height: 19cqw; } #p15 .tracks h3 { font-size: 3.9cqw; }
#p28 .stands span { font-size: 3.1cqw; } #p28 .addons li { font-size: 3cqw; }
#p29 .h, #p34 .h { font-size: 7.4cqw; }
#p8 .txt { font-size: 3.3cqw; margin-top: 3.4cqw !important; } #p8 .src, #p9 .src { font-size: 2.1cqw; }
#p9 .facts { gap: 3.6cqw 6cqw; margin-top: 4.4cqw !important; } #p9 .facts dd { font-size: 8.6cqw; } #p9 .facts dt { font-size: 2.9cqw; } #p9 .lead { font-size: 4.2cqw; }

/* ============ the page-flip engine (StPageFlip 2.0.7, MIT): its base styles, then our paper on its elements ============ */
.stf__parent { position: relative; display: block; box-sizing: border-box; transform: translateZ(0); touch-action: pinch-zoom; }
/* the engine injects its own stylesheet later (touch-action: pan-y on .stf__parent, which with the stage's pinch-zoom would
   leave no gesture at all), so these are more specific. Pinch-zoomed in: one finger moves around the page, nothing turns. */
.stage .flipbook.stf__parent { touch-action: pinch-zoom; }
.pinched .stage, .pinched .stage .flipbook.stf__parent { touch-action: manipulation; }
.stf__wrapper { position: relative; width: 100%; height: 100%; box-sizing: border-box; }
.stf__block { position: absolute; width: 100%; height: 100%; box-sizing: border-box; perspective: 2000px; }
.stf__item { display: none; position: absolute; transform-style: preserve-3d; }
.stf__outerShadow, .stf__innerShadow, .stf__hardShadow, .stf__hardInnerShadow { position: absolute; left: 0; top: 0; }
.flipbook { position: relative; margin: 0 auto; }
.stage:not(.sized) .book { visibility: hidden; }
/* pictures mode (book.js): while a page turns, its live content is hidden and a picture of it is shown instead */
.pg.snap > * { visibility: hidden !important; }
.pg.snap::before { display: none; }
.flipbook .pg.snap#p1 { background: url(/landing-pages/iqids/proposal/snap/p1.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p2 { background: url(/landing-pages/iqids/proposal/snap/p2.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p3 { background: url(/landing-pages/iqids/proposal/snap/p3.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p4 { background: url(/landing-pages/iqids/proposal/snap/p4.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p5 { background: url(/landing-pages/iqids/proposal/snap/p5.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p6 { background: url(/landing-pages/iqids/proposal/snap/p6.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p7 { background: url(/landing-pages/iqids/proposal/snap/p7.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p8 { background: url(/landing-pages/iqids/proposal/snap/p8.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p9 { background: url(/landing-pages/iqids/proposal/snap/p9.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p10 { background: url(/landing-pages/iqids/proposal/snap/p10.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p11 { background: url(/landing-pages/iqids/proposal/snap/p11.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p12 { background: url(/landing-pages/iqids/proposal/snap/p12.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p13 { background: url(/landing-pages/iqids/proposal/snap/p13.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p14 { background: url(/landing-pages/iqids/proposal/snap/p14.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p15 { background: url(/landing-pages/iqids/proposal/snap/p15.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p16 { background: url(/landing-pages/iqids/proposal/snap/p16.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p17 { background: url(/landing-pages/iqids/proposal/snap/p17.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p18 { background: url(/landing-pages/iqids/proposal/snap/p18.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p19 { background: url(/landing-pages/iqids/proposal/snap/p19.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p20 { background: url(/landing-pages/iqids/proposal/snap/p20.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p21 { background: url(/landing-pages/iqids/proposal/snap/p21.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p22 { background: url(/landing-pages/iqids/proposal/snap/p22.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p23 { background: url(/landing-pages/iqids/proposal/snap/p23.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p24 { background: url(/landing-pages/iqids/proposal/snap/p24.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p25 { background: url(/landing-pages/iqids/proposal/snap/p25.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p26 { background: url(/landing-pages/iqids/proposal/snap/p26.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p27 { background: url(/landing-pages/iqids/proposal/snap/p27.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p28 { background: url(/landing-pages/iqids/proposal/snap/p28.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p29 { background: url(/landing-pages/iqids/proposal/snap/p29.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p30 { background: url(/landing-pages/iqids/proposal/snap/p30.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p31 { background: url(/landing-pages/iqids/proposal/snap/p31.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p32 { background: url(/landing-pages/iqids/proposal/snap/p32.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p33 { background: url(/landing-pages/iqids/proposal/snap/p33.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p34 { background: url(/landing-pages/iqids/proposal/snap/p34.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p35 { background: url(/landing-pages/iqids/proposal/snap/p35.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p36 { background: url(/landing-pages/iqids/proposal/snap/p36.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p37 { background: url(/landing-pages/iqids/proposal/snap/p37.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p38 { background: url(/landing-pages/iqids/proposal/snap/p38.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p39 { background: url(/landing-pages/iqids/proposal/snap/p39.webp?v=40) center / 100% 100% no-repeat !important; }
.flipbook .pg.snap#p40 { background: url(/landing-pages/iqids/proposal/snap/p40.webp?v=40) center / 100% 100% no-repeat !important; }
.book { transition: transform 0.7s var(--ease); }
.book:not(.ready) { transition: none; }
.flipbook .pg.stf__item { position: absolute; overflow: hidden; }
/* the gutter: each page darkens softly toward the spine, as on paper */
.flipbook .pg::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.flipbook .pg.--left::after { background: linear-gradient(270deg, rgba(40, 30, 20, 0.2) 0%, rgba(40, 30, 20, 0.06) 3.5%, rgba(0, 0, 0, 0) 10%); }
.flipbook .pg.--right::after { background: linear-gradient(90deg, rgba(40, 30, 20, 0.2) 0%, rgba(40, 30, 20, 0.06) 3.5%, rgba(0, 0, 0, 0) 10%); }
.single .flipbook .pg::after { background: linear-gradient(90deg, rgba(40, 30, 20, 0.14) 0%, rgba(0, 0, 0, 0) 5%); }
/* the book's shadow on the desk */
.flipbook::before { content: ""; position: absolute; inset: 2% 0 -1.5%; border-radius: 6px; box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.7), 0 8px 18px rgba(0, 0, 0, 0.4); pointer-events: none; }
.spread .book[data-closed="front"] .flipbook::before { left: 50%; }
.spread .book[data-closed="back"] .flipbook::before { right: 50%; }
/* the engine lets a touch through as a click only when it lands on the link or button itself (clickEventForward), so
   the text inside a link is not a separate target */
.flipbook .pg a *, .flipbook .pg button * { pointer-events: none; }

/* ============ the Arabic book (proposal/ar.html, 2026-10-28) ============
   The same pages, read right to left. book.js mirrors the engine's box and its input; here each page's content (.pg-in)
   is mirrored back, so the engine turns forward with the spine on the right. Odd pages are pg--l (the left of a spread)
   and even pages pg--r, the other way round from the English book. The IQIDS site's own Arabic fonts, self-hosted
   (fonts/ar, SIL OFL 1.1): Changa for titles and figures, IBM Plex Sans Arabic for text. Arabic is never letter-spaced,
   uppercased or set in italics; the English italic accent word becomes the red word stretched with kashida. */
@font-face { font-family: "Changa"; font-style: normal; font-weight: 500 800; font-display: swap; src: url(/landing-pages/iqids/proposal/fonts/ar/changa-arabic.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Changa"; font-style: normal; font-weight: 500 800; font-display: swap; src: url(/landing-pages/iqids/proposal/fonts/ar/changa-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url(/landing-pages/iqids/proposal/fonts/ar/ibm-plex-sans-arabic-400-arabic.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url(/landing-pages/iqids/proposal/fonts/ar/ibm-plex-sans-arabic-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url(/landing-pages/iqids/proposal/fonts/ar/ibm-plex-sans-arabic-500-arabic.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url(/landing-pages/iqids/proposal/fonts/ar/ibm-plex-sans-arabic-500-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url(/landing-pages/iqids/proposal/fonts/ar/ibm-plex-sans-arabic-600-arabic.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url(/landing-pages/iqids/proposal/fonts/ar/ibm-plex-sans-arabic-600-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

[dir="rtl"] { --display: "Changa", "IBM Plex Sans Arabic", Tahoma, sans-serif; --text: "IBM Plex Sans Arabic", Tahoma, "Segoe UI", sans-serif; --serif: "IBM Plex Sans Arabic", Tahoma, sans-serif; }
[dir="rtl"] body, [dir="rtl"] .bar *, [dir="rtl"] .sheetui *, [dir="rtl"] .pg * { letter-spacing: 0 !important; text-transform: none !important; font-stretch: normal !important; font-style: normal !important; }

/* the engine's box mirrored, each page's content mirrored back */
[dir="rtl"] .stage, [dir="rtl"] .flipbook { direction: ltr; }
[dir="rtl"] .stage .flipbook.stf__parent { transform: scaleX(-1) translateZ(0); }
[dir="rtl"] .flipbook .pg-in { transform: scaleX(-1); }
[dir="rtl"] .pg-in { position: absolute; inset: 0; direction: rtl; }
:where([dir="rtl"] .pg-in) > * { position: relative; z-index: 1; font-size: 3.6cqw; }
/* what the English book draws on the page itself (which sits in the mirrored box) is drawn on its content instead */
[dir="rtl"] .pg::before { display: none; }
[dir="rtl"] .pg-in::before { content: ""; position: absolute; z-index: 0; top: 52cqw; width: 150cqw; height: 120cqw; background: var(--gem) center / contain no-repeat; pointer-events: none; }
[dir="rtl"] .pg--l .pg-in::before { right: -75cqw; }
[dir="rtl"] .pg--r .pg-in::before { left: -75cqw; }
[dir="rtl"] .pg--photo::after { display: none; }
[dir="rtl"] .pg--photo .pg-in::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0.1) 45%, rgba(0, 0, 0, 0.86) 85%); }

/* the reader's bars */
[dir="rtl"] .prog-l i { transform-origin: 100% 50%; }
[dir="rtl"] .prog-t small { margin: 0 6px 0 0; }
[dir="rtl"] .menu-list a b { margin: 0 auto 0 0; }
[dir="rtl"] .brand-t { font: 600 13px/1.25 var(--display); }
[dir="rtl"] .brand-t em { font: 500 12px/1.3 var(--text); }
[dir="rtl"] .cta { font: 600 14px/1 var(--display); }
[dir="rtl"] .sheetui h2 { font: 700 14px/1 var(--display); }
[dir="rtl"] .menu-list a { font: 500 17px/1.4 var(--text); }

/* the running head: the chapter on the outer side, the book's name toward the spine */
[dir="rtl"] .pg--r .rh { flex-direction: row; }
[dir="rtl"] .pg--l .rh { flex-direction: row-reverse; }
[dir="rtl"] .rh-b { margin: 0; }
[dir="rtl"] .pg--r .rh-b { margin: 0 auto 0 0; }
[dir="rtl"] .pg--l .rh-b { margin: 0 0 0 auto; }
[dir="rtl"] .rh { font: 600 2.6cqw/1.2 var(--display); }
[dir="rtl"] .pg--r .rh-t::after { display: none; }
[dir="rtl"] .pg--r .rh-t::before { display: inline-block; margin: 0 0 0 2.2cqw; }
[dir="rtl"] .pg--l .rh-t::before { display: none; }
[dir="rtl"] .pg--l .rh-t::after { content: ""; display: inline-block; width: 5cqw; height: 0.18cqw; background: currentColor; opacity: 0.45; vertical-align: middle; margin: 0 2.2cqw 0 0; }
[dir="rtl"] .folio { font: 500 2.6cqw/1 var(--display); }

/* type: Arabic needs more room between lines than English */
[dir="rtl"] .kick { font: 600 2.9cqw/1.3 var(--display); }
[dir="rtl"] .h { font: 700 7.2cqw/1.3 var(--display); }
[dir="rtl"] .h--xl { font-size: 8.6cqw; line-height: 1.25; }
[dir="rtl"] .h em, [dir="rtl"] .quote em, [dir="rtl"] .bc-h em { font: inherit; color: var(--accent); }
[dir="rtl"] .pg--red .h em, [dir="rtl"] .pg--photo .quote em, [dir="rtl"] .bc-h em { color: #fff; }
[dir="rtl"] .lead { font: 500 4.1cqw/1.6 var(--text); }
[dir="rtl"] .txt { line-height: 1.75; }
[dir="rtl"] .note { font-size: 2.9cqw; line-height: 1.6; }
[dir="rtl"] .src { line-height: 1.6; }
[dir="rtl"] .sign small { font: 500 3.3cqw/1.5 var(--text); }
[dir="rtl"] .ph figcaption { font: 600 2.4cqw/1.2 var(--display); }
[dir="rtl"] .stats dd { font: 600 13cqw/1.1 var(--display); }
[dir="rtl"] .stats sup { font: 500 0.45em/1 var(--display); margin: 0 0.6cqw 0 0; }
[dir="rtl"] .stats dt { line-height: 1.5; }
[dir="rtl"] .facts dd { font: 600 9cqw/1.15 var(--display); }
[dir="rtl"] .facts dt { line-height: 1.5; }
[dir="rtl"] .rows b { font: 700 4cqw/1.4 var(--display); }
[dir="rtl"] .rows span { line-height: 1.6; }
[dir="rtl"] .toc span { font: 600 4.3cqw/1.35 var(--display); }
[dir="rtl"] .toc b, [dir="rtl"] .toc i { font-family: var(--display); }
[dir="rtl"] .toc small { line-height: 1.5; }
[dir="rtl"] .logos span { line-height: 1.5; }
[dir="rtl"] .tracks h3 { font: 700 4.1cqw/1.35 var(--display); }
[dir="rtl"] .tracks p { line-height: 1.6; }
[dir="rtl"] .gains li { padding: 2.2cqw 9cqw 2.2cqw 0; line-height: 1.6; }
[dir="rtl"] .gains li::before { left: auto; right: 0; font-family: var(--display); }
[dir="rtl"] .quote { font: 700 7.6cqw/1.35 var(--display); }
[dir="rtl"] .ways b { font: 700 4.1cqw/1.4 var(--display); }
[dir="rtl"] .ways span { line-height: 1.5; }
[dir="rtl"] .ways a { padding: 2cqw 2cqw 2cqw 0; font: 600 2.8cqw/1.2 var(--display); }
[dir="rtl"] .ways a::after { content: " ←"; }
[dir="rtl"] .dia-h { font: 800 19cqw/1.1 var(--display); }
[dir="rtl"] .pg--diamond .lead { font: 500 4.6cqw/1.55 var(--text); }
[dir="rtl"] .ticks li { padding: 1.4cqw 6cqw 1.4cqw 0; line-height: 1.55; }
[dir="rtl"] .ticks li::before { left: auto; right: 0.3cqw; }
[dir="rtl"] .limit { line-height: 1.55; }
[dir="rtl"] .tiers { line-height: 1.45; }
[dir="rtl"] .tiers th, [dir="rtl"] .tiers td { text-align: right; }
[dir="rtl"] .tiers thead th { font: 700 2.6cqw/1.3 var(--display); }
[dir="rtl"] .tiers tbody th { padding-left: 1.2cqw; padding-right: 0; }
[dir="rtl"] .proof { font: 600 4cqw/1.5 var(--text); }
[dir="rtl"] .stands b { font: 700 4.2cqw/1.4 var(--display); }
[dir="rtl"] .stands em { font: 600 3.8cqw/1.3 var(--display); }
[dir="rtl"] .stands span { line-height: 1.55; }
[dir="rtl"] .addons li { padding: 0 4.4cqw 0 0; line-height: 1.5; }
[dir="rtl"] .addons li::before { left: auto; right: 0.3cqw; }
[dir="rtl"] .help li { line-height: 1.5; }
[dir="rtl"] .steps li::before { font: 600 9cqw/1 var(--display); }
[dir="rtl"] .steps b { font: 700 3.9cqw/1.4 var(--display); }
[dir="rtl"] .steps span { line-height: 1.55; }
[dir="rtl"] .dates dt { font: 600 2.6cqw/1.3 var(--display); }
[dir="rtl"] .dates dd { line-height: 1.5; }
/* the 40-page edition's new page types, right to left */
[dir="rtl"] .years li::before { content: attr(data-y); font-size: 5.6cqw; line-height: 1.1; }
[dir="rtl"] .open-n { font: 600 30cqw/1 var(--display); }
[dir="rtl"] .open-h { font: 700 7.6cqw/1.35 var(--display); }
[dir="rtl"] .open-list a { font: 500 3.3cqw/1.5 var(--text); }
[dir="rtl"] .bars em { font: 600 7cqw/1.1 var(--display); }
[dir="rtl"] .bars sup { font: 500 0.45em/1 var(--display); margin: 0 0.4cqw 0 0; }
[dir="rtl"] .bars span { border-radius: 1.1cqw 0 0 1.1cqw; }
[dir="rtl"] .giant { font: 600 46cqw/1 var(--display); }
[dir="rtl"] .giant small { margin: 0 2.4cqw 0 0; font: 700 0.16em/1 var(--display); }
[dir="rtl"] .facts--words dd { font-size: 6cqw; line-height: 1.3; }
[dir="rtl"] .topics li { padding: 0 4.4cqw 0 0; line-height: 1.5; }
[dir="rtl"] .topics li::before { left: auto; right: 0.3cqw; }
[dir="rtl"] .voices blockquote { font: 500 4.6cqw/1.6 var(--text); }
[dir="rtl"] .voices figcaption { font: 600 2.6cqw/1.4 var(--display); }
/* Western digits in the Arabic book: figures read left to right, so "5,000+" and "+79.7%" keep their order */
[dir="rtl"] .stats dd, [dir="rtl"] .bars em, [dir="rtl"] .facts:not(.facts--words) dd { direction: ltr; unicode-bidi: isolate; text-align: right; }
[dir="rtl"] .stats sup, [dir="rtl"] .bars sup { margin: 0 0 0 0.4cqw; }
[dir="rtl"] #p7 .stats dd { font-size: 10.6cqw; }
[dir="rtl"] #p5 .years li { padding: 1.1cqw 0; }
[dir="rtl"] #p35 .duo img { height: 26cqw; } [dir="rtl"] #p35 .duo { margin-top: 3.4cqw !important; }
[dir="rtl"] #p9 .facts dd { font-size: 7.4cqw; } [dir="rtl"] #p9 .facts dt { line-height: 1.45; } [dir="rtl"] #p9 .lead { font-size: 3.8cqw; } [dir="rtl"] #p15 .tracks section { padding-bottom: 2.6cqw; }
[dir="rtl"] #p6 .bars { gap: 2.6cqw; } [dir="rtl"] #p6 .bars em { font-size: 6.4cqw; }
[dir="rtl"] #p15 .tracks p { font-size: 2.95cqw; line-height: 1.5; }
[dir="rtl"] #p17 .facts { gap: 3.6cqw 6cqw; }
[dir="rtl"] #p34 .h { font-size: 6.6cqw; } [dir="rtl"] #p34 .years li { padding: 1cqw 0; } [dir="rtl"] #p34 .years span { line-height: 1.4; }
[dir="rtl"] #p37 .dates { gap: 2.6cqw 4cqw; } [dir="rtl"] #p37 .dates dd { font-size: 3.1cqw; }
[dir="rtl"] #p38 .txt { font-size: 3.3cqw; } [dir="rtl"] #p38 .rows--tight li { padding: 1.2cqw 0; } [dir="rtl"] #p38 .rows span { font-size: 3cqw; line-height: 1.45; }
[dir="rtl"] .pg .btn { font: 600 3.4cqw/1.2 var(--display); }
[dir="rtl"] .btn::after { content: "←"; }

/* the covers: the logo and the words on the right, as an Arabic cover opens */
[dir="rtl"] .cv-logo { left: auto; right: var(--m); }
[dir="rtl"] .cv-kicker { font: 600 2.9cqw/1.4 var(--display); }
[dir="rtl"] .cv-title { left: 4cqw; right: var(--m); }
[dir="rtl"] .cv-the { font: 600 7.2cqw/1.25 var(--display); margin: 0; }
[dir="rtl"] .cv-dia { font: 800 21cqw/1.1 var(--display); margin: 0; }
[dir="rtl"] .cv-year { font: 600 15cqw/1.1 var(--display); }
[dir="rtl"] .cv-sub { left: 26cqw; right: var(--m); line-height: 1.6; }
[dir="rtl"] .cv-foot p { line-height: 1.45; }
[dir="rtl"] .cv-foot b { font: 600 2.8cqw/1.3 var(--display); }
[dir="rtl"] .bc-h { font: 700 11cqw/1.25 var(--display); }
[dir="rtl"] .bc-deck { font: 500 4.6cqw/1.55 var(--text); }
[dir="rtl"] .qr { right: auto; left: 0; }

/* the language switch in the top bar (both books): the other language, opened at the same page */
.lang { width: auto; min-width: 44px; padding: 0 10px; font: 600 14px/1 var(--text); text-decoration: none; }
.lang:lang(ar) { font-family: Tahoma, "Segoe UI", sans-serif; font-size: 15px; }

/* the Arabic book's page pictures (pictures mode): mirrored copies in snap-ar/, since its pages sit in the mirrored box */
[dir="rtl"] .flipbook .pg.snap#p1 { background: url(/landing-pages/iqids/proposal/snap-ar/p1.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p2 { background: url(/landing-pages/iqids/proposal/snap-ar/p2.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p3 { background: url(/landing-pages/iqids/proposal/snap-ar/p3.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p4 { background: url(/landing-pages/iqids/proposal/snap-ar/p4.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p5 { background: url(/landing-pages/iqids/proposal/snap-ar/p5.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p6 { background: url(/landing-pages/iqids/proposal/snap-ar/p6.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p7 { background: url(/landing-pages/iqids/proposal/snap-ar/p7.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p8 { background: url(/landing-pages/iqids/proposal/snap-ar/p8.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p9 { background: url(/landing-pages/iqids/proposal/snap-ar/p9.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p10 { background: url(/landing-pages/iqids/proposal/snap-ar/p10.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p11 { background: url(/landing-pages/iqids/proposal/snap-ar/p11.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p12 { background: url(/landing-pages/iqids/proposal/snap-ar/p12.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p13 { background: url(/landing-pages/iqids/proposal/snap-ar/p13.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p14 { background: url(/landing-pages/iqids/proposal/snap-ar/p14.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p15 { background: url(/landing-pages/iqids/proposal/snap-ar/p15.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p16 { background: url(/landing-pages/iqids/proposal/snap-ar/p16.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p17 { background: url(/landing-pages/iqids/proposal/snap-ar/p17.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p18 { background: url(/landing-pages/iqids/proposal/snap-ar/p18.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p19 { background: url(/landing-pages/iqids/proposal/snap-ar/p19.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p20 { background: url(/landing-pages/iqids/proposal/snap-ar/p20.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p21 { background: url(/landing-pages/iqids/proposal/snap-ar/p21.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p22 { background: url(/landing-pages/iqids/proposal/snap-ar/p22.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p23 { background: url(/landing-pages/iqids/proposal/snap-ar/p23.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p24 { background: url(/landing-pages/iqids/proposal/snap-ar/p24.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p25 { background: url(/landing-pages/iqids/proposal/snap-ar/p25.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p26 { background: url(/landing-pages/iqids/proposal/snap-ar/p26.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p27 { background: url(/landing-pages/iqids/proposal/snap-ar/p27.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p28 { background: url(/landing-pages/iqids/proposal/snap-ar/p28.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p29 { background: url(/landing-pages/iqids/proposal/snap-ar/p29.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p30 { background: url(/landing-pages/iqids/proposal/snap-ar/p30.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p31 { background: url(/landing-pages/iqids/proposal/snap-ar/p31.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p32 { background: url(/landing-pages/iqids/proposal/snap-ar/p32.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p33 { background: url(/landing-pages/iqids/proposal/snap-ar/p33.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p34 { background: url(/landing-pages/iqids/proposal/snap-ar/p34.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p35 { background: url(/landing-pages/iqids/proposal/snap-ar/p35.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p36 { background: url(/landing-pages/iqids/proposal/snap-ar/p36.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p37 { background: url(/landing-pages/iqids/proposal/snap-ar/p37.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p38 { background: url(/landing-pages/iqids/proposal/snap-ar/p38.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p39 { background: url(/landing-pages/iqids/proposal/snap-ar/p39.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] .flipbook .pg.snap#p40 { background: url(/landing-pages/iqids/proposal/snap-ar/p40.webp?v=40) center / 100% 100% no-repeat !important; }
[dir="rtl"] #p2 .sign { margin-top: 3.4cqw !important; }