/* ============================================================
   vivid — work-first studio portfolio. No hero: the grid starts
   directly under the header, tiles are dense landscape crops with
   a two-line caption. Compact type, one loud accent.
   ============================================================ */
body.t-vivid.ws-body { --bg: #ffffff; --fg: #6f6f6f; --heading: #232323; --text: #6f6f6f; --muted: #9b9b9b; }
body.t-vivid .ws-nav { background: color-mix(in srgb, #ffffff 92%, transparent); border-bottom: 0; }
body.t-vivid .ws-nav-inner { height: 76px; }
body.t-vivid .ws-brand { text-transform: lowercase; font-weight: 800; font-size: 22px; letter-spacing: -0.03em; }
body.t-vivid .ws-nav-links { gap: 26px; }
body.t-vivid .ws-nav-links a { text-transform: uppercase; letter-spacing: 0.09em; font-size: 11.5px; font-weight: 700; opacity: 0.85; }
body.t-vivid .ws-nav-links a:hover, body.t-vivid .ws-nav-links a.on { color: #e5484d; opacity: 1; }
body.t-vivid .ws-nav-links a.on { border-bottom: 2px solid currentColor; padding-bottom: 3px; }
/* the header CTA reads as a pill, the one soft shape on the page */
body.t-vivid .ws-makeyours { border-radius: 999px; padding: 10px 20px; }
/* no hero: the first section must not carry the usual top padding */
body.t-vivid .ws-section { background: transparent; padding: 60px 0; }
body.t-vivid main > .ws-section:first-child { padding-top: 26px; }
body.t-vivid .ws-h2 { text-align: left; font-size: clamp(19px, 2.2vw, 26px); font-weight: 800; letter-spacing: -0.02em; }
body.t-vivid .ws-sub { text-align: left; margin-left: 0; }
/* dense four-up landscape grid with captions under each tile */
body.t-vivid .ws-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 30px 26px; }
body.t-vivid .ws-gallery-item img { aspect-ratio: 4 / 3; border-radius: 3px; }
body.t-vivid .ws-gallery-cap strong { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #232323; }
body.t-vivid .ws-gallery-cap span { color: #a6a6a6; font-size: 12px; }
body.t-vivid .ws-features-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 32px 26px; }
body.t-vivid .ws-feature { text-align: left; padding: 0; }
body.t-vivid .ws-feature-icon { color: #e5484d; margin-bottom: 12px; }
body.t-vivid .ws-feature-icon .ws-ico { width: 26px; height: 26px; }
body.t-vivid .ws-feature h3 { font-size: 14px; font-weight: 700; }
body.t-vivid .ws-story-media img { border-radius: 3px; aspect-ratio: 4 / 3; }
body.t-vivid .ws-cta { background: #232323; }
body.t-vivid .ws-cta .btn.brand { background: #e5484d; color: #ffffff; border-radius: 999px; }
body.t-vivid.ws-body .btn.brand { border: 0; box-shadow: none; border-radius: 999px; background: #e5484d; color: #ffffff; font-weight: 700; padding: 13px 26px; }
body.t-vivid.ws-body .btn.brand:hover { background: #c93b40; }
body.t-vivid .ws-field input, body.t-vivid .ws-field textarea, body.t-vivid .ws-field select { border-radius: 4px; }
body.t-vivid .ws-footer { border-top: 1px solid #ededed; }

/* vivid — night. The toggle in the site's own menu flips to this; the preference is
   stored per site, so it never reaches the dashboard or another template. */
html[data-theme="dark"] body.t-vivid.ws-body { --bg: #131313; --fg: #b5b5b5; --heading: #f4f4f4; --text: #b5b5b5; --muted: #8d8d8d; }
html[data-theme="dark"] body.t-vivid .ws-nav { background: color-mix(in srgb, #131313 92%, transparent); border-bottom-color: #2a2a2a; }
html[data-theme="dark"] body.t-vivid .ws-section { border-top-color: #2a2a2a; }
html[data-theme="dark"] body.t-vivid .ws-story-copy p,
html[data-theme="dark"] body.t-vivid .ws-feature p,
html[data-theme="dark"] body.t-vivid .ws-faq-item p,
html[data-theme="dark"] body.t-vivid .ws-richtext p { color: #b5b5b5; }
html[data-theme="dark"] body.t-vivid .ws-quote { background: #1b1b1b; border-color: #2a2a2a; }
html[data-theme="dark"] body.t-vivid .ws-quote blockquote { color: #b5b5b5; }
html[data-theme="dark"] body.t-vivid .ws-plan { background: #1b1b1b; border-color: #2a2a2a; }
html[data-theme="dark"] body.t-vivid .ws-faq-list, html[data-theme="dark"] body.t-vivid .ws-faq-item { border-color: #2a2a2a; }
html[data-theme="dark"] body.t-vivid .ws-field input,
html[data-theme="dark"] body.t-vivid .ws-field textarea,
html[data-theme="dark"] body.t-vivid .ws-field select { background: #1b1b1b; border-color: #2a2a2a; color: #f4f4f4; }
html[data-theme="dark"] body.t-vivid .ws-footer { border-top-color: #2a2a2a; }
html[data-theme="dark"] body.t-vivid .ws-cta { background: #0b0b0b; }
html[data-theme="dark"] body.t-vivid .ws-gallery-cap strong { color: #f4f4f4; }
html[data-theme="dark"] body.t-vivid .ws-side { background: #131313; border-right-color: #2a2a2a; }