/* Templates added for the CMS-driven site: generic pages, page blocks, camera pages. */

.feature-section + .feature-section .feature { border-top: 1px solid var(--line); }
.feature .h3 em { display: block; }
.story__text p + p { color: var(--on-dark-muted); }
.footer__note p { margin: 0; }
.footer__note a { border-bottom: 1px solid var(--line-dark); }

/* ---------- Page header ---------- */

.page-head { padding-top: calc(var(--header-h) + clamp(48px, 7vw, 120px)); background: var(--white); }
.page-head.dark { background: var(--ink); }
/* The fixed header is light; on a dark page head it gets its frosted bar immediately. */
.page-head.dark::before { content: ""; position: fixed; inset: 0 0 auto 0; height: var(--header-h); background: var(--white); z-index: 99; }
.page-head h1 { font-size: clamp(2.6rem, 1rem + 6vw, 6.6rem); line-height: 0.96; letter-spacing: -0.02em; padding-bottom: clamp(36px, 5vw, 72px); }
.page-head__intro { max-width: 34em; padding-bottom: clamp(36px, 5vw, 72px); margin-top: calc(-1 * clamp(12px, 2vw, 32px)); }
.page-head__image img { width: 100%; max-height: 70vh; object-fit: cover; }
.page-head > .wrap:first-child { border-bottom: 1px solid var(--line); }
.page-head.dark > .wrap:first-child { border-color: var(--line-dark); }

.page-body { background: var(--white); padding-block: clamp(40px, 6vw, 96px) var(--section); }

/* ---------- Blocks ---------- */

.blk { margin-block: clamp(36px, 5vw, 80px); }
.blk:first-child { margin-top: 0; }

.blk-text { max-width: 44rem; margin-inline: auto; }
.blk-text.prose { max-width: 44rem; }
.blk-text h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); line-height: 1.04; letter-spacing: -0.015em; margin: 1.6em 0 0.6em; }
.blk-text h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); line-height: 1.15; margin: 1.6em 0 0.5em; }
.blk-text h4 { font-family: var(--sans); font-size: 0.76rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); margin: 2em 0 0.8em; }
.blk-text > :first-child, .blk-text > article > :first-child { margin-top: 0; }
.blk-text ul, .blk-text ol { margin: 0 0 1.1em; padding-left: 1.2em; list-style: revert; }
.blk-text li { margin-bottom: 0.3em; }
.blk-text strong { font-weight: 500; }
.blk-text a { border-bottom: 1px solid var(--red); transition: color 0.2s; }
.blk-text a:hover { color: var(--red); }
.blk-text--lede { max-width: 60rem; font-size: clamp(1.2rem, 1rem + 0.9vw, 1.7rem); line-height: 1.42; }
.blk-text--lede p + p { font-size: clamp(1.02rem, 0.96rem + 0.28vw, 1.2rem); line-height: 1.65; color: var(--text-muted); max-width: 44rem; }

.blk-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 48px); row-gap: 24px; align-items: start; padding-top: clamp(36px, 5vw, 80px); border-top: 1px solid var(--line); }
.wrap.blk-split { border-top: 0; position: relative; }
.wrap.blk-split::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--line); }
.blk-split__head { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + 32px); }
.blk-split__head h2, .blk-split__head h3, .blk-split__head h4 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 1.2rem + 3vw, 3.8rem); line-height: 1.02; letter-spacing: -0.015em; text-wrap: balance; }
.blk-split__body { grid-column: 7 / span 6; max-width: none; margin: 0; }
.blk-split__body > p:first-child { font-size: clamp(1.2rem, 1rem + 0.9vw, 1.7rem); line-height: 1.42; }
/* Links right after a two-column text line up under its right-hand column. */
.blk-split + .blk { margin-top: calc(-1 * clamp(8px, 2vw, 32px)); }
.blk-split + .blk > .links-row { max-width: none; margin-left: calc(50% + clamp(20px, 3vw, 48px) / 2); }

.blk-images--3 img { aspect-ratio: 2 / 3; object-fit: cover; filter: grayscale(1); }
.blk-images figcaption { font-family: var(--display); font-style: italic; font-size: 1.05rem; color: var(--text); }

.blk-image img { width: 100%; }
figure.blk { margin-inline: auto; }
.blk figcaption, .blk-images figcaption { margin-top: 12px; font-size: 0.88rem; color: var(--text-muted); }

.blk-images { display: grid; gap: clamp(16px, 2.4vw, 40px); max-width: 1100px; align-items: start; }
.blk-images figure { margin: 0; }
.blk-images img { width: 100%; }
.blk-images--1 { max-width: 760px; }
/* Small images line up with the left edge of the reading column. */
.blk-images--small { max-width: calc(44rem + 2 * var(--gutter)); grid-template-columns: repeat(auto-fill, minmax(0, 200px)); margin-bottom: calc(-1 * clamp(12px, 2.4vw, 40px)); }
.blk-images--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blk-images--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.blk-gallery a { display: block; overflow: hidden; background: var(--paper); }
.blk-gallery img { width: 100%; transition: transform 0.9s var(--ease); }
.blk-gallery a:hover img { transform: scale(1.04); }
.blk-gallery--mosaic { columns: 4; column-gap: clamp(10px, 1.2vw, 20px); }
.blk-gallery--mosaic a { margin-bottom: clamp(10px, 1.2vw, 20px); break-inside: avoid; }
.blk-gallery--grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 20px); }
.blk-gallery--grid a { aspect-ratio: 1; }
.blk-gallery--grid a:has(.crop) { aspect-ratio: auto; }
.blk-gallery a:hover .crop img { transform: translateY(-11%) scale(1.04); }
.blk-gallery--grid img { height: 100%; object-fit: cover; }
.blk-gallery--logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(20px, 3vw, 48px); max-width: 1120px; margin-inline: auto; }
.blk-gallery--logos a { background: none; width: clamp(88px, 10vw, 140px); }
.blk-gallery--logos img { mix-blend-mode: multiply; }
.blk-gallery--logos a:hover img { transform: none; }

.blk-audio { max-width: 52rem; margin-inline: auto; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.blk-audio li { display: grid; grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 320px); gap: 12px 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.blk-audio__num { font-family: var(--display); font-size: 1.6rem; color: var(--red); }
.blk-audio__title { font-family: var(--display); font-size: clamp(1.2rem, 1rem + 0.9vw, 1.8rem); line-height: 1.2; }
.blk-audio audio { width: 100%; height: 40px; }

.blk-video { max-width: 60rem; margin-inline: auto; }
.blk-video figcaption { color: var(--text-muted); }

.blk-members { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 88px); border-top: 1px solid var(--ink); }
.member { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; padding: clamp(24px, 3vw, 40px) 0; border-bottom: 1px solid var(--line); align-items: start; }
.member__logo img { width: 96px; height: 96px; object-fit: contain; }
.member h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height: 1.1; }
.member__tag { font-size: 0.74rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); margin: 8px 0 14px; }
.member__text { font-size: 0.98rem; line-height: 1.6; color: var(--text-muted); }
.member__links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
.member__links a { border-bottom: 1px solid var(--line); }
.member__links a:hover { color: var(--red); border-color: var(--red); }

/* ---------- Profile (photographer + their photos) ---------- */

