/* Washington DC Wedding Reviews. The well-kept board: tiles like city blocks, warm black and gold. */
:root {
  --bg: #0c0a08;
  --surface: #1a1714;
  --surface-2: #24201b;
  --ink: #ffffff;
  --muted: #a8a29a;
  --accent: #c9a45a;
  --accent-ink: #0c0a08;
  --stone: #d9d2c5;
  --stone-ink: #0c0a08;
  --gap: 8px;
  --m: 8px;
  --pad: clamp(18px, 1.8vw, 24px);
  --step-small: 0.9375rem;
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.05rem + 0.9vw, 2rem);
  --step-head: clamp(2.25rem, 1.4rem + 3vw, 4rem);
  --ease: cubic-bezier(.2, .7, .1, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Stack Sans Text', system-ui, sans-serif; font-size: var(--step-body); line-height: 1.5; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--accent-ink); }
h1, h2, h3 { font-family: 'Stack Sans Headline', system-ui, sans-serif; font-weight: 300; letter-spacing: -0.022em; line-height: 1.05; margin: 0; text-wrap: balance; }
p { margin: 0; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.board { display: flex; flex-direction: column; gap: var(--gap); padding: var(--m); }
.t { background: var(--surface); }
:where(.hero3, .rail-l, .rail-r, .t-links, .agenda-body, .mosaic, .frames-row, .faq, .cat-hero, .srcs, .foot-cols) > * { min-width: 0; }

/* name band, cropped at both ends */
/* --bw is set a touch wider than the tile, so the W and the C are cut by the tile edges at every width
   (by design) while the full height of the letters, descender included, stays inside. */
.t-band { --bw: 15.5vw; height: calc(var(--bw) * 1.02); overflow: hidden; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.band-word { font-family: 'Stack Sans Headline', sans-serif; font-weight: 400; font-size: var(--bw); letter-spacing: -0.04em; line-height: 1; text-decoration: none; display: block; }
.band-word:hover { color: var(--ink); }
.t-links { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap); }
.t-link { height: 64px; padding: 12px var(--pad); text-decoration: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; font-size: 16px; transition: background .2s; }
.t-link span { color: var(--muted); font-size: var(--step-small); }
.t-link:hover { background: var(--surface-2); color: var(--ink); }

/* hero: rails and a centre picture */
.hero3 { display: grid; grid-template-columns: 2fr 8fr 2fr; gap: var(--gap); height: max(520px, calc(100svh - 170px - 64px - 4 * var(--gap))); }
.rail-l, .rail-r { display: grid; gap: var(--gap); }
.rail-l { grid-template-rows: 1fr auto; }
.t-pic { overflow: hidden; }
.t-pic img { width: 100%; height: 100%; object-fit: cover; }
.t-facts { list-style: none; margin: 0; padding: var(--pad); display: flex; flex-direction: column; gap: 6px; font-size: 16px; }
.centre { position: relative; overflow: hidden; }
.centre img { width: 100%; height: 100%; object-fit: cover; }
.statement { position: absolute; left: 0; right: 30%; bottom: 0; background: var(--bg); padding: var(--pad) var(--pad) var(--pad) var(--pad); font-size: clamp(1.25rem, 1rem + 1.1vw, 2.125rem); line-height: 1.2; font-family: 'Stack Sans Headline', sans-serif; font-weight: 300; }
.rail-r { grid-template-rows: repeat(5, 1fr); }
.rail-r .t { padding: 16px; font-size: 16px; }
.r1 { background: #3a332b; } .r2 { background: #4f4538; } .r3 { background: #6b5d47; } .r4 { background: #75633f; }
.r5 { background: var(--accent); color: var(--accent-ink); text-decoration: none; font-size: 17px !important; font-weight: 500; display: flex; align-items: flex-start; transition: background .2s, transform .15s var(--ease); }
.r5:hover { background: var(--ink); color: var(--accent-ink); }
.r5:active { transform: scale(.98); }

/* agenda: category tabs and banded rows */
.agenda { background: var(--surface); padding: clamp(48px, 6vw, 96px) var(--pad); margin-top: clamp(40px, 5vw, 88px); }
.agenda-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 56px; }
.agenda-head h2 { font-size: clamp(2.25rem, 1.2rem + 3vw, 3.75rem); max-width: 18ch; }
.soft { color: var(--muted); }
.t-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 500; white-space: nowrap; transition: background .2s, transform .15s var(--ease); }
.t-btn:hover { background: var(--ink); color: var(--accent-ink); }
.t-btn:active { transform: scale(.97); }
.agenda-body { display: grid; grid-template-columns: 150px 1fr; gap: 40px; }
.tabs { display: flex; flex-direction: column; gap: 6px; }
.tabs button { font: inherit; text-align: left; border: 0; background: var(--surface-2); color: var(--ink); height: 64px; padding: 10px 14px; display: flex; flex-direction: column; justify-content: center; cursor: pointer; transition: background .2s; }
.tabs button span:first-child { font-size: 16px; }
.tab-n { font-size: 15px; color: var(--muted); }
.tabs button:hover { background: #2f2a24; }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.tabs button[aria-selected="true"] .tab-n { color: #4a4540; }
.panel[hidden] { display: none; }
.quads { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.quads button { font: inherit; font-size: 16px; border: 0; background: var(--surface-2); color: var(--ink); min-height: 44px; padding: 8px 16px; cursor: pointer; transition: background .2s, transform .15s; }
.quads button:hover { background: #2f2a24; }
.quads button:active { transform: scale(.97); }
.quads button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.bands { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.br { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 20px; min-height: 76px; padding: 12px 20px; background: var(--surface-2); }
.br:nth-child(even) { background: #201c18; }
.br[hidden] { display: none; }
.br-q { font-variant-numeric: tabular-nums; font-size: 20px; color: var(--accent); }
.br-main { display: flex; flex-direction: column; gap: 2px; }
.br-name { font-size: 18px; font-weight: 500; text-decoration: none; }
a.br-name:hover { text-decoration: underline; }
.br-note { font-size: 16px; color: var(--muted); }
.br-rate { text-align: right; font-size: 22px; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; }
.br-rate span { font-size: 16px; color: var(--muted); }
.br-rec { background: var(--stone) !important; color: var(--stone-ink); }
.br-rec .br-q, .br-rec .br-note, .br-rec .br-rate span { color: #3d372f; }
.panel-foot { margin-top: 16px; font-size: var(--step-small); color: var(--muted); }

/* marquee */
.marquee { overflow: hidden; background: var(--accent); color: var(--accent-ink); padding: 18px 0; margin-top: clamp(56px, 7vw, 120px); }
.mq-track { display: flex; width: max-content; animation: mq 40s linear infinite; }
.mq-track span { font-family: 'Stack Sans Headline', sans-serif; font-size: clamp(48px, 7vw, 112px); letter-spacing: -0.03em; line-height: 1; padding-right: .6em; white-space: nowrap; }
.marquee:hover .mq-track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }

/* showcase: one image cut across tiles */
.mosaic-sec { margin-top: var(--gap); }
.mosaic { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap); container-type: inline-size; }
.mt { aspect-ratio: 1; overflow: hidden; }
/* One photo (1800 x 1765) laid across the board at its true proportions: it spans the board's full
   width, each tile shows its own window onto it, and the extra height is cropped mostly from the
   bottom so the top of the dome stays in. --t is one tile, measured from the board (cqw). */
.mt-pic {
  --t: calc((100cqw - 5 * var(--gap)) / 6);
  --ih: calc(100cqw * 1765 / 1800);
  --gh: calc(4 * var(--t) + 3 * var(--gap));
  background-image: url(/img/u-s-capitol-building-dome-washington.jpg);
  background-size: 100cqw auto;
  background-position: calc(var(--c) * (var(--t) + var(--gap)) * -1) calc(var(--r) * (var(--t) + var(--gap)) * -1 - (var(--ih) - var(--gh)) * 0.2);
  transition: transform .6s var(--ease);
}
.mt-pic:hover { transform: scale(1.04); }
.mt-col { padding: 16px; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; font-size: 17px; }
.mt-gold { background: var(--accent); color: var(--accent-ink); }
.mt-gold h2 { font-size: clamp(1.25rem, 1.75vw, 2rem); hyphens: manual; }
.mt-dark { background: var(--surface-2); transition: background .2s; }
.mt-dark:hover { background: #2f2a24; color: var(--ink); }
.mt-stone { background: var(--stone); color: var(--stone-ink); }
.mt-act { background: var(--ink); color: var(--bg); font-weight: 500; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.25; transition: background .2s; }
.mt-act:hover { background: var(--accent); color: var(--accent-ink); }
.mt-n { font-family: 'Stack Sans Headline', sans-serif; font-size: clamp(2.5rem, 4vw, 4rem); line-height: 1; letter-spacing: -0.03em; display: block; }

/* frames */
/* Section heads outside tiles share the tiles' text edge: board margin + tile padding. */
.sec-h { font-size: clamp(2rem, 4vw, 3.5rem); padding-left: var(--pad); justify-self: start; }
.frames { display: grid; grid-template-columns: 4fr 8fr; gap: 24px; padding-top: clamp(64px, 7vw, 120px); align-items: start; }
.frames-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
/* each quote is a tile: photo on top, words below with the tiles' padding */
.frame { margin: 0; background: var(--surface); }
.frame img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; }
.frame figcaption { padding: var(--pad); font-size: 16px; display: flex; flex-direction: column; gap: 6px; }
.fr-name { color: var(--ink); }
.fr-role { color: var(--muted); }
.fr-q { color: var(--ink); line-height: 1.5; }

/* faq */
.faq { display: grid; grid-template-columns: 4fr 8fr; gap: 24px; padding-top: clamp(64px, 7vw, 120px); align-items: start; }
.faq .sec-h { position: sticky; top: 32px; }
.faq-list { display: flex; flex-direction: column; gap: var(--gap); }
.faq details { background: var(--surface); transition: background .2s; }
.faq summary { list-style: none; cursor: pointer; min-height: 72px; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 20px; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq details p { padding: 0 24px 24px; max-width: 52ch; font-size: 17px; }
.faq details[open] { background: var(--accent); color: var(--accent-ink); }
.faq details[open] a { color: var(--accent-ink); }
.plus { position: relative; width: 16px; height: 16px; flex: none; }
.plus::before, .plus::after { content: ''; position: absolute; left: 0; top: 6.5px; width: 16px; height: 3px; background: currentColor; transition: transform .25s var(--ease); }
.plus::after { transform: rotate(90deg); }
details[open] .plus::after { transform: rotate(0); }

/* category hero */
.cat-hero { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--gap); height: max(560px, 72svh); }
.cat-title { grid-column: 1 / span 5; grid-row: 1 / span 2; padding: var(--pad); display: flex; flex-direction: column; justify-content: flex-end; gap: 20px; }
.cat-title h1 { font-size: clamp(2.75rem, 1.5rem + 4vw, 5.5rem); }
.cat-title p { font-size: var(--step-lead); line-height: 1.25; font-family: 'Stack Sans Headline', sans-serif; font-weight: 300; max-width: 26ch; }
.cat-title p.lead-s { font-size: clamp(1.125rem, 0.95rem + 0.55vw, 1.5rem); line-height: 1.3; max-width: 34ch; }
.cat-title .disc { font-size: var(--step-small); font-family: 'Stack Sans Text', sans-serif; color: var(--muted); }
.cat-pic { grid-column: 6 / span 7; grid-row: 1 / span 2; overflow: hidden; }
.cat-pic img, .cat-pic2 img { width: 100%; height: 100%; object-fit: cover; }
.cat-pic { grid-column: 6 / span 5; }
.cat-pic2 { grid-column: 11 / span 2; grid-row: 1; overflow: hidden; }
.cat-fact { grid-column: 11 / span 2; grid-row: 2; background: var(--accent); color: var(--accent-ink); padding: 16px; display: flex; flex-direction: column; justify-content: space-between; font-size: 16px; }
/* auto-fit: a company with one review source fills the row instead of leaving half of it empty */
.srcs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--gap); }
.src { min-height: 180px; padding: var(--pad); text-decoration: none; display: flex; flex-direction: column; justify-content: space-between; transition: background .2s; }
.src:hover { background: var(--surface-2); color: var(--ink); }
.src-act { background: var(--ink); color: var(--bg); font-weight: 500; }
.src-act:hover { background: var(--accent); color: var(--accent-ink); }
.reviews { margin-top: var(--gap); }

/* review explorer */
.rx-bar { display: grid; grid-template-columns: 1fr auto; gap: 16px 6px; max-width: 900px; }
.rx-label { display: block; font-size: var(--step-small); color: var(--muted); margin-bottom: 6px; }
.rx input, .rx select { font: inherit; font-size: 18px; width: 100%; border: 0; border-radius: 0; background: var(--surface-2); color: var(--ink); padding: 16px 18px; }
.rx input:focus, .rx select:focus { outline: 3px solid var(--accent); outline-offset: 0; }
.rx-tries { margin-top: 16px; color: var(--muted); font-size: 16px; }
.rx-tries button { font: inherit; font-size: 16px; border: 0; background: var(--surface-2); color: var(--ink); min-height: 44px; padding: 8px 14px; margin: 4px 4px 0 0; cursor: pointer; transition: background .2s; }
.rx-tries button:hover { background: var(--accent); color: var(--accent-ink); }
.rx-count { margin: 32px 0 12px; color: var(--muted); font-size: var(--step-small); }
.rx-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.rv { background: var(--surface-2); padding: 24px; }
.rv-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 15px; align-items: baseline; }
.rv-name { font-weight: 500; }
.rv-src, .rv-stars { color: var(--muted); }
.rv-title { font-weight: 500; margin-top: 8px; }
.rv-text { margin-top: 10px; font-size: 17px; }
.rv mark { background: var(--accent); color: var(--accent-ink); }
.rx-more { font: inherit; margin-top: 16px; border: 0; background: var(--ink); color: var(--bg); padding: 16px 26px; font-weight: 500; cursor: pointer; transition: background .2s; }
.rx-more:hover { background: var(--accent); }

/* footer: the mark built from blocks */
.foot { background: var(--surface); margin-top: clamp(64px, 7vw, 120px); padding: clamp(32px, 4vw, 56px) var(--pad) var(--pad); }
.blocks { display: flex; align-items: flex-end; gap: 4px; height: 34svh; min-height: 200px; }
.blk { flex: 1; height: var(--h); background: var(--accent); color: var(--surface); display: flex; align-items: flex-end; justify-content: center; font-family: 'Stack Sans Headline', sans-serif; font-weight: 400; font-size: clamp(32px, 7vw, 120px); line-height: .8; padding-bottom: 8px; transform-origin: bottom; }
.blk:nth-child(3n) { background: var(--stone); }
.blk:nth-child(4n) { background: #8e7a52; }
.blk.blk-gap { flex: .4; background: none; }
.foot-cols { display: grid; grid-template-columns: 2fr 2fr 4fr 4fr; gap: 24px; margin-top: 56px; font-size: 16px; }
.foot-cols p { max-width: 60ch; }
.foot-cols ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
/* footer links get a full 44px tap height without changing how the list looks */
.foot-cols ul a { display: inline-flex; align-items: center; min-height: 40px; }
.foot-disclose { color: var(--ink); }
.foot-last { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 48px; font-size: 15px; color: var(--muted); }
.foot-last p { max-width: 75ch; }

/* motion */
.band-word { animation: rise 1s var(--ease) both; }
.centre img { animation: slow 30s ease-in-out infinite alternate; }
@keyframes slow { from { transform: scale(1); } to { transform: scale(1.08); } }
.statement { animation: rise .8s var(--ease) .2s both; }
.t-link, .rail-r .t, .rail-l .t, .br, .mt, .frame, .faq details, .rv, .src, .blk, .cat-hero > * { animation: rise .6s var(--ease) both; }
.t-link:nth-child(2), .rail-r .t:nth-child(2) { animation-delay: .06s; } .t-link:nth-child(3), .rail-r .t:nth-child(3) { animation-delay: .12s; }
.t-link:nth-child(4), .rail-r .t:nth-child(4) { animation-delay: .18s; } .t-link:nth-child(5), .rail-r .t:nth-child(5) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.js-rise [data-rise] { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js-rise [data-rise].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js-rise [data-rise] { opacity: 1; transform: none; }
}

/* phone: its own board */
@media (max-width: 860px) {
  :root { --gap: 6px; --m: 6px; }
  .t-links { grid-template-columns: 1fr 1fr; }
  .t-links a:last-child { grid-column: span 2; }
  .hero3 { grid-template-columns: 1fr 1fr; height: auto; }
  .centre { grid-column: 1 / -1; grid-row: 1; }
  .centre img { aspect-ratio: 4 / 3; height: auto; }
  .statement { position: static; font-size: 22px; }
  .rail-l { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .t-pic img { aspect-ratio: 3 / 4; height: auto; }
  .rail-r { grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .rail-r .t { min-height: 84px; }
  .r5 { grid-column: span 2; }
  .agenda-head { flex-direction: column; align-items: flex-start; margin-bottom: 40px; }
  .agenda-body { grid-template-columns: 1fr; gap: 20px; }
  .tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tabs button { height: 60px; padding: 8px 12px; }
  .mt-col { font-size: 15px; padding: 14px 16px; }
  .mt-gold h2 { font-size: 20px; }
  .mt-n { font-size: 32px; }
  .frames, .faq { grid-template-columns: 1fr; }
  .faq .sec-h { position: static; }
  .faq summary { font-size: 18px; min-height: 64px; padding: 16px 20px; }
  .cat-hero { grid-template-columns: 1fr 1fr; grid-template-rows: auto; height: auto; }
  .cat-title { grid-column: 1 / -1; grid-row: auto; padding-top: 48px; }
  .cat-title h1 { font-size: 11vw; }
  .cat-pic { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
  .cat-pic2, .cat-fact { grid-column: span 1; grid-row: auto; aspect-ratio: 1; }
  .rx-bar, .rx-list { grid-template-columns: 1fr; }
  .blocks { height: 22svh; min-height: 140px; }
  .blk { font-size: 8vw; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .foot-cols ul a { min-height: 44px; }
  .foot-disclose, .foot-cols p:last-child { grid-column: span 2; }
  .foot-last { flex-direction: column; align-items: flex-start; }
}

.pics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.pics-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pics .t { overflow: hidden; }
.pics img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .8s var(--ease); animation: rise .6s var(--ease) both; }
.pics .t:hover img { transform: scale(1.05); }
.agenda-sub { color: var(--muted); max-width: 40ch; }
.agenda > .bands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.cat-fact, .src { font-size: 18px !important; }
@media (max-width: 860px) {
  .pics { grid-template-columns: 1fr 1fr; }
  .agenda > .bands { grid-template-columns: 1fr; }
  .t-link { flex-direction: column; height: auto; min-height: 64px; gap: 2px; }
  .mt-act { font-size: 18px !important; }
  .reviews { margin-top: 48px; }
}

/* tablet: keep the desktop compositions, re-cut for the narrower board */
@media (min-width: 601px) and (max-width: 860px) {
  .mosaic { grid-template-columns: repeat(4, 1fr); }
  /* 4 x 6 board is taller than wide, so the photo is sized to the board's height and cropped at the sides */
  .mt-pic {
    --t: calc((100cqw - 3 * var(--gap)) / 4);
    --gh: calc(6 * var(--t) + 5 * var(--gap));
    --iw: calc(var(--gh) * 1800 / 1765);
    background-size: auto var(--gh);
    background-position: calc(var(--c4) * (var(--t) + var(--gap)) * -1 - (var(--iw) - 100cqw) * 0.45) calc(var(--r4) * (var(--t) + var(--gap)) * -1);
  }
  .frames-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .t-pic img { aspect-ratio: 4 / 3; }
  .t-facts { font-size: 18px; gap: 10px; justify-content: center; }
  .cat-hero { grid-template-columns: 2fr 1fr; grid-template-rows: auto 232px 232px; }
  .cat-title { grid-row: 1; }
  .cat-pic { grid-column: 1; grid-row: 2 / span 2; aspect-ratio: auto; }
  .cat-pic2 { grid-column: 2; grid-row: 2; aspect-ratio: auto; }
  .cat-fact { grid-column: 2; grid-row: 3; aspect-ratio: auto; }
  .pics-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* phone */
@media (max-width: 600px) {
  .tabs { grid-template-columns: 1fr 1fr; }
  .tabs button:last-child { grid-column: span 2; }
  .br { grid-template-columns: 1fr auto; gap: 8px 12px; padding: 14px 16px; }
  .br-q { grid-column: 1 / -1; font-size: 15px; }
  .mosaic { grid-template-columns: 1fr 1fr; }
  .mt { aspect-ratio: auto; min-height: 150px; }
  .mt-pic { display: none; }
  /* the first four picture tiles become a 2 x 2 window onto the dome */
  .mt-ph {
    display: block; aspect-ratio: 1; min-height: 0;
    --t: calc((100cqw - var(--gap)) / 2);
    --gh: calc(2 * var(--t) + var(--gap));
    background-position: calc(var(--cp) * (var(--t) + var(--gap)) * -1) calc(var(--rp) * (var(--t) + var(--gap)) * -1 - (var(--ih) - var(--gh)) * 0.2);
  }
  .mt-gold { grid-column: span 2; min-height: 0; }
  .frames-row { grid-template-columns: 1fr; gap: 40px; }
  .pics-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}