/*
Theme Name: Signal
Theme URI: https://studio.digital
Author: Studio Digital
Description: The Signal: Studio Digital's brand system as a block theme. Black, white, one red. Built for the agentic rebuild, 2026.
Version: 0.5.9
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: signal
*/

/* Design tokens live in theme.json. Below: the Signal treatment layer. */

::selection { background: var(--wp--preset--color--signal); color: var(--wp--preset--color--paper); }

/* Eyebrows + mono receipts: the "receipt" voice */
.sd-eyebrow,
.sd-receipt {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.82rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
}
.sd-eyebrow::before,
.sd-receipt::before {
	content: "/";
	color: var(--wp--preset--color--signal);
	margin-right: 0.6em;
	font-weight: 700;
}

/* Poster type */
.sd-poster {
	font-size: clamp(2.9rem, 8.5vw, 6.2rem) !important;
	line-height: 0.98 !important;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	max-width: 12ch;
	margin-top: 0.4em !important;
	text-wrap: balance;
}
.sd-poster-2 {
	font-size: clamp(1.9rem, 4.6vw, 3.1rem) !important;
	line-height: 1.04 !important;
	letter-spacing: -0.015em;
	max-width: 22ch;
	text-wrap: balance;
}
.sd-red { color: var(--wp--preset--color--signal); }

.sd-lede { font-size: clamp(1.05rem, 2vw, 1.25rem); max-width: 36em; }
/* max-width none: the constrained content column already sets the measure; a narrower
   max-width + WP's auto margins centred this 42px off the column's left edge (QA #6) */
.sd-body-lg { font-size: 1.12rem; max-width: none; line-height: 1.7; }

/* Buttons: hard, loud, square */
.wp-element-button, .wp-block-button__link {
	border-radius: 0 !important;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	font-weight: 900 !important;
	font-size: 0.92rem;
	padding: 1.05em 1.7em !important;
	transition: transform 0.08s ease, background-color 0.12s ease;
}
.wp-element-button:hover { transform: translate(2px, -2px); }
.wp-element-button:active { transform: translate(0, 0); }
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	border: 2px solid currentColor !important;
	color: inherit !important;
}
.sd-cta-row { gap: 14px; }

