/* ==========================================================================
   LDV INNOVATIONS / MATERIAL DESIGN SYSTEM  (v3, 28 September 2026)
   --------------------------------------------------------------------------
   Every surface is a made object: ivory slabs with a visible base edge,
   raised keys that press in, debossed fields, enamel gems, struck coins,
   wax seals on a brass rail, leather covers on a paper page block.

   Contents
     01 Fonts               12 Leather covers
     02 Tokens              13 Top bar, navigation, menu
     03 Base and ground     14 Reveals and page transitions
     04 Typography          15 3D stages and vitrines
     05 Layout              16 Home
     06 Slabs and insets    17 Case Studies
     07 Keys (buttons)      18 History
     08 Fields              19 Services
     09 Gems (tags)         20 About
     10 Coins, medallions   21 Contact
     11 Seals and rails     22 Placeholders, 23 Footer, 24 Consent,
                            25 Privacy and 404, 26 Responsive, 27 Motion
   ========================================================================== */

/* 01 FONTS ------------------------------------------------------------------ */
@font-face { font-family: "Source Serif"; src: url("../assets/fonts/source-serif-4-400to700.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif"; src: url("../assets/fonts/source-serif-4-italic-400to700.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* 02 TOKENS ----------------------------------------------------------------- */
:root {
  --gold: #B58A38; --gold-deep: #76551C; --gold-hi: #E6C878; --gold-pale: #F3E3B5;
  --red: #A12232; --red-deep: #7C1826; --red-hi: #C8404F;
  --blue: #155E8D; --blue-deep: #0F4769; --blue-hi: #2C7CB0;
  --ink: #1B1712; --ink-2: #3F362C; --ink-3: #5E5245; --ink-4: #7A6B5A;
  --parch: #F3EBDD; --parch-2: #EADFCB; --parch-3: #DCCDB1;
  --paper: #FDFBF6; --ivory: #FFFEFA; --sepia: #806449; --silver: #A8ADB4;
  --edge1: #E6D8BE; --edge2: #DCCAA8; --edge3: #CFB88F; --edge4: #C0A57B;
  --shadow-rgb: 62, 42, 14;
  --line: rgba(118, 85, 28, .22);
  --line-2: rgba(118, 85, 28, .38);
  --gem-blue: #1E6B9C; --gem-gold: #D2A955; --gem-slate: #6E767F; --gem-red: #A12232; --gem-green: #2F8A5B; --gem-plum: #6C3F7A;

  --serif: "Source Serif", Georgia, "Times New Roman", serif;
  --sans: "Inter", Arial, "Segoe UI", system-ui, sans-serif;

  --r-lg: 20px; --r: 14px; --r-sm: 10px; --r-xs: 7px;
  --wrap: 1320px;
  --pad: clamp(16px, 2.6vw, 32px);
  --top-h: 78px;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 180ms; --t-mid: 420ms;

  --slab-shadow:
    inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.4),
    0 1px 0 var(--edge1), 0 2px 0 var(--edge2), 0 3px 0 var(--edge3), 0 4px 0 var(--edge4),
    0 7px 10px -3px rgba(var(--shadow-rgb), .26), 0 22px 40px -20px rgba(var(--shadow-rgb), .42);
  --slab-shadow-lift:
    inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.4),
    0 1px 0 var(--edge1), 0 2px 0 var(--edge2), 0 3px 0 var(--edge3), 0 4px 0 var(--edge4), 0 5px 0 #B9A27D,
    0 14px 18px -4px rgba(var(--shadow-rgb), .3), 0 34px 56px -22px rgba(var(--shadow-rgb), .5);
}

/* 03 BASE AND GROUND --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 20px); }
body {
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; color: var(--ink);
  background: var(--parch); min-height: 100vh; overflow-x: clip;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
img, svg, canvas, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: var(--blue); text-decoration: none; }
::selection { background: rgba(181, 138, 56, .3); color: var(--ink); }
:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 3px; border-radius: 6px; }

/* the page ground: parchment, a faint Leonardo sheet, a warm vignette */
.ground { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: var(--parch) url("../assets/img/parchment.webp") 0 0 / 700px repeat; }
.ground::before { content: ""; position: absolute; inset: 0; background: url("../assets/img/sketch-sheet.webp") center 30% / cover no-repeat; opacity: .2; mix-blend-mode: multiply; filter: saturate(.8) contrast(.9); }
.ground::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 35%, rgba(255,251,242,.5) 0%, rgba(255,251,242,0) 55%, rgba(var(--shadow-rgb), .16) 100%); }

