/* ============================================================
   rough — creative studio: SPLIT hero, oversized grey display
   type on the light ground with the photograph bleeding right.
   ============================================================ */
body.t-rough.ws-body { --bg: #eeeeee; --fg: #5e5e5e; --heading: #141414; --text: #5e5e5e; --muted: #8c8c8c; }
body.t-rough .ws-nav { background: color-mix(in srgb, #eeeeee 92%, transparent); border-bottom: 0; }
body.t-rough .ws-brand { text-transform: uppercase; letter-spacing: 0.18em; font-weight: 800; font-size: 13px; }
body.t-rough .ws-nav-links a { text-transform: uppercase; letter-spacing: 0.16em; font-size: 10.5px; font-weight: 700; }
/* the split: photo pinned to the right half, type on the ground at the left */
body.t-rough .ws-hero { --hero-a: transparent; --hero-b: transparent;
  background-color: #eeeeee; background-size: auto 100%; background-position: right center; background-repeat: no-repeat;
  min-height: 92vh; }
body.t-rough .ws-hero h1 { color: #6d6d6d; text-shadow: none; text-transform: uppercase; font-weight: 800;
  font-size: clamp(34px, 7.4vw, 92px); line-height: 0.98; letter-spacing: -0.01em; max-width: 9ch; }
body.t-rough .ws-hero p { color: #6f6f6f; text-shadow: none; max-width: 32ch; }
body.t-rough .ws-hero-inner::before { content: ''; display: block; width: 120px; height: 2px; background: #b9b9b9; margin-bottom: 26px; }
body.t-rough .ws-hero-cta.btn.brand { background: transparent; color: #141414; box-shadow: none; border: 2px solid #141414; }
body.t-rough .ws-hero-cta.btn.brand:hover { background: #141414; color: #eeeeee; }
body.t-rough .ws-h2 { text-transform: uppercase; letter-spacing: 0.18em; font-weight: 800; font-size: clamp(13px, 1.6vw, 17px); }
body.t-rough .ws-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px; }
body.t-rough .ws-gallery-item img { border-radius: 0; aspect-ratio: 1; filter: grayscale(1); }
body.t-rough .ws-story-media img { border-radius: 0; filter: grayscale(1); }
body.t-rough .ws-feature { text-align: left; }
body.t-rough .ws-feature h3 { text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; font-weight: 800; }
body.t-rough.ws-body .btn.brand { border-radius: 0; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 700; background: #141414; color: #ffffff; border: 0; box-shadow: none; }
body.t-rough .ws-cta { background: #141414; }
body.t-rough .ws-field input, body.t-rough .ws-field textarea { border-radius: 0; }

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