/* Anchorage Art Fund – page-specific layouts: entrance, gallery wall, Read room, Returns map, Terms label, Governance diagram. */

/* ══ Entrance ═══════════════════════════════════════════ */
.entrance {
  position: relative; min-height: calc(100vh - var(--head-h)); padding: clamp(28px, 5vw, 64px) 0 clamp(40px, 6vw, 72px);
  background-color: var(--night);
}
@supports (height: 100dvh) { .entrance { min-height: calc(100dvh - var(--head-h)); } }
.entrance::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 72% 45%, rgba(196, 160, 106, 0.10), transparent 70%), radial-gradient(120% 90% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.7)); }
.entrance-grid { position: relative; display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
.entrance-copy { max-width: 620px; }
.entrance-h1 { font-size: clamp(34px, 4.4vw, 62px); line-height: 1.06; margin-bottom: 1.4rem; }
.entrance-lead { font-size: clamp(16px, 1.3vw, 18px); color: var(--parchment); }
.gate-form { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--rule); }
.gate-form .step { color: var(--brass); margin-right: 8px; }
.shield { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; order: -1; }
@media (min-width: 960px) {
  .entrance-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .shield { order: 0; }
}
.shield-rim {
  position: relative; width: min(100%, 560px, 62vh); aspect-ratio: 1 / 1; border-radius: 50%; padding: 3.4%;
  background: var(--gilt);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), inset 0 0 0 2px rgba(255, 236, 190, 0.35), inset 0 0 30px rgba(60, 40, 10, 0.7);
  transition: transform 1.2s var(--ease), filter 1.2s var(--ease);
}
@media (max-width: 959px) { .shield-rim { width: min(78vw, 46vh, 440px); } }
.shield-rim::before { /* the polished bronze mirror of Perseus' shield */
  content: ''; position: absolute; inset: 3.4%; border-radius: 50%;
  background: radial-gradient(60% 55% at 35% 28%, #5b4524, #2a1f10 55%, #120d07 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 230, 170, 0.3), inset 0 10px 40px rgba(0, 0, 0, 0.8);
}
.shield-rim::after { /* slow breathing light, from the upper left */
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(45% 40% at 28% 22%, rgba(255, 238, 200, 0.22), transparent 70%);
  animation: breathe 6s ease-in-out infinite alternate;
}
@keyframes breathe { from { opacity: 0.35; } to { opacity: 1; } }
.shield-canvas { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; }
.shield-rim > div.shield-canvas { position: relative; }
.shield figcaption { text-align: center; max-width: 34em; }
/* Medusa turns away and the light shifts. */
.shield.is-turning .coin { transform: perspective(1400px) rotateY(-42deg) rotateX(5deg) scale(0.94); filter: brightness(0.3) saturate(0.6); }

/* ── The coin: Medusa on the front, the eligibility confirmation on the back ── */
.coin { position: relative; width: min(100%, 560px, 62vh); aspect-ratio: 1 / 1; perspective: 1800px;
  transition: transform 1.2s var(--ease), filter 1.2s var(--ease); }
@media (max-width: 959px) { .coin { width: min(90vw, 460px); } }
.coin-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.9s var(--ease); }
.coin.is-flipped .coin-inner { transform: rotateY(180deg); }
.coin-face { position: absolute; inset: 0; border-radius: 50%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.coin .shield-rim { width: 100%; height: 100%; border: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; display: block; -webkit-tap-highlight-color: transparent; }
.coin-front:focus-visible { outline: 2px solid var(--brass-lt); outline-offset: 6px; }
.coin-back {
  transform: rotateY(180deg); padding: 3.4%; background: var(--gilt);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), inset 0 0 0 2px rgba(255, 236, 190, 0.35), inset 0 0 30px rgba(60, 40, 10, 0.7);
}
.coin-disc {
  width: 100%; height: 100%; margin: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(70% 60% at 40% 30%, #1f1b16, #0f0d0b 75%);
  box-shadow: inset 0 0 0 1px rgba(255, 230, 170, 0.3), inset 0 10px 40px rgba(0, 0, 0, 0.8);
  container-type: inline-size;
}
.coin-content { width: 72%; max-height: 80%; overflow: auto; font-size: 13px; line-height: 1.45; color: var(--parchment); }
@supports (font-size: 1cqi) { .coin-content { font-size: clamp(11px, 3.1cqi, 15px); } }
.coin-title { margin: 0 0 0.9em; text-align: center; font: 700 0.8em/1.3 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass); }
.coin-content .check { font-size: 1em; line-height: 1.45; color: var(--parchment); margin-bottom: 0.75em; gap: 0.7em; }
.coin-content .check input { width: 1.2em; height: 1.2em; margin-top: 0.15em; }
.coin-content .field-error { font-size: 0.9em; text-align: center; margin: 0 0 0.4em; }
.coin-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6em; margin-top: 1em; }
.coin-actions .btn { min-height: 40px; padding: 0 1.2em; font-size: 0.82em; }
.coin-links { text-align: center; font-size: 0.85em; margin: 0.9em 0 0; color: var(--stone); }
@media (prefers-reduced-motion: reduce) { .coin-inner, .coin { transition: none; } }