.profile { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 48px); row-gap: 32px; align-items: start; padding-top: clamp(36px, 5vw, 80px); position: relative; }
.profile::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--line); }
.profile__who { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + 32px); }
.profile__num { font-family: var(--display); font-size: clamp(2rem, 1.4rem + 2vw, 3.4rem); line-height: 1; color: var(--red); margin: 0 0 20px; }
.profile__portrait { width: clamp(120px, 14vw, 200px); aspect-ratio: 1; overflow: hidden; margin-bottom: 22px; background: var(--paper); }
.profile__portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.profile h2 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.2rem); line-height: 1; letter-spacing: -0.015em; margin-bottom: 16px; }
.profile__text { color: var(--text-muted); font-size: 0.98rem; line-height: 1.6; max-width: 30em; }
.profile__text strong { font-weight: 400; color: var(--text); }
.profile__text a { border-bottom: 1px solid var(--red); }
.profile .arrow-link { margin-top: 16px; }
.profile__cam { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); max-width: 30em; font-family: var(--display); font-size: 1.25rem; line-height: 1.15; transition: color 0.2s; }
.profile__cam:hover { color: var(--red); }
.profile__cam small { display: block; font-family: var(--sans); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.profile__cam i { display: block; font-family: var(--sans); font-style: normal; font-size: 0.84rem; color: var(--text-muted); margin-top: 2px; }
/* Photos fill even rows whatever their shape: each grows in proportion to its width/height ratio. */
.profile__photos { grid-column: 6 / span 7; display: flex; flex-wrap: wrap; gap: clamp(8px, 1vw, 14px); --row: clamp(150px, 15vw, 230px); }
.profile__photos a { flex: var(--r) 1 calc(var(--r) * var(--row)); height: var(--row); overflow: hidden; background: var(--paper); cursor: zoom-in; max-width: calc(var(--r) * var(--row) * 1.5); }
.profile__photos img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.profile__photos a:hover img { transform: scale(1.04); }

/* ---------- Camera cards and grid ---------- */

.cam-filters { margin-bottom: clamp(28px, 3.4vw, 48px); padding-bottom: clamp(16px, 2vw, 24px); border-bottom: 1px solid var(--line); }
.cam-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.cam-filter__label { flex: none; width: 7.5em; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); }
/* Period and country sit behind "More options". */
.cam-more summary { display: inline-flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; padding: 6px 0; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); transition: color 0.2s; }
.cam-more summary::-webkit-details-marker { display: none; }
.cam-more summary::before { content: "+"; font-size: 1.2rem; font-weight: 300; letter-spacing: 0; line-height: 1; transition: transform 0.3s var(--ease); }
.cam-more[open] summary::before { transform: rotate(45deg); }
.cam-more summary:hover { color: var(--red); }
.cam-more[open] summary { margin-bottom: 12px; }
.cam-filters__status { margin: 18px 0 0; font-size: 0.86rem; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
.cam-filters__count { font-family: var(--display); font-size: 1.5rem; line-height: 1; color: var(--red); }
.cam-filters__reset { margin-left: 12px; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; border-bottom: 1px solid var(--red); padding-bottom: 2px; }
.cam-filters__reset:hover { color: var(--red); }
.cam-filters__reset[hidden], .cam-filters__empty[hidden], .cam-filters__status[hidden], .cam-beyond-zone[hidden] { display: none; }
.cam-filters__empty { margin: 14px 0 0; font-family: var(--display); font-size: 1.4rem; }
.cam-filter button { padding: 7px 15px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.76rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.cam-filter button:hover { border-color: var(--ink); }
.cam-filter button.is-on { background: var(--ink); color: var(--white); border-color: var(--ink); }

.cam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: clamp(20px, 2.6vw, 44px) clamp(16px, 2vw, 32px); }
.cam-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(28px, 3.4vw, 48px); }
.cam-card { display: block; }
.cam-card[hidden] { display: none; }
.cam-card__img img { transition: transform 0.8s var(--ease); }
.cam-card:hover .cam-card__img img { transform: translateY(-11%) scale(1.06); }
.cam-card__meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; padding-top: 14px; border-top: 1px solid var(--line); }
/* Cameras without a collection number: name and year stack in a single column. */
.cam-card__meta:not(:has(.cam-card__num)) { grid-template-columns: minmax(0, 1fr); }
.cam-card__num { grid-row: span 2; font-family: var(--display); font-size: 1.7rem; line-height: 1; color: var(--red); }
.cam-card__name { font-family: var(--display); font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); line-height: 1.15; transition: color 0.2s; }
.cam-card__name small { display: block; font-family: var(--sans); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px; }
.cam-card:hover .cam-card__name { color: var(--red); }
.cam-card__year { font-size: 0.84rem; color: var(--text-muted); }
/* The rule sits above each camera, so it separates one camera from the next
   and never a picture from its caption. */
.cam-card { border-top: 1px solid var(--line); padding-top: 18px; }
.cam-card__meta { border-top: 0; padding-top: 4px; }
/* The short row of suggestions under a camera page already sits under a rule. */
.cam-grid--4 .cam-card { border-top: 0; padding-top: 0; }

/* ---------- Camera page ---------- */

/* Museum photos and 360° films are square "collectible cards": the number sits
   in the top band, the caption strip in the bottom fifth, and the main photo
   has a small badge on the left edge. This window shows only the camera. */
.crop { display: block; position: relative; overflow: hidden; aspect-ratio: 88 / 68.5; background: var(--white); }
.crop > img, .crop > video {
  position: absolute; top: 0; left: calc(-6% / 0.88); width: calc(100% / 0.88); max-width: none;
  height: auto; aspect-ratio: 1; object-fit: cover; transform: translateY(-11%);
}

.cam-hero { background: var(--white); padding-top: var(--header-h); border-bottom: 1px solid var(--line); }
.cam-hero__main { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; min-height: min(calc(100svh - var(--header-h)), 780px); }
.cam-hero__copy { padding: clamp(24px, 4vw, 64px) clamp(16px, 3vw, 48px) clamp(24px, 4vw, 64px) max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
.cam-hero__back { display: inline-block; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); margin-bottom: clamp(28px, 5vw, 72px); transition: color 0.2s; }
.cam-hero__back:hover { color: var(--red); }
.cam-hero__num { font-family: var(--display); font-size: clamp(2.6rem, 1.4rem + 3.4vw, 5rem); line-height: 1; color: var(--red); margin: 0 0 clamp(14px, 1.8vw, 26px); }
.cam-hero__num span { font-family: var(--sans); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-muted); margin-right: 12px; vertical-align: 1.1em; }
.cam-hero__num i { font-style: normal; font-size: 0.42em; color: var(--text-muted); margin-left: 6px; letter-spacing: 0.02em; }
.cam-hero h1 { font-size: clamp(2.8rem, 1rem + 5.2vw, 6.4rem); line-height: 0.94; letter-spacing: -0.025em; }
.cam-hero__tag { font-family: var(--display); font-style: italic; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); line-height: 1.15; margin: clamp(16px, 2vw, 28px) 0 0; }
.cam-hero__meta { margin: clamp(20px, 2.6vw, 36px) 0 0; padding-top: 18px; border-top: 1px solid var(--line); max-width: 22em; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); }
.cam-hero__media { padding: clamp(8px, 2vw, 32px) max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))) clamp(8px, 2vw, 32px) clamp(32px, 6vw, 110px); }
.cam-hero__media .crop { width: min(92%, 700px); margin-inline: auto; }

.cam-body__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 48px); row-gap: 40px; align-items: start; }
.cam-sheet { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + 32px); }
.cam-sheet h2 { font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-muted); padding-bottom: 16px; border-bottom: 1px solid var(--ink); }
.cam-sheet dl { margin: 0; }
.cam-sheet dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cam-sheet dt { font-size: 0.74rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.cam-sheet dd { margin: 0; text-align: right; font-family: var(--display); font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); line-height: 1.2; }
.cam-body__text { grid-column: 6 / span 7; }
.cam-body__text > p:first-child, .cam-body__text > article > p:first-child { font-size: clamp(1.25rem, 1rem + 1vw, 1.8rem); line-height: 1.4; margin-bottom: 1.2em; }
.cam-body__text p { max-width: 40em; }
.cam-body__text a { border-bottom: 1px solid var(--red); }

.cam-gallery { background: var(--white); padding-block: clamp(56px, 7vw, 112px); }
.cam-gallery__head { display: flex; justify-content: space-between; align-items: baseline; }
.cam-gallery__count { font-family: var(--display); font-size: 1.4rem; color: var(--text-muted); margin: 0; }
.cam-gallery .strip__track { gap: clamp(10px, 1.2vw, 20px); }
.cam-shot { flex: none; width: clamp(260px, 36vw, 560px); cursor: zoom-in; }
.cam-shot img { transition: transform 0.9s var(--ease); }
.cam-shot:hover img { transform: translateY(-11%) scale(1.04); }
/* Between the camera on display and the one it replaced: a marker with a vertical rule and label */
.cam-shot-sep { flex: none; align-self: stretch; display: flex; align-items: center; justify-content: center; width: clamp(64px, 7vw, 110px); margin-inline: clamp(8px, 1.4vw, 24px); border-left: 1px solid var(--text); background: #fff; }
.cam-shot-sep span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; white-space: nowrap; color: var(--text); }

