/* ---- vitrine (Vitrine — Exhibition & museum design 257) --------------------
   THE STRUCTURAL MOVE: the section labels are not headings, they are furniture.
   Between bands a lone display word is set enormous, light, widely tracked and
   held at 30% strength across the FULL browser width — architecture rather than
   type, and the one thing that stops a black page reading as empty. Under it the
   work grid abandons the 1300px column entirely: eight square tiles four across,
   gapped so black shows between them, so each photograph reads as a lit object in
   a dark room and its title only slides in on hover behind a lamp-blue rule. The
   cold grey-blue is spent on exactly three things — the small-caps eyebrows, that
   hover rule and the submit — so every other colour on the page is a photograph. */
body.t-vitrine.ws-body {
  --bg: #0b0b0b; --fg: #8f8880; --heading: #ece7de; --text: #8f8880; --muted: #6f6862;
  --vt-panel: #141312; --vt-lamp: #8fa3a8; --vt-line: #262320;
  --hero-a: rgba(9, 9, 9, .30); --hero-b: rgba(9, 9, 9, .62);
}
body.t-vitrine { background: var(--bg); }
body.t-vitrine .ws-container { max-width: 1300px; }
body.t-vitrine .ws-nav { background: rgba(11, 11, 11, .94); border-bottom: 1px solid var(--vt-line); }
body.t-vitrine .ws-brand { color: var(--heading); text-transform: uppercase; letter-spacing: .3em; font-weight: 400; font-size: 13px; }
body.t-vitrine .ws-nav-links a { color: var(--text); text-transform: uppercase; letter-spacing: .18em; font-size: 10.5px; font-weight: 600; opacity: 1; }
body.t-vitrine .ws-nav-links a:hover, body.t-vitrine .ws-nav-links a.on { color: var(--vt-lamp); }

/* one unbroken black ground — every alternating tint killed */
body.t-vitrine.ws-body .ws-section { padding: 88px 0; }
body.t-vitrine.ws-body .ws-section:nth-child(even):not(.ws-cta):not(.ws-shoplink) { background: transparent; }

/* a tall banner, not a viewport: three interiors crossfading, copy middled */
body.t-vitrine .ws-hero { min-height: 815px; }
body.t-vitrine .ws-hero h1 { font-weight: 200; font-size: clamp(34px, 5.4vw, 68px); letter-spacing: .01em; line-height: 1.14; text-shadow: none; max-width: 22ch; }
body.t-vitrine.ws-body .btn.brand { background: var(--vt-lamp); color: #0b0b0b; border-radius: 0; text-transform: uppercase; letter-spacing: .22em; font-size: 10.5px; font-weight: 700; padding: 16px 36px; }
body.t-vitrine.ws-body .ws-hero-cta.btn.brand { background: rgba(236, 231, 222, .12); color: #ece7de; box-shadow: none; }
body.t-vitrine.ws-body .ws-hero-cta.btn.brand:hover { background: rgba(236, 231, 222, .22); }

/* THE MOVE 1 OF 2 — the lone display word, full width, a third of full strength */
body.t-vitrine.ws-body .ws-titleblock { padding: 104px 0 0; }
body.t-vitrine .ws-titleblock .ws-container { max-width: none; }
body.t-vitrine .ws-title-h { color: var(--heading); opacity: .3; font-weight: 200; font-size: clamp(52px, 14vw, 210px); letter-spacing: .12em; line-height: .9; text-transform: uppercase; margin: 0; }
body.t-vitrine .ws-h2, body.t-vitrine .ws-story-copy h2 { color: var(--heading); font-weight: 300; font-size: clamp(23px, 2.9vw, 33px); letter-spacing: -.005em; line-height: 1.2; }
body.t-vitrine .ws-sub, body.t-vitrine .ws-story-copy p, body.t-vitrine .ws-col p { color: var(--text); font-size: 15px; line-height: 1.8; }

/* six raised panels two rows of three — the only lifted surfaces on the page */
body.t-vitrine .ws-features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; text-align: left; }
body.t-vitrine .ws-feature { background: var(--vt-panel); padding: 36px 32px 40px; }
body.t-vitrine .ws-feature-icon { color: var(--vt-lamp); margin-bottom: 20px; }
body.t-vitrine .ws-feature h3 { color: var(--heading); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .13em; margin: 0 0 12px; }
body.t-vitrine .ws-feature p { color: var(--text); font-size: 13.5px; line-height: 1.75; }

/* THE MOVE 2 OF 2 — eight squares four across at browser width, gapped, titled on hover */
body.t-vitrine.ws-body .ws-gallery { padding: 0; }
body.t-vitrine .ws-gallery > .ws-container { max-width: none; padding: 0 10px; }
body.t-vitrine .ws-gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
body.t-vitrine .ws-gallery-item { position: relative; overflow: hidden; }
body.t-vitrine .ws-gallery-item img { aspect-ratio: 1 / 1; border-radius: 0; }
body.t-vitrine .ws-gallery-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 15px 18px 16px; background: rgba(11, 11, 11, .88); border-top: 1px solid var(--vt-lamp); transform: translateX(-101%); transition: transform .34s ease; }
body.t-vitrine .ws-gallery-item:hover .ws-gallery-cap { transform: translateX(0); }
body.t-vitrine .ws-gallery-cap strong { color: var(--heading); font-size: 12px; text-transform: uppercase; letter-spacing: .15em; }
body.t-vitrine .ws-gallery-cap span { color: var(--vt-lamp); font-size: 11.5px; }
body.t-vitrine .ws-story-media img { border-radius: 0; aspect-ratio: 4 / 3; }