/* Who may enter – the short version beside the coin */
.who { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--rule); }
.who .kicker { margin-bottom: 8px; }
.who .isnot li { font-size: 15.5px; color: var(--parchment); }
.who .btn { margin-top: 22px; }

/* ══ The descent ════════════════════════════════════════ */
.descent { position: fixed; inset: 0; z-index: 300; background: var(--night); cursor: pointer; overflow: hidden; }
.descent[hidden] { display: none; }
.descent { --depth: 66vh; }
.descent-line { position: absolute; left: 50%; top: 0; width: 1px; height: var(--depth); background: var(--brass); transform-origin: top; transform: scaleY(0); }
.descent-lead { position: absolute; left: 50%; top: 0; width: 24px; margin-left: -12px; transform: translateY(-80px); }
.descent-lead svg { display: block; width: 24px; height: 77px; }
.descent-ground { position: absolute; left: 50%; top: calc(var(--depth) + 74px); width: 70vw; height: 1px; margin-left: -35vw; background: var(--rule); transform: scaleX(0); }
.descent-ground::after { content: ''; position: absolute; left: 50%; top: -4px; width: 9px; height: 9px; margin-left: -4px; background: var(--brass-lt); opacity: 0; }
.descent-caption { position: absolute; left: 0; right: 0; top: calc(var(--depth) + 100px); text-align: center; opacity: 0; }
.descent-skip { position: absolute; right: 20px; top: 20px; min-height: 44px; padding: 0 16px; background: none; border: 1px solid var(--rule); color: var(--stone);
  font: 700 11px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; }
.descent.is-dropping .descent-line { transform: scaleY(1); transition: transform 1.5s cubic-bezier(0.55, 0, 0.85, 0.4); }
.descent.is-dropping .descent-lead { transform: translateY(var(--depth)); transition: transform 1.5s cubic-bezier(0.55, 0, 0.85, 0.4); }
.descent.is-dropping .descent-ground { transform: scaleX(1); transition: transform 0.6s 1.45s var(--ease); }
.descent.is-dropping .descent-ground::after { opacity: 1; transition: opacity 0.2s 1.5s; }
.descent.is-dropping .descent-caption { opacity: 1; transition: opacity 0.5s 1.6s; }

