/* ============================================================
   gridline — architecture: stark monochrome, GAPLESS full-bleed
   mosaic so the work reads as one continuous wall.
   ============================================================ */
body.t-gridline.ws-body { --bg: #ffffff; --fg: #5c5c5c; --heading: #111111; --text: #5c5c5c; --muted: #8f8f8f; }
body.t-gridline .ws-nav { background: color-mix(in srgb, #ffffff 92%, transparent); }
body.t-gridline .ws-brand { text-transform: uppercase; letter-spacing: 0.2em; font-weight: 800; font-size: 13px; }
body.t-gridline .ws-nav-links a { text-transform: uppercase; letter-spacing: 0.16em; font-size: 10.5px; font-weight: 700; }
body.t-gridline .ws-hero { min-height: 92vh; }
body.t-gridline .ws-hero h1 { text-transform: uppercase; letter-spacing: 0.02em; font-weight: 800; font-size: clamp(28px, 5.2vw, 62px); max-width: 18ch; }
body.t-gridline .ws-h2 { text-transform: uppercase; letter-spacing: 0.2em; font-weight: 800; font-size: clamp(13px, 1.6vw, 16px); }
/* the mosaic: no gaps, edge to edge */
body.t-gridline .ws-gallery .ws-container { max-width: 100%; padding: 0; }
body.t-gridline .ws-gallery .ws-h2 { padding: 0 22px; }
body.t-gridline .ws-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0; }
body.t-gridline .ws-gallery-item img { border-radius: 0; aspect-ratio: 1; filter: grayscale(1); }
body.t-gridline .ws-story-media img { border-radius: 0; filter: grayscale(1); }
body.t-gridline .ws-feature { text-align: left; }
body.t-gridline .ws-feature h3 { text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; font-weight: 800; }
body.t-gridline.ws-body .btn.brand { border-radius: 0; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 700; background: #111111; color: #ffffff; border: 0; box-shadow: none; }
body.t-gridline .ws-cta { background: #111111; }
body.t-gridline .ws-field input, body.t-gridline .ws-field textarea { border-radius: 0; }

/* gridline — 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-gridline.ws-body { --bg: #101010; --fg: #b0b0b0; --heading: #f5f5f5; --text: #b0b0b0; --muted: #888888; }
html[data-theme="dark"] body.t-gridline .ws-nav { background: color-mix(in srgb, #101010 92%, transparent); border-bottom-color: #272727; }
html[data-theme="dark"] body.t-gridline .ws-section { border-top-color: #272727; }
html[data-theme="dark"] body.t-gridline .ws-story-copy p,
html[data-theme="dark"] body.t-gridline .ws-feature p,
html[data-theme="dark"] body.t-gridline .ws-faq-item p,
html[data-theme="dark"] body.t-gridline .ws-richtext p { color: #b0b0b0; }
html[data-theme="dark"] body.t-gridline .ws-quote { background: #181818; border-color: #272727; }
html[data-theme="dark"] body.t-gridline .ws-quote blockquote { color: #b0b0b0; }
html[data-theme="dark"] body.t-gridline .ws-plan { background: #181818; border-color: #272727; }
html[data-theme="dark"] body.t-gridline .ws-faq-list, html[data-theme="dark"] body.t-gridline .ws-faq-item { border-color: #272727; }
html[data-theme="dark"] body.t-gridline .ws-field input,
html[data-theme="dark"] body.t-gridline .ws-field textarea,
html[data-theme="dark"] body.t-gridline .ws-field select { background: #181818; border-color: #272727; color: #f5f5f5; }
html[data-theme="dark"] body.t-gridline .ws-footer { border-top-color: #272727; }
html[data-theme="dark"] body.t-gridline .ws-cta { background: #000000; }
html[data-theme="dark"] body.t-gridline .ws-gallery-cap strong { color: #f5f5f5; }
html[data-theme="dark"] body.t-gridline .ws-side { background: #101010; border-right-color: #272727; }