.cam-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--white); border-top: 1px solid var(--line); }
.cam-nav__link { display: grid; grid-template-columns: minmax(0, 1fr) clamp(96px, 16vw, 220px); gap: 6px 24px; align-items: center; padding: clamp(24px, 3.4vw, 48px) var(--gutter); transition: background 0.3s; }
.cam-nav__link + .cam-nav__link { border-left: 1px solid var(--line); }
.cam-nav__link:hover .cam-nav__name { color: var(--red); }
.cam-nav__link .crop { grid-column: 2; grid-row: 1 / span 2; transition: background 0.3s; }
.cam-nav__link--next { grid-template-columns: clamp(96px, 16vw, 220px) minmax(0, 1fr); text-align: right; }
.cam-nav__link--next .crop { grid-column: 1; }
.cam-nav__link--next .cam-nav__dir, .cam-nav__link--next .cam-nav__name { grid-column: 2; }
.cam-nav__dir { align-self: end; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); }
.cam-nav__name { align-self: start; font-family: var(--display); font-size: clamp(1.3rem, 1rem + 1.4vw, 2.2rem); line-height: 1.1; }
.cam-nav__name b { font-weight: 400; color: var(--red); margin-right: 0.5em; }
.cam-nav__link--next .cam-nav__name b { margin-right: 0.5em; }

.blk-gallery a[data-zoom] { cursor: zoom-in; }

/* ---------- Lightbox ---------- */

.zoom { position: fixed; inset: 0; z-index: 300; background: rgba(16, 15, 14, 0.94); display: grid; place-items: center; padding: 24px; cursor: zoom-out; }
.zoom img { max-width: 100%; max-height: calc(100svh - 48px); object-fit: contain; }
.zoom .crop { width: min(100%, calc((100svh - 48px) * 1.2847)); }
.zoom .crop img { max-width: none; max-height: none; }
.zoom button { position: absolute; top: 16px; right: 20px; width: 48px; height: 48px; color: #fff; font-size: 2rem; line-height: 1; }

@media (max-width: 900px) {
  .blk-gallery--mosaic { columns: 3; }
  .blk-gallery--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .blk-members { grid-template-columns: 1fr; }
  .cam-filter__label { width: 100%; }
  .cam-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .cam-filter::-webkit-scrollbar { display: none; }
  .cam-filter__label { width: auto; margin-right: 6px; }
  .cam-filter button { flex: none; }
  .blk-split__head, .blk-split__body { grid-column: 1 / -1; }
  .profile__who, .profile__photos { grid-column: 1 / -1; }
  .profile__who { position: static; }
  .blk-split__head { position: static; }
  .blk-split + .blk > .links-row { margin-left: 0; }
  .cam-hero__main { grid-template-columns: 1fr; min-height: 0; }
  .cam-hero__media { order: -1; }
  .cam-hero__media { padding: 0 var(--gutter); }
  .cam-hero__media .crop { width: min(100%, 520px); }
  .cam-hero__copy { padding: 0 var(--gutter) 40px; }
  .cam-hero__back { margin-bottom: 24px; }
  .cam-sheet, .cam-body__text { grid-column: 1 / -1; }
  .cam-sheet { position: static; }
  .cam-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .blk-gallery--mosaic { columns: 2; }
  .blk-gallery--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cam-nav { grid-template-columns: 1fr; }
  .cam-nav__link + .cam-nav__link { border-left: 0; border-top: 1px solid var(--line); }
  .blk-images--3 { grid-template-columns: 1fr; max-width: 420px; }
  .blk-audio li { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .blk-audio audio { grid-column: 1 / -1; }
  .member { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; }
  .member__logo img { width: 64px; height: 64px; }
}

/* ---------- Home intro: text on top, one even row of photos underneath ---------- */

.intro__text { align-items: start; }
.intro__text .col-head { grid-column: 1 / span 7; }
.intro__text .col-body { grid-column: 9 / span 4; padding-top: calc(0.74rem + clamp(18px, 2.4vw, 32px) + 0.6em); }
.intro__text .lede { font-size: clamp(1.35rem, 1rem + 1.5vw, 2.2rem); line-height: 1.32; }
/* One single row: each photo's width follows its own proportions, so they all end up the same height. */
.intro__gallery { display: flex; gap: clamp(8px, 1vw, 16px); margin-top: clamp(40px, 5vw, 80px); }
.intro__gallery > * { display: block; flex: var(--r) 1 0; min-width: 0; aspect-ratio: var(--r); overflow: hidden; background: var(--paper-deep); }
.intro__gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.intro__gallery a:hover img { transform: scale(1.05); }
@media (max-width: 900px) {
  .intro__text .col-head, .intro__text .col-body { grid-column: 1 / -1; }
  .intro__text .col-body { padding-top: 0; }
  .intro__text { row-gap: 20px; }
  /* On small screens the row becomes a strip you swipe sideways. */
  .intro__gallery { overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .intro__gallery::-webkit-scrollbar { display: none; }
  .intro__gallery > * { flex: none; height: 190px; width: calc(var(--r) * 190px); }
}

/* ---------- Home: compact feature cards ---------- */

.feature-cards-section { padding-top: clamp(40px, 5vw, 80px); }
.feature-cards-section > .wrap { position: relative; padding-top: clamp(40px, 5vw, 80px); }
.feature-cards-section > .wrap::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--line); }
.feature-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 56px); }
.feature-card { display: flex; flex-direction: column; }
.feature-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-deep); margin-bottom: 22px; }
.feature-card__media > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.feature-card:hover .feature-card__media > img { transform: scale(1.04); }
.feature-card__faces { display: grid; grid-template-columns: repeat(3, 1fr); height: 100%; }
.feature-card__faces { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.feature-card__faces img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
/* Five portraits fill a 3×2 grid: the first one takes two cells. */
.feature-card__faces img:first-child:nth-last-child(5) { grid-column: span 2; }
.feature-card .eyebrow { margin-bottom: 12px; }
.feature-card .h3 { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.2rem); margin-bottom: 18px; }
.feature-card .h3 em { display: block; }
.feature-card .arrow-link { align-self: flex-start; margin-top: auto; }
.feature-card:hover .arrow-link { color: var(--red); }

/* ---------- Closing "plan your visit" band ---------- */

.visit-band { padding-block: clamp(48px, 6vw, 96px); }
.visit-band .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) auto; gap: clamp(24px, 4vw, 64px); align-items: center; }
.visit-band .eyebrow { margin-bottom: 14px; }
.visit-band__title { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3.2rem); line-height: 1.04; margin: 0; }
.visit-band ul { display: grid; gap: 14px; }
.visit-band li { font-family: var(--display); font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem); line-height: 1.25; }
.visit-band li span { display: block; font-family: var(--sans); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 3px; }
.btn--light { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }
.btn--light:hover { background: var(--red-bright); border-color: var(--red-bright); color: var(--white); }
.footer { border-top: 1px solid var(--line-dark); }

@media (max-width: 900px) {
  .feature-cards { grid-template-columns: 1fr; max-width: 560px; }
  .visit-band .wrap { grid-template-columns: 1fr; }
  .visit-band .btn { justify-self: start; }
}

/* ---------- Home photo wall: instant pictures dropped on the dark band ---------- */

.wall .strip { padding-block: clamp(36px, 5vw, 72px); margin-block: calc(-1 * clamp(36px, 5vw, 72px)); }
.wall .strip__track { gap: 0; padding-bottom: 0; align-items: center; }
.wall .print { width: clamp(190px, 19vw, 300px); margin: 0 clamp(-26px, -1.6vw, -10px); transform: rotate(var(--rot, 0deg)) translateY(var(--drop, 0px)); transition: transform 0.5s var(--ease); position: relative; }
.wall .print:nth-child(even) { margin-top: 0; }
.wall .print:hover, .wall .print:focus-visible { transform: rotate(0deg) translateY(calc(var(--drop, 0px) - 10px)) scale(1.06); z-index: 5; }
.wall .print img { box-shadow: 0 18px 34px -14px rgba(0, 0, 0, 0.85); }
/* Plain photos get the white instant-print border; the celebrity prints already have one. */
.wall .print--frame { background: #fdfcf8; padding: clamp(8px, 0.9vw, 14px) clamp(8px, 0.9vw, 14px) clamp(32px, 3.3vw, 52px); box-shadow: 0 18px 34px -14px rgba(0, 0, 0, 0.85); }
.wall .print--frame img { aspect-ratio: 1; object-fit: cover; box-shadow: none; }
@media (max-width: 600px) { .wall .print { width: 170px; } }

/* ---------- Collection page: separation after camera 99 ---------- */

/* The heading for the cameras beyond the 99 sits on a paper-coloured band, edge to edge; the cameras themselves stay on white. */
.cam-beyond-zone { margin-top: clamp(64px, 8vw, 128px); padding-bottom: var(--section); }
.page-body:has(.cam-beyond-zone) { padding-bottom: 0; }
.blk:has(.cam-beyond-zone) { margin-bottom: 0; }
.cam-beyond { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 48px); row-gap: 20px; align-items: start; margin: 0 0 clamp(40px, 5vw, 72px); padding-block: clamp(48px, 6vw, 96px); background: var(--paper); box-shadow: 0 0 0 100vmax var(--paper); clip-path: inset(0 -100vmax); }
.cam-beyond h2 { grid-column: 1 / span 5; font-size: clamp(2rem, 1.2rem + 3vw, 3.8rem); line-height: 1.02; letter-spacing: -0.015em; }
.cam-beyond__text { grid-column: 7 / span 6; }
.cam-beyond__text p:first-child { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); line-height: 1.45; }
.cam-beyond__text p + p { color: var(--text-muted); }
@media (max-width: 900px) { .cam-beyond h2, .cam-beyond__text { grid-column: 1 / -1; } }