/* Scroll-scrub film hero */
.sd-scrub { position: relative; height: 420vh; background: #111111; }
.sd-scrub__stage { position: sticky; top: 0; height: 100dvh; overflow: hidden; }
.sd-scrub__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sd-scrub__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(17,17,17,0.78) 0%, rgba(17,17,17,0) 62%), linear-gradient(to right, rgba(17,17,17,0.62) 0%, rgba(17,17,17,0) 72%); pointer-events: none; }
.sd-scrub__title, .sd-scrub__body { text-shadow: 0 1px 20px rgba(17,17,17,0.85), 0 0 3px rgba(17,17,17,0.6); }
@media (max-width: 600px) {
	.sd-scrub__scrim { background: linear-gradient(to top, rgba(17,17,17,0.85) 0%, rgba(17,17,17,0.25) 55%, rgba(17,17,17,0) 78%); }
}
.sd-scrub__chapter { position: absolute; bottom: clamp(48px, 12vh, 120px); max-width: 620px; padding: 0 clamp(20px, 4vw, 48px); color: #F5F3EF; opacity: 0; transform: translateY(14px); will-change: opacity, transform; }
.sd-scrub__chapter.is-left { left: 0; }
.sd-scrub__chapter.is-right { right: 0; text-align: right; }
.sd-scrub__kicker { font-family: var(--wp--preset--font-family--mono); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: #E03127; margin: 0 0 0.9em; }
.sd-scrub__title { font-weight: 900; font-size: clamp(2rem, 5.4vw, 4rem); line-height: 1.0; letter-spacing: -0.018em; margin: 0 0 0.45em; color: #F5F3EF; text-wrap: balance; }
.sd-scrub__body { font-family: var(--wp--preset--font-family--mono); font-size: 0.95rem; line-height: 1.6; color: #D9D4CE; margin: 0 0 1.4em; max-width: 44ch; }
.sd-scrub__chapter.is-right .sd-scrub__body { margin-left: auto; }
.sd-scrub.is-static { height: auto; }
.sd-scrub.is-static .sd-scrub__stage { position: relative; height: auto; padding-bottom: 40px; }
.sd-scrub.is-static .sd-scrub__video { position: relative; height: 56vw; max-height: 70dvh; }
.sd-scrub.is-static .sd-scrub__chapter { position: relative; opacity: 1; transform: none; bottom: auto; margin-top: 40px; }

/* Pillars: ledger rows */
.sd-pillars { margin-top: var(--wp--preset--spacing--50); }
.sd-pillars .wp-block-column {
	border-top: 2px solid var(--wp--preset--color--ink);
	padding-top: var(--wp--preset--spacing--40);
}
.sd-pillar-h {
	font-size: 1.35rem !important;
	font-weight: 900 !important;
	margin: 0 0 0.4em !important;
}
.sd-pillar-h::before {
	content: "/";
	color: var(--wp--preset--color--signal);
	margin-right: 0.45em;
}
.sd-pillar-p {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9rem;
	color: var(--wp--preset--color--ink-soft);
	max-width: 44ch;
}

/* Full-bleed image: no gaps, slight crop discipline */
.sd-hero-img { margin-top: 0 !important; margin-bottom: 0 !important; }
.sd-hero-img img { display: block; width: 100%; height: auto; }

/* Band rhythm */
.sd-wound { border-top: 2px solid var(--wp--preset--color--ink); }
.sd-niches .sd-poster-2 { font-size: clamp(2.1rem, 6vw, 4rem) !important; max-width: none; }

/* Header nav */
.wp-block-navigation a { text-decoration: none; font-weight: 500; }
.wp-block-navigation a:hover { color: var(--wp--preset--color--signal-deep); text-decoration: underline; text-underline-offset: 3px; }

:focus-visible { outline: 2px solid var(--wp--preset--color--signal); outline-offset: 2px; }

/* Split duo: application + audit */
.sd-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 820px) { .sd-split { grid-template-columns: 1fr; } }
.sd-split-solid { background: var(--wp--preset--color--signal); color: #F5F3EF; padding: clamp(28px, 4vw, 48px); }
.sd-split-solid p { margin: 0 0 1.6em; font-family: var(--wp--preset--font-family--mono); font-size: 0.9rem; color: #F5F3EF; }
.sd-split-solid .sd-h2-split { color: #F5F3EF; }
.sd-split-ghost { border: 2px solid var(--wp--preset--color--ink); padding: clamp(28px, 4vw, 48px); }
.sd-split-ghost p { color: var(--wp--preset--color--ink-soft); font-size: 0.95rem; line-height: 1.65; margin: 0 0 1.6em; max-width: 48ch; }
.sd-h2-split { font-weight: 900 !important; font-size: clamp(1.4rem, 3vw, 2rem) !important; line-height: 1.05 !important; margin: 0 0 0.6em !important; }

/* Bespoke CTAs (anchor-based, used in scrub + split) */
.sd-cta-apply { display: inline-block; background: var(--wp--preset--color--signal); color: #F5F3EF !important; font-weight: 900; font-size: 0.85rem; letter-spacing: 0.07em; text-transform: uppercase; text-decoration: none !important; padding: 1.05em 1.7em; transition: transform 0.08s ease, box-shadow 0.08s ease; }
.sd-cta-apply:hover { transform: translate(2px, -2px); box-shadow: -3px 3px 0 var(--wp--preset--color--ink); color: #F5F3EF; }
.sd-cta-apply:active { transform: none; box-shadow: none; }
.sd-cta-apply.is-inverse { background: var(--wp--preset--color--ink); }
.sd-cta-apply.is-inverse:hover { box-shadow: -3px 3px 0 #F5F3EF; }
.sd-cta-audit { display: inline-block; font-family: var(--wp--preset--font-family--mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--ink) !important; text-decoration: none !important; padding: 1em 0.2em; position: relative; }
.sd-cta-audit::after { content: ""; position: absolute; left: 0; bottom: 0.55em; height: 2px; width: 100%; background: var(--wp--preset--color--signal); transform: scaleX(0.35); transform-origin: left; transition: transform 0.18s ease; }
.sd-cta-audit:hover::after { transform: scaleX(1); }
.sd-cta-audit.is-on-dark { color: #F5F3EF !important; }
.sd-cta-row { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  .sd-cta-apply, .sd-cta-audit::after { transition: none; }
  .sd-cta-apply:hover { transform: none; box-shadow: none; }
}

/* Niche links in the ink band + footer index */
.sd-niche-links a { color: inherit; text-decoration: none; }
.sd-niche-links a:hover { color: var(--wp--preset--color--signal); }
.sd-footer-index { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; padding-top: 18px; border-top: 1px solid #3A3A3A; }
.sd-footer-index a { font-family: var(--wp--preset--font-family--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--concrete); text-decoration: none; }
.sd-footer-index a:hover { color: var(--wp--preset--color--signal); }

/* Kill the white block-gap line between header and the dark film hero (home only) */
body.home .wp-site-blocks > main, .home main.wp-block-group { margin-block-start: 0 !important; }

/* Inner-page hero images */
.sd-page-hero { margin-top: 0 !important; margin-bottom: 2.4rem !important; }
.sd-page-hero img { display: block; width: 100%; height: auto; }

/* Mobile nav overlay: Signal treatment instead of the WP default white panel (QA #7) */
.wp-block-navigation__responsive-container.is-menu-open { background-color: var(--wp--preset--color--ink); padding: 28px 24px; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--wp--preset--color--paper); font-weight: 900; font-size: clamp(1.7rem, 8vw, 2.4rem); letter-spacing: -0.01em; line-height: 1.25; text-decoration: none; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus { color: var(--wp--preset--color--signal); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--paper); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 8vh; }

/* Wall of Love: hidden testimonial wall (videos are mixed portrait/landscape) */
.sd-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; align-items: start; }
.sd-wall figure { margin: 0; }
.sd-wall video { display: block; width: 100%; height: auto; background: var(--wp--preset--color--ink); }
.sd-wall figcaption { font-family: var(--wp--preset--font-family--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--ink-soft); margin-top: 10px; }

/* Journal index treatment (QA #3) */
.sd-journal .wp-block-post-template { list-style: none; padding: 0; margin-top: var(--wp--preset--spacing--50); }
.sd-journal .wp-block-post-template > li { padding: 34px 0; border-top: 2px solid var(--wp--preset--color--ink); margin: 0; }
.sd-journal .wp-block-post-title { font-size: clamp(1.5rem, 3.4vw, 2.2rem) !important; font-weight: 900; line-height: 1.08; letter-spacing: -0.015em; margin: 0.35em 0 0.4em; }
.sd-journal .wp-block-post-title a { text-decoration: none; color: inherit; }
.sd-journal .wp-block-post-title a:hover { color: var(--wp--preset--color--signal); }
.sd-journal .wp-block-post-date { font-family: var(--wp--preset--font-family--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--concrete); display: block; }
.sd-journal .wp-block-post-excerpt { max-width: 62ch; color: var(--wp--preset--color--ink-soft); }
.sd-journal .wp-block-read-more { font-family: var(--wp--preset--font-family--mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--signal-deep); text-decoration: none; }
.sd-journal .wp-block-read-more:hover { color: var(--wp--preset--color--signal); }
.sd-journal .wp-block-query-pagination { margin-top: 26px; font-family: var(--wp--preset--font-family--mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; }

/* Founder portrait (real photo of Mike, supplied 2026-07-29) */
.sd-founder-portrait { max-width: min(420px, 100%); margin-top: 2rem !important; margin-bottom: 2.2rem !important; }
.sd-founder-portrait img { display: block; width: 100%; height: auto; }

/* Journal rows with featured images (imagery-everywhere rule) */
.sd-journal-row { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; }
@media (max-width: 700px) { .sd-journal-row { grid-template-columns: 1fr; gap: 14px; } }
.sd-journal-thumb { margin: 0; }
.sd-journal-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.sd-article-hero { margin-top: 1.6rem !important; margin-bottom: 2.2rem !important; }
.sd-article-hero img { display: block; width: 100%; height: auto; }

/* 3-up niche gallery bands */
.sd-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 2.2rem 0; }
@media (max-width: 700px) { .sd-gallery { grid-template-columns: 1fr; } }
.sd-gallery figure { margin: 0; }
.sd-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; }

/* Services pillar images */
.sd-pillar-img { margin: 0 0 1rem !important; }
.sd-pillar-img img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }

/* Ambient video heroes (autoplay muted loops on niche pages) */
.sd-page-hero video { display: block; width: 100%; height: auto; }

/* ===== Instagram band (data/instagram-band, agent-built) ===== */
/* ==========================================================================
   Signal / Instagram band  (.sd-ig)
   --------------------------------------------------------------------------
   A self-hosted mirror of @studio.digital.insta: real <img> files served from
   WP media, each tile linking out to Instagram. No embed script, no iframe,
   no third-party request, nothing to lazy-load from instagram.com.

   Colour: only existing Signal tokens (theme.json presets, hex fallbacks so
   this still renders if dropped somewhere the presets are not loaded).
   No new colours are introduced.
       paper #FFFFFF   ink #111111   signal #E03127
       signal-deep #B22219   concrete #B9B9B6   smoke #F2F2F0
   Type: the mono "receipt" voice (IBM Plex Mono) for the heading and the
   follow link. The red slash is the only permanently-red element in the band,
   which keeps to the one-signal-element-per-viewport rule; the red hover wash
   is transient.
   ========================================================================== */

.sd-ig {
  --sd-ig-cols: 6;
  --sd-ig-gap: 4px;
  --sd-ig-ink: var(--wp--preset--color--ink, #111111);
  --sd-ig-signal: var(--wp--preset--color--signal, #E03127);
  --sd-ig-signal-deep: var(--wp--preset--color--signal-deep, #B22219);
  --sd-ig-smoke: var(--wp--preset--color--smoke, #F2F2F0);
  --sd-ig-hairline: var(--wp--preset--color--concrete, #B9B9B6);

  /* The band is a full-bleed section (align:full in the block markup) that caps
     its own inner content, rather than relying on WordPress alignment. That is
     deliberate: front-page.html's <main> is a flow layout and home.html's is
     constrained, so WP's align rules resolve differently in the two places the
     band is used. Doing the width here makes it render identically in both, and
     anywhere else it gets pasted later.
     Block-axis padding comes from the block attributes (theme-native, editable
     in the editor); only the inline gutter and the width cap live here. */
  padding-inline: var(--wp--style--root--padding-right, clamp(20px, 4vw, 48px));
}

.sd-ig > * {
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin-inline: auto;
}

/* --- receipt heading ------------------------------------------------------
   Divided from the band by a hard 2px ink rule, not whitespace alone. */

.sd-ig__title {
  margin: 0 0 var(--wp--preset--spacing--30, 0.75rem);
  padding-block-end: var(--wp--preset--spacing--20, 0.5rem);
  border-block-end: 2px solid var(--sd-ig-ink);

  font-family: var(--wp--preset--font-family--mono, "IBM Plex Mono", ui-monospace, Menlo, monospace);
  font-size: clamp(0.6875rem, 0.62rem + 0.25vw, 0.8125rem); /* 11 -> 13px */
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sd-ig-ink);
}

.sd-ig__slash {
  color: var(--sd-ig-signal);
}

/* --- grid ----------------------------------------------------------------
   6 across on desktop, 3 on tablet, 2 on mobile. Tight 4px gaps so the tiles
   read as one block of texture rather than twelve separate cards. */

.sd-ig__grid {
  display: grid;
  grid-template-columns: repeat(var(--sd-ig-cols), minmax(0, 1fr));
  gap: var(--sd-ig-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-ig__cell {
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 900px) {
  .sd-ig { --sd-ig-cols: 3; }
}

@media (max-width: 540px) {
  .sd-ig { --sd-ig-cols: 2; }
}

/* --- tile --------------------------------------------------------------- */

.sd-ig__link {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;          /* square-crop presentation */
  background-color: var(--sd-ig-smoke);   /* holds the box before the image paints */
  text-decoration: none;
  border-radius: 0;             /* Signal: no rounded corners */
}

.sd-ig__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;            /* fills the square, never distorts */
  object-position: center;
  transition: transform 260ms ease;
}

/* Hard 1px hairline, contact-sheet style. Several posts are white-ground type
   cards, and without this they bleed into a paper page and the grid reads as
   though tiles are missing. Drawn as an ::after overlay rather than a border or
   an inset shadow, because both of those paint underneath the <img> that fills
   the tile. Border-box + inset:0 means the width can change without any shift. */

.sd-ig__link::after {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 1px solid var(--sd-ig-hairline);
  pointer-events: none;
  transition: border-color 160ms ease, border-width 160ms ease;
}

/* Hover / focus: a slight scale plus the hairline hardening to 2px of pure
   signal red. Deliberately NOT a translucent red wash: several of these tiles
   are white-ground type cards, and red at low alpha over white comes out
   pastel pink, which breaks the "red is never tinted" rule. A hard red frame
   keeps the red pure, keeps the post readable, and matches the 2px rules used
   elsewhere in the system. (Wash variant is at the foot of this file.) */

.sd-ig__link:hover .sd-ig__img,
.sd-ig__link:focus-visible .sd-ig__img {
  transform: scale(1.04);
}

.sd-ig__link:hover::after,
.sd-ig__link:focus-visible::after {
  border-width: 2px;
  border-color: var(--sd-ig-signal);
}

.sd-ig__link:focus-visible {
  outline: 2px solid var(--sd-ig-signal);
  outline-offset: 2px;
}

/* --- follow link -------------------------------------------------------- */

.sd-ig__follow {
  margin: var(--wp--preset--spacing--40, 1rem) 0 0;
  line-height: 1.2;
}

.sd-ig__follow a {
  display: inline-block;
  font-family: var(--wp--preset--font-family--mono, "IBM Plex Mono", ui-monospace, Menlo, monospace);
  font-size: clamp(0.6875rem, 0.62rem + 0.25vw, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sd-ig-ink);
  text-decoration: none;
  padding-block-end: 2px;
  border-block-end: 2px solid var(--sd-ig-ink);
  transition: color 160ms ease, border-color 160ms ease;
}

.sd-ig__follow a:hover,
.sd-ig__follow a:focus-visible {
  color: var(--sd-ig-signal-deep);
  border-block-end-color: var(--sd-ig-signal);
}

.sd-ig__follow a:focus-visible {
  outline: 2px solid var(--sd-ig-signal);
  outline-offset: 3px;
}

/* --- dark context --------------------------------------------------------
   Add .sd-ig--invert to the group if the band is ever placed on an ink
   ground (footer, poster section). Signal red reads on both grounds. */

.sd-ig--invert {
  --sd-ig-ink: var(--wp--preset--color--paper, #FFFFFF);
  --sd-ig-smoke: var(--wp--preset--color--ink-soft, #3A3A3A);
}

.sd-ig--invert .sd-ig__follow a:hover,
.sd-ig--invert .sd-ig__follow a:focus-visible {
  color: var(--wp--preset--color--paper, #FFFFFF);
  border-block-end-color: var(--sd-ig-signal);
}

/* --- motion preference -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .sd-ig__img,
  .sd-ig__link::after,
  .sd-ig__follow a {
    transition: none;
  }
  .sd-ig__link:hover .sd-ig__img,
  .sd-ig__link:focus-visible .sd-ig__img {
    transform: none;   /* the red frame still signals the hover */
  }
}

/* --- optional: red wash on hover instead of the red frame -----------------
   Uncomment if the frame reads too quietly. Note it goes pastel over the
   white-ground tiles, which is why it is not the default. Uses ::before so it
   can sit alongside the ::after frame.

.sd-ig__link::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-color: var(--sd-ig-signal);
  opacity: 0; transition: opacity 160ms ease; pointer-events: none;
}
.sd-ig__link:hover::before,
.sd-ig__link:focus-visible::before { opacity: 0.22; }
-------------------------------------------------------------------------- */

/* --- optional: uncomment to mute the feed to greyscale until hover --------
   The current Instagram creative leans on a violet accent that is not in the
   Signal palette (see README). This keeps the band black-and-white in repose
   and returns the real colour on hover, so the page stays black/white/red.
   Purely additive: no colour values involved.

.sd-ig__img { filter: grayscale(1); transition: transform 260ms ease, filter 260ms ease; }
.sd-ig__link:hover .sd-ig__img,
.sd-ig__link:focus-visible .sd-ig__img { filter: grayscale(0); }
@media (prefers-reduced-motion: reduce) {
  .sd-ig__img { transition: none; }
}
-------------------------------------------------------------------------- */

/* ===== Wall of Love: The Quote Wall (direction C, Mike's pick) ===== */
body.page-id-185 main.wp-block-group { padding-top: 0 !important; padding-bottom: 0 !important; }
body.page-id-185 .entry-content, body.page-id-185 .wp-block-post-content { margin-block-start: 0; }
.sd-qw-slab { min-height: 100vh; min-height: 100dvh; padding: clamp(38px,6vw,64px) clamp(20px,5vw,64px); display: flex; flex-direction: column; justify-content: center; position: relative; scroll-snap-align: start; }
.sd-qw-paper { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); }
.sd-qw-ink { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--smoke); }
.sd-qw-red { background: var(--wp--preset--color--signal); color: var(--wp--preset--color--ink); }
.sd-qw-count { position: absolute; top: 20px; right: 26px; font-family: var(--wp--preset--font-family--mono); font-weight: 600; font-size: 11px; letter-spacing: 0.14em; opacity: 0.6; margin: 0; }
.sd-qw-q { font-weight: 900; font-size: clamp(30px, 6vw, 86px); line-height: 0.94; letter-spacing: -0.035em; text-transform: uppercase; margin: 0; max-width: 18ch; }
.sd-qw-q em { font-style: normal; color: var(--wp--preset--color--signal); }
.sd-qw-red .sd-qw-q em { color: var(--wp--preset--color--paper); }
.sd-qw-chip { float: left; width: clamp(58px, 8.4vw, 104px); aspect-ratio: 1/1; margin: 0.1em 22px 8px 0; border: 3px solid currentColor; background: #000 center 24%/cover no-repeat; position: relative; }
.sd-qw-chip::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; background: var(--wp--preset--color--signal); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.sd-qw-red .sd-qw-chip::after { background: var(--wp--preset--color--ink); }
.sd-qw-tail { clear: both; margin: 30px 0 0; font-size: 17px; max-width: 52ch; line-height: 1.45; opacity: 0.82; }
.sd-qw-foot { clear: both; margin-top: 36px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.sd-qw-attr { font-family: var(--wp--preset--font-family--mono); font-weight: 600; font-size: 12px; letter-spacing: 0.11em; text-transform: uppercase; margin: 0; }
.sd-qw-attr span { display: block; font-weight: 400; opacity: 0.66; margin-top: 5px; letter-spacing: 0.08em; }
.sd-qw-btn { margin-left: auto; background: var(--wp--preset--color--signal); color: var(--wp--preset--color--paper); border: 0; padding: 14px 20px; display: flex; align-items: center; gap: 11px; font-family: var(--wp--preset--font-family--mono); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
.sd-qw-btn::before { content: ""; width: 11px; height: 13px; background: var(--wp--preset--color--paper); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.sd-qw-btn:hover { background: var(--wp--preset--color--signal-deep); }
.sd-qw-red .sd-qw-btn { background: var(--wp--preset--color--ink); }
.sd-qw-red .sd-qw-btn:hover { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); }
.sd-qw-red .sd-qw-btn:hover::before { background: var(--wp--preset--color--ink); }
.sd-qw-player { clear: both; margin-top: 26px; display: none; }
.sd-qw-slab.is-playing .sd-qw-player { display: block; }
.sd-qw-player video { display: block; width: 100%; max-width: 760px; max-height: 62vh; background: #000; }
.sd-qw-intro { padding-top: clamp(30px, 5vh, 56px); }
@media (prefers-reduced-motion: no-preference) {
	body.page-id-185 html { scroll-snap-type: y proximity; }
}

/* ===== Quote Wall fixes (Mike's screenshots, 2026-07-29) =====
   1) WP global styles paint h2/p in ink, which vanishes on the ink/red slabs:
      force inheritance from the slab ground.
   2) alignfull wasn't escaping the constrained column reliably for raw html
      blocks: classic 100vw breakout instead.
   3) Block gaps painted paper stripes between slabs: zero them.
   4) The template's H1 title broke the full-bleed opening: visually hide it here. */
.sd-qw-slab { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; margin-top: 0 !important; margin-bottom: 0 !important; }
.sd-qw-slab .sd-qw-q, .sd-qw-slab .sd-qw-tail, .sd-qw-slab .sd-qw-count, .sd-qw-slab .sd-qw-attr, .sd-qw-slab h2, .sd-qw-slab p { color: inherit; }
body.page-id-185 .wp-block-post-content > * + * { margin-block-start: 0 !important; }
body.page-id-185 .wp-block-post-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
body.page-id-185 main.wp-block-group { padding-bottom: 0 !important; }
.sd-qw-q { max-width: 16ch; }
.sd-qw-tail { opacity: 0.85; }

/* Quote Wall geometry: padding must live INSIDE the 100vh, and the 100vw
   breakout must not create sideways scroll. */
.sd-qw-slab { box-sizing: border-box; }
body.page-id-185 { overflow-x: hidden; }