/* ══ The Collection: hero + gallery wall ════════════════ */
.gallery { position: relative; padding: clamp(32px, 5vw, 64px) 0 clamp(48px, 6vw, 80px); overflow: hidden; }
.gallery::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 65% 40%, rgba(196, 160, 106, 0.09), transparent 70%), radial-gradient(130% 100% at 50% 40%, transparent 45%, rgba(0, 0, 0, 0.75)); }
/* Headline across the top, the wall at full width, the key facts underneath – no narrow text column. */
.gallery .wrap { position: relative; }
.gallery-head { display: grid; gap: 20px clamp(40px, 6vw, 96px); margin-bottom: clamp(36px, 5vw, 64px); }
@media (min-width: 960px) { .gallery-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }
.gallery-head h1 { font-size: clamp(42px, 5.6vw, 86px); }
.gallery-copy .intro { margin: 0; color: var(--parchment); font-size: clamp(17px, 1.35vw, 19px); }
.gallery-copy .sub { color: var(--stone); font-size: 15.5px; margin: 0.9em 0 0; }
.gallery-copy .btn-row { margin-top: 24px; }
.gallery-foot { position: relative; margin-top: 44px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.gallery-facts { margin-top: clamp(28px, 4vw, 48px); }
.gallery-facts .facts { margin-top: 0; }
.gallery-facts .footnote { margin-top: 14px; }
@media (min-width: 700px) { .gallery-facts .facts { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .wall--salon { grid-auto-rows: clamp(40px, 3.4vw, 50px); max-width: 1080px; margin: 0 auto; } }

.wall { position: relative; }
.wall-item { position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit; outline-offset: 6px; }
.wall-item .frame { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.wall-item .museum-label { margin-top: 14px; transition: background 0.3s; }
.wall-item:hover .frame, .wall-item:focus-visible .frame { transform: translateY(-4px); box-shadow: 0 30px 50px rgba(0, 0, 0, 0.6); }
.wall-item:hover .frame--modern, .wall-item:focus-visible .frame--modern { box-shadow: 0 30px 50px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 236, 190, 0.45), inset 0 0 12px rgba(60, 40, 10, 0.6); }
.wall-item:hover .museum-label, .wall-item:focus-visible .museum-label { background: #f4eee2; }
.wall-item .frame-wrap { position: relative; }
/* The room's question inside the empty frame: appears on hover or focus (mobile: when the lead lights the frame). */
.frame-line { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 12%; text-align: center;
  font: italic 500 clamp(13px, 7.5cqi, 21px)/1.3 var(--serif); color: var(--parchment); text-wrap: balance;
  opacity: 0; transform: translateY(6px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); pointer-events: none; }
.frame--oval .frame-line { padding: 0 20%; }
.frame-line--over { background: rgba(11, 10, 9, 0.72); }
/* Turned to the wall: the picture is the whole object, its own frame included – no carved border.
   Row and mobile: the same 3 : 4 box as its neighbours (picture centred), so the labels line up; salon: its own 4 : 5. */
.frame.frame--verso { border: 0; border-image: none; background: none; box-shadow: none; }
.frame--verso img { filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.55)); }
.frame--verso .frame-inner { background: none; box-shadow: none; }
.frame--verso picture, .frame--verso img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Salon: wide, low frames get a smaller line, so the question stays inside (grid units --w × --h from the data). */
.wall--salon .frame-line { font-size: clamp(12px, calc(7.5cqi * min(1, var(--h, 3) / var(--w, 2) * 1.4)), 21px); }
.wall-item:hover .frame-line, .wall-item:focus-visible .frame-line { opacity: 0.9; transform: none; }
@media (prefers-reduced-motion: reduce) { .frame-line { transition: none; transform: none; } }
.gallery-bar { display: none; justify-content: flex-end; margin-bottom: 18px; }
.wall-switch { display: inline-flex; align-items: center; gap: 12px; min-height: 36px; padding: 0; background: none; border: 0; color: var(--stone); cursor: pointer; }
.wall-switch .label-caps { font-size: 10px; transition: color 0.2s; }
.wall-switch:hover .label-caps, .wall-switch[aria-checked="true"] .label-caps { color: var(--parchment); }
.wall-switch-track { position: relative; width: 36px; height: 20px; border: 1px solid var(--brass); border-radius: 10px; transition: background 0.25s var(--ease); }
.wall-switch-knob { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--brass); transition: transform 0.25s var(--ease), background 0.25s; }
.wall-switch[aria-checked="true"] .wall-switch-track { background: var(--brass); }
.wall-switch[aria-checked="true"] .wall-switch-knob { transform: translateX(16px); background: var(--night); }
.wall-switch:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }

/* Row: identical frames at eye level, the last one dashed */
@media (min-width: 768px) {
  .gallery-bar { display: flex; }
  .gallery-foot { justify-content: flex-end; }
  .wall--row { display: flex; gap: clamp(10px, 1.3vw, 18px); align-items: flex-start; padding-top: 14px; }
  .wall--row::after { content: ''; position: absolute; left: 0; right: 0; bottom: -28px; height: 1px; background: var(--rule); }
  .wall--row .wall-item { flex: 1 1 0; min-width: 0; }
  .wall--row .frame { --fw: 11; }
  /* The row compares identical frames: modern ones hang carved here too. */
  .wall--row .frame--modern { border-image: url("../images/frame-gilt.webp") 129 126 138 130 stretch; background: none; box-shadow: 0 22px 40px rgba(0, 0, 0, 0.55); }
  .wall--row .frame--modern::before { display: none; }
  .wall--row .museum-label { padding: 8px 9px 9px; }
  .wall--row .museum-label .ml-title { font-size: clamp(13px, 1.15vw, 16px); }
  .wall--row .museum-label .ml-room { font-size: 8.5px; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .wall--row { overflow-x: auto; padding-bottom: 8px; }
  .wall--row .wall-item { flex: 0 0 clamp(110px, 16vw, 150px); }
  .wall--row::after { display: none; }
}

/* Salon: mixed sizes, one oval */
@media (min-width: 768px) {
  .wall--salon { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); grid-auto-rows: clamp(40px, 4.4vw, 62px); gap: 18px clamp(12px, 1.4vw, 20px); grid-auto-flow: dense; padding-top: 14px; }
  .wall--salon .wall-item { grid-column: var(--x, auto) / span var(--w, 2); grid-row: var(--y, auto) / span calc(var(--h, 3) + 1); }
  .wall--salon .frame-wrap { flex: 1; min-height: 0; }
  .wall--salon .frame { aspect-ratio: auto; height: 100%; --fw: 7; }
  .wall--salon .frame--verso { aspect-ratio: 4 / 5; width: auto; max-width: 100%; margin: 0 auto; }
  .wall--salon .frame--oval { --fw: 9; }
  .wall--salon .museum-label { align-self: flex-start; min-width: min(100%, 170px); }
  .wall--salon .museum-label .ml-title { font-size: 15px; }
}

/* Mobile: a vertical hang on the sounding-lead line */
@media (max-width: 767px) {
  .wall { padding: 24px 0 40px; }
  .wall::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--brass); opacity: 0.55; }
  .wall-item { align-items: center; margin: 0 auto; width: 100%; padding: 6vh 0; scroll-margin-top: calc(var(--head-h) + 20px); }
  .wall-item .frame-wrap { width: min(64vw, 300px); }
  .wall-item .frame { --fw: 10; filter: brightness(0.55) saturate(0.8); transition: filter 0.5s var(--ease), transform 0.35s var(--ease); }
  .wall-item .frame--open { filter: none; opacity: 0.55; transition: opacity 0.5s; }
  .wall-item.is-lit .frame { filter: none; }
  .wall-item.is-lit .frame--open { opacity: 1; }
  .wall-item .frame::after { opacity: 0; }
  .wall-item.is-lit .frame::after { opacity: 1; }
  .wall-item.is-lit .frame-line { opacity: 0.9; transform: none; }
  .wall-item .museum-label { position: relative; z-index: 1; min-width: min(64vw, 300px); opacity: 0.6; transition: opacity 0.5s; }
  .wall-item.is-lit .museum-label { opacity: 1; }
  .hang-lead { position: absolute; left: 50%; top: 0; width: 16px; margin-left: -8px; z-index: 3; pointer-events: none; }
  .hang-lead svg { display: block; width: 16px; height: 51px; }
  .hang-line { position: absolute; left: 50%; top: 0; width: 1px; background: var(--brass); z-index: 2; pointer-events: none; }
}
@media (min-width: 768px) { .hang-lead, .hang-line { display: none; } }

/* ══ Story sections on The Collection ═══════════════════ */
.owners { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 860px) { .owners { grid-template-columns: 1fr 1fr; } }
.owners h3 { margin: 10px 0 12px; }
.owners p { color: var(--stone); }
.middle { display: grid; gap: 16px; }
.middle .bar-row { display: grid; gap: 6px; }
.middle .bar-label { display: flex; justify-content: space-between; gap: 16px; font-size: 14.5px; }
.middle .bar-label b { color: var(--parchment); font-weight: 700; }
.middle .bar { height: 14px; background: var(--rule); position: relative; }
.middle .bar span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--stone); }
.middle .bar--fix span { background: var(--brass-lt); }
.ffp { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(10px, 2vw, 22px); margin-bottom: 28px; }
.ffp figcaption { flex-basis: 100%; }
.ffp svg { flex: none; }
.ffp .arrow { color: var(--brass); font-size: 20px; }
.ffp figcaption { font-size: 12px; }