/* ---------- Back to top ---------- */

.to-top {
  position: fixed; right: clamp(14px, 2vw, 28px); bottom: clamp(14px, 2vw, 28px); z-index: 90;
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--white); border: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 1.25rem; line-height: 1; box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.55);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s var(--ease), visibility 0.3s, background 0.25s;
}
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--red); }
.menu-open .to-top { display: none; }

/* ---------- Numbered sections with image (donations page) ---------- */

.steps { display: grid; }
.step { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 48px); row-gap: 28px; align-items: center; padding-block: clamp(40px, 6vw, 96px); border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
/* The page header already ends with a line: no second one above the first section. */
.steps:first-child .step:first-child { border-top: 0; padding-top: clamp(8px, 2vw, 32px); }
.step__text { grid-column: 1 / span 6; }
.step__media { grid-column: 8 / span 5; }
.step:nth-child(even) .step__text { grid-column: 7 / span 6; order: 2; }
.step:nth-child(even) .step__media { grid-column: 1 / span 5; order: 1; }
.step__num { font-family: var(--display); font-size: clamp(2.6rem, 1.4rem + 3.4vw, 5rem); line-height: 1; color: var(--red); margin: 0 0 clamp(12px, 1.6vw, 22px); }
.step h2 { font-size: clamp(2.1rem, 1.2rem + 3.2vw, 4.2rem); line-height: 1; letter-spacing: -0.02em; margin-bottom: clamp(18px, 2.2vw, 30px); }
.step__body { max-width: 34em; }
/* A row of buttons under a numbered section, e.g. one per donation amount */
.step__buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.step .step__buttons .btn { margin-top: 0; min-width: 92px; justify-content: center; text-align: center; font-size: 1rem; letter-spacing: 0.04em; }
.step__body > p:first-child, .step__body > article > p:first-child { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); line-height: 1.45; }
.step__body p + p { color: var(--text-muted); }
.step__body a { border-bottom: 1px solid var(--red); }
.step .btn { margin-top: clamp(22px, 2.6vw, 36px); }
.step__media img { width: 100%; }
.step__media > img { aspect-ratio: 88 / 68.5; object-fit: cover; }

/* A section that stands out (the donation amounts): a dark panel edged and
   washed with the Vibe travel colours, slowly turning. It keeps this look in
   every era. */