.skip { position: fixed; left: 16px; top: -60px; z-index: 1000; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 600; transition: top var(--t-fast) var(--ease-out); }
.skip:focus { top: 12px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 04 TYPOGRAPHY -------------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.08; letter-spacing: -.012em; color: var(--ink); text-wrap: balance; font-optical-sizing: auto; }
h1 { font-size: clamp(2.3rem, 1.2rem + 2.6vw, 3.9rem); letter-spacing: -.018em; }
h2 { font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.7rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + .45vw, 1.6rem); line-height: 1.18; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--gold-deep); font-weight: 600; }
p { text-wrap: pretty; }
.lead { font-size: clamp(1.08rem, 1rem + .3vw, 1.25rem); line-height: 1.55; color: var(--ink-2); max-width: 38em; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font: 700 .75rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--red); }
.kicker::before { content: ""; flex: none; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--gold), var(--gold-hi)); box-shadow: 0 1px 0 rgba(255,255,255,.8); }
.label { font: 700 .72rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.roman { font-family: var(--serif); font-style: italic; font-weight: 600; color: var(--gold-deep); }
.emboss { text-shadow: 0 1px 0 rgba(255,255,255,.85), 0 -1px 0 rgba(var(--shadow-rgb), .12); }
.small { font-size: .9375rem; color: var(--ink-3); }
.num { font-variant-numeric: tabular-nums; }
.text-link, .prose a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.text-link:hover, .prose a:hover { color: var(--red); }

/* 05 LAYOUT ------------------------------------------------------------------ */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
main { display: block; padding-bottom: clamp(48px, 7vw, 96px); }
.section { padding-top: clamp(40px, 5vw, 72px); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; }
.section-head > div { max-width: 44rem; }
.section-head h2 { margin-top: 12px; }
.section-head p { margin-top: 10px; color: var(--ink-2); }
.stack > * + * { margin-top: 18px; }

/* 06 SLABS AND INSETS -------------------------------------------------------- */
.slab {
  position: relative; border-radius: var(--r);
  background: linear-gradient(180deg, #FFFEFA 0%, #FBF6EC 55%, #F5EDDF 100%);
  border: 1px solid rgba(118, 85, 28, .22);
  box-shadow: var(--slab-shadow);
}
.slab.framed::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(181, 138, 56, .3); border-radius: calc(var(--r) - 7px); pointer-events: none; }
.slab.lift { transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.slab.lift:hover { transform: translateY(-3px); box-shadow: var(--slab-shadow-lift); }
.slab-pad { padding: clamp(22px, 2.6vw, 34px); }
.inset {
  background: linear-gradient(180deg, #EFE5D2, #F6EFE2); border: 1px solid rgba(118, 85, 28, .25); border-radius: var(--r-sm);
  box-shadow: inset 0 2px 4px rgba(var(--shadow-rgb), .18), inset 0 1px 1px rgba(var(--shadow-rgb), .2), 0 1px 0 rgba(255,255,255,.8);
}
.engrave-rule { height: 2px; border: 0; margin: 20px 0; background: linear-gradient(90deg, transparent, rgba(118,85,28,.35) 12%, rgba(118,85,28,.35) 88%, transparent); box-shadow: 0 1px 0 rgba(255,255,255,.8); }

/* 07 KEYS (BUTTONS) ------------------------------------------------------------ */
.btn {
  --b1: #FFFDF8; --b2: #EFE3CC; --e1: #D7C5A3; --e2: #C9B38B; --e3: #B89E73; --tx: var(--ink);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; padding: 10px 18px; border-radius: 12px; cursor: pointer; user-select: none; -webkit-user-select: none;
  font: 600 .9375rem/1.1 var(--sans); letter-spacing: .01em; color: var(--tx); white-space: nowrap; text-decoration: none;
  background: linear-gradient(180deg, var(--b1) 0%, var(--b2) 100%); border: 1px solid rgba(0, 0, 0, .18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(0,0,0,.06), 0 1px 0 var(--e1), 0 2px 0 var(--e2), 0 3px 0 var(--e3), 0 6px 9px -3px rgba(var(--shadow-rgb), .4);
  transform: translateY(0); transition: transform .12s var(--ease), box-shadow .12s var(--ease), filter .15s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { color: var(--tx); transform: translateY(-1px); filter: brightness(1.03); box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(0,0,0,.06), 0 1px 0 var(--e1), 0 2px 0 var(--e2), 0 3px 0 var(--e3), 0 4px 0 var(--e3), 0 10px 14px -4px rgba(var(--shadow-rgb), .42); }
.btn:active, .btn.pressed, .btn[aria-current="page"] { transform: translateY(3px); box-shadow: inset 0 2px 4px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 var(--e1), 0 1px 2px rgba(var(--shadow-rgb), .3); }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn .arrow { transition: transform .3s var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }
.btn.sm { min-height: 36px; padding: 7px 13px; font-size: .84rem; border-radius: 10px; }
.btn.lg { min-height: 54px; padding: 14px 26px; font-size: 1.02rem; border-radius: 14px; }
.btn.red { --b1: #C8404F; --b2: #9A1F2F; --e1: #7C1826; --e2: #6A1320; --e3: #560F1A; --tx: #fff; border-color: #5A0F1A; text-shadow: 0 -1px 0 rgba(0,0,0,.35); }
.btn.gold { --b1: #F6E1A6; --b2: #C99A45; --e1: #9C7228; --e2: #86611F; --e3: #6E4F18; --tx: #2A1E0A; border-color: #7A5920; background: linear-gradient(180deg, #F8E6AE 0%, #E3BF6C 35%, #C3933F 62%, #D8B462 100%); text-shadow: 0 1px 0 rgba(255,245,210,.6); }
.btn.blue { --b1: #2C7CB0; --b2: #12577F; --e1: #0E4466; --e2: #0B3854; --e3: #082C42; --tx: #fff; border-color: #082C42; text-shadow: 0 -1px 0 rgba(0,0,0,.3); }
.btn.ghost { --b1: rgba(255,253,248,.72); --b2: rgba(239,227,204,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.btn .n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--red); color: #fff; font-size: .72rem; }
.key-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* 08 FIELDS -------------------------------------------------------------------- */
.field-box {
  display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 14px; border-radius: 12px;
  background: linear-gradient(180deg, #EDE2CD, #F7F1E5); border: 1px solid rgba(118, 85, 28, .3);
  box-shadow: inset 0 2px 5px rgba(var(--shadow-rgb), .2), inset 0 1px 1px rgba(var(--shadow-rgb), .25), 0 1px 0 rgba(255,255,255,.9);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field-box:focus-within { border-color: var(--blue); box-shadow: inset 0 2px 5px rgba(var(--shadow-rgb), .2), 0 0 0 3px rgba(21, 94, 141, .18), 0 1px 0 rgba(255,255,255,.9); }
.field-box input, .field-box select, .field-box textarea { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 1.02rem; color: var(--ink); }
.field-box input, .field-box select { height: 48px; }
.field-box select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 22px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%235E5245' stroke-width='1.8'/></svg>") right center no-repeat; }
.field-box.area { align-items: stretch; padding: 12px 14px; }
.field-box textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.field-box svg { width: 17px; height: 17px; color: var(--ink-3); flex: none; }

/* 09 GEMS (ENAMEL TAGS) --------------------------------------------------------- */
.gem {
  --g: #9A948C; --gt: #1B1712;
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 6px; border-radius: 999px;
  font: 600 .84rem/1.2 var(--sans); color: var(--gt); white-space: nowrap;
  background: linear-gradient(180deg, color-mix(in srgb, var(--g) 62%, #fff) 0%, var(--g) 48%, color-mix(in srgb, var(--g) 86%, #000) 100%);
  border: 1px solid color-mix(in srgb, var(--g) 65%, #000);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 3px rgba(0,0,0,.18), 0 1px 0 color-mix(in srgb, var(--g) 55%, #000), 0 3px 7px -2px color-mix(in srgb, var(--g) 70%, transparent);
  transition: transform .2s var(--ease-out), filter .2s var(--ease);
}
.gem.dark { --gt: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); }
.gem.light { text-shadow: 0 1px 0 rgba(255,255,255,.4); }
.gem i {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 14%, rgba(255,255,255,.35) 30%, rgba(255,255,255,0) 60%), color-mix(in srgb, var(--g) 75%, #000);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 1px 1px rgba(0,0,0,.35);
}
.gem.ivory { --g: #EFE6D3; }
.gem.gold { --g: #D2A955; }
.gem.red { --g: #A12232; --gt: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); }
.gem.blue { --g: #1E6B9C; --gt: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); }
.gem.green { --g: #2F8A5B; --gt: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); }
.gem.teal { --g: #1F8C8A; --gt: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); }
.gem.plum { --g: #6C3F7A; --gt: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); }
.gem.slate { --g: #6E767F; --gt: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); }
.gem-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* the long gems (proofs, form choices, chapter dates) wrap inside their card at any width */
.lc-proof .gem, .chip .gem, .ch-top .gem { white-space: normal; max-width: 100%; border-radius: 22px; text-align: left; }
.lc-proof .gem-row, .ch-top .gem-row, .chips, .chip { min-width: 0; max-width: 100%; }

/* 10 COINS AND MEDALLIONS ------------------------------------------------------- */
.coin {
  --m1: #FFF4C8; --m2: #E9C874; --m3: #C29440; --m4: #8C6421; --m5: #6E4C15; --mt: #3A2808;
  --size: 50px;
  width: var(--size); height: var(--size); border-radius: 50%; flex: none; display: grid; place-items: center; position: relative;
  background: radial-gradient(circle at 34% 28%, var(--m1) 0%, var(--m2) 22%, var(--m3) 55%, var(--m4) 82%, var(--m5) 100%);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.2), inset 0 0 0 4px rgba(60,40,10,.35), inset 0 -4px 6px rgba(0,0,0,.2), 0 2px 0 var(--m5), 0 5px 9px -2px rgba(40,25,5,.5);
}
.coin b { font: 700 calc(var(--size) * .36)/1 var(--serif); color: var(--mt); text-shadow: 0 1px 0 rgba(255,245,215,.65), 0 -1px 0 rgba(0,0,0,.2); }
.coin small { position: absolute; top: 17%; font: 700 calc(var(--size) * .12)/1 var(--sans); letter-spacing: .14em; color: var(--mt); opacity: .8; }
.coin small + b { margin-top: 12%; }
.coin.silver { --m1: #FFFFFF; --m2: #DDE1E6; --m3: #AEB4BC; --m4: #7E858F; --m5: #5D636C; --mt: #23272D; }
.coin.bronze { --m1: #FBE3CC; --m2: #D9A57A; --m3: #AD7447; --m4: #7E4F2B; --m5: #5E3A1F; --mt: #2E1A0A; }
.coin.lg { --size: 84px; }
.coin.long b { font-size: calc(var(--size) * .27); letter-spacing: -.01em; }
.coin.xl { --size: 112px; }
.coin.sm { --size: 38px; }

/* a brass bezel holding an illustration */
.medallion {
  --size: 104px;
  position: relative; width: var(--size); height: var(--size); border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(from 210deg, #F8E6AE, #C3933F 18%, #7A5920 32%, #E3BF6C 48%, #9C7228 64%, #F6E1A6 80%, #B58A38 92%, #F8E6AE);
  box-shadow: inset 0 0 0 1px rgba(255,245,210,.6), 0 2px 0 #6E4F18, 0 3px 0 #5A4013, 0 10px 16px -5px rgba(var(--shadow-rgb), .5);
}
.medallion::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: radial-gradient(circle at 45% 35%, #FFFEF8, #F4ECDC 70%, #E9DDC6); box-shadow: inset 0 3px 6px rgba(var(--shadow-rgb), .35), inset 0 -1px 0 rgba(255,255,255,.7); }
.medallion img { position: relative; width: 74%; height: 74%; object-fit: contain; mix-blend-mode: multiply; transition: transform .6s var(--ease-out); }
.medallion.lg { --size: 150px; }

/* 11 SEALS AND RAILS ------------------------------------------------------------- */
.brass-rail {
  position: absolute; height: 14px; border-radius: 8px; z-index: 0;
  background: linear-gradient(180deg, #F7E4A8 0%, #D9B25F 30%, #9C7228 58%, #C9A052 80%, #E8CC86 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 0 #6E4F18, 0 5px 10px -2px rgba(var(--shadow-rgb), .45);
}
.brass-rail .fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--fill, 0%); border-radius: 8px; background: linear-gradient(180deg, #D6505F 0%, #A12232 55%, #7C1826 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 0 #4E0D17; transition: width .8s var(--ease); }

.seal-rail { position: relative; padding: 26px 6px 6px; }
.seal-rail .brass-rail { left: 7%; right: 7%; top: calc(26px + 34px); }
.seals { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 6px; }
.seal-btn { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 0 2px; cursor: pointer; border-radius: 12px; }
.wax { position: relative; display: grid; place-items: center; width: 82px; height: 82px; transform: rotate(var(--rot, 0deg)); transition: transform .25s var(--ease-out), filter .25s var(--ease); filter: drop-shadow(0 4px 4px rgba(var(--shadow-rgb), .35)); }
.wax img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; pointer-events: none; }
.wax b { position: relative; font: 700 1.55rem/1 var(--serif); transform: rotate(calc(var(--rot, 0deg) * -1)); margin-top: 2px; }
.wax.red b { background: linear-gradient(180deg, #FFF1BF 0%, #E7C271 45%, #B98A36 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(60,8,14,.75)); }
.wax.ivory b { color: #8A7456; text-shadow: 0 1px 0 rgba(255,255,255,.85), 0 -1px 0 rgba(90,62,24,.25); }
.seal-btn:hover .wax { transform: translateY(-3px) rotate(calc(var(--rot, 0deg) - 4deg)); }
.seal-btn .ml { font: 600 .84rem/1.25 var(--sans); color: var(--ink-2); max-width: 140px; }
.seal-btn .md { font-size: .75rem; color: var(--ink-3); }
.seal-btn[aria-selected="true"] .ml { color: var(--red); }
.seal-btn[aria-selected="true"] .wax { transform: translateY(2px) rotate(var(--rot, 0deg)) scale(.95); }
.seal-btn.current .wax { animation: halo 2.6s ease-in-out infinite; }
@keyframes halo { 0%, 100% { filter: drop-shadow(0 4px 4px rgba(var(--shadow-rgb), .35)) drop-shadow(0 0 0 rgba(230,200,120,0)); } 50% { filter: drop-shadow(0 4px 4px rgba(var(--shadow-rgb), .35)) drop-shadow(0 0 14px rgba(230,200,120,.95)); } }
.seal-detail { margin-top: 22px; padding: 22px 26px; min-height: 120px; }
.seal-detail .when { font: 700 .72rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.seal-detail h3 { margin: 8px 0 8px; }
.seal-detail p { color: var(--ink-2); max-width: 52em; }
.seal-detail > * { animation: detail-in .45s var(--ease-out) both; }
@keyframes detail-in { from { opacity: 0; transform: translateY(8px); } }

/* 12 LEATHER COVERS ---------------------------------------------------------------- */
.leather {
  --l1: #5A0F1A; --l2: #8E1B2B; --l3: #6A1320;
  position: relative; isolation: isolate; color: #fff; border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(135deg, var(--l1) 0%, var(--l2) 52%, var(--l3) 100%);
  border: 1px solid color-mix(in srgb, var(--l1) 70%, #000);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 0 color-mix(in srgb, var(--l1) 70%, #000), 0 2px 0 color-mix(in srgb, var(--l1) 60%, #000), 0 3px 0 color-mix(in srgb, var(--l1) 50%, #000), 0 4px 0 color-mix(in srgb, var(--l1) 40%, #000), 0 18px 34px -16px rgba(0,0,0,.55);
}
.leather::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .12; background: repeating-linear-gradient(115deg, rgba(255,255,255,.5) 0 1px, transparent 1px 7px); }
.leather::after { content: ""; position: absolute; inset: 9px; border: 1px dashed rgba(230, 200, 120, .45); border-radius: calc(var(--r-lg) - 8px); pointer-events: none; }
.leather.blue { --l1: #0A2F48; --l2: #155E8D; --l3: #0E4466; }
.leather.ink { --l1: #14100C; --l2: #2E241A; --l3: #1C1611; }
.leather.gold-rule::after { border-style: solid; border-color: rgba(230, 200, 120, .35); }
.leather.vellum { --l1: #D8C9A8; --l2: #F3EAD7; --l3: #E4D6B8; color: var(--ink); border-color: #B9A47C; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 0 #C9B48B, 0 2px 0 #BCA57A, 0 3px 0 #AE966A, 0 4px 0 #A0885C, 0 18px 34px -16px rgba(var(--shadow-rgb), .5); }
.leather.vellum::before { opacity: .06; }
.leather.vellum::after { border-color: rgba(118, 85, 28, .45); }
.leather.vellum h1, .leather.vellum h2, .leather.vellum h3 { color: var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.leather.vellum h2 em { color: var(--red); }
.leather.vellum p { color: var(--ink-2); }
.leather.vellum .kicker { color: var(--gold-deep); }
.leather h1, .leather h2, .leather h3 { color: #fff; text-shadow: 0 2px 3px rgba(0,0,0,.35); }
.leather h1 em, .leather h2 em, .leather h3 em { color: var(--gold-hi); }
.leather p { color: rgba(255,255,255,.9); }
.leather .kicker { color: var(--gold-hi); }
/* the dossier's page block under a cover */
.dossier { position: relative; isolation: isolate; margin-bottom: 20px; }
.dossier::before, .dossier::after { content: ""; position: absolute; left: 14px; right: 14px; border-radius: 0 0 18px 18px; }
.dossier::before { bottom: -9px; height: 30px; z-index: -1; background: repeating-linear-gradient(180deg, #FBF6EA 0 2px, #E3D6BD 2px 3px); border: 1px solid #CDBB9A; box-shadow: 0 8px 16px -6px rgba(var(--shadow-rgb), .45); }
.dossier::after { bottom: -15px; left: 26px; right: 26px; height: 30px; z-index: -2; background: #E9DDC5; border: 1px solid #CDBB9A; box-shadow: 0 14px 26px -10px rgba(var(--shadow-rgb), .5); }

/* 13 TOP BAR, NAVIGATION, MENU ------------------------------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 500; view-transition-name: topbar;
  background: linear-gradient(180deg, rgba(255,254,250,.97), rgba(246,238,224,.97));
  border-bottom: 1px solid rgba(118, 85, 28, .3);
  box-shadow: 0 1px 0 #fff inset, 0 1px 0 var(--edge2), 0 2px 0 var(--edge3), 0 8px 20px -10px rgba(var(--shadow-rgb), .45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; opacity: .7; background: linear-gradient(90deg, transparent 0, var(--gold) 15%, var(--gold-hi) 50%, var(--gold) 85%, transparent 100%); }
.top-in { display: flex; align-items: center; gap: 18px; min-height: var(--top-h); }
.brand { display: flex; align-items: center; gap: 14px; color: inherit; flex-shrink: 0; }
.brand img { height: 58px; width: auto; filter: drop-shadow(0 2px 2px rgba(var(--shadow-rgb), .25)); transition: transform .4s var(--ease-out); }
.brand:hover img { transform: scale(1.04) rotate(-1deg); }
.brand-ttl { border-left: 1px solid rgba(118, 85, 28, .35); padding-left: 14px; line-height: 1.15; }
.brand-ttl b { display: block; font: 600 1.2rem/1.1 var(--serif); color: var(--ink); }
.brand-ttl span { font: 700 .66rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.top-grow { flex: 1; }
.nav { display: flex; align-items: center; gap: 10px; }
.nav .btn { min-height: 40px; padding: 8px 15px; }
.nav .btn[aria-current="page"]:not(.red) { color: var(--red-deep); --b1: #F1E6D1; --b2: #E7D8BC; }
.menu-key { display: none; }
/* phones and tablets: the main action stays in the header beside Menu */
.top-contact { display: none; }
.menu-key i { position: relative; width: 18px; height: 10px; display: block; }
.menu-key i::before, .menu-key i::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s var(--ease), top .35s var(--ease); }
.menu-key i::before { top: 0; } .menu-key i::after { top: 8px; }
.menu-key[aria-expanded="true"] i::before { top: 4px; transform: rotate(45deg); }
.menu-key[aria-expanded="true"] i::after { top: 4px; transform: rotate(-45deg); }
.menu {
  position: fixed; inset: var(--top-h) 0 0 0; z-index: 490; overflow-y: auto; padding: 22px var(--pad) 40px;
  background: var(--parch) url("../assets/img/parchment.webp") 0 0 / 700px;
  clip-path: inset(0 0 100% 0); transition: clip-path .55s var(--ease); visibility: hidden;
}
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
.menu ol { list-style: none; display: grid; gap: 12px; }
.menu li { opacity: 0; transform: translateY(-8px); transition: opacity .4s var(--ease-out), transform .45s var(--ease-out); }
.menu.is-open li { opacity: 1; transform: none; }
.menu.is-open li:nth-child(2) { transition-delay: 50ms; } .menu.is-open li:nth-child(3) { transition-delay: 100ms; }
.menu.is-open li:nth-child(4) { transition-delay: 150ms; } .menu.is-open li:nth-child(5) { transition-delay: 200ms; } .menu.is-open li:nth-child(6) { transition-delay: 250ms; }
/* each entry is a small grid: the coin, the page's name on one line, and its description in a column of its own.
   On tablets the descriptions line up along the right edge; on phones each sits under its name, so every name
   and every description starts on the same line down the page. */
.menu a.slab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 3px 16px; padding: 14px 18px; color: var(--ink); }
.menu a.slab > b { font: 600 1.45rem/1.1 var(--serif); white-space: nowrap; }
.menu a.slab span.label { text-align: right; white-space: nowrap; }
.menu .coin { --size: 40px; }
@media (max-width: 560px) {
  .menu > .wrap { padding-inline: 0; }   /* the menu has its own side padding; a second gutter squeezed the descriptions onto two lines */
  .menu a.slab { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; padding: 13px 16px; }
  .menu .coin { grid-row: 1 / span 2; }
  .menu a.slab > b { align-self: end; }
  .menu a.slab span.label { grid-column: 2; align-self: start; text-align: left; white-space: normal; }
}
.menu-foot { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }

/* 14 REVEALS AND PAGE TRANSITIONS ------------------------------------------------------ */
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease-out), transform .75s var(--ease-out); transition-delay: calc(var(--d, 0) * 70ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="rise"] { filter: blur(8px); transition-property: opacity, transform, filter; transition-duration: .7s, .9s, .8s; }
.js [data-reveal="rise"].is-in { filter: none; }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 260ms var(--ease) both; }
::view-transition-new(root) { animation: vt-in 520ms var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }

/* tilt toward the cursor (see site.js) */
[data-tilt] { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); will-change: transform; }
[data-tilt]:hover { --ty: -4px; }
[data-tilt] .sheen { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease); background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 244, 205, .5), transparent 60%); mix-blend-mode: soft-light; }
[data-tilt]:hover .sheen { opacity: 1; }

/* 15 3D STAGES AND VITRINES ------------------------------------------------------------ */
.stage { position: relative; overflow: hidden; isolation: isolate; }
.stage-backdrop { position: absolute; inset: 0; z-index: -2; background: linear-gradient(115deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 40%), linear-gradient(180deg, #F3EFE8 0%, #EFE9DF 50%, #E6DED1 62%, #EBE4D9 62.4%, #EFE8DC 100%); }
.stage-canvas { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .9s var(--ease); }
.stage-canvas.is-ready { opacity: 1; }
.stage-canvas canvas { width: 100% !important; height: 100% !important; display: block; outline: none; }
.stage-poster { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; opacity: 0; transition: opacity .6s var(--ease); }
.no-webgl .stage-poster { opacity: 1; }
.stage-labels { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.stage-label {
  position: absolute; left: 0; top: 0; pointer-events: auto;
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 44px; min-height: 44px; padding: 6px 12px; text-align: center; color: var(--ink);
  transform: translate3d(var(--x, -999px), var(--y, -999px), 0) translate(-50%, 0); will-change: transform; transition: opacity .35s var(--ease);
  border-radius: 12px;
}
.stage-label b { font: 600 1rem/1.2 var(--serif); white-space: nowrap; }
.stage-label small { font: 700 .66rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.stage-label .roman { font-size: .9rem; }
.stage-label:hover b { color: var(--red-deep); }

.vitrine { overflow: hidden; border-radius: var(--r-lg); padding: 0; }
.vitrine .stage { position: absolute; inset: 0; border-radius: inherit; }
.vitrine .glass { position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; background: linear-gradient(118deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 72%, rgba(255,255,255,.1) 100%); box-shadow: inset 0 0 70px rgba(90, 62, 24, .16); }
.vitrine .corner { position: absolute; z-index: 5; width: 34px; height: 34px; pointer-events: none; }
.vitrine .corner::before, .vitrine .corner::after { content: ""; position: absolute; background: linear-gradient(180deg, #F7E4A8, #B58A38 55%, #8C6421); box-shadow: 0 1px 1px rgba(0,0,0,.3); border-radius: 2px; }
.vitrine .corner::before { width: 34px; height: 4px; } .vitrine .corner::after { width: 4px; height: 34px; }
.vitrine .corner.tl { top: 14px; left: 14px; } .vitrine .corner.tr { top: 14px; right: 14px; transform: scaleX(-1); }
.vitrine .corner.bl { bottom: 14px; left: 14px; transform: scaleY(-1); } .vitrine .corner.br { bottom: 14px; right: 14px; transform: scale(-1); }
.vitrine-bar { position: absolute; z-index: 6; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; }
.plaque-label {
  white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 6px 16px; border-radius: 9px;
  font: 600 .95rem/1 var(--serif); font-style: italic; color: #2A1E0A;
  background: linear-gradient(180deg, #F8E6AE 0%, #E3BF6C 35%, #C3933F 62%, #D8B462 100%);
  border: 1px solid #7A5920; text-shadow: 0 1px 0 rgba(255,245,210,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 0 #6E4F18, 0 6px 10px -4px rgba(var(--shadow-rgb), .5);
}

/* 16 HOME --------------------------------------------------------------------------------- */
.home-hero { position: relative; height: calc(100svh - var(--top-h)); min-height: 560px; max-height: 980px; }
.home-hero .stage { position: absolute; inset: 0; }
.home-hero .wrap { position: relative; z-index: 5; height: 100%; display: flex; align-items: center; pointer-events: none; }
.placard { pointer-events: auto; width: min(560px, 100%); padding: clamp(24px, 3vw, 40px); }
.placard h1 { margin: 14px 0 14px; }
.placard .lead { margin-bottom: 24px; }
.placard .facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }

.pipeline { position: relative; }
.plaques { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.plaque-slot { position: relative; display: flex; }
/* the brass rail each row of plaques is threaded on: one segment per slot, joined across the gaps */
.plaque-slot::before {
  content: ""; position: absolute; z-index: 0; left: -22px; right: -22px; top: 50%; height: 14px; margin-top: -7px; border-radius: 8px;
  background: linear-gradient(180deg, #F7E4A8 0%, #D9B25F 30%, #9C7228 58%, #C9A052 80%, #E8CC86 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 0 #6E4F18, 0 5px 10px -2px rgba(var(--shadow-rgb), .45);
}
.plaque-slot:nth-child(3n+1)::before { left: 4%; }
.plaque-slot:nth-child(3n)::before, .plaque-slot:last-child::before { right: 4%; }
.plaque-slot.wide::before { display: none; }
.plaque { position: relative; z-index: 1; display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; color: var(--ink); width: 100%; }
.plaque .band { height: 10px; flex: none; background: linear-gradient(180deg, color-mix(in srgb, var(--g) 55%, #fff), var(--g) 60%, color-mix(in srgb, var(--g) 80%, #000)); box-shadow: inset 0 -1px 0 rgba(0,0,0,.2); }
.plaque .pl-body { position: relative; display: grid; grid-template-columns: 124px minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 20px; row-gap: 8px; padding: 20px 22px 20px 18px; flex: 1; }
.plaque .pl-top { grid-column: 1; grid-row: 1 / 4; align-self: center; display: flex; justify-content: center; }
.plaque .pl-top .coin { position: absolute; top: 14px; right: 14px; }
.plaque h3, .plaque p, .plaque .btn { grid-column: 2; }
.plaque.two .band { background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(0,0,0,0) 45%, rgba(0,0,0,.18)), linear-gradient(90deg, #A12232 0 50%, #155E8D 50% 100%); }
.plaque .medallion { --size: 96px; }
.plaque .emblem { position: relative; width: 116px; height: 104px; display: grid; place-items: end center; }
.plaque .emblem::after { content: ""; position: absolute; left: 16%; right: 16%; bottom: -3px; height: 12px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--shadow-rgb), .32), transparent); }
.plaque .emblem img { position: relative; z-index: 1; width: auto; height: auto; max-width: 116px; max-height: 104px; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(var(--shadow-rgb), .28)); transition: transform .6s var(--ease-out); }
.plaque:hover .emblem img { transform: translateY(-4px) rotate(-3deg) scale(1.05); }
.plaque:hover .medallion img { transform: rotate(-6deg) scale(1.06); }
.plaque h3 { font-size: 1.45rem; margin-top: 2px; padding-right: 40px; }
.plaque p { font-size: .95rem; line-height: 1.5; color: var(--ink-2); }
.plaque .btn { margin-top: 6px; align-self: end; justify-self: start; }
/* the seventh plaque, Contact, is the writing desk at the end of the atelier: one slab across the row */
.plaque-slot.wide { grid-column: 1 / -1; }
.plaque.wide .pl-body { grid-template-columns: 124px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: center; align-items: center; column-gap: 26px; row-gap: 6px; padding-right: 72px; }
.plaque.wide .pl-top { grid-row: 1 / 3; }
.plaque.wide h3 { grid-column: 2; grid-row: 1; align-self: end; padding-right: 0; }
.plaque.wide p { grid-column: 2; grid-row: 2; align-self: start; max-width: 46rem; }
.plaque.wide .btn { grid-column: 3; grid-row: 1 / 3; align-self: center; margin-top: 0; }
.doors .btn.lg { padding-inline: 20px; }

/* 17 CASE STUDIES ------------------------------------------------------------------------ */
.page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: clamp(22px, 2.6vw, 34px) clamp(22px, 3vw, 40px); margin-top: 22px; }
.page-head h1 { font-size: clamp(2rem, 1.3rem + 2vw, 3.2rem); margin: 12px 0 10px; }
.page-head .lead { font-size: 1.05rem; }
.page-head .aside { display: flex; align-items: center; gap: 16px; }
.page-head .aside .label { max-width: 9em; }
.page-head .head-object { height: 136px; width: auto; margin-block: -22px -14px; filter: drop-shadow(0 12px 14px rgba(var(--shadow-rgb), .35)); }
.library-vitrine { width: 100%; aspect-ratio: 2.7; min-height: 380px; max-height: max(380px, calc(100svh - var(--top-h) - 240px)); margin-top: 22px; }
/* brass labels screwed to the plinth front, under each volume */
.book-label {
  flex-direction: row; gap: 6px; min-height: 30px; padding: 4px 10px 4px 5px; border-radius: 6px;
  transform: translate3d(var(--x, -999px), var(--y, -999px), 0) translate(-50%, -50%);
  background: linear-gradient(180deg, #F8E6AE 0%, #E3BF6C 38%, #C3933F 66%, #D8B462 100%);
  border: 1px solid #7A5920; color: #2A1E0A;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(90,60,10,.25), 0 2px 0 #6E4F18, 0 5px 9px -3px rgba(var(--shadow-rgb), .55);
  transition: opacity .35s var(--ease), filter .2s var(--ease), box-shadow .2s var(--ease);
}
.book-label::before, .book-label::after { content: ""; position: absolute; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF5D0, #8C6421); box-shadow: 0 0 0 .5px rgba(60,40,10,.5); }
.book-label::before { left: -9px; } .book-label::after { right: -9px; }
.book-label .roman { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font: 700 .72rem/1 var(--serif); font-style: normal; color: #F6E7B8; background: radial-gradient(circle at 35% 30%, #C8404F, #7C1826); box-shadow: inset 0 1px 1px rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.35); }
.book-label b { font: 600 .86rem/1 var(--serif); font-style: italic; text-shadow: 0 1px 0 rgba(255,245,210,.6); }
.book-label:hover b, .book-label.is-hot b { color: #5A0F1A; }
.book-label.is-hot, .book-label:focus-visible { filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 2px 0 #6E4F18, 0 0 0 3px rgba(230,200,120,.45), 0 8px 14px -4px rgba(var(--shadow-rgb), .55); }
.book-label.is-away { opacity: 0 !important; pointer-events: none; }

.vol-rows { display: grid; gap: 14px; }
.vol-row { display: grid; grid-template-columns: 64px minmax(0, 1.6fr) minmax(0, 1fr) auto auto; gap: 20px; align-items: center; padding: 16px 20px; text-align: left; width: 100%; cursor: pointer; color: var(--ink); }
.vol-row .coin { --size: 52px; }
.vol-row .v-title { font: 600 1.2rem/1.25 var(--serif); }
.vol-row .v-sub { display: block; font-size: .9rem; color: var(--ink-3); margin-top: 2px; }
.vol-row .v-main { min-width: 0; }
.vol-row .v-title { display: block; }
.vol-row .gem { white-space: normal; line-height: 1.25; }
.vol-row .v-year { font: 600 1rem/1 var(--serif); color: var(--ink-3); }
.vol-row:hover .btn { transform: translateY(-1px); filter: brightness(1.03); }

/* the reader: a leather dossier that slides in */
.reader { position: fixed; z-index: 700; inset: 0 0 0 auto; width: min(760px, 100%); display: flex; flex-direction: column; transform: translateX(104%); visibility: hidden; transition: transform .65s var(--ease), visibility 0s linear .65s; }
.reader.is-open { transform: none; visibility: visible; transition: transform .65s var(--ease), visibility 0s; }
.reader-scrim { position: fixed; inset: 0; z-index: 690; background: linear-gradient(90deg, rgba(40, 28, 12, 0) 0%, rgba(40, 28, 12, .08) 45%, rgba(40, 28, 12, .34) 100%); opacity: 0; pointer-events: none; transition: opacity .5s var(--ease); }
html.is-reading { overflow: hidden; }
.reader-scrim.is-on { opacity: 1; pointer-events: auto; }
.reader-in { flex: 1; overflow-y: auto; overscroll-behavior: contain; background: var(--parch) url("../assets/img/parchment.webp") 0 0 / 700px; box-shadow: -30px 0 60px -20px rgba(0,0,0,.45); border-left: 1px solid rgba(118,85,28,.4); padding: 18px 22px 60px; }
.reader-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.reader .cover { padding: 30px 32px; }
[tabindex="-1"]:focus { outline: none; }
.reader .cover h2 { font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.5rem); margin: 10px 0 10px; }
.reader .cover .gem-row { margin-top: 16px; }
.reader .cover-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.reader .cover-lead { font: 400 1.14rem/1.55 var(--serif); max-width: 36em; }
.reader .cover .gem { font-size: .8rem; }
.reader-note { margin: 26px 0 0; }
.facts-plate { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 4px 22px; margin-top: 26px; padding: 16px 20px; }
.facts-plate dt { font: 700 .68rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.facts-plate dd { margin: 4px 0 0; font: 500 1.02rem/1.4 var(--serif); color: var(--ink); }
.reader .milestones .small { margin: -2px 0 0; }
.reader .milestones .seal-rail { padding-top: 18px; }
.reader .milestones .seal-rail .brass-rail { top: calc(18px + 30px); left: 9%; right: 9%; }
.reader .milestones .wax { width: 64px; height: 64px; }
.reader .milestones .wax b { font-size: 1.2rem; }
.reader .milestones .seal-btn .ml { font-size: .78rem; }
.reader .milestones .seal-detail { margin-top: 16px; padding: 16px 20px; min-height: 0; }
.reader-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 26px; }
.reader .sec { margin-top: 20px; padding: 24px 26px; }
.reader .sec h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.reader .sec p { font-family: var(--serif); font-size: 1.12rem; line-height: 1.62; color: var(--ink-2); }
.reader .sec p + p { margin-top: 12px; }
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 16px; }
.figure { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.figure .coin { --size: 64px; }
.figure .coin b { font-size: 1.05rem; }
.figure span { font-size: .9rem; color: var(--ink-2); line-height: 1.35; }
.quote { margin-top: 20px; padding: 26px 30px; }
.quote p { font: italic 500 1.3rem/1.5 var(--serif); color: var(--ink); }
.quote cite { display: block; margin-top: 12px; font-style: normal; font-size: .9rem; color: var(--ink-3); }

/* 17b THE FOLIO: a case study read as a book, on laptops and desktops (js/folio.js) ------------ */
html.is-folio { overflow: hidden; }
.folio { position: fixed; inset: 0; z-index: 800; visibility: hidden; pointer-events: none; color: #F3E3C3; }
.folio.is-shown { visibility: visible; pointer-events: auto; }
.folio-backdrop { position: absolute; inset: 0; opacity: 0; background: radial-gradient(110% 90% at 50% 46%, #4A2C1F 0%, #2A190F 52%, #120A06 100%); }
.folio-canvas { position: absolute; inset: 0; }
.folio-canvas canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.folio-head, .folio-tools, .folio-turn, .folio-count, .folio-hint, .folio-tab, .folio-key { opacity: 0; pointer-events: none; transition: opacity .45s var(--ease); }
.folio.ui-on .folio-head, .folio.ui-on .folio-tools, .folio.ui-on .folio-turn, .folio.ui-on .folio-count, .folio.ui-on .folio-hint, .folio.ui-on .folio-tab, .folio.ui-on .folio-key { opacity: 1; pointer-events: auto; }
.folio-head { position: absolute; left: 28px; top: 24px; width: max(120px, calc(var(--book-l, 200px) - 92px)); }
.folio-kicker { margin: 0 0 8px; font: 700 .7rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hi); }
.folio-kicker::before { content: ""; display: block; width: 26px; height: 2px; margin-bottom: 10px; border-radius: 2px; background: linear-gradient(90deg, var(--gold), var(--gold-hi)); }
.folio-title { margin: 0; font: 600 1.28rem/1.22 var(--serif); color: #FBF3E4; text-wrap: balance; text-shadow: 0 2px 8px rgba(0,0,0,.45); outline: none; }
.folio-tools { position: absolute; right: 24px; top: 22px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.folio-turn {
  position: absolute; top: calc(var(--book-top, 0px) + (var(--book-bot, 100px) - var(--book-top, 0px)) * .78); width: 62px; height: 62px; margin-top: -31px;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer; color: var(--ink);
  background: radial-gradient(circle at 40% 30%, #FFFDF8 0%, #F1E6D0 62%, #E0CFAE 100%); border: 1px solid rgba(0,0,0,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 0 0 4px rgba(201,161,80,.6), 0 0 0 5px rgba(60,40,10,.5), 0 4px 0 #8C6A35, 0 14px 22px -6px rgba(0,0,0,.65);
  transition: opacity .45s var(--ease), transform .12s var(--ease), filter .15s var(--ease);
}
.folio-turn svg { width: 26px; height: 26px; }
.folio-turn.prev { left: calc(var(--book-l, 100px) - 98px); }
.folio-turn.next { left: calc(var(--book-r, 300px) + 36px); }
.folio-turn:hover { transform: translateY(-2px); filter: brightness(1.04); }
.folio-turn:active { transform: translateY(2px); }
.folio.ui-on .folio-turn[disabled] { opacity: .26; cursor: default; transform: none; }
.folio-count { position: absolute; right: 28px; bottom: 26px; margin: 0; font: 600 .8rem/1.3 var(--sans); letter-spacing: .06em; color: rgba(243,227,195,.86); font-variant-numeric: tabular-nums; }
.folio-hint { position: absolute; left: 28px; bottom: 26px; max-width: calc(var(--book-l, 200px) - 60px); margin: 0; font: italic 400 .92rem/1.4 var(--serif); color: rgba(243,227,195,.7); }
.folio.ui-on .folio-hint.is-gone { opacity: 0; }
.folio-tabs, .folio-keys { position: absolute; inset: 0; pointer-events: none; }
/* leather thumb tabs on the fore-edges, one per chapter */
.folio-tab {
  --l1: #5A0F1A; --l2: #962033;
  position: absolute; left: var(--x); top: var(--y); transform: translateY(-50%);
  display: flex; align-items: center; gap: 9px; height: 44px; max-width: 44px; padding: 0 12px 0 13px; overflow: hidden;
  border: 1px solid #3E0A12; border-left: 0; border-radius: 0 10px 10px 0; cursor: pointer; white-space: nowrap;
  color: #F6E3B4; background: linear-gradient(180deg, var(--l2) 0%, var(--l1) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 3px rgba(0,0,0,.25), 3px 4px 9px rgba(0,0,0,.45);
  transition: opacity .45s var(--ease), max-width .3s var(--ease-out), filter .15s var(--ease);
}
.folio-tab::after { content: ""; position: absolute; inset: 4px 4px 4px 0; border: 1px dashed rgba(230,200,120,.4); border-left: 0; border-radius: 0 7px 7px 0; pointer-events: none; }
.folio-tab b { flex: none; min-width: 18px; text-align: center; font: italic 600 1.02rem/1 var(--serif); text-shadow: 0 1px 1px rgba(0,0,0,.4); }
.folio-tab span { font: 600 .76rem/1 var(--sans); letter-spacing: .03em; opacity: 0; transition: opacity .2s var(--ease); }
.folio-tab:hover, .folio-tab:focus-visible { max-width: 240px; filter: brightness(1.08); }
.folio-tab:hover span, .folio-tab:focus-visible span { opacity: 1; }
.folio-tab.is-left { transform: translate(-100%, -50%); flex-direction: row-reverse; padding: 0 13px 0 12px; border-left: 1px solid #3E0A12; border-right: 0; border-radius: 10px 0 0 10px; }
.folio-tab.is-left::after { inset: 4px 0 4px 4px; border-left: 1px dashed rgba(230,200,120,.4); border-right: 0; border-radius: 7px 0 0 7px; }
.folio-tab.is-here { --l1: #8C6421; --l2: #E3BF6C; color: #2A1E0A; border-color: #6E4F18; }
.folio-tab.is-here b { text-shadow: 0 1px 0 rgba(255,245,210,.6); }
.folio-tab:focus-visible, .folio-turn:focus-visible, .folio-key:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 3px; }
/* the keys printed on the closing page are real buttons laid over the print */
.folio-key { position: absolute; border: 0; padding: 0; border-radius: 14px; cursor: pointer; color: transparent; background: transparent; font-size: 1px; }
.folio-key:hover { background: rgba(255,250,235,.12); box-shadow: 0 0 0 3px rgba(214,170,80,.75), 0 0 18px rgba(214,170,80,.35); }
/* stacked layout, when the screen leaves no room beside the book */
.folio[data-layout="stack"] .folio-head { left: 20px; top: 12px; width: 52vw; }
.folio[data-layout="stack"] .folio-kicker::before { display: none; }
.folio[data-layout="stack"] .folio-title { font-size: 1rem; }
.folio[data-layout="stack"] .folio-tools { top: 12px; right: 18px; flex-direction: row; }
.folio[data-layout="stack"] .folio-turn { top: auto; bottom: 10px; margin: 0; width: 52px; height: 52px; }
.folio[data-layout="stack"] .folio-turn.prev { left: calc(50% - 130px); }
.folio[data-layout="stack"] .folio-turn.next { left: calc(50% + 78px); }
.folio[data-layout="stack"] .folio-count { right: auto; left: 50%; bottom: 28px; transform: translateX(-50%); }
.folio[data-layout="stack"] .folio-hint { display: none; }

/* 17c THE MANUSCRIPTS (4 to 5 October 2026): rolled parchments on a leather reading desk, and the reader
   that unrolls one across the whole page (js/manuscripts.js, js/data/manuscripts.js) ------------------ */
@property --tilt { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --rx { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --ry { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.scriptorium {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 50px; padding: clamp(34px, 3.6vw, 54px) clamp(28px, 3.2vw, 48px) clamp(36px, 3.6vw, 56px);
  border-radius: var(--r-lg); overflow: hidden; perspective: 1200px;
  background: radial-gradient(90% 70% at 50% 0%, rgba(230, 190, 110, .22), transparent 60%), linear-gradient(180deg, #4A3523 0%, #33241A 48%, #241912 100%);
  box-shadow: inset 0 0 0 1px rgba(230, 200, 120, .22), inset 0 0 0 8px #2A1D13, inset 0 0 0 9px rgba(230, 200, 120, .35), inset 0 40px 60px -40px rgba(0,0,0,.6), 0 2px 0 #1C130D, 0 24px 44px -20px rgba(var(--shadow-rgb), .7);
}
.scriptorium::before { content: ""; position: absolute; inset: 0; opacity: .14; background: repeating-linear-gradient(115deg, rgba(255,255,255,.5) 0 1px, transparent 1px 7px), repeating-linear-gradient(25deg, rgba(0,0,0,.4) 0 1px, transparent 1px 9px); pointer-events: none; }
.scriptorium::after { content: ""; position: absolute; left: 9px; right: 9px; top: 9px; height: 10px; border-radius: 0 0 6px 6px; background: linear-gradient(180deg, #F7E4A8 0%, #D9B25F 30%, #9C7228 58%, #C9A052 80%, #E8CC86 100%); box-shadow: 0 2px 0 #6E4F18, 0 6px 10px -2px rgba(0,0,0,.6); pointer-events: none; }
.manuscript {
  position: relative; z-index: 1; display: grid; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--ink);
  --tilt: var(--t0); --rx: 0deg; --ry: 0deg; transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) rotate(var(--tilt));
  transition: --tilt .45s var(--ease-out), --rx .35s var(--ease-out), --ry .35s var(--ease-out), filter .45s var(--ease), opacity .4s var(--ease);
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .5));
  animation: ms-float calc(5.4s + var(--i) * .55s) ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.15s);
}
.manuscript:hover, .manuscript:focus-visible { --tilt: 0deg; filter: drop-shadow(0 30px 26px rgba(0, 0, 0, .6)); z-index: 2; }
.manuscript:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 8px; border-radius: 14px; }
.manuscript.is-away { opacity: .18; filter: grayscale(.6) drop-shadow(0 0 0 transparent); pointer-events: none; animation-play-state: paused; }
.manuscript.is-back { animation: ms-float calc(5.4s + var(--i) * .55s) ease-in-out infinite alternate, ms-back .7s var(--ease-out); }
@keyframes ms-float { from { translate: 0 0; } to { translate: 0 -12px; } }
@keyframes ms-back { from { scale: 1.06; filter: drop-shadow(0 0 24px rgba(255, 220, 140, .9)); } to { scale: 1; } }
/* the rods: turned walnut with brass finials */
.ms-rod { position: relative; z-index: 3; display: block; height: 22px; margin: 0 -12px; border-radius: 11px; background: linear-gradient(180deg, #8A5B36 0%, #5C3A20 30%, #3B2312 55%, #6A4426 80%, #8E6038 100%); box-shadow: 0 3px 4px rgba(0,0,0,.5), inset 0 1px 0 rgba(255, 220, 170, .35), inset 0 -1px 0 rgba(0,0,0,.4); }
.ms-rod::before { content: ""; position: absolute; left: 24px; right: 24px; top: 9px; height: 2px; background: rgba(0,0,0,.28); border-radius: 2px; }
.ms-rod .finial { position: absolute; top: -3px; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #FFF4C8 0%, #E9C874 24%, #C29440 56%, #8C6421 84%, #6E4C15 100%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), inset 0 -3px 4px rgba(0,0,0,.3), 0 2px 3px rgba(0,0,0,.5); }
.ms-rod .finial.l { left: -7px; } .ms-rod .finial.r { right: -7px; }
.ms-rod.top { margin-bottom: -9px; } .ms-rod.bottom { margin-top: -9px; }
.ms-face {
  position: relative; z-index: 1; display: grid; gap: 10px; padding: 26px 24px 18px; min-height: 236px;
  background: #F1E7D0 url("../assets/img/parchment.webp") center / 560px; border-left: 1px solid rgba(118, 85, 28, .35); border-right: 1px solid rgba(118, 85, 28, .35);
  box-shadow: inset 0 22px 22px -18px rgba(60, 40, 10, .5), inset 0 -22px 22px -18px rgba(60, 40, 10, .5), inset 0 0 44px rgba(120, 90, 40, .1);
}
.ms-face::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.18) 45%, transparent 60%); translate: -110% 0; transition: translate .9s var(--ease); pointer-events: none; }
.manuscript:hover .ms-face::after { translate: 110% 0; }
.ms-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-right: 54px; }
/* the desk sits straight under the page head: one heading for the six scrolls */
.section.manuscripts { padding-top: 26px; }
.desk-label { display: flex; margin: 0 0 14px; }
/* phones: which scroll is in front, and keys to move along the row (js/manuscripts.js) */
.ms-marker { display: none; }
.ms-title { font: 600 1.32rem/1.2 var(--serif); color: var(--ink); padding-right: 54px; }
.ms-deck { font: 400 .93rem/1.5 var(--sans); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ms-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: auto; padding-top: 6px; }
.manuscript:hover .ms-foot .btn, .manuscript:focus-visible .ms-foot .btn { transform: translateY(-1px); filter: brightness(1.04); }
/* the sealing: a red ribbon from the top rod, a wax seal at its end; the seal cracks in two when the scroll is opened */
.ms-sealing { position: absolute; z-index: 4; right: 22px; top: 8px; width: 60px; height: 96px; pointer-events: none; }
.ms-sealing .ribbon { position: absolute; left: 50%; top: 0; width: 12px; height: 62px; margin-left: -6px; background: linear-gradient(90deg, #7C1826, #C8404F 45%, #8E1C2C); box-shadow: 0 2px 4px rgba(0,0,0,.35); transform-origin: top center; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%); }
.ms-seal { position: absolute; left: 50%; top: 40px; width: 56px; height: 56px; margin-left: -28px; display: grid; place-items: center; filter: drop-shadow(0 4px 4px rgba(0,0,0,.45)); }
.ms-seal .half { position: absolute; inset: 0; }
.ms-seal .half img { width: 100%; height: 100%; object-fit: contain; }
.ms-seal .half.l { clip-path: polygon(0 0, 54% 0, 46% 100%, 0 100%); }
.ms-seal .half.r { clip-path: polygon(54% 0, 100% 0, 100% 100%, 46% 100%); }
.ms-seal b { position: relative; font: 700 1.1rem/1 var(--serif); background: linear-gradient(180deg, #FFF1BF 0%, #E7C271 45%, #B98A36 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(60,8,14,.75)); }
.manuscript.is-breaking .ms-seal .half.l { animation: crack-l .62s cubic-bezier(.3,.2,.3,1) both; }
.manuscript.is-breaking .ms-seal .half.r { animation: crack-r .62s cubic-bezier(.3,.2,.3,1) both; }
.manuscript.is-breaking .ms-seal b { animation: ms-fade .3s both; }
.manuscript.is-breaking .ribbon { animation: ribbon-drop .7s var(--ease) both; }
.manuscript.is-back .ms-seal { animation: reseal .6s var(--ease-out) both; }
.manuscript.is-back .ribbon { animation: ms-fade-in .5s var(--ease-out) both; }
@keyframes crack-l { 30% { transform: translate(-3px, 2px) rotate(-6deg); opacity: 1; } to { transform: translate(-24px, 34px) rotate(-38deg); opacity: 0; } }
@keyframes crack-r { 30% { transform: translate(3px, 2px) rotate(6deg); opacity: 1; } to { transform: translate(26px, 36px) rotate(40deg); opacity: 0; } }
@keyframes ribbon-drop { to { transform: rotate(34deg) scaleY(1.1); opacity: 0; } }
@keyframes reseal { from { transform: scale(1.5) rotate(-30deg); opacity: 0; } 60% { transform: scale(.92); opacity: 1; } to { transform: scale(1) rotate(0); } }
@keyframes ms-fade { to { opacity: 0; } }
@keyframes ms-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* the scroll in flight between the desk and the page */
.ms-flyer { position: fixed; z-index: 780; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; pointer-events: none; filter: drop-shadow(0 30px 30px rgba(0,0,0,.65)); overflow: visible; }
.ms-flyer .ms-face { min-height: 0; padding: 4px 18px; overflow: hidden; justify-items: center; align-content: center; }
.ms-flyer .ms-title { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; opacity: .7; }
/* the reader: the manuscript unrolled across the page, on the leather desk */
html.is-manuscript { overflow: hidden; }
.ms-reader { position: fixed; inset: 0; z-index: 760; opacity: 0; transition: opacity .45s var(--ease); }
.ms-reader.is-open { opacity: 1; }
.ms-desk { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 0%, #3E2D1D 0%, #241A12 55%, #170F0A 100%); }
.ms-desk::before { content: ""; position: absolute; inset: 0; opacity: .1; background: repeating-linear-gradient(115deg, rgba(255,255,255,.5) 0 1px, transparent 1px 7px); }
.ms-desk::after { content: ""; position: absolute; inset: 14px; border: 1px dashed rgba(230, 200, 120, .28); border-radius: 18px; pointer-events: none; }
.ms-bar { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px clamp(16px, 2.4vw, 30px) 18px; background: linear-gradient(180deg, rgba(23, 15, 10, .92), rgba(23, 15, 10, 0)); pointer-events: none; }
.ms-bar > * { pointer-events: auto; }
.ms-bar-keys { display: flex; gap: 8px; }
.ms-progress { position: absolute; left: clamp(16px, 2.4vw, 30px); right: clamp(16px, 2.4vw, 30px); bottom: 6px; height: 4px; border-radius: 2px; background: rgba(230, 200, 120, .22); pointer-events: none; }
.ms-progress i { display: block; height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, #B98A36, #F3DC9A); box-shadow: 0 0 8px rgba(243, 220, 154, .6); transition: width .15s linear; }
.ms-scroll { position: absolute; inset: 0; z-index: 2; overflow-y: auto; overscroll-behavior: contain; padding: 76px 16px 70px; outline: none; }
.ms-unroller { position: fixed; z-index: 766; height: 30px; pointer-events: none; }
.ms-unroller[hidden] { display: none; }
.ms-unroller .ms-rod { height: 30px; margin: 0 -16px; border-radius: 15px; }
.ms-unroller .ms-rod .finial { width: 38px; height: 38px; top: -4px; }
.ms-unroller::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 60px; background: linear-gradient(180deg, rgba(0,0,0,.45), transparent); filter: blur(6px); z-index: -1; }
.ms-sheet { position: relative; max-width: 900px; margin: 0 auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,.55)); }
.ms-sheet .ms-rod { height: 30px; margin-inline: -16px; border-radius: 15px; }
.ms-sheet .ms-rod .finial { width: 38px; height: 38px; top: -4px; }
.ms-sheet .ms-rod.top { margin-bottom: -12px; }
.ms-sheet .ms-rod.bottom { margin-top: -12px; }
.ms-body {
  position: relative; z-index: 1; padding: clamp(34px, 5vw, 64px) clamp(24px, 6vw, 72px) clamp(30px, 4vw, 54px);
  background: #F1E7D0 url("../assets/img/parchment.webp") center top / 700px; border-left: 1px solid rgba(118, 85, 28, .35); border-right: 1px solid rgba(118, 85, 28, .35);
  box-shadow: inset 0 28px 28px -24px rgba(60, 40, 10, .4), inset 0 -28px 28px -24px rgba(60, 40, 10, .4), inset 0 0 70px rgba(120, 90, 40, .08);
}
.ms-body::before, .ms-body::after { content: ""; position: absolute; top: 0; bottom: 0; width: 18px; pointer-events: none; background: linear-gradient(90deg, rgba(60, 40, 10, .18), transparent); }
.ms-body::before { left: 0; } .ms-body::after { right: 0; transform: scaleX(-1); }
/* the text inks in as it comes into view */
.ms-body [data-ink] { opacity: 0; translate: 0 14px; filter: blur(3px); transition: opacity .75s var(--ease-out), translate .75s var(--ease-out), filter .75s var(--ease-out); }
.ms-body [data-ink].is-inked { opacity: 1; translate: 0 0; filter: blur(0); }
.ms-head { display: grid; gap: 10px; justify-items: start; }
.ms-head h2 { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.2rem); margin-top: 2px; }
.ms-r-deck { font: italic 500 1.22rem/1.5 var(--serif); color: var(--sepia); max-width: 34em; }
.ms-glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 22px; margin: 28px 0 0; padding: 18px 22px; }
.ms-glance dt { font: 700 .66rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.ms-glance dd { margin: 4px 0 0; font: 500 1rem/1.4 var(--serif); color: var(--ink); }
.ms-plate { float: right; --size: 170px; margin: 30px -10px 10px 26px; shape-outside: circle(50%); }
.ms-sec { margin-top: 30px; }
.ms-sec h3 { display: flex; align-items: center; gap: 12px; font-size: 1.42rem; margin-bottom: 10px; }
.ms-sec h3::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--gold), var(--gold-hi)); flex: none; }
.ms-sec p { font-family: var(--serif); font-size: 1.14rem; line-height: 1.66; color: var(--ink-2); max-width: 44em; }
.ms-sec p + p { margin-top: 12px; }
.ms-sec p.initial::first-letter { float: left; font: 600 3.6rem/.82 var(--serif); color: var(--red); padding: 7px 8px 0 0; }
.ms-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; max-width: 44em; }
.ms-list li { position: relative; padding-left: 30px; font-family: var(--serif); font-size: 1.1rem; line-height: 1.5; color: var(--ink-2); }
.ms-list li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #FFF4C8 0%, #E9C874 30%, #C29440 65%, #8C6421 100%); box-shadow: 0 1px 0 #6E4C15; }
.ms-charts { clear: both; margin-top: 28px; }
.ms-charts .kicker { color: var(--gold-deep); }
.ms-chart-intro { font: italic 500 1.08rem/1.5 var(--serif); color: var(--sepia); max-width: 40em; margin-top: 6px; }
.ms-charts .chart:first-of-type { margin-top: 14px; }
.ms-sec .chart { margin-top: 18px; }
.ms-lesson { clear: both; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; margin-top: 36px; padding: 22px 26px; border-radius: var(--r); background: linear-gradient(180deg, #FFF9E6 0%, #FBF0D2 60%, #F5E5BE 100%); border: 1px solid rgba(160, 120, 44, .6); box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .55), inset 0 0 0 6px rgba(181, 138, 56, .4), 0 1px 0 #D9C08A, 0 2px 0 #CDB078, 0 3px 0 #BFA066, 0 14px 24px -14px rgba(var(--shadow-rgb), .5); }
.ms-lesson .wax { width: 84px; height: 84px; }
.ms-lesson .kicker { color: var(--gold-deep); }
.ms-lesson-t { font: italic 500 1.28rem/1.45 var(--serif); color: var(--ink); margin-top: 6px; }
.ms-sources { margin-top: 18px; font-size: .86rem; color: var(--ink-3); }
.ms-sources .label { display: block; margin-bottom: 4px; }
.ms-sources ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ms-sources li { padding-left: 14px; position: relative; }
.ms-sources li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
/* the figures: three numbers struck as coins, under the glance plate */
.ms-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.ms-figures .figure { padding: 12px 14px; }
.ms-figures .figure .coin { --size: 66px; }
.ms-figures .figure .coin.long b { font-size: .82rem; letter-spacing: -.01em; text-align: center; padding: 0 4px; }
.ms-figures .figure span:last-child { font-size: .84rem; }
.ms-limits h3::before { background: linear-gradient(90deg, var(--red), #C8404F); }
.ms-limits p { color: var(--ink-3); font-size: 1.04rem; }
/* a company's name, scratched out in sepia ink */
.scratched { display: inline-block; width: 5.4em; height: 1.05em; vertical-align: -.16em; margin: 0 .05em; border-radius: 3px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'><rect x='2' y='4' width='116' height='16' rx='6' fill='%235C4631' opacity='.14'/><g fill='none' stroke='%234A3826' stroke-width='3.3' stroke-linecap='round' opacity='.82'><path d='M3 13c12-10 22 10 34 1s22-11 34-2 24 10 36-2 10 2 10 2'/><path d='M4 8c14 10 24-9 36 0s22 9 34 1 22-9 36 1 8 2 8 2'/><path d='M3 17c10-10 22 8 34-1s24-9 36 0 22 7 34-2 10 1 10 1'/><path d='M6 5c14 5 20 15 32 11s22-13 36-5 22 11 34 3 8-3 8-3'/><path d='M5 19c16-3 20-15 34-11s20 12 36 6 20-9 34-2 8 4 8 4'/><path d='M8 11h104'/></g></svg>") center / 100% 100% no-repeat; }
.ms-glance dd .scratched { width: 4.4em; }
.ms-foot-keys { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.ms-foot-keys .btn:last-child { margin-left: auto; }
/* the LDV case studies head, above the vitrine */
.ldv-cases { padding-bottom: 0; }
.ldv-cases .section-head { margin-bottom: 0; }
.ldv-cases .aside { display: flex; align-items: center; gap: 16px; }
.ldv-cases .aside .label { max-width: 9em; }
/* the confidentiality mark (Session 11): the gold seal stamped CONFIDENTIAL and one line, worded differently on each page; sized so the word can be read */
.conf-mark { display: flex; align-items: center; gap: 14px; margin-top: 16px; font: italic 500 .98rem/1.4 var(--serif); color: var(--sepia); }
.conf-mark .wax { width: 72px; height: 72px; flex: none; filter: drop-shadow(0 2px 2px rgba(var(--shadow-rgb), .3)); }
.placard .conf-mark { margin: -8px 0 20px; }
.agreement .conf-mark { margin-top: 12px; font-size: .92rem; justify-content: center; text-align: left; max-width: 34em; margin-inline: auto; }
.section-head .conf-mark { margin: 0 0 6px; font-size: .92rem; }
.foot-conf { margin-top: 10px; font-size: .9rem; color: rgba(243, 235, 221, .72); }
.foot-conf .wax { width: 52px; height: 52px; filter: none; }
.who-text p.conf-mark.conf-mark { margin-top: 0; color: var(--sepia); font-size: 1rem; }
.info-list dt.conf-dt { display: flex; align-items: center; gap: 8px; }
.info-list dt.conf-dt .wax { width: 52px; height: 52px; flex: none; margin: -4px 0; filter: drop-shadow(0 2px 2px rgba(var(--shadow-rgb), .3)); }
/* the key that opens a single manuscript (History) */
.ms-opener { position: relative; max-width: 540px; display: inline-grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 20px 14px 16px; border-radius: var(--r); border: 1px solid rgba(118, 85, 28, .45); background: linear-gradient(180deg, #FFFDF6, #F3E8D0); box-shadow: inset 0 1px 0 #fff, 0 1px 0 #E7DCC7, 0 2px 0 #DCCDB2, 0 3px 0 #CFBD9C, 0 4px 0 #C2AD88, 0 10px 16px -6px rgba(var(--shadow-rgb), .4); cursor: pointer; text-align: left; color: var(--ink); font: inherit; transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.ms-opener:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 #fff, 0 1px 0 #E7DCC7, 0 2px 0 #DCCDB2, 0 3px 0 #CFBD9C, 0 4px 0 #C2AD88, 0 18px 24px -8px rgba(var(--shadow-rgb), .5); }
.ms-opener:active { transform: translateY(3px); box-shadow: inset 0 2px 4px rgba(0,0,0,.2); }
.ms-opener .ms-mini { position: relative; width: 74px; display: grid; }
.ms-opener .ms-mini .ms-rod { height: 12px; margin: 0 -6px; border-radius: 6px; }
.ms-opener .ms-mini .ms-rod .finial { width: 16px; height: 16px; top: -2px; }
.ms-opener .ms-mini .ms-rod.top { margin-bottom: -5px; } .ms-opener .ms-mini .ms-rod.bottom { margin-top: -5px; }
.ms-opener .ms-mini .ms-face { min-height: 52px; padding: 8px; gap: 4px; }
.ms-opener .ms-mini .ms-face i { display: block; height: 2px; border-radius: 1px; background: rgba(74, 56, 38, .4); }
.ms-opener .ms-mini .ms-face i:nth-child(2) { width: 70%; } .ms-opener .ms-mini .ms-face i:nth-child(4) { width: 55%; }
.ms-opener .ms-mini .ms-sealing { right: 4px; top: 2px; transform: scale(.5); transform-origin: top right; }
.ms-opener b { display: block; font: 600 1.12rem/1.25 var(--serif); }
.ms-opener small { display: block; margin-top: 3px; font: 400 .86rem/1.4 var(--sans); color: var(--ink-2); }
.ms-opener.is-away .ms-mini { opacity: .25; }
.ms-opener.is-breaking .ms-seal .half.l { animation: crack-l .62s cubic-bezier(.3,.2,.3,1) both; }
.ms-opener.is-breaking .ms-seal .half.r { animation: crack-r .62s cubic-bezier(.3,.2,.3,1) both; }
.ms-opener.is-breaking .ms-seal b { animation: ms-fade .3s both; }
.ms-opener.is-breaking .ribbon { animation: ribbon-drop .7s var(--ease) both; }
.ms-opener.is-back .ms-seal { animation: reseal .6s var(--ease-out) both; }
.ms-opener.is-back .ribbon { animation: ms-fade-in .5s var(--ease-out) both; }

/* 17d THE CHARTS (5 October 2026): small interactive SVG charts inside the manuscripts (js/charts.js) ----- */
.chart { position: relative; margin-top: 30px; padding: 20px 22px 16px; border-radius: var(--r); background: linear-gradient(180deg, rgba(255, 251, 240, .78), rgba(247, 238, 218, .78)); border: 1px solid rgba(118, 85, 28, .32); box-shadow: inset 0 2px 6px rgba(var(--shadow-rgb), .14), inset 0 0 0 1px rgba(255,255,255,.5), 0 1px 0 rgba(255,255,255,.7); }
.chart + .chart { margin-top: 18px; }
.chart-head { display: grid; gap: 2px; }
.chart-head .kicker { color: var(--gold-deep); font-size: .66rem; }
.chart-title { font: 600 1.18rem/1.25 var(--serif); color: var(--ink); margin: 0; }
.chart-unit { font: 400 .84rem/1.4 var(--sans); color: var(--ink-3); }
.chart-keys { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chart-key { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px 4px 8px; border-radius: 999px; border: 1px solid rgba(118, 85, 28, .35); background: linear-gradient(180deg, #FFFDF8, #EFE3CC); font: 600 .78rem/1.2 var(--sans); color: var(--ink); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 0 #D7C5A3, 0 2px 0 #C9B38B, 0 4px 6px -3px rgba(var(--shadow-rgb), .35); transition: transform .12s var(--ease), box-shadow .12s var(--ease), opacity .2s var(--ease); }
.chart-key i { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.75) 0 18%, rgba(255,255,255,0) 50%), var(--c); box-shadow: 0 1px 1px rgba(0,0,0,.3); }
.chart-key[aria-pressed="false"] { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(0,0,0,.18); opacity: .62; }
.chart-key[aria-pressed="false"] i { filter: grayscale(1); }
/* the plaque is held at the height of its tallest reading (charts.js), so a short reading sits in the middle, or at the top on a phone */
.chart-readout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; align-content: center; margin-top: 14px; padding: 10px 14px; }
.chart-readout .coin.long { --size: 54px; }
.chart-readout .coin.long b { font-size: 1rem; }
.chart-readout p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font: 400 .92rem/1.4 var(--sans); color: var(--ink-2); }
.chart-readout p + p { margin-top: 3px; }
.chart-readout p i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.chart-readout-name { display: inline-flex; align-items: center; gap: 7px; }
.chart-readout p b { font: 600 1.14rem/1.2 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.chart-readout p small { color: var(--ink-3); }
.chart-readout p em { flex-basis: 100%; font-style: italic; color: var(--ink-3); font-size: .86rem; }
.chart-readout-name { font-weight: 600; color: var(--ink-2); }
@media (max-width: 720px) { .chart-readout { grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; } .chart-readout .coin.long { --size: 46px; } .chart-tip { max-width: 180px; font-size: .76rem; } }
.chart-readout .big { font: 600 1.3rem/1.2 var(--serif); color: var(--ink); }
.chart-stage { position: relative; margin-top: 10px; }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; font-family: var(--sans); }
.ch-grid { stroke: rgba(118, 85, 28, .22); stroke-dasharray: 3 5; }
.ch-axis { stroke: rgba(74, 56, 38, .55); stroke-width: 1; }
.ch-lbl { font-size: 11px; fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.ch-lbl.v { font-size: 11px; font-weight: 600; fill: var(--ink-2); }
.ch-lbl.band { font-size: 12px; font-weight: 600; fill: #fff; paint-order: stroke; stroke: rgba(40, 24, 8, .45); stroke-width: 2px; }
.ch-area { opacity: .13; }
.ch-line { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ch-line.gap { stroke-dasharray: 4 6; }
.ch-pt { stroke: #FBF4E4; stroke-width: 1.5; }
.ch-bar { stroke: #FBF4E4; stroke-width: 1; }
.ch-band { opacity: .88; }
.ch-cross { stroke: rgba(74, 56, 38, .6); stroke-dasharray: 2 4; }
.ch-dot { stroke: #FBF4E4; stroke-width: 2; }
.ch-event-line { stroke: rgba(161, 34, 50, .35); stroke-dasharray: 2 4; }
.ch-event-dot { fill: var(--red); stroke: #FBF4E4; stroke-width: 2; }
.ch-track { fill: #B8955A; stroke: #6E4F18; stroke-width: 1; }
.ch-handle { cursor: grab; outline: none; touch-action: pan-y; }
.ch-handle-hit { fill: transparent; }
.ch-handle:active { cursor: grabbing; }
.ch-handle-coin { fill: #C29440; stroke: #6E4C15; stroke-width: 1.5; filter: drop-shadow(0 2px 2px rgba(40, 25, 5, .5)); }
.ch-handle-gem { fill: var(--red); stroke: rgba(255, 245, 215, .75); stroke-width: 1.5; }
.ch-handle-line { stroke: rgba(161, 34, 50, .55); stroke-dasharray: 3 4; pointer-events: none; }
.ch-handle:focus-visible .ch-handle-coin { stroke: var(--blue); stroke-width: 3; }
.chart-tip { position: absolute; z-index: 3; min-width: 120px; max-width: 240px; padding: 8px 12px; border-radius: 10px; background: linear-gradient(180deg, #FFFDF6, #F6ECD6); border: 1px solid rgba(118, 85, 28, .4); box-shadow: 0 6px 14px -6px rgba(var(--shadow-rgb), .5), inset 0 1px 0 #fff; font: 400 .82rem/1.4 var(--sans); color: var(--ink-2); pointer-events: none; }
.chart-tip b { display: block; font: 600 .98rem/1.2 var(--serif); color: var(--ink); margin-bottom: 3px; }
.chart-tip span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.chart-tip span i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); align-self: center; }
.chart-tip em { font-style: normal; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.chart-tip small { flex-basis: 100%; color: var(--ink-3); }
.chart-foot { display: grid; gap: 2px; margin-top: 10px; font: 400 .78rem/1.45 var(--sans); color: var(--ink-3); }
.chart-source::before { content: "Recorded by "; }
.chart-table { margin-top: 8px; font-size: .8rem; color: var(--ink-3); }
.chart-table summary { cursor: pointer; color: var(--blue); }
.chart-table table { width: 100%; margin-top: 8px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.chart-table th, .chart-table td { padding: 4px 8px; text-align: left; border-bottom: 1px solid rgba(118, 85, 28, .2); }
/* the draw-in, when the chart first comes into view */
.chart.is-pre .ch-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.chart.is-pre .ch-pt, .chart.is-pre .ch-area, .chart.is-pre .ch-event { opacity: 0; }
.chart.is-pre .ch-bar, .chart.is-pre .ch-band { transform: scaleY(0); transform-box: fill-box; transform-origin: bottom; }
.chart.is-pre .ch-band { transform: scaleX(0); transform-origin: left; }
.chart.is-drawn .ch-line { stroke-dasharray: 1; animation: ch-draw .5s var(--ease-out) both; animation-delay: calc(var(--d) * .07s); }
.chart.is-drawn .ch-line.gap { animation-name: ch-draw-gap; }
.chart.is-drawn .ch-pt { animation: ch-fade .4s var(--ease-out) both; animation-delay: calc(.2s + var(--d) * .07s); }
.chart.is-drawn .ch-area { animation: ch-area 1s var(--ease-out) both .4s; }
.chart.is-drawn .ch-event { animation: ch-fade .5s var(--ease-out) both 1s; }
.chart.is-drawn .ch-bar { transform-box: fill-box; transform-origin: bottom; animation: ch-grow .6s var(--ease-out) both; animation-delay: calc(var(--d) * .06s); }
.chart.is-drawn .ch-band { transform-box: fill-box; transform-origin: left; animation: ch-grow-x .7s var(--ease-out) both; animation-delay: calc(var(--d, 0) * .1s); }
@keyframes ch-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ch-draw-gap { from { stroke-dasharray: 1; stroke-dashoffset: 1; } 99% { stroke-dasharray: 1; stroke-dashoffset: 0; } to { stroke-dasharray: 4 6; stroke-dashoffset: 0; } }
@keyframes ch-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ch-area { from { opacity: 0; } to { opacity: .13; } }
@keyframes ch-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ch-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 18 HISTORY: THE LEONARDO COLLECTION -------------------------------------------------------- */
.history-hero { position: relative; min-height: calc(100svh - var(--top-h)); display: grid; place-items: center; padding: 40px 0 70px; overflow: hidden; }
.history-hero .sheet { position: absolute; inset: 0; background: url("../assets/img/sketch-sheet.webp") center / cover no-repeat; opacity: .92; }
.history-hero .sheet::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 50%, rgba(243,235,221,.2), rgba(243,235,221,0) 60%, rgba(var(--shadow-rgb), .18) 100%); }
.history-hero .placard { position: relative; z-index: 1; text-align: center; width: min(660px, 92vw); }
.history-hero .placard .kicker { justify-content: center; }
.history-hero .placard .lead { margin-inline: auto; }
.hero-keys { justify-content: center; margin-top: 22px; }
.hero-object { position: absolute; right: -92px; bottom: -58px; width: 196px; height: auto; transform: rotate(-8deg); filter: drop-shadow(0 18px 16px rgba(var(--shadow-rgb), .45)); pointer-events: none; }

/* why Leonardo: the portrait and the reason */
.why { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 34px; align-items: center; }
.gilt-frame.portrait { aspect-ratio: auto; margin: 0 0 44px; }
.gilt-frame.portrait .canvas-in { height: auto; display: block; }
.gilt-frame.portrait img { display: block; width: 100%; height: auto; }
.gilt-frame.portrait figcaption { position: absolute; left: 0; right: 0; top: calc(100% + 10px); font-size: .78rem; line-height: 1.4; color: var(--ink-3); }
.why-text h2 { margin: 12px 0 14px; }
.why-text p + p { margin-top: 14px; }
.why-text .lead { font-family: var(--serif); font-size: 1.22rem; line-height: 1.55; color: var(--ink); }

/* the exhibition hall: a vitrine and the chapter's placard */

.section.hall-section { padding-top: 28px; }
.hall { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 22px; height: clamp(440px, calc(100svh - var(--top-h) - 150px), 640px); }
.hall-stage { position: relative; height: 100%; }
.hall-stage .stage-canvas { cursor: grab; }
.hall-stage.is-dragging .stage-canvas { cursor: grabbing; }
.hall-top { position: absolute; z-index: 6; top: 16px; left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; pointer-events: none; }
.hall-top > * { pointer-events: auto; }
.seg { display: flex; gap: 6px; }
.seg .btn[aria-pressed="true"], .ch-filters .gem[aria-pressed="true"] { transform: translateY(2px); }
.seg .btn[aria-pressed="true"] { box-shadow: inset 0 2px 4px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.3), 0 1px 2px rgba(var(--shadow-rgb), .3); background: linear-gradient(180deg, #EFE3CC, #E4D3B3); color: var(--red-deep); }
.hall-bottom { position: absolute; z-index: 6; left: 18px; right: 18px; bottom: 16px; display: grid; gap: 10px; pointer-events: none; }
.hall-bottom > * { pointer-events: auto; }
.hall-caption { justify-self: start; max-width: 62ch; padding: 6px 11px; border-radius: 8px; font: italic 400 .84rem/1.4 var(--serif); color: var(--ink-2); background: rgba(255, 253, 247, .8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 1px 0 var(--edge2); }
.hall-tools { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hall-stage.is-source .hall-tools .key-row, .hall-stage.is-source #demo { visibility: hidden; }
.hall-stage.is-source .hall-caption { display: none; }
.source-view { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: 10px; padding: 66px 28px 64px; background: var(--parch) url("../assets/img/parchment.webp") center / 700px; border-radius: inherit; }
.source-view .mount { display: contents; }
.source-view img { width: auto; height: auto; max-width: 100%; max-height: 100%; padding: 12px; border-radius: 6px; background: conic-gradient(from 200deg, #F8E6AE, #C3933F 18%, #7A5920 32%, #E3BF6C 48%, #9C7228 64%, #F6E1A6 80%, #B58A38 92%, #F8E6AE); box-shadow: inset 0 0 0 1px rgba(255,245,210,.6), 0 2px 0 #6E4F18, 0 16px 26px -10px rgba(var(--shadow-rgb), .55); }
.source-view figcaption { max-width: 70ch; text-align: center; font: italic 400 .84rem/1.4 var(--serif); color: var(--ink-2); }
.chapter-card { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; }
.ch-top { display: flex; align-items: center; gap: 14px; }
.ch-top .coin { --size: 64px; }
.chapter-card h2 { font-size: clamp(1.5rem, 1.05rem + 1.1vw, 2.1rem); margin: 0; }
.chapter-card h2:focus { outline: none; }
.ch-sub { font: italic 500 1.08rem/1.4 var(--serif); color: var(--gold-deep); }
.ch-sum { color: var(--ink-2); line-height: 1.55; }
.perspective { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; }
.perspective img { width: 42px; height: 42px; transform: rotate(-8deg); filter: drop-shadow(0 3px 3px rgba(var(--shadow-rgb), .35)); }
.perspective .label { color: var(--red); }
.perspective p:last-child { margin-top: 3px; font: 500 .96rem/1.5 var(--serif); color: var(--ink); }
.ch-keys { padding-top: 2px; justify-content: space-between; }
.chapter-card .perspective { margin-top: auto; }
.ch-count { font: 600 .8rem/1 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.chapter-card.is-changing > * { animation: detail-in .45s var(--ease-out) both; }

/* the chapter rail: twenty coins on a brass rail */
.chapter-rail { margin-top: 16px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; }
.rail-track { overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.rail-track::-webkit-scrollbar { display: none; }
.rail-coins { position: relative; display: flex; justify-content: space-between; gap: 8px; min-width: max-content; width: 100%; padding: 8px 6px 14px; }
.rail-coins::before, .rail-coins::after { content: ""; position: absolute; left: 24px; top: 20px; height: 12px; border-radius: 7px; }
.rail-coins::before { right: 24px; background: linear-gradient(180deg, #F7E4A8 0%, #D9B25F 30%, #9C7228 58%, #C9A052 80%, #E8CC86 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 0 #6E4F18; }
.rail-coins::after { width: calc((100% - 48px) * var(--fill, 0)); background: linear-gradient(180deg, #D6505F 0%, #A12232 55%, #7C1826 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 0 #4E0D17; transition: width .6s var(--ease); }
.rail-coin { position: relative; z-index: 1; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; border-radius: 50%; }
.rail-coin .coin { --size: 38px; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease); }
.rail-coin::after { content: ""; position: absolute; bottom: -11px; width: 6px; height: 6px; border-radius: 50%; background: var(--g, var(--gold)); box-shadow: 0 1px 0 rgba(255,255,255,.7); }
.rail-coin:hover .coin { transform: translateY(-2px); }
.rail-coin[aria-current="true"] .coin { --m1: #FFF4C8; --m2: #E9C874; --m3: #C29440; --m4: #8C6421; --m5: #6E4C15; --mt: #3A2808; transform: scale(1.2); box-shadow: inset 0 0 0 3px rgba(255,255,255,.2), inset 0 0 0 4px rgba(60,40,10,.35), 0 2px 0 #6E4C15, 0 0 0 4px rgba(230,200,120,.45), 0 6px 12px -2px rgba(40,25,5,.5); }

/* the collection: all twenty chapters */
.ch-filters { margin-bottom: 18px; }
.ch-filters .gem { cursor: pointer; }
.ch-filters .gem[aria-pressed="false"] { filter: saturate(.35) brightness(1.06); opacity: .82; }
.ch-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ch-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; color: var(--ink); text-decoration: none; }
.ch-card[hidden] { display: none; }
.ch-card .thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--parch-2); border-bottom: 1px solid var(--line); }
.ch-card .thumb img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.2) saturate(.92); transition: transform .7s var(--ease-out); }
.ch-card:hover .thumb img { transform: scale(1.05); }
.ch-card-body { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px 16px; }
.ch-card-body .coin { --size: 38px; margin-top: 2px; }
.ch-card-text b { display: block; font: 600 1.04rem/1.25 var(--serif); }
.ch-card-text small { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: .78rem; line-height: 1.3; color: var(--ink-3); }
.ch-card .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--g); }
.ch-card.is-current { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(181,138,56,.55), var(--slab-shadow); }

/* the closing and the credits */
.closing { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; padding: clamp(28px, 4vw, 48px); }
.closing h2 { font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.8rem); margin: 12px 0 14px; }
.closing p { max-width: 62ch; }
.closing p + p { margin-top: 12px; }
.credits-box summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; cursor: pointer; }
.credits-box summary::-webkit-details-marker { display: none; }
.credits-box summary b { display: block; margin-top: 4px; font: 600 1.15rem/1.3 var(--serif); }
.credits-box[open] summary .btn { font-size: 0; }
.credits-box[open] summary .btn::after { content: "Hide"; font-size: .84rem; }
.credits-in { display: grid; gap: 12px; padding: 0 24px 26px; font-size: .92rem; color: var(--ink-2); }
.credit-list { columns: 2; column-gap: 30px; margin: 6px 0 0; padding: 0; list-style: none; }
.credit-list li { break-inside: avoid; margin-bottom: 10px; font-size: .82rem; line-height: 1.45; }
.credit-list b { color: var(--ink); }

/* the chapter reader reuses the dossier; these are its extra parts */
.reader .fig { margin: 20px 0 0; display: grid; justify-items: center; gap: 10px; padding: 20px; }
.reader .fig img { width: auto; height: auto; max-width: 100%; max-height: 62vh; padding: 10px; border-radius: 6px; background: conic-gradient(from 200deg, #F8E6AE, #C3933F 18%, #7A5920 32%, #E3BF6C 48%, #9C7228 64%, #F6E1A6 80%, #B58A38 92%, #F8E6AE); box-shadow: 0 2px 0 #6E4F18, 0 14px 24px -10px rgba(var(--shadow-rgb), .5); }
.reader .fig figcaption { text-align: center; font: italic 400 .86rem/1.45 var(--serif); color: var(--ink-2); max-width: 60ch; }
.reader .fields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.reader .fields svg { width: 14px; height: 14px; color: var(--gold-deep); }
.reader .persp { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start; }
.reader .persp img { width: 56px; height: 56px; transform: rotate(-8deg); filter: drop-shadow(0 3px 3px rgba(var(--shadow-rgb), .35)); }
.reader .src-list { margin: 8px 0 0; padding-left: 1.1em; display: grid; gap: 6px; font-size: .95rem; }
.reader .related { margin-top: 14px; }
.reader .ch-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }

/* 19 SERVICES -------------------------------------------------------------------------------- */
/* three cabinets: one per side of the table on an enamel spine, and LDV's between them on a gold spine.
   The rows line up across all three (subgrid), so each pair of services meets at LDV's gear. */
.cabinets { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .78fr) minmax(0, 1fr); grid-template-rows: auto repeat(4, auto); column-gap: 20px; margin-top: 26px; }
.cabinet { display: grid; grid-row: 1 / span 5; grid-template-rows: subgrid; row-gap: 14px; }
.cab-body { grid-row: 2 / span 4; display: grid; grid-template-rows: subgrid; row-gap: 14px; }
.cab-head { display: flex; align-items: center; gap: 18px; padding: 24px 28px 24px 22px; }
.cab-head .kicker { color: var(--gold-hi); }
.cab-head h2 { font-size: clamp(1.7rem, 1.2rem + 1vw, 2.2rem); margin: 8px 0 6px; }
.cab-head p:not(.kicker) { font-size: .98rem; max-width: 30em; }
.cab-head .cab-key { margin-top: 12px; }
/* the TRL 6 key beside a line of text, on How It Works and About */
.trl-line { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: .92rem; color: var(--ink-3); }
.placard .trl-line { margin: -8px 0 20px; }
.who-text .trl-line { margin-top: 2px; }
legend .trl-key { margin-left: 8px; vertical-align: middle; }
.cab-gear { width: 104px; height: 104px; object-fit: contain; flex: none; margin: -20px 0; filter: drop-shadow(0 10px 10px rgba(0,0,0,.45)); transition: transform 1.2s var(--ease-out); }
.cab-head:hover .cab-gear { transform: rotate(40deg); }
.cab-body { position: relative; padding-top: 2px; }
.cab-body::before { content: ""; position: absolute; left: 56px; top: -14px; bottom: 30px; width: 12px; border-radius: 0 0 6px 6px; background: var(--rail); box-shadow: 0 2px 6px rgba(var(--shadow-rgb), .3); }
.cabinet.ldv { --rail: linear-gradient(90deg, #7A5920, #F7E4A8 38%, #C9A052 62%, #8C6421); }
.cabinet.ldv .cab-body::before { left: calc(50% - 7px); width: 14px; }
/* the three rails run on into the foot and converge on the wax seal: the agreement, made in the middle */
.cabinets .cab-body::before { bottom: -1px; }
.cab-foot { padding-top: 132px; margin-top: 0; }
.cab-foot .converge { left: 0; width: 100%; height: 132px; }
.cab-foot .meet { margin-top: 34px; }
.cabinet.inventive { --rail: linear-gradient(90deg, #5A0F1A, #C8404F 42%, #A12232 64%, #6A1320); }
.cabinet.large { --rail: linear-gradient(90deg, #082C42, #2C7CB0 42%, #155E8D 64%, #0B3854); }
.svc { position: relative; z-index: 1; display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 18px; row-gap: 12px; padding: 22px 24px 22px; align-content: start; }
.svc > div:not(.gear-window) { display: contents; }
.svc .medallion { --size: 76px; }
.svc h3 { grid-column: 2; align-self: center; margin: 0; padding-right: 40px; font-size: 1.24rem; }
.svc p, .svc .gem-row { grid-column: 1 / -1; }
.svc p { color: var(--ink-2); font-size: .98rem; }
.svc .gem-row { margin-top: 2px; }
.svc .coin { position: absolute; top: 16px; right: 16px; }
/* LDV's head: a gilt plaque under its gear */
.cab-head.ldv {
  position: relative; flex-direction: column; justify-content: flex-end; text-align: center; gap: 4px; padding: 0 18px 20px; color: #2A1E0A; border-radius: var(--r-lg); border: 1px solid #7A5920;
  background: linear-gradient(180deg, #FBEFC4 0%, #EBCB7A 32%, #C99B46 64%, #DFBC69 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 1px 0 #8C6421, 0 2px 0 #7A5920, 0 3px 0 #6E4F18, 0 4px 0 #5A4013, 0 18px 34px -16px rgba(var(--shadow-rgb), .55);
}
.cab-head.ldv::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(255, 248, 222, .6); border-radius: calc(var(--r-lg) - 7px); pointer-events: none; }
.cab-head.ldv .cab-gear { width: 112px; height: 112px; margin: -44px 0 2px; }
.cab-head.ldv .kicker { justify-content: center; color: #4E3810; }
.cab-head.ldv .kicker::before { display: none; }
.cab-head.ldv h2 { color: #24190A; text-shadow: 0 1px 0 rgba(255, 245, 210, .7); margin: 4px 0 4px; }
.cab-head.ldv h2 em { color: #4E3810; }
.cab-head.ldv p:not(.kicker) { color: #3A2808; margin-inline: auto; }
/* what LDV brings to each pair of services: a gilt card with a window onto LDV's gear in the middle */
.svc.ldv {
  grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 14px 14px 22px; overflow: hidden; border-radius: var(--r);
  background: linear-gradient(180deg, #FFF9E6 0%, #FBF0D2 60%, #F5E5BE 100%); border: 1px solid rgba(160, 120, 44, .6);
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .55), inset 0 0 0 6px rgba(181, 138, 56, .4), 0 1px 0 #D9C08A, 0 2px 0 #CDB078, 0 3px 0 #BFA066, 0 16px 28px -14px rgba(var(--shadow-rgb), .5);
}
.svc.ldv h3 { grid-column: 1; padding: 0 8px; }
.svc.ldv p, .svc.ldv .kicker { grid-column: 1; padding-inline: 8px; }
.svc.ldv .kicker { justify-content: center; color: var(--gold-deep); font-size: .66rem; }
.svc.ldv .kicker::before { display: none; }
.svc.ldv .coin { top: 151px; left: 50%; right: auto; translate: -50% 0; z-index: 4; }
.svc.ldv .kicker { margin-top: 22px; }
/* the window: a drafting sheet behind glass, LDV's gear in the middle, the two sides' gears meshing with it */
.gear-window {
  position: relative; width: 100%; height: 156px; margin-bottom: 6px; overflow: hidden; border-radius: 10px; isolation: isolate;
  background: radial-gradient(120% 90% at 50% 40%, #FBF5E7, #EFE3CA); border: 1px solid rgba(118, 85, 28, .35);
  box-shadow: inset 0 2px 8px rgba(var(--shadow-rgb), .3), inset 0 0 0 3px rgba(255, 252, 240, .5);
}
.gear-window::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(160deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 70%, rgba(255,255,255,.12) 100%); }
.gw-sheet { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 0; overflow: visible; }
.gw-wash { fill: rgba(236, 186, 80, .22); }
.gw-rays { stroke: rgba(150, 108, 40, .4); stroke-width: 1; fill: none; }
.gw-pitch { fill: none; stroke: rgba(128, 100, 73, .45); stroke-width: 1; stroke-dasharray: 4 3; }
.gw-centre { stroke: rgba(128, 100, 73, .4); stroke-width: 1; stroke-dasharray: 9 3 2 3; }
.gw-gear { position: absolute; z-index: 1; left: calc(50% + var(--x)); top: calc(50% + var(--y)); width: var(--d); height: var(--d); translate: -50% -50%; filter: drop-shadow(0 5px 5px rgba(var(--shadow-rgb), .42)); }
.gw-gear.ldv { z-index: 2; filter: drop-shadow(0 6px 7px rgba(var(--shadow-rgb), .5)) drop-shadow(0 0 10px rgba(236, 186, 80, .45)); }
.gw-gear img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* turning at the true ratios: LDV once every 24 s, the others from their tooth counts, always meshed */
.gw-body.cw { animation: gw-cw var(--t) linear infinite; }
.gw-body.ccw { animation: gw-ccw var(--t) linear infinite; }
@keyframes gw-cw { from { transform: rotate(var(--p)); } to { transform: rotate(calc(var(--p) + 360deg)); } }
@keyframes gw-ccw { from { transform: rotate(var(--p)); } to { transform: rotate(calc(var(--p) - 360deg)); } }
.cabinets .cab-head::after { content: none; }
/* why LDV: three struck coins set into a leather case */
.why-case { display: grid; gap: 30px; padding: clamp(28px, 3.6vw, 50px); }
.why-head h2 { margin-top: 12px; font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); }
.why-coins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; max-width: 880px; width: 100%; justify-self: center; }
.why-coin { display: grid; justify-items: center; align-content: start; text-align: center; gap: 12px; }
.why-coin .well { width: 152px; height: 152px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 4px; background: radial-gradient(circle at 50% 38%, #0B0806, #231A12 72%); box-shadow: inset 0 7px 16px rgba(0,0,0,.75), inset 0 -2px 3px rgba(255,255,255,.07), 0 1px 0 rgba(255,255,255,.14); }
.why-coin .coin.xl { --size: 122px; }
.why-coin .coin .globe { width: 54%; height: 54%; color: var(--mt); filter: drop-shadow(0 1px 0 rgba(255,245,215,.6)); }
.why-coin h3 { font-size: 1.3rem; }
.why-coin p { font-size: .96rem; max-width: 24em; }
.industry-field { padding: 28px; }
.industry-field .gem { font-size: .95rem; padding: 7px 16px 7px 8px; cursor: pointer; appearance: none; margin: 0; }
.industry-field .gem:hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.05); }
.industry-field .gem:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 2px; }
.industry-field .gem[aria-pressed="true"] { transform: translateY(2px); filter: brightness(.96); box-shadow: inset 0 2px 5px rgba(0,0,0,.32), 0 0 0 3px rgba(230, 200, 120, .6); }
/* a small wax dot marks the six industries that have a manuscript */
.industry-field .gem[data-story]::after { content: ""; width: 9px; height: 9px; margin-left: 1px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #F0A0AA 0 18%, #A12232 52%, #6A1320 100%); box-shadow: 0 0 0 1px rgba(255, 245, 215, .7), 0 1px 1px rgba(0,0,0,.35); }
/* the tray that opens under a pressed industry: the two doors, and the manuscript where there is one */
.ind-tray { flex: 0 0 100%; min-width: 0; display: grid; gap: 12px; padding: 16px 18px; margin: 2px 0 6px; }
.ind-tray[hidden] { display: none; }
.ind-tray.is-new { animation: detail-in .4s var(--ease-out) both; }
.ind-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.ind-line b { font: 600 1.2rem/1.25 var(--serif); color: var(--ink); }
.ind-line span { font-size: .95rem; color: var(--ink-2); }
.ind-tray .key-row { gap: 10px; }
.ind-tray .btn { white-space: normal; text-align: left; line-height: 1.2; }
/* the key that turns the table: only where one side shows at a time */
.cab-turn { display: none; }
.cta-leather { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: clamp(28px, 4vw, 48px); }
.cta-leather h2 { max-width: 20em; }
.cta-sub { margin-top: 10px; }
.text-link.light { color: var(--gold-hi); }
.text-link.light:hover { color: #fff; }

/* 19b HOW IT WORKS ------------------------------------------------------------------------------ */
.home-hero .stage-poster { background-position: 62% 66%; }
.how-hero .stage-poster { background-size: auto min(72%, 440px); background-repeat: no-repeat; background-position: 78% 55%; }
.gear-labels { opacity: 0; transition: opacity .7s var(--ease); }
.gear-labels.is-ready { opacity: 1; }
.gear-label {
  position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; white-space: nowrap;
  transform: translate3d(var(--x, -999px), var(--y, -999px), 0) translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px; border-radius: 9px;
  font: italic 600 .92rem/1 var(--serif); color: #2A1E0A; text-shadow: 0 1px 0 rgba(255,245,210,.6);
  background: linear-gradient(180deg, #F8E6AE 0%, #E3BF6C 35%, #C3933F 62%, #D8B462 100%); border: 1px solid #7A5920;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 0 #6E4F18, 0 6px 10px -4px rgba(var(--shadow-rgb), .5);
  transition: background .3s var(--ease), color .3s var(--ease), box-shadow .2s var(--ease);
}
.gear-label:hover { filter: brightness(1.05); }
.gear-label i, .side-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.9) 0 16%, rgba(255,255,255,0) 52%), var(--dot); box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.3); }
.gear-label.inventive, .side-dot.inventive { --dot: #A12232; }
.gear-label.large, .side-dot.large { --dot: #155E8D; }
.gear-label.inventive[aria-pressed="true"] { color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.35); border-color: #5A0F1A; background: linear-gradient(180deg, #C8404F, #9A1F2F); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 0 #560F1A, 0 6px 12px -4px rgba(161,34,50,.6); }
.gear-label.large[aria-pressed="true"] { color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.35); border-color: #082C42; background: linear-gradient(180deg, #2C7CB0, #12577F); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 0 #082C42, 0 6px 12px -4px rgba(21,94,141,.6); }
.gear-label .gl { display: grid; gap: 4px; text-align: left; }
.gear-label .gl b { font: inherit; }
.gear-label .gl small { font: 700 .56rem/1 var(--sans); letter-spacing: .15em; text-transform: uppercase; opacity: .78; }
.gear-label.ldv { padding: 8px 22px; z-index: 1; }
.gear-label.ldv .gl { text-align: center; }
.gear-label.ldv .gl b { font: 700 1.25rem/1 var(--serif); letter-spacing: .16em; margin-right: -.16em; }
.gear-label.ldv[aria-pressed="true"] { background: linear-gradient(180deg, #FFF3C8 0%, #EED07E 35%, #CFA049 62%, #E6C470 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 2px 0 #6E4F18, 0 0 0 3px rgba(230, 200, 120, .35), 0 8px 16px -4px rgba(var(--shadow-rgb), .55); }

.side-switch .btn { gap: 8px; }
.cab-switch { display: none; }
.seg .btn[data-side="inventive"][aria-pressed="true"] { color: var(--red-deep); }
.seg .btn[data-side="large"][aria-pressed="true"] { color: var(--blue-deep); }

/* the ledger: two tracks on enamel rails, and between them LDV's gold column, meeting at the agreement */
.ledger { --lm: .82; --lg: 18px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr) minmax(0, 1fr); column-gap: var(--lg); row-gap: 22px; padding: 26px 26px 30px; }
.lh { grid-row: 1; display: flex; align-items: center; gap: 16px; padding: 18px 24px 18px 18px; z-index: 1; }
.lh.inventive { grid-column: 1; }
.lh.large { grid-column: 3; }
.lh img { width: 88px; height: 88px; object-fit: contain; flex: none; margin: -16px 0; filter: drop-shadow(0 8px 8px rgba(0,0,0,.45)); }
.lh h3 { font-size: clamp(1.4rem, 1.1rem + .8vw, 1.8rem); margin-top: 6px; }
/* LDV's head: a gilt plaque under the gold gear */
.lh.ldv {
  grid-column: 2; position: relative; flex-direction: column; justify-content: flex-end; text-align: center; gap: 4px; padding: 0 16px 18px; color: #2A1E0A;
  border-radius: var(--r-lg); border: 1px solid #7A5920;
  background: linear-gradient(180deg, #FBEFC4 0%, #EBCB7A 32%, #C99B46 64%, #DFBC69 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 1px 0 #8C6421, 0 2px 0 #7A5920, 0 3px 0 #6E4F18, 0 4px 0 #5A4013, 0 18px 34px -16px rgba(var(--shadow-rgb), .55);
}
.lh.ldv::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(255, 248, 222, .6); border-radius: calc(var(--r-lg) - 7px); pointer-events: none; }
.lh.ldv img { width: 112px; height: 112px; margin: -40px 0 2px; filter: drop-shadow(0 10px 10px rgba(var(--shadow-rgb), .45)); }
.lh.ldv .kicker { justify-content: center; color: #4E3810; }
.lh.ldv .kicker::before { display: none; }
.lh.ldv h3 { margin-top: 2px; color: #24190A; text-shadow: 0 1px 0 rgba(255, 245, 210, .7); font-size: clamp(1.3rem, 1rem + .7vw, 1.65rem); }
.lh.ldv h3 em { color: #4E3810; }
.track-rail { grid-row: 2 / 6; justify-self: center; width: 12px; margin-block: -22px; z-index: 0; pointer-events: none; box-shadow: 0 2px 6px rgba(var(--shadow-rgb), .28); }
.track-rail.inventive { grid-column: 1; background: linear-gradient(90deg, #5A0F1A, #C8404F 42%, #A12232 64%, #6A1320); }
.track-rail.spine { grid-column: 2; width: 14px; background: linear-gradient(90deg, #7A5920, #F7E4A8 38%, #C9A052 62%, #8C6421); }
.track-rail.large { grid-column: 3; background: linear-gradient(90deg, #082C42, #2C7CB0 42%, #155E8D 64%, #0B3854); }
.step { grid-row: var(--r); position: relative; z-index: 1; display: grid; gap: 10px; align-content: start; padding: 24px 24px 20px; overflow: hidden; }
.step::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--band); }
.step.inventive { grid-column: 1; --band: linear-gradient(180deg, #C8404F, #7C1826); }
.step.large { grid-column: 3; --band: linear-gradient(180deg, #2C7CB0, #0E4466); }
.step .coin { position: absolute; top: 18px; right: 16px; }
.step h3 { font-size: 1.28rem; padding-right: 46px; }
.step > p:not(.yield) { color: var(--ink-2); }
.step .yield { display: grid; gap: 4px; padding: 10px 14px; font-size: .94rem; color: var(--ink); }
.step .yield .label { color: var(--gold-deep); font-size: .66rem; }
/* what LDV brings at each stage: gilt-edged cards on the gold spine, each under its stage coin */
.step.ldv {
  grid-column: 2; align-self: start; justify-items: center; text-align: center; overflow: visible; margin-top: 34px; padding: 52px 22px 24px;
  background: linear-gradient(180deg, #FFF9E6 0%, #FBF0D2 60%, #F5E5BE 100%); border: 1px solid rgba(160, 120, 44, .6); border-radius: var(--r);
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .55), inset 0 0 0 6px rgba(181, 138, 56, .4), 0 1px 0 #D9C08A, 0 2px 0 #CDB078, 0 3px 0 #BFA066, 0 16px 28px -14px rgba(var(--shadow-rgb), .5);
}
.step.ldv::before { display: none; }
.step.ldv .coin { top: -34px; left: 50%; right: auto; transform: translateX(-50%); }
.step.ldv .kicker { justify-content: center; color: var(--gold-deep); font-size: .66rem; }
.step.ldv .kicker::before { display: none; }
.step.ldv h3 { padding-right: 0; font-size: 1.22rem; }
.step.ldv > p:not(.kicker) { font-size: .98rem; }
.ledger .lh, .ledger .step, .ledger .track-rail, .ledger .meet, .converge path { transition: opacity .5s var(--ease), filter .5s var(--ease), transform .75s var(--ease-out); }
/* dimmed by washing out rather than fading, so the rail behind never shows through */
.ledger[data-side="inventive"] :is(.lh, .step, .track-rail, .meet).large, .ledger[data-side="large"] :is(.lh, .step, .track-rail, .meet).inventive { filter: grayscale(.6) sepia(.18) contrast(.48) brightness(1.2); }
.ledger[data-side="inventive"] .converge .large, .ledger[data-side="large"] .converge .inventive { opacity: .25; }
.ledger-foot { grid-column: 1 / -1; grid-row: 6; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px) minmax(0, 1fr); gap: 24px; padding-top: 118px; margin-top: -22px; }
/* from the centre of the first column to the centre of the third */
.converge { position: absolute; top: 0; left: calc((100% - 2 * var(--lg)) / (2 * (2 + var(--lm)))); width: calc((100% - 2 * var(--lg)) * (1 + var(--lm)) / (2 + var(--lm)) + 2 * var(--lg)); height: 124px; overflow: visible; }
.converge path { vector-effect: non-scaling-stroke; stroke-linecap: round; }
.converge .shade { stroke: rgba(62, 42, 14, .3); stroke-width: 16px; }
.converge .inventive { stroke: #A12232; stroke-width: 12px; }
.converge .large { stroke: #155E8D; stroke-width: 12px; }
.converge .spine { stroke: #C9A052; stroke-width: 14px; }
.converge .hi { stroke: rgba(255, 255, 255, .32); stroke-width: 3px; }
.agreement { position: relative; z-index: 1; grid-column: 2; display: grid; justify-items: center; text-align: center; gap: 8px; }
.agreement .seal-press { width: 104px; height: 104px; margin-top: -22px; filter: drop-shadow(0 10px 10px rgba(var(--shadow-rgb), .45)); }
.agreement .seal-press img { width: 100%; height: 100%; }
.js .agreement .seal-press { opacity: 0; transform: translateY(-30px) scale(1.4) rotate(-18deg); }
.js .ledger-foot.is-in .agreement .seal-press { animation: seal-press .95s .3s var(--ease-out) forwards; }
.agreement h3 { font-size: 1.6rem; }
.agreement p { color: var(--ink-2); }
.meet { align-self: start; font-size: .98rem; color: var(--ink-2); padding: 14px 18px; border-radius: 12px; background: rgba(255, 253, 247, .7); border: 1px dashed var(--line-2); }
.meet b { display: block; font: 700 .68rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 4px; }
.meet.inventive { grid-column: 1; margin-top: 30px; }
.meet.large { grid-column: 3; margin-top: 30px; }

/* the closing panel: where both tracks begin */
.terms { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 36px; align-items: center; padding: clamp(28px, 3.6vw, 48px); }
.terms h2 { font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); margin: 10px 0 10px; }
.terms-text p:not(.kicker) { max-width: 40em; }

/* how we are paid (3 October 2026): milestone coins on a brass rail, the wax seal at the end.
   On How It Works a leather panel with the fuller account; on Services a vellum note under the seal. */
.paid-rail { position: relative; display: flex; align-items: flex-start; gap: 14px; width: max-content; max-width: 100%; padding: 6px 2px 0; }
.paid-rail .rail-line { position: absolute; left: 24px; right: 30px; top: calc(6px + 19px); height: 10px; border-radius: 6px; z-index: 0; background: linear-gradient(180deg, #F7E4A8 0%, #D9B25F 30%, #9C7228 58%, #C9A052 80%, #E8CC86 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 0 #6E4F18, 0 5px 10px -2px rgba(var(--shadow-rgb), .45); }
.paid-rail .ms { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; min-width: 58px; }
.paid-rail .ms small { font: 700 .6rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); white-space: nowrap; }
.paid-rail .ms .wax { width: 56px; height: 56px; margin: -9px 0; }
.paid-rail .ms .wax b { font-size: 1.1rem; }
.paid-rail .ms.paid small { color: var(--red); }
.paid-rail .coin:not(.sm) { --size: 48px; }
.paid-rail .coin:not(.sm) + small { margin-top: 2px; }
.paid-rail.dark .rail-line { top: calc(6px + 19px); }
.paid-rail.dark .ms small { color: var(--gold-hi); }
.paid-rail.dark .ms.paid small { color: #F2B8C0; }
.paid-rail.dark .ms .wax { width: 68px; height: 68px; margin: -10px 0; }
.paid-panel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 40px; align-items: center; padding: clamp(28px, 3.6vw, 48px); }
.paid-panel h2 { font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem); margin: 10px 0 10px; }
.paid-panel .paid-text p:not(.kicker) { max-width: 44em; }
/* LDV's terms on LDV's gold: the gilt plaque, as under the LDV gear */
.paid-panel.gilt { position: relative; color: #2A1E0A; border-radius: var(--r-lg); border: 1px solid #7A5920; background: linear-gradient(180deg, #FBEFC4 0%, #EBCB7A 32%, #C99B46 64%, #DFBC69 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 1px 0 #8C6421, 0 2px 0 #7A5920, 0 3px 0 #6E4F18, 0 4px 0 #5A4013, 0 18px 34px -16px rgba(var(--shadow-rgb), .55); }
.paid-panel.gilt::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(255, 248, 222, .6); border-radius: calc(var(--r-lg) - 8px); pointer-events: none; }
.paid-panel.gilt .kicker { color: #4E3810; }
.paid-panel.gilt h2 { color: #24190A; text-shadow: 0 1px 0 rgba(255, 245, 210, .7); }
.paid-panel.gilt h2 em { color: #7C1826; }
.paid-panel.gilt p:not(.kicker) { color: #3A2808; }
.paid-panel.gilt .paid-rail .rail-line { background: linear-gradient(180deg, #8C6421 0%, #5A4013 55%, #7A5920 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 0 #3A2808; }
.paid-panel.gilt .paid-rail .ms small { color: #4E3810; }
.paid-panel.gilt .paid-rail .ms.paid small { color: #7C1826; }
.paid-panel.gilt .coin { --m5: #4E3810; box-shadow: inset 0 0 0 3px rgba(255,255,255,.2), inset 0 0 0 4px rgba(60,40,10,.45), inset 0 -4px 6px rgba(0,0,0,.2), 0 2px 0 var(--m5), 0 6px 10px -2px rgba(40,25,5,.6); }
.paid-note { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 34px; align-items: center; margin-top: 10px; padding: 22px 28px 22px 24px; }
.paid-note h3 { font-size: 1.35rem; margin: 6px 0 6px; }
.paid-note h3 em { color: var(--red); }
.paid-note p:not(.kicker) { font-size: .98rem; max-width: 52em; }
.paid-note .paid-rail .ms { min-width: 50px; }

/* 19c TRL: THE READINESS PYRAMID (3 October 2026) ------------------------------------------------- */
.page-head .head-pyramid { height: 160px; width: auto; margin-block: -26px -16px; filter: drop-shadow(0 12px 12px rgba(var(--shadow-rgb), .34)); }
.pyramid-hall { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(18px, 2.4vw, 32px); padding: clamp(16px, 2vw, 26px); align-items: stretch; }
.pyramid-stage { position: relative; min-height: 420px; display: grid; place-items: center; padding: 18px 14px 10px; background: radial-gradient(120% 100% at 50% 20%, #FBF7EE 0%, #EFE8DA 55%, #E4DBC9 100%), var(--parch); border: 1px solid var(--line); box-shadow: inset 0 2px 10px rgba(var(--shadow-rgb), .22); }
.pyramid-stage::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5; background: url("../assets/img/sketch-sheet.webp") center / cover; mix-blend-mode: multiply; pointer-events: none; }
.pyramid { position: relative; z-index: 1; width: 100%; max-width: 640px; height: auto; overflow: visible; }
.pyramid .p-shadow { fill: rgba(62, 42, 14, .18); filter: blur(6px); }
.pyramid .tier { cursor: pointer; outline: none; transition: transform .45s var(--ease-out), filter .45s var(--ease), opacity .6s var(--ease); transform-box: fill-box; }
.pyramid .tier .f-front { fill: url(#s-front); stroke: rgba(118, 85, 28, .35); stroke-width: 1; }
.pyramid .tier .f-top { fill: url(#s-top); stroke: rgba(118, 85, 28, .3); stroke-width: 1; }
.pyramid .tier .f-side { fill: url(#s-side); stroke: rgba(118, 85, 28, .35); stroke-width: 1; }
.pyramid .tier.gold .f-front { fill: url(#g-front); stroke: #7A5920; }
.pyramid .tier.gold .f-top { fill: url(#g-top); stroke: #9C7228; }
.pyramid .tier.gold .f-side { fill: url(#g-side); stroke: #6E4F18; }
.pyramid .t-coin { fill: #FFFDF6; stroke: rgba(118, 85, 28, .5); stroke-width: 1.5; }
.pyramid .tier.gold .t-coin { fill: #FFF6D6; stroke: #7A5920; }
.pyramid .t-num { font: 700 15px var(--serif); fill: var(--gold-deep); }
.pyramid .tier.gold .t-num { fill: #3A2808; }
.pyramid .t-name { font: italic 600 15px var(--serif); fill: var(--sepia); }
.pyramid .tier.gold .t-name { fill: #2A1E0A; }
.pyramid .tier:hover, .pyramid .tier:focus-visible { transform: translateY(-5px); filter: url(#lift); }
.pyramid .tier[aria-pressed="true"] { transform: translateY(-8px); filter: url(#glow); }
.pyramid .tier[aria-pressed="true"] .t-coin { fill: var(--red); stroke: #5A0F1A; }
.pyramid .tier[aria-pressed="true"] .t-num { fill: #FFF1BF; }
.pyramid .tier:focus-visible .f-front { stroke: var(--blue); stroke-width: 2; }
.pyramid .begins .rail { stroke: #C9A052; stroke-width: 8; stroke-linecap: round; filter: drop-shadow(0 2px 0 #6E4F18); }
.pyramid .begins image { filter: drop-shadow(0 4px 4px rgba(var(--shadow-rgb), .4)); }
.pyramid .seal-mark { font: 700 13px var(--serif); letter-spacing: .14em; fill: #FFF1BF; }
.pyramid .begins-t { font: italic 600 12px var(--serif); fill: var(--red); }
/* entrance: the tiers rise from the ground, bottom first */
.pyramid.is-building .tier { opacity: 0; transform: translateY(40px); }
.pyramid.is-building.is-built .tier { opacity: 1; transform: none; transition-delay: calc(var(--i) * 90ms); }
.pyramid.is-building.is-built .tier[aria-pressed="true"] { transform: translateY(-8px); }
.pyramid.is-building .begins { opacity: 0; transition: opacity .8s var(--ease) 1s; }
.pyramid.is-building.is-built .begins { opacity: 1; }
/* the placard */
.level-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 10px; padding: 26px 26px 28px; border-radius: var(--r); background: linear-gradient(180deg, #FFF9E6 0%, #FBF0D2 60%, #F5E5BE 100%); border: 1px solid rgba(160, 120, 44, .6); box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .55), inset 0 0 0 6px rgba(181, 138, 56, .4), 0 1px 0 #D9C08A, 0 2px 0 #CDB078, 0 3px 0 #BFA066, 0 16px 28px -14px rgba(var(--shadow-rgb), .5); overflow: hidden; }
.level-card.is-new > * { animation: detail-in .5s var(--ease-out) both; }
.lc-top { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.lc-top .gem { margin-right: auto; }
.lc-plate { --size: 92px; margin: -6px -4px -6px 0; }
.level-card .kicker { color: var(--gold-deep); }
.level-card h3 { font-size: clamp(1.4rem, 1.1rem + .8vw, 1.8rem); }
.lc-formal { font: italic 500 1.02rem/1.45 var(--serif); color: var(--sepia); padding-left: 14px; border-left: 3px solid var(--gold); }
.lc-body p { color: var(--ink-2); font-size: .98rem; }
.lc-body p + p { margin-top: 8px; font-weight: 600; color: var(--red-deep); }
.lc-proof { margin-top: 6px; }
.lc-proof .label { margin-bottom: 8px; }
.lc-proof .gem-row { list-style: none; margin: 0; padding: 0; }
.scale-note { margin-top: 18px; padding: 14px 20px; font-size: .9rem; color: var(--ink-3); }
.why-coins.three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1040px; }
/* the finder: four coins on a rail, one question at a time, one tier at the end */
.finder { padding: clamp(22px, 3vw, 36px); display: grid; gap: 22px; }
.finder-steps { display: flex; align-items: center; gap: 8px; width: min(100%, 420px); }
.finder-steps .rail-line { flex: 1 1 0; height: 8px; border-radius: 4px; background: linear-gradient(180deg, #E7DCC7, #CFBD9C); box-shadow: inset 0 1px 2px rgba(var(--shadow-rgb), .25); }
.finder-steps .coin { --m1: #FFFDF8; --m2: #EFE3CC; --m3: #D7C5A3; --m4: #B89E73; --m5: #9C8458; --mt: #7A6C5C; transition: transform .3s var(--ease-out); }
.finder-steps .coin.is-on { --m1: #FFF4C8; --m2: #E9C874; --m3: #C29440; --m4: #8C6421; --m5: #6E4C15; --mt: #3A2808; transform: scale(1.12); }
.finder-steps .coin.is-done { --m1: #FBE3CC; --m2: #D9A57A; --m3: #AD7447; --m4: #7E4F2B; --m5: #5E3A1F; --mt: #2E1A0A; }
.finder-q h3 { font-size: clamp(1.3rem, 1rem + .9vw, 1.7rem); max-width: 30em; margin: 8px 0 18px; }
.finder-q.is-new > *, .finder-r.is-new > * { animation: detail-in .45s var(--ease-out) both; }
.finder-r { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: start; }
.finder-r h3 { font-size: clamp(1.3rem, 1rem + .9vw, 1.7rem); margin: 8px 0 8px; outline: none; }
.finder-r p:not(.kicker) { color: var(--ink-2); max-width: 44em; margin-bottom: 18px; }
.cta-leather.blue .cta-sub { color: rgba(255,255,255,.85); margin-top: 10px; }
/* Home: the readiness band under the hero */
.ready-band { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 30px; align-items: center; padding: clamp(22px, 2.6vw, 34px) clamp(24px, 3vw, 44px); color: #fff; text-decoration: none; transition: transform .35s var(--ease-out); }
.ready-band:hover { transform: translateY(-3px); }
.ready-object { width: 150px; height: auto; margin-block: -22px -16px; filter: drop-shadow(0 12px 12px rgba(0,0,0,.5)); transition: transform .5s var(--ease-out); }
.ready-band:hover .ready-object { transform: translateY(-4px) scale(1.03); }
.ready-text { display: grid; gap: 6px; }
.ready-text .h2 { font: 600 clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem)/1.15 var(--serif); color: #fff; text-shadow: 0 2px 3px rgba(0,0,0,.35); }
.ready-text .h2 em { font-style: italic; color: var(--gold-hi); }
.ready-text .p { color: rgba(255,255,255,.88); max-width: 46em; }
.ready-band .btn { justify-self: end; }

/* 20 ABOUT ------------------------------------------------------------------------------------ */
.who { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(26px, 3.4vw, 48px); align-items: center; padding: clamp(24px, 3vw, 40px); }
.who .gilt-frame { aspect-ratio: 1; }
.who .gilt-frame img.plate { width: 90%; height: auto; opacity: .78; }
.who-text { display: grid; gap: 14px; max-width: 40em; }
.who-text h2 { margin-bottom: 4px; }
.who-text p:not(.kicker) { color: var(--ink-2); font-size: 1.06rem; }
.gilt-frame { position: relative; aspect-ratio: 4 / 5; border-radius: 10px; padding: 16px; background: conic-gradient(from 200deg, #F8E6AE, #C3933F 18%, #7A5920 32%, #E3BF6C 48%, #9C7228 64%, #F6E1A6 80%, #B58A38 92%, #F8E6AE); box-shadow: inset 0 0 0 1px rgba(255,245,210,.6), 0 2px 0 #6E4F18, 0 4px 0 #5A4013, 0 18px 30px -10px rgba(var(--shadow-rgb), .55); }
.gilt-frame .canvas-in { position: relative; height: 100%; border-radius: 4px; overflow: hidden; display: grid; place-items: center; background: var(--parch) url("../assets/img/parchment.webp") center / 500px; box-shadow: inset 0 4px 12px rgba(var(--shadow-rgb), .45); }
.gilt-frame img.plate { position: absolute; width: 80%; opacity: .35; mix-blend-mode: multiply; }
.gilt-frame .note { position: relative; font: italic 600 1.1rem/1.3 var(--serif); color: var(--sepia); text-align: center; padding: 16px; }
.principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.principle { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 28px 20px 26px; }
.principle .coin { --size: 88px; }
.principle .coin b { font-size: 1.9rem; }
.principle h3 { font-size: 1.2rem; }
.principle p { font-size: .95rem; color: var(--ink-2); }
.table-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px clamp(26px, 3.4vw, 48px); align-items: end; }
.table-head h2 { margin-top: 12px; }
.table-head .lead { max-width: 34em; }
.seats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: clamp(22px, 2.6vw, 30px); }
.seat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; align-items: center; align-content: start; padding: 20px 22px 22px; }
.seat h3 { font-size: 1.12rem; }
.seat p { grid-column: 1 / -1; font-size: .95rem; color: var(--ink-2); }

/* 21 CONTACT ------------------------------------------------------------------------------------ */
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 26px; align-items: start; margin-top: 22px; }
.contact-aside { position: relative; padding: 32px; }
.contact-aside .aside-object { position: absolute; top: -30px; right: -20px; width: 150px; height: auto; transform: rotate(6deg); filter: drop-shadow(0 14px 14px rgba(var(--shadow-rgb), .4)); pointer-events: none; }
.contact-aside h1 { padding-right: 80px; }
.contact-aside h1 { font-size: clamp(2.1rem, 1.4rem + 2vw, 3.3rem); margin: 12px 0 12px; }
.info-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 22px; }
.info-list .inset { padding: 14px 16px; }
.info-list dt { font: 700 .7rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.info-list dd { margin-top: 6px; font-size: .98rem; color: var(--ink-2); }
.info-list a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--line-2); overflow-wrap: anywhere; }
.form-scene { perspective: 1800px; }
.form-card { position: relative; transform-style: preserve-3d; transition: transform 1s var(--ease); }
.form-card.is-sent { transform: rotateY(180deg); }
.form-face, .form-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.form-face { padding: clamp(24px, 3vw, 36px); }
.form-back { position: absolute; inset: 0; transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; }
.form-back h2 { margin: 20px 0 10px; }
.form-back p { max-width: 26em; color: var(--ink-2); }
.form-back .seal-drop { width: 150px; height: 150px; opacity: 0; transform: translateY(-40px) scale(1.5) rotate(-20deg); filter: drop-shadow(0 12px 14px rgba(var(--shadow-rgb), .45)); }
.form-card.is-sent .seal-drop { animation: seal-press .95s .65s var(--ease-out) forwards; }
@keyframes seal-press { 0% { opacity: 0; transform: translateY(-40px) scale(1.5) rotate(-20deg); } 55% { opacity: 1; transform: translateY(0) scale(.92) rotate(4deg); } 75% { transform: scale(1.03) rotate(-1deg); } 100% { opacity: 1; transform: none; } }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field > label, .field legend { font: 600 .9rem/1.2 var(--sans); color: var(--ink); }
.field .opt { font-weight: 400; color: var(--ink-3); }
.field .err { font-size: .85rem; color: var(--red); }
.field.has-error .field-box { border-color: var(--red); }
fieldset.field { border: 0; }
.field[hidden] { display: none; }
.field.reveal:not([hidden]) { animation: detail-in .45s var(--ease-out) both; }
@media (pointer: coarse) { .chips { gap: 12px; } .chip .gem { min-height: 40px; padding: 5px 16px 5px 10px; } }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: 8px; }
.chip input:focus-visible + span { outline: 3px solid var(--gold-hi); outline-offset: 2px; }
.chip input:checked + span.gem { --g: #A12232; --gt: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); transform: translateY(1px); }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; color: var(--ink-2); }
/* a debossed brass-rimmed box that fills with red enamel when ticked */
.consent input {
  appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 0; flex: none; cursor: pointer; border-radius: 7px; display: grid; place-items: center;
  background: linear-gradient(180deg, #EDE2CD, #F7F1E5); border: 1px solid rgba(118, 85, 28, .45);
  box-shadow: inset 0 2px 4px rgba(var(--shadow-rgb), .25), 0 1px 0 rgba(255,255,255,.9);
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
}
.consent input::after { content: ""; width: 7px; height: 12px; margin-top: -3px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform .2s var(--ease-out); }
.consent input:checked { background: linear-gradient(180deg, #C8404F, #9A1F2F); border-color: #5A0F1A; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 0 #6A1320, 0 3px 6px -2px rgba(var(--shadow-rgb), .5); }
.consent input:checked::after { transform: rotate(45deg) scale(1); }
.consent input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.has-error .consent input, .consent.has-error input { border-color: var(--red); }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.form-status { font-size: .92rem; color: var(--ink-3); }
.form-status.is-error { color: var(--red); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* the form in parts: I your side, II the questions for that side, III your details */
.aside-info > .text-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; font-weight: 600; }
.aside-info > .text-link svg { width: 16px; height: 16px; }
.form-part { border: 0; margin: 0 0 24px; padding: 0; min-width: 0; }
.form-part[hidden] { display: none; }
.form-part > legend.part-title { display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: 14px; font: 600 1.22rem/1.2 var(--serif); color: var(--ink); }
.part-title .coin, .part-wait .coin { --size: 34px; }
.side-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.side-card { position: relative; display: block; cursor: pointer; }
.side-card input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.sc-in {
  position: relative; display: flex; align-items: center; gap: 14px; height: 100%; padding: 14px 40px 14px 12px; border-radius: 14px;
  background: linear-gradient(180deg, #FFFEFA, #F4EBDA); border: 1px solid rgba(118, 85, 28, .28);
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 var(--edge1), 0 2px 0 var(--edge2), 0 3px 0 var(--edge3), 0 6px 10px -3px rgba(var(--shadow-rgb), .3);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.sc-in img { width: 62px; height: 62px; object-fit: contain; flex: none; filter: drop-shadow(0 5px 5px rgba(var(--shadow-rgb), .35)); transition: transform 1s var(--ease-out); }
.sc-t b { display: block; font: 600 1.1rem/1.2 var(--serif); color: var(--ink); }
.sc-t small { display: block; margin-top: 4px; font-size: .84rem; line-height: 1.35; color: var(--ink-3); }
.sc-tick { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(180deg, #EDE2CD, #F7F1E5); border: 1px solid rgba(118, 85, 28, .4); box-shadow: inset 0 2px 3px rgba(var(--shadow-rgb), .25); }
.side-card.inventive { --c: #A12232; --c2: #C8404F; }
.side-card.large { --c: #155E8D; --c2: #2C7CB0; }
.side-card:hover .sc-in { transform: translateY(-2px); }
.side-card input:checked + .sc-in { transform: translateY(3px); border-color: var(--c); background: linear-gradient(180deg, #FBF5EA, #EFE3CE); box-shadow: inset 0 2px 5px rgba(var(--shadow-rgb), .22), 0 0 0 2px color-mix(in srgb, var(--c) 45%, transparent); }
.side-card input:checked + .sc-in img { transform: rotate(45deg); }
.side-card input:checked + .sc-in .sc-tick { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.8) 0 14%, rgba(255,255,255,0) 50%), linear-gradient(180deg, var(--c2), var(--c)); border-color: var(--c); box-shadow: 0 1px 0 rgba(0,0,0,.3); }
.side-card input:focus-visible + .sc-in { outline: 3px solid var(--gold-hi); outline-offset: 2px; }
.side-pick > .side-other { font: 400 .9rem/1.3 var(--sans); }
.side-other { display: inline-flex; align-items: center; gap: 9px; margin-top: 12px; font-size: .9rem; color: var(--ink-3); cursor: pointer; }
.side-other input { width: 17px; height: 17px; margin: 0; accent-color: var(--red); cursor: pointer; }
.side-pick .err { display: block; margin-top: 6px; }
.part-wait { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 24px; color: var(--ink-3); font-size: .95rem; }
.part-wait[hidden] { display: none; }
.form-part[data-for="large"] .chip input:checked + span.gem { --g: #1E6B9C; }
.form-part > .form-grid { animation: detail-in .45s var(--ease-out) both; }

/* 22 PLACEHOLDERS (remove as real content arrives) ------------------------------------------------ */
.vol-note { display: flex; width: fit-content; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; border: 1px dashed var(--gold); background: rgba(230, 200, 120, .16); font: 700 .68rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); }
.vol-note::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.ph-text { color: var(--ink-3); font-style: italic; }

/* 23 FOOTER ------------------------------------------------------------------------------------ */
.site-footer { margin-top: 0; padding: 0 0 26px; }
.foot-slab { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 30px; padding: 36px 40px; }
.foot-slab img { width: 200px; height: auto; margin-bottom: 14px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.foot-slab .motto { font: italic 600 1.2rem/1.3 var(--serif); color: var(--gold-hi); text-wrap: balance; }
.foot-slab h2 { font: 700 .72rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); margin-bottom: 14px; }
.foot-slab ul { list-style: none; display: grid; gap: 8px; }
.foot-slab a, .foot-slab button { color: rgba(255,255,255,.88); font-size: .95rem; text-align: left; transition: color var(--t-fast) var(--ease); }
.foot-slab a:hover, .foot-slab button:hover { color: var(--gold-hi); }
.foot-base { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 6px 0; font-size: .82rem; color: var(--ink-3); }
/* social coins: struck gold on the leather, pressed like keys */
.foot-slab .social { display: flex; gap: 14px; margin-top: 22px; }
.foot-slab .social .coin { --size: 46px; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), filter var(--t-fast) var(--ease); }
.foot-slab .social .coin b { font: 800 1.1rem/1 var(--sans); letter-spacing: -.03em; }
.foot-slab .social .coin:hover { transform: translateY(-2px); filter: brightness(1.1); box-shadow: inset 0 0 0 3px rgba(255,255,255,.2), inset 0 0 0 4px rgba(60,40,10,.35), inset 0 -4px 6px rgba(0,0,0,.2), 0 3px 0 var(--m5), 0 10px 16px -4px rgba(0,0,0,.7), 0 0 18px rgba(230,200,120,.25); }
.foot-slab .social .coin:active { transform: translateY(2px); box-shadow: inset 0 0 0 3px rgba(255,255,255,.2), inset 0 0 0 4px rgba(60,40,10,.35), inset 0 -2px 4px rgba(0,0,0,.28), 0 0 0 var(--m5), 0 2px 4px -1px rgba(0,0,0,.6); }
.foot-slab .social .coin:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 4px; }

/* 24 CONSENT ------------------------------------------------------------------------------------ */
.consent-card { position: fixed; z-index: 680; right: 18px; bottom: 18px; width: min(420px, calc(100vw - 36px)); padding: 22px 24px; transform: translateY(calc(100% + 40px)); transition: transform .7s var(--ease); }
.consent-card.is-visible { transform: none; }
.consent-card h2 { font-size: 1.2rem; margin-bottom: 6px; }
.consent-card p { font-size: .9rem; color: var(--ink-2); line-height: 1.5; }
.consent-card p a { color: var(--blue); text-decoration: underline; }
.c-short { display: none; }
.consent-actions { display: flex; gap: 10px; margin-top: 16px; }
.consent-actions .btn { flex: 1; }

/* 25 PRIVACY AND 404 ------------------------------------------------------------------------------ */
.prose { max-width: 46rem; }
.prose h2 { font-size: 1.5rem; margin: 30px 0 10px; }
.prose p, .prose li { font-size: 1.02rem; line-height: 1.7; color: var(--ink-2); }
.prose p + p { margin-top: 12px; }
.prose ul { padding-left: 1.2em; display: grid; gap: 6px; margin-top: 8px; }
.prose table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
.lost { min-height: calc(100svh - var(--top-h)); display: grid; place-items: center; padding: 40px 0; }
.lost .placard { text-align: center; }
.lost .coin { margin: 0 auto 10px; }

/* 26 RESPONSIVE ------------------------------------------------------------------------------------ */
@media (max-width: 1200px) {
  .brand-ttl { display: none; }
  .lc-top { flex-wrap: wrap; }
  .lc-plate { --size: 72px; }
  .plaques { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cabinets { column-gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(0, .86fr) minmax(0, 1fr); }
  .cab-head { padding: 18px 16px 18px 14px; gap: 12px; }
  .cab-gear { width: 76px; height: 76px; margin: -10px 0; }
  .cab-head.ldv { padding: 0 12px 16px; }
  .cab-head.ldv .cab-gear { width: 96px; height: 96px; margin: -38px 0 2px; }
  .svc { padding: 18px 18px 20px; column-gap: 14px; grid-template-columns: 64px minmax(0, 1fr); }
  .svc .medallion { --size: 64px; }
  .cab-body::before { left: 44px; }
  .svc.ldv { padding: 10px 10px 18px; }
  .ledger { --lm: .9; --lg: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1fr); padding: 22px 18px 26px; }
  .lh { padding: 16px 18px 16px 14px; gap: 12px; }
  .lh img { width: 70px; height: 70px; }
  .lh.ldv { padding: 0 12px 16px; }
  .lh.ldv img { width: 92px; height: 92px; }
  .step, .step.ldv { padding-inline: 18px; }
  .plaque-slot::before { display: none; }
  .chapters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-object { right: -40px; width: 170px; }
}
@media (max-width: 980px) {
  :root { --top-h: 68px; }
  .nav { display: none; }
  .menu-key { display: inline-flex; }
  .top-contact { display: inline-flex; min-height: 42px; padding: 8px 15px; }
  .top-in { gap: 10px; }
  .brand img { height: 50px; }
  .exhibit, .who, .contact-grid, .svc-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-aside .aside-object { right: -8px; }
  /* Contact in one column: the heading, then the form, then the reply, confidentiality and address plates.
     The aside dissolves into its two blocks, each an ivory slab of its own. */
  .contact-aside { display: contents; }
  .aside-head, .aside-info { position: relative; padding: 28px 28px; border-radius: var(--r); background: linear-gradient(180deg, #FFFEFA 0%, #FBF6EC 55%, #F5EDDF 100%); border: 1px solid rgba(118, 85, 28, .22); box-shadow: var(--slab-shadow); }
  .aside-head::after, .aside-info::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(181, 138, 56, .3); border-radius: calc(var(--r) - 7px); pointer-events: none; }
  .aside-head { order: 0; } .form-scene { order: 1; } .aside-info { order: 2; }
  .aside-info .info-list { margin-top: 0; }
  .aside-head .lead { margin-bottom: 0; }
  .who .gilt-frame { width: min(280px, 70%); justify-self: center; }
  .foot-slab { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-slab > :first-child { grid-column: 1 / -1; }
  .vol-row { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .vol-row .v-sector, .vol-row .v-year { display: none; }
  .seals { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 18px; }
  .seals .seal-btn { flex: 0 0 calc(25% - 6px); }
  .seals[style*="--n:5"] .seal-btn { flex-basis: calc(20% - 5px); }
  .seal-rail .brass-rail { display: none; }
  .why { grid-template-columns: minmax(0, 1fr); }
  .terms { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .paid-panel, .paid-note { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .pyramid-hall { grid-template-columns: minmax(0, 1fr); }
  .scriptorium { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 44px; }
  .pyramid-stage { min-height: 0; }
  .why-coins.three { grid-template-columns: minmax(0, 1fr); }
  .ready-band { grid-template-columns: auto minmax(0, 1fr); }
  .ready-band .btn { grid-column: 1 / -1; justify-self: start; }
  .why-coins { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .gilt-frame.portrait { width: min(320px, 80%); justify-self: center; }
  .closing { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 1100px) {
  .home-hero { height: auto; max-height: none; min-height: 0; display: flex; flex-direction: column; }
  .home-hero .stage { position: relative; inset: auto; height: 64vh; min-height: 380px; max-height: 640px; order: 2; margin-top: 18px; }
  .home-hero .wrap { height: auto; padding-top: 22px; order: 1; }
  .placard { width: 100%; max-width: 760px; }
  .hall { grid-template-columns: minmax(0, 1fr); height: auto; }
  .hall-stage { height: min(62vh, 560px); min-height: 400px; }
  .chapter-card { height: auto; overflow: visible; }
}
@media (max-width: 860px) {
  .ledger { grid-template-columns: minmax(0, 1fr); row-gap: 14px; padding: 14px 14px 22px; }
  .ledger .track-rail, .converge { display: none; }
  .ledger .lh, .ledger .step { grid-column: 1; grid-row: auto; }
  /* stage by stage: the owner's step, what LDV brings, the adopter's step */
  .ledger .lh.inventive { order: 0; } .ledger .lh.ldv { order: 1; } .ledger .lh.large { order: 2; }
  .ledger .step.inventive { order: calc(var(--r) * 3); } .ledger .step.ldv { order: calc(var(--r) * 3 + 1); } .ledger .step.large { order: calc(var(--r) * 3 + 2); }
  .lh.ldv { flex-direction: row; justify-content: flex-start; text-align: left; padding: 14px 18px 14px 12px; gap: 12px; }
  .lh.ldv img { width: 70px; height: 70px; margin: -12px 0; }
  .lh.ldv .kicker { justify-content: flex-start; }
  .step.ldv { margin-top: 28px; }
  .ledger-foot { order: 99; grid-column: 1; grid-row: auto; grid-template-columns: minmax(0, 1fr); padding-top: 34px; margin-top: 0; }
  .ledger-foot .agreement, .ledger-foot .meet { grid-column: 1; margin-top: 0; }
  .ledger-foot .agreement { order: -1; }
  .ledger[data-side="inventive"] :is(.lh, .step, .meet).large, .ledger[data-side="large"] :is(.lh, .step, .meet).inventive { display: none; }
  /* Services: with no side chosen (a tablet) the three cabinets stack. With a side (always, on a phone) only
     that side shows, and its cabinet and LDV's share one column of rows: the side's head, LDV's head, then
     each service with LDV's part directly beneath it. A key at the foot turns the table. */
  .cabinets { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 30px; }
  .cabinet, .cab-body { grid-row: auto; grid-template-rows: none; }
  .cabinet.ldv { margin-top: 24px; }
  .cabinets:is([data-side="inventive"], [data-side="large"]) { grid-template-rows: repeat(12, auto); row-gap: 0; }
  .cabinets[data-side="inventive"] .cabinet.large, .cabinets[data-side="large"] .cabinet.inventive { display: none; }
  .cabinets:is([data-side="inventive"], [data-side="large"]) .cabinet { grid-column: 1; grid-row: 1 / span 10; grid-template-rows: subgrid; row-gap: 0; margin-top: 0; pointer-events: none; }
  .cabinets:is([data-side="inventive"], [data-side="large"]) .cab-body { grid-row: 3 / span 8; grid-template-rows: subgrid; row-gap: 0; pointer-events: none; }
  .cabinets:is([data-side="inventive"], [data-side="large"]) :is(.cab-head, .svc) { pointer-events: auto; }
  .cabinets:is([data-side="inventive"], [data-side="large"]) .cabinet:not(.ldv) .cab-head { grid-row: 1; }
  .cabinets:is([data-side="inventive"], [data-side="large"]) .cab-head.ldv { grid-row: 2; margin-top: 12px; flex-direction: row; justify-content: flex-start; text-align: left; gap: 12px; padding: 12px 18px 12px 12px; }
  .cabinets:is([data-side="inventive"], [data-side="large"]) .cab-head.ldv .cab-gear { width: 66px; height: 66px; margin: -8px 0; }
  .cabinets:is([data-side="inventive"], [data-side="large"]) .cab-head.ldv .kicker { justify-content: flex-start; }
  .cabinets:is([data-side="inventive"], [data-side="large"]) .cab-head.ldv h2 { font-size: 1.35rem; margin: 2px 0; }
  .cabinets:is([data-side="inventive"], [data-side="large"]) .cab-head.ldv p:not(.kicker) { margin-inline: 0; font-size: .9rem; }
  .cabinets:is([data-side="inventive"], [data-side="large"]) .cabinet:not(.ldv) .svc { margin-top: 26px; }
  .cabinets:is([data-side="inventive"], [data-side="large"]) .cabinet.ldv .svc { margin-top: 8px; }
  .cabinets:is([data-side="inventive"], [data-side="large"]) .cabinet:not(.ldv) .svc:nth-child(1) { grid-row: 1; }
  .cabinets:is([data-side="inventive"], [data-side="large"]) .cabinet:not(.ldv) .svc:nth-child(2) { grid-row: 3; }
  .cabinets:is([data-side="inventive"], [data-side="large"]) .cabinet:not(.ldv) .svc:nth-child(3) { grid-row: 5; }
  .cabinets:is([data-side="inventive"], [data-side="large"]) .cabinet:not(.ldv) .svc:nth-child(4) { grid-row: 7; }
  .cabinets:is([data-side="inventive"], [data-side="large"]) .cabinet.ldv .svc:nth-child(1) { grid-row: 2; }
  .cabinets:is([data-side="inventive"], [data-side="large"]) .cabinet.ldv .svc:nth-child(2) { grid-row: 4; }
  .cabinets:is([data-side="inventive"], [data-side="large"]) .cabinet.ldv .svc:nth-child(3) { grid-row: 6; }
  .cabinets:is([data-side="inventive"], [data-side="large"]) .cabinet.ldv .svc:nth-child(4) { grid-row: 8; }
  .cabinets:is([data-side="inventive"], [data-side="large"]) .cab-turn { display: block; grid-row: 11; margin-top: 26px; position: relative; z-index: 1; }
  .cabinets:is([data-side="inventive"], [data-side="large"]) .cab-foot { grid-row: 12; }
  .cab-turn .btn { width: 100%; white-space: normal; text-align: left; line-height: 1.2; justify-content: flex-start; }
  .cab-turn .btn .arrow { margin-left: auto; }
  .cabinets[data-side="inventive"] .cab-turn .btn.inventive, .cabinets[data-side="large"] .cab-turn .btn.large { display: none; }
  .cabinets[data-side="inventive"] .cab-foot .meet.large, .cabinets[data-side="large"] .cab-foot .meet.inventive { display: none; }
  .cab-switch { display: flex; margin-top: 18px; }
  .cabinets { margin-top: 18px; }
  .side-switch { width: 100%; }
  .side-switch .btn { flex: 1 1 0; min-width: 0; padding-inline: 10px; white-space: normal; line-height: 1.15; text-align: left; }
  .side-switch .btn.both { flex: 0 0 auto; }
}
@media (max-width: 720px) {
  body { font-size: 1.0625rem; }
  .plaques { grid-template-columns: minmax(0, 1fr); }
  .plaque .pl-body, .plaque.wide .pl-body { grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto 1fr auto; align-items: stretch; column-gap: 14px; padding: 18px 18px 18px 14px; }
  .plaque.wide .pl-top { grid-row: 1 / 4; }
  .plaque.wide h3 { padding-right: 40px; }
  .plaque.wide p { grid-row: 2; }
  .plaque.wide .btn { grid-column: 2; grid-row: 3; align-self: end; margin-top: 6px; }
  .plaque .emblem { width: 92px; height: 96px; }
  .plaque .emblem img { max-width: 92px; max-height: 96px; }
  .side-cards { grid-template-columns: minmax(0, 1fr); }
  .cab-head { padding: 20px 18px 20px 14px; gap: 12px; }
  /* the readiness key on the form gets room above the first option */
  legend .trl-key { margin: 4px 0 8px 8px; }
  .cab-gear { width: 72px; height: 72px; }
  .cab-body::before { left: 44px; }
  .svc { padding: 18px 18px 20px; column-gap: 14px; }
  .paid-rail { gap: 8px; }
  .paid-rail .ms { min-width: 46px; }
  .paid-rail .coin:not(.sm) { --size: 40px; }
  .paid-rail .rail-line { top: calc(6px + 15px); left: 20px; right: 24px; }
  .paid-rail .ms small { font-size: .54rem; letter-spacing: .1em; }
  .paid-rail.dark .ms .wax { width: 56px; height: 56px; }
  /* the two doors side by side, so both show on a phone's first screen */
  .doors { flex-wrap: nowrap; gap: 8px; align-items: stretch; }
  .doors .btn.lg { flex: 1 1 0; min-width: 0; min-height: 54px; padding: 8px 8px; font-size: .94rem; white-space: normal; line-height: 1.18; text-align: center; text-wrap: balance; }
  .doors .btn.lg .arrow { display: none; }
  .side-switch .btn.both { display: none; }
  .home-hero .stage { height: 52vh; min-height: 300px; max-height: 480px; }
  .how-hero .stage { height: calc(64vw + 70px); min-height: 0; }
  .gear-label { font-size: .8rem; min-height: 30px; padding: 4px 10px; gap: 6px; }
  .gear-label .gl small { display: none; }
  .gear-label.ldv { padding: 5px 12px; }
  .gear-label.ldv .gl b { font-size: .95rem; }
  .page-head { grid-template-columns: minmax(0, 1fr); }
  .page-head .aside { display: none; }
  /* phones: the placard carries the names, so the tiers show only their numerals, large */
  .pyramid .t-name { display: none; }
  .pyramid .t-coin { r: 22px; }
  .pyramid .t-num { font-size: 24px; transform: translateY(4px); }
  .pyramid .seal-mark { font-size: 15px; }
  .pyramid .begins-t { font-size: 13px; }
  .lc-top { flex-wrap: wrap; }
  /* phones: the manuscripts in a row you swipe through */
  .scriptorium { display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 30px 24px 32px; scrollbar-width: none; }
  .scriptorium::-webkit-scrollbar { display: none; }
  .manuscript { flex: 0 0 76%; scroll-snap-align: center; }
  .ms-marker { display: flex; align-items: center; justify-content: center; gap: 2px; margin-top: 12px; }
  .ms-marker .btn { flex: none; min-width: 44px; min-height: 44px; padding: 0; }
  .ms-marker .btn svg { width: 18px; height: 18px; }
  .ms-marker .btn:disabled { opacity: .4; cursor: default; }
  .ms-dot { flex: 1 1 0; max-width: 42px; min-width: 0; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
  .ms-dot .coin { --size: 28px; transition: transform .3s var(--ease-out), opacity .3s var(--ease); opacity: .6; }
  .ms-dot[aria-current="true"] .coin { opacity: 1; transform: scale(1.22); }
  .ms-dot:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: -2px; border-radius: 10px; }
  .ms-face { min-height: 210px; padding: 20px 18px 16px; }
  .ms-title { font-size: 1.2rem; padding-right: 66px; }
  .ms-scroll { padding: 68px 8px 50px; }
  .ms-bar { padding: 10px 10px; }
  .ms-bar .plaque-label { font-size: .8rem; padding: 4px 10px; min-height: 32px; white-space: normal; text-align: center; }
  .ms-plate { float: none; --size: 120px; margin: 20px auto 0; shape-outside: none; }
  .ms-figures { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ms-lesson { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .ms-foot-keys .btn:last-child { margin-left: 0; }
  .lc-plate { --size: 72px; }
  .level-card { padding: 20px 18px 22px; }
  .finder-r { grid-template-columns: minmax(0, 1fr); }
  .ready-band { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ready-object { width: 120px; margin-block: -10px -6px; }
  .library-vitrine { aspect-ratio: auto; height: 70vh; min-height: 420px; max-height: none; }
  .chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .principles { grid-template-columns: minmax(0, 1fr); }
  .seats { grid-template-columns: minmax(0, 1fr); }
  .table-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .foot-slab { grid-template-columns: minmax(0, 1fr); padding: 28px 24px; }
  .reader-in { padding: 12px 12px 40px; }
  .reader .cover { padding: 24px 22px; }
  .reader .sec { padding: 20px; }
  .wax { width: 68px; height: 68px; }
  .seals[style*="--n:5"] .seal-btn { flex-basis: calc(33.3% - 6px); }
  .seal-btn .ml { font-size: .76rem; }
  .seal-btn .md { font-size: .68rem; }
  .placard .kicker { letter-spacing: .14em; }
  .hero-object { width: 92px; right: -8px; top: -46px; bottom: auto; transform: rotate(8deg); }
  .history-hero { padding-bottom: 64px; }
  .ch-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ch-card-body { padding: 10px 12px 12px; gap: 8px; }
  .ch-card-body .coin { display: none; }
  .ch-card-text b { font-size: .95rem; }
  .hall-stage { min-height: 440px; }
  .hall-top { top: 12px; left: 12px; right: 12px; }
  .hall-bottom { left: 12px; right: 12px; bottom: 12px; }
  .hall-caption { display: none; }
  .source-view { padding: 60px 14px 60px; }
  .chapter-rail { padding: 8px; gap: 6px; }
  .rail-coins { justify-content: flex-start; gap: 12px; }
  .credit-list { columns: 1; }
  .contact-aside .aside-object { width: 104px; top: -18px; right: -6px; }
  .contact-aside h1 { padding-right: 56px; }
  /* the cookie note as a slim bar: one line of text, two keys */
  .consent-card { left: 10px; right: 10px; bottom: 10px; width: auto; padding: 16px 18px 15px; }
  .consent-card h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .consent-card p { font-size: .86rem; line-height: 1.42; }
  .c-long { display: none; }
  .c-short { display: inline; }
  .consent-actions { margin-top: 10px; gap: 8px; }
  .consent-actions .btn { min-height: 40px; padding-block: 6px; }
  /* phones: a long gem wraps onto a second line instead of pushing its card wider than the screen */
  .gem { white-space: normal; max-width: 100%; border-radius: 22px; text-align: left; }
  .gem-row, .chips, .chip { min-width: 0; max-width: 100%; }
  .ch-top .gem-row { flex: 1 1 0; }
  .btn { max-width: 100%; }
}
/* the narrowest phones: a long key wraps onto two lines instead of running off the screen */
@media (max-width: 359px) {
  .btn { white-space: normal; text-align: center; line-height: 1.25; }
  .btn.lg { padding-inline: 18px; }
  .top-in { gap: 7px; }
  .top-contact { padding-inline: 11px; }
  .menu-key { padding-inline: 12px; }
  .brand img { height: 44px; }
  .paid-rail { gap: 4px; }
  .paid-rail .ms { min-width: 42px; }
  .paid-rail .ms small { font-size: .46rem; letter-spacing: .04em; }
}
/* short laptop screens: keep the hero and vitrine inside one view */
@media (min-width: 721px) and (max-height: 760px) {
  h1 { font-size: clamp(2rem, 1rem + 2.4vw, 3.1rem); }
  .placard { padding: 24px 28px; }
  .placard .lead { font-size: 1rem; margin-bottom: 18px; }
  .placard .facts { display: none; }
  .page-head { padding: 14px 26px; margin-top: 14px; }
  .page-head h1 { font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.4rem); margin: 6px 0 4px; }
  .page-head .lead { font-size: .98rem; max-width: none; }
  .page-head .coin.lg { --size: 68px; }
  .library-vitrine { margin-top: 14px; max-height: max(380px, calc(100svh - var(--top-h) - 176px)); }
  .page-head .head-object { height: 104px; margin-block: -16px -10px; }
  .history-hero .placard .lead { font-size: .98rem; }
}
@media (min-width: 1101px) and (max-height: 760px) {
  .hall { height: max(400px, calc(100svh - var(--top-h) - 118px)); }
  .chapter-card { padding: 18px 20px; gap: 8px; }
  .ch-top .coin { --size: 54px; }
  .chapter-rail { margin-top: 12px; padding: 6px 12px; }
}

/* 27 MOTION: always on, for every visitor (decided 1 October 2026); no reduced-motion exception ------- */

/* 28 SESSION 14: THE ROOM, THE PLATES, ENDINGS AND TOUCH ------------------------------------ */
/* 28a HOME: THE PHOTOGRAPHED ROOM. The room is a photograph; the armillary stands in it.
   .stage-first is a still of the live scene, placed here and nowhere else: js/home.js reads this box
   to put the live armillary in the same place at the same size. The four numbers (2.4 left, 2.2 up,
   6 wide, 5.6 tall, in units of which the sphere is 3.9 across) are STILL in home.js. */
.home-hero .stage { container: hero / size; }
.home-hero .stage-backdrop {
  --room-x: 62%; --room-y: 66%;
  background: url("../assets/img/room.webp") var(--room-x) var(--room-y) / cover no-repeat,
    linear-gradient(180deg, #EFE9E0 0%, #EBE4DA 66%, #F3F0EC 66.3%, #F1EEEA 100%);
}
.home-hero .stage-canvas { transition: none; }
.stage-first {
  position: absolute; z-index: -1; max-width: none; pointer-events: none; user-select: none;
  --u: calc(min(72.5cqh, 72cqw) / 3.9); --cx: 50cqw;
  left: calc(var(--cx) - 2.4 * var(--u)); top: calc(50cqh - 2.2 * var(--u));
  width: calc(6 * var(--u)); height: calc(5.6 * var(--u));
}
@container hero (min-width: 1100.5px) and (min-aspect-ratio: 5/4) {
  .stage-first { --u: calc(min(72.5cqh, 38cqw) / 3.9); --cx: 70cqw; }
}
@container hero (min-width: 1100.5px) and (max-width: 1240px) and (min-aspect-ratio: 5/4) {
  .stage-first { --u: calc(min(72.5cqh, 36cqw) / 3.9); --cx: 72cqw; }   /* a narrow laptop: clear of the placard */
}
@supports not (container-type: size) { .stage-first { display: none; } }
.home-hero.no-webgl .stage-first, .home-hero .stage.no-webgl .stage-first { opacity: 1 !important; visibility: visible !important; }
.home-hero .stage.no-webgl .stage-canvas { opacity: 0; }
@media (max-width: 720px) {
  .home-hero .stage-backdrop { background-image: url("../assets/img/room-960.webp"), linear-gradient(180deg, #EFE9E0 0%, #EBE4DA 66%, #F3F0EC 66.3%, #F1EEEA 100%); }
}

/* 28b THE MANUSCRIPTS' OWN DRAWINGS. Each manuscript shows its technology, drawn in the plates' hand:
   under the writing on the scroll's face, coming forward under the pointer; beside the title in the reader.
   The pictures are on white and laid on with multiply, so the parchment shows through. Multiply only
   reaches the parchment if no ancestor between the two is filtered or faded, which is why the reader's
   drawing sits beside the head (.ms-opening) and inks in by opacity alone. */
.ms-face { overflow: clip; }
.ms-face > span { position: relative; z-index: 1; }
.ms-draw {
  position: absolute; z-index: 0; right: 0; bottom: 2%; width: 84%; max-width: none; height: auto; pointer-events: none;
  mix-blend-mode: multiply; opacity: .3; transform-origin: 100% 100%;
  -webkit-mask-image: radial-gradient(115% 105% at 72% 66%, #000 34%, transparent 76%); mask-image: radial-gradient(115% 105% at 72% 66%, #000 34%, transparent 76%);
  transition: opacity .6s var(--ease), transform .8s var(--ease-out);
}
.manuscript:hover .ms-draw, .manuscript:focus-visible .ms-draw { opacity: .58; transform: scale(1.04); }
.ms-flyer .ms-draw { display: none; }
.ms-opening { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); column-gap: clamp(18px, 3vw, 34px); align-items: center; }
.ms-opening h2 { font-size: clamp(1.9rem, 1.25rem + 1.9vw, 2.85rem); }
.ms-body .ms-drawing { margin: -6px clamp(-34px, -3vw, -10px) -6px 0; mix-blend-mode: multiply; filter: none; transition: opacity .9s var(--ease-out) .15s, translate .9s var(--ease-out) .15s; }
.ms-drawing img { display: block; width: 100%; height: auto; rotate: -1.2deg; }
@media (max-width: 720px) {
  .ms-draw { width: 92%; bottom: 6%; opacity: .26; }
  .ms-opening { grid-template-columns: minmax(0, 1fr); }
  .ms-body .ms-drawing { margin: 10px -6px 0; }
  .ms-drawing img { rotate: 0deg; }
}

/* 28c TRL: ONE INVENTION AT NINE LEVELS. The level card carries the drawing for its level, larger than
   the old medallion; under the pyramid the nine stand in a row, each a key to its level. */
.level-card .lc-plate {
  position: absolute; top: 18px; right: 18px; width: 152px; margin: 0; --size: auto; mix-blend-mode: multiply;
  display: grid; gap: 2px; justify-items: center; background: none; border: 0; border-radius: 0; box-shadow: none;
}
.level-card .lc-plate img { display: block; width: 100%; height: auto; mix-blend-mode: normal; }
.level-card .lc-plate figcaption { font: italic 500 .8rem/1.3 var(--serif); color: var(--sepia); text-align: center; text-wrap: balance; }
.level-card .lc-top, .level-card > .kicker, .level-card > h3 { padding-right: 162px; }
.level-card > h3 { min-height: 2.5em; }
.inv-strip { margin-top: 18px; padding: 14px 20px 12px; display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 10px 26px; align-items: center; }
.inv-head p:not(.label) { margin-top: 4px; font: italic 500 .98rem/1.4 var(--serif); color: var(--sepia); }
.inv-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
.inv-step {
  width: 100%; display: grid; justify-items: center; gap: 2px; padding: 6px 2px 6px; cursor: pointer;
  border: 1px solid transparent; border-radius: 12px; background: none; color: var(--sepia);
  transition: background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.inv-step i { display: block; width: 100%; max-width: 84px; aspect-ratio: 1; background: url("../assets/img/readiness/strip.webp") calc(var(--n) * 12.5%) 0 / 900% 100% no-repeat; mix-blend-mode: multiply; opacity: .78; transition: opacity .25s var(--ease), scale .35s var(--ease-out); }
.inv-step b { font: 700 .74rem/1 var(--sans); letter-spacing: .04em; min-width: 22px; padding: 4px 0; border-radius: 11px; }
.inv-step.is-gold b { color: #3A2A08; background: linear-gradient(180deg, #F6E3A6, #D8B25E); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 0 #7A5920; }
.inv-step:hover i, .inv-step:focus-visible i { opacity: 1; scale: 1.08; }
.inv-step:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.inv-step[aria-current="true"] { background: linear-gradient(180deg, #FFF9E6, #F7E8C2); border-color: rgba(160, 120, 44, .6); box-shadow: inset 0 0 0 3px rgba(255,255,255,.6), 0 2px 0 rgba(122, 89, 32, .5), 0 8px 14px -8px rgba(var(--shadow-rgb), .5); }
.inv-step[aria-current="true"] i { opacity: 1; }
@media (max-width: 1200px) {
  .level-card .lc-plate { width: 128px; }
  .level-card .lc-top, .level-card > .kicker, .level-card > h3 { padding-right: 138px; }
}
@media (max-width: 980px) {
  .inv-strip { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .level-card .lc-plate { width: 108px; top: 14px; right: 12px; }
  .level-card .lc-plate figcaption { font-size: .74rem; }
  .level-card .lc-top, .level-card > .kicker, .level-card > h3 { padding-right: 114px; }
  .inv-strip { padding: 12px 10px 10px; }
  .inv-row { gap: 0; }
  .inv-step { padding: 4px 0 5px; border-radius: 9px; min-height: 44px; }
  .inv-step b { font-size: .68rem; min-width: 18px; padding: 3px 0; }
}

/* 28d ABOUT: THE TABLE YOU PRESS. Three places at a table seen from above; pressing one (its chair, its
   pad or its coin) moves the lamp there and shows who sits in it. Three radio inputs hold the choice, so
   it works without script and with the arrow keys. Then the way on: the two doors. */
.table-set { display: grid; grid-template-columns: minmax(0, 370px) minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 18px clamp(24px, 3.4vw, 46px); align-items: center; margin-top: clamp(20px, 2.4vw, 28px); }
.table-top { position: relative; grid-row: 1 / span 2; aspect-ratio: 1; filter: drop-shadow(0 22px 20px rgba(var(--shadow-rgb), .34)); }
.table-top img { display: block; width: 100%; height: 100%; }
.table-top .lamp {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(22, 13, 4, 0) 0 12%, rgba(22, 13, 4, .5) 33%) 50% 68% / 200% 200% no-repeat;
  -webkit-mask: url("../assets/img/objects/table-720.webp") center / 100% 100% no-repeat; mask: url("../assets/img/objects/table-720.webp") center / 100% 100% no-repeat;
  transition: background-position .7s var(--ease);
}
.place { position: absolute; cursor: pointer; border-radius: 30%; -webkit-tap-highlight-color: transparent; }
.place .coin { position: absolute; translate: -50% -50%; transition: scale .35s var(--ease-out), box-shadow .35s var(--ease), filter .35s var(--ease); }
.place.p1 { left: 31%; top: 3%; width: 38%; height: 44%; } .place.p1 .coin { left: 50%; top: 77%; }
.place.p2 { left: 0; top: 55%; width: 43%; height: 42%; } .place.p2 .coin { left: 73%; top: 33%; }
.place.p3 { left: 57%; top: 55%; width: 43%; height: 42%; } .place.p3 .coin { left: 27%; top: 35%; }
.place:hover .coin { scale: 1.12; }
#seat-1:checked ~ .table-top .lamp { background-position: 50% 68%; }
#seat-2:checked ~ .table-top .lamp { background-position: 70% 30%; }
#seat-3:checked ~ .table-top .lamp { background-position: 30% 29%; }
#seat-1:checked ~ .table-top .p1 .coin, #seat-2:checked ~ .table-top .p2 .coin, #seat-3:checked ~ .table-top .p3 .coin { scale: 1.3; filter: drop-shadow(0 0 10px rgba(255, 226, 150, .9)); }
#seat-1:focus-visible ~ .table-top .p1 .coin, #seat-2:focus-visible ~ .table-top .p2 .coin, #seat-3:focus-visible ~ .table-top .p3 .coin { outline: 3px solid #fff; outline-offset: 3px; }
.table-set .seats { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 0; align-self: center; }
.table-set .seat { grid-area: 1 / 1; padding: 22px 24px 24px; visibility: hidden; opacity: 0; translate: 0 8px; transition: opacity .4s var(--ease), translate .5s var(--ease-out), visibility 0s .4s; }
#seat-1:checked ~ .seats .s1, #seat-2:checked ~ .seats .s2, #seat-3:checked ~ .seats .s3 { visibility: visible; opacity: 1; translate: 0 0; transition-delay: 0s; }
.table-set .seat { gap: 10px 16px; }
.table-set .seat .coin { --size: 52px; }
.table-set .seat h3 { font-size: 1.42rem; }
.table-set .seat p { font-size: 1.04rem; line-height: 1.6; }
.next-chair { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 22px; align-self: start; padding-top: 16px; border-top: 1px solid var(--line); }
.next-chair-t { font: 600 clamp(1.3rem, 1.05rem + .8vw, 1.7rem)/1.2 var(--serif); color: var(--ink); }
.next-chair-t em { color: var(--gold-deep); }
/* 28e CASE STUDIES: THE NEXT VOLUME. The page's way on, under the index. */
.next-volume { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px clamp(20px, 3vw, 40px); align-items: center; padding: clamp(24px, 3.4vw, 40px) clamp(26px, 4vw, 48px); }
.nv-object { width: clamp(120px, 14vw, 180px); height: auto; filter: drop-shadow(0 14px 12px rgba(0,0,0,.5)); }
.next-volume h2 { margin: 10px 0 8px; }
@media (max-width: 980px) {
  .table-set { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; justify-items: stretch; }
  .table-top { grid-row: auto; width: min(100%, 360px); justify-self: center; }
  .next-volume { grid-template-columns: auto minmax(0, 1fr); }
  .next-volume .key-row { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .place .coin { --size: 40px; }
  .next-volume { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .nv-object { width: 120px; }
  .next-chair { flex-direction: column; align-items: stretch; }
}

/* 28f TOUCH COMFORT. On a finger-driven screen every key named here is at least 44 px in both directions.
   Nothing changes for a mouse. */
@media (pointer: coarse) {
  .rail-coin { min-width: 44px; min-height: 44px; }
  .rail-coin .coin { --size: 40px; }
  .seg .btn.sm, .hall-tools .btn.sm, .chapter-rail > .btn.sm, .trl-line .btn.sm { min-height: 44px; min-width: 44px; }
  .ch-filters .gem { min-height: 44px; padding-block: 6px; }
  .foot-slab ul:not(.social) { gap: 0; }
  .foot-slab ul:not(.social) a, .foot-slab ul:not(.social) button { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .consent { min-height: 44px; align-items: center; }
  .side-other { min-height: 44px; }
  .gear-label::after { content: ""; position: absolute; inset: -8px -4px; }
}
@media (max-width: 720px) {
  /* a centred paragraph of eight to ten lines is slow to read: the four principles read from the left on a phone */
  .principle { align-items: flex-start; text-align: left; padding: 22px 20px 22px; }
  .principle .coin { --size: 64px; }
  .principle .coin b { font-size: 1.4rem; }
  /* the nine drawings become a row to swipe, large enough to see */
  .inv-row { display: flex; gap: 2px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: -4px; padding: 2px 4px; }
  .inv-row::-webkit-scrollbar { display: none; }
  .inv-row li { flex: 0 0 72px; scroll-snap-align: center; }
  .inv-step { padding: 6px 2px 7px; }
  .inv-step i { max-width: 62px; }
}

/* 28g WITHOUT 3D. The pictures that stand in for a 3D scene are fetched only when they are needed
   (they used to be downloaded on every visit and shown on almost none). The library's is a still of
   the library itself, in place of the Session 2 render. */
.how-hero.no-webgl .stage-poster, .how-hero .stage.no-webgl .stage-poster { background-image: url("../assets/img/objects/gears-194.webp"); }
.stage.library.no-webgl .stage-poster { background-image: url("../assets/img/stills/library.webp"); }
/* end of 28 */