/* ══ How we invest – the Read room ══════════════════════ */
.read-room { display: grid; gap: clamp(32px, 4vw, 56px); align-items: start; }
@media (min-width: 1000px) { .read-room { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.marks-list { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--rule); counter-reset: m; }
.marks-list li { border-bottom: 1px solid var(--rule); }
.marks-list button { display: grid; grid-template-columns: 28px 1fr; gap: 10px; width: 100%; padding: 12px 0; background: none; border: 0; color: var(--parchment); text-align: left; font: 400 15px/1.45 var(--sans); cursor: pointer; }
.marks-list button b { font-weight: 700; }
.marks-list button span.n { font: 800 12px/1.5 var(--sans); color: var(--brass); }
.marks-list button span.d { color: var(--stone); }
.marks-list button[aria-expanded="true"] b { color: var(--brass-lt); }

.verso-stage { position: relative; perspective: 1800px; width: min(100%, 520px, calc((100vh - var(--head-h) - 120px) * 0.8)); margin: 0 auto; }
.verso-note { width: min(100%, 520px); margin-left: auto; margin-right: auto; }
.verso-opener { position: absolute; left: 50%; top: -24px; width: 1px; height: 0; background: var(--brass); z-index: 4; pointer-events: none; }
.verso-opener-lead { position: absolute; left: 50%; top: -24px; width: 18px; margin-left: -9px; z-index: 5; opacity: 0; pointer-events: none; }
.verso-opener-lead svg { display: block; width: 18px; height: 58px; }
.verso-opener-lead .sample { position: absolute; left: 3px; right: 3px; bottom: -3px; height: 4px; background: #b9a27a; border-radius: 0 0 4px 4px; opacity: 0; }
.verso { position: relative; width: 100%; aspect-ratio: 4 / 5; transform-style: preserve-3d; transition: transform 1.3s var(--ease); }
.verso.is-turned { transform: rotateY(180deg); }
.verso-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.verso-back { transform: rotateY(180deg); }
.verso-canvas { position: absolute; inset: 0; overflow: hidden; background: var(--night); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6); }
.verso-canvas picture, .verso-canvas img { display: block; width: 100%; height: 100%; }
.verso-canvas img { object-fit: cover; }
.hotspots { position: absolute; inset: 0; }
.hotspot {
  position: absolute; left: var(--x); top: var(--y); width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 0; padding: 0;
  background: radial-gradient(circle, var(--brass-lt) 0 11px, rgba(216, 188, 132, 0.25) 12px 16px, transparent 17px);
  font: 800 11px/44px var(--sans); color: var(--night); cursor: pointer; opacity: 0; transform: scale(0.6);
  transition: opacity 0.4s, transform 0.4s var(--ease);
}
.hotspot span { position: relative; top: 0; }
.verso.is-turned .hotspot { opacity: 1; transform: none; transition-delay: calc(1.2s + var(--i) * 0.18s); }
.hotspot:hover, .hotspot[aria-expanded="true"] { background: radial-gradient(circle, #fff3d4 0 12px, rgba(216, 188, 132, 0.45) 13px 18px, transparent 19px); }
.verso-note { margin-top: 14px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.verso-turn { margin-top: 16px; }
.mark-card { position: absolute; z-index: 6; left: 6%; right: 6%; bottom: 6%; background: var(--parchment); color: #2a241c; padding: 22px 24px 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6); transform: rotateY(180deg); }
.verso-back .mark-card { transform: none; }
.mark-card[hidden] { display: none; }
.mark-card .ml-room { padding-right: 36px; font: 700 10px/1.3 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: #7d6a4b; }
.mark-card h3 { color: #1b1712; font-size: 25px; margin: 4px 0 10px; }
.mark-card p { font-size: 14.5px; line-height: 1.55; color: #3a3228; margin: 0 0 8px; }
.mark-card p b { color: #1b1712; }
.mark-card .close { position: absolute; right: 8px; top: 8px; min-width: 40px; min-height: 40px; background: none; border: 0; font-size: 22px; color: #5a4e3c; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .verso { transition: none; } .verso.is-turned .hotspot { transition-delay: 0s; } }

/* Committee seats (Decide) */
.seats { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 22px; }
.seat { width: 34px; height: 34px; border: 1px solid var(--brass); position: relative; }
.seat.is-voting { background: var(--brass); }
.seat.is-recused { border-style: dashed; border-color: var(--stone); }
.seat.is-recused::after { content: ''; position: absolute; left: 4px; right: 4px; top: 50%; height: 1px; background: var(--stone); transform: rotate(-45deg); }
.seats-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--stone); }
.seats-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border: 1px solid var(--brass); vertical-align: -1px; }
.seats-legend i.v { background: var(--brass); }
.seats-legend i.r { border-style: dashed; border-color: var(--stone); }
.callout { margin-top: 28px; padding: 22px 24px; border: 1px solid var(--brass); }
.callout p { margin: 0; }
.callout strong { display: block; font: 500 24px/1.25 var(--serif); color: var(--parchment); margin-bottom: 8px; }

/* Rail overview for Find · Read · Decide · Hold */
.moves { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 700px) { .moves { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .moves { grid-template-columns: repeat(4, 1fr); } }
.moves a { display: block; padding: 22px 22px 26px; background: var(--night); text-decoration: none; color: var(--parchment); position: relative; }
.moves a::before { content: ''; position: absolute; left: 22px; top: 0; width: 9px; height: 9px; transform: translateY(-50%); border: 1px solid var(--brass); background: var(--night); }
.moves a.is-fixed::before { background: var(--brass-lt); border-color: var(--brass-lt); }
.moves a:hover { background: var(--panel); }
.moves .label-caps { color: var(--brass); }
.moves strong { display: block; font: 500 34px/1.1 var(--serif); margin: 8px 0 6px; color: var(--parchment); }
.moves span.d { display: block; font-size: 14px; color: var(--stone); }
.move-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 8px; }
.move-head .num { font: 800 13px/1 var(--sans); letter-spacing: 0.14em; color: var(--brass); }
.figures { display: grid; gap: 1px; background: var(--rule); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 32px 0 14px; }
@media (min-width: 700px) { .figures { grid-template-columns: repeat(3, 1fr); } }
.figures > div { background: var(--night); padding: 20px 20px 20px 0; }
.figures .figure sup { font: 700 0.5em/1 var(--sans); color: var(--brass); }

/* ══ Returns – west-to-east map ═════════════════════════ */
.map { width: 100%; height: auto; display: block; }
.map text { font-family: var(--sans); }
.map-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.map-wrap svg { min-width: 640px; }
/* Drop lines fall city by city. */
.map.reveal { opacity: 1; transform: none; }
.map .drop { transform: scaleY(0); transform-box: fill-box; transform-origin: top; }
.map.is-in .drop { transform: none; transition: transform 0.9s var(--ease); transition-delay: calc(var(--i) * 0.16s); }
.no-js .map .drop { transform: none; }
.steps { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.target-box { border: 1px solid var(--brass); padding: 26px 28px; }
.target-box .figure { color: var(--brass-lt); }
.market { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 700px) { .market { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .market { grid-template-columns: repeat(3, 1fr); } }
.market > div { background: var(--night); padding: 24px; }
.market .src { display: block; margin-top: 10px; font-size: 12.5px; color: var(--stone); }

/* ══ Terms – the Fund as a work of art ══════════════════ */
.fund-artwork { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) { .fund-artwork { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.fund-artwork .frame-host { max-width: 440px; }
.fund-artwork .frame { --fw: 9; }
.fund-artwork .frame-inner { display: flex; align-items: center; justify-content: center; text-align: center; }
.fund-artwork .frame-inner p { font: italic 500 clamp(18px, 1.8vw, 22px)/1.35 var(--serif); color: var(--stone); margin: 0; padding: 0 12%; }
.fee-example { display: grid; grid-template-columns: 8fr 2fr 2fr; height: 54px; margin: 18px 0 8px; font: 800 14px/54px var(--sans); text-align: center; }
.fee-example div { border-right: 1px solid var(--night); }
.fee-example .h { background: var(--stone); color: var(--night); }
.fee-example .c { background: var(--brass); color: var(--night); }
.fee-example .s { background: var(--brass-lt); color: var(--night); }
.fee-legend { display: grid; grid-template-columns: 8fr 2fr 2fr; font-size: 12.5px; color: var(--stone); }

/* ══ Governance – parties around the Fund ═══════════════ */
.parties { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 700px) { .parties { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .parties { grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; } .parties .p-fund { grid-column: 2; grid-row: 2; } }
.parties > div { background: var(--night); padding: 22px 22px 24px; }
.parties b { display: block; font: 500 22px/1.2 var(--serif); color: var(--parchment); margin-bottom: 6px; }
.parties span { font-size: 14px; color: var(--stone); }
.parties .p-fund { background: var(--panel); outline: 1px solid var(--brass); outline-offset: -1px; display: flex; flex-direction: column; justify-content: center; }
.parties .p-fund b { color: var(--brass-lt); }
/* One under the other: the entries differ a lot in length. */
.people { display: grid; gap: 28px; max-width: 52em; }
.person { display: grid; grid-template-columns: 88px 1fr; gap: 18px; align-items: start; padding-top: 20px; border-top: 1px solid var(--rule); }
.person img { width: 88px; height: 108px; object-fit: cover; filter: grayscale(0.2); }
.person .ph { width: 88px; height: 108px; border: 1px dashed var(--rule); }
.person b { display: block; font: 500 22px/1.2 var(--serif); color: var(--parchment); }
.person .label-caps { color: var(--brass); display: block; margin: 4px 0 8px; }
.person p { font-size: 15px; color: var(--stone); margin: 0; }

/* ══ Invest ═════════════════════════════════════════════ */
.panel-alt { background: var(--panel-2); }
.ask { list-style: none; margin: 0; padding: 0; counter-reset: q; }
.ask li { display: grid; gap: 6px 24px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 800px) { .ask li { grid-template-columns: 1.4fr 1fr; } }
.ask .q { font: 500 21px/1.3 var(--serif); color: var(--parchment); }
.ask .q span { font: 800 12px/1 var(--sans); color: var(--brass); margin-right: 10px; }
.ask .a { color: var(--brass-lt); font-size: 15.5px; }
.contacts { display: grid; gap: 24px; }
@media (min-width: 800px) { .contacts { grid-template-columns: repeat(3, 1fr); } }
.contacts > div { border-top: 1px solid var(--brass); padding-top: 16px; font-size: 15px; color: var(--stone); }
.contacts b { display: block; color: var(--parchment); font-size: 16px; margin-bottom: 4px; }
.form-status { padding: 16px 18px; border: 1px solid var(--brass); color: var(--parchment); }

/* ══ Legal pages ════════════════════════════════════════ */
.legal { max-width: 46em; }
.legal h2 { font-size: clamp(24px, 2.2vw, 30px); margin: 2.2em 0 0.6em; }
.legal h2:first-child { margin-top: 0; }
.legal ul { margin: 0 0 1em; padding-left: 1.2em; }
.legal li { margin-bottom: 0.35em; }
.legal li::marker { color: var(--brass); }
@media (min-width: 768px) {
  .wall--row { align-items: stretch; }
  .wall--row .museum-label { flex: 1; }
}
.person--text { grid-template-columns: 1fr; }
.person--text p + p { margin-top: 10px; }
.quote--sm { margin-top: 16px; padding-left: 18px; }
.quote--sm p { font-size: clamp(18px, 1.6vw, 21px); margin: 0; }
/* Find – the network row */
.network { margin-top: clamp(32px, 4vw, 48px); }
.network .label-caps { color: var(--brass); margin: 0 0 14px; }
.network h3 { font-size: clamp(22px, 1.8vw, 26px); }
/* The entrance without strip and header: the full screen for headline and coin. */
body[data-chrome="bare"] { --head-h: 0px; }
/* Entrance top bar: "Turn the shield to enter" as a quiet hint on the left, languages on the right */
.entrance-bar { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(12px, 2vw, 24px); }
.enter-hint {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0; background: none; border: 0; cursor: pointer;
  font: 700 10.5px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone);
  transition: opacity 0.4s, color 0.2s;
}
.enter-hint:hover, .enter-hint:focus-visible { color: var(--parchment); }
.enter-hint span { color: var(--brass); font-size: 13px; }
.coin-flipped .enter-hint { opacity: 0; pointer-events: none; }