/* the film runs edge to edge, a still with a lamp-blue triangle on it */
body.t-vitrine.ws-body .ws-section.ws-video { padding: 0 0 88px; }
body.t-vitrine .ws-video > .ws-container { max-width: none; padding: 0; }
body.t-vitrine .ws-video-frame { aspect-ratio: 21 / 9; border-radius: 0; box-shadow: none; background: #100f0e url("/media/samples/vtr_video.jpg") center / cover; }
body.t-vitrine .ws-video-frame::before { content: ''; position: absolute; inset: 0; margin: auto; width: 82px; height: 82px; border-radius: 50%; background: rgba(11, 11, 11, .72); }
body.t-vitrine .ws-video-frame::after { content: ''; position: absolute; inset: 0; margin: auto; width: 0; height: 0; transform: translateX(5px); border-top: 13px solid transparent; border-bottom: 13px solid transparent; border-left: 22px solid var(--vt-lamp); }
body.t-vitrine .ws-video-caption { max-width: 760px; margin: 20px auto 0; padding: 0 22px; color: var(--muted); font-size: 13px; line-height: 1.7; }

/* the curator gets air on both sides instead of two photographs */
body.t-vitrine.ws-body .ws-quoteblock { padding: 132px 0; }
body.t-vitrine .ws-quote-t { color: var(--heading); font-weight: 200; font-style: normal; font-size: clamp(21px, 2.7vw, 32px); line-height: 1.45; }
body.t-vitrine .ws-quote-a, body.t-vitrine .ws-col-h { color: var(--vt-lamp); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .22em; }
body.t-vitrine .ws-col-h { margin: 0 0 18px; }

/* the named institutions, ruled off one under the other */
body.t-vitrine .ws-listblock .ws-list { list-style: none; padding: 0; border-top: 1px solid var(--vt-line); }
body.t-vitrine .ws-list li { border-bottom: 1px solid var(--vt-line); padding: 19px 2px; color: var(--heading); font-size: 15px; font-weight: 300; letter-spacing: .02em; }

/* the coda — a narrow form of underlined fields, lamp blue only on the submit */
body.t-vitrine.ws-body .ws-contact { border-top: 1px solid var(--vt-line); padding: 108px 0 120px; }
body.t-vitrine .ws-contact .ws-form { max-width: 420px; }
body.t-vitrine .ws-field label { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; }
body.t-vitrine .ws-field input, body.t-vitrine .ws-field textarea, body.t-vitrine .ws-field select { background: transparent; border: 0; border-bottom: 1px solid var(--vt-line); border-radius: 0; color: var(--heading); padding: 11px 2px; }
body.t-vitrine .ws-footer { border-top: 1px solid var(--vt-line); color: var(--muted); }

@media (max-width: 900px) {
  body.t-vitrine .ws-hero { min-height: 78vh; }
  body.t-vitrine .ws-features-grid, body.t-vitrine .ws-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-vitrine .ws-gallery-cap { position: static; transform: none; background: transparent; border-top: 0; padding: 12px 2px 0; }
}

/* night — the day look is already black, so night drops to true ink, warms the
   bone a shade and lifts the lamp one stop so the eyebrows still read */
html[data-theme="dark"] body.t-vitrine.ws-body {
  --bg: #050505; --fg: #857e77; --heading: #f4efe6; --text: #857e77; --muted: #67615b;
  --vt-panel: #100f0e; --vt-lamp: #a3b8bd; --vt-line: #1d1b19;
  --hero-a: rgba(0, 0, 0, .34); --hero-b: rgba(0, 0, 0, .66);
}
html[data-theme="dark"] body.t-vitrine { background: var(--bg); }
html[data-theme="dark"] body.t-vitrine .ws-nav { background: rgba(5, 5, 5, .95); }
html[data-theme="dark"] body.t-vitrine .ws-gallery-cap { background: rgba(5, 5, 5, .9); }
html[data-theme="dark"] body.t-vitrine .ws-video-frame { background-color: #0a0a09; }