/* INTERACTIVE EXHIBITS. Archetype: Place/Experience for museums and visitor centers.
   Metaphor: the gallery wall label. The page is a painted gallery wall; each piece of work is a screen set
   into it under its own spotlight, with a tombstone label beside it. Sibling of /events/ (same menu, same
   button shapes, same logo), with its own wall, its own type and its own brass. */
:root {
  color-scheme: dark;
  --wall: #1b2420;        /* the painted feature wall, a deep gallery green */
  --wall-lit: #263330;    /* the same paint where a light falls on it */
  --label: #f1efe8;       /* label stock */
  --ink: #1a201d;         /* label print */
  --ink-soft: #4d5651;
  --brass: #c9a35a;       /* fixtures, rails, the plaque */
  --brass-hi: #e6c789;
  --text: #ecebe3;
  --muted: rgba(232, 231, 220, 0.74);
  --yellow: var(--brass-hi); /* site-nav.css reads this for the current link and the narrow quote link */
  --line: rgba(201, 163, 90, 0.26);
  --serif: "Archivo", system-ui, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--wall); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; color: var(--text); font-family: var(--sans); font-size: 1.04rem; line-height: 1.62;
  background: var(--wall); isolation: isolate; overflow-x: clip;
}
/* the wall's paint: a faint roller grain so no stretch of wall reads as an empty page */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
a { color: var(--brass-hi); text-underline-offset: 3px; }
a:hover { color: #fff; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 3px; border-radius: 6px; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; letter-spacing: -.012em; font-optical-sizing: auto; }
h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.04; }
h3 { font-size: clamp(1.3rem, 2vw, 1.55rem); line-height: 1.15; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- the site menu (site-nav.css supplies the links) ---------- */
.top { position: relative; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; max-width: 1240px; margin: 0 auto; padding: 16px; }
.home { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-family: var(--serif); font-size: 1.15rem; font-weight: 500; }
.home img { width: 34px; height: auto; transition: transform .25s ease; }
.home:hover img { transform: rotate(-12deg) scale(1.08); }
.home:hover { color: var(--brass-hi); }
.start { color: var(--ink); background: var(--brass); text-decoration: none; font-weight: 700; font-size: .92rem; padding: .6em 1.1em; border-radius: 999px; white-space: nowrap; transition: background .2s, box-shadow .2s, transform .2s; }
.start:hover { color: var(--ink); background: var(--brass-hi); box-shadow: 0 0 0 4px rgba(201, 163, 90, .2); transform: translateY(-1px); }
.sitenav a { color: rgba(236, 235, 227, .82); }
.sitenav a:hover { background: rgba(201, 163, 90, .1); }
.menu-btn { box-shadow: 0 0 0 1px rgba(201, 163, 90, .45) inset; }
@media (max-width: 1180px) { .sitenav { background: #17201c; } }
@media (max-width: 560px) { .start { display: none; } }

/* ---------- buttons: brass fixtures ---------- */
.go-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; min-height: 50px; padding: 0 22px; border-radius: 999px; font-weight: 700; font-size: 1rem; text-decoration: none; transition: transform .15s, background .15s, color .15s, box-shadow .15s; }
.btn--brass { color: var(--ink); background: linear-gradient(180deg, var(--brass-hi), var(--brass)); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 -2px 0 rgba(0,0,0,.18) inset, 0 8px 22px rgba(0,0,0,.3); }
.btn--brass:hover { color: var(--ink); transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 -2px 0 rgba(0,0,0,.18) inset, 0 0 0 5px rgba(201, 163, 90, .18), 0 12px 28px rgba(0,0,0,.35); }
.btn--brass:active { transform: translateY(1px); }
.btn--line { color: var(--text); box-shadow: 0 0 0 1.5px rgba(201, 163, 90, .6) inset; }
.btn--line:hover { color: var(--ink); background: var(--brass-hi); box-shadow: none; }
.btn--ink { color: var(--ink); box-shadow: 0 0 0 1.5px rgba(26, 32, 29, .45) inset; }
.btn--ink:hover { background: var(--ink); color: var(--label); }

/* ---------- the screen set into the wall ---------- */
/* A deep bezel and a recess shadow, so it reads as hardware built into the wall. The spotlight above it brightens
   on hover: the piece you are about to step into is the one that is lit. */
.screen { position: relative; isolation: isolate; display: block; border-radius: 10px; padding: 10px; background: #0b0f0d;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 2px 0 rgba(255,255,255,.05) inset, 0 30px 60px -20px rgba(0,0,0,.7), 0 0 0 8px rgba(0,0,0,.12);
  transition: transform .3s ease, box-shadow .3s ease; }
.screen::before { content: ""; position: absolute; z-index: -1; left: 6%; right: 6%; top: -90px; height: 260px; pointer-events: none;
  background: radial-gradient(ellipse 45% 42% at 50% 40%, rgba(255, 236, 196, .13), transparent 100%); opacity: .7; transition: opacity .3s ease; }
.screen video, .screen img { display: block; width: 100%; border-radius: 4px; object-fit: cover; background: #10140f; }
.screen:hover, .screen:focus-visible { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(201, 163, 90, .55), 0 2px 0 rgba(255,255,255,.05) inset, 0 40px 70px -20px rgba(0,0,0,.8), 0 0 0 8px rgba(0,0,0,.12); }
.screen:hover::before, .screen:focus-visible::before { opacity: 1; }
.screen__go { position: absolute; right: 22px; bottom: 22px; padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: .92rem;
  color: var(--ink); background: var(--brass-hi); opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; pointer-events: none; }
.screen:hover .screen__go, .screen:focus-visible .screen__go { opacity: 1; transform: none; }
@media (hover: none) { .screen__go { opacity: 1; transform: none; } }

/* ---------- the wall label ---------- */
.label { display: block; background: var(--label); color: var(--ink); border-radius: 2px; padding: 14px 16px 15px;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 14px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.4); font-size: .92rem; line-height: 1.45; }
.label a { color: var(--ink); }
.label a:hover { color: #6b4f17; }
.label a:focus-visible { outline-color: var(--ink); }
.label__title { display: block; font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.2; margin-bottom: 4px; }
.label__line { display: block; color: var(--ink-soft); }
.label__credit { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(26, 32, 29, .16); color: var(--ink-soft); font-size: .86rem; }

/* ---------- hero: the wall text and the lit screen ---------- */
.hero { position: relative; isolation: isolate; max-width: 1240px; margin: 0 auto; padding: clamp(1.2rem, 4vh, 3rem) 16px 0; }
/* the gallery's overhead light falling on the wall behind the headline */
.hero::before { content: ""; position: absolute; z-index: -1; inset: -90px calc(50% - 50vw) auto; height: 820px; pointer-events: none;
  background: radial-gradient(ellipse 46% 60% at 62% 32%, rgba(255, 233, 190, .085), transparent 70%), radial-gradient(ellipse 60% 50% at 30% 10%, rgba(255, 233, 190, .05), transparent 70%); }
.hero__text { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.2rem, 4vw, 3.6rem); align-items: end; }
.hero h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1; font-weight: 450; letter-spacing: -.022em; max-width: 15ch; text-wrap: balance; }
.lede { margin: 0 0 1.1rem; color: var(--muted); max-width: 46ch; }
.price { margin: 0 0 1.2rem; font-family: var(--serif); font-size: 1.45rem; color: var(--brass-hi); }
.piece--hero { margin: clamp(1.8rem, 5vh, 3rem) 0 0; display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 24px; align-items: end; }
.screen--wide video { aspect-ratio: 2560 / 889; }
.piece--hero .label { align-self: end; }

main { max-width: 1240px; margin: 0 auto; padding: 0 16px clamp(3rem, 8vh, 5rem); }
section { padding: clamp(3.6rem, 10vh, 6.4rem) 0 0; }

/* ---------- the work ---------- */
.intro { max-width: 760px; }
.intro p { color: var(--muted); max-width: 60ch; margin: 1rem 0 0; }
.case { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(1.6rem, 5vw, 4.4rem); align-items: start; margin-top: clamp(2.4rem, 6vh, 3.6rem); }
.case--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
.case--flip .case__media { order: 2; }
.screen--tall img { aspect-ratio: 9 / 13; }
.case__body { display: grid; gap: 1.4rem; align-content: start; }
.label--full { max-width: 520px; margin: 0; }
.label--full dt:not(.sr) { font-weight: 700; font-size: .8rem; margin-top: 8px; color: var(--ink); }
.label--full dd { margin: 0; }
.label--full dd:not([class]) { color: var(--ink-soft); }
.case__text { max-width: 62ch; }
.case__text p { margin: 0 0 1rem; color: var(--muted); }
.case__text p:last-child { margin-bottom: 0; }

/* stills: small prints hung in a row, each one a door to the spot it shows */
.stills { list-style: none; padding: 0; margin: clamp(2rem, 5vh, 3rem) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); }
.stills a { display: block; text-decoration: none; color: var(--muted); font-size: .9rem; }
.stills img { aspect-ratio: 16 / 9; object-fit: cover; border: 6px solid #0b0f0d; border-radius: 4px; box-shadow: 0 16px 34px -14px rgba(0,0,0,.7); transition: transform .25s, box-shadow .25s; }
.stills span { display: block; margin-top: 8px; }
.stills i { font-family: var(--serif); font-size: 1.05rem; color: var(--text); }
.stills a:hover img, .stills a:focus-visible img { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(201, 163, 90, .55), 0 22px 40px -14px rgba(0,0,0,.8); }
.stills a:hover i { color: var(--brass-hi); }
.aside { margin: clamp(2.4rem, 6vh, 3.4rem) 0 0; color: var(--muted); padding-left: 14px; border-left: 2px solid var(--brass); }

/* ---------- what a visitor does ---------- */
.visit__list { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.6rem, 5vw, 4rem); }
.visit__list li { padding: 1.3rem 0 1.4rem; border-top: 1px solid var(--line); }
.visit__list p { margin: .45rem 0 0; color: var(--muted); max-width: 48ch; }
.visit__list h3 { transition: color .15s; }
.visit__list li:hover h3 { color: var(--brass-hi); }

