/* ============================================================
   BLOCK SKIN — the replaceable layer
   ------------------------------------------------------------
   Authored as a design deliverable against docs/BLOCKS.md's class contract,
   integrated 2026-09-03. THIS FILE IS THE SKIN: it owns every visual decision
   for the block library — colour, type scale, spacing, borders, hover, media.

   On another site in the fleet this file is REPLACED WHOLESALE. The render
   parts, the field groups and the class names stay; this does not. Keep it that
   way — a rule that belongs to every site belongs in sections-m434.css, which
   is the structural layer beneath.

   FOUR CHANGES FROM THE FILE AS DELIVERED, all mechanical:

   1. `--pad` renamed to `--m434-sy`. An unnamespaced custom property that
      generic could collide with anything on a page; the rest of the library is
      already namespaced.
   2. `.section.text-media` / `.image-left` retargeted to `.wrap.ti` /
      `.ti--rev`. The delivered file assumed a section class the render part
      does not emit — text-image.php puts `ti` and `ti--rev` on the WRAP. Left
      as delivered it would have styled nothing at all.
   3. `.section.dark-bg` narrowed to `:not(.has-bg-accent)`. m434_section_classes()
      gives `accent` the `.dark-bg` class (only soft and cool are light), and the
      dark rule sits after the accent rule at equal specificity — so the accent
      band was unreachable, rendering as navy.
   4. Rules that duplicated sections-m434.css were left here and REMOVED from
      there, so the rhythm and band chrome have one owner rather than two at
      different specificities.

   Supersedes and replaces: buttons-m434.css, columns.css, cta-text-image.css.
   Does NOT cover .faq or the rich_text layout variants; those keep their own
   files, which were already close to this site's voice.
   ============================================================ */

/* ============================================================
   BLOCK SKIN — dustinslightham.com
   Written against blockclasscontract.md. Rules, not treatments.
   Loads after tokens.css + components.css.
   ============================================================ */

/* ---- 0. Shared chrome ---- */
/* The four spacing utilities are single-class ON PURPOSE — do not compound them
   with `.section`. cta-banner.php is the one part of fourteen whose outer element
   is `cta m434-ctab …` with no `section` class (it is byte-identical to upstream,
   where `.cta` carries padding of its own). Under `.section.sectionpb` that band
   matched nothing at all: no padding, and `--m434-sy` never even defined on the
   element, so `section-spacious` had no variable to scale and the editor's
   spacing control silently did nothing. Keeping the utilities standalone means
   any part gets the contract whether or not it opts into `.section`. */