@property --step-spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.steps .step.step--featured {
  position: relative; isolation: isolate; margin-block: clamp(20px, 3vw, 44px); padding: clamp(28px, 4.5vw, 72px);
  border: 0; border-radius: clamp(20px, 2.4vw, 34px); background: #15131a; color: #fff;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.55);
}
.steps .step.step--featured::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 4px;
  background: conic-gradient(from var(--step-spin), #e8412c, #f6c324, #3fa34d, #2de2e6, #2b7fc3, #ff3cac, #e8412c);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: step-spin 9s linear infinite;
}
.steps .step.step--featured::after {
  content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; opacity: 0.42; filter: blur(34px);
  background: conic-gradient(from var(--step-spin), #e8412c, #f6c324, #3fa34d, #2de2e6, #2b7fc3, #ff3cac, #e8412c);
  animation: step-spin 9s linear infinite;
}
@keyframes step-spin { to { --step-spin: 360deg; } }
/* The first section of a page normally sits close to the top; the panel keeps its full inner space. */
.steps:first-child .step.step--featured:first-child, .steps .step.step--featured { padding-top: clamp(40px, 5.5vw, 88px); padding-bottom: clamp(36px, 5vw, 76px); }
.step.step--featured + .step { border-top: 0; }
.step--featured .step__num { color: #f6c324; }
/* The panel keeps its own colours in every era, whatever the look does to section titles. */
html .steps .step.step--featured h2 { color: #fff !important; text-shadow: none !important; -webkit-text-stroke: 0 !important; }
.step--featured .step__body, .step--featured .step__body > p:first-child { color: #fff; }
.step--featured .step__body p + p { color: rgba(255, 255, 255, 0.82); }
.step--featured .step__media { background: #fff; border-radius: clamp(14px, 1.6vw, 22px); overflow: hidden; padding: clamp(10px, 1.4vw, 20px); }
html .steps .step.step--featured .step__buttons .btn {
  background: #fff !important; color: #15131a !important; border: 2px solid #fff !important; border-radius: 999px !important;
  min-width: 104px; padding: 16px 24px; font-size: 1.15rem; font-weight: 500; letter-spacing: 0.02em; text-transform: none;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s, color 0.2s, border-color 0.2s;
}
html .steps .step.step--featured .step__buttons .btn:hover { background: #f6c324 !important; border-color: #f6c324 !important; transform: translateY(-3px) rotate(-2deg); }
/* The last button ("other amount") is the quieter choice */
html .steps .step.step--featured .step__buttons .btn:last-child:not(:first-child) { background: transparent !important; color: #fff !important; border-color: rgba(255, 255, 255, 0.5) !important; font-size: 0.95rem; }
html .steps .step.step--featured .step__buttons .btn:last-child:not(:first-child):hover { background: #fff !important; color: #15131a !important; border-color: #fff !important; }
/* "Secured by Stripe" and the accepted payment marks, under donation buttons */
.pay-note { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; font-size: 0.86rem; color: var(--text-muted); }
.pay-note p { margin: 0; display: inline-flex; align-items: center; gap: 9px; }
.pay-note ul { display: inline-flex; align-items: center; gap: 16px; margin: 0; padding: 0; list-style: none; }
.pay-note li { display: flex; }
.pay-note img { display: block; height: auto; opacity: 0.8; }
.step--featured .pay-note { color: rgba(255, 255, 255, 0.86); }
.step--featured .pay-note img { filter: invert(1); opacity: 0.92; }
.step--featured:not(:has(.step__media)) .pay-note { justify-content: center; }
/* Without a picture the panel is a centred call to action */
.steps .step.step--featured:not(:has(.step__media)) .step__text { grid-column: 1 / -1; order: 0; text-align: center; }
.step--featured:not(:has(.step__media)) .step__body { margin-inline: auto; }
.step--featured:not(:has(.step__media)) .step__buttons { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .steps .step.step--featured::before, .steps .step.step--featured::after { animation: none; } }
.page-body:has(.steps) { background: #fff; }
@media (max-width: 900px) {
  .step__text, .step__media, .step:nth-child(even) .step__text, .step:nth-child(even) .step__media { grid-column: 1 / -1; }
  .step__media, .step:nth-child(even) .step__media { order: -1; max-width: 420px; }
  .step:nth-child(even) .step__text { order: 2; }
}

/* ---------- Asking before counting visits ---------- */
.cookie-ask {
  position: fixed; left: 50%; bottom: clamp(12px, 2vw, 28px); z-index: 120; transform: translateX(-50%); width: min(560px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap; padding: 16px 20px; border-radius: 18px;
  background: #15131a; color: #fff; border: 1px solid rgba(255, 255, 255, 0.28); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.7);
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif; font-size: 0.9rem; line-height: 1.45;
}
.cookie-ask[hidden] { display: none; }
.cookie-ask p { margin: 0; flex: 1 1 260px; }
.cookie-ask a { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
.cookie-ask div { display: flex; gap: 8px; }
html .cookie-ask .btn { margin: 0; padding: 11px 18px; border-radius: 999px !important; font-size: 0.7rem; background: #fff !important; color: #15131a !important; border: 1px solid #fff !important; }
html .cookie-ask .btn--ghost { background: transparent !important; color: #fff !important; border-color: rgba(255, 255, 255, 0.5) !important; }
.cookie-reopen { font: inherit; color: inherit; border-bottom: 1px solid currentColor; padding: 0; cursor: pointer; }
@media (max-width: 600px) { .cookie-ask { bottom: 72px; } }

/* ---------- Exceptional closing days ---------- */
/* The list, with the visitor information */
.closures { margin-top: 14px; padding: 12px 16px; border-left: 2px solid var(--red); background: var(--paper); font-size: 0.92rem; line-height: 1.5; }
.closures__title { margin: 0 0 4px; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); }
.closures ul { margin: 0; padding: 0; list-style: none; }
.closures li + li { margin-top: 2px; }
.closures li b { font-weight: 500; }
.closures li.is-today { color: var(--red); }
/* And, as a one-line summary, under the opening hours at the top of the home page */
.fact-note { display: block; margin-top: 8px; font-size: 0.86rem; line-height: 1.45; color: var(--text-muted); }
.fact-note b { font-weight: 500; color: var(--red); }
.fact-note span { white-space: nowrap; }
.fact-note span:not([hidden]) ~ span:not([hidden])::before { content: ", "; white-space: normal; }
.fact-note .is-today { color: var(--red); font-weight: 500; }
/* The same days in the closing band at the bottom of every page */
.visit-band__closures .is-today { color: var(--red-bright); }
/* The banner, on the day itself: a thin strip above the header. It keeps the same colours in every era. */
.closure-banner {
  --closure-h: 38px; position: fixed; inset: 0 0 auto 0; z-index: 101; min-height: var(--closure-h); margin: 0; padding: 8px 16px;
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; text-align: center;
  background: #c8102e; color: #fff; font-family: "Jost", "Helvetica Neue", Arial, sans-serif; font-size: 0.86rem; line-height: 1.3; letter-spacing: 0.02em;
}
.closure-banner[hidden] { display: none; }
.closure-banner b { font-weight: 600; }
html.has-closure .site-header { top: 38px; }
html.has-closure body { padding-top: 38px; }
html.has-closure { scroll-padding-top: calc(var(--header-h) + 38px); }
@media (max-width: 520px) {
  .closure-banner { --closure-h: 52px; font-size: 0.8rem; }
  html.has-closure .site-header { top: 52px; }
  html.has-closure body { padding-top: 52px; }
}

/* ---------- "Support us": the twin of the Vibe travel button, bottom right ---------- */
.support-pill {
  position: fixed; right: clamp(12px, 2vw, 28px); bottom: clamp(12px, 2vw, 28px); z-index: 96;
  display: flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: 999px;
  background: #15131a; color: #fff; border: 1px solid rgba(255, 255, 255, 0.28);
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.support-pill:hover { transform: translateY(-3px) rotate(1.5deg); }
.support-pill:active { transform: scale(0.96); }
.support-pill__dot { position: relative; width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden; }
.support-pill__dot::before { content: ""; position: absolute; inset: 0; background: conic-gradient(#e8412c, #f6c324, #3fa34d, #2de2e6, #2b7fc3, #ff3cac, #e8412c); animation: vibe-spin 9s linear infinite; }
.support-pill__dot svg { position: relative; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.support-pill:hover .support-pill__dot::before { animation-duration: 1.2s; }
.support-pill:hover .support-pill__dot svg { transform: scale(1.2); }
.support-pill__label { font-size: 0.74rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; color: #fff; }
.menu-open .support-pill, html[data-shot] .support-pill { display: none; }
/* The back-to-top button moves up to make room */
body:has(.support-pill) .to-top { bottom: calc(clamp(12px, 2vw, 28px) + 66px); }
@media (max-width: 600px) {
  .support-pill__label { display: none; }
  .support-pill { padding-right: 8px; }
}
@media (prefers-reduced-motion: reduce) { .support-pill__dot::before { animation: none; } }

/* ---------- "Take me to that era" ---------- */

/* Same family as the Vibe travel button: a black pill, the spinning colour
   dial and the year in gold. It keeps this look in every era. */
.era-btn {
  display: flex; align-items: center; gap: 16px; width: 100%; margin-top: 26px; padding: 12px 26px 12px 12px;
  background: #15131a; color: #fff; text-align: left; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.28);
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.6); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
}
.era-btn:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 20px 36px -12px rgba(0, 0, 0, 0.7); }
.era-btn:active { transform: scale(0.97); }
.era-btn__dial { width: 56px; height: 56px; border-radius: 50%; position: relative; flex: none; background: conic-gradient(#e8412c, #f6c324, #3fa34d, #2de2e6, #2b7fc3, #ff3cac, #e8412c); animation: vibe-spin 9s linear infinite; }
.era-btn__dial::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: #15131a; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85) inset; }
.era-btn:hover .era-btn__dial, .era-btn.is-on .era-btn__dial { animation-duration: 1.2s; }
.era-btn__text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.era-btn__main { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; color: #fff; }
.era-btn__main::after { content: "→"; font-size: 1.2em; letter-spacing: 0; transition: transform 0.3s var(--ease); }
.era-btn:hover .era-btn__main::after { transform: translateX(6px); }
.era-btn__sub { font-family: "Bodoni Moda", Georgia, serif; font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.9rem); line-height: 1; color: #f6c324; text-transform: none; letter-spacing: 0; }
.era-btn.is-on .era-btn__main::after { content: "←"; }
/* The small version, on the "Year" line of a camera's data sheet */
.cam-sheet__year { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.era-btn--mini { width: auto; margin: 0; padding: 4px 12px 4px 4px; gap: 8px; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.6); }
.era-btn--mini .era-btn__dial { width: 22px; height: 22px; }
.era-btn--mini .era-btn__dial::after { inset: 6px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85) inset; }
.era-btn--mini .era-btn__main { font-size: 0.62rem; letter-spacing: 0.14em; gap: 7px; white-space: nowrap; }
.era-btn--mini:hover { transform: translateY(-2px) rotate(-1deg); }
.era-btn--mini.is-on { box-shadow: 0 0 0 2px #f6c324, 0 6px 14px -8px rgba(0, 0, 0, 0.6); }
@media (prefers-reduced-motion: reduce) { .era-btn__dial { animation: none; } }

/* ---------- Vibe travel: the playful time machine ----------
   Its own colours and type on purpose, so it looks the same in every era. */

.vibe { position: fixed; left: clamp(12px, 2vw, 28px); bottom: clamp(12px, 2vw, 28px); z-index: 96; font-family: "Jost", "Helvetica Neue", Arial, sans-serif; color: #fff; }
.vibe button { font-family: inherit; }
.vibe__toggle {
  display: flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: 999px;
  background: #15131a; color: #fff; border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vibe__toggle:hover { transform: translateY(-3px) rotate(-1.5deg); }
.vibe__toggle:active { transform: scale(0.96); }
.vibe__dial {
  width: 36px; height: 36px; border-radius: 50%; position: relative; flex: none;
  background: conic-gradient(#e8412c, #f6c324, #3fa34d, #2de2e6, #2b7fc3, #ff3cac, #e8412c);
  animation: vibe-spin 9s linear infinite;
}
.vibe__dial::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #15131a; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85) inset; }
.vibe__toggle:hover .vibe__dial, .vibe.is-open .vibe__dial { animation-duration: 1.2s; }
@keyframes vibe-spin { to { transform: rotate(360deg); } }
.vibe__label { font-size: 0.74rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; }
.vibe__now { font-family: "Bodoni Moda", Georgia, serif; font-size: 1.15rem; line-height: 1; color: #f6c324; }
.vibe__now:empty { display: none; }
.vibe__now-name { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; color: #fff; }
.vibe__now-name:empty { display: none; }
.vibe.is-travelling .vibe__label { display: none; }

/* The popup is built like the top of a camera: a chrome plate with a frame
   counter, then a leather-covered body with the shutter-speed dial. The
   backdrop is light so the era change stays visible behind it. */
.vibe__backdrop { position: fixed; inset: 0; background: rgba(10, 9, 12, 0.38); animation: vibe-fade 0.25s; }
.vibe__backdrop[hidden] { display: none; }
@keyframes vibe-fade { from { opacity: 0; } }
.vibe__panel {
  position: fixed; left: 50%; top: 50%; width: min(420px, calc(100vw - 24px)); max-height: calc(100svh - 24px); overflow: hidden auto;
  border-radius: 30px; background: #17161a; border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.85); transform: translate(-50%, -50%); z-index: 410;
  animation: vibe-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vibe__panel[hidden] { display: none; }
@keyframes vibe-pop { from { opacity: 0; transform: translate(-50%, -44%) scale(0.8) rotate(-3deg); } to { opacity: 1; transform: translate(-50%, -50%); } }
/* The way out: a solid black tab that cannot be missed on the chrome */
.vibe__close { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 8px 0 15px; border-radius: 999px; background: #17161a; color: #fff; font-size: 0.66rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s; }
.vibe__close i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #e0353d; font-style: normal; font-size: 1.15rem; line-height: 1; letter-spacing: 0; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.vibe__close:hover { transform: scale(1.06); background: #e0353d; }
.vibe__close:hover i { transform: rotate(90deg); background: #17161a; }

/* Chrome top plate with the frame-counter window */
.vibe__plate { padding: 58px 24px 18px; text-align: center; color: #1b1b1f; background: linear-gradient(180deg, #fbfbfb 0%, #cfcfd2 34%, #f1f1f2 58%, #a9a9ae 100%); border-bottom: 1px solid #6c6c72; }
.vibe__title { position: absolute; left: 24px; top: 25px; margin: 0; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; color: #3a3a40; }
.vibe__counter { display: inline-flex; align-items: center; justify-content: center; min-width: 200px; padding: 6px 22px 8px; border-radius: 12px; background: #0e0d10; box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.8); }
.vibe__year { font-family: "Bodoni Moda", Georgia, serif; font-size: clamp(2.6rem, 2rem + 3vw, 3.6rem); line-height: 1; letter-spacing: 0.01em; color: #fdf6dd; font-variant-numeric: tabular-nums; }
.vibe__name { margin: 10px 0 0; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: #2a2a2e; }

/* Leather-covered body */
.vibe__body { padding: 26px 22px 22px; background-color: #17161a; background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.5px); background-size: 6px 6px; }
/* The dial is as wide as the popup allows, and the years sit far out near the rim,
   so each has room even with many eras. */
.vibe__dial-wrap { --r: min(168px, 44vw); position: relative; width: min(336px, 100%); aspect-ratio: 1; margin: 0 auto; }
/* The red index mark the selected year lines up with */
.vibe__index { position: absolute; left: 50%; top: -14px; z-index: 3; width: 0; height: 0; transform: translateX(-50%); border: 9px solid transparent; border-top: 14px solid #e0353d; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)); }
/* The dial: knurled rim, brushed chrome face, engraved years */
.vibe__wheel {
  position: absolute; inset: 0; border-radius: 50%; cursor: grab; touch-action: none;
  background: radial-gradient(circle, transparent 0 93%, rgba(0, 0, 0, 0.35) 93.4% 94.2%, transparent 94.6%),
    repeating-conic-gradient(#f6f6f7 0deg 1.2deg, #77777c 1.2deg 2.4deg),
    #c9c9cd;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.7), inset 0 0 0 2px rgba(255, 255, 255, 0.5);
  transform: rotate(calc(var(--turn, 0) * var(--step) * -1));
  transition: transform 0.55s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.vibe__wheel::before { content: ""; position: absolute; inset: 5.5%; border-radius: 50%; background: conic-gradient(#e9e9eb, #a8a8ad, #f7f7f8, #b5b5ba, #ededee, #9d9da3, #e9e9eb); box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.9), inset 0 -4px 10px rgba(0, 0, 0, 0.3); }
.vibe__wheel.is-grabbed { cursor: grabbing; transition: none; }
.vibe__stop { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)); }
.vibe__stop span {
  position: absolute; left: 0; top: 0; transform: translate(-50%, calc(var(--r) * -0.8 - 50%));
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif; font-size: 0.88rem; font-weight: 500; letter-spacing: 0.01em; color: #1b1b1f;
  padding: 6px 3px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); transition: color 0.2s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); white-space: nowrap;
}
.vibe__stop:hover span { color: #c0161e; }
.vibe__stop.is-on span { color: #c0161e; font-weight: 600; transform: translate(-50%, calc(var(--r) * -0.8 - 50%)) scale(1.22); }
/* An engraved tick under each year */
.vibe__stop::after { content: ""; position: absolute; left: -1px; top: calc(var(--r) * -0.66); width: 2px; height: calc(var(--r) * 0.06); background: rgba(27, 27, 31, 0.55); border-radius: 1px; }
.vibe__stop.is-on::after { background: #c0161e; }
.vibe__stop--today span { font-size: 0.9rem; }
/* The shutter release in the middle of the dial: press it for a random era */
.vibe__release { position: absolute; left: 50%; top: 50%; width: 27%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #b9b9be 55%, #77777d); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.55), inset 0 0 0 4px rgba(255, 255, 255, 0.55); transition: transform 0.12s; }
.vibe__release span { position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff6f6a, #c0161e 60%, #7d0c12); box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.5), 0 2px 4px rgba(0, 0, 0, 0.5); }
.vibe__release:hover { transform: translate(-50%, -50%) scale(1.05); }
.vibe__release:active { transform: translate(-50%, -48%) scale(0.94); }
/* The slider only exists for keyboard users */
.vibe__slider { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.vibe__hint { margin: 20px 0 0; text-align: center; font-size: 0.84rem; line-height: 1.4; color: rgba(255, 255, 255, 0.68); }

.vibe__actions { display: flex; gap: 8px; margin-top: 16px; }
.vibe__actions button { flex: 1; padding: 11px 8px; border-radius: 999px; font-size: 0.66rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s, color 0.2s; white-space: nowrap; }
.vibe__actions button:hover { transform: translateY(-2px) rotate(-2deg); }
.vibe__actions [data-vibe-step] { flex: none; width: 42px; padding: 0; font-size: 1.3rem; letter-spacing: 0; line-height: 1; }
.vibe__actions [data-vibe-step]:hover { background: #fff; color: #17161a; }
.vibe__actions [data-vibe-random] { background: #e0353d; border-color: #e0353d; }
.vibe__actions [data-vibe-random]:hover { background: #fff; border-color: #fff; color: #17161a; }
.vibe__actions [data-era-reset]:hover { background: #fff; color: #17161a; }
.vibe:not(.is-travelling) .vibe__actions [data-era-reset] { opacity: 0.4; pointer-events: none; }
.menu-open .vibe { display: none; }

/* On phones the popup is a bottom sheet no taller than half the screen, so the
   page changing era stays in view above it. Only the top of the dial shows,
   like a thumbwheel. */
@media (max-width: 640px) {
  .vibe__backdrop { background: transparent; }
  .vibe__panel { left: 0; top: auto; bottom: 0; width: 100%; max-height: 50svh; overflow: hidden; transform: none; border-radius: 22px 22px 0 0; border-width: 1px 0 0; box-shadow: 0 -18px 50px -10px rgba(0, 0, 0, 0.6); animation: vibe-rise 0.4s cubic-bezier(0.2, 0.9, 0.3, 1); }
  .vibe__close { top: 8px; right: 8px; }
  .vibe__plate { display: flex; align-items: center; gap: 14px; padding: 9px 118px 9px 14px; text-align: left; }
  .vibe__title { display: none; }
  .vibe__counter { min-width: 0; padding: 4px 14px 6px; border-radius: 9px; }
  .vibe__year { font-size: 1.9rem; }
  .vibe__name { margin: 0; font-size: 0.7rem; letter-spacing: 0.18em; }
  .vibe__body { padding: 14px 14px calc(12px + env(safe-area-inset-bottom)); }
  .vibe__dial-wrap { --r: 180px; width: 100%; aspect-ratio: auto; height: clamp(84px, 50svh - 176px, 170px); overflow: hidden; }
  .vibe__index { top: 0; }
  .vibe__wheel { inset: auto; left: 50%; top: 12px; width: 360px; height: 360px; margin-left: -180px; }
  .vibe__hint { display: none; }
  /* The shutter release stays, sitting on the visible part of the dial under the red mark. */
  .vibe__release { top: auto; bottom: 4px; width: clamp(40px, calc(50svh - 254px), 64px); transform: translateX(-50%); }
  .vibe__release:hover { transform: translateX(-50%) scale(1.05); }
  .vibe__release:active { transform: translate(-50%, 2px) scale(0.94); }
  .vibe__actions { margin-top: 12px; gap: 6px; }
  .vibe__actions button { padding: 10px 4px; font-size: 0.6rem; letter-spacing: 0.05em; min-width: 0; }
  .vibe__actions [data-vibe-step] { width: 36px; }
  .vibe__actions [data-vibe-random] { flex: 0 1 auto; padding-inline: 12px; }
}
@keyframes vibe-rise { from { transform: translateY(100%); } }

/* The trip between two eras. Two layers do all the work: rings rushing past
   and a turning wheel of rays. Each destination sets its own colours and mix
   (data-to), so the tunnel already belongs to the period being reached. The
   default, used for the return to today, is 1960s-television op art. */
@property --warp { syntax: "<number>"; inherits: false; initial-value: 0; }
.vibe-warp {
  --w1: #0b0a0d; --w2: #f6f1e1; --ring: 44px; --period: calc(var(--ring) * 2); --rush: 0.5s;
  --s1: #fff; --s2: #000; --seg: 15deg; --blend: difference; --turn: 5s;
  --yb: #0b0a0d; --yf: #fdf6dd; --yl: #f6f1e1;
  position: fixed; inset: 0; z-index: 500; overflow: hidden; display: grid; place-items: center; pointer-events: none; visibility: hidden; opacity: 0; transition: opacity 0.4s ease, visibility 0s 0.4s;
}
.vibe-warp.is-on { visibility: visible; opacity: 1; transition: opacity 0.18s ease; }
.vibe-warp__rings, .vibe-warp__spin { position: absolute; left: 50%; top: 50%; width: 240vmax; height: 240vmax; margin: -120vmax 0 0 -120vmax; border-radius: 50%; }
.vibe-warp__rings {
  --o: calc(var(--warp) * var(--period));
  background: repeating-radial-gradient(circle, var(--w1) var(--o), var(--w1) calc(var(--o) + var(--ring)), var(--w2) calc(var(--o) + var(--ring)), var(--w2) calc(var(--o) + var(--ring) * 2));
  transform: scale(2.4); transition: transform 0.5s ease-in;
}
.vibe-warp__spin { background: repeating-conic-gradient(var(--s1) 0deg var(--seg), var(--s2) var(--seg) calc(var(--seg) * 2)); mix-blend-mode: var(--blend); }
.vibe-warp.is-on .vibe-warp__rings { animation: warp-rush var(--rush) linear infinite; transform: scale(1); transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); }
.vibe-warp.is-on .vibe-warp__spin { animation: warp-spin var(--turn) linear infinite; }
@keyframes warp-rush { to { --warp: 1; } }
@keyframes warp-spin { to { transform: rotate(360deg); } }
@keyframes warp-roll { to { background-position: 0 160px; } }
@keyframes warp-drift { to { background-position: 80px 80px; } }
.vibe-warp__year { position: relative; padding: 0.12em 0.42em 0.2em; border-radius: 0.22em; background: var(--yb); border: 5px solid var(--yl); box-shadow: 0 0 0 5px var(--yb), 0 30px 80px rgba(0, 0, 0, 0.6); font-family: "Bodoni Moda", Georgia, serif; font-size: clamp(3.2rem, 1.6rem + 9vw, 9rem); line-height: 1; color: var(--yf); font-variant-numeric: tabular-nums; transform: scale(0.3) rotate(-14deg); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.vibe-warp.is-on .vibe-warp__year { transform: none; }
.vibe-warp.is-landing .vibe-warp__year { transform: scale(1.18) rotate(3deg); }

/* Cameras of the destination era, cut out of their background, fly out of
   the tunnel towards the visitor. */
.vibe-warp__cams { position: absolute; inset: 0; }
.vibe-warp__cam { position: absolute; left: 50%; top: 50%; width: clamp(130px, 19vw, 280px); height: auto; max-width: none; transform: translate(-50%, -50%); filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.55)); opacity: 0; }
.vibe-warp__cam.is-ready { animation: warp-fly 1.15s cubic-bezier(0.3, 0, 0.8, 0.7) both; }
@keyframes warp-fly {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.05) rotate(var(--r0)); }
  18% { opacity: 1; }
  to { opacity: 1; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.35) rotate(var(--r1)); }
}

/* 1900: a sepia iris, slow and flickering like a hand-cranked projector */
.vibe-warp[data-to="epoque"] { --w1: #2e2013; --w2: #e9d8b4; --ring: 72px; --rush: 0.95s; --yb: #2e2013; --yf: #f3e6c8; --yl: #c9a66b; }
.vibe-warp[data-to="epoque"] .vibe-warp__spin { display: none; }
.vibe-warp[data-to="epoque"].is-on .vibe-warp__rings { animation: warp-rush var(--rush) linear infinite, warp-flicker 0.17s steps(2) infinite; }
@keyframes warp-flicker { 50% { filter: brightness(0.92); } }
/* 1930: a black and gold Art Déco sunburst */
.vibe-warp[data-to="deco"] { --s1: #c9a24a; --s2: #111; --seg: 9deg; --blend: normal; --turn: 8s; --yb: #111; --yf: #e6c877; --yl: #c9a24a; }
/* 1937: the chrome blades of an iris diaphragm */
.vibe-warp[data-to="germany"] { --blend: normal; --turn: 3.2s; --yb: #161616; --yf: #f1efe9; --yl: #b9b9b9; }
.vibe-warp[data-to="germany"] .vibe-warp__spin { background: repeating-conic-gradient(#fafafa 0deg, #9a9a9a 22deg, #2a2a2a 29deg, #111 30deg); }
/* 1944: newsreel film running through the gate */
.vibe-warp[data-to="dispatch"] { --yb: #1b1b17; --yf: #e9e3d0; --yl: #8a8468; }
.vibe-warp[data-to="dispatch"] .vibe-warp__spin { display: none; }
.vibe-warp[data-to="dispatch"] .vibe-warp__rings { background: repeating-linear-gradient(0deg, #1b1b17 0 22px, transparent 22px 160px), repeating-linear-gradient(90deg, rgba(27, 27, 23, 0.16) 0 2px, transparent 2px 7px), #d6cfb8; }
.vibe-warp[data-to="dispatch"].is-on .vibe-warp__rings { animation: warp-roll 0.22s linear infinite; }
/* 1950: red rays, poster style */
.vibe-warp[data-to="soviet"] { --s1: #c8102e; --s2: #f1e3c6; --seg: 11.25deg; --blend: normal; --turn: 5s; --yb: #c8102e; --yf: #f8ecd0; --yl: #f1e3c6; }
/* 1955: sliding across the drawing board */
.vibe-warp[data-to="blueprint"] { --yb: #123a7a; --yf: #fff; --yl: #fff; }
.vibe-warp[data-to="blueprint"] .vibe-warp__spin { display: none; }
.vibe-warp[data-to="blueprint"] .vibe-warp__rings { background: linear-gradient(rgba(255, 255, 255, 0.75) 2px, transparent 2px) 0 0 / 80px 80px, linear-gradient(90deg, rgba(255, 255, 255, 0.75) 2px, transparent 2px) 0 0 / 80px 80px, linear-gradient(rgba(255, 255, 255, 0.25) 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(90deg, rgba(255, 255, 255, 0.25) 1px, transparent 1px) 0 0 / 20px 20px, #1d4e9e; }
.vibe-warp[data-to="blueprint"].is-on .vibe-warp__rings { animation: warp-drift 0.45s linear infinite; }
/* 1957: an atomic-age starburst, teal rays over mustard rings */
.vibe-warp[data-to="atomic"] { --w1: #e6a92b; --w2: #fbf3e0; --ring: 46px; --rush: 0.6s; --s1: #1f9e96; --s2: transparent; --seg: 7.5deg; --blend: normal; --turn: 6s; --yb: #1f3b3a; --yf: #fbf3e0; --yl: #e8563a; }
/* 1960: fine red ripples on paper */
.vibe-warp[data-to="japan"] { --w1: #bc002d; --w2: #fbf6ea; --ring: 20px; --rush: 0.4s; --yb: #fbf6ea; --yf: #bc002d; --yl: #bc002d; }
.vibe-warp[data-to="japan"] .vibe-warp__spin { display: none; }
/* 1966: the op-art tunnel goes psychedelic */
.vibe-warp[data-to="pop"] { --w1: #ff2e88; --w2: #ffd400; --ring: 56px; --yb: #2a1608; --yf: #ffd400; --yl: #ff5a1f; }
/* 1977: the instant-film rainbow */
.vibe-warp[data-to="instant"] { --ring: 34px; --period: calc(var(--ring) * 6); --rush: 0.9s; --yb: #fbf7ee; --yf: #1c1c1c; --yl: #1c1c1c; }
.vibe-warp[data-to="instant"] .vibe-warp__spin { display: none; }
.vibe-warp[data-to="instant"] .vibe-warp__rings { background: repeating-radial-gradient(circle, #e8372c var(--o), #e8372c calc(var(--o) + var(--ring)), #f58220 calc(var(--o) + var(--ring)), #f58220 calc(var(--o) + var(--ring) * 2), #fbc02d calc(var(--o) + var(--ring) * 2), #fbc02d calc(var(--o) + var(--ring) * 3), #43a047 calc(var(--o) + var(--ring) * 3), #43a047 calc(var(--o) + var(--ring) * 4), #1e88e5 calc(var(--o) + var(--ring) * 4), #1e88e5 calc(var(--o) + var(--ring) * 5), #fbf7ee calc(var(--o) + var(--ring) * 5), #fbf7ee calc(var(--o) + var(--ring) * 6)); }
/* 1981: pink and teal rings under yellow wedges */
.vibe-warp[data-to="memphis"] { --w1: #ff7eb6; --w2: #3fd0c9; --ring: 50px; --s1: #ffe14d; --s2: transparent; --seg: 22.5deg; --blend: normal; --turn: 4s; --yb: #1c1c1c; --yf: #ffe14d; --yl: #ff7eb6; }
/* 1984: film-box yellow and red */
.vibe-warp[data-to="kodak"] { --s1: #ffb700; --s2: #e30613; --seg: 15deg; --blend: normal; --turn: 5s; --yb: #e30613; --yf: #ffd23f; --yl: #ffb700; }
/* 1988: neon lines on midnight purple */
.vibe-warp[data-to="synthwave"] { --ring: 46px; --period: var(--ring); --rush: 0.35s; --blend: screen; --turn: 9s; --yb: #12002b; --yf: #19f0ff; --yl: #ff3cac; }
.vibe-warp[data-to="synthwave"] .vibe-warp__rings { background: repeating-radial-gradient(circle, #12002b var(--o), #12002b calc(var(--o) + var(--ring) - 5px), #ff3cac calc(var(--o) + var(--ring) - 5px), #ff3cac calc(var(--o) + var(--ring))); }
.vibe-warp[data-to="synthwave"] .vibe-warp__spin { background: repeating-conic-gradient(#19f0ff 0deg 1deg, transparent 1deg 15deg); }
.vibe-warp[data-to="synthwave"] .vibe-warp__year { text-shadow: 0 0 24px #19f0ff; }
/* 1923: sage and cream rings behind slender gold leaves */
.vibe-warp[data-to="liberty"] { --w1: #7a8f6a; --w2: #f4ecd9; --ring: 60px; --rush: 0.9s; --s1: rgba(184, 150, 62, 0.85); --s2: transparent; --seg: 4deg; --blend: normal; --turn: 10s; --yb: #23403a; --yf: #f4ecd9; --yl: #b8963e; }
.vibe-warp[data-to="liberty"] .vibe-warp__spin { background: repeating-conic-gradient(var(--s1) 0deg 4deg, transparent 4deg 30deg); }
.vibe-warp[data-to="liberty"] .vibe-warp__year { font-family: "Elsie Swash Caps", Georgia, serif; }
/* 1940: a film leader counting down, a sweep hand turning over grey rings */
.vibe-warp[data-to="noir"] { --w1: #1a1a1e; --w2: #2c2c31; --ring: 70px; --rush: 1s; --blend: normal; --turn: 1.1s; --yb: #efece4; --yf: #0d0d0f; --yl: #0d0d0f; }
.vibe-warp[data-to="noir"] .vibe-warp__spin { background: conic-gradient(rgba(239, 236, 228, 0.5) 0deg 70deg, transparent 70deg 360deg); }
.vibe-warp[data-to="noir"] .vibe-warp__year { font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 700; border-radius: 50%; aspect-ratio: 1; display: grid; place-items: center; padding: 0.5em; font-size: clamp(3rem, 1.4rem + 8vw, 8rem); }
/* 1970: warm rings behind turning petals */
.vibe-warp[data-to="flower"] { --w1: #ff7a1a; --w2: #ffd23f; --ring: 52px; --rush: 0.7s; --s1: #e0218a; --s2: transparent; --seg: 22.5deg; --blend: normal; --turn: 7s; --yb: #4a1d6b; --yf: #ffd23f; --yl: #ff7a1a; }
.vibe-warp[data-to="flower"] .vibe-warp__spin { border-radius: 50%; opacity: 0.85; }
/* 1985: sunset rings behind aqua rays */
.vibe-warp[data-to="miami"] { --ring: 44px; --period: calc(var(--ring) * 3); --rush: 0.8s; --s1: rgba(25, 199, 192, 0.9); --s2: transparent; --seg: 10deg; --blend: normal; --turn: 7s; --yb: #ffffff; --yf: #ff4f93; --yl: #19c7c0; }
.vibe-warp[data-to="miami"] .vibe-warp__rings { background: repeating-radial-gradient(circle, #ffd166 var(--o), #ffd166 calc(var(--o) + var(--ring)), #ff9a5a calc(var(--o) + var(--ring)), #ff9a5a calc(var(--o) + var(--ring) * 2), #ff4f93 calc(var(--o) + var(--ring) * 2), #ff4f93 calc(var(--o) + var(--ring) * 3)); }
.vibe-warp[data-to="miami"] .vibe-warp__spin { background: repeating-conic-gradient(var(--s1) 0deg 10deg, transparent 10deg 45deg); }
.vibe-warp[data-to="miami"] .vibe-warp__year { font-family: "Righteous", sans-serif; text-shadow: 4px 4px 0 #19c7c0; }
/* 2024: flat blocks of colour */
.vibe-warp[data-to="block"] { --blend: normal; --turn: 3s; --yb: #111; --yf: #fff; --yl: #ffd23f; }
.vibe-warp[data-to="block"] .vibe-warp__spin { background: repeating-conic-gradient(#ff4b3e 0deg 30deg, #ffd23f 30deg 60deg, #3a86ff 60deg 90deg, #111 90deg 120deg); }

@media (max-width: 600px) {
  .vibe__label { display: none; }
  .vibe__toggle { padding-right: 8px; }
  .vibe.is-travelling .vibe__toggle { padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) { .vibe__dial { animation: none; } .vibe__panel { animation: none; } }

/* ---------- The default ("today") look ----------
   The international (Swiss) style: white page, black rules, red accent, tight
   grotesque type. It was the 1957 era look and is now what the site looks like
   when no era is selected, so every rule is scoped to "no look switched on". */
html:not([data-look]) {
  --paper: #ffffff; --paper-deep: #f1f1f1; --ink: #000; --text: #000; --text-muted: #5c5c5c;
  --red: #e30613; --red-bright: #ff2d39; --line: rgba(0, 0, 0, 0.9);
  --display: "Inter Tight", "Helvetica Neue", Arial, sans-serif; --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
}
html:not([data-look]) body { font-weight: 400; }
html:not([data-look]) .display, html:not([data-look]) .blk-text h2, html:not([data-look]) .blk-text h3, html:not([data-look]) .blk-split__head h2, html:not([data-look]) .profile h2, html:not([data-look]) .member h3, html:not([data-look]) .cam-hero h1 { font-weight: 700; letter-spacing: -0.045em; line-height: 0.92; }
html:not([data-look]) .display em, html:not([data-look]) .pull { font-style: normal; color: var(--red); }
html:not([data-look]) .pull { font-weight: 700; letter-spacing: -0.04em; }
html:not([data-look]) .btn { border-radius: 0; }
html:not([data-look]) .fact-value, html:not([data-look]) .info .big, html:not([data-look]) .additions__list .name, html:not([data-look]) .review blockquote { font-weight: 500; letter-spacing: -0.02em; }
html:not([data-look]) .eyebrow { color: #000; font-weight: 600; }
html:not([data-look]) .cam-hero { border-bottom: 3px solid #000; }
html:not([data-look]) .page-head > .wrap:first-child { border-bottom: 3px solid #000; }
html:not([data-look]) .blk-text h2, html:not([data-look]) .blk-text h3, html:not([data-look]) .blk-split__head h2, html:not([data-look]) .profile h2 { font-weight: 700; }

/* ---------- Guarantee: cameras are always shown on white, in their original colours ----------
   Whatever look or theme is applied on top, the studio shots and 360° films of
   the cameras are never tinted, blended into a coloured background or filtered,
   and every section that shows cameras is pure white, so no camera ever sits in
   a visible lighter box (no "vignette" around it).
   One deliberate exception: the film at the top of the home page (.hero__media),
   which each look is free to blend into its own background.
   Keep this block last and keep the !important flags: it is meant to win. */
.crop, .cam-hero__media, .specimen, .cam-card__img, .cam-shot, .profile__cam .crop,
.specimens, .cam-gallery, .cam-nav, .cam-related, .cam-beyond-zone, .page-body:has(.cam-grid) {
  background-color: #fff !important; background-image: none !important;
}
.crop > img, .crop > video, .specimen img, .cam-card__img img {
  mix-blend-mode: normal !important; filter: none !important;
}
.cam-related { border-top: 1px solid var(--line); }