/* ---------- the research ---------- */
.research { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.6rem, 5vw, 4.4rem); align-items: start; }
.research__words p { color: var(--muted); max-width: 54ch; margin: 1rem 0 0; }
.sources { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sources li { background: var(--wall-lit); border-left: 3px solid var(--brass); padding: 14px 18px; border-radius: 0 6px 6px 0; color: var(--muted); transition: border-color .15s, background .15s; }
.sources b { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.2rem; color: var(--text); margin-bottom: 2px; }
.sources li:hover { background: #2c3a36; border-left-color: var(--brass-hi); }

/* ---------- in the room and at home ---------- */
.where__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.6rem, 5vw, 4rem); margin-top: 1.8rem; }
.where__one { border-top: 2px solid var(--brass); padding-top: 1.1rem; }
.where__one p { color: var(--muted); margin: .6rem 0 0; max-width: 54ch; }
.where__one .fine { font-size: .95rem; }

/* ---------- the price, on a brass-edged plaque ---------- */
.label--plaque { max-width: 760px; margin: 0 auto; width: calc(100% - 14px); padding: clamp(1.6rem, 4vw, 2.6rem); border-radius: 4px; font-size: 1rem; line-height: 1.6;
  box-shadow: 0 0 0 6px var(--brass), 0 0 0 7px rgba(0,0,0,.4), 0 30px 60px -20px rgba(0,0,0,.7); }