:root{--m434-sy:clamp(48px,7vw,80px)}
.sectionmt{margin-top:var(--m434-sy)}.sectionmb{margin-bottom:var(--m434-sy)}
.sectionpt{padding-top:var(--m434-sy)}.sectionpb{padding-bottom:var(--m434-sy)}
.section-compact{--m434-sy:clamp(32px,4.6vw,53px)}.section-spacious{--m434-sy:clamp(67px,9.8vw,112px)}
.section.has-bg-soft{background:var(--grey-100)}
.section.has-bg-cool{background:var(--blue-tint)}
.section.has-bg-accent{background:var(--blue-tint);box-shadow:inset 0 3px 0 var(--blue)}
/* dark band: every ink token re-declared beneath it */
.section.has-bg-navy,.section.dark-bg:not(.has-bg-accent){background:#282E36;--ink:#FFFFFF;--paper:#282E36;--grey-100:#353B44;--grey-300:#4A4D55;--grey-500:#9EA1A8;--grey-700:#C9CBD0;--blue:#A9B4F0;--blue-tint:#353B44;--blue-deep:#E4E8F8;color:#fff}
.section.m434-divider-top>.wrap{border-top:1px solid var(--grey-300);padding-top:var(--m434-sy)}
.section.m434-divider-bottom>.wrap{border-bottom:1px solid var(--grey-300);padding-bottom:var(--m434-sy)}
.fcmt0>:first-child{margin-top:0}.lcmb0>:last-child{margin-bottom:0}

/* ---- D3. Type inside a block ---- */
.m434-eyebrow{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:16px}
.section h2{font-family:var(--geo);font-weight:500;font-size:clamp(24px,2.8vw,30px);line-height:1.15;letter-spacing:-.015em;max-width:22ch;margin:0 0 20px}
.section h3{font-family:var(--sans);font-weight:500;font-size:clamp(17px,1.9vw,21px);line-height:1.25;letter-spacing:-.01em}
.section .prose{max-width:64ch}
.section .prose p{color:var(--grey-700);line-height:1.6}
.section .prose p+p{margin-top:1em}
.section .prose a{color:var(--ink);border-bottom:1px solid var(--blue)}
.section .prose a:hover{color:var(--blue)}
/* A .btn INSIDE prose — what the editor's Formats dropdown applies to a link.
   Both `.prose a` in components.css (0,1,1) and `.section .prose a` directly
   above (0,2,1) outrank a bare `.btn` (0,1,0), so without these the button keeps
   the prose link colour and gains a border-bottom that cuts straight across its
   own box.
   Worth spelling out rather than trusting cascade order, because it looks
   CORRECT IN THE EDITOR either way: components.css is deliberately excluded from
   add_editor_style(), and nothing wraps wysiwyg content in `.section .prose`.
   The only place it breaks is the front end. */
.prose a.btn,.section .prose a.btn{color:var(--ink);border:1px solid var(--ink)}
.prose a.btn:hover,.section .prose a.btn:hover{color:#fff;border-color:var(--blue)}
.prose a.btn-secondary,.section .prose a.btn-secondary{color:var(--grey-700);border-color:transparent}
.prose a.btn-secondary:hover,.section .prose a.btn-secondary:hover{color:var(--blue);border-color:transparent}
.dark-bg .prose a.btn{color:#fff;border-color:#fff}
.dark-bg .prose a.btn:hover{color:#282E36;border-color:#fff}
.section .lede{font-family:var(--serif);font-size:clamp(18px,2vw,22px);line-height:1.5;color:var(--ink);max-width:44ch}
.section .lede+.lede{margin-top:.6em}

/* ---- D7. Buttons (= .visit) ---- */
.btn{display:inline-flex;align-items:center;gap:14px;border:1px solid var(--ink);padding:13px 18px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink);background:transparent;transition:.3s var(--ease);white-space:nowrap}
.btn::after{content:"";display:inline-block;width:20px;height:3px;background:var(--ink);transform-origin:left;transition:.3s var(--ease)}
.btn:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.btn:hover::after{background:#fff;transform:scaleX(1.3)}
.btn-lg{padding:16px 22px;font-size:13px}
/* Secondary keeps .btn's inline padding. It used to set `padding-inline:0`, which
   put the 20px rule hard against the element's right edge with nothing to
   contain it — the rule appeared to escape the button. It also has to restate
   `border-color:transparent` on :hover: `.btn:hover` sets `border-color:var(--blue)`
   at EQUAL specificity (0,2,0), so without this a blue box faded in under the
   pointer on a control that is meant to have no box at all. */
.btn-secondary{border-color:transparent;color:var(--grey-700)}
.btn-secondary::after{background:var(--grey-300)}
.btn-secondary:hover{background:transparent;border-color:transparent;color:var(--blue)}
.btn-secondary:hover::after{background:var(--blue)}
.dark-bg .btn{border-color:#fff;color:#fff}.dark-bg .btn::after{background:#fff}
.dark-bg .btn:hover{background:#fff;border-color:#fff;color:#282E36}.dark-bg .btn:hover::after{background:#282E36}
.dark-bg .btn-secondary{border-color:transparent}.dark-bg .btn-secondary:hover{background:transparent;border-color:transparent;color:#fff}

/* ---- D1. The card: two treatments ---- */
/* (a) box — linked things. hairline, 24px pad, border→ink + line grows */
.case-card,.team-card,.quote,.post-card{display:flex;flex-direction:column;border:1px solid var(--grey-300);background:var(--paper);min-width:0;transition:border-color .3s var(--ease)}
.dark-bg .case-card,.dark-bg .team-card,.dark-bg .quote,.dark-bg .post-card{background:transparent}
a.case-card:hover,a.team-card:hover,a.post-card:hover{border-color:var(--ink)}
.dark-bg a.case-card:hover,.dark-bg a.team-card:hover,.dark-bg a.post-card:hover{border-color:#fff}
.go-line{display:inline-block;width:14px;height:2px;background:var(--grey-300);transition:width .45s var(--ease),background .3s}
/* (b) rule — lists and features. top rule, 24px pad, no fill */
.icon-card,.download-link,.m434-cols__col,.m434-ti-list-item{border-top:1px solid var(--grey-300);padding-top:24px}

/* ---- D4. Grid rhythm: gap = gutter; 4→2→1, 3→2→1, 2→1 at 880 / 560 ---- */
.icon-cards-grid,.team-grid,.posts-feed-grid,.boxes-grid,.quote-grid,.logos,.m434-cols{display:grid;gap:var(--gutter)}
.boxes-grid,.icon-cards-grid,.posts-feed-grid,.quote-grid{grid-template-columns:repeat(3,1fr)}
.team-grid,.logos{grid-template-columns:repeat(4,1fr)}
.boxes-grid.cols-2,.quote-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.boxes-grid.cols-4,.icon-cards-grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:880px){.boxes-grid,.icon-cards-grid,.posts-feed-grid,.quote-grid,.team-grid,.boxes-grid.cols-4,.icon-cards-grid.cols-4{grid-template-columns:repeat(2,1fr)}.logos{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.boxes-grid,.icon-cards-grid,.posts-feed-grid,.quote-grid,.team-grid,.boxes-grid.cols-2,.quote-grid.cols-2,.boxes-grid.cols-4,.icon-cards-grid.cols-4{grid-template-columns:1fr}.logos{grid-template-columns:repeat(2,1fr)}}

/* ---- D5. Media: 1px border, fixed ratios, greyscale for people + logos only ---- */
.case-media,.tc-photo,.ti-img img,.ti-img video{border:1px solid var(--grey-300);background:var(--grey-100);overflow:hidden}
.case-media{border-width:0 0 1px}
.case-media img,.tc-photo img,.ti-img img,.ti-img video{display:block;width:100%;height:100%;object-fit:cover}
.case-media img{aspect-ratio:16/10}
.tc-photo img{aspect-ratio:1/1;filter:grayscale(1);transition:filter .6s var(--ease)}
.team-card:hover .tc-photo img{filter:grayscale(0)}
.ti-img img,.ti-img video{aspect-ratio:4/3}

/* ---- Boxes ---- */
.case-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.case-tag{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--grey-500);margin-bottom:12px}
.case-body h3{margin:0}
.case-arrow{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;color:var(--grey-500);margin-top:auto;padding-top:22px;transition:color .3s}
.case-arrow::before{content:"";width:14px;height:2px;background:var(--grey-300);transition:width .45s var(--ease),background .3s}
.case-card:hover .case-arrow{color:var(--blue)}.case-card:hover .case-arrow::before{width:26px;background:var(--blue)}
/* icon-less variant: no media, body only */
.case-card.no-media .case-body{padding:28px 24px 24px}

/* ---- Icon features ---- */
.icon-cards-heading{margin-bottom:40px}
.icon-card{display:flex;flex-direction:column;gap:14px;position:relative}
.icon-card::before{content:"";position:absolute;top:-1px;left:0;width:32px;height:2px;background:var(--blue);transition:width .5s var(--ease)}
.icon-card:hover::before{width:100%}
.icon-card-icon{width:28px;height:28px;display:block}
.icon-card-icon img{width:100%;height:100%;filter:grayscale(1)}
.icon-card-title{margin:6px 0 0}
.icon-card-body{font-size:15px;line-height:1.55;color:var(--grey-700)}
.icon-card-cue{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--grey-500);margin-top:auto;padding-top:8px}

/* ---- Staff grid ---- */
.team-intro{margin-bottom:40px}
.team-card{padding:0}
.tc-photo{border-width:0 0 1px}
.tc-name{font-weight:500;font-size:17px;letter-spacing:-.01em;padding:18px 20px 0}
.tc-role{font-family:var(--mono);font-size:12px;color:var(--grey-500);padding:6px 20px 20px}

/* ---- Blog feed: reuses .row (articles index shape) ---- */
.posts-feed-grid.as-rows{display:block}
.posts-feed-grid .row .t{font-family:var(--sans)}
.dark-bg .row .go .line{background:var(--blue)}

/* ---- Projects: = Boxes with a status chip ---- */
.case-tag .status{margin-left:12px}

/* ---- D6. Testimonials ---- */
.m434-quote-rail{display:grid;gap:var(--gutter)}
.quote{padding:32px;position:relative;margin:0}
.m434-quote-mark{width:28px;height:3px;background:var(--blue);margin-bottom:24px}
.quote blockquote,.quote>p{font-family:var(--serif);font-size:clamp(18px,2vw,22px);line-height:1.45;color:var(--ink);margin:0;text-wrap:pretty}
.quote em{font-style:italic;color:var(--blue-deep)}
.quote .cite{margin-top:auto;padding-top:28px;font-family:var(--mono);font-size:12px;line-height:1.7}
.quote .cite .name{color:var(--ink);font-weight:500}
.quote .cite .role{color:var(--grey-500)}
.quote.single{border:0;border-top:2px solid var(--grey-300);padding:32px 0 0;max-width:780px}
.quote.single blockquote{font-size:clamp(22px,2.8vw,30px);max-width:32ch}

/* ---- Text + media ---- */
.wrap.ti{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);align-items:center}
.ti .ti-text{grid-column:span 6}.ti .ti-img{grid-column:8/span 5}
.ti--rev .ti-text{grid-column:7/span 6;order:2}.ti--rev .ti-img{grid-column:1/span 5;order:1}
.ti-text .btn{margin-top:32px}
.m434-ti-list{margin-top:32px}
.m434-ti-list-label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-500);margin-bottom:12px}
.m434-ti-list-items{list-style:none}
.m434-ti-list-item{padding:12px 0 12px 30px;position:relative;font-size:15.5px;color:var(--grey-700);line-height:1.5}
.m434-ti-list-item:last-child{border-bottom:1px solid var(--grey-300)}
.m434-ti-list-item::before{content:"";position:absolute;left:0;top:21px;width:14px;height:2px;background:var(--blue)}
@media(max-width:880px){.ti .ti-text,.ti .ti-img,.ti--rev .ti-text,.ti--rev .ti-img{grid-column:span 12;order:0}.ti .ti-img{order:-1}}

/* ---- CTA band ---- */
.m434-ctab-inner{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.m434-ctab-copy{max-width:60ch}
.m434-ctab-copy h2{font-weight:500;font-size:clamp(28px,4vw,44px);letter-spacing:-.01em;line-height:1.1;max-width:16ch;margin-bottom:24px}
.m434-ctab-copy h2::after{content:"";display:inline-block;width:.5em;height:5px;background:var(--blue);margin-left:.1em;vertical-align:.22em}
.m434-ctab-copy .lede{margin:0}
.m434-ctab-actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.m434-ctab-grid{display:none}
.section.centre .m434-ctab-inner{flex-direction:column;align-items:flex-start;gap:32px}
@media(max-width:560px){.m434-ctab-actions{flex-direction:column;align-items:stretch}.m434-ctab-actions .btn{justify-content:space-between}}

/* ---- Ribbon CTA (proposed markup) ---- */
.ribbon .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;border-top:1px solid var(--ink);border-bottom:1px solid var(--grey-300);padding-block:20px;flex-wrap:wrap}
.ribbon.has-bg-soft .wrap,.ribbon.has-bg-cool .wrap{border:0;padding-block:0}
.ribbon-text{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}
.ribbon-text .m434-eyebrow{margin:0}
.ribbon-text p{font-family:var(--geo);font-weight:500;font-size:clamp(18px,2vw,22px);letter-spacing:-.01em;margin:0}
.section.ribbon{--m434-sy:clamp(24px,3vw,32px)}

/* ---- Logos ---- */
.logos a{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--grey-300);padding:28px 16px;min-height:96px}
.logos img{max-height:32px;width:auto;filter:grayscale(1);opacity:.7;transition:.4s var(--ease)}
.logos a:hover img{filter:grayscale(0);opacity:1}

/* ---- Attachments ---- */
.downloads{list-style:none;max-width:780px}
.download-link{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:20px;padding:18px 0;border-top:1px solid var(--grey-300);position:relative}
.download:last-child .download-link{border-bottom:1px solid var(--grey-300)}
.download-label{font-size:16px;font-weight:500;letter-spacing:-.01em;transition:transform .45s var(--ease)}
.download-meta{font-family:var(--mono);font-size:12px;color:var(--grey-500);white-space:nowrap}
.download-link::after{content:"";width:0;height:2px;background:var(--blue);transition:width .45s var(--ease)}
.download-link:hover .download-label{transform:translateX(14px);color:var(--blue)}
.download-link:hover::after{width:28px}
@media(max-width:560px){.download-link{grid-template-columns:1fr auto}.download-link::after{display:none}}

/* ---- Columns ---- */
.m434-cols__head{margin-bottom:40px}
.m434-cols--fifty-fifty{grid-template-columns:1fr 1fr}.m434-cols--thirty-three{grid-template-columns:repeat(3,1fr)}.m434-cols--twenty-five{grid-template-columns:repeat(4,1fr)}
.m434-cols--thirty-seventy{grid-template-columns:1fr 2fr}.m434-cols--seventy-thirty{grid-template-columns:2fr 1fr}
@media(max-width:880px){.m434-cols--twenty-five{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.m434-cols{grid-template-columns:1fr!important}}