.label--plaque h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); }
.label--plaque p { color: var(--ink-soft); margin: .9rem 0 0; }
.cost__price { font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--ink) !important; margin-top: .4rem !important; }
.label--plaque .go-row { margin-top: 1.5rem; }
.label--plaque .btn--brass { box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 -2px 0 rgba(0,0,0,.18) inset, 0 6px 14px rgba(0,0,0,.18); }
.label--plaque a:focus-visible { outline-color: var(--ink); }

/* ---------- questions ---------- */
.faq h2 { margin-bottom: 1rem; }
.faq details { border-top: 1px solid var(--line); padding: 14px 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 700; font-size: 1.06rem; list-style: none; display: flex; justify-content: space-between; gap: 12px; transition: color .15s; }
.faq summary:hover { color: var(--brass-hi); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brass-hi); font-size: 1.4rem; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--muted); margin: .6rem 0 0; max-width: 66ch; }

/* ---------- the close ---------- */
.close { text-align: center; }
.close p { color: var(--muted); margin: .8rem auto 1.4rem; max-width: 52ch; }
.close .go-row { justify-content: center; }
.foot { margin-top: clamp(3rem, 8vh, 5rem); padding-top: 1.4rem; border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted); }
.foot a { margin-left: .8rem; }

/* ---------- narrower screens ---------- */
@media (max-width: 900px) {
  .hero__text, .research, .where__pair { grid-template-columns: minmax(0, 1fr); }
  .piece--hero { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* on a phone the label hangs just under the screen, overlapping its bottom edge like a mounted card */
  .piece--hero .label { margin: -14px 12px 0 auto; max-width: 300px; position: relative; }
  .screen--wide video { aspect-ratio: 16 / 10; }
  .case, .case--flip { grid-template-columns: minmax(0, 1fr); }
  .case--flip .case__media { order: 0; }
  .case__media { max-width: 420px; }
  .screen--tall img { aspect-ratio: 4 / 5; }
  .visit__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  /* the prints become a row you swipe along, like walking past them */
  .stills { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; margin-right: -16px; padding-right: 16px; }
  .stills li { scroll-snap-align: start; }
  .hero h1 { font-size: clamp(2.3rem, 10.5vw, 3rem); }
  .btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ONE TYPE FAMILY ACROSS THE LANDING PAGES (Chris, 2026-11-12: "make sure there are no weird font changes between
   landing pages ... I like the bold block letter look"). Headings are the site's Archivo, heavy and wide, the same as
   the home page, /events/ and /kiosks/; body text is Inter. The page keeps its own colors and layout. */
h1, h2, h3 { font-family: var(--serif) !important; font-weight: 800 !important; font-stretch: 112%; letter-spacing: -0.025em; font-style: normal !important; }
h1 { line-height: 0.98; }
[class*="label"] em, [class*="label"] i, [class*="title"] { font-style: normal; }

/* ===========================================================================
   SITE THEME (Chris, 2026-11-12: the page "looks super disjointed ... some sort of weird green color ... Please bring
   it up to par with the rest of the website. Use overlays of graphics from the games ... for the background").
   The green gallery wall and brass are gone. The page now wears the main site's colors: deep navy ground, volt
   yellow for actions and accents, aqua for highlights, glass cards for the labels. Behind the sections, darkened
   frames from the West End, PARISITES and the festival's 3D square fade in and out across the full width, so the
   page reads as one of the exhibits it is selling. Layout and copy are unchanged.
   =========================================================================== */
:root {
  --wall: #00060f;
  --wall-lit: rgba(1, 34, 84, 0.55);
  --label: rgba(1, 23, 61, 0.72);
  --ink: #0a0a12;
  --ink-soft: rgba(214, 226, 255, 0.72);
  --brass: #ffee00;
  --brass-hi: #ffee00;
  --aqua: #19ffad;
  --text: #eef3ff;
  --muted: rgba(214, 226, 255, 0.76);
  --yellow: #ffee00;
  --line: rgba(160, 210, 255, 0.18);
}
html, body { background: var(--wall); }
body { background: radial-gradient(70% 50% at 80% 0%, rgba(14, 142, 254, 0.14), transparent 70%), radial-gradient(60% 50% at 0% 60%, rgba(25, 255, 173, 0.05), transparent 70%), var(--wall); }
a { color: var(--brass-hi); }
@media (max-width: 1180px) { .sitenav { background: #00173d; } }

/* buttons: the site's yellow, with dark type */
.start, .btn--brass { color: var(--ink); background: #ffee00; box-shadow: 0 0 18px rgba(255, 238, 0, 0.25); }
.start:hover, .btn--brass:hover { color: var(--ink); background: #ffee00; box-shadow: 0 0 0 5px rgba(255, 238, 0, 0.16), 0 0 26px rgba(255, 238, 0, 0.35); }
.btn--line { color: var(--text); box-shadow: 0 0 0 1.5px rgba(238, 243, 255, 0.55) inset; }
.btn--line:hover { color: var(--ink); background: #eef3ff; }
.menu-btn { box-shadow: 0 0 0 1px rgba(160, 210, 255, 0.4) inset; }
.sitenav a:hover { background: rgba(14, 142, 254, 0.14); }

/* screens: navy bezels with a cool glow instead of a warm gallery spotlight */
.screen { background: #020a1c; box-shadow: 0 0 0 1px rgba(160, 210, 255, 0.16), 0 30px 60px -20px rgba(0, 0, 0, 0.8); }
.screen::before { background: radial-gradient(ellipse 45% 42% at 50% 40%, rgba(14, 142, 254, 0.22), transparent 100%); }
.screen:hover, .screen:focus-visible { box-shadow: 0 0 0 2px #ffee00, 0 40px 70px -20px rgba(0, 0, 0, 0.85); }
.screen__go { color: var(--ink); background: #ffee00; }

/* labels: glass cards in the site's style, a yellow rule where the brass edge was */
.label { background: var(--label); color: var(--text); border: 1px solid rgba(160, 210, 255, 0.22); border-left: 3px solid #ffee00; border-radius: 6px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.7); }
.label a { color: var(--text); }
.label a:hover { color: #ffee00; }
.label a:focus-visible { outline-color: #ffee00; }
.label__line, .label--full dd:not([class]) { color: var(--muted); }
.label--full dt:not(.sr) { color: var(--aqua); }
.label__credit { color: var(--muted); border-top-color: rgba(160, 210, 255, 0.18); }
.stills img { border-color: #020a1c; }
.stills a:hover i { color: #ffee00; }
.stills a:hover img, .stills a:focus-visible img { box-shadow: 0 0 0 2px #ffee00, 0 22px 40px -14px rgba(0, 0, 0, 0.8); }
.aside { border-left-color: #ffee00; }
.visit__list li:hover h3 { color: #ffee00; }
.sources li { background: var(--wall-lit); border-left-color: #ffee00; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sources li:hover { background: rgba(1, 43, 104, 0.7); border-left-color: var(--aqua); }
.where__one { border-top-color: #ffee00; }
.faq summary:hover { color: #ffee00; }
.faq summary::after { color: #ffee00; }

/* the price plaque: a glass panel with a yellow edge */
.label--plaque { background: rgba(1, 23, 61, 0.8); border: 0; box-shadow: 0 0 0 2px #ffee00, 0 30px 60px -20px rgba(0, 0, 0, 0.75); }
.label--plaque p { color: var(--muted); }
.cost__price { color: #ffee00 !important; font-style: normal; }
.label--plaque a:focus-visible { outline-color: #ffee00; }

/* the price line in the hero */
.price { color: #ffee00; }

/* ---------- the game art behind the sections ----------
   Each picture runs the full width of the screen behind its section, darkened and fading in at the top and out at
   the bottom so the sections flow into each other with no hard edges. Decoration only: it never takes a click. */
.hero, main > section { position: relative; isolation: isolate; }
.hero::after, .work::before, .visit::before, .where::before, .close::before {
  content: ""; position: absolute; z-index: -2; pointer-events: none;
  left: calc(50% - 50vw); right: calc(50% - 50vw); top: 0; bottom: 0;
  background-size: cover; background-position: center;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 70%, transparent 100%);
}
.hero::after { top: -110px; background-image: linear-gradient(90deg, rgba(0, 6, 15, 0.92) 0%, rgba(0, 6, 15, 0.55) 55%, rgba(0, 6, 15, 0.75) 100%), url("img/bg-plaza.webp"); opacity: 0.95; }
.work::before { background-image: linear-gradient(rgba(0, 6, 15, 0.72), rgba(0, 6, 15, 0.82)), url("img/bg-parisites.webp"); opacity: 0.9; }
.visit::before { background-image: linear-gradient(90deg, rgba(0, 6, 15, 0.9), rgba(0, 6, 15, 0.55)), url("img/bg-skyline.webp"); }
.where::before { background-image: linear-gradient(rgba(0, 6, 15, 0.8), rgba(0, 6, 15, 0.8)), url("img/bg-square.webp"); }
.close::before { background-image: linear-gradient(rgba(0, 6, 15, 0.8), rgba(0, 6, 15, 0.86)), url("img/bg-plaza.webp"); background-position: center 30%; }
/* give the art room to show: the sections with art get a little extra breathing space */
.visit, .where, .close { padding-bottom: clamp(3rem, 8vh, 5rem); }
.foot { position: relative; }